/* Page-specific CSS for mode-atlas-test-page.css. Shared repeated rules moved to mode-atlas-page-shared.css. */


body {
        margin: 0;
        min-height: 100vh;
        font-family: var(--ma-font-ui);
        color: var(--ma-text);
        background: var(--ma-page-bg-results);
        padding: 0 22px 22px;
    }

html {
        background: var(--ma-app-bg);
    }

body.results-page {
        min-height: 100vh;
        background: var(--ma-page-bg-results);
        isolation: isolate;
    }

body.results-page::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: var(--ma-page-bg-results);
    }

.shell {
        width: min(var(--ma-content-wide), 100%);
        margin: 0 auto;
    }

.glass {
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .hero,
    .card {
        --ma-card-border:var(--ma-border);
        --ma-card-bg:var(--ma-surface);
        --ma-card-shadow:var(--ma-shadow-soft);
    }

.hero {
        --ma-card-radius:var(--ma-page-card-radius-tablet);
        --ma-card-bg:
            radial-gradient(circle at top left, color-mix(in srgb,var(--ma-results) 12%,transparent), transparent 32%),
            var(--ma-surface);
        padding:22px 24px;
        margin-bottom: 18px;
        overflow:hidden;
        position:relative;
    }

.hero::before,
    .hero::after {
        content: "";
        position: absolute;
        border-radius: 999px;
        pointer-events: none;
        filter: blur(8px);
        opacity: 0.8;
    }

.hero::before {
        width: 200px;
        height: 200px;
        top: -70px;
        right: -50px;
        background: radial-gradient(circle, color-mix(in srgb,var(--ma-results) 18%,transparent), transparent 68%);
    }

.hero::after {
        width: 180px;
        height: 180px;
        bottom: -70px;
        left: -40px;
        background: radial-gradient(circle, color-mix(in srgb,var(--ma-text) 6%,transparent), transparent 70%);
    }

.hero-grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: 20px;
        align-items: stretch;
    }

.hero-kicker {
        --ma-pill-bg:var(--ma-results-soft);
        --ma-pill-border:rgba(203,163,74,0.30);
        --ma-pill-color:#ffe2a6;
        gap:8px;
        padding:7px 12px;
        font-size:10px;
        font-weight:800;
        letter-spacing:.08em;
        text-transform:uppercase;
        margin-bottom:14px;
    }

h1 {
        margin: 0 0 10px;
        font-size: 38px;
        line-height: 0.98;
        letter-spacing: -0.03em;
    }

.hero-copy {
        color: #d7d7d7;
        font-size: 16px;
        line-height: 1.65;
        max-width: 760px;
        margin-bottom: 18px;
    }

.hero-outline {
        display: grid;
        gap: 10px;
        color: var(--ma-muted);
        font-size: 14px;
        line-height: 1.55;
    }

.hero-side {
        display: grid;
        gap: 14px;
    }

.mini-panel {
        --ma-card-radius: var(--ma-radius-card);
        --ma-card-bg: var(--ma-surface-inset);
        --ma-card-border: var(--ma-border);
        padding: 18px;
    }

.mini-label {
        --ma-kicker-color:var(--ma-muted);
        --ma-kicker-size:12px;
        --ma-kicker-spacing:.12em;
        margin-bottom:10px;
    }

.duo-grid {
        --ma-stat-columns: 2;
        --ma-stat-gap: 10px;
        --ma-stat-bg: color-mix(in srgb,var(--ma-card-2) 82%,transparent);
        --ma-stat-padding: 12px;
        --ma-stat-radius: 14px;
        --ma-stat-label-size: 12px;
        --ma-stat-label-weight: 400;
        --ma-stat-value-size: 24px;
    }

.back-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 14px;
        color: #d9d9d9;
        text-decoration: none;
        font-size: 14px;
        font-weight: 700;
    }

.back-link:hover { color: white; }

/* Actionable review and progress trend sit directly after the page introduction. */
.results-kicker{--ma-kicker-color:var(--ma-results);margin-bottom:6px;}
.results-guidance{
        display:grid;
        grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
        gap:14px;
        margin-bottom:18px;
    }
.results-guidance-card,
.results-trend-card{
        --ma-card-shadow:var(--ma-shadow-soft);
        padding:18px;
    }
