/* ===========================
   YumePath Version 1
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:linear-gradient(135deg,#fff8fb,#ffe6f2,#fff);
    background-attachment:fixed;
    color:#333;
    line-height:1.6;
}


/* Header */

header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 60px;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(12px);
    box-shadow:0 8px 30px rgba(0,0,0,.08);
    position:sticky;
    top:0;
    z-index:1000;
}

.logo{
    display:flex;
    align-items:center;
    gap:15px;
}

.logo h1{
    color:#d81b60;
    font-size:35px;
}

.logo p{
    color:#777;
}

.logo-img{
    width:65px;
    height:65px;
    object-fit:contain;
}

.logo-text{
    display:flex;
    flex-direction:column;
}

/* Navigation */

nav a{
    text-decoration:none;
    color:#444;
    margin-left:25px;
    font-weight:bold;
    transition:.3s;
}

nav a:hover{
    color:#d81b60;
}

/* Hero */

.hero{
    text-align:center;
    padding:90px 20px;
    background:linear-gradient(#ffe4ef,#fff8fb);
}

.hero h2{
    font-size:52px;
    color:#d81b60;
}

.hero p{
    margin-top:20px;
    font-size:20px;
    max-width:800px;
    margin-left:auto;
    margin-right:auto;
}

.hero button{
    margin:35px auto 0;
    display:block;
    padding:15px 35px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    background:#d81b60;
    color:white;
    font-size:18px;
    transition:.3s;
}

.hero button:hover{
    background:#ad1457;
    transform:translateY(-4px);
}
/* ===========================
   Features Section
=========================== */

.features,
.courses,
.ai-section,
.flashcards,
.roadmap,
.stats,
.newsletter{

    padding:80px 40px;
    text-align:center;

}

.features h2,
.courses h2,
.ai-section h2,
.flashcards h2,
.roadmap h2,
.stats h2,
.newsletter h2{

    color:#d81b60;
    margin-bottom:40px;
    font-size:38px;

}

/* ===========================
   Grid Layout
=========================== */

.feature-grid,
.course-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
    margin-top:30px;

}

/* ===========================
   Cards
=========================== */

.feature-card,

.course-card{

    background:rgba(255,255,255,.88);
    cursor:pointer;
    overflow:hidden;
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.5);

    padding:25px;

    border-radius:22px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

    /* NEW */
   display:flex;
flex-direction:column;
justify-content:flex-start;
height:auto;
}


.feature-card:hover,
.course-card:hover{
    transform:translateY(-12px) scale(1.02);
    box-shadow:0 20px 45px rgba(216,27,96,.25);
}

.course-card:active{
    transform:scale(.98);
}


.feature-card h3,

.course-card h3{

    color:#d81b60;

    font-size:22px;

    margin-bottom:15px;

}

.course-card button{

   margin-top:auto;

    width:100%;

    padding:12px 18px;

    border:none;

    border-radius:10px;

    background:linear-gradient(135deg,#ff4f8b,#d81b60);

    color:white;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:

    transform .25s ease,

    box-shadow .25s ease,

    background .25s ease;

}


.course-card button:hover{

    transform:translateY(-3px);

    background:linear-gradient(135deg,#d81b60,#ad1457);

    box-shadow:0 8px 20px rgba(216,27,96,.35);

}

.course-card button:active{

    transform:translateY(0);

}


/* ===========================
   AI Section
=========================== */

.ai-section{

    background:#ffeaf2;

}

.ai-section button{

    margin-top:30px;
    padding:15px 30px;
    border:none;
    border-radius:10px;
    background:#d81b60;
    color:white;
    cursor:pointer;
}

/* ===========================
   Newsletter
=========================== */

.newsletter input{

    width:350px;
    max-width:90%;
    padding:15px;
    margin-top:25px;
    border-radius:10px;
    border:1px solid #ccc;

}

.newsletter button{

    padding:15px 25px;
    border:none;
    border-radius:10px;
    background:#d81b60;
    color:white;
    margin-left:10px;
    cursor:pointer;

}

/* ===========================
   Footer
=========================== */

footer{

    background:#d81b60;
    color:white;
    text-align:center;
    padding:50px 20px;

}

footer hr{

    margin:20px auto;
    width:60%;
    border:none;
    border-top:1px solid rgba(255,255,255,.3);

}

/* ===========================
   Mobile
=========================== */

@media(max-width:900px){

header{

    flex-direction:column;

}

nav{margin:10px auto 20px;flex-wrap:wrap;justify-content:center;gap:8px;}

nav a{display:inline-flex;margin:0;padding:8px 12px;}

.hero h2{

    font-size:36px;

}

.hero p{

    font-size:18px;

}

.hero button{

    display:block;
    width:220px;
    margin:15px auto;

}

.newsletter button{

    margin-top:15px;
    margin-left:0;

}

}/* ==========================
   HIRAGANA GRID
========================== */

.hiragana-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:20px;

    margin-top:20px;

    margin-bottom:40px;

}

.hiragana-grid .course-card{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    align-items:center;

    height:220px;

    padding:20px;

    text-align:center;

    border-radius:15px;

}

.hiragana-grid h2{

    font-size:42px;

    margin-bottom:10px;

}

.hiragana-grid h3{

    margin-bottom:20px;

}.hiragana-grid button{

    width:100%;

    margin-top:auto;

}



/* ==========================
   SECTION HEADINGS
========================== */

section h2{

    margin-top:40px;

}

h3{

    margin-top:20px;

    color:#c2185b;

}

progress{

    width:100%;

    height:18px;

    border-radius:20px;

    overflow:hidden;

}

progress::-webkit-progress-bar{

    background:#f4d6e2;

    border-radius:15px;

}

progress::-webkit-progress-value{

    background:linear-gradient(90deg,#ff4f8b,#d81b60);

    border-radius:15px;

}

.course-card h2{

    font-size:30px;

}

.course-card h1{

    color:#d81b60;

}

.course-card p{

    color:#666;

    font-size:15px;

    margin:10px 0;

    line-height:1.5;

}

html{

    scroll-behavior:smooth;

}
.quiz-btn:disabled{

opacity:.85;

cursor:not-allowed;

}

.flag-icon {
    width: 50px;
    height: auto;
    margin-left: 8px;
    vertical-align: middle;
}


DASHBOARD
/* ===========================
        NAVIGATION
=========================== */

nav{
    position: sticky;
    top: 0;
    z-index: 1000;

    display: flex;
    justify-content: space-between;
    align-items: center;

    width: min(1200px, 92%);
    margin: 18px auto 30px;
    padding: 14px 22px;

    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px);

    border: 1px solid rgba(0,0,0,.08);
    border-radius: 18px;

    box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

/* Left Side */

.nav-left{
    display:flex;
    align-items:center;
    gap:16px;
}

/* Right Side */

.nav-right{
    display:flex;
    align-items:center;
    gap:12px;
}

nav a{

    text-decoration:none;
    color:#2c2c2c;

    font-size:.95rem;
    font-weight:600;

    padding:10px 16px;

    border-radius:12px;

    transition:.25s ease;
}

nav a:hover{

    background:#f3f4f6;

    color:#4f46e5;
}

/* Logout Button */

nav button{

    border:none;
    outline:none;

    cursor:pointer;

    padding:10px 18px;

    border-radius:12px;

    background:#ef4444;

    color:white;

    font-size:.92rem;
    font-weight:600;

    transition:.25s ease;
}

nav button:hover{

    background:#dc2626;

    transform:translateY(-2px);
}

/* Mobile */

@media(max-width:768px){

    nav{

        flex-direction:column;

        gap:14px;

        padding:16px;
    }

    .nav-left,
    .nav-right{

        width:100%;

        justify-content:center;

        flex-wrap:wrap;
    }
}

/* ===========================
        WELCOME SECTION
=========================== */

.hero{

    width:min(1200px,92%);
    margin:0 auto 35px;

}

.welcome-card{

    background:#ffffff;

    border:2px solid #ffe4ec;

    border-radius:24px;

    box-shadow:0 15px 35px rgba(230,57,114,.10);

}

.welcome-card::before{

    content:"";

    position:absolute;

    right:-70px;
    top:-70px;

    width:240px;
    height:240px;

    border-radius:50%;

    background:rgba(230,57,114,.08);

}


.welcome-card::after{

    content:"";

    position:absolute;

    left:-80px;
    bottom:-80px;

    width:260px;
    height:260px;

    border-radius:50%;

    background:rgba(255,93,143,.06);

}

.welcome-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

    position:relative;

    z-index:2;

}

.welcome-left{

    flex:1;

}

.welcome-left h2{

    font-size:2rem;

    margin-bottom:12px;

    line-height:1.3;

    color:#e63972;

}

.welcome-left p{

    color:#555;

}

.welcome-info{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin:25px 0;

}

.welcome-info p{

    background:#fff3f7;

    color:#333;

    border:1px solid #ffd2e0;

}

.continue-btn{

    background:#e63972;

    color:white;

    border:none;

}

.continue-btn:hover{

    background:#d62c63;

}

.continue-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(0,0,0,.15);

}

