/* =========================================================
   TGMGR Admin Panel — app.css (modern, same palette, same classes)
   Drop-in replacement (keeps existing HTML intact)
   ========================================================= */

/* ---------- Palette (KEEP) ---------- */
:root{
  --bg:#0b1220;
  --card:#111a2c;
  --text:#e7eefc;
  --muted:#9aa8c7;
  --border:#1e2a44;
  --primary:#4f7cff;
  --danger:#ff4f5e;
  --ok:#1fbf75;
  --warn:#ffb020;
  --mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* new helpers (don’t break anything) */
  --ring: rgba(79,124,255,.22);
  --shadow: 0 18px 50px rgba(0,0,0,.38);
  --shadow-sm: 0 10px 28px rgba(0,0,0,.28);
  --glass: rgba(17,26,44,.62);
  --glass-2: rgba(6,10,20,.52);
  --glass-3: rgba(11,18,32,.66);
  --radius: 16px;
  --radius-sm: 12px;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font:14px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 18% 5%, rgba(79,124,255,.16), transparent 62%),
    radial-gradient(900px 500px at 82% 0%, rgba(255,176,32,.10), transparent 58%),
    radial-gradient(900px 600px at 80% 95%, rgba(31,191,117,.08), transparent 62%),
    linear-gradient(180deg, var(--bg), #060a14 70%);
  overflow-x:hidden;
}


a{ color:var(--text); text-decoration:none; }
a:hover{ text-decoration:none; color:#fff; }

::selection{ background: rgba(79,124,255,.25); }

/* ---------- Layout wrapper ---------- */
.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:18px;
}

/* ---------- Topbar / Brand / Nav ---------- */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  background: rgba(7,11,20,.72);
  border-bottom: 1px solid rgba(30,42,68,.85);
  backdrop-filter: blur(14px);
}
.topbar .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{ display:flex; flex-direction:column; gap:2px; }
.brand__title{
  font-weight:800;
  letter-spacing:.2px;
  font-size:15px;
  line-height:1.15;
  background: linear-gradient(90deg, #e7eefc, rgba(79,124,255,.95));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.brand__sub{
  font-size:12px;
  color: rgba(154,168,199,.92);
}

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
}

.nav__link{
  padding:8px 12px;
  border:1px solid rgba(30,42,68,.70);
  border-radius: 999px;
  color: rgba(154,168,199,.95);
  background: rgba(6,10,20,.20);
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
  position:relative;
  font-weight:700;
  letter-spacing:.1px;
}
.nav__link:hover{
  border-color: rgba(79,124,255,.55);
  background: rgba(79,124,255,.10);
  color:#fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
.nav__link--muted{ color: rgba(154,168,199,.85); }

/* ---------- Cards / Headings ---------- */
.card{
  background: linear-gradient(180deg, rgba(17,26,44,.72), rgba(11,18,32,.62));
  border: 1px solid rgba(30,42,68,.85);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:-2px -2px auto -2px;
  height: 54px;
  background: linear-gradient(90deg, rgba(79,124,255,.18), rgba(255,176,32,.08), rgba(31,191,117,.08));
  filter: blur(14px);
  opacity:.55;
  pointer-events:none;
}
.card:hover{
  box-shadow: var(--shadow);
  border-color: rgba(79,124,255,.28);
}
.card + .card{ margin-top:16px; }
.card--sub{
  margin-top:12px;
  background: linear-gradient(180deg, rgba(11,18,32,.62), rgba(6,10,20,.48));
}

h2{
  margin:0 0 10px;
  font-size:18px;
  font-weight:900;
  letter-spacing:-0.2px;
}
h3{
  margin:0 0 10px;
  font-size:14px;
  font-weight:850;
  color: rgba(231,238,252,.92);
}

.muted{ color: rgba(154,168,199,.92); margin:6px 0 0; }
.hint{ font-size:12px; color: rgba(154,168,199,.88); margin-top:6px; }
.note{
  margin-top:12px;
  padding:10px 12px;
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(30,42,68,.90);
  color: rgba(154,168,199,.92);
  background: rgba(6,10,20,.18);
}
.sep{
  border:none;
  border-top: 1px solid rgba(30,42,68,.85);
  margin: 14px 0;
}

/* ---------- Grids ---------- */
.grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:16px;
}
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 920px){
  .grid{ grid-template-columns:1fr; }
  .grid2{ grid-template-columns:1fr; }
}

