:root{
  --bg:#193dc0;
  --bg-deep:#0a1641;
  --panel:#090d1a;
  --panel-2:#0f172a;
  --line:#00acff;
  --line-soft:rgba(0,172,255,.35);
  --danger:#ff003b;
  --text:#f4f7ff;
  --muted:#c7d3ff;
  --gold:#da9629;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;color:var(--text);font-family:Segoe UI,Arial,sans-serif;background:radial-gradient(900px 500px at 10% -10%, rgba(0,172,255,.18), transparent 60%),radial-gradient(700px 420px at 100% 10%, rgba(255,0,59,.14), transparent 60%),linear-gradient(180deg, #1738b9 0%, #10216d 35%, #090f29 100%);background-attachment: fixed;position:relative;}
body::before{content:"";position:fixed;inset:0;background-image:url("../Reacthome/images/bgimg.png");background-size:cover;background-position:center top;opacity:.08;pointer-events:none;z-index:-2;}
body::after{content:"";position:fixed;inset:0;background:linear-gradient(180deg, rgba(7,10,22,.10), rgba(7,10,22,.45) 40%, rgba(7,10,22,.75));pointer-events:none;z-index:-1;}
a{color:inherit;text-decoration:none}
.page-wrap{min-height:100vh;padding-bottom:48px}
.brand-logo{height:52px;width:auto; object-fit:contain;filter: drop-shadow(0 4px 10px rgba(0,172,255,.25));}
.navbar{background:linear-gradient(180deg, rgba(25,61,192,.96), rgba(16,33,109,.92)) !important;border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter: blur(10px);}
.navbar .navbar-brand span{letter-spacing:.3px;text-shadow:0 0 18px rgba(0,172,255,.35);}
.glass{background:linear-gradient(180deg, rgba(8,13,29,.78), rgba(8,13,29,.88));border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 28px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,172,255,.18);backdrop-filter: blur(14px);}
.panel{background:linear-gradient(180deg, rgba(10,14,28,.92), rgba(8,11,22,.95));border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 34px rgba(0,0,0,.35),0 0 0 1px rgba(0,172,255,.12) inset,0 0 28px rgba(0,172,255,.08);}
.panel.rounded, .glass.rounded, .hero-box{border-radius:18px !important}
.hero-box{max-width:980px;width:100%;padding:26px;position:relative;overflow:hidden;}
.hero-box::before{content:"";position:absolute;inset:auto -60px -60px auto;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle, rgba(0,172,255,.28), rgba(0,172,255,0));pointer-events:none;}
.hero-box::after{content:"";position:absolute;inset:-50px auto auto -50px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle, rgba(255,0,59,.18), rgba(255,0,59,0));pointer-events:none;}
.btn-primary-lite{background:linear-gradient(180deg, #1bc5ff 0%, #00a4ff 45%, #0a75ff 100%);border:1px solid rgba(0,172,255,.55);color:#fff;box-shadow:0 8px 18px rgba(0,172,255,.28), inset 0 0 0 1px rgba(255,255,255,.08);} .btn-primary-lite:hover{color:#fff; filter:brightness(1.06); transform:translateY(-1px)}
.btn-danger-lite{background:linear-gradient(180deg, #ff255f 0%, #ff003b 55%, #c1002b 100%);border:1px solid rgba(255,0,59,.55);color:#fff;box-shadow:0 8px 18px rgba(255,0,59,.25), inset 0 0 0 1px rgba(255,255,255,.08);} .btn-danger-lite:hover{color:#fff; filter:brightness(1.04); transform:translateY(-1px)}
.btn-outline-light{border-color:rgba(255,255,255,.28)} .btn-outline-light:hover{background:rgba(255,255,255,.08)} .btn{transition:.2s ease}
.kv{display:flex;justify-content:space-between;gap:10px;padding:.72rem .85rem;border-radius:12px;border:1px solid rgba(255,255,255,.07);margin-bottom:.65rem;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.015));box-shadow: inset 0 0 0 1px rgba(0,172,255,.08);} .kv .k{color:#d8e4ff}.kv .v{font-weight:700;text-align:right;word-break:break-all}
.msg{position:fixed;top:14px;right:14px;z-index:2000;min-width:260px;max-width:min(520px,92vw)}
.tabs-wrap{position:sticky; top:0; z-index:1020;background:linear-gradient(180deg, rgba(16,33,109,.90), rgba(11,21,64,.92));border-bottom:1px solid rgba(255,255,255,.06) !important;backdrop-filter: blur(10px);padding:8px 0;}
.nav-tab{display:inline-flex;align-items:center;justify-content:center;min-width:110px;padding:.48rem .95rem;border-radius:999px;color:#fff;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.11);font-weight:600;font-size:.92rem;box-shadow: inset 0 0 0 1px rgba(0,172,255,.04);} .nav-tab:hover{background:rgba(0,172,255,.09);border-color:rgba(0,172,255,.35);color:#fff} .nav-tab.active{background:linear-gradient(180deg, rgba(0,172,255,.28), rgba(0,172,255,.20));border-color:rgba(0,172,255,.65);color:#fff;font-weight:700;box-shadow:0 6px 14px rgba(0,172,255,.12), inset 0 0 0 1px rgba(0,172,255,.25);}
.table{margin-bottom:.6rem}.table-dark-custom{--bs-table-bg: transparent;--bs-table-color: #eef5ff;--bs-table-border-color: rgba(255,255,255,.08);} .table-dark-custom thead th{background:linear-gradient(180deg, rgba(0,172,255,.14), rgba(0,172,255,.08));color:#dff4ff;border-color:rgba(255,255,255,.1);font-weight:600;white-space:nowrap;} .table-dark-custom td{background:rgba(255,255,255,.015);border-color:rgba(255,255,255,.07);vertical-align:middle;} .table-dark-custom tbody tr:nth-child(even) td{ background:rgba(255,255,255,.025); }
.table-responsive{border-radius:14px;border:1px solid rgba(255,255,255,.07);overflow:hidden;box-shadow: inset 0 0 0 1px rgba(0,172,255,.08);}
.small-muted{color:var(--muted);font-size:.9rem}
.card-stat{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08);padding:12px;border-radius:14px;height:100%;box-shadow: inset 0 0 0 1px rgba(0,172,255,.06);} .card-stat h6{margin:0 0 8px;color:#d6e4ff;font-size:.92rem;font-weight:600}
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px}.pkg-btn{padding:.78rem .7rem;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.02);color:#fff;border-radius:12px;text-align:center;cursor:pointer;box-shadow: inset 0 0 0 1px rgba(0,172,255,.05);} .pkg-btn:hover{border-color:rgba(0,172,255,.35)} .pkg-btn.locked{opacity:.42;cursor:not-allowed;filter:grayscale(.15)} .pkg-btn.selected{border-color:rgba(0,172,255,.7);box-shadow:0 8px 18px rgba(0,172,255,.10), inset 0 0 0 1px rgba(0,172,255,.22);background:linear-gradient(180deg, rgba(0,172,255,.12), rgba(0,172,255,.05));}
.center-hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.social-icon{width:36px;height:36px;object-fit:contain;display:block}.logo-big{max-width:180px;width:100%;filter: drop-shadow(0 8px 18px rgba(0,172,255,.18));}
.community-tree .node-btn{min-width:110px}.community-node{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border-radius:12px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);} .community-level{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.input-dark,.select-dark{background:rgba(15,23,42,.92);color:#fff;border:1px solid rgba(255,255,255,.14);} .input-dark:focus,.select-dark:focus,.form-control.input-dark:focus,.form-select.select-dark:focus{background:#111a30;color:#fff;border-color:rgba(0,172,255,.65);box-shadow:0 0 0 .2rem rgba(0,172,255,.15);} .input-dark::placeholder{color:#c8d2ff}
.loading-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:1500}.loading-overlay.show{display:flex}
.link-list a{background:linear-gradient(180deg, rgba(0,172,255,.16), rgba(0,172,255,.07));border:1px solid rgba(0,172,255,.35);padding:8px;display:inline-flex;border-radius:10px}.link-list a:hover{transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,172,255,.12)}
.countdown-box{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.countdown-box .cd{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.07);padding:10px 14px;border-radius:12px;min-width:84px;text-align:center;box-shadow: inset 0 0 0 1px rgba(0,172,255,.07);}
code.inline{background:#0f172a;color:#9bdcff;padding:2px 5px;border-radius:4px}
.page-head{margin: 18px auto 16px;border-radius:16px;padding: 14px 16px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012));box-shadow: inset 0 0 0 1px rgba(0,172,255,.08);} .page-head h1, .page-head h2, .page-head h3{margin:0;font-size:1.15rem}.page-head p{margin:.35rem 0 0;color:var(--muted);font-size:.9rem}
.badge-neon{display:inline-flex; align-items:center; gap:6px;border:1px solid rgba(0,172,255,.35);background:rgba(0,172,255,.08);color:#dff7ff;padding:.35rem .65rem;border-radius:999px; font-size:.8rem; font-weight:600;} .badge-neon .dot{width:8px;height:8px;border-radius:50%;background:#31d7ff; box-shadow:0 0 10px #31d7ff}
.section-title{font-size: clamp(1.3rem, 2vw, 1.9rem);font-weight:700;letter-spacing:.2px;}.section-sub{color:var(--muted)}.soft-divider{height:1px;border:0;margin:22px 0;background:linear-gradient(90deg, transparent, rgba(0,172,255,.4), transparent);}
.marketing-shell{position:relative;overflow:hidden;}.marketing-shell .hero-main{padding: 44px 0 24px;}.marketing-shell .hero-card{padding: 26px;}.marketing-shell .hero-card h1{font-size: clamp(1.9rem, 4vw, 3rem);line-height:1.1;margin: 8px 0 10px;}.marketing-shell .hero-card p{color: var(--muted);font-size: 1rem;}.marketing-shell .orb{position:absolute;border-radius:50%; filter: blur(12px); opacity:.45; pointer-events:none;}.marketing-shell .orb.a{width:180px;height:180px;background:#00acff; top:50px; left:-40px;}.marketing-shell .orb.b{width:140px;height:140px;background:#ff003b; top:220px; right:-20px;}
.marketing-shell .hero-art{border-radius: 20px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));box-shadow: inset 0 0 0 1px rgba(0,172,255,.08), 0 14px 34px rgba(0,0,0,.32);} .marketing-shell .hero-art img{width:100%;height:auto;display:block;}
.stat-pill{border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);padding:12px 14px;}.stat-pill .num{font-weight:700;font-size:1.15rem}.stat-pill .lbl{color:var(--muted);font-size:.88rem}
.feature-card{height:100%;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.012));padding:16px;box-shadow: inset 0 0 0 1px rgba(0,172,255,.05);} .feature-card .icon-wrap{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(0,172,255,.10);border:1px solid rgba(0,172,255,.28);margin-bottom:10px;} .feature-card h5{margin:0 0 8px}.feature-card p{margin:0;color:var(--muted);font-size:.92rem}
.launch-strip{border-radius:18px;border:1px solid rgba(255,255,255,.08);padding:16px;background:radial-gradient(500px 140px at 0% 0%, rgba(0,172,255,.10), transparent 70%),radial-gradient(400px 140px at 100% 100%, rgba(255,0,59,.08), transparent 70%),rgba(255,255,255,.015);}
.link-card{border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.015);padding:10px 12px;display:flex; align-items:center; justify-content:space-between; gap:10px;} .link-card:hover{border-color:rgba(0,172,255,.35);background:rgba(0,172,255,.04)}
.footer-lite{color:var(--muted);border-top:1px solid rgba(255,255,255,.06);padding:20px 0 30px;}
.auth-shell{width:100%;max-width:1100px;display:grid;grid-template-columns: 1.08fr .92fr;gap:18px;align-items:stretch;}.auth-visual{padding:24px;position:relative;overflow:hidden;}.auth-visual h2{font-size:clamp(1.6rem,3vw,2.4rem);margin:6px 0 10px}.auth-visual p{color:var(--muted)}.auth-visual img{max-width:100%;max-height:330px;object-fit:contain;display:block;margin:8px auto 0;}.auth-card{padding:24px}
.quick-nav-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px;}.quick-nav-grid a{border-radius:12px; border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.015); padding:10px 12px; display:block;}.quick-nav-grid a:hover{border-color:rgba(0,172,255,.35)}.quick-nav-grid small{color:var(--muted); display:block}
.form-label{color:#e6efff;font-weight:600}
@media (max-width: 991.98px){.auth-shell{grid-template-columns:1fr}.hero-box{padding:20px}}
@media (max-width: 767.98px){.nav-tab{min-width:auto;padding:.42rem .8rem;font-size:.88rem}.brand-logo{height:44px}.center-hero{padding:14px}.hero-box{border-radius:16px !important}.marketing-shell .hero-main{padding-top:24px}}