:root{--bg:#0f1318;--card:#181e26;--line:#2a323d;--tx:#eef2f6;--mu:#8a96a6;--ac:#3ddc84}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--tx);font:16px system-ui,sans-serif;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
main{flex:1;overflow-y:auto;padding:14px;max-width:520px;width:100%;margin:0 auto}
nav{display:flex;border-top:1px solid var(--line);background:var(--card);padding-bottom:env(safe-area-inset-bottom)}
nav button{flex:1;padding:12px 1px;background:none;border:0;color:var(--mu);font:inherit;font-size:.72rem}.pc{background:var(--card);border-left:4px solid var(--c);border-radius:10px;padding:4px 12px 8px;margin-bottom:10px}.pc .row{border:0}nav button.on{color:var(--ac);font-weight:700}
h2{font-size:1.05rem;margin:0}h3{margin:18px 0 8px;font-size:.95rem}button{font:inherit;color:var(--tx);cursor:pointer}
.hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.hd h2{text-transform:capitalize}
.hd button{width:40px;height:40px;border-radius:50%;border:0;background:var(--line)}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.dn{font-size:.7rem;color:var(--mu);text-align:center;padding-bottom:4px}
.d,.cd{aspect-ratio:1/1.2;background:var(--card);border:0;border-bottom:3px solid var(--c);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:0}
.d b,.cd b{color:var(--c)}.d small,.cd small{color:var(--mu);font-size:.7rem}.d.hoy{outline:2px solid var(--tx)}.d u{position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--tx)}
.brush{display:flex;gap:6px;overflow-x:auto;margin-bottom:10px;padding-bottom:2px}.ch{flex:none;min-width:44px;padding:8px 12px;border-radius:18px;border:2px solid var(--c,var(--line));background:var(--card)}.ch.on{background:var(--c,var(--line));color:#000;font-weight:700}
.cg{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:10px 0}.two{display:flex;gap:8px;margin:8px 0}.two>*{flex:1}
button.pri{background:var(--ac);color:#000;font-weight:700;border:0;border-radius:10px;padding:12px}button.bad{width:100%;margin-top:8px;background:none;border:1px solid #ff5a67;color:#ff5a67;border-radius:10px;padding:10px}
.two>button,.tp,.lb{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px}.tp,.lb{display:block;width:100%;text-align:left;margin-bottom:6px}
.sw{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--c);margin-right:8px;vertical-align:-2px}
label{display:block;font-size:.8rem;color:var(--mu);margin:10px 0}input,select,textarea{width:100%;margin-top:4px;padding:10px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--tx);font:inherit}input[type=color]{height:44px;padding:2px}label.chk{display:flex;gap:8px;align-items:center;color:var(--tx)}label.chk input{width:auto;margin:0}
.ay,.tip{color:var(--mu);font-size:.85rem}.tip{background:var(--card);border:1px solid var(--ac);border-radius:10px;padding:10px;margin-bottom:10px}
.row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}.row em{color:var(--mu);font-style:normal}
#sheet{position:fixed;inset:0;background:#0009;display:flex;align-items:flex-end;z-index:9}#sheet[hidden]{display:none}.sh{background:var(--card);width:100%;max-width:520px;margin:0 auto;border-radius:18px 18px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));max-height:85vh;overflow-y:auto}.sh h3{margin-top:0}
.d.fe{background:#ff5a6722}.d.fe small{color:#ff7a86;font-weight:700}.nt{position:absolute;bottom:4px;left:4px;width:6px;height:6px;border-radius:2px;background:var(--mu)}textarea{resize:none}