:root{color-scheme:light;--page:#f5f6ef;--surface:#fff;--ink:#182a25;--muted:#55675e;--line:#dce2d8;--forest:#163f35;--green:#28664e;--mint:#bef4ad;--wash:#eef4e9;--radius:18px;font-family:Roboto,"Arial",sans-serif;font-size:16px;line-height:1.5}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);min-height:100vh}
[hidden]{display:none!important}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:default}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #418a65;outline-offset:3px}
h1:focus,h3:focus{outline:none}
.top{background:#fdfef9;border-bottom:1px solid var(--line)}
.top-inner{width:min(1120px,100%);margin:auto;min-height:82px;padding:0 36px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:25px;line-height:1;font-weight:760;letter-spacing:-1.2px}
.brand strong{font-weight:760;color:#34714f}
.brand-mark{width:39px;height:39px;flex:none}
.nav{display:flex;gap:4px;border-radius:14px;background:#f0f3e9;padding:4px}
.nav a{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 13px;border-radius:10px;color:#536157;font-size:14px;font-weight:650}
.nav a .icon{width:17px;height:17px}
.nav a[aria-current="page"]{background:white;color:#195339;box-shadow:0 1px 5px #17392320}
.offline{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:12px;font-weight:600;color:#536458}
.offline i{width:8px;height:8px;background:#a99457;border-radius:50%}
.offline[data-ready="true"] i{background:#519760}
main{width:min(1120px,100%);margin:auto;padding:46px 36px 60px}
.heading{margin-bottom:25px}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.13}
h1{font-size:clamp(35px,4.5vw,54px);letter-spacing:-.055em;font-weight:735}
.heading p{color:var(--muted);margin-top:9px;font-size:17px}
h2{font-size:24px;font-weight:710;letter-spacing:-.04em}
h3{font-size:19px;letter-spacing:-.025em}
.scan-grid{display:grid;grid-template-columns:minmax(0,1.37fr) minmax(0,1fr);gap:22px;align-items:start}
.reader-card{color:#f6fff2;border-radius:var(--radius);position:relative;isolation:isolate;background:radial-gradient(ellipse at 37% 14%,#285645 0,transparent 65%),#133b33;overflow:hidden}
.reader-meta{position:relative;z-index:1;margin:22px 25px 0;display:flex;justify-content:space-between;align-items:center;gap:8px}
.hardware,.format,.art-caption,.roll-mark{font-family:"Roboto Mono",ui-monospace,Consolas,monospace}
.hardware,.format{font-size:12px;line-height:1.5}
.hardware{font-weight:650;letter-spacing:.07em;padding:3px 9px;border:1px solid #668f76;border-radius:5px;color:#d0eed0}
.format{color:#c6dacf}
.art{position:relative;height:200px;overflow:hidden;background:radial-gradient(circle,#9acaa72a 1px,transparent 1.35px) center/14px 14px;margin-top:5px}
.art:before,.art:after{content:"";position:absolute;left:0;right:0;height:22px;pointer-events:none}
.art:before{top:0;background:linear-gradient(to bottom,#1e493a80,transparent)}
.art:after{bottom:0;background:linear-gradient(to top,#193d33,transparent)}
.art img{display:block;height:90%;width:100%;object-fit:contain;position:relative;z-index:1}
.art-caption{position:absolute;bottom:9px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:7px;color:#b5d5b9;font-size:10px;letter-spacing:.12em;z-index:2}
.art-caption .icon{width:14px;height:14px}
.reader-body{padding:15px 27px 26px}
.reader-body h2{font-size:clamp(22px,2.6vw,30px)}
.reader-body p{margin-top:8px;color:#d4e5d7;font-size:15px;line-height:1.45;overflow-wrap:anywhere}
.reader-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:19px}
#scan-start,#scan-stop,.btn,.goal-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;border-radius:9px;min-height:46px;padding:10px 17px;font-weight:680;font-size:15px;line-height:1.25}
#scan-start{min-height:54px;color:#173e2d;background:var(--mint);border-color:var(--mint);font-size:17px;flex:1}
#scan-start:hover:not(:disabled){background:#ceffc1}
#scan-start:disabled{background:#92b79a;border-color:#92b79a}
#scan-stop{background:transparent;border-color:#779782;color:#fff}
#scan-match{margin-top:12px;border-left:2px solid var(--mint);padding:2px 0 2px 11px;color:#edffe6;font-size:14px}
.verification{display:flex;gap:12px;padding:14px 16px;background:#f6f1df;color:#594e2c;border:1px solid #e5ddbd;border-radius:13px;margin-top:13px}
.verification .icon{width:19px;height:19px;margin-top:2px}
.verification strong{display:block;font-size:14px;line-height:1.4}
.verification p{font-size:13px;margin-top:2px}
.panel,.help-link{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.panel{padding:26px}
.tile-icon{display:grid;place-items:center;width:40px;height:40px;border:1px solid #dae7d5;border-radius:12px;color:#37694c;background:#eff6e9;flex:none}
.diag h2,.guide-aside h2{margin-top:16px}
.diag>p,.panel-title p,.guide-aside p{margin-top:8px;color:var(--muted);font-size:15px;line-height:1.5}
.fields,.form-grid{display:grid;gap:16px;margin:22px 0}
.field{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:650}
input:not([type="checkbox"]):not([type="file"]),select,textarea{width:100%;min-width:0;min-height:46px;background:#fcfdfa;border:1px solid #c7d2c6;border-radius:8px;padding:10px 12px;font-size:16px;font-weight:400}
input::placeholder{color:#738075;opacity:1}
.unit-field{position:relative;display:block}
.unit-field input{padding-right:68px!important}
.unit-field>span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:13px;color:#637262;font-weight:500;pointer-events:none}
.btn-primary,.goal-btn[aria-pressed="true"]{background:var(--forest);color:#fff}
.btn-primary:hover{background:#255844}
.btn-secondary{background:white;color:#244634;border-color:#c9d6c9}
.btn-secondary:hover:not(:disabled){background:#f2f6ee}
.btn-secondary:disabled{background:#f5f7f1;color:#677267;border-color:#d9dfd4}
.btn-quiet{background:transparent;color:#97574a;border:0;font-size:13px;padding:10px 0;margin-top:14px}
.diag #copy-diagnostic{width:100%}
#diagnostic-fallback{margin-top:12px;font-family:monospace;font-size:13px}
p:empty{display:none}
#copy-status,.stock-notice{font-size:14px;color:#315e44;margin-top:12px;padding:9px 12px;background:#f0f5ed;border-radius:8px}
.text-btn{width:100%;padding:15px 1px 0;min-height:43px;display:flex;align-items:center;gap:9px;font-size:14px;font-weight:650;border:0;border-top:1px solid var(--line);background:transparent;margin-top:20px;color:#325d43;text-align:left}
.text-btn .icon{width:17px;height:17px}
.text-btn .icon:last-child{margin-left:auto}
.help-link{display:flex;gap:13px;align-items:center;margin-top:20px;padding:17px 22px}
.help-link .icon:last-child{margin-left:auto}
.help-link strong,.help-link small{display:block}
.help-link small{font-size:14px;color:var(--muted)}
.guide-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
.protocol{counter-reset:step;list-style:none;padding:0;margin:25px 0;display:grid;gap:22px}
.protocol li{counter-increment:step;display:flex;gap:14px}
.protocol li:before{content:counter(step);font:650 14px/28px ui-monospace,monospace;color:#386443;text-align:center;background:#edf4e6;border-radius:50%;width:29px;height:29px;flex:none}
.protocol li strong{display:block;font-size:16px}
.protocol p{margin-top:5px;color:var(--muted);font-size:15px}
hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.work-panel,.backup-panel{max-width:900px}
.backup-panel{margin-top:18px}
.panel-title{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.panel-title p{margin-top:3px}
.stock-toolbar,.button-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stock-toolbar{justify-content:space-between;margin-bottom:14px}
.stock-count{font-size:20px;font-weight:650}
.inventory-empty{padding:24px 16px;border:1px dashed #cbd5c8;border-radius:10px;background:#f7f9f4;color:var(--muted);font-size:15px}
.roll-list,.prep-rolls{display:grid;gap:8px}
.roll-row,.prep-row{display:flex;align-items:center;gap:13px;width:100%;background:#fbfcf8;text-align:left;padding:14px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.roll-row:hover,.prep-row:hover{background:#f2f7ed}
.roll-main{min-width:0}
.roll-main strong,.roll-main small{display:block;overflow-wrap:anywhere}
.roll-main strong{font-size:17px}
.roll-main small,.stock-meta{font-size:14px;color:var(--muted)}
.roll-mark{background:#e7f0e1;color:#38664c;font-size:12px;padding:10px 6px;border-radius:8px}
.roll-chevron{margin-left:auto;color:var(--muted);font-size:23px}
.roll-balance{font-size:17px;color:#315c43;margin-top:7px}
.stock-meta{margin:16px 0;overflow-wrap:anywhere}
.stock-editor h3{font-size:27px}
.stock-editor>.field{margin-top:16px}
.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.prep-goals{display:flex;flex-wrap:wrap;gap:8px}
.goal-btn{border-color:var(--line);background:#f6f8ef;color:#314e3d}
.prep-label{font-size:17px;font-weight:650;margin:23px 0 9px}
.prep-row input{width:20px;height:20px;accent-color:var(--green);flex:none}
.prep-summary{border:1px solid #d8dfd3;background:#f4f7f0;padding:19px;border-radius:12px;margin-top:23px}
.prep-summary strong{font-size:20px;letter-spacing:-.025em}
.prep-summary small{display:block;font-size:13px;margin-top:7px}
.prep-summary.is-short{background:#fbf3dd;border-color:#e1d4ae}
.prep-summary.is-ready{background:#eaf6df;border-color:#c9debc}
@media(max-width:820px){.top-inner{gap:12px;padding:0 22px}.nav a{padding:8px 9px}.top .offline{font-size:11px}main{padding:32px 22px 50px}.scan-grid{grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);gap:15px}.panel{padding:21px}.reader-body{padding:15px 21px 21px}}
@media(max-width:680px){
  .top-inner{min-height:64px;padding:0 18px}.brand{font-size:22px;gap:8px}.brand-mark{width:34px;height:34px}
  .nav{position:fixed;bottom:0;left:0;right:0;z-index:5;justify-content:space-around;gap:0;padding:6px 5px calc(6px + env(safe-area-inset-bottom));background:#fdfef9;border-radius:0;border-top:1px solid #d5ddd1}
  .nav a{flex:1;flex-direction:column;gap:2px;font-size:11px;padding:5px 2px;min-height:46px;border-radius:10px}.nav a .icon{width:20px;height:20px}
  .nav a[aria-current="page"]{background:#eaf2e2;box-shadow:none}
  main{padding:26px 16px calc(90px + env(safe-area-inset-bottom))}.heading{margin-bottom:19px}.heading p{font-size:15px;line-height:1.43;margin-top:7px}
  .scan-grid,.guide-grid{grid-template-columns:1fr;gap:15px}.reader-meta{margin:16px 18px 0}.art{height:142px;margin:3px 0 0}.art-caption{font-size:9px;bottom:4px}
  .reader-body{padding:10px 18px 18px}.reader-body h2{font-size:24px}.reader-body p{font-size:14px;margin-top:6px}
  .reader-actions{margin-top:14px}#scan-start{min-height:51px}
  .verification{padding:12px;gap:8px;margin-top:11px}.verification p{font-size:12px}
  .panel{padding:19px}.diag .tile-icon{width:33px;height:33px;border-radius:9px;float:left;margin-right:10px}.diag h2{margin-top:0;min-height:33px;display:flex;align-items:center;font-size:21px}.diag>p{clear:both}
  .fields,.form-grid{margin:17px 0;gap:13px}.form-grid{grid-template-columns:1fr}
  .help-link{padding:15px;margin-top:15px}.help-link small{font-size:13px}
  .button-row .btn{flex:1 1 auto}.stock-toolbar .btn{font-size:14px}
  .goal-btn{padding:10px 8px;flex:1;font-size:14px}.prep-summary strong{font-size:19px}
  .guide-aside h2{font-size:21px}
}
@media(max-width:355px){.brand{font-size:20px}.offline{max-width:110px}.reader-body{padding:10px 13px 16px}main{padding-left:12px;padding-right:12px}}
.result-manual{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;margin:9px 0 -6px;padding:5px 1px;border:0;background:transparent;color:#e5f8de;font-weight:620;font-size:14px;text-align:left}
.result-manual .icon{width:17px;height:17px}.result-manual .icon:last-child{margin-left:auto}