:root {
  color-scheme: dark;
  --bg: #07090d;
  --surface: rgba(17, 22, 31, .82);
  --surface-2: #131a24;
  --line: rgba(255,255,255,.09);
  --text: #f5f7fb;
  --muted: #939cab;
  --green: #51e6a4;
  --green-2: #17b978;
  --blue: #78a7ff;
  --red: #ff6470;
  --amber: #f6bd5a;
  --radius: 22px;
  --shadow: 0 26px 70px rgba(0,0,0,.32);
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html { scroll-behavior: smooth }
body {
  margin: 0; min-height: 100vh; color: var(--text);
  background:
    radial-gradient(circle at 75% -10%, rgba(49,215,150,.14), transparent 30%),
    radial-gradient(circle at 5% 20%, rgba(74,118,255,.10), transparent 26%), var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit }
button, a { -webkit-tap-highlight-color: transparent }
a { color: inherit; text-decoration: none }
.shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto }
.nav {
  height: 76px; display:flex; align-items:center; justify-content:space-between;
  position:relative; z-index:10;
}
.brand { display:flex; gap:12px; align-items:center; font-size:19px; font-weight:800; letter-spacing:-.03em }
.brand-mark {
  width:35px; height:35px; display:grid; place-items:center; border-radius:11px;
  background: linear-gradient(145deg, var(--green), #0ea970); color:#042318;
  box-shadow: 0 0 28px rgba(81,230,164,.2); font-weight:1000;
}
.nav-links { display:flex; align-items:center; gap:10px }
.nav-link { color:var(--muted); padding:10px 13px; font-weight:650 }
.button {
  border:1px solid var(--line); color:var(--text); background:rgba(255,255,255,.045);
  min-height:44px; padding:0 18px; border-radius:13px; display:inline-flex;
  align-items:center; justify-content:center; gap:8px; font-weight:760; cursor:pointer;
  transition:.18s ease; white-space:nowrap;
}
.button:hover { transform:translateY(-1px); border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.075) }
.button.primary { color:#041b13; border-color:transparent; background:linear-gradient(135deg,var(--green),#31ce91) }
.button.primary:hover { box-shadow:0 10px 30px rgba(81,230,164,.18) }
.button.danger { background:rgba(255,100,112,.12); border-color:rgba(255,100,112,.25); color:#ff9aa2 }
.button.warning { background:rgba(246,189,90,.12); border-color:rgba(246,189,90,.24); color:#ffd58b }
.button:disabled { opacity:.42; cursor:not-allowed; transform:none; box-shadow:none }
.hero { min-height:690px; display:grid; grid-template-columns:1.05fr .95fr; gap:80px; align-items:center; padding:62px 0 100px }
.eyebrow { display:inline-flex; gap:9px; align-items:center; color:#b8f7da; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase }
.pulse { width:8px; height:8px; background:var(--green); border-radius:50%; box-shadow:0 0 0 7px rgba(81,230,164,.09) }
h1 { font-size:clamp(48px,6vw,76px); line-height:.98; letter-spacing:-.06em; margin:24px 0; max-width:760px }
.gradient-text { background:linear-gradient(110deg,#fff 12%,#a3f1ce 75%); background-clip:text; -webkit-background-clip:text; color:transparent }
.hero-copy { font-size:19px; line-height:1.65; color:#aeb7c6; max-width:650px }
.hero-actions { display:flex; gap:12px; margin-top:34px; flex-wrap:wrap }
.hero-actions .button { min-height:52px; padding:0 24px }
.trust { display:flex; gap:26px; margin-top:38px; color:var(--muted); font-size:13px; flex-wrap:wrap }
.trust span { display:flex; align-items:center; gap:8px }
.tick { color:var(--green) }
.terminal-card {
  border:1px solid var(--line); border-radius:26px; padding:18px; background:linear-gradient(150deg,rgba(25,33,45,.9),rgba(11,15,21,.9));
  box-shadow:var(--shadow); transform:rotate(1deg); position:relative; overflow:hidden;
}
.terminal-card:before { content:""; position:absolute; inset:-80% 30% auto -20%; height:500px; background:radial-gradient(circle,rgba(81,230,164,.12),transparent 65%); pointer-events:none }
.mock-head { display:flex; justify-content:space-between; align-items:center; padding:7px 5px 18px; position:relative }
.mock-route { display:flex; gap:10px; align-items:center; font-weight:800 }
.status { font-size:12px; color:var(--green); background:rgba(81,230,164,.1); border:1px solid rgba(81,230,164,.14); padding:7px 10px; border-radius:20px }
.mock-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; position:relative }
.metric { border:1px solid var(--line); border-radius:15px; padding:15px; background:rgba(4,8,13,.55) }
.metric small { display:block; color:var(--muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px }
.metric b { font-size:19px }
.positive { color:var(--green) }
.route-line { height:70px; margin-top:10px; border:1px solid var(--line); border-radius:16px; padding:15px; background:rgba(4,8,13,.55); display:flex; justify-content:space-between; align-items:center }
.exchange { color:#c9d1dd; font-weight:730 }.exchange small { display:block; color:var(--muted); margin-top:5px; font-weight:500 }
.route-arrow { color:var(--green); font-size:24px }
.section { padding:100px 0 }
.section-head { max-width:680px; margin-bottom:42px }
.section h2 { font-size:clamp(34px,4vw,52px); letter-spacing:-.045em; margin:14px 0 }
.section p { color:var(--muted); line-height:1.65 }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.feature { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; min-height:240px }
.feature-icon { width:46px;height:46px;border-radius:14px;background:rgba(81,230,164,.09);color:var(--green);display:grid;place-items:center;font-size:21px }
.feature h3 { margin:24px 0 10px; font-size:20px; letter-spacing:-.02em }
.feature p { margin:0; font-size:14px }
.cta { margin:70px 0; padding:54px; border:1px solid rgba(81,230,164,.18); border-radius:28px; text-align:center; background:linear-gradient(145deg,rgba(81,230,164,.10),rgba(37,55,82,.08)); box-shadow:var(--shadow) }
.cta h2 { margin:0 0 14px }.cta p { max-width:620px;margin:0 auto 26px }
.footer { border-top:1px solid var(--line); padding:28px 0 48px; color:var(--muted); font-size:13px; display:flex; justify-content:space-between; gap:20px }

/* authentication */
.auth-layout { min-height:100vh; display:grid; grid-template-columns:1fr 1fr }
.auth-aside { padding:50px clamp(32px,7vw,100px); display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid var(--line); background:linear-gradient(145deg,rgba(28,43,57,.5),rgba(7,9,13,.2)) }
.auth-aside h1 { font-size:clamp(42px,5vw,68px); margin:30px 0 20px }
.auth-aside p { color:var(--muted);font-size:17px;line-height:1.65;max-width:530px }
.auth-points { display:grid; gap:14px; margin-top:42px }
.auth-point { display:flex;align-items:center;gap:12px;color:#c6ced9;font-size:14px }
.auth-main { display:grid; place-items:center; padding:34px }
.auth-card { width:min(440px,100%); border:1px solid var(--line); border-radius:24px; background:rgba(16,21,29,.76); padding:34px; box-shadow:var(--shadow) }
.auth-card h2 { font-size:30px;letter-spacing:-.04em;margin:0 0 8px }.auth-card>p { margin:0 0 26px;color:var(--muted) }
.auth-switch { display:grid;grid-template-columns:1fr 1fr;background:#0a0e14;padding:4px;border-radius:13px;margin-bottom:24px }
.auth-switch button { border:0;color:var(--muted);background:transparent;border-radius:10px;padding:10px;cursor:pointer;font-weight:730 }
.auth-switch button.active { color:var(--text);background:#1a222e }
.field { margin-bottom:15px }.field label { display:block;font-size:12px;color:#adb7c6;margin-bottom:7px;font-weight:700 }
.field input,.field select,.input {
  width:100%;min-height:48px;border-radius:12px;border:1px solid #293240;background:#0a0f16;color:var(--text);padding:0 14px;outline:none;
}
.field input:focus,.field select:focus,.input:focus { border-color:rgba(81,230,164,.62);box-shadow:0 0 0 3px rgba(81,230,164,.08) }
.auth-card .button { width:100%;min-height:50px;margin-top:5px }
.form-message { min-height:22px;font-size:13px;margin-top:14px;color:var(--red) }.form-message.ok { color:var(--green) }
.fine { font-size:11px;color:#727c8b;line-height:1.5;margin-top:18px }

/* app */
.app-shell { width:min(1280px,calc(100% - 40px));margin:0 auto;padding-bottom:70px }
.app-nav { height:74px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);margin-bottom:30px }
.profile { display:flex;gap:11px;align-items:center }.avatar { width:36px;height:36px;border-radius:12px;background:linear-gradient(145deg,#2f4656,#1b2835);display:grid;place-items:center;font-weight:800 }
.profile-copy { line-height:1.18 }.profile-copy b { display:block;font-size:13px }.profile-copy span { color:var(--muted);font-size:11px }
.app-title { display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:36px 0 22px }
.app-title h1 { font-size:40px;margin:0 0 8px }.app-title p { color:var(--muted);margin:0 }
.title-actions { display:flex;gap:9px;flex-wrap:wrap }
.summary { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px }
.summary-card { border:1px solid var(--line);background:var(--surface);border-radius:17px;padding:18px }
.summary-card small { display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px }.summary-card b { font-size:23px }
.provision { border:1px solid rgba(246,189,90,.2);background:rgba(246,189,90,.06);border-radius:18px;padding:19px;color:#f7d99d;margin-bottom:20px;display:none }
.app-grid { display:grid;grid-template-columns:380px 1fr;gap:18px;align-items:start }
.panel { border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:22px;box-shadow:0 15px 48px rgba(0,0,0,.12) }
.panel-head { display:flex;justify-content:space-between;align-items:center;margin-bottom:20px }.panel-head h2 { font-size:18px;margin:0;letter-spacing:-.02em }.panel-head span { color:var(--muted);font-size:12px }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px }.field.full { grid-column:1/-1 }.field.check { display:flex;align-items:center;gap:9px }.field.check input { width:17px;height:17px;min-height:0;accent-color:var(--green) }.field.check label { margin:0;line-height:1.3 }
.form-actions { display:flex;gap:9px;margin-top:8px }.form-actions .button { flex:1 }
.integration-row { display:flex;gap:8px;flex-wrap:wrap;margin-top:15px }.integration { padding:7px 10px;border:1px solid var(--line);border-radius:20px;font-size:11px;color:var(--muted) }.integration.on { color:#acf3d3;border-color:rgba(81,230,164,.18);background:rgba(81,230,164,.07) }
.monitor-list { display:grid;gap:12px }.empty { min-height:330px;display:grid;place-items:center;text-align:center;color:var(--muted);border:1px dashed rgba(255,255,255,.12);border-radius:17px;padding:30px }.empty strong { display:block;color:#d8dfe8;font-size:17px;margin-bottom:8px }
.monitor { border:1px solid var(--line);background:#0d1219;border-radius:18px;padding:18px }
.monitor-top { display:flex;justify-content:space-between;gap:15px;align-items:flex-start }.monitor-symbol { display:flex;gap:11px;align-items:center }.monitor-symbol h3 { margin:0;font-size:19px }.route { color:var(--muted);font-size:12px;margin-top:5px }.spread { font-size:22px;font-weight:850;color:var(--green);text-align:right }.spread.negative { color:var(--red) }
.monitor-state { color:var(--muted);font-size:11px;margin-top:4px;text-align:right }.reason { margin:14px 0;padding:11px 13px;background:#080c11;border-left:3px solid var(--green);border-radius:7px;color:#aab4c2;font-size:12px;line-height:1.4 }
.monitor-metrics { display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:13px 0 }.monitor-metric { border:1px solid var(--line);border-radius:11px;padding:10px }.monitor-metric small { display:block;color:var(--muted);font-size:9px;text-transform:uppercase;margin-bottom:5px }.monitor-metric b { font-size:13px }
.monitor-actions { display:flex;gap:8px;flex-wrap:wrap }.monitor-actions .button { min-height:37px;padding:0 13px;font-size:12px }
.edit-form { margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:none }.monitor.editing .edit-form { display:block }
.manual-terminal { margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:none }
.monitor.terminal-open .manual-terminal { display:block }
.terminal-head { display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px }
.terminal-head b,.terminal-head small { display:block }.terminal-head small { color:var(--muted);font-size:10px;line-height:1.45;margin-top:5px }
.operation-badge { color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:6px 9px;font-size:10px }
.operation-badge.active { color:#b5f5d8;border-color:rgba(81,230,164,.22);background:rgba(81,230,164,.08) }
.terminal-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:10px;align-items:end }
.terminal-grid .field,.auto-exit-box .field { margin:0 }.terminal-grid .button,.auto-exit-box .button { min-height:48px }
.auto-exit-box { display:grid;grid-template-columns:1fr 1fr auto auto;gap:10px;align-items:end;margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:13px;background:#080d13 }
.monitor { transition:border-color .18s,opacity .18s,transform .18s }
.monitor.pending { opacity:.64;border-color:rgba(246,189,90,.26);pointer-events:none }
.monitor.pending-create { animation:monitor-in .2s ease-out }
.monitor.pending-create .pulse { background:var(--amber);box-shadow:0 0 0 6px rgba(246,189,90,.08) }
.pending-message { color:#f6cf87 }
.activity-panel { margin-top:18px }
.activity-panel .panel-head { margin-bottom:14px }
.activity-panel .panel-head small { display:block;color:var(--muted);font-size:11px;margin-top:5px }
.activity-clear { min-height:35px;padding:0 12px;font-size:11px }
.activity-head-actions { display:flex;gap:8px }.activity-toggle { min-height:35px;padding:0 12px;font-size:11px }
.activity-panel.collapsed .activity-list { display:none }
.activity-panel.collapsed { padding-bottom:14px }.activity-panel.collapsed .panel-head { margin-bottom:0 }
.activity-list {
  min-height:240px;max-height:460px;overflow:auto;border:1px solid var(--line);
  border-radius:15px;background:#070b10;padding:7px;scrollbar-color:#303947 transparent;
}
.activity-empty { min-height:220px;display:grid;place-items:center;color:#687383;font-size:13px }
.activity-row {
  display:grid;grid-template-columns:72px minmax(0,1fr);gap:11px;padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.055);font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
.activity-row:last-child { border-bottom:0 }
.activity-time { color:#657181;white-space:nowrap }
.activity-message { color:#b9c3d0;overflow-wrap:anywhere }
.activity-symbol { color:#dce3ec;font-weight:800;margin-right:8px }
.activity-row.warning .activity-time,.activity-row.warning .activity-message { color:#f1c978 }
.activity-row.error .activity-time,.activity-row.error .activity-message { color:#ff858e }
@keyframes monitor-in { from { opacity:0;transform:translateY(-8px) } }
.toast { position:fixed;right:24px;bottom:24px;max-width:370px;padding:14px 17px;border-radius:13px;background:#16221e;border:1px solid rgba(81,230,164,.2);box-shadow:var(--shadow);font-size:13px;transform:translateY(120px);opacity:0;transition:.2s;z-index:50 }.toast.show { transform:none;opacity:1 }.toast.error { background:#27171a;border-color:rgba(255,100,112,.25) }
.skeleton { height:170px;border-radius:18px;background:linear-gradient(90deg,#10161e 25%,#17202b 50%,#10161e 75%);background-size:300% 100%;animation:shimmer 1.5s infinite }
.modal { position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px }.modal-backdrop { position:absolute;inset:0;background:rgba(1,4,8,.78);backdrop-filter:blur(10px) }.modal-card { position:relative;width:min(1060px,100%);max-height:min(850px,calc(100vh - 48px));overflow:auto;border:1px solid var(--line);border-radius:25px;background:#0e141d;padding:26px;box-shadow:0 35px 100px rgba(0,0,0,.55) }.modal-head { display:flex;justify-content:space-between;gap:24px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:20px }.modal-head h2 { font-size:30px;margin:8px 0 }.modal-head p { color:var(--muted);margin:0;max-width:680px;line-height:1.5 }.vault-note { margin:18px 0;display:flex;gap:12px;padding:15px;border:1px solid rgba(81,230,164,.15);background:rgba(81,230,164,.05);border-radius:15px }.vault-note b,.vault-note small { display:block }.vault-note small { color:var(--muted);margin-top:5px;line-height:1.4 }.integration-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:12px }.exchange-card { border:1px solid var(--line);background:#090e15;border-radius:17px;padding:17px }.exchange-card.connected { border-color:rgba(81,230,164,.2) }.exchange-head { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px }.exchange-title { display:flex;align-items:center;gap:10px }.exchange-title b { font-size:16px }.exchange-dot { width:9px;height:9px;border-radius:50%;background:#596575 }.connected .exchange-dot { background:var(--green);box-shadow:0 0 0 6px rgba(81,230,164,.08) }.exchange-status { color:var(--muted);font-size:11px }.exchange-balance { margin:-3px 0 14px;color:#b9c2cf;font-size:12px }.exchange-form .field { margin-bottom:10px }.exchange-actions { display:flex;gap:8px }.exchange-actions .button { flex:1;min-height:40px;font-size:12px }.secret-help { color:#747f8f;font-size:10px;line-height:1.4;margin:8px 0 13px }.exchange-error { color:#ff9aa2;font-size:11px;margin-bottom:10px;line-height:1.4 }
.exchange-head-actions { display:flex;align-items:center;gap:8px }.edit-integration { min-height:30px;padding:0 9px;font-size:10px }
.exchange-card.connected .exchange-form { display:none }.exchange-card.connected.editing .exchange-form { display:block }
.connection-values { display:grid;gap:9px;margin:13px 0 }
.connection-value { display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center;border:1px solid var(--line);background:#070b10;border-radius:12px;padding:10px }
.connection-value small { grid-column:1/-1;color:var(--muted);font-size:10px;text-transform:uppercase }
.connection-value code { overflow:auto;white-space:nowrap;color:#d9f8e9;font-size:12px }
.connection-value .button { min-height:31px;padding:0 10px;font-size:10px }
/* instructions */
.docs-shell { width:min(1050px,calc(100% - 40px));margin:0 auto;padding-bottom:80px }
.docs-hero { padding:70px 0 46px;border-bottom:1px solid var(--line) }.docs-hero h1 { font-size:clamp(42px,6vw,72px);margin-bottom:18px }.docs-hero p { color:var(--muted);font-size:18px;line-height:1.65;max-width:760px }
.docs-layout { display:grid;grid-template-columns:230px 1fr;gap:44px;padding-top:45px }.docs-nav { position:sticky;top:24px;align-self:start;display:grid;gap:5px }.docs-nav a { padding:10px 12px;color:var(--muted);border-radius:10px;font-size:13px }.docs-nav a:hover { color:var(--text);background:rgba(255,255,255,.04) }
.docs-content { display:grid;gap:20px }.docs-section { border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:27px;scroll-margin-top:24px }.docs-section h2 { margin:0 0 13px;font-size:25px }.docs-section h3 { margin:22px 0 8px;font-size:16px }.docs-section p,.docs-section li { color:#aeb7c5;line-height:1.65;font-size:14px }.docs-section ol,.docs-section ul { padding-left:22px }.docs-note { border-left:3px solid var(--green);background:#080d13;border-radius:8px;padding:13px 15px;color:#bcc6d3;font-size:13px;line-height:1.55 }.docs-note.warning { border-color:var(--amber) }
@keyframes shimmer { to { background-position:-300% 0 } }

@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:45px;padding-top:45px}.terminal-card{max-width:620px;transform:none}.feature-grid{grid-template-columns:1fr 1fr}.auth-layout{grid-template-columns:1fr}.auth-aside{display:none}.app-grid{grid-template-columns:1fr}.panel.create-panel{position:static}.summary{grid-template-columns:1fr 1fr}.integration-grid{grid-template-columns:1fr}.terminal-grid,.auto-exit-box{grid-template-columns:1fr 1fr}.docs-layout{grid-template-columns:1fr}.docs-nav{position:static;display:flex;overflow:auto}
}
@media(max-width:620px){
  .shell,.app-shell,.docs-shell{width:min(100% - 24px,1180px)}.nav{height:66px}.nav-link{display:none}.hero{min-height:auto;padding:48px 0 70px}.hero-copy{font-size:16px}.hero-actions{display:grid}.hero-actions .button{width:100%}.trust{gap:12px}.mock-grid{grid-template-columns:1fr 1fr}.feature-grid{grid-template-columns:1fr}.section{padding:70px 0}.cta{padding:34px 22px}.footer{display:block}.auth-main{padding:18px}.auth-card{padding:24px}.app-nav{margin-bottom:20px}.app-title{align-items:flex-start;flex-direction:column}.app-title h1{font-size:34px}.summary{grid-template-columns:1fr 1fr}.app-grid{gap:12px}.panel{padding:16px}.form-grid,.terminal-grid,.auto-exit-box{grid-template-columns:1fr}.field.full{grid-column:auto}.monitor-metrics{grid-template-columns:1fr 1fr}.monitor-actions{display:grid;grid-template-columns:1fr 1fr}.monitor-actions .button{width:100%}.profile-copy{display:none}.modal{padding:10px}.modal-card{padding:17px;max-height:calc(100vh - 20px)}.modal-head{display:block}.modal-close{margin-top:16px}.title-actions{width:100%}.title-actions .button{flex:1}.activity-row{grid-template-columns:58px minmax(0,1fr);gap:7px;padding:9px 7px;font-size:11px}.activity-list{max-height:360px}.activity-head-actions{display:grid}.docs-section{padding:19px}
}