/* ===== NihongoAcademy — Japanese aesthetic theme ===== */

:root {
    --na-primary: #ee96a4;
    --na-primary-dark: #d96d80;
    --na-primary-light: #f4b3c0;
    --na-secondary: #C1A8E0;
    --na-secondary-dark: #9A7BC4;
    --na-secondary-light: #DDD0F0;
    --na-bg: #F5F8FB;
    --na-surface: #F2F5F8;
    --na-text: #3E231A;
    --na-text-muted: #6B4A3A;
    --na-border: #B0B3B6;
    --na-sakura: #ee96a4;
    --na-sakura-light: #fbe3e8;
    --na-indigo: #9A7BC4;
    --na-gold: #ee96a4;
    --na-shadow: 0 2px 12px rgba(150, 95, 105, 0.10);
    --na-radius: 12px;
    --na-radius-sm: 8px;
    --na-transition: 0.3s ease;
}

/* ===== Base ===== */
body {
    font-family: 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    background-color: var(--na-bg);
    color: var(--na-text);
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--na-text);
}

/* ===== Global heading sizes (unified across all pages) ===== */
h1 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

h2 {
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
}

h3 {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

h4 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

h5 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

h6 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

a {
    color: var(--na-primary);
    text-decoration: none;
    transition: color var(--na-transition);
}

a:hover {
    color: var(--na-primary-dark);
}

/* ===== Navbar ===== */
.na-navbar {
    background: var(--na-surface);
    border-bottom: 1px solid var(--na-border);
    box-shadow: var(--na-shadow);
    padding: 0.6rem 0;
}

.na-app-header {
    z-index: 1030;
    top: 0;
}

.na-app-header .na-navbar {
    border-radius: 0;
}

/* Three-column layout: brand (left) | nav (center) | user (right) */
.na-navbar-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.75rem;
    position: relative;
    flex-wrap: nowrap;
}