.results-guidance-card{
        display:grid;
        grid-template-columns:auto minmax(0,1fr) auto;
        gap:16px;
        align-items:center;
        --ma-card-bg:
          linear-gradient(135deg,color-mix(in srgb,var(--ma-results) 8%,transparent),transparent 72%),
          var(--ma-surface-soft);
    }
.results-guidance-card.reading{--ma-card-border:color-mix(in srgb,var(--ma-reading) 32%,var(--ma-border));}
.results-guidance-card.writing{--ma-card-border:color-mix(in srgb,var(--ma-writing) 32%,var(--ma-border));}
.results-guidance-icon{
        width:48px;height:48px;display:grid;place-items:center;
        border:1px solid color-mix(in srgb,var(--ma-results) 28%,var(--ma-border));
        border-radius:var(--ma-radius-md);
        color:var(--ma-results);
        background:var(--ma-results-soft);
    }
.results-guidance-copy{min-width:0;}
.results-guidance-copy .ma-kicker{--ma-kicker-color:var(--ma-results);}
.results-guidance-copy h2,.results-trend-head h2{margin:5px 0 5px;color:var(--ma-text-strong);font-family:var(--ma-font-display);font-size:1.12rem;letter-spacing:-.02em;}
.results-guidance-copy p,.results-trend-note{margin:0;color:var(--ma-muted);font-size:.86rem;line-height:1.5;}
.results-focus-kana{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.results-focus-kana__item{--ma-pill-bg:var(--ma-surface-inset);--ma-pill-border:var(--ma-border);font-family:var(--ma-font-jp);font-size:.95rem;font-weight:900;}
.results-guidance-actions{--ma-action-gap:8px;justify-content:flex-end;}
.results-guidance-card.reading .results-guidance-actions .ma-button--primary{
        --ma-button-bg:linear-gradient(180deg,color-mix(in srgb,var(--ma-reading) 30%,var(--ma-card-2)),color-mix(in srgb,var(--ma-reading) 17%,var(--ma-card-3)));
        --ma-button-border:color-mix(in srgb,var(--ma-reading) 50%,var(--ma-border));
    }
.results-trend-card{display:grid;gap:12px;}
.results-trend-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.results-trend-head .ma-kicker{--ma-kicker-color:var(--ma-results);}
.results-trend-head strong{color:var(--ma-results);font-size:.92rem;white-space:nowrap;}
.results-trend-card .ma-trend{min-height:82px;}
.results-trend-empty{grid-column:1 / -1;align-self:center;color:var(--ma-muted);font-size:.82rem;text-align:center;}

.stage {
        display: grid;
        gap: 18px;
    }

.card {
        --ma-card-radius:var(--ma-radius-card);
        padding:20px;
        min-width:0;
    }

.card-head {
        --ma-section-head-gap: 12px;
        margin-bottom: 16px;
    }

.card-title {
        margin: 0 0 6px;
        font-size: 24px;
    }

.card-sub {
        color: var(--ma-muted);
        font-size: 14px;
        line-height: 1.5;
    }

.accent {
        width: 12px;
        height: 12px;
        border-radius: 999px;
        margin-top: 8px;
        flex: 0 0 auto;
        background: var(--ma-results);
        box-shadow: 0 0 16px color-mix(in srgb,var(--ma-results) 42%,transparent);
    }

.summary-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
        align-items: start;
    }

.summary-left {
        display: grid;
        gap: 14px;
    }

.mega-score {
        --ma-card-radius: 22px;
        --ma-card-bg:
            radial-gradient(circle at top right, color-mix(in srgb,var(--ma-results) 16%,transparent), transparent 42%),
            var(--ma-surface-soft);
        --ma-card-border: color-mix(in srgb,var(--ma-results) 28%,var(--ma-border));
        padding: 18px;
    }

.mega-kicker {
        --ma-kicker-color: var(--ma-results);
        --ma-kicker-size: 12px;
        --ma-kicker-spacing: .12em;
        font-weight: 800;
        margin-bottom: 8px;
    }

.mega-value {
        font-size: 70px;
        font-weight: 900;
        line-height: 0.92;
        letter-spacing: -0.04em;
    }

.mega-sub {
        color: var(--ma-text-soft);
        font-size: 14px;
        line-height: 1.55;
        max-width: 42ch;
    }

.meta-grid {
        --ma-stat-columns: 4;
        --ma-stat-gap: 10px;
        --ma-stat-bg: color-mix(in srgb,var(--ma-card-2) 82%,transparent);
        --ma-stat-padding: 12px;
        --ma-stat-radius: 14px;
        --ma-stat-label-size: 12px;
        --ma-stat-label-weight: 400;
        --ma-stat-value-size: 24px;
        margin-top: 16px;
    }

