:root {
  --bg: #f4f8fc;
  --surface: rgba(255, 255, 255, 0.96);
  --surface-2: #edf4f9;
  --surface-3: #f8fbfd;
  --line: #dbe6ee;
  --text: #10283a;
  --muted: #657b8c;
  --blue: #176fd1;
  --blue-soft: #e9f3ff;
  --cyan: #08a9c4;
  --mint: #078664;
  --red: #c53f54;
  --red-soft: #fff0f2;
  --yellow: #a96c06;
  --yellow-soft: #fff7e5;
  --purple: #8154d8;
  --pink: #ef5cab;
  --lime: #9edc35;
  --shadow: 0 18px 55px rgba(28, 66, 95, 0.12);
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background-color: #eaf7ff;
  background-image:
    linear-gradient(180deg, rgba(248, 253, 255, .82), rgba(233, 246, 255, .9)),
    url("./diamond-whale-meme-bg-v2.png");
  background-position: center, center;
  background-size: cover, cover;
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, no-repeat;
}
button, input, select { font: inherit; }
button { color: inherit; }
.ambient { position: fixed; z-index: -1; border-radius: 999px; filter: blur(90px); pointer-events: none; opacity: .24; }
.ambient-one { width: 230px; height: 230px; background: #8ccfff; top: 18%; left: -140px; }
.ambient-two { width: 260px; height: 260px; background: #8ae8dd; bottom: -150px; right: -140px; }
.shell { width: min(760px, 100%); margin: 0 auto; padding: 18px 16px calc(42px + env(safe-area-inset-bottom)); position: relative; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.brand { display: flex; align-items: center; min-width: 0; gap: 11px; }
.brand-mark { width: 50px; height: 50px; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(109, 171, 218, .35); border-radius: 16px; background: #e8f8ff; box-shadow: 0 9px 24px rgba(21, 73, 111, .2); }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; padding: 2px; }
.brand h1 { margin: 0 0 2px; font-size: 18px; letter-spacing: -.02em; }
.brand p { margin: 0; color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.mode-pill, .count-pill { border: 1px solid #cae1f1; border-radius: 999px; padding: 7px 10px; color: var(--blue); background: rgba(255, 255, 255, .82); box-shadow: 0 5px 18px rgba(45, 92, 126, .07); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.mode-pill span { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #e5a11b; box-shadow: 0 0 10px rgba(229, 161, 27, .45); }

.notice { margin-bottom: 14px; border: 1px solid #cfe1ef; border-radius: 14px; padding: 11px 13px; color: #4e6b7e; background: rgba(237, 246, 252, .82); font-size: 12px; line-height: 1.55; }
.notice strong { color: var(--blue); }
.hero-card, .panel { border: 2px solid rgba(255, 255, 255, .94); background: rgba(255,255,255,.94); box-shadow: 0 18px 0 rgba(104,174,219,.11), 0 24px 58px rgba(28,66,95,.16); }
.hero-card { position: relative; overflow: hidden; border-radius: 25px; padding: 22px; }
.hero-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.92) 58%, rgba(232,245,255,.5) 100%); }
.hero-content { position: relative; z-index: 2; max-width: calc(100% - 112px); }
.hero-brand-art { position: absolute; z-index: 1; top: 20px; right: 18px; width: 96px; height: 96px; border: 1px solid #c8deec; border-radius: 24px; padding: 3px; object-fit: contain; background: #e8f8ff; box-shadow: 0 13px 30px rgba(22, 65, 98, .18); }
.eyebrow { margin: 0 0 8px; color: var(--blue); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 850; }
.balance-row { display: flex; align-items: baseline; gap: 8px; }
.balance-row h2 { margin: 0; font-size: clamp(34px, 10vw, 48px); letter-spacing: -.06em; }
.balance-row span { color: var(--muted); font-size: 13px; font-weight: 700; }
.performance { margin: 7px 0 20px; color: var(--muted); font-size: 13px; }
.positive, .performance.positive { color: var(--mint) !important; }
.negative, .performance.negative { color: var(--red) !important; }
.icon-button { position: absolute; z-index: 3; top: 22px; right: 126px; width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 50%; color: var(--blue); background: rgba(255,255,255,.9); cursor: pointer; }
.metric-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.metric-grid div { border-top: 1px solid var(--line); padding-top: 12px; }
.metric-grid span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; }
.metric-grid strong { font-size: 15px; }

.tabs { position: sticky; z-index: 10; top: 8px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin: 16px 0; border: 2px solid rgba(255,255,255,.94); border-radius: 19px; padding: 5px; background: rgba(255, 255, 255, .9); box-shadow: 0 8px 0 rgba(78,153,207,.12), 0 14px 30px rgba(29, 65, 91, .1); backdrop-filter: blur(15px); }
.tab { border: 0; border-radius: 12px; padding: 10px 5px; color: var(--muted); background: transparent; cursor: pointer; font-size: 13px; }
.tab-mascot { width: 18px; height: 18px; margin: -4px 2px -5px 0; border-radius: 6px; padding: 1px; object-fit: contain; background: #e8f8ff; }
.tab.active { color: #fff; background: linear-gradient(135deg, var(--purple), var(--blue), var(--cyan)); box-shadow: 0 5px 0 #124f9a, 0 10px 18px rgba(23, 111, 209, .24); font-weight: 850; transform: translateY(-2px); }
.engine-tab.active { background: linear-gradient(135deg, #ff8a28, var(--pink), var(--purple)); box-shadow: 0 5px 0 #a04481, 0 10px 20px rgba(239,92,171,.25); }
.panel { display: none; min-height: 250px; border-radius: 25px; padding: 21px; }
.panel.active { display: block; animation: rise .25s ease; }
@keyframes rise { from { transform: translateY(4px); opacity: .6; } }
.section-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 15px; }
.section-head h2, .panel > h2, .panel-title-group h2 { margin: 0; font-size: 20px; line-height: 1.2; letter-spacing: -.03em; }
.panel-title-group { display: flex; align-items: center; min-width: 0; gap: 12px; }
.panel-brand-art { width: 54px; height: 54px; flex: 0 0 auto; border: 1px solid #c9ddea; border-radius: 16px; padding: 2px; object-fit: contain; background: #e8f8ff; box-shadow: 0 8px 20px rgba(28, 72, 102, .13); }
.settings-title { margin-bottom: 8px; }
.count-pill { flex: 0 0 auto; padding: 6px 9px; font-size: 12px; }

.whale-list { display: grid; gap: 10px; }
.whale-card { border: 1px solid var(--line); border-radius: 18px; padding: 16px; background: linear-gradient(145deg, #fff, #f7fbfd); box-shadow: 0 8px 25px rgba(33, 72, 100, .06); cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.whale-card:hover { transform: translateY(-2px); border-color: #aad2ec; box-shadow: 0 13px 30px rgba(33, 72, 100, .1); }
.whale-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.whale-card h3 { margin: 0 0 5px; font-size: 17px; }
.inline-mascot { width: 27px; height: 27px; margin: -6px 6px -7px 0; border-radius: 8px; padding: 1px; object-fit: contain; background: #e8f8ff; }
.chain-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.chain-tag, .risk-tag { border: 1px solid var(--line); border-radius: 999px; padding: 4px 7px; color: var(--muted); background: #f7fafc; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.risk-tag.medium { color: var(--yellow); background: var(--yellow-soft); }
.risk-tag.high { color: var(--red); background: var(--red-soft); }
.risk-tag.low { color: var(--mint); background: #eaf8f3; }
.profit { margin: 17px 0 12px; color: var(--mint); font-size: 24px; font-weight: 850; letter-spacing: -.04em; }
.profit small { color: var(--muted); font-size: 12px; font-weight: 600; }
.card-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; color: var(--muted); font-size: 10px; }
.card-metrics strong { display: block; margin-top: 3px; color: var(--text); font-size: 13px; }
.skeleton { height: 150px; border-radius: 18px; background: linear-gradient(90deg, #eef4f8, #dfeaf1, #eef4f8); background-size: 200% 100%; animation: pulse 1.3s infinite; }
@keyframes pulse { to { background-position: -200% 0; } }

.model-page-head { margin-bottom: 5px; }
.model-page-intro { margin: 0 0 17px; }
.model-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.model-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 19px; padding: 15px; background: linear-gradient(145deg, #fff, #f5faff); box-shadow: 0 9px 25px rgba(32, 73, 102, .065); }
.model-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--blue), var(--cyan)); }
.model-card-numerologist { background: linear-gradient(145deg, #fff, #fffbf2); }
.model-card-numerologist::before { background: linear-gradient(180deg, #9f6bd9, #d89b25); }
.model-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.model-number, .model-mode { border: 1px solid #cbdfea; border-radius: 999px; padding: 5px 8px; color: var(--blue); background: #f7fbff; font-size: 9px; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; }
.model-mode { border-color: #b9dfd2; color: var(--mint); background: #ecf8f4; }
.model-mode-experimental { border-color: #e5d0f2; color: #7948aa; background: #faf5ff; }
.model-card h3 { margin: 14px 0 6px; font-size: 19px; letter-spacing: -.025em; }
.model-card > p { min-height: 42px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.model-inputs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.model-inputs span { border: 1px solid #cfe0ec; border-radius: 999px; padding: 5px 7px; color: #496879; background: #fff; font-size: 8px; font-weight: 750; }
.model-caveat { min-height: 56px; margin-top: 10px; border: 1px solid #ecdba9; border-radius: 11px; padding: 8px; color: #765d29; background: var(--yellow-soft); font-size: 8px; line-height: 1.45; }
.model-card-metrics { display: grid; grid-template-columns: .55fr 1fr 1.15fr; gap: 5px; margin: 13px 0 0; }
.model-card-metrics div { min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: rgba(255,255,255,.85); }
.model-card-metrics dt { color: var(--muted); font-size: 7px; letter-spacing: .04em; text-transform: uppercase; }
.model-card-metrics dd { margin: 4px 0 0; overflow: hidden; color: var(--text); font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.model-profile-link { display: block; margin-top: 10px; border-radius: 11px; padding: 10px; color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); text-align: center; text-decoration: none; font-size: 10px; font-weight: 850; }
.model-profile-link:focus-visible, .live-table-scroll:focus-visible { outline: 3px solid rgba(23,111,209,.28); outline-offset: 2px; }
.numerologist-link { background: linear-gradient(135deg, #7d4eac, #b57b28); }

.live-model-trades { margin-top: 14px; border: 1px solid #cddfeb; border-radius: 19px; padding: 15px; background: #f9fcfe; }
.live-trades-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.live-trades-head h3 { margin: 0; font-size: 17px; }
.live-trades-health { display: grid; grid-template-columns: auto auto; justify-content: end; align-items: center; gap: 2px 6px; color: var(--muted); text-align: right; font-size: 9px; font-weight: 800; }
.live-trades-health small { grid-column: 1 / -1; font-size: 8px; font-weight: 500; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #91a2ae; }
.live-dot.is-online { background: var(--mint); box-shadow: 0 0 0 4px rgba(7,134,100,.1), 0 0 12px rgba(7,134,100,.3); }
.live-dot.is-loading { background: var(--blue); animation: live-pulse 1.2s infinite; }
.live-dot.is-error { background: var(--red); }
.live-dot.is-paused { background: var(--yellow); }
@keyframes live-pulse { 50% { opacity: .35; transform: scale(.75); } }
.live-trades-explainer { margin: 9px 0 11px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.live-table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; background: #fff; -webkit-overflow-scrolling: touch; }
.live-trades-table { width: 100%; min-width: 810px; border-collapse: collapse; table-layout: fixed; }
.live-trades-table th { position: sticky; top: 0; z-index: 1; padding: 10px 9px; color: #4d6879; background: #eef5f9; text-align: left; font-size: 8px; letter-spacing: .045em; text-transform: uppercase; }
.live-trades-table th:nth-child(1) { width: 105px; }
.live-trades-table th:nth-child(2) { width: 135px; }
.live-trades-table th:nth-child(3) { width: 150px; }
.live-trades-table th:nth-child(4) { width: 115px; }
.live-trades-table th:nth-child(5) { width: 125px; }
.live-trades-table th:nth-child(6) { width: 115px; }
.live-trades-table th:nth-child(7) { width: 100px; }
.live-trades-table td { border-top: 1px solid var(--line); padding: 10px 9px; vertical-align: top; color: var(--text); font-size: 9px; line-height: 1.35; }
.live-trades-table td strong, .live-trades-table td small { display: block; overflow-wrap: anywhere; }
.live-trades-table td small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.live-trades-table tbody tr:hover { background: #f8fbfd; }
.model-table-badge { color: var(--blue); }
.model-numerologist .model-table-badge { color: #7948aa; }
.live-result-positive { background: #f3fbf8; }
.live-result-negative { background: #fff7f8; }
.live-table-empty { padding: 26px !important; color: var(--muted) !important; text-align: center; }

.model-profile-detail { scroll-margin-top: 76px; margin-top: 17px; border: 1px solid var(--line); border-radius: 21px; padding: 17px; background: linear-gradient(145deg, #fff, #f7fbfe); }
.model-profile-primary { border-top: 4px solid var(--blue); }
.model-profile-numerologist { border-top: 4px solid #8a55b9; background: linear-gradient(145deg, #fff, #fffbf3); }
.model-profile-detail .ai-orb { width: 68px; height: 68px; margin-bottom: 14px; border-radius: 20px; }
.numerologist-symbol { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 14px; border: 1px solid #dcc9e9; border-radius: 20px; color: #fff; background: linear-gradient(145deg, #7c4bab, #c08c37); box-shadow: 0 13px 30px rgba(112,72,145,.18); font-size: 31px; font-weight: 850; }
.numerologist-status { border-color: #dcc9e9; color: #7948aa; background: #faf5ff; }
.numerologist-warning { margin: 15px 0; border: 1px solid #e8d6a7; border-radius: 14px; padding: 12px; color: #765d29; background: var(--yellow-soft); font-size: 10px; line-height: 1.55; }
.model-notes { margin-top: 17px; border-top: 1px solid var(--line); padding-top: 17px; }
.model-notes-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.model-notes-head h3 { margin: 0; font-size: 17px; }
.numerologist-notes .insight-post::before { background: linear-gradient(180deg, #8a55b9, #c08c37); }
.numerologist-notes .insight-post.is-latest { border-color: #d5bce5; box-shadow: 0 12px 30px rgba(121,72,170,.1); }

.engine-jump { display: grid; grid-template-columns: 42px 1fr; align-items: center; width: 100%; margin: 15px 0; border: 2px solid #f7c95a; border-radius: 16px; padding: 12px; color: #553b69; background: linear-gradient(135deg, #fff7b8, #ffe6f4 52%, #e7ddff); box-shadow: 0 6px 0 #e5b644, 0 13px 25px rgba(139,90,155,.14); cursor: pointer; text-align: left; }
.engine-jump > span { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #ff8a28, var(--pink)); font-size: 20px; animation: meme-bob 2s ease-in-out infinite; }
.engine-jump b { font-size: 12px; }
.engine-jump small { color: #796782; font-size: 8px; }

.engine-panel { overflow: hidden; background: rgba(255,255,255,.95); }
.engine-hero { position: relative; display: grid; grid-template-columns: 84px 1fr 180px; align-items: center; gap: 15px; overflow: hidden; border: 2px solid #ffc85c; border-radius: 22px; padding: 18px; background: linear-gradient(135deg, #fff8b8 0%, #ffe0f2 47%, #ded9ff 100%); box-shadow: 0 8px 0 rgba(230,175,65,.5), 0 18px 35px rgba(116,78,149,.16); }
.engine-hero::after { content: "WOW!"; position: absolute; top: 8px; right: 10px; transform: rotate(8deg); border: 2px solid #fff; border-radius: 999px; padding: 4px 7px; color: #fff; background: var(--pink); box-shadow: 0 3px 0 #b33f83; font-size: 8px; font-weight: 900; letter-spacing: .06em; }
.engine-mascot { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border: 3px solid #fff; border-radius: 24px; background: #e8f8ff; box-shadow: 0 7px 0 #4b72b8; animation: meme-float 3.2s ease-in-out infinite; }
.engine-mascot span { position: absolute; top: -9px; right: -8px; font-size: 29px; filter: drop-shadow(0 3px 0 rgba(126,79,33,.2)); animation: spark-pop 1.3s ease-in-out infinite; }
.engine-mascot img { width: 100%; height: 100%; display: block; border-radius: 20px; padding: 2px; object-fit: contain; }
.engine-hero-copy h2 { margin: 0; font-size: 25px; line-height: 1.05; letter-spacing: -.045em; }
.engine-hero-copy > p:last-child { margin: 8px 0 0; color: #665a78; font-size: 10px; line-height: 1.5; }
.engine-speed-sticker { position: relative; transform: rotate(1deg); border: 3px solid #fff; border-radius: 18px; padding: 13px; color: #fff; background: linear-gradient(145deg, #ff7629, #ef4fa6 56%, #8653dc); box-shadow: 0 7px 0 #a13d86, 0 13px 25px rgba(126,58,116,.2); text-align: center; }
.engine-speed-sticker span, .engine-speed-sticker small { display: block; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.engine-speed-sticker strong { display: block; margin: 5px 0; overflow-wrap: anywhere; font-size: 22px; line-height: 1; text-shadow: 0 2px 0 rgba(72,37,105,.25); }
.engine-speed-sticker em { display: block; margin-top: 7px; border-top: 1px solid rgba(255,255,255,.38); padding-top: 6px; font-size: 7px; font-style: normal; font-weight: 800; }
.engine-truth { margin: 15px 2px; border: 2px dashed #8dd5e4; border-radius: 14px; padding: 11px 13px; color: #446273; background: rgba(236,251,255,.92); font-size: 10px; line-height: 1.55; }

.experience-flow { border: 2px solid #ddd1ff; border-radius: 20px; padding: 15px; background: linear-gradient(145deg, #fff, #f8f4ff); box-shadow: 0 6px 0 rgba(132,90,202,.12); }
.experience-flow-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.experience-flow-head h3 { margin: 0; font-size: 17px; }
.experience-flow-head > span { border: 1px solid #b9dfd2; border-radius: 999px; padding: 6px 9px; color: var(--mint); background: #ebf8f3; font-size: 8px; font-weight: 850; }
.experience-flow-head > span.is-paused { border-color: #efd99e; color: var(--yellow); background: var(--yellow-soft); }
.flow-track { display: grid; grid-template-columns: 1fr 42px 1fr 42px 1fr 42px 1fr; align-items: stretch; gap: 5px; margin: 14px 0; }
.flow-track article { display: grid; place-items: center; min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 11px 7px; background: #fff; text-align: center; }
.flow-track article i { font-style: normal; font-size: 24px; }
.flow-mascot { display: block; width: 34px; height: 34px; border-radius: 10px; padding: 1px; object-fit: contain; background: #e8f8ff; }
.flow-track article b { margin-top: 4px; font-size: 10px; }
.flow-track article small { margin-top: 3px; color: var(--muted); font-size: 7px; line-height: 1.3; }
.flow-track .flow-engine { border-color: #f7c95a; background: #fff8cc; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.flow-track .flow-model { border-color: #a9d6f0; background: #eaf7ff; }
.flow-arrow { display: grid; place-items: center; overflow: hidden; color: var(--purple); }
.flow-arrow span { width: 100%; overflow: hidden; color: var(--pink); letter-spacing: 5px; white-space: nowrap; animation: conveyor-dots 1s linear infinite; }
.flow-arrow b { font-size: 20px; animation: arrow-push 1.3s ease-in-out infinite; }
.experience-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.experience-kpis div { min-width: 0; border: 1px solid #dbd1ef; border-radius: 11px; padding: 9px; background: #fff; }
.experience-kpis span { display: block; color: var(--muted); font-size: 7px; text-transform: uppercase; }
.experience-kpis strong { display: block; margin-top: 5px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.engine-panel .accelerator-warning { border-width: 2px; box-shadow: 0 5px 0 rgba(218,171,51,.12); }
.engine-panel .accelerator-dashboard { border-width: 2px; background: linear-gradient(145deg, #f5fbff, #fff9ef); box-shadow: 0 7px 0 rgba(64,144,193,.08); }
.engine-insights { border: 2px solid #cce6f4; border-radius: 18px; padding: 14px; background: #f8fcff; }
.engine-insight-source { margin: 8px 0 12px; border-radius: 10px; padding: 8px; color: #47677a; background: #eaf6fd; font-size: 8px; line-height: 1.45; }
.engine-insight-source.is-fallback { color: #765d29; background: var(--yellow-soft); }

.custom-model-lab { margin-top: 18px; border: 3px solid #eab0d3; border-radius: 22px; padding: 16px; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,239,249,.96)); box-shadow: 0 8px 0 rgba(207,97,163,.18), 0 20px 38px rgba(116,68,123,.13); }
.custom-model-head { display: flex; align-items: center; gap: 12px; }
.custom-model-sticker { display: grid; place-items: center; width: 58px; height: 58px; flex: 0 0 auto; transform: rotate(-5deg); border: 3px solid #fff; border-radius: 18px; background: linear-gradient(145deg, #9bdd39, #25c8c8); box-shadow: 0 6px 0 #52a968; font-size: 29px; animation: meme-bob 2.5s ease-in-out infinite; }
.custom-model-head h3 { margin: 0; font-size: 19px; }
.custom-model-head p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.custom-model-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 15px; }
.custom-field { display: grid; min-width: 0; gap: 5px; color: #5c7180; font-size: 9px; font-weight: 700; }
.custom-field-wide { grid-column: 1 / -1; }
.custom-field input, .custom-field select { width: 100%; min-width: 0; height: 43px; border: 2px solid #d9e4ec; border-radius: 12px; padding: 0 11px; color: var(--text); background: #fff; outline: none; }
.custom-field input:focus, .custom-field select:focus { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(239,92,171,.11); }
.custom-auto-summary { border: 2px dashed #cab7ec; border-radius: 12px; padding: 10px; color: #6a5781; background: #f8f3ff; font-size: 9px; line-height: 1.45; }
.custom-create-button { box-shadow: 0 6px 0 #144f99, 0 13px 24px rgba(43,94,166,.2); }
.custom-model-api-status { margin: 14px 0 9px; border-radius: 10px; padding: 8px 10px; color: var(--muted); background: #f5f8fa; font-size: 8px; }
.custom-model-api-status.is-connected { color: var(--mint); background: #ecf8f4; }
.custom-model-api-status.is-fallback { color: var(--yellow); background: var(--yellow-soft); }
.custom-model-list { display: grid; gap: 9px; }
.custom-model-skeleton { height: 120px; }
.custom-model-card { border: 2px solid #e0d7eb; border-radius: 16px; padding: 13px; background: #fff; box-shadow: 0 5px 0 rgba(120,86,157,.09); }
.custom-model-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.custom-model-card-head span { color: var(--purple); font-size: 7px; font-weight: 800; text-transform: uppercase; }
.custom-model-card-head h4 { margin: 3px 0 0; font-size: 15px; }
.custom-model-status { flex: 0 0 auto; border-radius: 999px; padding: 5px 8px; font-size: 7px; text-transform: uppercase; }
.custom-model-status.is-active { color: var(--mint); background: #eaf8f3; }
.custom-model-status.is-paused { color: var(--yellow); background: var(--yellow-soft); }
.custom-model-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 11px 0; }
.custom-model-metrics div { min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: #f8fbfd; }
.custom-model-metrics span { display: block; color: var(--muted); font-size: 7px; text-transform: uppercase; }
.custom-model-metrics strong { display: block; margin-top: 4px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.custom-model-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.custom-model-chips span { border: 1px solid #ddd2e9; border-radius: 999px; padding: 5px 7px; color: #675977; background: #faf7fd; font-size: 8px; }
.custom-model-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.custom-model-actions .text-button { margin-top: 0; }

@keyframes meme-float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes meme-bob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
@keyframes spark-pop { 0%,100% { transform: scale(.9) rotate(-8deg); } 50% { transform: scale(1.14) rotate(7deg); } }
@keyframes conveyor-dots { from { transform: translateX(-8px); } to { transform: translateX(8px); } }
@keyframes arrow-push { 0%,100% { transform: translateX(-2px); } 50% { transform: translateX(4px); } }

.body-copy { color: var(--muted); line-height: 1.65; font-size: 13px; }
.ai-orb { width: 88px; height: 88px; overflow: hidden; margin-bottom: 20px; border: 1px solid #bdd8e9; border-radius: 25px; background: #e8f8ff; box-shadow: 0 14px 35px rgba(24, 70, 104, .18); }
.ai-orb img { width: 100%; height: 100%; display: block; object-fit: contain; padding: 3px; }
.ai-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ai-heading-row h2 { margin: 0; font-size: 20px; line-height: 1.2; letter-spacing: -.03em; }
.ai-status-pill { flex: 0 0 auto; max-width: 150px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 9px; color: var(--muted); background: #f6f9fb; text-align: center; font-size: 9px; font-weight: 800; letter-spacing: .03em; }
.ai-status-pill.is-running { border-color: #b8dfd2; color: var(--mint); background: #ecf8f4; }
.ai-status-pill.is-stopped { border-color: #eccbd0; color: var(--red); background: var(--red-soft); }
.guardrails { display: grid; gap: 8px; margin: 17px 0; color: #4d6d7f; font-size: 12px; }
.data-source-overview { margin: 15px 0; border: 1px solid #cfe1ec; border-radius: 16px; padding: 13px; background: #f8fbfd; }
.data-source-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.data-source-head h3 { margin: 0; font-size: 15px; }
.data-source-count { flex: 0 0 auto; border: 1px solid #c7dfea; border-radius: 999px; padding: 6px 8px; color: var(--blue); background: #fff; font-size: 8px; font-weight: 800; }
.data-source-overview > p { margin: 8px 0 11px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.data-source-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.data-source-chip { min-width: 0; border: 1px solid var(--line); border-radius: 11px; padding: 8px; background: #fff; }
.data-source-chip > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; }
.data-source-chip strong { min-width: 0; font-size: 9px; line-height: 1.3; }
.data-source-chip span { flex: 0 0 auto; color: var(--muted); font-size: 7px; font-weight: 800; text-transform: uppercase; }
.data-source-chip small { display: block; margin-top: 4px; color: var(--muted); font-size: 7px; line-height: 1.4; }
.data-source-chip.is-active { border-color: #b9dfd2; background: #f4fbf8; }
.data-source-chip.is-active span { color: var(--mint); }
.data-source-chip.is-standby { border-color: #d5dfeb; background: #f8faff; }
.data-source-chip.is-standby span { color: var(--blue); }
.data-source-chip.is-disabled, .data-source-chip.is-not-configured, .data-source-chip.is-unknown { opacity: .72; }
.data-source-chip.is-loading { grid-column: 1 / -1; color: var(--muted); text-align: center; font-size: 9px; }
.primary { border: 0; border-radius: 13px; padding: 13px 16px; color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); box-shadow: 0 11px 27px rgba(23, 111, 209, .18); cursor: pointer; font-weight: 850; }
.primary:disabled { opacity: .5; cursor: progress; }
.secondary, .text-button { border: 1px solid var(--line); border-radius: 13px; padding: 12px 15px; cursor: pointer; font-weight: 750; }
.secondary { color: var(--blue); background: #f6faff; }
.secondary.is-stop, .danger-action { border-color: #ebc8ce; color: var(--red); background: var(--red-soft); }
.secondary:disabled, .text-button:disabled { opacity: .48; cursor: not-allowed; }
.text-button { margin-top: 13px; color: var(--muted); background: #fff; font-size: 11px; }
.wide { width: 100%; }
.accelerator-warning { margin: 17px 0 13px; border: 1px solid #efdcae; border-radius: 14px; padding: 12px 13px; color: #765d29; background: var(--yellow-soft); font-size: 11px; line-height: 1.55; }
.accelerator-warning strong { display: block; margin-bottom: 3px; color: var(--yellow); }
.accelerator-controls { display: grid; grid-template-columns: minmax(150px, .7fr) 1.3fr; gap: 8px; margin-bottom: 12px; }
.accelerator-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; }
.accelerator-controls select { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 0 11px; color: var(--text); background: #fff; outline: none; }
.accelerator-controls .secondary, .auto-schedule { grid-column: 1 / -1; }
.auto-schedule { margin: 0 2px 2px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.accelerator-dashboard { border: 1px solid var(--line); border-radius: 18px; padding: 15px; background: var(--surface-3); }
.accelerator-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.accelerator-head h3 { margin: 0; font-size: 15px; }
.accelerator-head > span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.accelerator-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 13px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--line); }
.accelerator-grid div { min-width: 0; padding: 11px 9px; background: #fff; }
.accelerator-grid span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .04em; }
.accelerator-grid strong { display: block; overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; }
.best-strategy { display: flex; align-items: center; justify-content: space-between; gap: 13px; border: 1px solid #cfe2ef; border-radius: 12px; padding: 11px; background: var(--blue-soft); }
.best-strategy span { max-width: 54%; color: var(--muted); font-size: 9px; line-height: 1.4; }
.best-strategy strong { color: var(--blue); text-align: right; font-size: 11px; }
.signal-attribution { margin-top: 14px; }
.signal-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 9px; color: var(--muted); font-size: 9px; }
.signal-head small { color: #4d6b7c; text-align: right; }
.signal-bars { display: grid; gap: 8px; }
.signal-bars > div { display: grid; grid-template-columns: 84px 1fr 38px; gap: 7px; align-items: center; color: var(--muted); font-size: 9px; }
.signal-bars > div > span { display: flex; align-items: center; gap: 4px; }
.signal-mascot { width: 17px; height: 17px; border-radius: 5px; padding: 1px; object-fit: contain; background: #e8f8ff; }
.signal-bars > div > strong { color: #416174; text-align: right; font-size: 9px; }
.signal-bar { height: 6px; overflow: hidden; border-radius: 999px; background: #e3ebf1; }
.signal-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan)); transition: width .35s ease; }
.accelerator-meta { margin: 13px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }

.risk-profile { margin-top: 14px; border: 1px solid #cddfeb; border-radius: 18px; padding: 15px; background: linear-gradient(145deg, #f7fbff, #fff); }
.risk-profile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.risk-profile-head h3 { margin: 0; font-size: 16px; }
.risk-profile-level { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 6px 9px; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.risk-profile-level.risk-low { border-color: #b9dfd2; color: var(--mint); background: #ebf8f3; }
.risk-profile-level.risk-medium { border-color: #efd99e; color: var(--yellow); background: var(--yellow-soft); }
.risk-profile-level.risk-high { border-color: #ecc4cb; color: var(--red); background: var(--red-soft); }
.risk-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 13px 0; }
.risk-kpi-grid article { min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: #fff; }
.risk-kpi-grid span { display: block; min-height: 23px; color: var(--muted); font-size: 8px; line-height: 1.35; text-transform: uppercase; letter-spacing: .035em; }
.risk-kpi-grid strong { display: block; margin-top: 6px; overflow-wrap: anywhere; font-size: 12px; }
.risk-dimensions { display: grid; gap: 9px; }
.risk-dimensions > div > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.risk-chip-list { display: flex; flex-wrap: wrap; gap: 5px; }
.risk-chip-list b, .risk-chip-list i { border: 1px solid #cfe0ec; border-radius: 999px; padding: 5px 8px; color: #456578; background: #fff; font-size: 8px; font-style: normal; font-weight: 700; }
.risk-chip-list i { color: var(--muted); font-weight: 500; }
.risk-profile-note { margin: 11px 0 0; border-left: 3px solid var(--blue); padding: 7px 9px; color: var(--muted); background: var(--blue-soft); font-size: 9px; line-height: 1.5; }

.ai-performance { margin-top: 14px; border: 1px solid var(--line); border-radius: 18px; padding: 15px; background: linear-gradient(145deg, #fff, #f4f9fc); }
.performance-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.performance-section-head h3 { margin: 0; font-size: 16px; }
.data-source-pill { flex: 0 0 auto; border: 1px solid #cddfe9; border-radius: 999px; padding: 5px 8px; color: var(--muted); background: #fff; font-size: 8px; font-weight: 750; }
.ai-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 13px 0; }
.ai-kpi-grid article { min-width: 0; border: 1px solid var(--line); border-radius: 13px; padding: 11px; background: #fff; }
.ai-kpi-grid span { display: block; min-height: 25px; color: var(--muted); font-size: 8px; line-height: 1.35; text-transform: uppercase; letter-spacing: .04em; }
.ai-kpi-grid strong { display: block; margin: 6px 0 4px; overflow-wrap: anywhere; color: var(--text); font-size: 14px; }
.ai-kpi-grid small { display: block; color: #8193a0; font-size: 8px; line-height: 1.35; }
.extreme-trades { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.extreme-column { min-width: 0; border: 1px solid var(--line); border-radius: 15px; padding: 11px; background: #f8fbfd; }
.profit-column { border-top: 3px solid var(--mint); }
.loss-column { border-top: 3px solid var(--red); }
.extreme-column-title { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.extreme-column-title span { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .04em; }
.extreme-column-title h4 { margin: 2px 0 0; font-size: 13px; }
.extreme-column-title > strong { color: var(--muted); font-size: 8px; font-weight: 700; white-space: nowrap; }
.extreme-list { display: grid; gap: 8px; }
.extreme-trade { min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: #fff; }
.profit-trade { border-left: 3px solid var(--mint); }
.loss-trade { border-left: 3px solid var(--red); }
.extreme-empty { margin: 0; border: 1px dashed var(--line); border-radius: 11px; padding: 18px 10px; color: var(--muted); background: #fff; font-size: 9px; line-height: 1.45; text-align: center; }
.extreme-title { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.extreme-title span { color: var(--muted); font-size: 9px; line-height: 1.35; }
.extreme-title strong { text-align: right; white-space: nowrap; font-size: 11px; }
.profit-trade .extreme-title strong { color: var(--mint); }
.loss-trade .extreme-title strong { color: var(--red); }
.trade-amount-line { margin: 13px 0 10px; }
.trade-amount-line strong { display: block; font-size: 18px; letter-spacing: -.02em; }
.trade-amount-line span { color: var(--muted); font-size: 8px; }
.trade-cost-line { margin: -4px 0 9px; color: #637d8e; font-size: 8px; line-height: 1.45; }
.trade-facts { display: flex; flex-wrap: wrap; gap: 5px; }
.trade-facts span { max-width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; padding: 4px 7px; color: #4d6b7c; background: #f6f9fb; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.extended-note { margin: 11px 1px 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
.result-card, .danger-note { margin-top: 14px; border-radius: 14px; padding: 13px; font-size: 12px; line-height: 1.6; }
.result-card { border: 1px solid #bfded4; background: #edf8f4; }
.danger-note { border: 1px solid #edcbd1; color: #88525b; background: var(--red-soft); }

.mini-refresh { width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; color: var(--blue); background: #fff; cursor: pointer; font-size: 17px; }
.insight-guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 14px 0 18px; }
.insight-guide span { display: flex; align-items: center; gap: 7px; min-width: 0; border: 1px solid #cfdfeb; border-radius: 11px; padding: 8px; color: #496778; background: #f8fbfd; font-size: 10px; line-height: 1.35; }
.insight-guide b { display: grid; place-items: center; width: 21px; height: 21px; flex: 0 0 auto; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); font-size: 9px; }
.insight-list-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-top: 4px; }
.insight-list-head h3 { margin: 0; font-size: 15px; }
.insight-feed { display: grid; gap: 10px; margin-top: 12px; }
.insight-skeleton { height: 205px; }
.insight-post { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; padding: 0; background: linear-gradient(145deg, #fff, #f6fafe); box-shadow: 0 8px 24px rgba(33, 72, 100, .055); }
.insight-post.is-latest { border-color: #a9cee9; box-shadow: 0 12px 30px rgba(23, 111, 209, .11); }
.insight-post::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: linear-gradient(180deg, var(--blue), var(--cyan)); }
.insight-cost_blocked::before, .insight-no_edge::before { background: var(--yellow); }
.insight-worsened::before, .insight-losing_decision::before { background: var(--red); }
.insight-improved::before, .insight-profitable_decision::before { background: var(--mint); }
.insight-post details > summary { position: relative; padding: 14px 15px 13px 17px; cursor: pointer; list-style: none; }
.insight-post details > summary::-webkit-details-marker { display: none; }
.insight-post details > summary::after { content: "+"; position: absolute; right: 15px; bottom: 13px; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 50%; color: var(--blue); background: #fff; font-size: 14px; font-weight: 700; }
.insight-post details[open] > summary::after { content: "−"; }
.insight-post-body { margin: 0 15px 15px 17px; border-top: 1px solid var(--line); padding-top: 4px; }
.insight-post-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.insight-post-head time { color: var(--blue); font-size: 10px; font-weight: 800; }
.insight-post-head span { border: 1px solid var(--line); border-radius: 999px; padding: 5px 8px; color: var(--muted); background: #fff; font-size: 9px; }
.insight-post h3 { margin: 9px 28px 6px 0; font-size: 16px; line-height: 1.3; }
.insight-preview { display: -webkit-box; overflow: hidden; margin: 0 30px 6px 0; color: var(--muted); font-size: 12px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.insight-post details[open] .insight-preview { display: none; }
.insight-source { display: block; margin-right: 28px; color: #78909f; font-size: 9px; line-height: 1.4; }
.insight-text-block { margin-top: 11px; }
.insight-text-block strong { display: block; color: #446477; font-size: 10px; text-transform: uppercase; letter-spacing: .045em; }
.insight-text-block p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.58; }
.insight-metrics { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.insight-metrics span { border: 1px solid #cfe0ec; border-radius: 999px; padding: 6px 8px; color: #496879; background: #fff; font-size: 10px; line-height: 1.3; }
.feature-empty { border: 1px dashed #c9dce8; border-radius: 15px; padding: 24px 16px; color: var(--muted); background: #f9fcfe; text-align: center; }
.feature-empty strong { display: block; color: var(--text); font-size: 13px; }
.feature-empty p { margin: 5px auto 0; max-width: 470px; font-size: 10px; line-height: 1.55; }

.accounts-title { margin-bottom: 8px; }
.account-form { display: grid; grid-template-columns: 1.2fr .8fr .55fr; gap: 9px; margin: 18px 0 22px; border: 1px solid #cfe1ec; border-radius: 16px; padding: 13px; background: #f7fbfe; }
.account-form label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; }
.account-form input, .account-form select { width: 100%; min-width: 0; height: 43px; border: 1px solid var(--line); border-radius: 11px; padding: 0 11px; color: var(--text); background: #fff; outline: none; }
.account-form input:focus, .account-form select:focus { border-color: #82bcea; box-shadow: 0 0 0 3px rgba(23, 111, 209, .09); }
.account-form .primary { grid-column: 1 / -1; }
.account-list-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.account-list-head h3 { margin: 0; font-size: 16px; }
.account-list { display: grid; gap: 10px; }
.account-card { border: 1px solid var(--line); border-radius: 17px; padding: 14px; background: linear-gradient(145deg, #fff, #f7fbfd); box-shadow: 0 8px 24px rgba(33, 72, 100, .055); }
.account-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.account-card-head h3 { margin: 0; font-size: 15px; }
.account-card-head p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.account-status { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 5px 8px; font-size: 8px; font-weight: 800; }
.account-status.is-active { border-color: #b9dfd2; color: var(--mint); background: #ebf8f3; }
.account-status.is-paused { border-color: #efd99e; color: var(--yellow); background: var(--yellow-soft); }
.account-balance { margin: 13px 0 9px; border: 1px solid #cee1ed; border-radius: 12px; padding: 11px; background: var(--blue-soft); }
.account-balance span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .045em; }
.account-balance strong { font-size: 18px; }
.account-pnl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.account-pnl-grid div { min-width: 0; border: 1px solid var(--line); border-radius: 11px; padding: 9px; background: #fff; }
.account-pnl-grid span { display: block; min-height: 21px; color: var(--muted); font-size: 8px; line-height: 1.3; text-transform: uppercase; }
.account-pnl-grid strong { display: block; margin-top: 5px; overflow-wrap: anywhere; font-size: 11px; }
.account-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; }
.account-card-footer > span { max-width: 55%; color: var(--muted); font-size: 8px; line-height: 1.45; }
.account-card-footer .secondary { flex: 0 0 auto; padding: 9px 11px; font-size: 9px; }
.account-card-actions { display: flex; flex: 0 0 auto; gap: 7px; }
.account-card-actions .text-button { margin-top: 0; padding: 9px 11px; font-size: 9px; }
.account-trade-history { display: grid; gap: 7px; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.account-ledger-trade { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: #fff; }
.account-ledger-trade > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; }
.account-ledger-trade > div:first-child b { flex: 0 0 auto; }
.account-ledger-trade p { margin: 5px 0 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
.account-ledger-trade .trade-facts { margin-top: 7px; }
.account-history-empty { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; text-align: center; }

.trade-list { display: grid; gap: 8px; }
.trade-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; border-bottom: 1px solid var(--line); padding: 11px 0; }
.trade-row:last-child { border-bottom: 0; }
.trade-row h3 { margin: 0; font-size: 14px; }
.trade-row p { margin: 0; color: var(--muted); font-size: 10px; }
.trade-pnl { grid-row: span 2; align-self: center; color: var(--mint); font-weight: 800; }
.trade-pnl.loss { color: var(--red); }
.detailed-trade-row { align-items: start; }
.trade-row-main { min-width: 0; }
.portfolio-trade-facts { margin-top: 8px; }
.trade-result-stack { min-width: 126px; text-align: right; }
.trade-result-stack .trade-pnl { display: block; font-size: 13px; }
.trade-result-stack small { display: block; margin-top: 2px; color: var(--muted); font-size: 7px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.trade-result-stack span { display: block; max-width: 155px; margin-top: 6px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.empty { padding: 34px 0; color: var(--muted); text-align: center; }

.settings-form { display: grid; gap: 12px; margin-top: 20px; }
.settings-form label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.settings-form input, .settings-form select { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 13px; color: var(--text); background: #fff; outline: none; }
.settings-form input:focus, .settings-form select:focus, .accelerator-controls select:focus { border-color: #82bcea; box-shadow: 0 0 0 3px rgba(23, 111, 209, .09); }
.reset-confirm { margin-top: 12px; border: 1px solid #e9bec6; border-radius: 14px; padding: 13px; color: #744650; background: var(--red-soft); }
.reset-confirm > strong { color: var(--red); font-size: 13px; }
.reset-confirm p { margin: 5px 0 11px; font-size: 10px; line-height: 1.5; }
.reset-confirm > div { display: grid; gap: 7px; }
.reset-confirm .text-button { margin-top: 0; }
.danger-button { border: 0; border-radius: 12px; padding: 11px 13px; color: #fff; background: var(--red); cursor: pointer; font-size: 11px; font-weight: 800; }
.danger-button:disabled { opacity: .5; cursor: progress; }

.drawer-backdrop { position: fixed; z-index: 30; inset: 0; background: rgba(13, 35, 51, .45); backdrop-filter: blur(4px); }
.drawer { position: fixed; z-index: 31; left: 50%; bottom: 0; width: min(760px, 100%); max-height: 90vh; overflow: auto; transform: translate(-50%, 105%); transition: transform .28s ease; border: 1px solid var(--line); border-radius: 28px 28px 0 0; padding: 25px 20px calc(30px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -30px 90px rgba(22, 52, 73, .24); }
.drawer.open { transform: translate(-50%, 0); }
.drawer-close { position: sticky; z-index: 2; top: 0; float: right; width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: #f4f8fb; cursor: pointer; font-size: 21px; }
.drawer h2 { margin: 8px 0; font-size: 27px; letter-spacing: -.04em; }
.drawer-brand-head { display: flex; align-items: center; gap: 12px; padding-right: 42px; }
.drawer-brand-head img { width: 62px; height: 62px; flex: 0 0 auto; border: 1px solid #c9ddea; border-radius: 18px; padding: 2px; object-fit: contain; background: #e8f8ff; box-shadow: 0 8px 22px rgba(28, 72, 102, .13); }
.drawer-brand-head h2 { margin: 3px 0 0; }
.drawer-summary { color: var(--muted); line-height: 1.55; font-size: 12px; }
.dossier-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 18px 0; }
.dossier-grid div { border: 1px solid var(--line); border-radius: 13px; padding: 12px; background: #f8fbfd; }
.dossier-grid span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.dossier-grid strong { font-size: 15px; }
.bar-block { margin: 19px 0; }
.bar-block h3 { font-size: 14px; }
.bar-row { display: grid; grid-template-columns: 95px 1fr 40px; gap: 8px; align-items: center; margin: 7px 0; color: var(--muted); font-size: 10px; }
.bar { height: 7px; overflow: hidden; border-radius: 999px; background: #e3ebf1; }
.bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.hypothesis { border-left: 3px solid #d89b25; padding: 10px 12px; color: #755f37; background: var(--yellow-soft); font-size: 12px; line-height: 1.55; }
.wallet { border-bottom: 1px solid var(--line); padding: 10px 0; }
.wallet code { display: block; overflow: hidden; color: var(--blue); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.wallet small { color: var(--muted); font-size: 10px; }
.limitations { padding-left: 17px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.toast { position: fixed; z-index: 50; bottom: 22px; left: 50%; transform: translateX(-50%); width: min(440px, calc(100% - 32px)); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 12px 14px; color: #fff; background: #17364c; box-shadow: 0 18px 55px rgba(14, 42, 61, .28); text-align: center; font-size: 12px; }
.hidden { display: none !important; }

@media (max-width: 560px) {
  body { background-attachment: scroll, scroll; background-position: center top, 68% top; }
  .shell { padding-inline: 12px; }
  .topbar { margin-bottom: 10px; }
  .mode-pill { display: none; }
  .notice { margin-bottom: 10px; padding: 9px 11px; font-size: 11px; }
  .hero-card { padding: 15px; border-radius: 20px; }
  .hero-brand-art { top: 14px; right: 14px; width: 64px; height: 64px; border-radius: 18px; }
  .hero-content { max-width: calc(100% - 72px); }
  .balance-row h2 { font-size: 30px; }
  .performance { margin: 5px 0 13px; font-size: 11px; line-height: 1.45; }
  .icon-button { top: 83px; right: 15px; width: 32px; height: 32px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .metric-grid div { padding-top: 9px; }
  .tabs { top: 4px; grid-template-columns: repeat(3, 1fr); margin: 11px 0; }
  .tab { min-height: 44px; padding: 8px 5px; font-size: 11px; }
  .tab span { display: inline; }
  .panel { padding: 15px; border-radius: 20px; }
  .panel-brand-art { width: 46px; height: 46px; border-radius: 14px; }
  .model-card-grid { grid-template-columns: 1fr; }
  .model-card > p, .model-caveat { min-height: 0; }
  .live-trades-head { align-items: flex-start; flex-direction: column; }
  .live-trades-health { grid-template-columns: auto auto; justify-content: start; text-align: left; }
  .model-profile-detail { margin-inline: -3px; padding: 14px; border-radius: 18px; }
  .model-card-metrics { grid-template-columns: .55fr 1fr 1fr; }
  .data-source-list { grid-template-columns: 1fr; }
  .engine-hero { grid-template-columns: 64px 1fr; gap: 11px; padding: 14px; }
  .engine-mascot { width: 60px; height: 60px; border-radius: 19px; }
  .engine-hero-copy h2 { font-size: 21px; }
  .engine-speed-sticker { grid-column: 1 / -1; transform: none; }
  .flow-track { grid-template-columns: 1fr 26px 1fr; }
  .flow-track .flow-arrow:nth-of-type(2), .flow-track .flow-arrow:nth-of-type(3) { display: none; }
  .flow-track article:nth-of-type(3), .flow-track article:nth-of-type(4) { margin-top: 7px; }
  .flow-track article:nth-of-type(3) { grid-column: 1; }
  .flow-track article:nth-of-type(4) { grid-column: 3; }
  .experience-kpis { grid-template-columns: 1fr; }
  .custom-model-form { grid-template-columns: 1fr; }
  .custom-field-wide { grid-column: auto; }
  .custom-model-head { align-items: flex-start; }
  .custom-model-lab { padding: 13px; }
  .insight-guide { grid-template-columns: 1fr; gap: 5px; }
  .insight-guide span { padding: 7px 8px; }
  .ai-heading-row { align-items: center; }
  .ai-status-pill { max-width: 118px; }
  .accelerator-controls { grid-template-columns: 1fr; }
  .accelerator-controls .secondary, .auto-schedule { grid-column: auto; }
  .accelerator-grid { grid-template-columns: repeat(2, 1fr); }
  .risk-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-kpi-grid { grid-template-columns: 1fr 1fr; }
  .ai-kpi-grid article:last-child { grid-column: 1 / -1; }
  .extreme-trades { grid-template-columns: 1fr; }
  .account-form { grid-template-columns: 1fr; }
  .account-form .primary { grid-column: auto; }
  .account-card-footer { align-items: stretch; flex-direction: column; }
  .account-card-footer > span { max-width: none; }
  .account-card-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .account-card-footer .secondary, .account-card-actions .text-button { width: 100%; }
  .detailed-trade-row { grid-template-columns: 1fr; }
  .trade-result-stack { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 8px; text-align: left; }
  .trade-result-stack span { grid-column: 1 / -1; max-width: none; }
  .dossier-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 370px) {
  .brand-mark { width: 44px; height: 44px; }
  .brand h1 { font-size: 16px; }
  .hero-brand-art { width: 60px; height: 60px; opacity: .9; }
  .hero-content { max-width: calc(100% - 66px); }
  .balance-row h2 { font-size: 28px; }
  .tab { font-size: 10px; }
  .panel-title-group { align-items: flex-start; }
  .panel-brand-art { width: 46px; height: 46px; border-radius: 14px; }
  .section-head h2, .panel-title-group h2 { font-size: 18px; }
  .risk-kpi-grid { grid-template-columns: 1fr; }
  .ai-kpi-grid { grid-template-columns: 1fr; }
  .ai-kpi-grid article:last-child { grid-column: auto; }
  .account-pnl-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .engine-mascot, .engine-mascot span, .engine-jump > span, .custom-model-sticker, .flow-arrow span, .flow-arrow b { transform: none !important; }
}