/* ===================================================================
   SmartlyTools v2 — Components
   Buttons, chips, badges, cards, forms, tool UI, search, modal,
   toast, rating, share, ad zones, skeletons.
   =================================================================== */

/* ============ BUTTONS ============ */
.btn {
  --btn-bg:var(--surface); --btn-fg:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-sm);
  line-height:1; padding:.7rem 1.15rem; border-radius:var(--r-md);
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--hairline);
  cursor:pointer; white-space:nowrap; user-select:none;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease);
}
.btn svg { width:18px; height:18px; }
.btn:hover { transform:translateY(-2px); box-shadow:var(--sh-md); }
.btn:active { transform:translateY(0); }

.btn-primary {
  --btn-fg:#fff; border:none; position:relative; overflow:hidden;
  background:var(--grad-brand); background-size:160% 160%;
  box-shadow:var(--sh-primary-sm);
}
.btn-primary:hover { box-shadow:var(--sh-primary); background-position:100% 0; color:#fff; }
.btn-primary::after {
  content:""; position:absolute; inset:0; background:var(--grad-sheen);
  transform:translateX(-120%); transition:transform var(--t-slow) var(--ease);
}
.btn-primary:hover::after { transform:translateX(120%); }

.btn-soft { --btn-bg:var(--primary-soft); --btn-fg:var(--primary); border-color:transparent; }
.btn-soft:hover { --btn-bg:color-mix(in srgb,var(--primary) 16%,transparent); color:var(--primary-strong); }
.btn-ghost { --btn-bg:transparent; border-color:var(--hairline); }
.btn-ghost:hover { --btn-bg:var(--surface-2); border-color:var(--hairline-2); }
.btn-lg { padding:.95rem 1.7rem; font-size:var(--fs-md); border-radius:var(--r-lg); }
.btn-sm { padding:.5rem .85rem; font-size:var(--fs-xs); }
.btn-block { width:100%; }

.btn-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:var(--r-md);
  background:transparent; color:var(--ink-soft); border:1px solid transparent;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),transform var(--t-fast) var(--ease),border-color var(--t) var(--ease);
  position:relative;
}
.btn-icon svg { width:20px; height:20px; }
.btn-icon:hover { background:var(--surface-2); color:var(--primary); border-color:var(--hairline); transform:translateY(-1px); }
.btn-icon .pill-count {
  position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px;
  font-size:10px; font-weight:700; line-height:16px; text-align:center;
  background:var(--highlight); color:#fff; border-radius:99px; border:2px solid var(--surface);
}

/* ============ CHIPS / BADGES ============ */
.chip {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .85rem; border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--ink-soft);
  font-size:var(--fs-sm); font-weight:600; border:1px solid var(--hairline);
  transition:all var(--t) var(--ease);
}
a.chip:hover { color:var(--primary); border-color:color-mix(in srgb,var(--primary) 40%,transparent); transform:translateY(-1px); }
.chip-sm { padding:.25rem .65rem; font-size:var(--fs-xs); color:var(--cat-color,var(--primary)); background:color-mix(in srgb,var(--cat-color,var(--primary)) 12%,transparent); border-color:color-mix(in srgb,var(--cat-color,var(--primary)) 22%,transparent); }

.badge { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .6rem; border-radius:var(--r-pill); font-size:var(--fs-xs); font-weight:700; letter-spacing:.02em; }
.badge-hot { background:color-mix(in srgb,var(--highlight) 15%,transparent); color:var(--coral-600); }
.badge-new { background:color-mix(in srgb,var(--accent) 15%,transparent); color:var(--teal-600); }
[data-theme="dark"] .badge-hot{ color:var(--coral-400) } [data-theme="dark"] .badge-new{ color:var(--teal-400) }

/* ============ CARDS ============ */
.card {
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-lg); padding:var(--sp-5);
  box-shadow:var(--sh-sm); transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease),border-color var(--t) var(--ease);
}

