:root { --oc-blue:#17377d; --oc-navy:#102452; --oc-red:#ef2d22; --oc-line:#dce1eb; --oc-paper:#f5f7fb; }
.oc-login-shell { width:100%; min-height:72vh; display:grid; place-items:center; padding:100px 20px; background:linear-gradient(135deg,#f7f9fc,#edf2f8); }
.oc-login-card { width:min(100%,460px); padding:42px; border-top:5px solid var(--oc-red); border-radius:12px; background:#fff; box-shadow:0 24px 70px rgba(16,36,82,.15); }
.oc-login-card h1 { margin:0 0 12px; color:var(--oc-navy); font-size:2.2rem; }
.oc-login-card > p:not(.oc-kicker) { color:#5c6578; }
.oc-kicker { margin:0 0 8px; color:var(--oc-red); font-size:.75rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.oc-login-card form { display:grid; gap:10px; margin-top:26px; }
.oc-login-card label { color:var(--oc-navy); font-size:.82rem; font-weight:700; }
.oc-login-card input[type="text"],.oc-login-card input[type="password"] { width:100%; min-height:48px; padding:10px 12px; border:1px solid #cbd2df; border-radius:7px; }
.oc-login-card .oc-remember { display:flex; gap:8px; align-items:center; margin:5px 0; font-weight:500; }
.oc-login-card button { min-height:48px; border:0; border-radius:7px; background:var(--oc-blue); color:#fff; font-weight:800; cursor:pointer; }
.oc-notice { max-width:720px; margin:100px auto; padding:32px; border-left:5px solid var(--oc-red); background:#fff; }

.oc-app { width:min(100%,1450px); max-width:100%; margin:38px auto; padding:30px; border-radius:12px; background:#fff; color:#17213b; box-shadow:0 18px 55px rgba(16,36,82,.11); }
.oc-admin-wrap .oc-app { margin-left:0; box-shadow:none; }
.oc-app-header { display:flex; justify-content:space-between; gap:25px; align-items:center; margin-bottom:24px; }
.oc-app-header h1 { margin:0; color:var(--oc-navy); font-size:clamp(1.7rem,3vw,2.6rem); }
.oc-logout { color:var(--oc-blue); font-weight:700; }
.oc-toolbar { display:grid; grid-template-columns:260px 1fr auto; gap:22px; align-items:end; padding:20px; border-radius:9px; background:var(--oc-paper); }
.oc-toolbar label { display:grid; gap:5px; color:var(--oc-navy); font-size:.78rem; font-weight:800; }
.oc-toolbar select { min-height:42px; padding:7px 10px; border:1px solid #cbd2df; border-radius:6px; background:#fff; }
.oc-week-nav { display:flex; justify-content:center; align-items:center; gap:20px; }
.oc-week-nav button,.oc-today { min-width:42px; min-height:42px; border:1px solid #bdc7d9; border-radius:6px; background:#fff; color:var(--oc-blue); font-weight:800; cursor:pointer; }
.oc-week-nav strong { min-width:260px; text-align:center; }
.oc-status { min-height:28px; padding:12px 2px 4px; color:var(--oc-blue); font-weight:700; }
.oc-status.is-error { color:#b31e17; }
.oc-legend { display:flex; flex-wrap:wrap; gap:20px; margin:10px 0 16px; font-size:.82rem; }
.oc-legend span { display:flex; align-items:center; gap:7px; }
.oc-legend i { width:14px; height:14px; border-radius:3px; }
.oc-legend .is-free { background:#e9f7ee; border:1px solid #79bd8f; }
.oc-legend .is-own { background:#dce7ff; border:1px solid #6d8dd0; }
.oc-legend .is-busy { background:#eceef2; border:1px solid #aeb5c2; }
.oc-calendar-scroll { overflow:hidden; border:1px solid var(--oc-line); border-radius:8px; }
.oc-calendar-grid { display:block; }
.oc-day-tabs { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); background:var(--oc-navy); }
.oc-day-tab { min-height:54px; padding:8px 4px; border:0; border-right:1px solid rgba(255,255,255,.15); background:transparent; color:rgba(255,255,255,.78); font-size:.78rem; font-weight:800; cursor:pointer; }
.oc-day-tab:last-child { border-right:0; }
.oc-day-tab[aria-pressed="true"] { background:#fff; color:var(--oc-navy); box-shadow:inset 0 -4px 0 var(--oc-red); }
.oc-day-slots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:16px; background:#fff; }
.oc-slot { min-height:52px; padding:9px 12px; border:1px solid var(--oc-line); border-radius:6px; background:#fff; color:#303b54; font-size:.78rem; text-align:left; cursor:pointer; }
.oc-loading { margin:0; padding:32px; color:#657087; text-align:center; }
.oc-slot.is-free { background:#edf9f1; color:#257142; }
.oc-slot.is-free:hover { background:#d7f0df; box-shadow:inset 0 0 0 2px #54a773; }
.oc-slot.is-own { background:#dce7ff; color:#17377d; font-weight:800; }
.oc-slot.is-busy { background:#eef0f4; color:#707888; }
.oc-slot.is-past { background:#f7f7f8; color:#b0b4bd; cursor:not-allowed; }
.oc-selection[hidden] { display:none; }
.oc-selection { position:fixed; inset:0; z-index:100000; display:grid; place-items:center; padding:20px; background:rgba(8,22,53,.58); }
.oc-selection-dialog { position:relative; display:grid; gap:8px; width:min(100%,420px); padding:30px; border-top:5px solid var(--oc-red); border-radius:12px; background:#fff; box-shadow:0 24px 80px rgba(8,22,53,.35); }
.oc-selection-dialog > strong { color:var(--oc-navy); font-size:1.25rem; }
.oc-selection-dialog > span { color:#5c6578; }
.oc-selection-actions { display:flex; justify-content:flex-end; margin-top:18px; }
.oc-selection button { min-height:42px; padding:8px 16px; border:1px solid var(--oc-blue); border-radius:6px; background:#fff; color:var(--oc-blue); font-weight:800; cursor:pointer; }
.oc-selection button.is-danger { border-color:var(--oc-red); background:var(--oc-red); color:#fff; }
.oc-selection button.is-danger:hover { background:#cf2118; }
.oc-selection .oc-selection-close { position:absolute; top:10px; right:10px; width:38px; min-height:38px; padding:0; border:0; background:transparent; color:#697287; font-size:1.7rem; line-height:1; }
.oc-selection .oc-selection-close:hover { background:#f1f3f7; color:var(--oc-navy); }

@media(max-width:780px){
  .oc-login-shell { min-height:auto; padding:42px 0; background:transparent; }
  .oc-login-card { width:100%; padding:28px 20px; }
  .oc-app { width:100%; max-width:100%; margin:18px 0; padding:18px 12px; overflow:visible; border-radius:0; }
  .oc-app-header { align-items:flex-start; }
  .oc-toolbar { grid-template-columns:1fr; align-items:stretch; }
  .oc-week-nav { justify-content:space-between; }
  .oc-week-nav strong { min-width:0; }
  .oc-selection-dialog { padding:26px 20px 22px; }
  .oc-day-tabs { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .oc-day-tab { border-bottom:1px solid rgba(255,255,255,.15); }
  .oc-day-slots { grid-template-columns:repeat(2,minmax(0,1fr)); padding:10px; }
}

@media(max-width:480px){
  .oc-app-header { flex-direction:column; gap:10px; }
  .oc-login-card h1 { font-size:1.8rem; }
  .oc-toolbar { padding:14px; }
  .oc-day-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .oc-day-slots { grid-template-columns:1fr; }
}