/* WrapClaw — tema hacker/Matrix (importado de claude.ai/design "WrapClaw Dashboard"). */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg:#05080a; --bg-alt:#0a0e0a; --panel:#0b110d; --panel-hover:#0f1a11; --inset:#060a07;
  --green:#00ff41; --green-bright:#39ff14; --green-dim:#1f8a3a; --green-mute:#0f2410; --green-line:#1a3a1a;
  --text:#c8f7d4; --text-dim:#6fae7e; --text-faint:#3c5e43;
  --up:#00ff41; --warn:#ffb000; --down:#ff5555; --info:#36c5ff;
  --glow:0 0 6px rgba(0,255,65,.45); --glow-strong:0 0 12px rgba(0,255,65,.6); --glow-down:0 0 6px rgba(255,85,85,.5);
  --font:"JetBrains Mono","IBM Plex Mono","Courier New",monospace;
  --fs-xs:11px; --fs-sm:13px; --fs-base:14px; --fs-lg:18px; --fs-xl:28px;
  --tracking:.08em;
  --radius:4px; --radius-pill:999px; --border:1px solid var(--green-line);
  --maxw:1120px; --transition:120ms ease; --scanline:rgba(0,255,65,.025);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:var(--bg); color:var(--text); font-family:var(--font); font-size:var(--fs-base); line-height:1.5; }
/* subtle CRT scanline overlay */
body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:50;
  background:repeating-linear-gradient(0deg,transparent 0,transparent 2px,var(--scanline) 3px,transparent 4px); mix-blend-mode:screen; }