/* Tool card */
.tool-card {
  position:relative; display:flex; flex-direction:column; gap:.6rem;
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-lg); padding:var(--sp-5);
  box-shadow:var(--sh-sm); overflow:hidden; isolation:isolate;
  transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.tool-card::before {
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--cat-color,var(--primary)); opacity:0; transform:scaleX(.4);
  transform-origin:left; transition:opacity var(--t) var(--ease),transform var(--t) var(--ease); z-index:1;
}
.tool-card::after {
  content:""; position:absolute; width:180px; height:180px; right:-60px; top:-60px;
  background:radial-gradient(circle,color-mix(in srgb,var(--cat-color,var(--primary)) 16%,transparent),transparent 70%);
  opacity:0; transition:opacity var(--t-slow) var(--ease); z-index:-1;
}
.tool-card:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:color-mix(in srgb,var(--cat-color,var(--primary)) 35%,var(--hairline)); }
.tool-card:hover::before { opacity:1; transform:scaleX(1); }
.tool-card:hover::after { opacity:1; }
.tool-card-top { display:flex; align-items:center; justify-content:space-between; }
.tool-card .t-icon {
  display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:var(--r-md); color:var(--cat-color,var(--primary));
  background:color-mix(in srgb,var(--cat-color,var(--primary)) 12%,transparent);
  transition:transform var(--t) var(--ease-spring),background var(--t) var(--ease);
}
.tool-card .t-icon svg { width:24px; height:24px; }
.tool-card:hover .t-icon { transform:scale(1.08) rotate(-4deg); background:color-mix(in srgb,var(--cat-color,var(--primary)) 20%,transparent); }
.tool-card h3 { font-size:var(--fs-lg); }
.tool-card h3 a { color:var(--ink); }
.tool-card h3 a::after { content:""; position:absolute; inset:0; z-index:2; }
.tool-card:hover h3 a { color:var(--cat-color,var(--primary)); }
.tool-card p { color:var(--ink-soft); font-size:var(--fs-sm); line-height:var(--lh-snug); flex:1; }
.tool-card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:.4rem; }
.tool-use-count { font-size:var(--fs-xs); color:var(--ink-faint); font-weight:500; display:inline-flex; align-items:center; gap:.35rem; }
.tool-use-count::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 20%,transparent); }

.fav-btn {
  position:relative; z-index:3; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--r-sm); color:var(--ink-faint);
  transition:color var(--t) var(--ease),background var(--t) var(--ease),transform var(--t-fast) var(--ease-spring);
}
.fav-btn svg { width:18px; height:18px; transition:fill var(--t) var(--ease); }
.fav-btn:hover { background:color-mix(in srgb,var(--highlight) 12%,transparent); color:var(--highlight); transform:scale(1.12); }
.fav-btn.active { color:var(--highlight); }
.fav-btn.active svg { fill:var(--highlight); }

/* Category card */
.cat-card {
  position:relative; display:flex; flex-direction:column; gap:.5rem;
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-xl); padding:var(--sp-5); overflow:hidden; isolation:isolate;
  box-shadow:var(--sh-sm); color:var(--ink);
  transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.cat-card::after {
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:linear-gradient(135deg,color-mix(in srgb,var(--cat-color) 10%,transparent),transparent 60%);
  transition:opacity var(--t) var(--ease);
}
.cat-card:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:color-mix(in srgb,var(--cat-color) 40%,var(--hairline)); }
.cat-card:hover::after { opacity:1; }
.cat-icon {
  display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px;
  border-radius:var(--r-md); margin-bottom:.4rem;
  color:#fff; background:linear-gradient(135deg,var(--cat-color),color-mix(in srgb,var(--cat-color) 60%,#000 8%));
  box-shadow:0 8px 20px color-mix(in srgb,var(--cat-color) 35%,transparent);
  transition:transform var(--t) var(--ease-spring);
}
.cat-icon svg { width:28px; height:28px; }
.cat-card:hover .cat-icon { transform:scale(1.06) rotate(-3deg); }
.cat-card h3 { font-size:var(--fs-xl); }
.cat-card p { color:var(--ink-soft); font-size:var(--fs-sm); flex:1; }
.cat-meta { display:flex; align-items:center; justify-content:space-between; margin-top:.6rem; }
.cat-count { font-size:var(--fs-sm); font-weight:600; color:var(--cat-color); }
.cat-arrow { color:var(--cat-color); transition:transform var(--t) var(--ease); }
.cat-card:hover .cat-arrow { transform:translateX(5px); }

