:root{
  --bg:#0e1116; --bg2:#161b22; --card:#161b22; --card2:#1c232d;
  --border:#283040; --text:#e6edf3; --muted:#8b98a9;
  --accent:#6366f1; --accent2:#8b5cf6; --accent-ink:#fff;
  --ok:#22c55e; --fail:#ef4444; --warn:#f59e0b; --idle:#64748b;
  --radius:14px; --shadow:0 8px 30px rgba(0,0,0,.35);
}
[data-theme="light"]{
  --bg:#f6f8fb; --bg2:#fff; --card:#fff; --card2:#f2f5f9;
  --border:#e3e8ef; --text:#0f172a; --muted:#64748b;
  --shadow:0 8px 30px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.center{text-align:center}

/* Topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; background:var(--bg2); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50; flex-wrap:wrap; gap:10px;
}
.brand{font-weight:700; font-size:1.15rem; color:var(--text); display:flex; align-items:center; gap:8px}
.brand:hover{text-decoration:none}
.logo{font-size:1.3rem}
.topbar nav{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.topbar nav a{color:var(--muted); font-weight:500}
.topbar nav a:hover{color:var(--text); text-decoration:none}
.email-chip{font-size:.85rem; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.inline{display:inline}
.linkbtn{background:none; border:none; color:var(--muted); cursor:pointer; font:inherit; padding:0}
.linkbtn:hover{color:var(--text)}
.theme-toggle{font-size:1.1rem}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:6px; justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:var(--accent-ink); border:none; padding:10px 18px; border-radius:10px;
  font-weight:600; cursor:pointer; font-size:.95rem; transition:.15s; text-decoration:none;
}
.btn:hover{filter:brightness(1.08); text-decoration:none; transform:translateY(-1px)}
.btn-sm{padding:6px 12px; font-size:.85rem; border-radius:8px}
.btn-lg{padding:13px 26px; font-size:1.05rem}
.btn-block{width:100%; margin-top:8px}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--border)}
.btn-ghost:hover{background:var(--card2); filter:none}
.btn-danger{background:transparent; color:var(--fail); border:1px solid var(--fail)}
.btn-danger:hover{background:var(--fail); color:#fff; filter:none}

/* Layout */
.container{max-width:960px; margin:0 auto; padding:28px 20px 60px}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap}
.page-head h2{margin:0}
.sec-title{margin:28px 0 12px}
.back{font-size:.85rem}
.footer{text-align:center; color:var(--muted); font-size:.85rem; padding:26px}

/* Flash */
.flash{max-width:960px; margin:14px auto 0; padding:11px 18px; border-radius:10px; font-weight:500}
.flash-success{background:rgba(34,197,94,.12); color:var(--ok); border:1px solid rgba(34,197,94,.3)}
.flash-error{background:rgba(239,68,68,.12); color:var(--fail); border:1px solid rgba(239,68,68,.3)}
.alert{background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.35); color:var(--fail); padding:12px 16px; border-radius:10px; margin-bottom:16px}
.alert ul{margin:0; padding-left:18px}

