.tool-shell { width: min(100% - 36px, 760px); margin: 0 auto; padding: 30px 0 56px; }
html.auth-pending .tool-shell, html.auth-locked .tool-shell { display: none; }
.tool-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.tool-header .daily-slogan { flex: 1; text-align: center; }
.tool-back { display: inline-flex; min-height: 44px; align-items: center; color: var(--pro-text-accent); font-weight: 800; text-decoration: none; }
.tool-title { margin: 0; font-size: clamp(30px, 8vw, 48px); }
.tool-intro { color: var(--pro-tx2); line-height: 1.65; }
.tool-auth { width: min(calc(100% - 28px), 460px); margin: 10vh auto; border: 1px solid var(--pro-bd); border-radius: 28px; background: var(--pro-sur); padding: 28px; box-shadow: var(--pro-card-shadow); }
.tool-auth h1 { font-size: 30px; }
.tool-auth form { display: grid; gap: 8px; margin-top: 14px; }
.tool-auth input { width: 100%; min-height: 48px; border: 1px solid var(--pro-bd); border-radius: 12px; background: var(--pro-card); color: var(--pro-tx); padding: 10px 12px; font-size: 16px; }
.tool-auth-status { min-height: 1.5em; margin: 14px 0 0; color: var(--pro-text-accent); }
.tool-card { border: 1px solid var(--pro-bd); border-radius: 26px; background: var(--pro-sur); padding: 24px; box-shadow: var(--pro-card-shadow); }
.free-kana-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.free-kana-button { min-width: 0; min-height: 54px; border: 1px solid var(--pro-bd); border-radius: 13px; background: var(--pro-card); color: var(--pro-text-quiet); font-size: 24px; }
.free-kana-button.learned { border-color: var(--pro-learned-border); background: var(--pro-soft); color: var(--pro-text-accent); cursor: pointer; font-weight: 850; }
.free-kana-button:disabled { opacity: .42; }
.practice-panel { display: grid; justify-items: center; gap: 12px; margin-top: 18px; }
.practice-panel[hidden] { display: none; }
.practice-heading { margin: 0; color: var(--pro-text-accent); font-size: 34px; }
.free-writing-canvas { width: min(100%, 360px); aspect-ratio: 1; border: 1px solid var(--pro-bd); border-radius: 20px; background: var(--pro-canvas); touch-action: none; box-shadow: inset 0 0 32px var(--pro-canvas-shadow); }
.practice-actions, .vocab-actions, .record-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
.practice-status, .vocab-status { min-height: 1.5em; margin: 0; color: var(--pro-text-accent); font-weight: 750; text-align: center; }
.vocab-list { display: grid; gap: 12px; }
.vocab-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.vocab-jp { margin: 0; font-size: 28px; }
.vocab-meta { margin: 5px 0 0; color: var(--pro-tx2); }
.vocab-actions button { min-height: 44px; }
.vocab-activity { grid-column: 1 / -1; display: grid; gap: 10px; border-top: 1px solid var(--pro-bd); padding-top: 12px; }
.quiz-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.practice-mode-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.practice-mode-choices button, .quiz-choices button, .audio-quiz-option button { min-width: 0; min-height: 46px; }
.audio-quiz-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.audio-quiz-option { display: grid; gap: 6px; min-width: 0; border: 1px solid var(--pro-bd); border-radius: 14px; background: var(--pro-card); padding: 8px; }
.answer-correct { border-color: var(--pro-learned-border) !important; background: var(--pro-soft) !important; color: var(--pro-text-accent) !important; }
.answer-wrong { border-color: var(--red) !important; background: var(--pro-error-soft) !important; }
.vocab-build-output { min-height: 64px; display: grid; place-items: center; border: 1px dashed var(--pro-bd); border-radius: 14px; background: var(--pro-canvas); color: var(--pro-text-accent); font-size: 30px; font-weight: 850; letter-spacing: .12em; }
.vocab-kana-pool { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vocab-kana-tile { min-width: 48px; min-height: 48px; border: 1px solid var(--pro-bd); border-radius: 12px; background: var(--pro-control); color: var(--pro-text-accent); font-size: 23px; font-weight: 850; }
.vocab-build-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.quiz-replay-answer { justify-self: center; }
.record-hold { min-height: 58px; touch-action: none; }
.home-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.home-tool-link { display: flex; min-height: 58px; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--pro-bd); border-radius: 16px; background: var(--pro-control); color: var(--pro-text-accent); font-weight: 850; text-decoration: none; }
@media (max-width: 420px) {
  .tool-shell { width: calc(100% - 28px); padding-top: 20px; }
  .tool-card { padding: 18px 14px; }
  .free-kana-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .free-kana-button { min-height: 48px; padding: 2px; font-size: 21px; }
  .vocab-card { grid-template-columns: 1fr; }
  .vocab-activity { grid-column: 1; }
  .audio-quiz-choices, .practice-mode-choices { grid-template-columns: 1fr; }
  .vocab-build-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vocab-build-actions .primary-button { grid-column: 1 / -1; }
  .home-tools { grid-template-columns: 1fr; }
  .tool-header { flex-wrap: wrap; }
  .tool-header .daily-slogan { order: 3; flex-basis: 100%; margin-top: 0; }
  .tool-header .theme-toggle-button { order: 2; }
  .tool-header .header-sign-out { order: 2; }
  .tool-header .day-pill { order: 2; }
}