:root {
  --paper: #f4f1e8;
  --paper-deep: #e9e3d5;
  --ink: #102a25;
  --ink-soft: #557068;
  --forest: #173a33;
  --mint: #a6efcf;
  --signal: #ff6b4a;
  --gain: #e4533f;
  --loss: #1673cf;
  --line: rgba(16, 42, 37, 0.12);
  --white: #fffdf8;
  --shadow: 0 24px 70px rgba(24, 52, 44, 0.13);
  font-family: Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--paper); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 14% 8%, rgba(166, 239, 207, 0.5), transparent 26rem),
    linear-gradient(145deg, var(--paper) 0%, #f8f5ee 48%, var(--paper-deep) 100%);
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button { color: inherit; }

.hidden { display: none !important; }

.app-shell {
  width: min(100%, 500px);
  min-height: 100vh;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: rgba(244, 241, 232, 0.72);
}

.screen {
  min-height: 100vh;
  padding: max(28px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom));
}

.loading-screen {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 20px;
  color: var(--ink-soft);
}

.brand-mark {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 26px;
  background: var(--forest);
  box-shadow: 0 18px 42px rgba(23, 58, 51, 0.25);
  animation: breathe 1.8s ease-in-out infinite;
}

.brand-mark span {
  position: absolute;
  bottom: 18px;
  width: 10px;
  border-radius: 10px 10px 4px 4px;
  background: var(--mint);
}

.brand-mark span:nth-child(1) { left: 17px; height: 20px; transform: rotate(-12deg); }
.brand-mark span:nth-child(2) { left: 31px; height: 36px; }
.brand-mark span:nth-child(3) { left: 45px; height: 26px; transform: rotate(12deg); }

@keyframes breathe {
  50% { transform: translateY(-5px) rotate(2deg); }
}

.login-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  isolation: isolate;
}

.login-orbit {
  position: absolute;
  z-index: -1;
  width: 410px;
  height: 410px;
  right: -230px;
  top: -170px;
  border: 1px solid rgba(23, 58, 51, 0.18);
  border-radius: 50%;
  box-shadow: inset 0 0 0 42px rgba(255, 107, 74, 0.045), inset 0 0 0 84px rgba(166, 239, 207, 0.08);
}

.login-heading { margin-bottom: 30px; animation: rise 0.65s ease both; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--forest);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.eyebrow i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 5px rgba(255, 107, 74, 0.14);
}

.login-heading h1 {
  margin: 0;
  font-size: clamp(48px, 14vw, 68px);
  line-height: 0.96;
  letter-spacing: -0.075em;
  font-weight: 900;
}

.login-heading p {
  margin: 20px 0 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.02em;
}

