:root{
  --bg:#f3f7fa;
  --bg2:#e7eef3;
  --bg-glow:rgba(36,115,230,.12);
  --panel:rgba(255,255,255,.84);
  --panel2:rgba(255,255,255,.9);
  --border:rgba(17,24,39,.08);
  --line:rgba(17,24,39,.08);
  --text:#1f2937;
  --muted:#5b687a;
  --label:#566174;
  --subtle:#344256;
  --accent:#2473e6;
  --accent2:#0f766e;
  --shadow:0 14px 34px rgba(31,41,55,.08);
  --radius-xl:18px;
  --radius-lg:14px;
  --radius-md:10px;
  --radius-sm:8px;
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:20px;
  --copy:#4b5563;
  --input-bg:rgba(255,255,255,.9);
  --input-border:rgba(17,24,39,.14);
  --input-focus-border:rgba(36,115,230,.6);
  --input-focus-ring:rgba(36,115,230,.12);
  --input-focus-bg:#fff;
  --btn-bg:rgba(255,255,255,.86);
  --btn-border:rgba(17,24,39,.12);
  --btn-text:var(--text);
  --btn-hover-bg:rgba(255,255,255,.96);
  --btn-hover-border:rgba(17,24,39,.2);
  --row-bg:rgba(255,255,255,.66);
  --row-hover-bg:rgba(255,255,255,.82);
  --row-border:rgba(17,24,39,.1);
  --drag-border:rgba(36,115,230,.35);
  --drag-bg:rgba(36,115,230,.08);
  --drag-over-border:rgba(36,115,230,.55);
  --drag-over-bg:rgba(36,115,230,.08);
  --drag-over-shadow:rgba(36,115,230,.26);
  --icon-btn-bg:rgba(255,255,255,.8);
  --remove:#ff647f;
  --chip-bg:rgba(36,115,230,.07);
  --chip-border:rgba(36,115,230,.12);
  --chip-text:#1f3759;
  --swatch-card-bg:rgba(255,255,255,.35);
  --swatch-card-border:rgba(17,24,39,.12);
  --swatch-border:rgba(255,255,255,.14);
  --checker:rgba(255,255,255,.06);
  --copy-small-bg:rgba(255,255,255,.78);
  --copy-small-border:rgba(17,24,39,.12);
  --textarea-bg:#fff;
  --textarea-border:rgba(17,24,39,.12);
  --empty-bg:rgba(255,255,255,.52);
  --empty-border:rgba(17,24,39,.2);
  --toast-bg:rgba(17,24,39,.92);
  --toast-text:#f9fafb;
  --toast-border:rgba(255,255,255,.18);
  --toast-success-bg:#dcfce7;
  --toast-success-border:#86efac;
  --toast-success-progress:#22c55e;
  --toast-success-text:#14532d;
  --toast-error-bg:#fee2e2;
  --toast-error-border:#fca5a5;
  --toast-error-progress:#ef4444;
  --toast-error-text:#7f1d1d;
  --settings-card-bg:var(--panel2);
  --settings-card-border:var(--line);
  --settings-card-shadow:none;
  --settings-card-help:var(--muted);
  --theme-icon-filter:none;
  --fs-h1:clamp(2rem,3.2vw,3rem);
  --fs-h2:1.2rem;
  --fs-h3:1.02rem;
  --fs-body:14px;
  --lh-body:1.55;
}