/* ---------- Action stacks ---------- */
.actions{ display:flex; flex-direction:column; gap:10px; }
.row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.stack{ display:flex; flex-direction:column; gap:12px; margin-top:10px; }

/* ---------- Form fields ---------- */
.field{ display:flex; flex-direction:column; gap:6px; }
.field > span{
  font-size:12px;
  color: rgba(154,168,199,.90);
  font-weight:700;
  letter-spacing:.1px;
}

.field input,
.field textarea,
.field select{
  width:100%;
  padding:10px 12px;
  border: 1px solid rgba(30,42,68,.90);
  border-radius: 14px;
  background: rgba(6,10,20,.40);
  color: var(--text);
  outline:none;
  transition: box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.field textarea{ min-height:90px; resize: vertical; }
.field input[type="file"]{ padding:10px; }

.field input:focus,
.field textarea:focus,
.field select:focus{
  border-color: rgba(79,124,255,.65);
  box-shadow: 0 0 0 4px var(--ring);
  background: rgba(6,10,20,.52);
}

.field--check{
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  border: 1px solid rgba(30,42,68,.90);
  border-radius: 14px;
  padding:10px 12px;
  background: rgba(6,10,20,.36);
}
.field--check > span{ margin:0; }
.field--check input{ width:auto; accent-color: var(--primary); }

/* ---------- Buttons (same classes) ---------- */
.btn{
  border: 1px solid rgba(30,42,68,.90);
  background: linear-gradient(180deg, rgba(6,10,20,.55), rgba(6,10,20,.35));
  color: var(--text);
  padding:10px 14px;
  border-radius: 14px;
  cursor:pointer;
  font-weight:850;
  letter-spacing:.12px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease, background .15s ease;
  user-select:none;
}
.btn:hover{
  border-color: rgba(79,124,255,.35);
  box-shadow: 0 12px 28px rgba(0,0,0,.26);
  transform: translateY(-1px);
}
.btn:active{ transform: translateY(0); }

.btn--primary{
  background: linear-gradient(180deg, rgba(79,124,255,.96), rgba(79,124,255,.62));
  border-color: rgba(79,124,255,.62);
  box-shadow: 0 10px 26px rgba(79,124,255,.18);
}
.btn--primary:hover{
  filter: brightness(1.05);
  box-shadow: 0 0 0 4px rgba(79,124,255,.12), 0 16px 38px rgba(0,0,0,.30);
}

.btn--danger{
  background: linear-gradient(180deg, rgba(255,79,94,.96), rgba(255,79,94,.62));
  border-color: rgba(255,79,94,.60);
  box-shadow: 0 10px 26px rgba(255,79,94,.16);
}
.btn--danger:hover{
  filter: brightness(1.04);
  box-shadow: 0 0 0 4px rgba(255,79,94,.10), 0 16px 38px rgba(0,0,0,.30);
}

/* ---------- Flash messages ---------- */
.flash{
  margin:12px 0 0;
  padding:10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(30,42,68,.90);
  background: rgba(6,10,20,.30);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.flash--success{
  border-color: rgba(31,191,117,.45);
  background: rgba(31,191,117,.10);
}
.flash--error{
  border-color: rgba(255,79,94,.45);
  background: rgba(255,79,94,.10);
}
.flash--info{
  border-color: rgba(79,124,255,.45);
  background: rgba(79,124,255,.10);
}

/* ---------- Key/value rows ---------- */
.kv{ margin-top:10px; }
.kv__row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:9px 0;
  border-bottom: 1px solid rgba(30,42,68,.60);
}
.kv__row:last-child{ border-bottom:none; }
.kv__k{ color: rgba(154,168,199,.92); font-weight:700; }
.kv__v{ font-weight:900; letter-spacing:.1px; }

/* ---------- Tables ---------- */
.tablewrap{
  overflow:auto;
  border: 1px solid rgba(30,42,68,.90);
  border-radius: 14px;
  margin-top:10px;
  background: rgba(6,10,20,.18);
}

.table{
  width:100%;
  border-collapse: collapse;
  min-width:980px;
}
.table th,
.table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(30,42,68,.55);
  text-align:left;
  vertical-align:top;
  white-space:nowrap;
}
.table td{ white-space:normal; }

