/* Copen V19 · Mineral Jade. Visual skin only; all existing flows remain intact. */
:root {
  --primary: #0B755E;
  --primary-light: #E5F2EA;
  --ink: #16231F;
  --muted: #52635A;
  --line: #E1E7E3;
  --surface: #F2F4F2;
  --green: #197B59;
  --red: #B83F51;
}
body { background: #FFFFFF; color: var(--ink); }
body:has(#phone[data-theme="dark"]) {
  --primary: #78D7BB;
  --primary-light: #173A30;
  --ink: #F5F7F5;
  --muted: #AABCB1;
  --line: #2A3831;
  --surface: #1C2621;
  --green: #61CFA2;
  --red: #F0808D;
  background: #000000;
  color: var(--ink);
}

/* Preserve the appearance setting across both trading modes. */
#phone, #phone.is-copen, #phone.is-copen-pro {
  --cp-bg: #FFFFFF;
  --cp-card: #FFFFFF;
  --cp-soft: #F2F4F2;
  --cp-border: #E1E7E3;
  --cp-text: #16231F;
  --cp-muted: #52635A;
  --cp-accent: #0B755E;
  --cp-tint: #E5F2EA;
  --cp-up: #197B59;
  --cp-down: #B83F51;
  --cp-edge: #CBD7CF;
  --cp-cta: #0B755E;
  --cp-cta-ink: #FFFFFF;
  --cp-warning: #995916;
  --cp-warning-bg: #FFF3E1;
  --primary: #0B755E;
  --primary-light: #E5F2EA;
  --green: #197B59;
  --red: #B83F51;
  --surface: #F2F4F2;
  --line: #E1E7E3;
  --muted: #52635A;
  --ink: #16231F;
  background: var(--cp-bg);
  color: var(--cp-text);
}
#phone[data-theme="dark"], #phone[data-theme="dark"].is-copen, #phone[data-theme="dark"].is-copen-pro {
  --cp-bg: #000000;
  --cp-card: #111916;
  --cp-soft: #1C2621;
  --cp-border: #2A3831;
  --cp-text: #F5F7F5;
  --cp-muted: #AABCB1;
  --cp-accent: #78D7BB;
  --cp-tint: #173A30;
  --cp-up: #61CFA2;
  --cp-down: #F0808D;
  --cp-edge: #43584C;
  --cp-cta: #0B755E;
  --cp-cta-ink: #FFFFFF;
  --cp-warning: #F0B778;
  --cp-warning-bg: #322618;
  --primary: #78D7BB;
  --primary-light: #173A30;
  --green: #61CFA2;
  --red: #F0808D;
  --surface: #1C2621;
  --line: #2A3831;
  --muted: #AABCB1;
  --ink: #F5F7F5;
  color-scheme: dark;
  background: var(--cp-bg);
  color: var(--cp-text);
}

/* Video cues: quiet canvas, rounded utility surfaces, a single dominant action. */
#phone .screen, #phone .statusbar, #phone .cw-page, #phone .sheet,
#phone .cp-chart-module, #phone .cp-modal, #phone .cp-inline-modal {
  color: var(--cp-text);
}
#phone .screen, #phone .statusbar, #phone .cw-page, #phone .sheet { background: var(--cp-bg); }
#phone .nav {
  background: var(--cp-card);
  border: 1px solid var(--cp-border);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 26px #10241B0A;
}
#phone[data-theme="dark"] .nav { box-shadow: 0 -8px 28px #00000052; }
#phone .nav button { border-radius: 15px; transition: background-color .2s ease, color .2s ease, transform .16s ease; }
#phone .nav button.active, #phone .tabs button.active, #phone .chip.active,
#phone .cp-mode button.active, #phone .cp-chart-periods .active,
#phone .v14-dapp-tabs button.active {
  background: var(--cp-tint);
  color: var(--cp-accent);
  border-color: var(--cp-border);
}
#phone .tabs { background: var(--cp-soft); border-radius: 18px; }
#phone .tabs button { border-radius: 14px; }
#phone .chip, #phone .v5-chip, #phone .v15-net-chip { border-radius: 999px; }
#phone .card, #phone .cp-module, #phone .v10-invite, #phone .v10-benefits,
#phone .v10-friends, #phone .v10-rules, #phone .v5-quote-card {
  background: var(--cp-card);
  border: 1px solid var(--cp-border);
  border-radius: 22px;
  color: var(--cp-text);
  box-shadow: 0 5px 22px #18352709;
}
#phone .card.purple, #phone .quick:not(.ai) .tile,
#phone .v6-search-launch, #phone .v6-hub-list button {
  background: var(--cp-soft);
  border-color: var(--cp-border);
  color: var(--cp-text);
}
#phone .quick .tile { border-radius: 19px; }
#phone .topbar h1, #phone .cp-topbar h1 { color: var(--cp-text); letter-spacing: -.035em; }
#phone .detail-price, #phone .balance, #phone .v5-token-main input,
#phone .v5-token-main output, #phone .cp-quote strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
}
#phone .search, #phone .text-field, #phone .field-wrap,
#phone .v15-search, #phone .v14-dapp-form, #phone .v14-browser-bar {
  background: var(--cp-soft);
  color: var(--cp-text);
  border-color: var(--cp-border);
  border-radius: 15px;
}
#phone :is(.primary, .secondary, .cw-primary, .cw-secondary, .cp-primary) {
  border-radius: 18px;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .16s ease;
}
#phone .primary, #phone .cp-primary,
#phone .cp-modal .cp-button:not(.cp-secondary):not(.cp-danger),
#phone .cw-primary, #phone .stk-primary {
  background: #0B755E !important;
  border-color: #0B755E !important;
  color: #FFFFFF !important;
}
#phone[data-theme="dark"] .primary,
#phone[data-theme="dark"] .cp-primary,
#phone[data-theme="dark"] .cw-primary,
#phone[data-theme="dark"] .cp-modal .cp-button:not(.cp-secondary):not(.cp-danger),
#phone[data-theme="dark"] .stk-primary {
  background: #0B755E !important;
  border-color: #0B755E !important;
  color: #FFFFFF !important;
}
#phone :is(.primary, .cp-primary, .cw-primary, .stk-primary):active:not(:disabled) {
  background: #075A48 !important;
  border-color: #075A48 !important;
}
#phone .secondary, #phone .cw-secondary,
#phone .cp-modal .cp-button.cp-secondary, #phone .stk-secondary {
  background: var(--cp-soft);
  color: var(--cp-text) !important;
  border-color: var(--cp-border);
}
#phone :is(.primary, .cp-primary, .cw-primary, .stk-primary):disabled {
  background: var(--cp-soft) !important;
  border-color: var(--cp-border) !important;
  color: var(--cp-muted) !important;
}
#phone .text-btn, #phone .cp-link, #phone .v5-link,
#phone .v11-funding-intent button, #phone .v14-bookmark[aria-pressed="true"] {
  color: var(--cp-accent);
}

/* Trade direction has its own meaning and remains distinct from the brand. */
#phone .primary.green, #phone .cp-long, #phone .stk-trade-buttons .buy {
  background: #197B59 !important; border-color: #197B59 !important; color: #FFFFFF !important;
}
#phone .cp-short, #phone .cp-modal .cp-button.cp-danger,
#phone .stk-trade-buttons .sell {
  background: #B83F51 !important; border-color: #B83F51 !important; color: #FFFFFF !important;
}
#phone .cp-up, #phone .up { color: var(--cp-up); }
#phone .cp-down, #phone .down { color: var(--cp-down); }
#phone[data-theme="dark"] .primary.green,
#phone[data-theme="dark"] .cp-long, #phone[data-theme="dark"] .stk-trade-buttons .buy {
  background: #61CFA2 !important; border-color: #61CFA2 !important; color: #0B1B13 !important;
}
#phone[data-theme="dark"] .cp-short,
#phone[data-theme="dark"] .cp-modal .cp-button.cp-danger,
#phone[data-theme="dark"] .stk-trade-buttons .sell {
  background: #F0808D !important; border-color: #F0808D !important; color: #210C11 !important;
}

/* Gold is reserved for AI features on any screen. */
#phone .quick.ai .tile, #phone[data-current-page="ai"] .model.active,
#phone[data-current-page="ai"] .strategy.active, #phone .stk-ai,
#phone .v10-benefits>div span {
  background: #F7F0E2;
  border-color: #E8D3AB;
  color: #81571B;
}
#phone .cp-ai-entry, #phone .quick.ai { color: #81571B; }
#phone .nav button[data-page="ai"].active { background: #F7F0E2; color: #81571B; }
#phone[data-current-page="ai"] :is(.primary, .cp-primary) {
  background: #95651F !important; border-color: #95651F !important; color: #FFFFFF !important;
}
#phone[data-current-page="ai"] :is(.primary, .cp-primary):active:not(:disabled) {
  background: #765019 !important; border-color: #765019 !important;
}
#phone[data-theme="dark"] .quick.ai .tile,
#phone[data-theme="dark"][data-current-page="ai"] .model.active,
#phone[data-theme="dark"][data-current-page="ai"] .strategy.active,
#phone[data-theme="dark"] .stk-ai, #phone[data-theme="dark"] .v10-benefits>div span {
  background: #342917; border-color: #6C5328; color: #E8C987;
}
#phone[data-theme="dark"] .nav button[data-page="ai"].active {
  background: #342917; color: #E8C987;
}
#phone[data-theme="dark"][data-current-page="ai"] :is(.primary, .cp-primary) {
  background: #D6A85F !important; border-color: #D6A85F !important; color: #211606 !important;
}

