/* Apple-inspired premium layer for the mobile read-only trading app.
   Motion is restrained, interruptible, and status-led: the interface feels
   alive without turning a high-frequency finance workflow into a toy. */
:root {
  --apple-ink: #050b14;
  --apple-glass: rgba(11, 27, 43, .72);
  --apple-glass-strong: rgba(9, 22, 36, .9);
  --apple-line: rgba(168, 216, 232, .2);
  --apple-line-bright: rgba(84, 225, 239, .62);
  --apple-cyan: #54e1ef;
  --apple-violet: #9b8cff;
  --apple-gold: #f2c36b;
  --apple-ease-out: cubic-bezier(.23, 1, .32, 1);
}

html {
  background: var(--apple-ink);
  color-scheme: dark;
}

body.mobile-decision {
  background-color: var(--apple-ink);
  background-image: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mobile-header {
  padding-top: calc(18px + env(safe-area-inset-top));
  padding-bottom: 14px;
}

.mobile-header-copy::before {
  width: 4px;
  height: 44px;
  background: var(--apple-cyan);
  box-shadow: 0 0 18px rgba(84, 225, 239, .72), 0 0 44px rgba(84, 225, 239, .22);
}

.mobile-header h1 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 650;
  letter-spacing: -.025em;
}

.mobile-top-status span {
  background: rgba(8, 22, 36, .54);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
}

.mobile-main {
  padding-top: 20px;
}

.mobile-section {
  border-top-color: rgba(168, 216, 232, .16);
}

.mobile-section::after {
  width: 54px;
  background: var(--apple-cyan);
  box-shadow: 0 0 12px rgba(84, 225, 239, .65);
}

.mobile-hero-card,
.capital-profile,
.entry-plan-section,
.mobile-first-action {
  background-color: var(--apple-glass);
  border-color: var(--apple-line);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 44px rgba(0, 0, 0, .28), 0 0 28px rgba(84, 225, 239, .05);
}

.mobile-hero-card::before {
  background: rgba(84, 225, 239, .06);
  opacity: .8;
}

.market-energy-layout {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-top: 18px;
}

.market-energy-core {
  --market-score: 0;
  position: relative;
  width: 132px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  gap: 2px;
  border-radius: 50%;
  text-align: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(6, 17, 29, .98) 58%, transparent 60%),
    conic-gradient(from 220deg, var(--apple-cyan) calc(var(--market-score) * 1%), rgba(84, 225, 239, .1) 0);
  box-shadow: 0 0 0 8px rgba(84, 225, 239, .025), 0 0 42px rgba(84, 225, 239, .2), inset 0 0 30px rgba(84, 225, 239, .08);
}

.market-energy-core::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(176, 235, 244, .1);
  border-radius: inherit;
  pointer-events: none;
}

.market-energy-core span,
.market-energy-core small {
  display: block;
  max-width: 92px;
  overflow: hidden;
  color: #7896ab;
  font-size: 10px;
  letter-spacing: .1em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-energy-core strong {
  color: #f4fdff;
  font: 680 34px/.95 -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.05em;
  text-shadow: 0 0 22px rgba(84, 225, 239, .28);
}

.market-energy-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.market-energy-facts > div {
  display: grid;
  gap: 4px;
  min-height: 68px;
  padding: 12px;
  border: 1px solid rgba(168, 216, 232, .15);
  border-radius: 14px;
  background: rgba(5, 15, 26, .58);
}

.market-energy-facts small { color: #7892a6; font-size: 11px; }
.market-energy-facts strong { color: #effbff; font-size: 21px; font-variant-numeric: tabular-nums; }
.market-energy-facts > .freshness { grid-column: 1 / -1; justify-self: start; }

.mobile-section-title h1,
.mobile-section-title h2 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: -.018em;
}

.mobile-section-title > span:first-child,
.section-kicker,
.mobile-eyebrow {
  color: var(--apple-cyan);
}

.mobile-section-title > span:first-child {
  letter-spacing: .16em;
  font-weight: 650;
}

.metric,
.capital-primary span,
.capital-facts span,
.stock-detail-metrics > div,
.entry-plan-metrics span {
  background-color: rgba(6, 17, 29, .64);
  border-color: rgba(168, 216, 232, .16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.metric strong,
.stock-detail-price-block strong,
.entry-plan-verdict strong {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}

.chip,
.bucket-tab,
.mobile-personal-entry,
.first-action-card {
  border-color: rgba(168, 216, 232, .24);
  background-color: rgba(9, 27, 43, .56);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  transition: transform 140ms var(--apple-ease-out), border-color 140ms var(--apple-ease-out), color 140ms var(--apple-ease-out), box-shadow 140ms var(--apple-ease-out);
}

.chip.is-active,
.bucket-tab.is-active {
  color: #f8fdff;
  border-color: var(--apple-line-bright);
  box-shadow: 0 0 0 1px rgba(84, 225, 239, .12), 0 0 20px rgba(84, 225, 239, .14);
}

.chip:active,
.bucket-tab:active,
.first-action-card:active,
.mobile-personal-entry:active,
.hm-bottom-nav .mobile-nav-item:active {
  transform: scale(.97);
}

.hm-bottom-nav {
  background: rgba(5, 12, 22, .68);
  border-top-color: var(--apple-line);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 -18px 42px rgba(0, 0, 0, .46), 0 -1px 0 rgba(84, 225, 239, .08);
}

.mobile-nav-item {
  transition: color 140ms var(--apple-ease-out), transform 140ms var(--apple-ease-out);
}

.mobile-nav-item::after {
  height: 3px;
  background: var(--apple-cyan);
  box-shadow: 0 0 12px rgba(84, 225, 239, .7);
  transition: transform 180ms var(--apple-ease-out);
}

.mobile-nav-item.is-center .mobile-nav-icon {
  border-color: var(--apple-cyan);
  box-shadow: 0 0 0 7px rgba(84, 225, 239, .08), 0 0 30px rgba(84, 225, 239, .32), inset 0 0 24px rgba(84, 225, 239, .12);
}

.mobile-nav-item.is-center .mobile-nav-label {
  text-shadow: 0 0 12px rgba(84, 225, 239, .32);
}

.mobile-nav-pulse {
  border-color: rgba(84, 225, 239, .78);
  box-shadow: 0 0 0 7px rgba(84, 225, 239, .05), 0 0 30px rgba(84, 225, 239, .24);
}

.mobile-nav-value {
  letter-spacing: .02em;
}

details > summary {
  color: var(--apple-cyan);
  transition: color 140ms var(--apple-ease-out), transform 140ms var(--apple-ease-out);
}

details > summary:active {
  transform: scale(.985);
}

[data-detail-panel][hidden] {
  display: none !important;
}

.stock-context-header {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(112, 192, 216, .2);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(14, 39, 61, .9), rgba(7, 19, 33, .78));
  box-shadow: 0 18px 50px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.stock-context-header button {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(130, 209, 232, .24);
  border-radius: 50%;
  color: #e9f8ff;
  background: rgba(17, 43, 64, .76);
  font: 300 32px/1 "SF Pro", sans-serif;
}

.stock-context-header > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.stock-context-header small {
  color: #7694aa;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.stock-context-header strong {
  overflow: hidden;
  color: #f4fbff;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-context-header .freshness {
  padding: 6px 9px;
  border-radius: 999px;
  color: #88a1b5;
  background: rgba(255, 255, 255, .04);
  font-size: 10px;
}

.stock-context-header .freshness[data-state="ready"] {
  color: #66f0c6;
  background: rgba(32, 201, 151, .12);
}

.stock-detail-tabs {
  position: sticky;
  top: max(8px, env(safe-area-inset-top));
  z-index: 16;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 3px;
  margin: 0 0 14px;
  padding: 4px;
  border: 1px solid rgba(121, 191, 214, .18);
  border-radius: 16px;
  background: rgba(6, 18, 31, .82);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .25);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}

.stock-detail-tabs button {
  min-width: 0;
  min-height: 42px;
  padding: 0 3px;
  border: 0;
  border-radius: 12px;
  color: #718ca2;
  background: transparent;
  font: 600 12px/1 "SF Pro", "PingFang SC", sans-serif;
  transition: color 140ms var(--apple-ease-out), background 180ms var(--apple-ease-out), transform 140ms var(--apple-ease-out);
}

.stock-detail-tabs button.is-active {
  color: #effcff;
  background: linear-gradient(180deg, rgba(55, 154, 184, .3), rgba(21, 74, 98, .26));
  box-shadow: inset 0 0 0 1px rgba(84, 225, 239, .28), 0 8px 20px rgba(0, 0, 0, .18);
}

.stock-detail-tabs button:active {
  transform: scale(.96);
}

.mobile-chart-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 0, rgba(84, 225, 239, .1), transparent 34%),
    linear-gradient(165deg, rgba(13, 34, 52, .92), rgba(5, 15, 27, .96));
}

.stock-chart-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 8px;
}

