/* Nav */
    nav {
      display:flex;
      align-items:center;
      gap:10px;
      padding:0 16px;
      padding-left:max(16px, env(safe-area-inset-left));
      padding-right:max(16px, env(safe-area-inset-right));
      height:60px;
      flex-shrink:0;
      background:rgba(7,11,18,.74);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(35,49,73,.7);
      box-shadow:0 10px 40px rgba(0,0,0,.24);
      z-index:200;
    }
    .logo {
      font-size:1rem;
      font-weight:800;
      letter-spacing:.02em;
      background:linear-gradient(135deg,var(--accent),var(--accent2));
      -webkit-background-clip:text;
      background-clip:text;
      -webkit-text-fill-color:transparent;
      white-space:nowrap;
      margin-right:8px;
    }
    .nav-links { display:flex; gap:6px; flex:1; }
    .release-version-btn {
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      justify-content:center;
      gap:1px;
      flex:0 0 auto;
      min-height:36px;
      padding:5px 10px;
      border:1px solid rgba(52,211,153,.28);
      border-radius:12px;
      background:rgba(52,211,153,.06);
      color:#a7f3d0;
      cursor:pointer;
      font-family:var(--font);
      transition:all .16s ease;
    }
    .release-version-btn:hover {
      border-color:rgba(52,211,153,.55);
      background:rgba(52,211,153,.12);
      transform:translateY(-1px);
    }
    .release-version-btn span {
      font-size:.7rem;
      font-weight:800;
      line-height:1.1;
      white-space:nowrap;
    }
    .release-version-btn small {
      color:var(--text2);
      font-size:.58rem;
      line-height:1.1;
      white-space:nowrap;
    }
    .nav-btn {
      background:transparent;
      border:1px solid transparent;
      color:var(--text2);
      padding:7px 12px;
      border-radius:999px;
      cursor:pointer;
      font-size:0.84rem;
      transition:all .18s ease;
    }
    .nav-btn:hover {
      background:rgba(255,255,255,.03);
      color:var(--text);
      border-color:rgba(255,255,255,.04);
    }
    .nav-btn.active {
      background:rgba(34,211,238,.12);
      border-color:rgba(34,211,238,.2);
      color:var(--accent);
    }
    .logout-btn {
      margin-left:auto;
      background:rgba(255,255,255,.03);
      border:1px solid var(--border);
      color:var(--text2);
      padding:7px 12px;
      border-radius:999px;
      cursor:pointer;
      font-size:0.8rem;
      transition:all .18s ease;
    }
    .logout-btn:hover { border-color:var(--danger); color:#ffd4dc; background:rgba(251,113,133,.08); }

    /* User menu (avatar dropdown) */
    .user-menu { position:relative; flex-shrink:0; }
    .user-avatar-btn {
      display:flex; align-items:center; gap:8px;
      background:rgba(255,255,255,.04);
      border:1px solid var(--border);
      color:var(--text);
      padding:5px 10px 5px 5px;
      border-radius:999px;
      cursor:pointer;
      font-size:.82rem;
      transition:all .18s ease;
    }
    .user-avatar-btn:hover { border-color:rgba(34,211,238,.45); background:rgba(34,211,238,.06); }
    .user-avatar {
      width:30px; height:30px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      background:linear-gradient(135deg,var(--accent),#0ea5b7);
      color:#041018;
      font-weight:800;
      font-size:.86rem;
      text-transform:uppercase;
    }
    .user-avatar-name { font-weight:600; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .user-avatar-caret { color:var(--text2); font-size:.7rem; }
    .user-menu-panel {
      display:none;
      position:absolute; right:0; top:calc(100% + 8px);
      min-width:220px;
      background:rgba(13,19,32,.96);
      border:1px solid var(--border);
      border-radius:14px;
      box-shadow:0 18px 50px rgba(0,0,0,.5);
      padding:6px;
      z-index:60;
      backdrop-filter:blur(14px);
    }
    .user-menu.open .user-menu-panel { display:flex; flex-direction:column; gap:2px; }
    .user-menu-head {
      padding:10px 12px 12px;
      border-bottom:1px solid var(--border);
      margin-bottom:6px;
    }
    .user-menu-name { font-size:.88rem; font-weight:700; word-break:break-word; }
    .user-menu-email { font-size:.72rem; color:var(--text2); word-break:break-word; margin-top:2px; }
    .user-menu-item {
      background:none; border:none; color:var(--text); text-align:left;
      padding:9px 12px; border-radius:8px; cursor:pointer; font-size:.85rem;
      transition:background .14s ease, color .14s ease;
    }
    .user-menu-item:hover { background:rgba(34,211,238,.08); color:var(--accent); }
    .user-menu-item.danger:hover { background:rgba(251,113,133,.08); color:#ffd4dc; }

    /* Pages */
    .page { display:none; flex:1; flex-direction:column; overflow:hidden; }
    .page.show { display:flex; }

    /* Login */
    #login-page { justify-content:center; align-items:center; height:100vh; overflow:auto; padding:24px; }
    .login-card {
      background:linear-gradient(180deg, rgba(17,26,43,.94), rgba(12,18,30,.98));
      border:1px solid rgba(49,67,95,.72);
      border-radius:24px;
      padding:44px 38px;
      width:100%;
      max-width:410px;
      display:flex;
      flex-direction:column;
      gap:22px;
      box-shadow:0 24px 90px rgba(0,0,0,.42);
      backdrop-filter:blur(18px);
    }
    .login-card h1 {
      text-align:center;
      font-size:1.85rem;
      background:linear-gradient(135deg,var(--accent),var(--accent2));
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
    }
    .login-card p { text-align:center; color:var(--text2); font-size:0.9rem; line-height:1.5; }
    .login-version-btn {
      align-self:center;
      border:none;
      background:none;
      color:var(--text2);
      font-size:.72rem;
      cursor:pointer;
      padding:2px 8px;
    }
    .login-version-btn:hover { color:var(--accent3); }
    .field { display:flex; flex-direction:column; gap:7px; }
    .field label { font-size:0.8rem; color:var(--text2); }
    .field input,
    .field select {
      background:var(--surface2);
      border:1px solid var(--border);
      border-radius:12px;
      color:var(--text);
      padding:11px 14px;
      font-size:0.95rem;
      outline:none;
      transition:border-color .18s, box-shadow .18s, transform .18s;
    }
    .field input:focus,
    .field select:focus {
      border-color:rgba(34,211,238,.55);
      box-shadow:0 0 0 4px rgba(34,211,238,.12);
    }
    .btn-primary {
      background:linear-gradient(135deg,var(--accent),#0ea5b7);
      color:#041018;
      border:none;
      border-radius:12px;
      padding:12px;
      font-size:0.95rem;
      font-weight:700;
      cursor:pointer;
      transition:opacity .15s,transform .12s, box-shadow .18s;
      box-shadow:0 10px 26px rgba(34,211,238,.18);
    }
    .btn-primary:hover { opacity:.96; transform:translateY(-1px); }
    .btn-primary:disabled { opacity:.45; cursor:not-allowed; transform:none; }
    .err { background:rgba(251,113,133,.10); border:1px solid rgba(251,113,133,.3); border-radius:12px; color:#ffb8c5; padding:9px 13px; font-size:0.82rem; display:none; }
    .captcha-box {
      display:flex;
      flex-direction:column;
      gap:10px;
      padding:14px;
      border-radius:14px;
      border:1px solid rgba(35,49,73,.85);
      background:rgba(7,11,18,.45);
    }
    .captcha-top {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .captcha-prompt {
      font-size:1rem;
      font-weight:800;
      letter-spacing:.08em;
      color:var(--accent);
    }
    .captcha-refresh {
      background:rgba(255,255,255,.03);
      border:1px solid var(--border);
      color:var(--text2);
      border-radius:999px;
      padding:6px 12px;
      font-size:0.76rem;
      cursor:pointer;
      transition:all .16s ease;
    }
    .captcha-refresh:hover { border-color:rgba(34,211,238,.28); color:var(--text); background:rgba(34,211,238,.06); }
    .captcha-help { font-size:0.76rem; color:var(--text2); line-height:1.45; }