/* ============================================================================ METRIX · REDESIGN THEMES (5 variante complete) Fiecare variantă se aplică prin clasă pe : rd-. Suprascrie ATÂT tokenii cabinetului (--bg/--shell/--panel/--ink/--gold…) CÂT ȘI tokenii landing-ului (--grad/--pink/--purple…) + componente cheie. Levier: cabinetul e integral token-driven → remap la --gold/--grad reskinuiește automat controalele, pill-urile, KPI-urile, tabelele. Fonturile se încarcă lazy: @import doar declară CSS-ul; woff2-ul se descarcă numai când o variantă activă chiar folosește familia respectivă. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Geist+Mono:wght@400;500;600&family=Geist:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono&display=swap'); /* măruntaie comune tuturor redesign-urilor */ body[class*="rd-"]{transition:background .3s ease,color .3s ease;min-height:100vh;background:var(--bg)} body[class*="rd-"] .num, body[class*="rd-"] .k .v{font-variant-numeric:tabular-nums} /* ============================================================================ A · GRID EDITORIAL — Swiss / broadsheet financiar, light, serif, un accent cărămiziu ============================================================================ */ body.rd-editorial{ --accent:#b4472b; --accent2:#9a3c24; /* cabinet */ --bg:#fbfaf8; --shell:#ffffff; --panel:#ffffff; --panel2:#fbfaf8; --inset:#f4f2ec; --line:#e7e4dd; --line2:#dad6cc; --ink:#16130f; --ink-strong:#0e0b08; --ink2:#5b554c; --mut:#8f887c; --mut2:#b0a99c; --gold:#b4472b; --gold2:#9a3c24; --goldsoft:#f7ece7; --goldline:#e6cfc5; --green:#2e6b3e; --greenline:#c4d9c9; --greensoft:#eaf2ec; --red:#b4472b; --redline:#e6cfc5; --blue:#3a5f8a; --blueline:#cad8e6; --bluesoft:#eaf0f6; --violet:#6a4ca6; --violetline:#d9cdf0; --violetsoft:#efe9fb; --orange:#c96a1f; --track:#ece9e2; --grid:#eeebe4; --rowline:#f4f2ec; --prodbg:#ffffff; --logo-ink:#16130f; /* landing */ --bg2:#f5f3ee; --pink:#b4472b; --purple:#b4472b; --teal:#2e6b3e; --amber:#9a3c24; --grad:linear-gradient(90deg,#b4472b,#9a3c24); --shadow:0 1px 0 #e7e4dd; } /* landing: fără blob-uri aurora, grilă razor, fundal hârtie */ body.rd-editorial .fx{display:none} body.rd-editorial .grid-ov{background-image:linear-gradient(rgba(22,19,15,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(22,19,15,.04) 1px,transparent 1px);mask-image:none;opacity:.7} body.rd-editorial nav{background:rgba(251,250,248,.85);border-bottom:1px solid var(--line)} body.rd-editorial .logoword, body.rd-editorial .grad{background:none;-webkit-text-fill-color:currentColor;color:var(--accent)} body.rd-editorial h1.hero-t,body.rd-editorial .shead h2,body.rd-editorial .ctaband h2{font-family:'Newsreader',Georgia,serif;font-weight:400;letter-spacing:-.02em;text-wrap:balance} body.rd-editorial .hero-t .grad{color:var(--accent)} body.rd-editorial .tag{font-family:'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--accent);font-weight:500} body.rd-editorial .mono,body.rd-editorial .stat .val,body.rd-editorial .stat .k{font-family:'IBM Plex Mono',monospace} body.rd-editorial .btn.pri{background:var(--ink-strong);border:1px solid var(--ink-strong);border-radius:4px} body.rd-editorial .btn.pri span{background:none;-webkit-text-fill-color:#fff;color:#fff} body.rd-editorial .btn.pri:hover{box-shadow:none;transform:none;background:#000} body.rd-editorial .btn.ghost{border-radius:4px;border-color:var(--line2);background:#fff} body.rd-editorial .btn.ghost:hover{border-color:var(--accent);background:#fff;color:var(--accent)} body.rd-editorial .glass{border-radius:8px;box-shadow:0 30px 70px -40px rgba(22,19,15,.25);background:#fff;border:1px solid var(--line2)} body.rd-editorial .glass::before{background:var(--accent);opacity:1} body.rd-editorial .mock .glow{display:none} body.rd-editorial .stat{border-radius:6px} body.rd-editorial .stat .val.grad{color:var(--accent)} body.rd-editorial .feat,body.rd-editorial .step,body.rd-editorial .ctaband{background:#fff;border-radius:8px;box-shadow:none} body.rd-editorial .feat::before{background:var(--accent);opacity:1;height:1px} body.rd-editorial .feat::after{display:none} body.rd-editorial .feat .ic{border-radius:6px} body.rd-editorial .step .num{background:var(--ink-strong);border-radius:4px;box-shadow:none} body.rd-editorial .ctaband::before{background:var(--accent);opacity:1} body.rd-editorial .ctaband .halo{display:none} /* cabinet: hairline flat, colțuri mici, tabel razor */ body.rd-editorial .dash{border-radius:8px;box-shadow:none} body.rd-editorial .k .v{font-family:'IBM Plex Mono',monospace} body.rd-editorial .ch .t{font-family:'IBM Plex Mono',monospace;letter-spacing:.1em} body.rd-editorial .ordtbl thead th{font-family:'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;font-size:10.5px} body.rd-editorial .sidebar .sb-logo{background:none;-webkit-text-fill-color:var(--accent);color:var(--accent)} /* ============================================================================ B · TELEMETRY — CRT tactic / industrial-brutalist mono, dark, colțuri 0, roșu hazard ============================================================================ */ body.rd-telemetry{ --accent:#ff2a2a; --accent2:#ff4a4a; --bg:#0c0c0c; --shell:#101010; --panel:#141414; --panel2:#171717; --inset:#0e0e0e; --line:#262626; --line2:#333333; --ink:#eaeaea; --ink-strong:#ffffff; --ink2:#9a9a9a; --mut:#6e6e6e; --mut2:#5e5e5e; --gold:#ff2a2a; --gold2:#ff4a4a; --goldsoft:#241010; --goldline:#4a1a1a; --green:#4af626; --greenline:#1e3a12; --greensoft:#0e1a08; --red:#ff2a2a; --redline:#4a1a1a; --blue:#9a9a9a; --blueline:#333333; --bluesoft:#161616; --violet:#c9c9c9; --violetline:#333; --violetsoft:#161616; --orange:#ff7a2a; --track:#1a1a1a; --grid:#1e1e1e; --rowline:#161616; --prodbg:#eaeaea; --logo-ink:#eaeaea; --bg2:#0c0c0c; --pink:#ff2a2a; --purple:#ff2a2a; --teal:#4af626; --amber:#ff7a2a; --grad:linear-gradient(90deg,#ff2a2a,#ff2a2a); font-family:'JetBrains Mono',ui-monospace,monospace; } body.rd-telemetry .fx{display:none} body.rd-telemetry .grid-ov{background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:28px 28px;mask-image:none;opacity:1} body.rd-telemetry nav{background:rgba(12,12,12,.9);border-bottom:1px solid var(--line)} body.rd-telemetry .logoword,body.rd-telemetry .grad{background:none;-webkit-text-fill-color:currentColor;color:var(--accent);font-family:'Archivo Black',sans-serif;letter-spacing:-.02em} body.rd-telemetry h1.hero-t,body.rd-telemetry .shead h2,body.rd-telemetry .ctaband h2{font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:-.03em;line-height:.92} body.rd-telemetry .hero-sub,body.rd-telemetry .shead p,body.rd-telemetry body,body.rd-telemetry .feat p,body.rd-telemetry .step p{font-family:'JetBrains Mono',monospace} body.rd-telemetry .tag{font-family:'JetBrains Mono',monospace;letter-spacing:.1em;color:var(--accent)} body.rd-telemetry .tag::before{content:"[ "}body.rd-telemetry .tag::after{content:" ]"} body.rd-telemetry .btn{border-radius:0} body.rd-telemetry .btn.pri{background:transparent;border:1px solid var(--ink);position:relative;overflow:hidden} body.rd-telemetry .btn.pri span{background:none;-webkit-text-fill-color:var(--ink);color:var(--ink);position:relative;z-index:1;transition:color .15s} body.rd-telemetry .btn.pri::before{content:"";position:absolute;inset:0;background:var(--accent);clip-path:inset(0 100% 0 0);transition:clip-path .15s ease-out} body.rd-telemetry .btn.pri:hover{transform:none;box-shadow:none} body.rd-telemetry .btn.pri:hover::before{clip-path:inset(0)} body.rd-telemetry .btn.pri:hover span{color:#000;-webkit-text-fill-color:#000} body.rd-telemetry .btn.ghost{border-radius:0;border-color:var(--line2);background:transparent} body.rd-telemetry .btn.ghost:hover{border-color:var(--accent);background:transparent;color:var(--accent)} body.rd-telemetry .glass{border-radius:0;box-shadow:none;background:var(--panel);border:1px solid var(--line2)} body.rd-telemetry .glass::before{background:var(--accent);opacity:1} body.rd-telemetry .mock .glow{display:none} body.rd-telemetry .stat{border-radius:0;background:var(--inset)} body.rd-telemetry .stat .val{font-family:'Archivo Black',sans-serif} body.rd-telemetry .stat .val.grad{color:var(--accent)} body.rd-telemetry .feat,body.rd-telemetry .step,body.rd-telemetry .ctaband{background:var(--panel);border-radius:0;box-shadow:none;border:1px solid var(--line2)} body.rd-telemetry .feat::before{background:var(--accent);opacity:1;height:2px} body.rd-telemetry .feat::after{display:none} body.rd-telemetry .feat .ic{border-radius:0} body.rd-telemetry .step .num{background:transparent;border:1px solid var(--accent);color:var(--accent);border-radius:0;box-shadow:none;font-family:'Archivo Black',sans-serif} body.rd-telemetry .ctaband::before{background:var(--accent);opacity:1} body.rd-telemetry .ctaband .halo{display:none} /* cabinet */ body.rd-telemetry .dash{border-radius:0;box-shadow:none} body.rd-telemetry .k .v{font-family:'Archivo Black',sans-serif;font-weight:400} body.rd-telemetry .k .label,body.rd-telemetry .ch .t{font-family:'JetBrains Mono',monospace;letter-spacing:.08em} body.rd-telemetry .iconbtn,body.rd-telemetry .seg,body.rd-telemetry .pbtn,body.rd-telemetry .pill{border-radius:0} body.rd-telemetry .ordtbl thead th{font-family:'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase} body.rd-telemetry .sidebar{border-radius:0} body.rd-telemetry .sidebar .sb-logo{background:none;-webkit-text-fill-color:var(--accent);color:var(--accent);font-family:'Archivo Black',sans-serif} body.rd-telemetry .sidebar .snav a.on{background:transparent;box-shadow:inset 3px 0 0 var(--accent);color:var(--accent)} /* ============================================================================ C · AURORA REFINED — glass premium, dark, Space Grotesk, gradient disciplinat (folosește și clasa .glass a sistemului existent pentru panourile cabinetului) ============================================================================ */ body.rd-aurora2{ --accent:#9b5cff; --accent2:#b18cff; --bg:#08080b; --shell:#0d0c14; --panel:#14121c; --panel2:#181524; --inset:#100e18; --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.11); --ink:#f2f2f6; --ink-strong:#ffffff; --ink2:#a6a6b2; --mut:#7c7a8a; --mut2:#605e70; --gold:#9b5cff; --gold2:#b18cff; --goldsoft:#17122a; --goldline:#3a3060; --green:#31e0c4; --greenline:#12463c; --greensoft:#0a1a17; --red:#ff6b81; --redline:#4a2230; --blue:#3b86ff; --blueline:#1c3358; --bluesoft:#0c1626; --violet:#9b5cff; --violetline:#3a3060; --violetsoft:#17122a; --orange:#f5b53d; --track:#181525; --grid:#1a1728; --rowline:#131120; --prodbg:#f5f3ee; --logo-ink:#ffffff; --glass-shell:rgba(22,22,30,.72); --glass-panel:rgba(255,255,255,.05); --glass-border:rgba(255,255,255,.09); --bg2:#0b0a12; --pink:#ff2d8e; --purple:#9b5cff; --teal:#31e0c4; --amber:#f5b53d; --grad:linear-gradient(90deg,#ff4d4d 0%,#ff2d8e 36%,#9b5cff 62%,#3b86ff 100%); } body.rd-aurora2 .b1,body.rd-aurora2 .b2,body.rd-aurora2 .b3{opacity:.26;filter:blur(110px)} body.rd-aurora2 h1.hero-t,body.rd-aurora2 .shead h2,body.rd-aurora2 .ctaband h2{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-.03em} body.rd-aurora2 .btn.pri{background:linear-gradient(#14121c,#14121c) padding-box,var(--accent) border-box} body.rd-aurora2 .btn.pri span{background:none;-webkit-text-fill-color:var(--accent);color:var(--accent)} body.rd-aurora2 .glass{border-radius:18px;border:1px solid var(--line2);box-shadow:0 24px 60px rgba(59,134,255,.14),inset 0 1px 0 rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(24,21,36,.9),rgba(13,12,20,.9));backdrop-filter:blur(20px)} body.rd-aurora2 .feat,body.rd-aurora2 .step{background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:16px;backdrop-filter:blur(8px)} body.rd-aurora2 .feat:hover{box-shadow:0 20px 50px rgba(155,92,255,.14)} body.rd-aurora2 .dash{border-radius:18px;box-shadow:0 24px 60px rgba(59,134,255,.1)} body.rd-aurora2 .k{background:rgba(255,255,255,.04)} body.rd-aurora2 .sidebar .snav a.on{background:rgba(155,92,255,.18);color:#fff} body.rd-aurora2 .ch .t{font-family:'Space Grotesk',sans-serif} /* ============================================================================ D · DAYLIGHT — light Linear/Notion, Geist, emerald, super curat ============================================================================ */ body.rd-daylight{ --accent:#0e9f6e; --accent2:#0b8a5e; --bg:#fafaf9; --shell:#ffffff; --panel:#ffffff; --panel2:#fafaf9; --inset:#f4f4f2; --line:#ececE9; --line2:#e0e0dc; --ink:#1a1a17; --ink-strong:#0f0f0d; --ink2:#6b6b66; --mut:#9a9a94; --mut2:#b4b4ae; --gold:#0e9f6e; --gold2:#0b8a5e; --goldsoft:#e4f5ee; --goldline:#bee6d6; --green:#0e9f6e; --greenline:#bee6d6; --greensoft:#e4f5ee; --red:#dc5b4b; --redline:#f3d2cc; --blue:#3b82f6; --blueline:#cfe0fb; --bluesoft:#eaf1fe; --violet:#6a4ca6; --violetline:#d9cdf0; --violetsoft:#efe9fb; --orange:#c96a1f; --track:#ececE9; --grid:#eeeeeb; --rowline:#f4f4f2; --prodbg:#ffffff; --logo-ink:#0f0f0d; --bg2:#f4f4f2; --pink:#0e9f6e; --purple:#0e9f6e; --teal:#0e9f6e; --amber:#c96a1f; --grad:linear-gradient(90deg,#0e9f6e,#0b8a5e); --shadow:0 1px 2px rgba(20,20,17,.06); font-family:'Geist',system-ui,sans-serif; } body.rd-daylight .fx{display:none} body.rd-daylight .grid-ov{display:none} body.rd-daylight nav{background:rgba(250,250,249,.85);border-bottom:1px solid var(--line)} body.rd-daylight .logoword{background:linear-gradient(90deg,#ff4d4d,#ff2d8e 36%,#9b5cff 62%,#3b86ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} body.rd-daylight .grad{background:none;-webkit-text-fill-color:var(--accent);color:var(--accent)} body.rd-daylight h1.hero-t,body.rd-daylight .shead h2,body.rd-daylight .ctaband h2{font-family:'Geist',sans-serif;font-weight:700;letter-spacing:-.02em} body.rd-daylight .k .v,body.rd-daylight .stat .val{font-weight:600} body.rd-daylight .hero-t .grad{color:var(--accent)} body.rd-daylight .mono,body.rd-daylight .stat .val,body.rd-daylight .k .v{font-family:'Geist Mono',monospace} body.rd-daylight .btn.pri{background:var(--accent);border:1px solid var(--accent);border-radius:999px} body.rd-daylight .btn.pri span{background:none;-webkit-text-fill-color:#fff;color:#fff} body.rd-daylight .btn.pri:hover{background:var(--accent2);box-shadow:0 6px 18px -8px rgba(14,159,110,.5)} body.rd-daylight .btn.ghost{border-radius:999px;background:#fff} body.rd-daylight .btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:#fff} body.rd-daylight .glass{border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 32px -16px rgba(20,20,17,.18)} body.rd-daylight .glass::before{background:var(--accent);opacity:.9} body.rd-daylight .mock .glow{opacity:.1} body.rd-daylight .stat{border-radius:10px;background:var(--panel2);border-color:var(--line)} body.rd-daylight .stat .val.grad{color:var(--accent)} body.rd-daylight .feat,body.rd-daylight .step,body.rd-daylight .ctaband{background:#fff;border-radius:12px;box-shadow:var(--shadow);border:1px solid var(--line)} body.rd-daylight .feat::before{display:none} body.rd-daylight .feat::after{display:none} body.rd-daylight .feat .ic{border-radius:10px} body.rd-daylight .step .num{background:var(--accent);border-radius:10px;box-shadow:none} body.rd-daylight .ctaband::before{background:var(--accent);opacity:.5} body.rd-daylight .ctaband .halo{opacity:.08} body.rd-daylight .dash{border-radius:14px;box-shadow:0 1px 2px rgba(20,20,17,.05)} body.rd-daylight .ch .t{font-family:'Geist',sans-serif} body.rd-daylight .sidebar .sb-logo{background:linear-gradient(90deg,#ff4d4d,#ff2d8e 36%,#9b5cff 62%,#3b86ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} body.rd-daylight .sidebar .snav a.on{background:var(--goldsoft);color:var(--accent2)} /* ============================================================================ E · VOLTAGE — neo-brutalist, high-key light, borduri negre + umbre offset dure ============================================================================ */ body.rd-voltage{ --accent:#3b4cff; --accent2:#2436e6; --bg:#f5f3ec; --shell:#ffffff; --panel:#ffffff; --panel2:#ffffff; --inset:#efece0; --line:#111111; --line2:#111111; --ink:#111111; --ink-strong:#000000; --ink2:#3a3a3a; --mut:#6e6e6e; --mut2:#8a8a8a; --gold:#3b4cff; --gold2:#2436e6; --goldsoft:#e6e8ff; --goldline:#111111; --green:#3c8a1e; --greenline:#111111; --greensoft:#eaf7c8; --red:#ff2d8e; --redline:#111111; --blue:#3b4cff; --blueline:#111111; --bluesoft:#e6e8ff; --violet:#7a3bff; --violetline:#111; --violetsoft:#eee6ff; --orange:#ff6a1f; --track:#efece0; --grid:#d8d4c6; --rowline:#efece0; --prodbg:#ffffff; --logo-ink:#111111; --bg2:#efece0; --pink:#ff2d8e; --purple:#3b4cff; --teal:#3c8a1e; --amber:#ff6a1f; --grad:linear-gradient(90deg,#3b4cff,#ff2d8e,#c6f03a); --shadow:4px 4px 0 #111111; } body.rd-voltage .fx{display:none} body.rd-voltage .grid-ov{display:none} body.rd-voltage nav{background:var(--bg);border-bottom:2px solid #111} body.rd-voltage .logoword,body.rd-voltage .grad{background:none;-webkit-text-fill-color:#111;color:#111;font-family:'Space Grotesk',sans-serif;font-weight:700} body.rd-voltage .hero-t .grad{color:var(--accent);-webkit-text-fill-color:var(--accent)} body.rd-voltage h1.hero-t,body.rd-voltage .shead h2,body.rd-voltage .ctaband h2{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.03em;text-transform:uppercase} body.rd-voltage .tag{color:var(--accent);font-weight:700} body.rd-voltage .btn{border-radius:0} body.rd-voltage .btn.pri{background:var(--accent);border:2px solid #111;box-shadow:4px 4px 0 #111;transition:transform .1s ease-out,box-shadow .1s ease-out} body.rd-voltage .btn.pri span{background:none;-webkit-text-fill-color:#fff;color:#fff;font-weight:700} body.rd-voltage .btn.pri:hover{transform:none;box-shadow:4px 4px 0 #111} body.rd-voltage .btn.pri:active{transform:translate(2px,2px);box-shadow:0 0 0 #111} body.rd-voltage .btn.ghost{border-radius:0;border:2px solid #111;background:#fff;box-shadow:4px 4px 0 #111} body.rd-voltage .btn.ghost:hover{background:#fff;color:var(--accent);border-color:#111} body.rd-voltage .btn.ghost:active{transform:translate(2px,2px);box-shadow:0 0 0 #111} body.rd-voltage .glass{border-radius:0;background:#fff;border:2px solid #111;box-shadow:8px 8px 0 #111} body.rd-voltage .glass::before{background:var(--accent);opacity:1;height:4px} body.rd-voltage .mock .glow{display:none} body.rd-voltage .stat{border-radius:0;border:2px solid #111} body.rd-voltage .stat::after{width:6px} body.rd-voltage .stat .val{font-family:'Space Grotesk',sans-serif;font-weight:700} body.rd-voltage .stat .val.grad{color:var(--accent)} body.rd-voltage .feat,body.rd-voltage .step,body.rd-voltage .ctaband{background:#fff;border-radius:0;border:2px solid #111;box-shadow:6px 6px 0 #111} body.rd-voltage .feat::before{height:0} body.rd-voltage .feat::after{display:none} body.rd-voltage .feat .ic{border-radius:0;border:2px solid #111;background:var(--accent);color:#fff} body.rd-voltage .feat:hover{transform:translate(-1px,-1px);box-shadow:8px 8px 0 #111} body.rd-voltage .step .num{background:var(--accent);border:2px solid #111;border-radius:0;box-shadow:2px 2px 0 #111;color:#fff} body.rd-voltage .ctaband::before{display:none} body.rd-voltage .ctaband .halo{display:none} /* cabinet */ body.rd-voltage .dash{border-radius:0;border:2px solid #111;box-shadow:6px 6px 0 #111} body.rd-voltage .k .v{font-family:'Space Grotesk',sans-serif;font-weight:700} body.rd-voltage .iconbtn,body.rd-voltage .seg,body.rd-voltage .pbtn,body.rd-voltage .pill{border-radius:0;border-color:#111} body.rd-voltage .ordtbl thead th{text-transform:uppercase;font-weight:700;letter-spacing:.04em} body.rd-voltage .sidebar{border-radius:0;border-right:2px solid #111} body.rd-voltage .sidebar .sb-logo{background:none;-webkit-text-fill-color:#111;color:#111;font-weight:800} body.rd-voltage .sidebar .snav a.on{background:var(--accent);color:#fff;border-radius:0} /* ============================================================================ F · BINANCE — exchange crypto, near-black + galben iconic, verde/roșu buy/sell ============================================================================ */ body.rd-binance{ --accent:#fcd535; --accent2:#f0b90b; --bg:#0b0e11; --shell:#181a20; --panel:#1e2329; --panel2:#181a20; --inset:#2b3139; --line:#2b3139; --line2:#474d57; --ink:#eaecef; --ink-strong:#ffffff; --ink2:#b7bdc6; --mut:#848e9c; --mut2:#5e6673; --gold:#fcd535; --gold2:#f0b90b; --goldsoft:#2a2410; --goldline:#4a3f14; --green:#0ecb81; --greenline:#0b3d2c; --greensoft:#0a1f18; --red:#f6465d; --redline:#4a1f27; --blue:#4a9fff; --blueline:#1c3358; --bluesoft:#0e1a2a; --violet:#b18cff; --violetline:#3a3060; --violetsoft:#171228; --orange:#f0b90b; --track:#1e2329; --grid:#20262e; --rowline:#161a1f; --prodbg:#eaecef; --logo-ink:#fcd535; --bg2:#0b0e11; --pink:#fcd535; --purple:#f0b90b; --teal:#0ecb81; --amber:#fcd535; --grad:linear-gradient(90deg,#f0b90b,#fcd535); font-family:'IBM Plex Sans',system-ui,sans-serif; } body.rd-binance .fx{display:none} body.rd-binance .grid-ov{display:none} body.rd-binance nav{background:rgba(11,14,17,.9);border-bottom:1px solid var(--line)} body.rd-binance .logoword,body.rd-binance .grad{background:none;-webkit-text-fill-color:var(--accent);color:var(--accent);font-family:'IBM Plex Sans',sans-serif;font-weight:700} body.rd-binance .hero-t .grad{color:var(--accent);-webkit-text-fill-color:var(--accent)} body.rd-binance h1.hero-t,body.rd-binance .shead h2,body.rd-binance .ctaband h2{font-family:'IBM Plex Sans',sans-serif;font-weight:600;letter-spacing:-.02em} body.rd-binance .hero-sub,body.rd-binance .shead p,body.rd-binance .feat p,body.rd-binance .step p{font-family:'IBM Plex Sans',sans-serif} body.rd-binance .tag{color:var(--accent2);font-weight:600} body.rd-binance .btn{border-radius:8px} body.rd-binance .btn.pri{background:var(--accent);border:1px solid var(--accent)} body.rd-binance .btn.pri span{background:none;-webkit-text-fill-color:#181a20;color:#181a20;font-weight:600} body.rd-binance .btn.pri:hover{background:#ffe15a;box-shadow:none;transform:none} body.rd-binance .btn.ghost{border-radius:8px;border-color:var(--line2);background:var(--panel);color:var(--ink)} body.rd-binance .btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--panel)} body.rd-binance .glass{border-radius:12px;background:var(--panel);border:1px solid var(--line);box-shadow:0 8px 30px rgba(0,0,0,.4)} body.rd-binance .glass::before{background:var(--accent);opacity:1} body.rd-binance .mock .glow{display:none} body.rd-binance .stat{border-radius:8px;background:var(--inset);border-color:var(--line)} body.rd-binance .stat .val.grad{color:var(--accent)} body.rd-binance .feat,body.rd-binance .step,body.rd-binance .ctaband{background:var(--panel);border-radius:12px;box-shadow:none;border:1px solid var(--line)} body.rd-binance .feat::before{background:var(--accent);opacity:1;height:2px} body.rd-binance .feat::after{display:none} body.rd-binance .feat .ic{border-radius:10px;background:rgba(252,213,53,.12);border-color:rgba(252,213,53,.3);color:var(--accent)} body.rd-binance .step .num{background:var(--accent);color:#181a20;border-radius:10px;box-shadow:none} body.rd-binance .ctaband::before{background:var(--accent);opacity:.6} body.rd-binance .ctaband .halo{background:radial-gradient(closest-side,rgba(252,213,53,.4),transparent 70%);opacity:.18} /* cabinet */ body.rd-binance .dash{border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.4)} body.rd-binance .k .v,body.rd-binance .stat .val{font-family:'IBM Plex Sans',sans-serif;font-weight:600} body.rd-binance .ch .t{font-family:'IBM Plex Sans',sans-serif} body.rd-binance .iconbtn,body.rd-binance .seg,body.rd-binance .pbtn,body.rd-binance .pill{border-radius:8px} body.rd-binance .seg button.on,body.rd-binance .pbtn.on{background:var(--accent);color:#181a20;border-color:var(--accent);font-weight:600} body.rd-binance .sidebar .sb-logo{background:none;-webkit-text-fill-color:var(--accent);color:var(--accent);font-family:'IBM Plex Sans',sans-serif;font-weight:700} body.rd-binance .sidebar .snav a.on{background:rgba(252,213,53,.14);color:var(--accent)} /* ---- STRUCTURĂ Binance #1: shell cu nav permanent pe stânga (cabinet) ---- */ body.rd-binance .side-show,body.rd-binance .side-hot{display:none!important} body.rd-binance.has-sidebar .sb-ctrls{display:none} body.rd-binance.has-sidebar .sidebar{transform:none!important;display:flex;width:224px;background:var(--shell); border-right:1px solid var(--line);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:18px 12px 16px} body.rd-binance.has-sidebar .sidebar .sb-top{margin-bottom:20px} /* împinge conținutul lângă rail — DOAR wrap-urile care conțin dashboard-ul (nu landing-ul) */ body.rd-binance.has-sidebar .wrap:has(.dash){margin:26px 24px 60px 248px;max-width:none;width:auto} /* pe mobil: rail-ul dispare, rămâne meniul din header */ @media(max-width:900px){ body.rd-binance.has-sidebar .wrap:has(.dash){margin:26px 20px 60px} body.rd-binance.has-sidebar .sidebar{display:none} } /* ---- STRUCTURĂ Binance #3: ticker de piață sus (injectat de themes.js, oglindește KPI-urile reale) ---- */ body.rd-binance .bnx-ticker{display:flex;align-items:stretch;overflow-x:auto;background:var(--bg); border-bottom:1px solid var(--line);font-family:'IBM Plex Sans',sans-serif;scrollbar-width:none} body.rd-binance .bnx-ticker::-webkit-scrollbar{display:none} body.rd-binance .bnx-item{display:inline-flex;align-items:baseline;gap:8px;padding:9px 20px; border-right:1px solid var(--line);white-space:nowrap} body.rd-binance .bnx-item i{font-style:normal;color:var(--mut);text-transform:uppercase;font-size:10px;letter-spacing:.05em} body.rd-binance .bnx-item b{font-weight:600;color:var(--ink-strong);font-size:13px;font-variant-numeric:tabular-nums} body.rd-binance .bnx-item em{font-style:normal;color:var(--mut2);font-size:11px;font-variant-numeric:tabular-nums} body.rd-binance .bnx-item em.up{color:var(--green)} body.rd-binance .bnx-item em.dn{color:var(--red)} /* dot „live" verde ca la exchange */ body.rd-binance .bnx-live{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.05em;border-right:1px solid var(--line)} body.rd-binance .bnx-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(14,203,129,.6);animation:bnxpulse 2s infinite} @keyframes bnxpulse{0%{box-shadow:0 0 0 0 rgba(14,203,129,.5)}70%{box-shadow:0 0 0 6px rgba(14,203,129,0)}100%{box-shadow:0 0 0 0 rgba(14,203,129,0)}} /* ---- STRUCTURĂ Binance #2: hero „split" pe landing (text stânga · mock dreapta) ---- */ body.rd-binance .hero{padding:72px 0 40px;text-align:left} body.rd-binance .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;max-width:1200px; grid-template-areas:"t m" "s m" "c m" "n m"} body.rd-binance h1.hero-t{grid-area:t;margin:0;max-width:none;text-align:left} body.rd-binance .hero-sub{grid-area:s;margin:18px 0 0;text-align:left;max-width:52ch} body.rd-binance .hero-cta{grid-area:c;justify-content:flex-start;margin-top:26px} body.rd-binance .hero-note{grid-area:n;text-align:left} body.rd-binance .hero .mock{grid-area:m;margin:0;max-width:none;align-self:center} @media(max-width:900px){ body.rd-binance .hero{text-align:center} body.rd-binance .hero .wrap{grid-template-columns:1fr;grid-template-areas:"t" "s" "c" "n" "m";gap:0} body.rd-binance h1.hero-t,body.rd-binance .hero-sub,body.rd-binance .hero-note{text-align:center;max-width:none} body.rd-binance .hero-sub{margin-left:auto;margin-right:auto} body.rd-binance .hero-cta{justify-content:center} body.rd-binance .hero .mock{margin-top:48px} } /* ---------- picker de teme (identic cu themes.css; necesar și pe landing, care nu încarcă themes.css) ---------- */ .thememodal{position:fixed;inset:0;z-index:200;display:flex;align-items:stretch;justify-content:flex-end;padding:0;background:transparent} .thememodal[hidden]{display:none} .thememodal .tmcard{width:296px;max-width:86vw;height:100%;overflow-y:auto;background:var(--glass-shell,rgba(20,18,30,.96));border:1px solid var(--glass-border,rgba(255,255,255,.12));border-right:0;border-radius:18px 0 0 18px;padding:18px 18px 24px;backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2);box-shadow:-28px 0 80px rgba(0,0,0,.5);animation:tmslide .28s cubic-bezier(.4,0,.2,1)} @keyframes tmslide{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}} .thememodal .tmhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px} .thememodal .tmhead b{font-family:'Fraunces',serif;font-size:19px;color:var(--ink-strong,#f2f4f7)} .thememodal .tmsub{font-size:12.5px;color:var(--mut,#828b98);margin-bottom:16px} .thememodal .tmclose{background:none;border:1px solid var(--line2);color:var(--mut);border-radius:9px;padding:6px 12px;font-family:inherit;font-size:12.5px;cursor:pointer} .thememodal .tmclose:hover{color:var(--ink);border-color:var(--mut2)} .themegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px} .theme-sw{display:flex;flex-direction:column;gap:8px;background:none;border:1.5px solid var(--line2);border-radius:14px;padding:8px;cursor:pointer;transition:.15s;font-family:inherit} .theme-sw:hover{border-color:var(--mut2)} .theme-sw.on{border-color:#9b5cff;box-shadow:0 0 0 3px rgba(155,92,255,.22)} .theme-sw .sw-prev{height:48px;border-radius:9px;border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)} .theme-sw .sw-name{font-size:12.5px;color:var(--ink2);font-weight:600;text-align:left;display:flex;align-items:center;gap:5px} .theme-sw.on .sw-name{color:var(--ink-strong)} .theme-sw .sw-side{font-size:11px;color:#9b5cff;font-style:normal} /* separator „Redesign complet" în picker */ .themegrid .tm-sep{grid-column:1/-1;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);margin:10px 2px 2px;display:flex;align-items:center;gap:8px;font-weight:600} .themegrid .tm-sep::after{content:"";flex:1;height:1px;background:var(--line2)} .theme-sw.is-rd .sw-side{color:#9b5cff;font-style:normal} /* reduced motion: fără sweep-uri/tranziții agresive */ @media(prefers-reduced-motion:reduce){ body[class*="rd-"] .btn,body[class*="rd-"] .btn.pri::before{transition:none} }