:root{--bg:#141b2d;--panel:#1f2a40;--text:#e0e0e0;--muted:#a3aab9;--line:#2f3a55;--accent:#6870fa;--success:#4cceac;--blue:#3e4396}
.theme-light{--bg:#f4f6fb;--panel:#ffffff;--text:#1d2742;--muted:#60708e;--line:#dde5f2;--accent:#4f46e5;--success:#0f9d7a;--blue:#4f46e5}
.theme-dark{--bg:#141b2d;--panel:#1f2a40;--text:#e0e0e0;--muted:#a3aab9;--line:#2f3a55;--accent:#6870fa;--success:#4cceac;--blue:#3e4396}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif}
a{text-decoration:none;color:inherit}
.app-shell{display:grid;grid-template-columns:auto 1fr;min-height:100vh}
.sidebar{background:var(--panel);padding:16px;border-right:1px solid var(--line);overflow:auto;width:280px}
.sidebar.collapsed{width:84px;padding:12px}
.logo-wrap{padding:4px 6px 10px}.brand{margin:0}.profile-card{margin:10px 0 16px;padding:12px;background:color-mix(in oklab, var(--panel) 85%, var(--accent));border:1px solid var(--line);border-radius:12px;text-align:center}
.avatar{width:56px;height:56px;border-radius:50%;background:color-mix(in oklab, var(--accent) 35%, transparent);display:grid;place-items:center;margin:0 auto 8px;font-weight:700}.accent{color:var(--success)}
.section-title{margin:14px 8px 6px;color:#8fa0c5;font-size:.85rem;text-transform:uppercase}
.menu-item{padding:10px 12px;border-radius:8px;margin:6px 0;background:#1f2a40;border:1px solid transparent}
.menu-item:hover{border-color:#3d4e73}.menu-item.active{background:#2c3d66;border-color:#40548a}
.main-area{padding:12px 18px}.topbar{display:flex;justify-content:space-between;align-items:center;padding:8px 0 14px}
.search{display:flex;background:#1f2a40;border:1px solid var(--line);border-radius:6px;overflow:hidden}.search input{background:transparent;border:0;color:var(--text);padding:10px 12px;min-width:220px}.search button{background:transparent;border:0;color:var(--text);padding:0 10px}
.top-icons{display:flex;gap:8px}.top-icons button{background:#1f2a40;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:8px}
.content{padding:8px 0 16px}
.page{padding:8px 0}
.page-header{margin-bottom:16px}.title{margin:0}.subtitle{color:var(--success);margin:4px 0 0}
.row{display:flex;gap:12px}.between{justify-content:space-between}.center{align-items:center}.end{justify-content:flex-end}
.btn{border:0;background:var(--accent);color:#fff;padding:10px 14px;border-radius:8px;font-weight:600}.icon-btn{background:#2a3553;color:#fff;border:1px solid var(--line);border-radius:8px;padding:8px}
.grid{display:grid;gap:12px}.stats{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}.two-col{grid-template-columns:2fr 1fr;margin-top:12px}.three-col{grid-template-columns:1fr 1fr 1fr;margin-top:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}.muted{color:var(--muted)}.green{color:var(--success)}.green-2{color:#7cf0d2}.pill{background:var(--success);color:#13223f;padding:4px 8px;border-radius:6px;font-weight:700}
.statbox h3{margin:6px 0}.icon{margin:0}.tx{padding:10px 0;border-top:1px solid #33415f}
.progress-circle{border-radius:50%;background:radial-gradient(#1f2a40 55%, transparent 56%),conic-gradient(transparent 0deg var(--angle), #6870fa var(--angle) 360deg), #4cceac}
.placeholder-bars{height:180px;display:flex;align-items:flex-end;gap:8px;margin-top:10px}.placeholder-bars div{width:18px;background:linear-gradient(180deg,#7f8cff,#6870fa);border-radius:6px 6px 0 0}
.center-col{display:grid;place-items:center;margin:12px 0}.geo-placeholder{display:grid;place-items:center;height:220px;border:1px dashed #42557d;border-radius:8px;color:#9eb0d8}.geo-placeholder.large{height:360px}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;margin-top:10px}th,td{border-bottom:1px solid #33415f;padding:10px 8px;text-align:left;white-space:nowrap}
.badge{display:inline-block;padding:4px 8px;border-radius:6px;color:#fff;font-size:.85rem}.badge.admin{background:#4cceac;color:#0f2c25}.badge.manager{background:#3f8a75}.badge.user{background:#2f6f5f}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field{display:grid;gap:6px}.field.span-2{grid-column:span 2}input{padding:10px;border:1px solid #3a4a6b;border-radius:8px;background:#1a2238;color:#fff}
.faq summary{cursor:pointer;font-weight:600}
.calendar-layout{display:grid;grid-template-columns:300px 1fr;gap:12px}.event-item{background:#2a3b5f;padding:10px;border-radius:8px;margin:8px 0}
.month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:10px}.day{background:#1a2742;border:1px solid #344a70;border-radius:8px;height:70px;padding:6px}
.pie-wrap{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:center}.pie{width:220px;height:220px;border-radius:50%;background:conic-gradient(#4cceac 0 35%, #6870fa 35% 70%, #a594fd 70% 100%);margin:auto}
.legend p{display:flex;align-items:center;gap:6px;margin:6px 0}.legend .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}.dot.a{background:#4cceac}.dot.b{background:#6870fa}.dot.c{background:#a594fd}
@media (max-width:1100px){.two-col,.three-col,.calendar-layout,.pie-wrap{grid-template-columns:1fr}}
@media (max-width:980px){.app-shell{grid-template-columns:1fr}.sidebar{position:sticky;top:0;z-index:2}.form-grid{grid-template-columns:1fr}.field.span-2{grid-column:span 1}}
.th-btn{background:none;border:0;color:var(--text);font:inherit;cursor:pointer}
.chart-wrap{height:210px;display:flex;align-items:flex-end;gap:10px;padding:8px;border:1px dashed var(--line);border-radius:10px;margin-top:8px}
.chart-wrap .bar{width:22px;background:linear-gradient(180deg,#7f8cff,#6870fa);border-radius:6px 6px 0 0}
.line-svg{width:100%;height:220px;background:rgba(255,255,255,.02);border:1px dashed var(--line);border-radius:10px}
.tiny-dot{color:var(--success);font-size:24px;line-height:1;margin:4px 0 0}
hr{border:0;border-top:1px solid var(--line);margin:12px 0}
.table-toolbar{margin-bottom:10px}.table-search{min-width:220px;padding:10px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.03);color:var(--text)}
.geo-svg{width:100%;height:330px;background:rgba(255,255,255,.02);border:1px dashed var(--line);border-radius:10px}.geo-svg path{stroke:#dbe3f8;stroke-width:2}.geo-svg .g1{fill:#4cceac55}.geo-svg .g2{fill:#6870fa66}.geo-svg .g3{fill:#a594fd66}.geo-svg .g4{fill:#f26b8a66}
.week-grid,.day-grid{display:grid;gap:8px}.week-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.day-grid{grid-template-columns:1fr}.slot{height:70px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.02);padding:8px}


/* phase 5 pixel tuning */
.main-area{padding:18px 22px}
.page{max-width:1400px}
.card{box-shadow:0 2px 10px rgba(0,0,0,.18)}
.topbar{position:sticky;top:0;z-index:5;background:color-mix(in oklab,var(--bg) 92%, transparent);backdrop-filter: blur(8px)}
.menu-item{font-size:14px}
.page-header .title{font-size:32px;letter-spacing:.4px}
.page-header .subtitle{font-size:18px}
th{background:color-mix(in oklab,var(--accent) 38%, var(--panel));position:sticky;top:0}
td{font-size:14px}
.table-wrap{max-height:68vh;overflow:auto}
.icon-btn,.btn{transition:.16s ease}
.icon-btn:hover,.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.faq{padding:0;overflow:hidden}
.faq summary{padding:14px 16px;background:color-mix(in oklab,var(--panel) 80%, var(--accent));}
.faq p{padding:0 16px 16px;margin:0}
.geo-frame{padding:10px}
.geo-svg{height:400px}
.calendar-grid{min-height:520px}
.month-grid .day{height:86px}
.pie-wrap .pie{box-shadow:0 0 0 8px rgba(255,255,255,.03)}


/* phase 7 micro parity */
.sidebar{transition:width .18s ease,padding .18s ease}
.menu-item{transition:background .12s ease,border-color .12s ease,transform .12s ease}
.menu-item:hover{transform:translateX(2px)}
.top-icons button{width:36px;height:36px;display:grid;place-items:center}
.search input{height:38px}
.page-header{margin-bottom:22px}
.stats .card{min-height:135px}
.tx{align-items:center}
.tx .pill{min-width:72px;text-align:center}
.table-wrap table thead th{font-weight:700;letter-spacing:.2px}
.table-wrap table tbody tr:hover{background:rgba(255,255,255,.03)}
.table-wrap table tbody td:first-child{color:#9fb2da}
.badge{font-weight:700;text-transform:capitalize}
.calendar-layout .card:first-child{max-height:560px;overflow:auto}
.month-grid .day span{font-size:12px;color:#9fb2da}
.month-grid .day{position:relative}
.month-grid .day .tiny-dot{position:absolute;right:8px;bottom:4px;margin:0}
.geo-frame .legend{margin-top:8px}
.geo-frame .legend p{background:rgba(255,255,255,.03);padding:6px 10px;border-radius:999px}
@media (max-width:980px){
  .main-area{padding:12px}
  .page-header .title{font-size:28px}
  .stats{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .stats{grid-template-columns:1fr}
}


/* phase 8 chart/calendar fidelity */
.chart-shell{display:grid;gap:8px}
.chart-label{font-size:12px;color:var(--muted);margin:0}
.chart-wrap{align-items:flex-end}
.bar-col{display:grid;justify-items:center;gap:4px}
.bar-col .xlab{font-size:10px;color:var(--muted)}
.calendar-layout{margin-top:10px}


/* phase 9 final alignment */
.app-shell{grid-template-columns:270px 1fr}
.sidebar.collapsed{width:78px}
.sidebar .brand{font-size:28px;letter-spacing:.6px}
.profile-card h3{margin:8px 0 2px;font-size:24px}
.profile-card .accent{font-size:14px}
.menu-item{padding:9px 12px;border-radius:6px}
.section-title{margin:16px 10px 6px;font-size:12px}
.topbar{padding:10px 0 16px}
.search{border-radius:4px}
.search input{min-width:250px;padding:10px 14px}
.top-icons{gap:6px}
.top-icons button{border-radius:4px}
.page-header .title{font-size:34px;font-weight:800}
.page-header .subtitle{font-size:20px}
.stats{gap:20px}
.stats .card{padding:18px}
.two-col,.three-col{gap:20px}
.card{border-radius:4px}
.table-wrap table th,.table-wrap table td{padding:9px 10px}
.table-wrap table th{font-size:13px}
.table-wrap table td{font-size:13px}
.table-toolbar{padding-bottom:6px}
.table-search{border-radius:4px;font-size:13px}
.badge{border-radius:4px;padding:3px 8px;font-size:12px}
.calendar-layout{gap:18px}
.calendar-grid{border-radius:4px}
.event-item{border-radius:4px}
.month-grid .day{height:82px;border-radius:4px}
.week-grid .slot,.day-grid .slot{border-radius:4px}
.geo-svg,.line-svg,.chart-wrap{border-radius:4px}
.pie-wrap{grid-template-columns:320px 1fr}
.pie-wrap .pie{width:240px;height:240px}
@media (max-width:980px){
  .app-shell{grid-template-columns:1fr}
  .search input{min-width:160px}
}


/* phase 10 final qa tweaks */
.content{padding-top:4px}
.page{padding-top:2px}
.title{line-height:1.05}
.subtitle{margin-top:2px}
.card h3{margin:0 0 10px}
.table-wrap{scrollbar-width:thin}
.table-wrap::-webkit-scrollbar{height:8px;width:8px}
.table-wrap::-webkit-scrollbar-thumb{background:#4a5675;border-radius:8px}
.icon-btn:disabled{opacity:.45;cursor:not-allowed}
.month-grid .day:hover,.week-grid .slot:hover,.day-grid .slot:hover{outline:1px solid #5f73a8}
.pie-wrap .legend p{font-size:13px}
.geo-svg path{transition:fill .2s ease}
.geo-svg path:hover{fill:#7a8bff88}

.geo-svg.mini{height:190px;margin-top:6px}


/* team exact-like page */
.team-table-card{padding:0;overflow:hidden}
.team-head{background:#4a4db7;padding:10px 12px;border-bottom:1px solid #5f61cc}
.team-row{padding:8px 12px;border-bottom:1px solid #2f3d63;min-height:54px}
.team-th,.team-td{font-size:13px;color:#dbe3ff}
.team-th{opacity:.95}
.team-th.cb,.team-td.cb{width:40px}
.team-th:nth-child(2),.team-td:nth-child(2){width:60px}
.team-th:nth-child(3),.team-td:nth-child(3){width:210px}
.team-th:nth-child(4),.team-td:nth-child(4){width:70px}
.team-th:nth-child(5),.team-td:nth-child(5){width:200px}
.team-th:nth-child(6),.team-td:nth-child(6){width:250px}
.team-th:nth-child(7),.team-td:nth-child(7){flex:1}
.team-pill{display:inline-flex;align-items:center;gap:6px;background:#3da98f;color:#e9fffb;padding:6px 12px;border-radius:5px;font-size:12px;min-width:130px;justify-content:center}
.team-pill.manager{background:#32957f}
.team-pill.user{background:#2d8a74}
.team-footer{background:#4a4db7;padding:10px 14px;min-height:40px}

/* dashboard reference tuning */
.dashboard-page .page-header{margin-bottom:10px}
.dashboard-download{font-size:12px;letter-spacing:.4px;padding:10px 14px;border-radius:3px;background:#5b58d6}
.dashboard-stats .stat-card{min-height:110px}
.dashboard-mid .card,.dashboard-bottom .card{min-height:220px}
.revenue-card .line-svg{height:240px}
.tx-card{padding:0}.tx-card h3{padding:12px 14px;border-bottom:1px solid #34466e}.tx-card .tx{padding:12px 14px;margin:0;border-top:none;border-bottom:1px solid #324462}
.tx-card .pill{background:#4cceac;color:#102b25;border-radius:3px}
.campaign-donut{width:140px;height:140px;border-radius:50%;background:conic-gradient(#4cceac 0 72%, #6870fa 72% 100%);position:relative}
.campaign-donut:after{content:'';position:absolute;inset:18px;background:var(--panel);border-radius:50%}
.sales-card .chart-wrap{height:180px}
.geo-mini-card .geo-svg.mini{height:200px}

/* implementation batch: validation + chart axes */
input.invalid{border-color:#e66;box-shadow:0 0 0 1px #e6656555}
.field-error{margin:2px 0 0;color:#f2a6a6;font-size:12px}
.form-error{color:#f2a6a6;font-size:13px}
.chart-wrap.with-grid{position:relative;background-image:linear-gradient(to top, transparent 24%, #324462 25%, transparent 26%),linear-gradient(to top, transparent 49%, #324462 50%, transparent 51%),linear-gradient(to top, transparent 74%, #324462 75%, transparent 76%);background-size:100% 100%}

/* contacts exact-like */
.contact-table-card{padding:0;overflow:auto}
.contact-head{background:#4a4db7;padding:10px 12px;border-bottom:1px solid #5f61cc;min-width:1500px}
.contact-row{padding:8px 12px;border-bottom:1px solid #2f3d63;min-width:1500px;min-height:52px}
.contact-th,.contact-td{font-size:12px;color:#dbe3ff}
.contact-th:nth-child(1),.contact-td:nth-child(1){width:50px}
.contact-th:nth-child(2),.contact-td:nth-child(2){width:120px}
.contact-th:nth-child(3),.contact-td:nth-child(3){width:160px}
.contact-th:nth-child(4),.contact-td:nth-child(4){width:60px}
.contact-th:nth-child(5),.contact-td:nth-child(5){width:170px}
.contact-th:nth-child(6),.contact-td:nth-child(6){width:240px}
.contact-th:nth-child(7),.contact-td:nth-child(7){width:330px}
.contact-th:nth-child(8),.contact-td:nth-child(8){width:120px}
.contact-th:nth-child(9),.contact-td:nth-child(9){width:100px}
.contact-td.name{color:#4cceac}

/* invoices exact-like */
.invoice-table-card{padding:0;overflow:hidden}
.invoice-head{background:#4a4db7;padding:10px 12px;border-bottom:1px solid #5f61cc}
.invoice-row{padding:8px 12px;border-bottom:1px solid #2f3d63;min-height:52px}
.invoice-th,.invoice-td{font-size:13px;color:#dbe3ff}
.invoice-th.cb,.invoice-td.cb{width:40px}
.invoice-th:nth-child(2),.invoice-td:nth-child(2){width:60px}
.invoice-th:nth-child(3),.invoice-td:nth-child(3){width:220px}
.invoice-th:nth-child(4),.invoice-td:nth-child(4){width:220px}
.invoice-th:nth-child(5),.invoice-td:nth-child(5){width:260px}
.invoice-th:nth-child(6),.invoice-td:nth-child(6){width:120px}
.invoice-th:nth-child(7),.invoice-td:nth-child(7){flex:1}
.invoice-td.name,.invoice-td.cost{color:#4cceac}

/* phase 14 sidebar fidelity */
.logo-wrap{padding-bottom:6px}
.avatar-img{border-radius:50%;display:block;margin:0 auto 8px;object-fit:cover;border:2px solid #31466f}
.profile-card{padding-top:16px;padding-bottom:14px}
.sidebar .menu-item{font-size:13px;line-height:1.2}
.sidebar.collapsed .menu-item{display:grid;place-items:center;padding:10px 6px}

/* phase 15 topbar exact pass */
.topbar-exact{padding:6px 0 14px;min-height:48px}
.search-exact{height:40px;background:#1a2342;border:1px solid #2f3f66;border-radius:2px;min-width:265px}
.search-exact input{height:38px;min-width:225px;padding:8px 12px;font-size:12px;color:#d8e2ff}
.search-exact .search-btn{width:36px;height:38px;border-left:1px solid #2f3f66;background:#1a2342}
.top-icons-exact{gap:4px}
.top-btn{width:32px!important;height:32px!important;padding:0;border-radius:2px;border-color:#2f3f66;background:#1a2342;font-size:13px}
.top-btn:hover{background:#22305a}
@media (max-width:980px){
  .search-exact{min-width:180px}
  .search-exact input{min-width:140px}
}


/* phase 16 spacing + table fidelity */
.main-area{padding:10px 14px 18px}
.dashboard-page .dashboard-stats{margin-top:2px}
.dashboard-page .dashboard-mid{margin-top:14px}
.dashboard-page .dashboard-bottom{margin-top:14px}
.team-head,.invoice-head,.contact-head{font-weight:600;letter-spacing:.15px}
.team-row:nth-child(even),.invoice-row:nth-child(even),.contact-row:nth-child(even){background:#1e2a49}
.team-row:hover,.invoice-row:hover,.contact-row:hover{background:#24345a}
.team-table-card,.invoice-table-card,.contact-table-card{border:1px solid #2e3d63}
.stat-card .statbox h3{font-size:30px}
.revenue-value{font-size:34px}


/* phase 17 final dashboard/detail polish */
.dashboard-page .card{background:#1f2a47}
.dashboard-page .stat-card{border-color:#2e3f67}
.dashboard-page .tx-card .tx .green{font-weight:700}
.dashboard-page .tx-card .tx .muted{font-size:12px}
.dashboard-page .tx-card .pill{font-size:12px;padding:5px 10px}
.dashboard-page .campaign-card .muted{font-size:13px;text-align:center}
.dashboard-page .campaign-card .green{text-align:center;font-weight:700}
.dashboard-page .sales-card .chart-shell{margin-top:4px}
.dashboard-page .geo-mini-card .legend{justify-content:flex-start;gap:8px}
.dashboard-page .geo-mini-card .legend p{margin:2px 0;font-size:12px}
.dashboard-page .geo-mini-card .geo-svg path{stroke:#dfe6ff;stroke-width:1.6}
.sidebar{background:#1f2942}
.sidebar .menu-item.active{background:#3438a6;border-color:#4d54d5}
.sidebar .section-title{color:#7f8db5}
.topbar-exact{border-bottom:1px solid #223155}
.page-header .title{color:#f3f6ff}
.page-header .subtitle{color:#4cceac}