:root { --bg: #0f0f12; --panel: #17171c; --panel2: #1f1f26; --border: #2c2c36; --text: #ececf1; --muted: #8b8b98; --accent: #4f8cff; --ok: #35c27a; --err: #ff6b6b; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.wrap { max-width: 1000px; margin: 0 auto; padding: 16px; }
.narrow { max-width: 420px; }
.center { margin: 12vh auto 0; }
h1 { font-size: 20px; margin: 0 0 12px; }
h2 { font-size: 16px; margin: 0; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.row { display: flex; gap: 8px; align-items: center; }
.between { justify-content: space-between; }
.wrapline { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.err { color: var(--err); }
.ok { color: var(--ok); }
input, select, button { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; }
input { min-width: 0; }
button { cursor: pointer; }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.ghost { background: none; }
button.danger:hover { border-color: var(--err); color: var(--err); }
button:disabled { opacity: .5; cursor: default; }
.help { background: var(--panel2); border-radius: 10px; padding: 10px 14px; margin-top: 10px; }
.help li { margin: 4px 0; }
a { color: var(--accent); }
.bm { display: inline-block; background: var(--accent); color: #fff; padding: 2px 10px; border-radius: 6px; text-decoration: none; }
.profile { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; }
.links { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.link { background: var(--panel2); border-radius: 8px; padding: 7px 10px; display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.link .u { color: var(--muted); word-break: break-all; }
.rules { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.rule { border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rule.off { opacity: .55; }
.rule .grow { flex: 1; min-width: 200px; word-break: break-all; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: var(--panel2); border-radius: 10px; padding: 10px; margin-top: 8px; }
.form .full { grid-column: 1 / -1; }
.days { display: flex; gap: 4px; flex-wrap: wrap; }
.days label { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 3px 7px; cursor: pointer; user-select: none; }
.days input { display: none; }
.days label:has(input:checked) { border-color: var(--accent); color: var(--accent); }
.log { max-height: 360px; overflow: auto; font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.badge { font-size: 12px; padding: 1px 7px; border-radius: 10px; border: 1px solid var(--border); }
.badge.err { border-color: var(--err); }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } header.row { flex-wrap: wrap; } }
.rule { flex-direction: column; align-items: stretch; }
.rule .full { width: 100%; }
.slots { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.slot { display: flex; gap: 6px; align-items: center; }
.slot .t { width: 110px; flex: none; }
.slot .u { flex: 1; }
.slotlist { display: flex; flex-direction: column; gap: 3px; }
.slotrow { display: flex; gap: 10px; align-items: center; padding: 3px 8px; border-radius: 6px; }
.slotrow .t { font-variant-numeric: tabular-nums; color: var(--muted); width: 48px; flex: none; }
.slotrow .u { word-break: break-all; }
.slotrow.now { background: rgba(79, 140, 255, .12); }
.slotrow.now .t { color: var(--accent); font-weight: 600; }
.badge.nowb { border-color: var(--accent); color: var(--accent); }