.breakdown-grid {
        display: grid;
        gap: 10px;
    }
.results-layout {
        display: grid;
        grid-template-columns: minmax(260px,.72fr) minmax(0,1.28fr);
        gap: 18px;
        align-items: start;
    }

.tests-grid {
        display: grid;
        gap: 12px;
    }

@media (min-width: 981px) {
    .results-list-card .tests-grid{max-height:min(780px,calc(100vh - 210px));overflow:auto;padding-right:4px;overscroll-behavior:contain;}
    .results-detail-card{position:sticky;top:calc(var(--ma-nav-sticky-offset,12px) + 82px);}
}

.test-tile {
        width: 100%;
        text-align: left;
        padding: 16px;
        border-radius: 18px;
        color: var(--ma-text);
        cursor: pointer;
        transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    }

.test-tile:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 26px rgba(0,0,0,0.22);
    }

.test-tile.reading {
        background: linear-gradient(180deg, rgba(20,35,24,0.96), rgba(16,18,16,0.96));
        border: 1px solid rgba(103,215,139,0.18);
    }

.test-tile.writing {
        background: linear-gradient(180deg, rgba(19,28,43,0.96), rgba(16,18,22,0.96));
        border: 1px solid rgba(102,168,255,0.18);
    }

.test-tile.average {
        background: linear-gradient(180deg, rgba(49,38,16,0.96), rgba(19,18,16,0.96));
        border: 1px solid rgba(203,163,74,0.22);
    }

.test-tile.active.reading {
        border-color: rgba(103,215,139,0.42);
        box-shadow: inset 0 0 0 1px rgba(103,215,139,0.16);
    }

.test-tile.active.writing {
        border-color: rgba(102,168,255,0.42);
        box-shadow: inset 0 0 0 1px rgba(102,168,255,0.16);
    }

.test-tile.active.average {
        border-color: rgba(203,163,74,0.40);
        box-shadow: inset 0 0 0 1px rgba(203,163,74,0.14);
    }

.test-tile-top {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: flex-start;
        margin-bottom: 12px;
    }

.test-title {
        font-size: 18px;
        font-weight: 800;
        margin-bottom: 5px;
    }

.test-sub {
        color: var(--ma-muted);
        font-size: 13px;
        line-height: 1.45;
    }

.test-score {
        font-size: 28px;
        font-weight: 900;
        line-height: 1;
        color: #fff;
    }

.tag-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

