/* ─── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #080a0f;
  --bg2:       #0d1017;
  --surface:   #111318;
  --surface2:  #181b22;
  --border:    #1c2030;
  --accent:    #5865f2;
  --accent-h:  #4752c4;
  --accent-dim:rgba(88,101,242,.15);
  --text:      #f0f2f7;
  --muted:     #5a6070;
  --muted2:    #3a3f50;
  --danger:    #ef4444;
  --success:   #22c55e;
  --warn:      #f59e0b;
  --radius:    7px;
  --sidebar-w: 235px;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
}

html { scroll-behavior: smooth; }
html, body { height:100%; background:var(--bg); color:var(--text); font-family:var(--font); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
input, button, select, textarea { font-family:var(--font); }

/* ═══════════════════════════════════════════════════════
   ANNOUNCEMENT BAR
═══════════════════════════════════════════════════════ */
.announcement-bar {
  background: rgba(245,158,11,.1); border-bottom:1px solid rgba(245,158,11,.25);
  color:var(--warn); font-size:.78rem; font-weight:500;
  text-align:center; padding:.4rem 1rem;
  position:fixed; top:0; left:0; right:0; z-index:300;
}

/* ═══════════════════════════════════════════════════════
   LANDING
═══════════════════════════════════════════════════════ */
.landing-body { display:flex; flex-direction:column; min-height:100vh; }

.l-nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2.5rem; height:54px;
}
.l-nav-brand { display:flex; align-items:center; gap:.55rem; }
.brand-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }
.brand-name { font-size:.95rem; font-weight:700; letter-spacing:.04em; }
.l-nav-links { display:flex; align-items:center; gap:1.75rem; }
.l-nav-links a { font-size:.82rem; color:var(--muted); transition:color .15s; font-weight:500; }
.l-nav-links a:hover { color:var(--text); }
.l-nav-links .nav-cta { padding:.35rem .9rem; border:1px solid var(--border); border-radius:99px; color:var(--text)!important; transition:border-color .15s,background .15s; }
.l-nav-links .nav-cta:hover { background:var(--surface2); border-color:var(--muted2); }

.hero-section { position:relative; overflow:hidden; min-height:100vh; display:flex; align-items:center; justify-content:center; }
#dot-grid { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero-inner { position:relative; z-index:10; display:flex; flex-direction:column; align-items:center; text-align:center; padding:2rem; max-width:700px; width:100%; }

