/* NexusPort — Portfolio & Showcase Platform
   Accent: Emerald #10b981 + Teal #06b6d4 */
:root {
    --bg-primary: #06060d;
    --bg-secondary: #0c0c18;
    --bg-card: rgba(15,15,30,0.6);
    --bg-card-hover: rgba(20,20,40,0.8);
    --bg-input: rgba(15,15,30,0.8);
    --text-primary: #f0f0ff;
    --text-secondary: #8888aa;
    --text-muted: #5a5a7a;
    --accent: #10b981;
    --accent2: #06b6d4;
    --blue: #00b4ff;
    --violet: #8b5cf6;
    --green: #10b981;
    --teal: #06b6d4;
    --red: #ef4444;
    --yellow: #eab308;
    --gradient-primary: linear-gradient(135deg, var(--accent), var(--accent2));
    --gradient-glow: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(6,182,212,0.15));
    --glow-accent: rgba(16,185,129,0.25);
    --font-heading: 'Sora', sans-serif;
    --font-body: 'Outfit', sans-serif;
    --radius: 14px;
    --radius-sm: 10px;
    --radius-xs: 6px;
    --radius-full: 999px;
    --border-subtle: rgba(255,255,255,0.06);
    --border-accent: rgba(16,185,129,0.2);
    --shadow-card: 0 4px 24px rgba(0,0,0,0.35);
    --nav-height: 72px;
    --content-max: 1280px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); background:var(--bg-primary); color:var(--text-primary); min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; }