.tag {
        --ma-pill-bg: rgba(255,255,255,0.05);
        --ma-pill-border: rgba(255,255,255,0.08);
        --ma-pill-color: var(--ma-text);
        gap: 6px;
        font-size: 11px;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

.tag.reading { --ma-pill-bg: var(--ma-reading-soft); --ma-pill-color: #bdf3cf; }

.tag.writing { --ma-pill-bg: var(--ma-writing-soft); --ma-pill-color: #d8e8ff; }

.tag.gold { --ma-pill-bg: var(--ma-results-soft); --ma-pill-color: #ffe2a6; }

.detail-panel {
        --ma-card-radius:20px;
        --ma-card-bg:var(--ma-surface-inset);
        --ma-card-border:var(--ma-border);
        padding:18px;
        min-height:100%;
    }

.detail-head {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: flex-start;
        margin-bottom: 16px;
    }

.detail-title {
        font-size: 24px;
        font-weight: 800;
        margin-bottom: 6px;
    }

.detail-sub {
        color: var(--ma-muted);
        font-size: 14px;
        line-height: 1.55;
    }

.detail-controls {
        display:flex;
        justify-content:flex-end;
        gap:10px;
        margin-bottom:12px;
    }

.inline-toggle-btn {
        --ma-button-bg: rgba(255,255,255,0.04);
        --ma-button-bg-hover: rgba(203,163,74,0.09);
        --ma-button-border: rgba(255,255,255,0.10);
        --ma-button-color: var(--ma-text);
        --ma-button-radius:12px;
        --ma-button-font-weight:700;
        font-size:13px;
    }
.inline-toggle-btn.active {
        --ma-button-bg:rgba(203,163,74,0.15);
        --ma-button-bg-hover:rgba(203,163,74,0.15);
        --ma-button-border:rgba(203,163,74,0.35);
        --ma-button-border-hover:rgba(203,163,74,0.35);
        --ma-button-color:#ffe2a6;
    }

.detail-metrics {
        --ma-stat-columns: 4;
        --ma-stat-gap: 10px;
        --ma-stat-bg: rgba(255,255,255,0.045);
        --ma-stat-padding: 12px;
        --ma-stat-radius: 14px;
        --ma-stat-label-size: 12px;
        --ma-stat-label-weight: 400;
        --ma-stat-value-size: 24px;
        margin-bottom: 16px;
    }

.heatmap-wrap {
        display: grid;
        gap: 12px;
    }

.heatmap-title {
        font-size: 14px;
        font-weight: 700;
        color: #dfdfdf;
    }

.heatmap {
        
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
    }

.cell {
        min-height: 82px;
        border-radius: 12px;
        display: grid;
        grid-template-rows: 1fr auto;
        justify-items: center;
        align-items: center;
        padding: 8px 6px;
        font-weight: 700;
        border: 1px solid rgba(255,255,255,0.08);
        cursor: pointer;
        user-select: none;
        position: relative;
        transition: transform 0.14s ease, border-color 0.14s ease;
    }

.cell:hover,
    .cell.active {
        transform: translateY(-1px);
        border-color: rgba(203,163,74,0.42);
        box-shadow: 0 0 0 1px rgba(203,163,74,0.14);
    }

.cell-char {
        font-size: 25px;
        line-height: 1;
    }

.cell-time {
        font-size: 11px;
        color: rgba(255,255,255,0.82);
        line-height: 1;
    }

.legend {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 14px;
        color: var(--ma-muted);
        font-size: 12px;
        margin-top: 6px;
    }

.legend-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

.legend-box {
        width: 12px;
        height: 12px;
        border-radius: 4px;
        border: 1px solid rgba(255,255,255,0.08);
    }

.kana-detail {
        margin-top: 14px;
        border-radius: 16px;
        padding: 14px;
        background: rgba(255,255,255,0.035);
        border: 1px solid rgba(255,255,255,0.07);
    }

.kana-detail.empty {
        color: var(--ma-muted);
        text-align: center;
        min-height: 96px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.kana-grid {
        display: grid;
        grid-template-columns: 96px 1fr;
        gap: 14px;
        align-items: start;
    }

.kana-big {
        border-radius: 16px;
        padding: 14px;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        text-align: center;
    }

.kana-big .char {
        font-size: 44px;
        line-height: 1;
        margin-bottom: 8px;
    }

.kana-big .romaji {
        color: var(--ma-muted);
        font-size: 13px;
        font-weight: 700;
    }

.kana-time-only {
        padding: 12px;
        border-radius: 14px;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.07);
        display: grid;
        gap: 6px;
    }

.kana-time-only .label {
        color: var(--ma-muted);
        font-size: 12px;
    }

.kana-time-only .value {
        font-size: 24px;
        font-weight: 800;
    }

@media (max-width: 1080px) {
        .hero-grid,
        .summary-grid,
        .results-layout {
            grid-template-columns: 1fr;
        }
    }

@media (max-width: 760px) {
        body { padding: 12px; }
        .hero, .card { padding: 18px; }
        h1 { font-size: 36px; }
        .meta-grid,
        .detail-metrics,
        .duo-grid { --ma-stat-columns: 2; }
        .mega-inline-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .kana-grid { grid-template-columns: 1fr; }
        .kana-big { max-width: 110px; }
        .detail-controls { justify-content: stretch; }
        .inline-toggle-btn { width: 100%; }
    }

.mega-score.reading {
        --ma-card-bg:
            radial-gradient(circle at top right, rgba(103,215,139,0.18), transparent 42%),
            linear-gradient(180deg, rgba(20,35,24,0.96), rgba(18,18,18,0.96));
        --ma-card-border: rgba(103,215,139,0.25);
    }

.mega-score.writing {
        --ma-card-bg:
            radial-gradient(circle at top right, rgba(102,168,255,0.20), transparent 42%),
            linear-gradient(180deg, rgba(18,28,42,0.96), rgba(18,18,18,0.96));
        --ma-card-border: rgba(102,168,255,0.25);
    }

.mega-score.average {
        --ma-card-bg:
            radial-gradient(circle at top right, rgba(203,163,74,0.18), transparent 42%),
            linear-gradient(180deg, rgba(42,33,13,0.96), rgba(18,18,18,0.96));
        --ma-card-border: rgba(203,163,74,0.25);
    }








.result-kana-dialog {
        display: grid;
        grid-template-columns: 96px 1fr;
        gap: 14px;
        align-items: start;
    }

.result-kana-card {
        --ma-card-radius: 16px;
        --ma-card-bg: rgba(255,255,255,0.04);
        --ma-card-border: rgba(255,255,255,0.08);
        padding: 14px;
        text-align: center;
    }

.result-kana-card .char {
        font-size: 44px;
        line-height: 1;
        margin-bottom: 8px;
    }

.result-kana-card .romaji {
        color: var(--ma-muted);
        font-size: 13px;
        font-weight: 700;
    }

.result-kana-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

.result-kana-stat {
        --ma-stat-bg: rgba(255,255,255,0.04);
        --ma-stat-padding: 12px;
        --ma-stat-radius: 14px;
        --ma-stat-label-size: 12px;
        --ma-stat-label-gap: 6px;
        --ma-stat-label-weight: 400;
        --ma-stat-value-size: 22px;
    }



.row-performance-section {
        display: grid;
        gap: 8px;
    }

.row-performance-toolbar {
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:12px;
        margin-bottom:8px;
        flex-wrap:wrap;
    }

.row-view-toggle {
        display:inline-flex;
        align-items:center;
        gap:0;
        padding:3px;
        border-radius:999px;
        background:rgba(255,255,255,0.04);
        border:1px solid rgba(255,255,255,0.08);
    }

.row-view-btn {
        appearance:none;
        border:none;
        background:transparent;
        color:var(--ma-muted);
        font-size:12px;
        font-weight:800;
        padding:8px 12px;
        border-radius:999px;
        cursor:pointer;
    }

.row-view-btn.active {
        background:rgba(203,163,74,0.16);
        color:#ffe2a6;
    }

.row-performance-head {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: center;
        font-size: 14px;
        font-weight: 700;
        color: #e7e7e7;
    }

.row-doughnut-strip {
        
        grid-template-columns: repeat(5, minmax(0, 1fr));
        
        
    }

.row-doughnut-card {
        
        
        padding:8px 6px;
        
        
    }

.row-doughnut-card:hover,
    .row-doughnut-card.active {
        transform: translateY(-1px);
        border-color: rgba(203,163,74,0.34);
        box-shadow: 0 0 0 1px rgba(203,163,74,0.12);
    }

.row-doughnut-card.best {
        border-color: rgba(103,215,139,0.75);
        box-shadow: inset 0 0 0 2px rgba(103,215,139,0.22), 0 0 18px rgba(103,215,139,0.18);
        background: linear-gradient(180deg, rgba(103,215,139,0.08), rgba(255,255,255,0.035));
    }

.row-doughnut-card.worst {
        border-color: rgba(255,123,123,0.75);
        box-shadow: inset 0 0 0 2px rgba(255,123,123,0.22), 0 0 18px rgba(255,123,123,0.18);
        background: linear-gradient(180deg, rgba(255,123,123,0.08), rgba(255,255,255,0.035));
    }

.row-doughnut-label {
        font-size: 12px;
        margin-top: 8px;
        color: #ddd;
        line-height: 1.25;
        min-height: 12px;
        
    }

.row-doughnut-value {
        font-size: 12px;
        color: #aaa;
        font-weight: 700;
    }

.row-tooltip {
        margin-top: 6px;
        padding: 10px 12px;
        border-radius: 14px;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        color: #ddd;
        font-size: 12px;
        line-height: 1.45;
        min-height: 56px;
    }

.row-grid {
        display: grid;
        gap: 10px;
    }

.row-bar {
        display: grid;
        grid-template-columns: 58px 1fr 52px;
        gap: 10px;
        align-items: center;
    }

.row-name {
        font-size: 13px;
        font-weight: 800;
        color: #f1f1f1;
        letter-spacing: 0.04em;
    }

.row-track {
        height: 12px;
        border-radius: 999px;
        background: rgba(255,255,255,0.07);
        overflow: hidden;
        position: relative;
    }

.row-fill {
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, rgba(255,255,255,0.18), var(--ma-results));
        min-width: 6px;
    }

.row-value {
        font-size: 12px;
        color: var(--ma-muted);
        text-align: right;
        font-weight: 700;
    }

.mega-inline-summary {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px;
        margin-top: 16px;
    }

.mega-inline-card {
        --ma-stat-bg: rgba(255,255,255,0.045);
        --ma-stat-padding: 12px;
        --ma-stat-radius: 14px;
        --ma-stat-label-size: 12px;
        --ma-stat-label-weight: 400;
        --ma-stat-value-size: 20px;
        --ma-stat-value-line: 1.1;
    }

.row-performance {
        display: grid;
        gap: 14px;
        position: relative;
    }

.row-doughnut-strip {
        display: grid;
        grid-template-columns: repeat(10, minmax(0, 1fr));
        gap: 10px;
        padding: 4px 2px 6px;
    }

.row-doughnut-card {
        --ma-card-radius:16px;
        --ma-card-bg:rgba(255,255,255,0.035);
        --ma-card-border:rgba(255,255,255,0.07);
        min-width:0;
        text-align:center;
        padding:7px 5px;
        cursor:pointer;
        position:relative;
    }

.row-doughnut-label {
        font-size: 18px;
        margin-top: 6px;
        color: #f3f3f3;
        line-height: 1.1;
        min-height: 22px;
        white-space: normal;
        font-weight: 800;
    }

.row-doughnut-value {
        display: none;
    }

.row-tooltip-overlay {
        position: absolute;
        inset: 36px 0 0 0;
        display: none;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        z-index: 5;
    }

.row-tooltip-overlay.show {
        display: flex;
    }

.row-tooltip-card {
        min-width: 220px;
        max-width: 300px;
        padding: 14px 16px;
        border-radius: 16px;
        background: var(--ma-surface-strong, rgba(18,18,18,0.96));
        border: 1px solid rgba(255,255,255,0.10);
        box-shadow: 0 18px 40px rgba(0,0,0,0.38);
        text-align: center;
    }

.row-tooltip-card .title {
        font-size: 18px;
        font-weight: 800;
        margin-bottom: 6px;
    }

.row-tooltip-card .sub {
        color: var(--ma-muted);
        font-size: 12px;
        line-height: 1.45;
    }

.row-flag {
        position: absolute;
        top: 6px;
        right: 6px;
        padding: 2px 6px;
        border-radius: 999px;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        line-height: 1.2;
    }

.row-flag.best {
        background: rgba(103,215,139,0.18);
        color: #bdf3cf;
        border: 1px solid rgba(103,215,139,0.34);
    }

.row-flag.worst {
        background: rgba(255,123,123,0.18);
        color: #ffb3b3;
        border: 1px solid rgba(255,123,123,0.34);
    }

.hero-title-block {
        display: grid;
        gap: 12px;
        align-content: start;
    }

.hero-short-copy {
        color: #d7d7d7;
        font-size: 15px;
        line-height: 1.55;
        max-width: 720px;
        margin: 0;
    }

.hero-grid.compact-title {
        grid-template-columns: 1.45fr 0.55fr;
        gap: 18px;
        align-items: start;
    }

.hero-side.compact {
        display: block;
    }

.mini-panel.quick-preview {
        padding: 18px;
    }

@media (max-width: 1080px) {
        .hero-grid.compact-title {
            grid-template-columns: 1fr;
        }
    }

.hero-title {
        font-size: 42px;
        font-weight: 900;
        letter-spacing: -0.02em;
        line-height: 1.1;
        color: #f5f5f5;
        margin: 0;
        text-shadow: 0 2px 18px rgba(203,163,74,0.15);
    }

.hero-title-block {
        gap: 10px;
    }

.heatmap {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

.heatmap-row-group {
        display: grid;
        gap: 8px;
    }

.heatmap-row-label {
        font-size: 13px;
        font-weight: 800;
        color: #e5e5e5;
        letter-spacing: 0.04em;
    }

.heatmap-row-cells {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
    }

.cell.empty-slot {
        visibility: hidden;
        pointer-events: none;
    }

.cell.reference {
        background: rgba(255,255,255,0.08) ;
        border-color: rgba(255,255,255,0.10);
        cursor: default;
        box-shadow: none;
    }

.cell.reference:hover,
    .cell.reference.active {
        transform: none;
        border-color: rgba(255,255,255,0.10);
        box-shadow: none;
    }

.cell.reference .cell-char {
        color: rgba(255,255,255,0.72);
    }

.cell.reference .cell-time {
        color: rgba(255,255,255,0.46);
    }

.cell-badge {
        position: absolute;
        top: 6px;
        right: 6px;
        padding: 2px 6px;
        border-radius: 999px;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        line-height: 1.2;
    }

.cell-badge.fastest {
        background: rgba(103,215,139,0.18);
        color: #bdf3cf;
        border: 1px solid rgba(103,215,139,0.34);
    }

.cell-badge.slowest {
        background: rgba(255,123,123,0.18);
        color: #ffb3b3;
        border: 1px solid rgba(255,123,123,0.34);
    }

.row-doughnut-card.slowest {
        border-color: rgba(203,163,74,0.72);
        box-shadow: inset 0 0 0 2px rgba(203,163,74,0.18), 0 0 18px rgba(203,163,74,0.16);
        background: linear-gradient(180deg, rgba(203,163,74,0.08), rgba(255,255,255,0.035));
    }

.row-flag.slowest {
        background: rgba(203,163,74,0.18);
        color: #ffe2a6;
        border: 1px solid rgba(203,163,74,0.34);
    }







.branch-meta { min-width: 0; }

























































@media (max-width: 760px) {
        
        
        
        
    }

@media (max-width: 900px) {
  .results-guidance { grid-template-columns: 1fr; }
  .results-guidance-card { grid-template-columns: auto minmax(0,1fr); align-items:start; }
  .results-guidance-actions { grid-column: 1 / -1; justify-content:flex-start; }
  .results-layout, .hero-grid, .hero-grid.compact-title { grid-template-columns: 1fr ; }
  .hero-title { font-size: clamp(2.3rem, 10vw, 4rem) ; }
  .row-doughnut-strip {
    display: flex ;
    overflow-x: auto ;
    gap: 10px ;
    padding: 8px 2px 12px ;
    -webkit-overflow-scrolling: touch ;
    scrollbar-width: thin;
  }
  .row-doughnut-card {
    flex: 0 0 72px ;
    width: 72px ;
    min-width: 72px ;
    padding: 7px 5px ;
  }
  .row-doughnut-card canvas {
    width: 48px ;
    height: 48px ;
  }
  .row-doughnut-label {
    font-size: 20px ;
    min-height: 22px ;
  }
  .row-flag {
    top: 4px ;
    right: 4px ;
    font-size: 8px ;
    padding: 2px 5px ;
  }
  .row-performance-head {
    display: grid ;
    gap: 4px ;
    align-items: start ;
  }
  .meta-grid, .detail-metrics { --ma-stat-columns: 2; }
  .mega-inline-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) ; }
  .mega-inline-card .value, .metric .value { font-size: 20px ; overflow-wrap: anywhere ; }
  .mega-value { font-size: clamp(3rem, 16vw, 5rem) ; }
  .heatmap-row-cells { grid-template-columns: repeat(5, minmax(42px, 1fr)) ; }
  .cell { min-height: 64px ; }
  .cell-char { font-size: 22px ; }
  .cell-time { font-size: 10px ; }
}

@media (max-width: 560px) {
  .results-guidance-card { grid-template-columns: 1fr; }
  .results-guidance-icon { width:42px; height:42px; }
  .results-guidance-actions { display:grid; grid-template-columns:1fr; }
  .results-guidance-actions .ma-button { width:100%; }
  .results-trend-head { display:grid; gap:6px; }
  .mega-inline-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) ; }
.cell,
button.cell,
.cell .cell-char,
.cell .cell-time,
.heatmap .cell,
.heatmap .cell-char,
.heatmap .cell-time,
.row-doughnut-card,
.row-doughnut-label,
.result-kana-card .char,
.kana-big .char {
  color: var(--ma-text) ;
  -webkit-text-fill-color: var(--ma-text) ;
}

.cell.reference,
.cell.reference .cell-char,
.cell.reference .cell-time {
  color: rgba(255,255,255,0.72) ;
  -webkit-text-fill-color: rgba(255,255,255,0.72) ;
}

.cell-badge.fastest,
.row-flag.best {
  color: #bdf3cf ;
  -webkit-text-fill-color: #bdf3cf ;
}

.cell-badge.slowest,
.row-flag.slowest {
  color: #ffe2a6 ;
  -webkit-text-fill-color: #ffe2a6 ;
}

.row-flag.worst {
  color: #ffb3b3 ;
  -webkit-text-fill-color: #ffb3b3 ;
}
}