.table thead th{
  position: sticky;
  top: 0;
  background: rgba(11,18,32,.92);
  backdrop-filter: blur(10px);
  z-index: 1;
  font-weight:900;
  color: rgba(154,168,199,.95);
  letter-spacing:.14px;
}
.table tbody tr:hover{
  background: rgba(79,124,255,.08);
}

/* ---------- Status pills ---------- */
.pill{
  display:inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(30,42,68,.90);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12px;
  color: rgba(154,168,199,.95);
  background: rgba(6,10,20,.24);
}
.pill--running{ color: rgba(79,124,255,.98); border-color: rgba(79,124,255,.35); background: rgba(79,124,255,.10); }
.pill--waiting{ color: rgba(255,176,32,.98); border-color: rgba(255,176,32,.35); background: rgba(255,176,32,.09); }
.pill--done{ color: rgba(31,191,117,.98); border-color: rgba(31,191,117,.35); background: rgba(31,191,117,.09); }
.pill--error{ color: rgba(255,79,94,.98); border-color: rgba(255,79,94,.35); background: rgba(255,79,94,.09); }
.pill--paused{ color: rgba(255,176,32,.98); border-color: rgba(255,176,32,.35); background: rgba(255,176,32,.09); }
.pill--stopped{ color: rgba(154,168,199,.95); }
.pill--waiting{}

/* ---------- Logs ---------- */
.log{
  margin:10px 0 0;
  padding:12px;
  border: 1px solid rgba(30,42,68,.90);
  border-radius: 14px;
  background: rgba(6,10,20,.44);
  overflow:auto;
  max-height:520px;
  font-family: var(--mono);
  font-size:12px;
  line-height:1.5;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.log--small{ max-height: 260px; }

.mono{ font-family: var(--mono); }

/* ---------- Lists ---------- */
.list{ margin:8px 0 0; padding-left:18px; }
.list li{ margin: 4px 0; color: rgba(231,238,252,.92); }

/* ---------- Responsive polish ---------- */
@media (max-width: 640px){
  .wrap{ padding: 14px; }
  .nav{ gap:8px; }
  .nav__link{ padding: 8px 10px; }
  .card{ padding: 16px; }
  .table{ min-width: 860px; }
}
.nav__link--active{
  color:#fff !important;
  background: linear-gradient(180deg, rgba(79,124,255,.30), rgba(79,124,255,.12)) !important;
  border-color: rgba(79,124,255,.60) !important;
  box-shadow: 0 0 0 4px rgba(79,124,255,.12), 0 12px 32px rgba(0,0,0,.35) !important;
}
/* =========================================================
   CYBERPUNK OVERLAY (drop-in, safe, no layout break)
   Put this at the END of app.css
   ========================================================= */

:root{
  /* keep your base palette; add neon accents */
  --cp-cyan:#20e3ff;
  --cp-pink:#ff3df2;
  --cp-violet:#7c5cff;
  --cp-lime:#35ff9a;
  --cp-amber:#ffb020;

  --cp-glow-cyan: 0 0 18px rgba(32,227,255,.28), 0 0 44px rgba(32,227,255,.10);
  --cp-glow-pink: 0 0 18px rgba(255,61,242,.24), 0 0 44px rgba(255,61,242,.09);
  --cp-glow-violet:0 0 18px rgba(124,92,255,.22), 0 0 44px rgba(124,92,255,.08);

  --cp-glass: rgba(10,16,28,.58);
  --cp-glass-2: rgba(6,10,18,.46);
  --cp-line: rgba(255,255,255,.10);
  --cp-line2: rgba(255,255,255,.06);
}

/* subtle scanlines / grain, no JS */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.045), rgba(255,255,255,0) 18%),
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.20) 0px,
      rgba(0,0,0,.20) 2px,
      rgba(0,0,0,0) 4px,
      rgba(0,0,0,0) 7px
    );
  mix-blend-mode: overlay;
  opacity:.14;
}

