.sidebar{
    width: 268px;
    flex-shrink: 0;
    background: var(--ink);
    color:#D7E0DC;
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
    border-right: 1px solid var(--line-ink);
}

.brand{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px 0;
    margin-bottom: 24px;
}
.brand-mark{
    width: 48px;
    height: 48px;
    border-radius: 8px;
}
.brand-mark img{
    width: 48px;
    height: 48px;
    display: block
}

.brand-name{
    font-family:var(--display);
    font-weight:800;font-size:19px;letter-spacing:-.02em;color:#fff;
    line-height:1;
}
  .brand-sub{font-size:11px;color:#7F8C86;margin-top:3px;letter-spacing:.02em}

  .status-card{
    background:var(--ink-2);
    border:1px solid var(--line-ink);
    border-radius:var(--radius);
    padding:13px 14px;
    margin-bottom:24px;
  }
  .status-row{display:flex;align-items:center;gap:9px}
  .pulse{
    width:9px;height:9px;border-radius:50%;background:var(--signal);
    position:relative;flex-shrink:0;
  }
  .pulse::after{
    content:"";position:absolute;inset:-5px;border-radius:50%;
    border:1.5px solid var(--signal);opacity:.55;
    animation:ring 2s ease-out infinite;
  }
  @keyframes ring{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.6);opacity:0}}
  .status-label{font-size:13px;font-weight:600;color:#EAF1EE}
  .status-meta{
    font-family:var(--mono);font-size:11px;color:#7F8C86;
    margin-top:9px;display:flex;justify-content:space-between;
  }

  .nav-eyebrow{
    font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
    color:#6C7872;font-weight:600;
    padding:0 10px;margin-bottom:9px;
  }
  nav{display:flex;flex-direction:column;gap:3px}
  .nav-item{
    display:flex;align-items:center;gap:13px;
    padding:11px 12px;border-radius:11px;
    color:#AEBAB4;font-size:14.5px;font-weight:500;
    text-align:left;width:100%;
    transition:background .16s,color .16s;
    position:relative;
  }
  .nav-item svg{width:19px;height:19px;flex-shrink:0;stroke-width:1.8}
  .nav-item:hover{background:var(--ink-2);color:#E6EDEA}
  .nav-item.active{background:var(--card);color:var(--ink)}
  .nav-item.active .nav-badge{background:var(--signal);color:#fff}
  .nav-badge{
    margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:700;
    background:var(--ink-3);color:#C7D2CD;
    padding:1px 8px;border-radius:20px;min-width:24px;text-align:center;
  }

  .sidebar-foot{margin-top:auto;padding-top:18px}
  .user{
    display:flex;align-items:center;gap:11px;
    padding:9px 8px;border-top:1px solid var(--line-ink);
  }
  .avatar{
    width:34px;height:34px;border-radius:50%;flex-shrink:0;
    background:var(--ink-3);color:#fff;
    display:grid;place-items:center;font-weight:600;font-size:13px;
    font-family:var(--display);
  }
  .user-name{font-size:13.5px;font-weight:600;color:#EAF1EE;line-height:1.2}
  .user-mail{font-size:11.5px;color:#7F8C86}

  /* ---------- MAIN ---------- */
  .main{flex:1;display:flex;flex-direction:column;min-width:0}
  .topbar{
    height:70px;flex-shrink:0;
    display:flex;align-items:center;justify-content:space-between;
    padding:0 30px;border-bottom:1px solid var(--line);
    background:rgba(234,237,233,.8);backdrop-filter:blur(8px);
  }
  .topbar h1{
    font-family:var(--display);font-weight:700;font-size:21px;
    letter-spacing:-.02em;
  }
  .topbar p{font-size:12.5px;color:var(--muted);margin-top:2px}
  .top-actions{display:flex;align-items:center;gap:10px}
  .clock{
    font-family:var(--mono);font-size:13px;color:var(--muted);
    background:var(--card);border:1px solid var(--line);
    padding:7px 12px;border-radius:9px;
  }
  .icon-btn{
    width:38px;height:38px;border-radius:9px;
    border:1px solid var(--line);background:var(--card);
    display:grid;place-items:center;color:var(--text);
    transition:background .14s;
  }
  .icon-btn:hover{background:#F4F6F3}
  .icon-btn svg{width:18px;height:18px;stroke-width:1.8}

  .content{flex:1;overflow-y:auto;padding:28px 30px 40px}
  .panel{display:none;animation:fade .3s ease}
  .panel.active{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

  .section-label{
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);font-weight:600;margin-bottom:14px;
    display:flex;align-items:center;gap:10px;
  }
  .section-label::after{content:"";flex:1;height:1px;background:var(--line)}