.stock-chart-segments {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  flex: 1;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .22);
}

.stock-chart-segments button,
.stock-chart-indicators button,
.stock-chart-fullscreen {
  min-height: 38px;
  border: 0;
  border-radius: 9px;
  color: #7290a6;
  background: transparent;
  font: 600 11px/1 "SF Pro", "PingFang SC", sans-serif;
}

.stock-chart-segments button.is-active,
.stock-chart-indicators button.is-active {
  color: #eafcff;
  background: rgba(84, 225, 239, .14);
  box-shadow: inset 0 0 0 1px rgba(84, 225, 239, .25);
}

.stock-chart-fullscreen {
  min-width: 54px;
  border: 1px solid rgba(129, 196, 218, .18);
  background: rgba(12, 32, 49, .7);
}

.stock-chart-indicators {
  display: flex;
  gap: 5px;
  margin-bottom: 8px;
}

.stock-chart-indicators button {
  min-width: 54px;
  min-height: 34px;
}

.mobile-stock-chart {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  border: 1px solid rgba(112, 180, 205, .16);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(8, 23, 37, .88), rgba(4, 12, 22, .96)),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(130, 170, 195, .05) 48px);
  touch-action: pan-x pan-y;
}

.mobile-stock-chart svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 260px;
}

.stock-chart-empty {
  min-height: 260px;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 28px;
  text-align: center;
}

.stock-chart-empty strong { color: #dff7ff; font-size: 17px; }
.stock-chart-empty p { margin: 0; color: #87a0b4; line-height: 1.6; }
.stock-chart-empty small { color: #607c91; }

.stock-chart-crosshair,
.stock-chart-indicator-readout,
.stock-chart-freshness {
  margin-top: 8px;
  color: #87a3b8;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  line-height: 1.5;
}

.stock-chart-indicator-readout {
  color: #b8dbe7;
}

.stock-chart-freshness[data-state="ready"] { color: #5fdbc0; }
.stock-chart-freshness[data-state="stale"],
.stock-chart-freshness[data-state="missing"] { color: #f2c36b; }

.mobile-chart-section.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex !important;
  flex-direction: column;
  margin: 0;
  padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  background: #040b13;
}

.mobile-chart-section.is-fullscreen .mobile-stock-chart {
  flex: 1;
  min-height: 0;
}

.mobile-chart-section.is-fullscreen .mobile-stock-chart svg {
  height: 100%;
  min-height: 0;
}

.mobile-skeleton {
  border-radius: 12px;
  background-color: rgba(17, 38, 57, .8);
  animation-duration: 1.1s;
}

@media (hover: hover) and (pointer: fine) {
  .chip:hover,
  .bucket-tab:hover,
  .first-action-card:hover,
  .mobile-personal-entry:hover {
    border-color: rgba(84, 225, 239, .58);
    box-shadow: 0 0 18px rgba(84, 225, 239, .12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-pulse {
    animation: none;
  }

  .chip,
  .bucket-tab,
  .mobile-personal-entry,
  .first-action-card,
  .hm-bottom-nav .mobile-nav-item,
  .stock-detail-tabs button {
    transition-duration: 1ms;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .mobile-hero-card,
  .capital-profile,
  .entry-plan-section,
  .mobile-first-action,
  .hm-bottom-nav,
  .mobile-top-status span,
  .chip,
  .bucket-tab,
  .first-action-card {
    background-color: var(--apple-glass-strong);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .stock-context-header,
  .stock-detail-tabs {
    background-color: var(--apple-glass-strong);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* PWA install prompt: intentionally quieter than trading alerts. */
.pwa-install-guide {
  position: fixed;
  z-index: 80;
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(104px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 17px;
  border: 1px solid rgba(89, 199, 178, .34);
  border-radius: 20px;
  color: #f3f6f2;
  background: rgba(16, 44, 41, .96);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.pwa-install-guide div { display: grid; gap: 3px; }
.pwa-install-guide strong { font-size: 14px; }
.pwa-install-guide span { color: rgba(243, 246, 242, .68); font-size: 12px; }
.pwa-install-guide button { border: 0; border-radius: 12px; padding: 10px 12px; font: inherit; font-weight: 700; }
.pwa-install-guide [data-pwa-install] { color: #102c29; background: #59c7b2; }
.pwa-install-guide .pwa-install-close { padding: 8px; color: rgba(243, 246, 242, .62); background: transparent; font-size: 20px; }

@media (display-mode: standalone) {
  .pwa-install-guide { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-install-guide { scroll-behavior: auto; }
}