/* Atelier — High-Precision Executive Financial Workspace. Locally served fonts, zero external CDN. */
@font-face{font-family:Manrope;src:url('/static/fonts/manrope.ttf') format('truetype');font-weight:200 800;font-display:swap}
@font-face{font-family:'Noto Sans Thai';src:url('/static/fonts/notosansthai.ttf') format('truetype');font-weight:100 900;font-display:swap}

:root{
 --bg:#f7f6f2;
 --card:#ffffff;
 --ink:#162b26;
 --muted:#64756e;
 --line:#e2e6de;
 --surface:#f1f3ed;
 --surface-hover:#eaf0e7;
 --accent:#1e5e48;
 --accent-hover:#144534;
 --accent-soft:#e9f3ec;
 --dark:#0d231d;
 --sidebar-ink:#a6beaf;
 --sidebar-strong:#f4f7ee;
 --sidebar-line:rgba(255,255,255,0.08);
 --sidebar-surface:rgba(255,255,255,0.04);
 --sidebar-hover:rgba(255,255,255,0.08);
 --sidebar-active:#d8edbf;
 --sidebar-active-ink:#153426;
 --green:#29693e;
 --mint:#d8edbf;
 --chart-main:#256d56;
 --chart-secondary:#d2dacb;
 --shadow:0 1px 3px rgba(18,45,35,0.03),0 12px 32px -4px rgba(18,45,35,0.05);
 --radius:18px;
 --forecast-bg:#15362c;
 --forecast-muted:#b0c8b5;
 --forecast-highlight:#d8eaad;
 --warn-bg:#faf4e7;
 --warn-ink:#7d5c20;
 --success-bg:#ecf6e7;
 --success-ink:#366330;
 --hero-ink:#f5f8ec;
 --hero-muted:#b4ccb9;
 --hero-line:rgba(255,255,255,0.12);
 --hero-icon:rgba(255,255,255,0.09);
 --primary-ink:#ffffff;
 --target-track:#e7ebe1;
 --gold:#cbb067;
 --auth-grid:rgba(255,255,255,0.05);
 --card-rim:inset 0 1px 0 rgba(255,255,255,0.9);
}

html[data-theme=dark]{
 --bg:#0b1411;
 --card:#121f1b;
 --ink:#edf3e9;
 --muted:#9fb1a3;
 --line:#25372e;
 --surface:#182823;
 --surface-hover:#20342d;
 --accent:#c4e2a5;
 --accent-hover:#d5edb9;
 --accent-soft:#1c382b;
 --dark:#08100e;
 --sidebar-ink:#98ada0;
 --sidebar-strong:#f2f6e7;
 --sidebar-line:rgba(255,255,255,0.06);
 --sidebar-surface:rgba(255,255,255,0.03);
 --sidebar-hover:rgba(255,255,255,0.07);
 --sidebar-active:#c4e2a5;
 --sidebar-active-ink:#142d1f;
 --green:#b8dd93;
 --mint:#c4e2a5;
 --chart-main:#c4e2a5;
 --chart-secondary:#3a5441;
 --shadow:0 4px 20px -2px rgba(0,0,0,0.45),0 1px 3px rgba(0,0,0,0.35);
 --forecast-bg:#1d3d30;
 --forecast-muted:#b0c7b4;
 --forecast-highlight:#def0b7;
 --warn-bg:#342c1e;
 --warn-ink:#ebd094;
 --success-bg:#263823;
 --success-ink:#cae0ad;
 --primary-ink:#11281a;
 --target-track:#283a2f;
 --gold:#dec57d;
 --auth-grid:rgba(255,255,255,0.04);
 --card-rim:inset 0 1px 0 rgba(255,255,255,0.06);
}

body{
 font-family:Manrope,'Noto Sans Thai',system-ui,-apple-system,sans-serif;
 font-size:13px;
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 letter-spacing:-0.15px;
}
button,input,select,textarea{font-family:inherit}

h1{font-size:34px;font-weight:680;line-height:1.3;letter-spacing:-1.2px}
h2{font-weight:680;letter-spacing:-0.4px}
h3{font-weight:620;letter-spacing:-0.2px}

.amount,.kpi-value,.forecast-amount,.cash-value,.metric-value{
 font-variant-numeric:tabular-nums lining-nums;
 font-feature-settings:"tnum" 1,"cv05" 1;
 letter-spacing:-0.8px;
}

/* Sidebar: Sovereign executive navigation */
.sidebar{
 width:264px;
 padding:28px 16px 18px;
 background:var(--dark);
 border-right:1px solid var(--sidebar-line);
 box-shadow:none;
}
.main{margin-left:264px}
.brand{gap:12px;padding:0 12px;margin-bottom:30px}
.brand-mark{
 width:36px;
 height:40px;
 border-radius:11px;
 background:var(--sidebar-active);
 color:var(--sidebar-active-ink);
 font-size:24px;
 font-weight:800;
 box-shadow:0 0 16px -2px rgba(216,237,191,0.35);
 display:grid;
 place-items:center;
}
.brand-name{font-size:16px;font-weight:750;letter-spacing:-0.65px;color:var(--sidebar-strong)}
.brand-name small{font-size:7px;letter-spacing:2.2px;color:var(--sidebar-ink);margin-top:4px;font-weight:600}

.workspace-switch{
 padding:12px 13px;
 margin:0 6px 20px;
 border:1px solid var(--sidebar-line);
 background:var(--sidebar-surface);
 border-radius:12px;
 gap:10px;
 transition:background 0.16s ease,border-color 0.16s ease;
}
.workspace-switch:hover{
 background:var(--sidebar-hover);
 border-color:rgba(255,255,255,0.14);
}
.workspace-switch .company-icon{
 background:var(--sidebar-hover);
 border:1px solid var(--sidebar-line);
 color:var(--sidebar-ink);
 border-radius:8px;
}
.workspace-switch .workspace-name{
 color:var(--sidebar-strong);
 font-weight:600;
 max-width:145px;
 font-size:11px;
 letter-spacing:-0.2px;
}
.workspace-switch [style]{color:var(--sidebar-ink)!important}
.workspace-switch>svg{color:var(--sidebar-ink);transition:transform 0.16s ease}

