:root {
  --navy: #081a33;
  --blue: #1276d2;
  --yellow: #ffbd24;
  --green: #18864b;
  --orange: #e87817;
  --red: #c62828;
  --surface: #ffffff;
  --muted: #6a7280;
  --bg: #eef3f8;
  --shadow: 0 18px 45px rgba(8, 26, 51, .12);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--navy); min-height: 100vh; }
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { width: min(760px, 100%); margin: 0 auto; padding: 18px 14px 40px; }
.brand-card, .timer-card, .history-card, .stats-grid article { background: var(--surface); border-radius: 22px; box-shadow: var(--shadow); }
.brand-card { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.brand-main { min-width: 0; flex: 1; }
.brand-logo { display: block; width: min(360px, 82%); max-height: 86px; object-fit: contain; object-position: left center; margin-bottom: 5px; }
.eyebrow { margin: 0 0 5px; font-size: .75rem; letter-spacing: .14em; font-weight: 800; color: var(--blue); }
h1 { margin: 0; font-size: clamp(1.15rem, 4.4vw, 1.65rem); }
h2 { margin: 0; font-size: 1.2rem; }
.icon-button { border: 0; background: #eaf2fa; width: 44px; height: 44px; border-radius: 14px; font-size: 1.2rem; }
.timer-card { margin-top: 16px; padding: 20px; text-align: center; border: 4px solid var(--green); transition: .2s ease; overflow: hidden; }
.timer-topline { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-weight: 700; font-size: .85rem; }
.pair-label { margin: 22px 0 0; color: var(--muted); letter-spacing: .14em; font-weight: 800; }
.pair-number { font-size: 2.1rem; font-weight: 900; margin-top: 2px; }
.timer { font-variant-numeric: tabular-nums; font-size: clamp(4.5rem, 20vw, 8rem); font-weight: 900; line-height: 1; margin: 12px 0 8px; letter-spacing: -.07em; }
.status-message { min-height: 28px; font-size: 1.05rem; font-weight: 800; }
.progress-track { margin-top: 18px; height: 12px; border-radius: 999px; background: #e8edf2; overflow: hidden; }
.progress-track div { height: 100%; width: 0; background: var(--green); transition: width .5s linear, background .2s ease; }
.status-yellow { border-color: var(--yellow); }
.status-yellow .progress-track div { background: var(--yellow); }
.status-orange { border-color: var(--orange); }
.status-orange .progress-track div { background: var(--orange); }
.status-red { border-color: var(--red); animation: pulseBorder 1.5s infinite; }
.status-red .progress-track div { background: var(--red); }
@keyframes pulseBorder { 50% { box-shadow: 0 0 0 10px rgba(198,40,40,.08), var(--shadow); } }
.controls { margin: 16px 0; display: grid; gap: 10px; }
.control-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
.primary-button, .secondary-button, .danger-button { min-height: 58px; border: 0; border-radius: 16px; font-weight: 900; letter-spacing: .03em; padding: 14px 16px; }
.primary-button { background: var(--navy); color: #fff; }
.finish-button { background: var(--blue); }
.secondary-button { background: #dfe9f4; color: var(--navy); }
.danger-button { background: #ffe5e5; color: #9f1717; }
.hidden { display: none !important; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stats-grid article { padding: 17px; display: flex; flex-direction: column; gap: 6px; }
.stats-grid span { font-size: .82rem; color: var(--muted); font-weight: 700; }
.stats-grid strong { font-size: 1.55rem; }
.history-card { margin-top: 16px; padding: 20px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.text-button { border: 0; background: transparent; color: var(--blue); font-weight: 800; }
.history-list { margin-top: 14px; display: grid; gap: 8px; }
.history-item { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #f5f8fb; align-items: center; }
.history-item.over { background: #fff0f0; }
.history-item span { color: var(--muted); font-size: .88rem; }
.empty { color: var(--muted); padding: 14px 0; }
dialog { border: 0; padding: 0; border-radius: 22px; width: min(92vw, 560px); box-shadow: 0 30px 70px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(3, 13, 27, .65); backdrop-filter: blur(4px); }
.dialog-card { padding: 22px; display: grid; gap: 16px; }
.wide-dialog { max-height: 82vh; overflow: auto; }
.field-label { display: grid; gap: 8px; font-weight: 800; }
.toggle-row { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.toggle-row input { width: 22px; height: 22px; }
.small-note { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.full-history { display: grid; gap: 14px; }
.day-block { border: 1px solid #dce5ee; border-radius: 14px; padding: 14px; }
.day-block h3 { margin: 0 0 8px; }
.day-summary { color: var(--muted); font-size: .88rem; margin-bottom: 8px; }
@media (max-width: 430px) {
  .control-grid { grid-template-columns: 1fr; }
  .timer-topline { font-size: .75rem; }
}

.app-brand-footer { margin: 20px auto 0; text-align: center; color: var(--muted); padding: 8px 12px 0; }
.app-brand-footer img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; box-shadow: 0 10px 28px rgba(8, 26, 51, .12); }
.app-brand-footer p { margin: 9px auto 0; max-width: 430px; font-size: .82rem; line-height: 1.45; font-weight: 700; }
@media (max-width: 430px) {
  .brand-card { padding: 12px 13px; }
  .brand-logo { width: min(285px, 86%); max-height: 70px; }
  .brand-card .icon-button { flex: 0 0 42px; width: 42px; height: 42px; }
}
.user-bar{max-width:980px;margin:10px auto 0;padding:10px 18px;display:flex;gap:16px;justify-content:flex-end;align-items:center;font-weight:700}.user-bar a{color:#081a33;text-decoration:none}.operator-view .operator-hidden{display:none!important}.operator-footer{margin-top:18px}.login-page{min-height:100vh;display:grid;place-items:center;background:#f4f7fb;padding:20px}.login-card{width:min(440px,100%);background:#fff;border-radius:24px;padding:28px;box-shadow:0 20px 60px rgba(8,26,51,.14)}.login-logo{width:100%;max-height:130px;object-fit:contain}.login-card form{display:grid;gap:16px}.login-card label,.user-form label,.date-filter label{display:grid;gap:7px;font-weight:700}.login-card input,.user-form input,.user-form select,.date-filter input,.inline-form input{padding:13px;border:1px solid #cbd5e1;border-radius:10px;font:inherit}.login-error,.success-box{padding:12px;border-radius:10px;margin:12px 0}.login-error{background:#fee2e2;color:#991b1b}.success-box{background:#dcfce7;color:#166534}.admin-shell{max-width:1180px;margin:auto;padding:20px}.admin-header{display:flex;align-items:center;gap:20px;margin-bottom:20px}.admin-header img{width:240px;max-height:100px;object-fit:contain}.admin-header .link-button{margin-left:auto;text-decoration:none}.admin-card{background:#fff;border-radius:18px;padding:20px;margin:18px 0;box-shadow:0 8px 30px rgba(8,26,51,.08)}.user-form,.date-filter{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.table-wrap{overflow:auto;margin-top:16px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid #e2e8f0;white-space:nowrap}.badge{padding:5px 9px;border-radius:999px;font-weight:700}.badge.ok{background:#dcfce7;color:#166534}.badge.over{background:#fee2e2;color:#991b1b}.inline-form{display:inline-flex;gap:6px;margin:3px}.small-button{padding:8px 10px;border:0;border-radius:8px;background:#e2e8f0;font-weight:700;cursor:pointer}@media(max-width:650px){.admin-header{align-items:flex-start;flex-wrap:wrap}.admin-header img{width:180px}.user-bar{font-size:13px;flex-wrap:wrap}.user-form>*{width:100%}}