[hidden]{display:none !important}
:root{
  --bg:#eef1ec; --card:#ffffff; --ink:#18231c; --muted:#5d6b62; --line:#d5ddd6;
  --green:#1f5d3a; --green-2:#2e7d4f; --green-soft:#e2efe6;
  --amber:#b86e00; --amber-soft:#fff3dd; --red:#b3261e; --red-soft:#fbe4e2;
  --radius:14px; --tap:56px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-size:18px;-webkit-tap-highlight-color:transparent}
body{padding-bottom:84px;min-height:100vh}
h2{font-size:1.05rem;margin:0 0 .8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--green)}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{width:100%;min-height:var(--tap);padding:.6rem .9rem;border:2px solid var(--line);border-radius:10px;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green-2)}
textarea{min-height:auto}
label{display:block;font-weight:600;font-size:.9rem;margin:.6rem 0}
label input,label select{margin-top:.35rem;font-weight:400;font-size:1rem}
label.inline{display:flex;align-items:center;gap:.5rem;margin:0;font-weight:500}
label.inline input{width:auto;min-height:auto;margin:0}

button,.btnlike{min-height:var(--tap);padding:.5rem 1.1rem;border-radius:10px;border:2px solid var(--line);background:#fff;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-size:.95rem;margin:0}
button:active{transform:scale(.98)}
button:disabled{opacity:.45}
.primary{background:var(--green);border-color:var(--green);color:#fff}
.ghost{background:transparent}
.danger{color:var(--red);border-color:var(--red-soft)}
.big{min-height:72px;font-size:1.05rem;flex:1}
.ico{font-size:1.6rem;line-height:1}

.topbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:.7rem 1rem;background:var(--green);color:#fff}
.brand{display:flex;gap:.7rem;align-items:center}
.logo{font-size:1.8rem}
.site{font-weight:700;font-size:1.1rem}
.sub{font-size:.8rem;opacity:.85}
.status{display:flex;gap:.4rem}
.pill{font-size:.75rem;padding:.25rem .6rem;border-radius:99px;background:rgba(255,255,255,.18);font-weight:600}
.pill.off{background:var(--red)}
.pill.on{background:#7fd39a;color:#0c2a17}

.banner{margin:.8rem 1rem 0;padding:.8rem 1rem;border-radius:10px;background:var(--amber-soft);color:#5a3600;font-weight:600;display:flex;gap:.8rem;align-items:center;justify-content:space-between}
.banner button{min-height:44px}

main{padding:1rem;max-width:1100px;margin:0 auto}
.view{display:none}
.view.active{display:block}
.card{background:var(--card);border-radius:var(--radius);padding:1.1rem 1.2rem;margin-bottom:1rem;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.row{display:flex;gap:.6rem;align-items:center}
.row.wrap{flex-wrap:wrap}
.row input{flex:1}
.muted{color:var(--muted)}
.small{font-size:.82rem}
.center{text-align:center}

.id-actions{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.id-actions .big{flex-direction:column;min-height:120px}
#btnNfc.listening{background:var(--green-soft);border-color:var(--green-2);color:var(--green)}
.manual{margin-top:1rem}

.ident{display:flex;justify-content:space-between;align-items:center;background:var(--green-soft);border-radius:10px;padding:.8rem 1rem;margin-bottom:1rem}
.idnum{font-size:1.6rem;font-weight:800;font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.03em;word-break:break-all}
.warn{background:var(--amber-soft);color:#5a3600;border-radius:10px;padding:.6rem .9rem;margin-bottom:1rem;font-weight:600}

.waste-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.6rem;margin-bottom:1.2rem}
.waste-btn{min-height:88px;flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:left;padding:.7rem .8rem;border-left:8px solid var(--c,#888);font-size:.92rem;line-height:1.2}
.waste-btn .u{font-size:.75rem;color:var(--muted);font-weight:500}

.lines{list-style:none;padding:0;margin:0 0 .8rem}
.lines li{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.6rem .2rem;border-bottom:1px solid var(--line)}
.lines li.empty{color:var(--muted);font-size:.9rem;border:none}
.lines .q{font-weight:800;white-space:nowrap}
.lines .dot,.daylist .dot{display:inline-block;width:.8rem;height:.8rem;border-radius:3px;background:var(--c);margin-right:.5rem;vertical-align:middle}
.lines button{min-height:44px;padding:.3rem .8rem}
.comment{margin-bottom:.8rem}
.actions{display:flex;gap:.8rem;margin-top:.6rem}

.dayhead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.totals{width:100%;border-collapse:collapse;margin:.4rem 0 1rem}
.totals td{padding:.45rem .3rem;border-bottom:1px solid var(--line)}
.totals td.n{text-align:right;font-weight:700;white-space:nowrap}
.daylist{list-style:none;padding:0;margin:0}
.daylist li{display:grid;grid-template-columns:4.2rem 1fr auto auto;gap:.6rem;align-items:center;padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.daylist .t{color:var(--muted);font-variant-numeric:tabular-nums}
.daylist .b{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700}
.daylist .q{font-weight:700;white-space:nowrap}
.daylist button{min-height:40px;padding:.2rem .7rem}
.daylist .sent{opacity:.55}

.nfctest{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--bg);border-radius:10px;padding:.8rem;font-size:.85rem;white-space:pre-line}

.wrow{display:grid;grid-template-columns:auto 1fr 7.5rem auto auto auto;gap:.4rem;align-items:center;margin-bottom:.5rem}
.wrow input,.wrow select{min-height:48px;padding:.4rem .6rem;font-size:.9rem}
.wrow input[type=color]{width:48px;padding:2px}
.wrow button{min-height:48px;padding:.2rem .6rem}
.wrow.inactive input[type=text]{text-decoration:line-through;opacity:.6}

.tabs{position:fixed;bottom:0;left:0;right:0;display:flex;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:6}
.tabs button{flex:1;border:none;border-radius:0;flex-direction:column;gap:.1rem;min-height:68px;font-size:.85rem;color:var(--muted);background:#fff}
.tabs button span{font-size:1.4rem}
.tabs button.active{color:var(--green);box-shadow:inset 0 4px 0 var(--green)}

.modal{position:fixed;inset:0;z-index:20;background:rgba(10,20,14,.6);display:flex;align-items:center;justify-content:center}
.modal[hidden]{display:none}
.cam{position:relative;width:100%;height:100%;background:#000}
.cam video{width:100%;height:100%;object-fit:cover}
.cam-frame{position:absolute;left:12%;right:12%;top:30%;bottom:30%;border:4px solid #7fd39a;border-radius:16px;box-shadow:0 0 0 9999px rgba(0,0,0,.35)}
.cam-bar{position:absolute;left:0;right:0;bottom:0;padding:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.8));flex-wrap:wrap}
.cam-bar .ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.sheet{background:#fff;border-radius:18px;padding:1.4rem;width:min(560px,94vw)}
.qty-row{display:flex;gap:.6rem;align-items:center;margin-bottom:1rem}
.qty-row input{font-size:2rem;font-weight:800;text-align:center;min-height:72px}
.unit{font-size:1.2rem;font-weight:700;min-width:3rem}
.round{width:72px;min-height:72px;font-size:2rem;border-radius:50%;padding:0;flex:none}
.quick{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.6rem}
.quick button{flex:1 1 22%}

.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.8rem 1.3rem;border-radius:10px;z-index:30;font-weight:600;max-width:90vw;text-align:center}
.toast.ok{background:var(--green)}
.toast.err{background:var(--red)}

@media (max-width:640px){
  .id-actions{grid-template-columns:1fr}
  .wrow{grid-template-columns:auto 1fr 6rem auto;}
  .wrow .mv{display:none}
  .daylist li{grid-template-columns:3.6rem 1fr auto}
  .daylist li button{grid-column:3}
}
