/* RFID Studio (/rfid/): builds on /demo/demo.css (tokens, panels, buttons, tabs); only the studio's own parts here */
.rform{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fgrid .span2{grid-column:span 2}
.fgrid>div>label{width:100%}
.fgrid select,.fgrid input{width:100%;min-width:0}
.fgrid [hidden]{display:none}
.rform .hint{margin:0}
.rform label.check{align-items:flex-start;min-height:0;padding:4px 0;color:var(--text);font-weight:400;font-size:.92rem}
.rform label.check input{flex:none;margin-top:1px}
.rform label.check code,.rout code{font:400 .9em "Roboto Mono",ui-monospace,monospace}
.rform fieldset.packs{display:flex;flex-direction:column;gap:8px;padding:8px 14px 12px}
.mono{font-family:"Roboto Mono",ui-monospace,monospace;overflow-wrap:anywhere}
.mono.tiny{font-size:.74rem;line-height:1.45;color:var(--muted)}
.mono.dim{color:var(--muted);font-size:.85em}
.tiny{font-size:.74rem}
textarea.zta{width:100%;font:400 13px/1.55 "Roboto Mono",ui-monospace,monospace;resize:vertical;min-height:220px;white-space:pre;overflow:auto}
textarea.zta.short{min-height:64px;white-space:pre-wrap;overflow-wrap:anywhere}
.ed-head .btn{margin-left:auto}
.chips{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
/* results */
.rout{transition:opacity .15s}
.rout.stale{opacity:.45}
.rout:empty{display:none}
.rgrid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.rgrid2>.card,.rstack>.card{margin-top:14px}
@media (min-width:900px){ol.seglist{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.rgrid2.tight{margin-top:10px}
.rcard>p{margin:6px 0}
.rhead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:8px}
.rhead h3.sub{margin:0 6px 0 0}
.rhead .btn{margin-left:auto}
.rb{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font:500 .78rem/1.5 Roboto,system-ui,sans-serif;background:var(--soft);color:var(--ink);white-space:nowrap}
.rb.ok{background:#dcfce7;color:#166534}.rb.bad,.rb.error{background:#fee2e2;color:#991b1b}.rb.warning{background:#fef3c7;color:#92400e}.rb.info{background:#dbeafe;color:#1e40af}
.rb.void{background:var(--ink);color:var(--bg)}
:root[data-theme="dark"] .rb.ok{background:rgba(34,197,94,.16);color:#86efac}
:root[data-theme="dark"] .rb.bad,:root[data-theme="dark"] .rb.error{background:rgba(239,68,68,.18);color:#fca5a5}
:root[data-theme="dark"] .rb.warning{background:rgba(245,158,11,.18);color:#fcd34d}
:root[data-theme="dark"] .rb.info{background:rgba(59,130,246,.2);color:#93c5fd}
.okt{color:#15803d}.badt{color:#b91c1c}
:root[data-theme="dark"] .okt{color:#4ade80}:root[data-theme="dark"] .badt{color:#f87171}
.hexrow{display:flex;gap:8px;align-items:stretch;margin:4px 0 12px}
.hexbox{flex:1;min-width:0;padding:10px 14px;border-radius:12px;background:var(--code-bg);border:1px solid var(--code-line);color:#86efac;font:500 1.05rem/1.5 "Roboto Mono",ui-monospace,monospace;letter-spacing:.04em;overflow-wrap:anywhere}
.hexrow .btn{flex:none;align-self:center}
dl.kv{display:grid;grid-template-columns:minmax(8.5rem,auto) minmax(0,1fr);gap:7px 14px;margin:0;font-size:.92rem}
dl.kv dt{color:var(--muted);font-weight:500;font-size:.84rem;padding-top:1px}
dl.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.warnbox{margin-top:12px;padding:10px 14px;border:1px solid #f59e0b;border-left-width:4px;border-radius:10px;background:color-mix(in srgb,#f59e0b 8%,var(--panel));font-size:.9rem}
.warnbox .wb-h{margin:0;font-weight:500;color:var(--ink)}
.warnbox ul{margin:4px 0;padding-left:20px}
.warnbox p{margin:0}
.infobox{padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:.9rem}
/* bit fields */
.bitsvg{overflow-x:auto;border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--bg);color:var(--muted);-webkit-overflow-scrolling:touch}
.bitsvg svg{display:block;width:100%;min-width:640px;height:auto}
ol.seglist{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
ol.seglist li{display:flex;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;min-width:0}
.segnum{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;color:#fff;font:700 .78rem/1 Roboto,system-ui,sans-serif}
.segnum.light{color:#334155}
.segbody{min-width:0;flex:1}
.segtop{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;align-items:baseline}
.segtop b{color:var(--ink);font-weight:500;font-size:.92rem}
.segval{font-size:.88rem;margin-top:1px;overflow-wrap:anywhere}
.segbin{font-size:.7rem;line-height:1.35;color:var(--muted);margin-top:2px;word-break:break-all}
/* label */
.lfig{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.lframe{display:flex;align-items:center;justify-content:center;padding:12px;border:1px solid var(--line);border-radius:12px;background:repeating-conic-gradient(rgba(127,127,127,.08) 0 25%,transparent 0 50%) 0 0/20px 20px}
.lframe img{background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.18);max-width:100%;max-height:420px;width:auto;height:auto}
.rcard>.lfig+.lfig{margin-top:10px}
.lside{display:flex;flex-direction:column;gap:10px;min-width:0}
.lside>p{margin:0}
.okline{display:flex;gap:10px;align-items:flex-start;padding:8px 12px;border-radius:10px;border:1px solid;font-size:.92rem}
.okline.ok{border-color:#86efac;background:color-mix(in srgb,#22c55e 8%,var(--panel))}
.okline.bad{border-color:#fca5a5;background:color-mix(in srgb,#ef4444 8%,var(--panel))}
.okline .okico{font-weight:700}
.okline.ok .okico{color:#15803d}.okline.bad .okico{color:#b91c1c}
:root[data-theme="dark"] .okline.ok .okico{color:#4ade80}:root[data-theme="dark"] .okline.bad .okico{color:#f87171}
pre.zpl.rz{padding:10px 14px;max-height:340px}
/* check */
h4.minor{margin:14px 0 6px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500}
ul.rules{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px}
ul.rules>li{display:flex;gap:10px;padding:9px 12px;border-top:1px solid var(--line);min-width:0}
ul.rules>li:first-child{border-top:0}
.rico{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font:700 .75rem/1 Roboto,system-ui,sans-serif;background:var(--soft)}
.rico.pass{background:#dcfce7;color:#166534}.rico.error{background:#fee2e2;color:#991b1b}.rico.warning{background:#fef3c7;color:#92400e}.rico.info{background:#dbeafe;color:#1e40af}
:root[data-theme="dark"] .rico.pass{background:rgba(34,197,94,.16);color:#86efac}
:root[data-theme="dark"] .rico.error{background:rgba(239,68,68,.18);color:#fca5a5}
:root[data-theme="dark"] .rico.warning{background:rgba(245,158,11,.18);color:#fcd34d}
:root[data-theme="dark"] .rico.info{background:rgba(59,130,246,.2);color:#93c5fd}
.rbody{flex:1;min-width:0;font-size:.92rem}
.rtop{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.rtop b{color:var(--ink);font-weight:500}
.rid{font-size:.8rem;color:var(--muted)}
.passed{font-size:.82rem;color:#15803d}:root[data-theme="dark"] .passed{color:#4ade80}
.fbox{margin-top:6px;padding:7px 10px;border-radius:8px;background:var(--bg);overflow-wrap:anywhere}
.fbox p{margin:0}
.fbox .sugg{color:#15803d;margin-top:2px}:root[data-theme="dark"] .fbox .sugg{color:#4ade80}
/* simulation */
details.simlabel{margin-top:12px;border:1px solid var(--line);border-radius:12px}
details.simlabel>summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:48px;padding:6px 14px;cursor:pointer;list-style:none}
details.simlabel>summary::-webkit-details-marker{display:none}
details.simlabel>summary::before{content:"";width:7px;height:7px;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform .15s;margin-right:4px}
details.simlabel[open]>summary::before{transform:rotate(45deg)}
details.simlabel>summary b{color:var(--ink);font-weight:500}
details.simlabel>summary:focus-visible{outline:2px solid var(--em);outline-offset:2px}
.simbody{padding:4px 14px 14px;border-top:1px solid var(--line)}
.simbody>p{margin:8px 0 0}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.shots .lframe{padding:8px}
.shots .lframe img{max-height:200px}
.shots figcaption{text-align:center;font-weight:500}
ol.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
ol.steps>li{padding:8px 10px;border-radius:8px;background:var(--bg);font-size:.9rem;min-width:0}
ol.steps p{margin:0}
.stephead{font-weight:500}
ol.steps ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}
ol.steps ul li{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;font-size:.84rem;min-width:0}
.opcmd{font-weight:500;color:var(--ink)}
.opmsg{min-width:0;overflow-wrap:anywhere;color:var(--muted)}
.words{display:flex;flex-wrap:wrap;gap:6px}
.word{display:flex;flex-direction:column;align-items:center;padding:3px 9px;border-radius:8px;min-width:58px}
.word small{font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;opacity:.85}
.word b{font-weight:500;font-size:.92rem}
.word.crc{background:#ede9fe;color:#5b21b6}.word.pc{background:#e0f2fe;color:#075985}.word.epc{background:#dcfce7;color:#166534}
:root[data-theme="dark"] .word.crc{background:rgba(139,92,246,.22);color:#ddd6fe}
:root[data-theme="dark"] .word.pc{background:rgba(14,165,233,.2);color:#bae6fd}
:root[data-theme="dark"] .word.epc{background:rgba(34,197,94,.16);color:#bbf7d0}
.simbody dl.kv{margin-top:10px}
code.hostline{display:block;padding:3px 8px;border-radius:6px;background:var(--code-bg);color:#86efac;font:400 .82rem/1.5 "Roboto Mono",ui-monospace,monospace;overflow-wrap:anywhere}
code.hostline.inline{display:inline-block}
.note p{margin:0}
@media (max-width:1100px){.rgrid2{grid-template-columns:minmax(0,1fr)}.rgrid2>.card+.card{margin-top:0}}
@media (max-width:860px){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  textarea.zta{font-size:16px;min-height:200px}
  dl.kv{grid-template-columns:minmax(0,1fr);gap:2px 0}
  dl.kv dd{margin-bottom:8px}
  .hexbox{font-size:.95rem}
  .chips .btn{min-height:44px}
}
@media (max-width:520px){.fgrid{grid-template-columns:minmax(0,1fr)}.fgrid .span2{grid-column:auto}}