:root{
  --bg:#f8fafc; --bg2:#f1f5f9; --card:#ffffff; --card2:#f8fafc;
  --stroke:#e2e8f0; --txt:#0f172a; --muted:#64748b; --muted2:#94a3b8;
  --brand:#8b5cf6; --brand2:#f472b6; --lime:#a3e635; --pink:#f472b6; --amber:#fbbf24;
  --radius:16px; --shadow:0 20px 40px rgba(0,0,0,.06);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px;
  --sh-sm:0 4px 12px rgba(0,0,0,.05); --sh-md:0 12px 32px rgba(0,0,0,.07); --sh-lg:0 24px 64px rgba(0,0,0,.09);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--txt);font-family:'Plus Jakarta Sans',system-ui,sans-serif;overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:#8b5cf6;color:#fff}
:focus-visible{outline:2px solid #8b5cf6;outline-offset:2px;border-radius:6px}
.btn:focus-visible,.lx-btn:focus-visible,.lx-btn-lg:focus-visible{outline-offset:3px}
body.lx ::selection{background:#8b5cf6;color:#fff}
body.lx ::-webkit-scrollbar{width:10px}
body.lx ::-webkit-scrollbar-track{background:#f1f5f9}
body.lx ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px;border:2px solid #f1f5f9}
body.lx ::-webkit-scrollbar-thumb:hover{background:#8b5cf6}
a{color:inherit;text-decoration:none;transition:color .2s var(--ease),opacity .2s var(--ease)}
img{max-width:100%}
.mono{font-family:'JetBrains Mono',monospace}
.wrap{width:min(1180px,92%);margin:0 auto}
/* BG FX */
.bg-fx{position:fixed;inset:0;z-index:-2;background:
 radial-gradient(800px 500px at 10% 5%,rgba(139,92,246,.12),transparent 60%),
 radial-gradient(700px 500px at 90% 15%,rgba(244,114,182,.10),transparent 60%),
 radial-gradient(600px 600px at 50% 100%,rgba(251,191,36,.08),transparent 60%),
 linear-gradient(#f8fafc,#f8fafc);}
.grid-overlay{position:fixed;inset:0;z-index:-1;opacity:.25;background-image:linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px);background-size:56px 56px}
#particles{position:fixed;inset:0;z-index:-1;opacity:.7}
/* Preloader */
#loader{position:fixed;inset:0;background:#070b16;z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;transition:opacity .6s,visibility .6s}
#loader.done{opacity:0;visibility:hidden}
.loader-ring{width:72px;height:72px;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:#6c6cf5;border-right-color:#22d3ee;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Cursor */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9998;border-radius:50%}
.cursor-dot{width:8px;height:8px;background:#22d3ee;transform:translate(-50%,-50%)}
.cursor-ring{width:36px;height:36px;border:1.5px solid rgba(108,108,245,.7);transform:translate(-50%,-50%);transition:width .2s,height .2s,border-color .2s}
@media (pointer:coarse){.cursor-dot,.cursor-ring{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .cursor-dot,.cursor-ring{display:none}
}
.nav-links {
  display: flex;
  gap: 24px;
  font-size: 14.5px;
  font-weight: 600;
}
.nav-link {
  color: #c6ccea;
  transition: color 0.2s ease, opacity 0.2s ease;
  opacity: 0.85;
}
.nav-link:hover {
  color: #fff;
  opacity: 1;
}
.nav-link.active { color: #fff; opacity: 1; position: relative; }
.nav-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg,#6c6cf5,#22d3ee); }
.btn-glass-sm {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #c6ccea;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
}
.btn-glass-sm:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(108, 108, 245, 0.5);
  transform: translateY(-2px);
}
.btn-primary-block {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  background: linear-gradient(135deg, #6c6cf5, #22d3ee);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(108, 108, 245, 0.4);
  transition: all 0.25s ease;
}
.btn-primary-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(108, 108, 245, 0.6);
}
@keyframes orbFloat {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -20px) scale(1.08); }
  100% { transform: translate(-20px, 20px) scale(0.95); }
}
#heroCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
@keyframes badgeShimmer { 0% { left: -80px; } 60%, 100% { left: 110%; } }
@keyframes ctaBreathe { 0%,100% { box-shadow: 0 10px 30px rgba(108,108,245,.45); } 50% { box-shadow: 0 10px 42px rgba(34,211,238,.6); } }
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}
.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.frame-theme-selector {
  display: flex;
  gap: 5px;
}
.theme-dot-btn {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.theme-dot-btn:hover, .theme-dot-btn.active {
  opacity: 1;
  transform: scale(1.3);
}
.theme-dot-btn[data-theme="midnight"] { background: #6c6cf5; }
.theme-dot-btn[data-theme="minimal"] { background: #e5e5e5; }
.theme-dot-btn[data-theme="terminal"] { background: #22c55e; }
.theme-dot-btn[data-theme="creative"] { background: #ec4899; }
.theme-dot-btn[data-theme="devblue"], .theme-dot-btn[data-theme="marlon"] { background: #4070F4; }
.theme-dot-btn[data-theme="cube"], .theme-dot-btn[data-theme="cubegreen"], .theme-dot-btn[data-theme="muzammal"] { background: #80ed99; }
.preview-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, #6c6cf5, #22d3ee);
  border: 3px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  transition: all 0.35s ease;
}
.preview-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.preview-title {
  font-size: 13.5px;
  color: #22d3ee;
  font-weight: 600;
  margin-bottom: 12px;
}
.preview-desc {
  font-size: 13px;
  color: #9aa3c0;
  line-height: 1.5;
  margin-bottom: 20px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.preview-skills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.skill-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5ff;
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease), transform .15s var(--ease);
}
.skill-tag:hover { border-color: rgba(79,70,229,.5); background: rgba(79,70,229,.1); color: #c7d2fe; transform: scale(1.05); }
.footer-themes {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}
.footer-theme-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #9aa3c0;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.footer-theme-btn:hover, .footer-theme-btn.active {
  background: rgba(108, 108, 245, 0.25);
  border-color: #6c6cf5;
  color: #fff;
}
.preview-frame[data-active-theme="minimal"] .preview-name { color: #0f172a; }
.preview-frame[data-active-theme="minimal"] .preview-title { color: #475569; }
.preview-frame[data-active-theme="minimal"] .preview-desc { color: #64748b; }
.preview-frame[data-active-theme="minimal"] .preview-avatar {
  background: #0f172a;
  border-color: #cbd5e1;
}
.preview-frame[data-active-theme="minimal"] .skill-tag {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .15s var(--ease);
}
.preview-frame[data-active-theme="minimal"] .skill-tag:hover { border-color: #6c6cf5; background: #eef2ff; transform: scale(1.05); }
.preview-frame[data-active-theme="terminal"] .preview-name {
  color: #22c55e;
}
.preview-frame[data-active-theme="terminal"] .preview-title {
  color: #86efac;
}
.preview-frame[data-active-theme="terminal"] .preview-avatar {
  background: linear-gradient(135deg, #15803d, #22c55e);
  border-color: rgba(34, 197, 94, 0.5);
}
.preview-frame[data-active-theme="terminal"] .skill-tag {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.25);
  color: #4ade80;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .15s var(--ease);
}
.preview-frame[data-active-theme="terminal"] .skill-tag:hover { border-color: #22c55e; background: rgba(34,197,94,.12); transform: scale(1.05); }
.preview-frame[data-active-theme="creative"] .preview-avatar {
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  border-color: rgba(236, 72, 153, 0.5);
}
.preview-frame[data-active-theme="creative"] .preview-title {
  color: #f472b6;
}
.preview-frame[data-active-theme="aurora"] .preview-avatar {
  background: linear-gradient(135deg, #06b6d4, #10b981);
  border-color: rgba(6, 182, 212, 0.5);
}
.preview-frame[data-active-theme="aurora"] .preview-title {
  color: #67e8f9;
}
.preview-frame[data-active-theme="devblue"] .preview-avatar,
.preview-frame[data-active-theme="marlon"] .preview-avatar {
  background: linear-gradient(135deg, #4070F4, #0E2431);
  border-color: rgba(64, 112, 244, 0.5);
}
.preview-frame[data-active-theme="devblue"] .preview-title,
.preview-frame[data-active-theme="marlon"] .preview-title {
  color: #4070F4;
}
.preview-frame[data-active-theme="cube"] .preview-avatar,
.preview-frame[data-active-theme="cubegreen"] .preview-avatar,
.preview-frame[data-active-theme="muzammal"] .preview-avatar {
  background: linear-gradient(135deg, #212529, #343a40);
  border-color: rgba(128, 237, 153, 0.5);
  color: #80ed99;
}
.preview-frame[data-active-theme="cube"] .preview-title,
.preview-frame[data-active-theme="cubegreen"] .preview-title,
.preview-frame[data-active-theme="muzammal"] .preview-title {
  color: #80ed99;
}
/* Marquee */
.marquee{margin:36px 0 6px;overflow:hidden;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);background:rgba(255,255,255,.03);transition:border-color .3s var(--ease)}
.marquee:hover{border-color:rgba(108,108,245,.4)}
.marquee-track{display:flex;gap:34px;padding:14px 0;white-space:nowrap;animation:scroll 22s linear infinite;font-weight:700;color:#c7cdf0;font-size:14px;letter-spacing:.4px}
@keyframes scroll{to{transform:translateX(-50%)}}
/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}
::-webkit-scrollbar-thumb{background:rgba(79,70,229,.4);border-radius:100px;border:2px solid transparent;background-clip:content-box;transition:background .25s var(--ease)}
::-webkit-scrollbar-thumb:hover{background:rgba(79,70,229,.7);background-clip:content-box}
/* Sections */
section{padding:72px 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:#22d3ee;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.25);padding:7px 12px;border-radius:100px;margin-bottom:14px;transition:box-shadow .3s var(--ease),border-color .25s var(--ease),background .25s var(--ease),transform .15s var(--ease)}
.eyebrow:hover{box-shadow:0 0 20px rgba(34,211,238,.25);border-color:rgba(34,211,238,.5);background:rgba(34,211,238,.15);transform:translateY(-2px)}
h2.title{font-family:'Space Grotesk',sans-serif;font-size:clamp(30px,4vw,46px);letter-spacing:-1.2px;line-height:1.05;margin-bottom:12px;text-wrap:balance;transition:color .25s var(--ease)}
h2.title:hover{color:#4f46e5}
p.lead{color:var(--muted);max-width:720px;font-size:16.5px;line-height:1.7;transition:color .25s var(--ease)}
h2.title:hover + p.lead, .eyebrow:hover + h2.title + p.lead{color:#b6c2ba}
/* About */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:28px}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius);padding:24px;backdrop-filter:blur(12px);position:relative;overflow:hidden;transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.card:hover{border-color:rgba(108,108,245,.5);transform:translateY(-3px);box-shadow:var(--sh-md)}
.card h3{font-size:19px;margin-bottom:8px;transition:color .25s var(--ease)}
.card:hover h3{color:#4f46e5}
.card h3{font-size:19px;margin-bottom:8px}.card p{color:var(--muted);font-size:14.8px}
.hl-list{display:grid;gap:12px;margin-top:14px}
.hl{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.04);border:1px solid var(--stroke);border-radius:14px;padding:12px 14px;font-size:14.2px;transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.hl:hover{border-color:rgba(108,108,245,.4);transform:translateX(4px);box-shadow:var(--sh-sm)}
.hl i{background:linear-gradient(135deg,#6c6cf5,#22d3ee);width:32px;height:32px;display:grid;place-items:center;border-radius:10px;flex-shrink:0}
/* Skills */
.skills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.skill{background:var(--card);border:1px solid var(--stroke);border-radius:18px;padding:18px;transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);position:relative;overflow:hidden}
.skill:hover{transform:translateY(-6px);border-color:rgba(34,211,238,.5);background:var(--card2);box-shadow:var(--sh-md)}
.skill i{font-size:26px;margin-bottom:10px;display:block;transition:transform .3s var(--ease)}
.skill:hover i{transform:scale(1.1)}
.skill i{font-size:26px;margin-bottom:10px;display:block}
.skill b{font-size:15px}.skill span{color:var(--muted);font-size:13px;display:block;margin:4px 0 10px}
.bar{height:7px;background:rgba(255,255,255,.1);border-radius:100px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#6c6cf5,#22d3ee);border-radius:100px}
/* Projects */
.filter-row{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
.chip{padding:8px 14px;border-radius:100px;border:1px solid var(--stroke);background:rgba(255,255,255,.05);font-size:13.5px;font-weight:700;cursor:pointer;color:#cbd2f0;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .15s var(--ease)}
.chip:active{transform:scale(.96)}
.chip.active,.chip:hover{background:#fff;color:#0b1226;border-color:#fff;transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dir-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.proj{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid var(--stroke);border-radius:20px;overflow:hidden;transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);display:flex;flex-direction:column}
.proj:hover{transform:translateY(-8px);border-color:rgba(108,108,245,.6);box-shadow:0 24px 60px rgba(108,108,245,.25)}
.proj-top{height:148px;position:relative;display:grid;place-items:center;overflow:hidden}
.proj-top span{font-size:56px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.5))}
.proj-top .stars{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.55);border:1px solid var(--stroke);padding:5px 10px;border-radius:100px;font-size:12.5px;font-weight:800}
/* Project cover art (SVG icons — no fragile emoji glyphs) */
.proj-top{position:relative}
.proj-top::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1px);background-size:18px 18px;opacity:.45}
.proj-art{position:relative;z-index:1;width:88px;height:88px;border-radius:24px;display:grid;place-items:center;background:rgba(0,0,0,.30);border:1px solid rgba(255,255,255,.28);box-shadow:0 14px 30px rgba(0,0,0,.35)}
.proj-art svg{width:46px;height:46px;color:#fff}
.proj-top .stars{z-index:2}
.proj-body{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1}
.proj-body h3{font-size:18px}
.proj-body p{color:var(--muted);font-size:13.8px;flex:1}
.tags{display:flex;gap:7px;flex-wrap:wrap}
.tags span{font-size:11.5px;font-weight:700;padding:5px 9px;border-radius:100px;background:rgba(108,108,245,.16);border:1px solid rgba(108,108,245,.35);color:#c7d2fe}
.proj-actions{display:flex;gap:10px;margin-top:6px}
.proj-actions a{flex:1;text-align:center;padding:10px;border-radius:12px;font-size:13.5px;font-weight:800;border:1px solid var(--stroke);background:rgba(255,255,255,.06);transition:transform .15s var(--ease),background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.proj-actions a.primary{background:#fff;color:#0b1226;border-color:#fff}
.proj-actions a:hover{transform:translateY(-2px);border-color:rgba(108,108,245,.4)}
.proj-actions a.primary:hover{box-shadow:0 0 16px rgba(255,255,255,.2)}
.proj-actions a:active{transform:scale(.98)}
.p1{background:radial-gradient(400px 200px at 30% 20%,rgba(108,108,245,.5),transparent),#141b3a}
.p2{background:radial-gradient(400px 200px at 70% 30%,rgba(34,211,238,.4),transparent),#0f2a3a}
.p3{background:radial-gradient(400px 200px at 50% 20%,rgba(244,114,182,.4),transparent),#2a1430}
.p4{background:radial-gradient(400px 200px at 30% 30%,rgba(163,230,53,.35),transparent),#1a2a12}
.p5{background:radial-gradient(400px 200px at 70% 20%,rgba(251,191,36,.4),transparent),#2f230f}
.p6{background:radial-gradient(400px 200px at 50% 30%,rgba(167,139,250,.45),transparent),#1d1840}
/* Timeline + GitHub */
.two{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;margin-top:26px}
.timeline{position:relative;padding-left:26px;display:grid;gap:16px;margin-top:6px}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:linear-gradient(#6c6cf5,#22d3ee,transparent)}
.t-item{position:relative;background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:16px 18px;transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.t-item:hover{border-color:rgba(34,211,238,.45);transform:translateX(4px);box-shadow:var(--sh-sm)}
.t-item::before{content:"";position:absolute;left:-24px;top:20px;width:12px;height:12px;border-radius:50%;background:#22d3ee;box-shadow:0 0 0 5px rgba(34,211,238,.2);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.t-item:hover::before{box-shadow:0 0 0 8px rgba(34,211,238,.4);transform:scale(1.2)}
.t-item::before{content:"";position:absolute;left:-24px;top:20px;width:12px;height:12px;border-radius:50%;background:#22d3ee;box-shadow:0 0 0 5px rgba(34,211,238,.2)}
.t-item small{color:#22d3ee;font-weight:800;font-size:12px;letter-spacing:.6px}
.t-item h4{margin:4px 0;font-size:16px}.t-item p{color:var(--muted);font-size:13.8px}
.gh-card img{width:100%;border-radius:14px;border:1px solid var(--stroke);background:#0b1226;transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.gh-card:hover img{border-color:rgba(108,108,245,.4);transform:translateY(-4px);box-shadow:var(--sh-md)}
/* Why hire */
.hire{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.hire .card{text-align:left;transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.hire .card:hover{border-color:rgba(79,70,229,.5);transform:translateY(-4px);box-shadow:var(--sh-md)}
.hire .card h3{transition:color .25s var(--ease)}
.hire .card:hover h3{color:#4f46e5}
.hire .num{font-family:'Space Grotesk';font-size:34px;font-weight:700;background:linear-gradient(90deg,#fff,#9aa3c0);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Contact */
.contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:16px;margin-top:26px}
.c-row{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:14px 16px;margin-bottom:12px}
.c-row i{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#6c6cf5,#22d3ee);font-size:18px;flex-shrink:0}
.c-row small{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
body:not([data-template="moderncv"]) form.contact-form{background:var(--card);border:1px solid var(--stroke);border-radius:20px;padding:22px;display:grid;gap:12px}
body[data-template="moderncv"] form.contact-form{background:transparent !important;border:none !important;border-radius:0 !important;padding:0 !important;display:flex !important;flex-direction:column !important;gap:1.5rem !important;box-shadow:none !important}
input:focus,textarea:focus{outline:none;border-color:#6c6cf5;box-shadow:0 0 0 3px rgba(108,108,245,.25)}
textarea{min-height:120px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Footer */
footer{border-top:1px solid var(--stroke);padding:28px 0 34px;margin-top:20px;color:var(--muted);font-size:14px}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.socials{display:flex;gap:10px}
.socials a{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid var(--stroke);font-size:17px;transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.socials a:hover{background:#fff;color:#0b1226;transform:translateY(-3px);border-color:#fff}
#toTop{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border-radius:14px;border:1px solid var(--stroke);background:rgba(11,18,38,.9);color:#fff;font-size:18px;display:none;cursor:pointer;z-index:99;transition:transform .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
#toTop:hover{transform:translateY(-3px);border-color:rgba(108,108,245,.6);background:rgba(108,108,245,.2)}
.reveal{opacity:0;transform:translateY(26px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:none}
/* Responsive */
@media(max-width:980px){
.hero-grid,.about-grid,.two,.contact-grid{grid-template-columns:1fr}
.skills-grid{grid-template-columns:repeat(2,1fr)}
.proj-grid{grid-template-columns:repeat(2,1fr)}
.dir-grid{grid-template-columns:repeat(2,1fr)}
.hire{grid-template-columns:1fr}
.nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:#0b1226;border:1px solid var(--stroke);border-radius:14px;padding:14px;flex-direction:column}
.nav-links.open{display:flex}
.hamburger{display:block}
.stats-bar{grid-template-columns:repeat(2,1fr)!important}
.features-grid{grid-template-columns:repeat(2,1fr)!important}
.float.f1{left:6px}.float.f2{right:6px}
}
@media(max-width:620px){.proj-grid{grid-template-columns:1fr}.dir-grid{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.skills-grid{grid-template-columns:1fr 1fr}}
/* Dashboard & Admin Console CSS */
.dash-nav{position:sticky;top:14px;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:rgba(11,18,38,.85);backdrop-filter:blur(20px);border:1px solid var(--stroke);border-radius:18px;margin:14px auto;width:min(1180px,94%);transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.dash-nav:hover{border-color:rgba(108,108,245,.35);box-shadow:0 8px 28px rgba(0,0,0,.3)}
.dash-nav .dash-user-info{transition:transform .25s var(--ease)}
.dash-nav:hover .dash-user-info{transform:translateX(4px)}
.dash-user-info{display:flex;align-items:center;gap:12px}
.role-badge{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:5px 12px;border-radius:100px;display:inline-flex;align-items:center;gap:6px;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.role-badge.user{background:rgba(34,211,238,.14);color:#22d3ee;border:1px solid rgba(34,211,238,.35)}
.role-badge.admin{background:rgba(251,191,36,.14);color:#fde68a;border:1px solid rgba(251,191,36,.4)}
.role-badge.user:hover{border-color:rgba(34,211,238,.6);box-shadow:0 0 12px rgba(34,211,238,.2)}
.role-badge.admin:hover{border-color:rgba(251,191,36,.6);box-shadow:0 0 12px rgba(251,191,36,.2)}

.status-pill{font-size:12px;font-weight:800;padding:6px 14px;border-radius:100px;display:inline-flex;align-items:center;gap:8px;transition:box-shadow .3s var(--ease)}
.status-pill.live{background:rgba(163,230,53,.15);color:#d9f99d;border:1px solid rgba(163,230,53,.4);box-shadow:0 0 16px rgba(163,230,53,.15)}
.status-pill.pending{background:rgba(251,191,36,.15);color:#fde68a;border:1px solid rgba(251,191,36,.4);box-shadow:0 0 16px rgba(251,191,36,.15)}
.status-pill.rejected{background:rgba(244,114,182,.15);color:#f9a8d4;border:1px solid rgba(244,114,182,.4);box-shadow:0 0 16px rgba(244,114,182,.15)}
.status-pill.none{background:rgba(255,255,255,.08);color:var(--muted);border:1px solid var(--stroke);box-shadow:none}

.dash-header-card{background:linear-gradient(135deg,rgba(108,108,245,.12),rgba(34,211,238,.06));border:1px solid rgba(108,108,245,.3);border-radius:24px;padding:26px;margin-bottom:24px;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.dash-header-card:hover{border-color:rgba(108,108,245,.45);box-shadow:0 12px 36px rgba(108,108,245,.12)}
.dash-header-card h2{font-size:26px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dash-header-card .subdomain{font-family:'JetBrains Mono',monospace;font-size:15px;color:#4f46e5;background:rgba(79,70,229,.1);border:1px solid rgba(79,70,229,.25);border-radius:8px;padding:4px 10px;margin-left:auto;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.dash-header-card .subdomain:hover{border-color:rgba(79,70,229,.5);box-shadow:0 0 12px rgba(79,70,229,.15)}

.dash-tab-btns{display:flex;gap:8px;margin-bottom:18px;border-bottom:1px solid var(--stroke);padding-bottom:12px;overflow-x:auto}
.dash-tab-btn{padding:10px 18px;border-radius:12px;border:1px solid transparent;background:rgba(255,255,255,.04);color:var(--muted);font-weight:700;font-size:14px;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .15s var(--ease);white-space:nowrap}
.dash-tab-btn:active{transform:scale(.97)}
.dash-tab-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.dash-tab-btn.active{background:#fff;color:#0b1226;border-color:#fff;box-shadow:0 4px 16px rgba(255,255,255,.2);transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}

.admin-console{background:rgba(15,23,42,.7);border:1px solid rgba(251,191,36,.3);border-radius:24px;padding:26px;margin-bottom:30px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.admin-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap;border-bottom:1px solid var(--stroke);padding-bottom:16px}
.admin-head h2{font-size:20px;display:flex;align-items:center;gap:10px}
.admin-head .admin-badge{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:800;letter-spacing:1px;background:rgba(251,191,36,.14);color:#fde68a;border:1px solid rgba(251,191,36,.4);border-radius:100px;padding:4px 10px;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.admin-head .admin-badge:hover{border-color:rgba(251,191,36,.6);box-shadow:0 0 12px rgba(251,191,36,.2)}

.admin-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.admin-tile{background:rgba(255,255,255,.04);border:1px solid var(--stroke);border-radius:18px;padding:18px;transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.admin-tile:hover{transform:translateY(-3px);border-color:rgba(251,191,36,.4);box-shadow:var(--sh-sm)}
.admin-tile b{font-family:'Space Grotesk',sans-serif;font-size:36px;line-height:1;display:block;margin-bottom:4px;transition:transform .3s var(--ease)}
.admin-tile:hover b{transform:scale(1.05)}
.admin-tile span{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted);transition:color .25s var(--ease)}
.admin-tile:hover span{color:#a7b3ab}
.admin-tile.pending b{color:#fde68a}.admin-tile.live b{color:#d9f99d}.admin-tile.total b{color:#22d3ee}.admin-tile.rejected b{color:#f9a8d4}

.admin-table-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;background:rgba(255,255,255,.03);border:1px solid var(--stroke);border-radius:16px;padding:14px 18px;margin-bottom:10px;transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.admin-table-row:hover{background:rgba(255,255,255,.06);border-color:rgba(108,108,245,.4);transform:translateX(4px)}
.admin-table-row .featured{background:#fef3c7;color:#b45309;border-color:#fde68a}
.admin-table-row .user-cell{display:flex;align-items:center;gap:10px}
.admin-table-row .user-ava{width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid var(--stroke);transition:transform .25s var(--ease),border-color .25s var(--ease)}
.admin-table-row:hover .user-ava{transform:scale(1.1);border-color:rgba(79,70,229,.5)}
.admin-table-row .status-cell{display:flex;align-items:center;gap:8px}
/* Dashboard save bar */
.dash-save-bar{position:sticky;bottom:14px;z-index:50;display:flex;justify-content:flex-end;gap:12px;padding:14px 20px;background:rgba(11,18,38,.9);backdrop-filter:blur(20px);border:1px solid var(--stroke);border-radius:18px;margin:14px auto;width:min(1180px,94%);box-shadow:0 -8px 24px rgba(0,0,0,.3);transition:border-color .3s var(--ease)}
.dash-save-bar:hover{border-color:rgba(79,70,229,.35)}
/* Avatar dropzone */
.avatar-dropzone{position:relative;width:120px;height:120px;border-radius:50%;border:2px dashed var(--stroke);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;overflow:hidden;transition:border-color .25s var(--ease),background .25s var(--ease)}
.avatar-dropzone:hover,.avatar-dropzone.dragover{border-color:#4f46e5;background:rgba(79,70,229,.05)}
.avatar-dropzone img{width:100%;height:100%;object-fit:cover}
.avatar-dropzone i{font-size:32px;color:var(--muted);transition:color .25s var(--ease)}
.avatar-dropzone:hover i,.avatar-dropzone.dragover i{color:#4f46e5}
/* Theme picker selected ring */
.tpl-card.selected{border-color:#22d3ee;box-shadow:0 0 0 3px rgba(34,211,238,.3);transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.tpl-card.selected:hover{transform:translateY(-3px) scale(1.01)}
.tpl-card input:focus-visible + .tpl-preview{border:2px solid #22d3ee;border-radius:12px}
.tpl-card .tpl-preview{position:relative}
.tpl-preview-eye{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;background:rgba(11,15,14,.88);border:1px solid rgba(255,255,255,.3);color:#e2e8f0;display:flex;align-items:center;justify-content:center;font-size:11px;opacity:0;transition:opacity .2s var(--ease),transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease);cursor:pointer;z-index:6;padding:0;outline:none}
.tpl-card:hover .tpl-preview-eye,.tpl-card:focus-within .tpl-preview-eye,.tpl-preview-eye:focus-visible{opacity:1}
.tpl-preview-eye:hover,.tpl-preview-eye:focus-visible{background:#4f46e5;border-color:#818cf8;color:#fff;transform:scale(1.12);box-shadow:0 0 10px rgba(99,102,241,.5)}
.section-header.text-center .lead {
  margin-left: auto;
  margin-right: auto;
}
.stat-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(32px, 3.5vw, 44px);
  line-height: 1.1;
  font-weight: 700;
  display: block;
  background: linear-gradient(135deg, #ffffff, #c7d2fe);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.step-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 38px;
  font-weight: 800;
  background: linear-gradient(135deg, #6c6cf5, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
}
.auth-card {
  background: rgba(11, 18, 38, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  padding: 36px 30px;
  backdrop-filter: blur(18px);
  position: relative;
  overflow: hidden;
}
/* Auth card: gradient top glow line */
.auth-card::before {
  content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #6c6cf5, #22d3ee, transparent);
  opacity: .8;
}
.auth-tabs {
  display: flex;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 5px;
  margin-bottom: 28px;
}
.auth-tab {
  flex: 1;
  padding: 10px 16px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #9aa3c0;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.auth-tab:hover {
  color: #fff;
}
.auth-tab.active {
  background: linear-gradient(135deg, #6c6cf5, #22d3ee);
  color: #fff;
  box-shadow: 0 4px 16px rgba(108, 108, 245, 0.4);
}
.auth-tab { transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease); }
.auth-tab:active { transform: scale(.98); }
}
.auth-hint {
  color: #9aa3c0;
  font-size: 13.5px;
  margin-bottom: 18px;
}
.form-group {
  margin-bottom: 20px;
  transition: transform .25s var(--ease);
}
.form-group:focus-within { transform: translateX(2px); }
.flabel {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #9aa3c0;
  margin-bottom: 8px;
  transition: color 0.25s var(--ease);
}
.input-wrapper:focus-within .flabel,
.form-group:focus-within .flabel { color: #818cf8; }
.input-wrapper {
  position: relative;
}
.input-wrapper input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 14px 44px 14px 16px;
  color: #ffffff;
  font-family: inherit;
  font-size: 14.5px;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
  outline: none;
}
.input-wrapper input::placeholder {
  color: #6b7594;
}
.input-wrapper input:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: #6c6cf5;
  box-shadow: 0 0 0 4px rgba(108, 108, 245, 0.25);
}
.input-wrapper .input-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7594;
  pointer-events: none;
  font-size: 14px;
  transition: color .2s var(--ease);
}
.toggle-pass {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #6b7594;
  cursor: pointer;
  padding: 6px;
  font-size: 14px;
  transition: color 0.2s ease;
}
.toggle-pass:hover {
  color: #22d3ee;
  transform: translateY(-50%) scale(1.1);
}
.toggle-pass:active { transform: translateY(-50%) scale(.9); }
.toggle-pass:active { transform: scale(.9); }
.auth-msg {
  font-size: 12.5px;
  color: #f472b6;
  margin-top: 16px;
  text-align: center;
  min-height: 20px;
  animation: msgIn .3s var(--ease);
}
@keyframes msgIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
input[type="checkbox"], input[type="radio"] { accent-color: #6c6cf5; cursor: pointer; transition: transform .15s var(--ease); }
input[type="checkbox"]:active, input[type="radio"]:active { transform: scale(.9); }
select { width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 13px 14px; color: #fff; font-family: inherit; font-size: 14.5px; outline: none; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); cursor: pointer; }
select:focus { border-color: #6c6cf5; box-shadow: 0 0 0 4px rgba(108,108,245,.25); }
select option { background: #0b1226; color: #fff; }
/* Form helper text & error state */
.form-hint{font-size:12px;color:var(--muted);margin-top:6px;transition:color .25s var(--ease)}
.input-wrapper.error input{border-color:#f472b6;box-shadow:0 0 0 4px rgba(244,114,182,.2)}
.input-wrapper.error .input-icon{color:#f472b6}
.form-hint.error{color:#f472b6}
.auth-demo-footer {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.demo-text {
  color: #9aa3c0;
  font-size: 13px;
  margin-bottom: 12px;
}
.footer-links {
  display: flex;
  gap: 20px;
}
.footer-links a {
  color: #9aa3c0;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
  position: relative;
}
.footer-links a:hover {
  color: #ffffff;
}
/* Footer: sliding underline on hover */
.footer-links a::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 0;
  background: linear-gradient(90deg,#6c6cf5,#22d3ee); transition: width .25s ease;
}
.footer-links a:hover::after { width: 100%; }

@media(max-width:980px){
  .stats-grid, .features-grid, .steps-grid, .admin-tiles { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media(max-width:620px){
  .stats-grid, .features-grid, .steps-grid, .admin-tiles { grid-template-columns: 1fr; }
}


#toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,80px);background:#fff;color:#0b1226;font-weight:800;font-size:14px;padding:13px 20px;border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.45);transition:transform .4s var(--ease),opacity .4s var(--ease);z-index:9999;opacity:0;max-width:min(92vw,460px);text-align:center;line-height:1.45}
#toast.show{transform:translate(-50%,0);opacity:1}
/* Base buttons (theme-neutral core; portfolio themes only re-tint on top) */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:12px;font-weight:800;font-size:14px;border:1px solid transparent;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;text-decoration:none;line-height:1.2}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{background:linear-gradient(135deg,#6c6cf5,#22d3ee);color:#fff!important;box-shadow:0 10px 30px rgba(108,108,245,.4)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(108,108,245,.55)}
.btn-primary:active{box-shadow:0 6px 18px rgba(108,108,245,.4)}
.btn-ghost{background:rgba(255,255,255,.07);border-color:var(--stroke);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)}
.btn-sm{padding:9px 14px;font-size:13px;border-radius:10px}
.btn-lg{padding:15px 28px;font-size:15px;border-radius:14px}
.btn-block{width:100%;justify-content:center}
.btn:disabled,.btn-primary:disabled,.btn-ghost:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:saturate(.35);box-shadow:none}
.btn-primary:disabled:hover,.btn-ghost:disabled:hover{transform:none}
/* Overflow hardening (grid blowout + long mono strings in dashboard cards) */
.form-grid .full{min-width:0}
.mono{overflow-wrap:anywhere}
iframe{max-width:100%}
#uploadDrop{overflow:hidden}

/* LX nav */
.lx-nav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); width: min(1180px,94%); z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: rgba(255,255,255,.85); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--stroke); border-radius: 16px; transition: padding .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); box-shadow: var(--sh-sm); }
.lx-nav.scrolled, body.lx #mainNav.scrolled { padding: 8px 18px; background: rgba(255,255,255,.95); border-color: var(--stroke); box-shadow: var(--sh-md); }
.lx-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: linear-gradient(90deg,#4f46e5,#22d3ee); border-radius: 0 0 16px 16px; box-shadow: 0 0 10px rgba(79,70,229,.7); transition: width .12s linear; }
.lx-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .2px; color: var(--txt); }
.lx-brand .lx-mark { color: var(--brand); font-size: 22px; }
.lx-brand .brand-logo, .dash-nav .logo .brand-logo, a.logo .brand-logo { width: 28px; height: auto; max-height: 28px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.dash-nav .logo { display: inline-flex; align-items: center; gap: 10px; }
.lx-brand.sm .brand-logo { width: 24px; height: 24px; }
.lx-brand em { font-style: normal; color: #4f46e5; font-size: 12px; font-weight: 700; }
.lx-nav-cta { display: flex; align-items: center; gap: 12px; }
.lx-login { color: #c9d2cc; font-weight: 600; font-size: 14px; transition: color .2s var(--ease); }
.lx-login:hover { color: #fff; }
.lx-btn { display: inline-flex; align-items: center; gap: 8px; background: #4f46e5; color: #fff; font-weight: 800; font-size: 14px; padding: 10px 18px; border-radius: 12px; border: 1px solid transparent; background-clip: padding-box; position: relative; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.lx-btn::before { content: ""; position: absolute; inset: -1px; border-radius: 13px; background: linear-gradient(135deg, #4f46e5, #6366f1, #a855f7); opacity: 0; filter: blur(8px); transition: opacity .3s var(--ease); z-index: -1; }
.lx-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(79,70,229,.35), 0 0 24px rgba(79,70,229,.4); }
.lx-btn:hover::before { opacity: 1; }
.lx-btn:active { transform: translateY(0) scale(.98); }
body.lx .nav-link { color: #a7b3ab; position: relative; transition: color .25s var(--ease); }
body.lx .nav-link:hover, body.lx .nav-link.active { color: #fff; }
body.lx .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg,#4f46e5,#6366f1); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
body.lx .nav-link:hover::after { transform: scaleX(1); }
body.lx .nav-link.active::after { transform: scaleX(1); background: linear-gradient(90deg,#4f46e5,#6366f1); }
/* LX hero */
.lx-hero { position: relative; padding: 150px 0 60px; overflow: hidden; }
.lx-hero #heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; pointer-events: none; }
.lx-hero-inner { position: relative; width: min(880px,92%); margin: 0 auto; text-align: center; }
.lx-hero-inner::before { content: ""; position: absolute; top: 40px; left: 50%; transform: translateX(-50%); width: 660px; max-width: 100%; height: 360px; background: radial-gradient(ellipse at center, rgba(99,102,241,.20) 0%, rgba(34,211,238,.07) 48%, transparent 72%); filter: blur(28px); pointer-events: none; z-index: 0; }
.lx-hero-inner > * { position: relative; z-index: 1; }
.lx-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 100px; background: rgba(79,70,229,.08); border: 1px solid rgba(79,70,229,.3); color: #c7d2fe; font-size: 13px; font-weight: 700; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.lx-badge:hover { border-color: rgba(79,70,229,.5); box-shadow: 0 0 24px rgba(79,70,229,.18); }
.lx-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #4f46e5; box-shadow: 0 0 0 4px rgba(79,70,229,.2); animation: pulseDot 2s infinite; }
.lx-live-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 100px; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3); color: #4ade80; font-size: 12.5px; font-weight: 700; }
.lx-live-badge .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.3); animation: livePulse 1.5s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(1.2); } }
.lx-title { font-family: 'Space Grotesk',sans-serif; font-size: clamp(44px,7vw,84px); line-height: 1.02; letter-spacing: -3px; color: #f4f7f3; margin: 24px 0 18px; font-weight: 700; text-wrap: balance; }
.lx-lime { background: linear-gradient(100deg,#6366f1 0%,#818cf8 45%,#22d3ee 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
/* Keyboard hint line */
.lx-kbd-hint { margin-top: 14px; font-size: 12.5px; color: #5d6a62; }
.lx-kbd-hint kbd { font-family: 'JetBrains Mono',monospace; font-size: 11px; color: #d9f99d; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-bottom-width: 2px; border-radius: 6px; padding: 2px 7px; }
/* Serif italic accent word (editorial contrast) */
.lx-serif { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; letter-spacing: -1px; color: #4f46e5; }
.lx-sub { color: #b6c2ba; font-size: 18px; max-width: 620px; margin: 0 auto; line-height: 1.7; text-wrap: pretty; }
.lx-sub strong { color: #f4f7f3; }
.lx-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 30px 0 26px; }
.lx-btn-lg { display: inline-flex; align-items: center; gap: 10px; background: #4f46e5; color: #fff; font-weight: 800; font-size: 16px; padding: 16px 30px; border-radius: 14px; box-shadow: 0 14px 40px rgba(79,70,229,.3); transition: transform .25s var(--ease), box-shadow .25s var(--ease); animation: ctaBreathe 3s ease-in-out infinite; }
.lx-btn-lg:hover { transform: translateY(-3px); }
.lx-btn-lg:active { transform: translateY(0) scale(.98); animation: none; }
.lx-btn-ghost { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: #e7ece9; font-weight: 700; font-size: 16px; padding: 16px 26px; border-radius: 14px; transition: background .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease); }
.lx-btn-ghost:hover { background: rgba(255,255,255,.1); transform: translateY(-3px); border-color: rgba(255,255,255,.24); }
.lx-btn-ghost:active { transform: translateY(0) scale(.98); }
.lx-proof { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.lx-avatars { display: flex; }
.lx-avatars span { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(135deg,#4f46e5,#6366f1); border: 2px solid #0b0f0e; margin-left: -10px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.lx-avatars span:hover { transform: translateY(-3px) scale(1.1); z-index: 1; box-shadow: 0 8px 20px rgba(79,70,229,.4); border-color: rgba(79,70,229,.5); }
.lx-avatars span:first-child { margin-left: 0; }
.lx-proof-text { color: #a7b3ab; font-size: 14px; transition: color .25s var(--ease); }
.lx-proof:hover .lx-proof-text { color: #d9f99d; }
.lx-stars { color: #4f46e5; letter-spacing: 2px; }
/* Announcement pill */
.lx-announce { display: inline-flex; align-items: center; gap: 10px; padding: 7px 8px 7px 8px; border-radius: 100px; background: rgba(79,70,229,.06); border: 1px solid rgba(79,70,229,.25); color: #c7d2fe; font-size: 13px; font-weight: 600; transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); }
.lx-announce:hover { border-color: rgba(79,70,229,.5); background: rgba(79,70,229,.1); transform: translateY(-2px); }
.lx-announce-tag { background: #4f46e5; color: #fff; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 100px; letter-spacing: .4px; transition: transform .2s var(--ease); }
.lx-announce:hover .lx-announce-tag { transform: scale(1.05); }
.lx-announce-arrow { color: #4f46e5; font-weight: 800; padding-right: 6px; transition: transform .2s var(--ease); }
.lx-announce:hover .lx-announce-arrow { transform: translateX(3px); }
/* LX code window */
.lx-window { margin: 44px auto 0; max-width: 720px; background: rgba(13,19,18,.92); border: 1px solid rgba(79,70,229,.2); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(79,70,229,.06); text-align: left; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.lx-window:hover { transform: translateY(-4px); border-color: rgba(79,70,229,.32); box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 40px rgba(79,70,229,.08); }
.lx-window:hover .lx-win-dots span:first-child { box-shadow: 0 0 8px rgba(79,70,229,.8); }
.lx-win-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(255,255,255,.03); border-bottom: 1px solid rgba(255,255,255,.08); }
.lx-win-dots { display: flex; gap: 7px; }
.lx-win-dots span { width: 11px; height: 11px; border-radius: 50%; background: #2a3532; transition: background .25s var(--ease), box-shadow .25s var(--ease); }
.lx-win-dots span:first-child { background: #4f46e5; }
.lx-win-url { font-family: 'JetBrains Mono',monospace; font-size: 12.5px; color: #7d8a82; flex: 1; transition: color .25s var(--ease); }
.lx-window:hover .lx-win-url { color: #a7b3ab; }
.lx-win-body { display: grid; grid-template-columns: .9fr 1.1fr; gap: 20px; padding: 24px; }
.lx-win-side { border-right: 1px solid rgba(255,255,255,.08); padding-right: 20px; }
.lx-win-line { font-family: 'JetBrains Mono',monospace; font-size: 13.5px; color: #e7ece9; background: rgba(79,70,229,.06); border: 1px solid rgba(79,70,229,.18); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; transition: border-color .25s var(--ease), background .25s var(--ease), transform .15s var(--ease); }
.lx-window:hover .lx-win-line { border-color: rgba(79,70,229,.4); background: rgba(79,70,229,.1); transform: translateX(4px); }
.lx-win-line.dim { background: transparent; border: none; color: #7d8a82; font-size: 12.5px; padding: 2px 4px; }
.lx-win-main { min-width: 0; }
.lx-auth-copy { min-width: 0; }
.lx-prompt { color: #4f46e5; font-weight: 700; margin-right: 6px; transition: color .25s var(--ease); }
.lx-window:hover .lx-prompt { color: #c7d2fe; }
.lx-btn-lg { animation: lxBreathe 3s ease-in-out infinite; transition: transform .15s var(--ease), box-shadow .25s var(--ease); }
.lx-btn-lg:hover { transform: translateY(-3px); }
.lx-btn-lg:active { transform: scale(.97); }
@keyframes lxBreathe { 0%,100% { box-shadow: 0 14px 40px rgba(79,70,229,.3); } 50% { box-shadow: 0 14px 52px rgba(79,70,229,.5); } }
/* CTA shine sweep on hover */
.lx-btn-lg { position: relative; overflow: hidden; }
.lx-btn-lg::after { content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.32), transparent); transform: skewX(-20deg); transition: left .55s var(--ease); pointer-events: none; }
.lx-btn-lg:hover::after { left: 135%; }
/* Window status bar (editor chrome detail) */
.lx-win-status { display: flex; gap: 16px; align-items: center; padding: 8px 16px; background: rgba(79,70,229,.05); border-top: 1px solid rgba(255,255,255,.08); font-family: 'JetBrains Mono',monospace; font-size: 11px; color: #7d8a82; transition: background .25s var(--ease), border-color .25s var(--ease); }
.lx-window:hover .lx-win-status { background: rgba(79,70,229,.08); border-color: rgba(79,70,229,.2); }
.lx-win-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #c7d2fe; }
.lx-win-live i { width: 7px; height: 7px; border-radius: 50%; background: #4f46e5; animation: pulseDot 2s infinite; transition: box-shadow .25s var(--ease); }
.lx-window:hover .lx-win-live i { box-shadow: 0 0 10px rgba(79,70,229,.8); }
/* LX window: retint kept interactive classes (fight old purple rules) */
.lx-window .preview-avatar { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#4f46e5,#6366f1); margin-bottom: 12px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.lx-window:hover .preview-avatar { transform: scale(1.06); box-shadow: 0 0 24px rgba(79,70,229,.5); }
.lx-window .preview-name { color: #f4f7f3; font-size: 22px; margin: 0 0 2px; }
.lx-window .preview-title { color: #4f46e5; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.lx-window .preview-desc { color: #a7b3ab; font-size: 13px; }
.lx-window .skill-tag { background: rgba(79,70,229,.1); border: 1px solid rgba(79,70,229,.3); color: #c7d2fe; transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease), transform .15s var(--ease); }
.lx-window:hover .skill-tag { border-color: rgba(79,70,229,.6); background: rgba(79,70,229,.15); transform: scale(1.05); }
.lx-window .theme-dot-btn { border-color: rgba(255,255,255,.2); transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .15s var(--ease); }
.lx-window .theme-dot-btn:hover { border-color: rgba(79,70,229,.5); transform: scale(1.1); }
.lx-window .theme-dot-btn.active { box-shadow: 0 0 10px rgba(79,70,229,.7); transition: box-shadow .25s var(--ease); }
.lx-window .footer-theme-btn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #a7b3ab; transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .15s var(--ease); }
.lx-window .footer-theme-btn:hover { background: rgba(79,70,229,.1); border-color: rgba(79,70,229,.4); color: #4f46e5; transform: translateY(-2px); }
.lx-window .footer-theme-btn.active { background: rgba(79,70,229,.14); border-color: rgba(79,70,229,.45); color: #c7d2fe; transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); }
/* LX sections */
#landing { counter-reset: lxsec; }
.lx-section { width: min(1180px,92%); margin: 0 auto; padding: 72px 0 8px; counter-increment: lxsec; }
.lx-kicker::before { content: "0" counter(lxsec) " · "; color: #5d6a62; letter-spacing: 1px; transition: color .3s var(--ease); }
.lx-section:hover .lx-kicker::before { color: #4f46e5; }
.lx-kicker { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #4f46e5; background: rgba(79,70,229,.08); border: 1px solid rgba(79,70,229,.25); padding: 7px 14px; border-radius: 100px; margin-bottom: 14px; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.lx-section:hover .lx-kicker { border-color: rgba(79,70,229,.45); box-shadow: 0 0 18px rgba(79,70,229,.12); }
.lx-h2 { font-family: 'Space Grotesk',sans-serif; font-size: clamp(30px,4vw,46px); letter-spacing: -1.5px; line-height: 1.06; color: #f4f7f3; margin-bottom: 10px; text-wrap: balance; }
.lx-lead { color: #b6c2ba; font-size: 16.5px; max-width: 640px; line-height: 1.7; }
.lx-center { text-align: center; margin-top: 28px; }
.lx-center .lx-btn-ghost { transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.lx-center .lx-btn-ghost:hover { background: rgba(79,70,229,.1); border-color: rgba(79,70,229,.4); color: #4f46e5; transform: translateY(-2px); }
/* LX logo strip */
.lx-logos { width: min(1180px,92%); margin: 0 auto; padding: 26px 0 6px; text-align: center; }
.lx-logos-label { font-size: 11.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #5d6a62; margin-bottom: 14px; }
.lx-logos-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lx-logos-row span { font-family: 'JetBrains Mono',monospace; font-size: 13px; color: #a7b3ab; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); padding: 8px 14px; border-radius: 10px; transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
.lx-logos-row span:hover { color: #c7d2fe; border-color: rgba(79,70,229,.4); background: rgba(79,70,229,.06); }
/* Logo marquee */
.lx-marquee { display: flex; gap: 12px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lx-marquee .lx-logos-row { flex-shrink: 0; animation: lxMarquee 26s linear infinite; }
.lx-marquee:hover .lx-logos-row { animation-play-state: paused; }
@keyframes lxMarquee { to { transform: translateX(calc(-100% - 12px)); } }
/* LX bento */
.lx-bento { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 30px; position: relative; }
.lx-bento::before { content: ""; position: absolute; top: -20%; left: -10%; width: 60%; height: 60%; background: radial-gradient(ellipse at center, rgba(79,70,229,.12) 0%, transparent 70%); pointer-events: none; z-index: 0; }
.lx-bento::after { content: ""; position: absolute; bottom: -20%; right: -10%; width: 60%; height: 60%; background: radial-gradient(ellipse at center, rgba(99,102,241,.1) 0%, transparent 70%); pointer-events: none; z-index: 0; }
.lx-bento > * { position: relative; z-index: 1; }
.lx-bento { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 30px; }
.lx-bento-card { background: rgba(17,24,22,.85); border: 1px solid rgba(255,255,255,.09); border-radius: 20px; padding: 26px 24px; transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); background-clip: padding-box; position: relative; }
.lx-bento-card::before { content: ""; position: absolute; inset: -1px; border-radius: 21px; background: linear-gradient(135deg, rgba(79,70,229,.3), rgba(99,102,241,.2), transparent); opacity: 0; filter: blur(8px); transition: opacity .3s var(--ease); z-index: -1; }
.lx-bento-card:hover::before { opacity: 1; }
.lx-bento-card:hover { transform: translateY(-5px); border-color: rgba(79,70,229,.4); box-shadow: 0 18px 44px rgba(0,0,0,.45), 0 0 24px rgba(79,70,229,.15); }
.lx-bento-card.lx-span { grid-column: span 2; background: linear-gradient(135deg, rgba(79,70,229,.1), rgba(17,24,22,.9) 60%); }
.lx-bento-card h3 { color: #f4f7f3; font-size: 19px; margin: 14px 0 8px; }
.lx-bento-card p { color: #a7b3ab; font-size: 14.5px; }
.lx-bento-card strong { color: #e7ece9; }
.lx-bento-icon { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; background: linear-gradient(135deg,#4f46e5,#6366f1); border: 1px solid rgba(129,140,248,.5); box-shadow: 0 6px 16px rgba(79,70,229,.3); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.lx-bento-card:hover .lx-bento-icon { box-shadow: 0 10px 26px rgba(79,70,229,.5); transform: translateY(-2px) scale(1.06); }
.lx-bento-url { margin-top: 16px; font-family: 'JetBrains Mono',monospace; font-size: 13px; color: #c7d2fe; background: rgba(0,0,0,.35); border: 1px solid rgba(79,70,229,.25); border-radius: 10px; padding: 10px 14px; display: inline-block; transition: border-color .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease); }
.lx-bento-url:hover { border-color: rgba(79,70,229,.5); box-shadow: 0 0 16px rgba(79,70,229,.15); color: #4f46e5; }
.lx-bento-url span { color: #4f46e5; font-weight: 700; }
/* Bento mini sparkline */
.lx-spark { display: flex; align-items: flex-end; gap: 5px; height: 44px; margin-top: 16px; }
.lx-spark i { flex: 1; border-radius: 3px; background: linear-gradient(180deg, #4f46e5, rgba(79,70,229,.25)); opacity: .85; animation: lxSparkIn .8s ease-out backwards; }
.lx-spark i:nth-child(1) { animation-delay: 0ms; }
.lx-spark i:nth-child(2) { animation-delay: 60ms; }
.lx-spark i:nth-child(3) { animation-delay: 120ms; }
.lx-spark i:nth-child(4) { animation-delay: 180ms; }
.lx-spark i:nth-child(5) { animation-delay: 240ms; }
.lx-spark i:nth-child(6) { animation-delay: 300ms; }
.lx-spark i:nth-child(7) { animation-delay: 360ms; }
.lx-spark i:nth-child(8) { animation-delay: 420ms; }
.lx-spark i:nth-child(9) { animation-delay: 480ms; }
.lx-spark i:nth-child(10) { animation-delay: 540ms; }
@keyframes lxSparkIn { from { opacity: 0; transform: scaleY(.2); } }

/* Gallery lightbox */
.lx-lightbox{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(4,7,6,.92);backdrop-filter:blur(8px)}
.lx-lightbox.open{display:flex}
.lx-lightbox img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:8px;box-shadow:0 40px 120px rgba(0,0,0,.7);animation:lbIn .3s var(--ease)}
@keyframes lbIn{from{opacity:0;transform:scale(.95)}}
.lx-lightbox-close{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#e7ece9;font-size:20px;cursor:pointer;transition:all .2s ease,transform .15s var(--ease)}
.lx-lightbox-close:hover{border-color:rgba(79,70,229,.5);color:#4f46e5;transform:rotate(90deg)}
.lx-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#e7ece9;font-size:20px;cursor:pointer;transition:all .2s ease}
.lx-lightbox-nav:hover{background:rgba(79,70,229,.15);border-color:rgba(79,70,229,.4);color:#4f46e5}
.lx-lightbox-prev{left:20px}.lx-lightbox-next{right:20px}

/* Empty state polish */
.empty-state{text-align:center;padding:60px 20px;color:var(--muted)}
.empty-state i{font-size:48px;color:rgba(79,70,229,.4);margin-bottom:16px;display:block}
.empty-state h3{color:#f4f7f3;margin-bottom:8px}
.empty-state p{max-width:360px;margin:0 auto;line-height:1.6}
.empty-state .btn{margin-top:20px}

/* Section divider rhythm */
.lx-section + .lx-section::before { content: ""; display: block; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(79,70,229,.15), transparent); margin-bottom: 72px; }

/* LX steps connector line animate on reveal */
.lx-steps::before { content: ""; position: absolute; top: 52px; left: 8%; right: 8%; border-top: 1px dashed rgba(79,70,229,.3); transform: scaleX(0); transform-origin: left; animation: lxConnectorIn 1s var(--ease) forwards; }
@keyframes lxConnectorIn { to { transform: scaleX(1); } }
/* Theme gallery */
.lx-gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 30px; }
.lx-theme-card { position: relative; background: rgba(17,24,22,.7); border: 1px solid rgba(255,255,255,.09); border-radius: 18px; padding: 14px; text-align: left; cursor: pointer; transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); font: inherit; color: inherit; }
.lx-theme-card::after { content: "Click to preview"; position: absolute; top: 24px; left: 50%; transform: translate(-50%, 6px); background: rgba(11,15,14,.9); border: 1px solid rgba(79,70,229,.5); color: #c7d2fe; font-size: 11px; font-weight: 800; padding: 5px 11px; border-radius: 100px; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); z-index: 2; white-space: nowrap; }
.lx-theme-card:hover::after, .lx-theme-card:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.lx-theme-card:hover, .lx-theme-card:focus-visible { transform: translateY(-8px) scale(1.02); border-color: rgba(79,70,229,.5); box-shadow: 0 28px 56px rgba(79,70,229,.15), 0 12px 32px rgba(0,0,0,.35); }
.lx-theme-card .lx-tp { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.lx-theme-card:hover .lx-tp { transform: scale(1.03); box-shadow: 0 16px 40px rgba(79,70,229,.25); }
.lx-theme-name { display: flex; flex-direction: column; font-size: 14px; font-weight: 700; color: #f4f7f3; transition: color .25s var(--ease); }
.lx-theme-card:hover .lx-theme-name { color: #c7d2fe; }
.lx-theme-name em { font-style: normal; font-size: 11.5px; font-weight: 500; color: #7d8a82; }
/* Mini preview frame (browser chrome) */
.lx-tp { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid rgba(255,255,255,.12); position: relative; margin-bottom: 10px; }
.lx-tp i { position: absolute; display: block; }
.lx-tp-nav { top: 0; left: 0; right: 0; height: 14%; border-bottom: 1px solid rgba(255,255,255,.1); }
.lx-tp-hero { top: 22%; left: 10%; width: 46%; height: 12%; border-radius: 4px; }
.lx-tp-cards { top: 42%; width: 38%; height: 44%; border-radius: 6px; }
.lx-tp-cards:first-of-type { left: 8%; }
.lx-tp-cards:last-of-type { right: 8%; }
.lx-theme-name { display: flex; flex-direction: column; font-size: 14px; font-weight: 700; color: #f4f7f3; }
.lx-theme-name em { font-style: normal; font-size: 11.5px; font-weight: 500; color: #7d8a82; }
/* Midnight — deep navy + violet glow */
.lx-tp-midnight { background: linear-gradient(160deg, #0b1226, #131b3a); }
.lx-tp-midnight .lx-tp-nav { background: rgba(108,108,245,.12); }
.lx-tp-midnight .lx-tp-hero { background: linear-gradient(90deg, #6c6cf5, #22d3ee); box-shadow: 0 4px 18px rgba(108,108,245,.5); }
/* Midnight: avatar glow dot above the hero bar */
.lx-tp-midnight .lx-tp-hero::before { content: ""; position: absolute; left: 0; top: -20px; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg,#6c6cf5,#22d3ee); box-shadow: 0 0 12px rgba(108,108,245,.9); }
.lx-tp-midnight .lx-tp-cards { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
/* Midnight: browser dots + glowing CTA pill under the hero */
.lx-tp-midnight .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #6c6cf5; box-shadow: 9px 0 0 #22d3ee, 18px 0 0 rgba(108,108,245,.45); }
.lx-tp-midnight .lx-tp-hero::after { content: ""; position: absolute; left: 0; bottom: -13px; width: 32%; height: 7px; border-radius: 99px; background: rgba(34,211,238,.9); box-shadow: 0 0 10px rgba(34,211,238,.7); }
/* Minimal — clean white */
.lx-tp-minimal { background: #f1f5f9; }
.lx-tp-minimal .lx-tp-nav { background: #fff; border-bottom-color: #e2e8f0; }
.lx-tp-minimal .lx-tp-hero { background: #1e293b; border-radius: 8px; }
/* Minimal: thin ink rule under a compact block */
.lx-tp-minimal .lx-tp-hero { height: 9%; border-radius: 3px; }
.lx-tp-minimal .lx-tp-hero::after { content: ""; position: absolute; left: 0; bottom: -9px; width: 100%; height: 2px; background: #4f46e5; border-radius: 2px; }
.lx-tp-minimal .lx-tp-cards { background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 2px 8px rgba(15,23,42,.06); }
/* Minimal: dark browser dots + signature indigo badge chip on the first card */
.lx-tp-minimal .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #94a3b8; box-shadow: 9px 0 0 #cbd5e1, 18px 0 0 #e2e8f0; }
.lx-tp-minimal .lx-tp-cards:nth-child(3)::before { content: ""; position: absolute; left: 8px; top: 8px; width: 30%; height: 8px; border-radius: 99px; background: #eef2ff; border: 1px solid #c7d2fe; }
/* Terminal — near-black + green */
.lx-tp-terminal { background: #0a0f0a; }
.lx-tp-terminal .lx-tp-nav { background: #111a11; border-bottom-color: #166534; }
.lx-tp-terminal .lx-tp-hero { background: #4ade80; box-shadow: 0 0 14px rgba(74,222,128,.6); }
.lx-tp-terminal .lx-tp-cards { background: #0f1a0f; border: 1px solid #166534; }
/* Terminal: short prompt block + blinking cursor */
.lx-tp-terminal .lx-tp-hero { width: 30%; border-radius: 2px; }
.lx-tp-terminal .lx-tp-hero::after { content: ""; position: absolute; top: 0; right: -13px; width: 8px; height: 100%; background: #4ade80; animation: lxBlink 1.1s steps(1) infinite; }
/* Terminal: window traffic dots + mono prompt glyph on the hero */
.lx-tp-terminal .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #166534; box-shadow: 9px 0 0 #14532d, 18px 0 0 #16a34a; }
.lx-tp-terminal .lx-tp-hero::before { content: ">_"; position: absolute; left: 5px; top: 50%; transform: translateY(-54%); font-family: 'JetBrains Mono',monospace; font-size: 9px; font-weight: 700; color: #052e16; }
@keyframes lxBlink { 50% { opacity: 0; } }
/* Creative — warm gradient */
.lx-tp-creative { background: linear-gradient(150deg, #fdf2f8, #ede9fe); }
.lx-tp-creative .lx-tp-nav { background: rgba(255,255,255,.6); border-bottom-color: rgba(139,92,246,.25); }
.lx-tp-creative .lx-tp-hero { background: linear-gradient(90deg, #f472b6, #8b5cf6); border-radius: 999px; }
.lx-tp-creative .lx-tp-cards { background: rgba(255,255,255,.75); border: 1px solid rgba(139,92,246,.3); }
/* Creative: playful blob badge */
.lx-tp-creative .lx-tp-hero { border-radius: 999px 999px 999px 12px; }
.lx-tp-creative .lx-tp-hero::after { content: ""; position: absolute; right: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: #fbbf24; border: 2px solid #fff; }
/* Creative: browser dots + giant emoji project art like the real theme */
.lx-tp-creative .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #f472b6; box-shadow: 9px 0 0 #8b5cf6, 18px 0 0 #22d3ee; }
.lx-tp-creative .lx-tp-cards:nth-child(3)::before { content: "🎨"; position: absolute; left: 50%; top: 8px; transform: translateX(-50%); font-size: 26px; line-height: 1; }
/* Aurora — frosted pastel */
.lx-tp-aurora { background: linear-gradient(150deg, #e0e7ff, #fce7f3, #ccfbf1); }
.lx-tp-aurora .lx-tp-nav { background: rgba(255,255,255,.5); backdrop-filter: blur(4px); border-bottom-color: rgba(99,102,241,.2); }
.lx-tp-aurora .lx-tp-hero { background: linear-gradient(90deg, #a5b4fc, #f9a8d4); border-radius: 10px; }
.lx-tp-aurora .lx-tp-cards { background: rgba(255,255,255,.6); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.8); }
/* Aurora: centered glass bar, symmetric */
.lx-tp-aurora .lx-tp-hero { left: 20%; width: 60%; text-align: center; }
/* Aurora: frosted dots + violet/cyan ambient orbs like the real theme */
.lx-tp-aurora .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #a78bfa; box-shadow: 9px 0 0 #67e8f9, 18px 0 0 #f9a8d4; }
.lx-tp-aurora::before { content: ""; position: absolute; left: -14px; top: -14px; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, rgba(167,139,250,.55), transparent 70%); }
.lx-tp-aurora::after { content: ""; position: absolute; right: -16px; bottom: -16px; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle, rgba(103,232,249,.5), transparent 70%); }
/* Editorial — paper serif */
.lx-tp-editorial { background: #faf7f2; }
.lx-tp-editorial .lx-tp-nav { background: transparent; border-bottom-color: #d6cfc4; }
.lx-tp-editorial .lx-tp-hero { background: #292524; height: 8%; border-radius: 2px; }
/* Editorial: serif masthead instead of a bar */
.lx-tp-editorial .lx-tp-hero { background: none; height: auto; top: 18%; font-family: Georgia,'Times New Roman',serif; font-style: italic; }
.lx-tp-editorial .lx-tp-hero::after { content: "Ag"; font-size: 30px; line-height: 1; color: #1c1917; }
.lx-tp-editorial .lx-tp-cards { background: #fff; border: 1px solid #e7e0d5; }
.lx-tp-editorial .lx-tp-cards::after { content: ""; position: absolute; left: 0; right: 0; top: 20%; height: 1px; background: #e7e0d5; }
/* Editorial: thick press rule under nav + signature black spine on cards */
.lx-tp-editorial .lx-tp-nav { border-bottom: 3px solid #1c1917; }
.lx-tp-editorial .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #b45309; box-shadow: 9px 0 0 #d6cfc4, 18px 0 0 #e7e0d5; }
.lx-tp-editorial .lx-tp-cards:nth-child(3)::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: #1c1917; }
/* Brutalist — bold blocks */
.lx-tp-brutalist { background: #fef08a; }
.lx-tp-brutalist .lx-tp-nav { background: #000; border-bottom-color: #000; }
/* Brutalist — giant ink headline + lime button like the real theme */
.lx-tp-brutalist .lx-tp-hero { background: none; border: none; box-shadow: none; height: auto; top: 20%; }
.lx-tp-brutalist .lx-tp-hero::after { content: "HEY!"; font-family: 'Space Grotesk',sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1; color: #000; background: linear-gradient(transparent 62%, #a3e635 62%); }
.lx-tp-brutalist .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 0; background: #000; box-shadow: 9px 0 0 #7c3aed, 18px 0 0 #a3e635; }
.lx-tp-brutalist .lx-tp-cards { background: #fff; border: 2px solid #000; box-shadow: 4px 4px 0 #000; }
/* Afterglow — sunset dusk */
.lx-tp-afterglow { background: linear-gradient(160deg, #2b1055, #7597de); }
.lx-tp-afterglow .lx-tp-nav { background: rgba(255,255,255,.08); border-bottom-color: rgba(244,114,182,.4); }
.lx-tp-afterglow .lx-tp-hero { background: linear-gradient(90deg, #f472b6, #fbbf24); border-radius: 999px; }
.lx-tp-afterglow .lx-tp-cards { background: rgba(0,0,0,.3); border: 1px solid rgba(244,114,182,.5); }
/* Afterglow: setting-sun dot over the pill */
.lx-tp-afterglow .lx-tp-hero::before { content: ""; position: absolute; right: 6%; top: -22px; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fde68a, #f97316); box-shadow: 0 0 14px rgba(251,146,60,.9); }
/* Afterglow: golden horizon glow + dusk stars like the real theme */
.lx-tp-afterglow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: radial-gradient(120% 100% at 50% 115%, rgba(255,107,107,.5), transparent 65%); }
.lx-tp-afterglow .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: #ffd166; box-shadow: 10px -3px 0 rgba(255,209,102,.8), 20px 2px 0 rgba(255,209,102,.5); }
/* Ultraviolet — violet haze */
.lx-tp-ultraviolet { background: linear-gradient(150deg, #1e1b4b, #4c1d95); }
.lx-tp-ultraviolet .lx-tp-nav { background: rgba(168,85,247,.15); border-bottom-color: rgba(168,85,247,.4); }
.lx-tp-ultraviolet .lx-tp-hero { background: linear-gradient(90deg, #c084fc, #e879f9); box-shadow: 0 0 16px rgba(192,132,252,.6); border-radius: 2px; }
.lx-tp-ultraviolet .lx-tp-cards { background: rgba(30,27,75,.8); border: 1px solid rgba(168,85,247,.5); }
/* Ultraviolet: full-bleed signal beam */
.lx-tp-ultraviolet .lx-tp-hero { left: 0; width: 100%; height: 5%; top: 30%; border-radius: 0; }
/* Ultraviolet: magenta haze bloom + mono-glow dots like the real theme */
.lx-tp-ultraviolet::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -20px; height: 70px; background: radial-gradient(50% 100% at 50% 100%, rgba(181,23,158,.65), transparent 70%); }
.lx-tp-ultraviolet .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #e0aaff; box-shadow: 9px 0 0 #ff5da2, 18px 0 0 #4cc9f0; }
/* Tidepool — deep teal abyss */
.lx-tp-tidepool { background: linear-gradient(170deg, #042f2e, #083344); }
.lx-tp-tidepool .lx-tp-nav { background: rgba(125,211,252,.08); border-bottom-color: rgba(125,211,252,.3); }
.lx-tp-tidepool .lx-tp-hero { background: linear-gradient(90deg, #80ffdb, #2ec4b6); box-shadow: 0 0 16px rgba(128,255,219,.5); }
/* Tidepool: glowing ring buoy */
.lx-tp-tidepool .lx-tp-hero::after { content: ""; position: absolute; right: 4%; top: -24px; width: 22px; height: 22px; border-radius: 50%; border: 3px solid #80ffdb; box-shadow: 0 0 12px rgba(128,255,219,.8); }
/* Tidepool: abyss glow + rising bubbles + staggered zigzag cards */
.lx-tp-tidepool::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48%; background: radial-gradient(120% 100% at 50% 115%, rgba(46,196,182,.45), transparent 65%); }
.lx-tp-tidepool .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: rgba(128,255,219,.9); box-shadow: 10px -3px 0 rgba(128,255,219,.6), 20px 1px 0 rgba(128,255,219,.35); }
.lx-tp-tidepool .lx-tp-cards:nth-child(4) { margin-top: 12px; }
.lx-tp-tidepool .lx-tp-cards { background: rgba(8,51,68,.8); border: 1px solid rgba(125,211,252,.4); }
/* Ultra Code — dark crimson sidebar */
.lx-tp-ultracode { background: hsl(242, 19%, 5%); }
.lx-tp-ultracode .lx-tp-nav { background: hsl(242, 14%, 10%); border-bottom-color: rgba(222,10,77,.3); }
.lx-tp-ultracode .lx-tp-hero { background: hsl(342, 92%, 46%); box-shadow: 0 0 16px rgba(222,10,77,.6); }
.lx-tp-ultracode .lx-tp-cards { background: hsl(242, 14%, 10%); border: 1px solid rgba(222,10,77,.3); }
.lx-tp-ultracode .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: hsl(342, 92%, 46%); box-shadow: 9px 0 0 rgba(255,255,255,.4), 18px 0 0 rgba(222,10,77,.4); }
/* DevBlue / Marlon — clean royal blue & dark navy */
.lx-tp-devblue, .lx-tp-marlon { background: #ffffff; }
.lx-tp-devblue .lx-tp-nav, .lx-tp-marlon .lx-tp-nav { background: #ffffff; border-bottom-color: rgba(146, 161, 176, .3); }
.lx-tp-devblue .lx-tp-hero, .lx-tp-marlon .lx-tp-hero { background: #4070F4; box-shadow: 0 4px 16px rgba(64, 112, 244, .35); }
.lx-tp-devblue .lx-tp-cards, .lx-tp-marlon .lx-tp-cards { background: #ffffff; border: 1px solid rgba(14, 36, 49, .12); box-shadow: 0 4px 15px rgba(14, 36, 49, .08); }
.lx-tp-devblue .lx-tp-nav::before, .lx-tp-marlon .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #4070F4; box-shadow: 9px 0 0 #0E2431, 18px 0 0 rgba(64, 112, 244, .4); }
/* Cube / Muzammal — charcoal & mint green 3D swiper */
.lx-tp-cube, .lx-tp-cubegreen, .lx-tp-muzammal { background: #343a40; }
.lx-tp-cube .lx-tp-nav, .lx-tp-cubegreen .lx-tp-nav, .lx-tp-muzammal .lx-tp-nav { background: #212529; border-bottom-color: rgba(255, 255, 255, .1); }
.lx-tp-cube .lx-tp-hero, .lx-tp-cubegreen .lx-tp-hero, .lx-tp-muzammal .lx-tp-hero { background: #80ed99; box-shadow: 0 4px 16px rgba(128, 237, 153, .35); }
.lx-tp-cube .lx-tp-cards, .lx-tp-cubegreen .lx-tp-cards, .lx-tp-muzammal .lx-tp-cards { background: #212529; border: 1px solid rgba(128, 237, 153, .25); box-shadow: 0 4px 15px rgba(0, 0, 0, .4); }
.lx-tp-cube .lx-tp-nav::before, .lx-tp-cubegreen .lx-tp-nav::before, .lx-tp-muzammal .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #80ed99; box-shadow: 9px 0 0 #ffffff, 18px 0 0 rgba(128, 237, 153, .4); }
/* Dark Pro — charcoal & yellow accent */
.lx-tp-darkpro { background: linear-gradient(160deg, #0f1115, #171a21); }
.lx-tp-darkpro .lx-tp-nav { background: #14171d; border-bottom-color: rgba(250,204,21,.25); }
.lx-tp-darkpro .lx-tp-hero { background: #facc15; box-shadow: 0 0 14px rgba(250,204,21,.45); }
.lx-tp-darkpro .lx-tp-cards { background: #1b1f27; border: 1px solid rgba(250,204,21,.22); }
.lx-tp-darkpro .lx-tp-hero::after { content: ""; position: absolute; left: 0; bottom: -11px; width: 30%; height: 6px; border-radius: 99px; background: #facc15; box-shadow: 0 0 10px rgba(250,204,21,.6); }
.lx-tp-darkpro .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #facc15; box-shadow: 9px 0 0 rgba(255,255,255,.5), 18px 0 0 rgba(250,204,21,.4); }
/* Fullpage Scroll — light pages, red accent */
.lx-tp-fullpage { background: #fff8f6; }
.lx-tp-fullpage .lx-tp-nav { background: #ffffff; border-bottom-color: rgba(255,99,99,.25); }
.lx-tp-fullpage .lx-tp-hero { background: linear-gradient(90deg, #ff6363, #ff8a5c); border-radius: 8px; box-shadow: 0 8px 18px rgba(255,99,99,.3); }
.lx-tp-fullpage .lx-tp-cards { background: #fff; border: 1px solid rgba(255,99,99,.18); box-shadow: 0 6px 16px rgba(28,25,23,.06); }
.lx-tp-fullpage .lx-tp-hero::after { content: "↓"; position: absolute; right: 8px; bottom: 3px; font-size: 10px; line-height: 1; color: #fff; }
.lx-tp-fullpage .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #ff6363; box-shadow: 9px 0 0 rgba(255,99,99,.5), 18px 0 0 rgba(255,99,99,.25); }
/* Modern CV — navy & violet */
.lx-tp-moderncv { background: linear-gradient(150deg, #020617, #1e293b); }
.lx-tp-moderncv .lx-tp-nav { background: rgba(15,23,42,.95); border-bottom-color: rgba(167,139,250,.35); }
.lx-tp-moderncv .lx-tp-hero { background: linear-gradient(90deg, #c084fc, #a78bfa); box-shadow: 0 0 16px rgba(192,132,252,.5); }
.lx-tp-moderncv .lx-tp-cards { background: rgba(15,23,42,.8); border: 1px solid rgba(167,139,250,.35); }
.lx-tp-moderncv .lx-tp-cards:nth-child(3)::before { content: ""; position: absolute; left: 8px; top: 9px; width: 26%; height: 6px; border-radius: 99px; background: #fbbf24; }
.lx-tp-moderncv .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #c084fc; box-shadow: 9px 0 0 #fbbf24, 18px 0 0 rgba(167,139,250,.5); }
/* Gallery — warm masonry */
.lx-tp-gallery { background: #f4f1ea; }
.lx-tp-gallery .lx-tp-nav { background: #fff; border-bottom-color: #e6e0d4; }
.lx-tp-gallery .lx-tp-hero { background: linear-gradient(120deg, #d9c9b0, #a89a86); border-radius: 3px; }
.lx-tp-gallery .lx-tp-cards { background: #e8e2d6; border: 1px solid #ded6c8; }
.lx-tp-gallery .lx-tp-cards:nth-child(4) { top: 36%; height: 52%; }
.lx-tp-gallery .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #a89a86; box-shadow: 9px 0 0 #d9c9b0, 18px 0 0 rgba(168,154,134,.5); }
/* Studio — light editorial covers */
.lx-tp-studio { background: #fbf7f0; }
.lx-tp-studio .lx-tp-nav { background: rgba(255,255,255,.7); border-bottom-color: #eadfd0; }
.lx-tp-studio .lx-tp-hero { background: #1c1917; }
.lx-tp-studio .lx-tp-hero::after { content: "Aa"; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); font-family: Georgia, serif; font-style: italic; font-size: 11px; line-height: 1; color: #fbf7f0; }
.lx-tp-studio .lx-tp-cards { background: #fff; border: 1px solid #eadfd0; box-shadow: 0 6px 16px rgba(60,45,20,.08); }
.lx-tp-studio .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #1c1917; box-shadow: 9px 0 0 #d6c7b4, 18px 0 0 #eadfd0; }
/* Noir — dark full-bleed */
.lx-tp-noir { background: #0a0a0a; }
.lx-tp-noir .lx-tp-nav { background: #000; border-bottom-color: rgba(255,255,255,.15); }
.lx-tp-noir .lx-tp-hero { background: linear-gradient(90deg, #fff, #a3a3a3); }
.lx-tp-noir .lx-tp-cards { background: #141414; border: 1px solid rgba(255,255,255,.12); }
.lx-tp-noir .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 9px 0 0 rgba(255,255,255,.5), 18px 0 0 rgba(255,255,255,.25); }
/* Museum — framed walls */
.lx-tp-museum { background: #efe9dc; }
.lx-tp-museum .lx-tp-nav { background: #fff; border-bottom-color: #d8cfbd; }
.lx-tp-museum .lx-tp-hero { background: #2c2416; border: 5px solid #fff; box-shadow: 0 8px 18px rgba(60,45,20,.25); }
.lx-tp-museum .lx-tp-cards { background: #fff; border: 5px solid #fff; box-shadow: 0 8px 18px rgba(60,45,20,.18); }
.lx-tp-museum .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #2c2416; box-shadow: 9px 0 0 #d8cfbd, 18px 0 0 #efe9dc; }
/* Catalog — print art-book */
.lx-tp-catalog { background: #faf9f7; }
.lx-tp-catalog .lx-tp-nav { background: #fff; border-bottom: 2px solid #111; }
.lx-tp-catalog .lx-tp-hero { background: none; height: auto; top: 19%; font-family: Georgia, serif; font-style: italic; }
.lx-tp-catalog .lx-tp-hero::after { content: "Plates"; font-size: 11px; letter-spacing: .5px; color: #111; }
.lx-tp-catalog .lx-tp-cards { background: #fff; border: 1px solid #e7e3db; }
.lx-tp-catalog .lx-tp-cards::after { content: ""; position: absolute; left: 0; right: 0; top: 24%; height: 1px; background: #e7e3db; }
.lx-tp-catalog .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #111; box-shadow: 9px 0 0 #c7c1b7, 18px 0 0 #e7e3db; }
/* Bloom — soft pastel */
.lx-tp-bloom { background: linear-gradient(140deg, #fff7fb, #f7f3ff 55%, #f0f9ff); }
.lx-tp-bloom .lx-tp-nav { background: rgba(255,255,255,.7); border-bottom-color: rgba(176,124,198,.2); }
.lx-tp-bloom .lx-tp-hero { background: linear-gradient(90deg, #f9a8d4, #c4b5fd); border-radius: 999px; }
.lx-tp-bloom .lx-tp-cards { background: rgba(255,255,255,.8); border: 1px solid rgba(196,181,253,.4); box-shadow: 0 6px 16px rgba(176,124,198,.12); }
.lx-tp-bloom .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #f9a8d4; box-shadow: 9px 0 0 #c4b5fd, 18px 0 0 rgba(249,168,212,.45); }
/* Motion Flow — cream & orange */
.lx-tp-motion { background: #f6f5f2; }
.lx-tp-motion .lx-tp-nav { background: rgba(255,255,255,.75); border-bottom-color: rgba(255,77,28,.25); }
.lx-tp-motion .lx-tp-hero { background: linear-gradient(90deg, #ff4d1c, #ff8a5c); border-radius: 999px; }
.lx-tp-motion .lx-tp-cards { background: #fff; border: 1px solid rgba(28,25,23,.1); box-shadow: 0 8px 20px rgba(28,25,23,.08); }
.lx-tp-motion .lx-tp-cards:nth-child(4) { top: 36%; height: 52%; }
.lx-tp-motion .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #ff4d1c; box-shadow: 9px 0 0 #1c1917, 18px 0 0 rgba(255,77,28,.4); }
/* Nova Galaxy — deep celestial navy + glowing teal particles */
.lx-tp-nova { background: linear-gradient(160deg, #070d18, #0f1c30); }
.lx-tp-nova .lx-tp-nav { background: rgba(45,212,191,.08); border-bottom-color: rgba(45,212,191,.25); }
.lx-tp-nova .lx-tp-hero { background: linear-gradient(90deg, #2dd4bf, #38bdf8); box-shadow: 0 0 16px rgba(45,212,191,.6); border-radius: 4px; }
.lx-tp-nova .lx-tp-hero::after { content: ""; position: absolute; left: 0; bottom: -12px; width: 34%; height: 6px; border-radius: 99px; background: rgba(56,189,248,.8); box-shadow: 0 0 8px rgba(56,189,248,.5); }
.lx-tp-nova .lx-tp-cards { background: rgba(15,28,48,.85); border: 1px solid rgba(45,212,191,.25); box-shadow: 0 4px 15px rgba(0,0,0,.4); }
.lx-tp-nova .lx-tp-cards:nth-child(3)::before { content: "✦"; position: absolute; right: 8px; top: 6px; font-size: 11px; color: #2dd4bf; }
.lx-tp-nova .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #2dd4bf; box-shadow: 9px 0 0 #38bdf8, 18px 0 0 rgba(45,212,191,.4); }

/* Codeflow — developer dark navy + cyan typewriter */
.lx-tp-codeflow { background: linear-gradient(160deg, #070c18, #0d1527); }
.lx-tp-codeflow .lx-tp-nav { background: #0d1527; border-bottom-color: rgba(59,130,246,.3); }
.lx-tp-codeflow .lx-tp-hero { background: linear-gradient(90deg, #38bdf8, #60a5fa); box-shadow: 0 0 14px rgba(56,189,248,.5); border-radius: 3px; }
.lx-tp-codeflow .lx-tp-hero::after { content: "</>"; position: absolute; right: -28px; top: 50%; transform: translateY(-50%); font-family: monospace; font-size: 9px; font-weight: 700; color: #38bdf8; }
.lx-tp-codeflow .lx-tp-cards { background: rgba(13,21,39,.9); border: 1px solid rgba(56,189,248,.25); }
.lx-tp-codeflow .lx-tp-cards:nth-child(3)::before { content: ""; position: absolute; left: 6px; top: 8px; width: 4px; height: 70%; background: #38bdf8; border-radius: 2px; }
.lx-tp-codeflow .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #38bdf8; box-shadow: 9px 0 0 #818cf8, 18px 0 0 rgba(56,189,248,.35); }

/* Neon Wave — pitch-black + emerald cyber matrix */
.lx-tp-wave { background: #000000; }
.lx-tp-wave .lx-tp-nav { background: #0a0e0a; border-bottom-color: rgba(46,230,166,.35); }
.lx-tp-wave .lx-tp-hero { background: #2ee6a6; box-shadow: 0 0 18px rgba(46,230,166,.75); border-radius: 99px; }
.lx-tp-wave .lx-tp-hero::after { content: "〰"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); font-size: 11px; color: #2ee6a6; text-shadow: 0 0 8px #2ee6a6; }
.lx-tp-wave .lx-tp-cards { background: #050a06; border: 1px solid rgba(46,230,166,.3); box-shadow: 0 0 12px rgba(46,230,166,.1); }
.lx-tp-wave .lx-tp-cards:nth-child(3)::before { content: ""; position: absolute; left: 8px; top: 8px; width: 24%; height: 6px; border-radius: 99px; background: #2ee6a6; }
.lx-tp-wave .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #2ee6a6; box-shadow: 9px 0 0 #00e5ff, 18px 0 0 rgba(46,230,166,.4); }

/* AI Assistant — ChatGPT dark charcoal + OpenAI green */
.lx-tp-assistant { background: #18181b; }
.lx-tp-assistant .lx-tp-nav { background: #212124; border-bottom-color: rgba(255,255,255,.08); }
.lx-tp-assistant .lx-tp-hero { background: #10a37f; box-shadow: 0 2px 12px rgba(16,163,127,.45); border-radius: 99px; }
.lx-tp-assistant .lx-tp-hero::after { content: "💬"; position: absolute; right: -18px; top: 50%; transform: translateY(-50%); font-size: 9px; }
.lx-tp-assistant .lx-tp-cards { background: #27272a; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; }
.lx-tp-assistant .lx-tp-cards:nth-child(3)::before { content: ""; position: absolute; left: 8px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: #10a37f; }
.lx-tp-assistant .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #10a37f; box-shadow: 9px 0 0 rgba(255,255,255,.4), 18px 0 0 rgba(16,163,127,.4); }

/* Dev Console — terminal black + bright green prompt */
.lx-tp-console { background: #090b10; }
.lx-tp-console .lx-tp-nav { background: #12151d; border-bottom-color: rgba(255,255,255,.1); }
.lx-tp-console .lx-tp-hero { background: none; width: 52%; height: auto; top: 20%; }
.lx-tp-console .lx-tp-hero::after { content: "$ dev run"; font-family: 'JetBrains Mono',monospace; font-size: 9.5px; font-weight: 700; color: #00ff75; text-shadow: 0 0 8px rgba(0,255,117,.6); }
.lx-tp-console .lx-tp-cards { background: #0f121a; border: 1px solid rgba(0,255,117,.25); box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.lx-tp-console .lx-tp-cards:nth-child(3)::before { content: ">_"; position: absolute; left: 6px; top: 6px; font-family: monospace; font-size: 8px; color: #00ff75; }
.lx-tp-console .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #ff5f56; box-shadow: 9px 0 0 #ffbd2e, 18px 0 0 #27c93f; }

/* Snowcard — clean white + bold neo-brutalist yellow */
.lx-tp-snowcard { background: #ffffff; background-image: radial-gradient(#d4d4d8 1px, transparent 1px); background-size: 8px 8px; }
.lx-tp-snowcard .lx-tp-nav { background: #ffffff; border-bottom: 2px solid #000000; }
.lx-tp-snowcard .lx-tp-hero { background: #ffd000; border: 2px solid #000; box-shadow: 3px 3px 0 #000; border-radius: 4px; }
.lx-tp-snowcard .lx-tp-cards { background: #ffffff; border: 2px solid #000; box-shadow: 3px 3px 0 #000; border-radius: 4px; }
.lx-tp-snowcard .lx-tp-cards:nth-child(3)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: #ffd000; }
.lx-tp-snowcard .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 0; background: #ffd000; box-shadow: 9px 0 0 #000000, 18px 0 0 #ffd000; }

/* Parchment Scroll — antique warm paper + wax seal */
.lx-tp-parchment { background: radial-gradient(circle at 50% 30%, #f7ecd2, #e8d5a8); border-color: #8c6d46; }
.lx-tp-parchment .lx-tp-nav { background: rgba(232,213,168,.6); border-bottom: 2px solid #6b4423; }
.lx-tp-parchment .lx-tp-hero { background: #3a2614; border-radius: 2px; box-shadow: 0 2px 6px rgba(58,38,20,.2); }
.lx-tp-parchment .lx-tp-hero::after { content: "⚜"; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); font-size: 10px; color: #8b2e1f; }
.lx-tp-parchment .lx-tp-cards { background: rgba(255,255,255,.6); border: 1px solid #8c6d46; box-shadow: 0 2px 8px rgba(58,38,20,.1); }
.lx-tp-parchment .lx-tp-cards:nth-child(3)::before { content: ""; position: absolute; left: 6px; top: 6px; width: 20%; height: 4px; background: #8b2e1f; }
.lx-tp-parchment .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #8b2e1f; box-shadow: 9px 0 0 #6b4423, 18px 0 0 #d4af37; }

/* Cloud Blue — sky blue gradient + floating cards */
.lx-tp-cloud { background: linear-gradient(180deg, #bfe3ff 0%, #eaf6ff 100%); }
.lx-tp-cloud .lx-tp-nav { background: rgba(255,255,255,.75); border-bottom-color: rgba(63,107,246,.2); backdrop-filter: blur(4px); }
.lx-tp-cloud .lx-tp-hero { background: linear-gradient(90deg, #3f6bf6, #2563eb); border-radius: 999px; box-shadow: 0 4px 14px rgba(37,99,235,.35); }
.lx-tp-cloud .lx-tp-hero::after { content: "☁"; position: absolute; right: -18px; top: 50%; transform: translateY(-50%); font-size: 11px; color: #fff; text-shadow: 0 1px 3px rgba(37,99,235,.5); }
.lx-tp-cloud .lx-tp-cards { background: rgba(255,255,255,.9); border: 1px solid #dbeafe; border-radius: 8px; box-shadow: 0 4px 12px rgba(37,99,235,.08); }
.lx-tp-cloud .lx-tp-cards:nth-child(3)::before { content: ""; position: absolute; left: 8px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: #93c5fd; }
.lx-tp-cloud .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #3f6bf6; box-shadow: 9px 0 0 #60a5fa, 18px 0 0 #93c5fd; }

.lx-tp-github { background: #0d1117; }
.lx-tp-github .lx-tp-nav { background: #161b22; border-bottom-color: #30363d; }
.lx-tp-github .lx-tp-hero { background: #161b22; border: 1px solid #30363d; border-radius: 6px; }
.lx-tp-github .lx-tp-cards { background: #161b22; border: 1px solid #30363d; border-radius: 6px; }
.lx-tp-github .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #58a6ff; box-shadow: 10px 0 0 #3fb950; }

.lx-tp-particle { background: #121922; }
.lx-tp-particle .lx-tp-nav { background: rgba(16,24,39,.94); border-bottom-color: rgba(111,102,255,.28); }
.lx-tp-particle .lx-tp-hero { background: linear-gradient(90deg, #6c63ff, #22c9ff); border-radius: 8px; box-shadow: 0 4px 14px rgba(108,99,255,.35); }
.lx-tp-particle .lx-tp-cards { background: rgba(21,29,44,.88); border: 1px solid rgba(108,99,255,.25); border-radius: 8px; }
.lx-tp-particle .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #22d3ee; box-shadow: 10px 0 0 #ff3d6e; }

.lx-tp-panels { background: #f5f6fb; }
.lx-tp-panels .lx-tp-nav { background: linear-gradient(135deg, #2a1d5e, #6b4bb8); border-bottom-color: transparent; }
.lx-tp-panels .lx-tp-hero { background: #ffffff; border: 1px solid #e6e8f0; border-radius: 8px; box-shadow: 0 4px 12px rgba(31,30,80,.12); }
.lx-tp-panels .lx-tp-cards { background: #ffffff; border: 1px solid #e6e8f0; border-radius: 8px; }
.lx-tp-panels .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #2f6bff; box-shadow: 10px 0 0 #a855f7; }

.lx-tp-monolith { background: #f6f5f0; }
.lx-tp-monolith .lx-tp-nav { background: #fffefa; border-bottom: 2px solid #020202; }
.lx-tp-monolith .lx-tp-hero { background: #020202; border-radius: 2px; }
.lx-tp-monolith .lx-tp-cards { background: #fffefa; border: 2px solid #020202; box-shadow: 2px 2px 0 #020202; border-radius: 2px; }
.lx-tp-monolith .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background: #020202; }




/* Theme lightbox */
.lx-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.lx-modal.open { display: flex; }
.lx-modal-backdrop { position: absolute; inset: 0; background: rgba(4,7,6,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lx-modal-panel { position: relative; width: min(1200px, 96vw); max-height: 94vh; overflow: hidden; display: flex; flex-direction: column; background: rgba(13,19,18,.98); border: 1px solid rgba(79,70,229,.35); border-radius: 20px; box-shadow: 0 40px 140px rgba(0,0,0,.75); animation: modalIn .3s ease; }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.lx-modal-close { position: absolute; top: 12px; right: 14px; z-index: 10; width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #e7ece9; font-size: 15px; cursor: pointer; transition: all .2s ease, transform .15s var(--ease); }
.lx-modal-close:hover { border-color: rgba(79,70,229,.5); color: #4f46e5; transform: rotate(90deg); }
.lx-modal-frame { flex: 1; display: flex; flex-direction: column; min-height: 0; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); margin: 14px 14px 0; background: #090d16; }
.lx-modal-viewport { position: relative; flex: 1; min-height: 480px; height: 65vh; width: 100%; background: #080c14; overflow: hidden; transition: max-width .3s ease, margin .3s ease; margin: 0 auto; box-shadow: 0 0 40px rgba(0,0,0,.5); }
.lx-modal-preview-iframe { width: 100%; height: 100%; border: 0; display: block; background: #080c14; }
.lx-modal-device-toggles { display: flex; gap: 4px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 2px; }
.device-toggle-btn { background: none; border: 0; color: #94a3b8; font-size: 12px; padding: 5px 8px; border-radius: 6px; cursor: pointer; transition: all .2s ease; }
.device-toggle-btn:hover { color: #fff; background: rgba(255,255,255,.08); }
.device-toggle-btn.active { color: #fff; background: #4f46e5; box-shadow: 0 2px 8px rgba(79,70,229,.4); }
.lx-win-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 48px; }
.lx-win-act-btn { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #e2e8f0; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .2s ease; text-decoration: none; }
.lx-win-act-btn:hover { background: rgba(79,70,229,.25); border-color: rgba(79,70,229,.5); color: #fff; transform: translateY(-1px); }
.lx-win-act-btn.primary { background: linear-gradient(135deg, #4f46e5, #7c3aed); border-color: #6366f1; color: #fff; box-shadow: 0 4px 14px rgba(79,70,229,.35); }
.lx-win-act-btn.primary:hover { box-shadow: 0 6px 20px rgba(79,70,229,.5); }
.lx-modal-body { min-height: 380px; }
.lx-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.08); flex-shrink: 0; max-height: 140px; overflow-y: auto; }
.lx-modal-name { font-family: 'Space Grotesk',sans-serif; font-size: 18px; font-weight: 700; color: #f4f7f3; }
/* Lightbox: per-theme body retint */
.lx-modal-body[data-theme="midnight"] { background: linear-gradient(160deg, #0b1226, #131b3a); }
.lx-modal-body[data-theme="minimal"] { background: #f1f5f9; }
.lx-modal-body[data-theme="minimal"] .preview-name { color: #1e293b; }
.lx-modal-body[data-theme="minimal"] .preview-title { color: #4f46e5; }
.lx-modal-body[data-theme="minimal"] .preview-desc { color: #64748b; }
.lx-modal-body[data-theme="minimal"] .lx-win-line { color: #1e293b; background: #fff; border-color: #e2e8f0; }
.lx-modal-body[data-theme="minimal"] .lx-prompt { color: #4f46e5; }
.lx-modal-body[data-theme="minimal"] .skill-tag { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; transition: border-color .25s var(--ease), background .25s var(--ease), transform .15s var(--ease); }
.lx-modal-body[data-theme="minimal"] .skill-tag:hover { border-color: #6c6cf5; background: #e0e7ff; transform: scale(1.05); }
.lx-modal-body[data-theme="terminal"] { background: #0a0f0a; }
.lx-modal-body[data-theme="creative"] { background: linear-gradient(150deg, #fdf2f8, #ede9fe); }
.lx-modal-body[data-theme="creative"] .preview-name { color: #1e293b; }
.lx-modal-body[data-theme="creative"] .preview-title { color: #a21caf; }
.lx-modal-body[data-theme="creative"] .preview-desc { color: #64748b; }
.lx-modal-body[data-theme="creative"] .lx-win-line { color: #1e293b; background: #fff; border-color: #e9d5ff; }
.lx-modal-body[data-theme="creative"] .lx-prompt { color: #a21caf; }
.lx-modal-body[data-theme="creative"] .skill-tag { background: #fff; border-color: #e9d5ff; color: #a21caf; transition: border-color .25s var(--ease), background .25s var(--ease), transform .15s var(--ease); }
.lx-modal-body[data-theme="creative"] .skill-tag:hover { border-color: #f472b6; background: #fdf2f8; transform: scale(1.05); }
.lx-modal-body[data-theme="aurora"] { background: linear-gradient(150deg, #e0e7ff, #fce7f3, #ccfbf1); }
.lx-modal-body[data-theme="aurora"] .preview-name { color: #1e1b4b; }
.lx-modal-body[data-theme="aurora"] .preview-title { color: #6d28d9; }
.lx-modal-body[data-theme="aurora"] .preview-desc { color: #475569; }
.lx-modal-body[data-theme="aurora"] .lx-win-line { color: #1e1b4b; background: rgba(255,255,255,.7); border-color: #c7d2fe; }
.lx-modal-body[data-theme="aurora"] .lx-prompt { color: #6d28d9; }
.lx-modal-body[data-theme="aurora"] .skill-tag { background: rgba(255,255,255,.7); border-color: #c7d2fe; color: #6d28d9; transition: border-color .25s var(--ease), background .25s var(--ease), transform .15s var(--ease); }
.lx-modal-body[data-theme="aurora"] .skill-tag:hover { border-color: #6d28d9; background: rgba(109,40,217,.1); transform: scale(1.05); }
.lx-modal-body[data-theme="editorial"] { background: #faf7f2; }
.lx-modal-body[data-theme="editorial"] .preview-name { color: #292524; }
.lx-modal-body[data-theme="editorial"] .preview-title { color: #78716c; }
.lx-modal-body[data-theme="editorial"] .preview-desc { color: #57534e; }
.lx-modal-body[data-theme="editorial"] .lx-win-line { color: #292524; background: #fff; border-color: #e7e0d5; }
.lx-modal-body[data-theme="editorial"] .lx-prompt { color: #78716c; }
.lx-modal-body[data-theme="editorial"] .skill-tag { background: #fff; border-color: #e7e0d5; color: #57534e; transition: border-color .25s var(--ease), background .25s var(--ease), transform .15s var(--ease); }
.lx-modal-body[data-theme="editorial"] .skill-tag:hover { border-color: #78716c; background: #faf7f2; transform: scale(1.05); }
.lx-modal-body[data-theme="brutalist"] { background: #fef08a; }
.lx-modal-body[data-theme="brutalist"] .preview-name { color: #000; }
.lx-modal-body[data-theme="brutalist"] .preview-title { color: #000; }
.lx-modal-body[data-theme="brutalist"] .preview-desc { color: #1c1917; }
.lx-modal-body[data-theme="brutalist"] .lx-win-line { color: #000; background: #fff; border-color: #000; }
.lx-modal-body[data-theme="brutalist"] .lx-prompt { color: #000; }
.lx-modal-body[data-theme="brutalist"] .skill-tag { background: #fff; border-color: #000; color: #000; transition: border-color .25s var(--ease), background .25s var(--ease), transform .15s var(--ease); }
.lx-modal-body[data-theme="brutalist"] .skill-tag:hover { background: #000; color: #fff; transform: scale(1.05); }
.lx-modal-body[data-theme="afterglow"] { background: linear-gradient(160deg, #2b1055, #7597de); }
.lx-modal-body[data-theme="ultraviolet"] { background: linear-gradient(150deg, #1e1b4b, #4c1d95); }
.lx-modal-body[data-theme="tidepool"] { background: linear-gradient(170deg, #042f2e, #083344); }
.lx-modal-body[data-theme="afterglow"] .skill-tag { background: rgba(255,255,255,.1); border-color: rgba(244,114,182,.4); color: #f9a8d4; transition: border-color .25s var(--ease), background .25s var(--ease), transform .15s var(--ease); }
.lx-modal-body[data-theme="afterglow"] .skill-tag:hover { border-color: #f472b6; background: rgba(244,114,182,.15); transform: scale(1.05); }
.lx-modal-body[data-theme="ultraviolet"] .skill-tag { background: rgba(255,255,255,.1); border-color: rgba(168,85,247,.4); color: #e879f9; transition: border-color .25s var(--ease), background .25s var(--ease), transform .15s var(--ease); }
.lx-modal-body[data-theme="ultraviolet"] .skill-tag:hover { border-color: #a855f7; background: rgba(168,85,247,.15); transform: scale(1.05); }
.lx-modal-body[data-theme="tidepool"] .skill-tag { background: rgba(255,255,255,.1); border-color: rgba(125,211,252,.4); color: #80ffdb; transition: border-color .25s var(--ease), background .25s var(--ease), transform .15s var(--ease); }
.lx-modal-body[data-theme="tidepool"] .skill-tag:hover { border-color: #2ec4b6; background: rgba(46,196,182,.15); transform: scale(1.05); }
.lx-modal-body[data-theme="ultracode"] { background: hsl(242, 19%, 5%); }
.lx-modal-body[data-theme="ultracode"] .preview-name { color: hsl(242, 8%, 95%); }
.lx-modal-body[data-theme="ultracode"] .preview-title { color: hsl(342, 92%, 46%); }
.lx-modal-body[data-theme="ultracode"] .preview-desc { color: hsl(242, 8%, 85%); }
.lx-modal-body[data-theme="ultracode"] .lx-win-line { color: hsl(242, 8%, 95%); background: hsl(242, 14%, 10%); border-color: rgba(222,10,77,.3); }
.lx-modal-body[data-theme="ultracode"] .lx-prompt { color: hsl(342, 92%, 46%); }
.lx-modal-body[data-theme="ultracode"] .skill-tag { background: hsl(242, 14%, 10%); border-color: rgba(222,10,77,.4); color: hsl(342, 92%, 46%); }
.lx-modal-body[data-theme="ultracode"] .skill-tag:hover { border-color: hsl(342, 92%, 46%); background: rgba(222,10,77,.15); transform: scale(1.05); }
.lx-modal-body[data-theme="devblue"], .lx-modal-body[data-theme="marlon"] { background: #ffffff; }
.lx-modal-body[data-theme="devblue"] .preview-name, .lx-modal-body[data-theme="marlon"] .preview-name { color: #0E2431; }
.lx-modal-body[data-theme="devblue"] .preview-title, .lx-modal-body[data-theme="marlon"] .preview-title { color: #4070F4; }
.lx-modal-body[data-theme="devblue"] .preview-desc, .lx-modal-body[data-theme="marlon"] .preview-desc { color: #536471; }
.lx-modal-body[data-theme="devblue"] .lx-win-line, .lx-modal-body[data-theme="marlon"] .lx-win-line { color: #0E2431; background: #ffffff; border-color: rgba(14, 36, 49, .15); }
.lx-modal-body[data-theme="devblue"] .lx-prompt, .lx-modal-body[data-theme="marlon"] .lx-prompt { color: #4070F4; }
.lx-modal-body[data-theme="devblue"] .skill-tag, .lx-modal-body[data-theme="marlon"] .skill-tag { background: #f0f4ff; border-color: rgba(64, 112, 244, .3); color: #4070F4; transition: border-color .25s var(--ease), background .25s var(--ease), transform .15s var(--ease); }
.lx-modal-body[data-theme="devblue"] .skill-tag:hover, .lx-modal-body[data-theme="marlon"] .skill-tag:hover { border-color: #4070F4; background: #4070F4; color: #ffffff; transform: scale(1.05); }
.lx-modal-body[data-theme="cube"], .lx-modal-body[data-theme="cubegreen"], .lx-modal-body[data-theme="muzammal"] { background: #343a40; }
.lx-modal-body[data-theme="cube"] .preview-name, .lx-modal-body[data-theme="cubegreen"] .preview-name, .lx-modal-body[data-theme="muzammal"] .preview-name { color: #ffffff; }
.lx-modal-body[data-theme="cube"] .preview-title, .lx-modal-body[data-theme="cubegreen"] .preview-title, .lx-modal-body[data-theme="muzammal"] .preview-title { color: #80ed99; }
.lx-modal-body[data-theme="cube"] .preview-desc, .lx-modal-body[data-theme="cubegreen"] .preview-desc, .lx-modal-body[data-theme="muzammal"] .preview-desc { color: #ced4da; }
.lx-modal-body[data-theme="cube"] .lx-win-line, .lx-modal-body[data-theme="cubegreen"] .lx-win-line, .lx-modal-body[data-theme="muzammal"] .lx-win-line { color: #ffffff; background: #212529; border-color: rgba(255, 255, 255, .1); }
.lx-modal-body[data-theme="cube"] .lx-prompt, .lx-modal-body[data-theme="cubegreen"] .lx-prompt, .lx-modal-body[data-theme="muzammal"] .lx-prompt { color: #80ed99; }
.lx-modal-body[data-theme="cube"] .skill-tag, .lx-modal-body[data-theme="cubegreen"] .skill-tag, .lx-modal-body[data-theme="muzammal"] .skill-tag { background: rgba(128, 237, 153, .12); border-color: rgba(128, 237, 153, .35); color: #80ed99; transition: border-color .25s var(--ease), background .25s var(--ease), transform .15s var(--ease); }
.lx-modal-body[data-theme="cube"] .skill-tag:hover, .lx-modal-body[data-theme="cubegreen"] .skill-tag:hover, .lx-modal-body[data-theme="muzammal"] .skill-tag:hover { border-color: #80ed99; background: #80ed99; color: #176d2d; transform: scale(1.05); }
.lx-modal-body[data-theme="darkpro"] { background: #121214; }
.lx-modal-body[data-theme="darkpro"] .preview-name { color: #f4f4f5; }
.lx-modal-body[data-theme="darkpro"] .preview-title { color: #facc15; }
.lx-modal-body[data-theme="darkpro"] .preview-desc { color: #a1a1aa; }
.lx-modal-body[data-theme="darkpro"] .lx-win-line { color: #f4f4f5; background: #18181b; border-color: rgba(250,204,21,.3); }
.lx-modal-body[data-theme="darkpro"] .lx-prompt { color: #facc15; }
.lx-modal-body[data-theme="darkpro"] .skill-tag { background: #18181b; border-color: rgba(250,204,21,.35); color: #facc15; }
.lx-modal-body[data-theme="fullpage"] { background: #0f1016; }
.lx-modal-body[data-theme="fullpage"] .preview-name { color: #ffffff; }
.lx-modal-body[data-theme="fullpage"] .preview-title { color: #ff4757; }
.lx-modal-body[data-theme="fullpage"] .preview-desc { color: #94a3b8; }
.lx-modal-body[data-theme="fullpage"] .lx-win-line { color: #ffffff; background: #191b26; border-color: rgba(255,71,87,.3); }
.lx-modal-body[data-theme="fullpage"] .lx-prompt { color: #ff4757; }
.lx-modal-body[data-theme="fullpage"] .skill-tag { background: #191b26; border-color: rgba(255,71,87,.35); color: #ff6b81; }
.lx-modal-body[data-theme="moderncv"] { background: #0b1329; }
.lx-modal-body[data-theme="moderncv"] .preview-name { color: #ffffff; }
.lx-modal-body[data-theme="moderncv"] .preview-title { color: #c084fc; }
.lx-modal-body[data-theme="moderncv"] .preview-desc { color: #94a3b8; }
.lx-modal-body[data-theme="moderncv"] .lx-win-line { color: #ffffff; background: #0f172a; border-color: rgba(192,132,252,.3); }
.lx-modal-body[data-theme="moderncv"] .lx-prompt { color: #c084fc; }
.lx-modal-body[data-theme="moderncv"] .skill-tag { background: #0f172a; border-color: rgba(192,132,252,.35); color: #c084fc; }
.lx-modal-body[data-theme="gallery"] { background: #f4f1ea; }
.lx-modal-body[data-theme="gallery"] .preview-name { color: #1c1917; }
.lx-modal-body[data-theme="gallery"] .preview-title { color: #78716c; }
.lx-modal-body[data-theme="gallery"] .preview-desc { color: #57534e; }
.lx-modal-body[data-theme="gallery"] .lx-win-line { color: #1c1917; background: #ffffff; border-color: #d9c9b0; }
.lx-modal-body[data-theme="gallery"] .lx-prompt { color: #a89a86; }
.lx-modal-body[data-theme="gallery"] .skill-tag { background: #ffffff; border-color: #d9c9b0; color: #57534e; }
.lx-modal-body[data-theme="studio"] { background: #fbf7f0; }
.lx-modal-body[data-theme="studio"] .preview-name { color: #1c1917; }
.lx-modal-body[data-theme="studio"] .preview-title { color: #854d0e; }
.lx-modal-body[data-theme="studio"] .preview-desc { color: #44403c; }
.lx-modal-body[data-theme="studio"] .lx-win-line { color: #1c1917; background: #ffffff; border-color: #eadfd0; }
.lx-modal-body[data-theme="studio"] .lx-prompt { color: #854d0e; }
.lx-modal-body[data-theme="studio"] .skill-tag { background: #ffffff; border-color: #eadfd0; color: #44403c; }
.lx-modal-body[data-theme="noir"] { background: #0a0a0a; }
.lx-modal-body[data-theme="noir"] .preview-name { color: #ffffff; }
.lx-modal-body[data-theme="noir"] .preview-title { color: #a3a3a3; }
.lx-modal-body[data-theme="noir"] .preview-desc { color: #737373; }
.lx-modal-body[data-theme="noir"] .lx-win-line { color: #ffffff; background: #141414; border-color: rgba(255,255,255,.15); }
.lx-modal-body[data-theme="noir"] .lx-prompt { color: #ffffff; }
.lx-modal-body[data-theme="noir"] .skill-tag { background: #141414; border-color: rgba(255,255,255,.2); color: #d4d4d4; }
.lx-modal-body[data-theme="museum"] { background: #efe9dc; }
.lx-modal-body[data-theme="museum"] .preview-name { color: #2c2416; }
.lx-modal-body[data-theme="museum"] .preview-title { color: #78350f; }
.lx-modal-body[data-theme="museum"] .preview-desc { color: #451a03; }
.lx-modal-body[data-theme="museum"] .lx-win-line { color: #2c2416; background: #ffffff; border-color: #d8cfbd; }
.lx-modal-body[data-theme="museum"] .lx-prompt { color: #78350f; }
.lx-modal-body[data-theme="museum"] .skill-tag { background: #ffffff; border-color: #d8cfbd; color: #2c2416; }
.lx-modal-body[data-theme="catalog"] { background: #faf9f7; }
.lx-modal-body[data-theme="catalog"] .preview-name { color: #111111; }
.lx-modal-body[data-theme="catalog"] .preview-title { color: #4b5563; }
.lx-modal-body[data-theme="catalog"] .preview-desc { color: #374151; }
.lx-modal-body[data-theme="catalog"] .lx-win-line { color: #111111; background: #ffffff; border-color: #111111; }
.lx-modal-body[data-theme="catalog"] .lx-prompt { color: #111111; }
.lx-modal-body[data-theme="catalog"] .skill-tag { background: #ffffff; border-color: #e7e3db; color: #111111; }
.lx-modal-body[data-theme="bloom"] { background: linear-gradient(140deg, #fff7fb, #f7f3ff 55%, #f0f9ff); }
.lx-modal-body[data-theme="bloom"] .preview-name { color: #4c1d95; }
.lx-modal-body[data-theme="bloom"] .preview-title { color: #ec4899; }
.lx-modal-body[data-theme="bloom"] .preview-desc { color: #6b21a8; }
.lx-modal-body[data-theme="bloom"] .lx-win-line { color: #4c1d95; background: rgba(255,255,255,.9); border-color: rgba(236,72,153,.3); }
.lx-modal-body[data-theme="bloom"] .lx-prompt { color: #ec4899; }
.lx-modal-body[data-theme="bloom"] .skill-tag { background: rgba(255,255,255,.9); border-color: rgba(236,72,153,.35); color: #db2777; }
.lx-modal-body[data-theme="motion"] { background: #f6f5f2; }
.lx-modal-body[data-theme="motion"] .preview-name { color: #1c1917; }
.lx-modal-body[data-theme="motion"] .preview-title { color: #ff4d1c; }
.lx-modal-body[data-theme="motion"] .preview-desc { color: #44403c; }
.lx-modal-body[data-theme="motion"] .lx-win-line { color: #1c1917; background: #ffffff; border-color: rgba(255,77,28,.3); }
.lx-modal-body[data-theme="motion"] .lx-prompt { color: #ff4d1c; }
.lx-modal-body[data-theme="motion"] .skill-tag { background: #ffffff; border-color: rgba(255,77,28,.35); color: #ff4d1c; }

/* Nova Galaxy */
.lx-modal-body[data-theme="nova"] { background: linear-gradient(160deg, #070d18, #0f1c30); }
.lx-modal-body[data-theme="nova"] .preview-name { color: #f0fdfa; }
.lx-modal-body[data-theme="nova"] .preview-title { color: #2dd4bf; }
.lx-modal-body[data-theme="nova"] .preview-desc { color: #94a3b8; }
.lx-modal-body[data-theme="nova"] .lx-win-line { color: #f0fdfa; background: #0f1c30; border-color: rgba(45,212,191,.3); }
.lx-modal-body[data-theme="nova"] .lx-prompt { color: #2dd4bf; }
.lx-modal-body[data-theme="nova"] .skill-tag { background: #0f1c30; border-color: rgba(45,212,191,.35); color: #2dd4bf; }

/* Codeflow */
.lx-modal-body[data-theme="codeflow"] { background: linear-gradient(160deg, #070c18, #0d1527); }
.lx-modal-body[data-theme="codeflow"] .preview-name { color: #f8fafc; }
.lx-modal-body[data-theme="codeflow"] .preview-title { color: #38bdf8; }
.lx-modal-body[data-theme="codeflow"] .preview-desc { color: #94a3b8; }
.lx-modal-body[data-theme="codeflow"] .lx-win-line { color: #f8fafc; background: #0d1527; border-color: rgba(56,189,248,.3); }
.lx-modal-body[data-theme="codeflow"] .lx-prompt { color: #38bdf8; }
.lx-modal-body[data-theme="codeflow"] .skill-tag { background: #0d1527; border-color: rgba(56,189,248,.35); color: #38bdf8; }

/* Neon Wave */
.lx-modal-body[data-theme="wave"] { background: #000000; }
.lx-modal-body[data-theme="wave"] .preview-name { color: #f0fdf4; }
.lx-modal-body[data-theme="wave"] .preview-title { color: #2ee6a6; text-shadow: 0 0 10px rgba(46,230,166,.5); }
.lx-modal-body[data-theme="wave"] .preview-desc { color: #86efac; }
.lx-modal-body[data-theme="wave"] .lx-win-line { color: #f0fdf4; background: #050a06; border-color: rgba(46,230,166,.4); }
.lx-modal-body[data-theme="wave"] .lx-prompt { color: #2ee6a6; }
.lx-modal-body[data-theme="wave"] .skill-tag { background: #050a06; border-color: rgba(46,230,166,.35); color: #2ee6a6; }

/* AI Assistant */
.lx-modal-body[data-theme="assistant"] { background: #18181b; }
.lx-modal-body[data-theme="assistant"] .preview-name { color: #ffffff; }
.lx-modal-body[data-theme="assistant"] .preview-title { color: #10a37f; }
.lx-modal-body[data-theme="assistant"] .preview-desc { color: #a1a1aa; }
.lx-modal-body[data-theme="assistant"] .lx-win-line { color: #ffffff; background: #27272a; border-color: rgba(255,255,255,.1); }
.lx-modal-body[data-theme="assistant"] .lx-prompt { color: #10a37f; }
.lx-modal-body[data-theme="assistant"] .skill-tag { background: #27272a; border-color: rgba(16,163,127,.35); color: #10a37f; }

/* Dev Console */
.lx-modal-body[data-theme="console"] { background: #090b10; }
.lx-modal-body[data-theme="console"] .preview-name { color: #f0fdf4; font-family: monospace; }
.lx-modal-body[data-theme="console"] .preview-title { color: #00ff75; font-family: monospace; }
.lx-modal-body[data-theme="console"] .preview-desc { color: #86efac; font-family: monospace; }
.lx-modal-body[data-theme="console"] .lx-win-line { color: #00ff75; background: #0f121a; border-color: rgba(0,255,117,.3); font-family: monospace; }
.lx-modal-body[data-theme="console"] .lx-prompt { color: #ffbd2e; }
.lx-modal-body[data-theme="console"] .skill-tag { background: #0f121a; border-color: rgba(0,255,117,.35); color: #00ff75; font-family: monospace; }

/* Snowcard */
.lx-modal-body[data-theme="snowcard"] { background: #ffffff; background-image: radial-gradient(#d4d4d8 1px, transparent 1px); background-size: 12px 12px; }
.lx-modal-body[data-theme="snowcard"] .preview-name { color: #000000; font-weight: 800; }
.lx-modal-body[data-theme="snowcard"] .preview-title { color: #000000; font-weight: 700; }
.lx-modal-body[data-theme="snowcard"] .preview-desc { color: #27272a; }
.lx-modal-body[data-theme="snowcard"] .lx-win-line { color: #000000; background: #ffffff; border: 2px solid #000000; box-shadow: 3px 3px 0 #000; }
.lx-modal-body[data-theme="snowcard"] .lx-prompt { color: #d97706; }
.lx-modal-body[data-theme="snowcard"] .skill-tag { background: #ffd000; border: 2px solid #000; color: #000000; box-shadow: 2px 2px 0 #000; font-weight: 700; }

/* Parchment Scroll */
.lx-modal-body[data-theme="parchment"] { background: radial-gradient(circle at 50% 30%, #f7ecd2, #e8d5a8); }
.lx-modal-body[data-theme="parchment"] .preview-name { color: #3a2614; font-family: Georgia, serif; }
.lx-modal-body[data-theme="parchment"] .preview-title { color: #8b2e1f; font-family: Georgia, serif; font-style: italic; }
.lx-modal-body[data-theme="parchment"] .preview-desc { color: #5c3d23; font-family: Georgia, serif; }
.lx-modal-body[data-theme="parchment"] .lx-win-line { color: #3a2614; background: rgba(255,255,255,.7); border: 1px solid #8c6d46; font-family: Georgia, serif; }
.lx-modal-body[data-theme="parchment"] .lx-prompt { color: #8b2e1f; }
.lx-modal-body[data-theme="parchment"] .skill-tag { background: rgba(255,255,255,.8); border: 1px solid #8c6d46; color: #3a2614; font-family: Georgia, serif; }

/* Cloud Blue */
.lx-modal-body[data-theme="cloud"] { background: linear-gradient(180deg, #bfe3ff 0%, #eaf6ff 100%); }
.lx-modal-body[data-theme="cloud"] .preview-name { color: #1e3a8a; font-weight: 800; }
.lx-modal-body[data-theme="cloud"] .preview-title { color: #2563eb; }
.lx-modal-body[data-theme="cloud"] .preview-desc { color: #475569; }
.lx-modal-body[data-theme="cloud"] .lx-win-line { color: #1e3a8a; background: rgba(255,255,255,.9); border-color: #bfdbfe; }
.lx-modal-body[data-theme="cloud"] .lx-prompt { color: #2563eb; }
.lx-modal-body[data-theme="cloud"] .skill-tag { background: #ffffff; border-color: #bfdbfe; color: #2563eb; box-shadow: 0 2px 6px rgba(37,99,235,.1); }

/* GitHub Profile */
.lx-modal-body[data-theme="github"] { background: #0d1117; }
.lx-modal-body[data-theme="github"] .preview-name { color: #f0f6fc; }
.lx-modal-body[data-theme="github"] .preview-title { color: #58a6ff; }
.lx-modal-body[data-theme="github"] .preview-desc { color: #8b949e; }
.lx-modal-body[data-theme="github"] .lx-win-line { color: #f0f6fc; background: #161b22; border-color: #30363d; }
.lx-modal-body[data-theme="github"] .lx-prompt { color: #58a6ff; }
.lx-modal-body[data-theme="github"] .skill-tag { background: #161b22; border-color: #30363d; color: #3fb950; }

/* Particle Mesh */
.lx-modal-body[data-theme="particle"] { background: #121922; }
.lx-modal-body[data-theme="particle"] .preview-name { color: #eef2f8; }
.lx-modal-body[data-theme="particle"] .preview-title { color: #22d3ee; }
.lx-modal-body[data-theme="particle"] .preview-desc { color: #9caac0; }
.lx-modal-body[data-theme="particle"] .lx-win-line { color: #eef2f8; background: #151d2c; border-color: rgba(111,102,255,.28); }
.lx-modal-body[data-theme="particle"] .lx-prompt { color: #7367ff; }
.lx-modal-body[data-theme="particle"] .skill-tag { background: #151d2c; border-color: rgba(34,211,238,.35); color: #22d3ee; }

/* Multi-Panel Showcase */
.lx-modal-body[data-theme="panels"] { background: #f5f6fb; }
.lx-modal-body[data-theme="panels"] .preview-name { color: #11151f; font-weight: 800; }
.lx-modal-body[data-theme="panels"] .preview-title { color: #2f6bff; }
.lx-modal-body[data-theme="panels"] .preview-desc { color: #5b6478; }
.lx-modal-body[data-theme="panels"] .lx-win-line { color: #11151f; background: #ffffff; border-color: #e6e8f0; }
.lx-modal-body[data-theme="panels"] .lx-prompt { color: #4f3aa0; }
.lx-modal-body[data-theme="panels"] .skill-tag { background: #ffffff; border-color: #e6e8f0; color: #2f6bff; box-shadow: 0 2px 6px rgba(47,107,255,.12); }

/* Monolith Brutalist */
.lx-modal-body[data-theme="monolith"] { background: #f6f5f0; }
.lx-modal-body[data-theme="monolith"] .preview-name { color: #020202; font-weight: 900; text-transform: uppercase; letter-spacing: -0.04em; }
.lx-modal-body[data-theme="monolith"] .preview-title { color: #020202; font-weight: 900; }
.lx-modal-body[data-theme="monolith"] .preview-desc { color: #4b4b4b; }
.lx-modal-body[data-theme="monolith"] .lx-win-line { color: #020202; background: #fffefa; border: 2px solid #020202; box-shadow: 3px 3px 0 #020202; }
.lx-modal-body[data-theme="monolith"] .lx-prompt { color: #020202; font-weight: 900; }
.lx-modal-body[data-theme="monolith"] .skill-tag { background: #fffefa; border: 2px solid #020202; color: #020202; font-weight: 800; box-shadow: 2px 2px 0 #020202; }

/* VS Code Editor */
.lx-modal-body[data-theme="editor"] { background: #1e1e1e; font-family: ui-monospace, monospace; }
.lx-modal-body[data-theme="editor"] .preview-name { color: #ffffff; }
.lx-modal-body[data-theme="editor"] .preview-title { color: #569cd6; }
.lx-modal-body[data-theme="editor"] .preview-desc { color: #a0a0a0; }
.lx-modal-body[data-theme="editor"] .lx-win-line { color: #d4d4d4; background: #252526; border-color: #3c3c3c; font-family: ui-monospace, monospace; }
.lx-modal-body[data-theme="editor"] .lx-prompt { color: #4ec9b0; }
.lx-modal-body[data-theme="editor"] .skill-tag { background: #252526; border-color: #3c3c3c; color: #9cdcfe; font-family: ui-monospace, monospace; }

/* Editorial Magazine */
.lx-modal-body[data-theme="magazine"] { background: #f7f4ee; font-family: Georgia, serif; }
.lx-modal-body[data-theme="magazine"] .preview-name { color: #16140f; font-family: Georgia, serif; font-weight: 900; }
.lx-modal-body[data-theme="magazine"] .preview-title { color: #c8442b; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.lx-modal-body[data-theme="magazine"] .preview-desc { color: #6b665b; }
.lx-modal-body[data-theme="magazine"] .lx-win-line { color: #16140f; background: #ffffff; border: 1px solid #16140f; }
.lx-modal-body[data-theme="magazine"] .lx-prompt { color: #c8442b; }
.lx-modal-body[data-theme="magazine"] .skill-tag { background: #f7f4ee; border: 1px solid #16140f; color: #16140f; }

/* Bold Lime */
.lx-modal-body[data-theme="bold"] { background: #0b0b0d; font-family: 'Space Grotesk', Inter, sans-serif; }
.lx-modal-body[data-theme="bold"] .preview-name { color: #fafafa; text-transform: uppercase; letter-spacing: -.02em; }
.lx-modal-body[data-theme="bold"] .preview-title { color: #c6fb50; font-family: ui-monospace, monospace; }
.lx-modal-body[data-theme="bold"] .preview-desc { color: #a1a1aa; }
.lx-modal-body[data-theme="bold"] .lx-win-line { color: #f4f4f5; background: #141418; border-color: rgba(255,255,255,.14); font-family: ui-monospace, monospace; }
.lx-modal-body[data-theme="bold"] .lx-prompt { color: #c6fb50; }
.lx-modal-body[data-theme="bold"] .skill-tag { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #c6fb50; font-family: ui-monospace, monospace; }

/* Clean Pro */
.lx-modal-body[data-theme="clean"] { background: #f4f4f0; font-family: Inter, system-ui, sans-serif; }
.lx-modal-body[data-theme="clean"] .preview-name { color: #18181b; font-weight: 700; letter-spacing: -.02em; }
.lx-modal-body[data-theme="clean"] .preview-title { color: #6d28d9; font-weight: 600; }
.lx-modal-body[data-theme="clean"] .preview-desc { color: #52525b; }
.lx-modal-body[data-theme="clean"] .lx-win-line { color: #18181b; background: #ffffff; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 4px 14px rgba(0,0,0,.04); }
.lx-modal-body[data-theme="clean"] .lx-prompt { color: #6d28d9; }
.lx-modal-body[data-theme="clean"] .skill-tag { background: #ffffff; border-color: rgba(0,0,0,.1); color: #6d28d9; box-shadow: 0 2px 6px rgba(0,0,0,.04); font-weight: 500; }

/* Vibrant Gradient */
.lx-modal-body[data-theme="vibrant"] { background: #fef7ff; font-family: 'Space Grotesk', Inter, sans-serif; }
.lx-modal-body[data-theme="vibrant"] .preview-name { background: linear-gradient(110deg,#ec4899,#8b5cf6,#3b82f6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; letter-spacing: -.02em; }
.lx-modal-body[data-theme="vibrant"] .preview-title { color: #d6308b; font-weight: 600; }
.lx-modal-body[data-theme="vibrant"] .preview-desc { color: #5b4d73; }
.lx-modal-body[data-theme="vibrant"] .lx-win-line { color: #1a1033; background: #ffffff; border: 1px solid rgba(124,58,237,.18); box-shadow: 0 4px 16px rgba(124,58,237,.08); }
.lx-modal-body[data-theme="vibrant"] .lx-prompt { color: #d6308b; }
.lx-modal-body[data-theme="vibrant"] .skill-tag { background: #ffffff; border-color: rgba(124,58,237,.2); color: #d6308b; box-shadow: 0 2px 8px rgba(124,58,237,.08); font-weight: 600; }

/* Neon Cyberpunk */
.lx-modal-body[data-theme="neon"] { background: #05060d; font-family: Rajdhani, system-ui, sans-serif; }
.lx-modal-body[data-theme="neon"] .preview-name { color: #ffffff; text-shadow: 2px 0 #ff2bd6, -2px 0 #00f0ff; font-family: Orbitron, sans-serif; font-weight: 900; }
.lx-modal-body[data-theme="neon"] .preview-title { color: #00f0ff; font-family: Orbitron, sans-serif; font-size: .85rem; letter-spacing: .08em; }
.lx-modal-body[data-theme="neon"] .preview-desc { color: #7d8bb0; }
.lx-modal-body[data-theme="neon"] .lx-win-line { color: #d6e6ff; background: rgba(0,240,255,.05); border: 1px solid rgba(0,240,255,.2); font-family: ui-monospace, monospace; }
.lx-modal-body[data-theme="neon"] .lx-prompt { color: #ff2bd6; }
.lx-modal-body[data-theme="neon"] .skill-tag { background: rgba(0,240,255,.06); border-color: rgba(0,240,255,.3); color: #00f0ff; font-weight: 600; }

/* Hacker Terminal */
.lx-modal-body[data-theme="hacker"] { background: #0b0f0b; font-family: 'JetBrains Mono', monospace; }
.lx-modal-body[data-theme="hacker"] .preview-name { color: #39ff14; text-shadow: 0 0 12px rgba(57,255,20,.4); font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.lx-modal-body[data-theme="hacker"] .preview-title { color: #ffb000; font-family: 'JetBrains Mono', monospace; font-size: .85rem; }
.lx-modal-body[data-theme="hacker"] .preview-desc { color: #c9f7c9; }
.lx-modal-body[data-theme="hacker"] .lx-win-line { color: #c9f7c9; background: rgba(57,255,20,.05); border: 1px solid rgba(57,255,20,.2); font-family: 'JetBrains Mono', monospace; }
.lx-modal-body[data-theme="hacker"] .lx-prompt { color: #39ff14; }
.lx-modal-body[data-theme="hacker"] .skill-tag { background: rgba(57,255,20,.06); border-color: rgba(57,255,20,.3); color: #39ff14; font-weight: 600; font-family: 'JetBrains Mono', monospace; }












/* Theme Gallery filter tabs */
.lx-theme-filters { display: flex; gap: 10px; justify-content: center; margin: 24px 0 16px; flex-wrap: wrap; }
.lx-filter-btn { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #9aa3c0; padding: 8px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: all .25s var(--ease); }
.lx-filter-btn:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.25); transform: translateY(-1px); }
.lx-filter-btn.active { background: #a3e635; border-color: #a3e635; color: #0b1226; box-shadow: 0 0 16px rgba(163,230,53,.35); }
/* Bento theme swatches */
.lx-swatches { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.lx-swatches i { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.lx-swatches i:hover { transform: scale(1.15); box-shadow: 0 0 12px currentColor; }
.lx-swatches .more { width: auto; height: auto; border: none; background: none; font-style: normal; font-size: 12.5px; font-weight: 700; color: #4f46e5; transition: color .25s var(--ease); }
.lx-swatches .more:hover { color: #6366f1; }
/* LX showcase: retint directory cards */
.dir-filter { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 16px 0 20px; }
.dir-filter-btn { padding: 8px 16px; border-radius: 100px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #e7ece9; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: all .2s var(--ease); }
.dir-filter-btn:hover { border-color: rgba(79,70,229,.45); background: rgba(79,70,229,.1); color: #c7d2fe; transform: translateY(-1px); }
.dir-filter-btn.active { background: linear-gradient(135deg,#4f46e5,#6366f1); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(79,70,229,.35); }
.lx-showcase .dir-card { background: rgba(17,24,22,.85); border-color: rgba(255,255,255,.09); transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.lx-showcase .dir-card:hover { border-color: rgba(79,70,229,.45); box-shadow: 0 24px 56px rgba(79,70,229,.2), 0 8px 24px rgba(0,0,0,.3); transform: translateY(-8px) scale(1.01); }
.lx-showcase .dir-card h3 { color: #f4f7f3; transition: color .25s var(--ease); }
.lx-showcase .dir-card:hover h3 { color: #c7d2fe; }
.lx-showcase .dir-card .mono { color: #4f46e5; }
.lx-showcase .dir-visit { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.lx-showcase .dir-visit:hover { transform: translateX(4px); box-shadow: 0 8px 24px rgba(79,70,229,.3); }
/* /explore directory cards */
.lx-explore .dir-card { background: rgba(17,24,22,.85); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 18px; transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.lx-explore .dir-card:hover { border-color: rgba(79,70,229,.45); box-shadow: 0 24px 56px rgba(79,70,229,.2), 0 8px 24px rgba(0,0,0,.3); transform: translateY(-8px) scale(1.01); }
.lx-explore .dir-card h3 { color: #f4f7f3; }
.lx-explore .dir-card p { color: #b6c2bb; font-size: 13.5px; margin: 0; }
.lx-explore .dir-card .mono { color: #4f46e5; }
/* LX steps */
.lx-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 30px; position: relative; }
.lx-steps::before { content: ""; position: absolute; top: 52px; left: 8%; right: 8%; border-top: 1px dashed rgba(79,70,229,.3); }
.lx-step { position: relative; }
.lx-step:hover .lx-step-num { color: #fff; background: rgba(79,70,229,.22); box-shadow: 0 0 0 6px rgba(79,70,229,.1), 0 12px 30px rgba(79,70,229,.3); transform: translateY(-4px); }
.lx-step h3 { color: #f4f7f3; font-size: 19px; margin: 12px 0 8px; }
.lx-step p { color: #a7b3ab; font-size: 14.5px; }
.lx-step strong { color: #e7ece9; }
.lx-step-num { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; font-family: 'Space Grotesk',sans-serif; font-size: 17px; font-weight: 800; letter-spacing: .5px; color: #c7d2fe; background: rgba(79,70,229,.1); border: 1px solid rgba(79,70,229,.45); box-shadow: 0 0 0 6px rgba(79,70,229,.06), 0 8px 24px rgba(79,70,229,.15); transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease); }
/* LX quotes + CTA banner */
.lx-quotes { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 30px; position: relative; }
.lx-quotes::before { content: ""; position: absolute; top: -20%; left: -10%; width: 50%; height: 50%; background: radial-gradient(ellipse at center, rgba(79,70,229,.08) 0%, transparent 70%); pointer-events: none; z-index: 0; }
.lx-quotes::after { content: ""; position: absolute; bottom: -20%; right: -10%; width: 50%; height: 50%; background: radial-gradient(ellipse at center, rgba(99,102,241,.08) 0%, transparent 70%); pointer-events: none; z-index: 0; }
.lx-quotes > * { position: relative; z-index: 1; }
.lx-quote { background: rgba(17,24,22,.85); border: 1px solid rgba(255,255,255,.09); border-radius: 20px; padding: 24px; margin: 0; transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); background-clip: padding-box; position: relative; }
.lx-quote::before { content: ""; position: absolute; inset: -1px; border-radius: 21px; background: linear-gradient(135deg, rgba(79,70,229,.25), rgba(99,102,241,.15), transparent); opacity: 0; filter: blur(8px); transition: opacity .3s var(--ease); z-index: -1; }
.lx-quote::after { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 3px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg,#4f46e5,#22d3ee); opacity: .5; transition: opacity .3s var(--ease), left .3s var(--ease), right .3s var(--ease); }
.lx-quote:hover::after { opacity: 1; left: 16px; right: 16px; }
.lx-quote:hover::before { opacity: 1; }
.lx-quote:hover { transform: translateY(-4px); border-color: rgba(79,70,229,.35); box-shadow: 0 16px 40px rgba(0,0,0,.4), 0 0 20px rgba(79,70,229,.1); }
.lx-quote:hover .lx-quote-ava { box-shadow: 0 0 0 3px rgba(79,70,229,.4); }
.lx-quote blockquote { color: #e7ece9; font-size: 15.5px; line-height: 1.6; margin: 0 0 16px; position: relative; }
.lx-quote blockquote::before { content: "\201C"; display: block; font-family: Georgia,serif; font-size: 44px; line-height: .6; color: rgba(79,70,229,.5); margin-bottom: 10px; }
.lx-quote figcaption { display: flex; align-items: center; gap: 10px; color: #a7b3ab; font-size: 13.5px; }
.lx-quote-ava { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: linear-gradient(135deg,#4f46e5,#6366f1); flex-shrink: 0; }
.lx-quote-meta { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.lx-quote-name { font-weight: 700; color: #f4f7f3; font-size: 13.5px; }
.lx-quote-role { font-size: 11.5px; color: #7d8a82; }
.lx-verified { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #22c55e; color: #fff; font-size: 9px; margin-top: 2px; box-shadow: 0 0 0 2px rgba(34,197,94,.3); }
.lx-cta-banner { margin-top: 30px; text-align: center; background: linear-gradient(135deg, rgba(79,70,229,.14), rgba(52,211,153,.08)); border: 1px solid rgba(79,70,229,.35); border-radius: 28px; padding: 64px 24px; position: relative; overflow: hidden; transition: border-color .4s var(--ease), box-shadow .4s var(--ease); }
.lx-cta-banner:hover { border-color: rgba(79,70,229,.55); box-shadow: 0 0 60px rgba(79,70,229,.12); }
.lx-cta-banner::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(79,70,229,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(79,70,229,.07) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(60% 80% at 50% 50%, #000 20%, transparent 100%); -webkit-mask-image: radial-gradient(60% 80% at 50% 50%, #000 20%, transparent 100%); pointer-events: none; }
.lx-cta-banner > * { position: relative; }
.lx-cta-banner::after { content: ""; position: absolute; top: -60%; left: -35%; width: 30%; height: 220%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.09), transparent); transform: skewX(-18deg) translateX(-130%); animation: lxSheen 6.5s ease-in-out infinite; pointer-events: none; }
@keyframes lxSheen { 0%, 55% { transform: skewX(-18deg) translateX(-130%); } 100% { transform: skewX(-18deg) translateX(560%); } }
.lx-cta-banner h2 { font-family: 'Space Grotesk',sans-serif; font-size: clamp(32px,5vw,56px); letter-spacing: -2px; color: #f4f7f3; margin-bottom: 10px; text-wrap: balance; }
.lx-cta-banner h2 span { color: #4f46e5; }
.lx-cta-banner p { color: #a7b3ab; margin-bottom: 26px; }
/* LX auth split */
.lx-auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-top: 30px; }
.lx-auth-points { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 10px; }
.lx-auth-points li { display: flex; align-items: center; gap: 10px; color: #a7b3ab; font-size: 15px; transition: color .25s var(--ease), transform .25s var(--ease); }
.lx-auth-points li:hover { color: #d9f99d; transform: translateX(4px); }
.lx-auth-points i { color: #4f46e5; transition: transform .25s var(--ease); }
.lx-auth-points li:hover i { transform: scale(1.2); }
.lx-auth-card { position: relative; overflow: hidden; background: rgba(17,24,22,.9); border: 1px solid rgba(79,70,229,.22); border-radius: 22px; padding: 30px 28px; box-shadow: 0 24px 60px rgba(0,0,0,.45); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.lx-auth-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,#4f46e5,#22d3ee,#818cf8); }
.lx-auth-card:hover { border-color: rgba(79,70,229,.35); box-shadow: 0 28px 70px rgba(0,0,0,.5), 0 0 40px rgba(79,70,229,.06); }
/* LX auth: retint kept tab + input + button classes */
.lx-auth-card .auth-tab.active { background: linear-gradient(135deg,#4f46e5,#6366f1); color: #fff; box-shadow: 0 4px 16px rgba(79,70,229,.35); }
.lx-auth-card .input-wrapper input { background: rgba(0,0,0,.4); border-color: rgba(255,255,255,.12); color: #f4f7f3; }
.lx-auth-card .input-wrapper.focused input { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.2); }
.lx-auth-card .input-wrapper.focused .input-icon { color: #4f46e5; }
.lx-auth-card .btn-primary-block { background: #4f46e5; color: #fff; }
.lx-btn-ghost { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.14); color: #e7ece9; padding: 12px 20px; border-radius: 12px; font-weight: 700; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease); }
.lx-btn-ghost:active { transform: scale(.97); }
.lx-btn-ghost:hover { background: rgba(79,70,229,.1); border-color: rgba(79,70,229,.4); color: #4f46e5; }
/* Visual theme: gallery (natural masonry — full images, no hard crops) */
body[data-template="gallery"] .works-grid{align-items:start}
/* Visual theme: studio (light editorial) */
body[data-template="studio"]{background:#faf9f7;color:#1c1917}
body[data-template="studio"] .bg-fx,body[data-template="studio"] .grid-overlay{display:none}
body[data-template="studio"] .work-card{background:#fff;border-color:#e7e0d3;box-shadow:0 10px 30px rgba(28,25,23,.07)}
body[data-template="studio"] .work-card b{color:#1c1917}
/* Visual theme: noir (dark full-bleed) */
body[data-template="noir"]{background:#050807}
body[data-template="noir"] .work-card{background:#0d1312;border-color:rgba(255,255,255,.1);border-radius:8px}
body[data-template="noir"] .btn-primary{background:#e7ece9;color:#050807;box-shadow:none}
/* Visual theme: museum (framed art on warm gallery walls) */
body[data-template="museum"]{background:#f4efe6;color:#241f1a}
body[data-template="museum"] .bg-fx,body[data-template="museum"] .grid-overlay{display:none}
body[data-template="museum"] .works-grid{gap:26px}
body[data-template="museum"] .work-card{background:#fffdf8;border-color:#e4d9c5;border-radius:2px;padding:14px 14px 0;box-shadow:0 18px 40px rgba(60,45,20,.12);transition:transform .3s ease,box-shadow .3s ease}
body[data-template="museum"] .work-card:hover{transform:translateY(-6px);box-shadow:0 28px 55px rgba(60,45,20,.18)}
body[data-template="museum"] .work-card img{border:1px solid #ece3d2;border-radius:0}
body[data-template="museum"] .work-card .work-meta{padding:14px 4px 16px;text-align:center}
body[data-template="museum"] .work-card b{font-family:Georgia,'Times New Roman',serif;font-size:16px;font-weight:600;color:#2c2416;letter-spacing:.01em}
body[data-template="museum"] .work-card small{display:block;margin-top:4px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8a7a5c}
body[data-template="museum"] .btn-primary{background:#2c2416;color:#f7f2e7;border:none}
body[data-template="museum"] .btn-primary:hover{background:#453923}
body[data-template="museum"] #app h1{font-family:Georgia,'Times New Roman',serif;font-weight:600;letter-spacing:.005em}
@media(max-width:620px){body[data-template="museum"] .works-grid{gap:18px}}
/* Museum: subdomain pages render works as .proj cards (worker gallery) */
body[data-template="museum"] .proj{background:#fffdf8;border-color:#e4d9c5;border-radius:2px;box-shadow:0 18px 40px rgba(60,45,20,.12);transition:transform .3s ease,box-shadow .3s ease}
body[data-template="museum"] .proj:hover{transform:translateY(-6px);box-shadow:0 28px 55px rgba(60,45,20,.18)}
body[data-template="museum"] .proj-top{background:#f4efe6}
body[data-template="museum"] .proj-top::before{display:none}
body[data-template="museum"] .proj-body h3{font-family:Georgia,'Times New Roman',serif;font-weight:600;color:#2c2416}
/* Museum: exhibition header + single hung pieces */
.gal-museum-head{padding:150px 0 40px;text-align:center}
.museum-portrait{width:150px;height:150px;object-fit:cover;border-radius:50%;margin:0 auto 18px;display:block;border:6px solid #fff;box-shadow:0 18px 40px rgba(60,45,20,.22)}
.museum-portrait-fallback{display:grid!important;place-items:center;font-size:56px;font-family:Georgia,serif;color:#2c2416;background:#e9dfc9}
.museum-kicker{font-size:11.5px;font-weight:800;letter-spacing:.4em;color:#8a7a5c;margin:0 0 10px}
.gal-museum-head h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(38px,5vw,58px);font-weight:600;color:#2c2416;margin:0}
.museum-sub{font-family:Georgia,serif;font-style:italic;font-size:18px;color:#5c5138;margin:8px 0 0}
.museum-meta{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:#8a7a5c;margin:12px 0 0}
.museum-hang{display:flex;flex-direction:column;gap:90px;padding:20px 0 100px;max-width:820px}
.museum-piece{margin:0;cursor:pointer}
.museum-frame{background:#fff;padding:22px;border:1px solid #e4d9c5;box-shadow:0 30px 60px rgba(60,45,20,.16);transition:transform .35s ease,box-shadow .35s ease}
.museum-piece:hover .museum-frame{transform:translateY(-8px);box-shadow:0 44px 80px rgba(60,45,20,.24)}
.museum-frame img{width:100%;max-height:560px;object-fit:contain;display:block;background:#faf7f0;border:1px solid #ece3d2}
.museum-plaque{display:flex;gap:16px;align-items:baseline;justify-content:center;margin-top:20px;text-align:left}
.museum-no{font-size:12px;font-weight:800;letter-spacing:.24em;color:#b0a080}
.museum-plaque-text{text-align:center}
.museum-plaque-text b{display:block;font-family:Georgia,'Times New Roman',serif;font-size:21px;font-weight:600;color:#2c2416}
.museum-plaque-text small{display:block;margin-top:5px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#8a7a5c}
@media(max-width:620px){.museum-hang{gap:56px}.museum-frame{padding:12px}}
/* Catalog: left-aligned title block + numbered index rows */
.gal-catalog-head{padding:150px 0 30px;max-width:820px;position:relative}
.cat-kicker{font-size:11px;font-weight:800;letter-spacing:.34em;color:#999;margin:0 0 12px}
.gal-catalog-head h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(40px,5.5vw,64px);font-weight:500;color:#111;margin:0;line-height:1.05}
.cat-sub{font-family:Georgia,serif;font-style:italic;font-size:19px;color:#444;margin:10px 0 0}
.cat-meta{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#888;margin:14px 0 0;border-top:1px solid #ddd;padding-top:14px;max-width:380px}
.cat-portrait{position:absolute;top:150px;right:0;width:110px;height:150px;object-fit:cover;filter:grayscale(1);border:1px solid #ccc}
.cat-index{display:flex;flex-direction:column;padding:10px 0 100px;max-width:900px;counter-reset:catrow}
.cat-row{display:grid;grid-template-columns:64px 200px 1fr 40px;gap:22px;align-items:center;padding:26px 0;border-top:1px solid #e2e0da;cursor:pointer;transition:background .25s ease,padding-left .25s ease}
.cat-row:hover{background:rgba(0,0,0,.03);padding-left:10px}
.cat-no{font-family:Georgia,serif;font-size:26px;font-style:italic;color:#bbb;align-self:start;padding-top:4px}
.cat-thumb img{width:100%;height:130px;object-fit:cover;display:block;filter:grayscale(.2);transition:filter .3s ease}
.cat-row:hover .cat-thumb img{filter:none}
.cat-text b{display:block;font-family:Georgia,'Times New Roman',serif;font-size:22px;font-weight:500;color:#111}
.cat-text small{display:block;margin-top:5px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#777}
.cat-text p{margin:8px 0 0;font-size:14px;color:#666;max-width:52ch}
.cat-arrow{font-size:20px;color:#bbb;transition:transform .25s ease,color .25s ease}
.cat-row:hover .cat-arrow{color:#111;transform:translateX(6px)}
@media(max-width:760px){.cat-row{grid-template-columns:44px 1fr;gap:12px}.cat-thumb{grid-column:2}.cat-arrow{display:none}.cat-portrait{display:none}}
/* Bloom: portrait header + tall-tile masonry */
.gal-bloom-head{padding:150px 0 36px;text-align:center;position:relative}
.bloom-orb{position:absolute;top:120px;left:50%;transform:translateX(-50%);width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(244,114,182,.28),rgba(167,139,250,.18) 45%,transparent 70%);filter:blur(30px);pointer-events:none;z-index:-1}
.bloom-portrait{width:140px;height:140px;object-fit:cover;border-radius:50%;margin:0 auto 18px;display:block;border:5px solid #fff;box-shadow:0 20px 50px rgba(196,132,220,.35)}
.bloom-portrait-fallback{display:grid!important;place-items:center;font-size:54px;font-weight:800;color:#fff;background:linear-gradient(135deg,#f472b6,#a78bfa,#60a5fa)}
.gal-bloom-head h1{font-family:Georgia,serif;font-size:clamp(38px,5vw,56px);margin:0;background:linear-gradient(120deg,#e879a8,#a78bfa,#60a5fa);-webkit-background-clip:text;background-clip:text;color:transparent}
.bloom-sub{font-size:17px;color:#6b5b8a;margin:10px 0 0}
.bloom-meta{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#a78bba;margin:12px 0 0}
.bloom-masonry{columns:3;column-gap:20px;padding:10px 0 100px}
.bloom-tile{break-inside:avoid;margin:0 0 20px;background:rgba(255,255,255,.75);border:1px solid rgba(255,182,213,.5);border-radius:20px;overflow:hidden;backdrop-filter:blur(8px);box-shadow:0 14px 34px rgba(214,140,190,.2);cursor:pointer;transition:transform .3s ease,box-shadow .3s ease}
.bloom-tile:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 24px 48px rgba(196,132,220,.3)}
.bloom-tile img{width:100%;display:block}
.bloom-tile.tall img{min-height:320px;object-fit:cover}
.bloom-tile figcaption,.bloom-tile .bloom-cap{padding:14px 16px 16px}
.bloom-tile figcaption b,.bloom-tile .bloom-cap b{display:block;font-size:15px;font-weight:700;color:#4a3560}
.bloom-tile figcaption small,.bloom-tile .bloom-cap small{display:block;margin-top:3px;font-size:11.5px;font-weight:700;letter-spacing:.05em;color:#b07cc6}
a.bloom-tile,a.museum-piece,a.cat-row{display:block}
a.museum-piece,a.cat-row{color:inherit}
@media(max-width:900px){.bloom-masonry{columns:2}}
@media(max-width:620px){.bloom-masonry{columns:1}}
/* Visual theme: catalog (print art-book, numbered plates) */
body[data-template="catalog"]{background:#faf9f7;color:#111}
body[data-template="catalog"] .bg-fx,body[data-template="catalog"] .grid-overlay{display:none}
body[data-template="catalog"] .works-grid{counter-reset:plate;gap:34px 22px}
body[data-template="catalog"] .work-card{background:transparent;border:none;border-top:2px solid #111;border-radius:0;padding:0;overflow:visible}
body[data-template="catalog"] .work-card::before{counter-increment:plate;content:"PLATE " counter(plate, decimal-leading-zero);display:block;font-size:10.5px;font-weight:800;letter-spacing:.22em;color:#111;padding:10px 0 8px}
body[data-template="catalog"] .work-card img{border-radius:0;filter:grayscale(.15)}
body[data-template="catalog"] .work-card:hover img{filter:none}
body[data-template="catalog"] .work-card .work-meta{padding:12px 0 0}
body[data-template="catalog"] .work-card b{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:17px;font-weight:500;color:#111}
body[data-template="catalog"] .work-card small{display:block;margin-top:3px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#666}
body[data-template="catalog"] .btn-primary{background:#111;color:#faf9f7;border:none}
body[data-template="catalog"] .btn-primary:hover{background:#333}
body[data-template="catalog"] #app h1{font-family:Georgia,'Times New Roman',serif;font-weight:500}
body[data-template="catalog"] section img[style*="border-radius"]{border-radius:0!important;filter:grayscale(.15)}
/* Catalog: subdomain pages render works as .proj cards (worker gallery) */
body[data-template="catalog"] .proj{background:transparent;border:none;border-top:2px solid #111;border-radius:0;box-shadow:none}
body[data-template="catalog"] .proj-top{background:transparent;border-radius:0}
body[data-template="catalog"] .proj-top::before{display:none}
body[data-template="catalog"] .proj-body h3{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:500;color:#111}
body[data-template="catalog"] .proj-body p{color:#666;text-transform:uppercase;letter-spacing:.12em;font-size:11px}
@media(max-width:620px){body[data-template="catalog"] .works-grid{column-gap:26px}}
/* Visual theme: bloom (soft pastel dream) */
body[data-template="bloom"]{background:linear-gradient(160deg,#fff7fb 0%,#f7f3ff 50%,#f0f9ff 100%);color:#3b2f4a}
body[data-template="bloom"] .bg-fx,body[data-template="bloom"] .grid-overlay{display:none}
body[data-template="bloom"] .works-grid{gap:22px}
body[data-template="bloom"] .work-card{background:rgba(255,255,255,.72);border-color:rgba(255,182,213,.55);border-radius:22px;backdrop-filter:blur(10px);box-shadow:0 14px 34px rgba(214,140,190,.18);transition:transform .3s ease,box-shadow .3s ease}
body[data-template="bloom"] .work-card:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 22px 46px rgba(196,132,220,.26)}
body[data-template="bloom"] .work-card img{border-radius:18px 18px 0 0}
body[data-template="bloom"] .work-card .work-meta{padding:14px 16px 16px}
body[data-template="bloom"] .work-card b{font-size:15.5px;font-weight:700;color:#4a3560}
body[data-template="bloom"] .work-card small{display:block;margin-top:3px;font-size:11.5px;font-weight:700;letter-spacing:.05em;color:#b07cc6}
body[data-template="bloom"] .btn-primary{background:linear-gradient(135deg,#f472b6,#a78bfa);color:#fff;border:none;box-shadow:0 8px 20px rgba(196,132,220,.4)}
body[data-template="bloom"] .btn-primary:hover{filter:brightness(1.06)}
body[data-template="bloom"] #app h1{background:linear-gradient(120deg,#e879a8,#a78bfa,#60a5fa);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Bloom: subdomain pages render works as .proj cards (worker gallery) */
body[data-template="bloom"] .proj{background:rgba(255,255,255,.72);border-color:rgba(255,182,213,.55);border-radius:22px;backdrop-filter:blur(10px);box-shadow:0 14px 34px rgba(214,140,190,.18);transition:transform .3s ease,box-shadow .3s ease}
body[data-template="bloom"] .proj:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 22px 46px rgba(196,132,220,.26)}
body[data-template="bloom"] .proj-top{background:transparent;border-radius:18px 18px 0 0}
body[data-template="bloom"] .proj-top::before{display:none}
body[data-template="bloom"] .proj-body h3{color:#4a3560}
body[data-template="bloom"] .proj-body p{color:#b07cc6}

/* Motion Flow (Dominique R. style): light cream, scroll animations, gradient text, pointer effects, live stats */
body[data-template="motion"]{background:#f6f5f2;color:#121212}
body[data-template="motion"] .bg-fx,body[data-template="motion"] .grid-overlay{display:none}
body[data-template="motion"]{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif}
body[data-template="motion"] .works-grid{gap:20px}
body[data-template="motion"] .work-card{background:#fff;border:1px solid #dedcd5;border-radius:16px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.06);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
body[data-template="motion"] .work-card:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(0,0,0,.12)}
body[data-template="motion"] .work-card img{border-radius:12px 12px 0 0;object-fit:cover}
body[data-template="motion"] .work-card .work-meta{padding:16px}
body[data-template="motion"] .work-card b{font-size:15px;font-weight:600;color:#121212}
body[data-template="motion"] .work-card small{display:block;margin-top:4px;font-size:12px;color:#6d6d68}
body[data-template="motion"] .btn-primary{background:#ff4d1c;color:#fff;border:none;box-shadow:0 4px 16px rgba(255,77,28,.3)}
body[data-template="motion"] .btn-primary:hover{background:#e0431a;color:#fff}
body[data-template="motion"] .btn-ghost{background:#fff;border:1px solid #d4d2cb;color:#121212;box-shadow:0 1px 3px rgba(0,0,0,.06)}
body[data-template="motion"] .btn-ghost:hover{background:#121212;border-color:#121212;color:#fff}
body[data-template="motion"] .btn-ghost i,body[data-template="motion"] .btn-primary i{color:inherit}
body[data-template="motion"] #app h1{background:none;-webkit-text-fill-color:initial;color:#121212;font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif}

/* Motion: layout container padding & alignment */
body[data-template="motion"] .pad{padding-left:clamp(24px,5vw,64px);padding-right:clamp(24px,5vw,64px);max-width:1240px;margin-left:auto;margin-right:auto;box-sizing:border-box}
body[data-template="motion"] .motion-nav{max-width:none}
body[data-template="motion"] section.pad{padding-top:clamp(56px,9vw,110px);padding-bottom:clamp(56px,9vw,110px)}

/* Motion: subdomain pages - full distinctive layout */
body[data-template="motion"] .proj{background:#fff;border:1px solid #dedcd5;border-radius:16px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.06)}
body[data-template="motion"] .proj:hover{box-shadow:0 20px 40px rgba(0,0,0,.1)}
body[data-template="motion"] .proj-top{background:transparent;border-radius:12px 12px 0 0}
body[data-template="motion"] .proj-top::before{display:none}
body[data-template="motion"] .proj-body h3{color:#121212}
body[data-template="motion"] .proj-body p{color:#6d6d68}

/* Motion: scroll progress bar (top of page) */
#bar{position:fixed;top:0;left:0;width:100%;height:2px;background:#ff4d1c;transform:scaleX(0);transform-origin:left;z-index:200;display:none}
body[data-template="motion"] #bar{display:block}
body[data-template="gallery"] #bar, body[data-template="studio"] #bar, body[data-template="noir"] #bar, body[data-template="museum"] #bar, body[data-template="catalog"] #bar, body[data-template="bloom"] #bar{display:block}
body[data-template="gallery"] #bar, body[data-template="studio"] #bar, body[data-template="noir"] #bar, body[data-template="museum"] #bar, body[data-template="catalog"] #bar, body[data-template="bloom"] #bar{background:#4f46e5}

/* Motion: pointer-following blob */
body[data-template="motion"] .blob{position:fixed;top:0;left:0;width:46vmax;height:46vmax;border-radius:50%;background:radial-gradient(circle,rgba(255,77,28,.16),transparent 62%);pointer-events:none;will-change:transform;z-index:0;display:block}
body[data-template="motion"] #landing,body[data-template="motion"] #app{position:relative;z-index:1}
body[data-template="gallery"] .blob, body[data-template="studio"] .blob, body[data-template="noir"] .blob, body[data-template="museum"] .blob, body[data-template="catalog"] .blob, body[data-template="bloom"] .blob{position:fixed;top:0;left:0;width:46vmax;height:46vmax;border-radius:50%;background:radial-gradient(circle,rgba(79,70,229,.18),transparent 62%);pointer-events:none;will-change:transform;z-index:0;display:block}
body[data-template="gallery"] #landing,body[data-template="gallery"] #app,body[data-template="studio"] #landing,body[data-template="studio"] #app,body[data-template="noir"] #landing,body[data-template="noir"] #app,body[data-template="museum"] #landing,body[data-template="museum"] #app,body[data-template="catalog"] #landing,body[data-template="catalog"] #app,body[data-template="bloom"] #landing,body[data-template="bloom"] #app{position:relative;z-index:1}

/* Motion: pointer-following preview card */
body[data-template="motion"] .pv{position:fixed;top:0;left:0;width:290px;height:195px;pointer-events:none;z-index:40;will-change:transform;display:none}
body[data-template="motion"] .pv.on{display:block}
body[data-template="motion"] .pv i{display:block;width:100%;height:100%;border-radius:14px;opacity:0;transform:scale(.7) rotate(-3deg);transition:opacity .3s,transform .6s var(--ease);box-shadow:0 20px 50px rgba(0,0,0,.18)}
body[data-template="motion"] .pv.on i{opacity:1;transform:none}
body[data-template="gallery"] .pv, body[data-template="studio"] .pv, body[data-template="noir"] .pv, body[data-template="museum"] .pv, body[data-template="catalog"] .pv, body[data-template="bloom"] .pv{position:fixed;top:0;left:0;width:290px;height:195px;pointer-events:none;z-index:40;will-change:transform;display:none}
body[data-template="gallery"] .pv.on, body[data-template="studio"] .pv.on, body[data-template="noir"] .pv.on, body[data-template="museum"] .pv.on, body[data-template="catalog"] .pv.on, body[data-template="bloom"] .pv.on{display:block}
body[data-template="gallery"] .pv i, body[data-template="studio"] .pv i, body[data-template="noir"] .pv i, body[data-template="museum"] .pv i, body[data-template="catalog"] .pv i, body[data-template="bloom"] .pv i{display:block;width:100%;height:100%;border-radius:14px;opacity:0;transform:scale(.7) rotate(-3deg);transition:opacity .3s,transform .6s var(--ease);box-shadow:0 20px 50px rgba(79,70,229,.18)}
body[data-template="gallery"] .pv.on i, body[data-template="studio"] .pv.on i, body[data-template="noir"] .pv.on i, body[data-template="museum"] .pv.on i, body[data-template="catalog"] .pv.on i, body[data-template="bloom"] .pv.on i{opacity:1;transform:none}

/* Motion: hero word-by-word reveal */
body[data-template="motion"] .lx-title{color:#121212;-webkit-text-fill-color:#121212}
body[data-template="motion"] .lx-title .w{display:inline-block;overflow:hidden;padding-bottom:.1em;vertical-align:bottom}
body[data-template="motion"] .lx-title .w>span{display:inline-block;transform:translateY(105%);animation:motionUp 1.1s var(--ease) forwards;animation-delay:calc(var(--i)*100ms + 150ms);color:#121212;-webkit-text-fill-color:#121212}
@keyframes motionUp{to{transform:none}}

/* Motion: live stats grid */
.lx-motion-stats{display:none}
body[data-template="motion"] .lx-motion-stats{display:block;padding:clamp(64px,11vw,140px) clamp(20px,5vw,56px)}
body[data-template="motion"] .lx-motion-stats .lx-logos-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6d6d68;margin:0 0 36px}
body[data-template="motion"] .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:#dedcd5;border:1px solid #dedcd5}
body[data-template="motion"] .stat{background:#f6f5f2;padding:28px 22px}
body[data-template="motion"] .stat strong{display:block;font-size:clamp(1.8rem,4vw,3rem);font-weight:500;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums;color:#121212}
body[data-template="motion"] .stat span{font-size:13px;color:#6d6d68}
body[data-template="motion"] #stats .lead{font-size:clamp(1.3rem,3vw,2.2rem);font-weight:500;letter-spacing:-.025em;line-height:1.3;max-width:28ch;margin:0 0 48px;color:#121212}

/* Motion: scroll reveal (only in motion theme) */
body[data-template="motion"] .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
body[data-template="motion"] .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){body[data-template="motion"] .rv{opacity:1;transform:none}}

/* Motion scroll reveal for visual themes (gallery, studio, noir, museum, catalog, bloom) */
body[data-template="gallery"] .rv,
body[data-template="studio"] .rv,
body[data-template="noir"] .rv,
body[data-template="museum"] .rv,
body[data-template="catalog"] .rv,
body[data-template="bloom"] .rv,
body[data-template="gallery"] .work-card,
body[data-template="studio"] .work-card,
body[data-template="noir"] .work-card,
body[data-template="museum"] .work-card,
body[data-template="catalog"] .work-card,
body[data-template="bloom"] .work-card,
body[data-template="gallery"] .museum-piece,
body[data-template="gallery"] .cat-row,
body[data-template="gallery"] .bloom-tile {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
}
body[data-template="gallery"] .rv.in,
body[data-template="studio"] .rv.in,
body[data-template="noir"] .rv.in,
body[data-template="museum"] .rv.in,
body[data-template="catalog"] .rv.in,
body[data-template="bloom"] .rv.in,
body[data-template="gallery"] .work-card.in,
body[data-template="studio"] .work-card.in,
body[data-template="noir"] .work-card.in,
body[data-template="museum"] .work-card.in,
body[data-template="catalog"] .work-card.in,
body[data-template="bloom"] .work-card.in,
body[data-template="gallery"] .museum-piece.in,
body[data-template="gallery"] .cat-row.in,
body[data-template="gallery"] .bloom-tile.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion:reduce){
  body[data-template="gallery"] .rv, body[data-template="studio"] .rv, body[data-template="noir"] .rv, body[data-template="museum"] .rv, body[data-template="catalog"] .rv, body[data-template="bloom"] .rv,
  body[data-template="gallery"] .work-card, body[data-template="studio"] .work-card, body[data-template="noir"] .work-card, body[data-template="museum"] .work-card, body[data-template="catalog"] .work-card, body[data-template="bloom"] .work-card,
  body[data-template="gallery"] .museum-piece, body[data-template="gallery"] .cat-row, body[data-template="gallery"] .bloom-tile {
    opacity: 1; transform: none;
  }
}

/* Motion Flow: unified visual theme UI improvements (non-motion themes) */
body[data-template="gallery"], body[data-template="studio"], body[data-template="noir"], body[data-template="museum"], body[data-template="catalog"], body[data-template="bloom"]{
  --motion-accent:#2563eb;
  --motion-accent-glow:rgba(37,99,235,.35);
  --motion-bg:#f6f5f2;
  --motion-surface:#ffffff;
  --motion-text:#121212;
  --motion-muted:#6d6d68;
}

body[data-template="gallery"] .motion-nav, body[data-template="studio"] .motion-nav, body[data-template="noir"] .motion-nav, body[data-template="museum"] .motion-nav, body[data-template="catalog"] .motion-nav, body[data-template="bloom"] .motion-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding-top:16px;padding-bottom:16px;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.06)}
body[data-template="gallery"] .motion-nav .logo, body[data-template="studio"] .motion-nav .logo, body[data-template="noir"] .motion-nav .logo, body[data-template="museum"] .motion-nav .logo, body[data-template="catalog"] .motion-nav .logo, body[data-template="bloom"] .motion-nav .logo{
  font-weight:700;letter-spacing:-.03em;color:#121212;font-size:18px}
body[data-template="gallery"] .motion-nav nav, body[data-template="studio"] .motion-nav nav, body[data-template="noir"] .motion-nav nav, body[data-template="museum"] .motion-nav nav, body[data-template="catalog"] .motion-nav nav, body[data-template="bloom"] .motion-nav nav{
  display:flex;gap:clamp(16px,3vw,40px);align-items:center;font-size:14px;font-weight:500}
body[data-template="gallery"] .motion-nav nav a, body[data-template="studio"] .motion-nav nav a, body[data-template="noir"] .motion-nav nav a, body[data-template="museum"] .motion-nav nav a, body[data-template="catalog"] .motion-nav nav a, body[data-template="bloom"] .motion-nav nav a{color:#6d6d68}
body[data-template="gallery"] .motion-nav nav a:hover, body[data-template="studio"] .motion-nav nav a:hover, body[data-template="noir"] .motion-nav nav a:hover, body[data-template="museum"] .motion-nav nav a:hover, body[data-template="catalog"] .motion-nav nav a:hover, body[data-template="bloom"] .motion-nav nav a:hover{color:#2563eb}

/* Work row hover: reveal image preview on card hover */
body[data-template="gallery"] .work-row, body[data-template="studio"] .work-row, body[data-template="noir"] .work-row, body[data-template="museum"] .work-row, body[data-template="catalog"] .work-row, body[data-template="bloom"] .work-row{
  position:relative;display:flex;align-items:center;gap:20px;padding:22px 24px;border-radius:18px;background:var(--motion-surface);border:1px solid rgba(0,0,0,.08);cursor:pointer;transition:all .4s var(--ease);margin-bottom:16px}
body[data-template="gallery"] .work-row:hover, body[data-template="studio"] .work-row:hover, body[data-template="noir"] .work-row:hover, body[data-template="museum"] .work-row:hover, body[data-template="catalog"] .work-row:hover, body[data-template="bloom"] .work-row:hover{
  transform:translateX(8px);box-shadow:0 20px 40px rgba(0,0,0,.08);border-color:rgba(37,99,235,.25)}
body[data-template="gallery"] .work-row .work-title, body[data-template="studio"] .work-row .work-title, body[data-template="noir"] .work-row .work-title, body[data-template="museum"] .work-row .work-title, body[data-template="catalog"] .work-row .work-title, body[data-template="bloom"] .work-row .work-title{
  font-size:17px;font-weight:700;color:#121212;min-width:200px;transition:color .3s var(--ease)}
body[data-template="gallery"] .work-row:hover .work-title, body[data-template="studio"] .work-row:hover .work-title, body[data-template="noir"] .work-row:hover .work-title, body[data-template="museum"] .work-row:hover .work-title, body[data-template="catalog"] .work-row:hover .work-title, body[data-template="bloom"] .work-row:hover .work-title{color:#2563eb}
body[data-template="gallery"] .work-row .work-category, body[data-template="studio"] .work-row .work-category, body[data-template="noir"] .work-row .work-category, body[data-template="museum"] .work-row .work-category, body[data-template="catalog"] .work-row .work-category, body[data-template="bloom"] .work-row .work-category{
  font-size:13px;font-weight:600;color:#2563eb;background:rgba(37,99,235,.1);padding:4px 12px;border-radius:8px;margin-left:auto}
body[data-template="gallery"] .work-row:hover .work-category, body[data-template="studio"] .work-row:hover .work-category, body[data-template="noir"] .work-row:hover .work-category, body[data-template="museum"] .work-row:hover .work-category, body[data-template="catalog"] .work-row:hover .work-category, body[data-template="bloom"] .work-row:hover .work-category{background:#2563eb;color:#fff}

/* Hero section polish for visual themes */
body[data-template="gallery"] .hero .lx-title, body[data-template="studio"] .hero .lx-title, body[data-template="noir"] .hero .lx-title, body[data-template="museum"] .hero .lx-title, body[data-template="catalog"] .hero .lx-title, body[data-template="bloom"] .hero .lx-title{
  font-size:clamp(38px,8vw,80px);font-weight:700;letter-spacing:-.04em;line-height:1.05;color:#121212}
body[data-template="gallery"] .hero .lx-title .w>span, body[data-template="studio"] .hero .lx-title .w>span, body[data-template="noir"] .hero .lx-title .w>span, body[data-template="museum"] .hero .lx-title .w>span, body[data-template="catalog"] .hero .lx-title .w>span, body[data-template="bloom"] .hero .lx-title .w>span{color:#121212;-webkit-text-fill-color:#121212}
body[data-template="gallery"] .hero-meta, body[data-template="studio"] .hero-meta, body[data-template="noir"] .hero-meta, body[data-template="museum"] .hero-meta, body[data-template="catalog"] .hero-meta, body[data-template="bloom"] .hero-meta{
  display:flex;align-items:center;gap:14px;margin-top:24px}
body[data-template="gallery"] .hero-meta p.rv, body[data-template="studio"] .hero-meta p.rv, body[data-template="noir"] .hero-meta p.rv, body[data-template="museum"] .hero-meta p.rv, body[data-template="catalog"] .hero-meta p.rv, body[data-template="bloom"] .hero-meta p.rv{color:#6d6d68;font-size:16px;font-weight:400}

/* Contact section polish */
body[data-template="gallery"] section.pad.contact, body[data-template="studio"] section.pad.contact, body[data-template="noir"] section.pad.contact, body[data-template="museum"] section.pad.contact, body[data-template="catalog"] section.pad.contact, body[data-template="bloom"] section.pad.contact{
  margin-top:clamp(80px,12vw,140px)}
body[data-template="gallery"] .contact .big, body[data-template="studio"] .contact .big, body[data-template="noir"] .contact .big, body[data-template="museum"] .contact .big, body[data-template="catalog"] .contact .big, body[data-template="bloom"] .contact .big{
  font-size:clamp(24px,4vw,34px);font-weight:700;color:#121212;text-decoration:none}
body[data-template="gallery"] .contact .btn-primary, body[data-template="studio"] .contact .btn-primary, body[data-template="noir"] .contact .btn-primary, body[data-template="museum"] .contact .btn-primary, body[data-template="catalog"] .contact .btn-primary, body[data-template="bloom"] .contact .btn-primary{
  background:#ff4d1c;color:#fff;border:none;border-radius:12px;padding:14px 28px;font-weight:700;box-shadow:0 4px 16px rgba(255,77,28,.3)}
body[data-template="gallery"] .contact .btn-primary:hover, body[data-template="studio"] .contact .btn-primary:hover, body[data-template="noir"] .contact .btn-primary:hover, body[data-template="museum"] .contact .btn-primary:hover, body[data-template="catalog"] .contact .btn-primary:hover, body[data-template="bloom"] .contact .btn-primary:hover{background:#e0431a;transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,77,28,.4)}

/* About section polish */
body[data-template="gallery"] section.pad#about, body[data-template="studio"] section.pad#about, body[data-template="noir"] section.pad#about, body[data-template="museum"] section.pad#about, body[data-template="catalog"] section.pad#about, body[data-template="bloom"] section.pad#about{
  max-width:760px;margin:0 auto}

/* Motion: portfolio page layout (nav, hero, work rows, contact) */
body[data-template="motion"] .motion-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding-top:16px;padding-bottom:16px;background:color-mix(in srgb,#f6f5f2 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #dedcd5}
body[data-template="motion"] .motion-nav .logo{font-weight:600;letter-spacing:-.02em;color:#121212;font-size:17px}
body[data-template="motion"] .motion-nav nav{display:flex;gap:clamp(14px,3vw,32px);align-items:center;font-size:14px}
body[data-template="motion"] .motion-nav nav a{color:#6d6d68}
body[data-template="motion"] .motion-nav nav a:hover{color:#121212}
body[data-template="motion"] .hero{min-height:85vh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:140px;padding-bottom:clamp(40px,6vw,70px)}
body[data-template="motion"] .hero h1{margin:0;font-weight:600;font-size:clamp(2.7rem,10vw,8.6rem);line-height:.98;letter-spacing:-.05em;color:#121212}
body[data-template="motion"] .hero-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:40px;flex-wrap:wrap}
body[data-template="motion"] .hero-meta p{margin:0;max-width:34ch;color:#6d6d68}
body[data-template="motion"] .scroll{font-size:13px;color:#6d6d68;display:flex;align-items:center;gap:10px}
body[data-template="motion"] .scroll i{width:1px;height:44px;background:#dedcd5;position:relative;overflow:hidden}
body[data-template="motion"] .scroll i::after{content:"";position:absolute;inset:0;background:#ff4d1c;animation:motionDrip 2s var(--ease) infinite}
@keyframes motionDrip{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
body[data-template="motion"] .eyebrow{display:block;background:none;border:none;padding:0;border-radius:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6d6d68;margin:0 0 36px;font-weight:600}
body[data-template="motion"] .work-rows{list-style:none;margin:0;padding:0;border-bottom:1px solid #dedcd5}
body[data-template="motion"] .work-rows .row{display:grid;grid-template-columns:3rem 1fr auto auto;gap:16px;align-items:baseline;padding:28px 0;border-top:1px solid #dedcd5;transition:opacity .35s}
body[data-template="motion"] .work-rows .row b{font-weight:400;font-size:13px;color:#6d6d68}
body[data-template="motion"] .work-rows .row h3{margin:0;font-weight:500;font-size:clamp(1.4rem,3.6vw,2.7rem);letter-spacing:-.03em;line-height:1.15;color:#121212;transition:transform .6s var(--ease),color .3s}
body[data-template="motion"] .work-rows .row span{font-size:13px;color:#6d6d68}
body[data-template="motion"] .work-rows .row:hover h3{transform:translateX(14px);color:#ff4d1c}
@media (hover:hover){body[data-template="motion"] .work-rows:hover .row:not(:hover){opacity:.35}}
body[data-template="motion"] .skills{display:flex;flex-wrap:wrap;gap:8px}
body[data-template="motion"] .skill{background:rgba(255,77,28,.09);color:#c2410c;border-radius:100px;padding:5px 14px;font-size:.85rem;font-weight:600}
body[data-template="motion"] .contact a.big{display:inline-block;font-size:clamp(1.8rem,7.5vw,6.5rem);font-weight:600;letter-spacing:-.045em;line-height:1.05;color:#121212;background:linear-gradient(#ff4d1c,#ff4d1c) 0 100%/0 .06em no-repeat;transition:background-size .7s var(--ease),color .3s;overflow-wrap:anywhere}
body[data-template="motion"] .contact a.big:hover{background-size:100% .06em;color:#ff4d1c}
body[data-template="motion"] .lead{font-size:clamp(1.3rem,3vw,2.2rem);font-weight:500;letter-spacing:-.025em;line-height:1.3;max-width:28ch;margin:0 0 48px;color:#121212}
body[data-template="motion"] .rs-embed{max-width:1240px;margin:0 auto;padding-left:clamp(24px,5vw,64px);padding-right:clamp(24px,5vw,64px);padding-top:clamp(48px,8vw,90px);padding-bottom:clamp(48px,8vw,90px);box-sizing:border-box}
body[data-template="motion"] .rs-embed-card{background:#fff;border:1px solid #dedcd5;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.06);color:#121212}
body[data-template="motion"] .rs-embed-card h3{color:#121212}
body[data-template="motion"] footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:28px;border-top:1px solid #dedcd5;font-size:13px;color:#6d6d68}
body[data-template="motion"] #app{padding:0}
body[data-template="motion"] #app>nav:not(.motion-nav){display:none}
@media(max-width:720px){body[data-template="motion"] .work-rows .row{grid-template-columns:2.2rem 1fr auto}body[data-template="motion"] .work-rows .row span:nth-of-type(1){display:none}body[data-template="motion"] .motion-nav .hide{display:none}}

/* Dark Pro (Dark portfolio style): sidebar nav, yellow/gold accent, dark cards */
body[data-template="darkpro"]{background:#0b0b0c;color:#f2f1ed}
body[data-template="darkpro"] .bg-fx,body[data-template="darkpro"] .grid-overlay{display:none}
body[data-template="darkpro"] .works-grid{gap:22px}
body[data-template="darkpro"] .work-card{background:#1a1a1c;border:1px solid #242426;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.3)}
body[data-template="darkpro"] .work-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(251,191,36,.15)}
body[data-template="darkpro"] .work-card img{border-radius:8px 8px 0 0;object-fit:cover}
body[data-template="darkpro"] .work-card .work-meta{padding:16px}
body[data-template="darkpro"] .work-card b{font-size:15px;font-weight:600;color:#f2f1ed}
body[data-template="darkpro"] .work-card small{display:block;margin-top:4px;font-size:12px;color:#8b8b86}
body[data-template="darkpro"] .btn-primary{background:#fbbf24;color:#0b0b0c;border:none}
body[data-template="darkpro"] .btn-primary:hover{background:#f59e0b}
body[data-template="darkpro"] #app h1{color:#fbbf24}

/* Dark Pro: sidebar navigation */
.dash-sidebar{display:none;position:fixed;left:0;top:0;bottom:0;width:240px;background:#0b0b0c;border-right:1px solid #242426;padding:20px;flex-direction:column;z-index:100;overflow-y:auto}
.dash-sidebar .sidebar-logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;color:#fbbf24;text-decoration:none;margin-bottom:22px}
.dash-sidebar .sidebar-logo span{display:flex;flex-direction:column;line-height:1.1}
.dash-sidebar .sidebar-logo small{font-size:10.5px;font-weight:500;color:#8b8b86;letter-spacing:.1em;text-transform:uppercase}
.dash-sidebar .sidebar-user{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px;border-radius:12px;background:#1a1a1c;border:1px solid #242426;margin-bottom:20px}
.dash-sidebar .sidebar-avatar{width:30px;height:30px;border-radius:50%;background:#242426;display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:#fbbf24;flex-shrink:0}
.dash-sidebar .sidebar-user .mono{width:100%;word-break:break-all}
.dash-sidebar .sidebar-tabs{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:2px}
.dash-sidebar .sidebar-tab{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:none;border-left:3px solid transparent;color:#8b8b86;padding:11px 12px;border-radius:8px;font-size:13.5px;font-weight:600;text-align:left;cursor:pointer;transition:all .2s var(--ease)}
.dash-sidebar .sidebar-tab:hover{background:#1a1a1c;color:#f2f1ed}
.dash-sidebar .sidebar-tab.active{background:#1a1a1c;color:#fbbf24;border-left-color:#fbbf24}
.dash-sidebar .sidebar-tab i{width:16px;text-align:center;flex-shrink:0}
.dash-sidebar .sidebar-footer{margin-top:auto;padding-top:16px;border-top:1px solid #242426}
body[data-template="darkpro"] .lx-nav{display:none}
body[data-template="darkpro"] #dashboardApp{background:#0b0b0c;color:#f2f1ed}
body[data-template="darkpro"] #dashboardApp .card{background:#1a1a1c;border-color:#242426;color:#f2f1ed}
body[data-template="darkpro"] #dashboardApp .card p{color:#8b8b86}
body[data-template="darkpro"] #dashboardApp input,body[data-template="darkpro"] #dashboardApp textarea{background:#0b0b0c;border-color:#242426;color:#f2f1ed}
body[data-template="darkpro"] #dashboardApp .dash-tab-btn{background:#1a1a1c;border-color:#242426;color:#8b8b86}
body[data-template="darkpro"] #dashboardApp .dash-tab-btn.active{background:#fbbf24;color:#0b0b0c;border-color:#fbbf24}

body[data-template="darkpro"] .card{background:#141416;border:1px solid #242426;color:#f2f1ed}
body[data-template="darkpro"] .card h3{color:#f2f1ed}
body[data-template="darkpro"] .card p{color:#8b8b86}

/* Dark Pro: portfolio page layout (sidebar + tabbed main) */
body[data-template="darkpro"] .dp-shell{display:flex;gap:25px;max-width:1200px;margin:60px auto 0;padding:0 12px 60px;align-items:stretch}
body[data-template="darkpro"] .dp-sidebar{width:280px;flex-shrink:0;background:#1a1a1c;border:1px solid #242426;border-radius:20px;padding:24px;box-shadow:0 16px 30px rgba(0,0,0,.25);position:sticky;top:30px;align-self:flex-start}
body[data-template="darkpro"] .dp-info{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
body[data-template="darkpro"] .dp-avatar{width:130px;height:130px;border-radius:22px;overflow:hidden;background:linear-gradient(135deg,#fbbf24,#f59e0b);display:grid;place-items:center;font-size:48px;font-weight:800;color:#0b0b0c;margin:0}
body[data-template="darkpro"] .dp-avatar img{width:100%;height:100%;object-fit:cover}
body[data-template="darkpro"] .dp-name{margin:0;font-size:22px;font-weight:600;color:#f2f1ed;letter-spacing:-.01em}
body[data-template="darkpro"] .dp-title{margin:8px 0 0;font-size:12.5px;font-weight:400;color:#0b0b0c;background:#fbbf24;padding:4px 12px;border-radius:8px;display:inline-block}
body[data-template="darkpro"] .dp-sep{height:1px;background:#242426;margin:22px 0}
body[data-template="darkpro"] .dp-contacts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
body[data-template="darkpro"] .dp-contacts li{display:flex;align-items:center;gap:12px;font-size:13.5px;color:#8b8b86}
body[data-template="darkpro"] .dp-contacts i{width:30px;height:30px;border-radius:8px;background:#242426;color:#fbbf24;display:grid;place-items:center;font-size:13px;flex-shrink:0}
body[data-template="darkpro"] .dp-contacts a{color:#f2f1ed;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-template="darkpro"] .dp-contacts a:hover{color:#fbbf24}
body[data-template="darkpro"] .dp-social{list-style:none;margin:0;padding:0 0 4px;display:flex;gap:14px;justify-content:center}
body[data-template="darkpro"] .dp-social a{color:#8b8b86;font-size:18px}
body[data-template="darkpro"] .dp-social a:hover{color:#fbbf24}
body[data-template="darkpro"] .dp-main{flex:1;min-width:0;background:#1a1a1c;border:1px solid #242426;border-radius:20px;padding:28px;box-shadow:0 16px 30px rgba(0,0,0,.25)}
body[data-template="darkpro"] .dp-nav ul{list-style:none;margin:0 0 24px;padding:0;display:flex;gap:22px;flex-wrap:wrap}
body[data-template="darkpro"] .dp-nav-link{background:none;border:none;color:#8b8b86;font-size:14.5px;font-weight:500;cursor:pointer;padding:4px 0;transition:color .25s}
body[data-template="darkpro"] .dp-nav-link:hover{color:#fbbf24}
body[data-template="darkpro"] .dp-nav-link.active{color:#fbbf24}
body[data-template="darkpro"] .dp-page{display:none}
body[data-template="darkpro"] .dp-page.active{display:block;animation:dpFade .45s ease backwards}
@keyframes dpFade{from{opacity:0}to{opacity:1}}
body[data-template="darkpro"] .dp-h2{font-size:24px;font-weight:600;color:#f2f1ed;margin:0 0 8px;position:relative;padding-bottom:8px}
body[data-template="darkpro"] .dp-h2::after{content:"";position:absolute;bottom:0;left:0;width:34px;height:3px;border-radius:3px;background:linear-gradient(90deg,#fbbf24,#f59e0b)}
body[data-template="darkpro"] .dp-h3{font-size:17px;font-weight:600;color:#f2f1ed;margin:26px 0 12px}
body[data-template="darkpro"] .dp-text{color:#8b8b86;font-size:14.5px;line-height:1.7;margin:0 0 14px}
body[data-template="darkpro"] .dp-skills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
body[data-template="darkpro"] .dp-skills li{background:#242426;border-radius:8px;padding:7px 14px;font-size:13px;color:#f2f1ed}
body[data-template="darkpro"] .dp-projects{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:24px}
body[data-template="darkpro"] .dp-projects .proj-img{position:relative;width:100%;height:170px;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#232326 0%,#151517 100%);border:1px solid rgba(255,255,255,.06);margin-bottom:12px;display:flex;align-items:center;justify-content:center}
body[data-template="darkpro"] .dp-projects .proj-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
body[data-template="darkpro"] .dp-projects .proj-item a{text-decoration:none;display:block}
body[data-template="darkpro"] .dp-projects .proj-item:hover .proj-img img{transform:scale(1.08)}
body[data-template="darkpro"] .dp-projects .proj-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;box-sizing:border-box;transition:all .35s var(--ease)}
body[data-template="darkpro"] .dp-projects .proj-item:hover .proj-placeholder{background:linear-gradient(135deg,#29292e 0%,#19191c 100%)}
body[data-template="darkpro"] .dp-projects .proj-placeholder-icon{width:50px;height:50px;border-radius:14px;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.25);color:#fbbf24;font-size:22px;display:grid;place-items:center;transition:transform .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease)}
body[data-template="darkpro"] .dp-projects .proj-item:hover .proj-placeholder-icon{transform:scale(1.1);background:rgba(251,191,36,.18);box-shadow:0 0 20px rgba(251,191,36,.25)}
body[data-template="darkpro"] .dp-projects .proj-placeholder-title{font-size:12px;color:#8b8b86;font-weight:600;letter-spacing:.02em;text-align:center;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-template="darkpro"] .dp-projects .proj-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.85);width:44px;height:44px;border-radius:12px;background:#1a1a1c;border:1px solid rgba(251,191,36,.3);color:#fbbf24;display:grid;place-items:center;font-size:18px;opacity:0;transition:opacity .3s,transform .3s;z-index:2;box-shadow:0 8px 24px rgba(0,0,0,.6)}
body[data-template="darkpro"] .dp-projects .proj-item:hover .proj-icon{opacity:1;transform:translate(-50%,-50%) scale(1)}
body[data-template="darkpro"] .dp-projects .proj-title{font-size:15px;font-weight:600;color:#f2f1ed;margin:0 0 3px}
body[data-template="darkpro"] .dp-projects .proj-cat{font-size:13px;color:#8b8b86;margin:0}
body[data-template="darkpro"] .dp-contact-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
body[data-template="darkpro"] .dp-contact-links a{color:#8b8b86;transition:color .25s}
body[data-template="darkpro"] .dp-contact-links a:hover{color:#fbbf24}
body[data-template="darkpro"] .dp-contact-links .btn-primary{background:#fbbf24;color:#0b0b0c;border:none}
body[data-template="darkpro"] .dp-contact-links .btn-primary:hover{background:#f59e0b}
body[data-template="darkpro"] .dp-contact-links .btn-ghost{background:#242426;border:1px solid #3a3a3c;color:#f2f1ed}
body[data-template="darkpro"] .dp-contact-links .btn-ghost:hover{background:#3a3a3c;color:#fbbf24;border-color:#fbbf24}
@media(max-width:900px){body[data-template="darkpro"] .dp-shell{flex-direction:column}body[data-template="darkpro"] .dp-sidebar{width:100%;position:static}}

/* Fullpage: portfolio page layout (full-height sections + horizontal slider) */
body[data-template="fullpage"] .fp-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #e5e5e5}
body[data-template="fullpage"] .fp-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:#1c1917;letter-spacing:-.01em}
body[data-template="fullpage"] .fp-links{list-style:none;margin:0;padding:0;display:flex;gap:24px}
body[data-template="fullpage"] .fp-links a{font-size:13px;font-weight:700;letter-spacing:.08em;color:#484848}
body[data-template="fullpage"] .fp-links a:hover{color:#ff6363}
body[data-template="fullpage"] .fp-fullpage{scroll-snap-type:y proximity}
body[data-template="fullpage"] .fp-section{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:110px 24px 60px;scroll-snap-align:start;position:relative}
body[data-template="fullpage"] .fp-h1{font-size:clamp(2.8rem,9vw,7rem);font-weight:800;letter-spacing:-.03em;color:#1c1917;line-height:1;margin:0}
body[data-template="fullpage"] .fp-h2{font-size:clamp(1.6rem,4vw,2.6rem);font-weight:800;letter-spacing:.04em;color:#ff6363;margin:0 0 24px}
body[data-template="fullpage"] .fp-typed{font-size:clamp(1rem,2.4vw,1.5rem);color:#484848;margin:16px 0 0;font-weight:600;min-height:1.4em}
body[data-template="fullpage"] .fp-typed::after{content:"|";color:#ff6363;animation:fpBlink 1s step-end infinite}
@keyframes fpBlink{50%{opacity:0}}
body[data-template="fullpage"] .fp-text{max-width:62ch;color:#484848;font-size:16px;line-height:1.75;margin:0 0 16px}
body[data-template="fullpage"] .fp-scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);color:#ff6363;font-size:26px;animation:fpBounce 2s infinite}
@keyframes fpBounce{0%,20%,50%,80%,100%{transform:translate(-50%,0)}40%{transform:translate(-50%,-14px)}60%{transform:translate(-50%,-7px)}}
body[data-template="fullpage"] .fp-slider{display:flex;gap:24px;overflow-x:auto;padding:10px 0 24px;scroll-snap-type:x mandatory;max-width:100vw;scroll-padding-inline:24px}
body[data-template="fullpage"] .fp-slider::-webkit-scrollbar{height:6px}
body[data-template="fullpage"] .fp-slider::-webkit-scrollbar-thumb{background:#ff6363;border-radius:99px}
body[data-template="fullpage"] .fp-slide{flex:0 0 min(460px,78vw);scroll-snap-align:center;background:#fff;border:2px solid #ff6363;border-radius:10px;padding:26px;text-align:left;box-shadow:0 10px 30px rgba(0,0,0,.08)}
body[data-template="fullpage"] .fp-slide h3{margin:0 0 8px;font-size:20px;font-weight:800;color:#1c1917}
body[data-template="fullpage"] .fp-slide p{margin:0 0 16px;color:#484848;font-size:14.5px;line-height:1.65}
body[data-template="fullpage"] .fp-skills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
body[data-template="fullpage"] .fp-skill{background:#fff1f1;color:#d63b3b;border-radius:6px;padding:5px 12px;font-size:13px;font-weight:700}
body[data-template="fullpage"] .fp-contact-links{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:20px}
body[data-template="fullpage"] .fp-dots{position:fixed;right:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:40}
body[data-template="fullpage"] .fp-dots i{width:9px;height:9px;border-radius:50%;background:#e5e5e5;display:block}
/* Footer contrast for the new themes */
body[data-template="fullpage"] .foot,body[data-template="fullpage"] footer .wrap.foot b{color:#484848!important}
body[data-template="fullpage"] footer .socials a{color:#484848!important}
body[data-template="fullpage"] footer .socials a:hover{color:#ff6363!important}
body[data-template="darkpro"] .foot,body[data-template="darkpro"] footer .wrap.foot b{color:#8b8b86!important}
body[data-template="darkpro"] footer .socials a{color:#8b8b86!important}
body[data-template="darkpro"] footer .socials a:hover{color:#fbbf24!important}
@media(max-width:720px){body[data-template="fullpage"] .fp-links li:nth-child(2){display:none}}

/* Dark Pro: subdomain pages */
body[data-template="darkpro"] .proj{background:#1a1a1c;border:1px solid #242426;border-radius:12px;overflow:hidden}
body[data-template="darkpro"] .proj:hover{box-shadow:0 16px 40px rgba(251,191,36,.15)}
body[data-template="darkpro"] .proj-top{background:transparent}
body[data-template="darkpro"] .proj-top::before{display:none}
body[data-template="darkpro"] .proj-body h3{color:#f2f1ed}
body[data-template="darkpro"] .proj-body p{color:#8b8b86}

/* Fullpage Scroll (Brad Engelhardt style): fullpage sections, horizontal slider, red accent */
body[data-template="fullpage"]{background:#fff;color:#1c1917}
body[data-template="fullpage"] .bg-fx,body[data-template="fullpage"] .grid-overlay{display:none}
body[data-template="fullpage"] .works-grid{gap:30px}
body[data-template="fullpage"] .work-card{background:#fff;border:2px solid #ff6363;border-radius:8px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.08)}
body[data-template="fullpage"] .work-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(255,99,99,.2)}
body[data-template="fullpage"] .work-card img{border-radius:4px 4px 0 0;object-fit:cover}
body[data-template="fullpage"] .work-card .work-meta{padding:16px}
body[data-template="fullpage"] .work-card b{font-size:15px;font-weight:700;color:#1c1917}
body[data-template="fullpage"] .work-card small{display:block;margin-top:4px;font-size:12px;color:#78716c}
body[data-template="fullpage"] .btn-primary{background:#ff6363;color:#fff;border:none}
body[data-template="fullpage"] .btn-primary:hover{background:#e04e4a}
body[data-template="fullpage"] .btn-ghost{background:#fff;border:1.5px solid #d4d2cb;color:#1c1917;box-shadow:0 1px 3px rgba(0,0,0,.06);font-weight:600;transition:all .2s var(--ease)}
body[data-template="fullpage"] .btn-ghost:hover{background:#ff6363;border-color:#ff6363;color:#fff;box-shadow:0 4px 14px rgba(255,99,99,.35)}
body[data-template="fullpage"] .btn-ghost i,body[data-template="fullpage"] .btn-primary i{color:inherit}
body[data-template="fullpage"] .fp-slide .btn-ghost{background:#fff;border:1.5px solid #ff6363;color:#ff6363;font-weight:700}
body[data-template="fullpage"] .fp-slide .btn-ghost:hover{background:#ff6363;border-color:#ff6363;color:#fff;box-shadow:0 4px 12px rgba(255,99,99,.3)}
body[data-template="fullpage"] .card{background:#fff;border:1px solid #e5e5e5;box-shadow:0 10px 30px rgba(0,0,0,.06);color:#1c1917}
body[data-template="fullpage"] .card h3{color:#1c1917}
body[data-template="fullpage"] .card p{color:#484848}
body[data-template="fullpage"] .eyebrow{color:#ff6363;background:#fff1f1;border-color:rgba(255,99,99,.25)}
body[data-template="fullpage"] .grad{color:#ff6363;background:none;-webkit-text-fill-color:#ff6363}
body[data-template="fullpage"] #app h1{color:#ff6363}

/* Fullpage: horizontal slider for portfolio section */
body[data-template="fullpage"] .content-slide{display:flex;overflow-x:auto;padding:24px 0;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
body[data-template="fullpage"] .content-slide::-webkit-scrollbar{display:none}
body[data-template="fullpage"] .slide{flex:0 0 480px;margin-right:24px;scroll-snap-align:start}
body[data-template="fullpage"] .slide img{width:100%;border-radius:8px;box-shadow:0 20px 40px rgba(0,0,0,.15)}
body[data-template="fullpage"] .slide h1{font-size:1.8rem;font-weight:700;margin:16px 0 8px;color:#1c1917}
body[data-template="fullpage"] .slide p{color:#78716c;font-size:1rem}

/* Fullpage sections */
body[data-template="fullpage"] section{min-height:100vh;padding:120px 24px;display:flex;flex-direction:column;justify-content:center;align-items:center}
body[data-template="fullpage"] .content{max-width:960px;margin:0 auto;padding:0 24px}
body[data-template="fullpage"] .lx-hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 24px}
body[data-template="fullpage"] .lx-hero-inner{max-width:800px;margin:0 auto;padding:0 24px}
body[data-template="fullpage"] .lx-title{font-size:clamp(3rem,8vw,7rem);font-weight:700;line-height:1.1;letter-spacing:-0.03em;margin-bottom:24px;color:#1c1917}
body[data-template="fullpage"] .lx-sub{font-size:clamp(1.1rem,2vw,1.5rem);color:#78716c;max-width:60ch;margin:0 auto 48px;line-height:1.6}
body[data-template="fullpage"] .lx-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
body[data-template="fullpage"] .lx-btn-lg{background:#ff6363;color:#fff;border:none;padding:16px 32px;font-size:18px;font-weight:700;border-radius:4px}
body[data-template="fullpage"] .lx-btn-lg:hover{background:#e04e4a}
body[data-template="fullpage"] .lx-btn-ghost{border:2px solid #ff6363;color:#ff6363;padding:16px 32px;font-weight:700}
body[data-template="fullpage"] .lx-btn-ghost:hover{background:#ff6363;color:#fff}
body[data-template="fullpage"] .lx-btn-lg:hover{background:#e04e4a}
body[data-template="fullpage"] .lx-btn-ghost:hover{background:#ff6363;color:#fff}

/* Fullpage sections */
body[data-template="fullpage"] section{min-height:100vh;padding:120px 24px;display:flex;flex-direction:column;justify-content:center;align-items:center}
body[data-template="fullpage"] .content{max-width:960px;margin:0 auto;padding:0 24px}
body[data-template="fullpage"] .lx-hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 24px}
body[data-template="fullpage"] .lx-hero-inner{max-width:800px;margin:0 auto;padding:0 24px}
body[data-template="fullpage"] .lx-title{font-size:clamp(3rem,8vw,7rem);font-weight:700;line-height:1.1;letter-spacing:-0.03em;margin-bottom:24px;color:#1c1917}
body[data-template="fullpage"] .lx-sub{font-size:clamp(1.1rem,2vw,1.5rem);color:#78716c;max-width:60ch;margin:0 auto 48px;line-height:1.6}
body[data-template="fullpage"] .lx-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
body[data-template="fullpage"] .lx-btn-lg{background:#ff6363;color:#fff;border:none;padding:16px 32px;font-size:18px;font-weight:700;border-radius:4px}
body[data-template="fullpage"] .lx-btn-lg:hover{background:#e04e4a}
body[data-template="fullpage"] .lx-btn-ghost{border:2px solid #ff6363;color:#ff6363;padding:16px 32px;font-weight:700}
body[data-template="fullpage"] .lx-btn-ghost:hover{background:#ff6363;color:#fff}

/* Fullpage: subdomain pages */
body[data-template="fullpage"] .proj{background:#fff;border:2px solid #ff6363;border-radius:8px;overflow:hidden}
body[data-template="fullpage"] .proj:hover{box-shadow:0 12px 32px rgba(255,99,99,.2)}
body[data-template="fullpage"] .proj-top{background:transparent}
body[data-template="fullpage"] .proj-top::before{display:none}
body[data-template="fullpage"] .proj-body h3{color:#1c1917}
body[data-template="fullpage"] .proj-body p{color:#484848}

/* Works tab: gallery grid (masonry — full images, no hard crops) */
.works-grid{display:block;columns:3 260px;column-gap:14px}
@media(max-width:900px){.works-grid{columns:2 240px}}
@media(max-width:620px){.works-grid{columns:1}}
/* Works tab: work card + cover badge */
.work-card{background:rgba(255,255,255,.04);border:1px solid var(--stroke);border-radius:14px;overflow:hidden;break-inside:avoid;margin:0 0 14px}
.work-card img{width:100%;height:auto;display:block;background:#0b1226}
.work-card .work-meta{padding:12px 14px;display:grid;gap:6px}
.work-card .work-meta b{font-size:15px}
.work-card .work-meta small{color:var(--muted);font-size:12.5px}
.work-card input{background:rgba(0,0,0,.3);border:1px solid var(--stroke);border-radius:8px;padding:8px 10px;color:#fff;font-size:13px;width:100%}
.work-cover{display:inline-block;font-size:11px;font-weight:800;padding:3px 9px;border-radius:100px;background:rgba(163,230,53,.15);border:1px solid rgba(163,230,53,.45);color:#d9f99d}
.work-row-btns{display:flex;gap:6px;flex-wrap:wrap}
/* Work buttons must stay readable on the white studio cards (white text is invisible) */
body[data-template="studio"] .work-row-btns button{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.16);color:#1c1917}
body[data-template="studio"] .work-row-btns button:hover{background:rgba(0,0,0,.1)}
body[data-template="studio"] .work-row-btns button[data-wrm]{border-color:rgba(244,63,94,.5);color:#e11d48;background:rgba(244,63,94,.08)}
/* Same contrast fix for the other light work-card templates */
body[data-template="museum"] .work-row-btns button,
body[data-template="bloom"] .work-row-btns button,
body[data-template="catalog"] .work-row-btns button{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.16);color:#1c1917}
body[data-template="museum"] .work-row-btns button:hover,
body[data-template="bloom"] .work-row-btns button:hover,
body[data-template="catalog"] .work-row-btns button:hover{background:rgba(0,0,0,.1)}
body[data-template="museum"] .work-row-btns button[data-wrm],
body[data-template="bloom"] .work-row-btns button[data-wrm],
body[data-template="catalog"] .work-row-btns button[data-wrm]{border-color:rgba(244,63,94,.5);color:#e11d48;background:rgba(244,63,94,.08)}
/* Scroll reveal (JS adds .in when visible) */
#landing .lx-section, #landing .lx-logos { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
#landing .lx-section.in, #landing .lx-logos.in { opacity: 1; transform: none; }
/* Reduced motion refinements */
#landing .lx-section, #landing .lx-logos { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
#landing .lx-section.in, #landing .lx-logos.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  #landing .lx-section, #landing .lx-logos { opacity: 1; transform: none; transition: none; }
  .lx-spark i { animation: none; opacity: .85; }
  .lx-steps::before { animation: none; transform: scaleX(1); }
  .lx-marquee .lx-logos-row { animation: none; }
  .lx-cta-banner::after { display: none; }
  .lx-btn-lg { animation: none; }
  .lx-modal-panel { animation: none; }
  .lx-lightbox img { animation: none; }
}
/* LX responsive */
@media(max-width:980px){
  .lx-bento, .lx-steps, .lx-quotes, .lx-auth-grid { grid-template-columns: 1fr; }
  .lx-win-body { grid-template-columns: 1fr; }
  .lx-win-side { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); padding-right: 0; padding-bottom: 16px; }
  .lx-bento-card.lx-span { grid-column: span 1; }
  .lx-hero { padding-top: 130px; }
  .lx-gallery { grid-template-columns: repeat(2, 1fr); }
  .lx-modal-panel { width: 100%; }
}
@media(max-width:560px){
  .lx-gallery { grid-template-columns: 1fr; }
  .lx-modal-body { min-height: 300px; }
}
/* LX footer */
.lx-footer { border-top: 1px solid rgba(255,255,255,.08); margin-top: 70px; background: rgba(8,12,11,.9); }
.lx-footer-inner { width: min(1180px,92%); margin: 0 auto; padding: 30px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lx-brand.sm { font-size: 15px; }
.lx-footer-tag { color: #5d6a62; font-size: 13.5px; margin: 0; }
.lx-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 100px; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3); color: #4ade80; font-size: 12px; font-weight: 700; }
.lx-status i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); animation: livePulse 1.5s ease-in-out infinite; }
.lx-footer-links { display: flex; gap: 20px; }
.lx-footer-links a { color: #a7b3ab; font-size: 14px; font-weight: 500; transition: color .25s var(--ease); position: relative; }
.lx-footer-links a::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 0; background: linear-gradient(90deg,#4f46e5,#6366f1); transition: width .3s var(--ease); }
.lx-footer-links a:hover { color: #4f46e5; }
.lx-footer-links a:hover::after { width: 100%; }

/* Mobile/responsive polish pass */
@media(max-width:760px){
  .btn { min-height: 44px; min-width: 44px; }
  .btn-sm { min-height: 38px; }
  .nav-links a, .dash-tab-btn, .tpl-card, [data-gal], .lx-theme-card, .work-card, .proj, .bloom-tile, .museum-piece, .cat-row { min-height: 44px; }
  .lx-nav .nav-links { gap: 10px; }
  .lx-footer-inner { flex-direction: column; text-align: center; padding: 26px 0; }
  .lx-footer-links { justify-content: center; gap: 16px; }
  .dash-nav { flex-wrap: wrap; gap: 10px; }
  body { padding-bottom: env(safe-area-inset-bottom); }
  .lx-footer { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
  .lx-hero { padding-top: 110px; }
  .lx-h2 { font-size: clamp(26px,6vw,38px); }
  .lx-bento, .lx-steps, .lx-quotes, .lx-gallery { grid-template-columns: 1fr; }
  .lx-bento-card.lx-span { grid-column: span 1; }
  .lx-win-body { grid-template-columns: 1fr; }
  .lx-win-side { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); padding-right: 0; padding-bottom: 16px; }
  .lx-marquee .lx-logos-row { animation-duration: 18s; }
  .dash-save-bar { bottom: calc(14px + env(safe-area-inset-bottom)); }
  .lx-cta-banner { padding: 48px 16px; border-radius: 20px; }
  .lx-cta-banner h2 { font-size: clamp(26px,6vw,38px); }
  .lx-modal-panel { width: 100%; margin: 10px; max-height: 90vh; }
  .lx-lightbox-nav { width: 44px; height: 44px; font-size: 18px; }
  .lx-lightbox-prev { left: 10px; }
  .lx-lightbox-next { right: 10px; }
  .lx-lightbox-close { top: 10px; right: 10px; width: 38px; height: 38px; }
}
/* Dashboard theme isolation: the portfolio template preview sets
   body[data-template], which would otherwise recolor studio cards, buttons
   and inputs (white-on-light text). The studio always renders dark. */
body[data-template] #dashboardApp{background:#070b16;color:#eef2ff;--card:rgba(255,255,255,.06);--stroke:rgba(255,255,255,.12);--txt:#eef2ff;--muted:#9aa3c0}
body[data-template] #dashboardApp h1,body[data-template] #dashboardApp h2,body[data-template] #dashboardApp h3{color:#eef2ff}
body[data-template] #dashboardApp .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
body[data-template] #dashboardApp .card p{color:#eef2ff}
body[data-template] #dashboardApp .btn-primary{background:linear-gradient(135deg,#6c6cf5,#22d3ee);color:#fff;border-color:transparent;box-shadow:0 10px 30px rgba(108,108,245,.4)}
body[data-template] #dashboardApp .btn-ghost{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:#fff}
body[data-template] #dashboardApp input,body[data-template] #dashboardApp textarea{background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.12);color:#fff}
/* Works-tab row buttons never had styling (native browser buttons) */
.work-row-btns button{background:rgba(255,255,255,.07);border:1px solid var(--stroke);color:#fff;border-radius:9px;padding:7px 12px;font-size:12.5px;font-weight:700;cursor:pointer;transition:background .2s ease}
.work-row-btns button:hover{background:rgba(255,255,255,.14)}
.work-row-btns button[data-wrm]{border-color:rgba(244,114,182,.4);color:#f9a8d4;background:rgba(244,114,182,.1)}
.work-row-btns button[data-wrm]:hover{background:rgba(244,114,182,.2)}
/* Works upload staging (thumbnails before upload) */
.work-staging{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 14px}
.work-stage-item{width:122px;background:rgba(255,255,255,.05);border:1px solid var(--stroke);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px}
.work-stage-item img{width:100%;height:84px;object-fit:cover;border-radius:8px;display:block}
.work-stage-name{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work-stage-btns{display:flex;gap:6px;flex-wrap:wrap}
.work-stage-btns .btn{flex:1;justify-content:center;padding:6px 8px;font-size:11px}
/* Image crop modal (works upload) */
#edSubdomain{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-transform:lowercase;letter-spacing:.02em}
.crop-modal{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;padding:20px}
.crop-modal.open{display:flex}
.crop-backdrop{position:absolute;inset:0;background:rgba(4,7,6,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.crop-panel{position:relative;width:min(760px,100%);max-height:94vh;overflow:auto;background:rgba(13,19,18,.98);border:1px solid rgba(79,70,229,.28);border-radius:20px;box-shadow:0 40px 120px rgba(0,0,0,.6);padding:18px;text-align:center;animation:modalIn .25s var(--ease)}
.crop-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;text-align:left}
.crop-head strong{color:#f4f7f3;font-size:15px;display:inline-flex;align-items:center;gap:8px}
.crop-head strong i{color:#4f46e5}
.crop-ratios{display:flex;gap:6px;flex-wrap:wrap}
.crop-ratios button{padding:5px 11px;border-radius:100px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#e7ece9;font-weight:700;font-size:12px;cursor:pointer;transition:all .2s var(--ease)}
.crop-ratios button:hover{border-color:rgba(79,70,229,.45);color:#c7d2fe}
.crop-ratios button.active{background:linear-gradient(135deg,#4f46e5,#6366f1);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(79,70,229,.35)}
.crop-stagewrap{display:flex;justify-content:center}
.crop-stage{position:relative;display:inline-block;max-width:100%;line-height:0;touch-action:none}
.crop-stage img{display:block;max-width:100%;max-height:56vh;border-radius:10px;user-select:none;-webkit-user-drag:none}
.crop-box{position:absolute;top:0;left:0;box-sizing:border-box;border:1.5px solid #fff;box-shadow:0 0 0 9999px rgba(4,7,6,.55),0 0 0 1.5px rgba(79,70,229,.6) inset;cursor:move;touch-action:none}
.crop-box::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);background-size:33.33% 33.33%;pointer-events:none}
.crop-h{position:absolute;width:16px;height:16px;background:#4f46e5;border:2px solid #fff;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.5);touch-action:none}
.crop-h[data-h="nw"]{left:-8px;top:-8px;cursor:nwse-resize}
.crop-h[data-h="ne"]{right:-8px;top:-8px;cursor:nesw-resize}
.crop-h[data-h="sw"]{left:-8px;bottom:-8px;cursor:nesw-resize}
.crop-h[data-h="se"]{right:-8px;bottom:-8px;cursor:nwse-resize}
.crop-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;text-align:left}
.crop-hint{color:#7d8a82;font-size:12.5px}
.crop-actions{display:flex;gap:8px;margin-left:auto}
@media (max-width:560px){.crop-h{width:20px;height:20px}.crop-h[data-h="nw"]{left:-10px;top:-10px}.crop-h[data-h="ne"]{right:-10px;top:-10px}.crop-h[data-h="sw"]{left:-10px;bottom:-10px}.crop-h[data-h="se"]{right:-10px;bottom:-10px}}
@media (prefers-reduced-motion:reduce){.crop-panel{animation:none}}

 /* Modern CV Theme */
body[data-template="moderncv"]{background:#020617;color:#f1f5f9}
body[data-template="moderncv"] .mc-container{max-width:1400px;margin:0 auto;padding:0 2rem}
body[data-template="moderncv"] .mc-hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:4rem 0}
body[data-template="moderncv"] .mc-grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--primary) 1px,transparent 1px),linear-gradient(90deg,var(--primary) 1px,transparent 1px);background-size:50px 50px;opacity:0.05;z-index:-1}
body[data-template="moderncv"] .mc-particles{position:absolute;inset:0;overflow:hidden;z-index:-1}
body[data-template="moderncv"] .mc-particle{position:absolute;font-family:'Fira Code',monospace;font-size:1.5rem;color:var(--primary);opacity:0.1;animation:float 15s infinite ease-in-out}
body[data-template="moderncv"] .mc-container{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1}
body[data-template="moderncv"] .mc-greeting{font-family:'Fira Code',monospace;font-size:1.2rem;color:var(--primary);margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem}
body[data-template="moderncv"] .mc-cursor{animation:blink 1s infinite;color:var(--primary)}
body[data-template="moderncv"] .mc-name{font-family:'Fira Code',monospace;font-size:4rem;font-weight:700;margin-bottom:2rem;line-height:1.2}
body[data-template="moderncv"] .mc-kw{color:var(--purple)}
body[data-template="moderncv"] .mc-op{color:var(--cyan);margin:0 0.5rem}
body[data-template="moderncv"] .mc-val{background:var(--gradient-1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip: text}
body[data-template="moderncv"] .mc-sc{color:var(--primary)}
body[data-template="moderncv"] .mc-title{font-family:'Fira Code',monospace;font-size:1.5rem;color:var(--cyan);margin-bottom:2rem}
body[data-template="moderncv"] .mc-comment{color:var(--text-muted);margin-inline-end:0.5rem}
body[data-template="moderncv"] .mc-desc{font-size:1.1rem;color:var(--text-secondary);margin-bottom:3rem;line-height:1.8;max-width:600px}
body[data-template="moderncv"] .mc-buttons{display:flex;gap:2rem;margin-bottom:3rem;flex-wrap:wrap}
body[data-template="moderncv"] .mc-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:1rem 2rem;border-radius:12px;font-weight:600;text-decoration:none;transition:all 0.2s;border:2px solid transparent;cursor:pointer;font-size:1rem}
body[data-template="moderncv"] .mc-btn-primary{background:var(--gradient-1);color:white}
body[data-template="moderncv"] .mc-btn-primary:hover{transform:translateY(-2px);box-shadow:0 5px 20px rgba(192,132,252,0.3)}
body[data-template="moderncv"] .mc-btn-secondary{background:transparent;color:var(--primary);border-color:var(--primary)}
body[data-template="moderncv"] .mc-btn-secondary:hover{background:var(--primary);color:white;transform:translateY(-2px);box-shadow:0 5px 20px rgba(192,132,252,0.3)}
body[data-template="moderncv"] .mc-social{display:flex;gap:2rem}
body[data-template="moderncv"] .mc-social-icon{width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;color:var(--text-secondary);text-decoration:none;transition:all 0.2s}
body[data-template="moderncv"] .mc-social-icon:hover{background:var(--bg-hover);border-color:var(--primary);color:var(--primary);transform:translateY(-3px)}
body[data-template="moderncv"] .mc-hero-image{position:relative;display:flex;justify-content:center;align-items:center}
body[data-template="moderncv"] .mc-profile-frame{position:relative;width:400px;height:400px;border-radius:50%;border:4px solid var(--primary);box-shadow:0 0 30px rgba(255,107,157,0.3),0 0 60px rgba(255,107,157,0.1);overflow:hidden;background:var(--bg-card)}
body[data-template="moderncv"] .mc-profile-img{width:100%;height:100%;object-fit:cover}
body[data-template="moderncv"] .mc-profile-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:8rem;color:var(--primary);opacity:0.3;background:var(--bg-card)}
body[data-template="moderncv"] .mc-badge{position:absolute;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:1rem 1.5rem;display:flex;align-items:center;gap:1rem;color:var(--text-primary);font-weight:600;box-shadow:var(--shadow-md);animation:floatBadge 3s ease-in-out infinite;min-width:200px;transition:all 0.25s}
body[data-template="moderncv"] .mc-badge:hover{transform:translateY(-3px)scale(1.03);border-color:var(--primary);box-shadow:0 5px 20px rgba(192,132,252,0.25)}
body[data-template="moderncv"] .mc-badge i{font-size:2rem;color:var(--primary);flex-shrink:0}
body[data-template="moderncv"] .mc-badge-content{display:flex;flex-direction:column;gap:0.3rem}
body[data-template="moderncv"] .mc-badge-title{font-size:1rem;font-weight:700;color:var(--text-primary)}
body[data-template="moderncv"] .mc-badge-libs{font-size:0.75rem;color:var(--text-secondary);font-weight:400;line-height:1.4}
body[data-template="moderncv"] .mc-badge-1{top:10%;right:-10%;animation-delay:0s}
body[data-template="moderncv"] .mc-badge-2{bottom:20%;right:-15%;animation-delay:1s}
body[data-template="moderncv"] .mc-badge-3{top:50%;left:-15%;animation-delay:2s}
body[data-template="moderncv"] .mc-scroll-ind{position:absolute;bottom:3rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:0.5rem;color:var(--text-secondary);font-size:0.9rem}
body[data-template="moderncv"] .mc-mouse{width:30px;height:50px;border:2px solid var(--border);border-radius:15px;display:flex;justify-content:center;padding-top:8px}
body[data-template="moderncv"] .mc-wheel{width:4px;height:10px;background:var(--primary);border-radius:2px;animation:scrollWheel 2s infinite}
body[data-template="moderncv"] .mc-section{padding:4rem 0;position:relative;scroll-margin-top:80px}
body[data-template="moderncv"] .mc-sec-header{display:flex;align-items:center;gap:2rem;margin-bottom:4rem}
body[data-template="moderncv"] .mc-sec-num{font-family:'Fira Code',monospace;font-size:1.5rem;color:var(--primary);font-weight:700}
body[data-template="moderncv"] .mc-sec-title{font-family:'Fira Code',monospace;font-size:2.5rem;font-weight:700;display:flex;align-items:center;gap:0.5rem}
body[data-template="moderncv"] .mc-br{color:var(--purple)}
body[data-template="moderncv"] .mc-line{flex:1;height:2px;background:var(--gradient-1);margin-inline-start:2rem}
body[data-template="moderncv"] .mc-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
body[data-template="moderncv"] .mc-about-text{font-size:1.1rem;color:var(--text-secondary);line-height:1.8;margin-bottom:3rem}
body[data-template="moderncv"] .mc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
body[data-template="moderncv"] .mc-stat{text-align:center;padding:2rem;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;transition:all 0.2s}
body[data-template="moderncv"] .mc-stat:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.2)}
body[data-template="moderncv"] .mc-stat-num{font-family:'Fira Code',monospace;font-size:2.5rem;font-weight:700;color:var(--primary);margin-bottom:0.5rem}
body[data-template="moderncv"] .mc-stat-label{color:var(--text-secondary);font-size:0.9rem}
body[data-template="moderncv"] .mc-code-block{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:3rem;font-family:'Fira Code',monospace;font-size:0.9rem;line-height:1.8}
body[data-template="moderncv"] .mc-code-line{margin:0.5rem 0}
body[data-template="moderncv"] .mc-code-line.indent{padding-inline-start:2rem}
body[data-template="moderncv"] .mc-ckw{color:var(--purple)}
body[data-template="moderncv"] .mc-cvar{color:var(--cyan)}
body[data-template="moderncv"] .mc-cop{color:var(--primary)}
body[data-template="moderncv"] .mc-cbr,.mc-cca{color:var(--accent)}
body[data-template="moderncv"] .mc-cprop{color:var(--cyan)}
body[data-template="moderncv"] .mc-cstr{color:var(--accent)}
body[data-template="moderncv"] .mc-csc{color:var(--text-muted)}
body[data-template="moderncv"] .mc-skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:3rem}
body[data-template="moderncv"] .mc-skill-cat{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:3rem}
body[data-template="moderncv"] .mc-cat-title{font-family:'Fira Code',monospace;font-size:1.5rem;color:var(--primary);margin-bottom:2rem;font-weight:700}
body[data-template="moderncv"] .mc-skill-items{display:flex;flex-direction:column;gap:2rem}
body[data-template="moderncv"] .mc-skill{position:relative}
body[data-template="moderncv"] .mc-skill-head{display:flex;justify-content:space-between;margin-bottom:0.5rem}
body[data-template="moderncv"] .mc-skill-head span{font-family:'Fira Code',monospace;color:var(--cyan);font-weight:600}
body[data-template="moderncv"] .mc-skill-pct{color:var(--primary)}
body[data-template="moderncv"] .mc-skill-bar{height:12px;background:var(--bg-darker);border-radius:6px;overflow:hidden;border:1px solid var(--border);position:relative}
body[data-template="moderncv"] .mc-skill-prog{height:100%;background:var(--gradient-1);border-radius:6px;width:0%;position:relative;box-shadow:0 0 10px rgba(255,107,157,0.5)}
body[data-template="moderncv"] .mc-timeline{position:relative;padding-inline-start:2rem}
body[data-template="moderncv"] .mc-timeline::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gradient-1)}
body[data-template="moderncv"] .mc-exp{position:relative;padding-bottom:4rem;padding-inline-start:3rem}
body[data-template="moderncv"] .mc-exp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
body[data-template="moderncv"] .mc-exp-year{font-family:'Fira Code',monospace;color:var(--primary);font-weight:700;font-size:0.9rem}
body[data-template="moderncv"] .mc-exp-badge{background:var(--gradient-1);color:white;padding:0.3rem 0.8rem;border-radius:20px;font-size:0.75rem;font-family:'Fira Code',monospace;font-weight:600}
body[data-template="moderncv"] .mc-exp-title{font-family:'Fira Code',monospace;font-size:1.5rem;color:var(--cyan);margin-bottom:0.5rem;font-weight:700}
body[data-template="moderncv"] .mc-exp-company{color:var(--purple);font-weight:600;margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem}
body[data-template="moderncv"] .mc-exp-company i{font-size:1rem}
body[data-template="moderncv"] .mc-exp-desc{color:var(--text-secondary);line-height:1.8;margin-bottom:2rem}
body[data-template="moderncv"] .mc-exp-tags{display:flex;flex-wrap:wrap;gap:0.5rem}
body[data-template="moderncv"] .mc-tag{background:var(--bg-darker);color:var(--primary);padding:0.3rem 0.8rem;border-radius:6px;font-size:0.85rem;font-family:'Fira Code',monospace;border:1px solid var(--border)}
body[data-template="moderncv"] .mc-projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:3rem}
body[data-template="moderncv"] .mc-project{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:all 0.25s;cursor:pointer}
body[data-template="moderncv"] .mc-project:hover{transform:translateY(-5px);border-color:var(--primary);box-shadow:0 15px 35px rgba(0,0,0,0.3)}
body[data-template="moderncv"] .mc-project-image{position:relative;width:100%;height:250px;background:var(--bg-darker);overflow:hidden}
body[data-template="moderncv"] .mc-project-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:4rem;color:var(--primary);opacity:0.3}
body[data-template="moderncv"] .mc-project-content{padding:3rem}
body[data-template="moderncv"] .mc-project-title{font-family:'Fira Code',monospace;font-size:1.5rem;color:var(--primary);margin-bottom:1rem;font-weight:700}
body[data-template="moderncv"] .mc-project-desc{color:var(--text-secondary);line-height:1.8;margin-bottom:2rem}
body[data-template="moderncv"] .mc-project-tags{display:flex;flex-wrap:wrap;gap:0.5rem}
body[data-template="moderncv"] .mc-contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:4rem}
body[data-template="moderncv"] .mc-contact-info{display:flex;flex-direction:column;gap:2rem}
body[data-template="moderncv"] .mc-contact-item{display:flex;gap:2rem;padding:3rem;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;transition:all 0.25s;cursor:pointer}
body[data-template="moderncv"] .mc-contact-item:hover{border-color:var(--primary);transform:translateX(5px);box-shadow:0 5px 15px rgba(0,0,0,0.15)}
body[data-template="moderncv"] .mc-ci-icon{width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:var(--gradient-1);border-radius:12px;color:white;font-size:1.5rem;flex-shrink:0}
body[data-template="moderncv"] .mc-contact-info h4{font-size:0.9rem;color:var(--text-muted);margin-bottom:0.3rem;font-family:'Fira Code',monospace}
body[data-template="moderncv"] .mc-contact-info a{color:var(--primary);font-weight:600;font-family:'Fira Code',monospace;text-decoration:none;display:block}
body[data-template="moderncv"] .mc-contact-info a:hover{color:var(--cyan)}
body[data-template="moderncv"] .mc-form{display:flex;flex-direction:column;gap:2rem}
body[data-template="moderncv"] .mc-input{width:100%;padding:1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;color:var(--text-primary);font-family:var(--font-primary);font-size:1rem;transition:all 0.2s}
body[data-template="moderncv"] .mc-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(255,107,157,0.1)}
body[data-template="moderncv"] .mc-textarea{resize:vertical;min-height:150px}
body[data-template="moderncv"] .mc-footer{background:var(--bg-card);border-top:1px solid var(--border);padding:3rem 0;margin-top:4rem}
body[data-template="moderncv"] .mc-footer-content{max-width:1400px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center}
body[data-template="moderncv"] .mc-footer-text{color:var(--text-secondary);font-size:0.95rem;display:flex;align-items:center;flex-wrap:wrap;gap:0.5rem;line-height:1.6}
body[data-template="moderncv"] .mc-footer-copyright{color:var(--text-primary);font-weight:600}
body[data-template="moderncv"] .mc-footer-divider{color:var(--text-muted);margin:0 0.3rem}
body[data-template="moderncv"] .mc-footer-built{color:var(--text-secondary)}
body[data-template="moderncv"] .mc-footer-author{display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;color:var(--text-muted)}
body[data-template="moderncv"] .mc-footer-by{color:var(--text-muted)}
body[data-template="moderncv"] .mc-footer-author-link{display:inline-flex;align-items:center;gap:0.4rem;color:var(--primary);text-decoration:none;font-weight:700;transition:all 0.2s;padding:0.2rem 0.5rem;border-radius:6px}
body[data-template="moderncv"] .mc-footer-author-link:hover{color:var(--cyan);background:rgba(192,132,252,0.1);transform:translateY(-2px)}
body[data-template="moderncv"] .mc-footer-author-link i{font-size:0.85rem}
body[data-template="moderncv"] .mc-footer-social{display:flex;gap:2rem}
body[data-template="moderncv"] .mc-footer-social-link{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--bg-darker);border:1px solid var(--border);border-radius:50%;color:var(--text-secondary);text-decoration:none;transition:all 0.2s}
body[data-template="moderncv"] .mc-footer-social-link:hover{background:var(--primary);border-color:var(--primary);color:white;transform:translateY(-2px)}
body[data-template="moderncv"] .mc-empty{color:var(--text-muted);font-style:italic;text-align:center;padding:2rem}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
@keyframes floatBadge{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes scrollWheel{0%{transform:translateY(0);opacity:1}100%{transform:translateY(20px);opacity:0}}
@media (max-width:1024px){body[data-template="moderncv"] .mc-container{grid-template-columns:1fr;gap:2rem;text-align:center}body[data-template="moderncv"] .mc-hero-image{order:-1}body[data-template="moderncv"] .mc-buttons{justify-content:center}body[data-template="moderncv"] .mc-social{justify-content:center;flex-wrap:wrap}body[data-template="moderncv"] .mc-about-grid{grid-template-columns:1fr;gap:2rem}body[data-template="moderncv"] .mc-contact-grid{grid-template-columns:1fr;gap:2rem}body[data-template="moderncv"] .mc-skills-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}body[data-template="moderncv"] .mc-stats{grid-template-columns:1fr;gap:1rem}}
@media (max-width:768px){body[data-template="moderncv"] .mc-container{padding:0 1rem}body[data-template="moderncv"] .mc-name{font-size:2rem;margin-bottom:1rem}body[data-template="moderncv"] .mc-title{font-size:1.2rem;margin-bottom:1rem}body[data-template="moderncv"] .mc-desc{font-size:1rem;margin-bottom:2rem}body[data-template="moderncv"] .mc-buttons{flex-direction:column;gap:1rem;margin-bottom:2rem}body[data-template="moderncv"] .mc-btn{width:100%;justify-content:center;padding:0.9rem 1.5rem}body[data-template="moderncv"] .mc-social{flex-wrap:wrap;gap:1rem}body[data-template="moderncv"] .mc-social-icon{width:45px;height:45px}body[data-template="moderncv"] .mc-section{padding:2rem 0}body[data-template="moderncv"] .mc-stats{grid-template-columns:1fr;gap:1rem}body[data-template="moderncv"] .mc-stat{padding:1.5rem}body[data-template="moderncv"] .mc-stat-num{font-size:2rem}body[data-template="moderncv"] .mc-code-block{padding:1.5rem;font-size:0.8rem}body[data-template="moderncv"] .mc-skills-grid{grid-template-columns:1fr;gap:2rem}body[data-template="moderncv"] .mc-skill-cat{padding:2rem}body[data-template="moderncv"] .mc-projects-grid{grid-template-columns:1fr;gap:2rem}body[data-template="moderncv"] .mc-project-content{padding:2rem}body[data-template="moderncv"] .mc-contact-item{padding:1.5rem;flex-direction:column;text-align:center;gap:1rem}body[data-template="moderncv"] .mc-ci-icon{width:50px;height:50px;font-size:1.2rem;margin:0 auto}body[data-template="moderncv"] .mc-contact-form{gap:1.5rem}body[data-template="moderncv"] .mc-input{padding:0.9rem;font-size:0.95rem}body[data-template="moderncv"] .mc-footer-content{flex-direction:column;gap:1.5rem;text-align:center}body[data-template="moderncv"] .mc-footer-text{justify-content:center;font-size:0.85rem}body[data-template="moderncv"] .mc-footer-author{justify-content:center;font-size:0.85rem}body[data-template="moderncv"] .mc-footer-social{justify-content:center;gap:1rem}body[data-template="moderncv"] .mc-profile-frame{width:280px;height:280px}body[data-template="moderncv"] .mc-badge{display:none}}
@media (max-width:480px){body[data-template="moderncv"] .mc-name{font-size:1.8rem;line-height:1.2}body[data-template="moderncv"] .mc-title{font-size:1rem}body[data-template="moderncv"] .mc-desc{font-size:0.95rem}body[data-template="moderncv"] .mc-stat{padding:1.2rem}body[data-template="moderncv"] .mc-stat-num{font-size:1.8rem}body[data-template="moderncv"] .mc-stat-label{font-size:0.85rem}body[data-template="moderncv"] .mc-code-block{padding:1rem;font-size:0.75rem}body[data-template="moderncv"] .mc-skill-cat{padding:1.5rem}body[data-template="moderncv"] .mc-cat-title{font-size:1.2rem;margin-bottom:1rem}body[data-template="moderncv"] .mc-skill-items{gap:1.5rem}body[data-template="moderncv"] .mc-project-content{padding:1.5rem}body[data-template="moderncv"] .mc-project-title{font-size:1.2rem}body[data-template="moderncv"] .mc-project-desc{font-size:0.9rem}body[data-template="moderncv"] .mc-contact-item{padding:1.2rem}body[data-template="moderncv"] .mc-ci-icon{width:45px;height:45px;font-size:1.1rem}body[data-template="moderncv"] .mc-contact-info h4{font-size:0.85rem}body[data-template="moderncv"] .mc-contact-info a{font-size:0.95rem}body[data-template="moderncv"] .mc-form{gap:1.5rem}body[data-template="moderncv"] .mc-input{padding:0.8rem;font-size:0.9rem}}

/* Track Theme Isolation: Developer studio must never show visual artist themes */
body:not(.visual-user) #edTplGrid .tpl-card[data-vtrack="visual"],
body:not(.visual-user) #tplGrid .tpl-card[data-vtrack="visual"] {
  display: none !important;
}
body.visual-user #edTplGrid .tpl-card[data-vtrack="tech"],
body.visual-user #tplGrid .tpl-card[data-vtrack="tech"] {
  display: none !important;
}



.lx-tp-magazine { background: #f7f4ee; }
.lx-tp-magazine .lx-tp-nav { background: #f7f4ee; border-bottom: 2px solid #16140f; }
.lx-tp-magazine .lx-tp-hero { background: #16140f; border-bottom: 2px solid #c8442b; border-radius: 1px; }
.lx-tp-magazine .lx-tp-cards { background: #f7f4ee; border: 1px solid #16140f; border-radius: 1px; }
.lx-tp-magazine .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background: #c8442b; }

.lx-tp-bold { background: #0b0b0d; }
.lx-tp-bold .lx-tp-nav { background: #141418; border-bottom: 1px solid rgba(255,255,255,.12); }
.lx-tp-bold .lx-tp-hero { background: #18181c; border-left: 2px solid #c6fb50; border-radius: 4px; }
.lx-tp-bold .lx-tp-cards { background: #141418; border: 1px solid rgba(255,255,255,.1); border-radius: 4px; }
.lx-tp-bold .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #c6fb50; }

.lx-tp-clean { background: #f4f4f0; }
.lx-tp-clean .lx-tp-nav { background: #ffffff; border-bottom: 1px solid rgba(0,0,0,.08); border-radius: 999px; margin: 4px; height: 16px; }
.lx-tp-clean .lx-tp-hero { background: #ffffff; border-left: 2px solid #6d28d9; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.lx-tp-clean .lx-tp-cards { background: #ffffff; border: 1px solid rgba(0,0,0,.06); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.lx-tp-clean .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #6d28d9; }

.lx-tp-vibrant { background: #fef7ff; }
.lx-tp-vibrant .lx-tp-nav { background: #ffffff; border-bottom: 1px solid rgba(124,58,237,.18); border-radius: 999px; margin: 4px; height: 16px; }
.lx-tp-vibrant .lx-tp-hero { background: #ffffff; border-left: 2px solid #d6308b; border-radius: 6px; box-shadow: 0 4px 14px rgba(236,72,153,.14); }
.lx-tp-vibrant .lx-tp-cards { background: #ffffff; border: 1px solid rgba(124,58,237,.14); border-radius: 6px; box-shadow: 0 4px 14px rgba(124,58,237,.1); }
.lx-tp-vibrant .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg,#ec4899,#8b5cf6); }

.lx-tp-neon { background: #05060d; }
.lx-tp-neon .lx-tp-nav { background: #0c0e1a; border-bottom: 1px solid rgba(0,240,255,.3); }
.lx-tp-neon .lx-tp-hero { background: #0c0e1a; border-left: 2px solid #ff2bd6; border-radius: 4px; box-shadow: 0 0 10px rgba(0,240,255,.2); }
.lx-tp-neon .lx-tp-cards { background: #0c0e1a; border: 1px solid rgba(0,240,255,.25); border-radius: 4px; }
.lx-tp-neon .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #00f0ff; box-shadow: 0 0 8px #00f0ff; }

.lx-tp-hacker { background: #0b0f0b; }
.lx-tp-hacker .lx-tp-nav { background: #04140a; border-bottom: 1px solid rgba(57,255,20,.3); }
.lx-tp-hacker .lx-tp-hero { background: #04140a; border: 1px solid #39ff14; border-radius: 4px; box-shadow: 0 0 10px rgba(57,255,20,.2); }
.lx-tp-hacker .lx-tp-cards { background: #04140a; border: 1px solid rgba(57,255,20,.25); border-radius: 4px; }
.lx-tp-hacker .lx-tp-nav::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #39ff14; box-shadow: 0 0 8px #39ff14; }







/* ==========================================================================
   NON-TECHNICAL PORTFOLIO THEMES: ATELIER, CINEMA, ARCH, ZINE, ZEN
   ========================================================================== */

/* 1. ATELIER (Haute Couture Minimal Editorial) */
body[data-template="atelier"] { background: #0b0c10; color: #f4f4f0; font-family: 'Fraunces', Georgia, serif; }
body[data-template="atelier"] .bg-fx, body[data-template="atelier"] .grid-overlay, body[data-template="atelier"] .blob { display: none; }
.gal-atelier-head { padding: 40px 0 36px; text-align: center; }
.atelier-kicker { font-size: 11px; font-weight: 700; letter-spacing: .42em; color: #c5a059; text-transform: uppercase; margin: 0 0 14px; }
.atelier-title { font-family: 'Fraunces', Georgia, serif; font-size: clamp(38px, 6vw, 64px); font-weight: 500; color: #fdfdfc; margin: 0; line-height: 1.1; letter-spacing: -0.01em; }
.atelier-sub { font-family: 'Fraunces', serif; font-style: italic; font-size: 18px; color: #a39f93; margin: 10px 0 0; }
.atelier-portrait-wrap { margin: 24px auto 16px; }
.atelier-portrait { width: 140px; height: 175px; object-fit: cover; border-radius: 50% / 60%; border: 1px solid rgba(197, 160, 89, 0.6); box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 0 30px rgba(197, 160, 89, 0.15); display: block; margin: 0 auto; }
.atelier-fallback { display: grid!important; place-items: center; font-size: 54px; font-style: normal; color: #c5a059; background: #181920; }
.gal-atelier-head .atelier-meta { font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: #8c887b; margin: 16px 0 0; }
.atelier-collection { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; padding: 20px 0 100px; }
.atelier-card { margin: 0; cursor: pointer; text-decoration: none; color: inherit; display: block; }
@media (min-width: 900px) { .atelier-card.atelier-wide { grid-column: span 2; } }
.atelier-frame { position: relative; overflow: hidden; background: #13141a; border: 1px solid rgba(197, 160, 89, 0.25); box-shadow: 0 20px 48px rgba(0,0,0,0.7); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.atelier-card:hover .atelier-frame { transform: translateY(-6px); border-color: rgba(197, 160, 89, 0.6); box-shadow: 0 28px 64px rgba(0,0,0,0.85), 0 0 35px rgba(197, 160, 89, 0.2); }
.atelier-frame img { width: 100%; height: 440px; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.atelier-card:hover .atelier-frame img { transform: scale(1.03); }
.atelier-numeral { position: absolute; top: 14px; left: 18px; font-family: 'Fraunces', serif; font-size: 22px; font-style: italic; color: #c5a059; text-shadow: 0 2px 10px rgba(0,0,0,0.9); z-index: 2; }
.atelier-card .atelier-meta { padding: 18px 4px 0; margin: 0; }
.atelier-cat { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #c5a059; margin-bottom: 4px; }
.atelier-meta b { display: block; font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: #fdfdfc; }
.atelier-meta p { font-size: 14px; color: #8c887b; margin-top: 6px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; line-height: 1.5; }
.atelier-nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid rgba(197, 160, 89, 0.15); }
.atelier-logo { font-size: 16px; letter-spacing: .12em; text-transform: uppercase; color: #fdfdfc; font-weight: 600; text-decoration: none; }
.atelier-mark { color: #c5a059; margin-right: 6px; }
.atelier-nav-links { display: flex; align-items: center; }
.atelier-nav-links a { color: #a39f93; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-left: 20px; text-decoration: none; transition: color .2s ease; }
.atelier-nav-links a:hover { color: #c5a059; }
.btn-atelier-inquire { padding: 6px 16px; border: 1px solid #c5a059; color: #c5a059!important; border-radius: 20px; }
.btn-atelier-inquire:hover { background: #c5a059; color: #0b0c10!important; }
.atelier-foot { display: flex; justify-content: space-between; padding: 40px 0; border-top: 1px solid rgba(197, 160, 89, 0.15); color: #8c887b; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* 2. CINEMA (Widescreen Director & Film Still Showcase) */
body[data-template="cinema"] { background: #050507; color: #f0f0f5; font-family: 'Space Grotesk', -apple-system, sans-serif; }
body[data-template="cinema"] .bg-fx, body[data-template="cinema"] .grid-overlay, body[data-template="cinema"] .blob { display: none; }
.gal-cinema-head { padding: 40px 0 36px; text-align: center; }
.cinema-rec-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.35); border-radius: 20px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #ef4444; letter-spacing: .08em; }
.cinema-rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 10px #ef4444; animation: cinemaPulse 1.4s ease-in-out infinite; }
@keyframes cinemaPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.85); } }
.cinema-slate-tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em; color: #9ca3af; margin: 16px 0 10px; }
.cinema-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(34px, 5.5vw, 58px); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: #ffffff; margin: 0; }
.cinema-sub { font-size: 17px; color: #9ca3af; margin: 8px 0 0; }
.cinema-avatar { width: 110px; height: 110px; object-fit: cover; border-radius: 50%; border: 3px solid rgba(255,255,255,0.2); box-shadow: 0 16px 40px rgba(0,0,0,0.8); margin: 20px auto 10px; display: block; }
.cinema-meta { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: #6b7280; margin: 14px 0 0; }
.cinema-slate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 34px; padding: 20px 0 100px; }
.cinema-card { margin: 0; cursor: pointer; text-decoration: none; color: inherit; display: block; }
.cinema-frame { position: relative; overflow: hidden; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 20px 50px rgba(0,0,0,0.8); aspect-ratio: 2.39 / 1; background: #000; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.cinema-card:hover .cinema-frame { transform: translateY(-5px); border-color: rgba(245, 158, 11, 0.6); box-shadow: 0 24px 60px rgba(0,0,0,0.9), 0 0 35px rgba(245, 158, 11, 0.2); }
.cinema-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.cinema-card:hover .cinema-frame img { transform: scale(1.04); }
.letterbox-bar { position: absolute; left: 0; right: 0; height: 8px; background: #000; z-index: 3; }
.bar-top { top: 0; }
.bar-bottom { bottom: 0; }
.cinema-hud-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.hud-tag { position: absolute; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(255,255,255,0.8); background: rgba(0,0,0,0.6); padding: 2px 7px; border-radius: 4px; backdrop-filter: blur(4px); letter-spacing: .08em; white-space: nowrap; }
.hud-tl { top: 12px; left: 14px; }
.hud-tr { top: 12px; right: 14px; }
.hud-bl { bottom: 12px; left: 14px; }
.hud-br { bottom: 12px; right: 14px; }
.cinema-card-info { padding: 14px 4px 0; }
.cinema-card-info b { display: block; font-size: 18px; font-weight: 700; color: #fff; letter-spacing: .02em; }
.cinema-card-info p { font-size: 13.5px; color: #9ca3af; margin-top: 4px; line-height: 1.4; }
.cinema-nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.cinema-logo { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: #fff; text-decoration: none; }
.cinema-tc { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #f59e0b; }
.cinema-foot { display: flex; justify-content: space-between; padding: 40px 0; border-top: 1px solid rgba(255,255,255,0.1); color: #6b7280; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }

/* 3. ARCH (Architectural Blueprint & Swiss Minimal) */
body[data-template="arch"] { background: #f7f6f2; color: #18181b; font-family: 'Space Grotesk', sans-serif; background-image: linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px); background-size: 36px 36px; }
body[data-template="arch"] .bg-fx, body[data-template="arch"] .grid-overlay, body[data-template="arch"] .blob { display: none; }
.gal-arch-head { padding: 40px 24px 36px; text-align: center; position: relative; border: 1px solid #18181b; margin-top: 24px; background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); }
.arch-ch { position: absolute; font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 700; color: #18181b; }
.ch-tl { top: 6px; left: 8px; }
.ch-tr { top: 6px; right: 8px; }
.ch-bl { bottom: 6px; left: 8px; }
.ch-br { bottom: 6px; right: 8px; }
.arch-kicker { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .25em; color: #71717a; text-transform: uppercase; margin: 0 0 10px; }
.arch-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(36px, 5.5vw, 60px); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #09090b; margin: 0; }
.arch-sub { font-size: 17px; color: #52525b; margin: 8px 0 0; }
.arch-specs { display: flex; justify-content: center; gap: 24px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #71717a; margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.1); flex-wrap: wrap; }
.arch-draft-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; padding: 40px 0 100px; }
.arch-plate { margin: 0; cursor: pointer; text-decoration: none; color: inherit; display: block; border: 1px solid #18181b; background: #ffffff; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); transition: transform .25s ease, box-shadow .25s ease; }
.arch-plate:hover { transform: translateY(-4px); box-shadow: 0 20px 45px rgba(0,0,0,0.12); }
.arch-plate-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #e4e4e7; margin-bottom: 12px; }
.plate-no { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: #09090b; }
.plate-cat { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: #2563eb; background: #eff6ff; padding: 2px 8px; border-radius: 3px; }
.arch-img-wrap { position: relative; overflow: hidden; }
.arch-img-wrap img { width: 100%; height: 280px; object-fit: cover; display: block; filter: contrast(1.05); }
.arch-dim-badge { position: absolute; bottom: 8px; right: 8px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; background: rgba(0,0,0,0.75); color: #fff; padding: 2px 6px; border-radius: 2px; }
.arch-caption { padding: 14px 2px 4px; }
.arch-caption b { display: block; font-size: 17px; font-weight: 700; color: #09090b; }
.arch-caption p { font-size: 13.5px; color: #52525b; margin-top: 4px; line-height: 1.45; }
.arch-nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid #18181b; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.arch-logo { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #09090b; text-decoration: none; }
.arch-scale { color: #2563eb; }
.arch-foot { display: flex; justify-content: space-between; padding: 30px 0; border-top: 1px solid #18181b; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #71717a; text-transform: uppercase; }

/* 4. ZINE (Risograph Indie Art Zine & Pop Poster) */
body[data-template="zine"] { background: #fffcf2; color: #111111; font-family: 'Space Grotesk', -apple-system, sans-serif; }
body[data-template="zine"] .bg-fx, body[data-template="zine"] .grid-overlay, body[data-template="zine"] .blob { display: none; }
.gal-zine-head { padding: 40px 0 36px; text-align: center; }
.zine-stickers { display: flex; justify-content: center; gap: 12px; margin-bottom: 16px; }
.zine-pill { background: #ff2d78; color: #fff; font-weight: 900; font-size: 11px; letter-spacing: .08em; padding: 5px 12px; border-radius: 4px; border: 2px solid #111; box-shadow: 3px 3px 0px #111; transform: rotate(-2.5deg); display: inline-block; }
.zine-stamp-chip { background: #00e5ff; color: #111; font-weight: 900; font-size: 11px; letter-spacing: .08em; padding: 5px 12px; border-radius: 4px; border: 2px solid #111; box-shadow: 3px 3px 0px #111; transform: rotate(2deg); display: inline-block; }
.zine-title { font-size: clamp(40px, 6vw, 68px); font-weight: 900; text-transform: uppercase; transform: rotate(-1.5deg); text-shadow: 4px 4px 0px #ff2d78, 8px 8px 0px #00e5ff; color: #111; margin: 0; line-height: 1.05; }
.zine-sub { font-size: 18px; font-weight: 600; color: #333; margin: 16px 0 0; }
.zine-polaroid { width: 130px; height: 160px; background: #fff; border: 3px solid #111; box-shadow: 5px 5px 0px #111; margin: 20px auto 12px; padding: 8px 8px 24px; transform: rotate(2deg); }
.zine-polaroid img { width: 100%; height: 100%; object-fit: cover; }
.zine-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #555; margin: 12px 0 0; }
.zine-board { columns: 3; column-gap: 24px; padding: 20px 0 100px; }
.zine-tile { break-inside: avoid; margin: 0 0 28px; background: #ffffff; border: 3px solid #111111; box-shadow: 7px 7px 0px #111111; padding: 14px; position: relative; cursor: pointer; text-decoration: none; color: inherit; display: block; transition: transform .2s ease, box-shadow .2s ease; }
.zine-tile:hover { transform: translateY(-4px) rotate(0.5deg); box-shadow: 11px 11px 0px #ff2d78; }
.zine-tape-strip { width: 85px; height: 22px; background: rgba(255, 230, 0, 0.9); border-left: 2px dashed rgba(0,0,0,0.25); border-right: 2px dashed rgba(0,0,0,0.25); margin: -22px auto 10px; transform: rotate(-2deg); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.zine-tile img { width: 100%; display: block; border: 2px solid #111; }
.zine-cap { padding: 12px 2px 2px; }
.zine-stamp { display: inline-block; font-weight: 900; font-size: 10.5px; color: #ff2d78; letter-spacing: .1em; margin-bottom: 4px; }
.zine-cap b { display: block; font-size: 17px; font-weight: 800; color: #111; line-height: 1.25; }
.zine-cap p { font-size: 13px; color: #444; margin-top: 4px; line-height: 1.4; }
.zine-nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 3px solid #111; }
.zine-badge { font-weight: 900; font-size: 12px; background: #111; color: #fff; padding: 4px 10px; border-radius: 3px; }
.zine-logo { font-size: 18px; font-weight: 900; text-transform: uppercase; color: #111; letter-spacing: .05em; text-decoration: none; }
.zine-issue { font-weight: 900; font-size: 12px; color: #ff2d78; }
.zine-foot { display: flex; justify-content: space-between; padding: 30px 0; border-top: 3px solid #111; font-weight: 700; font-size: 12px; }
@media(max-width:900px){.zine-board{columns:2}}
@media(max-width:620px){.zine-board{columns:1}}

/* 5. ZEN (Japanese Wabi-Sabi & Earth Ceramic Studio) */
body[data-template="zen"] { background: #f2ece4; color: #2c2825; font-family: 'Fraunces', Georgia, serif; }
body[data-template="zen"] .bg-fx, body[data-template="zen"] .grid-overlay, body[data-template="zen"] .blob { display: none; }
.gal-zen-head { padding: 40px 0 36px; text-align: center; }
.zen-enso-wrap { position: relative; width: 140px; height: 140px; margin: 0 auto 20px; }
.zen-enso-ring { position: absolute; inset: -8px; border-radius: 50%; border: 3px solid rgba(168, 93, 66, 0.45); box-shadow: 0 0 25px rgba(168, 93, 66, 0.15); animation: zenBreathe 6s ease-in-out infinite; }
@keyframes zenBreathe { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.04); opacity: 1; } }
.zen-portrait { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 16px 40px rgba(60, 45, 35, 0.16); }
.zen-fallback { display: grid!important; place-items: center; font-size: 52px; color: #a85d42; background: #e8ded3; }
.zen-title { font-family: 'Fraunces', Georgia, serif; font-size: clamp(38px, 5.5vw, 58px); font-weight: 400; color: #2c2825; margin: 0; letter-spacing: .02em; }
.zen-sub { font-style: italic; font-size: 18px; color: #6e655c; margin: 8px 0 0; }
.zen-meta { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: #a85d42; margin: 14px 0 0; }
.zen-stones { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 36px; padding: 20px 0 100px; }
.zen-card { margin: 0; cursor: pointer; text-decoration: none; color: inherit; display: block; border-radius: 28px 10px 28px 10px; background: #faf7f2; border: 1px solid rgba(168, 93, 66, 0.2); box-shadow: 0 16px 40px rgba(60, 45, 35, 0.08); transition: transform .35s ease, box-shadow .35s ease; padding: 16px; }
.zen-stagger { transform: translateY(20px); }
.zen-card:hover { transform: translateY(-6px); box-shadow: 0 24px 55px rgba(60, 45, 35, 0.16); }
.zen-card.zen-stagger:hover { transform: translateY(14px); }
.zen-stone-frame { position: relative; overflow: hidden; border-radius: 20px 6px 20px 6px; }
.zen-stone-frame img { width: 100%; height: 320px; object-fit: cover; display: block; }
.zen-num { position: absolute; top: 12px; left: 14px; font-family: 'Fraunces', serif; font-size: 18px; color: #a85d42; background: rgba(255,255,255,0.85); padding: 2px 8px; border-radius: 4px; backdrop-filter: blur(4px); }
.zen-stone-meta { padding: 14px 2px 4px; }
.zen-stone-meta b { display: block; font-size: 19px; font-weight: 500; color: #2c2825; }
.zen-glaze { display: inline-block; color: #a85d42; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; }
.zen-stone-meta p { font-size: 13.5px; color: #6e655c; margin-top: 6px; line-height: 1.45; font-family: -apple-system, sans-serif; }
.zen-nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid rgba(168, 93, 66, 0.2); }
.zen-kanji { font-size: 14px; letter-spacing: .2em; color: #a85d42; font-family: serif; }
.zen-logo { font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: #2c2825; font-weight: 500; text-decoration: none; }
.zen-season { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: #8c8277; }
.zen-foot { display: flex; justify-content: space-between; padding: 30px 0; border-top: 1px solid rgba(168, 93, 66, 0.2); font-size: 12px; color: #8c8277; letter-spacing: .08em; text-transform: uppercase; }

/* Responsive adjustments for mobile devices */
@media (max-width: 640px) {
  .atelier-collection { grid-template-columns: 1fr; gap: 24px; padding-bottom: 60px; }
  .atelier-card.atelier-wide { grid-column: span 1; }
  .atelier-frame img { height: 320px; }
  .cinema-slate-grid { grid-template-columns: 1fr; gap: 20px; padding-bottom: 60px; }
  .arch-draft-grid { grid-template-columns: 1fr; gap: 20px; padding-bottom: 60px; }
  .arch-specs { gap: 12px; font-size: 10px; }
  .zen-stones { grid-template-columns: 1fr; gap: 24px; padding-bottom: 60px; }
  .zen-stagger { transform: none; }
  .zen-card.zen-stagger:hover { transform: translateY(-6px); }
  .atelier-nav, .cinema-nav, .arch-nav, .zine-nav, .zen-nav { flex-wrap: wrap; gap: 10px; }
}

/* MINI BROWSER MOCKUP THUMBNAILS (.lx-tp) */
.lx-tp-atelier{background:#0b0c10;border-color:rgba(197,160,89,0.3)}
.lx-tp-cinema{background:#050507;border-color:rgba(239,68,68,0.4)}
.lx-tp-arch{background:#f7f6f2;border-color:#18181b}
.lx-tp-zine{background:#fffcf2;border-color:#111111}
.lx-tp-zen{background:#f2ece4;border-color:rgba(168,93,66,0.3)}
.lx-tp-desire{background:#090a10;border-color:rgba(168,85,247,0.4)}

/* STUDIO PICKER THUMBNAILS (.tpl-preview) */
.tpl-preview.atelier{background:linear-gradient(135deg,#0b0c10,#1a1b24);color:#c5a059}
.tpl-preview.cinema{background:linear-gradient(135deg,#050507,#151522);color:#ef4444}
.tpl-preview.arch{background:linear-gradient(135deg,#f7f6f2,#e4e4e7);color:#18181b}
.tpl-preview.zine{background:linear-gradient(135deg,#ff2d78,#00e5ff);color:#fff}
.tpl-preview.zen{background:linear-gradient(135deg,#f2ece4,#e8ded3);color:#a85d42}
.tpl-preview.desire{background:linear-gradient(135deg,#6366f1,#d946ef);color:#fff}

/* MODAL BODY STYLING */
.lx-modal-body[data-theme="atelier"]{background:#0b0c10;color:#f4f4f0}
.lx-modal-body[data-theme="cinema"]{background:#050507;color:#f0f0f5}
.lx-modal-body[data-theme="arch"]{background:#f7f6f2;color:#18181b}
.lx-modal-body[data-theme="zine"]{background:#fffcf2;color:#111111}
.lx-modal-body[data-theme="zen"]{background:#f2ece4;color:#2c2825}
.lx-modal-body[data-theme="desire"]{background:#090a10;color:#f1f2f6}

body[data-template="moderncv"] .bg-fx, body[data-template="moderncv"] .grid-overlay { display: none !important; }