:root {
      --paper: #FBFAF7;
      --paper-deep: #F2EBDD;
      --paper-soft: #FCFAF3;
      --paper-line: #D8D2C8;
      --paper-line-strong: #BFB4A4;
      --ink: #1A1815;
      --ink-soft: #5A5249;
      --muted: #8A7E6E;
      --faint: #A89C8A;
      --red: #EE5524;
      --red-deep: #D8430F;
      --red-soft: #FBE6DD;
      --green: #2E7D5B;
      --green-soft: #E5F1E8;
      --violet: #6F65B9;
      --amber: #C99A38;
      --shadow-sm: 0 1px 3px rgba(52, 43, 31, .12);
      --shadow-md: 0 10px 30px rgba(52, 43, 31, .12);
      --font-cn: 'Noto Serif SC', 'Songti SC', serif;
      --font-display: 'DM Serif Display', 'Noto Serif SC', serif;
      --font-serif: 'Source Serif 4', 'Newsreader', Georgia, serif;
      --font-en: 'Newsreader', 'Source Serif 4', Georgia, serif;
      --font-sans: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
      --ease: cubic-bezier(.16, 1, .3, 1);
    }

    *, *::before, *::after { box-sizing: border-box; }

    html {
      min-height: 100%;
      background: var(--paper);
      color: var(--ink);
      scroll-behavior: smooth;
      --keyboard-offset: 0px;
      --practice-viewport-height: 100dvh;
    }

    body {
      min-height: 100dvh;
      margin: 0;
      color: var(--ink);
      font-family: var(--font-serif);
      line-height: 1.5;
      background: var(--paper);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    body.practice-active {
      overflow: hidden;
    }

    button,
    input,
    textarea {
      font: inherit;
    }

    button {
      -webkit-tap-highlight-color: transparent;
    }

    ::selection {
      background: rgba(226, 72, 61, .2);
    }

    .screen {
      display: none;
      min-height: 100dvh;
    }

    .screen.active {
      display: block;
      animation: screen-in .28s var(--ease) both;
    }

    @keyframes screen-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .app-shell {
      width: min(1060px, calc(100% - 32px));
      margin: 0 auto;
      padding: 28px 0 42px;
    }

    .topbar {
      min-height: 66px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
      padding: 0 28px;
      background: rgba(242, 235, 217, .88);
      border: 1px solid var(--paper-line);
      box-shadow: var(--shadow-sm);
      backdrop-filter: blur(14px);
      position: sticky;
      top: 16px;
      z-index: 20;
    }

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

    .brand-dot {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: var(--red);
      flex: none;
    }

    .brand-name {
      font-family: var(--font-cn);
      font-size: 22px;
      font-weight: 700;
      letter-spacing: 3px;
      white-space: nowrap;
    }

    .home-tabs {
      display: inline-flex;
      align-items: center;
      gap: 26px;
      font-size: 15px;
      color: var(--muted);
      white-space: nowrap;
      min-width: 0;
    }

    .nav-tab {
      appearance: none;
      border: 0;
      border-bottom: 2px solid transparent;
      background: transparent;
      color: inherit;
      cursor: pointer;
      padding: 8px 0;
      transition: color .16s ease, border-color .16s ease;
    }

    .nav-tab.active {
      color: var(--ink);
      border-color: var(--red);
    }

    .nav-tab:focus {
      outline: 0;
    }

    .nav-tab:focus-visible {
      outline: 2px solid rgba(226, 72, 61, .34);
      outline-offset: 5px;
      border-radius: 4px;
    }

    .settings-btn {
      appearance: none;
      min-width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 9px;
      color: var(--ink);
      background: transparent;
      border: 1px solid transparent;
      border-radius: 6px;
      cursor: pointer;
      transition: color .16s ease, background .16s ease, border-color .16s ease;
    }

    .settings-btn:hover,
    .settings-btn.ready {
      color: var(--ink);
      border-color: var(--paper-line-strong);
      background: rgba(252, 250, 243, .62);
    }

    .settings-icon {
      width: 21px;
      height: 21px;
      flex: none;
      stroke: currentColor;
    }

    .settings-user {
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: var(--font-sans);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0;
    }

    .login-screen {
      min-height: 100dvh;
      display: grid;
      place-items: center;
      padding: 28px 18px;
      background:
        linear-gradient(180deg, rgba(242, 235, 217, .72), rgba(251, 250, 247, .96)),
        var(--paper);
    }

    .login-panel {
      width: min(420px, 100%);
      padding: 28px;
      background: var(--paper-soft);
      border: 1px solid var(--paper-line-strong);
      border-radius: 8px;
      box-shadow: var(--shadow-md);
    }

    .login-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 24px;
    }

    .login-title {
      margin: 0;
      font-family: var(--font-cn);
      font-size: 24px;
      line-height: 1.25;
      letter-spacing: 2px;
    }

    .login-form {
      display: grid;
      gap: 13px;
    }

    .login-status {
      min-height: 20px;
      color: var(--muted);
      font-family: var(--font-sans);
      font-size: 13px;
    }

    .home-view {
      display: none;
    }

    .home-view.active {
      display: block;
    }

    .library-hero,
    .detail-header,
    .import-header {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      padding: 44px 6px 18px;
      border-bottom: 2px solid var(--ink);
    }

    .library-title,
    .detail-title,
    .import-title {
      margin: 0;
      font-family: var(--font-cn);
      font-size: clamp(30px, 4vw, 48px);
      line-height: 1.18;
      letter-spacing: 1px;
    }

    .library-copy,
    .detail-meta,
    .import-copy {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.7;
    }

    .library-meta {
      margin: 8px 0 0;
      color: var(--faint);
      font-size: 13px;
      line-height: 1.5;
    }