:root{
--gold:#B8871D;--gold-deep:#9B6B0D;--gold-hi:#D9A928;--champagne:#F4E8CE;
--bg:#FCFAF5;--card:#FFFDF9;--text:#211D18;--text2:#6F675D;--line:#DFC99C;
--green:#159447;--red:#E52E2E;--nav-off:#777168;
--up-bg:rgba(21,148,71,.16);--down-bg:rgba(229,46,46,.16);
--shadow:0 2px 10px rgba(120,95,40,.09);--shadow-lg:0 10px 30px rgba(120,95,40,.16);
--r:12px;--pad:15px;--gap:13px;
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--serif:"Playfair Display",Georgia,"Times New Roman",serif;
--ease:cubic-bezier(.22,1,.36,1);
--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
}
[data-theme="dark"]{
--gold:#D9A928;--gold-deep:#C08F1F;--gold-hi:#F0C64B;--champagne:#2A2317;
--bg:#0E0D0B;--card:#17150F;--text:#F6F1E6;--text2:#A79E90;--line:#4A3D22;
--up-bg:rgba(21,148,71,.28);--down-bg:rgba(229,46,46,.28);
--shadow:0 2px 10px rgba(0,0,0,.5);--shadow-lg:0 12px 32px rgba(0,0,0,.6);--nav-off:#8B8377;
}
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.45;
-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s;
}
body::before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.055;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='%23B8871D' stroke-width='.9'%3E%3Ccircle cx='32' cy='32' r='8'/%3E%3Cpath d='M32 12c5 7 5 13 0 20-5-7-5-13 0-20zM32 52c-5-7-5-13 0-20 5 7 5 13 0 20zM12 32c7-5 13-5 20 0-7 5-13 5-20 0zM52 32c-7 5-13 5-20 0 7-5 13-5 20 0z'/%3E%3C/g%3E%3C/svg%3E");
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::-webkit-scrollbar{width:0;height:0}

@view-transition{navigation:auto}

.page{position:relative;z-index:1;min-height:100vh;padding-bottom:calc(96px + var(--sab));animation:pageIn .42s var(--ease) both}
.page.leaving{animation:pageOut .2s ease forwards}
@keyframes pageIn{from{opacity:0;transform:translate3d(0,14px,0) scale(.994)}to{opacity:1;transform:none}}
@keyframes pageOut{to{opacity:0;transform:translate3d(0,-10px,0)}}

