/* Layout real da aplicacao, nas medidas dos mockups. */
.shell{display:flex;flex-wrap:wrap;align-items:stretch;min-height:100vh}
.side{flex:0 1 232px;min-width:204px;background:var(--ink);padding:20px 12px 18px 20px;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;padding:0 2px 4px;color:var(--oi)}
.brand:hover{color:var(--oi)}
.brand b{display:block;color:var(--oi);font-size:15px;font-weight:700;letter-spacing:-.025em;line-height:1.1}
.brand .mono{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--oi3)}
.brand-ic{width:32px;height:32px;border-radius:10px;background:var(--lime);display:grid;place-items:center;flex:none}
.brand-ic svg{width:17px;height:17px;stroke:var(--ink);stroke-width:1.9;fill:none;stroke-linecap:round}
.navi .n:empty{display:none}
.side-fill{flex:1 1 20px;min-height:18px}
.worker{border-radius:14px;background:var(--ink1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);padding:13px}
.worker-h{display:flex;align-items:center;gap:7px}
.worker-h .mono{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--oi2)}
.worker-b{font-family:"Geist Mono",ui-monospace,monospace;font-size:10.5px;color:var(--oi3);line-height:1.75;margin-top:7px}
.worker-b b{color:var(--oi);font-weight:500}
.livedot.off{background:var(--oi3);box-shadow:none;animation:none}
.livedot.bad{background:#FF9A8F;box-shadow:none;animation:none}
.main{flex:999 1 560px;min-width:0;padding:22px 26px 36px}
.crumb{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--tx3)}
.crumb svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.ph{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.ph h1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.04em;line-height:1.15}
.ph p{margin:5px 0 0;font-size:12.5px;color:var(--tx3)}
.ph .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.row{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;align-items:flex-start}
.grow{flex:999 1 430px;min-width:min(380px,100%)}
.side-col{flex:0 1 300px;min-width:min(272px,100%)}
.pad{padding:19px 20px}
.note{margin-top:16px;display:flex;gap:12px;border-radius:16px;padding:15px 17px;flex-wrap:wrap}
.note svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;flex:none;margin-top:1px}
.note>div>b:first-child{display:block;font-size:13px;font-weight:700}
.note p b{font-weight:700}
.note p{margin:4px 0 0;font-size:12.5px;line-height:1.55}
.note.warn{background:#FFFBF0;box-shadow:inset 0 0 0 1px rgba(138,90,0,.22);color:#6B4600}
.note.bad{background:var(--negbg);box-shadow:inset 0 0 0 1px rgba(164,35,26,.22);color:var(--neg)}
.note.ok{background:var(--limesoft);box-shadow:inset 0 0 0 1px rgba(150,190,0,.35);color:var(--limeink)}
.note.ink{background:var(--ink);color:var(--oi2)}
.note.ink b{color:var(--oi)}
.note.ink .gh{color:var(--oi)}
.note.ink svg{color:var(--lime)}
.form{display:grid;gap:12px;max-width:560px}
.form label{display:grid;gap:5px;font-size:12px;font-weight:600;color:var(--tx2)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.inp{height:38px;border:0;border-radius:11px;padding:0 12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font:inherit;font-size:13px;color:var(--tx)}
.inp:focus{outline:2px solid var(--ink);outline-offset:1px}
textarea.inp{height:auto;padding:10px 12px;line-height:1.5}
.hint{font-size:11.5px;color:var(--tx3);font-weight:500}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;padding:0 10px 8px}
.tbl td{padding:10px;border-bottom:1px solid var(--line2);font-size:12.5px;vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl a{font-weight:700}
.scroll{overflow-x:auto}
.empty{padding:28px;text-align:center;color:var(--tx3);font-size:12.5px}
.inline{display:inline}
.cmd{font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;background:var(--ink);color:var(--lime);padding:9px 11px;border-radius:9px;display:block;overflow-x:auto;white-space:nowrap}
@media (max-width:720px){
  .side{flex:1 1 100%;padding:14px 16px}
  .side nav{display:flex;flex-wrap:wrap;gap:4px}
  .side .inkml,.side-fill,.worker{display:none}
  .navi.on::before{display:none}
  .main{padding:18px 16px 30px}
  .form .two{grid-template-columns:1fr}
}
.ta,.inp,summary.btn{box-sizing:border-box}
summary.btn::-webkit-details-marker{display:none}