.nav-section{
 font-size:9px;
 font-weight:600;
 letter-spacing:1.6px;
 margin:24px 15px 9px;
 color:var(--sidebar-ink);
 opacity:0.8;
 text-transform:uppercase;
}
.nav-item{
 padding:10px 14px;
 min-height:40px;
 border-radius:10px;
 font-size:11.5px;
 font-weight:500;
 margin:3px 0;
 color:var(--sidebar-ink);
 gap:12px;
 transition:background 0.14s ease,color 0.14s ease,transform 0.1s ease;
}
.nav-item svg{width:16px;height:16px;stroke-width:1.65;opacity:0.85;flex-shrink:0}
.nav-item:hover{background:var(--sidebar-hover);color:var(--sidebar-strong)}
.nav-item.active{
 background:var(--sidebar-active);
 color:var(--sidebar-active-ink);
 font-weight:700;
 box-shadow:0 3px 12px rgba(0,0,0,0.12);
}
.nav-item.active:before{display:none}
.nav-item .nav-count{
 background:var(--sidebar-active-ink);
 color:var(--sidebar-active);
 font-size:9.5px;
 font-weight:700;
 border-radius:6px;
 padding:1px 6px;
}

.sidebar-foot{padding:16px 12px 0;margin-top:20px;border-top:1px solid var(--sidebar-line)}
.sync-indicator{color:var(--sidebar-ink);font-size:9px;font-weight:500}
.sync-indicator .dot{
 background:var(--sidebar-active);
 width:5px;
 height:5px;
 box-shadow:0 0 6px var(--sidebar-active);
}
.sidebar .avatar{
 background:var(--sidebar-hover);
 color:var(--sidebar-active);
 border:1px solid var(--sidebar-line);
 border-radius:10px;
 width:35px;
 height:35px;
 font-size:11px;
 font-weight:700;
}
.sidebar .user-meta b{color:var(--sidebar-strong);font-size:11.5px;font-weight:600}
.sidebar .user-meta span{color:var(--sidebar-ink);font-size:9.5px}
.sidebar .icon-btn{color:var(--sidebar-ink);transition:all 0.15s ease}
.sidebar .icon-btn:hover{background:var(--sidebar-hover);color:var(--sidebar-strong)}

/* Header and Top Actions */
.topbar{
 height:72px;
 padding:0 36px;
 background:color-mix(in srgb,var(--bg) 92%,transparent);
 backdrop-filter:blur(18px);
 -webkit-backdrop-filter:blur(18px);
 border-bottom:1px solid var(--line);
}
.breadcrumbs{font-size:11.5px;gap:12px}
.breadcrumbs>span:first-of-type{font-weight:500;opacity:0.8}
.breadcrumbs b{font-weight:700;color:var(--ink)}
.top-actions{gap:10px}
.search-trigger{
 width:200px;
 background:var(--card);
 font-size:11px;
 border-radius:10px;
 border:1px solid var(--line);
 box-shadow:0 1px 2px rgba(0,0,0,0.02);
 transition:border-color 0.15s ease,box-shadow 0.15s ease;
}
.search-trigger:hover{border-color:var(--accent)}
.search-trigger .key{
 font-size:9px;
 border:1px solid var(--line);
 border-radius:5px;
 padding:1px 5px;
 font-weight:600;
}