/* ---------- Typography punch ---------- */
h2,h3,.brand__title{
  letter-spacing: .2px;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.muted,.hint{
  color: rgba(170,188,220,.92) !important;
}

/* ---------- Cards become glass + neon edge ---------- */
.card, .panel, .section, .box{
  background: linear-gradient(180deg, var(--cp-glass), var(--cp-glass-2)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.38) !important;
  position:relative;
  overflow:hidden;
}
.card::after, .panel::after, .section::after, .box::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 20px;
  padding:1px;
  background: linear-gradient(90deg,
    rgba(32,227,255,.35),
    rgba(255,61,242,.26),
    rgba(124,92,255,.28)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity:.55;
  pointer-events:none;
}
.card:hover, .panel:hover, .section:hover, .box:hover{
  box-shadow: 0 22px 70px rgba(0,0,0,.48) !important;
  border-color: rgba(32,227,255,.18) !important;
}

/* ---------- Nav: neon active + hover ---------- */
.nav__link{
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(6,10,18,.28) !important;
  color: rgba(200,220,255,.88) !important;
  backdrop-filter: blur(10px);
}
.nav__link:hover{
  color:#fff !important;
  border-color: rgba(32,227,255,.30) !important;
  box-shadow: var(--cp-glow-cyan) !important;
  transform: translateY(-1px);
}
.nav__link--active{
  color:#fff !important;
  background: linear-gradient(90deg, rgba(32,227,255,.20), rgba(255,61,242,.14)) !important;
  border-color: rgba(32,227,255,.48) !important;
  box-shadow: var(--cp-glow-cyan), var(--cp-glow-violet) !important;
}

/* ---------- Inputs: cyber focus ---------- */
.field input, .field textarea, .field select,
input, textarea, select{
  background: rgba(6,10,18,.38) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
}
.field input:focus, .field textarea:focus, .field select:focus,
input:focus, textarea:focus, select:focus{
  border-color: rgba(32,227,255,.60) !important;
  box-shadow: 0 0 0 4px rgba(32,227,255,.14), var(--cp-glow-cyan) !important;
}

/* ---------- Buttons: make them pop & color-coded ---------- */
.btn, button, input[type="submit"], input[type="button"]{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: linear-gradient(180deg, rgba(18,28,52,.70), rgba(8,12,22,.55)) !important;
  color:#fff !important;
  font-weight: 900 !important;
  letter-spacing: .2px;
  box-shadow: 0 10px 24px rgba(0,0,0,.30) !important;
}
.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px rgba(32,227,255,.10), 0 16px 44px rgba(0,0,0,.38) !important;
  border-color: rgba(32,227,255,.30) !important;
}

/* primary / danger if you already use these modifiers */
.btn--primary, .btn.primary, button.primary{
  background: linear-gradient(90deg, rgba(32,227,255,.95), rgba(124,92,255,.75)) !important;
  border-color: rgba(32,227,255,.45) !important;
  box-shadow: var(--cp-glow-cyan) !important;
}
.btn--danger, .btn.danger, button.danger{
  background: linear-gradient(90deg, rgba(255,61,242,.92), rgba(255,79,94,.72)) !important;
  border-color: rgba(255,61,242,.40) !important;
  box-shadow: var(--cp-glow-pink) !important;
}
.btn--ok, .btn.ok, button.ok{
  background: linear-gradient(90deg, rgba(53,255,154,.92), rgba(31,191,117,.70)) !important;
  border-color: rgba(53,255,154,.38) !important;
  box-shadow: 0 0 18px rgba(53,255,154,.22) !important;
}