body[data-theme="dark"]{
  --bg:#1A2437;
  --bg2:#253247;
  --bg-glow:rgba(124,156,255,.22);
  --panel:rgba(22,31,46,.78);
  --panel2:rgba(22,31,46,.82);
  --border:rgba(255,255,255,.14);
  --line:rgba(255,255,255,.14);
  --text:#F4F8FF;
  --muted:#C2CCE1;
  --label:#E7EEFF;
  --subtle:#ECF2FF;
  --accent:#9DB4FF;
  --accent2:#7FD0C8;
  --shadow:0 14px 34px rgba(10,16,28,.24);
  --copy:#ECF2FF;
  --input-bg:rgba(255,255,255,.08);
  --input-border:rgba(255,255,255,.16);
  --input-focus-border:rgba(157,180,255,.58);
  --input-focus-ring:rgba(157,180,255,.16);
  --input-focus-bg:rgba(255,255,255,.12);
  --btn-bg:rgba(255,255,255,.10);
  --btn-border:rgba(255,255,255,.16);
  --btn-text:#F4F8FF;
  --btn-hover-bg:rgba(255,255,255,.16);
  --btn-hover-border:rgba(255,255,255,.26);
  --row-bg:rgba(255,255,255,.07);
  --row-hover-bg:rgba(255,255,255,.12);
  --row-border:rgba(255,255,255,.16);
  --drag-border:rgba(124,156,255,.35);
  --drag-bg:rgba(124,156,255,.12);
  --drag-over-border:rgba(124,156,255,.55);
  --drag-over-bg:rgba(124,156,255,.14);
  --drag-over-shadow:rgba(124,156,255,.26);
  --icon-btn-bg:rgba(255,255,255,.10);
  --remove:#FFB7C3;
  --chip-bg:rgba(255,255,255,.11);
  --chip-border:rgba(255,255,255,.18);
  --chip-text:#F0F5FF;
  --swatch-card-bg:rgba(255,255,255,.08);
  --swatch-card-border:rgba(255,255,255,.18);
  --swatch-border:rgba(255,255,255,.18);
  --checker:rgba(255,255,255,.08);
  --copy-small-bg:rgba(255,255,255,.09);
  --copy-small-border:rgba(255,255,255,.14);
  --textarea-bg:rgba(255,255,255,.09);
  --textarea-border:rgba(255,255,255,.18);
  --empty-bg:rgba(255,255,255,.06);
  --empty-border:rgba(255,255,255,.2);
  --toast-bg:rgba(22,31,46,.96);
  --toast-text:#F7FBFF;
  --toast-border:rgba(255,255,255,.16);
  --toast-success-bg:rgba(24,73,47,.96);
  --toast-success-border:rgba(110,231,183,.44);
  --toast-success-progress:#6ee7b7;
  --toast-success-text:#ecfdf5;
  --toast-error-bg:rgba(122,38,38,.96);
  --toast-error-border:rgba(252,165,165,.46);
  --toast-error-progress:#fda4af;
  --toast-error-text:#fff1f2;
  --settings-card-bg:var(--panel2);
  --settings-card-border:var(--line);
  --settings-card-shadow:none;
  --settings-card-help:var(--muted);
  --theme-icon-filter:brightness(0) invert(1);
}

*{box-sizing:border-box}
html,body{margin:0}

body{
  min-height:100vh;
  font-family:"Poppins",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:var(--fs-body);
  color:var(--text);
  background:
    radial-gradient(circle at top left, var(--bg-glow), transparent 30%),
    radial-gradient(circle at top right, rgba(15,118,110,.09), transparent 24%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}

.shell{
  width:min(1920px, calc(100% - 28px));
  margin:14px auto 22px;
  display:grid;
  gap:var(--space-3);
}

.hero,.panel{
  background:var(--panel);
  backdrop-filter:blur(10px);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
}

.hero{padding:var(--space-4); display:grid; gap:var(--space-2)}
.hero-head{display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap}

.top-controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

.main-menu{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.menu-toggle{
  display:none;
  width:38px;
  height:34px;
  padding:0;
  border-radius:var(--radius-md);
  border:1px solid var(--btn-border);
  background:var(--btn-bg);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
}

.menu-toggle-bar{
  width:16px;
  height:2px;
  background:var(--btn-text);
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}

.menu-toggle.is-open .menu-toggle-bar:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}

.menu-toggle.is-open .menu-toggle-bar:nth-child(2){
  opacity:0;
}

.menu-toggle.is-open .menu-toggle-bar:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}

.menu-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:34px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--btn-border);
  background:var(--btn-bg);
  color:var(--btn-text);
  text-decoration:none;
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.menu-link-icon{
  width:12px;
  height:12px;
  flex:0 0 12px;
  filter:var(--theme-icon-filter);
}