/* Hero / landing */
.hero{text-align:center; padding:56px 0 30px}
.hero h1{font-size:clamp(2rem,6vw,3.4rem); margin:0 0 16px; line-height:1.1; letter-spacing:-1px}
.grad{background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{font-size:1.15rem; color:var(--muted); max-width:640px; margin:0 auto 26px}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.features{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin:40px 0}
.feature{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px}
.feature .fi{font-size:1.8rem; margin-bottom:8px}
.feature h3{margin:0 0 6px; font-size:1.05rem}
.feature p{margin:0; color:var(--muted); font-size:.92rem}
.cron-demo{margin-top:20px}
.mono-card{position:relative; padding-top:38px; background:#0b0e14; border-color:#232a36}
.mono-card pre{margin:0; color:#c9d4e3; overflow-x:auto; font-size:.9rem}
.term-dot{position:absolute; top:15px; width:11px; height:11px; border-radius:50%; background:#ff5f56; left:18px}
.term-dot.y{background:#ffbd2e; left:36px}
.term-dot.g{background:#27c93f; left:54px}

/* Auth */
.auth-wrap{display:flex; justify-content:center; padding-top:20px}
.auth-card{width:100%; max-width:400px}
.auth-card h2{margin:0 0 4px}
.form label,.auth-card label{display:block; margin:14px 0 0; font-weight:600; font-size:.9rem}
input,select,textarea{
  width:100%; margin-top:6px; padding:10px 12px; background:var(--bg2);
  border:1px solid var(--border); border-radius:9px; color:var(--text); font:inherit; font-weight:400;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(99,102,241,.18)}
textarea{resize:vertical}

/* Stats */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px}
.stat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; display:flex; flex-direction:column}
.stat-num{font-size:1.8rem; font-weight:700}
.stat-label{color:var(--muted); font-size:.85rem}
.stat-bad .stat-num{color:var(--fail)}

/* Table */
.table-wrap{padding:0; overflow-x:auto}
table.jobs{width:100%; border-collapse:collapse; min-width:640px}
table.jobs th{text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); padding:12px 14px; border-bottom:1px solid var(--border)}
table.jobs td{padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle}
table.jobs tr:last-child td{border-bottom:none}
.job-title{font-weight:600; color:var(--text)}
.job-url{color:var(--muted); font-size:.8rem; margin-top:2px; max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row-actions{white-space:nowrap; text-align:right}
.row-actions a,.row-actions .run-btn{margin-left:10px; font-size:.85rem; color:var(--accent)}

/* Dots & badges */
.dot{display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--idle); vertical-align:middle}
.dot-ok{background:var(--ok); box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.dot-fail{background:var(--fail); box-shadow:0 0 0 3px rgba(239,68,68,.18)}
.dot-paused{background:var(--idle)}
.dot-idle{background:var(--warn)}
.tag{display:inline-block; font-size:.68rem; text-transform:uppercase; letter-spacing:.4px; background:var(--card2); color:var(--muted); padding:2px 7px; border-radius:6px; margin-left:4px; vertical-align:middle}
.code-badge{display:inline-block; font-family:ui-monospace,monospace; font-size:.78rem; padding:2px 7px; border-radius:6px; font-weight:600}
.code-badge.good{background:rgba(34,197,94,.14); color:var(--ok)}
.code-badge.bad{background:rgba(239,68,68,.14); color:var(--fail)}

/* Empty */
.empty{text-align:center; padding:40px}
.empty-ico{font-size:2.6rem; margin-bottom:8px}
.empty h3{margin:0 0 6px}

/* Form */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form-grid .col-2{grid-column:span 2}
.form-actions{margin-top:22px}
fieldset.sched{border:1px solid var(--border); border-radius:12px; padding:16px 18px; margin-top:20px}
fieldset.sched legend{padding:0 8px; font-weight:600}
.seg{display:inline-flex; background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:3px; margin-bottom:14px}
.seg-opt{margin:0!important; position:relative}
.seg-opt input{position:absolute; opacity:0; inset:0; cursor:pointer; width:100%}
.seg-opt span{display:block; padding:7px 16px; border-radius:8px; font-size:.9rem; color:var(--muted); font-weight:600}
.seg-opt input:checked + span{background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff}
.sched-panel{display:none}
.sched-panel.active{display:block}
.inline-field{display:flex; align-items:center; gap:10px}
.inline-field input{width:110px; margin:0}
.inline-field span{color:var(--muted)}
.presets{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.chip{background:var(--card2); border:1px solid var(--border); color:var(--text); padding:5px 12px; border-radius:20px; cursor:pointer; font-size:.82rem; font-family:inherit}
.chip:hover{border-color:var(--accent); color:var(--accent)}
.hint{color:var(--muted); font-size:.8rem; margin:8px 0 0}
.advanced{margin-top:18px; border:1px solid var(--border); border-radius:12px; padding:6px 16px}
.advanced summary{cursor:pointer; font-weight:600; padding:8px 0}
.toggles{display:flex; gap:24px; margin-top:18px; flex-wrap:wrap}
.switch{display:flex!important; align-items:center; gap:8px; margin:0!important; font-weight:500!important}
.switch input{width:auto; margin:0}

/* Detail */
.detail-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:18px 0}
.meta-item{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:3px}
.meta-label{font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted)}
.head-actions{display:flex; gap:8px; flex-wrap:wrap}
.err-text{color:var(--fail)}
.resp summary{cursor:pointer; color:var(--accent); font-size:.82rem}
.resp-body{background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:10px; max-height:240px; overflow:auto; font-size:.78rem; margin-top:6px; white-space:pre-wrap; word-break:break-word}

@media (max-width:560px){
  .form-grid{grid-template-columns:1fr}
  .form-grid .col-2{grid-column:span 1}
  .stats{grid-template-columns:1fr 1fr}
  .email-chip{display:none}
}