/* Auto-color the most common action buttons (no HTML changes needed) */
.btn[href*="start"], .btn[name*="start"], button[name*="start"]{ box-shadow: var(--cp-glow-cyan) !important; }
.btn[href*="stop"], .btn[name*="stop"], button[name*="stop"]{ box-shadow: var(--cp-glow-pink) !important; }
.btn[href*="pause"], .btn[name*="pause"], button[name*="pause"]{ box-shadow: 0 0 18px rgba(255,176,32,.18) !important; }
.btn[href*="save"], .btn[name*="save"], button[name*="save"]{ box-shadow: var(--cp-glow-violet) !important; }

/* ---------- Tables: modern sticky header + neon row hover ---------- */
.tablewrap{
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(6,10,18,.22) !important;
  overflow:auto;
}
.table{
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.table thead th{
  background: rgba(10,16,28,.82) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(190,210,245,.92) !important;
  font-weight: 900 !important;
}
.table tbody tr:hover{
  background: linear-gradient(90deg, rgba(32,227,255,.08), rgba(255,61,242,.05)) !important;
}
.table td, .table th{
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

/* ---------- Status pills: vibrant ---------- */
.pill{
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(6,10,18,.26) !important;
  font-weight: 900 !important;
  letter-spacing:.2px;
}
.pill--running{ color: var(--cp-cyan) !important; border-color: rgba(32,227,255,.35) !important; box-shadow: var(--cp-glow-cyan) !important; }
.pill--waiting{ color: var(--cp-amber) !important; border-color: rgba(255,176,32,.30) !important; box-shadow: 0 0 18px rgba(255,176,32,.16) !important; }
.pill--done{ color: var(--cp-lime) !important; border-color: rgba(53,255,154,.28) !important; box-shadow: 0 0 18px rgba(53,255,154,.14) !important; }
.pill--paused{ color: var(--cp-amber) !important; border-color: rgba(255,176,32,.30) !important; box-shadow: 0 0 18px rgba(255,176,32,.16) !important; }
.pill--error{ color: var(--cp-pink) !important; border-color: rgba(255,61,242,.32) !important; box-shadow: var(--cp-glow-pink) !important; }

/* Optional: running pulse (very light, no CPU impact) */
@keyframes cpPulse { 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(1.18);} }
.pill--running{ animation: cpPulse 1.6s ease-in-out infinite; }

/* ---------- Next run / time / counters: neon & readable ---------- */
.next-run{
  font-weight: 950 !important;
  color: #fff !important;
  text-shadow: 0 0 18px rgba(32,227,255,.18);
}
.next-run.muted{ color: rgba(190,210,245,.70) !important; }

.mono, .kv__v, .log, pre{
  font-family: var(--mono) !important;
}

/* ---------- Metric blocks (key/value rows) ---------- */
.kv__row{
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.kv__k{
  color: rgba(190,210,245,.86) !important;
  font-weight: 800 !important;
}
.kv__v{
  font-weight: 950 !important;
}
.kv__v strong{ color:#fff; }

/* ---------- Flash: neon edges ---------- */
.flash{
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(6,10,18,.24) !important;
}
.flash--success{
  border-color: rgba(53,255,154,.30) !important;
  box-shadow: 0 0 18px rgba(53,255,154,.12) !important;
}
.flash--error{
  border-color: rgba(255,61,242,.26) !important;
  box-shadow: 0 0 18px rgba(255,61,242,.12) !important;
}
.flash--info{
  border-color: rgba(32,227,255,.26) !important;
  box-shadow: 0 0 18px rgba(32,227,255,.10) !important;
}

/* ---------- Logs: terminal cyber vibe ---------- */
.log{
  border-radius: 16px !important;
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.35) !important;
}
.log::selection{ background: rgba(255,61,242,.22); }

/* ---------- Small polish ---------- */
hr, .sep{
  border-color: rgba(255,255,255,.08) !important;
}