/* Shared visual language with Android Theme.kt: Material shapes and Japanese typography. */
:root {
  --bg:#f5f7f7; --surface:#fff; --surface2:#edf1f1; --border:#dce3e4; --border2:#adbabb;
  --text:#18272b; --text2:#5d6b70; --text3:#5d6b70; --accent:#245d67; --accent-bg:#dcecee;
  --tonal-bg:#ebf0f1; --tonal-text:#263c42; --accent-light:#9bcdd3; --primary-text:#fff; --radius:16px; --radius-sm:12px;
}
@media(prefers-color-scheme:dark) { :root {
  --bg:#10181b; --surface:#192428; --surface2:#202d32; --border:#35464c; --border2:#65797f;
  --text:#e4ecee; --text2:#abbdc3; --text3:#abbdc3; --accent:#9bcdd3; --accent-bg:#25484f;
  --tonal-bg:#29383d; --tonal-text:#d5e5e9; --accent-light:#245d67; --primary-text:#10383f;
} }
body { background:var(--bg); font-size:14px; line-height:1.65; }
.main { padding:20px 20px calc(108px + env(safe-area-inset-bottom)); }
.mobile-header { min-height:64px; border:0; background:var(--bg); gap:8px; }
.mobile-header h1 { font-size:20px; flex:1; min-width:0; }
body:not([data-view="dashboard"]):not([data-view="schedule"]):not([data-view="examgroups"]):not([data-view="timetable"]) #quick-add { display:none; }
body[data-view="timetable"] #quick-add { visibility:visible; }
.header-actions { display:flex; align-items:center; gap:8px; }
.app-icon { width:24px; height:24px; fill:currentColor; flex-shrink:0; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; background:none; color:var(--text2); border:0; border-radius:50%; }
.header-back { display:none; }
body[data-subpage="true"] .header-back { display:inline-flex; }
.btn { border-radius:100px; color:var(--accent); font-weight:500; }
.btn-primary { color:var(--primary-text); }
.btn-tonal,#quick-add,.study-actions .start-button { color:var(--tonal-text); background:var(--tonal-bg); border-color:transparent; }
.btn-quiet { color:var(--accent); }
.btn-danger { color:var(--danger); }
input,select,textarea { border-radius:12px; min-height:56px; }
.view-title { font-size:24px; line-height:34px; letter-spacing:0; }
.view-subtitle { font-size:12px; line-height:20px; }
.card,.exam-group-card { border:0; background:var(--surface); border-radius:16px; }
.exam-group-card { padding:20px; margin-bottom:16px; }
.stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); background:var(--surface); border-radius:16px; padding:20px; }
.stats-grid .stat-card:last-child:nth-child(odd) { grid-column:1/-1; }
.stats-grid .stat-card:last-child:nth-child(odd) .stat-value { font-size:14px; }
.home-summary { background:var(--accent-bg); border-radius:16px; padding:20px; margin-bottom:14px; }
.today-summary { border:0; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.today-summary > div { display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
.today-summary strong { font-size:24px; line-height:32px; overflow-wrap:anywhere; }
.today-progress { display:flex; align-items:center; gap:12px; margin-top:16px; font-size:12px; }
progress { appearance:none; border:0; height:6px; border-radius:4px; background:var(--border); color:var(--accent); }
progress::-webkit-progress-bar { background:var(--border); border-radius:4px; }
progress::-webkit-progress-value { background:var(--accent); border-radius:4px; }
progress::-moz-progress-bar { background:var(--accent); border-radius:4px; }
.today-progress progress { flex:1; min-width:0; }
.section-header { margin:12px 0 8px; }
.section-title { font-size:16px; }
.study-card { display:block; padding:16px; margin-bottom:10px; border:0; border-radius:16px; background:var(--surface); }
.study-row-head { display:flex; align-items:flex-start; gap:8px; }
.study-title-button { flex:1; min-width:0; min-height:48px; }
.study-time { display:flex; align-items:center; font-size:12px; }
.study-subject { display:block; font-size:16px; margin-top:5px; }
.study-check { width:48px; height:48px; flex-shrink:0; order:2; color:var(--accent); }
.study-check::before { width:18px; height:18px; border-radius:3px; }
.study-content { margin-top:8px; }
.study-meta { margin-top:6px; color:var(--accent); }
.study-actions { flex-direction:row; align-items:center; justify-content:flex-end; gap:8px; margin-top:10px; }
.study-actions .btn { min-width:64px; padding:10px 12px; }
.study-actions .icon-button { margin-right:auto; }
.exam-home-card { background:var(--surface); border:0; border-radius:16px; padding:18px; margin-top:12px; }
.exam-home-card small { color:var(--accent); }
.week-summary { border:0; color:var(--accent); }
.mobile-bottom-nav { min-height:80px; padding:8px 8px max(10px,env(safe-area-inset-bottom)); border:0; }
.mobile-bottom-nav button { min-height:60px; padding:0; color:var(--text2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:12px; font-weight:500; }
.mobile-bottom-nav button::before { display:none; }
.mobile-bottom-nav .nav-icon { display:flex; align-items:center; justify-content:center; width:64px; height:32px; border-radius:20px; }
.mobile-bottom-nav button.active { color:var(--text); font-weight:500; }
.mobile-bottom-nav button.active .nav-icon { background:var(--tonal-bg); color:var(--tonal-text); }
.running-focus { bottom:calc(88px + env(safe-area-inset-bottom)); border-radius:16px; min-height:72px; font-size:14px; }
.timer-running .main { padding-bottom:calc(180px + env(safe-area-inset-bottom)); }
.toast { bottom:calc(90px + env(safe-area-inset-bottom)); border-radius:12px; background:var(--text); color:var(--surface); }
.timer-running .toast { bottom:calc(170px + env(safe-area-inset-bottom)); }
.more-menu { gap:10px; }
.more-menu button { display:flex; flex-direction:row; align-items:center; gap:16px; background:var(--surface); padding:16px; border:0; border-radius:16px; margin-bottom:10px; }
.more-menu button > .app-icon { color:var(--accent); }
.more-menu .menu-copy { display:flex; flex:1; min-width:0; flex-direction:column; align-items:flex-start; text-align:left; }
.more-menu strong { font-size:16px; }
.more-menu span { font-size:12px; }
.focus-setup > .card { background:none; padding:0; border:0; max-width:none !important; }
.focus-setup .form-group { margin-bottom:16px; }
.focus-setup .duration-presets { margin-bottom:16px; }
.focus-active { background:var(--surface); border-radius:16px; padding:24px 20px; }
.timer-ring { position:relative; width:224px; height:224px; margin:24px auto; display:grid; place-items:center; }
.timer-ring svg { width:100%; height:100%; position:absolute; inset:0; transform:rotate(-90deg); }
.timer-ring circle { fill:none; stroke:var(--border); stroke-width:4; }
.timer-ring #focus-ring { stroke:var(--accent); }
.focus-timer-display { font:600 44px/58px "StudyCoPi Japanese",sans-serif; padding:0; margin:0; color:var(--text); }
.focus-elapsed { font-size:12px; }
.focus-btn-row { display:flex; flex-direction:column; gap:12px; }
.focus-btn-row .btn { width:100%; }
.day-selector button { border-radius:12px; }
.day-selector button.selected { background:var(--accent-bg); color:var(--accent); border-color:transparent; }

.modal { border-radius:24px 24px 0 0; }
.modal-header { border:0; padding:20px; }
.modal-footer { padding:12px 20px max(24px,env(safe-area-inset-bottom)); }
.modal-header h2 { font-size:20px; }
.help-topic { background:var(--surface); border:0 !important; border-radius:16px; padding:4px 16px 16px; margin-bottom:10px; }
.help-topic summary { font-size:16px; color:var(--text); }
.help-topic p { margin:12px 0; }
.guide-open { overflow:hidden; }
.guide-dialog { width:min(560px,calc(100% - 32px)); max-width:none; max-height:calc(100dvh - 32px); margin:auto; padding:0; border:0; border-radius:24px; background:var(--bg); color:var(--text); }
.guide-dialog::backdrop { background:rgb(0 0 0/.5); }
.guide-shell { display:flex; flex-direction:column; max-height:calc(100dvh - 32px); }
.guide-header { display:flex; align-items:center; justify-content:space-between; padding:12px 24px; }
.guide-header strong { font-size:16px; }
.guide-header .btn { padding-inline:8px; }
.guide-progress-row { display:flex; align-items:center; gap:16px; padding:0 24px; font-size:12px; }
.guide-progress-row progress { flex:1; }
.guide-step-body { padding:24px; overflow-y:auto; min-height:0; }
.guide-step-body h2 { font-size:24px; line-height:34px; margin:0 0 16px; }
.guide-step-body h2:focus { outline:none; }
.guide-step-body p { margin:0 0 16px; }
.guide-location { color:var(--accent); font-weight:500; font-size:14px; }
.guide-example { background:var(--surface); border-radius:16px; padding:20px; margin:20px 0; }
.guide-example > small { display:block; color:var(--text2); margin-bottom:10px; }
.guide-example strong { display:block; font-size:16px; }
.guide-example p { margin:8px 0 0; font-size:12px; color:var(--text2); }
.guide-tip { font-size:13px; color:var(--text2); }
.guide-footer { display:flex; gap:12px; padding:16px 24px 24px; border-top:1px solid var(--border); }
.guide-footer .btn { flex:1; min-height:52px; }
@media(max-width:600px) {
  .guide-dialog { width:100%; height:100dvh; max-height:100dvh; border-radius:0; }
  .guide-shell { height:100%; max-height:100dvh; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
  .guide-step-body { flex:1; }
  .today-summary strong { font-size:clamp(18px,5.5vw,24px); }
}
@media(min-width:1024px) {
  .main { padding:32px 40px 96px; }
  .nav-item { display:flex; align-items:center; gap:12px; color:var(--text2); border-radius:100px; }
  .nav-item.active { background:var(--accent-bg); color:var(--accent); }
  .running-focus { bottom:18px; }
  .toast { bottom:18px; }
  .modal { border-radius:24px; }
}

.study-content { min-height:0; padding-block:4px; }
.mobile-header h1 { font-size:16px; font-weight:600; }
.subject-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:12px 16px; background:var(--surface); border-bottom:1px solid var(--border); }
.subject-row > strong { flex:1; min-width:80px; overflow-wrap:anywhere; font-weight:500; }
.subject-row .subject-dot { width:12px; height:12px; }
.subject-row-actions { display:flex; align-items:center; margin-left:auto; }
.subject-row-actions .btn { min-width:44px; padding:8px 4px; }
.subjects-list { margin-top:16px; }
.plan-tabs { display:flex; margin:16px 0; }
.plan-tabs .btn { flex:1; border-radius:0; }
.plan-tabs .btn:first-child { border-radius:100px 0 0 100px; }
.plan-tabs .btn:last-child { border-radius:0 100px 100px 0; }
.plan-tabs .selected { background:var(--tonal-bg); color:var(--tonal-text); }
.schedule-toolbar > .plan-tabs { flex:1; }
.duration-presets { display:flex; gap:8px; }
.duration-presets .btn { flex:1; min-width:0; padding:8px 4px; }
.timer-link-options { margin-bottom:16px; }
.timer-note { margin-top:16px; }
.guide-dialog p { line-height:23px; }
.guide-tip { font-size:12px; line-height:20px; }

.guide-dialog .btn { transition:none; }
.guide-header strong { flex:1; min-width:0; padding-right:12px; line-height:25px; }
.guide-header .btn { flex-shrink:0; }
.focus-btn-row { width:100%; }
#view-settings .settings-section > .section-title { display:none; }

.exam-prep-title { margin-top:24px; }
.exam-home-card { display:block; width:100%; text-align:left; color:var(--text); }
.exam-home-card small { display:block; }
.exam-home-name { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; }
.exam-home-card .muted { display:block; }
.week-summary { justify-content:flex-start; margin-top:8px; padding-inline:12px; }
.day-selector button.selected { background:var(--accent); color:var(--primary-text); }
.day-selector button { background:var(--surface); }
#view-hours > .card { background:none; padding:0; }
#view-hours .hours-period-bar { display:flex; flex-direction:column; align-items:stretch; }
.hours-period-bar > div:not(#hours-custom-range) { display:flex !important; flex-direction:column; align-items:stretch !important; gap:5px !important; }
.hours-period-bar select { width:100% !important; }
#hours-stats { background:var(--accent-bg); }
.hours-row,.hours-row + .hours-row { background:var(--surface); border:0; border-radius:16px; padding:18px; margin-top:12px; }
.hours-row-title strong { font-size:16px; }
.hours-row-title span { display:none; }
.hours-measure { grid-template-columns:26px minmax(0,1fr) auto; }
.hours-measure strong { min-width:40px; }

.day-mark { display:block; width:4px; height:4px; border-radius:50%; }
.day-mark.has-plans { background:var(--accent); }
.day-selector button.selected .day-mark.has-plans { background:var(--primary-text); }
/* Contextual tour: the actual UI stays visible through the spotlight. */
.guide-dialog { position:fixed; inset:0; width:100%; height:100dvh; max-height:none; max-width:none; margin:0; border:0; border-radius:0; background:transparent; overflow:hidden; }
.guide-dialog::backdrop { background:transparent; }
.guide-spotlight { position:absolute; inset:0; width:100%; height:100%; }
.guide-shell { position:fixed; width:min(400px,calc(100vw - 32px)); height:auto; max-height:calc(100dvh - 160px); padding:0; background:var(--surface); color:var(--text); border-radius:20px; box-shadow:0 8px 32px rgb(0 0 0 / .22); border:1px solid var(--border); }
.guide-header { padding:8px 16px 0; gap:8px; }
.guide-header strong { font-size:12px; line-height:20px; }
.guide-header .btn { font-size:12px; }
.guide-progress-row { padding:0 20px; }
.guide-step-body { padding:16px 20px 0; flex:1; overflow-y:auto; }
.guide-step-body h2 { font-size:20px; line-height:30px; margin-bottom:10px; }
.guide-step-body p { margin-bottom:12px; }
.guide-location { font-size:12px; font-weight:600; }
.guide-footer { padding:12px 20px 16px; border:0; gap:8px; }
.guide-footer .btn { min-height:48px; }
@media(prefers-reduced-motion:no-preference) { .guide-shell { animation:guide-appear .15s ease-out; } @keyframes guide-appear { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } } }

.guide-shell > .guide-location { margin:0 20px 4px; flex-shrink:0; }

.backup-reminder { margin:0 0 20px; padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.backup-reminder p { margin:8px 0 12px; font-size:13px; color:var(--text2); }
.backup-reminder[hidden] { display:none; }
.sound-settings { margin:16px 0; }
.sound-settings p { margin:12px 0; font-size:13px; }
.sound-toggle { display:flex; align-items:center; gap:12px; min-height:48px; font-size:14px; margin:8px 0; }
.sound-toggle input { width:20px; height:20px; }
.plan-tabs .btn { white-space:nowrap; padding:10px 12px; }

.backup-reminder .btn-row { display:flex; flex-wrap:nowrap; gap:8px; }
.backup-reminder .btn-primary { width:auto; flex:1; }
.backup-reminder .btn { white-space:nowrap; }
.sound-toggle input { min-height:20px; accent-color:var(--accent); }

/* About and scheduled waiting screen share the native app's spacing and controls. */
.about-view > * { margin-bottom: 20px; }
.about-view > img { display: block; border-radius: 16px; }
.about-links { display: grid; gap: 12px; max-width: 520px; }
.about-links .btn { white-space: normal; text-align: center; }
.scheduled-focus-settings { margin-bottom: 20px; }
.scheduled-focus-dialog { width: min(480px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; margin: auto; padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); }
.scheduled-focus-dialog::backdrop { background: rgb(0 0 0 / .55); }
.scheduled-focus-dialog > * { margin-bottom: 20px; }
.scheduled-focus-dialog .btn { display: block; width: 100%; min-height: 52px; }
.scheduled-focus-dialog .muted { font-size: 13px; margin-bottom: 0; }
.scheduled-focus-subject { font-size: 24px; font-weight: 700; overflow-wrap: anywhere; }
.scheduled-focus-time { padding: 24px 0; font-size: 40px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
/* Calendar statistics: fixed scale and explicit values, including zero days. */
.history-card { margin-bottom: 16px; }
.history-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.history-toolbar[hidden] { display:none; }
.history-toolbar .section-title { margin:0; }
.history-toolbar label { display:flex; align-items:center; gap:8px; }
.history-toolbar select { width:auto; }
.history-scroll, .heat-scroll, .history-table > div { overflow-x:auto; padding:8px 2px; }
.history-chart { display:flex; gap:8px; min-width:100%; width:max-content; border-bottom:1px solid var(--border2); }
.history-column { flex:1 0 64px; min-width:64px; border:0; border-radius:0; background:transparent; color:var(--text2); padding:8px 4px; font:inherit; font-size:12px; cursor:pointer; }
.history-bars { display:flex; align-items:flex-end; justify-content:center; height:160px; gap:4px; margin-bottom:8px; border-bottom:1px solid var(--border2); }
.history-bars i { display:block; width:16px; }
.history-actual { background:var(--accent); }
.history-planned { background:var(--border2); border:1px solid var(--text3); }
.history-legend, .heat-legend { display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--text2); margin:12px 0; }
.history-legend span, .heat-legend span { display:flex; align-items:center; gap:6px; }
.heat-legend { gap:4px; align-items:center; justify-content:flex-end; }
.heat-legend span { margin:0 4px; }
.history-legend i { display:inline-block; width:12px; height:12px; }
.history-table summary { cursor:pointer; min-height:44px; padding:12px 0; color:var(--accent); text-decoration:underline; }
.history-table th, .history-table td { padding:8px 16px; text-align:left; }
.heat-layout { display:flex; gap:8px; width:max-content; }
.heat-weekdays { display:grid; grid-template-rows:repeat(7,var(--heat-size,14px)); gap:4px; font-size:11px; color:var(--text2); margin-top:24px; position:sticky; left:0; background:var(--bg); z-index:1; padding-right:4px; }
.heat-months { display:grid; gap:4px; height:24px; font-size:11px; color:var(--text2); }
.heat-months span { white-space:nowrap; }
.heatmap { display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,var(--heat-size,14px)); grid-auto-columns:var(--heat-size,14px); gap:4px; }
.heatmap .heat-cell { width:var(--heat-size,14px); height:var(--heat-size,14px); }
.heat-cell { display:block; width:14px; height:14px; padding:0; border:1px solid #1b1f230f; border-radius:2px; cursor:pointer; }
.heat-cell.level-0 { background:#eff2f5; }
.heat-cell.level-1 { background:#9be9a8; }
.heat-cell.level-2 { background:#40c463; }
.heat-cell.level-3 { background:#30a14e; }
.heat-cell.level-4 { background:#216e39; }
@media(prefers-color-scheme:dark) {
  .heat-cell { border-color:#ffffff0a; }
  .heat-cell.level-0 { background:#161b22; }
  .heat-cell.level-1 { background:#0e4429; }
  .heat-cell.level-2 { background:#006d32; }
  .heat-cell.level-3 { background:#26a641; }
  .heat-cell.level-4 { background:#39d353; }
}
.heat-cell.outside { visibility:hidden; }
.heat-cell.excluded { opacity:.25; cursor:default; }
.heat-cell:focus-visible, .history-column:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.history-detail { min-height:48px; padding:12px 0; border-bottom:1px solid var(--border); font-variant-numeric:tabular-nums; }
.exam-session [data-checklist-summary] { white-space:normal; text-align:left; max-width:100%; margin-top:8px; }
.checklist-modal { display:flex; flex-direction:column; height:min(760px,calc(var(--visual-height,100dvh) - 12px)); overflow:hidden; }
.checklist-modal #modal-body { display:flex; flex-direction:column; min-height:0; flex:1; }
.checklist-header { position:static; flex:0 0 auto; padding:16px 20px 8px; }
.checklist-header h2 { flex:1; min-width:0; }
.checklist-header button { flex:0 0 auto; white-space:nowrap; min-width:72px; }
.checklist-overview { flex:0 0 auto; padding:0 16px 12px; border-bottom:1px solid var(--border); background:var(--surface); }
.checklist-context { margin:0 0 4px; font-size:12px; color:var(--text2); }
#checklist-summary { margin:0; font-size:13px; line-height:1.6; }
#checklist-progress { display:block; width:100%; height:6px; margin:8px 0 12px; }
.checklist-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
.checklist-filters button { min-height:44px; padding:6px 4px; border:1px solid var(--border2); border-radius:8px; background:var(--surface); color:var(--text2); font:inherit; font-size:13px; white-space:nowrap; cursor:pointer; }
.checklist-filters button[aria-pressed=true] { background:var(--accent-bg); color:var(--accent); border-color:var(--accent); }
.checklist-scroll { min-height:0; flex:1; overflow-y:auto; overscroll-behavior:contain; padding:0 12px 16px; }
.checklist-add-panel, .checklist-range-note { margin:4px; }
.checklist-add-panel > summary, .checklist-range-note > summary { min-height:44px; padding:10px 4px; cursor:pointer; color:var(--accent); font-size:13px; }
.checklist-add-panel form { padding:4px 8px 12px; }
.checklist-item { padding:0; border-bottom:1px solid var(--border); }
.checklist-line { display:flex; align-items:center; gap:4px; min-height:56px; }
.checklist-toggle { display:grid; place-items:center; width:44px; min-height:44px; flex:0 0 44px; cursor:pointer; }
.checklist-toggle input { width:22px; height:22px; accent-color:var(--accent); }
.checklist-title { min-width:0; flex:1; min-height:44px; padding:4px; border:0; background:transparent; color:var(--text); font:inherit; font-size:15px; line-height:1.5; text-align:left; cursor:pointer; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.checklist-line .checklist-status { flex:0 0 82px; width:82px; min-height:44px; height:44px; padding:6px 16px 6px 4px; border:0; border-radius:8px; background-color:transparent; font-size:13px; color:var(--accent); cursor:pointer; }
.checklist-detail { padding:8px 8px 16px 48px; }
.checklist-detail-actions { display:flex; gap:4px; flex-wrap:wrap; }
.checklist-detail-actions .btn { padding:8px 10px; min-height:44px; }
#checklist-error { color:var(--danger); margin:8px 0 0; font-size:13px; }
.checklist-title:focus-visible, .checklist-filters button:focus-visible { outline:3px solid var(--accent); outline-offset:1px; }