/* ═══════════════════════════════════════════════════
   SBIORG v5 — Main Stylesheet
   سبحان برخورداری | Modern Dark UI
═══════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────── */
:root {
    --bg:      #020b18;
    --bg2:     #050f1f;
    --bg3:     #071628;
    --surface: #0d1f35;
    --surf2:   #102440;
    --surf3:   #142d4c;
    --border:  rgba(59,130,246,.18);
    --border2: rgba(59,130,246,.30);
    --blue:    #3b82f6;
    --blue2:   #60a5fa;
    --blue3:   #93c5fd;
    --purple:  #8b5cf6;
    --cyan:    #06b6d4;
    --green:   #10b981;
    --red:     #ef4444;
    --orange:  #f59e0b;
    --pink:    #ec4899;
    --t1:      #f1f5f9;
    --t2:      #94a3b8;
    --t3:      #475569;
    --t4:      #1e3a5f;
    --r4:      4px;
    --r8:      8px;
    --r12:     12px;
    --r16:     16px;
    --r20:     20px;
    --r24:     24px;
    --r50:     50px;
    --fMono:   'JetBrains Mono','Fira Code',monospace;
    --fMain:   'Segoe UI',Tahoma,sans-serif;
    --sb:      280px;
    --sh:      52px;
    --glow:    0 0 30px rgba(59,130,246,.3);
    --glow2:   0 0 60px rgba(139,92,246,.2);
    --shadow:  0 8px 32px rgba(0,0,0,.4);
    --shadow2: 0 20px 60px rgba(0,0,0,.6);
    --trans:   .25s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--blue) var(--bg2)}
body{
    background:var(--bg);color:var(--t1);
    font-family:var(--fMain);font-size:15px;line-height:1.7;
    overflow-x:hidden;direction:rtl;
    min-height:100vh;
}
body.ltr{direction:ltr}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--blue);border-radius:3px}
a{color:inherit;text-decoration:none}
img{max-width:100%;border-radius:var(--r8)}
button{cursor:pointer;border:none;background:none;font-family:inherit;font-size:inherit;color:inherit}
input,textarea,select{font-family:inherit;font-size:inherit;outline:none;background:transparent}
::placeholder{color:var(--t3)}
::selection{background:var(--blue);color:#fff}

/* ── Typography ────────────────────────────────── */
h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:900;letter-spacing:-.02em;line-height:1.1}
h2{font-size:clamp(1.5rem,3vw,2.5rem);font-weight:800}
h3{font-size:clamp(1.1rem,2vw,1.6rem);font-weight:700}
.mono{font-family:var(--fMono);font-size:.9em}

/* ── Layout ─────────────────────────────────────── */
.app-root{display:flex;min-height:100vh}
.sidebar{
    position:fixed;top:0;right:0;width:var(--sb);height:100vh;
    background:rgba(5,15,31,.92);
    backdrop-filter:blur(20px) saturate(1.5);
    border-left:1px solid var(--border);
    display:flex;flex-direction:column;
    overflow-y:auto;overflow-x:hidden;
    z-index:100;transition:transform var(--trans);
    scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
.main{
    margin-right:var(--sb);
    min-height:100vh;width:calc(100% - var(--sb));
    position:relative;
}
section{padding:80px 60px;border-top:1px solid var(--border);position:relative;overflow:hidden}
section:first-child{border-top:none}
.container{max-width:900px;margin:0 auto}

/* ── Sidebar ────────────────────────────────────── */
.sb-brand{padding:24px 20px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.sb-brand::before{content:'';position:absolute;inset:-50%;background:radial-gradient(circle at 50% 0,rgba(59,130,246,.08) 0,transparent 70%);pointer-events:none}
.sb-av-wrap{position:relative;width:80px;height:80px}
.sb-av,.sb-av-ph{width:80px;height:80px;border-radius:50%;object-fit:cover}
.sb-av-ph{background:linear-gradient(135deg,var(--blue),var(--purple));display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900;color:#fff}
.sb-ring{position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box, linear-gradient(135deg,var(--blue),var(--purple)) border-box;animation:ringPulse 3s ease-in-out infinite}
.sb-ring2{position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(59,130,246,.2);animation:ringPulse 3s ease-in-out infinite .5s}
@keyframes ringPulse{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:.4;transform:scale(1.03)}}
.sb-name{font-size:15px;font-weight:800;color:var(--t1)}
.sb-handle{font-size:12px;color:var(--blue);font-family:var(--fMono)}
.sb-status{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--t2)}
.sb-dot{width:7px;height:7px;background:var(--green);border-radius:50%;animation:blink 2s ease-in-out infinite;box-shadow:0 0 6px var(--green)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}

.sb-nav{flex:1;padding:12px 12px;display:flex;flex-direction:column;gap:2px}
.nb{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r12);font-size:14px;color:var(--t2);position:relative;overflow:hidden;transition:all var(--trans)}
.nb:hover{color:var(--t1);background:rgba(59,130,246,.08)}
.nb.active{color:var(--blue);background:rgba(59,130,246,.12)}
.nb.active::before{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:3px;height:24px;background:var(--blue);border-radius:2px 0 0 2px;box-shadow:0 0 10px var(--blue)}
.nb .ic{font-size:16px;min-width:20px;text-align:center;transition:transform var(--trans)}
.nb:hover .ic{transform:scale(1.2)}
.nb .tx{flex:1}
.nb-bar{display:none}
.nb-bc{background:var(--red);color:#fff;font-size:10px;font-weight:800;border-radius:var(--r50);padding:1px 6px;min-width:18px;text-align:center}
.nb-bc.hidden{display:none}
.notif-badge{position:absolute;top:-4px;right:-6px;background:var(--red);color:#fff;font-size:9px;font-weight:900;border-radius:var(--r50);padding:0 5px;min-width:16px;text-align:center;line-height:16px}
.notif-badge.hidden{display:none}

.sb-div{height:1px;background:var(--border);margin:8px 0}
.sb-lang{display:flex;gap:6px;padding:8px 12px;justify-content:center}
.lb{padding:4px 10px;border-radius:var(--r8);font-size:11px;font-weight:700;color:var(--t3);transition:all var(--trans);display:flex;align-items:center;gap:4px}
.lb:hover{color:var(--t1);background:var(--surface)}
.lb.active{color:var(--blue);background:rgba(59,130,246,.12)}
.lb .flag{font-size:14px}

.sb-admin-btn{display:flex;align-items:center;gap:8px;padding:10px 12px;margin:4px 12px;border-radius:var(--r12);background:rgba(139,92,246,.1);color:var(--purple);font-size:13px;font-weight:700;border:1px solid rgba(139,92,246,.2);transition:all var(--trans)}
.sb-admin-btn:hover{background:rgba(139,92,246,.2)}

.sb-cta{display:block;margin:8px 12px;padding:12px;background:linear-gradient(135deg,var(--blue),var(--purple));border-radius:var(--r12);text-align:center;font-weight:800;font-size:13px;position:relative;overflow:hidden;transition:transform var(--trans),box-shadow var(--trans)}
.sb-cta:hover{transform:translateY(-2px);box-shadow:var(--glow)}
.sb-cta-shimmer{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transform:translateX(-100%);animation:shimmer 3s ease-in-out infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ── Mobile Header ──────────────────────────────── */
.mob-head{
    display:none;position:fixed;top:0;left:0;right:0;height:56px;z-index:200;
    background:rgba(2,11,24,.95);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    padding:0 16px;align-items:center;justify-content:space-between;
}
.mob-brand{display:flex;align-items:center;gap:10px}
.mob-logo{width:34px;height:34px;border-radius:50%;object-fit:cover}
.mob-logo-ph{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--purple));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900}
.mob-title{font-weight:900;font-size:15px;display:flex;flex-direction:column;line-height:1.2}
.mob-title span{font-size:10px;color:var(--t3);font-weight:400}
.mob-right{display:flex;align-items:center;gap:10px}
.mob-flags{display:flex;gap:4px}
.mob-flag{padding:2px 6px;border-radius:6px;font-size:14px;cursor:pointer;opacity:.5;transition:opacity var(--trans)}
.mob-flag.active{opacity:1;background:rgba(59,130,246,.15)}
.hamburger{width:32px;height:32px;display:flex;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;padding:4px}
.hamburger span{height:2px;background:var(--t2);border-radius:2px;transition:all var(--trans)}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Mobile Bottom Nav ──────────────────────────── */
.mob-bottom-nav{
    display:none;position:fixed;bottom:0;left:0;right:0;
    background:rgba(5,15,31,.97);backdrop-filter:blur(20px);
    border-top:1px solid var(--border);z-index:200;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.mob-bottom-nav .nav-items{display:flex;justify-content:space-around;align-items:center}
.mob-bottom-nav .nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;border-radius:var(--r8);cursor:pointer;transition:all var(--trans);color:var(--t3);font-size:10px;min-width:52px}
.mob-bottom-nav .nav-item:hover,.mob-bottom-nav .nav-item.active{color:var(--blue)}
.mob-bottom-nav .nav-item .icon{font-size:20px;position:relative}
.mob-bottom-nav .nav-item.active .icon::after{content:'';position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:16px;height:2px;background:var(--blue);border-radius:2px}

/* ── Drawer ─────────────────────────────────────── */
.mob-drawer{display:none;position:fixed;inset:0;z-index:300}
.mob-drawer.open{display:block}
.draw-overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.draw-panel{position:absolute;right:0;top:0;bottom:0;width:280px;background:var(--bg2);border-left:1px solid var(--border);display:flex;flex-direction:column;animation:slideInRight .25s ease-out}
@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
.draw-head{padding:16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.draw-close{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);font-size:16px;transition:all var(--trans)}
.draw-close:hover{background:var(--surface);color:var(--t1)}
.draw-nav{flex:1;overflow-y:auto;padding:12px}
.draw-nav .nb{padding:12px 14px;font-size:15px}
.draw-nav .sb-div{margin:10px 0}
.draw-lang{padding:12px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:center}

/* ── Buttons ─────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:var(--r12);font-weight:700;font-size:14px;transition:all var(--trans);cursor:pointer;border:none;white-space:nowrap}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:#2563eb;box-shadow:0 0 20px rgba(59,130,246,.4);transform:translateY(-1px)}
.btn-purple{background:var(--purple);color:#fff}
.btn-purple:hover{background:#7c3aed;box-shadow:0 0 20px rgba(139,92,246,.4)}
.btn-ghost{background:transparent;border:1px solid var(--border2);color:var(--t2)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#dc2626}
.btn-green{background:var(--green);color:#fff}
.btn-sm{padding:6px 14px;font-size:12px;border-radius:var(--r8)}
.btn-lg{padding:14px 28px;font-size:16px;border-radius:var(--r16)}
.btn-icon{width:36px;height:36px;padding:0;border-radius:var(--r8);display:inline-flex;align-items:center;justify-content:center}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}
.w-full{width:100%}

/* ── Cards ───────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r16);padding:24px;transition:all var(--trans);position:relative;overflow:hidden}
.card:hover{border-color:var(--border2);box-shadow:var(--shadow)}
.card-glass{background:rgba(13,31,53,.6);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--r16)}
.card-glow{box-shadow:0 0 40px rgba(59,130,246,.08)}
.card-glow:hover{box-shadow:0 0 60px rgba(59,130,246,.15);border-color:rgba(59,130,246,.3)}

/* ── Forms ───────────────────────────────────────── */
.form-group{margin-bottom:16px}
.form-label{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--t2)}
.form-control{
    width:100%;padding:10px 14px;
    background:var(--bg3);border:1px solid var(--border);
    border-radius:var(--r12);color:var(--t1);font-size:14px;
    transition:all var(--trans);
}
.form-control:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.form-control.error{border-color:var(--red)}
textarea.form-control{resize:vertical;min-height:100px}
select.form-control{cursor:pointer}
.form-hint{font-size:11px;color:var(--t3);margin-top:4px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ── Hero Section ────────────────────────────────── */
#home{min-height:100vh;display:flex;align-items:center;padding-top:60px}
.hero-bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(59,130,246,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(59,130,246,.04) 1px,transparent 1px);background-size:50px 50px;animation:gridDrift 20s ease-in-out infinite}
@keyframes gridDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(-25px,-25px)}}
.hero-orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;animation:orbFloat 8s ease-in-out infinite}
.hero-orb-1{width:500px;height:500px;background:rgba(59,130,246,.1);top:-100px;right:-100px;animation-delay:0s}
.hero-orb-2{width:400px;height:400px;background:rgba(139,92,246,.08);bottom:-100px;left:30%;animation-delay:3s}
.hero-orb-3{width:300px;height:300px;background:rgba(6,182,212,.06);top:40%;left:-50px;animation-delay:6s}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-20px) scale(1.05)}66%{transform:translate(-20px,20px) scale(.95)}}

.hero-inner{position:relative;z-index:1;max-width:800px;padding:40px 0}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.3);border-radius:var(--r50);font-size:12px;font-weight:700;color:var(--blue);margin-bottom:28px;animation:fadeInUp .6s ease-out}
.hero-badge .dot{width:6px;height:6px;background:var(--green);border-radius:50%;animation:blink 2s ease-in-out infinite;box-shadow:0 0 6px var(--green)}
.hero-title{margin-bottom:16px;animation:fadeInUp .6s ease-out .1s both}
.hero-title .gradient{background:linear-gradient(135deg,var(--blue) 0%,var(--purple) 50%,var(--cyan) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% auto;animation:gradientShift 4s ease-in-out infinite}
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-typewriter{font-size:1.3rem;color:var(--t2);margin-bottom:24px;animation:fadeInUp .6s ease-out .2s both;min-height:2em}
.hero-typewriter .tw-cursor{display:inline-block;width:2px;height:1.2em;background:var(--blue);margin-right:2px;animation:cursorBlink .8s ease-in-out infinite;vertical-align:middle}
@keyframes cursorBlink{0%,50%{opacity:1}51%,100%{opacity:0}}
.hero-desc{color:var(--t2);font-size:1.05rem;line-height:1.8;margin-bottom:36px;max-width:600px;animation:fadeInUp .6s ease-out .3s both}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;animation:fadeInUp .6s ease-out .4s both}
.hero-stats{display:flex;gap:32px;margin-top:48px;flex-wrap:wrap;animation:fadeInUp .6s ease-out .5s both}
.hero-stat{text-align:center}
.hero-stat-num{font-size:2rem;font-weight:900;background:linear-gradient(135deg,var(--blue),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-stat-label{font-size:11px;color:var(--t3);font-weight:600;margin-top:2px}

.hero-scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;animation:fadeInUp .6s ease-out 1s both}
.hero-scroll-arrow{width:24px;height:24px;border-bottom:2px solid var(--blue);border-right:2px solid var(--blue);transform:rotate(45deg);animation:scrollBounce 1.5s ease-in-out infinite}
@keyframes scrollBounce{0%,100%{transform:rotate(45deg) translateY(0)}50%{transform:rotate(45deg) translateY(8px)}}
.hero-scroll span{font-size:11px;color:var(--t3)}

@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── Section Headers ─────────────────────────────── */
.sec-header{margin-bottom:48px;text-align:center}
.sec-tag{display:inline-block;padding:4px 14px;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2);border-radius:var(--r50);font-size:11px;font-weight:700;color:var(--blue);margin-bottom:12px;text-transform:uppercase;letter-spacing:.08em}
.sec-title{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:900;background:linear-gradient(135deg,var(--t1) 0%,var(--t2) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px}
.sec-desc{color:var(--t2);max-width:600px;margin:0 auto;font-size:15px}
.sec-line{width:60px;height:3px;background:linear-gradient(90deg,var(--blue),var(--purple));border-radius:2px;margin:16px auto 0}

/* ── About Section ───────────────────────────────── */
.about-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:60px;align-items:center}
.about-avatar-wrap{position:relative}
.about-avatar{width:280px;height:280px;border-radius:var(--r24);object-fit:cover;border:3px solid var(--border);position:relative;z-index:1;transition:transform var(--trans);display:block;margin:0 auto}
.about-avatar:hover{transform:scale(1.02)}
.about-avatar-ph{width:280px;height:280px;border-radius:var(--r24);background:linear-gradient(135deg,var(--surface),var(--surf3));display:flex;align-items:center;justify-content:center;font-size:80px;border:3px solid var(--border);margin:0 auto;position:relative;z-index:1}
.about-avatar-bg{position:absolute;inset:-16px;background:linear-gradient(135deg,var(--blue),var(--purple));border-radius:var(--r24);opacity:.15;filter:blur(20px)}
.about-avatar-deco{position:absolute;top:-16px;right:-16px;width:80px;height:80px;border:2px solid var(--blue);border-radius:var(--r16);opacity:.3}
.about-avatar-deco2{position:absolute;bottom:-16px;left:-16px;width:60px;height:60px;border:2px solid var(--purple);border-radius:50%;opacity:.3}
.about-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;justify-content:center}
.ab-badge{padding:4px 12px;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2);border-radius:var(--r50);font-size:11px;color:var(--blue);font-weight:700}

