/* Workspace Console. Colour and size tokens mirror libraries/c1tech/c1-ui/shell/style.css (docs/ui-design-tokens.md). */
:root{--bg:#070b16;--bg2:#0c1324;--card:#121b2e;--card2:#162038;--border:rgba(100,140,200,.14);--border-strong:rgba(100,140,200,.28);--text:#f0f4fc;--text2:#a8b8d4;--muted:#6b7d9a;
  --blue:#4f8cff;--green:#3dd68c;--green-dim:rgba(61,214,140,.15);--yellow:#f5c542;--red:#ff6b6b;--sel:#c8dcff;--shadow:rgba(0,0,0,.22);--log:#04070e;--blue-dim:rgba(79,140,255,.16);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--focus:0 0 0 3px rgba(79,140,255,.35);color-scheme:dark}
:root[data-theme=light]{--bg:#f3f6fb;--bg2:#eaf0f8;--card:#ffffff;--card2:#f6f9fd;--border:rgba(30,60,110,.14);--border-strong:rgba(30,60,110,.3);--text:#101a2e;--text2:#3c4d6b;--muted:#5f7090;
  --blue:#2563eb;--green:#12915a;--green-dim:rgba(18,145,90,.12);--yellow:#a86b00;--red:#d03535;--sel:#1d4ed8;--shadow:rgba(30,60,110,.12);--log:#f8fafd;--blue-dim:rgba(37,99,235,.1);color-scheme:light}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font:14px/1.45 var(--font);background:var(--bg);color:var(--text)}
button,input,select{font:inherit;color:inherit}a{color:var(--blue);text-decoration:none}code{font-family:var(--mono);font-size:12px;color:var(--text2)}
:focus-visible{outline:none;box-shadow:var(--focus)}
.app{display:grid;grid-template-columns:248px minmax(0,1fr);height:100vh}
.sb{background:var(--bg2);border-right:1px solid var(--border);padding:16px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px 14px}.brand img{width:43px;height:auto}.brand b{display:block;font-size:14px}.brand small{color:var(--muted);font-size:11px}
.sb .g{color:var(--muted);font-size:12px;padding:14px 10px 4px}
.sb a{display:flex;align-items:center;gap:10px;min-height:34px;padding:0 10px;border-radius:9px;color:var(--text2);cursor:pointer}
.sb a:hover{background:var(--card)}.sb a.on{background:var(--blue-dim);color:var(--text);font-weight:600}.sb a em{margin-left:auto;font-style:normal;color:var(--muted);font-size:11px}
.sb .foot{margin-top:auto;padding:10px 12px;border:1px solid var(--border);border-radius:10px;font-size:11px;color:var(--muted);background:var(--card);word-break:break-all}
.main{display:flex;flex-direction:column;min-width:0;height:100vh}
.top{display:flex;align-items:center;gap:8px;padding:0 24px;height:60px;border-bottom:1px solid var(--border);flex:none}
.top h1{font-size:17px;margin:0 auto 0 0;font-weight:700}
.page{padding:22px 24px 40px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:16px}
/* controls: one height for buttons and fields */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;border-radius:10px;border:1px solid var(--border-strong);background:var(--card2);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--blue)}.btn.pri{background:var(--blue);border-color:var(--blue);color:#fff}.btn.pri:hover{filter:brightness(1.08)}
.btn.dng{border-color:var(--red);color:var(--red);background:transparent}.btn.sm{height:30px;padding:0 12px;font-size:12px;border-radius:8px}.btn[disabled]{opacity:.5;cursor:default}
.inp,.sel{height:36px;width:100%;background:var(--bg2);border:1px solid var(--border-strong);border-radius:10px;padding:0 12px;font-size:13px}
.inp::placeholder{color:var(--muted)}.sel{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 17px) 15px,calc(100% - 12px) 15px;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
.seg{display:flex;height:36px;border:1px solid var(--border-strong);border-radius:10px;overflow:hidden;background:var(--bg2)}.seg button{flex:1;border:0;background:transparent;font-size:13px;cursor:pointer;color:var(--text2)}.seg button.on{background:var(--blue-dim);color:var(--text);font-weight:600}
.chk{display:flex;align-items:center;gap:8px;height:36px;font-size:13px}.chk input{width:16px;height:16px;accent-color:var(--blue)}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 18px;box-shadow:0 1px 0 var(--shadow)}.card h3{margin:0 0 10px;font-size:14px}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--text2);font-size:12px}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--green)}.chip.off i{background:var(--muted)}.chip.bad i{background:var(--red)}.chip.busy i{background:var(--blue);box-shadow:0 0 0 3px var(--blue-dim)}
.pill{display:inline-block;height:20px;line-height:20px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:600;background:var(--green-dim);color:var(--green)}.pill.w{background:rgba(245,197,66,.16);color:var(--yellow)}.pill.e{background:rgba(255,107,107,.16);color:var(--red)}.pill.n{background:var(--blue-dim);color:var(--blue)}.pill.g{background:var(--bg2);color:var(--muted)}
.muted{color:var(--muted)}.sm{font-size:12px}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.grow{flex:1}
table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;color:var(--muted);font-weight:500;font-size:12px;padding:6px 10px;border-bottom:1px solid var(--border)}td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle}tr:last-child td{border-bottom:0}tr.click{cursor:pointer}tr.click:hover td{background:var(--card2)}
.drop{border:1.5px dashed var(--border-strong);border-radius:14px;padding:18px 20px;display:flex;gap:16px;align-items:center;background:var(--blue-dim)}.drop.over{border-color:var(--blue);background:var(--card2)}.drop b{font-size:14px}
.grid{display:grid;gap:12px}.g5{grid-template-columns:repeat(5,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g2{grid-template-columns:2fr 1fr}
.act{display:flex;flex-direction:column;gap:3px;text-align:left;min-height:84px;padding:12px 14px;border:1px solid var(--border);background:var(--card);border-radius:12px;cursor:pointer}.act:hover{border-color:var(--blue)}.act b{font-size:13px}.act .ah{display:flex;align-items:center;gap:8px}.act .ah .ic{width:18px;height:18px;flex:none;color:var(--blue)}.act small{color:var(--muted);font-size:12px}
.pcard h4{margin:0;font-size:15px}.pcard .m{color:var(--muted);font-size:12px;margin:2px 0 10px}.tg{display:inline-block;font-size:11px;border:1px solid var(--border);border-radius:6px;padding:1px 7px;color:var(--text2);margin:0 4px 4px 0}
.run{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;align-items:start}
.fld{display:grid;gap:6px;margin-bottom:14px;font-size:13px}.fld>span{color:var(--muted);font-size:12px}
.log{background:var(--log);border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;height:calc(100vh - 150px);min-height:360px;overflow:hidden}
.log pre{margin:0;padding:14px 16px;font:12px/1.6 var(--mono);overflow:auto;flex:1;white-space:pre-wrap;word-break:break-word;color:var(--text2)}
.log .e{color:var(--red)}.log .ok{color:var(--green)}.log .w{color:var(--yellow)}.log .c{color:var(--blue)}.log .d{color:var(--muted)}
.log .in{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border);background:var(--card)}
.log .in .inp{font-family:var(--mono)}
.empty{color:var(--muted);padding:30px;text-align:center}
.modal{position:fixed;inset:0;background:rgba(2,5,12,.6);display:flex;align-items:center;justify-content:center;z-index:20;padding:20px}.modal>div{background:var(--card);border:1px solid var(--border-strong);border-radius:16px;max-width:760px;width:100%;max-height:86vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.modal header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}.modal header h3{margin:0;font-size:15px;flex:1}.modal .bd{padding:16px 20px;overflow:auto}.modal footer{padding:12px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}
.modal.wide>div{max-width:1100px}.modal img{max-width:100%;border-radius:10px;border:1px solid var(--border)}
.md h1,.md h2,.md h3{margin:18px 0 8px}.md h1{font-size:20px}.md h2{font-size:16px}.md h3{font-size:14px}.md p,.md li{color:var(--text2)}.md pre{background:var(--log);border:1px solid var(--border);border-radius:10px;padding:12px;overflow:auto;font:12px/1.5 var(--mono)}.md table{margin:10px 0}.md code{background:var(--bg2);padding:1px 5px;border-radius:5px}
.docs{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:start}.docs .list{display:flex;flex-direction:column;gap:2px}.docs .list a{padding:7px 10px;border-radius:8px;color:var(--text2);cursor:pointer;font-size:13px}.docs .list a.on{background:var(--blue-dim);color:var(--text);font-weight:600}
.tabs{display:inline-flex;border:1px solid var(--border-strong);border-radius:10px;overflow:hidden;height:36px;background:var(--bg2)}.tabs button{border:0;background:transparent;padding:0 16px;cursor:pointer;font-size:13px;color:var(--text2)}.tabs button.on{background:var(--blue-dim);color:var(--text);font-weight:600}
.toast{position:fixed;right:20px;bottom:20px;background:var(--card);border:1px solid var(--border-strong);border-radius:12px;padding:12px 16px;z-index:30;max-width:420px;box-shadow:0 10px 30px rgba(0,0,0,.35)}.toast.e{border-color:var(--red)}
@media (max-width:1100px){.g5{grid-template-columns:repeat(3,minmax(0,1fr))}.run{grid-template-columns:1fr}.g2{grid-template-columns:1fr}.log{height:60vh}}
@media (max-width:760px){.app{grid-template-columns:1fr}.sb{display:none}.g5,.g3{grid-template-columns:1fr 1fr}.docs{grid-template-columns:1fr}.page{padding:16px}.top{padding:0 16px}}
@media (prefers-reduced-motion:no-preference){.btn,.act{transition:border-color .12s,filter .12s}}

/* sidebar groups, search */
details.sg{margin:2px 0}
details.sg>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:7px 12px;border-radius:8px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
details.sg>summary::-webkit-details-marker{display:none}
details.sg>summary::before{content:"▸";margin-right:6px;transition:transform .15s}
details.sg[open]>summary::before{transform:rotate(90deg)}
details.sg>summary em{margin-left:auto;font-style:normal;opacity:.7}
details.sg>summary:hover{color:var(--text)}

/* top bar chips never wrap; running chip; docs list scrolls by itself */
#topchips{display:flex;gap:6px;min-width:0;flex-wrap:nowrap;overflow:hidden;justify-content:flex-end}
.chip{white-space:nowrap;flex:none}
.chip.busy{border-color:var(--blue);color:var(--text)}
.docs .list{position:sticky;top:0;max-height:calc(100vh - 120px);overflow:auto}
#sb{overflow-y:auto}

.md a,.docs a.lnk{color:var(--blue);text-decoration:none}.md a:hover{text-decoration:underline}

.chip.wait{border-color:var(--amber,#d29922);color:var(--text)}.chip.wait i{background:var(--amber,#d29922);box-shadow:0 0 0 3px rgba(210,153,34,.25)}
#sendin.ask{border-color:var(--amber,#d29922);box-shadow:0 0 0 3px rgba(210,153,34,.25)}
/* the running chip is first and never clipped; the tool chips give way on the right */
#topchips{justify-content:flex-start;margin-left:auto}
.chip.busy,.chip.wait{max-width:260px;overflow:hidden;text-overflow:ellipsis}
#sfind{height:32px;border-radius:8px}

.brand .lg-d{display:none}[data-theme="dark"] .brand .lg-l{display:none}[data-theme="dark"] .brand .lg-d{display:block}

.log .mt{padding:8px 14px;gap:10px;border-bottom:1px solid var(--border);flex-wrap:wrap}.log .mt .chk{height:30px}

.adv{margin:6px 0 12px;border:1px solid var(--border);border-radius:10px;padding:2px 12px 10px}.adv summary{cursor:pointer;height:34px;line-height:34px;font-size:13px;font-weight:600;color:var(--muted)}
.btn.dng.pri{}
.chk{height:auto;min-height:34px;padding:4px 0;line-height:1.3}
/* checkboxes: one look everywhere */
.chk{display:flex;align-items:flex-start;gap:10px;height:auto;min-height:34px;padding:7px 0;font-size:13px;line-height:1.35;cursor:pointer;user-select:none}
.chk input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:1px 0 0;border:1.5px solid var(--border-strong);border-radius:5px;background:var(--bg2);cursor:pointer;display:grid;place-content:center;transition:background .12s,border-color .12s}
.chk input:hover{border-color:var(--blue)}
.chk input:checked{background:var(--blue);border-color:var(--blue)}
.chk input:checked::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.chk input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.chk input:disabled{opacity:.5;cursor:default}
.log .mt .chk{padding:4px 0;min-height:30px;align-items:center}
/* file picker */
.drop{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 12px;border:1.5px dashed var(--border-strong);border-radius:10px;background:var(--bg2);transition:border-color .12s,background .12s}
.drop.over{border-color:var(--blue);background:var(--bg3, var(--bg2))}.drop.has span{color:var(--text);font-weight:600;word-break:break-all}.drop .btn{flex:none}
.finfo{margin-top:8px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;font-size:13px;line-height:1.45}.finfo .sm{margin-top:4px;color:var(--muted)}
[hidden]{display:none!important}
#form{margin-bottom:10px}

.choices{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px 0;border-top:1px solid var(--border)}.choices .btn{height:auto;min-height:30px;padding:6px 12px;text-align:left;white-space:normal}

.modal.small>div{max-width:440px}.modal footer{justify-content:flex-end}

.sb a .ic{width:18px;height:18px;flex:none;opacity:.7}.sb a:hover .ic,.sb a.on .ic{opacity:1}.sb a.on .ic{color:var(--blue)}.sb a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pcard .ph{display:flex;gap:12px;align-items:center;margin-bottom:8px}.pcard .ph h4{margin:0}.pic{width:40px;height:40px;border-radius:11px;background:var(--blue-dim);color:var(--blue);display:grid;place-items:center;flex:none}

/* ---------------- GitLab pipelines (pipelines.js): status badge, stage dots, project table, pipeline graph, job log ---------------- */
.st{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 7px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;flex:none}
.st svg{width:14px;height:14px;flex:none}
.st.success{background:var(--green-dim);color:var(--green)}.st.failed{background:rgba(255,107,107,.16);color:var(--red)}.st.running{background:var(--blue-dim);color:var(--blue)}
.st.pending,.st.created,.st.canceled,.st.skipped,.st.none{background:var(--bg2);color:var(--muted)}.st.manual{background:rgba(245,197,66,.16);color:var(--yellow)}
.mini{display:inline-flex;align-items:center;flex:none}.mini i{width:10px;height:1.5px;background:var(--border-strong)}
.mini b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--muted);color:var(--muted)}.mini b svg{width:11px;height:11px}
.mini .success{border-color:var(--green);color:var(--green)}.mini .failed{border-color:var(--red);color:var(--red);background:rgba(255,107,107,.12)}.mini .running{border-color:var(--blue);color:var(--blue)}.mini .manual{border-color:var(--yellow);color:var(--yellow)}
@media (prefers-reduced-motion:no-preference){.st.running svg,.mini .running svg{animation:c1spin 1.2s linear infinite}}
@keyframes c1spin{to{transform:rotate(360deg)}}
.sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.sum .card{display:flex;flex-direction:column;gap:2px}.sum b{font-size:26px;line-height:1.2}.sum small{color:var(--muted);font-size:12px;min-height:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.secth{display:flex;align-items:baseline;gap:10px;margin:26px 0 10px}#glbody>.secth:first-child{margin-top:8px}.secth h2{margin:0;font-size:14px}.secth em{font-style:normal;color:var(--muted);font-size:12px}
.tblcard{padding:4px 8px}.pl td{padding:10px}.pl .c-ic{width:52px}.pl .nm b{display:block;font-size:13px}.pl .nm small{color:var(--muted);font-size:12px;word-break:break-all}
.pl .c-act{text-align:right;width:1%;white-space:nowrap}.pl .c-tm{white-space:nowrap}
.cm{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2)}.cm code{color:var(--blue)}
details.libs>summary{cursor:pointer;list-style:none;display:flex;gap:10px;align-items:baseline;padding:2px 0}details.libs>summary::-webkit-details-marker{display:none}
details.libs>summary::before{content:"▸";color:var(--muted)}details.libs[open]>summary::before{content:"▾"}details.libs .pl{margin-top:8px}
.pst{display:flex;align-items:center;gap:8px;margin:10px 0 0;padding:8px 10px;border-radius:10px;background:var(--bg2);font-size:12px;color:var(--muted);cursor:pointer;min-width:0;flex-wrap:nowrap}
.pst:hover{outline:1px solid var(--border-strong)}.pst .grow{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}      /* every page (product cards, Flasher, Platform): was .pcard only */
.pcard .m+.pst,.pcard .pst+.row{margin-top:10px}
.crumb{font-size:13px;color:var(--muted)}.crumb a{color:var(--text2)}.crumb b{color:var(--text)}
.plhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.plhead .row{gap:8px}p.err{color:var(--red);margin:10px 0 0;font-size:13px}
.graph{display:flex;gap:28px;overflow-x:auto;padding:4px 2px 8px}.stage{min-width:220px;display:flex;flex-direction:column;gap:8px}
.stage h4{margin:0 0 4px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.job{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--card2);color:var(--text);cursor:pointer}
.job:hover,.job.on{border-color:var(--blue)}.job .grow{min-width:0}.job .grow b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.job .grow small{color:var(--muted);font-size:11px}
.job .mini b{width:22px;height:22px}.jobs{display:flex;flex-direction:column;gap:6px}
.jobpage{display:grid;grid-template-columns:290px minmax(0,1fr);gap:16px;align-items:start}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px}.kv>span{color:var(--muted)}.kv>div{min-width:0;overflow-wrap:anywhere}
.jl{height:calc(100vh - 140px)}.jl pre{padding:10px 0}
.jl pre .l{display:block;padding:0 16px 0 64px;position:relative;min-height:19px}.jl pre .l .n{position:absolute;left:0;width:48px;text-align:right;color:var(--muted);opacity:.55;user-select:none}
.jl pre .l.hit{background:rgba(245,197,66,.14)}.jl pre .l.a-r{background:rgba(255,107,107,.07)}
.jl .sec{cursor:pointer;color:var(--text);font-weight:600}.jl .sec:hover{background:var(--card2)}.jl .sec .tw{display:inline-block;width:14px;color:var(--muted)}.jl .sec .t{float:right;color:var(--muted);font-weight:400}
.a-g{color:var(--green)}.a-r{color:var(--red)}.a-y{color:var(--yellow)}.a-b{color:var(--blue)}.a-c{color:#2ec4d6}.a-m{color:#a78bfa}.a-d{color:var(--muted)}.a-bold{font-weight:700}
.errbar{flex:none;display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--border);background:rgba(255,107,107,.08);font-size:12px;color:var(--red)}
.errbar svg{width:14px;height:14px;flex:none}.errbar .grow{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1100px){.jobpage{grid-template-columns:1fr}.sum{grid-template-columns:1fr 1fr}.jl{height:70vh}}
/* phone: a compact list (icon, name, status); the full row comes back with "desktop site" in the browser */
@media (max-width:760px){
  .pl .c-mini,.pl .c-cm,.pl .c-tm,.pl .c-act{display:none}.pl .c-ic{width:46px}.pl .c-ic .pic{width:34px;height:34px}.pl .c-st{text-align:right;width:1%}
  .pl .nm small{display:block;max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sum b{font-size:22px}
  .plhead .row{width:100%}.graph{gap:16px}.stage{min-width:180px}.jl pre .l{padding-left:44px}.jl pre .l .n{width:34px}
}
.top h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:none;max-width:40%}
@media (max-width:1100px){.sum{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.pl{table-layout:fixed}.pl .c-st{width:112px}.pl .nm{overflow:hidden}.pl .nm b,.pl .nm small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:none}
  .pl td{padding:9px 6px}.tblcard{padding:2px 4px}.top h1{max-width:46%}}