/* Navbar */
.navbar { position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--nav-height); background:rgba(6,6,13,0.85); backdrop-filter:blur(20px); border-bottom:1px solid var(--border-subtle); }
.nav-inner { max-width:var(--content-max); margin:0 auto; padding:0 2rem; height:100%; display:flex; align-items:center; gap:2rem; }
.nav-logo { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.logo-img { height:36px; width:auto; }
.logo-label { font-family:var(--font-heading); font-size:.8rem; font-weight:600; color:var(--accent); background:rgba(16,185,129,0.1); padding:2px 8px; border-radius:var(--radius-full); border:1px solid rgba(16,185,129,0.25); }
.nav-links { display:flex; align-items:center; gap:4px; flex:1; }
.nav-link { padding:8px 14px; border-radius:var(--radius-sm); font-size:.88rem; font-weight:500; color:var(--text-secondary); transition:all .2s; }
.nav-link:hover, .nav-link.active { color:var(--text-primary); background:rgba(255,255,255,0.04); }
.nav-actions { display:flex; align-items:center; gap:.75rem; margin-left:auto; }
.nav-search { display:flex; align-items:center; gap:.5rem; background:var(--bg-input); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); padding:8px 14px; min-width:220px; }
.nav-search input { background:none; border:none; outline:none; color:var(--text-primary); font-family:var(--font-body); font-size:.85rem; width:100%; }
.nav-search svg { color:var(--text-muted); flex-shrink:0; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.25rem; border-radius:var(--radius-sm); font-family:var(--font-body); font-size:.88rem; font-weight:600; cursor:pointer; border:none; transition:all .2s; }
.btn-primary { background:var(--gradient-primary); color:#fff; }
.btn-primary:hover { opacity:.9; transform:translateY(-1px); }
.btn-outline { background:transparent; border:1px solid var(--border-accent); color:var(--accent); }
.btn-outline:hover { background:rgba(16,185,129,0.08); }
.btn-sm { padding:.4rem .9rem; font-size:.8rem; }
.btn-ghost { background:transparent; color:var(--text-secondary); }
.btn-ghost:hover { color:var(--text-primary); background:rgba(255,255,255,0.04); }
.btn-danger { background:rgba(239,68,68,0.12); color:var(--red); border:1px solid rgba(239,68,68,0.25); }
.btn-danger:hover { background:rgba(239,68,68,0.2); }

/* User Dropdown */
.nav-user { position:relative; }
.nav-avatar-btn { background:none; border:none; cursor:pointer; padding:0; display:flex; align-items:center; }
.nav-avatar { width:36px; height:36px; border-radius:50%; border:2px solid var(--border-accent); object-fit:cover; }
.nav-avatar-placeholder { width:36px; height:36px; border-radius:50%; background:var(--gradient-primary); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; color:#fff; }
.user-dropdown { position:absolute; right:0; top:calc(100% + 8px); background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius); padding:.5rem; min-width:200px; z-index:200; display:none; backdrop-filter:blur(20px); box-shadow:var(--shadow-card); }
.user-dropdown.show { display:block; }
.dropdown-header { padding:.5rem .75rem .75rem; border-bottom:1px solid var(--border-subtle); margin-bottom:.25rem; }
.dropdown-username { display:block; font-weight:700; font-size:.9rem; }
.dropdown-role { font-size:.75rem; color:var(--text-muted); }
.dropdown-item { display:block; padding:.55rem .75rem; border-radius:var(--radius-xs); font-size:.85rem; color:var(--text-secondary); transition:all .15s; }
.dropdown-item:hover { color:var(--text-primary); background:rgba(255,255,255,0.04); }
.dropdown-divider { border:none; border-top:1px solid var(--border-subtle); margin:.25rem 0; }
.dropdown-danger { color:var(--red) !important; }

/* Main */
.main-content { padding-top:calc(var(--nav-height) + 2rem); min-height:100vh; }
.container { max-width:var(--content-max); margin:0 auto; padding:0 2rem; }
.container-sm { max-width:860px; margin:0 auto; padding:0 2rem; }

/* Hero */
.hero { padding:5rem 0 4rem; text-align:center; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; top:-200px; left:50%; transform:translateX(-50%); width:800px; height:800px; background:radial-gradient(circle, rgba(16,185,129,0.08) 0%, transparent 70%); pointer-events:none; }
.hero-title { font-family:var(--font-heading); font-size:clamp(2.2rem,5vw,3.8rem); font-weight:800; line-height:1.15; margin-bottom:1rem; }
.gradient-text { background:var(--gradient-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-sub { font-size:1.1rem; color:var(--text-secondary); max-width:560px; margin:0 auto 2rem; line-height:1.6; }
.hero-actions { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }

/* Cards */
.card { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius); padding:1.5rem; }
.card-hover { transition:all .2s; }
.card-hover:hover { border-color:var(--border-accent); box-shadow:0 0 0 1px var(--border-accent), var(--shadow-card); transform:translateY(-2px); }

/* Grid */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
@media(max-width:1024px) { .grid-4 { grid-template-columns:repeat(3,1fr); } .grid-3 { grid-template-columns:repeat(2,1fr); } }
@media(max-width:768px)  { .grid-4,.grid-3,.grid-2 { grid-template-columns:1fr; } }

/* Section */
.section { padding:3rem 0; }
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.section-title { font-family:var(--font-heading); font-size:1.4rem; font-weight:700; }
.section-link { color:var(--accent); font-size:.85rem; font-weight:600; }
.section-link:hover { text-decoration:underline; }

/* Showcase card */
.showcase-card { display:flex; flex-direction:column; overflow:hidden; }
.showcase-card .cover { width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--bg-secondary); border-radius:var(--radius-sm); margin-bottom:1rem; }
.showcase-card .meta { display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.showcase-card .title { font-family:var(--font-heading); font-size:1rem; font-weight:700; margin-bottom:.35rem; line-height:1.4; }
.showcase-card .summary { font-size:.83rem; color:var(--text-secondary); line-height:1.5; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; display:-webkit-box; overflow:hidden; }
.showcase-card .stats { display:flex; gap:1rem; margin-top:.75rem; font-size:.78rem; color:var(--text-muted); }
.showcase-card .stat { display:flex; align-items:center; gap:.3rem; }

/* Creator card */
.creator-card { display:flex; align-items:center; gap:1rem; }
.creator-avatar { width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid var(--border-accent); flex-shrink:0; }
.creator-avatar-placeholder { width:52px; height:52px; border-radius:50%; background:var(--gradient-primary); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.1rem; flex-shrink:0; }
.creator-name { font-family:var(--font-heading); font-weight:700; font-size:.95rem; }
.creator-tagline { font-size:.78rem; color:var(--text-muted); margin-top:.15rem; }

/* Skill badge */
.skill-badge { display:inline-flex; align-items:center; gap:.3rem; padding:3px 10px; border-radius:var(--radius-full); font-size:.75rem; font-weight:500; background:rgba(16,185,129,0.08); color:var(--accent); border:1px solid rgba(16,185,129,0.2); }
.skill-badge.beginner { background:rgba(107,114,128,0.1); color:var(--text-muted); border-color:rgba(107,114,128,0.2); }
.skill-badge.intermediate { background:rgba(6,182,212,0.08); color:var(--teal); border-color:rgba(6,182,212,0.2); }
.skill-badge.advanced { background:rgba(16,185,129,0.08); color:var(--green); border-color:rgba(16,185,129,0.2); }
.skill-badge.expert { background:rgba(139,92,246,0.1); color:var(--violet); border-color:rgba(139,92,246,0.25); }

/* Sort buttons */
.sort-btn { display:inline-flex; align-items:center; gap:.35rem; padding:.4rem .9rem; border-radius:var(--radius-sm); font-size:.82rem; font-weight:500; background:var(--bg-card); border:1px solid var(--border-subtle); color:var(--text-muted); cursor:pointer; transition:all .15s; text-decoration:none; }
.sort-btn:hover, .sort-btn.active { background:rgba(16,185,129,0.1); border-color:var(--border-accent); color:var(--accent); }

/* Category filter */
.filter-bar { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.filter-chip { padding:6px 14px; border-radius:var(--radius-full); font-size:.82rem; font-weight:500; background:var(--bg-card); border:1px solid var(--border-subtle); color:var(--text-secondary); cursor:pointer; transition:all .15s; }
.filter-chip:hover, .filter-chip.active { background:rgba(16,185,129,0.1); border-color:var(--border-accent); color:var(--accent); }

/* Profile header */
.profile-banner { width:100%; height:220px; object-fit:cover; border-radius:var(--radius); background:var(--gradient-glow); margin-bottom:-50px; }
.profile-banner-placeholder { width:100%; height:220px; border-radius:var(--radius); background:var(--gradient-glow); margin-bottom:-50px; }
.profile-avatar { width:96px; height:96px; border-radius:50%; border:4px solid var(--bg-primary); object-fit:cover; position:relative; z-index:1; }
.profile-avatar-placeholder { width:96px; height:96px; border-radius:50%; border:4px solid var(--bg-primary); background:var(--gradient-primary); display:flex; align-items:center; justify-content:center; font-size:2.2rem; font-weight:700; position:relative; z-index:1; }
.profile-header-meta { display:flex; align-items:flex-end; gap:1rem; padding:0 1rem; }
.profile-name { font-family:var(--font-heading); font-size:1.5rem; font-weight:800; }
.profile-username { color:var(--text-muted); font-size:.85rem; margin-top:.1rem; }
.profile-stats { display:flex; gap:1.5rem; margin-top:1rem; }
.pstat { text-align:center; }
.pstat-value { font-family:var(--font-heading); font-weight:700; font-size:1.1rem; }
.pstat-label { font-size:.72rem; color:var(--text-muted); margin-top:2px; }

/* Collab board */
.collab-type { display:inline-flex; align-items:center; gap:.4rem; padding:3px 10px; border-radius:var(--radius-full); font-size:.72rem; font-weight:600; margin-bottom:.5rem; }
.collab-type.lft { background:rgba(16,185,129,0.1); color:var(--green); border:1px solid rgba(16,185,129,0.25); }
.collab-type.offering { background:rgba(6,182,212,0.1); color:var(--teal); border:1px solid rgba(6,182,212,0.25); }
.collab-title { font-family:var(--font-heading); font-size:.95rem; font-weight:700; margin-bottom:.35rem; }
.collab-desc { font-size:.83rem; color:var(--text-secondary); line-height:1.5; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; display:-webkit-box; overflow:hidden; }

/* Featured badge */
.badge-featured { background:linear-gradient(135deg,rgba(234,179,8,0.15),rgba(245,158,11,0.1)); color:#fbbf24; border:1px solid rgba(234,179,8,0.25); padding:2px 8px; border-radius:var(--radius-full); font-size:.7rem; font-weight:700; }

/* Forms */
.form-group { margin-bottom:1.25rem; }
.form-label { display:block; font-size:.83rem; font-weight:600; color:var(--text-secondary); margin-bottom:.4rem; }
.form-control { width:100%; background:var(--bg-input); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); padding:.65rem 1rem; color:var(--text-primary); font-family:var(--font-body); font-size:.9rem; outline:none; transition:border-color .15s; }
.form-control:focus { border-color:var(--accent); }
.form-control::placeholder { color:var(--text-muted); }
textarea.form-control { resize:vertical; min-height:100px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:640px) { .form-row { grid-template-columns:1fr; } }

/* Alert */
.alert { padding:.85rem 1.25rem; border-radius:var(--radius-sm); font-size:.88rem; margin-bottom:1rem; }
.alert-success { background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.25); color:var(--green); }
.alert-error   { background:rgba(239,68,68,0.1);   border:1px solid rgba(239,68,68,0.25);   color:var(--red);   }
.alert-info    { background:rgba(6,182,212,0.1);    border:1px solid rgba(6,182,212,0.25);    color:var(--teal);  }

/* Tags */
.tag { display:inline-flex; align-items:center; padding:2px 8px; border-radius:var(--radius-full); font-size:.72rem; background:rgba(255,255,255,0.05); color:var(--text-muted); border:1px solid var(--border-subtle); }
.tags { display:flex; flex-wrap:wrap; gap:.3rem; }

/* Pagination */
.pagination { display:flex; justify-content:center; gap:.5rem; margin-top:2.5rem; }
.page-btn { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); font-size:.85rem; background:var(--bg-card); border:1px solid var(--border-subtle); color:var(--text-secondary); transition:all .15s; }
.page-btn:hover, .page-btn.active { background:rgba(16,185,129,0.1); border-color:var(--border-accent); color:var(--accent); }

/* Empty state */
.empty-state { text-align:center; padding:4rem 2rem; color:var(--text-muted); }
.empty-state h3 { font-family:var(--font-heading); font-size:1.1rem; font-weight:600; color:var(--text-secondary); margin-bottom:.5rem; }

/* Like button */
.like-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .9rem; border-radius:var(--radius-full); background:var(--bg-card); border:1px solid var(--border-subtle); color:var(--text-muted); cursor:pointer; font-size:.82rem; transition:all .2s; }
.like-btn:hover, .like-btn.liked { background:rgba(239,68,68,0.1); border-color:rgba(239,68,68,0.3); color:var(--red); }