.login-card, .manage-card {
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 26px;
  background: rgba(255, 253, 248, 0.78);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  animation: rise 0.65s 0.1s ease both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

label {
  display: block;
  margin-bottom: 9px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
}

.password-field { position: relative; }

.password-field input, .manage-card input, .settings-form input {
  width: 100%;
  height: 56px;
  padding: 0 66px 0 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  outline: none;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  font-size: 18px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.password-field input:focus, .manage-card input:focus, .settings-form input:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 4px rgba(23, 58, 51, 0.09);
}

.reveal-button {
  position: absolute;
  right: 9px;
  top: 9px;
  height: 38px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.activation-fields {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed var(--line);
}

.field-help { margin: 8px 0 0; color: var(--ink-soft); font-size: 12px; }
.form-message { min-height: 20px; margin: 12px 0 6px; color: #b4392c; font-size: 13px; line-height: 1.45; }

.primary-button {
  width: 100%;
  height: 58px;
  border: 0;
  border-radius: 18px;
  background: var(--forest);
  color: white;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 13px 28px rgba(23, 58, 51, 0.22);
  transition: transform 0.16s, opacity 0.16s;
}

.primary-button:active { transform: scale(0.985); }
.primary-button:disabled { opacity: 0.6; cursor: wait; }

.security-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 5px 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

.security-note p { margin: 0; }
.security-note strong { color: var(--ink); }

.shield-dot {
  width: 34px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 17px 17px 22px 22px;
  background: var(--mint);
  clip-path: polygon(50% 0, 93% 16%, 87% 70%, 50% 100%, 13% 70%, 7% 16%);
}

.manage-link {
  align-self: center;
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: 12px;
  text-underline-offset: 4px;
}

.dashboard-screen { padding-inline: 18px; padding-bottom: 44px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  animation: rise 0.5s ease both;
}

.wordmark { display: flex; align-items: center; gap: 11px; }
.wordmark > div:last-child { display: grid; gap: 2px; }
.wordmark span { color: var(--ink-soft); font-size: 9px; font-weight: 900; letter-spacing: 0.14em; }
.wordmark strong { font-size: 18px; letter-spacing: -0.04em; }

.mini-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-content: center;
  border-radius: 13px 13px 13px 5px;
  background: var(--forest);
  color: var(--mint);
  font-weight: 950;
}

.icon-button {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.7);
  cursor: pointer;
}

.icon-button span { position: absolute; left: 12px; width: 16px; height: 2px; border-radius: 2px; background: var(--ink); }
.icon-button span:first-child { top: 16px; }
.icon-button span:last-child { top: 23px; width: 11px; }

.demo-banner, .data-alert {
  margin-bottom: 12px;
  padding: 10px 13px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-align: center;
}

.demo-banner { background: #ffddb8; color: #783e18; }
.data-alert { background: #fff2cf; color: #73551c; letter-spacing: -0.02em; }

.hero-card {
  position: relative;
  min-height: 328px;
  padding: 22px;
  overflow: hidden;
  border-radius: 30px 30px 30px 10px;
  background: var(--forest);
  color: white;
  box-shadow: 0 24px 55px rgba(23, 58, 51, 0.25);
  animation: rise 0.55s 0.04s ease both;
}

.hero-card::before {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -55px;
  bottom: -68px;
  border: 42px solid rgba(166, 239, 207, 0.1);
  border-radius: 50%;
}

.hero-topline { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; }

.market-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 11px;
}

.market-pill i, .live-indicator i, .status-strip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(166, 239, 207, 0.12);
}

.market-pill i.closed { background: #aebcb7; box-shadow: none; }
.session-clock { color: rgba(255, 255, 255, 0.66); font-size: 12px; font-variant-numeric: tabular-nums; }
.hero-label { position: relative; z-index: 2; margin: 38px 0 7px; color: rgba(255, 255, 255, 0.62); font-size: 13px; }

.hero-card h1 {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: clamp(38px, 11vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}

.krw-conversion { position: relative; z-index: 2; margin: 10px 0 17px; }
.krw-value {
  margin: 0;
  color: var(--mint);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.exchange-rate {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, 0.52);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.profit-comparison {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 7px;
  max-width: 330px;
}

.profit-chip {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.profit-chip b { color: rgba(255, 255, 255, 0.6); font-size: 10px; letter-spacing: -0.02em; }
.profit-chip span:nth-of-type(1) { font-weight: 900; }
.profit-chip span:last-child { text-align: right; }

.profit-chip.positive { background: rgba(255, 107, 74, 0.17); color: #ff9f89; }
.profit-chip.negative { background: rgba(71, 155, 232, 0.17); color: #8fc8ff; }
.profit-chip.neutral { background: rgba(255, 255, 255, 0.09); color: white; }

.hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px);
  background-size: 24px 24px;
}

.ticker-stamp {
  position: absolute;
  right: 18px;
  bottom: 8px;
  color: rgba(255, 255, 255, 0.035);
  font-size: 72px;
  font-weight: 950;
  letter-spacing: -0.08em;
}

.stock-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 4px 14px;
  animation: rise 0.55s 0.1s ease both;
}

.stock-symbol {
  display: grid;
  width: 44px;
  height: 44px;
  place-content: center;
  border-radius: 50%;
  background: var(--signal);
  color: white;
  font-weight: 950;
  box-shadow: 0 9px 20px rgba(255, 107, 74, 0.26);
}

.stock-heading > div:nth-child(2) { display: grid; gap: 4px; }
.stock-heading span { font-size: 15px; font-weight: 850; letter-spacing: -0.03em; }
.stock-heading strong { color: var(--ink-soft); font-size: 10px; letter-spacing: 0.04em; }

.live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 750;
}

.live-indicator i { width: 5px; height: 5px; background: #2ea777; box-shadow: none; }

.price-panel {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 22px;
  background: rgba(255, 253, 248, 0.68);
  box-shadow: 0 14px 40px rgba(24, 52, 44, 0.07);
  animation: rise 0.55s 0.15s ease both;
}

.price-row { display: flex; align-items: center; justify-content: space-between; }
.price-row span { color: var(--ink-soft); font-size: 12px; }
.price-row strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.primary-price strong { font-size: 23px; letter-spacing: -0.04em; }
.primary-price strong.price-tick { animation: quoteFlash 0.65s ease; }

@keyframes quoteFlash {
  0% { transform: translateY(0); color: inherit; }
  35% { transform: translateY(-2px); color: var(--signal); }
  100% { transform: translateY(0); color: inherit; }
}

.price-rule {
  height: 5px;
  margin: 17px 0;
  overflow: hidden;
  border-radius: 5px;
  background: #dcd9cf;
}

.price-rule span { display: block; width: 50%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--signal)); transition: width 0.6s ease; }

.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
  animation: rise 0.55s 0.2s ease both;
}

.metric-card {
  min-height: 126px;
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 22px 22px 22px 8px;
  background: rgba(255, 253, 248, 0.72);
}

.metric-card > span, .metric-card div > span { display: block; margin-bottom: 14px; color: var(--ink-soft); font-size: 11px; }
.metric-card strong { display: block; overflow-wrap: anywhere; font-size: 18px; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.metric-card small { display: block; margin-top: 8px; color: var(--ink-soft); font-size: 10px; }
.accent-card { background: var(--mint); border-color: transparent; }
.accent-card small, .accent-card > span { color: rgba(16, 42, 37, 0.6); }

.wide-card {
  grid-column: 1 / -1;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 22px;
}

.wide-card div > span { margin-bottom: 6px; }
.daily-rate { padding: 9px 12px; border-radius: 12px; font-size: 13px; font-weight: 850; }
.daily-rate.positive { background: rgba(228, 83, 63, 0.1); color: var(--gain); }
.daily-rate.negative { background: rgba(22, 115, 207, 0.1); color: var(--loss); }
.daily-rate.neutral { background: var(--paper-deep); color: var(--ink-soft); }

.status-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding: 0 4px;
  color: var(--ink-soft);
  font-size: 10px;
}

.status-strip div { display: flex; align-items: center; gap: 7px; }
.status-strip i { width: 5px; height: 5px; background: #2ea777; box-shadow: none; }
.status-strip p { margin: 0; }

.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 10px;
}

.app-footer p { margin: 0; }
.app-footer button { border: 0; background: transparent; color: var(--ink); font-size: 11px; font-weight: 800; cursor: pointer; }

.manage-body { background: var(--forest); }

.manage-shell {
  width: min(100%, 560px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) 20px max(40px, env(safe-area-inset-bottom));
  background: var(--paper);
}

.manage-header { display: flex; align-items: center; gap: 16px; margin-bottom: 38px; }
.manage-header a { display: grid; width: 42px; height: 42px; place-content: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); text-decoration: none; }
.manage-header span { color: var(--signal); font-size: 9px; font-weight: 900; letter-spacing: 0.18em; }
.manage-header h1 { margin: 3px 0 0; font-size: 26px; letter-spacing: -0.055em; }
.manage-login > p { margin: 0 0 18px; color: var(--ink-soft); line-height: 1.6; }
.manage-card input { margin-bottom: 6px; padding-right: 16px; }
.dark-button { margin-top: 4px; }

