:root{
  --paper:#F5F5F4;
  --surface:#FFFFFF;
  --muted:#F3F4F6;
  --hairline:#E5E7EB;
  --border:#E5E7EB;
  --ink:#111827;
  --ink-2:#374151;
  --ink-3:#6B7280;
  --accent:#111827;
  --accent-2:#000000;
  --accent-50:#F3F4F6;
  --danger:#B91C1C;
  --warn:#B45309;
  --info:#1E3A8A;
  --success:#065F46;
  --shadow-xs:0 1px 1px rgba(10,10,10,.04);
  --shadow-sm:0 1px 2px rgba(10,10,10,.05),0 0 0 .5px rgba(10,10,10,.05);
  --shadow-md:0 2px 6px rgba(10,10,10,.05),0 0 0 .5px rgba(10,10,10,.06);
  --shadow-lg:0 8px 24px rgba(10,10,10,.08);
  --ring:0 0 0 3px rgba(17,24,39,.15);
  --r-sm:6px;
  --r-md:8px;
  --r-lg:12px;
  --r-xl:16px;
}

html,body{height:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

.app-shell{min-height:100vh;display:flex;background:var(--paper)}
.sidebar{width:280px;max-width:80vw;background:var(--surface);border-right:1px solid var(--hairline);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar.is-collapsed{width:84px}
.sidebar-head{padding:16px 16px;border-bottom:1px solid var(--hairline);display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{font-family:Fraunces,serif;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{height:36px;width:36px;border-radius:12px;border:1px solid var(--hairline);background:var(--surface);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.icon-btn:hover{background:var(--muted)}

.nav{padding:10px 8px;overflow:auto}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;color:var(--ink);transition:background .15s ease,transform .05s ease}
.nav a:hover{background:var(--muted)}
.nav a:active{transform:translateY(1px)}
.nav a.active{background:var(--muted);border:1px solid var(--hairline)}
.nav .i{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2)}
.nav .t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav .chev{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-3)}
.nav-btn{width:100%;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;color:var(--ink);transition:background .15s ease,transform .05s ease;border:0;background:transparent;cursor:pointer}
.nav-btn:hover{background:var(--muted)}
.nav-btn:active{transform:translateY(1px)}
.nav-btn.active{background:var(--muted);border:1px solid var(--hairline)}
.nav-group{display:block}
.nav-sub{display:none;padding-left:10px;padding-right:6px;margin-top:6px}
.nav-group.open .nav-sub{display:block}
.nav-sub a{padding:9px 12px;border-radius:12px;color:var(--ink-2);font-weight:600}
.nav-sub a:hover{background:var(--muted)}
.nav-sub a.active{background:var(--muted);border:1px solid var(--hairline);color:var(--ink)}
.sidebar.is-collapsed .nav .t{display:none}
.sidebar.is-collapsed .brand-mark{display:none}

.sidebar-foot{margin-top:auto;border-top:1px solid var(--hairline);padding:12px 12px}
.me{display:flex;align-items:center;gap:10px}
.avatar{height:38px;width:38px;border-radius:14px;border:1px solid var(--hairline);background:var(--muted);display:flex;align-items:center;justify-content:center;font-weight:600}
.me-info{min-width:0;flex:1}
.me-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-role{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar.is-collapsed .me-info{display:none}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:72px;background:var(--surface);border-bottom:1px solid var(--hairline);display:flex;align-items:center;justify-content:space-between;padding:0 18px;position:sticky;top:0;z-index:10}
.topbar-left{display:flex;align-items:center;gap:12px}
.topbar-right{display:flex;align-items:center;gap:12px}
.content{flex:1;overflow:auto;padding:18px}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.page-title{font-size:22px;line-height:1.3;letter-spacing:-.01em;font-weight:600;margin:0}
.page-sub{color:var(--ink-3);font-size:13px;margin-top:6px}
.actions{display:flex;gap:10px;align-items:center}

.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);padding:16px}
.card-title{font-weight:600;color:var(--ink);margin:0 0 10px 0}
.grid{display:grid;gap:12px}

.btn{height:40px;border-radius:var(--r-md);border:1px solid var(--hairline);background:var(--surface);color:var(--ink);padding:0 14px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.btn:hover{background:var(--muted)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-2)}
.btn-sm{height:34px;padding:0 12px;border-radius:10px;font-size:13px}
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost:hover{background:var(--muted)}

