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

    :root {
      --bg: #f8f9fc;
      --surface: #ffffff;
      --surface2: #f1f3f9;
      --border: #e2e5f0;
      --accent: #6366f1;
      --accent-hover: #4f46e5;
      --accent-light: #eef2ff;
      --accent-glow: rgba(99,102,241,.15);
      --grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
      --text: #1e1b4b;
      --text-muted: #64748b;
      --ok: #059669;
      --ok-bg: #ecfdf5;
      --ok-border: #a7f3d0;
      --ok-grad: linear-gradient(135deg, #059669, #10b981);
      --ng: #dc2626;
      --ng-bg: #fef2f2;
      --ng-border: #fecaca;
    }

    html, body { height: 100%; }
    body {
      font-family: "Hiragino Sans", "Meiryo", "Segoe UI", system-ui, sans-serif;
      background: var(--bg);
      color: var(--text);
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: hidden;
    }

    #app-body {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    /* ── Progress sidebar ── */
    #progress-sidebar {
      width: 240px;
      flex-shrink: 0;
      background: var(--surface);
      border-right: 1px solid var(--border);
      overflow-y: auto;
      padding: 20px 16px;
      box-shadow: 1px 0 4px rgba(0,0,0,.03);
    }
    #progress-sidebar::-webkit-scrollbar { width: 4px; }
    #progress-sidebar::-webkit-scrollbar-thumb { background: #d1d5e4; border-radius: 10px; }
    .sidebar-header {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      color: var(--text-muted);
      text-transform: uppercase;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .sidebar-header::before { content: ""; display: block; width: 3px; height: 14px; border-radius: 2px; background: var(--grad); }
    .progress-item {
      margin-bottom: 14px;
      padding: 8px 10px;
      border-radius: 8px;
      transition: background .15s;
    }
    .progress-item:hover { background: var(--surface2); }
    .progress-item--locked { pointer-events: none; }
    .progress-item--locked .progress-topic,
    .progress-item--locked .progress-count { color: #c8c8d0; }
    .progress-item--locked .progress-track { background: #e8e8ec; }
    .progress-item--locked .progress-fill,
    .progress-item--locked .progress-fill-light { background: #d0d0d8; }
    .progress-item-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 6px;
    }
    .progress-topic { font-size: 12px; font-weight: 600; color: var(--text); }
    .progress-count { font-size: 11px; color: var(--text-muted); font-weight: 500; }
    .progress-track {
      height: 5px;
      background: var(--surface2);
      border-radius: 10px;
      overflow: hidden;
      display: flex;
    }
    .progress-fill {
      height: 100%;
      background: var(--ok-grad);
      transition: width .5s cubic-bezier(.22,1,.36,1);
      flex-shrink: 0;
      border-radius: 10px 0 0 10px;
    }
    .progress-fill-light {
      height: 100%;
      background: rgba(5,150,105,.2);
      transition: width .5s cubic-bezier(.22,1,.36,1);
      flex-shrink: 0;
    }
    .sidebar-chevron { display: none; }

    @media (max-width: 860px) {
      #app-body { flex-direction: column; }

      #progress-sidebar {
        display: none;
      }
    }

    /* ── Header ── */
    header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 24px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      box-shadow: 0 1px 3px rgba(0,0,0,.04);
    }
    header > a {
      min-width: 0;
      flex: 1 1 auto;
    }
    .logo {
      width: 34px; height: 34px;
      background: var(--grad);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 15px;
      font-weight: 700;
      color: #fff;
      box-shadow: 0 2px 8px rgba(99,102,241,.3);
    }
    header h1 {
      font-size: 17px; font-weight: 700;
      letter-spacing: -.01em;
      background: var(--grad);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .header-right {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .header-right a {
      font-size: 12px;
      color: var(--accent);
      text-decoration: none;
      background: var(--accent-light);
      border: 1px solid rgba(99,102,241,.2);
      border-radius: 20px;
      padding: 5px 14px;
      font-weight: 500;
      transition: all .2s;
    }
    .header-right a:hover { background: rgba(99,102,241,.15); }
    .streak-badge {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 13px;
      font-weight: 700;
      color: #ea580c;
      background: rgba(251,146,60,.1);
      border: 1px solid rgba(251,146,60,.2);
      border-radius: 20px;
      padding: 4px 12px;
    }
    .streak-badge .fire { font-size: 14px; }
    #life-count { display: flex; align-items: center; gap: 2px; }
    #life-count svg { vertical-align: middle; }

    main {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 32px 20px;
      overflow-y: auto;
      gap: 16px;
    }
    main::-webkit-scrollbar { width: 5px; }
    main::-webkit-scrollbar-thumb { background: #d1d5e4; border-radius: 10px; }

    /* ── Daily progress bar ── */
    #daily-progress-wrap {
      width: 100%;
      max-width: 700px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .daily-progress-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .05em;
      color: var(--text-muted);
    }
    #daily-progress-count {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
    }
    #daily-progress-track {
      height: 10px;
      background: var(--surface2);
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid var(--border);
      transition: border-color .4s;
    }
    #daily-progress-fill {
      height: 100%;
      width: 0%;
      background: var(--grad);
      border-radius: 10px;
      transition: width .5s cubic-bezier(.22,1,.36,1), background .4s;
    }
    #daily-progress-wrap.progress--complete #daily-progress-fill {
      background: linear-gradient(135deg, #f59e0b, #fbbf24, #fcd34d);
    }
    #daily-progress-wrap.progress--complete #daily-progress-track {
      border-color: rgba(251,191,36,.4);
      box-shadow: 0 0 0 1px rgba(251,191,36,.08), 0 6px 18px rgba(245,158,11,.14);
    }
    #daily-progress-wrap.progress--complete #daily-progress-count,
    #daily-progress-wrap.progress--complete #daily-progress-label {
      color: #92400e;
    }

    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 36px;
      width: 100%;
      max-width: 700px;
      display: flex;
      flex-direction: column;
      gap: 22px;
      animation: fadeUp .35s cubic-bezier(.22,1,.36,1);
      box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.03);
      align-self: center;
    }
    .card--review {
      background: #fffcf0;
      border-color: #e8d88a;
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes popIn {
      from { opacity: 0; transform: scale(.95); }
      to   { opacity: 1; transform: scale(1); }
    }
    @keyframes celebrateShake {
      0%, 100% { transform: translateX(0); }
      15% { transform: translateX(-3px) rotate(-1deg); }
      30% { transform: translateX(3px) rotate(1deg); }
      45% { transform: translateX(-2px); }
      60% { transform: translateX(2px); }
      75% { transform: translateX(-1px); }
    }

    .badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .badge {
      font-size: 11px;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 20px;
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--text-muted);
      transition: all .2s;
    }
    .badge.topic {
      color: var(--accent);
      border-color: rgba(99,102,241,.3);
      background: var(--accent-light);
    }
    .badge.today {
      color: #ea580c;
      border-color: rgba(251,146,60,.3);
      background: rgba(251,146,60,.08);
      font-weight: 700;
    }

    .question {
      font-size: 17px;
      font-weight: 600;
      line-height: 1.8;
      color: var(--text);
      white-space: pre-wrap;
    }

    textarea#ans {
      width: 100%;
      min-height: 110px;
      padding: 14px 16px;
      border: 1.5px solid var(--border);
      border-radius: 12px;
      font-size: 14.5px;
      font-family: inherit;
      background: var(--surface2);
      color: var(--text);
      resize: vertical;
      outline: none;
      line-height: 1.75;
      transition: border-color .2s, box-shadow .2s, background .2s;
    }
    textarea#ans:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
      background: #fff;
    }
    textarea#ans::placeholder { color: #94a3b8; }
    textarea#ans:disabled {
      background: var(--surface2);
      opacity: .7;
    }

    .actions { display: flex; gap: 10px; align-items: center; }
    .actions .hint {
      margin-left: auto;
      font-size: 11px;
      color: var(--text-muted);
      opacity: .6;
    }

    button {
      padding: 11px 24px;
      border: none;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    button:active:not(:disabled) { transform: scale(.96); }
    button:disabled { opacity: .35; cursor: not-allowed; }

    #btn-grade {
      background: var(--grad);
      color: #fff;
      box-shadow: 0 2px 8px rgba(99,102,241,.3);
    }
    #btn-grade:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(99,102,241,.35); transform: translateY(-1px); }

    #btn-next {
      background: var(--grad);
      color: #fff;
      border: none;
      box-shadow: 0 2px 8px rgba(99,102,241,.3);
      display: none;
    }
    #btn-next:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(99,102,241,.4); transform: translateY(-1px); }

    .result-box {
      display: none;
      border-radius: 12px;
      padding: 16px 18px;
      font-size: 14px;
      line-height: 1.75;
      gap: 10px;
      flex-direction: column;
      animation: popIn .3s cubic-bezier(.22,1,.36,1);
    }
    .result-box.ok { background: var(--ok-bg); border: 1.5px solid var(--ok-border); }
    .result-box.ng { background: var(--ng-bg); border: 1.5px solid var(--ng-border); }

    .result-head {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 700;
    }
    .result-head.ok { color: var(--ok); }
    .result-head.ng { color: var(--ng); }
    .result-reason { color: var(--text); line-height: 1.7; }

    .model-answer {
      display: none;
      border-top: 1.5px solid var(--border);
      padding-top: 18px;
      gap: 10px;
      flex-direction: column;
      animation: popIn .3s cubic-bezier(.22,1,.36,1) .1s both;
    }
    .model-answer-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .06em;
      color: var(--text-muted);
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .model-answer-label::before { content: ""; display: block; width: 3px; height: 12px; border-radius: 2px; background: var(--grad); }
    .model-answer-text {
      font-size: 14.5px;
      font-weight: 600;
      line-height: 1.8;
      color: var(--text);
      white-space: pre-wrap;
    }

    .spinner {
      display: none;
      width: 18px; height: 18px;
      border: 2.5px solid rgba(255,255,255,.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin .7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    #btn-grade.loading .label { display: none; }
    #btn-grade.loading .spinner { display: block; }

    /* ── Summary screen ── */
    .summary-title {
      font-size: 20px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .summary-title::before {
      content: "";
      display: block;
      width: 4px;
      height: 22px;
      border-radius: 2px;
      background: var(--grad);
    }
    .summary-rows { display: flex; flex-direction: column; gap: 4px; }
    .summary-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 15px;
      padding: 10px 14px;
      border-radius: 10px;
      transition: background .15s;
    }
    .summary-row:hover { background: var(--surface2); }
    .summary-row-label { font-weight: 500; color: var(--text); }
    .summary-divider { border-top: 1.5px solid var(--border); margin: 2px 14px; }
    .count {
      font-size: 22px;
      font-weight: 700;
      background: var(--grad);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .count.lg { font-size: 30px; }
    #btn-start {
      background: var(--grad);
      color: #fff;
      align-self: stretch;
      font-size: 15px;
      padding: 14px 28px;
      border-radius: 12px;
      justify-content: center;
      box-shadow: 0 2px 10px rgba(99,102,241,.3);
    }
    #btn-start:hover { box-shadow: 0 4px 16px rgba(99,102,241,.35); transform: translateY(-1px); }
    #summary-done {
      color: var(--text-muted);
      font-size: 14px;
      text-align: center;
      padding: 16px;
      background: var(--surface2);
      border-radius: 10px;
      line-height: 1.7;
    }

    /* ── Confetti ── */
    .confetti-container {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      pointer-events: none;
      z-index: 9999;
      overflow: hidden;
    }
    .confetti-piece {
      position: absolute;
      width: 8px; height: 8px;
      border-radius: 2px;
      animation: confettiFall 1.2s cubic-bezier(.25,.46,.45,.94) forwards;
      opacity: 0;
    }
    @keyframes confettiFall {
      0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
      100% { transform: translateY(60vh) rotate(720deg); opacity: 0; }
    }

    /* ── Bottom nav ── */
    .bottom-nav {
      display: none;
    }
    @media (max-width: 860px) {
      .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -1px 6px rgba(0,0,0,.05);
        z-index: 900;
        padding: 6px 0 env(safe-area-inset-bottom, 6px);
      }
      .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 6px 0;
        font-size: 10px;
        font-weight: 600;
        color: var(--text-muted);
        text-decoration: none;
        transition: color .15s;
      }
      .bottom-nav-item.active {
        color: var(--accent);
      }
      .bottom-nav-item:not(.active):hover {
        color: var(--text);
      }
      .footer-links { padding-bottom: 68px; }
      main { padding-bottom: 80px; }
    }

    .footer-links { flex-shrink: 0; padding: 8px 0; text-align: center; font-size: 10px; border-top: 1px solid var(--border); background: var(--surface); }
    .footer-links a { color: var(--text-muted); text-decoration: none; opacity: .85; transition: opacity .2s; }
    .footer-links a:hover { opacity: 1; text-decoration: underline; }
    .footer-links a + a::before { content: " / "; opacity: .4; }
    /* ── Auth trigger buttons ── */
    .auth-trigger {
      padding: 7px 16px;
      border: none;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s;
      background: var(--grad);
      color: #fff;
      box-shadow: 0 2px 8px rgba(99,102,241,.25);
    }
    .auth-trigger.secondary {
      background: var(--surface2);
      color: var(--text);
      border: 1.5px solid var(--border);
      box-shadow: none;
    }
    .desktop-signout {
      display: inline-flex;
    }
    .auth-trigger:hover:not(:disabled) { transform: translateY(-1px); }

    .auth-mode-switch {
      font-size: 12px;
      font-weight: 600;
      color: var(--accent);
      background: none;
      border: none;
      cursor: pointer;
      padding: 5px 10px;
      border-radius: 6px;
      transition: background .15s;
    }
    .auth-mode-switch:hover { background: var(--accent-light); }

    /* ── Auth modal overlay ── */
    .auth-dropdown {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(15,12,41,.5);
      backdrop-filter: blur(2px);
      align-items: center;
      justify-content: center;
      animation: overlayFadeIn .15s ease;
    }
    .auth-dropdown.open { display: flex; }
    @keyframes overlayFadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    .auth-dropdown-card {
      background: var(--surface);
      border-radius: 20px;
      padding: 40px 36px 32px;
      width: 100%;
      max-width: 400px;
      position: relative;
      box-shadow: 0 24px 64px rgba(0,0,0,.18);
      animation: modalSlideUp .25s cubic-bezier(.22,1,.36,1);
    }
    @keyframes modalSlideUp {
      from { transform: translateY(28px); opacity: 0; }
      to   { transform: translateY(0);    opacity: 1; }
    }
    .auth-dropdown-title {
      font-size: 22px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 28px;
      background: var(--grad);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .auth-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 16px;
    }
    .auth-field label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      letter-spacing: .04em;
    }
    .auth-field input {
      padding: 12px 14px;
      border: 1.5px solid var(--border);
      border-radius: 10px;
      font-size: 14.5px;
      font-family: inherit;
      background: var(--surface2);
      color: var(--text);
      outline: none;
      transition: border-color .2s, box-shadow .2s, background .2s;
    }
    .auth-field input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
      background: #fff;
    }
    .auth-dropdown-actions {
      display: flex;
      gap: 10px;
      margin-top: 20px;
    }
    .auth-btn {
      flex: 1;
      padding: 13px 20px;
      border: none;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s;
      background: var(--grad);
      color: #fff;
      box-shadow: 0 2px 8px rgba(99,102,241,.3);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .auth-btn.secondary {
      background: var(--surface2);
      color: var(--text);
      border: 1.5px solid var(--border);
      box-shadow: none;
    }
    .auth-btn:hover:not(:disabled) { transform: translateY(-1px); }
    .auth-btn:active:not(:disabled) { transform: scale(.97); }
    .auth-btn:disabled { opacity: .35; cursor: not-allowed; }
    .auth-error {
      display: none;
      margin-top: 14px;
      padding: 10px 14px;
      border-radius: 8px;
      font-size: 13px;
      color: var(--ng);
      background: var(--ng-bg);
      border: 1px solid var(--ng-border);
      line-height: 1.5;
    }

    /* ── Grade limit modal ── */
    .limit-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(15,12,41,.5);
      backdrop-filter: blur(2px);
      display: flex;
      align-items: center;
      justify-content: center;
      animation: overlayFadeIn .15s ease;
    }
    .limit-modal-card {
      background: var(--surface);
      border-radius: 20px;
      padding: 40px 36px 32px;
      width: 100%;
      max-width: 380px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      box-shadow: 0 24px 64px rgba(0,0,0,.18);
      animation: modalSlideUp .25s cubic-bezier(.22,1,.36,1);
    }
    .limit-modal-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--text);
      text-align: center;
    }
    .limit-modal-time {
      font-size: 15px;
      color: var(--text-muted);
      text-align: center;
      line-height: 1.6;
    }

    @media (max-width: 720px) {
      header {
        flex-wrap: nowrap;
        gap: 8px;
      }
      header > a {
        min-width: 0;
      }
      header h1 {
        font-size: 16px;
      }
      .header-right {
        margin-left: auto;
        flex-shrink: 0;
      }
      .auth-trigger {
        padding: 6px 12px;
        font-size: 12px;
      }
      .desktop-signout {
        display: none !important;
      }
      .auth-dropdown-card,
      .limit-modal-card {
        margin: 16px;
        max-width: calc(100% - 32px);
        padding: 32px 24px 24px;
      }
    }