/* ============================================================
   PRINCE MIZAN PORTAL — ALL IN ONE PLATFORM
   Dark navy dashboard design (exact per Prince Mizan's photo):
   top hero widgets + All Modules sidebar + module grid.
   3D realistic BLUE + RED + GREEN + BLACK color combine.
   Software by Prince Mizan | 0544366014
   ============================================================ */
:root{
  --bg:#0a0e23; --bg-2:#0d1230;
  --card:#111634; --card-2:#181f4a;
  --border:#272f66; --border-2:#36407f;
  --text:#eef1ff; --muted:#8b93bb;
  --gold:#f5b940; --gold-2:#ffd166;
  --green:#2fd374; --green-2:#8affb9;
  --red:#ff4d6d;  --red-2:#ff8ba0;
  --blue:#4f7cff; --blue-2:#8fadff;
  --cyan:#38bdf8; --ink:#05070f;
  --ok:#2fd374; --err:#ff4d6d;
  --glow1:rgba(79,124,255,.14); --glow2:rgba(255,77,109,.10); --glow3:rgba(47,211,116,.08);
  --shadow:0 10px 28px rgba(2,5,18,.55);
  --radius:16px;
}

/* ============ THEME COLOR BOX — 6 switchable themes (v4.1) ============ */
html[data-theme="blue"]{--bg:#060d2b;--bg-2:#091238;--card:#0d1a46;--card-2:#13245e;--border:#22407f;--border-2:#3157a3;
  --glow1:rgba(79,124,255,.24);--glow2:rgba(56,189,248,.13);--glow3:rgba(143,173,255,.10)}
html[data-theme="red"]{--bg:#220610;--bg-2:#2b0a16;--card:#340d1d;--card-2:#47132a;--border:#6b1f3a;--border-2:#8f2a4e;
  --glow1:rgba(255,77,109,.20);--glow2:rgba(255,138,160,.10);--glow3:rgba(245,185,64,.07)}
html[data-theme="green"]{--bg:#04170f;--bg-2:#062015;--card:#082a1c;--card-2:#0c3a27;--border:#145238;--border-2:#1c6f4c;
  --glow1:rgba(47,211,116,.18);--glow2:rgba(138,255,185,.09);--glow3:rgba(79,124,255,.08)}
html[data-theme="black"]{--bg:#08090c;--bg-2:#0c0e13;--card:#101319;--card-2:#161a23;--border:#232833;--border-2:#333a4a;
  --glow1:rgba(160,180,220,.10);--glow2:rgba(255,77,109,.07);--glow3:rgba(47,211,116,.06)}
html[data-theme="purple"]{--bg:#120726;--bg-2:#180a31;--card:#1e0d3d;--card-2:#291352;--border:#3d1f7a;--border-2:#542aa3;
  --glow1:rgba(164,110,255,.20);--glow2:rgba(255,77,214,.10);--glow3:rgba(79,124,255,.10)}

