:root{
  --blue:#375EC4;
  --navy:#05175B;
  --black:#000;
  --gold:#D9C64C;
  --gold-2:#F3E9A8;
  --up:#12B76A;
  --down:#F04438;
  --bg:#03102F;
  --bg-2:#05175B;
  --card:rgba(255,255,255,.05);
  --line:rgba(217,198,76,.28);
  --txt:#EEF2FF;
  --dim:#9FB0DF;
  --r:16px;
  --sh:0 10px 30px rgba(0,0,0,.45);
  --ease:cubic-bezier(.22,1,.36,1);
}
body.light{
  --bg:#F4F6FD;--bg-2:#FFF;--card:rgba(5,23,91,.04);--txt:#05175B;--dim:#5A6A9B;
  --line:rgba(5,23,91,.15);--sh:0 10px 30px rgba(5,23,91,.12);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);color:var(--txt);overflow-x:hidden;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
/* App chrome stays unselectable; page content is selectable, as a website should be */
.hdr,.mq,.fnav,.nav,.tabs,.tab,.chips,.chip,.fab,.btn,.ib,.ttl,.stp,.qtybox .rb{-webkit-user-select:none;user-select:none}
body:before{
  content:'';position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(900px 480px at 12% -8%,rgba(55,94,196,.55),transparent 62%),
    radial-gradient(700px 420px at 96% 4%,rgba(217,198,76,.20),transparent 60%),
    radial-gradient(800px 520px at 50% 110%,rgba(55,94,196,.30),transparent 65%),
    linear-gradient(180deg,var(--bg) 0%,#020B21 100%);
  animation:aurora 18s var(--ease) infinite alternate;
}
body.light:before{
  background:
    radial-gradient(900px 480px at 12% -8%,rgba(55,94,196,.18),transparent 62%),
    radial-gradient(700px 420px at 96% 4%,rgba(217,198,76,.30),transparent 60%),
    linear-gradient(180deg,#FFF 0%,#EEF1FB 100%);
}
body:after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:22px 22px;animation:drift 40s linear infinite;
}
@keyframes aurora{0%{transform:scale(1) translateY(0);filter:hue-rotate(0)}100%{transform:scale(1.12) translateY(-22px);filter:hue-rotate(18deg)}}
@keyframes drift{to{background-position:220px 220px}}
a{color:var(--gold);text-decoration:none}
input,select,textarea,button{font-family:inherit;font-size:14px;color:inherit}
img{max-width:100%}
::-webkit-scrollbar{width:0;height:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
.prod,.news-i,.fi,.ni,.doc,.fab,.snack,.tab,.chip{cursor:pointer}

.app{min-height:100%;display:flex;flex-direction:column;padding-bottom:96px}

.hdr{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  background:linear-gradient(180deg,rgba(3,16,47,.94),rgba(3,16,47,.62));
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line);
  animation:slideDown .55s var(--ease) both;
}
/* Inner rail so header content can share the same centred measure as .wrap on desktop */
.hdr-in{flex:1;min-width:0;display:flex;align-items:center;gap:12px}
body.light .hdr{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.7))}
/* The logo is a wide banner, so cap its width or it starves the title on phones */
.hdr-logo{height:40px;max-width:36vw;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(217,198,76,.45));animation:pop .7s var(--ease) both .1s}
.hdr-t{flex:1;min-width:0}
.hdr-t b{display:block;font-size:15px;letter-spacing:.4px;background:linear-gradient(92deg,var(--gold),var(--gold-2),var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 100%;animation:shine 4s linear infinite}
.hdr-t b,.hdr-t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-t span{display:block;font-size:10px;color:var(--dim);letter-spacing:2.4px;text-transform:uppercase}
@keyframes shine{to{background-position:200% 0}}
.ib{
  width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:12px;background:var(--card);cursor:pointer;transition:.25s var(--ease);
}
.ib:active{transform:scale(.88)}
.ib:hover{border-color:var(--gold);box-shadow:0 0 0 4px rgba(217,198,76,.12)}
.ib svg{width:20px;height:20px}

.mq{
  overflow:hidden;background:linear-gradient(92deg,var(--gold),var(--gold-2),var(--gold));
  background-size:200% 100%;animation:shine 6s linear infinite;color:#05175B;
  font-size:11.5px;font-weight:600;padding:6px 0;white-space:nowrap;letter-spacing:.3px;
}
.mq span{display:inline-block;padding-left:100%;animation:mq 26s linear infinite}
.mq span *{display:inline!important;margin:0!important;padding:0!important;background:none!important;color:inherit!important;font-size:inherit!important;line-height:inherit!important;text-align:inherit!important}
.mq span br,.mq span hr,.mq span img{display:none!important}
@keyframes mq{to{transform:translateX(-100%)}}

.wrap{padding:14px;display:flex;flex-direction:column;gap:14px;animation:fadeUp .5s var(--ease) both .08s}
.ttl{display:flex;align-items:center;gap:10px;margin:2px 0 0}
.ttl h1{margin:0;font-size:15px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold)}
.ttl:after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

