@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..800;1,9..40,300..800&family=DM+Mono:wght@400;500&display=swap');

/* ══════════════════════════════════════════════════
   HUECRAFT PRO — Enhanced Visual System v2
   Dominant color preview · Rich bento grid · Alive
══════════════════════════════════════════════════ */

:root {
  /* Spacing */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px;

  /* Radii */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px;
  --r-2xl: 24px; --r-full: 9999px;

  /* Light surfaces (Modern Zinc Light) */
  --bg: #f9f9fb;
  --surface-0: #ffffff;
  --surface-1: #f4f4f5;
  --surface-2: #e4e4e7;
  --border: rgba(9, 9, 11, 0.06);
  --border-md: rgba(9, 9, 11, 0.10);

  /* Text */
  --t1: #09090b; --t2: #52525b; --t3: #a1a1aa;

  /* Dynamic accent — overridden by JS */
  --accent: #5b5ef4;
  --accent-2: #8b5cf6;
  --accent-mid: #7b67f5;
  --accent-dim: rgba(91,94,244,0.08);
  --accent-dim2: rgba(91,94,244,0.15);
  --accent-glow: rgba(91,94,244,0.22);

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(0,0,0,0.03);
  --sh-sm: 0 2px 6px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
  --sh-md: 0 4px 12px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.02);
  --sh-lg: 0 10px 28px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --sh-xl: 0 20px 48px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05);
  --sh-accent: 0 6px 20px -3px var(--accent-glow);

  /* Transitions */
  --tf: 120ms cubic-bezier(.4,0,.2,1);
  --tb: 200ms cubic-bezier(.4,0,.2,1);
  --ts: 350ms cubic-bezier(.22,1,.36,1);
  --tk: 450ms cubic-bezier(.34,1.56,.64,1);

  --nav-h: 56px;
  --sb-w: 260px;
}

[data-theme="dark"] {
  /* Dark surfaces (Modern Zinc Dark) */
  --bg: #09090b;
  --surface-0: #0f0f11;
  --surface-1: #18181b;
  --surface-2: #27272a;
  --border: rgba(255,255,255,0.04);
  --border-md: rgba(255,255,255,0.08);
  
  /* Text */
  --t1: #fafafa; --t2: #a1a1aa; --t3: #52525b;
  
  --sh-xs: 0 1px 2px rgba(0,0,0,.6);
  --sh-sm: 0 2px 8px rgba(0,0,0,.65);
  --sh-md: 0 4px 16px rgba(0,0,0,.7);
  --sh-lg: 0 12px 32px rgba(0,0,0,.75);
  --sh-xl: 0 24px 56px rgba(0,0,0,.8);
}

/* ─── RESET ─── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'DM Sans',system-ui,sans-serif;
  background:var(--bg); color:var(--t1);
  line-height:1.5; font-size:14px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Noise texture */
body::after {
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:0.025; mix-blend-mode:overlay;
}

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-thumb { background:var(--border-md); border-radius:var(--r-full); }


/* ══════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════ */

nav.top-nav {
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h); z-index:1000;
  background:color-mix(in srgb,var(--surface-0) 82%,transparent);
  backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center;
  justify-content:space-between;
  padding:0 20px;
  box-shadow:var(--sh-sm);
}

.brand-section { display:flex; align-items:center; gap:10px; flex-shrink:0; }

.saas-logo {
  width:32px; height:32px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-radius:var(--r-md); display:flex; align-items:center;
  justify-content:center; color:#fff;
  box-shadow:0 4px 14px -2px var(--accent-glow);
  transition:var(--ts);
}
.saas-logo:hover { transform:rotate(10deg) scale(1.1); }
.saas-logo svg { width:15px; height:15px; }

.logo-text {
  font-weight:750; font-size:1rem; letter-spacing:-.4px;
  display:flex; align-items:center; gap:7px;
}
.badge-pill {
  font-size:.57rem; font-weight:800; letter-spacing:.06em;
  padding:2px 7px; border-radius:var(--r-full);
  background:var(--accent-dim); color:var(--accent);
  border:1px solid var(--accent-dim2);
}

.nav-menu {
  display:flex; align-items:center; gap:2px;
  background:var(--surface-1);
  padding:4px; border-radius:var(--r-full);
  border:1px solid var(--border);
}
.nav-link {
  display:flex; align-items:center; gap:6px;
  padding:6px 13px; border-radius:var(--r-full);
  font-size:.78rem; font-weight:600;
  color:var(--t2); background:transparent; border:none;
  cursor:pointer; transition:var(--tb); white-space:nowrap;
  letter-spacing:-.1px;
}
.nav-link svg { width:13px; height:13px; }
.nav-link:hover { color:var(--t1); background:var(--surface-2); }
.nav-link.active { background:var(--surface-0); color:var(--accent); box-shadow:var(--sh-xs); }

.nav-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }

/* Theme switch */
.theme-switch { position:relative; display:inline-block; cursor:pointer; }
.theme-switch input { display:none; }
.switch-track {
  display:flex; align-items:center;
  width:52px; height:28px;
  background:var(--surface-2);
  border:1px solid var(--border-md);
  border-radius:var(--r-full);
  transition:var(--ts);
  position:relative; overflow:hidden;
}
input:checked ~ .switch-track { background:#1a2240; border-color:#2d3d6a; }
.switch-thumb {
  position:absolute; left:4px;
  width:20px; height:20px;
  background:var(--surface-0);
  border-radius:50%;
  box-shadow:var(--sh-sm);
  transition:var(--ts);
  display:flex; align-items:center; justify-content:center;
}
input:checked ~ .switch-track .switch-thumb { transform:translateX(24px); }
.icon-sun,.icon-moon { position:absolute; width:11px; height:11px; transition:opacity .3s,transform .3s; }
.icon-sun { color:#f59e0b; opacity:1; }
.icon-moon { color:#94a3b8; opacity:0; }
input:checked ~ .switch-track .switch-thumb .icon-sun { opacity:0; transform:rotate(90deg); }
input:checked ~ .switch-track .switch-thumb .icon-moon { opacity:1; }

/* Profile */
.profile-container { position:relative; }
.profile-avatar {
  width:32px; height:32px; border-radius:50%; padding:0;
  border:2px solid transparent; cursor:pointer; overflow:hidden;
  background:var(--surface-2); transition:var(--tb);
  display:flex; align-items:center; justify-content:center;
}
.profile-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-avatar:hover { border-color:var(--accent); transform:scale(1.08); }

.profile-dropdown {
  position:absolute; top:calc(100% + 10px); right:0;
  width:196px; background:var(--surface-0);
  border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--sh-lg); overflow:hidden;
  opacity:0; visibility:hidden;
  transform:translateY(8px) scale(0.96);
  transform-origin:top right;
  transition:all .25s cubic-bezier(.22,1,.36,1); z-index:1100;
}
.profile-dropdown.show { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.dropdown-header { padding:14px 16px; }
.user-name { display:block; font-weight:700; font-size:.83rem; }
.user-email { display:block; font-size:.7rem; color:var(--t3); margin-top:1px; }
.dropdown-divider { height:1px; background:var(--border); }
.dropdown-item {
  display:flex; align-items:center; gap:9px;
  padding:9px 16px; font-size:.8rem; font-weight:500;
  color:var(--t2); text-decoration:none; transition:var(--tf);
}
.dropdown-item svg { width:13px; height:13px; }
.dropdown-item:hover { background:var(--surface-1); color:var(--t1); }
.dropdown-item.danger { color:#ef4444; }
.dropdown-item.danger:hover { background:rgba(239,68,68,.06); }


/* ══════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════ */

.app-container {
  display:flex; min-height:100vh; padding-top:var(--nav-h);
}


/* ══════════════════════════════════════════════════
   SIDEBAR — Slim, non-dominant
══════════════════════════════════════════════════ */

.sidebar {
  width:var(--sb-w); flex-shrink:0;
  background:var(--surface-0);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:sticky; top:var(--nav-h);
  height:calc(100vh - var(--nav-h));
  overflow-y:auto; z-index:10;
}
.sidebar-inner {
  padding:16px 14px;
  display:flex; flex-direction:column;
  gap:0; flex:1;
}
.sidebar-section-title {
  font-size:.63rem; font-weight:750;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--t3); padding:10px 8px 6px;
}
.control-section { display:flex; flex-direction:column; }
.control-section[style*="none"] { display:none!important; }

.control-item { margin-bottom:13px; }
.ctrl-label {
  display:block; font-size:.68rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--t3); margin-bottom:6px;
}

/* Color picker row */
.color-picker-row {
  display:flex; align-items:center; gap:8px;
  background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--r-md); padding:7px 10px;
  transition:var(--tb);
}
.color-picker-row:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.color-thumb-wrap { position:relative; width:26px; height:26px; flex-shrink:0; }
.color-thumb-wrap input[type="color"] {
  width:100%; height:100%; border:none; padding:0;
  border-radius:6px; cursor:pointer; background:none;
}
.color-thumb-wrap input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
.color-thumb-wrap input[type="color"]::-webkit-color-swatch { border-radius:5px; border:2px solid var(--border-md); }
.color-thumb-glow {
  position:absolute; inset:-3px; border-radius:8px;
  background:var(--accent); opacity:0; filter:blur(6px);
  pointer-events:none; transition:opacity .3s; z-index:-1;
}
.color-picker-row:focus-within .color-thumb-glow { opacity:0.3; }
.hex-text-input {
  flex:1; background:none; border:none; outline:none;
  font-family:'DM Mono',monospace; font-size:.78rem;
  font-weight:500; color:var(--t1); letter-spacing:.04em;
}

/* Select */
.ctrl-select {
  width:100%; padding:8px 10px;
  background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--r-md); color:var(--t1);
  font-family:'DM Sans',sans-serif; font-size:.8rem; font-weight:500;
  cursor:pointer; outline:none; transition:var(--tb); appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a97aa' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center;
}
.ctrl-select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }

/* Mood chips */
.mood-chips { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.mood-chip {
  padding:7px 6px; background:var(--surface-1);
  border:1px solid var(--border); border-radius:var(--r-sm);
  font-family:'DM Sans',sans-serif; font-size:.73rem; font-weight:600;
  color:var(--t2); cursor:pointer; transition:var(--tb); text-align:center;
}
.mood-chip:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.mood-chip.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); font-weight:750; }

/* CTA buttons */
.cta-group { display:flex; flex-direction:column; gap:7px; margin-top:2px; }
.cta-generate {
  width:100%; display:flex; align-items:center; justify-content:center;
  gap:7px; padding:10px 14px;
  background:var(--accent); color:#fff;
  border:none; border-radius:var(--r-md);
  font-family:'DM Sans',sans-serif; font-size:.82rem; font-weight:750;
  cursor:pointer; transition:var(--tb);
  box-shadow:var(--sh-accent); letter-spacing:-.1px;
  position:relative; overflow:hidden;
}
.cta-generate:hover {
  background:color-mix(in srgb,var(--accent) 88%,black);
  transform:translateY(-1px);
  box-shadow:0 12px 32px -4px var(--accent-glow);
}
.cta-generate:active { transform:translateY(0); }
.cta-generate svg { width:14px; height:14px; }
.kbd-hint {
  margin-left:auto; font-family:'DM Mono',monospace; font-size:.62rem;
  background:rgba(255,255,255,0.18); border-radius:4px; padding:2px 5px;
  letter-spacing:0;
}
.cta-utility {
  width:100%; display:flex; align-items:center; justify-content:center;
  gap:7px; padding:9px 14px;
  background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--r-md); font-family:'DM Sans',sans-serif;
  font-size:.8rem; font-weight:600; color:var(--t2);
  cursor:pointer; transition:var(--tb);
}
.cta-utility:hover { background:var(--surface-2); color:var(--t1); border-color:var(--border-md); }
.cta-utility svg { width:13px; height:13px; }

/* Misc sidebar */
.label-val-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.val-chip {
  background:var(--accent-dim); color:var(--accent);
  padding:1px 7px; border-radius:5px;
  font-size:.67rem; font-weight:750; font-family:'DM Mono',monospace;
}
.range-slider {
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; background:var(--border-md);
  border-radius:var(--r-full); outline:none; cursor:pointer;
  margin:8px 0 4px;
}
.range-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:15px; height:15px;
  background:var(--surface-0); border:2px solid var(--accent);
  border-radius:50%; cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.1);
  transition:var(--tf);
}
.range-slider::-webkit-slider-thumb:hover { transform:scale(1.25); box-shadow:0 0 0 4px var(--accent-dim); }

.btn-col { display:flex; flex-direction:column; gap:6px; margin-top:4px; }

/* iOS toggle */
.ios-toggle { position:relative; display:inline-block; cursor:pointer; }
.ios-toggle input { display:none; }
.ios-track {
  display:block; width:34px; height:19px;
  background:var(--border-md); border-radius:var(--r-full);
  transition:var(--ts); position:relative;
}
.ios-thumb {
  position:absolute; width:13px; height:13px;
  background:white; border-radius:50%;
  top:3px; left:3px; transition:var(--ts);
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.ios-toggle input:checked + .ios-track { background:var(--accent); }
.ios-toggle input:checked + .ios-track .ios-thumb { transform:translateX(15px); }

.sidebar-sep { height:1px; background:var(--border); margin:8px 0; }
.history-stack { display:flex; flex-direction:column; gap:4px; }
.empty-hint { font-size:.72rem; color:var(--t3); padding:4px 8px; font-style:italic; }
.history-entry {
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border-radius:var(--r-sm);
  cursor:pointer; transition:var(--tf); border:1px solid transparent;
}
.history-entry:hover { background:var(--surface-1); border-color:var(--border); }
.hist-strip {
  display:flex; height:18px; border-radius:4px; overflow:hidden; flex:1;
  border:1px solid var(--border);
}
.hist-strip span { flex:1; }
.hist-hex { font-size:.65rem; color:var(--t3); font-family:'DM Mono',monospace; flex-shrink:0; }
.sidebar-footer { padding:10px 8px 12px; margin-top:auto; }
.kbd-row { font-size:.68rem; color:var(--t3); display:flex; align-items:center; gap:5px; }
kbd {
  background:var(--surface-2); border:1px solid var(--border-md);
  border-radius:4px; padding:1px 6px;
  font-family:'DM Mono',monospace; font-size:.65rem; color:var(--t2);
}


/* ══════════════════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════════════════ */

main.content {
  flex:1; min-width:0;
  padding:22px 24px 48px;
  overflow-y:auto;
  display:flex; flex-direction:column; gap:18px;
}

.tool-view { animation:fadeUp .35s cubic-bezier(.22,1,.36,1) both; }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(14px); }
  to { opacity:1; transform:translateY(0); }
}


/* ══════════════════════════════════════════════════
   COLOR HERO — The dominant focal element
══════════════════════════════════════════════════ */

.color-hero {
  position:relative; overflow:hidden;
  border-radius:var(--r-2xl);
  background:var(--surface-0);
  border:1px solid var(--border);
  box-shadow:var(--sh-lg);
  padding:28px 28px 0;
  min-height:220px;
}

.hero-bg-orb {
  position:absolute; width:480px; height:480px;
  border-radius:50%;
  background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);
  top:-160px; right:-80px;
  pointer-events:none;
  transition:background 0.7s ease;
  animation:orbFloat 6s ease-in-out infinite;
}
@keyframes orbFloat {
  0%,100% { transform:translateY(0) scale(1); }
  50% { transform:translateY(-20px) scale(1.04); }
}

.hero-content {
  position:relative; z-index:1;
  display:flex; align-items:flex-start;
  justify-content:space-between; gap:24px;
  flex-wrap:wrap;
}

.hero-left { display:flex; flex-direction:column; gap:10px; min-width:200px; }

.hero-color-chip {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--r-full); padding:5px 12px 5px 7px;
  width:fit-content; transition:var(--tb);
}
.hero-color-dot {
  width:16px; height:16px; border-radius:50%;
  background:var(--accent); flex-shrink:0;
  box-shadow:0 0 0 3px var(--accent-dim);
  transition:background .4s ease, box-shadow .4s ease;
}
.hero-color-chip span { font-family:'DM Mono',monospace; font-size:.78rem; font-weight:500; color:var(--t1); }
.hero-sep { color:var(--t3)!important; }

.hero-hsl-row { font-size:.75rem; color:var(--t3); letter-spacing:-.1px; transition:var(--tb); }

.hero-actions { display:flex; gap:8px; margin-top:4px; }
.hero-btn-sec, .hero-btn-pri {
  display:flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:var(--r-md);
  font-family:'DM Sans',sans-serif; font-size:.78rem; font-weight:700;
  cursor:pointer; transition:var(--tb); border:none;
  letter-spacing:-.1px;
}
.hero-btn-sec {
  background:var(--surface-1); border:1px solid var(--border);
  color:var(--t2);
}
.hero-btn-sec:hover { background:var(--surface-2); color:var(--t1); }
.hero-btn-pri {
  background:var(--accent); color:#fff;
  box-shadow:var(--sh-accent);
}
.hero-btn-pri:hover {
  background:color-mix(in srgb,var(--accent) 88%,black);
  transform:translateY(-1px);
}
.hero-btn-pri svg,.hero-btn-sec svg { width:13px; height:13px; }

/* Gradient trio */
.hero-gradient-trio {
  display:flex; gap:10px; flex-shrink:0;
  align-self:flex-start; margin-top:4px;
}
.hgt-card {
  width:90px; height:90px; border-radius:var(--r-lg);
  cursor:pointer; transition:var(--ts);
  position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,0.15);
  box-shadow:var(--sh-md);
}
.hgt-card:hover { transform:translateY(-3px) scale(1.03); box-shadow:var(--sh-lg); }
.hgt-tag {
  position:absolute; bottom:7px; left:50%; transform:translateX(-50%);
  font-size:.6rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,0.9); background:rgba(0,0,0,0.2);
  padding:2px 7px; border-radius:var(--r-full); white-space:nowrap;
  backdrop-filter:blur(4px);
}

/* Palette scale strip */
.palette-scale-wrap {
  margin-top:24px; margin-left:-28px; margin-right:-28px;
}

.palette-scale-row {
  display:grid; grid-template-columns:repeat(11,1fr);
  height:72px; transition:var(--tb);
}
.swatch {
  position:relative; cursor:pointer;
  display:flex; flex-direction:column;
  align-items:center; justify-content:space-between;
  padding: 10px 4px 8px 4px; overflow:hidden;
  transition:flex .22s cubic-bezier(.22,1,.36,1);
}
.swatch:hover { flex:1.8; }
.swatch::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,0.15) 0%,transparent 40%);
  pointer-events:none; opacity:0; transition:opacity .2s;
}
.swatch:hover::after { opacity:1; }
.swatch-hex-label {
  font-size:.58rem; font-weight:750; font-family:'DM Mono',monospace;
  opacity:0; transform:translateY(4px); transition:var(--tf);
  letter-spacing:.02em; position:relative; z-index:1; text-align:center;
  margin-top: auto;
}
.swatch:hover .swatch-hex-label { opacity:1; transform:translateY(0); }

/* Swatch hover actions */
.swatch-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(-4px);
  transition: all var(--tf);
  z-index: 10;
  width: 90%;
}
.swatch:hover .swatch-actions {
  opacity: 1;
  transform: translateY(0);
}
.swatch-action-btn {
  font-size: 0.54rem;
  font-weight: 800;
  padding: 3px 0;
  border-radius: 4px;
  border: 1px solid;
  cursor: pointer;
  text-align: center;
  transition: all var(--tf);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.swatch-action-btn:hover {
  background: rgba(255, 255, 255, 0.35) !important;
}
.swatch-action-btn.toggle-lock svg {
  width: 9px;
  height: 9px;
}
.swatch-action-btn.toggle-lock.locked {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

.shade-numbers-row {
  display:grid; grid-template-columns:repeat(11,1fr);
  height:22px; background:var(--surface-1);
  border-top:1px solid var(--border);
}
.shade-num-cell {
  display:flex; align-items:center; justify-content:center;
  font-size:.6rem; font-weight:600; color:var(--t3);
  letter-spacing:-.1px; font-family:'DM Mono',monospace;
  cursor:pointer; transition:var(--tf);
}
.shade-num-cell:hover { color:var(--accent); }

/* Swatch animate on generate */
.palette-scale-row.animating .swatch {
  animation:swatchReveal .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes swatchReveal {
  from { opacity:0; transform:scaleY(.5); }
  to { opacity:1; transform:scaleY(1); }
}


/* ══════════════════════════════════════════════════
   BENTO GRID
══════════════════════════════════════════════════ */

.bento-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:auto;
  gap:14px;
}

/* Large card spans 2 cols */
.bento-large {
  grid-column:span 2;
}

.bento-card {
  background:var(--surface-0); border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-sm);
  overflow:hidden;
  transition:border-color var(--tb), box-shadow var(--tb), transform var(--tb);
}
.hover-card:hover {
  border-color:var(--border-md);
  transform:translateY(-2px);
  box-shadow:var(--sh-md);
}

.bento-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 10px;
  border-bottom:1px solid var(--border);
}
.bento-label {
  display:flex; align-items:center; gap:6px;
  font-size:.68rem; font-weight:750;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--t3);
}
.bento-label svg { width:12px; height:12px; }

.bento-action {
  width:26px; height:26px; border-radius:7px;
  background:var(--surface-1); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--t2); transition:var(--tf);
}
.bento-action:hover { background:var(--accent-dim); color:var(--accent); border-color:var(--accent); }
.bento-action svg { width:12px; height:12px; }

.live-dot-badge {
  display:flex; align-items:center; gap:5px;
  font-size:.6rem; font-weight:800; letter-spacing:.06em;
  color:#22c55e; padding:2px 8px; border-radius:var(--r-full);
  background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.2);
}
.live-dot-pulse {
  width:6px; height:6px; border-radius:50%;
  background:#22c55e;
  animation:livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:.5; transform:scale(0.7); }
}


/* ── FAKE WINDOW (Live UI Preview) ── */
.fake-window-wrap { padding:0 16px 16px; }
.fw-chrome {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px 7px;
  background:var(--surface-2); border-radius:var(--r-md) var(--r-md) 0 0;
  border:1px solid var(--border); border-bottom:none;
}
.fw-dot {
  width:9px; height:9px; border-radius:50%;
}
.fw-red { background:#ff5f57; }
.fw-yellow { background:#febc2e; }
.fw-green { background:#28c840; }
.fw-url {
  flex:1; text-align:center;
  font-size:.68rem; color:var(--t3);
  font-family:'DM Mono',monospace;
}
.fw-body {
  display:flex; height:180px;
  background:var(--surface-1);
  border:1px solid var(--border); border-top:none;
  border-radius:0 0 var(--r-md) var(--r-md);
  overflow:hidden;
}
.fw-sidenav {
  width:44px; background:var(--surface-0);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  align-items:center; padding:10px 0; gap:6px; flex-shrink:0;
}
.fw-logo {
  width:22px; height:22px; border-radius:6px;
  background:var(--accent);
  margin-bottom:6px;
  transition:background .4s;
}
.fw-nav-items { display:flex; flex-direction:column; gap:3px; }
.fw-nav-item {
  width:28px; height:28px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  color:var(--t3); cursor:pointer; transition:var(--tf);
}
.fw-nav-item svg { width:13px; height:13px; }
.fw-nav-item:hover { background:var(--surface-2); color:var(--t2); }
.fw-nav-active { background:var(--accent-dim)!important; color:var(--accent)!important; }
.fw-main { flex:1; padding:10px 12px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.fw-stats-row { display:flex; gap:7px; }
.fw-stat-card {
  flex:1; padding:7px 9px;
  background:var(--surface-0); border:1px solid var(--border);
  border-radius:var(--r-md);
}
.fw-stat-accent {
  background:var(--accent)!important;
  border-color:transparent!important;
  transition:background .4s;
}
.fw-stat-accent .fw-stat-val, .fw-stat-accent .fw-stat-lbl { color:#fff!important; }
.fw-stat-val { font-size:.75rem; font-weight:800; color:var(--t1); letter-spacing:-.3px; }
.fw-stat-lbl { font-size:.58rem; color:var(--t3); margin-top:1px; }
.fw-chart-zone {
  flex:1; background:var(--surface-0);
  border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden;
}
.fw-chart-svg { width:100%; height:100%; display:block; }
.fw-btn-row { display:flex; gap:6px; }
.fw-btn-pri {
  padding:5px 12px;
  background:var(--accent); color:#fff;
  border:none; border-radius:var(--r-sm);
  font-family:'DM Sans',sans-serif;
  font-size:.68rem; font-weight:700; cursor:pointer;
  transition:var(--tb);
}
.fw-btn-pri:hover { background:color-mix(in srgb,var(--accent) 88%,black); }
.fw-btn-ghost {
  padding:5px 12px; background:transparent;
  border:1px solid var(--border); border-radius:var(--r-sm);
  font-family:'DM Sans',sans-serif;
  font-size:.68rem; font-weight:600; color:var(--t2); cursor:pointer;
  transition:var(--tf);
}
.fw-btn-ghost:hover { background:var(--surface-2); }


/* ── BUTTONS SHOWCASE ── */
.btn-showcase {
  padding:14px 16px;
  display:flex; flex-direction:column; gap:7px;
}
.sc-btn {
  width:100%; padding:8px 14px;
  border-radius:var(--r-md);
  font-family:'DM Sans',sans-serif;
  font-size:.8rem; font-weight:700; cursor:pointer;
  transition:var(--tb); border:none;
  display:flex; align-items:center; justify-content:center;
}
.sc-solid { background:var(--accent); color:#fff; box-shadow:var(--sh-accent); }
.sc-solid:hover { background:color-mix(in srgb,var(--accent) 88%,black); transform:translateY(-1px); }
.sc-tint { background:var(--accent-dim); color:var(--accent); }
.sc-tint:hover { background:var(--accent-dim2); }
.sc-outline { background:transparent; color:var(--accent); border:1.5px solid var(--accent)!important; }
.sc-outline:hover { background:var(--accent-dim); }
.sc-ghost { background:transparent; color:var(--t2); border:1px solid var(--border)!important; }
.sc-ghost:hover { background:var(--surface-2); color:var(--t1); }
.sc-icon-row { display:flex; gap:7px; }
.sc-icon-btn {
  flex:1; height:32px;
  border-radius:var(--r-md); border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:var(--tb);
}
.sc-icon-btn svg { width:14px; height:14px; }


/* ── GRADIENT STUDIO ── */
.grad-studio { padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.grad-preview-live {
  height:100px; border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  transition:background .4s ease;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:var(--sh-sm);
}
.grad-ctrl-row { display:flex; align-items:center; gap:8px; }
.grad-code-row {
  display:flex; align-items:center; gap:8px;
  background:var(--surface-2); border-radius:var(--r-md);
  padding:8px 10px; border:1px solid var(--border);
}
.grad-code-text {
  flex:1; font-family:'DM Mono',monospace; font-size:.68rem;
  color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.copy-mini-btn {
  width:24px; height:24px; border-radius:6px;
  background:var(--surface-0); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--t2); transition:var(--tf); flex-shrink:0;
}
.copy-mini-btn:hover { background:var(--accent-dim); color:var(--accent); border-color:var(--accent); }
.copy-mini-btn svg { width:11px; height:11px; }


/* ── TYPOGRAPHY ── */
.type-showcase { padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.type-on-color-row { display:flex; gap:12px; align-items:center; }
.type-color-swatch {
  width:56px; height:56px; border-radius:var(--r-md); flex-shrink:0;
  background:var(--accent); display:flex; align-items:center; justify-content:center;
  transition:background .4s; box-shadow:var(--sh-accent);
}
.type-swatch-text { font-size:1.4rem; font-weight:800; color:#fff; }
.type-text-block { flex:1; min-width:0; }
.type-heading { font-size:.88rem; font-weight:800; letter-spacing:-.3px; color:var(--accent); transition:color .4s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.type-body-txt { font-size:.72rem; color:var(--t2); margin-top:3px; line-height:1.4; }
.type-badges { display:flex; gap:5px; flex-wrap:wrap; }
.type-badge {
  font-size:.65rem; font-weight:750; letter-spacing:.04em;
  padding:3px 9px; border-radius:var(--r-full); cursor:default;
}
.tb-solid { background:var(--accent); color:#fff; transition:background .4s; }
.tb-success { background:rgba(34,197,94,.1); color:#16a34a; border:1px solid rgba(34,197,94,.2); }
.tb-warn { background:rgba(245,158,11,.1); color:#d97706; border:1px solid rgba(245,158,11,.2); }
.tb-danger { background:rgba(239,68,68,.1); color:#dc2626; border:1px solid rgba(239,68,68,.2); }
[data-theme="dark"] .tb-success { color:#4ade80; }
[data-theme="dark"] .tb-warn { color:#fbbf24; }
[data-theme="dark"] .tb-danger { color:#f87171; }


/* ── FORM SHOWCASE ── */
.form-showcase { padding:14px 16px; display:flex; flex-direction:column; gap:9px; }
.fs-field { display:flex; flex-direction:column; gap:4px; }
.fs-label { font-size:.68rem; font-weight:700; color:var(--t3); letter-spacing:.03em; text-transform:uppercase; }
.fs-input-row {
  display:flex; align-items:center; gap:7px;
  padding:8px 10px; background:var(--surface-1);
  border:1.5px solid var(--border); border-radius:var(--r-md);
  transition:var(--tb);
}
.fs-focused { border-color:var(--accent)!important; box-shadow:0 0 0 3px var(--accent-dim); background:var(--surface-0)!important; }
.fs-icon { width:13px; height:13px; color:var(--t3); flex-shrink:0; }
.fs-focused .fs-icon { color:var(--accent); }
.fs-input { flex:1; background:none; border:none; outline:none; font-family:'DM Sans',sans-serif; font-size:.78rem; color:var(--t1); }
.fs-toggle-row { display:flex; align-items:center; justify-content:space-between; }
.fs-submit {
  padding:9px 14px; background:var(--accent); color:#fff;
  border:none; border-radius:var(--r-md);
  font-family:'DM Sans',sans-serif; font-size:.8rem; font-weight:750;
  cursor:pointer; transition:var(--tb); box-shadow:var(--sh-accent);
  margin-top:2px;
}
.fs-submit:hover { background:color-mix(in srgb,var(--accent) 88%,black); transform:translateY(-1px); }


/* ── ACCESSIBILITY ── */
.a11y-body { padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.a11y-top-row { display:flex; align-items:center; justify-content:space-between; }
.a11y-ratio-num {
  font-size:1.9rem; font-weight:800; letter-spacing:-1.5px;
  color:var(--t1); font-family:'DM Mono',monospace; line-height:1;
}
.a11y-text-samples { display:flex; gap:6px; }
.a11y-sample-light, .a11y-sample-on-color {
  width:36px; height:36px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.9rem; transition:all .4s;
}
.a11y-sample-light { background:var(--surface-2); color:var(--accent); border:1px solid var(--border); }
.a11y-sample-on-color { background:var(--accent); color:#fff; }

.a11y-track {
  position:relative; height:8px;
  border-radius:var(--r-full); overflow:visible;
  background:var(--surface-2);
}
.a11y-gradient-fill {
  position:absolute; inset:0;
  background:linear-gradient(to right,#ef4444 0%,#f59e0b 28%,#22c55e 52%,var(--accent) 80%,var(--accent-2) 100%);
  border-radius:var(--r-full); opacity:.3;
}
.a11y-marker-dot {
  position:absolute; width:16px; height:16px;
  background:var(--surface-0); border:2.5px solid var(--accent);
  border-radius:50%; top:50%; transform:translateY(-50%);
  box-shadow:var(--sh-sm); left:60%;
  transition:left .5s cubic-bezier(.22,1,.36,1), border-color .4s;
  z-index:1;
}
.a11y-tick-labels { display:flex; justify-content:space-between; font-size:.62rem; color:var(--t3); }
.status-pill {
  font-size:.6rem; font-weight:800; letter-spacing:.06em;
  padding:2px 8px; border-radius:var(--r-full);
}
.pill-pass { background:rgba(34,197,94,.1); color:#16a34a; border:1px solid rgba(34,197,94,.25); }
.pill-ui { background:rgba(245,158,11,.1); color:#d97706; border:1px solid rgba(245,158,11,.25); }
.pill-fail { background:rgba(239,68,68,.1); color:#dc2626; border:1px solid rgba(239,68,68,.25); }
[data-theme="dark"] .pill-pass { color:#4ade80; }
[data-theme="dark"] .pill-ui { color:#fbbf24; }
[data-theme="dark"] .pill-fail { color:#f87171; }


/* ── COLOR SPECS ── */
.specs-list { padding:10px 16px 16px; display:flex; flex-direction:column; gap:7px; }
.spec-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; background:var(--surface-1);
  border:1px solid var(--border); border-radius:var(--r-md);
  cursor:pointer; transition:var(--tb);
}
.spec-item:hover { background:var(--accent-dim); border-color:var(--accent); }
.spec-color-preview {
  width:28px; height:28px; border-radius:7px;
  background:var(--accent); flex-shrink:0;
  transition:background .4s; border:2px solid var(--border-md);
}
.spec-format-icon {
  width:28px; height:28px; border-radius:7px;
  background:var(--accent-dim); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-family:'DM Mono',monospace; font-size:.58rem; font-weight:750;
  flex-shrink:0; border:1px solid var(--accent-dim2);
  transition:background .4s, color .4s;
}
.spec-data { flex:1; min-width:0; }
.spec-type { display:block; font-size:.62rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:var(--t3); }
.spec-value { display:block; font-family:'DM Mono',monospace; font-size:.8rem; font-weight:500; color:var(--t1); }
.spec-copy { width:13px; height:13px; color:var(--t3); flex-shrink:0; transition:var(--tf); }
.spec-item:hover .spec-copy { color:var(--accent); }


/* ── WIDGET PREVIEW ── */
.widget-preview { padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.wp-top-row { display:flex; align-items:flex-start; justify-content:space-between; }
.wp-kpi-block {}
.wp-val { font-size:1.8rem; font-weight:800; letter-spacing:-1.5px; color:var(--t1); line-height:1; }
.wp-lbl { font-size:.72rem; color:var(--t3); margin-top:2px; }
.wp-trend {
  font-size:.72rem; font-weight:750; color:#22c55e;
  background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.2);
  padding:3px 9px; border-radius:var(--r-full);
}
.wp-progress-wrap { display:flex; align-items:center; gap:8px; }
.wp-progress-track { flex:1; height:6px; background:var(--surface-2); border-radius:var(--r-full); overflow:hidden; }
.wp-progress-bar {
  height:100%; width:72%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:var(--r-full);
  transition:background .5s ease, width .6s cubic-bezier(.22,1,.36,1);
}
.wp-pct { font-size:.7rem; font-weight:700; color:var(--t3); font-family:'DM Mono',monospace; }
.wp-sparkline { width:100%; height:40px; overflow:visible; }


/* ══════════════════════════════════════════════════
   SHADOW WORKSPACE
══════════════════════════════════════════════════ */

.sw-canvas {
  height:340px; display:flex; align-items:center; justify-content:center;
  transition:background .3s;
}
.sw-canvas.bg-light { background:#f4f5f7; }
.sw-canvas.bg-dark { background:#08090f; }
.sw-canvas.bg-grid {
  background:#f4f5f7;
  background-image:radial-gradient(rgba(0,0,0,0.07) 1.5px,transparent 1.5px);
  background-size:24px 24px;
}
[data-theme="dark"] .sw-canvas.bg-grid { background-color:#08090f; background-image:radial-gradient(rgba(255,255,255,0.06) 1.5px,transparent 1.5px); }

.sw-box {
  width:160px; height:160px; background:var(--surface-0);
  border-radius:18px; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.8rem; color:var(--t2);
  border:1px solid var(--border); transition:box-shadow .2s ease;
  box-shadow:var(--sh-inset,'') var(--sh-x,0px) var(--sh-y,20px) var(--sh-blur,40px) var(--sh-spread,-10px) var(--sh-color,rgba(0,0,0,0.2));
}

.sh-code-block {
  background:var(--surface-2); padding:10px 14px; border-radius:var(--r-md);
  border-left:3px solid var(--accent); overflow-x:auto;
}
.sh-code-block code {
  font-family:'DM Mono',monospace; font-size:.75rem; color:var(--t2);
  white-space:nowrap;
}


/* ══════════════════════════════════════════════════
   EXPORT MODAL
══════════════════════════════════════════════════ */

.modal-overlay {
  position:fixed; inset:0;
  background:rgba(8,9,15,0.65); backdrop-filter:blur(8px);
  z-index:1200; opacity:0; pointer-events:none; transition:opacity .25s;
}
.modal-overlay.active { opacity:1; pointer-events:all; }

.modal {
  position:fixed; top:50%; left:50%;
  transform:translate(-50%,-46%) scale(.96);
  width:520px; max-width:calc(100vw - 40px);
  background:var(--surface-0); border:1px solid var(--border);
  border-radius:var(--r-2xl); box-shadow:var(--sh-xl);
  z-index:1300; opacity:0; pointer-events:none; overflow:hidden;
  transition:all .3s cubic-bezier(.22,1,.36,1);
}
.modal.active { opacity:1; pointer-events:all; transform:translate(-50%,-50%) scale(1); }

.modal-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:20px 22px; border-bottom:1px solid var(--border);
}
.modal-header h3 { font-size:.96rem; font-weight:750; letter-spacing:-.3px; }
.modal-sub { font-size:.72rem; color:var(--t3); margin-top:2px; }
.modal-close {
  width:28px; height:28px; border-radius:var(--r-sm);
  background:var(--surface-2); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--t2); transition:var(--tf); flex-shrink:0;
}
.modal-close:hover { background:var(--border-md); color:var(--t1); }
.modal-close svg { width:13px; height:13px; }

.modal-tabs {
  display:flex; gap:4px; padding:12px 22px;
  border-bottom:1px solid var(--border);
}
.exp-tab {
  padding:6px 13px; background:transparent;
  border:1px solid var(--border); border-radius:var(--r-md);
  font-family:'DM Sans',sans-serif; font-size:.76rem; font-weight:700;
  color:var(--t2); cursor:pointer; transition:var(--tf);
}
.exp-tab:hover { background:var(--surface-1); color:var(--t1); }
.exp-tab.active { background:var(--accent); border-color:var(--accent); color:#fff; }

.modal-body { padding:18px 22px; }
.modal-code-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.code-lang-label { font-size:.68rem; font-weight:750; color:var(--t3); text-transform:uppercase; letter-spacing:.06em; }
.copy-code-btn {
  display:flex; align-items:center; gap:5px;
  padding:5px 11px; background:var(--surface-1);
  border:1px solid var(--border); border-radius:var(--r-sm);
  font-family:'DM Sans',sans-serif; font-size:.7rem; font-weight:700;
  color:var(--t2); cursor:pointer; transition:var(--tf);
}
.copy-code-btn:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
.copy-code-btn svg { width:11px; height:11px; }
.code-scroll-box {
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden; max-height:300px; overflow-y:auto;
}
.code-pre {
  padding:14px 16px; margin:0;
  font-family:'DM Mono',monospace; font-size:.74rem; line-height:1.7;
  color:var(--t2); white-space:pre; overflow-x:auto;
}


/* ══════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════ */

.toast {
  position:fixed; bottom:24px; right:24px;
  background:var(--surface-0); border:1px solid var(--border-md);
  border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  min-width:190px; z-index:9000;
  opacity:0; pointer-events:none;
  transform:translateY(10px) scale(.95);
  transition:all .3s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
}
.toast.show { opacity:1; pointer-events:all; transform:translateY(0) scale(1); }
.toast-inner {
  display:flex; align-items:center; gap:9px;
  padding:11px 14px;
  font-size:.82rem; font-weight:700; color:var(--t1);
}
.toast-icon-wrap {
  width:22px; height:22px; border-radius:50%;
  background:rgba(34,197,94,.15);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.toast-icon-wrap svg { width:12px; height:12px; color:#22c55e; }
.toast-bar {
  position:absolute; bottom:0; left:0; height:3px;
  background:var(--accent); width:100%; transform-origin:left;
  border-radius:0 0 var(--r-lg) var(--r-lg);
  transition:background .4s;
}

/* Ripple */
.ripple { position:relative; overflow:hidden; }
.ripple-wave {
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,0.28); transform:scale(0);
  animation:rippleAnim .55s linear;
  pointer-events:none;
}
@keyframes rippleAnim { to { transform:scale(4); opacity:0; } }


/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */

@media (max-width:1080px) {
  .app-container { display:block; }
  .sidebar { width:100%!important; height:auto!important; position:relative!important; top:0!important; border-right:none!important; border-bottom:1px solid var(--border)!important; }
  main.content { padding:18px; }
  .bento-grid { grid-template-columns:1fr 1fr; }
  .bento-large { grid-column:span 2; }
  .hero-gradient-trio { display:none; }
}

@media (max-width:720px) {
  .bento-grid { grid-template-columns:1fr; }
  .bento-large { grid-column:span 1; }
  .nav-menu { display:none; }
  main.content { padding:14px; }
  .color-hero { padding:20px 20px 0; }
  .palette-scale-wrap { margin-left:-20px; margin-right:-20px; }
}

/* ══════════════════════════════════════════════════
   HUECRAFT SUITE ADDITIONS
   Home, Search, A11y Checker, Converters, & Router
   ══════════════════════════════════════════════════ */

/* Shell visibility overrides */
.app-container.sidebar-hidden .sidebar {
  display: none !important;
}

/* Top Nav Search Trigger */
.nav-search-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px 12px;
  cursor: pointer;
  transition: var(--tb);
}
.nav-search-wrapper:hover {
  background: var(--surface-1);
  border-color: var(--border-md);
}
.nav-search-wrapper .search-icon {
  width: 13px;
  height: 13px;
  color: var(--t3);
}
.nav-search-wrapper .search-placeholder {
  font-size: 0.78rem;
  color: var(--t3);
  user-select: none;
}
.nav-search-wrapper .search-kbd {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  background: var(--surface-0);
  border: 1px solid var(--border-md);
  border-radius: 4px;
  padding: 1px 4px;
  color: var(--t2);
  margin-left: 6px;
  text-transform: uppercase;
}

/* Landing Page Hero */
/* ─── NEW SAAS HERO SECTION ─── */
.hero-section-new {
  position: relative;
  border-radius: var(--r-2xl);
  background: var(--surface-0);
  border: 1px solid var(--border);
  box-shadow: var(--sh-lg);
  overflow: visible;
  margin-bottom: 24px;
  padding: 40px 32px;
}
.hero-glow {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* Left Column */
.hero-left-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.hero-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--accent-dim2);
}
.hero-badge svg {
  width: 12px;
  height: 12px;
}
.hero-title-new {
  font-size: 2.6rem;
  font-weight: 850;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 14px;
  color: var(--t1);
}
.text-gradient-new {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-subtitle-new {
  font-size: 0.92rem;
  color: var(--t2);
  line-height: 1.55;
  margin-bottom: 24px;
  max-width: 460px;
}
.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--r-full);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 750;
  cursor: pointer;
  transition: var(--tb);
  border: none;
}
.hero-btn svg {
  width: 14px;
  height: 14px;
}
.hero-btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-mid) 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px -2px var(--accent-glow);
}
.hero-btn-primary:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px -2px var(--accent-glow);
}
.hero-btn-secondary {
  background: var(--surface-1);
  border: 1px solid var(--border-md);
  color: var(--t1);
}
.hero-btn-secondary:hover {
  background: var(--surface-2);
  transform: translateY(-1.5px);
}
.hero-search-trigger-new {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  background: var(--surface-1);
  border: 1px solid var(--border-md);
  border-radius: var(--r-lg);
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: var(--sh-xs);
  transition: var(--tb);
}
.hero-search-trigger-new:hover {
  border-color: var(--accent);
  background: var(--surface-0);
  box-shadow: 0 4px 12px -2px var(--accent-glow);
}
.hero-search-trigger-new svg {
  width: 14px;
  height: 14px;
  color: var(--t3);
}
.hero-search-trigger-new .search-placeholder {
  font-size: 0.78rem;
  color: var(--t3);
  flex: 1;
}
.hero-search-trigger-new kbd {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  background: var(--surface-0);
  border: 1px solid var(--border-md);
  border-radius: 4px;
  padding: 1px 4px;
  color: var(--t2);
}

/* Right Column & Dashboard Mockup */
.hero-right-col {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mockup-container {
  position: relative;
  width: 100%;
  max-width: 440px;
}

/* Floating UI Cards with Animations */
.floating-card {
  position: absolute;
  background: color-mix(in srgb, var(--surface-0) 80%, transparent);
  border: 1px solid var(--border-md);
  border-radius: var(--r-md);
  padding: 8px 12px;
  box-shadow: var(--sh-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10;
  pointer-events: none;
  font-size: 0.72rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.floating-card-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: var(--t3);
  font-weight: 750;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Animation floats */
@keyframes floatY {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

.card-palette {
  top: -15px;
  left: -25px;
  width: 120px;
  animation: floatY 6s ease-in-out infinite;
}
.floating-palette-strip {
  display: flex;
  height: 14px;
  border-radius: 4px;
  overflow: hidden;
}
.floating-palette-strip span {
  flex: 1;
}

.card-a11y {
  bottom: 25px;
  left: -35px;
  width: 110px;
  animation: floatY 5s ease-in-out infinite 1s;
}
.floating-a11y-score {
  font-size: 1.1rem;
  font-weight: 850;
  color: #22c55e;
}

.card-css {
  top: -30px;
  right: -15px;
  width: 155px;
  animation: floatY 7s ease-in-out infinite 0.5s;
}
.floating-css-code {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  background: var(--surface-1);
  padding: 4px;
  border-radius: 4px;
  color: var(--t2);
  white-space: pre-wrap;
  word-break: break-all;
}

.card-gradient {
  bottom: -15px;
  right: -20px;
  width: 100px;
  animation: floatY 6s ease-in-out infinite 1.5s;
}
.floating-grad-ball {
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

/* Dashboard Mockup Layout */
.dashboard-window {
  width: 100%;
  background: var(--surface-0);
  border: 1px solid var(--border-md);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.window-chrome {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chrome-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.dot-red { background: #ef4444; }
.dot-yellow { background: #eab308; }
.dot-green { background: #22c55e; }
.window-url {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  color: var(--t3);
  margin-left: auto;
  margin-right: auto;
  background: var(--surface-0);
  padding: 2px 20px;
  border-radius: 4px;
  border: 1px solid var(--border);
  user-select: none;
}
.window-body {
  display: flex;
  height: 230px;
}

/* Mockup Sidebar */
.window-sidebar {
  width: 115px;
  background: var(--surface-1);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 4px;
  flex-shrink: 0;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--t2);
  cursor: pointer;
  transition: var(--tf);
}
.sidebar-item svg {
  width: 11px;
  height: 11px;
}
.sidebar-item:hover {
  background: var(--surface-2);
  color: var(--t1);
}
.sidebar-item.active {
  background: var(--accent-dim);
  color: var(--accent);
}

/* Mockup Viewport Content */
.window-content {
  flex: 1;
  padding: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tab-content {
  display: none;
  height: 100%;
  flex-direction: column;
}
.tab-content.active {
  display: flex;
}
.mockup-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.mockup-section-title {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--t1);
}
.mockup-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-1);
  border: 1px solid var(--border-md);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  font-size: 0.62rem;
  font-weight: 750;
  color: var(--t2);
  cursor: pointer;
  transition: var(--tf);
}
.mockup-action-btn:hover {
  background: var(--surface-2);
  color: var(--t1);
}
.mockup-action-btn svg {
  width: 10px;
  height: 10px;
}

/* Mockup Widget: Palette */
.mockup-palette-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: auto;
  margin-bottom: auto;
}
.mockup-palette-color {
  height: 80px;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 4px;
  cursor: pointer;
  transition: var(--tb);
}
.mockup-palette-color:hover {
  transform: scale(1.04);
}
.mockup-palette-color span {
  font-family: 'DM Mono', monospace;
  font-size: 0.52rem;
  font-weight: 750;
  text-align: center;
  background: rgba(0,0,0,0.15);
  color: #ffffff;
  padding: 1px;
  border-radius: 2px;
  overflow: hidden;
}

/* Mockup Widget: Contrast Analyzer */
.mockup-a11y-flex {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}
.mockup-a11y-preview {
  flex: 1;
  height: 60px;
  border-radius: 6px;
  border: 1px solid var(--border-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  transition: background 0.3s, color 0.3s;
}
.mockup-a11y-preview span {
  font-size: 0.72rem;
  font-weight: 750;
  text-align: center;
}
.mockup-a11y-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.mockup-a11y-score-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--accent-dim);
}
.mockup-a11y-score-circle .score-val {
  font-size: 0.72rem;
  font-weight: 850;
  color: var(--accent);
}
.mockup-a11y-score-circle .score-lbl {
  font-size: 0.45rem;
  color: var(--t3);
  text-transform: uppercase;
  margin-top: -2px;
}
.mockup-a11y-badges {
  display: flex;
  gap: 3px;
}
.mockup-a11y-badges .status-pill {
  font-size: 0.48rem;
  padding: 1px 4px;
}
.mockup-color-controls {
  display: flex;
  gap: 10px;
}
.mockup-color-input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mockup-color-input-group label {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--t3);
}
.picker-wrapper {
  display: flex;
  align-items: center;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  gap: 6px;
}
.picker-wrapper input[type="color"] {
  border: none;
  background: none;
  width: 16px;
  height: 16px;
  padding: 0;
  cursor: pointer;
  border-radius: 3px;
}
.picker-wrapper .picker-hex {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  color: var(--t2);
  text-transform: uppercase;
}

/* Mockup Widget: Gradient */
.mockup-gradient-preview {
  height: 70px;
  border-radius: 6px;
  border: 1px solid var(--border-md);
  margin-bottom: 8px;
  transition: background 0.3s;
}
.mockup-slider-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
}
.slider-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--t2);
}
.mockup-code-box {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  overflow-x: auto;
  margin-top: auto;
}
.mockup-code-box code {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  color: var(--t2);
  white-space: nowrap;
}

/* Mockup Widget: Shadow */
.mockup-shadow-canvas {
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-1);
  border-radius: 6px;
  border: 1px solid var(--border);
  margin-bottom: 8px;
}
.mockup-shadow-box {
  width: 90px;
  height: 38px;
  background: var(--surface-0);
  border-radius: 6px;
  border: 1px solid var(--border-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--t3);
  transition: box-shadow 0.2s ease;
}
.mockup-sliders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 6px;
}

/* Responsive Overrides */
@media (max-width: 1080px) {
  .hero-section-new {
    padding: 32px 24px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero-left-col {
    align-items: center;
    text-align: center;
  }
  .hero-trust-badges {
    justify-content: center;
  }
  .hero-cta-group {
    justify-content: center;
  }
  .hero-subtitle-new {
    max-width: 540px;
  }
  .hero-search-trigger-new {
    max-width: 380px;
    margin: 0 auto;
  }
  .card-palette { left: -10px; }
  .card-a11y { left: -15px; }
  .card-css { right: -10px; }
  .card-gradient { right: -10px; }
}

@media (max-width: 720px) {
  .hero-section-new {
    padding: 24px 16px;
  }
  .hero-title-new {
    font-size: 2.0rem;
  }
  .floating-card {
    display: none;
  }
  .mockup-container {
    max-width: 100%;
  }
  .window-body {
    height: auto;
    flex-direction: column;
  }
  .window-sidebar {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 6px;
  }
  .sidebar-item {
    flex: 1;
    justify-content: center;
    white-space: nowrap;
    font-size: 0.65rem;
    padding: 4px 8px;
  }
  .window-content {
    height: 190px;
    padding: 10px;
  }
  .mockup-palette-color {
    height: 55px;
  }
}

/* Home Section Titles & Grids */
.home-section {
  margin-bottom: 28px;
}
.section-title {
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: -0.2px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--t1);
}
.section-title svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
}
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.tool-card {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 20px;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-sm);
  transition: all 0.2s cubic-bezier(.4,0,.2,1);
}
.tool-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 10px 24px -6px var(--accent-glow);
}
.tool-card-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  transition: var(--tb);
}
.tool-card-icon svg {
  width: 18px;
  height: 18px;
}
.colors-icon {
  background: var(--accent-dim);
  color: var(--accent);
}
.gradients-icon {
  background: rgba(168,85,247,0.08);
  color: #a855f7;
}
.shadows-icon {
  background: rgba(236,72,153,0.08);
  color: #ec4899;
}
.a11y-icon {
  background: rgba(34,197,94,0.08);
  color: #22c55e;
}
.dev-icon {
  background: rgba(14,165,233,0.08);
  color: #0ea5e9;
}
.tool-card-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--t1);
  margin-bottom: 6px;
}
.tool-card-desc {
  font-size: 0.75rem;
  color: var(--t2);
  line-height: 1.45;
  margin-bottom: 12px;
  flex-grow: 1;
}
.tool-card-badge {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: var(--r-full);
  width: fit-content;
  text-transform: uppercase;
}
.status-ready {
  background: rgba(34,197,94,0.1);
  color: #16a34a;
  border: 1px solid rgba(34,197,94,0.15);
}
.status-locked {
  background: var(--surface-2);
  color: var(--t3);
  border: 1px solid var(--border);
}
.locked-card {
  cursor: not-allowed;
  opacity: 0.7;
}
.locked-card:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: var(--sh-sm);
}

/* All Tools Explorer Layout */
.tools-explorer-container {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}
.explorer-sidebar {
  width: 200px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--nav-h) + 22px);
}
.explorer-filter-title {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--t3);
  margin-bottom: 10px;
  padding-left: 10px;
}
.explorer-filter-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.explorer-filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--t2);
  cursor: pointer;
  transition: var(--tf);
}
.explorer-filter-item svg {
  width: 13px;
  height: 13px;
}
.explorer-filter-item:hover {
  background: var(--surface-2);
  color: var(--t1);
}
.explorer-filter-item.active {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 750;
}
.explorer-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.explorer-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  padding: 16px 20px;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
}
.explorer-hdr-text h2 {
  font-size: 0.96rem;
  font-weight: 800;
}
.explorer-hdr-text p {
  font-size: 0.72rem;
  color: var(--t3);
}
.explorer-search-wrapper {
  position: relative;
  width: 240px;
}
.explorer-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  color: var(--t3);
}
.explorer-search-input {
  width: 100%;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px 10px 6px 30px;
  font-size: 0.78rem;
  font-family: inherit;
  color: inherit;
  outline: none;
  transition: var(--tb);
}
.explorer-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
  background: var(--surface-0);
}

/* Global Search Modal Overlay */
.search-modal {
  position: fixed;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 560px;
  max-width: calc(100vw - 32px);
  background: var(--surface-0);
  border: 1px solid var(--border-md);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-xl), 0 0 0 1px rgba(0,0,0,0.05);
  z-index: 9100;
  overflow: hidden;
  animation: modalScaleUp 0.2s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes modalScaleUp {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.97); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.search-modal-header {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  gap: 10px;
}
.search-modal-icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
}
#global-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--t1);
}
.search-modal-close-kbd {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 5px;
  color: var(--t3);
}
.search-results-container {
  max-height: 280px;
  overflow-y: auto;
  padding: 10px 0;
}
.search-results-section-title {
  font-size: 0.63rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--t3);
  padding: 8px 18px 4px;
}
.search-results-list {
  display: flex;
  flex-direction: column;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  cursor: pointer;
  transition: var(--tf);
}
.search-result-item:hover, .search-result-item.selected {
  background: var(--accent-dim);
}
.search-result-item svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}
.search-result-text {
  flex: 1;
  min-width: 0;
}
.search-result-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--t1);
}
.search-result-desc {
  font-size: 0.68rem;
  color: var(--t3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-category {
  font-size: 0.58rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  background: var(--surface-2);
  color: var(--t2);
}
.search-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-1);
}
.search-modal-footer span {
  font-size: 0.65rem;
  color: var(--t3);
  display: flex;
  align-items: center;
  gap: 4px;
}
.search-modal-footer kbd {
  font-family: inherit;
  font-size: 0.6rem;
  font-weight: 750;
  background: var(--surface-0);
  border: 1px solid var(--border);
  padding: 1px 4px;
  border-radius: 3px;
}

/* Accessibility Contrast Checker */
.a11y-tool-container {
  display: flex;
  gap: 20px;
  padding: 20px;
  flex-wrap: wrap;
}
.a11y-settings {
  flex: 1;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.a11y-action-buttons {
  display: flex;
  gap: 8px;
}
.a11y-score-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface-1);
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.a11y-score-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  padding: 4px 6px;
}
.score-label {
  color: var(--t2);
  font-weight: 600;
}
.score-status {
  font-size: 0.63rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  width: 52px;
  text-align: center;
}
.score-status.status-pass {
  background: rgba(34,197,94,0.12);
  color: #16a34a;
}
.score-status.status-fail {
  background: rgba(239,68,68,0.12);
  color: #dc2626;
}
.a11y-preview-panel {
  flex: 1.2;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.preview-label {
  font-size: 0.68rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--t3);
}
.a11y-preview-box {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-grow: 1;
  justify-content: center;
  transition: background-color 0.2s, color 0.2s;
}
.a11y-preview-large {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.a11y-preview-normal {
  font-size: 0.82rem;
  line-height: 1.5;
}
.a11y-preview-component {
  margin-top: 4px;
}
.a11y-preview-button {
  padding: 8px 16px;
  border-radius: var(--r-md);
  font-size: 0.78rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: var(--sh-sm);
  transition: transform 0.2s;
}
.a11y-preview-button:hover {
  transform: translateY(-1px);
}
.a11y-ratio-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px 16px;
}
.a11y-ratio-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--t2);
}
.a11y-ratio-value {
  font-family: 'DM Mono', monospace;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--t1);
}

/* CSS ↔ Tailwind & JSON Formatter Layouts */
.converter-container {
  display: flex;
  gap: 16px;
  padding: 20px;
  flex-wrap: wrap;
}
.converter-pane {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pane-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pane-label {
  font-size: 0.68rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--t3);
}
.pane-action {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--t2);
  transition: var(--tf);
}
.pane-action:hover {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
}
.pane-action svg {
  width: 12px;
  height: 12px;
}
.pane-btn-action {
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--t2);
  font-size: 0.7rem;
  font-weight: 750;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: var(--tf);
}
.pane-btn-action:hover {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
}
.pane-btn-action svg {
  width: 11px;
  height: 11px;
}
.converter-textarea {
  width: 100%;
  height: 320px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 16px;
  font-family: 'DM Mono', monospace;
  font-size: 0.74rem;
  color: var(--t1);
  outline: none;
  resize: vertical;
  line-height: 1.6;
}
.converter-textarea:focus {
  border-color: var(--accent);
  background: var(--surface-0);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.converter-output-box {
  position: relative;
  flex: 1;
}
.converter-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface-1);
  padding: 4px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.converter-tab {
  border: none;
  background: none;
  font-size: 0.75rem;
  font-weight: 750;
  color: var(--t2);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: var(--tf);
}
.converter-tab.active {
  background: var(--surface-0);
  color: var(--accent);
  box-shadow: var(--sh-xs);
}
.json-controls-header {
  display: flex;
  align-items: center;
}
.json-status-banner {
  margin: 0 20px 20px;
  padding: 8px 16px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
}
.json-status-icon {
  width: 13px;
  height: 13px;
}
.json-status-idle {
  background: var(--surface-1);
  color: var(--t2);
  border: 1px solid var(--border);
}
.json-status-success {
  background: rgba(34,197,94,0.1);
  color: #16a34a;
  border: 1px solid rgba(34,197,94,0.15);
}
.json-status-error {
  background: rgba(239,68,68,0.1);
  color: #dc2626;
  border: 1px solid rgba(239,68,68,0.15);
}

/* Static page contents */
#page-docs h2, #page-about h2, #page-changelog h2 {
  color: var(--t1);
}

/* Responsive Explorer tweaks */
@media (max-width: 900px) {
  .tools-explorer-container {
    flex-direction: column;
  }
  .explorer-sidebar {
    width: 100%;
    position: static;
    margin-bottom: 12px;
  }
  .explorer-filter-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .explorer-filter-item {
    padding: 6px 12px;
  }
  .explorer-hdr {
    flex-direction: column;
    align-items: flex-start;
  }
  .explorer-search-wrapper {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════
   HUECRAFT SUITE WORKSPACE & MODAL STYLES
   ══════════════════════════════════════════════════ */

/* Dynamic Tool Modals */
.tool-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%) scale(.96);
  width: 1100px;
  max-width: calc(100vw - 40px);
  height: 80vh;
  max-height: calc(100vh - 80px);
  background: var(--surface-0);
  border: 1px solid var(--border-md);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-xl), 0 0 0 1px rgba(0,0,0,0.03);
  z-index: 1300;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(.22,1,.36,1);
  display: flex;
  flex-direction: column;
}
.tool-modal.active {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}
.tool-modal-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  background: var(--bg);
}
.tool-modal-layout-split {
  display: flex;
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tool-modal-sidebar {
  width: 35%;
  min-width: 320px;
  max-width: 420px;
  background: var(--surface-0);
  border-right: 1px solid var(--border);
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-shrink: 0;
}
.tool-modal-main {
  flex: 1;
  width: 65%;
  padding: 24px;
  overflow-y: auto;
  min-width: 0;
}

/* Favorites star on cards */
.card-fav-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-1);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--t3);
  transition: all var(--tf);
  z-index: 15;
}
.card-fav-btn:hover {
  color: var(--accent);
  background: var(--accent-dim);
  border-color: var(--accent);
  transform: scale(1.1);
}
.card-fav-btn.active {
  color: #f59e0b;
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}
.card-fav-btn.active svg {
  fill: #f59e0b;
}
.card-fav-btn svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.5;
}

/* Workspace Statistics Dashboard */
.stats-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat-dash-card {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: var(--r-xl);
  background: var(--surface-0);
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  transition: transform var(--tf), border-color var(--tf);
}
.stat-dash-card:hover {
  border-color: var(--border-md);
  transform: translateY(-2px);
}
.stat-dash-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--accent-dim);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.stat-dash-icon svg {
  width: 16px;
  height: 16px;
}
.stat-dash-val {
  font-size: 1.6rem;
  font-weight: 850;
  color: var(--t1);
  line-height: 1.1;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.8px;
}
.stat-dash-lbl {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--t2);
  margin-bottom: 2px;
}
.stat-dash-sub {
  font-size: 0.66rem;
  color: var(--t3);
}

