/*!
 * 16 · 日语五十音图 —— 独立设计：和纸练习册 / 田字格
 * 藏青 + 朱红，方格表、描红十字格、圆角小卡片；四组表用标签切换。
 */
.vx.vx-16 {
    --vx-accent: #293f76;
    --vx-accent-2: #44619c;
    --vx-accent-soft: #e7ecf7;
    --vx-accent-ink: #ffffff;
    --vx-bg: #f5f2ea;
    --vx-surface: #fffdf7;
    --vx-surface-2: #f9f6ee;
    --vx-surface-3: #efe9dc;
    --vx-line: #ded6c4;
    --vx-line-2: #ebe4d5;
    --vx-ink: #232632;
    --vx-ink-2: #50566a;
}
:root[data-theme="dark"] .vx.vx-16 {
    --vx-accent: #9db4ee;
    --vx-accent-2: #b8c8f4;
    --vx-accent-soft: #202946;
    --vx-accent-ink: #101a35;
    --vx-bg: #101218;
    --vx-surface: #181b24;
    --vx-surface-2: #1e222d;
    --vx-surface-3: #252a37;
    --vx-line: #303648;
    --vx-line-2: #252a38;
    --vx-ink: #eef0f7;
    --vx-ink-2: #b7bdcf;
}

.vx-16 .kana-hero { grid-template-columns: minmax(0, 1fr) minmax(310px, 360px); gap: 32px; padding-top: 32px; }
.vx-16 .vx-h1 em { color: #b5443a; }
:root[data-theme="dark"] .vx-16 .vx-h1 em { color: #ec8b80; }
.vx-16 .vx-eyebrow { color: #b5443a; }
.vx-16 .vx-chip { border-radius: 2px; }
.vx-16 .vx-feat > i { border-radius: 2px; background: #f7e5e2; color: #b5443a; }
:root[data-theme="dark"] .vx-16 .vx-feat > i { background: #3d2225; color: #ec8b80; }
.vx-16 .kana-actions { display: grid; grid-template-columns: minmax(200px, 1fr) auto auto auto; gap: 8px; margin-top: 20px; align-items: center; }
.vx-16 .kana-actions .vx-input { grid-column: 1 / -1; }
.vx-16 .kana-actions .vx-btn { justify-self: start; }

/* 练习卡 */
.vx-16 .kana-card { border: 1px solid var(--vx-line); border-radius: 3px; background: var(--vx-surface); box-shadow: var(--vx-shadow-lg); }
.vx-16 .kana-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 16px; border-bottom: 2px solid #b5443a; background: var(--vx-surface-2); }
.vx-16 .kana-card-h > b { font-size: 14px; letter-spacing: .1em; }
.vx-16 .kana-card-h > span { font-size: 11.5px; color: #b5443a; font-weight: 750; }
.vx-16 .kana-card-b { padding: 16px; }
.vx-16 .kana-grid-cell {
    display: grid; place-items: center; height: 170px; margin-bottom: 14px; border-radius: 2px;
    background-color: var(--vx-surface-2);
    background-image: linear-gradient(to right, transparent calc(50% - .5px), rgba(180, 68, 58, .35) 50%, transparent calc(50% + .5px)),
        linear-gradient(to bottom, transparent calc(50% - .5px), rgba(180, 68, 58, .35) 50%, transparent calc(50% + .5px));
    border: 1px dashed var(--vx-line);
}
.vx-16 .kana-grid-cell > span { font-family: var(--vx-font-display); font-size: 96px; line-height: 1; font-weight: 600; color: var(--vx-ink); }
.vx-16 .kana-grid-cell.is-trace > span { color: transparent; -webkit-text-stroke: 1.4px var(--vx-faint); }
.vx-16 .kana-card-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.vx-16 .kana-card-meta > div { padding: 7px 8px; border: 1px solid var(--vx-line-2); border-radius: 2px; background: var(--vx-surface-2); text-align: center; }
.vx-16 .kana-card-meta span { display: block; font-size: 10.5px; color: var(--vx-faint); letter-spacing: .08em; }
.vx-16 .kana-card-meta b { display: block; font-size: 21px; }
.vx-16 .kana-strokes { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.vx-16 .kana-strokes > i { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #f7e5e2; color: #b5443a; font: 800 11px/1 var(--vx-font-num); font-style: normal; }
:root[data-theme="dark"] .vx-16 .kana-strokes > i { background: #3d2225; color: #ec8b80; }
.vx-16 .kana-build { padding: 8px 11px; border-left: 3px solid var(--vx-accent); background: var(--vx-accent-soft); border-radius: 0 2px 2px 0; font-size: 12.8px; line-height: 1.75; }
.vx-16 .kana-tip { margin-top: 9px; font-size: 12.5px; line-height: 1.8; color: var(--vx-ink-2); }

/* 标签与表 */
.vx-16 .kana-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0 14px; }
.vx-16 .kana-tab { appearance: none; padding: 8px 15px; border: 1px solid var(--vx-line); border-radius: 2px; background: var(--vx-surface); color: var(--vx-ink-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.vx-16 .kana-tab.is-on { background: var(--vx-accent); border-color: var(--vx-accent); color: var(--vx-accent-ink); }
:root[data-theme="dark"] .vx-16 .kana-tab.is-on { color: #101a35; }
.vx-16 .kana-table { display: grid; gap: 6px; }
.vx-16 .kana-row { display: grid; grid-template-columns: 62px repeat(6, minmax(0, 1fr)); gap: 6px; }
.vx-16 .kana-row.is-head { font-size: 11.5px; font-weight: 800; color: var(--vx-faint); letter-spacing: .08em; }
.vx-16 .kana-row.is-head > div { display: grid; place-items: center; padding: 4px 0; }
.vx-16 .kana-rowlab { display: grid; place-items: center; font-size: 12.5px; font-weight: 800; color: var(--vx-accent); background: var(--vx-accent-soft); border-radius: 2px; }
.vx-16 .kana-cell { display: grid; place-items: center; gap: 1px; padding: 7px 3px; border: 1px solid var(--vx-line); border-radius: 2px; background: var(--vx-surface-2); cursor: pointer; transition: transform .12s, border-color .12s, background .12s; }
.vx-16 .kana-cell:hover { border-color: #b5443a; transform: translateY(-2px); }
.vx-16 .kana-cell.is-active { background: #f7e5e2; border-color: #b5443a; }
:root[data-theme="dark"] .vx-16 .kana-cell.is-active { background: #3d2225; }
.vx-16 .kana-cell.is-empty { cursor: default; border-style: dashed; opacity: .45; }
.vx-16 .kana-cell.is-empty:hover { transform: none; border-color: var(--vx-line); }
.vx-16 .kana-cell > b { font-size: 20px; line-height: 1.2; font-weight: 600; }
.vx-16 .kana-cell > span { font-size: 11px; color: var(--vx-faint); font-family: var(--vx-font-num); }
.vx-16 .kana-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.vx-16 .kana-tile { padding: 10px 8px; text-align: center; border: 1px solid var(--vx-line); border-radius: 2px; background: var(--vx-surface-2); cursor: pointer; }
.vx-16 .kana-tile:hover, .vx-16 .kana-tile.is-active { border-color: #b5443a; background: #f7e5e2; }
:root[data-theme="dark"] .vx-16 .kana-tile:hover, :root[data-theme="dark"] .vx-16 .kana-tile.is-active { background: #3d2225; }
.vx-16 .kana-tile > b { display: block; font-size: 19px; font-weight: 600; }
.vx-16 .kana-tile > span { display: block; font-size: 11px; font-family: var(--vx-font-num); color: var(--vx-faint); }

/* 自测 */
.vx-16 .kana-quiz { border-top: 3px solid #b5443a; }
.vx-16 .kana-quiz-q { display: grid; place-items: center; min-height: 104px; font-size: 62px; font-weight: 600; font-family: var(--vx-font-display); }
.vx-16 .kana-quiz-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.vx-16 .kana-quiz-opts button { padding: 12px 8px; border: 1px solid var(--vx-line); border-radius: 2px; background: var(--vx-surface-2); color: var(--vx-ink); font: 700 15px var(--vx-font-num); cursor: pointer; }
.vx-16 .kana-quiz-opts button:hover { border-color: #b5443a; }
.vx-16 .kana-quiz-opts button.is-right { background: var(--vx-good-soft); border-color: var(--vx-good); }
.vx-16 .kana-quiz-opts button.is-wrong { background: var(--vx-bad-soft); border-color: var(--vx-bad); }

@media (max-width: 760px) {
    .vx-16 .kana-hero { grid-template-columns: 1fr; }
    .vx-16 .kana-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vx-16 .kana-actions .vx-btn { width: 100%; }
    .vx-16 .kana-row { grid-template-columns: 46px repeat(6, minmax(0, 1fr)); }
    .vx-16 .kana-cell > b { font-size: 16px; }
    .vx-16 .kana-quiz-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}