/* Tabs */
.tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--border-subtle); margin-bottom:1.5rem; }
.tab { padding:.65rem 1rem; font-size:.88rem; font-weight:500; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .15s; }
.tab:hover { color:var(--text-primary); }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); }

/* Gallery */
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
@media(max-width:640px) { .gallery { grid-template-columns:repeat(2,1fr); } }
.gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-sm); cursor:pointer; transition:opacity .2s; }
.gallery img:hover { opacity:.85; }

/* Footer */
.site-footer { background:var(--bg-secondary); border-top:1px solid var(--border-subtle); margin-top:6rem; padding:3rem 0 1.5rem; }
.footer-inner { max-width:var(--content-max); margin:0 auto; padding:0 2rem; display:flex; gap:3rem; flex-wrap:wrap; }
.footer-brand { flex:0 0 220px; }
.footer-brand img { height:32px; margin-bottom:.75rem; }
.footer-brand p { font-size:.82rem; color:var(--text-muted); line-height:1.6; }
.footer-links { display:flex; gap:3rem; flex:1; flex-wrap:wrap; }
.footer-col h4 { font-family:var(--font-heading); font-size:.8rem; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.75rem; }
.footer-col a { display:block; font-size:.82rem; color:var(--text-muted); margin-bottom:.4rem; transition:color .15s; }
.footer-col a:hover { color:var(--text-primary); }
.footer-bottom { max-width:var(--content-max); margin:.2rem auto 0; padding:1.25rem 2rem 0; border-top:1px solid var(--border-subtle); text-align:center; color:var(--text-muted); font-size:.78rem; }

/* Lightbox */
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:9999; display:none; align-items:center; justify-content:center; }
.lightbox.open { display:flex; }
.lightbox img { max-width:90vw; max-height:90vh; border-radius:var(--radius-sm); }
.lightbox-close { position:fixed; top:1.5rem; right:1.5rem; background:none; border:none; color:#fff; cursor:pointer; }

/* Responsive nav */
.nav-mobile-toggle { display:none; background:none; border:none; cursor:pointer; color:var(--text-primary); }
@media(max-width:768px) {
    .nav-mobile-toggle { display:flex; }
    .nav-links { display:none; position:fixed; top:var(--nav-height); left:0; right:0; background:rgba(6,6,13,.97); flex-direction:column; padding:1rem 2rem; gap:.25rem; border-bottom:1px solid var(--border-subtle); }
    .nav-links.show { display:flex; }
    .nav-search { display:none; }
}