@media (max-width: 760px) {
  .hero { padding: var(--ma-page-card-padding-tablet); border-radius: var(--ma-page-card-radius-tablet); }
  .hero-title { font-size: clamp(2.7rem, 13vw, 4.5rem); }
  .hero-short-copy { font-size: 1.05rem; line-height: 1.45; }
  .card { border-radius: var(--ma-radius-lg); padding: var(--ma-page-card-padding-tablet); }
}

/* === Display mode layout for Results/Test page === */
body[data-effective-display-mode="tablet"] .results-layout,
body[data-effective-display-mode="tablet"] .hero-grid,
body[data-effective-display-mode="tablet"] .hero-grid.compact-title {
  grid-template-columns: 1fr ;
}

body[data-effective-display-mode="tablet"] .summary-grid,
body[data-effective-display-mode="tablet"] .metric-grid,
body[data-effective-display-mode="tablet"] .overview-grid,
body[data-effective-display-mode="tablet"] .test-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) ;
}

body[data-effective-display-mode="phone"] .results-layout,
body[data-effective-display-mode="phone"] .hero-grid,
body[data-effective-display-mode="phone"] .hero-grid.compact-title,
body[data-effective-display-mode="phone"] .summary-grid,
body[data-effective-display-mode="phone"] .metric-grid,
body[data-effective-display-mode="phone"] .overview-grid,
body[data-effective-display-mode="phone"] .test-grid,
body[data-effective-display-mode="phone"] .chart-grid,
body[data-effective-display-mode="phone"] .row-chart-grid {
  grid-template-columns: 1fr ;
}

