/* ============================================================
   TypeNova Product Refresh — Calm Focus Edu OS
   Scope: admin.html / practice.html / ranktest.html / certification.html
   ============================================================ */

:root {
  --tn-primary: #2F5BFF;
  --tn-primary-dark: #1638B8;
  --tn-primary-light: #5274FF;
  --tn-accent: #00BFA5;
  --tn-accent-dark: #089887;
  --tn-warning: #F59E0B;
  --tn-danger: #E5484D;
  --tn-success: #16A34A;

  --tn-bg: #F6F8FC;
  --tn-bg-2: #EEF3F8;
  --tn-surface: #FFFFFF;
  --tn-surface-2: #F9FBFE;
  --tn-surface-3: #EEF3F8;
  --tn-border: #D8E0EC;
  --tn-border-subtle: #E7EDF5;

  --tn-text: #172033;
  --tn-text-sub: #5E6C84;
  --tn-text-muted: #7C8AA3;
  --tn-text-on-dark: #172033;

  --tn-font-heading: 'Noto Sans JP', 'Inter', sans-serif;
  --tn-font-body: 'Noto Sans JP', 'Inter', sans-serif;
  --tn-font-mono: 'JetBrains Mono', 'SFMono-Regular', monospace;

  --tn-radius-sm: 6px;
  --tn-radius-md: 8px;
  --tn-radius-lg: 12px;
  --tn-radius-xl: 16px;

  --tn-shadow-sm: 0 1px 2px rgba(23, 32, 51, 0.05);
  --tn-shadow-md: 0 10px 28px rgba(23, 32, 51, 0.08);
  --tn-shadow-lg: 0 22px 54px rgba(23, 32, 51, 0.12);
  --tn-shadow-glow: 0 0 0 4px rgba(47, 91, 255, 0.12);
  --tn-shadow-teal: 0 0 0 4px rgba(0, 191, 165, 0.12);

  --tn-grad-primary: linear-gradient(135deg, #2F5BFF 0%, #1638B8 100%);
  --tn-grad-accent: linear-gradient(135deg, #00BFA5 0%, #2F5BFF 100%);
  --tn-grad-hero: linear-gradient(180deg, #FFFFFF 0%, #EEF3F8 100%);
  --tn-grad-card: linear-gradient(180deg, #FFFFFF 0%, #F9FBFE 100%);
  --tn-grad-surface: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,248,252,0.98));
}

html {
  letter-spacing: 0;
}

body {
  color: var(--tn-text);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72), rgba(246,248,252,0.94)),
    radial-gradient(circle at 12% 0%, rgba(47,91,255,0.10), transparent 28rem),
    radial-gradient(circle at 90% 12%, rgba(0,191,165,0.10), transparent 26rem),
    var(--tn-bg);
}

body::before {
  opacity: 0.42;
}

h1, h2, h3, h4, h5, h6,
.tn-logo-name,
.header-logo,
.cert-brand,
.tn-adm-logo,
.tn-sec-title,
.start-title,
.result-title {
  color: var(--tn-text);
}

