@charset "UTF-8";

:root {
    --nav: #0d1a30;
    --nav-deep: #081120;
    --blue: #1e3a8a;
    --blue-dark: #152a5f;
    --blue-soft: #eef2ff;
    --bg: #f4f6fa;
    --surface: #fff;
    --text: #18283f;
    --muted: #75849a;
    --border: #e4eaf2;
    --green: #15846b;
    --red: #c74860;
    --amber: #b17619;
    --radius: 14px;
    --shadow: 0 3px 18px rgb(24 44 82 / 4%);
    --sidebar-width: 236px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-synthesis: none;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    color-scheme: light;
}
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; }
body, input, button, select, textarea { font-family: inherit; }
button, input, select, textarea { font-size: 13px; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, select { cursor: pointer; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
a, button, input, select { transition: color .18s, background-color .18s, border-color .18s, box-shadow .18s; }
button { line-height: 1.5; }
button:disabled { opacity: .5; cursor: not-allowed; }
:focus-visible { outline: 3px solid #96b6ff; outline-offset: 3px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 26px; line-height: 1.45; letter-spacing: -.7px; font-weight: 650; }
h2 { font-size: 15px; line-height: 1.6; font-weight: 650; }
h3 { font-size: 14px; font-weight: 650; }
small { font-size: 11px; }
strong { font-weight: 600; }
svg { vertical-align: middle; }
.ui-icon { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; }
code, pre, .mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 12px; }
code { overflow-wrap: anywhere; }
pre { margin: 18px 0; padding: 21px 23px; overflow: auto; border: 1px solid #253c5a; border-radius: 10px; background: #13243d; color: #cfe3ff; line-height: 1.85; tab-size: 4; }
pre code { white-space: pre; overflow-wrap: normal; }
fieldset { min-width: 0; }
.muted { color: var(--muted); }
.danger-text { color: var(--red) !important; }
.break-all { overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
.grow { flex: 1; min-width: 0; }
.full { width: 100%; }
.inline { display: inline-flex; margin: 0; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.stack p { margin-bottom: 0; }

/* Shared site branding, configured in system settings. */
.brand-mark.brand-custom { padding: 0; overflow: hidden; background: transparent; border-color: transparent; box-shadow: none; }
.brand-logo-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.auth-footer .auth-icp { display: block; margin-top: 10px; color: #8a9db8; font-size: 10px; overflow-wrap: anywhere; }
.page-footer .workspace-icp { color: #889bb8; font-size: inherit; overflow-wrap: anywhere; }
.page-settings .settings-brand-preview { grid-column: 1/-1; min-width: 0; padding: 20px; border: 1px solid #dde7f7; border-radius: 10px; background: #f9fbff; }
.page-settings .settings-brand-label { display: block; margin-bottom: 13px; color: #536b89; font-size: 12px; font-weight: 550; }
.page-settings .settings-brand-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 17px; }
.page-settings .settings-brand-row > div { flex: 1; min-width: 0; }
.page-settings .settings-brand-row strong { display: block; color: #5c779b; font-size: 12px; font-weight: 550; }
.page-settings .settings-brand-row small { display: block; margin-top: 5px; color: #8da1bc; font-size: 10px; line-height: 1.8; }
.page-settings .settings-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; flex-shrink: 0; border: 1px solid #d8e5fb; border-radius: 12px; background: #ecf3ff; color: #6388c1; font: 27px/1.4 "SimSun",serif; }
.page-settings .settings-brand-mark.brand-custom { padding: 5px; background: #fff; }
.page-settings .settings-logo-field { width: 100%; }
.page-settings .settings-logo-field small { color: #94a5bd; font-size: 10px; }
.page-settings .settings-logo-field input[type="file"] { min-width: 0; max-width: 100%; padding: 8px; background: #fff; font-size: 11px; }
.page-settings input[type="file"]::file-selector-button { margin-right: 11px; padding: 6px 11px; border: 1px solid #dbe6f8; border-radius: 5px; color: #5a7eaf; background: #f1f6ff; font: inherit; cursor: pointer; }
.page-settings .settings-logo-remove { margin-top: 15px; color: #9e7581; font-size: 11px; }
@media(max-width:720px) { .page-settings .settings-brand-preview { padding: 16px; } .page-settings .settings-brand-row { gap: 11px; } .page-settings .settings-brand-row > .btn { margin-left: auto; } .page-settings .settings-brand-row small { font-size: 9px; } .auth-footer .auth-icp { font-size: 9px; } }

/* Persistent desktop workspace */
.sidebar { position: fixed; z-index: 50; inset: 0 auto 0 0; display: flex; flex-direction: column; width: var(--sidebar-width); padding: 27px 17px 20px; overflow-y: auto; overscroll-behavior: contain; color: #b6c5db; background: var(--nav); background-image: linear-gradient(180deg, var(--nav-deep) 0%, var(--nav) 55%); border-right: 1px solid #17293f; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0 8px 27px; color: #fff; font-size: 15px; font-weight: 650; }
.brand > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.brand:hover { color: #fff; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 39px; border: 1px solid #5476c9; border-radius: 10px; color: #fff; background: #1e3a8a; background-image: linear-gradient(135deg, #24488f, #1e3a8a); font-family: "Songti SC", "SimSun", serif; font-size: 24px; box-shadow: 0 5px 14px rgb(0 0 0 / 18%); }
.brand small { display: block; margin-top: 4px; color: #8a9fbe; font-size: 9px; letter-spacing: 1.8px; font-weight: 400; }
.nav-caption { margin: 16px 15px 9px; color: #6f86a7; font-size: 10px; letter-spacing: 1.2px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 43px; margin: 4px 0; padding: 10px 14px; border: 1px solid transparent; border-radius: 9px; color: #a9bbd4; font-size: 12px; }
.nav-item:hover { color: #fff; background: #192f4c; }
.nav-item.active { color: #fff; background: #1e3a8a; background-image: linear-gradient(90deg, #1a357f, #2b54b0); border-color: #375d9c; box-shadow: 0 6px 16px rgb(0 0 0 / 24%); }
.nav-item.active::after { content: ""; position: absolute; right: 11px; width: 4px; height: 4px; border-radius: 50%; background: #9ec2ff; }
.nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: #829bbd; }
.nav-icon .ui-icon { width: 18px; height: 18px; }
.nav-item.active .nav-icon, .nav-item:hover .nav-icon { color: #e0ecff; }
.sidebar-foot { margin-top: auto; padding: 22px 12px 0; font-size: 10px; color: #9bb0ce; }
.sidebar-foot::before { content: ""; display: block; height: 1px; margin-bottom: 18px; background: #263953; }
.sidebar-foot small { display: block; margin-top: 8px; font-size: 9px; letter-spacing: 1.4px; color: #617b9c; }
.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #43b99a; }
.app-main { min-width: 0; min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 72px; padding: 0 30px; border-bottom: 1px solid var(--border); background: rgb(255 255 255 / 96%); backdrop-filter: blur(12px); }
.topbar-left { display: flex; align-items: center; gap: 13px; min-width: 0; white-space: nowrap; color: #8895a8; font-size: 11px; }
.topbar-left strong { overflow: hidden; text-overflow: ellipsis; color: #344760; font-weight: 550; }
.workspace-label { display: inline-flex; align-items: center; gap: 7px; }
.workspace-label .ui-icon { width: 15px; height: 15px; }
.separator { color: #c2cbd9; }
.topbar-right { display: flex; align-items: center; gap: 19px; }
.workspace-pill { display: flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid #e3eaf5; border-radius: 6px; color: #71849c; font-size: 10px; }
.workspace-pill .ui-icon { width: 13px; height: 13px; color: #587cc0; }
.user-menu { display: flex; align-items: center; gap: 10px; }
.avatar { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border: 1px solid #dce6f9; border-radius: 10px; color: #3c65b3; background: #edf3ff; font-size: 13px; }
.user-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.35; }
.user-name small { display: block; margin-top: 3px; color: #96a1b2; font-size: 9px; }
.user-menu .text-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: 4px; border: 1px solid #e6ebf4; border-radius: 8px; font-size: 10px; }
.menu-toggle { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; padding: 0; border: 1px solid #e4eaf4; border-radius: 9px; color: #416081; background: #fff; }
.sidebar-overlay, .mobile-dock { display: none; }
.content { width: 100%; max-width: none; min-height: calc(100vh - 72px); margin: 0; padding: 28px 30px 0; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 88px; margin-bottom: 25px; }
.heading-main { display: flex; align-items: center; gap: 15px; min-width: 0; }
.heading-mark { display: inline-flex; align-items: center; justify-content: center; width: 49px; height: 49px; flex-shrink: 0; border: 1px solid #c9d8f8; border-radius: 13px; background: #e8efff; color: #1e3a8a; }
.heading-mark .ui-icon { width: 24px; height: 24px; }
.heading-copy { min-width: 0; }
.eyebrow { margin-bottom: 5px; color: #8d9aaf; font-size: 9px; line-height: 1.5; font-weight: 600; letter-spacing: 1.8px; }
.page-heading h1 { margin-bottom: 4px; }
.page-heading p { margin: 0; max-width: 880px; color: #7b8ba2; font-size: 12px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 26px 0 13px; }
.section-heading h2 { margin: 0; }
.section-heading a { font-size: 11px; }
.page-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 28px; padding: 22px 0; border-top: 1px solid var(--border); color: #97a3b4; font-size: 10px; }

/* Actions and structured surfaces */
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-height: 39px; padding: 9px 17px; border: 1px solid var(--blue); border-radius: 8px; color: #fff; background: var(--blue); background-image: linear-gradient(180deg, #27509e, #1e3a8a); font-size: 12px; font-weight: 500; line-height: 1.55; white-space: nowrap; box-shadow: 0 3px 8px rgb(30 58 138 / 16%); }
.btn:hover { color: #fff; background: var(--blue-dark); background-image: linear-gradient(180deg, #1e3a8a, #152a5f); border-color: var(--blue-dark); box-shadow: 0 4px 12px rgb(30 58 138 / 24%); }
.btn.secondary { color: #546a88; background: #fff; border-color: #dce4f0; box-shadow: none; }
.btn.secondary:hover { color: var(--blue); background: #f5f8ff; border-color: #b6caf2; }
.btn.small { min-height: 31px; padding: 5px 11px; border-radius: 6px; font-size: 11px; }
.btn.danger-outline { color: var(--red); background: #fff; border-color: #edcbd3; box-shadow: none; }
.btn.danger-outline:hover { background: #fff3f5; border-color: #db9eac; }
.text-btn { padding: 0; border: 0; background: transparent; color: var(--blue); font-size: 12px; line-height: 1.6; white-space: nowrap; }
.text-btn:hover { color: var(--blue-dark); }
.actions { display: flex; flex-wrap: wrap; gap: 9px 13px; align-items: center; }
.actions a { font-size: 12px; white-space: nowrap; }
.panel { min-width: 0; margin-bottom: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; min-height: 62px; padding: 17px 23px; border-bottom: 1px solid #edf0f6; }
.panel-heading h2 { display: flex; align-items: center; gap: 9px; margin: 0; }
.panel-heading h2::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: #1e3a8a; }
.panel-heading > .muted { font-size: 11px; }
.panel-heading > a { font-size: 11px; }
.panel-body { padding: 23px; }
.panel-bottom { padding: 16px 23px; border-top: 1px solid #edf0f6; }
.panel > .table-wrap:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.panel > .table-wrap:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.panel > .table-wrap:only-child { border-radius: var(--radius); }
.stats-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { position: relative; min-width: 0; padding: 19px 21px 17px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.stat-label { display: flex; align-items: center; justify-content: space-between; gap: 7px; color: #72829a; font-size: 12px; }
.stat-index { display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; border-radius: 9px; color: #517ddd; background: #eff4ff; }
.stat-index .ui-icon { width: 17px; height: 17px; }
.stat-card > strong { display: block; margin: 2px 0 6px; color: #203953; font-size: clamp(24px,2.1vw,34px); line-height: 1.5; letter-spacing: -.8px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-card > small { color: #8c9aaf; font-size: 10px; }
.stat-card:first-child { background: #1e3a8a; background-image: linear-gradient(135deg, #1a357f, #2b54b0); border-color: #31548f; }
.stat-card:first-child .stat-label { color: #d4e2ff; }
.stat-card:first-child > strong { color: #fff; }
.stat-card:first-child > small { color: #b7ceff; }
.stat-card:first-child .stat-index { color: #fff; background: #33549b; }
.stat-card:nth-child(2) .stat-index, .stat-card:nth-child(8) .stat-index { color: #239f88; background: #eaf8f3; }
.stat-card:nth-child(4) .stat-index, .stat-card:nth-child(6) .stat-index { color: #bd8b38; background: #fff6e8; }
.stat-card:nth-child(7) .stat-index { color: #c65b71; background: #fff0f3; }
.usage-panel { overflow: hidden; }
.usage-chart { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 16px; padding: 25px 28px 22px; background-image: repeating-linear-gradient(to top,transparent 0,transparent 40px,#f1f4f9 40px,#f1f4f9 41px); }
.usage-column { display: flex; flex-direction: column; align-items: center; min-width: 0; gap: 10px; }
.usage-column > strong { color: #57708f; font-size: 12px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.usage-column > small { color: #8293ab; font-size: 10px; }
.usage-track { display: flex; align-items: flex-end; width: 100%; max-width: 58px; height: 130px; border-radius: 5px 5px 0 0; background: #f0f4fb; }
.usage-track > span { width: 100%; min-height: 2px; border-radius: 5px 5px 0 0; background: linear-gradient(0deg,#1e3a8a,#5f84e8); }
.setup-steps { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.setup-steps p { display: block; margin: 0; padding: 16px 18px; border: 1px solid #e8edf6; border-radius: 9px; background: #fafcff; color: #6c809a; font-size: 12px; }
.setup-steps a { display: inline-block; margin-left: 4px; }
.guide-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.guide-card { display: flex; align-items: center; gap: 15px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); background: #fff; }
.guide-card:hover { border-color: #b3c9ef; }
.guide-card div { flex: 1; }
.guide-card h3 { margin: 0 0 5px; }
.guide-card p { margin: 0; color: var(--muted); font-size: 11px; }
.guide-symbol { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; color: #4779dc; background: #edf3ff; }

/* Desktop data tables; mobile cards retain the original controls */
.table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
th { height: 46px; padding: 12px 21px; border-bottom: 1px solid #e8edf5; color: #8090a7; background: #f8fafd; font-size: 10px; font-weight: 550; white-space: nowrap; letter-spacing: .25px; }
td { padding: 17px 21px; border-bottom: 1px solid #edf1f6; color: #5c708b; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fafcff; }
td strong { color: #2b4462; font-size: 12px; }
td small { display: block; margin-top: 5px; color: #93a0b4; font-size: 10px; line-height: 1.7; }
td .tags { max-width: 350px; }
td .actions { min-width: 100px; }
td .actions > a, td .actions .text-btn { display: inline-flex; align-items: center; min-height: 29px; padding: 3px 7px; border-radius: 5px; color: #3869c3; background: #f0f5ff; font-size: 11px; }
td .actions .danger-text { background: #fff2f4; }
.amount { color: #254b80; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tag,.badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 3px 8px; border-radius: 5px; font-size: 10px; line-height: 1.65; white-space: nowrap; }
.tag { border: 1px solid #e6ecf5; color: #6b82a1; background: #f2f6fb; }
.tag.blue { color: #3c6ac3; background: #edf3ff; border-color: #dfebff; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.badge::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.badge.success { color: var(--green); background: #eaf8f2; }
.badge.neutral { color: #8594aa; background: #f0f3f8; }
.badge.warning { color: var(--amber); background: #fff5e4; }
.badge.danger { color: var(--red); background: #fff0f3; }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 190px; padding: 28px; color: #9aa7ba; text-align: center; }
.empty strong { color: #73869f; font-size: 13px; font-weight: 500; }
.empty > span:last-child { font-size: 11px; }
.empty-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 7px; border: 1px solid #e1e9f7; border-radius: 14px; color: #85a5da; background: #f3f7ff; }
.empty-icon .ui-icon { width: 23px; height: 23px; }
.empty.compact { min-height: 110px; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 21px; border-top: 1px solid #edf1f6; color: #8b9bb1; font-size: 11px; }
.pagination > .actions { gap: 8px; }
.tabs { display: flex; align-items: center; gap: 6px; max-width: 100%; margin: 0 0 19px; overflow-x: auto; padding: 5px; border: 1px solid #e4eaf3; border-radius: 10px; background: #eaf0f8; scrollbar-width: none; }
.tab { flex-shrink: 0; padding: 7px 16px; border: 1px solid transparent; border-radius: 7px; color: #7b8ca4; font-size: 12px; }
.tab:hover { background: #f4f7fc; }
.tab.active { color: #1e3a8a; border-color: #e4eaf4; background: #fff; font-weight: 550; box-shadow: 0 2px 4px rgb(24 44 82 / 4%); }

/* Forms, filters and configuration editors */
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 21px 28px; width: 100%; max-width: none; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; font-size: 12px; }
.field > span { color: #536b89; font-size: 12px; font-weight: 550; }
input:not([type="checkbox"]):not([type="hidden"]),select,textarea { width: 100%; min-height: 42px; padding: 10px 13px; border: 1px solid #dbe4f0; border-radius: 8px; color: #334e71; background: #fcfdff; font-size: 12px; line-height: 1.65; outline: none; }
input::placeholder,textarea::placeholder { color: #a6b3c6; }
input:focus,select:focus,textarea:focus { border-color: #83a7f3 !important; background: #fff; box-shadow: 0 0 0 3px rgb(37 99 235 / 8%); }
input[readonly] { background: #f2f5fa !important; color: #8494aa; border-style: dashed; }
input[type="number"] { font-variant-numeric: tabular-nums; }
input[type="checkbox"] { flex-shrink: 0; width: 15px; height: 15px; margin: 0; accent-color: var(--blue); }
select { padding-right: 30px; text-overflow: ellipsis; }
.form-note,.form-actions,.feature-options { grid-column: 1/-1; }
.form-note { padding: 12px 15px; border-left: 2px solid #c4d5f6; border-radius: 0 6px 6px 0; color: #8797ad; background: #f8faff; font-size: 11px; line-height: 1.9; }
.form-actions { display: flex; align-items: center; gap: 12px; padding-top: 8px; }
.form-actions .btn { min-width: 128px; }
.feature-options { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 16px; border: 1px solid #e0e8f4; border-radius: 9px; }
.feature-options legend { padding: 0 7px; color: #5b7290; font-size: 12px; }
.feature-options label { display: inline-flex; align-items: center; gap: 9px; padding: 10px 15px; border: 1px solid #e2e9f3; border-radius: 7px; color: #627a9a; font-size: 12px; background: #fafcff; }
.feature-options label:has(input:checked) { border-color: #b9cdf9; background: #eff4ff; color: #285fbe; }
.check { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; }
.help { margin: 0 0 17px; color: #8b9bb0; font-size: 11px; line-height: 1.9; }
.help:last-child { margin-bottom: 0; }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; max-width: none; }
.inline-form .field { flex: 1; min-width: 190px; }
.inline-form .field:has(input[name="priority"]) { flex: 0 0 120px; min-width: 90px; }
.inline-form .btn { min-height: 42px; }
.filter-form { display: flex; align-items: center; gap: 8px; }
.filter-form input { max-width: 130px; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 13px; margin-bottom: 20px; padding: 17px 21px; border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.filter-bar .field { flex: 1 1 140px; gap: 6px; }
.filter-bar .field:has(input[name="q"]) { flex: 2 1 270px; }
.filter-bar .field > span { font-size: 10px; color: #8392a8; }
.filter-bar input,.filter-bar select { min-height: 38px; padding: 8px 11px; background: #f7f9fd; }
.filter-actions { display: flex; align-items: center; gap: 14px; min-height: 38px; }
.filter-actions .btn { min-height: 38px; }
.filter-actions a { color: #8191aa; font-size: 11px; }
.check-account,.maintenance-note { margin-top: 17px; }
.route-mode-form { margin-bottom: 12px; padding: 15px; border: 1px solid #e4ebf6; border-radius: 9px; background: #f7faff; }
.route-mode-form .field { flex: 0 1 360px; }
.notice { display: block; margin-bottom: 20px; padding: 14px 18px; border: 1px solid #dce7fd; border-radius: 9px; color: #587bac; background: #f0f5ff; font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.notice.success { color: #327f66; background: #eef9f4; border-color: #d5eddf; }
.notice.error { color: #b34c61; background: #fff3f6; border-color: #f1d5dd; }
.notice.warning { color: #9d753a; background: #fffbf1; border-color: #efe3c7; }
.panel-body > .notice { margin-top: 18px; margin-bottom: 0; }
.panel-body > .notice + form { margin-top: 20px; }
.error-panel { padding: 32px; border-top: 3px solid #c86479; }
.error-panel p { color: var(--muted); margin-bottom: 24px; }
.detail-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; padding: 25px 23px; }
.detail-grid > div { min-width: 0; padding-left: 14px; border-left: 2px solid #eaf0f9; }
.detail-grid span { display: block; margin-bottom: 9px; color: #8b9bb2; font-size: 10px; }
.detail-grid strong { display: block; color: #355576; font-size: 14px; font-weight: 550; overflow-wrap: anywhere; }
.detail-grid small { display: block; margin-top: 6px; color: #95a4b8; font-size: 10px; overflow-wrap: anywhere; }
.detail-grid em { color: #9ba8bc; font-size: 11px; font-style: normal; }
.credential-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }
.credential-row .field { min-width: 230px; }
.credential-row .btn { min-height: 42px; }
.endpoint { margin-top: 14px; padding: 15px 17px; border: 1px solid #e3eaf5; border-radius: 8px; background: #f8faff; }
.endpoint span { display: block; margin-bottom: 6px; color: #8a9ab1; font-size: 10px; }
.endpoint code { color: #4d729f; font-size: 11px; }
.copy-endpoint { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.copy-endpoint > div { min-width: 0; }
.copy-endpoint .btn { flex-shrink: 0; }
.copy-endpoint code { overflow-wrap: anywhere; }
.purchase-panel { border-top: 3px solid #3d72e1; }
.purchase-panel .plan-summary-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 17px; margin-top: 25px; padding-top: 24px; border-top: 1px solid #edf1f7; }
.mini-plan { padding: 21px; border: 1px solid #e1e8f4; border-radius: 11px; background: #f9fbff; }
.mini-plan > strong { display: block; color: #486581; font-size: 13px; }
.mini-plan:nth-child(2) { border-color: #c7d8fb; background: #f0f5ff; }
.plan-price { display: block; margin: 11px 0 16px; color: #2859ac; font-size: 28px; font-weight: 650; letter-spacing: -.6px; }
.plan-price small { color: #93a5bd; font-size: 10px; font-weight: 400; letter-spacing: 0; }
.mini-plan p { margin: 17px 0 0; padding-top: 13px; border-top: 1px solid #e5ecf7; color: #91a0b6; font-size: 10px; }
.manual-paid { min-width: 90px; max-width: 270px; }
.manual-paid summary { color: var(--blue); font-size: 12px; cursor: pointer; white-space: nowrap; }
.manual-paid .stack { gap: 13px; margin-top: 14px; padding: 15px; border: 1px solid #eed9df; border-radius: 8px; background: #fffafb; }
.manual-paid p { min-width: 140px; font-size: 11px; line-height: 1.9; }
.manual-paid .check { font-size: 11px; white-space: nowrap; }
.log-detail { min-width: 190px; max-width: 560px; overflow-wrap: anywhere; color: #8292a8; font-size: 11px; line-height: 1.9; }

/* Distinct layouts for each workspace */
.management-workgrid,.dashboard-workgrid { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; align-items: start; }
.management-list,.management-editor,.dashboard-primary,.dashboard-secondary { min-width: 0; }
@media (min-width: 1440px) {
    .management-workgrid { grid-template-columns: minmax(0,1.55fr) minmax(360px,.9fr); gap: 23px; }
    .management-editor { position: sticky; top: 94px; }
    .management-editor .form-grid { grid-template-columns: 1fr; gap: 18px; }
    .management-editor .panel-heading { background: #f9fbff; border-radius: 13px 13px 0 0; }
    .management-editor .feature-options { gap: 8px; }
    .management-editor .feature-options label { padding: 8px 10px; font-size: 10px; }
    .management-list td,.management-list th { padding-inline: 16px; }
    .dashboard-workgrid { grid-template-columns: minmax(0,1.5fr) minmax(340px,1fr); gap: 23px; }
    .dashboard-secondary .setup-steps { grid-template-columns: 1fr; }
    .dashboard-secondary .setup-steps p { padding: 12px 14px; font-size: 11px; }
    .dashboard-secondary th,.dashboard-secondary td { padding-inline: 15px; }
}
@media (min-width: 1920px) {
    .management-editor .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .dashboard-secondary .setup-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
.page-profile .content > .panel,.page-settings .content > .panel { border-top: 3px solid #4478e3; }
.page-profile .form-grid,.page-settings .form-grid { gap: 23px 32px; }
.page-profile .panel-heading,.page-settings .panel-heading { background: #fafcff; border-radius: 12px 12px 0 0; }
.page-order .content > .panel:first-of-type { border-top: 3px solid #3970d9; }
.page-order .content > .panel:first-of-type .detail-grid > div:nth-child(4) strong { color: #255dbe; font-size: 23px; font-variant-numeric: tabular-nums; }
.page-rental .content > .panel:first-of-type { border-top: 3px solid #3674da; }
.page-rental .content > .panel:first-of-type .detail-grid { background: #fafcff; }
.page-maintenance .detail-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
.page-maintenance .detail-grid strong { font-size: 27px; color: #315d98; font-variant-numeric: tabular-nums; }
.page-maintenance .maintenance-note { padding: 11px 14px; border-radius: 7px; background: #f8faff; }
.page-plans .content > .panel:first-of-type td:nth-child(2) { color: #2d5aa0; font-size: 17px; font-weight: 600; }
.page-accounts #account-editor,.page-users #user-editor,.page-plans #plan-editor { scroll-margin-top: 95px; }
.docs-layout { display: grid; grid-template-columns: 185px minmax(0,1fr); gap: 23px; align-items: start; }
.docs-toc { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 5px; padding: 17px 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.docs-toc strong { padding: 5px 12px 15px; color: #455f7f; font-size: 12px; }
.docs-toc a { padding: 9px 12px; border-radius: 7px; color: #8192aa; font-size: 11px; }
.docs-toc a:hover { color: var(--blue); background: var(--blue-soft); }
.docs-content { min-width: 0; }
.prose { padding: 25px; color: #6a809d; font-size: 12px; line-height: 2.1; }
.prose p { margin-bottom: 17px; overflow-wrap: anywhere; }
.prose p:last-child { margin-bottom: 0; }
.prose h3 { margin: 26px 0 13px; color: #3d5a7d; font-size: 13px; }
.prose > h3:first-child { margin-top: 0; }
.prose p code,.prose td code { padding: 3px 6px; border-radius: 4px; color: #3c6eaf; background: #eff4fd; font-size: 11px; }
.prose table { margin: 14px 0; border: 1px solid #e6edf7; }
.prose td,.prose th { padding: 11px 16px; }
.method { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 4px; color: #228267; background: #eaf7f1; font-size: 10px; font-weight: 600; }
.method.post { color: #4678c9; background: #edf4ff; }

/* Light split authentication pages */
.auth-body { min-height: 100vh; background: #fff; }
.auth-wrap { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; padding: 0; }
.auth-visual { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 100vh; padding: 40px 11%; overflow: hidden; border-right: 1px solid #e3eaf5; background: #f1f5fd; }
.auth-visual::before { content: ""; position: absolute; z-index: 0; inset: 26% -15% 0; background: radial-gradient(ellipse at 50% 42%,#dbe7ff 0,transparent 63%); pointer-events: none; }
.auth-visual > * { position: relative; z-index: 1; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin: 0; color: #294466; font-size: 17px; font-weight: 650; }
.auth-brand:hover { color: #294466; }
.auth-brand .brand-mark { border-color: #487cf0; }
.auth-overline { margin-bottom: 11px; color: #5e7eaf; font-size: 10px; font-weight: 600; letter-spacing: 2px; }
.auth-intro { width: 100%; margin: 45px 0; }
.auth-intro h2 { margin-bottom: 13px; color: #284570; font-size: clamp(27px,2.6vw,40px); line-height: 1.45; letter-spacing: -1px; font-weight: 650; }
.auth-intro > p { color: #8497b3; font-size: 12px; line-height: 1.9; }
.connection-visual { position: relative; width: 100%; max-width: 410px; margin: 40px 0 14px; padding: 27px 24px; border: 1px solid #dae5f7; border-radius: 16px; background: #fff; box-shadow: 0 15px 30px rgb(41 76 139 / 5%); }
.connection-head { display: flex; align-items: center; gap: 13px; padding-bottom: 22px; border-bottom: 1px solid #edf2fa; }
.connection-emblem { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid #d7e4ff; border-radius: 12px; color: #4776d1; background: #eef4ff; }
.connection-head strong { display: block; color: #466186; font-size: 13px; }
.connection-head small { display: block; margin-top: 3px; color: #a3b1c5; font-size: 9px; letter-spacing: 1px; }
.connection-nodes { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding-top: 35px; }
.connection-nodes::before { content: ""; position: absolute; left: 16%; right: 16%; top: 19px; height: 1px; background: #d4e2fa; }
.connection-node { position: relative; padding: 11px 4px; border: 1px solid #e3ebf8; border-radius: 8px; color: #6683ae; background: #f8faff; font-size: 10px; text-align: center; }
.connection-node::before { content: ""; position: absolute; width: 1px; height: 16px; left: 50%; top: -17px; background: #d4e2fa; }
.auth-visual-foot { color: #9aaac0; font-size: 10px; letter-spacing: .8px; }
.auth-form-side { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 100vh; padding: 42px 9%; background: #fff; }
.auth-mobile-brand { display: none; }
.auth-card { width: 100%; max-width: 390px; padding: 0; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.auth-card h1 { margin: 8px 0; color: #223a5b; font-size: 27px; }
.auth-card > .muted { margin-bottom: 32px; color: #94a1b5; font-size: 12px; }
.auth-card .eyebrow { color: #5379b2; font-size: 10px; }
.auth-card input { min-height: 46px; background: #fbfcff; font-size: 13px; }
.auth-card .field { gap: 9px; }
.auth-card .btn { min-height: 45px; margin-top: 5px; font-size: 13px; }
.auth-card .stack { gap: 21px; }
.code-row { display: flex; gap: 9px; }
.code-row input { flex: 1; min-width: 0; letter-spacing: 3px; }
.code-row .btn { flex: 0 0 auto; min-height: 46px; white-space: nowrap; }
.auth-link { margin-top: 25px; padding-top: 21px; border-top: 1px solid #edf1f7; color: #8e9eb5; font-size: 11px; text-align: center; }
.auth-link a { margin-left: 6px; }
.auth-footer { width: 100%; max-width: 390px; margin: 37px 0 0; color: #acb7c7; font-size: 10px; text-align: center; }

/* In-place checkout */
.payment-dialog { width: min(472px,calc(100vw - 30px)); max-height: calc(100dvh - 36px); margin: auto; padding: 0; overflow-y: auto; border: 1px solid #e1e8f4; border-radius: 18px; color: var(--text); background: #fff; box-shadow: 0 30px 100px rgb(9 28 65 / 27%); }
.payment-dialog::backdrop { background: rgb(10 25 49 / 53%); backdrop-filter: blur(4px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 23px 26px 18px; border-bottom: 1px solid var(--border); }
.dialog-heading h2 { margin: 0; font-size: 20px; color: #284b7d; }
.dialog-heading .eyebrow { margin-bottom: 5px; color: #93a6c0; font-size: 9px; }
.dialog-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid #e5ebf5; border-radius: 9px; color: #8296b0; background: #f5f8fd; font-size: 23px; font-weight: 300; }
.dialog-close:hover { color: #3d5d88; background: #eaf0fa; }
.dialog-body { padding: 22px 26px 25px; text-align: center; }
.dialog-body > .muted { margin-bottom: 19px; color: #8da0b8; font-size: 10px; overflow-wrap: anywhere; }
.qr-frame { display: flex; align-items: center; justify-content: center; width: 266px; height: 266px; max-width: 100%; margin: 0 auto 20px; padding: 12px; border: 1px solid #dce7f9; border-radius: 12px; background: #fff; box-shadow: 0 0 0 5px #f5f8fe; }
.qr-frame img,.qr-frame canvas { display: block; width: 240px; height: 240px; max-width: 100%; object-fit: contain; }
#pay-qr-local { max-width: 100%; }
#pay-loading { max-width: 210px; padding: 15px; color: #8da1bf; font-size: 12px; line-height: 2; }
#pay-state { margin: 0 0 15px; color: #537aaf; font-size: 12px; overflow-wrap: anywhere; }
#pay-state.paid-state { color: var(--green); font-size: 14px; font-weight: 600; }
#pay-state.pending-service-state { color: var(--amber); font-size: 13px; font-weight: 600; }
.dialog-body > .help { color: #9aa9bf; font-size: 10px; line-height: 1.9; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 21px 0 15px; }

@media (min-width: 1600px) {
    :root { --sidebar-width: 248px; }
    .content { padding: 32px 38px 0; }
    .topbar { padding: 0 38px; }
    .page-heading { margin-bottom: 27px; }
    .stat-card { padding: 22px 25px; }
    .panel-body { padding: 27px; }
    .usage-track { max-width: 78px; }
}
@media (max-width: 1200px) and (min-width: 961px) {
    :root { --sidebar-width: 212px; }
    .sidebar { padding: 24px 12px; }
    .brand { gap: 9px; font-size: 13px; padding-inline: 4px; }
    .brand-mark { width: 32px; height: 35px; }
    .content { padding: 23px 22px 0; }
    .topbar { padding-inline: 22px; }
    .workspace-pill { display: none; }
    .stat-card { padding: 16px; }
    .stats-grid { gap: 12px; }
    .stat-card > strong { font-size: 27px; }
    .detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .page-maintenance .detail-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    th,td { padding-inline: 16px; }
    .docs-layout { grid-template-columns: 150px minmax(0,1fr); gap: 16px; }
}
@media (max-width: 960px) {
    :root { --sidebar-width: 236px; }
    .sidebar { transform: translateX(-100%); transition: transform .22s ease; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
    .app-main { margin-left: 0; }
    .menu-toggle { display: flex; }
    .menu-open .sidebar { transform: translateX(0); }
    .menu-open .sidebar-overlay { display: block; position: fixed; z-index: 45; inset: 0; width: 100%; height: 100%; border: 0; background: rgb(11 28 54 / 45%); backdrop-filter: blur(2px); }
    .menu-open { overflow: hidden; }
    .topbar { height: 64px; padding: 0 22px; }
    .content { min-height: calc(100vh - 64px); padding: 24px 22px 0; }
    .workspace-pill { display: none; }
    .auth-visual { padding: 32px 8%; }
    .auth-form-side { padding: 40px 9%; }
    .auth-intro h2 { font-size: 29px; }
    .connection-visual { padding: 22px 17px; }
    .connection-nodes { gap: 7px; }
}
@media (max-width: 720px) {
    html { scroll-padding-top: 82px; }
    .topbar { height: 61px; gap: 10px; padding: 0 15px; }
    .topbar-left { gap: 9px; font-size: 11px; }
    .workspace-label,.topbar-left .separator { display: none; }
    .topbar-left strong { color: #304c72; font-size: 13px; }
    .user-name { max-width: 86px; font-size: 10px; }
    .user-name small { font-size: 8px; }
    .avatar { width: 30px; height: 32px; border-radius: 8px; font-size: 11px; }
    .user-menu { gap: 7px; }
    .user-menu .text-btn { width: 30px; height: 32px; font-size: 9px; margin-left: 0; }
    .content { min-height: calc(100vh - 61px); padding: 20px 15px calc(77px + env(safe-area-inset-bottom)); }
    .page-heading { align-items: flex-start; flex-wrap: wrap; gap: 14px; min-height: auto; margin-bottom: 21px; }
    .heading-main { gap: 11px; width: 100%; }
    .heading-mark { width: 42px; height: 44px; border-radius: 12px; }
    .heading-mark .ui-icon { width: 21px; height: 21px; }
    .page-heading h1 { margin-bottom: 4px; font-size: 22px; letter-spacing: -.4px; }
    .page-heading p { font-size: 11px; line-height: 1.85; }
    .eyebrow { margin-bottom: 3px; font-size: 8px; letter-spacing: 1.5px; }
    .page-heading > .btn { min-height: 37px; margin-left: 53px; padding: 7px 13px; font-size: 11px; }
    .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; margin-bottom: 20px; }
    .stat-card { padding: 14px; border-radius: 11px; }
    .stat-label { font-size: 10px; gap: 4px; }
    .stat-index { width: 25px; height: 25px; border-radius: 7px; }
    .stat-index .ui-icon { width: 14px; height: 14px; }
    .stat-card > strong { margin: 3px 0 4px; font-size: 26px; }
    .stat-card > small { display: block; font-size: 9px; line-height: 1.6; }
    .panel { margin-bottom: 17px; border-radius: 12px; }
    .panel-heading { min-height: 55px; gap: 9px; padding: 15px 17px; }
    .panel-heading h2 { font-size: 13px; }
    .panel-heading > .muted { font-size: 10px; }
    .panel-body,.prose { padding: 19px 17px; }
    .panel-bottom { padding: 14px 17px; }
    .section-heading { margin: 23px 1px 12px; }
    .section-heading h2 { font-size: 13px; }
    .usage-chart { gap: 8px; padding: 22px 16px 18px; }
    .usage-track { height: 100px; max-width: 36px; }
    .usage-column { gap: 8px; }
    .usage-column > strong { font-size: 10px; }
    .usage-column > small { font-size: 9px; }
    .setup-steps,.guide-grid { grid-template-columns: 1fr; gap: 10px; }
    .setup-steps p { padding: 13px 14px; font-size: 11px; }
    .guide-card { padding: 17px; }
    .filter-bar { gap: 11px; padding: 15px; border-radius: 11px; }
    .filter-bar .field { flex-basis: calc(50% - 11px); min-width: 0; }
    .filter-bar .field:has(input[name="q"]) { flex-basis: 100%; }
    .filter-bar .field > span { font-size: 10px; }
    .filter-bar input,.filter-bar select { min-height: 42px; font-size: 12px; }
    .filter-actions { flex-basis: 100%; justify-content: flex-end; padding-top: 2px; }
    .filter-actions .btn { min-height: 39px; padding-inline: 24px; }
    .form-grid { grid-template-columns: 1fr; gap: 19px; }
    .field > span { font-size: 11px; }
    input:not([type="checkbox"]):not([type="hidden"]),select,textarea { min-height: 44px; font-size: 13px; }
    .form-note { font-size: 10px; padding: 12px; }
    .form-actions .btn { width: 100%; min-height: 44px; }
    .feature-options { gap: 9px; padding: 13px; }
    .feature-options label { padding: 9px 12px; font-size: 11px; }
    .inline-form { gap: 12px; }
    .inline-form .field { flex-basis: 100%; min-width: 0; }
    .inline-form .field:has(input[name="priority"]) { flex: 1 1 100%; min-width: 0; }
    .inline-form > .btn { width: 100%; min-height: 43px; }
    .route-mode-form { padding: 13px; }
    .route-mode-form .field { flex-basis: 100%; }
    .detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 23px 15px; padding: 22px 17px; }
    .detail-grid > div { padding-left: 10px; }
    .detail-grid span { font-size: 10px; margin-bottom: 7px; }
    .detail-grid strong { font-size: 12px; }
    .detail-grid small { font-size: 9px; }
    .page-maintenance .detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .page-maintenance .detail-grid strong { font-size: 23px; }
    .page-order .content > .panel:first-of-type .detail-grid > div:nth-child(4) strong { font-size: 21px; }
    .credential-row { gap: 9px; }
    .credential-row .field { flex-basis: 100%; min-width: 0; }
    .credential-row .btn { flex: 1; min-height: 39px; padding-inline: 10px; font-size: 10px; }
    .credential-row > .inline { flex: 1; }
    .credential-row > .inline > .btn { width: 100%; }
    .copy-endpoint { flex-wrap: wrap; gap: 11px; padding: 13px; }
    .copy-endpoint > div { flex-basis: 100%; }
    .copy-endpoint .btn { min-height: 32px; margin-left: auto; }
    .purchase-panel .plan-summary-grid { grid-template-columns: 1fr; gap: 12px; }
    .mini-plan { padding: 19px; }
    .plan-price { font-size: 26px; }
    .notice { padding: 13px 15px; font-size: 11px; }
    .tabs { gap: 3px; margin-bottom: 16px; }
    .tab { padding: 7px 13px; font-size: 11px; }
    .pagination { flex-wrap: wrap; gap: 12px; padding: 15px; }
    .pagination .actions { margin-left: auto; }
    .pagination .btn { min-height: 35px; }
    .page-footer { gap: 6px; margin-top: 24px; padding: 18px 0 5px; font-size: 9px; }
    .docs-layout { grid-template-columns: 1fr; gap: 16px; }
    .docs-toc { position: static; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 3px; max-width: 100%; overflow-x: auto; padding: 8px; scrollbar-width: none; }
    .docs-toc strong { display: none; }
    .docs-toc a { flex-shrink: 0; padding: 8px 10px; font-size: 10px; background: #f5f8fd; }
    .prose table { min-width: 420px; }
    .prose p { font-size: 12px; }
    pre { padding: 17px; }
    pre code { font-size: 10px; }
    .method { font-size: 9px; }
    .mobile-dock { position: fixed; z-index: 35; inset: auto 0 0; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 3px; padding: 8px 11px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid #e0e7f2; background: rgb(255 255 255 / 98%); backdrop-filter: blur(14px); }
    .mobile-dock a,.mobile-dock button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 42px; padding: 4px; border: 0; border-radius: 8px; color: #8798af; background: transparent; font-size: 9px; line-height: 1.4; }
    .mobile-dock .ui-icon { width: 19px; height: 19px; }
    .mobile-dock .active { color: #2d63d5; background: #f0f5ff; }
    .auth-wrap { display: flex; flex-direction: column; min-height: 100dvh; background: #fff; }
    .auth-visual { display: none; }
    .auth-form-side { flex: 1; justify-content: flex-start; width: 100%; min-height: 100dvh; padding: 34px 26px max(24px,env(safe-area-inset-bottom)); background: linear-gradient(180deg,#f2f6ff 0,#fff 37%); }
    .auth-mobile-brand { display: flex; width: 100%; max-width: 390px; margin-bottom: 49px; }
    .auth-mobile-brand .auth-brand { font-size: 16px; }
    .auth-mobile-brand .brand-mark { width: 32px; height: 35px; font-size: 22px; }
    .auth-card { max-width: 390px; padding: 0; }
    .auth-card h1 { margin-top: 8px; font-size: 25px; }
    .auth-card > .muted { margin-bottom: 29px; font-size: 12px; }
    .auth-card input { min-height: 47px; font-size: 14px; }
    .auth-card .field > span { font-size: 12px; }
    .auth-card .btn { min-height: 46px; }
    .auth-link { margin-top: 26px; padding-top: 23px; font-size: 12px; }
    .auth-footer { margin-top: auto; padding-top: 50px; font-size: 10px; }
    .payment-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 28px); border-radius: 16px; }
    .dialog-heading { padding: 20px; }
    .dialog-body { padding: 20px; }
    .dialog-actions { gap: 9px; }
    .dialog-actions .btn { min-height: 38px; }
    .error-panel { padding: 23px; }
}
@media (max-width: 640px) {
    .responsive-table { overflow: visible; padding: 10px 13px 1px; }
    .responsive-table > table,.responsive-table > table > tbody { display: block; width: 100%; }
    .responsive-table > table > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .responsive-table > table > tbody > tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 15px; margin: 0 0 12px; padding: 17px 14px 13px; border: 1px solid #e3eaf5; border-radius: 10px; background: #fff; }
    .responsive-table > table > tbody > tr > td { display: block; min-width: 0; max-width: none; padding: 0; border: 0; white-space: normal; font-size: 11px; overflow-wrap: anywhere; }
    .responsive-table > table > tbody > tr > td::before { content: attr(data-label); display: block; margin-bottom: 6px; color: #9ba9bd; font-size: 9px; line-height: 1.5; }
    .responsive-table > table > tbody > tr > td:first-child { grid-column: 1/-1; padding-bottom: 12px; border-bottom: 1px solid #edf1f7; }
    .responsive-table > table > tbody > tr > td:first-child strong { font-size: 13px; }
    .responsive-table > table > tbody > tr > td:first-child::before { display: none; }
    .responsive-table > table > tbody > tr > td:last-child { grid-column: 1/-1; padding-top: 12px; border-top: 1px solid #edf1f7; }
    .responsive-table > table > tbody > tr > td:last-child::before { display: none; }
    .responsive-table > table > tbody > tr > td[colspan] { grid-column: 1/-1; border: 0; padding: 0; }
    .responsive-table > table > tbody > tr > td[colspan]::before { display: none; }
    .responsive-table > table > tbody > tr:hover > td { background: transparent; }
    .responsive-table .log-detail { grid-column: 1/-1; }
    .responsive-table td .tags { max-width: none; }
    .responsive-table td .actions { gap: 9px; }
    .responsive-table td .actions > a,.responsive-table td .actions .text-btn { min-height: 34px; padding: 6px 11px; font-size: 11px; }
    .responsive-table td .btn { min-height: 35px; }
    .responsive-table td small { font-size: 10px; }
    .responsive-table .empty { min-height: 150px; padding: 15px; }
    .page-maintenance .responsive-table > table > tbody > tr > td:last-child { grid-column: 1/-1; }
    .manual-paid { max-width: 100%; }
}
@media (max-width: 380px) {
    .content { padding-inline: 12px; }
    .topbar { padding-inline: 12px; }
    .user-name { display: none; }
    .stats-grid { gap: 9px; }
    .stat-card { padding: 12px; }
    .stat-card > strong { font-size: 23px; }
    .stat-card > small { font-size: 8px; }
    .heading-mark { width: 37px; height: 40px; }
    .page-heading > .btn { margin-left: 48px; }
    .page-heading h1 { font-size: 21px; }
    .panel-body,.prose { padding-inline: 15px; }
    .detail-grid { column-gap: 11px; }
    .auth-form-side { padding-inline: 22px; }
    .qr-frame { width: 245px; height: 245px; padding: 10px; }
    .qr-frame img,.qr-frame canvas { width: 223px; height: 223px; }
    .dialog-body { padding-inline: 17px; }
}
/* Homepage only: financial overview, daily activity and service workspace. */
.page-dashboard .page-heading { min-height: 60px; margin-bottom: 20px; }
.page-dashboard .page-heading .heading-mark { display: none; }
.page-dashboard .page-heading .eyebrow { display: none; }
.page-dashboard .page-heading h1 { font-size: 24px; }
.page-dashboard .home-dashboard { min-width: 0; }
.page-dashboard .home-welcome { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 2px 21px; }
.page-dashboard .home-date { display: block; color: #96a3b7; font-size: 10px; margin-bottom: 5px; }
.page-dashboard .home-welcome > div { min-width: 0; }
.page-dashboard .home-welcome h2 { margin: 0; font-size: 16px; color: #526780; font-weight: 500; overflow-wrap: anywhere; }
.page-dashboard .home-role { display: inline-flex; align-items: center; gap: 6px; color: #8799b3; font-size: 10px; }
.page-dashboard .home-role .ui-icon { width: 14px; height: 14px; }
.page-dashboard .home-overview { display: grid; grid-template-columns: minmax(260px,.85fr) minmax(0,1.7fr); gap: 20px; margin-bottom: 20px; }
.page-dashboard .home-finance { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 23px 26px 20px; border: 1px solid #3466d4; border-radius: 14px; color: #fff; background: linear-gradient(120deg,#234ca8 0%,#2359cc 65%,#2e69dc 100%); box-shadow: 0 8px 21px rgb(35 83 181 / 12%); }
.page-dashboard .home-finance::after { content: ""; position: absolute; width: 165px; height: 165px; right: -70px; top: 30px; border: 26px solid rgb(255 255 255 / 4%); border-radius: 50%; pointer-events: none; }
.page-dashboard .home-finance-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; z-index: 1; }
.page-dashboard .home-finance-head > span { display: inline-flex; align-items: center; gap: 8px; color: #d4e1ff; font-size: 12px; }
.page-dashboard .home-finance-head .ui-icon { width: 17px; height: 17px; }
.page-dashboard .home-finance-head a { color: #c1d4ff; font-size: 10px; white-space: nowrap; }
.page-dashboard .home-finance-head a > span { margin-left: 4px; }
.page-dashboard .home-finance-amount { position: relative; z-index: 1; display: block; margin: 19px 0 4px; color: #fff; font-size: clamp(29px,2.6vw,43px); line-height: 1.35; font-weight: 650; letter-spacing: -1.1px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.page-dashboard .home-finance-amount small { font-size: 21px; font-weight: 400; margin-right: 5px; }
.page-dashboard .home-finance > p { position: relative; z-index: 1; color: #a9c2f7; font-size: 10px; margin: 0 0 20px; }
.page-dashboard .home-finance-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; margin-top: auto; border-top: 1px solid rgb(255 255 255 / 13%); }
.page-dashboard .home-finance-footer > div { display: flex; align-items: center; gap: 14px; }
.page-dashboard .home-finance-footer > div > span { color: #c2d6ff; font-size: 10px; }
.page-dashboard .home-finance-footer strong { font-size: 17px; color: #f0f5ff; font-variant-numeric: tabular-nums; font-weight: 550; }
.page-dashboard .home-finance-footer strong small { font-size: 10px; color: #b6cef9; font-weight: 400; }
.page-dashboard .home-finance-seal { display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; border: 1px solid rgb(255 255 255 / 13%); border-radius: 8px; color: #d5e4ff; }
.page-dashboard .home-finance-seal .ui-icon { width: 15px; height: 15px; }
.page-dashboard .home-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.page-dashboard .home-metric { position: relative; display: flex; align-items: center; gap: 16px; min-width: 0; padding: 20px 21px; border: 1px solid #e1e8f3; border-radius: 12px; color: #334f73; background: #fff; box-shadow: 0 3px 16px rgb(24 44 82 / 2%); }
.page-dashboard .home-metric:hover { border-color: #b8cdf7; background: #fcfdff; }
.page-dashboard .home-metric > div { min-width: 0; flex: 1; }
.page-dashboard .home-metric-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 44px; flex-shrink: 0; border-radius: 12px; color: #547cda; background: #eff4ff; }
.page-dashboard .home-metric-icon .ui-icon { width: 22px; height: 22px; }
.page-dashboard .home-metric-1 .home-metric-icon { color: #2a9a87; background: #ecf8f3; }
.page-dashboard .home-metric-2 .home-metric-icon { color: #7a6ecd; background: #f2efff; }
.page-dashboard .home-metric-3 .home-metric-icon { color: #be9652; background: #fdf5e7; }
.page-dashboard .home-metric-label { display: block; color: #8191a7; font-size: 11px; }
.page-dashboard .home-metric strong { display: block; font-size: 27px; line-height: 1.5; font-weight: 650; color: #29415f; letter-spacing: -.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.page-dashboard .home-metric small { display: block; color: #a1adc0; font-size: 9px; line-height: 1.5; }
.page-dashboard .home-metric-arrow { position: absolute; top: 15px; right: 15px; color: #b6c4d9; font-size: 12px; }
.page-dashboard .home-shortcuts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; margin-bottom: 23px; padding: 17px 6px; border: 1px solid #e1e8f3; border-radius: 12px; background: #fff; }
.page-dashboard .home-shortcuts > a { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 3px 20px; color: #445d7c; }
.page-dashboard .home-shortcuts > a + a { border-left: 1px solid #edf1f7; }
.page-dashboard .home-shortcut-icon { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; flex-shrink: 0; color: #6689be; border: 1px solid #e5edf9; border-radius: 9px; background: #f7faff; }
.page-dashboard .home-shortcut-icon .ui-icon { width: 18px; height: 18px; }
.page-dashboard .home-shortcuts strong { display: block; font-size: 12px; font-weight: 550; }
.page-dashboard .home-shortcuts small { display: block; margin-top: 3px; color: #a0adc0; font-size: 9px; }
.page-dashboard .home-shortcut-arrow { margin-left: auto; color: #bbc8da; font-size: 18px; }
.page-dashboard .home-surface { min-width: 0; margin: 0; border: 1px solid #e2e9f3; border-radius: 13px; background: #fff; box-shadow: 0 3px 17px rgb(24 44 82 / 2%); }
.page-dashboard .home-analysis { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(280px,1fr); gap: 21px; margin-bottom: 23px; }
.page-dashboard .home-section-head { display: flex; align-items: center; justify-content: space-between; gap: 13px; padding: 20px 23px 0; }
.page-dashboard .home-section-head h2 { margin: 0; color: #3d5573; font-size: 14px; font-weight: 600; }
.page-dashboard .home-section-head p { margin: 4px 0 0; color: #a1aec1; font-size: 10px; }
.page-dashboard .home-section-head > a { color: #7793bb; font-size: 10px; white-space: nowrap; }
.page-dashboard .home-period { display: inline-flex; align-items: center; justify-content: center; min-height: 27px; padding: 4px 11px; border: 1px solid #e8edf6; border-radius: 6px; color: #869ab6; background: #fafcff; font-size: 10px; white-space: nowrap; }
.page-dashboard .home-trend-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 17px 24px 0; }
.page-dashboard .home-trend-summary > strong { color: #2c4768; font-size: 27px; font-weight: 650; line-height: 1.6; font-variant-numeric: tabular-nums; }
.page-dashboard .home-trend-summary > strong small { color: #97a8be; font-size: 10px; font-weight: 400; }
.page-dashboard .home-trend-summary > span { display: inline-flex; align-items: center; gap: 6px; color: #9babbd; font-size: 9px; }
.page-dashboard .home-trend-summary i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #4f7ee2; }
.page-dashboard .home-plot { display: flex; gap: 10px; margin: 1px 23px 19px; }
.page-dashboard .home-chart-scale { display: flex; flex-direction: column; justify-content: space-between; flex-shrink: 0; width: 32px; padding: 20px 0 44px; color: #a8b5c7; font-size: 9px; font-variant-numeric: tabular-nums; }
.page-dashboard .home-chart-content { min-width: 0; flex: 1; }
.page-dashboard .home-trend-svg { display: block; width: 100%; height: 180px; }
.page-dashboard .home-trend-svg path,.page-dashboard .home-trend-svg polyline,.page-dashboard .home-trend-svg circle { vector-effect: non-scaling-stroke; }
.page-dashboard .home-gridline { fill: none; stroke: #edf2f8; stroke-width: 1; stroke-dasharray: 4 5; }
.page-dashboard .home-chart-labels { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 4px; margin-top: -1px; color: #9cabc0; font-size: 9px; text-align: center; }
.page-dashboard .home-trend-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding: 13px 23px; border-top: 1px solid #edf1f7; color: #95a4b9; font-size: 10px; }
.page-dashboard .home-trend-footer strong { color: #536f91; font-size: 12px; font-variant-numeric: tabular-nums; }
.page-dashboard .home-trend-footer a { margin-left: auto; color: #6b8dbb; font-size: 10px; }
.page-dashboard .home-attention-icon { display: inline-flex; color: #a8b8d0; }
.page-dashboard .home-attention-icon .ui-icon { width: 17px; height: 17px; }
.page-dashboard .home-attention-list { padding: 13px 22px 4px; }
.page-dashboard .home-attention-row { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid #f0f3f8; color: #70849d; font-size: 11px; }
.page-dashboard .home-attention-row:last-child { border-bottom: 0; }
.page-dashboard .home-attention-symbol { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; flex-shrink: 0; border-radius: 8px; color: #5b87c8; background: #eff5ff; }
.page-dashboard .home-attention-symbol .ui-icon { width: 16px; height: 16px; }
.page-dashboard .tone-amber { color: #b49157; background: #fcf6eb; }
.page-dashboard .tone-slate { color: #8b9cb1; background: #f1f4f8; }
.page-dashboard .tone-rose { color: #bd8191; background: #fff1f5; }
.page-dashboard .home-attention-row > strong { margin-left: auto; color: #526986; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.page-dashboard .home-row-arrow { margin-left: 4px; color: #b8c7db; font-size: 17px; }
.page-dashboard .home-attention-note { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 14px 16px 18px; color: #a8b5c7; font-size: 9px; }
.page-dashboard .home-attention-note .ui-icon { width: 12px; height: 12px; }
.page-dashboard .home-records { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(280px,1fr); gap: 21px; margin-bottom: 23px; align-items: start; }
.page-dashboard .home-rentals { min-width: 0; overflow: hidden; border: 1px solid #e2e9f3; border-radius: 13px; background: #fff; }
.page-dashboard .home-rentals > .home-section-head { padding-bottom: 19px; }
.page-dashboard .home-rentals > .panel { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.page-dashboard .home-rentals th,.page-dashboard .home-rentals td { padding-inline: 15px; }
.page-dashboard .home-rentals td { font-size: 11px; }
.page-dashboard .home-rentals td strong { font-size: 11px; }
.page-dashboard .home-orders .home-section-head { padding-bottom: 8px; }
.page-dashboard .home-order-list { padding: 0 21px 7px; }
.page-dashboard .home-order-row { display: flex; align-items: center; gap: 10px; padding: 16px 0; border-bottom: 1px solid #edf2f8; }
.page-dashboard .home-order-row:last-child { border-bottom: 0; }
.page-dashboard .home-order-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 35px; flex-shrink: 0; border-radius: 9px; color: #8ba5cd; background: #f2f6fc; }
.page-dashboard .home-order-icon .ui-icon { width: 16px; height: 16px; }
.page-dashboard .home-order-copy { min-width: 0; flex: 1; }
.page-dashboard .home-order-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: #7187a3; font-weight: 500; }
.page-dashboard .home-order-copy small { display: block; margin-top: 4px; color: #abb8c9; font-size: 9px; }
.page-dashboard .home-order-value { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.page-dashboard .home-order-value > strong { color: #516c90; font-size: 13px; font-variant-numeric: tabular-nums; }
.page-dashboard .home-order-value .badge { font-size: 8px; padding: 2px 6px; }
.page-dashboard .home-access { margin-bottom: 23px; }
.page-dashboard .home-access-grid { display: grid; grid-template-columns: minmax(255px,1.25fr) repeat(3,minmax(0,1fr)); gap: 0; padding: 24px 23px; }
.page-dashboard .home-service-share { display: flex; align-items: center; gap: 15px; padding-right: 16px; }
.page-dashboard .home-service-ring { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; flex-shrink: 0; border-radius: 50%; background: conic-gradient(#497fe2 var(--home-share),#edf2fa 0); }
.page-dashboard .home-service-ring > span { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; }
.page-dashboard .home-service-ring strong { color: #3c638e; font-size: 21px; font-weight: 600; line-height: 1.2; }
.page-dashboard .home-service-ring small { margin-top: 4px; color: #a4b3c6; font-size: 8px; }
.page-dashboard .home-service-share > div:last-child > strong { color: #607994; font-size: 11px; font-weight: 500; }
.page-dashboard .home-service-share p { color: #a1b0c4; font-size: 9px; margin: 7px 0 0; }
.page-dashboard .home-access-item { display: block; min-width: 0; padding: 0 20px; border-left: 1px solid #edf1f7; }
.page-dashboard .home-access-item > span { display: flex; align-items: center; gap: 7px; color: #91a3ba; font-size: 10px; }
.page-dashboard .home-access-item .ui-icon { width: 14px; height: 14px; color: #91a9cb; }
.page-dashboard .home-access-item > strong { display: block; margin-top: 9px; color: #48688f; font-size: 24px; font-weight: 600; line-height: 1.4; }
.page-dashboard .home-access-item > strong > small { font-size: 9px; color: #a1b1c6; font-weight: 400; }
.page-dashboard .home-access-item > p { margin: 8px 0 0; color: #a5b3c7; font-size: 9px; line-height: 1.8; }
.page-dashboard .home-payment-state { min-height: 34px; margin-top: 12px; }
@media (min-width: 2000px) {
    .page-dashboard .home-overview { grid-template-columns: minmax(330px,.8fr) minmax(0,2fr); }
    .page-dashboard .home-finance { padding: 28px 30px 24px; }
    .page-dashboard .home-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .page-dashboard .home-metric { display: block; padding: 24px; }
    .page-dashboard .home-metric-icon { margin-bottom: 18px; }
    .page-dashboard .home-metric strong { font-size: 34px; }
}
@media (max-width: 1200px) {
    .page-dashboard .home-overview { grid-template-columns: minmax(240px,.8fr) minmax(0,1.4fr); gap: 16px; }
    .page-dashboard .home-finance { padding-inline: 21px; }
    .page-dashboard .home-metrics { gap: 12px; }
    .page-dashboard .home-metric { padding: 16px; gap: 11px; }
    .page-dashboard .home-metric-icon { width: 34px; height: 36px; border-radius: 9px; }
    .page-dashboard .home-metric-icon .ui-icon { width: 18px; height: 18px; }
    .page-dashboard .home-metric small { font-size: 8px; }
    .page-dashboard .home-shortcuts > a { gap: 9px; padding-inline: 14px; }
    .page-dashboard .home-analysis,.page-dashboard .home-records { grid-template-columns: minmax(0,1.4fr) minmax(270px,1fr); gap: 17px; }
    .page-dashboard .home-access-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 23px 0; }
    .page-dashboard .home-access-item:nth-child(3) { border-left: 0; padding-left: 0; }
    .page-dashboard .home-service-share { min-width: 0; }
}
@media (max-width: 860px) {
    .page-dashboard .home-analysis,.page-dashboard .home-records { grid-template-columns: 1fr; }
    .page-dashboard .home-attention-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 24px; }
    .page-dashboard .home-trend-svg { max-height: 210px; }
    .page-dashboard .home-attention-note { justify-content: flex-start; padding-left: 23px; }
}
@media (max-width: 720px) {
    .page-dashboard .page-heading { gap: 11px; margin-bottom: 17px; }
    .page-dashboard .page-heading .heading-main { width: auto; }
    .page-dashboard .page-heading h1 { font-size: 22px; }
    .page-dashboard .page-heading p { display: none; }
    .page-dashboard .page-heading > .btn { margin-left: auto; min-height: 33px; padding: 6px 11px; font-size: 10px; }
    .page-dashboard .home-welcome { align-items: flex-end; margin: 0 1px 16px; }
    .page-dashboard .home-welcome h2 { font-size: 13px; }
    .page-dashboard .home-date { font-size: 9px; margin-bottom: 3px; }
    .page-dashboard .home-role { font-size: 8px; gap: 4px; }
    .page-dashboard .home-role .ui-icon { width: 11px; height: 11px; }
    .page-dashboard .home-overview { grid-template-columns: 1fr; gap: 13px; margin-bottom: 15px; }
    .page-dashboard .home-finance { padding: 21px 22px 17px; border-radius: 12px; }
    .page-dashboard .home-finance-head > span { font-size: 11px; }
    .page-dashboard .home-finance-amount { margin: 15px 0 5px; font-size: 34px; }
    .page-dashboard .home-finance > p { margin-bottom: 15px; font-size: 9px; }
    .page-dashboard .home-finance-footer { padding-top: 12px; }
    .page-dashboard .home-finance-footer strong { font-size: 16px; }
    .page-dashboard .home-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .page-dashboard .home-metric { padding: 15px 13px; gap: 10px; border-radius: 10px; }
    .page-dashboard .home-metric-label { font-size: 10px; }
    .page-dashboard .home-metric strong { font-size: 23px; }
    .page-dashboard .home-metric small { display: none; }
    .page-dashboard .home-metric-icon { width: 31px; height: 34px; border-radius: 9px; }
    .page-dashboard .home-metric-icon .ui-icon { width: 17px; height: 17px; }
    .page-dashboard .home-metric-arrow { top: 10px; right: 10px; font-size: 10px; }
    .page-dashboard .home-shortcuts { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 16px; margin-bottom: 18px; padding: 17px 0; border-radius: 11px; }
    .page-dashboard .home-shortcuts > a { padding: 0 15px; gap: 10px; }
    .page-dashboard .home-shortcuts > a:nth-child(3) { border-left: 0; }
    .page-dashboard .home-shortcuts strong { font-size: 11px; }
    .page-dashboard .home-shortcuts small { margin-top: 2px; font-size: 8px; }
    .page-dashboard .home-shortcut-icon { width: 30px; height: 32px; border-radius: 8px; }
    .page-dashboard .home-shortcut-icon .ui-icon { width: 16px; height: 16px; }
    .page-dashboard .home-shortcut-arrow { display: none; }
    .page-dashboard .home-analysis,.page-dashboard .home-records { gap: 17px; margin-bottom: 18px; }
    .page-dashboard .home-surface,.page-dashboard .home-rentals { border-radius: 11px; }
    .page-dashboard .home-section-head { padding: 17px 17px 0; }
    .page-dashboard .home-section-head h2 { font-size: 13px; }
    .page-dashboard .home-section-head p { font-size: 9px; }
    .page-dashboard .home-section-head > a { font-size: 9px; }
    .page-dashboard .home-period { min-height: 25px; font-size: 9px; }
    .page-dashboard .home-trend-summary { padding: 13px 18px 0; }
    .page-dashboard .home-trend-summary > strong { font-size: 25px; }
    .page-dashboard .home-plot { margin: 6px 17px 17px 13px; gap: 4px; }
    .page-dashboard .home-chart-scale { width: 24px; font-size: 8px; padding-top: 24px; padding-bottom: 33px; }
    .page-dashboard .home-trend-svg { height: 150px; }
    .page-dashboard .home-chart-labels { font-size: 8px; gap: 0; }
    .page-dashboard .home-trend-footer { gap: 14px; padding: 12px 17px; font-size: 9px; }
    .page-dashboard .home-trend-footer strong { font-size: 11px; }
    .page-dashboard .home-trend-footer a { flex-basis: 100%; margin-left: 0; font-size: 9px; }
    .page-dashboard .home-attention-list { padding: 8px 17px 0; column-gap: 18px; }
    .page-dashboard .home-attention-row { gap: 8px; padding: 13px 0; font-size: 10px; }
    .page-dashboard .home-attention-symbol { width: 25px; height: 27px; border-radius: 7px; }
    .page-dashboard .home-attention-symbol .ui-icon { width: 13px; height: 13px; }
    .page-dashboard .home-attention-row > strong { font-size: 15px; }
    .page-dashboard .home-row-arrow { display: none; }
    .page-dashboard .home-attention-note { font-size: 8px; padding: 12px 17px 16px; }
    .page-dashboard .home-rentals > .home-section-head { padding-bottom: 16px; }
    .page-dashboard .home-order-list { padding-inline: 16px; }
    .page-dashboard .home-order-row { gap: 9px; padding: 15px 0; }
    .page-dashboard .home-order-copy strong { font-size: 9px; }
    .page-dashboard .home-order-copy small { font-size: 8px; }
    .page-dashboard .home-order-value > strong { font-size: 12px; }
    .page-dashboard .home-access-grid { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 21px 17px; gap: 22px 0; }
    .page-dashboard .home-service-share { grid-column: 1/-1; padding: 0 0 19px; border-bottom: 1px solid #edf1f7; }
    .page-dashboard .home-service-ring { width: 63px; height: 63px; }
    .page-dashboard .home-service-ring > span { width: 53px; height: 53px; }
    .page-dashboard .home-service-ring strong { font-size: 19px; }
    .page-dashboard .home-service-share > div:last-child > strong { font-size: 11px; }
    .page-dashboard .home-access-item { padding: 0 0 0 15px; }
    .page-dashboard .home-access-item:nth-child(2) { padding-left: 0; border-left: 0; }
    .page-dashboard .home-access-item:nth-child(3) { padding-left: 15px; border-left: 1px solid #edf1f7; }
    .page-dashboard .home-access-item:last-child { grid-column: 1/-1; padding: 17px 0 0; border-top: 1px solid #edf1f7; border-left: 0; }
    .page-dashboard .home-access-item > strong { font-size: 23px; }
    .page-dashboard .home-access-item > p { font-size: 8px; }
    .page-dashboard .home-payment-state { min-height: 0; margin-top: 10px; }
    .page-dashboard .home-access { margin-bottom: 18px; }
}
@media (max-width: 370px) {
    .page-dashboard .home-metric { gap: 8px; padding: 13px 11px; }
    .page-dashboard .home-metric-icon { width: 27px; height: 30px; }
    .page-dashboard .home-metric strong { font-size: 21px; }
    .page-dashboard .home-attention-list { display: block; }
    .page-dashboard .home-attention-row { padding: 10px 0; }
    .page-dashboard .home-finance-amount { font-size: 31px; }
    .page-dashboard .home-role { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,*::before,*::after { transition: none !important; animation: none !important; }
}
@media print {
    .sidebar,.topbar,.mobile-dock,.page-footer,.sidebar-overlay,.docs-toc,.btn,.text-btn,form,.payment-dialog { display: none !important; }
    .app-main { margin: 0; }
    .content { padding: 0; max-width: none; }
    .docs-layout { display: block; }
    .panel { box-shadow: none; break-inside: avoid; }
    body { background: #fff; }
}