/* ===== NAVBAR ===== */
  .navbar{
    height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:0 12px;
    border-bottom:1px solid var(--border);
    position:fixed;
    top:0;
    left:0;
    right:0;
    background:var(--paper);
    z-index:50;
  }
  .nav-left{display:flex; align-items:center; gap:10px; flex-shrink:0;}
  .hamburger{
    width:40px; height:40px;
    display:flex; align-items:center; justify-content:center;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--surface);
    cursor:pointer;
    font-size:19px;
    color:var(--ink);
    transition:border-color .15s ease, background .15s ease;
  }
  .hamburger:hover{border-color:var(--border-strong); background:var(--surface-2);}
  .nav-brand-logo{
    width:24px; height:24px;
    flex-shrink:0;
  }
  .brand-logo-stroke{stroke:var(--ink);}
  [data-theme="dark"] .brand-logo-stroke{stroke:var(--muted);}
  .nav-brand-text{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:16px;
    letter-spacing:-.01em;
    background:linear-gradient(135deg, var(--ink) 0%, var(--muted) 40%, var(--ink) 50%, var(--muted) 100%);
    background-size:200% auto;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:navBrandShine 5s linear infinite;
    white-space:nowrap;
  }
  @keyframes navBrandShine{ to{ background-position:200% center; } }
  @media (prefers-reduced-motion: reduce){
    .nav-brand-text{animation:none;}
  }

  .nav-right{display:flex; align-items:center; gap:8px; flex:1; min-width:0; justify-content:flex-end;}

  .link-oval{
    height:42px;
    width:260px;
    max-width:260px;
    flex:1;
    min-width:0;
    border-radius:999px;
    border:1px solid var(--border-strong);
    background:var(--surface);
    display:flex; align-items:center;
    padding:0 4px 0 14px;
    transition:border-color .15s ease;
  }
  .link-oval:focus-within{border-color:var(--ink);}
  .link-oval input{
    flex:1;
    min-width:0;
    border:none;
    outline:none;
    background:transparent;
    font-family:var(--font-mono);
    font-size:12.5px;
    color:var(--ink);
  }
  .link-oval input::placeholder{color:var(--muted); font-family:var(--font-body);}
  .send-btn{
    width:34px; height:34px;
    border-radius:50%;
    border:none;
    background:linear-gradient(135deg, var(--chrome-a), var(--chrome-b) 45%, var(--chrome-c));
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    flex-shrink:0;
    transition:transform .12s ease, filter .15s ease;
  }
  .send-btn:hover{filter:brightness(1.05);}
  .send-btn:active{transform:scale(.92);}
  .send-btn svg{width:16px; height:16px;}

  .theme-toggle{
    width:40px; height:40px;
    border-radius:50%;
    border:1px solid var(--border);
    background:var(--surface);
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s ease, border-color .15s ease;
  }
  .theme-toggle:hover{border-color:var(--border-strong); background:var(--surface-2);}
  .theme-toggle svg{width:19px; height:19px;}
  .icon-sun{display:none;}
  .icon-moon{display:flex;}
  [data-theme="dark"] .icon-sun{display:flex;}
  [data-theme="dark"] .icon-moon{display:none;}

  /* ===== SIDEBAR ===== */
  .overlay{
    position:fixed; inset:0;
    background:rgba(0,0,0,.35);
    opacity:0; pointer-events:none;
    transition:opacity .25s ease;
    z-index:60;
  }
  .overlay.show{opacity:1; pointer-events:auto;}

  .sidebar{
    position:fixed;
    top:0; left:0;
    height:100vh;
    height:100dvh;
    width:272px;
    background:var(--surface);
    border-right:1px solid var(--border);
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    z-index:70;
    display:flex;
    flex-direction:column;
    backdrop-filter:blur(20px);
  }
  .sidebar.open{transform:translateX(0);}

  .sidebar-header{
    height:64px;
    display:flex;
    align-items:center;
    padding:0 20px;
    border-bottom:1px solid var(--border);
    flex-shrink:0;
  }
  .sidebar-header .brand{
    display:flex;
    align-items:center;
    gap:9px;
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:19px;
    letter-spacing:-.01em;
    background:linear-gradient(135deg, var(--ink) 0%, var(--muted) 40%, var(--ink) 50%, var(--muted) 100%);
    background-size:200% auto;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:navBrandShine 5s linear infinite;
    text-decoration:none;
    cursor:pointer;
  }
  @media (prefers-reduced-motion: reduce){
    .sidebar-header .brand{animation:none;}
  }
  .sidebar-header .brand-logo{
    width:27px; height:27px;
    flex-shrink:0;
  }

  .sidebar-menu{
    flex:1;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:12px 12px;
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .menu-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 12px;
    border-radius:10px;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    color:var(--ink);
    text-decoration:none;
    transition:background .15s ease;
    user-select:none;
  }
  .menu-item:hover{background:var(--surface-2);}
  .menu-item.active{background:var(--surface-2); border:1px solid var(--border);}
  .menu-item svg{color:var(--muted); flex-shrink:0;}
  .menu-item .badge{
    margin-left:auto;
    font-size:10.5px;
    font-weight:500;
    font-family:var(--font-mono);
    color:var(--muted);
    background:transparent;
    border:1px solid var(--border-strong);
    padding:3px 8px;
    border-radius:999px;
    flex-shrink:0;
  }
  .menu-item.active svg{color:var(--ink);}
  .menu-item .notif-badge{
    background:var(--ink);
    color:var(--paper);
    border-color:var(--ink);
    font-family:var(--font-mono);
    min-width:19px;
    height:19px;
    padding:0 6px;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
  }
  .menu-item .notif-badge.zero{display:none;}
  .menu-item .chev{
    margin-left:auto;
    color:var(--muted);
    transition:transform .2s ease;
  }
  .menu-item.expanded .chev{transform:rotate(180deg);}

  .submenu{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .25s ease;
  }
  .submenu.open{grid-template-rows:1fr;}
  .submenu > .submenu-inner-wrap{
    overflow:hidden;
    min-height:0;
  }
  .submenu-inner{
    display:flex;
    flex-direction:column;
    gap:2px;
    margin:4px 0 8px 0;
    padding:6px;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:12px;
  }
  .submenu-item{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    padding:9px 12px;
    font-size:13px;
    color:var(--muted);
    border-radius:8px;
    cursor:default;
  }
  .submenu-item .row{display:flex; align-items:center; gap:10px;}
  .submenu-item svg{flex-shrink:0;}
  .submenu-item .val{
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--muted);
    padding-left:25px;
    word-break:break-all;
  }

  .submenu-link{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:10px;
    font-size:13.5px;
    font-weight:500;
    color:var(--ink);
    text-decoration:none;
    cursor:pointer;
    transition:background .15s ease;
    white-space:nowrap;
  }
  .submenu-link:hover{background:var(--surface);}
  .submenu-link.active{background:var(--surface); border:1px solid var(--border-strong);}
  .submenu-link svg{color:var(--muted); flex-shrink:0;}
  .submenu-link.active svg{color:var(--ink);}
  .submenu-link.disabled{cursor:default; color:var(--muted);}
  .submenu-link.disabled:hover{background:transparent;}
  .submenu-link .badge{
    margin-left:auto;
    font-size:10px;
    font-weight:500;
    font-family:var(--font-mono);
    color:var(--muted);
    background:transparent;
    border:1px solid var(--border-strong);
    padding:2.5px 8px;
    border-radius:999px;
    flex-shrink:1;
    min-width:0;
    max-width:120px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .submenu-link .badge.connected{
    color:var(--ink);
    border-color:var(--ink);
    background:var(--surface-2);
    font-weight:600;
  }

  .menu-divider{
    height:1px;
    background:var(--border);
    margin:10px 4px;
    flex-shrink:0;
  }

  .sidebar-account{
    flex-shrink:0;
    padding:14px 16px;
    border-top:1px solid var(--border);
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
    text-decoration:none;
    color:inherit;
    transition:background .15s ease;
  }

  .sidebar-status-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 16px;
    font-size:12.5px;
    color:var(--muted);
  }
  .sidebar-status-dot{
    width:7px; height:7px;
    border-radius:50%;
    background:#2E9E5B;
    flex-shrink:0;
    display:inline-block;
    margin-right:7px;
  }
  [data-theme="dark"] .sidebar-status-dot{background:#4ADE80;}
  .sidebar-status-dot.status-operational{background:#2E9E5B;}
  .sidebar-status-dot.status-degraded{background:#B8842E;}
  .sidebar-status-dot.status-down{background:#C23B3B;}
  [data-theme="dark"] .sidebar-status-dot.status-operational{background:#4ADE80;}
  [data-theme="dark"] .sidebar-status-dot.status-degraded{background:#FBBF24;}
  [data-theme="dark"] .sidebar-status-dot.status-down{background:#F87171;}
  .sidebar-version{
    font-family:var(--font-mono);
    font-size:10.5px;
    color:var(--muted);
    opacity:.7;
  }
  .sidebar-promo{
    margin:2px 12px 8px;
    padding:12px 14px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
  }
  .sidebar-promo-title{
    font-size:12px;
    font-weight:600;
    color:var(--ink);
    margin-bottom:4px;
  }
  .sidebar-promo-body{
    font-size:11.5px;
    color:var(--muted);
    line-height:1.5;
  }
  .sidebar-account:hover{background:var(--surface-2);}
  .avatar{
    width:38px; height:38px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--chrome-a), var(--chrome-c));
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display);
    font-weight:700;
    font-size:14px;
    color:var(--ink);
    flex-shrink:0;
  }
  [data-theme="dark"] .avatar{color:#0A0A0B;}
  .account-info{min-width:0;}
  .account-name{font-size:13px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .account-email{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--font-mono);}

  /* ===== TOAST ===== */
  .toast{
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translateX(-50%) translateY(20px);
    background:var(--ink);
    color:var(--paper);
    font-family:var(--font-body);
    font-size:13px;
    font-weight:500;
    padding:12px 20px;
    border-radius:999px;
    display:flex;
    align-items:center;
    gap:8px;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    z-index:200;
    white-space:nowrap;
  }
  .toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }
  .toast svg{width:15px; height:15px; flex-shrink:0;}

  /* ===== MODAL (overlay + centered card, used by confirm/delete dialogs) ===== */
  .modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    z-index:120;
  }
  .modal-overlay.active{
    opacity:1;
    pointer-events:auto;
  }
  .modal-card{
    width:100%;
    max-width:380px;
    background:var(--paper);
    border:1px solid var(--border);
    border-radius:var(--radius, 14px);
    padding:20px;
    transform:translateY(8px) scale(.98);
    transition:transform .2s ease;
  }
  .modal-overlay.active .modal-card{
    transform:translateY(0) scale(1);
  }
  .modal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:6px;
  }
  .modal-title{
    font-size:15px;
    font-weight:700;
    color:var(--ink);
  }
  .modal-close{
    width:28px; height:28px;
    border-radius:8px;
    border:none;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    transition:background .15s ease;
  }
  .modal-close:hover{background:var(--surface-2);}
  .modal-actions{
    display:flex;
    gap:10px;
  }
  .modal-submit-btn{
    flex:1;
    padding:11px 14px;
    border:none;
    border-radius:10px;
    background:var(--ink);
    color:var(--paper);
    font-family:var(--font-body);
    font-size:13.5px;
    font-weight:600;
    cursor:pointer;
    transition:filter .15s ease;
  }
  .modal-submit-btn:hover{filter:brightness(1.1);}
  .otp-inline-actions{
    display:flex;
    gap:10px;
    margin-top:6px;
  }

  /* ===== DESKTOP: sidebar pinned open, no overlay/hamburger-mini needed ===== */
  @media (min-width:768px){
    body{padding-left:272px; transition:padding-left .28s cubic-bezier(.4,0,.2,1);}
    body.sidebar-closed{padding-left:0;}
    .navbar{left:272px; transition:left .28s cubic-bezier(.4,0,.2,1);}
    body.sidebar-closed .navbar{left:0;}
    .sidebar{transform:translateX(0);}
    .sidebar.closed{transform:translateX(-100%);}
    .overlay{display:none !important;}
  }