@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');

/* ============================ Design tokens ============================ */
:root{
  /* surfaces (OLED dark) */
  --bg:#0b1020; --bg-2:#0f172a; --panel:#121a2e; --panel-2:#16203a;
  --elevated:#1b2740; --border:#26324d; --border-soft:#1d2740;
  /* text */
  --text:#f1f5f9; --muted:#93a1bd; --faint:#5d6b86;
  /* brand / status */
  --accent:#22c55e; --accent-2:#16a34a; --accent-soft:rgba(34,197,94,.14);
  --info:#38bdf8; --info-soft:rgba(56,189,248,.14);
  --warn:#f5b545; --warn-soft:rgba(245,181,69,.14);
  --err:#f05252; --err-soft:rgba(240,82,82,.14);
  --violet:#8b7cf6;
  /* shape */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --pill:999px;
  --sp:8px;
  /* shadow / elevation */
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 6px 20px -6px rgba(0,0,0,.5);
  --sh-3:0 18px 50px -12px rgba(0,0,0,.65);
  --glow:0 0 0 1px var(--accent-soft), 0 8px 30px -8px rgba(34,197,94,.45);
  --ring:0 0 0 3px rgba(56,189,248,.35);
  /* type */
  --font:'Fira Sans',system-ui,Segoe UI,sans-serif;
  --mono:'Fira Code',ui-monospace,Consolas,monospace;
  --t-fast:.14s cubic-bezier(.4,0,.2,1); --t:.22s cubic-bezier(.4,0,.2,1);
  --sidebar:248px;
}
*{box-sizing:border-box;}
html{color-scheme:dark;}   /* native controls + <select> dropdowns render dark */
html,body{margin:0;}
body{
  font-family:var(--font); background:
    radial-gradient(1200px 600px at 80% -10%, rgba(34,197,94,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(56,189,248,.06), transparent 55%),
    var(--bg);
  color:var(--text); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
a{color:var(--info); text-decoration:none;}
::selection{background:var(--accent-soft);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px;border:2px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:var(--faint);}

/* ============================ App shell ============================ */
.app{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100dvh;}
.sidebar{
  position:sticky;top:0;height:100dvh;background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border-inline-end:1px solid var(--border-soft);padding:18px 14px;display:flex;flex-direction:column;gap:6px;
}
.brand{display:flex;align-items:center;gap:10px;padding:8px 10px 18px;font-weight:700;font-size:17px;letter-spacing:.2px;}
.brand .logo{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--info));color:#04121f;box-shadow:var(--glow);}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);
  color:var(--muted);font-weight:500;cursor:pointer;transition:background var(--t-fast),color var(--t-fast);}
.nav-item:hover{background:var(--panel-2);color:var(--text);}
.nav-item.active{background:var(--accent-soft);color:var(--text);}
.nav-item.active svg{color:var(--accent);}
.nav-item svg{width:18px;height:18px;}
.sidebar .spacer{flex:1;}
.side-user{display:flex;align-items:center;gap:10px;padding:10px;border-top:1px solid var(--border-soft);margin-top:6px;}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--info));
  display:grid;place-items:center;color:#fff;font-weight:600;font-size:13px;overflow:hidden;flex-shrink:0;}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;}

.main{min-width:0;display:flex;flex-direction:column;}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  padding:14px 24px;background:rgba(11,16,32,.7);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-soft);}
.topbar h1{font-size:18px;margin:0;font-weight:600;}
.topbar .grow{flex:1;}
.kbd{font-family:var(--mono);font-size:11px;background:var(--elevated);border:1px solid var(--border);
  border-bottom-width:2px;border-radius:6px;padding:2px 6px;color:var(--muted);}
.cmdk-trigger{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--pill);padding:7px 12px;color:var(--muted);cursor:pointer;font-size:13px;transition:var(--t-fast);}
.cmdk-trigger:hover{border-color:var(--faint);color:var(--text);}
.content{padding:24px;max-width:1400px;width:100%;margin:0 auto;}

