/* Artwork is site-owned; these defaults preserve Gyro's presentation. */
:root {
    --card-bg: #0d1b2a;
    --card-glow: #00d9c016;
    --card-text: var(--text-primary);
    --card-muted: #9faec0;
    --card-asset: #a9b8cb;
    --card-rule: #ffffff14;
    --card-rail: #ffffff28;
    --card-panel: #ffffff03;
    --card-label: #c8d3df;
    --card-accent: var(--accent);
    --card-price: var(--card-accent);
    --card-gain: #5fd6a4;
    --card-loss: #ff8b7d;
    --returns-gain: #5fd6a4;
    --returns-loss: #ff8b7d;
    --card-display-font: var(--font-display);
    --card-strike-weight: 600;
    --card-strike-size: clamp(32px, 5vw, 64px);
    --card-strike-mobile-size: 44px;
}
/* Default presentation only. A fork can replace this stylesheet and renderer. */
dialog.gyro-position-card { width: min(1040px, calc(100vw - 32px)); }
.gyro-position-card .card-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gyro-position-card .card-toolbar h2 { margin: 0; }
.gyro-position-card .card-toolbar button { margin: 0; }
.gyro-position-card .position-art { margin: 18px 0; overflow: hidden; border: 1px solid var(--border-light); border-radius: 16px; color: var(--card-text); background: radial-gradient(ellipse at top left, var(--card-glow), transparent 60%), var(--card-bg); }
.position-art .art-header { padding: 22px 28px; display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--card-rule); font: 500 12px var(--font-mono); letter-spacing: .08em; }
.position-art .art-brand { color: var(--card-accent); text-transform: uppercase; }
.position-art .art-market { color: var(--card-muted); text-align: right; }
.position-art .art-content { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.position-art .art-main { padding: 30px 28px 38px; }
.position-art .art-asset { color: var(--card-asset); font-size: 18px; }
.position-art .art-strike { margin-top: 12px; font: var(--card-strike-weight) var(--card-strike-size) var(--card-display-font); line-height: 1.1; color: var(--card-price); overflow-wrap: anywhere; }
.position-art .art-label { display: block; margin-top: 8px; color: var(--card-muted); font-size: 12px; }
.position-art .art-rail { position: relative; height: 3px; margin: 65px 24px 34px; background: var(--card-rail); }
.position-art .art-gap { position: absolute; height: 3px; background: var(--card-accent); }
.position-art .art-marker { position: absolute; top: -5px; width: 13px; height: 13px; margin-left: -6px; border: 2px solid var(--card-muted); border-radius: 50%; background: var(--card-bg); }
.position-art .art-marker.strike { background: var(--card-accent); border-color: var(--card-accent); }
.position-art .art-marker span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 11px var(--font-mono); color: var(--card-label); }
.position-art .art-marker.market span { bottom: 20px; }
.position-art .art-marker.strike span { top: 24px; color: var(--card-accent); }
.position-art .art-numbers { padding: 30px 28px; border-left: 1px dashed var(--card-rail); background: var(--card-panel); display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.position-art .art-value { display: block; margin-top: 8px; font: 600 clamp(19px, 2.5vw, 30px) var(--font-mono); line-height: 1.3; overflow-wrap: anywhere; }
.position-art .art-percent { display: block; margin-top: 7px; font: 500 16px var(--font-mono); }
.position-art .is-gain { color: var(--card-gain); }
.gyro-earnings .is-gain { color: var(--returns-gain); }
.position-art .is-loss { color: var(--card-loss); }
.gyro-earnings .is-loss { color: var(--returns-loss); }
.position-art .art-footer { padding: 16px 28px; border-top: 1px solid var(--card-rule); font: 11px var(--font-mono); color: var(--card-muted); overflow-wrap: anywhere; }
.gyro-earnings .returns-value { display: block; margin: 12px 0 3px; font: 600 26px var(--font-display); }
.gyro-earnings .returns-percent { font: 14px var(--font-mono); }
@media (max-width: 600px) {
    dialog.gyro-position-card { padding: 16px; }
    .position-art .art-header, .position-art .art-main, .position-art .art-numbers, .position-art .art-footer { padding: 20px; }
    .position-art .art-content { grid-template-columns: 1fr; }
    .position-art .art-numbers { border-left: none; border-top: 1px dashed var(--card-rail); gap: 20px; }
    .position-art .art-strike { font-size: var(--card-strike-mobile-size); }
    .position-art .art-header { flex-wrap: wrap; }
}