.input,.select,.textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:10px 12px;
  background:var(--surface);
  color:var(--ink);
  outline:none;
}
.input:focus,.select:focus,.textarea:focus{box-shadow:var(--ring);border-color:rgba(17,24,39,.35)}
.label{display:block;font-size:12px;color:var(--ink-2);font-weight:600;margin-bottom:6px}
.hint{font-size:12px;color:var(--ink-3);margin-top:6px}
.err{font-size:12px;color:var(--danger);margin-top:6px}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1024px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kpis{grid-template-columns:1fr}}
.kpi{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);padding:16px}
.kpi-label{font-size:12px;color:var(--ink-3);font-weight:600}
.kpi-val{margin-top:8px;font-size:22px;line-height:1.3;font-weight:600}
.kpi-sub{margin-top:6px;font-size:12px;color:var(--ink-3)}

table.data{width:100%;border-collapse:separate;border-spacing:0}
table.data thead th{background:var(--muted);color:var(--ink-3);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;text-align:left;padding:10px 12px;border-bottom:1px solid var(--hairline)}
table.data tbody td{padding:10px 12px;border-bottom:1px solid var(--hairline);color:var(--ink-2);font-size:13px}
table.data tbody tr:hover{background:var(--accent-50)}
td.right,th.right{text-align:right}

.table-container{overflow:auto;-webkit-overflow-scrolling:touch}

.toast-wrap{position:fixed;right:14px;bottom:14px;display:flex;flex-direction:column;gap:10px;z-index:60}
.toast{min-width:260px;max-width:420px;background:var(--surface);border:1px solid var(--hairline);border-radius:14px;box-shadow:var(--shadow-md);padding:12px 12px;display:flex;gap:10px;align-items:flex-start}
.toast .m{font-size:13px;color:var(--ink-2);font-weight:600}
.toast.danger{border-color:rgba(185,28,28,.25)}
.toast.success{border-color:rgba(6,95,70,.25)}
.toast.warn{border-color:rgba(180,83,9,.25)}

.atlas-overlay{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.sidebar-backdrop{position:fixed;inset:0;background:rgba(17,24,39,.45);backdrop-filter:blur(6px);z-index:75}

.modal-backdrop{position:fixed;inset:0;background:rgba(17,24,39,.45);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:70;padding:18px}
.modal{width:100%;max-width:720px;background:var(--surface);border:1px solid var(--hairline);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;max-height:calc(100vh - 36px);display:flex;flex-direction:column}
.modal-h{padding:14px 16px;border-bottom:1px solid var(--hairline);display:flex;align-items:center;justify-content:space-between;gap:10px}
.modal-t{font-weight:600}
.modal-b{padding:16px;overflow:auto;flex:1;min-height:0}
.modal-f{padding:14px 16px;border-top:1px solid var(--hairline);display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}

.skeleton{background:linear-gradient(90deg,rgba(17,24,39,.06),rgba(17,24,39,.03),rgba(17,24,39,.06));background-size:200% 100%;animation:sh 1.2s ease-in-out infinite;border-radius:10px;height:14px}
.skeleton.lg{height:22px}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}

.grid-2-1{grid-template-columns:2fr 1fr}

@media (max-width:900px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;height:auto;width:min(320px,86vw);max-width:86vw;transform:translateX(-105%);transition:transform .18s ease,box-shadow .18s ease;z-index:80;box-shadow:var(--shadow-lg)}
  .sidebar.is-open{transform:translateX(0)}
  .sidebar.is-collapsed{width:min(320px,86vw)}
  .sidebar.is-collapsed .nav .t{display:inline}
  .sidebar.is-collapsed .brand-mark{display:block}
  .sidebar.is-collapsed .me-info{display:block}
  .topbar{z-index:20}
}

@media (max-width:720px){
  .page-head{flex-wrap:wrap;align-items:flex-start}
  .actions{flex-wrap:wrap;width:100%;justify-content:flex-start}
}

@media (max-width:560px){
  .content{padding:12px}
  table.data{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.data th,table.data td{white-space:nowrap}
  .modal-backdrop{padding:12px}
  .modal-f .btn{flex:1}
  .grid-2-1{grid-template-columns:1fr}
}