.running-badge {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.28rem .85rem; border-radius:99px;
  border:1px solid rgba(34,197,94,.25); background:rgba(34,197,94,.06);
  font-size:.72rem; font-weight:600; letter-spacing:.06em;
  color:var(--success); margin-bottom:2rem;
}
.run-dot { width:6px; height:6px; border-radius:50%; background:var(--success); box-shadow:0 0 6px var(--success); animation:blink 2s ease infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.hero-h1 { font-size:clamp(2.8rem,7vw,5.5rem); font-weight:900; line-height:1.04; letter-spacing:-.04em; margin-bottom:2.5rem; color:#fff; }
.h1-dim  { color:rgba(255,255,255,.45); }

.hero-search {
  display:flex; align-items:center; width:100%; max-width:480px;
  background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:99px;
  padding:.5rem .5rem .5rem 1.2rem; transition:border-color .2s,background .2s;
}
.hero-search:hover,.hero-search:focus-within { border-color:rgba(88,101,242,.5); background:rgba(255,255,255,.06); }
.hero-search.locked { cursor:pointer; }
.hs-icon { width:16px; height:16px; color:var(--muted); flex-shrink:0; margin-right:.6rem; }
.hero-search input { flex:1; background:transparent; border:none; outline:none; color:var(--text); font-size:.95rem; }
.hero-search input::placeholder { color:var(--muted); }
.hs-placeholder { flex:1; color:var(--muted); font-size:.9rem; }
.hs-btn { width:36px; height:36px; border-radius:50%; border:none; background:var(--accent); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s,box-shadow .2s; flex-shrink:0; }
.hs-btn:hover { background:var(--accent-h); box-shadow:0 0 18px rgba(88,101,242,.4); }
.hs-btn svg { width:15px; height:15px; }
.hs-btn-ghost { color:var(--muted); padding-right:.3rem; }

.feat-section { padding:6rem 2.5rem; border-top:1px solid var(--border); }
.feat-grid { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:2.5rem; }
.feat-item .feat-num { font-size:.7rem; font-weight:700; letter-spacing:.1em; color:var(--accent); margin-bottom:.75rem; }
.feat-item h3 { font-size:.9rem; font-weight:700; margin-bottom:.5rem; }
.feat-item p  { color:var(--muted); font-size:.83rem; line-height:1.7; }

.l-footer { padding:2rem 2.5rem; border-top:1px solid var(--border); display:flex; gap:.75rem; align-items:center; font-size:.8rem; }

/* ═══════════════════════════════════════════════════════
   AUTH
═══════════════════════════════════════════════════════ */
.center-page { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.auth-wrap   { width:100%; max-width:400px; display:flex; flex-direction:column; align-items:center; }
.auth-logo   { display:flex; align-items:center; gap:.55rem; margin-bottom:2rem; }
.auth-box    { width:100%; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:2rem 2rem 1.75rem; display:flex; flex-direction:column; gap:1.25rem; }
.auth-title  { font-size:1.2rem; font-weight:700; }
.auth-form   { display:flex; flex-direction:column; gap:.85rem; }
.auth-switch { font-size:.8rem; color:var(--muted); text-align:center; margin-top:1rem; }
.auth-switch a { color:var(--accent); }

/* ═══════════════════════════════════════════════════════
   SEARCH PAGE
═══════════════════════════════════════════════════════ */
.app-body { display:flex; flex-direction:column; min-height:100vh; }

.top-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2rem; height:52px;
  background:var(--surface); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:100; flex-shrink:0;
}
.top-bar-brand { display:flex; align-items:center; gap:.55rem; }
.top-bar-right { display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; }
.top-bar-right .tuser { font-size:.75rem; color:var(--muted); }
.top-bar-right a { font-size:.75rem; color:var(--muted); transition:color .15s; }
.top-bar-right a:hover { color:var(--text); }
.top-bar-right a.hl { color:var(--accent); }
.top-sep { width:1px; height:14px; background:var(--border); }

.search-wrap { max-width:1300px; margin:0 auto; padding:2rem; width:100%; }

/* Search tabs */
.search-tabs { display:flex; gap:.4rem; margin-bottom:1.5rem; border-bottom:1px solid var(--border); padding-bottom:.75rem; }
.stab { background:transparent; border:1px solid var(--border); border-radius:var(--radius); color:var(--muted); padding:.35rem .9rem; font-size:.8rem; font-weight:600; cursor:pointer; transition:background .12s,color .12s; }
.stab:hover { background:var(--surface2); color:var(--text); }
.stab.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }

.page-title { font-size:1.3rem; font-weight:800; margin-bottom:.75rem; }

/* History chips */
.history-chip {
  background:var(--surface2); border:1px solid var(--border); border-radius:99px;
  color:var(--muted); font-size:.7rem; padding:.2rem .55rem; cursor:pointer;
  transition:background .12s,color .12s; font-family:var(--font);
}
.history-chip:hover { background:var(--accent-dim); color:var(--accent); border-color:var(--accent); }

/* Filter details */
.filter-details {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:.65rem 1rem; margin-bottom:1.25rem;
}
.filter-details summary { cursor:pointer; font-size:.78rem; font-weight:600; color:var(--muted); list-style:none; user-select:none; }
.filter-details summary::-webkit-details-marker { display:none; }
.filter-details[open] summary { color:var(--text); margin-bottom:.75rem; }
.filters-grid { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:.65rem; }
.filter-item { display:flex; flex-direction:column; gap:.25rem; }
.filter-item label { font-size:.65rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.filter-item input { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); padding:.35rem .6rem; font-size:.82rem; outline:none; transition:border-color .15s; font-family:var(--font); width:150px; }
.filter-item input:focus { border-color:var(--accent); }
.filter-checks { display:flex; gap:.75rem; flex-wrap:wrap; }
.chk-label { display:flex; align-items:center; gap:.35rem; font-size:.78rem; color:var(--muted); cursor:pointer; }
.chk-label input { accent-color:var(--accent); }

/* Search input row */
.s-row { display:flex; gap:.6rem; align-items:center; margin-bottom:1rem; }
.s-input-wrap { flex:1; max-width:520px; position:relative; }
.s-input-wrap svg { position:absolute; left:.9rem; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--muted); pointer-events:none; }
.s-input-wrap input { width:100%; padding:.62rem .9rem .62rem 2.4rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:.9rem; outline:none; transition:border-color .15s; }
.s-input-wrap input:focus { border-color:var(--accent); }