.card{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;box-shadow:var(--sh);backdrop-filter:blur(12px);overflow:hidden;
  animation:fadeUp .5s var(--ease) both;
}
.card:before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7;
}
.card h3{margin:0 0 10px;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold)}

.tops{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.top{
  position:relative;border:1px solid var(--line);border-radius:14px;padding:9px 8px;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  text-align:center;overflow:hidden;transition:background-color .45s var(--ease),box-shadow .45s var(--ease);
  animation:pop .6s var(--ease) both;
}
.tops .top:nth-child(2){animation-delay:.08s}
.tops .top:nth-child(3){animation-delay:.16s}
.top .nm{font-size:9px;letter-spacing:.8px;color:var(--gold);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .v{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;margin:3px 0 1px;transition:color .3s}
.top .hl{font-size:8.5px;color:var(--dim);font-variant-numeric:tabular-nums}

.prods{display:flex;flex-direction:column;gap:4px}
.prod{
  border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--card);
  box-shadow:var(--sh);animation:fadeUp .45s var(--ease) both;transition:transform .25s var(--ease);
}
.prod:active{transform:scale(.985)}
.prod .ph{
  display:flex;align-items:center;gap:8px;padding:3px 8px;color:#05175B;font-size:10px;
  font-weight:700;letter-spacing:1px;text-transform:uppercase;
  background:linear-gradient(92deg,var(--gold),var(--gold-2),var(--gold));background-size:200% 100%;
  animation:shine 7s linear infinite;
}
.prod .ph .pos{margin-left:auto;font-size:9px;background:rgba(5,23,91,.85);color:var(--gold);padding:2px 7px;border-radius:20px}
.pb{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.pc{padding:3px 8px;background:var(--bg-2);transition:background-color .45s var(--ease)}
body.light .pc{background:#FFF}
.pc .k{font-size:8px;letter-spacing:1.2px;color:var(--dim);text-transform:uppercase}
.pc .n{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.4px}
.pf{display:flex;gap:14px;padding:2px 8px;font-size:9px;color:var(--dim);font-variant-numeric:tabular-nums;border-top:1px solid var(--line)}
.pf b{color:var(--txt);font-weight:600}

.up{background-color:rgba(18,183,106,.30)!important}
.dn{background-color:rgba(240,68,56,.30)!important}
.up .n,.up .v{color:#7BF0B4}
.dn .n,.dn .v{color:#FFA9A2}
body.light .up .n,body.light .up .v{color:#067647}
body.light .dn .n,body.light .dn .v{color:#B42318}

.tabs{display:flex;gap:6px;padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.tab{
  flex:1;text-align:center;padding:9px 6px;border-radius:10px;font-size:10.5px;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;color:var(--dim);cursor:pointer;transition:.3s var(--ease);
}
.tab.on{color:#05175B;background:linear-gradient(92deg,var(--gold),var(--gold-2));box-shadow:0 6px 18px rgba(217,198,76,.35);transform:translateY(-1px)}

.fld{position:relative;margin-bottom:16px;animation:fadeUp .45s var(--ease) both}
.fld label{display:block;font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.fld input,.fld select,.fld textarea{
  width:100%;padding:11px 12px;background:var(--card);color:var(--txt);
  border:1px solid var(--line);border-bottom-width:2px;border-radius:12px;outline:none;
  transition:.3s var(--ease);
}
.fld textarea{min-height:74px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  border-color:var(--gold);box-shadow:0 0 0 4px rgba(217,198,76,.14);transform:translateY(-1px)
}
.fld input::placeholder,.fld textarea::placeholder{color:var(--dim)}
.fld select{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}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.btn{
  position:relative;width:100%;padding:13px;border:0;border-radius:13px;cursor:pointer;overflow:hidden;
  font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#05175B;
  background:linear-gradient(92deg,var(--gold),var(--gold-2),var(--gold));background-size:200% 100%;
  box-shadow:0 10px 26px rgba(217,198,76,.3);transition:.25s var(--ease);animation:shine 5s linear infinite;
}
.btn:active{transform:scale(.96)}
.btn:before{content:'';position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.7),transparent 60%);opacity:0;transform:scale(0)}
.btn:active:before{animation:ripple .6s ease-out}
@keyframes ripple{0%{opacity:.6;transform:scale(0)}100%{opacity:0;transform:scale(2.6)}}
.btn.ghost{background:var(--card);color:var(--gold);border:1px solid var(--line);box-shadow:none;animation:none}
.btn.buy{background:linear-gradient(92deg,#0E9F62,#12B76A,#0E9F62);color:#fff;box-shadow:0 10px 26px rgba(18,183,106,.32)}
.btn.sell{background:linear-gradient(92deg,#D92D20,#F04438,#D92D20);color:#fff;box-shadow:0 10px 26px rgba(240,68,56,.32)}
.btn.blue{background:linear-gradient(92deg,#2A49A0,var(--blue),#2A49A0);color:#fff;box-shadow:0 10px 26px rgba(55,94,196,.35)}
.btn.sm{width:auto;padding:8px 14px;font-size:10px;letter-spacing:1.1px;border-radius:10px}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.tr{
  border-radius:14px;overflow:hidden;border:1px solid var(--line);margin-bottom:10px;
  animation:fadeUp .45s var(--ease) both;box-shadow:var(--sh);
}
.tr .th{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:11px;font-weight:700;letter-spacing:.8px;color:#fff}
.tr.b .th{background:linear-gradient(92deg,#2A49A0,var(--blue))}
.tr.s .th{background:linear-gradient(92deg,#B42318,var(--down))}
.tr .th .tag{margin-left:auto;background:rgba(0,0,0,.3);padding:2px 8px;border-radius:20px;font-size:9px;letter-spacing:1px}
.tr .tb{display:flex;flex-wrap:wrap;gap:2px 16px;padding:9px 12px;background:var(--bg-2);font-size:11px}
body.light .tr .tb{background:#FFF}
.tr .tb i{font-style:normal;color:var(--dim);font-size:9px;letter-spacing:1px;text-transform:uppercase;display:block}
.tr .tb b{font-variant-numeric:tabular-nums;font-size:12.5px}
.tr .tf{display:flex;align-items:center;gap:10px;padding:7px 12px;background:var(--card);font-size:10px;color:var(--dim)}
.tr .tf .btn{margin-left:auto}

.kv{display:flex;justify-content:space-between;gap:12px;padding:11px 2px;border-bottom:1px dashed var(--line);font-size:12px;animation:fadeUp .4s var(--ease) both}
.kv:last-child{border-bottom:0}
.kv span{color:var(--dim);letter-spacing:1px;text-transform:uppercase;font-size:10px}
.kv b{font-variant-numeric:tabular-nums;color:var(--gold)}

.nd{padding:36px 16px;text-align:center;color:var(--dim);font-size:12px;letter-spacing:1.2px}
.nd svg{width:46px;height:46px;opacity:.5;margin-bottom:10px}
.html-content{font-size:12.5px;line-height:1.75;color:var(--txt)}
.html-content img{max-width:100%;height:auto;border-radius:12px}
.html-content table{width:100%;border-collapse:collapse}
.html-content td,.html-content th{padding:7px;border-bottom:1px solid var(--line);text-align:left;word-break:break-word}
.html-content font,.html-content span,.html-content p,.html-content div,.html-content li{color:inherit!important;background:none!important}
.html-content a{color:var(--gold);word-break:break-word}
.html-content.article{margin-top:12px}
.msg-date{display:block;margin-top:8px;color:var(--dim);font-size:9.5px;letter-spacing:1px}

.scrim{position:fixed;inset:0;z-index:60;background:rgba(2,8,26,.72);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.scrim.on{opacity:1;pointer-events:auto}
.nav{
  position:fixed;top:0;left:0;bottom:0;width:min(84vw,340px);z-index:61;overflow-y:auto;
  background:linear-gradient(170deg,var(--bg-2),#020B21 70%);border-right:1px solid var(--line);
  transform:translateX(-102%);visibility:hidden;pointer-events:none;
  transition:transform .42s var(--ease),visibility .42s linear;
  padding:calc(16px + env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom));
}
body.light .nav{background:linear-gradient(170deg,#FFF,#EEF1FB 70%)}
.nav.on{transform:none;visibility:visible;pointer-events:auto;box-shadow:22px 0 60px rgba(0,0,0,.55);transition:transform .42s var(--ease),visibility 0s}
.nav-top{display:flex;align-items:center;gap:11px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:12px}
.nav-top img{height:42px}
.nav-top b{font-size:13px;color:var(--gold);display:block}
.nav-top small{font-size:10px;color:var(--dim)}
.ng{margin-bottom:12px}
.ng>p{margin:0 0 7px;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--dim)}
.ng>div{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.ni{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 4px;border-radius:13px;
  border:1px solid var(--line);background:var(--card);font-size:8.5px;line-height:1.25;text-align:center;
  color:var(--txt);letter-spacing:.3px;transition:.28s var(--ease);opacity:0;transform:translateY(10px);
  animation:fadeUp .4s var(--ease) forwards;
}
.ni svg{width:21px;height:21px;color:var(--gold)}
.ni:active{transform:scale(.92)}
.nav.on .ni:hover{border-color:var(--gold);background:rgba(217,198,76,.12)}
.ni.on{border-color:var(--gold);background:rgba(217,198,76,.16)}

.fnav{
  position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(5,1fr);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(3,16,47,.98),rgba(3,16,47,.82));
  backdrop-filter:blur(18px);border-top:1px solid var(--line);animation:slideUp .5s var(--ease) both;
}
body.light .fnav{background:linear-gradient(0deg,rgba(255,255,255,.98),rgba(255,255,255,.86))}
.fi{
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;border-radius:12px;
  font-size:8.5px;letter-spacing:.6px;color:var(--dim);text-transform:uppercase;transition:.28s var(--ease);
}
.fi svg{width:21px;height:21px;transition:.3s var(--ease)}
.fi.on{color:var(--gold)}
.fi.on svg{transform:translateY(-2px) scale(1.14);filter:drop-shadow(0 4px 10px rgba(217,198,76,.6))}
.fi:active{transform:scale(.9)}
.fcr{position:fixed;left:0;right:0;bottom:0;z-index:44;text-align:center;font-size:8px;color:var(--dim);padding:2px}

.fab{
  position:fixed;bottom:calc(84px + env(safe-area-inset-bottom));z-index:46;width:46px;height:46px;
  border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 12px 28px rgba(0,0,0,.45);
  animation:float 3.4s ease-in-out infinite;
}
.fab svg{width:23px;height:23px}
.fab.wa{left:14px;background:linear-gradient(140deg,#25D366,#128C7E)}
.fab.cl{right:14px;background:linear-gradient(140deg,var(--blue),var(--navy));animation-delay:.5s}
.fab:before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid currentColor;animation:pulse 2.4s ease-out infinite}
.fab:active{transform:scale(.88)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes pulse{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}

.snack{
  position:fixed;left:12px;right:12px;bottom:calc(140px + env(safe-area-inset-bottom));z-index:70;
  display:flex;gap:10px;align-items:center;padding:11px 13px;border-radius:14px;font-size:11.5px;
  background:linear-gradient(100deg,var(--navy),#0A2478);border:1px solid var(--line);
  box-shadow:var(--sh);cursor:pointer;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(20px) scale(.97);
  transition:transform .4s var(--ease),opacity .28s var(--ease),visibility .28s linear;
}
.snack.on{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.snack.on:active{opacity:.85}
.snack svg{width:18px;height:18px;color:var(--gold);flex:0 0 18px}
.snack .x{margin-left:auto;flex:0 0 auto;color:var(--gold);font-size:19px;line-height:1;padding:2px 4px;background:none;border:0;cursor:pointer}
.snack .rich{flex:1;min-width:0;max-height:88px;overflow:hidden}
.snack .rich *{display:inline;margin:0!important;padding:0!important;font-size:inherit!important;line-height:1.5!important;background:none!important}
.snack .rich br{display:none}
.snack .rich img{display:none}
.modal .rich *{max-width:100%}
.modal .rich img{display:block;margin:8px auto!important;border-radius:10px}

.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:22px;background:rgba(2,8,26,.75);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.modal.on{opacity:1;pointer-events:auto}
.modal>div{width:100%;max-width:340px;background:linear-gradient(165deg,var(--bg-2),#020B21);border:1px solid var(--line);border-radius:20px;padding:20px;text-align:center;transform:scale(.86) translateY(16px);transition:transform .4s var(--ease)}
.modal.on>div{transform:none}
.modal h4{margin:0 0 8px;font-size:14px;color:var(--gold);letter-spacing:1.2px;text-transform:uppercase}
.modal p{margin:0 0 16px;font-size:12px;color:var(--dim);line-height:1.6}

.load{display:grid;place-items:center;padding:34px}
.load div{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--gold);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.shim{height:56px;border-radius:12px;background:linear-gradient(100deg,var(--card) 30%,rgba(217,198,76,.14) 50%,var(--card) 70%);background-size:220% 100%;animation:shim 1.3s linear infinite;margin-bottom:9px}
@keyframes shim{to{background-position:-220% 0}}

.gauge{position:relative;width:150px;height:150px;margin:6px auto 14px}
.gauge svg{transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:11;stroke-linecap:round}
.gauge .bgc{stroke:var(--line)}
.gauge .fgc{stroke:url(#gg);transition:stroke-dashoffset 1.4s var(--ease)}
.gauge b{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:26px;color:var(--gold)}
.gauge b small{display:block;font-size:9px;color:var(--dim);letter-spacing:2px}

.sig{display:inline-block;padding:5px 16px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:2px}
.sig.Buy{background:rgba(18,183,106,.2);color:#7BF0B4;border:1px solid rgba(18,183,106,.5)}
.sig.Sell{background:rgba(240,68,56,.2);color:#FFA9A2;border:1px solid rgba(240,68,56,.5)}
.sig.NA{background:var(--card);color:var(--dim);border:1px solid var(--line)}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:7px 14px;border-radius:20px;border:1px solid var(--line);background:var(--card);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:.26s var(--ease)}
.chip.on{background:linear-gradient(92deg,var(--gold),var(--gold-2));color:#05175B;border-color:transparent}
.chip:active{transform:scale(.93)}
.imp{width:8px;height:8px;border-radius:50%;display:inline-block;animation:pulse2 1.6s ease-in-out infinite}
.imp.h{background:var(--down)}.imp.m{background:var(--gold)}.imp.l{background:var(--up)}
@keyframes pulse2{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.55}}
.stp{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.stp i{flex:1;height:3px;border-radius:3px;background:var(--line);overflow:hidden;position:relative}
.stp i.on:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--gold),var(--gold-2));animation:grow .6s var(--ease) both}
@keyframes grow{from{transform:scaleX(0);transform-origin:left}}
fieldset{border:1px dashed var(--line);border-radius:14px;padding:14px;margin:0 0 14px;animation:fadeUp .5s var(--ease) both}
legend{padding:0 8px;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold)}
.docs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.doc{border:1px solid var(--line);border-radius:13px;padding:9px;background:var(--card);text-align:center;font-size:9px;animation:pop .45s var(--ease) both}
.doc img{width:100%;height:66px;object-fit:cover;border-radius:9px;background:rgba(0,0,0,.3);margin-bottom:7px}
.doc p{margin:0 0 7px;color:var(--gold);letter-spacing:.4px;min-height:22px}
.doc div{display:flex;gap:5px}
.doc .btn{padding:6px 2px;font-size:8px;letter-spacing:.6px}
.qtybox{display:flex;align-items:center;gap:9px}
.qtybox .rb{width:38px;height:38px;flex:0 0 38px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--gold);font-size:19px;display:grid;place-items:center;transition:.25s var(--ease)}
.qtybox .rb:active{transform:scale(.85)}
.chk{width:19px;height:19px;accent-color:var(--gold)}
.news-i{padding:13px 2px;border-bottom:1px dashed var(--line);animation:fadeUp .45s var(--ease) both}
.news-i b{display:block;font-size:12.5px;line-height:1.5;margin-bottom:5px}
.news-i small{color:var(--dim);font-size:9.5px;letter-spacing:.8px}
.offline{position:fixed;top:0;left:0;right:0;z-index:90;background:var(--down);color:#fff;font-size:11px;text-align:center;padding:6px;transform:translateY(-100%);visibility:hidden;transition:transform .35s var(--ease),visibility .35s linear}
.offline.on{transform:none;visibility:visible;transition:transform .35s var(--ease),visibility 0s}
.spark{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.7;animation:rise 4s linear infinite;pointer-events:none}
@keyframes rise{0%{transform:translateY(0) scale(1);opacity:.7}100%{transform:translateY(-120px) scale(0);opacity:0}}

.ai-spin{animation:spin 3.6s linear infinite;transform-origin:center}
.ai-beat{animation:beat 1.8s ease-in-out infinite;transform-origin:center}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.ai-sway{animation:sway 2.6s ease-in-out infinite;transform-origin:top center}
@keyframes sway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.ai-bob{animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
.ai-draw{stroke-dasharray:120;stroke-dashoffset:120;animation:draw 2.2s var(--ease) infinite}
@keyframes draw{40%,100%{stroke-dashoffset:0}}
.ai-blink{animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes slideDown{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes slideUp{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.app{animation:pageIn .5s var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}
body.leave .app{animation:pageOut .3s var(--ease) both}
@keyframes pageOut{to{opacity:0;transform:translateY(-14px) scale(.985)}}
.chart-wrap{width:100%;height:250px}
.chart-wrap svg{width:100%;height:100%;overflow:visible}

/* ==========================================================================
   RESPONSIVE LAYER
   The rules above are the mobile baseline. Everything below progressively
   adapts the layout upward: large phone -> tablet -> desktop -> wide desktop.
   Breakpoints: 380 (small phone) / 600 / 768 / 1024 / 1280 / 1600
   ========================================================================== */

/* --- Utilities that replace styles previously written inline from JS ------
   Inline styles beat media queries, so layout decisions live here instead. */
.hide{display:none!important}
.btns.one{grid-template-columns:1fr}
.pb.one{grid-template-columns:1fr}
.kv b.big{font-size:14px}
.mt{margin-top:14px}
.mt-s{margin-top:10px}
.ml-s{margin-left:8px}
.rounded{border-radius:12px;overflow:hidden}
.tds-row{border-bottom:1px dashed var(--line);padding-bottom:8px;margin-bottom:10px}
.tds-row:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.fld.tight{margin-bottom:8px}
.fld.flush{margin-bottom:0}
.center{text-align:center}
.dim{color:var(--dim)}

/* --- Collection containers. Vertical stacks on phones, grids on wider screens.
   Empty states and skeletons must span the full grid, never sit in one cell. */
.rows>.nd,.kvs>.nd,.cards>.nd,.prods>.nd,.news-list>.nd,.docs>.nd,.fgrid>.nd,
.rows>.shim,.kvs>.shim,.cards>.shim,.news-list>.shim{grid-column:1/-1}
.fgrid .fld.span{grid-column:1/-1}

/* --- Legacy HTML streamed from the admin API ------------------------------
   That markup carries hard-coded table widths. Wrap tables so they scroll
   inside their card instead of forcing the whole page sideways. */
.tbl-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0;border-radius:10px}
.tbl-wrap>table{min-width:max-content}
.tbl-wrap::-webkit-scrollbar{height:6px}
.tbl-wrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}

/* --- Site footer (website chrome the app never needed) -------------------- */
.site-foot{
  margin-top:auto;border-top:1px solid var(--line);
  /* extra bottom padding keeps the last links clear of the floating call buttons */
  padding:20px 14px 72px;font-size:11px;color:var(--dim);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.20));
}
body.light .site-foot{background:linear-gradient(180deg,transparent,rgba(5,23,91,.05))}
.site-foot .fin{width:100%;max-width:1240px;margin:0 auto;display:grid;gap:18px}
.site-foot .fcols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.site-foot b{display:block;color:var(--gold);font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:8px}
.site-foot a,.site-foot p{display:block;color:var(--dim);padding:3px 0;margin:0;font-size:11.5px;line-height:1.5}
.site-foot .fbot{border-top:1px solid var(--line);padding-top:14px;font-size:10px;line-height:1.7}
.site-foot .fbot span{color:var(--gold)}

/* ------------------------------------------------------------------ <=380px
   Very small phones: let paired form fields fall back to a single column. */
@media (max-width:380px){
  .row2{grid-template-columns:1fr}
  .docs{grid-template-columns:1fr}
  .wrap{padding:12px}
  .fi{font-size:8px;letter-spacing:.3px}
  .fi svg{width:19px;height:19px}
  .top .nm{font-size:8.5px}
  .top .v{font-size:15px}
}

/* ------------------------------------------------------------------ >=600px
   Large phones and small tablets: stacks become grids, type comes up. */
@media (min-width:600px){
  .wrap{padding:18px 20px;gap:16px}
  .hdr{padding:calc(12px + env(safe-area-inset-top)) 20px 12px}
  .hdr-logo{height:44px}
  .hdr-t b{font-size:17px}
  .hdr-t span{font-size:11px}
  .mq{font-size:12.5px;padding:7px 0}
  .card{padding:18px}
  .ib{width:42px;height:42px;flex:0 0 42px}
  .ib svg{width:21px;height:21px}

  .tops{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
  .top{padding:12px 10px}
  .top .nm{font-size:10px}
  .top .v{font-size:21px}
  .top .hl{font-size:9.5px}

  .prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
  .rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;align-items:start}
  .rows .tr{margin-bottom:0}
  .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;align-items:start}
  .kvs{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
  .news-list{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;align-items:start}

  .docs{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .doc img{height:86px}
  .doc{font-size:10px}
  .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
  .snack{left:auto;right:16px;max-width:420px}
}

/* ------------------------------------------------------------------ >=768px
   Tablets: the 9-12px phone type scale is too small here, so lift it. */
@media (min-width:768px){
  .wrap{padding:22px 26px}
  .ttl h1{font-size:17px}
  .card h3{font-size:13px}
  .card{padding:20px;border-radius:18px}

  .fld label{font-size:10.5px}
  .fld input,.fld select,.fld textarea{padding:13px 14px;font-size:15px}
  .fld textarea{min-height:96px}
  .btn{font-size:13px;padding:14px}
  .btn.sm{font-size:11px;padding:9px 16px}
  .tab{font-size:11.5px;padding:11px 8px}

  .pc{padding:12px 14px}
  .pc .k{font-size:10px}
  .pc .n{font-size:22px}
  .pf{font-size:10.5px;padding:8px 14px}
  .prod .ph{font-size:12px;padding:9px 14px}

  .kv{font-size:13px;padding:12px 2px}
  .kv span{font-size:11px}
  .kv b.big{font-size:16px}
  .tr .th{font-size:12px;padding:10px 14px}
  .tr .tb{font-size:12px;padding:11px 14px;gap:4px 22px}
  .tr .tb b{font-size:13.5px}
  .tr .tb i{font-size:9.5px}
  .news-i b{font-size:14px}
  .news-i small{font-size:10.5px}
  .html-content{font-size:14px;line-height:1.8}
  .nd{font-size:13px;padding:44px 20px}

  .chart-wrap{height:340px}
  .gauge{width:180px;height:180px}
  .gauge b{font-size:30px}
  .modal>div{max-width:440px;padding:26px}
  .modal h4{font-size:16px}
  .modal p{font-size:13px}
  .site-foot .fcols{grid-template-columns:repeat(4,1fr)}
  .site-foot{padding:26px 26px 78px}
  .hdr-logo{max-width:200px}
}

/* ----------------------------------------------------------------- >=1024px
   Desktop. The off-canvas drawer becomes a permanent sidebar, the bottom tab
   bar retires, and header + content share one centred measure. */
@media (min-width:1024px){
  /* real scrollbars return - hidden ones are an app affordance, not a web one */
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:rgba(217,198,76,.32);border-radius:8px}
  ::-webkit-scrollbar-thumb:hover{background:rgba(217,198,76,.55)}

  /* drawer -> permanent sidebar */
  .nav{
    width:264px;transform:none;visibility:visible;pointer-events:auto;
    box-shadow:none;transition:none;
    padding:18px 14px 28px;
  }
  .nav.on{box-shadow:none;transform:none}
  .scrim{display:none}
  .hdr .ib.menu{display:none}
  .ng{margin-bottom:16px}
  .ng>p{font-size:9.5px;margin-bottom:7px;padding-left:5px}
  .ng>div{grid-template-columns:1fr;gap:3px}
  .ni{
    flex-direction:row;justify-content:flex-start;text-align:left;
    gap:11px;padding:10px 12px;font-size:11.5px;
    opacity:1;transform:none;animation:none;
  }
  .ni svg{width:19px;height:19px;flex:0 0 19px}
  .nav-top{padding-bottom:16px;margin-bottom:16px}
  .nav-top b{font-size:14px}

  /* content clears the sidebar; mobile tab bar is gone */
  .app{padding-left:264px;padding-bottom:0}
  .fnav{display:none}
  .fcr{position:static;padding:12px 2px 0;font-size:10px}

  .hdr{padding:14px 32px}
  .hdr-in,.wrap,.site-foot .fin{width:100%;max-width:1240px;margin:0 auto}
  .wrap{padding:28px 32px 40px}
  /* forms and prose read badly at full width, so they get a tighter measure */
  .wrap.narrow{max-width:760px}
  /* a standalone action button shouldn't stretch the whole content column */
  .wrap>.btn{max-width:340px;margin-left:auto;margin-right:auto}
  .site-foot{padding:30px 32px 96px}
  .hdr-logo{max-width:240px}

  /* floating actions and toasts reposition now that the tab bar is gone */
  .fab{bottom:26px;width:50px;height:50px}
  .fab svg{width:25px;height:25px}
  .fab.wa{left:auto;right:88px}
  .fab.cl{right:24px}
  .snack{right:24px;bottom:92px;max-width:400px;font-size:12.5px}

  .modal>div{max-width:520px}
  .tops{gap:14px}
  .prods{gap:14px}
}

/* ----------------------------------------------------------------- >=1280px */
@media (min-width:1280px){
  .wrap{padding:32px 40px 48px}
  .tops{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
  .top .v{font-size:24px}
  .top .nm{font-size:10.5px}
  .prods{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
  .rows{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
  .chart-wrap{height:420px}
  .fgrid{grid-template-columns:repeat(3,1fr)}
  .news-list{grid-template-columns:repeat(3,1fr)}
  .hdr-logo{height:48px}
  .hdr-t b{font-size:19px}
}

/* ----------------------------------------------------------------- >=1600px */
@media (min-width:1600px){
  .hdr-in,.wrap,.site-foot .fin{max-width:1480px}
  .wrap.narrow{max-width:820px}
  .chart-wrap{height:480px}
}

/* ------------------------------------------------ short landscape phones
   Reclaim vertical space when the viewport is wide but very shallow. */
@media (max-height:480px) and (orientation:landscape) and (max-width:1023px){
  .mq{display:none}
  .hdr{position:static}
  .wrap{padding:10px 14px}
  .gauge{width:120px;height:120px;margin:4px auto 10px}
  .chart-wrap{height:200px}
}

/* --------------------------------------------------------- pointer devices
   Hover affordances only where a real cursor exists, so touch is unaffected. */
@media (hover:hover) and (pointer:fine){
  .prod:hover:not(:active){transform:translateY(-2px);border-color:var(--gold);box-shadow:0 14px 34px rgba(0,0,0,.45)}
  .tr:hover{border-color:var(--gold)}
  .news-i:hover b{color:var(--gold)}
  .doc:hover{border-color:var(--gold)}
  .btn:hover{filter:brightness(1.07)}
  .tab:hover:not(.on){color:var(--txt)}
  .chip:hover:not(.on){border-color:var(--gold)}
  .fi:hover{color:var(--gold)}
  .fab:hover{filter:brightness(1.12)}
  .kv:hover b{color:var(--gold-2)}
  .site-foot a:hover{color:var(--gold)}
}

/* ------------------------------------------------------ reduced motion
   This design animates heavily (aurora, shine, float, sparks). Respect the
   OS preference and stand it all down. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .spark{display:none}
  .mq span{padding-left:0;animation:none}
}

/* ------------------------------------------------------------------- print
   Rate sheets get printed, so make that produce something usable. */
@media print{
  .hdr,.mq,.fnav,.nav,.scrim,.fab,.snack,.modal,.offline,.tabs,.site-foot,.fcr{display:none!important}
  body::before,body::after{display:none}
  body{background:#fff;color:#000}
  .app{padding:0;min-height:0}
  .wrap{max-width:none;padding:0;gap:10px}
  .card,.prod,.tr,.top{background:#fff;border-color:#bbb;box-shadow:none;break-inside:avoid}
  .card::before{display:none}
  .card h3,.ttl h1,.kv b,.top .nm{color:#000}
  .pc{background:#fff}
  .up,.dn{background-color:transparent!important}
}

/* ------------------------------------------------ live-rate board on phones
   Keep the page itself inside the viewport. Only the product well scrolls
   when the feed is longer than the available space, and two cards per row
   expose substantially more rates at a glance. */
@media (max-width:767px){
  body[data-page="liverates"]{height:100dvh;overflow:hidden}
  body[data-page="liverates"] .app{
    height:100dvh;min-height:0;overflow:hidden;
    padding-bottom:calc(58px + env(safe-area-inset-bottom));
  }
  body[data-page="liverates"] .hdr{
    position:static;flex:0 0 auto;padding:calc(4px + env(safe-area-inset-top)) 8px 4px;
  }
  body[data-page="liverates"] .hdr-in{gap:7px}
  body[data-page="liverates"] .hdr-logo{height:30px;max-width:31vw}
  body[data-page="liverates"] .hdr-t b{font-size:13px;letter-spacing:.15px}
  body[data-page="liverates"] .hdr-t span{font-size:8px;letter-spacing:1.3px}
  body[data-page="liverates"] .ib{width:44px;height:44px;flex-basis:44px;border-radius:12px}
  body[data-page="liverates"] .hdr+.mq{flex:0 0 auto;padding:2px 0;font-size:9px;line-height:1.35}

  body[data-page="liverates"] .wrap{
    flex:1;min-height:0;overflow:hidden;padding:6px 8px 5px;gap:5px;
  }
  body[data-page="liverates"] .tabs{flex:0 0 auto;padding:2px;gap:2px;border-radius:12px}
  body[data-page="liverates"] .tab{
    min-height:44px;display:grid;place-items:center;padding:5px 3px;border-radius:9px;
    font-size:9.5px;line-height:1.1;letter-spacing:.55px;
  }

  body[data-page="liverates"] .tops{flex:0 0 auto;gap:4px}
  body[data-page="liverates"] .top{padding:4px 3px;border-radius:10px;box-shadow:none}
  body[data-page="liverates"] .top .nm{font-size:8px;letter-spacing:.35px}
  body[data-page="liverates"] .top .v{font-size:15px;line-height:1.1;margin:2px 0 1px}
  body[data-page="liverates"] .top .hl{display:inline;font-size:7.5px;line-height:1.2}
  body[data-page="liverates"] .top .hl:first-of-type::after{content:'  /  ';color:var(--dim)}

  body[data-page="liverates"] #err.hide{display:none!important}
  body[data-page="liverates"] .ttl{flex:0 0 auto;min-height:18px;margin:0;gap:7px}
  body[data-page="liverates"] .ttl h1{font-size:10px;letter-spacing:1.15px}

  body[data-page="liverates"] .prods{
    flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:max-content;align-content:start;gap:5px;overflow-y:auto;overflow-x:hidden;
    overscroll-behavior:contain;scrollbar-width:none;padding:1px 1px 4px;
  }
  body[data-page="liverates"] .prods::-webkit-scrollbar{display:none}
  body[data-page="liverates"] .prod{min-width:0;border-radius:10px;box-shadow:none}
  body[data-page="liverates"] .prod .ph{
    min-height:24px;padding:3px 6px;gap:4px;font-size:9px;line-height:1.1;letter-spacing:.35px;
  }
  body[data-page="liverates"] .prod .ph .pn{
    flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  body[data-page="liverates"] .prod .ph .pos{font-size:7px;padding:2px 4px;letter-spacing:0}
  body[data-page="liverates"] .prod .ph .pos:empty{display:none}
  body[data-page="liverates"] .pc{min-width:0;padding:4px 5px}
  body[data-page="liverates"] .pc .k{font-size:7px;line-height:1.15;letter-spacing:.45px}
  body[data-page="liverates"] .pc .n{
    overflow:hidden;text-overflow:ellipsis;font-size:clamp(13px,4.2vw,17px);
    line-height:1.2;letter-spacing:-.02em;
  }
  body[data-page="liverates"] .pf{
    justify-content:space-between;gap:4px;padding:3px 5px;font-size:7.5px;line-height:1.15;
  }
  body[data-page="liverates"] .pf span{min-width:0;white-space:nowrap}

  body[data-page="liverates"] .wrap>.btn{flex:0 0 44px;min-height:44px;padding:7px;font-size:10px}
  body[data-page="liverates"] .wrap>.mq,
  body[data-page="liverates"] .wrap>.fcr,
  body[data-page="liverates"] .site-foot,
  body[data-page="liverates"] .fab{display:none}
  body[data-page="liverates"] .fnav{padding-top:3px;padding-bottom:calc(3px + env(safe-area-inset-bottom))}
  body[data-page="liverates"] .fi{min-height:52px;padding:4px 2px;gap:1px;font-size:7.5px}
  body[data-page="liverates"] .fi svg{width:19px;height:19px}
}