:root {
      --bg-primary: #0a0f1f;
      --bg-card: #121a35;
      --bg-elevated: #1b2547;
      --border: #26305a;
      --text-primary: #f5f6fa;
      --text-secondary: #d7dcec;
      --text-muted: #9aa4c4;
      --text-dim: #6b7596;
      --accent: #5c7cfa;
      --accent-hover: #3b5bdb;
      --gold: #e3c07d;
      --gold-soft: #f2dca6;
      --success: #34d399;
      --warning: #fbbf24;
      --danger: #f87171;
      --info: #818cf8;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      min-height: 100vh;
      background: var(--bg-primary);
      color: var(--text-secondary);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
      letter-spacing: 0;
    }
    button, input, select { font-family: inherit; }
    button { cursor: pointer; }
    a { text-decoration: none; color: inherit; }
    .hidden { display: none !important; }
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: #14142a; }
    ::-webkit-scrollbar-thumb { background: #38386a; border-radius: 3px; }

    .auth-shell {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 32px 16px;
      background:
        radial-gradient(circle at 20% 20%, rgba(102, 126, 234, 0.12), transparent 36%),
        radial-gradient(circle at 80% 70%, rgba(52, 211, 153, 0.08), transparent 34%),
        var(--bg-primary);
    }
    .auth-card {
      width: 100%;
      max-width: 440px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 30px;
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    }
    .brand-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: #ffffff;
      font-weight: 800;
      margin-bottom: 16px;
    }
    .auth-card h1 { color: var(--text-primary); font-size: 1.5rem; letter-spacing: 0; }
    .auth-card p { color: var(--text-muted); font-size: 0.85rem; line-height: 1.7; margin-top: 6px; }
    label { display: block; margin-bottom: 14px; }
    label span { display: block; color: var(--text-muted); font-size: 0.78rem; margin-bottom: 6px; }
    input {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: #17172f;
      color: var(--text-primary);
      font-size: 0.95rem;
      outline: none;
    }
    input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.16); }
    input.input-invalid { border-color: var(--danger); }
    .field-error { display: block; min-height: 18px; margin-top: 4px; color: var(--danger); font-size: 0.72rem; }
    .primary {
      width: 100%;
      background: var(--accent);
      color: #ffffff;
      border: 0;
      border-radius: 8px;
      padding: 12px 18px;
      font-size: 0.95rem;
      font-weight: 600;
      margin-top: 8px;
    }
    .primary:hover { background: var(--accent-hover); }
    .ghost {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-muted);
      border-radius: 8px;
      padding: 9px 14px;
      font-size: 0.8rem;
    }
    .ghost:hover { border-color: var(--accent); color: var(--accent); }
    .full { width: 100%; margin-top: 8px; }
    .remember-line {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: -4px 0 12px;
    }
    .remember-line input { width: auto; margin: 0; }
    .remember-line span { margin: 0; color: var(--text-dim); font-size: 0.8rem; }
    .sms-hint {
      color: var(--accent);
      text-align: center;
      font-size: 0.88rem;
      margin: 0 0 12px;
    }
    .auth-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin: 20px 0 16px;
    }
    .auth-tabs button {
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 9px;
      background: #17172f;
      color: var(--text-muted);
      font-size: 0.84rem;
      font-weight: 700;
    }
    .auth-tabs button.active {
      background: rgba(102,126,234,0.16);
      border-color: var(--accent);
      color: var(--text-primary);
    }
    .error { color: var(--danger); min-height: 22px; margin-top: 8px; font-size: 0.82rem; }
    .error.success { color: var(--success); }
    .pending-card, .error-card { text-align: center; }
    .pending-card h1, .error-card h1 { margin-bottom: 8px; }

    .app-shell { min-height: 100vh; display: flex; }
    .sidebar {
      width: 200px;
      flex: 0 0 200px;
      min-height: 100vh;
      background: #15152b;
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      position: sticky;
      top: 0;
      height: 100vh;
      z-index: 30;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 64px;
      padding: 0 16px;
      border-bottom: 1px solid var(--border);
      color: var(--text-primary);
      font-weight: 800;
      font-size: 0.95rem;
    }
    .brand i {
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border-radius: 9px;
      background: linear-gradient(135deg, #667eea, #764ba2);
      font-style: normal;
      font-weight: 800;
    }
    .side-nav {
      flex: 1;
      overflow-y: auto;
      padding: 12px 10px;
    }
    .nav-group {
      color: var(--text-dim);
      font-size: 0.66rem;
      font-weight: 700;
      text-transform: uppercase;
      padding: 12px 8px 6px;
    }
    .side-nav button {
      display: flex;
      align-items: center;
      gap: 9px;
      width: 100%;
      min-height: 42px;
      padding: 8px 10px;
      margin-bottom: 3px;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: var(--text-muted);
      text-align: left;
      font-size: 0.82rem;
      font-weight: 600;
    }
    .side-nav button:hover { background: rgba(102, 126, 234, 0.08); color: var(--text-secondary); }
    .side-nav button.active { background: rgba(102, 126, 234, 0.16); color: var(--text-primary); }
    .side-nav button .nav-emoji {
      display: grid;
      place-items: center;
      width: 26px;
      height: 26px;
      flex: 0 0 26px;
      border-radius: 8px;
      background: rgba(255,255,255,0.04);
      font-size: 0.9rem;
    }
    .side-nav button small { display: block; color: var(--text-dim); font-size: 0.65rem; margin-top: 2px; }
    .side-footer { padding: 12px 14px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 0.68rem; }

    .main-area { flex: 1; min-width: 0; }
    .topbar {
      min-height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 0 22px;
      background: rgba(15,15,26,0.88);
      border-bottom: 1px solid var(--border);
      backdrop-filter: blur(10px);
      position: sticky;
      top: 0;
      z-index: 20;
    }
    .topbar h1 { font-size: 1rem; color: var(--text-primary); letter-spacing: 0; }
    .topbar p { color: var(--text-dim); font-size: 0.72rem; margin-top: 2px; }
    .user-meta { display: flex; align-items: center; gap: 12px; }
    .user-meta strong { font-size: 0.88rem; color: var(--text-secondary); }
    .user-meta span { color: var(--text-muted); font-size: 0.75rem; }

    .dashboard { padding: 20px 22px 42px; max-width: 1720px; margin: 0 auto; width: 100%; }
    .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
    .page-head h2 { font-size: 1.35rem; color: var(--text-primary); letter-spacing: 0; }
    .page-head p { color: var(--text-muted); font-size: 0.86rem; margin-top: 4px; }

    .section-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 16px;
      margin-bottom: 16px;
    }
    .section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }
    .section-head h3 { color: var(--text-primary); font-size: 0.98rem; letter-spacing: 0; }
    .section-head span { color: var(--text-dim); font-size: 0.72rem; }

    .toolbar-icons {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
      gap: 10px;
    }
    .tool-icon {
      display: grid;
      justify-items: center;
      gap: 6px;
      padding: 10px 4px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: rgba(255,255,255,0.025);
      color: var(--text-secondary);
      font-size: 0.7rem;
      transition: transform 0.2s, border-color 0.2s;
    }
    .tool-icon:hover { transform: translateY(-2px); border-color: var(--accent); }
    .tool-icon .emoji {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--bg-elevated);
      font-size: 1.2rem;
    }

    .quick-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 10px;
    }
    .quick-btn {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 12px;
      border: 1px solid var(--border);
      border-radius: 9px;
      background: #1a1a34;
      color: var(--text-secondary);
      font-size: 0.76rem;
      font-weight: 600;
      text-align: center;
    }
    .quick-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(102,126,234,0.06); }

    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 12px;
    }
    .kpi-card {
      background: linear-gradient(145deg, rgba(102,126,234,0.10), rgba(30,30,54,0.8));
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px;
    }
    .kpi-card span { color: var(--text-dim); font-size: 0.72rem; }
    .kpi-card strong { display: block; color: var(--text-primary); font-size: 1.7rem; margin-top: 8px; }
    .kpi-card small { color: var(--text-muted); font-size: 0.68rem; margin-top: 6px; display: block; }

    .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
    table { width: 100%; border-collapse: collapse; min-width: 900px; }
    th, td {
      padding: 9px 10px;
      border-bottom: 1px solid rgba(42,42,74,0.65);
      color: var(--text-secondary);
      font-size: 0.74rem;
      text-align: left;
      white-space: nowrap;
    }
    th { color: var(--text-dim); font-size: 0.68rem; font-weight: 700; background: #1b1b38; }
    tbody tr:hover { background: rgba(102,126,234,0.05); }

    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
      gap: 12px;
    }
    .mini-card {
      min-height: 112px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: rgba(255,255,255,0.025);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px;
      color: var(--text-secondary);
    }
    a.mini-card:hover { border-color: var(--accent); background: rgba(102,126,234,0.06); }
    .mini-card strong { color: var(--text-primary); font-size: 0.88rem; }
    .mini-card p { color: var(--text-dim); font-size: 0.72rem; line-height: 1.6; }
    .mini-card .badge-row { margin-top: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .badge {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 8px;
      border-radius: 7px;
      font-size: 0.68rem;
      font-weight: 700;
    }
    .badge.ready { background: rgba(52,211,153,0.12); color: var(--success); }
    .badge.waiting { background: rgba(251,191,36,0.12); color: var(--warning); }
    .badge.muted { background: rgba(255,255,255,0.05); color: var(--text-muted); }

    .empty {
      grid-column: 1 / -1;
      padding: 28px;
      border: 1px dashed var(--border);
      border-radius: 12px;
      color: var(--text-dim);
      text-align: center;
    }
    .employee-input {
      width: 100%;
      min-height: 180px;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: #17172f;
      color: var(--text-secondary);
      font-family: 'Inter', monospace;
      font-size: 0.82rem;
      line-height: 1.7;
      resize: vertical;
      outline: none;
    }
    .employee-input:focus { border-color: var(--accent); }
    .employee-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 12px;
      flex-wrap: wrap;
    }
    .primary.small {
      width: auto;
      margin: 0;
      padding: 9px 16px;
      font-size: 0.8rem;
    }
    .embed-panel {
      display: flex;
      flex-direction: column;
      min-height: calc(100vh - 180px);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      background: var(--bg-card);
    }
    .embed-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
    }
    .embed-toolbar strong { color: var(--text-primary); font-size: 0.92rem; }
    .embed-frame { width: 100%; flex: 1; min-height: 720px; border: 0; background: #ffffff; }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 24px;
      transform: translateX(-50%) translateY(20px);
      background: #252548;
      color: var(--text-primary);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 18px;
      font-size: 0.82rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s, transform 0.2s;
      z-index: 99;
    }
    .toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

    @media (max-width: 1200px) {
      .kpi-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 900px) {
      .sidebar { width: 56px; flex-basis: 56px; }
      .brand span, .side-nav button small, .side-nav button span, .nav-group, .side-footer { display: none; }
      .side-nav button { justify-content: center; padding: 8px; }
      .side-nav button .nav-emoji { flex: 0 0 30px; }
      .dashboard { padding: 14px; }
      .topbar { padding: 0 14px; }
      .kpi-grid { grid-template-columns: repeat(2, 1fr); }
      .embed-frame { min-height: 56vh; }
    }

    /* ===== 首页 v2：玻璃拟态 · 快捷动作 · 工作台入口 ===== */
    .glass {
      background: rgba(255, 255, 255, 0.055);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.09);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 34px rgba(3, 6, 18, 0.45);
    }
    .home-hero {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding: 26px 28px;
      border-radius: 20px;
      margin-bottom: 22px;
      background:
        radial-gradient(circle at 12% 0%, rgba(92, 124, 250, 0.22), transparent 46%),
        radial-gradient(circle at 92% 100%, rgba(227, 192, 125, 0.12), transparent 42%),
        rgba(27, 37, 71, 0.55);
      border: 1px solid rgba(255, 255, 255, 0.09);
    }
    .home-hero h2 { color: var(--text-primary); font-size: 1.6rem; letter-spacing: 0.5px; }
    .home-hero p { color: var(--text-muted); margin-top: 8px; font-size: 0.9rem; }
    .hero-badge {
      flex-shrink: 0;
      padding: 7px 14px;
      border-radius: 999px;
      font-size: 0.78rem;
      color: var(--gold-soft);
      border: 1px solid rgba(227, 192, 125, 0.4);
      background: rgba(227, 192, 125, 0.08);
      letter-spacing: 2px;
    }

    .quick-action-bar {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
      margin-bottom: 24px;
    }
    .qa-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 16px;
      border-radius: 15px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.09);
      color: var(--text-primary);
      text-align: left;
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
      min-height: 74px;
    }
    .qa-card:hover { transform: translateY(-4px); border-color: rgba(92, 124, 250, 0.55); background: rgba(92, 124, 250, 0.1); }
    .qa-emoji { font-size: 1.5rem; line-height: 1; }
    .qa-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .qa-text strong { font-size: 0.98rem; }
    .qa-text small { color: var(--text-muted); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .qa-primary {
      background: linear-gradient(135deg, rgba(227, 192, 125, 0.92), rgba(212, 172, 100, 0.92));
      border-color: rgba(242, 220, 166, 0.8);
      color: #241d08;
    }
    .qa-primary .qa-text small { color: rgba(36, 29, 8, 0.72); }
    .qa-primary:hover { transform: translateY(-4px); border-color: var(--gold-soft); }

    .home-cols {
      display: grid;
      grid-template-columns: 1.6fr 1fr;
      gap: 18px;
      align-items: start;
      margin-bottom: 22px;
    }
    .home-cols .section-card { height: 100%; margin: 0; }

    .workspace-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .workspace-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      padding: 20px 18px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.045);
      border: 1px solid rgba(255, 255, 255, 0.09);
      color: var(--text-primary);
      text-align: left;
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }
    .workspace-card:hover { transform: translateY(-4px); border-color: rgba(92, 124, 250, 0.55); background: rgba(92, 124, 250, 0.09); }
    .ws-emoji {
      width: 44px; height: 44px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.35rem;
      background: rgba(92, 124, 250, 0.16);
      border: 1px solid rgba(92, 124, 250, 0.3);
    }
    .ws-operation .ws-emoji { background: rgba(92, 124, 250, 0.18); }
    .ws-sales .ws-emoji { background: rgba(52, 211, 153, 0.16); border-color: rgba(52, 211, 153, 0.32); }
    .ws-design .ws-emoji { background: rgba(227, 192, 125, 0.16); border-color: rgba(227, 192, 125, 0.35); }
    .workspace-card strong { font-size: 1.02rem; }
    .workspace-card p { color: var(--text-muted); font-size: 0.78rem; line-height: 1.5; }
    .ws-enter { margin-top: auto; color: var(--accent); font-size: 0.82rem; }

    .overview-card {
      display: flex;
      align-items: center;
      gap: 14px;
      width: 100%;
      padding: 20px 18px;
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(92, 124, 250, 0.14), rgba(27, 37, 71, 0.4));
      border: 1px solid rgba(92, 124, 250, 0.3);
      color: var(--text-primary);
      text-align: left;
      transition: transform 0.2s ease, border-color 0.2s ease;
    }
    .overview-card:hover { transform: translateY(-3px); border-color: rgba(92, 124, 250, 0.6); }
    .ov-emoji { font-size: 1.7rem; }
    .ov-text { display: flex; flex-direction: column; gap: 5px; flex: 1; }
    .ov-text small { color: var(--text-muted); font-size: 0.76rem; line-height: 1.5; }
    .ov-enter { color: var(--gold-soft); font-size: 0.85rem; white-space: nowrap; }

    .kb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .kb-card {
      display: flex;
      flex-direction: column;
      gap: 7px;
      padding: 18px;
      border-radius: 15px;
      background: rgba(255, 255, 255, 0.045);
      border: 1px solid rgba(255, 255, 255, 0.09);
      color: var(--text-primary);
      transition: transform 0.2s ease, border-color 0.2s ease;
    }
    .kb-card:hover { transform: translateY(-3px); border-color: rgba(227, 192, 125, 0.45); }
    .kb-emoji { font-size: 1.4rem; }
    .kb-card strong { font-size: 0.95rem; }
    .kb-card p { color: var(--text-muted); font-size: 0.76rem; }

    button:focus-visible, a:focus-visible, input:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 2px;
    }
    @media (prefers-reduced-motion: reduce) {
      .qa-card, .workspace-card, .overview-card, .kb-card { transition: none; transform: none; }
    }
    @media (max-width: 1100px) {
      .quick-action-bar { grid-template-columns: repeat(3, 1fr); }
      .home-cols { grid-template-columns: 1fr; }
    }
    @media (max-width: 720px) {
      .quick-action-bar { grid-template-columns: repeat(2, 1fr); }
      .workspace-grid, .kb-grid { grid-template-columns: 1fr; }
      .home-hero { flex-direction: column; }
    }