/* 5-Color Harmony swatches */
.five-color-palette-container {
  display: flex;
  height: 120px;
  padding: 16px;
  gap: 12px;
  background: var(--surface-1);
}
.five-color-swatch {
  flex: 1;
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: transform var(--tf), box-shadow var(--tf);
}
.five-color-swatch:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}
.five-color-swatch-hex {
  font-family: 'DM Mono', monospace;
  font-size: 0.74rem;
  font-weight: 750;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.five-color-swatch-rgb {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  font-weight: 500;
  opacity: 0.75;
  margin-top: 1px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* Neumorphism canvas */
.neumorphic-canvas {
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e0e0e0;
  border-radius: var(--r-lg);
  margin: 0 0 12px;
  transition: background 0.3s;
}
.neumorphic-box {
  width: 150px;
  height: 150px;
  background: #e0e0e0;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: rgba(0,0,0,0.4);
  transition: all 0.3s ease;
}

/* Glassmorphism canvas */
.glass-canvas {
  height: 340px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xl);
  background-image: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  width: 100%;
}
.glass-bg-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(4px);
}
.glass-circle-1 {
  width: 110px;
  height: 110px;
  background: #f687b3;
  top: 45px;
  left: 65px;
  animation: floatCircle1 12s ease-in-out infinite alternate;
}
.glass-circle-2 {
  width: 130px;
  height: 130px;
  background: #4fd1c5;
  bottom: 40px;
  right: 55px;
  animation: floatCircle2 14s ease-in-out infinite alternate;
}
@keyframes floatCircle1 {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-30px) scale(1.15) translateX(20px); }
}
@keyframes floatCircle2 {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(30px) scale(0.9) translateX(-20px); }
}
.glass-card-preview {
  width: 260px;
  padding: 28px;
  border-radius: var(--r-xl);
  color: #fff;
  z-index: 2;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
  transition: all 0.3s;
}

/* Glassmorphism backgrounds */
.glass-canvas.bg-mesh {
  background-image: 
    radial-gradient(at 80% 20%, #ff7eb3 0px, transparent 50%),
    radial-gradient(at 20% 80%, #7afcff 0px, transparent 50%),
    radial-gradient(at 50% 50%, #ff85e3 0px, transparent 50%),
    radial-gradient(at 10% 10%, #6875f5 0px, transparent 50%);
  background-color: #6c5ce7;
}

.glass-canvas.bg-checkerboard {
  background-color: #1a1b20;
  background-image:
    linear-gradient(45deg, #242630 25%, transparent 25%),
    linear-gradient(-45deg, #242630 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #242630 75%),
    linear-gradient(-45deg, transparent 75%, #242630 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.glass-canvas.bg-uploaded {
  background-size: cover;
  background-position: center;
}

/* Neumorphic components styling */
.neu-playground-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  width: 100%;
  max-width: 400px;
}
.neu-component {
  transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s ease;
  user-select: none;
}
.neu-card {
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.neu-button {
  border: none;
  font-family: inherit;
  color: var(--t1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  outline: none;
}
.neu-button:active {
  transform: scale(0.97);
}
.neu-switch-wrap {
  position: relative;
  transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.neu-switch-thumb {
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom segment tab styling rules */
.segment-tab.active {
  background: var(--surface-0) !important;
  color: var(--accent) !important;
  box-shadow: var(--sh-xs) !important;
}

/* Redesigned Workspace Modal */
.tool-modal {
  width: 90vw !important;
  max-width: 1600px !important;
  height: 90vh !important;
  max-height: 90vh !important;
  border-radius: var(--r-xl) !important;
  box-shadow: 0 24px 64px -8px rgba(9, 9, 11, 0.35) !important;
  background: var(--surface-0) !important;
  border: 1px solid var(--border-md) !important;
}

/* Compact Premium Header styling */
/* Compact Premium Header styling */
.tool-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  height: 56px;
  border-bottom: 1px solid var(--border-md);
  background: var(--surface-0);
  flex-shrink: 0;
  box-sizing: border-box;
}
.tool-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.tool-modal-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--t1);
  margin: 0;
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.tool-modal-title-wrap p {
  font-size: 0.68rem;
  color: var(--t3);
  margin: 2px 0 0 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#tool-modal-icon-container {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--border-md);
  background: var(--surface-1);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#tool-modal-icon-container svg {
  width: 14px;
  height: 14px;
}
.tool-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.tool-workspace-container {
  display: flex;
  flex: 1;
  width: 100%;
  height: calc(100% - 56px); /* Use 56px height of new header */
  overflow: hidden;
}
.tool-workspace-sidebar {
  width: 180px;
  background: var(--surface-0);
  border-right: 1px solid var(--border);
  padding: 16px 10px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: width 0.2s cubic-bezier(0.2, 0, 0, 1), padding 0.2s cubic-bezier(0.2, 0, 0, 1);
}
.tool-workspace-sidebar.collapsed {
  width: 48px;
  padding: 16px 4px;
}
.ws-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ws-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: transparent;
  border: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--t2);
  cursor: pointer;
  text-align: left;
  transition: all var(--tf);
}
.ws-nav-btn:hover {
  background: var(--surface-1);
  color: var(--t1);
}
.ws-nav-btn.active {
  background: var(--accent-dim);
  color: var(--accent);
}
.ws-nav-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.tool-workspace-sidebar.collapsed .ws-nav-btn {
  justify-content: center;
  padding: 8px 0;
}
.tool-workspace-sidebar.collapsed .ws-nav-btn span {
  display: none;
}
.ws-sidebar-toggle-btn {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 28px;
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  transition: all var(--tf);
}
.ws-sidebar-toggle-btn:hover {
  background: var(--surface-1);
  color: var(--t1);
}
.tool-workspace-sidebar.collapsed #ws-sidebar-toggle-icon {
  transform: rotate(180deg);
}

.tool-workspace-body {
  flex: 1;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  position: relative;
}
.ws-tab-pane {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

/* Export Dropdown Menu */
.export-dropdown-wrapper {
  position: relative;
  display: inline-block;
}
.btn-export-dropdown {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #fff !important;
  border: none;
}
.btn-export-dropdown:hover {
  background: var(--accent-mid);
}
.export-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: var(--surface-0);
  border: 1px solid var(--border-md);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  display: none;
  flex-direction: column;
  min-width: 160px;
  z-index: 2000;
  padding: 4px;
}
.export-dropdown-menu.active {
  display: flex;
}
.export-opt {
  padding: 8px 12px;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--t2);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: var(--tf);
}
.export-opt:hover {
  background: var(--surface-1);
  color: var(--accent);
}

/* Export Center Tab Layout */
.ws-export-center-layout {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.ws-export-sidebar {
  width: 200px;
  background: var(--surface-0);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.export-format-btn {
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--t2);
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  transition: var(--tf);
}
.export-format-btn:hover {
  background: var(--surface-1);
  color: var(--t1);
}
.export-format-btn.active {
  background: var(--accent-dim);
  color: var(--accent);
}
.ws-export-content {
  flex: 1;
  padding: 24px;
  background: var(--bg);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.ws-export-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Toast Notification System */
.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10000;
  pointer-events: none;
}
.toast-new {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--surface-0);
  border: 1px solid var(--border-md);
  border-radius: var(--r-md);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  color: var(--t1);
  font-size: 0.8rem;
  font-weight: 600;
  pointer-events: auto;
  transform: translateY(-20px);
  opacity: 0;
  animation: slideInToast 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: all 0.2s;
}
@keyframes slideInToast {
  to { transform: translateY(0); opacity: 1; }
}
.toast-new.fade-out {
  transform: translateY(-10px) scale(0.95);
  opacity: 0;
}
.toast-new-icon {
  width: 14px;
  height: 14px;
  color: #22c55e;
}

/* Raycast-style Command Palette */
.search-modal {
  width: 600px !important;
  background: rgba(24, 24, 27, 0.8) !important;
  backdrop-filter: blur(28px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.4) !important;
  top: 20% !important;
  border-radius: var(--r-xl) !important;
}
[data-theme="light"] .search-modal {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(9, 9, 11, 0.08) !important;
}
.search-modal-header {
  padding: 16px 20px !important;
}
#global-search-input {
  font-size: 0.95rem !important;
  font-weight: 500 !important;
}
.search-result-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  border-radius: var(--r-sm) !important;
  margin: 2px 8px !important;
  cursor: pointer !important;
  transition: var(--tf) !important;
  color: var(--t1);
}
.search-result-item:hover, .search-result-item.selected {
  background: var(--accent-dim) !important;
  color: var(--accent) !important;
}
.search-result-item.selected .search-result-name {
  color: var(--accent) !important;
}
.search-result-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.search-result-name {
  font-weight: 600 !important;
  font-size: 0.82rem !important;
}
.search-result-cat {
  font-size: 0.6rem !important;
  font-weight: 800 !important;
  color: var(--t3) !important;
  background: var(--surface-2) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
}
.search-result-shortcut {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  color: var(--t3);
  background: var(--surface-1);
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

/* SaaS Stats */
.saas-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 10px;
  margin-bottom: 24px;
}
.saas-stat-card {
  padding: 24px 20px;
  text-align: center;
  background: var(--surface-0);
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  transition: var(--ts);
  border-radius: var(--r-xl);
}
.saas-stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-md);
  box-shadow: var(--sh-md);
}
.saas-stat-val {
  font-size: 2rem;
  font-weight: 850;
  color: var(--accent);
  letter-spacing: -1px;
  margin-bottom: 4px;
}
.saas-stat-lbl {
  font-size: 0.85rem;
  font-weight: 750;
  color: var(--t1);
}
.saas-stat-sub {
  font-size: 0.72rem;
  color: var(--t3);
  margin-top: 2px;
}

/* Card Glow effects & Upgrade */
.tool-card {
  position: relative;
  overflow: hidden;
  background: var(--surface-0);
  border: 1px solid var(--border);
  box-shadow: var(--sh-xs);
  border-radius: var(--r-xl);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.tool-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: var(--accent);
  box-shadow: 0 12px 28px -4px rgba(91,94,244,0.15), var(--sh-md);
}
.card-glow {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(300px circle at var(--x, 0px) var(--y, 0px), rgba(91,94,244,0.08), transparent 80%);
  z-index: 1;
  pointer-events: none;
}
.tool-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 0;
  z-index: 2;
  position: relative;
}
.card-category {
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--t3);
  letter-spacing: 0.05em;
}
.card-badge-popular {
  font-size: 0.58rem;
  font-weight: 750;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 2px 6px;
  border-radius: var(--r-full);
  border: 1px solid var(--accent-dim2);
}
.tool-card-body {
  padding: 16px 20px 20px;
  z-index: 2;
  position: relative;
}

/* Live Preview Components styling */
.ws-preview-container-pane {
  padding: 24px;
  height: 100%;
  overflow-y: auto;
}
.live-preview-dashboard {
  background: var(--surface-0);
  border: 1px solid var(--border-md);
  border-radius: var(--r-xl);
  display: flex;
  height: 480px;
  overflow: hidden;
  box-shadow: var(--sh-md);
}
.live-prev-sidebar {
  width: 180px;
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
  background: var(--surface-0);
}
.live-prev-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.live-prev-nav-btn {
  padding: 8px 12px;
  font-size: 0.74rem;
  font-weight: 600;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: var(--tf);
  color: var(--t2);
}
.live-prev-nav-btn.active {
  background: var(--accent-dim);
  color: var(--accent);
}
.live-prev-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}
.live-prev-header {
  height: 48px;
  background: var(--surface-0);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
}
.live-prev-body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.live-prev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}
.live-prev-widget {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.live-prev-form {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.live-prev-form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.live-prev-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 0.76rem;
  border: 1px solid var(--border-md);
  border-radius: var(--r-sm);
  outline: none;
  background: var(--surface-0);
  color: var(--t1);
  transition: var(--tf);
}
.live-prev-input:focus {
  border-color: var(--accent);
}
.live-prev-btn-row {
  display: flex;
  gap: 8px;
}
.live-prev-btn {
  padding: 8px 14px;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  transition: var(--tf);
}

/* History List Items */
.ws-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ws-history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: var(--tf);
}
.ws-history-item:hover {
  border-color: var(--accent);
  background: var(--surface-1);
}
.ws-history-title {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--t1);
}
.ws-history-time {
  font-size: 0.68rem;
  color: var(--t3);
}

/* Empty States styling */
.ws-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--t3);
}
.ws-empty-icon {
  width: 40px;
  height: 40px;
  stroke-width: 1.5;
  margin-bottom: 12px;
  color: var(--t3);
}
.ws-empty-text {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--t2);
  margin-bottom: 4px;
}
.ws-empty-sub {
  font-size: 0.74rem;
  max-width: 320px;
}


/* Custom code displays */
.tool-view[style*="none"] {
  display: none !important;
}

/* Global search highlighted text */
.search-highlight {
  background: rgba(245, 158, 11, 0.25);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 700;
}