/* ---------------- update zips (updates.js) ---------------- */
.warnbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-color:rgba(245,197,66,.55);background:rgba(245,197,66,.08)}
.warnbar>b{font-size:13px}.warnbar .muted{flex:1 1 320px}
.uh .c-cm{white-space:normal;max-width:none}.uh .libs1{margin-top:4px;display:flex;flex-wrap:wrap;gap:4px}.uh .tg.k-product{border-color:var(--blue)}.uh .tg.k-platform,.uh .tg.k-workspace{border-style:dashed}.uh .ua{display:flex;gap:6px;justify-content:flex-end;align-items:center}.uh .c-tm{padding-right:14px}
.tblwrap{max-height:52vh;overflow:auto;border:1px solid var(--border);border-radius:10px}.tblwrap table td{padding:6px 10px}
@media (max-width:760px){.uh .c-cm,.uh .c-tm{display:none}.uh .c-act{display:none}}

/* ---------------- product page (product.js) ---------------- */
.plink{color:inherit}.plink:hover{color:var(--blue)}
.phead{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}.phead h2{margin:0;font-size:18px}.phead .pic{width:46px;height:46px}
.pst-wide{margin-top:12px!important}
.prodgrid{align-items:start}
.feats{display:flex;flex-direction:column;gap:2px}
.feat{display:flex;gap:12px;align-items:flex-start;padding:9px 6px;border-radius:10px;cursor:pointer}.feat:hover{background:var(--card2)}
.feat b{font-size:13px}.feat small{display:block;color:var(--muted);font-size:12px;margin-top:2px}.feat.unused{opacity:.62}
.sw{position:relative;flex:none;width:36px;height:20px;margin-top:1px}.sw input{opacity:0;width:0;height:0;position:absolute}
.sw i{position:absolute;inset:0;border-radius:999px;background:var(--border-strong);transition:background .15s}
.sw i::after{content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;border-radius:50%;background:#fff;transition:transform .15s}
.sw input:checked+i{background:var(--blue)}.sw input:checked+i::after{transform:translateX(16px)}.sw input:focus-visible+i{box-shadow:0 0 0 3px var(--blue-dim)}
.relnew{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--card2)}
.relnew .btn.on{border-color:var(--blue);color:var(--text)}.relnew textarea{width:100%;resize:vertical;min-height:84px}
@media (max-width:1100px){.prodgrid{grid-template-columns:1fr}}