/* Rounded panels echo the wallet flow in the reference clip. */
#phone .sheet-wrap { background: #111C18A8; backdrop-filter: blur(2px); }
#phone .sheet { border-radius: 28px 28px 0 0; box-shadow: 0 -16px 42px #101A1530; animation: copen-panel-rise .28s cubic-bezier(.2,.8,.2,1) both; }
#phone .sheet .handle, #phone #stock-order-inline .v8-grip span {
  background: var(--cp-edge);
}
#phone .sheet-head .icon-btn, #phone .cp-close,
#phone .cw-back, #phone .cw-close { border-radius: 50%; background: var(--cp-soft); }
#phone .v5-token-card {
  border-radius: 23px; background: var(--cp-soft); border-color: var(--cp-border);
}
#phone .v5-quote-card { border-radius: 20px; }
#phone .v5-token-button, #phone .v5-flip { background: var(--cp-card); color: var(--cp-accent); border-color: var(--cp-edge); }
#phone .v5-choice { border-radius: 17px; }
#phone .v5-choice.selected { background: var(--cp-tint); border-color: var(--cp-accent); }
#phone .v5-amount-presets button { border-radius: 999px; }
#phone .v5-reward, #phone .v5-level-card { border-radius: 20px; }

/* Wallet entry and list: calm neutral cards, prominent selected state. */
#phone .cw-welcome h1, #phone .v16-hero h1, #phone .v16-hero h2 { letter-spacing: -.035em; }
#phone .cw-choice, #phone .cw-method, #phone .cw-wallet-card,
#phone .v15-receive-card, #phone .v15-receive-choice {
  background: var(--cp-soft);
  border: 1px solid var(--cp-border);
  border-radius: 20px;
}
#phone .cw-wallet-card.is-active { background: var(--cp-tint); border-color: var(--cp-accent); box-shadow: 0 5px 20px #0B755E13; }
#phone .cw-choice-icon, #phone .v15-coin, #phone .v16-art-core {
  background: var(--cp-tint); color: var(--cp-accent);
}
#phone .v15-opening-emblem, #phone .v14-mode-symbol {
  background: var(--cp-tint); border-color: var(--cp-border);
  box-shadow: 0 18px 36px #0D46321B;
}
#phone .v16-spark.two { background: #D6A85F; }
#phone .v16-confetti i:nth-child(3n) { background: #D6A85F; }

/* Trade + stocks retain their exact structure, drag handles and hit targets. */
#phone .cp-chart-module, #phone .stk-stage {
  background: var(--cp-card);
  border-color: var(--cp-border);
  border-radius: 20px;
}
#phone .cp-trade-dock, #phone .cp-inline-modal,
#phone #stock-order-inline, #phone .stk-order {
  background: var(--cp-card); border-color: var(--cp-border);
}
#phone .cp-mode, #phone .stk-sides { background: var(--cp-soft); border-color: var(--cp-border); border-radius: 16px; }
#phone .v8-view-toggle button.active, #phone .stk-market-toolbar button.active,
#phone .stk-periods button.active, #phone .stk-indicators button.active {
  background: var(--cp-tint); color: var(--cp-accent);
}
#phone .cp-chart path[stroke="#1F8A70"], #phone .trend path[stroke="#1F8A70"] { stroke: var(--cp-accent); }
#phone .trend stop[stop-color="#1F8A70"] { stop-color: var(--cp-accent); }
#phone .cp-funding-chart .cp-price-line, #phone .cp-chart .cp-ma,
#phone .cp-chart .cp-ema, #phone .cp-chart .cp-boll { stroke: #87729A; }

/* Referral keeps the swipable Core art and gives the value one focal surface. */
#phone .v10-earnings { background: #14362D; box-shadow: 0 11px 28px #0B352022; border-radius: 24px; }
#phone[data-theme="dark"] .v10-earnings { background: #11281F; }
#phone .v10-earnings-action { background: #E5F2EA; color: #124933; border-radius: 16px; }
#phone .v10-tier { background: var(--cp-card); border-radius: 23px; }
#phone .v10-tier-art { background: #10241C; }
#phone .v10-tier-title span:last-child { color: #81571B; }

/* One restrained motion language, with the reference's finite wallet moments intact. */
#phone :is(.cw-choice, .cw-method, .v5-choice, .v5-token-button,
           .v15-net-chip, .cp-mode button, .cp-chart-periods button) {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
#phone :is(.cw-choice, .cw-method, .v5-choice, .v5-token-button):active { box-shadow: inset 0 0 0 1px var(--cp-accent); }
#phone .v10-tier-gallery img { animation-duration: .48s; }
#phone .v16-brand-transition { animation-duration: .65s; }
@keyframes copen-panel-rise {
  from { opacity: .65; transform: translate3d(0, 35px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
#phone :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--cp-accent); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  #phone .sheet, #phone .v10-tier-gallery img, #phone .v16-brand-transition {
    animation: none !important; transition: none !important;
  }
  #phone :is(.nav button, .cw-choice, .cw-method, .v5-choice, .v5-token-button,
             .v15-net-chip, .cp-mode button, .cp-chart-periods button, .primary,
             .secondary, .cw-primary, .cw-secondary, .cp-primary) { transition: none !important; }
}