/* Responsive modal sizing */
@media (max-width: 1140px) {
  .tool-modal {
    width: 90%;
  }
}

@media (max-width: 900px) {
  .tool-modal {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    max-width: 100vw;
    border-radius: 0;
    top: 0;
    left: 0;
    transform: none;
    border: none;
  }
  .tool-modal.active {
    transform: none;
  }
  .tool-modal-layout-split {
    flex-direction: column;
  }
  .tool-modal-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    height: auto;
    max-height: 35vh;
  }
  .tool-modal-main {
    flex: 1;
  }
}

/* ══════════════════════════════════════════════════
   SIMPLE UTILITY MODAL
   Compact, focused layout for text-based tools:
   JSON Formatter, Base64, CSS↔Tailwind, SVG Optimizer
══════════════════════════════════════════════════ */

.simple-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -46%) scale(0.96);
  width: min(1100px, 96vw);
  max-height: 85vh;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  background: var(--surface-0);
  border: 1px solid var(--border-md);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-xl), 0 0 0 1px rgba(0,0,0,0.04);
  z-index: 1300;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.simple-modal.active {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}

/* Per-tool width overrides */
.simple-modal[data-tool="base64"]       { width: min(1000px, 96vw); }
.simple-modal[data-tool="svg-optimizer"]{ width: min(1100px, 96vw); }
.simple-modal[data-tool="json-formatter"]{ width: min(1100px, 96vw); }
.simple-modal[data-tool="css-tailwind"] { width: min(1100px, 96vw); }

/* ── Header ── */
.simple-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  height: 56px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-0);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
  box-sizing: border-box;
}

.simple-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.simple-modal-icon-wrap {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--surface-1);
  border: 1px solid var(--border-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.simple-modal-icon-wrap svg { width: 14px; height: 14px; }

.simple-modal-title-wrap h3 {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.2;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.simple-modal-title-wrap p {
  font-size: 0.68rem;
  color: var(--t3);
  margin: 2px 0 0 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.simple-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Global Workspace Header Actions */
.header-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--t2);
  transition: var(--tf);
}
.header-action-btn:hover {
  background: var(--surface-1);
  color: var(--t1);
  border-color: var(--border-md);
}
.header-action-btn svg {
  width: 14px;
  height: 14px;
  transition: var(--tf);
}
.header-action-btn.active {
  color: #f59e0b !important;
}
.header-action-btn.active svg {
  fill: #f59e0b !important;
  stroke: #f59e0b !important;
}
.header-action-btn.close-btn:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.15);
}

/* Mode tabs inside header (Encode/Decode, CSS→TW / TW→CSS) */
.simple-modal-tabs {
  display: flex;
  gap: 3px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 3px;
}
.simple-modal-tab {
  padding: 5px 12px;
  border-radius: var(--r-sm);
  background: transparent;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--t2);
  cursor: pointer;
  transition: var(--tb);
  white-space: nowrap;
}
.simple-modal-tab:hover { background: var(--surface-2); color: var(--t1); }
.simple-modal-tab.active {
  background: var(--surface-0);
  color: var(--accent);
  box-shadow: var(--sh-xs);
}

/* ── Toolbar ── */
.simple-modal-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
  min-height: 48px;
}

.simple-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--t2);
  cursor: pointer;
  transition: var(--tb);
  white-space: nowrap;
}
.simple-toolbar-btn svg { width: 13px; height: 13px; }
.simple-toolbar-btn:hover { background: var(--surface-2); color: var(--t1); border-color: var(--border-md); }
.simple-toolbar-btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: var(--sh-accent);
}
.simple-toolbar-btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, black); }
.simple-toolbar-btn.danger { color: #ef4444; }
.simple-toolbar-btn.danger:hover { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.25); }

.simple-toolbar-sep {
  width: 1px;
  height: 22px;
  background: var(--border-md);
  flex-shrink: 0;
  margin: 0 2px;
}

.simple-toolbar-select {
  padding: 5px 8px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--t1);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: var(--tb);
}
.simple-toolbar-select:focus { border-color: var(--accent); }

/* ── Split Body ── */
.simple-modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.simple-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.simple-pane + .simple-pane {
  border-left: 1px solid var(--border);
}

.simple-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.simple-pane-label {
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--t3);
}

.simple-pane-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.simple-pane-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Textareas inside simple panes fill the full height */
.simple-pane-content textarea.converter-textarea {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  resize: none;
  border: none;
  outline: none;
  border-radius: 0;
  box-shadow: none;
  padding: 16px;
  font-family: 'DM Mono', monospace;
  font-size: 0.8rem;
  line-height: 1.65;
  background: var(--surface-0);
  color: var(--t1);
  overflow-y: auto;
}
.simple-pane-content textarea.converter-textarea::placeholder { color: var(--t3); }

/* ── Status Footer ── */
.simple-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 18px;
  background: var(--surface-1);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 36px;
}

.simple-footer-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--t3);
}
.simple-footer-icon { width: 12px; height: 12px; flex-shrink: 0; }
.simple-footer-status.ok     { color: #16a34a; }
.simple-footer-status.error  { color: #dc2626; }
.simple-footer-status.warn   { color: #d97706; }
[data-theme="dark"] .simple-footer-status.ok    { color: #4ade80; }
[data-theme="dark"] .simple-footer-status.error { color: #f87171; }
[data-theme="dark"] .simple-footer-status.warn  { color: #fbbf24; }

.simple-footer-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'DM Mono', monospace;
  font-size: 0.66rem;
  color: var(--t3);
}
.simple-footer-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.63rem;
  color: var(--t2);
}
.simple-footer-chip.accent {
  background: var(--accent-dim);
  border-color: var(--accent-dim2);
  color: var(--accent);
}
.simple-footer-chip.success {
  background: rgba(34,197,94,0.08);
  border-color: rgba(34,197,94,0.2);
  color: #16a34a;
}
[data-theme="dark"] .simple-footer-chip.success { color: #4ade80; }

/* JSON status banner inside simple modal */
.simple-pane-content .json-status-banner {
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}

/* SVG size stats in simple footer */
.simple-svg-stats {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Advanced Workspace Modal tweaks ── */
/* Ensure advanced modal has no residual sizing conflicts */
.tool-modal[data-layout="advanced"] {
  /* sizing already handled by existing .tool-modal rules */
}

/* ── Mobile Responsive ── */
@media (max-width: 720px) {
  .simple-modal {
    width: 100vw !important;
    max-height: 100dvh;
    top: 0;
    left: 0;
    transform: none !important;
    border-radius: 0;
    border: none;
  }
  .simple-modal.active {
    transform: none !important;
  }
  .simple-modal-body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .simple-pane + .simple-pane {
    border-left: none;
    border-top: 1px solid var(--border);
  }
  .simple-modal-tabs { display: none; }
}

@media (max-width: 900px) and (min-width: 721px) {
  .simple-modal {
    width: 98vw !important;
    max-height: 90dvh;
  }
}


@keyframes glassCircleMove1 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(30px, -20px) scale(1.15);
  }
  100% {
    transform: translate(-20px, 30px) scale(0.9);
  }
}

@keyframes glassCircleMove2 {
  0% {
    transform: translate(0, 0) scale(1.2);
  }
  50% {
    transform: translate(-30px, 30px) scale(0.95);
  }
  100% {
    transform: translate(25px, -25px) scale(1.25);
  }
}


/* Learn Page Documentation Styles */
.docs-explorer-container {
  display: flex;
  gap: 24px;
  min-height: calc(85vh - 56px);
  animation: fadeIn 0.3s ease;
}

.docs-sidebar {
  width: 260px;
  border-right: 1px solid var(--border);
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
}

.docs-menu {
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Scrollbars for docs sidebar */
.docs-menu::-webkit-scrollbar {
  width: 4px;
}
.docs-menu::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.docs-section {
  display: flex;
  flex-direction: column;
}

.docs-item-btn {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--t2);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: inherit;
}

.docs-item-btn:hover {
  background: var(--surface-1);
  color: var(--t1);
  padding-left: 16px;
}

.docs-item-btn.active {
  background: var(--accent-dim) !important;
  color: var(--accent) !important;
  font-weight: 700;
  padding-left: 16px;
}

.docs-content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface-0);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}

.docs-article-body {
  padding: 32px 40px;
  overflow-y: auto;
  flex: 1;
  line-height: 1.6;
  color: var(--t2);
  scroll-behavior: smooth;
}

.docs-article {
  animation: fadeIn 0.25s ease;
}

.docs-article h1 {
  font-size: 1.8rem;
  font-weight: 850;
  color: var(--t1);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.docs-article h2 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--t1);
  margin-top: 24px;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

.docs-article h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--t1);
  margin-top: 18px;
  margin-bottom: 8px;
}

.docs-article p {
  margin-bottom: 16px;
  font-size: 0.9rem;
}

.docs-article ul, .docs-article ol {
  margin-left: 20px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}

.docs-article li {
  margin-bottom: 6px;
}

.docs-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.82rem;
}

.docs-article th {
  font-weight: 700;
  color: var(--t1);
  border-bottom: 2px solid var(--border);
  padding: 8px 12px;
  text-align: left;
}

.docs-article td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.docs-article kbd {
  padding: 2px 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.7rem;
  color: var(--t1);
  font-family: inherit;
}

.docs-article code {
  font-family: 'DM Mono', monospace;
  background: var(--surface-1);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--accent);
}

/* ─── BREADCRUMBS STYLING ─── */
.modal-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
}
.breadcrumb-root {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--t3);
  transition: color var(--ts);
  cursor: pointer;
  letter-spacing: -0.1px;
}
.breadcrumb-root:hover {
  color: var(--accent);
}
.breadcrumb-separator {
  font-size: 0.68rem;
  color: var(--border-md);
  user-select: none;
}
.modal-breadcrumb h3 {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: var(--t1) !important;
  margin: 0 !important;
}

/* ─── UPDATES PAGE TIMELINE STYLING ─── */
.timeline::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 12px;
  bottom: 24px;
  width: 2px;
  background: var(--border-md);
  z-index: 1;
}

.timeline-item {
  transition: transform var(--tb), opacity var(--tb);
}
.timeline-item:hover {
  transform: translateX(6px);
}
.timeline-item:hover .timeline-dot {
  background: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-dim) !important;
  border-color: var(--surface-0) !important;
}

/* Interactive Roadmap Card Highlights */
.updates-sidebar .bento-card > div > div {
  transition: transform var(--ts), border-color var(--ts), box-shadow var(--ts), background var(--ts);
}
.updates-sidebar .bento-card > div > div:hover {
  transform: translateY(-2px);
  border-color: var(--accent-dim2) !important;
  box-shadow: var(--sh-sm);
  background: var(--surface-0) !important;
}

/* ─── MOBILE RESPONSIVE NAVIGATION ─── */
@media (max-width: 768px) {
  nav.top-nav {
    padding: 0 12px;
  }
  
  /* Floating pill bottom navigation on mobile */
  .nav-menu {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    background: color-mix(in srgb, var(--surface-0) 90%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-md);
    box-shadow: 0 16px 36px -4px rgba(9, 9, 11, 0.25);
    padding: 6px;
    border-radius: var(--r-full);
    display: flex;
    gap: 4px;
    width: auto;
    max-width: 90vw;
  }
  
  .nav-link {
    font-size: 0.72rem;
    padding: 8px 12px;
  }
  
  /* Hide search kbd shortcut on mobile */
  .search-kbd {
    display: none !important;
  }
  
  /* Responsive columns for updates layout */
  .updates-layout-container {
    flex-direction: column !important;
    gap: 20px !important;
  }
  
  .updates-sidebar {
    width: 100% !important;
  }
  
  .updates-main {
    padding: 24px 16px !important;
  }
}

@media (max-width: 480px) {
  .logo-text {
    display: none;
  }
}

/* ─── DYNAMIC DOCUMENTATION CATEGORY TABS ─── */
.docs-categories::-webkit-scrollbar {
  display: none;
}
.docs-cat-btn {
  transition: all var(--ts);
}
.docs-cat-btn:hover {
  background: var(--surface-2) !important;
  color: var(--t1) !important;
}
.docs-cat-btn.active {
  background: var(--accent) !important;
  color: var(--surface-0) !important;
  border-color: var(--accent) !important;
}

/* ─── ROADMAP VOTING BUTTONS ─── */
.vote-btn {
  transition: all var(--ts);
}
.vote-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--accent-dim) !important;
}
.vote-btn.voted {
  background: var(--accent) !important;
  color: var(--surface-0) !important;
  border-color: var(--accent) !important;
}

/* ─── CODE BLOCK COPY BUTTONS ─── */
.code-copy-btn {
  opacity: 0;
  transition: all var(--ts) !important;
}
pre:hover .code-copy-btn {
  opacity: 1;
}
.code-copy-btn:hover {
  background: var(--surface-0) !important;
  color: var(--accent) !important;
}

