:root { --blue:#004063; --blue2:#075985; --cyan:#1683bd; --ink:#123751; --muted:#678092; --line:#dceaf1; --bg:#f4f8fb; --white:#fff; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button,input { font:inherit; }
button:disabled { opacity:.45; cursor:not-allowed; }
.shell { width:min(1180px, calc(100% - 40px)); margin:auto; }
.hero { display:flex; justify-content:space-between; align-items:end; gap:24px; padding:38px 0 26px; }
.eyebrow { color:var(--cyan); text-transform:uppercase; letter-spacing:.12em; font-weight:800; font-size:11px; margin:0 0 8px; }
h1,h2,p { margin-top:0; } h1 { font-size:clamp(30px,5vw,46px); letter-spacing:-.04em; line-height:1.05; margin:0 0 12px; color:var(--blue); } h2 { margin:0; font-size:25px; letter-spacing:-.03em; color:var(--blue); }
.week-status { background:#e6f3f9; color:var(--blue2); padding:10px 14px; border-radius:30px; white-space:nowrap; font-size:13px; font-weight:700; }.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#1ba66b; margin-right:7px; }
.control-card { background:var(--white); border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:0 10px 30px #0040630d; }.control-label { display:flex; align-items:center; gap:12px; margin-bottom:15px; }.label-icon { width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#e9f5fa;color:var(--cyan);font-size:24px; }.control-label strong,.control-label small { display:block; }.control-label small { color:var(--muted); font-size:12px; margin-top:2px; }
.entity-switch { display:inline-flex; gap:4px; margin-bottom:18px; padding:4px; border-radius:12px; background:#eaf3f7; }.entity-switch button { border:0; border-radius:9px; padding:8px 14px; background:transparent; color:var(--muted); cursor:pointer; font-size:12px; font-weight:800; }.entity-switch button.active { background:#fff; color:var(--blue); box-shadow:0 2px 8px #00406318; }
.group-picker { display:flex; gap:10px; }.autocomplete-wrap { position:relative; flex:1; min-width:0; }.group-picker input { width:100%; min-width:0; height:48px; border:1px solid #c7dce7; border-radius:11px; padding:0 15px; outline:0; color:var(--ink); background:#fbfdfe; }.group-picker input:focus { border-color:var(--cyan); box-shadow:0 0 0 4px #1683bd1c; }.autocomplete-list { position:absolute; z-index:40; top:calc(100% + 7px); left:0; right:0; max-height:min(280px,42vh); overflow:auto; overscroll-behavior:contain; padding:6px; border:1px solid #bfd9e6; border-radius:12px; background:#fff; box-shadow:0 16px 40px #003d5f2b; }.autocomplete-list.open-up { top:auto; bottom:calc(100% + 7px); }.autocomplete-option { display:block; width:100%; min-height:42px; padding:9px 11px; border:0; border-radius:8px; background:#fff; color:var(--ink); cursor:pointer; text-align:left; font-size:13px; font-weight:700; }.autocomplete-option:hover,.autocomplete-option.active { background:#e8f5fa; color:var(--blue2); }.autocomplete-empty { padding:10px 11px; color:var(--muted); font-size:12px; }.group-picker > button { height:48px; border:0; border-radius:11px; padding:0 20px; background:var(--blue); color:#fff; cursor:pointer; font-weight:750; }.group-picker > button:hover { background:var(--blue2); }.group-picker > button span { margin-left:8px; font-size:19px; }.helper { color:var(--muted); font-size:12px; margin:9px 2px 0; }
.helper.onboarding { color:var(--blue2); font-weight:700; }
.schedule-head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin:42px 0 15px; }.schedule-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }.week-actions { display:flex; gap:8px; }.secondary { border:1px solid var(--line); background:#fff; color:var(--blue2); border-radius:10px; padding:9px 12px; cursor:pointer; font-size:13px; font-weight:700; }.secondary:hover { border-color:#a6cbdc; background:#eef8fc; }
.view-switch { display:flex; padding:3px; border:1px solid var(--line); border-radius:11px; background:#eaf3f7; }.view-switch button { border:0; border-radius:8px; padding:7px 11px; color:var(--muted); background:transparent; cursor:pointer; font-size:12px; font-weight:750; }.view-switch button.active { color:var(--blue); background:#fff; box-shadow:0 2px 8px #00406314; }
.notify-button { display:inline-flex; align-items:center; gap:8px; min-height:38px; border:0; border-radius:10px; padding:8px 13px; background:var(--cyan); color:#fff; cursor:pointer; font-size:12px; font-weight:800; box-shadow:0 5px 14px #1683bd2e; }.notify-button:hover { background:#0f73a9; }.notify-button.enabled { background:#16845d; }.notify-button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.teacher-link { display:inline-flex; align-items:center; gap:5px; max-width:100%; margin:0; padding:0; border:0; background:transparent; color:var(--blue2); cursor:pointer; font:inherit; text-align:left; text-decoration:underline; text-decoration-color:#1683bd55; text-underline-offset:3px; }.teacher-link:hover { color:var(--cyan); text-decoration-color:currentColor; }.teacher-link span { flex:0 0 auto; color:var(--cyan); font-weight:900; }
.day-tabs { display:flex; gap:7px; margin-bottom:12px; overflow:auto; padding-bottom:2px; }.day-tab { border:1px solid var(--line); color:var(--blue2); background:#fff; border-radius:9px; padding:9px 13px; white-space:nowrap; cursor:pointer; font-weight:750; font-size:13px; }.day-tab.active { background:var(--blue); color:#fff; border-color:var(--blue); }.day-tab.today:not(.active) { border-color:var(--cyan); color:var(--cyan); }
.day-tab.all-days { padding-inline:15px; }
.schedule-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 10px 30px #0040630d; }.day-column { min-width:0; border-right:1px solid var(--line); }.day-column:last-child { border-right:0; }.day-title { background:var(--blue); color:#fff; padding:15px 12px; min-height:72px; }.day-title strong,.day-title small { display:block; }.day-title strong { font-size:14px; }.day-title small { color:#b9ddeb; margin-top:3px; font-size:11px; }.day-column.today .day-title { background:var(--cyan); }.lesson-slot { padding:12px 10px; min-height:104px; border-bottom:1px solid var(--line); }.lesson-slot.parallel { padding:10px; background:#f3f9fc; box-shadow:inset 4px 0 0 var(--cyan); }.lesson-variants { display:grid; gap:8px; }.lesson { min-width:0; }.lesson-slot.parallel .lesson { padding:9px; border:1px solid #cfe2ec; border-radius:9px; background:#fff; box-shadow:0 2px 7px #0040630a; }.day-column > .lesson.empty { min-height:58px; padding:12px 10px; background:#fbfdfe; }.lesson-top { display:flex; align-items:center; gap:8px; margin-bottom:9px; }.lesson-time { color:var(--cyan); font-weight:850; font-size:11px; line-height:1.2; }.lesson-number { display:inline-flex; align-items:baseline; gap:3px; flex:0 0 auto; padding:5px 7px; border-radius:7px; background:var(--blue); color:#fff; box-shadow:0 3px 8px #00406325; }.lesson-number b { font-size:15px; line-height:1; }.lesson-number small { font-size:9px; font-weight:750; opacity:.8; }.parallel-note { display:flex; align-items:center; justify-content:space-between; gap:6px; margin:0 0 9px; padding:6px 7px; border:1px solid #bcdce9; border-radius:7px; background:#e2f2f8; color:var(--blue2); }.parallel-note strong { font-size:10px; }.parallel-note span { white-space:nowrap; font-size:9px; font-weight:800; color:var(--cyan); }.lesson-name { color:var(--blue); font-weight:750; font-size:12px; line-height:1.22; margin:0 0 7px; }.lesson-meta { color:var(--muted); font-size:11px; line-height:1.3; }.lesson-type { display:inline-block; margin-top:7px; padding:3px 6px; border-radius:5px; font-size:10px; font-weight:750; background:#e8f6ef; color:#188356; }.lesson.practice .lesson-type { background:#fff4df;color:#af6b00; }.lesson.lab .lesson-type { background:#f1ebff;color:#7451b5; }
.schedule-gap { position:relative; display:grid; gap:2px; padding:12px 10px 12px 42px; border-bottom:1px dashed #e2bd71; background:repeating-linear-gradient(135deg,#fffaf0,#fffaf0 8px,#fff7e5 8px,#fff7e5 16px); color:#875a04; }.schedule-gap::before { content:""; position:absolute; left:16px; top:50%; width:13px; height:13px; margin-top:-7px; border:2px solid #c8870e; border-radius:50%; }.schedule-gap::after { content:""; position:absolute; left:22px; top:50%; width:5px; height:2px; background:#c8870e; transform-origin:left center; transform:rotate(-45deg); }.schedule-gap strong { font-size:11px; }.schedule-gap span { font-size:10px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }.schedule-gap small { color:#a27420; font-size:10px; }
.compact-schedule { overflow-x:auto; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 10px 30px #0040630d; }
.compact-table { width:100%; min-width:1120px; border-collapse:separate; border-spacing:0; table-layout:fixed; }.compact-table th,.compact-table td { border-right:1px solid var(--line); border-bottom:1px solid var(--line); vertical-align:top; }.compact-table tr:last-child th,.compact-table tr:last-child td { border-bottom:0; }.compact-table th:last-child,.compact-table td:last-child { border-right:0; }.compact-table thead th { position:sticky; top:0; z-index:2; padding:10px 8px; background:var(--blue); color:#fff; text-align:center; font-size:12px; }.compact-table thead th:first-child { left:0; z-index:3; width:138px; text-align:left; padding-left:14px; }.compact-date { position:sticky; left:0; z-index:1; width:138px; padding:13px 14px; background:#f0f7fa; color:var(--blue); text-align:left; }.compact-date strong,.compact-date small { display:block; }.compact-date strong { font-size:13px; }.compact-date small { margin-top:3px; color:var(--muted); font-size:11px; font-weight:500; }.compact-cell { padding:7px; min-width:140px; background:#fff; }.compact-cell:empty { background:#fbfdfe; }.compact-parallel-note { margin-bottom:6px; padding:4px 6px; border-radius:6px; background:#dff1f7; color:var(--blue2); font-size:9px; font-weight:850; text-align:center; }.compact-lesson { border-left:3px solid var(--cyan); border-radius:7px; padding:7px 8px; background:#eef8fc; }.compact-lesson + .compact-lesson { margin-top:6px; }.compact-lesson.practice { border-color:#dea233; background:#fff8ea; }.compact-lesson.lab { border-color:#8466c5; background:#f6f1ff; }.compact-name { color:var(--blue); font-size:11px; font-weight:750; line-height:1.2; }.compact-meta { margin-top:5px; color:var(--muted); font-size:10px; line-height:1.25; }
.schedule-loading,.schedule-error { border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 10px 30px #0040630d; }.loading-card,.error-card { min-height:180px; display:grid; place-content:center; justify-items:center; gap:7px; color:var(--muted); }.loading-card::before { content:""; width:24px; height:24px; border:3px solid #d8e8ef; border-top-color:var(--cyan); border-radius:50%; animation:spin .8s linear infinite; }.error-card strong { color:#9d2933; }.error-card span { font-size:12px; }.file-mode-card { min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:28px; text-align:center; }.file-mode-card strong { color:var(--blue); font-size:17px; }.file-mode-card span { max-width:610px; color:var(--muted); font-size:13px; }.file-mode-card a { margin-top:10px; padding:10px 14px; border-radius:9px; background:var(--blue); color:#fff; font-size:12px; font-weight:750; text-decoration:none; }.helper.loading { color:var(--cyan); }.helper.success { color:#39785d; }.helper.error { color:#a03741; } @keyframes spin { to { transform:rotate(360deg); } }
.site-footer { margin-top:30px; border-top:1px solid var(--line); background:#eaf3f7; }.footer-inner { min-height:104px; display:flex; align-items:center; justify-content:space-between; gap:24px; }.footer-inner strong,.footer-inner span { display:block; }.footer-inner strong { color:var(--blue); font-size:13px; }.footer-inner span { margin-top:3px; color:var(--muted); font-size:12px; }.footer-inner a { color:var(--blue2); font-size:12px; font-weight:750; text-decoration:none; }.footer-inner a:hover { text-decoration:underline; }.footer-links { display:flex; align-items:center; justify-content:flex-end; gap:16px; flex-wrap:wrap; }
.seo-schedule { display:block; padding:22px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 10px 30px #0040630d; }.seo-week { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:18px; }.seo-week .eyebrow { margin:0; }.seo-week-title { margin:0; color:var(--blue); font-size:18px; font-weight:850; }.seo-days { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.seo-day { min-width:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; }.seo-day h2 { padding:12px 14px; background:var(--blue); color:#fff; font-size:15px; }.seo-day h2 small { display:block; margin-top:2px; color:#b9ddeb; font-size:11px; }.seo-lesson { display:grid; grid-template-columns:86px 1fr; gap:12px; padding:13px; border-bottom:1px solid var(--line); }.seo-lesson:last-child { border-bottom:0; }.seo-lesson-time strong,.seo-lesson-time span { display:block; }.seo-lesson-time strong { color:var(--blue); font-size:12px; }.seo-lesson-time span { margin-top:3px; color:var(--cyan); font-size:10px; font-weight:800; }.seo-lesson h3 { margin:0 0 5px; color:var(--blue); font-size:13px; line-height:1.25; }.seo-lesson p { margin:0; color:var(--muted); font-size:11px; }.seo-lesson a { color:var(--blue2); font-weight:750; }.seo-lesson-type { display:inline-block; margin-top:7px; padding:3px 6px; border-radius:5px; background:#e8f6ef; color:#188356; font-size:9px; font-weight:800; }.seo-empty { padding:16px; color:var(--muted); }.seo-catalog { min-height:calc(100vh - 134px); padding-block:38px; }.seo-home { display:inline-block; margin-bottom:28px; color:var(--blue2); font-weight:750; text-decoration:none; }.seo-catalog-switch { display:flex; gap:10px; margin:24px 0; }.seo-catalog-switch a { padding:9px 12px; border-radius:9px; background:#e8f4f9; color:var(--blue2); font-weight:800; text-decoration:none; }.seo-catalog ul { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none; }.seo-catalog li a { display:block; height:100%; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--blue2); font-size:12px; font-weight:700; text-decoration:none; }.seo-catalog li a:hover { border-color:#9fc9db; background:#eef8fc; }
.modal-open { overflow:hidden; }.modal-backdrop { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:#002a4299; backdrop-filter:blur(5px); }.modal-backdrop[hidden] { display:none; }.notification-modal { position:relative; width:min(460px,100%); max-height:calc(100vh - 40px); overflow:auto; border:1px solid #cde1eb; border-radius:20px; padding:26px; background:#fff; box-shadow:0 24px 70px #002a4259; }.modal-close { position:absolute; top:14px; right:14px; width:34px; height:34px; border:0; border-radius:50%; background:#edf5f8; color:var(--blue); cursor:pointer; font-size:24px; line-height:1; }.modal-icon { width:48px; height:48px; display:grid; place-items:center; margin-bottom:16px; border-radius:14px; background:#e4f3f9; color:var(--cyan); }.modal-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }.notification-modal h2 { margin-bottom:9px; font-size:27px; }.modal-lead { margin-bottom:17px; color:var(--muted); font-size:13px; }.device-guide { display:grid; gap:10px; margin:0 0 20px; padding:0; list-style:none; counter-reset:guide; }.device-guide li { position:relative; min-height:28px; padding:5px 0 5px 38px; color:var(--ink); font-size:13px; }.device-guide li::before { position:absolute; left:0; top:1px; width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:var(--blue); color:#fff; counter-increment:guide; content:counter(guide); font-size:11px; font-weight:850; }.reminder-setting { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 14px; border:1px solid var(--line); border-radius:11px; background:#f7fafc; color:var(--blue); font-size:12px; font-weight:750; }.reminder-setting select { max-width:145px; border:1px solid #c6dce6; border-radius:8px; padding:7px 8px; background:#fff; color:var(--ink); font:inherit; }.notification-status { min-height:20px; margin:10px 2px 5px; color:var(--blue2); font-size:12px; }.notification-enable { width:100%; min-height:46px; border:0; border-radius:11px; background:var(--blue); color:#fff; cursor:pointer; font-weight:800; }.notification-enable:hover { background:var(--blue2); }.notification-enable.enabled { background:#16845d; }.notification-note { margin:11px 2px 0; color:var(--muted); font-size:10px; line-height:1.4; }
.notification-target { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 15px; padding:11px 12px; border:1px solid #bcdce9; border-radius:11px; background:#eaf6fa; }.notification-target span,.notification-target strong { display:block; }.notification-target span { color:var(--muted); font-size:10px; }.notification-target strong { color:var(--blue); font-size:13px; text-align:right; }.notification-disable { width:100%; min-height:40px; margin-top:8px; border:1px solid #cbdde6; border-radius:10px; background:#fff; color:var(--blue2); cursor:pointer; font-weight:750; }.notification-server-note { margin:12px 0 0; padding:10px 11px; border-left:3px solid #1a9b69; border-radius:7px; background:#edf9f4; color:#39705b; font-size:10px; line-height:1.45; }.notification-server-note strong { color:#16724e; }
@media (max-width:900px) { .schedule-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.day-column:nth-child(3) { border-right:0; }.day-column:nth-child(-n+3) { border-bottom:1px solid var(--line); } }
@media (max-width:620px) { .shell { width:min(100% - 24px, 560px); }.hero { display:block; padding:28px 0 20px; }.week-status { display:inline-block; margin-top:15px; }.group-picker { display:block; }.autocomplete-wrap,.group-picker input,.group-picker > button { width:100%; }.group-picker > button { margin-top:8px; }.autocomplete-list { max-height:min(230px,36vh); }.schedule-head { align-items:start; display:block; margin-top:30px; }.schedule-tools { justify-content:flex-start; margin-top:13px; }.notify-button { order:-1; width:100%; justify-content:center; }.week-actions { width:100%; }.week-actions button { flex:1; }.schedule-grid { display:block; border-radius:14px; }.day-column { border:0!important; display:none; }.day-column.active { display:block; }.day-title { min-height:auto; padding:14px 16px; }.lesson-slot { padding:14px 16px; min-height:100px; }.lesson-slot.parallel { padding:12px; }.lesson-slot.parallel .lesson { padding:11px; }.day-column > .lesson.empty { min-height:48px; padding:14px 16px; }.day-tabs { margin-bottom:10px; }.compact-schedule { border-radius:14px; }.compact-table { min-width:1020px; }.notification-modal { padding:22px 18px; border-radius:17px; }.reminder-setting { align-items:flex-start; flex-direction:column; gap:8px; }.reminder-setting select { width:100%; max-width:none; }.footer-inner { min-height:132px; display:block; padding:26px 0; }.footer-inner a { display:inline-block; margin-top:14px; }.footer-links { display:flex; justify-content:flex-start; margin-top:14px; }.footer-links a { margin-top:0; }.seo-schedule { padding:14px; }.seo-week { display:block; }.seo-week-title { margin-top:5px; }.seo-days { grid-template-columns:1fr; }.seo-catalog ul { grid-template-columns:1fr; } }