/* ---------------------------------------------------------------------------
   Design tokens. Orange, sky blue, pink and yellow from the supplied reference.
   Navy text keeps colorful learning surfaces readable.
   --------------------------------------------------------------------------- */
:root{
 --amaranth:#C63F16;--amaranth-dark:#A83110;--amaranth-deep:#762708;--pink:#F65A2A;--rose:#FFC1CF;
 --chalk:#E7F2FC;--card:#FFFFFF;--ink:#14172F;--muted:#505A70;--line:#CFDFED;--soft:#FFE6DF;
 --lavender:#EFEBFA;--lavender-ink:#6C55B2;--mint:#E4F5EC;--mint-ink:#2B8A62;--peach:#FFF0DE;--peach-ink:#BD7419;--sky:#E6EFFA;--sky-ink:#3A6FB3;
 --shadow-sm:0 1px 2px rgba(74,32,48,.04),0 4px 14px rgba(74,32,48,.06);
 --shadow-md:0 2px 4px rgba(74,32,48,.04),0 14px 34px rgba(74,32,48,.09);
 --shadow-brand:0 8px 20px rgba(171,36,80,.28);
 --r-xl:26px;--r-lg:22px;--r-md:16px;--r-sm:12px;
 --scale:1;font-size:calc(17px * var(--scale))
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--chalk);color:var(--ink);font-family:'DM Sans','Noto Sans JP',sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{touch-action:manipulation}
button{cursor:pointer;border:0;background:none;color:inherit}
button:disabled{opacity:.5;cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #175D9C;outline-offset:4px;border-radius:6px}
a{color:var(--amaranth)}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
h1,h2,h3{font-weight:700;letter-spacing:-.01em}
strong{font-weight:700}

/* Shared surfaces ---------------------------------------------------------- */
.right-card,.history,.metric,.empty-state,.path-card,.test-intro,.course-card,.lesson,.menu-card,.flash,.list-card,.stat-tile,.quick-tile,.profile-card{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.right-card{border-radius:var(--r-lg);padding:24px;margin-bottom:18px}
.right-card h2{font-size:1rem;margin:0 0 16px}
.iconbox{display:grid;place-items:center;flex-shrink:0;background:var(--soft);color:var(--amaranth);width:48px;height:48px;border-radius:15px}
.iconbox svg{width:23px;height:23px}
.tint-pink{background:var(--soft);color:var(--amaranth)}
.tint-lavender{background:var(--lavender);color:var(--lavender-ink)}
.tint-mint{background:var(--mint);color:var(--mint-ink)}
.tint-peach{background:var(--peach);color:var(--peach-ink)}
.tint-sky{background:var(--sky);color:var(--sky-ink)}
.chev{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--chalk);color:var(--muted);flex-shrink:0}
.chev svg{width:16px;height:16px}

/* Buttons ------------------------------------------------------------------ */
.primary{background:var(--amaranth);color:#fff;border-radius:15px;padding:14px 24px;display:inline-flex;align-items:center;justify-content:center;gap:12px;font-weight:700;min-height:54px;box-shadow:var(--shadow-brand);transition:transform .18s,box-shadow .18s,background .18s}
.primary:hover{background:var(--amaranth-dark);transform:translateY(-1px)}
.primary:active{transform:translateY(0);box-shadow:0 3px 10px rgba(171,36,80,.25)}
.primary:disabled{box-shadow:none;transform:none}
.primary svg{width:20px;height:20px}
.secondary{border:1px solid var(--line);background:#fff;border-radius:15px;padding:13px 20px;min-height:54px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;box-shadow:var(--shadow-sm);transition:background .18s,transform .18s}
.secondary:hover{background:#FFF6F0;transform:translateY(-1px)}
.secondary svg{width:20px;height:20px}
.compact{min-height:42px;padding:8px 14px;font-size:.78rem;white-space:nowrap;border-radius:12px}
.text-button{color:var(--amaranth);padding:12px;font-weight:600}
.text-button:hover{text-decoration:underline}
.small-link{font-size:.82rem;color:var(--amaranth);display:inline-flex;align-items:center;gap:6px;padding:0;margin-top:16px;font-weight:700}
.small-link svg{width:18px;height:18px}
.pill{display:inline-flex;align-items:center;gap:7px;border-radius:30px;background:var(--soft);color:var(--amaranth);padding:6px 14px;font-size:.72rem;font-weight:700}

/* Sidebar (desktop) -------------------------------------------------------- */
.sidebar{width:264px;position:fixed;inset:0 auto 0 0;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:28px 20px;z-index:10;overflow-y:auto}
.brand{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px;text-align:left;padding:4px 8px 28px;color:var(--ink);font-size:1.15rem;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.brand small{grid-column:2;display:block;color:var(--muted);font-size:.7rem;font-weight:500;letter-spacing:.02em;margin-top:2px}
.logo-flower{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--amaranth),#F65323);color:#fff;font-size:1.35rem;grid-row:span 2;box-shadow:var(--shadow-brand)}
.logo-flower .logo-hibiscus{width:76%;height:76%}
.nav{display:flex;flex-direction:column;gap:6px}
.nav button{display:flex;gap:14px;align-items:center;text-align:left;border-radius:14px;padding:13px 14px;font-size:.92rem;font-weight:600;color:var(--muted);transition:background .18s,color .18s}
.nav button svg{width:22px;height:22px}
.nav button.active{color:var(--amaranth);background:var(--soft)}
.nav button:hover{background:#FFF2EB;color:var(--ink)}
.nav button.active:hover{color:var(--amaranth)}
.nav-badge{display:inline-grid;place-items:center;background:var(--amaranth);color:#fff;min-width:22px;height:22px;padding:0 6px;border-radius:20px;font-size:.65rem;margin-left:6px;font-weight:700}
.side-bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:20px}
.help{display:flex;align-items:center;gap:12px;padding:10px 12px;font-size:.86rem;font-weight:600;color:var(--muted);border-radius:12px}
.help:hover{background:#FFF2EB;color:var(--ink)}
.side-note{font-size:.72rem;color:var(--muted);padding:12px 12px 0}

/* Top bar ------------------------------------------------------------------ */
.main{margin-left:264px}
.topbar{position:sticky;top:0;z-index:9;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:78px;padding:14px 44px;background:rgba(231,242,252,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(207,223,237,.9)}
.breadcrumb{font-size:.82rem;color:var(--muted);font-weight:500}
.tools{display:flex;gap:10px;align-items:center}
.home-button{display:flex;align-items:center;gap:6px;color:var(--amaranth);font-size:.8rem;font-weight:700;min-height:42px;padding:0 14px;border-radius:30px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);white-space:nowrap}
.home-button svg{width:19px;height:19px}
.level-chip{font-size:.72rem;font-weight:700;color:var(--amaranth);background:var(--soft);padding:8px 13px;border-radius:30px;white-space:nowrap}
.text-size{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid var(--line);border-radius:30px;background:#fff;padding:8px 14px;font-size:.76rem;font-weight:600;min-height:42px;box-shadow:var(--shadow-sm)}
.text-size strong{font-size:.95rem}
.avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#F7DCE7,#EFC3D5);color:var(--amaranth);font-size:.9rem;font-weight:700;border:2px solid #fff;box-shadow:var(--shadow-sm)}
.mobile-brand{display:none;align-items:center;gap:9px;color:var(--ink);font-size:1rem;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.mobile-brand .logo-flower{width:36px;height:36px;border-radius:11px;font-size:1.1rem;grid-row:auto}
.content{max-width:1180px;margin:auto;padding:30px 44px 56px}

/* Page headings ------------------------------------------------------------ */
.eyebrow{font-size:.7rem;letter-spacing:.14em;color:var(--amaranth);font-weight:700;text-transform:uppercase}
.heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;gap:16px}
.heading h1{font-size:1.5rem;line-height:1.4;margin:6px 0 6px}
.heading p{margin:0;color:var(--muted);font-size:.9rem}
.heading .small-link{margin-top:0;white-space:nowrap}
.date{font-size:.78rem;color:var(--muted);white-space:nowrap;background:#fff;border:1px solid var(--line);padding:7px 13px;border-radius:30px;font-weight:600}
.section-title{display:flex;justify-content:space-between;align-items:center;margin:28px 0 14px}
.section-title h2{font-size:1.05rem;margin:0}
.section-title span{color:var(--muted);font-size:.76rem;font-weight:500}
.section-title .small-link{margin-top:0}
.subtle{font-size:.8rem;color:var(--muted)}
.note{font-size:.82rem;color:var(--muted);margin:0}
.center{text-align:center}

/* Learning loop stepper ---------------------------------------------------- */

/* Home ---------------------------------------------------------------------- */
.home-flow{max-width:980px;margin:auto}
.greeting{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.greeting h1{font-size:1.55rem;margin:0 0 4px;line-height:1.35}
.greeting p{margin:0;color:var(--muted);font-size:.9rem}
.streak-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:30px;padding:8px 14px;font-size:.82rem;font-weight:700;color:var(--peach-ink);box-shadow:var(--shadow-sm);white-space:nowrap}
.streak-chip svg{width:18px;height:18px;color:#E8863A}
.hero-card{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:28px 30px;color:#fff;background:linear-gradient(135deg,#D74A1B 0%,var(--amaranth) 45%,#A83110 100%);box-shadow:0 18px 40px rgba(142,27,67,.28);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center}
.hero-card::before,.hero-card::after{content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.hero-card::before{width:260px;height:260px;right:-70px;top:-110px}
.hero-card::after{width:180px;height:180px;right:90px;bottom:-120px;background:rgba(255,255,255,.06)}
.hero-copy{position:relative;z-index:1;min-width:0}
.hero-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.22);border-radius:30px;padding:5px 12px;font-size:.7rem;font-weight:700;letter-spacing:.04em}
.hero-card h2{font-size:1.45rem;line-height:1.45;margin:14px 0 8px;color:#fff}
.hero-card p{margin:0 0 18px;font-size:.86rem;color:rgba(255,255,255,.86);max-width:520px}
.hero-progress{display:flex;justify-content:space-between;align-items:center;font-size:.74rem;font-weight:600;color:rgba(255,255,255,.9);margin-bottom:8px;max-width:420px}
.hero-bar{height:8px;border-radius:10px;background:rgba(255,255,255,.22);overflow:hidden;max-width:420px;margin-bottom:20px}
.hero-bar i{display:block;height:100%;background:#fff;border-radius:10px;box-shadow:0 0 12px rgba(255,255,255,.5)}
.hero-cta{background:#fff;color:var(--amaranth);border-radius:15px;padding:13px 22px;display:inline-flex;align-items:center;gap:10px;font-weight:700;min-height:52px;box-shadow:0 8px 20px rgba(60,10,30,.2);transition:transform .18s}
.hero-cta:hover{transform:translateY(-1px)}
.hero-cta svg{width:20px;height:20px}
.hero-art{position:relative;z-index:1;display:grid;place-items:center;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}
.hero-art::before{content:'';position:absolute;inset:18px;border-radius:50%;background:rgba(255,255,255,.14)}
.hero-art svg{position:relative;width:62px;height:62px;stroke-width:1.5}
.list-card{border-radius:var(--r-lg);padding:6px}
.list-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;text-align:left;padding:14px;border-radius:16px;transition:background .18s}
.list-row:hover{background:#FCF8FA}
.list-row+.list-row{border-top:1px solid var(--line)}
.list-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.list-body strong{font-size:.96rem}
.list-body small{color:var(--muted);font-size:.78rem}
.mini-bar{display:block;height:6px;border-radius:10px;background:var(--chalk);overflow:hidden;margin-top:6px;max-width:260px}
.mini-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--amaranth));border-radius:10px}
.list-row .done-tag{font-size:.7rem;font-weight:700;color:var(--mint-ink);background:var(--mint);border-radius:20px;padding:3px 9px}
.stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.stat-tile{border-radius:18px;padding:16px 14px;display:flex;align-items:center;gap:12px}
.stat-tile .iconbox{width:42px;height:42px;border-radius:13px}
.stat-tile .iconbox svg{width:20px;height:20px}
.stat-tile div{display:flex;flex-direction:column;min-width:0}
.stat-tile small{font-size:.7rem;color:var(--muted);font-weight:500}
.stat-tile strong{font-size:1.15rem;line-height:1.3}
.stat-tile strong em{font-style:normal;font-size:.72rem;font-weight:600;color:var(--muted);margin-left:2px}
.quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.quick-tile{border-radius:18px;padding:16px 10px 14px;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;transition:transform .18s,box-shadow .18s}
.quick-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.quick-tile .iconbox{width:50px;height:50px;border-radius:16px}
.quick-tile strong{font-size:.8rem}
.quick-tile small{font-size:.68rem;color:var(--muted);line-height:1.4}
.footer{font-size:.74rem;color:var(--muted);margin-top:30px;display:flex;gap:18px;justify-content:center}
.footer button{padding:0;color:var(--muted);text-decoration:underline}

/* Menu cards (records page) ------------------------------------------------- */
.menu-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.menu-card{min-height:140px;border-radius:var(--r-lg);padding:20px;text-align:left;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;transition:transform .2s,box-shadow .2s}
.menu-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.menu-card>span:nth-child(2){display:flex;flex-direction:column;gap:4px}
.menu-card strong{font-size:1rem}
.menu-card small{color:var(--muted);font-size:.8rem;line-height:1.6}
.menu-card em{grid-column:2;display:flex;justify-content:space-between;align-items:center;color:var(--amaranth);font-size:.76rem;font-style:normal;font-weight:700}
.menu-card em svg{width:18px;height:18px}
.menu-cards .menu-card:nth-child(2) .iconbox{background:var(--lavender);color:var(--lavender-ink)}
.menu-cards .menu-card:nth-child(3) .iconbox{background:var(--mint);color:var(--mint-ink)}
.menu-cards .menu-card:nth-child(4) .iconbox{background:var(--peach);color:var(--peach-ink)}
.card-badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:20px;background:var(--amaranth);color:#fff;font-size:.65rem;margin-left:4px;vertical-align:middle}

/* Learn page ---------------------------------------------------------------- */
.lessons{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lesson{border-radius:var(--r-lg);padding:22px;text-align:left;display:flex;flex-direction:column;min-height:214px;transition:transform .2s,box-shadow .2s}
.lesson:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.lesson-top{display:flex;justify-content:space-between;align-items:center}
.lesson:nth-child(2) .iconbox{background:var(--lavender);color:var(--lavender-ink)}
.lesson:nth-child(3) .iconbox{background:var(--mint);color:var(--mint-ink)}
.lesson:nth-child(4) .iconbox{background:var(--peach);color:var(--peach-ink)}
.lesson small{font-size:.7rem;color:var(--muted);background:var(--chalk);padding:4px 10px;border-radius:20px;font-weight:600}
.lesson h3{font-size:1.08rem;margin:16px 0 4px}
.lesson p{font-size:.82rem;color:var(--muted);margin:0 0 16px}
.lesson-footer{margin-top:auto;color:var(--amaranth);font-size:.78rem;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.lesson-footer svg{width:18px;height:18px}
/* Learn menu tiles: the Home entry card look (kicker, bold title, white pill, big faded glyph). Two columns even on phones. */
.learn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.learn-tile{--kicker:#7b280e;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;min-height:205px;padding:22px;border-radius:24px;text-align:left;color:var(--ink);box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s}
.learn-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.learn-kicker{font-size:.72rem;letter-spacing:.12em;font-weight:800;color:var(--kicker)}
.learn-tile strong{position:relative;z-index:1;font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.25;letter-spacing:-.03em;margin:10px 0 4px}
.learn-tile small{position:relative;z-index:1;margin-bottom:14px;font-size:.88rem;line-height:1.5;color:#2d2c30}
.learn-pic{position:absolute;right:0;bottom:0;z-index:-1;height:92%;width:auto;max-width:48%;object-fit:contain;object-position:right bottom;pointer-events:none}
.learn-tile.wide{grid-column:1/-1;min-height:193px}
.tile-pronunciation.wide{min-height:209px}


.tile-diary{background:#FFD0DA}
.tile-words{background:#FFD765}
.tile-words-review{background:#FFB48E}
.tile-phrases{background:#9FD6F7;--kicker:#174A75}
.tile-phrases-review{background:#CDBEF7;--kicker:#46308F}
.tile-pronunciation{background:#A8E4C4;--kicker:#1D6345}
.learn-bar{position:relative;z-index:1;display:block;width:min(100%,320px);height:8px;margin:-6px 0 14px;border-radius:8px;background:#ffffffb3;overflow:hidden}
.learn-bar i{display:block;height:100%;border-radius:inherit;background:var(--amaranth)}
@media(max-width:700px){.learn-grid{gap:12px}.learn-tile{min-height:182px;padding:16px;border-radius:22px}.learn-kicker{font-size:.62rem}.learn-tile strong{font-size:1.3rem;margin:6px 0 2px}.learn-tile small{margin-bottom:12px;font-size:.74rem}.learn-pic{right:0;height:auto;width:min(78%,150px);max-width:none}.learn-tile.wide .learn-pic{height:96%;width:auto}.learn-tile.wide{min-height:151px}.tile-pronunciation.wide{min-height:167px}}
@media(max-width:330px){.learn-grid{grid-template-columns:1fr}}
.path-card{margin-top:18px;border-radius:var(--r-lg);padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.path-card h2{margin:0 0 4px;font-size:1.05rem}
.path-card p{margin:0;color:var(--muted);font-size:.82rem}
.path-card .primary,.path-card .secondary{white-space:nowrap}

/* Review -------------------------------------------------------------------- */
.review-summary{display:flex;justify-content:space-between;align-items:center;gap:20px;background:linear-gradient(135deg,#FFE6DF,#F7DDE7);border-radius:var(--r-lg);padding:24px 28px;margin-bottom:18px}
.review-summary>div{display:flex;align-items:center;gap:12px}
.review-summary strong{font-size:2.2rem;color:var(--amaranth);line-height:1}
.review-summary span{font-size:.86rem;font-weight:600}
.review-groups{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.review-groups .right-card{margin:0}
.review-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.review-row:first-child{border-top:0;padding-top:0}
.review-row>div{display:flex;flex-direction:column}
.review-row strong{font-size:.92rem}
.review-row span{color:var(--muted);font-size:.74rem}
.empty-state{border-radius:var(--r-lg);padding:50px 24px;text-align:center}
.empty-state h2{font-size:1.15rem;margin:10px 0 6px}
.empty-state p{color:var(--muted);font-size:.88rem;margin:0 0 20px}
.empty-state .big-icon{display:grid;place-items:center;width:78px;height:78px;margin:0 auto;border-radius:50%;background:var(--mint);color:var(--mint-ink)}
.empty-state .big-icon svg{width:36px;height:36px}
.review-callout{background:#fff7e9;border-color:#eddbbc}

/* Study / flash cards -------------------------------------------------------- */
.back{display:inline-flex;align-items:center;gap:8px;color:var(--muted);padding:0 0 16px;font-size:.84rem;font-weight:600}
.back svg{width:20px;height:20px}
.study{max-width:760px;margin:0 auto}
.study-head{display:flex;justify-content:space-between;gap:12px;align-items:center}
.study-head h1{font-size:1.25rem;margin:0}
.study-head .subtle{font-weight:700;color:var(--amaranth);background:var(--soft);padding:4px 12px;border-radius:20px;font-size:.76rem}
.progress{height:8px;background:#EBDFE5;border-radius:10px;overflow:hidden;margin:14px 0 22px}
.progress>div{height:100%;background:linear-gradient(90deg,var(--pink),var(--amaranth));border-radius:10px;transition:width .3s}
.flash{border-radius:var(--r-xl);padding:36px 28px;text-align:center;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow-md)}
.flash h2{font-size:2.4rem;line-height:1.35;margin:18px 0 8px;overflow-wrap:anywhere}
.flash .translation{font-size:1.2rem;color:var(--amaranth);margin:10px 0;font-weight:600}
.flash p{margin:8px 0}
.word-meta{font-size:.72rem;color:var(--muted);margin-top:14px;font-weight:600}
.example-sentence{font-size:1.05rem;margin-top:18px!important}
.actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:22px}
.options{display:grid;gap:10px;width:100%;margin-top:22px}
.options button{text-align:left;justify-content:flex-start}
.feedback{border-radius:16px;background:var(--mint);color:#256A4C;padding:16px 18px;margin:18px 0 0;font-weight:500}
.feedback.retry{background:var(--peach);color:#8A5220}
.feedback-translation{display:block;margin-top:6px;font-size:.82rem;font-weight:400}
.complete{padding:44px 26px}
.complete h2{font-size:1.6rem}
.complete .big-icon{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--soft);color:var(--amaranth);margin-bottom:12px}
.big-icon svg{width:44px;height:44px}
.teacher-audio{width:min(560px,100%);margin:18px 0 8px}
.teacher-audio-block{width:min(560px,100%);margin:18px auto 8px;text-align:left;background:var(--chalk);border-radius:16px;padding:12px 14px}
.teacher-audio-block>span{display:block;font-size:.72rem;color:var(--muted);font-weight:700}
.teacher-audio-block audio{width:100%;margin-top:6px}
audio{max-width:100%;margin-top:14px}
.audio-pending{background:#F7F1F3;border:1px dashed #D6C4CB;border-radius:12px;padding:12px 16px;color:var(--muted);font-size:.78rem}
.lesson-notes{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-top:22px;text-align:left}
.lesson-notes section{background:var(--chalk);border-radius:16px;padding:16px}
.lesson-notes section:last-child:nth-child(3){grid-column:1/-1}
.lesson-notes h3{font-size:.76rem;color:var(--amaranth);margin:0 0 6px;letter-spacing:.04em}
.lesson-notes p{font-size:.8rem;white-space:pre-line;margin:0;line-height:1.65}
.flash:has(.teacher-audio){justify-content:flex-start}
.lesson-image{width:min(620px,100%);margin:14px auto 10px}
.lesson-image>a{display:block;border-radius:18px;overflow:hidden;background:var(--soft)}
.lesson-image img{display:block;width:100%;height:auto;aspect-ratio:5/3;object-fit:cover}
.lesson-image figcaption{margin-top:6px;color:var(--muted);font-size:.7rem;text-align:right}
.lesson-image figcaption a{color:inherit;text-decoration:underline}

/* Ordering exercise ---------------------------------------------------------- */
.order-exercise{width:100%;border-top:1px solid var(--line);margin-top:18px;padding-top:22px}
.order-exercise .teacher-audio-block{margin-top:12px}
.order-title{font-size:1.15rem!important;margin-bottom:4px!important}
.answer-zone{width:100%;min-height:86px;border:2px dashed #DCC6D0;border-radius:18px;margin:24px 0 14px;padding:14px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;color:var(--muted);background:#FDFAFB;font-size:.86rem}
.answer-zone.has-words{justify-content:flex-start;border-style:solid;border-color:var(--rose);background:#fff}
.word-bank{width:100%;min-height:70px;background:var(--chalk);border-radius:18px;padding:14px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px}
.word-chip{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 16px;font-size:1rem;font-weight:700;box-shadow:0 2px 0 #E4D7DD,var(--shadow-sm);transition:transform .12s}
.word-chip:hover{border-color:var(--amaranth);color:var(--amaranth);transform:translateY(-1px)}
.word-chip.selected{background:var(--amaranth);color:#fff;border-color:var(--amaranth);box-shadow:0 4px 12px rgba(171,36,80,.25)}
.word-chip span{margin-left:7px;opacity:.7}

/* Tests ------------------------------------------------------------------------ */
.test-intro{border-radius:var(--r-lg);padding:32px;display:grid;grid-template-columns:170px 1fr auto;gap:32px;align-items:center}
.test-intro>div{display:flex;flex-direction:column;align-items:center;color:var(--muted);background:var(--soft);border-radius:20px;padding:20px 10px}
.test-number{font-size:3.6rem;color:var(--amaranth);font-weight:800;line-height:1}
.test-intro ul{margin:0;padding-left:22px}
.test-intro li{margin:8px 0;font-size:.9rem}

/* Form fields ---------------------------------------------------------------- */
.field{display:block;text-align:left;margin:18px 0;width:100%;font-weight:600;font-size:.9rem}
.field input,.field select,.field textarea{display:block;padding:13px 14px;border:1px solid #E2D3DA;border-radius:14px;width:100%;margin-top:8px;background:#FDFBFC;color:var(--ink);font-weight:400;transition:border-color .18s,box-shadow .18s}
.field textarea{resize:vertical;line-height:1.65}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--pink);background:#fff;box-shadow:0 0 0 4px rgba(222,131,168,.18);outline:none}
.status{font-size:.75rem;color:var(--muted);margin-top:14px}
.danger{color:#A13A3A}

/* Progress page ---------------------------------------------------------------- */
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.metric{padding:20px;border-radius:20px;font-size:.78rem;color:var(--muted);font-weight:600;display:flex;flex-direction:column;gap:6px}
.metric .iconbox{width:40px;height:40px;border-radius:12px;margin-bottom:4px}
.metric .iconbox svg{width:19px;height:19px}
.metric strong{display:block;color:var(--ink);font-size:1.9rem;line-height:1.2}
.metric strong small{font-size:.72rem;color:var(--muted);font-weight:600}
.progress-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.progress-grid .history{margin-top:18px}
.history{margin-top:18px;border-radius:var(--r-lg);padding:22px 24px}
.history .section-title{margin-top:0}
.history h2{font-size:1.05rem;margin:0 0 12px}
.history-row{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.history-row:last-child{border:0;padding-bottom:0}
.history-row small{color:var(--muted)}
.category-row{display:grid;grid-template-columns:80px 1fr 50px;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:.78rem}
.category-bar{height:8px;border-radius:10px;background:var(--chalk);overflow:hidden}
.category-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--amaranth));border-radius:10px}
.mistakes{margin-top:18px}
.mistake-row{display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.mistake-row>div{display:flex;flex-direction:column}
.mistake-row span{font-size:.72rem;color:var(--muted)}
.category-tag{display:inline-block;text-align:center;background:var(--soft);color:var(--amaranth)!important;border-radius:20px;padding:5px 8px;font-weight:600}
.empty-inline{display:flex;align-items:center;gap:12px;color:var(--muted);padding:14px 0}
.empty-inline svg{color:var(--mint-ink)}
.week{display:flex;justify-content:space-between;margin:22px 0 16px;gap:4px}
.day{text-align:center;font-size:.67rem;color:var(--muted)}
.day b{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#F6F1F3;margin-top:7px;font-size:.64rem}
.day b.done{background:var(--amaranth);color:#fff}
.ring{width:146px;height:146px;margin:0 auto 18px;border-radius:50%;background:conic-gradient(var(--pink) var(--deg),#F5EBEF 0);padding:11px}
.ring-inner{height:100%;border-radius:50%;background:white;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring strong{font-size:1.9rem;line-height:1.3}
.ring span{font-size:.74rem;color:var(--muted)}
.mini-stats{display:flex;justify-content:center;gap:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;font-size:.76rem}
.mini-stats b{color:var(--amaranth);font-size:1rem}

/* Profile ---------------------------------------------------------------------- */
.settings{max-width:740px;margin:auto}
.settings .right-card{padding:26px}
.settings h2{margin-bottom:8px;font-size:1.05rem}
.profile-card{border-radius:var(--r-lg);padding:22px 24px;margin-bottom:18px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px}
.profile-avatar{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#F7DCE7,#EFC3D5);color:var(--amaranth);font-size:1.6rem;font-weight:800;border:3px solid #fff;box-shadow:var(--shadow-md)}
.profile-card h1{font-size:1.25rem;margin:0 0 2px}
.profile-card p{margin:0;color:var(--muted);font-size:.82rem}
.profile-card .level-chip{margin-top:8px;display:inline-block}
.profile-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}
.profile-stats div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 8px;text-align:center;box-shadow:var(--shadow-sm)}
.profile-stats strong{display:block;font-size:1.25rem;line-height:1.2;color:var(--amaranth)}
.profile-stats small{font-size:.68rem;color:var(--muted);font-weight:600}
.settings .right-card .small-link{display:flex;width:100%;justify-content:space-between;align-items:center;margin-top:0;padding:14px 0;border-top:1px solid var(--line);color:var(--ink);font-size:.9rem;font-weight:600}
.settings .right-card .small-link:first-of-type{border-top:0}
.settings .right-card .small-link svg{color:var(--muted)}
.settings .right-card .note+.small-link{border-top:0;padding-top:14px}
.settings .right-card .small-link+.small-link{margin-top:0}
.settings .note{margin-bottom:6px}

/* Pronunciation courses ---------------------------------------------------------- */
.course-grid{display:grid;gap:16px}
.course-card{display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:22px;border-radius:var(--r-lg);padding:24px 26px}
.course-number{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:var(--soft);color:var(--amaranth);font-size:1.6rem;font-weight:800}
.course-card:nth-child(2) .course-number{background:var(--lavender);color:var(--lavender-ink)}
.course-card:nth-child(3) .course-number{background:var(--mint);color:var(--mint-ink)}
.course-copy h2{margin:3px 0 4px;font-size:1.12rem}
.course-copy p{margin:0 0 12px;color:var(--muted);font-size:.82rem}
.course-progress{display:flex;align-items:center;gap:12px}
.course-progress>span{display:block;width:min(360px,100%);height:8px;background:var(--chalk);border-radius:10px;overflow:hidden}
.course-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--amaranth));border-radius:10px}
.course-progress b{white-space:nowrap;color:var(--amaranth);font-size:.72rem}
.course-note{margin-top:22px}
.course-note h2{display:flex;align-items:center;gap:10px;margin-bottom:8px}

/* Diary ---------------------------------------------------------------------- */
.journal-page{max-width:1050px}
.journal-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px;align-items:start}
.journal-form{margin:0}
.journal-form .field{margin-top:12px}
.journal-actions{justify-content:flex-start}
.journal-history{margin:0;position:sticky;top:104px}
.journal-row{display:flex;width:100%;flex-direction:column;text-align:left;padding:12px 12px;border-radius:14px;transition:background .18s}
.journal-row+.journal-row{margin-top:4px}
.journal-row:hover,.journal-row.active{background:var(--soft)}
.journal-row strong{font-size:.78rem;color:var(--amaranth)}
.journal-row span{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.correction-card{margin-top:16px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:#FBFDFF}
.correction-card h3{display:flex;align-items:center;gap:7px;margin:0 0 8px;font-size:.92rem}
.correction-card h3:not(:first-child){margin-top:18px}
.correction-card h3 svg{width:18px;height:18px;color:var(--amaranth)}
.correction-text{margin:0;line-height:1.9;overflow-wrap:anywhere}
.correction-card del{color:#B42318;background:#FDECEA;text-decoration-thickness:1.5px;border-radius:4px;padding:0 2px}
.correction-card ins{color:var(--mint-ink);background:var(--mint);text-decoration:none;font-weight:700;border-radius:4px;padding:0 2px}
.correction-fix{padding:10px 0;border-top:1px solid var(--line)}
.correction-card .spell{color:var(--sky-ink);font-weight:700}
.correction-praise{display:flex;gap:10px;align-items:flex-start;margin-bottom:16px}
.correction-praise img{width:44px;height:44px;border-radius:50%;background:var(--soft);object-fit:cover;flex:none}
.correction-praise p{margin:0;background:#FFF4EF;border-radius:4px 16px 16px 16px;padding:10px 13px;font-size:.9rem;line-height:1.7;font-weight:600;overflow-wrap:anywhere}
.correction-praise small{display:block;font-size:.72rem;color:var(--muted);font-weight:700;margin-bottom:2px}
.correction-card .spell .fix{background:var(--sky);border-radius:3px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.correction-note{margin:8px 0 0;font-size:.78rem;color:var(--muted)}
.correction-fix p{margin:0;font-size:.86rem;line-height:1.7}
.correction-change{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:4px!important;overflow-wrap:anywhere}
.correction-change span{color:var(--muted)}
.correction-good{margin:12px 0 0;padding:10px 12px;border-radius:var(--r-sm);background:var(--mint);color:var(--mint-ink);font-weight:700;font-size:.88rem}
.correction-card details{margin-top:14px;font-size:.84rem}
.correction-card summary{cursor:pointer;color:var(--muted);font-weight:600}
.correction-card details .correction-text{margin-top:8px}
.correction-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-top:6px}
.correction-foot small{color:var(--muted);font-size:.78rem;margin-top:16px}
.correction-pending{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.88rem}
.correction-spinner{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--amaranth);animation:correction-spin .9s linear infinite}
@keyframes correction-spin{to{transform:rotate(360deg)}}
.correction-notice{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;gap:10px;width:min(440px,calc(100% - 32px));padding:10px 10px 10px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-md);font-weight:700;font-size:.88rem}
.correction-notice>span{flex:1;display:flex;align-items:center;gap:8px}
.correction-notice svg{width:18px;height:18px;color:var(--amaranth);flex:none}
.correction-notice.failed>span{color:#B42318}
.correction-notice .text-button{padding:6px 8px;font-size:1.1rem;color:var(--muted)}
@media(min-width:1001px){.correction-notice{bottom:24px}}
.correction-error{border-color:#F4C7C3;background:#FFF6F5}
.correction-error p{margin:0 0 10px;color:#B42318;font-size:.88rem}

.diary-attachment{grid-template-columns:minmax(0,1fr) auto!important;align-items:center;background:var(--soft);padding:12px 14px;border-radius:14px;margin-bottom:14px;overflow-wrap:anywhere}
.diary-attachment strong{font-size:.85rem}
.diary-attachment p{font-size:.8rem;margin:4px 0;color:var(--muted)}
.recommendation-panel,.resource-status{margin-bottom:18px}
.recommendation-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid var(--line)}
.recommendation-row>div{display:flex;flex-direction:column}
.recommendation-row strong{color:var(--amaranth)}
.recommendation-row span{font-size:.72rem;color:var(--muted)}
.resource-status ul{padding-left:20px;font-size:.82rem}
.resource-status li{margin:7px 0}
.answer-advice{margin-top:12px}

/* Dialog & help ------------------------------------------------------------------ */
dialog{border:0;border-radius:var(--r-xl);padding:30px;max-width:570px;width:calc(100% - 32px);color:var(--ink);max-height:85vh;overflow:auto;box-shadow:0 30px 80px rgba(60,20,40,.3)}
dialog::backdrop{background:rgba(48,32,44,.45);backdrop-filter:blur(4px)}
dialog h2{margin-top:0}
.close{float:right;padding:8px;color:var(--muted);border-radius:50%}
.close:hover{background:var(--chalk)}
.help-step{display:flex;gap:15px;margin:20px 0;align-items:flex-start}
.help-step b{display:grid;place-items:center;background:var(--soft);color:var(--amaranth);border-radius:50%;height:34px;min-width:34px;font-weight:700}
.help-step p{margin:0;font-size:.9rem}

/* Requirements page ---------------------------------------------------------------- */
.req{max-width:900px}
.req h2{font-size:1.2rem;margin-top:32px}
.req table{border-collapse:collapse;width:100%;background:white;font-size:.85rem;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
.req th,.req td{padding:14px;border:1px solid var(--line);text-align:left;vertical-align:top}
.req th{background:var(--soft)}
.req ul{padding-left:24px}

/* Legacy dashboard pieces still referenced by older views ---------------------------- */
.dashboard{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:28px}
.hero{position:relative;overflow:hidden;border-radius:var(--r-xl);background:#F2D8E2;padding:30px 32px;color:#55223A;display:flex;justify-content:space-between;gap:20px;align-items:center;min-height:260px}
.hero h2{font-size:1.5rem;line-height:1.5;margin:16px 0 8px}
.hero p{font-size:.88rem;margin:0 0 22px}
.hero-note{display:block;font-size:.7rem;margin-top:12px;color:#765060}
.word-preview{flex:0 0 160px;min-height:190px;transform:rotate(7deg);background:#fff;border-radius:14px;box-shadow:var(--shadow-md);padding:24px 15px;text-align:center}
.word-preview small{font-size:.68rem;color:#8a727e}
.word-preview strong{display:block;font-size:1.45rem;color:var(--amaranth);margin:19px 0 5px}
.word-preview span{font-size:.88rem}
.preview-line{height:1px;background:var(--line);margin:16px 0}
.level-stack{position:relative;width:180px;height:190px;flex-shrink:0}
.level-stack span{position:absolute;right:calc(var(--i)*5px);top:calc(var(--i)*30px);width:135px;background:#fff;border:1px solid #ebcad7;box-shadow:var(--shadow-md);border-radius:12px;padding:13px 15px;color:var(--amaranth);font-weight:700;font-size:.82rem}
.tip{background:#F5EDF1;border:0}
.tip h2{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.next-step{border:1px solid #e9c5d3;border-radius:20px;padding:26px;background:#f8eaf0}
.next-step h2{font-size:1.4rem;line-height:1.5;margin:8px 0 10px}
.next-step p{margin:0 0 18px;font-size:.92rem;color:var(--muted);max-width:600px}

/* Stat chips (home & diary) ---------------------------------------------------- */
.stat-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 22px}
.stat-chip{display:flex;align-items:center;gap:12px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 14px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s}
.stat-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat-chip>span:last-child{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.stat-chip strong{font-size:1.02rem;letter-spacing:-.01em}
.stat-chip small{font-size:.7rem;color:var(--muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;flex-shrink:0}
.chip-icon svg{width:22px;height:22px}
.chip-flame{background:linear-gradient(160deg,#FFF1E3,#FFE0C7);color:#F0722E}
.chip-flame svg{fill:#F98B3A;stroke:#E8641F;stroke-width:1.2}
.chip-crown{background:linear-gradient(160deg,#FFF6DC,#FFEBB5);color:#D9A21B}
.chip-crown svg{fill:#F5C542;stroke:#D9A21B;stroke-width:1.2}
.chip-bars{background:linear-gradient(160deg,#E9EEFB,#DCE5FA);display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:9px 0}
.chip-bars i{display:block;width:5px;border-radius:3px;background:#4C7BE0}
.chip-bars i:nth-child(1){height:10px;opacity:.75}
.chip-bars i:nth-child(2){height:20px}
.chip-bars i:nth-child(3){height:15px;opacity:.85}

/* Diary hero, prompt card and form details ---------------------------------------- */
.diary-hero{margin-bottom:18px}
.diary-hero .script{font-family:'Caveat','DM Sans',cursive;font-size:1.45rem;color:var(--muted);margin:0 0 2px;line-height:1.2;font-weight:600}
.diary-hero h1{font-size:1.7rem;margin:0 0 8px;line-height:1.3}
.diary-hero mark{background:linear-gradient(transparent 62%,var(--rose) 62%,var(--rose) 92%,transparent 92%);color:inherit;padding:0 2px;border-radius:2px}
.diary-hero p:last-child{margin:0;color:var(--muted);font-size:.9rem}
.prompt-card{background:linear-gradient(135deg,#FFF3DB,#FFF0BF);border:1px solid #EED9A6;border-radius:18px;padding:14px 16px;margin-bottom:6px}
.prompt-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.prompt-head strong{font-size:.98rem;flex:1}
.prompt-bulb{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#fff;color:#E7A722;box-shadow:var(--shadow-sm)}
.prompt-bulb svg{width:19px;height:19px;fill:#FFE9A8;stroke:#D9A21B;stroke-width:1.4}
.prompt-shuffle{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:30px;padding:7px 12px;font-size:.74rem;font-weight:700;color:var(--ink);box-shadow:var(--shadow-sm);white-space:nowrap}
.prompt-shuffle svg{width:15px;height:15px;color:var(--amaranth)}
.prompt-shuffle:hover{background:var(--soft)}
.prompt-body p{margin:0;font-weight:700;font-size:1rem;line-height:1.6}
.prompt-body small{display:block;color:var(--muted);font-size:.76rem;margin-top:2px}
.field-label{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem}
.field-label svg{width:18px;height:18px;color:var(--amaranth)}
.field-a{display:grid;place-items:center;width:18px;height:18px;border:1.8px solid var(--amaranth);border-radius:4px;color:var(--amaranth);font-size:.62rem;font-weight:800;font-family:'DM Sans',sans-serif}
.counter{display:block;text-align:right;font-size:.7rem;color:var(--muted);font-weight:500;margin-top:4px}
.ai-button{background:linear-gradient(135deg,#D74A1B,var(--amaranth) 55%,#A83110);gap:10px}
.ai-button:hover{background:linear-gradient(135deg,#BE3E15,var(--amaranth-dark) 55%,#842609)}
.ai-button svg:first-child{width:19px;height:19px;fill:#fff;stroke:#fff;stroke-width:1.2}
.journal-actions .secondary svg{color:var(--amaranth)}
.journal-side{position:sticky;top:104px;display:flex;flex-direction:column;gap:14px}
.journal-history{position:static}
.journal-history .section-title{margin:0 0 8px}
.journal-history .section-title h2{margin:0}
.journal-empty{text-align:center;background:linear-gradient(160deg,#FFF3DB,#FFF0BF);border-radius:16px;padding:22px 16px;margin:4px 0 8px}
.journal-empty-icon{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 10px;border-radius:50%;background:#fff;color:var(--amaranth);box-shadow:var(--shadow-sm)}
.journal-empty-icon svg{width:30px;height:30px}
.journal-empty strong{display:block;font-size:.98rem;margin-bottom:6px}
.journal-empty p{margin:0;font-size:.78rem;color:var(--muted);line-height:1.7}
.quote-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px 20px 44px;box-shadow:var(--shadow-sm)}
.quote-card>span{position:absolute;left:16px;top:8px;font-family:'Caveat',cursive;font-size:2.2rem;color:var(--pink);line-height:1}
.quote-card p{margin:0;font-family:'Caveat','DM Sans',cursive;font-size:1.35rem;line-height:1.35;color:var(--ink);font-weight:500}
.quote-card p::after{content:' ♡';color:var(--pink)}

/* Responsive --------------------------------------------------------------------------- */
@media(min-width:1500px){.content{padding-top:40px}}
@media(max-width:1200px){
 .sidebar{width:228px;padding-left:14px;padding-right:14px}
 .main{margin-left:228px}
 .content{padding:26px 30px 50px}
 .topbar{padding:12px 30px}
 .dashboard{grid-template-columns:minmax(0,1fr) 250px;gap:20px}
 .hero{padding:26px}
}
@media(max-width:1000px){
 .dashboard{grid-template-columns:1fr}
 .rail{display:grid;grid-template-columns:1fr 1fr;gap:18px}
 .date{display:none}
 .test-intro{grid-template-columns:120px 1fr}
 .test-intro .primary{grid-column:1/-1}
 .review-groups{grid-template-columns:1fr}
 .journal-grid{grid-template-columns:1fr}
 .journal-side{position:static}
 .hero-art{width:120px;height:120px}
 .hero-art svg{width:50px;height:50px}
}
@media(max-width:700px){
 :root{--r-xl:22px;--r-lg:20px}
 .sidebar{position:fixed;inset:auto 0 0;width:100%;height:auto;padding:8px 10px max(10px,env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(74,32,48,.08);overflow-y:visible}
 .sidebar .brand,.side-bottom{display:none}
 .nav{flex-direction:row;gap:2px;justify-content:space-around}
 .nav button{flex:1;min-width:0;flex-direction:column;gap:4px;font-size:.64rem;padding:6px 1px 4px;border-radius:12px;min-height:58px;color:var(--muted)}
 .nav button span{white-space:nowrap}
 .nav button svg{width:22px;height:22px;padding:3px 7px;box-sizing:content-box;border-radius:10px;transition:background .18s}
 .nav button.active{background:transparent}
 .nav button.active svg{background:var(--soft)}
 .nav-badge{margin-left:2px;min-width:18px;height:18px;font-size:.62rem}
 .main{margin:0;padding-bottom:96px}
 .topbar{min-height:66px;padding:10px 16px}
 .breadcrumb{display:none}
 .mobile-brand{display:inline-flex}
 .tools{gap:8px}
 .home-button{padding:0 11px;font-size:.74rem;min-height:38px}
 .home-button span{display:none}
 .home-button svg{width:20px;height:20px}
 .level-chip{display:none}
 .text-size{padding:6px 11px;min-height:38px;width:38px;justify-content:center}
 .text-size span{display:none}
 .avatar{display:grid;width:38px;height:38px}
 .content{padding:20px 16px 40px}
 .heading{margin-bottom:18px}
 .heading h1{font-size:1.32rem}
 .heading p{font-size:.84rem}
 .greeting h1{font-size:1.35rem}
 .hero-card{grid-template-columns:1fr;padding:22px 20px;gap:0}
 .hero-art{display:none}
 .hero-card h2{font-size:1.25rem}
 .hero-card p{font-size:.82rem}
 .hero-cta{width:100%}
 .stat-row{gap:8px}
 .stat-chips{gap:8px}
 .stat-chip{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
 .stat-chip strong{font-size:.92rem}
 .stat-chip small{font-size:.66rem;white-space:normal}
 .chip-icon{width:34px;height:34px;border-radius:11px}
 .chip-icon svg{width:19px;height:19px}
 .diary-hero h1{font-size:1.45rem}
 .diary-hero .script{font-size:1.3rem}
 .prompt-head{flex-wrap:wrap}
 .prompt-head strong{flex:1 1 auto}
 .journal-side{position:static}
 .stat-tile{flex-direction:column;align-items:flex-start;gap:8px;padding:14px 12px}
 .stat-tile strong{font-size:1.05rem}
 .quick-grid{gap:8px}
 .quick-tile{padding:14px 6px 12px}
 .quick-tile .iconbox{width:46px;height:46px}
 .quick-tile strong{font-size:.74rem}
 .quick-tile small{display:none}
 .lessons{gap:12px}
 .lesson{padding:16px;min-height:200px}
 .lesson h3{font-size:.98rem}
 .lesson p{font-size:.76rem}
 .lesson-top small{font-size:.64rem}
 .iconbox{width:42px;height:42px;border-radius:13px}
 .iconbox svg{width:21px;height:21px}
 .lesson-footer{font-size:.72rem}
 .rail{grid-template-columns:1fr;margin-top:4px}
 .right-card{margin-bottom:0;padding:20px}
 .section-title span{font-size:.7rem}
 .section-title h2{font-size:1rem}
 .footer{flex-direction:row;gap:16px}
 .metric-grid{gap:8px}
 .metric{padding:14px 10px;font-size:.68rem}
 .metric strong{font-size:1.4rem}
 .metric .iconbox{width:34px;height:34px}
 .flash{padding:28px 18px;box-shadow:var(--shadow-sm)}
 .flash h2{font-size:1.9rem}
 .req table{font-size:.75rem}
 .req th,.req td{padding:9px}
 .history-row{font-size:.82rem}
 .history{padding:18px}
 .review-summary{align-items:flex-start;flex-direction:column;padding:20px}
 .review-summary .primary{width:100%}
 .test-intro{grid-template-columns:1fr;padding:22px;gap:16px}
 .test-intro ul{padding-left:22px;margin:0}
 .path-card{align-items:flex-start;flex-direction:column;padding:20px}
 .path-card .primary,.path-card .secondary{width:100%}
 .progress-grid{grid-template-columns:1fr}
 .mistake-row{grid-template-columns:1fr auto}
 .mistake-row .category-tag{grid-column:1/-1;width:max-content}
 .word-chip{padding:9px 12px}
 .level-stack{display:none}
 .menu-cards{grid-template-columns:1fr}
 .menu-card{min-height:0;padding:18px}
 .course-card{grid-template-columns:54px 1fr;padding:20px;gap:14px}
 .course-number{width:50px;height:50px;border-radius:15px;font-size:1.3rem}
 .course-card .primary{grid-column:1/-1;width:100%}
 .lesson-notes{grid-template-columns:1fr}
 .lesson-notes section:last-child:nth-child(3){grid-column:auto}
 .lesson-image{margin-top:12px}
 .flash:has(.word-meta){padding-bottom:18px}
 .flash:has(.word-meta) .lesson-image{margin-bottom:5px}
 .flash:has(.word-meta) .word-meta{margin-top:8px}
 .flash:has(.word-meta) h2{margin-bottom:0}
 .flash:has(.word-meta)+.actions{margin-top:12px}
 .journal-actions{align-items:stretch;flex-direction:column}
 .journal-actions .primary,.journal-actions .secondary{width:100%}
 .order-exercise{padding-top:20px}
 .profile-card{grid-template-columns:auto minmax(0,1fr);padding:20px}
 .profile-card .secondary{grid-column:1/-1;width:100%}
 .profile-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 .profile-stats div{padding:12px 4px;border-radius:14px}
 .profile-stats strong{font-size:1.05rem}
 .profile-stats small{font-size:.6rem}
 .word-preview{flex-basis:102px;padding:17px 9px;min-height:160px}
 .hero{padding:23px;min-height:240px;gap:8px}
 .hero h2{font-size:1.3rem}
}
@media(max-width:370px){
 .word-preview{display:none}
 .lessons{grid-template-columns:1fr}
 .quick-grid{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
html.large .dashboard{grid-template-columns:1fr}
html.large .word-preview{display:none}
html.large .lessons{grid-template-columns:1fr}
html.large .nav button{font-size:.66rem}
html.large .quick-grid{grid-template-columns:repeat(2,1fr)}
html.large .stat-row{grid-template-columns:1fr}
html.large .stat-chips{grid-template-columns:1fr}
html.large .stat-chip{flex-direction:row;align-items:center}
html.large .stat-tile{flex-direction:row;align-items:center}

/* Reference palette and quiet decorative quotes. */
:root{--orange:#F65323;--rose:#FFC1CF;--yellow:#FFDA69;--sky:#94CFF5;--cream:#FFF9F1;--shadow-brand:0 7px 18px #c63f161f}
.sidebar{background:#fffdfb}.avatar{background:var(--rose);color:var(--ink)}.logo-flower{background:var(--orange)}.nav button.active{background:#FFE2E2}.hero-card{background:#FFF9F1;color:var(--ink);box-shadow:var(--shadow-sm);border:1px solid #fff}.hero-card h2,.hero-card p{color:var(--ink)}.hero-tag{background:var(--soft);color:var(--amaranth)}.hero-cta{background:var(--amaranth);color:#fff}.hero-art{color:var(--amaranth);background:var(--rose)}.hero-progress,.hero-progress b{color:var(--muted)}.hero-bar{background:#D6E4ED}.hero-bar i{background:var(--orange)}
.handwritten{font-family:'Caveat',cursive;font-size:1.8rem;font-weight:600;line-height:1.08;color:var(--amaranth);letter-spacing:0}.side-quote{display:block;margin:20px 12px 12px;transform:rotate(-7deg);max-width:170px}.page-quote{display:block;margin:20px 0 0;text-align:right;font-size:1.6rem}
.illustrated-lessons .lesson{border:0;position:relative;overflow:hidden}.illustrated-lessons .lesson-phrases{background:var(--rose)}.illustrated-lessons .lesson-pronunciation{background:var(--yellow)}.illustrated-lessons .lesson p,.illustrated-lessons .lesson-footer{color:var(--ink)}.illustrated-lessons .lesson h3{font-size:1.4rem}
.heading p,.diary-hero p:last-child{font-size:1rem}.lesson-notes p{font-size:.95rem}.side-note,.help,.lesson small,.lesson-footer,.pill,.teacher-audio-block>span,.word-meta,.stat-chip small,.prompt-body small,.field-label{font-size:.84rem}.quote-card p{color:var(--amaranth)}
@media(max-width:700px){.nav button{font-size:.84rem}.nav button.active{background:#FFE2E2}.side-quote{display:none}.home-button span{display:inline}.mobile-brand{font-size:.9rem;gap:5px}.tools{gap:5px}.mobile-brand .logo-flower{width:30px;height:32px}.home-button{padding:0 8px;min-height:42px}.text-size,.avatar{width:34px;min-width:34px}.topbar{gap:7px;padding:10px 12px;flex-wrap:wrap}.hero-card p{font-size:1rem}.page-quote{font-size:1.5rem}.stat-chip small{font-size:.84rem}}
html.large .topbar{flex-wrap:wrap}html.large .nav button{font-size:.84rem}
/* 講義動画：検索欄・タグ・一覧のカード（左に色つきのサムネイル）・再生用のダイアログ */
.lecture-tools{display:grid;gap:12px;margin-bottom:18px}
.lecture-search{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 18px;border-radius:999px;background:#fff;border:2px solid #FFD2C2;box-shadow:var(--shadow-sm);transition:border-color .15s}
.lecture-search:focus-within{border-color:#F65323}
.lecture-search svg{flex:none;width:20px;height:20px;fill:none;stroke:#F65323;stroke-width:2.4;stroke-linecap:round}
.lecture-search input{flex:1;min-width:0;padding:12px 0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:max(16px,1rem)}
.lecture-tags{display:flex;flex-wrap:wrap;gap:8px}
.lecture-tag{padding:7px 15px;border-radius:999px;background:#fff;border:1.5px solid #FFD2C2;color:#B23A12;font-size:.86rem;font-weight:700;transition:transform .15s}
.lecture-tag:hover{transform:translateY(-1px)}
.lecture-tag.is-on{background:linear-gradient(135deg,#FF8A4C,#F65323 55%,#E2457A);border-color:transparent;color:#fff;box-shadow:0 4px 12px #f6532333}
.lecture-sample-note{margin:0 0 12px;padding:10px 14px;border-radius:14px;background:#FFF6D9;color:#6B4F00;font-size:.84rem}
.lecture-list{display:grid;gap:12px}
.lecture-count{margin:0;color:var(--muted);font-size:.84rem;font-weight:700}
.lecture-empty{margin:0;padding:28px 20px;border:2px dashed #FFD2C2;border-radius:22px;background:#fff;color:var(--muted);text-align:center}
.lecture-empty p{margin:0 0 12px}
.lecture-card{display:grid;grid-template-columns:136px minmax(0,1fr);gap:14px;align-items:center;padding:12px;border-radius:22px;background:#fff;box-shadow:var(--shadow-sm);color:var(--ink);text-align:left;transition:transform .18s,box-shadow .18s}
.lecture-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.lecture-thumb{position:relative;display:grid;place-items:center;aspect-ratio:16/10;border-radius:16px;background-color:var(--thumb);background-image:radial-gradient(circle at 18% 22%,#ffffff59 0 14%,transparent 15%),radial-gradient(circle at 88% 86%,#ffffff40 0 20%,transparent 21%),linear-gradient(135deg,#ffffff38,transparent 65%)}
.lecture-play{position:relative;width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 4px 12px #14172f29}
.lecture-play::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-38%,-50%);border-left:15px solid var(--thumb);border-top:10px solid transparent;border-bottom:10px solid transparent}
.lecture-thumb small{position:absolute;right:7px;bottom:7px;padding:2px 8px;border-radius:999px;background:#14172fcc;color:#fff;font-size:.7rem;font-weight:700}
.lecture-copy{display:flex;flex-direction:column;min-width:0}
.lecture-copy strong{font-size:1.05rem;line-height:1.4}
.lecture-desc{margin-top:4px;color:var(--muted);font-size:.84rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lecture-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lecture-card-tags b{padding:2px 9px;border-radius:999px;background:#FFF0E8;color:#B23A12;font-size:.74rem;font-weight:700}
dialog.lecture-modal{max-width:880px;padding:0;background:#fff}
.lecture-modal .close{position:absolute;top:10px;right:10px;z-index:2;display:grid;place-items:center;width:38px;height:38px;padding:0;float:none;background:#ffffffe6;color:var(--ink);box-shadow:0 2px 8px #14172f33}
.lecture-frame{position:relative;display:grid;place-items:center;aspect-ratio:16/9;background:#14172F;color:#fff}
.lecture-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lecture-frame p{margin:0;padding:0 24px;font-size:.92rem;text-align:center;opacity:.9}
.lecture-info{padding:18px 22px 24px}
.lecture-info h2{margin:0;font-size:1.2rem;line-height:1.45}
.lecture-info p{margin:12px 0 0;color:var(--muted);line-height:1.75;white-space:pre-line}
@media(min-width:960px){.lecture-list{grid-template-columns:repeat(2,minmax(0,1fr))}.lecture-count,.lecture-empty{grid-column:1/-1}}
@media(max-width:700px){.lecture-tools{gap:10px;margin-bottom:14px}.lecture-search{min-height:48px;padding:0 14px}.lecture-tag{padding:6px 13px;font-size:.8rem}.lecture-card{grid-template-columns:112px minmax(0,1fr);gap:12px;padding:10px;border-radius:20px}.lecture-play{width:38px;height:38px}.lecture-play::after{border-left-width:12px;border-top-width:8px;border-bottom-width:8px}.lecture-copy strong{font-size:.95rem}.lecture-desc{font-size:.78rem}.lecture-card-tags b{font-size:.7rem}dialog.lecture-modal{width:calc(100% - 20px)}.lecture-info{padding:14px 16px 20px}.lecture-info h2{font-size:1.05rem}.lecture-info p{font-size:.88rem}}

/* 画面には出さず、読み上げだけに使う */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* 読み込み中のスケルトン：中身の形だけの灰色の枠が、ゆっくり光る */
.sk{display:block;border-radius:8px;background:linear-gradient(100deg,#E6EDF5 20%,#F5F8FC 45%,#E6EDF5 70%);background-size:250% 100%;animation:sk-shine 1.5s ease-in-out infinite}
.sk-line{height:12px;margin:9px 0;width:80%}
.sk-line.w30{width:30%}.sk-line.w40{width:40%}.sk-line.w55{width:55%}.sk-line.w70{width:70%}.sk-line.w75{width:75%}.sk-line.w80{width:80%}.sk-line.w90{width:90%}
.sk-title{height:20px;width:60%;margin:6px 0 12px;border-radius:9px}
.sk-circle{flex:none;width:30px;height:30px;border-radius:50%}
.skeleton{padding:4px 0}
.sk-row{display:flex;align-items:center;gap:10px;margin:12px 0}
.sk-row .sk-line{flex:1;margin:0}
.sk-chips .sk-row{gap:6px}
.sk-cards{display:grid;gap:12px}
.sk-card{display:grid;grid-template-columns:136px minmax(0,1fr);gap:14px;align-items:center;padding:12px;border-radius:22px;background:#fff;box-shadow:var(--shadow-sm)}
.sk-thumb{aspect-ratio:16/10;border-radius:16px}
@keyframes sk-shine{0%{background-position:100% 0}100%{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.sk{animation:none}}
/* ログイン確認中の画面（ホームの形） */
.app-skeleton{min-height:100vh;min-height:100dvh;background:var(--chalk)}
.sk-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.sk-logo{width:150px;height:32px;border-radius:12px}
.sk-avatar{width:40px;height:40px;border-radius:50%}
.sk-page{max-width:1000px;margin:0 auto;padding:24px 16px}
.sk-heading{height:34px;width:78%;margin:12px 0 10px;border-radius:12px}
.sk-panel{margin-top:16px;padding:20px;border:1px solid var(--line);border-radius:22px;background:#fff}
.sk-garden{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center}
.sk-plant{width:96px;height:120px;border-radius:20px}
.sk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:700px){.sk-card{grid-template-columns:104px minmax(0,1fr)}}

/* 改行：日本語は文節の切れ目（phrases.js が入れる <wbr>）でだけ改行する。見出し・短い文・ボタンは各行の長さをそろえて、
   「2行目だけ短い」をなくす。入力欄の中は、ふつうの折り返しのまま。 */
body{word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
textarea,input{word-break:normal;overflow-wrap:break-word;text-wrap:wrap}
/* 見出しの横の小さな説明（「直近14日」など）は折り返さず、入りきらない時は見出しの下へ回す */
.section-title{flex-wrap:wrap;column-gap:10px;row-gap:2px}
.section-title span{white-space:nowrap}
@media(max-width:340px){.lecture-card .lecture-copy strong{font-size:.82rem}}