/* Strömbot Studio — shared visual system for every product surface. */
:root {
  --accent: #65e0bb;
  --accent-hover: #8cebcf;
  --accent-soft: rgba(101,224,187,.1);
  --accent-ink: #082b22;
  --bg: #101314;
  --surface: #191d1e;
  --surface2: #202627;
  --surface3: #2a3233;
  --border: #303839;
  --border2: #465253;
  --text: #f1f5f3;
  --text2: #b6c2bf;
  --muted: #91a29e;
  --muted2: #748984;
  --purple: var(--accent);
  --purple-hover: var(--accent-hover);
  --purple-dim: var(--accent-soft);
  --cyan: var(--accent);
  --cyan-dim: var(--accent-soft);
  --brand: var(--accent);
  --brand-strong: var(--accent-hover);
  --brand-soft: var(--accent-soft);
  --ink: var(--text);
  --copy: var(--text2);
  --quiet: var(--muted);
  --page-bg: var(--bg);
  --panel: var(--surface);
  --panel-solid: var(--surface);
  --panel-raised: var(--surface2);
  --line: var(--border);
  --line-strong: var(--border2);
  --flow-bg: var(--bg);
  --flow-panel: var(--surface);
  --flow-line: var(--border);
  --radius: 16px;
  --radius-sm: 9px;
  --sidebar-w: 244px;
  --topbar-h: 72px;
  --font-ui: 'Plus Jakarta Sans', system-ui, sans-serif;
  color-scheme: dark;
}
:root[data-accent="violet"] { --accent:#b5a2ff; --accent-hover:#cbbdff; --accent-soft:rgba(181,162,255,.12); --accent-ink:#241847; }
:root[data-accent="amber"] { --accent:#f3cb7b; --accent-hover:#ffe0a3; --accent-soft:rgba(243,203,123,.12); --accent-ink:#35250c; }
html { scroll-padding-top: 90px; }
body.studio-dashboard, body.studio-admin, body.studio-market, body.public-ui, body.account-flow, body.studio-preview {
  background: var(--bg); color: var(--text); font-family: var(--font-ui); -webkit-font-smoothing: antialiased;
}
body::after, body.public-ui::before { display:none; }
::selection { background: var(--accent); color:var(--accent-ink); }
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
:where(input, select, textarea) { accent-color:var(--accent); }
:where(button, input, select, textarea) { font-family:inherit; }
:where(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
  border-color:var(--border2); border-radius:9px; color:var(--text); background:var(--bg);
}
:where(input, textarea)::placeholder { color:var(--muted); }
:where(.btn,.button,.flow-button) { min-height:40px; border-radius:9px; font-weight:650; box-shadow:none; }
:where(.btn-primary,.button-primary,.flow-button.primary), .create-btn {
  background:var(--accent); color:var(--accent-ink); border-color:transparent; box-shadow:none;
}
:where(.btn-primary,.button-primary,.flow-button.primary):hover, .create-btn:hover { background:var(--accent-hover); color:var(--accent-ink); transform:none; }
.btn-ghost { background:transparent; color:var(--text2); border-color:var(--border2); }
.btn-ghost:hover { background:var(--surface2); color:var(--text); }
.btn-sm { min-height:32px; }
.skip-link { position:fixed; z-index:10000; left:16px; top:8px; padding:12px 20px; background:var(--accent); color:var(--accent-ink); border-radius:8px; transform:translateY(-160%); }
.skip-link:focus { transform:none; }
/* Workspace shell */
.studio-dashboard .topbar { height:var(--topbar-h); background:var(--bg); border-bottom:1px solid var(--border); padding-right:28px; }
.studio-dashboard .topbar-center { padding-left:32px; }
.topbar-search { width:min(430px,40vw); }
.topbar-search-input { height:42px; background:var(--surface) !important; border-color:var(--border) !important; }
.topbar-search-input:focus { border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-soft); }
.topbar-search kbd { color:var(--text2); font-size:11px; }
.topbar-right { gap:12px; }
.topbar-avatar { border:1px solid var(--border2); background:var(--surface2); }
.studio-dashboard .sidebar { background:var(--bg); padding:0 16px 16px; border-right:1px solid var(--border); }
.sidebar-logo { height:72px; padding:0 10px; }
.sidebar-logo img, .topbar-brand img { filter:none; }
.sidebar-logo em, .topbar-brand-name em { color:var(--accent); }
.workspace-switcher { margin-bottom:16px; min-height:62px; background:var(--surface); border-radius:12px; }
.workspace-switcher:hover { background:var(--surface2); border-color:var(--border2); }
.workspace-copy strong { font-size:13px; }
.workspace-copy small { font-size:11px; color:var(--muted); }
.workspace-avatar, .workspace-option-avatar { background:var(--accent-soft); color:var(--accent); }
.sidebar-nav { gap:3px; }
.sidebar-nav .nav-item { min-height:40px; height:40px; padding:0 12px; border:1px solid transparent; color:var(--text2); border-radius:8px; }
.sidebar-nav .nav-item::after { font-size:12px; font-weight:550; }
.sidebar-nav .nav-item:hover { background:var(--surface); color:var(--text); }
.sidebar-nav .nav-item.active { background:var(--accent-soft); color:var(--accent); border-color:transparent; }
.nav-group-label { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.12em; font-weight:700; padding:17px 12px 8px; }
.sidebar-footer { border-top:1px solid var(--border); margin-top:12px; padding-top:14px; }
.studio-dashboard .main { margin-top:var(--topbar-h); padding:32px clamp(24px,3vw,48px) 64px; min-width:0; }
.page-header { padding-bottom:20px; margin-bottom:24px; border-color:var(--border); }
.page-header h2, .ov-header-left h2 { font-size:clamp(25px,2.4vw,34px); font-weight:750; letter-spacing:-1.1px; }
.page-header .sub, .ov-sub { font-size:13px; line-height:1.7; color:var(--text2); }
.ov-header { margin-bottom:26px; }
.page-tabs-bar, .inner-tabs-bar, .chat-inner-tabs, .an-ptab-bar { background:transparent; border-color:var(--border); gap:5px; }
.page-tab-btn, .inner-tab-btn, .chat-inner-tab, .an-ptab { color:var(--text2); min-height:40px; font-size:12px; }
.page-tab-btn.active, .inner-tab-btn.active, .chat-inner-tab.active, .an-ptab.active { color:var(--accent); background:var(--accent-soft); border-color:var(--accent); }
/* Cards and data: quiet containers, strong information hierarchy. */
.card, .a-card, .side-card, .plugin, .flow-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:0 2px 3px rgba(0,0,0,.08); }
.card:hover { border-color:var(--border2); box-shadow:0 2px 3px rgba(0,0,0,.08); }
.card { padding:20px; }
.card-header { margin:-20px -20px 16px; padding:16px 20px; border-bottom:1px solid var(--border); }
.card-title { font-size:13px; color:var(--text); font-weight:650; letter-spacing:0; }
.ov-grid, .ov-row { gap:18px; }
.stat-card, .growth-stat, .ov-int-tile, .an-pcard, .wf-card, .wfb-form, .command-item, .timer-item, .event-card, .sched-list-item, .cs-list-item, .cs-queue-item, .profile-conn-card { background:var(--surface); border-color:var(--border); border-radius:12px; }
.growth-stat { padding:16px; }
.growth-stat-value, .stat-value { font-family:var(--font-ui); font-size:26px; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.growth-stat-label, .stat-label { font-size:11px; color:var(--text2); }
.ov-plat-body, .ov-analytics-layout { min-width:0; }
.empty-state { border:1px dashed var(--border2); border-radius:12px; background:transparent; min-height:160px; color:var(--text2); }
.empty-state p, .empty-inline { color:var(--muted); font-size:12px; }
.notes-textarea, .sched-nav, .sched-cell, .sched-time-label, .cs-compose-panel, .wfb-node-head, .sched-cal-header, .sched-cal-header-empty { background:var(--surface); border-color:var(--border); }
.ov-schedule-control { background:var(--surface2); color:var(--text2); min-height:32px; }
.ov-schedule-control:hover { border-color:var(--accent); color:var(--accent); background:var(--surface2); }
.ov-scheduler-card .ov-week-header, .ov-scheduler-card .ov-week-grid, .ov-schedule-timezone { background:var(--surface); }
.ov-scheduler-card .ov-week-day-label.today .ov-week-day-num { background:var(--accent); color:var(--accent-ink); box-shadow:none; }
.app-menu, .notif-panel, .profile-panel { background:var(--surface); border-color:var(--border2); box-shadow:0 24px 80px #0007; }
.app-menu-item:hover, .workspace-option:hover { background:var(--surface2); }
.workspace-option-check { color:var(--accent); }
.badge-purple { background:var(--accent-soft); color:var(--accent); }
/* Daily shortcuts */
.studio-shortcuts { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:16px 20px; margin-bottom:24px; border:1px solid var(--border); border-radius:14px; background:linear-gradient(110deg,var(--accent-soft),transparent 70%); }
.studio-shortcuts-copy { flex:1; min-width:160px; }
.studio-shortcuts-copy strong { display:block; font-size:13px; font-weight:650; }
.studio-shortcuts-copy span { display:block; font-size:11px; color:var(--text2); margin-top:3px; }
.studio-shortcuts .btn { gap:8px; font-size:12px; }
.studio-eyebrow { display:block; margin-bottom:9px; color:var(--accent); font-size:10px; letter-spacing:.15em; text-transform:uppercase; font-weight:700; }
/* Preferences dialog: native modal supplies focus containment and Escape. */
.studio-dialog { position:fixed; inset:0; margin:auto; width:min(460px,calc(100% - 32px)); max-height:calc(100dvh - 40px); overflow:auto; padding:28px; border:1px solid var(--border2); border-radius:20px; background:var(--surface); color:var(--text); box-shadow:0 32px 100px #0008; }
.studio-dialog::backdrop { background:#050909b8; backdrop-filter:blur(6px); }
.studio-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:10px; }
.studio-dialog h2 { font-size:22px; letter-spacing:-.6px; }
.studio-dialog p { color:var(--text2); font-size:12px; line-height:1.7; }
.studio-dialog fieldset { border:0; margin:24px 0; padding:0; }
.studio-dialog legend { font-size:12px; font-weight:700; margin-bottom:12px; }
.studio-choices { display:flex; gap:8px; }
.studio-choice { flex:1; display:flex; gap:7px; align-items:center; justify-content:center; padding:12px 8px; border:1px solid var(--border2); border-radius:10px; cursor:pointer; font-size:12px; }
.studio-choice:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
.studio-choice input { accent-color:var(--accent); }
.studio-check { display:flex; align-items:center; gap:12px; font-size:12px; margin:20px 0; cursor:pointer; }
.studio-check input { width:18px; height:18px; }
.studio-dialog-footer { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--border); padding-top:18px; gap:12px; }
.studio-dialog-footer small { color:var(--muted); font-size:10px; }
.studio-mobile-search { display:none; }
.studio-search-close { display:none; }
.search-feedback { padding:24px 16px; color:var(--text2); font-size:12px; }
.search-result-item[aria-selected="true"] { background:var(--accent-soft) !important; }
.studio-dashboard[data-density="compact"] .card { padding:16px; }
.studio-dashboard[data-density="compact"] .card-header { margin:-16px -16px 12px; padding:12px 16px; }
.studio-dashboard[data-density="compact"] .ov-grid { gap:12px; }
.studio-dashboard[data-density="compact"] .main { padding-top:22px; }
@media(min-width:769px) {
  .studio-dashboard[data-focus="true"] .sidebar { transform:translateX(-100%); }
  .studio-dashboard[data-focus="true"] .topbar { left:0; }
  .studio-dashboard[data-focus="true"] .main { margin-left:0; width:100%; }
}
/* Public / account / administration pages share the same visual language. */
.auth-shell { background:var(--surface); border-color:var(--border); border-radius:24px; box-shadow:0 30px 90px #0004; }
.auth-aside { background:linear-gradient(160deg,var(--accent-soft),transparent); }
.auth-orbit { display:none; }
.auth-form-panel, .auth-form-wrap { background:transparent; }
.auth-title, .flow-card h1 { letter-spacing:-1px; }
.auth-feature-icon, .auth-pill, .flow-kicker { color:var(--accent); background:var(--accent-soft); border-color:var(--border); }
.auth-form input, .flow-form input { min-height:46px; }
.auth-submit, .flow-submit { background:var(--accent); color:var(--accent-ink); border:0; min-height:46px; border-radius:9px; font-weight:700; }
.auth-submit:hover, .flow-submit:hover { background:var(--accent-hover); }
.landing-nav { background:rgba(16,19,20,.94); border-color:var(--border); }
.landing-hero { padding-top:90px; padding-bottom:70px; }
.landing h1 { letter-spacing:-2.5px; }
.gradient-text { background: none; -webkit-text-fill-color:var(--accent); color:var(--accent); }
.hero-pill, .release-badge { color:var(--accent); border-color:var(--border2); background:var(--accent-soft); }
.landing .feature-card, .landing .integration-card, .landing .cta-box { background:var(--surface); border-color:var(--border); box-shadow:none; }
.studio-market .topnav, .studio-admin .admin-sidenav, .studio-admin .admin-topbar { background:var(--bg); border-color:var(--border); }
.studio-market .hero { background:linear-gradient(110deg,var(--accent-soft),var(--surface)); border-color:var(--border); border-radius:20px; }
.studio-market .hero h1 { font-size:clamp(32px,4vw,48px); letter-spacing:-1.7px; }
.studio-market .hero::after { opacity:.2; }
.studio-market .plugin { padding:22px; }
.studio-market .plugin h3 { font-size:16px; }
.studio-market .plugin p { font-size:12px; line-height:1.7; }
.studio-market .back, .studio-market .eyebrow { color:var(--accent); }
.studio-admin .admin-nav-item.active { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.studio-admin .admin-content { background:var(--bg); padding:28px; }
.studio-admin .a-card { border-radius:14px; }
.studio-admin .adm-table th { background:var(--surface2); color:var(--text2); }
.studio-admin .adm-table td { border-color:var(--border); }
.studio-preview .controls, .studio-preview .sidebar { background:var(--surface); border-color:var(--border); }
/* Tablet: labelled navigation stays available while grids simplify. */
@media(min-width:769px) and (max-width:1180px) {
  :root { --sidebar-w:208px; }
  .studio-dashboard .sidebar { padding-left:10px; padding-right:10px; }
  .studio-dashboard .main { padding:26px 22px 48px; }
  .ov-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ov-grid > [data-span="3"] { grid-column:span 2; }
  .ov-row--top, .ov-row--thirds { grid-template-columns:minmax(0,1fr); }
  .ov-row--thirds > .card { grid-column:auto; }
  .topbar-search { width:min(360px,32vw); }
  .studio-shortcuts-copy { flex-basis:100%; }
}
@media(max-width:768px) {
  :root { --topbar-h:64px; }
  .studio-dashboard .topbar { left:0; height:calc(var(--topbar-h) + env(safe-area-inset-top)); padding-right:14px; }
  .topbar-brand-name { font-size:15px; }
  .topbar-release-badge { display:none; }
  .topbar-right { gap:4px; }
  .topbar-icon-btn { width:40px; height:40px; }
  .studio-mobile-search { display:inline-flex; }
  .studio-dashboard .main { width:100%; margin-left:0; margin-top:calc(var(--topbar-h) + env(safe-area-inset-top)); padding:24px 16px 30px; }
  .studio-dashboard .sidebar { width:min(320px,88vw); padding:env(safe-area-inset-top) 16px 18px; }
  .sidebar-nav .nav-item { height:44px; min-height:44px; }
  .nav-group-label { padding-top:12px; }
  .ov-header { gap:12px; align-items:flex-start; }
  .ov-header-left h2, .page-header h2 { font-size:26px; letter-spacing:-.8px; }
  .ov-sub, .page-header .sub { font-size:12px; }
  .ov-header-right { flex-shrink:0; }
  .ov-header-right .btn { font-size:11px; }
  .studio-shortcuts { padding:16px; gap:8px; }
  .studio-shortcuts-copy { flex-basis:100%; margin-bottom:5px; }
  .studio-shortcuts .btn { flex:1 1 40%; min-height:42px; }
  .ov-grid { grid-template-columns:minmax(0,1fr); gap:14px; }
  .ov-grid > [data-span] { grid-column:auto; }
  .ov-row, .ov-row--top, .ov-row--thirds { grid-template-columns:minmax(0,1fr); gap:14px; }
  .ov-row--thirds > .card { grid-column:auto; }
  .card { padding:16px; border-radius:14px; }
  .card-header { margin:-16px -16px 14px; padding:14px 16px; flex-wrap:wrap; }
  .card-title { font-size:12px; }
  .btn { min-height:42px; }
  .btn-sm { min-height:36px; }
  .page-tabs-bar, .inner-tabs-bar, .chat-inner-tabs, .an-ptab-bar { max-width:calc(100vw - 32px); width:100%; margin-left:0; margin-right:0; border-radius:9px; background:var(--surface); overflow-x:auto; }
  .form-actions, .cs-compose-footer { background:var(--surface); }
  .mobile-nav { background:rgba(16,19,20,.97); border-color:var(--border); }
  .mobile-nav .mobile-nav-item { color:var(--text2); font-size:10px; }
  .mobile-nav .mobile-nav-item.active { color:var(--accent); background:var(--accent-soft); }
  .mobile-create-icon { background:var(--accent); color:var(--accent-ink); border-color:var(--bg); box-shadow:none; }
  .studio-dialog { padding:22px; }
  .studio-dialog-footer { flex-wrap:wrap; }
  .studio-dashboard.search-open .topbar-center { display:block; position:fixed; inset:0; z-index:500; padding:20px 16px; background:#101314f5; }
  .studio-dashboard.search-open .topbar-search { width:100%; margin-top:42px; }
  .studio-dashboard.search-open .topbar-search-input { font-size:16px; height:50px; }
  .studio-dashboard.search-open .studio-search-close { display:block; position:absolute; right:16px; top:12px; }
  #searchDropdown { max-height:calc(100dvh - 160px) !important; }
  .auth-page { padding:20px 16px; }
  .auth-shell { border-radius:18px; }
  .landing-hero { padding-top:48px; padding-bottom:40px; }
  .landing h1 { letter-spacing:-1.5px; }
  .landing .nav-actions .button { padding:10px 12px; font-size:11px; }
  .studio-admin .admin-content { padding:20px 14px; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
/* Account actions and legacy component tokens. */
:root { --flow-text:var(--text); --flow-copy:var(--text2); --flow-muted:var(--muted); --flow-purple:var(--accent); --flow-purple-light:var(--accent-hover); --flow-line-strong:var(--accent); }
body.account-flow::before { display:none; }
.primary-action, .flow-button, .flow-card .btn { background:var(--accent); color:var(--accent-ink); border-color:transparent; box-shadow:none; }
.primary-action:hover:not(:disabled), .flow-button:hover:not(:disabled), .flow-card .btn:hover:not(:disabled) { background:var(--accent-hover); color:var(--accent-ink); box-shadow:none; transform:none; }
.auth-input::placeholder, .flow-input::placeholder, .flow-card input::placeholder { color:var(--muted); }
.auth-input:focus, .flow-input:focus, .flow-card input:not([type="color"]):not([type="range"]):focus { background:var(--bg); border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.auth-aside::after { opacity:.15; }
.release-chip { background:var(--accent-soft); color:var(--accent); border-color:var(--border); }
.flow-brand img { filter:none; }
.studio-market .view-btn.active { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.studio-market .developer { background:var(--accent-soft); }
/* Explicit primary states override legacy component skins. */
.btn-primary, .button-primary { background:var(--accent); color:var(--accent-ink); border-color:transparent; box-shadow:none; }
.btn-primary:hover, .button-primary:hover { background:var(--accent-hover); color:var(--accent-ink); box-shadow:none; transform:none; }
body.landing { overflow-x:clip; }
.landing-hero::after { opacity:.12; }
.landing .cta { background:linear-gradient(130deg,var(--accent-soft),var(--surface)); }
.ov-int-grid { grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; }
.ov-int-tile { min-height:104px; }
.ov-int-top { flex-direction:row; align-items:center; }
.ov-int-info { min-width:0; }
.ov-int-status { font-size:11px; }
.ov-scheduler-card .card-header { flex-wrap:wrap; min-width:0; }
.ov-schedule-controls { flex-wrap:wrap; gap:6px; margin-left:0; }
.ov-schedule-shell { width:100%; min-width:0; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:var(--border2) var(--surface); }
.ov-scheduler-card .ov-week-header, .ov-scheduler-card .ov-week-grid { min-width:620px; margin-left:0; margin-right:0; }
.ov-scheduler-card .ov-week-grid { background:var(--surface); }
@media(max-width:768px) {
  .ov-int-grid { grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; }
  .ov-int-top { flex-direction:row; align-items:center; }
  .ov-scheduler-card .card-header { min-width:0; flex-wrap:wrap; }
  .ov-schedule-shell { min-width:0; }
  .card:has(.ov-week-grid) { overflow-x:visible; }
  .studio-dashboard.search-open { overflow:hidden; }
}
.landing-hero { overflow:clip; }
@media(max-width:768px) {
  .cs-cal-header { padding:16px; flex-wrap:wrap; }
  .cs-cal-title { flex-basis:100%; font-size:13px; }
  .cs-cal-right { flex-wrap:wrap; gap:6px; }
  .cs-filters-bar { padding:12px 16px; flex-wrap:wrap; }
  .cs-layout { padding:16px 0; min-width:0; }
  .cs-timeline-wrap { max-width:100%; }
}
.studio-market .card { padding:22px; }
.studio-market .card h3 { font-size:16px; }
.studio-market .card p { font-size:12px; line-height:1.7; }
body.legal-ui .legal-header, body.legal-ui .legal-section { background:var(--surface); border-color:var(--border); }
@media(max-width:768px) {
  .cs-cal-right { width:100%; min-width:0; flex-shrink:1; }
  .auth-page { background:var(--bg); }
}