@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800&family=Rajdhani:wght@500;600;700&family=Share+Tech+Mono&display=swap');

:root {
  --orange: #ff6a12;
  --amber: #ffc063;
  --violet: #b85cff;
  --blue: #4fa7ff;
  --green: #62ff96;
  --red: #ff5f50;
  --steel-0: #07080a;
  --steel-1: #101216;
  --steel-2: #181b20;
  --steel-3: #252a32;
  --steel-4: #383f48;
  --text: #f2e8dc;
  --muted: #b9a99b;
  --dim: #746b65;
  --line: rgba(255, 173, 92, .22);
  --clip: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  --mono: 'Share Tech Mono', monospace;
  --head: 'Orbitron', sans-serif;
  --body: 'Rajdhani', sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--steel-0); }
body { margin: 0; min-width: 320px; color: var(--text); font-family: var(--body); font-size: 18px; background: radial-gradient(ellipse at 68% -8%, rgba(255, 106, 18, .09), transparent 37%), radial-gradient(ellipse at 12% 80%, rgba(184, 92, 255, .05), transparent 31%), var(--steel-0); }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .3; background: repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, rgba(0,0,0,.035) 1px 3px, transparent 3px 5px); }
a { color: inherit; text-decoration: none; }
code { color: var(--amber); font-family: var(--mono); font-size: .82em; }

