/* ============================================================================
   TailorCV Design Tokens & Primitives (Single Source of Truth)
   ========================================================================== */
:root {
  --tc-bg-1: #030014;
  --tc-bg-2: #06002a;
  --tc-bg-3: #0a0a2e;
  --tc-bg-4: #001830;
  --tc-bg-gradient: linear-gradient(135deg, #030014, #06002a, #0a0a2e, #001830);
  --tc-accent-from: #3b82f6;
  --tc-accent-to: #22d3ee;
  --tc-accent-gradient: linear-gradient(135deg, #3b82f6, #22d3ee);
  --tc-secondary: #7c3aed;
  --tc-secondary-gradient: linear-gradient(135deg, #6d28d9, #8b5cf6);
  --tc-pass: #22c55e;
  --tc-pass-bg: rgba(34,197,94,.14);
  --tc-pass-border: rgba(34,197,94,.45);
  --tc-fail: #ef4444;
  --tc-fail-bg: rgba(239,68,68,.14);
  --tc-fail-border: rgba(239,68,68,.45);
  --tc-warn: #f59e0b;
  --tc-warn-bg: rgba(245,158,11,.14);
  --tc-warn-border: rgba(245,158,11,.45);
  --tc-info: #38bdf8;
  --tc-info-bg: rgba(56,189,248,.14);
  --tc-info-border: rgba(56,189,248,.45);
  --tc-success: var(--tc-pass);
  --tc-text-1: #eef4ff;
  --tc-text-2: #cdd9f0;
  --tc-text-3: #9db4de;
  --tc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tc-font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --tc-ease: cubic-bezier(.22, .61, .36, 1);
  --tc-dur-micro: .15s;
  --tc-dur-ui: .3s;
  --tc-dur-entrance: .5s;
  --tc-dur-hero: .65s;
  --tc-brand-from: #3b82f6;
  --tc-brand-to: #8b5cf6;
  --tc-brand-gradient: linear-gradient(135deg, var(--tc-brand-from), var(--tc-brand-to));
  --tc-link: #60a5fa;
  --tc-surface-base: #0a0e1a;
  --tc-surface-card: #141a2e;
  --tc-card-border: rgba(255, 255, 255, .08);
  --tc-card-glow: inset 0 1px 0 rgba(255, 255, 255, .05);
  --tc-card-shadow: 0 8px 30px rgba(0, 0, 0, .35);
  --tc-card-shadow-lift: 0 16px 44px rgba(0, 0, 0, .45), 0 0 0 1px rgba(96, 165, 250, .25);
  --tc-r-sm: 8px; --tc-r-md: 12px; --tc-r-lg: 16px; --tc-r-xl: 20px; --tc-r-pill: 999px;
  --tc-s-1: 4px; --tc-s-2: 8px; --tc-s-3: 12px; --tc-s-4: 16px;
  --tc-s-5: 24px; --tc-s-6: 32px; --tc-s-8: 48px; --tc-s-10: 64px;
  --tc-fs-hero: clamp(2.4rem, 5vw, 3.6rem);
  --tc-fs-h1: 2rem; --tc-fs-h2: 1.5rem; --tc-fs-h3: 1.25rem;
  --tc-fs-body: 1rem; --tc-fs-sm: .875rem;
  --tc-lh-tight: 1.12; --tc-lh-snug: 1.3; --tc-lh-normal: 1.6;
  --tc-fw-hero: 800; --tc-fw-head: 700; --tc-fw-body: 400;
}
.tc-editorial { font-family: var(--tc-font-serif); }
.tc-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border: 0; border-radius: var(--tc-r-md);
  font-weight: 600; color: #fff; text-decoration: none; cursor: pointer;
  background: var(--tc-brand-gradient);
  box-shadow: 0 6px 20px rgba(59, 130, 246, .28);
}
.tc-btn--lg { padding: 15px 34px; font-size: 1.05rem; border-radius: var(--tc-r-lg); }
.tc-card {
  background: var(--tc-surface-card);
  border: 1px solid var(--tc-card-border);
  border-radius: var(--tc-r-lg);
  box-shadow: var(--tc-card-glow), var(--tc-card-shadow);
}

/* ===========================================================================
   Shared Portfolio Components & Layouts (.pf-*)
   =========================================================================== */
.pf-showcase { display: flex; flex-direction: column; gap: 40px; }
.pf-show { display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; align-items: center; }
.pf-show:nth-child(even) { grid-template-columns: .85fr 1.15fr; }
.pf-show:nth-child(even) .pf-show-media { order: 2; }
.pf-show-media { border-radius: var(--pf-radius, 14px); overflow: hidden; border: 1px solid var(--pf-border, rgba(255,255,255,.12)); background: var(--pf-surface, rgba(255,255,255,.03)); aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; }
.pf-show-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.pf-show:hover .pf-show-media img { transform: scale(1.04); }
.pf-show-ph { font-family: var(--pf-display, var(--pf-font)); font-weight: 800; font-size: 3rem; color: var(--pf-accent, #c6fb50); }
.pf-show-info h3 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 1.5rem; margin: 0 0 12px; color: var(--pf-ink, #fafafa); font-family: var(--pf-display, sans-serif); }
.pf-checkout { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--pf-border, rgba(255,255,255,.12)); color: var(--pf-body, #a1a1aa); text-decoration: none; }
.pf-checkout:hover { color: var(--pf-accent, #c6fb50); border-color: var(--pf-accent, #c6fb50); }
.pf-checkout svg { width: 13px; height: 13px; }
.pf-show-meta { font-family: var(--pf-mono, monospace); font-size: .82rem; color: var(--pf-accent, #c6fb50); margin-bottom: 10px; }
.pf-show-bullets { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pf-show-bullets li { position: relative; padding-left: 22px; font-size: .95rem; color: var(--pf-body, #a1a1aa); }
.pf-show-bullets li::before { content: "▹"; position: absolute; left: 0; color: var(--pf-accent, #c6fb50); }
.pf-show-foot { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.pf-show-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pf-show-links { display: flex; gap: 12px; flex-wrap: wrap; }
.pf-show-links .pf-btn { padding: 10px 20px; }
.pf-tl-body { display: flex; flex-direction: column; gap: 6px; }
.pf-tl-loc { font-size: .84rem; color: var(--pf-faint, #71717a); margin-top: 2px; }
@media (max-width: 820px) {
  .pf-show, .pf-show:nth-child(even) { grid-template-columns: 1fr; gap: 18px; }
  .pf-show:nth-child(even) .pf-show-media { order: 0; }
}

.pf-card-hasimg { padding-top: 0; overflow: hidden; }
.pf-card-img { margin: -1px -1px 18px; height: 180px; overflow: hidden; background: var(--pf-surface, rgba(255,255,255,.03)); }
.pf-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.pf-card-hasimg:hover .pf-card-img img { transform: scale(1.05); }
.pf-card-hasimg .pf-card-top, .pf-card-hasimg .pf-card-meta, .pf-card-hasimg .pf-bullets { padding-left: 24px; padding-right: 24px; }
.pf-card-hasimg .pf-bullets { padding-bottom: 24px; }

.pf-skill-groups { display: flex; flex-direction: column; gap: 20px; }
.pf-skill-group h3 { font-family: var(--pf-mono, monospace); font-size: .8rem; color: var(--pf-faint, #71717a); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 12px; font-weight: 500; }
.pf-socials-center { justify-content: center; margin-top: 24px; }
.pf-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.pf-burger span { width: 24px; height: 2px; background: var(--pf-ink, #f4f4f5); border-radius: 2px; }

@media (max-width: 760px) {
  .pf-nav-links.open { display: flex !important; }
  .pf-burger { display: flex !important; }
}

/* Theme class aliases for body.pf-theme-* */
body.pf-theme-bold {
  --pf-bg: #0b0b0d; --pf-ink: #fafafa; --pf-head: #e4e4e7; --pf-body: #a1a1aa;
  --pf-faint: #71717a; --pf-accent: #c6fb50; --pf-accent-ink: #0b0b0d; --pf-border: rgba(255,255,255,.12);
  --pf-font: 'Inter', system-ui, sans-serif; --pf-display: 'Space Grotesk', 'Inter', sans-serif;
  --pf-mono: 'JetBrains Mono', monospace;
  background: #0b0b0d !important; color: #a1a1aa !important; font-family: var(--pf-font);
}
body.pf-theme-bold .pf-name { text-transform: uppercase; font-weight: 700; letter-spacing: -.03em; font-size: clamp(3rem, 7.5vw, 5.8rem); }
body.pf-theme-bold .pf-hero { flex-direction: row-reverse; }
body.pf-theme-bold .pf-photo, body.pf-theme-bold .pf-avatar { width: 200px; height: 240px; border-radius: 18px; }
body.pf-theme-bold .pf-nav-links a, body.pf-theme-bold .pf-brand { text-transform: uppercase; font-size: .8rem; letter-spacing: .08em; font-family: var(--pf-mono); }
body.pf-theme-bold .pf-stat-num { color: var(--pf-accent); }
body.pf-theme-bold .pf-section-head h2 { text-transform: uppercase; }
body.pf-theme-bold .pf-card:hover { background: rgba(198,251,80,.06); }

body.pf-theme-vibrant {
  --pf-bg: #fef7ff; --pf-surface: #ffffff; --pf-ink: #1a1033; --pf-head: #2e1d52;
  --pf-body: #5b4d73; --pf-faint: #9a8bb5; --pf-accent: #d6308b; --pf-accent-ink: #ffffff;
  --pf-border: rgba(124,58,237,.18); --pf-radius: 22px; --pf-display: 'Space Grotesk', sans-serif;
  background: radial-gradient(900px 500px at 90% -5%, rgba(236,72,153,.16), transparent 60%), radial-gradient(800px 500px at -5% 30%, rgba(139,92,246,.16), transparent 55%), #fef7ff !important;
  background-attachment: fixed !important; color: #5b4d73 !important;
}
body.pf-theme-vibrant .pf-name { background: linear-gradient(110deg,#ec4899,#8b5cf6,#3b82f6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body.pf-theme-vibrant .pf-hero { flex-direction: row-reverse; }
body.pf-theme-vibrant .pf-photo, body.pf-theme-vibrant .pf-avatar { width: 220px; height: 220px; border-radius: 32px; border: 3px solid transparent; background: linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#ec4899,#8b5cf6) border-box; box-shadow: 0 24px 50px -22px rgba(236,72,153,.5); }
body.pf-theme-vibrant .pf-stat-num { background: linear-gradient(110deg,#ec4899,#8b5cf6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

body.pf-theme-clean {
  --pf-bg: #f4f4f0; --pf-surface: #ffffff; --pf-ink: #18181b; --pf-head: #27272a;
  --pf-body: #52525b; --pf-faint: #a1a1aa; --pf-accent: #6d28d9; --pf-accent-ink: #ffffff;
  --pf-border: rgba(0,0,0,.08); --pf-radius: 18px; --pf-display: 'Inter', sans-serif;
  background: #f4f4f0 !important; color: #52525b !important;
}
body.pf-theme-clean .pf-nav-links { background: #fff; border: 1px solid var(--pf-border); border-radius: 999px; padding: 4px; }
body.pf-theme-clean .pf-nav-links a { border-radius: 999px; }
body.pf-theme-clean .pf-photo, body.pf-theme-clean .pf-avatar { width: 200px; height: 200px; border-radius: 28px; box-shadow: 0 24px 50px -24px rgba(0,0,0,.3); }

body.pf-theme-editorial {
  --pf-bg: #f7f2e9; --pf-surface: #fffdf8; --pf-ink: #1f1a14; --pf-head: #3a3228;
  --pf-body: #5e564a; --pf-faint: #9c8f7c; --pf-accent: #a8421f; --pf-accent-ink: #fffdf8;
  --pf-border: rgba(31,26,20,.14); --pf-radius: 8px; --pf-display: 'Fraunces', Georgia, serif;
  background: #f7f2e9 !important; color: #5e564a !important;
}
body.pf-theme-editorial .pf-name { font-weight: 600; letter-spacing: -.01em; font-size: clamp(3rem, 7vw, 5.4rem); font-family: var(--pf-display); }
body.pf-theme-editorial .pf-hero { flex-direction: column; align-items: center; text-align: center; }

/* Editor theme additions */
.ed-focus-title { color: var(--ed-teal, #4ec9b0); font-size: 12px; letter-spacing: .12em; margin: 28px 0 14px; font-weight: 700; }
.ed-focus { font-weight: 400; line-height: 1.7; }
.ed-bullets { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ed-bullets li { position: relative; padding-left: 18px; color: var(--ed-muted, #9cdcfe); font-size: 13px; }
.ed-bullets li::before { content: "•"; position: absolute; left: 4px; color: var(--ed-accent, #569cd6); }
.ed-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.ed-skill-group { margin-bottom: 18px; }
.ed-skill-group h4 { color: var(--ed-faint, #6a9955); font-size: 12px; margin: 0 0 8px; font-family: var(--ed-mono, monospace); font-weight: 500; }
.ed-contrib { border: 1px solid var(--ed-border-2, rgba(255,255,255,.08)); border-radius: 10px; padding: 18px; background: var(--ed-surface, #1e1e1e); margin: 24px 0; }
.ed-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ed-faint, #6a9955); display: inline-block; }

/* Panels theme additions */
.pn-skill-group { margin-bottom: 18px; }
.pn-skill-group h4 { color: var(--pn-faint, #94a3b8); font-size: .82rem; margin: 0 0 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.pn-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px,100%),1fr)); gap: 16px; margin: 16px 0; }
.pn-mini { border: 1px solid var(--pn-border, rgba(255,255,255,.1)); border-radius: 14px; padding: 20px; background: rgba(255,255,255,.03); }
.pn-resp { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.pn-resp .lbl { color: var(--pn-faint, #94a3b8); font-size: .8rem; letter-spacing: .08em; }
.pn-resp .big { color: var(--pn-blue, #38bdf8); font-size: 1.2rem; font-weight: 700; }

/* portfoolio.me — base templates. Selected via body[data-template] + profile.template */
/* Picker cards (landing) */
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0}
.tpl-card{border:2px solid var(--stroke);border-radius:16px;overflow:hidden;cursor:pointer;background:rgba(255,255,255,.04);transition:.2s}
.tpl-card:hover{transform:translateY(-3px)}
.tpl-card input{display:none}
.tpl-card.selected{border-color:#22d3ee;box-shadow:0 0 0 3px rgba(34,211,238,.3)}
.tpl-preview{height:86px;display:grid;place-items:center;font-size:34px;font-weight:800}
.tpl-preview.midnight{background:radial-gradient(300px 120px at 30% 20%,rgba(108,108,245,.6),transparent),#141b3a;color:#fff}
.tpl-preview.minimal{background:#f8fafc;color:#0f172a;border-bottom:1px solid #e2e8f0}
.tpl-preview.terminal{background:#04140a;color:#4ade80;font-family:monospace}
.tpl-preview.creative{background:linear-gradient(135deg,#f472b6,#8b5cf6,#22d3ee);color:#fff}
.tpl-preview.aurora{background:linear-gradient(135deg,rgba(167,139,250,.9),rgba(103,232,249,.9)),#1e1b4b;color:#fff;backdrop-filter:blur(4px)}
.tpl-preview.editorial{background:#faf7f2;color:#1c1917;border-bottom:3px solid #1c1917;font-family:Georgia,serif;font-style:italic}
.tpl-preview.brutalist{background:#fef08a;color:#000;border-bottom:4px solid #000}
.tpl-preview.afterglow{background:linear-gradient(180deg,#2b1055 0%,#7597de 0%,#ff6b6b 78%,#ffd166 100%);color:#fff}
.tpl-preview.ultraviolet{background:radial-gradient(circle at 50% 120%,#b5179e,#3a0ca3 70%);color:#e0aaff}
.tpl-preview.tidepool{background:linear-gradient(180deg,#012a4a,#01497c 55%,#2ec4b6);color:#d8f3dc}
.tpl-preview.museum{background:#f4efe6;color:#2c2416;border:6px solid #fff;box-shadow:0 6px 16px rgba(60,45,20,.25);font-family:Georgia,serif}
.tpl-preview.catalog{background:#faf9f7;color:#111;border-top:3px solid #111;font-family:Georgia,serif;font-style:italic}
.tpl-preview.bloom{background:linear-gradient(140deg,#fff7fb,#f7f3ff 55%,#f0f9ff);color:#b07cc6;border-radius:14px}
.tpl-meta{padding:10px 12px}
.tpl-meta b{font-size:14px;display:block}
.tpl-meta span{font-size:12px;color:var(--muted)}
/* Picker thumbnails: live mini-previews fill the preview area */
.tpl-card .tpl-preview{padding:8px}
.tpl-card .lx-tp{width:100%;height:100%;min-height:70px;aspect-ratio:auto;margin:0;border-radius:10px}
.lx-tp-gallery{background:linear-gradient(160deg,#101623,#1d2942)}
.lx-tp-gallery .lx-tp-nav{background:rgba(79,70,229,.12)}
.lx-tp-gallery .lx-tp-hero{background:linear-gradient(90deg,#4f46e5,#6366f1)}
.lx-tp-gallery .lx-tp-cards{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.lx-tp-studio{background:#faf9f7}
.lx-tp-studio .lx-tp-nav{background:#fff;border-bottom-color:#e7e0d3}
.lx-tp-studio .lx-tp-hero{background:#1c1917;border-radius:6px}
.lx-tp-studio .lx-tp-cards{background:#fff;border:1px solid #e7e0d3;box-shadow:0 2px 8px rgba(28,25,23,.08)}
.lx-tp-noir{background:#050807}
.lx-tp-noir .lx-tp-nav{background:transparent;border-bottom-color:rgba(255,255,255,.12)}
.lx-tp-noir .lx-tp-hero{background:#e7ece9;border-radius:2px}
.lx-tp-noir .lx-tp-cards{background:#0d1312;border:1px solid rgba(255,255,255,.1)}
.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-cards{background:rgba(15,28,48,.85);border:1px solid rgba(45,212,191,.25)}.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)}
.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-cards{background:rgba(13,21,39,.9);border:1px solid rgba(56,189,248,.25)}.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)}
.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-cards{background:#050a06;border:1px solid rgba(46,230,166,.3)}.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)}
.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-cards{background:#27272a;border:1px solid rgba(255,255,255,.1);border-radius:8px}.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)}
.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:monospace;font-size:9px;font-weight:700;color:#00ff75}.lx-tp-console .lx-tp-cards{background:#0f121a;border:1px solid rgba(0,255,117,.25)}.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}
.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-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}
.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-cards{background:rgba(255,255,255,.6);border:1px solid #8c6d46}.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}
.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)}.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-cards{background:rgba(255,255,255,.9);border:1px solid #dbeafe;border-radius:8px}.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}
.lx-tp-editor{background:#1e1e1e}.lx-tp-editor .lx-tp-nav{background:#323233;border-bottom:1px solid #2b2b2b}.lx-tp-editor .lx-tp-hero{background:#252526;border:1px solid #3c3c3c;border-radius:6px}.lx-tp-editor .lx-tp-cards{background:#252526;border:1px solid #3c3c3c;border-radius:6px}.lx-tp-editor .lx-tp-nav::before{content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:#ff5f57;box-shadow:8px 0 0 #febc2e,16px 0 0 #28c840}
.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}
@media(max-width:900px){.tpl-grid{grid-template-columns:1fr 1fr}}

/* Light themes: readable muted text on pale surfaces (dashboard + portfolio) */
body[data-template="minimal"],body[data-template="editorial"],body[data-template="brutalist"]{--muted:#55606e}

/* ---- Template: midnight (dark neon wow, default) ---- */
body[data-template="midnight"],
body.portfolio-view:not([data-template]),
body.portfolio-view[data-template=""]{background:#070b16;color:#eef2ff}
body[data-template="midnight"] .bg-fx,
body.portfolio-view:not([data-template]) .bg-fx,
body.portfolio-view[data-template=""] .bg-fx{background:radial-gradient(800px 500px at 10% 5%,rgba(108,108,245,.28),transparent 60%),radial-gradient(700px 500px at 90% 15%,rgba(34,211,238,.18),transparent 60%),radial-gradient(600px 600px at 50% 100%,rgba(244,114,182,.14),transparent 60%),linear-gradient(#070b16,#070b16)}
body[data-template="midnight"] .grid-overlay,
body.portfolio-view:not([data-template]) .grid-overlay,
body.portfolio-view[data-template=""] .grid-overlay{opacity:.35;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:56px 56px}
body[data-template="midnight"] .card,body[data-template="midnight"] .stat,body[data-template="midnight"] .proj,
body.portfolio-view:not([data-template]) .card,body.portfolio-view:not([data-template]) .stat,body.portfolio-view:not([data-template]) .proj{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);box-shadow:0 20px 60px rgba(0,0,0,.5);color:#eef2ff}

/* ---- Template: minimal (light, ATS-friendly) ---- */
body[data-template="minimal"]{background:#f8fafc;color:#0f172a}
body[data-template="minimal"] .bg-fx,body[data-template="minimal"] .grid-overlay{display:none}
body[data-template="minimal"] nav{background:rgba(255,255,255,.9);border-color:#e2e8f0}
body[data-template="minimal"] .nav-links a,body[data-template="minimal"] .logo{color:#0f172a}
body[data-template="minimal"] .card,body[data-template="minimal"] .stat,body[data-template="minimal"] .proj,body[data-template="minimal"] .dir-card{background:#fff;border-color:#e2e8f0;box-shadow:0 8px 24px rgba(15,23,42,.06);color:#0f172a}
body[data-template="minimal"] .card p,body[data-template="minimal"] .sub,body[data-template="minimal"] p.lead,body[data-template="minimal"] .hero-meta{color:#475569}
body[data-template="minimal"] h1,body[data-template="minimal"] h2,body[data-template="minimal"] h3{color:#0f172a;letter-spacing:-.5px}
body[data-template="minimal"] .grad{background:linear-gradient(90deg,#4f46e5,#0ea5e9);-webkit-background-clip:text;background-clip:text;color:transparent}
body[data-template="minimal"] .btn-ghost{background:#fff;border-color:#cbd5e1;color:#0f172a}
body[data-template="minimal"] input,body[data-template="minimal"] textarea{background:#fff;border-color:#cbd5e1;color:#0f172a}
body[data-template="minimal"] .badge{background:#eef2ff;border-color:#c7d2fe;color:#3730a3}
body[data-template="minimal"] .tags span{background:#f1f5f9;border-color:#e2e8f0;color:#334155}
body[data-template="minimal"] footer{color:#64748b}

/* ---- Template: terminal (hacker) ---- */
body[data-template="terminal"]{background:#030b06;color:#d1fae5;font-family:'JetBrains Mono',monospace}
body[data-template="terminal"] .bg-fx{background:radial-gradient(600px 400px at 50% 0%,rgba(74,222,128,.12),transparent),#030b06}
body[data-template="terminal"] .grid-overlay{opacity:.15}
body[data-template="terminal"] nav{background:rgba(3,11,6,.9);border-color:#14532d}
body[data-template="terminal"] .card,body[data-template="terminal"] .stat,body[data-template="terminal"] .proj{background:rgba(6,40,20,.6);border-color:#166534;color:#d1fae5}
body[data-template="terminal"] h1,body[data-template="terminal"] h2,body[data-template="terminal"] h3{font-family:'JetBrains Mono',monospace;color:#ecfdf5}
body[data-template="terminal"] .grad{background:none;color:#4ade80;-webkit-text-fill-color:#4ade80}
body[data-template="terminal"] .btn-primary{background:#16a34a;box-shadow:0 10px 30px rgba(22,163,74,.4)}
body[data-template="terminal"] .btn-ghost{background:transparent;border-color:#166534;color:#bbf7d0}
body[data-template="terminal"] .badge,body[data-template="terminal"] .tags span{background:rgba(22,163,74,.15);border-color:#166534;color:#86efac}
body[data-template="terminal"] input,body[data-template="terminal"] textarea{background:#02120a;border-color:#166534;color:#d1fae5}

/* ---- Template: creative (playful gradient) ---- */
body[data-template="creative"]{background:#0b0620;color:#fff}
body[data-template="creative"] .bg-fx{background:radial-gradient(700px 400px at 15% 10%,rgba(244,114,182,.35),transparent 60%),radial-gradient(700px 400px at 85% 20%,rgba(139,92,246,.4),transparent 60%),radial-gradient(600px 500px at 50% 100%,rgba(34,211,238,.25),transparent 60%),#0b0620}
body[data-template="creative"] .btn-primary{background:linear-gradient(135deg,#f472b6,#8b5cf6,#22d3ee)}
body[data-template="creative"] .proj-top{font-size:64px}
body[data-template="creative"] .card,body[data-template="creative"] .stat,body[data-template="creative"] .proj{background:rgba(255,255,255,.06);border-color:rgba(244,114,182,.35);color:#fff}
body[data-template="creative"] .card:hover,body[data-template="creative"] .proj:hover{border-color:#f472b6}

/* ---- Template: aurora (glassmorphism pastel) ---- */
body[data-template="aurora"]{background:#12102e;color:#fff}
body[data-template="aurora"] .bg-fx{background:radial-gradient(700px 450px at 15% 10%,rgba(167,139,250,.35),transparent 60%),radial-gradient(700px 450px at 85% 25%,rgba(103,232,249,.3),transparent 60%),radial-gradient(600px 500px at 50% 100%,rgba(249,168,212,.22),transparent 60%),#12102e}
body[data-template="aurora"] .card,body[data-template="aurora"] .stat,body[data-template="aurora"] .proj,body[data-template="aurora"] nav{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(18px);box-shadow:0 20px 50px rgba(0,0,0,.35);color:#fff}
body[data-template="aurora"] .btn-primary{background:linear-gradient(135deg,#a78bfa,#67e8f9);color:#1e1b4b}
body[data-template="aurora"] .badge{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#ede9fe}
body[data-template="aurora"] .tags span{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#e0e7ff}

/* ---- Template: editorial (serif print) ---- */
body[data-template="editorial"]{background:#faf7f2;color:#1c1917}
body[data-template="editorial"] .bg-fx,body[data-template="editorial"] .grid-overlay{display:none}
body[data-template="editorial"] h1,body[data-template="editorial"] h2,body[data-template="editorial"] h3{font-family:Georgia,'Times New Roman',serif;letter-spacing:-.5px;color:#1c1917}
body[data-template="editorial"] nav{background:rgba(250,247,242,.92);border-color:#e7e0d3;border-bottom:3px solid #1c1917}
body[data-template="editorial"] .card,body[data-template="editorial"] .proj{background:#fff;border:1px solid #e7e0d3;border-left:5px solid #1c1917;box-shadow:0 10px 30px rgba(28,25,23,.07)}
body[data-template="editorial"] .card p,body[data-template="editorial"] .sub,body[data-template="editorial"] p.lead{color:#57534e}
body[data-template="editorial"] .grad{background:none;color:#b45309;-webkit-text-fill-color:#b45309}
body[data-template="editorial"] .btn-primary{background:#1c1917;color:#faf7f2!important;box-shadow:none}
body[data-template="editorial"] .btn-ghost{background:transparent;border-color:#1c1917;color:#1c1917}
body[data-template="editorial"] .badge{background:#fef3c7;border-color:#f59e0b;color:#92400e}
body[data-template="editorial"] .tags span{background:#f5f0e8;border-color:#d6cfbf;color:#44403c}

/* ---- Template: brutalist (neo-brutalism pop) ---- */
body[data-template="brutalist"]{background:#fef9c3;color:#000}
body[data-template="brutalist"] .bg-fx,body[data-template="brutalist"] .grid-overlay{display:none}
body[data-template="brutalist"] nav{background:#fff;border:3px solid #000;box-shadow:5px 5px 0 #000}
body[data-template="brutalist"] .card,body[data-template="brutalist"] .proj{background:#fff;border:3px solid #000;border-radius:14px;box-shadow:6px 6px 0 #000}
body[data-template="brutalist"] .card p,body[data-template="brutalist"] .sub,body[data-template="brutalist"] p.lead{color:#333}
body[data-template="brutalist"] h1,body[data-template="brutalist"] h2,body[data-template="brutalist"] h3{letter-spacing:-1px}
body[data-template="brutalist"] .grad{background:none;color:#7c3aed;-webkit-text-fill-color:#7c3aed}
body[data-template="brutalist"] .btn-primary{background:#a3e635;color:#000;border:3px solid #000;box-shadow:4px 4px 0 #000}
body[data-template="brutalist"] .btn-ghost{background:#fff;border:3px solid #000;color:#000;box-shadow:4px 4px 0 #000}
body[data-template="brutalist"] .badge{background:#f472b6;border:2px solid #000;color:#000;font-weight:800}
body[data-template="brutalist"] .tags span{background:#67e8f9;border:2px solid #000;color:#000}
.brut-portrait{position:relative;transform:rotate(2deg);width:min(340px,82vw);flex-shrink:0}
.brut-portrait img{width:100%;aspect-ratio:1/1;object-fit:cover;border:4px solid #000;border-radius:20px;box-shadow:10px 10px 0 #7c3aed;position:relative;z-index:1;display:block;background:#fff}
.brut-portrait::before{content:"";position:absolute;inset:14px -14px -14px 14px;background:#a3e635;border:4px solid #000;border-radius:24px;z-index:0}
.brut-portrait::after{content:"★";position:absolute;top:-26px;right:-14px;z-index:2;width:52px;height:52px;display:grid;place-items:center;background:#f472b6;border:3px solid #000;border-radius:50%;font-size:24px;box-shadow:3px 3px 0 #000}

/* ---- Template: afterglow (sunset neon, original) ---- */
body[data-template="afterglow"]{background:#160a2e;color:#ffe8d6}
body[data-template="afterglow"] .bg-fx{background:radial-gradient(900px 320px at 50% 108%,rgba(255,107,107,.55),transparent 65%),radial-gradient(700px 380px at 12% 8%,rgba(178,44,134,.4),transparent 60%),radial-gradient(700px 380px at 88% 12%,rgba(255,209,102,.22),transparent 60%),#160a2e}
body[data-template="afterglow"] .grid-overlay{opacity:.25}
body[data-template="afterglow"] nav{background:rgba(43,16,85,.72);border-color:rgba(255,107,107,.4)}
body[data-template="afterglow"] .card,body[data-template="afterglow"] .proj{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,107,107,.35);box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 24px rgba(255,107,107,.12)}
body[data-template="afterglow"] .card p,body[data-template="afterglow"] .sub,body[data-template="afterglow"] p.lead{color:#e9c9b8}
body[data-template="afterglow"] h1,body[data-template="afterglow"] h2,body[data-template="afterglow"] h3{color:#fff8f0}
body[data-template="afterglow"] .grad{background:linear-gradient(90deg,#ffd166,#ff6b6b,#ff4d8d);-webkit-background-clip:text;background-clip:text;color:transparent}
body[data-template="afterglow"] .btn-primary{background:linear-gradient(135deg,#ff6b6b,#ff4d8d);box-shadow:0 10px 30px rgba(255,77,141,.45)}
body[data-template="afterglow"] .btn-ghost{background:rgba(255,209,102,.08);border-color:rgba(255,209,102,.5);color:#ffe8d6}
body[data-template="afterglow"] .badge{background:rgba(255,209,102,.12);border-color:rgba(255,209,102,.5);color:#ffd166}
body[data-template="afterglow"] .tags span{background:rgba(255,77,141,.14);border-color:rgba(255,77,141,.45);color:#ff8fb3}
body[data-template="afterglow"] .eyebrow{color:#ffd166;background:rgba(255,209,102,.1);border-color:rgba(255,209,102,.3)}

/* ---- Template: ultraviolet (violet haze neon, original) ---- */
body[data-template="ultraviolet"]{background:#10002b;color:#e9d5ff}
body[data-template="ultraviolet"] .bg-fx{background:radial-gradient(600px 420px at 50% 118%,rgba(181,23,158,.5),transparent 62%),radial-gradient(640px 380px at 10% 6%,rgba(114,9,183,.5),transparent 60%),radial-gradient(640px 380px at 90% 10%,rgba(76,201,240,.16),transparent 60%),#10002b}
body[data-template="ultraviolet"] .grid-overlay{opacity:.22}
body[data-template="ultraviolet"] nav{background:rgba(36,0,70,.72);border-color:rgba(181,23,158,.45)}
body[data-template="ultraviolet"] .card,body[data-template="ultraviolet"] .proj{background:rgba(60,9,108,.42);border:1px solid rgba(199,125,255,.35);box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 28px rgba(114,9,183,.35)}
body[data-template="ultraviolet"] .card p,body[data-template="ultraviolet"] .sub,body[data-template="ultraviolet"] p.lead{color:#c9a9e8}
body[data-template="ultraviolet"] h1,body[data-template="ultraviolet"] h2,body[data-template="ultraviolet"] h3{color:#f5ecff;text-shadow:0 0 26px rgba(181,23,158,.55)}
body[data-template="ultraviolet"] .grad{background:linear-gradient(90deg,#e0aaff,#ff5da2,#4cc9f0);-webkit-background-clip:text;background-clip:text;color:transparent}
body[data-template="ultraviolet"] .btn-primary{background:linear-gradient(135deg,#b5179e,#7209b7);box-shadow:0 10px 30px rgba(181,23,158,.5)}
body[data-template="ultraviolet"] .btn-ghost{background:rgba(76,201,240,.07);border-color:rgba(76,201,240,.45);color:#caf0f8}
body[data-template="ultraviolet"] .badge{background:rgba(224,170,255,.1);border-color:rgba(224,170,255,.45);color:#e0aaff}
body[data-template="ultraviolet"] .tags span{background:rgba(255,93,162,.12);border-color:rgba(255,93,162,.45);color:#ff8fbf}
body[data-template="ultraviolet"] .eyebrow{color:#e0aaff;background:rgba(114,9,183,.25);border-color:rgba(199,125,255,.4)}

/* ---- Ultraviolet layout: signal rail + divider rows, mono-forward ---- */
body[data-template="ultraviolet"] h1,body[data-template="ultraviolet"] h2,body[data-template="ultraviolet"] h3{font-family:'JetBrains Mono',monospace}
.uv-grid{display:grid;grid-template-columns:280px 1fr;gap:36px;align-items:start}
.uv-rail{position:sticky;top:96px;border:1px solid rgba(199,125,255,.4);border-radius:18px;padding:22px;background:rgba(36,0,70,.6);box-shadow:0 0 34px rgba(114,9,183,.4)}
.uv-rail img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:2px solid #e0aaff;box-shadow:0 0 26px rgba(181,23,158,.8)}
.uv-orb{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;font-size:38px;font-weight:800;background:radial-gradient(circle at 35% 30%,#ff5da2,#7209b7);border:2px solid #e0aaff}
.uv-rail h1{font-size:26px;margin-top:12px;line-height:1.1}
.uv-status{font-size:12px;color:#4ade80;margin-top:6px}
.uv-links{display:grid;gap:6px;margin-top:12px}
.uv-links a{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:#4cc9f0}
.uv-row{display:flex;gap:14px;align-items:center;padding:16px 4px;border-bottom:1px solid rgba(199,125,255,.3)}
.uv-row h3{font-size:18px}
.uv-row p{font-size:14px}
@media(max-width:820px){.uv-grid{grid-template-columns:1fr}.uv-rail{position:static}}

/* ---- Template: tidepool (bioluminescent abyss, original) ---- */
body[data-template="tidepool"]{background:#01121f;color:#d8f3dc}
body[data-template="tidepool"] .bg-fx{background:radial-gradient(760px 300px at 50% 112%,rgba(46,196,182,.4),transparent 60%),radial-gradient(640px 380px at 12% 8%,rgba(1,73,124,.7),transparent 60%),radial-gradient(640px 380px at 88% 14%,rgba(255,203,5,.12),transparent 60%),#01121f}
body[data-template="tidepool"] .grid-overlay{opacity:.2}
body[data-template="tidepool"] nav{background:rgba(1,33,56,.75);border-color:rgba(46,196,182,.4)}
body[data-template="tidepool"] .card,body[data-template="tidepool"] .proj{background:linear-gradient(180deg,rgba(46,196,182,.12),rgba(1,33,56,.5));border:1px solid rgba(46,196,182,.4);box-shadow:0 18px 50px rgba(0,0,0,.5),inset 0 0 30px rgba(46,196,182,.06)}
body[data-template="tidepool"] .card p,body[data-template="tidepool"] .sub,body[data-template="tidepool"] p.lead{color:#95d5b2}
body[data-template="tidepool"] h1,body[data-template="tidepool"] h2,body[data-template="tidepool"] h3{color:#f0fff4;text-shadow:0 0 22px rgba(46,196,182,.6)}
body[data-template="tidepool"] .grad{background:linear-gradient(90deg,#80ffdb,#48bfe3,#ffcb05);-webkit-background-clip:text;background-clip:text;color:transparent}
body[data-template="tidepool"] .btn-primary{background:linear-gradient(135deg,#2ec4b6,#48bfe3);color:#012a4a;box-shadow:0 10px 30px rgba(46,196,182,.45)}
body[data-template="tidepool"] .btn-ghost{background:rgba(255,203,5,.06);border-color:rgba(255,203,5,.45);color:#ffea9d}
body[data-template="tidepool"] .badge{background:rgba(128,255,219,.08);border-color:rgba(128,255,219,.45);color:#80ffdb}
body[data-template="tidepool"] .tags span{background:rgba(255,203,5,.08);border-color:rgba(255,203,5,.4);color:#ffdf6b}
body[data-template="tidepool"] .eyebrow{color:#80ffdb;background:rgba(46,196,182,.12);border-color:rgba(46,196,182,.4)}
/* ---- Tidepool layout: staggered specimen grid (no horizontal overflow) ---- */
body[data-template="tidepool"] .tp-zig article:nth-child(3n+2){margin-top:30px}
body[data-template="tidepool"] .tp-zig article:nth-child(3n){margin-top:60px}
body[data-template="tidepool"] .tp-zig .proj-top{border-bottom:2px dashed rgba(128,255,219,.4)}
@media(max-width:820px){body[data-template="tidepool"] .tp-zig article:nth-child(3n+2),body[data-template="tidepool"] .tp-zig article:nth-child(3n){margin-top:0}}

/* ---- Afterglow layout: split hero + strip rows ---- */
body[data-template="afterglow"] h1,body[data-template="afterglow"] h2,body[data-template="afterglow"] .btn{font-family:'Space Grotesk',sans-serif}
.ag-split{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;padding:56px 0 10px}
.ag-split h1{font-size:clamp(46px,7vw,88px);line-height:.98;letter-spacing:-2px}
.ag-kicker{letter-spacing:4px;font-size:12px;color:#ffd166}
.ag-sunbar{width:180px;height:4px;margin:14px 0;border-radius:100px;background:linear-gradient(90deg,#ffd166,#ff6b6b,#ff4d8d)}
.ag-sunring{width:min(300px,70vw);aspect-ratio:1;border-radius:50%;padding:12px;background:conic-gradient(from 200deg,#ffd166,#ff6b6b,#ff4d8d,#b22c86,#ffd166);box-shadow:0 0 70px rgba(255,107,107,.5);justify-self:center}
.ag-sunring img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:4px solid #160a2e}
.ag-sunring-empty{background:conic-gradient(from 200deg,#ffd166,#ff6b6b,#ff4d8d,#b22c86,#ffd166);min-height:min(300px,70vw)}
.ag-row{display:flex;gap:18px;align-items:center;background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,107,107,.3);border-left:5px solid #ff6b6b;border-radius:16px;padding:18px 20px;margin-bottom:12px}
.ag-num{font-family:'Space Grotesk';font-size:34px;font-weight:700;color:transparent;-webkit-text-stroke:1.5px #ffd166;flex-shrink:0}
@media(max-width:820px){.ag-split{grid-template-columns:1fr}.ag-sunring{order:-1;width:min(220px,60vw)}}

/* ---- Template: fullpage (bold scroll, red accent) ---- */
body[data-template="fullpage"]{background:#fff;color:#1c1917}
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}
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"] footer .wrap.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}

/* ==========================================================================
   Modern CV Theme — Developer CV (Bilingual, Dark/Light, Animated)
   ========================================================================== */
.tpl-preview.moderncv {
    background: linear-gradient(135deg, #020617, #1e293b);
    color: #c084fc;
    border-bottom: 2px solid #a78bfa;
}

.tpl-preview.ultracode {
    background: linear-gradient(135deg, hsl(242, 19%, 5%), hsl(242, 14%, 10%));
    color: hsl(342, 92%, 46%);
    border-bottom: 2px solid hsl(342, 92%, 46%);
}

.tpl-preview.devblue {
    background: linear-gradient(135deg, #0e2431, #1e3a5f);
    color: #4070f4;
    border-bottom: 2px solid #4070f4;
}

.tpl-preview.cube,
.tpl-preview.cubegreen,
.tpl-preview.muzammal {
    background: linear-gradient(135deg, #212529, #343a40);
    color: #80ed99;
    border-bottom: 2px solid #80ed99;
}

body[data-template="moderncv"],
body.body-main[data-template="moderncv"] {
    --primary: #c084fc;
    --secondary: #a78bfa;
    --accent: #fbbf24;
    --cyan: #67e8f9;
    --purple: #a78bfa;
    --green: #86efac;
    --bg-dark: #0f172a;
    --bg-darker: #020617;
    --bg-card: #1e293b;
    --bg-hover: #334155;
    --border: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --gradient-1: linear-gradient(135deg, #c084fc 0%, #a78bfa 50%, #67e8f9 100%);
    --gradient-2: linear-gradient(135deg, #67e8f9 0%, #a78bfa 50%, #fbbf24 100%);
    --gradient-3: linear-gradient(135deg, #86efac 0%, #67e8f9 100%);
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.2);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.3);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.4);
    --shadow-glow: 0 0 30px rgba(192,132,252,0.3);
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --font-primary: 'Tajawal', sans-serif;
    --font-code: 'Fira Code', monospace;

    font-family: var(--font-primary), 'Tajawal', sans-serif;
    font-weight: 500;
    background: var(--bg-dark);
    color: var(--text-primary);
    line-height: 1.7;
    overflow-x: hidden;
    transition: background var(--transition-fast), color var(--transition-fast);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body[data-template="moderncv"][data-theme="light"],
body[data-template="moderncv"] [data-theme="light"],
[data-theme="light"] body[data-template="moderncv"] {
    --bg-dark: #ffffff;
    --bg-darker: #f8f9fa;
    --bg-card: #ffffff;
    --bg-hover: #f1f3f5;
    --border: #e5e7eb;
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;
}

body[data-template="moderncv"][dir="rtl"],
body[data-template="moderncv"][data-dir="rtl"] { direction: rtl; text-align: right; }
body[data-template="moderncv"][dir="ltr"],
body[data-template="moderncv"][data-dir="ltr"] { direction: ltr; text-align: left; }

body[data-template="moderncv"] h1,
body[data-template="moderncv"] h2,
body[data-template="moderncv"] h3,
body[data-template="moderncv"] h4,
body[data-template="moderncv"] h5,
body[data-template="moderncv"] h6 {
    font-weight: 700;
}

body[data-template="moderncv"] .hero-name,
body[data-template="moderncv"] .section-title,
body[data-template="moderncv"] .timeline-title,
body[data-template="moderncv"] .project-title,
body[data-template="moderncv"] .category-title {
    font-weight: 800;
}

body[data-template="moderncv"] img {
    max-width: 100%;
    height: auto;
}

/* Loader Screen */
body[data-template="moderncv"] .loader-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-darker);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity 0.5s, visibility 0.5s;
}

body[data-template="moderncv"] .loader-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

body[data-template="moderncv"] .loader-content {
    text-align: center;
}

body[data-template="moderncv"] .loader-code-text {
    font-family: var(--font-code);
    font-size: 1.2rem;
    color: var(--primary);
    margin-bottom: 2rem;
}

body[data-template="moderncv"] .code-line {
    display: block;
    margin: 0.5rem 0;
    opacity: 0;
    transform: translateY(20px);
    animation: moderncvFadeInUp 0.5s ease forwards;
}

body[data-template="moderncv"] .code-line[data-line="1"] { animation-delay: 0.1s; }
body[data-template="moderncv"] .code-line[data-line="2"] { animation-delay: 0.3s; }
body[data-template="moderncv"] .code-line[data-line="3"] { animation-delay: 0.5s; }
body[data-template="moderncv"] .code-line[data-line="4"] { animation-delay: 0.7s; }

@keyframes moderncvFadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

body[data-template="moderncv"] .loader-spinner-wrapper {
    margin: 2rem 0;
}

body[data-template="moderncv"] .loader-spinner {
    width: 60px;
    height: 60px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-right-color: var(--cyan);
    border-radius: 50%;
    animation: moderncvSpin 1s linear infinite;
    margin: 0 auto;
}

@keyframes moderncvSpin {
    to { transform: rotate(360deg); }
}

body[data-template="moderncv"] .loader-progress-wrapper {
    width: 200px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 2rem auto;
    overflow: hidden;
}

body[data-template="moderncv"] .loader-progress-bar {
    height: 100%;
    background: var(--gradient-1);
    width: 0%;
    animation: moderncvProgress 2s ease forwards;
    box-shadow: 0 0 10px var(--primary);
}

@keyframes moderncvProgress {
    to { width: 100%; }
}

body[data-template="moderncv"] .loader-percentage {
    font-family: var(--font-code);
    color: var(--primary);
    font-size: 1rem;
    margin-top: 1rem;
}

/* Header & Navigation */
body[data-template="moderncv"] .main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(10, 14, 39, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    z-index: 1000;
    transition: all var(--transition);
}

body[data-template="moderncv"] .main-header.scrolled {
    background: rgba(10, 14, 39, 0.95);
    box-shadow: var(--shadow-md);
}

body[data-template="moderncv"][data-theme="light"] .main-header {
    background: rgba(255, 255, 255, 0.85);
}

body[data-template="moderncv"][data-theme="light"] .main-header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

body[data-template="moderncv"] .nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body[data-template="moderncv"] .nav-brand {
    display: flex;
    align-items: center;
}

body[data-template="moderncv"] .brand-logo {
    font-family: var(--font-code);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

body[data-template="moderncv"] .logo-bracket {
    color: var(--purple);
}

body[data-template="moderncv"] .logo-text {
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body[data-template="moderncv"] .nav-menu {
    display: flex;
    gap: 2rem;
    align-items: center;
}

body[data-template="moderncv"] .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all var(--transition-fast);
    position: relative;
}

body[data-template="moderncv"] .nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--gradient-1);
    transition: width var(--transition);
}

body[data-template="moderncv"] .nav-link:hover,
body[data-template="moderncv"] .nav-link.active {
    color: var(--primary);
}

body[data-template="moderncv"] .nav-link.active::before {
    width: 80%;
}

body[data-template="moderncv"] .nav-link i {
    font-size: 1rem;
}

body[data-template="moderncv"] .nav-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
}

body[data-template="moderncv"] .lang-toggle,
body[data-template="moderncv"] .theme-toggle,
body[data-template="moderncv"] .menu-toggle {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 0.6rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

body[data-template="moderncv"] .lang-toggle:hover,
body[data-template="moderncv"] .theme-toggle:hover {
    background: var(--bg-hover);
    border-color: var(--primary);
    color: var(--primary);
}

body[data-template="moderncv"] .menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 0.6rem;
}

body[data-template="moderncv"] .menu-toggle span {
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    transition: all var(--transition);
}

body[data-template="moderncv"] .menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

body[data-template="moderncv"] .menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

body[data-template="moderncv"] .menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

body[data-template="moderncv"] .main-content {
    margin-top: 80px;
}

/* Hero Section */
body[data-template="moderncv"] .hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 4rem 0;
}

body[data-template="moderncv"] .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

body[data-template="moderncv"] .code-grid-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(var(--primary) 1px, transparent 1px),
        linear-gradient(90deg, var(--primary) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.05;
    animation: moderncvGridMove 20s linear infinite;
}

@keyframes moderncvGridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

body[data-template="moderncv"] .floating-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body[data-template="moderncv"] .particle {
    position: absolute;
    font-family: var(--font-code);
    font-size: 1.5rem;
    color: var(--primary);
    opacity: 0.1;
    animation: moderncvFloat 15s infinite ease-in-out;
}

@keyframes moderncvFloat {
    0%, 100% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10%, 90% {
        opacity: 0.1;
    }
    50% {
        transform: translateY(-100px) rotate(180deg);
        opacity: 0.2;
    }
}

body[data-template="moderncv"] .hero-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

body[data-template="moderncv"] .hero-content {
    z-index: 1;
}

body[data-template="moderncv"] .hero-greeting {
    font-family: var(--font-code);
    font-size: 1.2rem;
    color: var(--primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body[data-template="moderncv"] .greeting-cursor {
    animation: moderncvBlink 1s infinite;
    color: var(--primary);
}

@keyframes moderncvBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

body[data-template="moderncv"] .hero-name {
    font-family: var(--font-code);
    font-size: clamp(2rem, 3.2vw, 3.25rem);
    word-break: keep-all;
    overflow-wrap: break-word;
    font-weight: 700;
    margin-bottom: 2rem;
    line-height: 1.2;
}

body[data-template="moderncv"] .name-prefix {
    color: var(--purple);
}

body[data-template="moderncv"] .name-ident {
    color: var(--text-primary);
    margin-inline-start: 0.35rem;
}

body[data-template="moderncv"] .name-operator {
    color: var(--cyan);
    margin: 0 0.5rem;
}

body[data-template="moderncv"] .name-value {
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    white-space: nowrap;
}

body[data-template="moderncv"] .name-suffix {
    color: var(--primary);
}

body[data-template="moderncv"] .hero-title {
    font-family: var(--font-code);
    font-size: 1.5rem;
    color: var(--cyan);
    margin-bottom: 2rem;
}

body[data-template="moderncv"] .title-prefix {
    color: var(--text-muted);
    margin-inline-end: 0.5rem;
}

body[data-template="moderncv"] .hero-description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    line-height: 1.8;
    max-width: 600px;
}

body[data-template="moderncv"] .hero-buttons {
    display: flex;
    gap: 2rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

body[data-template="moderncv"] .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition);
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 1rem;
}

body[data-template="moderncv"] .btn-primary {
    background: var(--gradient-1);
    color: white !important;
    border-color: transparent;
}

body[data-template="moderncv"] .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(192,132,252,0.3);
}

body[data-template="moderncv"] .btn-secondary {
    background: transparent;
    color: var(--primary) !important;
    border-color: var(--primary);
}

body[data-template="moderncv"] .btn-secondary:hover {
    background: var(--primary);
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(192,132,252,0.3);
}

body[data-template="moderncv"] .hero-social {
    display: flex;
    gap: 2rem;
}

body[data-template="moderncv"] .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 var(--transition-fast);
}

body[data-template="moderncv"] .social-icon:hover {
    background: var(--bg-hover);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(192,132,252,0.2);
}

body[data-template="moderncv"] .hero-image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

body[data-template="moderncv"] .hero-image-container {
    position: relative;
    width: 400px;
    height: 400px;
}

body[data-template="moderncv"] .profile-image-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(255,107,157,0.2) 0%, transparent 70%);
    border-radius: 50%;
    animation: moderncvPulse 3s ease-in-out infinite;
}

@keyframes moderncvPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.8;
    }
}

body[data-template="moderncv"] .profile-image-frame {
    position: relative;
    width: 100%;
    height: 100%;
    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"] .profile-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    will-change: transform;
}

body[data-template="moderncv"] .profile-placeholder {
    font-size: 8rem;
    color: var(--primary);
    opacity: 0.3;
}

body[data-template="moderncv"] .floating-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: moderncvFloatBadge 3s ease-in-out infinite;
    min-width: 200px;
    transition: all var(--transition-smooth);
}

body[data-template="moderncv"] .floating-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"] .floating-badge i {
    font-size: 2rem;
    color: var(--primary);
    flex-shrink: 0;
}

body[data-template="moderncv"] .badge-content {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

body[data-template="moderncv"] .badge-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

body[data-template="moderncv"] .badge-libs {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 400;
    line-height: 1.4;
}

body[data-template="moderncv"] .badge-1 {
    top: 10%;
    right: -10%;
    animation-delay: 0s;
}

body[data-template="moderncv"] .badge-2 {
    bottom: 20%;
    right: -15%;
    animation-delay: 1s;
}

body[data-template="moderncv"] .badge-3 {
    top: 50%;
    left: -15%;
    animation-delay: 2s;
}

@keyframes moderncvFloatBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

body[data-template="moderncv"] .scroll-indicator {
    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"] .scroll-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"] .scroll-wheel {
    width: 4px;
    height: 10px;
    background: var(--primary);
    border-radius: 2px;
    animation: moderncvScrollWheel 2s infinite;
}

@keyframes moderncvScrollWheel {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(20px); opacity: 0; }
}

/* Sections */
body[data-template="moderncv"] .section {
    padding: 4rem 0;
    position: relative;
    scroll-margin-top: 80px;
}

body[data-template="moderncv"] .section-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

body[data-template="moderncv"] .section-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 4rem;
}

body[data-template="moderncv"] .section-number {
    font-family: var(--font-code);
    font-size: 1.5rem;
    color: var(--primary);
    font-weight: 700;
}

body[data-template="moderncv"] .section-title {
    font-family: var(--font-code);
    font-size: 2.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body[data-template="moderncv"] .title-bracket {
    color: var(--purple);
}

body[data-template="moderncv"] .title-text {
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body[data-template="moderncv"] .section-line {
    flex: 1;
    height: 2px;
    background: var(--gradient-1);
    margin-inline-start: 2rem;
}

/* About Section */
body[data-template="moderncv"] .about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

body[data-template="moderncv"] .about-text {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 3rem;
}

body[data-template="moderncv"] .about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

body[data-template="moderncv"] .stat-item {
    text-align: center;
    padding: 2rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all var(--transition-fast);
}

body[data-template="moderncv"] .stat-item:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

body[data-template="moderncv"] .stat-number {
    font-family: var(--font-code);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

body[data-template="moderncv"] .stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

body[data-template="moderncv"] .about-image-container {
    position: relative;
}

body[data-template="moderncv"] .code-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 3rem;
    font-family: var(--font-code);
    font-size: 0.9rem;
    line-height: 1.8;
}

body[data-template="moderncv"] .code-line.indent {
    padding-inline-start: 2rem;
}

body[data-template="moderncv"] .code-keyword { color: var(--purple); }
body[data-template="moderncv"] .code-variable { color: var(--cyan); }
body[data-template="moderncv"] .code-operator { color: var(--primary); }
body[data-template="moderncv"] .code-brace,
body[data-template="moderncv"] .code-bracket { color: var(--accent); }
body[data-template="moderncv"] .code-property { color: var(--cyan); }
body[data-template="moderncv"] .code-string { color: var(--accent); }
body[data-template="moderncv"] .code-comma,
body[data-template="moderncv"] .code-semicolon { color: var(--text-muted); }

/* Skills Section */
body[data-template="moderncv"] .skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
}

body[data-template="moderncv"] .skill-category {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 3rem;
}

body[data-template="moderncv"] .category-title {
    font-family: var(--font-code);
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 2rem;
    font-weight: 700;
}

body[data-template="moderncv"] .skill-items {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

body[data-template="moderncv"] .skill-item {
    position: relative;
}

body[data-template="moderncv"] .skill-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

body[data-template="moderncv"] .skill-name {
    font-family: var(--font-code);
    color: var(--cyan);
    font-weight: 600;
}

body[data-template="moderncv"] .skill-percent {
    font-family: var(--font-code);
    color: var(--primary);
    font-weight: 600;
}

body[data-template="moderncv"] .skill-bar {
    height: 12px;
    background: var(--bg-darker);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
    position: relative;
}

body[data-template="moderncv"] .skill-progress {
    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"] .skill-progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: moderncvShimmer 2s infinite;
}

@keyframes moderncvShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Timeline & Experience */
body[data-template="moderncv"] .timeline {
    position: relative;
    padding-inline-start: 2rem;
}

body[data-template="moderncv"] .timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gradient-1);
}

body[data-template="moderncv"] .timeline-item {
    position: relative;
    padding-bottom: 4rem;
    padding-inline-start: 3rem;
}

body[data-template="moderncv"] .timeline-marker {
    position: absolute;
    left: -2.5rem;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid var(--bg-dark);
    box-shadow: 
        0 0 20px var(--primary),
        0 0 40px var(--primary);
    animation: moderncvPulse 2s infinite;
}

body[data-template="moderncv"] .timeline-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 3rem;
    transition: all var(--transition-smooth);
}

body[data-template="moderncv"] .timeline-content:hover {
    border-color: var(--primary);
    transform: translateX(5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

body[data-template="moderncv"] .timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

body[data-template="moderncv"] .timeline-year {
    font-family: var(--font-code);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.9rem;
}

body[data-template="moderncv"] .timeline-badge {
    background: var(--gradient-1);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-code);
}

body[data-template="moderncv"] .timeline-title {
    font-family: var(--font-code);
    font-size: 1.5rem;
    color: var(--cyan);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

body[data-template="moderncv"] .timeline-company {
    color: var(--purple);
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body[data-template="moderncv"] .timeline-company i {
    font-size: 1rem;
}

body[data-template="moderncv"] .timeline-description {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 2rem;
}

body[data-template="moderncv"] .timeline-achievements {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--bg-darker);
    border-radius: 12px;
    border-left: 3px solid var(--primary);
}

body[data-template="moderncv"] .achievement-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

body[data-template="moderncv"] .achievement-item i {
    color: var(--green);
    font-size: 1rem;
    flex-shrink: 0;
}

body[data-template="moderncv"] .timeline-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body[data-template="moderncv"] .tag {
    background: var(--bg-darker);
    color: var(--primary);
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: var(--font-code);
    border: 1px solid var(--border);
}

/* Projects Section */
body[data-template="moderncv"] .projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 3rem;
}

body[data-template="moderncv"] .project-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: all var(--transition-smooth);
    cursor: pointer;
}

body[data-template="moderncv"] .project-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

body[data-template="moderncv"] .project-image {
    position: relative;
    width: 100%;
    height: 250px;
    background: var(--bg-darker);
    overflow: hidden;
}

body[data-template="moderncv"] .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"] .project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition);
}

body[data-template="moderncv"] .project-card:hover .project-overlay {
    opacity: 1;
}

body[data-template="moderncv"] .project-links {
    display: flex;
    gap: 2rem;
}

body[data-template="moderncv"] .project-link {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white !important;
    border-radius: 50%;
    text-decoration: none;
    transition: all var(--transition-fast);
}

body[data-template="moderncv"] .project-link:hover {
    transform: scale(1.08);
    box-shadow: 0 5px 15px rgba(192,132,252,0.3);
}

body[data-template="moderncv"] .project-content {
    padding: 3rem;
}

body[data-template="moderncv"] .project-title {
    font-family: var(--font-code);
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
    font-weight: 700;
}

body[data-template="moderncv"] .project-description {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 2rem;
}

body[data-template="moderncv"] .project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Contact Section */
body[data-template="moderncv"] .contact-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
}

body[data-template="moderncv"] .contact-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

body[data-template="moderncv"] .contact-item {
    display: flex;
    gap: 2rem;
    padding: 3rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all var(--transition-smooth);
    cursor: pointer;
}

body[data-template="moderncv"] .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"] .contact-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"] .contact-details {
    flex: 1;
}

body[data-template="moderncv"] .contact-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
    font-family: var(--font-code);
}

body[data-template="moderncv"] .contact-value {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    font-family: var(--font-code);
    display: block;
}

body[data-template="moderncv"] .contact-value:hover {
    color: var(--cyan);
}

body[data-template="moderncv"] form.contact-form,
body[data-template="moderncv"] .contact-form {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
}

body[data-template="moderncv"] .contact-form .form-group {
    position: relative;
    width: 100%;
}

body[data-template="moderncv"] .contact-form .form-input,
body[data-template="moderncv"] input.form-input,
body[data-template="moderncv"] textarea.form-input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 1rem 1.25rem !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    color: var(--text-primary) !important;
    font-family: var(--font-primary) !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    transition: all var(--transition) !important;
    box-shadow: none !important;
}

body[data-template="moderncv"] .contact-form .form-input::placeholder,
body[data-template="moderncv"] input.form-input::placeholder,
body[data-template="moderncv"] textarea.form-input::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.7 !important;
}

body[data-template="moderncv"] .contact-form .form-input:focus,
body[data-template="moderncv"] input.form-input:focus,
body[data-template="moderncv"] textarea.form-input:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.25) !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

body[data-template="moderncv"] .contact-form input:-webkit-autofill,
body[data-template="moderncv"] .contact-form input:-webkit-autofill:hover, 
body[data-template="moderncv"] .contact-form input:-webkit-autofill:focus, 
body[data-template="moderncv"] .contact-form textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    transition: background-color 5000s ease-in-out 0s;
}

body[data-template="moderncv"] .contact-form .form-textarea,
body[data-template="moderncv"] textarea.form-textarea {
    resize: vertical !important;
    min-height: 150px !important;
}

body[data-template="moderncv"] .btn-submit {
    align-self: flex-start !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

body[data-template="moderncv"] .contact-status {
    padding: 1rem 1.25rem;
    border-radius: 12px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #4ade80;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-primary);
    line-height: 1.5;
}

body[data-template="moderncv"] .contact-status a {
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
}

/* Footer */
body[data-template="moderncv"] .main-footer {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 3rem 0;
    margin-top: 4rem;
}

body[data-template="moderncv"] .footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

body[data-template="moderncv"] .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body[data-template="moderncv"] .footer-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

body[data-template="moderncv"] .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"] .footer-copyright {
    color: var(--text-primary);
    font-weight: 600;
}

body[data-template="moderncv"] .footer-divider {
    color: var(--text-muted);
    margin: 0 0.3rem;
}

body[data-template="moderncv"] .footer-built {
    color: var(--text-secondary);
}

body[data-template="moderncv"] .footer-author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

body[data-template="moderncv"] .footer-by-text {
    color: var(--text-muted);
}

body[data-template="moderncv"] .footer-author-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
    transition: all var(--transition-fast);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}

body[data-template="moderncv"] .footer-author-link:hover {
    color: var(--cyan);
    background: rgba(192,132,252,0.1);
    transform: translateY(-2px);
}

body[data-template="moderncv"] .footer-author-link i {
    font-size: 0.85rem;
}

body[data-template="moderncv"] .footer-social {
    display: flex;
    gap: 2rem;
}

body[data-template="moderncv"] .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 var(--transition-fast);
}

body[data-template="moderncv"] .footer-social-link:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white !important;
    transform: translateY(-2px);
}

body[data-template="moderncv"] .fade-in {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

body[data-template="moderncv"] .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* RTL Specific Rules */
body[data-template="moderncv"][dir="rtl"] .timeline,
body[data-template="moderncv"][data-dir="rtl"] .timeline {
    padding-inline-start: 2rem;
    padding-inline-end: 0;
}

body[data-template="moderncv"][dir="rtl"] .timeline::before,
body[data-template="moderncv"][data-dir="rtl"] .timeline::before {
    left: auto;
    right: 0;
}

body[data-template="moderncv"][dir="rtl"] .timeline-marker,
body[data-template="moderncv"][data-dir="rtl"] .timeline-marker {
    left: auto;
    right: -2.5rem;
}

body[data-template="moderncv"][dir="rtl"] .timeline-content:hover,
body[data-template="moderncv"][data-dir="rtl"] .timeline-content:hover {
    transform: translateX(-10px);
}

body[data-template="moderncv"][dir="rtl"] .contact-item:hover,
body[data-template="moderncv"][data-dir="rtl"] .contact-item:hover {
    transform: translateX(-10px);
}

/* Media Queries */
@media (max-width: 1024px) {
    body[data-template="moderncv"] .hero-name {
        font-size: clamp(1.8rem, 4vw, 2.75rem);
    }
    body[data-template="moderncv"] .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }
    body[data-template="moderncv"] .hero-image-wrapper {
        order: -1;
    }
    body[data-template="moderncv"] .hero-buttons,
    body[data-template="moderncv"] .hero-social {
        justify-content: center;
    }
    body[data-template="moderncv"] .about-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    body[data-template="moderncv"] .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    body[data-template="moderncv"] .skills-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    body[data-template="moderncv"] .nav-container {
        padding: 0.8rem 1rem;
    }
    body[data-template="moderncv"] .nav-brand {
        flex: 1;
    }
    body[data-template="moderncv"] .nav-controls {
        gap: 0.5rem;
    }
    body[data-template="moderncv"] .nav-menu {
        position: fixed;
        top: 60px;
        left: -100%;
        width: 100%;
        background: var(--bg-card);
        flex-direction: column;
        padding: 2rem 1rem;
        border-top: 1px solid var(--border);
        transition: left var(--transition);
        z-index: 999;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }
    body[data-template="moderncv"] .nav-menu.active {
        left: 0;
    }
    body[data-template="moderncv"] .nav-link {
        width: 100%;
        justify-content: flex-start;
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 0.5rem;
    }
    body[data-template="moderncv"] .menu-toggle {
        display: flex;
    }
    body[data-template="moderncv"] .main-content {
        margin-top: 60px;
    }
    body[data-template="moderncv"] .hero-section {
        min-height: auto;
        padding: 2rem 0;
    }
    body[data-template="moderncv"] .hero-container {
        padding: 0 1rem;
        gap: 2rem;
    }
    body[data-template="moderncv"] .hero-name {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    body[data-template="moderncv"] .hero-title {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
    body[data-template="moderncv"] .hero-description {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    body[data-template="moderncv"] .hero-buttons {
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 2rem;
    }
    body[data-template="moderncv"] .btn {
        width: 100%;
        justify-content: center;
        padding: 0.9rem 1.5rem;
    }
    body[data-template="moderncv"] .hero-social {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
    }
    body[data-template="moderncv"] .social-icon {
        width: 45px;
        height: 45px;
    }
    body[data-template="moderncv"] .section {
        padding: 2rem 0;
    }
    body[data-template="moderncv"] .section-container {
        padding: 0 1rem;
    }
    body[data-template="moderncv"] .section-header {
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 2rem;
    }
    body[data-template="moderncv"] .section-number {
        font-size: 1.2rem;
    }
    body[data-template="moderncv"] .section-title {
        font-size: 1.8rem;
        flex-wrap: wrap;
    }
    body[data-template="moderncv"] .section-line {
        width: 100%;
        margin-inline-start: 0;
        margin-top: 0.5rem;
    }
    body[data-template="moderncv"] .about-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    body[data-template="moderncv"] .stat-item {
        padding: 1.5rem;
    }
    body[data-template="moderncv"] .stat-number {
        font-size: 2rem;
    }
    body[data-template="moderncv"] .code-block {
        padding: 1.5rem;
        font-size: 0.8rem;
    }
    body[data-template="moderncv"] .skills-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    body[data-template="moderncv"] .skill-category {
        padding: 2rem;
    }
    body[data-template="moderncv"] .category-title {
        font-size: 1.3rem;
        margin-bottom: 1.5rem;
    }
    body[data-template="moderncv"] .timeline {
        padding-inline-start: 1.5rem;
    }
    body[data-template="moderncv"] .timeline-item {
        padding-inline-start: 2rem;
        padding-bottom: 3rem;
    }
    body[data-template="moderncv"] .timeline-marker {
        left: -1.75rem;
        width: 14px;
        height: 14px;
    }
    body[data-template="moderncv"] .timeline-content {
        padding: 1.5rem;
    }
    body[data-template="moderncv"] .timeline-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    body[data-template="moderncv"] .timeline-title {
        font-size: 1.3rem;
    }
    body[data-template="moderncv"] .timeline-achievements {
        padding: 1rem;
        gap: 0.6rem;
    }
    body[data-template="moderncv"] .achievement-item {
        font-size: 0.9rem;
    }
    body[data-template="moderncv"] .projects-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    body[data-template="moderncv"] .project-content {
        padding: 2rem;
    }
    body[data-template="moderncv"] .project-title {
        font-size: 1.3rem;
    }
    body[data-template="moderncv"] .contact-content {
        gap: 2rem;
    }
    body[data-template="moderncv"] .contact-item {
        padding: 1.5rem;
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    body[data-template="moderncv"] .contact-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
        margin: 0 auto;
    }
    body[data-template="moderncv"] .contact-form {
        gap: 1.5rem;
    }
    body[data-template="moderncv"] .form-input {
        padding: 0.9rem;
        font-size: 0.95rem;
    }
    body[data-template="moderncv"] .footer-container {
        padding: 0 1rem;
    }
    body[data-template="moderncv"] .footer-content {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    body[data-template="moderncv"] .footer-text-wrapper,
    body[data-template="moderncv"] .footer-text,
    body[data-template="moderncv"] .footer-author,
    body[data-template="moderncv"] .footer-social {
        justify-content: center;
        text-align: center;
    }
    body[data-template="moderncv"] .footer-text {
        font-size: 0.85rem;
    }
    body[data-template="moderncv"] .footer-author {
        font-size: 0.85rem;
    }
    body[data-template="moderncv"] .hero-image-container {
        width: 280px;
        height: 280px;
    }
    body[data-template="moderncv"] .floating-badge {
        display: none;
    }
    body[data-template="moderncv"] .scroll-indicator {
        bottom: 1rem;
    }
}

@media (max-width: 480px) {
    body[data-template="moderncv"] {
        font-size: 14px;
    }
    body[data-template="moderncv"] .nav-container {
        padding: 0.7rem 0.8rem;
    }
    body[data-template="moderncv"] .brand-logo {
        font-size: 1.2rem;
    }
    body[data-template="moderncv"] .lang-toggle,
    body[data-template="moderncv"] .theme-toggle {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }
    body[data-template="moderncv"] .hero-container {
        padding: 0 0.8rem;
    }
    body[data-template="moderncv"] .hero-name {
        font-size: 1.8rem;
        line-height: 1.2;
    }
    body[data-template="moderncv"] .name-value {
        white-space: normal;
        word-break: break-word;
    }
    body[data-template="moderncv"] .hero-title {
        font-size: 1rem;
    }
    body[data-template="moderncv"] .hero-description {
        font-size: 0.95rem;
    }
    body[data-template="moderncv"] .section-container {
        padding: 0 0.8rem;
    }
    body[data-template="moderncv"] .section-title {
        font-size: 1.5rem;
    }
    body[data-template="moderncv"] .section-number {
        font-size: 1rem;
    }
    body[data-template="moderncv"] .hero-image-container {
        width: 220px;
        height: 220px;
    }
    body[data-template="moderncv"] .stat-item {
        padding: 1.2rem;
    }
    body[data-template="moderncv"] .stat-number {
        font-size: 1.8rem;
    }
    body[data-template="moderncv"] .code-block {
        padding: 1rem;
        font-size: 0.75rem;
    }
    body[data-template="moderncv"] .skill-category {
        padding: 1.5rem;
    }
    body[data-template="moderncv"] .category-title {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
    body[data-template="moderncv"] .skill-items {
        gap: 1.5rem;
    }
    body[data-template="moderncv"] .timeline {
        padding-inline-start: 1rem;
    }
    body[data-template="moderncv"] .timeline-item {
        padding-inline-start: 1.5rem;
        padding-bottom: 2.5rem;
    }
    body[data-template="moderncv"] .timeline-marker {
        left: -1.25rem;
        width: 12px;
        height: 12px;
    }
    body[data-template="moderncv"] .timeline-content {
        padding: 1.2rem;
    }
    body[data-template="moderncv"] .timeline-title {
        font-size: 1.2rem;
    }
    body[data-template="moderncv"] .tag {
        font-size: 0.75rem;
        padding: 0.25rem 0.6rem;
    }
    body[data-template="moderncv"] .project-content {
        padding: 1.5rem;
    }
    body[data-template="moderncv"] .project-title {
        font-size: 1.2rem;
    }
    body[data-template="moderncv"] .contact-item {
        padding: 1.2rem;
    }
    body[data-template="moderncv"] .contact-icon {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
    body[data-template="moderncv"] .form-input {
        padding: 0.8rem;
        font-size: 0.9rem;
    }
    body[data-template="moderncv"] .btn {
        padding: 0.8rem 1.2rem;
        font-size: 0.9rem;
    }
    body[data-template="moderncv"] .footer-text,
    body[data-template="moderncv"] .footer-author {
        font-size: 0.8rem;
        flex-direction: column;
        gap: 0.3rem;
    }
    body[data-template="moderncv"] .footer-divider {
        display: none;
    }
    body[data-template="moderncv"] .footer-social-link {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
}

@media (max-width: 360px) {
    body[data-template="moderncv"] {
        font-size: 13px;
    }
    body[data-template="moderncv"] .hero-name {
        font-size: 1.5rem;
    }
    body[data-template="moderncv"] .section-title {
        font-size: 1.3rem;
    }
    body[data-template="moderncv"] .hero-image-container {
        width: 180px;
        height: 180px;
    }
}

/* ========================================================
   THEME: ULTRA CODE (ultracode)
   ======================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Turret+Road:wght@300;400;500;700;800&display=swap');

body[data-template="ultracode"] {
    --hue-color: 242;
    --skin-color: hsl(342, 92%, 46%);
    --mirage-color: hsl(210, 10%, 23%);
    --title-color: hsl(var(--hue-color), 8%, 95%);
    --text-color: hsl(var(--hue-color), 8%, 85%);
    --body-color: hsl(var(--hue-color), 19%, 5%);
    --box-color: hsl(var(--hue-color), 14%, 10%);
    --scroll-box-color: hsl(var(--hue-color), 12%, 38%);
    --scroll-thumb-color: hsl(var(--hue-color), 12%, 26%);

    --body-font: 'Poppins', sans-serif;
    --signature-font: 'Turret Road', sans-serif;

    --biggest-font-size: 3rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;

    --font-medium: 500;
    --font-bold: 600;

    --mb025: .25rem;
    --mb05: .5rem;
    --mb075: .75rem;
    --mb1: 1rem;
    --mb15: 1.5rem;
    --mb2: 2rem;
    --mb25: 2.5rem;
    --mb3: 3rem;

    --z-fixed: 10;
    --z-modal: 100;

    background-color: var(--body-color) !important;
    color: var(--text-color) !important;
    font-family: var(--body-font) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.6;
}

@media screen and (max-width: 1024px) {
    body[data-template="ultracode"] {
        --biggest-font-size: 2rem;
        --h1-font-size: 1.5rem;
        --h2-font-size: 1.25rem;
        --h3-font-size: 1.125rem;
        --normal-font-size: .938rem;
        --small-font-size: .813rem;
        --smaller-font-size: .75rem;
    }
}

body[data-template="ultracode"] * {
    box-sizing: border-box;
}

body[data-template="ultracode"] h1, 
body[data-template="ultracode"] h2, 
body[data-template="ultracode"] h3 {
    color: var(--title-color);
    font-weight: var(--font-bold);
    font-family: var(--body-font);
}

body[data-template="ultracode"] ul { list-style: none; margin: 0; padding: 0; }
body[data-template="ultracode"] a { text-decoration: none; }
body[data-template="ultracode"] img { max-width: 100%; height: auto; }
body[data-template="ultracode"] button { cursor: pointer; border: none; outline: none; }
body[data-template="ultracode"] input, 
body[data-template="ultracode"] textarea { border: none; outline: none; }

body[data-template="ultracode"] .container {
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

body[data-template="ultracode"] .grid {
    display: grid;
}

body[data-template="ultracode"] .button { 
    display: inline-flex; 
    align-items: center; 
    column-gap: .5rem; 
    background-color: var(--skin-color); 
    color: var(--title-color); 
    padding: 0.75rem 1.4rem; 
    border-radius: .25rem; 
    font-weight: var(--font-medium);
    position: relative;
    z-index: 1;
    transition: .4s;
    font-size: var(--normal-font-size);
}

body[data-template="ultracode"] .button::after { 
    position: absolute; 
    content: ''; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: var(--mirage-color); 
    z-index: -1;
    transform-origin: center; 
    transform: scale(0); 
    border-radius: .25rem;
    transition: .3s; 
}
body[data-template="ultracode"] .button:hover::after { transform: scale(1); }

body[data-template="ultracode"] .section { padding: 6.5rem 0 2rem; }
body[data-template="ultracode"] .section-title { text-align: center; font-size: var(--h1-font-size); margin-bottom: var(--mb3); }
body[data-template="ultracode"] .section-title::before { content: attr(data-heading); display: block; font-size: var(--normal-font-size); font-weight: var(--font-medium); color: var(--skin-color); }

/* Sidebar */
body[data-template="ultracode"] .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    height: 100vh;
    background-color: var(--body-color);
    border-right: 1px solid var(--box-color);
    z-index: var(--z-fixed);
    transition: transform 0.4s;
}
body[data-template="ultracode"] .nav { height: 100%; position: relative; }
body[data-template="ultracode"] .nav-logo { position: absolute; left: 0; right: 0; top: 1.8rem; width: 40px; height: 40px; border-radius: 50%; background-color: var(--skin-color); text-align: center; margin: auto; }
body[data-template="ultracode"] .nav-logo-text { font-size: 1.125rem; color: var(--title-color); font-weight: var(--font-bold); line-height: 40px; }
body[data-template="ultracode"] .nav-menu { position: fixed; transform: rotate(-90deg) translateX(-100%); transform-origin: left top; width: 100vh; }
body[data-template="ultracode"] .menu { display: flex; }
body[data-template="ultracode"] .nav-list { 
    display: flex; 
    flex-direction: row-reverse; 
    margin: -2px auto 0 auto; 
    padding: 0 5.5rem;
    justify-content: center;
}
body[data-template="ultracode"] .nav-link { 
    float: right; 
    height: 100%; 
    line-height: 100px; 
    padding: 0 0.75rem; 
    color: var(--title-color); 
    font-weight: var(--font-medium); 
    position: relative; 
    transition: .4s; 
    white-space: nowrap;
}
body[data-template="ultracode"] .nav-toggle {
    height: 36px;
    width: 40px;
    cursor: pointer;
    position: fixed;
    right: 1.5rem;
    top: 2rem;
    font-size: 1.3rem;
    border-radius: .25rem;
    background-color: var(--skin-color);
    color: var(--title-color);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}
body[data-template="ultracode"] .nav-close { font-size: 1.5rem; position: absolute; top: 1rem; right: 1.25rem; cursor: pointer; display: none; color: var(--title-color); }
body[data-template="ultracode"] .nav-link.active-link, 
body[data-template="ultracode"] .nav-link:hover { color: var(--skin-color); }
body[data-template="ultracode"] .nav-link.active-link::after, 
body[data-template="ultracode"] .nav-link:hover::after {
    position: absolute;
    content: '';
    width: 6px;
    height: 6px;
    background-color: var(--skin-color);
    border-radius: 50%;
    bottom: 1.8rem;
    left: 0;
    right: 0;
    margin: auto;
}
body[data-template="ultracode"] .btn-share { position: absolute; bottom: 1.8rem; left: 0; right: 0; text-align: center; cursor: pointer; }
body[data-template="ultracode"] .social-share { font-size: 1.5rem; color: var(--title-color); }

/* Main - Home */
body[data-template="ultracode"] .main { margin-left: 100px; transition: margin 0.4s; }
body[data-template="ultracode"] .home { 
    background: radial-gradient(circle at 80% 20%, rgba(222, 10, 77, 0.15) 0%, transparent 50%), var(--body-color);
    background-size: cover; 
    background-position: center center; 
    min-height: 100vh;
}
body[data-template="ultracode"] .home-container { position: relative; min-height: 100vh; align-items: center; padding: 2rem 0; }
body[data-template="ultracode"] .home-social { position: absolute; top: 1.8rem; left: 0; display: flex; align-items: center; column-gap: 3.5rem; }
body[data-template="ultracode"] .home-social-follow { font-weight: var(--font-medium); position: relative; }
body[data-template="ultracode"] .home-social-follow::after { content: ''; position: absolute; width: 1rem; height: 2px; background-color: var(--text-color); right: -45%; top: 50%; }
body[data-template="ultracode"] .home-social-links { display: inline-flex; column-gap: 1rem; }
body[data-template="ultracode"] .home-social-link { font-size: 1.2rem; color: var(--text-color); transition: .4s; }
body[data-template="ultracode"] .home-social-link:hover { transform: translateY(.25rem); color: var(--skin-color); }
body[data-template="ultracode"] .home-img { display: none; }
body[data-template="ultracode"] .home-title { font-size: var(--biggest-font-size); line-height: 1.2; }
body[data-template="ultracode"] .home-subtitle { font-size: var(--h3-font-size); font-weight: var(--font-medium); margin-bottom: var(--mb075); color: var(--skin-color); }
body[data-template="ultracode"] .home-description { max-width: 480px; margin-bottom: var(--mb2); color: var(--text-color); font-size: var(--normal-font-size); }
body[data-template="ultracode"] .my-info { display: flex; column-gap: 1.8rem; position: absolute; left: 0; bottom: 1.8rem; }
body[data-template="ultracode"] .info-item { display: flex; align-items: center; }
body[data-template="ultracode"] .info-title, 
body[data-template="ultracode"] .info-subtitle { font-size: var(--small-font-size); }
body[data-template="ultracode"] .info-title { font-weight: var(--font-medium); color: var(--title-color); }
body[data-template="ultracode"] .info-subtitle { color: var(--text-color); }
body[data-template="ultracode"] .info-icon { font-size: 1.8rem; color: var(--skin-color); margin-right: var(--mb075); }

/* Main - About */
body[data-template="ultracode"] .about-container { grid-template-columns: repeat(2, 1fr); column-gap: 4rem; align-items: center; }
body[data-template="ultracode"] .about-img { width: 440px; max-height: 480px; object-fit: cover; border-radius: .75rem; justify-self: center; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
body[data-template="ultracode"] .about-heading { font-size: var(--h3-font-size); margin-bottom: var(--mb075); line-height: 1.4; }
body[data-template="ultracode"] .about-description { text-align: justify; padding-right: 4rem; margin-bottom: var(--mb2); color: var(--text-color); line-height: 1.8; }
body[data-template="ultracode"] .about-info { display: grid; grid-template-columns: repeat(3, 140px); column-gap: .75rem; margin-bottom: var(--mb3); }
body[data-template="ultracode"] .about-box { text-align: center; border-radius: .5rem; padding: 1.25rem 1rem; background-color: var(--box-color); border: 1px solid rgba(255,255,255,0.05); }
body[data-template="ultracode"] .about-icon { font-size: 1.6rem; color: var(--skin-color); margin-bottom: var(--mb075); }
body[data-template="ultracode"] .about-title { font-size: var(--small-font-size); margin-bottom: 0.2rem; }
body[data-template="ultracode"] .about-subtitle { font-size: var(--smaller-font-size); color: var(--text-color); }

/* Main - Qualification */
body[data-template="ultracode"] .qualification-container { grid-template-columns: repeat(2 ,380px); column-gap: 3rem; justify-content: center; }
body[data-template="ultracode"] .qualification-title { font-size: var(--h3-font-size); font-weight: var(--font-medium); margin-bottom: var(--mb2); display: flex; align-items: center; gap: 0.6rem; color: var(--title-color); }
body[data-template="ultracode"] .qualification-title i { color: var(--skin-color); font-size: 1.4rem; }
body[data-template="ultracode"] .timeline-item { position: relative; margin-bottom: var(--mb25); padding-left: 3rem; }
body[data-template="ultracode"] .timeline-item:last-child { margin-bottom: 0; }
body[data-template="ultracode"] .timeline-item::before { content: ''; width: 2px; position: absolute; left: 0.45rem; top: 0; height: 100%; background-color: var(--skin-color); }
body[data-template="ultracode"] .circle-dot { position: absolute; left: 0; top: 0; height: 1rem; width: 1rem; border: 2px solid var(--skin-color); border-radius: 50%; background-color: var(--skin-color); transition: .4s; }
body[data-template="ultracode"] .timeline-item:hover .circle-dot { background-color: var(--body-color); }
body[data-template="ultracode"] .timeline-title { font-size: var(--normal-font-size); font-weight: var(--font-medium); margin-bottom: var(--mb025); color: var(--title-color); }
body[data-template="ultracode"] .timeline-text { font-size: var(--smaller-font-size); margin-bottom: var(--mb05); color: var(--text-color); }
body[data-template="ultracode"] .timeline-date { display: flex; align-items: center; column-gap: .4rem; font-size: var(--smaller-font-size); color: var(--skin-color); }

/* Main - Skills */
body[data-template="ultracode"] .skills-container { grid-template-columns: 360px 360px; column-gap: 3.5rem; justify-content: center; }
body[data-template="ultracode"] .skills-header { display: flex; align-items: center; cursor: pointer; padding: 0.75rem 1rem; border-radius: 0.5rem; transition: background 0.3s; }
body[data-template="ultracode"] .skills-header:not(:last-child) { margin-bottom: var(--mb2); }
body[data-template="ultracode"] .skills-header:hover { background: rgba(255,255,255,0.03); }
body[data-template="ultracode"] .skills-icon, 
body[data-template="ultracode"] .skills-arrow { font-size: 2rem; color: var(--skin-color); }
body[data-template="ultracode"] .skills-icon { margin-right: var(--mb1); }
body[data-template="ultracode"] .skills-arrow { margin-left: auto; transition: transform 0.4s; }
body[data-template="ultracode"] .skills-active .skills-arrow { transform: rotate(-90deg); }
body[data-template="ultracode"] .skills-title { font-size: var(--h3-font-size); font-weight: var(--font-medium); }
body[data-template="ultracode"] .skills-subtitle { font-size: var(--small-font-size); color: var(--text-color); }
body[data-template="ultracode"] .skills-list { row-gap: 1.8rem; }
body[data-template="ultracode"] .skills-titles { display: flex; justify-content: space-between; margin-bottom: var(--mb05); }
body[data-template="ultracode"] .skills-name { font-size: var(--normal-font-size); font-weight: var(--font-medium); color: var(--title-color); }
body[data-template="ultracode"] .skills-number { color: var(--skin-color); font-weight: var(--font-bold); font-size: var(--small-font-size); }
body[data-template="ultracode"] .skills-bar, 
body[data-template="ultracode"] .skills-percentage { height: 6px; border-radius: .25rem; }
body[data-template="ultracode"] .skills-bar { background-color: var(--box-color); width: 100%; border: 1px solid rgba(255,255,255,0.05); }
body[data-template="ultracode"] .skills-percentage { display: block; background-color: var(--skin-color); box-shadow: 0 0 10px rgba(222, 10, 77, 0.4); }
body[data-template="ultracode"] .skills [data-content] { display: none; }
body[data-template="ultracode"] .skills-active[data-content] { display: block; }

/* Main - Work */
body[data-template="ultracode"] .work-container { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; justify-content: center; padding-top: 1rem; }
body[data-template="ultracode"] .work-filters { display: flex; justify-content: center; align-items: center; column-gap: .75rem; margin-bottom: 2rem; flex-wrap: wrap; }
body[data-template="ultracode"] .work-item { cursor: pointer; color: var(--title-color); padding: 0.35rem 1rem; font-weight: var(--font-medium); border-radius: .5rem; transition: background 0.3s; }
body[data-template="ultracode"] .work-card { background-color: var(--box-color); padding: 1.25rem; border-radius: .5rem; border: 1px solid rgba(255,255,255,0.05); transition: transform 0.3s; }
body[data-template="ultracode"] .work-card:hover { transform: translateY(-4px); }
body[data-template="ultracode"] .portfolio-item-details { display: none; }
body[data-template="ultracode"] .work-img { width: 100%; height: 210px; object-fit: cover; border-radius: .5rem; margin-bottom: var(--mb1); background: var(--mirage-color); }
body[data-template="ultracode"] .work-title { font-size: var(--normal-font-size); font-weight: var(--font-medium); margin-bottom: var(--mb05); }
body[data-template="ultracode"] .work-button { color: var(--skin-color); font-size: var(--small-font-size); display: inline-flex; align-items: center; column-gap: .25rem; cursor: pointer; font-weight: 600; }
body[data-template="ultracode"] .work-button-icon { font-size: 1rem; transition: .4s; }
body[data-template="ultracode"] .work-button:hover .work-button-icon { transform: translateX(.25rem); }
body[data-template="ultracode"] .active-work { background-color: var(--skin-color); color: var(--title-color); }

/* Portfolio Popup */
body[data-template="ultracode"] .portfolio-popup { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: rgba(0, 0, 0, .75); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 0 1rem;
    opacity: 0;
    visibility: hidden; 
    z-index: var(--z-modal); 
    transition: .4s; 
    backdrop-filter: blur(5px);
}
body[data-template="ultracode"] .portfolio-popup.open { opacity: 1; visibility: visible; }
body[data-template="ultracode"] .portfolio-popup-inner { background-color: var(--box-color); width: 900px; max-width: 95vw; max-height: 90vh; overflow-y: auto; border-radius: .5rem; padding: 2.5rem; position: relative; border: 1px solid rgba(255,255,255,0.1); }
body[data-template="ultracode"] .portfolio-popup-content { grid-template-columns: repeat(2, 1fr); align-items: center; column-gap: 3rem; }
body[data-template="ultracode"] .portfolio-popup-close { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 1.5rem; color: var(--skin-color); cursor: pointer; }
body[data-template="ultracode"] .portfolio-popup-img { border-radius: .5rem; width: 100%; max-height: 350px; object-fit: cover; }
body[data-template="ultracode"] .portfolio-popup-subtitle { font-size: var(--smaller-font-size); margin-bottom: var(--mb025); color: var(--text-color); }
body[data-template="ultracode"] .details-title { font-size: var(--h3-font-size); font-weight: var(--font-medium); margin-bottom: var(--mb1); color: var(--title-color); }
body[data-template="ultracode"] .details-description { font-size: var(--small-font-size); margin-bottom: var(--mb2); color: var(--text-color); line-height: 1.6; }
body[data-template="ultracode"] .details-info li { margin-bottom: var(--mb075); font-size: var(--small-font-size); color: var(--text-color); }
body[data-template="ultracode"] .details-info li:last-child { margin-bottom: 0; }
body[data-template="ultracode"] .details-info li span { font-weight: 600; color: var(--title-color); }
body[data-template="ultracode"] .details-info li a { color: var(--skin-color); text-decoration: underline; }

/* Main - Services */
body[data-template="ultracode"] .services-container { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); justify-content: center; gap: 2rem; }
body[data-template="ultracode"] .services-content { position: relative; background-color: var(--box-color); padding: 5rem 1.5rem 2.5rem 2rem; border-radius: .5rem; border: 1px solid rgba(255,255,255,0.05); }
body[data-template="ultracode"] .services-icon { display: block; font-size: 2.2rem; color: var(--skin-color); margin-bottom: var(--mb15); }
body[data-template="ultracode"] .services-title { font-size: var(--h3-font-size); margin-bottom: var(--mb1); font-weight: var(--font-medium); line-height: 1.3; }
body[data-template="ultracode"] .services-button { color: var(--skin-color); font-size: var(--small-font-size); display: inline-flex; align-items: center; column-gap: .25rem; cursor: pointer; font-weight: 600; }
body[data-template="ultracode"] .services-button-icon { font-size: 1rem; transition: .4s; }
body[data-template="ultracode"] .services-button:hover .services-button-icon { transform: translateX(.25rem); }
body[data-template="ultracode"] .services-modal {
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: rgba(0, 0, 0, .75); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 0 1rem;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden; 
    transition: .4s;
    backdrop-filter: blur(5px);
}
body[data-template="ultracode"] .active-modal { opacity: 1; visibility: visible; }
body[data-template="ultracode"] .services-modal-content { width: 520px; max-width: 95vw; position: relative; background-color: var(--box-color); padding: 4rem 2.5rem 2.5rem; border-radius: .5rem; border: 1px solid rgba(255,255,255,0.1); }
body[data-template="ultracode"] .services-modal-close { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 1.5rem; color: var(--skin-color); cursor: pointer; }
body[data-template="ultracode"] .services-modal-title, 
body[data-template="ultracode"] .services-modal-description { text-align: center; }
body[data-template="ultracode"] .services-modal-title { font-size: var(--h3-font-size); font-weight: var(--font-medium); margin-bottom: var(--mb1); }
body[data-template="ultracode"] .services-modal-description { font-size: var(--small-font-size); padding: 0 2rem; margin-bottom: var(--mb2); color: var(--text-color); }
body[data-template="ultracode"] .services-modal-services { row-gap: var(--mb075); display: flex; flex-direction: column; gap: 0.8rem; }
body[data-template="ultracode"] .services-modal-service { display: flex; align-items: center; column-gap: .8rem; }
body[data-template="ultracode"] .services-modal-icon { color: var(--skin-color); font-size: 1.2rem; }
body[data-template="ultracode"] .services-modal-info { font-size: var(--small-font-size); color: var(--text-color); }

/* Main - Contact */
body[data-template="ultracode"] .contact-container { grid-template-columns: 320px 420px; column-gap: 4rem; justify-content: center; align-items: flex-start; }
body[data-template="ultracode"] .contact-info { display: grid; row-gap: 1.5rem; }
body[data-template="ultracode"] .contact-card { background-color: var(--box-color); padding: 1.5rem; border-radius: .5rem; text-align: center; border: 1px solid rgba(255,255,255,0.05); }
body[data-template="ultracode"] .contact-card-icon { font-size: 2rem; color: var(--skin-color); margin-bottom: var(--mb05); display: inline-block; }
body[data-template="ultracode"] .contact-card-title, 
body[data-template="ultracode"] .contact-card-data { font-size: var(--small-font-size); }
body[data-template="ultracode"] .contact-card-title { font-weight: var(--font-medium); color: var(--title-color); }
body[data-template="ultracode"] .contact-card-data { display: block; margin-bottom: var(--mb075); color: var(--text-color); word-break: break-all; }
body[data-template="ultracode"] .contact-button { color: var(--skin-color); font-size: var(--small-font-size); display: inline-flex; align-items: center; justify-content: center; column-gap: .25rem; cursor: pointer; font-weight: 600; }
body[data-template="ultracode"] .contact-button-icon { font-size: 1rem; transition: .4s; }
body[data-template="ultracode"] .contact-button:hover .contact-button-icon { transform: translateX(.25rem); }

body[data-template="ultracode"] .contact-form {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}
body[data-template="ultracode"] .input-container { position: relative; margin-top: 1rem; margin-bottom: 1.8rem; width: 100%; }
body[data-template="ultracode"] .input { 
    width: 100%; 
    border: 2px solid var(--text-color); 
    background-color: transparent !important; 
    padding: 0.75rem 1.2rem; 
    color: var(--title-color) !important; 
    font-weight: var(--font-medium); 
    font-size: var(--normal-font-size); 
    letter-spacing: .5px; 
    border-radius: .5rem;
    outline: none; 
    transition: .4s; 
    box-sizing: border-box;
}
body[data-template="ultracode"] textarea.input { padding: 0.8rem 1.2rem; min-height: 140px; border-radius: .5rem; resize: vertical; font-family: var(--body-font); }
body[data-template="ultracode"] .input-container label {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    padding: 0 .4rem;
    color: var(--text-color);
    font-size: 0.95rem;
    font-weight: var(--font-medium);
    pointer-events: none;
    z-index: 15;
    transition: .4s;
    background: transparent;
}
body[data-template="ultracode"] .input-container.textarea label { top: 1.2rem; transform: translateY(0); }
body[data-template="ultracode"] .input-container span { 
    position: absolute; 
    top: 0; 
    left: 25px; 
    transform: translateY(-50%); 
    font-size: var(--smaller-font-size); 
    padding: 0 .4rem; 
    pointer-events: none; 
    z-index: var(--z-fixed); 
    color: transparent; 
}
body[data-template="ultracode"] .input-container span::before, 
body[data-template="ultracode"] .input-container span::after { 
    content: '';
    position: absolute;
    width: 10%;
    opacity: 0;
    height: 5px;
    background-color: var(--body-color);
    top: 50%;
    transform: translateY(-50%);
    transition: .4s;
}
body[data-template="ultracode"] .input-container span::before { left: 50%; }
body[data-template="ultracode"] .input-container span::after { right: 50%; }
body[data-template="ultracode"] .input-container.focus label,
body[data-template="ultracode"] .input-container.not-empty label { 
    top: 0; 
    transform: translateY(-50%); 
    left: 25px; 
    font-size: var(--smaller-font-size); 
    color: var(--skin-color); 
    background-color: var(--body-color);
}
body[data-template="ultracode"] .input-container.focus .input {
    border-color: var(--skin-color);
}
body[data-template="ultracode"] .input-container.focus span::before, 
body[data-template="ultracode"] .input-container.focus span::after  { width: 50%; opacity: 1; }

/* Footer */
body[data-template="ultracode"] .footer { padding-top: 2rem; }
body[data-template="ultracode"] .footer-container { grid-template-columns: repeat(3, 1fr); column-gap: 1.6rem; align-items: center; }
body[data-template="ultracode"] .footer-bg { background-color: var(--box-color); padding: 3rem 0 3.5rem; }
body[data-template="ultracode"] .footer-title { font-size: var(--h1-font-size); margin-bottom: var(--mb025); }    
body[data-template="ultracode"] .footer-subtitle { font-size: var(--small-font-size); color: var(--text-color); }
body[data-template="ultracode"] .footer-links { display: flex; justify-self: center; column-gap: 2rem; }
body[data-template="ultracode"] .footer-links a { color: var(--title-color); transition: color 0.3s; }
body[data-template="ultracode"] .footer-links a:hover { color: var(--skin-color); }
body[data-template="ultracode"] .footer-socials { justify-self: flex-end; display: flex; gap: 1rem; }
body[data-template="ultracode"] .footer-social { font-size: 1.25rem; color: var(--title-color); transition: color 0.3s; }
body[data-template="ultracode"] .footer-social:hover { color: var(--skin-color); }
body[data-template="ultracode"] .footer-copy { font-size: var(--smaller-font-size); text-align: center; margin-top: 3.5rem; color: var(--text-color); }
body[data-template="ultracode"] .footer-copy a { font-family: var(--signature-font); color: var(--skin-color); font-weight: 700; } 

/* Responsive Media Queries */
@media screen and (max-width: 1216px) {
    body[data-template="ultracode"] .about-container { column-gap: 2.5rem; }
    body[data-template="ultracode"] .about-description { padding-right: 0; }
    body[data-template="ultracode"] .qualification-container { grid-template-columns: repeat(2, 340px); column-gap: 2rem; }
}

@media screen and (max-width: 1024px) {
    body[data-template="ultracode"] .sidebar { width: 100%; height: 100%; z-index: 999; transform: translateX(-100%); }
    body[data-template="ultracode"] .sidebar.show-sidebar { transform: translateX(0); }
    body[data-template="ultracode"] .nav-logo, 
    body[data-template="ultracode"] .btn-share { display: none; }
    body[data-template="ultracode"] .nav-menu { height: 100%; width: 100%; transform: rotate(0deg) translateX(0); display: flex; justify-content: center; position: static; }
    body[data-template="ultracode"] .nav-list { flex-direction: column; height: 100%; justify-content: center; align-items: center; margin: 0; }
    body[data-template="ultracode"] .nav-link { padding: 1.25rem 0; line-height: 1.5; float: none; font-size: 1.2rem; }
    body[data-template="ultracode"] .nav-link.active-link::after, 
    body[data-template="ultracode"] .nav-link:hover::after { bottom: 0.5rem; }
    body[data-template="ultracode"] .nav-close { display: block; }
    body[data-template="ultracode"] .nav-toggle { display: flex; }

    body[data-template="ultracode"] .main { margin-left: 0 !important; }

    body[data-template="ultracode"] .about-container { grid-template-columns: 1fr; row-gap: 2.5rem; }
    body[data-template="ultracode"] .about-img { width: 350px; }
    body[data-template="ultracode"] .about-data { text-align: center; }
    body[data-template="ultracode"] .about-info { justify-content: center; }
    body[data-template="ultracode"] .about-box { padding: 0.75rem .5rem; }
    body[data-template="ultracode"] .about-description { padding: 0 2rem; text-align: center; }

    body[data-template="ultracode"] .qualification-container { grid-template-columns: repeat(2, 300px); }
    body[data-template="ultracode"] .skills-container { grid-template-columns: 320px 300px; }
}

@media screen and (max-width: 768px) {
    body[data-template="ultracode"] .about-img { width: 280px; }
    body[data-template="ultracode"] .qualification-container { grid-template-columns: 320px; row-gap: 3rem; }
    body[data-template="ultracode"] .skills-container { grid-template-columns: 320px; row-gap: 3rem; }

    body[data-template="ultracode"] .contact-container { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; row-gap: 3rem; }
    body[data-template="ultracode"] .footer-container { grid-template-columns: 1fr; row-gap: 2rem; text-align: center; }
    body[data-template="ultracode"] .footer-socials { justify-self: center; }
    body[data-template="ultracode"] .footer-links { flex-direction: column; row-gap: 1rem; }

    body[data-template="ultracode"] .portfolio-popup-inner { width: 95vw; padding: 2.5rem 1.5rem; }
    body[data-template="ultracode"] .portfolio-popup-content { grid-template-columns: 1fr; row-gap: 1.5rem; }
}

@media screen and (max-width: 576px) {
    body[data-template="ultracode"] .nav-toggle { right: initial; left: 1.5rem; }
    body[data-template="ultracode"] .home { min-height: initial; padding: 7rem 0 3rem; }
    body[data-template="ultracode"] .home-img { display: block; width: 220px; height: 220px; border-radius: 50%; object-fit: cover; justify-self: center; margin: 0 auto 1.5rem; border: 3px solid var(--skin-color); }
    body[data-template="ultracode"] .my-info { position: static; margin-top: 2rem; flex-wrap: wrap; gap: 1rem; }
    body[data-template="ultracode"] .home-social { position: static; margin-bottom: 2rem; }

    body[data-template="ultracode"] .about-info { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
}

/* ========================================================
   THEME: DEV BLUE / MARLON (devblue / marlon)
   ======================================================== */
body[data-template="devblue"],
body[data-template="marlon"] {
    --header-height: 3rem;
    --font-semi: 600;

    --first-color: #4070F4;
    --second-color: #0E2431;

    --body-font: 'Poppins', sans-serif;
    --big-font-size: 2rem;
    --h2-font-size: 1.25rem;
    --normal-font-size: .938rem;

    --mb1: .5rem;
    --mb2: 1rem;
    --mb3: 1.5rem;
    --mb4: 2rem;
    --mb5: 2.5rem;
    --mb6: 3rem;

    --z-back: 1;
    --z-normal: 2;
    --z-tooltip: 10;
    --z-fixed: 100;

    background-color: #ffffff !important;
    color: var(--second-color) !important;
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size) !important;
    margin: var(--header-height) 0 0 0 !important;
    padding: 0 !important;
    line-height: 1.6;
}

@media screen and (min-width: 768px) {
    body[data-template="devblue"],
    body[data-template="marlon"] {
        --big-font-size: 3.5rem;
        --h2-font-size: 2rem;
        --normal-font-size: 1rem;
        margin: 0 !important;
    }
}

body[data-template="devblue"] *,
body[data-template="marlon"] * {
    box-sizing: border-box;
}

body[data-template="devblue"] h1,
body[data-template="devblue"] h2,
body[data-template="devblue"] p,
body[data-template="marlon"] h1,
body[data-template="marlon"] h2,
body[data-template="marlon"] p {
    margin: 0;
}

body[data-template="devblue"] ul,
body[data-template="marlon"] ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body[data-template="devblue"] a,
body[data-template="marlon"] a {
    text-decoration: none;
}

body[data-template="devblue"] img,
body[data-template="marlon"] img {
    max-width: 100%;
    height: auto;
    display: block;
}

body[data-template="devblue"] .section-title,
body[data-template="marlon"] .section-title {
    position: relative;
    font-size: var(--h2-font-size);
    color: var(--first-color);
    margin-top: var(--mb2);
    margin-bottom: var(--mb4);
    text-align: center;
    font-weight: var(--font-semi);
}

body[data-template="devblue"] .section-title::after,
body[data-template="marlon"] .section-title::after {
    position: absolute;
    content: '';
    width: 64px;
    height: 0.18rem;
    left: 0;
    right: 0;
    margin: auto;
    top: 2rem;
    background-color: var(--first-color);
}

body[data-template="devblue"] .section,
body[data-template="marlon"] .section {
    padding-top: 3rem;
    padding-bottom: 2rem;
}

body[data-template="devblue"] .bd-grid,
body[data-template="marlon"] .bd-grid {
    max-width: 1024px;
    display: grid;
    grid-template-columns: 100%;
    grid-column-gap: 2rem;
    width: calc(100% - 2rem);
    margin-left: var(--mb2);
    margin-right: var(--mb2);
}

/* Header & Nav */
body[data-template="devblue"] .l-header,
body[data-template="marlon"] .l-header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-fixed);
    background-color: #ffffff;
    box-shadow: 0 1px 4px rgba(146, 161, 176, .15);
}

body[data-template="devblue"] .nav,
body[data-template="marlon"] .nav {
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: var(--font-semi);
}

body[data-template="devblue"] .nav-item,
body[data-template="marlon"] .nav-item {
    margin-bottom: var(--mb4);
}

body[data-template="devblue"] .nav-link,
body[data-template="marlon"] .nav-link {
    position: relative;
    color: #ffffff;
    transition: color .3s;
}

body[data-template="devblue"] .nav-link:hover,
body[data-template="marlon"] .nav-link:hover {
    color: var(--first-color);
}

body[data-template="devblue"] .nav-link:hover::after,
body[data-template="marlon"] .nav-link:hover::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 0.18rem;
    left: 0;
    top: 2rem;
    background-color: var(--first-color);
}

body[data-template="devblue"] .nav-logo,
body[data-template="marlon"] .nav-logo {
    color: var(--second-color);
    font-size: 1.25rem;
    font-weight: var(--font-semi);
}

body[data-template="devblue"] .nav-toggle,
body[data-template="marlon"] .nav-toggle {
    color: var(--second-color);
    font-size: 1.5rem;
    cursor: pointer;
}

body[data-template="devblue"] .nav-link.active::after,
body[data-template="marlon"] .nav-link.active::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 0.18rem;
    left: 0;
    top: 2rem;
    background-color: var(--first-color);
}

/* Home Section */
body[data-template="devblue"] .home,
body[data-template="marlon"] .home {
    height: calc(100vh - 3rem);
    min-height: 520px;
    row-gap: 1rem;
    position: relative;
}

body[data-template="devblue"] .home-data,
body[data-template="marlon"] .home-data {
    align-self: center;
    position: relative;
    z-index: 2;
    max-width: 540px;
}

body[data-template="devblue"] .home-title,
body[data-template="marlon"] .home-title {
    font-size: var(--big-font-size);
    margin-bottom: var(--mb5);
    font-weight: var(--font-semi);
    line-height: 1.2;
}

body[data-template="devblue"] .home-title-color,
body[data-template="marlon"] .home-title-color {
    color: var(--first-color);
}

body[data-template="devblue"] .home-social,
body[data-template="marlon"] .home-social {
    display: flex;
    flex-direction: column;
}

body[data-template="devblue"] .home-social-icon,
body[data-template="marlon"] .home-social-icon {
    width: max-content;
    margin-bottom: var(--mb2);
    font-size: 1.5rem;
    color: var(--second-color);
    transition: .3s;
}

body[data-template="devblue"] .home-social-icon:hover,
body[data-template="marlon"] .home-social-icon:hover {
    color: var(--first-color);
}

body[data-template="devblue"] .home-img,
body[data-template="marlon"] .home-img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 295px;
}

body[data-template="devblue"] .home-img img,
body[data-template="marlon"] .home-img img {
    width: 295px;
    height: 295px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--first-color);
}

body[data-template="devblue"] .button,
body[data-template="marlon"] .button {
    display: inline-block;
    background-color: var(--first-color);
    color: #ffffff;
    padding: 0.75rem 2.5rem;
    font-weight: var(--font-semi);
    border-radius: .5rem;
    border: none;
    cursor: pointer;
    transition: .3s;
}

body[data-template="devblue"] .button:hover,
body[data-template="marlon"] .button:hover {
    box-shadow: 0 10px 36px rgba(0, 0, 0, .15);
}

/* About Section */
body[data-template="devblue"] .about-container,
body[data-template="marlon"] .about-container {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    display: block;
}

body[data-template="devblue"] .about-data,
body[data-template="marlon"] .about-data {
    background: #ffffff;
    padding: 2.5rem 2rem;
    border-radius: .75rem;
    box-shadow: 0 4px 25px rgba(14, 36, 49, .08);
    border: 1px solid rgba(14, 36, 49, .08);
}

body[data-template="devblue"] .about-subtitle,
body[data-template="marlon"] .about-subtitle {
    margin-bottom: var(--mb2);
    font-size: 1.5rem;
    font-weight: var(--font-semi);
    color: var(--second-color);
}

body[data-template="devblue"] .about-text,
body[data-template="marlon"] .about-text {
    line-height: 1.85;
    color: #4b5563;
    font-size: 1.05rem;
    max-width: 680px;
    margin: 0 auto;
}

/* Skills Section */
body[data-template="devblue"] .skills-container,
body[data-template="marlon"] .skills-container {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}

body[data-template="devblue"] .skills-header-block,
body[data-template="marlon"] .skills-header-block {
    text-align: center;
    max-width: 680px;
    margin: 0 auto var(--mb4);
}

body[data-template="devblue"] .skills-subtitle,
body[data-template="marlon"] .skills-subtitle {
    margin-bottom: var(--mb2);
    font-size: 1.5rem;
    font-weight: var(--font-semi);
    color: var(--second-color);
}

body[data-template="devblue"] .skills-text,
body[data-template="marlon"] .skills-text {
    line-height: 1.8;
    color: #4b5563;
    margin-bottom: var(--mb4);
}

body[data-template="devblue"] .skills-grid,
body[data-template="marlon"] .skills-grid {
    display: grid;
    grid-template-columns: 100%;
    gap: 1.25rem;
}

body[data-template="devblue"] .skills-data,
body[data-template="marlon"] .skills-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    font-weight: var(--font-semi);
    padding: 0.85rem 1.25rem;
    border-radius: .5rem;
    box-shadow: 0 4px 20px rgba(14, 36, 49, .08);
    background-color: #ffffff;
    border: 1px solid rgba(14, 36, 49, .07);
    overflow: hidden;
}

body[data-template="devblue"] .skills-icon,
body[data-template="marlon"] .skills-icon {
    font-size: 2rem;
    margin-right: var(--mb2);
    color: var(--first-color);
}

body[data-template="devblue"] .skills-names,
body[data-template="marlon"] .skills-names {
    display: flex;
    align-items: center;
}

body[data-template="devblue"] .skills-percentage,
body[data-template="marlon"] .skills-percentage {
    color: var(--second-color);
}

body[data-template="devblue"] .skills-bar,
body[data-template="marlon"] .skills-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: var(--first-color);
    height: 0.25rem;
    border-radius: .5rem;
    z-index: 1;
}

/* Work Section */
body[data-template="devblue"] .work,
body[data-template="marlon"] .work {
    text-align: center;
}

body[data-template="devblue"] .work-container,
body[data-template="marlon"] .work-container {
    display: grid;
    grid-template-columns: 100%;
    gap: 1.5rem;
    max-width: 1024px;
    margin: 0 auto;
}

body[data-template="devblue"] .work-card,
body[data-template="marlon"] .work-card {
    background: #ffffff;
    border-radius: .75rem;
    border: 1px solid rgba(14, 36, 49, .1);
    box-shadow: 0 4px 20px rgba(14, 36, 49, .07);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.6rem;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    text-align: left;
    position: relative;
}

body[data-template="devblue"] .work-card:hover,
body[data-template="marlon"] .work-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(64, 112, 244, .16);
    border-color: rgba(64, 112, 244, .45);
}

body[data-template="devblue"] .work-card-top,
body[data-template="marlon"] .work-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

body[data-template="devblue"] .work-card-icon,
body[data-template="marlon"] .work-card-icon {
    font-size: 2.2rem;
    color: var(--first-color);
}

body[data-template="devblue"] .work-card-links,
body[data-template="marlon"] .work-card-links {
    display: flex;
    gap: .75rem;
}

body[data-template="devblue"] .work-card-link,
body[data-template="marlon"] .work-card-link {
    font-size: 1.3rem;
    color: var(--second-color);
    transition: color .2s, transform .2s;
}

body[data-template="devblue"] .work-card-link:hover,
body[data-template="marlon"] .work-card-link:hover {
    color: var(--first-color);
    transform: scale(1.15);
}

body[data-template="devblue"] .work-card-title,
body[data-template="marlon"] .work-card-title {
    font-size: 1.25rem;
    font-weight: var(--font-semi);
    color: var(--second-color);
    margin-bottom: .6rem;
}

body[data-template="devblue"] .work-card-title a,
body[data-template="marlon"] .work-card-title a {
    color: inherit;
    transition: color .2s;
}

body[data-template="devblue"] .work-card:hover .work-card-title a,
body[data-template="marlon"] .work-card:hover .work-card-title a {
    color: var(--first-color);
}

body[data-template="devblue"] .work-card-desc,
body[data-template="marlon"] .work-card-desc {
    font-size: .92rem;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    flex-grow: 1;
}

body[data-template="devblue"] .work-card-tags,
body[data-template="marlon"] .work-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: auto;
}

body[data-template="devblue"] .work-tag,
body[data-template="marlon"] .work-tag {
    font-size: .75rem;
    font-weight: 500;
    color: var(--first-color);
    background: rgba(64, 112, 244, .08);
    padding: .25rem .65rem;
    border-radius: .35rem;
}

body[data-template="devblue"] .work-card-img,
body[data-template="marlon"] .work-card-img {
    width: calc(100% + 3.2rem);
    margin: -1.6rem -1.6rem 1.25rem -1.6rem;
    height: 170px;
    object-fit: cover;
    border-radius: .75rem .75rem 0 0;
}

/* Contact Section */
body[data-template="devblue"] .contact-input,
body[data-template="marlon"] .contact-input {
    width: 100%;
    font-size: var(--normal-font-size);
    font-weight: var(--font-semi);
    font-family: var(--body-font);
    padding: 1rem;
    border-radius: .5rem;
    border: 1px solid var(--second-color);
    outline: none;
    margin-bottom: var(--mb4);
    background-color: transparent;
    color: var(--second-color);
}

body[data-template="devblue"] .contact-button,
body[data-template="marlon"] .contact-button {
    display: block;
    border: none;
    outline: none;
    font-size: var(--normal-font-size);
    cursor: pointer;
    margin-left: auto;
}

/* Footer Section */
body[data-template="devblue"] .footer,
body[data-template="marlon"] .footer {
    background-color: var(--second-color);
    color: #ffffff;
    text-align: center;
    font-weight: var(--font-semi);
    padding: 2.5rem 0;
    margin-top: 3rem;
}

body[data-template="devblue"] .footer-title,
body[data-template="marlon"] .footer-title {
    font-size: 2rem;
    margin-bottom: var(--mb4);
}

body[data-template="devblue"] .footer-social,
body[data-template="marlon"] .footer-social {
    margin-bottom: var(--mb4);
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

body[data-template="devblue"] .footer-icon,
body[data-template="marlon"] .footer-icon {
    font-size: 1.5rem;
    color: #ffffff;
    transition: color .3s;
}

body[data-template="devblue"] .footer-icon:hover,
body[data-template="marlon"] .footer-icon:hover {
    color: var(--first-color);
}

body[data-template="devblue"] .footer p,
body[data-template="marlon"] .footer p {
    font-size: var(--normal-font-size);
}

/* Responsive Media Queries */
@media screen and (min-width: 769px) {
    body[data-template="devblue"] .section,
    body[data-template="marlon"] .section {
        padding-top: 4rem;
        padding-bottom: 3rem;
    }

    body[data-template="devblue"] .section-title,
    body[data-template="marlon"] .section-title {
        margin-bottom: var(--mb6);
    }

    body[data-template="devblue"] .section-title::after,
    body[data-template="marlon"] .section-title::after {
        width: 80px;
        top: 3rem;
    }

    body[data-template="devblue"] .nav,
    body[data-template="marlon"] .nav {
        height: calc(var(--header-height) + 1rem);
    }

    body[data-template="devblue"] .nav-list,
    body[data-template="marlon"] .nav-list {
        display: flex;
        padding-top: 0;
    }

    body[data-template="devblue"] .nav-item,
    body[data-template="marlon"] .nav-item {
        margin-left: var(--mb6);
        margin-bottom: 0;
    }

    body[data-template="devblue"] .nav-toggle,
    body[data-template="marlon"] .nav-toggle {
        display: none;
    }

    body[data-template="devblue"] .nav-link,
    body[data-template="marlon"] .nav-link {
        color: var(--second-color);
    }

    body[data-template="devblue"] .home,
    body[data-template="marlon"] .home {
        height: 100vh;
    }

    body[data-template="devblue"] .home-data,
    body[data-template="marlon"] .home-data {
        align-self: flex-end;
        padding-bottom: 2.5rem;
        max-width: 520px;
    }

    body[data-template="devblue"] .home-social,
    body[data-template="marlon"] .home-social {
        padding-top: 0;
        padding-bottom: 2.5rem;
        flex-direction: row;
        align-self: flex-end;
    }

    body[data-template="devblue"] .home-social-icon,
    body[data-template="marlon"] .home-social-icon {
        margin-bottom: 0;
        margin-right: var(--mb4);
    }

    body[data-template="devblue"] .home-img,
    body[data-template="marlon"] .home-img {
        width: 420px;
        height: 420px;
        bottom: 12%;
        z-index: 1;
    }

    body[data-template="devblue"] .home-img img,
    body[data-template="marlon"] .home-img img {
        width: 420px;
        height: 420px;
    }

    body[data-template="devblue"] .skills-grid,
    body[data-template="marlon"] .skills-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 2rem;
    }

    body[data-template="devblue"] .work-container,
    body[data-template="marlon"] .work-container {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 1.75rem;
    }

    body[data-template="devblue"] .contact-form,
    body[data-template="marlon"] .contact-form {
        width: 460px;
    }

    body[data-template="devblue"] .contact-container,
    body[data-template="marlon"] .contact-container {
        justify-items: center;
    }
}

@media screen and (min-width: 1024px) {
    body[data-template="devblue"] .bd-grid,
    body[data-template="marlon"] .bd-grid {
        margin-left: auto;
        margin-right: auto;
    }

    body[data-template="devblue"] .home-img,
    body[data-template="marlon"] .home-img {
        right: 4%;
    }

    body[data-template="devblue"] .work-container,
    body[data-template="marlon"] .work-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 768px) {
    body[data-template="devblue"] .nav-menu,
    body[data-template="marlon"] .nav-menu {
        position: fixed;
        top: var(--header-height);
        right: -100%;
        width: 80%;
        height: 100%;
        padding: 2rem;
        background-color: var(--second-color);
        transition: .5s;
        z-index: var(--z-fixed);
    }

    body[data-template="devblue"] .nav-menu.show,
    body[data-template="marlon"] .nav-menu.show {
        right: 0;
    }

    body[data-template="devblue"] .nav-link,
    body[data-template="marlon"] .nav-link {
        color: #ffffff;
        display: block;
        padding: 0.5rem 0;
    }
}

/* ==========================================================================
   CUBE / MUZAMMAL TEMPLATE — 3D Cube Swiper with Charcoal & Mint Green Theme
   ========================================================================== */

body[data-template="cube"],
body[data-template="cubegreen"],
body[data-template="muzammal"] {
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #343a40;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    --cube-aside: #212529;
    --cube-bg: #343a40;
    --cube-primary: #80ed99;
    --cube-primary-hover: #85f69f;
    --cube-btn-bg: #1d8637;
    --cube-btn-hover: #176d2d;
    --cube-card: rgba(0, 0, 0, 0.44);
    --cube-text: #ffffff;
    --cube-muted: #adb5bd;
}

body[data-template="cube"] *,
body[data-template="cubegreen"] *,
body[data-template="muzammal"] * {
    box-sizing: border-box;
}

body[data-template="cube"] #app,
body[data-template="cubegreen"] #app,
body[data-template="muzammal"] #app {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

body[data-template="cube"] .cube-main,
body[data-template="cubegreen"] .cube-main,
body[data-template="muzammal"] .cube-main {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* Sidebar Navigation */
body[data-template="cube"] .cube-aside,
body[data-template="cubegreen"] .cube-aside,
body[data-template="muzammal"] .cube-aside {
    width: 280px;
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 1.05rem;
    background-color: var(--cube-aside);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    z-index: 50;
    padding: 24px 0;
    justify-content: space-between;
}

body[data-template="cube"] .cube-brand,
body[data-template="cubegreen"] .cube-brand,
body[data-template="muzammal"] .cube-brand {
    padding: 0 24px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-template="cube"] .cube-logo,
body[data-template="cubegreen"] .cube-logo,
body[data-template="muzammal"] .cube-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.15rem;
}

body[data-template="cube"] .cube-dot,
body[data-template="cubegreen"] .cube-dot,
body[data-template="muzammal"] .cube-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--cube-primary);
    box-shadow: 0 0 10px var(--cube-primary);
}

body[data-template="cube"] .Links,
body[data-template="cubegreen"] .Links,
body[data-template="muzammal"] .Links {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: auto 0;
    width: 100%;
}

body[data-template="cube"] .cube-aside li,
body[data-template="cubegreen"] .cube-aside li,
body[data-template="muzammal"] .cube-aside li {
    list-style-type: none;
    display: flex;
    padding: 16px 24px;
    gap: 14px;
    color: #ffffff;
    align-items: center;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease, background 0.2s ease;
    user-select: none;
}

body[data-template="cube"] .cube-aside li:hover,
body[data-template="cubegreen"] .cube-aside li:hover,
body[data-template="muzammal"] .cube-aside li:hover {
    color: var(--cube-primary);
    background: rgba(128, 237, 153, 0.05);
}

body[data-template="cube"] .cube-aside li::after,
body[data-template="cubegreen"] .cube-aside li::after,
body[data-template="muzammal"] .cube-aside li::after {
    position: absolute;
    width: 100%;
    left: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
    content: '';
    bottom: 0;
}

body[data-template="cube"] .cube-aside li i,
body[data-template="cubegreen"] .cube-aside li i,
body[data-template="muzammal"] .cube-aside li i {
    font-size: 1.25rem;
    width: 24px;
    text-align: center;
}

body[data-template="cube"] .cube-aside li p,
body[data-template="cubegreen"] .cube-aside li p,
body[data-template="muzammal"] .cube-aside li p {
    margin: 0;
    font-weight: 500;
}

body[data-template="cube"] .activeLink,
body[data-template="cubegreen"] .activeLink,
body[data-template="muzammal"] .activeLink {
    color: var(--cube-primary) !important;
    background: rgba(128, 237, 153, 0.08);
    border-left: 3px solid var(--cube-primary);
}

body[data-template="cube"] .cube-aside-foot,
body[data-template="cubegreen"] .cube-aside-foot,
body[data-template="muzammal"] .cube-aside-foot {
    padding: 16px 24px 0;
    font-size: 0.8rem;
    color: var(--cube-muted);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Swiper Container */
body[data-template="cube"] .mySwiper,
body[data-template="cubegreen"] .mySwiper,
body[data-template="muzammal"] .mySwiper {
    flex: 1;
    height: 100vh;
    overflow: hidden;
    background-color: var(--cube-bg);
}

body[data-template="cube"] .swiper-slide,
body[data-template="cubegreen"] .swiper-slide,
body[data-template="muzammal"] .swiper-slide {
    width: 100%;
    height: 100%;
    background-color: var(--cube-bg);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

/* Slide 1: Home */
body[data-template="cube"] .home-slide,
body[data-template="cubegreen"] .home-slide,
body[data-template="muzammal"] .home-slide {
    color: #ffffff;
    display: flex;
    align-items: center;
    background-color: var(--cube-bg);
    position: relative;
    padding: 0 40px;
}

body[data-template="cube"] .HomeContent,
body[data-template="cubegreen"] .HomeContent,
body[data-template="muzammal"] .HomeContent {
    flex: 1;
    padding: 60px 40px;
}

body[data-template="cube"] .HomeContent h1,
body[data-template="cubegreen"] .HomeContent h1,
body[data-template="muzammal"] .HomeContent h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.2;
}

body[data-template="cube"] .HomeContent h2,
body[data-template="cubegreen"] .HomeContent h2,
body[data-template="muzammal"] .HomeContent h2 {
    font-size: 2.1rem;
    margin-bottom: 16px;
    font-weight: 600;
}

body[data-template="cube"] .stylized-name,
body[data-template="cubegreen"] .stylized-name,
body[data-template="muzammal"] .stylized-name {
    font-weight: 700;
    color: var(--cube-primary);
}

body[data-template="cube"] .proffesions,
body[data-template="cubegreen"] .proffesions,
body[data-template="muzammal"] .proffesions {
    color: var(--cube-primary-hover);
}

body[data-template="cube"] .HomeContent .heroline,
body[data-template="cubegreen"] .HomeContent .heroline,
body[data-template="muzammal"] .HomeContent .heroline {
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.8;
    color: #e9ecef;
    max-width: 650px;
    margin-bottom: 24px;
}

body[data-template="cube"] .buttonGroup,
body[data-template="cubegreen"] .buttonGroup,
body[data-template="muzammal"] .buttonGroup {
    display: flex;
    gap: 14px;
    margin-top: 14px;
    flex-wrap: wrap;
}

body[data-template="cube"] .cube-btn,
body[data-template="cubegreen"] .cube-btn,
body[data-template="muzammal"] .cube-btn {
    padding: 12px 28px;
    border: none;
    outline: none;
    font-size: 1.05rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    background-color: var(--cube-btn-bg);
    color: #ffffff;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

body[data-template="cube"] .cube-btn:hover,
body[data-template="cubegreen"] .cube-btn:hover,
body[data-template="muzammal"] .cube-btn:hover {
    background-color: var(--cube-btn-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(29, 134, 55, 0.4);
}

body[data-template="cube"] .cube-btn.secondary,
body[data-template="cubegreen"] .cube-btn.secondary,
body[data-template="muzammal"] .cube-btn.secondary {
    background-color: transparent;
    border: 1px solid var(--cube-primary);
    color: var(--cube-primary);
}

body[data-template="cube"] .cube-btn.secondary:hover,
body[data-template="cubegreen"] .cube-btn.secondary:hover,
body[data-template="muzammal"] .cube-btn.secondary:hover {
    background-color: rgba(128, 237, 153, 0.15);
    color: #ffffff;
}

body[data-template="cube"] .SideImg,
body[data-template="cubegreen"] .SideImg,
body[data-template="muzammal"] .SideImg {
    width: 280px;
    margin: auto 40px;
    position: relative;
    flex-shrink: 0;
}

body[data-template="cube"] .SideImg img,
body[data-template="cubegreen"] .SideImg img,
body[data-template="muzammal"] .SideImg img {
    width: 280px;
    height: 280px;
    border-radius: 12px;
    object-fit: cover;
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

body[data-template="cube"] .top-right-corner,
body[data-template="cube"] .bottom-left-corner,
body[data-template="cubegreen"] .top-right-corner,
body[data-template="cubegreen"] .bottom-left-corner,
body[data-template="muzammal"] .top-right-corner,
body[data-template="muzammal"] .bottom-left-corner {
    position: absolute;
    pointer-events: none;
}

body[data-template="cube"] .bottom-left-corner,
body[data-template="cubegreen"] .bottom-left-corner,
body[data-template="muzammal"] .bottom-left-corner {
    left: -20px;
    bottom: -20px;
    transform: rotate(-90deg);
}

body[data-template="cube"] .top-right-corner,
body[data-template="cubegreen"] .top-right-corner,
body[data-template="muzammal"] .top-right-corner {
    right: -20px;
    top: -20px;
    transform: rotate(90deg);
}

body[data-template="cube"] .hr1,
body[data-template="cubegreen"] .hr1,
body[data-template="muzammal"] .hr1 {
    width: 90px;
    height: 6px;
    border: none;
    background: var(--cube-primary);
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    margin: 0;
}

body[data-template="cube"] .hr2,
body[data-template="cubegreen"] .hr2,
body[data-template="muzammal"] .hr2 {
    width: 6px;
    height: 80px;
    background: var(--cube-primary);
    border: none;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    margin: 0;
}

body[data-template="cube"] .slide-help,
body[data-template="cubegreen"] .slide-help,
body[data-template="muzammal"] .slide-help {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    font-weight: 400;
    font-size: 1rem;
    color: var(--cube-primary);
    cursor: pointer;
    user-select: none;
    margin: 0;
}

/* Slide 2: About Me */
body[data-template="cube"] .about-us,
body[data-template="cubegreen"] .about-us,
body[data-template="muzammal"] .about-us {
    width: 100%;
    min-height: 100%;
    padding: 60px 80px;
    color: #ffffff;
}

body[data-template="cube"] .heading,
body[data-template="cubegreen"] .heading,
body[data-template="muzammal"] .heading {
    padding: 0 0 10px 0;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--cube-primary);
    margin-bottom: 8px;
}

body[data-template="cube"] .sub-heading,
body[data-template="cubegreen"] .sub-heading,
body[data-template="muzammal"] .sub-heading {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 14px;
}

body[data-template="cube"] .aboutme-deatils,
body[data-template="cubegreen"] .aboutme-deatils,
body[data-template="muzammal"] .aboutme-deatils {
    padding: 0 0 24px 0;
    font-weight: 300;
    line-height: 1.8;
    color: #ced4da;
    max-width: 920px;
    font-size: 1.05rem;
}

body[data-template="cube"] .about-me-divison,
body[data-template="cubegreen"] .about-me-divison,
body[data-template="muzammal"] .about-me-divison {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

body[data-template="cube"] .about-me-table,
body[data-template="cubegreen"] .about-me-table,
body[data-template="muzammal"] .about-me-table {
    width: 55%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    overflow: hidden;
}

body[data-template="cube"] .about-me-table li,
body[data-template="cubegreen"] .about-me-table li,
body[data-template="muzammal"] .about-me-table li {
    padding: 14px 18px;
    position: relative;
    list-style: none;
    font-size: 0.95rem;
    color: #e9ecef;
}

body[data-template="cube"] .about-me-table li::after,
body[data-template="cubegreen"] .about-me-table li::after,
body[data-template="muzammal"] .about-me-table li::after {
    position: absolute;
    width: 100%;
    left: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
    content: '';
    bottom: 0;
}

body[data-template="cube"] .about-me-table span,
body[data-template="cubegreen"] .about-me-table span,
body[data-template="muzammal"] .about-me-table span {
    color: var(--cube-primary);
    font-weight: 600;
    margin-right: 6px;
}

body[data-template="cube"] .about-me-table .buttonGroup,
body[data-template="cubegreen"] .about-me-table .buttonGroup,
body[data-template="muzammal"] .about-me-table .buttonGroup {
    grid-column: 1 / span 2;
    justify-content: flex-start;
    padding: 18px;
    margin: 0;
}

body[data-template="cube"] .skill-bar,
body[data-template="cubegreen"] .skill-bar,
body[data-template="muzammal"] .skill-bar {
    width: 45%;
    list-style: none;
    padding: 0;
    margin: 0;
}

body[data-template="cube"] .skill-bar li,
body[data-template="cubegreen"] .skill-bar li,
body[data-template="muzammal"] .skill-bar li {
    width: 100%;
    padding: 8px 0;
    list-style: none;
}

body[data-template="cube"] .skill-bar-head,
body[data-template="cubegreen"] .skill-bar-head,
body[data-template="muzammal"] .skill-bar-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

body[data-template="cube"] .skill-bar p,
body[data-template="cubegreen"] .skill-bar p,
body[data-template="muzammal"] .skill-bar p {
    color: var(--cube-primary);
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0;
}

body[data-template="cube"] .skill-pct,
body[data-template="cubegreen"] .skill-pct,
body[data-template="muzammal"] .skill-pct {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 500;
}

body[data-template="cube"] .skill-bar .bar,
body[data-template="cubegreen"] .skill-bar .bar,
body[data-template="muzammal"] .skill-bar .bar {
    width: 100%;
    height: 12px;
    background-color: #212529;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

body[data-template="cube"] .active-bar,
body[data-template="cubegreen"] .active-bar,
body[data-template="muzammal"] .active-bar {
    background-color: var(--cube-primary);
    height: 100%;
    border-radius: 20px;
    transition: width 1s ease-in-out;
}

/* Slide 3: Services */
body[data-template="cube"] .services,
body[data-template="cubegreen"] .services,
body[data-template="muzammal"] .services {
    color: #ffffff;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    padding: 60px 80px 100px;
    box-sizing: border-box;
}

body[data-template="cube"] .services .heading,
body[data-template="cubegreen"] .services .heading,
body[data-template="muzammal"] .services .heading {
    grid-column: 1 / -1;
    margin-bottom: 10px;
}

body[data-template="cube"] .services .service,
body[data-template="cubegreen"] .services .service,
body[data-template="muzammal"] .services .service {
    display: flex;
    text-align: center;
    justify-content: center;
    padding: 24px;
    background-color: var(--cube-card);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

body[data-template="cube"] .services .service:hover,
body[data-template="cubegreen"] .services .service:hover,
body[data-template="muzammal"] .services .service:hover {
    background-color: var(--cube-primary);
    color: #176d2d;
    transform: translateY(-4px);
}

body[data-template="cube"] .services .service i,
body[data-template="cubegreen"] .services .service i,
body[data-template="muzammal"] .services .service i {
    font-size: 2.8rem;
    color: var(--cube-primary);
    margin-bottom: 16px;
    transition: color 0.25s ease;
}

body[data-template="cube"] .services .service:hover i,
body[data-template="cubegreen"] .services .service:hover i,
body[data-template="muzammal"] .services .service:hover i {
    color: #176d2d;
}

body[data-template="cube"] .service h2,
body[data-template="cubegreen"] .service h2,
body[data-template="muzammal"] .service h2 {
    color: var(--cube-primary);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 10px;
    transition: color 0.25s ease;
}

body[data-template="cube"] .services .service:hover h2,
body[data-template="cubegreen"] .services .service:hover h2,
body[data-template="muzammal"] .services .service:hover h2 {
    color: #176d2d;
}

body[data-template="cube"] .service p,
body[data-template="cubegreen"] .service p,
body[data-template="muzammal"] .service p {
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
}

/* Slide 4: Gallery / Projects */
body[data-template="cube"] .gallery,
body[data-template="cubegreen"] .gallery,
body[data-template="muzammal"] .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 60px 80px 100px;
}

body[data-template="cube"] .gallery .heading,
body[data-template="cubegreen"] .gallery .heading,
body[data-template="muzammal"] .gallery .heading {
    grid-column: 1 / -1;
    margin-bottom: 10px;
}

body[data-template="cube"] .gallery .cube-project,
body[data-template="cubegreen"] .gallery .cube-project,
body[data-template="muzammal"] .gallery .cube-project {
    background: #212529;
    padding: 22px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

body[data-template="cube"] .gallery .cube-project:hover,
body[data-template="cubegreen"] .gallery .cube-project:hover,
body[data-template="muzammal"] .gallery .cube-project:hover {
    transform: translateY(-4px);
    border-color: var(--cube-primary);
    box-shadow: 0 8px 24px rgba(128, 237, 153, 0.15);
}

body[data-template="cube"] .cube-project-top,
body[data-template="cubegreen"] .cube-project-top,
body[data-template="muzammal"] .cube-project-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

body[data-template="cube"] .cube-project-icon,
body[data-template="cubegreen"] .cube-project-icon,
body[data-template="muzammal"] .cube-project-icon {
    font-size: 1.8rem;
    color: var(--cube-primary);
}

body[data-template="cube"] .cube-project-links,
body[data-template="cubegreen"] .cube-project-links,
body[data-template="muzammal"] .cube-project-links {
    display: flex;
    gap: 10px;
}

body[data-template="cube"] .cube-project-link,
body[data-template="cubegreen"] .cube-project-link,
body[data-template="muzammal"] .cube-project-link {
    font-size: 1.2rem;
    color: #ced4da;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

body[data-template="cube"] .cube-project-link:hover,
body[data-template="cubegreen"] .cube-project-link:hover,
body[data-template="muzammal"] .cube-project-link:hover {
    color: var(--cube-primary);
    transform: scale(1.15);
}

body[data-template="cube"] .cube-project-title,
body[data-template="cubegreen"] .cube-project-title,
body[data-template="muzammal"] .cube-project-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
}

body[data-template="cube"] .cube-project-title a,
body[data-template="cubegreen"] .cube-project-title a,
body[data-template="muzammal"] .cube-project-title a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s ease;
}

body[data-template="cube"] .cube-project-title a:hover,
body[data-template="cubegreen"] .cube-project-title a:hover,
body[data-template="muzammal"] .cube-project-title a:hover {
    color: var(--cube-primary);
}

body[data-template="cube"] .cube-project-desc,
body[data-template="cubegreen"] .cube-project-desc,
body[data-template="muzammal"] .cube-project-desc {
    font-size: 0.9rem;
    color: #adb5bd;
    line-height: 1.6;
    margin-bottom: 14px;
    flex-grow: 1;
}

body[data-template="cube"] .cube-project-tags,
body[data-template="cubegreen"] .cube-project-tags,
body[data-template="muzammal"] .cube-project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}

body[data-template="cube"] .cube-tag,
body[data-template="cubegreen"] .cube-tag,
body[data-template="muzammal"] .cube-tag {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cube-primary);
    background: rgba(128, 237, 153, 0.1);
    padding: 3px 8px;
    border-radius: 4px;
}

/* Slide 5: Contact Me */
body[data-template="cube"] .contactMe,
body[data-template="cubegreen"] .contactMe,
body[data-template="muzammal"] .contactMe {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    padding: 60px 80px;
    position: relative;
    min-height: 100%;
}

body[data-template="cube"] .contactMe .heading,
body[data-template="cubegreen"] .contactMe .heading,
body[data-template="muzammal"] .contactMe .heading {
    grid-column: 1 / span 2;
    margin-bottom: 0;
}

body[data-template="cube"] .contact-info-list,
body[data-template="cubegreen"] .contact-info-list,
body[data-template="muzammal"] .contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body[data-template="cube"] .contactinfo,
body[data-template="cubegreen"] .contactinfo,
body[data-template="muzammal"] .contactinfo {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
}

body[data-template="cube"] .contactinfo i,
body[data-template="cubegreen"] .contactinfo i,
body[data-template="muzammal"] .contactinfo i {
    font-size: 1.8rem;
    color: var(--cube-primary);
    width: 36px;
    text-align: center;
    margin: 0;
}

body[data-template="cube"] .contactinfo h3,
body[data-template="cubegreen"] .contactinfo h3,
body[data-template="muzammal"] .contactinfo h3 {
    color: var(--cube-primary);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 4px 0;
}

body[data-template="cube"] .contactinfo p,
body[data-template="cubegreen"] .contactinfo p,
body[data-template="muzammal"] .contactinfo p {
    font-size: 0.9rem;
    color: #ced4da;
    margin: 0;
    word-break: break-word;
}

body[data-template="cube"] .contactMe form,
body[data-template="cubegreen"] .contactMe form,
body[data-template="muzammal"] .contactMe form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: rgba(0, 0, 0, 0.25);
    padding: 30px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-template="cube"] .contactMe form h2,
body[data-template="cubegreen"] .contactMe form h2,
body[data-template="muzammal"] .contactMe form h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.4rem;
    color: #ffffff;
    margin-bottom: 10px;
}

body[data-template="cube"] .SocialLinks,
body[data-template="cubegreen"] .SocialLinks,
body[data-template="muzammal"] .SocialLinks {
    display: flex;
    gap: 8px;
    background-color: var(--cube-aside);
    padding: 6px 14px;
    border-radius: 30px;
}

body[data-template="cube"] .SocialLinks a,
body[data-template="cubegreen"] .SocialLinks a,
body[data-template="muzammal"] .SocialLinks a {
    color: #ffffff;
    font-size: 1.1rem;
    padding: 6px;
    border-radius: 50%;
    transition: background-color 0.25s, color 0.25s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body[data-template="cube"] .SocialLinks a:hover,
body[data-template="cubegreen"] .SocialLinks a:hover,
body[data-template="muzammal"] .SocialLinks a:hover {
    background-color: var(--cube-btn-hover);
    color: var(--cube-primary);
}

body[data-template="cube"] .contactMe form input,
body[data-template="cubegreen"] .contactMe form input,
body[data-template="muzammal"] .contactMe form input {
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    background-color: var(--cube-aside);
    outline: none;
    transition: border-color 0.2s;
}

body[data-template="cube"] .contactMe form input:focus,
body[data-template="cubegreen"] .contactMe form input:focus,
body[data-template="muzammal"] .contactMe form input:focus {
    border-color: var(--cube-primary);
}

body[data-template="cube"] .contactMe form textarea,
body[data-template="cubegreen"] .contactMe form textarea,
body[data-template="muzammal"] .contactMe form textarea {
    padding: 16px 18px;
    font-size: 1rem;
    font-family: inherit;
    border-radius: 8px;
    resize: vertical;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    background-color: var(--cube-aside);
    outline: none;
    transition: border-color 0.2s;
}

body[data-template="cube"] .contactMe form textarea:focus,
body[data-template="cubegreen"] .contactMe form textarea:focus,
body[data-template="muzammal"] .contactMe form textarea:focus {
    border-color: var(--cube-primary);
}

body[data-template="cube"] .contactMe footer,
body[data-template="cubegreen"] .contactMe footer,
body[data-template="muzammal"] .contactMe footer {
    grid-column: 1 / span 2;
    text-align: center;
    color: var(--cube-muted);
    font-size: 0.85rem;
    padding-top: 20px;
}

/* Responsive Breakpoints */
@media screen and (max-width: 992px) {
    body[data-template="cube"] .services,
    body[data-template="cubegreen"] .services,
    body[data-template="muzammal"] .services,
    body[data-template="cube"] .gallery,
    body[data-template="cubegreen"] .gallery,
    body[data-template="muzammal"] .gallery {
        grid-template-columns: repeat(2, 1fr);
        padding: 40px;
    }

    body[data-template="cube"] .about-us,
    body[data-template="cubegreen"] .about-us,
    body[data-template="muzammal"] .about-us,
    body[data-template="cube"] .contactMe,
    body[data-template="cubegreen"] .contactMe,
    body[data-template="muzammal"] .contactMe {
        padding: 40px;
    }

    body[data-template="cube"] .contactMe,
    body[data-template="cubegreen"] .contactMe,
    body[data-template="muzammal"] .contactMe {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) {
    body[data-template="cube"] .cube-main,
    body[data-template="cubegreen"] .cube-main,
    body[data-template="muzammal"] .cube-main {
        flex-direction: column;
        height: 100vh;
    }

    body[data-template="cube"] .cube-aside,
    body[data-template="cubegreen"] .cube-aside,
    body[data-template="muzammal"] .cube-aside {
        width: 100%;
        height: 60px;
        flex-direction: row;
        padding: 0;
        border-right: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        order: 2;
        overflow-x: auto;
    }

    body[data-template="cube"] .cube-brand,
    body[data-template="cubegreen"] .cube-brand,
    body[data-template="muzammal"] .cube-brand,
    body[data-template="cube"] .cube-aside-foot,
    body[data-template="cubegreen"] .cube-aside-foot,
    body[data-template="muzammal"] .cube-aside-foot {
        display: none;
    }

    body[data-template="cube"] .Links,
    body[data-template="cubegreen"] .Links,
    body[data-template="muzammal"] .Links {
        flex-direction: row;
        justify-content: space-around;
        width: 100%;
        margin: 0;
    }

    body[data-template="cube"] .cube-aside li,
    body[data-template="cubegreen"] .cube-aside li,
    body[data-template="muzammal"] .cube-aside li {
        padding: 8px 12px;
        flex-direction: column;
        gap: 4px;
        font-size: 0.72rem;
        border-left: none;
        border-top: 2px solid transparent;
    }

    body[data-template="cube"] .cube-aside li i,
    body[data-template="cubegreen"] .cube-aside li i,
    body[data-template="muzammal"] .cube-aside li i {
        font-size: 1.1rem;
    }

    body[data-template="cube"] .activeLink,
    body[data-template="cubegreen"] .activeLink,
    body[data-template="muzammal"] .activeLink {
        border-left: none !important;
        border-top: 2px solid var(--cube-primary) !important;
    }

    body[data-template="cube"] .mySwiper,
    body[data-template="cubegreen"] .mySwiper,
    body[data-template="muzammal"] .mySwiper {
        height: calc(100vh - 60px);
        width: 100vw;
        order: 1;
    }

    body[data-template="cube"] .home-slide,
    body[data-template="cubegreen"] .home-slide,
    body[data-template="muzammal"] .home-slide {
        flex-direction: column-reverse;
        padding: 30px 20px;
        text-align: center;
        overflow-y: auto;
    }

    body[data-template="cube"] .HomeContent,
    body[data-template="cubegreen"] .HomeContent,
    body[data-template="muzammal"] .HomeContent {
        padding: 20px 0;
    }

    body[data-template="cube"] .HomeContent h1,
    body[data-template="cubegreen"] .HomeContent h1,
    body[data-template="muzammal"] .HomeContent h1 {
        font-size: 2.1rem;
    }

    body[data-template="cube"] .HomeContent h2,
    body[data-template="cubegreen"] .HomeContent h2,
    body[data-template="muzammal"] .HomeContent h2 {
        font-size: 1.5rem;
    }

    body[data-template="cube"] .HomeContent .heroline,
    body[data-template="cubegreen"] .HomeContent .heroline,
    body[data-template="muzammal"] .HomeContent .heroline {
        font-size: 1rem;
    }

    body[data-template="cube"] .buttonGroup,
    body[data-template="cubegreen"] .buttonGroup,
    body[data-template="muzammal"] .buttonGroup {
        justify-content: center;
    }

    body[data-template="cube"] .SideImg,
    body[data-template="cubegreen"] .SideImg,
    body[data-template="muzammal"] .SideImg {
        width: 180px;
        margin: 20px auto;
    }

    body[data-template="cube"] .SideImg img,
    body[data-template="cubegreen"] .SideImg img,
    body[data-template="muzammal"] .SideImg img {
        width: 180px;
        height: 180px;
    }

    body[data-template="cube"] .about-us,
    body[data-template="cubegreen"] .about-us,
    body[data-template="muzammal"] .about-us,
    body[data-template="cube"] .services,
    body[data-template="cubegreen"] .services,
    body[data-template="muzammal"] .services,
    body[data-template="cube"] .gallery,
    body[data-template="cubegreen"] .gallery,
    body[data-template="muzammal"] .gallery,
    body[data-template="cube"] .contactMe,
    body[data-template="cubegreen"] .contactMe,
    body[data-template="muzammal"] .contactMe {
        padding: 24px 16px;
    }

    body[data-template="cube"] .about-me-divison,
    body[data-template="cubegreen"] .about-me-divison,
    body[data-template="muzammal"] .about-me-divison {
        flex-direction: column;
    }

    body[data-template="cube"] .about-me-table,
    body[data-template="cubegreen"] .about-me-table,
    body[data-template="muzammal"] .about-me-table {
        width: 100%;
        grid-template-columns: 1fr;
    }

    body[data-template="cube"] .skill-bar,
    body[data-template="cubegreen"] .skill-bar,
    body[data-template="muzammal"] .skill-bar {
        width: 100%;
    }

    body[data-template="cube"] .services,
    body[data-template="cubegreen"] .services,
    body[data-template="muzammal"] .services,
    body[data-template="cube"] .gallery,
    body[data-template="cubegreen"] .gallery,
    body[data-template="muzammal"] .gallery {
        grid-template-columns: 1fr;
    }

    body[data-template="cube"] .contactMe form,
    body[data-template="cubegreen"] .contactMe form,
    body[data-template="muzammal"] .contactMe form {
        padding: 16px;
    }
}





/* ==========================================================================
   PORTFOOLIO TEMPLATES EXTENSION (Reverse Engineered from Modern Tech Suites)
   Nova, Codeflow, Wave, Assistant, Console, Snowcard, Parchment, Cloud
   ========================================================================== */

/* Template Preview Cards */
.tpl-preview.nova{background:#0a1622;color:#2dd4bf;border:1px solid rgba(45,212,191,.3)}
.tpl-preview.codeflow{background:#0a0f1e;color:#38bdf8;border:1px solid rgba(59,130,246,.3)}
.tpl-preview.wave{background:#000;color:#2ee6a6;border:1px solid rgba(46,230,166,.3)}
.tpl-preview.assistant{background:#212121;color:#10a37f;border:1px solid #3a3a3a}
.tpl-preview.console{background:#0f0f10;color:#00ff75;border:1px solid rgba(255,255,255,.1)}
.tpl-preview.snowcard{background:#fff;color:#050505;border:2px solid #000;box-shadow:inset 0 -6px #ffd000}
.tpl-preview.parchment{background:radial-gradient(circle,#f4e8c8,#ecdcae);color:#3a2614;border:1px solid #6b4423}
.tpl-preview.cloud{background:linear-gradient(180deg,#bfe3ff,#eaf6ff);color:#3f6bf6;border:1px solid #cce3ff}

/* --- Template: nova --- */
/* ===========================================================================
   Portfolio "Nova" theme — teal-on-navy with an animated constellation
   (particle-network) background. Sticky nav, avatar hero with typewriter,
   scrolling sections. High-contrast typography & luminous accents.
   =========================================================================== */
:root, body[data-template="nova"] {
    --nv-bg: #070d18;
    --nv-bg-2: #0b1526;
    --nv-surface: rgba(11, 21, 38, 0.85);
    --nv-surface-2: rgba(18, 32, 56, 0.9);
    --nv-border: rgba(45, 212, 191, 0.28);
    --nv-ink: #ffffff;
    --nv-dim: #e2e8f0;
    --nv-faint: #94a3b8;
    --nv-teal: #2dd4bf;
    --nv-teal-2: #14b8a6;
    --nv-blue: #38bdf8;
    --nv-radius: 16px;
    --nv-max: 1180px;
    --nv-font: 'Inter', system-ui, -apple-system, sans-serif;
    --nv-display: 'Poppins', 'Inter', sans-serif;
    --nv-mono: 'JetBrains Mono', ui-monospace, monospace;
}

body[data-template="nova"] {
    margin: 0;
    font-family: var(--nv-font);
    color: var(--nv-dim) !important;
    background: var(--nv-bg) !important;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
body[data-template="nova"] .bg-fx,
body[data-template="nova"] .grid-overlay {
    display: none !important;
}
body[data-template="nova"] a { color: inherit; text-decoration: none; }
body[data-template="nova"] img { max-width: 100%; }
body[data-template="nova"] h1,
body[data-template="nova"] h2,
body[data-template="nova"] h3,
body[data-template="nova"] h4 {
    color: #ffffff !important;
    font-family: var(--nv-display);
}
body[data-template="nova"] p,
body[data-template="nova"] li {
    color: #cbd5e1 !important;
}

#nv-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.nv-wrap { max-width: var(--nv-max); margin: 0 auto; padding: 0 30px; position: relative; z-index: 1; }
.nv-section { padding: 90px 0; position: relative; z-index: 1; }
.nv-title { text-align: center; font-size: clamp(2rem,4.6vw,3.2rem); font-weight: 800; margin: 0 0 14px; color: #ffffff !important; }
.nv-title .g { color: var(--nv-teal) !important; }
.nv-rule { width: 80px; height: 4px; border-radius: 4px; background: var(--nv-teal); margin: 0 auto 18px; }
.nv-lead { text-align: center; color: #cbd5e1 !important; max-width: 70ch; margin: 0 auto 46px; font-size: 1.08rem; line-height: 1.7; }
.nv-lead b { color: #ffffff !important; font-weight: 700; }

/* ---- Nav ---- */
.nv-nav { position: sticky; top: 0; z-index: 50; background: rgba(7, 13, 24, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--nv-border); }
.nv-nav-in { max-width: var(--nv-max); margin: 0 auto; padding: 18px 30px; display: flex; align-items: center; justify-content: space-between; }
.nv-brand { font-family: var(--nv-mono); font-weight: 700; color: var(--nv-teal); font-size: 1.15rem; }
.nv-links { display: flex; gap: 26px; }
.nv-links a { color: #cbd5e1 !important; font-size: .95rem; font-weight: 500; padding: 4px 0; position: relative; transition: color .2s; }
.nv-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--nv-teal); transform: scaleX(0); transition: transform .2s; }
.nv-links a:hover, .nv-links a.on { color: var(--nv-teal) !important; }
.nv-links a.on::after { transform: scaleX(1); }
.nv-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nv-burger span { width: 24px; height: 2px; background: #ffffff; border-radius: 2px; }

/* ---- Hero ---- */
.nv-hero { min-height: 92vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 30px; }
.nv-avatar-ring { width: 220px; height: 220px; border-radius: 50%; padding: 6px; background: conic-gradient(from 0deg, var(--nv-teal), var(--nv-blue), var(--nv-teal)); position: relative; margin-bottom: 40px; }
.nv-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid var(--nv-bg); background: var(--nv-bg-2); }
.nv-avatar.ph { display: flex; align-items: center; justify-content: center; font-family: var(--nv-display); font-weight: 800; font-size: 3.6rem; color: var(--nv-teal); }
.nv-avatar-dot { position: absolute; bottom: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--nv-teal); border: 4px solid var(--nv-bg); }
.nv-hero h1 { font-family: var(--nv-display); font-weight: 800; font-size: clamp(2.6rem,6.5vw,4.6rem); margin: 0 0 18px; color: #ffffff !important; }
.nv-hero h1 .g { color: var(--nv-teal) !important; }
.nv-type { font-size: clamp(1.3rem,3vw,2rem); font-weight: 600; color: #ffffff !important; margin-bottom: 26px; }
.nv-type .a { color: #94a3b8 !important; }
.nv-type .t { color: var(--nv-teal) !important; }
.nv-type .cur { color: var(--nv-teal); animation: nvBlink 1s step-end infinite; }
@keyframes nvBlink { 50% { opacity: 0; } }
.nv-quote { font-style: italic; color: #a5f3fc !important; max-width: 54ch; margin: 0 auto 18px; font-size: 1.15rem; line-height: 1.7; }
.nv-loc { color: #cbd5e1 !important; font-size: .98rem; margin-bottom: 32px; font-weight: 500; }
.nv-loc svg { width: 15px; height: 15px; vertical-align: -2px; color: var(--nv-teal); }
.nv-card-meta svg { width: 14px; height: 14px; vertical-align: -2px; }
.nv-btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1rem; padding: 14px 30px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; transition: all .2s; }
.nv-btn-teal { background: var(--nv-teal); color: #04201c !important; font-weight: 700; box-shadow: 0 12px 30px -10px var(--nv-teal); }
.nv-btn-teal:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px var(--nv-teal); color: #04201c !important; }
.nv-btn-ghost { background: var(--nv-surface); color: #ffffff !important; border-color: var(--nv-border); }

/* ---- About ---- */
.nv-about-ic { width: 86px; height: 86px; border-radius: 18px; background: linear-gradient(135deg, rgba(45,212,191,.22), rgba(20,184,166,.08)); color: var(--nv-teal); display: flex; align-items: center; justify-content: center; margin: 0 auto 36px; border: 1px solid var(--nv-border); }
.nv-about-ic svg { width: 38px; height: 38px; }
.nv-about p { color: #cbd5e1 !important; font-size: 1.12rem; text-align: center; max-width: 70ch; margin: 0 auto 18px; line-height: 1.8; }
.nv-about b { color: #ffffff !important; }

/* ---- Cards (experience / education) ---- */
.nv-card { border: 1px solid var(--nv-border); border-radius: 18px; padding: 30px 34px; background: var(--nv-surface) !important; color: #e2e8f0 !important; margin-bottom: 22px; transition: border-color .2s, box-shadow .2s; box-shadow: 0 16px 36px -12px rgba(0,0,0,0.6); backdrop-filter: blur(8px); }
.nv-card:hover { border-color: rgba(45,212,191,.5) !important; box-shadow: 0 20px 50px -25px var(--nv-teal); }
.nv-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.nv-card-role { color: var(--nv-teal) !important; font-size: 1.3rem; font-weight: 700; margin: 0; }
.nv-card-org { color: var(--nv-teal-2) !important; font-weight: 600; margin-top: 4px; font-size: 1rem; }
.nv-card-meta { text-align: right; color: #94a3b8 !important; font-size: .92rem; }
.nv-card-meta .pill { display: inline-block; margin-top: 8px; padding: 4px 13px; border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--nv-teal) !important; background: rgba(45,212,191,.15) !important; border: 1px solid rgba(45,212,191,.4) !important; }
.nv-card-meta .pill.blue { color: var(--nv-blue) !important; background: rgba(56,189,248,.15) !important; border-color: rgba(56,189,248,.4) !important; }
.nv-card-desc { color: #cbd5e1 !important; margin: 18px 0 0; font-size: 0.98rem; line-height: 1.7; }
.nv-keyh { color: var(--nv-teal) !important; font-weight: 700; font-size: .98rem; margin: 18px 0 10px; }
.nv-dots { list-style: none; margin: 0; padding: 0; }
.nv-dots li { position: relative; padding-left: 22px; margin-bottom: 10px; color: #e2e8f0 !important; font-size: .98rem; line-height: 1.6; }
.nv-dots li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--nv-teal); }
.nv-card-icon { width: 50px; height: 50px; border-radius: 13px; background: rgba(45,212,191,.15); color: var(--nv-teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nv-card-icon svg { width: 24px; height: 24px; }
.nv-card-h { display: flex; gap: 16px; align-items: flex-start; }

.nv-subh { text-align: center; color: var(--nv-teal) !important; font-size: 1.5rem; font-weight: 700; margin: 50px 0 24px; }

/* Certifications / courses grid */
.nv-cert-box { border: 1px solid var(--nv-border); border-radius: 18px; padding: 26px; background: var(--nv-surface); }
.nv-cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px,100%),1fr)); gap: 14px; }
.nv-cert { display: flex; align-items: center; gap: 12px; border: 1px solid var(--nv-border); border-radius: 12px; padding: 16px 18px; background: var(--nv-bg-2); }
.nv-cert .m { color: var(--nv-teal); flex-shrink: 0; }
.nv-cert .m svg { width: 20px; height: 20px; }
.nv-cert span.nm { color: #ffffff !important; font-size: .95rem; font-weight: 500; }
.nv-cert.hasimg { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; }
.nv-cert .ci { height: 130px; overflow: hidden; } .nv-cert .ci img { width: 100%; height: 100%; object-fit: cover; }
.nv-cert .cb { padding: 16px 18px; }

/* ---- Projects ---- */
.nv-projx { display: grid; grid-template-columns: 1.3fr .7fr; gap: 36px; align-items: center; margin-bottom: 60px; }
.nv-projx:nth-child(even) { grid-template-columns: .7fr 1.3fr; }
.nv-projx:nth-child(even) .nv-projx-shot { order: 2; }
.nv-projx-shot { border-radius: 20px; overflow: hidden; border: 1px solid var(--nv-border); background: linear-gradient(135deg,#0c2a26,#0a1a28); aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 36px -12px rgba(0,0,0,0.6); }
.nv-projx-shot img { width: 100%; height: 100%; object-fit: cover; }
.nv-projx-shot .ph { font-family: var(--nv-display); font-size: 3rem; font-weight: 800; color: rgba(45,212,191,.85); }
.nv-projx-info h3 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: #ffffff !important; font-size: 1.7rem; font-weight: 800; margin: 0 0 14px; border-left: 4px solid var(--nv-teal); padding-left: 12px; }
.nv-checkout { font-size: .8rem; font-weight: 600; padding: 6px 14px; border: 1px solid var(--nv-border); border-radius: 8px; color: #ffffff !important; background: rgba(45,212,191,.12); white-space: nowrap; transition: all .2s; }
.nv-checkout:hover { border-color: var(--nv-teal); color: var(--nv-teal) !important; background: rgba(45,212,191,.2); }
.nv-projx-info > p { color: #cbd5e1 !important; margin: 0 0 16px; font-size: 1rem; line-height: 1.7; }
.nv-plus { list-style: none; margin: 0 0 18px; padding: 0; }
.nv-plus li { position: relative; padding-left: 24px; margin-bottom: 12px; color: #e2e8f0 !important; font-size: .98rem; }
.nv-plus li::before { content: "✦"; position: absolute; left: 0; color: var(--nv-teal); }
.nv-pill-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.nv-ptag { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; padding: 7px 15px; border-radius: 999px; background: rgba(45,212,191,.12) !important; border: 1px solid rgba(45,212,191,.38) !important; color: #ffffff !important; font-weight: 600; }

/* ---- Skills (stack cards) ---- */
.nv-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 22px; }
.nv-stack-card { border: 1px solid var(--nv-border); border-radius: 20px; padding: 28px; background: var(--nv-surface); box-shadow: 0 16px 36px -12px rgba(0,0,0,0.6); }
.nv-stack-card .sh { text-align: center; margin-bottom: 22px; }
.nv-stack-card .sh .si { width: 56px; height: 56px; border-radius: 14px; background: rgba(45,212,191,.16); color: var(--nv-teal); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; border: 1px solid var(--nv-border); }
.nv-stack-card .sh .si svg { width: 26px; height: 26px; }
.nv-stack-card .sh h3 { color: var(--nv-teal) !important; font-size: 1.15rem; margin: 0; }
.nv-stack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nv-stack-item { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 12px; border: 1px solid var(--nv-border); border-radius: 12px; background: var(--nv-bg-2); transition: transform .18s, border-color .18s; }
.nv-stack-item:hover { transform: translateY(-3px); border-color: rgba(45,212,191,.5); box-shadow: 0 12px 28px -18px var(--nv-teal); }
.nv-stack-item .ic { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.nv-stack-item .ic img { width: 32px; height: 32px; }
.nv-glyph { display: none; font-family: var(--nv-mono); font-weight: 700; font-size: 1.1rem; color: var(--nv-teal); letter-spacing: -1px; }
.nv-stack-item.noicon .ic img { display: none; }
.nv-stack-item.noicon .nv-glyph { display: block; }
.nv-stack-item span.nm { color: #ffffff !important; font-size: .92rem; text-align: center; font-weight: 600; }

/* ---- Contact connect cards ---- */
.nv-connect { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px,100%),1fr)); gap: 22px; }
.nv-conn { border: 1px solid var(--nv-border); border-radius: 18px; padding: 30px; text-align: center; background: var(--nv-surface); box-shadow: 0 16px 36px -12px rgba(0,0,0,0.6); }
.nv-conn .ci { width: 64px; height: 64px; border-radius: 16px; background: var(--nv-bg-2); color: var(--nv-blue); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; border: 1px solid var(--nv-border); }
.nv-conn .ci svg { width: 28px; height: 28px; }
.nv-conn h3 { color: var(--nv-teal) !important; font-size: 1.25rem; margin: 0 0 6px; }
.nv-conn .sub { color: #cbd5e1 !important; font-size: .95rem; margin-bottom: 18px; word-break: break-word; }
.nv-conn .nv-btn-teal { width: 100%; justify-content: center; padding: 12px; }

/* ---- Footer ---- */
.nv-footer { border-top: 1px solid var(--nv-border); padding: 60px 30px; text-align: center; position: relative; z-index: 1; }
.nv-footer .fav { width: 84px; height: 84px; border-radius: 50%; padding: 4px; background: conic-gradient(from 0deg, var(--nv-teal), var(--nv-blue), var(--nv-teal)); margin: 0 auto 16px; }
.nv-footer .fav img, .nv-footer .fav .ph { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--nv-bg-2); display: flex; align-items: center; justify-content: center; color: var(--nv-teal); font-weight: 800; font-family: var(--nv-display); }
.nv-footer .fname { color: #ffffff !important; font-weight: 700; font-size: 1.25rem; }
.nv-footer .frole { color: #cbd5e1 !important; margin-top: 4px; font-size: .98rem; }
.nv-footer .fsocs { display: flex; gap: 20px; justify-content: center; margin: 22px 0; }
.nv-footer .fsocs a { color: #94a3b8 !important; transition: color .2s, transform .2s; }
.nv-footer .fsocs a:hover { color: var(--nv-teal) !important; transform: translateY(-2px); }
.nv-footer .fsocs svg { width: 22px; height: 22px; }
.nv-footer .copy { color: #94a3b8 !important; font-size: .88rem; border-top: 1px solid var(--nv-border); padding-top: 22px; max-width: 360px; margin: 22px auto 0; }
.nv-footer .copy a { color: var(--nv-teal) !important; }

/* back to top */
.nv-top { position: fixed; right: 24px; bottom: 26px; z-index: 40; width: 46px; height: 46px; border-radius: 12px; background: var(--nv-teal); color: #04201c !important; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px -8px var(--nv-teal); }

/* reveal */
.nv-reveal { opacity: 0; transform: translateY(20px); }
.nv-reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }

@media (max-width: 820px) {
    .nv-links { display: none; }
    .nv-burger { display: flex; }
    .nv-links.show { display: flex; position: absolute; top: 100%; right: 30px; left: 30px; flex-direction: column; gap: 8px; background: var(--nv-bg-2); border: 1px solid var(--nv-border); border-radius: 14px; padding: 14px; }
    .nv-stack-grid { grid-template-columns: 1fr; }
    .nv-card-meta { text-align: left; }
    .nv-projx, .nv-projx:nth-child(even) { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
    .nv-projx:nth-child(even) .nv-projx-shot { order: 0; }
}
@media (max-width: 520px) { .nv-wrap, .nv-nav-in { padding-left: 18px; padding-right: 18px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .nv-reveal { opacity: 1; transform: none; } * { animation: none !important; transition: none !important; } }



/* --- Template: codeflow --- */
/* ===========================================================================
   Portfolio "Codeflow" theme — deep-navy/blue developer portfolio with a
   sticky scroll-progress "code tab" bar, typewriter hero, and high-contrast
   glassmorphism cards. High-contrast typography & luminous accents.
   =========================================================================== */
:root, body[data-template="codeflow"] {
    --cf-bg: #070c18;
    --cf-bg-2: #0c1424;
    --cf-surface: rgba(12, 20, 36, 0.88);
    --cf-surface-2: rgba(18, 30, 54, 0.92);
    --cf-border: rgba(90, 130, 210, 0.35);
    --cf-ink: #ffffff;
    --cf-dim: #e2e8f0;
    --cf-faint: #94a3b8;
    --cf-blue: #3b82f6;
    --cf-cyan: #38bdf8;
    --cf-green: #34d399;
    --cf-yellow: #facc15;
    --cf-radius: 16px;
    --cf-max: 1180px;
    --cf-font: 'Inter', system-ui, -apple-system, sans-serif;
    --cf-mono: 'JetBrains Mono', ui-monospace, monospace;
    --cf-grad: linear-gradient(90deg, #60a5fa, #38bdf8);
}

body[data-template="codeflow"] {
    margin: 0;
    font-family: var(--cf-font);
    color: var(--cf-dim) !important;
    background: var(--cf-bg) !important;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
body[data-template="codeflow"] .bg-fx,
body[data-template="codeflow"] .grid-overlay {
    display: none !important;
}
body[data-template="codeflow"] a { color: inherit; text-decoration: none; }
body[data-template="codeflow"] img { max-width: 100%; }
body[data-template="codeflow"] h1,
body[data-template="codeflow"] h2,
body[data-template="codeflow"] h3,
body[data-template="codeflow"] h4 {
    color: #ffffff !important;
}
body[data-template="codeflow"] p,
body[data-template="codeflow"] li {
    color: #cbd5e1 !important;
}

.cf-wrap { max-width: var(--cf-max); margin: 0 auto; padding: 0 30px; }
.cf-section { padding: 90px 0; position: relative; }
.cf-title { text-align: center; font-size: clamp(2rem,4.5vw,3.1rem); font-weight: 800; margin: 0 0 8px; background: var(--cf-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cf-sub { text-align: center; color: #94a3b8 !important; margin: 0 0 50px; font-size: 1.05rem; }

/* ---- Scroll-progress "code tab" bar ---- */
.cf-prog { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 14px; padding: 8px 14px;
    background: rgba(7, 12, 24, 0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cf-border); font-family: var(--cf-mono); font-size: 12.5px; }
.cf-prog .pct { color: var(--cf-green); white-space: nowrap; font-weight: 700; }
.cf-keys { position: relative; flex: 1; overflow: hidden; border-radius: 6px; background: rgba(255,255,255,.06); border: 1px solid var(--cf-border); padding: 5px 12px; min-width: 0; }
.cf-keys-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, rgba(59,130,246,.5), rgba(56,189,248,.5)); transition: width .15s ease; }
.cf-keys-text { position: relative; white-space: nowrap; color: #e2e8f0 !important; overflow-x: auto; scrollbar-width: none; }
.cf-keys-text::-webkit-scrollbar { display: none; }
.cf-key { color: #94a3b8 !important; }
.cf-key.on { color: #ffffff !important; font-weight: 600; }
.cf-cursor { display: inline-block; width: 7px; background: var(--cf-cyan); margin-left: 2px; animation: cfBlink 1s step-end infinite; }
@keyframes cfBlink { 50% { opacity: 0; } }
.cf-remain { color: #94a3b8 !important; white-space: nowrap; }
.cf-prog .chev { width: 26px; height: 22px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--cf-border); border-radius: 6px; color: #e2e8f0; }
@media (max-width: 720px) { .cf-remain { display: none; } }

/* ---- Navbar ---- */
.cf-nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
.cf-brand { font-size: 1.3rem; font-weight: 800; background: var(--cf-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cf-navlinks { display: flex; gap: 4px; background: rgba(12, 20, 36, 0.88); border: 1px solid var(--cf-border); border-radius: 999px; padding: 5px; }
.cf-navlinks a { color: #cbd5e1 !important; font-size: .92rem; font-weight: 500; padding: 8px 18px; border-radius: 999px; transition: all .2s; }
.cf-navlinks a:hover, .cf-navlinks a.on { color: #ffffff !important; background: rgba(59,130,246,.25); }
.cf-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.cf-burger span { width: 24px; height: 2px; background: #ffffff; border-radius: 2px; }

/* ---- Hero ---- */
.cf-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; min-height: 78vh; }
.cf-hey { color: #60a5fa !important; font-weight: 700; font-size: 1.2rem; margin-bottom: 14px; letter-spacing: .02em; }
.cf-type { font-family: var(--cf-mono); font-weight: 700; color: #ffffff !important; font-size: clamp(2.2rem,5vw,3.6rem); margin: 0 0 16px; min-height: 1.2em; text-shadow: 0 0 24px rgba(56,189,248,.35); }
.cf-type .cur { color: var(--cf-cyan); animation: cfBlink 1s step-end infinite; }
.cf-headline { font-size: clamp(1.4rem,3vw,2rem); font-weight: 700; margin: 0 0 22px; background: var(--cf-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cf-lead { color: #cbd5e1 !important; font-size: 1.08rem; max-width: 56ch; margin: 0 0 28px; line-height: 1.7; }
.cf-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.cf-btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .95rem; padding: 13px 24px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; transition: all .2s; }
.cf-btn-blue { background: var(--cf-blue); color: #ffffff !important; font-weight: 700; box-shadow: 0 8px 26px -8px var(--cf-blue); }
.cf-btn-blue:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -8px var(--cf-blue); }
.cf-btn-outline { border-color: var(--cf-blue); color: var(--cf-cyan) !important; font-weight: 600; }
.cf-btn-outline:hover { background: rgba(59,130,246,.15); transform: translateY(-2px); }
.cf-btn-ghost { background: var(--cf-surface); color: #ffffff !important; border-color: var(--cf-border); }
.cf-hero-socials { display: flex; gap: 16px; margin-top: 26px; }
.cf-hero-socials a { color: #94a3b8 !important; transition: color .2s, transform .2s; }
.cf-hero-socials a:hover { color: var(--cf-cyan) !important; transform: translateY(-3px); }
.cf-hero-socials svg { width: 22px; height: 22px; }
.cf-hero-photo { justify-self: center; width: 100%; max-width: 420px; aspect-ratio: 1; border-radius: 22px; object-fit: cover; border: 1px solid var(--cf-border); box-shadow: 0 30px 70px -30px rgba(59,130,246,.5); }
.cf-hero-photo.ph { display: flex; align-items: center; justify-content: center; font-family: var(--cf-mono); font-weight: 800; font-size: 4rem; color: var(--cf-cyan); background: var(--cf-bg-2); }
.cf-down { display: flex; justify-content: center; margin-top: 40px; }
.cf-down a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--cf-border); display: flex; align-items: center; justify-content: center; color: #e2e8f0; animation: cfBob 1.8s ease-in-out infinite; }
@keyframes cfBob { 50% { transform: translateY(8px); } }

/* ---- About ---- */
.cf-about { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.cf-card { background: rgba(12, 20, 36, 0.88) !important; border: 1px solid var(--cf-border) !important; border-radius: 18px; padding: 28px 30px; color: #e2e8f0 !important; box-shadow: 0 16px 36px -12px rgba(0,0,0,0.6); }
.cf-about p { color: #cbd5e1 !important; margin: 0 0 18px; line-height: 1.7; }
.cf-info { display: flex; gap: 14px; margin-bottom: 16px; }
.cf-info .ic { color: var(--cf-cyan); flex-shrink: 0; margin-top: 2px; }
.cf-info .ic svg { width: 20px; height: 20px; }
.cf-info .lbl { color: #ffffff !important; font-weight: 700; }
.cf-info .val { color: #cbd5e1 !important; font-size: .95rem; }
.cf-core-title { color: #ffffff !important; font-weight: 700; margin: 20px 0 12px; font-size: 1.1rem; }
.cf-tags { display: flex; flex-wrap: wrap; gap: 9px; }
.cf-tag { font-size: .84rem; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(56,189,248,.4) !important; color: var(--cf-cyan) !important; background: rgba(56,189,248,.12) !important; font-weight: 600; }
.cf-edu-h { color: #ffffff !important; font-size: 1.4rem; font-weight: 700; margin: 0 0 18px; }
.cf-edu { background: rgba(12, 20, 36, 0.88); border: 1px solid var(--cf-border); border-radius: 14px; padding: 22px 24px; margin-bottom: 16px; }
.cf-edu h4 { color: #ffffff !important; font-size: 1.15rem; margin: 0 0 4px; font-weight: 700; }
.cf-edu .inst { color: var(--cf-cyan) !important; font-weight: 600; }
.cf-edu .row { display: flex; justify-content: space-between; gap: 12px; color: #94a3b8 !important; font-size: .9rem; margin-top: 10px; }

/* ---- Skills (stack cards) ---- */
.cf-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 22px; }
.cf-stack-card { border: 1px solid var(--cf-border); border-radius: 20px; padding: 28px; background: rgba(12, 20, 36, 0.88); box-shadow: 0 16px 36px -12px rgba(0,0,0,0.6); }
.cf-stack-head { text-align: center; margin-bottom: 22px; }
.cf-stack-ic { width: 56px; height: 56px; border-radius: 14px; background: rgba(59,130,246,.16); color: var(--cf-cyan); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; border: 1px solid var(--cf-border); }
.cf-stack-ic svg { width: 26px; height: 26px; }
.cf-stack-head h3 { color: var(--cf-cyan) !important; font-size: 1.15rem; margin: 0; }
.cf-stack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cf-stack-item { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 12px; border: 1px solid var(--cf-border); border-radius: 12px; background: var(--cf-bg-2); transition: transform .18s, border-color .18s, box-shadow .18s; }
.cf-stack-item:hover { transform: translateY(-3px); border-color: rgba(56,189,248,.5); box-shadow: 0 12px 28px -18px var(--cf-cyan); }
.cf-stack-item .ic { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.cf-stack-item .ic img { width: 32px; height: 32px; }
.cf-stack-item.noicon .ic img { display: none; }
.cf-stack-item.noicon .cf-glyph { display: block; }
.cf-stack-item span.nm { color: #ffffff !important; font-size: .92rem; text-align: center; font-weight: 600; }

/* ---- Timeline ---- */
.cf-tl { position: relative; }
.cf-tl::before { content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px; transform: translateX(-50%); background: var(--cf-border); }
.cf-tl-item { position: relative; width: 50%; padding: 0 44px 36px 0; }
.cf-tl-item:nth-child(even) { margin-left: 50%; padding: 0 0 36px 44px; }
.cf-tl-node { position: absolute; top: 6px; right: -6px; width: 13px; height: 13px; border-radius: 50%; background: var(--cf-blue); box-shadow: 0 0 0 4px var(--cf-bg); }
.cf-tl-item:nth-child(even) .cf-tl-node { right: auto; left: -6px; }
.cf-tl.gold .cf-tl-node { background: var(--cf-yellow); }
.cf-tl-card { background: rgba(12, 20, 36, 0.88); border: 1px solid var(--cf-border); border-radius: 16px; padding: 24px 26px; box-shadow: 0 16px 36px -12px rgba(0,0,0,0.6); }
.cf-tl-head { display: flex; gap: 12px; align-items: flex-start; }
.cf-tl-ic { width: 42px; height: 42px; border-radius: 11px; background: rgba(59,130,246,.18); color: var(--cf-cyan); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cf-tl-ic svg { width: 20px; height: 20px; }
.cf-tl-card h3 { color: #ffffff !important; font-size: 1.2rem; margin: 0; font-weight: 700; }
.cf-tl-card .org { color: var(--cf-cyan) !important; font-size: .95rem; font-weight: 600; }
.cf-tl-card p { color: #cbd5e1 !important; font-size: .98rem; margin: 14px 0 0; line-height: 1.7; }
.cf-yr { display: inline-block; margin-top: 16px; padding: 5px 14px; border-radius: 999px; border: 1px solid rgba(56,189,248,.4); color: var(--cf-cyan) !important; font-size: .84rem; font-weight: 700; background: rgba(56,189,248,.1); }
.cf-tl.gold .cf-yr { border-color: rgba(250,204,21,.5); color: var(--cf-yellow) !important; background: rgba(250,204,21,.1); }

/* ---- Contact ---- */
.cf-contact { display: grid; grid-template-columns: 360px 1fr; gap: 30px; align-items: start; }
.cf-cinfo-card { background: rgba(12, 20, 36, 0.88); border: 1px solid var(--cf-border); border-radius: 14px; padding: 20px 24px; display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.cf-cinfo-card .ic { width: 46px; height: 46px; border-radius: 12px; background: rgba(59,130,246,.18); color: var(--cf-cyan); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cf-cinfo-card .ic svg { width: 20px; height: 20px; }
.cf-cinfo-card .lbl { color: #ffffff !important; font-weight: 700; }
.cf-cinfo-card .val { color: #cbd5e1 !important; font-size: .95rem; word-break: break-word; }
.cf-connect-h { color: #ffffff !important; font-weight: 700; margin: 24px 0 14px; font-size: 1.1rem; }
.cf-connect-socs { display: flex; gap: 14px; }
.cf-connect-socs a { width: 46px; height: 46px; border-radius: 50%; background: rgba(12, 20, 36, 0.88); border: 1px solid var(--cf-border); color: #cbd5e1 !important; display: flex; align-items: center; justify-content: center; transition: all .2s; }
.cf-connect-socs a:hover { color: var(--cf-cyan) !important; border-color: var(--cf-cyan); transform: translateY(-2px); }
.cf-connect-socs svg { width: 20px; height: 20px; }
.cf-formcard { background: rgba(12, 20, 36, 0.88); border: 1px solid var(--cf-border); border-radius: 18px; padding: 30px; }
.cf-formcard label { display: block; color: #ffffff !important; font-weight: 600; font-size: .9rem; margin: 0 0 7px; }
.cf-formcard .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cf-formcard .field { margin-bottom: 18px; }
.cf-input, .cf-textarea { width: 100%; background: var(--cf-bg-2); border: 1px solid var(--cf-border); border-radius: 10px; color: #ffffff !important; padding: 12px 14px; font-family: inherit; font-size: .95rem; }
.cf-input:focus, .cf-textarea:focus { outline: none; border-color: var(--cf-blue); }
.cf-textarea { min-height: 130px; resize: vertical; }
.cf-formcard .cf-btn-blue { width: 100%; justify-content: center; border: none; padding: 14px; }

/* ---- Footer ---- */
.cf-footer { text-align: center; padding: 30px; border-top: 1px solid var(--cf-border); color: #94a3b8 !important; font-size: .88rem; }
.cf-footer a { color: var(--cf-cyan) !important; }

.cf-reveal { opacity: 0; transform: translateY(20px); }
.cf-reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }

@media (max-width: 900px) {
    .cf-hero { grid-template-columns: 1fr; gap: 30px; text-align: center; min-height: auto; padding-top: 30px; }
    .cf-hero-photo { order: -1; max-width: 300px; }
    .cf-actions, .cf-hero-socials { justify-content: center; }
    .cf-about, .cf-contact { grid-template-columns: 1fr; }
    .cf-tl::before { left: 18px; }
    .cf-tl-item, .cf-tl-item:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 30px 44px; }
    .cf-tl-node, .cf-tl-item:nth-child(even) .cf-tl-node { left: 12px; right: auto; }
    .cf-navlinks { display: none; }
    .cf-burger { display: flex; }
}
@media (max-width: 520px) { .cf-wrap { padding: 0 18px; } .cf-formcard .row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .cf-reveal { opacity: 1; transform: none; } * { animation: none !important; transition: none !important; } }



/* --- Template: wave --- */
/* ===========================================================================
   Portfolio "Wave" theme — emerald-neon on black with an animated flowing
   wave-lines background. High-contrast typography & luminous accents.
   =========================================================================== */
:root, body[data-template="wave"] {
    --w-bg: #000000;
    --w-bg-2: #050a08;
    --w-surface: rgba(8, 20, 15, 0.9);
    --w-border: rgba(46, 230, 166, 0.32);
    --w-ink: #ffffff;
    --w-dim: #ecfdf5;
    --w-faint: #a7f3d0;
    --w-green: #2ee6a6;
    --w-green-2: #19e68c;
    --w-blue: #38bdf8;
    --w-radius: 16px;
    --w-max: 1180px;
    --w-font: 'Inter', system-ui, -apple-system, sans-serif;
    --w-display: 'Poppins', 'Inter', sans-serif;
}

body[data-template="wave"] {
    margin: 0;
    font-family: var(--w-font);
    color: var(--w-dim) !important;
    background: var(--w-bg) !important;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
body[data-template="wave"] .bg-fx,
body[data-template="wave"] .grid-overlay {
    display: none !important;
}
body[data-template="wave"] a { color: inherit; text-decoration: none; }
body[data-template="wave"] img { max-width: 100%; }
body[data-template="wave"] h1,
body[data-template="wave"] h2,
body[data-template="wave"] h3,
body[data-template="wave"] h4 {
    font-family: var(--w-display);
    color: #ffffff !important;
}
body[data-template="wave"] p,
body[data-template="wave"] li {
    color: #d1fae5 !important;
}

.w-wrap { max-width: var(--w-max); margin: 0 auto; padding: 0 30px; }
.w-section { padding: 90px 0; position: relative; z-index: 1; }
.w-head { text-align: center; margin-bottom: 54px; }
.w-head h2 { font-size: clamp(2rem,4.5vw,3rem); font-weight: 800; margin: 0; color: var(--w-green) !important; }
.w-head p { color: #a7f3d0 !important; margin: 12px 0 0; font-size: 1.1rem; line-height: 1.7; }

/* persistent left email rail + back-to-top */
.w-rail { position: fixed; left: 16px; bottom: 30px; z-index: 30; writing-mode: vertical-rl; transform: rotate(180deg); color: var(--w-green); font-size: 13px; letter-spacing: .12em; font-weight: 700; }
.w-rail::after { content: ""; display: block; width: 1px; height: 90px; background: linear-gradient(var(--w-green), transparent); margin: 14px auto 0; }
.w-top { position: fixed; right: 24px; bottom: 28px; z-index: 30; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--w-border); background: rgba(0,0,0,.8); color: var(--w-green); display: flex; align-items: center; justify-content: center; }
.w-top:hover { border-color: var(--w-green); box-shadow: 0 0 18px -4px var(--w-green); }

/* ---- Hero ---- */
.w-hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
#w-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.w-hero-inner { position: relative; z-index: 2; max-width: var(--w-max); margin: 0 auto; padding: 0 60px; width: 100%; }
.w-hello { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.w-hello .hi { font-family: var(--w-display); font-weight: 700; color: #ffffff !important; font-size: clamp(1.8rem,4vw,3rem); }
.w-hello .bar { width: 4px; align-self: stretch; min-height: 90px; background: var(--w-green); box-shadow: 0 0 16px var(--w-green); }
.w-name { font-family: var(--w-display); font-weight: 800; text-transform: uppercase; font-size: clamp(3rem,9vw,7rem); line-height: .95; letter-spacing: .01em; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.75); }
.w-tagline { color: #e2e8f0 !important; font-size: 1.18rem; margin: 30px 0 28px; max-width: 60ch; line-height: 1.7; }
.w-btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--w-display); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; padding: 13px 28px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; transition: all .2s; }
.w-btn-blue { background: var(--w-blue); color: #ffffff !important; font-weight: 700; box-shadow: 0 0 26px -4px var(--w-blue); }
.w-btn-blue:hover { box-shadow: 0 0 38px -2px var(--w-blue); transform: translateY(-2px); }
.w-btn-green { border-color: var(--w-green); color: var(--w-green) !important; font-weight: 700; }
.w-btn-green:hover { background: rgba(46,230,166,.15); box-shadow: 0 0 22px -6px var(--w-green); transform: translateY(-2px); }
.w-btn-dark { background: #0c1814; color: #ffffff !important; border-color: var(--w-border); }
.w-btn-dark:hover { border-color: var(--w-green); }

/* ---- About ---- */
.w-about-lead { text-align: center; font-family: var(--w-display); font-weight: 700; color: #ffffff !important; font-size: clamp(1.6rem,3.4vw,2.4rem); max-width: 22ch; margin: 0 auto 44px; line-height: 1.25; }
.w-about-lead .g { color: var(--w-green) !important; }
.w-about { display: grid; grid-template-columns: 360px 1fr; gap: 50px; align-items: center; }
.w-about-photo { width: 100%; aspect-ratio: 4/4; border-radius: 18px; object-fit: cover; filter: grayscale(1); border: 1px solid var(--w-border); }
.w-about-photo.ph { display: flex; align-items: center; justify-content: center; font-family: var(--w-display); font-weight: 800; font-size: 4rem; color: var(--w-green); background: #08140f; filter: none; }
.w-about-text p { color: #e2e8f0 !important; font-size: 1.08rem; margin: 0 0 16px; line-height: 1.8; }
.w-about-text b { color: var(--w-green) !important; font-weight: 700; }
.w-socials { display: flex; gap: 14px; margin: 24px 0; }
.w-soc { width: 46px; height: 46px; border-radius: 50%; background: #ffffff; color: #111111; display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.w-soc:hover { transform: translateY(-3px); }
.w-soc svg { width: 20px; height: 20px; }

/* ---- Journey timeline ---- */
.w-timeline { position: relative; }
.w-timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); background: linear-gradient(var(--w-green), var(--w-green-2)); }
.w-tl { position: relative; width: 50%; padding: 0 46px 40px 0; }
.w-tl:nth-child(even) { margin-left: 50%; padding: 0 0 40px 46px; }
.w-tl-dot { position: absolute; top: 6px; right: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--w-green); box-shadow: 0 0 0 5px var(--w-bg), 0 0 16px var(--w-green); }
.w-tl:nth-child(even) .w-tl-dot { right: auto; left: -9px; }
.w-tl-card { border: 1px solid var(--w-border); border-radius: 18px; padding: 24px 28px; background: rgba(8, 20, 15, 0.9) !important; color: #ecfdf5 !important; box-shadow: 0 16px 36px -12px rgba(0,0,0,0.7); }
.w-tl-card h3 { color: var(--w-green) !important; font-size: 1.25rem; font-weight: 700; margin: 0 0 4px; }
.w-tl-date { color: #a7f3d0 !important; font-size: .92rem; margin-bottom: 12px; font-weight: 600; }
.w-tl-card p, .w-tl-card li { color: #d1fae5 !important; font-size: 1rem; line-height: 1.7; }
.w-tl-card ul { margin: 0; padding-left: 18px; }

/* ---- Skills ---- */
.w-skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px,100%),1fr)); gap: 52px 70px; }
.w-skcat-head { font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: .22em; color: #ffffff !important; font-size: 1.1rem; font-weight: 700; margin: 0 0 26px; padding-bottom: 14px; border-bottom: 1px solid var(--w-border); }

/* ---- Projects ---- */
.w-showcase { display: grid; gap: 56px; }
.w-show { display: grid; grid-template-columns: 1.15fr .85fr; gap: 42px; align-items: center; }
.w-show:nth-child(even) { grid-template-columns: .85fr 1.15fr; }
.w-show:nth-child(even) .w-show-media { order: 2; }
.w-show-media { border-radius: 18px; overflow: hidden; border: 1px solid var(--w-border); aspect-ratio: 16/10; background: linear-gradient(135deg,#07140f,#0d231b); display: flex; align-items: center; justify-content: center; transition: transform .25s, box-shadow .25s; box-shadow: 0 16px 36px -12px rgba(0,0,0,0.7); }
.w-show:hover .w-show-media { transform: translateY(-4px); box-shadow: 0 26px 60px -28px rgba(46,230,166,.5); }
.w-show-media img { width: 100%; height: 100%; object-fit: cover; }
.w-show-ph { font-family: var(--w-display); font-weight: 800; font-size: 3.4rem; color: rgba(46,230,166,.85); }
.w-show-info h3 { color: #ffffff !important; font-size: clamp(1.5rem,3vw,2rem); font-weight: 700; margin: 0 0 8px; }
.w-show-meta { color: #a7f3d0 !important; font-size: .92rem; margin-bottom: 14px; font-weight: 500; }
.w-show-bullets { margin: 0 0 18px; padding-left: 18px; }
.w-show-bullets li { color: #d1fae5 !important; font-size: 1rem; line-height: 1.7; margin-bottom: 6px; }

.w-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 20px; }
.w-tag { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; padding: 6px 14px; border-radius: 999px; background: rgba(46,230,166,.12) !important; border: 1px solid rgba(46,230,166,.4) !important; color: var(--w-green) !important; font-weight: 600; }
.w-chip { border: 1px solid rgba(46,230,166,.4) !important; border-radius: 999px; padding: 8px 16px; color: var(--w-green) !important; background: rgba(46,230,166,.12) !important; font-size: .92rem; font-weight: 600; }
.w-card { border: 1px solid var(--w-border); border-radius: 16px; padding: 24px; background: rgba(8, 20, 15, 0.9) !important; box-shadow: 0 16px 36px -12px rgba(0,0,0,0.7); }
.w-card h3 { color: var(--w-green) !important; font-size: 1.15rem; margin: 0 0 6px; }
.w-card .iss { color: #ffffff !important; font-weight: 600; font-size: .96rem; }
.w-card .meta { color: #a7f3d0 !important; font-size: .88rem; margin-top: 6px; }

/* ---- Contact ---- */
.w-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.w-connect h3 { color: var(--w-green) !important; font-size: 1.6rem; margin: 0 0 18px; }
.w-connect > p { color: #d1fae5 !important; margin: 0 0 26px; max-width: 42ch; line-height: 1.7; }
.w-cinfo { display: flex; gap: 16px; margin-bottom: 22px; align-items: center; }
.w-cinfo .ic { width: 46px; height: 46px; border-radius: 50%; background: var(--w-green); color: #04130d !important; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; }
.w-cinfo .ic svg { width: 20px; height: 20px; }
.w-cinfo .lbl { color: #a7f3d0 !important; font-size: .88rem; }
.w-cinfo .val { color: #ffffff !important; font-weight: 700; font-size: 1rem; }
.w-formcard { background: rgba(8, 20, 15, 0.94) !important; border: 1px solid var(--w-border) !important; border-radius: 18px; padding: 32px; box-shadow: 0 16px 36px -12px rgba(0,0,0,0.7); }
.w-formcard label { display: block; color: #ecfdf5 !important; font-weight: 600; font-size: .88rem; margin: 0 0 6px; }
.w-formcard label .req { color: #f87171; }
.w-formcard .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.w-formcard .field { margin-bottom: 18px; }
.w-input, .w-textarea, .w-select { width: 100%; background: #040c08 !important; border: 1px solid var(--w-border) !important; border-radius: 9px; color: #ffffff !important; padding: 12px 14px; font-family: inherit; font-size: .95rem; }
.w-input:focus, .w-textarea:focus, .w-select:focus { outline: none; border-color: var(--w-green); }
.w-textarea { min-height: 120px; resize: vertical; }
.w-formcard .w-btn-green { width: 100%; justify-content: center; color: #04130d !important; background: var(--w-green); border: none; padding: 14px; font-weight: 700; }

/* ---- Footer ---- */
.w-footer { text-align: center; padding: 70px 20px; border-top: 1px solid var(--w-border); }
.w-footer p { color: #a7f3d0 !important; margin: 0 0 14px; }
.w-footer .mail { font-family: var(--w-display); font-weight: 800; color: #ffffff !important; font-size: clamp(1.4rem,3.5vw,2.4rem); transition: color .2s; }
.w-footer .mail:hover { color: var(--w-green) !important; }
.w-footer .built { margin-top: 30px; font-size: .88rem; color: #a7f3d0 !important; }
.w-footer .built a { color: var(--w-green) !important; }

.w-reveal { opacity: 0; transform: translateY(22px); }
.w-reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }

@media (max-width: 900px) {
    .w-hero-inner { padding: 0 30px; }
    .w-about { grid-template-columns: 1fr; gap: 30px; }
    .w-about-photo { max-width: 320px; margin: 0 auto; }
    .w-contact-grid { grid-template-columns: 1fr; }
    .w-timeline::before { left: 18px; }
    .w-tl, .w-tl:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 32px 44px; }
    .w-tl-dot, .w-tl:nth-child(even) .w-tl-dot { left: 9px; right: auto; }
    .w-skills-grid { gap: 32px; }
    .w-show, .w-show:nth-child(even) { grid-template-columns: 1fr; gap: 22px; }
    .w-show:nth-child(even) .w-show-media { order: 0; }
}
@media (max-width: 520px) {
    .w-wrap { padding: 0 18px; }
    .w-formcard .row { grid-template-columns: 1fr; }
    .w-rail { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .w-reveal { opacity: 1; transform: none; } * { transition: none !important; } }



/* --- Template: assistant --- */
/* ===========================================================================
   Portfolio "Assistant" theme — ChatGPT-style portfolio with a working AI assistant.
   High-contrast typography & luminous accents.
   =========================================================================== */
:root, body[data-template="assistant"] {
    --as-bg: #1c1c1f;
    --as-side: #131316;
    --as-input: #28282c;
    --as-border: #3b3b42;
    --as-hover: #26262b;
    --as-text: #ffffff;
    --as-muted: #e2e8f0;
    --as-faint: #94a3b8;
    --as-accent: #10a37f;
    --as-user: #2c2c32;
    --as-link: #38bdf8;
    --as-divider: rgba(255,255,255,.10);
    --as-send-bg: #ffffff;
    --as-send-fg: #131316;
}
html.as-light, body[data-template="assistant"].as-light {
    --as-bg: #ffffff;
    --as-side: #f8fafc;
    --as-input: #ffffff;
    --as-border: #e2e8f0;
    --as-hover: #f1f5f9;
    --as-text: #0f172a;
    --as-muted: #334155;
    --as-faint: #64748b;
    --as-accent: #0d8a6a;
    --as-user: #f1f5f9;
    --as-link: #0b66c3;
    --as-divider: rgba(0,0,0,.09);
    --as-send-bg: #0f172a;
    --as-send-fg: #ffffff;
}
body[data-template="assistant"] {
    font-family: 'Inter', 'Söhne', system-ui, -apple-system, Segoe UI, sans-serif;
    background: var(--as-bg) !important;
    color: #ffffff !important;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}
body[data-template="assistant"] .bg-fx,
body[data-template="assistant"] .grid-overlay {
    display: none !important;
}
body[data-template="assistant"] a { color: var(--as-link); text-decoration: none; }
body[data-template="assistant"] a:hover { text-decoration: underline; }
body[data-template="assistant"] p,
body[data-template="assistant"] li {
    color: #f1f5f9 !important;
}
body[data-template="assistant"] h1,
body[data-template="assistant"] h2,
body[data-template="assistant"] h3,
body[data-template="assistant"] h4 {
    color: #ffffff !important;
}

.as-app { display: flex; height: 100vh; height: 100dvh; }

/* ---------- Sidebar ---------- */
.as-side {
    width: 268px; flex-shrink: 0; background: var(--as-side);
    display: flex; flex-direction: column; padding: 10px; gap: 4px;
    border-right: 1px solid var(--as-divider);
}
.as-newchat {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 11px 12px; border-radius: 10px; background: transparent; border: 1px solid var(--as-border);
    color: #ffffff !important; font-size: .92rem; font-weight: 600; cursor: pointer; font-family: inherit;
    transition: background .15s;
}
.as-newchat:hover { background: var(--as-hover); }
.as-newchat svg { width: 17px; height: 17px; }
.as-side-label { font-size: .74rem; color: #94a3b8 !important; padding: 14px 12px 6px; font-weight: 600; letter-spacing: .05em; }
.as-side-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.as-side-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px;
    color: #f1f5f9 !important; font-size: .9rem; cursor: pointer; background: transparent; border: none;
    text-align: left; width: 100%; font-family: inherit; transition: background .15s; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; font-weight: 500;
}
.as-side-item:hover { background: var(--as-hover); color: #ffffff !important; }
.as-side-item .ic { font-size: .95rem; flex-shrink: 0; }
.as-side-foot {
    display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; margin-top: 4px;
    border-top: 1px solid var(--as-divider); cursor: default;
}
.as-side-foot .av { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem;
    background: linear-gradient(135deg, #10a37f, #38bdf8); color: #fff; }
.as-side-foot .meta { overflow: hidden; }
.as-side-foot .meta b { display: block; font-size: .88rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #ffffff !important; }
.as-side-foot .meta span { font-size: .76rem; color: #cbd5e1 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* ---------- Main ---------- */
.as-main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
.as-top {
    display: flex; align-items: center; gap: 8px; padding: 12px 18px; font-size: 1rem; font-weight: 600;
    border-bottom: 1px solid var(--as-divider);
}
.as-top .pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; color: #ffffff; }
.as-top .pill:hover { background: var(--as-hover); }
.as-top .pill svg { width: 14px; height: 14px; color: #94a3b8; }
.as-top .badge { font-size: .74rem; color: #cbd5e1 !important; font-weight: 500; border: 1px solid rgba(255,255,255,0.2) !important; padding: 4px 10px; border-radius: 999px; }
.as-theme-btn { margin-left: auto; width: 34px; height: 34px; border-radius: 8px; border: none; background: transparent;
    color: #ffffff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s; }
.as-theme-btn:hover { background: var(--as-hover); }
.as-theme-btn svg { width: 18px; height: 18px; }
.as-theme-btn .ic-moon { display: none; }
.as-theme-btn .ic-sun { display: block; }
html.as-light, body[data-template="assistant"].as-light .as-theme-btn .ic-moon { display: block; }
html.as-light, body[data-template="assistant"].as-light .as-theme-btn .ic-sun { display: none; }

.as-scroll { flex: 1; overflow-y: auto; scroll-behavior: smooth; }
.as-thread { max-width: 760px; margin: 0 auto; padding: 26px 20px 16px; display: flex; flex-direction: column; gap: 26px; }

/* Hero */
.as-hero { text-align: center; padding: 8vh 12px 4vh; }
.as-hero .logo { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 18px; display: flex; align-items: center;
    justify-content: center; background: linear-gradient(135deg, #10a37f, #38bdf8); }
.as-hero .logo svg { width: 30px; height: 30px; color: #fff; }
.as-hero h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.3px; color: #ffffff !important; }
.as-hero p { color: #cbd5e1 !important; margin-top: 8px; font-size: 1rem; }

/* Messages */
.as-msg { display: flex; gap: 14px; animation: asIn .35s ease; }
@keyframes asIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.as-msg .av { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center;
    justify-content: center; font-weight: 700; font-size: .78rem; }
.as-msg.bot .av { background: linear-gradient(135deg, #10a37f, #38bdf8); color: #fff; }
.as-msg.bot .av svg { width: 17px; height: 17px; }
.as-msg .body { padding-top: 3px; line-height: 1.7; font-size: 1rem; min-width: 0; }
.as-msg .body p { margin: 0 0 10px; color: #f1f5f9 !important; font-size: 1rem; line-height: 1.7; }
.as-msg .body p:last-child { margin-bottom: 0; }
.as-msg .body h4 { font-size: 1.05rem; font-weight: 700; margin: 14px 0 6px; color: #ffffff !important; }
.as-msg .body ul { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 8px 0; }
.as-msg .body li { position: relative; padding-left: 18px; color: #f1f5f9 !important; font-size: 0.98rem; }
.as-msg .body li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--as-accent); }
.as-msg .body li b { font-weight: 700; color: #ffffff; }
.as-msg .body li .sub { color: #cbd5e1 !important; font-size: .92rem; }
.as-msg .body .tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.as-msg .body .tag { padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); font-size: .86rem; color: #ffffff; font-weight: 500; }
.as-msg .body .card-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.as-msg .body .card-links a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: #ffffff !important; font-size: .9rem; font-weight: 600; }
.as-msg .body .card-links a:hover { border-color: var(--as-accent); text-decoration: none; }
.as-msg .body .card-links a svg { width: 15px; height: 15px; }

.as-msg.user { justify-content: flex-end; }
.as-msg.user .bubble { background: var(--as-user); padding: 11px 16px; border-radius: 18px; font-size: 1rem; max-width: 80%; line-height: 1.6; color: #ffffff; border: 1px solid rgba(255,255,255,0.12); }

/* Suggestion chips */
.as-suggest { display: flex; flex-wrap: wrap; gap: 10px; max-width: 760px; margin: 4px auto 0; padding: 0 20px; }
.as-chip {
    padding: 10px 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.18) !important; background: rgba(255,255,255,0.05) !important;
    color: #ffffff !important; font-size: .9rem; cursor: pointer; font-family: inherit; transition: background .15s, border-color .15s; text-align: left;
}
.as-chip:hover { background: rgba(255,255,255,0.1) !important; border-color: var(--as-accent) !important; }
.as-chip .t { font-weight: 600; color: #ffffff !important; }
.as-chip .d { display: block; color: #cbd5e1 !important; font-size: .82rem; margin-top: 2px; }

/* Composer */
.as-composer { padding: 8px 20px 14px; }
.as-composer-inner { max-width: 760px; margin: 0 auto; }
.as-inputbar {
    display: flex; align-items: flex-end; gap: 8px; background: var(--as-input);
    border: 1px solid var(--as-border); border-radius: 26px; padding: 8px 8px 8px 18px;
}
.as-inputbar textarea {
    flex: 1; background: transparent; border: none; resize: none; color: #ffffff !important;
    font-family: inherit; font-size: 1rem; line-height: 1.5; max-height: 160px; padding: 8px 0; outline: none;
}
.as-inputbar textarea::placeholder { color: #94a3b8 !important; }
.as-send {
    width: 38px; height: 38px; border-radius: 50%; border: none; background: #ffffff; color: #131316;
    cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity .15s;
}
.as-send:hover { opacity: .88; }
.as-send:disabled { opacity: .3; cursor: default; }
.as-send svg { width: 18px; height: 18px; }
.as-disclaimer { text-align: center; color: #94a3b8 !important; font-size: .75rem; margin-top: 10px; }

/* Light mode overrides */
body[data-template="assistant"].as-light {
    color: #0f172a !important;
}
body[data-template="assistant"].as-light p,
body[data-template="assistant"].as-light li {
    color: #334155 !important;
}
body[data-template="assistant"].as-light h1,
body[data-template="assistant"].as-light h2,
body[data-template="assistant"].as-light h3,
body[data-template="assistant"].as-light h4 {
    color: #0f172a !important;
}
body[data-template="assistant"].as-light .as-msg .body p,
body[data-template="assistant"].as-light .as-msg .body li {
    color: #1e293b !important;
}
body[data-template="assistant"].as-light .as-msg .body li b {
    color: #0f172a !important;
}
body[data-template="assistant"].as-light .as-chip {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}
body[data-template="assistant"].as-light .as-chip .t {
    color: #0f172a !important;
}
body[data-template="assistant"].as-light .as-chip .d {
    color: #64748b !important;
}
body[data-template="assistant"].as-light .as-newchat {
    color: #0f172a !important;
    border-color: #e2e8f0;
}
body[data-template="assistant"].as-light .as-side-item {
    color: #1e293b !important;
}
body[data-template="assistant"].as-light .as-top .pill {
    color: #0f172a;
}
body[data-template="assistant"].as-light .as-side-foot .meta b {
    color: #0f172a !important;
}
body[data-template="assistant"].as-light .as-inputbar textarea {
    color: #0f172a !important;
}

@media (max-width: 820px) {
    .as-side { position: fixed; z-index: 50; height: 100%; transform: translateX(-100%); transition: transform .25s ease; box-shadow: 0 0 40px rgba(0,0,0,.5); }
    .as-app.nav-open .as-side { transform: translateX(0); }
    .as-burger { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
        border-radius: 8px; background: transparent; border: none; color: inherit; cursor: pointer; }
    .as-burger svg { width: 20px; height: 20px; }
    .as-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40; }
    .as-app.nav-open .as-backdrop { display: block; }
}
@media (min-width: 821px) { .as-backdrop { display: none; } }



/* --- Template: console --- */
/* ===========================================================================
   Portfolio "Console" theme — Hacker terminal layout with high-contrast text.
   =========================================================================== */
:root, body[data-template="console"] {
    --cs-bg: #090b10;
    --cs-panel: #0f172a;
    --cs-term: #05070c;
    --cs-tab: #1e293b;
    --cs-text: #ffffff;
    --cs-muted: #cbd5e1;
    --cs-green: #00ff75;
    --cs-orange: #f97316;
    --cs-blue: #38bdf8;
    --cs-border: rgba(255,255,255,.14);
    --cs-max: 1850px;
}

body[data-template="console"] {
    margin: 0;
    background: var(--cs-bg) !important;
    color: #ffffff !important;
    font-family: "JetBrains Mono", Consolas, monospace;
    line-height: 1.55;
}
body[data-template="console"] .bg-fx,
body[data-template="console"] .grid-overlay {
    display: none !important;
}
body[data-template="console"] a { color: var(--cs-blue); text-decoration: underline; text-underline-offset: 3px; }
body[data-template="console"] svg { width: 1em; height: 1em; vertical-align: -0.15em; }
body[data-template="console"] h1,
body[data-template="console"] h2,
body[data-template="console"] h3,
body[data-template="console"] h4 {
    color: #ffffff !important;
}
body[data-template="console"] p,
body[data-template="console"] li {
    color: #cbd5e1 !important;
}

.cs-top {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 16px 22px 10px;
    background: rgba(9, 11, 16, 0.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cs-border);
}
.cs-brand { display: inline-flex; align-items: center; gap: 8px; color: #ffffff !important; font-size: clamp(1.1rem,2vw,1.75rem); font-weight: 800; text-decoration: none; white-space: nowrap; }
.cs-logo { color: var(--cs-blue); font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 800; letter-spacing: -1px; margin-right: 8px; }
.cs-nav { display: flex; gap: 14px; margin-left: auto; }
.cs-nav a { color: #cbd5e1 !important; font-size: .92rem; text-decoration: none; font-weight: 500; }
.cs-nav a:hover { color: var(--cs-green) !important; }
.cs-socials { display: flex; gap: 12px; }
.cs-socials a {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #334155;
    color: #ffffff !important;
    text-decoration: none;
    font-size: 1.35rem;
    transition: all .2s;
}
.cs-socials a:hover { background: #475569; transform: translateY(-2px); }

.cs-hero {
    min-height: 540px;
    padding: 58px 60px;
    border-radius: 8px;
    background: var(--cs-panel);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 34px;
    border: 1px solid var(--cs-border);
    margin-top: 24px;
}
.cs-hero h1 { margin: 0; text-align: center; font-size: clamp(2.4rem,4vw,4rem); line-height: 1.1; color: #ffffff !important; }
.cs-cursor { animation: blink 1s steps(2,end) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cs-hero p { width: 100%; margin: 0; font-size: clamp(1rem,1.35vw,1.28rem); color: #e2e8f0 !important; }
.cs-mini-term {
    width: min(720px,100%);
    padding: 26px 14px;
    border-radius: 6px;
    background: var(--cs-term);
    border: 1px solid var(--cs-border);
}
.cs-mini-line { color: var(--cs-green); font-weight: 700; font-size: 1.05rem; }
.cs-mini-meta { margin-top: 24px; color: #ffffff !important; font-weight: 600; }
.cs-mini-note { margin: 5px 0 22px; color: #94a3b8 !important; font-size: .86rem; }
.cs-progress { height: 13px; margin-top: 6px; border-radius: 999px; overflow: hidden; background: #334155; }
.cs-progress i { display: block; height: 100%; border-radius: inherit; background: #00ff75; }

.cs-section { margin-top: 52px; }
.cs-section h2 { margin: 0 0 24px; font-size: clamp(1.9rem,3vw,2.7rem); color: #ffffff !important; }
.cs-skills { text-align: center; }
.cs-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.cs-pills span {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    padding: 0 22px;
    border-radius: 999px;
    background: #ea580c !important;
    color: #ffffff !important;
    font-weight: 700;
}
.cs-skill-ic { width: 20px; height: 20px; margin-right: 8px; background: rgba(255,255,255,.92); border-radius: 5px; padding: 2px; box-sizing: border-box; }
.cs-pills.compact { justify-content: flex-start; gap: 10px; }
.cs-pills.compact span { min-height: 36px; padding: 0 14px; font-size: .88rem; }

.cs-window { overflow: hidden; border-radius: 9px; background: var(--cs-term); box-shadow: 0 0 0 1px var(--cs-border); }
.cs-win-head { height: 54px; display: flex; align-items: center; gap: 18px; padding: 0 22px; background: var(--cs-tab); color: #ffffff; }
.cs-tab { align-self: stretch; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--cs-term); border-radius: 8px 8px 0 0; color: #ffffff; }
.cs-plus, .cs-chevron { color: #ffffff; }
.cs-window-actions { margin-left: auto; letter-spacing: 14px; white-space: nowrap; }
.cs-terminal { padding: 26px 20px 34px; min-height: 330px; }
.cs-command-card { margin-bottom: 28px; }
.cs-command-card:last-child { margin-bottom: 0; }
.cs-command-card h3 { margin: 0 0 4px; color: var(--cs-green) !important; font-size: 1.1rem; font-weight: 700; }
.cs-command-card p { margin: 0 0 4px; color: #cbd5e1 !important; line-height: 1.6; }
.cs-command-card ul { margin: 8px 0 0; padding-left: 22px; color: #cbd5e1 !important; }
.cs-command-card li { margin: 4px 0; color: #e2e8f0 !important; }
.cs-muted { color: #cbd5e1 !important; }
.cs-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.cs-links a + a::before { content: "|"; color: #ffffff; margin-right: 12px; }

.cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px,100%),1fr)); gap: 18px; }
.cs-card {
    min-height: 190px;
    padding: 24px;
    border-radius: 9px;
    background: var(--cs-term);
    box-shadow: 0 0 0 1px var(--cs-border);
}
.cs-card img { width: 100%; height: 150px; object-fit: cover; border-radius: 6px; margin-bottom: 16px; }
.cs-card h3 { margin: 0 0 8px; color: var(--cs-green) !important; font-size: 1.2rem; }
.cs-card p { margin: 0 0 8px; color: #cbd5e1 !important; line-height: 1.6; }

.cs-contact { text-align: center; padding: 50px 20px; border-radius: 8px; background: var(--cs-panel); border: 1px solid var(--cs-border); }
.cs-contact p { color: #cbd5e1 !important; }
.cs-contact-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 22px; }
.cs-contact-row a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    background: #ea580c !important;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 700;
}
.cs-footer { padding: 30px 20px 50px; text-align: center; color: #94a3b8 !important; }

@media (max-width: 860px) {
    .cs-top { align-items: flex-start; flex-wrap: wrap; }
    .cs-nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; padding-bottom: 4px; }
    .cs-socials { margin-left: auto; }
    .cs-socials a { width: 40px; height: 40px; font-size: 1rem; }
    .cs-hero { min-height: auto; padding: 44px 20px; }
    .cs-terminal { padding: 20px 14px 28px; }
    .cs-window-actions { display: none; }
}
@media (max-width: 520px) {
    .cs-brand { width: 100%; }
    .cs-socials { margin-left: 0; }
    .cs-hero h1 { text-align: left; width: 100%; }
    .cs-section h2 { font-size: 1.65rem; }
    .cs-win-head { padding: 0 10px; gap: 10px; }
    .cs-tab { padding: 0 10px; font-size: .82rem; }
}



/* --- Template: snowcard --- */
/* ===========================================================================
   Portfolio "Snowcard" theme — clean neo-brutalist card portfolio.
   High-contrast typography in both light and dark mode.
   =========================================================================== */
:root, body[data-template="snowcard"] {
    --sc-bg: #fff;
    --sc-ink: #050505;
    --sc-muted: #374151;
    --sc-faint: #d1d5db;
    --sc-yellow: #ffd000;
    --sc-cream: #fff9c8;
    --sc-green: #04d99d;
    --sc-card: rgba(255,255,255,.94);
    --sc-max: 960px;
}
body[data-template="snowcard"] {
    margin: 0;
    color: #050505 !important;
    background:
        radial-gradient(#a9a9a9 1.3px, transparent 1.8px) 0 0/34px 34px,
        radial-gradient(#cfcfcf 1px, transparent 1.5px) 16px 22px/48px 48px,
        var(--sc-bg) !important;
    font-family: Inter, system-ui, sans-serif;
}
body[data-template="snowcard"] .bg-fx,
body[data-template="snowcard"] .grid-overlay {
    display: none !important;
}
body[data-template="snowcard"] h1,
body[data-template="snowcard"] h2,
body[data-template="snowcard"] h3,
body[data-template="snowcard"] h4 {
    color: #050505 !important;
}
body[data-template="snowcard"] p {
    color: #374151 !important;
}
body[data-template="snowcard"] .sc-exp p,
body[data-template="snowcard"] .sc-muted {
    color: #374151 !important;
}
body[data-template="snowcard"] .sc-showcase-info li {
    color: #374151 !important;
}

/* Dark mode */
body[data-template="snowcard"].sc-dark {
    --sc-bg: #090c15;
    --sc-ink: #ffffff;
    --sc-muted: #cbd5e1;
    --sc-faint: #334155;
    --sc-yellow: #ffdf5d;
    --sc-cream: #1e2538;
    --sc-green: #31e6b5;
    --sc-card: rgba(17, 24, 39, 0.95);
    color: #ffffff !important;
    background:
        radial-gradient(rgba(255,255,255,.18) 1.3px, transparent 1.8px) 0 0/34px 34px,
        radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.5px) 16px 22px/48px 48px,
        var(--sc-bg) !important;
}
body[data-template="snowcard"].sc-dark h1,
body[data-template="snowcard"].sc-dark h2,
body[data-template="snowcard"].sc-dark h3,
body[data-template="snowcard"].sc-dark h4 {
    color: #ffffff !important;
}
body[data-template="snowcard"].sc-dark p,
body[data-template="snowcard"].sc-dark li {
    color: #cbd5e1 !important;
}
body[data-template="snowcard"].sc-dark .sc-exp p,
body[data-template="snowcard"].sc-dark .sc-muted,
body[data-template="snowcard"].sc-dark .sc-showcase-info li {
    color: #cbd5e1 !important;
}
body[data-template="snowcard"].sc-dark .sc-showcase-shot span {
    color: #ffffff !important;
}
body[data-template="snowcard"].sc-dark .sc-contact-card {
    border-color: #334155 !important;
    box-shadow: 6px 6px 0 #030712 !important;
}

body[data-template="snowcard"] a { color: inherit; text-decoration: none; }
body[data-template="snowcard"] svg { width: 1.2em; height: 1.2em; vertical-align: -.2em; }
.sc-mode {
    position: fixed;
    right: 24px;
    top: 26px;
    z-index: 5;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 3px solid #202020;
    background: #fff0a7;
    color: #050505;
    box-shadow: 4px 4px 0 #303030;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.sc-mode::after {
    content: "";
    position: absolute;
    inset: 4px -6px -6px 4px;
    border: 3px solid #202020;
    border-radius: 14px;
    z-index: -1;
    background: #f5f5dc;
}
.sc-mode:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 #303030; }
.sc-mode:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 #303030; }
.sc-mode svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    grid-area: 1 / 1;
}
.sc-mode .sc-moon { display: none; }
body[data-template="snowcard"].sc-dark .sc-mode {
    background: #172033;
    color: #ffdf5d;
    border-color: #f8fafc;
    box-shadow: 4px 4px 0 #010409;
}
body[data-template="snowcard"].sc-dark .sc-mode::after {
    border-color: #f8fafc;
    background: #0b1020;
}
body[data-template="snowcard"].sc-dark .sc-mode .sc-sun { display: none; }
body[data-template="snowcard"].sc-dark .sc-mode .sc-moon { display: block; }
.sc-page { max-width: var(--sc-max); margin: 0 auto; padding: 32px 0 80px; }
.sc-date { text-align: center; font-weight: 700; font-size: 1.25rem; margin-bottom: 52px; }
.sc-hero { display: grid; grid-template-columns: 1fr 280px; gap: 70px; align-items: center; justify-content: center; margin-bottom: 48px; }
.sc-intro { text-align: center; }
.sc-intro h1 { margin: 0 0 22px; font-size: clamp(2.6rem,5vw,3.7rem); line-height: 1; font-weight: 900; letter-spacing: -.04em; }
.sc-intro h2 { margin: 0; font-size: clamp(1.45rem,3vw,2rem); line-height: 1.55; font-weight: 850; }
.sc-socials { display: inline-flex; align-items: center; gap: 26px; margin-top: 56px; padding: 14px 28px; border: 1px solid var(--sc-faint); border-radius: 18px; background: var(--sc-card); box-shadow: 0 12px 24px rgba(0,0,0,.12); font-weight: 900; }
.sc-photo { width: 280px; aspect-ratio: 1; border-radius: 50%; padding: 4px; border: 4px solid var(--sc-ink); background: var(--sc-faint); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.sc-photo img, .sc-photo span { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: 4rem; font-weight: 900; background: var(--sc-faint); }
.sc-tabs {
    position: sticky;
    top: 12px;
    z-index: 4;
    display: flex;
    gap: 6px;
    margin: 0 0 40px;
    padding: 8px;
    overflow-x: auto;
    border: 2px solid var(--sc-ink);
    border-radius: 12px;
    background: var(--sc-cream);
    box-shadow: 0 6px 0 rgba(0,0,0,.12);
    scrollbar-width: none;
}
.sc-tabs::-webkit-scrollbar { display: none; }
.sc-tabs a {
    flex: 1 0 max-content;
    min-width: 108px;
    min-height: 42px;
    display: grid;
    place-items: center;
    padding: 0 18px;
    border-radius: 8px;
    font-weight: 800;
    white-space: nowrap;
    transition: background .18s ease, box-shadow .18s ease, color .18s ease;
}
.sc-tabs a:hover, .sc-tabs a.active { background: var(--sc-yellow); color: #050505 !important; box-shadow: inset 0 0 0 2px #050505; }
.sc-card, .sc-stack, .sc-skills, .sc-projects, .sc-contact { scroll-margin-top: 104px; }
.sc-card, .sc-exp, .sc-project { background: var(--sc-card); border: 1px solid var(--sc-faint); border-radius: 16px; box-shadow: 0 0 0 1px rgba(0,0,0,.03); }
.sc-card { padding: 32px 30px; margin-bottom: 44px; }
.sc-card h2 { margin: 0 0 20px; font-size: 1.9rem; }
.sc-card p { font-size: 1.18rem; line-height: 1.75; font-weight: 650; }
.sc-mini-stack { display: grid; gap: 12px; margin-top: 22px; font-size: 1.1rem; font-weight: 850; }
.sc-mini-stack img, .sc-chipgrid img { width: 30px; height: 30px; object-fit: contain; margin-right: 10px; }
.sc-stack { display: grid; gap: 38px; margin-bottom: 54px; }
.sc-section-head { display: grid; gap: 10px; margin: 16px 0 -8px; }
.sc-section-head h2 { margin: 0; font-size: 1.8rem; }
.sc-section-head .sc-rule { margin-bottom: 0; }
.sc-exp { padding: 32px 30px; border-color: var(--sc-ink); }
.sc-exp-top { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.sc-exp h3 { margin: 0 0 6px; font-size: 1.35rem; font-weight: 800; }
.sc-exp time { white-space: nowrap; font-size: 1.05rem; font-weight: 700; }
.sc-exp ul { margin: 24px 0 0; font-size: 1.08rem; line-height: 1.9; font-weight: 650; }
.sc-exp li { margin: 12px 0; }
.sc-skills { margin-bottom: 54px; }
.sc-skills h3, .sc-projects h2 { margin: 36px 0 10px; font-size: 1.45rem; }
.sc-rule { width: 240px; height: 5px; border-radius: 999px; margin-bottom: 30px; }
.sc-rule.yellow { background: var(--sc-yellow); }
.sc-rule.green { background: var(--sc-green); }
.sc-chipgrid { display: flex; flex-wrap: wrap; gap: 18px 20px; margin-bottom: 38px; }
.sc-all-skills { margin-top: 24px; }
.sc-chipgrid span { min-height: 68px; display: inline-flex; align-items: center; padding: 0 22px; border: 1px solid var(--sc-ink); border-radius: 14px; background: var(--sc-card); box-shadow: 0 4px 10px rgba(0,0,0,.08); font-size: 1.18rem; font-weight: 750; }
.sc-project-showcase { margin-bottom: 54px; }
.sc-showcase-list { display: grid; gap: 58px; }
.sc-showcase { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr); gap: 34px; align-items: center; }
.sc-showcase:nth-child(even) { grid-template-columns: minmax(280px,.75fr) minmax(0,1.25fr); }
.sc-showcase:nth-child(even) .sc-showcase-shot { order: 2; }
.sc-showcase-shot {
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 2px solid var(--sc-ink);
    border-radius: 20px;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,208,0,.55), transparent 26%),
        radial-gradient(circle at 82% 76%, rgba(4,217,157,.35), transparent 28%),
        var(--sc-card);
    box-shadow: 10px 10px 0 var(--sc-ink);
}
.sc-showcase-shot img { width: 100%; height: 100%; object-fit: cover; }
.sc-showcase-shot span { font-size: clamp(3rem,8vw,5.8rem); font-weight: 900; }
.sc-showcase-info {
    padding: 28px;
    border: 1px solid var(--sc-faint);
    border-radius: 18px;
    background: var(--sc-card);
}
.sc-showcase-info h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 12px;
    padding-left: 14px;
    border-left: 5px solid var(--sc-green);
    font-size: clamp(1.45rem,3vw,2rem);
    font-weight: 800;
}
.sc-showcase-info h3 a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid var(--sc-ink);
    border-radius: 9px;
    background: var(--sc-cream);
    color: var(--sc-ink);
    font-size: .78rem;
    font-weight: 850;
}
.sc-showcase-info > p { margin: 0 0 16px; font-size: 1.05rem; line-height: 1.7; }
.sc-showcase-info ul { list-style: none; margin: 0 0 18px; padding: 0; }
.sc-showcase-info li { position: relative; margin: 0 0 12px; padding-left: 24px; line-height: 1.65; font-weight: 650; }
.sc-showcase-info li::before { content: "*"; position: absolute; left: 2px; top: 0; color: var(--sc-green); font-weight: 900; }
.sc-project-tags, .sc-project-links { display: flex; flex-wrap: wrap; gap: 10px; }
.sc-project-tags { margin-top: 4px; }
.sc-project-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid var(--sc-faint);
    border-radius: 999px;
    background: var(--sc-card);
    color: var(--sc-ink);
    font-size: .83rem;
    font-weight: 800;
}
.sc-project-links { margin-top: 18px; font-weight: 850; }
.sc-project-links a { display: inline-flex; align-items: center; gap: 5px; }
.sc-project-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(280px,100%),1fr)); gap: 20px; }
.sc-project { padding: 24px; border-color: var(--sc-ink); }
.sc-project h3 { margin: 0 0 8px; font-size: 1.35rem; }
.sc-project p { line-height: 1.65; }
.sc-project div { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; font-weight: 850; }
.sc-contact { margin-top: 64px; padding-bottom: 24px; }
.sc-contact-lead {
    max-width: 62ch;
    margin: 22px auto 30px;
    text-align: center;
    font-size: 1.08rem;
    line-height: 1.7;
    font-weight: 650;
}
.sc-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(260px,100%),1fr));
    gap: 20px;
}
.sc-contact-card {
    display: flex;
    min-height: 250px;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 28px 22px;
    border: 2px solid var(--sc-ink);
    border-radius: 18px;
    background: var(--sc-card);
    text-align: center;
    box-shadow: 6px 6px 0 var(--sc-ink);
}
.sc-contact-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border: 2px solid var(--sc-ink);
    border-radius: 16px;
    background: var(--sc-cream);
    color: var(--sc-ink);
}
.sc-contact-icon svg { width: 28px; height: 28px; }
.sc-contact-card h3 { margin: 0; font-size: 1.25rem; }
.sc-contact-card p {
    margin: 0;
    max-width: 100%;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.sc-contact-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border: 2px solid var(--sc-ink);
    border-radius: 999px;
    background: var(--sc-yellow);
    color: #050505 !important;
    font-weight: 900;
}
@media (max-width: 860px) {
    .sc-page { padding-left: 18px; padding-right: 18px; }
    .sc-hero { grid-template-columns: 1fr; gap: 32px; }
    .sc-photo { order: -1; justify-self: center; width: min(240px,72vw); }
    .sc-exp-top { flex-direction: column; }
    .sc-showcase, .sc-showcase:nth-child(even) { grid-template-columns: 1fr; gap: 22px; }
    .sc-showcase:nth-child(even) .sc-showcase-shot { order: 0; }
}
@media (max-width: 520px) {
    .sc-socials { gap: 18px; margin-top: 32px; padding: 12px 20px; }
    .sc-chipgrid span { width: 100%; }
    .sc-mode { right: 12px; top: 12px; }
    .sc-tabs { margin-left: -6px; margin-right: -6px; padding: 6px; }
    .sc-tabs a { min-width: 96px; min-height: 40px; padding: 0 14px; }
}



/* --- Template: parchment --- */
/* ===========================================================================
   Portfolio "Parchment" theme — Ancient illuminated scroll with rich dark ink.
   High-contrast typography.
   =========================================================================== */
:root, body[data-template="parchment"] {
    --pa-ink: #1c1007;
    --pa-ink2: #341f0f;
    --pa-muted: #4e341c;
    --pa-accent: #8b2e1f;   /* wax-seal red */
    --pa-gold: #9a7b3f;
    --pa-edge: #c9b283;
    --pa-disp: 'Cinzel', Georgia, serif;
    --pa-deco: 'Cinzel Decorative', 'Cinzel', serif;
    --pa-script: 'Tangerine', cursive;
    --pa-body: 'EB Garamond', Georgia, serif;
}

body[data-template="parchment"] {
    margin: 0;
    background: #221610 !important;
    color: var(--pa-ink) !important;
    font-family: var(--pa-body);
    font-size: 19px;
    line-height: 1.78;
    -webkit-font-smoothing: antialiased;
}
body[data-template="parchment"] .bg-fx,
body[data-template="parchment"] .grid-overlay {
    display: none !important;
}
body[data-template="parchment"] a { color: inherit; }
body[data-template="parchment"] h1,
body[data-template="parchment"] h2,
body[data-template="parchment"] h3,
body[data-template="parchment"] h4 {
    color: var(--pa-ink) !important;
}
body[data-template="parchment"] p {
    color: var(--pa-ink2) !important;
}

.pa-desk { position: fixed; inset: 0; z-index: -1; background:
    radial-gradient(130% 90% at 50% -15%, #4a3320, #1a110a 72%),
    repeating-linear-gradient(91deg, rgba(0,0,0,.14) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(90deg, rgba(255,210,150,.03) 0 1px, transparent 1px 26px); }

.pa-scroll { max-width: 1200px; margin: 46px auto 30px; padding: 0 20px; }
.pa-rod { height: 30px; border-radius: 16px; position: relative; margin: 0 4px; z-index: 2;
    background: linear-gradient(#9c6a36, #6b4423 55%, #3f2713);
    box-shadow: inset 0 3px 6px rgba(255,220,160,.35), inset 0 -6px 10px rgba(0,0,0,.55), 0 10px 20px rgba(0,0,0,.45); }
.pa-rod .knob { position: absolute; top: 50%; width: 30px; height: 44px; border-radius: 50%; transform: translateY(-50%);
    background: radial-gradient(circle at 35% 30%, #a86e34, #341e0d); box-shadow: 0 7px 14px rgba(0,0,0,.55); }
.pa-rod .knob.l { left: -16px; } .pa-rod .knob.r { right: -16px; }

.pa-paper { position: relative; margin: -4px 0; color: var(--pa-ink); animation: paUnroll 2.6s cubic-bezier(.55,0,.2,1) .15s both; }
.pa-paper::before { content: ""; position: absolute; inset: -3px 2px; z-index: 0;
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(255,251,236,.6), transparent 45%),
        radial-gradient(130% 40% at 80% 100%, rgba(120,80,30,.20), transparent 45%),
        radial-gradient(90% 50% at 12% 70%, rgba(120,80,30,.14), transparent 50%),
        radial-gradient(100% 100% at 50% 50%, transparent 78%, rgba(80,52,20,.55) 99%),
        linear-gradient(#f4e8c8, #ecdcae 50%, #ecdcae 92%, #e2cd95);
    box-shadow: inset 0 0 90px rgba(120,80,30,.30), inset 0 0 30px rgba(70,45,18,.4);
    filter: url(#pa-torn) drop-shadow(0 2px 2px rgba(60,38,15,.55)); }
.pa-paper::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
    background: repeating-linear-gradient(115deg, transparent 0 7px, rgba(120,85,40,.03) 7px 8px); }
@keyframes paUnroll { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.pa-paper-in { position: relative; z-index: 2; padding: 60px 64px 70px; animation: paFade 1.4s ease 1.3s both; }

.pa-hero { text-align: center; }
.pa-salut { font-style: italic; color: #4e341c !important; font-weight: 600; letter-spacing: .02em; }
.pa-portrait { width: 150px; height: 182px; margin: 16px auto 6px; padding: 5px; border-radius: 50% / 46%;
    border: 3px double var(--pa-ink2); background: rgba(255,250,235,.5); box-shadow: 0 10px 22px rgba(0,0,0,.3), inset 0 0 18px rgba(120,80,30,.3); }
.pa-portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: 50% / 46%; filter: sepia(.45) contrast(.96) brightness(1.03); display: block; }
.pa-portrait span { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50% / 46%; font-family: var(--pa-deco); font-size: 3rem; color: var(--pa-accent); background: rgba(120,80,30,.1); }
.pa-name { font-family: var(--pa-script); font-weight: 700; font-size: clamp(4rem, 11vw, 7rem); line-height: .9; margin: 4px 0 0; color: #1c1007 !important; }
.pa-flourish { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--pa-gold); margin: 4px 0 14px; }
.pa-flourish i { height: 1px; width: 80px; background: linear-gradient(90deg, transparent, var(--pa-gold)); }
.pa-flourish i:last-child { background: linear-gradient(90deg, var(--pa-gold), transparent); }
.pa-flourish span { font-size: 1.3rem; }
.pa-title { font-family: var(--pa-disp); font-weight: 700; text-transform: uppercase; letter-spacing: .22em; font-size: 1.05rem; color: var(--pa-accent); }
.pa-place { font-style: italic; color: #4e341c !important; font-weight: 600; margin-top: 6px; }
.pa-quote { font-style: italic; font-size: 1.25rem; max-width: 46ch; margin: 22px auto 0; color: #341f0f !important; font-weight: 500; }
.pa-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }
.pa-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--pa-disp); font-size: .95rem; font-weight: 700; letter-spacing: .04em; padding: 12px 26px; border-radius: 4px; border: 2px solid var(--pa-ink); color: #1c1007; background: rgba(255,250,235,.5); cursor: pointer; transition: all .2s; }
.pa-btn:hover { background: var(--pa-ink); color: #f4e8c8; }
.pa-btn-ghost { border-style: double; border-width: 3px; }
.pa-socials { display: flex; gap: 14px; justify-content: center; margin-top: 26px; }
.pa-socials a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--pa-ink2); border-radius: 50%; color: var(--pa-ink2); transition: all .2s; }
.pa-socials a svg { width: 19px; height: 19px; }
.pa-socials a:hover { background: var(--pa-accent); border-color: var(--pa-accent); color: #f4e8c8; transform: translateY(-3px); }
.pa-cue { text-align: center; font-family: var(--pa-disp); letter-spacing: .2em; color: #6b4c20 !important; font-weight: 600; margin-top: 28px; font-size: .82rem; }

.pa-divider { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 42px 0 30px; color: var(--pa-gold); }
.pa-divider i { height: 1px; flex: 0 1 170px; background: linear-gradient(90deg, transparent, var(--pa-gold)); }
.pa-divider i:last-child { background: linear-gradient(90deg, var(--pa-gold), transparent); }
.pa-divider span { font-size: 1.1rem; }

.pa-head { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 24px; }
.pa-head h2 { font-family: var(--pa-deco); font-weight: 700; font-size: clamp(1.5rem, 3.5vw, 2.1rem); color: #1c1007 !important; margin: 0; text-align: center; }
.pa-head .orn { color: var(--pa-accent); font-size: 1.1rem; }
.pa-head .orn.f { transform: scaleX(-1); }
.pa-prose { font-size: 1.15rem; line-height: 1.85; color: #341f0f !important; margin: 0; font-weight: 500; }
.pa-dropcap::first-letter { font-family: var(--pa-deco); font-size: 3.6em; line-height: .72; float: left; padding: 8px 12px 0 0; color: var(--pa-accent); }
.pa-sub { font-family: var(--pa-disp); font-size: 1.05rem; letter-spacing: .08em; color: var(--pa-accent); margin: 18px 0 10px; text-transform: uppercase; font-weight: 700; }

.pa-tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pa-tag { font-family: var(--pa-disp); font-size: .88rem; font-weight: 600; padding: 6px 15px; border: 1.5px solid var(--pa-ink2); border-radius: 3px; background: rgba(120,80,30,.12); color: #1c1007 !important; transition: all .2s; }
.pa-tag:hover { background: var(--pa-ink); color: #f4e8c8 !important; transform: translateY(-2px) rotate(-1deg); }

.pa-entry { padding: 16px 0; border-bottom: 1px dashed rgba(90,60,20,.4); }
.pa-entry:last-child { border-bottom: none; }
.pa-entry-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pa-entry h3 { font-family: var(--pa-disp); font-weight: 700; font-size: 1.25rem; margin: 0; color: #1c1007 !important; }
.pa-entry h3 span { color: var(--pa-accent); font-weight: 600; }
.pa-year { font-family: var(--pa-disp); font-size: .88rem; letter-spacing: .04em; color: #4e341c !important; font-weight: 600; white-space: nowrap; }
.pa-list { margin: 10px 0 0; padding: 0; list-style: none; }
.pa-list li { position: relative; padding-left: 24px; margin-bottom: 7px; color: #341f0f !important; font-weight: 500; }
.pa-list li::before { content: "❧"; position: absolute; left: 0; color: var(--pa-gold); font-size: .9em; }

/* Works */
.pa-work { padding: 18px 0; border-bottom: 1px dashed rgba(90,60,20,.4); }
.pa-work:last-child { border-bottom: none; }
.pa-work-img { height: 420px; margin-bottom: 18px; overflow: hidden; border-radius: 4px; border: 1px solid var(--pa-edge); box-shadow: inset 0 0 30px rgba(90,60,20,.35); filter: sepia(.3) contrast(.96); }
.pa-work-img img { width: 100%; height: 100%; object-fit: cover; }
.pa-work h3 { font-family: var(--pa-disp); font-size: 1.35rem; margin: 0 0 4px; color: #1c1007 !important; font-weight: 700; }
.pa-work-links { display: flex; gap: 20px; margin-top: 14px; }
.pa-work-links a { color: var(--pa-accent); font-family: var(--pa-disp); font-size: .88rem; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; border-bottom: 1px solid currentColor; }

/* Closing / signature */
.pa-sign { text-align: center; margin-top: 30px; }
.pa-sign-label { font-style: italic; color: #4e341c !important; font-weight: 600; }
.pa-sign-name { font-family: var(--pa-script); font-size: 3.4rem; line-height: 1; color: #1c1007 !important; }
.pa-seal { width: 86px; height: 86px; margin: 14px auto 0; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--pa-deco); font-size: 1.7rem; color: #f4e8c8; background: radial-gradient(circle at 38% 32%, #b3402c, #6e1f15);
    box-shadow: inset 0 3px 8px rgba(255,200,180,.35), inset 0 -6px 12px rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.5); transform: rotate(-7deg); }

.pa-footer { text-align: center; padding: 30px 20px 50px; color: #4e341c !important; font-family: var(--pa-disp); letter-spacing: .08em; font-size: .85rem; font-weight: 600; }
.pa-top { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 38% 32%, #9c6a36, #3f2713); color: #f4e8c8; font-size: 1.2rem; box-shadow: 0 8px 18px rgba(0,0,0,.5); }

@media (max-width: 700px) {
    .pa-paper-in { padding: 42px 24px 52px; }
    .pa-corner { width: 116px; height: 116px; opacity: .5; }
    .pa-side { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; }
    html { scroll-behavior: auto; }
    .pa-paper { clip-path: none !important; }
    .pa-paper-in { opacity: 1 !important; }
}



/* --- Template: cloud --- */
/* ===========================================================================
   Portfolio "Cloud" theme — friendly developer landing with light/dark + cloud background.
   High-contrast typography.
   =========================================================================== */
:root, body[data-template="cloud"] {
    --cw-sky1: #bfe3ff; --cw-sky2: #eaf6ff;
    --cw-nav: #ffffff; --cw-nav-blur: rgba(255,255,255,.92);
    --cw-text: #0f172a; --cw-muted: #334155; --cw-head: #0b1626;
    --cw-accent: #2563eb; --cw-accent2: #1d4ed8;
    --cw-card: #ffffff; --cw-border: #cbd5e1; --cw-soft: #f1f5f9;
    --cw-cloud-back: #d4ecff; --cw-cloud-mid: #e7f4ff; --cw-cloud-front: #ffffff;
    --cw-shadow: 0 18px 44px -24px rgba(40,90,170,.45);
    --cw-icon-bg: #e2e8f0;
}
html.cloud-dark, body[data-template="cloud"].cloud-dark {
    --cw-sky1: #1e293b; --cw-sky2: #0f172a;
    --cw-nav: #1e293b; --cw-nav-blur: rgba(30,41,59,.92);
    --cw-text: #f8fafc; --cw-muted: #cbd5e1; --cw-head: #ffffff;
    --cw-accent: #38bdf8; --cw-accent2: #60a5fa;
    --cw-card: #1e293b; --cw-border: #334155; --cw-soft: #111827;
    --cw-cloud-back: #334155; --cw-cloud-mid: #475569; --cw-cloud-front: #94a3b8;
    --cw-shadow: 0 18px 44px -22px rgba(0,0,0,.7);
    --cw-icon-bg: #334155;
}

body[data-template="cloud"] {
    font-family: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--cw-text) !important;
    background: var(--cw-sky2) !important;
    overflow-x: hidden; -webkit-font-smoothing: antialiased;
    transition: background .3s, color .3s;
}
body[data-template="cloud"] .bg-fx,
body[data-template="cloud"] .grid-overlay {
    display: none !important;
}
body[data-template="cloud"] a { color: inherit; text-decoration: none; }
body[data-template="cloud"] h1,
body[data-template="cloud"] h2,
body[data-template="cloud"] h3,
body[data-template="cloud"] h4 {
    color: var(--cw-head) !important;
}
body[data-template="cloud"] p {
    color: var(--cw-muted) !important;
}

.cw-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    background: linear-gradient(180deg, var(--cw-sky1) 0%, var(--cw-sky2) 62%); }
.cw-bg .puff { position: absolute; fill: var(--cw-cloud-front); opacity: .55; animation: cwDrift 90s linear infinite; }
.cw-bg .puff.p2 { opacity: .4; animation-duration: 130s; animation-delay: -40s; }
.cw-bg .puff.p3 { opacity: .3; animation-duration: 160s; animation-delay: -80s; }
@keyframes cwDrift { from { transform: translateX(-12vw); } to { transform: translateX(112vw); } }
.cw-bank { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; display: block; }
.cw-bank .cloud-back { fill: var(--cw-cloud-back); }
.cw-bank .cloud-mid { fill: var(--cw-cloud-mid); }
.cw-bank .cloud-front { fill: var(--cw-cloud-front); }

/* Nav */
.cw-nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between;
    padding: 14px clamp(18px, 5vw, 60px); background: var(--cw-nav-blur); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cw-border); }
.cw-logo { font-family: 'Caveat', cursive; font-size: 1.9rem; font-weight: 700; color: var(--cw-head) !important; letter-spacing: .5px; }
.cw-links { display: flex; align-items: center; gap: 4px; }
.cw-links a { padding: 9px 18px; border-radius: 10px; font-size: .95rem; font-weight: 600; color: var(--cw-text) !important; transition: background .15s, color .15s; }
.cw-links a:hover { background: var(--cw-soft); }
.cw-links a.active { background: var(--cw-accent); color: #fff !important; }
.cw-theme { width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; color: var(--cw-text); transition: background .15s; }
.cw-theme:hover { background: var(--cw-soft); }
.cw-theme svg { width: 22px; height: 22px; }
.cw-theme .ic-sun { color: #f5a623; display: block; }
.cw-theme .ic-moon { color: #f5d76e; display: none; }
html.cloud-dark, body[data-template="cloud"].cloud-dark .cw-theme .ic-sun { display: none; }
html.cloud-dark, body[data-template="cloud"].cloud-dark .cw-theme .ic-moon { display: block; }
.cw-burger { display: none; width: 40px; height: 40px; border: none; background: transparent; color: var(--cw-text); cursor: pointer; }
.cw-burger svg { width: 24px; height: 24px; }

/* Layout */
.cw-main { position: relative; z-index: 1; }
.cw-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 48px); }

/* Hero */
.cw-hero { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 30px; min-height: 84vh; padding: 30px 0; }
.cw-hero h1 { font-size: clamp(2.2rem, 5.2vw, 3.8rem); font-weight: 800; line-height: 1.08; color: var(--cw-head) !important; }
.cw-hero h1 .role { color: var(--cw-accent) !important; display: inline-block; }
.cw-cursor { display: inline-block; width: 3px; margin-left: 2px; background: var(--cw-accent); animation: cwBlink 1s steps(1) infinite; }
@keyframes cwBlink { 50% { opacity: 0; } }
.cw-hero p { color: var(--cw-muted) !important; font-size: 1.1rem; margin-top: 18px; max-width: 520px; line-height: 1.75; font-weight: 500; }
.cw-socials { display: flex; gap: 14px; margin-top: 26px; }
.cw-socials a { width: 46px; height: 46px; border-radius: 12px; background: var(--cw-icon-bg); display: flex; align-items: center;
    justify-content: center; color: var(--cw-text) !important; transition: transform .15s, color .15s, background .15s; }
.cw-socials a:hover { transform: translateY(-3px); color: var(--cw-accent) !important; }
.cw-socials svg { width: 22px; height: 22px; }
.cw-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 15px 46px; border-radius: 12px;
    background: var(--cw-accent); color: #fff !important; font-weight: 700; font-size: 1rem; box-shadow: 0 14px 30px -12px var(--cw-accent);
    transition: transform .15s, background .15s; }
.cw-cta:hover { transform: translateY(-2px); background: var(--cw-accent2); color: #fff !important; }

/* Sections */
.cw-section { padding: 70px 0; position: relative; background: var(--cw-card); }
.cw-section.alt { background: var(--cw-soft); }
.cw-h2 { text-align: center; font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; color: var(--cw-head) !important; }
.cw-h2 + .cw-sub { text-align: center; color: var(--cw-muted) !important; margin: 8px auto 0; max-width: 600px; font-size: 1.05rem; }
.cw-bar { width: 64px; height: 4px; border-radius: 3px; background: var(--cw-accent); margin: 14px auto 36px; }

.cw-grid { display: grid; gap: 20px; }
.cw-grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cw-grid.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.cw-card { background: var(--cw-card); border: 1px solid var(--cw-border); border-radius: 16px; padding: 24px; box-shadow: var(--cw-shadow);
    transition: transform .2s, box-shadow .25s; }
.cw-card:hover { transform: translateY(-4px); }
.cw-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--cw-head) !important; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cw-card h4 { font-size: .95rem; font-weight: 600; color: var(--cw-accent) !important; margin: 4px 0 10px; }
.cw-card ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cw-card li { position: relative; padding-left: 20px; color: var(--cw-muted) !important; font-size: .96rem; font-weight: 500; }
.cw-card li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--cw-accent); }
.cw-date { font-size: .85rem; color: var(--cw-muted) !important; margin-top: 12px; font-weight: 600; }
.cw-card h3 a, .cw-date a { color: var(--cw-accent); font-size: .84rem; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.cw-card h3 a svg, .cw-date a svg { width: 13px; height: 13px; }

.cw-about { max-width: 760px; margin: 0 auto; text-align: center; color: var(--cw-muted) !important; font-size: 1.08rem; line-height: 1.8; font-weight: 500; }
.cw-about p { margin-bottom: 14px; color: var(--cw-muted) !important; }

.cw-skills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cw-skill { display: flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 12px; background: var(--cw-card);
    border: 1px solid var(--cw-border); font-size: .95rem; font-weight: 600; box-shadow: var(--cw-shadow); transition: transform .15s; color: var(--cw-text); }
.cw-skill:hover { transform: translateY(-3px); }
.cw-skill img { width: 22px; height: 22px; }

.cw-projects-zz { display: flex; flex-direction: column; gap: 56px; }
.cw-projx { display: grid; grid-template-columns: 1.25fr .75fr; gap: 38px; align-items: center; }
.cw-projx:nth-child(even) { grid-template-columns: .75fr 1.25fr; }
.cw-projx:nth-child(even) .cw-projx-shot { order: 2; }
.cw-projx-shot { border-radius: 20px; overflow: hidden; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--cw-accent), #7aa2ff); box-shadow: var(--cw-shadow); }
.cw-projx-shot img { width: 100%; height: 100%; object-fit: cover; }
.cw-projx-shot .ph { font-size: 3rem; font-weight: 800; color: rgba(255,255,255,.9); }
.cw-projx-info h3 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--cw-head) !important;
    font-size: 1.55rem; font-weight: 800; margin: 0 0 14px; border-left: 4px solid var(--cw-accent); padding-left: 14px; }
.cw-checkout { font-size: .8rem; font-weight: 600; padding: 6px 12px; border: 1px solid var(--cw-border); border-radius: 8px; color: var(--cw-muted); white-space: nowrap; }
.cw-checkout:hover { border-color: var(--cw-accent); color: var(--cw-accent); }
.cw-projx-info > p { color: var(--cw-muted) !important; margin: 0 0 16px; line-height: 1.7; font-weight: 500; }
.cw-plus { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.cw-plus li { position: relative; padding-left: 24px; color: var(--cw-muted) !important; font-size: .98rem; font-weight: 500; }
.cw-plus li::before { content: "✦"; position: absolute; left: 0; color: var(--cw-accent); }
.cw-pill-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.cw-ptag { font-size: .84rem; padding: 7px 15px; border-radius: 999px; background: var(--cw-soft); border: 1px solid var(--cw-border); color: var(--cw-text) !important; font-weight: 600; }
@media (max-width: 760px) {
    .cw-projx, .cw-projx:nth-child(even) { grid-template-columns: 1fr; gap: 18px; }
    .cw-projx:nth-child(even) .cw-projx-shot { order: 0; }
    .cw-projx-info h3 { font-size: 1.3rem; }
}

.cw-contact { text-align: center; }
.cw-contact .cw-socials { justify-content: center; }
.cw-contact .cw-cta { margin-top: 24px; }

.cw-foot { text-align: center; padding: 30px 20px 46px; color: var(--cw-muted) !important; font-size: .88rem; position: relative; z-index: 1; border-top: 1px solid var(--cw-border); background: var(--cw-card); }

@media (max-width: 880px) {
    .cw-hero { grid-template-columns: 1fr; text-align: center; min-height: auto; padding-top: 24px; }
    .cw-hero p { margin-left: auto; margin-right: auto; }
    .cw-socials, .cw-hero .cw-cta { justify-content: center; }
    .cw-hero-art { max-width: 460px; margin: 10px auto 0; order: -1; }
    .cw-links { position: fixed; top: 64px; right: 14px; flex-direction: column; align-items: stretch; gap: 4px;
        background: var(--cw-nav); border: 1px solid var(--cw-border); border-radius: 14px; padding: 10px; width: 200px;
        box-shadow: var(--cw-shadow); transform: scale(.96); opacity: 0; pointer-events: none; transition: .15s; transform-origin: top right; }
    .cw-nav.open .cw-links { transform: scale(1); opacity: 1; pointer-events: auto; }
    .cw-burger { display: inline-flex; align-items: center; justify-content: center; }
}


/* ===========================================================================
   GitHub Developer Profile Theme
   =========================================================================== */
body[data-template="github"] {
    --gh-bg: #0d1117;
    --gh-surface: #161b22;
    --gh-surface-2: #21262d;
    --gh-border: #30363d;
    --gh-ink: #e6edf3;
    --gh-dim: #8b949e;
    --gh-link: #58a6ff;
    --gh-green: #3fb950;
    --gh-green-btn: #238636;
    --gh-radius: 12px;
    --gh-max: 1180px;
    --gh-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --gh-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    background: var(--gh-bg) !important;
    color: var(--gh-ink) !important;
    font-family: var(--gh-font);
    line-height: 1.55;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}
body[data-template="github"] a { color: inherit; text-decoration: none; }
body[data-template="github"] img { max-width: 100%; }

/* ---- top bar ---- */
.gh-top { position: sticky; top: 0; z-index: 40; background: #161b22; border-bottom: 1px solid #30363d; }
.gh-top-in { max-width: 1180px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 16px; }
.gh-mark svg { width: 32px; height: 32px; color: #e6edf3; display: block; }
.gh-search { flex: 0 1 320px; background: #0d1117; border: 1px solid #30363d; border-radius: 7px; color: #8b949e; font-size: .82rem; padding: 6px 12px; }
.gh-top-nav { margin-left: auto; display: flex; gap: 18px; }
.gh-top-nav a { color: #e6edf3; font-size: .88rem; font-weight: 600; padding: 6px 0; border-bottom: 2px solid transparent; transition: color .15s; }
.gh-top-nav a:hover { color: #8b949e; }

/* ---- page grid ---- */
.gh-page { max-width: 1180px; margin: 0 auto; padding: 26px 24px 60px; display: grid; grid-template-columns: 296px 1fr; gap: 32px; }

/* ---- profile sidebar ---- */
.gh-side { position: sticky; top: 86px; align-self: start; }
.gh-avatar { width: 200px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 1px solid #30363d; background: #21262d; margin-bottom: 16px; }
.gh-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gh-avatar span { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 4.5rem; font-weight: 800; color: #8b949e; }
.gh-name { font-size: 1.6rem; font-weight: 700; margin: 0; line-height: 1.2; color: #e6edf3; }
.gh-login { color: #8b949e; font-size: 1.25rem; font-weight: 300; margin-bottom: 14px; }
.gh-headline { color: #e6edf3; font-size: 1rem; margin-bottom: 14px; }
.gh-side-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.gh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 8px 14px; border: 1px solid #30363d; border-radius: 7px; background: #21262d; color: #e6edf3; font-size: .85rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; box-sizing: border-box; }
.gh-btn:hover { background: #30363d; border-color: #8b949e; color: #ffffff; }
.gh-btn-primary { background: #238636; border-color: rgba(240,246,252,.1); color: #fff !important; }
.gh-btn-primary:hover { background: #2ea043; }
.gh-btn svg { width: 16px; height: 16px; }
.gh-bio { color: #e6edf3; font-size: .92rem; margin: 0 0 14px; }
.gh-followers { color: #8b949e; font-size: .85rem; margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
.gh-followers svg { width: 16px; height: 16px; }
.gh-followers strong { color: #e6edf3; }
.gh-meta { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid #30363d; display: flex; flex-direction: column; gap: 9px; }
.gh-meta li { display: flex; align-items: center; gap: 9px; color: #8b949e; font-size: .9rem; }
.gh-meta li svg { width: 16px; height: 16px; flex-shrink: 0; color: #8b949e; }
.gh-meta a { color: #e6edf3; }
.gh-meta a:hover { color: #58a6ff; }

/* ---- main column ---- */
.gh-tabs { display: flex; gap: 8px; border-bottom: 1px solid #30363d; margin-bottom: 24px; overflow-x: auto; }
.gh-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; color: #e6edf3; font-size: .9rem; font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; }
.gh-tab svg { width: 16px; height: 16px; color: #8b949e; }
.gh-tab.on { font-weight: 600; border-bottom-color: #f78166; }
.gh-count { background: #21262d; border-radius: 20px; padding: 1px 8px; font-size: .75rem; color: #8b949e; }

.gh-h3 { font-size: 1.05rem; font-weight: 600; color: #e6edf3; margin: 30px 0 14px; }

/* README card */
.gh-readme { border: 1px solid #30363d; border-radius: 12px; overflow: hidden; background: #0d1117; }
.gh-readme-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #161b22; border-bottom: 1px solid #30363d; }
.gh-file { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: #e6edf3; font-weight: 600; }
.gh-file svg { width: 16px; height: 16px; color: #8b949e; }
.gh-pub { font-size: .72rem; color: #8b949e; border: 1px solid #30363d; border-radius: 20px; padding: 1px 8px; }
.gh-pub.sm { font-size: .68rem; }
.gh-readme-body { padding: 26px 28px; }
.gh-readme-body h2 { margin: 0 0 6px; font-size: 1.5rem; color: #e6edf3; }
.gh-readme-sub { color: #58a6ff; font-weight: 600; margin: 0 0 16px; font-size: 1.05rem; }
.gh-readme-body p { color: #8b949e; margin: 0 0 12px; line-height: 1.6; }

/* pinned repo cards */
.gh-pins { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px,100%),1fr)); gap: 16px; }
.gh-pin { border: 1px solid #30363d; border-radius: 12px; padding: 16px; background: #161b22; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s; }
.gh-pin:hover { border-color: #8b949e; }
.gh-pin-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gh-repo-ic svg { width: 16px; height: 16px; color: #8b949e; display: block; }
.gh-repo-name { color: #58a6ff; font-weight: 600; font-size: .95rem; }
.gh-repo-name:hover { text-decoration: underline; }
.gh-pin-desc { color: #8b949e; font-size: .85rem; margin: 0 0 16px; flex: 1; line-height: 1.5; }
.gh-pin-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gh-lang { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: #8b949e; }
.gh-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--d, #f1e05a); display: inline-block; }
.gh-pin-link { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; color: #8b949e; transition: color .15s; }
.gh-pin-link:hover { color: #58a6ff; }
.gh-pin-link svg { width: 14px; height: 14px; }

/* contribution graph */
/* authentic github contribution graph */
.gh-contrib { border: 1px solid #30363d; border-radius: 12px; padding: 20px 24px; margin-top: 30px; background: #0d1117; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.gh-contrib .gh-h3 { margin: 0 0 16px; font-size: 1rem; font-weight: 600; color: #f0f6fc; }
.gh-graph-wrap { overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: #30363d transparent; }
.gh-graph { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 12px); grid-auto-columns: 12px; gap: 3.5px; min-width: max-content; }
.gh-cell { width: 12px; height: 12px; border-radius: 2.5px; background: #161b22; outline: 1px solid rgba(255,255,255,.03); display: inline-block; transition: transform .12s ease, outline-color .12s ease; cursor: pointer; }
.gh-cell:hover { transform: scale(1.28); outline: 1.5px solid #58a6ff; z-index: 2; position: relative; }
.gh-cell.l1 { background: #0e4429; } .gh-cell.l2 { background: #006d32; }
.gh-cell.l3 { background: #26a641; } .gh-cell.l4 { background: #39d353; }
.gh-legend { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 14px; color: #8b949e; font-size: .76rem; }
.gh-lc { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.gh-lc.l0 { background: #161b22; outline: 1px solid #30363d; }
.gh-lc.l1 { background: #0e4429; } .gh-lc.l2 { background: #006d32; }
.gh-lc.l3 { background: #26a641; } .gh-lc.l4 { background: #39d353; }

/* language / interest chips */
.gh-langs { display: flex; flex-wrap: wrap; gap: 9px; }
.gh-lang-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid #30363d; border-radius: 20px; background: #161b22; font-size: .85rem; color: #e6edf3; }
.gh-lang-chip svg, .gh-lang-chip img { width: 16px; height: 16px; }

/* experience timeline */
.gh-timeline { position: relative; padding-left: 8px; }
.gh-tl { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding-bottom: 18px; }
.gh-tl::before { content: ""; position: absolute; left: 16px; top: 30px; bottom: 0; width: 2px; background: #30363d; }
.gh-tl:last-child::before { display: none; }
.gh-tl-node { width: 34px; height: 34px; border-radius: 50%; background: #21262d; border: 1px solid #30363d; display: flex; align-items: center; justify-content: center; color: #8b949e; z-index: 1; }
.gh-tl-node svg { width: 16px; height: 16px; }
.gh-tl-card { border: 1px solid #30363d; border-radius: 12px; padding: 16px 18px; background: #161b22; }
.gh-tl-card h4 { margin: 0 0 4px; font-size: 1rem; color: #e6edf3; }
.gh-at { color: #58a6ff; font-weight: 600; }
.gh-tl-meta { color: #8b949e; font-size: .82rem; margin-bottom: 10px; font-family: ui-monospace, SFMono-Regular, monospace; }
.gh-tl-card ul { margin: 0; padding-left: 18px; }
.gh-tl-card li { color: #8b949e; font-size: .9rem; margin-bottom: 5px; line-height: 1.5; }

/* generic cards (edu / certs / pubs / activity) */
.gh-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px,100%),1fr)); gap: 14px; }
.gh-card { border: 1px solid #30363d; border-radius: 12px; padding: 16px 18px; background: #161b22; }
.gh-card h4 { margin: 0 0 6px; font-size: .98rem; display: flex; align-items: center; gap: 7px; color: #e6edf3; }
.gh-card h4 svg { width: 15px; height: 15px; color: #8b949e; flex-shrink: 0; }
.gh-card-sub { color: #e6edf3; font-size: .86rem; }
.gh-card-meta { color: #8b949e; font-size: .82rem; margin-top: 5px; font-family: ui-monospace, SFMono-Regular, monospace; }
.gh-card-desc { color: #8b949e; font-size: .86rem; margin: 8px 0 0; line-height: 1.5; }
.gh-card-link { color: #58a6ff; font-size: .84rem; font-weight: 600; display: inline-block; margin-top: 10px; }
.gh-card-link:hover { text-decoration: underline; }

/* contact */
.gh-contact { margin-top: 30px; }
.gh-contact-row { display: flex; flex-wrap: wrap; gap: 12px; }
.gh-contact-row .gh-btn { width: auto; }

/* footer */
.gh-footer { border-top: 1px solid #30363d; padding: 28px 24px; text-align: center; color: #8b949e; font-size: .82rem; }
.gh-footer a { color: #58a6ff; }

/* responsive */
@media (max-width: 900px) {
    .gh-page { grid-template-columns: 1fr; gap: 24px; }
    .gh-side { position: static; display: grid; grid-template-columns: 110px 1fr; gap: 6px 20px; align-items: start; }
    .gh-avatar { width: 110px; grid-row: span 2; }
    .gh-meta, .gh-side-actions, .gh-bio, .gh-followers { grid-column: 1 / -1; }
    .gh-top-nav { display: none; }
}
@media (max-width: 520px) {
    .gh-page { padding: 18px 14px 50px; }
    .gh-side { grid-template-columns: 1fr; }
    .gh-avatar { width: 150px; margin: 0 auto 12px; grid-row: auto; }
    .gh-name, .gh-login { text-align: center; }
}


/* ===========================================================================
   Particle 3D Mesh Theme
   =========================================================================== */
body[data-template="particle"] {
    --pt-bg: #121922;
    --pt-panel: #151d2c;
    --pt-panel-2: #101827;
    --pt-line: rgba(111,102,255,.28);
    --pt-text: #eef2f8;
    --pt-muted: #9caac0;
    --pt-blue: #319cff;
    --pt-cyan: #22d3ee;
    --pt-pink: #ff3d6e;
    --pt-purple: #7367ff;
    --pt-max: 1320px;
    margin: 0;
    min-height: 100vh;
    background: var(--pt-bg) !important;
    color: var(--pt-text) !important;
    font-family: Inter, system-ui, -apple-system, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
body[data-template="particle"] a { color: inherit; text-decoration: none; }
body[data-template="particle"] svg { width: 1em; height: 1em; vertical-align: -.16em; }
#pt-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .95; }
.pt-nav {
    position: sticky; top: 0; z-index: 10;
    height: 70px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 max(24px,calc((100vw - 1320px)/2 + 24px));
    background: rgba(16,24,39,.94); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px);
}
.pt-brand { font-size: clamp(1.55rem,2.4vw,2rem); font-weight: 900; letter-spacing: .03em; background: linear-gradient(90deg,#6967ff,#12cfff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pt-nav nav { display: flex; gap: 22px; font-size: 1rem; font-weight: 800; }
.pt-nav nav a { padding: 8px 3px; color: var(--pt-text); transition: color .15s; }
.pt-nav nav a:hover { color: var(--pt-cyan); }
.pt-main { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 0 22px 64px; }
.pt-hero { min-height: 560px; display: grid; grid-template-columns: 1fr .78fr; align-items: center; gap: 54px; padding: 40px 0; }
.pt-hero-card {
    max-width: 590px; padding: 40px 38px; border-radius: 20px;
    background: rgba(21,29,44,.88); border: 1px solid rgba(108,99,255,.22);
    box-shadow: 0 30px 90px rgba(0,0,0,.25);
}
.pt-hero-card h1 { margin: 0 0 14px; font-size: clamp(2.35rem,4vw,3.6rem); line-height: 1.22; color: #fff; }
.pt-hero-card h1 span { background: linear-gradient(90deg,#6c63ff,#22c9ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pt-hero-card p { color: var(--pt-muted); font-size: 1.05rem; line-height: 1.75; max-width: 560px; margin: 0; }
.pt-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.pt-actions a, .pt-contact button {
    min-height: 48px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 26px; border-radius: 999px; border: 2px solid var(--pt-purple);
    color: var(--pt-text); text-transform: uppercase; letter-spacing: .08em; font-weight: 900; font-size: .86rem;
    transition: transform .15s, box-shadow .15s; cursor: pointer;
}
.pt-actions a:hover, .pt-contact button:hover { transform: translateY(-2px); }
.pt-actions .hot { background: linear-gradient(135deg,#ff326d,#ff5b74); border: 0; box-shadow: 0 14px 30px rgba(255,61,110,.35); color: #fff; }
.pt-actions .cool, .pt-contact button { background: linear-gradient(135deg,#21d4fd,#3187e5); border: 0; box-shadow: 0 14px 30px rgba(34,211,238,.28); color: #fff; }
.pt-photo-wrap { justify-self: center; width: min(340px,76vw); aspect-ratio: 1; padding: 5px; border-radius: 50%; background: linear-gradient(135deg,var(--pt-purple),#272165); box-shadow: 0 0 60px rgba(115,103,255,.32); }
.pt-photo-wrap img, .pt-photo-wrap span { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; object-fit: cover; background: var(--pt-panel); font-size: 5rem; font-weight: 900; color: #fff; }
.pt-section { padding: 48px 0; }
.pt-section h2 { margin: 0 0 38px; text-align: center; color: var(--pt-blue); font-size: clamp(2.25rem,4vw,3.2rem); line-height: 1; }
.pt-skill-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-width: 1050px; margin: 0 auto; }
.pt-skill-card {
    flex: 0 1 180px;
    min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    border-radius: 18px; background: rgba(20,29,45,.78); border: 1px solid rgba(119,129,255,.18);
    transition: transform .2s, border-color .2s; padding: 18px;
}
.pt-skill-card:hover { transform: translateY(-4px); border-color: rgba(34,211,238,.4); }
.pt-skill-card .pt-sk-icon { font-size: 2.2rem; filter: drop-shadow(0 8px 14px rgba(0,0,0,.3)); }
.pt-skill-card h3 { margin: 0; font-size: 1rem; color: #eef2f8; text-align: center; }
.pt-extra { max-width: 620px; margin: 34px auto 0; overflow: hidden; border-radius: 20px; background: rgba(15,23,37,.9); border: 1px solid var(--pt-line); box-shadow: 0 20px 70px rgba(61,55,160,.22); }
.pt-extra-head { min-height: 64px; display: flex; align-items: center; justify-content: center; position: relative; background: rgba(255,255,255,.04); }
.pt-extra-head h3 { margin: 0; font-size: 1.25rem; color: #fff; }
.pt-extra-head span { position: absolute; right: 26px; width: 12px; height: 12px; border-top: 3px solid var(--pt-pink); border-left: 3px solid var(--pt-pink); transform: rotate(45deg); }
.pt-extra ul { list-style: none; margin: 0; padding: 20px 30px; color: var(--pt-muted); font-size: 1rem; display: flex; flex-wrap: wrap; gap: 10px; }
.pt-extra li { margin: 4px 0; position: relative; padding-left: 20px; }
.pt-extra li::before { content: ""; position: absolute; left: 0; top: .65em; width: 7px; height: 7px; background: var(--pt-cyan); transform: rotate(45deg); }
.pt-exp-list { max-width: 850px; margin: 0 auto; display: grid; gap: 26px; }
.pt-exp-card { padding: 36px 38px; border-radius: 20px; background: rgba(20,29,45,.86); border: 1px solid rgba(108,99,255,.24); box-shadow: inset 4px 0 0 var(--pt-pink); }
.pt-exp-card h3 { margin: 0 0 8px; color: var(--pt-cyan); font-size: 1.5rem; text-transform: uppercase; letter-spacing: .06em; }
.pt-exp-card h4 { margin: 0 0 18px; font-size: 1.15rem; color: #fff; }
.pt-exp-card ul { color: var(--pt-muted); font-size: 1rem; line-height: 1.7; margin: 0; padding-left: 20px; }
.pt-exp-card li { margin-bottom: 6px; }
.pt-date { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.09); color: var(--pt-pink); text-align: right; font-style: italic; font-weight: 800; font-size: .92rem; }
.pt-projects { display: grid; gap: 36px; max-width: 1100px; margin: 0 auto; }
.pt-project { display: grid; grid-template-columns: 1.08fr .92fr; gap: 30px; align-items: center; background: rgba(20,29,45,.7); border: 1px solid rgba(108,99,255,.2); border-radius: 20px; padding: 24px; }
.pt-project:nth-child(even) { grid-template-columns: .85fr 1.15fr; }
.pt-project:nth-child(even) .pt-project-shot { order: 2; }
.pt-project-shot { aspect-ratio: 16/10; border-radius: 16px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg,#172033,#0f1726); border: 1px solid rgba(108,99,255,.24); }
.pt-project-shot img { width: 100%; height: 100%; object-fit: cover; }
.pt-project-shot span { font-size: 3.5rem; font-weight: 900; color: var(--pt-blue); }
.pt-project-info h3 { margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 1.45rem; color: var(--pt-text); }
.pt-project-info h3 a { font-size: .76rem; color: var(--pt-cyan); border: 1px solid rgba(34,211,238,.35); border-radius: 8px; padding: 6px 10px; transition: background .15s; }
.pt-project-info h3 a:hover { background: rgba(34,211,238,.15); }
.pt-project-info .stack { color: var(--pt-cyan); font-weight: 800; font-size: .92rem; margin: 0 0 10px; }
.pt-project-info ul { color: var(--pt-muted); font-size: .95rem; line-height: 1.6; padding-left: 20px; margin: 0; }
.pt-contact form { max-width: 720px; margin: 0 auto; display: grid; gap: 20px; }
.pt-contact label { display: grid; gap: 8px; font-size: .95rem; font-weight: 800; color: var(--pt-text); }
.pt-contact input, .pt-contact textarea { width: 100%; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.06); color: var(--pt-text); padding: 15px; font: inherit; box-sizing: border-box; }
.pt-contact textarea { min-height: 130px; resize: vertical; }
.pt-contact button { width: max-content; margin: 14px auto 0; cursor: pointer; }
.pt-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 30px; color: var(--pt-muted); }
.pt-socials a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: var(--pt-text); font-size: .9rem; font-weight: 600; transition: border-color .15s, color .15s; }
.pt-socials a:hover { border-color: var(--pt-cyan); color: var(--pt-cyan); }
.pt-footer { border-top: 1px solid rgba(255,255,255,.08); padding: 28px 24px; text-align: center; color: var(--pt-muted); font-size: .84rem; position: relative; z-index: 1; }

@media (max-width: 980px) {
    .pt-nav { height: auto; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
    .pt-nav nav { width: 100%; overflow-x: auto; gap: 16px; font-size: .94rem; }
    .pt-hero, .pt-project, .pt-project:nth-child(even) { grid-template-columns: 1fr; }
    .pt-hero { min-height: auto; gap: 32px; padding: 42px 0; }
    .pt-photo-wrap { order: -1; width: min(300px,72vw); }
    .pt-project:nth-child(even) .pt-project-shot { order: 0; }
}
@media (max-width: 560px) {
    .pt-main { padding-left: 14px; padding-right: 14px; }
    .pt-hero-card, .pt-exp-card { padding: 28px 20px; }
    .pt-hero-card h1 { font-size: clamp(2rem,12vw,2.8rem); }
    .pt-actions a, .pt-contact button { min-height: 44px; padding: 0 20px; font-size: .78rem; }
    .pt-skill-grid { gap: 14px; }
    .pt-skill-card { flex-basis: 145px; min-height: 140px; border-radius: 16px; }
    .pt-skill-card h3 { font-size: .92rem; }
    .pt-extra ul { padding: 18px 20px; }
}


/* ===========================================================================
   Panels Theme — Tabbed Viewport Panels
   =========================================================================== */
body[data-template="panels"] {
    --pn-bg: #f5f6fb;
    --pn-card: #ffffff;
    --pn-ink: #1a1f2e;
    --pn-head: #11151f;
    --pn-dim: #5b6478;
    --pn-faint: #8a93a6;
    --pn-blue: #2f6bff;
    --pn-purple: #4f3aa0;
    --pn-border: #e6e8f0;
    --pn-dark: #1e2433;
    --pn-radius: 18px;
    --pn-max: 1180px;
    --pn-font: 'Inter', system-ui, -apple-system, sans-serif;
    --pn-display: 'Inter', system-ui, sans-serif;
    --pn-mono: ui-monospace, SFMono-Regular, monospace;
    margin: 0;
    font-family: var(--pn-font);
    color: var(--pn-dim) !important;
    background: var(--pn-bg) !important;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
body[data-template="panels"] a { color: inherit; text-decoration: none; }
body[data-template="panels"] img { max-width: 100%; }
body[data-template="panels"] h1, body[data-template="panels"] h2, body[data-template="panels"] h3, body[data-template="panels"] h4 { color: var(--pn-head); font-family: var(--pn-display); }

.pn-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* ---- Hero ---- */
.pn-hero { background: linear-gradient(135deg, #2a1d5e 0%, #4f3aa0 55%, #6b4bb8 100%); color: #fff; padding: 30px 0 150px; position: relative; }
.pn-hero-top { display: flex; align-items: center; justify-content: space-between; }
.pn-brand { font-family: var(--pn-display); font-weight: 800; font-size: 1.5rem; color: #fff; }
.pn-hero-badge { width: 42px; height: 42px; border-radius: 11px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; color: #fff; border: none; cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.pn-hero-badge:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }
.pn-hero-badge svg { width: 22px; height: 22px; }
.pn-i-sun { display: none; }
body[data-template="panels"].pn-dark .pn-i-sun, html.pn-dark body[data-template="panels"] .pn-i-sun { display: block; }
body[data-template="panels"].pn-dark .pn-i-moon, html.pn-dark body[data-template="panels"] .pn-i-moon { display: none; }
.pn-hi { color: rgba(255,255,255,.85); font-size: 1.2rem; margin: 70px 0 8px; }
.pn-name { font-family: var(--pn-display); font-weight: 800; color: #fff; font-size: clamp(2.6rem, 6vw, 4.4rem); margin: 0 0 14px; letter-spacing: -.01em; line-height: 1.15; }
.pn-tagline { font-family: var(--pn-mono); color: rgba(255,255,255,.8); font-size: 1.05rem; }

/* ---- Tabbed card ---- */
.pn-shell { max-width: 1180px; margin: -110px auto 60px; padding: 0 28px; position: relative; z-index: 2; }
.pn-card { background: var(--pn-card); border-radius: 24px; box-shadow: 0 30px 70px -30px rgba(31,30,80,.35); display: grid; grid-template-columns: 250px 1fr; overflow: hidden; min-height: 560px; border: 1px solid var(--pn-border); }
.pn-tabs { padding: 26px 18px; border-right: 1px solid var(--pn-border); display: flex; flex-direction: column; gap: 6px; }
.pn-tab { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 12px; cursor: pointer; color: var(--pn-dim); font-weight: 600; font-size: .95rem; border: none; background: none; text-align: left; transition: all .18s; font-family: inherit; }
.pn-tab svg { width: 18px; height: 18px; flex-shrink: 0; }
.pn-tab:hover { background: #f1f3f9; color: var(--pn-ink); }
.pn-tab.on { background: var(--pn-blue); color: #fff !important; box-shadow: 0 8px 20px -8px var(--pn-blue); }

.pn-content { padding: 40px 44px; }
.pn-panel { display: none; animation: pnFade .3s ease; }
.pn-panel.on { display: block; }
@keyframes pnFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pn-panel-head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.pn-panel-ic { width: 58px; height: 58px; border-radius: 14px; background: linear-gradient(135deg, #eef1ff, #e3e8ff); display: flex; align-items: center; justify-content: center; color: var(--pn-blue); flex-shrink: 0; box-shadow: 0 8px 20px -12px rgba(47,107,255,.5); }
.pn-panel-ic svg { width: 28px; height: 28px; }
.pn-panel-head h2 { font-size: 1.7rem; font-weight: 800; margin: 0; }

/* Who am I */
.pn-whohead { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.pn-photo { width: 84px; height: 84px; border-radius: 16px; object-fit: cover; flex-shrink: 0; }
.pn-photo.ph { display: flex; align-items: center; justify-content: center; font-family: var(--pn-display); font-weight: 800; font-size: 2rem; color: #fff; background: linear-gradient(135deg, var(--pn-blue), var(--pn-purple)); }
.pn-status { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.pn-stat { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border: 1px solid var(--pn-border); border-radius: 999px; font-size: .85rem; color: var(--pn-ink); font-weight: 500; }
.pn-stat .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.pn-stat svg { width: 15px; height: 15px; color: var(--pn-blue); }
.pn-prose p { color: var(--pn-dim); font-size: 1.02rem; margin: 0 0 16px; line-height: 1.7; }
.pn-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.pn-btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .95rem; padding: 13px 24px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; transition: all .2s; }
.pn-btn-dark { background: var(--pn-dark); color: #fff !important; box-shadow: 0 0 22px -6px rgba(79,58,160,.6); }
.pn-btn-dark:hover { transform: translateY(-2px); }
.pn-btn-light { background: #f1f3f9; color: var(--pn-ink); border-color: var(--pn-border); }
.pn-btn-light:hover { background: #e8ebf4; }
.pn-btn-blue { background: var(--pn-blue); color: #fff !important; }

/* Superpowers */
.pn-intro { color: var(--pn-dim); font-size: 1.05rem; margin: 0 0 28px; max-width: 60ch; }
.pn-subh { color: var(--pn-head); font-size: 1.25rem; font-weight: 800; margin: 0 0 16px; }
.pn-skill-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pn-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border: 1px solid var(--pn-border); border-radius: 999px; font-size: .88rem; color: var(--pn-ink); background: #fff; }

/* Experience / cards */
.pn-exp { border: 1px solid var(--pn-border); border-radius: 16px; padding: 24px 26px; margin-bottom: 16px; background: #fcfcff; }
.pn-exp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pn-exp-org { display: flex; align-items: center; gap: 12px; }
.pn-exp-logo { width: 42px; height: 42px; border-radius: 11px; background: linear-gradient(135deg,#eef1ff,#e3e8ff); color: var(--pn-blue); display: flex; align-items: center; justify-content: center; font-family: var(--pn-display); font-weight: 800; flex-shrink: 0; }
.pn-exp-org h3 { font-size: 1.2rem; margin: 0; }
.pn-exp-date { color: var(--pn-faint); font-size: .85rem; }
.pn-exp-role { color: var(--pn-blue); font-weight: 600; margin: 10px 0 0; }
.pn-plus { list-style: none; margin: 14px 0 0; padding: 0; }
.pn-plus li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--pn-dim); font-size: .95rem; }
.pn-plus li::before { content: "✚"; position: absolute; left: 0; top: 1px; color: #22c55e; font-size: .8rem; }

/* Projects */
.pn-proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px,100%),1fr)); gap: 18px; }
.pn-proj { position: relative; border-radius: 18px; overflow: hidden; min-height: 230px; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; color: #fff; background: linear-gradient(160deg, #2a2550, #1c1838); }
.pn-proj-bg { position: absolute; inset: 0; }
.pn-proj-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.pn-proj::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(10,8,24,.85)); }
.pn-proj-links { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; z-index: 2; }
.pn-proj-links a { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.18); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; color: #fff; }
.pn-proj-links svg { width: 16px; height: 16px; }
.pn-proj h3 { position: relative; z-index: 2; color: #fff; font-size: 1.35rem; font-weight: 800; margin: 0 0 8px; }
.pn-proj p { position: relative; z-index: 2; color: rgba(255,255,255,.85); font-size: .9rem; margin: 0; }

/* Academic */
.pn-edu { border: 1px solid var(--pn-border); border-radius: 16px; padding: 22px 26px; margin-bottom: 14px; background: #fcfcff; }
.pn-edu-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pn-edu h3 { font-size: 1.1rem; margin: 0; }
.pn-edu .deg { color: var(--pn-dim); margin-top: 4px; }
.pn-edu .meta { color: var(--pn-faint); font-size: .85rem; text-align: right; }

/* Contact */
.pn-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pn-form .field { margin-bottom: 18px; }
.pn-form label { display: block; color: var(--pn-head); font-weight: 600; font-size: .86rem; margin: 0 0 7px; }
.pn-input, .pn-textarea { width: 100%; background: #f7f8fc; border: 1px solid var(--pn-border); border-radius: 12px; color: var(--pn-ink); padding: 13px 15px; font-family: inherit; font-size: .95rem; box-sizing: border-box; }
.pn-input:focus, .pn-textarea:focus { outline: none; border-color: var(--pn-blue); background: #fff; }
.pn-textarea { min-height: 130px; resize: vertical; }
.pn-form .pn-btn-dark { width: 100%; justify-content: center; padding: 15px; }

/* ---- Footer ---- */
.pn-footer { border-top: 1px solid var(--pn-border); padding: 50px 0; background: var(--pn-card); }
.pn-footer-grid { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.pn-footer h3 { font-size: 1.4rem; margin: 0 0 6px; }
.pn-footer .sub { color: var(--pn-dim); }
.pn-footer-socs { display: flex; gap: 16px; margin-top: 16px; }
.pn-footer-socs a { color: var(--pn-faint); font-size: 1.1rem; }
.pn-footer-socs a:hover { color: var(--pn-blue); }
.pn-copy { text-align: center; color: var(--pn-faint); font-size: .85rem; margin-top: 36px; }

/* Dark mode */
body[data-template="panels"].pn-dark, html.pn-dark body[data-template="panels"] {
    --pn-bg: #0d0f17;
    --pn-card: #151926;
    --pn-ink: #e7e9f2;
    --pn-head: #ffffff;
    --pn-dim: #aab2c6;
    --pn-faint: #717a92;
    --pn-border: #262c3c;
    background: var(--pn-bg) !important;
    color: var(--pn-dim) !important;
}
body[data-template="panels"].pn-dark .pn-card, html.pn-dark body[data-template="panels"] .pn-card { box-shadow: 0 30px 70px -30px rgba(0,0,0,.65); }
body[data-template="panels"].pn-dark .pn-tab:hover, html.pn-dark body[data-template="panels"] .pn-tab:hover { background: #1d2433; color: var(--pn-ink); }
body[data-template="panels"].pn-dark .pn-pill, body[data-template="panels"].pn-dark .pn-exp, body[data-template="panels"].pn-dark .pn-edu { background: #1b2131; }
body[data-template="panels"].pn-dark .pn-input, body[data-template="panels"].pn-dark .pn-textarea { background: #10141e; }
body[data-template="panels"].pn-dark .pn-input:focus, body[data-template="panels"].pn-dark .pn-textarea:focus { background: #161c28; }
body[data-template="panels"].pn-dark .pn-btn-light { background: #1d2433; color: var(--pn-ink); }
body[data-template="panels"].pn-dark .pn-btn-dark { background: var(--pn-blue); }
body[data-template="panels"].pn-dark .pn-panel-ic, body[data-template="panels"].pn-dark .pn-exp-logo { background: linear-gradient(135deg,#1b2440,#1a2038); color: #7aa2ff; }

/* Responsive */
@media (max-width: 820px) {
    .pn-card { grid-template-columns: 1fr; }
    .pn-tabs { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--pn-border); }
    .pn-tab { white-space: nowrap; }
    .pn-content { padding: 28px 22px; }
    .pn-form .row { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .pn-wrap, .pn-shell { padding-left: 16px; padding-right: 16px; } .pn-name { font-size: 2.2rem; } }


/* ===========================================================================
   Monolith Theme — Brutalist Heavy Typography
   =========================================================================== */
body[data-template="monolith"] {
    --mo-bg: #f6f5f0;
    --mo-ink: #020202;
    --mo-muted: #6b7280;
    --mo-paper: #fffefa;
    margin: 0;
    background: var(--mo-bg) !important;
    color: var(--mo-ink) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    overflow-x: hidden;
    line-height: 1.5;
}
body[data-template="monolith"] a { color: inherit; text-decoration: none; }
body[data-template="monolith"] svg { width: 1em; height: 1em; vertical-align: -.15em; }

.mo-nav {
    min-height: 110px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 26px;
    padding: 22px min(6vw,120px);
    background: var(--mo-paper);
    border-bottom: 8px solid var(--mo-ink);
}
.mo-mark { text-decoration: none; text-transform: uppercase; font-style: italic; font-size: clamp(1.8rem,2.5vw,2.6rem); line-height: .92; }
.mo-mark span { display: block; font-weight: 900; }
.mo-mark b { display: block; color: transparent; -webkit-text-stroke: 2px var(--mo-ink); font-weight: 900; }
.mo-nav nav { display: flex; gap: 36px; text-transform: uppercase; letter-spacing: .18em; font-weight: 900; font-size: .82rem; }
.mo-nav nav a { text-decoration: none; transition: opacity .15s; }
.mo-nav nav a:hover { opacity: .6; }
.mo-nav-side { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.mo-nav-side a { text-decoration: none; font-weight: 900; }
.mo-nav-side svg { font-size: 1.3rem; }

.mo-main { border-left: 8px solid var(--mo-ink); border-right: 8px solid var(--mo-ink); }
.mo-hero {
    min-height: 640px;
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0,1fr) minmax(300px,38vw);
    align-items: stretch;
    background:
        radial-gradient(#e5e5e5 1px, transparent 1.4px) 0 0/8px 8px,
        linear-gradient(115deg, transparent 52%, rgba(0,0,0,.08) 52% 72%, transparent 72%),
        var(--mo-paper);
    border-bottom: 8px solid var(--mo-ink);
}
.mo-sideword {
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: .42em;
    color: var(--mo-muted);
    font-weight: 900;
    font-size: .75rem;
    border-right: 2px solid rgba(0,0,0,.1);
}
.mo-sideword::after { content: ""; width: 2px; height: 70px; background: var(--mo-ink); margin-top: 24px; }
.mo-hero-copy { padding: clamp(36px,5vw,60px) 36px; position: relative; z-index: 2; }
.mo-hero h1 {
    margin: 0;
    font-family: Impact, "Arial Black", sans-serif;
    font-size: clamp(4rem,9vw,9rem);
    line-height: .86;
    text-transform: uppercase;
    font-style: italic;
    letter-spacing: -.05em;
    color: var(--mo-ink);
}
.mo-hero h1 span { display: block; }
.mo-role {
    display: inline-block;
    margin: 28px 0 22px;
    padding: 12px 24px;
    background: var(--mo-ink);
    color: var(--mo-paper);
    transform: rotate(-1.5deg);
    font-size: clamp(1rem,1.4vw,1.35rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.mo-hero p { max-width: 800px; color: #4b5563; font-size: clamp(1.05rem,1.5vw,1.4rem); line-height: 1.6; font-weight: 700; margin: 0; }
.mo-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.mo-stats span, .mo-strip span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border: 2px solid var(--mo-ink);
    background: var(--mo-paper);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-weight: 900;
    font-size: .84rem;
}
.mo-portrait { position: relative; overflow: hidden; display: flex; align-items: end; justify-content: center; background: #e5e5e0; }
.mo-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; filter: grayscale(1) contrast(1.2); mix-blend-mode: multiply; }
.mo-portrait span { font-family: Impact, sans-serif; font-size: clamp(6rem,12vw,12rem); color: #c4c4c0; }

.mo-strip { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding: 34px 20px; border-bottom: 6px solid var(--mo-ink); background: var(--mo-paper); }
.mo-section { padding: clamp(48px,6vw,90px) min(6vw,100px); border-bottom: 6px solid var(--mo-ink); background: var(--mo-bg); }
.mo-skills { display: flex; flex-wrap: wrap; gap: 12px; }
.mo-skill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 2px solid var(--mo-ink); background: var(--mo-paper); font-weight: 800; font-size: .95rem; box-shadow: 3px 3px 0 var(--mo-ink); }
.mo-head { display: flex; align-items: center; gap: 20px; margin-bottom: 32px; }
.mo-head span, .mo-label { font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: #9ca3af; font-size: 1.2rem; }
.mo-head h2 { margin: 0; font-family: Impact, sans-serif; text-transform: uppercase; font-size: clamp(2.2rem,4vw,4rem); line-height: .9; color: var(--mo-ink); }
.mo-about p, .mo-contact p { max-width: 900px; color: #4b5563; font-size: clamp(1.1rem,1.8vw,1.6rem); line-height: 1.55; font-weight: 700; margin: 0 0 20px; }

.mo-projects, .mo-timeline { display: grid; gap: 24px; }
.mo-project {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 26px;
    align-items: center;
    padding: 28px;
    background: var(--mo-paper);
    border: 3px solid var(--mo-ink);
    box-shadow: 10px 10px 0 var(--mo-ink);
}
.mo-project-num { font-family: Impact, sans-serif; font-size: 2.8rem; font-style: italic; color: #9ca3af; }
.mo-project h3, .mo-exp h3, .mo-card h3 { margin: 0 0 8px; font-size: clamp(1.25rem,1.8vw,1.9rem); text-transform: uppercase; color: var(--mo-ink); }
.mo-kicker { color: #6b7280; text-transform: uppercase; letter-spacing: .14em; font-weight: 900; font-size: .8rem; margin-bottom: 8px; }
.mo-project p { color: #374151; font-weight: 600; line-height: 1.6; margin: 0; font-size: .96rem; }
.mo-project-links { display: flex; flex-direction: column; gap: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 900; font-size: .84rem; }
.mo-project-links a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 2px solid var(--mo-ink); background: var(--mo-bg); transition: background .15s; }
.mo-project-links a:hover { background: var(--mo-ink); color: #fff; }

.mo-exp { display: grid; grid-template-columns: 200px 1fr; gap: 30px; padding: 26px 0; border-top: 3px solid var(--mo-ink); }
.mo-exp-date { font-weight: 900; color: #6b7280; text-transform: uppercase; letter-spacing: .12em; font-size: .92rem; }
.mo-exp ul { margin: 12px 0 0; padding-left: 20px; font-weight: 600; color: #374151; }
.mo-exp li { margin: 6px 0; line-height: 1.55; }

.mo-cardgrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(300px,100%),1fr)); gap: 20px; }
.mo-card { padding: 26px; background: var(--mo-paper); border: 3px solid var(--mo-ink); box-shadow: 8px 8px 0 var(--mo-ink); }
.mo-card-type { display: inline-block; margin-bottom: 14px; padding: 6px 12px; background: var(--mo-ink); color: var(--mo-paper); text-transform: uppercase; letter-spacing: .16em; font-weight: 900; font-size: .7rem; }
.mo-card p { color: #4b5563; font-weight: 600; margin: 6px 0 0; line-height: 1.5; }

.mo-contact-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.mo-contact-links a { padding: 14px 22px; border: 3px solid var(--mo-ink); background: var(--mo-paper); text-decoration: none; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; box-shadow: 6px 6px 0 var(--mo-ink); transition: transform .15s; }
.mo-contact-links a:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--mo-ink); }
.mo-footer { padding: 36px 20px; text-align: center; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; font-size: .86rem; background: var(--mo-paper); border-top: 6px solid var(--mo-ink); color: #4b5563; }

@media (max-width: 980px) {
    .mo-nav { grid-template-columns: 1fr; gap: 16px; padding: 18px 24px; }
    .mo-nav nav, .mo-nav-side { justify-content: flex-start; flex-wrap: wrap; }
    .mo-hero { grid-template-columns: 1fr; }
    .mo-sideword { display: none; }
    .mo-portrait { min-height: 320px; order: -1; }
    .mo-project { grid-template-columns: 1fr; }
    .mo-project-links { flex-direction: row; flex-wrap: wrap; }
    .mo-exp { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 560px) {
    .mo-main { border-left-width: 4px; border-right-width: 4px; }
    .mo-nav { border-bottom-width: 5px; padding: 16px; }
    .mo-nav nav { gap: 16px; font-size: .74rem; }
    .mo-hero-copy { padding: 26px 16px; }
    .mo-section { padding: 42px 16px; }
}


/* ===========================================================================
   Editor Theme — VS Code IDE Interface
   =========================================================================== */
body[data-template="editor"] {
    --ed-bg: #1e1e1e;
    --ed-chrome: #252526;
    --ed-titlebar: #323233;
    --ed-activity: #333333;
    --ed-panel: #252526;
    --ed-panel-2: #2d2d2d;
    --ed-border: #2b2b2b;
    --ed-border-2: #3c3c3c;
    --ed-ink: #d4d4d4;
    --ed-dim: #a0a0a0;
    --ed-faint: #6e7681;
    --ed-green: #6a9955;
    --ed-blue: #569cd6;
    --ed-teal: #4ec9b0;
    --ed-orange: #ce9178;
    --ed-yellow: #dcdcaa;
    --ed-purple: #c586c0;
    --ed-var: #9cdcfe;
    --ed-num: #b5cea8;
    --ed-accent: #0078d4;
    --ed-btn: #0e639c;
    --ed-btn-hover: #1177bb;
    --ed-status: #007acc;
    --ed-mono: ui-monospace, Consolas, SFMono-Regular, monospace;
    --ed-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    min-height: 100vh;
    font-family: var(--ed-mono);
    color: var(--ed-ink) !important;
    background: var(--ed-bg) !important;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
}
body[data-template="editor"] a { color: inherit; text-decoration: none; }
body[data-template="editor"] img { max-width: 100%; }

.ed-app { display: flex; flex-direction: column; min-height: 100vh; }
.ed-titlebar {
    flex-shrink: 0; height: 32px; display: flex; align-items: center; gap: 16px;
    background: var(--ed-titlebar); border-bottom: 1px solid var(--ed-border); padding: 0 12px;
    position: relative; font-family: var(--ed-display);
}
.ed-lights { display: flex; gap: 8px; }
.ed-lights span { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.ed-lights .r { background: #ff5f57; } .ed-lights .y { background: #febc2e; } .ed-lights .g { background: #28c840; }
.ed-menu { display: flex; gap: 15px; color: #cccccc; font-size: 12px; }
.ed-cmdpill {
    position: absolute; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px; max-width: 42vw;
    background: #1e1e1e; border: 1px solid var(--ed-border-2); border-radius: 6px;
    padding: 3px 12px; color: var(--ed-dim); font-size: 12px; white-space: nowrap; overflow: hidden;
    font-family: var(--ed-display);
}
.ed-cmdpill .dot { color: var(--ed-num); font-size: 9px; }
.ed-cmdpill .kbd { background: var(--ed-border-2); border-radius: 4px; padding: 1px 6px; font-size: 11px; color: var(--ed-ink); }

.ed-body { flex: 1; display: flex; min-height: 0; }
.ed-activity {
    flex-shrink: 0; width: 48px; background: var(--ed-activity);
    display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 12px 0;
}
.ed-activity svg { width: 22px; height: 22px; color: #858585; }
.ed-activity span { position: relative; display: flex; padding: 4px 0; cursor: pointer; }
.ed-activity .on svg { color: #fff; }
.ed-activity .on::before { content: ""; position: absolute; left: -12px; top: 0; bottom: 0; width: 2px; background: #fff; }

.ed-explorer {
    flex-shrink: 0; width: 230px; background: var(--ed-chrome);
    display: flex; flex-direction: column; overflow-y: auto; border-right: 1px solid var(--ed-border);
}
.ed-explorer-title { padding: 12px 18px 6px; font-size: 11px; letter-spacing: .06em; color: var(--ed-dim); font-family: var(--ed-display); text-transform: uppercase; }
.ed-file {
    display: flex; align-items: center; gap: 8px; padding: 5px 16px; cursor: pointer; color: #cccccc;
    font-size: 13px; font-family: var(--ed-display); border-left: 2px solid transparent; transition: background .12s;
}
.ed-file:hover { background: #2a2d2e; }
.ed-file.active { background: #37373d; color: #fff; border-left-color: var(--ed-accent); }
.ed-file .fi { width: 15px; text-align: center; font-size: 12px; flex-shrink: 0; font-family: monospace; }
.fi-tsx { color: #4d9fff; } .fi-html { color: #e44d26; } .fi-js { color: #f1dd35; }
.fi-json { color: #cbcb41; } .fi-ts { color: #4d9fff; } .fi-css { color: #42a5f5; }
.fi-md { color: #8b90a8; }
.ed-explorer-spacer { flex: 1; }
.ed-explorer-foot { padding: 12px; border-top: 1px solid var(--ed-border); }
.ed-copilot-chip {
    display: flex; align-items: center; gap: 7px; background: #2d2d2d;
    border: 1px solid var(--ed-border-2); border-radius: 6px; padding: 7px 11px;
    color: var(--ed-var); font-size: 12px; font-family: var(--ed-display);
}

.ed-editor { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--ed-bg); }
.ed-tabs { flex-shrink: 0; display: flex; background: var(--ed-chrome); overflow-x: auto; border-bottom: 1px solid var(--ed-border); }
.ed-tab {
    display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 35px; font-size: 13px; color: #969696;
    border-right: 1px solid var(--ed-border); white-space: nowrap; cursor: pointer; border-top: 2px solid transparent;
    font-family: var(--ed-display);
}
.ed-tab:hover { color: #cccccc; }
.ed-tab.active { background: var(--ed-bg); color: #fff; border-top-color: var(--ed-accent); }
.ed-breadcrumb { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 6px 22px; color: var(--ed-faint); font-size: 12px; background: var(--ed-bg); font-family: var(--ed-display); border-bottom: 1px solid rgba(255,255,255,.04); }
.ed-breadcrumb .sep { opacity: .6; }

.ed-scroll { flex: 1; overflow-y: auto; scroll-behavior: smooth; }
.ed-content { max-width: 980px; padding: 36px 40px 80px; }

.ed-comment { color: var(--ed-green); font-size: 14px; margin-bottom: 14px; font-family: var(--ed-mono); }
.ed-h { font-family: var(--ed-display); font-weight: 700; color: #fff; font-size: clamp(2rem,4vw,2.8rem); margin: 0 0 6px; letter-spacing: -.02em; }
.ed-subcomment { color: var(--ed-faint); font-size: 13px; margin: 0 0 24px; font-family: var(--ed-mono); }
.ed-section { margin-bottom: 60px; scroll-margin-top: 14px; }

.ed-name { font-family: var(--ed-display); font-weight: 700; line-height: 1; margin: 6px 0 20px; letter-spacing: -.03em; font-size: clamp(2.8rem, 7vw, 5rem); }
.ed-name .first { color: #fff; display: block; }
.ed-name .last { display: block; color: var(--ed-blue); }
.ed-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.ed-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--ed-border-2); border-radius: 6px; padding: 6px 12px; font-size: 12px; color: var(--ed-ink); background: var(--ed-panel); font-family: var(--ed-display); }
.ed-pill .d { width: 7px; height: 7px; border-radius: 50%; background: var(--ed-num); }
.ed-pill.accent { border-color: rgba(86,156,214,.5); color: var(--ed-var); }
.ed-tagline { color: var(--ed-dim); font-size: 14px; margin: 0 0 16px; font-family: var(--ed-display); }
.ed-lead { color: var(--ed-dim); font-size: 14px; line-height: 1.8; max-width: 65ch; margin: 0 0 24px; font-family: var(--ed-display); }

.ed-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ed-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ed-display); font-size: 13px; padding: 8px 16px; border-radius: 4px; border: 1px solid var(--ed-border-2); color: var(--ed-ink); background: var(--ed-panel-2); cursor: pointer; transition: all .12s; }
.ed-btn:hover { background: #3a3a3a; border-color: #505050; color: #fff; }
.ed-btn.primary { background: var(--ed-btn); border-color: var(--ed-btn); color: #fff !important; font-weight: 600; }
.ed-btn.primary:hover { background: var(--ed-btn-hover); border-color: var(--ed-btn-hover); }

.ed-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: 1px; background: var(--ed-border-2); border: 1px solid var(--ed-border-2); border-radius: 8px; overflow: hidden; margin-top: 36px; }
.ed-stat { background: var(--ed-bg); padding: 22px 16px; text-align: center; }
.ed-stat .v { font-family: var(--ed-display); font-weight: 700; font-size: 1.8rem; color: var(--ed-blue); }
.ed-stat .l { font-size: 10.5px; letter-spacing: .1em; color: var(--ed-faint); margin-top: 4px; font-family: var(--ed-display); }

.ed-box { border: 1px solid var(--ed-border-2); border-radius: 8px; padding: 20px 22px; background: var(--ed-panel); color: var(--ed-dim); font-size: 14px; line-height: 1.8; font-family: var(--ed-display); }

.ed-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px,100%),1fr)); gap: 18px; }
.ed-pcard { border: 1px solid var(--ed-border-2); border-radius: 10px; background: var(--ed-panel); overflow: hidden; display: flex; flex-direction: column; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.ed-pcard:hover { transform: translateY(-4px); border-color: #4a4a4a; box-shadow: 0 14px 34px rgba(0,0,0,.42); }
.ed-pcard-bar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: #2d2d2d; border-bottom: 1px solid var(--ed-border); }
.ed-pcard-bar .dots { display: inline-flex; gap: 6px; }
.ed-pcard-bar .dots i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ed-pcard-bar .dots i:nth-child(1) { background: #ff5f57; }
.ed-pcard-bar .dots i:nth-child(2) { background: #febc2e; }
.ed-pcard-bar .dots i:nth-child(3) { background: #28c840; }
.ed-pcard-bar .fn { color: var(--ed-dim); font-size: 12px; font-family: var(--ed-mono); }
.ed-pcard-bar .idx { margin-left: auto; color: var(--ed-faint); font-size: 12px; font-family: var(--ed-mono); }
.ed-pcard-body { padding: 18px 20px; display: flex; flex-direction: column; flex: 1; }
.ed-pcard-body .ed-cat { color: var(--ed-orange); font-size: 11px; letter-spacing: .08em; margin-bottom: 4px; font-family: var(--ed-mono); }
.ed-pcard-body h3 { font-family: var(--ed-display); font-weight: 600; color: #fff; font-size: 1.18rem; margin: 0 0 10px; }
.ed-pcard-body p { color: var(--ed-dim); font-size: 13px; line-height: 1.6; margin: 0 0 14px; font-family: var(--ed-display); }
.ed-pcard-links { display: flex; gap: 10px; margin-top: auto; padding-top: 14px; }
.ed-plink { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ed-display); font-size: 12.5px; padding: 6px 12px; border-radius: 4px; border: 1px solid var(--ed-border-2); color: var(--ed-ink); transition: all .12s; }
.ed-plink:hover { border-color: #5a5a5a; background: #333; color: #fff; }
.ed-plink.primary { background: var(--ed-btn); border-color: var(--ed-btn); color: #fff; }

.ed-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.ed-chip { border: 1px solid var(--ed-border-2); border-radius: 6px; padding: 6px 12px; font-size: 12.5px; color: var(--ed-ink); background: var(--ed-panel); font-family: var(--ed-display); }
.ed-chip:hover { border-color: var(--ed-teal); color: var(--ed-teal); }

.ed-tl { display: flex; flex-direction: column; gap: 6px; }
.ed-tl-item { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 14px 16px; border-radius: 8px; border: 1px solid transparent; }
.ed-tl-item:hover { background: var(--ed-panel); border-color: var(--ed-border-2); }
.ed-tl-date { color: var(--ed-faint); font-size: 12px; padding-top: 2px; }
.ed-tl h3 { font-family: var(--ed-display); font-weight: 600; color: #fff; font-size: 1.05rem; margin: 0 0 4px; }
.ed-tl .at { color: var(--ed-teal); }

.ed-edu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px,100%),1fr)); gap: 14px; }
.ed-edu { border: 1px solid var(--ed-border-2); border-radius: 8px; padding: 18px; background: var(--ed-panel); }
.ed-edu h3 { font-family: var(--ed-display); font-weight: 600; color: #fff; font-size: 1.02rem; margin: 0 0 5px; }
.ed-edu .deg { color: var(--ed-dim); font-size: 13px; font-family: var(--ed-display); }
.ed-edu .meta { color: var(--ed-faint); font-size: 12px; margin-top: 6px; }

.ed-socials { display: flex; gap: 12px; margin-top: 18px; }
.ed-soc { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ed-border-2); border-radius: 6px; color: var(--ed-dim); transition: all .12s; }
.ed-soc svg { width: 18px; height: 18px; }
.ed-soc:hover { color: var(--ed-blue); border-color: var(--ed-blue); }

.ed-copilot { flex-shrink: 0; width: 330px; background: var(--ed-chrome); border-left: 1px solid var(--ed-border); display: flex; flex-direction: column; }
.ed-copilot-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--ed-border); color: var(--ed-ink); font-size: 13px; font-family: var(--ed-display); }
.ed-copilot-live { margin-left: auto; color: var(--ed-num); font-size: 10.5px; display: inline-flex; align-items: center; gap: 4px; }
.ed-copilot-ws { padding: 12px 16px; font-size: 11px; color: var(--ed-faint); letter-spacing: .06em; font-family: var(--ed-display); }
.ed-copilot-ws .b { display: inline-flex; align-items: center; gap: 6px; color: var(--ed-var); background: #2d2d2d; border: 1px solid var(--ed-border-2); border-radius: 4px; padding: 3px 9px; margin-top: 6px; }
.ed-copilot-body { flex: 1; overflow-y: auto; padding: 8px 16px; }
.ed-msg { display: flex; gap: 10px; margin-bottom: 14px; }
.ed-msg .av { width: 26px; height: 26px; border-radius: 6px; background: linear-gradient(135deg,var(--ed-accent),var(--ed-teal)); flex-shrink: 0; }
.ed-msg .tx { color: var(--ed-dim); font-size: 13px; line-height: 1.7; font-family: var(--ed-display); white-space: pre-line; background: #2d2d2d; border-radius: 10px 10px 10px 2px; padding: 9px 12px; }
.ed-msg .tx b { color: var(--ed-ink); font-weight: 600; }
.ed-msg-user { flex-direction: row-reverse; }
.ed-msg-user .tx { background: var(--ed-btn); color: #fff; border-radius: 10px 10px 2px 10px; }
.ed-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px 0; }
.ed-chip-q { font-family: var(--ed-display); font-size: 11.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--ed-border-2); background: transparent; color: var(--ed-dim); cursor: pointer; transition: all .12s; }
.ed-chip-q:hover { color: #fff; border-color: var(--ed-accent); background: rgba(0,120,212,.12); }
.ed-copilot-input { display: flex; align-items: center; gap: 8px; margin: 10px 16px 16px; border: 1px solid var(--ed-border-2); border-radius: 8px; padding: 4px 4px 4px 12px; background: #1e1e1e; }
.ed-copilot-input input { flex: 1; background: transparent; border: none; outline: none; color: var(--ed-ink); font-size: 12.5px; font-family: var(--ed-display); padding: 7px 0; }
.ed-copilot-input input::placeholder { color: var(--ed-faint); }
.ed-copilot-input button { flex-shrink: 0; width: 30px; height: 30px; border: none; border-radius: 6px; background: var(--ed-btn); color: #fff; cursor: pointer; font-size: 13px; transition: background .12s; }
.ed-copilot-input button:hover { background: var(--ed-btn-hover); }

.ed-status { flex-shrink: 0; height: 24px; background: var(--ed-status); display: flex; align-items: center; gap: 14px; padding: 0 12px; color: #fff; font-size: 12px; font-family: var(--ed-display); }
.ed-status .right { margin-left: auto; display: flex; gap: 14px; }
.ed-status .seg { display: inline-flex; align-items: center; gap: 5px; }

@media (max-width: 900px) {
    .ed-activity, .ed-explorer, .ed-copilot, .ed-cmdpill { display: none; }
    .ed-content { padding: 24px 18px 60px; }
    .ed-tl-item { grid-template-columns: 1fr; gap: 4px; }
}


/* ===========================================================================
   Magazine Theme — Editorial Broadsheet & Fraunces Serif
   =========================================================================== */
body[data-template="magazine"] {
  --mz-bg: #f7f4ee;
  --mz-ink: #16140f;
  --mz-mut: #6b665b;
  --mz-ac: #c8442b;
  --mz-line: #16140f;
  margin: 0;
  min-height: 100vh;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--mz-bg) !important;
  color: var(--mz-ink) !important;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body[data-template="magazine"] a { color: inherit; text-decoration: none; }
body[data-template="magazine"] h1,
body[data-template="magazine"] h2,
body[data-template="magazine"] h3,
body[data-template="magazine"] .serif {
  font-family: Fraunces, Georgia, "Times New Roman", serif;
}

.mz-wrap { max-width: 1080px; margin: 0 auto; padding: 0 26px; }

.mz-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 26px; border-bottom: 2px solid var(--mz-line);
  position: sticky; top: 0; background: var(--mz-bg); z-index: 20;
}
.mz-nav .mz-brand {
  font-family: Fraunces, Georgia, serif; font-weight: 900; font-size: 22px; letter-spacing: -.01em;
}
.mz-nav .mz-lk { display: flex; gap: 24px; }
.mz-nav .mz-lk a {
  font-size: 13px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--mz-mut); transition: color .2s;
}
.mz-nav .mz-lk a:hover { color: var(--mz-ac); }
@media (max-width: 680px) { .mz-nav .mz-lk { display: none; } }

.mz-mast {
  padding: 30px 0 14px; border-bottom: 1px solid var(--mz-line);
  display: flex; justify-content: space-between; font-size: 12px;
  text-transform: uppercase; letter-spacing: .14em; color: var(--mz-mut);
}

.mz-hero { padding: 46px 0; border-bottom: 4px double var(--mz-line); }
.mz-hero .mz-kicker {
  color: var(--mz-ac); text-transform: uppercase; letter-spacing: .2em;
  font-size: 13px; font-weight: 600; margin-bottom: 16px;
}
.mz-hero h1 {
  font-size: clamp(44px, 9vw, 98px); font-weight: 900; line-height: .92;
  letter-spacing: -.02em; margin: 0;
}
.mz-hero .mz-lead {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px;
  margin-top: 26px; align-items: end;
}
@media (max-width: 760px) { .mz-hero .mz-lead { grid-template-columns: 1fr; } }
.mz-hero .mz-role { font-family: Fraunces, Georgia, serif; font-size: 24px; font-weight: 600; }
.mz-hero .mz-dek {
  color: var(--mz-mut); font-size: 17px; border-left: 3px solid var(--mz-ac);
  padding-left: 16px; line-height: 1.6;
}
.mz-cta { display: flex; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
.mz-btn {
  padding: 12px 24px; font-weight: 600; font-size: 14px;
  border: 2px solid var(--mz-line); transition: all .2s;
  display: inline-flex; gap: 8px; align-items: center; cursor: pointer;
}
.mz-btn.p { background: var(--mz-ink); color: var(--mz-bg) !important; }
.mz-btn.p:hover { background: var(--mz-ac); border-color: var(--mz-ac); }
.mz-btn.s { background: transparent; color: var(--mz-ink); }
.mz-btn.s:hover { background: var(--mz-ink); color: var(--mz-bg) !important; }
.mz-btn svg { width: 16px; height: 16px; }

.mz-section { padding: 40px 0; border-bottom: 1px solid var(--mz-line); }
.mz-lbl { font-family: Fraunces, Georgia, serif; font-weight: 900; font-size: 26px; margin-bottom: 14px; }
.mz-lbl small {
  display: block; font-family: Inter, sans-serif; font-size: 12px;
  text-transform: uppercase; letter-spacing: .16em; color: var(--mz-ac); font-weight: 600;
  margin-bottom: 4px;
}

.mz-about .mz-cols { columns: 2; column-gap: 34px; }
@media (max-width: 680px) { .mz-about .mz-cols { columns: 1; } }
.mz-about .mz-cols p { margin-bottom: 14px; font-size: 16px; line-height: 1.7; color: var(--mz-ink); }
.mz-about .mz-cols p:first-letter {
  font-family: Fraunces, Georgia, serif; font-size: 60px; font-weight: 900;
  float: left; line-height: .7; margin: 6px 10px 0 0; color: var(--mz-ac);
}

.mz-pj {
  display: grid; grid-template-columns: auto 1fr auto; gap: 20px;
  padding: 24px 0; align-items: baseline; border-bottom: 1px solid var(--mz-line);
  transition: all .2s;
}
.mz-pj:last-child { border-bottom: none; }
.mz-pj:hover { background: rgba(200,68,43,.04); padding-left: 10px; padding-right: 10px; }
.mz-pj .mz-no { font-family: Fraunces, Georgia, serif; font-weight: 900; font-size: 34px; color: var(--mz-ac); line-height: 1; }
.mz-pj h3 { font-family: Fraunces, Georgia, serif; font-size: 22px; margin: 0 0 4px; }
.mz-pj .mz-kick { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--mz-mut); margin: 4px 0 8px; }
.mz-pj p { color: var(--mz-mut); font-size: 15px; line-height: 1.6; margin: 0 0 10px; }
.mz-pj .mz-links { display: flex; gap: 14px; white-space: nowrap; }
.mz-pj .mz-links a { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; border-bottom: 2px solid var(--mz-ac); }
@media (max-width: 620px) { .mz-pj { grid-template-columns: 1fr; } }

.mz-skl { display: flex; flex-wrap: wrap; gap: 8px; }
.mz-skl span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border: 1px solid var(--mz-line); font-size: 14px;
  background: transparent; transition: all .2s;
}
.mz-skl span:hover { background: var(--mz-ink); color: var(--mz-bg); }

.mz-exp {
  display: grid; grid-template-columns: 150px 1fr; gap: 20px;
  padding: 20px 0; border-top: 1px solid var(--mz-line);
}
.mz-exp:first-of-type { border-top: none; }
@media (max-width: 620px) { .mz-exp { grid-template-columns: 1fr; gap: 4px; } }
.mz-exp .mz-d { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--mz-ac); font-weight: 600; padding-top: 2px; }
.mz-exp h3 { font-family: Fraunces, Georgia, serif; font-size: 19px; margin-bottom: 6px; }
.mz-exp ul { margin: 6px 0 0 18px; color: var(--mz-mut); font-size: 15px; line-height: 1.6; }
.mz-exp ul li { margin-bottom: 4px; }

.mz-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.mz-reveal.in { opacity: 1; transform: none; }

.mz-foot { padding: 50px 0 36px; border-top: 2px solid var(--mz-line); }
.mz-foot-email { font-family: Fraunces, Georgia, serif; font-size: 24px; border-bottom: 2px solid var(--mz-ac); display: inline-block; margin-bottom: 16px; }
.mz-socials { display: flex; gap: 14px; margin-top: 18px; }
.mz-soc {
  width: 46px; height: 46px; border: 2px solid var(--mz-line);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .2s; color: var(--mz-ink);
}
.mz-soc:hover { background: var(--mz-ac); border-color: var(--mz-ac); color: #fff; }
.mz-soc svg { width: 18px; height: 18px; }


/* ===========================================================================
   Bold Theme — High Contrast Dark Mode with Electric Lime Accents
   =========================================================================== */
body[data-template="bold"] {
  --pf-bg: #0b0b0d;
  --pf-surface: rgba(255,255,255,.03);
  --pf-ink: #fafafa;
  --pf-head: #e4e4e7;
  --pf-body: #a1a1aa;
  --pf-faint: #71717a;
  --pf-accent: #c6fb50;
  --pf-accent-ink: #0b0b0d;
  --pf-border: rgba(255,255,255,.12);
  --pf-radius: 14px;
  --pf-max: 1080px;
  --pf-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pf-display: 'Space Grotesk', 'Inter', sans-serif;
  --pf-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  margin: 0;
  min-height: 100vh;
  font-family: var(--pf-font);
  background: var(--pf-bg) !important;
  color: var(--pf-body) !important;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body[data-template="bold"] * { box-sizing: border-box; }
body[data-template="bold"] a { color: inherit; text-decoration: none; }
body[data-template="bold"] img { max-width: 100%; }
body[data-template="bold"] h1,
body[data-template="bold"] h2,
body[data-template="bold"] h3 {
  color: var(--pf-ink); font-family: var(--pf-display); font-weight: 700; letter-spacing: -.02em;
}

body[data-template="bold"] .pf-nav,
body[data-template="bold"] .pf-hero,
body[data-template="bold"] .pf-stats,
body[data-template="bold"] .pf-main {
  max-width: var(--pf-max); margin-left: auto; margin-right: auto; padding-left: 28px; padding-right: 28px;
}

body[data-template="bold"] .pf-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 22px; padding-bottom: 22px; position: sticky; top: 0; z-index: 50;
  background: rgba(11,11,13,.88); backdrop-filter: blur(10px);
}
body[data-template="bold"] .pf-brand {
  font-family: var(--pf-mono); font-weight: 700; font-size: .88rem; color: var(--pf-ink);
  letter-spacing: .08em; text-transform: uppercase;
}
body[data-template="bold"] .pf-nav-links { display: flex; gap: 4px; }
body[data-template="bold"] .pf-nav-links a {
  color: var(--pf-faint); font-family: var(--pf-mono); text-transform: uppercase;
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; padding: 8px 14px;
  border-radius: 8px; transition: color .2s, background .2s;
}
body[data-template="bold"] .pf-nav-links a:hover,
body[data-template="bold"] .pf-nav-links a.active { color: var(--pf-accent); background: rgba(198,251,80,.08); }

body[data-template="bold"] .pf-hero {
  display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between;
  gap: 40px; padding-top: 60px; padding-bottom: 48px;
}
body[data-template="bold"] .pf-hero-media { flex-shrink: 0; }
body[data-template="bold"] .pf-photo,
body[data-template="bold"] .pf-avatar {
  width: 200px; height: 240px; border-radius: 18px; object-fit: cover;
  border: 1px solid var(--pf-border); display: flex; align-items: center; justify-content: center;
  font-family: var(--pf-display); font-weight: 700; font-size: 3.4rem; color: var(--pf-accent);
  background: var(--pf-surface);
}
body[data-template="bold"] .pf-hero-text { flex: 1; min-width: 0; }
body[data-template="bold"] .pf-eyebrow {
  font-family: var(--pf-mono); color: var(--pf-accent); font-size: .9rem;
  letter-spacing: .04em; margin-bottom: 12px; text-transform: uppercase;
}
body[data-template="bold"] .pf-name {
  font-size: clamp(3rem, 7.5vw, 5.8rem); line-height: .98; margin: 0 0 16px;
  text-transform: uppercase; font-weight: 700; letter-spacing: -.03em;
}
body[data-template="bold"] .pf-tagline {
  font-size: 1.15rem; color: var(--pf-body); max-width: 50ch; margin: 0 0 16px; line-height: 1.6;
}
body[data-template="bold"] .pf-loc { color: var(--pf-faint); font-size: .92rem; font-family: var(--pf-mono); }
body[data-template="bold"] .pf-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; align-items: center; }
body[data-template="bold"] .pf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--pf-mono); font-size: .9rem; font-weight: 600; text-decoration: none; cursor: pointer;
  padding: 12px 24px; border-radius: 999px; border: 1px solid var(--pf-accent); color: var(--pf-accent);
  background: transparent; transition: all .2s;
}
body[data-template="bold"] .pf-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(198,251,80,.2); }
body[data-template="bold"] .pf-btn-primary { background: var(--pf-accent); color: var(--pf-accent-ink) !important; border-color: var(--pf-accent); }
body[data-template="bold"] .pf-socials { display: flex; gap: 12px; margin-top: 22px; }
body[data-template="bold"] .pf-social {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--pf-border); color: var(--pf-body); transition: all .2s;
}
body[data-template="bold"] .pf-social svg { width: 19px; height: 19px; }
body[data-template="bold"] .pf-social:hover { color: var(--pf-accent); border-color: var(--pf-accent); transform: translateY(-3px); }

body[data-template="bold"] .pf-stats { display: flex; gap: 16px; flex-wrap: wrap; padding-bottom: 46px; }
body[data-template="bold"] .pf-stat {
  flex: 1; min-width: 140px; border: 1px solid var(--pf-border); border-radius: var(--pf-radius);
  padding: 22px; background: var(--pf-surface);
}
body[data-template="bold"] .pf-stat-num {
  display: block; font-family: var(--pf-display); font-size: 2.2rem; font-weight: 700; color: var(--pf-accent);
}
body[data-template="bold"] .pf-stat-lbl {
  font-family: var(--pf-mono); font-size: .76rem; color: var(--pf-faint); text-transform: uppercase; letter-spacing: .06em;
}

body[data-template="bold"] .pf-main { padding-bottom: 60px; }
body[data-template="bold"] .pf-section { margin-bottom: 90px; scroll-margin-top: 80px; }
body[data-template="bold"] .pf-section-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; }
body[data-template="bold"] .pf-kicker { font-family: var(--pf-mono); color: var(--pf-accent); font-size: 1rem; }
body[data-template="bold"] .pf-section-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 0; text-transform: uppercase; }
body[data-template="bold"] .pf-rule { flex: 1; height: 1px; background: var(--pf-border); }

body[data-template="bold"] .pf-about p { color: var(--pf-body); font-size: 1.08rem; max-width: 68ch; margin: 0 0 14px; line-height: 1.7; }

body[data-template="bold"] .pf-timeline { display: flex; flex-direction: column; gap: 12px; }
body[data-template="bold"] .pf-tl-item {
  display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 20px;
  border-radius: var(--pf-radius); background: var(--pf-surface); border: 1px solid transparent;
  transition: all .2s;
}
body[data-template="bold"] .pf-tl-item:hover { background: rgba(198,251,80,.04); border-color: rgba(198,251,80,.2); }
body[data-template="bold"] .pf-tl-date {
  font-family: var(--pf-mono); font-size: .8rem; color: var(--pf-faint); text-transform: uppercase; letter-spacing: .05em; padding-top: 2px;
}
body[data-template="bold"] .pf-tl-head h3 { font-size: 1.15rem; margin: 0 0 4px; }
body[data-template="bold"] .pf-tl-at { color: var(--pf-accent); }
body[data-template="bold"] .pf-bullets {
  margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px;
}
body[data-template="bold"] .pf-bullets li { position: relative; padding-left: 22px; font-size: .95rem; color: var(--pf-body); }
body[data-template="bold"] .pf-bullets li::before { content: "▹"; position: absolute; left: 0; color: var(--pf-accent); }

body[data-template="bold"] .pf-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px,100%),1fr)); gap: 18px;
}
body[data-template="bold"] .pf-card {
  position: relative; padding: 24px; border-radius: var(--pf-radius);
  background: var(--pf-surface); border: 1px solid var(--pf-border);
  transition: transform .2s, border-color .2s, box-shadow .2s; display: flex; flex-direction: column;
}
body[data-template="bold"] .pf-card:hover {
  transform: translateY(-4px); border-color: var(--pf-accent); background: rgba(198,251,80,.04);
  box-shadow: 0 14px 34px rgba(0,0,0,.4);
}
body[data-template="bold"] .pf-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
body[data-template="bold"] .pf-card-top h3 { font-size: 1.2rem; margin: 0; transition: color .2s; }
body[data-template="bold"] .pf-card:hover .pf-card-top h3 { color: var(--pf-accent); }
body[data-template="bold"] .pf-card-links { display: flex; gap: 12px; flex-shrink: 0; }
body[data-template="bold"] .pf-card-links a { color: var(--pf-faint); transition: color .2s; }
body[data-template="bold"] .pf-card-links a:hover { color: var(--pf-accent); }
body[data-template="bold"] .pf-card-links svg { width: 18px; height: 18px; }
body[data-template="bold"] .pf-card-meta { font-family: var(--pf-mono); font-size: .8rem; color: var(--pf-accent); margin-top: 8px; }

body[data-template="bold"] .pf-chips { display: flex; flex-wrap: wrap; gap: 10px; }
body[data-template="bold"] .pf-chip {
  font-family: var(--pf-mono); font-size: .84rem; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--pf-border); color: var(--pf-head); background: var(--pf-surface);
  transition: all .18s;
}
body[data-template="bold"] .pf-chip:hover {
  transform: translateY(-2px); border-color: var(--pf-accent); color: var(--pf-accent);
  background: rgba(198,251,80,.08);
}

body[data-template="bold"] .pf-edu-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px,100%),1fr)); gap: 16px;
}
body[data-template="bold"] .pf-edu {
  background: var(--pf-surface); border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius); padding: 22px;
}
body[data-template="bold"] .pf-edu h3 { font-size: 1.1rem; margin: 0 0 6px; }
body[data-template="bold"] .pf-edu-degree { color: var(--pf-body); font-size: .95rem; }
body[data-template="bold"] .pf-edu-meta { font-family: var(--pf-mono); color: var(--pf-faint); font-size: .8rem; margin-top: 8px; }

body[data-template="bold"] .pf-contact { text-align: center; }
body[data-template="bold"] .pf-contact .pf-section-head { justify-content: center; }
body[data-template="bold"] .pf-contact .pf-rule { display: none; }
body[data-template="bold"] .pf-contact-lead { color: var(--pf-body); font-size: 1.1rem; max-width: 48ch; margin: 0 auto 24px; }
body[data-template="bold"] .pf-contact-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

body[data-template="bold"] .pf-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--pf-border); padding-top: 28px; color: var(--pf-faint);
  font-family: var(--pf-mono); font-size: .82rem;
}
body[data-template="bold"] .pf-footer a { color: var(--pf-body); text-decoration: none; }
body[data-template="bold"] .pf-footer a:hover { color: var(--pf-accent); }

body[data-template="bold"] .pf-reveal { opacity: 0; transform: translateY(18px); }
body[data-template="bold"] .pf-reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }

@media (max-width: 760px) {
  body[data-template="bold"] .pf-nav,
  body[data-template="bold"] .pf-hero,
  body[data-template="bold"] .pf-stats,
  body[data-template="bold"] .pf-main { padding-left: 18px; padding-right: 18px; }
  body[data-template="bold"] .pf-hero { flex-direction: column-reverse; align-items: flex-start; gap: 24px; padding-top: 36px; }
  body[data-template="bold"] .pf-tl-item { grid-template-columns: 1fr; gap: 4px; }
  body[data-template="bold"] .pf-section { margin-bottom: 64px; }
}


/* ===========================================================================
   Clean Pro Theme — Pill Nav, Soft Cards & Royal Purple Accents
   =========================================================================== */
body[data-template="clean"] {
  --pf-bg: #f4f4f0;
  --pf-surface: #ffffff;
  --pf-ink: #18181b;
  --pf-head: #27272a;
  --pf-body: #52525b;
  --pf-faint: #a1a1aa;
  --pf-accent: #6d28d9;
  --pf-accent-ink: #ffffff;
  --pf-border: rgba(0,0,0,.08);
  --pf-radius: 18px;
  --pf-max: 1080px;
  --pf-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pf-display: 'Inter', system-ui, sans-serif;
  --pf-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  margin: 0;
  min-height: 100vh;
  font-family: var(--pf-font);
  background: var(--pf-bg) !important;
  color: var(--pf-body) !important;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body[data-template="clean"] * { box-sizing: border-box; }
body[data-template="clean"] a { color: inherit; text-decoration: none; }
body[data-template="clean"] img { max-width: 100%; }
body[data-template="clean"] h1,
body[data-template="clean"] h2,
body[data-template="clean"] h3 {
  color: var(--pf-ink); font-family: var(--pf-display); font-weight: 700; letter-spacing: -.02em;
}

body[data-template="clean"] .pf-nav,
body[data-template="clean"] .pf-hero,
body[data-template="clean"] .pf-stats,
body[data-template="clean"] .pf-main {
  max-width: var(--pf-max); margin-left: auto; margin-right: auto; padding-left: 28px; padding-right: 28px;
}

body[data-template="clean"] .pf-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 22px; padding-bottom: 22px; position: sticky; top: 0; z-index: 50;
  background: rgba(244,244,240,.88); backdrop-filter: blur(12px);
}
body[data-template="clean"] .pf-brand {
  font-family: var(--pf-display); font-weight: 700; font-size: 1.05rem; color: var(--pf-ink);
  letter-spacing: -.01em;
}
body[data-template="clean"] .pf-nav-links {
  display: flex; gap: 4px; background: #ffffff; border: 1px solid var(--pf-border);
  border-radius: 999px; padding: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.04);
}
body[data-template="clean"] .pf-nav-links a {
  color: var(--pf-faint); font-size: .86rem; font-weight: 500; padding: 7px 14px;
  border-radius: 999px; transition: color .2s, background .2s;
}
body[data-template="clean"] .pf-nav-links a:hover,
body[data-template="clean"] .pf-nav-links a.active { color: var(--pf-ink); background: #f4f4f0; }

body[data-template="clean"] .pf-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; padding-top: 60px; padding-bottom: 48px;
}
body[data-template="clean"] .pf-hero-media { flex-shrink: 0; }
body[data-template="clean"] .pf-photo,
body[data-template="clean"] .pf-avatar {
  width: 200px; height: 200px; border-radius: 28px; object-fit: cover;
  border: 1px solid var(--pf-border); display: flex; align-items: center; justify-content: center;
  font-family: var(--pf-display); font-weight: 700; font-size: 3.4rem; color: var(--pf-accent);
  background: #ffffff; box-shadow: 0 24px 50px -24px rgba(0,0,0,.3);
}
body[data-template="clean"] .pf-hero-text { flex: 1; min-width: 0; }
body[data-template="clean"] .pf-eyebrow {
  font-family: var(--pf-mono); color: var(--pf-accent); font-size: .88rem;
  letter-spacing: .06em; margin-bottom: 12px; text-transform: uppercase; font-weight: 600;
}
body[data-template="clean"] .pf-name {
  font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.05; margin: 0 0 14px;
  font-weight: 800; letter-spacing: -.02em; color: var(--pf-ink);
}
body[data-template="clean"] .pf-tagline {
  font-size: 1.15rem; color: var(--pf-body); max-width: 48ch; margin: 0 0 14px; line-height: 1.6;
}
body[data-template="clean"] .pf-loc { color: var(--pf-faint); font-size: .92rem; }
body[data-template="clean"] .pf-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; align-items: center; }
body[data-template="clean"] .pf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--pf-font); font-size: .92rem; font-weight: 600; text-decoration: none; cursor: pointer;
  padding: 12px 24px; border-radius: 999px; border: 1px solid var(--pf-accent); color: var(--pf-accent);
  background: transparent; transition: all .2s;
}
body[data-template="clean"] .pf-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(109,40,217,.16); }
body[data-template="clean"] .pf-btn-primary { background: var(--pf-accent); color: #ffffff !important; border-color: var(--pf-accent); }
body[data-template="clean"] .pf-socials { display: flex; gap: 12px; margin-top: 22px; }
body[data-template="clean"] .pf-social {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--pf-border); color: var(--pf-body); background: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,.04); transition: all .2s;
}
body[data-template="clean"] .pf-social svg { width: 19px; height: 19px; }
body[data-template="clean"] .pf-social:hover { color: var(--pf-accent); border-color: var(--pf-accent); transform: translateY(-3px); }

body[data-template="clean"] .pf-stats { display: flex; gap: 16px; flex-wrap: wrap; padding-bottom: 46px; }
body[data-template="clean"] .pf-stat {
  flex: 1; min-width: 140px; border: 1px solid var(--pf-border); border-radius: var(--pf-radius);
  padding: 22px; background: #ffffff; box-shadow: 0 10px 30px -20px rgba(0,0,0,.25);
}
body[data-template="clean"] .pf-stat-num {
  display: block; font-family: var(--pf-display); font-size: 2.2rem; font-weight: 800; color: var(--pf-ink);
}
body[data-template="clean"] .pf-stat-lbl {
  font-family: var(--pf-mono); font-size: .76rem; color: var(--pf-faint); text-transform: uppercase; letter-spacing: .06em;
}

body[data-template="clean"] .pf-main { padding-bottom: 60px; }
body[data-template="clean"] .pf-section { margin-bottom: 90px; scroll-margin-top: 80px; }
body[data-template="clean"] .pf-section-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; }
body[data-template="clean"] .pf-kicker { font-family: var(--pf-mono); color: var(--pf-accent); font-size: 1rem; font-weight: 600; }
body[data-template="clean"] .pf-section-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 0; }
body[data-template="clean"] .pf-rule { flex: 1; height: 1px; background: var(--pf-border); }

body[data-template="clean"] .pf-about p { color: var(--pf-body); font-size: 1.08rem; max-width: 68ch; margin: 0 0 14px; line-height: 1.7; }

body[data-template="clean"] .pf-timeline { display: flex; flex-direction: column; gap: 12px; }
body[data-template="clean"] .pf-tl-item {
  display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 20px;
  border-radius: var(--pf-radius); background: #ffffff; border: 1px solid var(--pf-border);
  box-shadow: 0 4px 14px rgba(0,0,0,.03); transition: all .2s;
}
body[data-template="clean"] .pf-tl-item:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.08); }
body[data-template="clean"] .pf-tl-date {
  font-family: var(--pf-mono); font-size: .8rem; color: var(--pf-faint); text-transform: uppercase; letter-spacing: .05em; padding-top: 2px;
}
body[data-template="clean"] .pf-tl-head h3 { font-size: 1.15rem; margin: 0 0 4px; }
body[data-template="clean"] .pf-tl-at { color: var(--pf-accent); font-weight: 600; }
body[data-template="clean"] .pf-bullets {
  margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px;
}
body[data-template="clean"] .pf-bullets li { position: relative; padding-left: 22px; font-size: .95rem; color: var(--pf-body); }
body[data-template="clean"] .pf-bullets li::before { content: "▹"; position: absolute; left: 0; color: var(--pf-accent); font-weight: 700; }

body[data-template="clean"] .pf-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px,100%),1fr)); gap: 18px;
}
body[data-template="clean"] .pf-card {
  position: relative; padding: 24px; border-radius: var(--pf-radius);
  background: #ffffff; border: 1px solid var(--pf-border);
  box-shadow: 0 10px 30px -20px rgba(0,0,0,.25); transition: transform .2s, border-color .2s, box-shadow .2s;
  display: flex; flex-direction: column;
}
body[data-template="clean"] .pf-card:hover {
  transform: translateY(-4px); border-color: var(--pf-accent);
  box-shadow: 0 20px 44px -22px rgba(0,0,0,.3);
}
body[data-template="clean"] .pf-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
body[data-template="clean"] .pf-card-top h3 { font-size: 1.2rem; margin: 0; transition: color .2s; }
body[data-template="clean"] .pf-card:hover .pf-card-top h3 { color: var(--pf-accent); }
body[data-template="clean"] .pf-card-links { display: flex; gap: 12px; flex-shrink: 0; }
body[data-template="clean"] .pf-card-links a { color: var(--pf-faint); transition: color .2s; }
body[data-template="clean"] .pf-card-links a:hover { color: var(--pf-accent); }
body[data-template="clean"] .pf-card-links svg { width: 18px; height: 18px; }
body[data-template="clean"] .pf-card-meta { font-family: var(--pf-mono); font-size: .8rem; color: var(--pf-accent); margin-top: 8px; font-weight: 600; }

body[data-template="clean"] .pf-chips { display: flex; flex-wrap: wrap; gap: 10px; }
body[data-template="clean"] .pf-chip {
  font-family: var(--pf-mono); font-size: .84rem; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--pf-border); color: var(--pf-head); background: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,.03); transition: all .18s;
}
body[data-template="clean"] .pf-chip:hover {
  transform: translateY(-2px); border-color: var(--pf-accent); color: var(--pf-accent);
}

body[data-template="clean"] .pf-edu-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px,100%),1fr)); gap: 16px;
}
body[data-template="clean"] .pf-edu {
  background: #ffffff; border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius); padding: 22px; box-shadow: 0 10px 30px -20px rgba(0,0,0,.25);
}
body[data-template="clean"] .pf-edu h3 { font-size: 1.1rem; margin: 0 0 6px; }
body[data-template="clean"] .pf-edu-degree { color: var(--pf-body); font-size: .95rem; }
body[data-template="clean"] .pf-edu-meta { font-family: var(--pf-mono); color: var(--pf-faint); font-size: .8rem; margin-top: 8px; }

body[data-template="clean"] .pf-contact { text-align: center; }
body[data-template="clean"] .pf-contact .pf-section-head { justify-content: center; }
body[data-template="clean"] .pf-contact .pf-rule { display: none; }
body[data-template="clean"] .pf-contact-lead { color: var(--pf-body); font-size: 1.1rem; max-width: 48ch; margin: 0 auto 24px; }
body[data-template="clean"] .pf-contact-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

body[data-template="clean"] .pf-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--pf-border); padding-top: 28px; color: var(--pf-faint);
  font-family: var(--pf-mono); font-size: .82rem;
}
body[data-template="clean"] .pf-footer a { color: var(--pf-body); text-decoration: none; }
body[data-template="clean"] .pf-footer a:hover { color: var(--pf-accent); }

body[data-template="clean"] .pf-reveal { opacity: 0; transform: translateY(18px); }
body[data-template="clean"] .pf-reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }

@media (max-width: 760px) {
  body[data-template="clean"] .pf-nav,
  body[data-template="clean"] .pf-hero,
  body[data-template="clean"] .pf-stats,
  body[data-template="clean"] .pf-main { padding-left: 18px; padding-right: 18px; }
  body[data-template="clean"] .pf-hero { flex-direction: column-reverse; align-items: flex-start; gap: 24px; padding-top: 36px; }
  body[data-template="clean"] .pf-tl-item { grid-template-columns: 1fr; gap: 4px; }
  body[data-template="clean"] .pf-section { margin-bottom: 64px; }
}


/* ===========================================================================
   Vibrant Gradient Theme — Rainbow Titles, Radial Lilac Glow & Designer Cards
   =========================================================================== */
body[data-template="vibrant"] {
  --pf-bg: #fef7ff;
  --pf-surface: #ffffff;
  --pf-ink: #1a1033;
  --pf-head: #2e1d52;
  --pf-body: #5b4d73;
  --pf-faint: #9a8bb5;
  --pf-accent: #d6308b;
  --pf-accent-ink: #ffffff;
  --pf-border: rgba(124,58,237,.18);
  --pf-radius: 22px;
  --pf-max: 1080px;
  --pf-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pf-display: 'Space Grotesk', 'Inter', sans-serif;
  --pf-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  margin: 0;
  min-height: 100vh;
  font-family: var(--pf-font);
  background:
    radial-gradient(900px 500px at 90% -5%, rgba(236,72,153,.16), transparent 60%),
    radial-gradient(800px 500px at -5% 30%, rgba(139,92,246,.16), transparent 55%),
    #fef7ff !important;
  background-attachment: fixed !important;
  color: var(--pf-body) !important;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body[data-template="vibrant"] * { box-sizing: border-box; }
body[data-template="vibrant"] a { color: inherit; text-decoration: none; }
body[data-template="vibrant"] img { max-width: 100%; }
body[data-template="vibrant"] h1,
body[data-template="vibrant"] h2,
body[data-template="vibrant"] h3 {
  color: var(--pf-ink); font-family: var(--pf-display); font-weight: 700; letter-spacing: -.02em;
}

body[data-template="vibrant"] .pf-nav,
body[data-template="vibrant"] .pf-hero,
body[data-template="vibrant"] .pf-stats,
body[data-template="vibrant"] .pf-main {
  max-width: var(--pf-max); margin-left: auto; margin-right: auto; padding-left: 28px; padding-right: 28px;
}

body[data-template="vibrant"] .pf-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 22px; padding-bottom: 22px; position: sticky; top: 0; z-index: 50;
  background: rgba(254,247,255,.88); backdrop-filter: blur(12px);
}
body[data-template="vibrant"] .pf-brand {
  font-family: var(--pf-display); font-weight: 700; font-size: 1.05rem; color: var(--pf-ink);
  letter-spacing: -.01em;
}
body[data-template="vibrant"] .pf-nav-links {
  display: flex; gap: 4px; background: #ffffff; border: 1px solid var(--pf-border);
  border-radius: 999px; padding: 4px; box-shadow: 0 4px 16px rgba(124,58,237,.08);
}
body[data-template="vibrant"] .pf-nav-links a {
  color: var(--pf-faint); font-size: .86rem; font-weight: 500; padding: 7px 14px;
  border-radius: 999px; transition: color .2s, background .2s;
}
body[data-template="vibrant"] .pf-nav-links a:hover,
body[data-template="vibrant"] .pf-nav-links a.active { color: var(--pf-accent); background: #fef7ff; }

body[data-template="vibrant"] .pf-hero {
  display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between;
  gap: 40px; padding-top: 60px; padding-bottom: 48px;
}
body[data-template="vibrant"] .pf-hero-media { flex-shrink: 0; }
body[data-template="vibrant"] .pf-photo,
body[data-template="vibrant"] .pf-avatar {
  width: 220px; height: 220px; border-radius: 32px; object-fit: cover;
  border: 3px solid transparent; background: linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#ec4899,#8b5cf6) border-box;
  box-shadow: 0 24px 50px -22px rgba(236,72,153,.5); display: flex; align-items: center; justify-content: center;
  font-family: var(--pf-display); font-weight: 700; font-size: 3.4rem; color: #d6308b;
}
body[data-template="vibrant"] .pf-hero-text { flex: 1; min-width: 0; }
body[data-template="vibrant"] .pf-eyebrow {
  font-family: var(--pf-mono); color: var(--pf-accent); font-size: .88rem;
  letter-spacing: .06em; margin-bottom: 12px; text-transform: uppercase; font-weight: 600;
}
body[data-template="vibrant"] .pf-name {
  font-size: clamp(2.8rem, 6.5vw, 4.8rem); line-height: 1.04; margin: 0 0 14px;
  font-weight: 800; letter-spacing: -.03em;
  background: linear-gradient(110deg,#ec4899,#8b5cf6,#3b82f6);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body[data-template="vibrant"] .pf-tagline {
  font-size: 1.15rem; color: var(--pf-body); max-width: 48ch; margin: 0 0 14px; line-height: 1.6;
}
body[data-template="vibrant"] .pf-loc { color: var(--pf-faint); font-size: .92rem; }
body[data-template="vibrant"] .pf-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; align-items: center; }
body[data-template="vibrant"] .pf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--pf-display); font-size: .92rem; font-weight: 600; text-decoration: none; cursor: pointer;
  padding: 12px 24px; border-radius: 999px; border: 1px solid var(--pf-accent); color: var(--pf-accent);
  background: transparent; transition: all .2s;
}
body[data-template="vibrant"] .pf-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(214,48,139,.22); }
body[data-template="vibrant"] .pf-btn-primary {
  background: linear-gradient(135deg,#ec4899,#8b5cf6); border-color: transparent; color: #ffffff !important;
}
body[data-template="vibrant"] .pf-socials { display: flex; gap: 12px; margin-top: 22px; }
body[data-template="vibrant"] .pf-social {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--pf-border); color: var(--pf-body); background: #ffffff;
  box-shadow: 0 2px 8px rgba(124,58,237,.08); transition: all .2s;
}
body[data-template="vibrant"] .pf-social svg { width: 19px; height: 19px; }
body[data-template="vibrant"] .pf-social:hover { color: var(--pf-accent); border-color: var(--pf-accent); transform: translateY(-3px); }

body[data-template="vibrant"] .pf-stats { display: flex; gap: 16px; flex-wrap: wrap; padding-bottom: 46px; }
body[data-template="vibrant"] .pf-stat {
  flex: 1; min-width: 140px; border: 1px solid var(--pf-border); border-radius: var(--pf-radius);
  padding: 22px; background: #ffffff; box-shadow: 0 14px 36px -24px rgba(124,58,237,.4);
}
body[data-template="vibrant"] .pf-stat-num {
  display: block; font-family: var(--pf-display); font-size: 2.2rem; font-weight: 800;
  background: linear-gradient(110deg,#ec4899,#8b5cf6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body[data-template="vibrant"] .pf-stat-lbl {
  font-family: var(--pf-mono); font-size: .76rem; color: var(--pf-faint); text-transform: uppercase; letter-spacing: .06em;
}

body[data-template="vibrant"] .pf-main { padding-bottom: 60px; }
body[data-template="vibrant"] .pf-section { margin-bottom: 90px; scroll-margin-top: 80px; }
body[data-template="vibrant"] .pf-section-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; }
body[data-template="vibrant"] .pf-kicker { font-family: var(--pf-mono); color: var(--pf-accent); font-size: 1rem; font-weight: 600; }
body[data-template="vibrant"] .pf-section-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 0; }
body[data-template="vibrant"] .pf-rule { flex: 1; height: 1px; background: var(--pf-border); }

body[data-template="vibrant"] .pf-about p { color: var(--pf-body); font-size: 1.08rem; max-width: 68ch; margin: 0 0 14px; line-height: 1.7; }

body[data-template="vibrant"] .pf-timeline { display: flex; flex-direction: column; gap: 12px; }
body[data-template="vibrant"] .pf-tl-item {
  display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 20px;
  border-radius: var(--pf-radius); background: #ffffff; border: 1px solid var(--pf-border);
  box-shadow: 0 4px 16px rgba(124,58,237,.06); transition: all .2s;
}
body[data-template="vibrant"] .pf-tl-item:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(124,58,237,.14); }
body[data-template="vibrant"] .pf-tl-date {
  font-family: var(--pf-mono); font-size: .8rem; color: var(--pf-faint); text-transform: uppercase; letter-spacing: .05em; padding-top: 2px;
}
body[data-template="vibrant"] .pf-tl-head h3 { font-size: 1.15rem; margin: 0 0 4px; }
body[data-template="vibrant"] .pf-tl-at { color: var(--pf-accent); font-weight: 600; }
body[data-template="vibrant"] .pf-bullets {
  margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px;
}
body[data-template="vibrant"] .pf-bullets li { position: relative; padding-left: 22px; font-size: .95rem; color: var(--pf-body); }
body[data-template="vibrant"] .pf-bullets li::before { content: "▹"; position: absolute; left: 0; color: var(--pf-accent); font-weight: 700; }

body[data-template="vibrant"] .pf-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px,100%),1fr)); gap: 18px;
}
body[data-template="vibrant"] .pf-card {
  position: relative; padding: 24px; border-radius: var(--pf-radius);
  background: #ffffff; border: 1px solid var(--pf-border);
  box-shadow: 0 14px 36px -24px rgba(124,58,237,.4); transition: transform .2s, border-color .2s, box-shadow .2s;
  display: flex; flex-direction: column;
}
body[data-template="vibrant"] .pf-card:hover {
  transform: translateY(-4px); border-color: var(--pf-accent);
  box-shadow: 0 20px 48px -20px rgba(214,48,139,.35);
}
body[data-template="vibrant"] .pf-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
body[data-template="vibrant"] .pf-card-top h3 { font-size: 1.2rem; margin: 0; transition: color .2s; }
body[data-template="vibrant"] .pf-card:hover .pf-card-top h3 { color: var(--pf-accent); }
body[data-template="vibrant"] .pf-card-links { display: flex; gap: 12px; flex-shrink: 0; }
body[data-template="vibrant"] .pf-card-links a { color: var(--pf-faint); transition: color .2s; }
body[data-template="vibrant"] .pf-card-links a:hover { color: var(--pf-accent); }
body[data-template="vibrant"] .pf-card-links svg { width: 18px; height: 18px; }
body[data-template="vibrant"] .pf-card-meta { font-family: var(--pf-mono); font-size: .8rem; color: var(--pf-accent); margin-top: 8px; font-weight: 600; }

body[data-template="vibrant"] .pf-chips { display: flex; flex-wrap: wrap; gap: 10px; }
body[data-template="vibrant"] .pf-chip {
  font-family: var(--pf-mono); font-size: .84rem; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--pf-border); color: var(--pf-head); background: #ffffff;
  box-shadow: 0 2px 8px rgba(124,58,237,.06); transition: all .18s;
}
body[data-template="vibrant"] .pf-chip:hover {
  transform: translateY(-2px); border-color: var(--pf-accent); color: var(--pf-accent);
}

body[data-template="vibrant"] .pf-edu-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px,100%),1fr)); gap: 16px;
}
body[data-template="vibrant"] .pf-edu {
  background: #ffffff; border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius); padding: 22px; box-shadow: 0 14px 36px -24px rgba(124,58,237,.4);
}
body[data-template="vibrant"] .pf-edu h3 { font-size: 1.1rem; margin: 0 0 6px; }
body[data-template="vibrant"] .pf-edu-degree { color: var(--pf-body); font-size: .95rem; }
body[data-template="vibrant"] .pf-edu-meta { font-family: var(--pf-mono); color: var(--pf-faint); font-size: .8rem; margin-top: 8px; }

body[data-template="vibrant"] .pf-contact { text-align: center; }
body[data-template="vibrant"] .pf-contact .pf-section-head { justify-content: center; }
body[data-template="vibrant"] .pf-contact .pf-rule { display: none; }
body[data-template="vibrant"] .pf-contact-lead { color: var(--pf-body); font-size: 1.1rem; max-width: 48ch; margin: 0 auto 24px; }
body[data-template="vibrant"] .pf-contact-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

body[data-template="vibrant"] .pf-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--pf-border); padding-top: 28px; color: var(--pf-faint);
  font-family: var(--pf-mono); font-size: .82rem;
}
body[data-template="vibrant"] .pf-footer a { color: var(--pf-body); text-decoration: none; }
body[data-template="vibrant"] .pf-footer a:hover { color: var(--pf-accent); }

body[data-template="vibrant"] .pf-reveal { opacity: 0; transform: translateY(18px); }
body[data-template="vibrant"] .pf-reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }

@media (max-width: 760px) {
  body[data-template="vibrant"] .pf-nav,
  body[data-template="vibrant"] .pf-hero,
  body[data-template="vibrant"] .pf-stats,
  body[data-template="vibrant"] .pf-main { padding-left: 18px; padding-right: 18px; }
  body[data-template="vibrant"] .pf-hero { flex-direction: column-reverse; align-items: flex-start; gap: 24px; padding-top: 36px; }
  body[data-template="vibrant"] .pf-tl-item { grid-template-columns: 1fr; gap: 4px; }
  body[data-template="vibrant"] .pf-section { margin-bottom: 64px; }
}


/* ===========================================================================
   Neon Cyberpunk Theme — 3D Perspective Grid, Glitch Title & Laser Glows
   =========================================================================== */
body[data-template="neon"] {
  --nn-bg: #05060d;
  --nn-ink: #d6e6ff;
  --nn-mut: #7d8bb0;
  --nn-cy: #00f0ff;
  --nn-mg: #ff2bd6;
  --nn-ye: #fde047;
  --nn-line: rgba(0,240,255,.18);
  margin: 0;
  min-height: 100vh;
  font-family: Rajdhani, system-ui, -apple-system, sans-serif;
  background: var(--nn-bg) !important;
  color: var(--nn-ink) !important;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
body[data-template="neon"]::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,43,214,.14), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(0,240,255,.14), transparent 40%),
    var(--nn-bg);
}
body[data-template="neon"] * { box-sizing: border-box; }
body[data-template="neon"] a { color: inherit; text-decoration: none; }
body[data-template="neon"] img { max-width: 100%; }
body[data-template="neon"] h1,
body[data-template="neon"] h2,
body[data-template="neon"] h3,
body[data-template="neon"] .font-d {
  font-family: Orbitron, sans-serif; letter-spacing: .02em;
}

.nn-grid-floor {
  position: fixed; left: 0; right: 0; bottom: 0; height: 46vh; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--nn-line) 1px, transparent 1px), linear-gradient(90deg, var(--nn-line) 1px, transparent 1px);
  background-size: 44px 44px; transform: perspective(340px) rotateX(62deg); transform-origin: bottom;
  mask-image: linear-gradient(transparent, #000); -webkit-mask-image: linear-gradient(transparent, #000);
  animation: nnGridMove 6s linear infinite;
}
@keyframes nnGridMove { to { background-position: 0 44px; } }

.nn-wrap { max-width: 1020px; margin: 0 auto; padding: 0 22px; }

.nn-nav {
  position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center;
  padding: 16px 22px; background: rgba(5,6,13,.75); backdrop-filter: blur(12px); border-bottom: 1px solid var(--nn-line);
}
.nn-nav .nn-brand {
  font-family: Orbitron, sans-serif; font-weight: 900; font-size: 16px; color: var(--nn-cy);
  text-shadow: 0 0 12px var(--nn-cy); text-transform: uppercase; letter-spacing: .08em;
}
.nn-nav .nn-lk { display: flex; gap: 22px; }
.nn-nav .nn-lk a {
  color: var(--nn-mut); text-transform: uppercase; font-size: 13px; letter-spacing: .12em; font-weight: 600;
  transition: all .2s;
}
.nn-nav .nn-lk a:hover { color: var(--nn-cy); text-shadow: 0 0 10px var(--nn-cy); }
@media (max-width: 680px) { .nn-nav .nn-lk { display: none; } }

.nn-hero { padding: 90px 0 60px; text-align: center; }
.nn-hero .nn-tag {
  font-size: 13px; letter-spacing: .4em; text-transform: uppercase; color: var(--nn-mg);
  text-shadow: 0 0 10px var(--nn-mg); font-weight: 600; font-family: Orbitron, sans-serif;
}
.nn-hero h1 {
  font-size: clamp(38px, 8vw, 80px); font-weight: 900; margin: 16px 0; line-height: 1.05;
  color: #fff; text-shadow: 3px 0 var(--nn-mg), -3px 0 var(--nn-cy); animation: nnGlitch 3.4s infinite;
  text-transform: uppercase;
}
@keyframes nnGlitch {
  0%, 92%, 100% { text-shadow: 3px 0 var(--nn-mg), -3px 0 var(--nn-cy); }
  94% { text-shadow: -3px 0 var(--nn-mg), 3px 0 var(--nn-cy); }
  96% { text-shadow: 3px 2px var(--nn-ye), -3px -2px var(--nn-cy); }
}
.nn-hero .nn-role { font-size: 22px; color: var(--nn-cy); font-weight: 600; letter-spacing: .05em; font-family: Orbitron, sans-serif; }
.nn-hero p { max-width: 620px; margin: 18px auto 0; color: var(--nn-mut); font-size: 17px; line-height: 1.6; }
.nn-cta { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.nn-btn {
  padding: 12px 26px; border: 1px solid var(--nn-cy); color: var(--nn-cy) !important;
  text-transform: uppercase; letter-spacing: .1em; font-weight: 600; font-size: 14px; font-family: Orbitron, sans-serif;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  background: transparent; transition: all .2s; display: inline-flex; gap: 8px; align-items: center; cursor: pointer;
}
.nn-btn:hover { background: var(--nn-cy); color: #04121a !important; box-shadow: 0 0 24px var(--nn-cy); transform: translateY(-2px); }
.nn-btn.mg { border-color: var(--nn-mg); color: var(--nn-mg) !important; }
.nn-btn.mg:hover { background: var(--nn-mg); color: #1a0418 !important; box-shadow: 0 0 24px var(--nn-mg); }
.nn-btn svg { width: 16px; height: 16px; }

.nn-section { padding: 46px 0; }
.nn-lbl {
  font-family: Orbitron, sans-serif; font-size: 15px; text-transform: uppercase; letter-spacing: .15em;
  color: var(--nn-cy); margin-bottom: 22px; display: flex; align-items: center; gap: 12px;
}
.nn-lbl::before { content: ""; width: 26px; height: 2px; background: var(--nn-mg); box-shadow: 0 0 10px var(--nn-mg); }

.nn-grid { display: grid; gap: 16px; }
.nn-g2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .nn-g2 { grid-template-columns: 1fr; } }

.nn-card {
  border: 1px solid var(--nn-line); background: linear-gradient(160deg, rgba(0,240,255,.05), rgba(255,43,214,.04));
  padding: 24px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  transition: all .25s; position: relative; display: flex; flex-direction: column;
}
.nn-card:hover {
  border-color: var(--nn-cy); box-shadow: 0 0 28px rgba(0,240,255,.25); transform: translateY(-4px);
}
.nn-card h3 { font-size: 18px; color: #fff; margin-bottom: 6px; }
.nn-card .nn-kick { font-size: 13px; color: var(--nn-mg); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; font-weight: 600; }
.nn-card p { color: var(--nn-mut); font-size: 15px; line-height: 1.6; margin: 0 0 14px; }
.nn-card .nn-links { display: flex; gap: 14px; margin-top: auto; padding-top: 10px; }
.nn-card .nn-links a { color: var(--nn-cy); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.nn-card .nn-links a:hover { text-shadow: 0 0 8px var(--nn-cy); }

.nn-skl { display: flex; flex-wrap: wrap; gap: 10px; }
.nn-skl span {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  border: 1px solid var(--nn-line); background: rgba(0,240,255,.04); font-size: 14px; font-weight: 600;
  color: var(--nn-ink); transition: all .2s;
}
.nn-skl span:hover { border-color: var(--nn-mg); color: #fff; box-shadow: 0 0 12px rgba(255,43,214,.4); transform: translateY(-2px); }

.nn-exp {
  border-left: 2px solid var(--nn-mg); box-shadow: -1px 0 12px rgba(255,43,214,.3);
  padding-left: 22px; margin-bottom: 26px;
}
.nn-exp .nn-d { font-size: 13px; color: var(--nn-cy); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.nn-exp h3 { font-size: 18px; color: #fff; margin: 4px 0; }
.nn-exp ul { margin: 8px 0 0 18px; color: var(--nn-mut); font-size: 15px; line-height: 1.6; }
.nn-exp ul li { margin-bottom: 4px; }

.nn-about p { font-size: 18px; color: #b9c8ee; max-width: 760px; line-height: 1.7; }

.nn-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.nn-reveal.in { opacity: 1; transform: none; }

.nn-foot { text-align: center; padding: 54px 0 28px; border-top: 1px solid var(--nn-line); }
.nn-foot .nn-s { display: flex; gap: 16px; justify-content: center; margin-bottom: 18px; }
.nn-foot .nn-s a {
  width: 44px; height: 44px; border: 1px solid var(--nn-line); display: grid; place-items: center;
  color: var(--nn-cy); transition: all .2s;
}
.nn-foot .nn-s a:hover { background: var(--nn-cy); color: #04121a; box-shadow: 0 0 20px var(--nn-cy); }
.nn-foot .nn-s svg { width: 18px; height: 18px; }
.nn-foot p { color: var(--nn-mut); font-family: Orbitron, sans-serif; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }


/* ===========================================================================
   Hacker Terminal Theme — Matrix Phosphor Green, CRT Scanlines & Bash Prompt
   =========================================================================== */
body[data-template="hacker"] {
  --hk-bg: #0b0f0b;
  --hk-ink: #c9f7c9;
  --hk-mut: #5f8a5f;
  --hk-gr: #39ff14;
  --hk-am: #ffb000;
  --hk-line: rgba(57,255,20,.18);
  margin: 0;
  min-height: 100vh;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: var(--hk-bg) !important;
  color: var(--hk-ink) !important;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
body[data-template="hacker"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
}
body[data-template="hacker"] * { box-sizing: border-box; }
body[data-template="hacker"] a { color: inherit; text-decoration: none; }
body[data-template="hacker"] img { max-width: 100%; }

.hk-wrap { max-width: 920px; margin: 0 auto; padding: 0 22px; }

.hk-nav {
  position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px; background: rgba(11,15,11,.88); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hk-line);
}
.hk-nav .hk-brand { color: var(--hk-gr); font-weight: 700; text-transform: lowercase; }
.hk-nav .hk-brand::before { content: "$ "; }
.hk-nav .hk-lk { display: flex; gap: 18px; }
.hk-nav .hk-lk a { color: var(--hk-mut); font-size: 13px; transition: .15s; }
.hk-nav .hk-lk a::before { content: "./"; }
.hk-nav .hk-lk a:hover { color: var(--hk-gr); }
@media (max-width: 680px) { .hk-nav .hk-lk { display: none; } }

.hk-hero { padding: 65px 0 45px; }
.hk-term {
  border: 1px solid var(--hk-line); border-radius: 8px; background: rgba(0,20,0,.45);
  overflow: hidden; box-shadow: 0 0 50px rgba(57,255,20,.08);
}
.hk-term .hk-bar {
  display: flex; gap: 7px; align-items: center; padding: 10px 14px;
  background: rgba(57,255,20,.06); border-bottom: 1px solid var(--hk-line);
}
.hk-term .hk-bar i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.hk-term .hk-bar .r { background: #ff5f56; }
.hk-term .hk-bar .y { background: #ffbd2e; }
.hk-term .hk-bar .g { background: #27c93f; }
.hk-term .hk-bar span { margin-left: 8px; color: var(--hk-mut); font-size: 12px; }

.hk-term .hk-body { padding: 22px 20px; font-size: 15px; }
.hk-term .hk-body .hk-ln { margin-bottom: 4px; }
.hk-term .hk-body .hk-pr { color: var(--hk-gr); }
.hk-term .hk-body .hk-pr::before { content: "visitor@portfolio:~$ "; }
.hk-term .hk-body .hk-out { color: var(--hk-ink); }
.hk-term h1 {
  font-size: clamp(30px, 6vw, 52px); color: var(--hk-gr); font-weight: 700;
  margin: 14px 0 6px; text-shadow: 0 0 14px rgba(57,255,20,.4); text-transform: lowercase;
}
.hk-term .hk-role { color: var(--hk-am); font-size: 18px; margin-bottom: 10px; }
.hk-term p { color: var(--hk-ink); margin: 12px 0; max-width: 640px; line-height: 1.6; }
.hk-cur {
  display: inline-block; width: 9px; height: 18px; background: var(--hk-gr);
  vertical-align: -3px; animation: hkBlink 1s steps(1) infinite;
}
@keyframes hkBlink { 50% { opacity: 0; } }

.hk-cta { display: flex; gap: 13px; margin-top: 18px; flex-wrap: wrap; }
.hk-btn {
  padding: 10px 20px; border: 1px solid var(--hk-gr); color: var(--hk-gr) !important;
  font-size: 14px; transition: .15s; display: inline-flex; gap: 8px; align-items: center; cursor: pointer;
  background: transparent;
}
.hk-btn::before { content: "> "; }
.hk-btn:hover { background: var(--hk-gr); color: #04140a !important; box-shadow: 0 0 20px rgba(57,255,20,.4); }
.hk-btn.am { border-color: var(--hk-am); color: var(--hk-am) !important; }
.hk-btn.am:hover { background: var(--hk-am); color: #1a1200 !important; box-shadow: 0 0 20px rgba(255,176,0,.4); }
.hk-btn svg { width: 16px; height: 16px; }

.hk-section { padding: 42px 0; }
.hk-lbl { color: var(--hk-gr); font-weight: 700; margin-bottom: 18px; font-size: 15px; }
.hk-lbl::before { content: "# "; }

.hk-grid { display: grid; gap: 14px; }
.hk-g2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .hk-g2 { grid-template-columns: 1fr; } }

.hk-card {
  border: 1px solid var(--hk-line); background: rgba(0,20,0,.3); padding: 18px;
  transition: .18s; display: flex; flex-direction: column;
}
.hk-card:hover {
  border-color: var(--hk-gr); box-shadow: 0 0 22px rgba(57,255,20,.15); transform: translateY(-3px);
}
.hk-card h3 { color: var(--hk-gr); font-size: 16px; margin-bottom: 5px; }
.hk-card h3::before { content: "~/ "; }
.hk-card .hk-kick { color: var(--hk-am); font-size: 13px; margin-bottom: 9px; }
.hk-card p { color: var(--hk-ink); font-size: 14px; margin: 0 0 12px; line-height: 1.55; }
.hk-card .hk-links { display: flex; gap: 14px; margin-top: auto; padding-top: 8px; }
.hk-card .hk-links a { color: var(--hk-gr); font-size: 13px; transition: .15s; }
.hk-card .hk-links a::before { content: "[ "; }
.hk-card .hk-links a::after { content: " ]"; }
.hk-card .hk-links a:hover { color: #fff; text-shadow: 0 0 8px var(--hk-gr); }

.hk-skl { display: flex; flex-wrap: wrap; gap: 9px; }
.hk-skl span {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border: 1px solid var(--hk-line); background: rgba(57,255,20,.04); font-size: 13px;
  color: var(--hk-ink); transition: .15s;
}
.hk-skl span::before { content: "+"; color: var(--hk-gr); }
.hk-skl span:hover { border-color: var(--hk-gr); color: #fff; box-shadow: 0 0 10px rgba(57,255,20,.3); }

.hk-exp { border-left: 2px solid var(--hk-gr); padding-left: 18px; margin-bottom: 22px; }
.hk-exp .hk-d { color: var(--hk-am); font-size: 13px; }
.hk-exp h3 { color: var(--hk-gr); font-size: 16px; margin: 4px 0; }
.hk-exp ul { margin: 6px 0 0 14px; color: var(--hk-ink); font-size: 14px; list-style-type: none; padding-left: 0; }
.hk-exp ul li { margin-bottom: 4px; position: relative; padding-left: 18px; }
.hk-exp ul li::before { content: "» "; position: absolute; left: 0; color: var(--hk-gr); }

.hk-about p { color: var(--hk-ink); font-size: 15px; max-width: 740px; line-height: 1.6; }

.hk-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.hk-reveal.in { opacity: 1; transform: none; }

.hk-foot { padding: 46px 0 26px; border-top: 1px solid var(--hk-line); margin-top: 20px; }
.hk-foot .hk-email { color: var(--hk-am); font-size: 14px; display: inline-block; margin-bottom: 14px; }
.hk-foot .hk-email:hover { text-decoration: underline; }
.hk-foot .hk-s { display: flex; gap: 12px; margin-top: 8px; }
.hk-foot .hk-s a {
  width: 42px; height: 42px; border: 1px solid var(--hk-line); display: grid; place-items: center;
  color: var(--hk-gr); transition: .15s;
}
.hk-foot .hk-s a:hover { background: var(--hk-gr); color: #04140a; box-shadow: 0 0 18px var(--hk-gr); }
.hk-foot .hk-s svg { width: 18px; height: 18px; }
.hk-foot p { margin-top: 18px; color: var(--hk-mut); font-size: 12px; }


/* ==========================================================================
   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)}

/* 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}

/* 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}

/* Disable global floating background effects for moderncv to avoid visual clash */
body[data-template="moderncv"] .bg-fx, body[data-template="moderncv"] .grid-overlay { display: none !important; }

/* MINI BROWSER MOCKUP THUMBNAILS (.lx-tp) */
.lx-tp-desire{background:#090a10;border-color:rgba(168,85,247,0.4)}

/* STUDIO PICKER THUMBNAILS (.tpl-preview) */
.tpl-preview.desire{background:linear-gradient(135deg,#6366f1,#d946ef);color:#fff}

/* MODAL BODY STYLING */
.lx-modal-body[data-theme="desire"]{background:#090a10;color:#f1f2f6}

/* ========================================================
   DESIRE STUDIO THEME (Purrweb Designer Portfolio Replica)
   ======================================================== */
body[data-template="desire"] {
  background: #090a10;
  color: #f1f2f6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  overflow-x: hidden;
}
body[data-template="desire"] .bg-fx,
body[data-template="desire"] .grid-overlay,
body[data-template="desire"] .blob {
  display: none !important;
}

.desire-page {
  position: relative;
  min-height: 100vh;
}
.desire-mesh-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 15% 15%, rgba(99, 102, 241, 0.15), transparent 45%),
    radial-gradient(circle at 85% 25%, rgba(217, 70, 239, 0.14), transparent 40%),
    radial-gradient(circle at 50% 70%, rgba(6, 182, 212, 0.10), transparent 50%),
    #090a10;
}

/* Floating Pill Nav */
.desire-nav {
  position: sticky;
  top: 18px;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  background: rgba(18, 19, 29, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  margin-top: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.desire-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.desire-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #818cf8;
}
.desire-fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #4f46e5, #d946ef);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.desire-brand-meta {
  display: flex;
  flex-direction: column;
}
.desire-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}
.desire-badge-online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #10b981;
  font-weight: 500;
}
.desire-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: desirePulse 2s infinite;
}
@keyframes desirePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.desire-nav-pills {
  display: flex;
  gap: 6px;
}
.desire-nav-pills a {
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 13px;
  color: #94a3b8;
  text-decoration: none;
  transition: all 0.2s ease;
}
.desire-nav-pills a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.desire-btn-contact {
  padding: 8px 18px;
  border-radius: 9999px;
  background: #fff;
  color: #090a10 !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.2);
}
.desire-btn-contact:hover {
  transform: translateY(-1px);
  background: #f1f5f9;
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.35);
}

/* Hero Section */
.gal-desire-head {
  position: relative;
  z-index: 1;
  padding: 70px 0 50px;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
.desire-kicker-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 9999px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  margin-bottom: 22px;
}
.desire-sparkle {
  color: #d946ef;
}
.desire-title {
  font-size: clamp(38px, 6vw, 66px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 24px;
}
.desire-title em {
  font-style: normal;
  background: linear-gradient(135deg, #c084fc, #60a5fa 50%, #f472b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.desire-hero-loupe {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px 8px 10px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.desire-loupe-glass {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(217, 70, 239, 0.3));
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: grid;
  place-items: center;
  color: #fff;
}
.desire-loupe-icon {
  width: 18px;
  height: 18px;
}
.desire-loupe-info {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.desire-loupe-info b {
  font-size: 13px;
  color: #fff;
  font-weight: 600;
}
.desire-loupe-info span {
  font-size: 11px;
  color: #94a3b8;
}
.desire-bio {
  font-size: 18px;
  line-height: 1.6;
  color: #94a3b8;
  max-width: 680px;
  margin: 0 auto 30px;
}
.desire-tags-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 34px;
}
.desire-tag {
  font-size: 12px;
  font-weight: 500;
  color: #cbd5e1;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9999px;
}
.desire-hero-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.desire-btn-primary {
  padding: 12px 26px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}
.desire-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(168, 85, 247, 0.55);
}
.desire-btn-ghost {
  padding: 12px 24px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0 !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}
.desire-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff !important;
}

/* Works Section & Asymmetric Grid */
.desire-works-sec {
  position: relative;
  z-index: 1;
  padding: 60px 0 80px;
}
.desire-sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 36px;
  flex-wrap: wrap;
  gap: 16px;
}
.desire-sec-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #818cf8;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}
.desire-sec-title {
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0;
}
.desire-counter-badge {
  font-size: 12px;
  color: #94a3b8;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.desire-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 30px;
}
.desire-card {
  margin: 0;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.desire-card-hero {
  grid-column: span 12;
}
.desire-card-tall {
  grid-column: span 5;
}
.desire-card-med {
  grid-column: span 7;
}
.desire-card-wide {
  grid-column: span 8;
}
.desire-card-split {
  grid-column: span 4;
}

.desire-card-frame {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: #13141f;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}
.desire-card:hover .desire-card-frame {
  transform: translateY(-6px);
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(99, 102, 241, 0.2);
}
.desire-card-frame img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.desire-card-hero .desire-card-frame img {
  height: 520px;
}
.desire-card-tall .desire-card-frame img {
  height: 480px;
}
.desire-card:hover .desire-card-frame img {
  transform: scale(1.04);
}
.desire-cat-pill {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(9, 10, 16, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.desire-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 10, 16, 0.4);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.desire-card:hover .desire-card-overlay {
  opacity: 1;
}
.desire-loupe-preview {
  padding: 10px 20px;
  border-radius: 9999px;
  background: #fff;
  color: #090a10;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  transform: translateY(10px);
  transition: transform 0.3s ease;
}
.desire-card:hover .desire-loupe-preview {
  transform: translateY(0);
}
.desire-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 6px 0;
}
.desire-card-year {
  font-size: 11px;
  color: #818cf8;
  font-weight: 600;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 4px;
}
.desire-meta-text b {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  display: block;
}
.desire-meta-text p {
  font-size: 13.5px;
  color: #94a3b8;
  margin: 6px 0 0;
  line-height: 1.5;
}
.desire-arrow-pill {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
  margin-left: 14px;
  transition: all 0.25s ease;
}
.desire-card:hover .desire-arrow-pill {
  background: #fff;
  color: #090a10;
  transform: rotate(45deg);
}

/* Services & Pricing Section */
.desire-services-sec {
  position: relative;
  z-index: 1;
  padding: 70px 0 80px;
}
.desire-sec-desc {
  font-size: 15px;
  color: #94a3b8;
  max-width: 500px;
  margin: 0;
}
.desire-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.desire-service-card {
  position: relative;
  border-radius: 24px;
  background: rgba(18, 19, 30, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 30px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.desire-service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, 0.3);
}
.desire-srv-featured {
  border-color: rgba(168, 85, 247, 0.4);
  background: linear-gradient(180deg, rgba(30, 27, 50, 0.8), rgba(18, 19, 30, 0.9));
  box-shadow: 0 15px 40px rgba(168, 85, 247, 0.15);
}
.desire-srv-badge {
  position: absolute;
  top: -12px;
  right: 24px;
  padding: 4px 12px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #a855f7, #6366f1);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.desire-srv-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.desire-srv-num {
  font-size: 14px;
  font-weight: 700;
  color: #818cf8;
}
.desire-srv-price {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a5b4fc;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.25);
}
.desire-service-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
}
.desire-service-card p {
  font-size: 13.5px;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0 0 20px;
}
.desire-srv-features {
  list-style: none;
  padding: 0;
  margin: auto 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.desire-srv-features li {
  font-size: 12.5px;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.desire-srv-features li::before {
  content: "✓";
  color: #a855f7;
  font-weight: 700;
}

/* About / Quote Card */
.desire-about-sec {
  position: relative;
  z-index: 1;
  padding: 40px 0 80px;
}
.desire-quote-card {
  position: relative;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(26, 28, 44, 0.8), rgba(15, 16, 26, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 50px 40px;
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.desire-quote-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #a855f7;
  margin-bottom: 20px;
}
.desire-quote {
  font-size: clamp(20px, 3.2vw, 28px);
  font-weight: 500;
  line-height: 1.4;
  color: #f8fafc;
  margin: 0 0 30px;
  font-style: italic;
}
.desire-quote-author {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.desire-quote-author b {
  font-size: 15px;
  color: #fff;
  display: block;
}
.desire-quote-author span {
  font-size: 12px;
  color: #94a3b8;
}

/* Footer Banner */
.desire-foot {
  position: relative;
  z-index: 1;
  padding: 30px 0 60px;
}
.desire-foot-banner {
  border-radius: 28px;
  background: radial-gradient(circle at 10% 50%, rgba(99, 102, 241, 0.25), transparent 70%), #121320;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 40px 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 20px;
}
.desire-foot-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #818cf8;
  display: block;
  margin-bottom: 6px;
}
.desire-foot-banner h2 {
  font-size: clamp(22px, 3.5vw, 32px);
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.desire-foot-bottom {
  display: flex;
  justify-content: space-between;
  color: #64748b;
  font-size: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 24px;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .desire-card-hero,
  .desire-card-tall,
  .desire-card-med,
  .desire-card-wide,
  .desire-card-split {
    grid-column: span 12;
  }
  .desire-card-frame img,
  .desire-card-hero .desire-card-frame img,
  .desire-card-tall .desire-card-frame img {
    height: 320px;
  }
  .desire-nav-pills {
    display: none;
  }
  .desire-foot-banner {
    padding: 30px 24px;
  }
}