:root {
  --blue: #294a70;
  --blue-2: #3e7aa8;
  --blue-3: #305893;
  --ice: #e8f2fb;
  --ice-line: #b9d6ef;
  --orange: #ffab1f;
  --bg: #f0f4f7;
  --line: #e3e9ee;
  --text: #333333;
  --muted: #6e6e6e;
  --green: #1f9d55;
  --green-bg: #e6f6ec;
  --red: #c0392b;
  --red-bg: #fdecea;
  --gray-bg: #eef0f2;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 Roboto, -apple-system, "Segoe UI", Arial, sans-serif;
  min-height: 100vh;
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

.top { background: #fff; border-bottom: 3px solid var(--orange); }
.top__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand img { height: 52px; width: auto; display: block; }
.brand h1 {
  margin: 0; font: 700 20px/1.2 "Roboto Slab", Georgia, serif; color: var(--blue);
  overflow: hidden; text-overflow: ellipsis;
}
.brand small { display: block; font: 400 13px Roboto, sans-serif; color: var(--muted); }
.user { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; white-space: nowrap; }

.icon { width: 18px; height: 18px; flex: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 20px; border: 1px solid var(--blue); border-radius: 2px;
  background: var(--blue); color: #fff; cursor: pointer;
  font: 700 13px/1.2 Roboto, sans-serif; text-transform: uppercase; letter-spacing: .02em;
  transition: background .2s, color .2s, border-color .2s;
}
.btn:hover:not(:disabled) { background: var(--blue-3); border-color: var(--blue-3); }
.btn:disabled { opacity: .45; cursor: default; }
.btn--ghost { background: #fff; color: var(--blue); }
.btn--ghost:hover:not(:disabled) { background: var(--ice); color: var(--blue); }
.btn--freeze { background: #fff; color: var(--blue-2); border-color: var(--ice-line); }
.btn--freeze:hover:not(:disabled) { background: var(--ice); border-color: var(--blue-2); color: var(--blue-2); }
.btn--start { background: var(--green); border-color: var(--green); }
.btn--start:hover:not(:disabled) { background: #178a48; border-color: #178a48; }
.btn--danger { background: #fff; color: var(--red); border-color: #f0b7b0; }
.btn--danger:hover:not(:disabled) { background: var(--red-bg); color: var(--red); border-color: var(--red); }
.btn--sm { padding: 6px 12px; font-size: 12px; }
.link { background: none; border: 0; color: var(--blue-2); cursor: pointer; font: inherit; padding: 0; display: inline-flex; gap: 6px; align-items: center; }
.link:hover { color: var(--blue); text-decoration: underline; }

main.wrap { padding-top: 28px; padding-bottom: 60px; }

.page-title { font: 700 24px/1.25 "Roboto Slab", Georgia, serif; color: var(--blue); margin: 0 0 6px; }
.page-sub { color: var(--muted); margin: 0 0 22px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }

.card { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.card--frozen { background: linear-gradient(180deg, var(--ice) 0, #fff 70px); border-color: var(--ice-line); }
.card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.card__name { font: 700 18px/1.3 "Roboto Slab", Georgia, serif; color: var(--blue); word-break: break-all; margin: 0; }
.card__meta { color: var(--muted); font-size: 14px; display: grid; gap: 4px; }
.card__meta b { color: var(--text); font-weight: 500; }
.card__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.card__note { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.badge--on { background: var(--green-bg); color: var(--green); }
.badge--frozen { background: var(--ice); color: var(--blue-2); }
.badge--off { background: var(--gray-bg); color: var(--muted); }
.badge--busy { background: #fff4e0; color: #b26f00; }
.badge--busy::before { animation: pulse 1s infinite ease-in-out; }
.badge--err { background: var(--red-bg); color: var(--red); }
@keyframes pulse { 50% { opacity: .2; } }

.login { max-width: 380px; margin: 40px auto; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 28px; }
.login h2 { margin: 0 0 18px; font: 700 20px "Roboto Slab", Georgia, serif; color: var(--blue); }
.field { display: grid; gap: 6px; margin-bottom: 14px; font-size: 14px; color: var(--muted); }
input[type=text], input[type=password], input[type=time], input[type=number], select, textarea {
  font: inherit; color: var(--text); padding: 8px 10px; border: 1px solid #cfd8e0; border-radius: 2px; background: #fff; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ice-line); border-color: var(--blue-2); }
.error { color: var(--red); font-size: 14px; min-height: 20px; margin: 0 0 10px; }

.empty { background: #fff; border: 1px dashed var(--line); padding: 30px; text-align: center; color: var(--muted); border-radius: 4px; }

dialog { border: 0; border-radius: 4px; padding: 24px; max-width: 420px; width: calc(100% - 32px); box-shadow: 0 10px 40px rgba(0,0,0,.2); }
dialog::backdrop { background: rgba(35,44,61,.45); }
dialog p { margin: 0 0 20px; }
.dialog__btns { display: flex; justify-content: flex-end; gap: 10px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none;
  background: #232c3d; color: #fff; padding: 10px 18px; border-radius: 4px; transition: .25s; max-width: calc(100% - 32px); }
.toast.show { opacity: 1; transform: translateX(-50%); }
.toast.err { background: var(--red); }

.tabs { display: flex; gap: 4px; padding-top: 18px; padding-bottom: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 16px; cursor: pointer; font: 500 15px Roboto, sans-serif; color: var(--muted); white-space: nowrap; }
.tab[aria-selected=true] { color: var(--blue); border-color: var(--blue); }

.panel { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 18px; margin-bottom: 18px; }
.panel h3 { margin: 0 0 12px; font: 700 17px "Roboto Slab", Georgia, serif; color: var(--blue); }
.panel h4 { margin: 14px 0 8px; font-size: 14px; color: var(--muted); font-weight: 500; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row > input[type=text], .row > input[type=password], .row > select { width: auto; flex: 1 1 160px; }
.muted { color: var(--muted); font-size: 13px; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: 13px; }
.scroll { overflow-x: auto; }

.checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.checks label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; cursor: pointer; }
.days label { gap: 3px; }
.acc { border-top: 1px solid var(--line); padding: 14px 0; }
.acc:first-of-type { border-top: 0; }
.acc__head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.acc__login { font-weight: 700; color: var(--blue); }
.acc__body { margin-top: 10px; display: grid; gap: 10px; }
.secret { background: #fff8e6; border: 1px solid #ffe0a3; padding: 10px 12px; border-radius: 2px; }
.sched { display: grid; gap: 8px; min-width: 260px; }
.sched .row input[type=time] { width: 110px; flex: none; }
.sched .row input[type=number] { width: 90px; flex: none; }

@media (max-width: 600px) {
  .brand img { height: 40px; }
  .brand h1 { font-size: 16px; }
  .grid { grid-template-columns: 1fr; }
  .user span { display: none; }
}
.mt { margin-top: 10px; }
.row > input.w80 { width: 80px; flex: none; }
.row > input.w90 { width: 90px; flex: none; }
.card__error { background: var(--red-bg); color: var(--red); font-size: 13px; padding: 8px 10px; border-radius: 2px; margin-top: 6px; }
[hidden] { display: none !important; }
.user__col { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.user__row { display: flex; align-items: center; gap: 12px; }
.tz-select { width: auto; max-width: 230px; padding: 3px 6px; font-size: 13px; color: var(--muted); }
.sched-info { background: var(--bg); border-radius: 2px; padding: 10px 12px; display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.sched-info__row { display: flex; align-items: center; gap: 8px; }
.sched-info__row .icon { width: 16px; height: 16px; color: var(--blue-2); }
.sched-info__row--next { color: var(--blue); font-weight: 500; font-size: 14px; }
.sched-info__tz { font-size: 12px; color: #9aa3ab; }
@media (max-width: 600px) { .tz-select { max-width: 150px; } }
.sched__start { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }