/* =========================================================================
   Techistan — admin app refresh
   Loaded after style.css on every dashboard page (and login).
   ===================================================================== */
:root{
  --panel:rgba(16,18,27,.72);
  --panel-2:rgba(22,25,36,.78);
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.13);
  --gold-soft:rgba(240,196,58,.1);
  --gold-line:rgba(240,196,58,.26);
  --r-lg:20px;
  --r-md:14px;
  --r-sm:10px;
  --sb-w:264px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------- base ---------- */
.app-body{font-size:15px;line-height:1.6;overflow-x:hidden}
.app-body img{height:auto}
.app-body a{transition:color .2s}
.app-body :focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
.app-body .bg-aurora span{opacity:.18;filter:blur(90px)}
.app-body .bg-aurora span:nth-child(2){opacity:.22}
.app-body .bg-aurora span:nth-child(3){opacity:.1}
.app-body .bg-grid{opacity:.6}
.app-body ::-webkit-scrollbar{width:10px;height:10px}
.app-body ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
.app-body ::-webkit-scrollbar-thumb:hover{background:rgba(240,196,58,.35);background-clip:padding-box}

/* =====================================================================
   SIDEBAR
   ================================================================= */
.app-body .sidebar{
  width:var(--sb-w);
  background:linear-gradient(180deg,rgba(13,14,21,.96),rgba(8,9,14,.98));
  border-right:1px solid var(--line);
  backdrop-filter:blur(20px);
  padding:0 14px;
}
.app-body .sidebar-brand{
  display:flex;align-items:center;gap:11px;
  padding:22px 8px 20px;margin:0;border-bottom:1px solid var(--line);
  font-size:1.16rem;
}
.app-body .sidebar-brand .logo-img{width:34px;height:34px}
.app-body .brand-tag{
  margin-left:auto;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;color:var(--gold-2);background:var(--gold-soft);border:1px solid var(--gold-line);
}
.app-body .sidebar-nav{padding:14px 0;gap:0}
.nav-group{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.nav-group-label{
  display:block;padding:0 12px 8px;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
}
.app-body .nav-link{
  gap:12px;padding:10px 12px;border-radius:11px;font-size:.93rem;color:var(--muted);font-weight:500;
  border:1px solid transparent;
}
.app-body .nav-link .nav-ic,.app-body .nav-link .nav-ic svg{width:18px;height:18px}
.app-body .nav-link:hover{background:rgba(255,255,255,.045);color:#fff}
.app-body .nav-link.active{
  background:linear-gradient(90deg,rgba(240,196,58,.16),rgba(240,196,58,.04));
  border-color:var(--gold-line);color:#fff;font-weight:600;box-shadow:none;
}
.app-body .nav-link.active .nav-ic{color:var(--gold)}
.app-body .nav-link.active::before{
  content:"";position:absolute;left:-15px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--gold);
  box-shadow:0 0 12px rgba(240,196,58,.8);
}
.nav-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-state{width:7px;height:7px;border-radius:50%;flex:none}
.nav-state.on{background:var(--success);box-shadow:0 0 0 3px rgba(46,230,166,.15)}
.nav-state.off{background:rgba(255,255,255,.18)}

.sidebar-auto{
  display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:13px 14px;border-radius:var(--r-md);
  border:1px solid var(--line);background:rgba(255,255,255,.03);transition:border-color .2s,background .2s;
}
.sidebar-auto:hover{border-color:var(--gold-line);background:var(--gold-soft)}
.sa-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
.sa-ic svg{width:17px;height:17px}
.sidebar-auto.on .sa-ic{background:var(--grad-primary);color:var(--ink);box-shadow:0 8px 20px -8px rgba(240,196,58,.8)}
.sidebar-auto.off .sa-ic{background:rgba(255,255,255,.07);color:var(--muted)}
.sa-body{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.sa-body b{font-size:.88rem;font-weight:600}
.sa-body small{font-size:.76rem;color:var(--muted-2)}

.app-body .sidebar-foot{padding:14px 4px 18px;border-top:1px solid var(--line);gap:11px}
.app-body .sf-avatar{width:36px;height:36px;border-radius:50%;font-size:.9rem;flex:none}
.app-body .sf-meta{flex:1;min-width:0}
.app-body .sf-name{font-size:.86rem}
.app-body .sf-mail{max-width:none;font-size:.75rem}
.sf-logout{
  width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;color:var(--muted);
  border:1px solid var(--line);transition:all .2s;
}
.sf-logout svg{width:16px;height:16px}
.sf-logout:hover{color:#ff8ba0;border-color:rgba(255,92,122,.35);background:rgba(255,92,122,.1)}

/* =====================================================================
   MAIN + TOPBAR
   ================================================================= */
.app-body .app-main{margin-left:var(--sb-w);position:relative;z-index:1}
/* Let the fixed sidebar (z 60) sit above the mobile overlay (z 55). */
.app-body .app-shell{z-index:auto}
.app-body .topbar{
  padding:14px 32px;gap:16px;min-height:72px;
  background:rgba(7,8,13,.7);border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
}
.topbar-title{min-width:0}
.topbar-crumb{display:block;font-size:.74rem;color:var(--muted-2);letter-spacing:.02em;line-height:1.2}
.topbar-crumb i{font-style:normal;opacity:.5;margin:0 3px}
.app-body .topbar-title h1{font-size:1.28rem;font-weight:700;letter-spacing:-.025em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-body .topbar-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.topbar-date{font-size:.82rem;color:var(--muted-2);padding-right:6px}
.app-body .status-pill{padding:7px 13px;font-size:.78rem;gap:8px}
.app-body .status-pill .dot-live{width:7px;height:7px}
.topbar-btn{
  display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;font-size:.8rem;font-weight:600;
  color:var(--text);border:1px solid var(--line-2);background:rgba(255,255,255,.04);transition:all .2s;
}
.topbar-btn svg{width:14px;height:14px}
.topbar-btn:hover{border-color:var(--gold-line);color:var(--gold-2);background:var(--gold-soft)}
.topbar-avatar{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.88rem;
  background:var(--grad-warm);color:var(--ink);box-shadow:0 0 0 3px rgba(240,196,58,.15);flex:none;
}
.app-body .hamburger{
  width:40px;height:40px;border-radius:11px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);
  align-items:center;justify-content:center;padding:0;flex:none;
}
.app-body .hamburger span{width:18px}

.app-body .content{padding:30px 32px 40px;width:100%;max-width:1380px;margin:0 auto}
.app-body .app-footer{padding:18px 32px;border-top:1px solid var(--line);font-size:.8rem}
.af-links{display:inline-flex;gap:18px}
.af-links a:hover{color:var(--gold)}

/* =====================================================================
   PAGE HERO
   ================================================================= */
.app-body .page-hero,.app-body .grok-hero{
  position:relative;overflow:hidden;border-radius:var(--r-lg);padding:30px 32px;margin-bottom:24px;
  background:
    radial-gradient(640px 260px at 100% 0%,rgba(240,196,58,.16),transparent 60%),
    radial-gradient(520px 260px at 0% 120%,rgba(124,108,255,.12),transparent 60%),
    linear-gradient(160deg,rgba(22,22,30,.9),rgba(11,12,18,.92));
  border:1px solid var(--gold-line);
  box-shadow:0 30px 60px -40px rgba(240,196,58,.45);
}
.app-body .page-hero::after,.app-body .grok-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(90deg,transparent 30%,#000);-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000);
}
.app-body .page-hero > :not(.page-hero-glow),.app-body .grok-hero > :not(.grok-hero-glow){position:relative;z-index:1}
.app-body .page-hero-glow,.app-body .grok-hero-glow{position:absolute;pointer-events:none;z-index:0}
.app-body .page-kicker{
  display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-2);background:var(--gold-soft);border:1px solid var(--gold-line);
}
.app-body .page-kicker .dot-live{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(46,230,166,.2)}
.app-body .page-hero h2,.app-body .grok-hero h3{
  font-size:clamp(1.5rem,2.6vw,2.15rem);font-weight:700;letter-spacing:-.035em;line-height:1.15;margin:14px 0 10px;max-width:760px;
}
.app-body .page-hero h2 em{
  font-family:var(--font-serif);font-style:italic;font-weight:400;
  background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.05em;
}
.app-body .page-hero p,.app-body .grok-hero p{color:var(--muted);max-width:660px;font-size:.98rem}
.app-body .page-hero .conn,.app-body .grok-hero .conn{align-items:center;gap:22px}
.app-body .page-hero .conn-body h2{margin-top:12px!important}

.hero-split{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}

/* =====================================================================
   CARDS
   ================================================================= */
.app-body .grid{gap:18px}
.app-body .card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 20px 40px -30px rgba(0,0,0,.9);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.app-body .grid > .card:hover{transform:none;border-color:var(--line-2)}
.app-body .card.glass{
  background:radial-gradient(ellipse at top right,rgba(240,196,58,.12),transparent 60%),var(--panel-2);
  border-color:var(--gold-line);
}
.app-body .card-head{margin-bottom:16px;flex-wrap:wrap}
.app-body .card-head h3{font-size:1.06rem;font-weight:650;letter-spacing:-.015em;display:flex;align-items:center;gap:8px}
.app-body .card-head p{font-size:.85rem;color:var(--muted-2);margin-top:2px}
.card-flush{padding:0!important;overflow:hidden}
.card-flush > .card-head{padding:20px 24px 0}

.app-body .section-title{font-size:1.1rem;font-weight:650;margin:36px 0 14px;letter-spacing:-.02em}
.app-body .section-title::before{width:6px;height:18px;border-radius:3px}
.section-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:36px 0 14px}
.section-row .section-title{margin:0}
.link-more{font-size:.84rem;font-weight:600;color:var(--gold);display:inline-flex;align-items:center;gap:4px}
.link-more:hover{color:var(--gold-2)}

/* ---------- stat cards ---------- */
.app-body .stat-card{padding:20px 22px;display:flex;flex-direction:column;gap:2px}
.app-body .stat-card .stat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.app-body .stat-card .stat-ic{width:40px;height:40px;border-radius:12px;margin:0}
.app-body .stat-card .stat-ic svg{width:19px;height:19px}
.app-body .stat-card h2{font-size:2rem;font-weight:700;letter-spacing:-.04em;line-height:1.1;background:none;-webkit-text-fill-color:currentColor;color:var(--text)}
.app-body .stat-card span.lbl{font-size:.86rem;color:var(--muted)}
.stat-meta{font-size:.74rem;font-weight:600;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--muted)}
.stat-meta.up{background:rgba(46,230,166,.12);color:var(--success)}
.stat-meta.down{background:rgba(255,92,122,.12);color:#ff8ba0}
.stat-bar{height:5px;border-radius:5px;background:rgba(255,255,255,.07);margin-top:14px;overflow:hidden}
.stat-bar i{display:block;height:100%;border-radius:inherit;background:var(--grad-primary)}
.stat-bar.green i{background:linear-gradient(90deg,#2ee6a6,#3ee0d4)}
.stat-bar.pink i{background:linear-gradient(90deg,#ff5c7a,#ff5da2)}
.stat-bar.cyan i{background:linear-gradient(90deg,#3ee0d4,#7c6cff)}

/* ---------- connections ---------- */
.app-body .conn{gap:16px}
.app-body .conn .logo-badge{width:48px;height:48px;border-radius:14px}
.app-body .conn .logo-badge svg{width:24px;height:24px}
.app-body .page-hero .conn .logo-badge,.app-body .grok-hero .conn .logo-badge{width:64px;height:64px;border-radius:18px}
.app-body .page-hero .conn .logo-badge svg,.app-body .grok-hero .conn .logo-badge svg{width:32px;height:32px}
.app-body .conn .conn-body h3{font-size:1.02rem;font-weight:650}
.app-body .conn .conn-body p{font-size:.86rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.conn-list{display:flex;flex-direction:column}
.conn-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.conn-row:first-child{padding-top:0}
.conn-row:last-child{border-bottom:0;padding-bottom:0}
.conn-row .logo-badge{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.conn-row .logo-badge svg{width:20px;height:20px}
.conn-row-body{flex:1;min-width:0}
.conn-row-body b{display:block;font-size:.92rem;font-weight:600}
.conn-row-body small{display:block;color:var(--muted-2);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conn-row .btn{flex:none}

/* ---------- key/value ---------- */
.app-body .kv{
  grid-template-columns:minmax(120px,auto) 1fr;gap:0;margin-top:4px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
}
.app-body .kv dt,.app-body .kv dd{padding:11px 16px;border-bottom:1px solid var(--line)}
.app-body .kv dt{background:rgba(255,255,255,.025);font-size:.82rem;color:var(--muted-2)}
.app-body .kv dd{font-size:.88rem}
.app-body .kv dt:last-of-type,.app-body .kv dd:last-of-type{border-bottom:0}

/* =====================================================================
   BUTTONS / BADGES / ALERTS
   ================================================================= */
.app-body .btn,.auth-page .btn{border-radius:11px;padding:10px 18px;font-size:.9rem;gap:8px;justify-content:center;line-height:1.3}
.app-body .btn-lg,.auth-page .btn-lg{padding:13px 24px;font-size:.96rem}
.app-body .btn-sm{padding:7px 13px;font-size:.8rem;border-radius:9px}
.app-body .btn-primary,.auth-page .btn-primary{box-shadow:0 10px 26px -12px rgba(240,196,58,.8),inset 0 1px 0 rgba(255,255,255,.45)}
.app-body .btn-ghost{background:rgba(255,255,255,.045);border:1px solid var(--line-2)}
.app-body .btn-ghost:hover{border-color:var(--gold-line);color:var(--gold-2)}
.app-body .btn:active,.auth-page .btn:active{transform:translateY(0) scale(.98)}
.app-body form .btn + .btn,.app-body form .btn + a.btn{margin-left:6px}

.app-body .badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;font-size:.72rem;font-weight:650;letter-spacing:.01em;
  border:1px solid transparent;line-height:1.35;white-space:nowrap;
}
.app-body .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85;flex:none}
.app-body .badge-success{border-color:rgba(46,230,166,.25)}
.app-body .badge-info{border-color:rgba(240,196,58,.25)}
.app-body .badge-danger{border-color:rgba(255,92,122,.25)}
.app-body .badge-muted{border-color:var(--line-2)}
.app-body .badge-warn{border-color:rgba(255,176,32,.28)}
.app-body .badge-danger.mt{display:flex;white-space:normal;border-radius:10px;padding:8px 10px;align-items:flex-start}
.app-body .badge-danger.mt::before{margin-top:5px}

.app-body .alert,.auth-page .alert{
  position:relative;padding:13px 16px 13px 44px;border-radius:var(--r-md);font-size:.9rem;line-height:1.55;
}
.app-body .alert::before,.auth-page .alert::before{
  content:"i";position:absolute;left:14px;top:13px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font-size:.72rem;font-weight:800;font-family:var(--font);
  background:#f0c43a;color:#16120a;
}
.app-body .alert-success::before,.auth-page .alert-success::before{background:#2ee6a6;color:#05261b}
.app-body .alert-warning::before{background:#ffb020;color:#2a1a00}
.app-body .alert-danger::before,.auth-page .alert-danger::before{background:#ff5c7a;color:#2b0710}
.app-body .alert-success::before,.auth-page .alert-success::before{content:"✓"}
.app-body .alert-danger::before,.auth-page .alert-danger::before{content:"!"}
.app-body .alert-warning::before{content:"!"}
.app-body .alert.mono{padding-left:16px;font-family:var(--mono);font-size:.8rem;background:rgba(0,0,0,.35);border:1px dashed var(--gold-line);color:var(--gold-2)}
.app-body .alert.mono::before{display:none}
.app-body .alert a{text-decoration:underline;text-underline-offset:2px}

/* =====================================================================
   FORMS
   ================================================================= */
.app-body .field,.auth-page .field{margin-bottom:16px}
.app-body .field label,.auth-page .field label{font-size:.82rem;font-weight:600;color:var(--text);margin-bottom:7px}
.app-body .field label .muted{font-weight:400}
.app-body .field input,.app-body .field select,.app-body .field textarea,
.auth-page .field input{
  background:rgba(0,0,0,.28);border:1px solid var(--line-2);border-radius:11px;padding:11px 14px;font-size:.93rem;font-family:inherit;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.app-body .field input:hover,.app-body .field select:hover,.app-body .field textarea:hover,.auth-page .field input:hover{border-color:rgba(255,255,255,.22)}
.app-body .field input:focus,.app-body .field select:focus,.app-body .field textarea:focus,.auth-page .field input:focus{
  background:rgba(0,0,0,.4);border-color:var(--gold);box-shadow:0 0 0 4px rgba(240,196,58,.14);
}
.app-body .field input::placeholder,.app-body .field textarea::placeholder,.auth-page .field input::placeholder{color:var(--muted-2);opacity:.7}
.app-body .field select{appearance:none;-webkit-appearance:none;padding-right:40px;
  background:rgba(0,0,0,.28) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8b0c7' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 14px center/16px no-repeat}
.app-body .field select option{background:#12141c}
.app-body .field .hint{font-size:.78rem;color:var(--muted-2);margin-top:6px}
.app-body .field input[type=checkbox]{width:18px;height:18px;padding:0;accent-color:var(--gold);vertical-align:-3px;margin-right:8px}
.app-body .field label:has(input[type=checkbox]){display:flex;align-items:center;font-weight:500;cursor:pointer;
  padding:12px 14px;border-radius:11px;border:1px solid var(--line-2);background:rgba(255,255,255,.025)}
.app-body .card form > .btn-lg:last-child,.app-body .card form > .btn:last-of-type{margin-top:4px}
.app-body input[type=file]{font-family:inherit}
.app-body code{font-family:var(--mono);font-size:.82em;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.07);color:var(--gold-2)}

/* toggle switch */
.app-body .switch{width:56px;height:30px}
.app-body .switch .slider{background:rgba(255,255,255,.1);border-color:var(--line-2)}
.app-body .switch .slider::before{width:22px;height:22px;left:3px;top:3px}
.app-body .switch input:focus-visible + .slider{outline:2px solid var(--gold);outline-offset:3px}

/* =====================================================================
   TABLES
   ================================================================= */
.app-body .table-wrap{border-radius:0;border:0}
.app-body table.data{font-size:.88rem}
.app-body table.data th{
  padding:12px 20px;font-size:.7rem;letter-spacing:.1em;color:var(--muted-2);background:rgba(255,255,255,.025);border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.app-body table.data td{padding:14px 20px;border-bottom:1px solid var(--line);vertical-align:middle}
.app-body table.data tr:hover td{background:rgba(240,196,58,.035)}
.app-body .post-snippet{color:var(--muted);font-size:.86rem;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.app-body td .topic{font-weight:600;color:var(--text);line-height:1.4}
.app-body .mono{font-family:var(--mono);font-size:.78rem}
.app-body td.mono{white-space:nowrap}
.app-body td a.mono{color:var(--gold)}

.post-cell{display:flex;align-items:center;gap:14px;min-width:260px}
.post-cell-body{min-width:0;max-width:560px}
.post-cell .topic{margin-bottom:3px}
.post-thumb{width:52px;height:52px;border-radius:11px;object-fit:cover;flex:none;border:1px solid var(--line-2);background:#0b0c10}
.post-thumb-empty{display:grid;place-items:center;color:var(--muted-2);background:rgba(255,255,255,.03)}
.post-thumb-empty svg{width:20px;height:20px}
.post-source{display:inline-flex;margin-top:4px;font-size:.76rem;font-weight:600;color:var(--gold)}
.post-source:hover{color:var(--gold-2)}

/* dashboard split: chart + connections */
.dash-split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:18px;align-items:stretch}
@media (max-width:1100px){.dash-split{grid-template-columns:1fr}}

/* =====================================================================
   ACTIVITY LOG
   ================================================================= */
.log-list{display:flex;flex-direction:column;position:relative}
.log-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.log-item:first-child{padding-top:0}
.log-item:last-child{border-bottom:0;padding-bottom:0}
.log-dot{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}
.log-dot svg{width:15px;height:15px}
.log-dot.success{background:rgba(46,230,166,.12);color:var(--success)}
.log-dot.error{background:rgba(255,92,122,.12);color:#ff8ba0}
.log-dot.warning{background:rgba(255,176,32,.12);color:#ffc04d}
.log-dot.info{background:rgba(240,196,58,.1);color:var(--gold)}
.log-msg{font-size:.87rem;color:var(--text);line-height:1.5;word-break:break-word;min-width:0;padding-top:4px}
.log-time{font-family:var(--mono);font-size:.74rem;color:var(--muted-2);white-space:nowrap;padding-top:6px}

/* =====================================================================
   EMPTY STATES
   ================================================================= */
.app-body .empty{padding:52px 20px}
.app-body .empty h3{font-size:1.08rem;color:var(--text);margin-bottom:6px}
.app-body .empty p{max-width:380px;margin:0 auto;font-size:.9rem}
.app-body .empty .em-ic{width:60px;height:60px;border-radius:18px;background:var(--gold-soft);border:1px solid var(--gold-line)}
.app-body .empty .em-ic svg{width:28px;height:28px}
.empty-sm{padding:24px 10px;text-align:center;color:var(--muted-2);font-size:.88rem}

/* =====================================================================
   CHART
   ================================================================= */
.app-body .chart-card .chart{
  height:210px;gap:14px;padding:26px 4px 0;position:relative;
  background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 25%;background-position:0 26px;
}
.app-body .chart-col .clbl{font-size:.7rem;font-weight:600;margin-top:4px}
.app-body .chart-col.today .clbl{color:var(--gold)}
.app-body .chart-bar{max-width:46px;border-radius:9px 9px 4px 4px;background:linear-gradient(180deg,#ffe889,#f0c43a 45%,rgba(224,163,26,.55));
  box-shadow:0 10px 24px -12px rgba(240,196,58,.8)}
.app-body .chart-bar.empty{background:rgba(255,255,255,.06);box-shadow:none}
.app-body .chart-bar .cval{color:var(--text);font-size:.74rem}
.app-body .chart-bar.empty .cval{color:var(--muted-2)}
.app-body .trend-chip{padding:5px 11px;font-size:.76rem}

/* =====================================================================
   DAILY POSTS
   ================================================================= */
.app-body .toggle-row .tr-body h3{font-size:1.15rem;font-weight:650}
.app-body .toggle-row .tr-body p{font-size:.9rem;margin-top:4px;max-width:620px}
.app-body .countdown-card{
  border-radius:var(--r-lg);border-color:var(--gold-line);
  background:radial-gradient(600px 220px at 0% 0%,rgba(240,196,58,.12),transparent 60%),linear-gradient(135deg,rgba(20,22,32,.92),rgba(12,13,22,.94));
}
.app-body .cd-eyebrow{color:var(--gold-2);font-size:.72rem}
.app-body .cd-eyebrow .dot-live{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(46,230,166,.2)}
.app-body .cd-timer{background:linear-gradient(90deg,#fff,#ffe889);-webkit-background-clip:text;background-clip:text;letter-spacing:-.01em}
.app-body .cd-progress{stroke:var(--gold)}
.app-body .fm-chip{font-size:.78rem;padding:5px 11px;background:rgba(255,255,255,.04);border-color:var(--line-2)}
.app-body .ai-studio{border-color:var(--gold-line)}
.app-body .studio-import{border-radius:var(--r-md);background:linear-gradient(135deg,rgba(240,196,58,.07),rgba(124,108,255,.04));border-color:var(--gold-line)}
.app-body .studio-import input[type=file]{border-radius:11px;background:rgba(0,0,0,.25)}
.app-body .ai-loading{border-radius:var(--r-md)}
.app-body .ai-preview{border-radius:var(--r-md)}
.app-body #runResult .alert{margin-bottom:0}

/* ---------- step flows (ChatGPT / Grok) ---------- */
.app-body .gpt-steps{gap:14px}
.app-body .gpt-step{padding:20px;border-radius:var(--r-md);background:rgba(255,255,255,.025);border:1px solid var(--line-2)}
.app-body .gpt-step-num{width:34px;height:34px;font-size:.95rem}
.app-body .gpt-step-body h4{font-size:1rem;font-weight:650}
.app-body .gpt-step-body p{font-size:.9rem}
.app-body .grok-code-wrap{border-radius:var(--r-md)}
.app-body .grok-return-hint{border-radius:var(--r-md);font-size:.88rem}
.app-body .gpt-help summary{font-size:.9rem}

/* =====================================================================
   SETTINGS
   ================================================================= */
.app-body .field-row{gap:14px}
.settings-nav{display:flex;gap:8px;flex-wrap:wrap;margin:-6px 0 20px}
.settings-nav a{
  padding:8px 14px;border-radius:999px;font-size:.84rem;font-weight:600;color:var(--muted);
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);transition:all .2s;
}
.settings-nav a:hover{color:var(--gold-2);border-color:var(--gold-line);background:var(--gold-soft)}
.app-body [id]{scroll-margin-top:96px}

/* =====================================================================
   LOGIN
   ================================================================= */
.auth-page .auth-split{grid-template-columns:1.1fr 1fr}
.auth-page .auth-brand{padding:48px 56px;border-right:1px solid var(--line)}
.auth-page .auth-brand .logo{font-size:1.3rem;gap:12px}
.auth-page .auth-brand .logo-img{width:40px;height:40px;border-radius:50%}
.auth-page .auth-brand h2{font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.04em;line-height:1.08;font-weight:700}
.auth-page .auth-brand h2 .grad{font-family:var(--font-serif);font-style:italic;font-weight:400}
.auth-page .auth-point .apc{border-radius:50%}
.auth-preview{
  position:relative;z-index:1;margin-top:34px;display:flex;align-items:center;gap:14px;max-width:420px;
  padding:14px;border-radius:var(--r-md);background:rgba(10,11,16,.6);border:1px solid var(--line-2);backdrop-filter:blur(10px);
}
.auth-preview img{width:68px;height:68px;border-radius:12px;object-fit:cover;flex:none;border:1px solid var(--line-2)}
.auth-preview b{display:block;font-size:.92rem}
.auth-preview small{color:var(--muted-2);font-size:.8rem;display:flex;align-items:center;gap:7px}
.auth-preview small i{width:7px;height:7px;border-radius:50%;background:var(--success);display:inline-block}
.auth-page .auth-form-side{background:radial-gradient(500px 300px at 50% 0%,rgba(240,196,58,.06),transparent 70%),var(--bg)}
.auth-page .auth-form-card{width:min(410px,100%);padding:36px 32px;border-radius:24px;background:var(--panel);border:1px solid var(--line);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.auth-mobile-logo{display:none;align-items:center;gap:10px;font-weight:700;font-size:1.15rem;margin-bottom:26px}
.auth-mobile-logo img{width:34px;height:34px;border-radius:50%}
.auth-mobile-logo .dot{color:var(--gold)}
.auth-page .auth-form-card h1{font-size:1.6rem;letter-spacing:-.03em}
.auth-page .auth-form-card .sub{font-size:.93rem;margin-bottom:26px}
.pass-wrap{position:relative}
.pass-wrap input{padding-right:70px!important}
.pass-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.06);border:1px solid var(--line-2);
  color:var(--muted);font-size:.75rem;font-weight:600;padding:5px 10px;border-radius:8px;cursor:pointer}
.pass-toggle:hover{color:var(--gold-2);border-color:var(--gold-line)}
.auth-back{display:block;text-align:center;margin-top:20px;font-size:.86rem;color:var(--muted)}
.auth-back:hover{color:var(--gold)}
.auth-secure{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:16px;font-size:.76rem;color:var(--muted-2)}
.auth-secure svg{width:13px;height:13px}

/* =====================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width:1180px){
  .topbar-date{display:none}
}
@media (max-width:860px){
  .app-body .app-main{margin-left:0}
  .app-body .sidebar{box-shadow:30px 0 60px rgba(0,0,0,.6)}
  .app-body .topbar{padding:12px 18px;min-height:64px}
  .app-body .content{padding:22px 18px 32px}
  .app-body .app-footer{padding:16px 18px}
  .topbar-btn span{display:none}
  .topbar-btn{padding:9px}
  .app-body .page-hero,.app-body .grok-hero{padding:24px 22px}
}
@media (max-width:640px){
  .app-body .status-pill .sp-text{display:none}
  .app-body .status-pill{padding:9px}
  .topbar-crumb{display:none}
  .app-body .topbar-title h1{font-size:1.1rem}
  .app-body .card{padding:20px 18px}
  .card-flush > .card-head{padding:18px 18px 0}
  .app-body .page-hero .conn,.app-body .grok-hero .conn{flex-direction:column;align-items:flex-start}
  .hero-actions,.hero-actions .btn{width:100%}
  .app-body .kv{grid-template-columns:1fr}
  .app-body .kv dt{border-bottom:0;padding-bottom:2px}
  .app-body .kv dd{padding-top:2px}
  .app-body form .btn + .btn,.app-body form .btn + a.btn{margin:10px 0 0}
  .app-body .card form .btn{width:100%}
  .log-item{grid-template-columns:auto 1fr}
  .log-time{grid-column:2;padding-top:0}
  .conn-row{flex-wrap:wrap}
  .conn-row .btn{width:100%}
  .app-body .app-footer{flex-direction:column;align-items:center;text-align:center}
  .auth-page .auth-form-card{padding:28px 22px;background:transparent;border:0;box-shadow:none}
}
@media (max-width:900px){
  .auth-mobile-logo{display:flex}
}
@media (max-width:640px){
  .app-body .grid-4{grid-template-columns:1fr 1fr}
  .post-cell{min-width:220px}
  .app-body table.data{min-width:520px}
}
@media (max-width:420px){
  .app-body .grid-4 .stat-card h2{font-size:1.6rem}
  .app-body .stat-card{padding:16px}
}
@media (prefers-reduced-motion:reduce){
  .app-body *,.auth-page *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}