@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --bg-0: #090604;
  --bg-1: #130C07;
  --bg-2: #171008;
  --bg-card: #130E0A;
  --bg-card-2: #1B120B;
  --gold-1: #F4B64A;
  --gold-2: #D99724;
  --gold-3: #B87712;
  --gold-4: #FFD078;
  --gold-5: #E8A839;
  --gold-line: rgba(190, 130, 55, .45);
  --gold-soft: rgba(221, 155, 53, .18);
  --silver-1: #FFFFFF;
  --silver-2: #F4F4F4;
  --silver-3: #D9D9D9;
  --silver-4: #BFC0C2;
  --pos: #14C94C;
  --pos-2: #129D3B;
  --neg: #FF493F;
  --neg-2: #D72D28;
  --text-1: #FFFFFF;
  --text-2: #BFC0C2;
  --text-3: #8C8681;
  --radius-card: 16px;
  --radius-btn: 14px;
  --radius-sm: 11px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --pad: clamp(12px, 3.6vw, 18px);
  --wrap-max: 520px;
  --side-w: 252px;
  --metal-gold: linear-gradient(135deg, #8F570B 0%, #D99626 30%, #FFD071 50%, #CC8420 70%, #754304 100%);
  --metal-silver: linear-gradient(180deg, #FFFFFF 0%, #E7E7E9 38%, #A9ACB1 68%, #6E7175 100%);
  --card-surface: linear-gradient(145deg, rgba(33, 22, 13, .96), rgba(15, 10, 7, .98));
  --glow-gold: 0 0 8px rgba(221, 155, 53, .18), inset 0 0 6px rgba(255, 255, 255, .025);
  --shadow-btn: 0 5px 15px rgba(0, 0, 0, .35);
  --ease: cubic-bezier(.22, .78, .28, 1);
}

body[data-theme="light"] {
  --bg-0: #FBF8F3;
  --bg-1: #FFFFFF;
  --bg-2: #F3ECE0;
  --bg-card: #FFFFFF;
  --bg-card-2: #FBF5EA;
  --text-1: #1A120A;
  --text-2: #5B5248;
  --text-3: #8B8378;
  --silver-1: #241a10;
  --silver-3: #4a4038;
  --gold-line: rgba(160, 108, 30, .4);
  --card-surface: linear-gradient(145deg, #FFFFFF, #F7F0E4);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; }

body {
  font-family: Poppins, Montserrat, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg-0);
  color: var(--text-1);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 92px;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 12%, #2A1A0D 0%, #1A1008 30%, #0C0705 62%, #070403 100%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 22% at 12% 20%, rgba(232, 168, 57, .16), transparent 70%),
    radial-gradient(ellipse 60% 20% at 90% 16%, rgba(232, 168, 57, .13), transparent 70%),
    radial-gradient(circle at 50% 6%, rgba(255, 208, 120, .12), transparent 55%);
  animation: auraDrift 14s var(--ease) infinite alternate;
}

body[data-theme="light"]::before { background: radial-gradient(circle at 50% 10%, #FFFDF8 0%, #FBF4E8 45%, #F3EADA 100%); }
body[data-theme="light"]::after { opacity: .5; }

@keyframes auraDrift { 0% { opacity: .75; transform: scale(1); } 100% { opacity: 1; transform: scale(1.06); } }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

.wrap { padding: 0 var(--pad); max-width: var(--wrap-max); margin: 0 auto; }

.page { animation: pageIn .5s var(--ease) both; }
body.page-leave .page { animation: pageOut .22s ease-in both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes pageOut { to { opacity: 0; transform: translateY(-10px) scale(.995); } }

[data-anim] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease) var(--d, 0ms), transform .6s var(--ease) var(--d, 0ms); }
[data-anim].in { opacity: 1; transform: none; }
[data-anim="zoom"] { transform: scale(.94); }
[data-anim="left"] { transform: translateX(-22px); }
[data-anim="right"] { transform: translateX(22px); }

.ic { width: 22px; height: 22px; display: block; }
.ic-diamond { width: 52px; height: 14px; }
.ic-bullion { width: 46px; height: 34px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55)); }
.ic-rupee { width: 42px; height: 42px; }
.flip { transform: rotate(180deg); }

.ic-bell .ic-swing { transform-origin: 12px 4px; animation: swing 3.4s var(--ease) infinite; }
@keyframes swing { 0%, 62%, 100% { transform: rotate(0); } 68% { transform: rotate(11deg); } 74% { transform: rotate(-9deg); } 80% { transform: rotate(6deg); } 86% { transform: rotate(-4deg); } }

.ic-bars .bb { transform-origin: bottom; animation: grow 1.9s var(--ease) infinite; }
.ic-bars .b2 { animation-delay: .18s; }
.ic-bars .b3 { animation-delay: .36s; }
@keyframes grow { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }

.ic-trade .ic-up { animation: nudgeUp 2s var(--ease) infinite; }
.ic-trade .ic-down { animation: nudgeDown 2s var(--ease) infinite; }
@keyframes nudgeUp { 0%, 100% { transform: translateY(1.4px); } 50% { transform: translateY(-1.4px); } }
@keyframes nudgeDown { 0%, 100% { transform: translateY(-1.4px); } 50% { transform: translateY(1.4px); } }

.ic-clock .ic-hand { transform-origin: 12px 12px; animation: tick 8s steps(8) infinite; }
@keyframes tick { to { transform: rotate(360deg); } }

.ic-chat .dt, .ic-calc .dt { animation: blink 1.5s ease-in-out infinite; }
.dt.d2 { animation-delay: .2s; }
.dt.d3 { animation-delay: .4s; }
@keyframes blink { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-1.2px); } }

.ic-home { animation: bob 3s var(--ease) infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }

.ic-phone { animation: ring 3.2s var(--ease) infinite; }
@keyframes ring { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-11deg); } 82% { transform: rotate(9deg); } 88% { transform: rotate(-6deg); } }

.ic-wa { animation: pop 2.6s var(--ease) infinite; }
@keyframes pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.ic-trend .ic-draw, .ic-shield .ic-draw, .ic-back .ic-draw { stroke-dasharray: 26; animation: draw 2.6s var(--ease) infinite; }
@keyframes draw { 0% { stroke-dashoffset: 26; } 45%, 100% { stroke-dashoffset: 0; } }

.ic-gauge .ic-needle { transform-origin: 12px 16.5px; animation: sweep 3.4s var(--ease) infinite alternate; }
@keyframes sweep { from { transform: rotate(-42deg); } to { transform: rotate(46deg); } }

