/* Orbit design system */
:root {
  --nav: #0a0f24; --nav-2: #121a3a; --nav-text: #c7cbe0; --nav-dim: #7c83a6;
  --bg: #f4f5fa; --surface: #fff; --surface-2: #f8f9fc; --line: #e7e9f2; --line-2: #d9dcea;
  --text: #0e1330; --text-2: #3b4263; --muted: #6b7190;
  --violet: #5b47f5; --violet-2: #7c6cff; --violet-bg: #f0eeff; --blue: #2f6bff; --blue-bg: #eaf1ff;
  --amber: #f59e0b; --amber-2: #b45309; --amber-bg: #fff6e6; --green: #12a150; --green-bg: #e8f8ef;
  --red: #e5484d; --red-bg: #fdecec; --cyan: #0ea5b7; --pink: #db2777;
  --r: 14px; --r-sm: 10px; --shadow: 0 1px 2px rgba(14,19,48,.04), 0 4px 16px rgba(14,19,48,.05);
  --shadow-lg: 0 12px 40px rgba(14,19,48,.14); --focus: 0 0 0 3px rgba(91,71,245,.28);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 14px/1.5 var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--violet); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: 26px; font-weight: 700; } h2 { font-size: 19px; font-weight: 650; } h3 { font-size: 15px; font-weight: 650; } h4 { font-size: 13px; }
p { margin: 0 0 .8em; }
code { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-2); border: 1px solid var(--line); padding: 1px 5px; border-radius: 6px; word-break: break-all; }
.i { flex: none; vertical-align: middle; }
.muted { color: var(--muted); } .small { font-size: 12.5px; } .tiny { font-size: 11.5px; } .strong { font-weight: 600; }
.row { display: flex; align-items: center; gap: 10px; } .row.wrap { flex-wrap: wrap; } .row.top { align-items: flex-start; }
.spacer { flex: 1; } .stack > * + * { margin-top: 14px; } .center { text-align: center; } .right { text-align: right; }
.hidden { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.sidebar { background: var(--nav); color: var(--nav-text); padding: 18px 14px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background-image: radial-gradient(120% 50% at 0% 100%, rgba(91,71,245,.22), transparent 60%); }
.brand-row { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; }
.brand-row strong { display: block; font-size: 18px; color: #fff; letter-spacing: -.02em; }
.brand-row small { display: block; color: var(--nav-dim); font-size: 11px; }
.auth-card .brand-row strong { color: var(--text); } .auth-card .brand-row small { color: var(--muted); }
.logo-mark { width: 34px; height: 34px; border-radius: 50%; border: 3.5px solid var(--violet-2); position: relative; flex: none; }
.logo-mark::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); top: -4px; right: -3px; box-shadow: 0 0 10px var(--amber); }
.create-btn { margin: 4px 0 12px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--nav-text); font-weight: 500; text-decoration: none; position: relative; }
.nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav a.on { background: linear-gradient(90deg, rgba(124,108,255,.28), rgba(124,108,255,.08)); color: #fff; }
.nav a.on::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--violet-2); }
.nav .count { margin-left: auto; background: rgba(255,255,255,.1); color: #fff; font-size: 11px; padding: 1px 8px; border-radius: 99px; }
.nav .count.hot { background: var(--amber); color: #2a1800; }
.nav-sep { height: 1px; background: rgba(255,255,255,.07); margin: 10px 4px; }
.side-card { margin-top: auto; border: 1px solid rgba(255,255,255,.08); border-radius: var(--r); padding: 14px; background: rgba(255,255,255,.03); }
.side-card b { color: #fff; display: block; } .side-card p { color: var(--nav-dim); font-size: 12px; margin: 4px 0 10px; }
.meter { height: 6px; background: rgba(255,255,255,.1); border-radius: 9px; overflow: hidden; } .meter > i { display: block; height: 100%; background: linear-gradient(90deg, var(--violet-2), var(--amber)); }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 12px 28px; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.search { flex: 1; max-width: 560px; position: relative; }
.search input { width: 100%; padding: 9px 12px 9px 38px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface-2); }
.search .i { position: absolute; left: 12px; top: 10px; color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 13px; color: var(--text); }
.pill .i { color: var(--amber); } a.pill:hover { text-decoration: none; border-color: var(--line-2); }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--text-2); cursor: pointer; position: relative; }
.icon-btn:hover { background: var(--surface-2); border-color: var(--line); }
.icon-btn .dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); border: 2px solid #fff; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(135deg, var(--violet-2), var(--blue)); flex: none; }
.avatar.lg { width: 56px; height: 56px; font-size: 20px; }
.user-menu { position: relative; } .user-menu summary { list-style: none; display: flex; gap: 10px; align-items: center; cursor: pointer; padding: 4px 6px; border-radius: 10px; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu .who b { display: block; font-size: 13px; } .user-menu .who small { color: var(--muted); font-size: 11.5px; }
.menu { position: absolute; right: 0; top: 48px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); min-width: 240px; padding: 6px; z-index: 50; }
.menu a, .menu button { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; color: var(--text); background: none; border: 0; font: inherit; cursor: pointer; }
.menu a:hover, .menu button:hover { background: var(--surface-2); text-decoration: none; }
.menu .label { font-size: 11px; color: var(--muted); padding: 6px 10px 2px; text-transform: uppercase; letter-spacing: .05em; }
.content { padding: 26px 28px 60px; max-width: 1440px; width: 100%; }
.content.wide { max-width: none; padding: 0; }
.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head p { margin: 0; color: var(--muted); }
.back { display: inline-flex; gap: 6px; align-items: center; color: var(--text-2); font-weight: 500; margin-bottom: 8px; }
.mobile-only { display: none; }

