*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial;background:#f4f7fb;color:#172033}.app{display:flex;min-height:100vh}.sidebar{width:245px;background:#101828;color:#fff;padding:22px 14px;position:fixed;inset:0 auto 0 0}.brand{font-size:19px;font-weight:800;padding:4px 10px 20px;display:flex;gap:8px;align-items:center}.brand small{font-size:10px;background:#344054;padding:4px 7px;border-radius:20px;margin-left:auto}.sidebar nav{display:flex;flex-direction:column;gap:7px}.sidebar a{color:#d0d5dd;text-decoration:none;padding:11px 12px;border-radius:10px}.sidebar a:hover{background:#1d2939;color:#fff}.main{margin-left:245px;width:calc(100% - 245px)}.top{height:64px;background:#fff;border-bottom:1px solid #e5e7eb;padding:0 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5}.content{padding:24px;max-width:1500px;margin:auto}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.card{background:#fff;border:1px solid #e7ebf0;border-radius:16px;padding:18px;box-shadow:0 3px 16px rgba(16,24,40,.04)}.card h3{margin:0 0 8px;font-size:14px;color:#667085}.value{font-size:26px;font-weight:800}.positive{color:#067647}.negative{color:#b42318}.muted{color:#667085}.row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.between{justify-content:space-between}.section{margin-top:20px}.table-wrap{overflow:auto;background:#fff;border:1px solid #e7ebf0;border-radius:14px}table{width:100%;border-collapse:collapse;min-width:720px}th,td{padding:11px 12px;border-bottom:1px solid #edf0f3;text-align:left;font-size:14px}th{background:#f8fafc;color:#475467;font-weight:700}tr:last-child td{border-bottom:0}.num{text-align:right}.btn{display:inline-block;border:0;background:#155eef;color:white;padding:10px 14px;border-radius:9px;text-decoration:none;cursor:pointer;font-weight:700}.btn.secondary{background:#344054}.btn.danger{background:#b42318}.btn.light{background:#eef4ff;color:#1849a9}.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.field label{display:block;font-size:12px;font-weight:700;color:#475467;margin-bottom:5px}.field input,.field select,.field textarea{width:100%;padding:10px 11px;border:1px solid #d0d5dd;border-radius:9px;background:#fff}.field textarea{min-height:80px}.alert{padding:12px 14px;border-radius:10px;margin-bottom:15px}.alert.ok{background:#ecfdf3;color:#027a48}.alert.err{background:#fef3f2;color:#b42318}.tabs{display:flex;gap:8px;margin-bottom:16px}.tabs a{padding:9px 12px;border-radius:9px;background:#fff;border:1px solid #e1e6ed;text-decoration:none;color:#344054}.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}.kpi{font-size:12px;color:#667085}.kpi strong{display:block;color:#101828;font-size:20px;margin-top:4px}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,#eef4ff,#f9fafb)}.login-card{width:min(440px,100%);background:#fff;padding:28px;border-radius:18px;border:1px solid #e4e7ec;box-shadow:0 20px 50px rgba(16,24,40,.08)}.login-card h1{margin-top:0}.login-card .field{margin-bottom:13px}.chart{height:330px}@media(max-width:1000px){.grid{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr 1fr}}@media(max-width:720px){.sidebar{width:72px}.sidebar .brand span,.sidebar .brand small,.sidebar nav a{font-size:0}.sidebar nav a{padding:14px;text-align:center}.sidebar nav a::first-letter{font-size:20px}.main{margin-left:72px;width:calc(100% - 72px)}.grid,.form-grid{grid-template-columns:1fr}.content{padding:14px}}