/* Feature card */
.feature-card { position:relative; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:var(--sp-5); box-shadow:var(--sh-sm); transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease); }
.feature-card:hover { transform:translateY(-4px); box-shadow:var(--sh-md); }
.feature-ico {
  display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px;
  border-radius:var(--r-md); font-size:1.6rem; margin-bottom:var(--sp-3);
  color:var(--cat-color,var(--primary)); background:color-mix(in srgb,var(--cat-color,var(--primary)) 12%,transparent);
}
.feature-ico svg { width:26px; height:26px; }
.feature-card h3 { margin-bottom:.4rem; }
.feature-card p { color:var(--ink-soft); font-size:var(--fs-sm); }

/* ============ FORMS / FIELDS ============ */
.label { display:block; font-size:var(--fs-sm); font-weight:600; color:var(--ink); margin-bottom:.4rem; }
.field {
  width:100%; padding:.8rem 1rem; font-size:var(--fs-base);
  background:var(--surface); color:var(--ink);
  border:1px solid var(--hairline-2); border-radius:var(--r-md);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease);
}
.field::placeholder { color:var(--ink-faint); }
.field:focus { outline:none; border-color:var(--primary); box-shadow:var(--ring); }
.field-mono { font-family:var(--font-mono); font-size:var(--fs-sm); line-height:1.6; }
textarea.field { min-height:150px; resize:vertical; }
select.field { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737d96' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .9rem center; padding-right:2.4rem; cursor:pointer; }
.form-row { margin-bottom:var(--sp-4); }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.control-row { display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-bottom:var(--sp-4); }
.control-group { flex:1 1 180px; }
.control-help { color:var(--ink-faint); font-size:var(--fs-sm); margin-bottom:var(--sp-3); }
.char-hint { display:block; text-align:right; font-size:var(--fs-xs); color:var(--ink-faint); margin-top:.3rem; }
.checkbox-row { display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-5); align-items:center; }
.checkbox-row label { display:inline-flex; align-items:center; gap:.5rem; font-size:var(--fs-sm); color:var(--ink-soft); cursor:pointer; }
input[type="checkbox"],input[type="radio"] { width:18px; height:18px; accent-color:var(--primary); cursor:pointer; }
input[type="range"].range { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px; background:var(--surface-3); outline:none; }
input[type="range"].range::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--grad-brand); cursor:pointer; box-shadow:var(--sh-primary-sm); border:2px solid var(--surface); }
input[type="range"].range::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:var(--primary); cursor:pointer; border:2px solid var(--surface); }
input[type="color"] { -webkit-appearance:none; appearance:none; border:1px solid var(--hairline-2); border-radius:var(--r-md); cursor:pointer; background:none; padding:2px; }
input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
input[type="color"]::-webkit-color-swatch { border:none; border-radius:calc(var(--r-md) - 4px); }

