
/* D.N.A Style Games skin for /studio/ — visual only (injected by the durakjoy-hub-overlay Worker) */
@font-face{font-family:"Rubik";font-style:normal;font-weight:300 800;font-display:swap;src:url(/assets/fonts/rubik-hebrew.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Rubik";font-style:normal;font-weight:300 800;font-display:swap;src:url(/assets/fonts/rubik-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --dna-bg:#07071a;--dna-bg2:#0d0c26;--dna-panel:rgba(22,20,58,.72);--dna-line:rgba(160,150,255,.16);
  --dna-ink:#f2f1ff;--dna-ink2:#b9b3e6;--dna-mut:#8e88bf;--dna-cy:#22d3ee;--dna-mg:#e040fb;--dna-vi:#8b5cf6;
  --dna-grad:linear-gradient(100deg,var(--dna-cy),var(--dna-vi) 50%,var(--dna-mg));
  /* studio variables re-pointed */
  --onyx:var(--dna-bg);--onyx2:var(--dna-bg2);--wine:#16143a;--burgundy:#3b2a8a;
  --gold:var(--dna-cy);--gold-hi:#9be7f5;--gold-lo:var(--dna-vi);--gold-line:rgba(34,211,238,.45);
  --gold-grad:var(--dna-grad);--ink:var(--dna-ink);--ink-dim:var(--dna-ink2);
  --display:"Rubik",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ui:"Rubik",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* trade-terminal variables re-pointed */
  --bg:var(--dna-bg);--bg2:var(--dna-bg2);--card:rgba(22,20,58,.72);--line:var(--dna-line);--gold2:#9be7f5;--txt:var(--dna-ink);--dim:var(--dna-mut);
  color-scheme:dark}
html{background:var(--dna-bg)}
body{font-family:"Rubik",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;-webkit-font-smoothing:antialiased}
h1,h2,h3,.serif{font-family:"Rubik",system-ui,sans-serif!important}
.bg{background:radial-gradient(1000px 520px at 85% 0%,rgba(224,64,251,.16),transparent 60%),radial-gradient(900px 520px at 10% 20%,rgba(34,211,238,.13),transparent 60%),linear-gradient(180deg,var(--dna-bg),var(--dna-bg2) 60%,var(--dna-bg))!important}
:focus-visible{outline:3px solid var(--dna-cy)!important;outline-offset:3px}

/* header (both pages) */
header.top,body>div.top{position:sticky;top:0;z-index:60;display:flex;align-items:center;flex-wrap:nowrap;gap:12px;height:64px;max-width:none;width:100%;margin:0;padding:0 max(16px,calc((100% - 1180px)/2));padding-top:env(safe-area-inset-top);background:rgba(7,7,26,.66)!important;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--dna-line)}
.top .brand{display:flex!important;align-items:center;gap:10px;text-decoration:none;color:var(--dna-ink)!important;font-size:inherit;letter-spacing:normal;text-transform:none;opacity:1;flex:none;direction:ltr}
.top .brand img{width:38px;height:38px;filter:drop-shadow(0 0 10px rgba(224,64,251,.45))}
.dna-bt{display:flex;flex-direction:column;line-height:1}
.dna-bt b{font-weight:800;letter-spacing:.12em;font-size:15px;color:var(--dna-ink)}
.dna-bt small{font-weight:600;letter-spacing:.32em;font-size:10px;color:var(--dna-ink2);margin-top:4px}
.dna-actions{margin-inline-start:auto;display:flex;align-items:center;gap:8px;position:relative}
.dna-btn{display:flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--dna-line);background:rgba(255,255,255,.04);color:var(--dna-ink);font:600 14px/1 "Rubik",system-ui,sans-serif;cursor:pointer;text-decoration:none;white-space:nowrap}
.dna-btn:hover{border-color:rgba(34,211,238,.5);background:rgba(34,211,238,.08)}
.dna-acc{padding:0 12px 0 5px;background:linear-gradient(#14123a,#14123a) padding-box,var(--dna-grad) border-box;border:1.5px solid transparent;color:#fff}
.dna-av{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--dna-grad);color:#fff;font-weight:800;font-size:14px}
.dna-nm{max-width:9.5em;overflow:hidden;text-overflow:ellipsis}
.dna-chev{transition:transform .2s}
[aria-expanded="true"]>.dna-chev{transform:rotate(180deg)}
.dna-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:190px;margin:0;padding:6px;background:#14123a;border:1px solid var(--dna-line);border-radius:14px;box-shadow:0 20px 50px -20px rgba(0,0,0,.8);z-index:70}
.dna-menu[hidden]{display:none!important}
.dna-menu a,.dna-menu button{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border:0;border-radius:10px;background:none;color:var(--dna-ink);font:500 15px/1.2 "Rubik",system-ui,sans-serif;cursor:pointer;text-align:start;text-decoration:none}
.dna-menu a:hover,.dna-menu button:hover{background:rgba(255,255,255,.06)}
.dna-menu .dna-out{color:#ff8fa3;font-weight:700;border-top:1px solid var(--dna-line);border-radius:0 0 10px 10px;margin-top:4px}
.dna-who{padding:8px 12px 10px;border-bottom:1px solid var(--dna-line);margin-bottom:4px}
.dna-who b{display:block;font-size:15px}.dna-who small{color:var(--dna-mut);font-size:12px;direction:ltr;display:block;overflow:hidden;text-overflow:ellipsis}
/* the studio's own language buttons become the dropdown menu */
html.dna-js header.top .langs{position:absolute;top:calc(100% + 8px);inset-inline-end:0;display:none;flex-direction:column;gap:2px;min-width:170px;padding:6px;background:#14123a;border:1px solid var(--dna-line);border-radius:14px;box-shadow:0 20px 50px -20px rgba(0,0,0,.8);z-index:70;direction:inherit}
html.dna-js header.top .langs.dna-open{display:flex}
header.top .langs button{width:100%;min-height:40px;justify-content:space-between;display:flex;align-items:center;text-align:start;color:var(--dna-ink)!important;background:none!important;border:0!important;border-radius:10px!important;font:500 15px/1 "Rubik",system-ui,sans-serif!important;padding:10px 12px!important}
header.top .langs button:hover{background:rgba(255,255,255,.06)!important}
header.top .langs button[aria-pressed=true]::after{content:"✓";color:var(--dna-cy);font-weight:700}
html:not(.dna-js) header.top .langs button[aria-pressed=true]{background:var(--dna-grad)!important;color:#fff!important}
@media (max-width:520px){.dna-nm,.dna-lt{display:none}.dna-acc{padding:0 5px}.dna-bt small{letter-spacing:.24em}}

/* studio body */
main{max-width:1180px}
.hero{padding:1.4rem 0 1.2rem}
.hero::before{inset:-30px 0!important;background:radial-gradient(60% 55% at 50% 30%,rgba(224,64,251,.16),rgba(34,211,238,.06) 45%,transparent 72%)!important}
html{overflow-x:clip}
.hero h1{background:var(--dna-grad)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;font-weight:800;letter-spacing:-.01em}
.hero-av,.avatar{background:var(--dna-grad)!important;color:#fff!important;font-family:"Rubik",sans-serif!important;font-weight:800!important;border-radius:16px!important;box-shadow:0 10px 28px -10px rgba(224,64,251,.7)}
.hero-lvl{border-color:var(--gold-line)!important;color:var(--gold-hi)!important;background:rgba(34,211,238,.08)!important}
.card{background:var(--dna-panel)!important;border:1px solid var(--dna-line)!important;border-radius:20px!important;box-shadow:0 20px 50px -20px rgba(0,0,0,.7)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.card h2{color:var(--dna-ink)!important;font-weight:700}
.card h2 .tag,.badge,.badge-demo,.demo-badge{background:rgba(224,64,251,.12)!important;border:1px solid rgba(224,64,251,.45)!important;color:#f3b7ff!important}
.note{border-inline-start-color:var(--dna-vi)!important}
.btn,.tabs button.on,.chip.on,.fiat-tog .on,.tf .on,.sub-tabs .on,.ttabs .on{background:var(--dna-grad)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 10px 28px -12px rgba(224,64,251,.7)}
.btn.ghost{background:rgba(255,255,255,.04)!important;color:var(--dna-ink)!important;border:1px solid var(--dna-line)!important;box-shadow:none}
.mini{border-color:rgba(34,211,238,.5)!important;color:#9be7f5!important}
input,select{background:rgba(255,255,255,.04)!important;border:1px solid var(--dna-line)!important;color:var(--dna-ink)!important;border-radius:12px!important}
select option{background:#14123a;color:var(--dna-ink)}
input:focus,select:focus{outline:2px solid var(--dna-cy)!important;border-color:transparent!important}
#tradeLink{background:var(--dna-grad)!important;color:#fff!important;border-radius:12px!important;box-shadow:0 10px 28px -12px rgba(224,64,251,.7)}
.grow2{background:rgba(255,255,255,.03)!important;border-color:var(--dna-line)!important}
#btnOut{border-color:rgba(255,143,163,.5)!important;color:#ffb3c0!important}
footer{color:var(--dna-mut)!important}
footer a{color:var(--dna-ink2)!important}
/* trade terminal specifics */
body>div.top .demo-badge{font-size:.62rem}
body>div.top .lang{height:40px;border-radius:12px;border:1px solid var(--dna-line);color:var(--dna-ink);background:rgba(255,255,255,.04);padding:0 12px;font-weight:600}
body>div.top #backL{color:var(--dna-ink2)}
@media (max-width:620px){body>div.top #tick,body>div.top .demo-badge{display:none}}

/* lock screen */
html.dna-locked body>*:not(#dnaLock){visibility:hidden!important}
html.dna-locked body{overflow:hidden}
#dnaLock{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:20px;background:radial-gradient(900px 500px at 80% 0%,rgba(224,64,251,.18),transparent 60%),radial-gradient(800px 500px at 10% 30%,rgba(34,211,238,.14),transparent 60%),rgba(7,7,26,.97);font-family:"Rubik",system-ui,sans-serif;color:var(--dna-ink);visibility:visible!important}
#dnaLock[hidden]{display:none}
.dna-lbox{width:min(400px,100%);background:var(--dna-panel);border:1px solid var(--dna-line);border-radius:22px;padding:26px 22px 20px;box-shadow:0 30px 70px -25px rgba(0,0,0,.9);text-align:center}
.dna-lbox img{width:56px;height:56px;margin:0 auto 6px;display:block;filter:drop-shadow(0 0 12px rgba(224,64,251,.5))}
.dna-lav{width:64px;height:64px;margin:6px auto 10px;border-radius:18px;display:grid;place-items:center;background:var(--dna-grad);font-weight:800;font-size:28px;color:#fff;box-shadow:0 10px 28px -10px rgba(224,64,251,.7)}
.dna-lbox h2{margin:4px 0 4px;font-size:22px;font-weight:800}
.dna-lbox p{margin:0 0 14px;color:var(--dna-ink2);font-size:14px;line-height:1.5}
.dna-lbox .dna-lname{color:var(--dna-ink);font-weight:700}
.dna-lbox label{display:block;text-align:start;font-size:13px;color:var(--dna-ink2);margin:0 0 6px}
.dna-lbox input{width:100%;height:46px;padding:0 14px;font:500 16px "Rubik",system-ui,sans-serif;direction:ltr}
.dna-lbox .dna-go{width:100%;height:48px;margin-top:12px;border:0;border-radius:14px;background:var(--dna-grad);color:#fff;font:800 16px "Rubik",system-ui,sans-serif;cursor:pointer;box-shadow:0 10px 28px -10px rgba(224,64,251,.7)}
.dna-lerr{min-height:1.3em;color:#ff8fa3;font-size:13px;margin:8px 0 0}
.dna-lout{margin-top:10px;background:none;border:0;color:var(--dna-ink2);font:500 14px "Rubik",system-ui,sans-serif;text-decoration:underline;cursor:pointer}
