/* Neutral glass and graphite, applied only to cabinet-design.html. */
:root{--page:#f6f6f6;--ink:#242427;--muted:#737377;--wine:#705463;--rose:#a7929d;--graphite:#2c2c2f;--glass:linear-gradient(135deg,#ffffffd9,#ededefa8);--smoke:linear-gradient(125deg,#39393d,#252528);--line:#fff;--radius:24px;--shadow:inset 0 1px 1px #fff,0 5px 18px -14px #24242a33;--text-body:13px;--text-leading:1.75}
html{background:#e9e9ea}
body{background:var(--page);min-height:100svh}
body:before{display:none}
.app{max-width:500px;padding:22px 22px 130px;margin:0 auto;min-height:100svh}
.topbar{margin-bottom:28px;gap:12px}
.brand{font-size:18px;letter-spacing:.035em;font-weight:600;padding:7px 0}
.brand-sub{font-size:7px;font-weight:500;letter-spacing:.24em;color:#77777c;margin-top:3px}
.top-actions{gap:7px}
.icon-button{background:linear-gradient(140deg,#fff,#eeeff1);border:1px solid #fff;box-shadow:inset 0 1px 1px white,0 2px 5px #00000004;color:#37373c}
.bell-alert{color:#705364;border-color:#f7edf3;box-shadow:0 0 0 4px #aa829b10,0 0 20px #a875962b,inset 0 1px 1px #fff}
.bell-alert:before{content:"";display:block;position:absolute;inset:-5px;border:1px solid #b88fa759;border-radius:50%;pointer-events:none;animation:none}
.badge{display:grid;place-items:center;position:absolute;top:-4px;right:-3px;min-width:18px;height:18px;padding:0 3px;border:2px solid #faf8fa;border-radius:50%;background:linear-gradient(145deg,#a77e95,#79556c);box-shadow:0 2px 6px #78516820,inset 0 1px 0 #ffffff35;color:#fff;font-size:8px;font-weight:600;line-height:1;z-index:1}
.badge[hidden]{display:none}
h1,h2,h3{font-weight:600}
h1{font-size:29px;line-height:1.18;letter-spacing:-1px}
h2{font-size:20px;letter-spacing:-.6px}
body[data-view=cabinet] #view>.intro,body[data-view=cabinet] #view>div>.intro{margin-top:11px;font-size:13px;line-height:1.75;color:#737377}
.status-panel{min-height:112px;padding:23px 21px;margin-top:24px;border-radius:25px;background:linear-gradient(125deg,#3b393f,#29282c 80%);border:1px solid #49444c;box-shadow:inset 0 1px 0 #ffffff24,0 6px 18px -15px #29232e40}
.status-panel>.status-icon{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#ac849c22,#ffffff05);border:1px solid #b89caf44;color:#ddc6d7}
.status-panel strong{font-weight:600;font-size:15px;letter-spacing:-.3px;line-height:1.4}
.status-panel small{font-size:11px;line-height:1.6;color:#d6ceda;margin-top:5px}
.status-panel>.chevron{color:#dbc6d4;opacity:1;width:16px}
.section{margin-top:28px}
.section-top{margin-bottom:16px}
.segmented{background:linear-gradient(135deg,#e9e9ec,#f3f3f5);border-color:#fff;box-shadow:inset 0 1px 4px #00000005;padding:5px;border-radius:18px}
.segment-indicator{border-radius:14px;background:linear-gradient(145deg,#a17c93,#825d74 55%,#765469);border:1px solid #ad8b9e;box-shadow:inset 0 1px 1px #efdde8b5,inset 0 -1px 1px #ffffff20,0 3px 7px #78516820}
.segmented button{font-size:11px;font-weight:500;min-height:44px;border-radius:14px;gap:6px}
.segmented button svg{width:16px;height:16px}
.hint{font-size:9px;line-height:1.6;color:#77747b;margin-top:10px;gap:6px}
.hint svg{width:13px;height:13px}
.level-content{animation:none}
.level-content>.section{margin-top:25px}
.cards{gap:12px}
.card{border-radius:23px;padding:20px 18px;min-height:190px}
.card h3{font-size:18px;line-height:1.25;letter-spacing:-.5px;font-weight:600}
.card p{font-size:12px;line-height:1.55;color:#737377}
.card .symbol{color:#333238;width:25px;height:25px;margin-bottom:18px}
.card .arrow{background:linear-gradient(135deg,#454549,#28282d);border:1px solid #ffffff94;color:#fff;box-shadow:0 0 0 1px #b9b7bf70,inset 0 1px 1px #fff3;width:32px;height:32px}
.card .tag{font-size:8px;line-height:1.4;color:#796371;background:#e9e3e8;padding:4px 6px}
.cards [data-action=research]{background:linear-gradient(135deg,#fff,#eeeaf0);border:1px solid #fff}
.cards [data-action=research] .symbol{color:#8d6b80}
.cards [data-action=professions]{background:linear-gradient(130deg,#ffffffb5,#e9e9edb5);box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px #fff7;border:1px solid #fff}
.cards [data-action=day]{color:#fff;background:linear-gradient(135deg,#3d3b40,#29282c);border:1px solid #444147;box-shadow:inset 0 1px 0 #ffffff20}
.cards [data-action=day] .symbol{color:#d9c2d2}
.cards [data-action=day] p{color:#d2cdd5}
.cards [data-action=day] .arrow{background:linear-gradient(135deg,#f7f5f8,#d8d3de);color:#38313c;border-color:#ffffffc4;box-shadow:inset 0 1px 1px #fff}
.cards [data-action=tracker]{background:linear-gradient(130deg,#fff,#fafafa);border:1px solid #e6e5e9;box-shadow:inset 0 1px 0 #fff}
.cards [data-action=tracker] .symbol{color:#847080}
.row{padding:20px 18px;border-radius:22px;gap:14px;margin-bottom:12px}
.row strong{font-size:14px;font-weight:600;line-height:1.5}
.row small{font-size:12px;line-height:1.7;color:#747177}
.row>svg{color:#75616d}
.row .chevron{color:#827781}
.smoke{border-color:#ffffffa0;box-shadow:inset 0 1px 0 #fff3}
.course-hero{padding:25px 22px;border-radius:25px}
.course-hero h2{font-size:24px;line-height:1.3}
.course-hero .eyebrow{color:#ded5df}
.course-hero p{color:#e0dce3}
.wine-button{background:linear-gradient(120deg,#fff,#f1f0f5 55%,#d7d5de);border:1px solid #fff;color:#2e2933;box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px #fff8,0 2px 1px #a59aa666;border-radius:16px;font-size:12px;font-weight:600;min-height:52px}
.subtabs button{min-height:42px;background:#ffffffa0;border-radius:14px;font-size:12px;flex:1}
.subtabs button[aria-pressed=true]{background:linear-gradient(120deg,#e1dbe1,#f2eef2);border-color:#cfc4ce;color:#584650;box-shadow:inset 0 1px 1px #fff}
.demo-banner{background:#eeebef80;border:1px solid #fff;color:#706573;font-size:11px;line-height:1.65}
.notice{background:linear-gradient(135deg,#fff,#efedf1);border:1px solid #fff}
.nav-wrap{padding:12px 14px max(12px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#f6f6f6ec)}
.nav{max-width:456px;padding:5px;gap:4px;background:linear-gradient(125deg,#404044ef,#27272aef 75%,#38363ded);border:1px solid #ffffff9c;border-radius:27px;box-shadow:inset 0 1px 1px #fff3,0 5px 20px #17141b20;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.nav button{min-height:55px;border-radius:21px;font-size:9px;gap:4px;color:#f0edf3}
.nav button[aria-current=page]{background:linear-gradient(135deg,#f8f7fa,#d3d1db);border:1px solid #fffffff0;color:#28242e;box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px #fff7,0 1px 4px #0001}
dialog{background:linear-gradient(135deg,#fafafafc,#f2f1f4fc);border-radius:27px;border-color:#fff;max-width:480px}
dialog::backdrop{background:#24212866;backdrop-filter:blur(8px)}
.sheet{padding:24px}
.sheet-head h2{font-weight:600;font-size:21px;line-height:1.35}
.footer{font-size:9px;color:#79757e;line-height:1.8;margin-top:28px}
.footer .prototype-label{font-size:7px;letter-spacing:.08em;color:#8c8791;margin-top:15px}
.footer>a{display:inline-flex;align-items:center;min-height:44px;color:#7b6b77;font-size:10px}
@media(hover:hover){.card:hover{box-shadow:inset 0 1px 1px #fff,0 9px 18px -15px #24242a44}}
@media(min-width:600px){body{max-width:500px;margin:28px auto;background:#f6f6f6;border-radius:30px;box-shadow:0 18px 60px #0000000c;overflow-x:clip}.app{padding-top:25px}.topbar{margin-bottom:30px}.nav-wrap{background:none}}
@media(max-width:359px){.app{padding:18px 16px 120px}.brand{font-size:16px}.top-actions{gap:4px}.icon-button{width:40px;height:40px}.topbar{margin-bottom:24px}h1{font-size:26px}.status-panel{padding:20px 15px;gap:10px}.status-panel strong{font-size:13px}.status-panel small{font-size:10px}.status-panel>.status-icon{width:37px;height:37px}.cards{gap:10px}.card{padding:18px 13px}.card h3{font-size:15px}.card p{font-size:11px}.segmented button{font-size:10px}.hint{font-size:8px}.nav button{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}