/* ============ TOOL UI ============ */
.tool-panel {
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-xl); padding:clamp(1.25rem,3vw,var(--sp-6));
  box-shadow:var(--sh-md); position:relative;
}
.io-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.tool-toolbar { display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-4); }
.stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:var(--sp-3); margin-top:var(--sp-5); }
.stat-box { text-align:center; padding:var(--sp-4) var(--sp-3); border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--hairline); transition:transform var(--t) var(--ease),border-color var(--t) var(--ease); }
.stat-box:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--primary) 30%,var(--hairline)); }
.stat-box .v { font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:700; color:var(--primary); line-height:1; }
.stat-box .k { font-size:var(--fs-xs); color:var(--ink-faint); margin-top:.35rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.result-box { padding:var(--sp-4); border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--hairline); font-family:var(--font-mono); font-size:var(--fs-sm); word-break:break-word; }
.result-box.big { font-size:var(--fs-xl); text-align:center; padding:var(--sp-5); }
.result-box.big strong { font-family:var(--font-display); font-size:var(--fs-3xl); color:var(--primary); display:inline-block; }
.empty-row { text-align:center; padding:var(--sp-6); color:var(--ink-faint); }
.data-table { width:100%; border-collapse:collapse; margin-top:var(--sp-4); font-size:var(--fs-sm); }
.data-table th,.data-table td { text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--hairline); }
.data-table th { font-weight:600; color:var(--ink-soft); background:var(--surface-2); }
.data-table tr:hover td { background:var(--surface-2); }
.color-preview { height:80px; border-radius:var(--r-md); margin-block:var(--sp-4); border:1px solid var(--hairline); }
.qr-output { display:flex; justify-content:center; padding:var(--sp-5); background:var(--surface-2); border-radius:var(--r-md); margin-top:var(--sp-4); }
.qr-output canvas { border-radius:var(--r-sm); background:#fff; max-width:100%; height:auto; }
.palette-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:var(--sp-3); margin-top:var(--sp-4); }
.swatch { height:90px; border-radius:var(--r-md); border:1px solid var(--hairline); display:flex; align-items:flex-end; justify-content:center; padding:.4rem; cursor:pointer; transition:transform var(--t) var(--ease); position:relative; }
.swatch:hover { transform:translateY(-3px) scale(1.02); }
.swatch span { font-family:var(--font-mono); font-size:11px; font-weight:600; background:rgba(255,255,255,.92); color:#111; padding:.15rem .4rem; border-radius:6px; }
.gradient-preview { height:120px; border-radius:var(--r-md); margin-block:var(--sp-4); border:1px solid var(--hairline); }

/* Copy / download success pulse */
@keyframes pop-in { 0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.15)} 100%{transform:scale(1);opacity:1} }
.btn.flash-success { background:var(--success)!important; color:#fff!important; border-color:transparent!important; }
.btn.flash-success svg path { animation:pop-in .3s var(--ease-spring); }

/* ============ SEARCH ============ */
.hero-search { position:relative; display:flex; align-items:center; width:100%; max-width:600px; margin:0 auto var(--sp-4); }
.hero-search .search-icon { position:absolute; left:1.1rem; width:22px; height:22px; color:var(--ink-faint); pointer-events:none; z-index:2; }
.hero-search input {
  width:100%; padding:1.1rem 1.2rem 1.1rem 3.1rem; font-size:var(--fs-md);
  background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  color:var(--ink); border:1px solid var(--glass-border); border-radius:var(--r-pill);
  box-shadow:var(--sh-lg); transition:box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.hero-search input::placeholder { color:var(--ink-faint); }
.hero-search input:focus { outline:none; border-color:var(--primary); box-shadow:var(--ring),var(--sh-lg); }
.search-results {
  position:absolute; top:calc(100% + .6rem); left:0; right:0; z-index:var(--z-raised);
  background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--sh-xl);
  padding:.5rem; max-height:60vh; overflow-y:auto; opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease); text-align:left;
}
.search-results.show { opacity:1; transform:none; pointer-events:auto; }
.search-result-item { display:flex; align-items:center; gap:.8rem; padding:.7rem .8rem; border-radius:var(--r-md); color:var(--ink); transition:background var(--t-fast) var(--ease); }
.search-result-item:hover,.search-result-item.highlight { background:var(--primary-soft); }
.sr-icon { display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center; border-radius:var(--r-sm); background:var(--surface-2); flex-shrink:0; }
.sr-icon svg { width:20px; height:20px; }
.sr-title { font-weight:600; font-size:var(--fs-sm); }
.sr-cat { font-size:var(--fs-xs); color:var(--ink-faint); }
.search-empty { padding:var(--sp-5); text-align:center; color:var(--ink-faint); font-size:var(--fs-sm); }