.about-content .sub{font-size:14px;font-weight:700;color:var(--blue);margin-bottom:8px;text-transform:uppercase;letter-spacing:.08em}
.about-content h2{margin-bottom:16px}
.about-content p{color:var(--t2);line-height:1.8;margin-bottom:16px}
.about-info{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.ai-row{display:flex;gap:12px;align-items:center;font-size:14px}
.ai-row .label{color:var(--t3);min-width:80px;font-weight:600}
.ai-row .value{color:var(--t1)}
.ai-row .value a{color:var(--blue)}
.ai-row .value a:hover{text-decoration:underline}

/* ── Skills ──────────────────────────────────────── */
.skills-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px;justify-content:center}
.skill-tab{padding:6px 16px;border-radius:var(--r50);font-size:13px;font-weight:700;color:var(--t3);border:1px solid var(--border);transition:all var(--trans);cursor:pointer}
.skill-tab:hover{color:var(--t1);border-color:var(--border2)}
.skill-tab.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.skill-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r12);padding:16px;transition:all var(--trans);cursor:default}
.skill-card:hover{transform:translateY(-3px);border-color:var(--border2);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.skill-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.skill-icon{font-size:24px;width:36px;text-align:center}
.skill-name{font-size:13px;font-weight:700;color:var(--t1)}
.skill-cat{font-size:10px;color:var(--t3);text-transform:uppercase}
.skill-bar-wrap{height:4px;background:var(--bg3);border-radius:2px;overflow:hidden}
.skill-bar{height:100%;border-radius:2px;transition:width 1.5s cubic-bezier(.25,.46,.45,.94)}
.skill-level{font-size:11px;color:var(--t3);text-align:left;margin-top:4px;font-family:var(--fMono)}

/* ── Projects ────────────────────────────────────── */
.projects-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px;justify-content:center}
.pf-btn{padding:6px 16px;border-radius:var(--r50);font-size:13px;font-weight:700;color:var(--t3);border:1px solid var(--border);transition:all var(--trans);cursor:pointer}
.pf-btn:hover{color:var(--t1);border-color:var(--border2)}
.pf-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.project-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r16);overflow:hidden;transition:all var(--trans);display:flex;flex-direction:column}
.project-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.3);border-color:rgba(59,130,246,.3)}
.project-card.hidden{display:none}
.pc-cover{height:140px;background:linear-gradient(135deg,var(--surface),var(--surf3));display:flex;align-items:center;justify-content:center;font-size:48px;overflow:hidden;position:relative}
.pc-cover img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.pc-icon-wrap{position:relative;z-index:1;width:64px;height:64px;background:var(--bg2);border-radius:var(--r12);display:flex;align-items:center;justify-content:center;font-size:32px;border:2px solid var(--border)}
.pc-body{padding:20px;flex:1;display:flex;flex-direction:column}
.pc-badges{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.pc-badge{padding:2px 8px;border-radius:var(--r50);font-size:10px;font-weight:700}
.pc-badge-web{background:rgba(59,130,246,.15);color:var(--blue)}
.pc-badge-app{background:rgba(16,185,129,.15);color:var(--green)}
.pc-badge-design{background:rgba(139,92,246,.15);color:var(--purple)}
.pc-badge-ai{background:rgba(245,158,11,.15);color:var(--orange)}
.pc-badge-featured{background:rgba(236,72,153,.15);color:var(--pink)}
.pc-title{font-size:15px;font-weight:800;margin-bottom:6px;color:var(--t1)}
.pc-desc{font-size:13px;color:var(--t2);flex:1;margin-bottom:14px;line-height:1.6}
.pc-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.pc-tag{padding:2px 8px;background:var(--bg3);border-radius:var(--r50);font-size:10px;color:var(--t3);font-family:var(--fMono)}
.pc-links{display:flex;gap:8px}
.pc-link{flex:1;text-align:center;padding:7px;border-radius:var(--r8);font-size:12px;font-weight:700;border:1px solid var(--border);color:var(--t2);transition:all var(--trans)}
.pc-link:hover{border-color:var(--blue);color:var(--blue)}

/* ── Gallery ─────────────────────────────────────── */
.gallery-grid{columns:3;gap:16px}
.gallery-item{break-inside:avoid;margin-bottom:16px;position:relative;overflow:hidden;border-radius:var(--r12);cursor:pointer;transition:transform var(--trans)}
.gallery-item:hover{transform:scale(1.02)}
.gallery-item img,.gallery-item video{width:100%;display:block;border-radius:var(--r12)}
.gallery-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);opacity:0;transition:opacity var(--trans);display:flex;align-items:flex-end;padding:14px;border-radius:var(--r12)}
.gallery-item:hover .gallery-overlay{opacity:1}
.gallery-overlay-title{font-size:13px;font-weight:700;color:#fff}
.gallery-overlay-cat{font-size:11px;color:rgba(255,255,255,.6)}

/* ── Chat ─────────────────────────────────────────── */
.chat-wrap{display:flex;height:calc(100vh - 80px);gap:0;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r16);overflow:hidden}
.chat-sidebar{width:280px;border-left:1px solid var(--border);display:flex;flex-direction:column;background:var(--bg3)}
.chat-sidebar-head{padding:16px;border-bottom:1px solid var(--border);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:space-between}
.chat-users{flex:1;overflow-y:auto}
.chat-user-item{padding:12px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:background var(--trans);border-bottom:1px solid rgba(255,255,255,.03)}
.chat-user-item:hover{background:rgba(59,130,246,.05)}
.chat-user-item.active{background:rgba(59,130,246,.1)}
.cu-av{width:40px;height:40px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,var(--blue),var(--purple));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.cu-info{flex:1;min-width:0}
.cu-name{font-size:13px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cu-last{font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cu-unread{background:var(--blue);color:#fff;font-size:10px;font-weight:900;border-radius:var(--r50);padding:1px 6px;min-width:16px;text-align:center}

.chat-main{flex:1;display:flex;flex-direction:column;min-width:0}
.chat-head{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;background:rgba(5,15,31,.6)}
.chat-head-av{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0}
.chat-head-info{flex:1}
.chat-head-name{font-size:14px;font-weight:800}
.chat-head-status{font-size:11px;color:var(--t3)}
.chat-head-actions{display:flex;gap:6px}

.chat-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.msg-wrap{display:flex;gap:8px;max-width:75%;animation:msgIn .2s ease-out}
.msg-wrap.own{align-self:flex-end;flex-direction:row-reverse}
.msg-av{width:30px;height:30px;border-radius:50%;flex-shrink:0;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:700;background:linear-gradient(135deg,var(--blue),var(--purple));align-self:flex-end}
.msg-bubble{padding:10px 14px;border-radius:16px 16px 4px 16px;background:var(--surface);max-width:100%;word-break:break-word;position:relative;font-size:14px}
.msg-wrap.own .msg-bubble{background:linear-gradient(135deg,var(--blue),#2563eb);border-radius:16px 16px 16px 4px;color:#fff}
.msg-text{line-height:1.5}
.msg-time{font-size:10px;color:rgba(255,255,255,.5);margin-top:4px;text-align:left}
.msg-wrap:not(.own) .msg-time{color:var(--t3)}
.msg-file{display:flex;align-items:center;gap:8px;padding:6px;background:rgba(0,0,0,.2);border-radius:8px;margin-bottom:4px;font-size:12px}
.msg-file a{color:inherit;text-decoration:underline}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.chat-no-access{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;color:var(--t3);text-align:center;padding:40px}
.chat-no-access .icon{font-size:48px}

.chat-input-wrap{padding:14px 20px;border-top:1px solid var(--border);background:rgba(5,15,31,.6)}
.chat-input-row{display:flex;gap:8px;align-items:flex-end}
.chat-input{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--r12);padding:10px 14px;color:var(--t1);font-size:14px;resize:none;max-height:120px;overflow-y:auto;transition:border-color var(--trans)}
.chat-input:focus{border-color:var(--blue)}
.chat-input-actions{display:flex;gap:6px;align-items:flex-end}

/* ── Tickets ─────────────────────────────────────── */
.ticket-list{display:flex;flex-direction:column;gap:12px}
.ticket-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r12);padding:16px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all var(--trans)}
.ticket-item:hover{border-color:var(--border2);transform:translateX(-2px)}
.ticket-status{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ticket-status.open{background:var(--blue);box-shadow:0 0 8px var(--blue)}
.ticket-status.answered{background:var(--green);box-shadow:0 0 8px var(--green)}
.ticket-status.closed{background:var(--t3)}
.ticket-status.waiting{background:var(--orange);box-shadow:0 0 8px var(--orange)}
.ticket-info{flex:1;min-width:0}
.ticket-subject{font-size:14px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticket-meta{font-size:11px;color:var(--t3);display:flex;gap:8px;margin-top:2px;flex-wrap:wrap}
.ticket-priority{padding:2px 8px;border-radius:var(--r50);font-size:10px;font-weight:700}
.tp-urgent{background:rgba(239,68,68,.15);color:var(--red)}
.tp-high{background:rgba(245,158,11,.15);color:var(--orange)}
.tp-normal{background:rgba(59,130,246,.15);color:var(--blue)}
.tp-low{background:rgba(71,85,105,.2);color:var(--t2)}

/* ── Notifications ────────────────────────────────── */
.notif-panel{position:fixed;top:0;left:0;width:360px;height:100vh;background:var(--bg2);border-right:1px solid var(--border);z-index:400;transform:translateX(-100%);transition:transform var(--trans);display:flex;flex-direction:column}
.notif-panel.open{transform:translateX(0)}
.notif-panel-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.notif-panel-title{font-size:16px;font-weight:800}
.notif-list{flex:1;overflow-y:auto;padding:8px}
.notif-item{padding:14px;border-radius:var(--r12);border:1px solid transparent;cursor:pointer;transition:all var(--trans);margin-bottom:6px;display:flex;gap:12px;align-items:flex-start}
.notif-item:hover{background:var(--surface)}
.notif-item.unread{background:rgba(59,130,246,.06);border-color:rgba(59,130,246,.1)}
.notif-icon{font-size:24px;min-width:36px;text-align:center}
.notif-content .title{font-size:13px;font-weight:700;color:var(--t1);margin-bottom:2px}
.notif-content .body{font-size:12px;color:var(--t2);line-height:1.5}
.notif-content .time{font-size:10px;color:var(--t3);margin-top:4px}

/* ── Profile ─────────────────────────────────────── */
.profile-header{position:relative;padding:40px;background:linear-gradient(135deg,var(--surface),var(--bg3));border:1px solid var(--border);border-radius:var(--r20);margin-bottom:24px;overflow:hidden}
.profile-header::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(59,130,246,.08),transparent 70%);pointer-events:none}
.profile-av{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid var(--border);box-shadow:0 0 0 4px rgba(59,130,246,.15)}
.profile-av-ph{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--purple));display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:900;border:4px solid var(--border)}
.profile-name{font-size:24px;font-weight:900;margin-bottom:4px}
.profile-handle{font-size:13px;color:var(--blue);font-family:var(--fMono);margin-bottom:12px}
.profile-bio{color:var(--t2);font-size:14px;line-height:1.7;max-width:500px}
.profile-stats{display:flex;gap:24px;margin-top:20px;flex-wrap:wrap}
.profile-stat-num{font-size:1.4rem;font-weight:900;color:var(--t1)}
.profile-stat-label{font-size:11px;color:var(--t3)}
.profile-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.profile-badge{padding:3px 10px;border-radius:var(--r50);font-size:11px;font-weight:700;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2);color:var(--blue)}
.profile-social{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.profile-social a{padding:6px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r8);font-size:12px;color:var(--t2);transition:all var(--trans);display:flex;align-items:center;gap:6px}
.profile-social a:hover{border-color:var(--blue);color:var(--blue)}

/* ── Admin Panel ─────────────────────────────────── */
.admin-wrap{display:flex;height:calc(100vh - 80px);gap:0;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r16);overflow:hidden}
.admin-nav{width:220px;background:var(--bg3);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;padding:12px}
.admin-nav-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--r8);cursor:pointer;font-size:13px;color:var(--t2);transition:all var(--trans);margin-bottom:2px}
.admin-nav-item:hover{color:var(--t1);background:rgba(59,130,246,.06)}
.admin-nav-item.active{color:var(--blue);background:rgba(59,130,246,.12);font-weight:700}
.admin-nav-badge{margin-right:auto;background:var(--red);color:#fff;font-size:9px;font-weight:900;border-radius:var(--r50);padding:1px 5px}
.admin-content{flex:1;overflow-y:auto;padding:24px}
.admin-section-title{font-size:18px;font-weight:900;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.admin-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-bottom:24px}
.admin-stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r12);padding:16px;text-align:center;transition:all var(--trans)}
.admin-stat-card:hover{border-color:var(--border2)}
.admin-stat-num{font-size:2rem;font-weight:900;background:linear-gradient(135deg,var(--blue),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.admin-stat-label{font-size:12px;color:var(--t3);margin-top:4px}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--border);font-size:13px}
.admin-table th{color:var(--t3);font-weight:700;background:var(--bg3);font-size:11px;text-transform:uppercase}
.admin-table td{color:var(--t1)}
.admin-table tr:hover td{background:rgba(59,130,246,.03)}
.admin-actions{display:flex;gap:6px;flex-wrap:wrap}

/* ── Modal ───────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity var(--trans)}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r20);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;transform:scale(.95);transition:transform var(--trans);box-shadow:var(--shadow2)}
.modal-overlay.open .modal{transform:scale(1)}
.modal-head{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-title{font-size:16px;font-weight:800}
.modal-close{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);transition:all var(--trans);font-size:18px}
.modal-close:hover{background:var(--surface);color:var(--t1)}
.modal-body{padding:24px}
.modal-foot{padding:16px 24px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}

/* ── Lightbox ────────────────────────────────────── */
/* lightbox — single canonical definition (do not duplicate below) */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.95);backdrop-filter:blur(20px);z-index:9999;display:none;align-items:center;justify-content:center;flex-direction:column;gap:12px}
.lightbox.open{display:flex;animation:fadeIn .2s ease}
.lightbox img,.lightbox video,.lb-img,.lb-vid{max-width:90vw;max-height:80vh;border-radius:var(--r12);object-fit:contain}
.lightbox-close{position:absolute;top:20px;left:20px;width:44px;height:44px;background:rgba(255,255,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;color:#fff;transition:background var(--trans)}
.lightbox-close:hover{background:rgba(255,255,255,.2)}
.lightbox-info{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.8);border-radius:var(--r12);padding:12px 20px;color:#fff;text-align:center;font-size:13px;max-width:500px}

/* ── Toast ───────────────────────────────────────── */
.toasts{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:999;display:flex;flex-direction:column;gap:8px;pointer-events:none;width:fit-content;max-width:90vw}
.toast{padding:12px 20px;border-radius:var(--r12);font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px;pointer-events:all;animation:toastIn .3s ease-out;box-shadow:var(--shadow)}
.toast-success{background:#065f46;border:1px solid var(--green);color:#6ee7b7}
.toast-error{background:#7f1d1d;border:1px solid var(--red);color:#fca5a5}
.toast-info{background:#1e3a5f;border:1px solid var(--blue);color:var(--blue3)}
.toast-warn{background:#78350f;border:1px solid var(--orange);color:#fcd34d}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* ── Loading ─────────────────────────────────────── */
.loading{display:inline-block;width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.loading-sm{width:14px;height:14px;border-width:1.5px}
.loading-lg{width:36px;height:36px;border-width:3px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-overlay{position:fixed;inset:0;background:var(--bg);z-index:900;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px}
.loading-overlay .loading{width:48px;height:48px;border-width:4px;border-color:rgba(59,130,246,.2);border-top-color:var(--blue)}

/* ── Page Transitions ────────────────────────────── */
.page-enter{animation:pageIn .4s cubic-bezier(.25,.46,.45,.94)}
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ── 404 ─────────────────────────────────────────── */
.page-404{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px}
.p404-code{font-size:clamp(6rem,15vw,12rem);font-weight:900;background:linear-gradient(135deg,var(--blue),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;animation:fadeInUp .6s ease-out}
.p404-title{font-size:2rem;font-weight:800;margin-bottom:12px}
.p404-desc{color:var(--t2);max-width:400px;margin-bottom:32px;font-size:15px}

/* courses — full definition in additions below */
.course-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.course-cover{height:160px;background:linear-gradient(135deg,var(--surface),var(--surf3));overflow:hidden;position:relative}
.course-cover img{width:100%;height:100%;object-fit:cover}
.course-level{position:absolute;top:10px;right:10px;padding:3px 10px;border-radius:var(--r50);font-size:10px;font-weight:700;background:rgba(0,0,0,.7);color:#fff;backdrop-filter:blur(6px)}
.course-body{padding:18px}
.course-title{font-size:15px;font-weight:800;margin-bottom:6px}
.course-desc{font-size:13px;color:var(--t2);margin-bottom:14px;line-height:1.5}
.course-meta{display:flex;align-items:center;justify-content:space-between}
.course-price{font-size:16px;font-weight:900;color:var(--green)}
.course-price.free{color:var(--blue)}

/* ── Resume/Experience ───────────────────────────── */
.timeline{position:relative;padding-right:28px}
.timeline::before{content:'';position:absolute;right:4px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--blue),var(--purple),transparent)}
.timeline-item{position:relative;margin-bottom:32px;padding-right:28px}
.timeline-dot{position:absolute;right:-32px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--blue);border:2px solid var(--bg);box-shadow:0 0 12px var(--blue)}
.timeline-dot.current{background:var(--green);box-shadow:0 0 12px var(--green)}
.timeline-period{font-size:11px;font-family:var(--fMono);color:var(--t3);margin-bottom:4px}
.timeline-role{font-size:16px;font-weight:800;color:var(--t1)}
.timeline-company{font-size:13px;color:var(--blue);margin-bottom:8px}
.timeline-desc{font-size:13px;color:var(--t2);line-height:1.6}
.timeline-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.timeline-tag{padding:2px 8px;background:var(--bg3);border-radius:var(--r50);font-size:10px;color:var(--t3);font-family:var(--fMono)}

/* ── Auth Page ───────────────────────────────────── */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;position:relative}
.auth-box{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r20);overflow:hidden}
.auth-header{padding:32px 32px 0;text-align:center}
.auth-logo{font-size:32px;margin-bottom:8px}
.auth-title{font-size:22px;font-weight:900;margin-bottom:4px}
.auth-sub{font-size:13px;color:var(--t2)}
.auth-tabs{display:flex;padding:20px 32px 0}
.auth-tab{flex:1;padding:10px;text-align:center;font-size:14px;font-weight:700;cursor:pointer;border-bottom:2px solid transparent;color:var(--t3);transition:all var(--trans)}
.auth-tab.active{color:var(--blue);border-color:var(--blue)}
.auth-form{padding:24px 32px 32px}
.auth-divider{text-align:center;color:var(--t3);font-size:12px;margin:16px 0;position:relative}
.auth-divider::before,.auth-divider::after{content:'';position:absolute;top:50%;width:40%;height:1px;background:var(--border)}
.auth-divider::before{right:0}.auth-divider::after{left:0}

/* ── Admin Login ─────────────────────────────────── */
.admin-login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.alp-box{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r20);padding:40px;text-align:center}
.alp-icon{font-size:48px;margin-bottom:16px}
.alp-title{font-size:22px;font-weight:900;margin-bottom:4px}
.alp-sub{font-size:13px;color:var(--t2);margin-bottom:24px}
.alp-err{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);border-radius:var(--r8);padding:10px;font-size:13px;color:var(--red);margin-bottom:16px}

/* ── Misc ────────────────────────────────────────── */
.badge{padding:3px 10px;border-radius:var(--r50);font-size:11px;font-weight:700}
.badge-blue{background:rgba(59,130,246,.15);color:var(--blue)}
/* badge colors — full definitions with borders in additions below */
.badge-purple{background:rgba(139,92,246,.15);color:var(--purple)}
.badge-gray{background:rgba(71,85,105,.2);color:var(--t2)}

.tags-input{display:flex;flex-wrap:wrap;gap:6px;padding:8px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r12);cursor:text}
.tag-chip{padding:2px 8px;background:rgba(59,130,246,.15);border-radius:var(--r50);font-size:11px;color:var(--blue);display:flex;align-items:center;gap:4px}
.tag-chip .remove{cursor:pointer;opacity:.7}
.tag-chip .remove:hover{opacity:1}

.divider{height:1px;background:var(--border);margin:20px 0}
.text-center{text-align:center}
.text-right{text-align:right}
.text-muted{color:var(--t2)}
.text-sm{font-size:13px}
.text-xs{font-size:11px}
.text-blue{color:var(--blue)}
.text-green{color:var(--green)}
.text-red{color:var(--red)}
.flex{display:flex}
.items-center{align-items:center}
.gap-2{gap:8px}
.gap-4{gap:16px}
.mt-2{margin-top:8px}
.mt-4{margin-top:16px}
.mb-4{margin-bottom:16px}
.p-4{padding:16px}
.hidden{display:none!important}
.cursor-pointer{cursor:pointer}

/* ── Install PWA Banner ──────────────────────────── */
.install-banner{display:none;position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--border2);border-radius:var(--r16);padding:14px 20px;z-index:350;box-shadow:var(--shadow);align-items:center;gap:14px;max-width:360px;width:calc(100% - 40px)}
.install-banner.show{display:flex;animation:slideUp .3s ease-out}
@keyframes slideUp{from{transform:translateX(-50%) translateY(20px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
.install-banner-text{flex:1}
.install-banner-title{font-size:13px;font-weight:800;margin-bottom:2px}
.install-banner-desc{font-size:11px;color:var(--t3)}

/* ── Contact section ─────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start}
.contact-info{display:flex;flex-direction:column;gap:20px}
.ci-item{display:flex;align-items:flex-start;gap:14px}
.ci-icon{width:44px;height:44px;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2);border-radius:var(--r12);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.ci-label{font-size:11px;color:var(--t3);font-weight:700;text-transform:uppercase;margin-bottom:2px}
.ci-value{font-size:14px;color:var(--t1)}
.ci-value a{color:var(--blue)}

/* ── Reveal animation ────────────────────────────── */
.reveal{opacity:0;transform:translateY(30px);transition:all .8s cubic-bezier(.25,.46,.45,.94)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-30px);transition:all .8s cubic-bezier(.25,.46,.45,.94)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(30px);transition:all .8s cubic-bezier(.25,.46,.45,.94)}
.reveal-right.visible{opacity:1;transform:translateX(0)}

/* ── File Input ──────────────────────────────────── */
.file-drop{border:2px dashed var(--border);border-radius:var(--r12);padding:24px;text-align:center;cursor:pointer;transition:all var(--trans);color:var(--t3)}
.file-drop:hover,.file-drop.drag-over{border-color:var(--blue);color:var(--t1);background:rgba(59,130,246,.05)}
.file-drop input[type=file]{display:none}

/* ── Scroll to top ───────────────────────────────── */
.scroll-top{position:fixed;bottom:24px;right:calc(var(--sb) + 24px);width:44px;height:44px;background:var(--blue);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:all var(--trans);z-index:100;box-shadow:0 4px 16px rgba(59,130,246,.4);font-size:18px}
.scroll-top.show{opacity:1;pointer-events:all}
.scroll-top:hover{background:#2563eb;transform:translateY(-3px)}

/* ── Particle canvas ─────────────────────────────── */
#particleCanvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.4}

/* ── Responsive ──────────────────────────────────── */
@media(max-width:1024px){
    :root{--sb:240px}
    section{padding:60px 40px}
    .about-grid{grid-template-columns:1fr;gap:32px}
    .contact-grid{grid-template-columns:1fr}
}

@media(max-width:768px){
    .sidebar{transform:translateX(100%)}
    .sidebar.mob-open{transform:translateX(0)}
    .main{margin-right:0;width:100%}
    .mob-head{display:flex}
    .mob-drawer{display:block}
    .mob-bottom-nav{display:block}
    section{padding:60px 16px}
    h1{font-size:2rem}
    .hero-inner{padding:20px 0}
    .gallery-grid{columns:2}
    .projects-grid{grid-template-columns:1fr}
    .form-row{grid-template-columns:1fr}
    .chat-wrap{height:calc(100vh - 60px);flex-direction:column}
    .chat-sidebar{width:100%;height:200px;border-left:none;border-bottom:1px solid var(--border)}
    .admin-wrap{flex-direction:column;height:auto}
    .admin-nav{width:100%;flex-direction:row;flex-wrap:wrap;gap:4px;overflow-x:auto;padding:8px}
    .admin-nav-item{font-size:11px;padding:6px 10px;white-space:nowrap}
    .scroll-top{right:16px;bottom:72px}
    .main{padding-top:56px;padding-bottom:70px}
    .notif-panel{width:100vw}
}

@media(max-width:480px){
    .gallery-grid{columns:1}
    .hero-stats{gap:16px}
    .skills-grid{grid-template-columns:repeat(2,1fr)}
}

@media(min-width:769px){
    .mob-bottom-nav{display:none}
}


/* ═══════════════════════════════════════════════════
   SBIORG v5 — Extended Styles
   Admin Panel + Profile + Courses + Gallery + PWA
═══════════════════════════════════════════════════ */

/* ── Gradient Text ─────────────────────────────── */
.gradient-text {
    background: linear-gradient(135deg, var(--blue), var(--purple), var(--cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes orbFloat {
    0%,100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-30px) scale(1.05); }
}
@keyframes orbFloat2 {
    0%,100% { transform: translateY(0px) rotate(0deg) scale(1); }
    50% { transform: translateY(20px) rotate(180deg) scale(0.95); }
}
@keyframes particleDrift {
    0% { transform: translate(0,0) opacity(1); opacity:1; }
    100% { transform: translate(var(--tx,20px), var(--ty,-60px)); opacity:0; }
}
@keyframes ringPulse {
    0%,100% { opacity:1; transform:scale(1); }
    50% { opacity:.5; transform:scale(1.05); }
}
@keyframes pulse {
    0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(16,185,129,.4); }
    70% { opacity:.8; box-shadow:0 0 0 8px rgba(16,185,129,0); }
}
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes slideInRight { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:none} }
@keyframes slideInLeft { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:none} }
@keyframes slideInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes glitch {
    0%,100%{ clip-path:inset(0 0 100% 0) }
    20%{ clip-path:inset(20% 0 60% 0); transform:translateX(-2px) }
    40%{ clip-path:inset(50% 0 30% 0); transform:translateX(2px) }
    60%{ clip-path:inset(10% 0 80% 0); transform:translateX(-1px) }
    80%{ clip-path:inset(80% 0 5% 0); transform:translateX(1px) }
}
@keyframes typewriter {
    from { width:0 }
    to { width:100% }
}
@keyframes blink {
    0%,100%{border-color:var(--blue)}
    50%{border-color:transparent}
}
@keyframes float {
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-12px)}
}
@keyframes glow-pulse {
    0%,100%{box-shadow:0 0 20px rgba(59,130,246,.3),0 0 40px rgba(139,92,246,.1)}
    50%{box-shadow:0 0 40px rgba(59,130,246,.5),0 0 80px rgba(139,92,246,.3)}
}
@keyframes count-up {
    from{opacity:0;transform:translateY(20px)}
    to{opacity:1;transform:none}
}
@keyframes reveal-in {
    from{opacity:0;transform:translateY(40px)}
    to{opacity:1;transform:none}
}
.reveal {
    opacity:0;
    transform:translateY(30px);
    transition:opacity .7s ease,transform .7s ease;
}
.reveal.visible {
    opacity:1;
    transform:none;
}

