:root{--bg:#D9D4C7;--card:#E9E5DA;--tx:#24211C;--mut:#5C574B;--bd:#B8B2A2;--ac:#2B2A27;--ac-tx:#FFD23F;--yl:#FFD23F;--bad:#B3261E;--mid:#9A6400;--good:#2E7D32;color-scheme:light;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:600px;margin:0 auto;padding:22px 16px 40px}
.brand{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.brand svg{flex:none}
h1{margin:0;font-size:2rem;line-height:1;letter-spacing:-.5px;font-weight:700}
.brand p{margin:4px 0 0;color:var(--mut);font-size:.92rem;line-height:1.3}
.tabs{display:flex;gap:6px;padding:5px;border-radius:14px;background:var(--card);border:1px solid var(--bd);margin-bottom:14px}
.tabs button{flex:1;padding:10px;border:0;background:transparent;color:var(--mut);border-radius:10px;font:inherit;font-weight:700;cursor:pointer}
.tabs button.on{background:var(--ac);color:var(--ac-tx)}
.card{background:var(--card);border:1px solid var(--bd);border-radius:20px;padding:18px}
.lr{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 0 6px}
.lr:first-child{margin-top:0}
label{font-weight:700;font-size:.95rem}
textarea,input{width:100%;padding:12px 14px;border:1px solid var(--bd);border-radius:12px;background:var(--bg);color:var(--tx);font:inherit}
textarea{min-height:110px;resize:vertical}
textarea:focus,input:focus{outline:2px solid var(--ac);outline-offset:1px}
.keyrow{position:relative}
.keyrow input{padding-right:84px}
.keyrow button{position:absolute;right:6px;top:6px;bottom:6px;padding:0 12px}
button.mini,.keyrow button,.row button{border:1px solid var(--bd);background:var(--card);color:var(--tx);border-radius:10px;font:inherit;font-size:.9rem;font-weight:500;cursor:pointer;padding:6px 12px}
.meter{height:6px;border-radius:3px;background:var(--bd);margin-top:8px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--bad);transition:width .2s,background .2s}
.hint{color:var(--mut);font-size:.85rem;margin-top:6px}
button.big{width:100%;margin-top:16px;padding:14px;border:0;border-radius:14px;background:var(--ac);color:var(--ac-tx);font:inherit;font-size:1.05rem;font-weight:700;cursor:pointer}
button.big:disabled{opacity:.6}
.row{display:flex;gap:8px;margin-top:10px}
.row button{flex:1;padding:11px;font-size:1rem;font-weight:700}
.row button[hidden]{display:none}
#msg{margin-top:12px;font-size:.92rem;min-height:1.4em;color:var(--mut)}
#msg.err{color:var(--bad)}
.note{margin:18px 4px 0;color:var(--mut);font-size:.82rem}
.lr2{margin-top:20px}
#mt{min-height:1.3em}
.row{flex-wrap:wrap}
.row button{min-width:90px}
.col-b>.lr2{margin-top:20px}
.inst{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;background:var(--card);border:1px solid var(--bd);border-left:4px solid var(--yl);border-radius:14px;padding:12px 14px;margin-bottom:14px;font-size:.92rem}
.inst p{margin:0;flex:1 1 220px}
.instrow{display:flex;gap:8px;flex:none}
.inst[hidden],button[hidden]{display:none}
@media (min-width:900px){
main{max-width:1060px}
.tabs{max-width:380px}
.card{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:24px}
.col-b{border-left:1px solid var(--bd);padding-left:32px}
.col-b>.lr2{margin-top:0}
textarea{min-height:200px}
}