.admin-panel { animation: rise 0.4s ease both; }
.admin-summary { display: flex; align-items: center; justify-content: space-between; padding: 24px; border-radius: 24px; background: var(--forest); color: white; }
.admin-summary span { color: rgba(255, 255, 255, 0.63); font-size: 13px; }
.admin-summary strong { color: var(--mint); font-size: 25px; }

.manage-section { margin-top: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255, 253, 248, 0.65); }
.manage-section h2 { margin: 0 0 16px; font-size: 15px; letter-spacing: -0.03em; }
.section-title { display: flex; align-items: center; justify-content: space-between; }
.section-title button, .text-button { border: 0; background: transparent; color: var(--ink-soft); font-size: 11px; cursor: pointer; }

.device-list { display: grid; gap: 8px; }
.device-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 12px; border-radius: 15px; background: white; }
.device-row.revoked { opacity: 0.45; }
.device-icon { display: grid; width: 32px; height: 40px; place-content: center; border-radius: 9px; background: var(--paper-deep); font-size: 21px; }
.device-row > div:nth-child(2) { display: grid; gap: 4px; }
.device-row strong { font-size: 13px; }
.device-row span { color: var(--ink-soft); font-size: 10px; }
.device-row button { border: 0; border-radius: 10px; padding: 8px 10px; background: #ffe4df; color: #9e382b; font-size: 11px; font-weight: 800; cursor: pointer; }
.empty-devices { margin: 8px 0; color: var(--ink-soft); font-size: 12px; text-align: center; }

.danger-button { width: 100%; margin-top: 12px; padding: 12px; border: 1px solid rgba(158, 56, 43, 0.18); border-radius: 13px; background: transparent; color: #9e382b; font-size: 12px; font-weight: 800; cursor: pointer; }
.settings-form { display: flex; gap: 8px; }
.settings-form input { height: 48px; padding: 0 12px; font-size: 14px; }
.settings-form button { flex: 0 0 auto; border: 0; border-radius: 13px; padding: 0 15px; background: var(--forest); color: white; font-size: 12px; font-weight: 800; cursor: pointer; }
.manage-hint { margin: 10px 2px 0; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
.login-week-section .section-title span { color: var(--forest); font-size: 10px; font-weight: 800; }
.login-week-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.login-week-overview > div { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: var(--paper); }
.login-week-overview span { color: var(--ink-soft); font-size: 10px; }
.login-week-overview strong { font-size: 15px; letter-spacing: -0.03em; }
.login-subject-list { display: grid; gap: 8px; }
.login-subject-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.login-subject-row > div { display: grid; gap: 4px; min-width: 0; }
.login-subject-row strong { font-size: 12px; }
.login-subject-row span { color: var(--ink-soft); font-size: 10px; }
.login-subject-activity { flex: 0 0 auto; text-align: right; }
.login-subject-activity strong { color: var(--forest); font-size: 14px; }
.login-event-list { display: grid; gap: 8px; }
.login-event { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.login-event div { display: grid; gap: 4px; min-width: 0; }
.login-event strong { font-size: 12px; }
.login-event span { color: var(--ink-soft); font-size: 10px; }
.login-event b { flex: 0 0 auto; font-size: 10px; }
.login-event.success b { color: var(--forest); }
.login-event.failure b { color: var(--red); }
.admin-message { min-height: 20px; margin: 16px 4px; color: var(--ink-soft); font-size: 12px; text-align: center; }
.text-button { display: block; margin: 0 auto; text-decoration: underline; text-underline-offset: 4px; }

.setup-shell {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(38px, env(safe-area-inset-top)) 20px max(44px, env(safe-area-inset-bottom));
  background: var(--paper);
}

.setup-header { margin: 10px 4px 30px; }
.setup-header > span { color: var(--signal); font-size: 9px; font-weight: 900; letter-spacing: 0.2em; }
.setup-header h1 { margin: 10px 0 16px; font-size: 46px; line-height: 1.02; letter-spacing: -0.07em; }
.setup-header p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }

.setup-card { padding: 22px; border-radius: 26px; background: var(--white); box-shadow: var(--shadow); }
.setup-card label { margin-top: 18px; }
.setup-card label:first-child { margin-top: 0; }
.setup-card label small { margin-left: 5px; color: var(--signal); font-size: 10px; }
.setup-card input { width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; outline: 0; background: #fff; }
.setup-card input:focus { border-color: var(--forest); box-shadow: 0 0 0 4px rgba(23, 58, 51, 0.08); }
.setup-help { margin: 14px 0 0; color: var(--ink-soft); font-size: 11px; }

.recovery-panel { padding: 28px; border-radius: 26px; background: var(--forest); color: white; box-shadow: 0 24px 60px rgba(23, 58, 51, 0.28); }
.recovery-panel > span { color: var(--mint); font-size: 10px; font-weight: 900; letter-spacing: 0.16em; }
.recovery-panel h2 { margin: 9px 0 20px; font-size: 24px; }
.recovery-panel code { display: block; padding: 15px; overflow-wrap: anywhere; border: 1px dashed rgba(255, 255, 255, 0.25); border-radius: 13px; background: rgba(255, 255, 255, 0.08); color: var(--mint); font-size: 16px; font-weight: 800; text-align: center; }
.recovery-panel p { color: rgba(255, 255, 255, 0.63); font-size: 12px; line-height: 1.6; }
.recovery-panel a { display: block; margin-top: 20px; padding: 15px; border-radius: 14px; background: var(--mint); color: var(--ink); font-size: 13px; font-weight: 850; text-align: center; text-decoration: none; }

@media (min-width: 560px) {
  body { padding: 24px 0; }
  .app-shell, .manage-shell { min-height: calc(100vh - 48px); border-radius: 34px; box-shadow: 0 30px 100px rgba(23, 58, 51, 0.18); }
  .screen { min-height: calc(100vh - 48px); }
}

@media (max-width: 370px) {
  .screen { padding-inline: 16px; }
  .dashboard-screen { padding-inline: 13px; }
  .hero-card h1 { font-size: 36px; }
  .metric-card { padding: 14px; }
  .metric-card strong { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Brokerage-style account dashboard */
.dashboard-screen { padding: max(18px, env(safe-area-inset-top)) 0 max(34px, env(safe-area-inset-bottom)); background: #f5f6f8; color: #191f28; }
.broker-header, .account-nav, .dashboard-screen > section, .dashboard-screen > .demo-banner, .dashboard-screen > .data-alert, .dashboard-screen > .status-strip, .dashboard-screen > .app-footer { margin-inline: 18px; }
.broker-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 2px 18px; animation: dashboardRise .45s ease both; }
.broker-brand, .broker-brand > div, .header-actions, .account-nav, .overview-heading, .market-state, .account-return, .section-heading, .quote-heading, .stock-identity, .quote-price-row, .chart-toolbar, .chart-axis, .fx-rate, .fx-meta { display: flex; align-items: center; }
.broker-brand { gap: 11px; }
.broker-brand > div { align-items: flex-start; flex-direction: column; gap: 2px; }
.broker-brand strong { font-size: 19px; font-weight: 900; letter-spacing: -.055em; }
.broker-brand small { color: #8b95a1; font-size: 8px; font-weight: 850; letter-spacing: .15em; }
.broker-symbol { display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 36px; height: 36px; padding: 9px; border-radius: 12px; background: #191f28; box-shadow: 0 8px 22px rgba(25,31,40,.18); }
.broker-symbol i { width: 3px; border-radius: 3px; background: #fff; }
.broker-symbol i:nth-child(1) { height: 8px; opacity: .55; }
.broker-symbol i:nth-child(2) { height: 16px; }
.broker-symbol i:nth-child(3) { height: 12px; opacity: .78; }
.header-actions { gap: 7px; }
.session-badge { display: inline-flex; align-items: center; gap: 5px; padding: 8px 9px; border-radius: 11px; background: #fff; color: #4e5968; box-shadow: 0 1px 0 rgba(0,0,0,.04); font-size: 10px; font-variant-numeric: tabular-nums; }
.session-badge i, .market-state i, .live-indicator i { width: 6px; height: 6px; border-radius: 50%; background: #16a36a; box-shadow: 0 0 0 4px rgba(22,163,106,.1); animation: livePulse 1.8s ease-in-out infinite; }
.logout-button { border: 0; border-radius: 11px; padding: 8px 9px; background: transparent; color: #8b95a1; font-size: 10px; cursor: pointer; }
.account-nav { gap: 22px; height: 42px; margin-bottom: 12px; border-bottom: 1px solid #e5e8eb; }
.account-nav button, .account-nav a { height: 42px; padding: 12px 0 0; border: 0; outline: 0; background: transparent; color: #8b95a1; font: inherit; font-size: 14px; font-weight: 800; text-decoration: none; cursor: pointer; }
.account-nav button:focus-visible { border-radius: 6px; box-shadow: inset 0 0 0 2px rgba(49,130,246,.32); }
.account-nav .active { position: relative; color: #191f28; }
.account-nav .active::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px; background: #191f28; }
.account-nav em { margin-left: auto; padding: 5px 8px; border-radius: 8px; background: #e8f3ff; color: #3182f6; font-size: 9px; font-style: normal; font-weight: 850; }

.account-overview { position: relative; overflow: hidden; padding: 25px 22px 20px; border-radius: 26px; background: radial-gradient(circle at 92% 5%, rgba(49,130,246,.34), transparent 32%), linear-gradient(145deg, #202938, #111722 68%); color: #fff; box-shadow: 0 20px 48px rgba(17,24,39,.19); animation: dashboardRise .5s .05s ease both; }
.account-overview::after { content: ""; position: absolute; right: -42px; bottom: -74px; width: 190px; height: 190px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.overview-heading { position: relative; z-index: 1; justify-content: space-between; gap: 14px; }
.overview-heading > div { display: grid; gap: 4px; }
.overview-heading span { color: rgba(255,255,255,.72); font-size: 12px; font-weight: 750; }
.overview-heading small { color: rgba(255,255,255,.4); font-size: 9px; }
.market-state { gap: 6px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.07); }
.market-state b { font-size: 9px; }
.market-state i.closed { background: #8892a0; box-shadow: none; animation: none; }
.account-overview h1 { position: relative; z-index: 1; margin: 26px 0 12px; font-size: clamp(31px, 9vw, 43px); line-height: 1; letter-spacing: -.065em; font-variant-numeric: tabular-nums; }
.account-return { position: relative; z-index: 1; gap: 7px; min-height: 24px; font-size: 11px; }
.account-return span { color: rgba(255,255,255,.47); }
.account-return strong { margin-left: auto; }
.account-return b { padding: 4px 7px; border-radius: 7px; }
.account-return.positive strong, .account-return.positive b { color: #ff8b8e; }
.account-return.negative strong, .account-return.negative b { color: #7db1ff; }
.account-return.positive b { background: rgba(229,72,77,.14); }
.account-return.negative b { background: rgba(55,123,234,.14); }
.asset-composition { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 20px; overflow: hidden; border-radius: 15px; background: rgba(255,255,255,.08); }
.asset-composition div { padding: 13px 14px; background: rgba(255,255,255,.035); }
.asset-composition span { display: block; margin-bottom: 6px; color: rgba(255,255,255,.42); font-size: 9px; }
.asset-composition strong { font-size: 13px; font-variant-numeric: tabular-nums; }

.cash-section, .quote-card, .position-section, .fx-section { margin-top: 14px; padding: 21px 19px; border: 1px solid #edf0f2; border-radius: 23px; background: #fff; box-shadow: 0 7px 24px rgba(33,42,56,.045); animation: dashboardRise .5s ease both; }
.cash-section { animation-delay: .09s; }
.quote-card { animation-delay: .13s; }
.position-section { animation-delay: .17s; }
.fx-section { animation-delay: .21s; }
.section-heading { justify-content: space-between; gap: 14px; }
.section-heading > div { display: grid; gap: 3px; }
.section-heading span { color: #b0b8c1; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.section-heading h2 { margin: 0; font-size: 17px; letter-spacing: -.04em; }
.section-heading > small { color: #8b95a1; font-size: 9px; }
.section-heading > strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.cash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; }
.cash-grid article { min-width: 0; padding: 15px; border-radius: 17px; background: #f7f8fa; }
.cash-grid article:first-child { background: #f2f7ff; }
.cash-grid span { display: block; margin-bottom: 10px; color: #6b7684; font-size: 10px; font-weight: 750; }
.cash-grid strong { display: block; overflow-wrap: anywhere; font-size: 17px; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.cash-grid small { display: block; margin-top: 7px; color: #b0b8c1; font-size: 8px; line-height: 1.4; }

.quote-heading { justify-content: space-between; gap: 12px; }
.stock-identity { gap: 10px; }
.stock-symbol { display: grid; width: 38px; height: 38px; place-content: center; border-radius: 13px; background: #f0f4ff; color: #3056d3; font-size: 17px; font-weight: 950; }
.stock-identity > div { display: grid; gap: 3px; }
.stock-identity strong { font-size: 14px; letter-spacing: -.03em; }
.stock-identity small { color: #8b95a1; font-size: 9px; }
.live-indicator { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 9px; background: #eefaf5; color: #16845a; font-size: 9px; font-weight: 850; }
.quote-price-row { align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 23px; }
.quote-price-row > div:first-child { display: grid; gap: 5px; }
.quote-price-row span { color: #8b95a1; font-size: 10px; }
.quote-price-row #last-price { font-size: 33px; line-height: 1; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.quote-price-row #last-price.price-tick { animation: quoteFlash .65s ease; }
.quote-change { align-items: flex-end; display: grid; gap: 4px; text-align: right; }
.quote-change strong { font-size: 12px; }
.quote-change span { font-size: 11px; font-weight: 800; }
.quote-change.positive strong, .quote-change.positive span { color: #e5484d; }
.quote-change.negative strong, .quote-change.negative span { color: #377bea; }

.chart-toolbar { justify-content: space-between; gap: 12px; margin-top: 27px; padding-top: 17px; border-top: 1px solid #f0f2f4; }
.chart-toolbar > div { display: grid; gap: 3px; }
.chart-toolbar strong { font-size: 12px; }
.chart-toolbar span, .chart-toolbar b { color: #8b95a1; font-size: 8px; font-weight: 700; }
.chart-wrap { position: relative; min-height: 190px; margin-top: 7px; overflow: hidden; }
.chart-wrap svg { display: block; width: 100%; height: auto; min-height: 190px; overflow: visible; }
.chart-wrap svg.chart-hidden { visibility: hidden; }
.chart-guides line { stroke: #edf0f2; stroke-width: 1; stroke-dasharray: 4 5; }
.chart-line { fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-area { stroke: none; }
.chart-dot { stroke: #fff; stroke-width: 3; vector-effect: non-scaling-stroke; }
.chart-empty { position: absolute; inset: 0; display: grid; place-content: center; color: #b0b8c1; font-size: 10px; }
.chart-axis { justify-content: space-between; gap: 8px; margin-top: -2px; color: #b0b8c1; font-size: 8px; }
.chart-axis strong { color: #8b95a1; font-size: 8px; font-weight: 700; }

.position-krw { margin: 5px 0 18px; color: #8b95a1; font-size: 11px; text-align: right; }
.position-list { border-top: 1px solid #f0f2f4; }
.position-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 1px; border-bottom: 1px solid #f0f2f4; }
.position-list span { color: #6b7684; font-size: 11px; }
.position-list strong { max-width: 66%; font-size: 12px; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.profit-ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px; }
.profit-ledger article { padding: 14px; border-radius: 16px; background: #f7f8fa; }
.profit-ledger span, .profit-ledger strong, .profit-ledger b { display: block; }
.profit-ledger span { margin-bottom: 10px; color: #8b95a1; font-size: 9px; }
.profit-ledger strong { font-size: 13px; overflow-wrap: anywhere; }
.profit-ledger b { margin-top: 5px; font-size: 10px; }
.profit-ledger .positive strong, .profit-ledger .positive b { color: #e5484d; }
.profit-ledger .negative strong, .profit-ledger .negative b { color: #377bea; }
.fx-rate { justify-content: space-between; gap: 14px; margin-top: 17px; padding: 15px; border-radius: 16px; background: #f7f8fa; }
.fx-rate span { color: #6b7684; font-size: 10px; }
.fx-rate strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.fx-meta { justify-content: space-between; gap: 14px; padding: 12px 2px 0; }
.fx-meta span { color: #8b95a1; font-size: 9px; }
.fx-meta b { color: #4e5968; font-size: 10px; font-variant-numeric: tabular-nums; }
.basis-disclosure { margin: 15px 0 0; padding: 12px 13px; border-radius: 13px; background: #fff8e7; color: #8a6b25; font-size: 9px; line-height: 1.6; }
.dashboard-screen .status-strip { margin-top: 14px; border: 1px solid #edf0f2; background: #fff; color: #8b95a1; }
.dashboard-screen .status-strip span { color: #4e5968; }
.dashboard-screen .app-footer { color: #8b95a1; }
.dashboard-screen .app-footer button { color: #3182f6; }

@keyframes dashboardRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes livePulse { 50% { box-shadow: 0 0 0 7px rgba(22,163,106,0); } }

@media (max-width: 370px) {
  .broker-header, .account-nav, .dashboard-screen > section, .dashboard-screen > .demo-banner, .dashboard-screen > .data-alert, .dashboard-screen > .status-strip, .dashboard-screen > .app-footer { margin-inline: 13px; }
  .account-overview { padding-inline: 18px; }
  .account-overview h1 { font-size: 30px; }
  .cash-section, .quote-card, .position-section, .fx-section { padding-inline: 16px; }
  .quote-price-row #last-price { font-size: 28px; }
  .chart-axis strong { display: none; }
}

/* Device and login labels */
.device-actions { display: flex !important; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.device-row button.rename-button, .login-event button.rename-button { border: 1px solid var(--line); background: #fff; color: var(--ink-soft); }
.device-row button.revoke-button { background: #fff0ed; color: #9e382b; }
.device-row button.delete-device-button { border: 1px solid #f0d7d2; background: transparent; color: #9e382b; }
.login-event-actions { display: flex !important; flex: 0 0 auto; align-items: center; gap: 6px; }
.login-event-actions button { border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px; background: #fff; color: var(--ink-soft); font-size: 10px; font-weight: 800; cursor: pointer; }
.label-dialog { width: min(calc(100% - 32px), 420px); padding: 0; border: 0; border-radius: 24px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 90px rgba(23, 58, 51, .28); }
.label-dialog::backdrop { background: rgba(17, 24, 39, .48); backdrop-filter: blur(3px); }
.label-dialog form { padding: 24px; }
.label-dialog h2 { margin: 0; font-size: 20px; letter-spacing: -.04em; }
.label-dialog p { margin: 8px 0 18px; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
.label-dialog input { width: 100%; height: 50px; padding: 0 14px; border: 1px solid var(--line); border-radius: 13px; background: #fff; outline: 0; }
.label-dialog input:focus { border-color: var(--forest); box-shadow: 0 0 0 4px rgba(23, 58, 51, .08); }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.dialog-actions button { height: 45px; border: 0; border-radius: 12px; background: var(--forest); color: #fff; font-size: 12px; font-weight: 850; cursor: pointer; }
.dialog-actions button:first-child { border: 1px solid var(--line); background: #fff; color: var(--ink-soft); }

/* Bitcoin treasury and additional holdings */
.other-positions-section { margin-top: 14px; padding: 21px 19px; border: 1px solid #edf0f2; border-radius: 23px; background: #fff; box-shadow: 0 7px 24px rgba(33,42,56,.045); animation: dashboardRise .5s .19s ease both; }
.other-positions-list { display: grid; gap: 8px; margin-top: 16px; }
.other-position-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px; border-radius: 16px; background: #f7f8fa; }
.other-position-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.other-position-identity > span { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-content: center; border-radius: 12px; background: #e8f3ff; color: #3182f6; font-size: 11px; font-weight: 950; }
.other-position-identity > div, .other-position-values { display: grid; gap: 4px; min-width: 0; }
.other-position-identity strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.other-position-identity small, .other-position-values small { color: #8b95a1; font-size: 9px; }
.other-position-values { flex: 0 0 auto; justify-items: end; }
.other-position-values strong { font-size: 12px; font-variant-numeric: tabular-nums; }
.other-position-values small.positive { color: #e5484d; }
.other-position-values small.negative { color: #377bea; }

.btc-dashboard { display: grid; gap: 14px; animation: dashboardRise .45s ease both; }
.btc-dashboard > article { border: 1px solid #edf0f2; border-radius: 23px; background: #fff; box-shadow: 0 7px 24px rgba(33,42,56,.045); }
.btc-hero { position: relative; overflow: hidden; padding: 24px 21px 20px; background: radial-gradient(circle at 90% 3%, rgba(247,147,26,.32), transparent 35%), linear-gradient(145deg, #20242d, #101217 70%) !important; color: #fff; box-shadow: 0 22px 52px rgba(17,18,22,.22) !important; }
.btc-hero::after { content: "₿"; position: absolute; right: -9px; bottom: -54px; color: rgba(255,255,255,.045); font-family: Georgia, serif; font-size: 190px; font-weight: 900; transform: rotate(9deg); }
.btc-hero-heading, .btc-reserve-row, .verification-badge, .source-times p { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.btc-hero-heading { position: relative; z-index: 1; }
.btc-hero-heading > div { display: grid; gap: 4px; }
.btc-hero-heading span { color: #f6a443; font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.btc-hero-heading h2 { margin: 0; font-size: 17px; letter-spacing: -.04em; }
.btc-live { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 10px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.72) !important; letter-spacing: 0 !important; }
.btc-live i { width: 6px; height: 6px; border-radius: 50%; background: #f7931a; box-shadow: 0 0 0 5px rgba(247,147,26,.12); animation: livePulse 1.8s ease infinite; }
.btc-holdings-value { position: relative; z-index: 1; display: grid; gap: 7px; margin-top: 31px; }
.btc-holdings-value span { color: rgba(255,255,255,.55); font-size: 10px; }
.btc-holdings-value strong { font-family: Georgia, "Times New Roman", serif; font-size: clamp(35px, 10vw, 47px); line-height: 1; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.btc-holdings-value small { color: rgba(255,255,255,.38); font-size: 9px; }
.btc-reserve-row { position: relative; z-index: 1; margin-top: 23px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.1); }
.btc-reserve-row div { display: grid; gap: 5px; }
.btc-reserve-row div:last-child { justify-items: end; }
.btc-reserve-row span { color: rgba(255,255,255,.4); font-size: 9px; }
.btc-reserve-row strong { font-size: 14px; font-variant-numeric: tabular-nums; }

.premium-section, .bps-section, .verification-section { padding: 21px 19px; }
.premium-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 17px; }
.premium-card { position: relative; overflow: hidden; padding: 17px 15px; border-radius: 18px; background: #f7f8fa; }
.premium-card.basic { background: #f2f7ff; }
.premium-card.diluted { background: #fff6ea; }
.premium-card span, .premium-card strong, .premium-card small { display: block; }
.premium-card span { color: #6b7684; font-size: 9px; font-weight: 800; }
.premium-card strong { margin-top: 15px; font-size: 28px; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.premium-card.basic strong { color: #3182f6; }
.premium-card.diluted strong { color: #d97706; }
.premium-card small { margin-top: 7px; color: #8b95a1; font-size: 8px; }
.premium-formula { margin: 14px 1px 0; color: #8b95a1; font-size: 8px; line-height: 1.6; }
.bps-list { margin-top: 16px; border-top: 1px solid #f0f2f4; }
.bps-list > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 1px; border-bottom: 1px solid #f0f2f4; }
.bps-list span { color: #6b7684; font-size: 11px; }
.bps-list strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.verification-badge { justify-content: flex-start; padding: 12px 13px; border-radius: 14px; background: #f2f4f6; color: #6b7684; font-size: 10px; font-weight: 800; }
.verification-badge i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #b0b8c1; }
.verification-badge.verified { background: #eefaf5; color: #16845a; }
.verification-badge.verified i { background: #16a36a; box-shadow: 0 0 0 5px rgba(22,163,106,.09); }
.verification-badge.lagging { background: #fff8e7; color: #8a6b25; }
.verification-badge.lagging i { background: #e3a719; }
.source-times { display: grid; gap: 9px; margin-top: 16px; }
.source-times p { margin: 0; padding: 0 2px; }
.source-times span { color: #8b95a1; font-size: 9px; }
.source-times b { color: #4e5968; font-size: 10px; font-variant-numeric: tabular-nums; }
.metrics-disclosure { margin: 16px 0 0; padding: 12px 13px; border-radius: 13px; background: #f7f8fa; color: #6b7684; font-size: 9px; line-height: 1.65; }

@media (max-width: 370px) {
  .account-nav { gap: 16px; }
  .account-nav button, .account-nav a { font-size: 12px; }
  .premium-grid { grid-template-columns: 1fr; }
  .premium-card strong { margin-top: 9px; }
}

/* Read-only market discovery */
.account-nav { gap: 17px; overflow-x: auto; scrollbar-width: none; }
.account-nav::-webkit-scrollbar { display: none; }
.account-nav button, .account-nav a { flex: 0 0 auto; }
.account-nav em { white-space: nowrap; }
.market-dashboard { display: grid; gap: 14px; animation: dashboardRise .45s ease both; }
.market-dashboard > article { border: 1px solid #edf0f2; border-radius: 23px; background: #fff; box-shadow: 0 7px 24px rgba(33,42,56,.045); }
.market-search-card { position: relative; z-index: 3; padding: 21px 19px 18px; background: radial-gradient(circle at 96% 0, rgba(49,130,246,.12), transparent 38%), #fff !important; }
.market-search-heading, .market-section-heading, .market-switches, .detail-topline, .detail-identity, .detail-price-row, .detail-chart-tabs { display: flex; align-items: center; }
.market-search-heading { justify-content: space-between; gap: 14px; }
.market-search-heading > div, .market-section-heading > div { display: grid; gap: 3px; }
.market-search-heading span, .market-section-heading span { color: #b0b8c1; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.market-search-heading h2, .market-section-heading h2 { margin: 0; font-size: 18px; letter-spacing: -.045em; }
.market-refresh { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 10px; background: #eefaf5; color: #16845a !important; font-size: 9px !important; letter-spacing: 0 !important; }
.market-refresh i { width: 6px; height: 6px; border-radius: 50%; background: #16a36a; box-shadow: 0 0 0 5px rgba(22,163,106,.09); animation: livePulse 1.8s ease infinite; }
.stock-search-form { position: relative; display: flex; gap: 8px; margin-top: 17px; }
.stock-search-form > span { position: absolute; z-index: 1; top: 17px; left: 15px; width: 12px; height: 12px; border: 2px solid #8b95a1; border-radius: 50%; pointer-events: none; }
.stock-search-form > span::after { content: ""; position: absolute; width: 6px; height: 2px; right: -5px; bottom: -3px; border-radius: 2px; background: #8b95a1; transform: rotate(45deg); }
.stock-search-form input { min-width: 0; flex: 1; height: 49px; padding: 0 12px 0 39px; border: 1px solid #edf0f2; border-radius: 15px; outline: 0; background: #f7f8fa; color: #191f28; font-size: 13px; }
.stock-search-form input:focus { border-color: #3182f6; background: #fff; box-shadow: 0 0 0 4px rgba(49,130,246,.08); }
.stock-search-form button { flex: 0 0 auto; padding: 0 15px; border: 0; border-radius: 14px; background: #191f28; color: #fff; font-size: 11px; font-weight: 850; cursor: pointer; }
.stock-search-results { position: absolute; right: 19px; left: 19px; top: 126px; max-height: 286px; overflow-y: auto; padding: 7px; border: 1px solid #e8ebee; border-radius: 17px; background: #fff; box-shadow: 0 20px 50px rgba(33,42,56,.18); }
.search-result { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 11px; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; }
.search-result:hover, .search-result:focus-visible { background: #f7f8fa; outline: 0; }
.search-result div { display: grid; min-width: 0; gap: 3px; }
.search-result strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.search-result small, .search-result > span { color: #8b95a1; font-size: 9px; }
.market-message { min-height: 14px; margin: 8px 2px 0; color: #8b95a1; font-size: 9px; }
.ranking-section, .watchlist-section { padding: 19px; }
.market-switches { justify-content: space-between; gap: 12px; }
.country-switch { display: grid; grid-template-columns: 1fr 1fr; width: 128px; padding: 3px; border-radius: 12px; background: #f2f4f6; }
.country-switch button { height: 34px; border: 0; border-radius: 9px; background: transparent; color: #8b95a1; font-size: 11px; font-weight: 850; cursor: pointer; }
.country-switch button.active { background: #fff; color: #191f28; box-shadow: 0 3px 10px rgba(33,42,56,.08); }
.market-switches > span { color: #b0b8c1; font-size: 8px; }
.ranking-filters { display: flex; gap: 7px; margin-top: 15px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.ranking-filters::-webkit-scrollbar { display: none; }
.ranking-filters button { flex: 0 0 auto; height: 35px; padding: 0 12px; border: 1px solid #edf0f2; border-radius: 18px; background: #fff; color: #6b7684; font-size: 10px; font-weight: 800; cursor: pointer; }
.ranking-filters button.active { border-color: #191f28; background: #191f28; color: #fff; }
.ranking-title { justify-content: space-between; gap: 12px; margin-top: 23px; padding-top: 18px; border-top: 1px solid #f0f2f4; }
.ranking-title small { color: #8b95a1; font-size: 8px; }
.ranking-list, .watchlist-list { display: grid; margin-top: 12px; }
.ranking-row, .watchlist-row { display: grid; width: 100%; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 66px; padding: 8px 2px; border: 0; border-bottom: 1px solid #f0f2f4; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.ranking-row:last-child, .watchlist-row:last-child { border-bottom: 0; }
.ranking-row > b { color: #8b95a1; font-size: 11px; text-align: center; }
.ranking-row:nth-child(-n+3) > b { color: #3182f6; }
.market-stock-name { display: grid; min-width: 0; gap: 4px; }
.market-stock-name strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.market-stock-name small { color: #8b95a1; font-size: 9px; }
.market-stock-price { display: grid; gap: 4px; justify-items: end; }
.market-stock-price strong { font-size: 12px; font-variant-numeric: tabular-nums; }
.market-stock-price small { font-size: 9px; font-weight: 800; }
.market-stock-price small.positive, .detail-price-row .positive { color: #e5484d; }
.market-stock-price small.negative, .detail-price-row .negative { color: #377bea; }
.ranking-empty { margin: 24px 0 12px; color: #b0b8c1; font-size: 10px; text-align: center; }
.watchlist-section .market-section-heading { justify-content: space-between; }
.watchlist-section .market-section-heading > b { display: grid; min-width: 29px; height: 29px; place-content: center; border-radius: 10px; background: #fff6e8; color: #d97706; font-size: 10px; }
.watchlist-row { grid-template-columns: 38px minmax(0,1fr) auto; }
.watchlist-row > b { display: grid; width: 35px; height: 35px; place-content: center; border-radius: 12px; background: #fff6e8; color: #d97706; font-size: 10px; }
.market-detail { padding: 18px 19px 19px; overflow: hidden; }
.detail-topline { justify-content: space-between; }
.detail-topline > span { color: #8b95a1; font-size: 10px; font-weight: 800; }
.detail-topline button { display: grid; width: 35px; height: 35px; place-content: center; border: 1px solid #edf0f2; border-radius: 12px; background: #fff; color: #4e5968; font-size: 23px; cursor: pointer; }
.detail-topline .watchlist-toggle { color: #d97706; font-size: 23px; }
.detail-topline .watchlist-toggle.active { border-color: #fde1b6; background: #fff6e8; }
.detail-identity { gap: 11px; margin-top: 18px; }
.detail-identity > span { display: grid; width: 43px; height: 43px; place-content: center; border-radius: 14px; background: #e8f3ff; color: #3182f6; font-size: 15px; font-weight: 950; }
.detail-identity div { min-width: 0; }
.detail-identity h2 { margin: 0; overflow: hidden; font-size: 17px; letter-spacing: -.045em; text-overflow: ellipsis; white-space: nowrap; }
.detail-identity p { margin: 4px 0 0; color: #8b95a1; font-size: 9px; }
.detail-price-row { align-items: flex-end; justify-content: space-between; gap: 15px; margin-top: 24px; }
.detail-price-row > strong { font-size: 34px; line-height: 1; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.detail-price-row > div { display: grid; justify-items: end; gap: 4px; }
.detail-price-row b { font-size: 11px; }
.detail-price-row span { font-size: 12px; font-weight: 850; }
.detail-chart-tabs { gap: 7px; margin-top: 26px; padding-top: 16px; border-top: 1px solid #f0f2f4; }
.detail-chart-tabs button { height: 30px; padding: 0 11px; border: 0; border-radius: 10px; background: #f2f4f6; color: #8b95a1; font-size: 9px; font-weight: 850; cursor: pointer; }
.detail-chart-tabs button.active { background: #191f28; color: #fff; }
.detail-chart-tabs small { margin-left: auto; color: #8b95a1; font-size: 8px; }
.market-chart-wrap { position: relative; min-height: 190px; margin-top: 8px; overflow: hidden; }
.market-chart-wrap svg { display: block; width: 100%; min-height: 190px; }
.market-chart-wrap svg.chart-hidden { visibility: hidden; }
.detail-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; overflow: hidden; border-radius: 15px; background: #edf0f2; }
.detail-stats div { min-width: 0; padding: 11px 8px; background: #f7f8fa; text-align: center; }
.detail-stats span, .detail-stats strong { display: block; }
.detail-stats span { color: #8b95a1; font-size: 8px; }
.detail-stats strong { margin-top: 5px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.detail-readonly-note { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 11px 12px; border-radius: 13px; background: #eefaf5; color: #16845a; font-size: 8px; line-height: 1.5; }
.detail-readonly-note i { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #16a36a; }

@media (max-width: 390px) {
  .account-nav { gap: 13px; }
  .account-nav button, .account-nav a { font-size: 11px; }
  .account-nav em { display: none; }
  .stock-search-form button { padding-inline: 12px; }
  .detail-price-row > strong { font-size: 30px; }
}