.language-switch{
 background:var(--surface);
 border:1px solid var(--line);
 border-radius:9px;
 padding:3px;
}
.language-switch button{
 font-size:9.5px;
 font-weight:700;
 border-radius:6px;
 height:26px;
 transition:background 0.14s ease,color 0.14s ease;
}
.language-switch button.selected{
 background:var(--card);
 color:var(--accent);
 box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.theme-toggle{
 background:var(--card);
 border:1px solid var(--line);
 font-size:11px;
 border-radius:9px;
 height:34px;
 transition:all 0.15s ease;
}
.theme-toggle:hover{background:var(--surface);color:var(--accent)}
.icon-btn{
 border:1px solid var(--line);
 border-radius:9px;
 background:var(--card);
 transition:all 0.15s ease;
}
.icon-btn:hover{background:var(--surface);color:var(--accent);border-color:var(--accent)}
.environment{
 font-size:7.5px;
 font-weight:700;
 letter-spacing:1px;
 background:var(--surface);
 color:var(--muted);
 border:1px solid var(--line);
 border-radius:5px;
 padding:5px 9px;
 text-transform:uppercase;
}

/* Content layout */
.content{max-width:1670px;padding:32px 36px 26px}
.demo-notice{
 font-size:9.5px;
 line-height:1.6;
 border:0;
 padding:0;
 margin:0 0 24px;
 gap:10px;
}
.demo-notice b{
 font-size:8.5px;
 text-transform:uppercase;
 letter-spacing:0.6px;
 padding:4px 8px;
 background:var(--surface);
 color:var(--accent);
 border:1px solid var(--line);
 border-radius:5px;
 font-weight:700;
}
.demo-notice span{opacity:0.85}

.page-head{margin-bottom:26px;align-items:flex-end;gap:24px}
.page-eyebrow{
 font-size:8.5px;
 font-weight:750;
 letter-spacing:2px;
 margin-bottom:9px;
 color:var(--accent);
 text-transform:uppercase;
}
.page-head p{font-size:11.5px;line-height:1.85;color:var(--muted);margin-top:8px;max-width:580px}
.head-buttons{gap:9px}

/* Interactive Buttons */
.btn{
 font-size:11.5px;
 padding:9px 15px;
 min-height:39px;
 border-radius:10px;
 font-weight:600;
 letter-spacing:-0.15px;
 border:1px solid var(--line);
 background:var(--card);
 color:var(--ink);
 box-shadow:0 1px 2px rgba(0,0,0,0.03);
 transition:background 0.15s ease,border-color 0.15s ease,box-shadow 0.15s ease,transform 0.08s ease;
}
.btn:hover{
 background:var(--surface-hover);
 border-color:var(--line);
 transform:translateY(-1px);
 box-shadow:0 3px 8px rgba(0,0,0,0.05);
}
.btn:active{transform:translateY(1px)}
.btn.primary{
 background:linear-gradient(180deg,var(--accent) 0%,var(--accent-hover) 100%);
 color:var(--primary-ink);
 border-color:var(--accent-hover);
 box-shadow:0 1px 2px rgba(0,0,0,0.08),0 4px 14px -2px color-mix(in srgb,var(--accent) 40%,transparent);
}
.btn.primary:hover{
 filter:brightness(1.04);
 color:var(--primary-ink);
 box-shadow:0 2px 4px rgba(0,0,0,0.1),0 6px 18px -2px color-mix(in srgb,var(--accent) 55%,transparent);
}
html[data-theme=dark] .btn.primary{
 background:var(--accent);
 color:var(--primary-ink);
 border-color:var(--accent);
}
.btn.soft{
 background:var(--accent-soft);
 color:var(--accent);
 border-color:transparent;
}
.btn.soft:hover{background:color-mix(in srgb,var(--accent-soft) 80%,var(--accent))}
.btn.danger{
 background:var(--warn-bg);
 color:var(--red);
 border-color:var(--line);
}
.btn.text{
 font-size:10.5px;
 font-weight:700;
 padding:4px 0;
 min-height:29px;
 box-shadow:none;
 border:0;
 background:transparent;
 color:var(--accent);
}
.btn.text:hover{text-decoration:underline;transform:none}
.btn.sm{font-size:10.5px;min-height:31px;padding:5px 11px}
.btn svg{stroke-width:1.8}

.select{
 font-size:11px;
 min-height:39px;
 padding:9px 13px;
 border-radius:10px;
 background:var(--card);
 border:1px solid var(--line);
 color:var(--ink);
 box-shadow:0 1px 2px rgba(0,0,0,0.02);
 transition:border-color 0.15s ease,box-shadow 0.15s ease;
}
.select:focus,.input:focus,.field textarea:focus{
 border-color:var(--accent);
 box-shadow:0 0 0 3.5px var(--accent-soft);
 outline:none;
}
.input,.field textarea{
 border-radius:10px;
 min-height:44px;
 font-size:12px;
 background:var(--card);
 border:1px solid var(--line);
 color:var(--ink);
 padding:11px 13px;
 box-shadow:inset 0 1px 2px rgba(0,0,0,0.02);
}
.field label{font-size:11.5px;font-weight:600;margin-bottom:8px;color:var(--ink)}
.field small{font-size:10px;line-height:1.7;color:var(--muted)}

.basis-bar{margin-bottom:18px;gap:12px}
.segment{
 background:var(--surface);
 border:1px solid var(--line);
 padding:3px;
 border-radius:10px;
}
.segment button{
 font-size:10.5px;
 min-height:29px;
 padding:6px 13px;
 color:var(--muted);
 font-weight:600;
 border-radius:7px;
 transition:all 0.14s ease;
}
.segment button.active{
 background:var(--card);
 color:var(--ink);
 box-shadow:0 2px 5px rgba(0,0,0,0.06);
 font-weight:700;
}
.period-meta{font-size:9.5px;color:var(--muted);font-weight:500}

.notice{
 font-size:10.5px;
 background:var(--accent-soft);
 padding:12px 16px;
 border:1px solid color-mix(in srgb,var(--accent) 15%,transparent);
 border-left:4px solid var(--accent);
 border-radius:10px;
 margin-bottom:22px;
 gap:11px;
 line-height:1.7;
}
.notice b{font-weight:700;color:var(--ink)}
.notice.warn{
 background:var(--warn-bg);
 color:var(--warn-ink);
 border-color:color-mix(in srgb,var(--gold) 25%,transparent);
 border-left-color:var(--gold);
}
.notice.success{
 background:var(--success-bg);
 color:var(--success-ink);
 border-left-color:var(--green);
}

/* Cards & Elevation */
.card{
 border-radius:var(--radius);
 border:1px solid var(--line);
 background:var(--card);
 box-shadow:var(--card-rim),var(--shadow);
}
.kpi-grid{gap:16px;margin-bottom:25px}
.kpi{
 padding:21px 22px 19px;
 min-width:0;
 position:relative;
 transition:transform 0.18s cubic-bezier(0.16,1,0.3,1),box-shadow 0.18s ease;
}
.kpi:hover{
 transform:translateY(-2px);
 box-shadow:var(--card-rim),0 6px 22px -3px rgba(18,45,35,0.08);
}
.kpi-head{font-size:10.5px;font-weight:600;gap:8px;color:var(--muted)}
.kpi-icon{
 background:var(--surface);
 width:30px;
 height:30px;
 border-radius:9px;
 border:1px solid var(--line);
 color:var(--accent);
}
.kpi-icon svg{width:15px;height:15px}
.kpi-value{
 font-size:29px!important;
 font-weight:700;
 line-height:1.45;
 letter-spacing:-1.3px;
 margin:15px 0 12px;
 white-space:nowrap;
 color:var(--ink);
}
.kpi-value .currency{
 font-size:16px;
 margin-right:4px;
 font-weight:500;
 opacity:0.75;
}
.kpi-note{font-size:9.5px;gap:7px;color:var(--muted)}

.pill{
 border-radius:6px;
 font-size:9.5px;
 font-weight:650;
 padding:3px 7px;
 gap:4px;
 border:1px solid transparent;
}
.pill.green{background:var(--success-bg);color:var(--success-ink);border-color:color-mix(in srgb,var(--green) 20%,transparent)}
.pill.purple{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 20%,transparent)}
.pill.amber{background:var(--warn-bg);color:var(--warn-ink);border-color:color-mix(in srgb,var(--gold) 25%,transparent)}
.pill.red{background:var(--danger-bg);color:var(--red);border-color:color-mix(in srgb,var(--red) 20%,transparent)}

