/* --- 1. SYSTEM VARIABLES --- */
:root {
    --font-ui: 'Inter', sans-serif;
    --font-display: 'Space Grotesk', sans-serif;
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Light Mode */
    --bg-eng-light: #F2F2F7; --text-eng-light: #1C1C1E; 
    --glass-eng-light: rgba(255, 255, 255, 0.85); 
    --border-eng-light: rgba(255, 255, 255, 0.9); 
    --accent-eng: #007AFF; 

    /* Dark Mode */
    --bg-eng-dark: #000000; --text-eng-dark: #FFFFFF; 
    --glass-eng-dark: rgba(28, 28, 30, 0.75); 
    --border-eng-dark: rgba(255, 255, 255, 0.15); 
    --accent-eng-dark: #0A84FF; 

    /* Creative Mode */
    --bg-crt-light: #e5e0dc; --text-crt-light: #3d0000; 
    --glass-crt-light: rgba(255, 255, 255, 0.7); 
    --border-crt-light: rgba(139, 0, 0, 0.2); 
    --accent-crt: #c41e3a;
    
    --bg-crt-dark: #050505; --text-crt-dark: #E0E0E0; 
    --glass-crt-dark: rgba(40, 10, 10, 0.6); 
    --border-crt-dark: rgba(255, 0, 0, 0.25); 
    --accent-crt-dark: #FF3B30;
}

/* Theme Mapping */
body.mode-eng.theme-dark { --bg: var(--bg-eng-dark); --text: var(--text-eng-dark); --glass: var(--glass-eng-dark); --border: var(--border-eng-dark); --accent: var(--accent-eng-dark); }
body.mode-eng.theme-light { --bg: var(--bg-eng-light); --text: var(--text-eng-light); --glass: var(--glass-eng-light); --border: var(--border-eng-light); --accent: var(--accent-eng); }
body.mode-create.theme-dark { --bg: var(--bg-crt-dark); --text: var(--text-crt-dark); --glass: var(--glass-crt-dark); --border: var(--border-crt-dark); --accent: var(--accent-crt-dark); }
body.mode-create.theme-light { --bg: var(--bg-crt-light); --text: var(--text-crt-light); --glass: var(--glass-crt-light); --border: var(--border-crt-light); --accent: var(--accent-crt); }

* { box-sizing: border-box; }

/* MOBILE HEIGHT FIX */
body { 
    margin: 0; font-family: var(--font-ui); background: #000; color: var(--text); 
    height: 100dvh; /* Dynamic height for mobile browsers */
    overflow: hidden; 
    display: flex; justify-content: center; align-items: center; 
    transition: all 0.6s ease; 
}

