/* Luxspotter Studio. Original implementation inspired by public Forever demos.
   No Forever source copied. Presentation only; calculations remain unchanged. */
:root {
  color-scheme: light;
  --bg: #f6f7f9; --bg-soft: #edf1f5; --card: #fff; --card-strong: #fff;
  --text: #172c3b; --muted: #596c7b; --line: #e2e8ed;
  --accent: #08796e; --accent-soft: #e9f5f1;
  --green: #087346; --red: #b82f47; --orange: #8b4b08; --radius: 20px;
  --studio-rail: 224px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { background: var(--bg); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
a, button, summary { touch-action: manipulation; }
:focus-visible { outline: 3px solid #168677; outline-offset: 4px; }
button:disabled { cursor: not-allowed; }
.studio-icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.studio-skip { position: fixed; left: 16px; top: -100px; z-index: 300; background: white; padding: 14px; border-radius: 12px; color: var(--accent); }
.studio-skip:focus { top: 12px; }
.shell, .page-shell, .day-shell { width: 100%; max-width: 1480px; padding: 32px 36px 48px; margin: 0 auto; }
body.studio-ready { padding-left: var(--studio-rail); }
.studio-rail { position: fixed; z-index: 40; inset: 0 auto 0 0; width: var(--studio-rail); border-right: 1px solid var(--line); background: #fcfdfd; padding: 29px 16px 20px; display: flex; flex-direction: column; overflow-y: auto; }
.studio-brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 29px; text-decoration: none; color: var(--text); font-size: 20px; letter-spacing: -.8px; font-weight: 760; }
.studio-brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; color: #fff; background: #08796e; box-shadow: 0 4px 9px #08796e20; }
.studio-brand-mark .studio-icon { width: 21px; height: 21px; }
.studio-brand small { display: block; font-size: 10px; line-height: 1.8; font-weight: 600; letter-spacing: 2px; color: #687b88; text-transform: uppercase; }
.studio-nav-heading { padding: 0 13px; margin: 22px 0 8px; font-size: 10px; font-weight: 750; letter-spacing: 1.6px; color: #627481; text-transform: uppercase; }
.studio-nav-heading:first-child { margin-top: 0; }
.studio-nav-link { display: flex; align-items: center; gap: 11px; min-height: 43px; margin: 3px 0; padding: 11px 13px; border-radius: 11px; text-decoration: none; color: #526775; font-size: 12px; font-weight: 560; transition: color .2s, background .2s, transform .2s; }
.studio-nav-link:hover { color: var(--accent); background: #f0f5f4; transform: translateX(2px); }
.studio-nav-link[aria-current=page] { color: #056559; background: #e6f3ed; font-weight: 740; box-shadow: inset 3px 0 #08796e; }
.studio-rail-note { margin: auto 10px 0; padding-top: 28px; font-size: 10px; line-height: 1.7; color: #607482; }
.studio-rail-note strong { display: flex; gap: 7px; align-items: center; font-size: 11px; color: var(--text); }
.studio-rail-note strong::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #8a9ba6; }
.studio-toolbar { min-height: 43px; margin: -5px 0 26px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.studio-breadcrumb { font-size: 12px; color: var(--muted); }
.studio-breadcrumb span { padding: 0 10px; color: #a0acb4; }
.studio-breadcrumb strong { color: #354c5b; font-weight: 600; }
.studio-search-button { display: flex; align-items: center; gap: 10px; color: #566b79; background: white; border: 1px solid var(--line); padding: 10px 13px; border-radius: 11px; font-size: 11px; cursor: pointer; min-height: 42px; }
.studio-search-button .studio-icon { width: 16px; height: 16px; }
.studio-search-button kbd { border: 1px solid var(--line); border-radius: 5px; padding: 2px 4px; background: #f8fafb; font-size: 10px; margin-left: 20px; }
.studio-mobile-brand, .studio-bottom { display: none; }
.topbar { margin-bottom: 12px; }
.topbar h1 { font-size: clamp(1.6rem, 2.6vw, 2rem); letter-spacing: -.045em; font-weight: 740; }
.eyebrow { font-size: 10px; letter-spacing: 1.65px; color: #627784; font-weight: 700; }
.as-of { font-size: 11px; margin: 5px 0 8px; line-height: 1.6; }
#mailSourceStatus { margin-bottom: 23px; }
.card { background: #fff; border: 1px solid #e1e7eb; box-shadow: 0 3px 6px #243a4c03, 0 12px 35px #243a4c03; border-radius: 20px; }
.section, .feature-section { padding: 26px; margin-top: 20px; }
.section-heading { gap: 14px; margin-bottom: 20px; }
.section-heading h2 { font-size: 18px; letter-spacing: -.5px; font-weight: 720; }
.section-heading .eyebrow { color: #08796e; font-size: 9px; }
.subtle, .notice, .page-intro { line-height: 1.7; }
.studio-overview { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr); gap: 20px; align-items: stretch; }
.studio-overview .hero { min-width: 0; padding: 27px 28px 19px; }
.hero .total { font-size: clamp(2.4rem, 4.1vw, 4rem); letter-spacing: -.06em; font-weight: 750; line-height: 1.2; }
.hero .label { font-size: 12px; font-weight: 560; }
.hero .profit { font-size: 20px; letter-spacing: -.5px; }
.hero .period-result { margin-top: 15px; align-items: center; gap: 8px; }
.hero .return { font-size: 12px; border-radius: 7px; background: #f1f5f7; padding: 5px 8px; }
.hero .return.positive { background: #e9f6ed; }.hero .return.negative { background: #fff0f2; }
.hero .subtle, .hero .benchmark-compare { font-size: 10px; line-height: 1.6; }
.period-badge, .ai-label, .home-ai-badge { border: 1px solid #cee5dd; border-radius: 7px; background: #eef8f3; color: #146f5e; font-size: 10px; font-weight: 720; padding: 6px 9px; letter-spacing: .01em; }
.chart-wrap { margin-top: 6px; }
.legend { font-size: 10px; }
.chart-hint { font-size: 10px; color: #5c7080; }
.studio-ai.card { margin: 0; padding: 25px; display: flex; flex-direction: column; background: linear-gradient(155deg, #f4fbf7, #fff 62%); position: relative; overflow: hidden; }
.studio-ai::before { content: ''; width: 120px; height: 120px; border-radius: 50%; position: absolute; right: -36px; top: -55px; background: radial-gradient(circle, #bce5d466, transparent 70%); pointer-events: none; }
.studio-ai .home-daily-insight-header { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.studio-ai .home-insight-meta { font-size: 10px; line-height: 1.7; color: #516b63; }
.studio-ai h2 { margin-top: 24px; font-size: 20px; line-height: 1.4; letter-spacing: -.5px; }
.studio-ai .home-insight-summary { font-size: 12px; line-height: 1.85; color: #435c58; margin: 13px 0 20px; }
.studio-ai .home-insight-freshness { font-size: 11px; }
.studio-ai .day-insight-button { border: 1px solid #d5e7de; border-radius: 10px; background: white; color: #136b58; padding: 12px; margin-top: auto; text-align: center; justify-content: space-between; min-height: 44px; font-size: 11px; }
.studio-ai .manual-insight-actions { order: 9; display: grid; margin-top: 14px; gap: 8px; }
.studio-ai .manual-insight-status { font-size: 9px; line-height: 1.7; color: #60756f; }
.manual-insight-button { border-radius: 10px; background: #08796e; color: white; border: 1px solid #08796e; padding: 11px 14px; font-size: 11px; min-height: 44px; box-shadow: 0 3px 7px #08796e0e; transition: background .18s, transform .18s; }
.manual-insight-button:hover:not(:disabled) { background: #076256; transform: translateY(-1px); }
.studio-segmented { position: relative; isolation: isolate; display: flex; align-items: stretch; gap: 3px; background: #f0f3f5; border: 1px solid #e6ebee; padding: 4px; border-radius: 11px; }
.studio-segmented::before { content: ''; position: absolute; z-index: -1; left: var(--pill-x, 4px); top: 4px; width: var(--pill-w, 0); bottom: 4px; border-radius: 8px; background: white; box-shadow: 0 2px 5px #20374612; transition: left .27s cubic-bezier(.2,.8,.2,1), width .27s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.studio-segmented button { position: relative; flex: 1 1 0; border: 0; background: transparent; border-radius: 8px; min-width: 0; min-height: 36px; padding: 8px 7px; font-size: 10px; color: #566d7b; cursor: pointer; box-shadow: none; }
.studio-segmented button.active { background: transparent; color: #075f55; box-shadow: none; font-weight: 780; }
.metrics { gap: 15px; margin: 20px 0 0; }
.metric.card { padding: 22px; position: relative; overflow: hidden; }
.metric .label { padding-right: 25px; font-size: 11px; color: #5b6e7b; line-height: 1.5; }
.metric-value { font-size: clamp(22px, 2.1vw, 30px); font-weight: 740; letter-spacing: -.9px; margin-top: 13px; }
.metric-detail { font-size: 10px; color: #5b6e7b; line-height: 1.7; }
.studio-metric-icon { position: absolute; top: 18px; right: 18px; width: 29px; height: 29px; border-radius: 9px; display: grid; place-items: center; color: #21796d; background: #edf6f2; }
.studio-metric-icon .studio-icon { width: 16px; height: 16px; }
.risk-metrics .studio-metric-icon { background: #f1f3f8; color: #61739b; }
.feature-metric, .compact-metrics article, .day-result-grid>div { background: #f8fafb; border-color: #e2e8ed; border-radius: 13px; }
.feature-metric>strong, .compact-metrics strong { font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.studio-tools { margin: 20px 0 0; padding: 0 22px; }
.studio-tools summary { cursor: pointer; min-height: 57px; display: flex; align-items: center; justify-content: space-between; list-style: none; color: #526a78; font-size: 12px; font-weight: 650; }
.studio-tools summary::after { content: '+'; font-size: 20px; font-weight: 400; }.studio-tools[open] summary::after { content: '−'; }
.studio-tools summary::-webkit-details-marker { display: none; }
.studio-tools .feature-grid { margin: 0 0 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-link { border-radius: 12px; min-height: 116px; padding: 17px; box-shadow: none; transition: transform .2s, border-color .2s, background .2s; }
.feature-link:hover { transform: translateY(-3px); border-color: #95caba; background: #f5fbf8; }
.feature-link strong { font-size: 12px; }.feature-link span { font-size: 10px; }
.studio-jumps { display: flex; flex-wrap: wrap; gap: 7px; margin: 22px 0 6px; }
.studio-jumps a { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 12px; background: #fff; border: 1px solid #e1e7eb; border-radius: 8px; text-decoration: none; font-size: 10px; color: #506875; }
.studio-jumps a:hover { background: #e9f5f1; color: #075f55; border-color: #a8cfbf; }
.studio-anchor { scroll-margin-top: 24px; }
.position, .closed-position, .data-row, .user-card, .predictor-card { transition: background .18s, border-color .18s; }
.position:hover, .closed-position:hover { background-color: #f6faf8; }
.position-name { font-weight: 680; }.position-meta { line-height: 1.6; }
.weight-bar { height: 4px; }.weight-bar i { background: #168479; }
.analysis-track { height: 7px; background: #edf1f4; }.analysis-track i { background: linear-gradient(90deg, #84cbb6, #0b8277); border-radius: 99px; }
.analysis-track i, .weight-bar i, .contribution-segment { transition: width .45s ease; }
.table-scroll, .table-wrap { border-radius: 12px; overscroll-behavior-x: contain; }
th { background: #f7f9fa; color: #5e7481; font-size: 10px; letter-spacing: .5px; }
td { border-color: #edf0f3; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: #f8fbfa; }
.calendar-nav { padding: 3px; border: 1px solid #e2e8ed; border-radius: 10px; background: #f7f9fa; }
.calendar-nav button { background: white; border-radius: 7px; border: 1px solid #e4e9ed; min-height: 36px; }
.calendar-day { border-radius: 10px; transition: box-shadow .2s, transform .2s; }
.calendar-day:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 3px 8px #284a4112; }
.calendar-day.selected { outline-color: #08796e; }
.dividend-bars { align-items: end; }
.dividend-bar { align-self: end; }.dividend-bar i { background: linear-gradient(180deg, #188a72, #087a91); }
.search-input, .text-input, .feature-input, .number-input, textarea, select { border-color: #d8e2e8; border-radius: 10px; background-color: #fff; color: var(--text); }
.search-input { min-height: 46px; }
.pill-button { border-radius: 9px; min-height: 42px; }
.pill-button.active, .pill-button.primary { background: #e8f5ee; color: #126b57; border-color: #b9decd; }
.back-link { font-size: 11px; margin-bottom: 10px; }
.position-dialog, .studio-dialog { background: #fff; border: 1px solid #dfe6eb; border-radius: 22px; color: var(--text); box-shadow: 0 30px 100px #142b4433; }
.position-dialog::backdrop, .studio-dialog::backdrop { background: #243c4b55; backdrop-filter: blur(5px); }
.dialog-header { border-bottom: 1px solid #e4eaed; padding-bottom: 18px; margin-bottom: 12px; }
.studio-dialog { padding: 0; width: min(560px, calc(100% - 28px)); max-height: calc(100dvh - 80px); }
.studio-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 13px; gap: 15px; }
.studio-dialog-head h2 { font-size: 16px; }.studio-dialog-head button { width: 36px; height: 36px; min-height: 36px; border-radius: 9px; background: #f3f6f7; border: 1px solid #e0e7eb; color: var(--text); cursor: pointer; }
.studio-command-input { width: calc(100% - 44px); margin: 0 22px 14px; border: 1px solid #cddcd8; border-radius: 10px; padding: 12px; font: inherit; font-size: 14px; color: var(--text); }
.studio-command-list { overflow: auto; max-height: min(55dvh, 460px); padding: 0 12px 15px; }
.studio-command-list a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #294450; padding: 12px; border-radius: 10px; min-height: 45px; font-size: 13px; }
.studio-command-list a:hover, .studio-command-list a:focus-visible { background: #edf7f1; }
.studio-command-list a small { display: block; color: #5c736d; font-size: 10px; margin-top: 3px; }
.studio-command-empty { margin: 14px; color: var(--muted); font-size: 13px; }
.studio-dialog-note { padding: 13px 22px; margin: 0; background: #f7faf9; color: #62766f; border-top: 1px solid #e3ece8; font-size: 10px; }
.studio-loading { position: relative; }
.studio-loading::after { content: ''; position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(105deg, #eef2f4 30%, #fafcfd 48%, #eef2f4 68%); background-size: 200% 100%; animation: studio-shimmer 1.5s linear infinite; pointer-events: none; }
.studio-pop { animation: studio-pop .32s ease-out; }
@keyframes studio-shimmer { to { background-position: -200% 0; } }
@keyframes studio-pop { from { opacity: .5; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1500px) { .shell { padding-left: 48px; padding-right: 48px; } }
@media (max-width: 1180px) {
  :root { --studio-rail: 195px; }
  .shell { padding: 25px 23px 40px; }
  .studio-rail { padding-left: 10px; padding-right: 10px; }
  .studio-nav-link { font-size: 11px; }
  .studio-overview { grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); gap: 15px; }
  .studio-overview .hero { padding: 23px 20px 16px; }
  .studio-ai.card { padding: 22px; }
  .hero .total { font-size: 43px; }
  .metric.card { padding: 18px; }.metric-value { font-size: 23px; }
  .studio-metric-icon { top: 14px; right: 12px; width: 24px; height: 24px; }
}
@media (max-width: 980px) {
  body.studio-ready { padding-left: 0; }
  .studio-rail { display: none; }
  .studio-breadcrumb { display: none; }
  .studio-mobile-brand { display: flex; align-items: center; gap: 9px; color: var(--text); font-size: 18px; letter-spacing: -.7px; font-weight: 730; text-decoration: none; }
  .studio-toolbar { padding: 0 0 17px; border-bottom: 1px solid #e2e8ed; margin-bottom: 24px; }
  .studio-bottom { position: fixed; display: grid; grid-template-columns: repeat(4, 1fr); bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(440px, calc(100% - 28px)); z-index: 50; padding: 6px; border-radius: 20px; background: #ffffffee; border: 1px solid #dce6e1; backdrop-filter: blur(18px); box-shadow: 0 8px 30px #1b453824; }
  .studio-bottom a, .studio-bottom button { background: transparent; border: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 50px; gap: 5px; text-decoration: none; color: #586c78; font: inherit; font-size: 9px; border-radius: 14px; cursor: pointer; }
  .studio-bottom [aria-current=page] { color: #096b59; background: #e6f3ed; font-weight: 750; }
  .studio-bottom .studio-icon { width: 19px; height: 19px; }
  .shell { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
  .studio-anchor { scroll-margin-top: 15px; }
}
@media (max-width: 720px) {
  .shell { padding: max(20px, env(safe-area-inset-top)) 16px calc(105px + env(safe-area-inset-bottom)); }
  .studio-search-button { width: 40px; height: 40px; padding: 0; justify-content: center; min-height: 40px; border-radius: 12px; }
  .studio-search-button>span, .studio-search-button kbd { display: none; }
  .studio-command-input { font-size: 16px; }
  .studio-toolbar { margin-bottom: 24px; padding-bottom: 16px; }
  .topbar h1 { font-size: 27px; }
  .topbar { gap: 12px; }.topbar>div { min-width: 0; }
  .eyebrow { font-size: 9px; letter-spacing: 1.2px; }
  .as-of { font-size: 10px; }
  .studio-overview { display: flex; flex-direction: column; gap: 15px; }
  .studio-overview .hero { padding: 23px 18px 16px; }
  .hero .total { font-size: clamp(34px, 9.5vw, 47px); }
  .hero-top { gap: 8px; }.hero .period-badge { flex-shrink: 0; font-size: 9px; }
  .hero .profit { font-size: 21px; }
  .studio-ai.card { padding: 22px; }
  .studio-ai h2 { font-size: 19px; margin-top: 17px; }
  .studio-ai .home-insight-summary { font-size: 12px; line-height: 1.8; }
  .studio-ai .manual-insight-actions { grid-template-columns: 1fr; }
  .studio-ai .manual-insight-status { text-align: center; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 15px; }
  .metric.card { padding: 17px 14px; border-radius: 16px; }
  .metric .label { font-size: 10px; min-height: 30px; padding-right: 20px; }
  .metric-value { font-size: 23px; margin-top: 4px; overflow-wrap: anywhere; }
  .metric-detail { font-size: 9px; }
  .studio-metric-icon { right: 10px; top: 13px; width: 22px; height: 22px; border-radius: 7px; }
  .studio-metric-icon .studio-icon { width: 13px; height: 13px; }
  .risk-metrics .metric:last-child { grid-column: 1 / -1; }
  .risk-metrics .metric:last-child .label { min-height: auto; }
  .section, .feature-section { padding: 21px 17px; margin-top: 15px; }
  .section-heading { gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
  .section-heading h2 { font-size: 18px; }
  .section-total { font-size: 16px; }
  .studio-tools { margin-top: 15px; padding: 0 16px; }
  .studio-tools .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .feature-link { padding: 14px 11px; gap: 12px; min-height: 125px; }.feature-link strong { font-size: 11px; }.feature-link span { font-size: 10px; }
  .studio-jumps { gap: 6px; }.studio-jumps a { font-size: 10px; min-height: 40px; }
  .studio-segmented button { min-height: 37px; font-size: 10px; padding: 8px 4px; }
  #performanceChart { min-height: 200px; }
  .chart-wrap { min-height: 200px; }
  .chart-label, .detail-chart-label, .feature-chart-label { font-size: 19px; }
  .predictor-history-axis-label, .predictor-history-axis-title { font-size: 17px; }
  .calendar-heading { display: flex; flex-direction: column; align-items: stretch; }
  .calendar-nav { display: grid; grid-template-columns: 40px 1fr 40px; width: 100%; margin: 0; }
  .calendar-nav button { width: 40px; height: 38px; }.calendar-nav strong { font-size: 12px; }
  .calendar-grid { gap: 4px; }.calendar-day, .calendar-blank { min-height: 49px; padding: 5px; }
  .calendar-date { font-size: 11px; }.calendar-pct { font-size: 9px; }
  .position-dialog { width: calc(100% - 14px); border-radius: 20px; }
  .dialog-shell { padding: 20px 14px; }.dialog-header h2 { font-size: 19px; }
  .day-columns { display: block; }.day-hero { padding: 20px 16px; }
  .day-analysis-head h2 { font-size: 23px; }
  .feature-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-intro { font-size: 12px; }
}
@media (max-width: 370px) {
  .shell { padding-left: 11px; padding-right: 11px; }
  .metric-value { font-size: 21px; }.hero .total { font-size: 33px; }
  .calendar-pct { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .studio-pop, .studio-loading::after { animation: none; }
  .studio-segmented::before, .studio-nav-link, .feature-link, .calendar-day, .manual-insight-button,
  .analysis-track i, .weight-bar i, .contribution-segment { transition: none; }
}
@media print {
  body.studio-ready { padding: 0; }
  .studio-rail, .studio-toolbar, .studio-bottom, .studio-jumps { display: none; }
  .shell { max-width: none; padding: 0; }.card { break-inside: avoid; box-shadow: none; }
}