.welcome-right{

    width:230px;
    height:230px;

    border-radius:50%;

    background:rgba(230,57,114,.10);

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

}

.welcome-right::before{

    content:"🌸";

    font-size:7rem;

}

@media(max-width:900px){

    .welcome-content{

        flex-direction:column;

        text-align:center;

    }

    .welcome-info{

        justify-content:center;

    }

    .welcome-right{

        width:160px;
        height:160px;

        font-size:4rem;

}

.student-counter{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:18px;
    padding:10px 16px;
    border:1px solid #efc6d7;
    border-radius:999px;
    background:rgba(255,255,255,.86);
    color:#73334f;
    box-shadow:0 8px 20px rgba(180,29,92,.08);
    font-size:.95rem;
}

.student-counter strong{color:#b11654;font-size:1.1rem}
.student-counter-icon{font-size:1.05rem}
.student-counter.is-unavailable{color:#806875}

@media(max-width:520px){
    .student-counter{max-width:100%;font-size:.9rem;line-height:1.35;white-space:normal}
}

}

/* Compact, intentional tablet/mobile layout shared by public course pages. */
@media (max-width: 900px) {
    header { padding: 16px 24px; }
    .hero { padding: 48px 20px; margin-bottom: 24px; }
    .hero h2 { font-size: clamp(30px, 6vw, 42px); }
    .features, .courses, .ai-section, .flashcards, .roadmap, .stats, .newsletter { padding: 48px 20px; }
    .features h2, .courses h2, .ai-section h2, .flashcards h2, .roadmap h2, .stats h2, .newsletter h2 { margin-bottom: 24px; font-size: clamp(28px, 5vw, 36px); }
    .course-grid { width: min(1200px, 100%); gap: 16px; }
    .course-card { padding: 20px; border-radius: 16px; }
    .ai-grid { max-width: 1100px; padding: 16px !important; gap: 12px !important; }
    .ai-card { padding: 14px !important; }
    .ai-chat { min-height: 60px !important; }
}

/* Certificate verification form proportions. */
#verifyForm { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center; }
#verifyForm #certificateId { width:min(420px,100%); max-width:420px; flex:0 1 420px; min-width:0; box-sizing:border-box; }
#verifyForm button { width:auto; flex:0 1 240px; margin:0; }

@media (max-width: 520px) {
    #verifyForm { align-items:stretch; }
    #verifyForm #certificateId, #verifyForm button { flex-basis:100%; width:100%; }
}

.japanese-quote{

    margin-top:18px;

    font-size:1.3rem;

    font-weight:700;

    color:#e63972;

}

.quote-meaning{

    opacity:.8;

    margin-top:6px;

    font-size:.95rem;

   color:#777;

}
/* ===========================
        QUICK STATS
=========================== */

.course-grid{

    width:min(1200px,92%);
    margin:0 auto 35px;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:22px;

}

.course-card{

    position:relative;

    background:#ffffff;

    border-radius:20px;

    padding:24px;

    border:1px solid #ececec;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

    transition:all .3s ease;

    overflow:hidden;

   display:flex;

   flex-direction:column;

   justify-content:flex-start;

}

.course-card:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.course-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;
background:linear-gradient(
90deg,
#e63972,
#ff5d8f
);

}

.course-card h2{

    margin:0 0 18px;

    font-size:1.1rem;

    font-weight:700;

}

.course-card h1{

    margin:0;

    font-size:2.3rem;

    color:#e63972;

}

.course-card p{

    margin-top:12px;

    color:#666;

    line-height:1.5;

   margin-bottom:10px;

}

progress{

    width:100%;

    height:12px;

    margin-top:16px;

    appearance:none;

}

progress::-webkit-progress-bar{

    background:#ececec;

    border-radius:50px;

}

progress::-webkit-progress-value{

    border-radius:50px;

    background:linear-gradient(
90deg,
#e63972,
#ff5d8f
);

}

progress::-moz-progress-bar{

    border-radius:50px;

  background:linear-gradient(
90deg,
#e63972,
#ff5d8f
);

}

/* ===========================
   ACHIEVEMENTS
=========================== */

#achievementList{

display:flex;

flex-direction:column;

gap:14px;

margin-top:18px;

}

