*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg-primary:#0f1117;
  --bg-secondary:#181b24;
  --bg-card:#1e2130;
  --bg-card-hover:#262a3a;
  --bg-elevated:#232738;
  --border:#2a2e3f;
  --border-light:#353a50;
  --text-primary:#e8edf5;
  --text-secondary:#949aaf;
  --text-muted:#5c6278;
  --accent:#a3e635;
  --accent-hover:#84cc16;
  --accent-bg:rgba(163,231,53,0.1);
  --accent-glow:rgba(163,231,53,0.2);
  --star:#fbbf24;
  --star-bg:rgba(251,191,36,0.12);
  --success:#34d399;
  --success-bg:rgba(52,211,153,0.12);
  --radius:12px;
  --radius-sm:8px;
  --radius-lg:16px;
  --shadow:0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg:0 8px 32px rgba(0,0,0,0.45);
  --transition:200ms cubic-bezier(0.4,0,0.2,1);
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}}
html{font-size:15px}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg-primary);
  color:var(--text-primary);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}
body.no-scroll{overflow:hidden}

/* Header */
.header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(15,17,23,0.85);
  backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--border);
  transition:box-shadow var(--transition);
}
.header-scrolled{box-shadow:0 4px 24px rgba(0,0,0,0.3)}
.header-inner{
  max-width:1440px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:1.5rem;
  padding:0.75rem 1.5rem;
  height:64px;
}
.logo{display:flex;align-items:center;gap:0.7rem;flex-shrink:0}
.logo-icon{font-size:1.65rem;line-height:1}
.logo-text{display:flex;flex-direction:column;gap:0}
.logo-text h1{font-size:1.15rem;font-weight:700;letter-spacing:-0.02em;background:linear-gradient(135deg,#e8edf5 0%,#a3e635 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2}
.logo-sub{font-size:0.65rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted)}
.header-actions{display:flex;align-items:center;gap:0.75rem;flex:1;justify-content:flex-end}

/* Search */
.search-wrapper{
  position:relative;
  flex:1;
  max-width:480px;
  min-width:200px;
}
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}
.search-input{
  width:100%;
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:0.55rem 2.5rem 0.55rem 2.25rem;
  font-size:0.85rem;
  font-family:inherit;
  color:var(--text-primary);
  outline:none;
  transition:var(--transition);
}
.search-input::placeholder{color:var(--text-muted)}
.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);background:var(--bg-card)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:focus-visible,.sort-select:focus-visible,.filter-chip:focus-visible,.card-copy:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.search-shortcut{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:4px;
  padding:1px 6px;
  font-size:0.7rem;
  color:var(--text-muted);
  font-family:inherit;
  pointer-events:none;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  padding:0.5rem 1rem;
  border:none;
  border-radius:var(--radius-sm);
  font-size:0.8rem;
  font-weight:500;
  font-family:inherit;
  cursor:pointer;
  transition:var(--transition);
  white-space:nowrap;
  text-decoration:none;
  color:var(--text-primary);
  background:var(--bg-secondary);
  border:1px solid var(--border);
}
.btn:hover{background:var(--bg-card-hover);border-color:var(--border-light)}
.btn-ghost{background:transparent;border-color:transparent}
.btn-ghost:hover{background:var(--bg-secondary);border-color:var(--border)}
.btn-icon{padding:0.45rem;line-height:0;border-radius:var(--radius-sm)}
.btn-xs{padding:0.25rem 0.55rem;font-size:0.7rem}
.btn-primary{background:var(--accent);color:#0f1117;border-color:var(--accent);font-weight:600}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-favorites{position:relative}
.fav-count{
  background:var(--star-bg);
  color:var(--star);
  font-size:0.65rem;
  font-weight:700;
  padding:0.1rem 0.35rem;
  border-radius:4px;
  min-width:18px;
  text-align:center;
}
.btn-mobile-menu{display:none}
.sort-select{
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:0.45rem 0.75rem;
  font-size:0.8rem;
  font-family:inherit;
  color:var(--text-primary);
  cursor:pointer;
  outline:none;
}

/* Layout */
.layout{
  max-width:1440px;
  margin:0 auto;
  display:grid;
  grid-template-columns:260px 1fr;
  gap:0;
  min-height:calc(100vh - 64px);
}

/* Sidebar */
.sidebar{
  background:var(--bg-secondary);
  border-right:1px solid var(--border);
  padding:1.25rem 1rem;
  overflow-y:auto;
  position:sticky;
  top:64px;
  height:calc(100vh - 64px);
}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.sidebar-header h3{font-size:0.85rem;font-weight:600;color:var(--text-secondary)}
.filter-section{margin-bottom:1.25rem}
.filter-label{
  font-size:0.65rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--text-muted);
  margin-bottom:0.55rem;
}
.filter-chips{display:flex;flex-wrap:wrap;gap:0.35rem}
.filter-chip{
  display:inline-flex;
  align-items:center;
  gap:0.3rem;
  padding:0.3rem 0.6rem;
  border-radius:6px;
  font-size:0.7rem;
  font-weight:500;
  background:var(--bg-card);
  color:var(--text-secondary);
  border:1px solid var(--border);
  cursor:pointer;
  transition:var(--transition);
  white-space:nowrap;
}
.filter-chip:hover{background:var(--bg-card-hover);color:var(--text-primary)}
.filter-chip.active{
  background:var(--accent-bg);
  color:var(--accent);
  border-color:var(--accent);
}
.filter-chip .chip-count{
  font-size:0.6rem;
  color:var(--text-muted);
  background:var(--bg-primary);
  padding:0.05rem 0.3rem;
  border-radius:3px;
}
.filter-chip.active .chip-count{background:rgba(163,231,53,0.15);color:var(--accent)}

