:root{--bg-primary:#f8f9fd;--bg-secondary:#fff;--bg-tertiary:#f1f5f9;--card-bg:#fff;--card-border:#e2e8f0;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#94a3b8;--purple-primary:#0a1e3f;--purple-hover:#030f24;--purple-light:#e8eef5;--purple-border:#b8c7db;--purple-glow:#0a1e3f2e;--purple-gradient:linear-gradient(135deg, #1e3a5f 0%, #0a1e3f 100%);--purple-text-gradient:linear-gradient(135deg, #1e3a5f 0%, #0a1e3f 100%);--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-full:9999px;--shadow-sm:0 2px 4px #00000005;--shadow-md:0 10px 25px -5px #0000000d, 0 8px 10px -6px #00000005;--shadow-lg:0 20px 35px -10px #0a1e3f26, 0 10px 15px -5px #0000000a;--shadow-card-hover:0 22px 40px -12px #0a1e3f38;--sidebar-width:215px;--header-height:70px;--transition-fast:.2s ease;--transition-normal:.3s cubic-bezier(.4, 0, .2, 1)}[data-theme=dark]{--bg-primary:#0b0f19;--bg-secondary:#111827;--bg-tertiary:#1f2937;--card-bg:#151d2a;--card-border:#263346;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--purple-primary:#38bdf8;--purple-hover:#7dd3fc;--purple-light:#38bdf826;--purple-border:#0284c7;--purple-glow:#38bdf840;--purple-gradient:linear-gradient(135deg, #0284c7 0%, #0369a1 100%)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;background-color:var(--bg-primary);color:var(--text-primary);font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6}body{background-color:var(--bg-primary);min-height:100vh;color:var(--text-primary);transition:background-color var(--transition-normal), color var(--transition-normal);overflow-x:clip}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--purple-border);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--purple-primary)}.app-layout{flex-direction:column;width:100%;min-height:100vh;display:flex;position:relative;overflow-x:clip}@media (width>=1024px){.app-layout{flex-direction:row}}.main-content{box-sizing:border-box;flex:1;width:100%;max-width:1280px;margin:0 auto;padding:1.25rem 1rem 3.5rem}@media (width>=768px) and (width<=1023px){.main-content{width:100%;padding:2rem 2rem 4rem}}@media (width>=1024px){.main-content{margin-left:var(--sidebar-width);width:calc(100% - var(--sidebar-width));padding:3rem 3.5rem 5rem}}.portfolio-section{margin-bottom:4.5rem;scroll-margin-top:2rem}@media (width>=768px){.portfolio-section{margin-bottom:5.5rem}}.section-header{margin-bottom:2.5rem}.section-title{letter-spacing:-.03em;color:var(--text-primary);align-items:center;gap:.75rem;font-size:clamp(1.65rem,3.5vw,2.25rem);font-weight:800;line-height:1.2;display:flex}.section-subtitle{color:var(--text-secondary);margin-top:.5rem;font-size:1.05rem}.purple-badge{background-color:var(--purple-light);color:var(--purple-primary);border-radius:var(--radius-full);border:1px solid var(--purple-border);align-items:center;gap:.5rem;padding:.35rem .85rem;font-size:.85rem;font-weight:600;display:inline-flex}.purple-gradient-text{background:var(--purple-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;display:inline-block}.btn-primary{background:var(--purple-gradient);color:#fff;border-radius:var(--radius-md);cursor:pointer;box-shadow:0 4px 14px var(--purple-glow);transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;gap:.6rem;padding:.75rem 1.75rem;font-size:.95rem;font-weight:600;text-decoration:none;display:inline-flex}.btn-primary:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 8px 20px #7c3aed4d}.btn-secondary{background:var(--card-bg);color:var(--text-primary);border-radius:var(--radius-md);border:1px solid var(--card-border);cursor:pointer;transition:all var(--transition-fast);justify-content:center;align-items:center;gap:.6rem;padding:.75rem 1.75rem;font-size:.95rem;font-weight:600;text-decoration:none;display:inline-flex}.btn-secondary:hover{border-color:var(--purple-primary);color:var(--purple-primary);background:var(--purple-light);transform:translateY(-2px)}.btn-outline-purple{color:var(--purple-primary);border-radius:var(--radius-sm);border:1px solid var(--purple-border);cursor:pointer;transition:all var(--transition-fast);background:0 0;justify-content:center;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.85rem;font-weight:600;display:inline-flex}.btn-outline-purple:hover{background:var(--purple-primary);color:#fff}.card-base{background-color:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:all var(--transition-normal)}.card-base:hover{border-color:var(--purple-border);box-shadow:var(--shadow-card-hover)}.form-input{border-radius:var(--radius-md);border:1px solid var(--card-border);background-color:var(--bg-primary);width:100%;color:var(--text-primary);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none;padding:.85rem 1.1rem;font-family:inherit;font-size:.95rem}.form-input:focus{border-color:var(--purple-primary);box-shadow:0 0 0 3px var(--purple-glow)}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes pulseGlow{0%,to{opacity:.6;transform:scale(1)}50%{opacity:.9;transform:scale(1.05)}}.animate-fade-in{animation:.5s ease-out forwards fadeIn}