/* Result header */
.result-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; flex-wrap:wrap; gap:.5rem; }
.rh-left    { display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
.rh-name    { font-size:1.1rem; font-weight:700; }
.rh-id      { font-size:.72rem; color:var(--muted); font-family:monospace; background:var(--surface2); padding:.15rem .45rem; border-radius:4px; }
.rh-count   { font-size:.8rem; color:var(--muted); }

/* Stats panel */
.stats-panel {
  background:linear-gradient(135deg, var(--surface2) 0%, var(--surface) 100%);
  border:1px solid rgba(88,101,242,.12);
  border-radius:10px; 
  padding:1.2rem 1.4rem; 
  margin-bottom:1rem;
  transition:all .3s ease;
}
.stats-panel:hover {
  border-color:rgba(88,101,242,.25);
}
.stats-cols { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.5rem; }
.mini-stat { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius); padding:.6rem .9rem; }
.mini-stat { 
  background:linear-gradient(135deg, rgba(88,101,242,.1) 0%, rgba(88,101,242,.02) 100%);
  border:1px solid rgba(88,101,242,.18);
  border-radius:10px; 
  padding:.75rem 1rem;
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
.mini-stat:hover {
  transform:translateY(-2px);
  border-color:rgba(88,101,242,.35);
  box-shadow:0 4px 12px rgba(88,101,242,.12);
}
.mini-val   { font-size:1.2rem; font-weight:800; }
.stats-overview { margin-bottom:.75rem; }

/* Stat bars */
.stat-bar-row   { display:flex; align-items:center; gap:.6rem; margin-bottom:.4rem; font-size:.77rem; }
.stat-bar-label { width:140px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex-shrink:0; }
.stat-bar-track { flex:1; height:6px; background:var(--surface2); border-radius:99px; overflow:hidden; }
.stat-bar-fill  { height:100%; background:var(--accent); border-radius:99px; transition:width .4s; }
.stat-bar-count { width:55px; text-align:right; font-variant-numeric:tabular-nums; color:var(--text); }

/* Hour bars */
.hour-grid { display:flex; gap:3px; align-items:flex-end; height:60px; }
.hour-bar  { display:flex; flex-direction:column; align-items:center; flex:1; height:100%; justify-content:flex-end; }
.hour-fill { width:100%; background:var(--accent); border-radius:2px 2px 0 0; min-height:2px; transition:height .3s; }
.hour-label{ font-size:.6rem; color:var(--muted); margin-top:2px; white-space:nowrap; }

/* Attachment gallery */
.att-panel { 
  background:linear-gradient(135deg, var(--surface2) 0%, var(--surface) 100%);
  border:1px solid rgba(88,101,242,.12);
  border-radius:10px; 
  padding:1rem 1.2rem; 
  margin-bottom:.75rem;
  transition:all .2s ease;
}
.att-panel:hover {
  border-color:rgba(88,101,242,.25);
}
.att-grid  { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1rem; margin-top:1rem; }
.att-card  { 
  background:linear-gradient(135deg, rgba(88,101,242,.08) 0%, rgba(88,101,242,.02) 100%);
  border:1px solid rgba(88,101,242,.2);
  border-radius:8px; 
  overflow:hidden;
  transition:all .3s ease;
}
.att-card:hover {
  transform:translateY(-3px);
  border-color:rgba(88,101,242,.4);
  box-shadow:0 8px 16px rgba(88,101,242,.15);
}
.att-card img { width:100%; height:100px; object-fit:cover; display:block; }
.att-name  { padding:.35rem .5rem; font-size:.72rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.att-meta  { padding:0 .5rem .4rem; font-size:.65rem; color:var(--muted); }

/* Icon buttons */
.icon-btn { background:transparent; border:1px solid var(--border); border-radius:4px; color:var(--muted); cursor:pointer; padding:.15rem .4rem; font-size:.75rem; transition:background .12s,color .12s; }
.icon-btn:hover { background:var(--surface2); color:var(--text); }

/* Empty / loading */
.empty-state { display:flex; flex-direction:column; align-items:center; padding:3.5rem 2rem; gap:1rem; color:var(--muted); }
.empty-icon  { font-size:2rem; opacity:.2; }
.spinner     { width:24px; height:24px; border:2.5px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Reply pill */
.reply-pill { display:inline-block; padding:.1rem .45rem; background:var(--accent-dim); border-radius:4px; font-size:.7rem; color:var(--accent); max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }

/* Token section */
.tok-section { margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--border); }
.tok-title   { font-size:1rem; font-weight:700; margin-bottom:.35rem; }
.tok-sub     { font-size:.82rem; color:var(--muted); margin-bottom:1rem; }

/* Payment cards */
.payment-card  { 
  background:linear-gradient(135deg, var(--surface2) 0%, var(--surface) 100%);
  border:1px solid rgba(88,101,242,.15);
  border-radius:10px; 
  padding:1rem 1.3rem; 
  max-width:550px;
  transition:all .2s ease;
}
.payment-card:hover {
  border-color:rgba(88,101,242,.3);
  transform:translateY(-1px);
}
.payment-label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:.4rem; }
.payment-addr  { display:flex; align-items:center; gap:.5rem; cursor:pointer; }
.payment-addr code { font-size:.8rem; color:var(--text); font-family:monospace; word-break:break-all; }
.copy-hint     { color:var(--muted); font-size:.75rem; flex-shrink:0; }
.payment-addr:hover code { color:var(--accent); }

/* Copy toast */
.copy-toast { position:fixed; bottom:1.5rem; right:1.5rem; z-index:1000; background:var(--surface); border:1px solid var(--success); color:var(--success); padding:.5rem 1rem; border-radius:var(--radius); font-size:.82rem; font-weight:600; animation:fadeIn .15s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* ═══════════════════════════════════════════════════════
   SIDEBAR + DASHBOARD
═══════════════════════════════════════════════════════ */
.dash-body { display:flex; }
.sidebar {
  width:var(--sidebar-w); min-height:100vh;
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  padding:1.25rem .75rem;
  flex-shrink:0; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar-logo { display:flex; align-items:center; gap:.55rem; padding:0 .5rem 1.25rem; border-bottom:1px solid var(--border); margin-bottom:1rem; }
.nav-links  { list-style:none; display:flex; flex-direction:column; gap:2px; flex:1; }
.nav-link   { display:flex; align-items:center; gap:.6rem; padding:.5rem .75rem; border-radius:var(--radius); color:var(--muted); font-weight:500; transition:background .12s,color .12s; cursor:pointer; font-size:.83rem; }
.nav-link svg { width:16px; height:16px; flex-shrink:0; }
.nav-link:hover  { background:rgba(255,255,255,.04); color:var(--text); }
.nav-link.active { background:var(--accent-dim); color:var(--accent); }
.sidebar-footer  { padding-top:.75rem; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:2px; }
.logout-link:hover { color:var(--danger)!important; background:rgba(239,68,68,.08)!important; }

.main-content { flex:1; padding:2rem 2.5rem; overflow-y:auto; min-width:0; }
.tab { display:none; }
.tab.active { display:block; }

.page-header { display:flex; align-items:center; gap:.65rem; margin-bottom:2rem; flex-wrap:wrap; }
.page-header h1 { font-size:1.4rem; font-weight:800; flex:1; }

/* Auto-refresh toggle */
.autorefresh-toggle { display:flex; align-items:center; gap:.4rem; font-size:.75rem; color:var(--muted); cursor:pointer; }
.autorefresh-toggle input { accent-color:var(--accent); }

/* Stats grid */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:1rem; margin-bottom:2rem; }
.stat-card  { 
  background:linear-gradient(135deg, rgba(88,101,242,.08) 0%, rgba(88,101,242,.02) 100%);
  border:1px solid rgba(88,101,242,.15);
  border-radius:8px; 
  padding:1.1rem 1.3rem;
  transition:all .3s cubic-bezier(.4, 0, .2, 1);
  position:relative;
  overflow:hidden;
}
.stat-card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(88,101,242,.3), transparent);
}
.stat-card:hover {
  border-color:rgba(88,101,242,.3);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(88,101,242,.12);
}
.stat-label { font-size:.63rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:.3rem; }
.stat-value { font-size:1.55rem; font-weight:800; font-variant-numeric:tabular-nums; }

