/* Lunar · approved Figma composition, with fluid desktop and mobile layouts. */
:root { --ease-lunar: cubic-bezier(.22,1,.36,1); }
body { font-synthesis: none; text-rendering: optimizeLegibility; }
button, input { font-family: inherit; }

/* Keep the celestial artwork intact. All typography and light are live layers. */
.hero { height: 100svh; min-height: 0; isolation: isolate; }
.hero-art { z-index: -3; object-position: center center; animation: lunar-drift 36s ease-in-out infinite alternate; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg,rgba(3,5,15,.1),transparent 25%,transparent 85%,rgba(5,8,20,.1)); }
.hero-twinkle { z-index: -2; opacity: .45; filter: blur(.3px); }
.hero-horizon { z-index: -2; left: 0; bottom: 14%; width: 100%; height: 30%; margin: 0; opacity: .3; background: radial-gradient(ellipse at center,rgba(194,176,255,.11),transparent 70%); animation: lunar-halo 6s ease-in-out infinite; }
.hero-brand { top: calc(11px * var(--hz)); left: max(24px,8.7%); z-index: 3; gap: calc(10px * var(--hz)); }
.brand-logo { filter: drop-shadow(0 0 5px rgba(179,157,250,.15)); }
.hero-copy { position: absolute; inset-inline: 0; top: 14.8%; display: flex; flex-direction: column; align-items: center; }
.hero-title, .hero-title-wrap { position: relative; inset: auto; font-size: calc(104px * var(--hz)); line-height: 1.25; letter-spacing: 0; font-weight: 400; }
.hero-title-wrap { position: absolute; inset: 0 0 auto; opacity: .35; color: #ae94ff; filter: blur(calc(2px * var(--hz))); text-shadow: 0 0 calc(18px * var(--hz)) rgba(162,137,255,.8); animation: lunar-title-breathe 6s ease-in-out infinite; }
.hero-title { z-index: 1; background: linear-gradient(180deg,#fff 9%,#fcfaff 23%,#ded4fb 37%,#a598cc 50%,#eee7ff 64%,#b5a1e5 81%,#dcd0ff 92%); background-clip: text; -webkit-background-clip: text; -webkit-text-stroke: calc(.4px * var(--hz)) rgba(234,225,255,.48); filter: drop-shadow(0 0 calc(5px * var(--hz)) rgba(187,165,255,.5)); }
.hero-sub { position: relative; inset: auto; z-index: 1; margin-top: calc(-27px * var(--hz)); font-size: calc(44px * var(--hz)); font-weight: 250; line-height: 1.25; letter-spacing: 0; text-shadow: 0 1px 14px rgba(211,197,255,.15); }
.hero-greeting { position: relative; inset: auto; margin-top: calc(1px * var(--hz)); font-size: calc(20px * var(--hz)); font-weight: 300; line-height: 1.25; letter-spacing: -.015em; }
.hero-arrow { z-index: 2; width: 48px; height: 44px; bottom: calc(1px * var(--hz)); margin-left: -24px; opacity: .9; animation: none; filter: drop-shadow(0 0 5px rgba(202,182,255,.5)); }
.hero-arrow img { width: calc(28px * var(--hz)); max-width: 42px; animation: lunar-arrow 2s ease-in-out infinite; }
.hero-arrow:hover { opacity: 1; filter: drop-shadow(0 0 8px rgba(218,201,255,.8)); }
.hero.is-away .hero-title-wrap,.hero.is-away .hero-arrow img { animation-play-state: paused; }
@keyframes lunar-drift { from { transform: scale(1); } to { transform: scale(1.018); } }
@keyframes lunar-halo { 0%,100% { opacity: .25; } 50% { opacity: .45; } }
@keyframes lunar-title-breathe { 0%,100% { opacity: .36; } 50% { opacity: .62; } }
@keyframes lunar-arrow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* Desktop preserves the exact Figma proportions; canvas buffers scale with it. */
.panel { padding-top: 0; scroll-margin-top: 16px; }
.panel-shell { position: relative; }
.dashboard { padding: 12px; border-color: rgba(132,117,184,.78); background: #0a0e1d; box-shadow: inset 0 1px 15px rgba(149,129,239,.12),0 -7px 30px -16px rgba(166,143,255,.3); }
.topbar { flex: none; }
.topbar-right { margin-right: 94px; }
.market-pill { font-weight: 400; border-color: rgba(125,111,177,.55); }
.row { width: 100%; }
.card { flex-shrink: 1; background: radial-gradient(ellipse at 100% 0,rgba(147,130,204,.065),transparent 56%),linear-gradient(180deg,#14182b 0%,#0c1020 29%,#090d1a 100%); border-color: rgba(127,113,177,.76); box-shadow: 0 4px 10px rgba(0,0,0,.16),inset 0 1px 6px rgba(199,183,255,.12); }
.card::before { content: ''; position: absolute; inset: -1px; border: 1px solid transparent; border-radius: inherit; background: linear-gradient(120deg,rgba(220,211,255,.68),rgba(171,148,240,.14) 22%,rgba(138,116,202,.12) 70%,rgba(169,150,230,.4)) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.metric-title { font-weight: 400; letter-spacing: -.01em; }
.metric-value { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.metric-detail { font-weight: 400; }
.pill { flex-shrink: 0; min-height: 24px; }
.metric-l { gap: 7px; }
.metric-l .pill { margin-top: 0; }
.card-title, .chart-title { font-weight: 600; letter-spacing: -.02em; }
.card-note { font-weight: 400; }
.chart-card { width: 100%; min-height: 380px; }
.chart-head { height: 32px; }
.chart-controls { height: 35px; }
.chart-frame { width: 100%; height: 270px; padding: 6px 8px 2px; border-color: rgba(127,113,177,.65); }
.chart-box canvas { display: block; }
.legend { min-height: 14px; margin: 0 0 5px 7px; font-weight: 400; gap: 4px 18px; }
.chart-sub { font-weight: 400; }
.chart-controls { flex-shrink: 0; }
.chart-head { flex-shrink: 0; }
.chart-controls .pill { margin: 0; }
.table-view { margin-top: 7px; font-weight: 500; line-height: 12.5px; }
.period { flex-shrink: 0; }
.period button { width: 44px; }
.period-indicator { background: linear-gradient(180deg,#8c7cdb 0%,#604aaf 48%,#3d2d71 100%); box-shadow: inset 0 1px 3px rgba(238,224,255,.32),0 0 7px rgba(128,99,255,.25); }
.half.card { flex: 1 1 0; min-width: 0; }
.card.half.table-card { min-height: 102px; }
.card.half.table-card .card-title { margin-bottom: 0; }
.data-table { border-collapse: collapse; }
.data-table thead { border-bottom: .5px solid rgba(130,115,180,.2); }
.data-table th { height: 20px; font-weight: 400; }
.data-table td { height: 20px; font-weight: 500; }
.side-chip { padding: 2px 5px; border-radius: 4px; }
.side-chip.buy { background: rgba(23,154,83,.14); }
.side-chip.sell { background: rgba(226,59,88,.12); }
.pl-pill { padding: 2px 4px; border-radius: 4px; }
.pl-pill.tone-bad { background: rgba(226,59,88,.12); border: .5px solid rgba(226,59,88,.18); }
.bot-card { flex: 0 1 370px; min-height: 190px; height: auto; }
.history-card { flex: 1 1 498px; min-height: 190px; height: auto; }
.bot-config { font-weight: 400; }
.bot-config dd { font-weight: 600; }
.bot-next { line-height: 1.35; }
.timeline { max-height: 210px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #51456d transparent; }
.btn-primary { min-height: 32px; background: linear-gradient(180deg,#b1a1ff 0%,#927af1 34%,#6b4ed4 100%); box-shadow: inset 0 1px 3px rgba(242,234,255,.35),0 0 9px rgba(157,123,255,.32); }
.bot-card .btn-primary { min-width: 160px; }
.page-foot { margin-top: 0; font-weight: 400; }
.login-wrap { min-height: 360px; }
.login-card { border-color: rgba(176,150,245,.5); }

/* Tablet: retain side-by-side analysis instead of collapsing the whole panel. */
@media (min-width: 641px) and (max-width: 940px) {
  .panel { padding: 0 16px; }
  .panel-shell { zoom: 1; width: 100%; }
  .dashboard { gap: 14px; padding: 14px; }
  .row { flex-wrap: nowrap; gap: 14px; }
  .row-summary { display: grid; grid-template-columns: 1fr 1fr; }
  .row-summary > :first-child { grid-column: 1 / -1; }
  .row-summary > .card { width: auto !important; min-height: 112px; }
  .row-metrics { display: grid; grid-template-columns: 1fr 1fr; }
  .row-metrics > .card { width: auto !important; min-height: 100px; }
  .row > .half.card { width: auto !important; }
  .metric-title, .metric-title.t11 { font-size: 12px; }
  .metric-detail { font-size: 11px; }
  .card.half.table-card { overflow: hidden; }
  .row:last-child { flex-direction: column; }
  .bot-card,.history-card { flex: none; width: 100% !important; }
  .chart-controls { flex-wrap: nowrap; }
  .flex-space { display: block; }
  .topbar-right { margin-right: 0; }
  .card-title-row { gap: 8px; }
  .card-note { font-size: 9px; text-align: right; }
  .card-title { font-size: 12px; }
}

/* Mobile: readable type and proper touch targets, same visual language. */
@media (max-width: 640px) {
  .hero { height: 100svh; min-height: 570px; }
  .hero-art { object-fit: cover; object-position: 50% 100%; }
  .hero-brand { top: 22px; left: 22px; gap: 9px; }
  .hero-brand .brand-logo { width: 36px; height: 36px; }
  .hero-brand .brand-name { font-size: 20px; }
  .hero-copy { top: 22%; }
  .hero-title,.hero-title-wrap { font-size: clamp(80px,23vw,132px); letter-spacing: -.045em; line-height: 1.2; }
  .hero-sub { font-size: clamp(32px,9vw,48px); margin-top: -12px; font-weight: 250; }
  .hero-greeting { font-size: 17px; margin-top: 12px; }
  .hero-arrow { bottom: 18px; }
  .hero-arrow img { width: 27px; }
  .panel { padding: 0 12px; scroll-margin-top: 12px; }
  .panel-shell { width: 100%; zoom: 1; }
  .dashboard { padding: 12px; gap: 12px; border-radius: 17px; }
  .topbar { height: auto; min-height: 48px; margin-bottom: 4px; gap: 6px; }
  .topbar .brand { gap: 8px; }
  .topbar .brand-logo { width: 34px; height: 34px; }
  .topbar .brand-name { font-size: 17px; }
  .topbar .brand-sub { font-size: 10px; }
  .topbar-right { margin-right: 0; }
  .market-pill { min-width: 0; height: 31px; padding: 0 8px; font-size: 10px; gap: 6px; }
  .live-dot { width: 6px; height: 6px; }
  .row { display: flex; flex-wrap: nowrap; flex-direction: column; gap: 12px; }
  .row > .card { flex: none; width: 100% !important; min-width: 0; }
  .card { padding: 17px; border-radius: 12px; }
  .metric-l,.metric-s { height: auto; min-height: 110px; gap: 9px; }
  .metric-title,.metric-title.t11 { font-size: 12px; white-space: normal; }
  .metric-value,.metric-value.v20 { font-size: 24px; line-height: 1.2; }
  .metric-value.v28 { font-size: 34px; line-height: 1.2; }
  .metric-detail,.metric-detail.t10 { font-size: 11px; line-height: 1.5; }
  .metric-value.trend { font-size: 20px; }
  .pill { font-size: 10px; height: 25px; }
  .row-metrics { display: grid; grid-template-columns: 1fr 1fr; }
  .row-metrics .card { padding: 13px; min-height: 125px; }
  .row-metrics .metric-title { font-size: 10px; min-height: 25px; }
  .row-metrics .metric-value { font-size: clamp(18px,5vw,24px); }
  .row-metrics .metric-detail { font-size: 10px; }
  .chart-card { min-height: 0; padding: 15px 10px 12px; }
  .chart-head { height: auto; min-height: 48px; gap: 5px; padding: 0 4px; }
  .chart-title { font-size: 14px; }
  .chart-sub { font-size: 10px; line-height: 1.45; }
  .chart-controls { height: auto; padding: 10px 4px; flex-wrap: wrap; gap: 10px; }
  .chart-controls .period { flex: 1 0 100%; height: 38px; }
  .period button { width: 25%; height: 37px; font-size: 12px; }
  .period-indicator { width: 25%; height: 37px; }
  .ticker-price { font-size: 20px; }
  .chart-frame { height: 280px; padding: 8px 3px 2px; }
  .legend { margin-left: 4px; margin-bottom: 7px; gap: 6px 12px; font-size: 9px; }
  .table-view { margin-top: 10px; font-size: 11px; }
  .table-view summary { min-height: 32px; display: flex; align-items: center; }
  .half.card { height: 230px; gap: 10px; }
  .card-title-row { height: auto; min-height: 25px; gap: 12px; align-items: center; }
  .card-title,.card-title.t13 { font-size: 14px; }
  .card-note { font-size: 9px; text-align: right; max-width: 45%; }
  .chart-box-sm { height: 160px; }
  .card.half.table-card { height: auto; min-height: 130px; }
  .table-scroll { overflow-x: auto; scrollbar-width: thin; }
  .data-table { min-width: 375px; }
  th { font-size: 10px; }
  td { font-size: 11px; padding-right: 12px; }
  .bot-card { min-height: 238px; gap: 13px; }
  .bot-config { grid-template-columns: 104px 1fr; row-gap: 8px; font-size: 11px; line-height: 1.4; }
  .bot-next { font-size: 10px; }
  .bot-head { height: auto; gap: 6px; }
  .switch { font-size: 9px; gap: 7px; }
  .bot-card .btn-primary { min-height: 40px; font-size: 12px; padding-inline: 14px; }
  .history-card { min-height: 156px; gap: 14px; }
  .timeline li { font-size: 11px; line-height: 1.5; align-items: flex-start; }
  .timeline .dot { margin-top: 6px; }
  .page-foot { height: auto; min-height: 48px; font-size: 9px; text-align: center; padding: 12px; }
  .login-card { width: 100%; max-width: 360px; }
  .login-card label { font-size: 12px; }
  .login-card input { font-size: 16px; }
  .login-card .btn { min-height: 42px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-title-wrap { animation: none; }
  .hero-copy *,.hero-arrow,.hero-arrow img,.hero-art { animation: none !important; }
  .hero-arrow { opacity: .9; }
  .card,.btn,.period-indicator,.live-value { transition: none !important; }
}