/* Milde Hub as adroom.ai: the whole app in the adroom design system (white + Signal Orange, Geist + JetBrains Mono,
   216px panel sidebar, radius max 6px). Not synced from the template. Tokens from public/adroom/tokens.css. */
:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --font: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-num: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --subtle: #F7F7F5;
  --subtle-2: #EFEFEC;
  --line: #E6E6E3;
  --line-strong: #D2D2CE;
  --text: #0E0E0E;
  --muted: #6B6B6B;
  --faint: #A3A39F;
  --inverse: #FFFFFF;
  --accent: #FF5A1F;
  --accent-hover: #F24C12;
  --accent-soft: #FFF1EA;
  --accent-text: #C2410C;
  --accent-ink: #0E0E0E;
  --primary: #FF5A1F;
  --primary-hover: #F24C12;
  --primary-ink: #0E0E0E;
  --ring: #FFF1EA;
  --ok: #2E7650; --ok-soft: #ECF4EF;
  --danger: #B4372E; --danger-soft: #FBEDEB; --danger-ink: #FFFFFF;
  --radius-xs: 2px; --radius-sm: 2px; --radius: 4px; --radius-lg: 4px; --radius-xl: 6px; --radius-2xl: 6px;
  --shadow-float: 0 0 0 1px rgba(14,14,14,.06), 0 8px 24px rgba(14,14,14,.08);
  --focus: 0 0 0 2px #FFFFFF, 0 0 0 4px #FF5A1F;
  --ease: cubic-bezier(.2,0,0,1);
  --sidebar-w: 216px;
  color-scheme: light;
}
html, body { background: #FFFFFF; color: #0E0E0E; -webkit-font-smoothing: antialiased; }
body, button, input, select, textarea { font-family: var(--font); }
#credits, #theme-toggle { display: none !important; }

/* ---------- shell: no top bar on desktop, the sidebar holds logo, New ad, navigation and Settings ---------- */
@media (min-width: 761px) {
  .ar-shell .app { grid-template-rows: 0 auto 1fr; }
  .ar-shell .appbar { display: none; }
  .ar-shell .sidebar { background: #F7F7F5; border-right: 0; padding: 24px 16px 16px; gap: 24px; }
  .ar-shell .sidebar-top { flex-direction: column; gap: 24px; padding: 0; }
  .ar-shell .sidebar-scroll { padding: 0; }
  .ar-shell .sidebar-foot { display: flex !important; flex-direction: column; padding: 16px 0 0; border-top: 1px solid #E6E6E3; }
  .ar-shell .sidebar-foot a { color: #0E0E0E; font-size: 14px; height: 32px; gap: 8px; }
  .ar-shell .sidebar-foot a svg { color: #6B6B6B; }
}
.ar-logo { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; text-decoration: none; }
.ar-wordmark { font-size: 18px; font-weight: 600; letter-spacing: -0.045em; color: #0E0E0E; }
.ar-wordmark i { font-style: normal; color: #FF5A1F; }
.ar-shell .ar-new { height: 32px; font-size: 13px; font-weight: 500; gap: 8px; text-decoration: none; }
.ar-shell .side-link { display: flex; align-items: center; height: 32px; padding: 0 8px; margin: 0 0 4px; border-radius: 4px; font-size: 14px; color: #0E0E0E; }
.ar-shell .side-link:hover { background: rgba(255,255,255,.6); }
.ar-shell .side-link.active { background: #FFFFFF; font-weight: 400; box-shadow: none; color: #0E0E0E; }
.ar-shell .side-link.active::before { content: ''; width: 6px; height: 6px; border-radius: 1px; background: #FF5A1F; margin-right: 8px; }
.ar-shell .sidebar-label { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 10px; letter-spacing: .08em; color: #6B6B6B; padding: 16px 8px 4px; }
.ar-shell .sidebar-label svg { display: none; }
/* Logo in the mobile top bar */
.brand svg { display: none; }
.brand .brand-sub { display: none; }
.brand .brand-name { font-size: 17px; font-weight: 600; letter-spacing: -0.045em; }
.brand .brand-name i { font-style: normal; color: #FF5A1F; }
.brand::before { content: ''; width: 20px; height: 20px; margin-right: 8px; background: url('/adroom/logo.svg') center/contain no-repeat; display: inline-block; vertical-align: middle; }

/* ---------- type ---------- */
.main { padding: 0; }
.content { padding: 48px 64px 96px; gap: 40px; }
.page-title { font: 300 32px/40px var(--font); letter-spacing: -0.02em; }
.page-sub { font-size: 14px; line-height: 20px; color: #6B6B6B; margin-top: 8px; }
h1, h2, h3 { font-weight: 400; }
.hub-h, .faint.small, .small.faint { letter-spacing: .08em; }
.hub-h { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; color: #6B6B6B; }

/* ---------- buttons: primary = Signal Orange with ink text; never white text on orange ---------- */
.btn { height: 40px; padding: 0 16px; border: 0; box-shadow: inset 0 0 0 1px #D2D2CE; border-radius: 4px; font-size: 14px; font-weight: 500; background: #FFFFFF; color: #0E0E0E; transition: background 120ms var(--ease); }
.btn:hover { background: #F7F7F5; }
.btn:active { background: #EFEFEC; box-shadow: inset 0 0 0 1px #0E0E0E; }
.btn.primary, .btn.accent { background: #FF5A1F; color: #0E0E0E; box-shadow: none; font-weight: 500; }
.btn.primary:hover, .btn.accent:hover { background: #F24C12; color: #0E0E0E; }
.btn.primary:active, .btn.accent:active { background: #DB420A; box-shadow: var(--focus); }
.btn.dark { background: #0E0E0E; color: #FFFFFF; box-shadow: none; }
.btn.ghost { box-shadow: none; background: transparent; color: #0E0E0E; }
.btn.ghost:hover { background: #F7F7F5; }
.btn.danger { background: #B4372E; color: #FFFFFF; box-shadow: none; }
.btn.danger:hover { background: #9E2F27; opacity: 1; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 4px; }
.btn.lg { height: 48px; padding: 0 24px; font-size: 15px; }
.btn[disabled], .btn.disabled { background: #EFEFEC; color: #A3A39F; box-shadow: none; }
.btn .cost { font-family: 'JetBrains Mono', monospace; font-weight: 400; font-size: 11px; background: rgba(14,14,14,.08); color: inherit; }
.btn.primary .cost, .btn.accent .cost { background: rgba(14,14,14,.12); }
.pill.accent { background: #FFF1EA; color: #C2410C; }

/* ---------- inputs ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea, .select, .input {
  border-radius: 4px; border-color: #D2D2CE; font-size: 14px; font-family: var(--font);
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus, select:focus, textarea:focus {
  outline: none; border-color: #0E0E0E; box-shadow: 0 0 0 3px #FFF1EA;
}
input[type=checkbox], input[type=radio], input[type=range] { accent-color: #0E0E0E; }
::placeholder { color: #A3A39F; }

/* ---------- cards, panels, chips ---------- */
.card, .hub-card, .modal, dialog { border-radius: 6px; }
.card { border-color: #E6E6E3; box-shadow: none; }
.hub-card { border: 0; background: #F7F7F5; transition: background 120ms var(--ease); }
.hub-card:hover { border-color: transparent; transform: none; box-shadow: none; background: #EFEFEC; }
.hub-text b { font-size: 16px; font-weight: 500; }
.hub-text small { font-size: 13px; color: #6B6B6B; }
.hub-badge, .hub-badge.cs { background: #FFFFFF; color: #6B6B6B; border-radius: 2px; font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.status, .chip, .tag, .badge { border-radius: 2px; }
.status { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.status.running { background: #FFF1EA; color: #C2410C; }
.status.done, .status.ok { background: #ECF4EF; color: #2E7650; }
.status.error { background: #FBEDEB; color: #B4372E; }
.toast { border-radius: 6px; box-shadow: var(--shadow-float); }
dialog { box-shadow: var(--shadow-float); border: 0; }
dialog::backdrop { background: rgba(14,14,14,.32); }
.seg, .segmented { border-radius: 4px; background: #EFEFEC; }
a { color: inherit; }

@media (max-width: 760px) {
  .content { padding: 24px 16px 96px; gap: 24px; }
  .page-title { font-size: 24px; line-height: 32px; }
}
.ar-shell .side-link[data-action="home"]{display:none}