/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a0f;--bg-card:#12121a;--bg-card-hover:#1a1a26;
  --bg-input:#16161f;--bg-nav:rgba(10,10,15,.85);
  --border:#1e1e2e;--border-hover:#2a2a3e;
  --text:#e2e8f0;--text-secondary:#94a3b8;--text-muted:#64748b;
  --accent:#818cf8;--accent-hover:#6366f1;--accent-bg:rgba(129,140,248,.08);
  --green:#34d399;--green-bg:rgba(52,211,153,.1);
  --pink:#f472b6;--pink-bg:rgba(244,114,182,.1);
  --radius:12px;--radius-sm:8px;--radius-xs:6px;
  --shadow:0 4px 24px rgba(0,0,0,.3);
  --font:'Inter','Noto Sans SC',system-ui,-apple-system,sans-serif;
}
html{font-size:15px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit;border:none;background:none;color:inherit}
input,textarea{font-family:inherit;color:var(--text);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;font-size:.9rem;outline:none;transition:border .2s}
input:focus,textarea:focus{border-color:var(--accent)}
textarea{resize:vertical}

/* ===== NAV ===== */
.nav{position:sticky;top:0;z-index:100;background:var(--bg-nav);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.nav-inner{max-width:1280px;margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between}
.nav-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.1rem;letter-spacing:-.02em}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;transition:all .2s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn-outline{border:1px solid var(--border);color:var(--text-secondary)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}

/* ===== HERO ===== */
.hero{padding:48px 24px 36px;text-align:center;background:linear-gradient(180deg,rgba(99,102,241,.06) 0%,transparent 100%)}
.hero-inner{max-width:640px;margin:0 auto}
.hero h1{font-size:2.2rem;font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,#e2e8f0 0%,#818cf8 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-sub{color:var(--text-secondary);margin:10px 0 28px;font-size:.95rem;line-height:1.6}
.search-box{display:flex;align-items:center;gap:10px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);padding:0 16px;transition:border .2s}
.search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(129,140,248,.1)}
.search-box svg{flex-shrink:0;color:var(--text-muted)}
.search-box input{flex:1;border:none;background:none;padding:14px 0;font-size:.95rem}
.search-box input:focus{box-shadow:none}

/* ===== MAIN LAYOUT ===== */
.main{max-width:1280px;margin:0 auto;padding:24px;display:grid;grid-template-columns:220px 1fr;gap:28px}
@media(max-width:860px){.main{grid-template-columns:1fr}.sidebar{display:none}}

