:root{
    --topbar-bg:#1d2a44;
    --topbar-bg-2:#22314f;
    --topbar-border:#314361;
    --blue-accent:#2f7cf6;
    --blue-accent-2:#60a5fa;
    --blue-soft:#dbeafe;
    --page-bg:#eef1f6;
    --text-main:#ffffff;
    --text-soft:rgba(255,255,255,.82);
  }
  body{background:var(--page-bg)!important;}
  header.app-topbar{
    background:var(--topbar-bg)!important;
    height:auto!important;
    min-height:78px;
    padding:10px 18px!important;
    display:grid!important;
    grid-template-columns:auto minmax(280px,1fr) auto;
    gap:18px;
    align-items:center;
    justify-content:space-between!important;
    border-bottom:1px solid var(--topbar-border);
    position:sticky;
    top:0;
    z-index:200;
  }
  .app-topbar-left,.app-topbar-center,.app-topbar-right{display:flex;align-items:center;gap:12px}
  .app-topbar-center{justify-content:center;min-width:0}
  .app-topbar-right{justify-content:flex-end;flex-wrap:wrap}
  .brand-logo-paper{gap:10px;color:#fff}
  .brand-logo-paper svg{width:34px;height:34px;color:var(--blue-accent-2)}
  .brand-logo-paper .brand-logo-text{font-size:23px;letter-spacing:-.5px}
  .brand-logo-paper .brand-logo-highlight{padding-bottom:2px}
  .brand-logo-paper .brand-logo-highlight::after{height:3px;background:var(--blue-accent-2);bottom:-2px}
  .topbar-search-wrap{
    display:flex;align-items:center;gap:10px;
    min-width:260px;width:min(480px,100%);
    background:#f8fafc;border:1px solid #d8e0ea;border-radius:10px;
    padding:0 14px;height:42px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
  }
  .topbar-search-icon{font-size:15px;opacity:.7}
  .topbar-search-input{
    border:none;outline:none;background:transparent;width:100%;height:100%;
    font-size:14px;font-weight:700;color:#334155;
  }
  .topbar-search-input::placeholder{color:#64748b;font-weight:700}
  .topbar-utility-btn,.topbar-icon-btn,.topbar-exit-btn,#authUserBadge{
    height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.12);
    background:#2a3854;color:#e5edf8;font-size:14px;font-weight:800;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:0 14px;cursor:pointer;transition:.18s ease;
    text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  }
  .topbar-utility-btn:hover,.topbar-icon-btn:hover,.topbar-exit-btn:hover,#authUserBadge:hover{
    background:#324463;transform:translateY(-1px)
  }
  .topbar-small-btn{padding:0 12px}
  .topbar-icon-btn{width:40px;padding:0;font-size:18px}
  .topbar-exit-btn{padding:0 12px}
  .topbar-clock-box{
    height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.12);
    background:#2a3854;color:#e5edf8;padding:0 12px;
    display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:900;
    min-width:76px;justify-content:center;
  }
  .topbar-clock-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18),0 0 10px rgba(34,197,94,.45)}
  #headerAuthMount{display:flex;align-items:center}
  #authUserBadge{
    position:static!important;top:auto!important;right:auto!important;z-index:auto!important;
    display:none;background:#2a3854!important;color:#fff!important;padding:0 12px 0 10px!important;
    backdrop-filter:none!important;border-color:rgba(255,255,255,.12)!important;box-shadow:none!important;
  }
  #authUserBadge .auth-badge-avatar{
    width:22px;height:22px;font-size:11px;background:rgba(47,124,246,.18)!important;color:var(--blue-accent-2)!important;border:1px solid rgba(96,165,250,.3)
  }
  .main-menu{
    display:flex;gap:8px;justify-content:flex-start;align-items:center;flex-wrap:wrap;
    background:#fff;padding:12px 16px;border-bottom:1px solid #dbe3ef;box-shadow:0 6px 18px rgba(15,23,42,.05);
    position:sticky;top:78px;z-index:180;overflow-x:auto
  }
  .main-menu-btn{
    border:1px solid #d9e2ef;background:#f8fafc;color:#334155;border-radius:10px;
    padding:10px 14px;font-size:13px;font-weight:900;white-space:nowrap;box-shadow:none!important
  }
  .main-menu-btn:hover,.main-menu-btn.active{background:linear-gradient(135deg,#2563eb,#3b82f6)!important;border-color:#2563eb!important;color:#fff!important;transform:translateY(-1px)}
  .menu-toggle-btn{top:86px!important}

  #authOverlay{
    background:#dfe3e8!important;
    display:flex;align-items:center;justify-content:center;
  }
  #authCard{
    width:min(480px,94vw)!important;max-width:94vw!important;padding:0!important;overflow:hidden;
    border-radius:22px!important;background:#f3f4f6!important;box-shadow:0 24px 60px rgba(15,23,42,.18)!important;text-align:left!important
  }
  #authCard .auth-card-top{
    background:#1d2a44;color:#fff;padding:34px 26px 28px;text-align:center;position:relative
  }
  #authCard .auth-card-top::after{content:'';position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,#1d4ed8,#60a5fa)}
  #authCard .auth-paper-mark{display:flex;align-items:center;justify-content:center;color:#3b82f6;margin-bottom:14px}
  #authCard .auth-paper-mark svg{width:54px;height:54px}
  #authCard .auth-logo{font-size:30px!important;font-weight:950!important;color:#fff!important;letter-spacing:-1px;margin-bottom:6px!important;text-align:center}
  #authCard .auth-logo span{color:#f8fafc!important;font-weight:500}
  #authCard .auth-brand-subtitle{font-size:15px;color:#bfd6ff;text-align:center;font-weight:600}
  #authCard .auth-card-bottom{padding:34px 32px 30px;background:#f3f4f6}
  #authCard label{display:block;text-align:left;font-size:14px!important;font-weight:800!important;color:#475569!important;text-transform:none!important;letter-spacing:0!important;margin-bottom:8px!important}
  .auth-input-wrap{display:flex;align-items:center;gap:10px;height:56px;background:#fff;border:1px solid #cfd5df;border-radius:10px;padding:0 14px;margin-bottom:18px}
  .auth-input-icon{font-size:18px;opacity:.55;min-width:22px;text-align:center}
  #authCard input{padding:0!important;border:none!important;background:transparent!important;box-shadow:none!important;margin:0!important;height:100%!important;font-size:16px!important;color:#334155!important}
  #authCard input::placeholder{color:#9ca3af;font-weight:700}
  #authBtn{height:52px;background:linear-gradient(90deg,#2563eb,#3b82f6)!important;border-radius:10px!important;font-size:16px!important;font-weight:900!important;margin-top:4px!important}
  #authBtn:hover{opacity:1!important;filter:brightness(1.04)}
  #authError{margin-top:16px!important}
  #authUserMenu{top:62px!important;right:18px!important}
  @media (max-width:1180px){
    header.app-topbar{grid-template-columns:1fr;justify-items:stretch}
    .app-topbar-center{justify-content:flex-start;flex-wrap:wrap}
    .app-topbar-right{justify-content:flex-start}
    .main-menu{top:146px}
    .menu-toggle-btn{top:154px!important}
  }
  @media (max-width:720px){
    header.app-topbar{padding:12px!important;gap:12px}
    .topbar-search-wrap{width:100%;min-width:0}
    .app-topbar-center{flex-direction:column;align-items:stretch}
    .app-topbar-right{gap:8px}
    .topbar-utility-btn,.topbar-exit-btn,#authUserBadge,.topbar-clock-box{height:38px;font-size:13px}
    .topbar-icon-btn{height:38px;width:38px}
    .main-menu{top:180px;padding:10px}
    .menu-toggle-btn{top:188px!important}
    #authCard .auth-card-bottom{padding:26px 22px 24px}
  }