.shell { min-height: 100vh; display: grid; grid-template-columns: 278px minmax(0, 1fr); }
.side { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 23px 15px 18px; border-right: 1px solid rgba(255, 255, 255, .075); background: linear-gradient(180deg, rgba(29,33,40,.98), rgba(8,9,12,.99)); box-shadow: 12px 0 40px rgba(0,0,0,.25); z-index: 4; }
.brand-wrap { padding: 5px 4px 15px; border-bottom: 1px solid var(--line); }
.brand-wrap img { width: 100%; max-height: 94px; display: block; object-fit: contain; }
.side-kicker, .eyebrow, .plate-label { color: var(--muted); font: .62rem/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.side-kicker { padding: 15px 5px 17px; color: var(--orange); }
.nav-list { display: grid; gap: 6px; }
.nav-item { display: flex; align-items: center; gap: 11px; min-height: 47px; padding: 0 12px; color: #c9c0b9; font: 700 .67rem/1 var(--head); letter-spacing: .08em; clip-path: var(--clip); border: 1px solid transparent; transition: background .16s, border-color .16s, color .16s; }
.nav-mark { width: 7px; height: 7px; background: #5d5653; transform: rotate(45deg); box-shadow: 0 0 0 2px rgba(0,0,0,.7); }
.nav-item:hover { background: rgba(255, 106, 18, .1); color: var(--amber); border-color: rgba(255, 106, 18, .22); }
.nav-item.active { color: #150904; background: linear-gradient(180deg, var(--amber), var(--orange) 60%, #a93308); border-color: var(--orange); box-shadow: inset 0 1px rgba(255,255,255,.45), 0 0 20px rgba(255, 106, 18, .16); }
.nav-item.active .nav-mark { background: #1d0b03; }
.bot-state { display: grid; grid-template-columns: 12px 1fr; gap: 5px 8px; margin-top: auto; padding: 14px 11px; border: 1px solid rgba(255,255,255,.09); background: #0c0d10; clip-path: var(--clip); font: .55rem/1.25 var(--mono); letter-spacing: .09em; color: var(--muted); }
.bot-state b { grid-column: 2; color: var(--amber); font-size: .58rem; }
.signout { margin: 14px 7px 2px; color: var(--dim); font: .56rem var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.signout:hover { color: var(--amber); }

.main { width: min(1460px, 100%); padding: 28px clamp(20px, 4vw, 64px) 56px; margin: 0 auto; }
.topbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 0 22px; border-bottom: 1px solid rgba(255,255,255,.08); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; color: #fff; font: 800 clamp(1.25rem, 2vw, 1.75rem)/1 var(--head); letter-spacing: .06em; }
h2 { font: 800 clamp(1.55rem, 3vw, 2.7rem)/1.08 var(--head); letter-spacing: -.025em; text-transform: uppercase; }
h2 span { color: var(--orange); }
h3 { margin-bottom: 6px; font: 800 1rem/1.15 var(--head); letter-spacing: .035em; text-transform: uppercase; }
p { color: var(--muted); font-size: 1.05rem; line-height: 1.45; }
.account-chip { display: flex; align-items: center; gap: 9px; padding: 10px 13px; max-width: 270px; border: 1px solid rgba(255,255,255,.09); background: #101216; clip-path: var(--clip); color: var(--dim); font: .58rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.account-chip.connected { color: #dcffe8; border-color: rgba(98,255,150,.22); }
.pulse { width: 8px; height: 8px; align-self: center; border-radius: 100%; background: #605a58; box-shadow: 0 0 0 3px rgba(0,0,0,.45); }
.pulse.on { background: var(--green); box-shadow: 0 0 11px rgba(98,255,150,.7), 0 0 0 3px rgba(0,0,0,.45); }
.mobile-menu { display: none; }

.notice { margin: 22px 0 0; padding: 13px 17px; font: .72rem/1.4 var(--mono); letter-spacing: .04em; clip-path: var(--clip); }
.notice-good { color: #cbffdb; border: 1px solid rgba(98,255,150,.34); background: rgba(21,91,47,.2); }
.notice-bad { color: #ffd1cd; border: 1px solid rgba(255,95,80,.34); background: rgba(109,22,15,.25); }
.panel { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(145deg, rgba(41,47,56,.96), rgba(18,20,25,.99)); box-shadow: inset 0 1px rgba(255,255,255,.08), inset 0 -25px 38px rgba(0,0,0,.14), 0 18px 44px rgba(0,0,0,.16); clip-path: var(--clip); }
.panel::before { content: ''; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, rgba(0,0,0,.025) 1px 3px, transparent 3px 5px); }
.panel > * { position: relative; }
.dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.hero-panel { grid-column: span 2; min-height: 272px; padding: clamp(25px, 4vw, 48px); background: linear-gradient(118deg, rgba(43,47,54,.98), rgba(18,19,23,.96) 62%), radial-gradient(circle at 88% 28%, rgba(255,106,18,.18), transparent 32%); }
.hero-panel::after { content: ''; position: absolute; inset: 0 0 0 auto; width: 40%; border-left: 1px solid rgba(255, 106, 18, .12); background: linear-gradient(126deg, transparent 0 40%, rgba(255,106,18,.07) 41% 43%, transparent 44% 100%); opacity: .9; }
.hero-panel h2 { max-width: 680px; margin: 16px 0 14px; }
.hero-panel p { max-width: 610px; }
.status-panel { min-height: 125px; padding: 21px 20px; }
.status-value { margin: 14px 0 6px; font: 800 .91rem/1 var(--head); letter-spacing: .04em; }
.status-good { color: var(--green); text-shadow: 0 0 13px rgba(98,255,150,.28); }
.status-off { color: var(--amber); }
.status-panel p { margin: 0; color: var(--dim); font: .67rem/1.3 var(--mono); letter-spacing: .03em; }
.action-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; padding: 19px 22px; }
.action-panel h3 { margin: 6px 0 0; }
.action-panel p { margin: 3px 0 0; font-size: .9rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border: 1px solid transparent; cursor: pointer; clip-path: var(--clip); font: 800 .63rem/1 var(--head); letter-spacing: .09em; text-transform: uppercase; transition: transform .15s, box-shadow .15s, filter .15s; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn:active { transform: translateY(0); }
.primary { color: #1c0802; background: linear-gradient(180deg, #ffd18a, var(--orange) 60%, #a53108); box-shadow: inset 0 1px rgba(255,255,255,.5), 0 0 21px rgba(255,106,18,.22); }
.ghost { color: var(--amber); border-color: rgba(255, 106, 18, .36); background: linear-gradient(180deg, #282c33, #17191d); }

.empty-setup { max-width: 880px; margin: 52px auto; padding: clamp(28px, 5vw, 58px); text-align: center; }
.empty-setup h2 { margin: 17px auto; max-width: 680px; }
.empty-setup p { max-width: 620px; margin: 0 auto 24px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin: 35px 0 18px; }
.section-head h2 { margin: 10px 0 0; font-size: clamp(1.25rem, 2.3vw, 2rem); }
.section-head p { max-width: 445px; margin: 0; font-size: .92rem; }
.gated, .connect-card { padding: clamp(26px, 4vw, 45px); }
.connect-card { display: flex; justify-content: space-between; align-items: center; gap: 28px; }
.connect-card p { margin-bottom: 0; max-width: 700px; }

.command-list { overflow: hidden; }
.table-head, .command-row { display: grid; grid-template-columns: 1.2fr 1fr .75fr .65fr; gap: 12px; align-items: center; padding: 14px 20px; }
.table-head { border-bottom: 1px solid rgba(255, 106, 18, .22); color: var(--dim); font: .54rem/1 var(--mono); letter-spacing: .12em; }
.command-row { min-height: 52px; border-bottom: 1px solid rgba(255,255,255,.07); color: #ddd3c8; font: .78rem var(--mono); }
.command-row:last-child { border-bottom: none; }
.command-row small, .automation-row small { display: block; margin-top: 5px; color: var(--dim); font: .56rem/1.35 var(--mono); letter-spacing: .015em; text-transform: none; }
.command-head, .command-row-v2 { grid-template-columns: 1.2fr .88fr .7fr .88fr 1.55fr; }
.automation-head, .automation-row { grid-template-columns: 1.3fr .82fr 1.1fr 1.6fr; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; }
.row-actions form { margin: 0; }
.text-action { padding: 0; color: var(--amber); border: 0; background: transparent; cursor: pointer; font: .55rem/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.text-action:hover { color: #fff3d9; }
.text-action.danger { color: #ff9b90; }
.state { color: var(--dim); font: .55rem/1.2 var(--mono); text-transform: uppercase; }
.state.on { color: var(--green); }
.state.off { color: var(--amber); }
.muted { padding: 10px 20px; margin: 0; }
.form-panel { margin-top: 16px; padding: 24px; }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
label { display: grid; gap: 7px; color: var(--muted); font: .59rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
input, select, textarea { width: 100%; min-height: 43px; padding: 10px 12px; color: var(--text); border: 1px solid rgba(255,255,255,.14); outline: none; background: #0d0f13; font: .86rem var(--body); letter-spacing: .025em; transition: border-color .15s, box-shadow .15s; }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: rgba(255, 153, 67, .74); box-shadow: 0 0 0 3px rgba(255,106,18,.11); }
small { color: var(--dim); font: .58rem/1.45 var(--mono); letter-spacing: 0; text-transform: none; }
.wide { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; align-items: end; gap: 10px; }
.toggle { display: flex; grid-template-columns: auto 1fr; align-items: center; gap: 9px; padding-top: 24px; cursor: pointer; }
.toggle input { width: 17px; min-height: 17px; accent-color: var(--orange); }
.inline-form { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 19px; border-top: 1px solid rgba(255,255,255,.08); }
.inline-form span { color: var(--dim); font: .59rem/1.4 var(--mono); }

.setup-list { display: grid; margin-top: 19px; }
.setup-list > div { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px; min-height: 59px; padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,.07); }
.setup-list > div:last-child { border-bottom: none; }
.setup-list strong { font: 700 .84rem var(--body); letter-spacing: .04em; }
.setup-list b { color: var(--amber); font: .55rem var(--mono); letter-spacing: .09em; }
.setup-note { margin-top: 16px; padding: 21px; }
.setup-note p { margin: 10px 0 0; font-size: .9rem; }
.field-disabled { opacity: .42; }
.split-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.compact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel-copy { margin: 12px 0 18px; font-size: .9rem; }
.mini-list { display: grid; margin-top: 18px; border-top: 1px solid rgba(255,255,255,.08); }
.mini-list > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.07); color: #ded4c9; font: .7rem/1.35 var(--mono); }
.mini-list > div:last-child { border-bottom: none; }
.mini-list span { min-width: 0; overflow-wrap: anywhere; }
.mini-list strong { color: var(--amber); }
.queue-list { max-height: 320px; overflow: auto; }
.ranking { margin-top: 16px; }
.ranking-head, .ranking-row { grid-template-columns: .5fr 1.6fr .8fr .8fr .95fr; }
.status-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 19px 0 0; padding: 14px 17px; border: 1px solid rgba(255,255,255,.09); background: rgba(20,22,27,.8); clip-path: var(--clip); }
.status-strip .state { padding: 5px 7px; border: 1px solid currentColor; }

@media (max-width: 980px) {
  .shell { grid-template-columns: 228px minmax(0,1fr); }
  .side { padding-left: 11px; padding-right: 11px; }
  .main { padding-left: 25px; padding-right: 25px; }
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .status-panel:last-child { grid-column: span 2; }
  .form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .split-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .shell { display: block; }
  .side { position: fixed; width: min(88vw, 300px); left: -310px; transition: left .2s ease; }
  .side.open { left: 0; }
  .main { padding: 19px 15px 38px; }
  .mobile-menu { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--amber); border: 1px solid rgba(255,106,18,.35); background: var(--steel-2); font-size: 1.1rem; }
  .topbar { min-height: 58px; }
  .topbar > div:first-of-type { flex: 1; }
  .eyebrow { font-size: .48rem; }
  h1 { font-size: 1rem; }
  .account-chip { display: none; }
  .dashboard-grid { display: grid; grid-template-columns: 1fr; }
  .hero-panel, .status-panel:last-child { grid-column: span 1; }
  .hero-panel { min-height: 0; }
  .section-head, .connect-card, .action-panel { align-items: flex-start; flex-direction: column; gap: 14px; }
  .section-head { margin-top: 25px; }
  .form-grid { grid-template-columns: 1fr; }
  .compact-form { grid-template-columns: 1fr; }
  .split-grid { grid-template-columns: 1fr; }
  .table-head { display: none; }
  .command-row { grid-template-columns: 1fr 1fr; gap: 8px; padding: 15px; }
  .command-row code { grid-column: span 2; }
  .command-row-v2 > div:first-child, .automation-row > div:first-child { grid-column: span 2; }
  .command-row-v2 .row-actions, .automation-row .row-actions { grid-column: span 2; margin-top: 4px; }
  .inline-form { align-items: flex-start; flex-direction: column; }
  .ranking-row { grid-template-columns: repeat(2, 1fr); }
}