.reminder-page { margin:0; min-height:100vh; }
.reminder-page * { box-sizing:border-box; }
.reminder-page [hidden] { display:none!important; }
.reminder-page header { display:flex; align-items:center; }
.reminder-page header .tabs { display:flex; }
.reminder-page header .brand { flex:none; white-space:nowrap; }
.reminder-page header .brand small { display:block; }
@media(max-width:1180px) { .reminder-page header .brand small { display:none; } }
.reminder-page header > .ghost { flex:none; text-decoration:none; }
@media(max-width:800px) { .reminder-page header { flex-wrap:wrap; } .reminder-page header .tabs { order:3; width:100%; } }
.reminder-page main { max-width:980px; padding:28px 24px 64px; margin:auto; }
.reminder-page fieldset { min-width:0; padding:18px; margin:20px 0; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel); }
.reminder-page legend { padding:0 6px; font:600 18px Georgia,serif; color:var(--text); }
.reminder-page p { overflow-wrap:anywhere; }
.reminder-page main label { display:flex; flex-direction:column; gap:6px; margin:12px 0; color:var(--text); }
.reminder-page main :is(input:not([type=checkbox]),select,button) { max-width:100%; min-width:0; padding:10px 12px; font:inherit; color:var(--text); background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); }
.reminder-page main input:not([type=checkbox]),.reminder-page main select { width:100%; }
.reminder-page main button { cursor:pointer; white-space:normal; overflow-wrap:anywhere; }
.reminder-page button:hover { border-color:var(--gold); }
.reminder-page button.primary { color:var(--on-action,#fff); background:var(--action,#795125); border-color:var(--action,#795125); }
.reminder-page button:disabled { opacity:.6; cursor:not-allowed; }
.reminder-page .reminder-check { flex-direction:row; align-items:flex-start; gap:10px; }
.reminder-check input { flex:none; margin-top:5px; width:18px; height:18px; accent-color:var(--gold); }
.reminder-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; }
.reminder-actions { display:flex; gap:10px; flex-wrap:wrap; margin:18px 0; }
.reminder-note { padding:12px; border-left:3px solid var(--gold); background:var(--panel-2); }
.reminder-rule { border:1px solid var(--border); border-inline-start:3px solid var(--gold); border-radius:10px; margin-top:18px; padding:16px; background:var(--panel-2); }
.reminder-rule h3 { margin:8px 0; }
.reminder-weekdays { display:flex; flex-wrap:wrap; gap:4px 14px; }
.reminder-weekdays label { flex-direction:row; align-items:center; gap:6px; }
.reminder-page li { margin:10px 0; overflow-wrap:anywhere; }
.reminder-page time { display:block; font:13px/1.6 system-ui,sans-serif; color:var(--muted); }
#reminderStatus[data-error=true] { color:var(--danger); }
.reminder-intro{font-size:1.12rem;max-width:65ch;color:var(--muted)}
.reminder-how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:24px 0}
.reminder-how li{display:flex;gap:10px;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--panel);margin:0}
.reminder-how strong,.reminder-how li div>span{display:block}.reminder-how li div>span{font-size:.85rem;color:var(--muted);margin-top:5px}
.reminder-number{display:inline-flex;flex:none;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--action,#795125);color:var(--on-action,#fff);font:600 14px system-ui,sans-serif;vertical-align:middle;margin-inline-end:5px}
.reminder-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:18px;border:1px solid var(--border);border-radius:12px;background:var(--panel-2);margin:24px 0}
.reminder-overview>div>span{display:block;font-size:.85rem;color:var(--muted)}.reminder-overview strong{display:block;margin-top:5px;font-size:1.1rem}.reminder-overview>p{grid-column:1/-1;margin:0;padding-top:12px;border-top:1px solid var(--border)}
.reminder-help,.reminder-calendar{margin:16px 0;border:1px solid var(--border);border-radius:10px;background:var(--panel);padding:12px 16px}.reminder-page summary{cursor:pointer;font-weight:600;min-height:30px;line-height:1.6}.reminder-calendar>fieldset{margin-bottom:0}.reminder-help p{font-size:.92rem}
.reminder-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:20px 0}.reminder-page .reminder-presets button{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:start;min-height:130px;padding:16px;border-radius:12px}.reminder-presets button>span{font-size:24px;color:var(--gold)}.reminder-presets small{color:var(--muted)}
.reminder-page .reminder-switch{padding:16px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);align-items:center;font-weight:600}.reminder-switch input{width:24px;height:24px;margin:0}
.reminder-page .reminder-weekdays label{padding:8px;border:1px solid var(--border);border-radius:8px;margin:6px 0;background:var(--panel)}.reminder-weekdays label:has(input:checked){outline:2px solid var(--gold);outline-offset:-2px}.reminder-weekdays input{margin:0}
.reminder-page #reminderDevices{padding:20px;border:1px solid var(--border);border-radius:12px;background:var(--panel);margin-top:24px}.reminder-preview{margin-top:24px;border-top:1px solid var(--border)}.reminder-delete{border-top:1px solid var(--border);padding-top:20px;margin-top:24px}.reminder-save-note{color:var(--muted);font-size:.9rem}
.reminder-page :is(button,input,select,summary,a):focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.reminder-how a{color:var(--text);text-underline-offset:3px}.reminder-page :is(fieldset,#reminderDevices,#reminderStatus){scroll-margin-top:140px}
@media(max-width:760px){.reminder-how,.reminder-presets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.reminder-how li{padding:12px;gap:5px}.reminder-page #reminderDevices{padding:12px}.reminder-rule{padding:12px}.reminder-page .reminder-presets button{padding:12px;min-height:120px}.reminder-help,.reminder-calendar{padding:10px}.reminder-how{font-size:.9rem}}
@media(max-width:540px) { .reminder-page main { padding:20px 12px 48px; } .reminder-page fieldset { padding:12px; } .reminder-grid { grid-template-columns:minmax(0,1fr); } .reminder-page header { padding:12px; } }