/* Dashboard Featured Revenue Card (Hero Command Unit) */
[data-page=dashboard]>.page-head h1{font-size:42px;letter-spacing:-1.6px}
[data-page=dashboard] .kpi-grid>.kpi:first-child{
 background:linear-gradient(135deg,var(--forecast-bg) 0%,color-mix(in srgb,var(--forecast-bg) 85%,#051510) 100%);
 border-color:var(--forecast-bg);
 color:var(--hero-ink);
 box-shadow:0 12px 30px -4px rgba(15,45,35,0.32),inset 0 1px 0 rgba(255,255,255,0.12);
}
[data-page=dashboard] .kpi-grid>.kpi:first-child:hover{
 transform:translateY(-2px);
 box-shadow:0 16px 36px -4px rgba(15,45,35,0.4),inset 0 1px 0 rgba(255,255,255,0.16);
}
[data-page=dashboard] .kpi-grid>.kpi:first-child .kpi-head,
[data-page=dashboard] .kpi-grid>.kpi:first-child .currency,
[data-page=dashboard] .kpi-grid>.kpi:first-child .kpi-note{color:var(--hero-muted)}
[data-page=dashboard] .kpi-grid>.kpi:first-child .kpi-value{color:var(--hero-ink)}
[data-page=dashboard] .kpi-grid>.kpi:first-child .kpi-icon{
 background:var(--hero-icon);
 border-color:var(--hero-line);
 color:var(--forecast-highlight);
}
[data-page=dashboard] .kpi-grid>.kpi:first-child .pill{
 background:var(--hero-icon);
 color:var(--forecast-highlight);
 border-color:var(--hero-line);
}

.chart-grid,.lower-grid{grid-template-columns:minmax(0,1.8fr) minmax(290px,1fr);gap:22px;margin-bottom:25px}
.card-top{padding:24px 24px 0;gap:16px}
.card-top h2{font-size:15px;font-weight:700}
.card-top p{font-size:10.5px;margin-top:5px;color:var(--muted)}
.section-kicker{
 font-size:8.5px;
 letter-spacing:2px;
 color:var(--muted);
 font-weight:700;
 margin-bottom:8px;
 text-transform:uppercase;
}
.legend{font-size:9.5px;gap:14px;margin-top:6px}
.legend i{width:7px;height:7px;border-radius:2px}

.chart{height:232px;padding:16px 18px 8px}
.chart svg{overflow:visible}
.chart text{font-family:Manrope,'Noto Sans Thai',sans-serif;font-weight:500}
.chart-footer{font-size:9.5px;padding:12px 24px 14px;border-top:1px solid var(--line);color:var(--muted)}

/* Annual Revenue vs Target Bar */
.target-line{
 display:flex;
 align-items:center;
 gap:12px;
 padding:18px 24px 0;
 font-size:9.5px;
 color:var(--muted);
 flex-wrap:wrap;
 font-weight:500;
}
.target-line strong{
 font-size:13px;
 font-weight:700;
 color:var(--ink);
 font-variant-numeric:tabular-nums;
 letter-spacing:-0.4px;
}
.target-line .target-track{
 flex:1;
 min-width:70px;
 max-width:140px;
 height:6px;
 border-radius:99px;
 overflow:hidden;
 background:var(--target-track);
}
.target-track span{
 display:block;
 height:100%;
 background:linear-gradient(90deg,var(--chart-main),var(--mint));
 border-radius:99px;
 box-shadow:0 0 10px rgba(199,225,169,0.3);
}
.target-line .target-note{font-size:8.5px;margin-left:auto;color:var(--muted)}

/* Cashflow Forecast Card */
.forecast-card{
 border:1px solid color-mix(in srgb,var(--forecast-bg) 90%,var(--hero-line));
 background:linear-gradient(145deg,var(--forecast-bg) 0%,color-mix(in srgb,var(--forecast-bg) 80%,#03100c) 100%);
 position:relative;
 isolation:isolate;
 display:flex;
 flex-direction:column;
 box-shadow:0 12px 32px -4px rgba(10,35,28,0.3),inset 0 1px 0 rgba(255,255,255,0.08);
}
.forecast-card:before{
 content:'';
 position:absolute;
 width:280px;
 height:280px;
 border:1px solid var(--hero-line);
 border-radius:50%;
 right:-175px;
 top:-125px;
 box-shadow:0 0 0 44px var(--hero-icon);
 z-index:-1;
 pointer-events:none;
}
.forecast-card .section-kicker{color:var(--forecast-muted)}
.forecast-card .card-top{padding:24px 24px 0;color:var(--hero-ink)}
.forecast-card .card-top h2{font-size:17px;font-weight:700;letter-spacing:-0.5px;color:var(--hero-ink)}
.forecast-card .card-top p{font-size:9.5px;color:var(--forecast-muted)}
.forecast-amount{padding:27px 24px 6px}
.forecast-amount .label{font-size:9.5px;color:var(--forecast-muted);letter-spacing:0.2px}
.forecast-amount strong{
 display:block;
 font-family:Manrope,'Noto Sans Thai',sans-serif;
 font-size:35px;
 letter-spacing:-1.3px;
 line-height:1.65;
 font-weight:700;
 white-space:nowrap;
 color:var(--hero-ink);
}
.forecast-amount strong small{font-size:19px;font-weight:450;margin-right:5px;opacity:0.8}
.forecast-variance{font-size:9.5px;color:var(--forecast-highlight);margin-top:2px;font-weight:600}
.forecast-variance span{color:var(--forecast-muted);font-weight:400}
.forecast-mini{height:102px;padding:0 18px;margin-top:auto}
.forecast-mini svg{width:100%;height:100%}
.forecast-bottom{
 padding:13px 24px;
 font-size:8.5px;
 border-top:1px solid var(--hero-line);
 color:var(--forecast-muted);
}
.forecast-bottom .btn{
 border-radius:8px;
 font-size:9.5px;
 background:var(--hero-icon);
 border-color:var(--hero-line);
 color:var(--hero-ink);
}
.forecast-bottom .btn:hover{background:rgba(255,255,255,0.14)}

/* Institutional Financial Tables */
.table-top{padding:20px 24px;border-bottom:1px solid var(--line);align-items:center}
.table-top h2{font-size:14.5px;font-weight:700}
.table-top h2 .pill{margin-left:8px;font-size:9.5px}
.filters{padding:18px 22px;background:var(--card);gap:10px}
.filters .input{min-height:39px;font-size:11.5px}
.filter-space{font-size:9.5px}
.table-wrap{min-width:0}
thead,th{background:var(--surface)}
th{
 padding:12px 20px;
 font-size:9.5px;
 color:var(--muted);
 font-weight:700;
 letter-spacing:0.8px;
 text-transform:uppercase;
 border-bottom:1px solid var(--line);
}
td{
 padding:14px 20px;
 font-size:11.5px;
 border-bottom:1px solid var(--line);
 color:var(--ink);
}
tbody tr:last-child td{border-bottom:0}
tr.clickable{transition:background 0.12s ease}
tr.clickable:hover td{background:var(--surface-hover)}
.primary-text{font-size:11.5px;font-weight:650;color:var(--ink)}
.secondary-text{font-size:9.5px;margin-top:3px;color:var(--muted);line-height:1.7}
.amount{font-size:11.5px;font-weight:650}
.tx-type{gap:12px}
.tx-icon{
 width:33px;
 height:33px;
 border-radius:9px;
 background:var(--surface);
 border:1px solid var(--line);
 color:var(--accent);
}
.tx-icon.income{background:var(--success-bg);color:var(--success-ink);border-color:transparent}
.code{
 background:var(--surface);
 font-size:9.5px;
 letter-spacing:0.3px;
 padding:3px 6px;
 border-radius:5px;
 font-family:Consolas,monospace;
 border:1px solid var(--line);
}
.pagination{padding:15px 22px;font-size:10.5px}

/* Review action items */
.review-list{padding:0 24px}
.review-item{
 padding:18px 0;
 gap:12px;
 border-bottom:1px solid var(--line);
 transition:background 0.12s ease;
}
.review-item:hover{opacity:0.88}
.review-item b{font-size:11.5px;font-weight:650;line-height:1.65;color:var(--ink)}
.review-item p{font-size:9.5px;line-height:1.8;max-width:210px;color:var(--muted)}
.review-icon{
 background:var(--surface);
 color:var(--accent);
 border:1px solid var(--line);
 width:32px;
 height:32px;
 border-radius:9px;
 flex-shrink:0;
}
.review-item .chevron{margin-left:auto;color:var(--muted)}
.health-footer{
 font-size:9.5px;
 background:var(--surface);
 padding:14px 24px;
 color:var(--accent);
 line-height:1.8;
 gap:8px;
 font-weight:600;
 border-top:1px solid var(--line);
}

/* Reports & Statements */
.report-meta{padding:26px;border-bottom:1px solid var(--line)}
.report-meta h2{font-size:20px;letter-spacing:-0.5px;font-weight:700}
.report-mark{
 font-size:8.5px;
 letter-spacing:1.5px;
 text-transform:uppercase;
 font-weight:700;
 border:1px solid var(--line);
 border-radius:6px;
 padding:4px 8px;
 background:var(--surface);
 color:var(--muted);
}
.finance-table .big-total td{
 background:var(--forecast-bg);
 color:var(--hero-ink);
 font-weight:700;
 padding:19px 24px;
 font-size:16px;
 border-top:2px solid var(--line);
}
.finance-table .group td{
 font-size:10.5px;
 letter-spacing:0.6px;
 padding:13px 24px;
 font-weight:700;
 background:var(--surface);
 text-transform:uppercase;
}
.finance-table .total td{
 padding:15px 24px;
 font-size:12px;
 font-weight:700;
 background:var(--accent-soft);
 border-top:1px solid var(--line);
}
.finance-table .amount{font-size:12px}

/* Modal Dialogs & Command Overlays */
.overlay-bg{
 background:rgba(6,18,14,0.72);
 backdrop-filter:blur(18px);
 -webkit-backdrop-filter:blur(18px);
}
.modal{
 padding:30px;
 border-radius:22px;
 box-shadow:0 32px 100px -10px rgba(0,0,0,0.55),0 0 0 1px var(--line);
 background:var(--card);
 border:1px solid var(--line);
}
.modal-head{padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.modal-head h2{font-size:23px;font-weight:700;letter-spacing:-0.6px}
.modal .form-grid{gap:18px}
.form-actions{padding-top:20px;gap:12px;border-top:1px solid var(--line)}
.drawer{box-shadow:-20px 0 80px rgba(0,0,0,0.35);background:var(--card)}
.drawer-header{padding:28px;border-bottom:1px solid var(--line)}
.drawer-header h2{font-size:24px;font-weight:700}
.drawer-footer{padding:21px 28px;border-top:1px solid var(--line)}
.empty{padding:68px 22px}
.empty svg{color:var(--accent);opacity:0.75}
.empty h3{margin-top:15px;font-size:15px;font-weight:650}

.settings-nav button{
 font-size:11.5px;
 border-radius:10px;
 transition:background 0.15s ease,color 0.15s ease;
}
.settings-nav button.active{
 background:var(--accent-soft);
 color:var(--accent);
 font-weight:700;
}
.appearance-panel{padding:28px}
.theme-option{
 border-radius:12px;
 border:2px solid var(--line);
 transition:border-color 0.15s ease,transform 0.1s ease;
}
.theme-option:hover{border-color:var(--accent)}
.theme-option.selected{border-color:var(--accent);background:var(--accent-soft)}
.theme-thumbnail{border-radius:9px}

.knowledge-hero{
 background:linear-gradient(135deg,var(--forecast-bg) 0%,color-mix(in srgb,var(--forecast-bg) 80%,#03100c) 100%);
 border:1px solid var(--hero-line);
 color:var(--hero-ink);
 padding:36px;
 border-radius:18px;
}
.knowledge-hero h2{color:var(--hero-ink);font-size:28px;font-weight:680;letter-spacing:-0.8px}
.knowledge-hero p{color:var(--hero-muted);font-size:11.5px;max-width:650px;line-height:1.9}
.knowledge-hero .btn.primary{
 background:var(--sidebar-active);
 color:var(--sidebar-active-ink);
 border-color:transparent;
 font-weight:700;
}
.knowledge-hero .label{color:var(--hero-muted);font-weight:700;letter-spacing:1.8px}
.folder-card{
 padding:26px;
 border-radius:14px;
 transition:transform 0.16s ease,box-shadow 0.16s ease;
}
.folder-card:hover{
 transform:translateY(-2px);
 box-shadow:0 6px 20px -3px rgba(0,0,0,0.06);
}
.folder-card h3{font-size:14px;margin-top:18px;font-weight:650}
.folder-card p{font-size:11px}
.import-drop{border-radius:16px;padding:42px}
.month-card{padding:25px}
.page-footer{font-size:8.5px;letter-spacing:0.2px;margin-top:36px;padding-top:20px;border-top:1px solid var(--line)}

/* Login Portal — Sovereign Architectural Edition */
.auth-page{background:var(--bg);grid-template-columns:1.15fr 1fr}
.auth-art{
 background:var(--dark);
 padding:48px 68px;
 color:var(--sidebar-strong);
 background-image:radial-gradient(circle at 15% 25%,rgba(216,237,191,0.07) 0%,transparent 50%),linear-gradient(var(--auth-grid) 1px,transparent 1px),linear-gradient(90deg,var(--auth-grid) 1px,transparent 1px);
 background-size:100% 100%,76px 76px,76px 76px;
 background-position:center center;
}
.auth-art:before{display:none}
.auth-art h1{
 font-family:Manrope,'Noto Sans Thai',sans-serif;
 font-size:72px;
 font-weight:550;
 line-height:1.08;
 letter-spacing:-3.4px;
 max-width:460px;
 margin:17px 0 25px;
}
.auth-art h1 em{color:var(--sidebar-active);font-style:normal}
.auth-art p{font-size:12.5px;color:var(--sidebar-ink);line-height:2;max-width:380px}
.auth-kicker{font-size:8.5px;letter-spacing:2.8px;color:var(--sidebar-ink);font-weight:700;text-transform:uppercase}
.auth-art .brand-mark{background:var(--sidebar-active);color:var(--sidebar-active-ink)}
.auth-art .brand-name{color:var(--sidebar-strong)}
.auth-art .brand-name small{color:var(--sidebar-ink)}
.auth-art .auth-bottom{font-size:8.5px;letter-spacing:1.6px;color:var(--sidebar-ink);text-transform:uppercase}
.auth-preview{
 background:var(--sidebar-surface);
 border:1px solid var(--sidebar-line);
 padding:22px;
 border-radius:15px;
 max-width:410px;
 margin-top:36px;
 backdrop-filter:blur(12px);
 -webkit-backdrop-filter:blur(12px);
}
.preview-heading{font-size:9.5px;color:var(--sidebar-ink);font-weight:600}
.preview-live-dot{background:var(--sidebar-active);box-shadow:0 0 6px var(--sidebar-active)}
.preview-bars{gap:11px;height:82px}
.preview-bars span{
 background:var(--sidebar-hover);
 border-radius:3px 3px 0 0;
 border:1px solid var(--sidebar-line);
}
.preview-bars span:nth-last-child(-n+3){background:var(--sidebar-active);border-color:var(--sidebar-active)}
.preview-steps{border-color:var(--sidebar-line);margin-top:19px;padding-top:13px}
.preview-steps span{color:var(--sidebar-ink);font-size:8.5px;font-weight:500}

.auth-form-wrap{padding:95px 52px 45px}
.auth-form{max-width:385px}
.auth-form .label{font-size:8.5px;letter-spacing:2px;font-weight:700}
.auth-form h2{font-size:32px;font-weight:700;line-height:1.45;letter-spacing:-0.8px}
.auth-form>p{font-size:11.5px;line-height:1.9}
.auth-form .btn.primary{height:46px;font-size:12.5px;border-radius:11px}
.auth-form .field label{font-size:11.5px}
.demo-login-card{
 background:var(--card);
 border:1px solid var(--line);
 padding:18px;
 border-radius:14px;
 box-shadow:var(--shadow);
}
.demo-card-title{font-size:11.5px;font-weight:700}
.demo-account{
 border-radius:8px;
 min-height:44px;
 background:var(--surface);
 border:1px solid var(--line);
 transition:all 0.14s ease;
}
.demo-account:hover{
 background:var(--accent-soft);
 border-color:var(--accent);
 color:var(--accent);
 transform:translateY(-1px);
}
.demo-account b{font-size:10.5px;font-weight:700}
.demo-account small{font-size:8.5px}
.demo-password{font-size:9.5px}
.auth-foot{font-size:9.5px}
.auth-preferences{top:24px;right:32px}

/* Responsive Rules & Safeguards */
@media(min-width:1700px){
 .kpi-value{font-size:35px!important}
 .forecast-amount strong{font-size:42px}
 .content{padding:40px 48px 28px}
 .chart{height:270px}
}

@media(max-width:1350px){
 .sidebar{width:236px;padding-left:13px;padding-right:13px}
 .main{margin-left:236px}
 .content{padding:28px}
 .topbar{padding:0 28px}
 .kpi{padding:18px}
 .kpi-value{font-size:25px!important;letter-spacing:-1px}
 .chart-grid,.lower-grid{grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);gap:18px}
 .card-top{padding:22px 21px 0}
 .target-line{padding:16px 21px 0}
 .forecast-amount{padding:25px 21px 4px}
 .forecast-amount strong{font-size:31px}
 .table-top{padding:19px 21px}
 .auth-art{padding:40px}
 .auth-art h1{font-size:62px}
}

@media(max-width:1120px){
 .page-head{align-items:flex-start;flex-direction:column;gap:18px}
 .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .kpi-value{font-size:30px!important}
 .chart-grid,.lower-grid{grid-template-columns:minmax(0,1fr)}
 .forecast-card .card-top{padding:24px}
 .forecast-amount{padding:5px 24px}
 .forecast-amount strong{font-size:38px}
 .forecast-mini{height:116px}
 .forecast-mini svg{max-width:450px}
 .forecast-bottom{padding:14px 24px}
 .auth-art h1{font-size:52px}
 .target-line .target-track{max-width:180px}
}

@media(min-width:801px) and (max-height:1000px){
 .nav-item{min-height:35px;padding-top:8px;padding-bottom:8px;margin:2px 0}
 .nav-section{margin-top:16px;margin-bottom:7px}
 .sidebar .brand{margin-bottom:24px}
 .sidebar .workspace-switch{margin-bottom:12px}
}

@media(max-width:800px){
 .sidebar{width:264px;padding:25px 16px 18px}
 .main{margin-left:0}
 .topbar{height:64px;padding:0 20px;background:var(--bg)}
 .content{padding:25px 20px}
 .top-actions{gap:5px}
 .theme-toggle{padding:0 8px}
 .top-actions .icon-btn{background:transparent;border-color:transparent}
 .breadcrumbs{gap:8px;font-size:10px}
 .mobile-menu{background:transparent;border-color:var(--line)}
 .page-head{gap:18px;margin-bottom:22px}
 .page-head h1,[data-page=dashboard]>.page-head h1{font-size:33px;letter-spacing:-1.1px}
 .page-head p{font-size:11px;max-width:450px}
 .head-buttons{gap:7px}
 .kpi-grid{gap:12px}
 .kpi{padding:18px}
 .kpi-value{font-size:28px!important;margin-top:16px}
 .kpi-head{font-size:10px}
 .kpi-icon{width:26px;height:26px}
 .kpi-note{font-size:9px}
 .demo-notice{font-size:8px;align-items:center;line-height:1.6;margin-bottom:22px;gap:7px}
 .demo-notice span{line-height:1.6}
 .notice{font-size:9px;line-height:1.9;padding:11px 13px}
 .segment button{font-size:9px;padding:7px 11px}
 .basis-bar{margin-bottom:15px}
 .chart{height:240px;padding:18px 12px 6px}
 .card-top{padding:22px 20px 0}
 .chart-footer{padding:13px 20px}
 .table-top{padding:19px 20px}
 .review-list{padding:0 20px}
 .review-item p{max-width:100%}
 .target-line{padding:17px 20px 0}
 .target-line .target-note{margin-left:0}
 .lower-grid{gap:18px}
 .health-footer{padding:13px 20px}
 .modal{padding:23px;border-radius:17px}
 .modal-head h2{font-size:20px}
 .modal .form-grid{gap:16px}
 .auth-page{grid-template-columns:1fr}
 .auth-art{display:none}
 .auth-form-wrap{padding:94px 24px 35px}
 .auth-form h2{font-size:30px}
 .auth-preferences{right:22px;top:23px}
 .auth-form{max-width:410px}
 .folder-card{padding:23px}
 .knowledge-hero{padding:27px}
 .knowledge-hero h2{font-size:24px}
 #toast{left:50%}
}

@media(max-width:420px){
 .content{padding:23px 16px}
 .topbar{padding:0 14px}
 .page-head h1,[data-page=dashboard]>.page-head h1{font-size:30px;letter-spacing:-.9px}
 .page-eyebrow{font-size:7px}
 .page-head p{font-size:10px}
 .head-buttons .select{max-width:150px;font-size:9px}
 .head-buttons .btn{font-size:10px}
 .kpi-grid{gap:10px}
 .kpi{padding:15px 13px}
 .kpi-value{font-size:21px!important;letter-spacing:-.9px;margin:15px 0 12px}
 .kpi-value .currency{font-size:12px;margin-right:3px}
 .kpi-note{font-size:8px;gap:5px}
 .kpi-head{font-size:9px;line-height:1.6}
 .kpi-icon{display:none}
 .card-top{flex-wrap:wrap;gap:8px}
 .legend{font-size:8px;gap:10px}
 .chart{height:220px;padding:14px 10px 5px}
 .target-line{gap:9px;font-size:8px}
 .target-line strong{font-size:11px}
 .target-line .target-track{max-width:70px}
 .target-line .target-note{width:100%;font-size:8px}
 .forecast-amount strong{font-size:32px}
 .forecast-amount .label{font-size:9px}
 .forecast-variance{font-size:9px}
 .recent-table td,.recent-table th{padding:14px 10px}
 .recent-table .amount{font-size:10px}
 .recent-table .primary-text{font-size:10px}
 .recent-table .secondary-text{font-size:9px;max-width:102px}
 .recent-table .pill{font-size:8px;padding:3px 5px}
 .auth-form-wrap{padding:87px 24px 35px}
 .review-item b{font-size:11px}
 .demo-notice b{font-size:7px}
 .demo-notice span{font-size:8px}
 .page-footer{font-size:7px}
}

@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{transition:none!important;animation:none!important}
}

@media print{
 .main{margin:0}
 .content{padding:0}
 .card,.forecast-card,[data-page=dashboard] .kpi-grid>.kpi:first-child{
  background:#fff!important;
  color:#111!important;
  border-color:#ccc!important;
  box-shadow:none!important;
 }
 .card *{color:#111!important}
 .forecast-card:before{display:none}
 .target-track{print-color-adjust:exact}
 .page-head h1{font-size:25px!important}
}

@media(max-width:600px){
 .chart{height:150px;padding:14px 10px 8px}
 .chart text{font-size:16px}
 .chart-month:not([data-month="0"]):not([data-month="3"]):not([data-month="6"]):not([data-month="9"]){display:none}
}

@media(max-width:360px){
 .kpi-value{font-size:18px!important;letter-spacing:-.8px}
 .kpi-value .currency{font-size:10px}
 .kpi-head{font-size:8px}
 .kpi-note{font-size:7px}
 .head-buttons .select{padding-left:9px;padding-right:9px}
}

/* User administration — Owner workspace. Semantic tokens only, so light/dark follow the Atelier theme. */
.center{text-align:center}
.um-kpi.um-attention .kpi-icon{background:var(--warn-bg);color:var(--warn-ink)}
.um-kpi.um-attention .kpi-value{color:var(--warn-ink)}
.um-table td{vertical-align:middle}
.um-table td .secondary-text{max-width:220px}
.um-identity{display:flex;align-items:center;gap:12px;min-width:200px}
.um-avatar{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;font-size:11.5px;font-weight:700;letter-spacing:.4px;
 background:var(--surface);color:var(--muted);border:1px solid var(--line)}
.um-avatar.role-owner{background:var(--forecast-bg);color:var(--forecast-highlight);border-color:transparent}
.um-avatar.role-approver{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 18%,transparent)}
.um-avatar.role-accountant{background:var(--success-bg);color:var(--success-ink);border-color:color-mix(in srgb,var(--green) 18%,transparent)}
.um-inactive td{opacity:.62}
.um-inactive td:last-child{opacity:1}
.um-online{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--success-ink);font-variant-numeric:tabular-nums}
.um-online .dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 18%,transparent)}
.um-actions{display:inline-flex;gap:6px;justify-content:flex-end;flex-wrap:nowrap}
.um-actions .icon-btn{width:32px;height:32px;border-radius:9px}
.um-actions .icon-btn.um-danger:hover{background:var(--danger-bg);color:var(--red);border-color:color-mix(in srgb,var(--red) 30%,transparent)}
.um-matrix{margin-top:22px}
.um-matrix td:first-child{font-weight:550}
.um-check{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--success-bg);color:var(--success-ink)}
.um-dash{color:var(--muted);opacity:.6}
.um-loading{color:var(--muted);font-size:12px;padding:28px}
.um-moved h2{margin-bottom:10px}.um-moved p{font-size:12px;margin-bottom:18px;line-height:1.8}
.um-password{display:flex;gap:8px;align-items:stretch}
.um-password .input{flex:1;min-width:0;letter-spacing:.6px}
.um-password .btn{white-space:nowrap}
.um-modal-identity{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:18px;border:1px solid var(--line);border-radius:13px;background:var(--surface)}
.um-modal-identity b{display:block;font-size:13px;color:var(--ink)}
.um-modal-identity small{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.um-help{font-size:10.5px;color:var(--muted);margin-top:14px}
.um-timeline{list-style:none;margin:0;padding:0 0 0 4px;position:relative}
.um-timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:1px;background:var(--line)}
.um-timeline li{display:flex;gap:14px;padding:9px 0;position:relative}
.um-timeline-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);margin-top:6px;flex-shrink:0;box-shadow:0 0 0 4px var(--card);position:relative;left:0}
.um-timeline b{font-size:12px;color:var(--ink);font-weight:600}
.um-timeline small{display:block;font-size:10.5px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.um-force-page .auth-form .btn.text{width:100%;margin-top:8px;height:auto;justify-content:center}
.um-identity .primary-text{color:var(--ink)}
.pill.um-super{background:var(--forecast-bg);color:var(--forecast-highlight);border-color:transparent;font-weight:700}
@media(max-width:800px){
 .um-table,.um-table tbody{display:block;min-width:0}
 .um-table thead{display:none}
 .um-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who status" "role role" "seen actions";gap:10px 12px;padding:16px 18px;border-bottom:1px solid var(--line)}
 .um-table tbody tr:last-child{border-bottom:0}
 .um-table td{display:block;padding:0;border:0;background:transparent!important}
 .um-table td:nth-child(1){grid-area:who}.um-table td:nth-child(2){grid-area:role;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
 .um-table td:nth-child(3){grid-area:status;justify-self:end}.um-table td:nth-child(4){grid-area:seen;align-self:center;font-size:10.5px;color:var(--muted)}
 .um-table td:nth-child(5){display:none}.um-table td:nth-child(6){grid-area:actions;justify-self:end}
 .um-table td:nth-child(2) .secondary-text{margin:0;max-width:none}
 .um-identity{min-width:0}
 .um-matrix td:first-child{min-width:150px}
 .um-password{flex-wrap:wrap}.um-password .input{flex-basis:100%}
}