/* BACKGROUNDS */
.bg-layer { position: fixed; inset: 0; z-index: -2; transition: opacity 0.8s ease; }
.bg-lab { background: radial-gradient(circle at 50% 50%, var(--bg), #000); }
.bg-upside { background: radial-gradient(circle at 50% 50%, var(--bg), #000); opacity: 0; }
body.mode-create .bg-lab { opacity: 0; }
body.mode-create .bg-upside { opacity: 1; }
.vignette { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle, transparent 60%, rgba(0,0,0,0.4) 100%); }
.particles-container { position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: 0; transition: opacity 0.5s; background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(2px 2px at 50px 160px, #ddd, transparent); background-size: 300px 300px; animation: floatAsh 20s linear infinite; }
body.mode-create .particles-container { opacity: 0.3; }
@keyframes floatAsh { from { background-position: 0 0; } to { background-position: 0 -300px; } }

/* FRAME */
.ios-frame { 
    width: 100%; height: 100%; position: relative; 
    display: flex; flex-direction: column; overflow: hidden; 
}
@media(min-width: 768px) { 
    .ios-frame { max-width: 1100px; height: 92vh; border-radius: 44px; background: rgba(255,255,255,0.01); box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 50px 100px -20px rgba(0,0,0,0.5); backdrop-filter: blur(30px); } 
}

/* --- HEADER (Fixed Overlap) --- */
.top-bar { 
    padding: 16px 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    position: relative; 
    z-index: 50; 
    gap: 10px;
}

/* Theme Button */
.theme-toggle-btn { 
    width: 40px; height: 40px; border-radius: 50%; 
    background: var(--glass); border: 1px solid var(--border); 
    display: flex; align-items: center; justify-content: center; 
    color: var(--text); cursor: pointer; transition: 0.3s; 
    flex-shrink: 0; position: relative; left: auto;
}

/* ICON STACK FIX (Prevents Cutting Off) */
.icon-stack { 
    position: relative; width: 20px; height: 20px; 
    display: flex; align-items: center; justify-content: center;
}
.icon-sun, .icon-moon { 
    position: absolute; inset: 0; width: 100%; height: 100%;
    transition: 0.4s var(--ease-spring); 
}
.icon-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }
body.theme-dark .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }
body.theme-dark .icon-moon { opacity: 1; transform: rotate(0) scale(1); }

/* Switch */
.liquid-switch { 
    position: relative; width: 100%; max-width: 260px; height: 44px; 
    background: rgba(0,0,0,0.1); border-radius: 100px; 
    display: flex; align-items: center; padding: 4px; 
    border: 1px solid var(--border); backdrop-filter: blur(10px);
    flex-grow: 1;
}
body.theme-light .liquid-switch { background: rgba(255,255,255,0.5); }

.blob-pill { 
    position: absolute; left: 4px; width: 48%; height: 36px; 
    background: var(--accent); border-radius: 100px; 
    transition: transform 0.5s var(--ease-spring), background 0.5s; 
    box-shadow: 0 0 15px var(--accent); 
}
.liquid-switch.switched .blob-pill { transform: translateX(100%); left: 2%; }

.switch-txt { 
    flex: 1; position: relative; z-index: 10; background: none; border: none; 
    font-size: 10px; font-weight: 700; color: #888; cursor: pointer; transition: color 0.3s; 
    white-space: nowrap; 
}
.switch-txt.active { color: #fff; }

/* HERO */
.hero-id-container { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 30px 24px; min-height: 100px; }
.hero-avatar-frame { 
    width: 80px; height: 80px; border-radius: 24px; 
    border: 1px solid var(--border); padding: 3px; background: var(--glass); 
    position: relative; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
    flex-shrink: 0; 
}
.hero-img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.scan-line { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent, var(--accent), transparent); opacity: 0.3; height: 100%; transform: translateY(-100%); animation: scan 4s ease-in-out infinite; pointer-events: none; }
@keyframes scan { 0% { transform: translateY(-120%); } 100% { transform: translateY(120%); } }
.hero-text-block { text-align: left; }
.glitch-name { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; line-height: 1; margin-bottom: 6px; }
.id-badge { display: flex; align-items: center; gap: 6px; }
.status-indicator { width: 6px; height: 6px; background: #34c759; border-radius: 50%; box-shadow: 0 0 6px #34c759; }
.mono-label { font-family: 'Space Grotesk'; font-size: 10px; letter-spacing: 1px; color: var(--accent); }

/* FILTER BAR */
.filter-wrapper { overflow-x: auto; margin: 0 20px 16px 20px; padding-bottom: 4px; }
.filter-bar { display: flex; gap: 8px; width: max-content; }
.filter-btn { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 6px 14px; border-radius: 100px; font-size: 10px; font-weight: 700; cursor: pointer; transition: 0.3s; opacity: 0.6; white-space: nowrap; }
.filter-btn:hover, .filter-btn.active { opacity: 1; border-color: var(--accent); color: var(--accent); background: rgba(0,0,0,0.05); }

/* GRID & CARDS */
.scroll-canvas { flex: 1; overflow-y: auto; padding: 0 0 140px 0; scrollbar-width: none; }
.view-layer { display: none; padding: 0 20px; animation: popUp 0.5s var(--ease-spring); }
.view-layer.active { display: block; }
@keyframes popUp { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }

.bento-layout, .masonry-layout { 
    display: grid; gap: 12px; 
    grid-template-columns: 1fr 1fr; 
}
@media(min-width: 600px) { 
    .bento-layout, .masonry-layout { gap: 16px; }
}
.full-width-card, .col-span-2 { grid-column: span 2; }

/* PORTRAIT CARD FIX */
.card-tall { 
    min-height: 260px; /* Ensures it looks like a portrait on mobile */
    grid-row: span 2; 
}

.glass-card { background: var(--glass); backdrop-filter: blur(40px); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; cursor: pointer; position: relative; transition: transform 0.3s var(--ease-spring), border-color 0.3s; }
.glass-card:hover { transform: translateY(-4px); border-color: var(--accent); }

.skill-pill { font-size: 9px; border: 1px solid var(--border); padding: 3px 6px; border-radius: 4px; opacity: 0.8; }
.tech-tag { font-size: 9px; font-weight: 700; color: #fff; background: var(--accent); padding: 3px 6px; border-radius: 4px; }
.arrow-circle { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.img-cover { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.glass-card:hover .img-cover { transform: scale(1.05); }

/* FOOTER */
.footer-container { margin-top: 30px; display: flex; justify-content: center; padding-bottom: 20px; }
.glass-pill-row { background: var(--glass); border: 1px solid var(--border); border-radius: 100px; padding: 8px 20px; display: flex; align-items: center; gap: 16px; backdrop-filter: blur(20px); }
.footer-btn { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 10px; font-weight: 600; text-decoration: none; opacity: 0.7; transition: 0.2s; }
.footer-btn:hover { opacity: 1; color: var(--accent); }
.divider-v { width: 1px; height: 12px; background: var(--border); }

/* DOCK */
.glass-dock { 
    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); 
    background: var(--glass); border: 1px solid var(--border); 
    border-radius: 100px; padding: 10px 24px; 
    display: flex; gap: 24px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); 
    z-index: 100; margin-bottom: env(safe-area-inset-bottom);
}
.dock-icon { color: var(--text); opacity: 0.6; transition: 0.3s; } .dock-icon:hover { opacity: 1; transform: translateY(-5px); color: var(--accent); }
.dock-icon.main { background: var(--accent); color: #fff; padding: 12px; border-radius: 50%; margin-top: -20px; box-shadow: 0 10px 20px rgba(0,0,0,0.2); opacity: 1; }
.tooltip { position: absolute; top: -35px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; opacity: 0; transition: 0.2s; pointer-events: none; }
.dock-icon.main:hover .tooltip { opacity: 1; top: -40px; }

/* MODAL */
.modal-wrapper { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: 0.3s; }
.modal-wrapper.active { opacity: 1; pointer-events: all; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(15px); }
.modal-box { position: relative; width: 90%; max-width: 440px; max-height: 80vh; overflow-y: auto; background: var(--bg); border: 1px solid var(--border); border-radius: 28px; transform: scale(0.9) translateY(20px); transition: 0.4s var(--ease-spring); }
.modal-wrapper.active .modal-box { transform: scale(1) translateY(0); }
.modal-header img { width: 100%; height: 180px; object-fit: cover; }
.modal-body { padding: 20px; }
.modal-close { position: absolute; top: 16px; right: 16px; background: rgba(0,0,0,0.5); color: #fff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; }
.btn-primary { background: var(--text); color: var(--bg); width: 100%; padding: 12px; border-radius: 12px; font-weight: 700; border: none; cursor: pointer; display: flex; justify-content: center; gap: 8px; }
.btn-outline { width: 100%; padding: 10px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: 12px; cursor: pointer; transition: 0.2s; }
.btn-outline:hover { background: var(--glass); border-color: var(--accent); }
.hidden-right { display: none; }
/* --- INSTAGRAM FEED MASONRY --- */
.feed-masonry {
    column-count: 3; /* 3 Columns = Smaller Items */
    column-gap: 8px; /* Space between columns */
    width: 100%;
}

.feed-item {
    break-inside: avoid; /* Prevents item from being cut in half */
    margin-bottom: 8px; /* Space below item */
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background: #000; /* Background for loading */
    transform: translateZ(0); /* Fixes flickering */
}

/* On very small screens, switch to 2 columns so they aren't microscopic */
@media (max-width: 400px) {
    .feed-masonry { column-count: 2; }
}

/* Aspect Ratios classes */
.ratio-reel { aspect-ratio: 9/16; } /* Tall */
.ratio-post { aspect-ratio: 1/1; }  /* Square */
.ratio-wide { aspect-ratio: 4/3; }  /* Landscape */