body[data-effective-display-mode="phone"] .result-card,
body[data-effective-display-mode="phone"] .detail-card,
body[data-effective-display-mode="phone"] .chart-card {
  padding: 14px ;
  border-radius: 20px ;
}

body[data-effective-display-mode="phone"] canvas,
body[data-effective-display-mode="phone"] svg {
  max-width: 100% ;
}


.overall-selected-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--ma-text-strong);
}

.overall-selected-meta {
  color: var(--ma-muted);
  font-size: 13px;
  margin-bottom: 10px;
}

.legend-box.correct {
  background: color-mix(in srgb,var(--ma-success) 34%,transparent);
}

.legend-box.wrong {
  background: color-mix(in srgb,var(--ma-danger) 28%,transparent);
}

.legend-box.unanswered {
  background: color-mix(in srgb,var(--ma-text) 8%,transparent);
}

.legend-box.unused {
  background: color-mix(in srgb,var(--ma-text) 6%,transparent);
}


.storage-debug-section {
  margin-bottom: 12px;
}

.storage-debug-key-grid,
.storage-debug-test-grid {
  display: grid;
  gap: 6px;
}

.storage-debug-test-grid {
  gap: 8px;
}

.storage-debug-card-small {
  padding: 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.storage-debug-key-title,
.storage-debug-test-title {
  font-weight: 700;
}

.storage-debug-danger {
  color: #ff9b9b;
}

.storage-debug-subtitle {
  color: #bfbfbf;
  margin-bottom: 8px;
}

.storage-debug-test-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

.storage-debug-test-main {
  min-width: 0;
}

.storage-debug-test-meta {
  color: #bfbfbf;
  font-size: 11px;
}

.storage-debug-test-id {
  color: #8f8f8f;
  font-size: 10px;
  word-break: break-all;
  margin-top: 3px;
}

.storage-debug-delete-btn {
  border: 1px solid rgba(255,123,123,0.34);
  background: rgba(120,26,26,0.35);
  color: #ffd1d1;
  border-radius: 8px;
  padding: 6px 9px;
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
}

.storage-debug-empty {
  padding: 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #bfbfbf;
}

.result-answer-correct {
  color: #bdf3cf;
}

.result-answer-wrong {
  color: #ffb3b3;
}

.test-heatmap-empty {
  grid-column: 1 / -1;
}


/* Branch nav account/action order: Profile then Settings. */




/* Formal assessment-specific presentation. */
.results-assessment-scope{margin-top:10px;color:var(--ma-muted);font-size:.76rem;line-height:1.4;}
.results-empty-assessment{display:grid;gap:12px;text-align:left;}
.results-empty-assessment__title{color:var(--ma-text-strong);font-size:1rem;}
.results-empty-assessment__copy{margin:0;color:var(--ma-muted);font-size:.86rem;line-height:1.55;max-width:52ch;}
.results-empty-assessment__actions{justify-content:flex-start;}
@media (max-width:760px){.results-assessment-hero{padding:18px;}.results-assessment-scope{font-size:.72rem;}}