:root { color:#213b61; background:#eaf5ff; font-family:Verdana, Geneva, sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
body { min-width:320px; margin:0; }
button, input { font:inherit; }
.shell { width:min(1200px, calc(100% - 40px)); min-height:100vh; margin:0 auto; padding:28px 0 64px; }
.topbar { display:flex; align-items:center; justify-content:space-between; min-height:62px; }
.brand-cluster { display:flex; align-items:center; gap:34px; min-width:0; }.brand { display:inline-flex; align-items:center; text-decoration:none; }.brand img { display:block; width:104px; height:auto; }.publisher-logo { display:block; width:126px; height:62px; object-fit:contain; }.znai-tech { display:block; width:116px; height:auto; }
.hero-description { max-width:1180px; margin:12px auto 0; color:#627d9b; font-size:14px; line-height:1.5; }.hero-description p { margin:0; }.hero-description ol { margin:6px 0 0; padding:0; list-style-position:inside; text-align:center; }.hero-description li + li { margin-top:2px; }
.dashboard-modes { position:relative; z-index:11; display:flex; align-items:flex-end; justify-content:center; gap:0; margin:18px 0 -1px; isolation:isolate; }.dashboard-modes[hidden] { display:none!important; }.mode-button { position:relative; z-index:1; min-width:190px; min-height:48px; margin:0; padding:0 34px; color:#456b93; border:0; background:transparent; cursor:pointer; font-size:14px; font-weight:700; }.mode-button + .mode-button { margin-left:-22px; }.mode-button::before { position:absolute; inset:0 7px; z-index:-1; border:1px solid #c7ddf5; border-bottom:0; border-radius:18px 18px 0 0; background:#fafdff; box-shadow:0 -4px 14px #397cc90a; transform:perspective(76px) rotateX(3deg); transform-origin:center bottom; content:""; transition:background .18s ease, border-color .18s ease, transform .18s ease; }.mode-button:nth-child(1) { z-index:3; }.mode-button:nth-child(2) { z-index:2; }.mode-button:nth-child(3) { z-index:1; }.mode-button.is-active { z-index:5; min-height:52px; color:#fff; }.mode-button.is-active::before { border-color:#2d7ad5; background:#2d7ad5; box-shadow:0 -5px 18px #2d7ad525; transform:perspective(76px) rotateX(3deg) translateY(0); }.mode-button:hover::before { filter:brightness(.97); }
.filter-card { position:sticky; top:10px; z-index:10; margin-top:0; padding:20px; border:1px solid #cfe4fb; border-radius:18px; background:#fafdff; box-shadow:0 18px 50px #397cc90c; }.sticky-logos { pointer-events:none; }.sticky-logo { position:absolute; top:50%; width:110px; height:auto; opacity:0; filter:drop-shadow(0 6px 16px #397cc918); transition:opacity .22s ease, transform .22s ease; }.sticky-logo-left { left:-146px; transform:translate(-8px,-50%); }.sticky-logo-publisher { top:calc(50% + 82px); left:-154px; width:126px; transform:translate(-8px,-50%); }.sticky-logo-right { right:-146px; transform:translate(8px,-50%); }.filter-card.is-stuck .sticky-logo { opacity:1; transform:translate(0,-50%); }
.filter-form { display:grid; grid-template-columns:minmax(300px, 1fr) 270px auto auto; gap:8px; align-items:end; }.filter-form.has-region { grid-template-columns:minmax(220px,1fr) minmax(220px,.7fr) 250px auto auto; }.scope-region[hidden] { display:none; }
.inn-field { position:relative; display:flex; min-width:0; min-height:48px; border:1px solid #c7ddf5; border-radius:11px; background:#fff; }.inn-field { gap:12px; align-items:center; padding:0 16px; }.search-icon { width:17px; height:17px; flex:0 0 auto; border:2px solid #6685a6; border-radius:50%; position:relative; }.search-icon::after { position:absolute; right:-7px; bottom:-4px; width:8px; height:2px; rotate:45deg; background:#6685a6; content:""; }
.inn-field input { width:100%; min-width:0; border:0; outline:0; color:#213b61; background:transparent; font-size:16px; }.inn-field input::placeholder { color:#8aa0ba; }.inn-field input[readonly] { cursor:pointer; }.inn-field [hidden] { display:none; }
.inn-field.is-select::after { width:9px; height:9px; flex:0 0 auto; margin-left:2px; border-right:2px solid #456b93; border-bottom:2px solid #456b93; rotate:45deg; translate:0 -3px; content:""; }
.suggestion-menu { position:absolute; top:calc(100% + 8px); right:-1px; left:-1px; z-index:35; max-height:320px; overflow:auto; padding:7px; border:1px solid #c7ddf5; border-radius:14px; background:#fff; box-shadow:0 18px 44px #244c7b2e; scrollbar-color:#9ab3cf #eef5fd; scrollbar-width:thin; }
.suggestion-option { display:block; width:100%; padding:10px 12px; color:#213b61; border:0; border-radius:9px; background:transparent; text-align:left; cursor:pointer; line-height:1.25; }.suggestion-option + .suggestion-option { margin-top:2px; }.suggestion-option:hover,.suggestion-option:focus-visible { color:#fff; outline:0; background:#4f78d5; }.suggestion-empty { margin:4px; padding:9px; color:#7187a4; text-align:center; font-size:12px; }
.period-picker { position:relative; }.period-field { display:grid; grid-template-columns:1fr auto; column-gap:8px; width:100%; min-height:48px; padding:6px 11px; color:#213b61; border:1px solid #c7ddf5; border-radius:11px; background:#fff; text-align:left; cursor:pointer; }.period-field > span { grid-column:1; color:#67809d; font-size:11px; font-weight:700; }.period-field strong { grid-column:1; font-size:13px; font-weight:400; white-space:nowrap; }.calendar-icon { grid-column:2; grid-row:1 / 3; align-self:center; width:14px; height:14px; border:2px solid #243f62; border-radius:2px; position:relative; }.calendar-icon::before { position:absolute; top:2px; left:-2px; width:14px; border-top:2px solid #243f62; content:""; }.period-field:focus-visible { outline:0; border-color:#3481db; box-shadow:0 0 0 3px #3481db20; }
.period-popover { position:absolute; top:calc(100% + 8px); right:0; z-index:20; width:330px; padding:14px; border:1px solid #c7ddf5; border-radius:14px; background:#fff; box-shadow:0 16px 36px #244c7b30; }.period-presets { display:flex; flex-wrap:wrap; gap:6px; padding-bottom:12px; border-bottom:1px solid #e3eefb; }.period-presets button { padding:6px 8px; color:#456b93; border:0; border-radius:7px; background:#eef5fd; cursor:pointer; font-size:11px; font-weight:700; }.period-presets button:hover { color:#fff; background:#2d7ad5; }.calendar-head { display:grid; grid-template-columns:34px 1fr 34px; align-items:center; margin-top:10px; text-align:center; }.calendar-head button { width:30px; height:30px; justify-self:center; color:#456b93; border:0; border-radius:50%; background:transparent; cursor:pointer; font-size:24px; line-height:1; }.calendar-head button:hover { background:#eef5fd; }.calendar-head strong { font-size:13px; }.calendar-weekdays, .calendar-days { display:grid; grid-template-columns:repeat(7, 1fr); text-align:center; }.calendar-weekdays { margin-top:8px; color:#8ba0b8; font-size:10px; }.calendar-days { margin-top:3px; }.calendar-days i, .calendar-days button { aspect-ratio:1; display:grid; place-items:center; border:0; background:transparent; }.calendar-days button { margin:2px; color:#213b61; border-radius:7px; cursor:pointer; font-size:12px; }.calendar-days button:hover { background:#e7f1ff; }.calendar-days button.in-range { border-radius:0; background:#dfeaff; }.calendar-days button.selected { color:#fff; background:#2d7ad5; }.calendar-hint { margin:10px 0 0; color:#67809d; text-align:center; font-size:11px; }
.search-submit, .reset-button { min-height:48px; padding:0 20px; border-radius:11px; cursor:pointer; font-size:14px; font-weight:700; white-space:nowrap; }.search-submit { color:#fff; border:1px solid #2d7ad5; background:#2d7ad5; }.reset-button { color:#456b93; border:1px solid #c7ddf5; background:#fff; }.search-submit:hover, .reset-button:hover { filter:brightness(.96); }.search-submit:disabled { opacity:.6; cursor:wait; }
.filter-hint { min-height:20px; margin:16px 2px 0; color:#67809d; font-size:13px; line-height:1.4; }.filter-hint:empty { display:none; }.filter-hint[data-kind="error"] { color:#b54252; }.filter-hint[data-kind="ready"] { color:#2874a2; }.filter-hint[data-kind="loading"] { display:grid; grid-template-columns:1fr auto; gap:7px 12px; align-items:center; color:#456b93; }.loading-percent { color:#2d7ad5; font-weight:700; }.loading-track { grid-column:1 / -1; height:5px; overflow:hidden; border-radius:999px; background:#e2edf9; }.loading-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#77a5ee,#2d7ad5); transition:width .45s ease; }.report-link { color:#2874a2; font-weight:700; }
.dashboard { min-width:0; margin-top:24px; }.dashboard iframe { display:block; width:100%; max-width:100%; min-height:0; border:0; background:#eaf5ff; }
.support-card { position:fixed; right:20px; bottom:20px; z-index:45; display:flex; align-items:center; gap:10px; width:max-content; max-width:320px; padding:8px 12px 8px 8px; border:1px solid #cfe4fb; border-radius:16px; background:#fff; box-shadow:0 14px 34px #244c7b20; }
.support-toggle { display:inline-flex; width:48px; height:48px; flex:0 0 auto; align-items:center; justify-content:center; gap:8px; padding:0; color:#fff; border:0; border-radius:50%; background:linear-gradient(145deg,#6686e6,#416bd6); box-shadow:0 7px 16px #416bd630; cursor:pointer; }
.support-toggle svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.support-toggle-label { display:none; font-size:13px; font-weight:700; }
.support-content { display:grid; min-width:0; gap:3px; line-height:1.22; }
.support-content strong { color:#213b61; font-size:12px; font-weight:600; white-space:nowrap; }
.support-content a { width:max-content; color:#1682d5; font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.support-content a:last-child { font-weight:400; }
.support-content a:hover { color:#0d65af; }
@media (min-width:1981px) { .support-toggle { cursor:default; } }
@media (max-width:1980px) {
  .support-card { right:14px; bottom:14px; max-width:calc(100vw - 28px); padding:6px; border-radius:999px; }
  .support-card:not(.is-open) .support-content { display:none; }
  .support-card:not(.is-open) .support-toggle { width:auto; min-width:126px; height:48px; padding:0 15px; border-radius:999px; }
  .support-card:not(.is-open) .support-toggle-label { display:inline; }
  .support-card.is-open { width:max-content; max-width:calc(100vw - 28px); padding:8px 12px 8px 8px; border-radius:16px; }
}
@media (min-width:781px) and (max-width:1100px) {
  .filter-form.has-region { grid-template-columns:minmax(0, 1fr) auto auto; }
  .filter-form.has-region .inn-field { grid-column:1 / -1; }
}
@media (max-width:900px) { .filter-form { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) auto; }.inn-field { grid-column:1 / -1; } }
@media (max-width:1450px) { .sticky-logos { display:none; } }
@media (max-width:780px) {
  .shell { width:calc(100% - 16px); padding:12px 0 36px; }
  .topbar { min-height:44px; padding:0 4px; }
  .brand-cluster { gap:16px; }
  .brand img { width:88px; }
  .publisher-logo { width:94px; height:46px; }
  .znai-tech { width:98px; }
  .dashboard-modes { gap:6px; margin-top:12px; }
  .mode-button { min-width:0; flex:1; padding:0 8px; font-size:12px; }
  .filter-card { position:relative; top:auto; padding:12px; border-radius:16px; }
  .filter-form, .filter-form.has-region { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; align-items:stretch; }
  .inn-field, .period-picker { grid-column:1 / -1; width:100%; }
  .search-submit, .reset-button { width:100%; min-width:0; padding:0 10px; }
  .period-popover { right:auto; left:0; width:min(330px, calc(100vw - 42px)); }
  .filter-hint { margin:12px 2px 0; }
  .dashboard { margin-top:14px; }
  .support-card { right:8px; bottom:8px; max-width:calc(100vw - 16px); }
  .support-card.is-open { width:max-content; max-width:calc(100vw - 16px); }
}
@media (max-width:480px) {
  .shell { width:calc(100% - 10px); padding-top:8px; }
  .brand-cluster { gap:9px; }
  .brand img { width:82px; }
  .publisher-logo { width:73px; height:36px; }
  .znai-tech { width:91px; }
  .dashboard-modes { margin-top:10px; }
  .mode-button { padding:0 4px; font-size:11px; }
  .filter-card { padding:9px; border-radius:14px; }
  .inn-field, .period-field, .search-submit, .reset-button { min-height:46px; }
  .inn-field { padding:0 13px; }
  .period-field { padding:5px 10px; }
  .period-field strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; }
  .search-submit, .reset-button { font-size:13px; }
  .filter-hint { font-size:12px; }
  .period-popover { width:calc(100vw - 30px); padding:11px; }
  .support-card.is-open { gap:9px; padding:8px 11px 8px 8px; }
  .support-card:not(.is-open) { padding:4px; border-radius:50%; }
  .support-card:not(.is-open) .support-toggle { width:46px; min-width:46px; height:46px; padding:0; border-radius:50%; }
  .support-card:not(.is-open) .support-toggle-label { display:none; }
  .support-toggle { width:46px; height:46px; }
  .support-toggle svg { width:24px; height:24px; }
  .support-content strong { overflow:hidden; max-width:245px; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
  .support-content a { font-size:12px; }
}
.school-option { white-space: normal; overflow-wrap: anywhere; text-align: left; }
.school-option strong { display: block; font-size: 15px; line-height: 1.35; font-weight: 600; }
.school-option span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: #6b84a6; }
.school-option:hover > span, .school-option:focus-visible > span { color: inherit; }
.school-option:focus-visible { outline: 2px solid #5478ce; outline-offset: -2px; }
@media (max-width:900px) {
  .inn-field:has(.school-choices:not([hidden])) { flex-wrap:wrap; padding-top:13px; gap:10px; }
  .inn-field:has(.school-choices:not([hidden])) input { flex:1; width:calc(100% - 30px); }
  .school-choices { position:static; flex:0 0 100%; max-height:240px; margin:0 0 10px; box-shadow:none; }
}