.section-title { font-size:.63rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:.5rem; }

/* Worker grid */
.worker-grid { display:flex; flex-wrap:wrap; gap:.65rem; margin-bottom:1rem; }
.worker-card { 
  background:linear-gradient(135deg, rgba(34,197,94,.08) 0%, rgba(34,197,94,.02) 100%);
  border:1px solid rgba(34,197,94,.2);
  border-radius:8px; 
  padding:.55rem 1rem; 
  display:flex; 
  align-items:center; 
  gap:.6rem; 
  font-size:.77rem;
  transition:all .2s ease;
}
.worker-card:hover {
  border-color:rgba(34,197,94,.4);
  box-shadow:0 2px 8px rgba(34,197,94,.15);
}

/* Activity feed */
.message-feed { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.msg-row { display:grid; grid-template-columns:130px 110px 1fr 1fr; gap:.6rem; padding:.5rem 1rem; border-bottom:1px solid var(--border); font-size:.77rem; align-items:center; }
.msg-row:last-child { border-bottom:none; }
.msg-time    { color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.msg-server  { color:var(--accent); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-author  { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-content { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }

/* Add form */
.add-form { 
  background:linear-gradient(135deg, rgba(88,101,242,.05) 0%, transparent 100%);
  border:1px dashed rgba(88,101,242,.25);
  border-radius:10px; 
  padding:1.25rem 1.6rem; 
  margin-bottom:1.25rem; 
  display:flex; flex-direction:column; gap:.95rem;
  transition:all .2s ease;
}
.add-form:hover {
  border-color:rgba(88,101,242,.4);
  background:linear-gradient(135deg, rgba(88,101,242,.08) 0%, rgba(88,101,242,.02) 100%);
}
.form-actions { display:flex; gap:.6rem; }

/* Settings blocks */
.settings-block { 
  background:linear-gradient(135deg, var(--surface2) 0%, var(--surface) 100%);
  border:1px solid rgba(88,101,242,.12);
  border-radius:10px; 
  padding:1.2rem 1.4rem; 
  margin-bottom:.85rem; 
  max-width:580px;
  transition:all .3s ease;
}
.settings-block:hover {
  border-color:rgba(88,101,242,.25);
  box-shadow:0 4px 16px rgba(0,0,0,.2);
}
.settings-block-title { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:.65rem; display:flex; align-items:center; }

/* Accent swatches */
.accent-swatches { display:flex; gap:.5rem; }
.swatch { width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:transform .15s,border-color .15s; }
.swatch:hover { transform:scale(1.15); border-color:rgba(255,255,255,.3); }

/* Modal */
.modal-overlay { 
  position:fixed; inset:0; z-index:500; 
  background:rgba(0,0,0,.7); 
  backdrop-filter:blur(6px); 
  display:flex; align-items:center; justify-content:center;
}
.modal-box     { 
  background:linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
  border:1px solid rgba(88,101,242,.2);
  border-radius:12px; 
  padding:1.85rem 2.1rem; 
  width:100%; 
  max-width:400px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  animation:modalSlide .3s ease;
}
@keyframes modalSlide { from { opacity:0; transform:scale(.95); } to { opacity:1; transform:scale(1); } }
.modal-title   { font-size:1rem; font-weight:700; margin-bottom:.25rem; }
.modal-sub     { font-size:.82rem; color:var(--muted); margin-bottom:.75rem; }

/* ═══════════════════════════════════════════════════════
   TABLES
═══════════════════════════════════════════════════════ */
.table-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead { background:rgba(255,255,255,.02); }
th { text-align:left; padding:.65rem 1rem; font-size:.63rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); border-bottom:1px solid var(--border); white-space:nowrap; }
td { padding:.52rem 1rem; border-bottom:1px solid var(--border); color:var(--text); vertical-align:middle; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
td.wrap { white-space:normal; word-break:break-word; }
tbody tr:last-child td { border-bottom:none; }
tbody tr { transition:background .1s; }
tbody tr:hover td { background:rgba(255,255,255,.02); }
.empty { color:var(--muted); text-align:center; padding:2rem; white-space:normal; }

/* ═══════════════════════════════════════════════════════
   BADGES
═══════════════════════════════════════════════════════ */
.badge         { display:inline-block; padding:.18rem .55rem; border-radius:99px; font-size:.65rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.badge-live    { background:rgba(34,197,94,.12); color:var(--success); }
.badge-active  { background:var(--accent-dim); color:var(--accent); }
.badge-inactive{ background:rgba(107,114,128,.1); color:var(--muted); }
.badge-running { background:rgba(34,197,94,.1); color:var(--success); margin-left:3px; }

/* Buttons */
.btn { 
  display:inline-flex; align-items:center; gap:.35rem; 
  padding:.5rem 1rem; border-radius:8px; 
  font-size:.82rem; font-weight:600; 
  cursor:pointer; border:none; 
  transition:all .2s cubic-bezier(.4, 0, .2, 1);
  font-family:var(--font); white-space:nowrap;
}
.btn-primary { 
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-h) 100%);
  color:#fff;
  box-shadow:0 4px 12px rgba(88,101,242,.3);
}
.btn-primary:hover { 
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(88,101,242,.4);
}
.btn-ghost   { 
  background:transparent; color:var(--muted); 
  border:1px solid var(--border);
  transition:all .2s;
}
.btn-ghost:hover { 
  background:rgba(88,101,242,.08); 
  color:var(--text); 
  border-color:rgba(88,101,242,.3);
}

/* ═══════════════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════════════ */
.field { display:flex; flex-direction:column; gap:.35rem; }
.field label { font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
input[type="text"], input[type="password"], input[type="number"], input[type="date"] {
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text); padding:.52rem .8rem; font-size:.88rem;
  outline:none; transition:border-color .15s,box-shadow .15s;
  width:100%; font-family:var(--font);
}
input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(88,101,242,.12); }
input[type="date"]::-webkit-calendar-picker-indicator { filter:invert(.5); }

/* ═══════════════════════════════════════════════════════
   ALERTS
═══════════════════════════════════════════════════════ */
.alert { padding:.55rem .85rem; border-radius:var(--radius); font-size:.8rem; font-weight:500; }
.alert-error { background:rgba(239,68,68,.09); color:var(--danger); border:1px solid rgba(239,68,68,.18); }

/* ═══════════════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════════════ */
.pagination { display:flex; gap:.4rem; margin-top:.85rem; align-items:center; flex-wrap:wrap; }
.page-btn   { padding:.28rem .65rem; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface); color:var(--muted); cursor:pointer; font-size:.75rem; font-family:var(--font); transition:background .12s,color .12s; }
.page-btn:hover { background:var(--surface2); color:var(--text); }
.page-btn.cur { background:var(--accent); border-color:var(--accent); color:#fff; }
.page-info  { color:var(--muted); font-size:.76rem; margin-right:.35rem; }

/* ═══════════════════════════════════════════════════════
   UTILITY
═══════════════════════════════════════════════════════ */
.hidden { display:none !important; }
.mono   { font-family:monospace; font-size:.8rem; }
mark    { background:rgba(88,101,242,.3); color:var(--text); border-radius:2px; padding:0 2px; }