/* 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;
    }

.card{
        --ma-card-border:var(--ma-border);
        --ma-card-bg:var(--ma-surface);
        --ma-card-shadow:none;
    }




.back-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 14px;
        color: var(--ma-native-secondary,#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:none;
        padding:18px;
    }
.results-guidance-card{
        display:grid;
        grid-template-columns:auto minmax(0,1fr) auto;
        gap:16px;
        align-items:center;
        --ma-card-bg:
          var(--ma-card);
    }
.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:var(--ma-native-primary,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: 20px;
    }

.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:none;
    }

.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:
            var(--ma-card);
        --ma-card-border: color-mix(in srgb,var(--ma-results) 28%,var(--ma-border));
        padding: 0;
    }

.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:transparent;
        --ma-stat-padding: 12px;
        --ma-stat-radius:0;
        --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,.68fr) minmax(0,1.32fr);
        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: none;
    }

.test-tile.reading {
        background: var(--ma-card);
        border: 1px solid var(--ma-native-border,rgba(103,215,139,0.18));
    }

.test-tile.writing {
        background: var(--ma-card);
        border: 1px solid var(--ma-native-border,rgba(102,168,255,0.18));
    }

.test-tile.average {
        background: var(--ma-card);
        border: 1px solid var(--ma-native-border,rgba(203,163,74,0.22));
    }

.test-tile.active.reading {
        border-color: var(--ma-native-writing,rgba(103,215,139,0.42));
        box-shadow: none;
    }

.test-tile.active.writing {
        border-color: var(--ma-native-writing,rgba(102,168,255,0.42));
        box-shadow: none;
    }

.test-tile.active.average {
        border-color: var(--ma-native-writing,rgba(203,163,74,0.40));
        box-shadow: none;
    }

.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: var(--ma-native-text,#fff);
    }

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

.tag {
        --ma-pill-bg: var(--ma-card);
        --ma-pill-border: var(--ma-native-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: var(--ma-native-reading,#bdf3cf); }

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

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

.detail-panel{padding:0;min-height:100%;}

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

.detail-title {
        font-size: 20px;
        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: var(--ma-native-control,rgba(255,255,255,0.04));
        --ma-button-bg-hover: var(--ma-native-control,rgba(203,163,74,0.09));
        --ma-button-border: var(--ma-native-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:var(--ma-native-selected,rgba(203,163,74,0.15));
        --ma-button-bg-hover:var(--ma-native-selected,rgba(203,163,74,0.15));
        --ma-button-border:var(--ma-native-writing,rgba(203,163,74,0.35));
        --ma-button-border-hover:var(--ma-native-writing,rgba(203,163,74,0.35));
        --ma-button-color:var(--ma-native-selected-text,#ffe2a6);
    }

.detail-metrics {
        --ma-stat-columns: 4;
        --ma-stat-gap: 10px;
        --ma-stat-bg: var(--ma-native-inset,rgba(255,255,255,0.045));
        --ma-stat-padding: 12px;
        --ma-stat-radius:0;
        --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: var(--ma-native-text,#dfdfdf);
    }

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

.cell {
        box-sizing:border-box;
        min-height: 64px;
        border-radius: 12px;
        display: grid;
        grid-template-rows: 1fr auto;
        justify-items: center;
        align-items: center;
        padding: 6px 6px;
        font-weight: 700;
        border: 1px solid var(--ma-native-border,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: var(--ma-native-writing,rgba(203,163,74,0.42));
        box-shadow: none;
    }

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

.cell-time {
        font-size: 10px;
        color: var(--ma-native-text,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 var(--ma-native-border,rgba(255,255,255,0.08));
    }

.kana-detail {
        margin-top: 14px;
        border-radius: 16px;
        padding: 14px;
        background: var(--ma-card);
        border: 1px solid var(--ma-native-border,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: var(--ma-card);
        border: 1px solid var(--ma-native-border,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: var(--ma-card);
        border: 1px solid var(--ma-native-border,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: 20px;
        font-weight: 800;
    }

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

@media (max-width: 760px) {
        body { padding: 12px; }
.card{ padding: 18px; }
        h1 { font-size: 36px; }
.meta-grid,
.detail-metrics{ --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:
            var(--ma-card);
        --ma-card-border: var(--ma-native-border,rgba(103,215,139,0.25));
    }

.mega-score.writing {
        --ma-card-bg:
            var(--ma-card);
        --ma-card-border: var(--ma-native-border,rgba(102,168,255,0.25));
    }

.mega-score.average {
        --ma-card-bg:
            var(--ma-card);
        --ma-card-border: var(--ma-native-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: var(--ma-card);
        --ma-card-border: var(--ma-native-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: var(--ma-native-inset,rgba(255,255,255,0.04));
        --ma-stat-padding: 12px;
        --ma-stat-radius:0;
        --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:var(--ma-native-control,rgba(255,255,255,0.04));
        border:1px solid var(--ma-native-border,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:var(--ma-native-selected,rgba(203,163,74,0.16));
        color:var(--ma-native-selected-text,#ffe2a6);
    }

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

.row-doughnut-card:hover,
    .row-doughnut-card.active {
        transform: translateY(-1px);
        border-color: var(--ma-native-writing,rgba(203,163,74,0.34));
        box-shadow: none;
    }

.row-doughnut-card.best {
        border-color: var(--ma-native-border,rgba(103,215,139,0.75));
        box-shadow: none;
        background: var(--ma-card);
    }

.row-doughnut-card.worst {
        border-color: var(--ma-native-border,rgba(255,123,123,0.75));
        box-shadow: none;
        background: var(--ma-card);
    }

.row-doughnut-label {
        font-size: 12px;
        margin-top: 8px;
        color: var(--ma-native-text,#ddd);
        line-height: 1.25;
        min-height: 12px;
        
    }

.row-doughnut-value {
        font-size: 12px;
        color: var(--ma-native-secondary,#aaa);
        font-weight: 700;
    }

.row-tooltip {
        margin-top: 6px;
        padding: 10px 12px;
        border-radius: 14px;
        background: var(--ma-card);
        border: 1px solid var(--ma-native-border,rgba(255,255,255,0.08));
        color: var(--ma-native-text,#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: var(--ma-native-text,#f1f1f1);
        letter-spacing: 0.04em;
    }

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

.row-fill {
        height: 100%;
        border-radius: inherit;
        background: var(--ma-native-gold,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: var(--ma-native-inset,rgba(255,255,255,0.045));
        --ma-stat-padding: 12px;
        --ma-stat-radius:0;
        --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(76px, 1fr));
        gap: 10px;
        padding: 4px 2px 6px;
    }

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

.row-doughnut-card canvas {
        display:block;
        width:min(70px,100%);
        height:auto;
        aspect-ratio:1;
        margin:0 auto;
    }

.row-doughnut-label {
        font-size: 18px;
        margin-top: 6px;
        color: var(--ma-native-text,#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 var(--ma-native-border,rgba(255,255,255,0.10));
        box-shadow: none;
        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: var(--ma-native-success-bg,rgba(103,215,139,0.18));
        color: var(--ma-native-reading,#bdf3cf);
        border: 1px solid var(--ma-native-border,rgba(103,215,139,0.34));
    }

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

@media (max-width: 1080px) {

    }

.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: var(--ma-native-text,#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: var(--ma-card);
        border-color: var(--ma-native-border,rgba(255,255,255,0.10));
        cursor: default;
        box-shadow: none;
    }

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

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

.cell.reference .cell-time {
        color: var(--ma-native-text,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: var(--ma-native-warning-bg,rgba(103,215,139,0.18));
        color: var(--ma-native-reading,#bdf3cf);
        border: 1px solid var(--ma-native-border,rgba(103,215,139,0.34));
    }

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

.row-doughnut-card.slowest {
        border-color: var(--ma-native-border,rgba(203,163,74,0.72));
        box-shadow: none;
        background: var(--ma-card);
    }

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

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

@media (max-width: 760px) {

    }

@media (min-width:901px) and (max-width:1180px) {
  .results-layout {
    grid-template-columns:minmax(250px,.62fr) minmax(0,1.38fr);
    gap:14px;
  }
  .results-layout > .card{padding:16px;}
  .results-list-card .card-head{margin-bottom:10px;}
  .results-list-card .card-sub,
  .results-list-card .overall-selected-meta{font-size:12px;line-height:1.4;}
  .results-list-card .tests-grid{gap:9px;}
  .results-list-card .test-tile{padding:12px;border-radius:15px;}
  .results-list-card .test-tile-top{gap:8px;margin-bottom:9px;}
  .results-list-card .test-title{font-size:15px;}
  .results-list-card .test-sub{font-size:11px;}
  .results-list-card .test-score{font-size:22px;}
  .results-list-card .tag-row{gap:6px;}
  .results-list-card .tag{font-size:9px;}
  .results-detail-card .detail-panel{padding:0;}
  .results-detail-card .detail-title{font-size:20px;}
  .results-detail-card .detail-sub{font-size:12px;}
  .results-detail-card .detail-metrics{--ma-stat-columns:2;}
  .results-detail-card .heatmap-wrap{gap:9px;}
  .results-detail-card .heatmap{gap:9px;}
  .results-detail-card .heatmap-row-group{gap:6px;}
  .results-detail-card .heatmap-row-cells{gap:6px;}
  .results-detail-card .cell{min-height:58px;padding:5px 4px;}
  .results-detail-card .cell-char{font-size:20px;}
  .results-detail-card .cell-time{font-size:9px;}
  .results-detail-card .cell-badge{top:4px;right:4px;font-size:8px;padding:2px 5px;}
}

@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{ grid-template-columns: 1fr ; }
  .results-list-card .tests-grid{
    display:flex;
    gap:10px;
    overflow-x:auto;
    max-height:none;
    padding:2px 2px 10px;
    scroll-snap-type:x proximity;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  .results-list-card .test-tile{
    flex:0 0 min(78vw,300px);
    width:min(78vw,300px);
    padding:12px;
    border-radius:15px;
    scroll-snap-align:start;
  }
  .results-list-card .test-tile-top{gap:8px;margin-bottom:8px;}
  .results-list-card .test-title{font-size:15px;}
  .results-list-card .test-sub{font-size:11px;}
  .results-list-card .test-score{font-size:22px;}
  .results-list-card .tag-row{gap:5px;}
  .results-list-card .tag{font-size:9px;}
  .results-detail-card .detail-panel{padding:0;}
  .results-detail-card .detail-head{margin-bottom:10px;}
  .results-detail-card .detail-title{font-size:20px;}
  .results-detail-card .detail-sub{font-size:12px;}
  .results-detail-card .detail-controls{margin-bottom:10px;}
  .results-detail-card .heatmap-wrap{gap:8px;}
  .results-detail-card .heatmap-row-group{gap:5px;}
  .results-detail-card .heatmap-row-cells{gap:5px;}
  .results-detail-card .cell{min-height:54px;padding:4px 3px;}
  .results-detail-card .cell-char{font-size:19px;}
  .results-detail-card .cell-time{font-size:9px;}
  .results-detail-card .cell-badge{top:3px;right:3px;font-size:7px;padding:2px 4px;}

  .row-doughnut-strip {
    display: flex ;
    overflow-x: auto ;
    gap: 10px ;
    padding: 8px 2px 12px ;
    -webkit-overflow-scrolling: touch ;
    scrollbar-width: thin;
    scroll-snap-type:x proximity;
  }
  .row-doughnut-card {
    flex: 0 0 82px ;
    width: 82px ;
    min-width: 82px ;
    padding: 7px 5px ;
    scroll-snap-align:start;
  }
  .row-doughnut-card canvas {
    width: 54px ;
    height: auto ;
  }
  .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: var(--ma-native-text,rgba(255,255,255,0.72));
  -webkit-text-fill-color: var(--ma-native-text,rgba(255,255,255,0.72));
}

.cell-badge.fastest,
.row-flag.best {
  color: var(--ma-native-reading,#bdf3cf);
  -webkit-text-fill-color: var(--ma-native-reading,#bdf3cf);
}

.cell-badge.slowest,
.row-flag.slowest {
  color: var(--ma-native-text,#ffe2a6);
  -webkit-text-fill-color: var(--ma-native-text,#ffe2a6);
}

.row-flag.worst {
  color: var(--ma-native-danger,#ffb3b3);
  -webkit-text-fill-color: var(--ma-native-danger,#ffb3b3);
}
}

@media (max-width: 760px) {

  .card { border-radius: var(--ma-radius-lg); padding: var(--ma-page-card-padding-tablet); }
  .results-list-card{padding:14px;}
  .results-list-card .card-head{margin-bottom:8px;}
  .results-list-card .overall-selected-meta{margin-bottom:8px;font-size:11px;}
  .results-detail-card{padding:14px;}
  .results-detail-card .detail-metrics{--ma-stat-columns:2;--ma-stat-gap:7px;--ma-stat-padding:9px;--ma-stat-value-size:20px;}
  .results-detail-card .heatmap-title{font-size:13px;}
  .results-detail-card .heatmap-row-label{font-size:12px;}
  .results-detail-card .heatmap-row-cells{grid-template-columns:repeat(5,minmax(46px,1fr));gap:4px;}
  .results-detail-card .cell{min-height:50px;border-radius:10px;padding:4px 2px;}
  .results-detail-card .cell-char{font-size:18px;}
  .results-detail-card .cell-time{font-size:8px;}
}

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"] .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: var(--ma-card);
  border: 1px solid var(--ma-native-border,rgba(255,255,255,0.08));
}

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

.storage-debug-danger {
  color: var(--ma-native-danger,#ff9b9b);
}

.storage-debug-subtitle {
  color: var(--ma-native-secondary,#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: var(--ma-native-secondary,#bfbfbf);
  font-size: 11px;
}

.storage-debug-test-id {
  color: var(--ma-native-secondary,#8f8f8f);
  font-size: 10px;
  word-break: break-all;
  margin-top: 3px;
}

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

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

.result-answer-correct {
  color: var(--ma-native-reading,#bdf3cf);
}

.result-answer-wrong {
  color: var(--ma-native-danger,#ffb3b3);
}

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

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

/* Results has a compact heading; scoring and analysis stay in their owners. */
.results-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:20px 0 24px;}
.results-heading__copy{min-width:0;}.results-heading h1{font:750 clamp(1.7rem,3vw,2.2rem)/1.2 var(--ma-font-display);letter-spacing:-.035em;margin:8px 0;}.results-heading p{font-size:.85rem;line-height:1.5;color:var(--ma-muted);margin:0;max-width:46ch;}
.results-heading__metrics{display:grid;grid-template-columns:1fr 1fr;gap:22px;flex:none;padding:18px 22px;border-radius:16px;background:var(--ma-control-active);}.results-heading__metrics>div{display:grid;gap:6px;}.results-heading__metrics strong{font-size:1.5rem;line-height:1.2;}.results-heading__metrics span{font-size:.7rem;color:var(--ma-muted);}
@media(max-width:760px){.results-heading{flex-direction:column;align-items:stretch;gap:18px;margin:12px 0 20px;}.results-heading__metrics{padding:14px 18px;}.results-heading__metrics>div{grid-template-columns:auto 1fr;align-items:center;gap:10px;}.results-heading__metrics strong{font-size:1.3rem;}}

.ma-results-empty .results-layout{display:block;}.ma-results-empty .results-list-card>.card-head,.ma-results-empty .results-list-card>.overall-selected-meta{display:none;}
.ma-results-empty .tests-grid{display:block;}.ma-results-empty .results-list-card{max-width:720px;margin:auto;}
.results-overview[hidden],.results-detail-card[hidden],.results-guidance[hidden]{display:none;}

body[data-effective-display-mode="phone"] .row-doughnut-strip{
  display:flex;
  overflow-x:auto;
  grid-template-columns:none;
  gap:8px;
  padding:7px 2px 10px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
body[data-effective-display-mode="phone"] .row-doughnut-card{
  flex:0 0 80px;
  width:80px;
  min-width:80px;
}
body[data-effective-display-mode="phone"] .row-doughnut-card canvas{width:52px;height:auto;}