/* ===== DESIGN TOKENS ===== */
:root {
  /* Primary palette */
  --primary: #6366f1;
  --primary-hover: #818cf8;
  --primary-glow: rgba(99,102,241,.25);
  --accent: #06b6d4;
  --gradient: linear-gradient(135deg, var(--primary), var(--accent));

  /* Surfaces — light mode defaults */
  --bg-body: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-hover: #f1f5f9;
  --bg-glass: rgba(255,255,255,.7);
  --bg-nav: rgba(255,255,255,.75);
  --border-color: #e2e8f0;
  --border-subtle: rgba(0,0,0,.06);

  /* Text */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-inverse: #f8fafc;

  /* Semantic */
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #3b82f6;

  /* Radius */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.12);
  --shadow-glow: 0 0 20px var(--primary-glow);

  /* Spacing scale */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem;
  --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
  --text-3xl: 1.875rem; --text-4xl: 2.25rem;

  /* Layout */
  --nav-height: 64px;
  --container-max: 1200px;
  --transition: .2s ease;
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
  --bg-body: #0f0f23;
  --bg-surface: #1a1a2e;
  --bg-surface-hover: #252540;
  --bg-glass: rgba(26,26,46,.75);
  --bg-nav: rgba(15,15,35,.8);
  --border-color: #2d2d4a;
  --border-subtle: rgba(255,255,255,.06);
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #0f172a;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow: 0 4px 12px rgba(0,0,0,.3);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.4);
}

/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:var(--font-sans);font-size:var(--text-base);
  line-height:1.6;color:var(--text-primary);
  background:var(--bg-body);min-height:100vh;
  transition:background var(--transition),color var(--transition);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:var(--primary);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--primary-hover)}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
input,button,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{line-height:1.3;font-weight:600;color:var(--text-primary)}

/* ===== CONTAINER ===== */
.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--sp-4)}

/* ===== NAVBAR ===== */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-height);
  background:var(--bg-nav);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-subtle);
  transition:background var(--transition);
}
.navbar .container{display:flex;align-items:center;height:100%;gap:var(--sp-4)}
.navbar-brand{
  font-size:var(--text-xl);font-weight:700;
  background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;white-space:nowrap;
}
.nav-links{display:flex;gap:var(--sp-1);align-items:center;flex-wrap:wrap}
.nav-links a{
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);
  color:var(--text-secondary);font-size:var(--text-sm);font-weight:500;
  transition:all var(--transition);white-space:nowrap;
}
.nav-links a:hover{color:var(--text-primary);background:var(--bg-surface-hover)}
.nav-right{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto}

/* Hamburger */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:var(--sp-2);z-index:1002;position:relative}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text-primary);margin:5px 0;transition:all .3s ease;border-radius:2px;transform-origin:center}
/* Hamburger → X animation */
.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Theme toggle */
.theme-toggle{
  background:none;border:1px solid var(--border-color);border-radius:var(--radius-full);
  width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:var(--text-lg);transition:all var(--transition);
}
.theme-toggle:hover{background:var(--bg-surface-hover);border-color:var(--primary)}
[data-theme="dark"] .theme-icon-light{display:none}
[data-theme="dark"] .theme-icon-dark{display:inline}
:root .theme-icon-dark{display:none}
:root .theme-icon-light{display:inline}

/* ===== MAIN CONTENT ===== */
main{padding-top:calc(var(--nav-height) + var(--sp-6));padding-bottom:var(--sp-16);min-height:calc(100vh - 80px)}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-5);border-radius:var(--radius-sm);font-weight:500;
  font-size:var(--text-sm);border:1px solid transparent;cursor:pointer;
  transition:all var(--transition);white-space:nowrap;
}
.btn-primary{background:var(--gradient);color:#fff;border:none}
.btn-primary:hover{opacity:.9;box-shadow:var(--shadow-glow);transform:translateY(-1px)}
.btn-secondary{background:var(--bg-surface);color:var(--text-primary);border-color:var(--border-color)}
.btn-secondary:hover{background:var(--bg-surface-hover);border-color:var(--primary)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{opacity:.9}
.btn-block{width:100%}
.btn-lg{padding:var(--sp-3) var(--sp-6);font-size:var(--text-base)}

/* ===== CARDS ===== */
.card{
  background:var(--bg-surface);border:1px solid var(--border-color);
  border-radius:var(--radius-lg);padding:var(--sp-6);
  transition:all var(--transition);
}
.card-glass{
  background:var(--bg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border-subtle);
}
.card-hover:hover{border-color:var(--primary);box-shadow:var(--shadow-glow);transform:translateY(-2px)}
.card-title{font-size:var(--text-xl);font-weight:600;margin-bottom:var(--sp-4)}

/* ===== FORMS ===== */
.form-group{margin-bottom:var(--sp-4)}
.form-label{display:block;font-size:var(--text-sm);font-weight:500;margin-bottom:var(--sp-1);color:var(--text-secondary)}
.form-input{
  width:100%;padding:var(--sp-3) var(--sp-4);
  background:var(--bg-body);border:1px solid var(--border-color);border-radius:var(--radius-sm);
  font-size:var(--text-base);transition:all var(--transition);color:var(--text-primary);
}
.form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
.form-select{
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;
}
.input-group{display:flex;gap:var(--sp-2)}
.input-group .form-input{flex:1}

/* ===== SEARCH BAR ===== */
.search-container{max-width:720px;margin:0 auto;width:100%}
.search-bar{
  display:flex;align-items:stretch;background:var(--bg-surface);
  border:2px solid var(--border-color);border-radius:var(--radius-full);
  overflow:hidden;transition:all var(--transition);box-shadow:var(--shadow-sm);
}
.search-bar:focus-within{border-color:var(--primary);box-shadow:var(--shadow-glow)}
.search-bar input[type="text"]{
  flex:1;border:none;background:transparent;padding:var(--sp-3) var(--sp-5);
  font-size:var(--text-lg);outline:none;min-width:0;color:var(--text-primary);
}
.search-bar input[type="text"]::placeholder{color:var(--text-muted)}
.search-bar button[type="submit"]{
  background:var(--gradient);color:#fff;border:none;
  padding:var(--sp-3) var(--sp-6);font-weight:600;cursor:pointer;
  font-size:var(--text-base);transition:opacity var(--transition);
}
.search-bar button[type="submit"]:hover{opacity:.9}
.search-filters{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:center;margin-top:var(--sp-3)}
.filter-select{
  padding:var(--sp-1) var(--sp-3);border-radius:var(--radius-full);
  border:1px solid var(--border-color);background:var(--bg-surface);
  font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer;
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:26px;
  transition:all var(--transition);
}
.filter-select:focus{outline:none;border-color:var(--primary)}

/* ===== BREADCRUMB ===== */
.breadcrumb{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) 0;font-size:var(--text-sm);flex-wrap:wrap}
.breadcrumb a{color:var(--text-muted)}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb-sep{color:var(--text-muted);font-size:.7em}
.breadcrumb-current{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px}

/* ===== KEYWORD TAGS ===== */
.tag-cloud{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.tag{
  display:inline-block;padding:var(--sp-1) var(--sp-3);
  background:var(--bg-surface-hover);border:1px solid var(--border-color);
  border-radius:var(--radius-full);font-size:var(--text-sm);color:var(--text-secondary);
  transition:all var(--transition);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;
}
.tag:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-glow)}

/* ===== RESULT LIST ===== */
.result-item{
  display:block;padding:var(--sp-4) var(--sp-5);
  background:var(--bg-surface);border:1px solid var(--border-color);
  border-radius:var(--radius);margin-bottom:var(--sp-3);
  transition:all var(--transition);overflow:hidden;min-width:0;
}
.result-item:hover{border-color:var(--primary);box-shadow:var(--shadow-glow);transform:translateY(-1px)}
.result-item:hover .result-title{color:var(--primary)}
.result-title{
  font-size:var(--text-base);font-weight:600;color:var(--text-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:var(--sp-1);
  word-break:break-all;
}
.result-meta{font-size:var(--text-sm);color:var(--text-muted);display:flex;gap:var(--sp-4);flex-wrap:wrap}

/* ===== PAGER ===== */
.pager{display:flex;align-items:center;justify-content:center;gap:var(--sp-1);padding:var(--sp-6) 0;flex-wrap:wrap}
.pager-btn{
  min-width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);border:1px solid var(--border-color);
  background:var(--bg-surface);color:var(--text-secondary);font-size:var(--text-sm);
  cursor:pointer;transition:all var(--transition);
}
.pager-btn:hover{border-color:var(--primary);color:var(--primary)}
.pager-btn.active{background:var(--gradient);color:#fff;border-color:transparent}
.pager-btn:disabled{opacity:.4;cursor:not-allowed}
.pager-info{font-size:var(--text-sm);color:var(--text-muted);margin:0 var(--sp-2)}

/* ===== SORT TABS ===== */
.sort-tabs{display:flex;gap:var(--sp-1);padding:var(--sp-2) 0;flex-wrap:wrap}
.sort-tab{
  padding:var(--sp-1) var(--sp-3);border-radius:var(--radius-full);
  font-size:var(--text-sm);color:var(--text-muted);cursor:pointer;
  border:1px solid transparent;background:none;transition:all var(--transition);
}
.sort-tab:hover{color:var(--text-primary);background:var(--bg-surface-hover)}
.sort-tab.active{color:var(--primary);border-color:var(--primary);background:var(--primary-glow)}

/* ===== SIDEBAR ===== */
.sidebar{display:flex;flex-direction:column;gap:var(--sp-4)}
.sidebar-card{
  background:var(--bg-surface);border:1px solid var(--border-color);
  border-radius:var(--radius);overflow:hidden;
}
.sidebar-card-title{
  padding:var(--sp-3) var(--sp-4);font-size:var(--text-sm);font-weight:600;
  color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;
  border-bottom:1px solid var(--border-color);background:var(--bg-surface-hover);
}
.sidebar-card-body{padding:var(--sp-3)}
.sidebar-item{
  display:block;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);
  color:var(--text-secondary);font-size:var(--text-sm);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:all var(--transition);
}
.sidebar-item:hover{background:var(--bg-surface-hover);color:var(--primary)}

/* ===== ALERTS ===== */
.alert{padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-sm);margin-bottom:var(--sp-4);font-size:var(--text-sm)}
.alert-danger{background:rgba(239,68,68,.1);color:var(--danger);border:1px solid rgba(239,68,68,.2)}
.alert-success{background:rgba(34,197,94,.1);color:var(--success);border:1px solid rgba(34,197,94,.2)}

/* ===== BADGE ===== */
.badge{
  display:inline-flex;align-items:center;padding:var(--sp-1) var(--sp-2);
  border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;
  background:var(--primary-glow);color:var(--primary);
}

/* ===== TABLE ===== */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:var(--sp-3) var(--sp-4);text-align:left;border-bottom:1px solid var(--border-color)}
.table th{font-weight:600;color:var(--text-muted);font-size:var(--text-sm)}

/* ===== TOAST ===== */
.toast{
  position:fixed;bottom:var(--sp-6);right:var(--sp-6);
  padding:var(--sp-3) var(--sp-5);background:var(--bg-surface);
  border:1px solid var(--border-color);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);font-size:var(--text-sm);
  transform:translateY(120%);opacity:0;transition:all .3s ease;z-index:9999;
}
.toast.show{transform:translateY(0);opacity:1}
.toast-success{border-color:var(--success);color:var(--success)}
.toast-error{border-color:var(--danger);color:var(--danger)}

/* ===== AD SLOTS ===== */
.ad-slot{
  border-radius:var(--radius);overflow:hidden;
  background:var(--bg-surface-hover);border:1px solid var(--border-subtle);
  margin:var(--sp-4) 0;text-align:center;
}
.ad-slot img{width:100%;height:auto;display:block}

/* ===== FOOTER ===== */
.footer{
  border-top:1px solid var(--border-color);padding:var(--sp-8) 0;
  text-align:center;color:var(--text-muted);font-size:var(--text-sm);
}

/* ===== GRID LAYOUTS ===== */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.grid-3 > * {min-width:0}
.grid-2-1{display:grid;grid-template-columns:1fr 300px;gap:var(--sp-6)}
.grid-2-1 > * {min-width:0}
.flex-center{display:flex;align-items:center;justify-content:center}
.text-center{text-align:center}
.text-gradient{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.mt-2{margin-top:var(--sp-2)} .mt-4{margin-top:var(--sp-4)} .mt-6{margin-top:var(--sp-6)} .mt-8{margin-top:var(--sp-8)}
.mb-2{margin-bottom:var(--sp-2)} .mb-4{margin-bottom:var(--sp-4)} .mb-6{margin-bottom:var(--sp-6)}
.gap-2{gap:var(--sp-2)} .gap-4{gap:var(--sp-4)}

/* ===== HERO SECTION ===== */
.hero{padding:var(--sp-16) 0;text-align:center}
.hero h1{font-size:var(--text-4xl);margin-bottom:var(--sp-4)}

/* ===== PRICING CARDS ===== */
.pricing-card{position:relative;text-align:center}
.pricing-card.featured{border:2px solid var(--primary);transform:scale(1.03)}
.pricing-badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--gradient);color:#fff;font-size:var(--text-xs);font-weight:700;
  padding:var(--sp-1) var(--sp-3);border-radius:var(--radius-full);
  text-transform:uppercase;letter-spacing:.05em;
}
.pricing-price{font-size:var(--text-4xl);font-weight:700;margin:var(--sp-4) 0}
.pricing-period{font-size:var(--text-sm);color:var(--text-muted);font-weight:400}
.feature-list{text-align:left}
.feature-list li{padding:var(--sp-2) 0;color:var(--text-secondary);display:flex;align-items:center;gap:var(--sp-2)}
.feature-list li::before{content:'✓';color:var(--primary);font-weight:700}

/* ===== LOADER ===== */
.loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-12) 0;
  color: var(--text-muted);
}
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-radius: 50%;
  border-top-color: var(--primary);
  animation: spin 1s ease-in-out infinite;
  margin-bottom: var(--sp-4);
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.loader-text {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.05em;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-2-1{grid-template-columns:1fr}
}
@media(max-width:768px){
  .grid-3{grid-template-columns:1fr}
  .nav-links{
    position:fixed;top:var(--nav-height);left:0;right:0;bottom:0;
    background:var(--bg-body);flex-direction:column;padding:var(--sp-6) var(--sp-4);
    transform:translateX(-100%);transition:transform .3s ease;z-index:1001;
    gap:var(--sp-1);overflow-y:auto;display:flex;
  }
  .nav-open .nav-links{transform:translateX(0)}
  .nav-open .nav-overlay{display:block}
  .nav-toggle{display:flex;flex-direction:column;justify-content:center}
  .nav-links a{padding:var(--sp-3) var(--sp-4);font-size:var(--text-lg);width:100%;border-radius:var(--radius-sm)}
  .nav-links a:hover{background:var(--bg-surface-hover)}
  .search-container{max-width:100%}
  .search-bar{flex-direction:row;border-radius:var(--radius-full);padding:var(--sp-1)}
  .search-bar input[type="text"]{padding:var(--sp-2) var(--sp-3);font-size:var(--text-base);min-width:0}
  .search-bar button[type="submit"]{border-radius:var(--radius-full);padding:0 var(--sp-4);white-space:nowrap}
  .result-item{padding:var(--sp-3) var(--sp-4)}
  .result-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-all}
  .result-meta{flex-direction:column;gap:var(--sp-1)}
  .hero h1{font-size:var(--text-2xl)}
  .pricing-card.featured{transform:none}
  main{padding-top:calc(var(--nav-height) + var(--sp-4))}
  .sort-tabs{width:100%}
  .breadcrumb-current{max-width:200px}
}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000}
@media(max-width:480px){
  .search-filters{flex-direction:column;align-items:stretch}
  .pager{gap:var(--sp-1)}
  .pager-btn{min-width:32px;height:32px;font-size:var(--text-xs)}
  .result-item{padding:var(--sp-3)}
}
/* TV / large screens */
@media(min-width:1920px){
  :root{--container-max:1600px;--text-base:1.125rem;--nav-height:72px}
}
@media(min-width:2560px){
  :root{--container-max:2000px;--text-base:1.25rem;--nav-height:80px}
}