/* Particle Canvas */
#particleCanvas {
    position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
}

/* ── Hero BG ────────────────────────────────────── */
.hero-bg { position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0; }
.hero-grid {
    position:absolute;inset:0;
    background-image:linear-gradient(var(--border) 1px,transparent 1px),
    linear-gradient(90deg,var(--border) 1px,transparent 1px);
    background-size:50px 50px;
    opacity:.3;
    mask-image:radial-gradient(ellipse at center,black 20%,transparent 80%);
}
.hero-orb {
    position:absolute;border-radius:50%;
    filter:blur(80px);pointer-events:none;
}
.hero-orb-1 {
    width:600px;height:600px;
    background:radial-gradient(circle,rgba(59,130,246,.3) 0,transparent 70%);
    top:-200px;right:-200px;
    animation:orbFloat 8s ease-in-out infinite;
}
.hero-orb-2 {
    width:500px;height:500px;
    background:radial-gradient(circle,rgba(139,92,246,.2) 0,transparent 70%);
    bottom:-200px;left:-100px;
    animation:orbFloat2 10s ease-in-out infinite;
}
.hero-orb-3 {
    width:300px;height:300px;
    background:radial-gradient(circle,rgba(6,182,212,.15) 0,transparent 70%);
    top:50%;left:50%;transform:translate(-50%,-50%);
    animation:orbFloat 12s ease-in-out infinite 2s;
}

/* ── Hero Inner ─────────────────────────────────── */
.hero-inner { position:relative;z-index:1; }
.hero-badge {
    display:inline-flex;align-items:center;gap:8px;
    padding:6px 16px;
    background:rgba(59,130,246,.1);
    border:1px solid rgba(59,130,246,.3);
    border-radius:var(--r50);
    font-size:13px;color:var(--blue);
    margin-bottom:24px;
    animation:glow-pulse 4s ease-in-out infinite;
}
.hero-badge .dot {
    width:8px;height:8px;border-radius:50%;
    background:var(--green);
    animation:pulse 2s ease-in-out infinite;
}
.hero-title { margin-bottom:16px; }
.hero-title .gradient {
    background:linear-gradient(135deg,var(--blue) 0%,var(--purple) 50%,var(--cyan) 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    animation:shimmer 3s linear infinite;
    background-size:200% auto;
}
.hero-subtitle {
    font-size:clamp(1rem,2vw,1.3rem);
    color:var(--t2);min-height:2em;
    margin-bottom:24px;
}
.tw-cursor {
    display:inline-block;width:3px;height:1.2em;
    background:var(--blue);margin-right:2px;
    animation:blink 1s step-end infinite;
    vertical-align:text-bottom;
}
.hero-desc { color:var(--t2);max-width:600px;margin-bottom:32px;font-size:16px;line-height:1.8; }
.hero-ctas { display:flex;flex-wrap:wrap;gap:12px;margin-bottom:40px; }
.hero-stats { display:flex;flex-wrap:wrap;gap:32px; }
.hero-stat { text-align:center; }
.hero-stat-num {
    font-size:clamp(1.8rem,3vw,2.5rem);font-weight:900;
    background:linear-gradient(135deg,var(--blue),var(--purple));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
}
.hero-stat-lbl { font-size:12px;color:var(--t3);margin-top:2px; }

/* ── Section Headers ────────────────────────────── */
.sec-header { text-align:center;margin-bottom:48px; }
.sec-tag {
    display:inline-block;
    padding:4px 14px;
    background:rgba(59,130,246,.1);
    border:1px solid rgba(59,130,246,.2);
    border-radius:var(--r50);
    font-size:12px;color:var(--blue);
    font-weight:600;letter-spacing:.05em;
    text-transform:uppercase;
    margin-bottom:12px;
}
.sec-title { margin-bottom:12px;color:var(--t1); }
.sec-desc { color:var(--t2);max-width:600px;margin:0 auto 16px; }
.sec-line {
    width:60px;height:3px;
    background:linear-gradient(135deg,var(--blue),var(--purple));
    border-radius:2px;margin:0 auto;
}

/* ── Buttons ─────────────────────────────────────── */
.btn {
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:10px 20px;border-radius:var(--r8);font-weight:600;font-size:14px;
    transition:all var(--trans);cursor:pointer;position:relative;overflow:hidden;
    border:1px solid transparent;white-space:nowrap;
}
.btn::before {
    content:'';position:absolute;inset:0;
    background:linear-gradient(rgba(255,255,255,.1),transparent);
    opacity:0;transition:opacity var(--trans);
}
.btn:hover::before { opacity:1; }
.btn-blue {
    background:linear-gradient(135deg,var(--blue),var(--purple));
    color:#fff;box-shadow:0 4px 15px rgba(59,130,246,.4);
}
.btn-blue:hover { transform:translateY(-2px);box-shadow:0 8px 25px rgba(59,130,246,.5); }
.btn-blue:active { transform:translateY(0); }
.btn-ghost {
    background:transparent;
    border-color:var(--border);
    color:var(--t2);
}
.btn-ghost:hover { border-color:var(--blue);color:var(--blue);background:rgba(59,130,246,.05); }
.btn-sm { padding:6px 14px;font-size:13px; }
.btn-lg { padding:14px 28px;font-size:16px; }
.w-full { width:100%; }

/* ── Cards ──────────────────────────────────────── */
.card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r16);
    padding:24px;
    transition:all var(--trans);
    position:relative;overflow:hidden;
}
.card::before {
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(59,130,246,.03),transparent);
    opacity:0;transition:opacity var(--trans);
}
.card:hover { border-color:var(--border2);transform:translateY(-4px);box-shadow:var(--shadow); }
.card:hover::before { opacity:1; }

/* ── Skills ─────────────────────────────────────── */
.skills-tabs { display:flex;flex-wrap:wrap;gap:8px;justify-content:center; }
.skill-tab {
    padding:8px 18px;border-radius:var(--r50);
    font-size:13px;font-weight:600;
    background:var(--surface);border:1px solid var(--border);
    color:var(--t2);transition:all var(--trans);cursor:pointer;
}
.skill-tab:hover { border-color:var(--blue);color:var(--blue); }
.skill-tab.active { background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 4px 15px rgba(59,130,246,.4); }
.skill-pill {
    display:inline-block;
    padding:4px 12px;
    background:rgba(59,130,246,.1);
    border:1px solid rgba(59,130,246,.2);
    border-radius:var(--r50);
    font-size:12px;color:var(--blue);
    transition:all var(--trans);
}
.skill-pill:hover { background:rgba(59,130,246,.2); }
.skill-card {
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r12);padding:16px;
    transition:all var(--trans);cursor:default;
}
.skill-card:hover { border-color:var(--border2);transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,0,0,.3); }
.skill-bar-wrap { margin-top:8px; }
.skill-bar-bg { height:6px;background:var(--surf3);border-radius:3px;overflow:hidden; }
.skill-bar-fill {
    height:100%;border-radius:3px;
    background:linear-gradient(90deg,var(--skill-color,var(--blue)),var(--skill-color2,var(--purple)));
    width:0%;transition:width 1.5s cubic-bezier(.4,0,.2,1);
}

/* ── Projects Grid ──────────────────────────────── */
.projects-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:20px;
}
.proj-card {
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r16);overflow:hidden;
    transition:all var(--trans);position:relative;
}
.proj-card:hover { border-color:var(--border2);transform:translateY(-6px);box-shadow:var(--shadow2); }
.proj-card:hover .proj-img { transform:scale(1.05); }
.proj-img-wrap { overflow:hidden;height:160px; }
.proj-img { width:100%;height:100%;object-fit:cover;transition:transform .5s; }
.proj-no-img {
    height:160px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--surf2),var(--surf3));
    font-size:48px;
}
.proj-body { padding:20px; }
.proj-title { font-size:16px;font-weight:700;margin-bottom:8px; }
.proj-desc { font-size:13px;color:var(--t2);line-height:1.6;margin-bottom:12px; }
.proj-tags { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px; }
.proj-actions { display:flex;gap:8px; }
.proj-featured {
    position:absolute;top:12px;right:12px;
    background:linear-gradient(135deg,var(--orange),var(--pink));
    color:#fff;padding:3px 10px;border-radius:var(--r50);font-size:11px;font-weight:700;
}

/* ── Timeline (Resume) ──────────────────────────── */
.timeline { position:relative;padding-right:24px; }
.timeline::before {
    content:'';position:absolute;right:0;top:0;bottom:0;
    width:2px;background:linear-gradient(to bottom,var(--blue),var(--purple),transparent);
    border-radius:1px;
}
.tl-item { position:relative;padding-bottom:32px;padding-right:32px; }
.tl-dot {
    position:absolute;right:-8px;top:6px;
    width:16px;height:16px;border-radius:50%;
    background:linear-gradient(135deg,var(--blue),var(--purple));
    border:3px solid var(--bg);
    z-index:1;
    transition:transform var(--trans);
}
.tl-item:hover .tl-dot { transform:scale(1.3); }
.tl-dot.current { animation:pulse 2s ease-in-out infinite; }
.tl-card {
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r12);padding:20px;
    transition:all var(--trans);
}
.tl-card:hover { border-color:var(--border2);box-shadow:var(--shadow); }
.tl-company { font-size:11px;color:var(--blue);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px; }
.tl-role { font-size:16px;font-weight:700;margin-bottom:4px; }
.tl-period { font-size:12px;color:var(--t3);margin-bottom:10px; }
.tl-desc { font-size:13px;color:var(--t2);line-height:1.7; }
.tl-tags { display:flex;flex-wrap:wrap;gap:6px;margin-top:12px; }

/* ── Contact ────────────────────────────────────── */
.contact-grid { display:grid;grid-template-columns:1fr 1fr;gap:32px; }
.contact-card {
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r16);padding:24px;
}
.contact-link {
    display:flex;align-items:center;gap:12px;padding:12px;
    border-radius:var(--r8);transition:all var(--trans);
    border:1px solid transparent;
    text-decoration:none;color:var(--t1);
    margin-bottom:8px;
}
.contact-link:hover { background:var(--surf2);border-color:var(--border); }
.contact-link .ic { font-size:20px;flex-shrink:0; }
.contact-link .info .lbl { font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.05em; }
.contact-link .info .val { font-size:14px;font-weight:600; }

/* ── Form ────────────────────────────────────────── */
.form-group { margin-bottom:16px; }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.form-label { display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--t2); }
.form-control {
    width:100%;padding:10px 14px;
    background:var(--surf2);
    border:1px solid var(--border);
    border-radius:var(--r8);
    color:var(--t1);font-size:14px;
    transition:all var(--trans);
}
.form-control:focus { border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15);outline:none; }
.form-control:hover { border-color:var(--border2); }
.form-control-sm { padding:7px 10px;font-size:13px; }
textarea.form-control { resize:vertical;min-height:80px; }
select.form-control { cursor:pointer; }

/* ── Badges ─────────────────────────────────────── */
.badge {
    display:inline-block;padding:3px 10px;
    border-radius:var(--r50);font-size:11px;font-weight:700;
    letter-spacing:.03em;
}
.badge-blue { background:rgba(59,130,246,.15);color:var(--blue);border:1px solid rgba(59,130,246,.2); }
.badge-green { background:rgba(16,185,129,.15);color:var(--green);border:1px solid rgba(16,185,129,.2); }
.badge-red { background:rgba(239,68,68,.15);color:var(--red);border:1px solid rgba(239,68,68,.2); }
.badge-orange { background:rgba(245,158,11,.15);color:var(--orange);border:1px solid rgba(245,158,11,.2); }
.badge-gray { background:rgba(100,116,139,.15);color:var(--t3);border:1px solid rgba(100,116,139,.2); }
.badge-purple { background:rgba(139,92,246,.15);color:var(--purple);border:1px solid rgba(139,92,246,.2); }

/* ── Sidebar ─────────────────────────────────────── */
.sb-name { font-size:14px;font-weight:800;color:var(--t1); }
.sb-handle { font-size:12px;color:var(--t3); }
.sb-status { display:flex;align-items:center;gap:6px;font-size:11px;color:var(--green);font-weight:600; }
.sb-dot { width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 2s infinite; }
.sb-nav { flex:1;padding:12px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto; }
.nb {
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;border-radius:var(--r8);
    font-size:13px;font-weight:500;color:var(--t2);
    transition:all var(--trans);position:relative;
    text-decoration:none;
}
.nb:hover { background:var(--surf2);color:var(--t1); }
.nb.active { background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(139,92,246,.1));color:var(--blue);border:1px solid rgba(59,130,246,.15); }
.nb .ic { font-size:16px;flex-shrink:0;width:20px;text-align:center; }
.nb .tx { flex:1; }
.nb-bc {
    background:var(--red);color:#fff;
    border-radius:var(--r50);padding:1px 6px;font-size:10px;font-weight:700;
}
.nb-bc.hidden { display:none; }
.sb-div { height:1px;background:var(--border);margin:8px 4px; }
.sb-lang {
    display:flex;gap:6px;padding:12px 16px;border-top:1px solid var(--border);
    justify-content:center;
}
.lb {
    padding:4px 10px;border-radius:var(--r4);font-size:12px;font-weight:600;
    background:var(--surf2);border:1px solid var(--border);color:var(--t2);
    cursor:pointer;transition:all var(--trans);display:flex;align-items:center;gap:4px;
}
.lb:hover { border-color:var(--blue);color:var(--blue); }
.lb.active { background:var(--blue);border-color:var(--blue);color:#fff; }
.flag { font-size:14px; }
.sb-cta {
    margin:8px 12px;padding:12px;
    background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(139,92,246,.1));
    border:1px solid rgba(59,130,246,.2);
    border-radius:var(--r8);
    display:flex;align-items:center;justify-content:center;gap:6px;
    font-size:13px;font-weight:700;color:var(--blue);
    cursor:pointer;transition:all var(--trans);
    text-decoration:none;position:relative;overflow:hidden;
}
.sb-cta:hover { background:linear-gradient(135deg,rgba(59,130,246,.25),rgba(139,92,246,.2)); }
.sb-cta-shimmer {
    position:absolute;inset:0;
    background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.05) 50%,transparent 100%);
    background-size:200% 100%;
    animation:shimmer 2s linear infinite;
}
.sb-admin-btn {
    display:flex;align-items:center;justify-content:center;gap:6px;
    margin:0 12px;padding:8px;
    background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.2);
    border-radius:var(--r8);font-size:12px;color:var(--purple);
    cursor:pointer;transition:all var(--trans);text-decoration:none;
}
.sb-admin-btn:hover { background:rgba(139,92,246,.15); }
.sb-ring2 {
    position:absolute;inset:-8px;border-radius:50%;
    border:1px solid rgba(59,130,246,.15);
    animation:ringPulse 3s ease-in-out infinite .5s;
}