.menu-link:hover,
.menu-link:focus-visible{
  background:#FFD53E;
  border-color:var(--btn-hover-border);
  color:#1f2937;
  transform:translateY(-1px);
}

.menu-link:hover .menu-link-icon,
.menu-link:focus-visible .menu-link-icon,
.menu-link.is-active .menu-link-icon{
  filter:none;
}

.menu-link.is-active{
  background:#FFD53E;
  border-color:var(--btn-hover-border);
  color:#1f2937;
}

.settings-btn{
  width:34px;
  height:34px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:var(--radius-md);
  background:var(--btn-bg);
  border:1px solid var(--btn-border);
  color:var(--btn-text);
}

.settings-btn:hover,
.settings-close-btn:hover{
  background:#FFD53E;
  border-color:#e8be2c;
}

.settings-icon{
  width:16px;
  height:16px;
  filter:var(--theme-icon-filter);
}

.settings-btn:hover .settings-icon,
.settings-close-btn:hover .settings-icon{
  filter:none;
}

.settings-close-btn{
  width:34px;
  height:34px;
  padding:0;
  display:grid;
  place-items:center;
}

.lang-switch{
  display:grid;
  gap:6px;
  font-size:9px;
  font-weight:600;
  color:var(--label);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.flag-group{display:flex; gap:6px}

.flag-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-radius:var(--radius-sm);
  border:1px solid var(--btn-border);
  background:var(--btn-bg);
  color:var(--btn-text);
  font-size:10px;
  font-weight:700;
}

.flag-btn.active{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(36,115,230,.15);
}

.flag-icon{
  width:16px;
  height:12px;
  border-radius:2px;
  border:1px solid var(--btn-border);
  object-fit:cover;
}

.theme-switch{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid var(--btn-border);
  background:var(--btn-bg);
}

.theme-icon{width:14px; height:14px; filter:var(--theme-icon-filter)}

.theme-switch input{position:absolute; opacity:0; pointer-events:none}

.theme-slider{
  width:34px;
  height:18px;
  border-radius:999px;
  background:rgba(124,156,255,.2);
  position:relative;
  border:1px solid var(--btn-border);
}

.theme-slider::after{
  content:"";
  width:12px;
  height:12px;
  border-radius:999px;
  background:#fff;
  position:absolute;
  top:2px;
  left:2px;
  transition:left .18s ease;
}

body[data-theme="dark"] .theme-slider::after{left:18px; background:#e2e8f0}

h1{
  margin:0;
  font-size:var(--fs-h1);
  line-height:1.02;
  letter-spacing:-.04em;
  color:var(--subtle);
}

.hero p,.sub,.hint,.export-meta,.empty p{margin:0; color:var(--muted); font-size:var(--fs-body); line-height:var(--lh-body)}

.layout{
  display:grid;
  grid-template-columns:460px minmax(0,1fr);
  gap:var(--space-3);
  align-items:start;
}

.info-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--space-3);
}

.info-panel{
  display:grid;
  gap:10px;
}

.info-panel p{
  margin:0;
  color:var(--muted);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
}

.faq-list{
  display:grid;
  gap:8px;
}

.faq-group-title{
  margin:14px 2px 4px;
  font-size:var(--fs-h3);
  font-weight:700;
  letter-spacing:.02em;
  color:var(--subtle);
}

.faq-list details{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--row-bg);
  overflow:hidden;
}

.faq-list summary{
  cursor:pointer;
  list-style:none;
  padding:10px 12px;
  font-size:var(--fs-body);
  font-weight:700;
  color:var(--subtle);
}

.faq-list summary::-webkit-details-marker{display:none}

.faq-list details[open] summary{
  border-bottom:1px solid var(--line);
  background:var(--btn-bg);
}

.faq-list details p{
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  padding:10px 12px 12px;
}

.faq-list details ol{
  margin:0;
  padding:2px 28px 12px;
  color:var(--muted);
  font-size:var(--fs-body);
  display:grid;
  gap:6px;
  line-height:var(--lh-body);
}

.faq-list details li{
  margin:0;
}

.shell-static{
  max-width:980px;
}

.static-controls{
  align-items:center;
}

.static-panel{
  margin-top:2px;
}

