:root{
  --brand:#19a974; --brand-2:#dcb55b;
  --ink-900:#080a0a; --ink-800:#101211; --surface:#171916; --surface-2:#22251f;
  --border:rgba(247,244,236,.12); --text:#f7f4ec; --muted:#aaa39a;
  --success:#39d39a; --warning:#dcb55b; --danger:#ff6b6b;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink-900);color:var(--text);
  font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.hidden{display:none!important}
.muted{color:var(--muted)} .small{font-size:12px}
.brand{font-weight:700;font-size:18px;letter-spacing:0;display:flex;align-items:center;gap:8px}
.brand .dot{width:12px;height:12px;border-radius:4px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 0 18px rgba(25,169,116,.4)}
.tag{font-size:10px;font-weight:700;color:var(--success);border:1px solid var(--border);
  border-radius:6px;padding:2px 6px;margin-left:4px}

.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;
  border-bottom:1px solid var(--border);background:rgba(16,18,17,.9);position:sticky;top:0;z-index:5;backdrop-filter:blur(14px)}
.top-right{display:flex;align-items:center;gap:12px}
.pill{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;
  border:1px solid var(--border);color:var(--muted)}
.pill.ok{color:var(--success);border-color:rgba(45,212,167,.4)}
.pill.err{color:var(--danger);border-color:rgba(255,92,92,.4)}
.ghost{background:transparent;color:var(--muted);border:1px solid var(--border);
  border-radius:8px;padding:6px 12px;cursor:pointer}
.ghost:hover{color:var(--text);border-color:var(--brand)}

.wrap{max-width:1200px;margin:0 auto;padding:22px}
.grid{display:grid;gap:14px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:18px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;
  transition:border-color .2s,transform .2s}
.card:hover{border-color:rgba(25,169,116,.55);transform:translateY(-2px)}
.card .label,.label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.card .value{font-size:28px;font-weight:700;margin-top:6px;letter-spacing:0}
.card .sub{font-size:12px;color:var(--muted);margin-top:4px}
.bar{height:6px;border-radius:99px;background:var(--surface-2);margin-top:10px;overflow:hidden}
.bar>i{display:block;height:100%;border-radius:99px;background:var(--brand);transition:width .4s,background .4s}
.v-warning{color:var(--warning)} .v-danger{color:var(--danger)} .v-ok{color:var(--success)}
.bar>i.warning{background:var(--warning)} .bar>i.danger{background:var(--danger)}

.panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.panel-head h2{margin:0;font-size:16px}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--border)}
td{padding:10px;border-bottom:1px solid var(--surface-2)}
tr:hover td{background:var(--surface-2)}
.empty{color:var(--muted);text-align:center;padding:22px}
.tiny-action{border:1px solid var(--border);border-radius:9px;background:transparent;color:var(--text);
  cursor:pointer;font-size:12px;font-weight:700;padding:6px 10px}
.tiny-action:hover{border-color:rgba(25,169,116,.55);background:rgba(25,169,116,.08)}
.workflow-detail{margin-top:14px;border-top:1px solid var(--border);padding-top:16px}
.workflow-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.workflow-head h3{margin:4px 0 0;font-size:16px}
.workflow-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.node-card{border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.025);padding:13px}
.node-card.disabled{opacity:.58}
.node-title{font-weight:800}
.node-type{margin-top:6px;color:var(--success);font-size:12px;word-break:break-word}
.node-meta{margin-top:8px;color:var(--muted);font-size:11px}
.connections{margin-top:16px;border:1px solid var(--border);border-radius:14px;padding:13px}
.connection-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--border);
  padding:9px 0 0;margin-top:9px;font-size:12px}
.connection-line span{color:var(--success)}
.connection-line em{color:var(--muted);font-style:normal}
.notice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-bottom:14px}
.notice{border:1px solid var(--border);border-radius:12px;background:rgba(25,169,116,.055);
  color:var(--muted);padding:12px;font-size:12px}
.split-forms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.mini-form{border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.025);
  padding:14px;display:flex;flex-direction:column;gap:10px}
.mini-form h3{margin:0 0 2px;font-size:14px}
.mini-form input,.mini-form select,.mini-form textarea{width:100%;background:var(--ink-900);
  border:1px solid var(--border);color:var(--text);border-radius:10px;padding:10px 11px;font:inherit}
.mini-form textarea{height:70px;resize:vertical}
.mini-form input:focus,.mini-form select:focus,.mini-form textarea:focus{outline:none;border-color:var(--brand)}
.mini-form button{background:var(--text);color:var(--ink-900);border:none;border-radius:10px;
  padding:10px;font-weight:800;cursor:pointer}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.compact-tables{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.compact-tables table{min-width:420px}

.login-overlay{position:fixed;inset:0;background:
  radial-gradient(circle at 24% 20%,rgba(25,169,116,.16),transparent 34%),
  radial-gradient(circle at 72% 18%,rgba(220,181,91,.12),transparent 30%),
  rgba(8,10,10,.94);
  display:flex;align-items:center;justify-content:center;z-index:50;backdrop-filter:blur(10px);padding:20px}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:28px;width:min(100%,360px);display:flex;flex-direction:column;gap:12px;box-shadow:0 30px 90px rgba(0,0,0,.38)}
.login-card.wide{width:min(100%,560px)}
.login-card input,.login-card textarea{background:var(--ink-900);border:1px solid var(--border);color:var(--text);
  border-radius:10px;padding:11px 13px;font-size:14px}
.password-field{position:relative;display:flex}
.password-field input{width:100%;padding-right:46px}
.login-card .password-toggle{position:absolute;right:7px;top:50%;display:grid;height:32px;width:32px;
  transform:translateY(-50%);place-items:center;border:0;background:transparent;color:var(--muted);
  padding:0;border-radius:9px}
.login-card .password-toggle:hover,.login-card .password-toggle:focus-visible{background:rgba(247,244,236,.08);color:var(--text);filter:none;outline:none}
.eye-icon{position:relative;display:block;width:18px;height:12px;border:1.8px solid currentColor;border-radius:50% 50% 45% 45%/65% 65% 45% 45%;
  transform:rotate(-8deg)}
.eye-icon::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;
  background:currentColor;transform:translate(-50%,-50%)}
.password-toggle.is-visible .eye-icon::before{content:"";position:absolute;left:-2px;right:-2px;top:5px;height:2px;
  background:var(--danger);transform:rotate(42deg);border-radius:99px}
.login-card textarea{height:86px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}
.login-card input:focus,.login-card textarea:focus{outline:none;border-color:var(--brand)}
.login-card button{background:var(--text);color:var(--ink-900);border:none;border-radius:10px;
  padding:11px;font-weight:700;cursor:pointer}
.login-card button:hover{filter:brightness(.92)}
.login-card .link-button{background:transparent;color:var(--muted);border:none;padding:3px 0;text-decoration:underline;text-underline-offset:4px}
.login-card .link-button:hover{color:var(--text);filter:none}
.secret{display:block;background:var(--ink-900);border:1px solid var(--border);border-radius:10px;
  padding:12px;color:var(--success);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;word-break:break-all}
.turnstile-box{display:flex;justify-content:center;min-height:65px;padding:4px 0}
.err{color:var(--danger);font-size:13px}

@media (max-width: 640px){
  .topbar{align-items:flex-start;gap:10px;flex-direction:column}
  .top-right{width:100%;justify-content:space-between}
  .wrap{padding:14px}
  .split-forms,.compact-tables{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}