:root{--c:#1a5fb4;--bg:#f4f6fa;--t:#1c2333}
@media(prefers-color-scheme:dark){:root{--bg:#141821;--t:#e8ecf4}.card,input,textarea{background:#1f2533!important;color:var(--t)}}
*{box-sizing:border-box}body{margin:0;font:16px system-ui,sans-serif;background:var(--bg);color:var(--t);min-height:100vh;display:flex;flex-direction:column}
header{background:var(--c);color:#fff;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:.6rem 1rem;gap:.5rem}
header h1{font-size:1.2rem;margin:0}nav{display:flex;gap:.9rem;align-items:center}nav a{color:#fff;text-decoration:none}
.help{background:#fff;color:var(--c)!important;padding:.3rem .7rem;border-radius:1rem;font-weight:600}
main{flex:1;width:100%;max-width:640px;margin:0 auto;padding:1rem}
footer{text-align:center;font-size:.85rem;padding:1rem;opacity:.75}
.card{background:#fff;border-radius:12px;padding:1rem;margin-bottom:1rem;box-shadow:0 1px 4px #0002}
label{display:block;margin:.6rem 0;font-size:.9rem}.chk{display:flex;gap:.5rem;align-items:center}
input,textarea{width:100%;padding:.7rem;border:1px solid #9aa4b8;border-radius:8px;font:inherit;margin-top:.2rem}.chk input{width:auto;margin:0}
button{background:var(--c);color:#fff;border:0;border-radius:8px;padding:.7rem 1rem;font:inherit;cursor:pointer;min-height:44px}
button.alt{background:#7b8598}.row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.5rem 0}.row input{flex:1;min-width:120px;width:auto}
.err{color:#c01c28}.ok{color:#26a269}.stat b{font-size:1.6rem;color:var(--c)}
.cal-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.dow{text-align:center;font-size:.75rem;opacity:.7}
.day{background:#e6ecf7;color:var(--t);padding:0;aspect-ratio:1;position:relative}.day.today{outline:2px solid var(--c)}.day.on{background:var(--c);color:#fff}
.has::after{content:'';position:absolute;bottom:4px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#26a269}
.periods{grid-column:1/-1;padding:.7rem;background:#dbe4f5;border-radius:8px;color:#1c2333}
.modal{position:fixed;inset:0;background:#0008;display:flex;align-items:center;justify-content:center;padding:1rem;z-index:9}.modal[hidden]{display:none}
.modal .card{width:100%;max-width:520px;max-height:92vh;overflow:auto;margin:0}audio{width:100%;margin-top:.5rem}
a.btn{display:block;text-align:center;background:#7b8598;color:#fff;padding:.7rem;border-radius:8px;text-decoration:none;margin:.6rem 0}
.tw{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:.85rem}td,th{padding:.4rem;border-bottom:1px solid #ccc;text-align:left}
select{padding:.7rem;border-radius:8px;border:1px solid #9aa4b8;font:inherit}
.yn{display:flex;gap:.6rem}.yn label,.opt{display:flex;align-items:center;gap:.6rem;background:#fff;color:#1c2333;border:1px solid var(--c);border-radius:8px;padding:.7rem;margin:.4rem 0;min-height:44px}.yn label{flex:1}.yn input,.opt input{width:auto;margin:0}
.pg{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:.6rem}.pg button{background:#fff;color:var(--c);border:1px solid var(--c);display:flex;flex-direction:column;gap:2px}.pg .filled{background:#26a269;color:#fff;border-color:#26a269}.pg small{font-size:.75rem}
button:disabled{opacity:.5}