/* ============================ Components ============================ */
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--border-soft);
  border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-1);}
.card.hover{transition:transform var(--t),border-color var(--t),box-shadow var(--t);cursor:pointer;}
.card.hover:hover{transform:translateY(-3px);border-color:var(--border);box-shadow:var(--sh-2);}
.section-title{font-size:12px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 14px;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:14px;
  font-weight:600;border:1px solid transparent;border-radius:var(--r-sm);padding:9px 16px;cursor:pointer;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#04140a;
  transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast),opacity var(--t-fast);}
.btn:hover{box-shadow:var(--glow);} .btn:active{transform:scale(.97);}
.btn svg{width:16px;height:16px;}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--border);}
.btn.ghost:hover{background:var(--panel-2);box-shadow:none;border-color:var(--faint);}
.btn.subtle{background:var(--elevated);color:var(--text);} .btn.subtle:hover{box-shadow:none;background:var(--border);}
.btn.danger{background:linear-gradient(180deg,var(--err),#c33);color:#fff;}
.btn.sm{padding:6px 11px;font-size:13px;border-radius:7px;}
.btn.icon{padding:8px;border-radius:9px;}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;}

label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px;font-weight:500;}
input,textarea,select{width:100%;background:var(--bg-2);border:1px solid var(--border);color:var(--text);
  border-radius:var(--r-sm);padding:10px 12px;font-family:inherit;font-size:14px;transition:border-color var(--t-fast),box-shadow var(--t-fast);}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--info);box-shadow:var(--ring);}
input::placeholder,textarea::placeholder{color:var(--faint);}
textarea{min-height:96px;resize:vertical;}
input[type=number]{font-family:var(--mono);}
input[type=checkbox],input[type=radio]{width:auto;flex:0 0 auto;padding:0;accent-color:var(--accent);cursor:pointer;}

.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--pill);
  font-size:12px;font-weight:600;border:1px solid transparent;font-family:var(--mono);}
.pill .dot{width:7px;height:7px;border-radius:50%;}
.pill.queued{background:var(--warn-soft);color:var(--warn);} .pill.queued .dot{background:var(--warn);}
.pill.running{background:var(--info-soft);color:var(--info);} .pill.running .dot{background:var(--info);animation:pulse 1.4s infinite;}
.pill.paused{background:var(--warn-soft);color:var(--warn);} .pill.paused .dot{background:var(--warn);}
.pill.done{background:var(--accent-soft);color:var(--accent);} .pill.done .dot{background:var(--accent);}
.pill.error,.pill.stopped{background:var(--err-soft);color:var(--err);} .pill.error .dot,.pill.stopped .dot{background:var(--err);}
.pill.role{background:var(--elevated);color:var(--muted);}
.pill.role.super_admin{background:rgba(139,124,246,.16);color:var(--violet);}
.pill.role.admin{background:var(--info-soft);color:var(--info);}

.status-dot{width:9px;height:9px;border-radius:50%;display:inline-block;box-shadow:0 0 0 3px transparent;}
.status-dot.on{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.status-dot.off{background:var(--faint);}
/* Telegram-style online/offline badge on an avatar corner. Wrap the .avatar in .av-wrap. */
.av-wrap{position:relative;display:inline-flex;flex:none;}
.av-dot{position:absolute;inset-inline-end:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--panel);box-sizing:border-box;}
.av-dot.on,.av-dot.online{background:var(--accent);}      /* green — active (tab visible) */
.av-dot.away{background:#f59e0b;}                          /* amber — connected but tab hidden/minimised */
.av-dot.off,.av-dot.offline{background:var(--faint);}     /* grey — offline */
.av-dot.lg{width:14px;height:14px;border-width:2.5px;}
/* status-matched dots (tabs) — mirror the status pill colors */
.status-dot.sd-queued{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft);}
.status-dot.sd-running{background:var(--info);box-shadow:0 0 0 3px var(--info-soft);animation:pulse 1.4s infinite;}
.status-dot.sd-paused{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft);}
.status-dot.sd-done{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.status-dot.sd-error,.status-dot.sd-stopped{background:var(--err);box-shadow:0 0 0 3px var(--err-soft);}

/* switch */
.switch{position:relative;display:inline-block;width:40px;height:22px;cursor:pointer;}
.switch input{opacity:0;width:0;height:0;}
.switch .track{position:absolute;inset:0;background:var(--border);border-radius:99px;transition:var(--t);}
.switch .track::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;
  border-radius:50%;transition:var(--t);}