/* ── Mobile Header ──────────────────────────────── */
.mob-head {
    display:none;position:fixed;top:0;left:0;right:0;z-index:200;
    background:rgba(2,11,24,.92);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    height:var(--sh);padding:0 16px;
    align-items:center;justify-content:space-between;
}
.mob-brand { display:flex;align-items:center;gap:8px; }
.mob-logo { width:32px;height:32px;border-radius:8px;object-fit:cover; }
.mob-title { font-size:14px;font-weight:800;color:var(--t1); }
.mob-title span { display:block;font-size:10px;color:var(--t3);font-weight:400; }
.mob-right { display:flex;align-items:center;gap:8px; }
.mob-flags { display:flex;gap:4px; }
.mob-flag {
    width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:14px;cursor:pointer;transition:all var(--trans);background:var(--surf2);
    border:1px solid var(--border);
}
.mob-flag:hover,.mob-flag.active { border-color:var(--blue);background:rgba(59,130,246,.1); }
.hamburger {
    width:36px;height:36px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:5px;cursor:pointer;padding:4px;border-radius:var(--r8);
    background:var(--surf2);border:1px solid var(--border);
    transition:all var(--trans);
}
.hamburger:hover { border-color:var(--blue); }
.hamburger span {
    display:block;width:18px;height:2px;
    background:var(--t2);border-radius:1px;
    transition:all var(--trans);
}
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ── Mobile Drawer ──────────────────────────────── */
.mob-drawer { display:none;position:fixed;inset:0;z-index:300; }
.mob-drawer.open { display:block; }
.draw-overlay { position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px); }
.draw-panel {
    position:absolute;top:0;right:0;bottom:0;width:280px;
    background:var(--bg2);border-left:1px solid var(--border);
    display:flex;flex-direction:column;overflow-y:auto;
    animation:slideInRight .25s ease;
}
body.ltr .draw-panel { right:auto;left:0;border-left:none;border-right:1px solid var(--border); animation:slideInLeft .25s ease; }
.draw-head {
    display:flex;align-items:center;justify-content:space-between;
    padding:16px;border-bottom:1px solid var(--border);
}
.draw-close { font-size:20px;cursor:pointer;color:var(--t3);transition:color var(--trans); }
.draw-close:hover { color:var(--t1); }
.draw-nav { flex:1;padding:12px;display:flex;flex-direction:column;gap:2px; }

/* ── Mobile Bottom Nav ──────────────────────────── */
.mob-bottom-nav {
    display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;
    background:rgba(2,11,24,.95);backdrop-filter:blur(20px);
    border-top:1px solid var(--border);
    padding:8px 0 env(safe-area-inset-bottom,8px);
}
.mob-bottom-nav .nav-items { display:flex;justify-content:space-around;align-items:center; }
.mob-bottom-nav .nav-item {
    display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:6px 12px;font-size:10px;font-weight:600;color:var(--t3);
    transition:all var(--trans);text-decoration:none;
    border-radius:var(--r8);position:relative;
}
.mob-bottom-nav .nav-item:hover,
.mob-bottom-nav .nav-item.active { color:var(--blue); }
.mob-bottom-nav .nav-item .icon { font-size:20px;position:relative; }

/* ── Toast ──────────────────────────────────────── */
.toasts { position:fixed;bottom:80px;right:20px;z-index:999;display:flex;flex-direction:column;gap:8px;max-width:320px; }
body.ltr .toasts { right:auto;left:20px; }
.toast {
    padding:12px 16px;border-radius:var(--r8);
    background:var(--surf3);border:1px solid var(--border);
    font-size:13px;font-weight:600;
    box-shadow:var(--shadow);
    animation:slideInRight .3s ease;
    display:flex;align-items:center;gap:8px;
    max-width:300px;
}
.toast-success { border-color:var(--green);background:rgba(16,185,129,.1); }
.toast-error { border-color:var(--red);background:rgba(239,68,68,.1); }
.toast-warning { border-color:var(--orange);background:rgba(245,158,11,.1); }
.toast-info { border-color:var(--blue);background:rgba(59,130,246,.1); }

/* ── Modal ──────────────────────────────────────── */
.modal-overlay {
    display:none;position:fixed;inset:0;z-index:500;
    background:rgba(0,0,0,.7);backdrop-filter:blur(8px);
    align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.open { display:flex;animation:fadeIn .2s ease; }
.modal {
    background:var(--bg2);border:1px solid var(--border2);
    border-radius:var(--r20);width:100%;max-width:500px;max-height:90vh;
    overflow-y:auto;box-shadow:var(--shadow2);
    animation:slideInUp .3s cubic-bezier(.4,0,.2,1);
}
.modal-head {
    display:flex;align-items:center;justify-content:space-between;
    padding:20px 24px;border-bottom:1px solid var(--border);position:sticky;top:0;
    background:var(--bg2);z-index:1;
}
.modal-title { font-size:16px;font-weight:800; }
.modal-close {
    width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    cursor:pointer;color:var(--t3);font-size:16px;background:var(--surf2);
    transition:all var(--trans);
}
.modal-close:hover { background:var(--surf3);color:var(--t1); }
.modal-body { padding:24px; }
.modal-foot {
    display:flex;gap:8px;justify-content:flex-end;
    padding:16px 24px;border-top:1px solid var(--border);
}

/* ── Auth Modal Tabs ────────────────────────────── */
.auth-tabs { display:flex;border-bottom:1px solid var(--border);margin:0 -24px;padding:0 24px; }
.auth-tab {
    flex:1;text-align:center;padding:12px;font-size:14px;font-weight:600;
    color:var(--t3);cursor:pointer;transition:all var(--trans);
    border-bottom:2px solid transparent;margin-bottom:-1px;
}
.auth-tab:hover { color:var(--t1); }
.auth-tab.active { color:var(--blue);border-bottom-color:var(--blue); }
.auth-page-box {
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r20);padding:32px;width:100%;max-width:440px;
    box-shadow:var(--shadow2);position:relative;z-index:1;
}

/* ── Notification Panel ─────────────────────────── */
.notif-panel {
    position:fixed;top:0;right:0;height:100vh;width:360px;max-width:100vw;
    background:var(--bg2);border-left:1px solid var(--border);
    z-index:450;transform:translateX(100%);
    transition:transform var(--trans);
    display:flex;flex-direction:column;
}
body.ltr .notif-panel { right:auto;left:0;border-left:none;border-right:1px solid var(--border);transform:translateX(-100%); }
.notif-panel.open { transform:translateX(0); }
.notif-panel-head {
    padding:16px 20px;border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;
}
.notif-panel-title { font-size:15px;font-weight:700; }
.notif-list { flex:1;overflow-y:auto; }
.notif-item {
    padding:14px 20px;border-bottom:1px solid var(--border);cursor:pointer;
    transition:background var(--trans);
}
.notif-item:hover { background:var(--surface); }
.notif-item.unread { background:rgba(59,130,246,.04);border-right:3px solid var(--blue); }
.notif-badge {
    background:var(--red);color:#fff;border-radius:var(--r50);
    padding:1px 6px;font-size:10px;font-weight:700;
    position:absolute;top:-3px;right:-3px;
}
.notif-badge.hidden { display:none; }

/* ── Chat ────────────────────────────────────────── */
.chat-layout { display:flex;height:calc(100vh - 80px); }
.chat-sidebar {
    width:280px;flex-shrink:0;border-left:1px solid var(--border);
    display:flex;flex-direction:column;overflow:hidden;
}
.chat-main { flex:1;display:flex;flex-direction:column;min-width:0; }
.chat-head {
    padding:12px 16px;border-bottom:1px solid var(--border);
    display:flex;align-items:center;gap:10px;
    background:rgba(2,11,24,.8);backdrop-filter:blur(10px);
}
.chat-messages {
    flex:1;overflow-y:auto;padding:16px;
    display:flex;flex-direction:column;gap:8px;
    scroll-behavior:smooth;
}
.msg-bubble {
    max-width:75%;padding:10px 14px;
    border-radius:16px;font-size:14px;line-height:1.6;
    position:relative;
    animation:slideInUp .2s ease;
}
.msg-bubble.sent {
    background:linear-gradient(135deg,var(--blue),var(--purple));
    color:#fff;align-self:flex-end;
    border-bottom-left-radius:4px;
}
body.ltr .msg-bubble.sent { border-bottom-left-radius:16px;border-bottom-right-radius:4px; }
.msg-bubble.recv {
    background:var(--surface);color:var(--t1);align-self:flex-start;
    border-bottom-right-radius:4px;
}
body.ltr .msg-bubble.recv { border-bottom-right-radius:16px;border-bottom-left-radius:4px; }
.msg-time { font-size:10px;opacity:.6;margin-top:4px;display:block;text-align:left; }
.chat-input-wrap {
    padding:12px 16px;border-top:1px solid var(--border);
    display:flex;gap:8px;align-items:flex-end;
    background:rgba(2,11,24,.8);backdrop-filter:blur(10px);
}
.chat-input {
    flex:1;padding:10px 16px;border-radius:var(--r50);
    background:var(--surf2);border:1px solid var(--border);
    color:var(--t1);resize:none;max-height:120px;line-height:1.5;
    transition:border-color var(--trans);
}
.chat-input:focus { border-color:var(--blue); }
.chat-send-btn {
    width:44px;height:44px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,var(--blue),var(--purple));
    display:flex;align-items:center;justify-content:center;
    font-size:18px;cursor:pointer;transition:all var(--trans);
    box-shadow:0 4px 15px rgba(59,130,246,.4);
}
.chat-send-btn:hover { transform:scale(1.1); }
.chat-user-item { transition:background var(--trans); }
.chat-user-item:hover { background:var(--surface); }
.chat-user-item.active { background:rgba(59,130,246,.1);border-right:3px solid var(--blue); }
.chat-file-btn {
    width:44px;height:44px;border-radius:50%;flex-shrink:0;
    background:var(--surf2);border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;
    font-size:18px;cursor:pointer;transition:all var(--trans);
}
.chat-file-btn:hover { border-color:var(--blue); }
.typing-indicator {
    display:flex;align-items:center;gap:4px;padding:8px 14px;
    background:var(--surface);border-radius:16px;align-self:flex-start;
    font-size:12px;color:var(--t2);
}
.typing-dot {
    width:6px;height:6px;border-radius:50%;background:var(--t3);
    animation:typingBounce 1.4s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay:.2s; }
.typing-dot:nth-child(3) { animation-delay:.4s; }
@keyframes typingBounce {
    0%,60%,100%{transform:translateY(0)}
    30%{transform:translateY(-8px)}
}

/* ── Ticket ─────────────────────────────────────── */
.ticket-list { display:flex;flex-direction:column;gap:8px; }
.ticket-item {
    display:flex;align-items:center;gap:12px;padding:14px 16px;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r12);
    cursor:pointer;transition:all var(--trans);
}
.ticket-item:hover { border-color:var(--border2);transform:translateY(-1px);box-shadow:var(--shadow); }
.ticket-status {
    width:4px;height:48px;border-radius:2px;flex-shrink:0;
}
.ticket-status.open { background:var(--blue); }
.ticket-status.answered { background:var(--green); }
.ticket-status.closed { background:var(--t3); }
.ticket-status.waiting { background:var(--orange); }
.ticket-info { flex:1;min-width:0; }
.ticket-subject { font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ticket-meta { font-size:12px;color:var(--t3);display:flex;gap:12px;margin-top:4px; }
.ticket-priority { font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r50); }
.tp-urgent { background:rgba(239,68,68,.15);color:var(--red); }
.tp-high { background:rgba(245,158,11,.15);color:var(--orange); }
.tp-normal { background:rgba(59,130,246,.15);color:var(--blue); }
.tp-low { background:rgba(100,116,139,.15);color:var(--t3); }

/* ── Gallery ─────────────────────────────────────── */
.gallery-masonry {
    columns:3;column-gap:16px;
}
@media (max-width:900px) { .gallery-masonry { columns:2; } }
@media (max-width:600px) { .gallery-masonry { columns:1; } }
.gallery-brick {
    break-inside:avoid;margin-bottom:16px;
    animation:reveal-in .5s ease forwards;
    opacity:0;
}
.gallery-item-wrap {
    position:relative;border-radius:12px;overflow:hidden;cursor:pointer;
    transition:transform var(--trans),box-shadow var(--trans);
    background:var(--surface);
}
.gallery-item-wrap:hover { transform:scale(1.02);box-shadow:0 12px 40px rgba(0,0,0,.5); }
.gallery-item-wrap img,.gallery-item-wrap video { display:block;width:100%;border-radius:12px; }
.gallery-overlay {
    position:absolute;inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.3) 50%,transparent 100%);
    display:flex;align-items:flex-end;padding:16px;
    opacity:0;transition:opacity var(--trans);border-radius:12px;
}
.gallery-item-wrap:hover .gallery-overlay { opacity:1; }
.gallery-overlay-title { font-size:13px;font-weight:700;color:#fff;margin-bottom:4px; }
.gallery-overlay-cat { font-size:11px;color:rgba(255,255,255,.6); }
.gallery-overlay-desc { font-size:11px;color:rgba(255,255,255,.5);margin-top:4px; }
.gallery-play-btn {
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:48px;height:48px;border-radius:50%;
    background:rgba(59,130,246,.9);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:18px;
    transition:all var(--trans);
}
.gallery-item-wrap:hover .gallery-play-btn { transform:translate(-50%,-50%) scale(1.1); }
/* Admin gallery grid */
.gallery-admin-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px; }
.gallery-admin-item { background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden; }

/* lightbox duplicate removed — defined above */

/* ── Courses ─────────────────────────────────────── */
.courses-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px; }
.course-card {
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r16);
    overflow:hidden;transition:all var(--trans);
}
.course-card:hover { border-color:var(--border2);transform:translateY(-4px);box-shadow:var(--shadow2); }
.course-img-wrap { overflow:hidden;height:180px;position:relative; }
.course-img { width:100%;height:100%;object-fit:cover;transition:transform .5s; }
.course-card:hover .course-img { transform:scale(1.05); }
.course-img-overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(2,11,24,.5),transparent); }
.course-no-img {
    height:180px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--surf2),var(--surf3));font-size:48px;
}
.course-body { padding:20px; }
.course-title { font-size:15px;font-weight:700;margin-bottom:8px;line-height:1.4; }
.course-desc { font-size:13px;color:var(--t2);line-height:1.6;margin-bottom:8px; }
.course-tags { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px; }
.course-price { font-size:14px;font-weight:800;color:var(--orange); }
.course-price.free { color:var(--green); }

/* ── Profile ─────────────────────────────────────── */
.profile-hero {
    text-align:center;padding:40px 32px;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r20);
    position:relative;overflow:hidden;
}
.profile-bg-orbs { position:absolute;inset:0;pointer-events:none;overflow:hidden; }
.profile-av-wrap { position:relative;display:inline-block;margin-bottom:16px; }
.profile-av {
    width:100px;height:100px;border-radius:50%;object-fit:cover;
    border:3px solid var(--border2);
}
.profile-av-ph {
    width:100px;height:100px;border-radius:50%;
    background:linear-gradient(135deg,var(--blue),var(--purple));
    display:flex;align-items:center;justify-content:center;
    font-size:32px;font-weight:900;color:#fff;
    border:3px solid var(--border2);
}
.profile-verified {
    position:absolute;bottom:0;right:0;
    width:28px;height:28px;border-radius:50%;
    background:var(--blue);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:700;
    border:2px solid var(--bg2);
}
.profile-name { font-size:22px;font-weight:900; }
.profile-handle { font-size:13px;color:var(--t3);margin-top:4px; }
.profile-bio { font-size:14px;color:var(--t2);margin-top:10px;max-width:400px;margin-inline:auto;line-height:1.7; }
.profile-info { position:relative;z-index:1; }

/* ── Admin Layout ────────────────────────────────── */
.admin-layout {
    display:flex;min-height:100vh;
}
.admin-side {
    width:240px;flex-shrink:0;
    background:rgba(2,11,24,.95);
    border-left:1px solid var(--border);
    display:flex;flex-direction:column;
    position:sticky;top:0;height:100vh;overflow-y:auto;
}
.admin-side-head {
    padding:20px 16px;border-bottom:1px solid var(--border);
}
.admin-logo { font-size:20px;font-weight:900;color:var(--blue); }
.admin-version { font-size:11px;color:var(--t3);margin-top:2px; }
.admin-nav { flex:1;padding:8px;display:flex;flex-direction:column;gap:2px;overflow-y:auto; }
.adm-nb {
    display:flex;align-items:center;gap:8px;
    padding:9px 10px;border-radius:var(--r8);
    font-size:13px;font-weight:500;color:var(--t2);
    cursor:pointer;transition:all var(--trans);
    text-decoration:none;position:relative;
}
.adm-nb:hover { background:var(--surf2);color:var(--t1); }
.adm-nb.active { background:rgba(59,130,246,.15);color:var(--blue); }
.adm-nb span:first-child { font-size:16px;width:20px;text-align:center;flex-shrink:0; }
.adm-nb span:nth-child(2) { flex:1; }
.adm-badge {
    background:var(--surf3);color:var(--t2);border-radius:var(--r50);
    padding:1px 7px;font-size:10px;font-weight:700;
}
.adm-badge-red { background:var(--red);color:#fff; }
.adm-divider { padding:8px 10px 4px;font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.1em;font-weight:700; }
.admin-main { flex:1;min-width:0;overflow-y:auto;background:var(--bg); }
.admin-topbar {
    display:none;position:sticky;top:0;z-index:100;
    padding:12px 16px;border-bottom:1px solid var(--border);
    background:rgba(2,11,24,.95);backdrop-filter:blur(10px);
    align-items:center;justify-content:space-between;
}
.adm-tab { display:none;padding:24px;animation:fadeIn .2s ease; }
.adm-tab.active { display:block; }
.adm-page-head {
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
    margin-bottom:24px;
}
.adm-page-head h2 { font-size:20px;font-weight:800; }
.adm-stats-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:24px; }
.adm-stat-card {
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r12);
    padding:16px;text-align:center;transition:all var(--trans);
    border-top:3px solid var(--acc,var(--blue));
}
.adm-stat-card:hover { transform:translateY(-2px);box-shadow:var(--shadow); }
.asc-icon { font-size:28px;margin-bottom:8px; }
.asc-val { font-size:24px;font-weight:900;color:var(--acc,var(--blue)); }
.asc-lbl { font-size:12px;color:var(--t3);margin-top:4px; }
.adm-two-col { display:grid;grid-template-columns:1fr 1fr;gap:20px; }
.adm-card {
    background:var(--surface);border:1px solid var(--border);border-radius:var(--r12);
    overflow:hidden;
}
.adm-card-head {
    padding:14px 18px;border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;
    font-size:14px;font-weight:700;
}
.adm-table-wrap { overflow-x:auto; }
.adm-table { width:100%;border-collapse:collapse;font-size:13px; }
.adm-table th { padding:10px 16px;text-align:right;font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02); }
.adm-table td { padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:middle; }
.adm-table tr:last-child td { border-bottom:none; }
.adm-table tr:hover td { background:rgba(255,255,255,.02); }
.adm-av {
    width:32px;height:32px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,var(--blue),var(--purple));
    display:flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:700;color:#fff;
}
.adm-settings-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:20px; }