*{box-sizing:border-box} html{scroll-behavior:smooth}
body{
  margin:0;color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased;
  font-family:'Poppins','Segoe UI',Tahoma,'Noto Sans Bengali','Noto Sans Arabic',system-ui,Arial,sans-serif;
  background:
    radial-gradient(900px 420px at 8% -4%, var(--glow1), transparent 60%),
    radial-gradient(760px 380px at 96% -2%, var(--glow2), transparent 60%),
    radial-gradient(820px 460px at 50% 118%, var(--glow3), transparent 62%),
    var(--bg);
  background-attachment:fixed;
}
img{max-width:100%} a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:none;filter:brightness(1.12)}
h1,h2,h3,h4{line-height:1.3;margin:.4em 0}
.container{max-width:1280px;margin:0 auto;padding:0 16px}
.muted{color:var(--muted)} .small{font-size:.85rem} .ok{color:var(--ok)} .err{color:var(--err)}
.skip-link{position:absolute;left:-999px} .skip-link:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:999}
::selection{background:rgba(245,185,64,.35)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0a0e23}
::-webkit-scrollbar-thumb{background:#272f66;border-radius:99px;border:2px solid #0a0e23}
::-webkit-scrollbar-thumb:hover{background:#36407f}

/* ============ TOP BAR (module pages — slim dark navy) ============ */
.topbar{position:sticky;top:0;z-index:60;background:rgba(10,14,35,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);box-shadow:0 6px 24px rgba(2,5,18,.5)}
.topbar-inner{display:flex;align-items:center;gap:13px;padding:9px 18px;max-width:1280px;margin:0 auto}
.burger{display:flex;flex-direction:column;gap:4px;background:rgba(255,255,255,.07);border:1px solid var(--border);
  border-radius:10px;padding:9px 10px;cursor:pointer;transition:.15s}
.burger:hover{background:rgba(255,255,255,.12);border-color:var(--border-2)}
.burger span{width:20px;height:2px;background:var(--gold);border-radius:2px;display:block}
/* v4.4: logo +75% bigger than v4.3 (55px → 96px) + all title text stacked UNDER the logo */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex:1;min-width:0}
.brand-logo{width:96px;height:96px;border-radius:50%;padding:2.5px;flex:0 0 auto;
  background:conic-gradient(#ff2d2d,#ff9a00,#eaff00,#2bff5c,#00e5ff,#2d5bff,#b43bff,#ff2d2d);
  animation:rgb-spin 4s linear infinite}
.brand-logo-img{width:100%;height:100%;border-radius:50%;overflow:hidden;background:#0a0e23;display:flex;align-items:center;justify-content:center}
.brand-logo img{width:100%;height:100%;object-fit:cover}
.brand-logo-fallback{font-weight:800;color:var(--gold);letter-spacing:.5px;font-size:.9rem}
.brand-text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.brand-text strong{font-size:1rem;color:#fff;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-text strong em{font-style:normal;color:var(--gold)}
.brand-text small{font-size:.68rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-actions{display:flex;align-items:center;gap:10px}
.tb-chip{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);
  color:var(--text);font-size:.74rem;font-weight:600;padding:6px 12px;border-radius:99px}
.tb-chip b{color:var(--green)}
.tb-wa{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#2fe07a,#1fa855);color:#fff;
  font-size:.76rem;font-weight:700;padding:7px 14px;border-radius:99px;box-shadow:0 4px 12px rgba(34,193,94,.35)}

/* ============ THEME COLOR BOX + LANGUAGE BAR (v4.1 — restored) ============ */
.pick-row{display:flex;justify-content:flex-end;gap:9px;padding:12px 2px 0}
.pm-picker{position:relative;display:inline-flex;align-items:center}
.pm-lang{background:var(--card);border:1px solid var(--border);border-radius:99px;padding:3px;gap:2px;box-shadow:var(--shadow)}
.pm-lang-l{font-size:.7rem;font-weight:700;color:var(--muted);padding:4px 11px;border-radius:99px;line-height:1.3;transition:.15s}
.pm-lang-l:hover{color:var(--text)}
.pm-lang-l.on{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#231a05;box-shadow:0 2px 8px rgba(245,185,64,.35)}
.pm-theme-btn{width:36px;height:32px;border-radius:99px;border:1px solid var(--border);background:var(--card);cursor:pointer;
  font-size:.95rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:.15s;box-shadow:var(--shadow)}
.pm-theme-btn:hover{border-color:var(--border-2);transform:rotate(14deg) scale(1.06)}
.pm-theme-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:120;background:linear-gradient(165deg,var(--card-2),var(--card));
  border:1px solid var(--border-2);border-radius:14px;padding:11px 13px;box-shadow:0 16px 38px rgba(2,5,18,.65);
  display:none;flex-direction:column;gap:8px;min-width:172px}
.pm-theme-pop.open{display:flex}
.pm-theme-t{font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--gold)}
.pm-theme-dots{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.pm-dot{width:21px;height:21px;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:var(--c);cursor:pointer;
  transition:.14s;position:relative;padding:0}
.pm-dot:hover{transform:scale(1.22);border-color:#fff}
.pm-dot.on{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,185,64,.28)}
.pm-dot.on::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:.62rem;font-weight:900;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8)}
@media(max-width:640px){
  .pick-row{justify-content:center;padding-top:10px}
  .pm-theme-pop{right:auto;left:50%;transform:translateX(-50%)}
  .pm-theme-pop.open{display:flex}
}

/* ============ SHELL: sidebar + main ============ */
.shell{display:grid;grid-template-columns:256px minmax(0,1fr);gap:18px;max-width:1280px;margin:0 auto;padding:18px 16px 10px;align-items:start}
.site-main{min-width:0}

/* ---------- Dashboard sidebar (All Modules) ---------- */
.dash-side{background:linear-gradient(165deg,var(--card-2),var(--card) 55%);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 12px;position:sticky;top:18px;
  display:flex;flex-direction:column;max-height:calc(100vh - 36px)}
.side-head{display:flex;align-items:center;gap:8px;font-size:.98rem;font-weight:800;color:var(--gold);
  padding:4px 8px 12px;border-bottom:1px solid var(--border);letter-spacing:.3px}
.side-list{flex:1;overflow-y:auto;padding:8px 2px 6px;margin:0 -2px}
.side-link{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:11px;color:var(--text);
  font-size:.85rem;font-weight:500;transition:.14s;position:relative}
.side-link:hover{background:rgba(79,124,255,.12);transform:translateX(2px)}
.side-link.active{background:rgba(245,185,64,.13);color:var(--gold-2)}
.side-em{width:26px;min-width:26px;text-align:center;font-size:1.05rem;line-height:1;
  filter:drop-shadow(0 2px 3px rgba(2,5,18,.6));transition:transform .18s}
.side-link:hover .side-em{transform:scale(1.22)}
.side-link span.lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-admin{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;padding:11px 10px;
  border-radius:12px;font-weight:800;font-size:.9rem;color:#231a05;
  background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,#e09e1f);
  box-shadow:0 6px 18px rgba(245,185,64,.35),inset 0 1px 1px rgba(255,255,255,.55);transition:.16s}
.side-admin:hover{filter:brightness(1.07);transform:translateY(-1px)}
.side-foot{padding:9px 6px 2px;font-size:.64rem;color:var(--muted);text-align:center;border-top:1px solid var(--border);margin-top:9px}
/* category heading — quick icons grouped BY CATEGORY (v4.1) */
.side-cat{display:flex;align-items:center;gap:6px;font-size:.62rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold);opacity:.85;margin:12px 6px 3px;padding-bottom:4px;border-bottom:1px dashed rgba(245,185,64,.25)}
.side-cat:first-child{margin-top:2px}
.side-cat::before{content:"▸";font-size:.7rem}

/* badges (sidebar + grid cards) */
.bdg{display:inline-flex;align-items:center;justify-content:center;font-size:.56rem;font-weight:800;letter-spacing:.06em;
  padding:2.5px 7px;border-radius:99px;line-height:1;flex:0 0 auto}
.bdg.live{background:linear-gradient(135deg,#ffe08a,#f5b940);color:#231a05;box-shadow:0 2px 7px rgba(245,185,64,.4)}
.bdg.hot {background:linear-gradient(135deg,#ff7a94,#ff2d55);color:#fff;box-shadow:0 2px 7px rgba(255,45,85,.4)}
.bdg.new {background:linear-gradient(135deg,#7dd8fc,#38bdf8);color:#04283c;box-shadow:0 2px 7px rgba(56,189,248,.4)}
.bdg.three{background:linear-gradient(135deg,#8fadff,#4f7cff);color:#fff;box-shadow:0 2px 7px rgba(79,124,255,.4)}
.bdg.ten {background:linear-gradient(135deg,#8affb9,#2fd374);color:#04331b;box-shadow:0 2px 7px rgba(47,211,116,.4)}

/* floating menu button (mobile, homepage has no topbar) */
.m-fab{display:none;position:fixed;top:14px;left:14px;z-index:80;width:46px;height:46px;border-radius:13px;
  background:rgba(17,22,52,.92);border:1px solid var(--border-2);color:var(--gold);font-size:1.25rem;
  align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow);backdrop-filter:blur(8px)}

/* ============ 3D ICONS (menu + page titles) ============ */
.icon-3d{
  width:46px;height:46px;min-width:46px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  font-size:23px;position:relative;transform-style:preserve-3d;
  transform:perspective(260px) rotateX(12deg) rotateY(-12deg);
  background:linear-gradient(145deg,#232b63,#131838);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:3px 5px 10px rgba(2,5,18,.6),2px 2px 0 #0b0f26,inset -2px -3px 6px rgba(2,5,18,.55),inset 2px 2px 4px rgba(120,140,255,.16);
  transition:transform .22s ease, box-shadow .22s ease;
}
.icon-3d.red{background:linear-gradient(145deg,#4a1c30,#230d1a);box-shadow:3px 5px 10px rgba(60,5,25,.55),2px 2px 0 #1c0a13,inset -2px -3px 6px rgba(40,3,18,.6),inset 2px 2px 4px rgba(255,120,150,.2)}
.icon-3d.green{background:linear-gradient(145deg,#11402c,#072415);box-shadow:3px 5px 10px rgba(4,45,25,.55),2px 2px 0 #06180e,inset -2px -3px 6px rgba(3,32,18,.6),inset 2px 2px 4px rgba(120,255,180,.18)}
.icon-3d.black{background:linear-gradient(145deg,#2a3140,#0b0e17);box-shadow:3px 5px 10px rgba(0,0,0,.65),2px 2px 0 #05070d,inset -2px -3px 6px rgba(0,0,0,.6),inset 2px 2px 4px rgba(160,180,220,.14)}
.menu-link:hover .icon-3d,.card:hover .card-icon,.card:focus-visible .card-icon{transform:perspective(260px) rotateX(0deg) rotateY(0deg) translateZ(12px) scale(1.08)}
.card-icon{width:60px;height:60px;font-size:30px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;
  transform:perspective(300px) rotateX(14deg) rotateY(-14deg);
  background:linear-gradient(145deg,#232b63,#131838);border:1px solid rgba(255,255,255,.09);
  box-shadow:4px 6px 12px rgba(2,5,18,.6),3px 3px 0 #0b0f26,inset -2px -3px 6px rgba(2,5,18,.55),inset 2px 2px 4px rgba(120,140,255,.16);
  transition:transform .22s ease}
.card-icon.red{background:linear-gradient(145deg,#4a1c30,#230d1a);box-shadow:4px 6px 12px rgba(60,5,25,.55),3px 3px 0 #1c0a13,inset -2px -3px 6px rgba(40,3,18,.6),inset 2px 2px 4px rgba(255,120,150,.2)}
.card-icon.green{background:linear-gradient(145deg,#11402c,#072415);box-shadow:4px 6px 12px rgba(4,45,25,.55),3px 3px 0 #06180e,inset -2px -3px 6px rgba(3,32,18,.6),inset 2px 2px 4px rgba(120,255,180,.18)}
.card-icon.black{background:linear-gradient(145deg,#2a3140,#0b0e17);box-shadow:4px 6px 12px rgba(0,0,0,.65),3px 3px 0 #05070d,inset -2px -3px 6px rgba(0,0,0,.6),inset 2px 2px 4px rgba(160,180,220,.14)}

/* ============ HERO WIDGET ROW (v4.2 new header design) ============ */
.hero-row{display:grid;grid-template-columns:1.5fr 1.12fr .92fr .92fr 1.22fr;gap:13px;margin-bottom:20px;align-items:stretch}
.hg-col{display:flex;flex-direction:column;gap:13px;min-width:0}
.hg-col .hg-card{flex:1;min-height:0}
.hg-card{background:linear-gradient(160deg,var(--card-2),var(--card) 62%);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 15px;display:flex;flex-direction:column;gap:9px;
  min-height:168px;position:relative;overflow:hidden;transition:transform .18s,border-color .18s}
.hg-card:hover{transform:translateY(-3px);border-color:var(--border-2)}
.hg-head{display:flex;align-items:center;gap:7px;font-size:.85rem;font-weight:700;color:var(--text)}
.hg-head .em{font-size:1.05rem}
.hg-title-b{color:var(--gold)}
.hg-link{margin-top:auto;align-self:flex-start;font-size:.74rem;font-weight:700;color:var(--gold);transition:.15s}
.hg-link:hover{filter:brightness(1.15)}
.hg-link::after{content:" →"}
/* profile card — v4.4: logo/avatar +75% bigger than v4.3 (125px → 219px), all title text UNDER it */
.hg-profile{flex-direction:column;align-items:center;text-align:center;gap:10px}
.pm-ava{position:relative;width:219px;height:219px;min-width:219px;border-radius:50%;
  background:conic-gradient(#ff2d2d,#ff9a00,#eaff00,#2bff5c,#00e5ff,#2d5bff,#b43bff,#ff2d2d);
  animation:rgb-spin 3.6s linear infinite;
  box-shadow:0 0 20px rgba(79,124,255,.5),0 0 42px rgba(255,77,109,.3),0 0 64px rgba(47,211,116,.22);padding:4px}
.pm-ava-in{width:100%;height:100%;border-radius:50%;overflow:hidden;background:#0a0e23;
  border:2px solid rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center}
.pm-ava img{width:100%;height:100%;object-fit:cover}
.pm-ava span{color:var(--gold);font-size:3rem;font-weight:800}
@keyframes rgb-spin{to{transform:rotate(1turn)}}
@keyframes rgb-glow{0%{box-shadow:0 0 18px rgba(79,124,255,.5),0 0 38px rgba(255,77,109,.28)}33%{box-shadow:0 0 20px rgba(47,211,116,.5),0 0 42px rgba(79,124,255,.3)}66%{box-shadow:0 0 20px rgba(255,77,109,.5),0 0 42px rgba(47,211,116,.3)}100%{box-shadow:0 0 18px rgba(79,124,255,.5),0 0 38px rgba(255,77,109,.28)}}
.pm-name{font-size:1.32rem;font-weight:800;color:#fff;line-height:1.25;margin:0}
.pm-name em{font-style:normal;background:linear-gradient(100deg,var(--gold-2),var(--gold) 55%,#e08e1b);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pm-sub{margin:2px 0 0;color:var(--muted);font-size:.8rem;font-weight:500}
/* v4.2 brand extras: Bangla line + beating heart */
.pm-bn{margin:7px 0 0;font-size:.98rem;font-weight:700;color:var(--red-2);display:flex;align-items:center;gap:7px;
  text-shadow:0 0 14px rgba(255,77,109,.45)}
.pm-heart{display:inline-block;color:#ff2d55;font-size:1.15rem;animation:pm-heartbeat 1.4s ease-in-out infinite;filter:drop-shadow(0 0 8px rgba(255,45,85,.7))}
@keyframes pm-heartbeat{0%,100%{transform:scale(1)}14%{transform:scale(1.32)}28%{transform:scale(1)}42%{transform:scale(1.28)}56%{transform:scale(1)}}
/* v4.3 flags — real air waving: animated SVG turbulence + gentle sway */
.flag-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:2px}
.flag-item{display:flex;flex-direction:column;align-items:center;gap:6px;perspective:420px}
.flag-item img{width:78px;height:auto;border-radius:6px;box-shadow:0 6px 16px rgba(2,5,18,.6),0 0 0 1px rgba(255,255,255,.14);
  filter:url(#pmFlagRipple1);
  animation:flag-sway 3.2s ease-in-out infinite;transform-style:preserve-3d}
.flag-item img.f2{filter:url(#pmFlagRipple2);animation-delay:-1.6s}
@media(prefers-reduced-motion:reduce){.flag-item img{filter:none;animation:none}}
.flag-item small{font-size:.68rem;font-weight:700;color:var(--muted)}
.flag-em{font-size:2.6rem;line-height:1.15}
.flag-x{font-size:1.15rem;color:var(--gold);font-weight:800}
@keyframes flag-sway{0%,100%{transform:rotateY(0deg) skewY(0deg)}25%{transform:rotateY(10deg) skewY(1.6deg)}50%{transform:rotateY(0deg) skewY(0deg)}75%{transform:rotateY(-10deg) skewY(-1.6deg)}}
/* v4.2 Top-5 most-used modules card */
.top-list{display:flex;flex-direction:column;gap:7px;margin-top:2px;flex:1;justify-content:space-between}
.top-row{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.035);border:1px solid var(--border);
  border-radius:11px;padding:7px 10px;transition:.15s;min-width:0}
.top-row:hover{border-color:var(--border-2);background:rgba(255,255,255,.07);transform:translateX(3px)}
.top-n{width:20px;height:20px;min-width:20px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:800;color:#231a05;background:linear-gradient(135deg,var(--gold-2),var(--gold))}
.top-n.top-n1{background:linear-gradient(135deg,#ffd166,#f5a623)}
.top-n.top-n2{background:linear-gradient(135deg,#e0e0e0,#9aa2b8);color:#1c2230}
.top-n.top-n3{background:linear-gradient(135deg,#ffb380,#c97a3d);color:#2b1a08}
.top-em{font-size:1rem}
.top-name{font-size:.74rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.top-cnt{font-size:.68rem;font-weight:800;color:var(--green);background:rgba(47,211,116,.12);border:1px solid rgba(47,211,116,.3);
  padding:2px 8px;border-radius:99px;white-space:nowrap}
/* exchange card */
.xr-main{font-size:1.18rem;font-weight:800;color:#fff;line-height:1.3}
.xr-main b{color:var(--green);font-size:1.28rem}
.xr-sub{color:var(--muted);font-size:.74rem;font-weight:500}
/* weather card */
.wx-pills{display:flex;flex-wrap:wrap;gap:5px}
.wx-pill{border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--muted);font-size:.68rem;
  font-weight:700;padding:4px 10px;border-radius:99px;cursor:pointer;transition:.15s;font-family:inherit}
.wx-pill:hover{color:var(--text);border-color:var(--border-2)}
.wx-pill.on{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#231a05;border-color:transparent;
  box-shadow:0 3px 10px rgba(245,185,64,.4)}
.wx-big{font-size:2.15rem;font-weight:800;color:#fff;line-height:1;display:flex;align-items:center;gap:9px}
.wx-big .wx-em{font-size:2.1rem;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.wx-meta{color:var(--muted);font-size:.7rem;font-weight:500}
/* tourist card */
.tp-pills{display:flex;gap:8px;flex-wrap:wrap}
.tp-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:rgba(255,255,255,.04);
  border-radius:11px;padding:7px 12px;font-size:.78rem;font-weight:700;color:var(--text);transition:.15s}
.tp-pill b{color:var(--gold)}
.tp-pill:hover{border-color:var(--border-2);background:rgba(255,255,255,.07)}
/* friendship card */
.fg-live{margin-left:auto}
.fg-row{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.035);border:1px solid var(--border);
  border-radius:12px;padding:8px 10px}
.fg-row img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.5)}
.fg-txt{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.fg-name{font-size:.82rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fg-meta{font-size:.68rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fg-badge{display:inline-flex;align-items:center;gap:4px;font-size:.66rem;font-weight:700;color:var(--gold);margin-top:2px}
.fg-empty{color:var(--muted);font-size:.76rem;margin:0}

/* ============ HOME MAIN: heading, stats, search, module grid ============ */
.home-h1{font-size:1.42rem;font-weight:800;color:#fff;margin:4px 0 14px;letter-spacing:.2px}
.home-h1 em{font-style:normal;background:linear-gradient(100deg,var(--gold-2),var(--gold) 55%,#e08e1b);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stats-row{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:14px}
.stat-chip{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(160deg,var(--card-2),var(--card));
  border:1px solid var(--border);border-radius:99px;padding:6px 14px;font-size:.74rem;font-weight:600;color:var(--muted)}
.stat-chip b{color:#fff;font-weight:700}
.stat-chip .em{font-size:.9rem}
.m-search{position:relative;margin-bottom:18px}
.m-search input{width:100%;padding:13px 18px 13px 44px;border-radius:14px;border:1px solid var(--border);
  background:linear-gradient(160deg,var(--card-2),var(--card));color:var(--text);font:inherit;font-size:.92rem;
  transition:border .15s, box-shadow .15s}
.m-search input::placeholder{color:#5e678f}
.m-search input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,185,64,.15)}
.m-search .search-em{position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:1rem;opacity:.75}
.m-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:13px}
.m-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:16px 13px 13px;border-radius:var(--radius);
  background:linear-gradient(160deg,var(--card-2),var(--card) 62%);border:1px solid var(--border);
  box-shadow:var(--shadow);transition:transform .17s,border-color .17s,box-shadow .17s;color:var(--text);overflow:hidden}
.m-card::before{content:"";position:absolute;top:0;left:12%;right:12%;height:2px;border-radius:99px;
  background:linear-gradient(90deg,transparent,var(--acc,var(--blue)),transparent);opacity:.75}
.m-card:nth-child(4n+1){--acc:var(--blue)}
.m-card:nth-child(4n+2){--acc:var(--red)}
.m-card:nth-child(4n+3){--acc:var(--green)}
.m-card:nth-child(4n+4){--acc:var(--gold)}
.m-card:hover{transform:translateY(-4px);border-color:var(--border-2);
  box-shadow:0 14px 30px rgba(2,5,18,.6),0 0 18px rgba(79,124,255,.2)}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .m-card:hover{border-color:color-mix(in srgb,var(--acc) 55%,var(--border));
    box-shadow:0 14px 30px rgba(2,5,18,.6),0 0 18px color-mix(in srgb,var(--acc) 25%,transparent)}
}
.m-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.m-ico{width:52px;height:52px;border-radius:15px;display:inline-flex;align-items:center;justify-content:center;font-size:26px;
  background:linear-gradient(145deg,#232b63,#131838);border:1px solid rgba(255,255,255,.09);
  box-shadow:3px 5px 10px rgba(2,5,18,.55),inset -2px -3px 6px rgba(2,5,18,.5),inset 2px 2px 4px rgba(140,160,255,.15);
  transform:perspective(280px) rotateX(10deg) rotateY(-10deg);transition:transform .2s}
.m-card:nth-child(4n+2) .m-ico{background:linear-gradient(145deg,#4a1c30,#230d1a);box-shadow:3px 5px 10px rgba(60,5,25,.5),inset -2px -3px 6px rgba(40,3,18,.55),inset 2px 2px 4px rgba(255,120,150,.18)}
.m-card:nth-child(4n+3) .m-ico{background:linear-gradient(145deg,#11402c,#072415);box-shadow:3px 5px 10px rgba(4,45,25,.5),inset -2px -3px 6px rgba(3,32,18,.55),inset 2px 2px 4px rgba(120,255,180,.16)}
.m-card:nth-child(4n+4) .m-ico{background:linear-gradient(145deg,#3d3113,#211a06);box-shadow:3px 5px 10px rgba(50,38,4,.5),inset -2px -3px 6px rgba(40,30,3,.55),inset 2px 2px 4px rgba(255,215,120,.18)}
.m-card:hover .m-ico{transform:perspective(280px) rotateX(0) rotateY(0) translateZ(10px) scale(1.09)}
.m-name{font-size:.86rem;font-weight:700;color:#fff;line-height:1.3;margin:0}
.m-bn{font-size:.68rem;color:var(--muted);margin:0;line-height:1.4}
.m-none{grid-column:1/-1;text-align:center;color:var(--muted);padding:26px 0}

/* ============ Slide-in sidebar (mobile drawer) ============ */
.sidebar{position:fixed;top:0;left:0;bottom:0;width:296px;max-width:86vw;background:linear-gradient(170deg,#141a3e,#0d1230);
  z-index:100;transform:translateX(-104%);transition:transform .28s ease;display:flex;flex-direction:column;
  box-shadow:14px 0 44px rgba(2,5,18,.65);border-right:1px solid var(--border)}
html[dir="rtl"] .sidebar{left:auto;right:0;transform:translateX(104%);border-right:0;border-left:1px solid var(--border)}
.sidebar.open{transform:translateX(0)}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;color:#fff;
  border-bottom:1px solid var(--border);background:rgba(255,255,255,.03)}
.sidebar-head strong{font-size:1rem;color:var(--gold)}
.sidebar-close{background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer;line-height:1}
.sidebar-body{flex:1;overflow-y:auto;padding:12px}
.sidebar-foot{padding:12px 16px;font-size:.68rem;color:var(--muted);border-top:1px solid var(--border);text-align:center}
.sidebar-backdrop{position:fixed;inset:0;background:rgba(4,7,18,.62);z-index:99;opacity:0;pointer-events:none;transition:.25s;backdrop-filter:blur(2px)}
.sidebar-backdrop.show{opacity:1;pointer-events:auto}
.menu-link{display:flex;align-items:center;gap:11px;padding:7px 8px;border-radius:12px;color:var(--text);font-size:.9rem;font-weight:500}
.menu-link:hover{background:rgba(79,124,255,.12)}
.menu-link .icon-3d{width:38px;height:38px;min-width:38px;font-size:18px;border-radius:11px}
.menu-group-title{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:14px 8px 4px;opacity:.9}

/* ============ Module page layout ============ */
.module-wrap{padding:8px 0 44px}
.page-title{display:flex;align-items:center;gap:13px;margin:6px 0 20px;padding-bottom:13px;
  border-bottom:1px solid var(--border);position:relative}
.page-title::after{content:"";position:absolute;left:0;bottom:-1px;width:190px;height:3px;border-radius:99px;
  background:linear-gradient(90deg,var(--blue),var(--red) 38%,var(--green) 72%,var(--gold))}
html[dir="rtl"] .page-title::after{left:auto;right:0}
.page-title .icon-3d{width:52px;height:52px;min-width:52px;font-size:26px}
.page-title h1{margin:0;font-size:1.4rem;color:#fff}
.page-title h1 small{display:block;color:var(--muted);font-weight:500;font-size:.8rem}

/* ============ Panels ============ */
.panel{background:linear-gradient(165deg,var(--card-2),var(--card) 58%);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow),inset 0 1px 0 rgba(140,160,255,.07);padding:22px;margin-bottom:20px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.panel-head h3{margin:0;font-size:1.05rem;color:var(--gold)}
.panel.red-top{border-top:3px solid var(--red)}
.panel.green-top{border-top:3px solid var(--green)}
.panel.blue-top{border-top:3px solid var(--blue)}
.panel.black-top{border-top:3px solid var(--border-2)}
.panel.gold-top{border-top:3px solid var(--gold)}

/* ============ Forms ============ */
label{display:block;font-weight:600;font-size:.84rem;margin:0 0 5px;color:var(--text)}
.input,select.input,textarea.input{width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:11px;font:inherit;
  background:rgba(255,255,255,.04);color:var(--text);transition:border .15s, box-shadow .15s}
.input::placeholder{color:#5e678f}
.input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,185,64,.14)}
select.input option{background:#141938;color:var(--text)}
textarea.input{min-height:120px;resize:vertical}
.form-row{margin-bottom:14px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font:inherit;font-weight:700;
  padding:10px 22px;border-radius:99px;transition:.18s;color:#fff;
  background:linear-gradient(135deg,var(--green),#1fa855);box-shadow:0 4px 12px rgba(47,211,116,.3),inset 0 1px 1px rgba(255,255,255,.3)}
.btn:hover{filter:brightness(1.1)}
.btn.red{background:linear-gradient(135deg,#ff6b88,#e92650);box-shadow:0 4px 12px rgba(233,38,80,.32),inset 0 1px 1px rgba(255,255,255,.3)}
.btn.blue{background:linear-gradient(135deg,#6b91ff,#3d63e8);box-shadow:0 4px 12px rgba(61,99,232,.32),inset 0 1px 1px rgba(255,255,255,.3)}
.btn.black{background:linear-gradient(135deg,#2a3140,#0b0e17);box-shadow:0 4px 12px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.22);border:1px solid var(--border-2)}
.btn.gold{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#231a05;box-shadow:0 4px 12px rgba(245,185,64,.35),inset 0 1px 1px rgba(255,255,255,.55)}
.btn.ghost{background:transparent;color:var(--green);border:2px solid var(--green);box-shadow:none}
.btn.ghost.red{color:var(--red);border-color:var(--red)}
.btn.ghost.gold{color:var(--gold);border-color:var(--gold)}
.btn.block{width:100%} .btn.sm{padding:6px 14px;font-size:.82rem}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* ============ Grids, tabs, misc ============ */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tab{border:1.5px solid var(--border);background:var(--card);color:var(--muted);border-radius:99px;padding:7px 18px;font-weight:600;font-size:.88rem;cursor:pointer;transition:.15s}
.tab:hover{color:var(--text);border-color:var(--border-2)}
.tab.active{background:linear-gradient(135deg,var(--gold-2),var(--gold));border-color:transparent;color:#231a05}
.tab.red.active{background:linear-gradient(135deg,#ff6b88,#e92650);color:#fff}
.result{background:rgba(47,211,116,.06);border:1.5px dashed rgba(47,211,116,.55);border-radius:12px;padding:16px;margin-top:14px}
.result.red{background:rgba(255,77,109,.05);border-color:rgba(255,77,109,.55)}
.alert{padding:12px 16px;border-radius:12px;margin:12px 0;font-size:.9rem;border:1px solid}
.alert-success{background:rgba(47,211,116,.08);border-color:rgba(47,211,116,.5);color:var(--green-2)}
.alert-error{background:rgba(255,77,109,.08);border-color:rgba(255,77,109,.5);color:var(--red-2)}
.alert-info{background:rgba(79,124,255,.08);border-color:rgba(79,124,255,.5);color:var(--blue-2)}
.table{width:100%;border-collapse:collapse;font-size:.88rem}
.table th{background:rgba(79,124,255,.16);color:#fff;text-align:left;padding:10px 12px;font-weight:600;border-bottom:1px solid var(--border)}
html[dir="rtl"] .table th{text-align:right}
.table td{padding:9px 12px;border-bottom:1px solid rgba(39,47,102,.55)}
.table tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.table tr:hover td{background:rgba(79,124,255,.07)}
.big-number{font-size:2.1rem;font-weight:800;color:var(--gold)}
.stat-box{background:linear-gradient(165deg,var(--card-2),var(--card));border:1px solid var(--border);border-radius:14px;padding:16px;text-align:center;box-shadow:var(--shadow)}
.stat-box .lbl{color:var(--muted);font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em}
.section-head{margin:34px 0 18px;border-left:5px solid var(--gold);padding-left:14px}
html[dir="rtl"] .section-head{border-left:0;border-right:5px solid var(--gold);padding-right:14px}
.section-head h2{margin:0;font-size:1.45rem;color:#fff;font-weight:800}
.section-head p{margin:2px 0 0;color:var(--muted);font-weight:600;font-size:.9rem}

/* ============ Cards grid (module sub-pages) ============ */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:0 0 36px}
.card{background:linear-gradient(165deg,var(--card-2),var(--card) 58%);border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:12px;
  box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--red) 45%,var(--green) 80%,var(--gold))}
.card:hover{transform:translateY(-4px);border-color:var(--border-2);box-shadow:0 8px 16px rgba(2,5,18,.5),0 18px 40px rgba(2,5,18,.55)}
.card-top{display:flex;align-items:center;gap:14px}
.card-title{font-weight:700;font-size:1rem;margin:0;color:#fff}
.card-desc{color:var(--muted);font-size:.85rem;margin:0;flex:1}
.card-btn{align-self:flex-start;background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#231a05;padding:7px 18px;border-radius:99px;font-weight:700;font-size:.84rem}
.card-btn:hover{filter:brightness(1.08)}
.card-btn.red{background:linear-gradient(135deg,#ff6b88,#e92650);color:#fff}
.card-btn.red:hover{filter:brightness(1.1)}

/* ============ Polls ============ */
.poll-option{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1.5px solid var(--border);border-radius:11px;margin-bottom:8px;cursor:pointer;transition:.15s;background:rgba(255,255,255,.03);color:var(--text)}
.poll-option:hover{border-color:var(--gold)}
.poll-bar-wrap{background:rgba(255,255,255,.07);border-radius:99px;height:12px;overflow:hidden;flex:1}
.poll-bar{height:100%;background:linear-gradient(90deg,var(--green),#1fa855);border-radius:99px;transition:width .6s}
.poll-bar.red{background:linear-gradient(90deg,#ff6b88,#e92650)}

/* ============ Profiles / Meet & Greet ============ */
.profile-card{background:linear-gradient(165deg,var(--card-2),var(--card) 58%);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.profile-photo{height:210px;background:linear-gradient(135deg,#232b63,#131838);position:relative;overflow:hidden}
.profile-photo img{width:100%;height:100%;object-fit:cover}
.profile-badge-tag{position:absolute;top:10px;left:10px;background:rgba(10,14,35,.85);border:1px solid var(--border-2);border-radius:99px;padding:3px 12px;font-size:.72rem;font-weight:700;color:var(--gold);backdrop-filter:blur(4px)}
.profile-body{padding:14px;flex:1;display:flex;flex-direction:column;gap:8px}
.profile-name{font-weight:800;font-size:1.02rem;display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:#fff}
.profile-meta{color:var(--muted);font-size:.82rem}
.vote-row{display:flex;gap:8px;margin-top:auto}
.vote-btn{flex:1;border:1.5px solid var(--border);background:rgba(255,255,255,.04);border-radius:99px;padding:7px 0;font-weight:700;cursor:pointer;font-size:.85rem;transition:.15s;color:var(--text)}
.vote-btn.like:hover{border-color:var(--green);color:var(--green)}
.vote-btn.dislike:hover{border-color:var(--red);color:var(--red)}
.pm-verified{margin:0 2px}

/* ============ Shoutbox ============ */
.shout-list{max-height:420px;overflow-y:auto;padding-right:6px;display:flex;flex-direction:column;gap:10px}
.shout-msg{background:rgba(255,255,255,.035);border:1px solid var(--border);border-left:4px solid var(--green);border-radius:11px;padding:10px 14px}
.shout-msg .who{font-weight:700;color:var(--gold);font-size:.88rem}
.shout-msg .when{color:var(--muted);font-size:.72rem;margin-left:8px}

/* ============ Gallery ============ */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.gallery-item{border-radius:13px;overflow:hidden;border:1px solid var(--border);background:var(--card);cursor:pointer;box-shadow:var(--shadow)}
.gallery-item img{width:100%;height:150px;object-fit:cover;display:block;transition:.3s}
.gallery-item:hover img{transform:scale(1.06)}
.lightbox{position:fixed;inset:0;background:rgba(4,7,18,.92);z-index:200;display:none;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:20px}
.lightbox.show{display:flex}
.lightbox img{max-width:92vw;max-height:78vh;border-radius:13px;border:3px solid var(--border-2)}
.lightbox .cap{color:#fff;font-weight:600}

/* ============ Games / interactive ============ */
.game-area{background:linear-gradient(165deg,var(--card-2),var(--card) 58%);border:1.5px solid var(--border);border-radius:var(--radius);padding:18px;text-align:center;box-shadow:var(--shadow)}
.ttt-grid{display:grid;grid-template-columns:repeat(3,80px);gap:8px;justify-content:center;margin:14px auto}
.ttt-cell{width:80px;height:80px;font-size:2rem;font-weight:800;border-radius:13px;border:1.5px solid var(--border);background:rgba(255,255,255,.04);cursor:pointer;color:var(--gold)}
.ttt-cell:hover{border-color:var(--red)}
.snake-wrap canvas{background:#0b1026;border-radius:13px;border:3px solid var(--green)}
.btn-pad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:340px;margin:10px auto}
.calc-display{font-size:2rem;text-align:right;padding:14px 16px;background:#080c1e;color:#7dffc9;border-radius:13px;margin-bottom:10px;font-family:'Consolas',monospace;min-height:64px;word-break:break-all;border:1px solid var(--border)}
.calc-btn{padding:14px 0;font-size:1.1rem;border:1.5px solid var(--border);border-radius:13px;background:rgba(255,255,255,.05);cursor:pointer;font-weight:700;color:var(--text);font-family:inherit}
.calc-btn.op{background:linear-gradient(135deg,#ff6b88,#e92650);color:#fff;border-color:transparent}
.calc-btn.eq{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#231a05;border-color:transparent}
.calc-btn:hover{filter:brightness(1.12)}

/* ============ WhatsApp float ============ */
.float-whatsapp{position:fixed;right:18px;bottom:18px;z-index:90;width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,#2fe07a,#1fa855);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(34,193,94,.5);animation:pm-pulse 2.4s infinite}
@keyframes pm-pulse{0%{box-shadow:0 6px 18px rgba(34,193,94,.5),0 0 0 0 rgba(34,193,94,.45)}70%{box-shadow:0 6px 18px rgba(34,193,94,.5),0 0 0 16px rgba(34,193,94,0)}100%{box-shadow:0 6px 18px rgba(34,193,94,.5),0 0 0 0 rgba(34,193,94,0)}}

/* ============ Welcome popup (5s) ============ */
.welcome-overlay{position:fixed;inset:0;background:rgba(4,7,18,.8);backdrop-filter:blur(5px);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px}
.welcome-overlay.hide{display:none}
.welcome-box{background:linear-gradient(165deg,#181f4a,#10153a);border:1px solid var(--border-2);border-radius:22px;max-width:430px;width:100%;padding:36px 30px 22px;text-align:center;position:relative;
  border-top:4px solid var(--gold);box-shadow:0 24px 70px rgba(2,5,18,.7);animation:pop-in .45s ease}
@keyframes pop-in{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.welcome-logo{width:92px;height:92px;margin:0 auto 16px;border-radius:50%;padding:3px;
  background:conic-gradient(#ff2d2d,#ff9a00,#eaff00,#2bff5c,#00e5ff,#2d5bff,#b43bff,#ff2d2d);
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 24px rgba(79,124,255,.45);animation:rgb-spin 4s linear infinite}
.welcome-logo-in{width:100%;height:100%;border-radius:50%;overflow:hidden;background:#0a0e23;display:flex;align-items:center;justify-content:center}
.welcome-logo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.welcome-logo-fallback{color:var(--gold);font-size:2rem;font-weight:800}
.welcome-box h2{color:var(--gold);font-size:1.22rem;margin:0 0 8px}
.welcome-box p{color:var(--muted);margin:0 0 14px}
.welcome-close{position:absolute;top:10px;right:14px;background:none;border:0;font-size:1.7rem;color:var(--red);cursor:pointer;line-height:1}
.welcome-bar{height:6px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden;margin:6px 0 12px}
.welcome-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--red) 45%,var(--green) 80%,var(--gold));transition:width linear}

/* ============ Footer (photo: single copyright bar) ============ */
.site-footer{margin-top:26px;background:rgba(7,10,26,.92);border-top:1px solid var(--border)}
.footer-bar{max-width:1280px;margin:0 auto;padding:15px 18px;text-align:center;font-size:.8rem;color:var(--muted);line-height:1.7}
.footer-bar .fb-gold{color:var(--gold);font-weight:700}
.footer-bar .fb-cyan{color:var(--cyan);font-weight:600;letter-spacing:.4px}
.footer-bar a{color:var(--muted)} .footer-bar a:hover{color:var(--text)}
.footer-bottom{border-top:1px solid rgba(39,47,102,.6);padding:14px 0;text-align:center;font-size:.8rem;color:var(--muted)}
.visitor-line{text-align:center;font-size:.76rem;color:var(--muted);padding:12px 18px 0}
.visitor-line b{color:var(--green)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px;padding:38px 18px 22px}
.site-footer h4{color:#fff;margin:0 0 10px;font-size:1rem;border-bottom:2px solid var(--gold);display:inline-block;padding-bottom:4px}
.site-footer a{display:block;color:var(--muted);margin:6px 0;font-size:.88rem}
.site-footer a:hover{color:#fff}

/* ============ Responsive ============ */
@media(max-width:1150px){
  .hero-row{grid-template-columns:1fr 1fr}
  .hg-profile{grid-column:1/-1}
  .hg-topmods{grid-column:1/-1}
  .m-grid{grid-template-columns:repeat(5,1fr)}
}
@media(max-width:1024px){
  .shell{grid-template-columns:1fr;padding-top:14px}
  .m-fab{display:flex}
  .m-grid{grid-template-columns:repeat(4,1fr)}
  /* sidebar becomes slide-in drawer */
  .dash-side{position:fixed;top:0;left:0;bottom:0;width:296px;max-width:86vw;z-index:100;max-height:none;
    border-radius:0;transform:translateX(-104%);transition:transform .28s ease}
  html[dir="rtl"] .dash-side{left:auto;right:0;transform:translateX(104%)}
  .dash-side.open{transform:translateX(0)}
  .dash-side .sidebar-close{display:block !important}
}
@media(max-width:900px){
  .hero-row{grid-template-columns:1fr 1fr}
  .m-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .topbar-inner{padding:8px 12px}
  .brand-logo{width:62px;height:62px}
  .tb-chip{display:none}
  .pm-ava{width:150px;height:150px;min-width:150px}
  .pm-name{font-size:1.1rem}
  .hero-row{grid-template-columns:1fr;gap:11px}
  .hg-card{min-height:0}
  .hg-topmods{grid-column:auto}
  .flag-item img{width:58px}
  .m-grid{grid-template-columns:repeat(2,1fr);gap:11px}
  .ttt-grid{grid-template-columns:repeat(3,64px)}
  .ttt-cell{width:64px;height:64px}
  .home-h1{font-size:1.15rem}
}
@media(max-width:420px){
  .m-grid{grid-template-columns:repeat(2,1fr)}
  .m-ico{width:46px;height:46px;font-size:23px}
}

/* ============ v4.4: homepage modules grouped BY CATEGORY ============ */
.m-cat-head{grid-column:1/-1;display:flex;align-items:center;gap:9px;margin:16px 0 2px;font-size:1rem;font-weight:800;color:#fff;
  letter-spacing:.02em}
.m-cat-head::before{content:'';width:5px;height:22px;border-radius:99px;background:linear-gradient(180deg,var(--gold-2),var(--gold))}
.m-cat-head::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border-2),transparent)}
.m-cat-n{background:var(--card);border:1px solid var(--border);color:var(--muted);border-radius:99px;font-size:.7rem;font-weight:800;padding:2px 9px}

/* ============ Print / A4 (CV Maker, Notepad PDF) ============ */
@media print{
  body{background:#fff;color:#111}
  .topbar,.dash-side,.sidebar,.sidebar-backdrop,.site-footer,.float-whatsapp,.welcome-overlay,.no-print,.tabs,.btn,.m-fab,.m-search,.stats-row{display:none !important}
  .shell{grid-template-columns:1fr;padding:0}
  .site-main{padding:0}
  .panel,.card{background:#fff;border-color:#ccc;box-shadow:none;color:#111}
  .a4-sheet{box-shadow:none;border:0;margin:0;padding:0;max-width:100%}
}
@page{size:A4;margin:12mm}