:root{
  --ink:#27312c;
  --muted:#78827d;
  --line:rgba(67,84,75,.14);
  --page:#e9efeb;
  --surface:#f7faf7;
  --glass:rgba(255,255,255,.66);
  --glass-strong:rgba(255,255,255,.82);
  --sage:#7f9b8a;
  --sage-dark:#526d5e;
  --mint-dark:#688274;
  --coral:#d98d72;
  --blue:#91acb4;
  --lavender:#9b96ad;
  --shadow:0 16px 38px rgba(50,72,60,.13);
  --hand:"HanziPen SC","Kaiti SC","STKaiti","KaiTi",cursive;
}

*{box-sizing:border-box}
html{background:var(--page)}
body{margin:0;color:var(--ink);background-color:var(--page);background-image:linear-gradient(rgba(255,255,255,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px);background-size:32px 32px;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:0}
button,input,select{font:inherit}
button{cursor:pointer}
.app-shell{position:relative;width:min(100%,480px);min-height:100vh;margin:auto;overflow:hidden;background:rgba(247,250,247,.9);box-shadow:0 30px 90px rgba(45,63,53,.18),inset 0 0 0 1px rgba(255,255,255,.62)}
main{padding:0 18px 116px}
.view{display:none;min-height:100vh;padding-top:23px}
.view.active{display:block}

.topbar,.section-head,.dialog-head,.chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.topbar{align-items:flex-start;margin-bottom:17px}
.topbar h1,.page-title h1{margin:3px 0 0;font-family:var(--hand);font-size:29px;font-weight:700;line-height:1.2}
.eyebrow,.panel-label{margin:0;color:var(--muted);font-family:"Courier New",monospace;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.icon-button{position:relative;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.76);border-radius:50%;color:var(--ink);background:rgba(255,255,255,.62);box-shadow:inset 0 1px 1px rgba(255,255,255,.9),0 8px 18px rgba(52,72,61,.1);backdrop-filter:blur(16px);font-size:21px}
.notice-dot{position:absolute;right:7px;top:7px;width:8px;height:8px;border:2px solid white;border-radius:50%;background:var(--coral)}

.companion-band{position:relative;height:430px;margin:0 -18px;overflow:hidden;background:#e8efe9}
.companion-band:before{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(to bottom,rgba(23,35,29,.05),transparent 40%,rgba(26,39,32,.34))}
.companion-band:after{content:"07 / 25  ·  04:54";position:absolute;z-index:4;right:17px;top:17px;color:white;font:10px "Courier New",monospace;text-shadow:0 1px 5px rgba(20,35,27,.35)}
.companion-band img{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;filter:saturate(.84) contrast(.98) brightness(1.05)}
.companion-copy{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;align-items:flex-start;padding:18px 17px 26px}
.status-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid rgba(255,255,255,.7);border-radius:999px;color:#40564a;background:rgba(255,255,255,.68);box-shadow:inset 0 1px 1px rgba(255,255,255,.9),0 8px 20px rgba(43,63,52,.12);backdrop-filter:blur(18px);font:700 9px "Courier New",monospace}
.status-pill i{width:7px;height:7px;border-radius:50%;background:var(--coral)}
.speech{max-width:82%;margin:auto 0 19px;padding:13px 15px;border:1px solid rgba(255,255,255,.72);border-radius:8px;color:#31443a;background:rgba(255,255,255,.72);box-shadow:inset 0 1px 1px rgba(255,255,255,.96),inset 0 -8px 18px rgba(82,109,94,.08),0 15px 32px rgba(37,58,47,.16);backdrop-filter:blur(22px) saturate(1.12);font-family:var(--hand);font-size:19px;font-weight:700;line-height:1.55}
.level-row{display:flex;justify-content:space-between;width:100%;color:white;font-size:10px;text-shadow:0 1px 5px rgba(18,34,25,.45)}
.level-track{width:100%;height:3px;margin-top:7px;overflow:hidden;border-radius:3px;background:rgba(255,255,255,.38)}
.level-track span{display:block;width:72%;height:100%;background:white}

.progress-panel{position:relative;z-index:5;display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:13px;margin:-29px 9px 25px;padding:16px;border:1px solid rgba(255,255,255,.82);border-radius:8px;background:var(--glass-strong);box-shadow:inset 0 2px 1px rgba(255,255,255,.96),inset 0 -10px 22px rgba(82,109,94,.08),0 18px 38px rgba(48,70,58,.16);backdrop-filter:blur(24px) saturate(1.12)}
.progress-ring{position:relative;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:conic-gradient(var(--sage) 50%,#e5ebe7 0);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 7px 16px rgba(82,109,94,.15)}
.progress-ring:after{content:"";position:absolute;inset:7px;border-radius:50%;background:rgba(255,255,255,.92)}
.progress-ring span{position:relative;z-index:1;font-size:13px;font-weight:700}
.progress-panel h2{margin:2px 0;font-size:16px}
.progress-panel p:not(.panel-label){margin:0;color:var(--muted);font-size:11px}
.text-button,.filter-button,.quiet-action{border:0;color:var(--sage-dark);background:none;font-weight:700}

.section-head{margin:27px 1px 12px}
.section-head h2,.subject-stats h2{margin:2px 0 0;font-family:var(--hand);font-size:21px}
.time-chip,.mood-current{padding:7px 10px;border:1px solid rgba(255,255,255,.75);border-radius:999px;color:var(--sage-dark);background:rgba(255,255,255,.58);box-shadow:inset 0 1px 1px rgba(255,255,255,.92),0 5px 12px rgba(51,72,61,.08);backdrop-filter:blur(14px);font-size:10px;font-weight:700}

.next-task,.task-item,.week-strip,.class-block,.exam-card,.chart-panel,.subject-stats,.profile-card,.mood-card,.setting-list,.companion-note{border:1px solid rgba(255,255,255,.8);border-radius:8px;background:var(--glass);box-shadow:inset 0 2px 1px rgba(255,255,255,.88),inset 0 -8px 18px rgba(82,109,94,.06),0 12px 28px rgba(48,70,58,.11);backdrop-filter:blur(21px) saturate(1.12)}
.next-task,.task-item{display:flex;align-items:center;gap:12px;padding:14px}
.next-task{background:rgba(255,255,255,.73);transition:transform .18s,box-shadow .18s}
.next-task:hover,.task-item:hover{transform:translateY(-2px);box-shadow:inset 0 2px 1px rgba(255,255,255,.92),inset 0 -8px 18px rgba(82,109,94,.07),0 17px 34px rgba(48,70,58,.15)}
.subject-badge{display:grid;place-items:center;width:40px;height:40px;flex:none;border:1px solid rgba(255,255,255,.75);border-radius:50%;box-shadow:inset 0 1px 1px white,0 5px 11px rgba(50,72,60,.1);font-family:var(--hand);font-weight:700}
.subject-badge.blue{color:#56767d;background:rgba(145,172,180,.22)}
.subject-badge.green{color:#536e5f;background:rgba(127,155,138,.22)}
.subject-badge.coral{color:#8f5d4c;background:rgba(217,141,114,.22)}
.task-copy{min-width:0;flex:1}
.task-copy h3{margin:0;overflow:hidden;font-size:14px;white-space:nowrap;text-overflow:ellipsis}
.task-copy p{margin:4px 0 0;color:var(--muted);font-size:11px}
.start-button,.primary-action{border:1px solid rgba(255,255,255,.45);border-radius:8px;color:white;background:var(--sage-dark);box-shadow:inset 0 1px 1px rgba(255,255,255,.35),inset 0 -5px 11px rgba(27,48,37,.12),0 8px 17px rgba(62,88,73,.18);font-weight:700}
.start-button{padding:9px 14px}
.primary-action{width:100%;height:49px;font-size:15px}
.task-list{display:grid;gap:9px}
.task-item{background:rgba(255,255,255,.57);transition:transform .16s,box-shadow .16s}
.task-item.done{opacity:.54}
.task-item.done h3{text-decoration:line-through}
.check{display:grid;place-items:center;width:24px;height:24px;flex:none;border:1.5px solid rgba(65,86,74,.38);border-radius:50%;color:white;background:rgba(255,255,255,.3);box-shadow:inset 0 1px 2px rgba(255,255,255,.82),0 3px 7px rgba(47,68,56,.09);font-weight:700}
.task-item.done .check{border-color:var(--sage);background:var(--sage)}
.task-menu{border:0;color:var(--muted);background:none;font-size:19px}
.filter-button{padding:6px 9px;border:1px solid rgba(255,255,255,.7);border-radius:999px;background:rgba(255,255,255,.52);box-shadow:inset 0 1px 1px white,0 4px 9px rgba(47,68,56,.07);font-size:10px}

.page-title{padding:3px 2px 22px}
.page-title p:last-child{margin:8px 0 0;color:var(--muted);font-size:13px}
.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:9px;background:rgba(255,255,255,.56)}
.week-day{text-align:center;padding:7px 0;border-radius:6px;color:var(--muted);font-size:10px}
.week-day strong{display:block;margin-top:4px;color:var(--ink);font-size:14px}
.week-day.active{color:white;background:var(--sage-dark);box-shadow:inset 0 1px 1px rgba(255,255,255,.3),0 5px 11px rgba(54,80,65,.15)}
.week-day.active strong{color:white}
.timeline{margin-top:24px}
.timeline article{display:grid;grid-template-columns:50px 1fr;gap:12px;margin-bottom:14px}
.timeline time{padding-top:13px;color:var(--muted);font-size:11px}
.class-block{padding:14px 16px;border-left:4px solid var(--sage);background:rgba(255,255,255,.55)}
.class-block span{font-size:10px;font-weight:700}
.class-block h3{margin:3px 0;font-size:15px}
.class-block p{margin:0;color:var(--muted);font-size:11px}
.blue-block{border-left-color:var(--blue)}
.green-block{border-left-color:var(--sage)}
.coral-block{border-left-color:var(--coral)}
.exam-card{margin-top:25px;padding:20px;background:rgba(255,255,255,.65)}
.exam-card span{color:var(--muted);font-size:11px}
.exam-card strong{display:inline-block;margin:0 5px 0 14px;font-size:34px}
.exam-card small{font-size:13px}
.exam-card p{margin:10px 0 0;color:var(--muted);font-size:12px}

.timer-wrap{text-align:center;padding:16px 0 24px}
.timer-ring{position:relative;display:grid;place-items:center;width:240px;height:240px;margin:8px auto 25px;border:8px solid rgba(255,255,255,.34);border-radius:50%;background:conic-gradient(var(--sage) 0 86%,#e5ebe7 0);box-shadow:inset 0 3px 10px rgba(255,255,255,.78),inset 0 -10px 24px rgba(82,109,94,.1),0 20px 42px rgba(66,91,77,.17)}
.timer-ring:before{content:"";position:absolute;inset:13px;border-radius:50%;background:rgba(247,250,247,.94)}
.timer-ring div{position:relative}
.timer-ring strong{display:block;font-family:"Courier New",monospace;font-size:47px}
.timer-ring span{display:block;margin-top:10px;color:var(--muted);font-size:12px}
.timer-presets{display:flex;justify-content:center;gap:8px;margin-bottom:22px}
.timer-presets button{width:45px;height:34px;border:1px solid rgba(255,255,255,.75);border-radius:999px;color:var(--muted);background:rgba(255,255,255,.48);box-shadow:inset 0 1px 1px white,0 4px 9px rgba(47,68,56,.08)}
.timer-presets button.selected{color:white;background:var(--sage-dark)}
.quiet-action{margin-top:15px}
.companion-note{display:flex;align-items:center;overflow:hidden;padding-right:15px;background:rgba(255,255,255,.55)}
.companion-note img{width:92px;height:88px;object-fit:cover;object-position:50% 8%;filter:saturate(.82)}
.companion-note p{font-family:var(--hand);font-size:14px;font-weight:700;line-height:1.6}

.stat-hero{display:flex;align-items:center;justify-content:space-between;padding:22px;border:1px solid rgba(255,255,255,.82);border-radius:8px;background:rgba(255,255,255,.64);box-shadow:inset 0 2px 1px white,inset 0 -9px 19px rgba(82,109,94,.07),0 14px 30px rgba(48,70,58,.12);backdrop-filter:blur(22px)}
.stat-hero span,.stat-hero p{color:var(--muted);font-size:11px}
.stat-hero strong{display:block;margin:6px 0;font-size:29px}
.stat-hero small{font-size:14px}
.mini-ring{display:grid;place-items:center;width:70px;height:70px;border:7px solid var(--sage);border-left-color:rgba(127,155,138,.22);border-radius:50%;font-size:13px;font-weight:700}
.chart-panel,.subject-stats{margin-top:16px;padding:18px;background:rgba(255,255,255,.55)}
.chart-head h2{font-size:17px}
.chart-head span{color:var(--muted);font-size:11px}
.bar-chart{display:flex;align-items:end;justify-content:space-between;gap:8px;height:145px;padding-top:20px}
.bar-col{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:end;gap:7px;height:100%}
.bar-col i{display:block;width:100%;max-width:25px;border-radius:5px 5px 2px 2px;background:rgba(127,155,138,.34);box-shadow:inset 0 1px 1px rgba(255,255,255,.65)}
.bar-col.active i{background:var(--sage)}
.bar-col span{color:var(--muted);font-size:10px}
.subject-stats>div{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.subject-stats p,.subject-stats strong{margin:0;font-size:13px}
.subject-stats small{display:block;margin-top:3px;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%}
.blue-dot{background:var(--blue)}.green-dot{background:var(--sage)}.coral-dot{background:var(--coral)}

.profile-card{position:relative;display:flex;align-items:center;height:164px;overflow:hidden;background:rgba(255,255,255,.56)}
.profile-card img{width:148px;height:185px;object-fit:cover;object-position:50% 10%;filter:saturate(.82)}
.profile-card span,.profile-card p{color:var(--muted);font-size:11px}
.profile-card h2{margin:3px 0;font-family:var(--hand);font-size:22px}
.mood-section{margin-top:24px}
.mood-section .section-head{margin:0 0 12px}
.mood-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.mood-card{position:relative;min-width:0;overflow:hidden;padding:7px 7px 12px;text-align:left;color:var(--ink);background:rgba(255,255,255,.52);transition:transform .18s,box-shadow .18s}
.mood-card img{display:block;width:100%;aspect-ratio:4/5;border-radius:5px;object-fit:cover;object-position:center 28%;filter:saturate(.78) contrast(.98)}
.mood-card span,.mood-card small{display:block;padding:0 4px}
.mood-card span{margin-top:9px;overflow:hidden;font-family:var(--hand);font-size:14px;font-weight:700;white-space:nowrap;text-overflow:ellipsis}
.mood-card small{margin-top:3px;color:var(--muted);font-size:10px}
.mood-card.selected{transform:translateY(-3px);box-shadow:inset 0 2px 1px white,inset 0 -8px 18px rgba(82,109,94,.08),0 17px 34px rgba(48,70,58,.17),0 0 0 2px var(--sage)}
.mood-card.selected:after{content:"已选择";position:absolute;right:12px;top:12px;padding:5px 7px;border:1px solid rgba(255,255,255,.75);border-radius:999px;color:var(--sage-dark);background:rgba(255,255,255,.78);backdrop-filter:blur(12px);font-size:9px;font-weight:700}
.setting-list{margin-top:22px;overflow:hidden;background:rgba(255,255,255,.5)}
.setting-list button{display:grid;grid-template-columns:34px 1fr auto;align-items:center;width:100%;padding:15px;border:0;border-bottom:1px solid var(--line);color:var(--ink);background:transparent;text-align:left}
.setting-list button:last-child{border-bottom:0}
.setting-list button>span{font-size:20px}.setting-list button div{font-weight:700}.setting-list small{display:block;margin-top:3px;color:var(--muted);font-weight:400}.setting-list b{color:var(--muted);font-size:21px}

.fab{position:fixed;z-index:11;left:calc(50% + min(240px,50vw) - 69px);bottom:92px;width:50px;height:50px;border:1px solid rgba(255,255,255,.48);border-radius:50%;color:white;background:var(--coral);box-shadow:inset 0 1px 1px rgba(255,255,255,.45),inset 0 -5px 12px rgba(95,50,37,.12),0 10px 22px rgba(168,89,64,.25);font-size:28px}
.bottom-nav{position:fixed;z-index:10;left:50%;bottom:8px;display:grid;grid-template-columns:repeat(5,1fr);width:min(calc(100% - 16px),464px);height:70px;padding:8px 12px;border:1px solid rgba(255,255,255,.78);border-radius:8px;background:rgba(255,255,255,.64);box-shadow:inset 0 2px 1px rgba(255,255,255,.94),inset 0 -9px 20px rgba(82,109,94,.08),0 14px 35px rgba(47,68,56,.16);backdrop-filter:blur(26px) saturate(1.15);transform:translateX(-50%)}
.bottom-nav button{border:0;color:var(--muted);background:none;font-size:10px}
.bottom-nav button span{display:block;font-size:20px;line-height:1.4}
.bottom-nav button.active{color:var(--sage-dark);font-weight:700}
.bottom-nav button.active:after{content:"";display:block;width:20px;height:2px;margin:2px auto 0;border-radius:2px;background:var(--sage)}

dialog{width:min(calc(100% - 32px),420px);padding:0;border:1px solid rgba(255,255,255,.82);border-radius:12px;background:rgba(247,250,247,.82);box-shadow:inset 0 2px 1px white,0 30px 80px rgba(35,48,41,.25);backdrop-filter:blur(28px) saturate(1.14)}
dialog::backdrop{background:rgba(39,49,44,.35);backdrop-filter:blur(5px)}
dialog form{padding:22px}
.dialog-head h2{margin:2px 0 18px}.dialog-head .icon-button{margin-bottom:18px}
label{display:block;margin-bottom:15px;font-size:12px;font-weight:700}
input,select{width:100%;height:45px;margin-top:7px;padding:0 12px;border:1px solid rgba(82,104,92,.18);border-radius:8px;color:var(--ink);background:rgba(255,255,255,.58);box-shadow:inset 0 2px 5px rgba(62,82,71,.06)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.toast{position:fixed;z-index:20;left:50%;bottom:92px;padding:10px 16px;border:1px solid rgba(255,255,255,.4);border-radius:8px;color:white;background:rgba(55,75,64,.9);box-shadow:0 8px 20px rgba(37,52,44,.18);opacity:0;pointer-events:none;transform:translate(-50%,20px);transition:.25s;backdrop-filter:blur(16px);font-size:12px}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(min-width:760px){body{padding:24px 0}.app-shell{min-height:calc(100vh - 48px);border-radius:12px}.view{min-height:calc(100vh - 48px)}.bottom-nav{bottom:32px}.fab{bottom:116px}}
@media(max-width:360px){main{padding-left:15px;padding-right:15px}.companion-band{height:400px;margin-left:-15px;margin-right:-15px}.speech{max-width:88%;font-size:17px}.progress-panel{grid-template-columns:55px 1fr;margin-left:5px;margin-right:5px}.progress-panel .text-button{display:none}.mood-grid{gap:8px}.mood-card span{font-size:13px}.form-row{grid-template-columns:1fr}}

/* Seoul Cream: Korean minimal structure with warm studio tone */
:root{--ink:#35322f;--muted:#8b8781;--line:#e8e3dc;--page:#ebe9e5;--surface:#fbfaf7;--sage:#7b8373;--sage-dark:#646c5e;--mint-dark:#737b6d;--coral:#c8947c;--blue:#aab7b5;--lavender:#aaa5b1;--shadow:0 10px 24px rgba(64,57,50,.08)}
html,body{background:#ebe9e5}body{background-image:none;color:var(--ink)}.app-shell{background:#fbfaf7;box-shadow:0 24px 70px rgba(58,52,46,.13);inset:auto}.topbar{margin-bottom:18px}.topbar h1,.page-title h1{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:26px;font-weight:700}.eyebrow,.panel-label{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:0;color:#9a958f}
.companion-band{height:365px;margin:0;border-radius:8px;background:#f0ede8}.companion-band:before{background:linear-gradient(to bottom,transparent 55%,rgba(44,40,36,.22))}.companion-band:after{top:14px;right:14px}.companion-band img{filter:none;object-position:center 28%}.companion-copy{padding:14px 14px 20px}.status-pill{padding:6px 9px;color:#625d57;background:rgba(255,255,255,.7);box-shadow:0 4px 12px rgba(59,52,46,.08)}.status-pill i{background:var(--coral)}.speech{max-width:78%;margin:auto 0 14px;padding:11px 13px;color:#47423e;background:rgba(255,255,255,.76);box-shadow:0 8px 20px rgba(54,48,43,.1);font-size:17px}.level-row,.level-track{display:none}
.progress-panel{margin:-25px 12px 24px;padding:15px;border:1px solid rgba(255,255,255,.88);background:rgba(255,255,255,.78);box-shadow:0 14px 30px rgba(60,54,49,.12);backdrop-filter:blur(20px)}.progress-ring{background:conic-gradient(var(--sage) 50%,#ebe8e2 0);box-shadow:none}.progress-ring:after{background:#fff}.progress-panel h2{font-size:15px}
.section-head{margin-top:26px}.section-head h2,.subject-stats h2{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:18px;font-weight:700}.time-chip,.mood-current,.filter-button{border:0;color:#77736d;background:#f0ede8;box-shadow:none}
.next-task{padding:14px;border:1px solid #e4ded6;background:#fff;box-shadow:0 8px 18px rgba(64,57,50,.07);backdrop-filter:none}.next-task:hover{transform:none;box-shadow:0 8px 18px rgba(64,57,50,.07)}.subject-badge,.subject-badge.blue,.subject-badge.green,.subject-badge.coral{width:38px;height:38px;border:0;color:#625f59;background:#eeece7;box-shadow:none}.start-button,.primary-action{background:var(--sage-dark);box-shadow:0 6px 14px rgba(82,91,77,.14)}
.task-list{gap:0}.task-item{padding:14px 2px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}.task-item:hover{transform:none;box-shadow:none}.task-item:last-child{border-bottom:0}.check{background:#fff;box-shadow:none}.task-item.done .check{background:var(--sage);border-color:var(--sage)}
.week-strip,.chart-panel,.subject-stats,.profile-card,.mood-card,.setting-list,.companion-note{border:1px solid var(--line);background:#fff;box-shadow:0 8px 20px rgba(64,57,50,.06);backdrop-filter:none}.week-strip{box-shadow:none}.week-day.active{background:var(--sage-dark);box-shadow:none}.class-block{border:0;border-left:3px solid var(--sage);background:#f5f3ef;box-shadow:none;backdrop-filter:none}.blue-block{border-left-color:#9baead}.green-block{border-left-color:#7b8373}.coral-block{border-left-color:#c8947c}.exam-card,.stat-hero{border:1px solid var(--line);background:#f1eee8;box-shadow:0 8px 20px rgba(64,57,50,.06);backdrop-filter:none}.exam-card strong,.stat-hero strong{color:#3f3a36}
.timer-ring{border:0;background:conic-gradient(var(--sage) 0 86%,#e9e6df 0);box-shadow:0 14px 30px rgba(79,86,74,.11)}.timer-ring:before{background:#fbfaf7}.timer-presets button{border-color:#e4dfd8;background:#fff;box-shadow:none}.timer-presets button.selected{background:var(--sage-dark)}.companion-note{background:#fff}.companion-note p{font-size:13px}
.stat-hero{padding:20px}.mini-ring{border-color:var(--sage);border-left-color:#ddd9d2}.chart-panel,.subject-stats{background:#fff}.bar-col i{background:#d9ded7}.bar-col.active i{background:var(--sage)}
.profile-card{background:#f2efe9}.profile-card img{filter:none}.profile-card h2{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:20px}.mood-card{padding:6px 6px 11px;border:1px solid var(--line);background:#fff;box-shadow:0 7px 17px rgba(64,57,50,.06);backdrop-filter:none}.mood-card img{filter:none}.mood-card span{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px}.mood-card.selected{transform:translateY(-2px);box-shadow:0 10px 22px rgba(64,57,50,.1),0 0 0 1px var(--sage)}.mood-card.selected:after{color:#666d61;background:rgba(255,255,255,.9)}.setting-list{box-shadow:none}
.bottom-nav{border-color:rgba(255,255,255,.8);background:rgba(255,255,255,.78);box-shadow:0 12px 30px rgba(54,49,44,.13);backdrop-filter:blur(22px)}.bottom-nav button.active{color:var(--sage-dark)}.bottom-nav button.active:after{background:var(--sage)}.fab{background:var(--coral);box-shadow:0 9px 20px rgba(167,105,78,.2)}
dialog{background:rgba(251,250,247,.9)}input,select{background:#fff}.toast{background:rgba(80,77,70,.92)}
@media(max-width:360px){.companion-band{height:345px;margin-left:0;margin-right:0}.speech{font-size:16px}.progress-panel{margin-left:7px;margin-right:7px}}

/* Immersive focus screen */
body.focus-mode{overflow:hidden;background:#f1f2ef}
body.focus-mode .bottom-nav,body.focus-mode .fab{display:none}
.focus-view.active{position:fixed;z-index:30;inset:0;width:min(100%,480px);min-height:100vh;margin:auto;padding:0;background:#f1f2ef;overflow:hidden}
.focus-context{position:absolute;top:28px;left:0;width:100%;margin:0;color:#9a958f;text-align:center;font-size:12px;opacity:0;transform:translateY(-8px);transition:opacity .22s,transform .22s}
.focus-clock{display:grid;place-items:center;width:100%;height:100vh;padding:0;border:0;color:#34312e;background:transparent}
.focus-clock strong{display:flex;align-items:center;justify-content:center;gap:4px;font-family:"Arial Rounded MT Bold","Arial Black",-apple-system,BlinkMacSystemFont,sans-serif;font-size:98px;font-weight:800;line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums}
.timer-digit{display:block;width:92px;height:152px;overflow:visible;filter:drop-shadow(0 2px 0 rgba(255,255,255,.98)) drop-shadow(0 18px 21px rgba(68,76,72,.18))}
.liquid-digit-shape{font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","PingFang SC",sans-serif;font-size:112px;font-weight:900;paint-order:stroke fill;stroke-linejoin:round;stroke-linecap:round}
.liquid-clip-shape{stroke:#000;stroke-width:7}
.ice-digit{fill-opacity:.48;stroke:rgba(91,151,143,.52);stroke-width:7;paint-order:stroke fill}
.ice-refraction{fill:none;stroke:rgba(255,255,255,.6);stroke-width:2.6}
.ice-edge{fill:none;stroke:rgba(255,255,255,.98);stroke-width:4.5}
.ice-facet{fill:none;stroke-linecap:round}
.ice-facet-light{stroke:rgba(255,255,255,.7);stroke-width:3.2}
.ice-facet-cool{stroke:rgba(112,184,174,.34);stroke-width:2.2}
.timer-colon{width:22px;color:rgba(151,149,143,.6);font-size:66px;font-weight:800;text-shadow:0 1px 0 rgba(255,255,255,.95),0 8px 12px rgba(76,65,56,.17)}
.focus-controls{position:absolute;right:18px;bottom:22px;left:18px;padding:18px;border:1px solid rgba(255,255,255,.9);border-radius:8px;background:rgba(242,239,233,.9);box-shadow:0 14px 34px rgba(58,52,46,.12);backdrop-filter:blur(20px);opacity:0;pointer-events:none;transform:translateY(18px);transition:opacity .22s,transform .22s}
.focus-controls>p{margin:0 0 14px;color:#858079;text-align:center;font-size:11px}
.focus-controls .timer-presets{margin:0 0 14px}
.focus-controls .timer-presets button{width:auto;min-width:62px;padding:0 14px;border-color:#e1dcd4;background:#fbfaf7}
.focus-controls .timer-presets button.selected{color:#fff;background:var(--sage-dark)}
.focus-actions{display:grid;grid-template-columns:64px 1fr 64px;align-items:center;gap:10px}
.focus-actions .primary-action{height:44px}
.focus-actions .quiet-action{height:44px;margin:0;padding:0;border:0;color:#77736d;background:transparent;font-size:12px}
.focus-view.controls-visible .focus-context,.focus-view.controls-visible .focus-controls{opacity:1;transform:translateY(0);pointer-events:auto}
@media(max-width:420px){.focus-clock strong{gap:2px}.timer-digit{width:72px;height:122px}.timer-colon{width:18px;font-size:64px}}
@media(max-width:360px){.timer-digit{width:62px;height:108px}.timer-colon{width:16px;font-size:56px}.focus-controls{right:14px;bottom:16px;left:14px}}
@media(prefers-reduced-motion:reduce){.timer-digit animate{display:none}}

/* Simple coffee timer */
body.focus-mode,.focus-view.active{background:#f7f3ed}
.focus-clock{height:auto;padding-top:78px;line-height:1}
.focus-clock strong{display:block;color:#352d28;font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","PingFang SC",sans-serif;font-size:94px;font-weight:650;letter-spacing:0;text-shadow:0 1px 0 rgba(255,255,255,.9);filter:none}
.focus-coffee{width:min(70vw,252px);height:min(37vh,310px);margin:18px auto 0;overflow:hidden;border-radius:8px;background:#2b1710;box-shadow:0 18px 35px rgba(68,45,31,.18)}
.focus-coffee img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 66%}
.focus-controls{background:rgba(255,252,247,.9)}
@media(max-width:420px){.focus-clock{padding-top:62px}.focus-clock strong{font-size:78px}.focus-coffee{width:min(72vw,242px);height:min(36vh,284px);margin-top:15px}}
@media(max-width:360px){.focus-clock{padding-top:54px}.focus-clock strong{font-size:70px}.focus-coffee{height:min(33vh,244px)}}

/* Live coffee glass */
.focus-coffee{position:relative;width:220px;height:268px;margin:10px auto 0;overflow:visible;border-radius:0;background:transparent;box-shadow:none}
.focus-coffee::after{content:"";position:absolute;left:50%;bottom:8px;width:196px;height:24px;border:1px solid rgba(82,66,54,.22);border-radius:50%;background:rgba(157,135,115,.12);box-shadow:inset 0 3px 5px rgba(255,255,255,.7),0 8px 12px rgba(76,55,40,.1);transform:translateX(-50%)}
.focus-coffee img{display:none}
.coffee-glass{position:absolute;z-index:1;left:50%;bottom:20px;width:170px;height:216px;overflow:hidden;border:2px solid rgba(255,255,255,.8);border-bottom-color:rgba(102,86,73,.5);border-radius:13px 13px 28px 28px;background:rgba(255,255,255,.13);box-shadow:inset 10px 0 16px rgba(255,255,255,.28),inset -10px 0 18px rgba(76,62,50,.1),0 15px 23px rgba(67,48,35,.13);transform:translateX(-50%)}
.coffee-glass::before{content:"";position:absolute;z-index:5;top:-3px;left:9px;right:9px;height:11px;border:2px solid rgba(255,255,255,.92);border-radius:50%;box-shadow:0 2px 3px rgba(81,65,53,.12)}
.coffee-glass::after{content:"";position:absolute;z-index:5;top:13px;bottom:16px;left:12px;width:11px;border-radius:50%;background:linear-gradient(90deg,rgba(255,255,255,.7),rgba(255,255,255,0));opacity:.66}
.coffee-fill{position:absolute;z-index:2;right:7px;bottom:5px;left:7px;height:var(--coffee-level,91%);overflow:hidden;border-radius:8px 8px 23px 23px;background:linear-gradient(to bottom,#d8a371 0%,#a8673c 30%,#6f3e29 72%,#40251e 100%);box-shadow:inset 0 8px 16px rgba(255,227,195,.2);transition:height .85s linear}
.coffee-fill::before{content:"";position:absolute;top:-8px;left:-20%;width:140%;height:17px;border-radius:50%;background:radial-gradient(ellipse at center,#f1cda8 0 38%,#b87548 42% 66%,#8d4e31 70%);animation:coffee-surface 3.8s ease-in-out infinite}
.coffee-crema{position:absolute;top:10px;right:12px;left:12px;height:19px;border-radius:50%;background:rgba(250,222,191,.3);filter:blur(2px)}
.coffee-ice{position:absolute;z-index:4;display:block;width:47px;height:47px;border:1px solid rgba(255,255,255,.75);border-radius:7px;background:linear-gradient(135deg,rgba(255,255,255,.74),rgba(199,219,218,.35));box-shadow:inset 4px 4px 7px rgba(255,255,255,.7),0 3px 6px rgba(61,50,42,.12);backdrop-filter:blur(2px)}
.ice-one{top:28px;left:22px;transform:rotate(18deg)}.ice-two{top:25px;right:20px;transform:rotate(-13deg)}.ice-three{top:71px;left:62px;transform:rotate(8deg)}
@keyframes coffee-surface{0%,100%{transform:translateX(-4%) scaleY(.9)}50%{transform:translateX(5%) scaleY(1.08)}}
@media(max-width:420px){.focus-coffee{width:196px;height:238px;margin-top:4px}.coffee-glass{width:154px;height:192px}.focus-coffee::after{width:178px}.coffee-ice{width:42px;height:42px}.ice-three{left:56px;top:64px}}
@media(max-width:360px){.focus-coffee{height:218px}.coffee-glass{width:142px;height:178px}.focus-coffee::after{width:165px}.coffee-ice{width:39px;height:39px}.ice-three{left:51px;top:58px}}

/* Photoreal glass and coffee texture layer */
.focus-coffee::after,.coffee-glass::before,.coffee-glass::after{display:none}
.coffee-glass{border:0;background:transparent;box-shadow:none}
.coffee-ice{display:none}
.coffee-fill{z-index:1;background-color:#7f432b;background-image:linear-gradient(to bottom,rgba(239,185,132,.42),rgba(102,49,29,.56)),url("assets/focus-iced-coffee.png");background-size:100% 100%,300px auto;background-position:center,center 64%;background-blend-mode:soft-light,normal;box-shadow:inset 0 8px 17px rgba(255,226,195,.26)}
.focus-coffee .coffee-real-glass{position:absolute;z-index:3;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center center;pointer-events:none}

/* Low rounded iced coffee */
.focus-coffee{width:248px;height:252px;margin:6px auto 0}
.coffee-glass{bottom:8px;width:230px;height:239px}
.coffee-fill{right:12px;bottom:18px;left:12px;border-radius:24px 24px 50px 50px;background-color:#9a592f;background-image:url("assets/focus-low-coffee-tight.png");background-size:230px auto;background-position:center bottom;background-repeat:no-repeat;background-blend-mode:normal;box-shadow:inset 0 8px 15px rgba(255,239,215,.2);transition:height .85s linear}
.coffee-fill::before{top:-7px;left:-14%;width:128%;height:14px;background:radial-gradient(ellipse at center,rgba(250,215,170,.88) 0 37%,rgba(181,111,62,.82) 49% 71%,rgba(114,61,33,.84) 100%);opacity:.8}
.coffee-crema{display:none}
.focus-coffee .coffee-real-glass{object-fit:fill}
@media(max-width:420px){.focus-coffee{width:224px;height:234px;margin-top:4px}.coffee-glass{width:208px;height:216px;bottom:7px}.coffee-fill{right:11px;bottom:16px;left:11px;background-size:208px auto}}
@media(max-width:360px){.focus-coffee{width:202px;height:214px}.coffee-glass{width:188px;height:196px;bottom:6px}.coffee-fill{right:10px;bottom:15px;left:10px;background-size:188px auto}}

/* Korean webtoon coffee illustration */
.focus-coffee{width:248px;height:240px;margin:8px auto 0}
.coffee-glass{bottom:7px;width:236px;height:228px}
.coffee-fill{right:7px;bottom:13px;left:7px;border-radius:10px 10px 52px 52px;clip-path:polygon(8% 0,92% 0,96% 11%,97% 73%,91% 92%,82% 100%,18% 100%,9% 92%,3% 73%,4% 11%);background-color:#b96f3e;background-image:radial-gradient(circle at 1px 1px,rgba(67,42,28,.32) 1.05px,transparent 1.3px),linear-gradient(120deg,#e9b37b 0%,#c87843 33%,#a65b35 68%,#7d422f 100%);background-size:9px 9px,100% 100%;background-position:0 0,center;background-repeat:repeat,no-repeat;background-blend-mode:multiply,normal;box-shadow:none}
.coffee-fill::before{top:-7px;left:-8%;width:116%;height:16px;box-sizing:border-box;border:2px solid rgba(54,37,28,.72);border-radius:50%;background:linear-gradient(90deg,#efc696,#c57742 45%,#8e4a30);opacity:1;animation:comic-coffee-surface 4.6s ease-in-out infinite}
.coffee-crema{display:none}
.focus-coffee .coffee-real-glass{object-fit:fill;filter:contrast(1.04)}
@keyframes comic-coffee-surface{0%,100%{transform:translateX(-1%) scaleY(.94)}50%{transform:translateX(2%) scaleY(1.04)}}
@media(max-width:420px){.focus-coffee{width:226px;height:222px;margin-top:5px}.coffee-glass{width:214px;height:207px;bottom:6px}.coffee-fill{right:6px;bottom:12px;left:6px}}
@media(max-width:360px){.focus-coffee{width:206px;height:204px}.coffee-glass{width:196px;height:190px;bottom:5px}.coffee-fill{right:5px;bottom:10px;left:5px}}

/* Soft hand-drawn coffee illustration */
.focus-coffee{width:292px;height:204px;margin:14px auto 0}
.coffee-glass{bottom:7px;width:274px;height:184px}
.coffee-fill{right:61px;bottom:12px;left:8px;border-radius:18px 18px 48px 54px;clip-path:polygon(7% 0,95% 0,98% 12%,98% 72%,91% 91%,78% 100%,26% 100%,11% 91%,2% 72%,3% 12%);background-color:#bd835b;background-image:radial-gradient(ellipse at 24% 22%,rgba(255,224,184,.45) 0 9%,transparent 32%),radial-gradient(ellipse at 80% 76%,rgba(98,61,44,.19) 0 10%,transparent 38%),radial-gradient(ellipse at 48% 63%,rgba(248,205,160,.2) 0 12%,transparent 43%),linear-gradient(126deg,#e8bb91 0%,#cc9165 43%,#b47755 70%,#915e49 100%);background-size:100% 100%;background-position:center;background-repeat:no-repeat;background-blend-mode:soft-light,normal,soft-light,normal;box-shadow:none}
.coffee-fill::before{top:-7px;left:-5%;width:110%;height:15px;border:0;border-radius:50%;background:linear-gradient(90deg,#f2cfaa,#d09b70 48%,#a96e53);box-shadow:0 1px 0 rgba(112,74,55,.35);filter:blur(.2px);opacity:.92;animation:handdrawn-coffee-surface 5.2s ease-in-out infinite}
.coffee-crema{display:none}
.focus-coffee .coffee-real-glass{object-fit:fill;filter:saturate(.78) contrast(.96)}
@keyframes handdrawn-coffee-surface{0%,100%{transform:translateX(-.7%) scaleY(.96)}50%{transform:translateX(1.2%) scaleY(1.02)}}
@media(max-width:420px){.focus-coffee{width:262px;height:186px;margin-top:10px}.coffee-glass{width:246px;height:166px;bottom:6px}.coffee-fill{right:55px;bottom:11px;left:7px}}
@media(max-width:360px){.focus-coffee{width:232px;height:168px}.coffee-glass{width:218px;height:147px;bottom:5px}.coffee-fill{right:49px;bottom:10px;left:6px}}

/* Reference-inspired painted coffee */
.focus-coffee{width:234px;height:252px;margin:4px auto 0}
.coffee-glass{bottom:8px;width:210px;height:230px}
.coffee-fill{right:10px;bottom:10px;left:10px;border-radius:14px 14px 34px 34px;clip-path:polygon(7% 0,93% 0,97% 10%,98% 78%,90% 93%,75% 100%,23% 100%,9% 93%,2% 78%,3% 10%);background-color:#b86f3f;background-image:url("assets/focus-painted-coffee-full.png");background-size:210px 230px;background-position:center calc(100% + 10px);background-repeat:no-repeat;background-blend-mode:normal;box-shadow:none}
.coffee-fill::before{top:-6px;left:-6%;width:112%;height:14px;border:0;border-radius:50%;background:linear-gradient(90deg,rgba(245,192,130,.7),rgba(188,105,52,.72) 48%,rgba(116,61,35,.74));box-shadow:0 1px 1px rgba(89,48,31,.25);filter:blur(.3px);opacity:.62;animation:painted-coffee-surface 5.6s ease-in-out infinite}
.coffee-crema{display:none}
.focus-coffee .coffee-real-glass{object-fit:fill;filter:none}
@keyframes painted-coffee-surface{0%,100%{transform:translateX(-.8%) scaleY(.96)}50%{transform:translateX(1%) scaleY(1.02)}}
@media(max-width:420px){.focus-coffee{width:218px;height:236px;margin-top:3px}.coffee-glass{width:196px;height:215px;bottom:7px}.coffee-fill{right:9px;bottom:9px;left:9px;background-size:196px 215px;background-position:center calc(100% + 9px)}}
@media(max-width:360px){.focus-coffee{width:196px;height:212px}.coffee-glass{width:178px;height:196px;bottom:6px}.coffee-fill{right:8px;bottom:8px;left:8px;background-size:178px 196px;background-position:center calc(100% + 8px)}}

/* Keep the timer and illustration on one visual axis. */
.focus-clock{display:flex;align-items:center;justify-content:center}
.focus-clock strong{margin:0 auto;text-align:center}
.focus-coffee{left:50%;margin-right:0;margin-left:0;transform:translateX(-50%)}

/* Vertically center the timer and painted coffee as one composition. */
.focus-view.active{display:flex;flex-direction:column;align-items:center;justify-content:center}
.focus-clock{flex:0 0 auto;height:auto;padding:0}
.focus-coffee{position:relative;left:auto;flex:0 0 auto;margin:14px 0 0;transform:none}

/* Translucent painted-glass type to match the coffee illustration. */
.focus-clock strong{color:rgba(202,144,101,.8);font-family:"Arial Rounded MT Bold","Avenir Next","Helvetica Neue","Apple SD Gothic Neo",sans-serif;font-size:104px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:0;background-image:radial-gradient(ellipse at 24% 20%,rgba(255,255,248,.96) 0 8%,transparent 28%),radial-gradient(ellipse at 72% 78%,rgba(157,91,60,.15) 0 12%,transparent 42%),linear-gradient(145deg,rgba(255,247,231,.9) 0%,rgba(241,203,164,.72) 34%,rgba(199,130,86,.64) 68%,rgba(244,216,185,.56) 100%);background-size:100% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px rgba(140,88,62,.28);text-shadow:0 1px 0 rgba(255,255,248,.94),0 5px 13px rgba(116,69,48,.13)}
@media(max-width:420px){.focus-clock strong{font-size:94px}}
@media(max-width:360px){.focus-clock strong{font-size:84px}}

/* Cafe menu: warm paper, espresso ink, and restrained latte accents. */
:root{
  --ink:#49382d;
  --muted:#8d796c;
  --line:#e9dccd;
  --page:#f2e9dd;
  --surface:#fffdf9;
  --glass:rgba(255,253,249,.9);
  --glass-strong:rgba(255,253,249,.96);
  --sage:#7d8063;
  --sage-dark:#5c4739;
  --mint-dark:#6f7158;
  --coral:#b97d59;
  --blue:#a98569;
  --lavender:#a7907c;
  --shadow:0 13px 28px rgba(93,65,47,.09);
}

html,body{background:#f2e9dd}
body{
  color:var(--ink);
  background-color:#f2e9dd;
  background-image:radial-gradient(circle at 18% 2%,rgba(255,255,255,.74),transparent 31%),radial-gradient(circle at 82% 18%,rgba(226,205,182,.28),transparent 30%);
}
.app-shell{
  background:rgba(255,252,247,.94);
  box-shadow:0 28px 68px rgba(81,55,39,.14),inset 0 0 0 1px rgba(255,255,255,.82);
}
.topbar h1,.page-title h1,.section-head h2,.subject-stats h2{
  color:#443328;
  font-family:"Apple SD Gothic Neo","Noto Sans KR","PingFang SC",sans-serif;
  font-weight:750;
}
.eyebrow,.panel-label{color:#a18a79}
.icon-button{
  border-color:#f3e8dc;
  color:#664b3a;
  background:rgba(255,254,251,.88);
  box-shadow:0 7px 17px rgba(88,61,43,.08);
}
.notice-dot{border-color:#fffdf9;background:#b97d59}

.companion-band{
  border:1px solid rgba(255,255,255,.82);
  background:#e9dbcc;
  box-shadow:0 12px 28px rgba(94,64,46,.1);
}
.companion-band:before{background:linear-gradient(to bottom,rgba(85,56,38,.02) 36%,rgba(69,42,29,.3) 100%)}
.companion-band:after{color:#fffaf4;text-shadow:0 1px 4px rgba(67,42,28,.34)}
.status-pill{
  border-color:rgba(255,255,255,.72);
  color:#6b4d3a;
  background:rgba(255,252,247,.78);
  box-shadow:0 5px 14px rgba(78,52,35,.1);
}
.status-pill i{background:#b97d59}
.speech{
  color:#4d382a;
  background:rgba(255,253,249,.84);
  box-shadow:0 11px 23px rgba(76,50,34,.13);
}

.progress-panel{
  border-color:#f1e4d7;
  background:rgba(255,253,249,.94);
  box-shadow:0 16px 30px rgba(84,56,40,.11);
}
.progress-ring{background:conic-gradient(#7d8063 50%,#eee3d6 0);box-shadow:none}
.progress-ring:after{background:#fffdf9}
.text-button,.quiet-action{color:#755742}
.time-chip,.mood-current,.filter-button{
  color:#765742;
  background:#f4eadf;
}

.next-task{
  border-color:#eadbcb;
  background:#fffefa;
  box-shadow:0 10px 20px rgba(85,57,41,.08);
}
.next-task:hover{box-shadow:0 11px 22px rgba(85,57,41,.1)}
.subject-badge,.subject-badge.blue,.subject-badge.green,.subject-badge.coral{
  color:#654838;
  background:#f2e5d8;
}
.subject-badge.green{color:#59604c;background:#e7e8dc}
.subject-badge.coral{color:#87573e;background:#f3dfcf}
.start-button,.primary-action{
  border-color:#5c4739;
  color:#fffaf5;
  background:#5c4739;
  box-shadow:0 7px 15px rgba(79,53,37,.18);
}
.start-button:hover,.primary-action:hover{background:#49362a}
.task-item{border-bottom-color:#eadfd3;color:#4d392d}
.check{border-color:#c8ad99;background:#fffdf9}
.task-item.done .check{border-color:#7d8063;background:#7d8063}

.week-strip,.chart-panel,.subject-stats,.mood-card,.setting-list,.companion-note{
  border-color:#eadfd3;
  background:#fffefa;
  box-shadow:0 9px 21px rgba(86,57,40,.06);
}
.week-day{color:#9a8271}
.week-day strong{color:#5a4233}
.week-day.active{background:#5c4739;box-shadow:0 5px 12px rgba(84,57,41,.15)}
.class-block{
  border-left-color:#7d8063;
  background:#fbf6f0;
}
.blue-block{border-left-color:#a98569}.green-block{border-left-color:#7d8063}.coral-block{border-left-color:#b97d59}
.class-block span{color:#7b5d49}.class-block h3{color:#4b382b}
.exam-card,.stat-hero{
  border-color:#ead8c7;
  background:#f5ebdf;
  box-shadow:0 10px 23px rgba(84,56,40,.07);
}
.exam-card{border-left:3px solid #b97d59}
.exam-card strong,.stat-hero strong{color:#5b4030}

.mini-ring{border-color:#7d8063;border-left-color:#e9ddcf;color:#5d4738}
.chart-panel,.subject-stats{background:#fffefa}
.bar-col i{background:#ead9c8}.bar-col.active i{background:#7d8063}
.blue-dot{background:#a98569}.green-dot{background:#7d8063}.coral-dot{background:#b97d59}
.subject-stats>div{border-top-color:#eee3d8}

.profile-card{
  border-color:#ead9c8;
  background:#f3e4d5;
  box-shadow:0 10px 22px rgba(88,59,42,.08);
}
.profile-card span,.profile-card p{color:#8d796c}
.profile-card h2{color:#4c382a}
.mood-card{background:#fffefa}
.mood-card.selected{box-shadow:0 11px 24px rgba(82,54,39,.12),0 0 0 1px #a98569}
.mood-card.selected:after{color:#704e38;background:#fffaf4}
.setting-list button{border-bottom-color:#eee1d5}.setting-list button>span{color:#8a624a}.setting-list b{color:#aa8c77}

.bottom-nav{
  border-color:rgba(255,255,255,.94);
  background:rgba(255,252,247,.88);
  box-shadow:0 13px 30px rgba(78,51,36,.13);
}
.bottom-nav button{color:#9b8575}.bottom-nav button.active{color:#5c4739}.bottom-nav button.active:after{background:#b97d59}
.fab{
  border-color:#fff7f0;
  background:#74503a;
  box-shadow:0 10px 20px rgba(83,53,37,.23);
}
dialog{border-color:#f0e3d6;background:rgba(255,252,247,.96);box-shadow:0 28px 74px rgba(67,42,28,.21)}
dialog::backdrop{background:rgba(72,47,33,.28)}
input,select{border-color:#e5d6c8;background:#fffefa;box-shadow:inset 0 2px 5px rgba(91,62,43,.04)}
.toast{background:rgba(78,54,40,.93)}

/* Cafe minimal: fewer surfaces, quieter contrast, one espresso emphasis. */
body:not(.focus-mode){background:#f6f1ea;background-image:none}
body:not(.focus-mode) .app-shell{background:#fffdf9;box-shadow:0 20px 48px rgba(83,58,42,.08)}
.eyebrow,.panel-label{color:#a89484}
.icon-button{border-color:#eee6dd;background:#fffdf9;box-shadow:none}

.companion-band{background:#eee3d7;box-shadow:none}
.companion-band:before{background:linear-gradient(to bottom,transparent 50%,rgba(67,44,31,.22))}
.status-pill,.speech{border-color:#eee3d9;background:rgba(255,253,249,.9);box-shadow:none;backdrop-filter:none}

.progress-panel{
  margin:-20px 12px 24px;
  border-color:#eee5dc;
  background:#fffdf9;
  box-shadow:none;
  backdrop-filter:none;
}
.progress-ring{background:conic-gradient(#74503a 50%,#eee6dd 0)}
.time-chip,.mood-current,.filter-button{background:#f5eee7}

.next-task,.week-strip,.chart-panel,.subject-stats,.profile-card,.mood-card,.setting-list,.companion-note,.exam-card,.stat-hero{
  box-shadow:none;
  backdrop-filter:none;
}
.next-task{border-color:#eee4da;background:#fffdf9}
.next-task:hover{box-shadow:none}
.subject-badge,.subject-badge.blue,.subject-badge.green,.subject-badge.coral{
  color:#70503c;
  background:#f1e9e1;
}
.subject-badge.green,.subject-badge.coral{color:#70503c;background:#f1e9e1}
.start-button,.primary-action{background:#604534;box-shadow:none}
.start-button:hover,.primary-action:hover{background:#604534}
.task-item{border-bottom-color:#eee5dc}.check{border-color:#d4c3b4;box-shadow:none}
.task-item.done .check{border-color:#604534;background:#604534}

.week-strip,.chart-panel,.subject-stats,.mood-card,.setting-list,.companion-note{border-color:#eee5dc;background:#fffdf9}
.week-strip{box-shadow:none}.week-day.active{background:#604534;box-shadow:none}
.class-block{background:#fbf7f2;box-shadow:none}
.exam-card,.stat-hero{background:#fbf7f2;box-shadow:none}
.exam-card{border-left-color:#9b7056}
.blue-block{border-left-color:#9b7056}.green-block{border-left-color:#7d8063}.coral-block{border-left-color:#9b7056}
.mini-ring{border-color:#604534;border-left-color:#eee5dc}
.bar-col i{background:#e5d8cc;box-shadow:none}.bar-col.active i{background:#604534}
.blue-dot,.coral-dot{background:#9b7056}.green-dot{background:#7d8063}

.profile-card{background:#f5ede5}.mood-card{background:#fffdf9}
.mood-card.selected{box-shadow:0 0 0 1px #604534;transform:none}
.mood-card.selected:after{border:0;background:#f5eee7;backdrop-filter:none}
.setting-list button>span{color:#7d5b46}

.bottom-nav{border-color:#eee5dc;background:#fffdf9;box-shadow:0 -1px 0 rgba(99,72,53,.03);backdrop-filter:none}
.bottom-nav button{color:#a18d7d}.bottom-nav button.active{color:#604534}.bottom-nav button.active:after{background:#604534}
.fab{background:#604534;box-shadow:none}
dialog{border-color:#eee4da;background:#fffdf9;box-shadow:0 20px 48px rgba(77,51,34,.14);backdrop-filter:none}
input,select{border-color:#e9ded4;background:#fffdf9;box-shadow:none}

/* Cafe day: a quiet palette with enough variation to keep the pages alive. */
body:not(.focus-mode){
  background-color:#f3ebe2;
  background-image:radial-gradient(circle at 12% 3%,rgba(255,255,255,.9),transparent 30%),radial-gradient(circle at 94% 28%,rgba(218,229,211,.38),transparent 24%);
}
body:not(.focus-mode) .app-shell{background:#fcf9f4;box-shadow:0 24px 56px rgba(82,57,42,.1)}

.companion-band{background:#e8ddd1}
.progress-panel{
  border-color:#e9d9ca;
  background:#f5e9dc;
  box-shadow:0 9px 20px rgba(98,67,48,.06);
}
.progress-ring{background:conic-gradient(#7d8063 50%,#e8ddd1 0)}
.time-chip,.mood-current,.filter-button{background:#fffaf4}

.next-task{
  border-color:#e8d6c3;
  background:#f8eadb;
  box-shadow:0 9px 20px rgba(104,68,43,.06);
}
.subject-badge.blue{color:#74543e;background:#ead7c5}
.subject-badge.green{color:#5f654e;background:#e3e7d9}
.subject-badge.coral{color:#855b46;background:#eedbd4}
.task-item:nth-child(3n+1) .check{border-color:#c9ac95}.task-item:nth-child(3n+2) .check{border-color:#b7bca4}.task-item:nth-child(3n) .check{border-color:#d6b7a6}

.week-strip{background:#fffdf9}
.week-day.active{background:#74503a}
.class-block{box-shadow:0 6px 14px rgba(93,63,43,.035)}
.blue-block{border-left-color:#a77b5d;background:#f4e4d5}
.green-block{border-left-color:#7d8063;background:#e9ecdf}
.coral-block{border-left-color:#b47d64;background:#f3e3dc}
.exam-card{border-left-color:#a77b5d;background:#f4e8dc}

.stat-hero{border-color:#dde1d4;background:#e9ecdf}
.mini-ring{border-color:#7d8063;border-left-color:#cfd4c2}
.chart-panel{background:#fffdf9}.bar-col i{background:#e6d6c7}.bar-col.active i{background:#a77b5d}
.subject-stats{background:#fffdf9}.blue-dot{background:#a77b5d}.green-dot{background:#7d8063}.coral-dot{background:#b47d64}

.profile-card{border-color:#e6d6c7;background:#f2e3d4}
.mood-card{box-shadow:0 6px 14px rgba(89,59,42,.035)}
.mood-card.selected{box-shadow:0 0 0 1px #a77b5d,0 8px 18px rgba(87,57,40,.08)}
.setting-list{background:#fffdf9}
.setting-list button:nth-child(2) > span{color:#75805c}.setting-list button:nth-child(3) > span{color:#a87960}

.bottom-nav{background:rgba(255,253,249,.94);box-shadow:0 -1px 0 rgba(102,72,53,.04),0 10px 24px rgba(75,49,35,.07)}
.bottom-nav button.active{color:#74503a}.bottom-nav button.active:after{background:#a77b5d}

/* Action hierarchy: reserve the darkest coffee for a single confirmation. */
.start-button{
  border-color:#74503a;
  background:#74503a;
  box-shadow:0 5px 12px rgba(93,62,44,.12);
}
.start-button:hover{background:#674532}
.primary-action{border-color:#604534;background:#604534}
.primary-action:hover{background:#523a2c}
.week-day.active{background:#74503a}
.task-item.done .check{border-color:#6e7057;background:#6e7057}
.mood-card.selected{box-shadow:0 0 0 1px #74503a,0 8px 18px rgba(87,57,40,.08)}
.bottom-nav button.active{color:#74503a}.bottom-nav button.active:after{background:#a77b5d}
.fab{
  border-color:#e4c5ae;
  color:#604534;
  background:#e8c9b1;
  box-shadow:0 7px 15px rgba(92,59,40,.1);
}
.timer-presets button.selected{background:#74503a}
.focus-view .timer-presets button.selected{background:#604534}

/* Cafe counter system: warm menu paper, espresso actions, and sage status accents. */
:root{
  --ink:#3d2a20;
  --muted:#927866;
  --line:#e5d2c0;
  --page:#eadacb;
  --surface:#fffaf4;
  --glass:#fffaf4;
  --glass-strong:#fffaf4;
  --sage:#7d8668;
  --sage-dark:#5f684e;
  --mint-dark:#7d8668;
  --coral:#bb7655;
  --blue:#a17963;
  --lavender:#9d8c9d;
  --espresso:#4d3022;
  --roast:#76503a;
  --oat:#f5e5d3;
  --cream:#fffaf4;
  --shadow:0 10px 24px rgba(82,52,34,.10);
}

html{background:var(--page)}
body:not(.focus-mode){
  background:#eadacb;
  background-image:none;
}
body:not(.focus-mode) .app-shell{
  background:var(--cream);
  box-shadow:0 22px 56px rgba(72,44,28,.13);
}
main{padding-bottom:112px}
.topbar{margin-bottom:15px}
.topbar h1,.page-title h1,.section-head h2,.subject-stats h2{
  color:var(--ink);
  font-family:"Apple SD Gothic Neo","PingFang SC","Microsoft YaHei",sans-serif;
  font-weight:750;
  letter-spacing:0;
}
.eyebrow,.panel-label{
  color:#9b7d68;
  font-family:"SF Mono","Menlo","PingFang SC",monospace;
  font-size:10px;
  letter-spacing:0;
}
.icon-button{
  width:38px;
  height:38px;
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--espresso);
  background:var(--cream);
  box-shadow:none;
  backdrop-filter:none;
}
.notice-dot{right:6px;top:6px;width:7px;height:7px;border-color:var(--cream);background:var(--coral)}

.companion-band{
  height:334px;
  border:1px solid #decbb7;
  border-radius:6px;
  background:#e9dbc9;
  box-shadow:var(--shadow);
}
.companion-band:before{background:rgba(78,50,34,.10)}
.companion-band:after{
  content:"07 / 25  ·  04:54";
  top:14px;
  right:14px;
  color:#725542;
  font:10px "SF Mono","Menlo",monospace;
  letter-spacing:0;
  text-shadow:none;
}
.companion-band img{object-position:50% 25%;filter:saturate(.76) contrast(.94) brightness(1.04)}
.companion-copy{padding:14px}
.status-pill{
  gap:7px;
  padding:6px 8px;
  border:1px solid rgba(255,250,244,.9);
  border-radius:4px;
  color:#604332;
  background:rgba(255,250,244,.84);
  box-shadow:none;
  backdrop-filter:none;
}
.status-pill i{width:6px;height:6px;background:var(--coral)}
.speech{
  max-width:79%;
  margin-bottom:15px;
  padding:11px 12px;
  border:1px solid #ead7c5;
  border-radius:5px;
  color:#4a3022;
  background:rgba(255,250,244,.93);
  box-shadow:0 7px 17px rgba(83,51,33,.09);
  backdrop-filter:none;
  font-family:"Kaiti SC","STKaiti","KaiTi",cursive;
  font-size:17px;
}

.progress-panel{
  grid-template-columns:58px 1fr auto;
  gap:11px;
  margin:-19px 12px 24px;
  padding:14px;
  border:1px solid #dfc9b3;
  border-radius:6px;
  background:var(--oat);
  box-shadow:0 9px 20px rgba(87,54,33,.10);
  backdrop-filter:none;
}
.progress-ring{width:54px;height:54px;background:conic-gradient(var(--sage) 50%,#ead9ca 0);box-shadow:none}
.progress-ring:after{inset:7px;background:#fffaf4}
.progress-panel h2{color:var(--espresso);font-size:15px}
.progress-panel p:not(.panel-label){color:#876e5d}
.text-button,.quiet-action{color:var(--roast)}
.text-button{padding:7px 0;font-size:12px}

.section-head{margin-top:25px}
.section-head h2{font-size:19px}
.time-chip,.mood-current,.filter-button{
  padding:6px 8px;
  border:1px solid #e6d3c1;
  border-radius:4px;
  color:var(--roast);
  background:#fff5ea;
  box-shadow:none;
  backdrop-filter:none;
  font-size:10px;
}
.filter-button{font-weight:700}

.next-task{
  min-height:76px;
  padding:13px;
  border:1px solid #e5cdb8;
  border-radius:6px;
  background:#f7e7d7;
  box-shadow:0 7px 17px rgba(87,53,33,.07);
}
.next-task:hover{transform:none;box-shadow:0 7px 17px rgba(87,53,33,.07)}
.subject-badge{
  width:38px;
  height:38px;
  border:1px solid rgba(106,70,46,.13);
  border-radius:6px;
  color:var(--roast);
  background:#f1ddca;
  box-shadow:none;
  font-family:"Kaiti SC","STKaiti","KaiTi",cursive;
}
.subject-badge.blue{color:#76513c;background:#ecd7c5}
.subject-badge.green{color:#59624b;background:#e4e7d9}
.subject-badge.coral{color:#87573f;background:#f0d8cf}
.task-copy h3{color:var(--ink)}
.task-copy p{color:#8c7160}
.start-button,.primary-action{
  border:1px solid var(--espresso);
  border-radius:5px;
  color:#fffaf4;
  background:var(--espresso);
  box-shadow:0 5px 12px rgba(77,48,34,.16);
}
.start-button{padding:8px 10px;font-size:12px;white-space:nowrap}
.start-button:hover,.primary-action:hover{background:#392217}
.task-list{
  gap:0;
  overflow:hidden;
  border:1px solid #ead9c9;
  border-radius:6px;
  background:#fffdf9;
}
.task-item{
  padding:13px 12px;
  border:0;
  border-bottom:1px dashed #ead9c9;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.task-item:last-child{border-bottom:0}
.task-item:hover{transform:none;box-shadow:none}
.task-item.done{opacity:.58}
.check{
  width:22px;
  height:22px;
  border:1px solid #bea38f;
  border-radius:50%;
  background:#fffaf4;
  box-shadow:none;
}
.task-item.done .check{border-color:var(--sage);background:var(--sage)}
.task-menu{color:#a6836e}

.page-title{padding:4px 1px 20px}
.page-title p:last-child{color:#8d7261}
.week-strip{
  border:1px solid #ead9c9;
  border-radius:6px;
  background:#fffdf9;
  box-shadow:none;
}
.week-day{border-radius:4px;color:#9b806d}
.week-day strong{color:var(--espresso)}
.week-day.active{background:var(--espresso);box-shadow:none}
.timeline{margin-top:22px}
.timeline article{grid-template-columns:48px 1fr;gap:10px;margin-bottom:12px}
.timeline time{color:#9b806d;font-family:"SF Mono","Menlo",monospace}
.class-block{
  border:1px solid #e5d4c4;
  border-left:4px solid var(--roast);
  border-radius:5px;
  background:#fff8f0;
  box-shadow:none;
}
.blue-block{border-left-color:#aa795e;background:#f6e7da}
.green-block{border-left-color:#7d8668;background:#edf0e5}
.coral-block{border-left-color:#bd7759;background:#f7e6df}
.class-block span{color:#8c6a55}
.class-block h3{color:var(--espresso)}
.class-block p{color:#917766}
.exam-card{
  border:1px solid #dfe1d3;
  border-left:4px solid var(--sage);
  border-radius:6px;
  background:#eef0e6;
  box-shadow:none;
}
.exam-card strong,.stat-hero strong{color:#4c513c}

body.focus-mode,.focus-view.active{background:#2d1b13}
.focus-view.active{background:#2d1b13}
.focus-context{color:#dcc3ab;font-family:"SF Mono","Menlo",monospace;letter-spacing:0}
.focus-clock strong{
  color:#fff4e5;
  background:none;
  -webkit-text-fill-color:#fff4e5;
  -webkit-text-stroke:0;
  text-shadow:none;
}
.focus-coffee{filter:saturate(.94) contrast(.98)}
.focus-controls{
  border:1px solid rgba(247,223,199,.25);
  border-radius:6px;
  background:#fff7ec;
  box-shadow:0 14px 38px rgba(16,8,4,.32);
  backdrop-filter:none;
}
.focus-controls>p{color:#8c6e58}
.focus-controls .timer-presets{gap:7px}
.focus-controls .timer-presets button{
  min-width:0;
  flex:1;
  height:36px;
  padding:0 6px;
  border:1px solid #e6d2bf;
  border-radius:4px;
  color:#765440;
  background:#fffdf9;
  font-size:11px;
}
.focus-controls .timer-presets button.selected{color:#fffaf4;background:var(--espresso)}
.focus-actions{grid-template-columns:72px 1fr 72px;gap:8px}
.focus-actions .quiet-action{color:#795d49}
.focus-actions .primary-action{height:44px}

.stat-hero{
  border:1px solid #dbe0cc;
  border-radius:6px;
  background:#edf0e5;
  box-shadow:none;
}
.mini-ring{border-color:var(--sage);border-left-color:#d7dcc8;color:#5e674a}
.chart-panel,.subject-stats{
  border:1px solid #ead9c9;
  border-radius:6px;
  background:#fffdf9;
  box-shadow:none;
}
.bar-col i{border-radius:4px 4px 1px 1px;background:#e5cdb9;box-shadow:none}
.bar-col.active i{background:#aa7659}
.blue-dot{background:#aa7659}.green-dot{background:#7d8668}.coral-dot{background:#bf8068}
.subject-stats>div{border-top-color:#eee0d3}

.profile-card{
  border:1px solid #e4d2c1;
  border-radius:6px;
  background:#f8eadb;
  box-shadow:none;
}
.profile-card img{filter:saturate(.78) contrast(.95)}
.profile-card h2{color:var(--espresso)}
.profile-card span,.profile-card p{color:#8b6e5c}
.mood-card{
  border:1px solid #ead9c9;
  border-radius:6px;
  background:#fffdf9;
  box-shadow:none;
}
.mood-card img{border-radius:4px;filter:saturate(.72) contrast(.96)}
.mood-card.selected{transform:none;box-shadow:0 0 0 2px var(--roast)}
.mood-card.selected:after{
  right:9px;
  top:9px;
  border:1px solid #e5d0bd;
  border-radius:4px;
  color:#704e3b;
  background:#fff9f1;
  box-shadow:none;
  backdrop-filter:none;
}
.setting-list{
  border:1px solid #ead9c9;
  border-radius:6px;
  background:#fffdf9;
  box-shadow:none;
}
.setting-list button{border-bottom-color:#eee0d3}
.setting-list button>span{color:#a06d53}
.setting-list small{color:#957967}

.bottom-nav{
  height:68px;
  padding:8px 10px;
  border:1px solid #e5d5c7;
  border-radius:6px;
  background:#fffaf4;
  box-shadow:0 8px 22px rgba(78,48,30,.10);
  backdrop-filter:none;
}
.bottom-nav button{color:#9a7d69;font-size:10px}
.bottom-nav button span{font-size:18px}
.bottom-nav button.active{color:var(--espresso)}
.bottom-nav button.active:after{width:16px;background:var(--coral)}
.fab{
  width:48px;
  height:48px;
  border:1px solid #d7bba4;
  color:#fffaf4;
  background:var(--espresso);
  box-shadow:0 8px 18px rgba(76,45,29,.20);
}
dialog{border:1px solid #e5d3c2;border-radius:8px;background:#fffaf4;box-shadow:0 24px 62px rgba(55,31,19,.26);backdrop-filter:none}
dialog::backdrop{background:rgba(55,31,19,.34);backdrop-filter:none}
input,select{border-color:#e5d4c4;background:#fffdf9;box-shadow:none}
.toast{border:1px solid rgba(255,255,255,.16);background:#4d3022}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #bd7759;outline-offset:2px}

@media(max-width:360px){
  .companion-band{height:315px}
  .speech{font-size:16px}
  .focus-actions{grid-template-columns:60px 1fr 60px}
  .focus-controls .timer-presets button{font-size:10px}
}

/* Café setting: visual hierarchy only, with the learning language untouched. */
:root{
  --cafe-paper:#fffaf4;
  --cafe-milk:#f6e9dc;
  --cafe-roast:#4d3022;
  --cafe-sage:#7d8668;
  --cafe-clay:#b97b5b;
  --cafe-rule:#e3d0bd;
}

body:not(.focus-mode){
  background-color:#ead9c8;
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(112,75,49,.025) 1px,transparent 1px);
  background-size:36px 36px;
}
body:not(.focus-mode) .app-shell{border:1px solid rgba(107,72,48,.08)}

.progress-panel{position:relative;overflow:hidden}
.progress-panel::before{
  content:"";
  position:absolute;
  top:10px;
  bottom:10px;
  left:0;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--cafe-sage);
}

.time-chip,.mood-current,.filter-button{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  border-style:dashed;
  border-color:var(--cafe-rule);
  background:var(--cafe-paper);
}
.time-chip::before,.filter-button::before{
  content:"";
  width:4px;
  height:4px;
  margin-right:5px;
  border-radius:50%;
  background:var(--cafe-clay);
}

.next-task{position:relative;overflow:hidden;padding-left:16px}
.next-task::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:4px;
  background:var(--cafe-clay);
}
.task-list{
  border-color:var(--cafe-rule);
  box-shadow:0 3px 0 rgba(91,59,39,.035);
}
.task-item{border-bottom-color:var(--cafe-rule)}

.subject-badge,.subject-badge.blue,.subject-badge.green,.subject-badge.coral{
  border:1px solid rgba(106,70,46,.12);
  border-radius:5px;
}
.subject-badge.blue{color:#74543e;background:#ead7c5}
.subject-badge.green{color:#5f654e;background:#e3e7d9}
.subject-badge.coral{color:#855b46;background:#eedbd4}
.blue-block{border-left-color:#a77b5d}
.green-block{border-left-color:var(--cafe-sage)}
.coral-block{border-left-color:var(--cafe-clay)}
.blue-dot{background:#a77b5d}
.green-dot{background:var(--cafe-sage)}
.coral-dot{background:var(--cafe-clay)}

.start-button,.primary-action{
  border-color:var(--cafe-roast);
  background:var(--cafe-roast);
  box-shadow:0 5px 12px rgba(77,48,34,.14);
}
.start-button:hover,.primary-action:hover{background:#3f271c}
.text-button,.quiet-action{color:#76513c}
.filter-button{color:#76513c;font-weight:700}

.bottom-nav{
  border-color:#e5d5c7;
  box-shadow:0 -1px 0 rgba(102,72,53,.05),0 7px 18px rgba(75,49,35,.06);
}
.bottom-nav button{color:#a18d7d}
.bottom-nav button.active{color:var(--cafe-roast)}
.bottom-nav button.active:after{background:var(--cafe-clay)}
.fab{
  border-color:#e1c4ad;
  background:var(--cafe-roast);
  box-shadow:0 8px 17px rgba(77,48,34,.18);
}

dialog{background:var(--cafe-paper)}
input,select{background:#fffdf9}

/* Menu and receipt motifs make the cafe setting structural, not just chromatic. */
.companion-band{
  border-width:2px;
  box-shadow:inset 0 0 0 5px rgba(255,250,244,.16),0 12px 25px rgba(94,64,46,.12);
}
.status-pill{
  position:relative;
  border-radius:3px;
  box-shadow:0 2px 0 rgba(96,67,45,.08);
}
.status-pill::after{
  content:"";
  position:absolute;
  right:-5px;
  top:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#e8d7c5;
  transform:translateY(-50%);
}
.progress-panel::after{
  content:"";
  position:absolute;
  top:10px;
  right:16px;
  width:38px;
  border-top:1px dashed rgba(112,75,49,.26);
}
.progress-ring{
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.45),inset 0 0 0 7px rgba(167,123,93,.12);
}
.next-task::after{
  content:"";
  position:absolute;
  top:10px;
  right:10px;
  width:6px;
  height:6px;
  border:1px solid rgba(112,75,49,.24);
  border-radius:50%;
}
.task-list{
  position:relative;
  border-top:2px solid var(--cafe-roast);
  border-bottom:2px solid var(--cafe-rule);
  border-radius:3px;
}
.task-list::before,.task-list::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  height:1px;
  background:repeating-linear-gradient(90deg,var(--cafe-rule) 0 5px,transparent 5px 9px);
  pointer-events:none;
}
.task-list::before{top:4px}
.task-list::after{bottom:4px}
.task-item{padding-left:16px;padding-right:16px}
.class-block{position:relative;overflow:hidden}
.class-block::after{
  content:"";
  position:absolute;
  top:12px;
  right:12px;
  width:16px;
  height:16px;
  border:1px solid rgba(112,75,49,.15);
  border-radius:50%;
  box-shadow:inset 0 0 0 3px rgba(255,250,244,.35);
}
.week-strip{position:relative;padding-bottom:13px}
.week-strip::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:5px;
  border-top:1px dashed rgba(112,75,49,.18);
}
.mood-card{box-shadow:0 2px 0 rgba(112,75,49,.07)}
.mood-card img{border:1px solid rgba(112,75,49,.1);box-shadow:inset 0 0 0 3px rgba(255,250,244,.22)}
.bottom-nav button{position:relative}
.bottom-nav button+button::before{
  content:"";
  position:absolute;
  top:9px;
  bottom:9px;
  left:0;
  border-left:1px solid rgba(112,75,49,.08);
}
.fab{box-shadow:inset 0 0 0 4px rgba(255,250,244,.18),0 8px 17px rgba(77,48,34,.18)}
.focus-controls{border-top:3px solid var(--cafe-clay)}

/* Extend the cafe language across every view. These are structural motifs,
   while the original learning labels and actions remain unchanged. */
.page-title{
  position:relative;
  padding:15px 12px 24px;
  border-bottom:1px dashed var(--cafe-rule);
}
.page-title::before{
  content:"DAILY SPECIAL";
  position:absolute;
  top:0;
  right:4px;
  color:#a77b5d;
  font:700 9px "Courier New",monospace;
  letter-spacing:1px;
  transform:rotate(3deg);
}
.page-title::after{
  content:"";
  position:absolute;
  right:14px;
  bottom:-7px;
  width:13px;
  height:13px;
  border:1px solid var(--cafe-rule);
  border-radius:50%;
  background:var(--cafe-paper);
}
.week-strip{
  margin-top:16px;
  border-top:2px solid var(--cafe-roast);
  border-radius:3px;
  background:var(--cafe-paper);
}
.week-day{border-radius:3px}
.week-day.active{background:var(--cafe-roast)}
.timeline{position:relative;margin-top:22px;padding-left:2px}
.timeline::before{
  content:"";
  position:absolute;
  top:7px;
  bottom:8px;
  left:55px;
  border-left:1px dashed rgba(112,75,49,.24);
}
.timeline article{position:relative;z-index:1}
.timeline time{font-family:"Courier New",monospace;font-size:10px;font-weight:700}
.class-block{border-radius:3px;background:#fffaf4}
.class-block span{color:#987157;font-family:"Courier New",monospace;letter-spacing:.5px}
.class-block::before{
  content:"";
  position:absolute;
  top:16px;
  left:-23px;
  width:7px;
  height:7px;
  border:2px solid var(--cafe-paper);
  border-radius:50%;
  background:var(--cafe-clay);
  box-shadow:0 0 0 1px rgba(112,75,49,.18);
}
.exam-card{
  position:relative;
  overflow:hidden;
  border-top:2px solid var(--cafe-roast);
  border-radius:3px;
  background:var(--cafe-milk);
}
.exam-card::after{
  content:"COFFEE BREAK";
  position:absolute;
  right:14px;
  bottom:13px;
  color:#9b755d;
  font:700 9px "Courier New",monospace;
  letter-spacing:.7px;
  transform:rotate(-4deg);
}

.stat-hero{
  position:relative;
  overflow:hidden;
  border-top:2px solid var(--cafe-roast);
  border-radius:3px;
  background:var(--cafe-paper);
}
.stat-hero::before{
  content:"WEEKLY RECEIPT";
  position:absolute;
  top:12px;
  right:14px;
  color:#a77b5d;
  font:700 9px "Courier New",monospace;
  letter-spacing:.8px;
}
.stat-hero strong{font-family:var(--hand);color:var(--cafe-roast)}
.mini-ring{border-color:var(--cafe-clay);border-left-color:#e3d0bd;background:var(--cafe-paper);box-shadow:inset 0 0 0 4px rgba(185,123,91,.09)}
.chart-panel,.subject-stats{border-radius:3px;background:var(--cafe-paper)}
.chart-panel{border-top:2px solid var(--cafe-roast)}
.chart-head span{padding:5px 8px;border:1px dashed var(--cafe-rule);border-radius:3px;color:#987157;font:700 9px "Courier New",monospace}
.bar-col i{background:#d9c5b2}
.bar-col.active i{background:var(--cafe-clay)}
.subject-stats{position:relative}
.subject-stats::after{
  content:"";
  position:absolute;
  top:14px;
  right:14px;
  width:18px;
  height:18px;
  border:1px solid var(--cafe-rule);
  border-radius:50%;
  box-shadow:inset 0 0 0 4px rgba(185,123,91,.1);
}

.profile-card{
  position:relative;
  overflow:hidden;
  border-top:2px solid var(--cafe-roast);
  border-radius:3px;
  background:var(--cafe-paper);
}
.profile-card::after{
  content:"MEMBER CARD";
  position:absolute;
  right:14px;
  bottom:12px;
  color:#a77b5d;
  font:700 9px "Courier New",monospace;
  letter-spacing:.8px;
  transform:rotate(-4deg);
}
.profile-card img{border:2px solid #ead7c5;box-shadow:0 3px 0 rgba(112,75,49,.08)}
.mood-section .section-head{margin-top:25px}
.mood-grid{position:relative;padding:10px;border:1px dashed var(--cafe-rule);border-radius:3px;background:rgba(246,233,220,.46)}
.mood-card{border-radius:3px;background:var(--cafe-paper)}
.mood-card.selected{box-shadow:0 0 0 2px var(--cafe-clay),0 5px 0 rgba(112,75,49,.08)}
.setting-list{border-top:2px solid var(--cafe-roast);border-radius:3px;background:var(--cafe-paper)}
.setting-list button{border-bottom:1px dashed var(--cafe-rule)}
.setting-list button:last-child{border-bottom:0}
.setting-list button>span{color:var(--cafe-clay)}
.setting-list button b{color:#987157}

dialog{border-top:3px solid var(--cafe-roast);border-radius:3px}
.dialog-head{padding-bottom:12px;border-bottom:1px dashed var(--cafe-rule)}

/* White minimalist cafe variant: paper and charcoal lead; green is reserved
   for small plant-like accents and status cues. */
:root{
  --cafe-paper:#ffffff;
  --cafe-milk:#f3f7f3;
  --cafe-roast:#29332d;
  --cafe-sage:#78947d;
  --cafe-clay:#a9c0ac;
  --cafe-rule:#dce6de;
}
body:not(.focus-mode){
  color:#29332d;
  background-color:#f4f7f4;
  background-image:none;
}
body:not(.focus-mode) .app-shell{
  background:#ffffff;
  border-color:#e0e8e1;
  box-shadow:0 22px 56px rgba(47,67,53,.10),inset 0 0 0 1px rgba(255,255,255,.92);
}
.page-title::before{
  content:"";
  top:2px;
  right:15px;
  width:11px;
  height:17px;
  border-radius:100% 0 100% 0;
  background:#89a58d;
  transform:rotate(34deg);
  box-shadow:-7px 7px 0 -2px #b8cdb9;
}
.page-title::after{
  right:22px;
  bottom:-7px;
  width:6px;
  height:6px;
  border:0;
  background:#89a58d;
}
.progress-panel,.next-task,.task-item,.week-strip,.class-block,.exam-card,
.chart-panel,.subject-stats,.profile-card,.mood-card,.setting-list,
.stat-hero,dialog{background:#ffffff}
.section-head h2,.subject-stats h2,.progress-panel h2,.class-block h3,
.profile-card h2,.stat-hero strong{color:#29332d}
.time-chip,.mood-current,.filter-button{color:#54745c;background:#ffffff}
.start-button,.primary-action{border-color:#5f7f67;background:#5f7f67;box-shadow:0 5px 12px rgba(74,108,80,.16)}
.start-button:hover,.primary-action:hover{background:#4f6e57}
.bottom-nav{background:rgba(255,255,255,.94);border-color:#e1e9e2;box-shadow:0 -1px 0 rgba(66,93,71,.05),0 10px 24px rgba(47,67,53,.10)}
.bottom-nav button.active{color:#54745c}
.bottom-nav button.active:after{background:#89a58d}
.fab{border-color:#9ab59e;background:#5f7f67;box-shadow:inset 0 0 0 4px rgba(255,255,255,.22),0 8px 17px rgba(74,108,80,.20)}
.class-block::before{border-color:#ffffff;background:#89a58d}
.week-day.active{background:#5f7f67}
.exam-card{background:#f3f7f3}
.stat-hero,.chart-panel{border-top-color:#5f7f67}
.mini-ring{border-color:#89a58d;border-left-color:#dce6de;background:#ffffff;box-shadow:inset 0 0 0 4px rgba(120,148,125,.10)}
.bar-col.active i{background:#89a58d}
.mood-grid{background:#f3f7f3;border-color:#cbdacc}
.mood-card.selected{box-shadow:0 0 0 2px #89a58d,0 5px 0 rgba(74,108,80,.08)}
.setting-list{border-top-color:#5f7f67}
.setting-list button>span{color:#6f9276}
dialog{border-top-color:#5f7f67}
body.focus-mode,.focus-view.active{background:#f4f7f4}
.focus-clock strong{color:#29332d;-webkit-text-fill-color:#29332d}
.focus-controls{background:rgba(255,255,255,.96);border-top-color:#89a58d;box-shadow:0 14px 34px rgba(47,67,53,.13)}
.focus-controls .timer-presets button.selected{background:#5f7f67}

/* Occasional hand-painted plant decals: real bitmap texture, kept off the
   primary task surface so the app still reads as quiet and minimal. */
.cafe-plant{
  position:absolute;
  z-index:0;
  width:84px;
  height:84px;
  object-fit:contain;
  opacity:.72;
  pointer-events:none;
  filter:saturate(.82) contrast(.94);
}
.course-plant{top:20px;right:10px;transform:rotate(7deg)}
.profile-plant{top:18px;right:8px;width:70px;height:70px;opacity:.58;transform:rotate(-8deg)}
#course-view>*:not(.cafe-plant),#profile-view>*:not(.cafe-plant){position:relative;z-index:1}
@media(max-width:360px){.cafe-plant{width:66px;height:66px;opacity:.62}.course-plant{right:2px}.profile-plant{right:0}}

/* Environmental still-life layer: a quiet cafe wall and tabletop sit behind
   the white UI surfaces, so the space reads as real without reducing legibility. */
.view:not(.focus-view){
  background-image:
    linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.96)),
    url("assets/cafe-space-still-life.png");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% auto;
}
.focus-view.active{background-image:none}
.cafe-plant{opacity:.58}
.view:not(.focus-view){
  background-size:auto 100%;
  background-position:right top;
}
.course-plant{display:none}
.profile-plant{opacity:.42}

/* Coffee objects anchor the schedule and report surfaces like props on a
   cafe counter, while remaining light enough to keep the study content clear. */
.exam-card::before,
.stat-hero::after{
  content:"";
  position:absolute;
  width:52px;
  height:68px;
  background:url("assets/focus-painted-coffee-shell.png") center/contain no-repeat;
  opacity:.58;
  pointer-events:none;
}
.exam-card::before{right:15px;top:10px;transform:rotate(4deg)}
.stat-hero::after{left:46%;right:auto;bottom:7px;width:42px;height:54px;opacity:.42;transform:rotate(-4deg)}
.exam-card{padding-right:78px}

/* Make the cafe environment legible as a place, not a barely-visible tint. */
.page-title{
  min-height:148px;
  overflow:hidden;
  border-bottom:0;
  border-radius:0 0 10px 10px;
  background-image:
    linear-gradient(rgba(255,255,255,.30),rgba(255,255,255,.70)),
    url("assets/cafe-space-still-life.png");
  background-repeat:no-repeat;
  background-position:center 62%;
  background-size:cover;
  box-shadow:inset 0 -1px 0 rgba(80,103,84,.10),0 6px 18px rgba(47,67,53,.06);
}
.page-title::before,.page-title::after{display:none}
.page-title h1,.page-title p{position:relative;z-index:1;text-shadow:0 1px 0 rgba(255,255,255,.72)}
.view:not(.focus-view){
  background-image:
    linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.98)),
    url("assets/cafe-space-still-life.png");
}
dialog .primary-action{margin-top:5px}

/* Concept boards for side-by-side review. Each board changes the cafe's
   spatial composition while preserving the existing study workflow. */

/* 01: window-side table. The room is the hero; surfaces stay quiet and
   objects sit at the edges like a real cafe table. */
body.concept-1:not(.focus-mode){
  background:#e9e5dd url("assets/cafe-space-still-life.png") center top/cover fixed no-repeat;
}
body.concept-1:not(.focus-mode) .app-shell{
  background:rgba(255,255,255,.86);
  box-shadow:0 22px 60px rgba(74,67,56,.17);
  backdrop-filter:blur(1px);
}
body.concept-1 main{padding-left:20px;padding-right:20px}
body.concept-1 .topbar{padding:2px 1px 0}
body.concept-1 .topbar::after{
  content:"WINDOW TABLE  ·  09:40";
  margin-left:auto;
  padding:6px 8px;
  border:1px solid rgba(108,95,76,.18);
  border-radius:3px;
  color:#766b5e;
  background:rgba(255,255,255,.74);
  font:9px "SF Mono","Menlo",monospace;
  letter-spacing:.3px;
}
body.concept-1 .companion-band{
  height:314px;
  margin:0 -20px;
  border:0;
  border-radius:0;
  background:#ddd5c8;
  box-shadow:inset 0 -30px 40px rgba(72,61,48,.10);
}
body.concept-1 .companion-band::before{
  background:linear-gradient(90deg,rgba(255,255,255,.20),transparent 54%,rgba(63,53,40,.16));
}
body.concept-1 .companion-copy{padding:17px 20px}
body.concept-1 .status-pill{border-radius:2px;color:#5c5146;background:rgba(255,255,255,.78)}
body.concept-1 .speech{max-width:74%;margin-bottom:14px;border-radius:4px;color:#514a41;background:rgba(255,255,255,.82);box-shadow:0 8px 20px rgba(72,61,48,.12)}
body.concept-1 .progress-panel{margin:-16px 12px 24px;border-color:#ddd6cb;border-radius:4px;background:#fff;box-shadow:0 10px 24px rgba(76,67,56,.10)}
body.concept-1 .section-head{margin-top:27px}
body.concept-1 .next-task{border-color:#ded7cd;border-radius:4px;background:#fff;box-shadow:0 7px 18px rgba(76,67,56,.07)}
body.concept-1 .task-list{border:1px solid #ded7cd;border-top:2px solid #8f8578;border-radius:4px;background:rgba(255,255,255,.88);box-shadow:0 7px 18px rgba(76,67,56,.06)}
body.concept-1 .task-item{border-bottom-color:#e9e4dd}
body.concept-1 .page-title{min-height:128px;padding:20px 16px 22px;border-radius:0 0 4px 4px;background:rgba(255,255,255,.74);box-shadow:0 5px 18px rgba(76,67,56,.06)}
body.concept-1 .page-title::after{display:block;border-color:#d1c7b9;background:#fff}
body.concept-1 .week-strip,body.concept-1 .chart-panel,body.concept-1 .subject-stats,body.concept-1 .profile-card,body.concept-1 .setting-list{border-color:#ded7cd;border-radius:4px;background:rgba(255,255,255,.88);box-shadow:0 7px 18px rgba(76,67,56,.06)}
body.concept-1 .class-block{border-radius:4px;background:rgba(255,255,255,.78);box-shadow:0 5px 12px rgba(76,67,56,.05)}
body.concept-1 .exam-card,body.concept-1 .stat-hero{border-radius:4px;background:rgba(244,241,233,.92)}
body.concept-1 .bottom-nav{border-color:#d8d0c5;border-radius:4px 4px 0 0;background:rgba(255,255,255,.94);box-shadow:0 -3px 18px rgba(76,67,56,.10)}
body.concept-1 .bottom-nav button.active{color:#6c6257}
body.concept-1 .bottom-nav button.active:after{background:#a7957e}
body.concept-1 .fab{background:#766a5b;border-color:#cfc3b3}
body.concept-1 .page-title + .cafe-plant,body.concept-1 .profile-plant{display:block;opacity:.40}

/* 02: hand-drawn cafe stationery. The room recedes and the UI becomes a
   collection of taped notes, receipt rules, and sketched object decals. */
body.concept-2:not(.focus-mode){
  background:#f5f0e8;
  background-image:radial-gradient(rgba(126,104,82,.07) .7px,transparent .7px);
  background-size:7px 7px;
}
body.concept-2:not(.focus-mode) .app-shell{background:#fffdf8;box-shadow:0 16px 44px rgba(94,72,50,.10)}
body.concept-2 main{padding-left:16px;padding-right:16px}
body.concept-2 .topbar{padding:0 3px}
body.concept-2 .topbar::after{
  content:"TODAY'S TABLE";
  margin-left:auto;
  padding:4px 8px;
  border:1px dashed #b8a289;
  color:#9a856b;
  font:9px "Courier New",monospace;
  transform:rotate(-2deg);
}
body.concept-2 .companion-band{
  height:300px;
  margin:0 -16px;
  border:1px solid #d7c5ad;
  border-radius:0;
  background:#eadfce;
  box-shadow:inset 0 0 0 5px rgba(255,253,248,.34),0 8px 0 rgba(135,105,77,.07);
}
body.concept-2 .companion-band::before{background:linear-gradient(to bottom,rgba(255,255,255,.06),transparent 45%,rgba(89,62,39,.20))}
body.concept-2 .companion-copy{padding:15px 17px}
body.concept-2 .status-pill{border:1px dashed #b9a58b;border-radius:0;color:#806a53;background:#fffaf0;box-shadow:2px 2px 0 rgba(121,94,66,.10)}
body.concept-2 .speech{max-width:78%;padding:11px 13px;border:1px solid #cdb99f;border-radius:2px;color:#66513e;background:#fffaf0;box-shadow:3px 4px 0 rgba(121,94,66,.10);transform:rotate(-1deg)}
body.concept-2 .progress-panel{margin:-12px 10px 24px;padding:14px;border:1px solid #cdb99f;border-radius:2px;background:#fffaf0;box-shadow:3px 4px 0 rgba(121,94,66,.10)}
body.concept-2 .progress-panel::after{content:"receipt  /  07";top:12px;right:13px;width:auto;border:0;color:#b39879;font:8px "Courier New",monospace}
body.concept-2 .next-task{border:1px solid #cdb99f;border-radius:2px;background:#fffaf0;box-shadow:3px 4px 0 rgba(121,94,66,.10);transform:rotate(.3deg)}
body.concept-2 .task-list{border:1px solid #cdb99f;border-top:2px solid #9f8364;border-radius:2px;background:#fffaf0;box-shadow:3px 4px 0 rgba(121,94,66,.08)}
body.concept-2 .task-item{border-bottom:1px dashed #d9c8b3}
body.concept-2 .page-title{min-height:112px;padding:17px 14px 20px;border:0;border-bottom:1px dashed #b8a289;border-radius:0;background:#fffaf0}
body.concept-2 .page-title::before{display:block;content:"handwritten menu";top:8px;right:10px;color:#a78d6e;font:9px "Courier New",monospace;letter-spacing:0;transform:rotate(3deg)}
body.concept-2 .page-title::after{display:block;border-color:#cdb99f;background:#fffaf0}
body.concept-2 .week-strip,body.concept-2 .chart-panel,body.concept-2 .subject-stats,body.concept-2 .profile-card,body.concept-2 .setting-list{border:1px solid #cdb99f;border-radius:2px;background:#fffaf0;box-shadow:3px 4px 0 rgba(121,94,66,.08)}
body.concept-2 .class-block{border-radius:2px;background:#fffaf0;box-shadow:3px 3px 0 rgba(121,94,66,.06)}
body.concept-2 .exam-card,body.concept-2 .stat-hero{border-radius:2px;background:#f0e7d8;box-shadow:3px 4px 0 rgba(121,94,66,.08)}
body.concept-2 .mood-grid{border:1px dashed #b8a289;border-radius:2px;background:#f2e9dc}
body.concept-2 .mood-card{border-radius:2px;background:#fffaf0}
body.concept-2 .mood-card:nth-child(2n){transform:rotate(.7deg)}
body.concept-2 .mood-card:nth-child(3n){transform:rotate(-.6deg)}
body.concept-2 .bottom-nav{border-color:#cdb99f;border-radius:2px 2px 0 0;background:#fffaf0;box-shadow:0 -3px 0 rgba(121,94,66,.07)}
body.concept-2 .bottom-nav button.active{color:#7d6247}
body.concept-2 .bottom-nav button.active:after{background:#b69066}
body.concept-2 .fab{background:#7d6247;border-color:#d0bba0}
body.concept-2 .exam-card::after,body.concept-2 .stat-hero::before{font-family:"Courier New",monospace}
body.concept-2 .cafe-plant{opacity:.54;filter:saturate(.62) sepia(.14)}

/* 03: quiet cafe corner. Large white fields and one anchored plant/cup make
   the app feel like a calm seat by the wall instead of a dashboard stack. */
body.concept-3:not(.focus-mode){
  background:#f1f3ef;
  background-image:linear-gradient(90deg,rgba(255,255,255,.78) 0 18%,transparent 18% 82%,rgba(218,229,216,.38) 82% 100%);
}
body.concept-3:not(.focus-mode) .app-shell{background:#fff;box-shadow:0 18px 50px rgba(53,75,59,.11)}
body.concept-3 main{padding-left:22px;padding-right:22px}
body.concept-3 .topbar{margin-bottom:24px;padding-top:5px}
body.concept-3 .topbar::after{
  content:"";
  width:54px;
  height:54px;
  margin-left:auto;
  background:url("assets/cafe-plant-sticker.png") center/contain no-repeat;
  opacity:.72;
  transform:rotate(8deg);
}
body.concept-3 .companion-band{
  height:248px;
  margin:0 -22px;
  border:0;
  border-radius:0;
  background:#e8eee7;
  box-shadow:inset 0 -1px 0 #dce6dc;
}
body.concept-3 .companion-band::before{background:linear-gradient(90deg,rgba(255,255,255,.28),transparent 52%,rgba(90,124,96,.12))}
body.concept-3 .companion-copy{padding:16px 22px}
body.concept-3 .status-pill{border:0;border-radius:0;color:#59725e;background:rgba(255,255,255,.72);box-shadow:none}
body.concept-3 .speech{max-width:76%;margin-bottom:13px;padding:10px 0;border:0;border-bottom:1px solid rgba(84,115,90,.25);border-radius:0;color:#3c5141;background:transparent;box-shadow:none}
body.concept-3 .progress-panel{margin:-1px 0 28px;padding:15px 0;border:0;border-bottom:1px solid #dfe7df;border-radius:0;background:#fff;box-shadow:none}
body.concept-3 .progress-panel::before{display:none}
body.concept-3 .section-head{margin-top:31px}
body.concept-3 .next-task{min-height:70px;border:1px solid #dfe7df;border-radius:0;background:#fff;box-shadow:none}
body.concept-3 .task-list{border:0;border-top:1px solid #dfe7df;border-bottom:1px solid #dfe7df;border-radius:0;background:#fff;box-shadow:none}
body.concept-3 .task-item{padding-left:0;padding-right:0;border-bottom:1px solid #edf1ed}
body.concept-3 .page-title{min-height:106px;padding:20px 0 21px;border:0;border-bottom:1px solid #dfe7df;border-radius:0;background:#fff;box-shadow:none}
body.concept-3 .page-title::before{display:none}
body.concept-3 .page-title::after{display:none}
body.concept-3 .week-strip,body.concept-3 .chart-panel,body.concept-3 .subject-stats,body.concept-3 .profile-card,body.concept-3 .setting-list{border:0;border-top:1px solid #dfe7df;border-bottom:1px solid #dfe7df;border-radius:0;background:#fff;box-shadow:none}
body.concept-3 .class-block{border-radius:0;background:#fbfcfb;box-shadow:none}
body.concept-3 .exam-card,body.concept-3 .stat-hero{border:0;border-left:3px solid #91ab94;border-radius:0;background:#f1f6f1;box-shadow:none}
body.concept-3 .mood-grid{border:0;border-top:1px solid #dfe7df;border-bottom:1px solid #dfe7df;border-radius:0;background:#f7faf7}
body.concept-3 .mood-card{border-radius:0;background:#fff}
body.concept-3 .bottom-nav{border:0;border-top:1px solid #dfe7df;border-radius:0;background:rgba(255,255,255,.96);box-shadow:0 -8px 24px rgba(53,75,59,.08)}
body.concept-3 .bottom-nav button.active{color:#58715d}
body.concept-3 .bottom-nav button.active:after{background:#91ab94}
body.concept-3 .fab{background:#58715d;border-color:#adc2b0}
body.concept-3 .profile-plant{opacity:.28}
body.concept-3 .exam-card::before{right:8px;opacity:.32}

@media(max-width:420px){
  body.concept-1 .topbar::after,body.concept-2 .topbar::after{font-size:8px;padding:5px 6px}
  body.concept-1 main,body.concept-3 main{padding-left:18px;padding-right:18px}
  body.concept-1 .companion-band,body.concept-3 .companion-band{margin-left:-18px;margin-right:-18px}
  body.concept-2 .companion-band{margin-left:-16px;margin-right:-16px}
}

/* 04: white cafe counter. This hybrid keeps the paper-like UI from concept 2
   but places it on a real room, with a cup and plant acting as spatial anchors. */
body.concept-4:not(.focus-mode){
  background:#eef1ed url("assets/cafe-space-still-life.png") right top/auto 100% fixed no-repeat;
}
body.concept-4:not(.focus-mode) .app-shell{
  background:rgba(255,255,255,.91);
  box-shadow:0 22px 58px rgba(61,76,64,.15);
}
body.concept-4 main{padding-left:18px;padding-right:18px}
body.concept-4 .topbar{margin-bottom:13px;padding:4px 2px 0}
body.concept-4 .topbar::after{
  content:"";
  width:48px;
  height:48px;
  margin-left:auto;
  background:url("assets/cafe-plant-sticker.png") center/contain no-repeat;
  opacity:.62;
  transform:rotate(7deg);
}
body.concept-4 .companion-band{
  height:278px;
  margin:0;
  border:1px solid #d8e2d9;
  border-radius:10px;
  background:#e9efea;
  box-shadow:0 10px 26px rgba(66,83,69,.12);
}
body.concept-4 .companion-band::before{background:linear-gradient(90deg,rgba(255,255,255,.28),transparent 55%,rgba(65,88,71,.14))}
body.concept-4 .companion-copy{padding:15px 16px}
body.concept-4 .status-pill{border:1px solid rgba(94,124,101,.18);border-radius:999px;color:#5a745f;background:rgba(255,255,255,.78);box-shadow:none}
body.concept-4 .speech{max-width:75%;margin-bottom:13px;padding:10px 12px;border:1px solid rgba(125,151,130,.24);border-radius:7px;color:#415743;background:rgba(255,255,255,.83);box-shadow:0 8px 18px rgba(61,86,67,.10)}
body.concept-4 .progress-panel{margin:-20px 16px 23px;padding:14px;border:1px solid #d8e2d9;border-radius:10px;background:rgba(255,255,255,.96);box-shadow:0 9px 22px rgba(61,82,66,.11)}
body.concept-4 .section-head{margin-top:28px}
body.concept-4 .next-task{position:relative;min-height:76px;border:1px solid #d8e2d9;border-left:4px solid #88a68d;border-radius:10px;background:#fff;box-shadow:0 7px 18px rgba(61,82,66,.08)}
body.concept-4 .next-task::after{content:"";position:absolute;right:12px;bottom:8px;width:40px;height:50px;background:url("assets/focus-painted-coffee-shell.png") center/contain no-repeat;opacity:.34;transform:rotate(-5deg);pointer-events:none}
body.concept-4 .task-list{border:1px solid #d8e2d9;border-top:2px solid #78967e;border-radius:10px;background:rgba(255,255,255,.94);box-shadow:0 8px 20px rgba(61,82,66,.07)}
body.concept-4 .task-item{border-bottom-color:#e8eee9}
body.concept-4 .page-title{min-height:132px;padding:19px 14px 21px;border:0;border-bottom:1px solid #d8e2d9;border-radius:0 0 10px 10px;background:rgba(255,255,255,.84);box-shadow:0 6px 18px rgba(61,82,66,.06)}
body.concept-4 .page-title::before{display:none}
body.concept-4 .page-title::after{display:block;right:16px;bottom:-12px;width:36px;height:36px;border:0;border-radius:0;background:transparent url("assets/cafe-plant-sticker.png") center/contain no-repeat;opacity:.44}
body.concept-4 .view:not(.focus-view){background-image:linear-gradient(rgba(255,255,255,.89),rgba(255,255,255,.96)),url("assets/cafe-space-still-life.png");background-position:right top;background-size:auto 100%}
body.concept-4 .week-strip,body.concept-4 .chart-panel,body.concept-4 .subject-stats,body.concept-4 .profile-card,body.concept-4 .setting-list{border:1px solid #d8e2d9;border-radius:10px;background:rgba(255,255,255,.92);box-shadow:0 8px 20px rgba(61,82,66,.07)}
body.concept-4 .class-block{border-radius:9px;background:rgba(255,255,255,.84);box-shadow:0 5px 12px rgba(61,82,66,.05)}
body.concept-4 .exam-card,body.concept-4 .stat-hero{border-radius:10px;background:rgba(237,244,238,.94);box-shadow:0 7px 18px rgba(61,82,66,.07)}
body.concept-4 .bottom-nav{border-color:#d8e2d9;border-radius:10px 10px 0 0;background:rgba(255,255,255,.96);box-shadow:0 -4px 20px rgba(61,82,66,.10)}
body.concept-4 .bottom-nav button.active{color:#57755d}
body.concept-4 .bottom-nav button.active:after{background:#88a68d}
body.concept-4 .fab{background:#57755d;border-color:#b9cdbb}
body.concept-4 .cafe-plant{opacity:.38}

/* 05: cafe menu wall. A calm room header gives the page a physical wall and
   tabletop, while the study surfaces read as clipped menu cards underneath. */
body.concept-5:not(.focus-mode){
  background:#f4f5f2;
  background-image:linear-gradient(rgba(255,255,255,.68),rgba(255,255,255,.68)),url("assets/cafe-space-still-life.png");
  background-position:center top;
  background-size:cover;
  background-attachment:fixed;
}
body.concept-5:not(.focus-mode) .app-shell{background:rgba(255,255,255,.95);box-shadow:0 18px 52px rgba(64,77,65,.14)}
body.concept-5 main{padding-left:20px;padding-right:20px}
body.concept-5 .topbar{margin-bottom:16px;padding:4px 0 0}
body.concept-5 .topbar::after{content:"CAFÉ STUDY CORNER";margin-left:auto;color:#6d7e6f;font:9px "Courier New",monospace;letter-spacing:.2px}
body.concept-5 .companion-band{height:255px;margin:0 -20px;border:0;border-radius:0;background:#e8eee9;box-shadow:inset 0 -1px 0 #d2ded4}
body.concept-5 .companion-band::before{background:linear-gradient(90deg,rgba(255,255,255,.36),transparent 52%,rgba(83,112,88,.13))}
body.concept-5 .companion-copy{padding:16px 20px}
body.concept-5 .status-pill{border:0;border-radius:0;color:#58715d;background:rgba(255,255,255,.76);box-shadow:none}
body.concept-5 .speech{max-width:78%;margin-bottom:12px;padding:10px 12px;border:0;border-left:2px solid #91aa95;border-radius:0;color:#415844;background:rgba(255,255,255,.78);box-shadow:none}
body.concept-5 .progress-panel{margin:-1px 0 26px;padding:16px 0;border:0;border-bottom:1px solid #d7e1d8;border-radius:0;background:#fff;box-shadow:none}
body.concept-5 .progress-panel::after{content:"";top:13px;right:14px;width:52px;height:52px;border:0;border-radius:0;background:url("assets/focus-painted-coffee-shell.png") center/contain no-repeat;opacity:.24}
body.concept-5 .section-head{margin-top:28px}
body.concept-5 .next-task{min-height:75px;border:0;border-top:1px solid #d7e1d8;border-bottom:1px solid #d7e1d8;border-radius:0;background:#fff;box-shadow:none}
body.concept-5 .next-task::before{display:none}
body.concept-5 .task-list{border:0;border-top:1px solid #d7e1d8;border-bottom:1px solid #d7e1d8;border-radius:0;background:#fff;box-shadow:none}
body.concept-5 .task-item{padding-left:0;padding-right:0;border-bottom:1px solid #eaf0eb}
body.concept-5 .page-title{min-height:142px;padding:19px 16px 22px;border:0;border-radius:0 0 12px 12px;background-image:linear-gradient(rgba(255,255,255,.25),rgba(255,255,255,.76)),url("assets/cafe-space-still-life.png");background-position:center 72%;background-size:cover;box-shadow:0 7px 18px rgba(64,77,65,.08)}
body.concept-5 .page-title::before{display:none}
body.concept-5 .page-title::after{display:block;right:17px;bottom:-10px;width:42px;height:42px;border:0;border-radius:0;background:url("assets/cafe-plant-sticker.png") center/contain no-repeat;opacity:.46}
body.concept-5 .week-strip,body.concept-5 .chart-panel,body.concept-5 .subject-stats,body.concept-5 .profile-card,body.concept-5 .setting-list{border:0;border-top:1px solid #d7e1d8;border-bottom:1px solid #d7e1d8;border-radius:0;background:rgba(255,255,255,.93);box-shadow:none}
body.concept-5 .class-block{border-radius:0;background:rgba(255,255,255,.86);box-shadow:none}
body.concept-5 .exam-card,body.concept-5 .stat-hero{border:0;border-left:3px solid #91aa95;border-radius:0;background:#f0f5f0;box-shadow:none}
body.concept-5 .mood-grid{border:0;border-top:1px solid #d7e1d8;border-bottom:1px solid #d7e1d8;border-radius:0;background:#f7faf7}
body.concept-5 .mood-card{border-radius:0;background:#fff}
body.concept-5 .bottom-nav{border:0;border-top:1px solid #d7e1d8;border-radius:0;background:rgba(255,255,255,.97);box-shadow:0 -8px 24px rgba(64,77,65,.08)}
body.concept-5 .bottom-nav button.active{color:#58715d}
body.concept-5 .bottom-nav button.active:after{background:#91aa95}
body.concept-5 .fab{background:#58715d;border-color:#b4c9b6}
body.concept-5 .cafe-plant{opacity:.30}

@media(max-width:420px){
  body.concept-4 main{padding-left:16px;padding-right:16px}
  body.concept-4 .companion-band{height:264px}
  body.concept-5 .companion-band{margin-left:-18px;margin-right:-18px}
}

/* 06: desktop sticky notes. This is a structural change: the companion is
   treated as a pinned photo, progress as a receipt, and tasks as loose notes
   on a cafe table instead of a uniform card stack. */
body.concept-6:not(.focus-mode){
  background:#d7c3a9 url("assets/cafe-space-still-life.png") center top/cover fixed no-repeat;
}
body.concept-6:not(.focus-mode) .app-shell{
  background:rgba(243,236,224,.74);
  box-shadow:0 24px 70px rgba(74,55,35,.20);
  backdrop-filter:blur(2px);
}
body.concept-6 main{padding:0 24px 122px}
body.concept-6 #today-view{position:relative;padding-top:18px}
body.concept-6 #today-view::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  right:-24px;
  bottom:0;
  left:-24px;
  background:linear-gradient(105deg,rgba(221,204,180,.30),rgba(255,255,255,.20) 47%,rgba(170,140,103,.15));
  pointer-events:none;
}
body.concept-6 .topbar{margin:0 0 18px;padding:0 2px;align-items:center}
body.concept-6 .topbar h1{font-size:27px;color:#4a3d30}
body.concept-6 .topbar::after{
  content:"TABLE 07";
  margin-left:auto;
  padding:5px 8px;
  border:1px solid #bba78d;
  color:#806a50;
  background:#f8f0e2;
  font:9px "Courier New",monospace;
  transform:rotate(2deg);
}
body.concept-6 .icon-button{border-color:#cdbba2;background:#f8f0e2;color:#6a5641;box-shadow:2px 3px 0 rgba(95,69,44,.10)}
body.concept-6 .companion-band{
  height:268px;
  margin:0 18px 0 8px;
  border:7px solid #fffdf8;
  border-radius:1px;
  background:#ded2c1;
  box-shadow:5px 8px 0 rgba(95,69,44,.12),0 14px 25px rgba(95,69,44,.14);
  transform:rotate(-1.2deg);
}
body.concept-6 .companion-band::before{background:linear-gradient(to bottom,rgba(255,255,255,.08),transparent 42%,rgba(60,43,28,.23))}
body.concept-6 .companion-copy{padding:13px 14px}
body.concept-6 .status-pill{border:1px dashed #af9778;border-radius:1px;color:#795d41;background:#fff7e9;box-shadow:2px 2px 0 rgba(95,69,44,.10)}
body.concept-6 .speech{max-width:79%;margin-bottom:11px;padding:11px 13px;border:1px solid #c8ad88;border-radius:1px;color:#5d4733;background:#fff7e9;box-shadow:4px 4px 0 rgba(95,69,44,.13);transform:rotate(1deg)}
body.concept-6 .progress-panel{
  z-index:5;
  margin:-23px 28px 22px 1px;
  padding:14px 16px;
  border:1px solid #c9b293;
  border-radius:1px;
  background:#fff7e9;
  box-shadow:4px 5px 0 rgba(95,69,44,.12);
  transform:rotate(.7deg);
}
body.concept-6 .progress-panel::before{display:none}
body.concept-6 .progress-panel::after{content:"receipt / 07";top:10px;right:12px;width:auto;border:0;color:#a68b68;font:8px "Courier New",monospace;transform:rotate(-2deg)}
body.concept-6 .progress-ring{width:52px;height:52px;border-color:#7e9278;border-left-color:#eadfce;background:#fff7e9;box-shadow:inset 0 0 0 3px rgba(126,146,120,.12)}
body.concept-6 .section-head{margin:24px 8px 10px 2px;align-items:flex-end}
body.concept-6 .section-head h2{color:#4a3d30;font-size:20px}
body.concept-6 .panel-label{color:#92785d}
body.concept-6 .time-chip,body.concept-6 .filter-button{border:1px dashed #bba78d;border-radius:1px;color:#806a50;background:#fff7e9;box-shadow:2px 2px 0 rgba(95,69,44,.08)}
body.concept-6 .next-task{
  position:relative;
  min-height:72px;
  margin:0 12px 0 26px;
  border:1px solid #c9b293;
  border-radius:1px;
  background:#fff7e9;
  box-shadow:4px 5px 0 rgba(95,69,44,.12);
  transform:rotate(-.8deg);
}
body.concept-6 .next-task::before{display:none}
body.concept-6 .next-task::after{content:"";position:absolute;right:10px;bottom:7px;width:38px;height:49px;background:url("assets/focus-painted-coffee-shell.png") center/contain no-repeat;opacity:.38;transform:rotate(4deg);pointer-events:none}
body.concept-6 .start-button{border:1px solid #6b5943;border-radius:1px;background:#6b5943;box-shadow:2px 3px 0 rgba(95,69,44,.14)}
body.concept-6 .task-list{
  display:grid;
  gap:14px;
  overflow:visible;
  margin:0 2px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body.concept-6 .task-list::before,body.concept-6 .task-list::after{display:none}
body.concept-6 .task-item{
  min-height:65px;
  padding:12px 13px;
  border:1px solid #c9b293;
  border-radius:1px;
  background:#fff7e9;
  box-shadow:4px 5px 0 rgba(95,69,44,.10);
}
body.concept-6 .task-item:nth-child(1){margin-right:22px;transform:rotate(-.8deg)}
body.concept-6 .task-item:nth-child(2){margin-left:13px;transform:rotate(.9deg)}
body.concept-6 .task-item:nth-child(3){margin-right:10px;transform:rotate(-.3deg)}
body.concept-6 .task-item:nth-child(4){margin-left:20px;transform:rotate(1deg)}
body.concept-6 .task-item.done{opacity:.57}
body.concept-6 .check{border-color:#b89e7c;border-radius:1px;background:#fff7e9;box-shadow:none}
body.concept-6 .task-item.done .check{border-color:#7e9278;background:#7e9278}
body.concept-6 .subject-badge,body.concept-6 .subject-badge.blue,body.concept-6 .subject-badge.green,body.concept-6 .subject-badge.coral{border:1px solid #c9b293;border-radius:1px;color:#806a50;background:#f0e3d1;box-shadow:none}
body.concept-6 .task-menu{color:#a58a69}
body.concept-6 .bottom-nav{
  height:62px;
  padding:7px 12px;
  border:1px solid #c9b293;
  border-radius:1px 1px 0 0;
  background:#fff7e9;
  box-shadow:0 -4px 0 rgba(95,69,44,.08),0 9px 21px rgba(95,69,44,.12);
}
body.concept-6 .bottom-nav button{color:#a18769}
body.concept-6 .bottom-nav button.active{color:#6b5943}
body.concept-6 .bottom-nav button.active:after{background:#8aa07f}
body.concept-6 .fab{border-color:#d8bea0;border-radius:1px;color:#fff7e9;background:#6b5943;box-shadow:4px 5px 0 rgba(95,69,44,.15)}

body.concept-6 .page-title{
  min-height:132px;
  padding:20px 16px 22px;
  border:1px solid #c9b293;
  border-radius:1px;
  background:#fff7e9;
  box-shadow:4px 5px 0 rgba(95,69,44,.10);
  transform:rotate(-.5deg);
}
body.concept-6 .page-title::before{display:block;content:"MENU BOARD";top:12px;right:13px;color:#a58a69;font:8px "Courier New",monospace;letter-spacing:.4px;transform:rotate(3deg)}
body.concept-6 .page-title::after{display:block;right:12px;bottom:-11px;width:32px;height:32px;border:0;border-radius:0;background:url("assets/cafe-plant-sticker.png") center/contain no-repeat;opacity:.43}
body.concept-6 .week-strip,body.concept-6 .chart-panel,body.concept-6 .subject-stats,body.concept-6 .profile-card,body.concept-6 .setting-list{
  border:1px solid #c9b293;
  border-radius:1px;
  background:#fff7e9;
  box-shadow:4px 5px 0 rgba(95,69,44,.09);
}
body.concept-6 .class-block{border-radius:1px;background:#fff7e9;box-shadow:3px 4px 0 rgba(95,69,44,.08)}
body.concept-6 .exam-card,body.concept-6 .stat-hero{border-radius:1px;background:#f0e3d1;box-shadow:4px 5px 0 rgba(95,69,44,.09)}
body.concept-6 .mood-grid{border:1px dashed #bba78d;border-radius:1px;background:#efe3d4}
body.concept-6 .mood-card{border-radius:1px;background:#fff7e9;box-shadow:3px 4px 0 rgba(95,69,44,.08)}
body.concept-6 .cafe-plant{opacity:.45;filter:saturate(.65) sepia(.10)}

@media(max-width:420px){
  body.concept-6 main{padding-left:18px;padding-right:18px}
  body.concept-6 #today-view::before{right:-18px;left:-18px}
  body.concept-6 .companion-band{margin-left:5px;margin-right:9px;height:252px}
  body.concept-6 .progress-panel{margin-right:18px}
  body.concept-6 .next-task{margin-left:16px;margin-right:5px}
  body.concept-6 .task-item:nth-child(1){margin-right:9px}
  body.concept-6 .task-item:nth-child(2){margin-left:7px}
  body.concept-6 .task-item:nth-child(4){margin-left:10px}
}

/* 07: paper-only desk. The room photo is removed from the page background;
   paper fibers, ruled lines, and real object decals carry the cafe mood. */
body.concept-7:not(.focus-mode){
  background-color:#f1eee6;
  background-image:
    repeating-linear-gradient(0deg,rgba(119,103,82,.028) 0,rgba(119,103,82,.028) 1px,transparent 1px,transparent 5px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.42) 0,rgba(255,255,255,.42) 1px,transparent 1px,transparent 9px);
  background-size:auto;
}
body.concept-7:not(.focus-mode) .app-shell{
  background:#faf8f2;
  box-shadow:0 18px 48px rgba(93,77,57,.13),inset 0 0 0 1px rgba(255,255,255,.8);
}
body.concept-7 main{padding:0 24px 122px}
body.concept-7 #today-view{position:relative;padding-top:18px}
body.concept-7 #today-view::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  right:-24px;
  bottom:0;
  left:-24px;
  background:
    repeating-linear-gradient(0deg,rgba(128,108,80,.028) 0,rgba(128,108,80,.028) 1px,transparent 1px,transparent 6px),
    linear-gradient(#f8f5ed,#f0ece2);
}
body.concept-7 .topbar{margin:0 0 18px;padding:0 2px;align-items:center}
body.concept-7 .topbar h1{color:#4c4338}
body.concept-7 .topbar::after{content:"PAPER TABLE 07";margin-left:auto;color:#95836a;font:9px "Courier New",monospace;letter-spacing:.2px}
body.concept-7 .icon-button{border-color:#d8cfbf;border-radius:1px;color:#6d604f;background:#fffdf8;box-shadow:2px 3px 0 rgba(104,84,56,.08)}
body.concept-7 .companion-band{
  height:262px;
  margin:0 11px 0 1px;
  border:7px solid #fffdf8;
  border-radius:1px;
  background:#eee9de;
  box-shadow:4px 7px 0 rgba(104,84,56,.10),0 14px 22px rgba(104,84,56,.10);
  transform:rotate(-.8deg);
}
body.concept-7 .companion-band::before{background:linear-gradient(to bottom,rgba(255,255,255,.1),transparent 45%,rgba(75,61,43,.17))}
body.concept-7 .companion-copy{padding:13px 14px}
body.concept-7 .status-pill{border:1px dashed #c5b69d;border-radius:1px;color:#7d6e59;background:#fffdf7;box-shadow:2px 2px 0 rgba(104,84,56,.07)}
body.concept-7 .speech{max-width:79%;margin-bottom:11px;padding:11px 13px;border:1px solid #d2c3aa;border-radius:1px;color:#625444;background:#fffdf7;box-shadow:3px 4px 0 rgba(104,84,56,.10);transform:rotate(.7deg)}
body.concept-7 .progress-panel,
body.concept-7 .next-task,
body.concept-7 .task-item,
body.concept-7 .page-title,
body.concept-7 .week-strip,
body.concept-7 .chart-panel,
body.concept-7 .subject-stats,
body.concept-7 .profile-card,
body.concept-7 .setting-list,
body.concept-7 .class-block,
body.concept-7 .exam-card,
body.concept-7 .stat-hero,
body.concept-7 .mood-card{
  background-color:#fffdf7;
  background-image:repeating-linear-gradient(0deg,rgba(126,103,74,.022) 0,rgba(126,103,74,.022) 1px,transparent 1px,transparent 5px);
}
body.concept-7 .progress-panel{margin:-23px 28px 22px 1px;padding:14px 16px;border:1px solid #d2c3aa;border-radius:1px;box-shadow:4px 5px 0 rgba(104,84,56,.10);transform:rotate(.6deg)}
body.concept-7 .progress-panel::before{display:none}
body.concept-7 .progress-panel::after{content:"paper / 07";top:10px;right:12px;width:auto;border:0;color:#b09b7a;font:8px "Courier New",monospace}
body.concept-7 .section-head{margin:24px 8px 10px 2px;align-items:flex-end}
body.concept-7 .section-head h2{color:#4c4338;font-size:20px}
body.concept-7 .panel-label{color:#9b896f}
body.concept-7 .time-chip,body.concept-7 .filter-button{border:1px dashed #c5b69d;border-radius:1px;color:#87745b;background:#fffdf7;box-shadow:2px 2px 0 rgba(104,84,56,.06)}
body.concept-7 .next-task{min-height:72px;margin:0 12px 0 26px;border:1px solid #d2c3aa;border-radius:1px;box-shadow:4px 5px 0 rgba(104,84,56,.10);transform:rotate(-.6deg)}
body.concept-7 .next-task::before{display:none}
body.concept-7 .next-task::after{content:"";position:absolute;right:10px;bottom:7px;width:38px;height:49px;background:url("assets/focus-painted-coffee-shell.png") center/contain no-repeat;opacity:.30;transform:rotate(4deg);pointer-events:none}
body.concept-7 .start-button{border:1px solid #706454;border-radius:1px;background:#706454;box-shadow:2px 3px 0 rgba(104,84,56,.12)}
body.concept-7 .task-list{display:grid;gap:14px;overflow:visible;margin:0 2px;border:0;border-radius:0;background:transparent;box-shadow:none}
body.concept-7 .task-list::before,body.concept-7 .task-list::after{display:none}
body.concept-7 .task-item{min-height:65px;padding:12px 13px;border:1px solid #d2c3aa;border-radius:1px;box-shadow:4px 5px 0 rgba(104,84,56,.08)}
body.concept-7 .task-item:nth-child(1){margin-right:22px;transform:rotate(-.6deg)}
body.concept-7 .task-item:nth-child(2){margin-left:13px;transform:rotate(.8deg)}
body.concept-7 .task-item:nth-child(3){margin-right:10px;transform:rotate(-.2deg)}
body.concept-7 .task-item:nth-child(4){margin-left:20px;transform:rotate(.8deg)}
body.concept-7 .task-item.done{opacity:.58}
body.concept-7 .check{border-color:#c3b08f;border-radius:1px;background:#fffdf7;box-shadow:none}
body.concept-7 .task-item.done .check{border-color:#8ca18a;background:#8ca18a}
body.concept-7 .subject-badge,body.concept-7 .subject-badge.blue,body.concept-7 .subject-badge.green,body.concept-7 .subject-badge.coral{border:1px solid #d2c3aa;border-radius:1px;color:#87745b;background:#f2eadb;box-shadow:none}
body.concept-7 .task-menu{color:#ad9978}
body.concept-7 .bottom-nav{height:62px;padding:7px 12px;border:1px solid #d2c3aa;border-radius:1px 1px 0 0;background:#fffdf7;box-shadow:0 -4px 0 rgba(104,84,56,.06),0 9px 19px rgba(104,84,56,.10)}
body.concept-7 .bottom-nav button{color:#a6947c}
body.concept-7 .bottom-nav button.active{color:#706454}
body.concept-7 .bottom-nav button.active:after{background:#91a78f}
body.concept-7 .fab{border-color:#d8c6a9;border-radius:1px;color:#fffdf7;background:#706454;box-shadow:4px 5px 0 rgba(104,84,56,.12)}
body.concept-7 .page-title{min-height:132px;padding:20px 16px 22px;border:1px solid #d2c3aa;border-radius:1px;box-shadow:4px 5px 0 rgba(104,84,56,.08);transform:rotate(-.4deg)}
body.concept-7 .page-title::before{display:block;content:"PAPER MENU";top:12px;right:13px;color:#b09b7a;font:8px "Courier New",monospace;transform:rotate(3deg)}
body.concept-7 .page-title::after{display:block;right:12px;bottom:-11px;width:32px;height:32px;border:0;border-radius:0;background:url("assets/cafe-plant-sticker.png") center/contain no-repeat;opacity:.38}
body.concept-7 .view:not(.focus-view){background-image:repeating-linear-gradient(0deg,rgba(126,103,74,.022) 0,rgba(126,103,74,.022) 1px,transparent 1px,transparent 5px),linear-gradient(#faf8f2,#f0ece2);background-size:auto}
body.concept-7 .cafe-plant{opacity:.42;filter:saturate(.52) sepia(.08)}

@media(max-width:420px){
  body.concept-7 main{padding-left:18px;padding-right:18px}
  body.concept-7 #today-view::before{right:-18px;left:-18px}
  body.concept-7 .companion-band{margin-left:5px;margin-right:9px;height:248px}
  body.concept-7 .progress-panel{margin-right:18px}
  body.concept-7 .next-task{margin-left:16px;margin-right:5px}
  body.concept-7 .task-item:nth-child(1){margin-right:9px}
  body.concept-7 .task-item:nth-child(2){margin-left:7px}
  body.concept-7 .task-item:nth-child(4){margin-left:10px}
}

/* 08: notebook. The app becomes a bound study notebook with a red margin,
   ruled pages, punched holes, taped-in companion photo, and tab-like nav. */
body.concept-8:not(.focus-mode){
  background:#d8d1c4;
  background-image:linear-gradient(135deg,rgba(255,255,255,.34),transparent 38%),linear-gradient(315deg,rgba(117,95,69,.12),transparent 45%);
}
body.concept-8:not(.focus-mode) .app-shell{
  background:#fffef8;
  border-left:18px solid #e5dac9;
  border-radius:4px;
  box-shadow:0 24px 62px rgba(76,64,49,.20),inset 0 0 0 1px rgba(208,197,181,.62);
}
body.concept-8:not(.focus-mode) .app-shell::before{
  content:"";
  position:absolute;
  z-index:12;
  top:10px;
  bottom:10px;
  left:4px;
  width:10px;
  background:radial-gradient(circle at 50% 6px,#b9aa95 0 3px,transparent 3.6px) 0 0/10px 34px repeat-y;
  opacity:.76;
  pointer-events:none;
}
body.concept-8 main{padding:0 20px 116px 28px}
body.concept-8 .view:not(.focus-view){
  background-image:
    linear-gradient(90deg,transparent 0 42px,rgba(211,134,136,.34) 42px 43px,transparent 43px),
    repeating-linear-gradient(0deg,transparent 0 30px,rgba(137,169,181,.22) 30px 31px);
  background-size:auto;
  background-position:0 0;
}
body.concept-8 #today-view{padding-top:18px}
body.concept-8 .topbar{margin:0 0 18px;padding:0 0 0 2px;align-items:center}
body.concept-8 .topbar h1{color:#384a51;font-family:var(--hand);font-size:28px}
body.concept-8 .topbar::after{content:"STUDY NOTES  /  07";margin-left:auto;color:#7d9ba5;font:9px "Courier New",monospace;letter-spacing:.2px}
body.concept-8 .icon-button{border:1px solid #cad9dc;border-radius:3px;color:#5f7a83;background:#f9fcfb;box-shadow:2px 2px 0 rgba(87,115,122,.10)}
body.concept-8 .companion-band{
  height:250px;
  margin:0 12px 0 5px;
  border:8px solid #fffef8;
  border-radius:2px;
  background:#e8e8df;
  box-shadow:3px 5px 0 rgba(75,101,108,.13),0 10px 20px rgba(75,101,108,.11);
  transform:rotate(-.8deg);
}
body.concept-8 .companion-band::before{background:linear-gradient(to bottom,rgba(255,255,255,.08),transparent 43%,rgba(45,62,66,.18))}
body.concept-8 .companion-copy{padding:12px 13px}
body.concept-8 .status-pill{border:1px solid #cad9dc;border-radius:2px;color:#607b84;background:#fbfdfb;box-shadow:2px 2px 0 rgba(87,115,122,.08)}
body.concept-8 .speech{max-width:79%;margin-bottom:10px;padding:10px 12px;border:1px solid #b8ced2;border-radius:2px;color:#4d6871;background:#fbfdfb;box-shadow:3px 3px 0 rgba(87,115,122,.10);transform:rotate(.7deg)}
body.concept-8 .progress-panel,
body.concept-8 .next-task,
body.concept-8 .task-item,
body.concept-8 .page-title,
body.concept-8 .week-strip,
body.concept-8 .chart-panel,
body.concept-8 .subject-stats,
body.concept-8 .profile-card,
body.concept-8 .setting-list,
body.concept-8 .class-block,
body.concept-8 .exam-card,
body.concept-8 .stat-hero,
body.concept-8 .mood-card{
  background-color:rgba(255,254,248,.91);
  background-image:repeating-linear-gradient(0deg,transparent 0 29px,rgba(137,169,181,.12) 29px 30px);
}
body.concept-8 .progress-panel{margin:-22px 24px 22px 2px;padding:13px 14px;border:1px solid #b8ced2;border-radius:2px;box-shadow:3px 4px 0 rgba(87,115,122,.10);transform:rotate(.5deg)}
body.concept-8 .progress-panel::before{display:none}
body.concept-8 .progress-panel::after{content:"note 07";top:9px;right:11px;width:auto;border:0;color:#87a3ab;font:8px "Courier New",monospace;transform:rotate(-2deg)}
body.concept-8 .progress-ring{width:50px;height:50px;border-color:#7ea3a4;border-left-color:#dfe9e8;background:#fbfdfb;box-shadow:inset 0 0 0 3px rgba(126,163,164,.12)}
body.concept-8 .section-head{margin:22px 5px 9px 1px;align-items:flex-end}
body.concept-8 .section-head h2{color:#384a51;font-size:20px}
body.concept-8 .panel-label{color:#82a0aa}
body.concept-8 .time-chip,body.concept-8 .filter-button{border:1px solid #c3d6d9;border-radius:2px;color:#65818a;background:#fbfdfb;box-shadow:2px 2px 0 rgba(87,115,122,.06)}
body.concept-8 .next-task{min-height:72px;margin:0 9px 0 24px;border:1px solid #b8ced2;border-radius:2px;box-shadow:3px 4px 0 rgba(87,115,122,.10);transform:rotate(-.5deg)}
body.concept-8 .next-task::before{display:none}
body.concept-8 .next-task::after{content:"";position:absolute;right:9px;bottom:7px;width:36px;height:47px;background:url("assets/focus-painted-coffee-shell.png") center/contain no-repeat;opacity:.27;transform:rotate(4deg);pointer-events:none}
body.concept-8 .start-button{border:1px solid #55777e;border-radius:2px;background:#55777e;box-shadow:2px 3px 0 rgba(87,115,122,.13)}
body.concept-8 .task-list{display:grid;gap:12px;overflow:visible;margin:0 1px;border:0;border-radius:0;background:transparent;box-shadow:none}
body.concept-8 .task-list::before,body.concept-8 .task-list::after{display:none}
body.concept-8 .task-item{min-height:63px;padding:11px 12px;border:1px solid #b8ced2;border-radius:2px;box-shadow:3px 4px 0 rgba(87,115,122,.08)}
body.concept-8 .task-item:nth-child(1){margin-right:18px;transform:rotate(-.5deg)}
body.concept-8 .task-item:nth-child(2){margin-left:11px;transform:rotate(.7deg)}
body.concept-8 .task-item:nth-child(3){margin-right:8px;transform:rotate(-.2deg)}
body.concept-8 .task-item:nth-child(4){margin-left:17px;transform:rotate(.8deg)}
body.concept-8 .task-item.done{opacity:.58}
body.concept-8 .check{border-color:#9dbabe;border-radius:2px;background:#fbfdfb;box-shadow:none}
body.concept-8 .task-item.done .check{border-color:#7ea3a4;background:#7ea3a4}
body.concept-8 .subject-badge,body.concept-8 .subject-badge.blue,body.concept-8 .subject-badge.green,body.concept-8 .subject-badge.coral{border:1px solid #b8ced2;border-radius:2px;color:#65818a;background:#e7f0ef;box-shadow:none}
body.concept-8 .task-menu{color:#83a2aa}
body.concept-8 .bottom-nav{height:62px;padding:7px 10px;border:1px solid #b8ced2;border-radius:3px 3px 0 0;background:#fbfdfb;box-shadow:0 -4px 0 rgba(87,115,122,.06),0 8px 17px rgba(87,115,122,.10)}
body.concept-8 .bottom-nav button{color:#89a1a8}
body.concept-8 .bottom-nav button.active{color:#55777e}
body.concept-8 .bottom-nav button.active:after{background:#84a6a5}
body.concept-8 .fab{border-color:#a9c3c5;border-radius:3px;color:#fbfdfb;background:#55777e;box-shadow:3px 4px 0 rgba(87,115,122,.12)}
body.concept-8 .page-title{min-height:128px;padding:19px 14px 21px;border:1px solid #b8ced2;border-radius:2px;box-shadow:3px 4px 0 rgba(87,115,122,.08);transform:rotate(-.4deg)}
body.concept-8 .page-title::before{display:block;content:"NOTEBOOK / WEEK";top:10px;right:12px;color:#87a3ab;font:8px "Courier New",monospace;transform:rotate(3deg)}
body.concept-8 .page-title::after{display:block;right:10px;bottom:-10px;width:30px;height:30px;border:0;border-radius:0;background:url("assets/cafe-plant-sticker.png") center/contain no-repeat;opacity:.35}
body.concept-8 .cafe-plant{opacity:.38;filter:saturate(.56)}

@media(max-width:420px){
  body.concept-8 main{padding-left:18px;padding-right:18px}
  body.concept-8 .app-shell{border-left-width:15px}
  body.concept-8 .app-shell::before{left:3px;width:8px;background-size:8px 30px}
  body.concept-8 .view:not(.focus-view){background-image:linear-gradient(90deg,transparent 0 36px,rgba(211,134,136,.34) 36px 37px,transparent 37px),repeating-linear-gradient(0deg,transparent 0 30px,rgba(137,169,181,.22) 30px 31px)}
  body.concept-8 .companion-band{margin-left:4px;margin-right:8px;height:240px}
  body.concept-8 .progress-panel{margin-right:16px}
  body.concept-8 .next-task{margin-left:14px;margin-right:4px}
  body.concept-8 .task-item:nth-child(1){margin-right:8px}
  body.concept-8 .task-item:nth-child(2){margin-left:6px}
  body.concept-8 .task-item:nth-child(4){margin-left:9px}
}

/* Notebook cleanup: one page surface, no surrounding scene or stacked depth. */
body.concept-8:not(.focus-mode){
  background:#fffef8;
  background-image:none;
}
body.concept-8:not(.focus-mode) .app-shell{
  background:#fffef8;
  box-shadow:none;
}
body.concept-8 #today-view::before{display:none}
body.concept-8 .companion-band{box-shadow:2px 3px 0 rgba(75,101,108,.10);}
body.concept-8 .progress-panel,
body.concept-8 .next-task,
body.concept-8 .task-item,
body.concept-8 .page-title,
body.concept-8 .week-strip,
body.concept-8 .chart-panel,
body.concept-8 .subject-stats,
body.concept-8 .profile-card,
body.concept-8 .setting-list,
body.concept-8 .class-block,
body.concept-8 .exam-card,
body.concept-8 .stat-hero,
body.concept-8 .mood-card{
  box-shadow:none;
}
body.concept-8 .progress-panel{border-color:#c8d9dc}
body.concept-8 .next-task{border-left:0;border-right:0;border-radius:0;transform:none;background-color:transparent}
body.concept-8 .task-list{gap:0}
body.concept-8 .task-item,
body.concept-8 .task-item:nth-child(1),
body.concept-8 .task-item:nth-child(2),
body.concept-8 .task-item:nth-child(3),
body.concept-8 .task-item:nth-child(4){
  margin-left:0;
  margin-right:0;
  border-right:0;
  border-left:0;
  border-radius:0;
  transform:none;
}
body.concept-8 .task-item{border-bottom-color:#c8d9dc;background-color:transparent}
body.concept-8 .bottom-nav{box-shadow:none;border-left:0;border-right:0;border-bottom:0;border-radius:0}
body.concept-8:not(.focus-mode) .app-shell{border-left-color:#e4eef0}
body.concept-8 .next-task::after,
body.concept-8 .exam-card::before,
body.concept-8 .stat-hero::after{display:none}
body.concept-8 .bottom-nav{background:#fffef8}

/* 09: non-flat cafe room. The photograph becomes the environment and the
   learning UI floats above it as soft glass, with fewer but deeper surfaces. */
body.concept-9:not(.focus-mode){
  background:#d9d4cc url("assets/cafe-space-still-life.png") center top/cover fixed no-repeat;
  color:#28332f;
}
body.concept-9:not(.focus-mode)::before{
  content:"";
  position:fixed;
  z-index:0;
  inset:0;
  background:linear-gradient(180deg,rgba(250,250,247,.16),rgba(33,48,40,.14));
  pointer-events:none;
}
body.concept-9:not(.focus-mode) .app-shell{
  z-index:1;
  background:transparent;
  box-shadow:none;
}
body.concept-9 main{padding:16px 18px 124px}
body.concept-9 .view:not(.focus-view){background:transparent;background-image:none}
body.concept-9 .topbar{
  margin:0 0 16px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.62);
  border-radius:18px;
  background:rgba(255,255,255,.62);
  box-shadow:0 12px 28px rgba(49,67,56,.16),inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter:blur(20px) saturate(1.05);
}
body.concept-9 .topbar h1{color:#26352e;font-size:25px}
body.concept-9 .topbar::after{content:"WINDOW SEAT  ·  09:40";margin-left:auto;color:#54725e;font:9px "Courier New",monospace;letter-spacing:.2px}
body.concept-9 .icon-button{width:38px;height:38px;border:1px solid rgba(255,255,255,.8);border-radius:50%;color:#35503f;background:rgba(255,255,255,.7);box-shadow:0 7px 16px rgba(49,67,56,.14)}
body.concept-9 .companion-band{
  height:318px;
  margin:0;
  border:1px solid rgba(255,255,255,.72);
  border-radius:22px;
  background:#dfe8e1;
  box-shadow:0 22px 42px rgba(44,64,51,.24),inset 0 1px 0 rgba(255,255,255,.9);
}
body.concept-9 .companion-band::before{background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 45%,rgba(33,48,40,.32))}
body.concept-9 .companion-band::after{color:rgba(255,255,255,.9);text-shadow:0 2px 5px rgba(32,52,40,.25)}
body.concept-9 .companion-copy{padding:16px}
body.concept-9 .status-pill{border:1px solid rgba(255,255,255,.68);border-radius:999px;color:#385342;background:rgba(255,255,255,.62);box-shadow:0 6px 14px rgba(45,68,53,.12);backdrop-filter:blur(14px)}
body.concept-9 .speech{max-width:78%;margin-bottom:14px;padding:12px 14px;border:1px solid rgba(255,255,255,.72);border-radius:14px;color:#31453a;background:rgba(255,255,255,.74);box-shadow:0 12px 26px rgba(35,56,43,.18);backdrop-filter:blur(16px)}
body.concept-9 .progress-panel{
  margin:-25px 12px 22px;
  padding:15px;
  border:1px solid rgba(255,255,255,.76);
  border-radius:18px;
  background:rgba(255,255,255,.76);
  box-shadow:0 18px 34px rgba(43,64,51,.18),inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter:blur(22px) saturate(1.08);
}
body.concept-9 .progress-panel::before,body.concept-9 .progress-panel::after{display:none}
body.concept-9 .progress-ring{box-shadow:0 6px 14px rgba(46,76,57,.14),inset 0 0 0 3px rgba(255,255,255,.54)}
body.concept-9 .section-head{margin:27px 2px 11px;padding:0 3px;align-items:flex-end}
body.concept-9 .section-head h2{color:#20352b;font-size:20px;text-shadow:0 1px 0 rgba(255,255,255,.85)}
body.concept-9 .panel-label{color:#5e7e68}
body.concept-9 .time-chip,body.concept-9 .filter-button{border:1px solid rgba(255,255,255,.7);border-radius:999px;color:#47715a;background:rgba(255,255,255,.68);box-shadow:0 7px 14px rgba(45,68,53,.11);backdrop-filter:blur(15px)}
body.concept-9 .next-task{
  min-height:78px;
  margin:0 8px;
  padding:14px;
  border:1px solid rgba(255,255,255,.74);
  border-radius:18px;
  background:rgba(255,255,255,.72);
  box-shadow:0 14px 27px rgba(44,67,52,.16),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(18px);
}
body.concept-9 .next-task::before{display:none}
body.concept-9 .next-task::after{content:"";position:absolute;right:13px;bottom:7px;width:42px;height:54px;background:url("assets/focus-painted-coffee-shell.png") center/contain no-repeat;opacity:.38;filter:saturate(.72);pointer-events:none}
body.concept-9 .subject-badge,body.concept-9 .subject-badge.blue,body.concept-9 .subject-badge.green,body.concept-9 .subject-badge.coral{border:1px solid rgba(255,255,255,.74);border-radius:50%;color:#47715a;background:rgba(218,235,221,.7);box-shadow:0 5px 12px rgba(44,67,52,.10),inset 0 1px 0 rgba(255,255,255,.88)}
body.concept-9 .start-button{border:1px solid rgba(255,255,255,.32);border-radius:999px;background:#557c62;box-shadow:0 8px 17px rgba(43,77,53,.23),inset 0 1px 0 rgba(255,255,255,.28)}
body.concept-9 .task-list{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.72);
  border-radius:18px;
  background:rgba(255,255,255,.58);
  box-shadow:0 14px 28px rgba(44,67,52,.14),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(19px) saturate(1.06);
}
body.concept-9 .task-list::before,body.concept-9 .task-list::after{display:none}
body.concept-9 .task-item,
body.concept-9 .task-item:nth-child(1),body.concept-9 .task-item:nth-child(2),body.concept-9 .task-item:nth-child(3),body.concept-9 .task-item:nth-child(4){
  min-height:62px;
  margin:0;
  padding:12px 14px;
  border:0;
  border-bottom:1px solid rgba(105,139,113,.18);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:none;
}
body.concept-9 .task-item:last-child{border-bottom:0}
body.concept-9 .check{border-color:rgba(65,103,77,.38);background:rgba(255,255,255,.48);box-shadow:inset 0 1px 1px rgba(255,255,255,.85)}
body.concept-9 .task-item.done .check{border-color:#6f9878;background:#6f9878}
body.concept-9 .task-menu{color:#668570}
body.concept-9 .page-title{
  min-height:164px;
  padding:20px 18px 24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.72);
  border-radius:22px;
  background-image:linear-gradient(rgba(255,255,255,.32),rgba(255,255,255,.72)),url("assets/cafe-space-still-life.png");
  background-position:center 67%;
  background-size:cover;
  box-shadow:0 18px 34px rgba(44,67,52,.18),inset 0 1px 0 rgba(255,255,255,.92);
}
body.concept-9 .page-title::before{display:none}
body.concept-9 .page-title::after{display:block;right:15px;bottom:-8px;width:46px;height:46px;border:0;border-radius:0;background:url("assets/cafe-plant-sticker.png") center/contain no-repeat;opacity:.5}
body.concept-9 .page-title h1,body.concept-9 .page-title p{color:#294134;text-shadow:0 1px 0 rgba(255,255,255,.88)}
body.concept-9 .week-strip,body.concept-9 .chart-panel,body.concept-9 .subject-stats,body.concept-9 .profile-card,body.concept-9 .setting-list{
  border:1px solid rgba(255,255,255,.74);
  border-radius:18px;
  background:rgba(255,255,255,.67);
  box-shadow:0 14px 28px rgba(44,67,52,.14),inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
}
body.concept-9 .class-block{border:1px solid rgba(255,255,255,.72);border-left:4px solid #7ba087;border-radius:14px;background:rgba(255,255,255,.62);box-shadow:0 10px 21px rgba(44,67,52,.12);backdrop-filter:blur(15px)}
body.concept-9 .exam-card,body.concept-9 .stat-hero{border:1px solid rgba(255,255,255,.74);border-radius:18px;background:rgba(227,239,228,.72);box-shadow:0 14px 28px rgba(44,67,52,.13);backdrop-filter:blur(18px)}
body.concept-9 .mood-grid{border:1px solid rgba(255,255,255,.7);border-radius:18px;background:rgba(235,243,236,.62);box-shadow:0 12px 22px rgba(44,67,52,.10);backdrop-filter:blur(16px)}
body.concept-9 .mood-card{border:1px solid rgba(255,255,255,.72);border-radius:14px;background:rgba(255,255,255,.62);box-shadow:0 8px 17px rgba(44,67,52,.10);backdrop-filter:blur(12px)}
body.concept-9 .bottom-nav{height:66px;padding:7px 10px;border:1px solid rgba(255,255,255,.76);border-radius:22px;background:rgba(255,255,255,.78);box-shadow:0 13px 28px rgba(40,62,48,.20),inset 0 1px 0 rgba(255,255,255,.94);backdrop-filter:blur(22px)}
body.concept-9 .bottom-nav button{color:#73917b}
body.concept-9 .bottom-nav button.active{color:#3f6c4d}
body.concept-9 .bottom-nav button.active:after{background:#7fa68a}
body.concept-9 .fab{border:1px solid rgba(255,255,255,.42);border-radius:50%;background:#557c62;box-shadow:0 12px 23px rgba(43,77,53,.28),inset 0 1px 0 rgba(255,255,255,.3)}
body.concept-9 .cafe-plant{opacity:.42;filter:saturate(.72)}

@media(max-width:420px){
  body.concept-9 main{padding-left:14px;padding-right:14px}
  body.concept-9 .topbar{padding:10px 11px;border-radius:16px}
  body.concept-9 .topbar::after{font-size:8px}
  body.concept-9 .companion-band{height:288px;border-radius:18px}
  body.concept-9 .progress-panel{margin-left:6px;margin-right:6px;border-radius:16px}
  body.concept-9 .next-task{margin-left:4px;margin-right:4px;border-radius:15px}
  body.concept-9 .task-list{border-radius:15px}
  body.concept-9 .page-title{min-height:150px;border-radius:18px}
  body.concept-9 .bottom-nav{border-radius:18px}
}

/* Notebook flattening: keep only one pasted photo; all study content lives
   directly on the ruled page as sections and rows instead of nested cards. */
body.concept-8 .progress-panel,
body.concept-8 .next-task,
body.concept-8 .task-item,
body.concept-8 .week-strip,
body.concept-8 .chart-panel,
body.concept-8 .subject-stats,
body.concept-8 .profile-card,
body.concept-8 .setting-list,
body.concept-8 .class-block,
body.concept-8 .exam-card,
body.concept-8 .stat-hero,
body.concept-8 .mood-card{
  border-radius:0;
  border-left:0;
  border-right:0;
  box-shadow:none;
  transform:none;
  background-color:transparent;
  background-image:none;
}
body.concept-8 .progress-panel{
  margin:4px 0 22px;
  padding:14px 0;
  border-top:1px solid #c8d9dc;
  border-bottom:1px solid #c8d9dc;
}
body.concept-8 .next-task{
  margin:0;
  padding:13px 0;
  border-top:1px solid #c8d9dc;
  border-bottom:1px solid #c8d9dc;
}
body.concept-8 .task-list{
  gap:0;
  margin:0;
  border-top:1px solid #c8d9dc;
  border-bottom:1px solid #c8d9dc;
}
body.concept-8 .task-item,
body.concept-8 .task-item:nth-child(1),
body.concept-8 .task-item:nth-child(2),
body.concept-8 .task-item:nth-child(3),
body.concept-8 .task-item:nth-child(4){
  min-height:58px;
  margin:0;
  padding:10px 0;
  border-top:0;
  border-bottom:1px solid rgba(137,169,181,.28);
}
body.concept-8 .task-item:last-child{border-bottom:0}
body.concept-8 .week-strip,
body.concept-8 .chart-panel,
body.concept-8 .subject-stats,
body.concept-8 .profile-card,
body.concept-8 .setting-list{
  border-top:1px solid #c8d9dc;
  border-bottom:1px solid #c8d9dc;
}
body.concept-8 .class-block{border-left:3px solid #8aa8aa;border-bottom:1px solid rgba(137,169,181,.28)}
body.concept-8 .exam-card,
body.concept-8 .stat-hero{border-top:1px solid #c8d9dc;border-bottom:1px solid #c8d9dc}
body.concept-8 .mood-grid{border-top:1px solid #c8d9dc;border-bottom:1px solid #c8d9dc;background:transparent}
body.concept-8 .mood-card{border-bottom:1px solid rgba(137,169,181,.28)}
body.concept-8 .mood-card:last-child{border-bottom:0}

/* 10: tactile cafe counter. The room remains a quiet setting, while the UI
   becomes a collection of physical menu boards, paper slips, trays and tabs. */
body.concept-10:not(.focus-mode){
  --counter:#8f6f59;
  --counter-dark:#5a4030;
  --paper:#fffaf2;
  --paper-shadow:#c9b39d;
  --sage-10:#6f866d;
  --clay-10:#b87958;
  background:#cfc3b6 url("assets/cafe-space-still-life.png") center/cover fixed no-repeat;
  color:#403128;
}
body.concept-10:not(.focus-mode)::before{
  content:"";
  position:fixed;
  z-index:0;
  inset:0;
  background:linear-gradient(180deg,rgba(248,241,232,.45),rgba(109,80,59,.18));
  pointer-events:none;
}
body.concept-10:not(.focus-mode) .app-shell{
  z-index:1;
  background:linear-gradient(180deg,#f9f2e9 0%,#f0e5d8 100%);
  border:1px solid rgba(91,62,43,.2);
  box-shadow:0 2px 0 rgba(255,255,255,.85) inset,0 5px 0 rgba(95,67,48,.25),0 28px 68px rgba(61,42,29,.32);
}
body.concept-10 main{padding:17px 18px 126px}
body.concept-10 .view:not(.focus-view){background:transparent;background-image:none}

body.concept-10 .topbar{
  position:relative;
  margin:0 -2px 21px;
  padding:13px 15px 15px;
  border:1px solid #c2a991;
  border-top:5px solid var(--counter);
  border-radius:5px;
  background:linear-gradient(180deg,#fffaf3,#efe0d0);
  box-shadow:0 3px 0 #b1957c,0 15px 25px rgba(82,54,37,.18),inset 0 2px 0 rgba(255,255,255,.95);
}
body.concept-10 .topbar::before{
  content:"";
  position:absolute;
  right:16px;
  bottom:7px;
  left:16px;
  height:1px;
  background:#d5bfaa;
}
body.concept-10 .topbar::after{
  content:"CAFE COUNTER  /  09:40";
  margin-left:auto;
  color:#8e705a;
  font:9px "SF Mono","Menlo",monospace;
  letter-spacing:0;
}
body.concept-10 .topbar h1{color:#493226;font-size:25px}
body.concept-10 .icon-button{
  width:38px;
  height:38px;
  border:1px solid #c8ad95;
  border-radius:50%;
  color:#5b4030;
  background:radial-gradient(circle at 35% 30%,#fffdf7,#e8d4bf);
  box-shadow:0 3px 0 #b79a82,0 8px 14px rgba(83,53,35,.18),inset 0 2px 2px rgba(255,255,255,.96);
}

body.concept-10 .companion-band{
  height:318px;
  margin:0 4px;
  border:8px solid #fbf4eb;
  border-bottom-width:11px;
  border-radius:4px;
  background:#e7d7c7;
  box-shadow:0 4px 0 #b69b82,0 21px 34px rgba(77,51,35,.25),inset 0 0 0 1px #c8ab90;
}
body.concept-10 .companion-band::before{background:linear-gradient(180deg,rgba(72,48,33,.02),transparent 42%,rgba(56,38,28,.31))}
body.concept-10 .companion-band::after{color:#fff8ef;text-shadow:0 2px 5px rgba(52,34,23,.35)}
body.concept-10 .companion-copy{padding:12px 12px 17px}
body.concept-10 .status-pill{
  border:1px solid #c8aa8e;
  border-radius:3px;
  color:#634535;
  background:linear-gradient(#fffaf3,#ebd8c4);
  box-shadow:0 2px 0 #b99b82,0 5px 10px rgba(73,46,30,.16),inset 0 1px 0 white;
  backdrop-filter:none;
}
body.concept-10 .speech{
  position:relative;
  max-width:77%;
  margin-bottom:14px;
  padding:12px 14px;
  border:1px solid #c8aa90;
  border-radius:3px;
  color:#4b3427;
  background:linear-gradient(180deg,#fffdf8,#f3e4d4);
  box-shadow:0 4px 0 #bda38b,0 13px 22px rgba(71,46,31,.2),inset 0 2px 0 white;
  backdrop-filter:none;
  transform:rotate(-.6deg);
}
body.concept-10 .speech::after{
  content:"";
  position:absolute;
  right:14px;
  bottom:-8px;
  width:15px;
  height:15px;
  border-right:1px solid #c8aa90;
  border-bottom:1px solid #c8aa90;
  background:#f3e4d4;
  transform:skew(-22deg) rotate(45deg);
}

body.concept-10 .progress-panel{
  margin:-23px 16px 26px;
  padding:15px;
  border:1px solid #c8ad95;
  border-radius:11px;
  background:linear-gradient(180deg,#fffaf3,#ead9c7);
  box-shadow:0 4px 0 #b79b83,0 18px 28px rgba(73,48,32,.2),inset 0 2px 0 white,inset 0 -8px 15px rgba(141,104,76,.1);
  transform:rotate(.45deg);
}
body.concept-10 .progress-panel::before{
  top:9px;
  bottom:9px;
  left:0;
  width:4px;
  background:var(--sage-10);
}
body.concept-10 .progress-panel::after{
  content:"DAILY TAB";
  position:absolute;
  right:14px;
  bottom:8px;
  color:#a3846d;
  font:8px "SF Mono","Menlo",monospace;
}
body.concept-10 .progress-ring{
  box-shadow:0 3px 0 #b59a82,0 7px 12px rgba(69,48,34,.14),inset 0 0 0 3px rgba(255,255,255,.62);
}
body.concept-10 .section-head{margin:27px 2px 11px}
body.concept-10 .section-head h2{color:#493226;font-size:20px}
body.concept-10 .panel-label{color:#91725c}
body.concept-10 .time-chip,
body.concept-10 .filter-button{
  border:1px solid #cbb099;
  border-radius:4px;
  color:#77563f;
  background:linear-gradient(#fffaf3,#ead9c7);
  box-shadow:0 2px 0 #b69b81,0 5px 9px rgba(81,53,36,.12),inset 0 1px 0 white;
}

body.concept-10 .next-task{
  position:relative;
  min-height:80px;
  margin:0 7px;
  padding:14px 15px 14px 18px;
  border:1px solid #c3a58c;
  border-radius:5px 11px 5px 5px;
  background:linear-gradient(180deg,#fffaf2,#f0dfce);
  box-shadow:0 4px 0 #b29277,0 16px 26px rgba(76,49,32,.18),inset 0 2px 0 white;
  transform:rotate(-.35deg);
}
body.concept-10 .next-task::before{
  top:0;
  bottom:0;
  left:0;
  width:5px;
  background:var(--clay-10);
  box-shadow:1px 0 0 rgba(255,255,255,.45) inset;
}
body.concept-10 .next-task::after{right:13px;bottom:5px;opacity:.28;filter:saturate(.7) sepia(.1)}
body.concept-10 .subject-badge,
body.concept-10 .subject-badge.blue,
body.concept-10 .subject-badge.green,
body.concept-10 .subject-badge.coral{
  border:1px solid #b99d85;
  border-radius:50%;
  color:#6b4b36;
  background:radial-gradient(circle at 35% 28%,#fff9ef,#e6cfba);
  box-shadow:0 3px 0 #b4977e,0 6px 10px rgba(70,45,30,.14),inset 0 2px 2px white;
}
body.concept-10 .start-button,
body.concept-10 .primary-action{
  border:1px solid #4f3323;
  border-radius:4px;
  background:linear-gradient(180deg,#76513b,#4d3022);
  box-shadow:0 3px 0 #392319,0 8px 13px rgba(62,38,25,.22),inset 0 1px 0 rgba(255,255,255,.25);
}
body.concept-10 .start-button:active,
body.concept-10 .primary-action:active{transform:translateY(2px);box-shadow:0 1px 0 #392319,inset 0 2px 4px rgba(29,16,10,.22)}

body.concept-10 .task-list{
  position:relative;
  overflow:hidden;
  padding-top:9px;
  border:1px solid #c9af98;
  border-radius:4px;
  background:#fffaf3;
  box-shadow:0 4px 0 #b99b83,0 17px 28px rgba(75,49,33,.17),inset 0 2px 0 white;
}
body.concept-10 .task-list::before{
  content:"";
  position:absolute;
  z-index:2;
  top:0;
  right:0;
  left:0;
  height:9px;
  background:radial-gradient(circle at 7px 4px,#cdb39b 2px,transparent 2.5px) 0 0/18px 9px repeat-x;
  opacity:.62;
}
body.concept-10 .task-item,
body.concept-10 .task-item:nth-child(1),
body.concept-10 .task-item:nth-child(2),
body.concept-10 .task-item:nth-child(3),
body.concept-10 .task-item:nth-child(4){
  min-height:65px;
  margin:0;
  padding:12px 14px;
  border:0;
  border-bottom:1px dashed #decab6;
  border-radius:0;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(247,236,224,.34));
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.82);
  transform:none;
}
body.concept-10 .task-item:nth-child(odd){background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(244,230,215,.3))}
body.concept-10 .task-item:last-child{border-bottom:0}
body.concept-10 .task-item:hover{transform:none;box-shadow:inset 0 -1px 0 rgba(255,255,255,.82),inset 4px 0 0 rgba(111,134,109,.4)}
body.concept-10 .check{
  border-color:#b89b82;
  background:radial-gradient(circle at 35% 30%,#fffaf2,#ead7c3);
  box-shadow:0 2px 0 #b5967d,inset 0 2px 2px white;
}
body.concept-10 .task-item.done .check{border-color:#6f866d;background:#6f866d;box-shadow:0 2px 0 #52684f,inset 0 1px 0 rgba(255,255,255,.3)}
body.concept-10 .task-menu{color:#987965}

body.concept-10 .page-title{
  position:relative;
  min-height:155px;
  padding:22px 18px 24px;
  overflow:hidden;
  border:1px solid #c3a78e;
  border-top:7px solid var(--counter);
  border-radius:4px;
  background:repeating-linear-gradient(0deg,rgba(134,102,76,.035) 0,rgba(134,102,76,.035) 1px,transparent 1px,transparent 6px),linear-gradient(180deg,#fffaf3,#ecddcd);
  box-shadow:0 4px 0 #b4967d,0 17px 28px rgba(76,50,33,.18),inset 0 2px 0 white;
  transform:rotate(-.35deg);
}
body.concept-10 .page-title::before{
  display:block;
  content:"CAFE BOARD  /  WEEKLY";
  position:absolute;
  top:12px;
  right:14px;
  color:#a18169;
  font:8px "SF Mono","Menlo",monospace;
  letter-spacing:0;
  transform:rotate(2deg);
}
body.concept-10 .page-title::after{display:block;right:12px;bottom:-8px;width:48px;height:48px;border:0;border-radius:0;background:url("assets/cafe-plant-sticker.png") center/contain no-repeat;opacity:.56}
body.concept-10 .page-title h1,body.concept-10 .page-title p{color:#4a3225;text-shadow:0 1px 0 white}
body.concept-10 .week-strip{
  padding:10px;
  border:1px solid #b89a80;
  border-radius:4px;
  background:linear-gradient(180deg,#d9c2ad,#bfa087);
  box-shadow:0 4px 0 #9f8067,0 13px 21px rgba(75,49,33,.16),inset 0 2px 0 rgba(255,255,255,.55);
}
body.concept-10 .week-day{
  padding:8px 0;
  border:1px solid rgba(126,91,65,.18);
  border-radius:3px;
  color:#705541;
  background:linear-gradient(#fffaf2,#eddccb);
  box-shadow:0 2px 0 #b2947c,inset 0 1px 0 white;
}
body.concept-10 .week-day strong{color:#4d3325}
body.concept-10 .week-day.active{color:white;background:linear-gradient(#7f987b,#5e765d);box-shadow:0 2px 0 #4a6149,inset 0 1px 0 rgba(255,255,255,.38);transform:translateY(-2px)}
body.concept-10 .week-day.active strong{color:white}
body.concept-10 .class-block{
  position:relative;
  border:1px solid #c4a88f;
  border-left:5px solid var(--counter);
  border-radius:3px 10px 3px 3px;
  background:linear-gradient(180deg,#fffaf2,#f1e0cf);
  box-shadow:0 4px 0 #b4967d,0 11px 18px rgba(75,49,33,.15),inset 0 2px 0 white;
}
body.concept-10 .class-block::before{
  content:"";
  position:absolute;
  top:10px;
  right:11px;
  width:8px;
  height:8px;
  border:1px solid #b4967d;
  border-radius:50%;
  background:#ead5bf;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.8),0 2px 0 #b4967d;
}
body.concept-10 .blue-block{border-left-color:#a9785e;background:linear-gradient(180deg,#fff9f1,#eedbc9)}
body.concept-10 .green-block{border-left-color:#71856b;background:linear-gradient(180deg,#f9fbf1,#e4eadc)}
body.concept-10 .coral-block{border-left-color:#b87958;background:linear-gradient(180deg,#fff8f1,#f0ddd4)}
body.concept-10 .exam-card,
body.concept-10 .stat-hero{
  border:1px solid #bd9f85;
  border-radius:11px;
  background:radial-gradient(circle at 70% 15%,rgba(255,255,255,.92),transparent 25%),linear-gradient(180deg,#f7eadc,#e5d0bc);
  box-shadow:0 4px 0 #ae9076,0 14px 23px rgba(75,49,33,.16),inset 0 2px 0 white;
}
body.concept-10 .stat-hero{background:radial-gradient(circle at 72% 18%,rgba(255,255,255,.9),transparent 24%),linear-gradient(180deg,#edf1e6,#d6dfcf)}
body.concept-10 .chart-panel,
body.concept-10 .subject-stats,
body.concept-10 .profile-card,
body.concept-10 .setting-list,
body.concept-10 .mood-card{
  border:1px solid #c6a991;
  border-radius:5px;
  background:linear-gradient(180deg,#fffaf3,#efdfcf);
  box-shadow:0 4px 0 #b79a81,0 13px 22px rgba(76,50,33,.14),inset 0 2px 0 white;
}
body.concept-10 .bar-col i{border-radius:4px 4px 1px 1px;background:linear-gradient(90deg,#c49f82,#a77b5d);box-shadow:0 2px 0 #956c51,inset 1px 0 0 rgba(255,255,255,.45)}
body.concept-10 .bar-col.active i{background:linear-gradient(90deg,#80977d,#5e765d);box-shadow:0 2px 0 #4d654d,inset 1px 0 0 rgba(255,255,255,.45)}
body.concept-10 .profile-card{height:164px;background:linear-gradient(180deg,#f7e7d7,#e8d2bd);transform:rotate(.3deg)}
body.concept-10 .profile-card img{border-right:7px solid #fffaf2;box-shadow:4px 0 0 #c1a38a}
body.concept-10 .mood-grid{gap:14px}
body.concept-10 .mood-card{padding:8px 8px 12px;background:#fffaf3;transform:rotate(-.5deg)}
body.concept-10 .mood-card:nth-child(2){transform:rotate(.6deg)}
body.concept-10 .mood-card:nth-child(3){transform:rotate(.4deg)}
body.concept-10 .mood-card:nth-child(4){transform:rotate(-.7deg)}
body.concept-10 .mood-card img{border-radius:2px;box-shadow:0 2px 0 #cfb49b}
body.concept-10 .mood-card.selected{transform:translateY(-4px) rotate(-.5deg);box-shadow:0 4px 0 #a98a71,0 14px 23px rgba(72,47,31,.18),0 0 0 2px #8a634a}
body.concept-10 .setting-list{overflow:hidden;background:#f6e8d9}
body.concept-10 .setting-list button{border-bottom-color:#d9c1aa;background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(232,209,188,.18))}
body.concept-10 .setting-list button:active{background:#ead5c1;box-shadow:inset 0 3px 7px rgba(83,53,35,.12)}

body.concept-10 .bottom-nav{
  height:70px;
  padding:8px 10px;
  border:1px solid #b69a82;
  border-radius:5px;
  background:linear-gradient(180deg,#fffaf3,#e4d0bd);
  box-shadow:0 4px 0 #a3876d,0 17px 28px rgba(65,42,27,.25),inset 0 2px 0 white;
  backdrop-filter:none;
}
body.concept-10 .bottom-nav::before{
  content:"";
  position:absolute;
  top:4px;
  right:11px;
  left:11px;
  height:1px;
  background:#d7bfaa;
}
body.concept-10 .bottom-nav button{color:#947662;border-radius:3px;transition:transform .15s,background .15s,box-shadow .15s}
body.concept-10 .bottom-nav button.active{color:#4e3426;background:rgba(255,250,243,.72);box-shadow:0 2px 0 #b99b82,inset 0 1px 0 white;transform:translateY(-2px)}
body.concept-10 .bottom-nav button.active:after{background:#b87958}
body.concept-10 .fab{
  border:1px solid #a66f52;
  color:#fffaf2;
  background:radial-gradient(circle at 35% 27%,#9f7558,#5a3826 68%);
  box-shadow:0 4px 0 #41281b,0 14px 22px rgba(65,40,25,.25),inset 0 2px 1px rgba(255,255,255,.25);
}
body.concept-10 dialog{border:1px solid #c6a991;border-radius:5px;background:linear-gradient(180deg,#fffaf3,#efdfcf);box-shadow:0 5px 0 #aa8b72,0 28px 68px rgba(55,34,21,.3);backdrop-filter:none}
body.concept-10 input,body.concept-10 select{border-color:#cbb19a;border-radius:4px;background:#fffaf3;box-shadow:inset 0 3px 6px rgba(84,55,37,.08),0 2px 0 #bda38c}

@media(max-width:420px){
  body.concept-10 main{padding-left:14px;padding-right:14px}
  body.concept-10 .topbar{margin-left:0;margin-right:0;padding:11px 12px;border-radius:4px}
  body.concept-10 .topbar::after{font-size:8px}
  body.concept-10 .companion-band{height:288px;margin-left:3px;margin-right:3px;border-width:6px;border-bottom-width:9px}
  body.concept-10 .progress-panel{margin-left:7px;margin-right:7px;border-radius:9px}
  body.concept-10 .next-task{margin-left:4px;margin-right:4px}
  body.concept-10 .page-title{min-height:146px;border-radius:4px}
  body.concept-10 .bottom-nav{border-radius:4px}
}

/* 11: cafe-specific object language layered on the tactile counter UI. */
body.concept-11:not(.focus-mode){
  --cafe11-ink:#443024;
  --cafe11-cream:#fffaf2;
  --cafe11-wood:#a98265;
  --cafe11-wood-dark:#684735;
  --cafe11-sage:#70866d;
  --cafe11-clay:#b97655;
  background:#c8b9aa url("assets/cafe-space-still-life.png") center/cover fixed no-repeat;
  color:var(--cafe11-ink);
}
body.concept-11:not(.focus-mode)::before{
  background:linear-gradient(180deg,rgba(250,243,235,.42),rgba(91,63,45,.2));
}
body.concept-11:not(.focus-mode) .app-shell{
  background:linear-gradient(180deg,#fbf4eb,#eee1d3 78%,#e3d0bd);
  border-color:rgba(92,59,39,.25);
  box-shadow:0 2px 0 rgba(255,255,255,.9) inset,0 6px 0 rgba(91,61,42,.28),0 30px 70px rgba(57,38,27,.36);
}
body.concept-11 main{padding:17px 18px 126px}
body.concept-11 .view:not(.focus-view){background:transparent;background-image:none}

/* Order slip header */
body.concept-11 .topbar{
  margin:0 -1px 21px;
  padding:13px 15px 15px;
  border:1px solid #c0a189;
  border-top:6px solid var(--cafe11-wood-dark);
  border-radius:4px;
  background:repeating-linear-gradient(0deg,rgba(121,87,61,.035) 0,rgba(121,87,61,.035) 1px,transparent 1px,transparent 6px),linear-gradient(180deg,#fffdf8,#eedfce);
  box-shadow:0 4px 0 #aa8b72,0 16px 25px rgba(72,46,30,.2),inset 0 2px 0 white;
}
body.concept-11 .topbar::after{content:"ORDER 012  /  WINDOW SEAT";color:#8b6b55;font:9px "SF Mono","Menlo",monospace}
body.concept-11 .topbar::before{content:"";position:absolute;right:16px;bottom:7px;left:16px;height:1px;background:#d3bca4}
body.concept-11 .topbar h1{color:var(--cafe11-ink)}
body.concept-11 .icon-button{border-color:#c0a189;background:radial-gradient(circle at 34% 28%,#fffdf8,#e8d3bd);box-shadow:0 3px 0 #ac8d73,0 8px 14px rgba(74,47,31,.18),inset 0 2px 2px white}

/* Framed companion portrait with a table-card speech slip */
body.concept-11 .companion-band{
  height:318px;
  margin:0 4px;
  border:8px solid #fff9f1;
  border-bottom-width:11px;
  border-radius:4px;
  box-shadow:0 4px 0 #b19076,0 22px 35px rgba(72,47,31,.26),inset 0 0 0 1px #c7aa90;
}
body.concept-11 .companion-band::before{background:linear-gradient(180deg,rgba(67,43,29,.02),transparent 40%,rgba(52,35,25,.3))}
body.concept-11 .status-pill{
  border:1px solid #c1a188;
  border-radius:3px;
  color:#654634;
  background:linear-gradient(#fffdf8,#ecd8c3);
  box-shadow:0 2px 0 #ad8d73,0 5px 10px rgba(75,48,31,.18),inset 0 1px 0 white;
}
body.concept-11 .speech{
  border-color:#c1a188;
  border-radius:3px 3px 3px 0;
  background:linear-gradient(180deg,#fffdf8,#f1dfce);
  box-shadow:0 4px 0 #b2947b,0 13px 22px rgba(72,47,31,.21),inset 0 2px 0 white;
  transform:rotate(-.7deg);
}
body.concept-11 .speech::after{border-color:#c1a188;background:#f1dfce}

/* Progress is a stamped loyalty card with a coffee watermark. */
body.concept-11 .progress-panel{
  margin:-23px 16px 26px;
  border:1px solid #c4a78d;
  border-radius:11px;
  background:linear-gradient(180deg,#fffaf1,#e8d6c2);
  box-shadow:0 4px 0 #b29176,0 18px 29px rgba(71,46,30,.2),inset 0 2px 0 white,inset 0 -8px 15px rgba(132,96,68,.1);
  transform:rotate(.45deg);
}
body.concept-11 .progress-panel::before{background:var(--cafe11-sage)}
body.concept-11 .progress-panel::after{
  content:"";
  position:absolute;
  right:13px;
  bottom:4px;
  width:45px;
  height:45px;
  background:url("assets/focus-painted-coffee-shell.png") center/contain no-repeat;
  opacity:.2;
  transform:rotate(-7deg);
}
body.concept-11 .progress-ring{box-shadow:0 3px 0 #b09076,0 7px 12px rgba(68,44,29,.15),inset 0 0 0 3px rgba(255,255,255,.65)}

/* Next task becomes a barista order ticket. */
body.concept-11 .next-task{
  margin:0 7px;
  border:1px solid #c2a48b;
  border-left:5px solid var(--cafe11-clay);
  border-radius:4px 11px 4px 4px;
  background:linear-gradient(180deg,#fffaf2,#efdecc);
  box-shadow:0 4px 0 #ae9076,0 16px 25px rgba(72,47,31,.18),inset 0 2px 0 white;
}
body.concept-11 .next-task::before{display:none}
body.concept-11 .next-task::after{right:13px;bottom:5px;width:43px;height:54px;opacity:.25;filter:saturate(.7) sepia(.12)}
body.concept-11 .subject-badge,
body.concept-11 .subject-badge.blue,
body.concept-11 .subject-badge.green,
body.concept-11 .subject-badge.coral{
  border-color:#b4977e;
  background:radial-gradient(circle at 34% 28%,#fffaf1,#e4cdb6);
  box-shadow:0 3px 0 #ad8f75,0 6px 10px rgba(69,45,29,.15),inset 0 2px 2px white;
}
body.concept-11 .start-button,body.concept-11 .primary-action{background:linear-gradient(180deg,#79533d,#4f3021);box-shadow:0 3px 0 #3c2418,0 8px 13px rgba(62,38,25,.23),inset 0 1px 0 rgba(255,255,255,.25)}

/* The to-do panel is a receipt dispenser with perforated paper and a cup mark. */
body.concept-11 .task-list{
  padding-top:10px;
  border:1px solid #c4a78d;
  border-radius:4px;
  background:#fffaf3;
  box-shadow:0 4px 0 #ae9076,0 18px 28px rgba(72,47,31,.18),inset 0 2px 0 white;
}
body.concept-11 .task-list::before{height:10px;background:radial-gradient(circle at 7px 5px,#c7a991 2px,transparent 2.5px) 0 0/18px 10px repeat-x;opacity:.7}
body.concept-11 .task-list::after{
  content:"";
  position:absolute;
  right:9px;
  bottom:7px;
  width:52px;
  height:57px;
  background:url("assets/focus-painted-coffee-shell.png") center/contain no-repeat;
  opacity:.1;
  pointer-events:none;
}
body.concept-11 .task-item,
body.concept-11 .task-item:nth-child(1),
body.concept-11 .task-item:nth-child(2),
body.concept-11 .task-item:nth-child(3),
body.concept-11 .task-item:nth-child(4){
  min-height:65px;
  padding:12px 14px;
  border-bottom:1px dashed #ddc8b3;
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(246,231,216,.32));
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.82);
}
body.concept-11 .task-item:nth-child(odd){background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(243,226,209,.34))}
body.concept-11 .task-item:hover{box-shadow:inset 4px 0 0 rgba(112,134,109,.45),inset 0 -1px 0 rgba(255,255,255,.82)}
body.concept-11 .check{border-color:#b7987d;background:radial-gradient(circle at 35% 30%,#fffaf2,#e9d5c0);box-shadow:0 2px 0 #b09176,inset 0 2px 2px white}
body.concept-11 .task-item.done .check{border-color:#70866d;background:#70866d;box-shadow:0 2px 0 #50664e,inset 0 1px 0 rgba(255,255,255,.3)}

/* Weekly pages use a chalkboard/menu plaque, counter ruler and ticket cards. */
body.concept-11 .page-title{
  min-height:155px;
  padding:22px 18px 24px;
  border:8px solid #b48e70;
  border-top-width:8px;
  border-radius:4px;
  background:linear-gradient(180deg,#5d6d5b,#39483d);
  box-shadow:0 5px 0 #80614b,0 18px 29px rgba(68,44,29,.24),inset 0 2px 0 rgba(255,255,255,.35),inset 0 -12px 22px rgba(30,43,34,.2);
  transform:rotate(-.35deg);
}
body.concept-11 .page-title::before{display:block;content:"TODAY'S SPECIALS  /  CAFE BOARD";top:12px;right:14px;color:rgba(255,248,231,.68);font:8px "SF Mono","Menlo",monospace;transform:rotate(2deg)}
body.concept-11 .page-title::after{display:block;right:11px;bottom:-7px;width:46px;height:46px;opacity:.7;filter:sepia(.18)}
body.concept-11 .page-title h1,body.concept-11 .page-title p{color:#fff8e9;text-shadow:0 1px 2px rgba(28,39,30,.45)}
body.concept-11 .week-strip{border:1px solid #b18d71;border-radius:4px;background:linear-gradient(180deg,#d8bea5,#b99172);box-shadow:0 4px 0 #987554,0 13px 22px rgba(70,45,29,.18),inset 0 2px 0 rgba(255,255,255,.56)}
body.concept-11 .week-day{border-color:rgba(112,78,53,.18);background:linear-gradient(#fffaf2,#ecdac7);box-shadow:0 2px 0 #b7957c,inset 0 1px 0 white}
body.concept-11 .week-day.active{background:linear-gradient(#839b7f,#60775f);box-shadow:0 2px 0 #4d624c,inset 0 1px 0 rgba(255,255,255,.35);transform:translateY(-2px)}
body.concept-11 .class-block{border-color:#c3a58b;border-left-width:5px;border-radius:3px 10px 3px 3px;background:linear-gradient(180deg,#fffaf2,#f0decd);box-shadow:0 4px 0 #ad8e75,0 12px 19px rgba(72,47,31,.16),inset 0 2px 0 white}
body.concept-11 .class-block::before{border-color:#b4967d;background:#ead4bd;box-shadow:inset 0 2px 2px rgba(255,255,255,.8),0 2px 0 #b4967d}
body.concept-11 .green-block{background:linear-gradient(180deg,#fafcf3,#e3eadb);border-left-color:#70866d}
body.concept-11 .coral-block{background:linear-gradient(180deg,#fff8f1,#f1ddd4);border-left-color:#b97655}
body.concept-11 .blue-block{border-left-color:#a6795f}
body.concept-11 .exam-card,body.concept-11 .stat-hero{border-color:#bea188;border-radius:11px;background:radial-gradient(circle at 72% 16%,rgba(255,255,255,.9),transparent 24%),linear-gradient(180deg,#f8eadb,#e5d0bc);box-shadow:0 4px 0 #ac8d73,0 14px 23px rgba(71,46,30,.17),inset 0 2px 0 white}
body.concept-11 .stat-hero{background:radial-gradient(circle at 72% 16%,rgba(255,255,255,.9),transparent 24%),linear-gradient(180deg,#edf2e8,#d4dfd0)}

body.concept-11 .chart-panel,body.concept-11 .subject-stats,body.concept-11 .profile-card,body.concept-11 .setting-list,body.concept-11 .mood-card{border-color:#c4a78d;border-radius:5px;background:linear-gradient(180deg,#fffaf3,#efdfcf);box-shadow:0 4px 0 #b09076,0 14px 23px rgba(72,47,31,.15),inset 0 2px 0 white}
body.concept-11 .bar-col i{background:linear-gradient(90deg,#c69f81,#a8795f);box-shadow:0 2px 0 #966b51,inset 1px 0 0 rgba(255,255,255,.45)}
body.concept-11 .bar-col.active i{background:linear-gradient(90deg,#829a7d,#617861);box-shadow:0 2px 0 #4d654e,inset 1px 0 0 rgba(255,255,255,.45)}
body.concept-11 .profile-card{background:linear-gradient(180deg,#f7e8d9,#e6d0ba);transform:rotate(.3deg)}
body.concept-11 .profile-card img{border-right:7px solid #fffaf2;box-shadow:4px 0 0 #c0a189}
body.concept-11 .mood-card{background:#fffaf3;transform:rotate(-.45deg)}
body.concept-11 .mood-card:nth-child(2){transform:rotate(.55deg)}
body.concept-11 .mood-card:nth-child(3){transform:rotate(.35deg)}
body.concept-11 .mood-card:nth-child(4){transform:rotate(-.65deg)}
body.concept-11 .mood-card img{border-radius:2px;box-shadow:0 2px 0 #cfb49b}
body.concept-11 .mood-card.selected{transform:translateY(-4px) rotate(-.45deg);box-shadow:0 4px 0 #a98a71,0 14px 23px rgba(72,47,31,.19),0 0 0 2px #8a634a}
body.concept-11 .setting-list{overflow:hidden;background:#f5e7d8}
body.concept-11 .setting-list button{border-bottom-color:#d8c0a9;background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(231,208,187,.18))}

/* Tray navigation with a visible coaster lip and coffee-toned active tab. */
body.concept-11 .bottom-nav{height:70px;padding:8px 10px;border:1px solid #b7967b;border-radius:5px;background:linear-gradient(180deg,#fffaf2,#e1cbb6);box-shadow:0 4px 0 #9e8067,0 18px 29px rgba(63,40,25,.27),inset 0 2px 0 white}
body.concept-11 .bottom-nav::before{content:"";position:absolute;top:4px;right:11px;left:11px;height:1px;background:#d6bea5}
body.concept-11 .bottom-nav button{color:#92745e;border-radius:3px;transition:transform .15s,background .15s,box-shadow .15s}
body.concept-11 .bottom-nav button.active{color:#4e3426;background:rgba(255,250,242,.76);box-shadow:0 2px 0 #b7957b,inset 0 1px 0 white;transform:translateY(-2px)}
body.concept-11 .bottom-nav button.active:after{background:#b97655}
body.concept-11 .fab{border-color:#a66e50;background:radial-gradient(circle at 34% 27%,#a0785c,#5b3826 68%);box-shadow:0 4px 0 #41281b,0 14px 22px rgba(65,40,25,.27),inset 0 2px 1px rgba(255,255,255,.25)}

@media(max-width:420px){
  body.concept-11 main{padding-left:14px;padding-right:14px}
  body.concept-11 .topbar{margin-left:0;margin-right:0;padding:11px 12px}
  body.concept-11 .topbar::after{font-size:8px}
  body.concept-11 .companion-band{height:288px;margin-left:3px;margin-right:3px;border-width:6px;border-bottom-width:9px}
  body.concept-11 .progress-panel{margin-left:7px;margin-right:7px}
  body.concept-11 .next-task{margin-left:4px;margin-right:4px}
  body.concept-11 .page-title{min-height:146px;border-width:6px}
  body.concept-11 .bottom-nav{border-radius:4px}
}

/* 12: Seoul minimalist cafe. Light menu paper, pale oak and one quiet plant. */
body.concept-12:not(.focus-mode){
  --cafe12-ink:#383632;
  --cafe12-muted:#918d86;
  --cafe12-paper:#fffdf9;
  --cafe12-oak:#c6ae9b;
  --cafe12-oak-dark:#9e826f;
  --cafe12-sage:#879787;
  --cafe12-clay:#bd927d;
  background:#ebe9e4 url("assets/cafe-space-still-life.png") center/cover fixed no-repeat;
  background-blend-mode:screen;
  color:var(--cafe12-ink);
}
body.concept-12:not(.focus-mode)::before{
  background:rgba(255,253,248,.58);
}
body.concept-12:not(.focus-mode) .app-shell{
  background:rgba(252,250,246,.94);
  border:1px solid rgba(143,126,111,.16);
  box-shadow:0 18px 46px rgba(91,79,68,.16),inset 0 0 0 1px rgba(255,255,255,.8);
}
body.concept-12 main{padding:18px 18px 122px}
body.concept-12 .view:not(.focus-view){background:transparent;background-image:none}

/* A small cafe order slip anchors the home page without becoming a heavy card. */
body.concept-12 .topbar{
  position:relative;
  margin:0 0 20px;
  padding:12px 13px 14px;
  border:1px solid #ddd1c5;
  border-top:3px solid var(--cafe12-sage);
  border-radius:7px;
  background:var(--cafe12-paper);
  box-shadow:0 3px 0 rgba(161,135,115,.16),0 9px 18px rgba(89,73,58,.08),inset 0 1px 0 white;
}
body.concept-12 .topbar::after{content:"CAFE 012  ·  WINDOW TABLE";color:#aaa096;font:8px "SF Mono","Menlo",monospace;letter-spacing:.5px}
body.concept-12 .topbar::before{content:"";position:absolute;right:13px;bottom:7px;left:13px;height:1px;background:#eee7df}
body.concept-12 .topbar h1{color:var(--cafe12-ink);font-size:27px}
body.concept-12 .icon-button{border-color:#ddd1c5;border-radius:9px;color:#6f7f70;background:#f7faf5;box-shadow:0 2px 0 #d3c2b3,0 6px 12px rgba(91,76,63,.1),inset 0 1px 0 white}

body.concept-12 .companion-band{
  height:312px;
  margin:0 2px;
  border:1px solid #ded4cb;
  border-radius:10px;
  box-shadow:0 4px 0 rgba(160,134,113,.18),0 16px 28px rgba(91,74,59,.12),inset 0 0 0 4px rgba(255,253,249,.86);
}
body.concept-12 .companion-band::before{background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 54%,rgba(65,55,47,.18))}
body.concept-12 .status-pill{border-color:#ddd3ca;border-radius:5px;color:#6e7e70;background:rgba(255,253,249,.88);box-shadow:0 2px 0 rgba(174,149,128,.14),inset 0 1px 0 white}
body.concept-12 .status-pill i{background:var(--cafe12-clay)}
body.concept-12 .speech{max-width:77%;margin-bottom:15px;padding:11px 13px;border-color:#ded3c9;border-radius:7px;color:#4f4b46;background:rgba(255,253,249,.9);box-shadow:0 3px 0 rgba(168,143,123,.16),0 9px 18px rgba(91,73,57,.1),inset 0 1px 0 white;backdrop-filter:blur(12px);font-size:17px}
body.concept-12 .speech::after{border-color:#ded3c9;background:#fffdf9}

/* Loyalty stamp and order ticket use the same paper language as a small cafe. */
body.concept-12 .progress-panel{
  margin:-19px 13px 24px;
  border:1px solid #ded3c8;
  border-radius:9px;
  background:var(--cafe12-paper);
  box-shadow:0 3px 0 rgba(165,140,119,.18),0 13px 24px rgba(91,75,60,.1),inset 0 1px 0 white;
  transform:none;
}
body.concept-12 .progress-panel::before{background:var(--cafe12-sage)}
body.concept-12 .progress-panel::after{content:"";position:absolute;right:15px;bottom:5px;width:36px;height:36px;background:url("assets/cafe-plant-sticker.png") center/contain no-repeat;opacity:.16;transform:rotate(5deg)}
body.concept-12 .progress-ring{box-shadow:0 2px 0 #c4ad9a,0 5px 10px rgba(83,70,59,.1),inset 0 0 0 3px rgba(255,255,255,.74)}
body.concept-12 .next-task{margin:0 5px;border:1px solid #ded1c6;border-left:3px solid var(--cafe12-clay);border-radius:7px;background:var(--cafe12-paper);box-shadow:0 3px 0 rgba(163,138,117,.18),0 11px 20px rgba(91,74,58,.1),inset 0 1px 0 white}
body.concept-12 .next-task::after{right:13px;bottom:5px;width:35px;height:43px;opacity:.12;filter:grayscale(.3)}
body.concept-12 .subject-badge,
body.concept-12 .subject-badge.blue,
body.concept-12 .subject-badge.green,
body.concept-12 .subject-badge.coral{border-color:#d9cdc2;background:#f7f4ee;box-shadow:0 2px 0 #d0bbaa,0 4px 8px rgba(82,67,53,.08),inset 0 1px 0 white}
body.concept-12 .start-button,body.concept-12 .primary-action{border-color:#7e8d7f;background:#778978;box-shadow:0 3px 0 #5f6f61,0 6px 12px rgba(65,83,68,.17),inset 0 1px 0 rgba(255,255,255,.35)}

body.concept-12 .task-list{gap:0;padding-top:8px;border:1px solid #ded4cb;border-radius:8px;background:var(--cafe12-paper);box-shadow:0 3px 0 rgba(164,139,119,.17),0 13px 22px rgba(91,75,60,.1),inset 0 1px 0 white}
body.concept-12 .task-list::before{height:8px;background:radial-gradient(circle at 7px 4px,#d1c1b4 1.5px,transparent 2px) 0 0/18px 8px repeat-x;opacity:.55}
body.concept-12 .task-list::after{content:"";position:absolute;right:9px;bottom:8px;width:39px;height:44px;background:url("assets/cafe-plant-sticker.png") center/contain no-repeat;opacity:.1;pointer-events:none}
body.concept-12 .task-item,
body.concept-12 .task-item:nth-child(1),
body.concept-12 .task-item:nth-child(2),
body.concept-12 .task-item:nth-child(3),
body.concept-12 .task-item:nth-child(4){min-height:62px;margin:0;padding:11px 13px;border:0;border-bottom:1px solid #eee7df;border-radius:0;background:transparent;box-shadow:none}
body.concept-12 .task-item:last-child{border-bottom:0}
body.concept-12 .task-item:hover{box-shadow:inset 3px 0 0 rgba(135,151,135,.45),inset 0 -1px 0 #eee7df}
body.concept-12 .check{border-color:#c9b9ab;background:#faf8f3;box-shadow:0 1px 0 #d0bdab,inset 0 1px 1px white}
body.concept-12 .task-item.done .check{border-color:var(--cafe12-sage);background:var(--cafe12-sage);box-shadow:0 1px 0 #69796a,inset 0 1px 0 rgba(255,255,255,.35)}

/* Menu board, table reservations and one plant keep the inner pages cafe-like. */
body.concept-12 .page-title{position:relative;min-height:137px;padding:20px 17px 22px;border:1px solid #d9cec4;border-left:4px solid var(--cafe12-sage);border-radius:8px;background:var(--cafe12-paper);box-shadow:0 3px 0 rgba(163,139,119,.17),0 13px 22px rgba(91,75,60,.1),inset 0 1px 0 white;transform:none}
body.concept-12 .page-title::before{display:block;content:"MENU BOARD  /  CAFE NOTE";top:13px;right:14px;color:#b0a69d;font:8px "SF Mono","Menlo",monospace;letter-spacing:.4px}
body.concept-12 .page-title::after{display:block;right:11px;bottom:-7px;width:37px;height:37px;opacity:.46;filter:none}
body.concept-12 .page-title h1{color:var(--cafe12-ink);font-size:26px}
body.concept-12 .page-title p{color:var(--cafe12-muted)}
body.concept-12 .week-strip{border:1px solid #ded4cb;border-radius:7px;background:#f8f5ef;box-shadow:0 3px 0 rgba(165,140,119,.14),0 9px 16px rgba(91,74,58,.07),inset 0 1px 0 white}
body.concept-12 .week-day{border-radius:5px;color:#9d958d}
body.concept-12 .week-day strong{color:#4c4944}
body.concept-12 .week-day.active{color:white;background:var(--cafe12-sage);box-shadow:0 2px 0 #68796b,inset 0 1px 0 rgba(255,255,255,.35)}
body.concept-12 .week-day.active strong{color:white}
body.concept-12 .class-block{border:1px solid #ded4cb;border-left:3px solid #b6a291;border-radius:7px;background:var(--cafe12-paper);box-shadow:0 3px 0 rgba(164,139,119,.16),0 9px 16px rgba(91,74,58,.08),inset 0 1px 0 white}
body.concept-12 .class-block::before{border-color:#d7c7b9;background:#f5f1ea;box-shadow:inset 0 1px 1px white,0 1px 0 #ccb7a5}
body.concept-12 .green-block{background:#f7faf4;border-left-color:var(--cafe12-sage)}
body.concept-12 .coral-block{background:#fff8f4;border-left-color:var(--cafe12-clay)}
body.concept-12 .exam-card,body.concept-12 .stat-hero{border:1px solid #ded2c7;border-radius:9px;background:var(--cafe12-paper);box-shadow:0 3px 0 rgba(164,139,119,.17),0 12px 20px rgba(91,74,58,.09),inset 0 1px 0 white}
body.concept-12 .stat-hero{background:#f4f8f1}
body.concept-12 .chart-panel,body.concept-12 .subject-stats,body.concept-12 .profile-card,body.concept-12 .setting-list,body.concept-12 .mood-card{border-color:#ded4cb;border-radius:8px;background:var(--cafe12-paper);box-shadow:0 3px 0 rgba(164,139,119,.16),0 11px 19px rgba(91,74,58,.08),inset 0 1px 0 white}
body.concept-12 .bar-col i{background:#c4ab98;box-shadow:0 1px 0 #ad927d,inset 1px 0 0 rgba(255,255,255,.45)}
body.concept-12 .bar-col.active i{background:var(--cafe12-sage);box-shadow:0 1px 0 #697a6b,inset 1px 0 0 rgba(255,255,255,.45)}
body.concept-12 .profile-card{background:#f6eee6;transform:none}
body.concept-12 .profile-card img{border-right:5px solid #fffdf9;box-shadow:3px 0 0 #d4c0ae}
body.concept-12 .mood-card{background:#fffdf9;transform:none}
body.concept-12 .mood-card:nth-child(2),body.concept-12 .mood-card:nth-child(3),body.concept-12 .mood-card:nth-child(4){transform:none}
body.concept-12 .mood-card img{border-radius:5px;box-shadow:0 1px 0 #d6c2b1}
body.concept-12 .mood-card.selected{transform:translateY(-3px);box-shadow:0 3px 0 #b6a18e,0 11px 19px rgba(91,74,58,.12),0 0 0 2px var(--cafe12-sage)}
body.concept-12 .mood-card.selected:after{border-color:#d7cabe;color:#6d7c6e;background:#f9fbf7}
body.concept-12 .setting-list{overflow:hidden;background:#faf7f2}
body.concept-12 .setting-list button{border-bottom-color:#eee7df;background:transparent}

body.concept-12 .bottom-nav{height:66px;padding:7px 10px;border:1px solid #d8c9bb;border-radius:9px;background:rgba(255,253,249,.96);box-shadow:0 3px 0 rgba(159,134,112,.18),0 13px 23px rgba(86,68,51,.14),inset 0 1px 0 white;backdrop-filter:blur(14px)}
body.concept-12 .bottom-nav::before{content:"";position:absolute;top:5px;right:12px;left:12px;height:1px;background:#eee7df}
body.concept-12 .bottom-nav button{color:#9b9188;border-radius:6px}
body.concept-12 .bottom-nav button.active{color:#5e6d60;background:#f2f6ef;box-shadow:0 2px 0 #d1ddd0,inset 0 1px 0 white;transform:translateY(-2px)}
body.concept-12 .bottom-nav button.active:after{background:var(--cafe12-clay)}
body.concept-12 .fab{border-color:#748675;background:var(--cafe12-sage);box-shadow:0 3px 0 #5d6d5f,0 11px 20px rgba(70,88,72,.2),inset 0 1px 0 rgba(255,255,255,.35)}
body.concept-12 dialog{border-color:#ddd1c5;border-radius:9px;background:rgba(255,253,249,.98);box-shadow:0 4px 0 rgba(159,134,112,.18),0 24px 58px rgba(74,58,45,.22);backdrop-filter:blur(14px)}
body.concept-12 input,body.concept-12 select{border-color:#ded3c8;border-radius:6px;background:#fffdf9;box-shadow:inset 0 2px 5px rgba(92,75,58,.05)}

@media(max-width:420px){
  body.concept-12 main{padding-left:14px;padding-right:14px}
  body.concept-12 .topbar{margin-left:0;margin-right:0;padding:11px 12px}
  body.concept-12 .topbar::after{font-size:7px}
  body.concept-12 .companion-band{height:286px;margin-left:2px;margin-right:2px}
  body.concept-12 .progress-panel{margin-left:7px;margin-right:7px}
  body.concept-12 .next-task{margin-left:4px;margin-right:4px}
  body.concept-12 .page-title{min-height:132px}
  body.concept-12 .bottom-nav{border-radius:8px}
}

/* 13: a quiet Seoul window-seat cafe, expressed as a tabletop instead of a card stack. */
body.concept-13:not(.focus-mode){
  --cafe13-ink:#3b3936;
  --cafe13-muted:#96918a;
  --cafe13-paper:#fffefa;
  --cafe13-oak:#c6b09f;
  --cafe13-oak-line:#e6ddd5;
  --cafe13-sage:#819281;
  --cafe13-clay:#c69a84;
  background:#dcd9d3 url("assets/cafe-space-still-life.png") center/cover fixed no-repeat;
  background-blend-mode:screen;
  color:var(--cafe13-ink);
}
body.concept-13:not(.focus-mode)::before{background:linear-gradient(180deg,rgba(255,254,250,.82),rgba(255,254,250,.52) 65%,rgba(201,193,184,.28))}
body.concept-13:not(.focus-mode) .app-shell{background:rgba(253,252,249,.88);border:0;box-shadow:0 20px 70px rgba(75,66,57,.16),inset 0 0 0 1px rgba(255,255,255,.72)}
body.concept-13 main{padding:23px 20px 120px}
body.concept-13 .view:not(.focus-view){background:transparent;background-image:none}

/* The cafe starts as a counter surface: a line, a table number, and breathing room. */
body.concept-13 .topbar{position:relative;margin:0 0 16px;padding:0 0 14px;border:0;border-bottom:1px solid var(--cafe13-oak-line);background:transparent;box-shadow:none}
body.concept-13 .topbar::after{content:"CAFE NOTE  /  WINDOW TABLE 012";color:#b1a69d;font:8px "SF Mono","Menlo",monospace;letter-spacing:.35px}
body.concept-13 .topbar::before{content:"";position:absolute;right:0;bottom:-2px;width:62px;height:3px;border-radius:3px;background:var(--cafe13-sage)}
body.concept-13 .topbar h1{color:var(--cafe13-ink);font-size:27px}
body.concept-13 .icon-button{border:1px solid #ded6cf;border-radius:8px;color:#708072;background:#f7faf5;box-shadow:0 2px 0 #d6c6ba,0 6px 12px rgba(86,72,60,.08),inset 0 1px 0 white}

body.concept-13 .companion-band{height:308px;margin:0 -2px;border:3px solid rgba(255,254,250,.96);border-radius:12px;background:#f1eee8;box-shadow:0 5px 0 rgba(167,142,123,.14),0 18px 33px rgba(86,70,56,.12)}
body.concept-13 .companion-band::before{background:linear-gradient(180deg,transparent 50%,rgba(55,47,41,.16))}
body.concept-13 .status-pill{border:1px solid rgba(220,211,201,.92);border-radius:5px;color:#728073;background:rgba(255,254,250,.88);box-shadow:0 2px 0 rgba(169,143,122,.12),inset 0 1px 0 white}
body.concept-13 .status-pill i{background:var(--cafe13-clay)}
body.concept-13 .speech{max-width:74%;margin-bottom:14px;padding:11px 13px;border:1px solid rgba(220,211,201,.94);border-radius:7px;color:#4b4945;background:rgba(255,254,250,.93);box-shadow:0 3px 0 rgba(167,142,123,.14),0 10px 20px rgba(83,67,53,.08);backdrop-filter:blur(10px);font-size:17px}
body.concept-13 .speech::after{border-color:#dcd3ca;background:#fffefa}

/* One loyalty slip, one order ticket; the rest remains open tabletop. */
body.concept-13 .progress-panel{margin:-17px 17px 25px;padding:13px 14px;border:1px solid #ded5ce;border-radius:8px;background:rgba(255,254,250,.96);box-shadow:0 3px 0 rgba(165,140,119,.15),0 12px 23px rgba(86,70,56,.09),inset 0 1px 0 white;transform:none}
body.concept-13 .progress-panel::before{background:var(--cafe13-sage)}
body.concept-13 .progress-panel::after{content:"";position:absolute;right:14px;bottom:5px;width:31px;height:34px;background:url("assets/cafe-plant-sticker.png") center/contain no-repeat;opacity:.12}
body.concept-13 .progress-ring{box-shadow:0 2px 0 #c8b5a6,0 5px 10px rgba(82,67,54,.08),inset 0 0 0 3px rgba(255,255,255,.76)}
body.concept-13 .section-head{margin:29px 0 10px}
body.concept-13 .section-head h2{font-size:20px}
body.concept-13 .time-chip,body.concept-13 .filter-button{border:1px dashed #d9cec4;border-radius:4px;color:#778578;background:#fbfcf9;box-shadow:none}
body.concept-13 .next-task{margin:0;border:1px solid #ded5ce;border-left:3px solid var(--cafe13-clay);border-radius:7px;background:rgba(255,254,250,.97);box-shadow:0 3px 0 rgba(165,140,119,.15),0 10px 19px rgba(86,70,56,.08),inset 0 1px 0 white}
body.concept-13 .next-task::after{right:13px;bottom:5px;width:31px;height:40px;opacity:.1;filter:grayscale(.4)}
body.concept-13 .subject-badge,
body.concept-13 .subject-badge.blue,
body.concept-13 .subject-badge.green,
body.concept-13 .subject-badge.coral{border-color:#ded5ce;border-radius:7px;background:#f8f5ef;box-shadow:0 2px 0 #d2beae,0 4px 8px rgba(82,67,54,.06),inset 0 1px 0 white}
body.concept-13 .start-button,body.concept-13 .primary-action{border-color:#7e8d80;background:#7d8e7e;box-shadow:0 3px 0 #627263,0 6px 12px rgba(65,83,68,.16),inset 0 1px 0 rgba(255,255,255,.35)}

body.concept-13 .task-list{gap:0;padding-top:7px;border:0;border-top:1px solid #ddd4cd;border-bottom:1px solid #ddd4cd;border-radius:0;background:rgba(255,254,250,.72);box-shadow:none}
body.concept-13 .task-list::before{height:7px;background:radial-gradient(circle at 7px 3px,#d3c4b8 1.4px,transparent 1.8px) 0 0/18px 7px repeat-x;opacity:.45}
body.concept-13 .task-list::after{content:"";position:absolute;right:9px;bottom:8px;width:33px;height:38px;background:url("assets/cafe-plant-sticker.png") center/contain no-repeat;opacity:.08;pointer-events:none}
body.concept-13 .task-item,
body.concept-13 .task-item:nth-child(1),
body.concept-13 .task-item:nth-child(2),
body.concept-13 .task-item:nth-child(3),
body.concept-13 .task-item:nth-child(4){min-height:61px;margin:0;padding:10px 2px;border:0;border-bottom:1px solid #eee8e2;border-radius:0;background:transparent;box-shadow:none}
body.concept-13 .task-item:last-child{border-bottom:0}
body.concept-13 .task-item:hover{box-shadow:inset 3px 0 0 rgba(129,146,129,.42),inset 0 -1px 0 #eee8e2}
body.concept-13 .check{border-color:#cdbeb2;background:#fbfaf6;box-shadow:0 1px 0 #d1bead,inset 0 1px 1px white}
body.concept-13 .task-item.done .check{border-color:var(--cafe13-sage);background:var(--cafe13-sage);box-shadow:0 1px 0 #667667,inset 0 1px 0 rgba(255,255,255,.35)}

/* Inner pages read as menu pages and member notes, not dashboard panels. */
body.concept-13 .page-title{position:relative;min-height:128px;padding:17px 15px 20px;border:0;border-bottom:1px solid var(--cafe13-oak-line);border-left:3px solid var(--cafe13-sage);border-radius:0;background:rgba(255,254,250,.76);box-shadow:none;transform:none}
body.concept-13 .page-title::before{display:block;content:"MENU NOTE  /  QUIET TABLE";top:11px;right:11px;color:#b0a69d;font:8px "SF Mono","Menlo",monospace;letter-spacing:.3px}
body.concept-13 .page-title::after{display:block;right:10px;bottom:-7px;width:32px;height:32px;opacity:.38;filter:none}
body.concept-13 .page-title h1{color:var(--cafe13-ink);font-size:25px}
body.concept-13 .page-title p{color:var(--cafe13-muted)}
body.concept-13 .week-strip{border:0;border-top:1px solid #e2dad2;border-bottom:1px solid #e2dad2;border-radius:0;background:rgba(255,254,250,.6);box-shadow:none}
body.concept-13 .week-day{border-radius:5px;color:#9a928a}
body.concept-13 .week-day strong{color:#4d4a46}
body.concept-13 .week-day.active{color:white;background:var(--cafe13-sage);box-shadow:0 2px 0 #687769,inset 0 1px 0 rgba(255,255,255,.35)}
body.concept-13 .week-day.active strong{color:white}
body.concept-13 .class-block{border:1px solid #e2dad2;border-left:3px solid #b8a696;border-radius:7px;background:rgba(255,254,250,.9);box-shadow:0 3px 0 rgba(165,140,119,.13),0 8px 15px rgba(86,70,56,.07),inset 0 1px 0 white}
body.concept-13 .class-block::before{border-color:#d9cec4;background:#f8f5ef;box-shadow:inset 0 1px 1px white,0 1px 0 #ccb9a8}
body.concept-13 .green-block{background:rgba(246,250,244,.92);border-left-color:var(--cafe13-sage)}
body.concept-13 .coral-block{background:rgba(255,249,245,.92);border-left-color:var(--cafe13-clay)}
body.concept-13 .exam-card,body.concept-13 .stat-hero{border:1px solid #e0d7cf;border-radius:8px;background:rgba(255,254,250,.92);box-shadow:0 3px 0 rgba(165,140,119,.14),0 10px 18px rgba(86,70,56,.08),inset 0 1px 0 white}
body.concept-13 .stat-hero{background:rgba(246,250,244,.94)}
body.concept-13 .chart-panel,body.concept-13 .subject-stats,body.concept-13 .profile-card,body.concept-13 .setting-list,body.concept-13 .mood-card{border-color:#e0d7cf;border-radius:8px;background:rgba(255,254,250,.92);box-shadow:0 3px 0 rgba(165,140,119,.14),0 10px 18px rgba(86,70,56,.07),inset 0 1px 0 white}
body.concept-13 .bar-col i{background:#cbb4a3;box-shadow:0 1px 0 #b39884,inset 1px 0 0 rgba(255,255,255,.45)}
body.concept-13 .bar-col.active i{background:var(--cafe13-sage);box-shadow:0 1px 0 #687869,inset 1px 0 0 rgba(255,255,255,.45)}
body.concept-13 .profile-card{background:rgba(248,240,233,.9);transform:none}
body.concept-13 .profile-card img{border-right:4px solid #fffefa;box-shadow:3px 0 0 #d6c2b1}
body.concept-13 .mood-card{background:rgba(255,254,250,.94);transform:none}
body.concept-13 .mood-card:nth-child(2),body.concept-13 .mood-card:nth-child(3),body.concept-13 .mood-card:nth-child(4){transform:none}
body.concept-13 .mood-card img{border-radius:5px;box-shadow:0 1px 0 #d6c2b1}
body.concept-13 .mood-card.selected{transform:translateY(-3px);box-shadow:0 3px 0 #b6a18e,0 10px 18px rgba(86,70,56,.1),0 0 0 2px var(--cafe13-sage)}
body.concept-13 .mood-card.selected:after{border-color:#d7cabe;color:#6d7c6e;background:#f9fbf7}
body.concept-13 .setting-list{overflow:hidden;background:rgba(250,248,244,.82)}
body.concept-13 .setting-list button{border-bottom-color:#eee8e2;background:transparent}

body.concept-13 .bottom-nav{height:64px;padding:6px 10px;border:1px solid #ded4cb;border-radius:10px;background:rgba(255,254,250,.94);box-shadow:0 3px 0 rgba(159,134,112,.15),0 12px 22px rgba(78,64,51,.13),inset 0 1px 0 white;backdrop-filter:blur(14px)}
body.concept-13 .bottom-nav::before{content:"";position:absolute;top:5px;right:12px;left:12px;height:1px;background:#eee8e2}
body.concept-13 .bottom-nav button{color:#9c938a;border-radius:6px}
body.concept-13 .bottom-nav button.active{color:#5f6e61;background:#f2f6ef;box-shadow:0 2px 0 #d1ddd0,inset 0 1px 0 white;transform:translateY(-2px)}
body.concept-13 .bottom-nav button.active:after{background:var(--cafe13-clay)}
body.concept-13 .fab{border-color:#778778;background:var(--cafe13-sage);box-shadow:0 3px 0 #5d6d5f,0 11px 20px rgba(70,88,72,.18),inset 0 1px 0 rgba(255,255,255,.35)}
body.concept-13 dialog{border-color:#ded4cb;border-radius:9px;background:rgba(255,254,250,.98);box-shadow:0 4px 0 rgba(159,134,112,.16),0 24px 58px rgba(74,58,45,.2);backdrop-filter:blur(14px)}
body.concept-13 input,body.concept-13 select{border-color:#e0d7cf;border-radius:6px;background:#fffefa;box-shadow:inset 0 2px 5px rgba(92,75,58,.04)}

@media(max-width:420px){
  body.concept-13 main{padding-left:15px;padding-right:15px}
  body.concept-13 .topbar{margin-left:0;margin-right:0}
  body.concept-13 .topbar::after{font-size:7px}
  body.concept-13 .companion-band{height:284px;margin-left:0;margin-right:0}
  body.concept-13 .progress-panel{margin-left:7px;margin-right:7px}
  body.concept-13 .next-task{margin-left:0;margin-right:0}
  body.concept-13 .page-title{min-height:124px}
  body.concept-13 .bottom-nav{border-radius:9px}
}

/* 16: one quiet webtoon frame. The cafe is carried by the drawing itself,
   while the app surface stays close to a clean sheet of paper. */
body.concept-16:not(.focus-mode){
  --webtoon-ink:#34434c;
  --webtoon-muted:#89928f;
  --webtoon-line:#d9dfdc;
  --webtoon-sage:#829c8b;
  --webtoon-clay:#b88c76;
  background:#f2f1ed;
  background-image:none;
  color:var(--webtoon-ink);
}
body.concept-16:not(.focus-mode)::before{display:none}
body.concept-16:not(.focus-mode) .app-shell{
  width:min(100%,520px);
  background:#fbfaf7;
  border:0;
  border-radius:0;
  box-shadow:0 12px 32px rgba(52,67,76,.08);
}
body.concept-16 main{padding:22px 20px 118px}
body.concept-16 .view:not(.focus-view){background:#fbfaf7;background-image:none}
body.concept-16 .topbar{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--webtoon-line)}
body.concept-16 .topbar::after{color:#99a39e;font-size:8px;letter-spacing:.25px}
body.concept-16 .topbar::before{background:var(--webtoon-sage);height:2px;border-radius:0}
body.concept-16 .topbar h1,body.concept-16 .page-title h1{color:var(--webtoon-ink);font-family:"Apple SD Gothic Neo","Noto Sans KR","PingFang SC",sans-serif;font-weight:750}
body.concept-16 .icon-button{border:1px solid var(--webtoon-line);border-radius:4px;color:var(--webtoon-ink);background:#fff;box-shadow:none}
body.concept-16 .companion-band{
  height:322px;
  margin:0;
  border:1px solid #d4dcda;
  border-radius:3px;
  background:#f4f3ef;
  box-shadow:0 6px 0 rgba(52,67,76,.04);
}
body.concept-16 .companion-band::before{background:linear-gradient(180deg,transparent 62%,rgba(52,67,76,.08))}
body.concept-16 .companion-band img{object-fit:cover;object-position:center;filter:none}
body.concept-16 .companion-band::after{color:#6f7d7a;text-shadow:none}
body.concept-16 .companion-copy{padding:14px 14px 18px}
body.concept-16 .status-pill{padding:6px 8px;border:1px solid #d7dfdc;border-radius:3px;color:#687774;background:rgba(255,255,255,.9);box-shadow:none;backdrop-filter:none}
body.concept-16 .status-pill i{background:var(--webtoon-clay)}
body.concept-16 .speech{max-width:50%;margin:35px 0 0;padding:10px 12px;border:1px solid #d8dfdd;border-radius:3px;color:var(--webtoon-ink);background:rgba(255,255,255,.94);box-shadow:2px 3px 0 rgba(52,67,76,.08);backdrop-filter:none;font-family:var(--hand);font-size:16px;line-height:1.5}
body.concept-16 .speech::after{border-color:#d8dfdd;background:#fff}
body.concept-16 .level-row,body.concept-16 .level-track{display:none}
body.concept-16 .progress-panel{margin:13px 0 24px;padding:12px 13px;border:1px solid var(--webtoon-line);border-radius:3px;background:#fff;box-shadow:0 4px 0 rgba(52,67,76,.05);backdrop-filter:none}
body.concept-16 .progress-panel::before{background:var(--webtoon-sage);height:3px;border-radius:0}
body.concept-16 .progress-panel::after{opacity:.2}
body.concept-16 .progress-ring{box-shadow:none}
body.concept-16 .section-head{margin:25px 0 9px}
body.concept-16 .section-head h2{font-size:19px}
body.concept-16 .panel-label,body.concept-16 .eyebrow{color:#929c98}
body.concept-16 .time-chip,body.concept-16 .filter-button{border:1px solid var(--webtoon-line);border-radius:3px;color:#71807a;background:#fff;box-shadow:none}
body.concept-16 .next-task{border:1px solid var(--webtoon-line);border-left:3px solid var(--webtoon-clay);border-radius:3px;background:#fff;box-shadow:0 4px 0 rgba(52,67,76,.05)}
body.concept-16 .next-task:hover,body.concept-16 .task-item:hover{box-shadow:0 4px 0 rgba(52,67,76,.05);transform:none}
body.concept-16 .subject-badge,body.concept-16 .subject-badge.blue,body.concept-16 .subject-badge.green,body.concept-16 .subject-badge.coral{border:1px solid var(--webtoon-line);border-radius:3px;background:#f4f6f2;box-shadow:none}
body.concept-16 .start-button,body.concept-16 .primary-action{border:1px solid #667b70;border-radius:3px;background:#718a7c;box-shadow:0 3px 0 #566b60}
body.concept-16 .task-list{gap:0;padding-top:0;border-top:1px solid var(--webtoon-line);border-bottom:1px solid var(--webtoon-line);background:#fff;box-shadow:none}
body.concept-16 .task-list::before,body.concept-16 .task-list::after{display:none}
body.concept-16 .task-item,body.concept-16 .task-item:nth-child(1),body.concept-16 .task-item:nth-child(2),body.concept-16 .task-item:nth-child(3),body.concept-16 .task-item:nth-child(4){min-height:59px;margin:0;padding:9px 2px;border:0;border-bottom:1px solid #edf0ee;border-radius:0;background:#fff;box-shadow:none}
body.concept-16 .task-item:last-child{border-bottom:0}
body.concept-16 .check{border-color:#b9c5bf;background:#fff;box-shadow:none}
body.concept-16 .task-item.done .check{border-color:var(--webtoon-sage);background:var(--webtoon-sage);box-shadow:none}
body.concept-16 .page-title{min-height:118px;padding:15px 13px 18px;border:0;border-left:3px solid var(--webtoon-sage);border-bottom:1px solid var(--webtoon-line);border-radius:0;background:#fff;box-shadow:none}
body.concept-16 .page-title::before{color:#98a29f;font-size:8px}
body.concept-16 .page-title::after{opacity:.25}
body.concept-16 .week-strip,body.concept-16 .class-block,body.concept-16 .exam-card,body.concept-16 .stat-hero,body.concept-16 .chart-panel,body.concept-16 .subject-stats,body.concept-16 .profile-card,body.concept-16 .mood-card,body.concept-16 .setting-list{border-color:var(--webtoon-line);border-radius:3px;background:#fff;box-shadow:0 4px 0 rgba(52,67,76,.04);backdrop-filter:none}
body.concept-16 .week-day.active{background:var(--webtoon-sage);box-shadow:0 3px 0 #617669}
body.concept-16 .class-block{border-left:3px solid #aebbb3}
body.concept-16 .green-block{border-left-color:var(--webtoon-sage);background:#f5f8f3}
body.concept-16 .coral-block{border-left-color:var(--webtoon-clay);background:#fcf6f2}
body.concept-16 .profile-card{background:#f6f1eb}
body.concept-16 .profile-card img{border-right:1px solid var(--webtoon-line);box-shadow:none}
body.concept-16 .mood-card{background:#fff}
body.concept-16 .mood-card img{border-radius:2px;box-shadow:none;filter:none}
body.concept-16 .mood-card.selected{transform:translateY(-2px);box-shadow:0 4px 0 rgba(52,67,76,.08),0 0 0 2px var(--webtoon-sage)}
body.concept-16 .mood-card.selected:after{border:1px solid var(--webtoon-line);border-radius:3px;color:#667774;background:#fff}
body.concept-16 .setting-list{overflow:hidden}
body.concept-16 .setting-list button{border-bottom-color:#edf0ee;background:#fff}
body.concept-16 .bottom-nav{height:62px;padding:5px 10px;border:1px solid var(--webtoon-line);border-radius:3px;background:#fff;box-shadow:0 -2px 0 rgba(52,67,76,.04),0 7px 14px rgba(52,67,76,.08);backdrop-filter:none}
body.concept-16 .bottom-nav::before{display:none}
body.concept-16 .bottom-nav button{color:#99a39f;border-radius:3px}
body.concept-16 .bottom-nav button.active{color:#62776b;background:#f2f6f1;box-shadow:none;transform:none}
body.concept-16 .bottom-nav button.active:after{background:var(--webtoon-clay)}
body.concept-16 .fab{border:1px solid #667b70;border-radius:3px;background:#718a7c;box-shadow:0 3px 0 #566b60}
body.concept-16 dialog{border-color:var(--webtoon-line);border-radius:3px;background:#fff;box-shadow:0 14px 30px rgba(52,67,76,.15);backdrop-filter:none}
body.concept-16 input,body.concept-16 select{border-color:var(--webtoon-line);border-radius:3px;background:#fff;box-shadow:none}
@media(max-width:420px){
  body.concept-16 main{padding-left:15px;padding-right:15px}
  body.concept-16 .companion-band{height:300px}
  body.concept-16 .speech{max-width:61%;font-size:15px}
  body.concept-16 .bottom-nav{border-radius:3px}
}

/* 17: pencil webtoon panel. Keep the original hand-drawn character, but frame
   it like a single Korean comic cut instead of a full-bleed illustration. */
body.concept-17:not(.focus-mode){
  --panel-ink:#4f351f;
  --panel-muted:#83745d;
  --panel-line:#d9c99f;
  --panel-sage:#65754a;
  --panel-clay:#a55d31;
  background:#f5eedb;
  background-image:radial-gradient(rgba(105,77,46,.09) .55px,transparent .7px);
  background-size:5px 5px;
  color:var(--panel-ink);
}
body.concept-17:not(.focus-mode)::before{display:none}
body.concept-17:not(.focus-mode) .app-shell{width:min(100%,520px);background:#fffaf0;border:1px solid #e7d7b8;border-radius:0;box-shadow:8px 10px 0 rgba(103,73,40,.08)}
body.concept-17 main{padding:22px 20px 118px}
body.concept-17 .view:not(.focus-view){background:#fffaf0;background-image:linear-gradient(90deg,rgba(101,117,74,.06) 1px,transparent 1px),linear-gradient(rgba(101,117,74,.055) 1px,transparent 1px);background-size:24px 24px}
body.concept-17 .topbar{margin-bottom:14px;padding:9px 10px 13px;border:1px dashed var(--panel-line);border-radius:0;background:rgba(255,250,240,.82)}
body.concept-17 .topbar::after{color:#8b774f;letter-spacing:.7px}
body.concept-17 .topbar::before{height:3px;border-radius:0;background:var(--panel-clay)}
body.concept-17 .topbar h1,body.concept-17 .page-title h1{color:#503720;font-family:var(--hand);font-weight:700}
body.concept-17 .icon-button{border:1px solid #bd9c70;border-radius:50%;color:#6d794b;background:#fff7e6;box-shadow:2px 2px 0 rgba(112,75,49,.12)}
body.concept-17 .companion-band{height:324px;margin:0;border:2px solid #715032;border-radius:0;background:#eee4c9;box-shadow:6px 7px 0 rgba(112,75,49,.14)}
body.concept-17 .companion-band::before{background:linear-gradient(180deg,transparent 49%,rgba(90,58,31,.24))}
body.concept-17 .companion-band::after{color:#66764b;text-shadow:none}
body.concept-17 .companion-band img{object-position:center 18%;filter:saturate(.76) contrast(1.02) brightness(1.08) sepia(.09);mix-blend-mode:multiply;opacity:.95}
body.concept-17 .companion-copy{padding:13px 13px 18px}
body.concept-17 .status-pill{padding:6px 8px;border:1px solid rgba(61,72,81,.55);border-radius:3px;color:#566660;background:rgba(255,255,255,.9);box-shadow:none;backdrop-filter:none}
body.concept-17 .status-pill i{background:var(--panel-clay)}
body.concept-17 .speech{max-width:49%;margin:34px 0 0;padding:10px 13px;border:1px solid #8e623b;border-radius:16px 16px 16px 3px;color:#573d28;background:#fff9e9;box-shadow:3px 4px 0 rgba(112,75,49,.12);backdrop-filter:none;font-family:var(--hand);font-size:16px;line-height:1.48}
body.concept-17 .speech::after{right:auto;left:18px;bottom:-13px;border-width:12px 8px 0 0;border-color:#8e623b transparent transparent transparent;background:transparent;transform:rotate(11deg)}
body.concept-17 .level-row,body.concept-17 .level-track{display:none}
body.concept-17 .progress-panel{margin:14px 0 24px;padding:12px 13px;border:1px solid #ccb182;border-radius:0;background:#f8efd9;box-shadow:4px 5px 0 rgba(112,75,49,.1);backdrop-filter:none}
body.concept-17 .progress-panel::before{height:3px;border-radius:0;background:var(--panel-sage)}
body.concept-17 .progress-panel::after{opacity:.14}
body.concept-17 .progress-ring{box-shadow:none}
body.concept-17 .section-head{margin:25px 0 9px}
body.concept-17 .section-head h2{font-size:19px}
body.concept-17 .panel-label,body.concept-17 .eyebrow{color:var(--panel-muted)}
body.concept-17 .time-chip,body.concept-17 .filter-button{border:1px dashed #cbd4d0;border-radius:3px;color:#65766d;background:#fffefa;box-shadow:none}
body.concept-17 .next-task{border:1px solid #d7bd8e;border-left:4px solid var(--panel-clay);border-radius:0;background:#fff8e9;box-shadow:3px 4px 0 rgba(112,75,49,.07)}
body.concept-17 .next-task:hover,body.concept-17 .task-item:hover{transform:none;box-shadow:3px 4px 0 rgba(61,72,81,.05)}
body.concept-17 .subject-badge,body.concept-17 .subject-badge.blue,body.concept-17 .subject-badge.green,body.concept-17 .subject-badge.coral{border:1px solid #ccd5d1;border-radius:3px;background:#f3f5f1;box-shadow:none}
body.concept-17 .start-button,body.concept-17 .primary-action{border:1px solid #647b6e;border-radius:3px;background:#718a7c;box-shadow:0 3px 0 #556b5e}
body.concept-17 .task-list{gap:0;padding-top:0;border-top:1px solid #d9c69e;border-bottom:1px solid #d9c69e;background:#fff8e9;box-shadow:none}
body.concept-17 .task-list::before,body.concept-17 .task-list::after{display:none}
body.concept-17 .task-item,body.concept-17 .task-item:nth-child(1),body.concept-17 .task-item:nth-child(2),body.concept-17 .task-item:nth-child(3),body.concept-17 .task-item:nth-child(4){min-height:59px;margin:0;padding:9px 2px;border:0;border-bottom:1px dashed #e2e7e4;border-radius:0;background:transparent;box-shadow:none}
body.concept-17 .task-item:last-child{border-bottom:0}
body.concept-17 .check{border-color:#b8a06d;background:#fffaf0;box-shadow:none}
body.concept-17 .task-item.done .check{border-color:var(--panel-sage);background:var(--panel-sage);box-shadow:none}
body.concept-17 .page-title{min-height:118px;padding:15px 13px 18px;border:0;border-left:3px solid var(--panel-sage);border-bottom:1px solid var(--panel-line);border-radius:0;background:#fffefa;box-shadow:none}
body.concept-17 .page-title::before{color:#9aa39f;font-size:8px}
body.concept-17 .page-title::after{opacity:.24}
body.concept-17 .week-strip,body.concept-17 .class-block,body.concept-17 .exam-card,body.concept-17 .stat-hero,body.concept-17 .chart-panel,body.concept-17 .subject-stats,body.concept-17 .profile-card,body.concept-17 .mood-card,body.concept-17 .setting-list{border-color:#d5bf93;border-radius:2px;background:#fff8e9;box-shadow:3px 4px 0 rgba(112,75,49,.07);backdrop-filter:none}
body.concept-17 .week-day.active{background:var(--panel-sage);box-shadow:0 3px 0 #617569}
body.concept-17 .class-block{border-left:3px solid #aebbb4}
body.concept-17 .green-block{border-left-color:var(--panel-sage);background:#f5f8f3}
body.concept-17 .coral-block{border-left-color:var(--panel-clay);background:#fcf6f2}
body.concept-17 .profile-card{background:#f1e3c7}
body.concept-17 .profile-card img{border-right:1px solid #d5bf93;box-shadow:none;filter:saturate(.7) contrast(1.04) brightness(1.08) sepia(.11);mix-blend-mode:multiply}
body.concept-17 .mood-card{background:#fff9eb}
body.concept-17 .mood-card img{border:1px solid #d5bb8a;border-radius:1px;box-shadow:2px 2px 0 rgba(112,75,49,.08);filter:saturate(.62) contrast(.96) brightness(1.13) sepia(.08);mix-blend-mode:normal}
body.concept-17 .mood-card[data-mood="low"] img{object-position:center 23%}
body.concept-17 .mood-card[data-mood="high"] img{object-position:center 31%}
body.concept-17 .mood-card[data-mood="relax"] img{object-position:center 42%}
body.concept-17 .mood-card[data-mood="calm"] img{object-position:center 27%}
body.concept-17 .mood-card.selected{transform:translateY(-2px) rotate(-.35deg);box-shadow:4px 5px 0 rgba(112,75,49,.1),0 0 0 2px var(--panel-sage)}
body.concept-17 .mood-card.selected:after{border:1px solid #c6ad7c;border-radius:2px;color:#5b6b44;background:#fff5dd}
body.concept-17 .setting-list{overflow:hidden}
body.concept-17 .setting-list button{border-bottom-color:#e7ebe8;background:#fffefa}
body.concept-17 .bottom-nav{height:62px;padding:5px 10px;border:1px solid #d5bd90;border-radius:0;background:#fff7e8;box-shadow:0 -2px 0 rgba(112,75,49,.03),0 7px 15px rgba(112,75,49,.1);backdrop-filter:none}
body.concept-17 .bottom-nav::before{display:none}
body.concept-17 .bottom-nav button{color:#9aa39f;border-radius:0}
body.concept-17 .bottom-nav button.active{color:#61766a;background:#f2f6f2;box-shadow:none;transform:none}
body.concept-17 .bottom-nav button.active:after{background:var(--panel-clay)}
body.concept-17 .fab{border:1px solid #647b6e;border-radius:50%;background:#718a7c;box-shadow:0 3px 0 #556b5e}
body.concept-17 dialog{border-color:var(--panel-line);border-radius:0;background:#fffefa;box-shadow:0 15px 34px rgba(61,72,81,.14);backdrop-filter:none}
body.concept-17 input,body.concept-17 select{border-color:var(--panel-line);border-radius:0;background:#fffefa;box-shadow:none}
@media(max-width:420px){
  body.concept-17 main{padding-left:15px;padding-right:15px}
  body.concept-17 .companion-band{height:302px}
  body.concept-17 .speech{max-width:56%;font-size:15px}
}

/* Retro variant: gingham cafe, with tomato red stationery accents. */
body.concept-17.retro-gingham:not(.focus-mode){--panel-ink:#57352a;--panel-muted:#8e6c5b;--panel-line:#dec6ad;--panel-sage:#596b48;--panel-clay:#a44832;background-color:#f5e8d2;background-image:linear-gradient(90deg,rgba(164,72,50,.06) 50%,transparent 50%),linear-gradient(rgba(164,72,50,.06) 50%,transparent 50%);background-size:16px 16px}
body.concept-17.retro-gingham .view:not(.focus-view){background-color:#fff8ec;background-image:repeating-linear-gradient(0deg,transparent 0 23px,rgba(164,72,50,.06) 24px),repeating-linear-gradient(90deg,transparent 0 23px,rgba(164,72,50,.045) 24px);background-size:24px 24px}
body.concept-17.retro-gingham .topbar{border-color:#dab69b;background:#fff4e4}.retro-gingham .topbar::before{background:#a44832}.retro-gingham .companion-band{border-color:#57352a;background:#edcfb6;box-shadow:6px 7px 0 rgba(126,64,43,.18)}
body.concept-17.retro-gingham .profile-card,body.concept-17.retro-gingham .mood-card,body.concept-17.retro-gingham .next-task,body.concept-17.retro-gingham .progress-panel,body.concept-17.retro-gingham .setting-list{background:#fff4e2;border-color:#dfc0a1}
body.concept-17.retro-gingham .mood-card:nth-child(odd){transform:rotate(-.5deg)}body.concept-17.retro-gingham .mood-card:nth-child(even){transform:rotate(.5deg)}body.concept-17.retro-gingham .mood-card.selected{transform:translateY(-3px) rotate(-.5deg);box-shadow:4px 5px 0 rgba(126,64,43,.14),0 0 0 2px #a44832}
body.concept-17.retro-gingham .bottom-nav{background:#fff4e2;border-color:#dab69b}.retro-gingham .bottom-nav button.active{color:#a44832;background:#f7dfc5}

/* Retro variant: blue ledger, with ruled paper and ink-stamp contrast. */
body.concept-17.retro-ledger:not(.focus-mode){--panel-ink:#354b58;--panel-muted:#70818b;--panel-line:#b9cbd0;--panel-sage:#537566;--panel-clay:#b47b4c;background-color:#e8eef0;background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(83,117,102,.09) 28px)}
body.concept-17.retro-ledger .view:not(.focus-view){background:#f8fbfa;background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(83,117,102,.09) 28px)}
body.concept-17.retro-ledger .topbar{border-color:#b9cbd0;background:#f8fbfa}.retro-ledger .topbar::before{background:#537566}.retro-ledger .companion-band{border-color:#354b58;background:#dbe8e7;box-shadow:6px 7px 0 rgba(53,75,88,.14)}
body.concept-17.retro-ledger .profile-card,body.concept-17.retro-ledger .mood-card,body.concept-17.retro-ledger .next-task,body.concept-17.retro-ledger .progress-panel,body.concept-17.retro-ledger .setting-list{background:#f8fbfa;border-color:#b9cbd0}
body.concept-17.retro-ledger .mood-card img{border-color:#9fb8bc;filter:saturate(.56) contrast(.98) brightness(1.12) sepia(.02)}body.concept-17.retro-ledger .mood-card.selected{box-shadow:4px 5px 0 rgba(53,75,88,.12),0 0 0 2px #537566}
body.concept-17.retro-ledger .bottom-nav{background:#f8fbfa;border-color:#b9cbd0}.retro-ledger .bottom-nav button.active{color:#537566;background:#e5f0ed}

/* Retro variant: olive botanical, with stamp-like labels and sunny ochre. */
body.concept-17.retro-olive:not(.focus-mode){--panel-ink:#435038;--panel-muted:#778065;--panel-line:#cbd1ad;--panel-sage:#5d713f;--panel-clay:#bd7b3d;background-color:#f3edcf;background-image:radial-gradient(rgba(67,80,56,.1) .7px,transparent .8px);background-size:6px 6px}
body.concept-17.retro-olive .view:not(.focus-view){background:#fffbed;background-image:radial-gradient(rgba(93,113,63,.08) .6px,transparent .7px);background-size:6px 6px}
body.concept-17.retro-olive .topbar{border-color:#cbd1ad;background:#fffbed}.retro-olive .topbar::before{background:#bd7b3d}.retro-olive .companion-band{border-color:#435038;background:#e4e4bb;box-shadow:6px 7px 0 rgba(93,113,63,.16)}
body.concept-17.retro-olive .profile-card,body.concept-17.retro-olive .mood-card,body.concept-17.retro-olive .next-task,body.concept-17.retro-olive .progress-panel,body.concept-17.retro-olive .setting-list{background:#fffbed;border-color:#cbd1ad}
body.concept-17.retro-olive .mood-card img{filter:saturate(.64) contrast(.96) brightness(1.13) sepia(.1)}body.concept-17.retro-olive .mood-card.selected{box-shadow:4px 5px 0 rgba(93,113,63,.12),0 0 0 2px #5d713f}
body.concept-17.retro-olive .bottom-nav{background:#fffbed;border-color:#cbd1ad}.retro-olive .bottom-nav button.active{color:#5d713f;background:#edf0d3}

/* Make the three directions structurally distinct, not just recolored. */
body.concept-17.retro-gingham main{padding:16px 16px 108px}
body.concept-17.retro-gingham .topbar{border-style:solid;border-width:0 0 5px;margin:0 -16px 17px;padding:13px 16px 15px;background:#a44832;color:#fff8e8}
body.concept-17.retro-gingham .topbar h1,body.concept-17.retro-gingham .topbar .eyebrow{color:#fff8e8}
body.concept-17.retro-gingham .topbar::before{display:none}
body.concept-17.retro-gingham .profile-card{height:128px;border-radius:12px;box-shadow:4px 5px 0 #a44832;overflow:hidden}
body.concept-17.retro-gingham .profile-card img{width:118px;height:128px;object-position:center 20%}
body.concept-17.retro-gingham .mood-grid{grid-template-columns:1fr;gap:13px;padding:10px;border:2px solid #a44832;border-radius:12px;background:#f8d7bd}
body.concept-17.retro-gingham .mood-card{display:grid;grid-template-columns:132px 1fr;grid-template-rows:auto 1fr;column-gap:12px;min-height:136px;padding:7px;border:2px solid #a44832;border-radius:8px;background:#fff4e2;transform:none}
body.concept-17.retro-gingham .mood-card img{grid-row:1 / span 2;width:132px;height:120px;aspect-ratio:auto;object-position:center 32%;border:0;border-radius:4px;box-shadow:none}
body.concept-17.retro-gingham .mood-card span{align-self:end;margin:0;padding:0;color:#783e2d;font-size:16px}.retro-gingham .mood-card small{align-self:start;padding:4px 0 0;color:#8c654f;font-size:11px}
body.concept-17.retro-gingham .mood-card.selected{transform:translate(3px,-3px);box-shadow:-3px 4px 0 #a44832,0 0 0 2px #f9bd83}
body.concept-17.retro-gingham .bottom-nav{height:70px;border-radius:14px 14px 0 0;border-width:3px 0 0;background:#a44832}.retro-gingham .bottom-nav button{color:#f7d7bd}.retro-gingham .bottom-nav button.active{color:#a44832;background:#fff4e2;border-radius:9px}

body.concept-17.retro-ledger main{padding:0 24px 100px}
body.concept-17.retro-ledger .topbar{margin:0 -24px 23px;padding:18px 24px 16px;border:0;border-bottom:3px double #537566;border-radius:0;background:#dce9eb}
body.concept-17.retro-ledger .topbar h1{font-family:Georgia,"Songti SC",serif;font-size:29px;letter-spacing:0}.retro-ledger .topbar::before{display:none}
body.concept-17.retro-ledger .profile-card{height:98px;border-width:0 0 1px;border-radius:0;background:transparent;box-shadow:none}.retro-ledger .profile-card img{width:86px;height:98px;border:1px solid #9db7bc;filter:grayscale(.32) sepia(.07)}
body.concept-17.retro-ledger .mood-section .section-head{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:7px;border-bottom:2px solid #537566}.retro-ledger .mood-section .section-head h2::after{content:" / MOOD LOG";color:#7b9497;font:10px "Courier New",monospace;letter-spacing:1px}
body.concept-17.retro-ledger .mood-grid{grid-template-columns:1fr;gap:0;padding:0;border:1px solid #9db7bc;background:#f8fbfa}
body.concept-17.retro-ledger .mood-card{display:grid;grid-template-columns:92px 1fr auto;align-items:center;min-height:92px;padding:0 13px 0 0;border:0;border-bottom:1px solid #9db7bc;border-radius:0;background:transparent;box-shadow:none;transform:none}
body.concept-17.retro-ledger .mood-card:last-child{border-bottom:0}.retro-ledger .mood-card img{grid-row:1 / span 2;width:92px;height:91px;aspect-ratio:auto;border:0;border-right:1px solid #9db7bc;border-radius:0;box-shadow:none;filter:grayscale(.15) saturate(.6) brightness(1.15)}
body.concept-17.retro-ledger .mood-card span{margin:0;padding:0 13px;color:#35515c;font-family:Georgia,"Songti SC",serif;font-size:17px;white-space:normal}.retro-ledger .mood-card small{padding:3px 13px;color:#789096;font-size:10px}
body.concept-17.retro-ledger .mood-card.selected{transform:none;box-shadow:inset 5px 0 #537566}.retro-ledger .mood-card.selected:after{right:12px;top:50%;transform:translateY(-50%);border-radius:50%;background:#dce9eb;color:#35515c}
body.concept-17.retro-ledger .bottom-nav{height:56px;border-width:2px 0 0;border-radius:0;background:#dce9eb;box-shadow:none}.retro-ledger .bottom-nav button.active{background:transparent;color:#35515c}.retro-ledger .bottom-nav button.active:after{height:3px;background:#537566}

body.concept-17.retro-olive main{padding:26px 18px 112px}
body.concept-17.retro-olive .topbar{position:relative;margin:0 0 23px;padding:24px 16px 16px;border:2px solid #5d713f;border-radius:24px 4px 24px 4px;background:#e9edcf;box-shadow:5px 5px 0 rgba(93,113,63,.18)}
body.concept-17.retro-olive .topbar::before{position:absolute;top:10px;left:13px;width:42px;height:5px;border-radius:50%;background:#bd7b3d}.retro-olive .topbar h1{font-family:Georgia,"Songti SC",serif;font-size:28px}.retro-olive .topbar::after{content:"BOTANICAL STUDY";right:14px;bottom:14px;color:#718351;font:9px "Courier New",monospace;letter-spacing:1px}
body.concept-17.retro-olive .profile-card{height:184px;border:0;border-radius:4px 28px 4px 28px;background:#5d713f;box-shadow:5px 6px 0 rgba(93,113,63,.14)}.retro-olive .profile-card h2,.retro-olive .profile-card p,.retro-olive .profile-card span{color:#fffbed}.retro-olive .profile-card img{width:145px;height:184px;border:0;filter:saturate(.6) sepia(.12) brightness(1.12)}
body.concept-17.retro-olive .mood-section .section-head{padding:11px 13px;margin-bottom:10px;border-left:5px solid #bd7b3d;background:#e9edcf}.retro-olive .mood-section .section-head h2{font-family:Georgia,"Songti SC",serif;color:#435038}
body.concept-17.retro-olive .mood-grid{gap:12px;padding:0;border:0;background:transparent}.retro-olive .mood-card{padding:6px 6px 12px;border:2px solid #5d713f;border-radius:28px 4px 28px 4px;background:#fffbed;box-shadow:4px 5px 0 rgba(93,113,63,.12)}
body.concept-17.retro-olive .mood-card:nth-child(2),body.concept-17.retro-olive .mood-card:nth-child(3){border-radius:4px 28px 4px 28px}.retro-olive .mood-card img{border:0;border-radius:23px 2px 2px 2px;box-shadow:none}.retro-olive .mood-card:nth-child(2) img,.retro-olive .mood-card:nth-child(3) img{border-radius:2px 23px 2px 2px}
body.concept-17.retro-olive .mood-card.selected{transform:translateY(-3px);box-shadow:5px 6px 0 rgba(93,113,63,.16),0 0 0 2px #bd7b3d}.retro-olive .bottom-nav{height:66px;border:2px solid #5d713f;border-radius:25px 25px 0 0;background:#e9edcf;box-shadow:0 -3px 0 rgba(93,113,63,.1)}.retro-olive .bottom-nav button.active{border-radius:16px;background:#5d713f;color:#fffbed}

/* Retro variant: old library circulation card. */
body.concept-17.retro-library:not(.focus-mode){--panel-ink:#273f39;--panel-muted:#6d7564;--panel-line:#c7b68d;--panel-sage:#506b4d;--panel-clay:#a75a35;background:#e9dfc4;background-image:repeating-linear-gradient(90deg,rgba(78,58,35,.045) 0 1px,transparent 1px 9px)}
body.concept-17.retro-library .view:not(.focus-view){background:#f7f0dd;background-image:repeating-linear-gradient(0deg,transparent 0 29px,rgba(80,107,77,.09) 30px);background-size:auto 30px}
body.concept-17.retro-library main{padding:18px 19px 108px}
body.concept-17.retro-library .topbar{margin:0 0 18px;padding:14px 15px 12px;border:2px solid #273f39;border-radius:0;background:#f7f0dd;box-shadow:4px 4px 0 rgba(39,63,57,.14)}
body.concept-17.retro-library .topbar::before{top:auto;bottom:-2px;left:11px;right:11px;width:auto;height:5px;background:repeating-linear-gradient(90deg,#a75a35 0 18px,transparent 18px 26px)}
body.concept-17.retro-library .topbar h1{font-family:Georgia,"Songti SC",serif;font-size:28px;color:#273f39}.retro-library .topbar::after{content:"CIRCULATION DESK";right:14px;top:15px;color:#a75a35;font:9px "Courier New",monospace;letter-spacing:1px}
body.concept-17.retro-library .profile-card{height:146px;border:2px solid #273f39;border-radius:0;background:#e5d7b8;box-shadow:4px 4px 0 rgba(39,63,57,.12)}.retro-library .profile-card img{width:112px;height:146px;border-right:2px solid #273f39;filter:grayscale(.45) sepia(.28) contrast(.95)}
body.concept-17.retro-library .profile-card::after{content:"BORROWER CARD";position:absolute;right:12px;bottom:10px;color:#a75a35;font:9px "Courier New",monospace;letter-spacing:1px}.retro-library .profile-card h2{font-family:Georgia,"Songti SC",serif;color:#273f39}
body.concept-17.retro-library .mood-section .section-head{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;padding:10px 0 7px;border-bottom:2px solid #273f39}.retro-library .mood-section .section-head h2{font-family:Georgia,"Songti SC",serif;color:#273f39}.retro-library .mood-section .section-head h2::after{content:"  /  TODAY'S BORROWINGS";display:block;margin-top:3px;color:#7b806d;font:8px "Courier New",monospace;letter-spacing:.7px}
body.concept-17.retro-library .mood-grid{grid-template-columns:1fr;gap:0;padding:0;border:2px solid #273f39;background:#f7f0dd}
body.concept-17.retro-library .mood-card{display:grid;grid-template-columns:70px 1fr 44px;grid-template-rows:auto auto;align-items:center;min-height:88px;padding:0;border:0;border-bottom:1px solid #b9aa86;border-radius:0;background:transparent;box-shadow:none;transform:none}.retro-library .mood-card:last-child{border-bottom:0}
body.concept-17.retro-library .mood-card img{grid-row:1 / span 2;width:70px;height:87px;aspect-ratio:auto;border:0;border-right:1px solid #b9aa86;border-radius:0;box-shadow:none;filter:grayscale(.5) sepia(.18) brightness(1.13)}.retro-library .mood-card span{margin:0;padding:0 10px;color:#273f39;font-family:Georgia,"Songti SC",serif;font-size:16px}.retro-library .mood-card small{padding:2px 10px;color:#71755f;font-size:10px}.retro-library .mood-card::before{content:"DUE";grid-column:3;grid-row:1 / span 2;color:#a75a35;font:9px "Courier New",monospace;letter-spacing:1px;transform:rotate(-90deg)}
body.concept-17.retro-library .mood-card.selected{transform:none;box-shadow:inset 6px 0 #a75a35}.retro-library .mood-card.selected:after{right:10px;top:11px;border:1px solid #a75a35;border-radius:0;color:#a75a35;background:#f7f0dd;font:8px "Courier New",monospace}
body.concept-17.retro-library .bottom-nav{height:58px;border:2px solid #273f39;border-radius:0;background:#e5d7b8;box-shadow:0 -3px 0 rgba(39,63,57,.08)}.retro-library .bottom-nav button.active{color:#f7f0dd;background:#273f39;border-radius:0}.retro-library .bottom-nav button.active:after{background:#a75a35}

/* Retro variant: flower-shop lookbook with botanical specimen labels. */
body.concept-17.retro-florist:not(.focus-mode){--panel-ink:#405637;--panel-muted:#78805d;--panel-line:#bdc48f;--panel-sage:#617443;--panel-clay:#bd7139;background:#f4edc8;background-image:radial-gradient(rgba(64,86,55,.12) .65px,transparent .8px);background-size:5px 5px}
body.concept-17.retro-florist .view:not(.focus-view){background:#fffdf2;background-image:linear-gradient(90deg,rgba(189,113,57,.07) 1px,transparent 1px),linear-gradient(rgba(97,116,67,.06) 1px,transparent 1px);background-size:22px 22px}
body.concept-17.retro-florist main{padding:20px 17px 114px}
body.concept-17.retro-florist .topbar{position:relative;margin:0 0 18px;padding:15px 15px 16px;border:0;border-top:6px solid #405637;border-bottom:1px solid #bdc48f;border-radius:0;background:#fffdf2;box-shadow:none}.retro-florist .topbar::before{top:12px;left:auto;right:15px;width:30px;height:30px;border:2px solid #bd7139;border-radius:50%;background:radial-gradient(circle,#fffdf2 0 28%,#bd7139 30% 35%,transparent 37%)}.retro-florist .topbar::after{content:"FLOWER NOTE / 1974";right:54px;top:22px;color:#617443;font:8px "Courier New",monospace;letter-spacing:1px}.retro-florist .topbar h1{font-family:Georgia,"Songti SC",serif;color:#405637;font-size:28px}
body.concept-17.retro-florist .profile-card{height:168px;border:0;border-radius:0;background:#405637;box-shadow:7px 7px 0 #e3c46b;overflow:visible}.retro-florist .profile-card img{width:138px;height:168px;border:0;filter:sepia(.22) saturate(.62) brightness(1.18);mix-blend-mode:screen}.retro-florist .profile-card h2,.retro-florist .profile-card p,.retro-florist .profile-card span{color:#fffbed}.retro-florist .profile-card::after{content:"HERBARIUM No. 12";position:absolute;right:-5px;bottom:-17px;padding:5px 8px;border:1px solid #405637;color:#405637;background:#fff6cf;transform:rotate(-3deg);font:9px "Courier New",monospace;letter-spacing:.7px}
body.concept-17.retro-florist .mood-section{margin-top:35px}.retro-florist .mood-section .section-head{position:relative;margin-bottom:13px;padding:9px 11px;border:1px solid #405637;background:#ecf0cf}.retro-florist .mood-section .section-head h2{font-family:Georgia,"Songti SC",serif;color:#405637}.retro-florist .mood-section .section-head::after{content:"SEASONAL MOODS";position:absolute;right:10px;top:13px;color:#bd7139;font:8px "Courier New",monospace;letter-spacing:.8px}
body.concept-17.retro-florist .mood-grid{gap:13px;padding:0;border:0;background:transparent}.retro-florist .mood-card{padding:5px 5px 11px;border:1px solid #405637;border-radius:0;background:#fffdf2;box-shadow:4px 5px 0 rgba(64,86,55,.13)}.retro-florist .mood-card:nth-child(odd){transform:rotate(-.7deg)}.retro-florist .mood-card:nth-child(even){transform:rotate(.7deg)}.retro-florist .mood-card img{border:0;border-bottom:5px solid #bd7139;border-radius:0;box-shadow:none;filter:sepia(.08) saturate(.72) brightness(1.14)}.retro-florist .mood-card span{padding-top:2px;color:#405637;font-family:Georgia,"Songti SC",serif;font-size:15px}.retro-florist .mood-card small{color:#78805d}.retro-florist .mood-card.selected{transform:translateY(-4px) rotate(-.7deg);box-shadow:6px 7px 0 #e3c46b,0 0 0 2px #405637}.retro-florist .mood-card.selected:after{border:1px solid #bd7139;border-radius:0;color:#405637;background:#fff6cf}
body.concept-17.retro-florist .bottom-nav{height:66px;border:0;border-top:5px solid #405637;border-radius:0;background:#fff6cf;box-shadow:0 -3px 0 rgba(64,86,55,.08)}.retro-florist .bottom-nav button{color:#78805d}.retro-florist .bottom-nav button.active{color:#405637;background:#ecf0cf;border-radius:2px}.retro-florist .bottom-nav button.active:after{background:#bd7139}

/* Still-life cafe: paper journals, planner pages, and a painted tabletop timer. */
body.concept-17.retro-stilllife{
  --still-ink:#3f4932;
  --still-muted:#81785f;
  --still-olive:#56643f;
  --still-forest:#314737;
  --still-rust:#a85d35;
  --still-mustard:#d9aa48;
  --still-walnut:#6e452d;
  --still-rule:#d7c9a5;
  --still-paper:#fffdf4;
  --still-note:#fff2cf;
}
body.concept-17.retro-stilllife *{letter-spacing:0!important}
body.concept-17.retro-stilllife:not(.focus-mode){
  --panel-ink:var(--still-ink);
  --panel-muted:var(--still-muted);
  --panel-line:var(--still-rule);
  --panel-sage:var(--still-olive);
  --panel-clay:var(--still-rust);
  color:var(--still-ink);
  background:#e5ddc5;
  background-image:repeating-linear-gradient(90deg,rgba(78,69,45,.035) 0 1px,transparent 1px 8px);
}
body.concept-17.retro-stilllife:not(.focus-mode) .app-shell{
  width:min(100%,520px);
  border:1px solid #cdbd93;
  border-radius:0;
  background:var(--still-paper);
  box-shadow:7px 9px 0 rgba(82,71,43,.1);
}
body.concept-17.retro-stilllife main{padding:20px 18px 158px}
body.concept-17.retro-stilllife .view:not(.focus-view){
  background-color:var(--still-paper);
  background-image:radial-gradient(rgba(86,78,53,.075) .55px,transparent .7px);
  background-size:5px 5px;
}
body.concept-17.retro-stilllife .eyebrow,
body.concept-17.retro-stilllife .panel-label{
  color:var(--still-rust);
  font-family:"Courier New",monospace;
  font-size:9px;
}
body.concept-17.retro-stilllife .topbar{
  margin:0 0 13px;
  padding:3px 0 12px;
  border:0;
  border-bottom:3px double var(--still-olive);
  border-radius:0;
  background:transparent;
}
body.concept-17.retro-stilllife .topbar::before{display:none}
body.concept-17.retro-stilllife .topbar::after{
  content:"CAFE JOURNAL / 012";
  right:0;
  top:9px;
  color:var(--still-walnut);
  font:9px "Courier New",monospace;
}
body.concept-17.retro-stilllife .topbar h1,
body.concept-17.retro-stilllife .page-title h1,
body.concept-17.retro-stilllife .section-head h2,
body.concept-17.retro-stilllife .subject-stats h2{
  color:var(--still-ink);
  font-family:Georgia,"Songti SC",serif;
}
body.concept-17.retro-stilllife .topbar h1{font-size:26px}
body.concept-17.retro-stilllife .topbar .icon-button{display:none}

/* Today becomes a cafe journal page rather than a character dashboard. */
body.concept-17.retro-stilllife .companion-band{
  height:350px;
  margin:0;
  overflow:hidden;
  border:1px solid var(--still-olive);
  border-width:1px 0 3px;
  border-radius:0;
  background-color:#f5edd5;
  background-image:url("assets/retro-cafe-still-life.png");
  background-position:center 58%;
  background-size:cover;
  background-repeat:no-repeat;
  box-shadow:none;
}
body.concept-17.retro-stilllife .companion-band::before{
  z-index:1;
  background:linear-gradient(90deg,rgba(255,253,244,.98) 0%,rgba(255,253,244,.9) 39%,rgba(255,253,244,.26) 63%,transparent 78%);
}
body.concept-17.retro-stilllife .companion-band::after{
  content:"TABLE 04 / DAY 12";
  z-index:4;
  right:auto;
  top:auto;
  bottom:15px;
  left:17px;
  color:var(--still-walnut);
  font:9px "Courier New",monospace;
  text-shadow:none;
}
body.concept-17.retro-stilllife .companion-band img{display:none}
body.concept-17.retro-stilllife .companion-copy{
  z-index:3;
  padding:17px 17px 18px;
}
body.concept-17.retro-stilllife .status-pill{
  padding:5px 0;
  border:0;
  border-bottom:1px solid var(--still-rust);
  border-radius:0;
  color:var(--still-olive);
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  font:700 9px "Courier New",monospace;
}
body.concept-17.retro-stilllife .status-pill i{
  width:6px;
  height:6px;
  border-radius:0;
  background:var(--still-rust);
  transform:rotate(45deg);
}
body.concept-17.retro-stilllife .speech{
  max-width:54%;
  margin:52px 0 auto;
  padding:0;
  border:0;
  border-radius:0;
  color:var(--still-forest);
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  font-family:Georgia,"Songti SC",serif;
  font-size:20px;
  font-weight:700;
  line-height:1.55;
}
body.concept-17.retro-stilllife .speech::after{display:none}
body.concept-17.retro-stilllife .level-row{
  display:flex;
  width:52%;
  color:var(--still-walnut);
  font:9px "Courier New",monospace;
  text-shadow:none;
}
body.concept-17.retro-stilllife .level-track{
  display:block;
  width:52%;
  height:4px;
  margin-top:6px;
  border:1px solid var(--still-olive);
  border-radius:0;
  background:#f7edcd;
}
body.concept-17.retro-stilllife .level-track span{background:var(--still-mustard)}
body.concept-17.retro-stilllife .progress-panel{
  grid-template-columns:52px 1fr auto;
  gap:12px;
  margin:-18px 13px 27px;
  padding:13px 14px;
  overflow:visible;
  border:1px solid var(--still-walnut);
  border-radius:0;
  background:#f8e9ba;
  box-shadow:4px 4px 0 rgba(110,69,45,.15);
  backdrop-filter:none;
  transform:rotate(-.35deg);
}
body.concept-17.retro-stilllife .progress-panel::before{
  content:"";
  position:absolute;
  top:5px;
  right:6px;
  left:6px;
  width:auto;
  height:0;
  border-top:1px dashed rgba(110,69,45,.45);
  border-radius:0;
  background:none;
}
body.concept-17.retro-stilllife .progress-panel::after{
  content:"ORDER 012";
  position:absolute;
  right:51px;
  bottom:-11px;
  width:auto;
  height:auto;
  color:rgba(168,93,53,.72);
  background:none;
  font:700 8px "Courier New",monospace;
  transform:rotate(5deg);
}
body.concept-17.retro-stilllife .progress-ring{
  width:50px;
  height:50px;
  border:2px double var(--still-rust);
  border-radius:50%;
  background:#fff7da!important;
  box-shadow:none;
}
body.concept-17.retro-stilllife .progress-ring::after{display:none}
body.concept-17.retro-stilllife .progress-ring span{
  color:var(--still-rust);
  font-family:"Courier New",monospace;
}
body.concept-17.retro-stilllife .progress-panel h2{
  color:var(--still-forest);
  font-family:Georgia,"Songti SC",serif;
  font-size:16px;
}
body.concept-17.retro-stilllife .progress-panel p:not(.panel-label){color:#7d6e53}
body.concept-17.retro-stilllife .text-button{
  padding:5px 6px;
  border:1px solid var(--still-rust);
  color:var(--still-rust);
  background:rgba(255,253,244,.48);
  font:700 10px "Courier New",monospace;
  transform:rotate(2deg);
}
body.concept-17.retro-stilllife .section-head{
  align-items:end;
  margin:26px 0 10px;
  padding-bottom:7px;
  border-bottom:1px solid var(--still-rule);
}
body.concept-17.retro-stilllife .section-head h2{font-size:20px}
body.concept-17.retro-stilllife .time-chip,
body.concept-17.retro-stilllife .filter-button{
  padding:4px 0;
  border:0;
  border-bottom:1px dashed var(--still-rust);
  border-radius:0;
  color:var(--still-walnut);
  background:transparent;
  box-shadow:none;
  font:700 9px "Courier New",monospace;
}
body.concept-17.retro-stilllife .next-task{
  position:relative;
  padding:15px 13px;
  overflow:visible;
  border:1px solid #c88f4b;
  border-left:5px solid var(--still-rust);
  border-radius:0;
  background:var(--still-note);
  box-shadow:3px 4px 0 rgba(110,69,45,.11);
  transform:rotate(.3deg);
}
body.concept-17.retro-stilllife .next-task::after{
  content:"NEXT";
  position:absolute;
  top:-9px;
  right:13px;
  bottom:auto;
  width:auto;
  height:auto;
  padding:3px 6px;
  border:1px solid var(--still-rust);
  color:var(--still-rust);
  background:var(--still-paper);
  font:700 8px "Courier New",monospace;
  opacity:1;
  filter:none;
}
body.concept-17.retro-stilllife .next-task:hover{
  box-shadow:3px 4px 0 rgba(110,69,45,.11);
  transform:rotate(.3deg);
}
body.concept-17.retro-stilllife .subject-badge,
body.concept-17.retro-stilllife .subject-badge.blue,
body.concept-17.retro-stilllife .subject-badge.green,
body.concept-17.retro-stilllife .subject-badge.coral{
  width:36px;
  height:36px;
  border:1px solid var(--still-walnut);
  border-radius:0;
  color:var(--still-walnut);
  background:#fffaf0;
  box-shadow:2px 2px 0 rgba(110,69,45,.1);
}
body.concept-17.retro-stilllife .start-button,
body.concept-17.retro-stilllife .primary-action{
  border:1px solid var(--still-forest);
  border-radius:0;
  color:#fff9e8;
  background:var(--still-forest);
  box-shadow:0 3px 0 #203128;
}
body.concept-17.retro-stilllife .task-list{
  position:relative;
  display:grid;
  gap:0;
  padding:5px 0 5px 22px;
  overflow:hidden;
  border:1px solid var(--still-rule);
  border-radius:0;
  background-color:#fffdf6;
  background-image:repeating-linear-gradient(0deg,transparent 0 66px,rgba(100,113,75,.18) 66px 67px);
  box-shadow:none;
}
body.concept-17.retro-stilllife .task-list::before{
  content:"";
  position:absolute;
  display:block;
  top:0;
  bottom:0;
  left:14px;
  width:1px;
  height:auto;
  background:rgba(168,93,53,.5);
}
body.concept-17.retro-stilllife .task-list::after{display:none}
body.concept-17.retro-stilllife .task-item,
body.concept-17.retro-stilllife .task-item:nth-child(1),
body.concept-17.retro-stilllife .task-item:nth-child(2),
body.concept-17.retro-stilllife .task-item:nth-child(3),
body.concept-17.retro-stilllife .task-item:nth-child(4){
  min-height:67px;
  margin:0;
  padding:10px 8px 10px 4px;
  border:0;
  border-bottom:1px solid rgba(215,201,165,.55);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body.concept-17.retro-stilllife .task-item:last-child{border-bottom:0}
body.concept-17.retro-stilllife .task-item:hover{
  box-shadow:inset 4px 0 0 rgba(86,100,63,.2);
  transform:none;
}
body.concept-17.retro-stilllife .task-item .subject-badge{
  width:31px;
  height:31px;
  border-color:#b9aa82;
  box-shadow:none;
}
body.concept-17.retro-stilllife .check{
  width:20px;
  height:20px;
  border:1px solid var(--still-olive);
  border-radius:0;
  color:#fff9e8;
  background:transparent;
  box-shadow:none;
}
body.concept-17.retro-stilllife .task-item.done .check{
  border-color:var(--still-olive);
  background:var(--still-olive);
}
body.concept-17.retro-stilllife .task-copy h3{white-space:normal}
body.concept-17.retro-stilllife .task-menu{color:#9c825d}

/* Inner pages use distinct planner and receipt structures. */
body.concept-17.retro-stilllife .page-title{
  position:relative;
  min-height:0;
  margin:0 0 17px;
  padding:8px 0 18px;
  overflow:visible;
  border:0;
  border-bottom:3px double var(--still-olive);
  border-left:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body.concept-17.retro-stilllife .page-title h1{font-size:28px}
body.concept-17.retro-stilllife .page-title p:last-child{
  max-width:72%;
  color:var(--still-muted);
  font-size:12px;
}
body.concept-17.retro-stilllife .page-title::before{
  display:block;
  content:"CAFE PAPER / VOL. 12";
  position:absolute;
  top:10px;
  right:0;
  left:auto;
  width:112px;
  color:var(--still-rust);
  background:none;
  box-shadow:none;
  font:8px "Courier New",monospace;
  line-height:1.35;
  text-align:right;
  white-space:normal;
  opacity:1;
  transform:none;
}
body.concept-17.retro-stilllife .page-title::after{
  content:"";
  position:absolute;
  display:block;
  right:0;
  bottom:-7px;
  width:44px;
  height:12px;
  border:0;
  border-radius:0;
  background:var(--still-paper);
  opacity:1;
  filter:none;
}
body.concept-17.retro-stilllife .course-plant,
body.concept-17.retro-stilllife .profile-plant{display:none}
body.concept-17.retro-stilllife #course-view{
  background-image:linear-gradient(90deg,rgba(168,93,53,.12) 1px,transparent 1px),linear-gradient(rgba(86,100,63,.09) 1px,transparent 1px);
  background-size:58px 29px,58px 29px;
}
body.concept-17.retro-stilllife #course-view .page-title::before{content:"WEEKLY PLANNER / JUL 20-26"}
body.concept-17.retro-stilllife #course-view .page-title::after{
  content:"WEEK 30";
  right:8px;
  bottom:-18px;
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:2px double var(--still-rust);
  border-radius:50%;
  color:var(--still-rust);
  background:#fff9e8;
  font:700 8px "Courier New",monospace;
  transform:rotate(8deg);
}
body.concept-17.retro-stilllife .week-strip{
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:0;
  margin-top:24px;
  padding:0;
  overflow:hidden;
  border:1px solid var(--still-olive);
  border-radius:0;
  background:#fff9e8;
  box-shadow:3px 3px 0 rgba(86,100,63,.1);
}
body.concept-17.retro-stilllife .week-strip::after{display:none}
body.concept-17.retro-stilllife .week-day{
  padding:9px 0;
  border-right:1px solid var(--still-rule);
  border-radius:0;
  color:var(--still-muted);
  background:transparent;
  font-family:"Courier New",monospace;
}
body.concept-17.retro-stilllife .week-day:last-child{border-right:0}
body.concept-17.retro-stilllife .week-day strong{color:var(--still-walnut)}
body.concept-17.retro-stilllife .week-day.active{
  color:#fff8e5;
  background:var(--still-olive);
  box-shadow:inset 0 -5px 0 var(--still-mustard);
}
body.concept-17.retro-stilllife .week-day.active strong{color:#fff8e5}
body.concept-17.retro-stilllife .timeline{
  position:relative;
  margin-top:24px;
  padding:0 0 0 2px;
  border-top:1px solid var(--still-rule);
  background:rgba(255,253,244,.72);
}
body.concept-17.retro-stilllife .timeline::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:57px;
  border-left:2px solid rgba(168,93,53,.42);
}
body.concept-17.retro-stilllife .timeline article{
  position:relative;
  z-index:1;
  grid-template-columns:45px 1fr;
  gap:15px;
  margin:0;
  padding:9px 0;
  border-bottom:1px solid var(--still-rule);
}
body.concept-17.retro-stilllife .timeline time{
  padding-top:12px;
  color:var(--still-walnut);
  font:700 10px "Courier New",monospace;
}
body.concept-17.retro-stilllife .class-block{
  position:relative;
  min-height:72px;
  padding:12px 14px;
  overflow:visible;
  border:0;
  border-left:4px solid var(--still-walnut);
  border-radius:0;
  background:#f8edcf;
  box-shadow:none;
}
body.concept-17.retro-stilllife .class-block::before{
  content:"";
  position:absolute;
  top:16px;
  left:-23px;
  width:7px;
  height:7px;
  border:2px solid var(--still-paper);
  border-radius:50%;
  background:var(--still-walnut);
  box-shadow:0 0 0 1px var(--still-rust);
}
body.concept-17.retro-stilllife .class-block::after{display:none}
body.concept-17.retro-stilllife .class-block span{
  color:var(--still-rust);
  font-family:"Courier New",monospace;
}
body.concept-17.retro-stilllife .class-block h3{
  color:var(--still-forest);
  font-family:Georgia,"Songti SC",serif;
}
body.concept-17.retro-stilllife .class-block p{color:var(--still-muted)}
body.concept-17.retro-stilllife .blue-block{
  border-left-color:var(--still-walnut);
  background:#f7e6c8;
}
body.concept-17.retro-stilllife .green-block{
  border-left-color:var(--still-olive);
  background:#e9edcf;
}
body.concept-17.retro-stilllife .coral-block{
  border-left-color:var(--still-rust);
  background:#f8dfc7;
}
body.concept-17.retro-stilllife .exam-card{
  position:relative;
  margin-top:24px;
  padding:18px 92px 18px 18px;
  overflow:hidden;
  border:1px solid var(--still-walnut);
  border-top:5px solid var(--still-olive);
  border-radius:0;
  background:#f3dd9f;
  box-shadow:4px 4px 0 rgba(110,69,45,.14);
}
body.concept-17.retro-stilllife .exam-card::before{
  content:"FINAL";
  position:absolute;
  top:18px;
  right:18px;
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border:2px double var(--still-rust);
  border-radius:50%;
  color:var(--still-rust);
  background:transparent;
  font:700 9px "Courier New",monospace;
  opacity:1;
  transform:rotate(-8deg);
}
body.concept-17.retro-stilllife .exam-card::after{
  content:"COUNTDOWN / TERM 01";
  right:16px;
  bottom:9px;
  color:var(--still-walnut);
  font:700 8px "Courier New",monospace;
  transform:none;
}
body.concept-17.retro-stilllife .exam-card strong{
  color:var(--still-rust);
  font-family:Georgia,"Songti SC",serif;
}

/* Weekly statistics read as one continuous cafe receipt and ledger. */
body.concept-17.retro-stilllife #stats-view .page-title::before{content:"WEEKLY RECEIPT / NO. 035"}
body.concept-17.retro-stilllife .stat-hero{
  position:relative;
  padding:19px 20px;
  overflow:visible;
  border:1px solid var(--still-walnut);
  border-width:1px 0;
  border-radius:0;
  background:#edf0d6;
  box-shadow:none;
}
body.concept-17.retro-stilllife .stat-hero::before{
  content:"WEEK 30";
  position:absolute;
  top:10px;
  right:12px;
  color:var(--still-rust);
  font:700 8px "Courier New",monospace;
}
body.concept-17.retro-stilllife .stat-hero::after{
  content:"VERIFIED";
  position:absolute;
  right:20px;
  bottom:-8px;
  left:auto;
  display:grid;
  place-items:center;
  width:55px;
  height:25px;
  border:2px solid rgba(168,93,53,.72);
  border-radius:0;
  color:rgba(168,93,53,.8);
  background:#fff9e8;
  font:700 8px "Courier New",monospace;
  opacity:1;
  transform:rotate(-6deg);
}
body.concept-17.retro-stilllife .stat-hero span,
body.concept-17.retro-stilllife .stat-hero p{color:var(--still-muted)}
body.concept-17.retro-stilllife .stat-hero strong{
  color:var(--still-forest);
  font-family:Georgia,"Songti SC",serif;
  font-size:31px;
}
body.concept-17.retro-stilllife .mini-ring{
  width:67px;
  height:67px;
  border:2px double var(--still-rust);
  border-radius:50%;
  color:var(--still-rust);
  background:#fff8e5;
  box-shadow:none;
  font-family:"Courier New",monospace;
  transform:rotate(7deg);
}
body.concept-17.retro-stilllife .chart-panel{
  margin-top:22px;
  padding:17px 15px 14px;
  border:1px solid var(--still-rule);
  border-left:4px solid var(--still-olive);
  border-radius:0;
  background-color:#fffdf6;
  background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(86,100,63,.11) 27px 28px);
  box-shadow:none;
}
body.concept-17.retro-stilllife .chart-head{
  padding-bottom:8px;
  border-bottom:1px solid var(--still-walnut);
}
body.concept-17.retro-stilllife .chart-head h2{
  margin:0;
  color:var(--still-forest);
  font-family:Georgia,"Songti SC",serif;
}
body.concept-17.retro-stilllife .chart-head span{
  padding:3px 5px;
  border:1px solid var(--still-rust);
  border-radius:0;
  color:var(--still-rust);
  font:700 8px "Courier New",monospace;
}
body.concept-17.retro-stilllife .bar-chart{height:154px}
body.concept-17.retro-stilllife .bar-col i{
  max-width:22px;
  border:1px solid rgba(63,73,50,.28);
  border-bottom:0;
  border-radius:0;
  background:#c79458;
  box-shadow:none;
}
body.concept-17.retro-stilllife .bar-col:nth-child(2n) i{background:#7e8d5c}
body.concept-17.retro-stilllife .bar-col:nth-child(3n) i{background:#c66f45}
body.concept-17.retro-stilllife .bar-col.active i{
  background:var(--still-forest);
  box-shadow:inset 0 0 0 3px rgba(255,248,229,.16);
}
body.concept-17.retro-stilllife .bar-col span{
  color:var(--still-walnut);
  font-family:"Courier New",monospace;
}
body.concept-17.retro-stilllife .subject-stats{
  position:relative;
  margin-top:16px;
  padding:15px 0 0;
  overflow:hidden;
  border:1px solid var(--still-walnut);
  border-radius:0;
  background:#fff8e5;
  box-shadow:4px 4px 0 rgba(110,69,45,.09);
}
body.concept-17.retro-stilllife .subject-stats h2{padding:0 15px 10px;font-size:19px}
body.concept-17.retro-stilllife .subject-stats::after{
  content:"SUBJECT LEDGER";
  position:absolute;
  top:18px;
  right:13px;
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  color:var(--still-rust);
  background:none;
  font:700 8px "Courier New",monospace;
  transform:none;
}
body.concept-17.retro-stilllife .subject-stats>div{
  grid-template-columns:12px 1fr 48px;
  gap:10px;
  padding:12px 15px;
  border-top:1px solid var(--still-rule);
  background:transparent;
}
body.concept-17.retro-stilllife .subject-stats strong{
  color:var(--still-walnut);
  font-family:"Courier New",monospace;
  text-align:right;
}
body.concept-17.retro-stilllife .dot{width:9px;height:9px;border-radius:0}
body.concept-17.retro-stilllife .blue-dot{background:var(--still-walnut)}
body.concept-17.retro-stilllife .green-dot{background:var(--still-olive)}
body.concept-17.retro-stilllife .coral-dot{background:var(--still-rust)}

/* Keep the accepted profile composition, but merge it into the new system. */
body.concept-17.retro-stilllife #profile-view .page-title::before{content:"MEMBER'S CORNER / TABLE 04"}
body.concept-17.retro-stilllife .profile-card{
  display:block;
  height:390px;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:#fffdf6 url("assets/retro-cafe-still-life.png") center / cover no-repeat;
  box-shadow:none;
}
body.concept-17.retro-stilllife .profile-card img,
body.concept-17.retro-stilllife .profile-card>div{display:none}
body.concept-17.retro-stilllife .profile-card::before{
  content:"一个慢一点的下午";
  position:absolute;
  left:20px;
  top:26px;
  color:var(--still-olive);
  font-family:Georgia,"Songti SC",serif;
  font-size:25px;
  font-weight:700;
}
body.concept-17.retro-stilllife .profile-card::after{
  content:"咖啡 · 绿叶 · 一页笔记";
  position:absolute;
  left:20px;
  top:64px;
  color:var(--still-muted);
  font:10px "Courier New",monospace;
}
body.concept-17.retro-stilllife .mood-section{margin-top:22px}
body.concept-17.retro-stilllife .mood-section .section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin:0 0 10px;
  padding:0 0 7px;
  border-bottom:1px solid var(--still-rule);
  background:transparent;
}
body.concept-17.retro-stilllife .mood-section .section-head h2{
  color:var(--still-ink);
  font-family:Georgia,"Songti SC",serif;
  font-size:20px;
}
body.concept-17.retro-stilllife .mood-section .section-head h2::after{
  content:" / PICK A NOTE";
  color:var(--still-rust);
  font:8px "Courier New",monospace;
}
body.concept-17.retro-stilllife .mood-current{
  max-width:43%;
  padding:0 0 3px;
  border:0;
  border-bottom:1px dashed var(--still-rust);
  border-radius:0;
  color:var(--still-walnut);
  background:transparent;
  box-shadow:none;
  font-size:9px;
  text-align:right;
}
body.concept-17.retro-stilllife .mood-grid{
  grid-template-columns:1fr 1fr;
  gap:9px;
  padding:0;
  border:0;
  background:transparent;
}
body.concept-17.retro-stilllife .mood-card{
  min-height:82px;
  padding:12px 11px 10px;
  border:1px solid #d6c5a1;
  border-radius:0;
  background:#fff8e8;
  box-shadow:2px 3px 0 rgba(120,93,56,.07);
  transform:none;
}
body.concept-17.retro-stilllife .mood-card:nth-child(2){background:#edf0d4}
body.concept-17.retro-stilllife .mood-card:nth-child(3){background:#f8dfc7}
body.concept-17.retro-stilllife .mood-card:nth-child(4){background:#e8eee1}
body.concept-17.retro-stilllife .mood-card img{display:none}
body.concept-17.retro-stilllife .mood-card span{
  margin:0;
  padding:0;
  color:var(--still-ink);
  font-family:Georgia,"Songti SC",serif;
  font-size:14px;
  white-space:normal;
}
body.concept-17.retro-stilllife .mood-card small{
  padding:5px 0 0;
  color:var(--still-muted);
  font-size:10px;
}
body.concept-17.retro-stilllife .mood-card.selected{
  transform:translateY(-3px) rotate(-1deg);
  box-shadow:3px 4px 0 #b6865d,0 0 0 1px var(--still-olive);
}
body.concept-17.retro-stilllife .mood-card.selected::after{
  right:8px;
  top:8px;
  border:0;
  border-radius:0;
  color:var(--still-rust);
  background:transparent;
  font:8px "Courier New",monospace;
}
body.concept-17.retro-stilllife .setting-list{
  margin-top:21px;
  border:0;
  border-top:2px solid var(--still-olive);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body.concept-17.retro-stilllife .setting-list button{
  padding:13px 2px;
  border-bottom:1px solid var(--still-rule);
  background:transparent;
}
body.concept-17.retro-stilllife .setting-list button>span{color:var(--still-rust)}

/* Shared controls are printed paper tabs instead of floating glass cards. */
body.concept-17.retro-stilllife .bottom-nav{
  bottom:max(8px,env(safe-area-inset-bottom));
  width:min(calc(100% - 16px),504px);
  height:68px;
  padding:0;
  overflow:hidden;
  border:1px solid var(--still-olive);
  border-top:4px solid var(--still-forest);
  border-radius:0;
  background:#f5e9c8;
  box-shadow:0 -5px 0 rgba(86,100,63,.08);
  backdrop-filter:none;
}
body.concept-17.retro-stilllife .bottom-nav button{
  position:relative;
  border:0;
  border-right:1px solid #cbbb90;
  border-radius:0;
  color:#857b5f;
  background:transparent;
}
body.concept-17.retro-stilllife .bottom-nav button:last-child{border-right:0}
body.concept-17.retro-stilllife .bottom-nav button+button::before{display:none}
body.concept-17.retro-stilllife .bottom-nav button span{
  color:inherit;
  font-size:18px;
}
body.concept-17.retro-stilllife .bottom-nav button.active{
  color:#fff8e5;
  background:var(--still-olive);
  box-shadow:inset 0 -5px 0 var(--still-mustard);
  transform:none;
}
body.concept-17.retro-stilllife .bottom-nav button.active::after{display:none}
body.concept-17.retro-stilllife .fab{
  left:calc(50% + min(260px,50vw) - 69px);
  bottom:max(88px,calc(env(safe-area-inset-bottom) + 80px));
  width:49px;
  height:49px;
  border:2px solid #fff8e5;
  border-radius:50%;
  color:#fff8e5;
  background:var(--still-rust);
  box-shadow:0 3px 0 var(--still-walnut),3px 6px 0 rgba(110,69,45,.12);
}
body.concept-17.retro-stilllife dialog{
  overflow:visible;
  border:2px solid var(--still-olive);
  border-radius:0;
  background:#fff8e5;
  box-shadow:7px 8px 0 rgba(49,71,55,.2);
  backdrop-filter:none;
}
body.concept-17.retro-stilllife dialog::before{
  content:"CAFE ORDER / NEW NOTE";
  position:absolute;
  top:-11px;
  left:18px;
  padding:4px 8px;
  border:1px solid var(--still-rust);
  color:var(--still-rust);
  background:var(--still-paper);
  font:700 8px "Courier New",monospace;
}
body.concept-17.retro-stilllife dialog::backdrop{background:rgba(49,71,55,.42)}
body.concept-17.retro-stilllife dialog .icon-button{
  border:1px solid var(--still-walnut);
  border-radius:0;
  color:var(--still-walnut);
  background:transparent;
  box-shadow:none;
}
body.concept-17.retro-stilllife input,
body.concept-17.retro-stilllife select{
  border:0;
  border-bottom:1px solid var(--still-walnut);
  border-radius:0;
  color:var(--still-ink);
  background:rgba(255,253,244,.72);
  box-shadow:none;
}
body.concept-17.retro-stilllife .toast{
  border:1px solid #fff8e5;
  border-radius:0;
  background:var(--still-forest);
}

/* Focus mode keeps the painted coffee, staged on a quiet vintage tabletop. */
body.concept-17.retro-stilllife.focus-mode{background:#263a30}
body.concept-17.retro-stilllife.focus-mode .app-shell{width:min(100%,520px)}
body.concept-17.retro-stilllife .focus-view.active{
  width:min(100%,520px);
  height:100dvh;
  min-height:100dvh;
  padding:82px 18px max(18px,env(safe-area-inset-bottom));
  overflow:hidden;
  background:#efe4c4;
}
body.concept-17.retro-stilllife .focus-view.active::before{
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  right:0;
  width:36%;
  height:63%;
  border-left:5px solid rgba(86,100,63,.38);
  background-color:#d9dfbd;
  background-image:linear-gradient(rgba(86,100,63,.32) 1px,transparent 1px),linear-gradient(90deg,rgba(86,100,63,.32) 1px,transparent 1px);
  background-size:100% 112px,58px 100%;
}
body.concept-17.retro-stilllife .focus-view.active::after{
  content:"";
  position:absolute;
  z-index:0;
  right:0;
  bottom:0;
  left:0;
  height:38%;
  border-top:5px solid #553522;
  background-color:#765038;
  background-image:repeating-linear-gradient(90deg,rgba(44,28,18,.2) 0 1px,transparent 1px 58px);
}
body.concept-17.retro-stilllife .focus-context{
  z-index:4;
  top:29px;
  color:var(--still-forest);
  font:700 10px "Courier New",monospace;
}
body.concept-17.retro-stilllife .focus-clock{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  width:auto;
  height:auto;
  padding:14px 25px 12px;
  border:3px double var(--still-olive);
  border-radius:0;
  color:var(--still-forest);
  background:#fff8dc;
  box-shadow:5px 5px 0 rgba(49,71,55,.2);
}
body.concept-17.retro-stilllife .focus-clock::before{
  content:"FOCUS ORDER";
  position:absolute;
  top:5px;
  left:8px;
  color:var(--still-rust);
  font:700 7px "Courier New",monospace;
}
body.concept-17.retro-stilllife .focus-clock strong{
  margin-top:7px;
  color:var(--still-forest);
  background:none;
  -webkit-background-clip:border-box;
  -webkit-text-fill-color:var(--still-forest);
  -webkit-text-stroke:0;
  font-family:"Courier New",monospace;
  font-size:76px;
  font-weight:700;
  text-shadow:none;
}
body.concept-17.retro-stilllife .focus-coffee{
  position:relative;
  z-index:2;
  margin-top:18px;
  filter:saturate(1.14) contrast(1.03);
}
body.concept-17.retro-stilllife .focus-coffee::before{
  content:"";
  position:absolute;
  z-index:-1;
  right:-40px;
  bottom:-23px;
  left:-40px;
  height:64px;
  border:2px solid rgba(54,39,27,.4);
  border-radius:50%;
  background:#d2ae6b;
  box-shadow:0 9px 0 rgba(54,39,27,.16);
  transform:scaleY(.32);
}
body.concept-17.retro-stilllife .focus-controls{
  z-index:6;
  right:18px;
  bottom:max(18px,env(safe-area-inset-bottom));
  left:18px;
  padding:16px;
  border:2px solid var(--still-olive);
  border-top:6px solid var(--still-forest);
  border-radius:0;
  background:#fff8dc;
  box-shadow:6px 7px 0 rgba(32,49,40,.28);
  backdrop-filter:none;
}
body.concept-17.retro-stilllife .focus-controls>p{
  color:var(--still-walnut);
  font:700 9px "Courier New",monospace;
}
body.concept-17.retro-stilllife .focus-controls .timer-presets{
  gap:0;
  margin-bottom:13px;
  border:1px solid var(--still-walnut);
}
body.concept-17.retro-stilllife .focus-controls .timer-presets button{
  flex:1;
  width:auto;
  min-width:0;
  height:35px;
  padding:0 8px;
  border:0;
  border-right:1px solid var(--still-walnut);
  border-radius:0;
  color:var(--still-walnut);
  background:#fffdf4;
  box-shadow:none;
  font-size:11px;
}
body.concept-17.retro-stilllife .focus-controls .timer-presets button:last-child{border-right:0}
body.concept-17.retro-stilllife .focus-controls .timer-presets button.selected{
  color:#fff8e5;
  background:var(--still-rust);
}
body.concept-17.retro-stilllife .focus-actions{grid-template-columns:64px 1fr 64px;gap:9px}
body.concept-17.retro-stilllife .focus-actions .quiet-action{
  color:var(--still-walnut);
  font-size:11px;
}
body.concept-17.retro-stilllife .focus-actions .primary-action{
  height:43px;
  border-color:var(--still-forest);
  background:var(--still-forest);
}

@media(min-width:760px){
  body.concept-17.retro-stilllife .bottom-nav{bottom:32px}
  body.concept-17.retro-stilllife .fab{bottom:112px}
}
@media(max-width:420px){
  body.concept-17.retro-stilllife main{padding-right:15px;padding-left:15px}
  body.concept-17.retro-stilllife .companion-band{height:335px}
  body.concept-17.retro-stilllife .speech{max-width:56%;font-size:18px}
  body.concept-17.retro-stilllife .focus-view.active{padding-top:72px}
  body.concept-17.retro-stilllife .focus-clock strong{font-size:68px}
}
@media(max-width:360px){
  body.concept-17.retro-stilllife .companion-band{height:310px}
  body.concept-17.retro-stilllife .speech{margin-top:42px;font-size:16px}
  body.concept-17.retro-stilllife .progress-panel{grid-template-columns:46px 1fr auto;margin-right:5px;margin-left:5px;padding-right:10px;padding-left:10px}
  body.concept-17.retro-stilllife .progress-ring{width:44px;height:44px}
  body.concept-17.retro-stilllife .progress-panel .text-button{display:block}
  body.concept-17.retro-stilllife .task-list{padding-left:17px}
  body.concept-17.retro-stilllife .task-list::before{left:10px}
  body.concept-17.retro-stilllife .week-day{font-size:9px}
  body.concept-17.retro-stilllife #course-view .page-title::after{width:44px;height:44px}
  body.concept-17.retro-stilllife .exam-card{padding-right:78px}
  body.concept-17.retro-stilllife .exam-card::before{right:12px;width:48px;height:48px}
  body.concept-17.retro-stilllife .focus-clock strong{font-size:60px}
  body.concept-17.retro-stilllife .focus-actions{grid-template-columns:56px 1fr 56px}
}
@media(max-height:700px){
  body.concept-17.retro-stilllife .focus-view.active{padding-top:45px}
  body.concept-17.retro-stilllife .focus-clock{padding-top:10px;padding-bottom:8px}
  body.concept-17.retro-stilllife .focus-clock strong{font-size:58px}
  body.concept-17.retro-stilllife .focus-coffee{margin-top:3px;transform:scale(.82)}
  body.concept-17.retro-stilllife .focus-controls{bottom:max(10px,env(safe-area-inset-bottom))}
}

/* Soft editorial pass: keep the vintage illustration, lose the rigid props. */
body.concept-17.retro-stilllife{
  --soft-canvas:#fbfaf5;
  --soft-paper:#f3ecdd;
  --soft-sage:#dce3c8;
  --soft-leaf:#829171;
  --soft-ink:#405442;
  --soft-walnut:#77513c;
  --soft-gold:#d7aa4e;
  --soft-clay:#a96848;
  --soft-line:rgba(64,84,66,.16);
  --still-ink:var(--soft-ink);
  --still-muted:#7f7b6e;
  --still-olive:var(--soft-leaf);
  --still-forest:var(--soft-ink);
  --still-rust:var(--soft-clay);
  --still-mustard:var(--soft-gold);
  --still-walnut:var(--soft-walnut);
  --still-rule:var(--soft-line);
  --still-paper:var(--soft-canvas);
  --still-note:var(--soft-paper);
}
body.concept-17.retro-stilllife:not(.focus-mode){
  color:var(--soft-ink);
  background:#e8e5da;
  background-image:none;
}
body.concept-17.retro-stilllife:not(.focus-mode) .app-shell{
  border:0;
  background:var(--soft-canvas);
  box-shadow:0 20px 50px rgba(67,74,55,.1);
}
body.concept-17.retro-stilllife .view:not(.focus-view){
  background-color:var(--soft-canvas);
  background-image:radial-gradient(rgba(64,84,66,.035) .45px,transparent .65px);
  background-size:7px 7px;
}
body.concept-17.retro-stilllife .eyebrow,
body.concept-17.retro-stilllife .panel-label{color:var(--soft-leaf)}
body.concept-17.retro-stilllife .topbar{
  padding-bottom:11px;
  border-bottom:1px solid var(--soft-line);
}
body.concept-17.retro-stilllife .topbar::after{
  display:none;
}
body.concept-17.retro-stilllife .topbar h1,
body.concept-17.retro-stilllife .page-title h1,
body.concept-17.retro-stilllife .section-head h2,
body.concept-17.retro-stilllife .subject-stats h2{color:var(--soft-ink)}
body.concept-17.retro-stilllife .topbar #notification-button{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:0;
  color:var(--soft-leaf);
  background:transparent;
  box-shadow:none;
}
body.concept-17.retro-stilllife .topbar #notification-button .notice-dot{border-color:var(--soft-canvas);background:var(--soft-clay)}

body.concept-17.retro-stilllife .companion-band{
  border:0;
  border-radius:4px;
  box-shadow:none;
}
body.concept-17.retro-stilllife .companion-band::before{
  background:linear-gradient(90deg,rgba(251,250,245,.98) 0%,rgba(251,250,245,.88) 38%,rgba(251,250,245,.18) 68%,transparent 82%);
}
body.concept-17.retro-stilllife .companion-band::after{
  color:var(--soft-walnut);
  opacity:.55;
}
body.concept-17.retro-stilllife .status-pill{
  border-bottom:0;
  color:var(--soft-leaf);
}
body.concept-17.retro-stilllife .status-pill i{background:var(--soft-clay)}
body.concept-17.retro-stilllife .speech{color:var(--soft-ink)}
body.concept-17.retro-stilllife .level-row{color:var(--soft-walnut)}
body.concept-17.retro-stilllife .level-track{
  height:3px;
  border:0;
  background:rgba(130,145,113,.2);
}
body.concept-17.retro-stilllife .level-track span{background:var(--soft-leaf)}
body.concept-17.retro-stilllife .progress-panel{
  margin-top:-20px;
  border:0;
  border-radius:4px;
  background:rgba(251,250,245,.94);
  box-shadow:0 10px 24px rgba(77,75,55,.12);
  transform:rotate(-.2deg);
}
body.concept-17.retro-stilllife .progress-panel::before,
body.concept-17.retro-stilllife .progress-panel::after{display:none}
body.concept-17.retro-stilllife .progress-ring{
  border:1px solid rgba(130,145,113,.58);
  background:var(--soft-sage)!important;
}
body.concept-17.retro-stilllife .progress-ring span{color:var(--soft-ink)}
body.concept-17.retro-stilllife .progress-panel h2{color:var(--soft-ink)}
body.concept-17.retro-stilllife .progress-panel p:not(.panel-label){color:#817d70}
body.concept-17.retro-stilllife .text-button{
  padding:5px 1px 3px;
  border:0;
  border-bottom:1px solid rgba(169,104,72,.5);
  color:var(--soft-clay);
  background:transparent;
  transform:none;
}
body.concept-17.retro-stilllife .section-head{
  padding-bottom:4px;
  border-bottom:0;
}
body.concept-17.retro-stilllife .time-chip,
body.concept-17.retro-stilllife .filter-button{
  border-bottom-color:rgba(130,145,113,.42);
  color:var(--soft-leaf);
}
body.concept-17.retro-stilllife .next-task{
  border:0;
  border-radius:5px;
  background:#eef1e6;
  box-shadow:0 6px 16px rgba(64,84,66,.07);
  transform:rotate(-.15deg);
}
body.concept-17.retro-stilllife .next-task::after{display:none}
body.concept-17.retro-stilllife .next-task:hover{
  box-shadow:0 6px 16px rgba(64,84,66,.07);
  transform:rotate(-.15deg);
}
body.concept-17.retro-stilllife .subject-badge,
body.concept-17.retro-stilllife .subject-badge.blue,
body.concept-17.retro-stilllife .subject-badge.green,
body.concept-17.retro-stilllife .subject-badge.coral{
  border:0;
  border-radius:50%;
  color:var(--soft-ink);
  background:rgba(251,250,245,.72);
  box-shadow:none;
}
body.concept-17.retro-stilllife .start-button,
body.concept-17.retro-stilllife .primary-action{
  border:0;
  border-radius:5px;
  background:var(--soft-ink);
  box-shadow:none;
}
body.concept-17.retro-stilllife .task-list{
  padding-left:0;
  overflow:visible;
  border:0;
  background:transparent;
}
body.concept-17.retro-stilllife .task-list::before{display:none}
body.concept-17.retro-stilllife .task-copy,
body.concept-17.retro-stilllife .class-block{min-width:0;overflow-wrap:anywhere}
body.concept-17.retro-stilllife .task-item,
body.concept-17.retro-stilllife .task-item:nth-child(1),
body.concept-17.retro-stilllife .task-item:nth-child(2),
body.concept-17.retro-stilllife .task-item:nth-child(3),
body.concept-17.retro-stilllife .task-item:nth-child(4){
  padding-right:4px;
  padding-left:4px;
  border-bottom:1px solid var(--soft-line);
}
body.concept-17.retro-stilllife .task-item:hover{box-shadow:inset 3px 0 rgba(130,145,113,.18)}
body.concept-17.retro-stilllife .task-item .subject-badge{
  border:0;
  background:var(--soft-paper);
}
body.concept-17.retro-stilllife .check{
  border:1px solid rgba(130,145,113,.65);
  border-radius:50%;
}
body.concept-17.retro-stilllife .task-item.done .check{background:var(--soft-leaf)}

body.concept-17.retro-stilllife .page-title{
  margin-bottom:22px;
  padding-bottom:16px;
  border-bottom:1px solid var(--soft-line);
}
body.concept-17.retro-stilllife .page-title p:last-child{color:#817d70}
body.concept-17.retro-stilllife .page-title::before,
body.concept-17.retro-stilllife .page-title::after{display:none}
body.concept-17.retro-stilllife #course-view .page-title::after{display:none}
body.concept-17.retro-stilllife #course-view{
  background-color:var(--soft-canvas);
  background-image:radial-gradient(rgba(64,84,66,.035) .45px,transparent .65px);
  background-size:7px 7px;
}
body.concept-17.retro-stilllife .week-strip{
  gap:4px;
  margin-top:0;
  padding:3px;
  overflow:visible;
  border:0;
  background:transparent;
  box-shadow:none;
}
body.concept-17.retro-stilllife .week-day{
  border:0;
  border-radius:4px;
  background:transparent;
}
body.concept-17.retro-stilllife .week-day strong{color:var(--soft-walnut)}
body.concept-17.retro-stilllife .week-day.active{
  color:var(--soft-ink);
  background:var(--soft-sage);
  box-shadow:inset 0 -3px 0 var(--soft-clay);
}
body.concept-17.retro-stilllife .week-day.active strong{color:var(--soft-ink)}
body.concept-17.retro-stilllife .timeline{
  margin-top:22px;
  border-top:0;
  background:transparent;
}
body.concept-17.retro-stilllife .timeline::before{
  left:56px;
  border-left:1px dashed rgba(130,145,113,.42);
}
body.concept-17.retro-stilllife .timeline article{
  padding:7px 0;
  border-bottom:0;
}
body.concept-17.retro-stilllife .class-block{
  border:0;
  border-radius:6px;
  background:#f7f4ea;
  box-shadow:inset 4px 0 var(--soft-walnut);
}
body.concept-17.retro-stilllife .timeline article:nth-child(odd) .class-block{transform:rotate(-.15deg)}
body.concept-17.retro-stilllife .timeline article:nth-child(even) .class-block{transform:rotate(.15deg)}
body.concept-17.retro-stilllife .class-block::before{
  border:2px solid var(--soft-canvas);
  background:var(--soft-leaf);
  box-shadow:none;
}
body.concept-17.retro-stilllife .class-block span{color:var(--soft-leaf)}
body.concept-17.retro-stilllife .class-block h3{color:var(--soft-ink)}
body.concept-17.retro-stilllife .blue-block{
  background:#f5f0e5;
  box-shadow:inset 4px 0 var(--soft-walnut);
}
body.concept-17.retro-stilllife .green-block{
  background:#eef1e6;
  box-shadow:inset 4px 0 var(--soft-leaf);
}
body.concept-17.retro-stilllife .coral-block{
  background:#f4e6dc;
  box-shadow:inset 4px 0 var(--soft-clay);
}
body.concept-17.retro-stilllife .exam-card{
  padding:18px 20px;
  border:0;
  border-radius:6px;
  background:var(--soft-paper);
  box-shadow:0 7px 18px rgba(119,81,60,.07);
}
body.concept-17.retro-stilllife .exam-card::before,
body.concept-17.retro-stilllife .exam-card::after{display:none}
body.concept-17.retro-stilllife .exam-card strong{color:var(--soft-clay)}

body.concept-17.retro-stilllife .stat-hero{
  padding:20px;
  border:0;
  border-radius:6px;
  background:#eef1e6;
}
body.concept-17.retro-stilllife .stat-hero::before,
body.concept-17.retro-stilllife .stat-hero::after{display:none}
body.concept-17.retro-stilllife .stat-hero strong{color:var(--soft-ink)}
body.concept-17.retro-stilllife .mini-ring{
  border:3px solid var(--soft-leaf);
  border-left-color:rgba(130,145,113,.25);
  color:var(--soft-ink);
  background:rgba(251,250,245,.76);
  transform:rotate(4deg);
}
body.concept-17.retro-stilllife .chart-panel{
  margin-top:20px;
  padding:17px 4px 12px;
  border:0;
  border-top:1px solid var(--soft-line);
  border-bottom:1px solid var(--soft-line);
  background:transparent;
}
body.concept-17.retro-stilllife .chart-head{
  padding:0 8px 8px;
  border-bottom:0;
}
body.concept-17.retro-stilllife .chart-head h2{color:var(--soft-ink)}
body.concept-17.retro-stilllife .chart-head span{
  border:0;
  color:var(--soft-leaf);
}
body.concept-17.retro-stilllife .bar-col i,
body.concept-17.retro-stilllife .bar-col:nth-child(2n) i,
body.concept-17.retro-stilllife .bar-col:nth-child(3n) i{
  border:0;
  border-radius:4px 4px 1px 1px;
  background:var(--soft-leaf);
  opacity:.78;
}
body.concept-17.retro-stilllife .bar-col.active i{
  background:var(--soft-gold);
  box-shadow:none;
  opacity:1;
}
body.concept-17.retro-stilllife .subject-stats{
  margin-top:12px;
  padding-top:14px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body.concept-17.retro-stilllife .subject-stats::after{display:none}
body.concept-17.retro-stilllife .subject-stats>div{
  border-top:1px solid var(--soft-line);
}
body.concept-17.retro-stilllife .subject-stats strong{color:var(--soft-walnut)}
body.concept-17.retro-stilllife .blue-dot{background:var(--soft-walnut)}
body.concept-17.retro-stilllife .green-dot{background:var(--soft-leaf)}
body.concept-17.retro-stilllife .coral-dot{background:var(--soft-clay)}

body.concept-17.retro-stilllife .profile-card{border-radius:5px}
body.concept-17.retro-stilllife .profile-card::before{color:var(--soft-ink)}
body.concept-17.retro-stilllife .profile-card::after{color:#817d70}
body.concept-17.retro-stilllife .mood-section .section-head{
  border-bottom:0;
}
body.concept-17.retro-stilllife .mood-section .section-head h2::after{display:none}
body.concept-17.retro-stilllife .mood-current{
  overflow:hidden;
  border-bottom-color:rgba(130,145,113,.45);
  color:var(--soft-leaf);
  white-space:nowrap;
  text-overflow:ellipsis;
}
body.concept-17.retro-stilllife .mood-card{
  border:0;
  border-radius:5px;
  background:#f5f0e5;
  box-shadow:0 5px 14px rgba(77,75,55,.07);
}
body.concept-17.retro-stilllife .mood-card:nth-child(1){transform:rotate(-.35deg)}
body.concept-17.retro-stilllife .mood-card:nth-child(2){background:#eef1e6;transform:rotate(.25deg)}
body.concept-17.retro-stilllife .mood-card:nth-child(3){background:#f4e6dc;transform:rotate(.2deg)}
body.concept-17.retro-stilllife .mood-card:nth-child(4){background:#e7ecdf;transform:rotate(-.25deg)}
body.concept-17.retro-stilllife .mood-card span{color:var(--soft-ink)}
body.concept-17.retro-stilllife .mood-card.selected{
  transform:translateY(-2px) rotate(-.25deg);
  box-shadow:0 7px 16px rgba(77,75,55,.1),0 0 0 1px var(--soft-leaf);
}
body.concept-17.retro-stilllife .mood-card.selected::after{color:var(--soft-clay)}
body.concept-17.retro-stilllife .setting-list{
  border-top:1px solid var(--soft-line);
}
body.concept-17.retro-stilllife .setting-list button{border-bottom-color:var(--soft-line)}
body.concept-17.retro-stilllife .setting-list button>span{color:var(--soft-leaf)}

body.concept-17.retro-stilllife .bottom-nav{
  width:min(calc(100% - 24px),488px);
  height:64px;
  padding:5px 7px;
  border:1px solid rgba(64,84,66,.18);
  border-radius:7px;
  background:rgba(251,250,245,.96);
  box-shadow:0 -5px 18px rgba(64,84,66,.08);
}
body.concept-17.retro-stilllife .bottom-nav button{
  border:0;
  border-radius:4px;
  color:#8a887d;
}
body.concept-17.retro-stilllife .bottom-nav button.active{
  color:var(--soft-ink);
  background:transparent;
  box-shadow:none;
}
body.concept-17.retro-stilllife .bottom-nav button.active::after{
  content:"";
  position:absolute;
  right:auto;
  bottom:3px;
  left:50%;
  display:block;
  width:18px;
  height:2px;
  margin:0;
  border-radius:2px;
  background:var(--soft-clay);
  transform:translateX(-50%);
}
body.concept-17.retro-stilllife .bottom-nav button:focus-visible{
  outline:0;
  background:rgba(220,227,200,.42);
}
body.concept-17.retro-stilllife .fab{
  left:calc(50% + min(244px,50vw) - 62px);
  border:3px solid var(--soft-canvas);
  color:#fffdf7;
  background:var(--soft-ink);
  box-shadow:0 8px 18px rgba(64,84,66,.2);
}
body.concept-17.retro-stilllife dialog{
  border:1px solid rgba(64,84,66,.24);
  border-radius:6px;
  background:var(--soft-canvas);
  box-shadow:0 22px 52px rgba(64,84,66,.2);
}
body.concept-17.retro-stilllife dialog::before{display:none}
body.concept-17.retro-stilllife dialog .icon-button{border-radius:4px}
body.concept-17.retro-stilllife input,
body.concept-17.retro-stilllife select{
  border-bottom-color:rgba(119,81,60,.35);
  background:#fffefb;
}
body.concept-17.retro-stilllife input:focus-visible,
body.concept-17.retro-stilllife select:focus-visible,
body.concept-17.retro-stilllife button:focus-visible{
  outline:2px solid rgba(130,145,113,.72);
  outline-offset:2px;
}

body.concept-17.retro-stilllife.focus-mode{background:var(--soft-paper)}
body.concept-17.retro-stilllife .focus-view.active{
  background-color:var(--soft-paper);
  background-image:radial-gradient(rgba(64,84,66,.045) .5px,transparent .7px);
  background-size:7px 7px;
}
body.concept-17.retro-stilllife .focus-view.active::before,
body.concept-17.retro-stilllife .focus-view.active::after{display:none}
body.concept-17.retro-stilllife .focus-context{color:var(--soft-leaf)}
body.concept-17.retro-stilllife .focus-clock{
  padding:9px 22px 5px;
  border:0;
  border-radius:6px;
  background:rgba(251,250,245,.68);
  box-shadow:0 8px 20px rgba(119,81,60,.07);
}
body.concept-17.retro-stilllife .focus-clock::before{
  top:2px;
  right:8px;
  left:auto;
  color:var(--soft-leaf);
  opacity:.7;
}
body.concept-17.retro-stilllife .focus-clock strong{
  color:var(--soft-ink);
  -webkit-text-fill-color:var(--soft-ink);
  font-family:"Avenir Next","Helvetica Neue",sans-serif;
  font-weight:600;
}
body.concept-17.retro-stilllife .focus-coffee{filter:saturate(1.12) contrast(1.02)}
body.concept-17.retro-stilllife .focus-coffee::before{
  border:0;
  background:rgba(215,170,78,.56);
  box-shadow:0 9px 18px rgba(119,81,60,.08);
}
body.concept-17.retro-stilllife .focus-controls{
  border:1px solid rgba(64,84,66,.16);
  border-radius:7px;
  background:rgba(251,250,245,.97);
  box-shadow:0 14px 30px rgba(64,84,66,.14);
}
body.concept-17.retro-stilllife .focus-controls>p{color:var(--soft-leaf)}
body.concept-17.retro-stilllife .focus-controls .timer-presets{
  gap:4px;
  padding:3px;
  border:0;
  border-radius:6px;
  background:#ede9dc;
}
body.concept-17.retro-stilllife .focus-controls .timer-presets button{
  border:0;
  border-radius:4px;
  color:var(--soft-walnut);
  background:transparent;
}
body.concept-17.retro-stilllife .focus-controls .timer-presets button.selected{
  color:#fffdf7;
  background:var(--soft-clay);
}
body.concept-17.retro-stilllife .focus-actions .quiet-action{color:var(--soft-walnut)}
body.concept-17.retro-stilllife .focus-actions .primary-action{background:var(--soft-ink)}
@media(max-width:360px){
  body.concept-17.retro-stilllife .next-task{gap:8px;padding-right:10px;padding-left:10px}
  body.concept-17.retro-stilllife .next-task .subject-badge{width:32px;height:32px}
  body.concept-17.retro-stilllife .next-task .start-button{min-width:48px;min-height:44px;padding-right:10px;padding-left:10px}
}

/* Mood-specific characters: each mode keeps its own person and scene. */
body.concept-17.retro-stilllife .companion-band{
  background-color:var(--soft-paper);
  background-image:none;
}
body.concept-17.retro-stilllife .companion-band img{
  right:0;
  left:auto;
  display:block;
  width:82%;
  object-position:center 24%;
  filter:saturate(1.06) contrast(1.01);
}
body.concept-17.retro-stilllife .companion-band::before{z-index:2}
body.concept-17.retro-stilllife .mood-card{
  min-height:0;
  padding:6px 6px 12px;
}
body.concept-17.retro-stilllife .mood-card img{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  border-radius:4px;
  object-fit:cover;
  object-position:center 24%;
  filter:saturate(1.04) contrast(1.01);
}

/* Focus polish: a clean surface and one consistent action color. */
body.concept-17.retro-stilllife .focus-view.active{
  background-color:var(--soft-paper);
  background-image:none;
}
body.concept-17.retro-stilllife .focus-coffee::before{
  right:12%;
  bottom:-2px;
  left:12%;
  height:16px;
  border:0;
  background:rgba(119,81,60,.12);
  box-shadow:none;
  filter:blur(5px);
  transform:scaleY(.58);
}
body.concept-17.retro-stilllife .focus-clock strong{
  color:var(--soft-ink);
  -webkit-text-fill-color:var(--soft-ink);
}
body.concept-17.retro-stilllife .focus-controls .timer-presets button{
  color:var(--soft-ink);
}
body.concept-17.retro-stilllife .focus-controls .timer-presets button.selected{
  color:#fffdf7;
  background:var(--soft-ink);
}
body.concept-17.retro-stilllife .focus-actions .primary-action{
  border-color:var(--soft-ink);
  color:#fffdf7;
  background:var(--soft-ink);
}

/* Final app behavior polish; visual treatment remains the frozen v10 design. */
body.concept-17.retro-stilllife:not(.focus-mode) .app-shell,
body.concept-17.retro-stilllife .view:not(.focus-view){min-height:100dvh}
body.concept-17.retro-stilllife .focus-controls{
  visibility:hidden;
  transition:opacity .22s,transform .22s,visibility 0s linear .22s;
}
body.concept-17.retro-stilllife .focus-view.controls-visible .focus-controls{
  visibility:visible;
  transition-delay:0s;
}
body.concept-17.retro-stilllife dialog{
  max-height:calc(100dvh - 32px - env(safe-area-inset-bottom));
  overflow-y:auto;
}

/* Native iOS and Android shell adjustments. */
html.native-app{
  min-height:100%;
  background:#fbfaf5;
}
html.native-app body{
  min-height:100dvh;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  user-select:none;
}
html.native-app button,
html.native-app input,
html.native-app select{touch-action:manipulation}
html.native-app input,
html.native-app select{user-select:text}
html.native-app main{padding-bottom:calc(116px + env(safe-area-inset-bottom))}
html.native-app body.concept-17.retro-stilllife .view:not(.focus-view){
  padding-top:calc(23px + env(safe-area-inset-top));
}
html.native-app body.concept-17.retro-stilllife .focus-view.active{
  padding-top:calc(82px + env(safe-area-inset-top));
}
html.native-app body.concept-17.retro-stilllife .focus-context{
  top:calc(29px + env(safe-area-inset-top));
}
html.native-app body.concept-17.retro-stilllife dialog{
  max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
html.native-app body.concept-17.retro-stilllife .toast{
  bottom:calc(92px + env(safe-area-inset-bottom));
}

/* Account access for the accepted still-life profile composition. */
body.concept-17.retro-stilllife .account-panel{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 68px;
  align-items:center;
  gap:12px;
  margin:0 0 18px;
  padding:14px 0 12px;
  border-top:1px solid var(--soft-line);
  border-bottom:1px solid var(--soft-line);
  background:transparent;
}
body.concept-17.retro-stilllife .account-avatar{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:1px solid rgba(64,84,66,.22);
  border-radius:5px;
  color:#fffdf7;
  background:var(--soft-ink);
  font-family:Georgia,"Songti SC",serif;
  font-size:20px;
  font-weight:700;
}
body.concept-17.retro-stilllife .account-copy{min-width:0}
body.concept-17.retro-stilllife .account-copy p{
  margin:0 0 3px;
  color:var(--soft-clay);
  font:700 9px "Courier New",monospace;
}
body.concept-17.retro-stilllife .account-copy h2{
  margin:0;
  overflow:hidden;
  color:var(--soft-ink);
  font-family:Georgia,"Songti SC",serif;
  font-size:17px;
  line-height:1.35;
  white-space:nowrap;
  text-overflow:ellipsis;
}
body.concept-17.retro-stilllife .account-copy small{
  display:block;
  margin-top:3px;
  overflow:hidden;
  color:#817d70;
  font-size:10px;
  line-height:1.35;
  white-space:nowrap;
  text-overflow:ellipsis;
}
body.concept-17.retro-stilllife .account-action{
  width:68px;
  height:40px;
  padding:0 10px;
  border:1px solid var(--soft-ink);
  border-radius:4px;
  color:#fffdf7;
  background:var(--soft-ink);
  font-size:12px;
  font-weight:700;
}
body.concept-17.retro-stilllife .account-storage-note{
  grid-column:2 / -1;
  margin:0;
  color:#989386;
  font-size:9px;
  line-height:1.4;
}
body.concept-17.retro-stilllife .account-panel.is-authenticated .account-avatar{
  color:var(--soft-ink);
  background:var(--soft-sage);
}
body.concept-17.retro-stilllife .account-panel.is-authenticated .account-action{
  color:var(--soft-walnut);
  background:transparent;
}
body.concept-17.retro-stilllife .account-panel.confirming-logout .account-action{
  border-color:var(--soft-clay);
  color:#fffdf7;
  background:var(--soft-clay);
}

body.concept-17.retro-stilllife #login-dialog{
  width:min(calc(100% - 28px),400px);
  overscroll-behavior:contain;
}
body.concept-17.retro-stilllife #login-dialog form{
  padding:20px 20px calc(20px + env(safe-area-inset-bottom));
}
body.concept-17.retro-stilllife #login-dialog .dialog-head{
  align-items:flex-start;
  margin-bottom:17px;
}
body.concept-17.retro-stilllife #login-dialog .dialog-head h2{
  margin:3px 0 0;
  color:var(--soft-ink);
  font-family:Georgia,"Songti SC",serif;
  font-size:21px;
}
body.concept-17.retro-stilllife #login-dialog .auth-close{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  margin:0;
  flex:none;
}
body.concept-17.retro-stilllife #login-dialog .auth-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3px;
  height:46px;
  padding:3px;
  border:1px solid var(--soft-line);
  border-radius:5px;
  background:#ebe8df;
}
body.concept-17.retro-stilllife #login-dialog .auth-tabs button{
  border:0;
  border-radius:3px;
  color:#77766e;
  background:transparent;
  font-size:13px;
  font-weight:700;
}
body.concept-17.retro-stilllife #login-dialog .auth-tabs button[aria-selected="true"]{
  color:#fffdf7;
  background:var(--soft-ink);
  box-shadow:0 2px 7px rgba(64,84,66,.14);
}
body.concept-17.retro-stilllife #login-dialog .login-error{
  margin:12px 0 0;
  padding:9px 10px;
  border-left:3px solid var(--soft-clay);
  color:#743c2f;
  background:#f4e4dc;
  font-size:11px;
  line-height:1.45;
}
body.concept-17.retro-stilllife #login-dialog .auth-panel{padding-top:16px}
body.concept-17.retro-stilllife #login-dialog .auth-panel[hidden]{display:none}
body.concept-17.retro-stilllife #login-dialog .auth-panel label{
  margin:0 0 7px;
  color:var(--soft-walnut);
  font-size:11px;
}
body.concept-17.retro-stilllife #login-dialog .auth-panel label+input{margin-bottom:14px}
body.concept-17.retro-stilllife #login-dialog input{
  height:48px;
  margin-top:0;
  padding:0 11px;
  border:1px solid rgba(64,84,66,.2);
  border-radius:4px;
  background:#fffefb;
  font-size:16px;
}
body.concept-17.retro-stilllife #login-dialog .code-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 116px;
  gap:8px;
}
body.concept-17.retro-stilllife #login-dialog .send-code-button{
  height:48px;
  padding:0 8px;
  border:1px solid rgba(64,84,66,.28);
  border-radius:4px;
  color:var(--soft-ink);
  background:var(--soft-sage);
  font-size:11px;
  font-weight:700;
}
body.concept-17.retro-stilllife #login-dialog button:disabled{
  cursor:default;
  opacity:.58;
}
body.concept-17.retro-stilllife #login-dialog .auth-hint{
  min-height:17px;
  margin:8px 0 13px;
  color:#817d70;
  font-size:10px;
  line-height:1.45;
}
body.concept-17.retro-stilllife #login-dialog .phone-login-button{
  height:48px;
  border-radius:4px;
  box-shadow:none;
}
body.concept-17.retro-stilllife #login-dialog .wechat-panel{
  min-height:236px;
  padding:24px 10px 4px;
  text-align:center;
}
body.concept-17.retro-stilllife #login-dialog .wechat-mark{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  margin:0 auto 13px;
  border-radius:50%;
  color:#fffdf7;
  background:var(--soft-ink);
  font-family:Georgia,"Songti SC",serif;
  font-size:20px;
  font-weight:700;
}
body.concept-17.retro-stilllife #login-dialog .wechat-panel h3{
  margin:0;
  color:var(--soft-ink);
  font-size:16px;
}
body.concept-17.retro-stilllife #login-dialog .wechat-panel p{
  margin:8px auto 18px;
  max-width:270px;
  color:#817d70;
  font-size:11px;
  line-height:1.55;
}
body.concept-17.retro-stilllife #login-dialog .wechat-login-button{
  width:100%;
  height:48px;
  border:1px solid var(--soft-ink);
  border-radius:4px;
  color:#fffdf7;
  background:var(--soft-ink);
  font-size:13px;
  font-weight:700;
}
body.concept-17.retro-stilllife #login-dialog .login-privacy{
  margin:15px 0 0;
  padding-top:12px;
  border-top:1px solid var(--soft-line);
  color:#989386;
  font-size:9px;
  line-height:1.5;
}

@media(max-width:350px){
  body.concept-17.retro-stilllife .account-panel{
    grid-template-columns:44px minmax(0,1fr) 60px;
    gap:9px;
  }
  body.concept-17.retro-stilllife .account-avatar{width:44px;height:44px}
  body.concept-17.retro-stilllife .account-action{width:60px;padding:0 4px;font-size:11px}
  body.concept-17.retro-stilllife #login-dialog form{padding-right:16px;padding-left:16px}
  body.concept-17.retro-stilllife #login-dialog .code-row{grid-template-columns:1fr}
  body.concept-17.retro-stilllife #login-dialog .send-code-button{width:100%}
}

/* Dialog fallback for iOS 15.0-15.3, before native modal dialogs were available. */
dialog:not([open]){display:none}
.dialog-fallback-backdrop{
  position:fixed;
  z-index:90;
  inset:0;
  background:rgba(49,71,55,.42);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}
dialog.dialog-fallback[open]{
  position:fixed;
  z-index:91;
  top:50%;
  left:50%;
  display:block;
  margin:0;
  overflow-y:auto;
  transform:translate(-50%,-50%);
}
body.dialog-fallback-active{overflow:hidden}