/* ── Install Banner ─────────────────────────────── */
.install-banner {
    display:none;position:fixed;bottom:70px;left:50%;transform:translateX(-50%);
    z-index:400;
    background:var(--surf3);border:1px solid var(--border2);
    border-radius:var(--r12);padding:12px 16px;
    align-items:center;gap:12px;
    box-shadow:var(--shadow2);min-width:300px;max-width:400px;
    animation:slideInUp .3s ease;
}
.install-banner.show { display:flex; }
.install-banner-title { font-size:14px;font-weight:700; }
.install-banner-desc { font-size:12px;color:var(--t2); }

/* ── Scroll Top ─────────────────────────────────── */
.scroll-top {
    position:fixed;bottom:80px;left:20px;z-index:300;
    width:44px;height:44px;border-radius:50%;
    background:linear-gradient(135deg,var(--blue),var(--purple));
    color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;
    cursor:pointer;box-shadow:0 4px 15px rgba(59,130,246,.4);
    opacity:0;transform:translateY(20px);pointer-events:none;
    transition:all var(--trans);
}
.scroll-top.visible { opacity:1;transform:none;pointer-events:auto; }
.scroll-top:hover { transform:translateY(-3px); }

/* ── 404 Page ────────────────────────────────────── */
.page-404 {
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    flex-direction:column;text-align:center;padding:40px;position:relative;
}
.p404-code {
    font-size:clamp(100px,20vw,180px);font-weight:900;
    background:linear-gradient(135deg,var(--blue),var(--purple),var(--cyan));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    line-height:1;margin-bottom:16px;
    animation:float 4s ease-in-out infinite;
}
.p404-title { font-size:24px;font-weight:700;margin-bottom:8px; }
.p404-desc { color:var(--t2);margin-bottom:24px;max-width:400px; }

/* ── Admin Login ─────────────────────────────────── */
.admin-login-page {
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    padding:20px;position:relative;overflow:hidden;
}
.alp-box {
    background:var(--surface);border:1px solid var(--border2);
    border-radius:var(--r20);padding:40px 32px;
    width:100%;max-width:380px;
    box-shadow:var(--shadow2);position:relative;z-index:1;
    text-align:center;
}
.alp-icon { font-size:48px;margin-bottom:16px; }
.alp-title { font-size:22px;font-weight:900;margin-bottom:4px; }
.alp-sub { font-size:13px;color:var(--t3); }
.alp-err {
    background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);
    border-radius:var(--r8);padding:10px;font-size:13px;color:var(--red);
    margin-bottom:16px;
}

/* ── Scroll Progress ─────────────────────────────── */
.scroll-progress {
    position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;
    background:linear-gradient(90deg,var(--blue),var(--purple),var(--cyan));
    transform-origin:left center;transform:scaleX(0);
    transition:transform .1s linear;
}

/* ── Code Block ──────────────────────────────────── */
pre,code {
    font-family:var(--fMono);
    background:var(--surf3);
    border-radius:var(--r8);
    padding:2px 8px;font-size:.9em;
    color:var(--cyan);
}
pre { padding:16px;overflow-x:auto;border:1px solid var(--border); }

/* ── Footer ──────────────────────────────────────── */
footer {
    padding:32px 60px;border-top:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:16px;position:relative;
    background:rgba(5,15,31,.5);
}
.footer-copy { font-size:13px;color:var(--t3); }
.footer-links { display:flex;gap:16px; }
.footer-link { font-size:13px;color:var(--t3);transition:color var(--trans); }
.footer-link:hover { color:var(--blue); }

/* ── Back to Top ─────────────────────────────────── */
.text-center { text-align:center; }
.text-muted { color:var(--t3); }
.p-4 { padding:32px; }
.p-2 { padding:16px; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Mobile First
═══════════════════════════════════════════════════ */
@media (max-width: 900px) {
    :root { --sb: 0px; }
    .sidebar { transform:translateX(100%); }
    body.ltr .sidebar { transform:translateX(-100%); }
    .sidebar.open { transform:translateX(0); }
    .mob-head { display:flex; }
    .mob-bottom-nav { display:block; }
    .main { margin-right:0;width:100%;padding-top:var(--sh); }
    section { padding:40px 20px; }
    .hero-inner.container { padding:0 20px; }
    .projects-grid { grid-template-columns:1fr; }
    .courses-grid { grid-template-columns:1fr; }
    .contact-grid { grid-template-columns:1fr; }
    .form-row { grid-template-columns:1fr; }
    footer { padding:20px; }
    .adm-two-col { grid-template-columns:1fr; }
    .adm-settings-grid { grid-template-columns:1fr; }
    .admin-side { display:none;position:fixed;z-index:300;right:0;top:0;height:100vh; }
    body.ltr .admin-side { right:auto;left:0; }
    .admin-side.open { display:flex;animation:slideInRight .25s ease; }
    .admin-topbar { display:flex; }
    .admin-main { padding-top:0; }
    .chat-layout { flex-direction:column; }
    .chat-sidebar { display:none;width:100%;border-left:none;border-bottom:1px solid var(--border); }
    .chat-sidebar.mobile-show { display:flex; }
    .notif-panel { width:100%; }
    .gallery-masonry { columns:2; }
    .toasts { right:10px;left:10px;max-width:none; }
    body.ltr .toasts { right:10px;left:10px; }
}

@media (max-width: 600px) {
    h1 { font-size:clamp(1.5rem,6vw,2.5rem); }
    .hero-stats { gap:20px; }
    .adm-stats-grid { grid-template-columns:repeat(2,1fr); }
    .gallery-masonry { columns:1; }
    section { padding:32px 16px; }
}

/* ── RTL Adjustments ─────────────────────────────── */
[dir="rtl"] .draw-panel { border-right:1px solid var(--border);border-left:none; }
[dir="rtl"] .adm-table th,[dir="rtl"] .adm-table td { text-align:right; }
[dir="ltr"] .adm-table th,[dir="ltr"] .adm-table td { text-align:left; }
[dir="ltr"] .admin-side { border-right:1px solid var(--border);border-left:none;right:auto;left:0; }
[dir="ltr"] .sidebar { right:auto;left:0;border-left:none;border-right:1px solid var(--border); }
[dir="ltr"] .main { margin-right:0;margin-left:var(--sb); }
[dir="ltr"] section { direction:ltr; }

/* ── PWA Standalone ──────────────────────────────── */
@media (display-mode: standalone) {
    .mob-head { padding-top:env(safe-area-inset-top,0px); height:calc(var(--sh) + env(safe-area-inset-top,0px)); }
    .mob-bottom-nav { padding-bottom:env(safe-area-inset-bottom,0px); }
}

/* ── Selection & Focus ───────────────────────────── */
*:focus-visible { outline:2px solid var(--blue);outline-offset:2px;border-radius:4px; }
img { user-select:none; }

/* ── Skeleton Loading ────────────────────────────── */
.skeleton {
    background:linear-gradient(90deg,var(--surface) 25%,var(--surf2) 50%,var(--surface) 75%);
    background-size:200% 100%;
    animation:shimmer 1.5s infinite;
    border-radius:var(--r8);
}

/* ── Auth Form Section ──────────────────────────── */
.auth-form-section { display:block; }

/* ── Ticket Row ─────────────────────────────────── */
.ticket-row {
    display:grid;grid-template-columns:1fr auto auto auto;
    align-items:center;gap:12px;
    padding:14px 16px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r12);
    transition:border-color var(--trans);
    cursor:pointer;
}
.ticket-row:hover { border-color:var(--blue); }
.ticket-row .tk-subject { font-weight:600;color:var(--t1); }
.ticket-row .tk-meta { font-size:12px;color:var(--t2);margin-top:2px; }

/* ── User Row ─────────────────────────────────────── */
.user-row {
    display:flex;align-items:center;gap:12px;
    padding:10px 14px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r8);
    margin-bottom:8px;
}

/* ── Lightbox Video ──────────────────────────────── */
.lb-vid {
    max-width:90vw;max-height:80vh;
    border-radius:var(--r12);
    outline:none;
}

/* ── Has Unread ──────────────────────────────────── */
.has-unread { position:relative; }
.has-unread::after {
    content:'';position:absolute;top:0;right:0;
    width:8px;height:8px;border-radius:50%;
    background:var(--red);
    border:2px solid var(--bg);
}

/* ═══ Payment Page ════════════════════════════════════════════════ */
@keyframes pulse {
    0%,100% { transform: scale(1); }
    50%      { transform: scale(1.1); }
}

/* ═══ Analytics Charts ════════════════════════════════════════════ */
.adm-stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r12);
    padding: 20px;
    text-align: center;
    transition: border-color .2s;
}
.adm-stat-card:hover { border-color: var(--blue); }

/* ═══ Orders Table badge colors ═══════════════════════════════════ */
.badge-green  { background: rgba(16,185,129,.15); color: var(--green);  border: 1px solid rgba(16,185,129,.25); }
.badge-blue   { background: rgba(59,130,246,.15);  color: var(--blue);   border: 1px solid rgba(59,130,246,.25); }
.badge-gray   { background: rgba(100,116,139,.15); color: var(--t3);     border: 1px solid rgba(100,116,139,.2); }
.badge-orange { background: rgba(245,158,11,.15);  color: var(--orange); border: 1px solid rgba(245,158,11,.25); }

/* ═══ Courses enrolled state ══════════════════════════════════════ */
.course-enrolled-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: var(--r50); font-size: 11px;
    font-weight: 700; background: rgba(16,185,129,.12);
    color: var(--green); border: 1px solid rgba(16,185,129,.25);
}

@media (hover:hover) and (pointer:fine){html{cursor:none}input,textarea,select,[contenteditable],.no-orb{cursor:auto}}

/* ===== 3D / motion polish ===== */
.tilt3d{transform-style:preserve-3d;transition:transform .15s ease,box-shadow .25s ease;will-change:transform}
.tilt3d .tilt-inner{transform:translateZ(28px)}
.tilt3d:hover{box-shadow:0 24px 60px -18px rgba(37,99,235,.45)}
.reveal{opacity:0;transform:translateY(28px) scale(.985);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.06s}.reveal.d2{transition-delay:.12s}.reveal.d3{transition-delay:.18s}.reveal.d4{transition-delay:.24s}
.shine{position:relative;overflow:hidden}
.shine::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.shine:hover::after{transform:translateX(120%)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.floaty{animation:floaty 6s ease-in-out infinite}
.glassx{background:rgba(255,255,255,.06);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.10)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}.tilt3d{transform:none!important}.floaty{animation:none}}

/* ════════════════════════════════════════════════
   SBIORG v7 — AUTHORITATIVE LAYOUT + NEON 3D
   (placed last to win the cascade)
════════════════════════════════════════════════ */
:root{--sbw:280px}
@media(max-width:1024px) and (min-width:901px){:root{--sbw:248px}}
.app-root{display:block!important}
.sidebar{width:var(--sbw)!important}
html[dir="rtl"] .sidebar{right:0!important;left:auto!important;border-left:1px solid var(--border);border-right:none;transform:none}
html[dir="rtl"] .main{margin-right:var(--sbw)!important;margin-left:0!important;width:calc(100% - var(--sbw))!important}
html[dir="ltr"] .sidebar{left:0!important;right:auto!important;border-right:1px solid var(--border);border-left:none;transform:none}
html[dir="ltr"] .main{margin-left:var(--sbw)!important;margin-right:0!important;width:calc(100% - var(--sbw))!important}
@media(min-width:901px){.mob-head{display:none!important}.mob-bottom-nav{display:none!important}.sidebar{transform:none!important}}
@media(max-width:900px){
  html[dir="rtl"] .sidebar{transform:translateX(112%)!important}
  html[dir="ltr"] .sidebar{transform:translateX(-112%)!important}
  .sidebar.open,.sidebar.mob-open{transform:translateX(0)!important}
  .main{margin-left:0!important;margin-right:0!important;width:100%!important;padding-top:var(--sh)}
  .mob-head{display:flex}
  .mob-bottom-nav{display:block}
}

/* ── Neon minimal buttons / cards / panels ── */
.btn-blue,.btn-primary,.sb-cta{box-shadow:0 0 0 1px rgba(59,130,246,.35),0 8px 24px -8px rgba(59,130,246,.5)}
.btn-blue:hover,.btn-primary:hover,.sb-cta:hover{box-shadow:0 0 0 1px rgba(59,130,246,.6),0 0 26px rgba(59,130,246,.55),0 0 60px rgba(139,92,246,.35)}
.card,.project-card,.service-card,.adm-card,.stat-card,.skill-card{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s}
.card:hover,.project-card:hover,.service-card:hover,.skill-card:hover{border-color:rgba(59,130,246,.5);box-shadow:0 0 0 1px rgba(59,130,246,.25),0 18px 50px -20px rgba(59,130,246,.45)}
.neon-title{text-shadow:0 0 18px rgba(59,130,246,.55),0 0 40px rgba(139,92,246,.35)}
.nb.active{box-shadow:inset 0 0 0 1px rgba(59,130,246,.25)}

/* ── Day / Night theme ── */
body.light{--bg:#eef2f8;--bg2:#ffffff;--surface:#f3f6fb;--t1:#0e1726;--t2:#33415c;--t3:#64748b;--border:#dbe3ee;--border2:#c7d2e0}
body.light .sidebar{background:rgba(255,255,255,.92)}
body.light .glassx{background:rgba(255,255,255,.55);border-color:rgba(0,0,0,.06)}
body.light #particleCanvas{opacity:.5}
.theme-toggle{position:fixed;bottom:18px;z-index:300;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--bg2);border:1px solid var(--border2);box-shadow:var(--shadow);cursor:pointer;transition:transform .2s}
html[dir="rtl"] .theme-toggle{left:18px}html[dir="ltr"] .theme-toggle{right:18px}
.theme-toggle:hover{transform:scale(1.1) rotate(15deg)}
@media(max-width:900px){.theme-toggle{bottom:78px}}

/* ── Telegram-style chat ── */
.tg-shell{display:flex;height:calc(100vh - 0px);max-width:1100px;margin:0 auto;border:1px solid var(--border);border-radius:var(--r16);overflow:hidden;background:var(--bg2)}
.tg-list{width:320px;border-inline-end:1px solid var(--border);display:flex;flex-direction:column;background:var(--bg)}
.tg-search{padding:10px;border-bottom:1px solid var(--border)}
.tg-search input{width:100%;padding:10px 14px;border-radius:var(--r50);background:var(--surface);border:1px solid var(--border);color:var(--t1)}
.tg-chats{flex:1;overflow-y:auto}
.tg-chat-item{display:flex;gap:10px;align-items:center;padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--border)}
.tg-chat-item:hover,.tg-chat-item.active{background:rgba(59,130,246,.1)}
.tg-ava{width:46px;height:46px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,var(--blue),var(--purple))}
.tg-main{flex:1;display:flex;flex-direction:column;background:radial-gradient(circle at 30% 10%,rgba(59,130,246,.08),transparent 60%),var(--bg2)}
.tg-head{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.tg-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:8px}
.tg-msg{max-width:72%;padding:8px 13px;border-radius:16px;font-size:14px;line-height:1.5;position:relative;animation:tgIn .25s ease}
@keyframes tgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tg-msg.me{align-self:flex-end;background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;border-bottom-right-radius:4px}
.tg-msg.them{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px}
.tg-time{font-size:10px;opacity:.7;margin-top:3px;display:block}
.tg-input{padding:12px;border-top:1px solid var(--border);display:flex;gap:8px}
.tg-input input{flex:1;padding:12px 16px;border-radius:var(--r50);background:var(--surface);border:1px solid var(--border);color:var(--t1)}
.tg-send{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center}
@media(max-width:900px){.tg-list{width:100%}.tg-list.hide-mobile{display:none}.tg-main.hide-mobile{display:none}}

/* ── Logo / image protection + watermark ── */
img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
.wm-img{position:relative;display:inline-block}
.wm-img::after{content:"";position:absolute;inset:0;background:url('/sbi.png') center/64px no-repeat;opacity:.10;pointer-events:none;mix-blend-mode:overlay}
.no-save{pointer-events:none}

/* ── SBI token chip ── */
.sbi-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--r50);background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(139,92,246,.18));border:1px solid rgba(59,130,246,.35);font-weight:800;color:var(--blue)}
.sbi-chip img{width:18px;height:18px;border-radius:50%}

/* ── Code Lab + Games ── */
.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;height:70vh}
@media(max-width:900px){.lab-grid{grid-template-columns:1fr;height:auto}}
.lab-editor{display:flex;flex-direction:column;gap:8px}
.lab-tabs{display:flex;gap:6px}
.lab-tab{padding:6px 14px;border-radius:var(--r8);background:var(--surface);border:1px solid var(--border);font-weight:700;font-size:13px}
.lab-tab.active{background:rgba(59,130,246,.15);color:var(--blue);border-color:rgba(59,130,246,.4)}
.lab-area{flex:1;min-height:260px;width:100%;background:#0b1120;color:#cfe3ff;border:1px solid var(--border);border-radius:var(--r12);padding:14px;font-family:var(--fMono);font-size:13px;line-height:1.6;resize:vertical}
.lab-preview{background:#fff;border:1px solid var(--border);border-radius:var(--r12);width:100%;height:100%;min-height:300px}
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.game-card{padding:22px;border-radius:var(--r16);background:var(--bg2);border:1px solid var(--border);text-align:center;cursor:pointer;transition:all .25s}
.game-card:hover{transform:translateY(-6px) scale(1.02);border-color:rgba(59,130,246,.5);box-shadow:0 18px 50px -18px rgba(59,130,246,.5)}
.game-emoji{font-size:46px;display:block;margin-bottom:10px;filter:drop-shadow(0 0 14px rgba(59,130,246,.5))}

/* ── Telegram-flavored chat polish (targets existing .chat-* classes) ── */
.chat-wrap{border-radius:var(--r16);box-shadow:0 0 0 1px rgba(59,130,246,.12),0 24px 70px -30px rgba(59,130,246,.4)}
.chat-main{background:radial-gradient(circle at 30% 0%,rgba(59,130,246,.10),transparent 55%),radial-gradient(circle at 80% 100%,rgba(139,92,246,.10),transparent 55%),var(--bg2)!important}
.chat-messages{background-image:radial-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:22px 22px}
.chat-user-item{border-radius:12px;margin:4px 8px;transition:background .2s,transform .15s}
.chat-user-item:hover{transform:translateX(-2px)}
.chat-user-item.active{background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(139,92,246,.14))!important}
.chat-head{backdrop-filter:blur(8px);background:rgba(59,130,246,.06)}
.chat-bubble,.msg-bubble,.message-bubble{border-radius:16px!important}
.id-search{display:flex;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);align-items:center}
.id-search input{flex:1;padding:9px 14px;border-radius:var(--r50);background:var(--surface);border:1px solid var(--border);color:var(--t1);font-size:13px}
.id-search button{padding:9px 14px;border-radius:var(--r50);background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;border:none;cursor:pointer;font-weight:700}

