/* ── Paleta em dois temas ──────────────────────────────────────────────────
   Gerado das cores que já existiam no arquivo (scratchpad/tema2.py).

   Véu (alfa < 0.5) vira preto no claro: branco translúcido sobre fundo claro
   some, e sombra é preta nos dois temas. Cor sólida espelha a luminosidade.
   As cromáticas de mercado NÃO invertem — verde é alta e vermelho é baixa em
   qualquer tema — só escurecem para contrastar sobre claro.

   385 tokens. */
:root {
  --k0:#000;
  --k1:#0005;
  --k2:#0006;
  --k3:#0007;
  --k4:#0008;
  --k5:#0009;
  --k6:#000a;
  --k7:#000b;
  --k8:#000c;
  --k9:#000d;
  --k10:#000e;
  --k11:#06120e;
  --k12:#070707;
  --k13:#07110d;
  --k14:#07120e;
  --k15:#080808;
  --k16:#080808e8;
  --k17:#090909;
  --k18:#090909de;
  --k19:#0a0a0a;
  --k20:#0a0a0af2;
  --k21:#0a1713;
  --k22:#0b0b0b;
  --k23:#0b0b0be8;
  --k24:#0b1915;
  --k25:#0c0c0c;
  --k26:#0d0d0d;
  --k27:#0d0d0d77;
  --k28:#0d0d0d99;
  --k29:#0d0d0da8;
  --k30:#0d0d0dc9;
  --k31:#0d0d0ddd;
  --k32:#0d0d0df2;
  --k33:#0d0d0dfa;
  --k34:#0e0e0e;
  --k35:#0e0e0efa;
  --k36:#0e1014;
  --k37:#101010;
  --k38:#101010a6;
  --k39:#101010f2;
  --k40:#101010f4;
  --k41:#10241d;
  --k42:#111;
  --k43:#111111;
  --k44:#111111a8;
  --k45:#111111b8;
  --k46:#111111cc;
  --k47:#111111ef;
  --k48:#1114;
  --k49:#121212;
  --k50:#121419;
  --k51:#141414;
  --k52:#14161bfa;
  --k53:#151515;
  --k54:#151515fa;
  --k55:#161616;
  --k56:#17070a;
  --k57:#171717;
  --k58:#171717e8;
  --k59:#171717ed;
  --k60:#181818;
  --k61:#190508;
  --k62:#190d10;
  --k63:#191919;
  --k64:#191b20;
  --k65:#1a1a1a;
  --k66:#1b0509;
  --k67:#1b1b1b;
  --k68:#1b1b1be8;
  --k69:#1c0d11;
  --k70:#1c1c1c;
  --k71:#1d1d1d;
  --k72:#1d1d1deb;
  --k73:#1f1f1f;
  --k74:#202020;
  --k75:#20202030;
  --k76:#202329;
  --k77:#222222e8;
  --k78:#232323;
  --k79:#242424;
  --k80:#24272d;
  --k81:#245b49;
  --k82:#24654f;
  --k83:#252525;
  --k84:#262626;
  --k85:#271116;
  --k86:#272727;
  --k87:#292929;
  --k88:#292929e8;
  --k89:#2a2a2a;
  --k90:#2b2b2b;
  --k91:#2c2c2c;
  --k92:#2e2e2e;
  --k93:#2fd6a3;
  --k94:#2fd6a31c;
  --k95:#2fd6a326;
  --k96:#2fd6a32e;
  --k97:#2fd6a333;
  --k98:#2fd6a340;
  --k99:#2fd6a34d;
  --k100:#2fd6a355;
  --k101:#30302e;
  --k102:#303030;
  --k103:#30343b;
  --k104:#323232;
  --k105:#333;
  --k106:#343434;
  --k107:#353532;
  --k108:#373737;
  --k109:#383838;
  --k110:#3a1518;
  --k111:#3a3a38;
  --k112:#3a3a3a;
  --k113:#3b3b38;
  --k114:#3b3b3b55;
  --k115:#3bd6a0;
  --k116:#3bd6a026;
  --k117:#3c3c3c;
  --k118:#3d3d3d;
  --k119:#404040;
  --k120:#41413e;
  --k121:#414141;
  --k122:#424242;
  --k123:#444;
  --k124:#484846;
  --k125:#484848;
  --k126:#494949;
  --k127:#4a4a47;
  --k128:#4a4a4a;
  --k129:#4c565f;
  --k130:#4e4e4b;
  --k131:#4f4f4c;
  --k132:#555;
  --k133:#55e7b4;
  --k134:#565656;
  --k135:#575757;
  --k136:#5a5a56;
  --k137:#5a5a5a;
  --k138:#5b5b5b;
  --k139:#5d5d5d;
  --k140:#5e5e5b;
  --k141:#5f5f5c;
  --k142:#61615e;
  --k143:#646460;
  --k144:#666;
  --k145:#666662;
  --k146:#67303a;
  --k147:#686864;
  --k148:#686865;
  --k149:#696965;
  --k150:#696966;
  --k151:#6d6d69;
  --k152:#6e6e6a;
  --k153:#6f6f6b;
  --k154:#70303a;
  --k155:#70706c;
  --k156:#73736f;
  --k157:#747470;
  --k158:#777;
  --k159:#777773;
  --k160:#797975;
  --k161:#7a7a76;
  --k162:#7d7d79;
  --k163:#7dffa9;
  --k164:#858581;
  --k165:#858582;
  --k166:#868682;
  --k167:#878783;
  --k168:#888;
  --k169:#888884;
  --k170:#898985;
  --k171:#8a8a85;
  --k172:#8a8a86;
  --k173:#8b8b87;
  --k174:#8c8c87;
  --k175:#8c8c88;
  --k176:#8d8d88;
  --k177:#8d8d89;
  --k178:#8e8e8a;
  --k179:#8e8e8b;
  --k180:#8f8f8b;
  --k181:#8f8f8c;
  --k182:#8f8f8d;
  --k183:#92928d;
  --k184:#92928e;
  --k185:#929292;
  --k186:#959591;
  --k187:#959595;
  --k188:#999;
  --k189:#999995;
  --k190:#9a9a96;
  --k191:#9d9d99;
  --k192:#9f9f9b;
  --k193:#a1a19c;
  --k194:#a4a4a0;
  --k195:#a6a6a1;
  --k196:#a7a7a2;
  --k197:#a8a8a4;
  --k198:#aaa;
  --k199:#aaa9a3;
  --k200:#aaa9a4;
  --k201:#adadaa;
  --k202:#b0b0ab;
  --k203:#b5b5b0;
  --k204:#b5b5b1;
  --k205:#b6b6ae;
  --k206:#b7b7b1;
  --k207:#b7b7b2;
  --k208:#b9b9b5;
  --k209:#bababa;
  --k210:#bbb;
  --k211:#bcbcb7;
  --k212:#bcbcb8;
  --k213:#bdbdb7;
  --k214:#bdbdb8;
  --k215:#c6c6c2;
  --k216:#c7c7c2;
  --k217:#c9c9c4;
  --k218:#c9c9c6;
  --k219:#cacac5;
  --k220:#cbcbc6;
  --k221:#ccc;
  --k222:#cfcfca;
  --k223:#d0d0cb;
  --k224:#d2d2cc;
  --k225:#d2d2cd;
  --k226:#d3d3cd;
  --k227:#d3d3ce;
  --k228:#d5d5d0;
  --k229:#d7d7d1;
  --k230:#d7d7d2;
  --k231:#d8d8d2;
  --k232:#d8d8d3;
  --k233:#d9d9d3;
  --k234:#d9d9d4;
  --k235:#d9d9d5;
  --k236:#dcdcd8;
  --k237:#ddd;
  --k238:#deded9;
  --k239:#e2e2dd;
  --k240:#e2e2de;
  --k241:#e4e4df;
  --k242:#e5e5df;
  --k243:#e5e5e0;
  --k244:#e6e6e1;
  --k245:#e6e6e2;
  --k246:#e7e7e2;
  --k247:#e8e8e3;
  --k248:#e8e8e4;
  --k249:#e9e9e2;
  --k250:#e9e9e4;
  --k251:#e9e9e5;
  --k252:#ededE8;
  --k253:#eee;
  --k254:#eeeeea;
  --k255:#efefea;
  --k256:#f0f0ea;
  --k257:#f0f0eb;
  --k258:#f0f0ec;
  --k259:#f0f0ed;
  --k260:#f1f1ec;
  --k261:#f1f1ed;
  --k262:#f2f2ec;
  --k263:#f2f2ed;
  --k264:#f3f3ed;
  --k265:#f3f3ee;
  --k266:#f4f4ee;
  --k267:#f4f4ef;
  --k268:#f5f5ef;
  --k269:#f5f5f0;
  --k270:#f5f5f1;
  --k271:#f6f6f1;
  --k272:#fade;
  --k273:#fafaf4;
  --k274:#ff5d73;
  --k275:#ff5d731c;
  --k276:#ff5d7326;
  --k277:#ff5d7333;
  --k278:#ff5d7355;
  --k279:#ff6378;
  --k280:#ff637826;
  --k281:#ff7a7a;
  --k282:#ff7d8e;
  --k283:#ff8181;
  --k284:#ff909d;
  --k285:#ff9292;
  --k286:#ff9a9a;
  --k287:#ffb3b3;
  --k288:#fff;
  --k289:#fff2;
  --k290:#fff8;
  --k291:#ffffff00;
  --k292:#ffffff02;
  --k293:#ffffff03;
  --k294:#ffffff04;
  --k295:#ffffff05;
  --k296:#ffffff06;
  --k297:#ffffff07;
  --k298:#ffffff08;
  --k299:#ffffff09;
  --k300:#ffffff0a;
  --k301:#ffffff0b;
  --k302:#ffffff0c;
  --k303:#ffffff0d;
  --k304:#ffffff0e;
  --k305:#ffffff0f;
  --k306:#ffffff10;
  --k307:#ffffff11;
  --k308:#ffffff12;
  --k309:#ffffff13;
  --k310:#ffffff14;
  --k311:#ffffff15;
  --k312:#ffffff16;
  --k313:#ffffff17;
  --k314:#ffffff18;
  --k315:#ffffff19;
  --k316:#ffffff1a;
  --k317:#ffffff1c;
  --k318:#ffffff1d;
  --k319:#ffffff1e;
  --k320:#ffffff1f;
  --k321:#ffffff20;
  --k322:#ffffff22;
  --k323:#ffffff23;
  --k324:#ffffff24;
  --k325:#ffffff25;
  --k326:#ffffff26;
  --k327:#ffffff27;
  --k328:#ffffff28;
  --k329:#ffffff2a;
  --k330:#ffffff2b;
  --k331:#ffffff2c;
  --k332:#ffffff2d;
  --k333:#ffffff2e;
  --k334:#ffffff2f;
  --k335:#ffffff30;
  --k336:#ffffff31;
  --k337:#ffffff32;
  --k338:#ffffff34;
  --k339:#ffffff35;
  --k340:#ffffff38;
  --k341:#ffffff3d;
  --k342:#ffffff40;
  --k343:#ffffff42;
  --k344:#ffffff44;
  --k345:#ffffff45;
  --k346:#ffffff47;
  --k347:#ffffff4e;
  --k348:#ffffff55;
  --k349:#ffffff64;
  --k350:#ffffff66;
  --k351:#ffffff72;
  --k352:#ffffff73;
  --k353:#ffffff82;
  --k354:rgba(0,0,0,.5);
  --k355:rgba(125,255,169,.07);
  --k356:rgba(125,255,169,.3);
  --k357:rgba(20,20,20,.94);
  --k358:rgba(255,122,122,.07);
  --k359:rgba(255,122,122,.3);
  --k360:rgba(255,122,122,.34);
  --k361:rgba(255,255,255,.015);
  --k362:rgba(255,255,255,.02);
  --k363:rgba(255,255,255,.025);
  --k364:rgba(255,255,255,.03);
  --k365:rgba(255,255,255,.035);
  --k366:rgba(255,255,255,.04);
  --k367:rgba(255,255,255,.05);
  --k368:rgba(255,255,255,.06);
  --k369:rgba(255,255,255,.07);
  --k370:rgba(255,255,255,.08);
  --k371:rgba(255,255,255,.09);
  --k372:rgba(255,255,255,.10);
  --k373:rgba(255,255,255,.12);
  --k374:rgba(255,255,255,.14);
  --k375:rgba(255,255,255,.16);
  --k376:rgba(255,255,255,.18);
  --k377:rgba(255,255,255,.22);
  --k378:rgba(255,255,255,.24);
  --k379:rgba(255,255,255,.26);
  --k380:rgba(255,255,255,.5);
  --k381:rgba(255,255,255,.55);
  --k382:rgba(255,255,255,.75);
  --k383:rgba(255,255,255,.85);
  --k384:rgba(255,255,255,.92);
}

:root[data-theme="light"] {
  --k0:rgb(247,247,247);
  --k1:rgba(0,0,0,0.333);
  --k2:rgba(0,0,0,0.4);
  --k3:rgba(0,0,0,0.467);
  --k4:rgba(247,247,247,0.533);
  --k5:rgba(247,247,247,0.6);
  --k6:rgba(247,247,247,0.667);
  --k7:rgba(247,247,247,0.733);
  --k8:rgba(247,247,247,0.8);
  --k9:rgba(247,247,247,0.867);
  --k10:rgba(247,247,247,0.933);
  --k11:rgb(245,245,241);
  --k12:rgb(242,242,242);
  --k13:rgb(245,245,241);
  --k14:rgb(245,245,241);
  --k15:rgb(241,241,241);
  --k16:rgba(241,241,241,0.91);
  --k17:rgb(240,240,240);
  --k18:rgba(240,240,240,0.871);
  --k19:rgb(239,239,239);
  --k20:rgba(239,239,239,0.949);
  --k21:rgb(245,245,241);
  --k22:rgb(238,238,238);
  --k23:rgba(238,238,238,0.91);
  --k24:rgb(245,245,241);
  --k25:rgb(238,238,238);
  --k26:rgb(237,237,237);
  --k27:rgba(0,0,0,0.467);
  --k28:rgba(237,237,237,0.6);
  --k29:rgba(237,237,237,0.659);
  --k30:rgba(237,237,237,0.788);
  --k31:rgba(237,237,237,0.867);
  --k32:rgba(237,237,237,0.949);
  --k33:rgba(237,237,237,0.98);
  --k34:rgb(236,236,236);
  --k35:rgba(236,236,236,0.98);
  --k36:rgb(230,232,237);
  --k37:rgb(234,234,234);
  --k38:rgba(234,234,234,0.651);
  --k39:rgba(234,234,234,0.949);
  --k40:rgba(234,234,234,0.957);
  --k41:rgb(245,245,241);
  --k42:rgb(234,234,234);
  --k43:rgb(234,234,234);
  --k44:rgba(234,234,234,0.659);
  --k45:rgba(234,234,234,0.722);
  --k46:rgba(234,234,234,0.8);
  --k47:rgba(234,234,234,0.937);
  --k48:rgba(0,0,0,0.267);
  --k49:rgb(233,233,233);
  --k50:rgb(226,228,234);
  --k51:rgb(231,231,231);
  --k52:rgba(224,227,232,0.98);
  --k53:rgb(230,230,230);
  --k54:rgba(230,230,230,0.98);
  --k55:rgb(230,230,230);
  --k56:rgb(245,245,241);
  --k57:rgb(229,229,229);
  --k58:rgba(229,229,229,0.91);
  --k59:rgba(229,229,229,0.929);
  --k60:rgb(228,228,228);
  --k61:rgb(245,245,241);
  --k62:rgb(245,245,241);
  --k63:rgb(227,227,227);
  --k64:rgb(220,223,228);
  --k65:rgb(226,226,226);
  --k66:rgb(245,245,241);
  --k67:rgb(225,225,225);
  --k68:rgba(225,225,225,0.91);
  --k69:rgb(245,245,241);
  --k70:rgb(225,225,225);
  --k71:rgb(224,224,224);
  --k72:rgba(224,224,224,0.922);
  --k73:rgb(222,222,222);
  --k74:rgb(221,221,221);
  --k75:rgba(0,0,0,0.188);
  --k76:rgb(213,216,222);
  --k77:rgba(220,220,220,0.91);
  --k78:rgb(219,219,219);
  --k79:rgb(218,218,218);
  --k80:rgb(210,213,219);
  --k81:rgb(35,92,73);
  --k82:rgb(34,103,80);
  --k83:rgb(217,217,217);
  --k84:rgb(217,217,217);
  --k85:rgb(245,245,241);
  --k86:rgb(216,216,216);
  --k87:rgb(214,214,214);
  --k88:rgba(214,214,214,0.91);
  --k89:rgb(213,213,213);
  --k90:rgb(213,213,213);
  --k91:rgb(212,212,212);
  --k92:rgb(210,210,210);
  --k93:rgb(26,148,110);
  --k94:rgba(0,0,0,0.066);
  --k95:rgba(0,0,0,0.089);
  --k96:rgba(0,0,0,0.108);
  --k97:rgba(0,0,0,0.12);
  --k98:rgba(0,0,0,0.151);
  --k99:rgba(0,0,0,0.181);
  --k100:rgba(0,0,0,0.2);
  --k101:rgb(210,210,208);
  --k102:rgb(208,208,208);
  --k103:rgb(199,203,209);
  --k104:rgb(207,207,207);
  --k105:rgb(206,206,206);
  --k106:rgb(205,205,205);
  --k107:rgb(207,207,204);
  --k108:rgb(203,203,203);
  --k109:rgb(202,202,202);
  --k110:rgb(245,245,241);
  --k111:rgb(202,202,200);
  --k112:rgb(200,200,200);
  --k113:rgb(202,202,199);
  --k114:rgba(0,0,0,0.333);
  --k115:rgb(27,146,105);
  --k116:rgba(0,0,0,0.089);
  --k117:rgb(199,199,199);
  --k118:rgb(198,198,198);
  --k119:rgb(196,196,196);
  --k120:rgb(197,197,195);
  --k121:rgb(195,195,195);
  --k122:rgb(194,194,194);
  --k123:rgb(192,192,192);
  --k124:rgb(191,191,189);
  --k125:rgb(189,189,189);
  --k126:rgb(188,188,188);
  --k127:rgb(190,190,187);
  --k128:rgb(187,187,187);
  --k129:rgb(170,179,187);
  --k130:rgb(187,187,184);
  --k131:rgb(186,186,183);
  --k132:rgb(179,179,179);
  --k133:rgb(18,155,107);
  --k134:rgb(178,178,178);
  --k135:rgb(177,177,177);
  --k136:rgb(178,178,174);
  --k137:rgb(174,174,174);
  --k138:rgb(174,174,174);
  --k139:rgb(172,172,172);
  --k140:rgb(174,174,171);
  --k141:rgb(173,173,170);
  --k142:rgb(171,171,169);
  --k143:rgb(170,170,166);
  --k144:rgb(165,165,165);
  --k145:rgb(168,168,165);
  --k146:rgb(104,47,57);
  --k147:rgb(166,166,163);
  --k148:rgb(166,166,163);
  --k149:rgb(166,166,162);
  --k150:rgb(165,165,162);
  --k151:rgb(162,162,159);
  --k152:rgb(162,162,158);
  --k153:rgb(161,161,157);
  --k154:rgb(114,46,57);
  --k155:rgb(160,160,156);
  --k156:rgb(158,158,154);
  --k157:rgb(157,157,153);
  --k158:rgb(151,151,151);
  --k159:rgb(154,154,151);
  --k160:rgb(153,153,149);
  --k161:rgb(152,152,148);
  --k162:rgb(149,149,146);
  --k163:rgb(0,173,59);
  --k164:rgb(139,139,135);
  --k165:rgb(138,138,135);
  --k166:rgb(138,138,135);
  --k167:rgb(138,138,134);
  --k168:rgb(133,133,133);
  --k169:rgb(137,137,133);
  --k170:rgb(136,136,132);
  --k171:rgb(136,136,131);
  --k172:rgb(135,135,131);
  --k173:rgb(134,134,130);
  --k174:rgb(134,134,129);
  --k175:rgb(134,134,129);
  --k176:rgb(134,134,128);
  --k177:rgb(133,133,128);
  --k178:rgb(132,132,128);
  --k179:rgb(131,131,128);
  --k180:rgb(131,131,127);
  --k181:rgb(130,130,127);
  --k182:rgb(129,129,127);
  --k183:rgb(130,130,124);
  --k184:rgb(129,129,124);
  --k185:rgb(125,125,125);
  --k186:rgb(126,126,122);
  --k187:rgb(122,122,122);
  --k188:rgb(119,119,119);
  --k189:rgb(123,123,118);
  --k190:rgb(122,122,117);
  --k191:rgb(119,119,115);
  --k192:rgb(118,118,113);
  --k193:rgb(117,117,111);
  --k194:rgb(114,114,109);
  --k195:rgb(113,113,107);
  --k196:rgb(112,112,106);
  --k197:rgb(110,110,105);
  --k198:rgb(105,105,105);
  --k199:rgb(112,111,103);
  --k200:rgb(111,110,103);
  --k201:rgb(105,105,101);
  --k202:rgb(105,105,98);
  --k203:rgb(101,101,94);
  --k204:rgb(100,100,94);
  --k205:rgb(103,103,93);
  --k206:rgb(100,100,92);
  --k207:rgb(99,99,93);
  --k208:rgb(96,96,91);
  --k209:rgb(91,91,91);
  --k210:rgb(90,90,90);
  --k211:rgb(95,95,88);
  --k212:rgb(94,94,88);
  --k213:rgb(95,95,87);
  --k214:rgb(94,94,87);
  --k215:rgb(86,86,80);
  --k216:rgb(86,86,79);
  --k217:rgb(84,84,77);
  --k218:rgb(82,82,78);
  --k219:rgb(83,83,76);
  --k220:rgb(83,83,75);
  --k221:rgb(76,76,76);
  --k222:rgb(79,79,72);
  --k223:rgb(79,79,71);
  --k224:rgb(78,78,69);
  --k225:rgb(77,77,69);
  /* Hover do CTA primário: acompanha o --k262 acima (no claro o hover clareia). */
  --k226:rgb(45,45,42);
  --k227:rgb(76,76,68);
  --k228:rgb(74,74,67);
  --k229:rgb(74,74,64);
  --k230:rgb(73,73,65);
  --k231:rgb(73,73,64);
  --k232:rgb(72,72,64);
  --k233:rgb(73,73,63);
  --k234:rgb(71,71,63);
  --k235:rgb(70,70,63);
  --k236:rgb(68,68,61);
  --k237:rgb(62,62,62);
  --k238:rgb(67,67,59);
  --k239:rgb(64,64,55);
  --k240:rgb(63,63,55);
  --k241:rgb(63,63,53);
  --k242:rgb(63,63,52);
  --k243:rgb(62,62,52);
  --k244:rgb(61,61,51);
  --k245:rgb(60,60,52);
  --k246:rgb(61,61,50);
  --k247:rgb(60,60,49);
  --k248:rgb(58,58,50);
  --k249:rgb(62,62,47);
  --k250:rgb(59,59,48);
  --k251:rgb(58,58,49);
  --k252:rgb(57,57,44);
  --k253:rgb(47,47,47);
  --k254:rgb(54,54,44);
  --k255:rgb(55,55,42);
  --k256:rgb(56,56,40);
  --k257:rgb(55,55,41);
  --k258:rgb(53,53,42);
  --k259:rgb(51,51,43);
  --k260:rgb(54,54,40);
  --k261:rgb(52,52,41);
  /* Fundo do CTA primário no tema claro. Era rgb(55,55,38): a inversão
     automática do #f2f2ec do escuro (delta quente de 6) devolveu um delta de
     17, e em luminância baixa isso lê VERDE-OLIVA — o botão "Criar conta" e o
     "Entrar" do /login pareciam bug de cor, não marca. Mesmo branco quente,
     temperatura proporcional. Usado só como preenchimento (4 ocorrências). */
  --k262:rgb(27,27,25);
  --k263:rgb(54,54,39);
  --k264:rgb(55,55,37);
  --k265:rgb(53,53,38);
  --k266:rgb(55,55,35);
  --k267:rgb(53,53,36);
  --k268:rgb(54,54,34);
  --k269:rgb(52,52,35);
  --k270:rgb(50,50,36);
  --k271:rgb(52,52,34);
  --k272:rgba(173,0,104,0.933);
  --k273:rgb(121,121,53);
  --k274:rgb(173,0,24);
  --k275:rgba(0,0,0,0.11);
  --k276:rgba(0,0,0,0.149);
  --k277:rgba(0,0,0,0.2);
  --k278:rgba(0,0,0,0.333);
  --k279:rgb(173,0,23);
  --k280:rgba(0,0,0,0.149);
  --k281:rgb(173,0,0);
  --k282:rgb(173,0,23);
  --k283:rgb(173,0,0);
  --k284:rgb(173,0,20);
  --k285:rgb(173,0,0);
  --k286:rgb(173,0,0);
  --k287:rgb(173,0,0);
  --k288:rgb(33,33,33);
  --k289:rgba(0,0,0,0.08);
  --k290:rgba(33,33,33,0.533);
  --k291:rgba(0,0,0,0.0);
  --k292:rgba(0,0,0,0.005);
  --k293:rgba(0,0,0,0.007);
  --k294:rgba(0,0,0,0.009);
  --k295:rgba(0,0,0,0.012);
  --k296:rgba(0,0,0,0.014);
  --k297:rgba(0,0,0,0.016);
  --k298:rgba(0,0,0,0.019);
  --k299:rgba(0,0,0,0.021);
  --k300:rgba(0,0,0,0.024);
  --k301:rgba(0,0,0,0.026);
  --k302:rgba(0,0,0,0.028);
  --k303:rgba(0,0,0,0.031);
  --k304:rgba(0,0,0,0.033);
  --k305:rgba(0,0,0,0.035);
  --k306:rgba(0,0,0,0.038);
  --k307:rgba(0,0,0,0.04);
  --k308:rgba(0,0,0,0.042);
  --k309:rgba(0,0,0,0.045);
  --k310:rgba(0,0,0,0.047);
  --k311:rgba(0,0,0,0.049);
  --k312:rgba(0,0,0,0.052);
  --k313:rgba(0,0,0,0.054);
  --k314:rgba(0,0,0,0.056);
  --k315:rgba(0,0,0,0.059);
  --k316:rgba(0,0,0,0.061);
  --k317:rgba(0,0,0,0.066);
  --k318:rgba(0,0,0,0.068);
  --k319:rgba(0,0,0,0.071);
  --k320:rgba(0,0,0,0.073);
  --k321:rgba(0,0,0,0.075);
  --k322:rgba(0,0,0,0.08);
  --k323:rgba(0,0,0,0.082);
  --k324:rgba(0,0,0,0.085);
  --k325:rgba(0,0,0,0.087);
  --k326:rgba(0,0,0,0.089);
  --k327:rgba(0,0,0,0.092);
  --k328:rgba(0,0,0,0.094);
  --k329:rgba(0,0,0,0.099);
  --k330:rgba(0,0,0,0.101);
  --k331:rgba(0,0,0,0.104);
  --k332:rgba(0,0,0,0.106);
  --k333:rgba(0,0,0,0.108);
  --k334:rgba(0,0,0,0.111);
  --k335:rgba(0,0,0,0.113);
  --k336:rgba(0,0,0,0.115);
  --k337:rgba(0,0,0,0.118);
  --k338:rgba(0,0,0,0.122);
  --k339:rgba(0,0,0,0.125);
  --k340:rgba(0,0,0,0.132);
  --k341:rgba(0,0,0,0.144);
  --k342:rgba(0,0,0,0.151);
  --k343:rgba(0,0,0,0.155);
  --k344:rgba(0,0,0,0.16);
  --k345:rgba(0,0,0,0.162);
  --k346:rgba(0,0,0,0.167);
  --k347:rgba(0,0,0,0.184);
  --k348:rgba(0,0,0,0.2);
  --k349:rgba(0,0,0,0.235);
  --k350:rgba(0,0,0,0.24);
  --k351:rgba(0,0,0,0.268);
  --k352:rgba(0,0,0,0.271);
  --k353:rgba(33,33,33,0.51);
  --k354:rgba(247,247,247,0.5);
  --k355:rgba(0,0,0,0.042);
  --k356:rgba(0,0,0,0.18);
  --k357:rgba(231,231,231,0.94);
  --k358:rgba(0,0,0,0.07);
  --k359:rgba(0,0,0,0.3);
  --k360:rgba(0,0,0,0.34);
  --k361:rgba(0,0,0,0.009);
  --k362:rgba(0,0,0,0.012);
  --k363:rgba(0,0,0,0.015);
  --k364:rgba(0,0,0,0.018);
  --k365:rgba(0,0,0,0.021);
  --k366:rgba(0,0,0,0.024);
  --k367:rgba(0,0,0,0.03);
  --k368:rgba(0,0,0,0.036);
  --k369:rgba(0,0,0,0.042);
  --k370:rgba(0,0,0,0.048);
  --k371:rgba(0,0,0,0.054);
  --k372:rgba(0,0,0,0.06);
  --k373:rgba(0,0,0,0.072);
  --k374:rgba(0,0,0,0.084);
  --k375:rgba(0,0,0,0.096);
  --k376:rgba(0,0,0,0.108);
  --k377:rgba(0,0,0,0.132);
  --k378:rgba(0,0,0,0.144);
  --k379:rgba(0,0,0,0.156);
  --k380:rgba(33,33,33,0.5);
  --k381:rgba(33,33,33,0.55);
  --k382:rgba(33,33,33,0.75);
  --k383:rgba(33,33,33,0.85);
  --k384:rgba(33,33,33,0.92);
}

:root { --bg:var(--k12); --panel:var(--k34); --panel-2:var(--k51); --line:var(--k89); --line-soft:var(--k70); --ink:var(--k270); --soft:var(--k204); --muted:var(--k156); --market-up:var(--k93); --market-up-soft:var(--k94); --market-down:var(--k274); --market-down-soft:var(--k275); --font:"Inter","Inter Fallback",ui-sans-serif,system-ui,sans-serif; --display:"Inter","Inter Fallback",ui-sans-serif,system-ui,sans-serif; --nav:"Geist","Inter","Inter Fallback",ui-sans-serif,system-ui,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace; }
* { box-sizing:border-box; } html { min-width:320px; background:var(--bg); } body { margin:0; color:var(--ink); background:radial-gradient(900px 500px at 87% -10%,var(--k67) 0%,transparent 60%),var(--bg); font-family:var(--font); } a { color:inherit; text-decoration:none; } button { font:inherit; }
.demo-bar { height:27px; display:flex; align-items:center; justify-content:center; gap:8px; border-bottom:1px solid var(--line); color:var(--k186); background:var(--k22); font:8px var(--mono); letter-spacing:.85px; } .demo-bar span,.signal { width:5px; height:5px; border-radius:50%; background:var(--k267); box-shadow:0 0 0 4px var(--k308); } .demo-bar b { color:var(--k123); }
.app-header { position:sticky; z-index:5; top:0; height:76px; display:flex; align-items:center; gap:32px; padding:0 clamp(18px,3vw,48px); border-bottom:1px solid var(--line); background:var(--k16); backdrop-filter:blur(18px); }.wordmark { display:flex; align-items:center; gap:10px; flex:0 0 auto; }.wordmark>b { font:700 17px var(--nav); letter-spacing:.5px; }.mark { display:block; flex:0 0 auto; width:36px; height:36px; overflow:hidden; border:0; border-radius:10px; background:var(--k19); }.mark img { display:block; width:100%; height:100%; object-fit:contain; }.main-nav { display:flex; align-items:center; gap:3px; }.main-nav a { padding:9px 11px; border-radius:4px; color:var(--k175); font:600 11px var(--nav); transition:.2s; }.main-nav a:hover { color:var(--ink); background:var(--k63); }.main-nav a.active { color:var(--k19); background:var(--k261); }.header-account { display:flex; align-items:center; gap:10px; margin-left:auto; }.header-balance { display:grid; gap:3px; padding-right:4px; text-align:right; }.header-balance small { color:var(--muted); font:7px var(--mono); letter-spacing:.8px; }.header-balance b { font:600 11px var(--mono); }.wallet-button { padding:8px 10px; border:1px solid var(--k121); border-radius:4px; color:var(--k248); font:600 10px var(--nav); }.wallet-button:hover { color:var(--k42); background:var(--k261); }.avatar { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--k132); border-radius:50%; color:var(--k49); background:var(--k247); font:9px var(--mono); }.mobile-menu { display:none; }
.page-wrap { width:min(1280px,calc(100% - 40px)); margin:0 auto; padding:37px 0 80px; }.page-intro { display:flex; align-items:end; justify-content:space-between; padding-bottom:27px; }.eyebrow,.label { color:var(--muted); font:9px var(--mono); letter-spacing:1px; }.page-intro h1 { margin:8px 0 0; font:700 clamp(31px,4vw,48px)/.95 var(--display); letter-spacing:-2.5px; }.page-intro p { margin:9px 0 0; color:var(--k189); font-size:12px; }.wallet-link { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:4px; color:var(--k210); font:10px var(--mono); }.wallet-link b { color:var(--k253); font-size:13px; }
.surface,.balance-card,.metric-card { border:1px solid var(--line); border-radius:7px; background:linear-gradient(135deg,var(--k49),var(--k26) 70%); }.surface header { display:flex; align-items:start; justify-content:space-between; gap:20px; }.surface header h2 { margin:6px 0 0; font:700 18px var(--display); letter-spacing:-.7px; }.surface header>a,.surface>a { color:var(--k197); font:10px var(--mono); }.surface header>a:hover,.surface>a:hover { color:var(--k288); }.pill { padding:5px 7px; border:1px solid var(--k112); border-radius:3px; color:var(--k210); font:8px var(--mono); }
.dashboard-hero { display:grid; grid-template-columns:1.8fr repeat(3,.82fr); gap:10px; }.balance-card { position:relative; min-height:226px; padding:24px; overflow:hidden; }.balance-card h2 { position:relative; z-index:1; margin:16px 0 8px; font:700 clamp(34px,4.2vw,58px)/.95 var(--display); letter-spacing:-3px; }.balance-card p { position:relative; z-index:1; margin:0; color:var(--k197); font:10px var(--mono); }.balance-card p b { margin-left:8px; color:var(--k42); background:var(--k265); padding:4px 5px; border-radius:2px; font-weight:500; }.balance-actions { position:relative; z-index:1; display:flex; gap:7px; margin-top:29px; }.balance-actions a { min-width:110px; padding:10px 11px; border:1px solid var(--k128); border-radius:3px; color:var(--k251); font-size:10px; font-weight:800; }.balance-actions a:hover { color:var(--k42); background:var(--k263); }.balance-actions i { float:right; color:var(--k182); font-style:normal; }.orb { position:absolute; border:1px solid var(--k117); border-radius:50%; transform:rotateX(59deg) rotateZ(-25deg); opacity:.7; }.orb-a { width:310px; height:310px; right:-55px; bottom:-220px; box-shadow:0 0 0 45px var(--k57),0 0 0 90px var(--k49); }.orb-b { width:212px; height:212px; right:20px; top:-155px; }.orb-c { width:86px; height:86px; right:80px; top:24px; border-style:dashed; }.metric-card { min-height:226px; padding:21px 17px; display:flex; flex-direction:column; }.metric-card span { color:var(--k164); font:9px var(--mono); letter-spacing:.8px; }.metric-card strong { margin-top:38px; font:700 19px var(--display); letter-spacing:-.7px; }.metric-card p { margin:7px 0 0; color:var(--k175); font-size:9px; line-height:1.35; }.bar { position:relative; height:2px; margin-top:auto; background:var(--k109); }.bar b { position:absolute; inset:0 auto 0 0; background:var(--k253); }
.dashboard-tilt { --tilt-x:0deg; --tilt-y:0deg; transform:perspective(900px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)); transform-style:preserve-3d; will-change:transform; transition:transform .18s cubic-bezier(.2,.7,.2,1); }.dashboard-tilt::before { content:""; position:absolute; inset:0; z-index:0; opacity:.42; background:radial-gradient(250px 120px at var(--glow-x,70%) var(--glow-y,25%),var(--k312),transparent 68%); pointer-events:none; }.dashboard-gyro { position:absolute; z-index:0; right:34px; bottom:25px; width:106px; height:106px; transform:translateZ(25px) rotateX(62deg) rotateZ(-27deg); }.dashboard-gyro i { position:absolute; inset:0; border:1px solid var(--k135); border-radius:50%; animation:gyro-spin 10s linear infinite; }.dashboard-gyro i:nth-child(2) { inset:18px; border-color:var(--k158); animation-duration:7s; animation-direction:reverse; }.dashboard-gyro i:nth-child(3) { inset:37px; border-color:var(--k198); animation-duration:5s; }.dashboard-gyro b { position:absolute; left:45px; top:45px; width:16px; height:16px; border-radius:50%; background:var(--k263); box-shadow:0 0 28px var(--k290); }.dashboard-tilt h2,.dashboard-tilt p,.dashboard-tilt .balance-actions { transform:translateZ(35px); }
.two-col { display:grid; grid-template-columns:1.38fr 1fr; gap:10px; margin-top:10px; }.market-list,.allocation { min-height:318px; padding:20px; }.market-list header { margin-bottom:18px; }.market-head,.market-row { display:grid; grid-template-columns:1.2fr 1fr .5fr .38fr; align-items:center; column-gap:11px; }.market-head { padding:0 8px 10px; color:var(--k158); font:8px var(--mono); }.market-row { min-height:52px; padding:0 8px; border-top:1px solid var(--line-soft); }.market-row:hover { background:var(--k63); }.market-row>span { display:flex; align-items:center; gap:8px; }.market-row i,.table-row i { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; color:var(--k55); background:var(--k255); font:13px Georgia; font-style:normal; }.market-row b,.table-row b { font-size:10px; }.market-row small,.table-row small { margin-left:3px; color:var(--k158); font:8px var(--mono); }.market-row strong { font:500 9px var(--mono); }.market-row em { justify-self:start; color:var(--k42); background:var(--k253); padding:3px 4px; border-radius:2px; font:8px var(--mono); font-style:normal; }.market-row u { color:var(--k215); text-decoration:none; font-size:9px; text-align:right; }.allocation-body { display:flex; align-items:center; gap:33px; min-height:226px; }.donut { position:relative; display:grid; place-items:center; width:160px; aspect-ratio:1; border-radius:50%; background:conic-gradient(var(--k78) 0 100%); }.donut::before { content:""; position:absolute; width:123px; aspect-ratio:1; border-radius:50%; background:var(--k37); }.donut div { position:relative; z-index:1; display:grid; text-align:center; }.donut b { font:700 29px var(--display); letter-spacing:-2px; }.donut small { color:var(--k158); font:8px var(--mono); }.legend { flex:1; display:grid; gap:12px; }.legend p { display:grid; grid-template-columns:7px 1fr auto; align-items:center; gap:7px; margin:0; color:var(--k194); font-size:10px; }.legend i { width:6px; height:6px; border-radius:50%; background:var(--k265); }.legend p:nth-child(2) i { background:var(--k196); }.legend p:nth-child(3) i { background:var(--k148); }.legend p:nth-child(4) i { background:var(--k105); }.legend b { color:var(--k245); font:9px var(--mono); }.activity { margin-top:10px; padding:20px; }.activity-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:18px; border-top:1px solid var(--line-soft); }.activity-grid p { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:8px; min-height:65px; margin:0; padding:12px 15px 12px 0; border-right:1px solid var(--line-soft); }.activity-grid p+p { padding-left:15px; }.activity-grid p:last-child { border-right:0; }.activity-grid i { display:grid; place-items:center; width:23px; height:23px; border:1px solid var(--k126); border-radius:50%; color:var(--k259); font-style:normal; font-size:11px; }.activity-grid b,.activity-grid small { display:block; }.activity-grid b { font-size:10px; }.activity-grid small { margin-top:3px; color:var(--k158); font-size:8px; }.activity-grid strong { font:500 9px var(--mono); }
.market-screen,.asset-table { padding:23px; }.market-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:22px 0; }.market-grid article { position:relative; min-height:136px; padding:17px; border:1px solid var(--line); border-radius:5px; background:var(--k42); }.market-grid i { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:var(--k42); background:var(--k253); font:15px Georgia; font-style:normal; }.market-grid b,.market-grid strong,.market-grid em { display:block; }.market-grid b { margin-top:15px; font:11px var(--mono); }.market-grid strong { margin-top:7px; font:700 18px var(--display); letter-spacing:-.7px; }.market-grid em { margin-top:5px; color:var(--k253); font:8px var(--mono); font-style:normal; }.market-grid em.flat { color:var(--k198); }.primary-link { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-width:180px; padding:12px 15px; border:0; border-radius:3px; color:var(--k42)!important; background:var(--k263); font-size:10px; font-weight:800; }.primary-link:hover { background:var(--k222); }.primary-link b { font-size:14px; }
.trade-layout { display:grid; grid-template-columns:1.68fr .74fr; gap:10px; }.trade-chart,.demo-order { padding:22px; }.trade-chart header>div:last-child { display:flex; align-items:center; gap:8px; }.trade-chart header strong { font:700 21px var(--display); letter-spacing:-1px; }.trade-chart header em { padding:4px 5px; color:var(--k42); background:var(--k253); font:8px var(--mono); font-style:normal; }.trade-chart h2 { font-size:23px!important; }.trade-chart h2 small { color:var(--k158); font:9px var(--mono); }.chart { position:relative; height:330px; margin-top:19px; padding-left:30px; }.chart>span { position:absolute; left:0; color:var(--k144); font:8px var(--mono); }.chart>span:nth-child(1){top:0}.chart>span:nth-child(2){top:47%}.chart>span:nth-child(3){bottom:1px}.chart svg { width:100%; height:100%; }.chart .grid { fill:none; stroke:var(--k86); }.chart .area { fill:url(var(--k272)); fill:var(--k304); }.chart .line { fill:none; stroke:var(--k266); stroke-width:2; }.demo-order { display:grid; align-content:start; gap:14px; background:linear-gradient(145deg,var(--k60),var(--k26)); }.order-tabs { display:grid; grid-template-columns:1fr 1fr; margin-top:6px; padding:3px; border:1px solid var(--line); border-radius:4px; color:var(--k168); font-size:10px; text-align:center; }.order-tabs>* { padding:8px; }.order-tabs b { border-radius:2px; color:var(--k42); background:var(--k253); }.demo-order label { display:grid; gap:7px; color:var(--k158); font:8px var(--mono); }.demo-order label strong { padding:12px; border:1px solid var(--k117); border-radius:3px; color:var(--k252); background:var(--k37); font:600 12px var(--mono); }.demo-order label small { float:right; color:var(--k158); font-size:8px; }.demo-order p { margin:0; color:var(--k156); font-size:8px; line-height:1.5; }
.convert-shell { display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:8vw; min-height:480px; padding:3vw 7vw; border:1px solid var(--line); border-radius:8px; background:radial-gradient(circle at 85% 25%,var(--k71),transparent 27%),var(--k26); }.convert-card { width:min(100%,425px); padding:26px; }.convert-card h2 { margin:15px 0 26px; font:700 32px/.97 var(--display); letter-spacing:-1.6px; }.convert-field { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; min-height:65px; padding:0 14px; border:1px solid var(--k122); border-radius:4px; background:var(--k37); }.convert-field small { color:var(--k158); font:8px var(--mono); }.convert-field b { font:600 13px var(--font); }.convert-field strong { font:500 12px var(--mono); }.swap-mark { position:relative; z-index:1; display:grid; place-items:center; width:32px; height:32px; margin:-2px auto; border:5px solid var(--k42); border-radius:50%; color:var(--k42); background:var(--k253); font-size:16px; }.convert-card p { color:var(--k158); font:8px var(--mono); }.convert-card .primary-link { width:100%; margin-top:10px; }.convert-note { position:relative; max-width:270px; min-height:240px; padding:30px; border:1px solid var(--k105); border-radius:50%; background:var(--k49); }.convert-note p { position:relative; z-index:1; margin-top:30px; font:600 18px/1.2 var(--display); letter-spacing:-.6px; }.convert-note i { position:absolute; right:20px; bottom:20px; color:var(--k250); font:50px Georgia; font-style:normal; }
.earn-lead { display:flex; align-items:center; justify-content:space-between; min-height:290px; padding:28px 9vw; border-bottom:1px solid var(--line); }.earn-lead h2,.prediction-head h2 { margin:13px 0; font:700 clamp(39px,5vw,65px)/.88 var(--display); letter-spacing:-3px; }.earn-lead p,.prediction-head p { color:var(--k188); font-size:12px; }.earn-orbit { position:relative; display:grid; place-items:center; flex:0 0 auto; width:210px; aspect-ratio:1; border:1px solid var(--k132); border-radius:50%; background:radial-gradient(circle at 34% 28%,var(--k314) 0 4%,var(--k298) 18%,transparent 39%),radial-gradient(circle at 68% 74%,var(--k7) 0 18%,transparent 57%),linear-gradient(145deg,var(--k78),var(--k22) 72%); box-shadow:inset 16px 16px 35px var(--k298),inset -26px -28px 48px var(--k7); }.earn-orbit::before { content:""; position:absolute; inset:23px; border:1px solid var(--k317); border-radius:50%; box-shadow:inset 0 0 24px var(--k4); }.earn-orbit i { position:absolute; z-index:2; width:10px; height:10px; border-radius:50%; background:var(--k253); box-shadow:0 0 20px var(--k290); }.earn-orbit i:first-child { left:7px; top:65px; }.earn-orbit i:nth-child(2) { right:7px; bottom:65px; background:var(--k158); }.earn-orbit b { display:grid; position:relative; z-index:1; text-align:center; font:700 35px var(--display); letter-spacing:-2px; }.earn-orbit small { color:var(--k158); font:8px var(--mono); letter-spacing:1px; }.earn-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; }.earn-grid article { min-height:210px; padding:22px; }.earn-grid h3 { margin:25px 0 8px; font:700 18px var(--display); }.earn-grid strong { font:700 35px var(--display); letter-spacing:-2px; }.earn-grid strong small { color:var(--k158); font:9px var(--mono); letter-spacing:0; }.earn-grid p { color:var(--k168); font-size:9px; }.earn-grid a { display:block; margin-top:31px; color:var(--k236); font-size:10px; }
.prediction-head { max-width:680px; padding:25px 0 35px; }.prediction-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.prediction-grid article { min-height:235px; padding:21px; }.prediction-grid article>span { color:var(--k158); font:8px var(--mono); }.prediction-grid h3 { min-height:58px; margin:20px 0; font:700 18px/1.12 var(--display); letter-spacing:-.5px; }.prediction-grid div { display:flex; justify-content:space-between; align-items:center; gap:8px; }.prediction-grid div b { display:flex; align-items:center; flex:1; gap:7px; color:var(--k210); font:8px var(--mono); }.prediction-grid div i { height:4px; flex:1; background:var(--k253); }.prediction-grid div strong { font:10px var(--mono); }.prediction-grid a { display:block; margin-top:34px; color:var(--k251); font-size:10px; }
.wallet-hero { display:grid; grid-template-columns:1.3fr .7fr; gap:10px; }.wallet-summary { display:grid; grid-template-columns:1fr auto; align-content:center; gap:14px; padding:22px; border:1px solid var(--line); border-radius:7px; background:var(--k34); }.wallet-summary span { color:var(--k158); font:8px var(--mono); }.wallet-summary b { font:600 12px var(--mono); }.asset-table { margin-top:10px; }.table-row { display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; align-items:center; gap:10px; min-height:58px; padding:0 10px; border-top:1px solid var(--line-soft); }.table-row>span { display:flex; align-items:center; gap:8px; }.table-row strong { font:500 9px var(--mono); }.table-label { min-height:40px; color:var(--k158); border-top:0; font:8px var(--mono); }
.wallet-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }.wallet-actions>a { display:grid; grid-template-columns:35px 1fr auto; align-items:center; gap:11px; min-height:82px; padding:16px; border:1px solid var(--line); border-radius:6px; background:var(--k34); }.wallet-actions>a:hover,.wallet-actions>a.active { border-color:var(--k136); background:var(--k57); }.wallet-actions i { display:grid; place-items:center; width:29px; height:29px; border:1px solid var(--k132); border-radius:50%; color:var(--k253); font-style:normal; }.wallet-actions b,.wallet-actions small { display:block; }.wallet-actions b { font:600 11px var(--font); }.wallet-actions small { margin-top:4px; color:var(--k158); font-size:9px; }.wallet-actions em { color:var(--k198); font-style:normal; }.wallet-flow { display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:10px; margin-top:10px; padding:20px; }.wallet-flow>span { grid-column:1 / -1; }.wallet-flow h2 { grid-column:1 / -1; margin:0 0 5px; font:700 23px var(--display); letter-spacing:-1px; }.wallet-flow div { min-height:78px; padding:14px; border:1px solid var(--line); border-radius:4px; background:var(--k42); }.wallet-flow div b { font:600 10px var(--mono); }.wallet-flow div p { margin:7px 0 0; color:var(--k164); font-size:9px; }.wallet-flow .primary-link { min-width:152px; }

.public-shell { min-height:100vh; background:radial-gradient(800px 430px at 78% 12%,var(--k73) 0%,transparent 60%),var(--k15); }.public-header { width:min(1240px,calc(100% - 48px)); height:83px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:30px; border-bottom:1px solid var(--k84); }.public-header nav { display:flex; gap:26px; margin-left:auto; margin-right:17px; }.public-header nav a,.text-link { color:var(--k201); font:500 11px var(--nav); }.public-header nav a:hover,.text-link:hover { color:var(--k288); }.public-header>div { display:flex; align-items:center; gap:17px; }.public-cta { display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:11px 14px; border-radius:3px; color:var(--k37); background:var(--k262); font:700 10px var(--nav); }.public-cta:hover { background:var(--k226); }.public-cta b { font-size:14px; }.landing { width:min(1240px,calc(100% - 48px)); margin:auto; }.landing-hero { min-height:570px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:30px; }.landing-copy { padding:50px 0; }.landing-copy h1 { margin:15px 0; font:700 clamp(58px,8vw,104px)/.82 var(--display); letter-spacing:-6px; }.landing-copy h1 i { color:var(--k210); font-style:normal; }.landing-copy p { max-width:400px; color:var(--k198); font-size:14px; line-height:1.6; }.landing-actions { display:flex; align-items:center; gap:20px; margin-top:29px; }.landing-copy>small { display:block; margin-top:17px; color:var(--k144); font-size:9px; }.hero-object { position:relative; min-height:390px; display:grid; place-items:center; perspective:700px; }.hero-card { position:relative; z-index:2; width:min(330px,80%); min-height:190px; padding:24px; border:1px solid var(--k137); border-radius:8px; background:linear-gradient(150deg,var(--k84),var(--k42)); box-shadow:25px 35px 60px var(--k4); transform:rotateX(10deg) rotateY(-16deg) rotateZ(5deg); }.hero-card>span { color:var(--k188); font:8px var(--mono); letter-spacing:1px; }.hero-card>b { display:block; margin-top:37px; font:600 33px var(--display); letter-spacing:-1.8px; }.hero-card>b span { color:var(--k164); font-size:18px; }.hero-card p { margin:16px 0 0; color:var(--k210); font-size:9px; }.hero-card p i { display:inline-block; width:5px; height:5px; margin-right:5px; border-radius:50%; background:var(--k253); }.ring { position:absolute; border:1px solid var(--k125); border-radius:50%; transform:rotateX(62deg) rotateZ(-28deg); }.ring-one { width:390px; height:390px; }.ring-two { width:270px; height:270px; box-shadow:0 0 0 62px var(--k295); }.cube { position:absolute; right:10%; top:20%; width:36px; height:36px; border:1px solid var(--k168); transform:rotate(31deg) rotateX(60deg); }.landing-proof { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--k84); border-bottom:1px solid var(--k84); }.landing-proof p { margin:0; padding:19px 13px; color:var(--k204); border-right:1px solid var(--k84); font:500 11px var(--nav); }.landing-proof p:last-child { border-right:0; }.landing-proof span { margin-right:13px; color:var(--k144); font:8px var(--mono); }.landing-features { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:65px 0; }.landing-features article { min-height:220px; padding:20px; border:1px solid var(--k90); border-radius:6px; background:var(--k26); }.landing-features span { color:var(--k158); font:9px var(--mono); }.landing-features h2 { margin:31px 0 12px; font:700 23px/1.02 var(--display); letter-spacing:-1.1px; }.landing-features p { color:var(--k177); font-size:10px; line-height:1.55; }
.landing-webgl { position:absolute; z-index:0; inset:-35px; width:calc(100% + 70px); height:calc(100% + 70px); opacity:0; pointer-events:none; transition:opacity .8s ease; }.hero-object.webgl-ready .landing-webgl { opacity:.88; }.hero-object.webgl-ready .ring,.hero-object.webgl-ready .cube { opacity:.32; }.hero-card[data-tilt] { --tilt-x:0deg; --tilt-y:0deg; transform:rotateX(calc(10deg + var(--tilt-y))) rotateY(calc(-16deg + var(--tilt-x))) rotateZ(5deg) translateZ(24px); transform-style:preserve-3d; will-change:transform; transition:transform .18s cubic-bezier(.2,.7,.2,1); }
.auth-page { width:min(1000px,calc(100% - 48px)); min-height:calc(100vh - 83px); margin:auto; display:grid; grid-template-columns:.88fr 1.12fr; }.auth-card { align-self:center; max-width:380px; padding:45px 0; }.auth-back { display:inline-block; margin-bottom:45px; color:var(--k198); font:10px var(--nav); }.auth-card h1 { margin:12px 0 8px; font:700 41px var(--display); letter-spacing:-2px; }.auth-card>p { margin:0 0 28px; color:var(--k186); font-size:11px; }.auth-card label { display:grid; gap:8px; margin-top:15px; color:var(--k158); font:8px var(--mono); letter-spacing:.7px; }.auth-card input:not([type="checkbox"]) { height:46px; padding:0 12px; border:1px solid var(--k109); border-radius:3px; outline:none; color:var(--k253); background:var(--k42); font:12px var(--font); }.auth-card input:not([type="checkbox"]):focus { border-color:var(--k158); }.auth-card .check { display:flex; align-items:center; gap:8px; color:var(--k188); font:9px var(--font); letter-spacing:0; }.auth-card .full { width:100%; margin-top:21px; }.auth-card small { display:block; margin-top:16px; color:var(--k158); text-align:center; font-size:9px; }.auth-card small a,.forgot { color:var(--k253); }.forgot { display:block; margin-top:12px; font-size:9px; text-align:right; }.auth-art { position:relative; display:flex; justify-content:center; align-items:center; overflow:hidden; border-left:1px solid var(--k84); }.auth-art>span { position:absolute; top:32px; left:36px; color:var(--k158); font:600 10px var(--nav); letter-spacing:1px; }.auth-art::before,.auth-art::after { content:""; position:absolute; width:440px; height:440px; border:1px solid var(--k105); border-radius:50%; transform:rotateX(60deg) rotateZ(-20deg); }.auth-art::after { width:290px; height:290px; box-shadow:0 0 0 70px var(--k289); }.auth-art div { position:relative; z-index:1; text-align:center; }.auth-art b { font:100px Georgia; font-weight:400; }.auth-art p { margin:25px 0 0; font:600 21px/1.1 var(--display); letter-spacing:-1px; }

/* Offcode exchange direction: dense market utility, one focused depth object. */
.landing { width:min(1320px,calc(100% - 56px)); }.landing-hero { min-height:610px; grid-template-columns:.88fr 1.12fr; gap:5vw; }.landing-copy { padding-top:15px; }.landing-copy h1 { max-width:640px; margin:17px 0; font-size:clamp(56px,6.7vw,90px); line-height:.88; letter-spacing:-5px; }.landing-copy h1 i { color:var(--k191); }.landing-copy p { max-width:365px; font-size:13px; }.depth-stage { min-height:450px; perspective:1200px; }.depth-panel { position:relative; z-index:2; width:min(450px,84%); min-height:316px; padding:20px; border:1px solid var(--k149); border-radius:4px; color:var(--k263); background:linear-gradient(145deg,var(--k74),var(--k42) 64%); box-shadow:28px 35px 55px var(--k7); transform:rotateX(8deg) rotateY(-13deg) rotateZ(3deg); }.depth-panel header { display:flex; justify-content:space-between; align-items:center; color:var(--k220); font:600 10px var(--mono); }.depth-panel header i { color:var(--k164); font:8px var(--mono); font-style:normal; }.depth-price { display:flex; align-items:baseline; gap:10px; margin:33px 0 25px; }.depth-price>b { font:700 41px var(--display); letter-spacing:-2px; }.depth-price>b span { color:var(--k177); font-size:21px; }.depth-price em { padding:4px 5px; color:var(--k42); background:var(--k252); border-radius:2px; font:8px var(--mono); font-style:normal; }.depth-book { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:16px 0; border-top:1px solid var(--k112); border-bottom:1px solid var(--k112); }.depth-book>div { display:grid; gap:7px; }.depth-book i { display:block; height:8px; border-right:1px solid var(--k198); background:linear-gradient(90deg,var(--k250),var(--k158)); opacity:.83; }.depth-book>div:first-child i { justify-self:end; border-right:0; border-left:1px solid var(--k198); background:linear-gradient(90deg,var(--k132),var(--k253)); }.depth-book i:nth-child(1){width:89%}.depth-book i:nth-child(2){width:63%}.depth-book i:nth-child(3){width:76%}.depth-book i:nth-child(4){width:47%}.depth-book i:nth-child(5){width:92%}.depth-panel footer { display:flex; gap:28px; margin-top:17px; color:var(--k164); font:8px var(--mono); }.depth-panel footer b { margin-left:5px; color:var(--k240); font-weight:500; }.depth-axis { position:absolute; z-index:1; right:3%; bottom:8%; left:5%; height:180px; transform:rotateX(69deg) rotateZ(-5deg); }.depth-axis i { position:absolute; left:0; right:0; border-top:1px solid var(--k149); opacity:.4; }.depth-axis i:nth-child(1){top:0}.depth-axis i:nth-child(2){top:50%}.depth-axis i:nth-child(3){bottom:0}.depth-stage .landing-webgl { opacity:.6; }.depth-stage.webgl-ready .landing-webgl { opacity:.8; }.landing-proof { grid-template-columns:repeat(4,1fr); }.landing-proof p { display:grid; gap:5px; min-height:72px; padding:17px 18px; }.landing-proof p b { color:var(--k246); font:600 11px var(--nav); }.landing-proof p span { margin:0; color:var(--k158); font:9px var(--font); }.landing-features { padding:72px 0; }.landing-features article { min-height:250px; padding:24px; border-radius:2px; background:linear-gradient(145deg,var(--k49),var(--k26)); }.feature-mark { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--k131); border-radius:50%; color:var(--k252)!important; font:16px var(--font)!important; }.landing-features h2 { margin:36px 0 14px; font-size:24px; letter-spacing:-1.3px; }.landing-features p { max-width:280px; }.landing-features a { display:block; margin-top:25px; color:var(--k243); font:600 10px var(--nav); }
.page-wrap { padding-top:28px; }.page-intro { padding-bottom:20px; }.page-intro h1 { font-size:34px; letter-spacing:-1.9px; }.page-intro p { margin-top:6px; }.dashboard-hero { grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr); gap:10px; }.dashboard-hero .balance-card { min-height:260px; padding:23px 25px; background:linear-gradient(145deg,var(--k57),var(--k26) 72%); }.dashboard-hero .balance-card h2 { margin-top:28px; font-size:50px; }.dashboard-hero .balance-actions { margin-top:31px; }.dashboard-hero .orb-a { width:360px; height:360px; right:-76px; bottom:-268px; opacity:.45; }.dashboard-hero .orb-b,.dashboard-hero .orb-c { display:none; }.portfolio-command { min-height:260px; padding:21px; border:1px solid var(--line); border-radius:7px; background:var(--k34); }.portfolio-command header { display:flex; justify-content:space-between; align-items:center; }.portfolio-command header a { color:var(--k216); font:9px var(--mono); }.portfolio-rows { display:grid; gap:12px; margin-top:22px; }.portfolio-rows p { position:relative; display:grid; grid-template-columns:1fr auto; gap:4px; margin:0; padding-bottom:10px; border-bottom:1px solid var(--k79); }.portfolio-rows span { color:var(--k168); font-size:9px; }.portfolio-rows b { color:var(--k253); font:600 10px var(--mono); }.portfolio-rows i { grid-column:1/-1; display:block; height:2px; background:linear-gradient(90deg,var(--k253) var(--row-size,40%),var(--k104) 0); }.portfolio-rows p:nth-child(1) i{--row-size:87.6%}.portfolio-rows p:nth-child(2) i{--row-size:12.4%}.portfolio-rows p:nth-child(3) i{--row-size:0%}.portfolio-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:15px; }.portfolio-actions a { padding:9px; border:1px solid var(--k118); border-radius:3px; color:var(--k246); font:600 10px var(--nav); }.portfolio-actions a:hover { color:var(--k42); background:var(--k252); }.portfolio-actions b { float:right; font-size:13px; }.dashboard-hero .metric-card { display:none; }.two-col { grid-template-columns:1.25fr .75fr; }.market-list,.allocation { min-height:305px; }.activity { margin-top:10px; }
.depth-panel[data-tilt] { --tilt-x:0deg; --tilt-y:0deg; transform:rotateX(calc(8deg + var(--tilt-y))) rotateY(calc(-13deg + var(--tilt-x))) rotateZ(3deg) translateZ(18px); transform-style:preserve-3d; will-change:transform; transition:transform .18s cubic-bezier(.2,.7,.2,1); }
.depth-panel { z-index:3; border-color:var(--k171); background:linear-gradient(145deg,var(--k87),var(--k55) 58%,var(--k25)); box-shadow:0 36px 90px var(--k9), inset 0 1px var(--k308); }.depth-panel::before { content:""; position:absolute; inset:10px; border:1px solid var(--k303); pointer-events:none; }.depth-panel header,.depth-price,.depth-book,.depth-panel footer { position:relative; z-index:1; }.depth-stage .landing-webgl { opacity:.7; }.depth-stage.webgl-ready .landing-webgl { opacity:.86; }.landing-proof { grid-template-columns:repeat(4,minmax(0,1fr))!important; }.landing-proof p { min-width:0; border-right:1px solid var(--k84); }.landing-proof p:last-child { border-right:0; }
.depth-book i { animation:depth-pulse 3.6s ease-in-out infinite alternate; }.depth-book i:nth-child(2n) { animation-delay:-1.4s; }.depth-book i:nth-child(3n) { animation-delay:-2.1s; }.landing-proof { grid-template-columns:repeat(3,minmax(0,1fr))!important; }
@keyframes gyro-spin { to { transform:rotate(360deg); } }
@keyframes depth-pulse { to { opacity:.42; transform:scaleX(.74); transform-origin:right; } }
@media (max-width:1050px) { .app-header{gap:15px}.main-nav a{padding:8px 7px;font-size:10px}.dashboard-hero{grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr)}.dashboard-hero .metric-card:last-child{display:none}.allocation-body{gap:18px}.donut{width:130px}.earn-lead{padding-inline:5vw}.convert-shell{padding-inline:5vw}.prediction-grid{grid-template-columns:1fr 1fr}.prediction-grid article:last-child{grid-column:1 / -1}.trade-layout{grid-template-columns:1fr .65fr}.landing-copy h1{font-size:74px}.auth-page{grid-template-columns:1fr 1fr} }
@media (max-width:760px) { .demo-bar{font-size:7px}.app-header{height:64px;padding-inline:16px}.main-nav{display:none;position:absolute;top:63px;left:12px;right:12px;padding:10px;border:1px solid var(--k108);border-radius:5px;background:var(--k42);box-shadow:0 20px 50px var(--k6)}.main-nav.open{display:grid;grid-template-columns:repeat(2,1fr)}.main-nav a{padding:12px}.mobile-menu{display:grid;gap:5px;width:31px;height:31px;margin-left:auto;padding:8px;border:1px solid var(--k117);border-radius:50%;background:transparent}.mobile-menu i{display:block;height:1px;background:var(--k253)}.header-balance{display:none}.wallet-button{font-size:9px}.page-wrap{width:min(100% - 28px,1280px);padding-top:25px}.page-intro{align-items:start;padding-bottom:20px}.page-intro p{font-size:10px}.wallet-link{padding:8px}.wallet-link:not(.signal){font-size:0}.wallet-link .signal,.wallet-link b{font-size:12px}.dashboard-hero,.two-col,.trade-layout,.wallet-hero,.convert-shell{grid-template-columns:1fr}.dashboard-hero{gap:8px}.metric-card{min-height:105px}.metric-card strong{margin-top:18px}.balance-card{min-height:215px}.two-col,.activity,.market-screen,.asset-table{margin-top:8px}.allocation-body{justify-content:center}.activity-grid{grid-template-columns:1fr}.activity-grid p,.activity-grid p+p{padding:12px 0;border-right:0;border-bottom:1px solid var(--line-soft)}.activity-grid p:last-child{border-bottom:0}.market-grid,.earn-grid{grid-template-columns:1fr 1fr}.market-grid article{min-height:120px}.trade-chart,.demo-order{padding:16px}.chart{height:210px}.convert-shell{gap:28px;min-height:0;padding:34px 20px}.convert-note{margin:auto}.earn-lead{min-height:0;padding:25px 4vw}.earn-orbit{width:125px}.prediction-grid{grid-template-columns:1fr}.prediction-grid article:last-child{grid-column:auto}.table-row{grid-template-columns:1.25fr 1fr 1fr}.table-row>*:nth-child(3){display:none}.table-label>*:nth-child(3){display:none}.wallet-actions{gap:8px}.wallet-actions>a{grid-template-columns:29px 1fr;padding:12px}.wallet-actions em{display:none}.wallet-flow{grid-template-columns:1fr;padding:16px}.wallet-flow .primary-link{width:100%}.public-header{width:calc(100% - 32px);height:68px}.public-header nav{display:none}.public-header>div{margin-left:auto}.public-header .text-link{display:none}.landing,.auth-page{width:calc(100% - 32px)}.landing-hero{grid-template-columns:1fr;min-height:0;padding:68px 0 38px}.landing-copy{padding:0}.landing-copy h1{font-size:65px}.hero-object{min-height:300px}.landing-proof,.landing-features{grid-template-columns:1fr}.landing-proof p{border-right:0;border-bottom:1px solid var(--k84)}.landing-features{padding:35px 0}.landing-features article{min-height:170px}.auth-page{grid-template-columns:1fr;min-height:calc(100vh - 68px)}.auth-card{max-width:none;padding:55px 0}.auth-art{display:none} }
@media (max-width:470px) { .wordmark>b{font-size:15px}.page-intro h1{font-size:33px}.wallet-link{border:0}.dashboard-hero{grid-template-columns:1fr 1fr}.balance-card{grid-column:1 / -1}.metric-card:last-child{display:flex}.market-head,.market-row{grid-template-columns:1.15fr 1fr .55fr}.market-head>*:last-child,.market-row>*:last-child{display:none}.market-grid,.earn-grid{grid-template-columns:1fr}.earn-lead{display:block}.earn-orbit{margin:30px auto 0}.market-screen,.asset-table{padding:16px}.surface header h2{font-size:16px}.wallet-summary{grid-template-columns:1fr auto}.trade-chart header>div:last-child{display:grid;gap:3px}.prediction-head h2{font-size:43px} }
@media (max-width:470px) { .portfolio-command{grid-column:1 / -1}.landing-proof{grid-template-columns:1fr}.depth-panel{width:92%;padding:16px}.depth-price>b{font-size:34px}.depth-book{gap:12px}.depth-panel footer{gap:10px} }
@media (prefers-reduced-motion:reduce) { *{scroll-behavior:auto!important;transition:none!important} .landing-webgl{display:none}.dashboard-gyro i{animation:none} }

/* Codebot keeps the exchange's dense, monochrome terminal language. */
.codebot-screen { display:grid; gap:14px; }.codebot-summary { display:grid; grid-template-columns:1.28fr .72fr; gap:14px; }.codebot-balance-card,.codebot-overview-card { min-height:252px; padding:29px; border-radius:22px; background:radial-gradient(340px 190px at 85% 15%,var(--k102) 0%,transparent 68%),linear-gradient(145deg,var(--k65),var(--k25) 72%); }.codebot-balance-card { position:relative; overflow:hidden; }.codebot-balance-card::after { content:""; position:absolute; right:-100px; bottom:-178px; width:300px; height:300px; border:1px solid var(--k324); border-radius:50%; box-shadow:0 0 0 45px var(--k298),0 0 0 90px var(--k295); }.codebot-balance-card>* { position:relative; z-index:1; }.codebot-balance-card h2 { margin:21px 0 5px; font:600 14px var(--font); }.codebot-balance-card>strong { display:block; font:700 clamp(38px,4vw,57px)/1 var(--display); letter-spacing:-3px; }.codebot-balance-card>strong small { color:var(--k198); font:11px var(--mono); letter-spacing:0; }.codebot-balance-card p { margin:10px 0 22px; color:var(--k188); font:10px var(--mono); }.codebot-balance-card p b { color:var(--k242); font-weight:500; }.codebot-balance-card .primary-link { min-width:145px; }.codebot-overview-card { display:grid; align-content:center; gap:23px; }.codebot-overview-card div { display:grid; gap:7px; padding-bottom:17px; border-bottom:1px solid var(--k314); }.codebot-overview-card div:last-child { padding:0; border:0; }.codebot-overview-card b { color:var(--k253); font:600 18px var(--mono); }.codebot-overview-card a,.codebot-overview-card small { color:var(--k184); font:9px var(--mono); }.codebot-overview-card a:hover { color:var(--k253); }
.codebot-plan-section { min-width:0; padding-top:12px; }.codebot-plan-section>header,.codebot-cycle>header,.codebot-positions>header { display:flex; align-items:end; justify-content:space-between; gap:20px; }.codebot-plan-section h2,.codebot-cycle h2,.codebot-positions h2 { margin:7px 0 0; font:700 24px var(--display); letter-spacing:-1.1px; }.codebot-plan-section>header p,.codebot-cycle>header p,.codebot-positions>header>span { margin:0; color:var(--k170); font:9px var(--mono); }.codebot-plans { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; margin-top:16px; }.codebot-plans button { display:grid; align-content:start; min-height:173px; padding:18px 15px; border:1px solid var(--k108); border-radius:20px; color:var(--k203); background:linear-gradient(145deg,var(--k57),var(--k25)); text-align:left; cursor:pointer; transition:transform .2s,border-color .2s,background .2s,color .2s; }.codebot-plans button:hover { transform:translateY(-3px); border-color:var(--k170); }.codebot-plans span { font:9px var(--mono); letter-spacing:1px; }.codebot-plans b { margin:23px 0 4px; font:700 24px var(--display); letter-spacing:-1px; }.codebot-plans small,.codebot-plans i { font-size:9px; line-height:1.4; }.codebot-plans i { margin-top:auto; font-style:normal; }.codebot-cycle { padding:23px; }.codebot-cycle ol { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin:20px 0 0; padding:0; list-style:none; }.codebot-cycle li { display:grid; gap:8px; padding:12px 10px; border-top:1px solid var(--k321); background:linear-gradient(90deg,var(--k298),var(--k292)); }.codebot-cycle li span { color:var(--k168); font:8px var(--mono); }.codebot-cycle li b { font:600 15px var(--display); }
.codebot-positions { padding:23px; overflow:hidden; }.codebot-positions>header { margin-bottom:17px; }.codebot-position-head,.codebot-position { display:grid; grid-template-columns:1.35fr 1fr 1.15fr 1fr 1.15fr; gap:15px; align-items:center; }.codebot-position-head { padding:0 8px 10px; color:var(--k158); font:8px var(--mono); }.codebot-position { min-height:81px; padding:13px 8px; border-top:1px solid var(--k314); }.codebot-position>div { display:grid; gap:7px; }.codebot-position b { font-size:11px; }.codebot-position small { color:var(--k166); font:8px var(--mono); }.codebot-position>strong { font:500 10px var(--mono); }.codebot-progress { display:block; width:100%; height:3px; overflow:hidden; background:var(--k106); }.codebot-progress i { display:block; width:var(--codebot-progress); height:100%; background:var(--k253); }.codebot-status { width:max-content; padding:4px 5px; border:1px solid var(--k332); border-radius:3px; color:var(--k250); font:8px var(--mono); }.codebot-position button { justify-self:start; padding:0; border:0; color:var(--k253); background:transparent; font:700 9px var(--nav); text-decoration:underline; cursor:pointer; }
.codebot-dialog-open { overflow:hidden; }.codebot-dialog[hidden],.codebot-toast[hidden] { display:none; }.codebot-dialog { position:fixed; z-index:50; inset:0; display:grid; place-items:center; padding:24px; }.codebot-dialog-scrim { position:absolute; inset:0; border:0; background:var(--k8); backdrop-filter:blur(8px); cursor:default; }.codebot-dialog-panel { position:relative; z-index:1; width:min(540px,100%); max-height:calc(100dvh - 48px); padding:28px; overflow:auto; border:1px solid var(--k330); border-radius:23px; background:radial-gradient(360px 220px at 90% 0,var(--k87),transparent 70%),var(--k37); box-shadow:0 35px 100px var(--k9); }.codebot-dialog-handle { display:none; }.codebot-dialog-panel header { display:flex; align-items:start; justify-content:space-between; gap:18px; }.codebot-dialog-panel h2 { margin:8px 0 4px; font:700 28px/.95 var(--display); letter-spacing:-1.5px; }.codebot-dialog-panel header p { margin:0; color:var(--k184); font:10px var(--mono); }.codebot-dialog-panel header>button { display:grid; place-items:center; flex:0 0 auto; width:36px; height:36px; border:1px solid var(--k332); border-radius:50%; color:var(--k253); background:var(--k55); font-size:24px; cursor:pointer; }.codebot-dialog-balance { display:flex; justify-content:space-between; gap:12px; margin:23px 0 17px; padding:12px 0; border-block:1px solid var(--k314); color:var(--k188); font:9px var(--mono); }.codebot-dialog-balance b { color:var(--k253); font-weight:500; }.codebot-amount { display:grid; gap:8px; color:var(--k188); font:8px var(--mono); }.codebot-amount>div { display:flex; align-items:center; border:1px solid var(--k128); border-radius:8px; background:var(--k22); transition:border-color .18s,box-shadow .18s; }.codebot-amount>div:focus-within { border-color:var(--k261); box-shadow:0 0 0 3px var(--k314); }.codebot-amount input { width:100%; min-width:0; padding:15px; border:0; outline:0; color:var(--k253); background:transparent; font:600 17px var(--mono); }.codebot-amount b { padding-right:15px; color:var(--k198); font:10px var(--mono); }.codebot-quick { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:9px; }.codebot-quick button { min-height:31px; border:1px solid var(--k112); border-radius:5px; color:var(--k221); background:var(--k60); font:9px var(--mono); cursor:pointer; }.codebot-error { min-height:15px; margin:8px 0 0; color:var(--k284); font:9px var(--mono); }.codebot-estimate { display:grid; gap:10px; margin:11px 0 17px; padding:15px; border-radius:10px; background:var(--k63); }.codebot-estimate div { display:flex; justify-content:space-between; gap:15px; color:var(--k188); font:9px var(--mono); }.codebot-estimate b { color:var(--k253); font-weight:500; }.codebot-estimate div:nth-child(2) { padding-top:10px; border-top:1px solid var(--k314); }.codebot-disclosure { margin:0 0 16px; color:var(--k164); font-size:9px; line-height:1.5; }.codebot-confirm { width:100%; }.codebot-confirm:disabled { color:var(--k158)!important; background:var(--k102); cursor:not-allowed; }.codebot-toast { position:fixed; z-index:51; right:24px; bottom:24px; max-width:min(360px,calc(100vw - 48px)); margin:0; padding:14px 16px; border:1px solid var(--k335); border-radius:9px; color:var(--k253); background:var(--k67); box-shadow:0 18px 50px var(--k7); font:10px var(--mono); }
.codebot-plans button:focus-visible,.codebot-position button:focus-visible,.codebot-dialog button:focus-visible,.codebot-overview-card a:focus-visible,.utility-hero .primary-link:focus-visible,.utility-side a:focus-visible { outline:2px solid var(--k261); outline-offset:3px; }

@media (max-width:760px) { .codebot-screen { gap:11px; }.codebot-summary { grid-template-columns:1fr; gap:10px; }.codebot-balance-card,.codebot-overview-card { min-height:0; padding:22px; border-radius:20px; }.codebot-balance-card>strong { font-size:40px; }.codebot-overview-card { gap:18px; }.codebot-plan-section { padding-top:8px; }.codebot-plan-section>header { align-items:start; }.codebot-plan-section>header p { max-width:130px; text-align:right; line-height:1.4; }.codebot-plans { grid-auto-flow:column; grid-auto-columns:minmax(182px,63vw); grid-template-columns:none; overflow-x:auto; margin-inline:-14px; padding:0 14px 6px; scroll-snap-type:x mandatory; scrollbar-width:none; }.codebot-plans::-webkit-scrollbar { display:none; }.codebot-plans button { min-height:158px; padding:17px; border-radius:18px; scroll-snap-align:start; }.codebot-cycle,.codebot-positions { padding:20px; border-radius:18px; }.codebot-cycle>header { align-items:start; }.codebot-cycle>header p { max-width:110px; text-align:right; line-height:1.4; }.codebot-cycle ol { grid-template-columns:repeat(3,1fr); gap:6px; }.codebot-cycle li { padding:10px 7px; }.codebot-cycle li span { line-height:1.35; }.codebot-position-head { display:none; }.codebot-position { grid-template-columns:1fr auto; gap:8px 14px; min-height:0; padding:16px 0; }.codebot-position>strong { justify-self:end; }.codebot-position>div:nth-child(3) { grid-column:1/-1; grid-row:2; }.codebot-position>div:nth-child(4) { grid-column:2; grid-row:2; align-self:start; justify-self:end; text-align:right; }.codebot-position>div:last-child { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; }.codebot-position>div:last-child small { margin-left:auto; }.codebot-dialog { --tabbar-h:calc(73px + env(safe-area-inset-bottom)); align-items:end; padding:0 0 var(--tabbar-h); }.codebot-dialog-panel { width:100%; max-height:calc(100dvh - var(--tabbar-h) - 10px); padding:10px 18px 16px; border-bottom:0; border-radius:22px 22px 0 0; }.codebot-dialog-handle { display:block; width:42px; height:4px; margin:0 auto 12px; border-radius:3px; background:var(--k139); }.codebot-dialog-panel header>button { width:32px; height:32px; font-size:21px; }.codebot-dialog-panel h2 { margin:6px 0 3px; font-size:22px; }.codebot-dialog-balance { margin:14px 0 12px; padding:9px 0; }.codebot-amount input { padding:12px; font-size:16px; }.codebot-quick { margin-top:8px; }.codebot-error { margin-top:6px; }.codebot-estimate { gap:8px; margin:9px 0 12px; padding:12px; }.codebot-estimate div:nth-child(2) { padding-top:8px; }.codebot-disclosure { margin-bottom:12px; }.codebot-toast { right:14px; bottom:calc(85px + env(safe-area-inset-bottom)); max-width:calc(100vw - 28px); } }
@media (prefers-reduced-motion:reduce) { .codebot-plans button,.codebot-dialog-panel { transition:none!important; } }

/* The landing terminal is deliberately CSS-only: its depth must never obscure the data. */
.landing-copy h1 { font-size:clamp(56px,6.1vw,82px); }
.depth-stage { isolation:isolate; min-height:430px; overflow:hidden; border:1px solid var(--k87); border-radius:3px; background:radial-gradient(420px 250px at 52% 35%,var(--k83) 0%,var(--k34) 55%,var(--k15) 100%); }
.depth-stage::before { content:""; position:absolute; z-index:0; inset:0; opacity:.32; background:linear-gradient(90deg,transparent 49.85%,var(--k308) 50%,transparent 50.15%),linear-gradient(var(--k301) 1px,transparent 1px); background-size:100% 100%,100% 36px; pointer-events:none; }
.depth-panel { box-sizing:border-box; display:block; z-index:3; width:min(440px,86%); min-height:332px; padding:22px; border:1px solid var(--k205); border-radius:2px; color:var(--k263); background:var(--k67); box-shadow:26px 34px 0 var(--k3),0 34px 76px var(--k9),inset 0 1px var(--k316); }
.depth-panel[data-tilt] { transform:perspective(1100px) rotateX(calc(6deg + var(--tilt-y))) rotateY(calc(-7deg + var(--tilt-x))) rotateZ(1deg) translateZ(18px); }
.depth-panel::before { inset:8px; border-color:var(--k310); }
.depth-panel header { padding-bottom:13px; border-bottom:1px solid var(--k124); }
.depth-price { margin:25px 0 19px; }
.depth-price>b { font-size:43px; }
.depth-book { gap:27px; padding:13px 0 15px; border-color:var(--k127); }
.depth-book>div { position:relative; gap:8px; padding-top:13px; }
.depth-book>div::before { position:absolute; top:0; left:0; color:var(--k174); font:7px var(--mono); letter-spacing:1px; }
.depth-book>div:first-child::before { content:"BIDS"; }
.depth-book>div:last-child::before { content:"ASKS"; }
.depth-book i { height:7px; border-color:var(--k249); background:linear-gradient(90deg,var(--k256),var(--k158)); }
.depth-book>div:first-child i { background:linear-gradient(90deg,var(--k134),var(--k256)); }
.depth-panel footer { justify-content:space-between; gap:8px; }
.depth-axis { z-index:1; right:5%; bottom:9%; left:5%; opacity:.8; }
.depth-axis i { border-color:var(--k183); }

@media (max-width:760px) { .depth-stage { min-height:350px; } }

/* Signature landing: a floating market instrument, not a boxed dashboard preview. */
.landing-hero--signature { min-height:max(650px,calc(100vh - 83px)); grid-template-columns:minmax(0,.94fr) minmax(440px,1.06fr); gap:3vw; }
.landing-hero--signature .landing-copy { position:relative; z-index:2; padding-top:0; }
.landing-hero--signature .eyebrow { display:flex; align-items:center; gap:10px; color:var(--k209); font-family:"DM Mono",var(--mono); }
.landing-hero--signature .live-status>i { display:block; width:7px; height:7px; border-radius:50%; background:var(--k268); box-shadow:0 0 0 0 var(--k348); animation:offcode-pulse 2.3s ease-out infinite; }
.landing-hero--signature .landing-copy h1 { max-width:760px; margin:26px 0 23px; color:var(--k263); font:700 clamp(54px,6.2vw,91px)/.95 "Syne",var(--display); letter-spacing:-5.5px; }
.landing-hero--signature .landing-copy h1 em { position:relative; color:var(--k218); font-style:normal; }
.landing-hero--signature .landing-copy h1 em::after { content:""; position:absolute; left:7%; bottom:-.055em; width:82%; height:.075em; border-radius:50%; background:var(--k263); opacity:.76; transform:rotate(-2deg); }
.landing-hero--signature .landing-copy p { max-width:414px; color:var(--k198); font:500 14px/1.7 "Manrope",var(--font); letter-spacing:-.25px; }
.landing-hero--signature .landing-actions { gap:26px; margin-top:31px; }
.landing-hero--signature .public-cta { padding:16px 21px; border-radius:5px; font-family:"Manrope",var(--nav); box-shadow:0 14px 34px var(--k306); }
.landing-hero--signature .text-link { display:inline-flex; align-items:center; gap:10px; padding:5px 0; border-bottom:1px solid var(--k342); color:var(--k244); font-family:"Manrope",var(--nav); }
.landing-hero--signature .text-link b { font-size:16px; font-weight:500; }
.landing-hero--signature .landing-copy>small { margin-top:23px; color:var(--k147); font:9px "DM Mono",var(--mono); }
.market-sculpture { position:relative; min-height:480px; overflow:visible; isolation:isolate; }
.market-sculpture::before { content:""; position:absolute; z-index:-2; width:560px; height:560px; top:50%; right:-120px; border-radius:50%; background:radial-gradient(circle,var(--k114) 0%,var(--k75) 30%,transparent 67%); filter:blur(4px); transform:translateY(-50%); }
.market-orbit { position:absolute; z-index:-1; border:1px solid var(--k318); border-radius:50%; pointer-events:none; }
.market-orbit--one { width:620px; height:620px; top:50%; right:-120px; transform:translateY(-50%) rotateX(59deg) rotateZ(-19deg); }
.market-orbit--two { width:455px; height:455px; top:50%; right:-38px; border-color:var(--k308); transform:translateY(-50%) rotateX(69deg) rotateZ(24deg); }
.market-orbit--one::after { content:""; position:absolute; inset:76px; border:1px solid var(--k308); border-radius:inherit; }
.market-stars i { position:absolute; z-index:0; width:5px; height:5px; border-radius:50%; background:var(--k253); box-shadow:0 0 13px var(--k290); }
.market-stars i:nth-child(1){ top:16%; right:33%; }.market-stars i:nth-child(2){ top:31%; right:8%; width:3px; height:3px; opacity:.7; }.market-stars i:nth-child(3){ right:12%; bottom:16%; width:3px; height:3px; opacity:.6; }.market-stars i:nth-child(4){ bottom:22%; left:16%; width:4px; height:4px; opacity:.5; }
.market-terminal { --tilt-x:0deg; --tilt-y:0deg; position:absolute; z-index:2; top:50%; right:5%; width:min(570px,88%); padding:28px 31px 26px; border:1px solid var(--k348); border-radius:21px; color:var(--k264); background:linear-gradient(135deg,var(--k88),var(--k59) 64%,var(--k40)); box-shadow:-28px 39px 63px var(--k5),inset 1px 1px var(--k316); backdrop-filter:blur(14px); transform:translateY(-50%) perspective(1000px) rotateX(calc(3deg + var(--tilt-y))) rotateY(calc(-7deg + var(--tilt-x))) rotateZ(1.4deg); transform-style:preserve-3d; transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .25s; overflow:hidden; }
.market-terminal:hover { box-shadow:-32px 46px 72px var(--k7),inset 1px 1px var(--k326); }
.market-terminal header { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; }
.terminal-asset { display:flex; align-items:center; gap:12px; }
.terminal-asset>span { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:var(--k42); background:radial-gradient(circle at 32% 28%,var(--k288),var(--k224) 58%,var(--k165)); font:27px Georgia; box-shadow:0 6px 22px var(--k289); }
.terminal-asset p { display:grid; gap:5px; margin:0; }.terminal-asset small,.terminal-asset b { font-family:"DM Mono",var(--mono); }.terminal-asset small { color:var(--k214); font-size:9px; letter-spacing:.9px; }.terminal-asset b { color:var(--k264); font-size:12px; }
.terminal-live { display:flex; align-items:center; gap:7px; padding:9px 11px; border:1px solid var(--k332); border-radius:7px; color:var(--k231); font:9px "DM Mono",var(--mono); font-style:normal; }.terminal-live b { display:block; width:6px; height:6px; border-radius:50%; background:var(--k253); box-shadow:0 0 9px var(--k288); }
.terminal-value { position:relative; z-index:1; display:flex; align-items:baseline; gap:13px; margin:32px 0 12px; }.terminal-value>b { font:700 37px/1 "Syne",var(--display); letter-spacing:-2px; }.terminal-value>b span { color:var(--k208); font-size:22px; }.terminal-value em { padding:5px 7px; border-radius:4px; color:var(--k42); background:var(--k263); font:9px "DM Mono",var(--mono); font-style:normal; }
.terminal-chart { position:relative; z-index:1; display:block; width:100%; height:157px; margin:0; overflow:visible; }.terminal-chart::before { content:""; }.terminal-chart .chart-area { fill:url(#offcode-chart-area); }.terminal-chart .chart-line { fill:none; stroke:url(#offcode-chart-line); stroke-width:3; stroke-linecap:round; }
.market-terminal footer { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr auto; gap:22px; align-items:end; padding-top:18px; border-top:1px solid var(--k322); }.market-terminal footer span { display:grid; gap:6px; color:var(--k222); }.market-terminal footer small { color:var(--k177); font:8px "DM Mono",var(--mono); }.market-terminal footer b { font:500 11px "DM Mono",var(--mono); }.market-terminal footer a { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--k342); border-radius:50%; color:var(--k268); font-size:19px; transition:background .2s,color .2s,transform .2s; }.market-terminal footer a:hover { color:var(--k42); background:var(--k263); transform:translate(2px,-2px); }
.terminal-shine { position:absolute; width:270px; height:270px; top:-150px; right:-100px; border-radius:50%; background:radial-gradient(circle,var(--k313),transparent 67%); pointer-events:none; }
.orbit-label { position:absolute; right:-12px; bottom:25px; color:var(--k345); font:9px "DM Mono",var(--mono); letter-spacing:1.4px; transform:rotate(90deg); transform-origin:100% 100%; white-space:nowrap; }
@keyframes offcode-pulse { 70% { box-shadow:0 0 0 6px var(--k291); } 100% { box-shadow:0 0 0 0 var(--k291); } }
@media (max-width:1050px) { .landing-hero--signature { min-height:590px; grid-template-columns:.9fr 1.1fr; gap:12px; }.landing-hero--signature .landing-copy h1 { font-size:clamp(52px,6.4vw,75px); }.market-terminal { right:0; width:min(510px,94%); padding:24px; }.market-sculpture { min-height:430px; }.market-orbit--one { width:540px; height:540px; } }
@media (max-width:760px) { .landing-hero--signature { display:block; min-height:0; padding:82px 0 50px; }.landing-hero--signature .landing-copy h1 { max-width:500px; font-size:clamp(49px,13vw,67px); letter-spacing:-4px; }.landing-hero--signature .landing-actions { align-items:flex-start; flex-direction:column; gap:17px; }.market-sculpture { min-height:455px; margin:42px -16px 0; }.market-terminal { top:50%; right:50%; width:min(470px,calc(100% - 18px)); padding:20px 18px; transform:translate(50%,-50%) perspective(900px) rotateX(calc(2deg + var(--tilt-y))) rotateY(calc(-3deg + var(--tilt-x))) rotateZ(1deg); }.market-terminal:hover { transform:translate(50%,-50%) perspective(900px) rotateX(calc(2deg + var(--tilt-y))) rotateY(calc(-3deg + var(--tilt-x))) rotateZ(1deg); }.market-orbit--one { width:500px; height:500px; right:50%; transform:translate(50%,-50%) rotateX(59deg) rotateZ(-19deg); }.market-orbit--two { width:360px; height:360px; right:50%; transform:translate(50%,-50%) rotateX(69deg) rotateZ(24deg); }.terminal-value { margin-top:25px; }.terminal-value>b { font-size:31px; }.terminal-chart { height:125px; }.terminal-live { padding:7px; font-size:7px; }.orbit-label { display:none; } }

/* Restored opening sequence from the first OFFCODE concept, monochrome only. */
.landing-hero--signature { position:relative; min-height:max(780px,calc(100vh - 83px)); }
.public-header nav { gap:31px; }
.hero-sidecopy { position:absolute; top:208px; right:-13px; display:flex; align-items:center; gap:9px; margin:0; color:var(--k349); font:9px "DM Mono",var(--mono); letter-spacing:.8px; white-space:nowrap; transform:rotate(90deg); transform-origin:100% 0; }
.hero-sidecopy i { width:4px; height:4px; border-radius:50%; background:var(--k254); }
.hero-scroll { position:absolute; bottom:26px; left:50%; display:grid; justify-items:center; gap:12px; color:var(--k169); font:8px "DM Mono",var(--mono); letter-spacing:1.1px; transform:translateX(-50%); }
.hero-scroll i { display:block; width:1px; height:42px; background:linear-gradient(var(--k260),var(--k291)); }
.market-ticker { overflow:hidden; border-top:1px solid var(--k84); border-bottom:1px solid var(--k84); background:var(--k17); }
.market-ticker>div { display:flex; align-items:center; gap:31px; width:max-content; min-height:65px; padding:0 31px; animation:market-ticker 36s linear infinite; }
.market-ticker p { display:flex; align-items:center; gap:8px; margin:0; color:var(--k232); font:10px "DM Mono",var(--mono); white-space:nowrap; }.market-ticker p i { display:grid; place-items:center; width:22px; height:22px; border:1px solid var(--k341); border-radius:50%; color:var(--k260); font:12px Georgia; font-style:normal; }.market-ticker p b { font-weight:500; }.market-ticker p em { color:var(--k263); font-style:normal; }.market-ticker>div>span { color:var(--k160); font:8px "DM Mono",var(--mono); letter-spacing:.7px; white-space:nowrap; }
@keyframes market-ticker { to { transform:translateX(-8%); } }
.landing-features { position:relative; gap:13px; padding:112px 0 124px; }.landing-features::before { content:"SEU PRÓXIMO MOVIMENTO"; position:absolute; top:64px; left:0; color:var(--k162); font:9px "DM Mono",var(--mono); letter-spacing:1px; }.landing-features article { position:relative; min-height:396px; padding:26px; overflow:hidden; border-color:var(--k111); border-radius:9px; background:radial-gradient(320px 240px at 70% 17%,var(--k84),var(--k49) 64%); transition:transform .28s,border-color .28s,background .28s; }.landing-features article:hover { border-color:var(--k213); background:radial-gradient(320px 240px at 70% 17%,var(--k102),var(--k53) 64%); transform:translateY(-7px); }.landing-features article::after { content:""; position:absolute; top:65px; right:50%; width:148px; height:148px; border:1px solid var(--k344); border-radius:50%; transform:translateX(50%) rotateX(62deg) rotateZ(-24deg); box-shadow:0 0 0 32px var(--k295); }.landing-features article:nth-child(2)::after { border-radius:34% 66% 67% 33% / 40% 42% 58% 60%; transform:translateX(50%) rotate(38deg); }.landing-features article:nth-child(3)::after { border-style:dashed; box-shadow:0 0 0 27px var(--k295),0 0 0 55px var(--k294); }.landing-features h2 { position:relative; z-index:1; margin-top:176px; font-family:"Syne",var(--display); }.landing-features p,.landing-features a,.landing-features .feature-mark { position:relative; z-index:1; }
.landing-manifesto { min-height:430px; display:flex; flex-direction:column; justify-content:space-between; padding:68px 0 42px; border-top:1px solid var(--k83); color:var(--k263); }.landing-manifesto p { margin:0; color:var(--k190); font:10px/1.6 "DM Mono",var(--mono); letter-spacing:1px; }.landing-manifesto b { margin:-8px -5px 0; font:800 clamp(72px,13vw,180px)/.75 "Syne",var(--display); letter-spacing:-14px; }.landing-manifesto a { align-self:flex-end; }
@media (max-width:760px) { .landing-hero--signature { min-height:0; }.hero-sidecopy,.hero-scroll { display:none; }.market-ticker>div { min-height:54px; gap:21px; padding:0 18px; }.market-ticker p:nth-child(n+4) { display:none; }.landing-features { padding:80px 0 65px; }.landing-features::before { top:38px; }.landing-features article { min-height:330px; }.landing-features h2 { margin-top:151px; }.landing-manifesto { min-height:320px; padding:52px 0 32px; }.landing-manifesto b { font-size:20vw; letter-spacing:-7px; }.landing-manifesto a { align-self:flex-start; } }

/* Use the current OFFCODE type system throughout the restored landing. */
.landing-hero--signature .landing-copy h1,
.landing-features h2,
.landing-manifesto b,
.terminal-value>b { font-family:var(--display); }
.landing-hero--signature .landing-copy p,
.landing-hero--signature .public-cta,
.landing-hero--signature .text-link,
.terminal-asset b { font-family:var(--font); }
.landing-hero--signature .eyebrow,
.landing-hero--signature .landing-copy>small,
.hero-sidecopy,
.hero-scroll,
.terminal-asset small,
.terminal-live,
.terminal-value em,
.market-terminal footer small,
.market-terminal footer b,
.orbit-label,
.market-ticker p,
.market-ticker>div>span,
.landing-features::before,
.landing-manifesto p { font-family:var(--mono); }

/* Logged experience: carry the landing's floating-instrument language into every tool. */
body[data-page="dashboard"],body[data-page="markets"],body[data-page="trade"],body[data-page="convert"],body[data-page="earn"],body[data-page="prediction"],body[data-page="wallet"] { background:radial-gradient(760px 470px at 87% 9%,var(--k79) 0%,var(--k43) 31%,transparent 66%),var(--k12); }
html,body { overflow-x:clip; }
/* Strict black-and-white treatment for all native app utility states. */
.settings-list .danger,.sheet-logout { color:var(--k254)!important; }
@media (max-width:760px) { .mobile-sheet.mobile-sheet:not([hidden]) { top:auto; right:0; bottom:0; left:0; width:100%; max-height:82vh; border-radius:24px 24px 0 0; transform:none; } }
@media (max-width:760px) { .app-header { background:var(--k49)!important; }.mobile-bottom-nav { background:var(--k54)!important; }.mobile-sheet { background:linear-gradient(145deg,var(--k67),var(--k34))!important; }.mobile-sheet:not([hidden]) { top:auto; left:0; width:100%; max-height:82vh; border-radius:24px 24px 0 0; transform:none; }.sheet-option { background:var(--k74)!important; }.sheet-option>i { background:var(--k102)!important; }.sheet-search { background:var(--k79)!important; } }
.demo-bar { height:30px; border-bottom-color:var(--k314); color:var(--k197); background:var(--k17); letter-spacing:1px; }
.app-header { height:83px; border-bottom-color:var(--k314); background:var(--k18); box-shadow:0 14px 45px var(--k2); }.app-header::after { content:""; position:absolute; right:8%; bottom:-1px; width:155px; height:1px; background:linear-gradient(90deg,transparent,var(--k255),transparent); opacity:.75; }
.main-nav { gap:7px; }.main-nav a { padding:10px 12px; border-radius:7px; }.main-nav a.active { color:var(--k42); background:var(--k261); box-shadow:0 7px 22px var(--k312); }.wallet-button { padding:10px 14px; border-radius:8px; }.wallet-button:hover { box-shadow:0 10px 25px var(--k308); }
.page-wrap { position:relative; isolation:isolate; width:min(1360px,calc(100% - 56px)); padding:57px 0 100px; }.page-wrap::before { content:""; position:absolute; z-index:-1; right:-18vw; top:46px; width:580px; height:580px; border:1px solid var(--k308); border-radius:50%; transform:rotateX(63deg) rotateZ(-22deg); box-shadow:0 0 0 92px var(--k293),0 0 0 185px var(--k292); pointer-events:none; }.page-wrap::after { content:""; position:absolute; z-index:-1; left:-14vw; top:440px; width:420px; height:420px; border:1px solid var(--k302); border-radius:50%; transform:rotateX(70deg) rotateZ(31deg); pointer-events:none; }
.page-intro { min-height:136px; align-items:center; padding:0 0 32px; }.page-intro h1 { margin:11px 0 0; font-size:clamp(42px,4.35vw,66px); letter-spacing:-3.9px; }.page-intro h1::after { content:""; display:block; width:52px; height:3px; margin-top:14px; border-radius:50%; background:var(--k255); transform:rotate(-2deg); }.page-intro p { max-width:465px; margin-top:13px; font-size:13px; line-height:1.55; }.wallet-link { padding:12px 14px; border-color:var(--k336); border-radius:9px; background:var(--k38); backdrop-filter:blur(12px); }.wallet-link:hover { border-color:var(--k250); }
.page-wrap .surface,.page-wrap .balance-card,.portfolio-command,.wallet-summary { border:1px solid var(--k324); border-radius:20px; background:linear-gradient(138deg,var(--k77),var(--k47) 68%,var(--k20)); box-shadow:inset 1px 1px var(--k303),0 21px 48px var(--k2); backdrop-filter:blur(14px); }.page-wrap .surface { overflow:hidden; }.page-wrap .surface header { position:relative; z-index:1; }.page-wrap .surface header h2 { font-size:21px; letter-spacing:-1px; }.page-wrap .surface header>a,.page-wrap .surface>a { color:var(--k235); }.page-wrap .label { color:var(--k191); letter-spacing:1.25px; }
.dashboard-hero { gap:14px; }.dashboard-hero .balance-card { min-height:324px; padding:31px 33px; border-radius:23px; background:radial-gradient(440px 250px at 75% 10%,var(--k112) 0%,var(--k68) 39%,var(--k35) 75%); }.dashboard-hero .balance-card::after,.wallet-hero .balance-card::after { content:""; position:absolute; z-index:0; width:470px; height:470px; right:-110px; bottom:-295px; border:1px solid var(--k330); border-radius:50%; transform:rotateX(61deg) rotateZ(-23deg); box-shadow:0 0 0 52px var(--k297),0 0 0 104px var(--k294); }.dashboard-hero .balance-card h2 { margin-top:34px; font-size:clamp(48px,4.7vw,67px); letter-spacing:-4px; }.dashboard-hero .balance-card p,.wallet-hero .balance-card p { font-size:11px; }.balance-actions a { min-width:133px; padding:12px 13px; border-color:var(--k343); border-radius:7px; background:var(--k27); }.balance-actions a:hover { box-shadow:0 12px 26px var(--k311); }.dashboard-hero .orb-a,.dashboard-hero .orb-b,.dashboard-hero .orb-c { display:none; }
.portfolio-command { position:relative; min-height:324px; padding:28px; overflow:hidden; background:linear-gradient(145deg,var(--k72),var(--k32)); }.portfolio-command::before { content:""; position:absolute; width:170px; height:170px; top:-76px; right:-56px; border:1px solid var(--k318); border-radius:50%; box-shadow:0 0 0 30px var(--k294); }.portfolio-command header,.portfolio-rows,.portfolio-actions { position:relative; z-index:1; }.portfolio-rows { gap:15px; margin-top:29px; }.portfolio-rows p { padding-bottom:12px; border-color:var(--k313); }.portfolio-rows i { height:3px; background:linear-gradient(90deg,var(--k255) var(--row-size,40%),var(--k105) 0); }.portfolio-actions { margin-top:20px; }.portfolio-actions a { padding:11px; border-color:var(--k339); border-radius:7px; }
.two-col,.wallet-hero,.trade-layout { gap:14px; margin-top:14px; }.market-list,.allocation { min-height:334px; padding:25px; }.market-list::before,.allocation::before,.activity::before { content:""; position:absolute; width:230px; height:230px; border:1px solid var(--k301); border-radius:50%; pointer-events:none; }.market-list::before { right:-100px; top:-135px; }.allocation::before { left:-115px; bottom:-145px; }.activity::before { right:16%; top:-195px; }.market-list,.allocation,.activity { position:relative; }.market-row { min-height:57px; border-color:var(--k308); transition:background .2s,transform .2s; }.market-row:hover { background:var(--k298); transform:translateX(3px); }.market-row em { border-radius:5px; }.activity { padding:25px; }.activity-grid { border-color:var(--k308); }.activity-grid p { min-height:72px; border-color:var(--k308); }
.market-screen,.asset-table { padding:29px; }.market-screen { position:relative; min-height:570px; }.market-screen::before { content:""; position:absolute; width:390px; height:390px; right:-100px; top:-120px; border:1px solid var(--k309); border-radius:50%; box-shadow:0 0 0 70px var(--k293); }.market-grid { position:relative; z-index:1; grid-template-columns:1fr; gap:9px; margin:7px 0 24px; }.market-list-head,.market-grid .market-list-row { display:grid; grid-template-columns:43px minmax(170px,1.3fr) minmax(150px,1fr) minmax(84px,.55fr) 72px; align-items:center; gap:14px; }.market-list-head { position:relative; z-index:1; margin-top:28px; padding:0 20px 9px; color:var(--k153); font:7px var(--mono); letter-spacing:.65px; }.market-list-head span:first-child { grid-column:1 / 3; }.market-grid .market-list-row { position:relative; min-height:76px; padding:12px 20px; overflow:hidden; border:1px solid var(--k323); border-radius:13px; background:linear-gradient(105deg,var(--k74),var(--k42) 72%); transition:transform .22s,border-color .22s,background .22s,box-shadow .22s; }.market-grid .market-list-row::before { content:""; position:absolute; inset:0; opacity:0; background:linear-gradient(90deg,var(--k302),transparent 42%); transform:translateX(-35%); transition:opacity .22s,transform .35s; pointer-events:none; }.market-grid .market-list-row:hover { border-color:var(--k233); background:linear-gradient(105deg,var(--k87),var(--k53) 72%); box-shadow:0 14px 30px var(--k3); transform:translateX(5px); }.market-grid .market-list-row:hover::before { opacity:1; transform:translateX(0); }.market-grid .market-list-row>* { position:relative; z-index:1; }.market-grid i { width:36px; height:36px; }.market-grid b { display:grid; gap:4px; margin:0; font:700 11px var(--mono); }.market-grid b small { color:var(--k159); font:8px var(--font); font-weight:500; }.market-grid strong { margin:0; font:700 18px var(--display); letter-spacing:-.7px; }.market-grid em { margin:0; font-size:9px; }.market-grid u { justify-self:end; color:var(--k198); font:700 9px var(--nav); text-decoration:none; transition:color .2s,transform .2s; }.market-grid .market-list-row:hover u { color:var(--k263); transform:translateX(2px); }.primary-link { min-width:200px; padding:14px 17px; border-radius:7px; box-shadow:0 13px 27px var(--k310); }
.trade-chart,.demo-order { min-height:460px; padding:28px; }.trade-chart { background:radial-gradient(480px 240px at 75% 4%,var(--k102),var(--k57) 47%,var(--k26) 85%)!important; }.trade-chart::after { content:""; position:absolute; width:420px; height:420px; right:-120px; bottom:-300px; border:1px solid var(--k319); border-radius:50%; transform:rotateX(60deg) rotateZ(-20deg); pointer-events:none; }.trade-chart header,.chart { position:relative; z-index:1; }.chart { margin-top:30px; }.chart .grid { stroke:var(--k314); }.chart .line { stroke:var(--k264); stroke-width:2.5; }.demo-order { background:linear-gradient(145deg,var(--k79),var(--k42))!important; }.demo-order::before { content:"◈"; position:absolute; top:-62px; right:22px; color:var(--k303); font:180px Georgia; }.demo-order>* { position:relative; z-index:1; }.order-tabs { border-color:var(--k330); border-radius:8px; }.order-tabs b { border-radius:5px; }.demo-order label strong { border-color:var(--k326); border-radius:7px; background:var(--k46); }.demo-order .primary-link { width:100%; }
.convert-shell { min-height:530px; border-color:var(--k328); border-radius:22px; background:radial-gradient(450px 330px at 77% 32%,var(--k92),transparent 58%),linear-gradient(135deg,var(--k71),var(--k25)); box-shadow:inset 1px 1px var(--k303),0 25px 60px var(--k3); }.convert-card { border-radius:18px; background:var(--k44); box-shadow:0 20px 45px var(--k1); }.convert-field { border-color:var(--k332); border-radius:9px; background:var(--k31); }.convert-note { border-color:var(--k336); background:radial-gradient(circle at 35% 30%,var(--k102),var(--k49) 66%); box-shadow:0 20px 60px var(--k3); }
.earn-lead { min-height:370px; padding:42px 9vw; border:1px solid var(--k321); border-radius:22px; background:radial-gradient(430px 330px at 84% 31%,var(--k91),transparent 58%),var(--k37); box-shadow:inset 1px 1px var(--k303),0 24px 55px var(--k2); }.earn-lead h2,.prediction-head h2 { font-size:clamp(47px,5.3vw,74px); }.earn-grid { gap:14px; margin-top:14px; }.earn-grid article,.prediction-grid article { border-radius:17px!important; background:linear-gradient(145deg,var(--k74),var(--k37))!important; transition:transform .22s,border-color .22s; }.earn-grid article:hover,.prediction-grid article:hover { border-color:var(--k228); transform:translateY(-5px); }.prediction-head { max-width:760px; padding:10px 0 42px; }.prediction-grid { gap:14px; }.prediction-grid article { min-height:255px; padding:25px; }.prediction-grid div i { height:5px; border-radius:5px; }.earn-orbit { border-color:var(--k343); box-shadow:inset 16px 16px 35px var(--k298),inset -26px -28px 48px var(--k7),0 0 0 47px var(--k294); }
.wallet-hero { gap:14px; }.wallet-hero .balance-card { min-height:300px; padding:31px; background:radial-gradient(440px 250px at 72% 10%,var(--k108),var(--k57) 58%,var(--k26)); }.wallet-hero .balance-card h2 { margin-top:28px; font-size:clamp(46px,4.7vw,66px); }.wallet-summary { position:relative; min-height:300px; padding:29px; overflow:hidden; border-radius:20px; }.wallet-summary::before { content:""; position:absolute; width:230px; height:230px; left:-80px; bottom:-145px; border:1px solid var(--k314); border-radius:50%; }.wallet-summary>* { position:relative; z-index:1; }.wallet-actions { gap:14px; margin-top:14px; }.wallet-actions>a { border-color:var(--k333); border-radius:15px; background:linear-gradient(135deg,var(--k73),var(--k42)); transition:transform .22s,border-color .22s; }.wallet-actions>a:hover { border-color:var(--k253); transform:translateY(-4px); }.wallet-flow { border-radius:19px; }.asset-table { border-radius:20px; }.table-row { min-height:67px; border-color:var(--k308); }.table-row:hover:not(.table-label) { background:var(--k296); }
.portfolio-command[data-tilt],.market-screen[data-tilt],.trade-chart[data-tilt],.demo-order[data-tilt],.wallet-hero .balance-card[data-tilt],.wallet-summary[data-tilt] { --tilt-x:0deg; --tilt-y:0deg; transform:perspective(1300px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)); transform-style:preserve-3d; transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .25s; will-change:transform; }
@media (max-width:760px) { .app-header { height:68px; }.app-header::after { display:none; }.page-wrap { width:calc(100% - 28px); padding:34px 0 65px; }.page-wrap::before { right:-280px; top:22px; }.page-intro { min-height:115px; padding-bottom:24px; }.page-intro h1 { font-size:42px; }.page-intro p { max-width:245px; font-size:10px; }.page-wrap .surface,.page-wrap .balance-card,.portfolio-command,.wallet-summary { border-radius:15px; }.dashboard-hero .balance-card,.portfolio-command,.wallet-hero .balance-card,.wallet-summary { min-height:250px; padding:22px; }.dashboard-hero .balance-card h2,.wallet-hero .balance-card h2 { font-size:45px; }.two-col,.wallet-hero,.trade-layout { gap:9px; margin-top:9px; }.market-list,.allocation,.activity,.market-screen,.asset-table,.trade-chart,.demo-order { padding:18px; }.earn-lead { margin:0; padding:28px 22px; border-radius:16px; }.market-grid { gap:8px; }.market-grid article { min-height:130px; padding:15px; border-radius:11px; }.portfolio-command[data-tilt],.market-screen[data-tilt],.trade-chart[data-tilt],.demo-order[data-tilt],.wallet-hero .balance-card[data-tilt],.wallet-summary[data-tilt] { transform:none; } }

/* Additional app destinations shared by desktop and the native-style mobile shell. */
.app-header>button.mobile-menu:focus,.navbar-menu-panel button:focus { outline:1px solid var(--k255); outline-offset:3px; }
.sheet-open { overflow:hidden; }.mobile-sheet-scrim:not([hidden]) { position:fixed; z-index:40; inset:0; display:block; border:0; background:var(--k7); backdrop-filter:blur(7px); }.mobile-sheet:not([hidden]) { position:fixed; z-index:41; top:50%; left:50%; display:block; width:min(520px,calc(100% - 32px)); max-height:80vh; padding:18px 20px 24px; overflow:auto; border:1px solid var(--k329); border-radius:22px; color:var(--k253); background:var(--k42); box-shadow:0 28px 90px var(--k8); transform:translate(-50%,-50%); }.mobile-sheet:not([hidden]) .sheet-handle { display:block; width:44px; height:5px; margin:0 auto 18px; border-radius:50%; background:var(--k138); }.mobile-sheet:not([hidden])>header { display:flex; align-items:center; justify-content:space-between; }.mobile-sheet:not([hidden])>header b { font:700 25px var(--display); letter-spacing:-1px; }.mobile-sheet:not([hidden])>header button { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--k325); border-radius:50%; color:var(--k214); background:transparent; font-size:25px; cursor:pointer; }.mobile-sheet:not([hidden]) .sheet-option { display:grid; grid-template-columns:49px 1fr auto; align-items:center; gap:13px; min-height:96px; margin-top:15px; padding:13px; border:1px solid var(--k326); border-radius:15px; background:var(--k74); }.mobile-sheet:not([hidden]) .sheet-option>i { display:grid; place-items:center; width:45px; height:45px; border-radius:50%; background:var(--k102); font-size:23px; font-style:normal; }.mobile-sheet:not([hidden]) .sheet-option span { display:grid; gap:5px; }.mobile-sheet:not([hidden]) .sheet-option b { font-size:14px; }.mobile-sheet:not([hidden]) .sheet-option small { color:var(--k185); font-size:10px; line-height:1.35; }.mobile-sheet:not([hidden]) .sheet-option em { color:var(--k198); font-size:22px; font-style:normal; }.sheet-footnote { margin:18px 2px 0; color:var(--k158); font:9px/1.5 var(--mono); }
/* Seletor de ativo dentro da folha, NO DESKTOP.
   A folha vira modal centralizada fora do media query (`.mobile-sheet:
   not([hidden])` acima), mas o dimensionamento do `.asset-picker` só existia
   DENTRO do bloco mobile. Sem estas regras o `i` fica sem tamanho e o
   `.coin-icon` renderiza no tamanho natural — o ícone da moeda cresce até
   ocupar a modal inteira. Foi assim que o "Selecionar ativo" apareceu
   quebrado no Painel. Os valores são os mesmos do bloco mobile. */
.mobile-sheet:not([hidden]) .asset-picker { margin-top:0!important; border-top:0!important; }
.mobile-sheet:not([hidden]) .asset-picker>a { display:grid!important; grid-template-columns:43px 1fr auto; gap:11px; min-height:68px!important; }
.mobile-sheet:not([hidden]) .asset-picker i { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--k334); border-radius:50%; color:var(--k253); font:16px Georgia; font-style:normal; }
.mobile-sheet:not([hidden]) .asset-picker i>* { width:100%; height:100%; object-fit:contain; }
.mobile-sheet:not([hidden]) .asset-picker span { display:grid; gap:4px; }
.mobile-sheet:not([hidden]) .asset-picker small { color:var(--k168); font-size:9px; }
.mobile-sheet:not([hidden]) .sheet-search { display:flex; align-items:center; gap:11px; height:54px; margin:20px 0 6px; padding:0 14px; border-radius:13px; color:var(--k187); background:var(--k80); font-size:24px; }
.mobile-sheet:not([hidden]) .sheet-search span { font-size:13px; }
.mobile-app-head,.mobile-bottom-nav,.mobile-wallet-person,.mobile-market-list,.mobile-sheet,.mobile-sheet-scrim { display:none; }
.navbar-menu-open { overflow:hidden; }.app-header>button.mobile-menu { display:flex!important; align-items:center; gap:8px; width:auto; height:38px; margin-left:-16px; padding:0 13px; border:1px solid var(--k332); border-radius:9px; color:var(--k255); background:var(--k42); font:700 9px var(--nav); letter-spacing:.65px; text-transform:uppercase; cursor:pointer; }.app-header>button.mobile-menu span { display:block; }.app-header>button.mobile-menu i { display:block; width:13px; height:1px; background:var(--k255); transition:transform .2s,opacity .2s; }.app-header>button.mobile-menu i+i { margin-left:-21px; transform:translateY(4px); }.app-header>button.mobile-menu[aria-expanded="true"] i { transform:translateY(2px) rotate(45deg); }.app-header>button.mobile-menu[aria-expanded="true"] i+i { opacity:1; transform:translateY(2px) rotate(-45deg); }.navbar-menu-scrim { position:fixed; z-index:42; inset:0; display:block; border:0; background:var(--k7); backdrop-filter:blur(7px); }.navbar-menu-panel { position:fixed; z-index:43; top:var(--navbar-menu-top,104px); right:auto; left:var(--navbar-menu-left,calc(50vw - 425px)); display:block; width:min(850px,calc(100vw - 48px)); max-height:calc(100dvh - var(--navbar-menu-top,104px) - 24px); padding:26px; overflow:auto; border:1px solid var(--k332); border-radius:22px; color:var(--k253); background:linear-gradient(145deg,var(--k70),var(--k26) 72%); box-shadow:0 36px 100px var(--k9); transform-origin:var(--navbar-menu-origin-x,50%) top; }.navbar-menu-panel[hidden],.navbar-menu-scrim[hidden] { display:none!important; }.navbar-menu-panel>header { display:flex; align-items:start; justify-content:space-between; gap:30px; padding:5px 4px 24px; border-bottom:1px solid var(--k314); }.navbar-menu-panel>header h2 { max-width:420px; margin:9px 0 0; font:700 34px/.95 var(--display); letter-spacing:-2px; }.navbar-menu-panel>header>button { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--k330); border-radius:50%; color:var(--k253); background:var(--k53); font:25px/1 var(--font); cursor:pointer; }.navbar-menu-groups { display:grid; grid-template-columns:1.25fr .9fr .9fr; gap:22px; padding:24px 4px 19px; }.navbar-menu-groups section { display:grid; align-content:start; }.navbar-menu-groups section>b { margin-bottom:10px; color:var(--k167); font:8px var(--mono); letter-spacing:1.4px; }.navbar-menu-groups a { display:grid; grid-template-columns:1fr auto; gap:3px 12px; min-height:51px; padding:10px 8px; border-bottom:1px solid var(--k309); color:var(--k228); transition:background .2s,color .2s,padding .2s; }.navbar-menu-groups a:hover,.navbar-menu-groups a.active { padding-inline:12px; color:var(--k42); background:var(--k255); }.navbar-menu-groups a span { font:700 13px var(--font); }.navbar-menu-groups a i { grid-column:1; color:var(--k158); font:8px var(--mono); font-style:normal; }.navbar-menu-groups a::after { content:"↗"; grid-column:2; grid-row:1/3; align-self:center; font:13px var(--mono); }.navbar-menu-groups a:hover i,.navbar-menu-groups a.active i { color:var(--k132); }.navbar-menu-panel>footer { display:flex; align-items:center; justify-content:space-between; padding:17px 4px 1px; border-top:1px solid var(--k314); color:var(--k180); font:9px var(--mono); }.navbar-menu-panel>footer span { display:flex; align-items:center; gap:7px; }.navbar-menu-panel>footer span i { width:6px; height:6px; border-radius:50%; background:var(--k253); box-shadow:0 0 0 4px var(--k306); }.navbar-menu-panel>footer a { color:var(--k253); }
.shortcut-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; margin-top:14px; }.shortcut-grid header { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; }.shortcut-grid header>a { color:var(--k234); font:10px var(--mono); }.shortcut-grid>a { display:grid; justify-items:center; gap:9px; min-height:112px; padding:16px 8px; border:1px solid var(--k321); border-radius:15px; color:var(--k222); background:linear-gradient(145deg,var(--k67),var(--k37)); transition:transform .2s,border-color .2s; }.shortcut-grid>a:hover { border-color:var(--k252); transform:translateY(-4px); }.shortcut-grid i { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--k338); border-radius:12px; color:var(--k263); font:21px var(--display); font-style:normal; }.shortcut-grid span { font-size:10px; }
.shortcut-grid i svg { width:22px; height:22px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; transition:transform .22s ease,stroke-width .22s ease; }.shortcut-grid>a:hover i svg,.shortcut-grid>a:focus-visible i svg { stroke-width:1.9; transform:scale(1.08); }.shortcut-grid>a:focus-visible { outline:2px solid var(--k260); outline-offset:4px; }
.shortcut-grid>a.mobile-only-shortcut { display:none; }
.utility-layout { display:grid; grid-template-columns:1.25fr .75fr; gap:14px; }.utility-hero,.utility-side,.vip-lead,.security-screen { padding:37px; }.utility-hero h2,.vip-lead h2,.security-screen h2 { margin:17px 0; font:700 clamp(36px,4vw,61px)/.92 var(--display); letter-spacing:-3px; }.utility-hero p,.vip-lead p,.security-screen>p { max-width:455px; color:var(--k198); font-size:13px; line-height:1.65; }.referral-code { display:flex; align-items:center; justify-content:space-between; max-width:430px; margin:29px 0 18px; padding:16px 18px; border:1px solid var(--k330); border-radius:9px; color:var(--k265); background:var(--k26); font:600 15px var(--mono); }.referral-code button { padding:7px 10px; border:0; border-radius:5px; color:var(--k42); background:var(--k253); font:700 9px var(--nav); }.utility-side { display:grid; align-content:center; gap:9px; }.utility-side>b { font:700 clamp(36px,4vw,59px) var(--display); letter-spacing:-3px; }.utility-side p { margin:0 0 23px; color:var(--k168); font:10px var(--mono); }.utility-side hr { width:100%; border:0; border-top:1px solid var(--k314); }.utility-progress { height:5px; margin-top:14px; border-radius:50%; background:var(--k102); }.utility-progress i { display:block; height:100%; background:var(--k253); }.card-preview { position:relative; min-height:360px; padding:35px; overflow:hidden; border:1px solid var(--k346); border-radius:24px; background:linear-gradient(135deg,var(--k106),var(--k51) 60%,var(--k17)); box-shadow:0 27px 70px var(--k4); }.card-preview::after { content:""; position:absolute; width:460px; height:460px; right:-210px; bottom:-300px; border:1px solid var(--k327); border-radius:50%; box-shadow:0 0 0 60px var(--k297); }.card-preview>* { position:relative; z-index:1; display:block; }.card-preview>span { font:700 22px var(--nav); letter-spacing:1px; }.card-preview>b { margin-top:80px; color:var(--k214); font:10px var(--mono); letter-spacing:1px; }.card-preview>i { margin-top:14px; font:500 27px var(--mono); letter-spacing:3px; font-style:normal; }.card-preview>small { position:absolute; bottom:33px; color:var(--k198); font:9px var(--mono); letter-spacing:1px; }.vip-grid { display:grid; grid-template-columns:1.4fr repeat(2,.8fr); gap:14px; }.vip-grid>article:not(.vip-lead) { display:grid; align-content:end; min-height:290px; padding:28px; }.vip-grid strong { margin:17px 0; font:700 48px var(--display); letter-spacing:-3px; }.vip-grid p { color:var(--k188); font-size:11px; line-height:1.6; }.journal-list { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.journal-list article { min-height:300px; padding:29px; }.journal-list h2 { margin:24px 0 13px; font:700 25px/1.05 var(--display); letter-spacing:-1.3px; }.journal-list p { color:var(--k188); font-size:11px; line-height:1.6; }.journal-list a { display:block; margin-top:28px; color:var(--k253); font-size:10px; }.profile-layout { display:grid; grid-template-columns:1fr 1.3fr; gap:14px; }.profile-card { display:flex; align-items:center; gap:18px; min-height:190px; padding:30px; }.profile-card>i { display:grid; place-items:center; width:74px; height:74px; border:1px solid var(--k343); border-radius:50%; color:var(--k42); background:var(--k253); font:700 20px var(--mono); font-style:normal; }.profile-card h2 { margin:8px 0 4px; font:700 28px var(--display); letter-spacing:-1.5px; }.profile-card p { margin:0; color:var(--k188); font-size:11px; }.profile-card>b { margin-left:auto; padding:6px 8px; border:1px solid var(--k330); border-radius:5px; color:var(--k237); font:8px var(--mono); }.settings-list { padding:9px 29px; }.settings-list a { display:flex; align-items:center; justify-content:space-between; min-height:56px; border-bottom:1px solid var(--k310); color:var(--k253); font-size:13px; }.settings-list a:last-child { border:0; }.settings-list .danger { color:var(--k283); }.security-screen { max-width:820px; }.security-screen>div { display:grid; grid-template-columns:1fr auto 20px; gap:18px; align-items:center; min-height:74px; border-top:1px solid var(--k314); }.security-screen>div:first-of-type { margin-top:33px; }.security-screen>div b { font-size:12px; }.security-screen>div span { color:var(--k188); font:9px var(--mono); }.security-screen>div i { color:var(--k253); font-style:normal; }.empty-key { display:grid; justify-items:center; gap:11px; margin:34px 0 22px; padding:38px; border:1px solid var(--k319); border-radius:14px; color:var(--k237); text-align:center; }.empty-key i { display:grid; place-items:center; width:48px; height:48px; border:1px solid var(--k337); border-radius:50%; font:25px Georgia; font-style:normal; }.empty-key small { color:var(--k168); font-size:10px; }

.affiliate-summary { display:grid; grid-template-columns:1.35fr .65fr; gap:32px; min-height:270px; padding:37px; }.affiliate-summary h2 { margin:17px 0; font:700 clamp(36px,4vw,61px)/.92 var(--display); letter-spacing:-3px; }.affiliate-summary p { max-width:455px; color:var(--k198); font-size:13px; line-height:1.65; }.affiliate-summary dl { display:grid; align-content:center; gap:22px; margin:0; }.affiliate-summary dl>div { padding-bottom:19px; border-bottom:1px solid var(--k314); }.affiliate-summary dl>div:last-child { padding:0; border:0; }.affiliate-summary dt { color:var(--k188); font:8px var(--mono); letter-spacing:.08em; }.affiliate-summary dd { margin:8px 0 0; font:700 clamp(28px,3vw,43px) var(--display); letter-spacing:-2px; }.affiliate-summary dd small { display:block; margin-top:4px; color:var(--k188); font:8px var(--mono); letter-spacing:0; }.affiliate-rewards { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:14px; }.affiliate-rewards article { min-height:190px; padding:29px; }.affiliate-rewards strong { display:block; margin:18px 0 11px; font:700 55px var(--display); letter-spacing:-3px; }.affiliate-rewards p { max-width:290px; margin:0; color:var(--k188); font-size:11px; line-height:1.6; }.affiliate-levels { margin-top:14px; padding:29px; }.affiliate-level-table { margin-top:25px; border:1px solid var(--k314); border-radius:12px; overflow:hidden; }.affiliate-level-row { display:grid; grid-template-columns:.48fr .86fr .8fr 1.5fr 1fr .82fr; gap:16px; align-items:center; min-height:64px; padding:0 18px; border-top:1px solid var(--k310); color:var(--k211); font:10px var(--mono); }.affiliate-level-row:first-child { border:0; }.affiliate-level-row b,.affiliate-level-row strong { color:var(--k257); font:700 12px var(--mono); }.affiliate-level-row strong { text-align:right; }.affiliate-level-heading { min-height:42px; color:var(--k168); background:var(--k295); font-size:7px; letter-spacing:.07em; }.affiliate-level-heading span:last-child { text-align:right; }.affiliate-disclosures { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:16px; }.affiliate-disclosures p { margin:0; padding:14px; border:1px solid var(--k310); border-radius:9px; color:var(--k188); font:9px/1.6 var(--mono); }.affiliate-disclosures b { color:var(--k230); }
.market-search,.market-filters { display:none; }

@media (max-width:760px) {
  body.sheet-open { overflow:hidden; }
  .demo-bar { display:none; }
  .app-header { position:sticky; top:0; z-index:25; height:72px; padding:0 16px; border-bottom:1px solid var(--k317); background:var(--k50); box-shadow:none; }.app-header .wordmark>b { font-size:20px; letter-spacing:1px; }.app-header .mark { width:32px; height:32px; border-radius:9px; }.app-header .main-nav,.app-header .header-account { display:none!important; }.app-header>button.mobile-menu { display:grid!important; grid-template-columns:13px; align-content:center; gap:4px; width:40px; height:40px; margin-left:auto; padding:0 12px; border-radius:50%; }.app-header>button.mobile-menu span { display:none; }.app-header>button.mobile-menu i,.app-header>button.mobile-menu i+i { width:14px; margin:0; transform:none; }.app-header>button.mobile-menu[aria-expanded="true"] i { transform:translateY(2.5px) rotate(45deg); }.app-header>button.mobile-menu[aria-expanded="true"] i+i { transform:translateY(-2.5px) rotate(-45deg); }.navbar-menu-panel { top:72px; right:0; bottom:0; left:0; width:100%; max-height:none; padding:22px 16px calc(95px + env(safe-area-inset-bottom)); border:0; border-radius:0; background:var(--k26); box-shadow:none; }.navbar-menu-panel>header { position:sticky; z-index:2; top:-22px; margin:0 -16px; padding:21px 18px 17px; background:var(--k33); backdrop-filter:blur(16px); }.navbar-menu-panel>header h2 { max-width:260px; font-size:29px; }.navbar-menu-panel>header>button { display:none; }.navbar-menu-groups { grid-template-columns:1fr; gap:24px; padding:21px 0; }.navbar-menu-groups section>b { margin:0 0 7px 7px; }.navbar-menu-groups a { min-height:55px; padding:10px 9px; }.navbar-menu-groups a span { font-size:15px; }.navbar-menu-groups a i { font-size:8px; }.navbar-menu-panel>footer { align-items:start; gap:14px; padding:18px 7px; }.navbar-menu-scrim { display:none; }
  .page-wrap { width:100%; padding:20px 16px 100px; }.page-wrap::before,.page-wrap::after { display:none; }.page-intro { display:none; }.mobile-app-head { display:flex; align-items:center; justify-content:space-between; min-height:68px; padding:3px 2px 20px; }.mobile-app-head>div:first-child { display:grid; gap:5px; }.mobile-app-head span { color:var(--k179); font:9px var(--mono); letter-spacing:1px; }.mobile-app-head h1 { margin:0; color:var(--k264); font:700 28px/1 var(--display); letter-spacing:-1.5px; }.mobile-app-head>div:last-child { display:flex; gap:9px; }.mobile-icon-button { display:grid; place-items:center; width:38px; height:38px; padding:0; border:1px solid var(--k330); border-radius:50%; color:var(--k260); background:var(--k53); font:10px var(--mono); }
  .page-wrap .surface,.page-wrap .balance-card,.portfolio-command,.wallet-summary { border-color:var(--k322); border-radius:20px; box-shadow:none; backdrop-filter:none; }.dashboard-hero { display:block; margin:0; }.dashboard-hero .balance-card { min-height:238px; padding:23px; border-radius:20px; background:radial-gradient(330px 180px at 80% 0%,var(--k87),var(--k42) 67%); }.dashboard-hero .balance-card::after { display:none; }.dashboard-hero .balance-card h2 { margin:20px 0 8px; font-size:42px; }.dashboard-hero .balance-card p { font-size:10px; }.dashboard-hero .balance-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:25px; }.dashboard-hero .balance-actions a { min-width:0; padding:12px 7px; border-radius:9px; font-size:9px; text-align:center; }.dashboard-hero .balance-actions i { display:none; }.portfolio-command { display:none; }
  .shortcut-grid { grid-template-columns:repeat(4,1fr); gap:10px; margin-top:26px; }.shortcut-grid header { margin-bottom:1px; }.shortcut-grid>a { min-height:82px; gap:6px; padding:10px 4px; border-radius:14px; background:var(--k49); }.shortcut-grid i { width:31px; height:31px; border-radius:10px; font-size:17px; }.shortcut-grid span { font-size:9px; }
  .shortcut-grid i svg { width:18px; height:18px; }
  .shortcut-grid>a.mobile-only-shortcut { display:grid; }
  .two-col { display:block; margin-top:28px; }.two-col .allocation { display:none; }.market-list { min-height:0; padding:0; border:0!important; border-radius:0!important; background:transparent!important; }.market-list::before { display:none; }.market-list header { margin-bottom:9px; }.market-list header h2 { font-size:19px!important; }.market-list header>a { font-size:10px; }.market-head { display:none; }.market-row { min-height:57px; padding:0; grid-template-columns:1.35fr 1fr .62fr; border-color:var(--k310); }.market-row>strong { font-size:9px; }.market-row u { display:none; }.activity { display:none; }
  .market-screen { min-height:0; padding:0; overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; }.market-screen::before { display:none; }.market-screen header h2 { font-size:27px!important; }.market-screen .pill,.market-list-head { display:none; }.market-search { display:flex; align-items:center; gap:11px; height:52px; margin:20px 0; padding:0 16px; border:1px solid var(--k328); border-radius:14px; color:var(--k180); background:var(--k42); font-size:24px; }.market-search span { font-size:14px; }.market-filters { display:flex; gap:9px; overflow:auto; margin:0 -2px 21px; }.market-filters>* { flex:0 0 auto; padding:10px 13px; border-radius:10px; color:var(--k198); background:var(--k53); font:600 10px var(--font); }.market-filters b { color:var(--k42); background:var(--k253); }.market-screen .market-grid { display:none; }.mobile-market-list { display:grid; }.mobile-market-list>a { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:11px; min-height:75px; border-bottom:1px solid var(--k310); }.mobile-market-list i { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--k332); border-radius:50%; color:var(--k253); font:17px Georgia; font-style:normal; }.mobile-market-list span,.mobile-market-list em { display:grid; gap:5px; }.mobile-market-list b { color:var(--k253); font-size:13px; }.mobile-market-list small { color:var(--k164); font-size:9px; font-style:normal; }.mobile-market-list em { color:var(--k258); font:500 11px var(--mono); text-align:right; }.mobile-market-list em small { color:var(--k241); }.market-screen>.primary-link { width:100%; margin-top:20px; }
  .trade-layout { display:block; margin:0; }.trade-chart { min-height:0; padding:0; overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; }.trade-chart::after { display:none; }.trade-chart header { align-items:end; }.trade-chart header strong { font-size:28px; }.trade-chart h2 { font-size:24px!important; }.chart { height:290px; margin:21px 0 25px; padding-left:25px; }.demo-order { min-height:0; margin-top:14px; padding:20px; border-radius:18px; }.demo-order::before { display:none; }.demo-order label strong { padding:13px; }.demo-order .primary-link { min-height:46px; }
  .convert-shell { display:block; min-height:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }.convert-card { width:100%; padding:20px; border:1px solid var(--k324); border-radius:20px; }.convert-note { display:none; }.earn-lead { min-height:0; margin:0; padding:0 0 23px; border:0; border-radius:0; background:transparent; box-shadow:none; }.earn-lead h2,.prediction-head h2 { font-size:35px; }.earn-orbit { width:110px; }.earn-grid { grid-template-columns:1fr; gap:10px; margin-top:10px; }.earn-grid article { min-height:150px; padding:20px; }.earn-grid h3 { margin:12px 0 5px; }.earn-grid strong { font-size:32px; }.prediction-head { padding:0 0 22px; }.prediction-grid { grid-template-columns:1fr; gap:10px; }.prediction-grid article { min-height:185px; padding:20px; border-radius:18px!important; }.prediction-grid h3 { min-height:0; margin:14px 0 20px; }
  .mobile-wallet-person { display:flex; align-items:center; gap:11px; margin:-3px 2px 18px; }.mobile-wallet-person>i { display:grid; place-items:center; width:47px; height:47px; border:1px solid var(--k335); border-radius:50%; color:var(--k42); background:var(--k252); font:700 12px var(--mono); font-style:normal; }.mobile-wallet-person div { display:grid; gap:5px; }.mobile-wallet-person b { font-size:15px; }.mobile-wallet-person small { color:var(--k168); font-size:9px; }.mobile-wallet-person button { margin-left:auto; border:0; color:var(--k198); background:transparent; font-size:19px; }.wallet-hero { display:block; margin:0; }.wallet-hero .balance-card { min-height:207px; padding:21px; border-radius:20px; }.wallet-hero .balance-card::after { display:none; }.wallet-hero .balance-card h2 { margin:19px 0 7px; font-size:37px; }.wallet-hero .balance-actions { display:none; }.wallet-summary { display:none; }.wallet-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:20px; }.wallet-actions>a { display:grid; justify-items:center; grid-template-columns:1fr; gap:7px; min-height:80px; padding:10px 3px; border-radius:13px; background:var(--k49); }.wallet-actions>a i { width:28px; height:28px; font-size:18px; }.wallet-actions>a span { text-align:center; }.wallet-actions>a small,.wallet-actions>a em { display:none; }.wallet-actions>a b { font-size:9px; }.wallet-flow { margin-top:16px; padding:18px; }.asset-table { margin-top:25px; padding:0; overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; }.asset-table header { margin-bottom:8px; }.asset-table header h2 { font-size:19px!important; }.table-label { display:none; }.table-row { grid-template-columns:41px 1fr auto!important; gap:10px; min-height:71px; padding:0 1px; border-color:var(--k310); }.table-row>span { grid-column:1/3; gap:9px; }.table-row>strong:nth-child(2) { display:none; }.table-row>strong:nth-child(3) { grid-column:3; grid-row:1; color:var(--k253); font-size:10px; }.table-row>strong:nth-child(4) { grid-column:3; grid-row:2; color:var(--k177); font-size:9px; }.table-row i { width:34px; height:34px; }
  .utility-layout,.vip-grid,.journal-list,.profile-layout { grid-template-columns:1fr; gap:11px; }.utility-hero,.utility-side,.vip-lead,.security-screen { padding:24px; }.utility-hero h2,.vip-lead h2,.security-screen h2 { font-size:35px; letter-spacing:-2px; }.utility-hero p,.vip-lead p,.security-screen>p { font-size:11px; }.utility-side { min-height:180px; }.card-preview { min-height:232px; padding:25px; border-radius:19px; }.card-preview>b { margin-top:47px; }.card-preview>i { font-size:20px; }.vip-grid>article:not(.vip-lead) { min-height:155px; }.journal-list article { min-height:190px; padding:22px; }.journal-list h2 { margin:16px 0 9px; font-size:20px; }.profile-card { min-height:140px; padding:21px; }.profile-card>b { display:none; }.settings-list { padding:2px 20px; }.settings-list a { min-height:57px; font-size:12px; }.security-screen>div { grid-template-columns:1fr auto 15px; min-height:65px; gap:8px; }.security-screen>div span { font-size:8px; }.empty-key { margin:24px 0 16px; padding:28px 12px; }
  .mobile-bottom-nav { position:fixed; z-index:30; right:0; bottom:0; left:0; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; min-height:73px; padding:8px 6px calc(8px + env(safe-area-inset-bottom)); border-top:1px solid var(--k317); background:var(--k52); backdrop-filter:blur(18px); }.mobile-bottom-nav a { display:grid; place-items:center; align-content:center; gap:4px; color:var(--k181); font:600 10px var(--font); }.mobile-bottom-nav i { height:25px; color:var(--k192); font:25px/1 var(--display); font-style:normal; }.mobile-bottom-nav a.active,.mobile-bottom-nav a.active i { color:var(--k267); }.mobile-bottom-nav a.active span { font-weight:800; }
  .mobile-sheet-scrim { position:fixed; z-index:40; inset:0; display:block; background:var(--k7); backdrop-filter:blur(7px); }.mobile-sheet { position:fixed; z-index:41; right:0; bottom:0; left:0; display:block; max-height:82vh; padding:12px 18px calc(27px + env(safe-area-inset-bottom)); overflow:auto; border:1px solid var(--k324); border-bottom:0; border-radius:24px 24px 0 0; color:var(--k253); background:linear-gradient(145deg,var(--k64),var(--k36)); box-shadow:0 -24px 70px var(--k6); }.mobile-sheet[hidden],.mobile-sheet-scrim[hidden] { display:none; }.sheet-handle { display:block; width:44px; height:5px; margin:0 auto 18px; border-radius:50%; background:var(--k138); }.mobile-sheet header { display:flex; align-items:center; justify-content:space-between; }.mobile-sheet header b { font:700 24px var(--display); letter-spacing:-1px; }.mobile-sheet header button { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--k325); border-radius:50%; color:var(--k214); background:transparent; font-size:26px; }.mobile-sheet>p { margin:10px 0; color:var(--k188); font:12px var(--mono); }.sheet-status { display:inline-block; padding:7px 9px; border:1px solid var(--k322); border-radius:6px; color:var(--k231); font:8px var(--mono); }.mobile-sheet nav { display:grid; margin-top:18px; border-top:1px solid var(--k313); }.mobile-sheet nav>a { display:flex; align-items:center; justify-content:space-between; min-height:51px; border-bottom:1px solid var(--k310); color:var(--k253); font-size:13px; }.mobile-sheet nav>a i { font-style:normal; }.sheet-logout { display:block; margin-top:18px; color:var(--k285); font-weight:700; }.sheet-option { display:grid; grid-template-columns:49px 1fr auto; align-items:center; gap:13px; min-height:96px; margin-top:15px; padding:13px; border:1px solid var(--k326); border-radius:15px; background:var(--k76); }.sheet-option>i { display:grid; place-items:center; width:45px; height:45px; border-radius:50%; background:var(--k103); font-size:23px; font-style:normal; }.sheet-option span { display:grid; gap:5px; }.sheet-option b { font-size:14px; }.sheet-option small { color:var(--k185); font-size:10px; line-height:1.35; }.sheet-option em,.asset-picker em { color:var(--k198); font-size:22px; font-style:normal; }.sheet-search { display:flex; align-items:center; gap:11px; height:54px; margin:20px 0 6px; padding:0 14px; border-radius:13px; color:var(--k187); background:var(--k80); font-size:24px; }.sheet-search span { font-size:13px; }.asset-picker { margin-top:0!important; border-top:0!important; }.asset-picker>a { display:grid!important; grid-template-columns:43px 1fr auto; gap:11px; min-height:68px!important; }.asset-picker i { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--k334); border-radius:50%; color:var(--k253); font:16px Georgia; font-style:normal; }.asset-picker span { display:grid; gap:4px; }.asset-picker small { color:var(--k168); font-size:9px; }
}

/* Language control — one quiet, reusable instrument for every OFFCODE navbar. */
.language-selector {
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  gap:6px;
  height:34px;
  padding:0 21px 0 8px;
  overflow:hidden;
  border:1px solid var(--k330);
  border-radius:9px;
  color:var(--k232);
  background:linear-gradient(145deg,var(--k57),var(--k26));
  transition:border-color .2s,background .2s,color .2s;
}
.language-selector:hover,
.language-selector:focus-within {
  border-color:var(--k352);
  color:var(--k288);
  background:var(--k63);
}
.language-selector svg {
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.language-selector select {
  position:relative;
  z-index:1;
  min-width:34px;
  padding:0;
  border:0;
  outline:0;
  appearance:none;
  color:inherit;
  background:transparent;
  font:700 7px var(--mono);
  letter-spacing:.45px;
  cursor:pointer;
}
.language-selector option {
  color:var(--k253);
  background:var(--k42);
}
.language-selector::after {
  content:"";
  position:absolute;
  right:8px;
  top:50%;
  width:5px;
  height:5px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  opacity:.7;
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}
.language-selector--mobile { display:none; }
.public-header .language-selector { height:34px; }

@media (max-width:760px) {
  .app-header .language-selector--mobile {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    margin-left:auto;
    padding:0;
    border-radius:50%;
    background:var(--k53);
  }
  .app-header .language-selector--mobile svg,
  .public-header .language-selector--public svg {
    display:block;
    width:14px;
    height:14px;
  }
  .app-header .language-selector--mobile select {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    min-width:0;
    opacity:0;
  }
  .app-header .language-selector--mobile::after { display:none; }
  .app-header>button.mobile-menu { margin-left:7px; }
  .public-header .language-selector--public {
    width:34px;
    height:34px;
    padding:0;
    justify-content:center;
    border-radius:50%;
  }
  .public-header .language-selector--public select {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    min-width:0;
    opacity:0;
  }
  .public-header .language-selector--public::after { display:none; }
}

/* Wallet quick actions: four independent circular controls. */
.page-wrap .wallet-actions {
  display:grid;
  grid-template-columns:repeat(4,minmax(92px,1fr));
  justify-content:center;
  gap:clamp(24px,4vw,58px);
  width:min(100%,760px);
  margin:34px auto 27px;
}
.page-wrap .wallet-actions>a,
.page-wrap .wallet-actions>a:hover,
.page-wrap .wallet-actions>a.active {
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
  align-content:start;
  gap:12px;
  min-width:0;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:none;
}
.page-wrap .wallet-actions>a i {
  position:relative;
  display:grid;
  place-items:center;
  width:88px;
  height:88px;
  border:1px solid var(--k256);
  border-radius:50%;
  color:var(--k263);
  background:radial-gradient(circle at 38% 29%,var(--k91) 0,var(--k57) 44%,var(--k26) 78%);
  box-shadow:
    inset 0 0 0 5px var(--k19),
    inset 0 0 0 6px var(--k324),
    0 14px 30px var(--k5);
  font:400 30px/1 var(--display);
  font-style:normal;
  transition:transform .22s ease,border-color .22s ease,color .22s ease,background .22s ease;
}
.page-wrap .wallet-actions>a span {
  display:block;
  text-align:center;
}
.page-wrap .wallet-actions>a b {
  display:block;
  color:var(--k260);
  font:650 12px/1.15 var(--font);
  letter-spacing:-.15px;
}
.page-wrap .wallet-actions>a small,
.page-wrap .wallet-actions>a em {
  display:none;
}
.page-wrap .wallet-actions>a:hover i,
.page-wrap .wallet-actions>a:focus-visible i {
  color:var(--k37);
  border-color:var(--k271);
  background:var(--k257);
  box-shadow:
    inset 0 0 0 5px var(--k247),
    inset 0 0 0 6px var(--k48),
    0 18px 34px var(--k7);
  transform:translateY(-4px);
}
.page-wrap .wallet-actions>a:focus-visible {
  outline:2px solid var(--k260);
  outline-offset:8px;
  border-radius:4px;
}

@media (max-width:760px) {
  .page-wrap .wallet-actions {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    width:100%;
    margin:22px auto 26px;
  }
  .page-wrap .wallet-actions>a,
  .page-wrap .wallet-actions>a:hover,
  .page-wrap .wallet-actions>a.active {
    gap:8px;
    min-height:76px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
  }
  .page-wrap .wallet-actions>a i {
    width:54px;
    height:54px;
    font-size:22px;
    box-shadow:
      inset 0 0 0 4px var(--k19),
      inset 0 0 0 5px var(--k324),
      0 10px 23px var(--k4);
  }
  .page-wrap .wallet-actions>a b {
    font-size:9px;
  }
}

/* Dashboard summary: compact cards and wallet-style circular quick actions. */
body[data-page="dashboard"] .dashboard-hero {
  align-items:stretch;
}
body[data-page="dashboard"] .dashboard-hero .balance-card,
body[data-page="dashboard"] .portfolio-command {
  min-height:258px;
}
body[data-page="dashboard"] .dashboard-hero .balance-card {
  padding:24px 28px;
}
body[data-page="dashboard"] .dashboard-hero .balance-card::after {
  width:410px;
  height:410px;
  right:-95px;
  bottom:-292px;
}
body[data-page="dashboard"] .dashboard-hero .balance-card h2 {
  margin-top:20px;
  font-size:clamp(44px,4.2vw,58px);
  letter-spacing:-3.4px;
}
body[data-page="dashboard"] .portfolio-command {
  padding:23px 26px;
}
body[data-page="dashboard"] .portfolio-rows {
  gap:10px;
  margin-top:20px;
}
body[data-page="dashboard"] .portfolio-rows p {
  padding-bottom:9px;
}
body:is([data-page="dashboard"],[data-page="wallet"]) .balance-actions--round {
  display:flex;
  width:max-content;
  gap:24px;
  margin-top:18px;
}
body:is([data-page="dashboard"],[data-page="wallet"]) .balance-actions--round a,
body:is([data-page="dashboard"],[data-page="wallet"]) .balance-actions--round a:hover {
  display:grid;
  justify-items:center;
  gap:8px;
  min-width:68px;
  padding:0;
  border:0;
  border-radius:0;
  color:var(--k251);
  background:transparent;
  box-shadow:none;
}
body:is([data-page="dashboard"],[data-page="wallet"]) .balance-actions--round i {
  display:grid;
  float:none;
  place-items:center;
  width:62px;
  height:62px;
  border:1px solid var(--k256);
  border-radius:50%;
  color:var(--k263);
  background:radial-gradient(circle at 38% 29%,var(--k91) 0,var(--k57) 44%,var(--k26) 78%);
  box-shadow:
    inset 0 0 0 4px var(--k19),
    inset 0 0 0 5px var(--k324),
    0 12px 26px var(--k5);
  font:400 22px/1 var(--display);
  transition:transform .22s ease,border-color .22s ease,color .22s ease,background .22s ease;
}
body:is([data-page="dashboard"],[data-page="wallet"]) .balance-actions--round span {
  color:var(--k260);
  font:650 10px/1.15 var(--font);
}
body:is([data-page="dashboard"],[data-page="wallet"]) .balance-actions--round a:hover i,
body:is([data-page="dashboard"],[data-page="wallet"]) .balance-actions--round a:focus-visible i {
  color:var(--k37);
  border-color:var(--k271);
  background:var(--k257);
  box-shadow:
    inset 0 0 0 4px var(--k247),
    inset 0 0 0 5px var(--k48),
    0 16px 30px var(--k7);
  transform:translateY(-4px);
}
body:is([data-page="dashboard"],[data-page="wallet"]) .balance-actions--round a:focus-visible {
  outline:2px solid var(--k260);
  outline-offset:7px;
  border-radius:4px;
}

@media (max-width:760px) {
  body[data-page="dashboard"] .dashboard-hero .balance-card {
    min-height:246px;
    padding:21px 22px;
  }
  body[data-page="dashboard"] .dashboard-hero .balance-card h2 {
    margin-top:18px;
    font-size:42px;
  }
  body:is([data-page="dashboard"],[data-page="wallet"]) .balance-actions--round {
    gap:20px;
    margin-top:17px;
  }
  body:is([data-page="dashboard"],[data-page="wallet"]) .balance-actions--round a,
  body:is([data-page="dashboard"],[data-page="wallet"]) .balance-actions--round a:hover {
    display:grid;
    min-width:57px;
    padding:0;
  }
  body:is([data-page="dashboard"],[data-page="wallet"]) .balance-actions--round i {
    display:grid;
    width:52px;
    height:52px;
    font-size:20px;
  }
  body:is([data-page="dashboard"],[data-page="wallet"]) .balance-actions--round span {
    font-size:9px;
  }
}

/* Trade terminal: OFFCODE's current flow, rebuilt as a denser professional workspace. */
body[data-page="trade"] {
  background:var(--k12);
}
body[data-page="trade"] .page-wrap {
  width:min(1500px,calc(100% - 28px));
  padding-top:14px;
}
body[data-page="trade"] .page-intro,
body[data-page="trade"] .mobile-app-head {
  display:none;
}
.trade-marketbar {
  display:grid;
  grid-template-columns:minmax(250px,1.05fr) minmax(150px,.55fr) minmax(190px,.75fr) minmax(420px,1.6fr);
  align-items:center;
  min-height:104px;
  border:1px solid var(--k322);
  border-radius:12px 12px 5px 5px;
  background:var(--k17);
}
.trade-marketbar>div,
.trade-marketbar>dl {
  min-width:0;
  padding:18px 22px;
}
.trade-marketbar>div+div,
.trade-marketbar>dl {
  border-left:1px solid var(--k314);
}
.trade-pair {
  display:flex;
  align-items:center;
  gap:11px;
}
.trade-pair>i {
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:45px;
  height:45px;
  border-radius:50%;
  color:var(--k22);
  background:var(--k260);
  font:28px Georgia,serif;
  font-style:normal;
}
.trade-pair>span {
  display:grid;
  gap:4px;
}
.trade-pair b {
  color:var(--k265);
  font:700 18px var(--display);
  letter-spacing:-.6px;
}
.trade-pair small {
  color:var(--k159);
  font:8px var(--mono);
}
.trade-pair em,
.trade-pair u {
  padding:7px 8px;
  border:1px solid var(--k324);
  border-radius:5px;
  color:var(--k222);
  font:8px var(--mono);
  font-style:normal;
  text-decoration:none;
}
.trade-pair em {
  margin-left:auto;
}
.trade-segment {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3px;
  padding:3px!important;
  border:1px solid var(--k321);
  border-radius:7px;
  background:var(--k49);
}
.trade-segment button,
.trade-timeframes button,
.trade-presets button,
.trade-positions button {
  border:0;
  color:var(--k164);
  background:transparent;
  font:600 9px var(--font);
  cursor:pointer;
}
.trade-segment button {
  min-height:34px;
  border-radius:4px;
}
.trade-segment button.active {
  color:var(--k37);
  background:var(--k257);
}
.trade-quote {
  display:grid;
  gap:7px;
}
.trade-quote strong {
  color:var(--k269);
  font:700 clamp(24px,2.3vw,35px)/1 var(--display);
  letter-spacing:-1.8px;
  white-space:nowrap;
}
.trade-quote span {
  color:var(--k225);
  font:9px var(--mono);
}
.trade-stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:19px;
  margin:0;
}
.trade-stats div {
  display:grid;
  gap:7px;
}
.trade-stats dt {
  color:var(--k157);
  font:7px var(--mono);
  letter-spacing:.6px;
}
.trade-stats dd {
  margin:0;
  color:var(--k243);
  font:9px var(--mono);
  white-space:nowrap;
}
.trade-pro {
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(215px,.58fr) minmax(290px,.76fr);
  gap:6px;
  margin-top:6px;
}
.trade-workspace,
.trade-orderbook,
.trade-ticket,
.trade-positions {
  border:1px solid var(--k322);
  background:var(--k17);
}
.trade-workspace {
  min-width:0;
  overflow:hidden;
}
.trade-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  min-height:54px;
  padding:8px 13px;
  border-bottom:1px solid var(--k313);
}
.trade-timeframes {
  display:flex;
  align-items:center;
  gap:3px;
}
.trade-timeframes button {
  min-width:36px;
  padding:9px 8px;
  border-radius:5px;
  font-family:var(--mono);
}
.trade-timeframes button.active {
  color:var(--k42);
  background:var(--k254);
}
.trade-view-toggle {
  width:146px;
}
.trade-chart-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:42px;
  padding:9px 17px;
  color:var(--k190);
  font:7px var(--mono);
}
.trade-chart-meta b {
  color:var(--k216);
  font-weight:500;
  white-space:nowrap;
}
.pro-chart {
  position:relative;
  height:472px;
  padding:0 12px 28px;
}
.pro-chart>svg {
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}
.pro-grid {
  fill:none;
  stroke:var(--k308);
  stroke-width:1;
}
.candle path {
  stroke-width:1.5;
}
.candle rect {
  stroke-width:1;
}
.candle.up path,
.candle.up rect {
  stroke:var(--k261);
  fill:var(--k247);
}
.candle.down path {
  stroke:var(--k193);
}
.candle.down rect {
  fill:var(--k104);
  stroke:var(--k207);
}
.current-price-line {
  fill:none;
  stroke:var(--k254);
  stroke-width:1;
  stroke-dasharray:4 5;
  opacity:.82;
}
.current-price-label {
  fill:var(--k37);
  stroke:var(--k255);
  stroke-width:10;
  paint-order:stroke;
  font:10px var(--mono);
}
.volume-bars {
  fill:var(--k159);
  opacity:.72;
}
.chart-axis {
  position:absolute;
  right:20px;
  bottom:9px;
  left:20px;
  display:flex;
  justify-content:space-between;
  color:var(--k153);
  font:7px var(--mono);
}
.trade-depth-panel {
  display:grid;
  align-content:center;
  gap:12px;
  min-height:472px;
  padding:30px 8%;
}
.trade-depth-panel[hidden] {
  display:none;
}
.trade-depth-panel>div {
  display:grid;
  grid-template-columns:90px 1fr 100px;
  align-items:center;
  gap:12px;
  color:var(--k214);
  font:9px var(--mono);
}
.trade-depth-panel>div i {
  display:block;
  height:10px;
  background:linear-gradient(90deg,var(--k102) var(--depth),transparent 0);
}
.trade-depth-panel>div b {
  font-weight:500;
  text-align:right;
}
.trade-depth-panel>strong {
  display:grid;
  justify-items:center;
  gap:5px;
  padding:18px;
  border-block:1px solid var(--k316);
  font:700 27px var(--display);
}
.trade-depth-panel>strong small {
  color:var(--k158);
  font:7px var(--mono);
}
.trade-orderbook {
  display:flex;
  min-width:0;
  flex-direction:column;
  overflow:hidden;
}
.trade-orderbook>header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:54px;
  padding:0 14px;
  border-bottom:1px solid var(--k313);
}
.trade-orderbook>header b {
  font-size:11px;
}
.trade-orderbook>header span {
  color:var(--k189);
  font:8px var(--mono);
}
.book-head,
.book-rows p {
  display:grid;
  grid-template-columns:1fr .7fr .8fr;
  align-items:center;
  gap:6px;
}
.book-head {
  padding:12px 13px 7px;
  color:var(--k145);
  font:6px var(--mono);
}
.book-head span:not(:first-child),
.book-rows p>*:not(:first-child) {
  text-align:right;
}
.book-rows {
  display:grid;
}
.book-rows p {
  position:relative;
  min-height:24px;
  margin:0;
  padding:0 13px;
  color:var(--k212);
  font:7px var(--mono);
}
.book-rows p::before {
  content:"";
  position:absolute;
  z-index:0;
  top:2px;
  right:0;
  bottom:2px;
  width:var(--book);
  background:linear-gradient(90deg,transparent,var(--k306));
}
.book-rows p>* {
  position:relative;
  z-index:1;
}
.book-rows p b,
.book-rows p em {
  color:var(--k238);
  font-weight:500;
  font-style:normal;
}
.book-mid {
  display:grid;
  justify-items:center;
  gap:4px;
  margin:9px 0;
  padding:10px;
  border-block:1px solid var(--k312);
}
.book-mid strong {
  font:700 20px var(--display);
}
.book-mid small {
  color:var(--k158);
  font:6px var(--mono);
}
.trade-orderbook>footer {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding:12px 13px;
  border-top:1px solid var(--k313);
  color:var(--k198);
  font:7px var(--mono);
}
.trade-orderbook>footer i {
  height:4px;
  background:linear-gradient(90deg,var(--k260) 53%,var(--k119) 0);
}
.trade-ticket {
  display:grid;
  align-content:start;
  gap:12px;
  min-width:0;
  padding:13px;
}
.trade-side-tabs {
  margin:-13px -13px 0;
  border:0;
  border-bottom:1px solid var(--k314);
  border-radius:0;
  background:transparent;
}
.trade-side-tabs button {
  min-height:47px;
  border-bottom:2px solid transparent;
  border-radius:0;
  color:var(--k168);
  background:transparent!important;
}
.trade-side-tabs button.active {
  color:var(--k261);
  border-bottom-color:var(--k261);
}
.trade-leverage {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--k164);
  font-size:9px;
}
.trade-leverage-control {
  position:relative;
  z-index:12;
}
.trade-leverage-trigger {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-width:91px;
  min-height:34px;
  padding:0 11px;
  border:1px solid var(--k321);
  border-radius:5px;
  color:var(--k253);
  background:var(--k37);
  font:9px var(--mono);
  cursor:pointer;
  transition:border-color .18s,background .18s;
}
.trade-leverage-trigger:hover,
.trade-leverage-trigger[aria-expanded="true"] {
  border-color:var(--k350);
  background:var(--k63);
}
.trade-leverage-trigger b {
  font:700 9px var(--mono);
}
.trade-leverage-trigger i {
  color:var(--k176);
  font-style:normal;
  transition:transform .18s;
}
.trade-leverage-trigger[aria-expanded="true"] i {
  transform:rotate(180deg);
}
.trade-leverage-menu {
  position:absolute;
  top:calc(100% + 7px);
  right:0;
  display:grid;
  width:250px;
  gap:13px;
  padding:15px;
  border:1px solid var(--k332);
  border-radius:12px;
  background:linear-gradient(145deg,var(--k71),var(--k25));
  box-shadow:0 22px 55px var(--k8);
}
.trade-leverage-menu[hidden] {
  display:none;
}
.trade-leverage-menu>header {
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.trade-leverage-menu>header span {
  color:var(--k160);
  font:7px var(--mono);
  letter-spacing:.08em;
}
.trade-leverage-menu>header output {
  color:var(--k257);
  font:700 18px var(--mono);
}
.trade-leverage-range {
  display:grid;
  gap:9px;
}
.trade-leverage-range input {
  --leverage-fill:48.72%;
  width:100%;
  height:4px;
  margin:6px 0;
  appearance:none;
  border-radius:999px;
  outline:0;
  background:linear-gradient(90deg,var(--k255) var(--leverage-fill),var(--k113) 0);
  cursor:pointer;
}
.trade-leverage-range input::-webkit-slider-thumb {
  width:17px;
  height:17px;
  appearance:none;
  border:3px solid var(--k42);
  border-radius:50%;
  background:var(--k255);
  box-shadow:0 0 0 1px var(--k348),0 4px 13px var(--k7);
}
.trade-leverage-range input::-moz-range-thumb {
  width:12px;
  height:12px;
  border:3px solid var(--k42);
  border-radius:50%;
  background:var(--k255);
  box-shadow:0 0 0 1px var(--k348),0 4px 13px var(--k7);
}
.trade-leverage-range>span {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--k140);
}
.trade-leverage-range>span b {
  font:6px var(--mono);
}
.trade-leverage-presets {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}
.trade-leverage-menu button {
  min-width:0;
  min-height:35px;
  padding:0;
  border:1px solid var(--k320);
  border-radius:7px;
  color:var(--k200);
  background:var(--k42);
  font:8px var(--mono);
  cursor:pointer;
}
.trade-leverage-menu button:hover {
  color:var(--k253);
  border-color:var(--k348);
}
.trade-leverage-menu button.active {
  color:var(--k42);
  border-color:var(--k255);
  background:var(--k255);
}
.trade-leverage-menu>small {
  color:var(--k145);
  font:6px/1.5 var(--mono);
}
.trade-order-type {
  width:100%;
}
.trade-field {
  display:grid;
  gap:7px;
  color:var(--k159);
  font:8px var(--mono);
}
.trade-field>strong {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:48px;
  padding:0 12px;
  border:1px solid var(--k321);
  border-radius:6px;
  color:var(--k250);
  background:var(--k42);
  font:500 11px var(--mono);
}
.trade-field>strong small {
  color:var(--k158);
  font-size:7px;
}
.trade-slider {
  display:grid;
  gap:8px;
}
.trade-slider>span {
  display:flex;
  justify-content:space-between;
  color:var(--k178);
  font:8px var(--mono);
}
.trade-slider input {
  width:100%;
  accent-color:var(--k263);
}
.trade-presets {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px;
}
.trade-presets button {
  min-height:27px;
  border:1px solid var(--k314);
  border-radius:4px;
  font:7px var(--mono);
}
.trade-presets button.active {
  color:var(--k42);
  background:var(--k253);
}
.trade-order-summary {
  display:grid;
  gap:8px;
  margin:2px 0;
}
.trade-order-summary div {
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:var(--k158);
  font:7px var(--mono);
}
.trade-order-summary dd {
  margin:0;
  color:var(--k223);
}
.trade-submit {
  min-height:49px;
  border:0;
  border-radius:5px;
  color:var(--k37);
  background:var(--k260);
  font:800 11px var(--font);
  cursor:pointer;
  transition:transform .2s,background .2s;
}
.trade-submit:hover {
  background:var(--k229);
  transform:translateY(-2px);
}
.trade-submit.confirmed {
  color:var(--k253);
  background:var(--k87);
}
.trade-ticket>p {
  margin:0;
  color:var(--k143);
  font:7px/1.45 var(--mono);
  text-align:center;
}
.trade-positions {
  margin-top:6px;
  overflow:hidden;
  border-radius:5px 5px 12px 12px;
}
.trade-positions>header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:54px;
  padding:0 16px;
  border-bottom:1px solid var(--k313);
}
.trade-positions nav {
  display:flex;
  align-self:stretch;
  gap:25px;
}
.trade-positions nav button {
  position:relative;
  padding:0;
}
.trade-positions nav button.active {
  color:var(--k261);
}
.trade-positions nav button.active::after {
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:2px;
  background:var(--k253);
}
.trade-positions>header>span {
  color:var(--k158);
  font:7px var(--mono);
}
.positions-head,
.positions-row {
  display:grid;
  grid-template-columns:1.2fr .7fr .8fr repeat(3,1fr) 1.15fr .7fr;
  align-items:center;
  gap:12px;
  min-width:920px;
  padding:0 17px;
}
.positions-head {
  min-height:39px;
  color:var(--k145);
  font:6px var(--mono);
}
.positions-row {
  min-height:65px;
  border-top:1px solid var(--k308);
  color:var(--k207);
  font:8px var(--mono);
}
.positions-row b,
.positions-row strong {
  color:var(--k254);
}
.positions-row strong {
  font-weight:500;
}

/* Market direction is the only color language outside the monochrome brand UI. */
.market-up {
  color:var(--market-up)!important;
}
.market-down {
  color:var(--market-down)!important;
}
.balance-card p b.market-up {
  color:var(--market-up)!important;
  background:var(--market-up-soft);
}
.market-ticker p em.market-up,
.market-grid em.market-up {
  color:var(--market-up);
}
.market-grid em.market-down {
  color:var(--market-down);
}
.market-row em {
  color:var(--market-up);
  background:var(--market-up-soft);
}
.market-row em.flat {
  color:var(--market-down);
  background:var(--market-down-soft);
}
.mobile-market-list em.market-up,
.mobile-market-list em.market-up small {
  color:var(--market-up);
}
.mobile-market-list em.market-down,
.mobile-market-list em.market-down small {
  color:var(--market-down);
}
.trade-quote.market-up strong,
.trade-quote.market-up span {
  color:var(--market-up);
}
.candle.up path,
.candle.up rect {
  stroke:var(--market-up);
  fill:var(--market-up);
}
.candle.down path {
  stroke:var(--market-down);
}
.candle.down rect {
  fill:var(--market-down-soft);
  stroke:var(--market-down);
}
.current-price-line {
  stroke:var(--market-up);
}
.current-price-label {
  fill:var(--k11);
  stroke:var(--market-up);
}
.trade-depth-panel>div.ask span,
.trade-depth-panel>div.ask b {
  color:var(--market-down);
}
.trade-depth-panel>div.ask i {
  background:linear-gradient(90deg,var(--market-down-soft) var(--depth),transparent 0);
}
.trade-depth-panel>div.bid span,
.trade-depth-panel>div.bid b {
  color:var(--market-up);
}
.trade-depth-panel>div.bid i {
  background:linear-gradient(90deg,var(--market-up-soft) var(--depth),transparent 0);
}
.book-rows.asks p b {
  color:var(--market-down);
}
.book-rows.asks p::before {
  background:linear-gradient(90deg,transparent,var(--market-down-soft));
}
.book-rows.bids p b,
.book-mid strong,
.trade-orderbook>footer b {
  color:var(--market-up);
}
.book-rows.bids p::before {
  background:linear-gradient(90deg,transparent,var(--market-up-soft));
}
.trade-orderbook>footer span {
  color:var(--market-down);
}
.trade-orderbook>footer i {
  background:linear-gradient(90deg,var(--market-up) 53%,var(--market-down) 0);
}
.trade-side-tabs button[data-side="long"].active {
  color:var(--market-up);
  border-bottom-color:var(--market-up);
}
.trade-side-tabs button[data-side="short"].active {
  color:var(--market-down);
  border-bottom-color:var(--market-down);
}
.trade-ticket[data-trade-side="long"] .trade-slider input {
  accent-color:var(--market-up);
}
.trade-ticket[data-trade-side="short"] .trade-slider input {
  accent-color:var(--market-down);
}
.trade-ticket[data-trade-side="long"] .trade-submit {
  color:var(--k11);
  background:var(--market-up);
}
.trade-ticket[data-trade-side="short"] .trade-submit {
  color:var(--k56);
  background:var(--market-down);
}
.trade-ticket[data-trade-side="long"] .trade-submit:hover,
.trade-ticket[data-trade-side="short"] .trade-submit:hover {
  filter:brightness(.9);
}
.trade-ticket .trade-submit.confirmed {
  color:var(--k253);
  background:var(--k87);
  filter:none;
}

@media (max-width:1180px) and (min-width:761px) {
  .trade-marketbar {
    grid-template-columns:minmax(220px,1fr) 132px 170px minmax(330px,1.45fr);
  }
  .trade-marketbar>div,
  .trade-marketbar>dl {
    padding-inline:14px;
  }
  .trade-pro {
    grid-template-columns:minmax(0,1.55fr) minmax(190px,.53fr) minmax(270px,.74fr);
  }
  .trade-chart-meta b {
    display:none;
  }
  .book-rows p {
    padding-inline:9px;
  }
}

@media (max-width:760px) {
  body[data-page="trade"] .page-wrap {
    width:100%;
    padding:0 0 95px;
  }
  body[data-page="trade"] .app-header {
    border-bottom-color:var(--k322);
  }
  .trade-marketbar {
    grid-template-columns:1fr 132px;
    min-height:0;
    border-width:0 0 1px;
    border-radius:0;
  }
  .trade-marketbar>div,
  .trade-marketbar>dl {
    padding:14px 16px;
  }
  .trade-marketbar>div+div {
    border-left:0;
  }
  .trade-pair {
    min-height:57px;
    padding-right:4px!important;
  }
  .trade-pair>i {
    width:39px;
    height:39px;
    font-size:23px;
  }
  .trade-pair b {
    font-size:16px;
  }
  .trade-pair small {
    display:none;
  }
  .trade-pair em,
  .trade-pair u {
    padding:6px;
    font-size:7px;
  }
  .trade-product {
    align-self:center;
    margin-right:14px;
  }
  .trade-quote {
    justify-content:start;
    min-height:111px;
    border-top:1px solid var(--k314);
  }
  .trade-quote strong {
    font-size:37px;
    letter-spacing:-2.7px;
  }
  .trade-stats {
    grid-template-columns:1fr 1fr;
    gap:0;
    padding:0!important;
    border-top:1px solid var(--k314);
    border-left:1px solid var(--k314);
  }
  .trade-stats div {
    min-height:55px;
    align-content:center;
    gap:5px;
    padding:8px 10px;
  }
  .trade-stats div:nth-child(odd) {
    border-right:1px solid var(--k310);
  }
  .trade-stats div:nth-child(-n+2) {
    border-bottom:1px solid var(--k310);
  }
  .trade-stats dt {
    font-size:6px;
  }
  .trade-stats dd {
    font-size:7px;
  }
  .trade-pro {
    display:block;
    margin:0;
  }
  .trade-workspace {
    border-width:0 0 1px;
  }
  .trade-toolbar {
    min-height:59px;
    padding-inline:10px;
  }
  .trade-timeframes {
    flex:1;
    justify-content:space-between;
    gap:0;
  }
  .trade-timeframes button {
    min-width:0;
    padding-inline:8px;
    font-size:8px;
  }
  .trade-view-toggle {
    width:112px;
  }
  .trade-view-toggle button {
    min-height:32px;
    font-size:8px;
  }
  .trade-chart-meta {
    display:block;
    min-height:36px;
    padding:10px 16px 4px;
  }
  .trade-chart-meta b {
    display:none;
  }
  .pro-chart {
    height:410px;
    padding:0 8px 30px;
  }
  .chart-axis {
    right:13px;
    left:13px;
    font-size:6px;
  }
  .chart-axis span:nth-child(even) {
    display:none;
  }
  .trade-depth-panel {
    min-height:410px;
    padding-inline:16px;
  }
  .trade-depth-panel>div {
    grid-template-columns:67px 1fr 72px;
    gap:7px;
    font-size:7px;
  }
  .trade-orderbook {
    display:none;
  }
  .trade-ticket {
    gap:14px;
    padding:17px 16px 22px;
    border-width:0 0 1px;
  }
  .trade-side-tabs {
    margin:-17px -16px 0;
  }
  .trade-side-tabs button {
    min-height:58px;
    font-size:11px;
  }
  .trade-leverage {
    font-size:9px;
  }
  .trade-order-type {
    width:180px;
  }
  .trade-field>strong {
    min-height:57px;
    padding-inline:14px;
    border-radius:8px;
    font-size:13px;
  }
  .trade-presets button {
    min-height:32px;
  }
  .trade-order-summary div {
    font-size:8px;
  }
  .trade-submit {
    min-height:54px;
    font-size:12px;
  }
  .trade-positions {
    margin-top:0;
    border-width:0 0 1px;
    border-radius:0;
  }
  .trade-positions>header {
    align-items:stretch;
    min-height:56px;
    overflow:auto;
  }
  .trade-positions nav {
    gap:20px;
    min-width:max-content;
  }
  .trade-positions>header>span {
    display:none;
  }
  .positions-table {
    overflow:auto;
  }
}

/* 21st-inspired finish: restrained light, tactile controls and consistent focus. */
:root {
  --ui-edge:var(--k331);
  --ui-edge-strong:var(--k350);
  --ui-highlight:var(--k267);
  --ui-ease:cubic-bezier(.22,.78,.24,1);
}

::selection {
  color:var(--k15);
  background:var(--k263);
}

:where(a,button,input,select) {
  -webkit-tap-highlight-color:transparent;
}

:where(a,button,input,select):focus-visible {
  outline:2px solid var(--ui-highlight);
  outline-offset:4px;
}

.app-header,
.public-header {
  isolation:isolate;
}

.app-header::before,
.public-header::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:.28;
  background:
    radial-gradient(360px 70px at 16% 0%,var(--k312),transparent 70%),
    linear-gradient(90deg,transparent 0 12%,var(--k298) 24%,transparent 42%);
  pointer-events:none;
}

.wordmark .mark {
  border:1px solid var(--k321);
  box-shadow:inset 0 0 0 1px var(--k0),0 8px 24px var(--k4);
  transition:transform .28s var(--ui-ease),border-color .28s,box-shadow .28s;
}

.wordmark:hover .mark,
.wordmark:focus-visible .mark {
  border-color:var(--k351);
  box-shadow:inset 0 0 0 1px var(--k0),0 10px 28px var(--k0),0 0 22px var(--k308);
  transform:translateY(-1px) scale(1.035);
}

.main-nav a {
  position:relative;
  overflow:hidden;
  transition:color .22s,background .22s,box-shadow .22s,transform .22s var(--ui-ease);
}

.main-nav a::after {
  content:"";
  position:absolute;
  right:12px;
  bottom:5px;
  left:12px;
  height:1px;
  opacity:0;
  background:currentColor;
  transform:scaleX(.35);
  transition:opacity .22s,transform .28s var(--ui-ease);
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  opacity:.5;
  transform:scaleX(1);
}

.main-nav a.active::after {
  right:50%;
  bottom:4px;
  left:50%;
  width:3px;
  height:3px;
  border-radius:50%;
  opacity:.72;
  transform:translateX(-50%);
}

.wallet-button,
.wallet-link,
.public-cta,
.primary-link,
.balance-actions a,
.shortcut-grid>a,
.sheet-option,
.navbar-menu-groups a,
.market-grid .market-list-row {
  transition:
    color .22s,
    background .22s,
    border-color .22s,
    box-shadow .28s,
    transform .22s var(--ui-ease);
}

.wallet-button:active,
.wallet-link:active,
.public-cta:active,
.primary-link:active,
.balance-actions a:active,
.shortcut-grid>a:active,
.sheet-option:active,
.navbar-menu-groups a:active,
.market-grid .market-list-row:active {
  transform:translateY(1px) scale(.985);
  transition-duration:.08s;
}

.public-cta b,
.primary-link b,
.wallet-link b,
.navbar-menu-groups a::after,
.sheet-option em {
  transition:transform .24s var(--ui-ease);
}

.public-cta:hover b,
.public-cta:focus-visible b,
.primary-link:hover b,
.primary-link:focus-visible b,
.wallet-link:hover b,
.wallet-link:focus-visible b,
.sheet-option:hover em,
.sheet-option:focus-visible em {
  transform:translate(2px,-1px);
}

.surface,
.portfolio-command,
.wallet-summary,
.market-grid .market-list-row,
.shortcut-grid>a,
.sheet-option,
.auth-card,
.market-terminal {
  border-color:var(--ui-edge);
}

.surface,
.portfolio-command,
.wallet-summary,
.market-grid .market-list-row,
.shortcut-grid>a,
.sheet-option,
.auth-card,
.market-terminal,
.wallet-actions i {
  background-clip:padding-box;
}

.ui-polish {
  isolation:isolate;
}

/* O spotlight precisa de um contexto de posicionamento. Só criamos um quando
   o alvo é estático: forçar position:relative aqui sobrescrevia elementos já
   posicionados (o .market-terminal é absolute e ia parar em cima da navbar).
   A classe é aplicada pelo app.js, que consulta o position computado. */
.ui-polish--anchor {
  position:relative;
}

.ui-polish>.ui-spotlight {
  position:absolute;
  z-index:6;
  inset:-1px;
  display:block;
  border-radius:inherit;
  opacity:0;
  background:
    radial-gradient(260px circle at var(--spot-x,50%) var(--spot-y,30%),var(--k314),transparent 62%);
  mix-blend-mode:screen;
  pointer-events:none;
  transition:opacity .32s var(--ui-ease);
}

.ui-polish.is-lit>.ui-spotlight {
  opacity:1;
}

.auth-card input,
.convert-field,
.demo-order label strong,
.trade-field>strong,
.sheet-search,
.market-search {
  transition:border-color .22s,background .22s,box-shadow .25s;
}

.auth-card input:hover,
.convert-field:hover,
.demo-order label strong:hover,
.trade-field>strong:hover,
.sheet-search:hover,
.market-search:hover {
  border-color:var(--k347);
}

.auth-card input:focus,
.auth-card input:focus-visible {
  border-color:var(--k263);
  outline:0;
  box-shadow:0 0 0 3px var(--k306),0 12px 28px var(--k2);
}

.mobile-sheet:not([hidden]) {
  animation:ui-dialog-in .36s var(--ui-ease) both;
}

.navbar-menu-panel:not([hidden]) {
  animation:ui-menu-in .28s var(--ui-ease) both;
}

.mobile-bottom-nav a {
  position:relative;
  transition:color .2s,transform .2s var(--ui-ease);
}

.mobile-bottom-nav a::before {
  content:"";
  position:absolute;
  top:3px;
  left:50%;
  width:34px;
  height:34px;
  border:1px solid transparent;
  border-radius:50%;
  background:var(--k291);
  transform:translateX(-50%) scale(.7);
  transition:transform .25s var(--ui-ease),background .25s,border-color .25s;
}

.mobile-bottom-nav a.active::before {
  border-color:var(--k321);
  background:var(--k299);
  transform:translateX(-50%) scale(1);
}

.mobile-bottom-nav a:active {
  transform:scale(.94);
}

.mobile-bottom-nav a>* {
  position:relative;
  z-index:1;
}

@keyframes ui-dialog-in {
  from { opacity:0; transform:translate(-50%,calc(-50% + 16px)) scale(.975); }
  to { opacity:1; transform:translate(-50%,-50%) scale(1); }
}

@keyframes ui-menu-in {
  from { opacity:0; transform:translateY(-9px) scale(.99); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

@media (hover:hover) and (pointer:fine) {
  .surface:hover,
  .portfolio-command:hover,
  .wallet-summary:hover,
  .auth-card:hover {
    border-color:var(--k341);
    box-shadow:inset 1px 1px var(--k307),0 24px 55px var(--k4);
  }

  .shortcut-grid>a:hover {
    box-shadow:inset 0 1px var(--k306),0 18px 34px var(--k4);
  }
}

@media (max-width:760px) {
  .mobile-sheet:not([hidden]) {
    animation-name:ui-sheet-in;
  }

  .navbar-menu-panel:not([hidden]) {
    animation-name:ui-mobile-menu-in;
  }

  .mobile-bottom-nav i {
    transition:transform .25s var(--ui-ease),color .2s;
  }

  .mobile-bottom-nav a.active i {
    transform:translateY(-1px) scale(1.05);
  }
}

@keyframes ui-sheet-in {
  from { opacity:0; transform:translateY(28px); }
  to { opacity:1; transform:translateY(0); }
}

@keyframes ui-mobile-menu-in {
  from { opacity:0; transform:translateX(12px); }
  to { opacity:1; transform:translateX(0); }
}

@media (prefers-reduced-motion:reduce) {
  .mobile-sheet:not([hidden]),
  .navbar-menu-panel:not([hidden]) {
    animation:none;
  }

  .ui-polish>.ui-spotlight {
    display:none;
  }
}

/* Convert: searchable assets and an explicit fee breakdown. */
body[data-page="convert"] .convert-shell {
  grid-template-columns:minmax(460px,560px) minmax(220px,310px);
  justify-content:space-between;
  gap:clamp(44px,8vw,130px);
  min-height:650px;
  padding:44px clamp(34px,7vw,98px);
}

body[data-page="convert"] .convert-card {
  width:100%;
  padding:30px;
  overflow:visible!important;
}

body[data-page="convert"] .convert-card h2 {
  margin-bottom:28px;
}

body[data-page="convert"] .convert-field {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(155px,.85fr) minmax(170px,1.15fr);
  gap:12px;
  min-height:108px;
  padding:13px 15px 15px;
  border-color:var(--k333);
  border-radius:14px;
  background:linear-gradient(135deg,var(--k58),var(--k23));
}

body[data-page="convert"] .convert-field.is-open {
  z-index:20;
  border-color:var(--k353);
  box-shadow:0 18px 45px var(--k7);
}

.convert-field-label {
  grid-column:1/-1;
  color:var(--k159);
  font:8px var(--mono);
  letter-spacing:1px;
}

.convert-asset-trigger {
  display:grid;
  grid-template-columns:37px 1fr auto;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:5px;
  border:0;
  border-radius:9px;
  color:var(--k253);
  background:transparent;
  text-align:left;
  cursor:pointer;
  transition:background .2s;
}

.convert-asset-trigger:hover,
.convert-asset-trigger:focus-visible {
  background:var(--k299);
}

.convert-asset-trigger>i,
.convert-asset-menu button>i {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid var(--k339);
  border-radius:50%;
  color:var(--k42);
  background:var(--k255);
  font:18px Georgia,serif;
  font-style:normal;
}

.convert-asset-trigger>span,
.convert-asset-menu button>span {
  display:grid;
  gap:3px;
  min-width:0;
}

.convert-asset-trigger b {
  font:700 13px var(--mono);
}

.convert-asset-trigger small,
.convert-asset-menu button small {
  overflow:hidden;
  color:var(--k159);
  font:8px var(--font);
  text-overflow:ellipsis;
  white-space:nowrap;
}

.convert-asset-trigger em {
  color:var(--k168);
  font-style:normal;
}

.convert-amount {
  display:grid;
  align-content:center;
  justify-items:end;
  gap:4px;
  min-width:0;
  text-align:right;
}

.convert-amount>span {
  color:var(--k159);
  font:7px var(--mono);
  letter-spacing:.7px;
}

.convert-amount input {
  width:100%;
  min-width:0;
  padding:0;
  border:0;
  outline:0;
  color:var(--k260);
  background:transparent;
  font:650 20px var(--mono);
  text-align:right;
}

.convert-amount strong {
  overflow:hidden;
  max-width:100%;
  color:var(--k260);
  font:650 17px var(--mono);
  text-overflow:ellipsis;
  white-space:nowrap;
}

.convert-amount small {
  color:var(--k149)!important;
  font:7px var(--mono)!important;
}

.convert-asset-menu {
  position:absolute;
  z-index:25;
  top:calc(100% + 8px);
  left:0;
  width:min(360px,100%);
  padding:10px;
  overflow:hidden;
  border:1px solid var(--k340);
  border-radius:15px;
  background:linear-gradient(145deg,var(--k74),var(--k25));
  box-shadow:0 28px 70px var(--k10);
}

.convert-asset-menu[hidden] {
  display:none;
}

.convert-asset-search {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:0 11px;
  border:1px solid var(--k325);
  border-radius:10px;
  color:var(--k188);
  background:var(--k37);
  font-size:19px;
}

.convert-asset-search input {
  width:100%;
  border:0;
  outline:0;
  color:var(--k253);
  background:transparent;
  font:10px var(--font);
}

.convert-asset-search input::placeholder {
  color:var(--k155);
}

.convert-asset-menu>div {
  display:grid;
  max-height:260px;
  margin-top:8px;
  overflow:auto;
}

.convert-asset-menu button {
  display:grid;
  grid-template-columns:36px 1fr auto;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:7px 9px;
  border:0;
  border-bottom:1px solid var(--k306);
  color:var(--k253);
  background:transparent;
  text-align:left;
  cursor:pointer;
}

.convert-asset-menu button:hover,
.convert-asset-menu button:focus-visible,
.convert-asset-menu button.selected {
  color:var(--k25);
  background:var(--k255);
}

.convert-asset-menu button:hover small,
.convert-asset-menu button:focus-visible small,
.convert-asset-menu button.selected small {
  color:var(--k132);
}

.convert-asset-menu button>i {
  width:30px;
  height:30px;
  font-size:15px;
}

.convert-asset-menu button em {
  font:11px var(--mono);
  font-style:normal;
}

body[data-page="convert"] .swap-mark {
  width:38px;
  height:38px;
  margin:-4px auto;
  border-width:5px;
  cursor:pointer;
  transition:transform .25s var(--ui-ease),background .2s;
}

body[data-page="convert"] .swap-mark:hover,
body[data-page="convert"] .swap-mark:focus-visible {
  transform:rotate(180deg);
}

.convert-rate {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:9px;
  min-height:43px;
  padding:0 5px;
  color:var(--k159);
  font:7px var(--mono);
}

.convert-rate b {
  color:var(--k216);
  font-weight:500;
}

.convert-rate em {
  color:var(--k149);
  font-style:normal;
}

.convert-fees {
  display:grid;
  margin:2px 0 13px;
  padding:9px 13px;
  border:1px solid var(--k321);
  border-radius:12px;
  background:var(--k28);
}

.convert-fees>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  min-height:32px;
  color:var(--k184);
  font-size:9px;
}

.convert-fees span small {
  margin-left:5px;
  color:var(--k142);
  font:7px var(--mono);
}

.convert-fees b {
  color:var(--k219);
  font:500 8px var(--mono);
}

.convert-fees .convert-net {
  margin-top:3px;
  padding-top:8px;
  border-top:1px solid var(--k314);
  color:var(--k253);
  font-weight:700;
}

.convert-fees .convert-net b {
  color:var(--k267);
  font-size:10px;
  font-weight:700;
}

body[data-page="convert"] .convert-card .primary-link {
  min-height:48px;
  cursor:pointer;
}

body[data-page="convert"] .convert-card .primary-link.confirmed {
  color:var(--k253)!important;
  background:var(--k83);
}

body[data-page="convert"] .convert-card .primary-link.is-disabled {
  color:var(--k152)!important;
  background:var(--k79);
  box-shadow:none;
  cursor:not-allowed;
}

.convert-disclaimer {
  margin:11px 2px 0!important;
  line-height:1.45;
}

@media (max-width:760px) {
  body[data-page="convert"] .convert-shell {
    display:block;
    min-height:0;
    padding:0;
  }

  body[data-page="convert"] .convert-card {
    padding:20px 17px;
  }

  body[data-page="convert"] .convert-card h2 {
    font-size:31px;
  }

  body[data-page="convert"] .convert-field {
    grid-template-columns:minmax(130px,.9fr) minmax(135px,1.1fr);
    min-height:104px;
    padding:12px;
  }

  .convert-asset-trigger {
    grid-template-columns:34px 1fr auto;
    gap:7px;
    padding:3px;
  }

  .convert-asset-trigger>i {
    width:33px;
    height:33px;
  }

  .convert-amount input {
    font-size:17px;
  }

  .convert-amount strong {
    font-size:14px;
  }

  .convert-asset-menu {
    right:0;
    width:100%;
  }

  .convert-rate {
    grid-template-columns:1fr auto;
    padding-block:5px;
  }

  .convert-rate>span {
    grid-column:1/-1;
  }

  .convert-rate em {
    display:none;
  }
}

/* Earn simulator: amount selection and projected yield before a demo allocation. */
.earn-grid .earn-product {
  position:relative;
  display:block;
  min-width:0;
  min-height:210px;
  padding:22px;
  overflow:hidden;
  color:var(--ink);
  background:linear-gradient(145deg,var(--k74),var(--k37))!important;
  text-align:left;
  cursor:pointer;
  transition:transform .22s var(--ui-ease),border-color .22s,box-shadow .25s;
}

.earn-grid .earn-product:hover,
.earn-grid .earn-product:focus-visible {
  border-color:var(--k228);
  box-shadow:0 20px 42px var(--k4);
  transform:translateY(-5px);
}

.earn-grid .earn-product::before {
  content:"";
  position:absolute;
  right:-68px;
  bottom:-108px;
  width:190px;
  height:190px;
  border:1px solid var(--k308);
  border-radius:50%;
  box-shadow:0 0 0 35px var(--k293);
  pointer-events:none;
}

.earn-grid .earn-product>*:not(.ui-spotlight) {
  position:relative;
  z-index:1;
}

.earn-product-action {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:29px;
  color:var(--k236);
  font-size:10px;
}

.earn-product-action i {
  font:12px var(--mono);
  font-style:normal;
  transition:transform .22s var(--ui-ease);
}

.earn-product:hover .earn-product-action i,
.earn-product:focus-visible .earn-product-action i {
  transform:translateX(4px);
}

.earn-modal-open {
  overflow:hidden;
}

body.earn-modal-open .page-wrap {
  isolation:auto;
}

.earn-modal-scrim:not([hidden]) {
  position:fixed;
  z-index:58;
  inset:0;
  display:block;
  border:0;
  background:var(--k8);
  backdrop-filter:blur(9px);
  animation:earn-scrim-in .25s ease both;
}

.earn-modal:not([hidden]) {
  position:fixed;
  z-index:59;
  top:50%;
  left:50%;
  display:block;
  width:min(540px,calc(100% - 32px));
  max-height:88vh;
  padding:24px;
  overflow:auto;
  border:1px solid var(--k340);
  border-radius:22px;
  color:var(--k253);
  background:
    radial-gradient(360px 210px at 90% 0%,var(--k102),transparent 66%),
    linear-gradient(145deg,var(--k63),var(--k22) 72%);
  box-shadow:0 36px 100px var(--k10),inset 1px 1px var(--k306);
  transform:translate(-50%,-50%);
  animation:earn-modal-in .32s var(--ui-ease) both;
}

.earn-modal[hidden],
.earn-modal-scrim[hidden] {
  display:none;
}

.earn-modal-handle {
  display:none;
}

.earn-modal>header {
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:24px;
  padding-bottom:19px;
  border-bottom:1px solid var(--k314);
}

.earn-modal>header h2 {
  margin:7px 0 0;
  font:700 28px/.98 var(--display);
  letter-spacing:-1.6px;
}

.earn-modal>header>button {
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid var(--k332);
  border-radius:50%;
  color:var(--k221);
  background:var(--k42);
  font:25px/1 var(--font);
  cursor:pointer;
}

.earn-modal-asset {
  display:grid;
  grid-template-columns:45px 1fr auto;
  align-items:center;
  gap:12px;
  min-height:82px;
  border-bottom:1px solid var(--k311);
}

.earn-modal-asset>i {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:1px solid var(--k338);
  border-radius:50%;
  color:var(--k42);
  background:var(--k255);
  font:20px Georgia,serif;
  font-style:normal;
}

.earn-modal-asset>div {
  display:grid;
  gap:3px;
}

.earn-modal-asset>div b {
  font:700 13px var(--mono);
}

.earn-modal-asset small {
  color:var(--k159);
  font:7px var(--mono);
}

.earn-modal-asset>span {
  display:grid;
  gap:5px;
  text-align:right;
}

.earn-modal-asset>span b {
  font:600 10px var(--mono);
}

.earn-amount {
  display:grid;
  gap:8px;
  margin-top:18px;
}

.earn-amount>span {
  color:var(--k159);
  font:7px var(--mono);
  letter-spacing:.9px;
}

.earn-amount>div {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  min-height:64px;
  padding:0 15px;
  border:1px solid var(--k335);
  border-radius:12px;
  background:var(--k30);
  transition:border-color .2s,box-shadow .2s;
}

.earn-amount>div:focus-within {
  border-color:var(--k255);
  box-shadow:0 0 0 3px var(--k303);
}

.earn-amount input {
  min-width:0;
  border:0;
  outline:0;
  color:var(--k265);
  background:transparent;
  font:650 25px var(--mono);
}

.earn-amount b {
  color:var(--k198);
  font:600 11px var(--mono);
}

.earn-range {
  width:100%;
  margin:16px 0 11px;
  accent-color:var(--k255);
}

.earn-presets {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
}

.earn-presets button {
  min-height:34px;
  border:1px solid var(--k323);
  border-radius:8px;
  color:var(--k184);
  background:var(--k49);
  font:600 8px var(--mono);
  cursor:pointer;
}

.earn-presets button:hover,
.earn-presets button:focus-visible,
.earn-presets button.active {
  color:var(--k42);
  border-color:var(--k255);
  background:var(--k255);
}

.earn-duration:not([hidden]) {
  display:grid;
  gap:10px;
  margin-top:17px;
  padding:13px;
  border:1px solid var(--k321);
  border-radius:13px;
  background:var(--k45);
}

.earn-duration[hidden] {
  display:none;
}

.earn-duration>header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.earn-duration>header span {
  color:var(--k159);
  font:7px var(--mono);
  letter-spacing:.8px;
}

.earn-duration>header b {
  color:var(--k257);
  font:650 11px var(--mono);
}

.earn-duration>input {
  width:100%;
  accent-color:var(--k255);
}

.earn-duration>div {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
}

.earn-duration>div button {
  min-height:31px;
  border:1px solid var(--k321);
  border-radius:7px;
  color:var(--k164);
  background:var(--k26);
  font:600 7px var(--mono);
  cursor:pointer;
}

.earn-duration>div button:hover,
.earn-duration>div button:focus-visible,
.earn-duration>div button.active {
  color:var(--k42);
  border-color:var(--k255);
  background:var(--k255);
}

.earn-duration>p {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0;
  color:var(--k150);
  font:7px var(--mono);
}

.earn-duration>p b {
  color:var(--k196);
  font-weight:500;
}

.earn-estimate {
  display:grid;
  margin:18px 0 15px;
  padding:8px 14px;
  border:1px solid var(--k321);
  border-radius:13px;
  background:var(--k29);
}

.earn-estimate>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  min-height:35px;
  color:var(--k180);
  font-size:9px;
}

.earn-estimate span small {
  margin-left:5px;
  color:var(--k141);
  font:7px var(--mono);
}

.earn-estimate b {
  color:var(--k227);
  font:600 9px var(--mono);
}

.earn-estimate .earn-estimate-total {
  margin-top:3px;
  padding-top:7px;
  border-top:1px solid var(--k315);
  color:var(--k253);
  font-weight:700;
}

.earn-estimate .earn-estimate-total b {
  color:var(--k269);
  font-size:11px;
}

.earn-confirm {
  width:100%;
  min-height:49px;
  cursor:pointer;
}

.earn-confirm.confirmed {
  color:var(--k253)!important;
  background:var(--k83);
}

.earn-confirm.is-disabled {
  color:var(--k151)!important;
  background:var(--k79);
  box-shadow:none;
  cursor:not-allowed;
}

.earn-modal-note {
  margin:11px 2px 0;
  color:var(--k145);
  font:7px/1.5 var(--mono);
}

@keyframes earn-scrim-in {
  from { opacity:0; }
  to { opacity:1; }
}

@keyframes earn-modal-in {
  from { opacity:0; transform:translate(-50%,calc(-50% + 15px)) scale(.975); }
  to { opacity:1; transform:translate(-50%,-50%) scale(1); }
}

@media (max-width:760px) {
  .earn-grid .earn-product {
    min-height:154px;
    padding:20px;
    border-radius:18px!important;
  }

  .earn-grid .earn-product h3 {
    margin:12px 0 5px;
  }

  .earn-product-action {
    margin-top:18px;
  }

  .earn-modal:not([hidden]) {
    top:auto;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    max-height:90vh;
    padding:12px 18px calc(22px + env(safe-area-inset-bottom));
    border-width:1px 0 0;
    border-radius:24px 24px 0 0;
    transform:none;
    animation-name:earn-sheet-in;
  }

  .earn-modal-handle {
    display:block;
    width:44px;
    height:5px;
    margin:0 auto 15px;
    border-radius:50%;
    background:var(--k138);
  }

  .earn-modal>header h2 {
    font-size:24px;
  }

  .earn-modal-asset {
    min-height:74px;
  }

  .earn-amount input {
    font-size:21px;
  }
}

@keyframes earn-sheet-in {
  from { opacity:0; transform:translateY(32px); }
  to { opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion:reduce) {
  .earn-modal:not([hidden]),
  .earn-modal-scrim:not([hidden]) {
    animation:none;
  }
}

/* Prediction market — binary decision controls */
.prediction-grid .prediction-card {
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:420px;
  overflow:hidden;
}

.prediction-grid .prediction-card::after {
  content:"";
  position:absolute;
  right:-68px;
  bottom:-98px;
  width:190px;
  aspect-ratio:1;
  border:1px solid var(--k303);
  border-radius:50%;
  box-shadow:0 0 0 34px var(--k295),0 0 0 68px var(--k293);
  pointer-events:none;
}

.prediction-card>header,
.prediction-card .prediction-probability,
.prediction-card .prediction-choices,
.prediction-card .prediction-feedback {
  position:relative;
  z-index:1;
}

.prediction-card>header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.prediction-card>header span,
.prediction-card>header small {
  color:var(--k158);
  font:8px var(--mono);
  letter-spacing:.06em;
}

.prediction-card>header small {
  color:var(--k195);
}

.prediction-grid .prediction-card h3 {
  position:relative;
  z-index:1;
  min-height:62px;
  margin:25px 0 24px;
  padding-right:12px;
  font-size:20px;
  line-height:1.08;
}

.prediction-card .prediction-probability {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  width:100%;
  align-items:stretch;
  justify-content:stretch;
  gap:9px;
}

.prediction-card .prediction-probability>i {
  position:relative;
  display:block;
  width:100%;
  min-width:100%;
  justify-self:stretch;
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:var(--k109);
}

.prediction-card .prediction-probability>i::before {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:var(--yes);
  border-radius:inherit;
  background:var(--k255);
  box-shadow:8px 0 18px var(--k330);
}

.prediction-card .prediction-probability>span {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.prediction-card .prediction-probability b {
  display:block;
  flex:none;
  color:var(--k184);
  font:7px var(--mono);
  letter-spacing:.05em;
}

.prediction-card .prediction-probability b:first-child {
  color:var(--k246);
}

.prediction-card .prediction-stake {
  position:relative;
  z-index:2;
  display:grid;
  gap:8px;
  margin-top:20px;
}

.prediction-card .prediction-stake>label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--k202);
  font:7px var(--mono);
  letter-spacing:.05em;
}

.prediction-card .prediction-stake>label span {
  color:var(--k145);
  font-size:6px;
}

.prediction-card .prediction-amount {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  width:100%;
  min-height:48px;
  padding:0 13px;
  border:1px solid var(--k120);
  border-radius:11px;
  background:var(--k22);
  transition:border-color .18s ease,box-shadow .18s ease;
}

.prediction-card .prediction-amount:focus-within {
  border-color:var(--k199);
  box-shadow:0 0 0 3px var(--k300);
}

.prediction-card .prediction-amount input {
  min-width:0;
  border:0;
  outline:0;
  color:var(--k255);
  background:transparent;
  font:700 17px var(--mono);
}

.prediction-card .prediction-amount input::placeholder {
  color:var(--k130);
}

.prediction-card .prediction-amount input::-webkit-outer-spin-button,
.prediction-card .prediction-amount input::-webkit-inner-spin-button {
  margin:0;
  appearance:none;
}

.prediction-card .prediction-amount>b {
  display:block;
  flex:none;
  color:var(--k176);
  font:7px var(--mono);
}

.prediction-card .prediction-stake>nav {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}

.prediction-card .prediction-stake>nav button {
  min-height:27px;
  padding:0;
  border:1px solid var(--k107);
  border-radius:7px;
  color:var(--k173);
  background:var(--k42);
  font:7px var(--mono);
  cursor:pointer;
}

.prediction-card .prediction-stake>nav button:hover,
.prediction-card .prediction-stake>nav button.active {
  color:var(--k42);
  border-color:var(--k246);
  background:var(--k246);
}

.prediction-card .prediction-return-preview {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:5px 8px;
  min-height:28px;
  color:var(--k149);
  font:7px/1.4 var(--mono);
}

.prediction-card .prediction-return-preview>span {
  grid-column:1 / -1;
}

.prediction-card .prediction-return-preview>b {
  display:block;
  padding:6px 8px;
  border:1px solid var(--k101);
  border-radius:7px;
  background:var(--k26);
  font:700 8px var(--mono);
}

.prediction-card .prediction-return-preview>b[data-return-yes] {
  color:var(--k115);
  border-color:var(--k81);
  background:var(--k21);
}

.prediction-card .prediction-return-preview>b[data-return-no] {
  color:var(--k279);
  border-color:var(--k146);
  background:var(--k62);
}

.prediction-card .prediction-return-preview>[hidden] {
  display:none;
}

.prediction-card .prediction-choices {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px;
  padding-top:0;
}

.prediction-card .prediction-choices button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:55px;
  padding:0 14px;
  border:1px solid var(--k127);
  border-radius:12px;
  color:var(--k257);
  background:var(--k26);
  cursor:pointer;
  transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease;
}

.prediction-card .prediction-choices button:hover {
  border-color:var(--k206);
  background:var(--k63);
  transform:translateY(-2px);
}

.prediction-card .prediction-choices button:focus-visible {
  outline:2px solid var(--k255);
  outline-offset:3px;
}

.prediction-card .prediction-choices button[aria-pressed="true"] {
  color:var(--k19);
  border-color:var(--k255);
  background:var(--k255);
  box-shadow:0 10px 24px var(--k4),0 0 0 1px var(--k314);
}

.prediction-card .prediction-choices button span,
.prediction-card .prediction-choices button b {
  flex:none;
  color:inherit;
  font:700 10px var(--mono);
}

.prediction-card .prediction-choices button span {
  display:grid;
  gap:3px;
  text-align:left;
}

.prediction-card .prediction-choices button span small {
  color:inherit;
  font:7px var(--mono);
  opacity:.68;
}

.prediction-card .prediction-choices button b {
  display:block;
  font-size:13px;
}

.prediction-card .prediction-feedback {
  margin:10px 0 0;
  color:var(--k198);
  font:7px/1.45 var(--mono);
  letter-spacing:.03em;
}

.prediction-card .prediction-feedback[hidden] {
  display:none;
}

.prediction-card[data-selection="yes"] .prediction-choices button[data-prediction-choice="no"],
.prediction-card[data-selection="no"] .prediction-choices button[data-prediction-choice="yes"] {
  opacity:.52;
  filter:saturate(.55);
}

.prediction-card .prediction-choices button[data-prediction-choice="yes"] {
  color:var(--k115);
  border-color:var(--k82);
  background:var(--k24);
}

.prediction-card .prediction-choices button[data-prediction-choice="no"] {
  color:var(--k279);
  border-color:var(--k154);
  background:var(--k69);
}

.prediction-card .prediction-choices button[data-prediction-choice="yes"]:hover {
  color:var(--k133);
  border-color:var(--k115);
  background:var(--k41);
}

.prediction-card .prediction-choices button[data-prediction-choice="no"]:hover {
  color:var(--k282);
  border-color:var(--k279);
  background:var(--k85);
}

.prediction-card .prediction-choices button[data-prediction-choice="yes"][aria-pressed="true"] {
  color:var(--k14);
  border-color:var(--k115);
  background:var(--k115);
  box-shadow:0 10px 26px var(--k4),0 0 24px var(--k116);
}

.prediction-card .prediction-choices button[data-prediction-choice="no"][aria-pressed="true"] {
  color:var(--k61);
  border-color:var(--k279);
  background:var(--k279);
  box-shadow:0 10px 26px var(--k4),0 0 24px var(--k280);
}

.prediction-card .prediction-choices button:disabled,
.prediction-card .prediction-choices button:disabled:hover {
  color:var(--k145);
  border-color:var(--k101);
  background:var(--k42);
  box-shadow:none;
  cursor:not-allowed;
  filter:saturate(0);
  opacity:.55;
  transform:none;
}

@media (max-width:760px) {
  .prediction-grid .prediction-card {
    min-height:382px;
    padding:20px;
  }

  .prediction-grid .prediction-card h3 {
    min-height:0;
    margin:20px 0;
    font-size:20px;
  }

  .prediction-card .prediction-choices {
    margin-top:12px;
    padding-top:0;
  }

  .prediction-card .prediction-choices button {
    min-height:52px;
    border-radius:13px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .prediction-card .prediction-choices button {
    transition:none;
  }
}

@media (max-width:760px) {
  .affiliate-summary { grid-template-columns:1fr; gap:26px; min-height:0; padding:24px; }
  .affiliate-summary h2 { font-size:35px; letter-spacing:-2px; }
  .affiliate-summary p { font-size:11px; }
  .affiliate-summary dl { grid-template-columns:1fr 1fr; gap:12px; }
  .affiliate-summary dl>div { min-width:0; padding:0; border:0; }
  .affiliate-summary dd { font-size:27px; letter-spacing:-1.5px; }
  .affiliate-rewards { grid-template-columns:1fr; gap:11px; margin-top:11px; }
  .affiliate-rewards article { min-height:0; padding:23px; }
  .affiliate-rewards strong { margin:13px 0 8px; font-size:44px; }
  .affiliate-levels { margin-top:11px; padding:21px; }
  .affiliate-level-table { display:grid; gap:9px; margin-top:20px; overflow:visible; border:0; border-radius:0; }
  .affiliate-level-heading { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .affiliate-level-row { grid-template-columns:1fr 1fr; gap:0; min-height:0; padding:0; overflow:hidden; border:1px solid var(--k314); border-radius:11px; background:var(--k294); }
  .affiliate-level-row>* { display:grid; gap:5px; min-width:0; padding:12px; border-top:1px solid var(--k308); font-size:10px; text-align:left; }
  .affiliate-level-row>*:nth-child(-n+2) { border-top:0; }
  .affiliate-level-row>*:nth-child(odd) { border-right:1px solid var(--k308); }
  .affiliate-level-row>*::before { content:attr(data-label); color:var(--k168); font:7px var(--mono); letter-spacing:.07em; }
  .affiliate-level-row b,.affiliate-level-row strong { font-size:11px; }
  .affiliate-level-row strong { text-align:left; }
  .affiliate-disclosures { grid-template-columns:1fr; gap:9px; margin-top:12px; }
}

/* ── Wallet real (F1) ─────────────────────────────────────────── */
.wallet-panel{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}
.wallet-panel header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.wallet-panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wallet-panel label{display:flex;flex-direction:column;gap:6px;font-size:11px;letter-spacing:.08em;color:var(--muted,var(--k172))}
.wallet-panel select,.wallet-panel input{background:var(--k366);border:1px solid var(--k373);border-radius:10px;padding:12px 14px;color:inherit;font:inherit}
.wallet-address-box{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px dashed var(--k376);border-radius:12px}
.wallet-address-box code{word-break:break-all;font-size:14px;line-height:1.5}
.wallet-fee-line{display:flex;gap:24px;font-size:13px;color:var(--muted,var(--k172))}
.wallet-fee-line b{color:inherit}
[data-wallet-wd-error],[data-wallet-dep-error]{color:var(--k281);font-size:13px}
[data-wallet-wd-success]{color:var(--k163);font-size:13px}
@media (max-width:720px){.wallet-panel-grid{grid-template-columns:1fr}}

/* ── Polish pass 2026-08-05: motion, forms, didática ──────────────── */
:root{--ease-premium:cubic-bezier(0.32,0.72,0,1)}

/* Passos didáticos (CodeBot "como funciona", Affiliate "como ganhar") */
.howto-steps{display:flex;flex-direction:column;gap:18px;margin-bottom:24px}
.howto-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.howto-steps li{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--k369);border-radius:14px;background:var(--k362);transition:border-color .5s var(--ease-premium),transform .5s var(--ease-premium)}
.howto-steps li:hover{border-color:var(--k376);transform:translateY(-2px)}
.howto-steps li i{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;font-weight:700;background:var(--k384);color:var(--k19)}
.howto-steps li b{display:block;font-size:14px;margin-bottom:3px}
.howto-steps li small{color:var(--muted,var(--k172));font-size:12px;line-height:1.55}
.howto-steps li small a{color:inherit;text-decoration:underline}

.panel-hint{font-size:13px;line-height:1.6;color:var(--muted,var(--k172));border-left:2px solid var(--k377);padding-left:12px;margin:0}

/* Forms — foco visível, transições com massa */
.wallet-panel select,.wallet-panel input,.auth-card input{transition:border-color .4s var(--ease-premium),background .4s var(--ease-premium),box-shadow .4s var(--ease-premium)}
.wallet-panel select:hover,.wallet-panel input:hover,.auth-card input:hover{border-color:var(--k378)}
.wallet-panel select:focus-visible,.wallet-panel input:focus-visible,.auth-card input:focus-visible{outline:none;border-color:var(--k380);box-shadow:0 0 0 3px var(--k370),inset 0 1px 1px var(--k368)}
.auth-card input{background:var(--k366);border:1px solid var(--k373);border-radius:10px;padding:12px 14px;color:inherit;font:inherit;width:100%}
.auth-card form{display:flex;flex-direction:column;gap:14px}
.auth-card form label{display:flex;flex-direction:column;gap:6px;font-size:11px;letter-spacing:.08em;color:var(--muted,var(--k172))}

/* Botões — física de pressão + foco acessível */
button,.public-cta,.primary-link{transition:transform .35s var(--ease-premium),background .35s var(--ease-premium),border-color .35s var(--ease-premium),opacity .35s var(--ease-premium)}
button:active,.public-cta:active,.primary-link:active{transform:scale(.98)}
button:focus-visible,a:focus-visible{outline:2px solid var(--k381);outline-offset:3px;border-radius:6px}
button[disabled]{opacity:.55;cursor:not-allowed}

/* Tabelas vivas */
.table-row{transition:background .35s var(--ease-premium)}
.table-row:not(.table-label):hover{background:var(--k363)}

/* Painéis wallet — double-bezel sutil */
.wallet-panel{box-shadow:inset 0 1px 1px var(--k367);border-radius:18px}
.wallet-address-box{background:var(--k362)}

/* Entrada suave das seções (respeita reduced-motion) */
@media (prefers-reduced-motion: no-preference){
  .reveal-pending{opacity:0;transform:translateY(14px)}
  .reveal-in{opacity:1;transform:translateY(0);transition:opacity .7s var(--ease-premium),transform .7s var(--ease-premium)}
}

/* Toast padrão (codebot + geral) */
[data-codebot-toast]{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);background:var(--k357);border:1px solid var(--k374);border-radius:12px;padding:12px 18px;font-size:13px;z-index:60;box-shadow:0 12px 40px var(--k354);transition:opacity .5s var(--ease-premium),transform .5s var(--ease-premium)}
[data-codebot-toast][hidden]{display:none}

/* ── F2: spot + convert reais ─────────────────────────────────────── */
.spot-pair-select{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.08em;color:var(--muted,var(--k172))}
.spot-pair-select select{background:var(--k366);border:1px solid var(--k373);border-radius:10px;padding:8px 12px;color:inherit;font:inherit}
.spot-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-bottom:24px}
.spot-chart-card{display:flex;flex-direction:column;gap:14px}
.spot-chart-card header{display:flex;justify-content:space-between;align-items:center}
.spot-balances{display:flex;justify-content:space-between;font-size:13px;color:var(--muted,var(--k172))}
.spot-order-card{display:flex;flex-direction:column;gap:14px}
.spot-order-card form{display:flex;flex-direction:column;gap:12px}
.spot-order-card form label{display:flex;flex-direction:column;gap:6px;font-size:11px;letter-spacing:.08em;color:var(--muted,var(--k172))}
.spot-order-card input{background:var(--k366);border:1px solid var(--k373);border-radius:10px;padding:12px 14px;color:inherit;font:inherit}
.spot-order-card .public-cta.sell{background:var(--k110);color:var(--k286)}
[data-spot-error]{color:var(--k281);font-size:13px}
[data-spot-success]{color:var(--k163);font-size:13px}
.convert-quote-box{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px dashed var(--k376);border-radius:12px;background:var(--k362)}
.convert-quote-box p{display:flex;justify-content:space-between;margin:0;font-size:13px;color:var(--muted,var(--k172))}
.convert-quote-box strong,.convert-quote-box b{color:inherit;font-size:14px}
[data-cv-error]{color:var(--k281);font-size:13px}
[data-cv-success]{color:var(--k163);font-size:13px}
.convert-shell{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;align-items:start}
@media (max-width:900px){.spot-layout,.convert-shell{grid-template-columns:1fr}}
[hidden]{display:none!important}
.input-row{display:flex;gap:8px;align-items:center}
.input-row input{flex:1}
.input-row .text-link{flex:none;padding:8px 12px;border:1px solid var(--k374);border-radius:8px}
.spot-chart-card .chart-line{stroke:var(--k382);fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
/* Convert card real */
.convert-card{display:flex;flex-direction:column;gap:16px}
.convert-card select{background:var(--k366);border:1px solid var(--k373);border-radius:10px;padding:12px 14px;color:inherit;font:inherit;width:100%}
.convert-card .wallet-panel-grid label{display:flex;flex-direction:column;gap:6px;font-size:11px;letter-spacing:.08em;color:var(--muted,var(--k172))}
.convert-card .convert-amount{display:flex;flex-direction:column;gap:8px;font-size:11px;letter-spacing:.08em;color:var(--muted,var(--k172))}
.convert-card .convert-amount input{background:var(--k366);border:1px solid var(--k373);border-radius:12px;padding:16px;font-size:22px;font-weight:600;color:inherit;width:100%;text-align:left}
.convert-card .swap-mark{align-self:center}
.convert-card .public-cta.full{width:100%;justify-content:center}

/* ── F3: earn, prediction, futures ────────────────────────────────── */
[data-earn-plans] button{cursor:pointer}
[data-earn-error],[data-fut-transfer-error],[data-fut-open-error]{color:var(--k281);font-size:13px}
[data-earn-success],[data-fut-transfer-success],[data-fut-open-success]{color:var(--k163);font-size:13px}
.prediction-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.prediction-card{display:flex;flex-direction:column;gap:14px}
.prediction-card header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.prediction-card header span:last-child{font-size:11px;color:var(--muted,var(--k172));white-space:nowrap}
.prediction-outcomes{display:flex;flex-direction:column;gap:10px}
.prediction-outcome{display:grid;grid-template-columns:1fr 120px 44px;gap:10px;align-items:center;font-size:13px}
.prediction-outcome .prediction-bar{height:6px;border-radius:3px;background:var(--k370);overflow:hidden}
.prediction-outcome .prediction-bar i{display:block;height:100%;background:var(--k383);border-radius:3px;transition:width .7s var(--ease-premium)}
.prediction-outcome b{text-align:right}
[data-fut-open-form] input[type="range"]{width:100%;accent-color:var(--k273)}
.spot-order-card select{background:var(--k366);border:1px solid var(--k373);border-radius:10px;padding:12px 14px;color:inherit;font:inherit;width:100%}


/* Fontes auto-hospedadas — variable fonts (1 arquivo por família cobre todos
   os pesos). Sem Google Fonts: CSP restrito, zero request externo. */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/Geist.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;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/Inter.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;}

/* ── Correções de layout 2026-08-05 ─────────────────────────────────
   .surface só define overflow; as seções novas (wallet-panel, howto,
   asset-table sem regra própria) ficavam com padding 0 e o conteúdo
   encostava na borda do cartão. */
.wallet-panel,.howto-steps{padding:26px;border-radius:16px}
.wallet-panel>header,.howto-steps>.label{margin-bottom:4px}
.howto-steps{gap:14px}
.spot-order-card,.spot-chart-card,.prediction-card,.convert-card{padding:24px}
.surface.asset-table{padding:24px}
.surface.codebot-network{padding:24px}
.surface.codebot-network>header{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:2px}
.surface.codebot-network>header p{margin:0;color:var(--k177);font-size:11px;text-align:right}
.surface.asset-table>header{margin-bottom:16px}
.surface.asset-table .table-row{padding:12px 0;border-top:1px solid var(--k368);display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:12px;align-items:center;font-size:13px}
.surface.asset-table .table-row.table-label{border-top:0;font-size:10px;letter-spacing:.08em;color:var(--muted,var(--k172))}
.surface.asset-table .table-row>span>i{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--k370);align-items:center;justify-content:center;margin-right:8px;font-style:normal;font-size:11px}
.surface.asset-table p[hidden]{display:none}
.surface.asset-table>p{margin:14px 0 0;color:var(--muted,var(--k172));font-size:13px}
[data-fut-positions] .table-row,[data-spot-open-list] .table-row,[data-fut-positions]+p{grid-template-columns:1.2fr 1fr 1fr 1fr .8fr}
@media (max-width:720px){
  .wallet-panel,.howto-steps,.spot-order-card,.spot-chart-card,.prediction-card,.convert-card,.surface.asset-table{padding:18px}
  .surface.asset-table .table-row{grid-template-columns:1fr 1fr;gap:8px;font-size:12px}
  .surface.asset-table .table-row.table-label{display:none}
}

/* Marketbar do spot no mobile: empilha par / seletor / preço em vez de
   espremer os três numa linha. */
@media (max-width:720px){
  .trade-marketbar{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
  .trade-marketbar .trade-pair{justify-content:flex-start}
  .spot-pair-select{width:100%;justify-content:space-between}
  .spot-pair-select select{flex:1;margin-left:10px}
  .trade-quote{display:flex;flex-direction:column;gap:2px}
  .spot-layout{gap:12px}
  .spot-chart-card .terminal-chart{height:120px}
  .wallet-hero,.codebot-summary{gap:12px}
}
/* Placeholder de valor ainda carregando: não parece um traço solto. */
[data-wallet-total]:not(:has(*)),[data-fut-equity],[data-live-balance]{font-variant-numeric:tabular-nums}


/* ═══ Escala mobile (2026-08-05) ═══════════════════════════════════
   O layout herdou a escala de desktop: H1 42px, H2 35px e cards com
   padding de 20px num viewport de 390px — títulos comiam a tela e o
   dado (que é o produto) ficava abaixo da dobra. Escala redesenhada
   para densidade de app de trading, mantendo 44px de alvo tocável e
   nada legível abaixo de 12px. */
@media (max-width:720px){
  .page-wrap{padding:16px 14px 92px}
  .page-intro{padding-bottom:16px}
  .page-intro h1,.mobile-app-head h1{font-size:26px;line-height:1.12;letter-spacing:-1px}
  .page-intro p{font-size:13px;line-height:1.5}

  /* Títulos de seção/card */
  .convert-card h2,.wallet-panel h2,.spot-order-card h2,.surface h2,
  .codebot-plan-section h2,.affiliate-summary h2,.prediction-card h2{font-size:18px;line-height:1.2;letter-spacing:-.5px;margin:2px 0 4px}
  .affiliate-summary h2{font-size:20px}

  /* Números-herói: continuam dominantes, mas cabem na tela */
  .balance-card h2,.codebot-balance-card strong,[data-fut-equity],[data-wallet-total]{font-size:30px;line-height:1.1;letter-spacing:-1px}
  .affiliate-summary dd{font-size:20px;letter-spacing:-.5px}
  [data-codebot-plan] b{font-size:19px}

  /* Campos e controles — alvo tocável >= 44px, texto legível */
  .convert-amount input,.wallet-panel input,.spot-order-card input,
  [data-earn-form] input,[data-fut-open-form] input{min-height:48px;padding:12px 14px;font-size:17px}
  .convert-amount input{font-size:19px;min-height:52px}
  .wallet-panel select,.convert-card select,.spot-order-card select,
  [data-earn-form] select,[data-fut-open-form] select,.spot-pair-select select{min-height:44px;padding:10px 12px;font-size:13px}
  .public-cta,.primary-link,.trade-segment button,[data-spot-submit]{min-height:46px;font-size:13px;letter-spacing:.02em}
  .text-link{min-height:40px;font-size:12px}

  /* Cartões e listas */
  .surface,.wallet-panel,.convert-card,.spot-order-card,.spot-chart-card,
  .prediction-card,.howto-steps,.codebot-balance-card,.codebot-overview-card{padding:16px}
  .market-screen,.market-list{padding:16px}
  .howto-steps li{padding:12px}
  .howto-steps li b{font-size:13px}
  .howto-steps li small{font-size:11.5px;line-height:1.5}
  .label,.shortcut-grid a span{font-size:10px}
  .panel-hint{font-size:12px;line-height:1.55}
  .wallet-fee-line{font-size:12px;flex-wrap:wrap;gap:8px 16px}
}

/* Overrides finais da escala mobile: o CSS legado usa seletores mais
   específicos (body[data-page=…]) e clamp() com vw, que venciam as regras
   acima. Estes fecham os três casos restantes. */
@media (max-width:720px){
  body[data-page="convert"] .convert-card h2,
  .convert-card h2{font-size:19px;line-height:1.15}
  body[data-page="dashboard"] .dashboard-hero .balance-card h2,
  .dashboard-hero .balance-card h2,
  .wallet-hero .balance-card h2,
  .balance-card h2{font-size:31px;line-height:1.08}
  .convert-card .convert-amount input,
  .convert-amount input{font-size:19px}
}

/* ═══ Piso de legibilidade e toque no mobile ═══════════════════════
   A escala original descia a 7–9px em dados que o usuário PRECISA ler
   (volume, variação, saldo disponível, valores do gráfico) e deixava
   alvos de 32–38px. Piso: 11px para conteúdo, 10px só para eyebrow/
   label, 40px de altura mínima em qualquer controle. */
@media (max-width:720px){
  .convert-amount small,.wallet-address-box small,[data-wallet-dep-note],
  .market-list-row small,.mobile-market-list small,.terminal-value em,
  .market-row em,.market-list-row em,.shortcut-grid a span,
  .activity-grid small,.sheet-option small,.market-filters span,
  .market-filters b,.landing-copy small{font-size:11px}
  .terminal-chart+footer b,.market-terminal footer b{font-size:12px}
  .market-terminal footer small,.hero-sidecopy{font-size:10px}
  .mobile-icon-button{min-width:40px;min-height:40px;font-size:12px}
  .app-header select,[data-language-select]{min-height:40px;font-size:12px}
  .app-header button,.app-header .wallet-link,.mobile-app-head button,
  .market-filters button,.trade-segment button{min-height:40px}
  .market-list header a,.shortcut-grid header a,.two-col header a,
  section>header a{font-size:11px;min-height:40px;display:inline-flex;align-items:center}
}

/* Últimos pontos abaixo do piso: seletores diretos (os genéricos acima
   perderam para regras mais específicas do CSS legado). */
@media (max-width:720px){
  [data-cv-balance],[data-spot-quote-balance],[data-spot-base-balance],
  [data-earn-balance],[data-fut-withdrawable]{font-size:11px}
  .balance-card p,[data-dash-sub]{font-size:11px}
  .market-row strong,.market-row em,.market-row b,.market-row small,
  .market-list-row strong,.market-list-row em{font-size:12px}
  .market-row b small,.market-list-row b small{font-size:11px}
  .landing-copy small,.landing-copy p{font-size:12px}
  .terminal-asset small,.terminal-asset b,.market-terminal footer b{font-size:12px}
  .convert-card .text-link,[data-cv-max],[data-cv-swap],.swap-mark{min-height:40px;min-width:40px}
}

/* ═══ Piso de legibilidade mobile — regra final ════════════════════
   O CSS legado define 7–10px em dezenas de seletores mais específicos
   (.convert-amount small, .market-terminal footer small, .auth-card
   small…). Em telas de 390px isso é ilegível. Aqui o piso é imposto
   com prioridade: 11px para qualquer texto que o usuário precise ler.
   Eyebrows e labels (.label) seguem em 10px de propósito. */
@media (max-width:720px){
  .convert-amount small,[data-cv-balance],
  .market-terminal footer small,.market-terminal footer b,
  .balance-card p,[data-dash-sub],
  .codebot-balance-card p,.codebot-overview-card a,.codebot-overview-card small,
  .codebot-plan-section header p,[data-codebot-plan] small,
  .wallet-link,.auth-card small,.auth-card .forgot,.auth-back,
  .affiliate-disclosures p,
  .utility-side p,.landing-copy small,.landing-actions+small,
  .app-header .header-balance b,.market-row b small{font-size:11px !important}
  .affiliate-disclosures b,.market-terminal footer b{font-size:11.5px !important}
  /* alvos tocáveis que ficaram curtos */
  .mobile-wallet-person button,
  .wallet-panel .text-link,.convert-card .text-link{min-height:40px !important;padding:0 14px}
}

@media (max-width:720px){
  .codebot-cycle header p,.codebot-cycle p,.codebot-positions header span,
  .mobile-wallet-person small,.mobile-sheet p,
  .landing-features p,.landing-features a,
  .terminal-value b,.market-terminal .terminal-value b{font-size:11px !important}
  .terminal-value b{font-size:20px !important}
}

/* ── Páginas de conteúdo (institucional/legal) ────────────────────── */
.content-page{max-width:820px;margin:0 auto;padding:56px 24px 96px}
.content-breadcrumb{display:flex;gap:8px;align-items:center;font-size:11px;letter-spacing:.06em;color:var(--muted,var(--k172));margin-bottom:28px}
.content-breadcrumb a{color:inherit}
.content-breadcrumb b{color:var(--k257)}
.content-body h1{font:700 clamp(30px,3.4vw,46px)/1.06 var(--display);letter-spacing:-1.5px;margin:0 0 16px}
.content-body h2{font:700 clamp(20px,2vw,27px)/1.15 var(--display);letter-spacing:-.6px;margin:44px 0 12px}
.content-body h3{font:600 17px/1.3 var(--display);margin:28px 0 8px}
.content-body p,.content-body li{font-size:15px;line-height:1.72;color:var(--k217)}
.content-body ul,.content-body ol{padding-left:20px;margin:12px 0}
.content-body li{margin:6px 0}
.content-body a{color:var(--k288);text-decoration:underline;text-underline-offset:3px}
.content-body a.public-cta{color:var(--k19);text-decoration:none}
.content-body a.text-link{text-decoration:none}
.content-body strong{color:var(--k257)}
.content-body table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px;display:block;overflow-x:auto}
.content-body th,.content-body td{padding:12px;border-bottom:1px solid var(--k371);text-align:left;white-space:nowrap}
.content-body th{font-size:11px;letter-spacing:.06em;color:var(--muted,var(--k172));text-transform:uppercase}
.content-body .lead{font-size:17px;line-height:1.65;color:var(--k239)}
.content-body hr{border:0;border-top:1px solid var(--k371);margin:36px 0}
.content-body .callout{padding:18px;border:1px solid var(--k373);border-radius:14px;background:var(--k364);margin:20px 0}
.content-body .callout p:last-child{margin-bottom:0}
@media (max-width:720px){
  .content-page{padding:28px 16px 80px}
  .content-body h1{font-size:26px;letter-spacing:-1px}
  .content-body h2{font-size:19px;margin:32px 0 10px}
  .content-body p,.content-body li{font-size:14px;line-height:1.65}
  .content-body .lead{font-size:15px}
}
.form-flash{padding:14px 16px;border-radius:12px;font-size:14px;margin:0 0 20px}
.form-flash--ok{border:1px solid var(--k356);background:var(--k355);color:var(--k163)}
.form-flash--err{border:1px solid var(--k359);background:var(--k358);color:var(--k281)}
.content-body form{display:flex;flex-direction:column;gap:14px;margin:24px 0}
.content-body form label{display:flex;flex-direction:column;gap:6px;font-size:11px;letter-spacing:.08em;color:var(--muted,var(--k172))}
.content-body form input,.content-body form textarea{background:var(--k366);border:1px solid var(--k373);border-radius:10px;padding:12px 14px;color:inherit;font:inherit;min-height:46px}
.content-body form textarea{min-height:130px;resize:vertical}
.content-body form button{align-self:flex-start;min-height:46px;padding:0 22px;border-radius:999px;border:0;background:var(--k273);color:var(--k19);font-weight:600;cursor:pointer}
.content-body .catalog-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:24px 0 34px}
.content-body .catalog-actions .public-cta{margin:0}

/* Alvos de toque no celular. Links em CÉLULA DE TABELA e em ITEM DE LISTA
   funcionam como controles (a tabela de pares tem 75 deles, com 13px de
   altura cada — errar a linha vizinha era o comportamento provável).
   Ganham área de toque por padding, sem mudar tipografia nem layout.
   Links dentro de <p> ficam de fora: são texto corrido e a diretriz de
   tamanho mínimo não se aplica a eles. */
@media (max-width:760px) {
  .content-body td > a,
  .content-body th > a { display:block; padding:11px 0; }
  .content-body li > a:first-child { display:inline-block; padding:9px 0; }
}

/* Alvos de toque restantes no celular, medidos a 390px:
   - CTAs dos cards da landing ("Open markets →") tinham 13px de altura;
   - links do hub /learn ficam dentro de <h3>, fora do seletor li > a. */
@media (max-width:760px) {
  .landing-features article a { display:inline-block; padding:10px 0; }
  .content-body li h3 > a { display:inline-block; padding:6px 0; }
  /* Espelha a especificidade do seletor original (.market-ticker>div>span,
     0-1-2); uma regra mais curta perderia e o rótulo continuaria a 8px. */
  .market-ticker > div > span { font-size:10px; }
  /* eyebrows de seção a 9px */
  .eyebrow, .auth-card .eyebrow { font-size:10px; }
  /* links de fluxo de auth: 13px de altura vira alvo de toque */
  .auth-card a, .auth-card small a, .auth-card form a { display:inline-block; padding:11px 0; }
  /* rótulo do cabeçalho mobile do app (ex.: "MARKETS", "VIP TIER") a 9px */
  .mobile-app-head span { font-size:10px; }
}

/* Cards de estratégia do Codebot: densos, um dado por linha. Substituem o
   par valor+rótulo por um bloco com retorno do ciclo, equivalente mensal,
   liquidez, mínimo e taxa — tudo derivado de /codebot/plans. */
.codebot-plans button u { display:grid; gap:4px; margin-top:10px; padding-top:9px; border-top:1px solid var(--k310); text-decoration:none; }
.codebot-plans button u em { color:var(--k177); font:400 10px var(--mono); font-style:normal; letter-spacing:.02em; }

.codebot-plans-loading { grid-column:1/-1; margin:0; padding:18px 0; color:var(--k161); font:11px var(--mono); text-align:center; }

/* Rede de afiliados dentro do Codebot */
.codebot-network { display:grid; gap:26px; }
.codebot-net-invite { display:grid; gap:8px; }
.codebot-net-invite>span { color:var(--k161); font:10px var(--mono); letter-spacing:.1em; }
.codebot-net-invite>div { display:flex; gap:8px; }
.codebot-net-invite input { flex:1; min-width:0; padding:12px 14px; border:1px solid var(--k320); border-radius:9px; background:var(--k298); color:var(--k247); font:11px var(--mono); }
.codebot-net-invite button { padding:0 18px; border:0; border-radius:9px; background:var(--k262); color:var(--k37); font:600 11px var(--nav); cursor:pointer; }
.codebot-net-invite button:hover { background:var(--k231); }
.codebot-net-invite small { color:var(--k163); font-size:10px; }
.codebot-net-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.codebot-net-stats>div { display:grid; gap:6px; padding:15px; border:1px solid var(--k310); border-radius:11px; background:var(--k295); }
.codebot-net-stats span { color:var(--k161); font:9px var(--mono); letter-spacing:.09em; }
.codebot-net-stats b { font:600 20px var(--display); letter-spacing:-.5px; }
.codebot-net-stats small { color:var(--k177); font-size:10px; line-height:1.4; }
.codebot-net-commissions>div p { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid var(--k305); font-size:12px; }
.codebot-net-commissions span { color:var(--k177); font:10px var(--mono); }
.codebot-net-commissions strong { color:var(--k163); }
.codebot-net-commissions p[data-codebot-net-comms-empty] { display:block; color:var(--k177); font-size:11px; }
@media (max-width:760px) {
  .codebot-net-stats { grid-template-columns:1fr 1fr; }
}
.codebot-plan-cta { display:block; margin-top:12px; padding:9px 0; border-top:1px solid var(--k310); color:var(--k177); font:600 10px var(--nav); letter-spacing:.04em; text-align:center; cursor:pointer; transition:color .2s; }

.codebot-plans button:not([aria-pressed="true"]) .codebot-plan-cta:hover { color:var(--k263); }

/* Depósito: alternância cripto / PIX */
[data-wallet-pix-cpf] label,[data-wallet-pix-form] label { display:grid; gap:6px; margin:14px 0; color:var(--k161); font:10px var(--mono); letter-spacing:.09em; }
[data-wallet-pix-cpf] input,[data-wallet-pix-form] input { padding:13px 14px; border:1px solid var(--k320); border-radius:10px; background:var(--k298); color:var(--k247); font:14px var(--font); }
[data-wallet-pix-limits] { display:block; margin-bottom:12px; color:var(--k177); font-size:11px; }
[data-wallet-pix-status] { margin:10px 0 0; color:var(--k177); font-size:11px; }
[data-wallet-pix-error],[data-wallet-pix-cpf-error] { margin-top:10px; color:var(--k281); font-size:11px; }

/* Seleção da forma de depósito: reusa os botões redondos do painel, então
   o estado ativo precisa do mesmo tratamento do :hover deles. */
body[data-page="wallet"] .balance-actions--round a { cursor:pointer; }
body[data-page="wallet"] .balance-actions--round a[aria-selected="true"] i { color:var(--k37); border-color:var(--k271); background:var(--k257); box-shadow:inset 0 0 0 4px var(--k247); }
/* Escolha de forma de depósito (Cripto / PIX).
   A não escolhida ficava só com `opacity:.62` e fundo transparente ao lado da
   escolhida, que é um círculo claro sólido — a diferença era tão grande que a
   opção disponível parecia ter sumido da tela. Ela precisa continuar legível:
   é o único lugar onde se descobre que dá para depositar em reais. */
body[data-page="wallet"] .balance-actions--round a[aria-selected="false"] i {
  opacity:.92;
  border-color:var(--ui-edge);
  box-shadow:inset 0 0 0 4px var(--k19), inset 0 0 0 5px var(--k324);
}
body[data-page="wallet"] .balance-actions--round a[aria-selected="false"] span { opacity:.8; }
body[data-page="wallet"] .balance-actions--round a[aria-selected="false"]:hover i,
body[data-page="wallet"] .balance-actions--round a[aria-selected="false"]:focus-visible i {
  opacity:1;
}
/* A escolhida se distingue pelo preenchimento, não pelo apagamento da outra. */
body[data-page="wallet"] .balance-actions--round a[aria-selected="true"] i {
  border-color:var(--ink);
}

/* Popup da carteira: depósito, saque e transferência. Antes os painéis
   abriam no meio da página e empurravam o conteúdo. */
.wallet-modal-open { overflow:hidden; }
.wallet-modal { position:fixed; z-index:50; inset:0; display:grid; place-items:center; padding:24px; }
.wallet-modal-scrim { position:absolute; inset:0; border:0; background:var(--k8); backdrop-filter:blur(8px); cursor:default; }
.wallet-modal-panel { position:relative; z-index:1; width:min(620px,100%); max-height:calc(100dvh - 48px); overflow:auto; }
.wallet-modal-panel .wallet-panel { margin:0; }
[data-wallet-tr-available] { display:block; margin:8px 0 14px; color:var(--k177); font-size:11px; }
[data-wallet-tr-error] { margin-top:10px; color:var(--k281); font-size:11px; }
[data-wallet-tr-ok] { margin-top:10px; color:var(--k163); font-size:11px; }
@media (max-width:760px) { .wallet-modal { padding:12px; } .wallet-modal-panel { max-height:calc(100dvh - 24px); } }

/* PIX expirado: o código precisa ficar visivelmente morto. Pagar uma
   cobrança vencida não credita e o dinheiro volta pelo banco. */
.pix-expirado { margin:12px 0 0; padding:12px 14px; border:1px solid var(--k360); border-radius:10px; background:var(--k358); color:var(--k287); font-size:11px; line-height:1.5; }
.pix-expirado b { display:block; margin-bottom:3px; color:var(--k281); }
[data-wallet-pix-code].expirado { opacity:.4; text-decoration:line-through; }
[data-wallet-pix-copy]:disabled { opacity:.45; cursor:not-allowed; }

/* Gráfico de velas real (lightweight-charts sobre /tv/history) */
.chart-real { position:relative; display:grid; gap:10px; }
.chart-canvas { height:min(46vh,380px); min-height:240px; }
.chart-tools { display:flex; gap:6px; }
.chart-tools div { display:flex; gap:6px; }
.chart-tools button { padding:5px 11px; border:1px solid var(--k312); border-radius:999px; background:transparent; color:var(--k177); font:600 10px var(--mono); cursor:pointer; transition:color .2s,background .2s; }
.chart-tools button[aria-pressed="true"] { background:var(--k262); border-color:var(--k262); color:var(--k37); }
.chart-tools button:not([aria-pressed="true"]):hover { color:var(--k247); }
.chart-empty { margin:0; padding:26px 0; color:var(--k177); font-size:11px; text-align:center; }
.fut-chart-card { padding:22px; }
.fut-chart-card header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
@media (max-width:760px) { .chart-canvas { height:260px; min-height:200px; } }

/* Card de posição sobre o gráfico */
.pos-card { position:absolute; top:12px; left:12px; z-index:5; min-width:216px; padding:12px 15px; border:1px solid var(--k320); border-radius:11px; background:var(--k39); backdrop-filter:blur(6px); font-size:11px; line-height:1.75; pointer-events:none; }
.pos-card .tit { display:block; color:var(--k177); font:9px var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.pos-card .lado { display:block; font-size:13px; font-weight:700; }
.pos-card .pnl { display:block; margin:2px 0 6px; font-size:21px; font-weight:700; letter-spacing:-.5px; }
.pos-card .linha { display:flex; justify-content:space-between; gap:20px; color:var(--k177); }
.pos-card .linha b { color:var(--k247); font-weight:600; }
.pos-card .up { color:var(--k163); }
.pos-card .down { color:var(--k281); }
@media (max-width:760px) { .pos-card { top:8px; left:8px; min-width:0; max-width:calc(100% - 16px); padding:10px 12px; } .pos-card .pnl { font-size:17px; } }

/* Busca/filtros reais da tela de mercados (o markup deixou de ser decorativo). */
.market-search input { flex:1; min-width:0; border:0; background:transparent; color:var(--k253); font:inherit; font-size:14px; outline:none; }
.market-search input::placeholder { color:var(--k180); }
.market-search:focus-within { border-color:var(--k347); }
.market-filters button { border:0; cursor:pointer; }
.market-filters button.active { color:var(--k42); background:var(--k253); }
[data-pred-banner] { margin-bottom:24px; }
.allocation-empty { margin:0; color:var(--k172); font-size:10px; }

/* Rede do Codebot: degrau intermediário — 5 cartões não cabem entre 761 e 1200px. */
@media (max-width:1200px) and (min-width:761px) { .codebot-net-stats { grid-template-columns:repeat(3,1fr); } }

/* Bottom-nav mobile: ícones SVG no mesmo traço do resto do app (antes eram glifos de texto). */
.mobile-bottom-nav i { display:grid; place-items:center; }
.mobile-bottom-nav i svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* Logos das moedas: substituem os glifos de texto nas listas. O <i> continua
   sendo a casa redonda; a arte preenche por dentro sem herdar o fundo claro
   que o glifo precisava para contrastar. */
i > .coin-icon { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.market-row i:has(.coin-icon),.table-row i:has(.coin-icon),.market-list-row i:has(.coin-icon),
.mobile-market-list i:has(.coin-icon),.asset-picker i:has(.coin-icon),.activity-grid i:has(.coin-icon),
.trade-pair i:has(.coin-icon) { background:transparent!important; border-color:transparent!important; padding:0; overflow:hidden; }

/* ── Painel de ordem (trade e futuros): compactação ────────────────────────
   O card media 616px para ~250px de conteúdo. O maior desperdício eram as
   linhas de resumo: `.wallet-fee-line` traz margin 13px em cima E embaixo, e
   com 4 linhas isso sozinho somava 104px de vazio. Somado a segmentos de
   42px, inputs de 39px e CTA de 44px, o formulário empurrava o card muito
   além do gráfico ao lado.

   Tudo aqui é ESCOPADO ao painel de ordem — `.wallet-fee-line` também é usada
   na carteira, onde o espaçamento largo faz sentido. */
.spot-order-card { gap:10px; padding:18px; }
.spot-order-card > header { margin-bottom:2px; }
.spot-order-card form { gap:9px; }

/* Segmentos (Comprar/Vender, Mercado/Limite): 42 → 32px. */
.spot-order-card .trade-segment { padding:2px; gap:2px; border-radius:7px; }
.spot-order-card .trade-segment button { min-height:26px; padding:0 8px; border-radius:5px; font-size:9px; }

/* Campos: 39 → 34px, com o rótulo colado. */
.spot-order-card label { gap:5px; font-size:8px; }
.spot-order-card input:not([type="range"]) { height:34px; padding:0 11px; font-size:12px; }
.spot-order-card .input-row { align-items:center; }
.spot-order-card .input-row .text-link { padding:0 10px; font-size:9px; }

/* Resumo: vira um bloco só, com as linhas justas em vez de 26px de margem
   cada. Rótulo à esquerda, valor à direita — leitura em coluna. */
.spot-order-card .wallet-fee-line {
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin:0; padding:5px 0; border-bottom:1px solid var(--k303);
  color:var(--k177); font:9px var(--mono);
}
.spot-order-card .wallet-fee-line:last-of-type { border-bottom:0; }
.spot-order-card .wallet-fee-line > span { display:contents; }
.spot-order-card .wallet-fee-line b { color:var(--k253); font:500 11px var(--mono); }

/* CTA: 44 → 36px. */
.spot-order-card button[type="submit"] { min-height:36px; padding:0 14px; font-size:10px; }
.spot-order-card .panel-hint { margin:0; font-size:9px; line-height:1.45; }

/* Alavancagem dos futuros acompanha a mesma escala. */
.spot-order-card input[type="range"] { height:22px; }

/* Alavancagem: o label é `ALAVANCAGEM · <b>5×</b><input range>`, e o texto solto
   não é elemento — vira item anônimo. Com `.spot-order-card form label` sendo
   flex-column (regra anterior, mais específica que a minha tentativa de grid),
   rótulo e valor empilhavam centralizados. Flex-wrap resolve sem brigar por
   especificidade: cabeçalho na primeira linha, range ocupando a segunda. */
.spot-order-card form label:has(input[type="range"]) {
  flex-flow:row wrap; align-items:baseline; justify-content:space-between;
}
.spot-order-card form label:has(input[type="range"]) b {
  color:var(--k253); font:500 11px var(--mono);
}
.spot-order-card form label:has(input[type="range"]) input[type="range"] {
  flex:1 0 100%; margin-top:2px;
}

/* ── Futuros: resumo dentro do card de ordem ───────────────────────────────
   Os dois cards de saldo (o balance-card gigante e o aside) saíram: o número
   que importa na hora de abrir posição é a margem livre, e ela agora fica
   junto do formulário. Transferir virou UM botão que abre o popup. */
.fut-balance { display:grid; grid-template-columns:repeat(2,1fr); gap:7px 14px; margin:2px 0 4px; padding:10px 0; border-block:1px solid var(--k306); }
.fut-balance span { display:flex; justify-content:space-between; align-items:baseline; gap:8px; color:var(--k177); font:9px var(--mono); }
.fut-balance b { color:var(--k253); font:500 11px var(--mono); }
.spot-order-card > header { display:flex; align-items:start; justify-content:space-between; gap:12px; }

/* ── Escala de botões da plataforma ────────────────────────────────────────
   Os botões vinham de tamanhos e raios diferentes por tela: CTA com padding
   11/14 e raio 3px (quadrado, destoa dos cards de raio 14-22), primary-link
   com 12/15, chips do codebot em 31px, filtros em 40px. A escala abaixo
   unifica altura, raio e peso — menor e consistente, mantendo o alvo tocável
   de 40px no toque (o encolhimento vale para o ponteiro, não para o dedo). */
:root {
  --btn-h:34px;          /* CTA e ações primárias */
  --btn-h-sm:27px;       /* segmentos, chips, filtros */
  --btn-r:9px;           /* raio, alinhado aos cards */
  --btn-ease:cubic-bezier(0.32,0.72,0,1);
}

.public-cta,
.primary-link {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:var(--btn-h); padding:0 15px;
  border-radius:var(--btn-r);
  font:600 10px var(--nav); letter-spacing:.06em;
  transition:background .2s var(--btn-ease),color .2s,transform .18s var(--btn-ease),box-shadow .2s;
}
.public-cta:active,.primary-link:active { transform:scale(.975); }
.public-cta.full,.primary-link.full { width:100%; }

/* Chips e segmentos: mesma família, um degrau abaixo. */
.trade-segment button,
.codebot-quick button,
.market-filters button {
  min-height:var(--btn-h-sm); border-radius:calc(var(--btn-r) - 3px);
  font:600 9px var(--nav); letter-spacing:.04em;
  transition:background .2s var(--btn-ease),color .2s var(--btn-ease);
}

.text-link { font:600 10px var(--nav); letter-spacing:.04em; }

/* Foco visível em TODO controle: navegação por teclado não pode ficar cega. */
.public-cta:focus-visible,.primary-link:focus-visible,.text-link:focus-visible,
.trade-segment button:focus-visible,.codebot-quick button:focus-visible,
.market-filters button:focus-visible,.mobile-icon-button:focus-visible {
  outline:2px solid var(--k260); outline-offset:2px;
}

/* Toque: o dedo precisa de 40px independente do encolhimento visual. */
@media (hover:none) and (pointer:coarse) {
  .public-cta,.primary-link { min-height:40px; }
  .trade-segment button,.codebot-quick button,.market-filters button { min-height:36px; }
}

/* ── Acabamento dos botões primários ──────────────────────────────────────
   Porte do MinimalButton (React/shadcn) pedido pelo dono. Este front é Go +
   CSS puro — não há Tailwind nem componentes React —, então o que veio do
   componente são as três características visuais, não o arquivo:

     1. trama diagonal a 315°, linha de 1px a cada 10px, a 5% de opacidade;
     2. sombra difusa e larga (10px de blur-spread) em vez de contorno;
     3. sem borda.

   A trama do original usa `--color-accent` sobre botão escuro. Aqui o CTA é
   CLARO sobre fundo escuro, então o risco precisa ser escuro para aparecer —
   `--btn-pattern` inverte por variante. */
.public-cta,
.primary-link {
  position:relative; isolation:isolate; overflow:hidden;
  border:0;
  --btn-pattern:var(--k0);
  box-shadow:0 10px 30px 10px var(--k305);
}
.public-cta::before,
.primary-link::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(315deg,var(--btn-pattern) 0,var(--btn-pattern) 1px,transparent 0,transparent 50%);
  background-size:10px 10px;
  opacity:.05;
}
/* Variantes escuras: o risco vira claro, senão some no próprio fundo. */
.public-cta.sell,
.primary-link.confirmed,
.primary-link.is-disabled { --btn-pattern:var(--k288); }
.primary-link.is-disabled { box-shadow:none; }

/* O halo acompanha o estado: cresce no hover, some no clique. */
.public-cta:hover,
.primary-link:hover { box-shadow:0 12px 34px 12px var(--k312); }
.public-cta:active,
.primary-link:active { box-shadow:0 6px 18px 6px var(--k303); }

@media (prefers-reduced-motion:reduce) {
  .public-cta,.primary-link { transition:none; }
  .public-cta:active,.primary-link:active { transform:none; }
}

/* ── Futuros: barra de métricas + card de ordem ────────────────────────────
   Layout pedido pelo dono a partir de uma tela de referência. Toda métrica
   aqui tem fonte viva (/market/funding, /market/candles, /pricing/tickers);
   campos sem fonte real — livro de ofertas, taxa, ordem limitada — ficaram
   deliberadamente de fora em vez de virar enfeite. */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.fut-metrics {
  display:flex; align-items:center; gap:18px;
  margin-bottom:16px; padding:12px 16px;
  background:var(--panel,var(--k34)); border:1px solid var(--line-soft,var(--k70));
  border-radius:14px;
}
.fut-metrics-head { display:flex; align-items:center; gap:14px; flex:none; }
.fut-metrics-pair select {
  background:var(--k366); border:1px solid var(--k373);
  border-radius:var(--btn-r,9px); padding:7px 10px;
  color:inherit; font:600 12px var(--nav); letter-spacing:.03em;
}
.fut-metrics-price { display:flex; flex-direction:column; gap:2px; }
.fut-metrics-price strong { font:600 19px var(--mono); color:var(--ink,var(--k270)); line-height:1; }
.fut-metrics-price span { font:500 11px var(--mono); }

/* Rolagem horizontal só na faixa de números: o corpo da página nunca rola
   de lado, mesmo com nove métricas num telefone estreito. */
.fut-metrics-grid {
  display:flex; gap:22px; flex:1; min-width:0;
  overflow-x:auto; scrollbar-width:none;
}
.fut-metrics-grid::-webkit-scrollbar { display:none; }
.fut-metrics-grid span {
  display:flex; flex-direction:column; gap:3px; flex:none;
  font:9px var(--nav); letter-spacing:.09em; color:var(--muted,var(--k156));
  white-space:nowrap;
}
.fut-metrics-grid b { font:500 12px var(--mono); color:var(--soft,var(--k204)); }
.fut-metrics-grid em, .fut-metrics-grid i { font-style:normal; }

/* Porcentagem do saldo e chips de alavancagem: mesma família dos segmentos. */
.fut-pct, .fut-lev-chips { display:grid; gap:6px; }
.fut-pct { grid-template-columns:repeat(4,1fr); }
.fut-lev-chips { grid-template-columns:repeat(auto-fit,minmax(48px,1fr)); }
.fut-pct button, .fut-lev-chips button {
  min-height:var(--btn-h-sm,27px); border-radius:calc(var(--btn-r,9px) - 3px);
  background:var(--k366); border:1px solid var(--k372);
  color:var(--soft,var(--k204)); font:600 9px var(--nav); letter-spacing:.04em;
  cursor:pointer; transition:background .2s var(--btn-ease),color .2s,border-color .2s;
}
.fut-pct button:hover, .fut-lev-chips button:hover { background:var(--k370); }
.fut-lev-chips button.active {
  background:var(--ink,var(--k270)); border-color:var(--ink,var(--k270)); color:var(--k22);
}
.fut-lev-head { font:11px var(--nav); letter-spacing:.08em; color:var(--muted,var(--k156)); }
.fut-lev-head b { color:var(--ink,var(--k270)); font:600 11px var(--mono); }

.fut-summary {
  display:grid; grid-template-columns:repeat(2,1fr); gap:7px 14px;
  padding:10px 0; border-block:1px solid var(--k306);
}
.fut-summary span {
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  color:var(--muted,var(--k156)); font:9px var(--nav); letter-spacing:.07em;
}
.fut-summary b { color:var(--soft,var(--k204)); font:500 11px var(--mono); }

/* ── Os dois botões ───────────────────────────────────────────────────────
   Mesmo acabamento do CTA da plataforma (trama 315°, halo difuso, sem borda),
   trocando só a cor pelas do tema. São dois `type=submit` no mesmo form: o
   lado sai do clique, não de um seletor separado — um passo a menos e sem
   estado escondido entre "o que está marcado" e "o que vai ser enviado". */
.fut-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.fut-side-btn {
  position:relative; isolation:isolate; overflow:hidden; border:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:46px; padding:8px 10px; border-radius:var(--btn-r,9px);
  font:600 11px var(--nav); letter-spacing:.05em; color:var(--k13);
  --btn-pattern:var(--k0);
  transition:filter .2s var(--btn-ease),transform .18s var(--btn-ease),box-shadow .2s;
}
.fut-side-btn::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(315deg,var(--btn-pattern) 0,var(--btn-pattern) 1px,transparent 0,transparent 50%);
  background-size:10px 10px; opacity:.07;
}
.fut-side-btn small { font:500 9px var(--mono); letter-spacing:0; opacity:.72; }
.fut-side-btn.long  { background:var(--market-up,var(--k93));   box-shadow:0 10px 30px 6px var(--k95); }
.fut-side-btn.short { background:var(--market-down,var(--k274)); box-shadow:0 10px 30px 6px var(--k276); color:var(--k66); }
.fut-side-btn:hover { filter:brightness(1.06); }
.fut-side-btn.long:hover  { box-shadow:0 12px 34px 8px var(--k97); }
.fut-side-btn.short:hover { box-shadow:0 12px 34px 8px var(--k277); }
.fut-side-btn:active { transform:scale(.975); }
.fut-side-btn:disabled { filter:grayscale(.6) brightness(.8); cursor:not-allowed; }
.fut-side-btn:focus-visible { outline:2px solid var(--k260); outline-offset:2px; }

@media (prefers-reduced-motion:reduce) {
  .fut-side-btn { transition:none; }
  .fut-side-btn:active { transform:none; }
}

/* Telefone: métricas viram duas faixas empilhadas e os botões ganham altura
   de alvo tocável. */
@media (max-width:900px) {
  .fut-metrics { flex-direction:column; align-items:stretch; gap:12px; padding:12px 14px; }
  .fut-metrics-head { justify-content:space-between; }
  .fut-metrics-grid { gap:18px; }
}
@media (hover:none) and (pointer:coarse) {
  .fut-side-btn { min-height:52px; }
  .fut-pct button, .fut-lev-chips button { min-height:36px; }
}

/* A tabela de posições tem CINCO células (mercado, tamanho, entrada, pnl,
   ação). `[data-fut-positions] .table-row` já dava as cinco colunas às
   LINHAS, mas o cabeçalho fica FORA desse container e caía na grade global de
   quatro — "AÇÃO" ia sozinha para uma segunda linha. Esta regra cobre os dois
   com a mesma medida, e precisa do peso de `.surface.asset-table .table-row`
   (0,3,0) para não perder para ela. No telefone sobram as três colunas que
   importam: qual posição, quanto rende e como fechar. */
.asset-table.fut-positions .table-row { grid-template-columns:1.2fr 1fr 1fr 1fr .8fr; }
@media (max-width:760px) {
  .asset-table.fut-positions .table-row { grid-template-columns:1.3fr 1fr .8fr; }
  .asset-table.fut-positions .table-row > *:nth-child(2),
  .asset-table.fut-positions .table-row > *:nth-child(3) { display:none; }
}

/* ── Popup de transferência ───────────────────────────────────────────────
   Era um grid de dois <select> soltos, um <small> com a frase inteira e um
   "Fechar ×" que parecia botão desabilitado. Agora o sentido é uma ROTA
   legível — origem, seta que inverte, destino — e o saldo vira uma linha de
   par rótulo/valor como no resto dos painéis. */
.modal-close {
  display:grid; place-items:center; flex:none;
  width:30px; height:30px; border-radius:50%;
  border:1px solid var(--k374); background:var(--k364);
  color:var(--soft,var(--k204)); font:400 17px/1 var(--font); cursor:pointer;
  transition:background .2s var(--btn-ease),color .2s,border-color .2s;
}
.modal-close:hover { background:var(--k371); color:var(--ink,var(--k270)); }
.modal-close:focus-visible { outline:2px solid var(--k260); outline-offset:2px; }

.xfer-route { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:10px; }
.xfer-leg { gap:6px; }
.xfer-leg > span { font-size:11px; letter-spacing:.08em; color:var(--muted,var(--k156)); }
/* O destino é consequência da origem, não uma segunda escolha. */
.xfer-route select[disabled] { opacity:1; color:var(--soft,var(--k204)); background:var(--k361); }
.xfer-swap {
  display:grid; place-items:center; flex:none;
  width:34px; height:44px; margin-bottom:0;
  border:1px solid var(--k373); border-radius:var(--btn-r,9px);
  background:var(--k366); color:var(--soft,var(--k204));
  font:400 15px/1 var(--font); cursor:pointer;
  transition:background .2s var(--btn-ease),color .2s,border-color .2s,transform .2s var(--btn-ease);
}
.xfer-swap:hover { background:var(--k371); color:var(--ink,var(--k270)); border-color:var(--k379); }
.xfer-swap:active { transform:scale(.94); }
.xfer-swap:focus-visible { outline:2px solid var(--k260); outline-offset:2px; }

.xfer-avail {
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin:0; padding:10px 0; border-block:1px solid var(--k306);
  color:var(--muted,var(--k156)); font:10px var(--nav); letter-spacing:.06em;
}
.xfer-avail b { color:var(--soft,var(--k204)); font:500 12px var(--mono); letter-spacing:0; }

/* O botão que abre o popup era um text-link e sumia no canto do card. */
.card-action {
  display:inline-flex; align-items:center; gap:6px; flex:none;
  min-height:var(--btn-h-sm,27px); padding:0 11px;
  border:1px solid var(--k374); border-radius:calc(var(--btn-r,9px) - 2px);
  background:var(--k364); color:var(--soft,var(--k204));
  font:600 9px var(--nav); letter-spacing:.06em; cursor:pointer;
  transition:background .2s var(--btn-ease),color .2s,border-color .2s;
}
.card-action:hover { background:var(--k371); color:var(--ink,var(--k270)); border-color:var(--k379); }
.card-action:focus-visible { outline:2px solid var(--k260); outline-offset:2px; }

/* A trama a 5% de preto sobre o CTA CLARO lia como hachura; sobre as
   variantes escuras (5% de branco) fica no ponto. */
.public-cta:not(.sell)::before { opacity:.035; }

@media (max-width:560px) {
  .xfer-route { grid-template-columns:1fr; }
  .xfer-swap { width:100%; height:34px; transform:rotate(90deg); }
  .xfer-swap:active { transform:rotate(90deg) scale(.94); }
}
@media (hover:none) and (pointer:coarse) {
  .card-action { min-height:36px; }
  .modal-close { width:38px; height:38px; }
}

/* MAX ficava com a cor de link (var(--k201)) sobre fundo transparente e lia como
   controle desabilitado — é um atalho útil, precisa parecer clicável. */
.input-row .text-link {
  background:var(--k366); border-color:var(--k374);
  color:var(--soft,var(--k204));
  transition:background .2s var(--btn-ease),color .2s,border-color .2s;
}
.input-row .text-link:hover {
  background:var(--k372); border-color:var(--k379);
  color:var(--ink,var(--k270));
}

/* ── /trade: abas de lado e barra de métricas ─────────────────────────────
   Comprar/Vender é ABA, não envio: no spot o campo muda de significado com o
   lado, então dois submits deixariam um "100" digitado como USDC ser enviado
   como 100 unidades da moeda. A cor identifica o lado ativo e o botão de
   envio a repete — mesma leitura das exchanges, sem a armadilha. */
.trade-side-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.trade-side-tabs button {
  min-height:36px; border-radius:var(--btn-r,9px);
  border:1px solid var(--k372); background:var(--k364);
  color:var(--muted,var(--k156)); font:600 10px var(--nav); letter-spacing:.06em;
  cursor:pointer;
  transition:background .2s var(--btn-ease),color .2s,border-color .2s;
}
.trade-side-tabs button:hover { background:var(--k369); color:var(--soft,var(--k204)); }
.trade-side-tabs button:focus-visible { outline:2px solid var(--k260); outline-offset:2px; }
.trade-side-tabs button:first-child.active {
  color:var(--market-up,var(--k93)); border-color:var(--k100); background:var(--market-up-soft,var(--k94));
}
.trade-side-tabs button:last-child.active {
  color:var(--market-down,var(--k274)); border-color:var(--k278); background:var(--market-down-soft,var(--k275));
}

/* O CTA do spot é um botão só, largo, que veste a cor do lado. */
.fut-side-btn.full { width:100%; flex-direction:row; gap:8px; }
.fut-side-btn.full b { font-size:13px; }

.trade-metrics .trade-pair { display:flex; align-items:center; gap:9px; flex:none; }
.trade-metrics .trade-pair i {
  display:grid; place-items:center; width:26px; height:26px; flex:none;
  border-radius:50%; color:var(--k42); background:var(--k253); font:14px var(--font); font-style:normal;
}
.trade-metrics .trade-pair b { display:block; font:600 12px var(--nav); }
.trade-metrics .trade-pair small { display:block; color:var(--muted,var(--k156)); font:9px var(--mono); }

@media (max-width:900px) {
  .trade-metrics .fut-metrics-head { flex-wrap:wrap; gap:10px; }
}
@media (hover:none) and (pointer:coarse) {
  .trade-side-tabs button { min-height:42px; }
}

/* ── Escada VIP (níveis do CodeBot) ───────────────────────────────────────
   Navegador in-place: a trilha V1–V6 e as setas mexem no MESMO painel, sem
   abrir seção nem modal. Abre no degrau acionável — quem está em V4 não é
   mandado de volta às tarefas do V1 — e um degrau já alcançado mostra só a
   confirmação: quatro "faltam X" num nível que a pessoa tem lê como bug,
   ainda mais quando o nível foi concedido e as exigências seguem abertas. */
.rank-cabeca { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.rank-trilha { display:flex; gap:5px; }
.rank-trilha button {
  min-width:34px; min-height:var(--btn-h-sm,27px); padding:0 8px;
  border:1px solid var(--k372); border-radius:calc(var(--btn-r,9px) - 3px);
  background:var(--k364);
  /* --muted sobre este fundo dá 4.04 de contraste, abaixo dos 4.5 que texto
     pequeno exige. --soft passa para 6.9 sem mudar a hierarquia. */
  color:var(--soft,var(--k204));
  font:600 10px var(--mono); cursor:pointer;
  transition:background .2s var(--btn-ease),color .2s,border-color .2s;
}
.rank-trilha button:hover { background:var(--k370); color:var(--soft,var(--k204)); }
/* Cor = estado alcançado. O anel de seleção é classe SEPARADA: juntos, num
   degrau conquistado o verde vencia e o clique não aparecia na trilha. */
.rank-trilha button.alcancado { color:var(--market-up,var(--k93)); border-color:var(--k98); background:var(--market-up-soft,var(--k94)); }
.rank-trilha button.concedido { border-style:dashed; }
.rank-trilha button.selecionado { outline:2px solid var(--ink,var(--k270)); outline-offset:1px; }
.rank-trilha button:focus-visible { outline:2px solid var(--k260); outline-offset:2px; }

.rank-degrau { margin-top:14px; padding:16px; border:1px solid var(--k310); border-radius:12px; background:var(--k361); }
.rank-degrau > header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rank-degrau-titulo { text-align:center; }
.rank-degrau-titulo b { display:block; font:600 17px var(--mono); letter-spacing:-.02em; color:var(--ink,var(--k270)); }
.rank-degrau-titulo small { display:block; margin-top:3px; color:var(--muted,var(--k156)); font:11px var(--nav); }
.rank-seta {
  display:grid; place-items:center; flex:none; width:30px; height:30px;
  border:1px solid var(--k373); border-radius:50%;
  background:var(--k364); color:var(--soft,var(--k204));
  font:400 17px/1 var(--font); cursor:pointer;
  transition:background .2s var(--btn-ease),color .2s,opacity .2s;
}
.rank-seta:hover:not(:disabled) { background:var(--k371); color:var(--ink,var(--k270)); }
.rank-seta:disabled { opacity:.3; cursor:default; }
.rank-seta:focus-visible { outline:2px solid var(--k260); outline-offset:2px; }

.rank-conquistado {
  margin:16px 0 0; padding:12px 14px; border-radius:9px;
  background:var(--market-up-soft,var(--k94)); color:var(--market-up,var(--k93));
  font:500 12px var(--nav); text-align:center;
}
.rank-tarefas { display:flex; flex-direction:column; gap:14px; margin-top:16px; }
.rank-tarefa > div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.rank-tarefa span { color:var(--soft,var(--k204)); font:12px var(--nav); }
.rank-tarefa b { color:var(--muted,var(--k156)); font:500 11px var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.rank-trilho { height:4px; margin:7px 0 5px; border-radius:3px; background:var(--k369); overflow:hidden; }
.rank-trilho i { display:block; height:100%; border-radius:3px; background:var(--soft,var(--k204)); transition:width .5s var(--btn-ease); }
.rank-tarefa small { color:var(--muted,var(--k156)); font:10px var(--nav); letter-spacing:.04em; }
.rank-tarefa.feita b, .rank-tarefa.feita small { color:var(--market-up,var(--k93)); }
.rank-tarefa.feita .rank-trilho i { background:var(--market-up,var(--k93)); }

@media (prefers-reduced-motion:reduce) { .rank-trilho i { transition:none; } }
@media (max-width:560px) { .rank-trilha { flex-wrap:wrap; } }
@media (hover:none) and (pointer:coarse) {
  .rank-trilha button { min-height:36px; }
  .rank-seta { width:38px; height:38px; }
}

/* ── /codebot: ações da posição ───────────────────────────────────────────
   Eram dois links de 12px de altura a 7px um do outro, e o de baixo ENCERRA
   a posição. Agora são botões com corpo, separados, e o destrutivo exige
   confirmação — o clique único era barato demais para uma ação que o vizinho
   não desfaz. */
.codebot-position-acoes { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.codebot-position .codebot-position-acoes button {
  justify-self:auto; min-height:30px; padding:0 11px;
  border:1px solid var(--k374); border-radius:calc(var(--btn-r,9px) - 2px);
  background:var(--k366); color:var(--soft,var(--k204));
  font:600 9px var(--nav); letter-spacing:.05em; text-decoration:none;
  transition:background .2s var(--btn-ease),color .2s,border-color .2s;
}
.codebot-position .codebot-claim {
  border-color:var(--k98); background:var(--market-up-soft,var(--k94)); color:var(--market-up,var(--k93));
}
.codebot-position .codebot-claim:hover { background:var(--k96); }
.codebot-position .codebot-encerrar:hover {
  border-color:var(--k278); background:var(--market-down-soft,var(--k275)); color:var(--market-down,var(--k274));
}
/* Armado = o próximo clique executa. A cor de perigo só aparece aqui, para
   que o estado seja impossível de confundir com o repouso. */
.codebot-position .codebot-encerrar.armado {
  border-color:var(--market-down,var(--k274)); background:var(--market-down,var(--k274)); color:var(--k66);
}
.codebot-position .codebot-position-acoes button:disabled { opacity:.5; cursor:default; }

/* Alvos que estavam abaixo do mínimo tocável. */
.codebot-plan-cta { min-height:34px; }
.codebot-overview-card a { display:inline-flex; align-items:center; min-height:26px; }

@media (hover:none) and (pointer:coarse) {
  .codebot-position .codebot-position-acoes button { min-height:40px; padding:0 14px; }
  .codebot-plan-cta { min-height:44px; }
  .codebot-overview-card a { min-height:36px; }
}

/* O histórico de trades ocupava 586px — mais que as posições ativas (219px),
   para mostrar operações de centavos. Agora rola dentro da própria caixa e
   as linhas ficam na densidade de extrato, não de destaque. */
.codebot-trades-rolagem { max-height:320px; overflow-y:auto; scrollbar-width:thin; }
.codebot-trades-rolagem::-webkit-scrollbar { width:6px; }
.codebot-trades-rolagem::-webkit-scrollbar-thumb { border-radius:3px; background:var(--k374); }
.codebot-trades-rolagem .table-row { min-height:42px; }
@media (max-width:760px) { .codebot-trades-rolagem { max-height:260px; } }

/* ── /codebot: ordem por estado ───────────────────────────────────────────
   A ordem do DOM serve a quem chega sem posição: saldo, oferta, como
   funciona. Quem já investiu quer o oposto — ver a posição antes da vitrine.
   `order` resolve sem duplicar markup nem mexer no HTML servido. */
.codebot-screen > * { order:5; }
/* O card do topo era .codebot-summary (dois cards); virou .codebot-hero.
   Sem atualizar esta linha ele caía no order:5 genérico e ia parar depois
   das estratégias — o saldo sumia do alto da tela. */
.codebot-screen > .codebot-hero { order:0; }
.codebot-screen > .codebot-plan-section { order:1; }
.codebot-screen > .howto-steps { order:2; }
.codebot-screen > .codebot-positions { order:3; }
.codebot-screen > .codebot-trades-resumo { order:4; }
.codebot-screen > .codebot-network { order:6; }

.codebot-screen[data-tem-posicao] > .codebot-positions { order:1; }
.codebot-screen[data-tem-posicao] > .codebot-plan-section { order:2; }
.codebot-screen[data-tem-posicao] > .codebot-trades-resumo { order:3; }
/* Com posição aberta, o "como funciona" já cumpriu o papel dele. */
.codebot-screen[data-tem-posicao] > .howto-steps { order:7; }

/* ── /codebot: card único do topo ─────────────────────────────────────────
   Eram dois cards lado a lado — capital de um lado, saldo e contagem do
   outro — que no telefone viravam dois blocos empilhados tratando do mesmo
   dinheiro. Agora é um só, com o número grande em cima e o contexto abaixo. */
.codebot-hero {
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:2px;
  padding:28px; border-radius:22px;
  background:radial-gradient(380px 220px at 88% 12%,var(--k91) 0%,transparent 66%),linear-gradient(148deg,var(--k65),var(--k25) 74%);
}
/* Só o conteúdo sobe de camada. `> *` pegava também elementos decorativos
   e os tirava do fluxo absoluto — dois orbs viraram 357px de altura morta. */
.codebot-hero > :not(.orb):not(.ui-spotlight) { position:relative; z-index:1; }
.codebot-hero-topo { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.codebot-hero-ativas { color:var(--muted,var(--k156)); font:9px var(--nav); letter-spacing:.1em; text-transform:uppercase; }
.codebot-hero-ativas b { color:var(--ink,var(--k270)); font:600 12px var(--mono); }
.codebot-hero h2 { margin:18px 0 4px; font:600 14px var(--font); color:var(--soft,var(--k204)); }
.codebot-hero > strong { display:block; font:700 clamp(38px,4.6vw,58px)/1 var(--display); letter-spacing:-3px; }
.codebot-hero > strong small { color:var(--muted,var(--k156)); font:11px var(--mono); letter-spacing:0; }
.codebot-hero-rend { margin:11px 0 0; color:var(--muted,var(--k156)); font:10px var(--mono); }
.codebot-hero-rend b { color:var(--market-up,var(--k93)); font-weight:500; }
.codebot-hero-linha {
  display:grid; grid-template-columns:1fr 1fr; gap:10px 22px;
  margin:20px 0 0; padding:14px 0; border-block:1px solid var(--k308);
}
.codebot-hero-linha span {
  display:flex; flex-direction:column; gap:5px;
  color:var(--muted,var(--k156)); font:9px var(--nav); letter-spacing:.09em; text-transform:uppercase;
}
.codebot-hero-linha b { color:var(--soft,var(--k204)); font:500 12px var(--mono); letter-spacing:0; text-transform:none; }
.codebot-hero-acoes { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.codebot-hero-acoes .public-cta { min-width:132px; }

/* ── Resumo das operações + modal ─────────────────────────────────────── */
.codebot-trades-resumo {
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:22px 24px;
}
.codebot-trades-resumo h2 { margin:6px 0 7px; font:700 21px var(--display); letter-spacing:-1px; }
.codebot-trades-resumo p { margin:0; color:var(--muted,var(--k156)); font:11px var(--mono); }
.codebot-trades-resumo p b { color:var(--soft,var(--k204)); font-weight:500; }
.codebot-trades-modal .wallet-modal-panel { width:min(760px,100%); }
.codebot-trades-modal .table-row { grid-template-columns:1.1fr 1fr .8fr 1fr; }

/* ── Sistema de pagamento da rede ─────────────────────────────────────────
   A tela dizia só "10% dos diretos, 5% dos indiretos" e a escada VIP
   aparecia como requisitos soltos — não ficava claro o que cada nível libera
   nem sobre quem se ganha. */
.codebot-pagamento { margin-top:20px; padding-top:18px; border-top:1px solid var(--k308); }
.codebot-pagamento-nota { margin:9px 0 16px; max-width:62ch; color:var(--muted,var(--k156)); font:11.5px/1.6 var(--font); }
.codebot-pagamento-nota b { color:var(--soft,var(--k204)); font-weight:600; }
.codebot-pagamento-grade { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.codebot-pagamento-grade article {
  display:flex; flex-direction:column; gap:5px;
  padding:16px; border:1px solid var(--k310); border-radius:14px;
  background:var(--k362);
}
.codebot-pagamento-grade span { color:var(--sussurro,var(--k129)); font:8px var(--nav); letter-spacing:.13em; }
.codebot-pagamento-grade b { font:700 27px var(--display); letter-spacing:-1.4px; color:var(--ink,var(--k270)); }
.codebot-pagamento-grade h4 { margin:2px 0 0; font:600 12px var(--font); color:var(--soft,var(--k204)); }
.codebot-pagamento-grade small { color:var(--muted,var(--k156)); font:10px/1.5 var(--font); }
.codebot-pagamento-grade small b { font:600 10px var(--font); letter-spacing:0; }
.codebot-pagamento-equipe { border-color:var(--k97); background:var(--market-up-soft,var(--k94)); }
.codebot-pagamento-equipe b { color:var(--market-up,var(--k93)); }
.codebot-pagamento-dif { margin:14px 0 0; max-width:70ch; color:var(--sussurro,var(--k129)); font:10.5px/1.6 var(--font); }
.codebot-pagamento-dif b { color:var(--muted,var(--k156)); font-weight:600; }

@media (max-width:760px) {
  .codebot-hero { padding:22px; border-radius:20px; }
  .codebot-hero > strong { font-size:40px; }
  .codebot-hero-acoes .public-cta, .codebot-hero-acoes .card-action { flex:1; justify-content:center; }
  .codebot-trades-resumo { padding:20px; }
  .codebot-trades-resumo .card-action { width:100%; justify-content:center; }
  .codebot-pagamento-grade { grid-template-columns:1fr; }
}

/* ── /codebot: cards de estratégia ────────────────────────────────────────
   Eram cinco blocos iguais com o mesmo peso tipográfico em tudo: o número
   grande competia com três linhas de detalhe do mesmo tamanho, e a regra que
   de fato decide a escolha — se o dinheiro sai quando se quer ou fica preso
   — estava na terceira delas. Agora a hierarquia é nome → selo de saída →
   número → apoio → ação. */
.codebot-plans { gap:10px; }
.codebot-plans button {
  display:flex; flex-direction:column; align-items:stretch; gap:0;
  min-height:0; padding:17px 16px 15px;
  border:1px solid var(--k310); border-radius:16px;
  background:linear-gradient(158deg,var(--k60),var(--k26) 72%);
  transition:transform .22s var(--btn-ease),border-color .22s,box-shadow .22s;
}
.codebot-plans button:hover { transform:translateY(-2px); border-color:var(--k333); box-shadow:0 14px 34px -18px var(--k0); }

.codebot-plan-cabeca { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.codebot-plans .codebot-plan-cabeca i {
  margin:0; font:600 10px var(--nav); font-style:normal; letter-spacing:.1em;
  color:var(--soft,var(--k204));
}
.codebot-plan-selo {
  flex:none; padding:3px 6px; border-radius:5px;
  font:600 8px var(--nav); font-style:normal; letter-spacing:.06em; white-space:nowrap;
}
.codebot-plan-selo.livre { color:var(--market-up,var(--k93)); background:var(--market-up-soft,var(--k94)); }
.codebot-plan-selo.travado { color:var(--muted,var(--k156)); background:var(--k367); }

.codebot-plans b {
  margin:20px 0 0; font:700 30px var(--display); letter-spacing:-1.6px;
  color:var(--ink,var(--k270)); line-height:1;
}
/* --muted dá 4.23 sobre o fundo do card, abaixo dos 4.5 de texto pequeno. */
.codebot-plans small { margin-top:4px; color:var(--soft,var(--k204)); font:10px var(--nav); letter-spacing:.05em; }

.codebot-plans u {
  display:flex; flex-direction:column; gap:4px; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--k308); text-decoration:none;
}
.codebot-plans u em {
  margin:0; color:var(--muted,var(--k156)); font:10px var(--mono); font-style:normal; line-height:1.4;
}

.codebot-plan-cta {
  display:flex; align-items:center; justify-content:center;
  margin-top:14px; min-height:32px; padding:0 12px;
  border:1px solid var(--k374); border-radius:9px;
  background:var(--k366); color:var(--soft,var(--k204));
  font:600 9px var(--nav); letter-spacing:.07em;
  transition:background .2s var(--btn-ease),color .2s,border-color .2s;
}
.codebot-plans button:hover .codebot-plan-cta { background:var(--k372); color:var(--ink,var(--k270)); }

/* Selecionado: anel e brilho em vez de inverter o card inteiro para branco.
   A inversão obrigava recolorir cada texto por dentro — e foi assim que as
   três linhas de detalhe ficaram com 1.47 de contraste. */
.codebot-plans button[aria-pressed="true"] {
  color:inherit; border-color:var(--k261);
  background:linear-gradient(158deg,var(--k78),var(--k51) 72%);
  box-shadow:0 0 0 1px var(--k261), 0 18px 40px -20px var(--k0);
}
.codebot-plans button[aria-pressed="true"] .codebot-plan-cta {
  background:var(--ink,var(--k270)); border-color:var(--ink,var(--k270)); color:var(--k22);
}
.codebot-plans button[aria-pressed="true"] u em { color:var(--soft,var(--k204)); }

@media (hover:none) and (pointer:coarse) { .codebot-plan-cta { min-height:40px; } }

/* O ciclo mais longo é o recomendado — melhor taxa mensal do produto. Ganha
   faixa e anel, mas o mesmo fundo dos outros: se o card recomendado também
   invertesse, brigaria com o estado "selecionado" e a pessoa não saberia
   qual dos dois sinais está lendo. */
.codebot-plans button.codebot-plan-recomendado {
  border-color:var(--k99);
  box-shadow:0 0 0 1px var(--k95), 0 16px 38px -22px var(--k98);
}
.codebot-plan-faixa {
  align-self:flex-start; margin-bottom:9px; padding:3px 7px; border-radius:5px;
  background:var(--market-up,var(--k93)); color:var(--k13);
  font:700 8px var(--nav); letter-spacing:.1em;
}
/* Selecionado vence o recomendado: é o estado que responde ao clique. */
.codebot-plans button.codebot-plan-recomendado[aria-pressed="true"] {
  border-color:var(--k261);
  box-shadow:0 0 0 1px var(--k261), 0 18px 40px -20px var(--k0);
}

/* ── Anúncio de produto em preparação ─────────────────────────────────────
   Usado por /prediction. O padrão anterior era listar o produto com um rodapé
   dizendo "abre em breve" — a vitrine falava mais alto que a ressalva. Aqui a
   ressalva É a tela, e as ações levam ao que já funciona. */
.em-breve {
  display:flex; flex-direction:column; align-items:flex-start; gap:0;
  padding:40px; border-radius:20px;
  background:radial-gradient(420px 240px at 82% 14%,var(--k79) 0%,transparent 68%),linear-gradient(150deg,var(--k55),var(--k25) 74%);
}
.em-breve-selo {
  padding:4px 9px; border-radius:6px;
  border:1px solid var(--k375); background:var(--k366);
  color:var(--soft,var(--k204)); font:700 8px var(--nav); letter-spacing:.14em;
}
.em-breve h2 { margin:20px 0 0; font:700 clamp(26px,3.4vw,38px)/1.05 var(--display); letter-spacing:-1.8px; }
.em-breve p { margin:13px 0 0; max-width:56ch; color:var(--muted,var(--k156)); font:13px/1.65 var(--font); }
.em-breve-acoes { display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }

@media (max-width:760px) {
  .em-breve { padding:26px; border-radius:18px; }
  .em-breve-acoes { width:100%; }
  .em-breve-acoes .public-cta, .em-breve-acoes .card-action { flex:1; justify-content:center; }
}

/* ── Pílula de copiar ─────────────────────────────────────────────────────
   Porte do CopyCode (React/shadcn) pedido pelo dono. Este front é Go + CSS
   puro, então o que veio do componente é o comportamento visual: o conteúdo
   sai com blur e leve redução, a confirmação entra desenhando o traço do
   check, e uma barra atravessa a pílula durante a espera. */
.copy-pill {
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 8px 0 18px;
  border:1px solid var(--k373); border-radius:999px;
  background:var(--k365);
}
.copy-pill-barra {
  position:absolute; z-index:0; left:0; top:0; bottom:0; width:0;
  background:var(--k368); opacity:0;
  transition:opacity .5s cubic-bezier(.4,0,.2,1);
}
.copy-pill.copiado .copy-pill-barra { opacity:1; }

/* As duas faces ocupam o mesmo espaço; só uma está visível por vez. */
.copy-pill-conteudo {
  position:absolute; z-index:2; inset:0;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 8px 0 18px;
  transition:opacity .5s cubic-bezier(.4,0,.2,1),filter .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1);
}
.copy-pill.copiado .copy-pill-conteudo {
  opacity:0; filter:blur(12px); transform:scale(.92); pointer-events:none; z-index:0;
}
.copy-pill-conteudo [data-copy-pill-valor] {
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  border:0; background:transparent; padding:0;
  color:var(--soft,var(--k204)); font:500 12px var(--mono);
}
.copy-pill-conteudo [data-copy-pill-valor]:focus-visible { outline:2px solid var(--k260); outline-offset:3px; }
.copy-pill-botao {
  flex:none; min-height:36px; padding:0 20px; border:0; border-radius:999px;
  background:var(--ink,var(--k270)); color:var(--k22);
  font:600 10px var(--nav); letter-spacing:.06em; cursor:pointer;
  transition:filter .25s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),box-shadow .25s;
  box-shadow:0 4px 14px -6px var(--k0);
}
.copy-pill-botao:hover { filter:brightness(1.05); box-shadow:0 8px 22px -8px var(--k0); }
.copy-pill-botao:active { transform:scale(.95); }
.copy-pill-botao:focus-visible { outline:2px solid var(--k260); outline-offset:2px; }

.copy-pill-ok {
  position:relative; z-index:1;
  display:flex; align-items:center; gap:10px;
  opacity:0; filter:blur(12px); transform:scale(1.08); pointer-events:none;
  transition:opacity .8s cubic-bezier(.4,0,.2,1),filter .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1);
}
.copy-pill.confirmado .copy-pill-ok { opacity:1; filter:blur(0); transform:scale(1); }
.copy-pill-ok i {
  display:grid; place-items:center; width:26px; height:26px; flex:none;
  border-radius:50%; background:var(--market-up,var(--k93));
}
.copy-pill-ok svg { width:14px; height:14px; }
.copy-pill-ok path {
  fill:none; stroke:var(--k13); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:24; stroke-dashoffset:24;
  transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1) .3s;
}
.copy-pill.confirmado .copy-pill-ok path { stroke-dashoffset:0; }
.copy-pill-ok span { color:var(--ink,var(--k270)); font:600 12px var(--nav); letter-spacing:.03em; }

/* Clipboard bloqueada: avisa em vez de comemorar o que não aconteceu. */
.copy-pill.falhou { border-color:var(--k278); }
.copy-pill.falhou .copy-pill-botao { background:var(--market-down,var(--k274)); color:var(--k66); }
.copy-pill.falhou .copy-pill-botao::after { content:" — selecione e copie"; }

@media (prefers-reduced-motion:reduce) {
  .copy-pill-conteudo,.copy-pill-ok,.copy-pill-ok path,.copy-pill-barra { transition:none; }
}
@media (max-width:560px) {
  .copy-pill { padding-left:14px; }
  .copy-pill-conteudo { padding-left:14px; }
  .copy-pill-botao { padding:0 15px; }
}
@media (hover:none) and (pointer:coarse) {
  .copy-pill { min-height:58px; }
  .copy-pill-botao { min-height:42px; }
}

/* ── Alternador de tema ───────────────────────────────────────────────────
   Porte do AnimatedThemeToggle (React/framer-motion). Sem React aqui, então
   o gesto foi refeito em CSS: o sol encolhe até sumir enquanto a lua cresce,
   e os traços são DESENHADOS via stroke-dashoffset em vez de simplesmente
   aparecerem. Mesma duração do original, 0,7s. */
.theme-toggle {
  display:grid; place-items:center; flex:none;
  width:34px; height:34px; padding:0;
  border:1px solid var(--ui-edge); border-radius:10px;
  background:transparent; color:var(--soft); cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.theme-toggle:hover { background:var(--ui-highlight); color:var(--ink); }
.theme-toggle:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
.theme-toggle svg { width:19px; height:19px; overflow:visible; }
.theme-toggle svg path {
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  /* 60 cobre o traço mais longo (o arco da lua) — abaixo disso o desenho
     começaria no meio do caminho em vez de na ponta. */
  stroke-dasharray:60; stroke-dashoffset:0;
  transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1),opacity .7s cubic-bezier(.4,0,.2,1);
}
.theme-toggle .theme-sol,
.theme-toggle .theme-lua {
  transform-origin:12.5px 12.5px;
  transition:transform .7s cubic-bezier(.4,0,.2,1);
}
/* Sem a classe: tema claro, sol desenhado e lua recolhida. */
.theme-toggle .theme-sol { transform:scale(1); }
.theme-toggle .theme-lua { transform:scale(0); stroke-dashoffset:60; opacity:0; }
/* Com a classe: troca quem está desenhado. */
.theme-toggle.escuro .theme-sol { transform:scale(0); }
.theme-toggle.escuro .theme-sol path { stroke-dashoffset:60; opacity:0; }
.theme-toggle.escuro .theme-lua { transform:scale(1); stroke-dashoffset:0; opacity:1; }

@media (prefers-reduced-motion:reduce) {
  .theme-toggle svg path,.theme-toggle .theme-sol,.theme-toggle .theme-lua { transition:none; }
}
@media (hover:none) and (pointer:coarse) { .theme-toggle { width:40px; height:40px; } }

/* ── Comprovante ──────────────────────────────────────────────────────────
   Porte do AnimatedTicket (React/shadcn). Sem React aqui, então o que veio
   do componente foram as características: o recorte lateral que faz o cartão
   parecer um tíquete destacado, as linhas tracejadas separando as seções, o
   código de barras derivado por hash do próprio identificador, o carimbo que
   entra em escala e a chuva de confete que dura poucos segundos.

   O bloco do cartão de crédito do original não existe neste contexto — no
   lugar dele ficam plano e moeda, que é o que se confere num comprovante da
   OFFCODE. */
.recibo-painel { width:min(400px,100%); }
.recibo {
  position:relative;
  border-radius:20px; background:var(--panel); color:var(--ink);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
  animation:recibo-entra .5s cubic-bezier(.4,0,.2,1) both;
}
@keyframes recibo-entra { from { opacity:0; transform:scale(.95); } to { opacity:1; transform:scale(1); } }

/* O recorte: dois círculos da cor do fundo mordendo as laterais. */
.recibo::before, .recibo::after {
  content:""; position:absolute; top:50%; width:30px; height:30px;
  border-radius:50%; background:var(--bg); transform:translateY(-50%);
}
.recibo::before { left:-15px; }
.recibo::after { right:-15px; }

.recibo > header { display:flex; flex-direction:column; align-items:center; text-align:center; padding:32px 30px 4px; }
.recibo-selo {
  display:grid; place-items:center; width:62px; height:62px; border-radius:50%;
  background:var(--market-up-soft); color:var(--market-up);
  animation:recibo-selo .5s cubic-bezier(.34,1.56,.64,1) .25s both;
}
@keyframes recibo-selo { from { opacity:0; transform:scale(.5); } to { opacity:1; transform:scale(1); } }
.recibo-selo svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.recibo > header h2 { margin:16px 0 0; font:600 20px var(--display); letter-spacing:-.6px; }
.recibo > header p { margin:6px 0 0; color:var(--muted); font:12px/1.5 var(--font); max-width:30ch; }

.recibo-corpo { display:flex; flex-direction:column; gap:18px; padding:22px 30px 28px; }
.recibo-tracejado { height:0; margin:0; border:0; border-top:2px dashed var(--line); }

.recibo-destaque { text-align:center; }
.recibo-destaque span { display:block; color:var(--muted); font:9px var(--nav); letter-spacing:.14em; }
.recibo-destaque b { display:block; margin-top:6px; font:700 30px var(--display); letter-spacing:-1.4px; }

.recibo-grade { display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.recibo-grade > div { display:flex; flex-direction:column; gap:4px; min-width:0; }
.recibo-grade span { color:var(--muted); font:9px var(--nav); letter-spacing:.12em; }
.recibo-grade b { font:500 11.5px var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* O identificador ocupa a linha inteira: cabe inteiro e é o que se copia
   quando se precisa falar de um comprovante específico. */
.recibo-codigo small { word-break:break-all; text-align:center; max-width:100%; letter-spacing:.12em; }

.recibo-codigo { display:flex; flex-direction:column; align-items:center; gap:6px; }
.recibo-codigo svg { width:100%; max-width:250px; height:56px; fill:var(--ink); }
.recibo-codigo small { color:var(--muted); font:10px var(--mono); letter-spacing:.22em; }

/* Confete: cai por alguns segundos e some. Fora do fluxo e sem captura de
   clique — nunca deve ficar entre a pessoa e o botão de fechar. */
.recibo-confete { position:fixed; z-index:0; inset:0; overflow:hidden; pointer-events:none; }
.recibo-confete i { position:absolute; width:7px; height:13px; opacity:0; animation-name:recibo-cai; animation-timing-function:linear; animation-fill-mode:forwards; }
@keyframes recibo-cai {
  0% { transform:translateY(-10vh) rotate(0deg); opacity:1; }
  100% { transform:translateY(110vh) rotate(720deg); opacity:0; }
}
.recibo-modal .wallet-modal-panel { z-index:2; }

@media (prefers-reduced-motion:reduce) {
  .recibo, .recibo-selo { animation:none; }
  .recibo-confete { display:none; }
}
@media (max-width:560px) {
  .recibo > header { padding:26px 22px 4px; }
  .recibo-corpo { padding:18px 22px 24px; }
  .recibo-destaque b { font-size:26px; }
}

/* ── Campo de código em casas ─────────────────────────────────────────────
   Porte do InputOTP (React/shadcn). O <input> original continua ali, apenas
   transparente por cima das casas: é ele que recebe foco, teclado, colagem e
   o autofill de código do SMS/e-mail. As casas são só o desenho. */
/* Largura pelo conteúdo: o wrapper não pode esticar até a borda do painel,
   senão o campo real fica clicável muito além das casas. */
.otp-campo { position:relative; display:inline-flex; align-items:center; width:max-content; }
/* `!important` aqui é deliberado: `.wallet-panel input` e `.auth-card input`
   têm especificidade maior e reimpõem cor, borda e fundo — era por isso que o
   valor do campo real aparecia por cima das casas. */
.otp-campo .otp-real {
  position:absolute !important; inset:0; z-index:2; width:100%; height:100%;
  padding:0 !important; margin:0 !important; border:0 !important;
  border-radius:0 !important; box-shadow:none !important;
  background:transparent !important; color:transparent !important;
  caret-color:transparent; font:inherit; letter-spacing:0; text-indent:-9999px;
}
.otp-campo .otp-real:focus,
.otp-campo .otp-real:focus-visible { outline:none !important; box-shadow:none !important; }
/* O texto some, mas a seleção nativa continuaria visível por trás das casas. */
.otp-real::selection { background:transparent; color:transparent; }

.otp-casas { display:flex; align-items:center; gap:0; pointer-events:none; }
.otp-casa {
  display:grid; place-items:center;
  width:38px; height:44px;
  border:1px solid var(--line); border-left-width:0;
  background:var(--panel-2);
  font:600 17px var(--mono); color:var(--ink);
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.otp-casa:first-child { border-left-width:1px; border-radius:9px 0 0 9px; }
.otp-casa:last-child { border-radius:0 9px 9px 0; }
/* O separador quebra a fileira em dois grupos de três, como no original. */
.otp-separador {
  width:16px; height:1px; margin:0 7px; flex:none;
  background:var(--muted);
}
.otp-separador + .otp-casa { border-left-width:1px; border-radius:9px 0 0 9px; }
.otp-casas .otp-casa:nth-last-child(1):not(:last-child) { border-radius:0 9px 9px 0; }
.otp-separador:has(+ .otp-casa) { }
/* A casa anterior ao separador fecha o grupo. */
.otp-casa:has(+ .otp-separador) { border-radius:0 9px 9px 0; }

.otp-casa.ativa {
  z-index:1; border-color:var(--ink);
  box-shadow:0 0 0 3px var(--ui-highlight);
}
/* Traço piscante só na casa ativa — o campo real esconde o cursor nativo. */
.otp-casa.ativa:empty::after {
  content:""; width:1px; height:18px; background:var(--ink);
  animation:otp-pisca 1s steps(2,start) infinite;
}
@keyframes otp-pisca { 0%,49% { opacity:1 } 50%,100% { opacity:0 } }

.otp-campo.focada .otp-casa { border-color:var(--line); }
.otp-campo.focada .otp-casa.ativa { border-color:var(--ink); }

@media (prefers-reduced-motion:reduce) { .otp-casa.ativa:empty::after { animation:none; } }
@media (max-width:400px) { .otp-casa { width:32px; height:40px; font-size:15px; } .otp-separador { margin:0 4px; width:10px; } }

/* ── Popup de confirmação por código ──────────────────────────────────────
   O código de segurança pede a atenção inteira. Pedi-lo no meio do
   formulário deixava a pessoa procurando onde o campo apareceu, com endereço
   e valor competindo pela vista. Aqui a tela mostra o que vai sair e espera
   só os seis dígitos. */
.confirmar-modal .wallet-modal-panel { width:min(420px,100%); }
.confirmar-painel { display:flex; flex-direction:column; gap:16px; }
.confirmar-resumo {
  margin:0; padding:12px 14px; border-radius:10px;
  background:var(--ui-highlight); border:1px solid var(--ui-edge);
  color:var(--soft); font:12px/1.5 var(--mono); word-break:break-all;
}
.confirmar-campo { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.confirmar-campo > span { color:var(--muted); font:9px var(--nav); letter-spacing:.12em; }
.confirmar-painel > small { color:var(--muted); font:11px/1.5 var(--font); margin-top:-6px; }
.confirmar-painel [data-wd-confirmar-erro] { margin:0; color:var(--market-down); font:11.5px var(--font); }

/* ── Depósito e saque em etapas ───────────────────────────────────────────
   Eram dois <select> lado a lado. O produto antigo pedia a escolha numa
   lista com ícone, nome e quantas redes a moeda aceita — o que evita a
   pergunta "qual dessas siglas é a minha?" na hora de mover dinheiro. */
.etapas { display:flex; flex-direction:column; gap:14px; }
.etapa { display:flex; flex-direction:column; gap:12px; }
.etapa-titulo { margin:0; color:var(--soft); font:13px var(--font); }
.etapa-titulo b { color:var(--ink); font-weight:600; }
.etapa-vazio { margin:0; padding:26px 0; text-align:center; color:var(--muted); font:12px var(--font); }

.etapa-busca { display:block; }
.etapa-busca input {
  width:100%; min-height:42px; padding:0 14px;
  border:1px solid var(--line); border-radius:11px;
  background:var(--panel-2); color:inherit; font:13px var(--font);
}
.etapa-busca input:focus-visible { outline:none; border-color:var(--soft); }

/* Lista rolável: com 19 ativos, a página inteira crescia e o botão de ação
   saía da vista. */
.etapa-lista { display:flex; flex-direction:column; max-height:320px; overflow-y:auto; scrollbar-width:thin; }
.etapa-item {
  display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:12px;
  width:100%; padding:11px 6px; border:0; border-bottom:1px solid var(--line-soft);
  background:transparent; color:inherit; text-align:left; cursor:pointer;
  transition:background .18s;
}
.etapa-item:hover { background:var(--ui-highlight); }
.etapa-item:focus-visible { outline:2px solid var(--ink); outline-offset:-2px; }
.etapa-item:last-child { border-bottom:0; }
.etapa-item > i {
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--panel-2); color:var(--soft); font:600 13px var(--mono); font-style:normal;
}
.etapa-item > i img, .etapa-item > i svg { width:100%; height:100%; border-radius:50%; }
.etapa-item > span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.etapa-item b { font:600 13px var(--font); }
.etapa-item small { color:var(--muted); font:11px var(--mono); }
.etapa-item > em { color:var(--muted); font:16px var(--font); font-style:normal; }

.etapa-aviso {
  margin:0; padding:11px 13px; border-radius:10px;
  border:1px solid #e8a33d3d; background:#e8a33d14;
  color:var(--soft); font:11.5px/1.55 var(--font);
}
.etapa-escolhido {
  padding:9px 12px; border-radius:9px;
  background:var(--ui-highlight); border:1px solid var(--ui-edge);
  color:var(--soft); font:600 11px var(--mono);
}
.etapa-qr { display:flex; justify-content:center; }
.etapa-qr canvas, .etapa-qr svg { width:172px; height:172px; padding:11px; border-radius:14px; background:#fff; }
.etapa-endereco { display:flex; flex-direction:column; gap:8px; }
.etapa-endereco .label b { color:var(--soft); }
.etapa-endereco .copy-pill { width:100%; }
.etapa-endereco [data-copy-pill-valor] { font-size:11px; }

@media (max-width:560px) {
  .etapa-lista { max-height:52vh; }
  .etapa-qr canvas, .etapa-qr svg { width:150px; height:150px; }
}

/* Seta de voltar no cabeçalho das etapas. */
.etapa-voltar {
  display:grid; place-items:center; flex:none;
  width:30px; height:30px; margin-right:2px;
  border:1px solid var(--ui-edge); border-radius:50%;
  background:transparent; color:var(--soft);
  font:400 18px/1 var(--font); cursor:pointer;
  transition:background .2s,color .2s;
}
.etapa-voltar:hover { background:var(--ui-highlight); color:var(--ink); }
.etapa-voltar:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
.wallet-panel > header { align-items:center; }
@media (hover:none) and (pointer:coarse) { .etapa-voltar { width:38px; height:38px; } }

/* QR do endereço de depósito. Fundo branco sempre — leitor de celular espera
   escuro sobre claro, e num tema escuro o QR invertido não é lido. */
.etapa-qr { display:grid; place-items:center; margin:0 auto 14px; }
.etapa-qr svg {
  width:170px; height:170px; display:block;
  border-radius:10px; background:#fff;
  box-shadow:0 0 0 6px #fff, 0 8px 24px rgba(0,0,0,.35);
}
.etapa-qr:empty { display:none; }
@media (max-width:420px) { .etapa-qr svg { width:142px; height:142px; } }

/* Barras de rolagem do fluxo de depósito/saque.
   `scrollbar-width:thin` sozinho não vale no Chrome: ele continua desenhando a
   barra clara padrão, que num painel escuro vira uma faixa branca grossa
   colada na lista. As duas regras precisam andar juntas. */
.etapa-lista::-webkit-scrollbar,
.wallet-modal-panel::-webkit-scrollbar { width:6px; height:6px; }
.etapa-lista::-webkit-scrollbar-track,
.wallet-modal-panel::-webkit-scrollbar-track { background:transparent; }
.etapa-lista::-webkit-scrollbar-thumb,
.wallet-modal-panel::-webkit-scrollbar-thumb { border-radius:3px; background:var(--k374); }
.etapa-lista::-webkit-scrollbar-thumb:hover,
.wallet-modal-panel::-webkit-scrollbar-thumb:hover { background:var(--soft); }
.wallet-modal-panel { scrollbar-width:thin; scrollbar-color:var(--k374) transparent; }
.etapa-lista { scrollbar-color:var(--k374) transparent; }

/* A pergunta da etapa precisa de ar antes da lista — sem isso ela cola no
   texto de ajuda acima e na primeira linha abaixo. */
.etapa-titulo { margin:10px 0 4px; font-size:14px; }
/* Corta no meio de uma linha de propósito: metade de item visível é o que diz
   que a lista rola. Cortar entre itens faz parecer que acabou ali. */
.etapa-lista { max-height:336px; }

/* Barra de rolagem da janela.
   Sem isto o Chrome desenha a barra clara do sistema encostada num app escuro
   — a faixa branca que aparecia ao lado dos modais era ela, não a do painel. */
html {
  scrollbar-width:thin;
  scrollbar-color:var(--k374) transparent;
  /* Reserva a calha: sem ela, travar o scroll ao abrir um modal some com a
     barra e a página inteira salta 15px para o lado. */
  scrollbar-gutter:stable;
}
html::-webkit-scrollbar { width:10px; height:10px; }
html::-webkit-scrollbar-track { background:transparent; }
html::-webkit-scrollbar-thumb { border-radius:5px; background:var(--k374); }
html::-webkit-scrollbar-thumb:hover { background:var(--soft); }

/* Modal aberto tem de travar a página atrás. `body{overflow:hidden}` sozinho
   não trava: o body continua crescendo com o conteúdo e quem rola é o <html>.
   Rolar por trás de um modal move o fundo e deixa a barra à mostra. */
html:has(> body.wallet-modal-open),
html:has(> body.sheet-open) { overflow:hidden; }

/* Aviso de formato do endereço de saque.
   Vermelho no campo e a frase logo abaixo, no lugar onde os olhos já estão —
   mensagem só no topo do formulário é lida depois de enviar. */
.campo-erro {
  display:block; margin-top:6px;
  color:var(--market-down); font:12px/1.45 var(--font);
}
.campo-erro[hidden] { display:none; }
.wallet-panel input.campo-invalido {
  border-color:var(--market-down);
  box-shadow:0 0 0 1px var(--market-down);
}

/* ── Formulário de saque ───────────────────────────────────────────────────
   A tela era uma pilha de <label> com <input> nu. Aqui a rota escolhida vira
   um cartão com a logo da rede, cada campo ganha caixa própria com a ação
   dentro dela, e taxa/líquido saem de uma linha de texto para um resumo onde
   o valor que a pessoa recebe é o maior número da tela — é o que ela confere
   antes de confirmar. */

.saque-rota {
  display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:12px;
  margin-bottom:18px; padding:12px 14px;
  border:1px solid var(--ui-edge); border-radius:14px;
  background:var(--panel-2);
}
.saque-rota > i { display:grid; place-items:center; width:38px; height:38px; font-style:normal; }
.saque-rota > i img { width:100%; height:100%; border-radius:50%; }
.saque-rota span { display:grid; gap:2px; min-width:0; }
.saque-rota b { color:var(--ink); font:650 15px var(--font); }
.saque-rota small {
  overflow:hidden; color:var(--soft); font:11px var(--mono);
  text-overflow:ellipsis; white-space:nowrap;
}
.saque-trocar {
  padding:7px 13px; border:1px solid var(--ui-edge); border-radius:999px;
  color:var(--ink); background:transparent; font:600 11px var(--font); cursor:pointer;
  transition:background .2s,border-color .2s;
}
.saque-trocar:hover { background:var(--line-soft); border-color:var(--ink); }
.saque-trocar:focus-visible { outline:2px solid currentColor; outline-offset:2px; }

.campo-bloco { display:grid; gap:7px; margin-bottom:16px; }
.campo-linha-topo { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.campo-linha-topo small { color:var(--soft); font:11px var(--mono); }
.wallet-panel .campo-rotulo {
  color:var(--ink); font:600 11px/1 var(--font);
  letter-spacing:.06em; text-transform:uppercase;
}

/* A caixa é quem mostra foco e erro — o input dentro dela fica sem borda, para
   a ação (Colar / MAX) parecer parte do mesmo campo e não um botão solto. */
.campo-caixa {
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:8px;
  padding:0 10px 0 14px;
  border:1px solid var(--ui-edge); border-radius:12px;
  background:var(--panel-2);
  transition:border-color .18s,box-shadow .18s;
}
.campo-caixa:focus-within { border-color:var(--ink); box-shadow:0 0 0 3px var(--ui-edge); }
.wallet-panel .campo-caixa input {
  min-width:0; height:48px; padding:0; border:0; border-radius:0;
  background:transparent; color:var(--ink); font:13px var(--mono);
}
.wallet-panel .campo-caixa input:focus { outline:none; box-shadow:none; }
.campo-caixa--valor input { font:600 19px var(--font); }
.campo-moeda { color:var(--soft); font:600 12px var(--mono); }

.campo-acao {
  flex:none; padding:6px 11px;
  border:1px solid var(--ui-edge); border-radius:8px;
  color:var(--ink); background:transparent;
  font:600 11px var(--font); letter-spacing:.04em; cursor:pointer;
  transition:background .2s;
}
.campo-acao:hover { background:var(--line-soft); border-color:var(--ink); }
.campo-acao:focus-visible { outline:2px solid currentColor; outline-offset:2px; }

/* Estados do endereço. O verde é discreto de propósito: confirma sem competir
   com o vermelho, que é o que precisa parar a pessoa. */
.campo-selo { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--market-up); }
.campo-selo[hidden] { display:none; }
.campo-selo svg { width:13px; height:13px; fill:none; stroke:var(--bg); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.campo-caixa:has(input.campo-invalido) { border-color:var(--market-down); }
.campo-caixa:has(input.campo-valido) { border-color:color-mix(in srgb,var(--market-up) 55%,transparent); }
.campo-dica { color:var(--soft); font:11px var(--mono); opacity:.75; }
.campo-dica:empty { display:none; }

.saque-resumo {
  display:grid; gap:9px; margin:0 0 18px; padding:14px;
  border:1px solid var(--ui-edge); border-radius:14px;
}
.saque-resumo > div { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.saque-resumo dt { color:var(--soft); font:12px var(--font); }
.saque-resumo dd { margin:0; color:var(--ink); font:600 13px var(--mono); }
.saque-resumo-total { padding-top:9px; border-top:1px dashed var(--ui-edge); }
.saque-resumo-total dt { color:var(--ink); font-weight:600; }
.saque-resumo-total dd { font-size:17px; }

@media (max-width:520px) {
  .saque-rota { gap:10px; padding:11px 12px; }
  .wallet-panel .campo-caixa input { height:46px; }
  .campo-caixa--valor input { font-size:17px; }
}

/* Valor em destaque — porte do Withdrawal Card (21st/kavikatiyar).
   No original o valor abre o cartão em text-4xl com o saldo disponível logo
   abaixo. Aqui ele não é centralizado: o formulário tem endereço e resumo
   alinhados à esquerda, e centralizar só o valor quebraria a coluna. O que veio
   do componente é a hierarquia — número grande, saldo em seguida, sem caixa em
   volta competindo com ele. */
.saque-valor { display:grid; gap:6px; margin-bottom:18px; }
.saque-valor-linha {
  display:flex; align-items:baseline; gap:9px;
  padding-bottom:9px; border-bottom:1px solid var(--ui-edge);
  transition:border-color .18s;
}
.saque-valor:focus-within .saque-valor-linha { border-color:var(--ink); }
.wallet-panel .saque-valor input {
  flex:1; min-width:0; height:auto; padding:0;
  border:0; border-radius:0; background:transparent;
  color:var(--ink); font:700 34px/1.15 var(--display); letter-spacing:-.02em;
}
.wallet-panel .saque-valor input:focus { outline:none; box-shadow:none; }
.saque-valor-moeda { flex:none; color:var(--soft); font:600 14px var(--mono); }
.saque-valor-rodape { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.saque-valor-rodape small { color:var(--soft); font:11px var(--mono); }

/* Check do endereço válido. O original anima com spring (stiffness 400,
   damping 20); sem framer-motion, a curva abaixo é a aproximação que dá o
   mesmo passar-do-ponto-e-voltar. */
.campo-selo {
  animation:selo-entra .34s cubic-bezier(.34,1.56,.64,1);
}
@keyframes selo-entra {
  from { transform:scale(.5); opacity:0; }
  to { transform:scale(1); opacity:1; }
}
@media (prefers-reduced-motion:reduce) { .campo-selo { animation:none; } }

/* Botão de ação no formato do componente: alto, bem arredondado, peso forte. */
.wallet-panel form[data-wallet-withdraw-form] .public-cta.full {
  height:54px; border-radius:14px; font-weight:700; letter-spacing:.01em;
}
@media (max-width:520px) {
  .wallet-panel .saque-valor input { font-size:29px; }
}

/* Ajustes medidos na tela, não no olho:
   - o rótulo em `--soft` batia 4.23 de contraste, abaixo dos 4.5 que AA pede
     para texto pequeno;
   - Colar / MAX / Trocar ficavam com 27px de altura. No mouse não incomoda; no
     dedo, 44px é o mínimo para não errar o toque — e errar o toque aqui é
     colar endereço errado ou disparar MAX sem querer. */
/* Três armadilhas medidas aqui: `--muted` é MAIS escuro que `--soft`;
   opacidade sobre `--ink` derruba o contraste em vez de só aliviar o peso (a
   primeira tentativa levou o rótulo de 4.23 para 2.68); e `.campo-rotulo`
   sozinho perde para `.wallet-panel label`, que tem especificidade maior — por
   isso a cor do rótulo mora na regra com `.wallet-panel` na frente. */
.saque-valor-rodape small, .saque-resumo dt { color:var(--soft); }
@media (hover:none) and (pointer:coarse) {
  .campo-acao, .saque-trocar { min-height:44px; padding-inline:16px; }
  .campo-caixa { grid-template-columns:1fr auto auto; padding-right:8px; }
}

/* ── Lista da rede (/codebot) ──────────────────────────────────────────────
   Fechada por padrão e carregada só ao abrir: numa rede de centenas de nomes,
   trazer tudo no load faria quem entrou para investir esperar por uma lista
   que talvez nem olhe. */
.codebot-net-people { margin-top:16px; }
.rede-abrir {
  display:flex; align-items:center; gap:12px; width:100%;
  padding:14px 16px; border:1px solid var(--ui-edge); border-radius:14px;
  color:var(--ink); background:transparent; cursor:pointer;
  transition:background .2s,border-color .2s;
}
.rede-abrir:hover { background:var(--panel-2); border-color:var(--ink); }
.rede-abrir:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.rede-abrir b { margin-left:auto; color:var(--soft); font:600 12px var(--mono); }
.rede-abrir em { color:var(--soft); font:16px/1 var(--font); font-style:normal; transition:transform .22s var(--ui-ease); }
.rede-abrir[aria-expanded="true"] em { transform:rotate(90deg); }

.rede-corpo { display:grid; gap:12px; margin-top:12px; }
.rede-busca input {
  width:100%; height:42px; padding:0 14px;
  border:1px solid var(--ui-edge); border-radius:11px;
  color:var(--ink); background:var(--panel-2); font:12px var(--mono);
}
.rede-filtros { display:flex; flex-wrap:wrap; gap:7px; }
.rede-filtros:empty { display:none; }
.rede-filtro {
  padding:7px 12px; border:1px solid var(--ui-edge); border-radius:999px;
  color:var(--soft); background:transparent; font:600 11px var(--font); cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
}
.rede-filtro:hover { color:var(--ink); border-color:var(--ink); }
.rede-filtro.ativo { color:var(--bg); background:var(--ink); border-color:var(--ink); }
.rede-filtro:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }

/* A tabela rola sozinha na horizontal: cinco colunas de números não cabem num
   celular, e deixar a PÁGINA rolar de lado quebra o resto da tela. */
.rede-tabela-rolagem { overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--k374) transparent; }
.rede-tabela-rolagem::-webkit-scrollbar { height:6px; }
.rede-tabela-rolagem::-webkit-scrollbar-thumb { border-radius:3px; background:var(--k374); }

/* Grade ordenável — porte do Sortable Table (21st/ddoemonn).
   Cinco colunas fixas, iguais no cabeçalho e nas linhas. */
.rede-grade { --rede-cols:minmax(210px,1.5fr) 58px minmax(96px,.9fr) minmax(112px,1fr) minmax(100px,.9fr) minmax(118px,1fr); min-width:790px; }
.rede-cabeca {
  display:grid; grid-template-columns:var(--rede-cols); gap:0 10px;
  align-items:center; height:36px; border-bottom:1px solid var(--ui-edge);
}
.rede-cabeca button {
  display:flex; align-items:center; gap:5px; width:100%; height:28px;
  padding:0 4px; border:0; border-radius:6px;
  color:var(--soft); background:transparent;
  font:600 10px var(--font); letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; transition:color .18s;
}
/* Números alinham à direita, e a seta acompanha o lado do texto. */
.rede-cabeca div:not(:first-child) button { flex-direction:row-reverse; }
.rede-cabeca button:hover { color:var(--ink); }
.rede-cabeca button:focus-visible { outline:2px solid var(--ink); outline-offset:1px; }
.rede-cabeca button.ativa { color:var(--ink); }
/* A seta só aparece na coluna ativa: cinco setas cinzentas não dizem qual
   ordenação está valendo. */
.rede-cabeca button i {
  display:grid; place-items:center; width:10px; height:10px; flex:none;
  opacity:0; transform:scale(.72);
  transition:opacity .18s,transform .22s var(--ui-ease);
}
.rede-cabeca button i svg {
  width:9px; height:9px;
  fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.rede-cabeca button.ativa i { opacity:1; transform:scale(1); }
.rede-cabeca button.ativa.desc i { transform:scale(1) rotate(180deg); }

/* Teto de altura com rolagem própria. Sem ele a lista cresce sem limite —
   500 pessoas viram 26.000px e a página inteira passa de 29.000px, com o
   resto do /codebot empurrado para fora de alcance. Com o teto, a página
   volta a ~3.600px e a lista rola por dentro. */
.rede-linhas {
  position:relative; max-height:520px; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--k374) transparent;
  transition:height .3s var(--ui-ease);
}
.rede-linhas::-webkit-scrollbar { width:6px; }
.rede-linhas::-webkit-scrollbar-thumb { border-radius:3px; background:var(--k374); }
.rede-linha {
  position:absolute; inset-inline:0; top:0;
  display:grid; grid-template-columns:var(--rede-cols); gap:0 10px;
  align-items:center; height:52px; padding:0 4px;
  color:var(--ink); font:12px var(--mono);
  transition:transform .34s var(--ui-ease);
}
.rede-linha > div { text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rede-c-pessoa {
  display:flex; align-items:center; gap:8px; min-width:0;
  font-family:var(--font); text-align:left !important;
}
.rede-c-pessoa > span { display:grid; gap:2px; min-width:0; }
.rede-c-pessoa b { overflow:hidden; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }

/* Identificador logo abaixo do e-mail: é ele que separa duas contas quando o
   texto mascarado é o mesmo. Abreviado para não roubar a linha inteira; o
   valor completo vai no title, e o clique copia. */
.rede-uid {
  justify-self:start; padding:0; border:0;
  color:var(--muted); background:transparent;
  font:10px var(--mono); letter-spacing:.02em; cursor:pointer;
  transition:color .18s;
}
.rede-uid:hover { color:var(--ink); text-decoration:underline; }
.rede-uid:focus-visible { outline:2px solid var(--ink); outline-offset:2px; border-radius:3px; }
.rede-uid.copiado { color:var(--market-up); }

/* Divisórias desenhadas por trás das linhas; somem durante o movimento para
   não cortarem a linha no meio do caminho. */
.rede-linhas::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(
    to bottom, transparent 0, transparent 51px, var(--line-soft) 51px, var(--line-soft) 52px
  );
  transition:opacity .25s var(--ui-ease);
}
.rede-grade.movendo .rede-linhas::before { opacity:0; transition-duration:.12s; }

@media (prefers-reduced-motion:reduce) {
  .rede-linha, .rede-linhas, .rede-cabeca button i, .rede-linhas::before { transition:none; }
}

.rede-vip {
  padding:2px 7px; border-radius:999px;
  color:var(--bg); background:var(--ink);
  font:700 9px var(--mono); font-style:normal; flex:none;
}
/* Quem gerou comissão fica marcado: é a coluna que responde "quem produz". */
.rede-gerou { color:var(--soft); }
.rede-gerou.tem { color:var(--market-up); font-weight:600; }
.rede-vazio, .rede-nota { margin:0; color:var(--soft); font:11px/1.5 var(--font); }
.rede-nota { color:var(--market-up); }

}

/* ── Convert: pernas de envio/recebimento ──────────────────────────────────
   Reusa os tokens do `.convert-field` que já existia (mesma borda, mesmo
   gradiente, mesma tipografia de rótulo) — o objetivo é a tela ficar melhor,
   não introduzir uma segunda linguagem visual na mesma página. */
.cv-leg {
  display:grid; gap:10px; padding:14px 16px 16px; margin-top:12px;
  border:1px solid var(--k333); border-radius:14px;
  background:linear-gradient(135deg,var(--k58),var(--k23));
}
.cv-leg-head {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  color:var(--k159); font:8px var(--mono); letter-spacing:1px;
}
.cv-leg-head small { color:var(--k158); font:9px var(--mono); letter-spacing:0; }
.cv-leg-body { display:flex; align-items:center; justify-content:space-between; gap:14px; }

/* O valor é o protagonista da linha: fonte de display, tabular para os
   dígitos não dançarem quando o preço muda, e `min-width:0` para o flex
   poder encolher em vez de estourar a caixa num número longo. */
.cv-leg input,
.cv-leg strong {
  flex:1; min-width:0;
  border:0; background:transparent; color:var(--k253);
  font:600 30px/1.1 var(--display); letter-spacing:-1px;
  font-variant-numeric:tabular-nums;
}
.cv-leg input { width:100%; outline:none; }
.cv-leg input::placeholder { color:var(--k159); }
.cv-leg strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Verde é sinal de resultado, não decoração: enquanto não há cotação o
   número fica apagado como o placeholder do lado de envio. Sem isto o `—`
   inicial virava um traço verde solto no meio do card. */
.cv-leg--to strong { color:var(--k159); }
.cv-leg--to strong.tem-valor { color:var(--market-up); }

.cv-leg-side { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.cv-leg-side select {
  height:38px; padding:0 10px;
  border:1px solid var(--k326); border-radius:10px;
  color:var(--k253); background:var(--k74);
  font:600 13px var(--mono); cursor:pointer;
}
.cv-max {
  height:26px; padding:0 10px;
  border:1px solid var(--k325); border-radius:8px;
  color:var(--k204); background:transparent;
  font:8px var(--mono); letter-spacing:1px; cursor:pointer;
}
.cv-max:hover { color:var(--k253); border-color:var(--k353); }

/* Trilho de expiração. A cotação vale 10 s: um contador em texto se perde,
   uma barra drenando comunica urgência sem exigir leitura. A transição
   linear de 0,5 s casa com o tique do JS e deixa o esvaziamento contínuo. */
.cv-ttl {
  height:3px; margin-bottom:12px; overflow:hidden;
  border-radius:2px; background:var(--k80);
}
.cv-ttl i {
  display:block; width:100%; height:100%;
  border-radius:2px; background:var(--market-up);
  transition:width .5s linear, background-color .3s ease;
}
.cv-ttl.is-urgente i { background:var(--market-down); }

body[data-page="convert"] .convert-quote-box { padding-top:14px; }

/* ═══ /login e telas de auth — passada de acabamento ══════════════════════
   O bloco de auth foi escrito antes do sistema de tokens e ficou preso em
   valores soltos: rótulo a 8px, campo com raio 3px (o resto do produto usa
   9–10px), o link de voltar na MESMA linha do eyebrow e o widget da
   Cloudflare solto no meio do formulário. No tema claro o botão saía
   verde-oliva. Aqui a tela é realinhada ao resto do produto SEM mexer no
   HTML — a estrutura continua a mesma, só o desenho muda.

   As variáveis locais existem porque campo e CTA precisam inverter de forma
   diferente da paleta global: no claro o campo tem de ser MAIS claro que o
   fundo (branco), não mais escuro, senão lê como campo desabilitado. */
.auth-page {
  --auth-field-bg:var(--panel-2);
  --auth-field-line:var(--line);
  --auth-field-line-hover:var(--k347);
  --auth-ring:rgba(255,255,255,.10);
}
/* No claro o campo tem de ser MAIS claro que o fundo, não mais escuro: com
   --panel-2 ele saía cinza sobre cinza e lia como campo desabilitado. */
:root[data-theme="light"] .auth-page {
  --auth-field-bg:#fff;
  --auth-field-line:rgba(0,0,0,.14);
  --auth-field-line-hover:rgba(0,0,0,.28);
  --auth-ring:rgba(0,0,0,.07);
}

/* `position:relative` explícito: é o que ancora o popup de 2FA. Hoje o app.js
   também carimba `.ui-polish--anchor` aqui, mas depender de JS para o popup
   não escapar para o <body> seria frágil. */
.auth-page .auth-card { position:relative; padding:34px 0; }

/* O "← Voltar para a home" era inline-block e o eyebrow inline: os dois caíam
   na mesma linha e o topo da tela lia "Voltar para a home BEM-VINDO DE VOLTA".
   Cada um na sua linha, com o eyebrow virando rótulo do bloco. */
.auth-page .auth-back {
  display:flex; align-items:center; gap:7px;
  width:max-content; margin-bottom:30px; padding:7px 12px 7px 10px;
  border:1px solid var(--line-soft); border-radius:999px;
  color:var(--soft); font:500 10px var(--nav); letter-spacing:.06em;
  transition:color .2s var(--ease-premium),border-color .2s var(--ease-premium);
}
.auth-page .auth-back:hover { color:var(--ink); border-color:var(--line); }

.auth-page .auth-card .eyebrow {
  display:block; margin-bottom:14px;
  color:var(--muted); font:10px var(--mono); letter-spacing:.16em;
}
/* -2px em 41px fecha demais o "tt" de "Entrar" no Inter. */
.auth-page .auth-card h1 { margin:0 0 10px; letter-spacing:-1.4px; }
.auth-page .auth-card>p { margin:0 0 26px; color:var(--soft); font-size:12.5px; line-height:1.5; }

/* Rótulo a 8px era ilegível — o próprio CSS já impõe um piso de 11px no
   mobile por causa disso; aqui o piso vale em qualquer largura. */
.auth-page .auth-card form { gap:16px; }
.auth-page .auth-card label {
  gap:9px; margin-top:0;
  color:var(--muted); font:10px var(--mono); letter-spacing:.12em;
}

/* `:not(.otp-real)` é obrigatório: o campo do código de 6 dígitos vira um
   input transparente por cima das casas desenhadas, e qualquer altura ou
   fundo aplicado nele reaparece por cima do desenho. */
.auth-page .auth-card input:not([type="checkbox"]):not(.otp-real) {
  height:48px; padding:0 14px;
  border:1px solid var(--auth-field-line); border-radius:9px;
  background:var(--auth-field-bg); color:var(--ink);
  font:13px var(--font);
}
.auth-page .auth-card input:not([type="checkbox"]):not(.otp-real)::placeholder { color:var(--muted); }
.auth-page .auth-card input:not([type="checkbox"]):not(.otp-real):hover { border-color:var(--auth-field-line-hover); }
.auth-page .auth-card input:not([type="checkbox"]):not(.otp-real):focus,
.auth-page .auth-card input:not([type="checkbox"]):not(.otp-real):focus-visible {
  outline:none; border-color:var(--ink); box-shadow:0 0 0 3px var(--auth-ring);
}
/* O autofill do Chrome pinta o campo de azul-claro e apaga o desenho inteiro. */
.auth-page .auth-card input:-webkit-autofill,
.auth-page .auth-card input:-webkit-autofill:hover,
.auth-page .auth-card input:-webkit-autofill:focus {
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 60px var(--auth-field-bg) inset;
  caret-color:var(--ink);
}

/* ── 2FA em popup ─────────────────────────────────────────────────────────
   Ancorado NO CARD do login, não na tela: o scrim cobre só o formulário (que
   é o que a pessoa está olhando) e o resto da página segue visível. O bloco
   continua dentro do <form> — só sai do fluxo visual, não do formulário.

   `inset` negativo no topo/laterais: o card não tem padding lateral, então
   sem essa folga o scrim encostaria exatamente nas bordas do texto e leria
   como um retângulo colado, não como uma camada por cima. */
.auth-2fa {
  position:absolute; z-index:5; inset:-14px -18px;
  display:grid; place-items:center;
}
.auth-2fa[hidden] { display:none; }
.auth-2fa-scrim {
  position:absolute; inset:0;
  border:0; border-radius:16px;
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(5px);
  cursor:default;
}
.auth-2fa-panel {
  position:relative; z-index:1;
  display:grid; gap:14px;
  width:100%; padding:24px 22px;
  border:1px solid var(--line); border-radius:16px;
  background:var(--panel); box-shadow:0 26px 70px rgba(0,0,0,.5);
  /* Keyframes próprios: o `ui-dialog-in` do sistema termina em
     translate(-50%,-50%) porque foi escrito para diálogo centrado por
     left/top:50%. Aqui a centragem é do grid, e aquele transform jogava o
     painel meia-caixa para cima e para a esquerda — e ficava, por causa do
     fill `both`. */
  animation:auth-2fa-in .26s var(--ui-ease) both;
}
@keyframes auth-2fa-in {
  from { opacity:0; transform:translateY(12px) scale(.985); }
  to { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce) {
  .auth-2fa-panel { animation:none; }
}
:root[data-theme="light"] .auth-2fa-panel { box-shadow:0 22px 50px rgba(0,0,0,.16); }
.auth-2fa-panel header { display:flex; align-items:start; justify-content:space-between; gap:16px; }
.auth-2fa-panel .eyebrow { display:block; margin-bottom:8px; color:var(--muted); font:10px var(--mono); letter-spacing:.16em; }
.auth-2fa-panel h2 { margin:0; font:700 24px var(--display); letter-spacing:-1px; }
.auth-2fa-close {
  display:grid; place-items:center; flex:0 0 auto;
  width:34px; height:34px;
  border:1px solid var(--line); border-radius:50%;
  color:var(--soft); background:transparent; font-size:22px; line-height:1; cursor:pointer;
  transition:color .2s var(--ease-premium),border-color .2s var(--ease-premium);
}
.auth-2fa-close:hover { color:var(--ink); border-color:var(--soft); }
.auth-2fa-panel label { margin-top:0; }
.auth-2fa-panel small { margin-top:0; color:var(--muted); font-size:11.5px; text-align:left; }
.auth-2fa-panel .full { margin-top:2px; }
/* O campo de 6 casas ocupa a largura do painel em vez de ficar encolhido à
   esquerda (o .otp-campo nasce com width:max-content). */
.auth-2fa-panel .otp-campo { width:100%; }
.auth-2fa-panel .otp-casas { width:100%; }
.auth-2fa-panel .otp-casa { flex:1; }
@media (max-width:560px) {
  .auth-2fa { inset:-12px -14px; }
  .auth-2fa-panel { padding:20px 16px; }
  .auth-2fa-panel h2 { font-size:21px; }
}

/* O widget da Cloudflare é um iframe de ~300×65 que não aceita estilo nosso.
   Sem moldura ele fica um retângulo estrangeiro encostado na senha; dentro de
   uma caixa com a mesma borda dos campos, passa a ser parte do formulário. */
.auth-page [data-turnstile-slot]:not(:empty) {
  display:flex; justify-content:center;
  padding:10px; border:1px solid var(--line-soft); border-radius:11px;
  background:var(--panel);
}

/* Erro: era um <p> solto em vermelho no meio do formulário. */
.auth-page [data-auth-error]:not([hidden]) {
  margin:0; padding:11px 13px;
  border:1px solid color-mix(in srgb,var(--market-down) 45%,transparent);
  border-radius:9px;
  background:color-mix(in srgb,var(--market-down) 12%,transparent);
  color:var(--market-down); font-size:12px; line-height:1.45;
}

.auth-page .forgot {
  margin-top:2px; font:11px var(--font); letter-spacing:0;
  color:var(--soft); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--line);
  transition:color .2s var(--ease-premium),text-decoration-color .2s var(--ease-premium);
}
.auth-page .forgot:hover { color:var(--ink); text-decoration-color:currentColor; }

/* O CTA continua sendo o .public-cta do sistema (mesma cor do "Criar conta" do
   header) — aqui só a altura e o raio acompanham os campos. */
.auth-page .auth-card .full {
  height:50px; margin-top:6px; border-radius:9px;
  font:700 12px var(--nav); letter-spacing:.02em;
  box-shadow:0 10px 26px color-mix(in srgb,var(--k262) 22%,transparent);
}

.auth-page .auth-card small { margin-top:20px; color:var(--muted); font-size:11.5px; }
.auth-page .auth-card small a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* ── Painel da direita ────────────────────────────────────────────────────
   Os dois anéis do original eram `position:absolute` SEM offset: paravam na
   posição estática do flex, fora do centro, e o `rotateX(60deg)` os achatava
   em elipses que cortavam a frase no meio. Somado ao `box-shadow:0 0 0 70px`,
   virava um disco chapado — no tema claro, uma mancha cinza.

   Aqui os mesmos dois pseudoelementos viram círculos concêntricos de verdade,
   centrados atrás do conteúdo, sobre uma malha de pontos e uma vinheta que
   dão profundidade sem pintar bloco. Nenhuma linha de HTML mudou. */
.auth-page .auth-art {
  border-left:1px solid var(--line-soft);
  background:
    radial-gradient(circle at 50% 44%,var(--panel) 0%,transparent 58%),
    radial-gradient(var(--line-soft) 1px,transparent 1px);
  background-size:auto,27px 27px;
}
.auth-page .auth-art::before,
.auth-page .auth-art::after {
  top:50%; left:50%;
  border-color:var(--line-soft); border-radius:50%;
  transform:translate(-50%,-50%);
}
.auth-page .auth-art::before { width:min(520px,78%); aspect-ratio:1; height:auto; }
.auth-page .auth-art::after {
  width:min(330px,50%); aspect-ratio:1; height:auto;
  border-color:var(--line); box-shadow:none;
}
.auth-page .auth-art>span { color:var(--muted); letter-spacing:.16em; }
.auth-page .auth-art div { display:grid; gap:22px; justify-items:center; padding:0 34px; }
.auth-page .auth-art b { color:var(--ink); font:400 72px/1 Georgia; }
.auth-page .auth-art p { margin:0; color:var(--ink); font-size:24px; letter-spacing:-.7px; }

@media (max-width:760px) {
  .auth-page .auth-card { padding:34px 0 44px; }
  /* A regra de alvo tocável do CSS legado (`.auth-card a { padding:11px 0 }`)
     não alcança este link porque a pílula redefine o padding — a altura de
     toque volta aqui, explícita. */
  .auth-page .auth-back { margin-bottom:24px; padding:11px 14px 11px 12px; }
  .auth-page .auth-card h1 { font-size:34px; letter-spacing:-1px; }
  .auth-page .auth-card input:not([type="checkbox"]):not(.otp-real) { height:50px; font-size:16px; }
}