button,
.tn-btn,
.action-btn,
.btn,
.tn-result-btn,
.start-btn,
.mode-card {
  border-radius: var(--tn-radius-md);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
.mode-card:focus-visible {
  outline: 3px solid rgba(47,91,255,0.22);
  outline-offset: 2px;
}

.tn-btn,
.action-btn,
.btn,
.tn-result-btn {
  background: var(--tn-surface);
  border: 1px solid var(--tn-border);
  color: var(--tn-text);
  box-shadow: var(--tn-shadow-sm);
}

.tn-btn:hover,
.action-btn:hover,
.btn:hover,
.tn-result-btn:hover {
  border-color: rgba(47,91,255,0.42);
  color: var(--tn-primary-dark);
  background: #F9FBFF;
  transform: translateY(-1px);
}

.tn-btn--primary,
.tn-btn-primary,
.action-btn.primary,
.btn.primary,
.tn-result-btn--primary,
.start-btn {
  background: var(--tn-primary);
  border-color: var(--tn-primary);
  color: #fff;
  box-shadow: 0 10px 24px rgba(47,91,255,0.18);
}

.tn-btn--primary:hover,
.tn-btn-primary:hover,
.action-btn.primary:hover,
.btn.primary:hover,
.tn-result-btn--primary:hover,
.start-btn:hover {
  background: var(--tn-primary-dark);
  border-color: var(--tn-primary-dark);
  color: #fff;
}

.tn-btn--danger {
  border-color: rgba(229,72,77,0.32);
  color: var(--tn-danger);
}

.tn-btn--danger:hover {
  background: rgba(229,72,77,0.08);
  border-color: rgba(229,72,77,0.5);
  color: #B4232A;
}

.tn-input,
.tn-select,
.tn-search,
.name-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select {
  background: var(--tn-surface);
  border: 1px solid var(--tn-border);
  color: var(--tn-text);
  border-radius: var(--tn-radius-md);
  box-shadow: var(--tn-shadow-sm);
}

.tn-input:focus,
.tn-select:focus,
.tn-search:focus,
.name-input:focus,
input:focus,
select:focus {
  border-color: var(--tn-primary);
  box-shadow: 0 0 0 4px rgba(47,91,255,0.13);
}

/* Shared student typing surfaces */
.tn-header,
header {
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid var(--tn-border);
  box-shadow: 0 1px 0 rgba(23,32,51,0.03);
}

.tn-logo-mark,
.header-logo-mark,
.cert-brand-mark,
.tn-adm-logo-mark {
  background: var(--tn-primary);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(47,91,255,0.18);
}

.tn-header-center,
.header-module,
.tn-mastery-label,
.gauge-top,
.tn-session-footer-label,
.diag-label,
.tn-stat-card-label,
.timer-label {
  color: var(--tn-text-sub);
}

#diffLabel,
#sessionTimer,
.header-status,
.diag-value,
.tn-stat-card-value,
.timer-value,
.protocol-val,
.tn-combo-mode {
  color: var(--tn-primary-dark);
}

.status-dot {
  background: var(--tn-accent);
  box-shadow: 0 0 0 4px rgba(0,191,165,0.12);
}

.tn-mastery-bar,
.tn-session-footer,
footer {
  background: rgba(255,255,255,0.72);
  border-color: var(--tn-border);
}

.tn-mastery-track,
.tn-stat-track,
.gauge-bar,
.accuracy-bar-wrap,
.tn-rank-bar-track {
  background: #E7EDF5;
}

.tn-mastery-fill,
.tn-stat-fill,
.gauge-fill,
.accuracy-bar,
.tn-rank-bar-fill {
  background: linear-gradient(90deg, var(--tn-primary), var(--tn-accent));
  box-shadow: none;
}

.tn-game-layout,
.main-layout {
  max-width: 1240px;
}

.tn-telemetry-col,
.telemetry-col {
  gap: 12px;
}

.tn-stat-card,
.telemetry-card,
.tn-combo-ring,
.protocol-card,
.typing-area,
.result-card,
.start-card,
.mode-card,
#questionBox,
.tn-question-box {
  background: var(--tn-surface);
  border: 1px solid var(--tn-border);
  box-shadow: var(--tn-shadow-md);
}

.tn-stat-card,
.telemetry-card {
  padding: 16px 18px;
  border-radius: var(--tn-radius-lg);
}

.tn-stat-card-value,
.diag-value {
  color: var(--tn-text);
  font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.85rem);
}

#telemetryScore,
#telemetryWpm,
#hudCpm,
#hudAcc {
  color: var(--tn-primary-dark) !important;
}

#telemetryMistakes,
.protocol-val.danger {
  color: var(--tn-danger) !important;
}

