/* Eiko's site-owned skin. Palette/type reference: frozen beta app.css.
 * No imports from beta, no engine changes and no CSS-generated financial copy.
 * The core's IDs/classes are the presentation interface, not its calculations.
 */
:root {
    color-scheme: light;
    --bg-primary: #F6F7FB;
    --bg-secondary: #EEF1FB;
    --bg-card: #FFFFFF;
    --bg-card-hover: #F4F5FC;
    --accent: #4B3DDA;
    --accent-light: #8D7BFF;
    --accent-dark: #3A2EC0;
    --accent-soft: #CDB8FF;
    --accent-glow: rgba(75, 61, 218, .18);
    --warning: #946018;
    --danger: #C7413F;
    --success: #168058;
    --text-primary: #1B1F3B;
    --text-secondary: #5B6079;
    --text-muted: #6F758D;
    --border: rgba(27, 31, 59, .12);
    --border-light: rgba(27, 31, 59, .18);
    --gradient-brand: linear-gradient(135deg, #4B3DDA, #8D7BFF);
    --gradient-soft: linear-gradient(135deg, #CDB8FF, #D9E4FF 60%, #F4C6E7);
    --shadow-sm: 0 1px 3px rgba(27, 31, 59, .06);
    --shadow-md: 0 10px 30px rgba(75, 61, 218, .10);
    --shadow-lg: 0 24px 60px rgba(75, 61, 218, .14);
    --shadow-glow: 0 0 20px var(--accent-glow);
    --radius: 16px;
    --radius-lg: 16px;
    --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-display: var(--font-body);
    --on-accent: #FFFFFF;
    --accent-rgb: 75, 61, 218;
    --bg-primary-rgb: 246, 247, 251;
    --text-secondary-rgb: 91, 96, 121;
    --warning-rgb: 232, 161, 59;
    --success-rgb: 22, 128, 88;
    --danger-rgb: 199, 65, 63;
    --card-bg: #0B0910;
    --card-glow: #E8577A26;
    --card-text: #F4F1EA;
    --card-muted: #C4BFCF;
    --card-asset: #C4BFCF;
    --card-rule: #ffffff26;
    --card-rail: #ffffff36;
    --card-panel: #ffffff05;
    --card-label: #F4F1EA;
    --card-accent: #F2A3B8;
    --card-price: #F4F1EA;
    --card-gain: #70D6AD;
    --card-loss: #F2A3B8;
    --returns-gain: var(--success);
    --returns-loss: var(--danger);
    --card-display-font: 'Instrument Serif', Georgia, serif;
    --card-strike-weight: 400;
    --card-strike-size: clamp(48px, 7vw, 88px);
    --card-strike-mobile-size: 56px;
}

/* Shared type tokens now replace the former 21-selector font override. */
.eiko-skin :is(button, input, select, textarea) { font-family: var(--font-body); }

.eiko-skin .brand { min-width: 0; }
.eiko-skin .brand-icon { width: auto; height: 40px; flex-shrink: 0; background: none; padding: 0; }
.eiko-skin .brand-icon .site-logo { width: auto; height: 36px; display: block; }
.eiko-skin .brand-text h1 { font-weight: 800; letter-spacing: -.04em; }
.eiko-skin .tagline { letter-spacing: 0; }
.eiko-skin .totals-banner-item { box-shadow: var(--shadow-sm); }
.eiko-skin .totals-banner-value { font-size: 1.9rem; font-weight: 700; }
.eiko-skin .status-detail { flex-wrap: wrap; column-gap: .5rem; }
.eiko-skin .status-detail > span:first-child { white-space: nowrap; }
.eiko-skin .action-panel { box-shadow: var(--shadow-md); }
.eiko-skin :is(.btn-connect, .btn-primary):hover:not(:disabled) { background: var(--accent-dark); }
.eiko-skin button:focus-visible, .eiko-skin a:focus-visible,
.eiko-skin input:focus-visible, .eiko-skin select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.eiko-skin .asset-tab, .eiko-skin .asset-name, .eiko-skin .asset-symbol,
.eiko-skin [id$="-token"], .eiko-skin [id$="-label"],
.eiko-skin #fee-base-header, .eiko-skin #mode-text { text-transform: none; }
.eiko-skin .strike-pill.active { box-shadow: 0 0 12px var(--accent-glow); }
.eiko-skin .strike-pill.active .strike-badge { background: rgba(27, 31, 59, .2); }
.eiko-skin .market-iv-signal { background: linear-gradient(160deg, rgba(141, 123, 255, .13), #fff); }
.eiko-skin .keeper-new { background: var(--bg-secondary); border-color: var(--border); }

/* Operational messages keep their visibility/state owned by the engine. */
.eiko-skin #markets-paused-notice {
    justify-content: flex-start; text-align: left; padding: .85rem 1.1rem;
    background: rgba(232, 87, 122, .10); border-color: rgba(232, 87, 122, .4);
    border-radius: 14px; color: #8E2745; font-size: .86rem; font-weight: 500;
    box-shadow: none; margin-bottom: 1rem;
}
.eiko-skin .site-footer {
    max-width: 800px; margin: 0 auto; padding: 0 1.5rem 2rem;
    color: var(--text-secondary); font-size: .75rem;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem;
}
.eiko-skin #referral-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.eiko-skin a { color: var(--accent); }

/* Component CSS loads before this skin; helpers no longer inject CSS.
 * Do not use display overrides that expose a closed dialog/hidden action.
 */
.eiko-skin dialog.gyro-position-card,
.eiko-skin dialog.gyro-referrals {
    color: var(--text-primary); background: var(--bg-card); border-color: var(--border-light);
    border-radius: 20px; box-shadow: var(--shadow-lg); font-family: var(--font-body);
    margin: auto; inset: 0;
}
.eiko-skin dialog.gyro-position-card::backdrop,
.eiko-skin dialog.gyro-referrals::backdrop { background: rgba(12, 10, 20, .65); backdrop-filter: blur(6px); }
.eiko-skin dialog.gyro-position-card button,
.eiko-skin dialog.gyro-referrals button { border-radius: 999px; }
.eiko-skin .gyro-aave .aave-metric { background: var(--bg-card-hover); border-radius: 12px; }

/* Beta's editorial ink/blush card language, on the current verified model.
 * No standing-bid claims or old return formulas are copied from beta's renderer.
 * Public immutable PNGs remain server-rendered; this is the in-app preview skin.
 */
.eiko-skin .gyro-position-card .position-art {
    border-radius: 20px;
    box-shadow: 0 16px 40px #0b091026;
}
.eiko-skin .position-art .art-brand { letter-spacing: .2em; font-weight: 700; }
.eiko-skin .position-art .art-strike { letter-spacing: -.03em; }
.eiko-skin .position-art .art-main { padding-top: 36px; }

@media (max-width: 560px) {
    .eiko-skin .header { gap: .65rem; padding: .9rem 1rem; }
    .eiko-skin .brand { gap: .5rem; }
    .eiko-skin .brand-icon .site-logo { height: 28px; }
    .eiko-skin .brand-text h1 { font-size: 1.2rem; }
    .eiko-skin .btn-connect { padding: .65rem .85rem; }
    .eiko-skin .main-content { padding: 1.5rem 1rem; }
    .eiko-skin .asset-tab { padding: .4rem .65rem; font-size: .78rem; }
    .eiko-skin .totals-banner-value { font-size: 1.6rem; }
    .eiko-skin .site-footer { padding-inline: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .eiko-skin *, .eiko-skin *::before, .eiko-skin *::after { transition: none; animation: none; scroll-behavior: auto; }
}