/* ---------------- flasher page (flasher.js) ---------------- */
.fl td{vertical-align:middle}.fl tr.dim td{opacity:.6}.fl tr.gone td{opacity:.45;text-decoration:line-through}.fl tr.gone td.c-act,.fl tr.gone td.c-st{opacity:1;text-decoration:none}
.fl .c-cm{max-width:none;min-width:220px}.fl .c-cm input{width:100%}.fl select.inp{height:30px}
pre.code{max-height:55vh;overflow:auto;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px;font-size:12px;white-space:pre-wrap}
@media (max-width:760px){.fl td:nth-child(3),.fl td:nth-child(5){display:none}}
.secret{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--card2);margin-top:10px}
.secret small{font-size:12px}
.devb{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
details.adv>summary{cursor:pointer;list-style:none;display:flex;gap:10px;align-items:baseline}details.adv>summary::-webkit-details-marker{display:none}
details.adv>summary::before{content:"▸";color:var(--muted)}details.adv[open]>summary::before{content:"▾"}
/* ---------------------------------------------------------------- published mode: sign-in page (login.html) and user chip */
.login-body{min-height:100%;display:flex;background:radial-gradient(1200px 600px at 50% -10%,var(--blue-dim),transparent 70%),var(--bg)}
.login{margin:auto;width:min(420px,calc(100% - 32px));display:flex;flex-direction:column;gap:14px;padding:32px 0}
.login-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:28px 26px;box-shadow:0 10px 40px var(--shadow)}
.login-brand{display:flex;align-items:center;gap:14px;margin-bottom:22px}.login-brand img{width:56px;height:auto}
.login-brand h1{margin:0;font-size:19px}.login-brand p{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.login-go{width:100%;height:44px;font-size:14px;text-decoration:none}
.login-note{color:var(--muted);font-size:12px;margin:14px 0 0;text-align:center}
.login-err{border:1px solid var(--red);color:var(--red);background:rgba(255,107,107,.08);border-radius:10px;padding:10px 12px;font-size:12.5px;margin-bottom:14px}
.login-foot{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px;padding:0 6px}
.login-brand .lg-l{display:none}:root[data-theme=light] .login-brand .lg-l{display:block}:root[data-theme=light] .login-brand .lg-d{display:none}
.uchip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 4px 0 10px;border:1px solid var(--border);border-radius:999px;background:var(--card);font-size:12px}
.uchip b{font-weight:600}.uchip .pill{margin:0}
.localonly{border-color:var(--yellow)!important}
.sb a.off{opacity:.45}
/* ---------------------------------------------------------------- Boards page */
.blist{display:flex;flex-direction:column;gap:8px}
.brow{display:grid;grid-template-columns:120px minmax(0,1.4fr) 90px minmax(0,1fr) minmax(0,1fr) 110px;gap:12px;align-items:center;padding:10px 14px;background:var(--card);border:1px solid var(--border);border-radius:12px;cursor:pointer}
.brow:hover{border-color:var(--blue)}.brow .m{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow b{font-family:var(--mono);font-size:12.5px}.brow .nm{display:flex;align-items:center;gap:10px;min-width:0}.brow .nm div{min-width:0}
.bdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted);margin-right:6px}.bdot.on{background:var(--green);box-shadow:0 0 0 3px var(--green-dim)}
.bhead{padding:0 14px;cursor:default;background:transparent;border-color:transparent;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.bhead:hover{border-color:transparent}
@media (max-width:800px){.brow{grid-template-columns:1fr 1fr}.bhead{display:none}}
.hist{max-height:260px;overflow:auto;border:1px solid var(--border);border-radius:10px;padding:6px 10px;font-size:12px}.hist div{padding:4px 0;border-bottom:1px solid var(--border)}.hist div:last-child{border:0}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width:1100px){.g5{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ---------------------------------------------------------------- customer pages (account.html) */
.acct-body .login{width:min(420px,calc(100% - 32px))}
.acct{margin:auto;width:min(440px,calc(100% - 32px));display:flex;flex-direction:column;gap:14px;padding:32px 0}.acct.wide{width:min(980px,calc(100% - 32px))}
.acct .fld{display:block;margin-bottom:12px}.acct .fld span{display:block;font-size:12px;color:var(--text2);margin-bottom:5px}
.acct-links{display:flex;justify-content:space-between;gap:10px;margin-top:14px;font-size:13px}
.acct-ok{border:1px solid var(--green);color:var(--green);background:var(--green-dim);border-radius:10px;padding:10px 12px;font-size:12.5px;margin-bottom:14px}
.acct-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.dv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.dv{border:1px solid var(--border);background:var(--card2);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.dv-top{display:flex;align-items:center;gap:10px}.dv-pts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dv-pt{background:var(--bg2);border-radius:10px;padding:8px 10px}.dv-pt span{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dv-pt b{font-size:16px}.dv-pt small{font-size:11px;color:var(--muted);font-weight:500}
.acct .login-brand .lg-l{display:none}:root[data-theme=light] .acct .login-brand .lg-l{display:block}:root[data-theme=light] .acct .login-brand .lg-d{display:none}

/* running actions (top-bar list when more than two run) */
.jobrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}.jobrow:last-child{border-bottom:0}
.jobrow .grow{min-width:0}.jobrow .mono{font-family:var(--mono,ui-monospace,monospace);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* project page: every pipeline of the project, page by page */
.plh .hh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 10px 6px}.plh .hh h3{margin:0}
.plh .pager{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding:10px}
.plh tr.on td{background:var(--blue-dim)}.plh .refs{display:block;color:var(--muted);font-size:12px;font-weight:400}
.pl .c-act .btn+.btn{margin-left:6px}
@media (max-width:760px){.plh .hh .tabs{order:3;width:100%;overflow-x:auto}.plh .pager{justify-content:space-between}}
#plbody,#plhist{flex:none}      /* #page is a flex column: these must keep their full height (the list was cut at ~4 rows) */

/* top bar: Running and Tools buttons (lists open on click) */
button.chip{cursor:pointer;font:inherit;font-size:12px}button.chip:hover{border-color:var(--blue)}
.chip .cnt{font-weight:700;color:var(--text)}.chip.part i{background:var(--amber,#d29922)}
/* Pipelines: run several at once (selection column and bar) */
.selbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;margin:14px 0 0}.selbar .btn.on{border-color:var(--blue);color:var(--blue)}
.pl .c-sel{width:34px;padding-right:0}.pl .c-sel .chk{min-height:0;padding:0}.pl tr.picked td{background:color-mix(in srgb,var(--blue) 7%,transparent)}
/* sidebar: groups that fold */
#sb .g.fold{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}#sb .g.fold::before{content:"▸";font-size:10px}#sb .g.fold.open::before{content:"▾"}#sb .g.fold:hover{color:var(--text)}
#sb .g.fold em{font-style:normal;margin-left:auto;font-weight:400}
.sb>*{flex-shrink:0}#sfind{min-height:34px;margin-bottom:6px!important}
/* product page: feature templates */
.tboard{border-top:1px solid var(--border);padding:14px 0 4px;margin-top:10px}.tboard>.row{gap:10px;margin-bottom:4px}
.tpl{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin:10px 0 0;background:var(--bg2)}.tpl .row{gap:8px;flex-wrap:wrap}
.tpl .tlabel{max-width:260px}.tpl .tdesc{width:100%;margin-top:8px}.tpl.none{background:transparent;border-style:dashed}
.fchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.fchip{border:1px solid var(--border-strong);background:transparent;color:var(--muted);border-radius:999px;padding:3px 10px;font-size:12px;cursor:pointer;text-decoration:line-through}
.fchip.on{background:var(--blue-dim);border-color:var(--blue);color:var(--text);text-decoration:none}.fchip.locked{opacity:.55;cursor:not-allowed}
.tpl.none .fchip{cursor:default}
/* ask.js: confirm / question / message dialog (replaces the browser's confirm, prompt and alert) */
.askbox{position:fixed;inset:0;z-index:60;background:rgba(2,5,12,.55);display:flex;align-items:center;justify-content:center;padding:20px;animation:askfade .12s ease-out}
.askcard{background:var(--card);border:1px solid var(--border-strong);border-radius:16px;width:100%;max-width:440px;box-shadow:0 24px 70px rgba(0,0,0,.45);animation:askpop .14s ease-out}
.askhead{display:flex;align-items:center;gap:10px;padding:18px 20px 4px}.askhead h3{margin:0;font-size:15px;line-height:1.35}
.askicon{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;color:var(--red);background:color-mix(in srgb,var(--red) 14%,transparent)}
.askbody{padding:6px 20px 4px;color:var(--text2);font-size:13px;line-height:1.55}.askbody p{margin:8px 0}.askbody .fld{margin-top:12px}
.askfoot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px 18px}
.btn.dng.solid{background:var(--red);border-color:var(--red);color:#fff}
@keyframes askfade{from{opacity:0}}@keyframes askpop{from{opacity:0;transform:translateY(6px) scale(.98)}}

/* "?" tips: the explanation on hover / focus instead of text on the page */
.tip{display:inline-flex;align-items:center;justify-content:center;flex:none;width:15px;height:15px;margin-left:6px;border-radius:50%;border:1px solid var(--border-strong);color:var(--muted);font:600 10px/1 var(--font);font-style:normal;cursor:help;position:relative;vertical-align:1px;user-select:none}
.tip:hover,.tip:focus{color:var(--text);border-color:var(--blue);outline:none}
.tipbox{position:fixed;z-index:90;max-width:min(280px,calc(100vw - 16px));padding:8px 10px;border-radius:8px;background:var(--card2);color:var(--text);border:1px solid var(--border-strong);box-shadow:0 8px 28px rgba(0,0,0,.28);font:400 12px/1.45 var(--font);pointer-events:none;animation:askfade .1s ease-out}
.fld>span .tip,.chk .tip{vertical-align:0}
/* Install firmware: the files card */
.fld.binf{grid-template-columns:minmax(0,1fr)}
.bin{min-width:0;border:1.5px dashed var(--border-strong);border-radius:12px;background:var(--bg2);transition:border-color .12s,background .12s}
.bin.over{border-color:var(--blue);background:var(--blue-dim)}
.bin.has{border:1px solid var(--border);background:var(--card2)}.bin.has.over{border-color:var(--blue)}
.bin-empty{display:flex;align-items:center;gap:12px;padding:14px}
.bin-empty svg{flex:none;width:30px;height:30px;color:var(--muted)}
.bin-empty .t{flex:1;min-width:0;line-height:1.35}.bin-empty b{display:block;font-size:13px;color:var(--text)}.bin-empty small{color:var(--muted);font-size:12px}
.bin-up{padding:8px 12px;font-size:12px;color:var(--blue);border-bottom:1px solid var(--border)}
.bin-head{display:flex;align-items:flex-start;gap:10px;padding:12px 12px 10px}
.bin-head .t{flex:1;min-width:0}.bin-head b{display:block;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bin-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:5px;font-size:11.5px;color:var(--muted)}.bin-meta .pill{height:18px;line-height:18px;display:inline-flex;align-items:center}
.bin-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--border-strong)}
.bin-acts{display:flex;gap:6px;flex:none}
.bin-files{margin:0 12px;border-top:1px solid var(--border)}
.bin-row{display:grid;grid-template-columns:72px minmax(0,1fr) auto 22px;gap:8px;align-items:center;min-height:32px;font-size:12.5px;border-bottom:1px solid var(--border)}
.bin-row .r{display:flex;align-items:center;color:var(--muted);font-size:11.5px}
.bin-row .n{font-family:var(--mono);font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bin-row .s{color:var(--muted);font-size:11.5px;text-align:right;font-variant-numeric:tabular-nums}
.bin-row .x{width:24px;height:24px;border:0;background:none;color:var(--muted);border-radius:6px;cursor:pointer;font-size:15px;line-height:1;opacity:.55}.bin-row .x:hover{opacity:1;background:var(--bg2);color:var(--red)}
.bin-row.bad .r,.bin-row.bad .n{color:var(--red)}
.bin-caps{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px}
.cap{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--green-dim);color:var(--green)}
.cap.no{background:var(--bg2);color:var(--muted);font-weight:500;border:1px solid var(--border)}
.cap .tip{margin-left:2px;width:14px;height:14px;font-size:9px}
.bin-err{margin:10px 12px 0;padding:8px 10px;border-radius:8px;background:rgba(255,107,107,.12);color:var(--red);font-size:12.5px;line-height:1.4}
.bin-note{padding:0 12px 10px;font-size:12px;color:var(--muted);line-height:1.4}
.bin-more{border-top:1px solid var(--border)}
.bin-more summary{display:flex;align-items:center;padding:9px 12px;font-size:12px;color:var(--muted);cursor:pointer;list-style:none;user-select:none}.bin-more summary::-webkit-details-marker{display:none}
.bin-more summary::before{content:'';width:0;height:0;margin-right:8px;border:4px solid transparent;border-left:5px solid currentColor;border-right:0;transition:transform .12s}.bin-more[open] summary::before{transform:rotate(90deg)}
.bin-more summary:hover{color:var(--text)}
.bin-map{width:100%;table-layout:fixed;border-collapse:collapse;font-size:12px;margin-bottom:8px}.bin-map td{padding:4px 12px;border-top:1px solid var(--border);color:var(--text)}
.bin-map td:first-child{font-family:var(--mono);color:var(--text2);width:84px;white-space:nowrap}.bin-map td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bin-map td.s{width:64px}.bin-map td.s{text-align:right;color:var(--muted);white-space:nowrap}
/* a running action's form: what it was started with, not editable until it ends */
#form.locked{opacity:.72}#form.locked .bin,#form.locked .seg,#form.locked .adv summary{pointer-events:none}
/* Manage: files page (#/files/<scope>), settings card (manage.js) */
.fpage{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:12px;margin-top:12px;align-items:start}
.ftree{display:flex;flex-direction:column;gap:8px;padding:12px;position:sticky;top:0}.ftool{gap:6px}.ftool .btn{padding:0 9px}
.flist{max-height:calc(100vh - 250px);overflow:auto;margin:0 -6px;font-size:13px}
.fi{display:flex;align-items:center;gap:6px;height:28px;padding-right:8px;border-radius:7px;cursor:pointer;color:var(--text2);white-space:nowrap}
.fi:hover{background:var(--bg2)}.fi.on{background:var(--blue-dim);color:var(--text)}.fi.d{color:var(--text);font-weight:600}
.fi .fx{width:10px;color:var(--muted);font-size:10px}.fi .fn{flex:1;overflow:hidden;text-overflow:ellipsis}.fi .fs{color:var(--muted);font-size:11px}
.fed{display:flex;flex-direction:column;gap:10px;min-height:420px;padding:12px}.fhead{gap:6px}.fpath{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
textarea.code{flex:1;min-height:calc(100vh - 260px);width:100%;resize:vertical;background:var(--bg2);border:1px solid var(--border-strong);border-radius:10px;padding:12px;color:var(--text);
  font:12.5px/1.55 var(--mono);tab-size:2;white-space:pre;overflow:auto}
textarea.code:focus{outline:none;border-color:var(--blue)}
.fnext{border-top:1px solid var(--border);padding-top:8px}.fnext a{font-weight:600}
table.fh td{vertical-align:middle}table.fh code{font-size:12px}
.wsg{border-top:1px solid var(--border);padding:8px 0}.wsg summary{cursor:pointer;padding:4px 0}.wsr{margin:8px 0}.wsr input[readonly]{opacity:.7}
.ltab td:last-child{width:1%}
@media (max-width:760px){.fpage{grid-template-columns:1fr}.ftree{position:static}.flist{max-height:40vh}textarea.code{min-height:55vh}.ltab td:nth-child(3){display:none}}
.btn.qdel{color:var(--red)}.btn.qdel:hover{border-color:var(--red)}
.drop .zipdel{display:flex;align-items:center;gap:6px;color:var(--text2);white-space:nowrap;cursor:pointer}.drop .zipdel input{margin:0}
@media(max-width:600px){.drop{flex-wrap:wrap}}

/* Flasher page: Flash / Details per version, the Details dialog */
.fl .c-go{width:1%;white-space:nowrap;text-align:right}.fl .c-go .btn+.btn{margin-left:6px}
.fd-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}.fd-head b{font-size:15px}.fd-ver{font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:5px 9px;border-radius:8px;background:var(--bg2);border:1px solid var(--border)}
.fd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:14px}
.fd-sec{border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:12px}.fd-sec h4{margin:0 0 10px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.fd-sec h4 em{font-style:normal;font-weight:600;color:var(--muted);text-transform:none}.fd-sec>summary{cursor:pointer;list-style:none}.fd-sec>summary::-webkit-details-marker{display:none}.fd-sec>summary h4{margin:0}.fd-sec[open]>summary h4{margin-bottom:10px}
.fd-sec>summary h4::before{content:'';width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);margin-right:4px;transition:transform .12s}.fd-sec[open]>summary h4::before{transform:rotate(45deg)}
.fd-sec code{font:12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.fd-feat{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:center}.fd-chips{display:flex;flex-wrap:wrap;gap:6px}
.fd-chip{font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid var(--border);background:var(--bg2)}.fd-chip.in{background:var(--green-dim);border-color:transparent;color:var(--green)}.fd-chip.out{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent)}
.fd-libs,.fd-files{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;font-size:13px}.fd-libs code{color:var(--muted)}.fd-files span{font:12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.fd-files a{overflow-wrap:anywhere}
.fd-libs{grid-template-columns:repeat(2,auto 1fr)}
@media (max-width:760px){.fl td:nth-child(4){display:none}.fl .c-go{width:128px}.fd-grid{grid-template-columns:1fr}.fd-libs{grid-template-columns:auto 1fr}.fd-head{flex-wrap:wrap}.fl .c-go{display:table-cell}.fl .c-go .btn{padding:0 9px}}
.libt .c-gl{width:1%;white-space:nowrap;text-align:right}@media (max-width:760px){.libt td:nth-child(3),.libt th:nth-child(3){display:none}}
#bootwarn .warnbar{margin:10px 12px 0;padding:10px 14px;border-radius:10px}#bootwarn:empty{display:none}
#waitbox:empty{display:none}#waitbox .warnbar{margin:10px 12px 0;padding:10px 14px;border-radius:10px}
.secth.sub{margin:14px 0 8px 12px}.secth h3{margin:0;font-size:13px;font-weight:600;color:var(--muted)}
/* the yellow hints lie over the top of the terminal: nothing moves when they appear or go */
.log>.ovl{position:relative;height:0;z-index:5;flex:none}
.ovl #waitbox,.ovl #bootwarn{position:absolute;left:0;right:0;top:0}
.ovl .warnbar{background:#2a2410;box-shadow:0 6px 18px rgba(0,0,0,.45)}