.ic-list .lr, .ic-share .lr { stroke-dasharray: 20; animation: draw2 2.4s var(--ease) infinite; }
.lr.l2 { animation-delay: .14s; }
.lr.l3 { animation-delay: .28s; }
@keyframes draw2 { 0% { stroke-dashoffset: 20; opacity: .3; } 40%, 100% { stroke-dashoffset: 0; opacity: 1; } }

.ic-pulse { animation: pulseDot 1.8s ease-in-out infinite; }
@keyframes pulseDot { 0%, 100% { opacity: .4; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }

.ic-roll { animation: rollw 2.4s linear infinite; transform-origin: center; }
@keyframes rollw { to { transform: rotate(360deg); } }

.ic-scale .ic-tilt { transform-origin: 12px 8px; animation: tilt 3.4s var(--ease) infinite alternate; }
@keyframes tilt { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

.ic-theme .ic-rays { transform-origin: center; animation: rollw 9s linear infinite; }
.ic-cart .ic-roll { animation: rollw 3s linear infinite; }
.ic-truck .ic-roll { animation: rollw 1.6s linear infinite; }
.ic-spin-hover:active { animation: rollw .6s linear; }
.ic-trash .ic-lid { transform-origin: 12px 7px; animation: lid 3s var(--ease) infinite; }
@keyframes lid { 0%, 70%, 100% { transform: rotate(0) translateY(0); } 80% { transform: rotate(-14deg) translateY(-1px); } }

.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: max(env(safe-area-inset-top), 6px) var(--pad) 8px;
  min-height: 50px;
  backdrop-filter: blur(9px);
  background: linear-gradient(180deg, rgba(9, 6, 4, .92), rgba(9, 6, 4, .28));
  animation: dropIn .55s var(--ease) both;
}
body[data-theme="light"] .app-header { background: linear-gradient(180deg, rgba(255, 253, 248, .95), rgba(255, 253, 248, .3)); }
@keyframes dropIn { from { opacity: 0; transform: translateY(-16px); } }

/* padding sized so the hit area reaches 44px without changing the icon */
.hdr-btn { color: var(--gold-5); padding: 9px; border-radius: 12px; transition: transform .3s var(--ease), background .3s; }
.hdr-btn:active { transform: scale(.9); background: rgba(232, 168, 57, .12); }
.hdr-btn .ic { width: 26px; height: 26px; }
.burger .ml { stroke-width: 2.2; transition: transform .35s var(--ease), opacity .25s; transform-origin: center; }
.burger.open .ml1 { transform: translateY(5px) rotate(45deg); }
.burger.open .ml2 { opacity: 0; transform: scaleX(.2); }
.burger.open .ml3 { transform: translateY(-5px) rotate(-45deg); }
.bellbtn { position: relative; }
.bell-dot { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 7px var(--pos); animation: pulseDot 1.6s infinite; }

.hdr-title {
  flex: 1;
  margin: 0;
  font-size: clamp(13px, 4vw, 16px);
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-align: center;
  background: var(--metal-silver);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body[data-theme="light"] .hdr-title { background: linear-gradient(180deg, #3A2A16, #7A5A22); -webkit-background-clip: text; background-clip: text; }
.hdr-title-hero { flex: 1; }
/* brand name in the header bar: redundant on phones (the hero wordmark is
   right below it), useful on desktop where the hero scrolls out of view */
.hdr-brand { display: none; }

.back-fab { position: absolute; left: var(--pad); bottom: -34px; z-index: 6; color: var(--gold-5); background: rgba(19, 14, 10, .8); border: 1px solid var(--gold-line); border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; }

.page-logo { width: min(62%, 250px); margin: 4px auto 16px; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .6)); animation: floatY 6s var(--ease) infinite; }
body[data-theme="light"] .page-logo, body[data-theme="light"] .drawer-logo { filter: drop-shadow(0 4px 10px rgba(120, 90, 40, .35)); }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.hero { text-align: center; padding: 4px 0 8px; position: relative; }
.chain { width: 52px; height: 124px; margin: 0 auto 2px; overflow: visible; filter: drop-shadow(0 0 7px rgba(255, 196, 96, .55)); }
.chain .bead { fill: url(#beadGrad); animation: beadGlow 2.6s ease-in-out infinite; }
@keyframes beadGlow { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.chain .strand { animation: strandFloat 7s var(--ease) infinite alternate; transform-origin: center; }
.chain .strand.s2 { animation-delay: -3.5s; }
@keyframes strandFloat { from { transform: translateY(-2px) rotate(-1.2deg); } to { transform: translateY(2px) rotate(1.2deg); } }

.spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #FFF3D6; box-shadow: 0 0 10px 3px rgba(255, 214, 130, .8); opacity: 0; animation: twinkle 4.5s ease-in-out infinite; }
.spark.k1 { top: 34%; left: 32%; animation-delay: .2s; }
.spark.k2 { top: 22%; right: 30%; animation-delay: 1.6s; }
.spark.k3 { top: 52%; right: 22%; animation-delay: 2.9s; }
.spark.k4 { top: 60%; left: 20%; animation-delay: 3.6s; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 45% { opacity: 1; transform: scale(1.25); } }

.wordmark {
  margin: 0;
  font-family: Montserrat, Poppins, sans-serif;
  font-size: clamp(42px, 14.2vw, 64px);
  font-weight: 500;
  letter-spacing: clamp(2px, 1.1vw, 6px);
  line-height: .96;
  text-transform: uppercase;
  background: linear-gradient(178deg, #FFFFFF 2%, #FBFBFC 20%, #DFE1E4 40%, #A5A9AE 58%, #F2F3F5 78%, #C4C7CB 100%);
  background-size: 100% 130%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .75));
  animation: sheen 7s var(--ease) infinite;
}
@keyframes sheen { 0%, 100% { background-position: 0 12%; } 50% { background-position: 0 88%; } }

.tagline { margin: 2px 0 0; font-size: clamp(11px, 3.5vw, 15px); font-weight: 500; letter-spacing: .2px; color: var(--gold-5); }

.divider { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 5px auto 0; width: min(72%, 280px); color: var(--gold-3); }
.divider i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(217, 151, 36, .75), transparent); }
.divider .ic-diamond { width: 34px; }

.ticker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--sp-4);
  padding: 8px 10px;
  height: 44px;
  border: 1.2px solid rgba(232, 168, 57, .75);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(28, 18, 10, .9), rgba(10, 7, 5, .95));
  box-shadow: var(--glow-gold), 0 6px 18px rgba(0, 0, 0, .5);
  overflow: hidden;
  position: relative;
}
.ticker::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 214, 130, .1) 50%, transparent 80%); transform: translateX(-100%); animation: shine 5s var(--ease) infinite; }
@keyframes shine { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
.ticker > .tk-ic { color: var(--gold-1); flex: 0 0 auto; }
.ticker > .tk-ic .ic { width: 20px; height: 20px; }
.tk-label { flex: 0 0 auto; font-size: clamp(7.5px, 2.3vw, 10px); font-weight: 600; letter-spacing: .5px; color: var(--gold-5); }
.tk-feed { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.tk-track { display: flex; align-items: center; gap: 12px; white-space: nowrap; animation: slideFeed 30s linear infinite; }
@keyframes slideFeed { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tk-item { display: inline-flex; align-items: center; gap: 4px; font-size: clamp(8.5px, 2.6vw, 11px); }
.tk-item b { font-weight: 500; color: var(--silver-2); }
.tk-item .v { font-weight: 600; }
.tk-sep { color: var(--text-3); }
.badge-live { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 6px; background: linear-gradient(180deg, #1BB84A, #12873A); color: #fff; font-size: 8.5px; font-weight: 700; letter-spacing: .8px; box-shadow: 0 0 9px rgba(26, 203, 82, .5); }
.live-dot { width: 4px; height: 4px; border-radius: 50%; background: #fff; animation: pulseDot 1.2s infinite; }

.summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: var(--sp-4); }
.sc {
  position: relative;
  min-height: 86px;
  padding: 7px 5px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
  transition: transform .35s var(--ease), box-shadow .35s;
}
.sc:active { transform: translateY(-3px) scale(.985); }
.sc::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .16) 48%, transparent 66%); transform: translateX(-120%); animation: shine 6.5s var(--ease) infinite; }
.sc-gold { background: linear-gradient(135deg, #A66813 0%, #38200A 55%, #130C07 100%); border: 1px solid rgba(244, 182, 74, .85); }
.sc-silver { background: linear-gradient(135deg, #777 0%, #424242 45%, #242424 100%); border: 1px solid rgba(200, 200, 205, .5); }
.sc-inr { background: linear-gradient(150deg, #F2E6CD 0%, #E9D8BC 45%, #D9C6A6 100%); border: 1px solid rgba(160, 116, 40, .45); color: #2A1C08; }
.sc-art { flex: 0 0 auto; animation: floatY 5s var(--ease) infinite; }
.sc-art .ic-bullion { width: 30px; height: 23px; }
.sc-art .ic-rupee { width: 27px; height: 27px; }
.sc-inr .sc-art { color: #A9761B; }
.sc-body { min-width: 0; flex: 1; text-align: center; display: grid; gap: 1px; }
.sc-name, .sc-val, .sc-chg { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-name { font-size: clamp(8px, 2.5vw, 10.5px); font-weight: 600; letter-spacing: .2px; color: #fff; }
.sc-inr .sc-name { color: #2A1C08; }
.sc-val { font-size: clamp(10px, 3.1vw, 13.5px); font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.sc-inr .sc-val { color: #1E1406; }
.sc-chg { font-size: clamp(7px, 2.1vw, 9px); font-weight: 500; color: var(--pos); }
.sc-chg.dn { color: var(--neg); }
.sc-inr .sc-chg { color: #34291A; }

.welcome {
  position: relative;
  margin-top: var(--sp-4);
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold-line);
  border-radius: 15px;
  background: radial-gradient(ellipse 70% 120% at 8% 110%, rgba(232, 168, 57, .28), transparent 60%), radial-gradient(ellipse 70% 120% at 92% 110%, rgba(232, 168, 57, .24), transparent 60%), linear-gradient(180deg, #17100A, #0C0705);
  overflow: hidden;
  box-shadow: var(--glow-gold);
}
.welcome p { margin: 0; font-size: clamp(11.5px, 3.7vw, 16px); font-weight: 500; letter-spacing: 1.1px; }
.welcome .w1 { background: var(--metal-silver); -webkit-background-clip: text; background-clip: text; color: transparent; }
.welcome .w2 { font-weight: 700; background: var(--metal-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.welcome i.p { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #FFD98A; box-shadow: 0 0 8px 2px rgba(255, 200, 110, .7); animation: rise 5.5s linear infinite; }
.welcome i.p:nth-child(1) { left: 8%; bottom: -6px; animation-delay: 0s; }
.welcome i.p:nth-child(2) { left: 18%; bottom: -6px; animation-delay: 1.1s; }
.welcome i.p:nth-child(3) { right: 12%; bottom: -6px; animation-delay: .6s; }
.welcome i.p:nth-child(4) { right: 24%; bottom: -6px; animation-delay: 2.2s; }
.welcome i.p:nth-child(5) { left: 50%; bottom: -6px; animation-delay: 3.1s; }
@keyframes rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-56px) scale(1.1); opacity: 0; } }

.card {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-card);
  background: var(--card-surface);
  box-shadow: var(--glow-gold), 0 8px 22px rgba(0, 0, 0, .38);
}
.card.tight { padding: 12px 10px; }

.sect-head { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--gold-4); }
.sect-head i { flex: 1; height: 1px; max-width: 74px; background: linear-gradient(90deg, transparent, rgba(217, 151, 36, .7)); }
.sect-head i:last-child { background: linear-gradient(90deg, rgba(217, 151, 36, .7), transparent); }
.sect-head h2 { margin: 0; font-size: clamp(15px, 4.6vw, 20px); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #F0DCB4; }
.sect-head .ic-diamond { color: var(--gold-2); animation: spinSlow 9s linear infinite; }
@keyframes spinSlow { to { transform: rotate(360deg); } }

.prow { display: grid; grid-template-columns: 36% 32% 32%; align-items: center; padding: 12px 0; position: relative; }
.pcol > span, .pname > span { display: block; }
.pcol .hl > span { display: inline; }
.prow + .prow { border-top: 1px solid rgba(255, 255, 255, .12); }
.pname { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pname .ic-bullion { flex: 0 0 auto; width: 36px; height: 27px; animation: floatY 5.5s var(--ease) infinite; }
.pname b { display: block; font-size: clamp(10.5px, 3.3vw, 13.5px); font-weight: 600; color: var(--text-1); line-height: 1.2; word-break: break-word; }
.pname small { font-size: clamp(8px, 2.5vw, 10px); color: var(--text-3); }
.pcol { text-align: center; position: relative; padding: 4px 2px; border-radius: 10px; transition: background-color .45s var(--ease); }
.pcol + .pcol::before { content: ''; position: absolute; left: -1px; top: 12%; height: 76%; width: 1px; background: rgba(255, 255, 255, .1); }
.pcol .lbl { font-size: clamp(7.5px, 2.4vw, 9.5px); font-weight: 500; letter-spacing: .5px; color: var(--silver-4); }
.pcol .val { font-size: clamp(12.5px, 4.2vw, 17px); font-weight: 600; white-space: nowrap; line-height: 1.25; }
.pcol.buy .val { color: var(--pos); }
.pcol.sell .val { color: var(--neg); }
.pcol .hl-lb { font-size: clamp(7px, 2.2vw, 8.5px); letter-spacing: .5px; color: var(--silver-4); margin-top: 2px; }
.pcol .hl { font-size: clamp(8px, 2.6vw, 10.5px); white-space: nowrap; }
.pcol .hl .h { color: var(--pos); }
.pcol .hl .l { color: var(--neg); }
.pcol .hl .s { color: var(--text-3); }

.rate-up { background-color: rgba(20, 201, 76, .22) !important; box-shadow: inset 0 0 0 1px rgba(20, 201, 76, .4); }
.rate-down { background-color: rgba(255, 73, 63, .22) !important; box-shadow: inset 0 0 0 1px rgba(255, 73, 63, .4); }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: var(--sp-5); }
.abtn {
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #fff;
  font-size: clamp(12px, 3.9vw, 16px);
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: var(--shadow-btn);
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--ease);
}
.abtn:active { transform: scale(.965); }
.abtn::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 45%; background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent); }
.abtn .ic { width: 24px; height: 24px; }
.abtn.call { background: linear-gradient(135deg, #8A570D, #D99522, #9F650F); }
.abtn.wa { background: linear-gradient(135deg, #2F741E, #19862D, #176824); }

.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 42; padding: 0 var(--pad) calc(6px + env(safe-area-inset-bottom)); animation: riseIn .55s var(--ease) both .1s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(24px); } }
.bn-inner { max-width: var(--wrap-max); margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--gold-line); border-radius: 22px; background: linear-gradient(180deg, rgba(24, 17, 11, .97), rgba(12, 8, 6, .99)); box-shadow: 0 -6px 22px rgba(0, 0, 0, .55), var(--glow-gold); backdrop-filter: blur(10px); }
body[data-theme="light"] .bn-inner { background: linear-gradient(180deg, #fff, #F7F0E4); }
.nav-item { display: grid; justify-items: center; gap: 3px; padding: 9px 2px 8px; color: var(--silver-3); position: relative; transition: color .3s; }
.nav-ic { width: 34px; height: 30px; display: grid; place-items: center; border-radius: 12px; transition: background .35s var(--ease), transform .3s var(--ease); }
.nav-lb { font-size: clamp(7.5px, 2.4vw, 9.5px); font-weight: 500; letter-spacing: .4px; }
.nav-item.active { color: var(--gold-1); }
.nav-item.active .nav-ic { background: radial-gradient(circle, rgba(232, 168, 57, .2), rgba(232, 168, 57, .05)); box-shadow: 0 0 12px rgba(232, 168, 57, .25); }
.nav-item:active .nav-ic { transform: scale(.88); }
.nav-item.active::after { content: ''; position: absolute; top: 3px; width: 16px; height: 2px; border-radius: 2px; background: var(--gold-1); box-shadow: 0 0 8px var(--gold-1); animation: widen .4s var(--ease) both; }
@keyframes widen { from { width: 0; opacity: 0; } }

.drawer { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(4, 3, 2, .72); opacity: 0; transition: opacity .35s var(--ease); backdrop-filter: blur(3px); }
.drawer-panel { position: absolute; inset: 0 18% 0 0; min-width: 290px; max-width: 400px; display: flex; flex-direction: column; background: linear-gradient(160deg, #1A1109, #0B0705 70%); border-right: 1px solid var(--gold-line); transform: translateX(-102%); transition: transform .42s var(--ease); box-shadow: 14px 0 40px rgba(0, 0, 0, .6); }
body[data-theme="light"] .drawer-panel { background: linear-gradient(160deg, #FFFDF7, #F3EADA); }
.drawer.on { pointer-events: auto; }
.drawer.on .drawer-scrim { opacity: 1; }
.drawer.on .drawer-panel { transform: none; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: max(env(safe-area-inset-top), 10px) 14px 10px; border-bottom: 1px solid rgba(190, 130, 55, .22); }
.drawer-logo { width: 150px; }
.drawer-x { color: var(--gold-5); }
.drawer-user { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid rgba(190, 130, 55, .22); }
.du-ic { color: var(--gold-1); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold-line); }
.drawer-user b { display: block; font-size: 12.5px; }
.drawer-user small { font-size: 9.5px; color: var(--text-3); }
.du-go { margin-left: auto; color: var(--gold-5); }
.drawer-body { flex: 1; overflow-y: auto; padding: 10px 12px 20px; }
.mgroup { margin-bottom: 12px; border: 1px solid rgba(190, 130, 55, .3); border-radius: 14px; padding: 8px; background: rgba(255, 255, 255, .015); }
.mgroup h3 { margin: 2px 0 8px; font-size: 8.5px; letter-spacing: 1.6px; font-weight: 600; color: var(--gold-5); }
/* primary destinations live in the bottom tab bar on phones; the sidebar
   surfaces them instead once the tab bar is hidden (see 1024px breakpoint) */
.mgroup-main { display: none; }
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mi { display: grid; justify-items: center; gap: 4px; padding: 9px 3px; border-radius: 11px; color: var(--silver-3); transition: background .3s, transform .3s var(--ease), color .3s; }
.mi:active { transform: scale(.93); }
.mi.active, .mi:hover { background: rgba(232, 168, 57, .12); color: var(--gold-1); }
.mi-ic { color: var(--gold-5); }
.mi-tx { font-size: 8.2px; text-align: center; line-height: 1.25; letter-spacing: .2px; }
.drawer-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(190, 130, 55, .22); }
.dfa { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; border: 1px solid var(--gold-line); border-radius: 12px; font-size: 10px; font-weight: 600; letter-spacing: 1px; color: var(--gold-4); transition: background .3s, transform .25s; }
.dfa:active { transform: scale(.96); background: rgba(232, 168, 57, .1); }

.marquee { overflow: hidden; background: linear-gradient(90deg, var(--gold-3), var(--gold-1), var(--gold-3)); color: #17100A; height: 22px; display: flex; align-items: center; }
.marquee .mq-track { display: flex; white-space: nowrap; animation: slideFeed 26s linear infinite; font-size: 10px; font-weight: 600; letter-spacing: .3px; }
.marquee .mq-track > span { padding: 0 40px; }
.marquee.top { margin-top: 10px; border-radius: 8px; }

.field { margin-bottom: 14px; position: relative; }
.field > label { display: block; font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--gold-5); margin-bottom: 6px; }
.inp {
  width: 100%;
  padding: 11px 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-1);
  outline: none;
  transition: border-color .3s, box-shadow .3s, background .3s;
}
body[data-theme="light"] .inp { background: #fff; }
.inp::placeholder { color: var(--text-3); }
.inp:focus { border-color: var(--gold-1); box-shadow: 0 0 0 3px rgba(232, 168, 57, .13); }
select.inp { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold-5) 50%), linear-gradient(135deg, var(--gold-5) 50%, transparent 50%); background-position: calc(100% - 17px) 18px, calc(100% - 12px) 18px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
textarea.inp { min-height: 74px; resize: vertical; }
.inp[readonly] { color: var(--text-2); background: rgba(255, 255, 255, .02); }

.btn {
  width: 100%;
  padding: 13px;
  border-radius: var(--radius-btn);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1A1006;
  background: var(--metal-gold);
  box-shadow: var(--shadow-btn);
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--ease), filter .25s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn:active { transform: scale(.97); filter: brightness(1.08); }
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .35) 50%, transparent 75%); transform: translateX(-110%); animation: shine 4.5s var(--ease) infinite; }
.btn.ghost { background: transparent; border: 1px solid var(--gold-line); color: var(--gold-4); }
.btn.ghost::after { display: none; }
.btn.buy { background: linear-gradient(135deg, #16A83F, #1ACB52, #128238); color: #fff; }
.btn.sell { background: linear-gradient(135deg, #C82A24, #FF493F, #A81F1A); color: #fff; }
.btn.dark { background: linear-gradient(135deg, #241A10, #120C07); color: var(--gold-4); border: 1px solid var(--gold-line); }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.seg { display: flex; gap: 6px; padding: 4px; border: 1px solid var(--gold-line); border-radius: 14px; margin-bottom: 14px; }
.seg button { flex: 1; padding: 9px; border-radius: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: 1.1px; color: var(--silver-3); transition: all .35s var(--ease); }
.seg button.on { background: var(--metal-gold); color: #1A1006; box-shadow: 0 3px 10px rgba(0, 0, 0, .4); }

.tabs { display: flex; gap: 6px; margin: 14px 0; }
.tabs button, .tabs a { flex: 1; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--gold-line); font-size: 10px; font-weight: 600; letter-spacing: 1px; color: var(--silver-3); text-align: center; transition: all .35s var(--ease); }
.tabs button.on, .tabs a.on { background: var(--metal-gold); color: #1A1006; transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0, 0, 0, .45); }
.tabs button:active, .tabs a:active { transform: scale(.96); }

.scrip-title { margin: 0 0 12px; text-align: center; font-size: clamp(13px, 4.3vw, 17px); font-weight: 600; letter-spacing: 1.2px; color: var(--gold-4); }
.rate-cell { display: inline-block; padding: 3px 8px; border-radius: 9px; transition: background-color .45s var(--ease); }
.fl { display: block; font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--gold-5); margin-bottom: 6px; }
label.btn { cursor: pointer; }
.kv .v small { display: block; font-size: 8.5px; color: var(--text-3); font-weight: 400; letter-spacing: .4px; }

.rcard { display: block; border: 1.6px solid var(--gold-2); border-radius: 12px; overflow: hidden; margin-bottom: 11px; background: var(--card-surface); box-shadow: 0 4px 14px rgba(99, 99, 99, .2); animation: pageIn .45s var(--ease) both; }
.rcard-h { background: var(--metal-gold); color: #1A1006; padding: 6px 10px; font-size: 11px; font-weight: 700; letter-spacing: .9px; display: flex; justify-content: space-between; gap: 8px; }
.rcard-h span { font-weight: 500; }
.rcard-b { display: grid; grid-template-columns: 1fr 1fr; }
.rcell { padding: 9px 8px; text-align: center; border-radius: 10px; transition: background-color .45s var(--ease); }
.rcell > span { display: block; }
.rcell + .rcell { border-left: 1px solid rgba(255, 255, 255, .1); }
.rcell .lbl { font-size: 8.5px; letter-spacing: .8px; color: var(--silver-4); }
.rcell .val { font-size: clamp(15px, 5.4vw, 22px); font-weight: 600; white-space: nowrap; }
.rcell.bid .val { color: var(--pos); }
.rcell.ask .val { color: var(--neg); }
.rcard-f { display: grid; grid-template-columns: 1fr 1fr; padding: 5px 10px 8px; font-size: 9px; letter-spacing: .5px; color: var(--silver-4); text-align: center; }
.rcard-f b { font-weight: 600; }
.rcard-f > span:first-child b { color: var(--pos); }
.rcard-f > span:last-child b { color: var(--neg); }
.rcard-f .h { color: var(--pos); }
.rcard-f .l { color: var(--neg); }

.trow { border-radius: 13px; padding: 10px 12px; margin-bottom: 10px; color: #fff; box-shadow: 0 5px 14px rgba(0, 0, 0, .35); animation: pageIn .45s var(--ease) both; }
.trow.b { background: linear-gradient(135deg, #14406E, #0D2A49); border: 1px solid rgba(80, 150, 220, .4); }
.trow.s { background: linear-gradient(135deg, #7A1F1B, #4A1210); border: 1px solid rgba(220, 90, 80, .4); }
.trow-1 { display: grid; grid-template-columns: 1.5fr .6fr .8fr 1fr; gap: 6px; font-size: 10.5px; font-weight: 600; align-items: center; }
.trow-2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 9px; opacity: .9; }
.trow-2 .acts { display: flex; align-items: center; gap: 10px; }
.chip { display: inline-block; padding: 2px 7px; border-radius: 20px; font-size: 8px; font-weight: 700; letter-spacing: .6px; background: rgba(255, 255, 255, .2); }
.tds-btn { padding: 5px 9px; border-radius: 9px; background: #f6ae2d; color: #1A1006; font-size: 8.5px; font-weight: 700; letter-spacing: .5px; }
.ck { width: 17px; height: 17px; accent-color: var(--gold-1); }

.kv { display: flex; justify-content: space-between; gap: 10px; padding: 10px 2px; border-bottom: 1px dashed rgba(190, 130, 55, .3); font-size: 11.5px; }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--gold-5); text-transform: uppercase; letter-spacing: .8px; font-size: 9.5px; align-self: center; }
.kv .v { font-weight: 600; text-align: right; }

.news-item { padding: 12px 0; border-bottom: 1px solid rgba(190, 130, 55, .22); animation: pageIn .45s var(--ease) both; }
.news-item h3 { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.news-item time { font-size: 9.5px; color: #808f96; }

.rich { font-size: 12px; line-height: 1.75; color: var(--text-2); }
.rich img { border-radius: 12px; margin: 8px 0; }
.rich table { width: 100%; border-collapse: collapse; }
.rich td, .rich th { padding: 7px; border: 1px solid rgba(190, 130, 55, .25); font-size: 11px; }
.rich a { color: var(--gold-1); }

.empty-state { text-align: center; padding: 40px 10px; color: var(--text-3); }
.empty-ring { width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%; border: 2px dashed var(--gold-line); animation: spinSlow 8s linear infinite; }
.empty-state p { font-size: 11.5px; letter-spacing: .5px; }

.spinner-wrap { position: fixed; inset: 0; z-index: 80; display: none; place-items: center; background: rgba(6, 4, 3, .55); backdrop-filter: blur(2px); }
.spinner-wrap.on { display: grid; }
.spinner { display: flex; gap: 6px; }
.spinner span { width: 9px; height: 9px; border-radius: 50%; background: var(--gold-1); animation: bounceDot 1s var(--ease) infinite; }
.spinner span:nth-child(2) { animation-delay: .13s; }
.spinner span:nth-child(3) { animation-delay: .26s; }
@keyframes bounceDot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-9px); opacity: 1; } }

.toast-host { position: fixed; left: 0; right: 0; bottom: 96px; z-index: 90; display: grid; gap: 8px; padding: 0 var(--pad); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 13px; border: 1px solid var(--gold-line); background: rgba(22, 15, 10, .97); color: var(--text-1); font-size: 11.5px; box-shadow: 0 10px 26px rgba(0, 0, 0, .5); animation: toastIn .35s var(--ease) both; }
.toast span { flex: 1; }
.toast-x { color: var(--text-3); font-size: 17px; line-height: 1; }
.toast-ok { border-color: rgba(20, 201, 76, .6); }
.toast-err { border-color: rgba(255, 73, 63, .6); }
.toast.out { animation: toastOut .3s ease-in both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px) scale(.97); } }

.snack { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding: 9px 11px; border: 1px solid var(--gold-line); border-radius: 13px; background: rgba(22, 15, 10, .9); opacity: 0; transform: translateY(-10px); transition: all .4s var(--ease); }
.snack.in { opacity: 1; transform: none; }
.snack p { margin: 0; flex: 1; font-size: 10.5px; color: var(--text-2); line-height: 1.5; }
.snack-ic { color: var(--gold-1); }
.snack-x { color: var(--text-3); }

.modal { position: fixed; inset: 0; z-index: 95; display: none; place-items: center; padding: 24px; background: rgba(5, 3, 2, .78); }
.modal.on { display: grid; }
.modal-card { width: 100%; max-width: 330px; padding: 20px; border-radius: 18px; background: var(--card-surface); border: 1px solid var(--gold-line); text-align: center; animation: pageIn .4s var(--ease) both; }
.modal-card h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: 1.4px; color: var(--gold-4); }
.modal-card p { margin: 0 0 16px; font-size: 11.5px; color: var(--text-2); line-height: 1.6; }
.modal-act { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.modal-act:only-child, .modal-act > :only-child { grid-column: 1 / -1; }
.mbtn { padding: 11px; border-radius: 11px; font-size: 10.5px; font-weight: 700; letter-spacing: 1px; }
.mbtn.gold { background: var(--metal-gold); color: #1A1006; }
.mbtn.ghost { border: 1px solid var(--gold-line); color: var(--gold-4); }

.offline-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 88; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(90deg, #7A1F1B, #C82A24); color: #fff; font-size: 11px; }
.offline-bar button { padding: 6px 12px; border-radius: 9px; background: rgba(255, 255, 255, .2); color: #fff; font-size: 10px; font-weight: 700; }

.gauge-wrap { display: grid; place-items: center; margin: 6px 0 14px; }
.gauge { position: relative; width: 128px; height: 128px; }
.gauge svg { transform: rotate(-90deg); }
.gauge .bg { stroke: rgba(255, 255, 255, .1); }
.gauge .fg { stroke: url(#ggold); stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease); }
.gauge b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; font-weight: 700; color: var(--gold-4); }

.chart-box { width: 100%; height: 240px; border: 1px solid var(--gold-line); border-radius: 14px; overflow: hidden; background: rgba(0, 0, 0, .25); }

.copyright { text-align: center; font-size: 8.5px; letter-spacing: .6px; color: var(--gold-3); padding: 14px 0 4px; }

.doc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.doc-item { border: 1px dashed var(--gold-line); border-radius: 13px; padding: 9px; text-align: center; }
.doc-item b { display: block; font-size: 8.5px; letter-spacing: .4px; color: var(--gold-5); margin-bottom: 6px; line-height: 1.3; }
.doc-item img { width: 100%; height: 70px; object-fit: cover; border-radius: 9px; background: rgba(255, 255, 255, .05); margin-bottom: 6px; }
.doc-item .btn { padding: 7px; font-size: 8.5px; letter-spacing: .6px; }

fieldset.fs { border: 2px dashed var(--gold-line); border-radius: 14px; padding: 12px; margin: 0 0 14px; }
fieldset.fs > legend { padding: 0 7px; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; color: var(--gold-4); }

.qty-row { display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; align-items: center; }
.qty-row button { height: 42px; border-radius: 12px; border: 1px solid var(--gold-line); color: var(--gold-1); display: grid; place-items: center; transition: transform .2s; }
.qty-row button:active { transform: scale(.9); }

.big-price { text-align: center; padding: 12px; border: 2px solid var(--gold-2); border-radius: 14px; margin-bottom: 14px; display: grid; grid-template-columns: 1fr 1fr; }
.big-price > div { padding: 4px; border-radius: 10px; transition: background-color .45s var(--ease); }
.big-price > div + div { border-left: 1px solid rgba(255, 255, 255, .12); }
.big-price .lbl { font-size: 9px; letter-spacing: 1px; color: var(--silver-4); }
.big-price .v { font-size: clamp(19px, 6.6vw, 27px); font-weight: 700; }
.big-price .bid .v { color: var(--pos); }
.big-price .ask .v { color: var(--neg); }

body[data-theme="light"] .wordmark { background: linear-gradient(178deg, #6E6E73 2%, #3C3C40 30%, #8A8A90 55%, #2E2E32 80%, #6A6A70 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 1px 2px rgba(120, 100, 60, .35)); }
body[data-theme="light"] .sect-head h2 { color: #8A5A12; }
body[data-theme="light"] .tagline { color: #A96E0E; }
body[data-theme="light"] .pcol .lbl, body[data-theme="light"] .pcol .hl-lb, body[data-theme="light"] .rcell .lbl { color: #7A7268; }
body[data-theme="light"] .pname small { color: #8B8378; }
body[data-theme="light"] .nav-item { color: #5B5248; }
body[data-theme="light"] .mi, body[data-theme="light"] .drawer-user b { color: #3A3229; }
body[data-theme="light"] .seg button, body[data-theme="light"] .tabs button, body[data-theme="light"] .tabs a { color: #5B5248; }
body[data-theme="light"] .rate-up { background-color: rgba(20, 201, 76, .18) !important; }
body[data-theme="light"] .rate-down { background-color: rgba(255, 73, 63, .16) !important; }
body[data-theme="light"] .card { box-shadow: 0 6px 18px rgba(150, 120, 70, .16); }

/* ==========================================================================
   RESPONSIVE LAYER
   Everything above is the mobile-first base and is what phones still get.
   The rules below progressively widen the single 520px column and, from
   1024px up, rebuild the phone chrome (header + off-canvas drawer + bottom
   tab bar) into a desktop layout: permanent sidebar + content header.
   ========================================================================== */

/* --- helpers used by JS-rendered lists and form groups -------------------- */

.list-grid { display: grid; gap: 10px; }
.list-grid > .trow, .list-grid > .rcard, .list-grid > .news-item { margin-bottom: 0; }
.list-grid > .empty-state, .list-grid > .btn { grid-column: 1 / -1; }

.fgrid { display: grid; gap: 0 14px; align-items: start; }
.fgrid > .full { grid-column: 1 / -1; }

/* remote HTML (ticker / ASMX endpoints) can contain arbitrarily wide tables */
.rich { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rich img { height: auto; }

/* the base sheet only styles :active, which leaves keyboard users with no
   visible focus at all */
:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 2px; }
.btn:focus-visible, .abtn:focus-visible, .mbtn:focus-visible, .dfa:focus-visible { outline-offset: 3px; }

/* the class was already toggled by shell.js but never styled */
body.drawer-open { overflow: hidden; }

/* transitions the hover states below animate */
.prow { transition: background-color .3s var(--ease); }
.rcard, .trow, .news-item { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }

/* --- pointer-based input gets hover feedback ----------------------------- */

@media (hover: hover) and (pointer: fine) {
  .hdr-btn:hover { background: rgba(232, 168, 57, .12); }
  .sc:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .55); }
  .prow:hover { background: rgba(232, 168, 57, .07); }
  .rcard:hover, .trow:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
  .btn:hover, .abtn:hover, .seg button.on:hover, .tabs button.on:hover, .tabs a.on:hover { filter: brightness(1.09); }
  .nav-item:hover { color: var(--gold-4); }
  .tabs button:not(.on):hover, .tabs a:not(.on):hover, .seg button:not(.on):hover { border-color: var(--gold-1); color: var(--gold-4); }
  .dfa:hover, .qty-row button:hover, .mbtn.ghost:hover, .btn.ghost:hover { background: rgba(232, 168, 57, .1); }
  .news-item:hover h3 { color: var(--gold-4); }
  .toast-x:hover, .snack-x:hover, .drawer-x:hover, .du-go:hover { color: var(--gold-1); }
  .offline-bar button:hover { background: rgba(255, 255, 255, .32); }
}

/* --- very small phones: 3-up summary cards get too cramped --------------- */

@media (max-width: 359px) {
  .summary { grid-template-columns: 1fr 1fr; }
  .summary > :nth-child(3) { grid-column: 1 / -1; }
  .prow { grid-template-columns: 40% 30% 30%; }
  .nav-lb { font-size: 7px; letter-spacing: 0; }
  .drawer-panel { min-width: 0; inset: 0 12% 0 0; }
}

/* --- short landscape viewports ------------------------------------------ */

@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding: 0; }
  .chain { height: 74px; }
  .chart-box { height: 190px; }
}

/* --- large phones / small tablets --------------------------------------- */

@media (min-width: 560px) {
  .mgrid { grid-template-columns: repeat(4, 1fr); }
  .doc-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 620px) {
  :root { --wrap-max: 600px; }
}

/* --- tablets: wider column, content starts using the extra width -------- */

@media (min-width: 760px) {
  :root { --wrap-max: 720px; }

  /* auto-fit (not auto-fill) so a group whose only sibling is hidden -
     e.g. #pendWrap on BuySell - still spans the full width */
  .fgrid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .list-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .list-grid > .news-item { border: 1px solid var(--gold-line); border-radius: 12px; padding: 12px 14px; }

  .actions { max-width: 520px; margin-left: auto; margin-right: auto; }
  .chart-box { height: clamp(240px, 38vh, 380px); }
  .gauge { width: 148px; height: 148px; }
  .gauge svg { width: 100%; height: 100%; }
  .gauge b { font-size: 23px; }
  .doc-item img { height: 92px; }
  .modal-card { max-width: 380px; }
}

/* --- desktop: the phone chrome becomes a sidebar + content layout ------- */

@media (min-width: 1024px) {
  :root { --wrap-max: 960px; }

  body {
    display: grid;
    grid-template-columns: var(--side-w) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "side head"
      "side main";
    min-height: 100vh;
    padding-bottom: 0;
  }
  /* the drawer is permanent here, so nothing needs the scroll lock */
  body.drawer-open { overflow: visible; }

  .app-header {
    grid-area: head;
    position: sticky;
    top: 0;
    min-height: 62px;
    padding: 12px var(--pad);
    border-bottom: 1px solid rgba(190, 130, 55, .22);
    /* the phone header fades to transparent, which smudges over the
       longer scrolling content of a desktop page */
    background: linear-gradient(180deg, rgba(9, 6, 4, .97), rgba(9, 6, 4, .93));
  }
  body[data-theme="light"] .app-header { background: linear-gradient(180deg, rgba(255, 253, 248, .98), rgba(255, 253, 248, .94)); }
  #btnMenu { display: none; }
  .hdr-title { text-align: left; font-size: 18px; letter-spacing: 1.8px; }
  .hdr-brand { display: inline; }
  /* the floating back bubble moves into the header bar */
  .back-fab { position: static; order: -1; left: auto; bottom: auto; width: 38px; height: 38px; }

  main.page { grid-area: main; min-width: 0; padding: 6px 0 44px; }
  /* the sidebar already shows the logo, so the per-page one is redundant */
  .page-logo { display: none; }

  #drawer.drawer {
    inset: auto;
    grid-area: side;
    position: sticky;
    top: 0;
    z-index: 30;
    height: 100vh;
    pointer-events: auto;
  }
  .drawer-scrim, .drawer-x { display: none; }
  .drawer-panel {
    position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 100%;
    box-shadow: none;
  }
  .drawer-top { justify-content: center; padding: 16px 14px 12px; }
  .drawer-logo { width: 172px; }
  .drawer-body { padding: 10px 10px 20px; }

  /* icon tiles read better as full-width rows in a narrow sidebar */
  .mgroup { padding: 7px 6px; }
  .mgroup h3 { font-size: 9.5px; padding-left: 4px; }
  .mgroup-main { display: block; }
  .mgrid { grid-template-columns: 1fr; gap: 2px; }
  .mi { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: 10px; padding: 9px 10px; }
  .mi-tx { font-size: 11.5px; text-align: left; }

  .bottom-nav { display: none; }
  .toast-host { left: auto; right: 20px; bottom: 20px; width: min(360px, 90vw); padding: 0; }
  .offline-bar { left: var(--side-w); }
  .modal-card { max-width: 420px; }

  /* home page: product list beside the welcome banner and call to actions */
  /* Row 5 is flexible on purpose. The product card spans rows 4-5, and a
     spanning item's height is shared across auto rows - which would push
     .actions ~340px below .welcome. Items spanning a flexible track are
     excluded from that distribution, so row 4 stays welcome-height and the
     card's height lands in row 5, letting .actions sit directly beneath. */
  .home {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr auto auto;
    column-gap: 18px;
    align-items: start;
  }
  .home > #snackHost { grid-area: 1 / 1 / 2 / -1; }
  .home > .ticker    { grid-area: 2 / 1 / 3 / -1; }
  .home > .summary   { grid-area: 3 / 1 / 4 / -1; }
  .home > .welcome   { grid-area: 4 / 2 / 5 / 3; }
  .home > .card      { grid-area: 4 / 1 / 6 / 2; }
  .home > .actions   { grid-area: 5 / 2 / 6 / 3; }
  .home > .marquee   { grid-area: 6 / 1 / 7 / -1; }
  .home > .copyright { grid-area: 7 / 1 / 8 / -1; }
  /* the tablet cap above uses auto margins, which would make .actions a
     shrink-to-fit grid item instead of filling its column */
  .home > .actions { max-width: none; margin-left: 0; margin-right: 0; }

  .hero { padding: 12px 0 8px; }
  .wordmark { font-size: clamp(56px, 5vw, 82px); }
  .chain { width: 46px; height: 106px; }

  /* the phone type scale bottoms out below 10px, which is unusable here */
  .ticker { height: 52px; }
  .tk-label { font-size: 11px; }
  .tk-item { font-size: 12.5px; }
  .summary { gap: 12px; }
  .sc { min-height: 104px; padding: 10px 8px; }
  .sc-art .ic-bullion { width: 40px; height: 30px; }
  .sc-art .ic-rupee { width: 36px; height: 36px; }
  .sc-name { font-size: 11.5px; }
  .sc-val { font-size: 17px; }
  .sc-chg { font-size: 10px; }
  .welcome { height: 62px; }
  .welcome p { font-size: 18px; }
  .pname .ic-bullion { width: 44px; height: 33px; }
  .pname b { font-size: 15px; }
  .pcol .lbl { font-size: 10.5px; }
  .pcol .hl-lb { font-size: 9.5px; }
  .pcol .hl { font-size: 11px; }
  .abtn { height: 60px; }
  .inp { font-size: 14px; padding: 12px 14px; }
  select.inp { background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px; }
  .btn { font-size: 13px; padding: 14px; }
  .field > label, .fl { font-size: 10.5px; }
  .kv { font-size: 12.5px; }
  .kv .k { font-size: 10.5px; }
  .kv .v small { font-size: 9.5px; }
  .seg button { font-size: 11.5px; padding: 10px; }
  .tabs button, .tabs a { font-size: 11px; padding: 11px 8px; }
  .rcard-h { font-size: 12px; }
  .rcell .lbl { font-size: 9.5px; }
  .rcard-f { font-size: 10px; }
  .trow-1 { font-size: 11.5px; }
  .trow-2 { font-size: 10px; }
  .chip { font-size: 9px; }
  .tds-btn { font-size: 9.5px; }
  .big-price .lbl { font-size: 10px; }
  .news-item h3 { font-size: 13.5px; }
  .rich { font-size: 13px; }
  .rich td, .rich th { font-size: 12px; }
  .empty-state p { font-size: 12.5px; }
  .toast { font-size: 12px; }
  .modal-card h3 { font-size: 14px; }
  .modal-card p { font-size: 12.5px; }
  .dfa { font-size: 10.5px; }
  .marquee { height: 26px; }
  .marquee .mq-track { font-size: 11px; }
  .copyright { font-size: 9.5px; }
  .doc-grid { grid-template-columns: repeat(4, 1fr); }
  .doc-item b { font-size: 9.5px; }
  .doc-item img { height: 110px; }
  .doc-item .btn { font-size: 9.5px; padding: 8px; }
  .chart-box { height: clamp(280px, 44vh, 460px); }
}

/* --- wide desktops ------------------------------------------------------ */

@media (min-width: 1360px) {
  :root { --wrap-max: 1120px; --side-w: 272px; }
  .home { column-gap: 22px; }
  .doc-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (min-width: 1600px) {
  :root { --wrap-max: 1280px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; }
}