/* ── profile edit fields ── */
.pf-field span{display:block;font-size:12px;font-weight:700;color:var(--t2);margin-bottom:5px}
.pf-field .req{color:#ef4444;font-style:normal}
.pf-field .opt{color:var(--t3);font-style:normal;font-weight:400}
.pf-field input,.pf-field textarea,.pf-field select{width:100%;padding:10px 13px;border-radius:var(--r8);background:var(--surface);border:1px solid var(--border);color:var(--t1);font-size:13px;font-family:inherit}
.pf-field input:focus,.pf-field textarea:focus,.pf-field select:focus{outline:none;border-color:rgba(59,130,246,.6);box-shadow:0 0 0 3px rgba(59,130,246,.15)}


/* [v9 cleanup] legacy hologram mascot styles removed — superseded by v8.7 solid mascot + v9.0 direction block */

/* Tech / future background accents */
.tech-grid{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(80,150,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(80,150,255,.06) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 80%);transform:perspective(420px) rotateX(0deg);opacity:.5}
.tech-scan{position:fixed;inset:0;z-index:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(120,170,255,.04) 0,rgba(120,170,255,.04) 1px,transparent 1px,transparent 4px);animation:scanMove 8s linear infinite;opacity:.4}
@keyframes scanMove{from{background-position:0 0}to{background-position:0 64px}}
body.light .tech-grid,body.light .tech-scan{opacity:.25}