.tn-combo-ring {
  width: 118px;
  height: 118px;
  border: 1px solid rgba(0,191,165,0.38);
  box-shadow: 0 12px 28px rgba(0,191,165,0.10);
}

.tn-combo-ring::after {
  content: "";
}

.tn-combo-value,
.combo-count {
  color: var(--tn-primary-dark);
}

.tn-question-box,
#questionBox {
  min-height: 300px;
  border-radius: var(--tn-radius-xl);
  box-shadow: 0 18px 48px rgba(23,32,51,0.10);
}

.tn-question-box.fire-mode,
#questionBox.fire-mode {
  border-color: rgba(245,158,11,0.42);
  box-shadow: 0 18px 48px rgba(23,32,51,0.10), 0 0 0 4px rgba(245,158,11,0.10);
}

#questionBox.fire-mode::after {
  content: "FOCUS";
  color: var(--tn-warning);
}

#word,
.kanji-line {
  color: var(--tn-text);
  font-family: 'BIZ UDPGothic', 'Noto Sans JP', sans-serif;
  letter-spacing: 0;
}

#furigana,
.furigana-line {
  color: var(--tn-text-sub);
}

#romaji,
.romaji-line {
  color: var(--tn-text-sub);
  letter-spacing: 0.04em;
}

#word .typed,
#furigana .typed,
#romaji .typed,
.typed,
.romaji-typed {
  color: var(--tn-accent) !important;
  text-shadow: none !important;
}

#word .remaining,
#furigana .remaining,
#romaji .remaining,
.remaining,
.romaji-rest {
  color: #8A97AC;
}

.tn-key,
.key {
  background: var(--tn-surface);
  border-color: var(--tn-border);
  color: var(--tn-text-sub);
  box-shadow: var(--tn-shadow-sm);
}