.wrap{padding:0 var(--pad)}
.rise{animation:rise .55s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes rise{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
.fade{animation:fade .5s ease both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.pressable{transition:transform .18s var(--ease),box-shadow .18s,background .18s}
.pressable:active{transform:scale(.965)}
.appbar{position:sticky;top:0;z-index:30;padding-top:var(--sat);background:linear-gradient(180deg,var(--card),var(--card) 70%,rgba(255,253,249,.86));
border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);backdrop-filter:saturate(140%) blur(6px)}
.appbar-in{display:flex;align-items:center;gap:8px;padding:9px 12px 11px}
.iconbtn{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;color:var(--text);border-radius:50%;position:relative;flex:0 0 44px}
.iconbtn:active{background:color-mix(in srgb,var(--champagne) 70%,transparent)}
.brand{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;min-width:0}
.brand-logo{height:48px;width:auto;animation:logoIn .8s var(--ease) both}
@keyframes logoIn{from{opacity:0;transform:translateY(6px) rotate(-6deg) scale(.86)}to{opacity:1;transform:none}}
.brand-txt{min-width:0}
.brand-name{font-family:var(--serif);font-size:24px;line-height:1;font-weight:700;letter-spacing:2.4px;
background:linear-gradient(96deg,#8C5F09,#D9A928 42%,#B8871D 70%,#8C5F09);-webkit-background-clip:text;background-clip:text;color:transparent;
background-size:220% 100%;animation:sheen 6s linear infinite}
@keyframes sheen{to{background-position:220% 0}}
.brand-sub{display:flex;align-items:center;gap:6px;justify-content:center;margin-top:2px}
.brand-sub b{font-size:11.5px;letter-spacing:4.6px;font-weight:600;color:var(--gold-deep)}
.flourish{flex:1;height:8px;max-width:26px;color:var(--gold);opacity:.8}
.brand-tag{font-size:9.5px;letter-spacing:.3px;color:var(--gold-deep);text-align:center;margin-top:3px;font-weight:600}
.dot-badge{position:absolute;top:9px;right:9px;width:9px;height:9px;border-radius:50%;background:var(--gold-hi);border:1.6px solid var(--card);animation:blip 1.8s ease-in-out infinite}
@keyframes blip{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.65}}
.status-strip{display:flex;align-items:center;justify-content:center;gap:8px;padding:7px 10px;font-size:12.5px;font-weight:600;color:var(--text);
background:linear-gradient(90deg,transparent,var(--champagne) 18%,var(--champagne) 82%,transparent);position:relative;overflow:hidden}
.status-strip::after{content:"";position:absolute;inset:0;opacity:.1;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 3c4 5 4 9 0 14-4-5-4-9 0-14z' fill='none' stroke='%239B6B0D' stroke-width='.8'/%3E%3C/svg%3E")}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);position:relative}
.live-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--green);animation:ring 1.9s ease-out infinite}
.live-dot.closed{background:var(--red)}.live-dot.closed::after{border-color:var(--red)}
@keyframes ring{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.sep-dot{width:4px;height:4px;border-radius:50%;background:var(--gold)}
.ticker{overflow:hidden;background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi),var(--gold-deep));color:#241a03;font-size:12px;font-weight:600;padding:5px 0}
.ticker-track{display:inline-flex;white-space:nowrap;will-change:transform;animation:slide 26s linear infinite}
.ticker-track>span{padding-right:44px}
.ticker:active .ticker-track,.ticker-track:hover{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.sec-title{display:flex;align-items:center;gap:8px;margin:16px 2px 9px;font-size:12.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold-deep)}
.sec-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

.rate-card{display:grid;grid-template-columns:1.08fr 1fr 1fr;align-items:stretch;margin-bottom:var(--gap);position:relative}
.rate-card>*{padding:11px 8px}
.rc-prod{display:flex;align-items:center;gap:7px;min-width:0}
.rc-prod .art{width:50px;height:50px;flex:0 0 50px}
.rc-name{font-family:var(--serif);font-weight:700;font-size:17px;line-height:1.08;color:var(--gold-deep);overflow-wrap:break-word;letter-spacing:.2px}
.rc-name small{display:block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:1px;color:var(--gold)}
.rc-col{border-left:1px solid color-mix(in srgb,var(--line) 70%,transparent);text-align:center;display:flex;flex-direction:column;justify-content:center;gap:2px;
border-radius:8px;transition:background-color .5s ease}
.rc-col.up{background:var(--up-bg)}
.rc-col.down{background:var(--down-bg)}
.rc-lab{font-size:10.5px;letter-spacing:1.5px;font-weight:700;color:var(--text2)}
.rc-val{font-size:20px;font-weight:800;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.rc-val.pop{animation:pop .34s var(--ease)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.09)}100%{transform:scale(1)}}
.rc-chg{font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:2px;font-variant-numeric:tabular-nums}
.rc-chg .ico{width:13px;height:13px}
.up-c{color:var(--green)}.down-c{color:var(--red)}.flat-c{color:var(--text2)}
.rc-hl{grid-column:1/-1;display:flex;justify-content:space-around;gap:6px;padding:6px 10px;border-top:1px dashed color-mix(in srgb,var(--line) 80%,transparent);
font-size:10.5px;color:var(--text2);font-weight:600;font-variant-numeric:tabular-nums}

