/* BADSHAH222 — theme.css : toggle button + BRIGHT theme (dark stays the default Noir look). Loaded after noir.css. */
.theme-btn{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--a2);cursor:pointer;
  border:1.5px solid rgba(255,255,255,.28);
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.05) 48%,rgba(0,0,0,.2) 54%);
  box-shadow:0 6px 14px rgba(0,0,0,.4),inset 0 2px 3px rgba(255,255,255,.4),inset 0 -4px 7px rgba(0,0,0,.3);transition:transform .25s,box-shadow .25s}
.theme-btn:hover{transform:rotate(18deg) scale(1.08);box-shadow:0 8px 18px var(--glow),inset 0 2px 3px rgba(255,255,255,.5)}
.theme-btn.floating{position:fixed;top:14px;right:14px;z-index:90}
html{transition:background-color .25s}
body,.jelly,.btn,.nav a,.ibtn,.ai-msg,input,textarea{transition:background-color .25s,color .25s,border-color .25s,box-shadow .25s}

html[data-theme="light"]{
  --ink:#1b1b26;--ink2:#464656;--ink3:#707082;--line:rgba(30,20,30,.14);
  --a1:#e8112d;--a2:#f0a500;--a3:#1b1b26;--a1s:rgba(232,17,45,.10);--glow:rgba(232,17,45,.28);
  --sh-out:0 14px 32px rgba(120,70,80,.16),0 0 0 1px rgba(30,20,30,.05);
  --sh-in:inset 0 2px 3px rgba(255,255,255,.95),inset 0 -10px 20px rgba(120,70,80,.06);
  color-scheme:light}