.switch input:checked + .track{background:var(--accent);}
.switch input:checked + .track::before{transform:translateX(18px);}

/* table */
.table-wrap{overflow:auto;border-radius:var(--r);border:1px solid var(--border-soft);}
table{width:100%;border-collapse:collapse;font-size:14px;}
thead th{position:sticky;top:0;background:var(--panel-2);text-align:start;padding:12px 14px;
  font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:600;
  border-bottom:1px solid var(--border);cursor:default;white-space:nowrap;}
thead th.sortable{cursor:pointer;} thead th.sortable:hover{color:var(--text);}
tbody td{padding:12px 14px;border-bottom:1px solid var(--border-soft);vertical-align:middle;}
tbody tr{transition:background var(--t-fast);} tbody tr:hover{background:var(--panel-2);}
tbody tr:last-child td{border-bottom:0;}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* responsive two-column layout (class, not inline — survives Alpine x-show) */
.grid-360{display:grid;grid-template-columns:360px 1fr;gap:18px;align-items:start;}
@media (max-width:1024px){ .grid-360{grid-template-columns:1fr;} }

/* stat cards */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:20px;}
.stat{display:flex;align-items:center;gap:14px;}
.stat .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:0 0 42px;}
.stat .ic svg{width:20px;height:20px;}
.stat .v{font-size:24px;font-weight:700;font-family:var(--mono);line-height:1;}
.stat .l{color:var(--muted);font-size:13px;margin-top:4px;}

/* terminal */
.terminal{background:#06090f;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;}
.terminal .bar{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--panel-2);border-bottom:1px solid var(--border-soft);}
.terminal .bar .dots{display:flex;gap:6px;}
.terminal .bar .dots i{width:11px;height:11px;border-radius:50%;display:block;}
.terminal .bar .title{font-family:var(--mono);font-size:12px;color:var(--muted);}
.terminal .body{height:340px;overflow:auto;padding:14px;font-family:var(--mono);font-size:13px;line-height:1.7;
  direction:ltr;text-align:left;}
.term-line{white-space:pre-wrap;word-break:break-word;animation:lineIn .18s ease-out;}
.term-line.err{color:var(--err);}
.term-line .ix{color:var(--faint);margin-inline-end:8px;user-select:none;}
/* interactive ctx.ask() prompt */
.term-ask{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--panel-2);
  border-top:1px solid var(--border-soft);flex-wrap:wrap;animation:lineIn .18s ease-out;}
.term-ask .ask-caret{width:16px;height:16px;color:var(--accent);flex:0 0 auto;}
.term-ask .ask-label{font-family:var(--mono);font-size:13px;color:var(--text);}
.term-ask input,.term-ask select{flex:1 1 200px;min-width:140px;background:#06090f;border:1px solid var(--border);
  border-radius:8px;padding:8px 10px;color:var(--text);font-family:var(--mono);font-size:13px;}
.term-ask input:focus,.term-ask select:focus{outline:none;border-color:var(--accent);box-shadow:var(--glow);}
.cb-hi{background:rgba(53,116,240,.18)!important;color:var(--text)!important}
/* file preview */
/* compact script-picker rows (match the Scripts page list) */
.pickitem{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-sm);
  cursor:pointer;color:var(--muted);transition:var(--t-fast);}