/* ============ MODAL / BACKDROP ============ */
.modal-backdrop {
  position:fixed; inset:0; z-index:var(--z-modal);
  background:rgba(11,15,26,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:flex-start; justify-content:center; padding:12vh 1rem 1rem;
  animation:fade-in var(--t) var(--ease);
}
@keyframes fade-in { from{opacity:0} to{opacity:1} }
.modal { width:100%; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:var(--sp-5); box-shadow:var(--sh-xl); animation:modal-rise var(--t-slow) var(--ease-out); }
@keyframes modal-rise { from{opacity:0; transform:translateY(20px) scale(.98)} to{opacity:1; transform:none} }

/* ============ TOAST ============ */
.toast-wrap { position:fixed; bottom:calc(var(--bottomnav-h) + 1.2rem); left:50%; transform:translateX(-50%); z-index:var(--z-toast); display:flex; flex-direction:column; gap:.6rem; align-items:center; pointer-events:none; }
@media (min-width:721px){ .toast-wrap { bottom:1.5rem; right:1.5rem; left:auto; transform:none; align-items:flex-end; } }
.toast {
  display:flex; align-items:center; gap:.6rem; padding:.85rem 1.1rem;
  background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  color:var(--ink); border:1px solid var(--hairline); border-radius:var(--r-md);
  box-shadow:var(--sh-lg); font-size:var(--fs-sm); font-weight:500;
  animation:toast-in var(--t-slow) var(--ease-spring); pointer-events:auto; max-width:90vw;
}
.toast svg { width:20px; height:20px; flex-shrink:0; }
.toast.success { border-left:3px solid var(--success); } .toast.success svg { color:var(--success); }
.toast.error { border-left:3px solid var(--danger); } .toast.error svg { color:var(--danger); }
.toast.info { border-left:3px solid var(--primary); } .toast.info svg { color:var(--primary); }
.toast.leaving { animation:toast-out var(--t) var(--ease) forwards; }
@keyframes toast-in { from{opacity:0; transform:translateY(16px) scale(.95)} to{opacity:1; transform:none} }
@keyframes toast-out { to{opacity:0; transform:translateY(10px) scale(.96)} }

/* ============ RATING / SHARE ============ */
.rating { display:inline-flex; gap:.15rem; }
.star { font-size:1.5rem; line-height:1; color:var(--hairline-2); transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease-spring); }
.star:hover { transform:scale(1.2); }
.star.on { color:var(--amber-500); }
.share-row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-top:var(--sp-5); padding:var(--sp-4); background:var(--surface-2); border-radius:var(--r-md); border:1px solid var(--hairline); }
.share-label { font-weight:600; font-size:var(--fs-sm); color:var(--ink-soft); margin-right:.2rem; }
.share-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--r-md); font-weight:700; font-size:var(--fs-sm); background:var(--surface); border:1px solid var(--hairline); color:var(--ink-soft); transition:transform var(--t-fast) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease),background var(--t) var(--ease); }
.share-btn:hover { transform:translateY(-3px); color:#fff; }
.share-btn.x:hover{ background:#000; border-color:#000 } .share-btn.fb:hover{ background:#1877f2; border-color:#1877f2 }
.share-btn.li:hover{ background:#0a66c2; border-color:#0a66c2 } .share-btn.wa:hover{ background:#25d366; border-color:#25d366 }
.share-btn.link:hover{ background:var(--primary); border-color:var(--primary) }

/* ============ AD ZONES (CLS-safe: reserved height) ============ */
.ad-slot {
  display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 10px,var(--surface-3) 10px,var(--surface-3) 20px);
  border:1px dashed var(--hairline-2); border-radius:var(--r-md);
  color:var(--ink-faint); font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  margin-block:var(--sp-5); overflow:hidden;
}
.ad-leaderboard { min-height:120px; width:100%; }
.ad-rect { min-height:280px; width:100%; max-width:336px; margin-inline:auto; }
.ad-sidebar { min-height:600px; width:100%; }
@media (max-width:720px){ .ad-leaderboard{ min-height:100px } .ad-sidebar{ min-height:280px } }

/* ============ SKELETON ============ */
.skeleton { background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:var(--r-sm); }
@keyframes shimmer { to{ background-position:-200% 0 } }

/* ---- v4: tool action row + collection popover ---- */
.tool-actions { display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:center; margin-top:var(--sp-4); position:relative; }
.collection-pop { position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:.5rem; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:var(--sp-4); width:260px; z-index:20; text-align:left; }
.collection-pop .col-row { display:flex; align-items:center; gap:.5rem; padding:.3rem 0; font-size:var(--fs-sm); cursor:pointer; }
.collection-pop .col-new { display:flex; gap:.4rem; margin-top:var(--sp-3); }
.collection-pop .col-new .field { padding:.4rem .6rem; font-size:var(--fs-sm); }
.callout { padding:var(--sp-4); border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--hairline); font-size:var(--fs-sm); }
.callout-warn { background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
[data-theme="dark"] .callout-warn { background:#2a1a0e; border-color:#7c3a12; color:#fdba74; }

/* ---- v4: comparison table ---- */
.compare-wrap { overflow-x:auto; }
.compare-table { width:100%; border-collapse:collapse; }
.compare-table th, .compare-table td { padding:var(--sp-4); text-align:left; border-bottom:1px solid var(--hairline); vertical-align:top; }
.compare-table thead th { background:var(--surface-2); font-size:var(--fs-lg); }
.compare-table tbody th { color:var(--ink-faint); font-weight:600; width:180px; font-size:var(--fs-sm); }
.compare-pick { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); margin-bottom:var(--sp-6); }
@media (max-width:640px){ .compare-pick { grid-template-columns:1fr; } }

/* ---- v4: trending dashboard ---- */
.trend-list { display:flex; flex-direction:column; gap:var(--sp-2); }
.trend-row { display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-3) var(--sp-4); border:1px solid var(--hairline); border-radius:var(--r-md); background:var(--surface); transition:transform .15s, box-shadow .15s; }
.trend-row:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.trend-rank { font-size:var(--fs-xl); font-weight:800; color:var(--ink-faint); width:2.2rem; text-align:center; flex:none; }
.trend-row .ti { flex:none; width:40px; height:40px; border-radius:10px; display:grid; place-items:center; }
.trend-meta { margin-left:auto; text-align:right; font-size:var(--fs-sm); color:var(--ink-faint); flex:none; }

/* ---- v4: landing hero ---- */
.cat-landing-hero { text-align:center; padding:var(--sp-9) 0 var(--sp-6); }
.cat-landing-hero .cat-badge { width:64px; height:64px; border-radius:18px; display:grid; place-items:center; margin:0 auto var(--sp-4); }

/* ============================================================
   v5 UX Edition — search, filters, highlighting, polish
   ============================================================ */

/* Highlighted matches in search results */
.search-result-item mark { background:transparent; color:var(--primary); font-weight:700; padding:0; }
[data-theme="dark"] .search-result-item mark { color:var(--primary-300, #a5b4fc); }
.search-result-item { position:relative; }
.search-result-item .sr-go { margin-left:auto; opacity:0; font-size:var(--fs-xs); color:var(--ink-faint); border:1px solid var(--hairline); border-radius:6px; padding:0 .35rem; line-height:1.5; flex:none; }
.search-result-item.highlight .sr-go { opacity:1; }
@media (hover:hover){ .search-result-item:hover .sr-go { opacity:1; } }

/* Search suggestions (recent + popular) */
.search-suggests { padding:.4rem; }
.search-suggest-head { display:flex; align-items:center; justify-content:space-between; padding:.5rem .6rem .3rem; font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); }
.search-clear-recent { background:none; border:none; color:var(--primary); font-size:var(--fs-xs); font-weight:600; cursor:pointer; padding:.1rem .3rem; border-radius:6px; }
.search-clear-recent:hover { background:var(--primary-soft); }
.search-suggest { display:flex; align-items:center; gap:.6rem; width:100%; text-align:left; background:none; border:none; padding:.55rem .6rem; border-radius:var(--r-md); color:var(--ink); font-size:var(--fs-sm); cursor:pointer; transition:background var(--t-fast) var(--ease); }
.search-suggest:hover { background:var(--primary-soft); }
.search-suggest .ss-ico { display:grid; place-items:center; width:18px; height:18px; color:var(--ink-faint); flex:none; }
.search-suggest .ss-ico svg { width:16px; height:16px; }

/* Richer empty state inside the dropdown */
.search-empty-sub { margin-top:.3rem; font-size:var(--fs-xs); }
.search-empty-chips { display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-top:.6rem; }

/* Search page category filters */
.search-filters { display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-top:var(--sp-4); }

/* Skeleton tool-card placeholders (loading states) */
.skeleton-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--sp-4); }
.skeleton-card { border:1px solid var(--hairline); border-radius:var(--r-lg); padding:var(--sp-5); background:var(--surface); }
.skeleton-card .sk-line { height:12px; border-radius:6px; margin-bottom:.6rem; }
.skeleton-card .sk-icon { width:42px; height:42px; border-radius:12px; margin-bottom:var(--sp-4); }

