*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font-family:'Nunito Sans',system-ui,sans-serif;background:#ecebe8;color:#222}
button,input,select,textarea{font:inherit}
.top{position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid #ddd;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 14px}
.top h1{font-size:16px;margin:0 10px 0 0;font-weight:800}
.top select{padding:6px 8px;border:1px solid #ccc;border-radius:6px;max-width:220px}
.btn{border:1px solid #ccc;background:#fff;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:13px;white-space:nowrap}
.btn:hover{background:#f4f4f2}
.btn.pri{background:#2f4f4a;color:#fff;border-color:#2f4f4a}
.btn.pri:hover{background:#3d625c}
.btn.warn{color:#a33}
.btn.sm{padding:3px 7px;font-size:12px}
.spacer{flex:1}
.status{font-size:12px;color:#777}
.status.dirty{color:#b06a00}
.wrap{display:grid;grid-template-columns:400px 1fr;gap:0;min-height:calc(100vh - 54px)}
.ed{background:#fafaf8;border-right:1px solid #ddd;padding:12px;overflow:auto;max-height:calc(100vh - 54px);position:sticky;top:54px}
.pv{padding:18px;overflow:auto}
.pv-inner{transform-origin:top left}
details{background:#fff;border:1px solid #e2e2de;border-radius:8px;margin-bottom:10px}
summary{cursor:pointer;padding:9px 12px;font-weight:800;font-size:14px}
.sec{padding:0 12px 12px;display:grid;gap:8px}
label{display:grid;gap:3px;font-size:12px;color:#555}
input[type=text],input[type=number],select.f,textarea{border:1px solid #ccc;border-radius:6px;padding:6px 8px;background:#fff;color:#222;width:100%}
textarea{resize:vertical;min-height:70px;line-height:1.4}
.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.card{border:1px solid #e6e6e2;border-radius:8px;padding:8px;display:grid;gap:6px;background:#fcfcfb}
.card-h{display:flex;gap:6px;align-items:center}
.card-h input{flex:1}
.days{display:flex;flex-wrap:wrap;gap:6px}
.days label{display:flex;align-items:center;gap:4px;border:1px solid #ccc;border-radius:6px;padding:4px 7px;font-size:12px;color:#222;cursor:pointer}
.chk{display:flex!important;align-items:center;gap:6px;grid-template-columns:none}
.hint{font-size:11.5px;color:#888;line-height:1.4}
.hint.warn{color:#a35d00}
.msg{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#222;color:#fff;padding:9px 14px;border-radius:8px;font-size:13px;z-index:20;max-width:90vw}
@media (max-width:900px){.wrap{grid-template-columns:1fr}.ed{position:static;max-height:none;border-right:0}}
a{color:#2f4f4a}
.user{font-size:12.5px;color:#555;display:flex;gap:8px;align-items:center}
.user a{text-decoration:none}
.banner{background:#fff4e0;border-bottom:1px solid #f0d9a8;padding:8px 14px;font-size:13px;display:flex;gap:10px;align-items:center}
.banner.err{background:#fde9e9;border-color:#f2c2c2}
.empty{padding:40px;text-align:center;color:#666}
/* Simple pages (login / account) */
.page{max-width:760px;margin:0 auto;padding:28px 16px 60px}
.box{background:#fff;border:1px solid #e2e2de;border-radius:10px;padding:20px;margin-bottom:16px}
.box h2{margin:0 0 12px;font-size:17px}
.form{display:grid;gap:10px;max-width:380px}
.form input{border:1px solid #ccc;border-radius:6px;padding:9px 10px;width:100%}
.error{color:#a33;font-size:13px;min-height:1em}
.ok{color:#2f6b3a;font-size:13px}
.login{max-width:380px;margin:12vh auto 0;padding:0 16px}
.login h1{font-size:20px;margin:0 0 4px}
.login p{color:#666;font-size:13px;margin:0 0 16px}
table.list{width:100%;border-collapse:collapse;font-size:13px}
table.list th,table.list td{text-align:left;padding:7px 6px;border-bottom:1px solid #eee;vertical-align:middle}
table.list th{font-size:12px;color:#666;font-weight:700}
.pill{display:inline-block;font-size:11px;border-radius:10px;padding:1px 7px;background:#eee}
.pill.g{background:#e3efe9;color:#2f5f45}.pill.r{background:#fde9e9;color:#a33}
.secret{font-family:ui-monospace,Menlo,monospace;background:#f4f4f2;border:1px solid #e2e2de;border-radius:6px;padding:8px 10px;word-break:break-all;font-size:13px}
.qrbox svg{width:180px;height:180px}
.actions{display:flex;gap:6px;flex-wrap:wrap}