/* Reset + layout shell */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); font-size:var(--fs-body); line-height:1.5;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--water-blue);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
svg{display:block}
::selection{background:var(--deep-aqua-100)}

/* ---------------------------------------------------------------- topbar */
.topbar{
  position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:60;
  display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-5);
  background:linear-gradient(100deg,#0E2A47 0%,#153B60 55%,#0F4A56 100%);
  color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.06), 0 4px 18px rgba(14,42,71,.18);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{width:32px;height:32px;flex:0 0 32px}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{font-weight:700;letter-spacing:.16em;font-size:14px}
.brand-sub{font-size:10px;letter-spacing:.10em;color:#9FC6D6;text-transform:uppercase}
.brand-note{font-size:9.5px;color:#7FA8BC;letter-spacing:.02em}

.topbar-filters{display:flex;align-items:center;gap:var(--sp-2);margin-left:var(--sp-4)}
.tb-select{
  appearance:none;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  color:#EAF4F8;border-radius:var(--r-sm);padding:6px 26px 6px 10px;font-size:var(--fs-xs);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0h10L5 6z' fill='%239FC6D6'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center;cursor:pointer;
}
.tb-select:hover{background-color:rgba(255,255,255,.15)}
.topbar-spacer{flex:1}
.tb-search{
  display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-sm);padding:6px 10px;width:250px;
}
.tb-search input{
  background:none;border:0;outline:none;color:#fff;font-size:var(--fs-xs);width:100%;font-family:var(--font);
}
.tb-search input::placeholder{color:#8FB4C8}
.tb-icon{
  position:relative;width:32px;height:32px;border-radius:var(--r-sm);
  display:grid;place-items:center;color:#CFE4EC;
}
.tb-icon:hover{background:rgba(255,255,255,.12)}
.tb-badge{
  position:absolute;top:3px;right:3px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;
  background:var(--risk-red);color:#fff;font-size:9.5px;font-weight:700;display:grid;place-items:center;
  border:2px solid #14395C;
}
.tb-user{display:flex;align-items:center;gap:8px;padding-left:var(--sp-3);border-left:1px solid rgba(255,255,255,.14)}
.tb-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#00A0A8,#1264A3);
  display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff}
.tb-user-meta{line-height:1.2}
.tb-user-name{font-size:var(--fs-xs);font-weight:600}
.tb-user-role{font-size:10px;color:#9FC6D6}

/* --------------------------------------------------------------- sidebar */
.shell{display:flex;padding-top:var(--topbar-h);min-height:100vh}
.sidebar{
  position:fixed;top:var(--topbar-h);bottom:0;left:0;width:var(--sidebar-w);z-index:50;
  background:var(--surface);border-right:1px solid var(--line);overflow-y:auto;padding:var(--sp-4) 0 var(--sp-6);
}
.nav-group{margin-bottom:var(--sp-4)}
.nav-title{
  font-size:10px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--ink-3);
  padding:0 var(--sp-5) var(--sp-2);
}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:8px var(--sp-5);font-size:var(--fs-sm);
  color:var(--ink-2);border-left:3px solid transparent;cursor:pointer;
}
.nav-item:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.nav-item.active{background:var(--deep-aqua-100);color:var(--navy);border-left-color:var(--deep-aqua);font-weight:600}
.nav-item .dot{width:7px;height:7px;border-radius:50%;background:var(--st,var(--gray));flex:0 0 7px}
.nav-item .count{margin-left:auto;font-size:10.5px;color:var(--ink-3);background:var(--gray-bg);
  border-radius:20px;padding:1px 7px;font-weight:600}
.nav-item.planned{color:var(--gray)}
.nav-item.planned .count{background:transparent;border:1px dashed var(--line-strong)}

/* ---------------------------------------------------------------- main */
.main{margin-left:var(--sidebar-w);flex:1;min-width:0;padding:var(--sp-5) var(--sp-6) var(--sp-7)}
.page-head{margin-bottom:var(--sp-5)}
.crumbs{font-size:var(--fs-xs);color:var(--ink-3);margin-bottom:6px}
.crumbs a{color:var(--ink-3)}
.page-title{font-size:var(--fs-h1);font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:12px}
.page-sub{color:var(--ink-2);font-size:var(--fs-sm);margin-top:6px;max-width:900px}

.demo-banner{
  display:flex;align-items:center;gap:10px;background:var(--amber-100);border:1px solid #EBD4A8;
  color:#7A5510;border-radius:var(--r);padding:9px 14px;font-size:var(--fs-xs);margin-bottom:var(--sp-4);
}
.demo-banner b{font-weight:700}

.grid{display:grid;gap:var(--sp-4)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g-1-2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.stack{display:flex;flex-direction:column;gap:var(--sp-4)}
.row{display:flex;align-items:center;gap:var(--sp-3)}
.wrap{flex-wrap:wrap}
.mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)} .mb-3{margin-bottom:var(--sp-3)}

/* --------------------------------------------------------- responsiv (TZ 12.2) */
@media (max-width:1180px){
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-2-1,.g-1-2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1024px){
  :root{--sidebar-w:0px}
  .sidebar{transform:translateX(-100%);transition:transform .2s ease;width:246px}
  body.nav-open .sidebar{transform:translateX(0);box-shadow:var(--shadow-3)}
  .main{margin-left:0;padding:var(--sp-4)}
  .nav-toggle{display:grid !important}
  .topbar-filters{display:none}
  .tb-search{width:170px}
}
@media (max-width:720px){
  .g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}
  .tb-search{display:none}
  .brand-sub,.brand-note{display:none}
  .main{padding:var(--sp-3)}
}
.nav-toggle{display:none;width:32px;height:32px;border-radius:var(--r-sm);place-items:center;color:#CFE4EC}