:root {
    --bg: #05070d;
    --panel: #0a0f19;
    --panel-2: #0d1420;
    --line: rgba(87, 241, 255, .16);
    --cyan: #57f1ff;
    --pink: #ff3ebf;
    --lime: #b6ff5c;
    --text: #e8fbff;
    --muted: #7f95a3;
}

html { scroll-behavior: smooth; }
* { box-sizing: border-box; }

body {
    margin: 0;
    overflow-x: hidden;
    color: var(--text);
    background: var(--bg);
    font-family: Inter, sans-serif;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(circle at 80% 10%, rgba(87, 241, 255, .08), transparent 30%),
        radial-gradient(circle at 15% 80%, rgba(255, 62, 191, .07), transparent 30%),
        #05070d;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(87, 241, 255, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(87, 241, 255, .028) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, black, transparent 82%);
}

::selection { background: var(--cyan); color: #001014; }
.material-symbols-rounded { font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

.glass {
    background: rgba(5, 8, 15, .82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.scanline { position: relative; }
.scanline::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: .35;
    background: linear-gradient(to bottom, transparent 50%, rgba(87, 241, 255, .018) 50%);
    background-size: 100% 4px;
    mix-blend-mode: screen;
}

.cyber-border {
    border: 1px solid var(--line);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .015), 0 0 30px rgba(87, 241, 255, .03);
}

.cyber-card {
    position: relative;
    background: linear-gradient(145deg, rgba(13, 20, 32, .94), rgba(7, 11, 19, .96));
    border: 1px solid rgba(87, 241, 255, .14);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.cyber-card::before,
.cyber-card::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.cyber-card::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--cyan);
    border-left: 2px solid var(--cyan);
}

.cyber-card::after {
    right: -1px;
    bottom: -1px;
    border-right: 2px solid rgba(255, 62, 191, .8);
    border-bottom: 2px solid rgba(255, 62, 191, .8);
}

.cyber-card:hover {
    transform: translateY(-7px);
    border-color: rgba(87, 241, 255, .46);
    box-shadow: 0 0 0 1px rgba(87, 241, 255, .05), 0 18px 60px rgba(0, 0, 0, .35), 0 0 34px rgba(87, 241, 255, .08);
}

.neon-cyan { text-shadow: 0 0 22px rgba(87, 241, 255, .36); }
.neon-pink { text-shadow: 0 0 22px rgba(255, 62, 191, .28); }

.neon-button {
    position: relative;
    overflow: hidden;
    color: #001014;
    background: var(--cyan);
    box-shadow: 0 0 24px rgba(87, 241, 255, .22);
    transition: .25s ease;
}
.neon-button:hover { transform: translateY(-2px); box-shadow: 0 0 36px rgba(87, 241, 255, .4); }

.ghost-button {
    color: #ffd4f2;
    background: rgba(255, 62, 191, .05);
    border: 1px solid rgba(255, 62, 191, .42);
    transition: .25s ease;
}
.ghost-button:hover { background: rgba(255, 62, 191, .11); box-shadow: 0 0 26px rgba(255, 62, 191, .12); }

.pill { border: 1px solid rgba(87, 241, 255, .18); background: rgba(87, 241, 255, .035); color: #9beeff; }
.sidebar-link { color: #7f95a3; border: 1px solid transparent; transition: .2s ease; }
.sidebar-link:hover { color: #c7fbff; background: rgba(87, 241, 255, .04); border-color: rgba(87, 241, 255, .12); }
.sidebar-link.active { color: #071018; background: var(--cyan); box-shadow: 0 0 24px rgba(87, 241, 255, .18); }
.status-dot { box-shadow: 0 0 0 4px rgba(182, 255, 92, .08), 0 0 15px rgba(182, 255, 92, .45); }

.noise {
    position: absolute;
    inset: 0;
    opacity: .045;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.terminal-label {
    color: var(--cyan);
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .7rem;
}

.hero-title { font-family: 'Space Grotesk', sans-serif; }
.hero-title .accent { color: var(--cyan); }
.hero-title .accent2 { color: #ff70cf; }
.project-cover { transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.cyber-card:hover .project-cover { transform: scale(1.025); }
.hud-line { height: 1px; background: linear-gradient(90deg, var(--cyan), transparent); }
.glow-orb { filter: blur(60px); opacity: .16; pointer-events: none; }
.profile-ring { box-shadow: 0 0 0 1px rgba(87, 241, 255, .48), 0 0 24px rgba(87, 241, 255, .14); }

.project-visual { border: 1px solid rgba(87, 241, 255, .15); background: rgba(87, 241, 255, .02); }
.project-visual--pink { border-color: rgba(255, 62, 191, .2); background: rgba(255, 62, 191, .025); }
.project-visual--lime { border-color: rgba(182, 255, 92, .18); background: rgba(182, 255, 92, .02); }

@media (max-width: 1023px) {
    .desktop-sidebar { display: none; }
    .with-sidebar { margin-left: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition: none !important; }
}

/* Project detail */
.project-detail-hero {
    background:
        linear-gradient(135deg, rgba(87,241,255,.045), transparent 38%),
        linear-gradient(180deg, rgba(13,20,32,.96), rgba(6,10,17,.98));
}
.project-status {
    display:inline-flex; align-items:center; padding:.35rem .55rem; border-radius:.35rem;
    font:700 .58rem/1 'Space Grotesk',sans-serif; letter-spacing:.14em;
    border:1px solid rgba(87,241,255,.26); color:#9bf7ff; background:rgba(87,241,255,.05);
}
.project-status--pink { border-color:rgba(255,62,191,.3); color:#ff9cdd; background:rgba(255,62,191,.05); }
.project-status--lime { border-color:rgba(182,255,92,.3); color:#d2ff9b; background:rgba(182,255,92,.045); }
.project-hud { border:1px solid rgba(87,241,255,.13); background:rgba(2,7,13,.55); box-shadow:inset 0 0 32px rgba(87,241,255,.018); }
.metric-node { min-width:0; padding:.8rem .65rem; border:1px solid rgba(255,255,255,.055); background:rgba(255,255,255,.018); border-radius:.55rem; }
.metric-node strong { display:block; color:#fff; font:700 1rem/1.15 'Space Grotesk',sans-serif; }
.metric-node span { display:block; margin-top:.4rem; color:#647786; font-size:.58rem; text-transform:uppercase; letter-spacing:.09em; }
.system-bars { display:grid; gap:.4rem; }
.system-bars i { display:block; width:var(--w); height:2px; background:linear-gradient(90deg,var(--cyan),rgba(87,241,255,.08)); box-shadow:0 0 12px rgba(87,241,255,.16); }
.feature-node { position:relative; border:1px solid rgba(87,241,255,.1); background:rgba(10,15,25,.72); transition:.25s ease; }
.feature-node:hover { transform:translateY(-4px); border-color:rgba(87,241,255,.28); background:rgba(12,20,31,.86); }
.feature-icon { width:2.5rem; height:2.5rem; display:grid; place-items:center; border-radius:.55rem; color:var(--cyan); background:rgba(87,241,255,.06); border:1px solid rgba(87,241,255,.14); box-shadow:0 0 20px rgba(87,241,255,.05); }
.workflow-panel { background:linear-gradient(145deg,rgba(10,15,25,.92),rgba(5,9,15,.96)); }
.workflow-track { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.65rem; }
.workflow-step { position:relative; min-height:7rem; padding:1rem; border:1px solid rgba(87,241,255,.11); background:rgba(87,241,255,.022); border-radius:.65rem; }
.workflow-step:not(:last-child)::after { content:'›'; position:absolute; right:-.6rem; top:50%; transform:translateY(-50%); z-index:2; color:rgba(87,241,255,.5); font-size:1rem; }
.workflow-step span { display:block; color:var(--cyan); font:700 .58rem/1 'Space Grotesk',sans-serif; letter-spacing:.15em; }
.workflow-step strong { display:block; margin-top:1.9rem; color:#dffcff; font:600 .72rem/1.4 'Space Grotesk',sans-serif; }
.project-next { border:1px solid rgba(255,62,191,.18); background:linear-gradient(135deg,rgba(255,62,191,.045),rgba(7,11,19,.96) 45%,rgba(87,241,255,.035)); }
.project-back { text-decoration:none; }

@media (max-width: 900px) {
    .workflow-track { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .workflow-step:nth-child(3)::after { display:none; }
}
@media (max-width: 560px) {
    .workflow-track { grid-template-columns:1fr; }
    .workflow-step { min-height:auto; }
    .workflow-step strong { margin-top:.9rem; }
    .workflow-step::after { display:none !important; }
}

/* Phase 3 — Admin Console */
.admin-nav{display:flex;align-items:center;gap:.7rem;padding:.72rem .8rem;border:1px solid transparent;border-radius:.55rem;color:#6f8492;font-size:.76rem;font-weight:700;transition:.2s ease}.admin-nav .material-symbols-rounded{font-size:18px}.admin-nav:hover,.admin-nav.is-active{color:#dffcff;background:rgba(87,241,255,.05);border-color:rgba(87,241,255,.13)}.admin-nav.is-active{box-shadow:inset 2px 0 #57f1ff}.admin-label{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.45rem;color:#8aa0ad;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em}.admin-label span{font-weight:500;color:#4f626d;text-transform:none;letter-spacing:0}.admin-input{width:100%;border:1px solid rgba(87,241,255,.11);background:#070c14;color:#e8fbff;border-radius:.55rem;padding:.72rem .8rem;font-size:.85rem;outline:none;transition:.2s}.admin-input:focus{border-color:rgba(87,241,255,.42);box-shadow:0 0 0 3px rgba(87,241,255,.05)}select.admin-input{appearance:auto}.admin-icon-btn{display:inline-flex;align-items:center;justify-content:center;padding:.45rem .65rem;border:1px solid rgba(255,255,255,.07);border-radius:.45rem;color:#8aa0ad;font-size:.7rem;font-weight:700;transition:.2s}.admin-icon-btn:hover{color:#dffcff;border-color:rgba(87,241,255,.25);background:rgba(87,241,255,.04)}.admin-icon-btn--danger:hover{color:#fecdd3;border-color:rgba(251,113,133,.28);background:rgba(251,113,133,.05)}

/* Phase 4 — contact / hire system */
.form-label{display:block;margin-bottom:.5rem;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#7f95a3}
.cyber-input{width:100%;border:1px solid rgba(87,241,255,.13);border-radius:.65rem;background:rgba(3,8,14,.8);padding:.82rem .95rem;color:#e8fbff;outline:none;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.cyber-input::placeholder{color:#40515d}.cyber-input:focus{border-color:rgba(87,241,255,.48);background:rgba(5,13,22,.96);box-shadow:0 0 0 3px rgba(87,241,255,.06),0 0 22px rgba(87,241,255,.05)}
.cyber-input option{background:#071019;color:#e8fbff}.form-error{display:block;margin-top:.4rem;font-size:.7rem;color:#ff7ccc}

/* Phase 5 — Cyber Bio / Profile */
.bio-shell{min-height:100vh}.bio-hero{background:linear-gradient(135deg,rgba(87,241,255,.06),rgba(7,11,19,.96) 42%,rgba(255,62,191,.04))}.bio-orb{position:absolute;width:220px;height:220px;border-radius:999px;filter:blur(70px);opacity:.15;pointer-events:none}.bio-orb--cyan{background:#57f1ff;right:4%;top:-80px}.bio-orb--pink{background:#ff3ebf;left:30%;bottom:-120px}.bio-avatar{width:136px;height:136px;border-radius:1.25rem;object-fit:cover;border:1px solid rgba(87,241,255,.45);box-shadow:0 0 0 6px rgba(87,241,255,.035),0 0 38px rgba(87,241,255,.15)}.bio-online{position:absolute;right:-2px;bottom:8px;width:18px;height:18px;border-radius:50%;background:#b6ff5c;border:4px solid #09101a;box-shadow:0 0 18px rgba(182,255,92,.55)}.bio-meta{display:flex;align-items:center;gap:.8rem;padding:.85rem;border:1px solid rgba(87,241,255,.1);border-radius:.65rem;background:rgba(87,241,255,.025)}.bio-meta>.material-symbols-rounded{color:#57f1ff}.bio-meta small{display:block;color:#526772;font-size:.58rem;text-transform:uppercase;letter-spacing:.1em}.bio-meta strong{display:block;margin-top:.2rem;color:#dffcff;font-size:.78rem}.bio-link{display:flex;align-items:center;gap:.8rem;padding:.85rem .95rem;border:1px solid rgba(87,241,255,.1);border-radius:.65rem;background:rgba(87,241,255,.02);color:#a8bdc8;font-size:.78rem;font-weight:700;transition:.2s ease}.bio-link:hover{color:#e8fbff;border-color:rgba(87,241,255,.34);background:rgba(87,241,255,.055);transform:translateX(3px);box-shadow:0 0 24px rgba(87,241,255,.05)}.bio-link>.material-symbols-rounded:first-child{color:#57f1ff;font-size:20px}.bio-cta{border:1px solid rgba(255,62,191,.18);background:linear-gradient(135deg,rgba(255,62,191,.05),rgba(7,11,19,.96) 44%,rgba(87,241,255,.04));box-shadow:inset 0 0 40px rgba(87,241,255,.015)}
@media(max-width:640px){.bio-avatar{width:112px;height:112px}}

/* Profile / Instagram-inspired cyber gallery */
.ig-profile-shell{background:radial-gradient(circle at 50% 0,rgba(87,241,255,.055),transparent 28%)}
.ig-profile-card{background:rgba(6,10,17,.94);border:1px solid rgba(87,241,255,.1);box-shadow:0 24px 80px rgba(0,0,0,.28)}
.ig-cover{height:120px;background:linear-gradient(110deg,rgba(87,241,255,.18),rgba(255,62,191,.12),rgba(182,255,92,.06)),linear-gradient(rgba(87,241,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(87,241,255,.06) 1px,transparent 1px);background-size:auto,24px 24px,24px 24px}
.ig-avatar-wrap{border-radius:999px;padding:3px;background:linear-gradient(135deg,#57f1ff,#ff3ebf 60%,#b6ff5c);box-shadow:0 0 30px rgba(87,241,255,.15)}
.ig-avatar{width:100%;aspect-ratio:1;border-radius:999px;object-fit:cover;border:4px solid #070b12;background:#0a0f19}
.ig-verified{font-size:19px;color:#57f1ff;text-shadow:0 0 14px rgba(87,241,255,.5)}
.ig-action-btn{margin-left:auto;padding:.55rem .9rem;border-radius:.55rem;background:rgba(87,241,255,.12);border:1px solid rgba(87,241,255,.22);color:#baf8ff;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.ig-social-chip{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;padding:.55rem .8rem;border-radius:999px;border:1px solid rgba(87,241,255,.12);background:rgba(255,255,255,.025);font-size:.72rem;color:#a8bbc7}.ig-social-chip:hover{border-color:rgba(87,241,255,.38);color:white}.ig-social-chip .material-symbols-rounded{font-size:17px;color:#57f1ff}
.ig-tabs{display:flex;justify-content:center;border-top:1px solid rgba(87,241,255,.09)}.ig-tab{height:52px;display:flex;align-items:center;gap:.45rem;border-top:1px solid #57f1ff;margin-top:-1px;color:#d9fbff;font-size:.68rem;font-weight:800;letter-spacing:.12em}.ig-tab .material-symbols-rounded{font-size:17px}
.ig-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;background:#05070d}.ig-tile{position:relative;aspect-ratio:1;overflow:hidden;background:#0a0f19}.ig-tile img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease,filter .35s ease}.ig-tile:hover img{transform:scale(1.035);filter:brightness(.7)}.ig-tile-overlay{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:.2s;color:white;background:radial-gradient(circle,rgba(87,241,255,.14),rgba(0,0,0,.1))}.ig-tile:hover .ig-tile-overlay{opacity:1}
.ig-empty{padding:5rem 1rem;text-align:center;color:#667b88}.ig-empty .material-symbols-rounded{font-size:42px;color:#57f1ff}.ig-empty h2{margin-top:1rem;color:white;font-weight:700;font-size:1.15rem}.ig-empty p{font-size:.85rem;margin-top:.4rem}
.ig-modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;background:rgba(0,0,0,.88);backdrop-filter:blur(12px);padding:24px}.ig-modal.is-open{display:grid}.ig-modal-content{max-width:min(900px,94vw);max-height:90vh;text-align:center}.ig-modal-content img{max-width:100%;max-height:80vh;object-fit:contain;border:1px solid rgba(87,241,255,.15);box-shadow:0 0 50px rgba(87,241,255,.08)}.ig-modal-content p{color:#b8c7cf;font-size:.85rem;margin-top:1rem;max-width:680px}.ig-modal-close{position:fixed;right:20px;top:20px;color:white;padding:8px;border-radius:999px;background:rgba(255,255,255,.08)}
.admin-dropzone{min-height:150px;border:1px dashed rgba(87,241,255,.28);border-radius:14px;background:rgba(87,241,255,.025);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;color:#9db0bb;transition:.2s}.admin-dropzone:hover{border-color:rgba(87,241,255,.65);background:rgba(87,241,255,.05)}.admin-dropzone .material-symbols-rounded{font-size:34px;color:#57f1ff}.admin-dropzone strong{margin-top:.55rem;color:white}.admin-dropzone small{margin-top:.25rem;font-size:.72rem}
@media(max-width:767px){.ig-cover{height:86px}.ig-action-btn{margin-left:0}.ig-grid{gap:2px}}

/* Phase 6 — compact typography + architecture system */
html{font-size:15px}
body{font-size:.92rem}
.hero-title{font-size:clamp(2.55rem,7vw,5.7rem)!important}
.terminal-label{font-size:.59rem!important}
.cyber-input{font-size:.78rem;padding:.72rem .82rem}
.form-label{font-size:.62rem}
.admin-input{font-size:.78rem;padding:.66rem .75rem}
.admin-label{font-size:.62rem}
.architecture-map{display:grid;gap:.7rem;position:relative}
.architecture-map:before{content:'';position:absolute;left:1.18rem;top:2rem;bottom:2rem;width:1px;background:linear-gradient(#57f1ff,rgba(87,241,255,.08));box-shadow:0 0 12px rgba(87,241,255,.18)}
.architecture-layer{position:relative;display:grid;grid-template-columns:2.4rem 1fr;gap:.8rem;align-items:stretch}
.architecture-index{position:relative;z-index:2;width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:.55rem;border:1px solid rgba(87,241,255,.25);background:#071019;color:#57f1ff;font:800 .58rem/1 'Space Grotesk',sans-serif;letter-spacing:.1em;box-shadow:0 0 20px rgba(87,241,255,.07)}
.architecture-body{border:1px solid rgba(87,241,255,.11);border-radius:.7rem;background:linear-gradient(145deg,rgba(10,15,25,.9),rgba(6,10,17,.96));padding:.9rem 1rem}
.architecture-body h3{color:#e8fbff;font:700 .8rem/1.3 'Space Grotesk',sans-serif;letter-spacing:.02em}
.architecture-items{display:flex;flex-wrap:wrap;gap:.42rem;margin-top:.7rem}
.architecture-items span{padding:.38rem .55rem;border-radius:.4rem;border:1px solid rgba(87,241,255,.1);background:rgba(87,241,255,.025);color:#8297a3;font:600 .64rem/1.2 'Inter',sans-serif}
@media(max-width:640px){html{font-size:14px}.hero-title{font-size:clamp(2.25rem,13vw,4rem)!important}.architecture-body{padding:.8rem}.architecture-items span{font-size:.61rem}}