.updated{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;color:var(--text2);margin:4px 0 14px}
.updated .ico{width:14px;height:14px;color:var(--gold)}
.updated.busy .ico{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.qa-item{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:11px 4px 9px;display:flex;flex-direction:column;align-items:center;gap:6px;
box-shadow:var(--shadow);min-height:74px;justify-content:center}
.qa-item .ico,.qa-item .art{width:26px;height:26px;color:var(--gold)}
.qa-item span{font-size:11px;font-weight:600;text-align:center;line-height:1.15}
.qa-item:active{background:var(--champagne)}
.promo{position:relative;margin-top:var(--gap);padding:16px 14px;display:flex;align-items:center;gap:6px;overflow:hidden;min-height:126px}
.promo::before{content:"";position:absolute;inset:0;opacity:.11;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23B8871D'%3E%3Cpath d='M24 6c6 8 6 14 0 22-6-8-6-14 0-22zM6 24c8-6 14-6 22 0-8 6-14 6-22 0z'/%3E%3C/g%3E%3C/svg%3E")}
.promo-txt{position:relative;flex:1.05;min-width:0}
.promo-txt h3{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.28;margin:0 0 8px;color:var(--gold-deep);white-space:pre-line}
.promo-txt p{margin:0;font-size:11.5px;font-style:italic;color:var(--text2);white-space:pre-line}
.promo-art{position:relative;flex:.95;height:104px;display:grid;place-items:center}
.promo-art .art{position:absolute;width:82px;height:82px;animation:float 4.4s ease-in-out infinite}
.promo-art .art:nth-child(2){width:104px;height:104px;opacity:.9;animation-delay:.5s}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(2deg)}}
.prow{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:9px;padding:10px 11px;margin-bottom:9px}
.prow .metal{width:30px;height:30px;flex:0 0 30px}
.prow .metal-generic{width:26px;height:26px;color:var(--gold)}
.p-name{font-weight:700;font-size:13px;line-height:1.15;color:var(--text)}
.p-name small{font-size:11px;font-weight:700;color:var(--gold-deep);margin-left:3px}
.p-sub{font-size:10px;color:var(--text2);font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.p-cell{min-width:78px;text-align:right;border-radius:8px;padding:3px 6px;transition:background-color .5s ease}
.p-cell.up{background:var(--up-bg)}.p-cell.down{background:var(--down-bg)}
.p-cell b{display:block;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.p-cell i{display:block;font-size:9.5px;font-style:normal;letter-spacing:1.2px;color:var(--text2);font-weight:700}
.pos-badge{display:inline-block;margin-top:3px;font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:20px;background:var(--champagne);color:var(--gold-deep)}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);
background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(12px) saturate(150%);
border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent);padding-bottom:var(--sab);box-shadow:0 -4px 18px rgba(120,95,40,.08)}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 7px;color:var(--nav-off);position:relative;min-height:52px;justify-content:center}
.tab .ico{width:22px;height:22px;transition:transform .3s var(--ease)}
.tab span{font-size:10px;font-weight:600}
.tab:active .ico{transform:scale(.86)}
.tab.on{color:var(--gold)}
.tab.on .ico{animation:tabPop .45s var(--ease)}
.tab.on::before{content:"";position:absolute;top:2px;width:22px;height:3px;border-radius:3px;background:var(--gold);animation:grow .35s var(--ease) both}
@keyframes tabPop{0%{transform:translateY(0)}45%{transform:translateY(-4px) scale(1.12)}100%{transform:none}}
@keyframes grow{from{transform:scaleX(0);opacity:0}to{transform:none;opacity:1}}
.scrim{position:fixed;inset:0;z-index:50;background:rgba(20,15,5,.42);opacity:0;pointer-events:none;transition:opacity .28s;backdrop-filter:blur(2px)}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(84vw,330px);z-index:51;background:var(--card);border-right:1px solid var(--line);
transform:translateX(-102%);transition:transform .34s var(--ease);display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.drawer.on{transform:none}
.drawer-head{padding:calc(var(--sat) + 14px) 14px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--champagne),transparent)}
.drawer-head img{height:42px}
.drawer-head div{min-width:0}
.drawer-head strong{display:block;font-family:var(--serif);font-size:16px;letter-spacing:1.6px;color:var(--gold-deep)}
.drawer-head small{font-size:10px;color:var(--text2)}
.drawer-body{flex:1;overflow-y:auto;padding:8px 0 calc(18px + var(--sab))}
.dgroup{margin:6px 10px 12px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.dgroup h4{margin:0;padding:7px 12px;font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold-deep);background:color-mix(in srgb,var(--champagne) 60%,transparent)}
.ditem{display:flex;align-items:center;gap:11px;padding:11px 12px;border-top:1px solid color-mix(in srgb,var(--line) 45%,transparent);font-size:13px;font-weight:600;
animation:slideIn .4s var(--ease) both;animation-delay:calc(var(--i,0) * 22ms)}
.ditem .ico{width:19px;height:19px;color:var(--gold);flex:0 0 19px}
.ditem .chev{margin-left:auto;width:15px;height:15px;color:var(--text2);opacity:.7}
.ditem:active{background:var(--champagne)}
@keyframes slideIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.fab{position:fixed;bottom:calc(72px + var(--sab));z-index:35;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;border:0;opacity:.96;
box-shadow:0 6px 18px rgba(0,0,0,.22);animation:fabIn .5s var(--ease) .3s both}
.fab .ico{width:23px;height:23px}
.fab-wa{left:14px;background:linear-gradient(135deg,#37d24a,#128C7E)}
.fab-call{right:14px;background:linear-gradient(135deg,var(--gold-hi),var(--gold-deep))}
.fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid currentColor;opacity:.35;animation:ring 2.4s ease-out infinite}
@keyframes fabIn{from{opacity:0;transform:scale(.4) translateY(14px)}to{opacity:1;transform:none}}
.modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(20,15,5,.5);backdrop-filter:blur(3px)}
.modal.on{display:flex;animation:fade .25s ease both}
.modal-box{width:100%;max-width:340px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;
animation:zoomIn .38s var(--ease) both;max-height:82vh;display:flex;flex-direction:column}
@keyframes zoomIn{from{opacity:0;transform:scale(.9) translateY(16px)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;gap:9px;padding:13px 14px;background:linear-gradient(120deg,var(--champagne),transparent);border-bottom:1px solid var(--line)}
.modal-head img{height:30px}
.modal-head strong{font-family:var(--serif);font-size:15px;letter-spacing:1.4px;color:var(--gold-deep);flex:1}
.modal-body{padding:14px;overflow-y:auto;font-size:13px}
.modal-body img{border-radius:8px;margin:6px auto}
.modal-foot{display:flex;gap:9px;padding:11px 14px;border-top:1px solid var(--line)}
.modal-foot .btn{flex:1}
.snack{position:fixed;left:12px;right:12px;bottom:calc(76px + var(--sab));z-index:45;display:none;gap:9px;align-items:flex-start;
background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:11px;padding:10px 11px;box-shadow:var(--shadow-lg);font-size:12.5px}
.snack.on{display:flex;animation:snackIn .42s var(--ease) both}
@keyframes snackIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.snack-x{border:0;background:transparent;color:var(--text2);width:26px;height:26px;display:grid;place-items:center;border-radius:50%;flex:0 0 26px}
.snack-body{flex:1;min-width:0;overflow:hidden}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);background:var(--card);color:var(--text);
padding:12px 16px;border-radius:11px;font-size:13.5px;font-weight:700;letter-spacing:.4px;transition:transform .18s var(--ease),filter .2s,box-shadow .2s;position:relative;overflow:hidden}
.btn:active{transform:scale(.97)}
.btn .ico{width:18px;height:18px}
.btn-gold{background:linear-gradient(120deg,var(--gold-hi),var(--gold),var(--gold-deep));border-color:var(--gold-deep);color:#2A1D02;box-shadow:0 5px 16px rgba(184,135,29,.3);background-size:180% 100%}
.btn-gold:active{background-position:100% 0}
.btn-buy{background:linear-gradient(120deg,#1FB05B,#0E7C3A);border-color:#0E7C3A;color:#fff}
.btn-sell{background:linear-gradient(120deg,#F04747,#C41F1F);border-color:#C41F1F;color:#fff}
.btn-block{display:flex;width:100%}
.btn:disabled{opacity:.55}
.btn-ghost{background:transparent}

.field{margin-bottom:13px;animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0) * 60ms)}
.field label{display:block;font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--text2);margin-bottom:5px}
.input{width:100%;background:transparent;border:1px solid var(--line);border-radius:10px;padding:12px;font-size:15px;transition:border-color .22s,box-shadow .22s}
.input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,169,40,.18)}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
textarea.input{min-height:64px;resize:vertical}
.seg{display:flex;gap:0;border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-bottom:14px;background:var(--card)}
.seg button{flex:1;border:0;background:transparent;padding:11px 6px;font-size:12.5px;font-weight:700;letter-spacing:1.1px;color:var(--text2);transition:all .28s var(--ease)}
.seg button.on{background:linear-gradient(120deg,var(--gold-hi),var(--gold-deep));color:#2A1D02}

.hero-title{display:flex;align-items:center;justify-content:center;gap:9px;margin:12px 0 14px;padding:10px;border-radius:var(--r);
background:linear-gradient(120deg,var(--gold-deep),var(--gold-hi) 52%,var(--gold-deep));color:#241a03;font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:2.4px;
box-shadow:var(--shadow);animation:rise .5s var(--ease) both}
.hero-title .ico{width:20px;height:20px}
.trade{margin-bottom:10px;border-left:4px solid var(--gold);animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
.trade.b{border-left-color:#1565C0}
.trade.s{border-left-color:var(--red)}
.trade-top{display:flex;align-items:center;gap:8px;padding:10px 11px 6px}
.trade-top .metal{width:26px;height:26px;flex:0 0 26px}
.trade-top .metal-generic{width:22px;height:22px;color:var(--gold)}
.trade-name{flex:1;font-weight:700;font-size:13px;min-width:0}
.pill{font-size:10px;font-weight:800;letter-spacing:1px;padding:3px 9px;border-radius:20px;color:#fff}
.pill.b{background:#1565C0}.pill.s{background:var(--red)}
.pill.gold{background:linear-gradient(120deg,var(--gold-hi),var(--gold-deep));color:#241a03}
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 10px;padding:4px 11px 10px}
.kv div{display:flex;justify-content:space-between;gap:8px;font-size:12px;padding:3px 0;border-bottom:1px dashed color-mix(in srgb,var(--line) 55%,transparent)}
.kv span{color:var(--text2);font-weight:600}
.kv b{font-variant-numeric:tabular-nums}
.trade-foot{display:flex;align-items:center;gap:8px;padding:8px 11px;border-top:1px solid color-mix(in srgb,var(--line) 50%,transparent);font-size:11px;color:var(--text2)}
.trade-foot .btn{padding:7px 11px;font-size:11.5px;border-radius:9px}
.mini{padding:8px 12px;font-size:12px;border-radius:9px}

.empty{text-align:center;padding:44px 20px;color:var(--text2);animation:fade .5s ease both}
.empty .ico,.empty .art{width:58px;height:58px;margin:0 auto 12px;color:var(--line)}
.empty p{margin:0;font-size:13px}

.skel{border-radius:10px;background:linear-gradient(100deg,color-mix(in srgb,var(--line) 26%,transparent) 20%,color-mix(in srgb,var(--champagne) 80%,transparent) 40%,color-mix(in srgb,var(--line) 26%,transparent) 60%);
background-size:220% 100%;animation:shimmer 1.4s linear infinite;height:14px}
@keyframes shimmer{to{background-position:-220% 0}}
.skel-card{height:78px;margin-bottom:var(--gap)}

.content-html{font-size:13px;line-height:1.6;padding:14px;animation:fade .5s ease both}
.content-html img{border-radius:10px;margin:8px auto}
.content-html table{width:100%;border-collapse:collapse}
.content-html td,.content-html th{padding:7px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);font-size:12.5px}
.content-html a{color:var(--gold-deep);font-weight:700}

.gauge-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px}
.gauge{width:150px;height:150px;position:relative;display:grid;place-items:center}
.gauge svg{position:absolute;inset:0;transform:rotate(-90deg);width:150px;height:150px}
.gauge .bar{transition:stroke-dashoffset 1.1s var(--ease)}
.gauge-val{font-size:28px;font-weight:800;font-family:var(--serif)}
.gauge-lab{font-size:11px;letter-spacing:1.6px;color:var(--text2);font-weight:700}

.chart-box{padding:6px 0}
.chart-box svg{width:100%;height:260px;overflow:visible}
.chart-hl{display:flex;justify-content:space-around;padding:10px;font-size:11.5px;font-weight:700}
.ico{width:24px;height:24px;flex:0 0 auto}
.ico:not(.fillico) *{stroke-dasharray:120;stroke-dashoffset:120;animation:draw 1s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.ico.nodraw *{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
.ico-spin{animation:spin 1.1s linear infinite}
.ico-bell{transform-origin:50% 12%;animation:swing 3.4s ease-in-out infinite}
@keyframes swing{0%,72%,100%{transform:rotate(0)}78%{transform:rotate(13deg)}84%{transform:rotate(-11deg)}90%{transform:rotate(6deg)}95%{transform:rotate(-3deg)}}
.ico-pulse{animation:pulse 2.1s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}
.art .glint{animation:glint 3.2s ease-in-out infinite}
@keyframes glint{0%,64%,100%{opacity:.16}78%{opacity:.86}}
.art.shine{animation:tilt 6s ease-in-out infinite}
@keyframes tilt{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
.spinner{width:34px;height:34px;margin:34px auto;border-radius:50%;border:3px solid color-mix(in srgb,var(--line) 60%,transparent);border-top-color:var(--gold);animation:spin .8s linear infinite}

.offline{display:none;align-items:center;gap:8px;margin:0 var(--pad) var(--gap);padding:10px 12px;border-radius:11px;background:var(--down-bg);border:1px solid var(--red);font-size:12px;font-weight:600}
.offline.on{display:flex;animation:rise .4s var(--ease) both}
.offline .ico{width:18px;height:18px;color:var(--red)}

.center-note{text-align:center;font-size:11.5px;color:var(--text2);padding:10px}
.copyright{text-align:center;font-size:10px;color:var(--text2);padding:12px 10px 4px;letter-spacing:.4px}
.rupee{font-family:var(--sans)}
@media (max-width:349px){
.rc-val{font-size:17px}.brand-name{font-size:20px}.qa-item span{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ============================================================
   WEB LAYER
   Everything above is the original phone-sized layout and still
   drives small screens. Below: pointer/keyboard affordances the
   app never needed, then progressive widening for tablet and
   desktop. Mobile-first, so every block here is min-width.
   ============================================================ */

/* --- content column ------------------------------------------------ */
:root{--maxw:100%}
.wrap{max-width:var(--maxw);margin-inline:auto}
.appbar-in{max-width:var(--maxw);margin-inline:auto}
/* .offline sits inside .wrap on some pages and directly under .page on
   others; this keeps it aligned with the text column either way. */
.offline{max-width:calc(var(--maxw) - var(--pad) * 2);margin-inline:auto}
.page{min-height:100dvh}

/* --- pointer + keyboard affordances -------------------------------- */
button,.pressable,.tab,.ditem,.tn-btn,.tn-item,.tn-auth,.seg button,.snack-x,[data-nav],[data-close]{cursor:pointer}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px;border-radius:8px}

.skip{position:absolute;left:-9999px;top:0;z-index:80;background:var(--card);color:var(--gold-deep);
border:1px solid var(--gold);border-radius:0 0 10px 0;padding:11px 16px;font-size:13px;font-weight:700}
.skip:focus{left:0}

@media (hover:hover){
.pressable:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.pressable:active{transform:scale(.965)}
.qa-item:hover{background:var(--champagne);border-color:var(--gold)}
.prow:hover{border-color:var(--gold)}
.btn:hover{filter:brightness(1.06)}
.btn-gold:hover{background-position:100% 0}
.btn:disabled:hover{filter:none}
.ditem:hover{background:var(--champagne)}
.iconbtn:hover{background:color-mix(in srgb,var(--champagne) 70%,transparent)}
.tab:hover{color:var(--gold)}
.snack-x:hover{color:var(--text)}
.fab:hover{transform:scale(1.07)}
.seg button:not(.on):hover{color:var(--gold-deep);background:color-mix(in srgb,var(--champagne) 45%,transparent)}
.updated:hover{color:var(--gold-deep)}
.content-html a:hover{text-decoration:underline}
}

/* CDN-published copy is arbitrary HTML, so stop wide tables and long
   unbroken strings from forcing the whole page to scroll sideways. */
.content-html{overflow-x:auto;overflow-wrap:break-word}

/* --- desktop nav (hidden until there is room for it) --------------- */
.desk-only{display:none}
.topnav{display:none}
.tn-group{position:relative}
.tn-btn{display:flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--text);
padding:9px 11px;border-radius:9px;font-size:13px;font-weight:600;letter-spacing:.2px;white-space:nowrap;
transition:background .2s,color .2s}
.tn-btn.on{color:var(--gold-deep)}
.tn-chev{width:13px;height:13px;color:var(--text2);transform:rotate(90deg);transition:transform .25s var(--ease)}
.tn-group.open .tn-chev{transform:rotate(-90deg)}
.tn-menu{position:absolute;top:calc(100% + 7px);right:0;min-width:220px;z-index:32;background:var(--card);
border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;
opacity:0;visibility:hidden;transform:translateY(-7px);
transition:opacity .2s ease,transform .22s var(--ease),visibility .2s}
.tn-group.open .tn-menu{opacity:1;visibility:visible;transform:none}
.tn-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:13px;font-weight:600;
transition:background .18s}
.tn-item .ico{width:18px;height:18px;color:var(--gold);flex:0 0 18px}
.tn-item.on{background:var(--champagne);color:var(--gold-deep)}
.tn-auth{display:flex;align-items:center;gap:7px;margin-left:8px;padding:9px 15px;border-radius:9px;white-space:nowrap;
border:1px solid var(--gold-deep);background:linear-gradient(120deg,var(--gold-hi),var(--gold),var(--gold-deep));
background-size:180% 100%;color:#2A1D02;font-size:12.5px;font-weight:700;letter-spacing:.3px;transition:background-position .25s}
.tn-auth .ico{width:16px;height:16px}

/* ==================== 600px+ : large phone / small tablet ========== */
@media (min-width:600px){
:root{--maxw:600px;--pad:18px}
.rc-val{font-size:22px}
.hero-title{font-size:18px;padding:13px}
.modal-box{max-width:400px}
.snack{left:auto;right:18px;width:min(400px,calc(100% - 36px))}
}

/* ==================== 768px+ : tablet portrait ===================== */
/* iPad-portrait widths are common enough to deserve their own step, or the
   page sits as a narrow column between two wide empty margins. */
@media (min-width:768px){
:root{--maxw:740px}
#rateList,#list{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:10px}
#rateList .prow,#list .trade{margin-bottom:0}
#rateList .empty,#list .empty,#rateList .skel-card,#list .skel-card{grid-column:1/-1}
}

/* ==================== 900px+ : tablet ============================== */
@media (min-width:900px){
:root{--maxw:860px}
#topRates{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
#topRates .rate-card{margin-bottom:0}
.qa{gap:12px}
.qa-item{min-height:86px}
.qa-item .ico,.qa-item .art{width:30px;height:30px}
.promo{min-height:160px;padding:22px 24px}
.promo-txt h3{font-size:23px}
.promo-art{height:130px}
.promo-art .art{width:98px;height:98px}
.promo-art .art:nth-child(2){width:124px;height:124px}
/* Rate rows and trade cards pair up once there is width for two. */
#rateList,#list{display:grid;grid-template-columns:repeat(auto-fill,minmax(390px,1fr));gap:10px}
#rateList .prow,#list .trade{margin-bottom:0}
#rateList .empty,#list .empty,#rateList .skel-card,#list .skel-card{grid-column:1/-1}
}

/* ==================== 1024px+ : desktop =========================== */
@media (min-width:1024px){
:root{--maxw:1080px}

/* Bottom tab bar and hamburger give way to a real top nav. */
.tabbar{display:none}
.mob-only{display:none}
.desk-only{display:grid}
.topnav{display:flex;align-items:center;gap:2px;flex:1;justify-content:flex-end}
.page{padding-bottom:40px}

.appbar-in{padding:10px 20px;gap:12px}
.brand{flex:0 0 auto;justify-content:flex-start}
.brand-logo{height:52px}
.brand-name{font-size:26px}

/* No tab bar to clear, so the action buttons stack in the corner. */
.fabs{position:fixed;right:20px;bottom:20px;z-index:35;display:flex;flex-direction:column;gap:11px}
/* relative, not static: the ::after pulse ring is absolutely positioned
   against the button itself. */
.fab{position:relative;bottom:auto;left:auto;right:auto;width:50px;height:50px}
.fab .ico{width:26px;height:26px}
.snack{bottom:20px;right:88px}

.status-strip{font-size:13px;padding:8px 10px}
.hero-title{font-size:19px;letter-spacing:2.8px;margin:16px 0 18px}
.sec-title{font-size:13px;margin:22px 2px 12px}

/* Headline rates become a dashboard row instead of a stack. */
#topRates{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:var(--gap)}
#topRates .rate-card{margin-bottom:0}
#rateList,#list{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}

.qa{gap:14px}
.qa-item{min-height:98px;padding:17px 8px}
.qa-item .ico,.qa-item .art{width:33px;height:33px}
.qa-item span{font-size:12.5px}

.promo{min-height:196px;padding:28px 32px}
.promo-txt h3{font-size:28px}
.promo-txt p{font-size:14px}
.promo-art{height:158px}
.promo-art .art{width:116px;height:116px}
.promo-art .art:nth-child(2){width:148px;height:148px}

.chart-box svg{height:340px}
.gauge,.gauge svg{width:190px;height:190px}
.gauge-val{font-size:34px}

/* Long-form and detail pages read badly at full width, so the reading
   column stays narrow. :has() is progressive - older browsers simply
   keep the wider layout. */
.page:has(#box) .wrap,.page:has(.content-html) .wrap{max-width:820px}

/* Forms are single-column on phones; centre them rather than stretch.
   The chart page also has a .field (its scrip picker) but wants the width. */
.page:has(.field):not(:has(.chart-box)) .wrap{max-width:760px}
}

@media (hover:hover) and (min-width:1024px){
.tn-group:hover .tn-menu{opacity:1;visibility:visible;transform:none}
.tn-group:hover .tn-chev{transform:rotate(-90deg)}
.tn-btn:hover{background:var(--champagne);color:var(--gold-deep)}
.tn-item:hover{background:var(--champagne)}
.tn-auth:hover{background-position:100% 0}
.brand:hover .brand-name{opacity:.88}
}

/* ==================== 1400px+ : wide =============================== */
@media (min-width:1400px){
:root{--maxw:1240px}
#rateList,#list{grid-template-columns:repeat(auto-fill,minmax(390px,1fr))}
}