:root { color-scheme: light dark; --ok: #1a7f37; --bad: #cf222e; --warn: #bf8700; --muted: #888; }
* { box-sizing: border-box; }
body { font: 16px/1.4 system-ui, sans-serif; margin: 0 auto; max-width: 28rem; padding: 1rem; }
header { display: flex; justify-content: space-between; align-items: center; }
h1 { font-size: 1.3rem; margin: 0; }
h2 { font-size: 1.05rem; margin: 1.5rem 0 .4rem; }
.badge { border-radius: 1rem; padding: .1rem .7rem; font-size: .85rem; color: #fff; background: var(--muted); }
.badge.ok { background: var(--ok); } .badge.bad { background: var(--bad); }
.state { font-size: 2.2rem; font-weight: 700; text-align: center; margin: 1.2rem 0 .4rem; }
.state.locked { color: var(--ok); } .state.error { color: var(--bad); }
dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; margin: 1rem 0; }
dt { color: var(--muted); } dd { margin: 0; }
.buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
button { font: inherit; padding: 1rem; border-radius: .6rem; border: 1px solid var(--muted); cursor: pointer; }
button.primary { font-size: 1.15rem; font-weight: 600; }
button.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
button.big { width: 100%; font-size: 1.3rem; font-weight: 700; padding: 1.4rem 1rem; margin-top: .8rem; }
button:disabled { opacity: .45; cursor: not-allowed; }
.hint, #link { color: var(--muted); font-size: .9rem; min-height: 1.3em; text-align: center; }
.panel { margin: 1rem 0; }
h1 small { font-weight: 400; color: var(--muted); }
.banner { border: 2px solid var(--warn); border-radius: .6rem; padding: .7rem; text-align: center; font-weight: 600; }
.countdown { font-size: 3.5rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; color: var(--warn); }
details { margin-top: 1.5rem; }
label { display: block; margin: .6rem 0 .2rem; font-size: .9rem; }
input, textarea { width: 100%; font: inherit; padding: .5rem; }
textarea { font-size: .8rem; word-break: break-all; }
body[data-mode="local"] .cloud-only { display: none; }
body:not([data-mode="local"]) .local-only { display: none; }
.row { display: flex; gap: .6rem; margin-top: 1rem; }
.history { list-style: none; padding: 0; margin: 0; font-size: .92rem; }
.history li { display: grid; grid-template-columns: 9.5rem 1fr; gap: .6rem; padding: .3rem 0; border-bottom: 1px solid #8883; }
.history time { color: var(--muted); }
.history li.alarm span { color: var(--bad); font-weight: 600; }
.history li.notime { grid-template-columns: 1fr; }
.duration { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.duration label { margin: 0; }
#timerForm button, #clearTimerBtn { width: 100%; margin-top: .6rem; }
.locked-for { text-align: center; font-size: 1.1rem; font-variant-numeric: tabular-nums; margin: 0 0 .6rem; min-height: 1.4em; }
.check { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 .2rem; font-size: 1rem; }
.check input { width: auto; transform: scale(1.3); }
.history-older { margin-top: .4rem; }
.history-older summary { color: var(--muted); font-size: .92rem; cursor: pointer; padding: .3rem 0; }