.pickitem:hover{background:var(--panel-2);color:var(--text);}
.pickitem .fc{color:var(--accent);}
a.filelink{color:var(--accent);text-decoration:none;cursor:pointer;}
a.filelink:hover{text-decoration:underline;}
/* code editor: fold gutter arrows + fold marker (dark) */
.CodeMirror-foldgutter{width:14px;}
.CodeMirror-foldgutter-open:after,.CodeMirror-foldgutter-folded:after{color:#7b8794;font-size:11px;}
.CodeMirror-foldgutter-open:hover:after,.CodeMirror-foldgutter-folded:hover:after{color:var(--accent);}
.CodeMirror-foldmarker{color:var(--accent);background:var(--accent-soft);border:1px solid var(--border);
  border-radius:5px;padding:0 6px;margin:0 2px;font-family:var(--mono);font-size:11px;cursor:pointer;}
/* maximize the editor card to full screen (inside the browser) */
.cm-card-max{position:fixed!important;inset:0;z-index:300;margin:0!important;border-radius:0!important;
  overflow:auto;background:var(--panel);}
.cm-card-max .CodeMirror{height:calc(100dvh - 150px)!important;}
.preview-body{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#0b0f17;
  height:min(70vh,640px);display:flex;}
.preview-body img{max-width:100%;max-height:100%;margin:auto;object-fit:contain;display:block;
  border-radius:6px;box-shadow:0 6px 24px rgba(0,0,0,.5);
  background:repeating-conic-gradient(#171f2b 0% 25%, #0e141d 0% 50%) 50%/22px 22px;}
.preview-body iframe{width:100%;height:100%;border:0;background:#fff;}
.preview-body .preview-text{flex:1;margin:0;padding:14px;overflow:auto;background:#06090f;color:var(--text);
  font-family:var(--mono);font-size:12.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word;}
.preview-body .empty{margin:auto;text-align:center;color:#475569;}

/* run tabs — unified surface: bar + panel are ONE continuous box, no divider line */
.tabsbar{display:flex;align-items:flex-end;gap:4px;min-width:0;
  background:var(--panel);border:1px solid var(--border);border-bottom:none;
  border-radius:14px 14px 0 0;padding:7px 8px 0;}
.tabs{display:flex;gap:4px;overflow-x:auto;flex:1;min-width:0;scroll-behavior:smooth;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid transparent;border-bottom:none;
  border-radius:9px 9px 0 0;background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
  font-size:13px;font-weight:500;flex:0 0 auto;}
.tab:hover{color:var(--text);background:var(--panel-2);}
.tab.active{background:var(--panel-2);color:var(--text);border-color:var(--border-soft);
  box-shadow:inset 0 2px 0 0 var(--accent);}   /* accent indicator; no divider under it */
.tab .x{opacity:.5;width:14px;height:14px;display:grid;place-items:center;border-radius:4px;}
.tab .x:hover{opacity:1;color:var(--err);background:var(--err-soft);}
.tab .status-dot{width:7px;height:7px;}
.tab-arrow{flex:0 0 auto;width:26px;height:32px;display:grid;place-items:center;border:0;background:transparent;
  color:var(--muted);cursor:pointer;border-radius:7px;}
.tab-arrow:hover{color:var(--text);background:var(--panel-2);}
.tab-arrow svg{width:16px;height:16px;}
.tab-new{flex:0 0 auto;padding:8px 10px;color:var(--muted);cursor:pointer;border-radius:8px;display:grid;place-items:center;}
.tab-new:hover{color:var(--accent);background:var(--accent-soft);}
/* content panel continues the same surface — no top border, shared rounded box */
.tabpanel{background:var(--panel);border:1px solid var(--border);border-top:none;
  border-radius:0 0 14px 14px;padding:18px;}
.tabpanel-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}

/* skeleton */
.skel{background:linear-gradient(90deg,var(--panel-2) 25%,var(--elevated) 37%,var(--panel-2) 63%);
  background-size:400% 100%;animation:shimmer 1.4s infinite;border-radius:8px;}

.muted{color:var(--muted);} .faint{color:var(--faint);} .mono{font-family:var(--mono);}
.empty{display:grid;place-items:center;gap:10px;padding:48px 20px;color:var(--muted);text-align:center;}
.empty svg{width:34px;height:34px;color:var(--faint);}

/* ============================ Toasts ============================ */
.toasts{position:fixed;bottom:22px;inset-inline-end:22px;display:flex;flex-direction:column;gap:10px;z-index:1000;}
.toast{display:flex;align-items:center;gap:10px;background:var(--elevated);border:1px solid var(--border);
  border-inline-start:3px solid var(--info);border-radius:var(--r);padding:12px 16px;box-shadow:var(--sh-3);
  min-width:240px;max-width:360px;animation:toastIn .26s cubic-bezier(.2,.8,.2,1);}
.toast.ok{border-inline-start-color:var(--accent);} .toast.err{border-inline-start-color:var(--err);}
.toast.warn{border-inline-start-color:var(--warn);}
.toast svg{width:18px;height:18px;flex:0 0 18px;}
.toast.ok svg{color:var(--accent);} .toast.err svg{color:var(--err);} .toast.warn svg{color:var(--warn);} .toast.info svg{color:var(--info);}
.toast.leaving{animation:toastOut .2s ease-in forwards;}

/* ============================ Command palette ============================ */
.cmdk-overlay{position:fixed;inset:0;background:rgba(4,8,16,.6);backdrop-filter:blur(4px);z-index:900;
  display:grid;place-items:start center;padding-top:14vh;animation:fadeIn .15s ease;}
.cmdk{width:min(560px,92vw);background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);overflow:hidden;animation:popIn .2s cubic-bezier(.2,.8,.2,1);}
.cmdk input{border:0;border-radius:0;background:transparent;padding:16px 18px;font-size:16px;border-bottom:1px solid var(--border-soft);}
.cmdk input:focus{box-shadow:none;}
.cmdk .list{max-height:320px;overflow:auto;padding:8px;}
.cmdk .opt{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-sm);cursor:pointer;color:var(--muted);}
.cmdk .opt.sel{background:var(--accent-soft);color:var(--text);}
.cmdk .opt svg{width:17px;height:17px;}
.cmdk .opt .meta{margin-inline-start:auto;font-size:11px;}

/* ============================ Modal ============================ */
.modal-overlay{position:fixed;inset:0;background:rgba(4,8,16,.62);backdrop-filter:blur(4px);z-index:950;
  display:grid;place-items:center;padding:20px;animation:fadeIn .15s ease;}
.modal{width:min(440px,94vw);background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);padding:22px;animation:popIn .2s cubic-bezier(.2,.8,.2,1);}
.modal h3{margin:0 0 8px;font-size:17px;} .modal p{color:var(--muted);margin:0 0 16px;font-size:14px;}
.modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;}

/* ============================ Animations ============================ */
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
@keyframes shimmer{0%{background-position:100% 0;}100%{background-position:-100% 0;}}
@keyframes lineIn{from{opacity:0;transform:translateX(-4px);}to{opacity:1;transform:none;}}
@keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes toastOut{to{opacity:0;transform:translateX(20px);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes popIn{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:none;}}
@keyframes spin{to{transform:rotate(360deg);}}
.spin{animation:spin .8s linear infinite;}
[x-cloak]{display:none!important;}

/* ============================ Responsive ============================ */
@media (max-width:900px){
  .app{grid-template-columns:1fr;}
  .sidebar{position:fixed;inset-inline-start:0;top:0;z-index:60;transform:translateX(-105%);
    transition:transform var(--t);width:var(--sidebar);box-shadow:var(--sh-3);}
  .sidebar.open{transform:none;}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55;}
  .menu-btn{display:inline-grid!important;}
  .content{padding:16px;}
}
.menu-btn{display:none;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}