/* Personal study space: pastel surfaces, ink outlines, soft rounded type. */
:root {
  --bg: #e3f6f8;
  --paper: #f7f8f6;
  --surface: #fff;
  --ink: #171a19;
  --muted: #59625e;
  --line: #d5dad6;
  --green: #263f32;
  --wash: #d4f6cf;
  --mint: #d4f6cf;
  --lilac: #eedafb;
  --sky: #def5f8;
  --butter: #faedbd;
  --outline: #222824;
}
html { background: var(--bg); scrollbar-color: #9baaa2 var(--paper); }
body { padding: 20px; background: var(--bg); }
::selection { background: var(--lilac); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.shell { min-height: calc(100dvh - 40px); border: 2px solid var(--outline); border-radius: 32px; background: var(--paper); overflow: clip; }
.workspace { position: relative; }
.view-overview { min-height: calc(100dvh - 44px); padding-top: 68px; padding-bottom: 176px; }
.focus-dashboard { gap: 28px 48px; }
.focus-primary { gap: 24px; }
.focus-dashboard .overview-heading h1 { color: var(--ink); font-size: 1rem; font-weight: 600; }
.focus-dashboard .digital-clock { color: var(--ink); }
.focus-dashboard .clock-seconds,.focus-dashboard .clock-seconds small,
.focus-dashboard .clock-date,.focus-dashboard .clock-date strong { color: var(--muted); }
.focus-dashboard .clock-date { font-weight: 550; }
.focus-dashboard .weather-widget { padding: 12px 16px; border-radius: 22px; background: var(--sky); }
.focus-dashboard .weather-city { color: #354f52; font-weight: 600; min-height: 44px; }
.focus-dashboard .weather-symbol { width: 44px; height: 44px; color: #486675; }
.focus-dashboard .weather-symbol svg { width: 38px; height: 38px; stroke-width: 1.5; }
.focus-dashboard .weather-symbol.cloud svg { fill: #fff; }
.focus-dashboard .weather-symbol.sun { color: #946918; }
.focus-dashboard .weather-symbol.sun circle { fill: var(--butter); }
.focus-dashboard .weather-symbol.sun-cloud { color: #946918; }
.focus-dashboard .weather-symbol.sun-cloud path:last-child { fill: #fff; }
.focus-dashboard .weather-symbol.moon { color: #68517f; }
.focus-dashboard .weather-symbol.moon svg { fill: var(--lilac); }
.focus-dashboard .weather-symbol.rain,.focus-dashboard .weather-symbol.snow { color: #3e6c85; }
.focus-dashboard .weather-symbol.storm { color: #68517f; }
.focus-dashboard .weather-footer,.focus-dashboard .weather-footer a { color: #4b6366; }
.focus-dashboard .quote-widget { padding: 18px 18px 18px 22px; border-radius: 22px; background: var(--lilac); }
.focus-dashboard .quote-widget blockquote { color: #483653; font-size: 1.05rem; font-weight: 550; line-height: 1.6; }
.focus-dashboard .quote-widget .icon-button { opacity: 1; color: #574264; min-width: 44px; min-height: 44px; border-radius: 50%; }
.focus-dashboard .today-widget { border: 1.5px solid var(--outline); border-radius: 26px; box-shadow: none; padding: 25px; }
.focus-dashboard .today-widget .widget-header h2 { font-size: 1.25rem; font-weight: 650; letter-spacing: -.03em; }
.focus-demo-label { font-size: .75rem; font-weight: 500; color: var(--muted); }
.focus-dashboard .today-widget .completion-chip { min-width: 56px; padding: 9px 10px; background: var(--mint); color: #243b26; border-radius: 14px; text-align: center; font-size: 1rem; font-weight: 650; }
.completion-chip > span { color: #445b42; font-weight: 500; }
.daily-completion { height: 6px; background: #e9ede9; border-radius: 4px; margin-top: 19px; }
.daily-completion > span { background: var(--ink); }
.focus-dashboard .overview-tasks .focus-task { border-color: var(--line); padding: 13px 0; }
.subject-badge,.focus-task.complete .subject-badge { background: var(--badge-color,var(--sky)); color: #293b3d; border-radius: 20px; font-size: .75rem; font-weight: 650; padding: 6px 11px; }
.focus-dashboard .focus-task .task-title { color: var(--ink); font-weight: 600; font-size: .9375rem; }
.focus-dashboard .focus-task.complete .task-title { color: #526158; }
.focus-dashboard .focus-task .task-count { color: #4c5952; font-size: .75rem; }
.progress-change { color: #344b3c; font-weight: 550; text-decoration-color: #95a99b; }
.task-check input { border: 1.5px solid #96a298; border-radius: 50%; width: 21px; height: 21px; }
.task-check input:checked { background-color: var(--ink); border-color: var(--ink); }
.focus-dashboard .today-widget-footer { padding-top: 17px; color: #4e5b53; }
.focus-dashboard .today-widget-footer .text-button { color: var(--ink); font-weight: 650; }
.menu-trigger { top: 39px; left: 41px; min-height: 44px; padding: 10px 15px; border: 1px solid var(--ink); border-radius: 30px; background: var(--ink); color: #fff; backdrop-filter: none; font-weight: 600; }
.menu-trigger:hover { background: #35433a; color: #fff; }
.person { display: none; }
.breadcrumb { color: var(--muted); }
.breadcrumb strong { color: var(--ink); font-weight: 600; }
.topbar { padding-left: 145px; }
.button { min-height: 44px; border-radius: 24px; font-weight: 650; }
.button.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.button.primary:hover { background: #35433a; }
.button.secondary { color: #273d2b; background: var(--mint); border-color: #b6d5b0; }
.button.secondary:hover { background: #c2edba; }
.icon-button { min-width: 44px; min-height: 44px; border-radius: 50%; color: #59675d; }
.icon-button:hover { background: #e6eee7; color: var(--ink); }
.text-button { color: #2d4835; }
.widget:not(.clock-widget):not(.weather-widget):not(.quote-widget):not(.today-widget),
.empty-state,.question-card { box-shadow: none; border: 1px solid #cbd3cc; border-radius: 22px; }
.filter[aria-pressed='true'] { color: var(--ink); border-color: var(--ink); }
.question-filter[aria-pressed='true'] { background: var(--mint); color: #253e2a; }
.question-subject { background: var(--lilac); color: #503d5c; }
.day-button.selected { color: #fff; background: var(--ink); border-color: var(--ink); }
.day-button.is-today:not(.selected) { background: var(--sky); }
input:not([type='checkbox']):not([type='file']),select,textarea { border-color: #b8c3ba; border-radius: 12px; background: #fff; color: var(--ink); }
input::placeholder,textarea::placeholder { color: #68726b; }
input:focus,select:focus,textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px #eedafb; }
dialog { background: var(--paper); border: 1.5px solid var(--ink); border-radius: 26px; box-shadow: 0 24px 80px #162b3033; }
dialog::backdrop { background: #182c345c; backdrop-filter: blur(3px); }
#navigation-dialog { border-radius: 26px; background: var(--ink); }
#navigation-dialog .sidebar { background: var(--ink); color: #fff; }
.drawer-heading h2 { color: #fff; }
.drawer-heading .icon-button { color: #fff; }
.drawer-heading .icon-button:hover { background: #344238; }
#navigation-dialog .nav-button { border-radius: 24px; color: #e1e9e3; }
#navigation-dialog .nav-button:hover { background: #ffffff0d; }
#navigation-dialog .nav-button[aria-current='page'] { color: #243a26; }
#navigation-dialog .nav-indicator { background: var(--mint); border-radius: 24px; }
#navigation-dialog .nav-count { color: inherit; }
#navigation-dialog .exam-name,#navigation-dialog .local-status,.drawer-demo { color: #bbc9be; }
#navigation-dialog .text-button,#navigation-dialog .exam-block > svg { color: #d4f6cf; }
#navigation-dialog .exam-block { border-color: #455449; }
.demo-banner { background: var(--sky); color: #3f5d61; }
.toast { border: 1px solid var(--ink); border-radius: 20px; background: var(--ink); color: #fff; }
#garden-dialog .garden-widget { background: #e7f4df; border: 0; }
.garden-companion { right: 38px; bottom: 27px; }
.garden-companion::before { content: ''; position: absolute; left: 8px; right: 8px; bottom: 23px; height: 26px; background: #d4f6cf; border-radius: 50%; z-index: -1; }
.companion-label { bottom: -2px; left: 9px; right: 9px; padding: 5px 9px; border-radius: 18px; background: var(--mint); color: #304630; font-weight: 600; font-size: .75rem; }
.study-friend { left: clamp(46px,7vw,100px); bottom: 27px; width: 178px; height: min(210px,25dvh); }
.study-friend::before { content: ''; position: absolute; bottom: 35px; left: 22px; right: 22px; height: 25px; border-radius: 50%; background: var(--lilac); }
.friend-toggle { min-height: 44px; padding: 8px 12px; color: #46364e; font-size: .75rem; font-weight: 600; }
.friend-status { color: #46364e; font-size: .75rem; }
.study-friend[data-ready='true'] .friend-status:not(:empty) { background: var(--paper); font-size: .6875rem; }
@media(hover:hover) and (pointer:fine) { .friend-toggle:not(:disabled):hover { background: var(--lilac); color: #46364e; } }
@media(min-width:901px) and (max-width:1180px) {
  .view-overview { padding-left: 32px; padding-right: 146px; padding-bottom: 140px; }
  .focus-dashboard { grid-template-columns: minmax(0,1fr) 310px; gap: 25px; }
  .focus-dashboard .today-widget { padding: 21px; }
  .focus-dashboard .digital-clock { font-size: 5.1rem; }
  .focus-primary { gap: 20px; }
}
@media(max-width:900px) {
  body { padding: 14px; }
  .shell { min-height: calc(100dvh - 28px); border-radius: 28px; }
  .view-overview { min-height: calc(100dvh - 32px); padding: 96px 25px 185px; }
  .focus-dashboard { grid-template-columns: minmax(0,1fr) minmax(280px,310px); gap: 22px; }
  .focus-dashboard .today-widget { padding: 21px; }
  .focus-dashboard .digital-clock { font-size: 4.35rem; }
  .focus-dashboard .quote-widget { padding: 16px 12px 16px 16px; }
  .focus-dashboard .quote-widget blockquote { font-size: .9375rem; }
  .menu-trigger { top: 32px; left: 33px; }
  .garden-companion { right: 27px; bottom: 26px; }
  .study-friend { left: 37px; width: 158px; bottom: 26px; height: min(210px,25dvh); }
}
@media(max-width:700px) {
  body { padding: 9px; }
  .shell { min-height: calc(100dvh - 18px); border-radius: 26px; }
  .workspace { height: calc(100dvh - 22px); padding-bottom: 136px; }
  .view-overview { min-height: 0; padding: 91px 18px 26px; }
  .focus-dashboard { display: flex; gap: 24px; }
  .focus-primary { gap: 21px; }
  .focus-dashboard .digital-clock { font-size: clamp(3.8rem,19vw,5rem); }
  .focus-dashboard .clock-date { font-size: .8125rem; }
  .focus-dashboard .quote-widget { padding: 16px; }
  .focus-dashboard .quote-widget blockquote { font-size: 1rem; }
  .focus-dashboard .today-widget { padding: 20px; border-radius: 23px; }
  .focus-dashboard .today-widget .widget-header h2 { font-size: 1.125rem; }
  .menu-trigger { top: 26px; left: 27px; }
  .garden-companion { right: 24px; bottom: 21px; }
  .companion-label { font-size: .6875rem; }
  .study-friend { left: 21px; bottom: 13px; width: 132px; height: 132px; }
  .study-friend::before { bottom: 29px; height: 18px; }
  .friend-toggle { font-size: .6875rem; }
  .toast { bottom: 159px; }
  .topbar { padding-left: 124px; padding-right: 18px; }
  .breadcrumb { gap: 5px; font-size: .6875rem; }
}
@media(prefers-contrast:more) { :root { --muted: #343f37; --line: #929d95; } .subject-badge { border: 1px solid currentColor; } }
@media(min-width:701px) and (max-height:800px) {
  .view-overview { align-content: start; padding-top: 76px; padding-bottom: 80px; }
  .focus-dashboard .overview-tasks .focus-task { padding-block: 10px; }
  .study-friend { height: clamp(132px,calc(100dvh - 590px),190px); }
}