.na-navbar-cell--left {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.na-navbar-cell--center {
    flex-shrink: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.na-navbar-cell--center .navbar-nav {
    display: inline-flex;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
}

.na-navbar-cell--right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* Quick utility icons group (Leaderboard & Explore) */
.na-nav-quick-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 999px;
    padding: 2px 4px;
}

/* Map icon button in navbar */
.na-nav-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--na-text-muted);
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.na-nav-icon-btn:hover {
    background: var(--na-sakura-light, #FFF0F3);
    color: var(--na-primary);
}

/* ====== Compact streak / goal / next badge in navbar ====== */
.na-nav-streak {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 4px 6px;
    background: #FFFFFF;
    border: 1px solid var(--na-border, #fbe3e8);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(58, 52, 48, 0.06);
    flex-shrink: 0;
    font-size: 0.85rem;
    line-height: 1;
}

.na-nav-streak-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--na-text, #3A3430);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.15s ease;
}

.na-nav-streak-item:hover {
    background: var(--na-bg, #F5F8FB);
    text-decoration: none;
    color: var(--na-text, #3A3430);
}

.na-nav-streak-item:active {
    transform: translateY(1px);
}

.na-nav-streak-item i {
    font-size: 1rem;
    line-height: 1;
}

.na-nav-streak-item strong {
    font-weight: 700;
}

/* Per-item accent colors (matches the reference pill) */
.na-nav-streak-item--streak i,
.na-nav-streak-item--streak strong {
    color: #ee96a4;
}

.na-nav-streak-item--goal i,
.na-nav-streak-item--goal strong {
    color: var(--na-secondary, #9A7BC4);
}

/* Vertical divider between segments */
.na-nav-streak-divider {
    width: 1px;
    height: 18px;
    background: var(--na-border, #fbe3e8);
    flex-shrink: 0;
}

/* Hide the inline streak badge on mobile — the collapsed capsule has no room */
@media (max-width: 991px) {
    .na-nav-streak {
        display: none;
    }
}

/* ====== Search box in navbar ====== */
.na-nav-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 240px;
    flex-shrink: 0;
}

.na-nav-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--na-text-muted, #8B8580);
    font-size: 0.92rem;
    pointer-events: none;
}

.na-nav-search-input {
    width: 100%;
    height: 36px;
    padding: 0 36px 0 32px;
    border: 1px solid var(--na-border, #fbe3e8);
    border-radius: 999px;
    background: var(--na-bg, #F5F8FB);
    font-size: 0.85rem;
    color: var(--na-text, #2D2A26);
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.na-nav-search-input::placeholder {
    color: var(--na-text-muted, #8B8580);
}

.na-nav-search-input:focus {
    border-color: var(--na-primary, #ee96a4);
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(238, 150, 164, 0.12);
}

.na-nav-search-btn {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--na-primary, #ee96a4);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.na-nav-search-btn:hover {
    background: var(--na-primary-dark, #ee96a4);
    transform: translateY(-50%) scale(1.05);
}

.na-nav-search-btn i {
    font-size: 0.8rem;
    line-height: 1;
}

@media (max-width: 1199.98px) {
    .na-nav-search {
        width: 200px;
    }
}

@media (max-width: 991.98px) {
    .na-nav-search {
        width: 180px;
    }
    .na-nav-search-input {
        font-size: 0.82rem;
    }
}

@media (max-width: 767.98px) {
    .na-navbar-cell--center {
        gap: 0.5rem;
    }
    .na-nav-search {
        width: 100%;
        max-width: 280px;
    }
}

@media (max-width: 575.98px) {
    .na-navbar-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .na-navbar-cell--center {
        position: static;
        transform: none;
        width: 100%;
    }

    .na-navbar-cell--left,
    .na-navbar-cell--right {
        justify-self: center;
    }
}

.na-navbar .na-brand {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--na-primary);
    letter-spacing: 0.3px;
    margin-right: 0.75rem;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

.na-navbar .navbar-brand .jp {
    color: var(--na-text);
    font-size: 0.78rem;
    margin-left: 0;
    font-weight: 500;
    white-space: nowrap;
}

.na-navbar .nav-link {
    color: var(--na-text);
    font-weight: 500;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    transition: all var(--na-transition);
    font-size: 0.95rem;
    white-space: nowrap;
}

.na-navbar .nav-link:hover,
.na-navbar .nav-link.active {
    color: var(--na-primary);
    background: var(--na-sakura-light);
}

.na-nav-primary {
    gap: 0.15rem;
}

.na-navbar .nav-link i {
    margin-right: 4px;
}

/* ===== User dropdown (replaces Hello/Logout) ===== */
.na-user-menu .na-user-toggle {
    padding: 0;
    display: inline-flex;
    align-items: center;
}

/* Keep Admin pill and avatar button on one line, vertically centered */
.na-navbar-cell--right .navbar-nav {
    flex-direction: row;
    align-items: center;
}

.na-navbar-cell--right .navbar-nav .nav-item {
    display: flex;
    align-items: center;
}

.na-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--na-primary) 0%, var(--na-primary-light) 100%);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 4px rgba(238, 150, 164, 0.3);
    transition: transform var(--na-transition), box-shadow var(--na-transition);
}

.na-user-toggle:hover .na-avatar,
.na-user-toggle[aria-expanded="true"] .na-avatar {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(238, 150, 164, 0.4);
}

/* Uploaded photo inside the navbar avatar button */
.na-avatar--img {
    padding: 0;
    overflow: hidden;
}

.na-avatar--img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.na-dropdown {
    border: 1px solid var(--na-border);
    border-radius: var(--na-radius);
    box-shadow: 0 4px 16px rgba(45, 42, 38, 0.1);
    padding: 0.5rem 0;
    min-width: 220px;
    margin-top: 0.5rem;
}

.na-dropdown .dropdown-header {
    padding: 0.5rem 1rem 0.25rem;
    white-space: nowrap;
}

.na-dropdown-email {
    font-size: 0.85rem;
    color: var(--na-text-muted);
    font-weight: 500;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.na-dropdown .dropdown-item {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    color: var(--na-text);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transition: background var(--na-transition);
}

.na-dropdown .dropdown-item i {
    color: var(--na-text-muted);
    font-size: 1rem;
    width: 18px;
    text-align: center;
}

.na-dropdown .dropdown-item:hover {
    background: var(--na-sakura-light);
    color: var(--na-primary);
}

.na-dropdown .dropdown-item:hover i {
    color: var(--na-primary);
}

.na-dropdown .dropdown-divider {
    margin: 0.4rem 0;
    border-color: var(--na-border);
}

.na-dropdown-logout {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.na-dropdown-logout:hover {
    color: var(--na-primary) !important;
}

.na-nav-link-sm {
    font-size: 0.9rem;
}

/* ===== Buttons ===== */
.btn-na-primary {
    background: var(--na-primary);
    border: none;
    color: #3E231A;
    font-size: 0.95rem;
    padding: 0.5rem 1.5rem;
    border-radius: var(--na-radius-sm);
    font-weight: 500;
    transition: all var(--na-transition);
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}

.btn-na-primary:visited,
.btn-na-primary:active,
.btn-na-primary:focus {
    color: #3E231A;
}

.btn-na-primary:hover {
    background: var(--na-primary-dark);
    color: #3E231A;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(238, 150, 164, 0.3);
}

/* Register button in the navbar should match the capsule shape of the floating nav */
.na-navbar-cell--right .btn-na-primary {
    border-radius: 999px;
}

.btn-na-outline {
    background: transparent;
    border: 1.5px solid var(--na-border);
    color: var(--na-text);
    font-size: 0.95rem;
    padding: 0.5rem 1.5rem;
    border-radius: var(--na-radius-sm);
    font-weight: 500;
    transition: all var(--na-transition);
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}

.btn-na-outline:visited,
.btn-na-outline:active,
.btn-na-outline:focus {
    color: var(--na-text);
    background: transparent;
}

.btn-na-outline:hover {
    border-color: var(--na-primary);
    color: var(--na-primary);
    background: var(--na-sakura-light);
}

/* Explicit overrides — keep button colors when used as <a> inside .na-app
   (the generic .na-app a rule above has higher specificity and would
   otherwise turn red text on red background, making buttons invisible). */
.na-app .btn-na-primary,
.na-app .btn-na-primary:visited,
.na-app .btn-na-primary:hover,
.na-app .btn-na-primary:focus {
    color: #3E231A;
}

.na-app .btn-na-outline,
.na-app .btn-na-outline:visited,
.na-app .btn-na-outline:active,
.na-app .btn-na-outline:focus {
    color: var(--na-text);
}

.na-app .btn-na-outline:hover {
    color: var(--na-primary);
    background: var(--na-sakura-light);
}

/* Disabled state — same as Bootstrap for clarity */
.na-app .btn-na-primary[disabled],
.na-app .btn-na-primary.disabled {
    background: var(--na-primary-light);
    color: #3E231A;
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ===== Cards ===== */
.na-card {
    background: var(--na-surface);
    border: 1px solid var(--na-border);
    border-radius: var(--na-radius);
    padding: 1.5rem;
    box-shadow: var(--na-shadow);
    transition: all var(--na-transition);
}

.na-card:hover {
    box-shadow: 0 4px 20px rgba(45, 42, 38, 0.12);
    transform: translateY(-2px);
}

/* Flashcard grid — all tiles in a row have the SAME height regardless of
   how many lines the Japanese / English text wraps to. */
.na-card-grid {
    display: flex;
    flex-wrap: wrap;
}

.na-card-grid > [class*="col-"] {
    display: flex;
}

.na-flashcard-tile {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    position: relative;
    min-height: 180px;
}

.na-flashcard-jp {
    font-size: 2rem;
    color: var(--na-text);
    font-weight: 600;
    line-height: 1.25;
    max-width: 100%;
    word-break: keep-all;
    overflow-wrap: anywhere;
    margin-bottom: 0.5rem;
    padding-right: 28px; /* leave space for speak button */
}

.na-flashcard-speak {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
}

.na-flashcard-romaji {
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.na-flashcard-meaning {
    font-size: 0.85rem;
    color: var(--na-text);
    line-height: 1.4;
}

.na-flashcard-type {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.75rem;
}

@media (max-width: 576px) {
    .na-flashcard-tile { min-height: 160px; padding: 1rem 0.75rem; }
    .na-flashcard-jp { font-size: 1.65rem; }
}

.na-card-flat {
    background: var(--na-surface);
    border: 1px solid var(--na-border);
    border-radius: var(--na-radius);
    padding: 1.5rem;
}

/* ===== Hero section ===== */
.na-hero {
    background: linear-gradient(135deg, var(--na-sakura-light) 0%, var(--na-bg) 100%);
    padding: 3rem 2rem;
    border-radius: 0 0 24px 24px;
}

.na-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--na-text);
}

.na-hero .jp-subtitle {
    font-size: 1.2rem;
    color: var(--na-primary);
    margin-bottom: 1.5rem;
}

.na-hero .lead {
    font-size: 1.1rem;
    color: var(--na-text-muted);
    max-width: 600px;
    margin-bottom: 2rem;
}

/* Mascot image in hero */
.na-mascot {
    max-width: 360px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 20px rgba(238, 150, 164, 0.15));
    transition: transform 0.3s ease;
}

.na-mascot:hover {
    transform: scale(1.05) rotate(-2deg);
}

@media (max-width: 991px) {
    .na-mascot {
        max-width: 260px;
    }
}

/* ===== Stats ===== */
.na-stat {
    text-align: center;
    padding: 1rem;
}

.na-stat .stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--na-primary);
}

.na-stat .stat-label {
    font-size: 0.85rem;
    color: var(--na-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ===== Category badge ===== */
.na-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 500;
}

.na-badge-hiragana { background: #fbe3e8; color: #ee96a4; }
.na-badge-katakana { background: #EDE8F8; color: #9A7BC4; }
.na-badge-vocabulary { background: #EBE2F8; color: #9A7BC4; }
.na-badge-grammar { background: #E1E4E7; color: #3E231A; }
.na-badge-kanji { background: #fbe3e8; color: #d96d80; }
.na-badge-culture { background: #EDE8F8; color: #C1A8E0; }

/* ===== Difficulty stars ===== */
.na-difficulty {
    color: var(--na-gold);
    font-size: 0.9rem;
}

/* ===== Flashcard ===== */
.flashcard-container {
    perspective: 1000px;
    margin: 2rem auto;
    max-width: 500px;
}

.flashcard {
    position: relative;
    width: 100%;
    height: 300px;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.flashcard.flipped {
    transform: rotateY(180deg);
}

.flashcard-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--na-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-shadow: var(--na-shadow);
}

.flashcard-front {
    background: linear-gradient(135deg, var(--na-surface) 0%, var(--na-sakura-light) 100%);
    border: 2px solid var(--na-sakura);
}

.flashcard-back {
    background: linear-gradient(135deg, var(--na-surface) 0%, #EDF0F3 100%);
    border: 2px solid var(--na-indigo);
    transform: rotateY(180deg);
}

.flashcard-jp {
    font-size: 3.5rem;
    color: var(--na-text);
    margin-bottom: 0.5rem;
}

.flashcard-romaji {
    font-size: 1.1rem;
    color: var(--na-primary);
    font-style: italic;
}

.flashcard-english {
    font-size: 1.4rem;
    color: var(--na-indigo);
    margin-bottom: 0.5rem;
}

.flashcard-type {
    font-size: 0.8rem;
    color: var(--na-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.flashcard-example {
    font-size: 0.9rem;
    color: var(--na-text-muted);
    margin-top: 1rem;
    text-align: center;
}

/* ===== Quiz ===== */
.quiz-question-card {
    background: var(--na-surface);
    border: 1px solid var(--na-border);
    border-radius: var(--na-radius);
    padding: 2rem;
    margin-bottom: 1.5rem;
    display: none;
}

.quiz-question-card.active {
    display: block;
}

.quiz-option {
    display: block;
    padding: 1rem 1.5rem;
    margin: 0.5rem 0;
    border: 2px solid var(--na-border);
    border-radius: var(--na-radius-sm);
    cursor: pointer;
    transition: all var(--na-transition);
    background: var(--na-surface);
}

.quiz-option:hover {
    border-color: var(--na-primary);
    background: var(--na-sakura-light);
}

.quiz-option.selected {
    border-color: var(--na-primary);
    background: var(--na-sakura-light);
}

.quiz-option.correct {
    border-color: var(--na-secondary);
    background: #EDE8F8;
}

.quiz-option.incorrect {
    border-color: #ee96a4;
    background: #E1E4E7;
}

/* Buttons are disabled after answering; without this the UA style turns the
   text to GrayText (about 2:1 contrast on the pastel backgrounds). */
.quiz-option:disabled {
    color: var(--na-text);
    opacity: 1;
    cursor: default;
}

.quiz-option.correct:disabled {
    color: var(--na-text);
    font-weight: 700;
}

.quiz-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--na-border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 2rem;
}

.quiz-progress-fill {
    height: 100%;
    background: var(--na-primary);
    transition: width 0.3s ease;
}

.quiz-timer {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--na-primary);
}

.quiz-timer.warning {
    color: #ee96a4;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ===== Dashboard ===== */
.dashboard-metric {
    background: var(--na-surface);
    border: 1px solid var(--na-border);
    border-radius: var(--na-radius);
    padding: 1.5rem;
    text-align: center;
}

.dashboard-metric .metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--na-primary);
}

.dashboard-metric .metric-label {
    font-size: 0.85rem;
    color: var(--na-text-muted);
    margin-top: 0.25rem;
}

/* ===== Goal Plan Card ===== */
.na-goal-plan-card {
    padding: 1.25rem 1.5rem;
    border-radius: var(--na-radius);
    background: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

.na-goal-plan-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.na-goal-milestones-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.na-milestone-chip {
    font-size: 0.78rem;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    background: #f8f9fa;
    color: #495057;
    border: 1px solid #e9ecef;
}

.na-progress-cockpit {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.4fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.na-progress-next-action {
    padding: 1.35rem;
    border: 1px solid rgba(238, 150, 164, 0.35);
    border-radius: var(--na-radius);
    background: linear-gradient(135deg, rgba(251, 227, 232, 0.82), rgba(255, 255, 255, 0.92));
    box-shadow: 0 12px 30px rgba(238, 150, 164, 0.12);
}

.na-progress-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--na-primary-dark);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.na-progress-next-action h2 {
    margin: 0.5rem 0;
    font-size: 1.45rem;
}

.na-progress-next-action p {
    color: var(--na-text-muted);
    margin-bottom: 1rem;
}

.na-progress-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

.na-timeline {
    display: grid;
    gap: 0.65rem;
}

.na-timeline-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--na-border);
    border-radius: 10px;
    background: #fff;
    color: var(--na-text);
    text-decoration: none;
}

.na-timeline-item:hover {
    border-color: var(--na-primary);
    color: var(--na-text);
}

.na-timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--na-primary);
}

.na-timeline-item.is-review .na-timeline-dot { background: var(--na-secondary-dark); }
.na-timeline-item.is-mastered .na-timeline-dot { background: var(--na-primary-dark); }

.na-timeline-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.na-timeline-main strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.na-timeline-main small,
.na-timeline-progress {
    color: var(--na-text-muted);
}

.na-progress-insight {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 0.8rem 0.9rem;
    border-radius: 10px;
    background: rgba(193, 168, 224, 0.14);
    color: var(--na-text);
}

.na-cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.na-cal-arrow {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--na-border);
    border-radius: 50%;
    background: #fff;
    color: var(--na-text-muted);
}

.na-cal-month {
    font-weight: 800;
    font-size: 0.9rem;
}

.na-cal-dow,
.na-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.na-cal-dow { margin-bottom: 5px; }

.na-cal-dow span {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--na-text-muted);
}

.na-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--na-border);
    border-radius: 8px;
    background: #fff;
    color: var(--na-text-muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.na-day--empty { visibility: hidden; }
.na-day--out { opacity: 0.35; }
.na-day--today { border-color: var(--na-primary); color: var(--na-primary); }
.na-day--on {
    background: linear-gradient(135deg, var(--na-secondary-light), var(--na-secondary));
    border-color: transparent;
    color: #4b3468;
}

@media (max-width: 991.98px) {
    .na-progress-cockpit,
    .na-progress-metrics {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575.98px) {
    .na-progress-cockpit,
    .na-progress-metrics {
        grid-template-columns: 1fr;
    }
}

/* ===== Progress bar ===== */
.na-progress {
    width: 100%;
    height: 8px;
    background: var(--na-border);
    border-radius: 4px;
    overflow: hidden;
}

.na-progress-fill {
    height: 100%;
    background: var(--na-secondary);
    transition: width 0.5s ease;
}

/* ===== Skill Radar Chart ===== */
.na-radar-wrap {
    max-width: 340px;
    margin: 0 auto;
    aspect-ratio: 1;
}

.na-badge-glow {
    animation: badgeGlow 2s ease-in-out infinite alternate;
}

@keyframes badgeGlow {
    0% { box-shadow: 0 0 4px rgba(193, 168, 224, 0.3); }
    100% { box-shadow: 0 0 12px rgba(193, 168, 224, 0.6); }
}

/* ===== JLPT Milestones ===== */
.na-jlpt-card {
    padding: 1rem 0;
    border-bottom: 1px solid var(--na-border);
}

.na-jlpt-card:last-child {
    border-bottom: none;
}

.na-jlpt-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.na-jlpt-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.na-jlpt-n5 { background: linear-gradient(135deg, #C1A8E0, #9A7BC4); }
.na-jlpt-n4 { background: linear-gradient(135deg, #ee96a4, #d96d80); }
.na-jlpt-n3 { background: linear-gradient(135deg, #b9b0c6, #948da3); }

.na-jlpt-title {
    font-weight: 700;
    font-size: 0.92rem;
    flex: 1;
}

.na-jlpt-pct {
    font-weight: 800;
    color: var(--na-primary);
    font-size: 0.95rem;
}

.na-progress-lg {
    height: 12px;
    border-radius: 6px;
}

.na-fill-n5 {
    background: linear-gradient(90deg, #9A7BC4, #C1A8E0);
    transition: width 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.na-fill-n4 {
    background: linear-gradient(90deg, #d96d80, #ee96a4);
    transition: width 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.na-jlpt-locked {
    opacity: 0.5;
}

/* ===== Metric Card Enhancements ===== */
.na-metric-icon {
    font-size: 1.4rem;
    margin-bottom: 0.35rem;
    color: var(--na-primary);
    opacity: 0.7;
}

.na-metric-unit {
    font-size: 1.2rem;
    font-weight: 600;
    margin-left: 1px;
}

.na-metric-animated {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.na-metric-animated.na-metric-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Calendar Legend ===== */
.na-cal-legend {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.na-cal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: var(--na-text-muted);
    font-weight: 600;
}

.na-cal-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.na-cal-legend-active {
    background: linear-gradient(135deg, var(--na-secondary-light), var(--na-secondary));
}

.na-cal-legend-today {
    border: 2px solid var(--na-primary);
    background: #fff;
}

/* ===== Enhanced Timeline Dots ===== */
.na-timeline-dot i {
    font-size: 0.7rem;
}

.na-timeline-item .na-timeline-dot {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.7rem;
}

.na-timeline-item.is-active .na-timeline-dot {
    background: var(--na-primary);
}

/* ===== Admin sidebar ===== */
.admin-sidebar .nav-link {
    color: var(--na-text-muted);
    padding: 0.75rem 1rem;
    border-radius: var(--na-radius-sm);
    margin-bottom: 4px;
    transition: all var(--na-transition);
}

.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
    color: var(--na-primary);
    background: var(--na-sakura-light);
}

.admin-sidebar .nav-link i {
    width: 20px;
}

/* ===== Footer ===== */
.na-footer {
    background: var(--na-surface);
    border-top: 1px solid var(--na-border);
    padding: 2rem 0;
    margin-top: 3rem;
    color: var(--na-text-muted);
    font-size: 0.9rem;
}

.na-footer a {
    color: var(--na-text-muted);
}

.na-footer a:hover {
    color: var(--na-primary);
}

/* ===== Sakura decoration ===== */
.sakura-decoration {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}


.sakura-petal {
    position: absolute;
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 30% 30%, #fbdce3 0%, #ee96a4 55%, #d96d80 100%);
    border-radius: 100% 0 100% 0;
    box-shadow: 0 1px 3px rgba(217, 109, 128, 0.30);
    animation: fall linear infinite;
    will-change: transform;
}

@keyframes fall {
    0% { transform: translateY(-10vh) rotate(0deg); }
    100% { transform: translateY(110vh) rotate(360deg); }
}

/* Disable sakura animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sakura-petal {
        animation: none !important;
        display: none;
    }
}

/* ===== Utility ===== */
.text-na-primary { color: var(--na-primary) !important; }
.bg-na-primary { background-color: var(--na-primary) !important; }

.na-progress-thin { height: 6px; background: rgba(238,150,164,0.18); border-radius: 999px; overflow: hidden; }
.na-progress-thin .progress-bar { transition: width .4s ease; }
.bg-na-sakura { background-color: var(--na-sakura-light) !important; }
.border-na { border-color: var(--na-border) !important; }

/* ===== Mastery accent (purple) — replaces Bootstrap green for mastery state ===== */
.text-na-accent { color: var(--na-secondary-dark) !important; }
.bg-na-accent { background-color: var(--na-secondary-dark) !important; }
.border-na-accent { border-color: var(--na-secondary) !important; }

/* Page title icon — consistent inline icon for h2/h3 headings */
.na-page-icon {
    color: var(--na-primary);
    margin-right: 0.4rem;
    font-size: 0.9em;
}

/* Japanese subtitle — unified style across all page headings */
.na-subtitle-jp {
    font-size: 0.85rem;
    color: var(--na-text-muted);
    font-weight: 500;
    margin-left: 0.3rem;
}

/* ===== Mobile bottom tab bar ===== */
.na-mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: var(--na-surface);
    border-top: 1px solid var(--na-border);
    box-shadow: 0 -2px 10px rgba(45, 42, 38, 0.08);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.35rem 0 calc(0.35rem + env(safe-area-inset-bottom, 0px));
}

.na-mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    color: var(--na-text-muted) !important;
    font-size: 0.7rem;
    font-weight: 500;
    text-decoration: none !important;
    padding: 0.25rem 0.5rem;
    border-radius: var(--na-radius-sm);
    transition: color var(--na-transition);
    flex: 1;
}

.na-mobile-nav-item i {
    font-size: 1.2rem;
}

.na-mobile-nav-item:hover,
.na-mobile-nav-item.active {
    color: var(--na-primary) !important;
}

/* Add bottom padding to body on mobile so content isn't hidden behind tab bar */
@media (max-width: 767.98px) {
    body { padding-bottom: 60px; }
}

.content-html h3 { color: var(--na-primary); margin-top: 1.5rem; }
.content-html p { margin-bottom: 1rem; line-height: 1.8; }
.content-html ul { padding-left: 1.5rem; margin-bottom: 1rem; }
.content-html li { margin-bottom: 0.5rem; }

/* ===== Kana learning chart (gojuon) ===== */
.kana-chart { display: grid; grid-template-columns: 56px repeat(5, 1fr); gap: 6px; margin: 1rem 0 1.5rem; }
.kana-row-label {
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 600; color: var(--na-primary);
    background: var(--na-sakura-light); border: 1px solid var(--na-sakura);
    border-radius: 8px; padding: 4px;
}
.kana-cell {
    position: relative;
    background: #FFFFFF; border: 1px solid var(--na-border); border-radius: 8px;
    padding: 8px 4px; text-align: center;
    cursor: pointer; /* click to hear pronunciation */
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.kana-cell:hover {
    transform: translateY(-2px);
    border-color: var(--na-primary);
    box-shadow: 0 4px 10px rgba(238, 150, 164, 0.12);
}
.kana-cell:hover::after {
    content: "\1F50A"; /* speaker icon hint on hover */
    position: absolute;
    top: 3px; right: 5px;
    font-size: 0.55rem;
    opacity: 0.55;
}
.kana-cell .kana-char { display: block; font-size: 1.6rem; font-weight: 600; line-height: 1.35; }
.kana-cell .kana-romaji { display: block; font-size: 0.78rem; color: var(--na-text-muted); }
.kana-cell.vowel { background: var(--na-sakura-light); border-color: var(--na-sakura); }
.kana-cell.vowel .kana-romaji { color: var(--na-primary); font-weight: 600; }

/* ===== Audio pronunciation buttons ===== */
.na-speak-btn {
    background: var(--na-sakura-light);
    border: 1.5px solid var(--na-sakura);
    color: var(--na-primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all var(--na-transition);
    vertical-align: middle;
    padding: 0;
}

.na-speak-btn:hover {
    background: var(--na-sakura);
    transform: scale(1.1);
}

.na-speak-btn:active {
    transform: scale(0.95);
}

/* Home discovery dashboard */
.na-home-overview,
.na-home-compartment {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border: 1px solid rgba(55, 71, 58, .1);
    border-radius: 22px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 12px 34px rgba(193,168,224, .07);
}

.na-home-overview {
    color: #FFFFFF;
    border: 0;
    background: linear-gradient(125deg, #9A7BC4 0%, #ee96a4 42%, #d96d80 100%);
}

.na-home-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.na-home-section-heading h3 {
    margin: .15rem 0 .3rem;
    color: #9A7BC4;
    font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.na-home-section-heading h3 span {
    margin-left: .4rem;
    color: var(--na-primary);
    font-size: .72em;
    font-weight: 500;
}

.na-home-section-heading p {
    max-width: 720px;
    margin: 0;
    color: #68746B;
}

.na-home-overview .na-home-section-heading h3,
.na-home-overview .na-home-section-heading p { color: #FFFFFF; }

.na-home-kicker {
    color: var(--na-primary);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.na-home-overview .na-home-kicker { color: #f4b3c0; }

.na-see-more {
    flex: 0 0 auto;
    padding: .55rem .8rem;
    border-radius: 999px;
    color: var(--na-primary);
    background: var(--na-sakura-light, #F2F5F8);
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.na-see-more:hover { color: #3E231A; background: var(--na-primary); }

.na-home-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .85rem;
}

.na-home-stat {
    padding: 1rem;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 16px;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(6px);
}

.na-home-stat strong { display: block; font-size: 1.7rem; line-height: 1; }
.na-home-stat span { display: block; margin-top: .45rem; color: rgba(255,255,255,.78); font-size: .85rem; }

.na-home-path-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .7rem;
}

.na-home-path-card {
    padding: 1rem .75rem;
    border-radius: 16px;
    background: #F7F8F5;
    text-align: center;
}

.na-home-path-icon {
    display: grid;
    width: 42px;
    height: 42px;
    margin: 0 auto .65rem;
    place-items: center;
    border-radius: 13px;
    color: #FFFFFF;
    background: linear-gradient(145deg, var(--na-primary), #f4b3c0);
    font-size: 1.15rem;
}

.na-home-path-card h4 { margin: 0; color: #9A7BC4; font-size: .95rem; }
.na-home-path-card p { margin: .25rem 0 0; color: #7A837C; font-size: .78rem; }

.na-home-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.na-home-content-card {
    display: flex;
    min-width: 0;
    padding: 1.15rem;
    border: 1px solid #E8EBE6;
    border-radius: 17px;
    background: linear-gradient(180deg, #FFFFFF, #FBFCFA);
    flex-direction: column;
}

.na-home-content-card h4 { margin: .9rem 0 .2rem; color: #9A7BC4; font-size: 1.05rem; }
.na-home-content-card p { display: -webkit-box; overflow: hidden; margin: .7rem 0 1rem; color: #68736B; font-size: .88rem; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.na-home-content-card > a { margin-top: auto; color: var(--na-primary); font-weight: 750; text-decoration: none; }
.na-home-card-ja { min-height: 1.25rem; color: var(--na-primary); font-size: .86rem; }

.na-home-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
}

.na-home-feature-grid article {
    padding: 1.1rem;
    border-radius: 16px;
    background: #F7F8F5;
}

.na-home-feature-grid i { color: var(--na-primary); font-size: 1.4rem; }
.na-home-feature-grid h4 { margin: .65rem 0 .35rem; color: #9A7BC4; font-size: 1rem; }
.na-home-feature-grid p { margin: 0; color: #707A73; font-size: .84rem; }

.na-home-quiz-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin-top: auto; }
.na-home-quiz-meta span { padding: .55rem .35rem; border-radius: 10px; color: #6D776F; background: #F2F4F0; text-align: center; font-size: .75rem; }
.na-home-quiz-meta strong { display: block; color: #9A7BC4; font-size: .95rem; }

.na-home-discovery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.na-home-discovery-card { position: relative; min-height: 145px; overflow: hidden; padding: 1.35rem; border-radius: 18px; color: #FFFFFF; text-decoration: none; }
.na-home-discovery-card::after { position: absolute; right: -18px; bottom: -46px; width: 145px; height: 145px; border: 24px solid rgba(255,255,255,.11); border-radius: 50%; content: ''; }
.na-home-discovery-card--map { background: linear-gradient(130deg, #C1A8E0, #DDD0F0); }
.na-home-discovery-card--community { background: linear-gradient(130deg, #ee96a4, #f4b3c0); }
.na-home-discovery-card i { display: block; margin-bottom: 1.1rem; font-size: 1.6rem; color: #FFFFFF; }
.na-home-discovery-card span, .na-home-discovery-card strong { display: block; color: #FFFFFF; }
.na-home-discovery-card span { color: #FFFFFF; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.na-home-discovery-card strong { margin-top: .2rem; font-size: 1.12rem; }

@media (max-width: 991.98px) {
    .na-home-path-grid { grid-template-columns: repeat(4, 1fr); }
    .na-home-feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
    .na-home-overview, .na-home-compartment { padding: 1.1rem; border-radius: 17px; }
    .na-home-section-heading { align-items: flex-start; flex-direction: column; }
    .na-home-stats, .na-home-card-grid { grid-template-columns: repeat(2, 1fr); }
    .na-home-path-grid { grid-template-columns: repeat(2, 1fr); }
    .na-home-discovery-grid { grid-template-columns: 1fr; }
}

@media (max-width: 479.98px) {
    .na-home-card-grid, .na-home-feature-grid { grid-template-columns: 1fr; }
}

/* Account creation and post-login study plan */
.na-auth-shell {
    display: grid;
    max-width: 980px;
    overflow: hidden;
    margin: 2rem auto;
    border: 1px solid rgba(193,168,224, .1);
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: 0 18px 50px rgba(193,168,224, .1);
    grid-template-columns: 1.05fr .95fr;
}

.na-auth-intro { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 4rem); color: #3E231A; background: radial-gradient(circle at 85% 12%, rgba(251, 227, 232, .3), transparent 28%), linear-gradient(145deg, #ee96a4, var(--na-primary) 62%, #f4b3c0); }
.na-auth-intro .na-home-kicker { color: #d96d80; }
.na-auth-intro h1 { margin: .7rem 0; font-size: clamp(2rem, 4vw, 3.2rem); }
.na-auth-intro > p { color: rgba(62,35,26,.74); }
.na-auth-intro > :not(.na-auth-glyphs):not(.na-auth-mascot) { position: relative; z-index: 2; }
.na-auth-glyphs span { position: absolute; color: rgba(62,35,26,.08); font-family: serif; font-size: 7rem; font-weight: 800; line-height: 1; }
.na-auth-glyphs span:nth-child(1) { top: 5%; left: 5%; transform: rotate(-10deg); }
.na-auth-glyphs span:nth-child(2) { top: 29%; right: 5%; transform: rotate(8deg); }
.na-auth-glyphs span:nth-child(3) { right: 28%; bottom: 5%; transform: rotate(-5deg); }
.na-auth-mascot { position: absolute; z-index: 2; right: 1.3rem; bottom: .7rem; width: 155px; max-height: 140px; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(217, 109, 128, .22)); }
.na-auth-form-card { padding: clamp(2rem, 4vw, 3.2rem); align-self: center; }
.na-auth-form-card h2 { color: var(--na-text); }
.na-auth-switch { margin: 1.25rem 0 0; text-align: center; }
.na-auth-switch a { color: var(--na-primary); font-weight: 700; }

.na-auth-steps { display: grid; gap: .9rem; margin-top: 2rem; }
.na-auth-steps > div { display: grid; opacity: .58; align-items: center; grid-template-columns: 38px 1fr; }
.na-auth-steps > div.is-current, .na-auth-steps > div.is-complete { opacity: 1; }
.na-auth-steps span { display: grid; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; place-items: center; grid-row: 1 / span 2; }
.na-auth-steps strong, .na-auth-steps small { grid-column: 2; }
.na-auth-steps small { color: inherit; opacity: .7; }

.na-plan-shell { max-width: 980px; margin: 2rem auto; }
.na-plan-header { padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 22px 22px 0 0; color: #FFFFFF; background: linear-gradient(125deg, #9A7BC4, #C1A8E0 65%, #ee96a4); }
.na-plan-header .na-home-kicker { color: #f4b3c0; }
.na-plan-header h1 { margin: .45rem 0; }
.na-plan-header > p { margin: 0; color: rgba(255,255,255,.78); }
.na-plan-header .na-auth-steps { grid-template-columns: repeat(3, 1fr); }
.na-plan-form { padding: clamp(1.25rem, 4vw, 2.5rem); border: 1px solid #E3E7E1; border-top: 0; border-radius: 0 0 22px 22px; background: #FFFFFF; box-shadow: 0 16px 45px rgba(193,168,224, .08); }
.na-plan-question { margin: 0 0 1.5rem; padding: 0; border: 0; }
.na-plan-question legend { margin-bottom: .8rem; color: #9A7BC4; font-size: 1.06rem; font-weight: 750; }
.na-plan-question legend > span.na-step-num { display: inline-grid; width: 28px; height: 28px; margin-right: .4rem; border-radius: 50%; color: #FFFFFF; background: var(--na-primary); place-items: center; font-size: .8rem; }
.na-plan-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.na-plan-options label { display: flex; min-height: 104px; padding: .9rem .7rem; border: 2px solid #E5E9E3; border-radius: 14px; background: #FAFBF9; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; text-align: center; transition: .18s ease; }
.na-plan-options label:hover, .na-plan-options label.is-selected { border-color: var(--na-primary); background: var(--na-sakura-light, #F2F5F8); transform: translateY(-2px); }
.na-plan-options input { position: absolute; opacity: 0; pointer-events: none; }
.na-plan-options i { margin-bottom: .45rem; color: var(--na-primary); font-size: 1.35rem; }
.na-plan-options strong { color: #463F39; font-size: .86rem; }
.na-plan-submit { width: 100%; justify-content: center; }

@media (max-width: 767.98px) {
    .na-auth-shell { grid-template-columns: 1fr; }
    .na-auth-intro { padding: 1.7rem; }
    .na-plan-header .na-auth-steps { grid-template-columns: 1fr; }
    .na-plan-options { grid-template-columns: repeat(2, 1fr); }
}

/* Theme-integrated login */
/* ===== Login — premium centered card ===== */

.na-login-page {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 140px);
    margin: -1rem -0.75rem -3rem;
    padding: 3rem 1rem;
    overflow: hidden;
    background: #F5F8FB;
}

/* Cherry blossom tree watermark on the login page - same asset as the home hero. */
/* Cherry blossom tree watermark on the login page - identical placement and
   sizing to the home hero tree so the two pages feel visually connected. */
.na-login-tree {
    position: absolute;
    right: -3%;
    bottom: 24%;
    width: 82vw;
    height: 82vw;
    max-width: 1040px;
    max-height: 1040px;
    background-image: url('/images/cherry-blossom-tree.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
    opacity: 0.18;
    pointer-events: none;
    filter: saturate(1.15) brightness(1.03);
    transform: rotate(-2deg);
    z-index: 0;
}

@media (max-width: 767.98px) {
    .na-login-tree {
        right: -12%;
        bottom: 16%;
        width: 98vw;
        height: 98vw;
        opacity: 0.14;
    }
}

.na-login-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 440px;
    padding: 2.8rem 2.4rem;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 30px;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(22px) saturate(150%);
    box-shadow:
        0 28px 80px rgba(45, 42, 38, .10),
        0 10px 26px rgba(45, 42, 38, .05),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

.na-login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    margin-bottom: 2rem;
}

.na-login-brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #9A7BC4 0%, #ee96a4 100%);
    color: #FFFFFF;
    font-size: 1.25rem;
    font-weight: 700;
    place-items: center;
    box-shadow: 0 8px 20px rgba(238, 150, 164, .22);
}

.na-login-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.na-login-brand-name {
    color: var(--na-text);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.na-login-brand-jp {
    color: #9B958D;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
}

.na-login-header {
    margin-bottom: 1.8rem;
    text-align: center;
}

.na-login-header h1 {
    margin: 0 0 .35rem;
    color: var(--na-text);
    font-size: clamp(1.8rem, 5vw, 2.35rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.1;
}

.na-login-header p {
    margin: 0;
    color: #8B8580;
    font-size: .96rem;
}

.na-login-wa {
    color: var(--na-primary);
    font-weight: 600;
}

.na-login-form { display: grid; gap: 1.1rem; }
.na-login-validation:empty { display: none; }
.na-login-validation ul {
    margin: 0;
    padding: .75rem 1rem .75rem 1.9rem;
    border-radius: 12px;
    background: #FFF0EE;
    color: #ee96a4;
    font-size: .84rem;
}

.na-login-field { display: grid; gap: .4rem; }
.na-login-field label {
    color: var(--na-text);
    font-size: .82rem;
    font-weight: 700;
}

.na-login-input-wrap { position: relative; }
.na-login-input-wrap > i {
    position: absolute;
    top: 50%;
    left: 1rem;
    color: #A5ADA5;
    font-size: 1rem;
    transform: translateY(-50%);
    transition: color .2s ease;
}

.na-login-input-wrap input {
    width: 100%;
    min-height: 54px;
    padding: .75rem 2.9rem .75rem 2.8rem;
    border: 1.5px solid #fbe3e8;
    border-radius: 14px;
    color: var(--na-text);
    background: rgba(255, 255, 255, .75);
    font-size: .95rem;
    outline: 0;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.na-login-input-wrap input::placeholder { color: #AEB1B4; }
.na-login-input-wrap input:focus {
    border-color: var(--na-primary);
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(238, 150, 164, .10);
}

.na-login-input-wrap:focus-within > i { color: var(--na-primary); }
.na-password-toggle {
    position: absolute;
    top: 50%;
    right: .6rem;
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    color: #8A938A;
    background: transparent;
    place-items: center;
    transform: translateY(-50%);
    transition: color .2s, background .2s;
}

.na-password-toggle:hover {
    color: var(--na-primary);
    background: var(--na-sakura-light);
}

.na-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: -.1rem;
}

.na-login-remember {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #5D655D;
    cursor: pointer;
    font-size: .84rem;
    font-weight: 500;
}

.na-login-remember input { position: absolute; opacity: 0; width: 0; height: 0; }
.na-login-check {
    position: relative;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border: 2px solid #f4b3c0;
    border-radius: 6px;
    background: rgba(255, 255, 255, .7);
    transition: border-color .2s, background .2s, box-shadow .2s;
}

.na-login-check::after {
    position: absolute;
    top: 48%;
    left: 50%;
    width: 5px;
    height: 9px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    content: '';
    opacity: 0;
    transform: translate(-50%, -55%) rotate(45deg);
    transition: opacity .2s;
}

.na-login-remember input:checked ~ .na-login-check {
    border-color: var(--na-primary);
    background: var(--na-primary);
    box-shadow: 0 0 0 3px rgba(238, 150, 164, .12);
}

.na-login-remember input:checked ~ .na-login-check::after { opacity: 1; }
.na-login-remember input:focus ~ .na-login-check { box-shadow: 0 0 0 3px rgba(238, 150, 164, .15); }

.na-login-text-link {
    color: var(--na-primary);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s;
    white-space: nowrap;
}

.na-login-text-link:hover { color: var(--na-primary-dark); text-decoration: underline; }

.na-login-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 54px;
    margin-top: .3rem;
    padding: 0 1.5rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #9A7BC4 0%, #C1A8E0 35%, #ee96a4 100%);
    background-size: 200% 100%;
    color: #3E231A;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(193,168,224, .28);
    transition: transform .2s ease, box-shadow .2s ease, background-position .4s ease;
}

.na-login-submit:hover {
    background-position: 100% 0;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(193,168,224, .34);
}

.na-login-submit:active { transform: translateY(0); }
.na-login-submit i { font-size: 1.05rem; }

.na-login-divider {
    display: flex;
    margin: 1.5rem 0 1rem;
    color: #A6ACA6;
    align-items: center;
    gap: .8rem;
    font-size: .78rem;
    font-weight: 500;
}

.na-login-divider::before, .na-login-divider::after {
    height: 1px;
    background: linear-gradient(90deg, transparent, #fbe3e8 50%, transparent);
    content: '';
    flex: 1;
}

.na-login-create {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    min-height: 50px;
    padding: 0 1.5rem;
    border: 1.5px solid #fbe3e8;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    color: var(--na-primary-dark);
    font-size: .96rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .2s, color .2s, background .2s, box-shadow .2s, transform .2s;
}

.na-login-create:hover {
    border-color: var(--na-primary);
    background: var(--na-sakura-light);
    color: var(--na-primary-dark);
    box-shadow: 0 6px 18px rgba(238, 150, 164, .10);
    transform: translateY(-1px);
}

.na-login-help {
    margin: 1.1rem 0 0;
    color: #8B928D;
    text-align: center;
    font-size: .78rem;
}

.na-login-help a {
    color: var(--na-primary);
    font-weight: 600;
    text-decoration: none;
}

.na-login-help a:hover { text-decoration: underline; }

.na-login-external { margin-top: 1.2rem; text-align: center; }
.na-login-external p {
    margin-bottom: .7rem;
    color: #8B928D;
    font-size: .78rem;
}

.na-login-external form { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.na-login-provider {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1.5px solid var(--na-border);
    border-radius: 50%;
    background: rgba(255, 255, 255, .7);
    color: var(--na-text);
    font-size: 1.1rem;
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
}

.na-login-provider:hover {
    border-color: var(--na-primary);
    background: var(--na-sakura-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(238, 150, 164, .10);
}

@media (max-width: 575.98px) {
    .na-login-page {
        min-height: calc(100vh - 120px);
        margin: -.5rem -0.5rem -2rem;
        padding: 1.8rem .75rem;
    }
    .na-login-card { padding: 2rem 1.5rem; border-radius: 24px; }
    .na-login-header h1 { font-size: 1.7rem; }
    .na-login-options { flex-wrap: wrap; gap: .6rem; }
    .na-login-remember { font-size: .8rem; }
}

/* ===== Register — same centered card + cherry tree as login ===== */

.na-register-page {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 140px);
    margin: -1rem -0.75rem -3rem;
    padding: 3rem 1rem;
    overflow: hidden;
    background: #F5F8FB;
}

.na-register-tree {
    position: absolute;
    right: -3%;
    bottom: 24%;
    width: 82vw;
    height: 82vw;
    max-width: 1040px;
    max-height: 1040px;
    background-image: url('/images/cherry-blossom-tree.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
    opacity: 0.18;
    pointer-events: none;
    filter: saturate(1.15) brightness(1.03);
    transform: rotate(-2deg);
    z-index: 0;
}

@media (max-width: 767.98px) {
    .na-register-tree {
        right: -12%;
        bottom: 16%;
        width: 98vw;
        height: 98vw;
        opacity: 0.14;
    }
}

@media (max-width: 575.98px) {
    .na-register-page {
        min-height: calc(100vh - 120px);
        margin: -.5rem -0.5rem -2rem;
        padding: 1.8rem .75rem;
    }
}

.na-speak-btn.is-speaking {
    box-shadow: 0 0 0 4px rgba(238, 150, 164, 0.18);
    animation: na-audio-pulse 1s ease-in-out infinite;
}

@keyframes na-audio-pulse {
    50% { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .na-speak-btn.is-speaking { animation: none; }
}

.na-speak-btn-sm {
    width: 30px;
    height: 30px;
    font-size: 0.85rem;
}

@media (max-width: 576px) {
    .kana-chart { grid-template-columns: 40px repeat(5, 1fr); gap: 4px; }
    .kana-cell { padding: 6px 2px; }
    .kana-cell .kana-char { font-size: 1.15rem; }
    .kana-cell .kana-romaji { font-size: 0.65rem; }
}

@media (max-width: 768px) {
    .na-hero h1 { font-size: 1.8rem; }
    .flashcard-jp { font-size: 2.5rem; }
}

/* ===== Avatar builder ===== */
.na-avatar-builder {
    padding: 1.25rem;
    background: var(--na-bg);
    border-radius: var(--na-radius);
    border: 1px solid var(--na-border);
}

.na-avatar-section-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.na-avatar-section-heading h5 {
    margin: 0 0 0.25rem;
    color: var(--na-text);
    font-size: 1rem;
    font-weight: 800;
}

.na-avatar-section-heading p {
    margin: 0;
    color: var(--na-text-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

/* Avatar: Upload / Create tabs */
.na-avatar-tabs {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-bottom: 1.1rem;
    background: rgba(238, 150, 164, 0.10);
    border-radius: 999px;
}

.na-avatar-tab {
    border: 0;
    background: transparent;
    color: var(--na-text-muted);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.na-avatar-tab i { margin-right: 0.35rem; }

.na-avatar-tab.is-active {
    background: #FFFFFF;
    color: var(--na-primary);
    box-shadow: 0 1px 4px rgba(45, 42, 38, 0.12);
}

.na-avatar-tabpane { display: none; }
.na-avatar-tabpane.is-active { display: block; }

/* Upload tab */
.na-avatar-upload {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.na-avatar-upload-preview {
    flex: none;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(238, 150, 164, 0.10);
    display: grid;
    place-items: center;
    border: 2px dashed rgba(238, 150, 164, 0.4);
}

.na-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.na-avatar-upload-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    color: var(--na-text-muted);
    font-size: 0.8rem;
}

.na-avatar-upload-empty i { font-size: 1.6rem; }

.na-avatar-upload-controls { flex: 1; min-width: 200px; }

.na-avatar-upload-hint {
    margin: 0.6rem 0 0;
    font-size: 0.78rem;
    color: var(--na-text-muted);
}

.avatar-customizer-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    column-gap: 56px;
    align-items: start;
    width: 100%;
}

.avatar-preview-column {
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.avatar-preview-card {
    width: 100%;
    padding: 24px 28px 28px;
    border: 1px solid var(--na-border);
    border-radius: 18px;
    background: transparent;
}

.avatar-preview-title {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #8F8983;
    margin-bottom: 22px;
}

.avatar-preview-stage {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 20px;
    position: relative;
}

.avatar-preview-stage svg {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 16px;
}

.avatar-randomize-button {
    width: 100%;
}

.avatar-controls-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding-top: 4px;
}

.avatar-controls-column select {
    width: 100%;
    max-width: 570px;
}

@media (max-width: 850px) {
    .avatar-customizer-layout {
        grid-template-columns: 1fr;
        row-gap: 30px;
    }
    .avatar-preview-column {
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
    }
    .avatar-controls-column {
        width: 100%;
    }
}

.na-color-swatch {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--na-border);
    cursor: pointer;
    transition: all var(--na-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--na-text);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
}

.na-color-swatch:hover {
    transform: scale(1.08);
    border-color: var(--na-primary-light);
}

.na-color-swatch.active {
    border-color: var(--na-primary);
    box-shadow: 0 0 0 2px var(--na-sakura-light);
}

.na-form-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--na-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.na-form-select {
    border-color: var(--na-border);
    border-radius: var(--na-radius-sm);
    font-size: 0.95rem;
    color: var(--na-text);
    background-color: #FFFFFF;
}

.na-form-select:focus {
    border-color: var(--na-primary-light);
    box-shadow: 0 0 0 3px var(--na-sakura-light);
}

.na-avatar-builder .avatar-randomize-button {
    width: 100%;
}

/* ===== Identity manage area layout overrides ===== */
.na-manage-layout h1 {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}

.na-manage-layout .na-manage-subtitle {
    color: var(--na-text-muted);
    margin-bottom: 1.5rem;
}

/* ----- Manage sidebar: account card + icon nav ----- */
.na-manage-side {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    position: sticky;
    top: 96px;
}

.na-manage-profile-card {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(135deg, rgba(238, 150, 164, 0.10), rgba(193, 168, 224, 0.10));
    border: 1px solid var(--na-border);
    border-radius: var(--na-radius);
}

.na-manage-avatar {
    flex: none;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--na-primary);
    color: #FFFFFF;
    font-size: 1.2rem;
    font-weight: 800;
    box-shadow: 0 3px 10px rgba(238, 150, 164, 0.35);
}

.na-manage-avatar--img {
    padding: 0;
    object-fit: cover;
    border: 2px solid #FFFFFF;
}

.na-manage-profile-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.na-manage-profile-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--na-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.na-manage-profile-email {
    font-size: 0.78rem;
    color: var(--na-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.na-manage-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #2FA36B;
}

.na-manage-nav-card {
    background: var(--na-surface);
    border: 1px solid var(--na-border);
    border-radius: var(--na-radius);
    padding: 1rem 0.85rem 0.9rem;
    box-shadow: var(--na-shadow);
}

.na-manage-nav-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--na-text-muted);
    margin: 0 0 0.6rem 0.4rem;
}

.na-manage-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--na-text);
    padding: 0.65rem 0.7rem;
    border-radius: var(--na-radius-sm);
    margin-bottom: 0.2rem;
    border-left: 3px solid transparent;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.na-manage-nav .nav-link i {
    flex: none;
    font-size: 1.05rem;
    color: var(--na-text-muted);
    transition: color 0.18s ease;
}

.na-manage-nav .nav-link:hover {
    background: rgba(238, 150, 164, 0.08);
}

.na-manage-nav .nav-link:hover i {
    color: var(--na-primary);
}

.na-manage-nav .nav-link.active {
    background: var(--na-sakura-light);
    border-left-color: var(--na-primary);
    color: var(--na-primary);
}

.na-manage-nav .nav-link.active i {
    color: var(--na-primary);
}

.na-manage-nav-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.na-manage-nav-label {
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.25;
}

.na-manage-nav-desc {
    font-size: 0.72rem;
    color: var(--na-text-muted);
    line-height: 1.3;
}

.na-manage-nav .nav-link.active .na-manage-nav-desc {
    color: var(--na-primary);
    opacity: 0.75;
}

.na-manage-nav-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.65rem 0.75rem;
    background: rgba(238, 150, 164, 0.08);
    border-radius: var(--na-radius-sm);
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--na-text-muted);
}

.na-manage-nav-tip i {
    color: #E8A93D;
    flex: none;
}

@media (max-width: 767.98px) {
    .na-manage-side {
        position: static;
    }
}

.na-manage-card {
    background: var(--na-surface);
    border: 1px solid var(--na-border);
    border-radius: var(--na-radius);
    padding: 1.5rem;
    box-shadow: var(--na-shadow);
}

/* ===== Bootstrap blue → red overrides (scoped to .na-app) ===== */

/* Primary buttons (Login, Register, Change Password, etc.) */
.na-app .btn-primary {
    background-color: var(--na-primary);
    border-color: var(--na-primary);
    color: #FFFFFF;
}

.na-app .btn-primary:hover,
.na-app .btn-primary:focus {
    background-color: var(--na-primary-dark);
    border-color: var(--na-primary-dark);
    color: #FFFFFF;
}

.na-app .btn-primary:active {
    background-color: var(--na-primary-dark);
    border-color: var(--na-primary-dark);
}

.na-app .btn-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(238, 150, 164, 0.25);
}

/* Outline primary buttons */
.na-app .btn-outline-primary {
    color: var(--na-primary);
    border-color: var(--na-primary);
}

.na-app .btn-outline-primary:hover,
.na-app .btn-outline-primary:active {
    background-color: var(--na-primary);
    border-color: var(--na-primary);
    color: #FFFFFF;
}

/* Link buttons (e.g. "Register as a new user", "Forgot your password?") */
.na-app .btn-link {
    color: var(--na-primary);
}

.na-app .btn-link:hover {
    color: var(--na-primary-dark);
}

/* Text primary links */
.na-app .text-primary {
    color: var(--na-primary) !important;
}

.na-app a {
    color: var(--na-primary);
}

.na-app a:hover {
    color: var(--na-primary-dark);
}

/* Form control focus (blue ring → red ring) */
.na-app .form-control:focus,
.na-app .form-select:focus {
    border-color: var(--na-primary-light);
    box-shadow: 0 0 0 0.25rem rgba(238, 150, 164, 0.2);
}

/* Alert primary (info boxes on Identity pages) */
.na-app .alert-primary {
    background-color: var(--na-sakura-light);
    border-color: var(--na-sakura);
    color: var(--na-primary-dark);
}

/* Validation message links */
.na-app .text-danger a,
.na-app .field-validation-error a {
    color: var(--na-primary);
}

/* Checkbox / radio checked state (blue → red) */
.na-app .form-check-input:checked {
    background-color: var(--na-primary);
    border-color: var(--na-primary);
}

.na-app .form-check-input:focus {
    border-color: var(--na-primary-light);
    box-shadow: 0 0 0 0.25rem rgba(238, 150, 164, 0.2);
}

/* Switch toggle */
.na-app .form-switch .form-check-input:checked {
    background-color: var(--na-primary);
    border-color: var(--na-primary);
}

/* ===== Manage area — unified label & button sizing ===== */
/* Make default Identity .form-label look like .na-form-label inside manage cards */
.na-manage-card .form-label:not(.na-form-label) {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--na-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

/* Floating-label inputs: shrink label to match the muted look */
.na-manage-card .form-floating > label {
    font-size: 0.85rem;
    color: var(--na-text-muted);
}

/* Unify button sizes inside manage cards (covers btn-primary, btn-outline, btn-danger, etc.) */
.na-manage-card .btn {
    font-size: 0.95rem;
    padding: 0.5rem 1.5rem;
    border-radius: var(--na-radius-sm);
    font-weight: 500;
    transition: all var(--na-transition);
}

.na-manage-card .btn-sm {
    font-size: 0.85rem;
    padding: 0.35rem 1rem;
}

/* Body text inside manage cards: slightly muted for hierarchy */
.na-manage-card p {
    font-size: 0.9rem;
    color: var(--na-text);
    line-height: 1.6;
}

/* Alerts inside manage cards: slightly smaller */
.na-manage-card .alert {
    font-size: 0.9rem;
}

/* Page title (h4) inside manage cards: consistent across all pages */
.na-manage-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--na-text);
}

/* form-text / help-block hints */
.na-manage-card .form-text {
    font-size: 0.8rem;
    color: var(--na-text-muted);
}

/* ===== Practice hub icons ===== */
.na-practice-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--na-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.na-practice-icon--cards {
    background: var(--na-sakura-light);
    color: var(--na-primary);
    border: 1px solid var(--na-sakura);
}

.na-practice-icon--quiz {
    background: var(--na-bg-subtle);
    color: var(--na-secondary);
    border: 1px solid var(--na-border);
}

/* ===== Homepage: Compact Hero ===== */
.na-hero--compact {
    padding: 1.75rem 1.5rem;
}

.na-hero--compact h1 {
    font-size: 1.85rem;
    margin-bottom: 0.6rem;
}

.na-hero--compact .lead {
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.na-hero--compact .jp-subtitle {
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.na-mascot--sm {
    max-width: 180px;
}

@media (max-width: 991px) {
    .na-mascot--sm {
        max-width: 150px;
    }
}

@media (max-width: 576px) {
    .na-hero--compact {
        padding: 1.25rem 1rem;
    }
    .na-hero--compact h1 {
        font-size: 1.4rem;
    }
}

/* ===== Homepage: Section layout ===== */
.na-section {
    margin-bottom: 0.25rem;
}

.na-section--tight {
    margin-bottom: 0;
}

.na-section-title {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

/* ===== Homepage: Continue Learning — Horizontal Large Card ===== */
.na-continue-card-h {
    background: var(--na-surface);
    border: 1px solid var(--na-border);
    border-radius: var(--na-radius);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--na-shadow);
    transition: all var(--na-transition);
    position: relative;
    overflow: hidden;
}

.na-continue-card-h:hover {
    box-shadow: 0 4px 16px rgba(45, 42, 38, 0.12);
    transform: translateY(-1px);
}

.na-continue-card-h-body {
    flex: 1;
    min-width: 0;
}

.na-continue-card-h-action {
    flex-shrink: 0;
}

.na-continue-card-h-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.na-progress--inline {
    height: 4px;
    border-radius: 0 0 var(--na-radius) var(--na-radius);
}

.na-continue-percent {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--na-primary);
    white-space: nowrap;
}

@media (max-width: 576px) {
    .na-continue-card-h {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .na-continue-card-h-action {
        align-self: flex-end;
    }
}

/* ===== Homepage: Quick Progress — Compact Row ===== */
.na-quick-stats-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--na-surface);
    border: 1px solid var(--na-border);
    border-radius: var(--na-radius);
    padding: 0.75rem 1rem;
    box-shadow: var(--na-shadow);
    flex-wrap: wrap;
}

.na-quick-stat-sm {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.na-quick-stat-sm i {
    font-size: 1.1rem;
}

.na-quick-stat-sm-val {
    font-weight: 700;
}

.na-quick-stat-sm-label {
    color: var(--na-text-muted);
    font-size: 0.75rem;
}

.na-quick-stat-sm--streak i,
.na-quick-stat-sm--streak .na-quick-stat-sm-val {
    color: #f4b3c0;
}

.na-quick-stat-sm--words i,
.na-quick-stat-sm--words .na-quick-stat-sm-val {
    color: var(--na-indigo);
}

.na-quick-stat-sm--goal i,
.na-quick-stat-sm--goal .na-quick-stat-sm-val {
    color: var(--na-secondary);
}

.na-quick-stat-link {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--na-text-muted);
    text-decoration: none;
    transition: color var(--na-transition);
    white-space: nowrap;
}

.na-quick-stat-link:hover {
    color: var(--na-primary);
}

@media (max-width: 576px) {
    .na-quick-stats-row {
        gap: 0.5rem;
        padding: 0.6rem 0.75rem;
    }
    .na-quick-stat-sm {
        font-size: 0.8rem;
    }
}

/* ===== Homepage: Quick Practice Tiles (compact, lighter) ===== */
.na-practice-tile {
    background: var(--na-surface);
    border: 1px solid var(--na-border);
    border-radius: var(--na-radius);
    padding: 1rem 0.75rem;
    text-align: center;
    box-shadow: var(--na-shadow);
    transition: all var(--na-transition);
    cursor: pointer;
}

.na-practice-tile:hover {
    box-shadow: 0 4px 16px rgba(45, 42, 38, 0.10);
    transform: translateY(-2px);
}

.na-practice-tile h6 {
    margin-bottom: 0.1rem;
    color: var(--na-text);
    font-size: 0.9rem;
}

.na-practice-tile-jp {
    color: var(--na-text-muted);
    font-size: 0.7rem;
}

.na-practice-tile-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin: 0 auto 0.5rem;
}

/* Lighter pastel colors */
.na-practice-tile--listening .na-practice-tile-icon {
    background: #F5F8FB;
    color: #ee96a4;
    border: 1px solid #fbe3e8;
}

.na-practice-tile--reading .na-practice-tile-icon {
    background: #EDF0F3;
    color: #C1A8E0;
    border: 1px solid #EDE8F8;
}

.na-practice-tile--speaking .na-practice-tile-icon {
    background: #F2FAF2;
    color: #9A7BC4;
    border: 1px solid #DDD0F0;
}

.na-practice-tile--writing .na-practice-tile-icon {
    background: #EDF0F3;
    color: #C1A8E0;
    border: 1px solid #DDD0F0;
}

.na-practice-tile--listening:hover {
    border-color: #fbe3e8;
}

.na-practice-tile--reading:hover {
    border-color: #EDE8F8;
}

.na-practice-tile--speaking:hover {
    border-color: #DDD0F0;
}

.na-practice-tile--writing:hover {
    border-color: #DDD0F0;
}

/* ===== Homepage: Soft link for "View All Lessons" ===== */
.na-link-soft {
    font-size: 0.85rem;
    color: var(--na-text-muted);
    text-decoration: none;
    transition: color var(--na-transition);
}

.na-link-soft:hover {
    color: var(--na-primary);
}

@media (max-width: 576px) {
    .na-practice-tile {
        padding: 0.75rem 0.5rem;
    }
    .na-practice-tile-icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
        margin-bottom: 0.35rem;
    }
}

/* ===== Community: Layout ===== */
.na-community-header h1 {
    margin-bottom: 0.25rem;
}

.na-community-subtitle {
    color: var(--na-text-muted);
    font-size: 0.95rem;
    margin-bottom: 0;
}

.na-community-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 991px) {
    .na-community-layout {
        grid-template-columns: 1fr;
    }
}

/* ===== Community: Category Tabs ===== */
.na-community-tabs {
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.na-tabs-scroll {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
}

.na-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 0.9rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--na-text-muted);
    background: var(--na-surface);
    border: 1px solid var(--na-border);
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--na-transition);
}

.na-tab:hover {
    color: var(--na-primary);
    border-color: var(--na-primary-light);
    background: #F4F7FA;
}

.na-tab--active,
a.na-tab--active,
a.na-tab--active:visited,
a.na-tab--active:focus {
    color: #FFFFFF;
    background: var(--na-primary);
    border-color: var(--na-primary);
}

/* Force icons + nested span to inherit white when active */
.na-tab--active i,
.na-tab--active .na-tab-jp,
a.na-tab--active i,
a.na-tab--active .na-tab-jp {
    color: #FFFFFF;
}

.na-tab--active:hover,
a.na-tab--active:hover {
    color: #FFFFFF;
    background: var(--na-primary-dark);
    border-color: var(--na-primary-dark);
}

.na-tab--active:hover i,
a.na-tab--active:hover i {
    color: #FFFFFF;
}

.na-tab-jp {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-left: 0.15rem;
}

.na-tab-jp {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-left: 0.15rem;
}

/* ===== Community: Category Tags ===== */
.na-cat-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.na-cat--community {
    background: #EDE8F8;
    color: #9A7BC4;
}

.na-cat--study {
    background: #E1E4E7;
    color: #ee96a4;
}

.na-cat--questions {
    background: #EDE8F8;
    color: #C1A8E0;
}

.na-cat--japan {
    background: #E1E4E7;
    color: #ee96a4;
}

.na-cat--feedback {
    background: #E1E4E7;
    color: #ee96a4;
}

.na-cat--default {
    background: var(--na-bg);
    color: var(--na-text-muted);
}

/* ===== Community: Create Post Prompt ===== */
.na-create-prompt {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.na-create-prompt-avatar {
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    display: inline-flex;
    border-radius: 50%;
}

.na-create-prompt-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 14px rgba(238, 150, 164, 0.4);
}

.na-create-prompt-input {
    flex-grow: 1;
    padding: 0.5rem 0.85rem;
    border-radius: 20px;
    background: var(--na-bg);
    border: 1px solid var(--na-border);
    color: var(--na-text-muted);
    font-size: 0.9rem;
    text-decoration: none;
    transition: all var(--na-transition);
}

.na-create-prompt-input:hover {
    border-color: var(--na-primary-light);
    color: var(--na-primary);
}

/* ===== Community: Post Card ===== */
.na-post-card {
    padding: 1rem 1.15rem;
    margin-bottom: 0.75rem;
    transition: box-shadow var(--na-transition), transform var(--na-transition);
}

.na-post-card:hover {
    box-shadow: 0 6px 24px rgba(45, 42, 38, 0.12);
    transform: translateY(-1px);
}

.na-post-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.na-post-avatar {
    flex-shrink: 0;
}

.na-post-meta {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.na-post-username {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--na-text);
}

.na-post-time {
    font-size: 0.78rem;
    color: var(--na-text-muted);
    opacity: 0.8;
}

.na-post-category {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.na-post-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.na-post-link:hover {
    color: inherit;
}

.na-post-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    line-height: 1.4;
}

.na-post-preview {
    font-size: 0.88rem;
    color: var(--na-text-muted);
    line-height: 1.55;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== Community: Post Actions ===== */
.na-post-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--na-border);
}

.na-post-actions--detail {
    border-top: 1px solid var(--na-border);
}

.na-post-action {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    color: var(--na-text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: all var(--na-transition);
    text-decoration: none;
}

.na-post-action:hover {
    color: var(--na-primary);
    background: rgba(238, 150, 164, 0.06);
}

.na-like-btn--active {
    color: #ee96a4;
}

.na-like-btn--active:hover {
    color: #ee96a4;
    background: rgba(238, 150, 164, 0.06);
}

.na-save-btn--active {
    color: var(--na-gold);
}

.na-delete-btn:hover {
    background: rgba(238, 150, 164, 0.06) !important;
}

/* ===== Community: Post Detail ===== */
.na-post-detail {
    padding: 1.5rem;
}

.na-post-detail-title {
    font-size: 1.35rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.na-post-detail-content {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 0.75rem;
    white-space: pre-wrap;
}

/* ===== Community: Avatar ===== */
.na-avatar-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--na-primary), var(--na-primary-light));
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.na-avatar-img-sm {
    display: block;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
}

.na-avatar-sm--lg {
    width: 40px;
    height: 40px;
    font-size: 0.95rem;
}

.na-avatar-sm--sm {
    width: 26px;
    height: 26px;
    font-size: 0.7rem;
}

.na-avatar-sm--md {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
}

/* Avatar rendered by AvatarBuilder (SVG replaces text initial) */
.na-avatar-inline {
    background: transparent !important;
    padding: 0;
}
.na-avatar-inline svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ===== Community: Sidebar ===== */
.na-sidebar-card {
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.na-sidebar-card h6 {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.na-sidebar-card h6 i {
    color: var(--na-primary);
}

.na-trending-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.na-trending-item {
    text-decoration: none;
}

.na-trending-item:hover {
    text-decoration: none;
}

.na-guidelines-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.na-guidelines-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    font-size: 0.85rem;
    color: var(--na-text);
}

.na-guidelines-list li i {
    color: var(--na-primary);
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
}

.na-popular-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.na-popular-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.4rem;
    border-radius: var(--na-radius-sm);
    transition: background var(--na-transition);
    text-decoration: none;
}

.na-popular-item:hover {
    background: rgba(238, 150, 164, 0.04);
    text-decoration: none;
}

.na-popular-name {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--na-text);
}

.na-popular-count {
    display: block;
    font-size: 0.75rem;
    color: var(--na-text-muted);
}

/* ===== Community: Comments ===== */
.na-comments-section h5 {
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.na-comment-form-card {
    padding: 1rem;
    margin-bottom: 1rem;
}

.na-comments-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.na-comment {
    padding: 0.85rem 1rem;
}

.na-comment-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.na-comment-meta {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.na-comment-username {
    font-weight: 600;
    font-size: 0.85rem;
}

.na-comment-time {
    font-size: 0.75rem;
    color: var(--na-text-muted);
}

.na-comment-body {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-left: 2.5rem;
    margin-bottom: 0.35rem;
}

.na-comment-actions {
    display: flex;
    gap: 0.75rem;
    margin-left: 2.5rem;
}

.na-comment-actions .na-post-action {
    font-size: 0.8rem;
    padding: 0.2rem 0.35rem;
}

/* Replies (indented, 1 level max) */
.na-replies {
    margin-left: 2.5rem;
    margin-top: 0.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--na-border);
}

.na-reply {
    padding: 0.5rem 0;
}

.na-reply .na-comment-header {
    margin-bottom: 0.25rem;
}

.na-reply-body {
    font-size: 0.85rem;
    margin-left: 2rem;
}

/* ===== Community: Pagination ===== */
.na-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 0;
}

.na-pagination .btn-na-outline {
    min-width: 90px;
}

.na-pagination .text-muted {
    font-size: 0.85rem;
    font-weight: 500;
}

/* ===== Community: Create chips ===== */
.na-create-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    margin-top: -0.25rem;
}

.na-chip--sm {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
}

/* ===== Community: Form Inputs ===== */
.na-input {
    border: 1px solid var(--na-border);
    border-radius: var(--na-radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    transition: border-color var(--na-transition), box-shadow var(--na-transition);
}

.na-input:focus {
    border-color: var(--na-primary);
    box-shadow: 0 0 0 3px rgba(238, 150, 164, 0.12);
    outline: none;
}

.na-feedback-check {
    padding: 0.75rem 1rem;
    border-radius: var(--na-radius-sm);
    background: #E1E4E7;
    border: 1px solid #f4b3c0;
}

.na-feedback-check .form-check-label {
    font-weight: 500;
    color: #ee96a4;
}

/* ===== Community: Responsive ===== */
@media (max-width: 576px) {
    .na-create-prompt {
        flex-wrap: wrap;
    }

    .na-create-prompt-input {
        order: 2;
        width: 100%;
    }

    .na-create-prompt .btn-na-primary {
        order: 3;
    }

    .na-post-detail {
        padding: 1rem;
    }

    .na-comment-body,
    .na-comment-actions {
        margin-left: 0;
    }

    .na-replies {
        margin-left: 0.5rem;
        padding-left: 0.75rem;
    }
}

/* ===== Community: User Profile ===== */
.na-profile-hero {
    padding: 2rem;
    background: #fff;
    border-radius: var(--na-radius);
    border: 1px solid var(--na-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.na-profile-hero-inner {
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
}

.na-profile-avatar-large {
    flex-shrink: 0;
}

.na-avatar-xl {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--na-secondary-light), var(--na-secondary));
    color: #4b3468;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.na-avatar-img-xl {
    object-fit: cover;
}

.na-profile-details {
    flex: 1;
    min-width: 0;
}

.na-profile-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--na-text);
}

.na-profile-handle {
    font-size: 0.95rem;
    font-weight: 500;
}

.na-profile-bio {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #4a4a4a;
}

.na-profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.na-badge-pill {
    padding: 0.35rem 0.75rem;
    border-radius: 50px;
    background: #f4f4f7;
    color: #555;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.na-badge-goal {
    background: rgba(238, 150, 164, 0.15);
    color: var(--na-primary-dark);
}

.na-profile-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--na-border);
    text-align: center;
}

.na-profile-stat-box {
    display: flex;
    flex-direction: column;
}

.na-profile-stat-val {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--na-primary);
}

.na-profile-stat-lbl {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--na-text-muted);
}

@media (max-width: 767.98px) {
    .na-profile-hero-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .na-profile-tags {
        justify-content: center;
    }
}


/* ==========================================
   LEARNING PATH
   ========================================== */
.na-learning-path {
    display: flex;
    align-items: center;
    overflow-x: auto;
    padding: 0.5rem 0;
    gap: 0;
}

.na-path-connector {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 0.25rem;
}

.na-path-line {
    width: 24px;
    height: 2px;
    background: var(--na-border);
}

.na-path-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.na-path-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    border: 2px solid var(--na-border);
    background: var(--na-surface);
    color: var(--na-text-muted);
    transition: all var(--na-transition);
}

.na-path-completed .na-path-circle {
    background: var(--na-secondary);
    border-color: var(--na-secondary);
    color: #3E231A;
}

.na-path-completed .na-path-line {
    background: var(--na-secondary);
}

.na-path-in-progress .na-path-circle {
    background: var(--na-primary);
    border-color: var(--na-primary);
    color: #3E231A;
}

.na-path-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--na-text-muted);
    white-space: nowrap;
}

.na-path-completed .na-path-label {
    color: var(--na-secondary);
}

.na-path-in-progress .na-path-label {
    color: var(--na-primary);
    font-weight: 600;
}

/* ==========================================
   CONTINUE LEARNING CARD
   ========================================== */
.na-continue-card {
    border-left: 3px solid var(--na-primary) !important;
    transition: all var(--na-transition);
}

.na-continue-card:hover {
    border-left-color: var(--na-primary-dark) !important;
    box-shadow: 0 2px 16px rgba(238, 150, 164, 0.12);
}

.na-continue-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--na-sakura-light);
    color: var(--na-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* ==========================================
   FILTER CHIPS
   ========================================== */
.na-chip {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--na-text);
    background: var(--na-surface);
    border: 1px solid var(--na-border);
    text-decoration: none;
    transition: all var(--na-transition);
    white-space: nowrap;
}

.na-chip:hover {
    border-color: var(--na-primary);
    color: var(--na-primary);
    text-decoration: none;
}

.na-chip-active {
    background: var(--na-primary);
    color: #FFFFFF !important;
    border-color: var(--na-primary);
}

.na-chip-active:hover {
    background: var(--na-primary-dark);
    color: #FFFFFF !important;
    border-color: var(--na-primary-dark);
}

.na-checkbox-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 1rem;
    border-radius: 99px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--na-text, #2d3436);
    background: var(--na-surface, #ffffff);
    border: 1.5px solid var(--na-border, #e9ecef);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}
.na-checkbox-pill:hover {
    border-color: var(--na-primary, #ff8da1);
    color: var(--na-primary, #ff8da1);
    transform: translateY(-1px);
}
.na-checkbox-pill.is-checked {
    background: #FFF0F3;
    color: #e84393;
    border-color: #ff8da1;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(255, 141, 161, 0.2);
}

.na-card-focus {
    outline: 3px solid var(--na-primary, #ff8da1) !important;
    outline-offset: 3px;
    box-shadow: 0 8px 24px rgba(255, 141, 161, 0.25) !important;
    transform: translateY(-3px);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================
   DIFFICULTY LABEL (replaces stars)
   ========================================== */
.na-difficulty-label {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.na-diff-1 { background: #EDE8F8; color: #9A7BC4; }
.na-diff-2 { background: #EDE8F8; color: #C1A8E0; }
.na-diff-3 { background: #E1E4E7; color: #ee96a4; }
.na-diff-4 { background: #E1E4E7; color: #ee96a4; }
.na-diff-5 { background: #E1E4E7; color: #ee96a4; }

/* ==========================================
   SMALL PROGRESS BAR (for cards)
   ========================================== */
.na-progress-sm {
    height: 5px;
}

/* ==========================================
   NEXT LESSON CARD
   ========================================== */
.na-next-lesson-card {
    border-left: 3px solid var(--na-primary) !important;
    transition: all var(--na-transition);
}

.na-next-lesson-card:hover {
    box-shadow: 0 4px 20px rgba(45, 42, 38, 0.12);
}

.na-next-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--na-sakura-light);
    color: var(--na-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

/* ==========================================
   STICKY SIDEBAR
   ========================================== */
.na-sidebar-sticky {
    position: sticky;
    top: 110px;
}

@media (max-width: 991.98px) {
    .na-sidebar-sticky {
        position: static;
    }
}

/* ==========================================
   LESSON TABLE OF CONTENTS
   ========================================== */
.na-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.na-toc-item {
    margin-bottom: 0.35rem;
}

.na-toc-link {
    display: block;
    padding: 0.3rem 0.6rem;
    font-size: 0.82rem;
    color: var(--na-text-muted);
    text-decoration: none;
    border-radius: var(--na-radius-sm);
    border-left: 2px solid transparent;
    transition: all 0.2s ease;
}

.na-toc-link:hover {
    color: var(--na-primary);
    background: var(--na-sakura-light);
    text-decoration: none;
}

.na-toc-item.na-toc-active .na-toc-link,
.na-toc-link.na-toc-active {
    color: var(--na-primary);
    font-weight: 600;
    border-left-color: var(--na-primary);
    background: var(--na-sakura-light);
}

/* ==========================================
   INTERACTIVE KANA CELLS
   ========================================== */
.na-interactive-cell {
    transition: all 0.2s ease;
    border-radius: 6px;
}

.na-interactive-cell:hover {
    background: var(--na-sakura-light) !important;
}

.na-cell-speaking {
    background: var(--na-sakura) !important;
}

/* Hide old difficulty stars if any remain */
.na-difficulty .bi-star-fill,
.na-difficulty .bi-star {
    display: none;
}

/* ==========================================
   COMPACT LEARNING PATH (inline)
   ========================================== */
.na-learning-path-compact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.85rem;
}

.na-path-dash {
    color: var(--na-border);
    font-weight: 300;
    letter-spacing: -1px;
    user-select: none;
}

.na-path-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 500;
    color: var(--na-text-muted);
    white-space: nowrap;
}

.na-path-inline.na-path-completed {
    color: var(--na-secondary);
}

.na-path-inline.na-path-completed i {
    color: var(--na-secondary);
}

.na-path-inline.na-path-in-progress {
    color: var(--na-primary);
    font-weight: 600;
}

.na-path-inline.na-path-in-progress i {
    color: var(--na-primary);
}

/* ==========================================
   AI TUTOR — SAKURA FLOATING BUTTON
   ========================================== */
.na-tutor-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--na-sakura);
    box-shadow: 0 4px 20px rgba(251, 227, 232, 0.35);
    cursor: pointer;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    padding: 0;
    line-height: 1;
    transition: all 0.3s ease;
}

.na-tutor-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 28px rgba(251, 227, 232, 0.5);
}

.na-tutor-fab svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: block;
    overflow: visible;
}
.na-tutor-fab .ai-sakura-icon {
    width: 40px;
    height: 40px;
    display: block;
    overflow: visible;
    flex-shrink: 0;
}

.na-tutor-fab .na-tutor-tooltip {
    position: absolute;
    right: 60px;
    background: var(--na-text);
    color: #FFFFFF;
    font-size: 0.75rem;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.na-tutor-fab:hover .na-tutor-tooltip {
    opacity: 1;
}

/* ==========================================
   AI TUTOR — CHAT PANEL
   ========================================== */
.na-tutor-panel {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 380px;
    height: 520px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    background: var(--na-surface);
    border: 1px solid var(--na-border);
    border-radius: var(--na-radius);
    box-shadow: 0 8px 40px rgba(45, 42, 38, 0.15);
    z-index: 1050;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.na-tutor-panel.na-tutor-open {
    display: flex;
}

.na-tutor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--na-sakura-light);
    border-bottom: 1px solid var(--na-border);
}

.na-tutor-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.na-tutor-header svg {
    width: 20px;
    height: 20px;
}

.na-tutor-header h6 {
    margin: 0;
    font-size: 0.9rem;
}

.na-tutor-header small {
    display: block;
    font-size: 0.7rem;
    color: var(--na-text-muted);
}

.na-tutor-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--na-text-muted);
    cursor: pointer;
    padding: 0.2rem;
    line-height: 1;
}

.na-tutor-close:hover {
    color: var(--na-text);
}

.na-tutor-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1rem;
    min-height: 180px;
}

.na-tutor-msg {
    margin-bottom: 0.6rem;
    font-size: 0.82rem;
    line-height: 1.5;
    animation: na-msg-in 0.25s ease;
}

@keyframes na-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.na-tutor-msg-bot {
    background: var(--na-sakura-light);
    color: var(--na-text);
    padding: 0.5rem 0.75rem;
    border-radius: 12px 12px 12px 4px;
    max-width: 90%;
}

.na-tutor-msg-user {
    background: var(--na-primary);
    color: #FFFFFF;
    padding: 0.5rem 0.75rem;
    border-radius: 12px 12px 4px 12px;
    max-width: 90%;
    margin-left: auto;
}

/* Small "9:41 AM" stamp under each chat bubble. */
.na-tutor-msg-time {
    font-size: 0.62rem;
    color: var(--na-muted, #8a8a8a);
    margin: -0.35rem 0.25rem 0.6rem;
    user-select: none;
}

.na-tutor-msg-time-user {
    text-align: right;
}

.na-tutor-quick-prompts {
    padding: 0.5rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    border-top: 1px solid var(--na-border);
}

.na-tutor-quick-btn {
    font-size: 0.72rem;
    padding: 0.3rem 0.6rem;
    border-radius: 99px;
    background: var(--na-sakura-light);
    color: var(--na-primary);
    border: 1px solid var(--na-sakura);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.na-tutor-quick-btn:hover {
    background: var(--na-sakura);
    color: #FFFFFF;
    border-color: var(--na-sakura);
}

.na-tutor-input-area {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--na-border);
}

.na-tutor-input {
    flex: 1;
    border: 1px solid var(--na-border);
    border-radius: 99px;
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
    outline: none;
    background: var(--na-bg);
    color: var(--na-text);
}

.na-tutor-input:focus {
    border-color: var(--na-primary);
}

.na-tutor-input::placeholder {
    color: var(--na-text-muted);
}

.na-tutor-send {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--na-primary);
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.na-tutor-send:hover {
    background: var(--na-primary-dark);
}

.na-tutor-send:disabled {
    background: var(--na-border);
    cursor: not-allowed;
}

/* Mobile */
@media (max-width: 576px) {
    .na-tutor-panel {
        width: calc(100% - 32px);
        right: 16px;
        bottom: 16px;
        max-height: 70vh;
    }
    .na-tutor-fab {
        bottom: 16px;
        right: 16px;
    }
}

/* Typing indicator */
.na-tutor-typing {
    display: inline-flex;
    gap: 4px;
    padding: 0.5rem 0.75rem;
    background: var(--na-sakura-light);
    border-radius: 12px 12px 12px 4px;
}

.na-tutor-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--na-text-muted);
    animation: na-typing-bounce 1.2s infinite;
}

.na-tutor-typing span:nth-child(2) { animation-delay: 0.2s; }
.na-tutor-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes na-typing-bounce {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-6px); }
}

/* ==========================================
   SAKURA CURSOR TRAIL (subtle)
   ========================================== */
.na-sakura-petal {
    position: fixed;
    width: 7px;
    height: 7px;
    border-radius: 50% 0 50% 0;
    background: radial-gradient(circle at 30% 30%, #fbdce3 0%, #f4b3c0 100%);
    opacity: 0.5;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 0.7s ease, transform 0.7s ease;
}

/* ==========================================
   HIGHLIGHT TRANSLATION POPUP
   ========================================== */
.na-translate-popup {
    position: fixed;
    width: 240px;
    background: #FFFFFF;
    border: 1px solid var(--na-border);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(45, 42, 38, 0.14);
    padding: 12px 14px 10px;
    z-index: 1060;
    display: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    font-family: inherit;
}

.na-translate-popup--visible {
    opacity: 1;
    transform: translateY(0);
}

.na-translate-header {
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--na-border);
}

.na-translate-original {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--na-text);
}

.na-translate-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.na-translate-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--na-text-muted);
    min-width: 56px;
    flex-shrink: 0;
}

.na-translate-value {
    font-size: 0.9rem;
    color: var(--na-primary);
    font-weight: 600;
}

.na-translate-speak {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--na-border);
    background: var(--na-bg);
    color: var(--na-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--na-transition);
    font-size: 0.85rem;
    padding: 0;
}

.na-translate-speak:hover {
    background: var(--na-primary);
    color: #FFFFFF;
    border-color: var(--na-primary);
}

.na-translate-loading {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--na-text-muted);
    font-size: 0.85rem;
    padding: 4px 0;
}

.na-translate-loading-icon {
    animation: na-spin 1.2s linear infinite;
}

@keyframes na-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.na-translate-matched {
    display: block;
    font-size: 0.7rem;
    color: var(--na-text-muted);
    margin-top: 2px;
}

.na-translate-explain-row {
    margin-top: 2px;
}

.na-translate-explain {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--na-text-muted);
}

/* ==========================================
   EXPLORE JAPAN PLACEHOLDER
   ========================================== */
.na-explore-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
}
.na-explore-placeholder-icon {
    opacity: 0.7;
}
.na-japan-map-hero-icon {
    font-size: 5rem;
    line-height: 1;
    display: inline-block;
    color: var(--na-primary, #ee96a4);
}

.na-explore-tiles-3 .na-explore-preview-tile {
    min-height: 110px;
    justify-content: center;
}

/* Constrain the 3-tile row total width to match the video embed (820px max)
   so that "3 tiles side-by-side" visually matches the video frame width above. */
.na-explore-tiles-3 {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 575.98px) {
    .na-japan-map-hero-icon {
        font-size: 4rem;
    }
}

/* Solo tile — when Regions is the only CTA (other categories moved into Regions) */
.na-explore-preview-tile--solo {
    min-height: 130px;
    padding: 1.5rem 1rem;
    background:
        linear-gradient(135deg, #FFF8FA 0%, #FFE9EE 100%);
    border: 1px solid rgba(238, 150, 164, 0.20);
    box-shadow: 0 6px 18px rgba(238, 150, 164, 0.08);
    gap: 0.4rem;
    color: var(--na-primary, #ee96a4);
    font-size: 1rem;
    font-weight: 600;
}

.na-explore-preview-tile--solo i {
    font-size: 2rem;
    color: var(--na-primary, #ee96a4);
}

.na-explore-preview-tile--solo:hover {
    background: var(--na-primary, #ee96a4);
    color: #FFFFFF;
    border-color: var(--na-primary, #ee96a4);
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(238, 150, 164, 0.25);
}

.na-explore-preview-tile--solo:hover i {
    color: #FFFFFF;
}

.na-explore-preview-tile-hint {
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--na-text-muted, #6B6B6B);
    letter-spacing: 0.02em;
}

.na-explore-preview-tile--solo:hover .na-explore-preview-tile-hint {
    color: rgba(255, 255, 255, 0.85);
}

.na-explore-preview-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 8px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid var(--na-border, #fbe3e8);
    color: var(--na-text-muted);
    font-size: 0.85rem;
    transition: all 0.2s ease;
    text-decoration: none;
}
a.na-explore-preview-tile,
a.na-explore-preview-tile:hover,
a.na-explore-preview-tile:focus {
    color: var(--na-text-muted);
    text-decoration: none;
}
.na-explore-preview-tile i {
    font-size: 1.5rem;
    color: var(--na-primary);
}
.na-explore-preview-tile:hover {
    background: var(--na-sakura-light, #FFF0F3);
    border-color: var(--na-sakura, #fbe3e8);
}

/* Featured video embed on Explore Japan landing */
.na-video-embed {
    max-width: 820px;
    margin: 0 auto;
    background: var(--na-surface, #FFFFFF);
    border: 1px solid var(--na-border, #fbe3e8);
    border-radius: 16px;
    padding: 16px 16px 20px;
    box-shadow: 0 6px 24px rgba(45, 42, 38, 0.06);
}

.na-video-embed-header {
    text-align: center;
    margin-bottom: 12px;
}

.na-video-embed-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--na-text, #2D2A26);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.na-video-embed-title i {
    color: #ee96a4;
    font-size: 1.25rem;
}

.na-video-embed-title-jp {
    font-size: 0.85rem;
    color: var(--na-primary);
    font-weight: 500;
    padding: 2px 8px;
    border: 1px solid var(--na-sakura, #fbe3e8);
    border-radius: 999px;
    background: var(--na-sakura-light, #FFF0F3);
}

.na-video-embed-subtitle {
    font-size: 0.88rem;
    color: var(--na-text-muted);
    margin-top: 6px;
}

/* Header with inline CTA — text on the left (centered), CTA on the right */
.na-video-embed-header--with-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
}

.na-video-embed-header--with-cta .na-video-embed-header-text {
    flex: 1 1 auto;
    text-align: center;
    min-width: 0;
}

.na-video-embed-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.75rem;
    background: var(--na-primary, #ee96a4);
    color: #FFFFFF !important;
    border-radius: var(--na-radius-sm, 8px);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(238, 150, 164, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    white-space: nowrap;
    min-width: 150px;
    justify-content: center;
}

.na-video-embed-cta:hover {
    background: var(--na-primary-dark, #ee96a4);
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(238, 150, 164, 0.35);
}

.na-video-embed-cta:visited,
.na-video-embed-cta:active,
.na-video-embed-cta:focus {
    color: #FFFFFF !important;
}

.na-video-embed-cta i {
    font-size: 1.1rem;
    color: #FFFFFF;
    line-height: 1;
}

.na-video-embed-cta span {
    color: #FFFFFF;
    font-weight: 600;
    letter-spacing: 0.01em;
}

@media (max-width: 575.98px) {
    .na-video-embed-header--with-cta {
        flex-direction: column;
        gap: 0.65rem;
    }
}

/* Left-aligned header variant — overrides the default centered alignment */
.na-video-embed-header--left {
    text-align: left;
}

.na-video-embed-header--left .na-video-embed-title {
    display: inline-flex;
}

.na-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #000000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.na-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 575.98px) {
    .na-video-embed {
        padding: 12px 12px 16px;
        border-radius: 12px;
    }
    .na-video-embed-title {
        font-size: 1.05rem;
    }
}

/* ==========================================
   HOME MOTIVATION STRIP
   ========================================== */
.na-motivation-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 10px 16px;
    border-radius: 12px;
    background: var(--na-surface, #FFFFFF);
    border: 1px solid var(--na-border, #fbe3e8);
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.na-motivation-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--na-text, #2D2A26);
}
.na-motivation-item i {
    font-size: 1.1rem;
}
.na-motivation-item--streak i { color: #ee96a4; }
.na-motivation-item--goal i { color: var(--na-primary); }
.na-motivation-item--next i { color: #C1A8E0; }

/* ==========================================
   HOME QUICK ACTIONS
   ========================================== */
.na-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}
.na-quick-action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--na-bg, #FAFAF7);
    border: 1px solid var(--na-border, #fbe3e8);
    text-decoration: none;
    color: var(--na-text, #2D2A26);
    font-size: 0.88rem;
    font-weight: 500;
    transition: all 0.2s ease;
}
.na-quick-action:hover {
    border-color: var(--na-sakura, #fbe3e8);
    background: var(--na-sakura-light, #FFF0F3);
    color: var(--na-primary);
    text-decoration: none;
}
.na-quick-action i {
    font-size: 1.3rem;
    color: var(--na-primary);
    flex-shrink: 0;
}

/* ==========================================
   PROGRESS STREAK / CALENDAR / ACHIEVEMENTS
   ========================================== */
.na-progress-streak {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background: var(--na-sakura-light, #FFF0F3);
    border: 1px solid var(--na-sakura, #fbe3e8);
}
.na-progress-streak-icon {
    font-size: 2rem;
    color: #ee96a4;
}
.na-progress-streak-info {
    flex: 1;
}
.na-progress-streak-val {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ee96a4;
}
.na-progress-streak-label {
    font-size: 0.85rem;
    color: var(--na-text-muted);
}

.na-progress-rewards {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.na-reward-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--na-bg, #FAFAF7);
    border: 1px solid var(--na-border, #fbe3e8);
    font-size: 0.8rem;
    color: var(--na-text-muted);
}
.na-reward-badge--locked {
    opacity: 0.5;
}
.na-reward-badge--unlocked {
    border-color: var(--na-gold, #ee96a4);
    color: var(--na-gold, #ee96a4);
    background: #F2F5F8;
}

/* ==========================================
   COMMUNITY FRIENDS TAB (future)
   ========================================== */
.na-community-friends-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--na-bg, #FAFAF7);
    border: 1px solid var(--na-border, #fbe3e8);
    font-size: 0.82rem;
    color: var(--na-text-muted);
    text-decoration: none;
    transition: all 0.2s ease;
}
.na-community-friends-btn:hover {
    border-color: var(--na-sakura, #fbe3e8);
    background: var(--na-sakura-light, #FFF0F3);
    color: var(--na-primary);
    text-decoration: none;
}

/* ==========================================
   PRACTICE SYSTEM — Redesigned
   ========================================== */

/* -- Today's Practice Stats -- */
.na-today-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
.na-today-stat {
    text-align: center;
    padding: 20px 12px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid var(--na-border, #fbe3e8);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.na-today-stat:hover {
    border-color: var(--na-sakura, #fbe3e8);
    box-shadow: 0 2px 12px rgba(238, 150, 164,0.08);
}
.na-today-stat__number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--na-primary, #ee96a4);
    line-height: 1.1;
}
.na-today-stat__icon {
    font-size: 1.6rem;
    line-height: 1.1;
}
.na-today-stat__label {
    font-size: 0.82rem;
    color: var(--na-text-muted, #888888);
    margin-top: 4px;
}
.na-today-start {
    margin-top: 20px;
    text-align: center;
}

/* -- Practice Section Header -- */
.na-practice-section {
    margin-bottom: 36px;
}
.na-practice-section__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--na-text, #333333);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.na-practice-section__title i {
    color: var(--na-primary, #ee96a4);
}

/* -- Skill Tiles (Listening / Reading / Speaking / Writing) -- */
.na-skill-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.na-skill-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid var(--na-border, #fbe3e8);
    text-decoration: none;
    color: var(--na-text, #333333);
    transition: all 0.2s ease;
    cursor: pointer;
}
.na-skill-tile:hover {
    border-color: var(--na-sakura, #fbe3e8);
    background: var(--na-sakura-light, #FFF0F3);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(238, 150, 164,0.08);
}
.na-skill-tile__icon {
    font-size: 1.8rem;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--na-bg, #FAFAF7);
}
.na-skill-tile__info h6 {
    margin: 0 0 2px;
    font-weight: 600;
    font-size: 0.95rem;
}
.na-skill-tile__info small {
    color: var(--na-text-muted, #888888);
    font-size: 0.78rem;
}

/* -- Topic Chips / Grid -- */
.na-topic-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.na-topic-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 24px;
    background: #FFFFFF;
    border: 1px solid var(--na-border, #fbe3e8);
    font-size: 0.85rem;
    color: var(--na-text, #333333);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}
.na-topic-chip:hover {
    border-color: var(--na-sakura, #fbe3e8);
    background: var(--na-sakura-light, #FFF0F3);
    text-decoration: none;
    transform: translateY(-1px);
}
.na-topic-chip__emoji {
    font-size: 1.1rem;
}

/* -- Review Cards (Flashcards / Quizzes) -- */
.na-review-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.na-review-card {
    padding: 20px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid var(--na-border, #fbe3e8);
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
}
.na-review-card:hover {
    border-color: var(--na-sakura, #fbe3e8);
    box-shadow: 0 2px 12px rgba(238, 150, 164,0.08);
    text-decoration: none;
}
.na-review-card__icon {
    font-size: 1.4rem;
    margin-bottom: 8px;
    color: var(--na-primary, #ee96a4);
}
.na-review-card h6 {
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 0.95rem;
}
.na-review-card small {
    color: var(--na-text-muted, #888888);
    font-size: 0.78rem;
}

/* -- Challenge Cards -- */
.na-challenge-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.na-challenge-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid var(--na-border, #fbe3e8);
    text-decoration: none;
    color: var(--na-text, #333333);
    transition: all 0.2s ease;
    cursor: pointer;
}
.na-challenge-card:hover {
    border-color: var(--na-sakura, #fbe3e8);
    background: var(--na-sakura-light, #FFF0F3);
    text-decoration: none;
    transform: translateY(-1px);
}
.na-challenge-card__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}
.na-challenge-card__label {
    font-weight: 600;
    font-size: 0.88rem;
}

/* -- Skill Page Layout -- */
.na-skill-hero {
    text-align: center;
    padding: 32px 0 24px;
}
.na-skill-hero__icon {
    font-size: 3rem;
    margin-bottom: 8px;
}
.na-skill-hero h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.na-skill-hero__jp {
    color: var(--na-text-muted, #888888);
    font-size: 0.9rem;
}
.na-skill-hero__desc {
    color: var(--na-text-muted, #888888);
    font-size: 0.88rem;
    margin-top: 6px;
}

/* -- Skill Recommended Practice -- */
.na-skill-recommended {
    background: var(--na-bg, #FAFAF7);
    border: 1px solid var(--na-border, #fbe3e8);
    border-radius: 16px;
    padding: 24px;
    margin: 20px 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.na-skill-recommended__info h6 {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 2px;
}
.na-skill-recommended__info small {
    color: var(--na-text-muted, #888888);
}

/* -- Skill Mode Selection Grid -- */
.na-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
/* These cards are <a> tags, so they must be told to be BLOCK — left as the
   default `inline` the border fragments around the text lines and the card
   turns into those half-open "ghost" boxes. */
.na-mode-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 132px;
    padding: 18px 16px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid var(--na-sakura-light, #fbe3e8);
    text-decoration: none;
    color: var(--na-text, #333333);
    transition: border-color .2s ease, background .2s ease,
                transform .2s ease, box-shadow .2s ease;
    cursor: pointer;
    text-align: center;
}
.na-mode-card:hover {
    border-color: var(--na-primary, #ee96a4);
    background: var(--na-sakura-light, #FFF0F3);
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(238, 150, 164, 0.18);
}
.na-mode-card:focus-visible {
    outline: 2px solid var(--na-primary, #ee96a4);
    outline-offset: 3px;
}
.na-mode-card--disabled {
    cursor: not-allowed;
    opacity: .55;
}
.na-mode-card--disabled:hover {
    transform: none;
    box-shadow: none;
}
.na-mode-card--disabled:hover .na-mode-icon,
.na-mode-card__icon,
.na-mode-icon {
    font-size: 1.75rem;
    line-height: 1;
}
.na-mode-card__label,
.na-mode-title {
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.3;
    color: var(--na-text, #333333);
}
.na-mode-card__desc,
.na-mode-desc {
    color: var(--na-text-muted, #888888);
    font-size: 0.76rem;
    line-height: 1.35;
}

/* -- Lesson Practice (inline in lesson detail) -- */
.na-lesson-practice {
    background: var(--na-bg, #FAFAF7);
    border: 1px solid var(--na-border, #fbe3e8);
    border-radius: 16px;
    padding: 24px;
    margin-top: 24px;
}
.na-lesson-practice__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.na-lesson-practice__header i {
    color: var(--na-primary, #ee96a4);
}
.na-lesson-practice__header h5 {
    margin: 0;
    font-weight: 700;
    font-size: 1.05rem;
}
.na-lesson-practice__sub {
    color: var(--na-text-muted, #888888);
    font-size: 0.82rem;
    margin-bottom: 16px;
}

/* -- Lesson Practice Mode Tabs -- */
.na-lp-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.na-lp-tab {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 500;
    background: #FFFFFF;
    border: 1px solid var(--na-border, #fbe3e8);
    color: var(--na-text-muted, #888888);
    cursor: pointer;
    transition: all 0.2s ease;
}
.na-lp-tab:hover {
    border-color: var(--na-sakura, #fbe3e8);
    color: var(--na-primary, #ee96a4);
}
.na-lp-tab--active {
    background: var(--na-primary, #ee96a4);
    color: #FFFFFF;
    border-color: var(--na-primary, #ee96a4);
}

/* -- Lesson Practice Content Area -- */
.na-lp-content {
    min-height: 200px;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid var(--na-border, #fbe3e8);
    padding: 24px;
}
.na-lp-flashcard {
    text-align: center;
    padding: 40px 20px;
}
.na-lp-flashcard__char {
    font-size: 4rem;
    font-weight: 700;
    color: var(--na-text, #333333);
    margin-bottom: 8px;
}
.na-lp-flashcard__reading {
    font-size: 1.2rem;
    color: var(--na-primary, #ee96a4);
    margin-bottom: 4px;
}
.na-lp-flashcard__meaning {
    color: var(--na-text-muted, #888888);
    font-size: 0.9rem;
}
.na-lp-mcq {
    padding: 16px 0;
}
.na-lp-mcq__question {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 16px;
}
.na-lp-mcq__options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.na-lp-mcq__option {
    padding: 14px;
    border-radius: 10px;
    border: 1px solid var(--na-border, #fbe3e8);
    text-align: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #FFFFFF;
}
.na-lp-mcq__option:hover {
    border-color: var(--na-sakura, #fbe3e8);
    background: var(--na-sakura-light, #FFF0F3);
}
.na-lp-mcq__option--selected {
    border-color: var(--na-primary, #ee96a4);
    background: #F4F7FA;
}
.na-lp-mcq__option--correct {
    border-color: #C1A8E0;
    background: #F0FFF0;
    color: #C1A8E0;
}
.na-lp-mcq__option--wrong {
    border-color: #ee96a4;
    background: #FFF0F0;
    color: #ee96a4;
}
.na-lp-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--na-border, #fbe3e8);
    font-size: 0.82rem;
    color: var(--na-text-muted, #888888);
}
.na-lp-progress__bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--na-border, #fbe3e8);
    margin: 0 12px;
    overflow: hidden;
}
.na-lp-progress__fill {
    height: 100%;
    border-radius: 2px;
    background: var(--na-primary, #ee96a4);
    transition: width 0.3s ease;
}
.na-lp-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

/* -- Mode Runner (generic practice session) -- */
.na-runner {
    max-width: 640px;
    margin: 0 auto;
}
.na-runner__header {
    text-align: center;
    margin-bottom: 24px;
}
.na-runner__header h4 {
    font-weight: 700;
}
.na-runner__header small {
    color: var(--na-text-muted, #888888);
}
.na-runner__area {
    background: #FFFFFF;
    border: 1px solid var(--na-border, #fbe3e8);
    border-radius: 16px;
    padding: 32px;
    min-height: 280px;
    margin-bottom: 20px;
}
.na-runner__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.na-runner__timer {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--na-primary, #ee96a4);
    font-variant-numeric: tabular-nums;
}

/* -- Topic Practice Page -- */
.na-topic-header {
    text-align: center;
    padding: 28px 0 20px;
}
.na-topic-header__emoji {
    font-size: 3rem;
    margin-bottom: 8px;
}
.na-topic-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
}
.na-topic-mode-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 480px;
    margin: 0 auto;
}
.na-topic-mode-item {
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--na-border, #fbe3e8);
    text-align: center;
    text-decoration: none;
    color: var(--na-text, #333333);
    transition: all 0.2s ease;
}
.na-topic-mode-item:hover {
    border-color: var(--na-sakura, #fbe3e8);
    background: var(--na-sakura-light, #FFF0F3);
    text-decoration: none;
    transform: translateY(-1px);
}
.na-topic-mode-item__icon {
    font-size: 1.6rem;
    margin-bottom: 6px;
}
.na-topic-mode-item__label {
    font-weight: 600;
    font-size: 0.88rem;
}

/* -- Speed Round -- */
.na-speed-timer {
    font-size: 3rem;
    font-weight: 800;
    text-align: center;
    color: var(--na-primary, #ee96a4);
    font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
}
.na-speed-score {
    text-align: center;
    font-size: 1rem;
    color: var(--na-text-muted, #888888);
    margin-bottom: 24px;
}

/* -- Sentence Builder -- */
.na-sb-pieces {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
    min-height: 52px;
}
.na-sb-piece {
    padding: 8px 18px;
    border-radius: 8px;
    background: #FFFFFF;
    border: 2px solid var(--na-border, #fbe3e8);
    font-size: 1.1rem;
    cursor: grab;
    user-select: none;
    transition: all 0.15s ease;
}
.na-sb-piece:hover {
    border-color: var(--na-sakura, #fbe3e8);
}
.na-sb-piece--placed {
    border-color: var(--na-primary, #ee96a4);
    background: #F4F7FA;
}
.na-sb-answer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    min-height: 52px;
    padding: 16px;
    border: 2px dashed var(--na-border, #fbe3e8);
    border-radius: 12px;
    margin-bottom: 16px;
}

/* -- Dictation -- */
.na-dictation-input {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--na-border, #fbe3e8);
    border-radius: 10px;
    font-size: 1.2rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease;
}
.na-dictation-input:focus {
    border-color: var(--na-primary, #ee96a4);
}

/* -- Adaptive Review -- */
.na-adaptive-card {
    background: var(--na-bg, #FAFAF7);
    border: 1px solid var(--na-border, #fbe3e8);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 16px;
}
.na-adaptive-card__tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    margin-right: 6px;
    margin-bottom: 6px;
}
.na-adaptive-card__tag--weak {
    background: #FFF0F0;
    color: #ee96a4;
    border: 1px solid #E1E4E7;
}
.na-adaptive-card__tag--review {
    background: #F2F5F8;
    color: #ee96a4;
    border: 1px solid #f4b3c0;
}

/* -- Conversation / Role Play Messages -- */
.na-conversation-area {
    max-height: 400px;
    overflow-y: auto;
    padding: 16px;
    background: var(--na-bg, #FAFAF7);
    border-radius: 12px;
    border: 1px solid var(--na-border, #fbe3e8);
    margin-bottom: 12px;
}
.na-conv-msg {
    padding: 10px 16px;
    border-radius: 16px;
    margin-bottom: 8px;
    max-width: 80%;
    font-size: 0.9rem;
    line-height: 1.5;
    animation: na-fade-in 0.3s ease;
}
.na-conv-msg--bot {
    background: #FFFFFF;
    border: 1px solid var(--na-border, #fbe3e8);
    color: var(--na-text, #333333);
    margin-right: auto;
}
.na-conv-msg--user {
    background: var(--na-primary, #ee96a4);
    color: #FFFFFF;
    margin-left: auto;
    text-align: right;
}
@keyframes na-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* -- Sentence Builder Word Chips -- */
.na-chip--clickable {
    cursor: pointer;
    transition: all 0.15s ease;
}
.na-chip--clickable:hover {
    border-color: var(--na-sakura, #fbe3e8);
    background: var(--na-sakura-light, #FFF0F3);
    transform: translateY(-1px);
}
.na-sentence-word {
    display: inline-block;
    padding: 6px 14px;
    margin: 3px;
    border-radius: 8px;
    background: var(--na-sakura-light, #FFF0F3);
    border: 1px solid var(--na-sakura, #fbe3e8);
    color: var(--na-text, #333333);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.na-sentence-word:hover {
    background: #E1E4E7;
    text-decoration: line-through;
}

/* -- Responsive tweaks for practice -- */
@media (max-width: 576px) {
    .na-today-stats { grid-template-columns: 1fr; }
    .na-skill-grid { grid-template-columns: 1fr; }
    .na-review-row { grid-template-columns: 1fr; }
    .na-challenge-grid { grid-template-columns: 1fr; }
    .na-mode-grid { grid-template-columns: 1fr; }
    .na-lp-mcq__options { grid-template-columns: 1fr; }
    .na-topic-mode-list { grid-template-columns: 1fr; }
}

/* ==========================================
   AVATAR STAGE / LARGE PREVIEW
   ========================================== */

/* ==========================================
   ADMIN LOGIN & ADMIN UI (管理パネル)
   ========================================== */

/* Admin entry links / buttons in navbar & footer */
.na-admin-link {
    color: var(--na-primary-dark);
    font-weight: 600;
}
.na-admin-link:hover {
    color: var(--na-primary);
}

.na-admin-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--na-primary), var(--na-primary-dark));
    color: #FFFFFF !important;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(238, 150, 164, 0.35);
    transition: transform var(--na-transition), box-shadow var(--na-transition);
}
.na-admin-pill:hover {
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(238, 150, 164, 0.45);
}
.na-admin-pill i { font-size: 0.95rem; }

/* Admin login page wrapper */
.admin-auth-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 220px);
    padding: 2rem 1rem;
}

.admin-auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--na-surface);
    border-radius: var(--na-radius);
    box-shadow: 0 8px 30px rgba(45, 42, 38, 0.12);
    border: 1px solid var(--na-border);
    border-top: 5px solid var(--na-primary);
    padding: 2.25rem 2rem 1.75rem;
}

.admin-auth-header { text-align: center; margin-bottom: 1.25rem; }

.admin-auth-shield {
    width: 64px;
    height: 64px;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--na-sakura-light), #E1E4E7);
    color: var(--na-primary);
    font-size: 1.75rem;
    box-shadow: 0 4px 14px rgba(238, 150, 164, 0.25);
}
.admin-auth-shield--denied {
    background: linear-gradient(135deg, #FFF0F0, #E1E4E7);
    color: var(--na-primary);
}

.admin-auth-title { font-size: 1.5rem; margin-bottom: 0.25rem; }
.admin-auth-subtitle { color: var(--na-text-muted); font-size: 0.85rem; margin: 0; }
.admin-auth-subtitle .jp { font-weight: 500; color: var(--na-primary-dark); }

.admin-auth-role-tag {
    text-align: center;
    background: var(--na-sakura-light);
    color: var(--na-primary-dark);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}
.admin-auth-role-tag i { margin-right: 4px; }

.admin-auth-form .input-group-text {
    background: var(--na-bg);
    border-color: var(--na-border);
    color: var(--na-text-muted);
}
.admin-auth-form .form-control:focus {
    border-color: var(--na-primary-light);
    box-shadow: 0 0 0 0.2rem rgba(238, 150, 164, 0.15);
}
.admin-auth-form .form-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--na-text);
    margin-bottom: 0.35rem;
}

.admin-auth-error {
    background: #FFF4F4;
    border: 1px solid #fbe3e8;
    color: #ee96a4;
    border-radius: var(--na-radius-sm);
    padding: 0.6rem 0.85rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
.admin-auth-error:empty { display: none; }

.admin-auth-submit { font-weight: 600; letter-spacing: 0.3px; margin-top: 0.25rem; }

.admin-auth-demo {
    margin-top: 1.25rem;
    padding: 0.9rem 1rem;
    background: var(--na-bg);
    border: 1px dashed var(--na-border);
    border-radius: var(--na-radius-sm);
}
.admin-auth-demo-title { font-weight: 600; font-size: 0.82rem; color: var(--na-text-muted); margin-bottom: 0.5rem; }
.admin-auth-demo-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; padding: 2px 0; }
.admin-auth-demo-row code {
    background: var(--na-surface);
    border: 1px solid var(--na-border);
    padding: 1px 8px;
    border-radius: 6px;
    color: var(--na-primary-dark);
    font-size: 0.8rem;
}

.admin-auth-links { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 1.25rem; font-size: 0.85rem; }
.admin-auth-divider { color: var(--na-text-muted); }

@media (max-width: 576px) {
    .admin-auth-card { padding: 1.75rem 1.25rem; }
    .admin-auth-title { font-size: 1.3rem; }
}

/* ==========================================
   EXPLORE JAPAN — INDEX TILES (6 categories)
   ========================================== */

.na-explore-tiles {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.na-explore-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 14px;
    border-radius: 14px;
    background: var(--na-bg, #F5F8FB);
    border: 1px solid var(--na-border, #fbe3e8);
    color: var(--na-text, #2D2A26);
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.na-explore-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--na-sakura-light, #FFF0F3) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

.na-explore-tile:hover,
.na-explore-tile:focus-visible {
    transform: translateY(-3px);
    border-color: var(--na-primary, #ee96a4);
    box-shadow: 0 8px 20px rgba(238, 150, 164, 0.15);
    color: var(--na-primary, #ee96a4);
    text-decoration: none;
}

.na-explore-tile:hover::before {
    opacity: 1;
}

.na-explore-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--na-surface, #FFFFFF);
    color: var(--na-primary, #ee96a4);
    font-size: 1.6rem;
    box-shadow: 0 2px 6px rgba(45, 42, 38, 0.08);
    transition: transform 0.18s ease;
}

.na-explore-tile:hover .na-explore-tile-icon {
    transform: scale(1.05) rotate(-4deg);
}

.na-explore-tile-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.na-explore-tile-label small {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--na-text-muted, #6B6661);
    letter-spacing: 0.5px;
}

.na-explore-lead {
    max-width: 480px;
}

/* ==========================================
   EXPLORE JAPAN — DETAIL PAGES (6 category views)
   ========================================== */

.na-explore-backbar {
    display: flex;
    align-items: center;
}

.na-explore-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--na-text-muted, #6B6661);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 6px 10px;
    border-radius: 8px;
    transition: all 0.18s ease;
}

.na-explore-back-link:hover,
.na-explore-back-link:focus-visible {
    color: var(--na-primary, #ee96a4);
    background: var(--na-sakura-light, #FFF0F3);
    text-decoration: none;
}

.na-explore-detail-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--na-border, #fbe3e8);
}

.na-explore-detail-header h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.na-explore-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.na-explore-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.25rem 1rem;
    border-radius: 14px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    border: 1px solid var(--na-border, #fbe3e8);
}

.na-explore-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(45, 42, 38, 0.10);
    border-color: var(--na-sakura, #fbe3e8);
}

.na-explore-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0.6rem;
}

.na-explore-card-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--na-surface, #FFFFFF);
    font-size: 1.25rem;
    box-shadow: 0 2px 6px rgba(45, 42, 38, 0.08);
    transition: transform 0.18s ease;
}

.na-explore-card:hover .na-explore-card-icon {
    transform: rotate(-6deg) scale(1.05);
}

.na-explore-card-titles {
    flex: 1;
    min-width: 0;
}

.na-explore-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 2px;
    line-height: 1.25;
    color: var(--na-text, #2D2A26);
}

.na-explore-card-title-ja {
    font-size: 0.85rem;
    color: var(--na-text-muted, #6B6661);
    font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", system-ui, sans-serif;
}

.na-explore-card-desc {
    font-size: 0.9rem;
    color: var(--na-text, #2D2A26);
    line-height: 1.5;
    margin-bottom: 0.75rem;
    flex: 1;
}

.na-explore-card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--na-primary, #ee96a4);
    text-decoration: none;
    align-self: flex-start;
    transition: gap 0.18s ease;
}

.na-explore-card-link:hover,
.na-explore-card-link:focus-visible {
    gap: 8px;
    color: var(--na-primary-dark, #ee96a4);
    text-decoration: underline;
}

.na-explore-other-cats {
    border-top: 1px dashed var(--na-border, #fbe3e8);
    padding-top: 1rem;
}

/* Accent helpers — used by the card icon circle color */
.na-accent-na-primary {
    background: var(--na-primary, #ee96a4);
    color: #FFFFFF;
}
.na-accent-na-secondary {
    background: var(--na-secondary, #9A7BC4);
    color: #FFFFFF;
}
.na-accent-na-gold {
    background: var(--na-primary, #ee96a4);
    color: #FFFFFF;
}
.na-accent-na-indigo {
    background: var(--na-indigo, #C1A8E0);
    color: #FFFFFF;
}
.na-accent-na-sakura {
    background: var(--na-sakura, #fbe3e8);
    color: #d96d80;
}

.na-chip-sm {
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 999px;
    background: var(--na-bg, #F5F8FB);
    border: 1px solid var(--na-border, #fbe3e8);
    color: var(--na-text-muted, #6B6661);
    text-decoration: none;
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.na-chip-sm:hover,
.na-chip-sm:focus-visible {
    background: var(--na-sakura-light, #FFF0F3);
    border-color: var(--na-sakura, #fbe3e8);
    color: var(--na-primary, #ee96a4);
    text-decoration: none;
}

@media (max-width: 576px) {
    .na-explore-detail-header h2 { font-size: 1.35rem; }
    .na-explore-tile-label { font-size: 0.95rem; }
}

/* ==========================================
   REGIONS PAGE — HERO + 9-TILE GRID
   ========================================== */

.na-region-hero {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    min-height: 360px;
    margin-bottom: 1.5rem;
    box-shadow: var(--na-shadow);
    isolation: isolate;
    /* Soft sakura-pink gradient. This used to be a cold white→grey wash
       (#FFFFFF → #F4F7FA → #E1E4E7) which read as a blank white card and
       clashed with the pink accent used everywhere else on the page. The two
       map cards inside stay white on purpose — their PNGs have white
       backgrounds, so a pink card would show a white rectangle. */
    background:
        radial-gradient(ellipse at 0% 0%, rgba(255, 243, 248, 0.95) 0%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(135deg, #FFF6FA 0%, #FBE4EE 58%, #F4D2DF 100%);
}

/* ---- Centerpiece "region seal" card (detail-hero middle column) ---- */
/* The card is a 2-row flex column: row 1 = the silhouette layer, row 2 = the
   地名 pill. Because the pill is a real layout row *after* the artwork, the
   artwork only gets the height that's left over and can never slide under the
   text — the old bug was a background image painted behind the pill, which
   left the pill sitting on top of the silhouette.
   Sizing each silhouette with `contain` also stops the tall ones (Tōhoku)
   and the wide ones (Chūgoku) from being cropped by `overflow:hidden`. */
.na-region-hero-seal {
    position: relative;
    width: 280px;
    height: 330px;
    margin: 0 auto;
    border-radius: 28px;
    background-color: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--na-border, #fbe3e8);
    box-shadow:
        0 18px 44px rgba(238, 150, 164, 0.16),
        0 4px 12px rgba(0, 0, 0, 0.06);
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0.9rem 1.15rem 0.75rem;
    transition: transform 0.25s ease;
}
/* Row 1 — takes every pixel the pill doesn't need; contain keeps all 9
   silhouettes fully visible and centred. */
.na-region-hero-seal-art {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    background-color: transparent;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-origin: content-box;
}
.na-region-hero:hover .na-region-hero-seal { transform: translateY(-3px); }

.na-region-hero-seal-label {
    flex: 0 0 auto;
    align-self: center;
    margin-top: 0.55rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--na-primary, #ee96a4);
    letter-spacing: 0.08em;
    /* Sits on the white card now (no longer over the silhouette), so give it a
       soft pink chip look instead of the old see-through white gradient. */
    background: rgba(238, 150, 164, 0.10);
    border: 1px solid rgba(238, 150, 164, 0.30);
    padding: 3px 14px;
    border-radius: 999px;
    line-height: 1.2;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Old full-bleed bg / overlay are unused on the detail page now — keep
   them in the stylesheet so legacy markup (if any) doesn't break, but the
   detail page no longer emits these elements. */
.na-region-hero-bg { display: none; }
.na-region-hero-overlay { display: none; }

/* ---- Listing-page hero: 2-column grid (text + map card) ---- */
.na-region-listing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
    padding: 2.5rem 2.5rem;
    min-height: 380px;
    /* Match the detail-hero warm peach gradient so the listing card has the same
       "lightly red" tint as RegionDetail (Image 2 reference). Bias the palette a
       touch redder than the base .na-region-hero gradient for a clearer pulse of
       Japanese red (朱红/sakura) without overpowering the white map card on top. */
    background:
        radial-gradient(ellipse at 0% 0%, rgba(238, 150, 164, 0.22) 0%, rgba(255, 255, 255, 0) 55%),
        radial-gradient(ellipse at 100% 100%, rgba(238, 150, 164, 0.10) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(135deg, #E1E4E7 0%, #fbe3e8 55%, #fbe3e8 100%);
}

.na-region-listing-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    z-index: 0;
    opacity: 0.05;
    pointer-events: none;
    mix-blend-mode: multiply;   /* tint the red underlying layers, not flatten them with white */
}

.na-region-listing-hero-overlay {
    position: absolute;
    inset: 0;
    /* Transparent overlay — let the peachy hero background show through.
       A pure white overlay would wash out the red tint the user wants. */
    background:
        linear-gradient(95deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%);
    z-index: 1;
    pointer-events: none;
}

.na-region-listing-hero-text {
    position: relative;
    z-index: 2;
    max-width: 580px;
}

.na-region-map-card {
    position: relative;
    z-index: 2;
    background: #FFFFFF;
    border: 1px solid var(--na-border, #fbe3e8);
    border-radius: 16px;
    padding: 1rem 1rem 0.75rem;
    box-shadow: 0 8px 28px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
    aspect-ratio: 0.78;  /* close to Japan.png portrait */
    align-self: center;
    justify-self: end;
    width: 100%;
    max-width: 360px;
    overflow: visible;
}

.na-region-map-card .na-region-map-img {
    position: absolute;
    inset: 1rem 1rem 0.75rem;
    width: calc(100% - 2rem);
    height: calc(100% - 1.75rem);
    object-fit: contain;
}

.na-region-map-card .na-region-map-markers {
    position: absolute;
    inset: 1rem 1rem 0.75rem;
    pointer-events: none;
}

/* The featured marker on the listing page (default = Kantō).
   Visually different from .is-current which is used on the detail page. */
.na-region-map-marker.is-featured .na-region-map-marker-dot {
    background: var(--na-primary, #ee96a4);
    width: 16px;
    height: 16px;
    box-shadow: 0 0 0 6px rgba(238, 150, 164, 0.18), 0 0 0 12px rgba(238, 150, 164, 0.08);
    animation: na-region-marker-pulse 1.6s ease-out infinite;
}

.na-region-map-marker.is-featured .na-region-map-marker-label {
    background: var(--na-primary, #ee96a4);
    color: #FFFFFF;
    border-color: var(--na-primary, #ee96a4);
    font-size: 0.78rem;
}

/* Dedicated map area (holds the actual Japan image + the 9 region markers).
   Sized so the image fills this region and the marker X/Y percentages align
   with the visual position of each region on the image. */
/* Right-column grid item in the 3-column detail hero (text | seal | map). */
.na-region-map-area {
    position: relative;
    width: 100%;
    max-width: 300px;
    height: auto;
    aspect-ratio: 0.75;
    margin: 0 auto;
    z-index: 2;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08), inset 0 0 0 1px var(--na-border, #fbe3e8);
    overflow: visible;
}

.na-region-map-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.5rem;
}

.na-region-map-markers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.na-region-hero-inner {
    position: relative;
    z-index: 2;
    padding: 0;
    max-width: none;
}

.na-region-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--na-primary, #ee96a4);
    background: rgba(255,255,255,0.85);
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border: 1px solid var(--na-border, #fbe3e8);
}

.na-region-hero-eyebrow i { color: var(--na-primary, #ee96a4); }

.na-region-hero-title {
    margin: 1rem 0 0.4rem;
    font-size: 3rem;
    font-weight: 700;
    color: var(--na-text, #2A2A2A);
    line-height: 1.1;
}

.na-region-hero-title-ja {
    display: block;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--na-primary, #ee96a4);
    margin-top: 0.35rem;
    letter-spacing: 0.08em;
}

.na-region-hero-lead {
    margin-top: 0.75rem;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--na-text-muted, #6B6B6B);
    max-width: 36rem;
}

.na-region-hero-count {
    margin-top: 1.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    background: rgba(255,255,255,0.85);
    padding: 0.65rem 1.25rem;
    border-radius: 14px;
    border: 1px solid var(--na-border, #fbe3e8);
}

.na-region-hero-count-num {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--na-primary, #ee96a4);
    line-height: 1;
}

.na-region-hero-count-text {
    font-size: 0.85rem;
    color: var(--na-text-muted, #6B6B6B);
    line-height: 1.3;
}

.na-region-hero-count-text small {
    color: var(--na-text, #2A2A2A);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
}

/* ---- 9-tile grid ---- */
.na-region-grid-section { margin-top: 1.25rem; }

.na-region-tile {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    height: 100%;
    padding: 1.5rem 1.5rem 1.25rem;
    background: var(--na-surface, #FFFFFF);
    border: 1px solid var(--na-border, #fbe3e8);
    border-radius: 16px;
    box-shadow: var(--na-shadow);
    text-decoration: none;
    color: var(--na-text, #2A2A2A);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    position: relative;
    overflow: hidden;
}

.na-region-tile::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: currentColor;
    opacity: 0.85;
}

.na-region-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
    color: var(--na-text, #2A2A2A);
    text-decoration: none;
}

.na-region-tile-num {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--na-text-muted, #6B6B6B);
    letter-spacing: 0.05em;
}

.na-region-tile-body { flex: 1; }

.na-region-tile-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    color: inherit;
    line-height: 1.15;
}

.na-region-tile-title-ja {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--na-primary, #ee96a4);
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.na-region-tile-subtitle {
    font-style: italic;
    color: var(--na-text-muted, #6B6B6B);
    font-size: 0.92rem;
    margin-top: 0.25rem;
}

.na-region-tile-tagline {
    margin: 0.7rem 0 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--na-text, #2A2A2A);
}

.na-region-tile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.85rem;
    font-size: 0.82rem;
    color: var(--na-text-muted, #6B6B6B);
}

.na-region-tile-stat { display: inline-flex; align-items: center; gap: 0.35rem; }
.na-region-tile-stat i { color: var(--na-primary, #ee96a4); }
.na-region-tile-stat small { color: var(--na-text-muted, #6B6B6B); font-size: 0.78rem; }

.na-region-tile-arrow {
    margin-top: 0.5rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--na-border, #fbe3e8);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--na-primary, #ee96a4);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.na-region-tile:hover .na-region-tile-arrow i { transform: translateX(3px); }
.na-region-tile-arrow i { transition: transform 0.22s ease; }

/* ==========================================
   REGION DETAIL PAGE
   ========================================== */

/* Detail hero: 3-column grid (text | centered seal | map) so the seal moves to the middle. */
.na-region-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) auto minmax(0, 0.85fr);
    align-items: center;
    gap: 1.25rem 2.25rem;
    padding: 2.75rem;
    min-height: 460px;
}

.na-region-hero-subtitle {
    margin: 0.4rem 0 0;
    font-size: 1.15rem;
    color: var(--na-text, #2A2A2A);
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* Short descriptive line that ends the hero text block
   (was previously shown inside the now-removed Region Silhouette card). */
.na-region-hero-tagline {
    margin: 0.85rem 0 0;
    padding: 0.65rem 0.85rem;
    border-left: 3px solid var(--na-primary, #ee96a4);
    background: rgba(255, 255, 255, 0.62);
    border-radius: 0 8px 8px 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--na-muted, #555555);
    font-style: italic;
    max-width: 32rem;
}

/* Slightly tighter mid-size screens (992–1200px): the seal + map must not
   squeeze the text column down to a sliver. */
@media (max-width: 1199.98px) {
    .na-region-detail-hero { padding: 2rem; gap: 1.25rem 1.5rem; }
    .na-region-hero-seal {
        width: 250px;
        height: 305px;
        padding: 0.8rem 1rem 0.6rem;
    }
    .na-region-map-area { max-width: 260px; }
}

/* Map markers overlay */
.na-region-map-markers {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.na-region-map-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    text-decoration: none;
    color: var(--na-text, #2A2A2A);
    transition: transform 0.18s ease;
}

.na-region-map-marker-dot {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--na-surface, #FFFFFF);
    border: 2px solid var(--na-primary, #ee96a4);
    margin: 0 auto;
    transition: all 0.18s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.na-region-map-marker-label {
    display: block;
    margin-top: 4px;
    background: rgba(255,255,255,0.92);
    color: var(--na-text, #2A2A2A);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--na-border, #fbe3e8);
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.na-region-map-marker:hover { transform: translate(-50%, -50%) scale(1.15); }
.na-region-map-marker:hover .na-region-map-marker-dot { background: var(--na-primary, #ee96a4); }

.na-region-map-marker.is-current .na-region-map-marker-dot {
    background: var(--na-primary, #ee96a4);
    width: 16px;
    height: 16px;
    box-shadow: 0 0 0 6px rgba(238, 150, 164, 0.18), 0 0 0 12px rgba(238, 150, 164, 0.08);
    animation: na-region-marker-pulse 1.6s ease-out infinite;
}

.na-region-map-marker.is-current .na-region-map-marker-label {
    background: var(--na-primary, #ee96a4);
    color: #FFFFFF;
    border-color: var(--na-primary, #ee96a4);
    font-size: 0.78rem;
}

@keyframes na-region-marker-pulse {
    0% { box-shadow: 0 0 0 6px rgba(238, 150, 164, 0.32), 0 0 0 12px rgba(238, 150, 164, 0.12); }
    100% { box-shadow: 0 0 0 14px rgba(238, 150, 164, 0), 0 0 0 24px rgba(238, 150, 164, 0); }
}

/* Stat grid */
.na-region-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.na-region-stat {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: var(--na-surface, #FFFFFF);
    border: 1px solid var(--na-border, #fbe3e8);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    box-shadow: var(--na-shadow);
}

.na-region-stat-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--na-bg, #FAFAF7);
    color: var(--na-primary, #ee96a4);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.na-region-stat-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--na-text-muted, #6B6B6B);
    margin-bottom: 0.2rem;
}

.na-region-stat-value {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--na-text, #2A2A2A);
    line-height: 1.4;
}

.na-region-stat-value small {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--na-primary, #ee96a4);
    margin-left: 0.25rem;
}

/* Sections */
.na-region-section {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--na-border, #fbe3e8);
}

.na-region-section-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
}

.na-region-section-head i {
    font-size: 1.5rem;
    color: var(--na-primary, #ee96a4);
}

.na-region-section-head h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.na-region-section-head h2 .na-subtitle-jp {
    font-size: 0.95rem;
    color: var(--na-primary, #ee96a4);
    margin-left: 0.5rem;
    font-weight: 500;
}

/* The "press these keys" line. It used to be a bare <span> dropped into the
   flex head, so the text wrapped inline and the last words ("to jump") fell
   onto a ragged orphan line under the heading. Now it is a block of its own:
   it always starts on a fresh line, is flush left with the icon, and the
   <kbd> chips never get torn away from the words they belong to. */
.na-showcase-hint {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
    margin: -0.4rem 0 0;         /* rides up into the head's margin — the visitor
                                    reads the hint as part of the heading, so the
                                    gap between them stays tight */
    padding-left: 2rem;          /* lines up under the heading text, not the star */
    font-size: 0.78rem;
    line-height: 1.75;
    color: #8A6A5C;
}

.na-showcase-hint i {
    font-size: 0.85rem;
    color: var(--na-primary, #ee96a4);
    /* the icon is a label, not a word - it must never end a line by itself */
    margin-right: 0.15rem;
}

.na-showcase-hint kbd { font-size: .72rem; }

@media (max-width: 640px) {
    .na-showcase-hint { padding-left: 0; }
}

.na-region-prose {
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--na-text, #2A2A2A);
    /* Fill the full container width so long descriptions don't wrap early
       (was capped at 60rem which caused narrow columns on standard desktops). */
    max-width: 100%;
}

/* Key phrases inside the Overview / Getting there paragraphs.
   Mirrors the bold text in the source Region Guide document. */
.na-region-hl {
    padding: 0 0.12em;
    border-radius: 4px;
    background: linear-gradient(180deg, transparent 58%, rgba(238, 150, 164, 0.18) 58%);
    color: inherit;
    font-weight: 600;
}

/* Photo gallery placeholder slots — swap each box for a real <img> when photos are ready */
.na-region-photo-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 220px;
    padding: 1rem;
    text-align: center;
    border: 2px dashed var(--na-border, #fbe3e8);
    border-radius: var(--na-hero-radius, 24px);
    background:
        repeating-linear-gradient(45deg,
            transparent 0 14px,
            rgba(238, 150, 164, 0.03) 14px 28px),
        var(--na-surface, #FFFDFBF7);
    color: var(--na-text-muted, #8A7A72);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.na-region-photo-slot:hover {
    border-color: var(--na-primary, #ee96a4);
}

.na-region-photo-slot > .bi-image {
    font-size: 2rem;
    color: var(--na-primary, #ee96a4);
    opacity: 0.55;
}

.na-region-photo-slot-label {
    font-weight: 700;
    color: var(--na-text, #2A2A2A);
}

.na-region-photo-slot-hint {
    font-size: 0.8rem;
    line-height: 1.4;
}

.na-region-photo-slot-hint code {
    font-size: 0.72rem;
    color: var(--na-primary, #ee96a4);
    word-break: break-all;
}

/* Small print note under a region page (e.g. the Okinawa / Kyūshū disclaimer) */
.na-region-disclaimer {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--na-text-muted, #8A7A72);
    border-top: 1px solid var(--na-border, #fbe3e8);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
}

/* Highlights list */
.na-region-point {
    display: flex;
    gap: 1rem;
    background: var(--na-surface, #FFFFFF);
    border: 1px solid var(--na-border, #fbe3e8);
    border-left: 3px solid var(--na-primary, #ee96a4);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    box-shadow: var(--na-shadow);
    height: 100%;
}

.na-region-point-bullet {
    color: var(--na-primary, #ee96a4);
    font-size: 1.2rem;
    line-height: 1.4;
    flex-shrink: 0;
}

.na-region-point-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--na-text, #2A2A2A);
}

.na-region-point-title-ja {
    font-size: 0.85rem;
    color: var(--na-primary, #ee96a4);
    margin-top: 0.1rem;
}

.na-region-point-note {
    font-size: 0.9rem;
    color: var(--na-text-muted, #6B6B6B);
    margin-top: 0.3rem;
    line-height: 1.5;
}

/* Food cards */
.na-region-food-card {
    text-align: center;
    background: var(--na-surface, #FFFFFF);
    border: 1px solid var(--na-border, #fbe3e8);
    border-radius: 14px;
    padding: 1.25rem 1rem;
    height: 100%;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.na-region-food-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.na-region-food-icon {
    width: 56px; height: 56px;
    margin: 0 auto 0.65rem;
    border-radius: 50%;
    background: var(--na-bg, #FAFAF7);
    color: var(--na-primary, #ee96a4);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
}

.na-region-food-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--na-text, #2A2A2A);
}

.na-region-food-title-ja {
    font-size: 0.82rem;
    color: var(--na-primary, #ee96a4);
    margin-top: 0.15rem;
}

.na-region-food-note {
    font-size: 0.82rem;
    color: var(--na-text-muted, #6B6B6B);
    margin-top: 0.4rem;
    line-height: 1.45;
}

/* Festival cards row */
.na-region-festival-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.na-region-festival-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: linear-gradient(135deg, #F4F7FA 0%, #FFFFFF 100%);
    border: 1px solid var(--na-border, #fbe3e8);
    border-radius: 14px;
    padding: 1rem 1.15rem;
}

.na-region-festival-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--na-surface, #FFFFFF);
    color: var(--na-primary, #ee96a4);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    border: 1px solid var(--na-border, #fbe3e8);
}

.na-region-festival-title { font-weight: 700; color: var(--na-text, #2A2A2A); font-size: 1rem; }
.na-region-festival-title-ja { font-size: 0.85rem; color: var(--na-primary, #ee96a4); margin-top: 0.1rem; }
.na-region-festival-note { font-size: 0.85rem; color: var(--na-text-muted, #6B6B6B); margin-top: 0.3rem; line-height: 1.45; }

/* Learn more button */
.na-region-learn-more {
    text-align: center;
    border-top: none;
    padding-top: 0;
    margin-top: 2rem;
}

.na-region-learn-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.75rem;
    background: var(--na-primary, #ee96a4);
    /* Force white text on the red button — the global `a { color: var(--na-primary) }`
       rule (line 68) was bleeding through, leaving the text red-on-red and unreadable. */
    color: #FFFFFF !important;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    box-shadow: 0 6px 20px rgba(238, 150, 164, 0.3);
}

.na-region-learn-more-btn i { color: #FFFFFF !important; }

.na-region-learn-more-btn:visited,
.na-region-learn-more-btn:active,
.na-region-learn-more-btn:focus {
    color: #FFFFFF !important;
}

.na-region-learn-more-btn:hover {
    background: #ee96a4;
    color: #FFFFFF !important;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(238, 150, 164, 0.4);
}

/* Prev / Next region nav */
.na-region-prevnext {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 1rem;
    margin-top: 2.5rem;
    padding: 1.25rem;
    background: var(--na-bg, #FAFAF7);
    border: 1px solid var(--na-border, #fbe3e8);
    border-radius: 16px;
}

.na-region-prevnext-item {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.1rem;
    background: var(--na-surface, #FFFFFF);
    border: 1px solid var(--na-border, #fbe3e8);
    border-radius: 12px;
    text-decoration: none;
    color: var(--na-text, #2A2A2A);
    transition: transform 0.18s ease, border-color 0.18s ease;
    flex: 1;
    max-width: 320px;
}

.na-region-prevnext-item:hover {
    transform: translateY(-2px);
    border-color: var(--na-primary, #ee96a4);
    color: var(--na-text, #2A2A2A);
    text-decoration: none;
}

.na-region-prevnext-next { text-align: right; margin-left: auto; }

.na-region-prevnext-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--na-text-muted, #6B6B6B);
}

.na-region-prevnext-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--na-text, #2A2A2A);
}

.na-region-prevnext-name small {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--na-primary, #ee96a4);
    margin-left: 0.25rem;
}

.na-region-prevnext-item i { color: var(--na-primary, #ee96a4); font-size: 1.1rem; }

.na-region-prevnext-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.1rem;
    color: var(--na-text-muted, #6B6B6B);
    text-decoration: none;
    font-size: 0.92rem;
    align-self: center;
    white-space: nowrap;
}

.na-region-prevnext-back:hover { color: var(--na-primary, #ee96a4); text-decoration: none; }

/* Responsive */
@media (max-width: 991.98px) {
    /* Detail hero stacks to a single column (text -> seal -> map). */
    .na-region-detail-hero {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 2rem 1.75rem;
        min-height: 0;
        text-align: center;
    }
    .na-region-hero-inner { padding: 0; max-width: none; text-align: left; }
    .na-region-hero-seal {
        width: 240px;
        height: 290px;
        padding: 0.75rem 0.9rem 0.55rem;
    }
    .na-region-map-area { max-width: 280px; }
    .na-region-hero-title { font-size: 2.4rem; }
    .na-region-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .na-region-listing-hero { grid-template-columns: 1fr; padding: 2rem 1.75rem; gap: 1.5rem; }
    .na-region-map-card { justify-self: center; max-width: 320px; }
}

@media (max-width: 767.98px) {
    .na-region-hero { min-height: 280px; }
    .na-region-detail-hero { padding: 1.5rem 1.25rem; gap: 1.25rem; }
    .na-region-hero-inner { padding: 0; }
    .na-region-hero-title { font-size: 1.95rem; }
    .na-region-hero-seal {
        width: 190px;
        height: 235px;
        border-radius: 22px;
        padding: 0.5rem 0.7rem 0.45rem;
    }
    .na-region-hero-seal-label { font-size: 0.82rem; padding: 2px 10px; }
    .na-region-stat-grid { grid-template-columns: 1fr; }
    .na-region-prevnext { flex-direction: column; }
    .na-region-prevnext-item { max-width: none; }
    .na-region-prevnext-back { align-self: center; }
    .na-region-map-marker-label { font-size: 0.65rem; padding: 1px 6px; }
    .na-region-tile-img { height: 124px; }
    .na-region-tile-img img { max-height: 114px; }
    .na-region-image-card { flex-direction: column; padding: 1.5rem; }
    .na-region-image-frame { flex: none; width: 100%; max-width: 320px; margin: 0 auto; }
    .na-region-image-img { max-height: 320px; }
    .na-region-map-area {
        width: 70%;
        max-width: 220px;
        margin: 0 auto;
    }
    .na-region-listing-hero { padding: 1.5rem 1.25rem; }
    .na-region-listing-hero-text { max-width: none; }
    .na-region-map-card { max-width: 280px; }
    .na-region-hero-title { font-size: 2rem; }
}

/* ==========================================
   REGION TILE — silhouette thumbnail
   ========================================== */
/* Same silhouette artwork as the detail-page seal, just smaller — keep the
   card tall enough that `contain`-style sizing never clips a tall PNG. */
.na-region-tile-img {
    height: 152px;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FAFAF7 0%, #E1E4E7 100%);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.25rem;
    position: relative;
}

.na-region-tile-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 55%, rgba(255,255,255,0.55) 100%);
    pointer-events: none;
}

.na-region-tile-img img {
    max-height: 134px;
    max-width: 78%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
    transition: transform 0.32s ease;
}

.na-region-tile:hover .na-region-tile-img img {
    transform: scale(1.06);
}

/* ==========================================
   REGION DETAIL — silhouette image section
   ========================================== */
.na-region-image-section {
    margin: 0 0 1.75rem;
}

.na-region-image-card {
    display: flex;
    align-items: center;
    gap: 2.25rem;
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg, #FFFFFF 0%, #F3F6F9 100%);
    border: 1px solid var(--na-border, #fbe3e8);
    border-left: 6px solid currentColor;
    border-radius: 18px;
    box-shadow: var(--na-shadow);
    position: relative;
    overflow: hidden;
}

.na-region-image-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 0%, rgba(238, 150, 164, 0.05) 0%, transparent 35%),
        radial-gradient(circle at 100% 100%, rgba(238, 150, 164, 0.05) 0%, transparent 40%);
    pointer-events: none;
}

.na-region-image-frame {
    flex: 0 0 auto;
    width: 240px;
    height: 240px;
    background: #FFFFFF;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px var(--na-border, #fbe3e8), 0 6px 20px rgba(0,0,0,0.06);
    overflow: hidden;
    position: relative;
}

.na-region-image-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(0,0,0,0.02) 0%, transparent 30%),
        radial-gradient(circle at center, transparent 60%, rgba(238, 150, 164, 0.04) 100%);
    pointer-events: none;
}

.na-region-image-img {
    max-width: 85%;
    max-height: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.12));
    position: relative;
    z-index: 1;
}

.na-region-image-caption {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.na-region-image-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--na-primary, #ee96a4);
    background: rgba(238, 150, 164, 0.08);
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}

.na-region-image-eyebrow i { color: inherit; }

.na-region-image-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--na-text, #2A2A2A);
    line-height: 1.15;
    margin-bottom: 0.4rem;
}

.na-region-image-title span {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 1.15rem;
    color: var(--na-primary, #ee96a4);
    font-weight: 500;
    letter-spacing: 0.05em;
}

.na-region-image-sub {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--na-text-muted, #6B6B6B);
    font-style: italic;
}

/* ==========================================
   HOMEPAGE: HERO BANNER SLIDER
   ========================================== */
:root {
    --na-hero-radius: 24px;
}

.na-hero-banner {
    position: relative;
    margin-top: 0.25rem;
}

.na-hero-banner-viewport {
    position: relative;
    overflow: hidden;
    border-radius: var(--na-hero-radius);
    background: var(--na-bg);
    box-shadow: 0 10px 30px rgba(45, 42, 38, 0.08);
    aspect-ratio: 16 / 7;
    min-height: 340px;
}

.na-hero-banner-track {
    display: flex;
    height: 100%;
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.na-hero-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0.4;
    transition: opacity 0.6s ease;
}

.na-hero-slide.is-active {
    opacity: 1;
}

.na-hero-slide-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
    padding: 2.25rem 2.5rem 2.25rem 5rem;
}

.na-hero-slide-text { max-width: 560px; }

.na-hero-slide-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--na-primary, #ee96a4);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 0.9rem;
}

.na-hero-slide-title {
    font-size: clamp(1.65rem, 2.4vw, 2.4rem);
    line-height: 1.15;
    margin: 0 0 0.4rem;
    color: var(--na-text, #2D2A26);
    font-weight: 700;
}

.na-hero-slide-title-ja {
    font-size: 1.1rem;
    color: var(--na-primary, #ee96a4);
    margin: 0 0 0.9rem;
    font-weight: 500;
}

.na-hero-slide-lead {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--na-text, #2D2A26);
    margin: 0 0 1.25rem;
    opacity: 0.85;
}

.na-hero-slide-cta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Art / decoration column */
.na-hero-slide-art {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.na-hero-slide-mascot {
    max-width: 240px;
    width: 86%;
    height: auto;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.18));
    transition: transform 0.5s ease;
}

.na-hero-slide.is-active .na-hero-slide-mascot {
    animation: hero-float 6s ease-in-out infinite;
}

@keyframes hero-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* === Slide 1: Learn === */
.na-hero-slide-bg--learn {
    background:
        radial-gradient(ellipse at 85% 30%, rgba(251, 227, 232, 0.55) 0%, transparent 55%),
        radial-gradient(ellipse at 12% 80%, rgba(251, 227, 232, 0.45) 0%, transparent 50%),
        linear-gradient(135deg, #FFF7F9 0%, #FFE9EE 60%, #E1E4E7 100%);
}

.na-hero-slide-bg--learn .na-hero-slide-bg-petal {
    position: absolute;
    width: 16px;
    height: 16px;
    background: radial-gradient(circle at 30% 30%, #fbdce3 0%, #ee96a4 65%, #d96d80 100%);
    border-radius: 60% 40% 60% 40% / 50% 60% 40% 50%;
    box-shadow: 0 2px 6px rgba(217, 109, 128, 0.4);
    animation: hero-petal 13s linear infinite;
    pointer-events: none;
}

.na-hero-slide-bg--learn .na-hero-slide-bg-petal--1 { top: -20px; left: 8%;  animation-delay: -1s; }
.na-hero-slide-bg--learn .na-hero-slide-bg-petal--2 { top: -20px; left: 22%; animation-delay: -4s; animation-duration: 15s; }
.na-hero-slide-bg--learn .na-hero-slide-bg-petal--3 { top: -20px; left: 38%; animation-delay: -7s; }
.na-hero-slide-bg--learn .na-hero-slide-bg-petal--4 { top: -20px; left: 56%; animation-delay: -10s; animation-duration: 17s; }
.na-hero-slide-bg--learn .na-hero-slide-bg-petal--5 { top: -20px; left: 72%; animation-delay: -3s; animation-duration: 14s; }
.na-hero-slide-bg--learn .na-hero-slide-bg-petal--6 { top: -20px; left: 88%; animation-delay: -6s; animation-duration: 16s; }

.na-hero-slide-bg--learn .na-hero-slide-bg-glyph {
    position: absolute;
    font-family: 'Yu Mincho', 'Hiragino Mincho Pro', 'MS Mincho', serif;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    color: rgba(238, 150, 164, 0.10);
}

.na-hero-slide-bg--learn .na-hero-slide-bg-glyph--a { top: 6%;   left: 4%;  font-size: 7rem; transform: rotate(-6deg); }
.na-hero-slide-bg--learn .na-hero-slide-bg-glyph--b { bottom: 8%; left: 38%; font-size: 5rem; color: rgba(45, 42, 38, 0.08); transform: rotate(4deg); }
.na-hero-slide-bg--learn .na-hero-slide-bg-glyph--c { top: 8%;   right: 6%; font-size: 8rem; color: rgba(238, 150, 164, 0.07); transform: rotate(8deg); }

@keyframes hero-petal {
    0%   { transform: translateY(0)    rotate(0);   opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translateY(560px) rotate(540deg); opacity: 0; }
}

/* Mascot frame — soft circle behind the bird */
.na-hero-slide-mascot-frame {
    position: relative;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95) 0%, rgba(227,230,233, 0.65) 55%, rgba(251, 227, 232, 0.45) 100%);
    box-shadow:
        0 20px 50px rgba(238, 150, 164, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.na-hero-slide-mascot-frame::before,
.na-hero-slide-mascot-frame::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.na-hero-slide-mascot-frame::before {
    inset: -22px;
    border: 1px dashed rgba(238, 150, 164, 0.25);
    animation: hero-ring 18s linear infinite;
}

.na-hero-slide-mascot-frame::after {
    width: 14px; height: 14px;
    background: #fbe3e8;
    box-shadow: 0 2px 6px rgba(238, 150, 164, 0.4);
    top: 12%; right: 8%;
    border-radius: 60% 40% 60% 40% / 50% 60% 40% 50%;
    transform: rotate(20deg);
    animation: hero-float 5s ease-in-out infinite;
}

@keyframes hero-ring {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}

/* === Slide 2: Scripts === */
.na-hero-slide-bg--scripts {
    background:
        radial-gradient(circle at 18% 80%, rgba(193,168,224, 0.18) 0%, transparent 35%),
        radial-gradient(circle at 85% 18%, rgba(238, 150, 164, 0.22) 0%, transparent 35%),
        linear-gradient(135deg, #F3F6F9 0%, #E1E4E7 50%, #fbe3e8 100%);
}

.na-hero-slide-bg--scripts .na-hero-slide-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(45, 42, 38, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45, 42, 38, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%);
}

.na-hero-slide-bg--scripts .na-hero-slide-bg-char {
    position: absolute;
    font-family: 'Yu Mincho', 'Hiragino Mincho Pro', 'MS Mincho', serif;
    font-weight: 700;
    line-height: 1;
    user-select: none;
}

.na-hero-slide-bg--scripts .na-hero-slide-bg-char--a { top: 8%;  left: 6%;  font-size: 8rem;  color: rgba(238, 150, 164, 0.18); transform: rotate(-8deg); }
.na-hero-slide-bg--scripts .na-hero-slide-bg-char--b { top: 56%; left: 4%;  font-size: 6rem;  color: rgba(193,168,224, 0.18); transform: rotate(6deg); }
.na-hero-slide-bg--scripts .na-hero-slide-bg-char--c { top: 10%; right: 4%; font-size: 10rem; color: rgba(238, 150, 164, 0.20); transform: rotate(10deg); }
.na-hero-slide-bg--scripts .na-hero-slide-bg-char--d { bottom: 6%; left: 28%; font-size: 5rem; color: rgba(193,168,224, 0.22); transform: rotate(-4deg); }
.na-hero-slide-bg--scripts .na-hero-slide-bg-char--e { bottom: 12%; right: 18%; font-size: 7rem; color: rgba(238, 150, 164, 0.30); transform: rotate(4deg); }

.na-hero-script-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--na-border, #fbe3e8);
    border-radius: 18px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 12px 28px rgba(45, 42, 38, 0.10);
    display: grid;
    gap: 0.65rem;
    min-width: 260px;
    backdrop-filter: blur(6px);
}

.na-hero-script-card-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    text-align: center;
}

.na-hero-script-card-row span {
    font-family: 'Yu Mincho', 'Hiragino Mincho Pro', 'MS Mincho', serif;
    font-weight: 700;
    padding: 0.4rem 0;
    border-radius: 10px;
}

.na-hero-script-hira  { background: rgba(251, 227, 232, 0.20); color: var(--na-primary, #ee96a4); font-size: 1.6rem; }
.na-hero-script-kata  { background: rgba(193,168,224, 0.12);   color: var(--na-indigo, #C1A8E0); font-size: 1.6rem; }
.na-hero-script-kanji { background: rgba(238, 150, 164, 0.18);  color: #ee96a4; font-size: 1.6rem; }

/* === Slide 3: Japan === */
.na-hero-slide-bg--japan {
    background:
        radial-gradient(ellipse at 15% 30%, rgba(227,230,233, 0.55) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 80%, rgba(251, 227, 232, 0.45) 0%, transparent 55%),
        linear-gradient(135deg, #FFF8FA 0%, #E1E4E7 60%, #FFE9EE 100%);
}

.na-hero-japan-card {
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--na-border, #fbe3e8);
    border-radius: 18px;
    padding: 14px;
    width: 280px;
    box-shadow: 0 12px 28px rgba(45, 42, 38, 0.10);
    aspect-ratio: 0.78;
}

.na-hero-japan-card-map {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.na-hero-japan-card-markers {
    position: absolute;
    inset: 14px;
    pointer-events: none;
}

.na-hero-japan-card-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.25s ease;
}

.na-hero-japan-card-marker:hover {
    transform: translate(-50%, -50%) scale(1.18);
    z-index: 3;
}

.na-hero-japan-card-marker-dot {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--na-primary, #ee96a4);
    box-shadow: 0 0 0 4px rgba(238, 150, 164, 0.20);
    animation: hero-pulse 2.4s ease-in-out infinite;
}

.na-hero-japan-card-marker:hover .na-hero-japan-card-marker-dot {
    background: var(--na-primary-dark, #ee96a4);
    box-shadow: 0 0 0 6px rgba(238, 150, 164, 0.30);
}

.na-hero-japan-card-marker-label {
    margin-top: 4px;
    padding: 1px 7px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.92);
    color: var(--na-text, #2D2A26);
    border: 1px solid var(--na-border, #fbe3e8);
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(45, 42, 38, 0.08);
}

.na-hero-japan-card-marker:hover .na-hero-japan-card-marker-label,
.na-hero-japan-card-marker:focus-visible .na-hero-japan-card-marker-label {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger pulse for visual rhythm */
.na-hero-japan-card-marker:nth-child(1) .na-hero-japan-card-marker-dot { animation-delay: 0.0s; }
.na-hero-japan-card-marker:nth-child(2) .na-hero-japan-card-marker-dot { animation-delay: 0.2s; }
.na-hero-japan-card-marker:nth-child(3) .na-hero-japan-card-marker-dot { animation-delay: 0.4s; }
.na-hero-japan-card-marker:nth-child(4) .na-hero-japan-card-marker-dot { animation-delay: 0.6s; }
.na-hero-japan-card-marker:nth-child(5) .na-hero-japan-card-marker-dot { animation-delay: 0.8s; }
.na-hero-japan-card-marker:nth-child(6) .na-hero-japan-card-marker-dot { animation-delay: 1.0s; }
.na-hero-japan-card-marker:nth-child(7) .na-hero-japan-card-marker-dot { animation-delay: 1.2s; }
.na-hero-japan-card-marker:nth-child(8) .na-hero-japan-card-marker-dot { animation-delay: 1.4s; }
.na-hero-japan-card-marker:nth-child(9) .na-hero-japan-card-marker-dot { animation-delay: 1.6s; }

@keyframes hero-pulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.4); opacity: 0.7; }
}

/* === Arrow controls === */
.na-hero-banner-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: var(--na-primary, #ee96a4);
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.na-hero-banner-arrow:hover {
    background: var(--na-primary, #ee96a4);
    color: #FFFFFF;
    transform: translateY(-50%) scale(1.06);
}

.na-hero-banner-arrow--prev { left: 16px; }
.na-hero-banner-arrow--next { right: 16px; }

/* === Dots indicator === */
.na-hero-banner-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.na-hero-banner-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: none;
    padding: 0;
    background: rgba(238, 150, 164, 0.25);
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
}

.na-hero-banner-dot.is-active {
    background: var(--na-primary, #ee96a4);
    width: 28px;
}

.na-hero-banner-dot:hover:not(.is-active) {
    background: rgba(238, 150, 164, 0.55);
}

/* === Responsive === */
@media (max-width: 991px) {
    .na-hero-banner-viewport {
        aspect-ratio: 16 / 9;
        min-height: 320px;
    }
    .na-hero-slide-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
        padding: 1.75rem 2rem 1.75rem 4rem;
        gap: 1rem;
    }
    .na-hero-slide-mascot { max-width: 220px; }
    .na-hero-slide-mascot-frame { width: 220px; height: 220px; }
    .na-hero-script-card { min-width: 220px; padding: 1rem 1.1rem; }
    .na-hero-japan-card  { width: 220px; }
}

@media (max-width: 767px) {
    .na-hero-banner-viewport {
        aspect-ratio: 4 / 5;
        min-height: 460px;
    }
    .na-hero-slide-inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        padding: 1.5rem 1.5rem 1.75rem;
        text-align: center;
    }
    .na-hero-slide-text { max-width: none; }
    .na-hero-slide-cta { justify-content: center; }
    .na-hero-slide-eyebrow { margin-left: auto; margin-right: auto; }
    .na-hero-slide-art { min-height: 180px; }
    .na-hero-slide-mascot { max-width: 180px; }
    .na-hero-slide-mascot-frame { width: 180px; height: 180px; }
    .na-hero-japan-card { width: 180px; }
    .na-hero-slide-bg--scripts .na-hero-slide-bg-char--a { font-size: 5rem; }
    .na-hero-slide-bg--scripts .na-hero-slide-bg-char--b { font-size: 4rem; }
    .na-hero-slide-bg--scripts .na-hero-slide-bg-char--c { font-size: 6rem; }
    .na-hero-slide-bg--scripts .na-hero-slide-bg-char--d { font-size: 3rem; }
    .na-hero-slide-bg--scripts .na-hero-slide-bg-char--e { font-size: 4rem; }
    .na-hero-banner-arrow { width: 36px; height: 36px; font-size: 1rem; }
    .na-hero-banner-arrow--prev { left: 10px; }
    .na-hero-banner-arrow--next { right: 10px; }
    .na-hero-japan-card-marker-label { font-size: 0.62rem; padding: 1px 5px; }
}

@media (max-width: 480px) {
    .na-hero-banner-viewport { min-height: 420px; }
    .na-hero-slide-title { font-size: 1.5rem; }
    .na-hero-slide-title-ja { font-size: 0.95rem; }
    .na-hero-slide-lead { font-size: 0.9rem; }
}

/* ==========================================
   HOMEPAGE: ONBOARDING WIZARD (logged-out)
   ========================================== */
.na-onboarding {
    margin: 2.5rem 0 1rem;
    transition: opacity 0.5s ease, max-height 0.5s ease, margin 0.5s ease, padding 0.5s ease;
    max-height: 2000px;
    overflow: hidden;
}

.na-onboarding.is-completed {
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

/* Register form is locked until onboarding is completed */
.na-register-locked {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    pointer-events: none;
    transition: opacity 0.5s ease, max-height 0.5s ease, margin 0.5s ease, padding 0.5s ease;
}

.na-register-locked.is-revealed {
    opacity: 1;
    max-height: 2000px;
    pointer-events: auto;
    margin-top: 2rem;
}

.na-onboarding-card {
    position: relative;
    background:
        radial-gradient(ellipse at top right, rgba(251, 227, 232, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at bottom left, rgba(251, 227, 232, 0.18) 0%, transparent 55%),
        linear-gradient(135deg, #FFFAFC 0%, #FFF3F6 100%);
    border: 1px solid var(--na-border, #fbe3e8);
    border-radius: 24px;
    padding: 2rem 2.25rem 1.75rem;
    box-shadow: 0 8px 28px rgba(238, 150, 164, 0.08);
    overflow: hidden;
}

.na-onboarding-header {
    text-align: center;
    margin-bottom: 1.25rem;
}

.na-onboarding-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    background: rgba(238, 150, 164, 0.08);
    color: var(--na-primary, #ee96a4);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

.na-onboarding-title {
    font-size: clamp(1.4rem, 2vw, 1.85rem);
    font-weight: 700;
    color: var(--na-text, #2D2A26);
    margin: 0 0 0.5rem;
    line-height: 1.2;
}

.na-onboarding-subtitle {
    font-size: 0.95rem;
    color: var(--na-text-muted, #6B6B6B);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.55;
}

/* Step indicator */
.na-onboarding-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 0 auto 1.5rem;
    max-width: 600px;
}

.na-onboarding-step {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.65rem 0.35rem 0.35rem;
    border-radius: 999px;
    background: transparent;
    color: var(--na-text-muted, #8B8580);
    font-size: 0.82rem;
    font-weight: 500;
    transition: background 0.3s ease, color 0.3s ease;
}

.na-onboarding-step + .na-onboarding-step::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 1px;
    background: var(--na-border, #fbe3e8);
    margin-right: 0.5rem;
}

.na-onboarding-step.is-active {
    background: rgba(238, 150, 164, 0.10);
    color: var(--na-primary, #ee96a4);
    font-weight: 600;
}

.na-onboarding-step.is-done .na-onboarding-step-dot {
    background: var(--na-primary, #ee96a4);
    color: #FFFFFF;
}

.na-onboarding-step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--na-border, #fbe3e8);
    color: var(--na-text-muted, #8B8580);
    font-size: 0.78rem;
    font-weight: 600;
    position: relative;
    transition: background 0.3s ease, color 0.3s ease;
}

.na-onboarding-step.is-active .na-onboarding-step-dot {
    background: var(--na-primary, #ee96a4);
    color: #FFFFFF;
}

.na-onboarding-step.is-done .na-onboarding-step-dot::before {
    content: '\F26E'; /* bi-check */
    font-family: 'bootstrap-icons';
    font-size: 0.85rem;
}

.na-onboarding-step.is-done .na-onboarding-step-dot {
    font-size: 0;
}

.na-onboarding-step-label {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .na-onboarding-step-label { display: none; }
    .na-onboarding-steps { gap: 0.4rem; }
}

/* Panels */
.na-onboarding-panels {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
}

.na-onboarding-panel {
    display: none;
    animation: na-onboarding-fade 0.35s ease;
}

.na-onboarding-panel.is-active {
    display: block;
}

@keyframes na-onboarding-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.na-onboarding-panel-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 0.85rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FFE9EE 0%, #E1E4E7 100%);
    color: var(--na-primary, #ee96a4);
    font-size: 2rem;
    box-shadow: 0 6px 18px rgba(238, 150, 164, 0.15);
}

.na-onboarding-panel-icon--success {
    background: linear-gradient(135deg, #EDE8F8 0%, #DDD0F0 100%);
    color: #9A7BC4;
}

.na-onboarding-panel-tag {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(238, 150, 164, 0.08);
    color: var(--na-primary, #ee96a4);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.65rem;
}

.na-onboarding-panel-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--na-text, #2D2A26);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.na-onboarding-panel-lead {
    font-size: 0.92rem;
    color: var(--na-text-muted, #6B6B6B);
    margin: 0 0 1.25rem;
    line-height: 1.55;
}

.na-onboarding-panel.is-active > .na-onboarding-panel-icon + .na-onboarding-panel-lead,
.na-onboarding-panel.is-active > .na-onboarding-panel-title + .na-onboarding-panel-lead {
    margin-bottom: 1.5rem;
}

/* Options */
.na-onboarding-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.na-onboarding-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--na-border, #fbe3e8);
    border-radius: 14px;
    background: #FFFFFF;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    user-select: none;
}

.na-onboarding-option:hover {
    border-color: rgba(238, 150, 164, 0.5);
    background: #FFFAFC;
}

.na-onboarding-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.na-onboarding-option-bullet {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--na-bg, #F5F8FB);
    color: var(--na-text-muted, #6B6B6B);
    font-size: 1rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.na-onboarding-option-text {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--na-text, #2D2A26);
    line-height: 1.35;
}

.na-onboarding-option:has(input:checked),
.na-onboarding-option.is-selected {
    border-color: var(--na-primary, #ee96a4);
    background: #FFF3F6;
    box-shadow: 0 4px 12px rgba(238, 150, 164, 0.12);
}

.na-onboarding-option:has(input:checked) .na-onboarding-option-bullet,
.na-onboarding-option.is-selected .na-onboarding-option-bullet {
    background: var(--na-primary, #ee96a4);
    color: #FFFFFF;
}

.na-onboarding-option:has(input:checked) .na-onboarding-option-text,
.na-onboarding-option.is-selected .na-onboarding-option-text {
    color: var(--na-primary, #ee96a4);
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .na-onboarding-options { grid-template-columns: 1fr; }
}

/* Actions */
.na-onboarding-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.na-onboarding-actions--center {
    justify-content: center;
}

.na-onboarding-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.4rem;
    border-radius: 999px;
    border: none;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    line-height: 1.2;
}

.na-onboarding-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.na-onboarding-btn--primary {
    background: var(--na-primary, #ee96a4);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(238, 150, 164, 0.25);
}

.na-onboarding-btn--primary:hover:not(:disabled) {
    background: var(--na-primary-dark, #ee96a4);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(238, 150, 164, 0.35);
}

.na-onboarding-btn--ghost {
    background: transparent;
    color: var(--na-text-muted, #6B6B6B);
}

.na-onboarding-btn--ghost:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.04);
    color: var(--na-text, #2D2A26);
}

/* Result summary */
.na-onboarding-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin: 0 auto 1.25rem;
    max-width: 560px;
}

.na-onboarding-summary-item {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(238, 150, 164, 0.15);
    border-radius: 12px;
    padding: 0.85rem 0.75rem;
    text-align: center;
}

.na-onboarding-summary-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--na-text-muted, #8B8580);
    margin-bottom: 0.3rem;
}

.na-onboarding-summary-value {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--na-primary, #ee96a4);
    line-height: 1.3;
}

@media (max-width: 575.98px) {
    .na-onboarding-summary { grid-template-columns: 1fr; }
    .na-onboarding-card { padding: 1.5rem 1.25rem 1.25rem; }
    .na-onboarding-actions { flex-direction: column-reverse; }
    .na-onboarding-btn { width: 100%; justify-content: center; }
}

@media (max-width: 767px) {
    .na-onboarding-options { gap: 0.5rem; }
    .na-onboarding-option { padding: 0.7rem 0.85rem; }
    .na-onboarding-option-bullet { width: 32px; height: 32px; font-size: 0.9rem; }
}

.na-reading-example {
    padding: 0.9rem 1rem;
}

.na-reading-example summary {
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}

.na-reading-example summary::-webkit-details-marker {
    display: none;
}

.na-reading-example[open] summary .text-na-primary {
    opacity: 0.65;
}

/* Submission-ready curriculum, completion and accessibility surfaces */
.na-skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2000;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    background: #2D2A26;
    color: #FFFFFF;
    transform: translateY(-160%);
    transition: transform 0.15s ease;
}

.na-skip-link:focus {
    color: #FFFFFF;
    transform: translateY(0);
}

:focus-visible {
    outline: 3px solid rgba(238, 150, 164, 0.55);
    outline-offset: 3px;
}

.na-curriculum-scope,
.na-result-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid rgba(238, 150, 164, 0.16);
    border-radius: 16px;
    background: linear-gradient(135deg, #F8FBFE, #FFFFFF);
}

.na-result-summary {
    display: block;
}

.na-scope-stats,
.na-quality-grid,
.na-result-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(90px, 1fr));
    gap: 0.75rem;
}

.na-scope-stats span,
.na-quality-grid > div,
.na-result-grid > div {
    padding: 0.75rem;
    border: 1px solid rgba(238, 150, 164, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
    text-align: center;
}

.na-scope-stats strong,
.na-quality-grid strong {
    display: block;
    color: var(--na-primary, #ee96a4);
    font-size: 1.35rem;
}

.na-quality-grid span,
.na-scope-stats span,
.na-result-grid dt {
    color: var(--na-text-muted, #6B6B6B);
    font-size: 0.78rem;
}

.na-result-grid dt,
.na-result-grid dd {
    margin: 0;
}

.na-result-grid dd {
    margin-top: 0.25rem;
    color: var(--na-text, #2D2A26);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.na-certificate {
    position: relative;
    overflow: hidden;
    max-width: 900px;
    margin-inline: auto;
    padding: 3rem 2rem;
    border: 8px double rgba(238, 150, 164, 0.62);
    background: radial-gradient(circle at top, #FFFFFF, #F6F9FC 72%);
    color: #2D2A26;
    text-align: center;
}

.na-certificate-mark {
    display: grid;
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    place-items: center;
    border-radius: 50%;
    background: var(--na-primary, #ee96a4);
    color: #FFFFFF;
    font-size: 1.8rem;
    font-weight: 700;
}

.na-certificate-name {
    margin: 0.75rem auto 1rem;
    color: var(--na-primary, #ee96a4);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .na-curriculum-scope {
        align-items: stretch;
        flex-direction: column;
    }

    .na-scope-stats,
    .na-quality-grid,
    .na-result-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .na-certificate {
        padding: 2rem 1rem;
    }
}

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

@media print {
    body * {
        visibility: hidden;
    }

    .na-certificate,
    .na-certificate * {
        visibility: visible;
    }

    .na-certificate {
        position: absolute;
        inset: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        border-color: #ee96a4;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .na-no-print {
        display: none !important;
    }
}

/* ==========================================
   HOMEPAGE V2 — Averis-style layout
   Preserves NihongoAcademy colour palette
   and Japanese decorative elements
   ========================================== */

/* ----- Floating navbar (homepage only) ----- */
.na-app-header--floating {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: transparent;
    padding: 0.85rem 1rem 0;
    pointer-events: none;
}

.na-app-header--floating .na-navbar {
    pointer-events: auto;
}

.na-app-header--floating .na-navbar--floating {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--na-border);
    border-radius: 999px;
    box-shadow: 0 8px 30px rgba(45, 42, 38, 0.08);
    max-width: 1220px;
    margin: 0 auto;
    padding: 0.45rem 1rem;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.na-app-header--floating .na-navbar .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.na-app-header--floating .na-nav-search {
    display: none;
}

.na-app-header--floating .na-navbar-cell--center {
    justify-self: center;
}

.na-app-header--floating .na-navbar-cell--center .navbar-nav {
    justify-content: center;
}

@media (max-width: 767.98px) {
    .na-app-header--floating {
        padding: 0.6rem 0.5rem 0;
    }
    .na-app-header--floating .na-navbar--floating {
        border-radius: 20px;
    }
}

/* ----- Homepage wrapper: full-width sections ----- */
.na-home-v2 {
    --na-hero-bg: #F5F8FB;
    --na-hero-deco: rgba(238, 150, 164, 0.08);
}

/* ----- Hero V2: centred, big title, floating glyphs ----- */
.na-hero-v2 {
    position: relative;
    overflow: hidden;
    background: transparent;
    border-radius: 0 0 32px 32px;
    margin: 0 -0.75rem;
    padding: 4rem 1rem 5rem;
    text-align: center;
}

.na-hero-v2-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

/* Cherry blossom tree watermark - anchors the Japanese garden mood
   in the hero while staying subtle enough not to fight the headline. */
.na-hero-v2-tree {
    position: absolute;
    right: -3%;
    bottom: 6%;
    width: 82vw;
    height: 82vw;
    max-width: 1040px;
    max-height: 1040px;
    background-image: url('/images/cherry-blossom-tree.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
    opacity: 0.18;
    pointer-events: none;
    filter: saturate(1.15) brightness(1.03);
    transform: rotate(-2deg);
    z-index: 0;
}

@media (max-width: 767.98px) {
    .na-hero-v2-tree {
        right: -12%;
        bottom: 2%;
        width: 98vw;
        height: 98vw;
        opacity: 0.14;
    }
}

/* Slides 2 & 3 keep the SHARED page decoration (the four corner kanji, the
   drifting sakura petals and the dashed accents) so all three slides read as
   one continuous sheet of paper - that is the whole point of dropping the
   card frame. It also works because the split banner is transparent: the
   decoration simply shows through it.
   Previously this rule did `display: none` on the entire deco layer, which
   is why slide 1 looked decorated and slides 2 & 3 looked like a pasted-on
   panel on a bare page. */

.na-hero-v2-glyph {
    position: absolute;
    font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
    font-weight: 700;
    color: var(--na-hero-deco);
    user-select: none;
    line-height: 1;
}

.na-hero-v2-glyph--a { top: 12%; left: 5%; font-size: 6rem; transform: rotate(-8deg); color: rgba(238, 150, 164, 0.10); }
.na-hero-v2-glyph--b { bottom: 14%; left: 7%; font-size: 5rem; transform: rotate(6deg); color: rgba(193,168,224, 0.12); }
.na-hero-v2-glyph--c { top: 10%; right: 7%; font-size: 6.5rem; transform: rotate(-6deg); color: rgba(238, 150, 164, 0.10); }
.na-hero-v2-glyph--d { top: 54%; right: 5%; font-size: 5rem; transform: rotate(8deg); color: rgba(193,168,224, 0.11); }

.na-hero-v2-petal {
    position: absolute;
    width: 18px;
    height: 18px;
    background: radial-gradient(circle at 30% 30%, #fbdce3 0%, #ee96a4 70%, #d96d80 100%);
    border-radius: 100% 0 100% 0;
    opacity: 0.5;
    animation: naFloatPetal 7s ease-in-out infinite;
}

.na-hero-v2-petal:nth-child(5) { top: 18%; left: 22%; animation-delay: -1s; }
.na-hero-v2-petal:nth-child(6) { top: 72%; left: 18%; animation-delay: -2.5s; animation-duration: 8s; }
.na-hero-v2-petal:nth-child(7) { top: 28%; right: 22%; animation-delay: -4s; }
.na-hero-v2-petal:nth-child(8) { top: 78%; right: 25%; animation-delay: -5.5s; animation-duration: 9s; }

@keyframes naFloatPetal {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-18px) rotate(15deg); }
}

.na-hero-v2-line {
    position: absolute;
    border-top: 1.5px dashed rgba(238, 150, 164, 0.18);
    width: 120px;
    transform: rotate(-25deg);
}

.na-hero-v2-line--1 { top: 22%; left: 2%; }
.na-hero-v2-line--2 { bottom: 25%; right: 4%; transform: rotate(20deg); }

/* Carousel viewport: owns the horizontal clip for the sliding track.
   This wrapper is NEVER transformed, so the clip stays put while the track
   slides underneath it. */
.na-hero-v2-viewport {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: hidden;
    /* a hair of vertical slack so the slide's own padding never gets shaved */
    padding-bottom: 10px;
    margin-bottom: -10px;
}

.na-hero-v2-slides {
    position: relative;
    width: 100%;
    min-height: 360px;
    display: flex;
    /* IMPORTANT: this track is moved by JS (`transform: translateX(-N%)`), so it
       must NOT clip its own overflow.
       An element clips its own overflow in its LOCAL coordinate space and only
       then applies its transform. With `overflow: hidden` here, slide 2/3 (which
       sit at content offset 100% / 200%) were clipped away permanently, and
       slide 1 got shifted to just off the left edge - so the hero looked
       completely blank and slides 2 & 3 could never be seen at all.
       The clip belongs on the untransformed .na-hero-v2-viewport wrapper. */
    overflow: visible;
    transform: translateX(0);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.na-hero-v2-slide {
    flex: 0 0 100%;
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transform: none;
    z-index: 1;
}

.na-hero-v2-slide.is-active {
    opacity: 1;
}

.na-hero-v2-inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
}

.na-hero-v2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: rgba(251, 227, 232, 0.22);
    color: var(--na-primary);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.na-hero-v2-title {
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    font-weight: 800;
    line-height: 1.05;
    color: var(--na-text);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.na-hero-v2-title span {
    color: var(--na-primary);
}

.na-hero-v2-title-ja {
    font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
    font-size: clamp(1.1rem, 2.4vw, 1.5rem);
    color: var(--na-text-muted);
    margin-bottom: 1rem;
}

.na-hero-v2-lead {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    color: var(--na-text-muted);
    max-width: 560px;
    margin: 0 auto 1.75rem;
    line-height: 1.7;
}

.na-hero-v2-cta {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.na-hero-v2-cta .btn-na-primary,
.na-hero-v2-cta .btn-na-outline {
    border-radius: 999px;
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
}

.na-hero-v2-cta .btn-na-primary i,
.na-hero-v2-cta .btn-na-outline i {
    margin-right: 0.35rem;
}

/* ----- Hero carousel dots (interactive) ----- */
.na-hero-v2-dots {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 3;
}

.na-hero-v2-dot {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 999px;
    background: var(--na-border);
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 0;
    appearance: none;
}

.na-hero-v2-dot:hover,
.na-hero-v2-dot:focus-visible {
    background: var(--na-primary);
    opacity: 0.7;
}

.na-hero-v2-dot.is-active {
    width: 24px;
    background: var(--na-primary);
    opacity: 1;
}

/* ----- Section heading v2 ----- */
.na-section-heading-v2 {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 2.25rem;
}

.na-kicker {
    display: inline-block;
    color: var(--na-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: rgba(251, 227, 232, 0.45);
    margin-bottom: 0.6rem;
}

.na-section-heading-v2 h2 {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 700;
    margin-bottom: 0.6rem;
}

.na-section-heading-v2 h2 span {
    display: inline-block;
    color: var(--na-primary);
    font-size: 0.65em;
    font-weight: 500;
    margin-left: 0.35rem;
    font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
}

.na-section-heading-v2 p {
    color: var(--na-text-muted);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

.na-timeline-section {
    margin-top: 4rem;
}

/* ----- Learning path: compact card grid (replaces old alternating timeline) ----- */
.na-path-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1rem;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 0.5rem;
}

.na-path-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--na-surface);
    border: 1px solid var(--na-border);
    border-radius: 18px;
    padding: 1.25rem 1.3rem 1.2rem;
    box-shadow: 0 4px 18px rgba(45, 42, 38, 0.05);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* soft colour wash in the top-right corner, one hue per column */
.na-path-card::before {
    content: "";
    position: absolute;
    top: -46px;
    right: -46px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    opacity: 0.16;
    background: var(--na-primary);
    pointer-events: none;
}

.na-path-card--2::before { background: var(--na-indigo); }
.na-path-card--3::before { background: var(--na-secondary, #C1A8E0); }
.na-path-card--4::before { background: #ee96a4; }

.na-path-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(45, 42, 38, 0.10);
    border-color: var(--na-sakura);
}

.na-path-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.na-path-num {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--na-primary);
    background: rgba(238, 150, 164, 0.12);
    border: 1px solid rgba(238, 150, 164, 0.25);
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
}

.na-path-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 1.2rem;
    color: var(--na-primary);
    background: rgba(238, 150, 164, 0.12);
}

.na-path-card--2 .na-path-icon,
.na-path-card--2 .na-path-num { color: var(--na-indigo); }
.na-path-card--2 .na-path-icon { background: rgba(193, 168, 224, 0.14); }
.na-path-card--3 .na-path-icon,
.na-path-card--3 .na-path-num { color: var(--na-secondary, #C1A8E0); }
.na-path-card--3 .na-path-icon { background: rgba(193, 168, 224, 0.14); }
.na-path-card--4 .na-path-icon,
.na-path-card--4 .na-path-num { color: #ee96a4; }
.na-path-card--4 .na-path-icon { background: rgba(238, 150, 164, 0.14); }

.na-path-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.na-path-card p {
    color: var(--na-text-muted);
    font-size: 0.88rem;
    line-height: 1.6;
    margin-bottom: 0.9rem;
}

/* whole card is a link */
a.na-path-card {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* keep description from hugging the card bottom edge */
.na-path-card p:last-child {
    margin-bottom: 0.15rem;
}

@media (max-width: 991.98px) {
    .na-path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .na-path-grid { grid-template-columns: 1fr; }
}

/* ----- Why learn / benefits ----- */
.na-why-section {
    margin-top: 4rem;
    padding: 3rem 1.5rem;
    border-radius: 28px;
    background:
        radial-gradient(circle at 0% 0%, rgba(193, 168, 224, 0.18), transparent 44%),
        linear-gradient(125deg, rgba(238, 150, 164, 0.30), rgba(244, 183, 196, 0.24) 56%, rgba(213, 196, 236, 0.28)),
        radial-gradient(ellipse at top right, rgba(251, 227, 232, 0.55), transparent 52%);
    color: var(--na-text);
}

.na-why-section .na-section-heading-v2 h2 { color: var(--na-text); }
.na-why-section .na-section-heading-v2 p { color: var(--na-text-muted); }

.na-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    max-width: 1000px;
    margin: 0 auto;
}

.na-why-card {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(238, 150, 164, 0.22);
    border-radius: 18px;
    padding: 1.5rem;
    backdrop-filter: blur(6px);
}

.na-why-card i {
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
    display: inline-block;
    color: var(--na-primary);
}

.na-why-card h4 {
    color: var(--na-text);
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.na-why-card p {
    color: var(--na-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 767.98px) {
    .na-why-grid { grid-template-columns: 1fr; }
}

/* ----- Stats V2 ----- */
.na-home-overview-v2 {
    margin-top: 4rem;
    padding: 0 0.5rem;
}

.na-home-stats-v2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.na-home-stat-v2 {
    text-align: center;
    padding: 1.5rem 1rem;
    border-radius: 20px;
    background: var(--na-surface);
    border: 1px solid var(--na-border);
    box-shadow: 0 4px 18px rgba(45, 42, 38, 0.05);
}

.na-home-stat-v2 strong {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--na-primary);
    line-height: 1;
}

.na-home-stat-v2 span {
    display: block;
    margin-top: 0.5rem;
    color: var(--na-text-muted);
    font-size: 0.85rem;
}

@media (max-width: 767.98px) {
    .na-home-stats-v2 { grid-template-columns: repeat(2, 1fr); }
}

/* ----- Continue learning highlight ----- */
.na-continue-highlight {
    margin-top: 3rem;
}

.na-continue-highlight .na-section-heading-v2 {
    margin-bottom: 1.25rem;
}

.na-continue-card-v2 {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.25rem;
    background: var(--na-surface);
    border: 1px solid var(--na-border);
    border-radius: 20px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 18px rgba(45, 42, 38, 0.05);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.na-continue-card-v2:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(45, 42, 38, 0.1);
}

.na-continue-card-v2 h4 {
    margin-bottom: 0.2rem;
    font-size: 1.1rem;
}

.na-continue-card-v2 .ja {
    color: var(--na-primary);
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

.na-continue-card-v2 .meta {
    color: var(--na-text-muted);
    font-size: 0.84rem;
}

.na-continue-card-v2 .progress-wrap {
    margin-top: 0.6rem;
}

.na-continue-card-v2 .na-progress--inline {
    height: 6px;
    background: var(--na-sakura-light);
    border-radius: 999px;
    overflow: hidden;
}

.na-continue-card-v2 .na-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--na-primary), var(--na-primary-light));
    border-radius: 999px;
}

/* ----- Content cards v2 ----- */
.na-home-compartment-v2 {
    margin-top: 4rem;
    padding: 0 0.5rem;
}

.na-home-compartment-v2 .na-section-heading-v2 {
    margin-bottom: 1.75rem;
}

.na-home-card-grid-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.na-home-content-card-v2 {
    display: flex;
    flex-direction: column;
    background: var(--na-surface);
    border: 1px solid var(--na-border);
    border-radius: 20px;
    padding: 1.25rem;
    box-shadow: 0 4px 18px rgba(45, 42, 38, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.na-home-content-card-v2:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(45, 42, 38, 0.1);
}

.na-home-content-card-v2 h4 {
    font-size: 1.05rem;
    margin: 0.7rem 0 0.2rem;
}

.na-home-content-card-v2 .ja {
    color: var(--na-primary);
    font-size: 0.85rem;
    min-height: 1.25rem;
}

.na-home-content-card-v2 p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: var(--na-text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0.5rem 0 1rem;
}

/* whole card is a link */
a.na-home-content-card-v2 {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.na-home-feature-grid-v2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.na-home-feature-card-v2 {
    background: var(--na-surface);
    border: 1px solid var(--na-border);
    border-radius: 18px;
    padding: 1.25rem;
    text-align: center;
    transition: transform 0.2s ease;
}

.na-home-feature-card-v2:hover {
    transform: translateY(-3px);
}

/* whole card is a link */
a.na-home-feature-card-v2 {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.na-home-feature-card-v2 i {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--na-sakura-light);
    color: var(--na-primary);
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
}

.na-home-feature-card-v2 h4 {
    font-size: 1rem;
    margin-bottom: 0.3rem;
}

.na-home-feature-card-v2 p {
    color: var(--na-text-muted);
    font-size: 0.84rem;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 991.98px) {
    .na-home-card-grid-v2 { grid-template-columns: repeat(2, 1fr); }
    .na-home-feature-grid-v2 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
    .na-home-card-grid-v2 { grid-template-columns: 1fr; }
    .na-home-feature-grid-v2 { grid-template-columns: 1fr; }
}

/* ----- Discovery cards v2 ----- */
.na-home-discovery-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.na-home-discovery-card-v2 {
    position: relative;
    min-height: 160px;
    overflow: hidden;
    padding: 1.5rem;
    border-radius: 22px;
    color: var(--na-text);
    text-decoration: none;
    transition: transform 0.2s ease;
}

.na-home-discovery-card-v2:hover {
    transform: translateY(-3px);
    color: var(--na-text);
}

.na-home-discovery-card-v2--map {
    background: linear-gradient(130deg, #EBE2F8, #F7F3FC);
    border: 1px solid rgba(193, 168, 224, 0.28);
}

.na-home-discovery-card-v2--community {
    background: linear-gradient(130deg, #FCE3E9, #FEF4F6);
    border: 1px solid rgba(238, 150, 164, 0.28);
}

.na-home-discovery-card-v2::after {
    position: absolute;
    right: -22px;
    bottom: -52px;
    width: 160px;
    height: 160px;
    border: 26px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    content: '';
}

.na-home-discovery-card-v2 i {
    display: block;
    margin-bottom: 1rem;
    font-size: 1.6rem;
}

.na-home-discovery-card-v2--map i { color: var(--na-indigo); }
.na-home-discovery-card-v2--community i { color: var(--na-primary); }

.na-home-discovery-card-v2 span {
    display: block;
    color: var(--na-text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.na-home-discovery-card-v2 strong {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.15rem;
    color: var(--na-text);
}

@media (max-width: 767.98px) {
    .na-home-discovery-v2 { grid-template-columns: 1fr; }
}

/* ----- Final CTA v2 ----- */
.na-cta-v2 {
    margin-top: 4rem;
    padding: 3rem 1.5rem;
    border-radius: 28px;
    background:
        radial-gradient(ellipse at top left, rgba(251, 227, 232, 0.35), transparent 45%),
        linear-gradient(135deg, var(--na-sakura-light), #FFFFFF 55%);
    border: 1px solid var(--na-border);
    text-align: center;
}

.na-cta-v2 h3 {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.na-cta-v2 p {
    color: var(--na-text-muted);
    margin-bottom: 1.25rem;
}

/* ----- Page hero banners (Lessons / Practice) ----- */
.na-page-hero-v2 {
    position: relative;
    overflow: hidden;
    background: transparent;
    border-radius: 0 0 28px 28px;
    margin: 0 -0.75rem 1.5rem;
    padding: 3rem 1rem 4rem;
    text-align: center;
}

/* Logout pinned to the hero's top-right corner (Admin page) */
.na-hero-logout {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    z-index: 2;
}

.na-page-hero-v2-inner {
    position: relative;
    z-index: 1;    max-width: 680px;
    margin: 0 auto;
}

.na-page-hero-v2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(251, 227, 232, 0.22);
    color: var(--na-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.na-page-hero-v2-title {
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--na-text);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.na-page-hero-v2-title span {
    color: var(--na-primary);
    font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
    font-weight: 500;
    font-size: 0.55em;
    margin-left: 0.4rem;
}

.na-page-hero-v2-lead {
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    color: var(--na-text-muted);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ----- Responsive hero tweaks ----- */
@media (max-width: 767.98px) {
    .na-hero-v2 {
        padding: 3rem 1rem 4rem;
        border-radius: 0 0 24px 24px;
    }
    .na-hero-v2-slides { min-height: 420px; }
    .na-hero-v2-glyph { opacity: 0.55; }
    .na-hero-v2-title { font-size: 2.2rem; }

    .na-page-hero-v2 {
        padding: 2.5rem 1rem 3rem;
        border-radius: 0 0 20px 20px;
    }
    .na-page-hero-v2-title { font-size: 1.75rem; }
}

/* ============================================================
   HERO SPLIT BANNERS  (hero carousel slides 2 & 3)
   Copy column left / visual card right, on a light "washi" grid.
   Typography: one clear vertical rhythm, measure-limited body copy,
   explicit optical line breaks, consistent 3rem button height.

   FUSION WITH THE PAGE (important):
   These banners are NOT floating cards. There is no border, no drop
   shadow, no corner radius and no opaque fill - every layered wash is
   sized so its alpha reaches ~0 before it touches the banner box, and
   the washi grid fades out inside the box too. So the banner melts into
   the page background exactly like slide 1 (which has no panel at all),
   instead of reading as a rectangle glued on top of it.
   ============================================================ */

.na-hero-v2-slide--banner {
    justify-content: stretch;
    align-items: stretch;
    padding: 6px 0;
}

.na-banner {
    --na-banner-muted: #6E6763;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.75rem);
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 2.75rem clamp(1.75rem, 3vw, 3rem);
    min-height: 400px;
    text-align: left;
    /* No frame of its own: the banner must read as part of the page, so the
       outer box contributes no border, no shadow and no corner radius. */
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
}

/* Colour wash and washi texture live on pseudo-elements rather than on the
   banner box itself. Both sit below the copy (which is z-index 2), and -
   crucially - each carries its own four-edge mask: the colour fades to 0
   over the outer ~11%/14% band and the grid over ~14%/17%. Because both
   reach full transparency *before* the box border, the banner has no edge
   to see at all: no matter how large the tint is, it melts into the page
   instead of drawing a rectangle. The tint can therefore stay clearly
   present ("背景要有") without ever producing a seam ("不要分裂的感觉"). */
.na-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        /* warm glow behind the visual column (right) */
        radial-gradient(60% 92% at 80% 48%, rgba(238, 150, 164, 0.12), rgba(238, 150, 164, 0) 100%),
        /* sakura blush: the body of the background */
        radial-gradient(78% 118% at 18% 10%, rgba(251, 227, 232, 0.26), rgba(251, 227, 232, 0) 100%),
        /* faint gold low-left */
        radial-gradient(54% 80% at 28% 90%, rgba(238, 150, 164, 0.16), rgba(238, 150, 164, 0) 100%),
        /* warm cream base removed - the shared cherry-tree watermark in the
           hero deco now shows through the banner. */
        linear-gradient(180deg, rgba(246,249,252, 0.00) 0%, rgba(243,246,249, 0.00) 100%);
    -webkit-mask-image:
        linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000000 11%, #000000 89%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 15%, #000000 85%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000000 11%, #000000 89%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 15%, #000000 85%, rgba(0, 0, 0, 0) 100%);
    mask-composite: intersect;
}

.na-banner--map::before {
    background-image:
        radial-gradient(60% 92% at 80% 48%, rgba(238, 150, 164, 0.12), rgba(238, 150, 164, 0) 100%),
        radial-gradient(78% 118% at 18% 10%, rgba(227,230,233, 0.34), rgba(227,230,233, 0) 100%),
        radial-gradient(54% 80% at 28% 90%, rgba(193,168,224, 0.11), rgba(193,168,224, 0) 100%);
        /* cream base removed - lets the hero cherry-tree watermark show through */
}

/* Washi grid removed by request - the shared cherry-tree watermark in the
   hero deco now shows through the banner without the grid tracing over it. */

/* ---------- decoration ---------- */
.na-banner-deco {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.na-banner-glyph {
    display: none; /* watermark text (あ/か/地/図) removed by request */
    position: absolute;
    font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
    font-weight: 700;
    line-height: 1;
    user-select: none;
}

/* Banner 2: big kana kept in the empty middle band, never behind the copy.
   All watermarks sit fully INSIDE the box: a glyph sliced by the edge would
   draw a hard straight cut across the page. */
.na-banner--scripts .na-banner-glyph--1 {
    top: 1.25rem; left: 40%;
    font-size: 7.5rem;
    color: rgba(238, 150, 164, 0.075);
    transform: rotate(-7deg);
}

.na-banner--scripts .na-banner-glyph--2 {
    bottom: 0.5rem; left: 33%;
    font-size: 6rem;
    color: rgba(193,168,224, 0.075);
    transform: rotate(6deg);
}

/* Banner 3: two kanji in the same restrained rhythm. */
.na-banner--map .na-banner-glyph--1 {
    top: 1.5rem; left: 42%;
    font-size: 7rem;
    color: rgba(238, 150, 164, 0.065);
    transform: rotate(-5deg);
}

.na-banner--map .na-banner-glyph--3 {
    bottom: 0.5rem; left: 36%;
    font-size: 5.5rem;
    color: rgba(193,168,224, 0.065);
    transform: rotate(7deg);
}

/* ---------- copy column ---------- */
.na-banner-copy {
    position: relative;
    z-index: 2;
    max-width: 34rem;
}

.na-banner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: rgba(251, 227, 232, 0.22);
    color: var(--na-primary);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.1;
    text-transform: uppercase;
}

.na-banner-eyebrow i {
    font-size: 0.85rem;
    line-height: 1;
}

.na-banner-title {
    margin: 0;
    font-size: clamp(1.9rem, 3.05vw, 2.85rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.028em;
    color: var(--na-text);
    text-wrap: balance;
}

.na-banner-sub {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0.9rem 0 0;
    font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--na-primary);
    line-height: 1.4;
}

.na-banner-sub::before {
    content: "";
    flex: none;
    width: 30px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--na-primary) 0%, rgba(238, 150, 164, 0.22) 100%);
}

.na-banner-lead {
    margin: 1.35rem 0 0;
    max-width: 31rem;
    font-size: 1rem;
    line-height: 1.78;
    color: var(--na-banner-muted);
}

.na-kana-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6em;
    height: 1.6em;
    padding: 0 0.3em;
    border-radius: 7px;
    background: rgba(251, 227, 232, 0.32);
    color: #ee96a4;
    font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
    font-size: 0.88em;
    font-weight: 700;
    line-height: 1;
    vertical-align: -0.2em;
}

/* ---------- buttons (uniform 3rem height, icon + label) ---------- */
.na-banner-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1.9rem;
}

.na-app .na-banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0 1.45rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.na-app .na-banner-btn i {
    font-size: 1.05rem;
    line-height: 1;
}

.na-app a.na-banner-btn--primary,
.na-app a.na-banner-btn--primary:visited {
    background: var(--na-primary);
    color: #3E231A;
    box-shadow: 0 10px 22px -12px rgba(238, 150, 164, 0.85);
}

.na-app a.na-banner-btn--primary:hover,
.na-app a.na-banner-btn--primary:focus-visible {
    background: var(--na-primary-dark);
    color: #3E231A;
    transform: translateY(-1px);
    box-shadow: 0 14px 26px -12px rgba(238, 150, 164, 0.85);
}

.na-app a.na-banner-btn--ghost,
.na-app a.na-banner-btn--ghost:visited {
    background: #FFFFFF;
    color: var(--na-text);
    border-color: var(--na-border);
}

.na-app a.na-banner-btn--ghost:hover,
.na-app a.na-banner-btn--ghost:focus-visible {
    color: var(--na-text);
    border-color: rgba(238, 150, 164, 0.38);
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -14px rgba(45, 42, 38, 0.5);
}

/* ---------- visual column ---------- */
.na-banner-visual {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.na-banner-visual::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -8%;
    top: 50%;
    width: 86%;
    aspect-ratio: 1;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 227, 232, 0.4) 0%, rgba(251, 227, 232, 0) 68%);
}

/* ---------- kana card ---------- */
.na-kana-card {
    width: 100%;
    max-width: 272px;
    margin-left: auto;
    padding: 1rem;
    /* Sit *in* the page, not above it: the old 26/48 shadow made the card read
       as a floating panel glued onto the background. A tight, faint shadow
       keeps the edge legible without lifting the card off the sheet. */
    border: 1px solid rgba(251, 227, 232, 0.8);
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: 0 16px 34px -26px rgba(45, 42, 38, 0.26), 0 1px 2px rgba(45, 42, 38, 0.03);
}

.na-kana-card-head {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.na-kana-col {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.6;
    white-space: nowrap;
}

.na-kana-col--hira { color: #ee96a4; }
.na-kana-col--kata { color: #C1A8E0; }
.na-kana-col--kanji { color: #ee96a4; }

.na-kana-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.na-kana-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.na-kana-tile--hira {
    background: #FCE9EC;
    border: 1px solid #fbe3e8;
    color: #ee96a4;
}

.na-kana-tile--kata {
    background: #EDE8F8;
    border: 1px solid #DDD0F0;
    color: #C1A8E0;
}

.na-kana-tile--kanji {
    background: #E1E4E7;
    border: 1px solid #fbe3e8;
    color: #ee96a4;
}

.na-kana-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -10px rgba(45, 42, 38, 0.5);
}

/* ---------- map card ----------
   卡片比例 = japan-hero-map.png 的比例（620×710，由 Japan.png 按透明边界裁切而来）。
   图片层与标记层使用同一百分比 inset，内容区比例因此与图片一致，
   换算后的 Region 坐标百分比可以线性对应到图上。 */
.na-banner-map-card {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: 0 0 0 auto;
    padding: 0;
    aspect-ratio: 620 / 710;
    /* Same treatment as the kana card: softened frame + faint shadow so the
       map melts into the page instead of hovering above it. */
    border: 1px solid rgba(251, 227, 232, 0.8);
    border-radius: 20px;
    background: #FFFFFF;
    overflow: hidden;
    box-shadow: 0 16px 34px -26px rgba(45, 42, 38, 0.26), 0 1px 2px rgba(45, 42, 38, 0.03);
}

.na-banner-map-card .na-hero-map-img {
    position: absolute;
    inset: 6%;
    width: 88%;
    height: 88%;
    object-fit: contain;
}

.na-banner-map-card .na-region-map-markers {
    inset: 6%;
}

.na-banner-map-card .na-region-map-marker-dot {
    width: 10px;
    height: 10px;
    border: 2px solid var(--na-primary);
    box-shadow: 0 0 0 4px rgba(238, 150, 164, 0.14), 0 1px 4px rgba(45, 42, 38, 0.22);
}

.na-banner-map-card .na-region-map-marker:hover .na-region-map-marker-dot,
.na-banner-map-card .na-region-map-marker:focus-visible .na-region-map-marker-dot {
    background: var(--na-primary);
    transform: scale(1.2);
}

/* Hero card stays clean: dots only, region names appear on hover / focus. */
.na-banner-map-card .na-region-map-marker-label {
    display: none;
}

.na-banner-map-card .na-region-map-marker:hover .na-region-map-marker-label,
.na-banner-map-card .na-region-map-marker:focus-visible .na-region-map-marker-label {
    display: block;
}

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    .na-banner {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
        padding: 2.25rem 1.75rem;
        min-height: 0;
    }

    .na-banner-copy {
        max-width: none;
    }

    .na-banner-visual {
        justify-content: flex-start;
    }

    .na-banner-visual::before {
        right: auto;
        left: 6%;
        width: 60%;
    }

    .na-kana-card {
        max-width: 268px;
        margin-left: 0;
    }

    .na-banner-map-card {
        max-width: 272px;
        margin-left: 0;
    }

    .na-banner--scripts .na-banner-glyph--1,
    .na-banner--map .na-banner-glyph--1 { left: auto; right: 4%; }
}

@media (max-width: 575.98px) {
    .na-banner {
        padding: 1.75rem 1.25rem;
        gap: 1.5rem;
    }

    .na-banner-title {
        font-size: 1.75rem;
    }

    .na-banner-lead {
        margin-top: 1.1rem;
        font-size: 0.95rem;
    }

    .na-banner-actions {
        margin-top: 1.5rem;
        gap: 0.6rem;
    }

    .na-app .na-banner-btn {
        flex: 1 1 12rem;
    }
}
/* Keep the handwriting surface usable on narrow phones while preserving its
   300 x 300 drawing coordinate system for pointer and touch input. */
.handwriting-canvas-shell {
    position: relative;
    width: min(100%, 300px);
    aspect-ratio: 1;
    margin: 0 auto;
    overflow: hidden;
    border: 2px solid var(--na-border);
    border-radius: 12px;
    background: #fff;
}

.handwriting-canvas-shell canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#hw-canvas {
    cursor: crosshair;
    touch-action: none;
}

/* ==========================================
   APP TOUR COMPONENT
   ========================================== */
.na-tour-svg-cutout {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1050;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.na-tour-svg-cutout.active {
    opacity: 1;
}

.na-tour-svg-cutout path {
    fill: rgba(18, 14, 25, 0.72);
}

.na-tour-spotlight-border {
    position: fixed;
    display: none;
    border-radius: 12px;
    border: 2.5px solid var(--na-primary, #ee96a4);
    box-shadow: 0 0 24px rgba(238, 150, 164, 0.7), inset 0 0 12px rgba(238, 150, 164, 0.25);
    pointer-events: none;
    z-index: 1052;
    will-change: top, left, width, height;
}

.na-tour-tooltip {
    position: fixed;
    width: 350px;
    background: #ffffff;
    border-radius: 18px;
    padding: 1.35rem;
    box-shadow: 0 20px 48px rgba(20, 15, 30, 0.24), 0 4px 12px rgba(238, 150, 164, 0.12);
    z-index: 1060;
    border: 1px solid rgba(238, 150, 164, 0.35);
    opacity: 0;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.25s ease, top 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: top, left, opacity;
}
.na-tour-tooltip.visible {
    opacity: 1;
}

.na-tour-tooltip-body {
    transition: opacity 0.18s ease;
}
.na-tour-tooltip-body.fading {
    opacity: 0;
}

.na-tour-step-dots {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 0.5rem;
}
.na-tour-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #E5E7EB;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.na-tour-dot.active {
    width: 18px;
    border-radius: 10px;
    background: var(--na-primary, #ee96a4);
}

.na-tour-step-count {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--na-primary);
    margin-bottom: 0.25rem;
}

.na-tour-step-title {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--na-text);
    margin-bottom: 0.45rem;
}

.na-tour-step-text {
    font-size: 0.88rem;
    line-height: 1.5;
    color: #4a4a4a;
    margin-bottom: 1.25rem;
}

.na-tour-step-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.na-tour-kbd {
    display: inline-block;
    padding: 1px 5px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #888;
    background: #f1f1f1;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-left: 4px;
}

.na-tour-welcome-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(18, 14, 25, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1070;
    padding: 1rem;
    animation: fadeIn 0.3s ease;
}

.na-tour-welcome-card {
    background: #fff;
    border-radius: 16px;
    max-width: 440px;
    width: 100%;
    padding: 2.2rem 2rem;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(238, 150, 164, 0.3);
    animation: naTourPop 0.35s ease;
}

.na-tour-welcome-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.8rem;
    background: rgba(238, 150, 164, 0.15);
    color: var(--na-primary-dark);
    border-radius: 50px;
    margin-bottom: 0.5rem;
}

/* ==========================================
   NOTIFICATIONS BELL & DROPDOWN
   ========================================== */
.na-notif-menu {
    position: relative;
}

.na-notif-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 10px;
    background: #e74c3c;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    border: 2px solid #fff;
    align-items: center;
    justify-content: center;
}

.na-notif-dropdown {
    width: 360px;
    max-width: calc(100vw - 20px);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--na-border);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
}

.na-notif-tabs {
    background: #fdfafb;
    border-bottom: 1px solid #f1f2f6;
}

.na-notif-tab-btn {
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: #64748b;
    font-size: 0.8rem;
    padding: 10px 12px;
    transition: all 0.15s ease;
}

.na-notif-tab-btn:hover {
    color: var(--na-primary);
    background: rgba(238, 150, 164, 0.05);
}

.na-notif-tab-btn.active {
    color: var(--na-primary) !important;
    background: #fff;
    border-bottom: 2px solid var(--na-primary);
}

.na-buddies-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px;
}

.na-buddies-strip::-webkit-scrollbar {
    height: 4px;
}

.na-buddies-strip::-webkit-scrollbar-thumb {
    background: #FFD6DE;
    border-radius: 4px;
}

.na-notif-list {
    max-height: 320px;
    overflow-y: auto;
}

.na-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f2f6;
    text-decoration: none;
    color: var(--na-text);
    transition: background 0.15s ease;
}

.na-notif-item:hover {
    background: #f8f9fa;
    color: var(--na-text);
}

.na-notif-item--unread {
    background: rgba(238, 150, 164, 0.08);
}

.na-notif-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.na-notif-content {
    flex: 1;
    min-width: 0;
}

.na-notif-msg {
    font-size: 0.82rem;
    line-height: 1.35;
    word-break: break-word;
}

.na-notif-time {
    font-size: 0.7rem;
    color: var(--na-text-muted);
    margin-top: 2px;
}

.na-notif-mark-all {
    font-size: 0.75rem;
    color: var(--na-primary);
}

/* ==========================================
   ACHIEVEMENT BADGES CARDS
   ========================================== */
.na-badge-card {
    background: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.na-badge-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.na-badge-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.na-badge-card-title {
    font-size: 0.9rem;
    color: var(--na-text);
}

.na-badge-card-desc {
    font-size: 0.75rem;
    line-height: 1.3;
    margin: 2px 0 4px 0;
}

.na-badge-unlocked {
    border-color: rgba(238, 150, 164, 0.4) !important;
}

.na-badge-locked {
    opacity: 0.65;
    background: #fafafa;
}

/* ==========================================
   MOBILE BOTTOM NAVIGATION ACTIVE STYLES
   ========================================== */
.na-mobile-nav-item--active {
    color: var(--na-primary) !important;
    background: rgba(238, 150, 164, 0.12);
    border-radius: 10px;
    font-weight: 700;
}

.na-mobile-nav-item--active i {
    transform: scale(1.1);
}

/* ==========================================================================
   REAL-TIME INLINE FIELD VALIDATION & PROFILE AVATAR ENHANCEMENTS
   ========================================================================== */
.na-field-wrap {
    position: relative;
}

.na-field-feedback {
    display: none;
    font-size: 0.82rem;
    margin-top: 0.35rem;
    align-items: center;
    gap: 0.35rem;
    line-height: 1.35;
    transition: all 0.2s ease-in-out;
}

.na-field-feedback.is-visible {
    display: flex;
}

.na-field-feedback.is-invalid {
    color: #dc3545;
}

.na-field-feedback.is-valid {
    color: #198754;
}

.na-field-feedback.is-checking {
    color: var(--na-brand, #ff8da1);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #dc3545 !important;
    background-image: none !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15) !important;
}

.form-control.is-valid,
.form-select.is-valid {
    border-color: #198754 !important;
    background-image: none !important;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.15) !important;
}

.na-field-counter {
    font-size: 0.78rem;
    color: var(--na-text-muted, #718096);
    text-align: right;
    margin-top: 0.25rem;
}

.na-field-counter.is-warning {
    color: #dc3545;
    font-weight: 600;
}

/* Avatar Live Status pill */
.na-avatar-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

.na-avatar-status-pill.is-success {
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
    border: 1px solid rgba(25, 135, 84, 0.25);
}

.na-avatar-status-pill.is-error {
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.25);
}

.na-avatar-status-pill.is-loading {
    background: rgba(238, 150, 164, 0.15);
    color: var(--na-primary, #ee96a4);
    border: 1px solid rgba(238, 150, 164, 0.3);
}

/* Invalid shake animation */
@keyframes naShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.na-input-shake {
    animation: naShake 0.35s ease-in-out;
}

/* ==========================================================================
   COMMUNITY ENHANCEMENTS: SEARCH, SUBFILTERS, CORRECTION TEMPLATES & BOOKMARKS
   ========================================================================== */
.na-community-searchbar {
    position: relative;
    margin-bottom: 1rem;
}

.na-community-searchbar-form {
    display: flex;
    align-items: center;
    background: var(--na-surface, #ffffff);
    border: 1px solid var(--na-border, #e2e8f0);
    border-radius: 99px;
    padding: 0.35rem 0.6rem 0.35rem 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
}

.na-community-searchbar-form:focus-within {
    border-color: var(--na-primary, #ee96a4);
    box-shadow: 0 0 0 3px rgba(238, 150, 164, 0.2);
}

.na-community-search-icon {
    color: var(--na-text-muted, #718096);
    font-size: 1rem;
    margin-right: 0.6rem;
}

.na-community-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    color: var(--na-text, #2d3748);
}

.na-community-search-input::placeholder {
    color: #a0aec0;
}

.na-community-search-clear {
    color: #a0aec0;
    text-decoration: none;
    margin-right: 0.5rem;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.na-community-search-clear:hover {
    color: #e53e3e;
}

.na-community-search-btn {
    border: none;
    background: var(--na-primary, #ee96a4);
    color: #ffffff;
    border-radius: 99px;
    padding: 0.35rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.na-community-search-btn:hover {
    background: var(--na-primary-dark, #e08392);
}

/* Sub-filter sorting bar */
.na-subfilters-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-bottom: 1.25rem;
    scrollbar-width: none;
}

.na-subfilters-bar::-webkit-scrollbar {
    display: none;
}

.na-subfilter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border-radius: 99px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--na-text-muted, #718096);
    background: var(--na-surface, #ffffff);
    border: 1px solid var(--na-border, #e2e8f0);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.na-subfilter-pill:hover {
    color: var(--na-primary, #ee96a4);
    border-color: rgba(238, 150, 164, 0.4);
    background: #FFF9FA;
}

.na-subfilter-pill.is-active {
    color: var(--na-primary, #ee96a4);
    background: #FFF0F3;
    border-color: #FFD6DE;
    font-weight: 600;
}

.na-subfilter-badge {
    background: rgba(238, 150, 164, 0.18);
    color: var(--na-primary, #ee96a4);
    font-size: 0.72rem;
    padding: 0.15rem 0.45rem;
    border-radius: 99px;
    font-weight: 700;
}

.na-subfilter-pill.is-active .na-subfilter-badge {
    background: var(--na-primary, #ee96a4);
    color: #ffffff;
}

/* Feedback Wanted Japanese Correction Banner */
.na-correction-banner {
    background: linear-gradient(135deg, rgba(238, 150, 164, 0.12), rgba(255, 230, 235, 0.4));
    border-left: 4px solid var(--na-primary, #ee96a4);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.na-correction-banner-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: #c53030;
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
}

.na-correction-banner-text {
    font-size: 0.85rem;
    color: var(--na-text-muted, #4a5568);
    margin-bottom: 0;
    line-height: 1.5;
}

/* Correction Template Quick Button */
.na-template-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    border: 1px dashed var(--na-primary, #ee96a4);
    color: var(--na-primary, #ee96a4);
    background: #FFF9FA;
    cursor: pointer;
    transition: all 0.2s ease;
}

.na-template-btn:hover {
    background: var(--na-primary, #ee96a4);
    color: #ffffff;
    border-style: solid;
}

/* ========================================================
   Streamlined Community 2-Row Layout (Clean & Uncluttered)
   ======================================================== */
.na-community-tabs-bar {
    border-bottom: 1px solid #EDF2F7;
    margin-bottom: 0.85rem;
}

.na-tabs-underline-scroll {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.na-tabs-underline-scroll::-webkit-scrollbar {
    display: none;
}

.na-tab-underline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.2rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: #64748B;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.na-tab-underline:hover {
    color: var(--na-primary, #ee96a4);
}

.na-tab-underline.is-active {
    color: var(--na-primary, #ee96a4);
    border-bottom-color: var(--na-primary, #ee96a4);
    font-weight: 700;
}

.na-tab-underline-jp {
    font-size: 0.75rem;
    color: #94A3B8;
    margin-left: 0.2rem;
}

.na-tab-underline.is-active .na-tab-underline-jp {
    color: var(--na-primary-light, #f7b7c2);
}

/* Control Bar (Left: Filter Chips, Right: Compact Search) */
.na-community-control-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.na-control-subfilters {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.na-control-subfilters::-webkit-scrollbar {
    display: none;
}

.na-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 99px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #64748B;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.na-filter-chip:hover {
    color: var(--na-primary, #ee96a4);
    border-color: #FFCCD5;
    background: #FFF9FA;
}

.na-filter-chip.is-active {
    color: var(--na-primary, #ee96a4);
    background: #FFF0F3;
    border-color: #FFD6DE;
    font-weight: 600;
}

.na-chip-badge {
    background: rgba(238, 150, 164, 0.18);
    color: var(--na-primary, #ee96a4);
    font-size: 0.72rem;
    padding: 0.1rem 0.4rem;
    border-radius: 99px;
    font-weight: 700;
}

.na-filter-chip.is-active .na-chip-badge {
    background: var(--na-primary, #ee96a4);
    color: #FFFFFF;
}

/* Compact Search */
.na-control-search-form {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 240px;
}

.na-control-search-icon {
    position: absolute;
    left: 0.85rem;
    color: #94A3B8;
    font-size: 0.85rem;
    pointer-events: none;
}

.na-control-search-input {
    width: 100%;
    border-radius: 99px;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
    padding: 0.38rem 2rem 0.38rem 2.2rem;
    font-size: 0.84rem;
    color: var(--na-text, #2D3748);
    outline: none;
    transition: all 0.2s ease;
}

.na-control-search-input:focus {
    background: #FFFFFF;
    border-color: var(--na-primary, #ee96a4);
    box-shadow: 0 0 0 3px rgba(238, 150, 164, 0.15);
}

.na-control-search-clear {
    position: absolute;
    right: 0.75rem;
    color: #94A3B8;
    font-size: 0.85rem;
    text-decoration: none;
}

.na-control-search-clear:hover {
    color: var(--na-primary, #ee96a4);
}

@media (max-width: 991px) {
    .na-community-control-bar {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 0.65rem;
    }

    .na-control-search-form {
        width: 100%;
        min-width: 100%;
    }

    .na-control-subfilters {
        width: 100%;
        padding-bottom: 4px;
    }
}

/* ===== AI Tutor — agent reasoning trace ===== */
.na-trace {
    margin: 0 0 8px 0;
    padding: 6px 10px;
    border-left: 3px solid #d98ca8;
    background: rgba(217, 140, 168, 0.08);
    border-radius: 4px;
    font-size: 0.82rem;
}

/* Shown under a reply when the language model was unreachable and the local
   reasoning engine answered from the academy database instead. */
.na-tutor-fallback-note {
    margin: 4px 0 0 0;
    font-size: 0.75rem;
    font-style: italic;
    color: #9a6b1f;
}

.na-trace summary {
    cursor: pointer;
    color: #a05a7a;
    font-weight: 600;
    user-select: none;
}

.na-trace summary:hover {
    color: #7d3f5c;
}

.na-trace-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.na-trace-icon {
    color: #7bb87a;
    font-size: 0.7rem;
}

.na-trace-label {
    flex: 1;
    color: #4a4a4a;
}

.na-trace-status {
    color: #8a8a8a;
    font-size: 0.75rem;
}

.na-trace-ok {
    color: #5a9e57;
}

.na-trace-fail {
    color: #c0392b;
}

.na-trace-detail {
    margin: 2px 0 4px 16px;
    padding-left: 8px;
    border-left: 1px dashed #d98ca8;
    color: #6a6a6a;
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ===== AI Tutor — voice input / read-aloud ===== */
.na-tutor-mic,
.na-tutor-tts,
.na-tutor-new {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--na-border);
    background: var(--na-surface, #FFFFFF);
    color: var(--na-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.na-tutor-mic:hover,
.na-tutor-tts:hover,
.na-tutor-new:hover {
    color: var(--na-primary);
    border-color: var(--na-primary);
}

/* Voice-input language toggle (日 / 中 / EN). Matches the mic/tts circular
   buttons so the input row stays visually consistent. */
.na-tutor-lang {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--na-border);
    background: var(--na-surface, #FFFFFF);
    color: var(--na-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.na-tutor-lang:hover {
    color: var(--na-primary);
    border-color: var(--na-primary);
}

.na-tutor-tts.is-active {
    color: #FFFFFF;
    background: var(--na-primary);
    border-color: var(--na-primary);
}

/* Recording state: pulsing ring so the learner can see the mic is live. */
.na-tutor-mic.is-listening {
    color: #FFFFFF;
    background: #c0392b;
    border-color: #c0392b;
    animation: na-mic-pulse 1.2s ease-in-out infinite;
}

@keyframes na-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.45); }
    50% { box-shadow: 0 0 0 6px rgba(192, 57, 43, 0); }
}

.na-tutor-new {
    font-size: 0.95rem;
    margin-right: 0.35rem;
}

.na-tutor-voice-status {
    display: block;
    padding: 0 1rem 0.4rem;
    font-size: 0.72rem;
    color: var(--na-text-muted);
    min-height: 1em;
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
    .na-trace-label {
        color: #e0e0e0;
    }

    .na-trace-detail {
        color: #a8a8a8;
        border-left-color: #7a5a68;
    }
}

/* ===== AI 导师面板：拖拽移动 + 四向调整大小 ===== */
/* 标题栏即移动把手：按住标题栏空白处可把面板拖到屏幕任意位置，
   「+」「×」按钮仍正常点击（JS 里对按钮放行）。 */
.na-tutor-header {
    cursor: move;
    touch-action: none;
}

.na-tutor-header button {
    cursor: pointer;
}

/* 拖拽期间全局禁选，避免选中面板里的文字 */
body.na-tutor-dragging {
    user-select: none;
    -webkit-user-select: none;
}

/* 左下角把手（原有行为保留）：面板右下角固定，向左上拖变大 */
.na-tutor-resize {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 22px;
    height: 22px;
    cursor: nwse-resize;
    z-index: 3;
    /* 两道斜线，暗示"可拖拽" */
    background-image: linear-gradient(135deg,
            transparent 0, transparent 4px,
            var(--na-border) 4px, var(--na-border) 5px,
            transparent 5px, transparent 9px,
            var(--na-border) 9px, var(--na-border) 10px,
            transparent 10px);
    background-repeat: no-repeat;
    background-position: 4px 8px;
    background-size: 14px 14px;
    touch-action: none;
}

.na-tutor-resize:hover,
body.na-tutor-dragging .na-tutor-resize {
    background-image: linear-gradient(135deg,
            transparent 0, transparent 4px,
            var(--na-sakura) 4px, var(--na-sakura) 5px,
            transparent 5px, transparent 9px,
            var(--na-sakura) 9px, var(--na-sakura) 10px,
            transparent 10px);
}

/* 右上角把手：与左下角对称，面板左下角固定，向右上拖变大。
   16px 见方，正好落在标题栏右侧内边距里，不遮挡「×」按钮。 */
.na-tutor-corner-tr {
    position: absolute;
    right: 0;
    top: 0;
    width: 16px;
    height: 16px;
    cursor: nesw-resize;
    z-index: 3;
    background-image: linear-gradient(225deg,
            transparent 0, transparent 4px,
            var(--na-border) 4px, var(--na-border) 5px,
            transparent 5px, transparent 9px,
            var(--na-border) 9px, var(--na-border) 10px,
            transparent 10px);
    background-repeat: no-repeat;
    background-position: right 3px bottom 3px;
    background-size: 12px 12px;
    touch-action: none;
}

.na-tutor-corner-tr:hover,
body.na-tutor-dragging .na-tutor-corner-tr {
    background-image: linear-gradient(225deg,
            transparent 0, transparent 4px,
            var(--na-sakura) 4px, var(--na-sakura) 5px,
            transparent 5px, transparent 9px,
            var(--na-sakura) 9px, var(--na-sakura) 10px,
            transparent 10px);
}

/* 左 / 上边缘：细条，平时隐形，悬停时高亮提示可拖 */
.na-tutor-edge {
    position: absolute;
    z-index: 3;
    touch-action: none;
}

.na-tutor-edge:hover {
    background: rgba(238, 150, 164, 0.3);
}

.na-tutor-edge-left {
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 6px;
    cursor: ew-resize;
}

.na-tutor-edge-top {
    top: 0;
    left: 16px;
    right: 16px;
    height: 6px;
    cursor: ns-resize;
}

/* 小屏：面板拉满可用宽度、贴底，把手全部隐藏（没有拖拽空间） */
@media (max-width: 576px) {
    .na-tutor-panel {
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        bottom: 12px !important;
        width: auto !important;
        height: 70vh !important;
        max-height: calc(100vh - 24px) !important;
    }

    .na-tutor-resize,
    .na-tutor-corner-tr,
    .na-tutor-edge {
        display: none !important;
    }
}