#achievementList p{

font-size:18px;

display:flex;

align-items:center;

gap:12px;

margin:0;

line-height:1.5;

}


/* ===========================
   DREAM JOURNEY
=========================== */

#dreamJourneyList{

display:flex;

flex-direction:column;

gap:12px;

margin-top:18px;

}

#dreamJourneyList p{

font-size:18px;

margin:0;

line-height:1.5;

display:flex;

align-items:center;

gap:12px;

}


/* ===========================
   STATISTICS
=========================== */

#statistics p{

display:flex;

justify-content:space-between;

align-items:center;

font-size:18px;

margin:12px 0;

line-height:1.5;

}

/* =========================================
   ONLY LEARNING PROGRESS CARDS
========================================= */

#learningProgress .progress-card{

    height:255px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

}

/* Dashboard journey: a calm full-width destination instead of a loose grid card. */
.dashboard-journey-section {
    width: min(1200px, calc(100% - 2 * var(--yp-gutter, 24px)));
    margin: 0 auto;
    padding: 20px 0 56px;
}

.dashboard-journey-card {
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid #f0ccda;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,247,251,.94));
    box-shadow: 0 14px 34px rgba(100, 27, 59, .08);
}

.dashboard-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.dashboard-section-heading h2 {
    margin: 0;
    color: #c51d5c;
    font-size: clamp(1.45rem, 3vw, 2rem);
}

.dashboard-section-kicker {
    margin: 0 0 3px;
    color: #a87588;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dashboard-section-note {
    color: #896b78;
    font-size: .85rem;
    font-weight: 700;
}

/* Keep the dashboard compact after the optional wallet card is removed. */
.dashboard-page { overflow-x: hidden; }
#statistics { align-items: start; }
#statistics > .course-card { align-self: start; }

.dashboard-journey-card #dreamJourneyList {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row;
    align-items: center;
    gap: 8px;
    margin-top: 0;
}

.dashboard-journey-card #dreamJourneyList .road {
    grid-column: span 2;
    min-height: 56px;
    display: grid;
    place-items: center;
    padding: 9px 6px;
    border: 1px solid #efd6e1;
    border-radius: 14px;
    background: #fff;
    color: #664b59;
    font-size: .8rem;
    font-weight: 750;
    text-align: center;
}

.dashboard-journey-card #dreamJourneyList .road.completed { border-color: #bfe7d1; background: #f2fcf6; color: #28744e; }
.dashboard-journey-card #dreamJourneyList .road.active { border-color: #e7a1ba; background: #fff0f6; color: #b11654; box-shadow: 0 5px 14px rgba(177, 22, 84, .12); }
.dashboard-journey-card #dreamJourneyList .road.locked { color: #997f8b; background: #fffafd; }
.dashboard-journey-card #dreamJourneyList .road-line { width: 100%; height: 2px; background: #efd4df; }

@media (max-width: 800px) {
    .dashboard-journey-section { width: min(100% - 32px, 1200px); }
    .dashboard-journey-card #dreamJourneyList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-journey-card #dreamJourneyList .road { grid-column: span 1; }
    .dashboard-journey-card #dreamJourneyList .road-line { display: none; }
}

@media (max-width: 520px) {
    .dashboard-section-heading { display: block; }
    .dashboard-section-note { display: block; margin-top: 5px; }
}