/* ---------- Controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 11px; font: 600 13.5px var(--font); border: 1px solid var(--line-2);
  background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none !important; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s; }
.btn:hover { border-color: #c4c8db; background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, #6a58ff, var(--violet)); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(91,71,245,.3); }
.btn.primary:hover { background: linear-gradient(180deg, #7465ff, #5140ea); }
.btn.amber { background: var(--amber); border-color: transparent; color: #2a1800; }
.btn.danger { color: var(--red); } .btn.danger:hover { background: var(--red-bg); border-color: #f5c2c3; }
.btn.ghost { border-color: transparent; background: none; } .btn.ghost:hover { background: var(--surface-2); }
.btn.sm { padding: 6px 11px; font-size: 12.5px; border-radius: 9px; } .btn.block { width: 100%; } .btn.lg { padding: 13px 22px; font-size: 15px; border-radius: 13px; }
.btn[disabled] { opacity: .55; pointer-events: none; }
.create-btn.btn { padding: 12px; font-size: 14.5px; border-radius: 14px; }
input, select, textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 11px; width: 100%; }
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--violet-2); box-shadow: var(--focus); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--violet); }
.field { display: block; margin-bottom: 14px; } .field > span { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.field small, .help { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; }
.switch { display: inline-flex; gap: 10px; align-items: center; cursor: pointer; font-weight: 500; }
.switch input { appearance: none; width: 38px; height: 22px; border-radius: 99px; background: var(--line-2); position: relative; cursor: pointer; transition: background .2s; border: 0; padding: 0; }
.switch input::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch input:checked { background: var(--violet); } .switch input:checked::after { left: 19px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.cols.l { grid-template-columns: 300px minmax(0, 1fr); }

/* ---------- Surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); }
.card.flat { box-shadow: none; } .card.pad0 { padding: 0; } .card + .card { margin-top: 16px; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .card-head h3 { margin: 0; } .card-head p { margin: 0; }
.kpi { position: relative; } .kpi .label { color: var(--muted); font-size: 12.5px; font-weight: 500; display: flex; gap: 6px; align-items: center; }
.kpi .value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 2px; }
.kpi .sub { font-size: 12px; color: var(--muted); } .kpi .ic { position: absolute; right: 16px; top: 16px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
a.kpi { color: inherit; text-decoration: none; display: block; } a.kpi:hover { border-color: var(--violet-2); }
.tone-violet { background: var(--violet-bg); color: var(--violet); } .tone-blue { background: var(--blue-bg); color: var(--blue); } .tone-amber { background: var(--amber-bg); color: var(--amber-2); }
.tone-green { background: var(--green-bg); color: var(--green); } .tone-red { background: var(--red-bg); color: var(--red); } .tone-gray { background: var(--surface-2); color: var(--text-2); }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line); }
.badge.live, .badge.ok, .badge.paid, .badge.completed, .badge.done, .badge.confirmed, .badge.fulfilled { background: var(--green-bg); color: var(--green); border-color: #c8eed8; }
.badge.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(18,161,80,.18); }
.badge.draft, .badge.pending, .badge.waiting, .badge.running { background: var(--blue-bg); color: var(--blue); border-color: #d3e1ff; }
.badge.paused, .badge.warn, .badge.expired, .badge.test, .badge.sim { background: var(--amber-bg); color: var(--amber-2); border-color: #fbe2b5; }
.badge.error, .badge.failed, .badge.err, .badge.cancelled, .badge.refunded { background: var(--red-bg); color: var(--red); border-color: #f8cfd0; }
.badge.violet { background: var(--violet-bg); color: var(--violet); border-color: #ddd8ff; }
.alert { padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; border: 1px solid; font-size: 13.5px; display: flex; gap: 10px; align-items: flex-start; }
.alert.ok { background: var(--green-bg); border-color: #c8eed8; color: #0b6b37; } .alert.err { background: var(--red-bg); border-color: #f8cfd0; color: #a3262a; }
.alert.warn { background: var(--amber-bg); border-color: #fbe2b5; color: #8a4b06; } .alert.info { background: var(--blue-bg); border-color: #d3e1ff; color: #1f4fb8; }
.empty { text-align: center; padding: 40px 20px; color: var(--muted); } .empty .i { color: var(--line-2); margin-bottom: 8px; } .empty h3 { color: var(--text); }
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font-weight: 600; font-size: 12px; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2); }
.table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; } .table tbody tr:hover td { background: #fafbfe; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.tabs a, .tabs button { padding: 10px 14px; font-weight: 600; color: var(--muted); border: 0; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; font: 600 13.5px var(--font); white-space: nowrap; display: inline-flex; gap: 7px; align-items: center; text-decoration: none; }
.tabs a.on, .tabs button.on { color: var(--violet); border-bottom-color: var(--violet); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; text-decoration: none !important; }
.chip.on, .chip:hover { border-color: var(--violet-2); color: var(--violet); background: var(--violet-bg); }
.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); } .list-row:last-child { border-bottom: 0; }
.ico-box { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; }

/* ---------- Auth ---------- */
.auth-body { min-height: 100vh; display: grid; place-items: center; padding: 30px 16px; background: radial-gradient(80% 60% at 10% 0%, #e6e2ff, transparent 60%), radial-gradient(60% 50% at 100% 100%, #fff0d6, transparent 60%), var(--bg); }
.auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 32px; box-shadow: var(--shadow-lg); }
.auth-card h1 { font-size: 24px; } .checks { list-style: none; padding: 0; margin: 0 0 18px; columns: 2; font-size: 13px; } .checks .ok { color: var(--green); } .checks .bad { color: var(--red); font-weight: 600; }
.form h3 { margin-top: 18px; }

/* ---------- Home ---------- */
.hero { background: linear-gradient(135deg, #12183a, #1d1650 60%, #2a1a5c); color: #fff; border-radius: 20px; padding: 26px 28px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; border: 40px solid rgba(124,108,255,.18); }
.hero h1 { color: #fff; } .hero p { color: #c7cbe0; }
.composer { background: #fff; border-radius: 14px; padding: 6px; display: flex; gap: 6px; margin-top: 16px; position: relative; z-index: 1; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.composer textarea { border: 0; min-height: 52px; resize: none; box-shadow: none !important; }
.examples { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; position: relative; z-index: 1; }
.examples button { background: rgba(255,255,255,.08); color: #e4e6f5; border: 1px solid rgba(255,255,255,.14); border-radius: 99px; padding: 5px 12px; font: 500 12.5px var(--font); cursor: pointer; }
.examples button:hover { background: rgba(255,255,255,.16); }
.setup li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.setup { list-style: none; margin: 0; padding: 0; } .setup .tick { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; flex: none; color: #fff; }
.setup .done .tick { background: var(--green); border-color: var(--green); } .setup .done .t { text-decoration: line-through; color: var(--muted); }

/* ---------- Wizard ---------- */
.stepper { display: flex; align-items: center; gap: 10px; margin: 6px 0 22px; flex-wrap: wrap; }
.stepper .st { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; font-size: 13px; }
.stepper .st b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-2); font-size: 12px; }
.stepper .st.on { color: var(--violet); } .stepper .st.on b { background: var(--violet); color: #fff; border-color: var(--violet); }
.stepper .st.done b { background: var(--violet-bg); color: var(--violet); border-color: #ddd8ff; } .stepper .st.skip { opacity: .4; }
.stepper .ln { flex: 1; min-width: 20px; height: 1px; background: var(--line-2); }
.goals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.goal { display: block; position: relative; cursor: pointer; } .goal input { position: absolute; opacity: 0; }
.goal .gc { border: 1.5px solid var(--line); border-radius: 16px; padding: 18px; background: var(--surface); height: 100%; transition: border-color .15s, box-shadow .15s, transform .15s; }
.goal:hover .gc { border-color: var(--line-2); transform: translateY(-1px); box-shadow: var(--shadow); }
.goal input:checked + .gc { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(245,158,11,.14); }
.goal input:checked + .gc::after { content: "✓"; position: absolute; right: 14px; top: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--amber); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.goal input:focus-visible + .gc { box-shadow: var(--focus); }
.goal .gi { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 12px; color: var(--text); }
.goal h3 { font-size: 16px; } .goal p { color: var(--muted); font-size: 13px; margin: 0; }
.opt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.opt { position: relative; cursor: pointer; } .opt input { position: absolute; opacity: 0; }
.opt .oc { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px; display: flex; gap: 10px; align-items: center; background: var(--surface); font-weight: 600; font-size: 13px; }
.opt .oc small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; }
.opt input:checked + .oc { border-color: var(--violet); background: var(--violet-bg); } .opt input:disabled + .oc { opacity: .5; cursor: not-allowed; }
.preview-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.preview-steps li { display: flex; gap: 10px; align-items: center; padding: 8px 0; font-size: 13px; counter-increment: s; }
.preview-steps li::before { content: counter(s); width: 22px; height: 22px; border-radius: 50%; background: var(--violet-bg); color: var(--violet); font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
.need { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); margin-bottom: 8px; font-size: 13px; }
.tpl-card { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: 10px; width: 100%; text-align: left; font: inherit; cursor: pointer; color: inherit; }
.tpl-card:hover { border-color: var(--violet-2); }
.tpl-card b { display: block; } .tpl-card small { color: var(--muted); }

/* ---------- Studio ---------- */
.studio { display: flex; flex-direction: column; height: calc(100vh - 63px); }
.studio-head { display: flex; align-items: center; gap: 14px; padding: 14px 22px; background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.studio-head .jicon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, #f9a8d4, #a78bfa 50%, #fbbf24); color: #fff; flex: none; }
.studio-head .jname { font-size: 19px; font-weight: 700; border: 1px solid transparent; padding: 2px 6px; border-radius: 8px; width: auto; min-width: 120px; max-width: 360px; background: none; }
.studio-head .jname:hover { border-color: var(--line); } .studio-head .jname:focus { border-color: var(--violet-2); }
.save-state { font-size: 12px; color: var(--muted); display: inline-flex; gap: 5px; align-items: center; }
.studio-tabs { display: flex; gap: 2px; padding: 0 22px; background: var(--surface); border-bottom: 1px solid var(--line); }
.studio-tabs button { padding: 11px 14px; border: 0; background: none; font: 600 13.5px var(--font); color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.studio-tabs button.on { color: var(--violet); border-bottom-color: var(--violet); }
.studio-tabs .cnt { background: var(--red-bg); color: var(--red); border-radius: 99px; padding: 0 7px; font-size: 11px; }
.studio-tabs .cnt.zero { background: var(--green-bg); color: var(--green); }
.studio-body { flex: 1; display: grid; grid-template-columns: 270px minmax(0, 1fr) 380px; min-height: 0; }
.studio-body > section { overflow-y: auto; min-height: 0; }
.palette { background: var(--surface); border-right: 1px solid var(--line); padding: 16px; }
.palette h4 { margin: 14px 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.pal-item { display: flex; gap: 10px; align-items: center; width: 100%; padding: 7px 8px; border-radius: 9px; border: 0; background: none; font: 500 13px var(--font); color: var(--text-2); cursor: pointer; text-align: left; }
.pal-item:hover { background: var(--violet-bg); color: var(--violet); }
.pal-item .ib { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.suggest-box { background: linear-gradient(180deg, var(--violet-bg), #fff); border: 1px solid #e3deff; border-radius: 12px; padding: 10px; margin-bottom: 6px; }
.suggest-box h4 { margin-top: 2px; color: var(--violet); }
.canvas { background: radial-gradient(circle, #dcdff0 1px, transparent 1.2px) 0 0/20px 20px, var(--bg); padding: 26px 20px 120px; position: relative; }
.flow { max-width: 520px; margin: 0 auto; }
.node { background: var(--surface); border: 1.5px solid var(--line); border-radius: 15px; padding: 13px 14px; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; position: relative;
  box-shadow: 0 1px 2px rgba(14,19,48,.04); transition: border-color .15s, box-shadow .15s, transform .15s; }
.node:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.node.sel { border-color: var(--violet-2); box-shadow: 0 0 0 4px rgba(124,108,255,.16), var(--shadow); }
.node.has-err { border-color: #f4b4b6; } .node.trigger { border-style: solid; }
.node .ni { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: none; }
.node .nb { min-width: 0; flex: 1; } .node .nk { font-size: 11.5px; color: var(--muted); font-weight: 500; display: flex; gap: 6px; align-items: center; }
.node .nt { font-weight: 650; font-size: 14px; margin: 1px 0 2px; } .node .ns { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.node .nw { font-size: 11.5px; color: var(--red); margin-top: 5px; display: flex; gap: 4px; align-items: center; }
.node .tools { position: absolute; right: 8px; top: 8px; display: none; gap: 2px; background: var(--surface); border-radius: 8px; }
.node:hover .tools, .node.sel .tools { display: flex; }
.node .tools button { width: 26px; height: 26px; border: 0; background: none; border-radius: 7px; cursor: pointer; color: var(--muted); display: grid; place-items: center; }
.node .tools button:hover { background: var(--surface-2); color: var(--text); }
.c-start { background: linear-gradient(135deg, #ec4899, #8b5cf6); } .c-talk { background: linear-gradient(135deg, #3b82f6, #2563eb); } .c-ai { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.c-customer { background: linear-gradient(135deg, #14b8a6, #0d9488); } .c-reward { background: linear-gradient(135deg, #fbbf24, #f59e0b); } .c-commerce { background: linear-gradient(135deg, #fb923c, #ea580c); }
.c-booking { background: linear-gradient(135deg, #22c55e, #16a34a); } .c-logic { background: linear-gradient(135deg, #64748b, #334155); }
.lc-start { background: #fdf2f8; color: var(--pink); } .lc-talk { background: var(--blue-bg); color: var(--blue); } .lc-ai { background: var(--violet-bg); color: var(--violet); }
.lc-customer { background: #e6f7f5; color: #0d9488; } .lc-reward { background: var(--amber-bg); color: var(--amber-2); } .lc-commerce { background: #fff1e7; color: #ea580c; }
.lc-booking { background: var(--green-bg); color: var(--green); } .lc-logic { background: #eef1f5; color: #334155; }
.link { display: flex; flex-direction: column; align-items: center; padding: 2px 0; }
.link .ln { width: 2px; height: 14px; background: #c9cde2; }
.link .add { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #c9cde2; background: var(--surface); color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: all .15s; }
.link .add:hover, .link .add.on { border-color: var(--violet); color: #fff; background: var(--violet); transform: scale(1.1); }
.branches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.br { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); }
.br .to { color: var(--muted); font-weight: 500; } .br.fail { background: #fff6f6; border-color: #f8d8d9; } .br.good { background: #f3fbf6; border-color: #cfeedd; }
.end-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--nav); color: #fff; padding: 9px 22px; border-radius: 99px; font-weight: 600; margin: 0 auto; }
.popover { position: absolute; z-index: 30; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; width: 320px; }
.popover h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 6px 8px; }
.panel { background: var(--surface); border-left: 1px solid var(--line); padding: 0; }
.panel-head { padding: 16px 18px; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-start; background: linear-gradient(180deg, var(--surface-2), #fff); position: sticky; top: 0; z-index: 2; }
.panel-head .ni { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: none; }
.panel-head h3 { margin: 0; } .panel-head p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.panel-body { padding: 16px 18px 40px; }
.panel .section-t { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; margin: 18px 0 10px; }
.varchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .varchips button { font: 500 11px ui-monospace, monospace; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; color: var(--violet); }
.path-row { display: grid; grid-template-columns: 120px 1fr; gap: 8px; align-items: center; margin-bottom: 8px; } .path-row span { font-weight: 600; font-size: 12.5px; }
.ready { border-top: 1px solid var(--line); background: var(--surface); padding: 10px 22px; display: flex; gap: 12px; align-items: center; font-size: 13px; }
.issue { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; margin-bottom: 8px; align-items: flex-start; font-size: 13px; }
.issue.error { background: var(--red-bg); color: #8f1f23; } .issue.warn { background: var(--amber-bg); color: #7a4306; } .issue.tip { background: var(--blue-bg); color: #1f4fb8; }
.issue .btn { margin-left: auto; }
.trace { list-style: none; margin: 0; padding: 0; position: relative; }
.trace li { display: flex; gap: 12px; padding: 0 0 16px; position: relative; }
.trace li::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--line); } .trace li:last-child::before { display: none; }
.trace .dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; z-index: 1; }
.trace .ok .dot { background: var(--green-bg); color: var(--green); } .trace .wait .dot { background: var(--blue-bg); color: var(--blue); }
.trace .fail .dot { background: var(--red-bg); color: var(--red); } .trace .skip .dot { background: var(--surface-2); color: var(--muted); }
.trace b { display: block; font-size: 13.5px; } .trace p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
.scen { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.scen label { cursor: pointer; position: relative; } .scen input { position: absolute; opacity: 0; }
.scen .sc { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface); height: 100%; }
.scen .sc b { display: block; font-size: 13px; } .scen .sc small { color: var(--muted); font-size: 11.5px; }
.scen input:checked + .sc { border-color: var(--green); background: #f3fbf6; }
.mapwrap { overflow: auto; height: 100%; }
.map svg { display: block; } .map .mnode { cursor: pointer; } .map .mnode rect { fill: #fff; stroke: #dfe2ef; stroke-width: 1.5; }
.map .mnode.sel rect { stroke: var(--violet-2); stroke-width: 2.5; } .map .mnode text { font: 600 12.5px var(--font); fill: var(--text); } .map .mnode .sub { font: 500 11px var(--font); fill: var(--muted); }
.map .edge { fill: none; stroke: #b8bdd6; stroke-width: 1.6; } .map .edge.alt { stroke: var(--violet-2); stroke-dasharray: 5 4; } .map .edge.fail { stroke: #f0a2a4; stroke-dasharray: 4 4; }
.map .elabel { font: 600 10.5px var(--font); fill: var(--text-2); } .map .port { fill: #fff; stroke: var(--violet); stroke-width: 2; cursor: crosshair; } .map .port:hover { fill: var(--violet); }
.map .drag-line { stroke: var(--violet); stroke-width: 2; stroke-dasharray: 4 3; fill: none; pointer-events: none; }

/* ---------- Timeline, inbox, chat ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.timeline .ti { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.timeline .tt { flex: 1; min-width: 0; } .timeline .tt b { font-weight: 600; font-size: 13.5px; } .timeline time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.inbox { display: grid; grid-template-columns: 320px minmax(0, 1fr) 300px; height: calc(100vh - 63px); }
.inbox > section { overflow-y: auto; min-height: 0; border-right: 1px solid var(--line); background: var(--surface); }
.conv { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none !important; }
.conv:hover { background: var(--surface-2); } .conv.on { background: var(--violet-bg); }
.conv b { display: block; font-size: 13.5px; } .conv small { color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.thread { display: flex; flex-direction: column; background: var(--bg) !important; }
.msgs { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 70%; padding: 9px 13px; border-radius: 16px; font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.bubble.in { background: var(--surface); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 5px; }
.bubble.out { background: var(--violet); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; }
.bubble.fail { background: var(--red-bg); color: var(--red); border: 1px solid #f8cfd0; }
.bubble img { max-width: 240px; border-radius: 10px; display: block; margin-top: 4px; } .bubble small { display: block; opacity: .65; font-size: 10.5px; margin-top: 3px; }
.reply { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: var(--surface); }
.reply textarea { min-height: 42px; height: 42px; }
.chat-page { max-width: 480px; margin: 0 auto; height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.chat-head { padding: 14px 16px; background: var(--nav); color: #fff; display: flex; gap: 10px; align-items: center; }
.chat-head small { color: var(--nav-dim); display: block; }
.test-banner { background: var(--amber-bg); color: #7a4306; font-size: 12px; padding: 7px 14px; border-bottom: 1px solid #fbe2b5; }

/* ---------- Dialog & toast ---------- */
dialog { border: 0; border-radius: 18px; padding: 0; box-shadow: var(--shadow-lg); width: min(560px, calc(100vw - 32px)); color: var(--text); }
dialog::backdrop { background: rgba(10,15,36,.45); backdrop-filter: blur(2px); }
dialog .dh { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; } dialog .dh h3 { margin: 0; }
dialog .db { padding: 20px 22px; max-height: 70vh; overflow-y: auto; } dialog .df { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; background: var(--surface-2); }
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--nav); color: #fff; padding: 11px 16px; border-radius: 12px; box-shadow: var(--shadow-lg); font-size: 13.5px; animation: tin .2s ease-out; max-width: 360px; }
.toast.err { background: var(--red); } @keyframes tin { from { transform: translateY(8px); opacity: 0; } }
.bar { height: 8px; border-radius: 9px; background: var(--surface-2); overflow: hidden; } .bar i { display: block; height: 100%; background: var(--violet-2); border-radius: 9px; }
.ledger-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.explain { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--line-2); font-size: 13px; color: var(--text-2); }
.svc-card { display: flex; flex-direction: column; gap: 6px; } .svc-card .price { font-size: 20px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .studio-body { grid-template-columns: 230px minmax(0, 1fr) 340px; }
  .inbox { grid-template-columns: 280px minmax(0, 1fr); } .inbox .side-info { display: none; }
}
@media (max-width: 1024px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; z-index: 60; width: 270px; transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: none; box-shadow: var(--shadow-lg); }
  .mobile-only { display: inline-grid; }
  .studio { height: auto; } .studio-body { grid-template-columns: 1fr; } .palette { display: none; } .palette.open { display: block; }
  .studio-body > section { overflow: visible; } .panel { border-left: 0; border-top: 1px solid var(--line); }
  .cols, .cols.l { grid-template-columns: 1fr; } .grid4 { grid-template-columns: 1fr 1fr; } .goals { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .content { padding: 18px 16px 50px; } .topbar { padding: 10px 16px; } .user-menu .who, .topbar .pill span.lbl { display: none; }
  .grid2, .grid3, .grid4, .goals, .ledger-split { grid-template-columns: 1fr; }
  .inbox { grid-template-columns: 1fr; height: auto; } .inbox > section { max-height: none; }
  .studio-head { padding: 12px 16px; } .studio-tabs { padding: 0 8px; overflow-x: auto; } .bubble { max-width: 88%; }
  h1 { font-size: 22px; } .checks { columns: 1; } .search { display: none; }
  .composer { flex-direction: column; } .composer .btn { width: 100%; }
  .grid4 { grid-template-columns: 1fr 1fr; gap: 10px; } .kpi .value { font-size: 20px; } .kpi .ic { display: none; } .card { padding: 16px; }
}

/* ---------- Composio app gallery ---------- */
.apps-toolbar { display: flex; gap: 14px; align-items: center; padding: 16px 18px 12px; flex-wrap: wrap; }
.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 4px 18px 18px; background: var(--surface-2); border-top: 1px solid var(--line); padding-top: 16px; }
.app-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.app-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-1px); }
.app-card.on { border-color: #c8eed8; background: linear-gradient(180deg, #f6fdf9, #fff); }
.app-card p { margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.app-logo { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; font-weight: 700; color: var(--violet); }
.app-logo img { width: 26px; height: 26px; object-fit: contain; }