:root { color-scheme: light; --bg:#f5f6f5; --card:#fff; --card2:#f0f3f2; --text:#202c29; --muted:#62716b; --accent:#276b56; --danger:#b6444e; --ok:#d6eee1; --warn:#f2dcae; --border:#dce3df; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#141a18; --card:#1c2421; --card2:#252f2b; --text:#e8eee9; --muted:#a6b5ac; --accent:#92cfb4; --danger:#ec8e96; --ok:#2d4b3c; --warn:#6b5430; --border:#35413b; }
* { box-sizing:border-box; }
html { min-height:100%; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:15px; line-height:1.5; }
#app { width:100%; max-width:1080px; margin:0 auto; padding:36px 32px 72px; }
input, select, textarea, button { font:inherit; border-radius:8px; }
button { min-height:44px; padding:10px 16px; border:1px solid transparent; background:var(--accent); color:white; font-weight:600; cursor:pointer; transition:background .18s ease,border-color .18s ease; touch-action:manipulation; }
:root[data-theme="dark"] button:not(.secondary):not(.theme-toggle):not(.inactive):not(.composer-toggle):not(.day-chip):not(.danger) { color:#14271e; }
button:hover { filter:brightness(.96); }
button:active { filter:brightness(.9); }
button.secondary { background:var(--card2); color:var(--text); border-color:var(--border); }
button.danger { background:var(--danger); color:#fff; }
button.small { padding:8px 12px; font-size:13px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
input, select, textarea { display:block; width:100%; min-width:0; max-width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--border); background:var(--card); color:var(--text); font-size:16px; }
textarea { min-height:104px; resize:vertical; line-height:1.5; }
input::placeholder, textarea::placeholder { color:var(--muted); opacity:.8; }
input[type="date"], input[type="time"] { min-width:0; width:100%; }
.hero { position:relative; padding:0 0 24px; border-bottom:1px solid var(--border); }
.hero-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.hero-kicker { font-size:13px; font-weight:500; color:var(--muted); }
.hero h1 { margin:8px 0 0; font-size:clamp(24px,3.2vw,36px); font-weight:650; line-height:1.25; letter-spacing:-.035em; }
.theme-toggle { display:inline-flex; gap:8px; align-items:center; flex-shrink:0; background:var(--card); color:var(--text); border-color:var(--border); padding:8px 12px; font-size:13px; }
:root[data-theme="dark"] .theme-toggle { color:var(--text); }
.theme-icon { display:flex; }
.theme-icon svg { width:18px; height:18px; }
.tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; margin:22px 0 24px; padding:4px; background:var(--card2); border:1px solid var(--border); border-radius:10px; }
.tabs button { min-width:0; padding:10px 4px; white-space:nowrap; font-size:14px; border-radius:6px; }
.tabs button.inactive { background:transparent; color:var(--muted); }
.tabs button.inactive:hover { background:var(--card); color:var(--text); }
#content { min-width:0; }
.card { min-width:0; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:22px; margin-bottom:16px; }
.card h3 { margin:0 0 6px; font-size:18px; line-height:1.4; font-weight:650; }
.muted { color:var(--muted); font-size:13px; }
.row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.row > :first-child { min-width:0; }
.row > :last-child:not(:first-child) { flex-shrink:0; }
.card, .cycle-details, .agenda-item, .composer-copy { overflow-wrap:anywhere; }
.badge { display:inline-block; flex-shrink:0; padding:3px 8px; border-radius:6px; font-size:12px; font-weight:600; white-space:nowrap; }
.badge.now { background:var(--ok); color:var(--text); }
.badge.future, .badge.past { background:var(--card2); color:var(--muted); }
.badge.warn { background:var(--warn); color:var(--text); }
.badge.danger { background:var(--danger); color:#fff; }
.field { display:block; min-width:0; }
.field-label { display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.login-box { display:flex; flex-direction:column; gap:16px; margin-top:16px; }
.login-box > button { align-self:flex-start; }
.eyebrow { display:block; margin-bottom:4px; color:var(--muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.calendar-nav { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 16px; }
.calendar-title { text-align:center; }
.calendar-title strong { font-size:17px; }
.week-strip { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
.day-chip { display:grid; justify-items:center; gap:4px; min-width:0; padding:10px 4px; color:var(--muted); background:var(--card); border-color:var(--border); font-size:13px; font-weight:500; }
:root[data-theme="dark"] .day-chip { color:var(--muted); }
.day-chip strong { color:var(--text); font-size:17px; }
.day-chip.selected { background:var(--accent); border-color:var(--accent); color:white; }
.day-chip.selected strong { color:inherit; }
:root[data-theme="dark"] .day-chip.selected { color:#14271e; }
.agenda-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.agenda-heading > div { min-width:0; }
.lesson-count { flex-shrink:0; background:var(--card2); color:var(--muted); border-radius:6px; padding:5px 9px; font-size:12px; font-weight:600; }
.agenda-item { display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px; padding:16px 0; border-top:1px solid var(--border); }
.agenda-time { color:var(--accent); font-size:13px; font-weight:650; }
.empty-agenda { padding:24px 0; color:var(--muted); text-align:center; }
.lesson-editor { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding-top:16px; }
.lesson-editor button { justify-self:start; grid-column:1 / -1; }
hr { border:0; border-top:1px solid var(--border); margin:16px 0 0; }
.list-item { padding:16px 0; border-bottom:1px solid var(--border); }
.list-item:last-child { border-bottom:0; padding-bottom:0; }
.cycle-details { display:grid; gap:4px; min-width:0; }
.cycle-period { color:var(--muted); font-size:13px; }
.cycle-subject { font-size:16px; font-weight:650; }
.cycle-room { font-size:13px; }
.cycle-time { color:var(--muted); font-size:13px; }
.cycle-lock { align-self:start; padding:4px 8px; border-radius:6px; background:var(--card2); color:var(--muted); font-size:11px; font-weight:500; white-space:nowrap; }
.schedule-actions { display:flex; align-items:center; gap:8px; }
.action-label { display:none; }
.schedule-composer { padding:0; overflow:hidden; }
.composer-toggle { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:20px 22px; text-align:left; color:var(--text); background:transparent; border-radius:0; }
:root[data-theme="dark"] .composer-toggle { color:var(--text); }
.composer-toggle:hover { background:var(--card2); filter:none; }
.composer-copy { display:grid; gap:4px; min-width:0; }
.composer-copy strong { font-size:16px; }
.composer-copy span { font-size:13px; font-weight:400; color:var(--muted); }
.composer-chevron { display:flex; align-items:center; justify-content:center; width:24px; height:24px; flex:0 0 24px; color:var(--muted); transition:transform .22s ease; }
.composer-chevron svg { width:20px; height:20px; }
.composer-toggle[aria-expanded="true"] .composer-chevron { transform:rotate(180deg); }
.composer-body { display:grid; grid-template-rows:0fr; visibility:hidden; opacity:0; transition:grid-template-rows .25s ease,opacity .2s ease,visibility .25s; }
.composer-body.is-open { grid-template-rows:1fr; visibility:visible; opacity:1; }
.composer-inner { min-height:0; overflow:hidden; }
.schedule-add-form { margin:0; padding:0 22px 22px; }
#content[data-tab="subjects"] .row > :last-child { display:flex; gap:8px; }
@media (min-width:760px) {
  #content[data-tab="subjects"] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  #content[data-tab="subjects"] > .card { margin-bottom:0; }
  #content[data-tab="subjects"] > .card:first-child { grid-column:1 / -1; }
  #content[data-tab="subjects"] .login-box { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; }
  #content[data-tab="subjects"] .login-box > button { justify-self:start; }
  .schedule-add-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .schedule-add-form > button { justify-self:start; }
}
@media (max-width:600px) {
  #app { padding:20px 16px 48px; }
  .hero { padding-bottom:20px; }
  .hero h1 { margin-top:12px; }
  .tabs { margin:18px 0 20px; }
  .tabs button { font-size:clamp(12px,3.25vw,14px); }
  .card { padding:16px; }
  .card h3 { font-size:17px; }
  .lesson-editor { grid-template-columns:minmax(0,1fr); }
  .week-strip { gap:4px; }
  .day-chip { padding:8px 2px; }
  .calendar-nav { grid-template-columns:1fr 1fr; gap:8px; padding:12px; }
  .calendar-title { grid-column:1 / -1; grid-row:1; padding-bottom:4px; }
  .calendar-nav button:first-child { grid-column:1; grid-row:2; }
  .calendar-nav button:last-child { grid-column:2; grid-row:2; }
  .agenda-heading { flex-wrap:wrap; align-items:flex-start; }
  .agenda-item { grid-template-columns:minmax(0,1fr); gap:4px; }
  .list-item > .row { flex-wrap:wrap; }
  .list-item > .row > .cycle-details { flex-basis:100%; }
  .schedule-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; }
  .schedule-actions button { display:flex; align-items:center; justify-content:center; gap:8px; }
  .action-label { display:inline; }
  .schedule-composer { padding:0; }
  .composer-toggle { padding:16px; }
  .schedule-add-form { padding:0 16px 16px; }
}
@media (max-width:359px) {
  #app { padding-inline:12px; }
  .hero-kicker { max-width:155px; line-height:1.4; }
  .theme-toggle { padding-inline:9px; }
  .tabs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
  .tabs button { font-size:13px; padding-inline:4px; }
  .card { padding:14px; }
  .schedule-composer { padding:0; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { transition:none !important; } }