/* Homepage JLPT roadmap alignment */
.courses .course-grid{width:min(1120px,100%);margin:30px auto 0;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.courses .course-grid>.course-card{min-height:220px}
.courses .course-grid>.course-card:last-child{grid-column:2 / span 2}
.courses .course-grid>.course-card p{max-width:28ch;margin-left:auto;margin-right:auto}

@media(max-width:900px){
  .courses .course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .courses .course-grid>.course-card:last-child{grid-column:1 / -1;max-width:calc(50% - 8px);width:100%;justify-self:center}
}
@media(max-width:560px){
  .courses .course-grid{grid-template-columns:1fr}
  .courses .course-grid>.course-card:last-child{grid-column:auto;max-width:none}
}

.coming-soon{max-width:980px;margin:24px auto 56px;border-radius:24px;padding:64px 28px;box-shadow:0 14px 35px rgba(216,27,96,.08)}
.coming-soon p{max-width:760px;margin:14px auto;line-height:1.7}

.firippu-assistant{max-width:900px;margin:24px auto;padding:22px}
.firippu-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}
.firippu-heading h2{margin:4px 0;color:#d81b60}
.firippu-kicker{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:#9f174d;font-weight:700}
.firippu-balance{border:1px solid #edc7d7;border-radius:999px;padding:8px 12px;color:#9f174d;font-weight:600;white-space:nowrap}
#firippuForm{display:flex;gap:10px;margin-top:14px}
#firippuMessage{flex:1;min-width:0;padding:12px 14px;border:1px solid #e7c8d6;border-radius:10px;font:inherit}
#firippuForm button{padding:12px 18px;border:0;border-radius:10px;background:#d81b60;color:#fff;font-weight:700;cursor:pointer}
.firippu-response{margin-top:14px;padding:14px;border:1px solid #f1dce5;border-radius:10px;background:#fffafd;white-space:pre-wrap;min-height:50px}
.secondary-ai-link{margin-left:10px;background:#fff!important;color:#b11654!important;border:1px solid #d81b60!important}
@media(max-width:560px){.firippu-heading{align-items:flex-start;flex-direction:column}.firippu-balance{white-space:normal}#firippuForm{flex-direction:column}#firippuForm button{width:100%}}

.aqdas-panel{max-width:900px;margin:24px auto;padding:22px}.aqdas-header{display:flex;justify-content:space-between;align-items:center;gap:14px}.aqdas-header h2{margin:4px 0;color:#d81b60}.aqdas-kicker{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:#9f174d;font-weight:700}.aqdas-status{padding:7px 11px;border:1px solid #edc7d7;border-radius:999px;color:#9f174d;font-size:.9rem}.aqdas-panel p{color:#6d6268}.aqdas-panel form{display:flex;gap:10px;margin-top:14px}.aqdas-panel input{flex:1;min-width:0;padding:12px 14px;border:1px solid #e7c8d6;border-radius:10px;font:inherit}.aqdas-panel form button{padding:12px 18px;border:0;border-radius:10px;background:#d81b60;color:#fff;font-weight:700;cursor:pointer}.aqdas-response{margin-top:14px;padding:14px;border:1px solid #f1dce5;border-radius:10px;background:#fffafd;white-space:pre-wrap;min-height:48px}@media(max-width:560px){.aqdas-header{align-items:flex-start;flex-direction:column}.aqdas-panel form{flex-direction:column}.aqdas-panel form button{width:100%}}

.speaking-page{max-width:980px;margin:0 auto;padding:28px 20px 64px}.speaking-hero{background:linear-gradient(135deg,#fff0f6,#fff);border:1px solid #f2c8d8;border-radius:22px;padding:30px 34px;box-shadow:0 12px 30px rgba(216,27,96,.08)}.speaking-kicker{color:#9f174d;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.speaking-hero h2{margin:8px 0;color:#a51750;font-size:clamp(1.8rem,4vw,2.8rem)}.speaking-hero p{margin:0;color:#6d6268}.speaking-workspace{margin-top:22px;background:#fff;border:1px solid #efd4df;border-radius:20px;padding:20px;box-shadow:0 12px 28px rgba(0,0,0,.05)}.speaking-controls{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.speaking-controls label{display:flex;flex-direction:column;gap:5px;font-weight:600;color:#59424d}.speaking-controls select{padding:10px 12px;border:1px solid #e7c8d6;border-radius:9px;background:#fff;font:inherit}.speaking-controls button{padding:10px 14px;border:1px solid #d81b60;border-radius:9px;background:#fff;color:#b11654;font-weight:700;cursor:pointer}.ellie-conversation{height:360px;overflow:auto;margin-top:18px;padding:16px;border:1px solid #f1dce5;border-radius:14px;background:#fffafd}.ellie-empty{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#7c626e;text-align:center}.ellie-message{max-width:82%;margin:0 0 12px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid #edd9e2}.ellie-message.student{margin-left:auto;background:#fff0f6;border-color:#f0bfd2}.ellie-message strong{color:#9f174d;font-size:.9rem}.ellie-message p{margin:5px 0 0;white-space:pre-wrap}.ellie-message.feedback{background:#f8fbff;border-color:#cfe0f1}.ellie-message.prompt{background:#fffbea;border-color:#efe0a9}.ellie-composer{margin-top:14px}.ellie-composer textarea{width:100%;resize:vertical;padding:13px;border:1px solid #e7c8d6;border-radius:12px;font:inherit}.ellie-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}.ellie-actions button,.ellie-speech-controls button{padding:11px 16px;border:0;border-radius:10px;background:#d81b60;color:#fff;font-weight:700;cursor:pointer}.ellie-actions .secondary-action,.ellie-speech-controls button{background:#fff;color:#b11654;border:1px solid #d81b60}.ellie-status{min-height:1.4em;margin:10px 0 0;color:#8a536b}.ellie-guidance{max-width:980px;margin:22px auto 0}.ellie-guidance p{color:#6d6268}.ellie-speech-controls{display:flex;gap:10px;flex-wrap:wrap}@media(max-width:560px){.speaking-page{padding:18px 14px 40px}.speaking-hero{padding:24px}.speaking-controls{align-items:stretch;flex-direction:column}.speaking-controls label select,.speaking-controls button{width:100%}.ellie-conversation{height:320px}.ellie-message{max-width:94%}.ellie-actions{flex-direction:column}.ellie-actions button{width:100%}}
 .anna-live-status{font-size:.82rem;font-weight:800;color:#a65a00}.anna-live-status.is-live{color:#176b45}.anna-articles{display:grid;gap:10px;margin-top:16px}.anna-article{padding:12px 14px;border:1px solid #f0d7e1;border-radius:12px;background:#fff}.anna-article h4{margin:0 0 5px;color:#9f174d}.anna-article p{margin:4px 0;font-size:.9rem}.anna-article a{color:#b11654;font-weight:700}
.anna-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;font-size:.9rem}.anna-tools select,.anna-tools button{padding:10px 12px;border:1px solid #edc7d7;border-radius:10px;background:#fff;color:#8d2853;font:inherit}.anna-tools button{font-weight:700;cursor:pointer}
.ai-premium-page{background:linear-gradient(180deg,#fff7fb 0%,#fff 80%);color:#442c3a}.ai-site-header{display:flex;justify-content:space-between;align-items:center;max-width:1180px;margin:auto;padding:22px 28px}.ai-site-header h1{margin:0;color:#9f174d}.ai-site-header p{margin:3px 0 0;color:#806875;font-size:.88rem}.ai-header-mark{font-size:2rem;color:#d81b60}.ai-nav{display:flex;gap:26px;max-width:1180px;margin:auto;padding:0 28px 20px}.ai-nav a{color:#6f4a5b;font-weight:700;text-decoration:none}.ai-shell{max-width:1180px;margin:auto;padding:12px 28px 64px}.ai-gateway{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:24px;align-items:center;overflow:hidden;background:#fff;border:1px solid #f0cddd;border-radius:26px;padding:34px 40px;box-shadow:0 18px 50px rgba(180,29,92,.12)}.ai-gateway:after{content:"";position:absolute;width:280px;height:280px;border:1px solid #f9dce9;border-radius:50%;right:-100px;top:-100px}.ai-eyebrow{font-size:.74rem;letter-spacing:.13em;font-weight:800;color:#c11d63}.ai-gateway h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.05;margin:10px 0;color:#5b213d}.ai-gateway h2 strong{color:#b11654}.ai-gateway-copy p{max-width:560px;color:#725d68;font-size:1.05rem;line-height:1.6}.ai-primary-action{border:0;border-radius:999px;background:#d81b60;color:#fff;padding:13px 20px;font-weight:800;font-size:.95rem;cursor:pointer}.ai-gateway-orbit{position:relative;width:190px;height:190px;display:grid;place-items:center}.orbit-ring{position:absolute;border:1px solid #efb6cd;border-radius:50%}.orbit-ring-one{inset:8px}.orbit-ring-two{inset:30px;border-style:dashed}.orbit-core{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:#d81b60;color:#fff;font-size:2rem;box-shadow:0 10px 30px rgba(216,27,96,.3)}.orbit-label{position:absolute;bottom:0;color:#b11654;font-size:.65rem;letter-spacing:.15em;font-weight:800}.ai-wallet-compact{grid-column:1/-1;display:flex;align-items:center;gap:10px;border-top:1px solid #f4dce7;padding-top:16px;color:#734f60;font-size:.9rem}.wallet-label{font-weight:800;color:#a31b54}.ai-wallet-compact #coinBalance{padding:6px 10px;border-radius:999px;background:#fff5f9}.wallet-button{border:1px solid #d81b60;background:#fff;color:#b11654;border-radius:999px;padding:7px 13px;font-weight:800;cursor:pointer}.ai-workspace-premium{margin-top:28px;background:#fff;border:1px solid #ead2de;border-radius:24px;padding:26px;box-shadow:0 14px 38px rgba(50,20,35,.08)}.workspace-heading,.team-heading{display:flex;justify-content:space-between;align-items:end;gap:20px}.workspace-heading h2,.team-heading h2{margin:5px 0 0;color:#5b213d}.routing-pill{display:flex;align-items:center;gap:8px;color:#8a6877;font-size:.85rem}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#4caf78}.status-dot.is-loading{background:#e6a21a;animation:aiPulse 1s infinite}.ai-chat-premium{margin-top:20px;min-height:220px;max-height:390px;overflow:auto;border:1px solid #f0d9e4;border-radius:18px;background:linear-gradient(145deg,#fffafd,#fff);padding:22px}.chat-welcome,.chat-loading{display:flex;gap:14px;align-items:flex-start}.chat-avatar{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:13px;background:#d81b60;color:#fff;font-weight:800}.chat-welcome h3{margin:0;color:#6d2948}.chat-welcome p{margin:5px 0;color:#816a76}.prompt-grid{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0 52px}.prompt-chip{border:1px solid #edc8d8;background:#fff8fb;color:#a31b54;border-radius:999px;padding:9px 12px;font:inherit;font-size:.82rem;cursor:pointer}.ai-composer-wrap{margin-top:16px}.composer-route{font-size:.78rem;color:#a31b54;font-weight:700;margin:0 0 7px}.ai-form-premium{display:flex;gap:10px}.ai-form-premium input{flex:1;min-width:0;border:1px solid #e7c8d6;border-radius:14px;padding:14px 16px;font:inherit}.ai-form-premium button{border:0;border-radius:14px;padding:0 22px;background:#d81b60;color:#fff;font-weight:800;cursor:pointer}.ai-team-premium{margin-top:34px}.team-heading p{max-width:360px;margin:0;color:#816a76;text-align:right}.team-flow{display:flex;align-items:center;justify-content:center;gap:10px;color:#d81b60;margin:16px 0}.team-flow span{height:1px;flex:1;background:#efc4d5}.specialist-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.specialist-group{border:1px solid #efd8e3;border-radius:20px;padding:18px;background:#fff}.specialist-group h3{margin:0 0 13px;color:#9f174d;font-size:1rem}.group-icon{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:8px;background:#fff0f6;margin-right:5px}.specialist-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.specialist-card{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid #f1e0e7;border-radius:14px;background:#fffafd}.specialist-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:10px;background:#fff0f6;color:#b11654;font-weight:800}.specialist-card h4{margin:0;color:#a31b54;font-size:.93rem}.specialist-card p{margin:3px 0 0;color:#7a6871;font-size:.78rem;line-height:1.35}.specialist-group-anna{grid-column:1/-1}.specialist-group-anna .specialist-grid{grid-template-columns:minmax(0,1fr)}.anna-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px;font-size:.84rem}.anna-tools select,.anna-tools button{padding:9px 11px;border:1px solid #edc7d7;border-radius:10px;background:#fff;color:#8d2853;font:inherit}.anna-tools button{font-weight:800;cursor:pointer}.anna-articles{display:grid;gap:10px;margin-top:14px}.anna-article{padding:12px 14px;border:1px solid #f0d7e1;border-radius:12px;background:#fff}.anna-article h4{margin:0 0 5px;color:#9f174d}.anna-article p{margin:4px 0;font-size:.9rem}.anna-article a{color:#b11654;font-weight:700}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes aiPulse{50%{opacity:.35}}@media(max-width:800px){.ai-shell{padding:12px 18px 48px}.ai-site-header{padding:18px}.ai-nav{padding:0 18px 18px;gap:18px}.ai-gateway{grid-template-columns:1fr;padding:28px}.ai-gateway-orbit{display:none}.ai-wallet-compact{grid-column:auto}.team-heading{display:block}.team-heading p{text-align:left;margin-top:8px}.specialist-groups{grid-template-columns:1fr}.specialist-group-anna{grid-column:auto}}@media(max-width:520px){.ai-gateway h2{font-size:2.15rem}.ai-workspace-premium{padding:18px}.workspace-heading{display:block}.routing-pill{margin-top:10px}.ai-form-premium{flex-direction:column}.ai-form-premium button{padding:13px}.specialist-grid{grid-template-columns:1fr}.prompt-grid{margin-left:0}.ai-wallet-compact{flex-wrap:wrap}}
.ai-premium-page .ai-nav{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:18px;height:auto}
.ai-premium-page .coin-store{display:none;position:fixed;inset:0;z-index:2000;background:rgba(42,12,27,.46);align-items:center;justify-content:center;padding:20px}.ai-premium-page .coin-store.open{display:flex}.ai-premium-page .coin-store-card{background:#fff;border-radius:20px;padding:24px;max-width:480px;width:100%;box-shadow:0 24px 70px rgba(0,0,0,.25)}.ai-premium-page .coin-store-card>button{float:right;border:0;background:none;font-size:1.3rem;color:#7b5264;cursor:pointer}
.ai-premium-page .coin-packs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}.ai-premium-page .coin-packs button{padding:12px;border:1px solid #edc7d7;background:#fff6fa;border-radius:10px;color:#9f174d;font-weight:700;cursor:pointer}
.ai-premium-page .coin-packs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}.ai-premium-page .coin-packs button{padding:12px;border:1px solid #edc7d7;background:#fff6fa;border-radius:10px;color:#9f174d;font-weight:700;cursor:pointer}

/* ==========================================
   YUMEPATH GLOBAL DESIGN TOKENS + BRIDGE
   Shared foundation for legacy pages; the AI
   page keeps its approved, page-specific layer.
========================================== */
:root{--yp-primary:#d81b60;--yp-primary-dark:#ad1457;--yp-primary-soft:#fff0f6;--yp-bg:#fff7fb;--yp-surface:#fff;--yp-border:#efd4df;--yp-text:#442c3a;--yp-muted:#765f6c;--yp-radius:18px;--yp-radius-sm:12px;--yp-shadow:0 12px 32px rgba(50,20,35,.08);--yp-content:1180px;--yp-gutter:clamp(18px,4vw,40px)}
body:not(.ai-premium-page){background:linear-gradient(180deg,var(--yp-bg) 0%,#fff 82%);color:var(--yp-text);font-family:Arial,Helvetica,sans-serif}
body:not(.ai-premium-page)>header{width:100%;padding:20px var(--yp-gutter);background:rgba(255,255,255,.92);border-bottom:1px solid var(--yp-border);box-shadow:0 8px 24px rgba(50,20,35,.06)}
body:not(.ai-premium-page)>header h1{color:var(--yp-primary);font-size:clamp(1.7rem,3vw,2.3rem)}
body:not(.ai-premium-page)>header p{color:var(--yp-muted)}
body:not(.ai-premium-page)>nav{width:min(var(--yp-content),calc(100% - 2 * var(--yp-gutter)));margin:0 auto;padding:15px 0;display:flex;align-items:center;justify-content:flex-start;gap:18px;flex-wrap:wrap;background:transparent}
body:not(.ai-premium-page)>nav a{margin:0;padding:7px 0;color:var(--yp-text);font-weight:700;text-decoration:none}
body:not(.ai-premium-page)>nav a:hover{color:var(--yp-primary)}
body:not(.ai-premium-page) .hero{padding:clamp(44px,7vw,72px) var(--yp-gutter);background:linear-gradient(145deg,#fff0f6,#fff);border-bottom:1px solid var(--yp-border)}
body:not(.ai-premium-page) .hero h2{font-size:clamp(2rem,5vw,3.3rem);color:var(--yp-primary);line-height:1.12}
body:not(.ai-premium-page) .hero p{max-width:720px;margin:14px auto 0;color:var(--yp-muted);font-size:1.05rem}
body:not(.ai-premium-page) .features,body:not(.ai-premium-page) .courses,body:not(.ai-premium-page) .ai-section,body:not(.ai-premium-page) .flashcards,body:not(.ai-premium-page) .roadmap,body:not(.ai-premium-page) .stats,body:not(.ai-premium-page) .newsletter{max-width:var(--yp-content);margin:0 auto;padding:clamp(38px,6vw,64px) var(--yp-gutter)}
body:not(.ai-premium-page) .features h2,body:not(.ai-premium-page) .courses h2,body:not(.ai-premium-page) .ai-section h2,body:not(.ai-premium-page) .flashcards h2,body:not(.ai-premium-page) .roadmap h2,body:not(.ai-premium-page) .stats h2,body:not(.ai-premium-page) .newsletter h2{font-size:clamp(1.6rem,3vw,2.35rem);color:var(--yp-primary);margin-bottom:24px}
body:not(.ai-premium-page) .feature-grid,body:not(.ai-premium-page) .course-grid{max-width:var(--yp-content);margin:24px auto 0;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
body:not(.ai-premium-page) .feature-card,body:not(.ai-premium-page) .course-card{border:1px solid var(--yp-border);border-radius:var(--yp-radius);background:rgba(255,255,255,.94);box-shadow:var(--yp-shadow);padding:22px;transition:transform .2s ease,box-shadow .2s ease}
body:not(.ai-premium-page) .feature-card:hover,body:not(.ai-premium-page) .course-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(216,27,96,.14)}
body:not(.ai-premium-page) .feature-card h3,body:not(.ai-premium-page) .course-card h2,body:not(.ai-premium-page) .course-card h3{color:var(--yp-primary)}
body:not(.ai-premium-page) button,body:not(.ai-premium-page) .course-card button,body:not(.ai-premium-page) input[type=submit]{border-radius:var(--yp-radius-sm);font:inherit;font-weight:700;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
body:not(.ai-premium-page) button:hover,body:not(.ai-premium-page) input[type=submit]:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(216,27,96,.18)}
body:not(.ai-premium-page) input:not([type=checkbox]):not([type=radio]),body:not(.ai-premium-page) select,body:not(.ai-premium-page) textarea{border:1px solid #e5cbd7;border-radius:var(--yp-radius-sm);padding:12px 14px;background:#fff;color:var(--yp-text);font:inherit;max-width:100%}
body:not(.ai-premium-page) input:focus,body:not(.ai-premium-page) select:focus,body:not(.ai-premium-page) textarea:focus{outline:3px solid rgba(216,27,96,.16);border-color:var(--yp-primary)}
body:not(.ai-premium-page) progress{height:14px;border-radius:99px}
body:not(.ai-premium-page)>footer{padding:34px var(--yp-gutter);background:#9f174d;color:#fff}
@media(max-width:800px){body:not(.ai-premium-page)>header{position:relative}body:not(.ai-premium-page)>nav{gap:14px}.feature-grid,.course-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}}
@media(max-width:520px){body:not(.ai-premium-page)>header{flex-direction:column;align-items:center;gap:3px;padding:14px 16px;text-align:center}body:not(.ai-premium-page)>header h1{font-size:clamp(26px,8vw,34px);line-height:1.1}body:not(.ai-premium-page)>header p{font-size:.9rem;line-height:1.25}body:not(.ai-premium-page)>nav{padding-top:12px;padding-bottom:12px}.hero{padding-top:40px!important;padding-bottom:40px!important}.feature-grid,.course-grid{grid-template-columns:1fr}.newsletter input{width:100%;max-width:100%}}
body:has(#verifyForm) main.course-card{width:min(760px,calc(100% - 2 * var(--yp-gutter)));margin:40px auto;padding:28px;text-align:center}body:has(#verifyForm) #verifyForm{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}body:has(#verifyForm) #verifyForm input{flex:1 1 280px;width:auto}body:has(#verifyForm) #verifyForm button{flex:0 1 220px;margin:0;padding:12px 18px}body:has(#verifyForm) #verifyStatus{margin-top:14px}
@media (max-width:768px){body:not(.ai-premium-page)>nav{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;flex-wrap:wrap}}
.listening-workspace{max-width:980px;margin:24px auto;padding:clamp(18px,3vw,32px)}
.practice-intro{max-width:72ch;color:#6b6170}
.practice-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;align-items:end;margin:1.25rem 0;padding:1rem;border:1px solid rgba(214,51,132,.16);border-radius:16px;background:rgba(255,255,255,.72)}
.practice-filters label{display:flex;flex-direction:column;gap:.35rem;font-size:.86rem;font-weight:700;color:#6b2751}
.practice-filters select{min-width:0;padding:.7rem .75rem;border:1px solid #e7c8d6;border-radius:10px;background:#fff;font:inherit}
.practice-filters button{min-height:2.75rem;padding:.7rem 1rem;border:0;border-radius:10px;background:#d81b60;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.practice-actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1rem}
.practice-actions button{min-height:2.7rem;padding:.65rem 1rem;border:1px solid #d81b60;border-radius:10px;background:#fff;color:#a51750;font:inherit;font-weight:700;cursor:pointer}
.practice-actions button:disabled{opacity:.55;cursor:not-allowed}
#listeningChoices{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:1rem}
#listeningChoices button{min-height:3rem;padding:.75rem 1rem;border:1px solid #ecd2df;border-radius:12px;background:#fff;text-align:left;font:inherit;cursor:pointer}
#listeningChoices button.selected{border-color:#d81b60;background:#fff0f6;box-shadow:0 0 0 2px #d81b6030}
.listening-player{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin:1rem 0 1.25rem;padding:1rem;border:1px solid rgba(214,51,132,.18);border-radius:16px;background:rgba(255,255,255,.72)}
.listening-player audio{width:min(100%,32rem);height:2.5rem}.listening-player button{min-height:2.75rem}.listening-player p{flex-basis:100%;margin:.15rem 0 0;color:#6b6170}
@media(max-width:760px){.practice-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.practice-filters button{width:100%}}
@media(max-width:600px){.practice-filters{grid-template-columns:1fr}.practice-actions{flex-direction:column}.practice-actions button{width:100%}#listeningChoices{grid-template-columns:1fr}.listening-player{align-items:stretch}.listening-player button,.listening-player audio{width:100%}}

/* Learning catalogue pages: vocabulary, grammar and kanji share one clear study layout. */
.learning-page .hero{padding-block:clamp(42px,6vw,68px)}
.learning-page .hero h2{margin-inline:auto;max-width:900px;font-size:clamp(2rem,4.5vw,3.3rem)}
.learning-catalog-shell{width:min(1180px,calc(100% - 2 * var(--yp-gutter)));margin:28px auto 64px}
.learning-lesson-grid{margin-top:0!important;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;align-items:stretch}
.learning-lesson-grid>.course-card{position:relative;min-height:210px;padding:25px 24px 22px;border-top:5px solid #e72d67;overflow:visible}
.learning-lesson-grid>.course-card h2{font-size:1.22rem;line-height:1.25;margin-bottom:10px}
.learning-lesson-grid>.course-card p{color:#6c5b64;line-height:1.55}
.learning-lesson-grid>.course-card strong{display:inline-block;color:#a91850;padding:4px 9px;border-radius:999px;background:#fff0f6;font-size:.9rem}
.learning-lesson-grid>.course-card button{margin-top:auto;min-height:44px}
.grammar-page #grammarLessonContent{width:min(860px,100%);margin:0 auto;padding:clamp(24px,4vw,40px);border-top:5px solid #e72d67}
.grammar-page #grammarLessonContent h2{font-size:clamp(1.7rem,4vw,2.5rem);margin-bottom:22px;color:#9f174d}
.grammar-page #grammarLessonContent h3{margin-top:22px;color:#7e3556;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase}
.grammar-page #grammarLessonContent p{max-width:70ch;color:#554650;white-space:pre-line}
.grammar-page #grammarLessonContent button{width:auto;min-width:150px;margin:22px 8px 0 0}
.kanji-learning-shell{display:grid;gap:22px}
.kanji-page #lessonGrid{margin-top:0!important;grid-template-columns:repeat(auto-fit,minmax(205px,1fr))!important}
.kanji-page #lessonGrid>.course-card{min-height:150px;border-top:4px solid #e72d67}
.kanji-page #kanjiContainer{margin-top:0!important;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important}
.kanji-page #kanjiContainer>.course-card{border-top:4px solid #e72d67}
.kanji-page #courseProgress{width:min(100%,620px);height:14px;display:block;margin:14px 0 8px}
.kanji-page .navigation-buttons{display:flex;gap:12px;flex-wrap:wrap}
.kanji-page .navigation-buttons button{width:auto;min-width:180px}
@media(max-width:600px){.learning-catalog-shell{width:min(100% - 28px,1180px);margin:18px auto 42px}.learning-lesson-grid>.course-card{min-height:0;padding:22px}.grammar-page #grammarLessonContent{padding:22px}.grammar-page #grammarLessonContent button,.kanji-page .navigation-buttons button{width:100%;margin-right:0}.kanji-page #lessonGrid,.kanji-page #kanjiContainer{grid-template-columns:1fr!important}}

/* Real Japanese learning surface */
.real-japanese-page{width:min(1160px,100%);margin:0 auto;padding:28px 24px 64px;color:#442c3a}
.real-hero{background:linear-gradient(135deg,#fff4f8,#fff);border:1px solid #f0cada;border-radius:24px;padding:32px clamp(22px,5vw,56px);box-shadow:0 12px 34px rgba(180,29,92,.08)}
.real-hero h2{margin:.3rem 0 .7rem;color:#9f174d;font-size:clamp(1.8rem,4vw,3rem)}
.real-hero p{max-width:720px;line-height:1.65;color:#715d68}
.real-hero label{display:block;margin-top:18px;font-weight:800;color:#73334f}
.real-hero select,.natural-form select{margin-top:7px}
.eyebrow{margin:0;color:#c11d63;font-size:.72rem;letter-spacing:.13em;font-weight:800}
.real-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:22px}
.real-card{background:#fff;border:1px solid #ead2de;border-radius:22px;padding:26px;box-shadow:0 12px 34px rgba(85,36,61,.07)}
.real-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.real-card h2{margin:.35rem 0 0;color:#5b213d;font-size:clamp(1.35rem,2.4vw,2rem)}
.level-pill{border-radius:999px;background:#fff0f6;color:#b11654;padding:7px 11px;font-weight:800;font-size:.8rem}.real-reading{margin:16px 0 4px;color:#b11654;font-size:1.1rem}.real-translation{margin:0 0 18px;font-size:1.08rem;font-weight:700;color:#4e3a45}.real-detail{border-top:1px solid #f3dce7;border-bottom:1px solid #f3dce7;padding:14px 0}.real-detail h3,.real-columns h3{margin:0 0 5px;color:#8c2e56;font-size:.9rem}.real-detail p{margin:0 0 12px;color:#715d68;line-height:1.55}.real-detail p:last-child{margin-bottom:0}.real-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:16px}.real-columns ul,.natural-result ul{margin:0;padding-left:18px;color:#715d68;line-height:1.6;font-size:.92rem}.real-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.real-actions button,.natural-form button,.saved-list button,.button{border:1px solid #d81b60;border-radius:999px;padding:10px 15px;background:#d81b60;color:#fff;font:inherit;font-weight:800;cursor:pointer;text-decoration:none}.real-actions button+button{background:#fff;color:#b11654}.muted{color:#806875;line-height:1.55}.natural-form{display:grid;gap:8px;margin-top:18px}.natural-form label{font-weight:800;color:#73334f}.natural-form textarea{min-height:110px;resize:vertical}.natural-form button{justify-self:start;margin-top:5px}.natural-result{margin-top:18px;border-radius:14px;background:#fff7fb;padding:16px;min-height:90px;color:#5b213d}.natural-result h3{margin-top:0}.saved-card{margin-top:22px}.saved-list{display:grid;gap:10px;margin:14px 0 0;padding:0;list-style:none}.saved-list li{display:flex;justify-content:space-between;align-items:center;gap:14px;border:1px solid #f0dce6;border-radius:12px;padding:10px 12px;color:#5b213d}.saved-list button{padding:7px 11px;background:#fff;color:#b11654;font-size:.85rem;white-space:nowrap}.status{min-height:1.3em;color:#8c2e56}
@media(max-width:760px){.real-japanese-page{padding:18px 14px 44px}.real-grid{grid-template-columns:1fr}.real-card{padding:20px}.real-columns{grid-template-columns:1fr}.saved-list li{align-items:flex-start;flex-direction:column}.saved-list button{align-self:flex-end}}
.ai-response-content{color:#5e4652;line-height:1.6}.ai-response-content>p:first-child{margin-top:0}.ai-response-note{color:#7f6673;font-size:.93rem}.ai-card-list{display:grid;gap:10px;margin-top:14px}.ai-card-item,.ai-quiz-question{border:1px solid #efd8e3;border-radius:12px;background:#fff;padding:13px;margin:12px 0}.ai-card-item h4,.ai-quiz-question h4{margin:0 0 9px;color:#8f2051}.ai-quiz-option{display:block;width:100%;text-align:left;margin:7px 0;padding:10px 12px;border:1px solid #e8c7d6;border-radius:9px;background:#fff8fb;color:#5b213d;font:inherit;cursor:pointer}.ai-quiz-option:hover:not(:disabled){border-color:#d81b60;background:#fff0f6}.ai-quiz-option:disabled{cursor:default;opacity:.8}.ai-answer-result{margin:10px 0 0;font-weight:700}.ai-answer-result.is-correct{color:#19764a}.ai-answer-result.is-incorrect{color:#a31b54}.ai-retry-button{margin-top:12px;border:1px solid #d81b60;background:#fff;color:#a31b54;border-radius:9px;padding:8px 12px;font-weight:700;cursor:pointer}
.course-coming-soon{max-width:860px;margin:48px auto;text-align:center;border:1px solid #f1d4df;border-radius:22px;background:linear-gradient(135deg,#fff4f8,#fff);box-shadow:0 14px 34px rgba(216,27,96,.08)}
.course-coming-soon .eyebrow{color:#a51750;font-weight:800;letter-spacing:.12em;font-size:.78rem}
.course-coming-soon .button{display:inline-block;margin:10px 5px;text-decoration:none}
.real-translation-audio{border:1px solid #d81b60;border-radius:999px;padding:8px 13px;background:#fff;color:#b11654;font:inherit;font-weight:800;cursor:pointer}
.support-link{display:inline-block;margin-top:12px;color:#ffd6e6;font-weight:700}
.ellie-live-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding:14px 16px;border:1px solid #f0bfd2;border-radius:14px;background:linear-gradient(135deg,#fff4f8,#fff)}.ellie-live-panel p{margin:4px 0 0;color:#765968;font-size:.88rem}.ellie-live-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.ellie-live-actions button{padding:10px 13px;border:1px solid #d81b60;border-radius:9px;background:#d81b60;color:#fff;font-weight:700;cursor:pointer}.ellie-live-actions button[hidden]{display:none}.ellie-session-state{font-size:.75rem;font-weight:800;letter-spacing:.06em;color:#9f174d}@media(max-width:560px){.ellie-live-panel{align-items:stretch;flex-direction:column}.ellie-live-actions{justify-content:stretch}.ellie-live-actions button{flex:1}}