@keyframes wc-blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes wc-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--inset); }
::-webkit-scrollbar-thumb{ background:var(--green-mute); border:1px solid var(--green-line); }
::-webkit-scrollbar-thumb:hover{ background:var(--green-dim); }
::selection{ background:var(--green); color:#000; }
a{ color:var(--info); text-decoration:none; }
a:hover{ color:var(--green); }
code{ color:var(--green-bright); font-size:.9em; }
input,select,button,textarea{ font-family:var(--font); }

/* ---------- header ---------- */
header{ position:relative; border-bottom:var(--border); background:linear-gradient(180deg,var(--bg-alt),var(--bg)); }
.head-in{ max-width:var(--maxw); margin:0 auto; padding:15px 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.brand{ display:flex; align-items:baseline; gap:9px; }
.brand .lob{ font-size:20px; }
.brand b{ font-size:var(--fs-xl); font-weight:700; letter-spacing:.04em; color:var(--green); text-shadow:var(--glow); }
.brand .sl{ color:var(--text-faint); font-size:var(--fs-lg); }
.brand .seg{ font-size:var(--fs-lg); letter-spacing:var(--tracking); color:var(--text-dim); text-transform:uppercase; }
.brand .inst{ font-size:var(--fs-lg); color:var(--green-bright); }
.cursor{ color:var(--green-bright); animation:wc-blink 1s step-end infinite; text-shadow:var(--glow); }
.head-links{ display:flex; align-items:center; gap:16px; font-size:var(--fs-sm); }
.head-links a{ color:var(--text-dim); letter-spacing:.04em; }
.head-links a:hover{ color:var(--green); }
/* legacy wizard header subtitle */
header span.sub{ color:var(--text-dim); font-size:.85rem; }

/* ---------- dashboard shell (sidebar + main) ---------- */
.wc-body{ display:flex; max-width:var(--maxw); margin:0 auto; min-height:calc(100vh - 62px); }
.wc-nav{ width:200px; flex-shrink:0; border-right:var(--border); padding:14px 10px; display:flex; flex-direction:column; gap:4px; }
.wc-nav a{ display:flex; align-items:center; gap:10px; background:transparent; border:1px solid transparent; border-left:2px solid transparent;
  color:var(--text-dim); padding:10px 12px; border-radius:var(--radius); font-size:var(--fs-sm); letter-spacing:.04em;
  text-transform:uppercase; white-space:nowrap; transition:var(--transition); }
.wc-nav a:hover{ background:var(--panel-hover); color:var(--text); }
.wc-nav a.on{ background:var(--green-mute); border-color:var(--green-line); border-left-color:var(--green); color:var(--green); }
.wc-nav .ic{ font-size:var(--fs-xs); opacity:.8; }
.wc-foot{ margin-top:auto; padding:12px; color:var(--text-faint); font-size:var(--fs-xs); line-height:1.7; }
.wc-foot .up{ color:var(--up); } .wc-foot .down{ color:var(--down); }
.wc-main{ flex:1; min-width:0; padding:22px 18px; display:flex; flex-direction:column; gap:18px; }

.sec-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.sec-head h1{ margin:0; font-size:var(--fs-lg); letter-spacing:var(--tracking); text-transform:uppercase; color:var(--green); text-shadow:var(--glow); }
.sec-head .note{ color:var(--text-faint); font-size:var(--fs-xs); }
.sec-head .spacer{ flex:1; }

/* ---------- panels / cards ---------- */
.panel{ background:var(--panel); border:var(--border); border-radius:var(--radius); }
.panel.pad{ padding:18px; }

/* ---------- gateway control ---------- */
.gw{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:24px; }
.gw-l{ display:flex; align-items:center; gap:18px; }
.gw-dot{ font-size:36px; }
.gw-dot.on{ color:var(--up); text-shadow:0 0 14px var(--up); animation:wc-pulse 2.2s ease-in-out infinite; }
.gw-dot.off{ color:var(--down); text-shadow:var(--glow-down); }
.gw-big{ font-size:28px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.gw-big.on{ color:var(--up); } .gw-big.off{ color:var(--down); }
.gw-sub{ color:var(--text-faint); font-size:var(--fs-sm); margin-top:4px; }
.gw-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.gw-actions form{ margin:0; }
.gw-actions button{ margin:0; padding:11px 18px; border-radius:var(--radius); font-size:var(--fs-base); letter-spacing:.04em; cursor:pointer; background:var(--inset); }
.b-on{ background:var(--green-mute); border:1px solid var(--up); color:var(--up); text-shadow:var(--glow); }
.b-on:hover{ background:var(--up); color:#000; box-shadow:var(--glow-strong); }
.b-off{ border:1px solid var(--down); color:var(--down); }
.b-off:hover{ background:var(--down); color:#000; box-shadow:var(--glow-down); }
.b-acc{ border:1px solid var(--warn); color:var(--warn); }
.b-acc:hover{ box-shadow:0 0 10px rgba(255,176,0,.5); }

/* events log (box-drawing header + terminal body) */
.boxhead{ padding:11px 14px; border-bottom:var(--border); color:var(--green); letter-spacing:var(--tracking); font-size:var(--fs-sm); text-transform:uppercase; }
.evlog{ margin:0; background:var(--inset); padding:14px; font-size:var(--fs-sm); line-height:1.7; max-height:240px; overflow:auto; white-space:pre-wrap; word-break:break-word; color:var(--text-dim); }
.evlog .t{ color:var(--text-faint); }

/* ---------- agents ---------- */
.agent-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.agent-card{ background:var(--panel); border:var(--border); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:12px; transition:var(--transition); }
.agent-card:hover{ background:var(--panel-hover); box-shadow:var(--glow); }
.agent-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.agent-top .nm{ color:var(--green); font-size:var(--fs-base); font-weight:500; }
.agent-role{ color:var(--text-dim); font-size:var(--fs-sm); line-height:1.6; }
.kv{ border-top:1px solid var(--green-mute); padding-top:12px; display:flex; flex-direction:column; gap:7px; font-size:var(--fs-sm); }
.kv .r{ display:flex; justify-content:space-between; }
.kv .k{ color:var(--text-faint); }
.kv .v{ color:var(--info); }
.kv .v.bot{ color:var(--green-dim); } .kv .v.nobot{ color:var(--text-faint); }

/* ---------- pills ---------- */
.pill{ display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border-radius:var(--radius-pill); font-size:var(--fs-xs); letter-spacing:.06em; border:1px solid var(--green-mute); color:var(--text-faint); background:var(--inset); }
.pill .d{ font-size:.9em; }
.pill.ok{ border-color:var(--green-line); color:var(--up); background:var(--green-mute); }
.pill.ok .d{ text-shadow:0 0 6px var(--up); }
.pill.warn{ border-color:rgba(255,176,0,.35); color:var(--warn); background:rgba(255,176,0,.06); }
.pill.down{ border-color:rgba(255,85,85,.35); color:var(--down); background:rgba(255,85,85,.06); }

/* ---------- connections ---------- */
.conn-group{ display:flex; flex-direction:column; gap:10px; margin-bottom:6px; }
.conn-group h4{ margin:0; color:var(--text-dim); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.1em; font-weight:500; }
.conn-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.conn-app{ background:var(--panel); border:var(--border); border-radius:var(--radius); padding:12px 13px; display:flex; align-items:center; gap:11px; }
.conn-app:hover{ background:var(--panel-hover); }
.app-ic{ flex-shrink:0; width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:var(--inset); border:1px solid var(--green-mute); border-radius:var(--radius); color:var(--text-dim); font-size:var(--fs-xs); }
.conn-app.active .app-ic{ border-color:var(--green-line); color:var(--up); }
.conn-app .nm{ flex:1; min-width:0; }
.conn-app .nm .n1{ color:var(--text); font-size:var(--fs-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conn-app .nm .n2{ font-size:var(--fs-xs); letter-spacing:.05em; margin-top:2px; color:var(--text-faint); }
.conn-app.active .nm .n2{ color:var(--up); }
.conn-app .conn-rm{ margin:0; padding:3px 9px; flex-shrink:0; background:var(--inset); border:1px solid var(--green-mute); color:var(--text-faint); border-radius:var(--radius); font-size:var(--fs-xs); cursor:pointer; text-shadow:none; }
.conn-app .conn-rm:hover{ color:var(--down); border-color:var(--down); background:var(--inset); box-shadow:none; }

/* ---------- routines / cron table ---------- */
.cron-table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); min-width:680px; }
.cron-table th{ text-align:left; padding:10px 14px; border-bottom:var(--border); color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; font-size:var(--fs-xs); font-weight:500; }
.cron-table td{ padding:12px 14px; border-bottom:1px solid var(--green-mute); vertical-align:top; }
.cron-table tr:hover td{ background:var(--panel-hover); }
.cron-table .nm{ color:var(--green); font-weight:500; }
.cron-table .sub{ color:var(--text-faint); font-size:var(--fs-xs); margin-top:3px; }
.empty{ padding:30px 14px; text-align:center; color:var(--text-faint); font-size:var(--fs-sm); }
.empty .cursor{ }

/* ---------- legacy wizard pages (setup) ---------- */
main{ max-width:640px; margin:0 auto; padding:1.2rem 1.5rem 4rem; }
main.wide{ max-width:var(--maxw); }
h1{ font-size:1.5rem; letter-spacing:.02em; } h2{ font-size:1.05rem; margin-top:1.8rem; color:var(--green-dim); text-transform:uppercase; letter-spacing:.05em; }
.steps{ display:flex; gap:.4rem; flex-wrap:wrap; list-style:none; margin:1rem 1.5rem; padding:0; font-size:.8rem; max-width:var(--maxw); }
.steps li{ color:var(--text-faint); padding:.2rem .6rem; border-radius:var(--radius); background:var(--inset); border:1px solid var(--green-mute); letter-spacing:.04em; }
.steps li.on{ color:var(--green); background:var(--green-mute); border-color:var(--green-line); text-shadow:var(--glow); }
.steps li.done{ color:var(--green-dim); }
pre{ background:var(--inset); border:var(--border); border-radius:var(--radius); padding:.8rem 1rem; overflow:auto; }
code.c{ background:var(--inset); border:1px solid var(--green-mute); border-radius:var(--radius); padding:.1rem .35rem; }
label{ display:block; margin:1.1rem 0 .2rem; font-weight:500; color:var(--text-dim); font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; }
input,select{ width:100%; padding:.6rem .7rem; margin-top:.3rem; background:var(--inset); border:var(--border); border-radius:var(--radius); color:var(--text); font-size:.95rem; }
input:focus,select:focus{ outline:none; border-color:var(--green); box-shadow:var(--glow); }
button,.btn{ display:inline-block; margin-top:1.4rem; padding:.65rem 1.2rem; border:1px solid var(--green); border-radius:var(--radius); background:var(--green-mute); color:var(--green); font-size:.95rem; font-weight:500; cursor:pointer; text-decoration:none; letter-spacing:.04em; text-shadow:var(--glow); transition:var(--transition); }
button:hover,.btn:hover{ background:var(--green); color:#000; box-shadow:var(--glow-strong); }
.muted{ color:var(--text-faint); font-size:.9rem; }
.guide{ padding-left:1.2rem; } .guide li{ margin:.4rem 0; }
.flash{ padding:.7rem 1rem; border-radius:var(--radius); margin:1rem 0; border:1px solid transparent; }
.flash.err{ background:rgba(255,85,85,.08); border-color:rgba(255,85,85,.35); color:#ffb4a8; }
.flash.ok{ background:var(--green-mute); border-color:var(--green-line); color:var(--up); }
.badge{ background:var(--inset); color:var(--text-faint); padding:.1rem .5rem; border-radius:var(--radius-pill); font-size:.75rem; border:1px solid var(--green-mute); }
.summary{ list-style:none; padding:0; } .summary li{ padding:.3rem 0; border-bottom:1px solid var(--green-mute); }
.cards{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.2rem 0; }
.card{ background:var(--panel); border:var(--border); border-radius:var(--radius); padding:1rem 1.2rem; }
.card h3{ margin:.2rem 0 .6rem; color:var(--green); }
.ok-card{ border-color:var(--green-line); }
.checks{ display:grid; gap:.45rem; margin:1rem 0; }
.check{ display:flex; align-items:center; gap:.6rem; background:var(--panel); border:var(--border); border-radius:var(--radius); padding:.55rem .8rem; cursor:pointer; font-weight:400; }
.check:hover{ background:var(--panel-hover); }
.check input{ width:auto; margin:0; }
.grp{ margin:1.1rem 0; }
.grp-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; }
.grp-head h3{ margin:0; font-size:1rem; color:var(--green); }
.tag{ background:var(--green-mute); color:var(--up); font-size:.65rem; padding:.12rem .5rem; border-radius:var(--radius-pill); vertical-align:middle; border:1px solid var(--green-line); }
.selall{ color:var(--text-faint); font-size:.8rem; display:flex; align-items:center; gap:.35rem; cursor:pointer; font-weight:400; text-transform:none; margin:0; }
.selall input{ width:auto; margin:0; }
.row{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.6rem 0; }
.row form{ margin:0; }

@media(max-width:780px){
  .wc-body{ flex-direction:column; }
  .wc-nav{ width:auto; flex-direction:row; overflow-x:auto; border-right:none; border-bottom:var(--border); }
  .wc-foot{ display:none; }
  .agent-grid,.conn-grid,.cards{ grid-template-columns:1fr; }
}