.tn-key.key-next,
.key-next {
  background: var(--tn-primary);
  border-color: var(--tn-primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(47,91,255,0.12);
}

.tn-start-overlay,
#startOverlay,
.tn-result-overlay,
.countdown-overlay {
  background: rgba(246,248,252,0.96);
  backdrop-filter: blur(16px);
}

.tn-start-overlay-logo img,
#overlayRankLogo,
.tn-rank-icon {
  filter: drop-shadow(0 10px 24px rgba(47,91,255,0.14));
}

.rank-icon--transparentized {
  mix-blend-mode: normal;
}

.tn-start-hint,
.tn-start-cancel,
.start-hint,
.game-hint,
.mode-desc,
.name-note,
.login-hint {
  color: var(--tn-text-sub);
}

.tn-start-prompt,
#startPrompt,
.protocol-header,
.start-tag,
.result-tag {
  color: var(--tn-primary-dark);
  animation: none;
}

.overlay-rank-wrap {
  background: var(--tn-surface);
  border: 1px solid var(--tn-border);
  box-shadow: var(--tn-shadow-md);
}

/* Rank test: restrained exam band */
.main-layout {
  grid-template-columns: minmax(160px, 220px) 1fr minmax(160px, 220px);
  align-items: stretch;
}

.focus-area {
  justify-content: center;
}

.combo-wrap {
  min-height: 42px;
}

.combo-label {
  color: var(--tn-text-sub);
}

/* Certification */
.cert-shell {
  max-width: 1040px;
}

.cert-topbar {
  background: rgba(255,255,255,0.88);
  border-color: var(--tn-border);
  border-radius: var(--tn-radius-lg);
  box-shadow: var(--tn-shadow-sm);
}

.cert-brand-sub,
.cert-link {
  color: var(--tn-text-sub);
}

.start-card {
  border-radius: var(--tn-radius-xl);
  overflow: hidden;
}

.start-card::before {
  background: linear-gradient(90deg, var(--tn-primary), var(--tn-accent));
}

.start-card::after {
  background: radial-gradient(circle, rgba(47,91,255,0.08), transparent 72%);
}

.start-tag,
.result-tag {
  background: rgba(47,91,255,0.08);
  border: 1px solid rgba(47,91,255,0.18);
}

.start-title em {
  color: var(--tn-primary-dark);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.start-sub,
.result-msg,
#resultMsg {
  color: var(--tn-text-sub);
}

.mode-card {
  background: var(--tn-surface);
  border-color: var(--tn-border);
}

.mode-card:hover,
.mode-card.selected {
  background: #F7FAFF;
  border-color: var(--tn-primary);
  box-shadow: 0 0 0 4px rgba(47,91,255,0.10);
  transform: translateY(-1px);
}

.mode-time,
.mode-name,
.grade-letter,
.grade-sub,
.result-title {
  color: var(--tn-text);
}

.mode-card.selected .mode-time,
.grade-letter {
  color: var(--tn-primary-dark);
}

.game-screen {
  background: #101828;
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 24px 54px rgba(16,24,40,0.22);
}

.game-screen .typing-area {
  background: rgba(255,255,255,0.96);
}

.game-screen .kanji-line {
  color: #101828;
}

.game-screen .furigana-line,
.game-screen .romaji-line {
  color: #526071;
}

.result-details .d,
.hud-stat,
.timer-block {
  background: rgba(47,91,255,0.06);
  border: 1px solid rgba(47,91,255,0.12);
  border-radius: var(--tn-radius-md);
}

.paywall-personal,
.paywall-org,
.login-hint,
.save-status {
  background: rgba(0,191,165,0.08);
  border: 1px solid rgba(0,191,165,0.18);
  color: var(--tn-text);
  border-radius: var(--tn-radius-md);
}

/* Menu / myPage screens (index, practiceMenu, rankTestMenu, myPage, results) */
.log-table-container {
  background: var(--tn-surface);
  border-color: var(--tn-border);
}

.back-btn {
  background: rgba(255,255,255,0.9);
  color: var(--tn-text-sub);
}

.back-btn:hover {
  color: var(--tn-primary-dark);
  background: rgba(47,91,255,0.08);
}

/* Settings */
.settings-header {
  background: rgba(255,255,255,0.94);
  border-bottom: 1px solid var(--tn-border);
}

.preview-box {
  background: var(--tn-surface-3);
  border-color: var(--tn-border);
}

/* アクセント色ボタンは style 属性で文字色が直書きされており、
   選択中(青背景)で文字が同化するため白を強制する */
.setting-radio-btn.active {
  color: #fff !important;
}

/* Admin */
.tn-adm-header {
  background: rgba(255,255,255,0.94);
  border-bottom: 1px solid var(--tn-border);
  box-shadow: 0 1px 0 rgba(23,32,51,0.04);
}

.tn-adm-body {
  background: var(--tn-bg);
}

.tn-adm-sidebar {
  background: var(--tn-surface);
  border-right: 1px solid var(--tn-border);
  box-shadow: 1px 0 0 rgba(23,32,51,0.02);
}

.tn-sidebar-item {
  color: var(--tn-text-sub);
  border: 1px solid transparent;
}

.tn-sidebar-item:hover,
.tn-sidebar-item.active {
  background: var(--tn-surface-3);
  color: var(--tn-primary-dark);
  border-color: rgba(47,91,255,0.10);
}

.tn-sidebar-stat,
.tn-settings-card,
.tn-tbl-wrap,
.tn-chart-card,
.tn-stat-mini,
.tn-modal-box,
.tn-rank-card-modal {
  background: var(--tn-surface);
  border: 1px solid var(--tn-border);
  box-shadow: var(--tn-shadow-sm);
}

.tn-adm-main {
  padding: 24px;
}

.tn-stats-bar {
  gap: 12px;
}

.tn-stats-bar .tn-stat-card {
  min-width: 132px;
  padding: 14px 16px;
  border-radius: var(--tn-radius-lg);
}

.tn-stat-card-num,
.tn-sidebar-stat-num,
.tn-stat-mini-val {
  color: var(--tn-primary-dark);
}

.tn-tbl-toolbar {
  background: rgba(246,248,252,0.72);
  border-bottom: 1px solid var(--tn-border);
}

.tn-tbl-scroll {
  max-height: calc(100vh - 320px);
}

table {
  color: var(--tn-text);
}

th {
  background: #F4F7FB;
  color: var(--tn-text-sub);
  border-bottom: 1px solid var(--tn-border);
}

td {
  color: var(--tn-text);
  border-bottom: 1px solid var(--tn-border-subtle);
}

/* admin.html のカスタム項目モーダルは th に旧ダーク配色が style 属性で直書きされている
   (admin.html:403-407)。インライン指定はリンクCSSでは負けるため !important で救済する */
th[style] {
  background: #F4F7FB !important;
  color: var(--tn-text-sub) !important;
  border-bottom-color: var(--tn-border) !important;
}

tr:hover td {
  background: #F8FAFD;
}

.tn-badge {
  background: rgba(47,91,255,0.09);
  color: var(--tn-primary-dark);
  border: 1px solid rgba(47,91,255,0.12);
}

.tn-badge--gold {
  background: rgba(245,158,11,0.12);
  color: #B7791F;
  border-color: rgba(245,158,11,0.18);
}

.tn-dim,
.tn-feed-meta,
.tn-sec-sub,
.tn-stat-card-lbl,
.tn-sidebar-stat-lbl,
.tn-label,
.tn-chart-title {
  color: var(--tn-text-sub);
}

.tn-modal-bg {
  background: rgba(23,32,51,0.38);
  backdrop-filter: blur(10px);
}

.tn-modal-title,
.tn-settings-card-title,
.tn-plan-name {
  color: var(--tn-text);
}

#pendingSection > div {
  background: rgba(245,158,11,0.09) !important;
  border-color: rgba(245,158,11,0.26) !important;
  box-shadow: var(--tn-shadow-sm);
}

