:root { --ink:#20202a; --muted:#75758a; --paper:#fff; --page:#f6f6f4; --line:#e9e9ec; --soft:#f4f4f5; --accent:#6d5dfc; --accent-soft:#eceaff; --shadow:#6d5dfc3c; --danger:#c9424d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --ink:#f3f1fb; --muted:#aaa7b7; --paper:#1d1d28; --page:#111119; --line:#32313d; --soft:#292835; --accent:#a798ff; --accent-soft:#2e294b; --shadow:#00000055; --danger:#ff8992; } }
:root[data-theme="dark"] { --ink:#f3f1fb; --muted:#aaa7b7; --paper:#1d1d28; --page:#111119; --line:#32313d; --soft:#292835; --accent:#a798ff; --accent-soft:#2e294b; --shadow:#00000055; --danger:#ff8992; }
* { box-sizing:border-box; } body { margin:0; background:var(--page); color:var(--ink); font-family:Manrope,Arial,sans-serif; transition:background .2s,color .2s; } .page { max-width:1180px; margin:auto; padding:28px 32px 55px; }
.header { display:flex; justify-content:space-between; align-items:center; gap:15px; }.brand { color:var(--ink); text-decoration:none; font-size:19px; font-weight:800; display:flex; gap:10px; align-items:center; }.brand-mark { display:grid; place-items:center; width:28px; height:28px; color:white; font-size:16px; background:var(--accent); border-radius:9px 9px 9px 2px; }.header-actions { display:flex; align-items:center; gap:9px; }.theme-picker { display:flex; padding:3px; gap:1px; background:var(--soft); border-radius:10px; }.theme-picker button { border:0; background:transparent; color:var(--muted); cursor:pointer; width:27px; height:27px; border-radius:7px; font-size:14px; }.theme-picker button[aria-pressed="true"] { background:var(--paper); color:var(--accent); box-shadow:0 1px 3px #0002; }.admin-link { background:var(--accent-soft); color:var(--accent); border:0; border-radius:9px; padding:8px 11px; font:700 12px Manrope,Arial,sans-serif; text-decoration:none; cursor:pointer; }.button-link { margin:0; }
.intro { padding:74px 0 39px; }.eyebrow { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.13em; margin:0 0 10px; }h1 { max-width:650px; margin:0; font-size:clamp(39px,6vw,68px); line-height:1.05; letter-spacing:-.06em; }.intro-copy,.admin-intro p,.form-copy { color:var(--muted); max-width:500px; line-height:1.7; font-size:14px; margin:15px 0 0; }
.week { display:flex; gap:8px; overflow-x:auto; padding:2px 1px 8px; margin-bottom:22px; scrollbar-width:thin; }.day { flex:0 0 57px; text-decoration:none; color:var(--muted); text-align:center; border-radius:13px; padding:12px 6px; transition:.15s; }.day:hover { background:var(--soft); }.day.weekend { color:var(--danger); }.day span { font-size:11px; font-weight:700; display:block; margin-bottom:5px; }.day strong { font-size:19px; }.day.active { color:white; background:var(--accent); box-shadow:0 8px 18px var(--shadow); }.day.weekend.active { color:white; background:var(--danger); box-shadow:0 8px 18px color-mix(in srgb,var(--danger) 30%,transparent); }
.layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(270px,.75fr); gap:24px; }.card { background:var(--paper); border:1px solid var(--line); border-radius:21px; }.schedule { padding:29px; }.section-heading { display:flex; justify-content:space-between; align-items:start; padding-bottom:25px; border-bottom:1px solid var(--line); }.date-label { color:var(--muted); font-size:12px; font-weight:700; margin:0 0 4px; }.section-heading h2,.upcoming h2,.admin-card h2 { margin:0; font-size:24px; letter-spacing:-.04em; }.lesson-count { color:var(--muted); font-size:12px; background:var(--soft); border-radius:99px; padding:7px 10px; }.lesson { display:grid; grid-template-columns:33px 53px 10px 1fr; gap:11px; padding:22px 0; border-bottom:1px solid var(--line); }.lesson:last-child { border:0; padding-bottom:0; }.number { color:var(--muted); font-size:13px; font-weight:800; }.time { color:var(--muted); font-size:12px; padding-top:2px; }.dot,.tiny-dot { width:9px; height:9px; border-radius:50%; margin-top:5px; }.lesson h3,.upcoming h3 { margin:0; font-size:14px; letter-spacing:-.02em; }.lesson p { margin:5px 0 0; color:var(--muted); line-height:1.55; font-size:13px; }.empty { color:var(--muted)!important; }.side { display:flex; flex-direction:column; gap:16px; }.upcoming { padding:27px 22px; }.upcoming h2 { font-size:20px; margin-bottom:19px; }.upcoming-item { display:flex; gap:10px; padding:15px 0; border-top:1px solid var(--line); }.upcoming-item p { color:var(--muted); font-size:12px; line-height:1.45; margin:4px 0 6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }.upcoming time { color:var(--muted); font-size:11px; }.tiny-dot { flex:0 0 auto; }.no-lessons { text-align:center; padding:52px 10px 24px; color:var(--muted); }.no-lessons span { font-size:32px; }.no-lessons h3 { color:var(--ink); margin:10px 0 4px; }.no-lessons p { font-size:13px; }
.login-wrap { display:grid; min-height:70vh; place-items:center; }.login-card { width:min(100%,430px); padding:34px; }.login-card h1 { font-size:40px; }.form-stack { display:grid; gap:15px; margin-top:23px; }.form-stack label { display:grid; gap:7px; color:var(--muted); font-size:12px; font-weight:700; }input,select,textarea { width:100%; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--page); padding:10px 11px; font:500 14px Manrope,Arial,sans-serif; }textarea { min-height:94px; resize:vertical; } input:focus,select:focus,textarea:focus { outline:2px solid var(--accent); outline-offset:1px; }.primary { border:0; border-radius:10px; color:white; background:var(--accent); padding:12px 15px; font:700 13px Manrope,Arial,sans-serif; cursor:pointer; }.flash { padding:12px 14px; border-radius:10px; font-size:13px; }.flash.error { color:var(--danger); background:color-mix(in srgb,var(--danger) 12%,transparent); }.flash.success { color:var(--accent); background:var(--accent-soft); }.admin-intro { padding:60px 0 28px; }.admin-intro h1 { font-size:48px; }.admin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }.admin-card { padding:25px; }.admin-card h2 { font-size:20px; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.form-row.three { grid-template-columns:repeat(3,1fr); }.compact { max-width:300px; }.hint { color:var(--muted); font-size:11px; line-height:1.5; margin:9px 0 0; }.bell-list { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:20px; }.bell-list div { padding:10px; background:var(--soft); border-radius:10px; }.bell-list strong,.bell-list span { display:block; }.bell-list strong { font-size:12px; }.bell-list span { margin-top:3px; color:var(--muted); font-size:11px; }.admin-wide { grid-column:span 2; }.schedule-table-wrap { overflow-x:auto; margin-top:24px; border:1px solid var(--line); border-radius:12px; }.schedule-table { width:100%; min-width:620px; border-collapse:collapse; font-size:12px; }.schedule-table th,.schedule-table td { min-width:108px; padding:12px; text-align:left; vertical-align:middle; border-bottom:1px solid var(--line); border-right:1px solid var(--line); }.schedule-table tr:last-child th,.schedule-table tr:last-child td { border-bottom:0; }.schedule-table th:last-child,.schedule-table td:last-child { border-right:0; }.schedule-table thead { color:var(--muted); background:var(--soft); font-size:11px; }.schedule-table tbody th { width:90px; }.schedule-table tbody th strong,.schedule-table tbody th span { display:block; }.schedule-table tbody th span { color:var(--muted); font-weight:500; font-size:10px; line-height:1.4; margin-top:2px; }.subject-chip { display:inline-block; padding:5px 7px; border-radius:7px; color:var(--accent); background:var(--accent-soft); font-weight:700; }.admin-item { display:flex; align-items:start; justify-content:space-between; gap:12px; padding:14px 0; border-top:1px solid var(--line); }.admin-item strong,.admin-item span { display:block; }.admin-item strong { font-size:12px; }.admin-item span { color:var(--muted); font-size:12px; line-height:1.55; margin-top:3px; }.delete { color:var(--danger); border:1px solid currentColor; background:transparent; border-radius:8px; padding:6px 8px; cursor:pointer; font:700 11px Manrope,Arial,sans-serif; }
.management-list { display:grid; gap:8px; margin-top:20px; }.management-item,.subject-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 0; border-top:1px solid var(--line); }.management-item strong,.management-item span { display:block; }.management-item strong { font-size:12px; }.management-item span { color:var(--muted); font-size:11px; margin-top:2px; }.item-actions { display:flex; align-items:center; gap:6px; }.subject-row { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:8px; flex:1; }.subject-row input { padding:7px 8px; }.subject-row .subject-color { height:34px; padding:2px; }.form-submit { display:flex; align-items:center; gap:12px; }.save-status { color:var(--accent); font-size:12px; font-weight:700; }.cell-delete { display:inline-block; margin-left:4px; }.cell-delete-button { border:0; border-radius:5px; padding:0 5px; background:transparent; color:var(--danger); font:800 15px/1 Manrope,Arial,sans-serif; cursor:pointer; vertical-align:middle; }.cell-delete-button:hover { background:color-mix(in srgb,var(--danger) 12%,transparent); }
.collapsible { margin-top:20px; }.collapsible summary { color:var(--accent); cursor:pointer; font-size:12px; font-weight:800; list-style:none; }.collapsible summary::before { content:"▸"; display:inline-block; margin-right:7px; transition:transform .15s; }.collapsible[open] summary::before { transform:rotate(90deg); }.collapsible summary::-webkit-details-marker { display:none; }
@media (max-width:720px) { .page { padding:20px 16px 35px; }.intro { padding:55px 0 30px; }.layout,.admin-grid { grid-template-columns:1fr; }.schedule { padding:20px; }.week { gap:6px; margin-right:-16px; padding-right:16px; }.day { flex-basis:51px; padding:10px 3px; }.day strong { font-size:16px; }.lesson { grid-template-columns:28px 43px 8px 1fr; gap:7px; }.lesson p { font-size:12px; }.admin-wide { grid-column:auto; }.form-row,.form-row.three { grid-template-columns:1fr; }.header-actions { gap:5px; }.admin-link { padding:7px 8px; } }