/* v3 premium dashboard */
:root{--ink:#14233b;--accent:#6658f5}body{background:#f3f5fb;color:var(--ink)}.sidebar{background:linear-gradient(165deg,#111a37,#171d3f 65%,#252052);box-shadow:8px 0 40px rgba(25,34,77,.08)}.sidebar a{transition:.2s}.sidebar a:hover{background:rgba(255,255,255,.13)}.brand{letter-spacing:-.5px}.top{background:rgba(255,255,255,.88);backdrop-filter:blur(18px)}.content{padding:30px}.card{border:1px solid #e8eaf5;border-radius:21px;box-shadow:0 12px 38px rgba(23,34,71,.045);padding:23px}.card h2{letter-spacing:-.5px}.metric{position:relative;overflow:hidden}.metric:before{content:"";position:absolute;right:-25px;top:-35px;width:110px;height:110px;border-radius:50%;background:linear-gradient(135deg,#eae7ff,#f6f5ff)}.metric .value{position:relative;font-size:27px}.grid>.card:nth-child(1){border-top:4px solid #645cf4}.grid>.card:nth-child(2){border-top:4px solid #12aa87}.grid>.card:nth-child(3){border-top:4px solid #ef6483}.grid>.card:nth-child(4){border-top:4px solid #f1ae4d}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:#7167d9;margin-bottom:9px}.page-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.page-head h1,.content h1{letter-spacing:-1.2px;font-size:32px;margin:5px 0}.hero-panel{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;padding:29px 32px;border-radius:23px;color:#fff;background:radial-gradient(circle at 80% 10%,#8476fb,transparent 35%),linear-gradient(115deg,#25285d,#4b3b9b);box-shadow:0 18px 40px rgba(61,54,147,.2)}.hero-panel .eyebrow{color:#c8c4ff}.hero-panel h2{margin:5px 0 10px;font-size:25px}.hero-panel p{color:#e2e1ff}.hero-panel .btn{background:#fff;color:#37318d}.btn{background:linear-gradient(110deg,#5b54e9,#7863f8);box-shadow:0 5px 14px rgba(99,88,244,.15)}.btn.light{background:#eeedff;color:#4c43b2;box-shadow:none}.btn.secondary{background:#37415d}.btn.danger{background:#bb344b}.field input:focus,.field select:focus{outline:2px solid #b8b2ff;border-color:#7065eb}.table-wrap{box-shadow:none;border:1px solid #edf0f8}th{background:#f8f9ff}td{vertical-align:middle}tr:hover td{background:#fbfbff}@media(max-width:720px){.content{padding:15px}.page-head h1,.content h1{font-size:25px}.hero-panel{padding:22px}.hero-panel h2{font-size:20px}}
/* v4: 12-month editable budget grid */
.budget-matrix{min-width:1700px;font-variant-numeric:tabular-nums}.budget-matrix th,.budget-matrix td{white-space:nowrap;padding:9px}.budget-matrix thead th{position:sticky;top:0;background:#eaeafa;z-index:2}.budget-matrix tr>th:first-child{position:sticky;left:0;background:#fff;z-index:3;min-width:180px}.budget-matrix th small{display:block;color:#8a90a5;font-size:11px;font-weight:400;margin-top:4px}.matrix-form{display:flex;align-items:center;gap:3px}.matrix-form input{width:99px;border:1px solid transparent;border-radius:7px;padding:7px 4px;background:transparent;text-align:right;color:#34405e}.matrix-form input:focus{border-color:#756af6;background:#f4f3ff;outline:none}.matrix-form button{border:0;border-radius:6px;background:#eeeaff;color:#5549c9;cursor:pointer;padding:7px}.matrix-form button:hover{background:#c9c1ff}.matrix-total{font-weight:800;color:#473da2;background:#f8f7ff}.matrix-footer th,.matrix-footer td{font-weight:800;background:#eaeafa!important}.tabs a.active{background:#5548c5;color:#fff;border-color:#5548c5}
/* v5 mobile-first glass / 3D visual system */
:root{--glass-border:rgba(255,255,255,.2);--glass-bg:rgba(24,45,84,.58)}body.glass-ui{background:radial-gradient(ellipse at 5% 0%,#174c80 0,transparent 36%),radial-gradient(ellipse at 95% 80%,#39256d 0,transparent 42%),#09162f;color:#f4f8ff;min-height:100vh}body.glass-ui .sidebar{background:linear-gradient(155deg,rgba(31,57,95,.95),rgba(9,20,46,.96));border-right:1px solid var(--glass-border);box-shadow:14px 0 50px #030a1b66;z-index:50;overflow-y:auto}body.glass-ui .brand{padding:10px 10px 22px;font-size:19px;align-items:center}body.glass-ui .brand small.brand-sub{display:block;background:none;padding:0;margin:4px 0 0;font-size:11px;color:#9cb9dc;font-weight:400}body.glass-ui .brand-mark{display:grid;place-items:center;background:linear-gradient(145deg,#51dddf,#3576ff);width:40px;height:40px;border-radius:13px;box-shadow:0 6px 20px #288ef688;font-size:29px}body.glass-ui .sidebar nav a{display:flex;align-items:center;gap:13px;color:#d4e4ff;border:1px solid transparent;font-size:14px;padding:11px 12px}body.glass-ui .sidebar nav a.active,body.glass-ui .sidebar nav a:hover{background:linear-gradient(100deg,#2aafff55,#6675ff55);border-color:#6ac9ff66;color:#fff;box-shadow:inset 0 1px #ffffff44,0 5px 19px #2d81ff33}body.glass-ui .nav-icon{font-size:22px;width:26px;text-align:center;color:#8ae7ff}.nav-profile{display:flex;align-items:center;gap:12px;padding:13px;margin:0 4px 15px;border-radius:18px;background:#ffffff12;border:1px solid #ffffff24}.nav-profile strong,.nav-profile small{display:block}.nav-profile strong{font-size:13px}.nav-profile small{font-size:11px;color:#a5bddb;margin-top:4px}.avatar,.top-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(145deg,#3ae6ba,#368bff);display:grid;place-items:center;color:#fff;font-weight:800;text-decoration:none;flex-shrink:0}.logout-link{display:block;margin:15px 6px;color:#c6d8ff;text-decoration:none;padding:12px;border:1px solid #ffffff28;border-radius:14px}.menu-close,.menu-toggle{display:none}body.glass-ui .top{background:rgba(16,35,70,.74);backdrop-filter:blur(25px);border-bottom:1px solid #ffffff20;color:#fff;gap:15px}body.glass-ui .top-title{flex:1}body.glass-ui .top-title strong,body.glass-ui .top-title small{display:block}body.glass-ui .top-title small{font-size:11px;color:#a9c1e0;margin-top:3px}body.glass-ui .top-date{color:#bcd1eb;font-size:13px}body.glass-ui .content{max-width:1440px}body.glass-ui .card,body.glass-ui .table-wrap,body.glass-ui .hero-panel{background:linear-gradient(145deg,rgba(67,107,154,.38),rgba(23,38,80,.65));border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 #ffffff29,0 15px 40px #0007;backdrop-filter:blur(20px);border-radius:23px;color:#fff}body.glass-ui .card h3,body.glass-ui .muted,body.glass-ui .kpi{color:#b7cce6}body.glass-ui .value,body.glass-ui .kpi strong{color:#fff}body.glass-ui .positive{color:#4df0ac}body.glass-ui .negative{color:#ff8295}body.glass-ui .grid>.card:nth-child(1){background:linear-gradient(135deg,#107e6e88,#1c3b6388);border-top:1px solid #7affd788}body.glass-ui .grid>.card:nth-child(2){background:linear-gradient(135deg,#b4426480,#3d366c88);border-top:1px solid #ff94a888}body.glass-ui .grid>.card:nth-child(3){background:linear-gradient(135deg,#176d9d88,#2c377188);border-top:1px solid #6bcfff88}body.glass-ui .grid>.card:nth-child(4){background:linear-gradient(135deg,#6545ac88,#26346a88);border-top:1px solid #b29aff88}body.glass-ui .hero-panel{background:radial-gradient(circle at 85% 0%,#5e85edaa,transparent 40%),linear-gradient(125deg,#143e65,#32285e)}body.glass-ui .eyebrow{color:#8fdcff}body.glass-ui .hero-panel p{color:#d7eaff}body.glass-ui .btn{background:linear-gradient(130deg,#0dc89b,#177acb);color:white;border:1px solid #ffffff33;box-shadow:0 7px 22px #00bbca33}body.glass-ui .btn.light{background:#ffffff20;color:#fff}body.glass-ui .table-wrap th{background:#203c65;color:#d6e8ff}body.glass-ui .table-wrap td{color:#e6efff;border-color:#ffffff18}body.glass-ui tr:hover td{background:#ffffff10}body.glass-ui .field label{color:#cbdaf2}body.glass-ui input,body.glass-ui select,body.glass-ui textarea{background:#f5f8ff;color:#1d3151;border:1px solid #b7c9e4}body.glass-ui .tabs a{background:#ffffff18;color:#fff;border-color:#ffffff33}body.glass-ui .tabs a.active{background:#356ee0}body.glass-ui .kpi strong{font-size:22px}body.glass-ui .budget-matrix tr>th:first-child{background:#183358;color:#fff}body.glass-ui .budget-matrix thead th,body.glass-ui .matrix-footer td,body.glass-ui .matrix-footer th{background:#264572!important;color:#fff}body.glass-ui .matrix-total{background:#22466d;color:#fff}body.glass-ui .chart{min-height:290px}.nav-backdrop{display:none}
@media(max-width:900px){body.glass-ui .sidebar{width:285px;transform:translateX(-110%);transition:transform .28s ease;inset:0 auto 0 0}body.glass-ui.menu-open .sidebar{transform:translateX(0)}body.glass-ui .main{margin:0;width:100%}body.glass-ui .sidebar nav a{font-size:14px;padding:11px 12px}body.glass-ui .sidebar .brand span{display:block}body.glass-ui .sidebar .brand small{font-size:11px}body.glass-ui .menu-close{display:block;margin-left:auto;background:#ffffff22;border:1px solid #ffffff33;border-radius:10px;color:#fff;font-size:25px;width:35px;height:35px;cursor:pointer}body.glass-ui .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;border-radius:13px;background:#ffffff17;border:1px solid #ffffff30;cursor:pointer;padding:11px}body.glass-ui .menu-toggle span{height:2px;width:100%;background:#fff;border-radius:2px}body.glass-ui .nav-backdrop{display:block;position:fixed;inset:0;background:#020918bb;z-index:49;opacity:0;pointer-events:none;transition:opacity .28s}body.glass-ui.menu-open .nav-backdrop{opacity:1;pointer-events:auto}body.glass-ui.menu-open{overflow:hidden}body.glass-ui .content{padding:17px}body.glass-ui .top{padding:0 16px}body.glass-ui .top-date{display:none}}
@media(max-width:620px){body.glass-ui .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}body.glass-ui .grid>.card{padding:15px 12px;border-radius:19px;min-width:0}body.glass-ui .grid>.card .value{font-size:clamp(16px,4.5vw,23px);overflow-wrap:anywhere}body.glass-ui .grid>.card h3{font-size:12px}body.glass-ui .content h1{font-size:25px}body.glass-ui .content>.row.between{align-items:flex-start}body.glass-ui .content>.row.between form{width:100%}body.glass-ui .content>.row.between form select{flex:1;min-width:100px}body.glass-ui .hero-panel{padding:20px}body.glass-ui .card{padding:17px}body.glass-ui .split{grid-template-columns:1fr}body.glass-ui .form-grid{grid-template-columns:1fr}body.glass-ui .chart{height:265px}body.glass-ui .top-title strong{font-size:14px}body.glass-ui .top-avatar{width:33px;height:33px}}
@media(prefers-reduced-motion:reduce){body.glass-ui .sidebar,body.glass-ui .nav-backdrop{transition:none}}