html[data-theme="light"],html[data-theme="light"] body{background:#fbf6f1;color:var(--ink)}
html[data-theme="light"] ::-webkit-scrollbar-track{background:#efe7df}
html[data-theme="light"] ::-webkit-scrollbar-thumb{border-color:#efe7df}
html[data-theme="light"] #bgfx{background:radial-gradient(1200px 700px at 50% -10%,rgba(255,255,255,.9),transparent 60%),#fbf6f1}
html[data-theme="light"] #bgfx .blob{opacity:.22;filter:blur(110px)}
html[data-theme="light"] #bgfx .b2{opacity:.2}
html[data-theme="light"] #bgfx .b3{opacity:.08;background:#6b7bff}
html[data-theme="light"] #bgfx .floor{opacity:.25;background:linear-gradient(90deg,rgba(30,20,30,.2) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(0deg,rgba(30,20,30,.2) 1px,transparent 1px) 0 0/64px 64px}
html[data-theme="light"] #bgfx .noise{opacity:.04;mix-blend-mode:multiply}
html[data-theme="light"] #bgfx .vig{background:radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(251,246,241,.85) 100%)}
html[data-theme="light"] .jelly{background:linear-gradient(155deg,rgba(255,255,255,.96),rgba(255,255,255,.72) 45%,rgba(255,238,232,.8));border:1.5px solid var(--line)}
html[data-theme="light"] .shine::before{background:rgba(255,255,255,.95);box-shadow:none}
html[data-theme="light"] .shine::after{background:rgba(255,255,255,.8)}
html[data-theme="light"] .lift:hover{box-shadow:0 20px 40px rgba(120,70,80,.22),0 0 26px var(--glow),var(--sh-in)}
html[data-theme="light"] .btn.soft,html[data-theme="light"] .fb,html[data-theme="light"] .opts button,html[data-theme="light"] .tabs2 button,
html[data-theme="light"] .mdl button,html[data-theme="light"] .flinks a,html[data-theme="light"] .tags span,html[data-theme="light"] .pill,
html[data-theme="light"] .mnav a,html[data-theme="light"] .ibtn,html[data-theme="light"] .cf-nav .ibtn,html[data-theme="light"] .theme-btn{
  color:var(--ink);border:1.5px solid rgba(30,20,30,.14);
  background:linear-gradient(180deg,#fff,#f6ece6);box-shadow:0 6px 14px rgba(120,70,80,.14),inset 0 2px 3px #fff,inset 0 -4px 8px rgba(120,70,80,.08)}
html[data-theme="light"] .theme-btn{color:#e8112d}
html[data-theme="light"] .nav a{background:transparent;box-shadow:none;border-color:transparent;color:var(--ink2)}
html[data-theme="light"] .nav a:hover,html[data-theme="light"] .nav a.on{color:#fff}
html[data-theme="light"] .tags span,html[data-theme="light"] .pill{color:var(--ink2)}
html[data-theme="light"] .brand b{color:var(--ink)}
html[data-theme="light"] .avatar{border-color:#fff;background:linear-gradient(135deg,#fff,#f1e6df)}
html[data-theme="light"] .grad{background:linear-gradient(90deg,#e8112d,#f0a500 60%,#e8112d);-webkit-background-clip:text;background-clip:text}
html[data-theme="light"] .eyebrow,html[data-theme="light"] .tq .st,html[data-theme="light"] .mnav a i,html[data-theme="light"] .mdl button i{color:var(--a1)}
html[data-theme="light"] .mdl button.on i{color:#fff}
html[data-theme="light"] .post .body a,html[data-theme="light"] .crumbs a:hover{color:var(--a1)}
html[data-theme="light"] .bar .bt{background:rgba(30,20,30,.08);box-shadow:inset 1px 2px 4px rgba(30,20,30,.2)}
html[data-theme="light"] .stats{border-top-color:var(--line)}
html[data-theme="light"] .cv h2{border-bottom-color:var(--line)}
html[data-theme="light"] .tabs2{background:rgba(255,255,255,.7);border:1px solid var(--line)}
html[data-theme="light"] .pj .pm,html[data-theme="light"] .bc .bm{background:linear-gradient(135deg,#fff,#efe3dc)}
html[data-theme="light"] .cf-dots i,html[data-theme="light"] .cs-dots i{background:rgba(30,20,30,.2)}
html[data-theme="light"] .cs-dots i.on{background:linear-gradient(90deg,var(--a1),var(--a2))}
html[data-theme="light"] .cutslide .cs-word,html[data-theme="light"] .cs-strip::before{-webkit-text-stroke-color:rgba(30,20,30,.12)}
html[data-theme="light"] .cutslide .cs-ring{border-color:rgba(30,20,30,.16)}
html[data-theme="light"] .cs-i{filter:drop-shadow(0 18px 18px rgba(80,40,50,.35)) drop-shadow(0 0 18px rgba(232,17,45,.14))}
html[data-theme="light"] .cs-i.n1{filter:drop-shadow(0 12px 12px rgba(80,40,50,.3)) brightness(.8) saturate(.9)}
html[data-theme="light"] .cs-strip img{filter:drop-shadow(0 10px 12px rgba(80,40,50,.35))}
html[data-theme="light"] .hg,html[data-theme="light"] .gal .gi img{border-color:var(--line);box-shadow:0 16px 34px rgba(120,70,80,.2)}
html[data-theme="light"] .pdv .gal2 img{border-color:rgba(30,20,30,.14)}
html[data-theme="light"] .conn a,html[data-theme="light"] .conn div.cr{background:rgba(255,255,255,.75);border:1px solid var(--line)}
html[data-theme="light"] .stk .sti .nm{color:var(--ink3)}
/* inputs */
html[data-theme="light"] .in,html[data-theme="light"] .f input,html[data-theme="light"] .f textarea,html[data-theme="light"] .f select,
html[data-theme="light"] .search input,html[data-theme="light"] .news input,html[data-theme="light"] .ai-form input{
  color:var(--ink);background:#fff;border:1.5px solid rgba(30,20,30,.16);box-shadow:inset 2px 3px 7px rgba(120,70,80,.1)}
html[data-theme="light"] .f input:focus,html[data-theme="light"] .f textarea:focus,html[data-theme="light"] .in:focus,
html[data-theme="light"] .search input:focus,html[data-theme="light"] .news input:focus,html[data-theme="light"] .ai-form input:focus{box-shadow:0 0 0 3px var(--glow);border-color:var(--a1)}
html[data-theme="light"] .f select option{background:#fff;color:#1b1b26}
/* dock panel / loader / modal */
html[data-theme="light"] .dock-panel{background:linear-gradient(155deg,#fff,#f6ece6);border:1px solid var(--line)}
html[data-theme="light"] .loader{background:radial-gradient(circle at 50% 40%,#fff,#f3e9e2 75%)}
html[data-theme="light"] .loader .lb em{color:var(--ink2)}
html[data-theme="light"] .loader .lb b{background:linear-gradient(90deg,#1b1b26,#e8112d,#f0a500,#1b1b26);background-size:200% auto;-webkit-background-clip:text;background-clip:text;text-shadow:none}
html[data-theme="light"] .loader i{background:rgba(30,20,30,.12)}
html[data-theme="light"] .modal{background:rgba(251,246,241,.8)}
/* AI chat */
html[data-theme="light"] .ai-page{background:linear-gradient(155deg,#fff,#fff4ef)}
html[data-theme="light"] .ai-head{background:linear-gradient(90deg,#e8112d,#f0a500);color:#fff}
html[data-theme="light"] .ai-msg{color:var(--ink)}
html[data-theme="light"] .ai-bot{background:#f4eae4;border:1px solid var(--line)}
html[data-theme="light"] .ai-user{background:linear-gradient(95deg,#e8112d,#f0731a);color:#fff}
html[data-theme="light"] .ai-imgname,html[data-theme="light"] .ai-note{color:var(--ink3)}
html[data-theme="light"] .ai-speak{color:#c2001b}
html[data-theme="light"] .amsg{color:#c2001b}html[data-theme="light"] .amsg.ok{color:#0f8a43}
html[data-theme="light"] .toast{background:#fff;color:#1b1b26;border:1px solid var(--line);box-shadow:0 14px 34px rgba(120,70,80,.25)}
html[data-theme="light"] .toast.ok{background:linear-gradient(90deg,#e3f8ec,#fff);color:#0f6b3a}
html[data-theme="light"] .toast.err{background:linear-gradient(90deg,#ffe4e8,#fff);color:#b0001a}
html[data-theme="light"] .ripple{background:#e8112d}
html[data-theme="light"] .btn.soft:hover,html[data-theme="light"] .fb:hover,html[data-theme="light"] .opts button:hover,
html[data-theme="light"] .flinks a:hover,html[data-theme="light"] .mnav a:hover,html[data-theme="light"] .ibtn:hover{box-shadow:0 10px 20px rgba(120,70,80,.2),0 0 0 2px var(--a1),inset 0 2px 3px #fff}
html[data-theme="light"] .nav a:hover,html[data-theme="light"] .nav a.on{color:#fff;border-color:rgba(255,255,255,.6);
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.06) 48%,rgba(0,0,0,.12) 54%),linear-gradient(95deg,var(--a1),var(--a2));
  box-shadow:0 8px 18px var(--glow),inset 0 2px 3px rgba(255,255,255,.6)}

/* ===== inline SVG icons (icons.js) ===== */
.svgi{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;font-style:normal;line-height:1;vertical-align:-.125em;flex:none}
.svgi svg{width:1em;height:1em;display:block;overflow:visible}
.btn .svgi,.ibtn .svgi,.nav .svgi{font-size:1.05em}
.dock-btn .svgi{font-size:22px}

/* ===== real brand icons, 3D tilt ===== */
.socials{perspective:700px;gap:14px}
.socials a{width:56px;height:56px;font-size:25px;transform-style:preserve-3d;will-change:transform;position:relative;transition:transform .18s ease-out,box-shadow .3s}
.socials a::before{content:"";position:absolute;inset:3px 6px auto;height:42%;border-radius:99px;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0));pointer-events:none}
.socials a .svgi{transform:translateZ(16px);filter:drop-shadow(0 4px 3px rgba(0,0,0,.35));position:relative}
.socials a:hover{transform:translateY(-6px) scale(1.12)}
.soc .si{perspective:500px;font-size:22px;transform-style:preserve-3d;transition:transform .18s ease-out}
.soc .si .svgi{transform:translateZ(10px);filter:drop-shadow(0 3px 2px rgba(0,0,0,.35))}
.soc{perspective:900px}

/* ===== loading screen picture ===== */
.loader .lb-stage{position:relative;width:min(70vw,250px);height:min(86vw,320px);margin:0 auto 22px;display:grid;place-items:end center}
.loader .lb-stage .lb-ring{position:absolute;left:50%;bottom:4%;width:88%;aspect-ratio:1;height:auto;margin:0;transform:translateX(-50%);border-radius:50%;
  border:3px solid rgba(255,46,69,.25);border-top-color:#ff2e45;border-right-color:#ffc52e;box-shadow:0 0 50px rgba(255,46,69,.4);animation:lbspin 1.6s linear infinite}
.loader .lb-stage .lb-ring.r2{width:104%;border:2px dashed rgba(255,197,46,.4);box-shadow:none;animation:lbspin 9s linear infinite reverse}
@keyframes lbspin{to{transform:translateX(-50%) rotate(360deg)}}
.loader .lb-pic{position:relative;z-index:2;height:100%;width:auto;max-width:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 18px 22px rgba(0,0,0,.6));animation:lbfloat 3.2s ease-in-out infinite}
@keyframes lbfloat{50%{transform:translateY(-8px)}}
.loader .lb::before,.loader .lb::after{display:none}
html[data-theme="light"] .loader .lb-pic{filter:drop-shadow(0 14px 18px rgba(80,40,50,.35))}
@media (max-height:620px){.loader .lb-stage{height:210px;width:150px}}

/* ===== AI page ===== */
.ai-logo{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:top;flex:none;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.9),rgba(255,197,46,.5));border:2px solid rgba(255,255,255,.85);box-shadow:0 4px 12px rgba(0,0,0,.35)}
.ai-logo.big{width:64px;height:64px;display:inline-block;vertical-align:middle;margin-right:12px}
.ai-head-in{display:flex;align-items:center;gap:12px;min-width:0}
.ai-head-in>div,.ai-head-in b{min-width:0}
.nav-ailogo{width:22px;height:22px;border-radius:50%;object-fit:cover;object-position:top;background:#fff;flex:none}
.ai-tools{flex-wrap:wrap;gap:10px}
.ai-tools .ai-tool{width:auto;height:auto;min-height:42px;padding:8px 16px;border-radius:99px;display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:13px}
.ai-tools .ai-tool .svgi{font-size:18px}
.ai-tools .ai-tool.rec{background:linear-gradient(95deg,#e8112d,#f0a500);color:#fff;animation:recp 1s ease-in-out infinite}
@keyframes recp{50%{box-shadow:0 0 0 6px rgba(232,17,45,.25)}}
.ai-msg code{background:rgba(127,127,127,.22);padding:1px 6px;border-radius:6px}

/* ===== phone / tablet / laptop ===== */
@media (max-width:640px){
  .ai-page{padding:10px}
  .ai-page .ai-msgs{min-height:300px;max-height:56vh}
  .ai-msg{max-width:94%;font-size:.92rem}
  .ai-logo.big{width:48px;height:48px}
  .ai-form{gap:6px;padding:10px 4px}
  .ai-form .btn{padding:12px 18px}
  .socials a{width:50px;height:50px;font-size:22px}
  .ai-tools .ai-tool span{display:inline}
}
@media (min-width:1100px){
  .ai-page{max-width:980px;margin-left:auto;margin-right:auto}
  .ai-page .ai-msgs{max-height:62vh}
}

/* ===== dock above the AI button, AI logo button ===== */
.dock{z-index:420}
.ai-fab-left{overflow:hidden;padding:0;background:radial-gradient(circle at 50% 30%,#fff,#ffd98a)}
.ai-fab-left img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:50%}

/* ===== top bar fits a phone ===== */
.top-r .btn.sm{white-space:nowrap}
.brand>span:last-child{min-width:0}
.brand b{overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){
  header.top{padding:0 8px;margin-top:8px}
  .top-in{gap:6px;padding:6px 8px 6px 6px}
  .brand{gap:8px}
  .brand .avatar{width:38px;height:38px}
  .brand small{display:none}
  .brand b{font-size:13.5px}
  .top-r{gap:6px}
  .top-r .btn.sm{padding:8px 12px;gap:6px}
  .top-r .btn.sm[href="/contact"] span{display:none}
  .top-r .btn.sm[href="/contact"]{padding:8px 11px}
  .theme-btn,.top-r .ibtn{width:36px;height:36px}
}
@media(max-width:360px){.top-r .btn.sm[href="/ai"] span{display:none}}

/* ===== no sideways overflow on phones (this was stretching the page wider than the screen) ===== */
html,body{max-width:100%;overflow-x:clip}
main.wrap,.wrap{min-width:0;max-width:100%}
.wrap>*,.wrap section>*,.hero>*,.phero>*,.cv-top>*,.grid>*{min-width:0}
.cutslide,.hero-stage,.cs-strip{max-width:100%}
.hero-card,.prose,.card{max-width:100%;overflow-wrap:anywhere}
img,svg,video,canvas{max-width:100%}

/* ===== v7: no loading screen; AI logo is a drawn badge (no photo) ===== */
.loader{display:none!important}
.ai-logo,.nav-ailogo,.ai-fab-left img{object-fit:contain;object-position:center;background:none;border:0;box-shadow:none;border-radius:50%}
.ai-logo{filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.ai-fab-left{background:none;border:0;box-shadow:0 8px 20px rgba(255,46,69,.45)}