.about-meta{
  font-size:12px;
  color:var(--subtle);
}

.about-list{
  margin:0;
  padding:0 0 0 18px;
  color:var(--muted);
  font-size:var(--fs-body);
  display:grid;
  gap:6px;
}

.about-list li{
  line-height:var(--lh-body);
}

.static-panel > h3{
  margin:12px 0 4px;
  font-size:var(--fs-h3);
  color:var(--subtle);
}

.static-panel > p + h3{
  margin-top:12px;
}

.about-meta strong{
  margin-right:6px;
}

.site-footer{
  text-align:center;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.04em;
  padding:4px 8px 10px;
}

.site-footer p{margin:0}

.panel{padding:var(--space-4)}
.panel h2{margin:0 0 6px; font-size:var(--fs-h2); letter-spacing:-.01em; color:var(--subtle)}
.panel > .sub{margin-bottom:var(--space-2)}
.fields,.color-list,.row-grid,.export-actions{display:grid; gap:var(--space-2)}
.field{display:grid; gap:var(--space-1)}
.section-head{margin-top:var(--space-3); margin-bottom:var(--space-2); display:grid; gap:6px}

.step-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

#stepPercentValue,
#lightLimitValue,
#darkLimitValue,
#neutralTintStrengthValue{
  min-width:48px;
  text-align:right;
  font-size:11px;
  font-weight:700;
  color:var(--subtle);
  letter-spacing:.03em;
}

.panel-preview{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.panel-preview .preview-top{margin-bottom:var(--space-2)}

label{
  font-size:9px;
  font-weight:600;
  color:var(--label);
  letter-spacing:.08em;
  text-transform:uppercase;
}

input,button,textarea{font:inherit}

input[type="text"],input[type="number"]{
  width:100%;
  border:1px solid var(--input-border);
  border-radius:var(--radius-md);
  background:var(--input-bg);
  color:var(--text);
  padding:10px 12px;
  outline:none;
  transition:.16s ease;
}

input[type="text"]:focus,input[type="number"]:focus{
  border-color:var(--input-focus-border);
  box-shadow:0 0 0 3px var(--input-focus-ring);
  background:var(--input-focus-bg);
}

input[type="range"]{
  width:100%;
  height:8px;
  margin:2px 0;
  border-radius:999px;
  background:linear-gradient(90deg, rgb(255, 213, 62), rgb(255, 218, 86));
  border:1px solid var(--input-border);
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}

input[type="range"]:active{
  cursor:grabbing;
}

input[type="range"]::-webkit-slider-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:linear-gradient(135deg, #FFD53E, #F2B93A);
  border:2px solid #fff6cc;
  box-shadow:0 3px 10px rgba(255, 207, 34, .55);
  -webkit-appearance:none;
  cursor:pointer;
}

input[type="range"]:active::-webkit-slider-thumb{
  cursor:grabbing;
}

input[type="range"]::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:linear-gradient(135deg, #FFD53E, #F2B93A);
  border:2px solid #fff6cc;
  box-shadow:0 3px 10px rgba(255, 207, 34, .55);
  cursor:pointer;
}

input[type="range"]:active::-moz-range-thumb{
  cursor:grabbing;
}

input[type="range"]:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--input-focus-ring);
}

.global-grid{display:grid; grid-template-columns:1fr; gap:12px}
.limits-grid{grid-template-columns:1fr 1fr}

.settings-cards{
  grid-template-columns:1fr;
  gap:12px;
}

.settings-card{
  border-radius:var(--radius-md);
  border:1px solid var(--settings-card-border);
  background:var(--settings-card-bg);
  box-shadow:var(--settings-card-shadow);
  padding:12px;
}

.settings-card-wide{
  grid-column:1 / -1;
}

.settings-card .field{
  gap:10px;
}

.settings-card-help{
  margin:0;
  font-size:11px;
  line-height:1.45;
  color:var(--settings-card-help);
}

.neutral-bias-legend{
  margin-top:4px;
  font-size:10px;
  color:var(--muted);
  text-transform:none;
  letter-spacing:0;
}

.toggle-row{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  text-transform:none;
  letter-spacing:0;
  color:var(--subtle);
}

.toggle-row input[type="checkbox"]{
  accent-color:#FFD53E;
}

button{
  cursor:pointer;
  border:0;
  border-radius:var(--radius-md);
  padding:11px 13px;
  font-weight:700;
  transform:translateY(0);
  box-shadow:0 0 0 rgba(36,115,230,0);
  will-change:transform, box-shadow, background, border-color;
  transition:transform .24s cubic-bezier(.22,.61,.36,1), box-shadow .24s ease, background .24s ease, border-color .24s ease;
}

button:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(255, 213, 62, 0.2);
}
button:active{transform:translateY(0)}

.btn-primary{
  background:linear-gradient(135deg, var(--accent), #3498db);
  color:#fff;
  box-shadow:0 8px 24px rgba(255, 213, 62, 0.2);
}

.btn-secondary{
  background:var(--btn-bg);
  color:var(--btn-text);
  border:1px solid var(--btn-border);
  transition:background .2s ease, border-color .2s ease;
}

.btn-secondary:hover{
  background:#FFD53E;
  color:#1f2937;
  border-color:var(--btn-hover-border);
}

.flag-btn:hover,
.theme-switch:hover{
  background:var(--btn-hover-bg);
  border-color:var(--btn-hover-border);
}

.color-row{
  display:grid;
  grid-template-columns:26px minmax(0,1fr) 122px 58px 36px;
  gap:var(--space-1);
  align-items:center;
  padding:var(--space-2);
  border-radius:var(--radius-lg);
  background:var(--row-bg);
  border:1px solid var(--row-border);
  position:relative;
}

.color-row:hover{background:var(--row-hover-bg)}

.color-row.row-locked .name-input,
.color-row.row-locked .hex-input,
.color-row.row-locked .picker-input{
  opacity:.75;
}

.color-row.dragging{
  opacity:.62;
  transform:scale(.995);
  border-color:var(--drag-border);
  background:var(--drag-bg);
}

.color-row.drop-before,
.color-row.drop-after{
  border-color:var(--drag-over-border);
  background:var(--drag-over-bg);
  box-shadow:inset 0 0 0 1px var(--drag-over-shadow);
}

/* Clear insertion hint when a row is hovered during drag-and-drop. */
.color-row.drop-before::before,
.color-row.drop-after::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
}

.color-row.drop-before::before{top:-2px}
.color-row.drop-after::after{bottom:-2px}

.drag-handle{
  width:26px;
  height:26px;
  border:0;
  background:transparent;
  color:var(--muted);
  display:grid;
  place-items:center;
  padding:0;
  cursor:grab;
}

.color-row.row-locked .drag-handle,
.color-row.row-locked .drag-handle:hover{
  cursor:not-allowed;
  color:var(--muted);
}

.drag-handle svg{width:14px;height:14px}

input[type="color"]{
  width:100%;
  height:36px;
  border:1px solid var(--input-border);
  border-radius:9px;
  background:transparent;
  padding:2px;
  cursor:pointer;
}

.color-row.row-locked input[type="color"],
.color-row.row-locked input[type="color"]:hover,
.color-row.row-locked .picker-input{
  cursor:not-allowed;
}

input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
input[type="color"]::-webkit-color-swatch{border:none;border-radius:8px}

.icon-btn{
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:0;
  border-radius:var(--radius-md);
  background:var(--icon-btn-bg);
  border:1px solid var(--btn-border);
  color:var(--copy);
  flex:0 0 auto;
}

.icon-btn svg{width:14px;height:14px}
.remove-btn{color:var(--remove)}
.row-spacer{width:34px;height:34px}

.top-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.color-list-main{margin-top:var(--space-2)}
.preview-top{display:flex; justify-content:space-between; gap:var(--space-2); align-items:flex-start; margin-bottom:var(--space-2)}
.preview-top .sub{max-width:80ch}

.branch{padding:var(--space-1) 0; border:0; background:transparent; display:grid; gap:var(--space-1)}
.branch-header{display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap}
.branch h3{margin:0; font-size:var(--fs-h3); color:var(--subtle)}

.row-grid{grid-template-columns:repeat(10,minmax(0,1fr)); overflow:hidden; padding-bottom:4px}

.swatch{
  min-width:0;
  display:grid;
  gap:var(--space-1);
  border:1px solid var(--swatch-card-border);
  border-radius:var(--radius-lg);
  padding:5px;
  background:var(--swatch-card-bg);
}

.swatch-color{
  position:relative;
  height:88px;
  border-radius:var(--radius-md);
  border:1px solid var(--swatch-border);
  overflow:hidden;
  background-image:
    linear-gradient(45deg, var(--checker) 25%, transparent 25%, transparent 75%, var(--checker) 75%, var(--checker)),
    linear-gradient(45deg, var(--checker) 25%, transparent 25%, transparent 75%, var(--checker) 75%, var(--checker));
  background-position:0 0, 10px 10px;
  background-size:20px 20px;
}

.swatch-fill{position:absolute; inset:0}

/* Keep swatch token name readable above any color value. */
.swatch-name-chip{
  position:absolute;
  left:6px;
  right:6px;
  bottom:6px;
  background:rgba(255,255,255,.92);
  color:#111827;
  border-radius:var(--radius-sm);
  padding:2px 6px;
  font-size:9px;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  z-index:2;
}

.value-row{display:grid; grid-template-columns:minmax(0,1fr) 14px; gap:4px; align-items:center}
.value-label{font-size:8px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.value-text{font-size:10px; color:var(--subtle); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.copy-small{
  width:14px;
  height:14px;
  padding:0;
  border-radius:0;
  background:transparent;
  border:0;
  color:var(--copy);
  display:grid;
  place-items:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

.swatch:hover .copy-small,
.swatch:focus-within .copy-small{opacity:1; pointer-events:auto}

.copy-small:hover,
.copy-small:focus-visible{color:#FFD53E}

.copy-small svg{width:13px;height:13px}

.palette-block{
  display:grid;
  gap:var(--space-2);
  margin-bottom:var(--space-2);
  padding:var(--space-3);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:var(--row-bg);
}

.palette-block:last-child{margin-bottom:0}
.palette-title{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.palette-title h2{font-size:var(--fs-h2); margin:0; color:var(--subtle)}

.base-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--chip-bg);
  border:1px solid var(--chip-border);
  color:var(--chip-text);
  font-size:.82rem;
}

.base-dot{
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.34);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12);
}

.export-box{
  margin-top:var(--space-2);
  margin-bottom:var(--space-3);
  display:grid;
  gap:var(--space-2);
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  padding:var(--space-3);
}

.export-actions{grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px}

.export-output-details{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--panel);
  overflow:hidden;
}

.export-output-summary{
  cursor:pointer;
  list-style:none;
  padding:10px 12px;
  font-size:12px;
  font-weight:600;
  color:var(--subtle);
  user-select:none;
}

.export-output-summary::-webkit-details-marker{display:none}

.export-output-details[open] .export-output-summary{
  border-bottom:1px solid var(--line);
  background:var(--btn-bg);
}

textarea{
  width:100%;
  min-height:220px;
  resize:vertical;
  border-radius:var(--radius-md);
  border:1px solid var(--textarea-border);
  background:var(--textarea-bg);
  color:var(--text);
  padding:12px;
  outline:none;
  line-height:1.5;
}

.export-output-details textarea{
  border:0;
  border-radius:0;
  background:transparent;
  min-height:220px;
}

.empty{
  min-height:320px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:24px;
  border:1px dashed var(--empty-border);
  border-radius:var(--radius-xl);
  background:var(--empty-bg);
}

.empty h3{margin:0 0 8px; font-size:var(--fs-h2); color:var(--subtle)}

.toast-stack{
  position:fixed;
  right:18px;
  bottom:18px;
  display:grid;
  gap:10px;
  width:min(360px, calc(100vw - 24px));
  z-index:20;
  pointer-events:none;
}

.toast{
  background:var(--toast-bg);
  color:var(--toast-text);
  padding:12px 14px;
  border:1px solid var(--toast-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  opacity:0;
  transform:translateY(14px);
  pointer-events:none;
  transition:.2s ease;
  overflow:hidden;
}

.toast::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:3px;
  transform-origin:right center;
  transform:scaleX(1);
  opacity:0;
}

.toast.show{opacity:1; transform:translateY(0)}

.toast.show::after{
  opacity:1;
  animation:toast-progress var(--toast-duration, 4000ms) linear forwards;
}

.toast.toast-success{
  background:var(--toast-success-bg);
  border-color:var(--toast-success-border);
  color:var(--toast-success-text, var(--toast-text));
}

.toast.toast-success::after{
  background:var(--toast-success-progress);
}

.toast.toast-error{
  background:var(--toast-error-bg);
  border-color:var(--toast-error-border);
  color:var(--toast-error-text, var(--toast-text));
}

.toast.toast-error::after{
  background:var(--toast-error-progress);
}

@keyframes toast-progress{
  from{transform:scaleX(1)}
  to{transform:scaleX(0)}
}

.settings-overlay{
  position:fixed;
  inset:0;
  background:rgba(8,12,20,.46);
  backdrop-filter:blur(2px);
  z-index:28;
}

.settings-popup{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -48%) scale(.98);
  width:min(620px, calc(100% - 24px));
  max-height:calc(100vh - 36px);
  overflow:auto;
  padding:var(--space-4);
  border-radius:var(--radius-xl);
  border:1px solid var(--border);
  background:var(--panel);
  box-shadow:var(--shadow);
  z-index:29;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}

.settings-overlay{
  opacity:0;
  transition:opacity .18s ease;
}

.settings-popup.is-open{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%, -50%) scale(1);
}

.settings-overlay.is-open{opacity:1}

.settings-popup-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.settings-popup-head h2{margin:0}
.settings-popup > .sub{margin-bottom:12px}

body.popup-open{overflow:hidden}

@media (max-width: 1300px){
  .layout{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr}
}

@media (max-width: 860px){
  .hero-head{
    gap:10px;
    position:relative;
  }
  .top-controls{
    padding-right:46px;
  }
  .menu-toggle{
    display:inline-flex;
    position:absolute;
    right:0;
    top:0;
    margin-left:0;
  }
  .main-menu{
    display:none;
    width:100%;
    justify-content:stretch;
    gap:6px;
  }
  .main-menu.is-open{
    display:grid;
    grid-template-columns:1fr;
  }
  .main-menu .menu-link{
    width:100%;
    justify-content:flex-start;
    border-radius:var(--radius-md);
    text-transform:none;
    letter-spacing:.02em;
    font-size:12px;
  }
  .menu-link{font-size:10px}
  .color-row{grid-template-columns:20px minmax(0,1fr) 96px 52px 34px}
  .top-actions,.global-grid,.limits-grid,.export-actions,.settings-cards{grid-template-columns:1fr}
}

@media (max-width: 640px){
  .shell{width:min(100% - 16px, 1920px); margin:8px auto 16px}
  .hero,.panel{padding:16px}
  .color-row{
    grid-template-columns:24px minmax(0, 1fr) 54px 34px;
    grid-template-rows:auto auto;
    gap:8px;
    padding:10px;
    align-items:center;
  }
  .drag-handle{
    grid-column:1;
    grid-row:1 / span 2;
    width:24px;
    height:24px;
    align-self:start;
    margin-top:2px;
  }
  .name-input{
    grid-column:2 / 5;
    grid-row:1;
    min-height:40px;
  }
  .hex-input{
    grid-column:2;
    grid-row:2;
    min-height:40px;
  }
  .picker-input{
    grid-column:3;
    grid-row:2;
    width:54px;
    height:40px;
    justify-self:stretch;
  }
  .remove-btn,
  .row-spacer{
    grid-column:4;
    grid-row:2;
    width:34px;
    height:34px;
    align-self:center;
    justify-self:end;
  }
  .row-grid{
    display:flex;
    flex-wrap:nowrap;
    gap:var(--space-2);
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
  }
  .swatch{
    min-width:132px;
    flex:0 0 132px;
  }
  .settings-popup{width:calc(100% - 16px); max-height:calc(100vh - 16px); padding:16px}
}