/* ══════════════════════════════════════════════════
   HUECRAFT HOMEPAGE & IA REFINEMENT OVERRIDES
   ══════════════════════════════════════════════════ */

/* ─── HOMEPAGE FULL-WIDTH LAYOUT ─── */
.homepage-dashboard-layout {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 12px;
  margin-bottom: 56px;
}

/* ─── UTILITY SECTIONS GRID BREAKPOINTS ─── */
.tools-grid {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}

@media (min-width: 640px) {
  .tools-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  .tools-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 1400px) {
  .tools-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ─── FEATURED UTILITIES SECTION ─── */
.featured-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.featured-card {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 20px;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-sm);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.featured-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 12px 28px -4px rgba(91,94,244,0.15), var(--sh-md);
}

.featured-card-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.feat-badge {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: var(--r-full);
  text-transform: uppercase;
  border: 1px solid transparent;
}

.badge-popular {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent-dim2);
}

.badge-recommended {
  background: rgba(34, 197, 94, 0.08);
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.15);
}

.badge-new {
  background: rgba(168, 85, 247, 0.08);
  color: #a855f7;
  border-color: rgba(168, 85, 247, 0.15);
}

.badge-professional {
  background: rgba(236, 72, 153, 0.08);
  color: #ec4899;
  border-color: rgba(236, 72, 153, 0.15);
}

.feat-fav-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-1);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--t3);
  transition: all var(--tf);
  z-index: 10;
}

.feat-fav-btn:hover {
  color: var(--accent);
  background: var(--accent-dim);
  border-color: var(--accent);
  transform: scale(1.1);
}

.feat-fav-btn.active {
  color: #f59e0b;
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

.feat-fav-btn.active svg {
  fill: #f59e0b;
}

.feat-fav-btn svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
}

.featured-card-body {
  flex-grow: 1;
  margin-bottom: 16px;
}

.feat-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.feat-icon svg {
  width: 16px;
  height: 16px;
}

.feat-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--t1);
  margin-bottom: 5px;
}

.feat-desc {
  font-size: 0.74rem;
  color: var(--t2);
  line-height: 1.45;
}

.featured-card-ftr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.feat-stat {
  font-size: 0.68rem;
  color: var(--t3);
  display: flex;
  align-items: center;
  gap: 4px;
}

.feat-stat svg {
  width: 12px;
  height: 12px;
}

.feat-launch-btn {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: var(--tf);
}

.featured-card:hover .feat-launch-btn {
  transform: translateX(3px);
  color: var(--accent-2);
}

.feat-launch-btn svg {
  width: 12px;
  height: 12px;
}

/* ─── DENSE STATISTICS CARDS ─── */
.stats-dashboard-grid-new {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .stats-dashboard-grid-new {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .stats-dashboard-grid-new {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-dash-card-new {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  background: var(--surface-0);
  border: 1px solid var(--border);
  box-shadow: var(--sh-xs);
  position: relative;
}

.stat-dash-card-new .stat-dash-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-dim);
  color: var(--accent);
  flex-shrink: 0;
}

.stat-dash-card-new .stat-dash-icon svg {
  width: 15px;
  height: 15px;
}

.stat-dash-details {
  flex-grow: 1;
  min-width: 0;
}

.stat-dash-card-new .stat-dash-val {
  font-size: 0.95rem;
  font-weight: 850;
  color: var(--t1);
  line-height: 1.1;
}

.stat-dash-card-new .stat-dash-lbl {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--t2);
  margin-top: 1px;
}

.stat-dash-time {
  font-size: 0.62rem;
  color: var(--t3);
  margin-top: 1px;
}

.trend-pill {
  font-size: 0.58rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  gap: 2px;
  position: absolute;
  top: 12px;
  right: 12px;
}

.trend-pill.positive {
  background: rgba(34, 197, 94, 0.08);
  color: #22c55e;
}

.trend-pill.info {
  background: var(--accent-dim);
  color: var(--accent);
}

.trend-pill svg {
  width: 10px;
  height: 10px;
}

/* ─── HORIZONTAL CARD SCROLL FOR RECENTS ─── */
.recent-tools-container {
  display: block;
  width: 100%;
}

.recent-tools-horizontal {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding: 12px 4px 20px;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}

.recent-tools-horizontal::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.recent-tools-horizontal .tool-card {
  flex: 0 0 280px;
  max-width: 280px;
}

/* ─── EMPTY STATE STYLING ─── */
.empty-state-card {
  position: relative;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 36px 24px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.empty-state-card:hover {
  border-color: var(--border-md);
  box-shadow: var(--sh-md);
}

.empty-state-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(91,94,244,0.06) 0%, rgba(91,94,244,0) 70%);
  pointer-events: none;
}

.empty-state-content {
  position: relative;
  z-index: 1;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.empty-state-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  background: var(--accent-dim);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  box-shadow: 0 0 20px rgba(91,94,244,0.1);
}

.empty-state-icon svg {
  width: 20px;
  height: 20px;
}

.empty-state-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--t1);
  margin: 0;
  letter-spacing: -0.2px;
}

.empty-state-desc {
  font-size: 0.82rem;
  color: var(--t2);
  line-height: 1.5;
  margin: 0;
}

.empty-state-actions {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.empty-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--r-lg);
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  transition: all var(--ts);
  font-family: inherit;
  border: 1px solid transparent;
}

.empty-btn-primary {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(91,94,244,0.2);
}

.empty-btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(91,94,244,0.3);
}

.empty-btn-secondary {
  background: var(--surface-1);
  color: var(--t1);
  border-color: var(--border);
}

.empty-btn-secondary:hover {
  background: var(--surface-2);
  border-color: var(--border-md);
  transform: translateY(-1px);
}

/* ─── PREMIUM PRODUCT FOOTER ─── */
.product-footer {
  border-top: 1px solid var(--border);
  margin-top: 64px;
  padding: 48px 20px 32px;
  width: 100%;
  background: var(--surface-0);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr repeat(3, 1fr);
  gap: 36px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .product-footer {
    padding: 32px 16px 64px; /* extra space at bottom for mobile nav bar */
  }
}

.footer-col h4 {
  font-size: 0.76rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--t1);
  margin-bottom: 16px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col ul a {
  font-size: 0.78rem;
  color: var(--t2);
  text-decoration: none;
  transition: all var(--tf);
}

.footer-col ul a:hover {
  color: var(--accent);
  padding-left: 2px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-desc {
  font-size: 0.78rem;
  color: var(--t2);
  line-height: 1.5;
  max-width: 320px;
}

.footer-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--t3);
  margin-top: 8px;
}

/* ─── HERO CARD ANIMATIONS ─── */
@keyframes floatAnimation {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0px); }
}

.floating-card {
  animation: floatAnimation 5s ease-in-out infinite;
}

.card-palette { animation-delay: 0s; }
.card-a11y { animation-delay: 1.2s; }
.card-css { animation-delay: 2.4s; }
.card-gradient { animation-delay: 3.6s; }

/* ─── DYNAMIC LEARN HUB & PRODUCT ROADMAP STYLE ADDITIONS ─── */

/* Hub Category Buttons */
.hub-cat-btn {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--t2);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--ts);
  font-family: inherit;
}
.hub-cat-btn:hover {
  background: var(--surface-2);
  color: var(--t1);
}
.hub-cat-btn.active {
  background: var(--accent);
  color: var(--surface-0);
  border-color: var(--accent);
}

/* Roadmap Grid Layout */
.roadmap-columns-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 1024px) {
  .roadmap-columns-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.roadmap-col {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.roadmap-col-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-md);
  margin-bottom: 4px;
}

.roadmap-col-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.dot-released { background: #22c55e; }
.dot-progress { background: var(--accent); }
.dot-planned { background: #a855f7; }

.roadmap-col-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--t1);
}

.roadmap-col-count {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--t3);
  padding: 1px 6px;
  border-radius: 10px;
}

.roadmap-col-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
}

.roadmap-item-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
  transition: transform var(--ts), border-color var(--ts), box-shadow var(--ts), background var(--ts);
}

.roadmap-item-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-dim2);
  box-shadow: var(--sh-sm);
  background: var(--surface-0);
}

.roadmap-item-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--t1);
  margin-bottom: 4px;
}

.roadmap-item-desc {
  font-size: 0.72rem;
  color: var(--t3);
  margin: 0 0 10px 0;
  line-height: 1.4;
}

/* Back to Hub Button Hover */
.back-to-hub-btn:hover {
  background: var(--surface-2) !important;
  border-color: var(--accent-dim2) !important;
  color: var(--accent) !important;
}

.hub-card-star-btn:hover {
  transform: scale(1.2);
}

/* ─── MOBILE RESPONSIVE REFINEMENTS ─── */
@media (max-width: 768px) {
  /* 1. Fix Navbar Overlapping / Containing Block Bug */
  nav.top-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--surface-0) !important;
  }

  /* 2. Fullscreen Tool Workspace Modal */
  .tool-modal {
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    border: none !important;
  }
  
  /* 3. Vertically Stack Workspace Sidebar & Body */
  .tool-workspace-container {
    flex-direction: column !important;
    height: calc(100% - 56px) !important;
  }

  /* 4. Horizontal Scroll for Workspace Tabs */
  .tool-workspace-sidebar {
    width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 6px 12px !important;
    gap: 8px !important;
  }
  .ws-sidebar-nav {
    flex-direction: row !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .ws-nav-btn {
    white-space: nowrap !important;
    padding: 6px 12px !important;
  }
  #ws-sidebar-toggle {
    display: none !important; /* Hide toggle button since it is no longer a sidebar */
  }

  /* 5. Horizontal Scroll for Export Center */
  .ws-export-center-layout {
    flex-direction: column !important;
  }
  .ws-export-sidebar {
    width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  .export-format-btn {
    white-space: nowrap !important;
    padding: 6px 12px !important;
  }
  .ws-export-content {
    height: calc(100% - 60px) !important;
    padding: 16px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* 6. Simple Modal Responsive Header & Fullscreen Height */
  .simple-modal {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .simple-modal-body {
    flex: 1 !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 1fr !important;
  }
  .simple-modal-header {
    height: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 8px 12px !important;
  }
  .simple-modal-title-wrap {
    width: 100% !important;
  }
  .simple-modal-header-actions {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .simple-modal-tabs {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    white-space: nowrap !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
    flex: 1 !important;
    margin-right: 4px !important;
  }
  .simple-modal-tab {
    flex-shrink: 0 !important;
  }

  /* 7. Prevent Grid and Layout Containers from Stretching (Flex Min-Width Fix) */
  .hero-grid,
  .hero-left-col,
  .hero-right-col,
  .mockup-container,
  .dashboard-window,
  .window-body,
  .window-sidebar,
  .window-content,
  .tool-workspace-body,
  .ws-tab-pane,
  .tool-modal-layout-split,
  .tool-modal-sidebar,
  .tool-modal-main {
    min-width: 0 !important;
    width: 100% !important;
  }
  .tool-modal-sidebar {
    max-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    height: auto !important;
    max-height: 40vh !important;
  }
  .tool-modal-main {
    max-width: 100% !important;
    flex: 1 !important;
  }

  /* 8. Trust Badges & Buttons Wrapping in Hero */
  .hero-trust-badges {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  .hero-badge {
    font-size: 0.62rem !important;
    padding: 3px 8px !important;
  }
  .hero-cta-group {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  .hero-btn {
    padding: 10px 18px !important;
    font-size: 0.8rem !important;
  }

  /* 9. Mockup Dashboard Window Responsive Layout */
  .window-body {
    height: auto !important;
    flex-direction: column !important;
  }
  .window-sidebar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    min-height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 6px !important;
    gap: 4px !important;
  }
  .window-sidebar .sidebar-item {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 0.65rem !important;
    padding: 6px 10px !important;
    border-radius: var(--r-sm) !important;
    flex: none !important;
  }
  .window-content {
    height: auto !important;
    min-height: 180px !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  /* 10. Inner Mockup Widget Stack Refinements */
  .mockup-a11y-flex {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .mockup-color-controls {
    flex-direction: column !important;
    gap: 6px !important;
  }
  .mockup-sliders-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .mockup-code-box {
    margin-top: 8px !important;
  }
  .fw-stats-row {
    flex-direction: column !important;
    gap: 6px !important;
  }
  .fw-stat-card {
    width: 100% !important;
  }
  .fw-btn-row {
    flex-wrap: wrap !important;
  }

  /* 11. General spacing overrides */
  .tool-modal-main {
    padding: 16px !important;
  }
  .mood-chips, .segment-tabs {
    flex-wrap: wrap !important;
  }
}