/* UX polish 2026-10-23: instant feedback, focus rings, tap targets, reduced motion (keeps site colours) */
button,.btn,a.btn,[role=button],input[type=submit],input[type=button],label[for]{touch-action:manipulation}
button:not(:disabled):active,.btn:active,a.btn:active,input[type=submit]:active{transform:translateY(1px);filter:brightness(.95)}
:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
button:disabled,.btn[aria-disabled=true]{cursor:not-allowed;opacity:.6}
@media (max-width:739px){button,.btn,a.btn,input[type=submit],select{min-height:44px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.cd-toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,20px);background:#0f5132;color:#fff;padding:10px 16px;border-radius:10px;font:600 14px/1.3 system-ui,sans-serif;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;max-width:90vw}
.cd-toast.on{opacity:1;transform:translate(-50%,0)}.cd-toast.bad{background:#842029}
.cd-next{position:relative;margin:16px auto;padding:14px 40px 14px 16px;border:1px solid #cfe3d8;background:#f2faf5;border-radius:12px;max-width:980px}
.cd-next b{display:block;margin-bottom:8px}.cd-next-l{display:flex;flex-wrap:wrap;gap:8px}
.cd-next-l a{display:inline-flex;align-items:center;min-height:40px;padding:6px 12px;border-radius:8px;background:#fff;border:1px solid #cfe3d8;text-decoration:none;font-weight:600}
.cd-next-x{position:absolute;top:6px;right:8px;border:0;background:transparent;font-size:20px;line-height:1;cursor:pointer;min-height:32px!important;min-width:32px}
.cd-copy{margin-top:8px}
.cd-install{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px auto;padding:10px 14px;border:1px dashed #cbd5e1;border-radius:10px;position:relative}
.cd-dyn-note{color:var(--muted,#6b7280);margin:6px 0 10px}.cd-trend{display:block;color:#c2410c;font-weight:600;margin:4px 0 0}.cd-related{padding:12px 0}


/* ===== Visual polish 2026-10-24 (ux overlay) ===== */
:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.cd-toast{border-radius:12px;box-shadow:0 8px 24px rgba(15,23,42,.18);padding:12px 18px}
.cd-next{border-radius:14px;border-color:#c5ddd0;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.cd-next-l a{border-radius:10px;min-height:42px}
.cd-install{border-radius:12px;border-color:#cbd5e1;background:#fafbfd}

/* ===== Psychology UX/UI redesign 2026-10-24 (tokens + hierarchy + trust) ===== */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{background:var(--cd-bg,#f7f9fc);color:var(--cd-text,#172334);overflow-x:hidden}

/* Visual hierarchy: primary actions vs secondary */
.btn:not(.btn-ghost):not(.alt):not(.btn-alt),
a.btn:not(.btn-ghost):not(.alt),
button.btn:not(.btn-ghost):not(.alt){
  background:var(--cd-primary,#0c6b62);color:#fff;border:1px solid transparent;
  min-height:var(--cd-tap,44px)
}
.btn:not(.btn-ghost):not(.alt):hover,
a.btn:not(.btn-ghost):not(.alt):hover{background:var(--cd-primary-deep,#09574f)}
.btn.alt,.btn-ghost,button.alt{min-height:var(--cd-tap,44px)}

/* Clear disabled / loading feedback (no fake urgency) */
.btn.is-loading,.btn[aria-busy=true],button[aria-busy=true]{
  position:relative;pointer-events:none;opacity:.72
}
.btn.is-loading::after,button[aria-busy=true]::after{
  content:"";width:1em;height:1em;margin-left:.5em;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;display:inline-block;vertical-align:-.1em;
  animation:cd-spin .7s linear infinite
}
@keyframes cd-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn.is-loading::after,button[aria-busy=true]::after{animation:none;border-right-color:currentColor;opacity:.5}}

/* Focus: high-contrast, not colour-only */
:focus-visible{outline:3px solid var(--cd-focus,#2563eb);outline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--cd-focus,#2563eb);outline-offset:2px
}

/* Status colours: white text on filled banners (WCAG AA on red/green) */
.cd-status.ok,.cd-status.err,.cd-toast:not(.bad),.cd-toast.bad{
  color:#fff;padding:10px 12px;border-radius:10px;line-height:1.45
}
.cd-status.ok,.cd-toast:not(.bad){background:var(--cd-success,#15803d)}
@keyframes cd-ok-flash{
  0%{box-shadow:0 0 0 0 rgba(21,128,61,.45)}
  70%{box-shadow:0 0 0 10px rgba(21,128,61,0)}
  100%{box-shadow:0 0 0 0 rgba(21,128,61,0)}
}
.cd-status.ok,.cd-banner.ok{animation:cd-ok-flash .9s ease-out 1}
.cd-status.err,.cd-toast.bad{background:var(--cd-error,#b91c1c)}
.note{background:var(--cd-warn-bg,#fef3c7);border-color:#ecd9a0;color:#713f12}

/* Ad slots: visually separate from controls (trust / no dark patterns) */
.ad-slot,.cd-adslot,.acx-banner,.adst{
  margin:32px auto;padding:10px 8px 12px;border:1px dashed var(--cd-border,#dce4ed);
  border-radius:12px;background:#f8fafc;max-width:100%;box-sizing:border-box
}
.ad-slot .ad-label,.cd-adslot .ad-label,.acx-banner .ad-label,.ad-label{
  display:block;text-align:center;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:#94a3b8;margin:0 0 6px;font-weight:600
}

/* Tool boxes: primary controls first grouping */
.tool-box,.panel{
  border:1px solid var(--cd-border,#dce4ed);border-radius:var(--cd-radius-lg,18px);
  background:var(--cd-surface,#fff);box-shadow:var(--cd-shadow);padding:16px
}
.tool-box .opts{display:flex;flex-wrap:wrap;gap:12px 16px;margin-bottom:12px}
.tool-box .opts label{font-size:.9rem;font-weight:600;color:var(--cd-text)}

/* File limit hints before errors */
.cd-file-hint{font-size:.88rem;color:var(--cd-muted);margin:.4rem 0 .8rem;line-height:1.45}
.cd-file-hint b{color:var(--cd-text);font-weight:700}

/* Progressive disclosure helpers */
.cd-more summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}

/* No horizontal overflow on small screens */
img,svg,video,canvas,iframe{max-width:100%}
.wrap,.tool-wrap{overflow-wrap:anywhere}

@media (max-width:700px){
  .btn,.btn-ghost,button.btn{min-height:46px}
  .tool-box{padding:14px;border-radius:14px}
}


/* ===== Phase 2 shared components (2026-10-25) – tokens-first, no framework ===== */

/* Secondary / ghost buttons (explicit) */
.btn.btn-ghost,.btn.alt,a.btn.btn-ghost,button.btn-ghost,button.alt{
  background:var(--cd-surface,#fff)!important;
  color:var(--cd-ink,#0f172a)!important;
  border:1.5px solid var(--cd-border,#dce4ed)!important;
  font-weight:600
}
.btn.btn-ghost:hover,.btn.alt:hover,a.btn.btn-ghost:hover,button.alt:hover{
  border-color:var(--cd-primary,#0c6b62)!important;
  color:var(--cd-primary-deep,#09574f)!important;
  background:var(--cd-primary-soft,#e5f3f1)!important
}

/* Form controls */
.tool-box input[type=text],
.tool-box input[type=number],
.tool-box input[type=email],
.tool-box input[type=password],
.tool-box input[type=search],
.tool-box input[type=url],
.tool-box select,
.tool-box textarea,
.cd-ux-input,
.opts input[type=text],
.opts input[type=number],
.opts input[type=password],
.opts select,
.opts textarea{
  min-height:var(--cd-control-h,44px);
  border:1.5px solid var(--cd-border-strong,#b7c8de);
  border-radius:var(--cd-radius-sm,8px);
  padding:8px 12px;
  font:inherit;
  background:var(--cd-surface,#fff);
  color:var(--cd-ink,#0f172a);
  box-sizing:border-box
}
.tool-box textarea,.opts textarea{min-height:96px;resize:vertical}
.tool-box input:focus,.tool-box select:focus,.tool-box textarea:focus,
.opts input:focus,.opts select:focus,.opts textarea:focus,
.cd-ux-input:focus{
  outline:none;
  border-color:var(--cd-focus,#2563eb);
  box-shadow:var(--cd-focus-ring,0 0 0 3px rgba(37,99,235,.28))
}

/* Standardized dropzone (enhances .dz) */
.dz,.cd-dz{
  display:block;position:relative;overflow:hidden;
  border:2px dashed var(--cd-primary,#0c6b62);
  border-radius:var(--cd-radius-lg,18px);
  background:linear-gradient(180deg,var(--cd-primary-soft,#e5f3f1),var(--cd-surface,#fff));
  padding:var(--cd-space-8,32px) var(--cd-space-4,16px);
  text-align:center;cursor:pointer;font-weight:700;
  color:var(--cd-ink,#0f172a);
  transition:border-color .15s,box-shadow .15s,background .15s;
  min-height:120px;box-sizing:border-box
}
.dz:hover,.dz:focus-within,.cd-dz:hover,.cd-dz:focus-within{
  border-color:var(--cd-primary-deep,#09574f);
  box-shadow:var(--cd-focus-ring,0 0 0 3px rgba(37,99,235,.2))
}
.dz.over,.cd-dz.over{
  background:var(--cd-info-bg,#dbeafe);
  border-color:var(--cd-focus,#2563eb)
}
.dz small,.cd-dz small{
  display:block;font-weight:500;color:var(--cd-muted,#475569);
  margin-top:var(--cd-space-2,8px);pointer-events:none;line-height:1.4
}
.dz input[type=file],.cd-dz input[type=file]{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
  font-size:0;margin:0;padding:0;border:0;z-index:2
}

/* Cards */
.cd-card,.ccard,.hc,.hm-card{
  border-radius:var(--cd-radius,14px);
  border:1px solid var(--cd-border,#dce4ed);
  background:var(--cd-surface,#fff);
  box-shadow:var(--cd-shadow)
}

/* Progress */
.cd-progress,progress.cd-progress,#prog{
  display:block;width:100%;height:10px;margin:10px 0;
  border:0;border-radius:var(--cd-radius-pill,999px);
  background:var(--cd-border,#dce4ed);overflow:hidden;
  accent-color:var(--cd-primary,#0c6b62)
}
progress.cd-progress::-webkit-progress-bar{background:var(--cd-border,#dce4ed);border-radius:999px}
progress.cd-progress::-webkit-progress-value{background:var(--cd-primary,#0c6b62);border-radius:999px}

/* Empty / success / error banners */
.cd-empty{
  text-align:center;padding:28px 16px;color:var(--cd-muted,#475569);
  border:1px dashed var(--cd-border,#dce4ed);border-radius:var(--cd-radius,14px);
  background:#fafbfd;margin:12px 0
}
.cd-empty strong{display:block;color:var(--cd-ink,#0f172a);margin-bottom:6px;font-size:1.05rem}
.cd-banner{
  display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin:10px 0;
  border-radius:12px;border:1px solid var(--cd-border,#dce4ed);background:var(--cd-surface,#fff);
  font-size:.95rem;line-height:1.45
}
.cd-banner.ok{background:var(--cd-success-bg,#dcfce7);border-color:#86efac;color:#14532d}
.cd-banner.err{background:var(--cd-error-bg,#fee2e2);border-color:#fecaca;color:#7f1d1d}
.cd-banner.warn{background:var(--cd-warn-bg,#fef3c7);border-color:#fde68a;color:#713f12}
.cd-banner.info{background:var(--cd-info-bg,#dbeafe);border-color:#bfdbfe;color:#1e3a8a}

/* Workflow steps (Upload → …) */
.cd-steps{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:0 0 14px;padding:0;list-style:none
}
.cd-steps li{
  display:inline-flex;align-items:center;gap:8px;
  min-height:36px;padding:6px 12px;border-radius:999px;
  background:#f1f5f9;border:1px solid var(--cd-border,#dce4ed);
  font-size:.88rem;font-weight:700;color:var(--cd-muted,#475569)
}
.cd-steps li .n{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:#fff;border:1px solid var(--cd-border,#dce4ed);font-size:.75rem
}
.cd-steps li.on{background:var(--cd-primary-soft,#e5f3f1);border-color:var(--cd-primary,#0c6b62);color:var(--cd-primary-deep,#09574f)}
.cd-steps li.on .n{background:var(--cd-primary,#0c6b62);color:#fff;border-color:transparent}
.cd-steps li.done{background:#ecfdf5;border-color:#86efac;color:#14532d}

/* Mode tabs – sticky, scrollable on mobile */
.mode-tabs{
  display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;margin:12px 0 14px;position:sticky;top:58px;z-index:7;
  background:rgba(247,249,252,.96);backdrop-filter:blur(8px);padding:6px;border-radius:14px;
  border:1px solid var(--cd-border,#dce4ed)
}
.mode-tabs a{
  flex:none;display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;
  border-radius:11px;text-decoration:none;font-weight:700;font-size:.92rem;
  color:var(--cd-ink,#0f172a);white-space:nowrap
}
.mode-tabs a:hover{background:var(--cd-primary-soft,#e5f3f1);color:var(--cd-primary-deep,#09574f)}
.mode-tabs a[aria-current=page],.mode-tabs a[aria-selected=true]{
  background:var(--cd-primary,#0c6b62);color:#fff
}
@media (prefers-reduced-motion:reduce){.mode-tabs{backdrop-filter:none}}

/* Toast: also support .cd-toast.info */
.cd-toast.info{background:var(--cd-info,#1d4ed8)}
.cd-toast{z-index:90}

/* Reserved ad slot (empty until filled; never covers CTAs) */
.ad-slot:empty,.cd-adslot:empty{display:none}
.ad-slot,.cd-adslot{clear:both;margin:28px auto;max-width:980px}

/* Public usage counters: hide until verified accurate */
/* visit-counter restored public 2026-10-25 */
.cd-usage[data-unverified],.hx-most .hm-note[data-fake]{display:none!important}

@media (max-width:700px){
  .mode-tabs{top:52px;padding:4px}
  .dz,.cd-dz{padding:22px 14px;min-height:108px}
  .cd-steps{gap:6px}
  .cd-steps li{font-size:.8rem;padding:5px 10px}
}


/* ===== Phase 3 sitewide inheritance helpers ===== */
/* Pages that only load site.css still get these via middleware-injected ux.css */

main .tool-box,
main #mode-box,
main #tt-app,
main #rb-app,
main #kd-app,
main .rb-app{
  border:1px solid var(--cd-border,#dce4ed);
  border-radius:var(--cd-radius-lg,18px);
  background:var(--cd-surface,#fff);
  box-shadow:var(--cd-shadow);
  padding:16px;margin:12px 0 22px
}

main .btn,main a.btn,main button.btn{border-radius:12px;font-weight:700}
main input[type=number],main input[type=text],main select,main textarea{
  border-radius:10px
}

/* Size-guide / content tools without .tool-box */
main .prose table,main .article table,main .table-wrap table{
  border-collapse:collapse;width:100%
}
main .prose th,main .article th{background:var(--cd-primary-soft,#e5f3f1)}

/* Games shell */
.game-wrap,.game-box,#game{
  border-radius:16px;border:1px solid var(--cd-border,#dce4ed);
  background:#fff;box-shadow:var(--cd-shadow);padding:12px
}

.visit-counter.visit-counter--on{display:block!important;text-align:center}


/* ===== Subtle motion 2026-10-26 (soft, short, low-distraction) ===== */
/* Durations ~150–280ms; page enter ≤400ms once. No loops except existing spinner. */

@keyframes cd-enter{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
@keyframes cd-cta-shine{
  from{transform:translateX(-130%) skewX(-12deg)}
  to{transform:translateX(220%) skewX(-12deg)}
}

/* Gentle page content enter — once on load */
main{
  animation:cd-enter var(--cd-enter,360ms) var(--cd-ease-out,cubic-bezier(.16,1,.3,1)) both
}

/* Soft hover lift on cards / tool tiles / directory tiles */
.card,a.card,.tcard,.ccard,.hm-card,.hc,.us-focus-card,.cd-card,
.cd-next-l a,.hx-jump a,.hchips a,.hx-recent-list a{
  transition:
    transform var(--cd-fast,180ms) var(--cd-ease,cubic-bezier(.22,1,.36,1)),
    box-shadow var(--cd-fast,180ms) var(--cd-ease,cubic-bezier(.22,1,.36,1)),
    border-color var(--cd-fast,180ms) var(--cd-ease,cubic-bezier(.22,1,.36,1)),
    background-color var(--cd-med,240ms) var(--cd-ease,cubic-bezier(.22,1,.36,1)),
    color var(--cd-fast,180ms) ease
}
.card:hover,a.card:hover,.tcard:hover,.ccard:hover,.hm-card:hover,.hc:hover,.us-focus-card:hover,.cd-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--cd-shadow-hover,0 10px 24px rgba(15,23,42,.10))
}
.cd-next-l a:hover,.hx-jump a:hover,.hchips a:hover,.hx-recent-list a:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(15,23,42,.08)
}

/* Nav links: tiny lift, no bounce */
.nav a:not(.btn){
  transition:background var(--cd-fast,180ms) ease,color var(--cd-fast,180ms) ease,transform var(--cd-fast,180ms) var(--cd-ease,cubic-bezier(.22,1,.36,1))
}
.nav a:not(.btn):hover{transform:translateY(-1px)}

/* Buttons: light brightness + scale — never jumpy */
.btn,a.btn,button.btn,input[type=submit],input[type=button]{
  transition:
    background var(--cd-fast,180ms) ease,
    box-shadow var(--cd-fast,180ms) ease,
    border-color var(--cd-fast,180ms) ease,
    transform var(--cd-fast,180ms) var(--cd-ease,cubic-bezier(.22,1,.36,1)),
    filter var(--cd-fast,180ms) ease,
    color var(--cd-fast,180ms) ease
}
.btn:not(:disabled):hover,a.btn:hover,button.btn:not(:disabled):hover,
input[type=submit]:not(:disabled):hover,input[type=button]:not(:disabled):hover{
  transform:translateY(-1px) scale(1.02);
  filter:brightness(1.04)
}
.btn:not(:disabled):active,a.btn:active,button.btn:not(:disabled):active,
input[type=submit]:not(:disabled):active,input[type=button]:not(:disabled):active{
  transform:translateY(1px) scale(1);filter:brightness(.97)
}

/* Soft shimmer on primary CTA hover only (btn-lg / main CTAs) */
.btn.btn-lg:not(.btn-ghost):not(.alt):not(.btn-alt),
a.btn.btn-lg:not(.btn-ghost):not(.alt){
  position:relative;overflow:hidden;isolation:isolate
}
.btn.btn-lg:not(.btn-ghost):not(.alt):not(.btn-alt)::before,
a.btn.btn-lg:not(.btn-ghost):not(.alt)::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:42%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.16) 48%,transparent 100%);
  transform:translateX(-130%) skewX(-12deg);pointer-events:none;z-index:1;opacity:0
}
.btn.btn-lg:not(.btn-ghost):not(.alt):not(.btn-alt):hover::before,
a.btn.btn-lg:not(.btn-ghost):not(.alt):hover::before{
  opacity:1;animation:cd-cta-shine var(--cd-med,240ms) var(--cd-ease,cubic-bezier(.22,1,.36,1)) forwards
}

/* Mode tabs soft transition (already have hover bg) */
.mode-tabs a{
  transition:background var(--cd-fast,180ms) ease,color var(--cd-fast,180ms) ease,transform var(--cd-fast,180ms) ease
}
.mode-tabs a:hover{transform:translateY(-1px)}

/* Focus-visible: keep ring, slight offset polish */
:focus-visible{
  outline:3px solid var(--cd-focus,#2563eb);
  outline-offset:3px
}

/* Idle dropzone only — no motion while .over / dragging */
.dz:not(.over),.cd-dz:not(.over){
  transition:border-color var(--cd-fast,180ms) ease,box-shadow var(--cd-fast,180ms) ease,background var(--cd-fast,180ms) ease,transform var(--cd-fast,180ms) ease
}
.dz:not(.over):hover,.cd-dz:not(.over):hover{transform:translateY(-1px)}
@keyframes cd-dz-idle{
  0%,100%{box-shadow:0 0 0 0 rgba(12,107,98,.0);border-color:var(--cd-border,#e2e8f0)}
  50%{box-shadow:0 0 0 4px rgba(12,107,98,.08);border-color:#9fd0c8}
}
.dz:not(.over):not(:hover):not(:focus-within),.cd-dz:not(.over):not(:hover):not(:focus-within){
  animation:cd-dz-idle 3.6s ease-in-out infinite
}

/* Do NOT force-disable transforms on canvas/cropper — tools use them for pan/zoom.
   We simply never target work surfaces with hover lifts or enter animations. */

@media (prefers-reduced-motion:reduce){
  main{animation:none}
  .card,.tcard,.ccard,.hm-card,.hc,.us-focus-card,.cd-card,a.card,
  .cd-next-l a,.hx-jump a,.hchips a,.hx-recent-list a,
  .nav a:not(.btn),.btn,a.btn,button.btn,.mode-tabs a,.dz,.cd-dz{
    transition:none!important;transform:none!important;filter:none!important
  }
  .card:hover,a.card:hover,.tcard:hover,.ccard:hover,.hm-card:hover,.hc:hover,
  .us-focus-card:hover,.cd-card:hover,.btn:hover,a.btn:hover,button.btn:hover,
  .nav a:hover,.mode-tabs a:hover,.dz:hover,.cd-dz:hover,
  .cd-next-l a:hover,.hx-jump a:hover,.hchips a:hover,.hx-recent-list a:hover{
    transform:none!important;filter:none!important
  }
  .btn.btn-lg:not(.btn-ghost)::before,a.btn.btn-lg:not(.btn-ghost)::before{display:none;animation:none}
}


/* ===== Croppi mascot 20261026m9 (soft-3D speed critter + full limbs + roam/play) ===== */
.cd-mascot{
  position:fixed;left:auto;top:auto;
  right:max(10px,env(safe-area-inset-right,0px));
  bottom:max(10px,env(safe-area-inset-bottom,0px));
  width:72px;height:84px;z-index:55;pointer-events:none;
  transform-origin:50% 100%;
  transition:opacity .22s ease,transform .22s ease,left .85s cubic-bezier(.22,1,.36,1),top .95s cubic-bezier(.22,1,.36,1)
}
.cd-mascot.cd-mascot--snap{transition:opacity .18s ease,transform .18s ease !important}
.cd-mascot.cd-mascot--dodge{
  transition:opacity .18s ease,transform .18s ease,left .38s cubic-bezier(.2,.9,.2,1),top .38s cubic-bezier(.2,.9,.2,1)
}
.cd-mascot-hit{
  pointer-events:auto;display:block;margin:0 auto;padding:0;border:0;background:transparent;
  width:64px;height:72px;cursor:pointer;border-radius:18px;
  -webkit-tap-highlight-color:transparent
}
.cd-mascot-hit:focus-visible{outline:2px solid #2563eb;outline-offset:3px}
.cd-mascot-fig{pointer-events:none;width:64px;height:72px;margin:0 auto;
  transform-style:preserve-3d;perspective:240px
}
.cd-mascot-svg{display:block;width:64px;height:72px;filter:drop-shadow(0 8px 14px rgba(15,23,42,.22))}
.cd-mascot-x{
  pointer-events:auto;position:absolute;top:-2px;right:-2px;z-index:2;
  width:22px;height:22px;min-height:22px!important;min-width:22px;padding:0;
  border:0;border-radius:999px;background:rgba(15,23,42,.55);color:#fff;
  font:700 14px/1 system-ui,sans-serif;cursor:pointer;opacity:.55;
  transition:opacity .15s,background .15s
}
.cd-mascot-x:hover,.cd-mascot-x:focus-visible{opacity:1;background:#0c6b62;outline:2px solid #2563eb;outline-offset:2px}
.cd-mascot--side-left .cd-mascot-x{right:auto;left:-2px}
.cd-mascot--side-left .cd-mascot-tip{right:auto;left:0;transform-origin:10% 100%}
.cd-mascot--side-left .cd-mascot-gag{right:auto;left:58px}
.cd-mascot--side-left .cd-mascot-whisper{right:auto;left:0}

/* Soft bob + tiny side sway */
@keyframes cd-mascot-bob{
  0%,100%{transform:translate3d(0,0,0) rotateY(-10deg) scale(1)}
  25%{transform:translate3d(-5px,-3px,0) rotateY(-2deg) scale(1.02)}
  50%{transform:translate3d(0,-4px,0) rotateY(10deg) scale(1.03)}
  75%{transform:translate3d(5px,-2px,0) rotateY(2deg) scale(1.01)}
}
@keyframes cd-mascot-leg-l{
  0%,100%{transform:translateY(0) rotate(-14deg)}
  50%{transform:translateY(3px) rotate(16deg)}
}
@keyframes cd-mascot-leg-r{
  0%,100%{transform:translateY(3px) rotate(14deg)}
  50%{transform:translateY(0) rotate(-16deg)}
}
@keyframes cd-mascot-arm{
  0%,100%{transform:rotate(-8deg)}
  50%{transform:rotate(18deg)}
}
@keyframes cd-mascot-tuft{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(6deg)}
}
@keyframes cd-mascot-foot{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(1.5px)}
}
@keyframes cd-mascot-enter{
  0%{opacity:0;transform:translate3d(28px,18px,0) scale(.72)}
  55%{opacity:1;transform:translate3d(-4px,-2px,0) scale(1.06)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes cd-mascot-celebrate{
  0%,100%{transform:translate3d(0,0,0) scale(1) rotateY(-6deg)}
  25%{transform:translate3d(-6px,-8px,0) scale(1.08) rotateY(6deg)}
  50%{transform:translate3d(0,-12px,0) scale(1.12) rotateY(-4deg)}
  75%{transform:translate3d(6px,-6px,0) scale(1.06) rotateY(8deg)}
}
@keyframes cd-mascot-play-bounce{
  0%,100%{transform:translate3d(0,0,0) scale(1) rotate(-2deg)}
  30%{transform:translate3d(0,-10px,0) scale(1.1) rotate(6deg)}
  55%{transform:translate3d(0,-4px,0) scale(1.04) rotate(-4deg)}
  75%{transform:translate3d(0,-8px,0) scale(1.08) rotate(3deg)}
}
.cd-mascot:not(.cd-mascot--still):not(.cd-mascot--paused):not(.cd-mascot--play):not(.cd-mascot--pointing) .cd-mascot-fig{
  animation:cd-mascot-bob 1.9s var(--cd-ease,cubic-bezier(.22,1,.36,1)) infinite
}
.cd-mascot:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-leg--l{
  transform-origin:50% 0;animation:cd-mascot-leg-l 0.48s ease-in-out infinite
}
.cd-mascot:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-leg--r{
  transform-origin:50% 0;animation:cd-mascot-leg-r 0.48s ease-in-out infinite
}
.cd-mascot:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-arm--l{
  transform-origin:100% 50%;animation:cd-mascot-arm 0.48s ease-in-out infinite reverse
}
.cd-mascot:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-arm--r{
  transform-origin:0 50%;animation:cd-mascot-arm 0.48s ease-in-out infinite
}
.cd-mascot:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-tuft--l{
  transform-origin:18px 20px;animation:cd-mascot-tuft .9s ease-in-out infinite
}
.cd-mascot:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-tuft--r{
  transform-origin:46px 20px;animation:cd-mascot-tuft .9s ease-in-out infinite reverse
}
.cd-mascot:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-foot--l{
  transform-origin:24px 59px;animation:cd-mascot-foot .48s ease-in-out infinite
}
.cd-mascot:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-foot--r{
  transform-origin:40px 59px;animation:cd-mascot-foot .48s ease-in-out infinite reverse
}
.cd-mascot--paused .cd-mascot-tuft--l,
.cd-mascot--paused .cd-mascot-tuft--r,
.cd-mascot--paused .cd-mascot-foot--l,
.cd-mascot--paused .cd-mascot-foot--r{animation-play-state:paused}
.cd-mascot.cd-mascot--enter:not(.cd-mascot--still){
  animation:cd-mascot-enter .75s var(--cd-ease,cubic-bezier(.22,1,.36,1)) both
}
.cd-mascot.cd-mascot--celebrate:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-fig{
  animation:cd-mascot-celebrate .55s ease-in-out infinite
}
.cd-mascot.cd-mascot--celebrate:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-leg--l,
.cd-mascot.cd-mascot--celebrate:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-leg--r{
  animation-duration:.35s
}
.cd-mascot.cd-mascot--play:not(.cd-mascot--still) .cd-mascot-fig{
  animation:cd-mascot-play-bounce .55s ease-in-out infinite
}
.cd-mascot.cd-mascot--play:not(.cd-mascot--still) .cd-mascot-leg--l,
.cd-mascot.cd-mascot--play:not(.cd-mascot--still) .cd-mascot-leg--r{
  animation-duration:.28s
}
.cd-mascot--paused .cd-mascot-fig,
.cd-mascot--paused .cd-mascot-leg--l,
.cd-mascot--paused .cd-mascot-leg--r,
.cd-mascot--paused .cd-mascot-arm--l,
.cd-mascot--paused .cd-mascot-arm--r{animation-play-state:paused}
.cd-mascot--hide{opacity:0;transform:translateY(12px) scale(.92);pointer-events:none!important}
.cd-mascot--gone{opacity:0;transform:translateY(16px) scale(.85);pointer-events:none!important}
@media (max-width:420px){
  .cd-mascot{width:60px;height:72px}
  .cd-mascot-hit,.cd-mascot-fig,.cd-mascot-svg{width:52px;height:60px}
}
@media (prefers-reduced-motion:reduce){
  .cd-mascot{transition:opacity .15s ease !important}
  .cd-mascot .cd-mascot-fig,
  .cd-mascot .cd-mascot-leg--l,
  .cd-mascot .cd-mascot-leg--r,
  .cd-mascot .cd-mascot-arm--l,
  .cd-mascot .cd-mascot-arm--r,
  .cd-mascot .cd-mascot-tuft--l,
  .cd-mascot .cd-mascot-tuft--r,
  .cd-mascot .cd-mascot-foot--l,
  .cd-mascot .cd-mascot-foot--r,
  .cd-mascot.cd-mascot--enter,
  .cd-mascot.cd-mascot--celebrate .cd-mascot-fig,
  .cd-mascot.cd-mascot--play .cd-mascot-fig{animation:none!important}
  .cd-mascot-fig{transform:rotateY(-6deg)}
  .dz:not(.over),.cd-dz:not(.over){animation:none!important}
  .cd-status.ok,.cd-banner.ok{animation:none!important}
}

/* Tip bubble + point pose */
.cd-mascot-tip{
  position:absolute;right:0;bottom:calc(100% + 6px);width:min(220px,70vw);
  padding:8px 26px 8px 10px;border-radius:12px;
  background:#0f172a;color:#f8fafc;font:600 .78rem/1.35 system-ui,sans-serif;
  box-shadow:0 8px 22px rgba(15,23,42,.22);pointer-events:none;z-index:3;
  transform-origin:90% 100%
}
.cd-mascot-tip[hidden]{display:none!important}
.cd-mascot-tip-t{margin:0}
.cd-mascot-tip-x{
  pointer-events:auto;position:absolute;top:4px;right:4px;
  width:20px;height:20px;min-height:20px!important;min-width:20px;padding:0;
  border:0;border-radius:999px;background:rgba(255,255,255,.18);color:#fff;
  font:700 12px/1 system-ui,sans-serif;cursor:pointer;opacity:.75
}
.cd-mascot-tip-x:hover,.cd-mascot-tip-x:focus-visible{opacity:1;outline:2px solid #93c5fd;outline-offset:1px}
@keyframes cd-mascot-tip-in{
  0%{opacity:0;transform:translateY(6px) scale(.94)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.cd-mascot--tip-on .cd-mascot-tip{animation:cd-mascot-tip-in .28s ease-out both}
.cd-mascot-point{transition:opacity .2s}
.cd-mascot--pointing .cd-mascot-point{opacity:1}
.cd-mascot--point-left:not(.cd-mascot--still) .cd-mascot-fig{
  transform:translate3d(-6px,-2px,0) rotate(-8deg) rotateY(12deg)
}
.cd-mascot--point-left:not(.cd-mascot--still) .cd-mascot-arm--l{
  transform:rotate(-28deg) translate(-2px,-2px)
}
.cd-mascot--point-up:not(.cd-mascot--still) .cd-mascot-fig{
  transform:translate3d(-2px,-8px,0) rotate(-4deg)
}
.cd-mascot--point-up.cd-mascot--point-left:not(.cd-mascot--still) .cd-mascot-fig{
  transform:translate3d(-8px,-10px,0) rotate(-10deg) rotateY(10deg)
}
.cd-mascot--pointing:not(.cd-mascot--still) .cd-mascot-fig{
  animation:none!important
}
.cd-mascot--pointing:not(.cd-mascot--still) .cd-mascot-leg--l,
.cd-mascot--pointing:not(.cd-mascot--still) .cd-mascot-leg--r,
.cd-mascot--pointing:not(.cd-mascot--still) .cd-mascot-arm--l,
.cd-mascot--pointing:not(.cd-mascot--still) .cd-mascot-arm--r{
  animation-play-state:paused
}

/* Play whisper bubble */
.cd-mascot-whisper{
  position:absolute;right:0;bottom:calc(100% + 4px);z-index:4;
  padding:5px 10px;border-radius:999px;background:#1757a0;color:#fff;
  font:700 .72rem/1.2 system-ui,sans-serif;white-space:nowrap;
  box-shadow:0 6px 16px rgba(23,87,160,.28);pointer-events:none;
  opacity:0;transform:translateY(4px) scale(.92);
  transition:opacity .18s ease,transform .18s ease
}
.cd-mascot-whisper[hidden]{display:none!important}
.cd-mascot--whisper-on .cd-mascot-whisper{opacity:1;transform:translateY(0) scale(1);display:inline-block}

@media (prefers-reduced-motion:reduce){
  .cd-mascot--tip-on .cd-mascot-tip{animation:none!important}
  .cd-mascot--point-left .cd-mascot-fig,
  .cd-mascot--point-up .cd-mascot-fig{transform:none}
  .cd-mascot-point{opacity:0!important}
  .cd-mascot-whisper{transition:none}
}

/* Loading gags */
.cd-mascot{overflow:visible}
.cd-mascot-gag{
  position:absolute;right:58px;bottom:8px;z-index:0;
  display:flex;align-items:flex-end;gap:2px;
  pointer-events:none;opacity:0;transform:translateX(8px);
  transition:opacity .22s ease,transform .22s ease
}
.cd-mascot-gag[hidden]{display:none!important}
.cd-mascot--loading .cd-mascot-gag{opacity:1;transform:translateX(0);display:flex!important}
.cd-mascot-cave{display:block;width:48px;height:36px;filter:drop-shadow(0 2px 3px rgba(15,23,42,.12))}
.cd-mascot-wheel{display:block;width:20px;height:20px;margin-bottom:2px;opacity:.95}
.cd-mascot-wheel[hidden]{display:none!important}
.cd-mascot-gag-whisper{
  position:absolute;left:0;top:-12px;font:600 .62rem/1 system-ui,sans-serif;
  color:#78716c;letter-spacing:.02em;white-space:nowrap;opacity:.85
}
@keyframes cd-cave-scurry{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  50%{transform:translateX(2px)}
  75%{transform:translateX(-2px)}
}
@keyframes cd-cave-leg{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(18deg)}
}
@keyframes cd-cave-arm{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(-16deg)}
}
@keyframes cd-stone-spin{to{transform:rotate(360deg)}}
.cd-mascot--loading:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-cave-run{
  animation:cd-cave-scurry .45s ease-in-out infinite;
  transform-origin:22px 32px
}
.cd-mascot--loading:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-cave-leg-l{
  transform-origin:22px 22px;animation:cd-cave-leg .28s ease-in-out infinite
}
.cd-mascot--loading:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-cave-leg-r{
  transform-origin:22px 22px;animation:cd-cave-leg .28s ease-in-out infinite reverse
}
.cd-mascot--loading:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-cave-arm-r,
.cd-mascot--loading:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-cave-stick{
  transform-origin:22px 15px;animation:cd-cave-arm .28s ease-in-out infinite
}
.cd-mascot--wheel:not(.cd-mascot--still):not(.cd-mascot--paused) .cd-mascot-wheel{
  animation:cd-stone-spin 1.1s linear infinite
}
.cd-mascot--paused .cd-mascot-cave-run,
.cd-mascot--paused .cd-mascot-cave-leg-l,
.cd-mascot--paused .cd-mascot-cave-leg-r,
.cd-mascot--paused .cd-mascot-cave-arm-r,
.cd-mascot--paused .cd-mascot-cave-stick,
.cd-mascot--paused .cd-mascot-wheel{animation-play-state:paused}

/* Face defaults */
.cd-mascot-mouth--big,
.cd-mascot-mouth--flat,
.cd-mascot-mouth--o,
.cd-mascot-mouth--worry{opacity:0}
.cd-mascot-mouth--smile{opacity:1}
.cd-mascot-brow{opacity:0}
.cd-mascot-sweat{opacity:0}
.cd-mascot-shades{opacity:0;transition:opacity .2s ease}
.cd-mascot-leaf{opacity:0;transition:opacity .25s ease,transform .25s ease}
.cd-mascot-eye{transition:transform .18s ease}

.cd-mascot--emo-idle .cd-mascot-mouth--smile{opacity:1}

.cd-mascot--emo-think .cd-mascot-mouth--smile{opacity:0}
.cd-mascot--emo-think .cd-mascot-mouth--flat{opacity:1}
.cd-mascot--emo-think .cd-mascot-brow{opacity:1}
.cd-mascot--emo-think .cd-mascot-eye--l,
.cd-mascot--emo-think .cd-mascot-eye--r{transform:translate(0,-1.2px)}
.cd-mascot--emo-think .cd-mascot-spark{transform:translate(.4px,-1px)}

.cd-mascot--emo-happy .cd-mascot-mouth--smile{opacity:0}
.cd-mascot--emo-happy .cd-mascot-mouth--big{opacity:1}
.cd-mascot--emo-happy .cd-mascot-eye--l,
.cd-mascot--emo-happy .cd-mascot-eye--r{transform:scaleY(.55) translateY(1px)}

.cd-mascot--emo-excited .cd-mascot-mouth--smile{opacity:0}
.cd-mascot--emo-excited .cd-mascot-mouth--big{opacity:1}
.cd-mascot--emo-excited .cd-mascot-eye--l,
.cd-mascot--emo-excited .cd-mascot-eye--r{transform:scale(1.15)}

.cd-mascot--emo-worried .cd-mascot-mouth--smile{opacity:0}
.cd-mascot--emo-worried .cd-mascot-mouth--worry{opacity:1}
.cd-mascot--emo-worried .cd-mascot-sweat{opacity:1}
.cd-mascot--emo-worried .cd-mascot-eye--l,
.cd-mascot--emo-worried .cd-mascot-eye--r{transform:scaleY(.85) translateY(.4px)}

.cd-mascot--emo-loading .cd-mascot-mouth--smile{opacity:0}
.cd-mascot--emo-loading .cd-mascot-mouth--o{opacity:1}
.cd-mascot--emo-loading .cd-mascot-eye--l{transform:translate(-1.5px,0) scale(1.05)}
.cd-mascot--emo-loading .cd-mascot-eye--r{transform:translate(-1.5px,0)}
.cd-mascot--emo-loading .cd-mascot-sweat{opacity:.55}

.cd-mascot--emo-cool .cd-mascot-shades,
.cd-mascot--cool .cd-mascot-shades{opacity:1}
.cd-mascot--emo-cool .cd-mascot-eyes,
.cd-mascot--cool .cd-mascot-eyes{opacity:0}
.cd-mascot--emo-cool .cd-mascot-mouth--smile{opacity:0}
.cd-mascot--emo-cool .cd-mascot-mouth--big{opacity:1}

.cd-mascot--emo-peek .cd-mascot-leaf,
.cd-mascot--peek .cd-mascot-leaf{
  opacity:1;transform:translate(2px,0)
}
.cd-mascot--emo-peek .cd-mascot-face,
.cd-mascot--peek .cd-mascot-face{
  transform:translate(-3px,1px)
}
.cd-mascot--emo-peek .cd-mascot-mouth--smile{opacity:0}
.cd-mascot--emo-peek .cd-mascot-mouth--flat{opacity:1}
.cd-mascot-face{transition:transform .25s ease}

/* poke surprise / giggle */
.cd-mascot--emo-surprise .cd-mascot-mouth--smile{opacity:0}
.cd-mascot--emo-surprise .cd-mascot-mouth--o{opacity:1}
.cd-mascot--emo-surprise .cd-mascot-eye--l,
.cd-mascot--emo-surprise .cd-mascot-eye--r{transform:scale(1.25)}
.cd-mascot--emo-surprise .cd-mascot-brow{opacity:1}
.cd-mascot--emo-giggle .cd-mascot-mouth--smile{opacity:0}
.cd-mascot--emo-giggle .cd-mascot-mouth--big{opacity:1}
.cd-mascot--emo-giggle .cd-mascot-eye--l,
.cd-mascot--emo-giggle .cd-mascot-eye--r{transform:scaleY(.45) translateY(1.5px)}
.cd-mascot--emo-giggle .cd-mascot-arm--l,
.cd-mascot--emo-giggle .cd-mascot-arm--r{transform:rotate(18deg)}

@media (max-width:420px){
  .cd-mascot-gag{right:48px;bottom:4px}
  .cd-mascot--side-left .cd-mascot-gag{left:48px;right:auto}
  .cd-mascot-cave{width:40px;height:30px}
  .cd-mascot-gag-whisper{font-size:.55rem;top:-10px}
}
@media (prefers-reduced-motion:reduce){
  .cd-mascot--loading .cd-mascot-cave-run,
  .cd-mascot--loading .cd-mascot-cave-leg-l,
  .cd-mascot--loading .cd-mascot-cave-leg-r,
  .cd-mascot--loading .cd-mascot-cave-arm-r,
  .cd-mascot--loading .cd-mascot-cave-stick,
  .cd-mascot--wheel .cd-mascot-wheel{animation:none!important}
  .cd-mascot-gag{opacity:.9;transform:none}
}

/* ===== Soft mesh background 2026-10-26m4 (slow hue/opacity pulse, WCAG-safe) ===== */
body{position:relative;isolation:isolate}
body::before,body::after{
  content:"";position:fixed;inset:auto;pointer-events:none;z-index:-1;
  border-radius:50%;filter:blur(64px);opacity:.55
}
body::before{
  width:min(72vw,560px);height:min(72vw,560px);top:-12vh;left:-10vw;
  background:radial-gradient(circle at 30% 30%,rgba(12,107,98,.16),rgba(12,107,98,.04) 55%,transparent 70%)
}
body::after{
  width:min(68vw,520px);height:min(68vw,520px);right:-12vw;bottom:8vh;
  background:radial-gradient(circle at 60% 40%,rgba(23,87,160,.14),rgba(79,70,229,.05) 50%,transparent 72%)
}
@keyframes cd-mesh-a{
  0%,100%{opacity:.48;filter:blur(64px) hue-rotate(0deg);transform:translate3d(0,0,0) scale(1)}
  50%{opacity:.62;filter:blur(68px) hue-rotate(12deg);transform:translate3d(2vw,1vh,0) scale(1.04)}
}
@keyframes cd-mesh-b{
  0%,100%{opacity:.42;filter:blur(64px) hue-rotate(0deg);transform:translate3d(0,0,0) scale(1)}
  50%{opacity:.58;filter:blur(70px) hue-rotate(-10deg);transform:translate3d(-2vw,-1vh,0) scale(1.05)}
}
body::before{animation:cd-mesh-a 32s ease-in-out infinite}
body::after{animation:cd-mesh-b 40s ease-in-out infinite}
/* Soft page wash over #f7f9fc without killing contrast */
html{background:var(--cd-bg,#f7f9fc)}
body{
  background:
    radial-gradient(900px 420px at 8% -8%,rgba(12,107,98,.07),transparent 60%),
    radial-gradient(820px 380px at 96% 0%,rgba(37,99,235,.06),transparent 58%),
    radial-gradient(700px 360px at 50% 110%,rgba(12,107,98,.04),transparent 55%),
    var(--cd-bg,#f7f9fc)
}
@media (prefers-reduced-motion:reduce){
  body::before,body::after{animation:none!important;filter:blur(48px);opacity:.4}
}

/* ===== Polished tool icons (shared .hc-i / .ci) – brand teal/blue, tiny lift ===== */
.hc-i,.ci,span.hc-i,span.ci{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:14px;
  background:linear-gradient(145deg,var(--cd-primary,#0c6b62),var(--cd-secondary,#1757a0));
  color:#fff;
  box-shadow:0 4px 12px -2px rgba(12,107,98,.28),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform var(--cd-fast,180ms) var(--cd-ease,cubic-bezier(.22,1,.36,1)),box-shadow var(--cd-fast,180ms) ease
}
.hc-i svg,.ci svg{
  width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.15;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 0 rgba(0,0,0,.08))
}
.hc .hc-i{width:40px;height:40px;border-radius:12px}
.hc .hc-i svg{width:20px;height:20px}
.hm-card .hc-i{width:46px;height:46px;border-radius:14px}
.hm-card:first-child .hc-i{
  background:rgba(255,255,255,.2);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 4px 12px rgba(0,0,0,.12)
}
.hm-card:hover .hc-i,.hc:hover .hc-i,.ccard:hover .ci,.cat-h:hover .ci{
  transform:translateY(-1px) scale(1.04)
}
/* Category header icon chip */
.hcat-h .ci,.cat-h .ci{
  width:36px;height:36px;border-radius:11px;margin-right:4px;vertical-align:-8px
}
.hcat-h .ci svg,.cat-h .ci svg{width:18px;height:18px}
/* Tint variants via --g1/--g2 when present (all-tools) */
.ci[style*="--g1"],.hc-i[style*="--g1"]{
  background:linear-gradient(145deg,var(--g1,#0c6b62),var(--g2,#1757a0))
}
@media (prefers-reduced-motion:reduce){
  .hm-card:hover .hc-i,.hc:hover .hc-i,.ccard:hover .ci{transform:none}
}