/* ========== CSS Variables ========== */
    :root {
      --primary: #1e3a5f;
      --primary-light: #2d5a8e;
      --primary-hover: #163050;
      --accent: #c9a227;
      --accent-light: #e8d48b;
      --bg: #f8f9fc;
      --bg-accent: #eef1f8;
      --card: #ffffff;
      --ink: #1a1f36;
      --muted: #6b7394;
      --border: #e2e6f0;
      --border-focus: #2d5a8e;
      --success: #059669;
      --success-bg: #ecfdf5;
      --success-border: #a7f3d0;
      --warning: #d97706;
      --warning-bg: #fffbeb;
      --warning-border: #fde68a;
      --error: #dc2626;
      --error-bg: #fef2f2;
      --error-border: #fecaca;
      --shadow-sm: 0 1px 3px rgba(26,31,54,0.06);
      --shadow: 0 4px 16px rgba(26,31,54,0.08);
      --shadow-lg: 0 12px 40px rgba(26,31,54,0.12);
      --shadow-btn: 0 4px 14px rgba(30,58,95,0.25);
      --radius: 12px;
      --radius-lg: 16px;
      --radius-xl: 20px;
      --ease: cubic-bezier(0.2,0.8,0.2,1);
      --nav-height: 64px;
    }

    [data-theme="dark"] {
      --primary: #4a8fd4;
      --primary-light: #6ba5e0;
      --primary-hover: #5d9bdb;
      --accent: #e8d48b;
      --accent-light: #f0e4b3;
      --bg: #0f1420;
      --bg-accent: #1a2035;
      --card: #1e2640;
      --ink: #e8ecf4;
      --muted: #8b95b8;
      --border: #2d3654;
      --border-focus: #4a8fd4;
      --success: #34d399;
      --success-bg: #064e3b;
      --success-border: #065f46;
      --warning: #fbbf24;
      --warning-bg: #451a03;
      --warning-border: #78350f;
      --error: #f87171;
      --error-bg: #450a0a;
      --error-border: #7f1d1d;
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
      --shadow: 0 4px 16px rgba(0,0,0,0.25);
      --shadow-lg: 0 12px 40px rgba(0,0,0,0.35);
      --shadow-btn: 0 4px 14px rgba(74,143,212,0.3);
    }

    /* ========== Reset ========== */
    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: "Inter", -apple-system, BlinkMacSystemFont, "Source Sans 3", sans-serif;
      color: var(--ink);
      background: var(--bg);
      min-height: 100vh;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .page { min-height: 100vh; display: flex; flex-direction: column; }

    /* ========== Navigation ========== */
    nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: color-mix(in srgb, var(--card) 85%, transparent);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
      height: var(--nav-height);
      transition: background 0.3s ease, border-color 0.3s ease;
    }

    .nav-inner {
      max-width: 1320px;
      margin: 0 auto;
      padding: 0 clamp(16px,4vw,40px);
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .nav-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: var(--ink);
    }

    .nav-logo {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--primary), var(--primary-light));
      display: grid;
      place-items: center;
      color: #fff;
      font-family: "Playfair Display", serif;
      font-weight: 700;
      font-size: 18px;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(30,58,95,0.22);
    }

    [data-theme="dark"] .nav-logo { box-shadow: 0 2px 8px rgba(74,143,212,0.3); }

    .nav-name {
      font-family: "Playfair Display", serif;
      font-size: 21px;
      font-weight: 700;
      letter-spacing: 0.2px;
    }

    .nav-badge {
      background: linear-gradient(135deg, var(--accent), #d4b032);
      color: #1a1200;
      font-size: 10px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 999px;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      line-height: 1;
    }

    .nav-actions { display: flex; align-items: center; gap: 6px; }

    .nav-btn {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--card);
      color: var(--muted);
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: all 0.2s ease;
      font-size: 18px;
      padding: 0;
    }

    .nav-btn:hover {
      color: var(--primary);
      border-color: var(--primary);
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
    }

    .nav-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

    .auth-btn {
      min-height: 38px;
      max-width: 220px;
      border: 1px solid var(--border);
      background: var(--card);
      color: var(--primary);
      padding: 8px 13px;
      border-radius: 10px;
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .auth-btn:disabled {
      color: var(--muted);
      background: var(--bg-accent);
      cursor: not-allowed;
    }

    .auth-btn.signed-in {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
    }

    .auth-btn:not(:disabled):hover {
      border-color: var(--primary);
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
    }

    /* ========== Hero ========== */
    .hero {
      text-align: center;
      padding: 36px clamp(16px,4vw,40px) 20px;
      max-width: 680px;
      margin: 0 auto;
    }

    .hero h2 {
      font-family: "Playfair Display", serif;
      font-size: clamp(22px,3.2vw,34px);
      font-weight: 700;
      margin: 0 0 10px;
      color: var(--ink);
      letter-spacing: 0.2px;
    }

    .hero p {
      color: var(--muted);
      font-size: 15px;
      margin: 0;
      line-height: 1.6;
    }

    /* ========== Main Layout ========== */
    main {
      display: grid;
      grid-template-columns: minmax(300px,380px) minmax(0,1fr);
      gap: 24px;
      padding: 0 clamp(16px,4vw,40px) 48px;
      align-items: start;
      max-width: 1320px;
      margin: 0 auto;
      width: 100%;
    }

    /* ========== Panel ========== */
    .panel {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 24px;
      box-shadow: var(--shadow);
      transition: background 0.3s ease, border-color 0.3s ease;
    }

    .section-title {
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 0.9px;
      text-transform: uppercase;
      color: var(--primary);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .section-title::before {
      content: "";
      width: 3px;
      height: 14px;
      border-radius: 2px;
      background: linear-gradient(180deg, var(--primary), var(--primary-light));
      flex-shrink: 0;
    }

    /* ========== Form ========== */
    label {
      font-size: 13px;
      font-weight: 600;
      color: var(--muted);
      display: block;
      margin-bottom: 6px;
    }

    input, textarea, select {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px 14px;
      font-size: 14px;
      background: var(--bg);
      color: var(--ink);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      font-family: "Inter", "Source Sans 3", sans-serif;
    }

    input:focus, textarea:focus, select:focus {
      border-color: var(--border-focus);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
      outline: none;
    }

    textarea { min-height: 220px; resize: vertical; line-height: 1.6; }
    .api-textarea { min-height: 90px; }

    .hint { font-size: 12px; color: var(--muted); margin-top: 6px; }

    .kbd-hint {
      display: inline-flex;
      gap: 5px;
      align-items: center;
      margin-top: 10px;
      font-size: 12px;
      color: var(--muted);
    }

    kbd {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 11px;
      padding: 2px 7px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--bg-accent);
      color: var(--ink);
    }

    /* ========== Buttons ========== */
    .actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

    button {
      border: none;
      border-radius: var(--radius);
      padding: 11px 18px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: "Inter", "Source Sans 3", sans-serif;
    }

    button.primary {
      background: linear-gradient(135deg, var(--primary-light), var(--primary));
      color: #fff;
      box-shadow: var(--shadow-btn);
    }

    button.primary:not(:disabled):hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(30,58,95,0.35);
    }

    [data-theme="dark"] button.primary:not(:disabled):hover {
      box-shadow: 0 6px 20px rgba(74,143,212,0.4);
    }

    button.secondary {
      background: var(--card);
      color: var(--primary);
      border: 1px solid var(--border);
    }

    button.secondary:not(:disabled):hover {
      border-color: var(--primary);
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
    }

    button.secondary.active { background: var(--primary); color: #fff; border-color: var(--primary); }

    button:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
    button:not(:disabled):active { transform: translateY(0) !important; }

    button:focus-visible {
      outline: 3px solid color-mix(in srgb, var(--primary) 30%, transparent);
      outline-offset: 2px;
    }

    /* ========== Toolbar ========== */
    .toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }

    .toolbar-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
    .toolbar-btns button { padding: 7px 12px; font-size: 13px; }
    .mode-toggle { min-width: 122px; }

    /* ========== Results ========== */
    .results { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; counter-reset: cite; }

    .result-card {
      background: var(--bg);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      padding: 16px 16px 14px 54px;
      box-shadow: var(--shadow-sm);
      animation: fadeUp 0.45s var(--ease) both;
      position: relative;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .result-card:hover {
      border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
      box-shadow: var(--shadow);
    }

    .result-card::before {
      counter-increment: cite;
      content: counter(cite);
      position: absolute;
      left: 14px;
      top: 14px;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      font-weight: 700;
      font-size: 12px;
      background: var(--primary);
      color: var(--accent);
      box-shadow: 0 2px 6px rgba(30,58,95,0.15);
    }

    [data-theme="dark"] .result-card::before { box-shadow: 0 2px 6px rgba(0,0,0,0.3); }

    .result-meta {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 8px;
      line-height: 1.5;
    }

    .citation {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 13px;
      line-height: 1.7;
      white-space: pre-wrap;
      background: var(--bg-accent);
      padding: 12px 14px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
    }

    .copy-btn { margin-top: 10px; padding: 6px 12px; font-size: 12px; }

    /* ========== Check Blocks ========== */
    .check-block {
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--bg-accent);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .check-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

    .check-badge {
      font-size: 11px;
      font-weight: 700;
      border-radius: 999px;
      padding: 3px 9px;
      border: 1px solid transparent;
    }

    .check-pass { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
    .check-warn { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
    .check-fail { background: var(--error-bg); color: var(--error); border-color: var(--error-border); }

    .check-score, .check-reason, .check-issues, .check-note {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.5;
    }

    .check-suggest {
      font-size: 12px;
      line-height: 1.5;
      color: var(--ink);
      border: 1px dashed var(--border);
      border-radius: var(--radius);
      background: var(--card);
      padding: 8px 10px;
      white-space: pre-wrap;
    }

    /* ========== Error Cards ========== */
    .result-card.error { border-color: var(--error-border); background: var(--error-bg); }
    .result-card.error::before { background: var(--error); color: #fff; }
    .result-card.error .citation { background: color-mix(in srgb, var(--error-bg) 60%, var(--bg)); border-color: var(--error-border); }

    /* ========== Progress ========== */
    .progress {
      font-size: 12px;
      color: var(--muted);
      background: var(--bg-accent);
      border: 1px solid var(--border);
      padding: 10px 14px;
      border-radius: var(--radius);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .progress-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .progress-text { color: var(--ink); font-weight: 600; min-width: 0; }

    .progress-percent {
      color: var(--primary);
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      min-width: 38px;
      text-align: right;
    }

    .progress-track { width: 100%; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }

    .progress-bar {
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--primary-light), var(--primary));
      transition: width 0.3s var(--ease);
    }

    .progress-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* ========== Empty ========== */
    .empty {
      text-align: center;
      color: var(--muted);
      padding: 44px 20px;
      border: 1px dashed var(--border);
      border-radius: var(--radius-lg);
      background: var(--bg-accent);
      font-size: 14px;
    }

    .empty-icon { font-size: 30px; margin-bottom: 8px; opacity: 0.45; }

    /* ========== History Panel ========== */
    .history-wrap {
      max-width: 1320px;
      margin: 0 auto 32px;
      padding: 0 clamp(16px,4vw,40px);
      width: 100%;
    }

    .history-box {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      padding: 0 24px;
      transition: max-height 0.4s var(--ease), opacity 0.3s ease, padding 0.3s ease;
    }

    .history-box.open { max-height: 560px; opacity: 1; padding: 22px 24px; }

    .history-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 14px;
    }

    .history-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 400px;
      overflow-y: auto;
      padding-right: 4px;
    }

    .history-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 11px 13px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--bg);
      cursor: pointer;
      transition: all 0.18s ease;
    }

    .history-item:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }

    .history-body { flex: 1; min-width: 0; }

    .history-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 3px;
    }

    .history-cite {
      font-size: 12px;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .history-meta { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }

    .history-fmt {
      font-size: 10px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      background: var(--bg-accent);
      color: var(--primary);
      border: 1px solid var(--border);
      text-transform: uppercase;
    }

    .history-time { font-size: 11px; color: var(--muted); white-space: nowrap; }

    .history-del {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      border: none;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      display: grid;
      place-items: center;
      font-size: 15px;
      padding: 0;
      transition: all 0.15s ease;
      flex-shrink: 0;
    }

    .history-del:hover { background: var(--error-bg); color: var(--error); }
    .history-empty { text-align: center; color: var(--muted); padding: 28px 16px; font-size: 13px; }

    /* ========== Modal ========== */
    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(15,20,32,0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      z-index: 200;
      backdrop-filter: blur(6px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }

    .modal-backdrop.open { opacity: 1; pointer-events: auto; }

    .modal {
      width: min(520px,100%);
      background: var(--card);
      border-radius: var(--radius-xl);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-lg);
      padding: 28px;
      position: relative;
      transform: translateY(10px) scale(0.98);
      opacity: 0;
      transition: transform 0.25s var(--ease), opacity 0.25s ease;
    }

    .modal-backdrop.open .modal { transform: translateY(0) scale(1); opacity: 1; }

    .modal h3 { margin: 0 0 16px; font-size: 18px; font-weight: 700; color: var(--ink); }

    .modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 32px;
      height: 32px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg);
      font-size: 16px;
      cursor: pointer;
      color: var(--muted);
      display: grid;
      place-items: center;
      padding: 0;
      transition: all 0.15s ease;
    }

    .modal-close:hover { color: var(--error); border-color: var(--error-border); }

    .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

    .modal label.cb-label {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 12px;
      font-weight: 500;
      color: var(--ink);
      cursor: pointer;
    }

    .modal label.cb-label input[type="checkbox"] {
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: var(--primary);
      flex-shrink: 0;
    }

    .auth-modal { width: min(460px,100%); }

    .auth-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;
      margin: 0 42px 18px 0;
      padding: 4px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg-accent);
    }

    .auth-tab {
      min-height: 34px;
      padding: 7px 10px;
      border-radius: 9px;
      background: transparent;
      color: var(--muted);
      border: 0;
      box-shadow: none;
      font-size: 13px;
    }

    .auth-tab.active {
      background: var(--card);
      color: var(--primary);
      box-shadow: var(--shadow-sm);
    }

    .auth-field {
      display: grid;
      gap: 8px;
      margin-top: 14px;
    }

    .auth-field:first-of-type { margin-top: 0; }

    .auth-field label {
      font-weight: 600;
      color: var(--ink);
      font-size: 13px;
    }

    .auth-field input:disabled {
      color: var(--muted);
      background: var(--bg-accent);
      cursor: not-allowed;
    }

    .auth-copy {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
      margin: -4px 0 18px;
    }

    .auth-field-note {
      margin-top: 6px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .auth-notice {
      margin-top: 14px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg-accent);
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .auth-error {
      min-height: 18px;
      margin-top: 10px;
      color: var(--error);
      font-size: 12px;
      line-height: 1.5;
    }

    /* ========== Toast ========== */
    .toast {
      position: fixed;
      left: 50%;
      bottom: 24px;
      transform: translateX(-50%) translateY(8px);
      z-index: 300;
      background: var(--ink);
      color: var(--bg);
      padding: 10px 18px;
      border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
      font-size: 13px;
      font-weight: 500;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
      max-width: min(480px,calc(100vw - 32px));
      text-align: center;
    }

    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* ========== Footer ========== */
    .footer {
      margin-top: auto;
      padding: 20px clamp(16px,4vw,40px) 28px;
      text-align: center;
      color: var(--muted);
      font-size: 12px;
      border-top: 1px solid var(--border);
    }

    .footer-brand { font-weight: 700; color: var(--primary); }

    /* ========== Animations ========== */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ========== Responsive ========== */
    @media (max-width: 900px) {
      main { grid-template-columns: 1fr; }
      .hero { padding: 24px 16px 14px; }
      .nav-name { font-size: 18px; }
    }

    @media (min-width: 901px) {
      main > section:first-child { position: sticky; top: calc(var(--nav-height) + 16px); }
    }

    @media (max-width: 600px) {
      .nav-badge { display: none; }
      .auth-btn { max-width: 104px; padding-inline: 10px; }
      .auth-tabs { margin-right: 38px; }
      .auth-modal { padding: 22px; }
      .auth-modal .modal-actions { flex-direction: column; }
      .auth-modal .modal-actions button { width: 100%; }
      .panel { padding: 18px; }
      .result-card { padding-left: 46px; }
    }

    @media (prefers-reduced-motion: reduce) {
      * { animation: none !important; transition: none !important; }
    }

    .history-list::-webkit-scrollbar { width: 5px; }
    .history-list::-webkit-scrollbar-track { background: transparent; }
    .history-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }