/* ═══════════════════════════════════════════════════════
   星梦 PDF 工具 — 质感背景 + 毛玻璃 UI
   ═══════════════════════════════════════════════════════ */

:root {
  --bg:           #f0f0f3;
  --text:         #1d1d1f;
  --text2:        #6e6e73;
  --text3:        #aeaeb2;
  --brand:        #e63946;
  --brand-hover:  #d32f3c;
  --card:         rgba(255,255,255,.55);
  --card-solid:   rgba(255,255,255,.72);
  --glass-border: rgba(255,255,255,.6);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.06);
  --glass-blur:   20px;
  --radius:       16px;
  --radius-sm:    10px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}

body{
  color:var(--text);
  font:14px/1.65 -apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Helvetica Neue",sans-serif;
  letter-spacing:-.01em;
  min-height:100vh;
  /* 质感渐变背景 */
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(230,57,70,.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 90% 80%, rgba(0,122,255,.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 0%, rgba(88,86,214,.04) 0%, transparent 50%),
    linear-gradient(180deg, #f5f5f7 0%, #ebebed 50%, #f0f0f3 100%);
  background-attachment: fixed;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ── 毛玻璃工具函数 ─────────────────────── */
.glass{
  background:var(--card);
  backdrop-filter:saturate(180%) blur(var(--glass-blur));
  -webkit-backdrop-filter:saturate(180%) blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
}

/* ── Header (毛玻璃) ────────────────────── */
.site-header{
  background:rgba(255,255,255,.6);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.5);
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  position:sticky;top:0;z-index:100;
}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:52px}
.brand{font-weight:700;font-size:17px;color:var(--text);display:flex;align-items:center;gap:6px}
.brand-icon{font-size:18px}
.main-nav{display:flex;gap:2px;align-items:center}
.main-nav a{
  padding:6px 14px;border-radius:8px;font-size:12px;
  color:var(--text2);white-space:nowrap;transition:all .15s;
}
.main-nav a:hover{color:var(--text);background:rgba(255,255,255,.5)}

/* ── Hero ─────────────────────────────────── */
.hero{text-align:center;padding:64px 0 40px}
.hero h1{
  font-size:40px;font-weight:700;color:var(--text);
  letter-spacing:-.025em;line-height:1.15;margin-bottom:12px;
}
.hero p{max-width:520px;margin:0 auto;color:var(--text2);font-size:17px;line-height:1.6}

/* ── Category Tabs ────────────────────────── */
.cat-tabs{
  display:flex;justify-content:center;gap:0;padding:0;
  margin:0 auto 32px;max-width:100%;overflow-x:auto;
  -webkit-overflow-scrolling:touch;white-space:nowrap;
}
.cat-tab{
  padding:12px 20px;font-size:13px;font-weight:500;
  color:var(--text3);cursor:pointer;border:none;background:none;
  position:relative;transition:color .2s;
}
.cat-tab:hover{color:var(--text2)}
.cat-tab.active{color:var(--brand);font-weight:600}
.cat-tab.active::after{
  content:'';position:absolute;
  bottom:0;left:20px;right:20px;height:2.5px;
  background:var(--brand);border-radius:2px 2px 0 0;
}

/* ── Search Bar (毛玻璃) ─────────────────── */
.search-bar{display:flex;justify-content:center;padding:0 24px;margin-bottom:32px}
.search-input{
  border:1px solid rgba(255,255,255,.6);
  border-radius:10px;padding:10px 18px;
  width:100%;max-width:420px;font-size:14px;
  background:rgba(255,255,255,.45);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:all .25s;font-family:inherit;
}
.search-input:focus{
  outline:none;border-color:var(--brand);
  background:rgba(255,255,255,.7);
  box-shadow:0 0 0 3px rgba(230,57,70,.1),0 4px 16px rgba(0,0,0,.06);
}

/* ── Grid / Cards (毛玻璃卡片) ───────────── */
.grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:16px;max-width:1120px;margin:0 auto;padding-bottom:64px;
}
.card{
  background:rgba(255,255,255,.45);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 4px 24px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.6);
  transition:all .3s ease;cursor:pointer;
}
.card:hover{
  background:rgba(255,255,255,.65);
  border-color:rgba(255,255,255,.8);
  box-shadow:0 8px 40px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.8);
  transform:translateY(-3px);
}
.card-link{display:flex;align-items:center;gap:16px;padding:20px}

/* 图标 (毛玻璃底) */
.card-icon{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  position:relative;overflow:hidden;
  /* 3D depth */
  box-shadow:
    0 2px 4px rgba(0,0,0,.1),
    0 6px 20px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.08);
}
.card-icon::after{
  content:'';position:absolute;top:0;left:0;right:0;
  height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 100%);
  border-radius:14px 14px 0 0;pointer-events:none;
}
.card:hover .card-icon{transform:scale(1.1) translateY(-2px)}

.card-icon svg{width:26px;height:26px;position:relative;z-index:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15))}

.card-icon.merge{
  background:linear-gradient(145deg,#4da3ff,#0066e6);
  box-shadow:0 2px 4px rgba(0,102,230,.25),0 6px 20px rgba(0,102,230,.15),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.1);
}
.card-icon.split{
  background:linear-gradient(145deg,#7a78e8,#4845c2);
  box-shadow:0 2px 4px rgba(72,69,194,.25),0 6px 20px rgba(72,69,194,.15),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.1);
}
.card-icon.compress{
  background:linear-gradient(145deg,#5dd97a,#28a745);
  box-shadow:0 2px 4px rgba(40,167,69,.25),0 6px 20px rgba(40,167,69,.15),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.1);
}
.card-icon.convert{
  background:linear-gradient(145deg,#ffb340,#e68a00);
  box-shadow:0 2px 4px rgba(230,138,0,.25),0 6px 20px rgba(230,138,0,.15),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.1);
}
.card-icon.edit{
  background:linear-gradient(145deg,#c97ae6,#9b3fd6);
  box-shadow:0 2px 4px rgba(155,63,214,.25),0 6px 20px rgba(155,63,214,.15),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.1);
}
.card-icon.security{
  background:linear-gradient(145deg,#ff6b61,#e0342e);
  box-shadow:0 2px 4px rgba(224,52,46,.25),0 6px 20px rgba(224,52,46,.15),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.1);
}
.card-icon.ai{
  background:linear-gradient(145deg,#ff6b72,#d32f3c);
  box-shadow:0 2px 4px rgba(211,47,60,.25),0 6px 20px rgba(211,47,60,.15),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.1);
}
.card-icon.other{
  background:linear-gradient(145deg,#a8a8ad,#76767a);
  box-shadow:0 2px 4px rgba(118,118,122,.25),0 6px 20px rgba(118,118,122,.15),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.1);
}

.card-text{flex:1;min-width:0}
.card-text h3{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px;line-height:1.4}
.card-text p{
  font-size:12px;color:var(--text2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
}

/* ── Tool Page ────────────────────────────── */
.tool-hero{text-align:center;padding:48px 0 24px}
.tool-hero h1{font-size:28px;font-weight:700;color:var(--text);letter-spacing:-.02em}
.tool-hero p{color:var(--text2);margin-top:8px;max-width:520px;margin-left:auto;margin-right:auto;font-size:15px}
.tool-layout{
  display:grid;grid-template-columns:1.4fr .6fr;gap:20px;
  max-width:1120px;margin:0 auto;padding:24px 0 64px;
}
@media(max-width:900px){.tool-layout{grid-template-columns:1fr}}

/* ── Upload Card / Info Card (毛玻璃) ─────── */
.upload-card,.info-card{
  background:rgba(255,255,255,.5);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 4px 24px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.6);
  padding:28px;
}
.dropzone{
  border:2px dashed rgba(0,0,0,.1);
  border-radius:var(--radius);padding:40px;text-align:center;
  cursor:pointer;transition:all .25s;
  background:rgba(255,255,255,.3);
}
.dropzone:hover,.dropzone.dragover{
  border-color:var(--brand);background:rgba(230,57,70,.04);
}
.dropzone-icon{font-size:40px;margin-bottom:12px;opacity:.7}
.dropzone h3{font-size:16px;font-weight:600;color:var(--text);margin-bottom:6px}
.dropzone p{font-size:13px;color:var(--text2)}
.dropzone .btn-choose{
  display:inline-block;margin-top:16px;
  padding:10px 28px;border-radius:10px;
  background:var(--brand);color:#fff;
  font-size:14px;font-weight:600;cursor:pointer;
  border:none;transition:all .15s;font-family:inherit;
  box-shadow:0 4px 14px rgba(230,57,70,.25);
}
.dropzone .btn-choose:hover{background:var(--brand-hover);box-shadow:0 6px 20px rgba(230,57,70,.3)}

/* ── Options (毛玻璃) ─────────────────────── */
.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.option{display:flex;flex-direction:column;gap:6px}
.option span{font-size:13px;font-weight:500;color:var(--text2)}
.option input,.option select,.option textarea{
  padding:10px 14px;border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius-sm);font-size:14px;
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:all .2s;font-family:inherit;
}
.option input:focus,.option select:focus,.option textarea:focus{
  outline:none;border-color:var(--brand);
  background:rgba(255,255,255,.7);
  box-shadow:0 0 0 3px rgba(230,57,70,.08);
}

/* ── Buttons ──────────────────────────────── */
.btn-primary{
  display:inline-block;padding:12px 32px;
  border-radius:10px;background:var(--brand);color:#fff;
  font-size:15px;font-weight:600;cursor:pointer;border:none;
  transition:all .15s;font-family:inherit;
  box-shadow:0 4px 14px rgba(230,57,70,.3);
}
.btn-primary:hover{background:var(--brand-hover);box-shadow:0 6px 20px rgba(230,57,70,.35)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn-primary.loading{opacity:.7;pointer-events:none}
.btn-primary.loading::after{
  content:'';display:inline-block;width:14px;height:14px;margin-left:8px;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  border-radius:50%;animation:spin .6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.btn-secondary{
  display:inline-block;padding:10px 24px;border-radius:10px;
  background:rgba(255,255,255,.5);color:var(--text);
  font-size:13px;font-weight:500;cursor:pointer;
  border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:all .15s;font-family:inherit;
}
.btn-secondary:hover{background:rgba(255,255,255,.7);border-color:rgba(255,255,255,.8)}

/* ── Steps / Info Card ────────────────────── */
.info-card h3{font-size:15px;font-weight:600;margin-bottom:16px;color:var(--text)}
.info-card ol{padding-left:18px}
.info-card li{font-size:13px;color:var(--text2);margin-bottom:8px;line-height:1.5}

/* ── Status ───────────────────────────────── */
.status{
  margin-top:16px;padding:12px 16px;border-radius:var(--radius-sm);
  font-size:13px;font-weight:500;
  background:rgba(255,255,255,.4);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.4);
}
.status.success{background:rgba(52,199,89,.1);color:#1b5e20;border-color:rgba(52,199,89,.2)}
.status.error{background:rgba(255,59,48,.08);color:#991b1b;border-color:rgba(255,59,48,.15)}

/* ── Toast ────────────────────────────────── */
.toast-container{position:fixed;top:62px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{
  padding:12px 20px;border-radius:12px;font-size:13px;font-weight:500;
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  animation:slideIn .3s ease;max-width:320px;
  box-shadow:0 8px 32px rgba(0,0,0,.1);
}
.toast.success{background:rgba(232,245,233,.85);color:#1b5e20;border:1px solid rgba(200,230,201,.6)}
.toast.error{background:rgba(254,242,242,.85);color:#991b1b;border:1px solid rgba(254,202,202,.6)}
.toast.info{background:rgba(227,242,253,.85);color:#0d47a1;border:1px solid rgba(187,222,251,.6)}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ── Progress Bar ─────────────────────────── */
.progress-bar{width:100%;height:3px;background:rgba(0,0,0,.06);border-radius:2px;overflow:hidden;margin-top:12px;display:none}
.progress-bar.active{display:block}
.progress-bar .fill{height:100%;background:var(--brand);border-radius:2px;transition:width .3s;width:0%}

/* ── File Preview ─────────────────────────── */
.file-preview{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.file-chip{
  background:rgba(255,255,255,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.5);border-radius:10px;
  padding:8px 14px;display:flex;align-items:center;gap:6px;font-size:12px;max-width:220px;
}
.file-chip .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-chip .size{color:var(--text3);font-size:11px}

/* ── Footer (毛玻璃) ──────────────────────── */
.site-footer{
  background:rgba(255,255,255,.4);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid rgba(255,255,255,.5);
  color:var(--text2);padding:48px 0 24px;margin-top:64px;
}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px}
.footer-brand{font-size:16px;font-weight:700;color:var(--text);margin-bottom:10px}
.footer-desc{font-size:12px;line-height:1.7;color:var(--text2)}
.footer-col h4{font-size:12px;font-weight:600;color:var(--text);margin-bottom:14px}
.footer-col a{display:block;font-size:12px;color:var(--text2);padding:4px 0;transition:color .15s}
.footer-col a:hover{color:var(--brand)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.4);padding-top:16px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
}
.footer-bottom span{font-size:11px;color:var(--text3)}
.footer-trust{display:flex;gap:16px;flex-wrap:wrap}
.footer-trust span{font-size:11px;color:var(--text3)}

/* ── Queue Badge (毛玻璃) ─────────────────── */
#queueBadge{
  position:fixed;top:10px;right:10px;z-index:9999;
  background:rgba(230,57,70,.85);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);color:#fff;
  padding:6px 14px;border-radius:10px;font-size:12px;font-weight:500;
  box-shadow:0 4px 16px rgba(230,57,70,.3);display:none;
}


/* ── Sponsor / 赞助区 ────────────────────── */
.sponsor-hint{
  display:flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:20px;
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  cursor:pointer;transition:all .2s;
  font-size:12px;color:var(--text2);
}
.sponsor-hint:hover{
  background:rgba(255,255,255,.7);
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  transform:translateY(-1px);
}
.sponsor-icon{font-size:14px}
.sponsor-text{font-weight:500}

/* Overlay */
.sponsor-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  animation:fadeIn .25s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Modal */
.sponsor-modal{
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(40px);
  -webkit-backdrop-filter:saturate(180%) blur(40px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:20px;padding:36px 40px 28px;
  text-align:center;max-width:460px;width:90%;
  box-shadow:0 24px 80px rgba(0,0,0,.15),0 0 0 1px rgba(255,255,255,.2) inset;
  position:relative;
  animation:slideUp .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes slideUp{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

.sponsor-close{
  position:absolute;top:14px;right:16px;
  background:rgba(0,0,0,.06);border:none;
  width:28px;height:28px;border-radius:50%;
  font-size:13px;color:var(--text3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.sponsor-close:hover{background:rgba(0,0,0,.1);color:var(--text)}

.sponsor-modal-icon{font-size:42px;margin-bottom:12px}
.sponsor-modal h3{
  font-size:17px;font-weight:700;color:var(--text);
  margin-bottom:8px;letter-spacing:-.01em;
}
.sponsor-desc{
  font-size:13px;color:var(--text2);line-height:1.6;
  margin-bottom:20px;
}
.sponsor-qr{
  display:flex;gap:16px;justify-content:center;
  margin-bottom:16px;
}
.qr-item{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px;background:white;border-radius:14px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.qr-item img{
  width:200px;height:200px;display:block;border-radius:8px;
}
.qr-item span{
  font-size:12px;font-weight:600;color:var(--text2);
}
.qr-placeholder{
  width:180px;height:180px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg2);border-radius:8px;
  font-size:12px;color:var(--text3);line-height:1.6;
  text-align:center;
}
.sponsor-thanks{
  font-size:12px;color:var(--text3);
}

@media(prefers-color-scheme:dark){
  .sponsor-hint{background:rgba(44,44,46,.5);border-color:rgba(255,255,255,.08)}
  .sponsor-hint:hover{background:rgba(58,58,60,.6)}
  .sponsor-modal{background:rgba(44,44,46,.85);border-color:rgba(255,255,255,.08)}
  .sponsor-qr{background:#1c1c1e}
}

/* ── Dark Mode ────────────────────────────── */
@media(prefers-color-scheme:dark){
  :root{
    --bg:#000;--text:#f5f5f7;--text2:#98989d;--text3:#636366;
    --brand:#ff453a;--brand-hover:#ff6961;
    --card:rgba(44,44,46,.55);--card-solid:rgba(44,44,46,.72);
    --glass-border:rgba(255,255,255,.08);
    --glass-shadow:0 8px 32px rgba(0,0,0,.3);
  }
  body{
    background:
      radial-gradient(ellipse 80% 60% at 10% 20%, rgba(255,69,58,.06) 0%, transparent 60%),
      radial-gradient(ellipse 60% 80% at 90% 80%, rgba(10,132,255,.05) 0%, transparent 60%),
      radial-gradient(ellipse 50% 50% at 50% 0%, rgba(88,86,214,.04) 0%, transparent 50%),
      linear-gradient(180deg, #000 0%, #111 50%, #0a0a0a 100%);
    background-attachment:fixed;
  }
  .site-header{background:rgba(28,28,30,.65);border-bottom-color:rgba(255,255,255,.06)}
  .card{background:rgba(44,44,46,.5);border-color:rgba(255,255,255,.08);box-shadow:0 4px 24px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04)}
  .card:hover{background:rgba(58,58,60,.6);border-color:rgba(255,255,255,.12);box-shadow:0 8px 40px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06)}
  .upload-card,.info-card{background:rgba(44,44,46,.5);border-color:rgba(255,255,255,.08)}
  .search-input{background:rgba(44,44,46,.4);border-color:rgba(255,255,255,.08);color:var(--text)}
  .search-input:focus{background:rgba(44,44,46,.6);border-color:var(--brand)}
  .dropzone{border-color:rgba(255,255,255,.1);background:rgba(44,44,46,.3)}
  .dropzone:hover,.dropzone.dragover{border-color:var(--brand);background:rgba(255,69,58,.05)}
  .cat-tab{color:var(--text3)}.cat-tab.active{color:var(--brand)}
  .option input,.option select,.option textarea{border-color:rgba(255,255,255,.08);background:rgba(44,44,46,.4);color:var(--text)}
  .site-footer{background:rgba(28,28,30,.5);border-top-color:rgba(255,255,255,.06)}
  .footer-brand,.footer-col h4{color:var(--text)}
  .footer-col a{color:var(--text2)}
}

/* ── Responsive ───────────────────────────── */
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .hero h1{font-size:30px}.hero p{font-size:15px}.hero{padding:44px 0 28px}
  .grid{grid-template-columns:1fr 1fr;gap:12px}
  .card-link{padding:14px;gap:12px}
  .card-icon{width:40px;height:40px;font-size:18px}
  .card-text h3{font-size:13px}.card-text p{font-size:11px}
  .tool-layout{grid-template-columns:1fr}.container{padding:0 16px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .cat-tabs{justify-content:flex-start;padding:0 8px}
  .cat-tab{padding:10px 14px;font-size:12px}
  .search-input{max-width:100%}
}
@media(max-width:480px){
  .hero h1{font-size:26px}
  .grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center}
}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:3px}
@media(prefers-color-scheme:dark){::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12)}}

::selection{background:rgba(230,57,70,.12)}