/* ===== SIDEBAR ===== */
.sidebar{position:sticky;top:84px;align-self:start;display:flex;flex-direction:column;gap:20px}
.filter-section h3{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:10px}
.sort-options{display:flex;flex-direction:column;gap:4px}
.sort-btn{text-align:left;padding:8px 12px;border-radius:var(--radius-xs);font-size:.85rem;color:var(--text-secondary);transition:all .15s}
.sort-btn:hover{color:var(--text);background:var(--accent-bg)}
.sort-btn.active{color:var(--accent);background:var(--accent-bg);font-weight:600}
.tag-filters{display:flex;flex-wrap:wrap;gap:6px}
.tag-chip{padding:4px 12px;border-radius:20px;font-size:.78rem;border:1px solid var(--border);color:var(--text-secondary);transition:all .15s}
.tag-chip:hover,.tag-chip.active{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.stats-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.stat-row{display:flex;justify-content:space-between;padding:6px 0}
.stat-label{font-size:.8rem;color:var(--text-muted)}
.stat-value{font-size:.9rem;font-weight:700;color:var(--accent)}

/* ===== CONTENT ===== */
.content-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.result-count{font-size:.85rem;color:var(--text-muted)}
.view-toggle{display:flex;gap:2px;background:var(--bg-input);border-radius:var(--radius-xs);padding:2px}
.view-btn{padding:6px 8px;border-radius:var(--radius-xs);color:var(--text-muted);transition:all .15s}
.view-btn.active{color:var(--accent);background:var(--accent-bg)}

/* ===== GRID ===== */
.skill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.skill-grid.list-view{grid-template-columns:1fr}

/* ===== CARD ===== */
.skill-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:12px;transition:all .25s;position:relative;overflow:hidden}
.skill-card:hover{border-color:var(--border-hover);background:var(--bg-card-hover);transform:translateY(-2px);box-shadow:var(--shadow)}
.skill-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),#a78bfa);opacity:0;transition:opacity .25s}
.skill-card:hover::before{opacity:1}
.card-top{display:flex;align-items:center;gap:12px}
.card-avatar{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;color:#fff;flex-shrink:0}
.card-meta{flex:1;min-width:0}
.card-name{font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-author{font-size:.78rem;color:var(--text-muted);margin-top:2px}
.card-desc{font-size:.83rem;color:var(--text-secondary);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.card-tags{display:flex;flex-wrap:wrap;gap:5px}
.card-tag{font-size:.72rem;padding:3px 9px;border-radius:20px;background:var(--accent-bg);color:var(--accent);font-weight:500}
.card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--border)}
.card-stats{display:flex;gap:16px}
.card-stat{display:flex;align-items:center;gap:5px;font-size:.8rem;color:var(--text-muted)}
.card-stat svg{width:14px;height:14px}
.card-actions{display:flex;gap:6px}
.action-btn{display:flex;align-items:center;gap:4px;padding:6px 12px;border-radius:var(--radius-xs);font-size:.78rem;font-weight:600;transition:all .2s}
.action-btn.download{border:1px solid var(--border);color:var(--text-secondary)}
.action-btn.download:hover{border-color:var(--green);color:var(--green);background:var(--green-bg)}
.action-btn.like{border:1px solid var(--border);color:var(--text-secondary)}
.action-btn.like:hover{border-color:var(--pink);color:var(--pink);background:var(--pink-bg)}
.action-btn.like.liked{border-color:var(--pink);color:var(--pink);background:var(--pink-bg)}
.action-btn svg{width:13px;height:13px}

/* ===== LIST VIEW CARDS ===== */
.list-view .skill-card{flex-direction:row;align-items:center;gap:20px;padding:16px 20px}
.list-view .card-top{flex:0 0 auto}
.list-view .card-desc{-webkit-line-clamp:2;flex:1}
.list-view .card-tags{display:none}
.list-view .card-footer{border:none;padding:0;flex:0 0 auto;flex-direction:column;gap:8px}

/* ===== MODAL ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.modal-overlay.open{display:flex}
.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;padding:28px}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.modal-header h2{font-size:1.2rem;font-weight:700}
.modal-close{font-size:1.5rem;color:var(--text-muted);padding:4px 8px;border-radius:var(--radius-xs)}
.modal-close:hover{color:var(--text);background:var(--accent-bg)}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:.82rem;font-weight:600;margin-bottom:6px;color:var(--text-secondary)}
.required{color:#ef4444}
.form-group input,.form-group textarea{width:100%}
.file-drop{border:2px dashed var(--border);border-radius:var(--radius);padding:28px;text-align:center;cursor:pointer;transition:all .2s}
.file-drop:hover,.file-drop.dragover{border-color:var(--accent);background:var(--accent-bg)}
.file-drop p{margin-top:8px;font-size:.85rem;color:var(--text-muted)}
.file-drop.has-file p{color:var(--green)}
.btn-full{width:100%;justify-content:center;padding:12px;font-size:.95rem}

/* ===== TOAST ===== */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 24px;font-size:.85rem;z-index:300;opacity:0;transition:all .3s;pointer-events:none;box-shadow:var(--shadow)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.success{border-color:var(--green);color:var(--green)}
.toast.error{border-color:#ef4444;color:#ef4444}

/* ===== EMPTY ===== */
.empty-state{display:flex;flex-direction:column;align-items:center;gap:12px;padding:60px 20px;color:var(--text-muted);font-size:.9rem}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.skill-card{animation:fadeInUp .35s ease both}
.skill-card:nth-child(2){animation-delay:.04s}
.skill-card:nth-child(3){animation-delay:.08s}
.skill-card:nth-child(4){animation-delay:.12s}
.skill-card:nth-child(5){animation-delay:.16s}
.skill-card:nth-child(6){animation-delay:.2s}

/* ===== RESPONSIVE ===== */
@media(max-width:640px){
  .hero h1{font-size:1.6rem}
  .hero{padding:32px 16px 24px}
  .main{padding:16px}
  .skill-grid{grid-template-columns:1fr}
  .nav-inner{padding:0 16px}
}