/* Chat: Telegram-style ID search */
.tg-search-bar{position:relative;display:flex;align-items:center;gap:8px;padding:8px 12px;margin:8px;border-radius:12px;background:var(--surface);border:1px solid var(--border)}
.tg-search-bar .tg-search-ic{opacity:.7}
.tg-search-bar input{flex:1;background:transparent;border:none;outline:none;color:var(--t1);font-family:inherit;font-size:13px}
.tg-search-res{position:absolute;top:calc(100% + 4px);left:8px;right:8px;max-height:320px;overflow-y:auto;background:var(--bg2,#0d1424);border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.5);z-index:40;display:none}
.tg-sr-item{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .15s}
.tg-sr-item:hover{background:rgba(59,130,246,.12)}
.tg-sr-av{width:38px;height:38px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,#3b82f6,#06b6d4);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;flex-shrink:0}
.tg-sr-info{display:flex;flex-direction:column;min-width:0}
.tg-sr-name{font-weight:700;font-size:14px;color:var(--t1)}
.tg-sr-un{font-size:12px;color:var(--t3)}
.tg-sr-empty{padding:16px;text-align:center;color:var(--t3);font-size:13px}

/* Tutorial pages */
.learn-page{position:relative;z-index:1}
.learn-hero{text-align:center;padding:34px 22px;border-radius:22px;background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(6,182,212,.10));border:1px solid var(--border);margin-bottom:24px}
.learn-badge{display:inline-block;padding:6px 16px;border-radius:999px;font-weight:800;color:#fff;background:linear-gradient(135deg,#f97316,#ef4444);margin-bottom:14px;letter-spacing:.5px}
.learn-title{font-size:34px;margin:0 0 10px;font-weight:900}
.learn-sub{color:var(--t2);max-width:620px;margin:0 auto 18px;line-height:1.9}
.learn-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:24px;margin-bottom:18px}
.learn-card h2{margin:0 0 12px;font-size:20px}
.learn-card p{color:var(--t2);line-height:2}
.learn-note{font-size:13px;color:var(--t3);margin-top:10px!important;border-inline-start:3px solid rgba(59,130,246,.5);padding-inline-start:12px}
.code-block{background:#0a0f1e;border:1px solid var(--border);border-radius:12px;padding:16px;overflow-x:auto;margin:12px 0;direction:ltr;text-align:left}
.code-block code{font-family:'Courier New',monospace;font-size:13px;line-height:1.7;color:#9ad1ff;white-space:pre}
.learn-cta{text-align:center;background:linear-gradient(135deg,rgba(16,185,129,.1),rgba(59,130,246,.1))}
.learn-soon{display:inline-block;margin-inline-start:10px;margin-top:10px;color:var(--t3);font-size:13px}


/* CRITICAL: on mobile the un-scoped dir rule kept a 280px margin on .main, squashing all pages. Force full width with high specificity. */
@media(max-width:900px){
  html[dir="rtl"] .main,html[dir="ltr"] .main,html .main,.main{
    margin-left:0!important;margin-right:0!important;width:100%!important;max-width:100%!important;
    padding-top:var(--sh,56px)!important;padding-bottom:74px!important;
  }
  html[dir="rtl"] .app-root,html[dir="ltr"] .app-root,.app-root{display:block!important}
  section{padding:48px 16px!important}
  .container{max-width:100%!important}
}
/* keep background/overlays from ever covering content */
#particleCanvas{position:fixed;inset:0;z-index:0;pointer-events:none}
.app-root,.main{position:relative;z-index:2}
.sidebar{z-index:120}
.mob-head{z-index:130}

/* [v9 cleanup] legacy mobile mascot overrides removed — superseded */

/* Meeting fullscreen helpers */
.meet-fs-btn{position:absolute;top:12px;inset-inline-end:12px;z-index:20;width:40px;height:40px;border-radius:10px;background:rgba(2,11,24,.7);border:1px solid var(--border);color:#fff;font-size:18px;cursor:pointer}
.meet-stage:fullscreen{width:100vw;height:100vh}
.meet-stage:fullscreen .video-grid{align-content:stretch}


/* big blue iris dead-center */

/* The blue circle */

/* Blue iris — centered, tracked by JS via inline transform */

@media (hover:hover) and (pointer:fine){
  html, body, a, button, .btn, [role=button], summary, label, .nb, .lb, .card, .project-card { cursor:none !important; }
  input, textarea, select, [contenteditable="true"] { cursor:text !important; }
}
/* Make sure the quantum background is clearly visible on Android */
@media (max-width:760px){
  #particleCanvas{ display:block !important; opacity:.62 !important; z-index:0 !important; }
  /* minimal pinned cartoon avatar on Android (no gliding) */
  #sbiMascot{ width:62px !important; opacity:.5 !important; left:10px !important; bottom:86px !important; z-index:5 !important; }
  #sbiMascot img{ animation:mascotBobMini 4s ease-in-out infinite !important; }
}
@keyframes mascotBobMini{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }


/* [v9 cleanup] legacy pseudo-3D mascot float/halo removed — superseded by solid mascot */


.tech-grid,.tech-scan{display:none!important}

/* Full removal on mobile / touch / small screens (incl. JS trail) */
@media (hover:none),(pointer:coarse),(max-width:760px){
  html,body{cursor:auto!important}
}
/* Profile cover banner */
.profile-cover{height:160px;margin:-2px -2px 18px;border-radius:16px 16px 0 0;background-size:cover;background-position:center;background-repeat:no-repeat}
@media(max-width:760px){.profile-cover{height:110px}}

@media (hover:hover) and (pointer:fine){
  html,body,a,button,.btn,[role="button"],summary,label,.nb,.pf-btn,.skill-tab,.gallery-item,.project-card,.game-card{cursor:none!important}
  input,textarea,select,[contenteditable="true"]{cursor:text!important}
}

/* smoother, lighter effects */
#particleCanvas{opacity:.32!important;filter:saturate(1.08)}
@media(max-width:760px){#particleCanvas{opacity:.42!important}}
.card,.project-card,.service-card,.skill-card,.game-card,.course-card,.gallery-item-wrap{
  box-shadow:0 10px 30px -22px rgba(59,130,246,.45);
}
.card:hover,.project-card:hover,.service-card:hover,.skill-card:hover,.game-card:hover,.course-card:hover,.gallery-item-wrap:hover{
  transform:translateY(-5px)!important;
  border-color:rgba(96,165,250,.55)!important;
  box-shadow:0 18px 55px -26px rgba(59,130,246,.75),0 0 0 1px rgba(96,165,250,.18)!important;
}
.btn,.btn-blue,.btn-primary,.sb-cta,.tg-send,.id-search button{
  background-size:160% 160%;
  transition:transform .18s ease,box-shadow .22s ease,background-position .35s ease!important;
}
.btn:hover,.btn-blue:hover,.btn-primary:hover,.sb-cta:hover,.tg-send:hover,.id-search button:hover{
  background-position:100% 50%;transform:translateY(-2px);
}
::selection{background:rgba(96,165,250,.35);color:#fff}


/* v30.2 micro polish */
html{scroll-behavior:smooth}
.main{isolation:isolate}
img{max-width:100%;height:auto}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}


/* v30.3 final: blue iris dead-center */

/* v30.4 Windows/Desktop light Android-style spacing */
@media (min-width:761px){
  #particleCanvas{opacity:.18!important;filter:saturate(.9) blur(.15px)!important}
  body::before,body::after{opacity:.30!important}
  .hero-orb{opacity:.18!important;filter:blur(24px)!important}
  section,.section{padding-top:110px!important;padding-bottom:110px!important}
  .container,.wrap,.section-inner{max-width:1180px!important;padding-left:42px!important;padding-right:42px!important}
  .hero,.home-hero,.sb-hero{min-height:92vh!important;padding-top:120px!important;padding-bottom:120px!important}
  .hero-content,.hero-grid,.about-grid,.skills-grid,.projects-grid,.course-grid,.games-grid,.gallery-grid{
    gap:34px!important;
  }
  .card,.project-card,.service-card,.skill-card,.game-card,.course-card,.glass,.panel{
    padding:28px!important;border-radius:24px!important;
  }
  .hero-title,.main-title,h1{
    letter-spacing:-.02em!important;line-height:1.12!important;
  }
  .hero-title .brand,.brand-text,.logo-text,.mob-title:first-letter{
    letter-spacing:.04em!important;
  }
}
@media (min-width:1024px){
  .hero-title,.main-title,h1{font-size:clamp(46px,5.8vw,86px)!important}
  .subtitle,.hero-subtitle,.lead{font-size:clamp(18px,1.5vw,24px)!important;line-height:1.9!important}
  .grid,.skills-grid,.projects-grid,.course-grid,.games-grid{row-gap:42px!important;column-gap:34px!important}
}
/* Make the big desktop background write SBI like mobile, not SBIORG/Kali. JS also enforces this. */
#particleCanvas{mix-blend-mode:screen!important}

/* ===== SBIORG v35: clean cursor + light Windows background + premium UI kit ===== */
@media (hover:hover) and (pointer:fine){
  html,body,a,button,.btn,[role="button"],summary,label,.nb,.pf-btn,.skill-tab,.gallery-item,.project-card,.game-card{cursor:none!important}
  input,textarea,select,[contenteditable="true"]{cursor:text!important}
}
#cursorGlow,#cursorTrail{display:none!important}
.sbi-eye-cursor{position:fixed!important;left:0;top:0;width:38px!important;height:38px!important;z-index:2147483647!important;pointer-events:none!important;transform:translate3d(-50%,-50%,0)!important;background:transparent!important;border:0!important;box-shadow:none!important;filter:none!important;opacity:0;transition:opacity .12s,width .12s,height .12s;contain:layout style paint}
.sbi-eye-cursor.is-hover{width:42px!important;height:42px!important}.sbi-eye-cursor.is-down{width:34px!important;height:34px!important}
.sbi-eye{position:absolute!important;inset:0!important;border-radius:50%!important;overflow:hidden!important;display:grid!important;place-items:center!important;background:radial-gradient(circle at 50% 50%,#fff 0%,#f7fbff 45%,#dfeaff 72%,#bad3ff 100%)!important;box-shadow:inset 0 -2px 5px rgba(15,32,70,.20),inset 0 2px 5px rgba(255,255,255,.94),0 5px 14px rgba(0,0,0,.20)!important;animation:sbiCleanBlink 1.9s infinite ease-in-out!important;transform-origin:50% 50%!important}
.sbi-iris{position:absolute!important;top:50%!important;left:50%!important;width:20px!important;height:20px!important;border-radius:50%!important;transform:translate3d(-50%,-50%,0)!important;background:radial-gradient(circle at 50% 50%,#66c4ff 0%,#1f78ff 42%,#0a3da8 73%,#03194f 100%)!important;box-shadow:inset 0 0 5px rgba(0,0,0,.50)!important;display:block!important}
.sbi-pupil{position:absolute!important;top:50%!important;left:50%!important;width:8px!important;height:8px!important;border-radius:50%!important;transform:translate3d(-50%,-50%,0)!important;background:#020611!important;display:block!important}
@keyframes sbiCleanBlink{0%,78%,100%{clip-path:inset(0 0 0 0)}86%{clip-path:inset(48% 0 48% 0)}93%{clip-path:inset(0 0 0 0)}}
@media (hover:none),(pointer:coarse),(max-width:760px){.sbi-eye-cursor,#cursorOrb,#cursorGlow,#cursorTrail{display:none!important}html,body{cursor:auto!important}}
#particleCanvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.18!important;filter:saturate(.92)!important;mix-blend-mode:screen!important}
@media(max-width:760px){#particleCanvas{opacity:.40!important}}
@media(min-width:761px){.hero-orb{opacity:.12!important;filter:blur(26px)!important}section,.section{padding-top:96px!important;padding-bottom:96px!important}.container{max-width:1180px!important;padding-left:42px!important;padding-right:42px!important}.hero-inner{padding-left:56px!important;padding-right:56px!important}.card,.project-card,.service-card,.skill-card,.game-card,.course-card,.adm-card,.glassx{border-radius:24px!important}}
.card,.project-card,.service-card,.skill-card,.game-card,.course-card,.adm-card,.glassx{box-shadow:0 18px 60px -36px rgba(59,130,246,.72);border-color:rgba(148,163,184,.16)!important}
.card:hover,.project-card:hover,.service-card:hover,.skill-card:hover,.game-card:hover,.course-card:hover{transform:translateY(-6px)!important;border-color:rgba(96,165,250,.58)!important;box-shadow:0 26px 70px -34px rgba(59,130,246,.9),0 0 0 1px rgba(96,165,250,.18)!important}
.btn,.btn-blue,.btn-primary,.sb-cta{background-size:160% 160%;transition:transform .18s ease,box-shadow .22s ease,background-position .35s ease!important}.btn:hover,.btn-blue:hover,.btn-primary:hover,.sb-cta:hover{background-position:100% 50%;transform:translateY(-2px)}
.profile-header{background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(139,92,246,.10)),var(--bg2)!important;border:1px solid rgba(96,165,250,.22)!important;border-radius:28px!important;box-shadow:0 28px 90px -48px rgba(59,130,246,.9)!important;overflow:hidden}.profile-cover{height:190px!important}.profile-av,.profile-av-ph{box-shadow:0 0 0 5px rgba(15,23,42,.75),0 18px 48px -24px rgba(96,165,250,.95)!important}.profile-stats>div{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:16px;padding:12px!important}
.admin-side{background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(2,6,23,.98))!important;box-shadow:22px 0 80px -56px rgba(59,130,246,.75)}.adm-nb{border-radius:14px!important}.adm-nb:hover,.adm-nb.active{background:linear-gradient(135deg,rgba(59,130,246,.20),rgba(139,92,246,.14))!important;transform:translateX(-2px)}.adm-stat-card{background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.035))!important;border-radius:22px!important}.adm-table tr:hover{background:rgba(59,130,246,.08)!important}
.learn-hero{border-radius:28px!important;background:radial-gradient(circle at 20% 0,rgba(96,165,250,.18),transparent 45%),linear-gradient(135deg,rgba(59,130,246,.14),rgba(6,182,212,.09))!important}.learn-card{border-radius:22px!important;position:relative;overflow:hidden}.learn-card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,var(--blue),transparent);opacity:.55}.code-block{box-shadow:inset 0 0 0 1px rgba(96,165,250,.14),0 18px 60px -40px rgba(59,130,246,.8)!important}
.meet-root,.chat-wrap,.lab-grid{box-shadow:0 24px 90px -48px rgba(59,130,246,.75)!important;border-color:rgba(96,165,250,.22)!important}.meet-ctrl,.meet-tbtn{transition:transform .15s,box-shadow .2s}.meet-ctrl:hover,.meet-tbtn:hover{transform:translateY(-2px);box-shadow:0 10px 28px -14px rgba(96,165,250,.8)}
html{scroll-behavior:smooth}.main{isolation:isolate}img{max-width:100%;height:auto}::selection{background:rgba(96,165,250,.35);color:#fff}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}


/* ===== SBIORG v38 chat search + flashcard SEO polish ===== */
.chat-quick-admin{border:1px solid rgba(96,165,250,.28);background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(139,92,246,.12));color:#fff;border-radius:12px;padding:8px 11px;font-weight:800;white-space:nowrap;cursor:pointer}.chat-quick-admin:hover{border-color:rgba(96,165,250,.6);transform:translateY(-1px)}
.chat-search-hint{position:absolute;top:calc(100% + 4px);inset-inline:14px;font-size:10.5px;color:var(--t3);pointer-events:none;opacity:.78}.tg-search-bar{margin-bottom:24px!important}.tg-sr-item{position:relative}.tg-sr-actions{margin-inline-start:auto;display:flex;gap:5px;color:#93c5fd;font-size:13px}.tg-sr-un{line-height:1.55}.chat-head{position:relative}.chat-head::after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(96,165,250,.42),transparent)}
.fc-seo-copy{margin:16px 0 18px;padding:18px 20px;border:1px solid rgba(96,165,250,.18);border-radius:22px;background:linear-gradient(135deg,rgba(59,130,246,.08),rgba(6,182,212,.05))}.fc-seo-copy h2{font-size:20px;margin:0 0 8px;color:var(--t1)}.fc-seo-copy p{font-size:13px;line-height:2;color:var(--t2);margin:0 0 10px}.fc-seo-copy ul{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0;list-style:none}.fc-seo-copy li{font-size:12px;color:#bfdbfe;background:rgba(59,130,246,.12);border:1px solid rgba(96,165,250,.18);border-radius:999px;padding:6px 10px}@media(max-width:760px){.chat-search-hint{display:none}.tg-search-bar{margin-bottom:8px!important}.chat-quick-admin{padding:7px 9px;font-size:12px}}


/* ===== SBIORG v40 flashcard bilingual fix ===== */
.fc-label{display:inline-block;font-size:11px;font-weight:900;color:#60a5fa;margin-inline-end:6px}.fc-mean,.fc-mean-en{line-height:1.85}.fc-mean-en{direction:ltr;text-align:left;color:#dbeafe;margin-top:8px;font-weight:800}.fc-ex,.fc-ex-back,.fc-ex-tr{line-height:1.8}.fc-ex-tr{display:flex;flex-direction:column;gap:5px;margin-top:8px;color:var(--t2)}.fc-ex-front,.fc-ex{color:#bfdbfe}


/* ===== SBIORG v41 final: full monitor classroom + colorful galaxy background ===== */
#particleCanvas{opacity:.48!important;filter:saturate(1.42) contrast(1.06)!important;mix-blend-mode:screen!important}
@media(max-width:760px){#particleCanvas{opacity:.60!important;filter:saturate(1.55) contrast(1.06)!important}}
@media(min-width:761px){#particleCanvas{opacity:.44!important}.meet-root{background:radial-gradient(circle at 18% 0,rgba(37,99,235,.18),transparent 36%),radial-gradient(circle at 82% 100%,rgba(6,182,212,.12),transparent 38%),#08111f!important}}
.meet-stage:fullscreen,.meet-stage:-webkit-full-screen{width:100vw!important;height:100vh!important;background:#020617!important}
.meet-stage:fullscreen .video-grid.screen-mode,.meet-stage:-webkit-full-screen .video-grid.screen-mode{padding:0!important}
.meet-stage:fullscreen .vtile.screen-share,.meet-stage:-webkit-full-screen .vtile.screen-share{border-radius:0!important;border:0!important;height:100vh!important}
.meet-stage:fullscreen .vtile.screen-share video,.meet-stage:-webkit-full-screen .vtile.screen-share video{object-fit:contain!important;width:100vw!important;height:100vh!important}
.meet-share-status,.meet-share-help{font-family:inherit}
@media(max-width:760px){.video-grid.screen-mode .vtile:not(.screen-share){width:118px!important;height:76px!important;bottom:12px!important;inset-inline-end:12px!important}.meet-share-status{top:8px;font-size:11px;padding:7px 10px}.meet-share-help{top:50px;padding:10px 12px}}
.card,.project-card,.service-card,.skill-card,.game-card,.course-card,.learn-card,.adm-card,.glassx{backdrop-filter:blur(14px);background-image:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important}


/* ===== SBIORG v43 balanced home background + admin reliability ===== */
#particleCanvas{opacity:.34!important;filter:saturate(1.22) contrast(1.03)!important;mix-blend-mode:screen!important}
@media(max-width:760px){#particleCanvas{opacity:.43!important;filter:saturate(1.28) contrast(1.03)!important}}
@media(min-width:761px){#particleCanvas{opacity:.32!important}}
.admin-side,.admin-nav,.adm-nb{pointer-events:auto!important}.adm-nb{user-select:none}.adm-tab{scroll-margin-top:20px}.admin-main{min-width:0}.adm-table-wrap{max-width:100%}


/* ===== SBIORG v45 Knowledge Graph / About page ===== */
.kg-about-hero{padding:110px 0 80px;min-height:100vh}.kg-card{display:grid;grid-template-columns:280px 1fr;gap:34px;align-items:center;padding:30px;border:1px solid rgba(96,165,250,.22);border-radius:30px;background:radial-gradient(circle at 0 0,rgba(96,165,250,.16),transparent 42%),linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:0 28px 90px -48px rgba(59,130,246,.9);backdrop-filter:blur(16px)}.kg-avatar-wrap{display:grid;place-items:center}.kg-avatar{width:240px;height:240px;border-radius:34px;object-fit:cover;border:3px solid rgba(96,165,250,.25);box-shadow:0 24px 70px -35px rgba(96,165,250,.95)}.kg-main h1{font-size:clamp(34px,5vw,64px);margin:8px 0 8px;line-height:1.15}.kg-main h1 span{display:block;font-size:.48em;color:#93c5fd;margin-top:6px}.kg-main h2{font-size:clamp(18px,2vw,26px);color:var(--t2);margin:0 0 14px}.kg-main p{color:var(--t2);line-height:2;font-size:15px;max-width:850px}.kg-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:18px 0}.kg-quick div,.kg-box{border:1px solid rgba(148,163,184,.16);border-radius:18px;background:rgba(255,255,255,.04);padding:14px}.kg-quick b{display:block;color:#60a5fa;font-size:11px;text-transform:uppercase;margin-bottom:5px}.kg-quick span{font-weight:800}.kg-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.kg-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.kg-wide{grid-column:1/-1}.kg-box h3{margin:0 0 12px;font-size:16px}.kg-box p{color:var(--t2);line-height:2}.kg-chips{display:flex;gap:8px;flex-wrap:wrap}.kg-chips span{padding:7px 10px;border-radius:999px;background:rgba(59,130,246,.12);border:1px solid rgba(96,165,250,.18);color:#dbeafe;font-size:12px;font-weight:800}.kg-links{display:grid;gap:8px}.kg-links a{color:#93c5fd;word-break:break-all;background:rgba(59,130,246,.07);padding:8px 10px;border-radius:10px;border:1px solid rgba(96,165,250,.12)}@media(max-width:820px){.kg-card{grid-template-columns:1fr;text-align:center;padding:22px}.kg-avatar{width:180px;height:180px}.kg-grid{grid-template-columns:1fr}.kg-actions{justify-content:center}}


/* ===== SBIORG v47 performance + official photos ===== */
#particleCanvas{opacity:.24!important;filter:saturate(1.08) contrast(1.02)!important}
@media(max-width:760px){#particleCanvas{opacity:.30!important}}
.sbi-eye-cursor{width:30px!important;height:30px!important;transition:opacity .08s!important}.sbi-eye-cursor.is-hover{width:32px!important;height:32px!important}.sbi-eye-cursor.is-down{width:28px!important;height:28px!important}.sbi-eye{animation:none!important;box-shadow:inset 0 -1px 3px rgba(15,32,70,.14),0 3px 8px rgba(0,0,0,.14)!important}.sbi-iris{width:15px!important;height:15px!important}.sbi-pupil{width:6px!important;height:6px!important}
#sbiMascot{animation:none!important;transition:none!important;filter:drop-shadow(0 6px 14px rgba(40,90,200,.28))!important}#sbiMascot img{animation:none!important}.card:hover,.project-card:hover,.service-card:hover,.skill-card:hover,.game-card:hover,.course-card:hover{transform:translateY(-3px)!important}.tilt3d{transform:none!important}
.kg-photo-strip{margin-top:16px}.kg-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.kg-photos figure{margin:0;border:1px solid rgba(96,165,250,.18);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.035)}.kg-photos img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}.kg-photos figcaption{padding:10px 12px;font-size:12px;color:#dbeafe;font-weight:800}
img{content-visibility:auto}.gallery-item img,.gallery-item-wrap img,.about-avatar,.kg-avatar{background:rgba(255,255,255,.04)}


/* ===== SBIORG v48: homepage uses logo, Google entity uses photos ===== */
.about-logo-main{object-fit:contain!important;padding:18px;background:radial-gradient(circle at 50% 45%,rgba(96,165,250,.14),rgba(255,255,255,.03))!important}
.sb-av{object-fit:contain!important;padding:8px;background:rgba(255,255,255,.04)!important}


/* ═══════════════════════════════════════════════════════════════
   SBIORG v49 — eye removed · cooler cursor, animated logo & motion
   ═══════════════════════════════════════════════════════════════ */

/* Kill the old "eye" cursor completely (feature removed) */
.sbi-eye-cursor,.sbi-eye,.sbi-iris,.sbi-pupil{display:none!important;animation:none!important;content:none!important}

/* ── Soft glow cursor accent (desktop) — native pointer stays visible ── */
.sbi-glow-cursor{position:fixed;left:0;top:0;width:26px;height:26px;border-radius:50%;z-index:2147483646;pointer-events:none;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle at 50% 50%,rgba(59,130,246,.55),rgba(124,58,237,.18) 60%,transparent 70%);
  box-shadow:0 0 18px 6px rgba(59,130,246,.22);mix-blend-mode:screen;
  transition:width .18s ease,height .18s ease,opacity .2s ease,background .18s ease}
.sbi-glow-cursor.is-hover{width:46px;height:46px;background:radial-gradient(circle at 50% 50%,rgba(124,58,237,.5),rgba(59,130,246,.18) 60%,transparent 72%)}
.sbi-glow-cursor.is-down{width:16px;height:16px}

/* ── Click ripple burst ── */
.sbi-ripple{position:fixed;width:10px;height:10px;border-radius:50%;z-index:2147483645;pointer-events:none;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(59,130,246,.45),rgba(124,58,237,.22) 50%,transparent 70%);animation:sbiRipple .65s ease-out forwards}
@keyframes sbiRipple{0%{opacity:.9;width:10px;height:10px}100%{opacity:0;width:130px;height:130px}}

/* ── Scroll progress bar ── */
#sbiScrollProgress{position:fixed;top:0;left:0;right:0;height:3px;z-index:2147483647;transform:scaleX(0);transform-origin:left center;will-change:transform;
  background:linear-gradient(90deg,#3b82f6,#7c3aed,#ec4899);box-shadow:0 0 10px rgba(59,130,246,.55)}

/* ── Cool animated logo (sidebar / drawer) ── */
.sb-av-wrap{filter:drop-shadow(0 6px 16px rgba(59,130,246,.22))}
.sb-av-wrap::before{content:'';position:absolute;inset:-7px;border-radius:50%;z-index:-1;
  background:conic-gradient(from 0deg,#3b82f6,#7c3aed,#ec4899,#3b82f6);animation:sbiLogoSpin 6s linear infinite;filter:blur(6px);opacity:.5}
.sb-av-wrap::after{content:'\2726';position:absolute;top:-3px;right:-1px;font-size:13px;line-height:1;color:#fff;z-index:3;
  text-shadow:0 0 8px #7c3aed,0 0 4px #3b82f6;animation:sbiSpark 2.4s ease-in-out infinite}
.sb-av{animation:sbiLogoFloat 5s ease-in-out infinite;transition:transform .4s ease}
.sb-av-wrap:hover .sb-av{transform:scale(1.06) rotate(3deg)}
@keyframes sbiLogoSpin{to{transform:rotate(360deg)}}
@keyframes sbiLogoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes sbiSpark{0%,100%{opacity:.3;transform:scale(.7) rotate(0deg)}50%{opacity:1;transform:scale(1.1) rotate(20deg)}}

/* Mobile + drawer logo mark */
.mob-logo{animation:sbiLogoFloat 5s ease-in-out infinite;box-shadow:0 0 0 2px rgba(59,130,246,.32),0 4px 12px rgba(59,130,246,.28)}

/* ── About hero: logo for public, photo kept crawlable for Google ── */
.kg-avatar.sbi-logo{object-fit:contain;padding:14px;background:radial-gradient(circle at 50% 40%,rgba(59,130,246,.12),transparent 70%)}
.kg-avatar-wrap.sbi-logo-anim{position:relative}
.kg-avatar-wrap.sbi-logo-anim::before{content:'';position:absolute;inset:-8px;border-radius:50%;z-index:0;
  background:conic-gradient(from 0deg,#3b82f6,#7c3aed,#ec4899,#3b82f6);animation:sbiLogoSpin 7s linear infinite;filter:blur(8px);opacity:.45}
.kg-avatar-wrap.sbi-logo-anim .kg-avatar{position:relative;z-index:1}
.sbi-logo-spark{position:absolute;top:4%;right:8%;z-index:2;font-size:16px;line-height:1;color:#fff;text-shadow:0 0 10px #7c3aed,0 0 5px #3b82f6}
.sbi-logo-spark::before{content:'\2726';display:block;animation:sbiSpark 2.4s ease-in-out infinite}
/* keep the real photo in the DOM for crawlers but invisible to humans */
.kg-seo-photo{position:absolute;width:1px;height:1px;opacity:.01;pointer-events:none;z-index:-2;left:0;top:0}

/* ── Button micro-interaction polish (safe: no pseudo conflict) ── */
.btn{will-change:transform}
.btn:active{filter:brightness(1.05)}

/* ── Reveal-on-scroll motion polish ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

/* ── Respect reduced-motion & touch devices ── */
@media (prefers-reduced-motion:reduce){
  .sb-av,.mob-logo,.sb-av-wrap::before,.sb-av-wrap::after,
  .kg-avatar-wrap.sbi-logo-anim::before,.sbi-logo-spark::before{animation:none!important}
  .reveal{opacity:1!important;transform:none!important}
}
@media (hover:none),(pointer:coarse),(max-width:760px){
  .sbi-glow-cursor{display:none!important}
}


/* ═══════════════════════════════════════════════════
   SBIORG v7.8 — Vazir font · Animations · Section BGs · Polish
   (appended enhancement layer — overrides earlier rules)
═══════════════════════════════════════════════════ */

/* ── Vazirmatn font (Persian only) ──────────────── */
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:300;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Light.woff2') format('woff2')}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:400;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2')}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:500;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Medium.woff2') format('woff2')}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:700;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2')}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:800;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-ExtraBold.woff2') format('woff2')}

html[lang="fa"] body,
html[lang="fa"] input,
html[lang="fa"] textarea,
html[lang="fa"] select,
html[lang="fa"] button,
html[lang="fa"] h1,
html[lang="fa"] h2,
html[lang="fa"] h3,
html[lang="fa"] h4,
html[lang="fa"] .hero-title,
html[lang="fa"] .sec-title{font-family:'Vazirmatn','Segoe UI',Tahoma,sans-serif}
/* keep monospace for real code only */
html[lang="fa"] .mono,
html[lang="fa"] code,
html[lang="fa"] pre,
html[lang="fa"] .code-block code,
html[lang="fa"] .lab-area{font-family:var(--fMono)}

/* ── About avatar: move to RIGHT in LTR (EN/DE) + animate ── */
body.ltr .about-grid{grid-template-columns:1.5fr 1fr}
body.ltr .about-avatar-wrap{order:2}
body.ltr .about-content{order:1}
.about-avatar-wrap{animation:sbFloatY 6s ease-in-out infinite;will-change:transform}
.about-avatar{box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 40px rgba(59,130,246,.18)}
.about-avatar-bg{animation:sbGlowPulse 5s ease-in-out infinite}
.about-avatar-deco{animation:sbSpin 18s linear infinite}
.about-avatar-deco2{animation:sbSpin 26s linear infinite reverse}
@keyframes sbFloatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes sbGlowPulse{0%,100%{opacity:.15;transform:scale(1)}50%{opacity:.32;transform:scale(1.06)}}
@keyframes sbSpin{to{transform:rotate(360deg)}}
@media(max-width:768px){body.ltr .about-grid{grid-template-columns:1fr}.about-avatar-wrap{animation-duration:7s}}

/* ── Detailed animated backgrounds for every section ── */
section{position:relative}
section::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.9;
  background:
    radial-gradient(620px circle at 12% 16%,rgba(59,130,246,.08),transparent 42%),
    radial-gradient(720px circle at 88% 84%,rgba(139,92,246,.07),transparent 46%)}
section:nth-of-type(even)::before{
  background:
    radial-gradient(640px circle at 86% 14%,rgba(6,182,212,.08),transparent 42%),
    radial-gradient(700px circle at 14% 86%,rgba(236,72,153,.06),transparent 46%)}
section::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(59,130,246,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(59,130,246,.06) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 50% 28%,#000,transparent 78%);
  mask-image:radial-gradient(circle at 50% 28%,#000,transparent 78%)}
section > *{position:relative;z-index:1}

/* ── Card / interactive polish (stronger CSS) ──────── */
.project-card,.service-card,.skill-card,.game-card,.course-card,.card,.adm-card{
  transition:transform .38s cubic-bezier(.2,.7,.2,1),box-shadow .38s,border-color .38s}
.project-card:hover,.service-card:hover,.skill-card:hover,.game-card:hover,.course-card:hover{
  transform:translateY(-7px);border-color:var(--border2);
  box-shadow:0 20px 55px rgba(0,0,0,.5),0 0 32px rgba(59,130,246,.14)}
.hero-stat{transition:transform .3s ease}
.hero-stat:hover{transform:translateY(-5px)}
.ab-badge{transition:transform .25s ease,box-shadow .25s ease}
.ab-badge:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 18px rgba(59,130,246,.25)}
.profile-social a{transition:transform .25s ease,color .25s ease}
.profile-social a:hover{transform:translateY(-2px);color:var(--blue2)}

/* gradient section titles */
.sec-title{background:linear-gradient(120deg,var(--t1) 10%,var(--blue2) 55%,var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.sec-line{position:relative;overflow:hidden}
.sec-line::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:sbShine 2.6s ease-in-out infinite}
@keyframes sbShine{0%{transform:translateX(-120%)}60%,100%{transform:translateX(120%)}}

/* reveal entrances for any element with .reveal that JS hasn't wired */
.fade-up{animation:sbFadeUp .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes sbFadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* selection + focus polish */
::selection{background:rgba(59,130,246,.35);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--blue2);outline-offset:2px;border-radius:6px}

/* respect reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* ═══════════ SBIORG v8.2 — Telegram-style chat polish ═══════════ */
.chat-wrap{box-shadow:0 30px 100px -50px rgba(59,130,246,.55)!important;border-color:rgba(96,165,250,.18)!important;border-radius:18px!important;overflow:hidden}
.chat-sidebar{background:linear-gradient(180deg,rgba(13,20,36,.97),rgba(2,6,23,.97))!important;backdrop-filter:blur(14px)}
.chat-sidebar-head{background:linear-gradient(135deg,rgba(59,130,246,.16),rgba(139,92,246,.10));font-size:15px!important;letter-spacing:.2px}
.chat-user-item{border-radius:12px;margin:3px 6px;border-bottom:none!important;position:relative;transition:all .16s ease}
.chat-user-item:hover{background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(139,92,246,.06))!important;transform:translateX(-2px)}
.chat-user-item.active{background:linear-gradient(135deg,rgba(59,130,246,.22),rgba(139,92,246,.12))!important}
.chat-user-item.active::before{content:"";position:absolute;inset-inline-start:0;top:18%;bottom:18%;width:3px;border-radius:3px;background:linear-gradient(180deg,#3b82f6,#8b5cf6)}
.cu-av{position:relative;box-shadow:0 4px 12px -4px rgba(59,130,246,.6)}
.cu-unread{background:linear-gradient(135deg,#3b82f6,#8b5cf6)!important;box-shadow:0 2px 8px -2px rgba(59,130,246,.8);animation:cuPulse 2.2s ease-in-out infinite}
@keyframes cuPulse{0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,.5)}50%{box-shadow:0 0 0 5px rgba(59,130,246,0)}}
.cu-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:#22c55e;border:2px solid #0d1424;bottom:-1px;inset-inline-end:-1px;box-shadow:0 0 8px rgba(34,197,94,.9);animation:onPulse 2s ease-in-out infinite}
@keyframes onPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.chat-main{background:radial-gradient(circle at 15% 18%,rgba(59,130,246,.06),transparent 26%),radial-gradient(circle at 85% 78%,rgba(139,92,246,.06),transparent 26%),linear-gradient(180deg,rgba(2,6,23,.40),rgba(2,6,23,.62))}
.chat-head{background:linear-gradient(135deg,rgba(13,20,36,.95),rgba(20,16,44,.92))!important;backdrop-filter:blur(14px)}
.chat-messages{padding:22px 18px!important}
.msg-bubble{box-shadow:0 4px 14px -8px rgba(0,0,0,.65);max-width:74%!important;animation:bubbleIn .22s cubic-bezier(.2,.9,.3,1.2)}
.msg-bubble.sent{background:linear-gradient(135deg,#3b82f6,#7c3aed)!important;box-shadow:0 6px 18px -10px rgba(124,58,237,.9)!important}
.msg-bubble.recv{background:rgba(30,41,59,.85)!important;backdrop-filter:blur(6px)}
@keyframes bubbleIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.chat-send-btn{background:linear-gradient(135deg,#3b82f6,#7c3aed)!important;box-shadow:0 6px 20px -6px rgba(124,58,237,.8)!important;transition:transform .18s}
.chat-send-btn:hover{transform:scale(1.12) rotate(8deg)!important}
.chat-input{border-radius:24px!important}
.chat-input:focus{box-shadow:0 0 0 3px rgba(59,130,246,.18)}
#callAudioBtn,#callVideoBtn,.chat-call-btn{font-size:18px;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:all .2s;cursor:pointer}
#callAudioBtn:hover,.chat-call-btn.audio:hover{background:rgba(34,197,94,.18);transform:scale(1.12)}
#callVideoBtn:hover,.chat-call-btn.video:hover{background:rgba(59,130,246,.18);transform:scale(1.12)}
.tg-search-bar{background:rgba(30,41,59,.6)!important;border-radius:24px!important;margin:10px!important}
.tg-sr-item{transition:all .15s}
.tg-sr-item:hover{background:linear-gradient(135deg,rgba(59,130,246,.16),rgba(139,92,246,.08))!important;padding-inline-start:16px}
.tg-sr-actions{background:linear-gradient(135deg,#3b82f6,#7c3aed);color:#fff!important;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800}
#threadsCount:not(:empty){background:rgba(59,130,246,.2);color:#93c5fd;padding:1px 8px;border-radius:999px;font-weight:800}
.spy-badge{display:inline-block;background:linear-gradient(135deg,#ef4444,#b91c1c);color:#fff;font-size:10px;font-weight:900;padding:2px 8px;border-radius:999px;margin-inline-start:8px;vertical-align:middle;animation:cuPulse 2.4s ease-in-out infinite}
.spy-card{border:1px solid rgba(239,68,68,.22)!important;background:linear-gradient(180deg,rgba(30,12,12,.35),transparent)!important}
@media(max-width:760px){.chat-sidebar{width:100%!important}.msg-bubble{max-width:86%!important}}


/* ═══════════════════════════════════════════════════════════════
   SBIORG v8.4 — Enhancement Layer (brand social + polish + responsive)
   Appended by Notion AI · safe additive styles only
═══════════════════════════════════════════════════════════════ */

/* ── Real brand social buttons ─────────────────────────────────── */
.profile-social{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.profile-social a.soc-btn{
    --c:#3b82f6;
    display:inline-flex;align-items:center;gap:8px;
    padding:9px 15px;border-radius:14px;
    background:rgba(148,163,184,.06);
    border:1px solid var(--border);
    color:var(--t1);font-size:13px;font-weight:700;line-height:1;
    transition:transform .28s cubic-bezier(.34,1.56,.64,1),background .28s,border-color .28s,box-shadow .28s,color .28s;
    position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;
}
.profile-social a.soc-btn svg{width:18px;height:18px;fill:currentColor;flex-shrink:0;transition:transform .28s}
.profile-social a.soc-btn.soc-icon{padding:0;width:44px;height:44px;justify-content:center;border-radius:50%}
.profile-social a.soc-btn::after{content:'';position:absolute;inset:0;background:var(--c);opacity:0;transition:opacity .28s;z-index:-1}
.profile-social a.soc-btn:hover{color:#fff;border-color:var(--c);transform:translateY(-4px) scale(1.04);box-shadow:0 12px 26px -10px var(--c)}
.profile-social a.soc-btn:hover::after{opacity:1}
.profile-social a.soc-btn:hover svg{transform:scale(1.15) rotate(-4deg)}
.profile-social a.soc-btn:active{transform:translateY(-1px) scale(.99)}
.profile-social a.soc-btn:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.profile-social a.soc-btn.soc-github{--c:#8b949e}
.profile-social a.soc-btn.soc-linkedin{--c:#0a66c2}
.profile-social a.soc-btn.soc-twitter{--c:#1d9bf0}
.profile-social a.soc-btn.soc-telegram{--c:#229ed9}
.profile-social a.soc-btn.soc-youtube{--c:#ff0000}
.profile-social a.soc-btn.soc-whatsapp{--c:#25d366}
.profile-social a.soc-btn.soc-instagram{--c:#dc2743}
.profile-social a.soc-btn.soc-instagram:hover::after{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)}
.footer-social{margin-top:4px}

/* ── Section heading shimmer + reveal polish ───────────────────── */
.sec-title{position:relative}
.reveal,.reveal-left,.reveal-right{will-change:opacity,transform}
@media (prefers-reduced-motion:no-preference){
    .skill-card,.project-card,.course-card,.game-card{transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s,border-color .35s}
    .skill-card:hover,.project-card:hover,.course-card:hover,.game-card:hover{transform:translateY(-6px)}
    .hero-badge .dot{box-shadow:0 0 0 0 rgba(16,185,129,.6);animation:sbiPulseDot 2.2s ease-out infinite}
    @keyframes sbiPulseDot{0%{box-shadow:0 0 0 0 rgba(16,185,129,.55)}70%{box-shadow:0 0 0 10px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
}

/* ── Better focus states for accessibility (all 3 langs) ───────── */
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--blue2);outline-offset:2px;border-radius:8px}

/* ── Responsive refinements — Android phones / small screens ───── */
@media (max-width:600px){
    section{padding-left:18px!important;padding-right:18px!important}
    .hero-inner{padding-left:18px!important;padding-right:18px!important}
    .hero-stats{gap:18px!important}
    .profile-social a.soc-btn{padding:8px 12px;font-size:12px}
    .profile-social a.soc-btn.soc-icon{width:40px;height:40px}
    footer{padding:24px 18px!important}
}
@media (max-width:380px){
    .hero-stats{gap:12px!important}
    .profile-social{gap:8px}
}

/* ── Large desktop (Windows) — keep content comfortable ────────── */
@media (min-width:1400px){
    .container{max-width:1240px}
}

/* ── RTL/LTR aware social alignment in footer ──────────────────── */
body.ltr .footer-social,body .footer-social{justify-content:center}

/* ═══════════════════════════════════════════════════
   SBIORG v8.5 — Mobile Chat Upgrade
   Conversations list + search bar always visible on mobile;
   tap a chat to slide into a full-screen conversation with a back button.
═══════════════════════════════════════════════════ */
.chat-back-btn{display:none;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;margin-inline-end:8px;border:1px solid var(--border);border-radius:50%;background:rgba(59,130,246,.14);color:#bfdbfe;font-size:24px;line-height:1;cursor:pointer;transition:background .2s,transform .2s}
.chat-back-btn:hover{background:rgba(59,130,246,.24)}
[dir="ltr"] .chat-back-btn{transform:scaleX(-1)}
@media(max-width:768px){
  .chat-wrap{flex-direction:column!important;height:calc(100vh - 56px)!important;border-radius:0!important;position:relative}
  .chat-sidebar,.chat-sidebar.mobile-show{display:flex!important;width:100%!important;height:100%!important;max-height:none!important;border-left:none!important;border-bottom:none!important}
  .chat-sidebar .tg-search-bar{display:flex!important;margin:10px!important}
  .chat-main{display:none!important}
  .chat-wrap.chat-mobile-open .chat-sidebar{display:none!important}
  .chat-wrap.chat-mobile-open .chat-main{display:flex!important;height:100%!important;animation:chatSlideIn .22s ease}
  .chat-wrap.chat-mobile-open .chat-back-btn{display:inline-flex!important}
  .chat-users{flex:1;min-height:0;overflow-y:auto}
}
@keyframes chatSlideIn{from{transform:translateX(7%);opacity:.45}to{transform:translateX(0);opacity:1}}

/* ════ SBIORG v8.6 — Interactive Spotlight Showcase (native, 21st.dev-inspired) ════ */
#showcase{padding-top:24px}
.spotlight-card{--mx:30%;--my:18%;position:relative;overflow:hidden;border-radius:26px;border:1px solid rgba(96,165,250,.20);background:radial-gradient(120% 120% at var(--mx) var(--my),rgba(59,130,246,.16),transparent 42%),rgba(2,6,12,.96);min-height:500px;box-shadow:0 40px 110px -52px rgba(59,130,246,.6)}
.spotlight-card::before{content:"";position:absolute;inset:0;background:radial-gradient(540px circle at var(--mx) var(--my),rgba(120,170,255,.22),transparent 46%);pointer-events:none;transition:background .12s linear;z-index:1}
.sl-beam{position:absolute;top:-30%;left:-8%;width:60%;height:130%;background:radial-gradient(closest-side,rgba(139,92,246,.20),transparent);filter:blur(46px);transform:rotate(-12deg);pointer-events:none;z-index:0;animation:slBeam 9s ease-in-out infinite}
@keyframes slBeam{0%,100%{transform:rotate(-12deg) translateY(0)}50%{transform:rotate(-12deg) translateY(30px)}}
.spotlight-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:8px;min-height:500px;align-items:stretch}
.spotlight-text{padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;justify-content:center;gap:18px}
.sl-badge{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.4px;color:#bfdbfe;background:rgba(59,130,246,.14);border:1px solid rgba(96,165,250,.24);border-radius:999px;padding:6px 14px}
.sl-title{font-size:clamp(1.8rem,3.6vw,3rem);font-weight:800;line-height:1.12;margin:0;background:linear-gradient(180deg,#f8fafc 0%,#93a4bd 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sl-desc{color:#cbd5e1;font-size:15px;line-height:1.95;max-width:46ch;margin:0}
.sl-actions{margin-top:6px}
.spotlight-visual{position:relative;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;min-height:280px}
.spotlight-char-wrap{position:relative;display:flex;align-items:flex-end;justify-content:center;height:100%;will-change:transform;transform-style:preserve-3d;transition:transform .15s ease-out}
.spotlight-char{max-height:560px;width:auto;max-width:100%;object-fit:contain;display:block;filter:drop-shadow(0 30px 55px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(80,150,255,.25));animation:slBob 6s ease-in-out infinite;transform-origin:bottom center}
@keyframes slBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media(max-width:860px){
  .spotlight-grid{grid-template-columns:1fr;min-height:0}
  .spotlight-text{padding:30px 22px 6px;text-align:center;align-items:center}
  .sl-badge{align-self:center}
  .sl-actions{justify-content:center}
  .spotlight-char{max-height:380px}
  .spotlight-card{min-height:0}
}
@media(prefers-reduced-motion:reduce){.sl-beam,.spotlight-char{animation:none}}

/* ════ SBIORG v8.7 — Corner Mascot with CSS/JS look-around eyes ════ */
#sbiMascot{position:fixed!important;left:14px;right:auto;bottom:14px;width:140px!important;height:auto;z-index:30!important;opacity:1!important;mix-blend-mode:normal!important;pointer-events:none!important;filter:drop-shadow(0 12px 22px rgba(0,0,0,.45))!important;animation:mascotBobC 4.6s ease-in-out infinite!important;transform:none}
#sbiMascot .mascot-img{width:100%!important;display:block!important;opacity:1!important;mix-blend-mode:normal!important;animation:none!important;filter:none}
#sbiMascot::after{content:none!important}
@keyframes mascotBobC{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
#sbiMascot .mascot-shadow{position:absolute;left:50%;bottom:-6px;width:58%;height:12px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(0,0,0,.45),transparent 70%);filter:blur(4px);z-index:0}
#sbiMascot .mascot-eye{position:absolute;width:9.8%;height:7.8%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 50% 38%,#fffdf8 0%,#f1e7d8 70%,#dcc9b6 100%);box-shadow:inset 0 2px 3px rgba(60,30,20,.45),inset 0 -1px 2px rgba(255,255,255,.4),0 0 0 1px rgba(70,40,30,.5),0 2px 5px rgba(0,0,0,.4);overflow:hidden;z-index:2;transition:transform .1s ease}
#sbiMascot #mEyeL{left:38.3%;top:29.6%}
#sbiMascot #mEyeR{left:51.25%;top:28.8%}
#sbiMascot.blink .mascot-eye{transform:translate(-50%,-50%) scaleY(.12)}
#sbiMascot .iris{position:absolute;left:50%;top:50%;width:56%;height:64%;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px)));border-radius:50%;background:radial-gradient(circle at 48% 42%,#9a6531 0%,#6b431f 52%,#3a2412 100%);box-shadow:0 0 1px rgba(0,0,0,.6);transition:transform .04s linear;will-change:transform}
#sbiMascot .iris::after{content:"";position:absolute;left:50%;top:50%;width:48%;height:48%;transform:translate(-50%,-50%);border-radius:50%;background:#140b05}
#sbiMascot .iris::before{content:"";position:absolute;left:64%;top:22%;width:26%;height:26%;border-radius:50%;background:rgba(255,255,255,.95);z-index:2}
body.light #sbiMascot{filter:drop-shadow(0 12px 22px rgba(40,60,120,.3))!important}
/* Persian / RTL: explicitly anchored bottom-LEFT (same corner as before) */
[dir="rtl"] #sbiMascot{left:18px!important;right:auto!important}
[dir="ltr"] #sbiMascot{right:18px!important;left:auto!important}
/* Mobile: small, bottom-left, lifted above the mobile bottom nav */
@media(max-width:768px){
  #sbiMascot{width:84px!important;left:10px!important;right:auto!important;bottom:78px!important;z-index:24!important}
}
@media(max-width:380px){
  #sbiMascot{width:70px!important;bottom:74px!important}
}
@media(prefers-reduced-motion:reduce){#sbiMascot{animation:none!important}}

/* ════ SBIORG v8.8 — Chat search fix + top search + polish ════ */
.chat-sidebar{overflow:visible!important}
.tg-search-res{z-index:90!important}
.tg-search-bar input{min-height:24px}
.tg-sr-empty{padding:14px;text-align:center;color:var(--t3);font-size:13px}
/* Top quick-search inside the chat panel (fills the empty top area) */
.chat-topsearch{position:relative;margin:12px 14px 4px;display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:16px;background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(139,92,246,.08));border:1px solid rgba(96,165,250,.28);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.chat-topsearch .tg-search-ic{font-size:15px;opacity:.85}
.chat-topsearch input{flex:1;background:transparent;border:none;outline:none;color:var(--t1);font-family:inherit;font-size:14px}
.chat-topsearch .tg-search-res{inset-inline:0;left:0;right:0}
@media(min-width:769px){.chat-topsearch{max-width:560px}}
/* Mobile touch targets + never-clipped dropdown */
@media(max-width:768px){
  .tg-search-bar{padding:12px 14px!important}
  .tg-search-bar input,.chat-topsearch input{font-size:16px!important}
  .tg-search-res{position:absolute;left:8px;right:8px;max-height:60vh!important;z-index:95!important}
  .chat-topsearch{margin:10px}
}
/* Chat visual polish */
.chat-head{position:relative;background:linear-gradient(180deg,rgba(59,130,246,.06),transparent)}
.chat-head-name{font-weight:800;letter-spacing:.2px}
.chat-messages{background:radial-gradient(1200px 420px at 50% -10%,rgba(59,130,246,.06),transparent 60%)}
.chat-quick-admin{background:linear-gradient(135deg,#3b82f6,#7c3aed)!important;color:#fff!important;border:none!important;border-radius:12px!important;padding:10px!important;font-weight:800;cursor:pointer;box-shadow:0 6px 18px rgba(59,130,246,.3);transition:transform .15s,box-shadow .15s}
.chat-quick-admin:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(59,130,246,.42)}

/* ════════ SBIORG v9.0 — Header theme toggle + correct per-language mascot side ════════ */
/* Theme toggle now sits in the header beside the language flags (no longer fixed-bottom -> no clash with mascot) */
.sb-lang{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mob-flags{display:flex;align-items:center;gap:6px}
.sb-lang .theme-toggle,.mob-flags .theme-toggle{position:static!important;inset:auto!important;top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;width:34px;height:34px;min-width:34px;padding:0;margin:0;font-size:17px;line-height:1;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:var(--bg2);border:1px solid var(--border2);box-shadow:none;color:inherit;flex:0 0 auto;vertical-align:middle;transition:transform .2s,background .2s}
.sb-lang .theme-toggle:hover,.mob-flags .theme-toggle:hover{transform:scale(1.12) rotate(12deg);background:rgba(59,130,246,.16)}
.mob-flags .theme-toggle{width:30px;height:30px;min-width:30px;font-size:15px}
/* Mascot corner is direction-aware so it never hides behind the side navigation:
   LTR (EN/DE) sidebar is on the LEFT  -> mascot goes RIGHT;
   RTL (FA)    sidebar is on the RIGHT -> mascot goes LEFT.  */
[dir="ltr"] #sbiMascot{right:18px!important;left:auto!important;z-index:60!important;opacity:1!important;display:block!important}
[dir="rtl"] #sbiMascot{left:18px!important;right:auto!important;z-index:60!important;opacity:1!important;display:block!important}
@media(max-width:768px){
  [dir="ltr"] #sbiMascot{right:10px!important;left:auto!important;bottom:78px!important}
  [dir="rtl"] #sbiMascot{left:10px!important;right:auto!important;bottom:78px!important}
}

/* ════ SBIORG v9.1 — avatar now ships with its own (baked) eyes ════ */
/* Per user request: CSS eye-follow layer kept ON, positioned right over the avatar's own eyes. */
#sbiMascot .mascot-eye,#sbiMascot .iris{display:block!important}

/* ════ SBIORG v9.2 — notification permission prompt (WhatsApp/Telegram-style) ════ */
#sbiNotifPrompt{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);z-index:4000;width:min(440px,calc(100vw - 24px));opacity:0;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s}
#sbiNotifPrompt.show{transform:translate(-50%,0);opacity:1}
#sbiNotifPrompt .snp-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,rgba(13,31,53,.98),rgba(2,11,24,.98));border:1px solid var(--border2,rgba(59,130,246,.3));box-shadow:0 12px 40px rgba(0,0,0,.5);backdrop-filter:blur(8px)}
#sbiNotifPrompt .snp-ic{font-size:30px;flex:0 0 auto;animation:snpRing 2.4s ease-in-out infinite;transform-origin:50% 8%}
#sbiNotifPrompt .snp-tx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
#sbiNotifPrompt .snp-tx b{font-size:14px;color:var(--t1,#f1f5f9)}
#sbiNotifPrompt .snp-tx span{font-size:12px;color:var(--t2,#94a3b8);line-height:1.5}
#sbiNotifPrompt .snp-act{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
#sbiNotifPrompt .snp-yes{padding:8px 16px;border:none;border-radius:10px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
#sbiNotifPrompt .snp-yes:hover{filter:brightness(1.1)}
#sbiNotifPrompt .snp-no{padding:6px 16px;border:1px solid var(--border2,rgba(59,130,246,.25));border-radius:10px;background:transparent;color:var(--t2,#94a3b8);font-size:12px;cursor:pointer}
@keyframes snpRing{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(14deg)}80%{transform:rotate(-12deg)}85%{transform:rotate(9deg)}90%{transform:rotate(-6deg)}95%{transform:rotate(3deg)}}
@media(max-width:768px){#sbiNotifPrompt{bottom:84px}#sbiNotifPrompt .snp-card{flex-wrap:wrap}#sbiNotifPrompt .snp-act{flex-direction:row;width:100%}#sbiNotifPrompt .snp-yes,#sbiNotifPrompt .snp-no{flex:1}}

/* ── v9.6 Chat polish: cleaner, more professional, less intrusive ── */
.chat-wrap{border-radius:18px}
.chat-input{border-radius:14px!important;transition:border-color .2s,box-shadow .2s}
.chat-input:focus{border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.chat-input-wrap{backdrop-filter:blur(10px);background:rgba(5,15,31,.72)!important}
.chat-input-row{align-items:flex-end;gap:10px}
.chat-input-row .btn{border-radius:12px;padding:10px 16px}
.chat-input-row label:hover{background:rgba(59,130,246,.12)!important;color:var(--blue)!important}
.chat-messages{scroll-behavior:smooth}
.chat-head{position:sticky;top:0;z-index:5}
.chat-head-status{display:flex;align-items:center;gap:5px}
.chat-online-dot{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.18);display:inline-block}
.chat-user-item{padding:11px 13px}
.chat-unread,.chat-user-item .unread{background:var(--blue);color:#fff;border-radius:999px;font-size:11px;font-weight:800;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.tg-search-bar input:focus{border-color:var(--blue)}
@media(max-width:760px){
  .chat-input-row .btn{padding:9px 12px}
  .chat-sidebar{max-height:38vh}
}