:root {
  --bg: #07070c;
  --sidebar: #0b0b12;
  --panel: #101019;
  --panel-2: #151421;
  --line: rgba(255,255,255,.085);
  --line-2: rgba(255,255,255,.14);
  --text: #f7f5fb;
  --muted: #8e8998;
  --muted-2: #605c69;
  --violet: #805cf0;
  --violet-2: #a579ff;
  --blue: #5d8dff;
  --orange: #ff9254;
  --amber: #ffc76b;
  --green: #63d5a2;
  --red: #f07078;
  --shadow: 0 24px 80px rgba(0,0,0,.45);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--bg); color: var(--text); font-family: "Manrope", sans-serif; -webkit-font-smoothing: antialiased; }
* { scrollbar-width: thin; scrollbar-color: #292431 #0a0910; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: #0a0910; }
*::-webkit-scrollbar-thumb { background: #292431; border: 2px solid #0a0910; border-radius: 10px; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.app-shell { height: 100%; display: flex; background: radial-gradient(circle at 85% 0%, rgba(77,60,172,.07), transparent 28%), var(--bg); }
.sidebar { width: 236px; flex: none; border-right: 1px solid var(--line); background: linear-gradient(180deg, #0c0b13, #09090f); display: flex; flex-direction: column; position: relative; z-index: 5; }
.sidebar-brand { height: 72px; display: flex; align-items: center; gap: 11px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.flow-logo { width: 33px; height: 33px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; background: linear-gradient(140deg, #7253e5, #9967e8 58%, #f09b59); box-shadow: inset 0 1px rgba(255,255,255,.28), 0 8px 20px rgba(100,70,210,.2); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.2; }
.brand-copy strong { font-size: 14px; letter-spacing: -.025em; }
.brand-copy small { font: 500 6px "DM Mono", monospace; color: #5e5968; letter-spacing: .15em; margin-top: 3px; }
.side-nav { padding: 18px 11px; display: flex; flex-direction: column; gap: 4px; }
.nav-item { border: 0; background: transparent; display: flex; align-items: center; gap: 12px; width: 100%; height: 44px; border-radius: 8px; color: #85808e; padding: 0 12px; font-size: 12px; cursor: pointer; text-align: left; position: relative; transition: background .18s ease, color .18s ease; }
.nav-item:hover { color: #d2ccd8; background: rgba(255,255,255,.035); }
.nav-item.active { color: #f3eff8; background: linear-gradient(90deg, rgba(117,81,222,.17), rgba(117,81,222,.05)); }
.nav-item.active::before { content: ""; position: absolute; left: -11px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--violet-2), var(--orange)); box-shadow: 0 0 9px var(--violet); }
.nav-icon { width: 19px; text-align: center; font-size: 15px; color: #6f697c; }
.nav-item.active .nav-icon { color: #a886fa; }
.sidebar-bottom { margin-top: auto; padding: 13px; }
.usage { border: 1px solid var(--line); border-radius: 9px; padding: 13px; margin-bottom: 11px; background: rgba(255,255,255,.018); }
.usage > div { display: flex; justify-content: space-between; font-size: 7px; color: #77717e; }
.usage strong { color: #a69fac; font-weight: 500; }
.usage > i { display: block; height: 3px; background: #26242d; border-radius: 5px; margin: 9px 0 7px; overflow: hidden; }
.usage > i b { display: block; width: 72%; height: 100%; background: linear-gradient(90deg, var(--violet), var(--orange)); }
.usage small { color: #55515d; font-size: 6px; }
.profile-button { width: 100%; border: 0; background: transparent; display: flex; align-items: center; gap: 9px; padding: 8px; text-align: left; }
.profile-avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #e29b65, #5e3d71); font-size: 7px; font-weight: 700; }
.profile-button > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.profile-button strong { font-size: 8px; }.profile-button small { font-size: 6px; color: #66616c; }
.profile-button > i { margin-left: auto; color: #4e4a55; font-size: 7px; font-style: normal; letter-spacing: 2px; }
.main-shell { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 72px; flex: none; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 30px; background: rgba(9,9,15,.75); backdrop-filter: blur(16px); }
.breadcrumbs { display: flex; align-items: center; gap: 9px; color: #5f5b67; font-size: 9px; }
.breadcrumbs i { color: #393641; font-style: normal; }.breadcrumbs strong { color: #b4aebb; font-weight: 500; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.search-button { width: 178px; height: 34px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 7px; background: #111019; color: #696571; font-size: 8px; padding: 0 10px; }
.search-button span { font-size: 14px; }.search-button kbd { margin-left: auto; padding: 3px 5px; background: #1b1922; border: 1px solid var(--line); border-radius: 4px; color: #5d5864; font: 500 6px "DM Mono", monospace; }
.icon-button, .help-button { width: 34px; height: 34px; border: 1px solid var(--line); background: #111019; border-radius: 7px; display: grid; place-items: center; color: #787380; position: relative; }
.icon-button i { width: 4px; height: 4px; border-radius: 50%; background: var(--orange); position: absolute; top: 7px; right: 7px; box-shadow: 0 0 6px var(--orange); }
.help-button { border-radius: 50%; font-size: 10px; }
.mobile-nav-toggle { display: none; border: 0; background: none; color: #a8a2ae; font-size: 20px; margin-right: 12px; }
.page-content { flex: 1; overflow-y: auto; padding: 36px 38px 70px; position: relative; }
.page-wrap { max-width: 1140px; margin: 0 auto; animation: pageIn .3s ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(5px); } }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; }
.page-kicker { color: #706880; font: 500 7px "DM Mono", monospace; letter-spacing: .13em; }
.page-head h1 { font-size: 28px; letter-spacing: -.045em; margin: 7px 0 0; font-weight: 600; }
.page-head p { color: #797482; font-size: 13px; line-height: 1.55; margin: 8px 0 0; }
.primary-action { min-height: 40px; border: 0; border-radius: 8px; padding: 0 15px; background: linear-gradient(125deg, #6e50df, #9161e2); color: white; font-size: 11px; font-weight: 700; box-shadow: 0 8px 23px rgba(109,76,209,.2), inset 0 1px rgba(255,255,255,.25); cursor: pointer; }
.primary-action span { font-size: 15px; margin-right: 5px; vertical-align: -1px; }
.secondary-action { min-height: 40px; border: 1px solid var(--line-2); border-radius: 8px; padding: 0 14px; background: rgba(255,255,255,.025); color: #c1bbc8; font-size: 11px; cursor: pointer; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.stat-card { border: 1px solid var(--line); border-radius: 11px; padding: 18px; min-height: 115px; background: linear-gradient(145deg, rgba(255,255,255,.023), rgba(255,255,255,.008)); position: relative; overflow: hidden; }
.stat-card::after { content: ""; position: absolute; width: 80px; height: 80px; border-radius: 50%; right: -30px; top: -35px; background: radial-gradient(circle, rgba(122,81,211,.09), transparent 70%); }
.stat-card > span { color: #77727f; font-size: 8px; }.stat-card strong { display: block; font-size: 25px; letter-spacing: -.04em; margin: 8px 0 3px; }
.stat-card small { color: #5f9b7d; font-size: 7px; }.stat-card small.warn { color: #b47b60; }
.content-grid { display: grid; grid-template-columns: 1.5fr .75fr; gap: 12px; margin-top: 12px; }
.card { border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.012); overflow: hidden; }
.card-header { height: 54px; padding: 0 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.card-header h2 { font-size: 13px; margin: 0; }.card-header span, .card-header button { color: #696470; font-size: 10px; }
.card-header button { border: 0; background: none; cursor: pointer; }
.chart-area { height: 225px; padding: 22px 18px 13px; display: flex; align-items: flex-end; gap: 11px; position: relative; }
.chart-area::before { content: ""; position: absolute; inset: 24px 18px; background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 44px); opacity: .4; }
.bar { flex: 1; height: var(--height); background: linear-gradient(180deg, rgba(132,91,235,.75), rgba(96,68,181,.12)); border-radius: 4px 4px 2px 2px; position: relative; min-width: 12px; }
.bar:nth-child(3n) { background: linear-gradient(180deg, rgba(246,143,79,.65), rgba(138,70,61,.12)); }
.activity-list { padding: 4px 18px 10px; }
.activity-row { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.activity-row:last-child { border: 0; }.activity-icon { width: 25px; height: 25px; border-radius: 7px; display: grid; place-items: center; flex: none; background: rgba(123,83,213,.12); color: #a382ec; font-size: 9px; }
.activity-row div { display: flex; flex-direction: column; gap: 3px; }.activity-row strong { font-size: 11px; font-weight: 600; }.activity-row span { color: #625e69; font-size: 9px; }
.table-card { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: rgba(255,255,255,.012); }
.table-toolbar { padding: 15px 17px; display: flex; gap: 8px; border-bottom: 1px solid var(--line); }
.filter-input { width: 210px; height: 36px; border: 1px solid var(--line); background: #0d0d14; border-radius: 7px; padding: 0 10px; color: #aaa4b0; font-size: 11px; outline: none; }
.filter-pill { min-height: 36px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: #77727f; font-size: 11px; padding: 0 10px; }
.data-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.data-table th { text-align: left; color: #5d5964; font: 500 9px "DM Mono", monospace; letter-spacing: .08em; padding: 11px 17px; background: rgba(255,255,255,.012); border-bottom: 1px solid var(--line); }
.data-table td { padding: 14px 17px; border-bottom: 1px solid var(--line); color: #8f8996; font-size: 11px; }
.data-table tr:last-child td { border-bottom: 0; }
.entity { display: flex; align-items: center; gap: 9px; }.entity-avatar { width: 25px; height: 25px; border-radius: 7px; display: grid; place-items: center; background: linear-gradient(145deg, #5e4d85, #2a2538); color: #d8cce9; font-size: 6px; font-weight: 700; }
.entity div { display: flex; flex-direction: column; gap: 2px; }.entity strong { color: #c7c1cc; font-weight: 600; }.entity small { color: #55515b; font-size: 9px; }
.status-pill { display: inline-block; padding: 5px 8px; border-radius: 20px; background: rgba(89,190,140,.1); color: #6ab68f; font-size: 9px; }
.status-pill.pending { background: rgba(229,153,79,.1); color: #b88761; }
.row-action { border: 0; background: none; color: #57525e; cursor: pointer; }
.empty-card { min-height: 310px; border: 1px dashed var(--line-2); border-radius: 11px; display: grid; place-items: center; text-align: center; background: rgba(255,255,255,.009); }
.empty-card span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(118,79,204,.1); color: #9b78df; font-size: 20px; margin: auto; }
.empty-card h3 { margin: 14px 0 7px; font-size: 13px; }.empty-card p { color: #716b77; font-size: 9px; margin: 0; }
.form-panel { border: 1px solid var(--line); border-radius: 11px; background: linear-gradient(145deg, rgba(111,71,190,.06), rgba(255,255,255,.012)); padding: 22px; margin-bottom: 13px; animation: panelIn .25s ease both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(-6px); } }
.form-panel-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }.form-panel-head h2 { margin: 0 0 5px; font-size: 15px; }.form-panel-head p { margin: 0; color: #6f6976; font-size: 11px; line-height: 1.5; }
.form-close { border: 0; background: none; color: #5d5864; font-size: 18px; cursor: pointer; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; }.field.full { grid-column: 1/-1; }
.field label { color: #898390; font-size: 11px; font-weight: 600; }.field input, .field select { width: 100%; height: 42px; border: 1px solid var(--line-2); border-radius: 7px; background: #0d0c14; color: #c1bac8; padding: 0 11px; font-size: 11px; outline: none; }
.field input:focus, .field select:focus { border-color: rgba(129,91,231,.7); box-shadow: 0 0 0 3px rgba(115,80,215,.1); }
.form-actions { grid-column: 1/-1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 7px; }
.billing-layout, .settings-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.info-card { padding: 22px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.012); }
.info-card > span { color: #6e6875; font: 500 9px "DM Mono", monospace; letter-spacing: .1em; }.info-card h2 { margin: 11px 0 7px; font-size: 17px; }.info-card p { color: #77717e; font-size: 11px; line-height: 1.7; }
.plan-price { font-size: 32px; margin: 17px 0; letter-spacing: -.05em; }.plan-price small { color: #68626e; font-size: 9px; letter-spacing: 0; }
.invoice-row, .setting-row { display: flex; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 11px; }.invoice-row:last-child, .setting-row:last-child { border: 0; }
.invoice-row span:nth-child(2) { margin-left: auto; color: #6e6974; }.invoice-row strong { margin-left: 25px; font-weight: 500; }
.setting-row div { display: flex; flex-direction: column; gap: 3px; }.setting-row strong { font-size: 11px; }.setting-row small { color: #625d68; font-size: 9px; }
.toggle { width: 31px; height: 17px; padding: 2px; border: 0; border-radius: 20px; background: #282530; margin-left: auto; }.toggle i { display: block; width: 13px; height: 13px; border-radius: 50%; background: #69636f; }.toggle.on { background: #6748c6; }.toggle.on i { margin-left: 14px; background: white; }

.guide-launcher { position: fixed; right: 24px; bottom: 22px; z-index: 25; width: 35px; height: 35px; padding: 0 6px; display: flex; align-items: center; gap: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: linear-gradient(125deg, #171322, #11101a); box-shadow: 0 11px 32px rgba(0,0,0,.45), 0 0 21px rgba(107,68,210,.14); font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: width .28s ease, gap .28s ease, box-shadow .28s ease, border-color .28s ease; }
.guide-launcher > span:nth-child(2) { max-width: 0; opacity: 0; transform: translateX(-5px); transition: max-width .28s ease, opacity .18s ease, transform .28s ease; }
.guide-launcher:hover, .guide-launcher:focus-visible { width: 110px; gap: 7px; border-color: rgba(255,255,255,.22); box-shadow: 0 13px 36px rgba(0,0,0,.5), 0 0 27px rgba(107,68,210,.22); outline: none; }
.guide-launcher:hover > span:nth-child(2), .guide-launcher:focus-visible > span:nth-child(2) { max-width: 65px; opacity: 1; transform: none; }
.guide-symbol { width: 25px; height: 25px; display: inline-grid; place-items: center; position: relative; flex: none; }
.guide-symbol img { display: block; width: 100%; height: 100%; object-fit: contain; }
.launcher-status { position: absolute; right: 3px; bottom: 3px; width: 5px; height: 5px; border: 1px solid #171322; border-radius: 50%; background: var(--green); box-shadow: 0 0 5px var(--green); }
.guide-panel { position: fixed; z-index: 30; right: 24px; bottom: 22px; width: 355px; height: min(590px, calc(100vh - 44px)); display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; overflow: hidden; background: rgba(15,13,23,.98); box-shadow: var(--shadow), 0 0 70px rgba(97,59,188,.17); transform: translateY(18px) scale(.98); transform-origin: bottom right; opacity: 0; visibility: hidden; transition: .24s ease; }
.guide-panel.open { transform: scale(1); opacity: 1; visibility: visible; }
.guide-panel-header { height: 64px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.012); }
.guide-panel-header > div { display: flex; flex-direction: column; gap: 3px; }.guide-panel-header strong { font-size: 12px; }.guide-panel-header small { color: #686370; font-size: 9px; }.guide-panel-header small i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 5px var(--green); margin-right: 4px; }
.guide-panel-header button { margin-left: auto; border: 0; background: none; color: #635e6a; font-size: 20px; cursor: pointer; }
.guide-panel-body { flex: 1; overflow-y: auto; padding: 22px 17px; }
.guide-intro { text-align: center; padding: 5px 13px 21px; }.intro-mark { color: var(--amber); text-shadow: 0 0 18px var(--orange); }.guide-intro h2 { font-size: 17px; margin: 9px 0 7px; letter-spacing: -.03em; }.guide-intro p { margin: 0; color: #7c7683; font-size: 10px; line-height: 1.7; }
.suggestions > span { display: block; color: #5f5967; font: 500 6px "DM Mono", monospace; letter-spacing: .13em; margin-bottom: 8px; }
.suggestions button { width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.018); color: #a49daa; text-align: left; padding: 0 11px; margin-bottom: 6px; font-size: 11px; cursor: pointer; transition: .18s ease; }
.suggestions button:hover { color: white; border-color: rgba(131,91,222,.35); background: rgba(113,75,198,.07); transform: translateX(2px); }
.missing-workflow-hint { margin: 10px 3px 0; color: #655f6b; font-size: 8px; line-height: 1.55; }
.guide-response { display: none; }.guide-response.active { display: block; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.chat-exchange + .chat-exchange { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.055); }
.chat-user { max-width: 83%; margin: 0 0 14px auto; padding: 10px 11px; border-radius: 10px 10px 2px 10px; background: #292532; color: #d4ced9; font-size: 11px; line-height: 1.5; }
.chat-assistant { display: flex; align-items: flex-start; gap: 8px; }.chat-bot { width: 24px; height: 24px; flex: none; display: grid; place-items: center; }
.chat-bot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.chat-bubble { flex: 1; }.chat-bubble p { margin: 2px 0 11px; color: #c9c3ce; font-size: 11px; line-height: 1.6; }
.match-chip { display: inline-block; color: #907bd0; background: rgba(117,78,201,.1); border: 1px solid rgba(117,78,201,.18); border-radius: 20px; padding: 4px 7px; font: 500 6px "DM Mono", monospace; letter-spacing: .06em; margin-bottom: 9px; }
.response-actions { display: flex; gap: 6px; }.response-actions button { min-height: 36px; border-radius: 6px; padding: 0 11px; font-size: 11px; cursor: pointer; }.start-walkthrough { border: 0; background: linear-gradient(120deg, #704fd3, #9361dd); color: white; }.not-now { border: 1px solid var(--line); background: transparent; color: #77717e; }
.guide-input-row { flex: none; min-height: 55px; margin: 0 13px 11px; padding: 0 7px 0 11px; display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 9px; background: #0c0b12; }
.guide-input-row input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #cec8d3; font-size: 11px; }.guide-input-row input::placeholder { color: #56515d; }
.guide-input-row button { width: 29px; height: 29px; border: 0; border-radius: 7px; background: linear-gradient(135deg, #694acb, #8b5bd7); font-size: 13px; cursor: pointer; }
.guide-footer { flex: none; height: 24px; border-top: 1px solid var(--line); display: flex; justify-content: center; align-items: center; gap: 5px; color: #48434e; font-size: 6px; }.guide-footer span:last-child { color: #7050c5; }

.walkthrough-shade { position: fixed; z-index: 50; inset: 0; background: rgba(2,2,7,.69); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease; }
.walkthrough-focus { position: fixed; z-index: 52; border: 2px solid var(--blue); border-radius: 10px; box-shadow: 0 0 0 5px rgba(80,127,255,.15), 0 0 28px rgba(79,126,255,.8), inset 0 0 18px rgba(79,126,255,.12); opacity: 0; visibility: hidden; pointer-events: none; transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease, opacity .2s ease; animation: focusPulse 1.8s ease-in-out infinite; }
@keyframes focusPulse { 50% { box-shadow: 0 0 0 8px rgba(80,127,255,.09), 0 0 37px rgba(79,126,255,.95), inset 0 0 18px rgba(79,126,255,.17); } }
.walkthrough-tooltip { position: fixed; z-index: 54; width: 270px; border: 1px solid rgba(101,144,255,.34); border-radius: 12px; background: #12101b; box-shadow: 0 18px 55px rgba(0,0,0,.5), 0 0 32px rgba(70,106,220,.12); padding: 16px; opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity .2s ease, transform .2s ease; }
.walkthrough-active .walkthrough-shade, .walkthrough-active .walkthrough-focus, .walkthrough-active .walkthrough-tooltip { opacity: 1; visibility: visible; }
.walkthrough-active .walkthrough-tooltip { transform: none; }
.walkthrough-active .guide-panel, .walkthrough-active .guide-launcher { opacity: 0; visibility: hidden; }
.tooltip-top { display: flex; align-items: center; }.tooltip-top span { margin-left: auto; color: #759cf8; font: 500 6px "DM Mono", monospace; letter-spacing: .13em; }.tooltip-top button { border: 0; background: none; color: #5d5865; font-size: 17px; cursor: pointer; }
.walkthrough-tooltip > h3 { font-size: 13px; line-height: 1.45; margin: 11px 0 5px; }
.walkthrough-tooltip > p { color: #746e7b; font-size: 10px; line-height: 1.6; margin: 0; }
.tooltip-summary { width: 100%; min-height: 32px; display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 8px; padding: 0; border: 0; background: none; color: #69637a; font-size: 11px; cursor: pointer; }
.tooltip-caret { color: #829ff2; font-size: 15px; transition: transform .2s ease; }
.walkthrough-tooltip.expanded .tooltip-caret { transform: rotate(180deg); }
.tooltip-details { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .22s ease, opacity .18s ease, margin .22s ease; }
.walkthrough-tooltip.expanded .tooltip-details { max-height: 40px; opacity: 1; margin-top: 7px; }
.tooltip-next { width: 100%; height: 38px; border: 0; border-radius: 6px; color: white; background: linear-gradient(120deg, #4f72d2, #7059dc); font-size: 11px; cursor: pointer; }
.tooltip-next span { margin-left: 8px; }
.tooltip-next:disabled { cursor: not-allowed; opacity: .38; filter: saturate(.35); }
.tooltip-arrow { position: absolute; width: 10px; height: 10px; background: #12101b; border-left: 1px solid rgba(101,144,255,.34); border-top: 1px solid rgba(101,144,255,.34); transform: rotate(45deg); top: -6px; left: 28px; }
.walkthrough-target-live { position: relative !important; z-index: 53 !important; }
.launcher-nudge { position: fixed; z-index: 24; right: 68px; bottom: 22px; min-width: 165px; padding: 10px 28px 10px 12px; border: 1px solid rgba(104,76,188,.25); border-radius: 10px; background: rgba(17,14,27,.96); box-shadow: 0 12px 35px rgba(0,0,0,.24), 0 0 25px rgba(107,68,210,.12); opacity: 1; transform: none; transition: opacity .25s ease, transform .25s ease, visibility .25s ease; pointer-events: none; }
.launcher-nudge span { display: block; color: var(--amber); font: 500 5px "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.launcher-nudge strong { display: block; margin-top: 3px; color: #e9e3ed; font-size: 7px; }
.launcher-nudge > i { position: absolute; right: 10px; top: 50%; color: #a37ee8; font-style: normal; transform: translateY(-50%); animation: nudgeArrow 1.2s ease-in-out infinite; }
.launcher-nudge.hidden { opacity: 0; visibility: hidden; transform: translateX(8px); }
.guide-launcher.attention { animation: launcherAttention 1.8s ease-in-out infinite; }
@keyframes launcherAttention { 50% { box-shadow: 0 11px 32px rgba(0,0,0,.45), 0 0 0 7px rgba(116,79,212,.11), 0 0 28px rgba(107,68,210,.34); } }
@keyframes nudgeArrow { 50% { transform: translate(4px,-50%); } }
.toast { position: fixed; z-index: 70; top: 90px; left: 50%; transform: translate(-50%,-12px); background: #15121d; border: 1px solid rgba(94,199,146,.22); border-radius: 9px; padding: 11px 16px; color: #b9d8c7; font-size: 8px; box-shadow: 0 14px 45px rgba(0,0,0,.35); opacity: 0; visibility: hidden; transition: .25s ease; }.toast.show { opacity: 1; visibility: visible; transform: translate(-50%,0); }
.completion-modal { position: fixed; z-index: 80; inset: 0; background: rgba(3,3,8,.84); backdrop-filter: blur(7px); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: .25s ease; padding: 18px; }.completion-modal.open { opacity: 1; visibility: visible; }
.completion-card { width: min(500px, 100%); max-height: calc(100vh - 36px); overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: radial-gradient(circle at 50% 0%, rgba(131,81,218,.15), transparent 35%), #100e18; text-align: center; box-shadow: var(--shadow); transform: scale(.96) translateY(8px); transition: .25s ease; }.completion-modal.open .completion-card { transform: none; }
.completion-scroll { max-height: calc(100vh - 38px); overflow-y: auto; padding: 28px 34px; scrollbar-gutter: stable; }
.completion-burst { width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: rgba(92,198,144,.1); border: 1px solid rgba(92,198,144,.25); box-shadow: 0 0 35px rgba(92,198,144,.12); }.completion-burst span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #092119; font-weight: 800; }
.completion-label { color: #66c99c; font: 500 7px "DM Mono", monospace; letter-spacing: .14em; }.completion-card h2 { font-size: 22px; margin: 10px 0 7px; letter-spacing: -.035em; }.completion-card > p { color: #8b8492; font-size: 10px; line-height: 1.65; margin: 0 0 18px; }
.experience-panel { border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.018); padding: 14px; text-align: left; }.experience-panel strong { font-size: 10px; }.experience-panel p { color: #746e7a; font-size: 9px; line-height: 1.65; margin: 6px 0 0; }
.product-insights { margin-top: 10px; border: 1px solid rgba(111,82,194,.22); border-radius: 10px; background: rgba(105,74,190,.06); padding: 13px 14px; text-align: left; }
.product-insights > strong { display: block; margin-bottom: 8px; color: #d8d1df; font-size: 10px; }
.product-insights div { display: grid; grid-template-columns: 135px 1fr; gap: 12px; padding: 5px 0; border-top: 1px solid rgba(255,255,255,.045); font-size: 8px; line-height: 1.35; }
.product-insights span { color: #716a78; }
.product-insights b { color: #aaa1b3; font-weight: 600; }
.pilot-cta { height: 44px; margin-top: 14px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: linear-gradient(115deg, #6d4edb, #9764e0 55%, #ed995b); color: white; text-decoration: none; font-size: 11px; font-weight: 700; box-shadow: 0 10px 28px rgba(109,76,205,.23); }.pilot-cta span { margin-left: 20px; }
.close-completion { border: 0; background: none; color: #68626e; font-size: 11px; margin-top: 15px; cursor: pointer; }

/* DemoSaaS intentionally uses its own blue-and-white product identity. */
body { background: #eaf0f8; }
.app-shell {
  color: #16243a;
  background:
    radial-gradient(circle at 82% 0%, rgba(71, 139, 225, .11), transparent 28%),
    #f4f7fb;
}
.sidebar {
  color: #fff;
  border-right-color: rgba(12, 42, 84, .2);
  background: linear-gradient(180deg, #123d74 0%, #0c315f 60%, #09284f 100%);
  box-shadow: 8px 0 30px rgba(25, 61, 110, .08);
}
.sidebar-brand { border-bottom-color: rgba(255,255,255,.11); }
.flow-logo {
  background: linear-gradient(145deg, #65b8ff, #2878d1);
  box-shadow: inset 0 1px rgba(255,255,255,.35), 0 8px 20px rgba(4, 30, 70, .22);
}
.brand-copy small { color: rgba(213, 231, 252, .55); }
.nav-item { color: rgba(221, 235, 252, .72); }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-item.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(81, 169, 255, .28), rgba(75, 151, 235, .12));
}
.nav-item.active::before {
  background: #6ec2ff;
  box-shadow: 0 0 12px rgba(94, 188, 255, .75);
}
.nav-icon { color: rgba(205, 228, 252, .62); }
.nav-item.active .nav-icon { color: #8dd0ff; }
.usage {
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.055);
}
.usage > div, .usage small { color: rgba(218, 233, 250, .58); }
.usage strong { color: #fff; }
.usage > i { background: rgba(0, 21, 52, .35); }
.usage > i b { background: linear-gradient(90deg, #53b3ff, #9edcff); }
.profile-avatar { background: linear-gradient(145deg, #7fc8ff, #2979cc); }
.profile-button strong { color: #fff; }
.profile-button small, .profile-button > i { color: rgba(218, 233, 250, .57); }
.main-shell { background: #f4f7fb; }
.topbar {
  color: #1b2b43;
  border-bottom-color: #dce4ee;
  background: rgba(255,255,255,.92);
  box-shadow: 0 2px 12px rgba(32, 65, 107, .035);
}
.breadcrumbs { color: #8796aa; }
.breadcrumbs i { color: #c4cfdd; }
.breadcrumbs strong { color: #32445d; }
.search-button, .icon-button, .help-button {
  color: #6e8098;
  border-color: #d8e1ec;
  background: #f8fafd;
}
.search-button kbd {
  color: #77879c;
  border-color: #d7e0eb;
  background: #fff;
}
.icon-button i { background: #287fd8; box-shadow: 0 0 6px rgba(40,127,216,.45); }
.mobile-nav-toggle { color: #315070; }
.page-content { background: #f4f7fb; }
.page-kicker { color: #287fd8; }
.page-head h1 { color: #132238; }
.page-head p { color: #73849a; }
.primary-action {
  background: linear-gradient(130deg, #176bc4, #2788e5);
  box-shadow: 0 8px 22px rgba(28, 111, 198, .2), inset 0 1px rgba(255,255,255,.25);
}
.secondary-action {
  color: #3c5573;
  border-color: #ced9e7;
  background: #fff;
  box-shadow: 0 2px 6px rgba(25, 61, 104, .04);
}
.stat-card, .card, .table-card, .info-card {
  border-color: #dce4ee;
  background: #fff;
  box-shadow: 0 5px 18px rgba(36, 67, 105, .045);
}
.stat-card::after { background: radial-gradient(circle, rgba(50, 137, 224, .11), transparent 70%); }
.stat-card > span { color: #71839a; }
.stat-card strong { color: #17283f; }
.stat-card small { color: #238760; }
.stat-card small.warn { color: #b26c32; }
.card-header, .table-toolbar { border-bottom-color: #e3e9f1; }
.card-header h2 { color: #263951; }
.card-header span, .card-header button { color: #8190a3; }
.chart-area::before {
  background: repeating-linear-gradient(to bottom, #e9eef5 0 1px, transparent 1px 44px);
  opacity: 1;
}
.bar { background: linear-gradient(180deg, #3997eb, #b9daf6); }
.bar:nth-child(3n) { background: linear-gradient(180deg, #176bc4, #a8cff1); }
.activity-row { border-bottom-color: #e6ecf3; }
.activity-icon { color: #2179cd; background: #e8f3fd; }
.activity-row strong { color: #304258; }
.activity-row span { color: #8c9aad; }
.filter-input, .field input, .field select {
  color: #30445d;
  border-color: #cfdbe8;
  background: #fff;
}
.filter-input::placeholder, .field input::placeholder { color: #9aa8ba; }
.filter-pill {
  color: #61748d;
  border-color: #d6e0eb;
  background: #f8fafd;
}
.data-table th {
  color: #708199;
  border-bottom-color: #dce5ef;
  background: #f5f8fc;
}
.data-table td {
  color: #62748a;
  border-bottom-color: #e5ebf2;
}
.entity-avatar {
  color: #246caa;
  background: linear-gradient(145deg, #e2f2ff, #c5e2f8);
}
.entity strong { color: #2b3f58; }
.entity small { color: #8a99ab; }
.status-pill { color: #247c5a; background: #e8f7f0; }
.status-pill.pending { color: #a76228; background: #fff2e5; }
.row-action { color: #8a98aa; }
.empty-card {
  color: #263950;
  border-color: #cbd8e6;
  background: #f9fbfd;
}
.empty-card span { color: #287fd8; background: #e6f2fd; }
.empty-card p { color: #77889c; }
.form-panel {
  border-color: #cdddec;
  background: linear-gradient(145deg, #f8fbff, #eef6fd);
  box-shadow: 0 8px 24px rgba(35, 93, 148, .06);
}
.form-panel-head h2 { color: #17304d; }
.form-panel-head p { color: #72859a; }
.form-close { color: #77889c; }
.field label { color: #526a85; }
.field input:focus, .field select:focus {
  border-color: #3189db;
  box-shadow: 0 0 0 3px rgba(49,137,219,.12);
}
.info-card > span { color: #287fd8; }
.info-card h2, .plan-price, .setting-row strong { color: #1c3049; }
.info-card p, .plan-price small, .setting-row small { color: #77889c; }
.invoice-row, .setting-row { color: #5c7088; border-bottom-color: #e4eaf2; }
.invoice-row span:nth-child(2) { color: #8a99ab; }
.toggle { background: #d7e0e9; }
.toggle i { background: #fff; box-shadow: 0 1px 3px rgba(31,52,78,.2); }
.toggle.on { background: #2580d4; }

.walkthrough-shade {
  background: rgba(17, 43, 75, .22);
  backdrop-filter: saturate(.88);
}
.walkthrough-focus {
  border-color: #126fd0;
  box-shadow: 0 0 0 5px rgba(18,111,208,.18), 0 0 28px rgba(18,111,208,.65), inset 0 0 18px rgba(18,111,208,.1);
}
@keyframes focusPulse {
  50% {
    box-shadow: 0 0 0 8px rgba(18,111,208,.1), 0 0 38px rgba(18,111,208,.78), inset 0 0 18px rgba(18,111,208,.14);
  }
}

@media (max-width: 850px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow); }
  .sidebar.mobile-open { transform: none; }
  .mobile-nav-toggle { display: block; }
  .page-content { padding: 28px 20px max(70px, env(safe-area-inset-bottom)); }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .content-grid { grid-template-columns: 1fr; }
  .search-button { display: none; }
}
@media (max-width: 560px) {
  .topbar { height: 64px; padding: 0 13px; }
  .breadcrumbs { font-size: 8px; }
  .top-actions { gap: 7px; }
  .icon-button, .help-button { width: 37px; height: 37px; }
  .page-content { padding: 22px 14px max(82px, calc(env(safe-area-inset-bottom) + 68px)); }
  .page-head { align-items: flex-start; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
  .page-head > div { flex: 1 1 210px; }
  .page-head h1 { font-size: 24px; line-height: 1.12; }
  .page-head p { font-size: 12px; line-height: 1.55; }
  .page-head > button { min-height: 42px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }.stat-card { padding: 14px; min-height: 100px; }
  .billing-layout, .settings-layout, .form-grid { grid-template-columns: 1fr; }.field.full, .form-actions { grid-column: 1; }
  .form-panel { padding: 18px 15px; }
  .form-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .form-actions button { min-height: 42px; }
  .table-card { overflow-x: auto; }.data-table { min-width: 620px; }.table-toolbar { min-width: 620px; }
  .guide-launcher { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: 40px; height: 40px; border-radius: 11px; }
  .guide-launcher:hover, .guide-launcher:focus-visible { width: 112px; }
  .launcher-nudge { right: 60px; bottom: max(12px, env(safe-area-inset-bottom)); min-width: 138px; padding-block: 9px; }
  .guide-panel { inset: 0; width: auto; height: 100dvh; border: 0; border-radius: 0; }
  .guide-panel-header { height: 60px; padding-top: env(safe-area-inset-top); }
  .guide-panel-header button { width: 40px; height: 40px; }
  .guide-panel-body { padding: 20px 17px; }
  .guide-intro { padding-bottom: 18px; }
  .suggestions button { min-height: 42px; }
  .guide-input-row { min-height: 54px; margin-bottom: max(10px, env(safe-area-inset-bottom)); }
  .guide-input-row input { font-size: 11px; }
  .response-actions button { min-height: 38px; font-size: 11px; }
  .walkthrough-tooltip { width: min(270px, calc(100vw - 24px)); }
  .walkthrough-tooltip > h3 { font-size: 14px; }
  .walkthrough-tooltip > p { font-size: 10px; }
  .completion-modal { padding: 0; align-items: stretch; }
  .completion-card { width: 100%; max-height: 100dvh; min-height: 100dvh; border: 0; border-radius: 0; }
  .completion-scroll { max-height: 100dvh; min-height: 100dvh; padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); }
  .completion-burst { width: 48px; height: 48px; margin-bottom: 13px; }
  .completion-card h2 { font-size: 21px; }
  .product-insights div { grid-template-columns: 1fr; gap: 3px; padding: 7px 0; font-size: 9px; }
  .pilot-cta { min-height: 46px; }
  .close-completion { min-height: 38px; }
  .toast { top: 74px; width: calc(100% - 28px); text-align: center; }
}
@media (max-width: 390px) {
  .card-header { padding-inline: 14px; }
  .chart-area { padding-inline: 14px; }
  .launcher-nudge { max-width: 135px; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}