:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: #172b4d; background: #eef3f8; } * { box-sizing: border-box; } body { margin: 0; min-width: 320px; } .app-shell { width: min(100%, 900px); margin: auto; padding: 24px 16px 42px; } .app-header { color: #fff; background: linear-gradient(125deg, #102a43, #1c4d78); border-radius: 18px; padding: 24px; box-shadow: 0 10px 26px #102a4330; } .eyebrow { margin: 0 0 6px; font-size: .72rem; font-weight: 750; letter-spacing: .1em; color: #b8dbf3; } h1 { margin: 0; font-size: clamp(1.65rem, 7vw, 2.35rem); letter-spacing: -.03em; } .board-time { margin: 8px 0 0; font-size: .92rem; color: #d5e9f7; } .toolbar { display: flex; gap: 10px; margin: 18px 0 10px; } .search-field { flex: 1; } input, button { font: inherit; border-radius: 10px; min-height: 44px; } input { width: 100%; border: 1px solid #c5d1dc; background: #fff; padding: 0 13px; color: inherit; } input:focus { outline: 3px solid #6bb6df80; border-color: #1779b0; } button { border: 0; padding: 0 16px; background: #0d6596; color: #fff; font-weight: 700; cursor: pointer; } button:hover { background: #094d73; } button:disabled { opacity: .6; cursor: wait; } .board-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; margin: 0 2px 16px; color: #52657c; font-size: .79rem; } .connection { font-weight: 750; }.connection::before { content: "●"; margin-right: 5px; }.is-loading { color: #9c6c00; }.is-ok { color: #187445; }.is-error { color: #b42318; } .message { border: 1px solid #e5b7b2; border-radius: 10px; background: #fff1f0; padding: 12px; color: #8b1c13; font-size: .9rem; line-height: 1.45; } .court-list { display: grid; gap: 10px; } .court-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 80px; padding: 12px; border: 1px solid #d7e0e8; border-radius: 14px; background: #fff; box-shadow: 0 2px 8px #172b4d0b; } .court-number { align-self: stretch; display: grid; place-items: center; border-radius: 10px; background: #e6f1f8; color: #0d527e; font-weight: 800; font-size: 1.02rem; }.court-number::before { content: "COURT"; display: block; font-size: .55rem; letter-spacing: .06em; } .case-number { overflow-wrap: anywhere; margin: 0; font-weight: 760; font-size: 1rem; }.serial-number { margin: 4px 0 0; color: #63748a; font-size: .78rem; } .status { max-width: 130px; padding: 6px 8px; border-radius: 999px; background: #eaf0f5; color: #40536a; text-align: center; font-size: .72rem; font-weight: 750; line-height: 1.2; } .is-progress .status { background: #dcfce7; color: #166534; }.is-vacant { border-left: 4px solid #b97700; }.is-vacant .court-number { background: #fff3d5; color: #8c5a00; }.is-vacant .status { background: #fff3d5; color: #8c5a00; }.is-session { border-left: 4px solid #3867a6; }.is-session .status { background: #e7effc; color: #274f87; }.is-not-session { opacity: .82; }.is-not-session .status { background: #f0f2f5; color: #586577; } .empty { text-align: center; color: #63748a; padding: 30px 12px; }.help { margin-top: 28px; color: #53677d; font-size: .82rem; line-height: 1.5; }.help summary { cursor: pointer; font-weight: 700; color: #294b68; }.help p { margin: 9px 0; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } @media (min-width: 640px) { .app-shell { padding: 36px 28px 52px; }.court-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }.court-card { grid-template-columns: 52px minmax(0, 1fr); }.status { grid-column: 2; justify-self: start; }.court-number { grid-row: 1 / span 2; } }