.tn-word-row {
  border-bottom-color: var(--tn-border-subtle);
}

/* Responsive */
@media (max-width: 980px) {
  .tn-game-layout,
  .main-layout {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .tn-telemetry-col,
  .telemetry-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tn-combo-ring {
    width: 100%;
    height: auto;
    min-height: 92px;
    border-radius: var(--tn-radius-lg);
  }

  .tn-session-footer,
  footer {
    padding: 14px 16px;
    flex-wrap: wrap;
    gap: 12px;
  }

  .cert-shell {
    padding: 16px 14px 56px;
  }

  .start-card,
  .result-card {
    padding: 28px 20px;
  }
}

@media (max-width: 720px) {
  .tn-header,
  header,
  .tn-adm-header,
  .cert-topbar {
    min-height: 56px;
    height: auto;
    padding: 10px 14px;
    gap: 10px;
    flex-wrap: wrap;
  }

  .tn-header-center,
  .header-status,
  .header-module {
    order: 3;
    width: 100%;
    justify-content: flex-start;
  }

  .tn-header-right,
  .tn-adm-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .tn-telemetry-col,
  .telemetry-col,
  .result-details,
  .mode-grid {
    grid-template-columns: 1fr;
  }

  .tn-question-box,
  #questionBox,
  .typing-area {
    min-height: 240px;
    padding: 28px 18px;
  }

  #word,
  .kanji-line {
    font-size: clamp(1.7rem, 1.2rem + 5vw, 2.35rem);
  }

  #romaji,
  .romaji-line {
    font-size: clamp(1rem, 0.84rem + 3vw, 1.35rem);
    letter-spacing: 0.02em;
  }

  .tn-adm-main {
    padding: 16px;
  }

  .tn-sec-hd,
  .tn-tbl-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .tn-search {
    max-width: none;
  }

  .tn-word-row {
    grid-template-columns: 28px 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}