/* Main */
.main{padding:1.25rem 1.5rem}
.results-bar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0.5rem;
  font-size:0.8rem;
  color:var(--text-secondary);
  margin-bottom:1rem;
}
.results-bar span{color:var(--text-primary);font-weight:600}
.active-filters{display:flex;flex-wrap:wrap;gap:0.3rem;margin-left:auto}
.active-filter{
  display:inline-flex;align-items:center;gap:0.25rem;
  padding:0.2rem 0.5rem;border-radius:4px;
  font-size:0.65rem;font-weight:500;
  background:var(--accent-bg);color:var(--accent);
  border:1px solid var(--accent);
  cursor:pointer;
}
.active-filter:hover{background:rgba(163,231,53,0.2)}

/* Grid */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:1rem;
}

/* Card */
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.15rem;
  transition:var(--transition);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:0.7rem;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:var(--radius);
  opacity:0;
  transition:var(--transition);
  background:linear-gradient(135deg,var(--accent-bg),transparent 60%);
}
.card:hover{
  background:var(--bg-card-hover);
  border-color:var(--accent);
  transform:translateY(-3px);
  box-shadow:0 8px 32px rgba(0,0,0,0.5),0 0 0 1px var(--accent-bg);
}
.card:hover::before{opacity:1}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:0.5rem;position:relative;z-index:1}
.card-title{
  font-size:0.9rem;
  font-weight:600;
  line-height:1.35;
  color:var(--text-primary);
  flex:1;
}
.card-fav{
  flex-shrink:0;
  background:none;
  border:none;
  cursor:pointer;
  padding:0.2rem;
  color:var(--text-muted);
  transition:var(--transition);
  line-height:0;
}
.card-fav:hover{color:var(--star);transform:scale(1.15)}
.card-fav.active{color:var(--star)}
.card-img{
  position:relative;z-index:1;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--bg-primary);
  aspect-ratio:16/10;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 400ms ease;
}
.card:hover .card-img img{transform:scale(1.05)}
.card-desc{
  font-size:0.78rem;
  color:var(--text-secondary);
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  position:relative;z-index:1;
}
.card-preview{
  background:var(--bg-primary);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:0.7rem;
  font-size:0.68rem;
  line-height:1.5;
  color:var(--text-muted);
  max-height:80px;
  overflow:hidden;
  position:relative;
  font-family:'SF Mono','Fira Code','Cascadia Code',monospace;
  white-space:pre-wrap;
  word-break:break-word;
  position:relative;z-index:1;
}
.card-preview::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:32px;
  background:linear-gradient(transparent,var(--bg-primary));
}
.card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.5rem;
  position:relative;z-index:1;
  margin-top:auto;
}
.card-tags{display:flex;flex-wrap:wrap;gap:0.25rem;flex:1}
.card-tag{
  padding:0.15rem 0.4rem;
  border-radius:4px;
  font-size:0.6rem;
  font-weight:500;
  background:var(--bg-elevated);
  color:var(--text-muted);
  border:1px solid var(--border);
}
.card-source{
  font-size:0.6rem;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100px;
}
.card-copy{
  flex-shrink:0;
  padding:0.4rem 0.75rem;
  border-radius:var(--radius-sm);
  font-size:0.72rem;
  font-weight:600;
  background:var(--accent);
  color:#0f1117;
  border:none;
  cursor:pointer;
  transition:var(--transition);
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:0.3rem;
}
.card-copy:hover{background:var(--accent-hover)}
.card-copy.copied{background:var(--success);color:var(--bg-primary)}

/* Modal */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.65);
  backdrop-filter:blur(4px);
  z-index:200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  width:100%;
  max-width:720px;
  max-height:85vh;
  overflow-y:auto;
  position:relative;
  box-shadow:var(--shadow-lg);
  animation:modalIn 250ms ease;
}
@keyframes modalIn{from{opacity:0;transform:scale(0.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-close{
  position:absolute;
  top:1rem;
  right:1rem;
  z-index:10;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  color:var(--text-secondary);
}
.modal-close:hover{color:var(--text-primary)}
.modal-content{padding:1.5rem}
.modal-img{
  border-radius:var(--radius-sm);
  overflow:hidden;
  margin-bottom:0.75rem;
  background:var(--bg-primary);
  max-height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal-img img{width:100%;height:100%;object-fit:contain;max-height:320px}
.modal-header{margin-bottom:1.25rem;padding-right:2rem}
.modal-header .card-fav{position:absolute;top:1.5rem;right:3.5rem}
.modal-title{font-size:1.2rem;font-weight:700;line-height:1.35;margin-bottom:0.35rem}
.modal-category{font-size:0.7rem;font-weight:500;color:var(--accent);text-transform:uppercase;letter-spacing:0.04em}
.modal-desc{font-size:0.85rem;color:var(--text-secondary);line-height:1.6;margin-bottom:1rem}
.modal-section{margin-bottom:1.25rem}
.modal-section h4{
  font-size:0.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--text-muted);
  margin-bottom:0.5rem;
}
.modal-tags{display:flex;flex-wrap:wrap;gap:0.35rem}
.modal-tag{
  padding:0.25rem 0.55rem;
  border-radius:6px;
  font-size:0.7rem;
  font-weight:500;
  background:var(--bg-elevated);
  color:var(--text-secondary);
  border:1px solid var(--border);
}
.modal-prompt{
  background:var(--bg-primary);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:1rem;
  font-size:0.78rem;
  line-height:1.6;
  color:var(--text-primary);
  font-family:'SF Mono','Fira Code','Cascadia Code',monospace;
  white-space:pre-wrap;
  word-break:break-word;
  max-height:360px;
  overflow-y:auto;
}
.modal-prompt::-webkit-scrollbar{width:4px}
.modal-prompt::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.modal-copy-btn{
  margin-top:1rem;
  width:100%;
  justify-content:center;
  padding:0.7rem;
}
.modal-source{font-size:0.7rem;color:var(--text-muted);margin-top:0.75rem;text-align:center}

/* Toast */
.toast{
  position:fixed;
  bottom:1.5rem;
  left:50%;
  transform:translateX(-50%) translateY(12px);
  background:var(--success-bg);
  border:1px solid var(--success);
  color:var(--success);
  padding:0.65rem 1.4rem;
  border-radius:var(--radius-sm);
  font-size:0.8rem;
  font-weight:500;
  z-index:300;
  opacity:0;
  transition:all 300ms cubic-bezier(0.34,1.56,0.64,1);
  pointer-events:none;
  backdrop-filter:blur(8px);
  box-shadow:0 4px 16px rgba(0,0,0,0.3);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Empty state */
.empty-state{
  grid-column:1/-1;
  text-align:center;
  padding:4rem 1rem;
  color:var(--text-muted);
  background:var(--bg-card);
  border:1px dashed var(--border);
  border-radius:var(--radius-lg);
  margin:2rem 0;
}
.empty-state-icon{font-size:3rem;margin-bottom:0.75rem;opacity:0.5}
.empty-state h3{font-size:1.05rem;color:var(--text-secondary);margin-bottom:0.35rem}
.empty-state p{font-size:0.8rem}

/* Responsive */
@media(max-width:900px){
  .header-inner{padding:0.5rem 0.75rem;gap:0.5rem;height:56px}
  .logo-icon{font-size:1.35rem}
  .logo-text h1{font-size:1rem}
  .logo-sub{display:none}
  .search-shortcut{display:none}
  .sort-select{display:none}
  .btn-mobile-menu{display:inline-flex}
  .fav-label{display:none}
  .btn-favorites{padding:0.4rem;gap:0}
  .fav-count{position:absolute;top:-2px;right:-2px;min-width:16px;font-size:0.55rem;padding:0.05rem 0.25rem}
  .layout{grid-template-columns:1fr}
  .sidebar{
    position:fixed;
    top:0;
    left:0;
    width:280px;
    max-width:80vw;
    bottom:0;
    z-index:110;
    height:auto;
    padding-top:env(safe-area-inset-top,0);
    transform:translateX(-100%);
    transition:transform 300ms cubic-bezier(0.4,0,0.2,1);
    box-shadow:4px 0 24px rgba(0,0,0,0.4);
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-backdrop{
    position:fixed;inset:0;z-index:109;
    background:rgba(0,0,0,0.5);
    backdrop-filter:blur(4px);
    opacity:0;pointer-events:none;
    transition:opacity 300ms ease;
  }
  .sidebar-backdrop.open{opacity:1;pointer-events:auto}
  .sidebar-header{padding-right:2rem}
  .sidebar-close{
    position:absolute;top:0.75rem;right:0.75rem;z-index:1;
    background:var(--bg-elevated);border:1px solid var(--border);
    color:var(--text-muted);cursor:pointer;border-radius:6px;
    padding:0.35rem;line-height:0;display:flex;
  }
  .sidebar-close:hover{color:var(--text-primary)}
}
@media(max-width:640px){
  .grid{grid-template-columns:1fr;gap:0.75rem}
  .header-inner{gap:0.35rem}
  .search-wrapper{min-width:100px}
  .search-input{font-size:0.8rem;padding:0.45rem 2rem 0.45rem 2rem}
  .main{padding:0.75rem}
  .card{padding:0.9rem;gap:0.55rem}
  .card-title{font-size:0.82rem}
  .card-desc{font-size:0.72rem;-webkit-line-clamp:3}
  .card-preview{font-size:0.62rem;max-height:60px;padding:0.55rem}
  .card-tag{font-size:0.55rem;padding:0.1rem 0.35rem}
  .card-copy{padding:0.35rem 0.6rem;font-size:0.65rem}
  .modal{margin:0.5rem;border-radius:var(--radius)}
  .modal-content{padding:1rem}
  .modal-title{font-size:1.05rem}
  .modal-desc{font-size:0.78rem}
  .modal-prompt{font-size:0.72rem;max-height:240px;padding:0.75rem}
  .empty-state{padding:2.5rem 1rem;margin:1rem 0}
  .results-bar{font-size:0.72rem}
  .toast{bottom:1rem;left:0.75rem;right:0.75rem;transform:translateY(12px);text-align:center}
  .toast.show{transform:translateY(0)}
}
@media(min-width:901px){
  .sidebar{transform:none!important}
  .sidebar-backdrop{display:none}
  .sidebar-close{display:none}
}

/* Scrollbar */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--border-light)}