/* Phase 5 polish: larger, comfier touch targets on interactive controls */
.tool-card { transition:transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease); }
@media (hover:hover){ .tool-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); } }
.tool-card:active { transform:translateY(-1px); }
.filter-chip:active, .btn:active { transform:translateY(1px); }

/* Ensure tappable controls meet ~44px touch target on mobile */
@media (max-width:640px){
  .filter-chip { padding:.6rem 1rem; min-height:40px; }
  .search-suggest { min-height:42px; }
  .search-result-item { padding:.85rem .8rem; }
  .btn-sm { min-height:38px; }
  .nav a, .drawer-link { min-height:44px; display:flex; align-items:center; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .tool-card, .filter-chip, .btn, .trend-row, .search-result-item { transition:none !important; }
  .skeleton, .skeleton-card .sk-line, .skeleton-card .sk-icon { animation:none !important; }
}

/* ============================================================
   v5.5 — Quick category switcher (sticky pill bar)
   ============================================================ */
.cat-switcher { position:sticky; top:var(--header-h); z-index:20; background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--hairline); }
.cat-switch-inner { display:flex; gap:.5rem; overflow-x:auto; padding:.7rem clamp(1rem,4vw,2rem); max-width:var(--container-max,1200px); margin:0 auto; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.cat-switch-inner::-webkit-scrollbar { height:6px; }
.cat-switch-inner::-webkit-scrollbar-thumb { background:var(--hairline-2); border-radius:3px; }
.cat-switch-pill { display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; flex:none; padding:.45rem .85rem; border-radius:var(--r-pill); font-size:var(--fs-sm); font-weight:600; color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--hairline); transition:all var(--t-fast) var(--ease); }
.cat-switch-pill svg { width:16px; height:16px; color:var(--cat-color,var(--primary)); flex:none; }
.cat-switch-pill:hover { color:var(--ink); border-color:var(--cat-color,var(--hairline-2)); transform:translateY(-1px); }
.cat-switch-pill.active { background:var(--cat-color,var(--primary)); color:#fff; border-color:transparent; }
.cat-switch-pill.active svg { color:#fff; }
@media (max-width:640px){ .cat-switch-pill span { font-size:var(--fs-xs); } .cat-switcher { top:calc(var(--header-h) - 2px); } }
@media (prefers-reduced-motion:reduce){ .cat-switch-pill { transition:none; } }