/* ========================================================================== FASTTECHAPP — "fasttech" app theme · Slipstream design system Light default, dark via . Brand-native, not VRISTO. ========================================================================== */ :root{ --obsidian:#050A20; --royal:#002095; --electric:#0E3BD6; --cornflower:#3364EC; --sky:#BFDDFF; --mist:#DCDEE2; /* light (default) */ --ground:#F4F7FC; --surface:#FFFFFF; --surface-2:#EEF3FC; --surface-3:#E4ECF9; --ink:#0B1224; --ink-2:#42506E; --ink-3:#6E7B98; --line:#E3E9F4; --line-2:#CEDAEE; --accent:#0E3BD6; --accent-2:#3364EC; --accent-deep:#002095; --on-accent:#fff; --ok:#0E9F63; --ok-bg:#E1F5EC; --warn:#B7791F; --warn-bg:#FBF1DE; --crit:#D64545; --crit-bg:#FCE9E9; --halo:rgba(14,59,214,.14); --shadow:0 18px 40px -24px rgba(11,26,74,.28); --shear:-11deg; --fdisp:"Archivo","Hanken Grotesk",system-ui,sans-serif; --fbody:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif; --fmono:"JetBrains Mono",ui-monospace,"Consolas",monospace; --sbw:264px; } :root[data-theme="dark"]{ --ground:#050A20; --surface:#0A1234; --surface-2:#0D1740; --surface-3:#111E52; --ink:#EAF0FF; --ink-2:#AEBCE0; --ink-3:#6F7EAE; --line:#182452; --line-2:#22326E; --accent:#3364EC; --accent-2:#5C82FF; --accent-deep:#0E3BD6; --ok:#2FCB87; --ok-bg:rgba(23,178,106,.16); --warn:#F5A524; --warn-bg:rgba(245,165,36,.16); --crit:#F87171; --crit-bg:rgba(240,68,56,.16); --halo:rgba(51,100,236,.28); --shadow:0 22px 48px -24px rgba(0,0,0,.7); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--fbody);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} ::selection{background:var(--accent);color:#fff} h1,h2,h3,h4{margin:0;font-family:var(--fdisp);font-weight:800;letter-spacing:-.01em} p{margin:0} .mono{font-family:var(--fmono);font-variant-numeric:tabular-nums} .disp{font-family:var(--fdisp);font-weight:800;text-transform:uppercase;letter-spacing:-.02em} .eyebrow{font-family:var(--fmono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);font-weight:600} .muted{color:var(--ink-2)} .faint{color:var(--ink-3)} .icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter;flex:none} /* ---------- layout ---------- */ .ftx-shell{min-height:100vh} .ftx-sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sbw);background:var(--surface);border-right:1px solid var(--line); display:flex;flex-direction:column;z-index:60;transition:transform .25s ease;overflow-y:auto} .ftx-main{margin-left:var(--sbw);min-height:100vh;display:flex;flex-direction:column} .ftx-content{padding:26px 30px 60px;max-width:1240px;width:100%} @media(max-width:1000px){ .ftx-sidebar{transform:translateX(-100%);box-shadow:var(--shadow)} .ftx-sidebar.open{transform:none} .ftx-main{margin-left:0} .ftx-content{padding:20px 18px 48px} } .ftx-scrim{position:fixed;inset:0;background:rgba(5,10,32,.5);z-index:55;display:none} .ftx-scrim.show{display:block} /* ---------- sidebar ---------- */ .ftx-brand{display:flex;align-items:center;gap:11px;padding:20px 22px;border-bottom:1px solid var(--line);color:var(--ink)} .ftx-brand svg{width:30px;height:30px;flex:none} .ftx-brand .name{font-family:var(--fdisp);font-weight:800;text-transform:uppercase;letter-spacing:.01em;font-size:18px} .ftx-nav{padding:14px 12px;flex:1} .ftx-nav .sec{font-family:var(--fmono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);padding:16px 12px 8px} .ftx-nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;color:var(--ink-2);font-weight:500;font-size:14.5px;position:relative;margin-bottom:2px} .ftx-nav a .icon{width:19px;height:19px;color:var(--ink-3)} .ftx-nav a:hover{background:var(--surface-2);color:var(--ink)} .ftx-nav a:hover .icon{color:var(--accent-2)} .ftx-nav a.active{background:var(--surface-2);color:var(--accent);font-weight:600} .ftx-nav a.active .icon{color:var(--accent)} .ftx-nav a.active::before{content:"";position:absolute;left:-12px;top:6px;bottom:6px;width:4px;background:var(--accent);clip-path:polygon(0 0,100% 12%,100% 88%,0 100%)} .ftx-nav a.danger:hover{color:var(--crit)} .ftx-nav a.danger:hover .icon{color:var(--crit)} /* ---------- topbar ---------- */ .ftx-topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ground) 82%,transparent);backdrop-filter:blur(12px); border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 30px;height:64px} @media(max-width:1000px){.ftx-topbar{padding:0 16px}} .ftx-topbar .title{font-family:var(--fdisp);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:17px} .ftx-burger{display:none;border:1px solid var(--line-2);background:var(--surface);border-radius:8px;padding:7px;cursor:pointer;color:var(--ink-2)} @media(max-width:1000px){.ftx-burger{display:inline-flex}} /* compact brand mark in the topbar — hidden on desktop (sidebar carries the brand + page title), shown on mobile in place of the oversized page title. Each page still shows its own H1. */ .ftx-toplogo{display:none;align-items:center;gap:8px} .ftx-toplogo svg{width:26px;height:26px;flex:none} .ftx-toplogo .wm{font-family:var(--fdisp);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:16px;color:var(--ink);white-space:nowrap} @media(max-width:1000px){.ftx-topbar .title{display:none} .ftx-toplogo{display:inline-flex}} @media(max-width:430px){.ftx-toplogo .wm{display:none}} .ftx-top-right{margin-left:auto;display:flex;align-items:center;gap:12px} .ftx-wallet-chip{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line-2);padding:7px 13px;border-radius:8px;font-family:var(--fmono);font-size:13px;font-weight:600} .ftx-wallet-chip .icon{width:16px;height:16px;color:var(--accent-2)} .ftx-wallet-chip a{color:var(--accent);font-weight:600} .ftx-iconbtn{border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);border-radius:8px;padding:8px;cursor:pointer;display:inline-flex} .ftx-iconbtn:hover{border-color:var(--accent);color:var(--accent)} .ftx-user{display:flex;align-items:center;gap:9px;cursor:pointer;background:none;border:0;font-family:inherit;color:inherit;padding:0} .ftx-dash-top{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px} @media(max-width:820px){.ftx-dash-top{grid-template-columns:1fr}} .ftx-user .av{width:34px;height:34px;border-radius:8px;object-fit:cover;background:var(--surface-2);border:1px solid var(--line-2);display:grid;place-content:center;font-weight:700;color:var(--accent)} .ftx-user .nm{font-size:13.5px;font-weight:600} @media(max-width:560px){.ftx-user .nm,.ftx-wallet-chip a{display:none}} /* ---------- page head ---------- */ .ftx-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap} .ftx-pagehead h1{font-size:clamp(24px,3.4vw,32px);text-transform:uppercase} .ftx-crumb{font-family:var(--fmono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px} /* ---------- cards ---------- */ .ftx-card{background:var(--surface);border:1px solid var(--line);border-radius:12px} .ftx-card .hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)} .ftx-card .hd h3{font-size:15px;text-transform:uppercase} .ftx-card .bd{padding:20px} .ftx-grid{display:grid;gap:16px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}} /* two-column split (e.g. recharge: account panel + how-to; buy-numbers: form + list). Stacks on tablet/mobile. */ .ftx-split{grid-template-columns:minmax(0,460px) 1fr;gap:20px;align-items:start} @media(max-width:860px){.ftx-split{grid-template-columns:1fr}} /* sticky side panel on desktop; release it once the layout stacks so it doesn't pin over the list */ .ftx-sticky-side{position:sticky;top:82px} @media(max-width:860px){.ftx-sticky-side{position:static}} /* ---------- stat tile ---------- */ .ftx-stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px;display:flex;align-items:center;gap:16px;position:relative;overflow:hidden} .ftx-stat .ic{width:48px;height:48px;border-radius:10px;display:grid;place-content:center;background:var(--surface-2);color:var(--accent-2);flex:none} .ftx-stat .ic .icon{width:24px;height:24px} .ftx-stat .lb{font-family:var(--fmono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} .ftx-stat .vl{font-family:var(--fdisp);font-weight:800;font-size:26px;letter-spacing:-.02em;margin-top:2px} .ftx-stat .cta{margin-left:auto} .ftx-stat.accent{background:linear-gradient(140deg,var(--electric),var(--royal));border:0;color:#fff} .ftx-stat.accent .lb{color:var(--sky)} .ftx-stat.accent .ic{background:rgba(255,255,255,.14);color:#fff} .ftx-stat.accent .vl{color:#fff} /* ---------- buttons ---------- */ .ftx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--fbody);font-weight:600;font-size:14px; padding:11px 20px;cursor:pointer;border:0;color:var(--on-accent);background:var(--accent);clip-path:polygon(5% 0,100% 0,95% 100%,0 100%);transition:transform .15s ease,background .15s ease} .ftx-btn:hover{background:var(--accent-2);transform:translateX(2px)} .ftx-btn .icon{width:17px;height:17px;stroke-width:2} .ftx-btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2);clip-path:none;border-radius:8px} .ftx-btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:transparent} .ftx-btn.sm{padding:8px 14px;font-size:13px} .ftx-btn.block{width:100%} .ftx-btn.mono{font-family:var(--fmono);text-transform:uppercase;letter-spacing:.06em;font-size:12.5px} .ftx-btn:disabled{opacity:.55;cursor:not-allowed;transform:none} /* ---------- pills / badges ---------- */ .ftx-pill{font-family:var(--fmono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:4px 9px;border-radius:5px;display:inline-block} .ftx-pill.ok{background:var(--ok-bg);color:var(--ok)} .ftx-pill.warn{background:var(--warn-bg);color:var(--warn)} .ftx-pill.crit{background:var(--crit-bg);color:var(--crit)} .ftx-pill.live{background:var(--halo);color:var(--accent)} /* ---------- forms ---------- */ .ftx-field{margin-bottom:16px} .ftx-field label{display:flex;align-items:center;gap:8px;font-family:var(--fmono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px} .ftx-step{display:inline-grid;place-content:center;width:18px;height:18px;border-radius:5px;background:var(--halo);color:var(--accent);font-size:10px;font-weight:700;letter-spacing:0} .ftx-input,.ftx-select,select.ftx-select,textarea.ftx-input{width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:11px 13px;font-family:var(--fbody);font-size:14.5px;color:var(--ink);transition:border .15s,box-shadow .15s} .ftx-input:focus,.ftx-select:focus,textarea.ftx-input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--halo)} .ftx-input::placeholder{color:var(--ink-3)} /* ---------- table / list rows ---------- */ .ftx-row{display:flex;align-items:center;gap:14px;padding:14px 4px;border-top:1px solid var(--line)} .ftx-row:first-child{border-top:0} .ftx-row .dot{width:36px;height:36px;border-radius:8px;display:grid;place-content:center;flex:none} .ftx-row .dot.ok{background:var(--ok-bg);color:var(--ok)} .ftx-row .dot.crit{background:var(--crit-bg);color:var(--crit)} .ftx-row .dot.accent{background:var(--halo);color:var(--accent)} .ftx-row .t{font-weight:600;font-size:14px} .ftx-row .s{font-family:var(--fmono);font-size:12px;color:var(--ink-3)} .ftx-row .amt{margin-left:auto;font-family:var(--fmono);font-weight:600} .ftx-table{width:100%;border-collapse:collapse} .ftx-table th{font-family:var(--fmono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)} .ftx-table td{padding:12px;border-bottom:1px solid var(--line);font-size:14px} .ftx-table tr:hover td{background:var(--surface-2)} /* ---------- empty state ---------- */ .ftx-empty{text-align:center;padding:34px 16px;color:var(--ink-3)} .ftx-empty .icon{width:34px;height:34px;margin:0 auto 10px;color:var(--line-2)} /* ---------- OTP tile ---------- */ .ftx-otp{background:linear-gradient(155deg,var(--electric),var(--royal));border-radius:12px;padding:20px;color:#fff} .ftx-otp .lb{font-family:var(--fmono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sky)} .ftx-otp .digits{display:flex;gap:8px;margin:14px 0 10px;flex-wrap:wrap} .ftx-otp .digits b{font-family:var(--fmono);font-weight:600;font-size:24px;width:40px;height:50px;display:grid;place-content:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);border-radius:6px} .ftx-otp .foot{display:flex;justify-content:space-between;font-family:var(--fmono);font-size:12px;color:#CBDCFF} /* ---------- metric strip (dashboard) ---------- */ .ftx-metric{display:flex;align-items:center;gap:14px;padding:16px 20px;border-top:1px solid var(--line);flex:1;color:inherit} @media(max-width:820px){.ftx-metric{padding:18px 20px}} .ftx-metric:first-child{border-top:0} .ftx-metric:hover{background:var(--surface-2)} .ftx-metric .ic{width:40px;height:40px;border-radius:9px;display:grid;place-content:center;background:var(--surface-2);color:var(--accent-2);flex:none} .ftx-metric .ic .icon{width:20px;height:20px} .ftx-metric .lb{font-family:var(--fmono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} .ftx-metric .vl{font-family:var(--fdisp);font-weight:800;font-size:20px;letter-spacing:-.01em} .ftx-metric .go{margin-left:auto;color:var(--ink-3)} .ftx-metric:hover .go{color:var(--accent)} .ftx-metric:hover .ic{color:var(--accent)} /* ---------- user dropdown (topbar) ---------- */ .ftx-userwrap{position:relative} .ftx-user .chev{color:var(--ink-3);width:16px;height:16px;transition:transform .18s} .ftx-userwrap.open .ftx-user .chev{transform:rotate(180deg)} .ftx-usermenu{position:absolute;right:0;top:calc(100% + 10px);width:250px;background:var(--surface);border:1px solid var(--line-2);border-radius:12px; box-shadow:var(--shadow);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s;z-index:70} .ftx-userwrap.open .ftx-usermenu{opacity:1;visibility:visible;transform:none} .ftx-usermenu .uhead{display:flex;align-items:center;gap:11px;padding:12px;border-bottom:1px solid var(--line);margin-bottom:6px} .ftx-usermenu .uhead .av{width:40px;height:40px;border-radius:9px;display:grid;place-content:center;background:var(--halo);color:var(--accent);font-weight:800;flex:none} .ftx-usermenu .uhead .un{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ftx-usermenu .uhead .ue{font-family:var(--fmono);font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ftx-usermenu a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink-2)} .ftx-usermenu a .icon{width:18px;height:18px;color:var(--ink-3)} .ftx-usermenu a:hover{background:var(--surface-2);color:var(--ink)} .ftx-usermenu a:hover .icon{color:var(--accent)} .ftx-usermenu a.danger:hover{color:var(--crit)} .ftx-usermenu a.danger:hover .icon{color:var(--crit)} /* ---------- searchable combobox (service picker) ---------- */ .ftx-combo{position:relative} .ftx-combo .cbtn{width:100%;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:11px 13px;cursor:pointer;color:var(--ink);font-family:var(--fbody);font-size:14.5px;text-align:left} .ftx-combo .cbtn:disabled{opacity:.6;cursor:not-allowed} .ftx-combo .cbtn .ph{color:var(--ink-3)} .ftx-combo .cbtn .chev{margin-left:auto;color:var(--ink-3);width:18px;height:18px;transition:transform .18s} .ftx-combo.open .cbtn{border-color:var(--accent);box-shadow:0 0 0 3px var(--halo)} .ftx-combo.open .cbtn .chev{transform:rotate(180deg)} .ftx-combo .cpanel{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line-2);border-radius:10px;box-shadow:var(--shadow);z-index:40;padding:8px;display:none} .ftx-combo.open .cpanel{display:block} .ftx-combo .csearch{width:100%;border:1px solid var(--line);border-radius:7px;padding:9px 11px;font-family:var(--fbody);font-size:14px;color:var(--ink);background:var(--surface-2);margin-bottom:6px} .ftx-combo .csearch:focus{outline:0;border-color:var(--accent)} .ftx-combo .clist{max-height:260px;overflow:auto} .ftx-combo .copt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border-radius:7px;cursor:pointer;font-size:14px} .ftx-combo .copt:hover,.ftx-combo .copt.hi{background:var(--surface-2)} .ftx-combo .copt .pr{font-family:var(--fmono);font-size:12.5px;color:var(--accent);font-weight:600;flex:none} .ftx-combo .cempty{padding:16px;text-align:center;color:var(--ink-3);font-size:13px} /* ---------- active number card ---------- */ .ftx-numcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 16px 14px;margin-bottom:14px;position:relative;overflow:hidden} .ftx-numcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);clip-path:polygon(0 0,100% 8%,100% 92%,0 100%)} .ftx-numcard .ntop{display:flex;align-items:center;gap:12px} .ftx-numcard .ndot{width:40px;height:40px;border-radius:9px;display:grid;place-content:center;background:var(--halo);color:var(--accent);flex:none} .ftx-numcard .nnum{display:flex;align-items:center;gap:8px;font-family:var(--fmono);font-weight:600;font-size:17px} .ftx-numcard .nnum .cp{border:0;background:none;color:var(--ink-3);cursor:pointer;padding:2px;display:inline-flex} .ftx-numcard .nnum .cp:hover{color:var(--accent)} .ftx-numcard .nsvc{font-size:12.5px;color:var(--ink-3);margin-top:2px} .ftx-numcard .ncd{margin-left:auto;flex:none} .ftx-otpbox{margin-top:13px;background:var(--surface-2);border:1px dashed var(--line-2);border-radius:9px;padding:14px 16px;min-height:56px;display:flex;align-items:center;gap:10px;font-family:var(--fmono);font-size:15px;color:var(--ink)} .ftx-otpbox.waiting{color:var(--ink-3);font-family:var(--fbody);font-size:13.5px} .ftx-otpbox .code{font-size:19px;font-weight:600;letter-spacing:.06em;color:var(--accent)} .ftx-otpbox .pulse{width:9px;height:9px;border-radius:50%;background:var(--accent-2);flex:none;animation:ftxpulse 1.1s infinite ease-in-out} @keyframes ftxpulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}} .ftx-numcard .nacts{display:flex;gap:9px;margin-top:13px} .ftx-numcard .nacts .ftx-btn{flex:1} /* ---------- Select2 — fully re-skinned to fasttech (body-prefixed to win the cascade) ---------- */ body .select2-container{width:100%!important} /* closed control — mirrors .ftx-input */ body .select2-container--default .select2-selection--single{ height:46px;background:var(--surface);border:1px solid var(--line-2);border-radius:9px; display:flex;align-items:center;transition:border-color .15s,box-shadow .15s} body .select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--ink);font-family:var(--fbody);font-weight:500;font-size:14.5px;line-height:normal;padding:0 42px 0 14px} body .select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--ink-3);font-weight:400} /* custom chevron — replaces the default triangle */ body .select2-container--default .select2-selection--single .select2-selection__arrow{height:44px;width:38px;right:2px;top:0} body .select2-container--default .select2-selection--single .select2-selection__arrow b{display:none} body .select2-container--default .select2-selection--single .select2-selection__arrow:after{ content:"";position:absolute;right:16px;top:calc(50% - 5px);width:7px;height:7px; border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);border-radius:1px; transform:rotate(45deg);transition:transform .18s,border-color .18s} /* focus / open */ body .select2-container--default.select2-container--open .select2-selection--single{ border-color:var(--accent);box-shadow:0 0 0 3px var(--halo)} body .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow:after{ transform:rotate(-135deg);top:calc(50% - 2px);border-color:var(--accent)} /* disabled */ body .select2-container--default .select2-selection--single[aria-disabled=true], body .select2-container--disabled .select2-selection--single{opacity:.5;cursor:not-allowed;background:var(--surface-2)} /* dropdown panel — sits detached with a shear-free rounded card */ body .select2-container--open .select2-dropdown{ background:var(--surface);border:1px solid var(--line-2);border-radius:12px; box-shadow:var(--shadow);overflow:hidden} body .select2-dropdown--below{margin-top:6px} body .select2-dropdown--above{margin-bottom:6px} /* search field inside dropdown */ body .select2-search--dropdown{padding:10px 10px 2px} body .select2-container--default .select2-search--dropdown .select2-search__field{ background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--ink); padding:10px 12px;font-family:var(--fbody);font-size:14px;transition:border-color .15s,box-shadow .15s} body .select2-container--default .select2-search--dropdown .select2-search__field::placeholder{color:var(--ink-3)} body .select2-container--default .select2-search--dropdown .select2-search__field:focus{ outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--halo)} /* options list */ body .select2-results__options{max-height:288px;padding:2px 6px 6px} body .select2-results__options::-webkit-scrollbar{width:9px} body .select2-results__options::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:5px;border:2px solid var(--surface)} body .select2-container--default .select2-results__option{ color:var(--ink);font-size:14px;font-weight:500;padding:10px 13px;border-radius:8px; position:relative;transition:background .12s,color .12s} body .select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--surface-2);color:var(--ink)} body .select2-container--default .select2-results__option[aria-selected=true]{background:var(--halo);color:var(--accent);font-weight:700} body .select2-container--default .select2-results__option[aria-selected=true]::before{ content:"";position:absolute;left:2px;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--accent)} body .select2-container--default .select2-results__option--highlighted[aria-selected=true]{background:var(--halo);color:var(--accent)} /* optgroup header */ body .select2-container--default .select2-results__group{ font-family:var(--fmono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3); padding:6px 13px 6px;font-weight:600} body .select2-results__options--nested{padding:0} /* price tag on service options */ body .select2-results__option .s2price{float:right;font-family:var(--fmono);font-size:12.5px;color:var(--accent);font-weight:700;margin-left:10px} body .select2-container--default .select2-results__option[aria-selected=true] .s2price{color:var(--accent)} body .select2-results__option .s2price.s2price-view{color:var(--ink-3);font-weight:600;font-size:11.5px} /* empty / loading message */ body .select2-results__message{color:var(--ink-3);font-size:13px;padding:16px 12px;text-align:center} /* ---------- search bar (icon input) ---------- */ .ftx-searchbar{position:relative} .ftx-searchbar .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--ink-3);pointer-events:none} .ftx-searchbar input{width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:12px 14px 12px 42px;font-family:var(--fbody);font-size:14.5px;color:var(--ink);transition:border-color .15s,box-shadow .15s} .ftx-searchbar input::placeholder{color:var(--ink-3)} .ftx-searchbar input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--halo)} .ftx-searchbar .spin{position:absolute;right:14px;top:50%;transform:translateY(-50%)} /* ---------- logs: category section + product card ---------- */ .ftx-logsec{margin-bottom:26px} .ftx-logsec .cap{display:flex;align-items:center;gap:10px;margin-bottom:12px} .ftx-logsec .cap h3{font-size:14px;text-transform:uppercase;font-family:var(--fdisp)} .ftx-logsec .cap .n{font-family:var(--fmono);font-size:11px;color:var(--ink-3);background:var(--surface-2);padding:2px 8px;border-radius:20px} .ftx-prodgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px} .ftx-prod{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px;transition:border-color .15s,transform .15s} .ftx-prod:hover{border-color:var(--line-2);transform:translateY(-2px)} .ftx-prod .ptop{display:flex;align-items:flex-start;gap:11px} .ftx-prod .pic{width:42px;height:42px;border-radius:10px;flex:none;background:var(--surface-2);color:var(--accent-2);display:grid;place-content:center;overflow:hidden} .ftx-prod .pic img{width:100%;height:100%;object-fit:cover} .ftx-prod .pic .icon{width:22px;height:22px} .ftx-prod .pname{font-weight:700;font-size:14.5px;line-height:1.3} .ftx-prod .pdesc{font-size:12.5px;color:var(--ink-3);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em} .ftx-prod .pfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:6px} .ftx-prod .pprice{font-family:var(--fdisp);font-weight:800;font-size:19px} .ftx-prod .pbuy{padding:8px 16px} .ftx-prod .pbuy:disabled{opacity:.5;cursor:not-allowed} /* ---------- modal ---------- */ .ftx-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:18px; background:rgba(5,10,32,.55);backdrop-filter:blur(4px)} .ftx-modal.open{display:flex} .ftx-modal .box{background:var(--surface);border:1px solid var(--line-2);border-radius:16px;box-shadow:var(--shadow); width:100%;max-width:460px;max-height:88vh;overflow:auto;animation:ftxpop .2s ease} .ftx-modal .box.wide{max-width:560px} @keyframes ftxpop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}} .ftx-modal .mhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)} .ftx-modal .mhead h3{font-size:16px;text-transform:uppercase} .ftx-modal .mclose{border:0;background:var(--surface-2);color:var(--ink-2);width:32px;height:32px;border-radius:8px;cursor:pointer;display:grid;place-content:center;flex:none} .ftx-modal .mclose:hover{color:var(--crit)} .ftx-modal .mbody{padding:20px} .ftx-modal .mrow{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px;padding:7px 0} .ftx-modal .mrow .lb{color:var(--ink-3)} .ftx-modal .mrow.total{border-top:1px dashed var(--line-2);margin-top:8px;padding-top:14px;font-family:var(--fdisp);font-weight:800;font-size:17px} .ftx-modal .mrow.total .v{color:var(--accent)} /* quantity stepper */ .ftx-qty{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:9px;overflow:hidden;width:fit-content} .ftx-qty button{border:0;background:var(--surface-2);color:var(--ink);width:40px;height:40px;font-size:18px;cursor:pointer;display:grid;place-content:center} .ftx-qty button:hover{background:var(--surface-3);color:var(--accent)} .ftx-qty input{border:0;width:58px;height:40px;text-align:center;font-family:var(--fmono);font-weight:600;font-size:15px;color:var(--ink);background:var(--surface)} .ftx-qty input:focus{outline:0} /* credential block (order details) */ .ftx-cred{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:13px 14px;margin-bottom:10px} .ftx-cred .ch{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px} .ftx-cred .ch .nm{font-weight:700;font-size:13.5px} .ftx-cred pre{margin:0;font-family:var(--fmono);font-size:12.5px;color:var(--ink);white-space:pre-wrap;word-break:break-word;line-height:1.6} .ftx-cred .cp{border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);border-radius:7px;padding:5px 10px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;flex:none} .ftx-cred .cp:hover{border-color:var(--accent);color:var(--accent)} /* key-value rows (virtual account details) */ .ftx-kv{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line)} .ftx-kv:first-child{border-top:0} .ftx-kv .k{color:var(--ink-3);font-size:12.5px;font-family:var(--fmono);letter-spacing:.04em;text-transform:uppercase} .ftx-kv .v{font-weight:600;text-align:right;display:flex;align-items:center;gap:8px} .ftx-kv .v.acct{font-family:var(--fmono);font-size:19px;letter-spacing:.04em;color:var(--accent)} .ftx-kv .cp{border:0;background:none;color:var(--ink-3);cursor:pointer;padding:2px;display:inline-flex} .ftx-kv .cp:hover{color:var(--accent)} /* pagination */ .ftx-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)} .ftx-pager .info{font-family:var(--fmono);font-size:12px;color:var(--ink-3)} .ftx-pager .ctrls{display:flex;gap:8px} /* ---------- FAQ accordion ---------- */ .ftx-faq{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)} .ftx-faq .item{border-top:1px solid var(--line)} .ftx-faq .item:first-child{border-top:0} .ftx-faq .q{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;cursor:pointer;font-weight:600;font-size:14.5px;user-select:none} .ftx-faq .q .chev{transition:transform .2s,color .2s;color:var(--ink-3);flex:none;width:18px;height:18px} .ftx-faq .item.open .q{color:var(--accent)} .ftx-faq .item.open .q .chev{transform:rotate(180deg);color:var(--accent)} .ftx-faq .a{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 20px} .ftx-faq .item.open .a{max-height:340px;padding-bottom:18px} .ftx-faq .a p{color:var(--ink-2);font-size:13.5px;line-height:1.65;margin:0} /* ---------- standalone message page (404 / result) ---------- */ .ftx-msg{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--ground)} .ftx-msg .box{width:100%;max-width:460px;text-align:center} .ftx-msg .mark{width:76px;height:76px;border-radius:20px;display:inline-grid;place-content:center;margin-bottom:22px} .ftx-msg .mark.ok{background:var(--ok-bg);color:var(--ok)} .ftx-msg .mark.crit{background:var(--crit-bg);color:var(--crit)} .ftx-msg .mark.accent{background:var(--halo);color:var(--accent)} .ftx-msg .mark .icon{width:38px;height:38px;stroke-width:2.2} .ftx-msg .code{font-family:var(--fdisp);font-weight:900;font-size:clamp(56px,10vw,84px);line-height:1;letter-spacing:-.03em;color:var(--accent)} .ftx-msg h1{font-family:var(--fdisp);font-weight:800;font-size:24px;text-transform:uppercase;letter-spacing:-.02em;margin:8px 0 8px} .ftx-msg p{color:var(--ink-2);font-size:14.5px;line-height:1.6;margin:0 auto 24px;max-width:36ch} /* ---------- auth shell (login / register / reset) ---------- */ .ftx-auth{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr} @media(max-width:920px){.ftx-auth{grid-template-columns:1fr}} .ftx-auth-brand{background:linear-gradient(155deg,var(--electric),var(--royal));color:#fff;padding:clamp(36px,5vw,64px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden} @media(max-width:920px){.ftx-auth-brand{display:none}} .ftx-auth-brand::after{content:"";position:absolute;right:-120px;bottom:-120px;width:360px;height:360px;border-radius:50%;background:rgba(255,255,255,.08)} .ftx-auth-brand .logo{display:flex;align-items:center;gap:12px;position:relative;z-index:1} .ftx-auth-brand .logo svg{width:34px;height:34px} .ftx-auth-brand .logo .name{font-family:var(--fdisp);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:20px} .ftx-auth-brand .pitch{position:relative;z-index:1} .ftx-auth-brand .pitch h2{font-family:var(--fdisp);font-weight:900;font-size:clamp(26px,3vw,36px);line-height:1.1;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:14px} .ftx-auth-brand .pitch p{color:#DCE7FF;font-size:15px;line-height:1.6;max-width:38ch} .ftx-auth-brand .feats{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px} .ftx-auth-brand .feats .f{display:flex;align-items:center;gap:12px;font-size:14px;color:#EAF1FF} .ftx-auth-brand .feats .f .tick{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.16);display:grid;place-content:center;flex:none} .ftx-auth-brand .feats .f .tick .icon{width:15px;height:15px;stroke-width:2.4} .ftx-auth-form{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--ground);position:relative} .ftx-auth-toggle{position:absolute;top:20px;right:22px} .ftx-auth-card{width:100%;max-width:400px} .ftx-auth-card .mobilebrand{display:none;align-items:center;gap:10px;margin-bottom:26px} @media(max-width:920px){.ftx-auth-card .mobilebrand{display:flex}} .ftx-auth-card .mobilebrand svg{width:30px;height:30px} .ftx-auth-card .mobilebrand .name{font-family:var(--fdisp);font-weight:800;text-transform:uppercase;font-size:18px} .ftx-auth-card h1{font-family:var(--fdisp);font-weight:800;font-size:26px;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:6px} .ftx-auth-card .sub{color:var(--ink-3);font-size:14px;margin-bottom:26px} .ftx-auth-card .row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-4px 0 18px} .ftx-auth-card .check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);cursor:pointer} .ftx-auth-card .check input{width:16px;height:16px;accent-color:var(--accent)} .ftx-auth-card .foot{text-align:center;font-size:14px;color:var(--ink-2);margin-top:22px} .ftx-auth-card .foot a{color:var(--accent);font-weight:700} .ftx-pwfield{position:relative} .ftx-pwinput{position:relative} /* eye anchored to the input row (fixed top), so a validation error appended below never shifts it */ .ftx-pwfield .peek{position:absolute;right:12px;top:23px;transform:translateY(-50%);border:0;background:none;color:var(--ink-3);cursor:pointer;padding:4px;display:inline-flex;z-index:2} .ftx-pwfield .peek:hover{color:var(--accent)} .ftx-pwfield input{padding-right:40px} /* JustValidate error styling */ .ftx-invalid{border-color:var(--crit)!important;box-shadow:0 0 0 3px var(--crit-bg)!important} .ftx-err{color:var(--crit);font-size:12px;margin-top:6px;font-weight:500;display:block;font-family:var(--fbody)} /* inline button spinner */ .ftx-spin{width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;display:inline-block;vertical-align:-2px;animation:ftxspin .7s linear infinite} @keyframes ftxspin{to{transform:rotate(1turn)}} /* skeleton loader */ .ftx-skel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px} .ftx-skel .bar{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:ftxshine 1.3s ease infinite} .ftx-skel .bar+.bar{margin-top:10px} @keyframes ftxshine{0%{background-position:100% 0}100%{background-position:-100% 0}} /* helpers */ .mt0{margin-top:0}.mb0{margin-bottom:0}.mt16{margin-top:16px}.mt24{margin-top:24px} .flex{display:flex}.between{justify-content:space-between}.center{align-items:center}.gap12{gap:12px}.wrap{flex-wrap:wrap} .hide-scroll::-webkit-scrollbar{width:6px}.hide-scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}