:root { color-scheme: light; --bg: #f1f5f2; --ink: #11241e; --muted: #4a5f56; --line: #d0ded6; --accent: #0a7a52; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 system-ui, -apple-system, sans-serif; -webkit-text-size-adjust: 100%; }
header { background: var(--accent); color: white; position: sticky; top: 0; z-index: 5; padding: 10px max(12px, calc((100vw - 1100px)/2)); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
header strong { font-size: 1.3rem; white-space: nowrap; }
header button { background: #ffffff22; color: white; border-color: #ffffff44; }
main { max-width: 1100px; margin: auto; padding: 16px 12px 60px; }
h1 { font-size: 1.7rem; margin: 10px 0; }
h2 { font-size: 1.25rem; margin-top: 0; }
h3 { font-size: 1.1rem; overflow-wrap: anywhere; }
.muted, small { color: var(--muted); }
.card { background: white; border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin: 14px 0; }
button { font: 600 16px system-ui; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: #e8f1ec; color: var(--ink); cursor: pointer; }
button.primary { background: var(--accent); color: white; border-color: var(--accent); }
button.danger { color: #b32d23; }
button:disabled { opacity: .45; cursor: not-allowed; }
a { color: var(--accent); overflow-wrap: anywhere; }
label { display: block; margin: 10px 0; font-weight: 600; overflow-wrap: anywhere; }
input, select { display: block; width: 100%; min-width: 0; font: 16px system-ui; padding: 11px; border: 1px solid var(--line); border-radius: 10px; margin-top: 5px; background: white; color: var(--ink); }
input[type=checkbox] { display: inline-block; width: 22px; height: 22px; margin-right: 8px; vertical-align: middle; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.grid > .card { margin: 12px 0 0; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.notice { padding: 12px; border-radius: 10px; background: #fff3d9; color: #754a00; margin: 12px 0; overflow-wrap: anywhere; }
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: min(94vw, 650px); background: #11241e; color: white; padding: 14px; border-radius: 12px; z-index: 20; }
.job { border-left: 4px solid var(--accent); padding: 8px 12px; margin: 8px 0; overflow-wrap: anywhere; }
.job.error, .job.interrupted, .job.partial { border-color: #b32d23; }
.login { max-width: 430px; margin: 10vh auto; }
.pill { font-size: .8rem; padding: 3px 8px; border-radius: 20px; background: #e8f1ec; color: var(--accent); }
.list-item { border-bottom: 1px solid var(--line); padding: 12px 0; overflow-wrap: anywhere; }
code { overflow-wrap: anywhere; }
details { margin: 12px 0; }
summary { cursor: pointer; min-height: 44px; font-weight: 600; }
#storage { font-size: .85rem; color: white; }
.empty { padding: 22px; text-align: center; color: var(--muted); }
@media(max-width: 500px) { header strong { font-size: 1.05rem; } header { gap: 5px; } #storage { display: none; } .card { padding: 14px; } h1 { font-size: 1.4rem; } }