/* ═══════════════════════════════════════════════════════════════════
   NORDLYS - SETTINGS DRAWER, THEME STUDIO & ICON MODAL
   ═══════════════════════════════════════════════════════════════════ */

/* ── Resizable Settings Drawer ────────────────────────────────── */
#cfg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--nl-z-drawer);
  /* Wide enough for the 168px rail and a column of content beside it. The
     floor is where the layout breaks, so it is enforced; there is no ceiling
     worth enforcing, because nothing breaks by being given more room. The
     drag handler clamps to the same numbers — it used to use 380 and 95vw
     while the stylesheet said 600 and 720, which left the handle with about
     a hundred pixels of travel and no way to tell why. */
  width: clamp(600px, 46vw, 720px);
  min-width: 600px;
  max-width: 95vw;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--nl-surface-card-deep) 96%, transparent);
  border-left: 1px solid var(--nl-border);
  /* No backdrop-filter. The panel is already 94% opaque, so blurring what is
     behind it moved the picture by 0.28 of 255 — measured, not estimated —
     while making the browser re-sample and re-blur a full-height backdrop on
     every frame of the slide. That is the whole cost of the effect for none of
     its benefit. */
  box-shadow: var(--nl-shadow-drawer);
  transform: translateX(calc(100% + 40px));
  transition: transform var(--nl-transition-panel);
}

#cfg.open, body.cfgopen #cfg {
  transform: none;
}

body.resizing-drawer {
  user-select: none !important;
  cursor: ew-resize !important;
}
body.resizing-drawer #cfg {
  transition: none !important;
}

/* Draggable Left Resize Handle */
#cfg-resizer {
  position: absolute;
  left: -6px;
  top: 0;
  bottom: 0;
  width: 12px;
  cursor: ew-resize;
  z-index: var(--nl-z-raised);
  display: flex;
  align-items: center;
  justify-content: center;
}
#cfg-resizer::after {
  content: "";
  width: 3px;
  height: 48px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
  transition: height var(--nl-transition-control), background var(--nl-transition-control), box-shadow var(--nl-transition-control);
}
#cfg-resizer:hover::after, #cfg-resizer.dragging::after {
  height: 80px;
  background: var(--accent);
  box-shadow: var(--nl-shadow-1);
}

/* Header & Width Presets */
.chead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: color-mix(in srgb, var(--card-tint-deep, #090e1c) 52%, transparent);
}
.chead b {
  font-size: var(--nl-text-lg);
  font-weight: 650;
  letter-spacing: var(--nl-track-tight);
  color: var(--ink);
  white-space: nowrap;
}

#cfgx {
  /* The touch-target size, not the 28px this rule used to claim: a line near
     the end of the file was already resizing it, and the number here was only
     ever read by whoever came looking for it. */
  width: var(--nl-target-min);
  height: var(--nl-target-min);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--dim);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color var(--nl-motion-control), background-color var(--nl-motion-control), opacity var(--nl-motion-control), transform var(--nl-motion-control);
}
#cfgx:hover {
  /* Forced white ink on a translucent red is white on pale pink once a light
     theme is underneath it. The tint carries the meaning; the ink follows the
     theme, as it does everywhere else. */
  color: var(--nl-status-danger);
  background: color-mix(in srgb, var(--nl-status-danger) 18%, transparent);
  border-color: color-mix(in srgb, var(--nl-status-danger) 40%, transparent);
}

/* ── Horizontally Scrollable Tab Navigation ───────────────────── */
.ctabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--card-tint-deep, #090e1c) 42%, transparent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Right-edge fade signals that more tabs are scrollable */
  mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent 100%);
}
.ctabs::-webkit-scrollbar {
  display: none;
}

.ctab {
  flex: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--dim);
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: var(--nl-text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--nl-transition-control), background-color var(--nl-transition-control), border-color var(--nl-transition-control), opacity var(--nl-motion-control), transform var(--nl-transition-control);
  user-select: none;
}
.ctab:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
}
.ctab.active {
  background: var(--accent);
  color: #060c1a;
  font-weight: 650;
  box-shadow: var(--nl-shadow-1);
}

/* ── Drawer Body & Sections ───────────────────────────────────── */
.cbody {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cbody::-webkit-scrollbar {
  width: 6px;
}
.cbody::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

.csec {
  display: none;
  flex-direction: column;
  gap: 16px;
}
.csec.active {
  display: flex;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.csec h3 {
  font-size: var(--nl-text-sm);
  font-weight: 650;
  letter-spacing: var(--nl-track-none);
  color: var(--nl-text-secondary);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.csec h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
/* The row's own label, not every span inside the row. As `.row span` it also
   reached into the controls — a themed select's value, a file button's
   caption — and painted them the label colour, which in light themes was the
   near-white of the dark ones: 1.02 to one, measured. */
.row > span {
  font-size: var(--nl-text-md);
  color: var(--nl-text-primary);
  font-weight: 450;
}
.row > span small {
  color: var(--nl-text-secondary);
}
/* A line of explanation under a setting's name, inside the same label. */
.row > span .setting-note-inline { display: block; margin-top: 2px; font-size: var(--nl-text-xs); line-height: 1.4; max-width: 44ch; }
.row b {
  color: var(--nl-accent-text);
  font-weight: 600;
}

/* Inputs & Form Controls */
.ipt {
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(14, 22, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--nl-text-primary);
  font-family: inherit;
  font-size: var(--nl-text-sm);
  outline: none;
  transition: border-color var(--nl-motion-control), box-shadow var(--nl-motion-control), background var(--nl-motion-control);
}
.ipt:focus {
  border-color: var(--accent);
  box-shadow: var(--nl-ring);
  background: rgba(18, 28, 54, 0.85);
}

select.ipt {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238ca0c4' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}
select.ipt option {
  background: var(--nl-surface-card-deep);
  color: var(--nl-text-primary);
}

input[type="range"].ipt {
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
  height: 6px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}
input[type="range"].ipt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Toggle Switch */
.tg {
  position: relative;
  width: 44px;
  height: 24px;
  display: inline-block;
  cursor: pointer;
  flex-shrink: 0;
}
.tg input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.tg i {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9999px;
  transition: background-color var(--nl-transition-enter), border-color var(--nl-motion-control), transform var(--nl-transition-enter);
}
.tg i::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: var(--nl-shadow-1);
  transition: transform var(--nl-transition-pop), background-color var(--nl-transition-control);
}
.tg input:focus-visible + i {
  box-shadow: var(--nl-ring);
}
.tg input:checked + i {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--nl-shadow-1);
}
.tg input:checked + i::after {
  transform: translateX(20px);
  background: #060c1a;
}

/* ── Color Mode Segmented Switch ──────────────────────────────── */
.color-mode-segmented {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: rgba(14, 22, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  margin-bottom: 12px;
}
.light-ui .color-mode-segmented {
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.mode-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--nl-text-secondary);
  font-family: inherit;
  font-size: var(--nl-text-sm);
  font-weight: 550;
  cursor: pointer;
  transition: color var(--nl-transition-control), background-color var(--nl-transition-control), border-color var(--nl-motion-control), transform var(--nl-transition-control);
}
.mode-btn:hover {
  color: var(--nl-text-primary);
  background: rgba(255, 255, 255, 0.06);
}
.light-ui .mode-btn {
  color: #475569;
}
.light-ui .mode-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #0f172a;
}
.mode-btn.active,
.light-ui .mode-btn.active {
  background: var(--accent);
  /* dark ink on the accent pill passes contrast on all 21 accents */
  color: #071018;
  box-shadow: var(--nl-shadow-1);
  font-weight: 650;
}

/* ── Theme Cards Grid & Subsections ───────────────────────────── */
.theme-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  margin-bottom: 8px;
}
.theme-section-header:first-of-type {
  margin-top: 2px;
}
.theme-section-title {
  font-size: var(--nl-text-sm);
  font-weight: 650;
  letter-spacing: var(--nl-track-none);
  color: var(--nl-text-secondary);
  display: flex;
  align-items: center;
  gap: 7px;
}
.light-ui .theme-section-title {
  color: #334155;
}
.theme-section-badge {
  font-size: var(--nl-text-2xs);
  font-weight: 700;
  padding: 1.5px 7px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--nl-text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.light-ui .theme-section-badge {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.10);
  color: #334155;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.theme-card {
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(14, 22, 42, 0.6);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  transition: color var(--nl-motion-control), background-color var(--nl-motion-control), border-color var(--nl-motion-control), box-shadow var(--nl-motion-control), transform var(--nl-transition-control);
}
.theme-card:hover {
  transform: translateY(-2px);
  background: rgba(22, 34, 64, 0.7);
  border-color: rgba(255, 255, 255, 0.2);
}
.theme-card.active {
  border-color: var(--accent);
  background: rgba(124, 156, 255, 0.14);
  box-shadow: var(--nl-ring-tight), var(--nl-shadow-2);
}

.light-ui .theme-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.09);
  box-shadow: var(--nl-shadow-1);
}
.light-ui .theme-card:hover {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: var(--nl-shadow-1);
}
.light-ui .theme-card.active {
  border-color: var(--accent);
  background: #ffffff;
  box-shadow: var(--nl-ring-tight), var(--nl-shadow-1);
}

.theme-preview {
  width: 100%;
  height: 48px;
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.theme-card b {
  font-size: var(--nl-text-xs);
  font-weight: 600;
  color: var(--nl-text-primary);
  text-align: center;
}
.light-ui .theme-card b {
  color: #0f172a;
  font-weight: 600;
}

/* ── Bookmark & Card Aesthetics Studio ────────────────────────── */
.card-customizer-card,
.liquid-glass-tuning-card {
  padding: 16px;
  border-radius: 16px;
  background: rgba(14, 22, 44, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--nl-shadow-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.light-ui .card-customizer-card,
.light-ui .liquid-glass-tuning-card,
.light-ui .custom-theme-tuning-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 0, 0, 0.09);
  box-shadow: var(--nl-shadow-2);
}
.light-ui .card-customizer-card h4,
.light-ui .liquid-glass-tuning-card h4,
.light-ui .custom-theme-tuning-card h4 {
  color: var(--nl-accent-text);
}
.light-ui .card-customizer-card div[data-i18n] {
  color: #475569;
}
.light-ui .card-customizer-card .row span,
.light-ui .liquid-glass-tuning-card .row span,
.light-ui .custom-theme-tuning-card .row span {
  color: #1e293b;
}
.light-ui .card-customizer-card .row b,
.light-ui .liquid-glass-tuning-card .row b,
.light-ui .custom-theme-tuning-card .row b {
  color: var(--nl-accent-text);
  font-weight: 650;
}
.light-ui .card-customizer-card .ipt,
.light-ui .liquid-glass-tuning-card .ipt,
.light-ui .custom-theme-tuning-card .ipt {
  background: rgba(241, 245, 249, 0.95);
  border-color: rgba(0, 0, 0, 0.12);
  color: #0f172a;
}
/* The resting rule above ties with the light-theme focus rule and wins on file
   order, which left this one field showing only its focus ring while every
   other input also lightened and took an accent border. */
.light-ui .custom-theme-tuning-card .ipt:focus {
  background: #ffffff;
  border-color: var(--nl-accent);
}
.light-ui .card-customizer-card input[type="range"].ipt,
.light-ui .liquid-glass-tuning-card input[type="range"].ipt,
.light-ui .custom-theme-tuning-card input[type="range"].ipt {
  background: rgba(0, 0, 0, 0.12);
}
.light-ui .custom-theme-box {
  background: rgba(241, 245, 249, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
}
.light-ui .color-picker-wrap {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.14);
  box-shadow: var(--nl-shadow-1);
}
.light-ui .color-label {
  color: #0f172a;
  font-weight: 550;
}
.light-ui .hex-text {
  color: #0f172a;
  font-weight: 600;
}

.card-live-preview-box,
.liquid-live-preview-box {
  position: relative;
  width: 100%;
  padding: 18px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1e1b4b, #3b82f6 40%, #ec4899 80%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
}
.light-ui .card-live-preview-box,
.light-ui .liquid-live-preview-box {
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 50%, #fbcfe8 100%);
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.06);
}

.preview-interactive-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: var(--card-radius, 24px);
  background: linear-gradient(
    160deg,
    rgb(from var(--card-tint, #141c34) r g b / calc(var(--glass-opacity, 0.7) * 0.75)),
    rgb(from var(--card-tint-deep, #090e1c) r g b / calc(var(--glass-opacity, 0.7) * 0.65))
  );
  border: 1px solid rgba(255, 255, 255, calc(var(--glass-border-sheen, 0.45) * 0.8));
  backdrop-filter: blur(var(--glass-blur, 28px)) saturate(var(--glass-saturate, 190%));
  -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) saturate(var(--glass-saturate, 190%));
  box-shadow: var(--nl-shadow-2);
  color: var(--ink);
  transition: color var(--nl-motion-control), background-color var(--nl-motion-control), border-color var(--nl-motion-control), box-shadow var(--nl-motion-control), transform var(--nl-transition-control);
  cursor: pointer;
  user-select: none;
}
.light-ui .preview-interactive-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--nl-shadow-2);
  color: #0f172a;
}
.preview-interactive-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--nl-shadow-2);
}
.preview-icon-box {
  width: 34px;
  height: 34px;
  border-radius: var(--tile-radius, 9px);
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.2), transparent 70%), var(--accent);
  display: grid;
  place-items: center;
  color: #ffffff;
  box-shadow: var(--nl-shadow-1);
  transition: color var(--nl-motion-control), background-color var(--nl-motion-control), box-shadow var(--nl-motion-control), transform var(--nl-motion-control);
}
.preview-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.preview-card-title {
  font-size: var(--nl-text-sm);
  font-weight: 650;
  color: var(--nl-text-primary);
}
.light-ui .preview-card-title {
  color: #0f172a;
}
.preview-card-sub {
  font-size: var(--nl-text-2xs);
  color: var(--nl-text-secondary);
}
.light-ui .preview-card-sub {
  color: #64748b;
}

/* ── Custom Theme Creator Styles ──────────────────────────────── */
.theme-card.add-custom-theme .add-custom-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
  color: var(--accent);
  transition: color var(--nl-motion-control), background-color var(--nl-motion-control), opacity var(--nl-motion-control), transform var(--nl-motion-control);
}

.theme-card.add-custom-theme:hover .add-custom-preview {
  border-color: var(--accent);
  background: rgba(124, 156, 255, 0.14);
  transform: scale(1.04);
  box-shadow: var(--nl-shadow-1);
}

.theme-card .del-custom-thm-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.85);
  color: #fff;
  border: 0;
  font-size: var(--nl-text-2xs);
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--nl-transition-fast), transform var(--nl-transition-fast);
  z-index: var(--nl-z-raised);
}

.theme-card:hover .del-custom-thm-btn {
  opacity: 1;
}

.theme-card .del-custom-thm-btn:hover {
  transform: scale(1.15);
  background: #ef4444;
}

.custom-theme-tuning-card {
  padding: 16px;
  border-radius: 16px;
  background: rgba(14, 22, 44, 0.75);
  border: 1px solid var(--accent);
  box-shadow: var(--nl-shadow-2);
  animation: popIn var(--nl-transition-control) both;
}

.custom-theme-box {
  background: rgba(10, 16, 32, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.custom-theme-warning { margin: 2px 0 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--nl-status-warning) 65%, transparent); border-radius: var(--nl-radius-sm); background: color-mix(in srgb, var(--nl-status-warning) 16%, var(--nl-surface-card-deep)); color: var(--nl-text-primary); font-size: var(--nl-text-sm); line-height: 1.4; }
.theme-color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.color-label {
  font-size: var(--nl-text-sm);
  font-weight: 500;
  color: var(--nl-text-primary);
}
.color-picker-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(8, 14, 28, 0.7);
  padding: 3px 8px 3px 4px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.color-well {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
}
.color-well::-webkit-color-swatch-wrapper { padding: 0; }
.color-well::-webkit-color-swatch { border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; }

.hex-text {
  width: 68px;
  background: transparent;
  border: 0;
  color: var(--nl-text-primary);
  font-family: var(--font-mono);
  font-size: var(--nl-text-xs);
  font-weight: 600;
  outline: none;
  text-transform: uppercase;
}

/* ── Bookmarks & Folders Manager in Settings ───────────────────── */
#cfg-groups-editor {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.group-editor-card {
  background: rgba(14, 22, 44, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity var(--nl-transition-control), border-color var(--nl-transition-control);
}
.group-editor-card.is-hidden-folder {
  opacity: 0.6;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(10, 16, 32, 0.4);
}
.group-editor-card.is-hidden-folder:hover {
  opacity: 0.9;
}
.group-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.group-label-input {
  font-size: var(--nl-text-md);
  font-weight: 650;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 6px;
  outline: none;
  flex: 1;
  transition: color var(--nl-motion-control), background-color var(--nl-motion-control), border-color var(--nl-motion-control);
}
.group-label-input:focus {
  background: rgba(8, 14, 28, 0.8);
  border-color: var(--accent);
}

.cols-select {
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(8, 14, 28, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--dim);
  font-size: var(--nl-text-xs);
  outline: none;
  cursor: pointer;
}

.links-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.link-editor-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(8, 14, 28, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background var(--nl-motion-fast);
}
.link-editor-row:hover {
  background: rgba(14, 22, 42, 0.75);
}

.icon-trigger-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--nl-motion-control), background-color var(--nl-motion-control), border-color var(--nl-motion-control), opacity var(--nl-motion-control), transform var(--nl-motion-control);
}
.icon-trigger-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.08);
}

.link-name-ipt, .link-url-ipt {
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(6, 11, 24, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--nl-text-sm);
  outline: none;
}
.link-name-ipt:focus, .link-url-ipt:focus {
  border-color: var(--accent);
}

.link-color-ipt {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  flex-shrink: 0;
}
.link-color-ipt::-webkit-color-swatch-wrapper { padding: 0; }
.link-color-ipt::-webkit-color-swatch { border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; }

.move-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.move-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--dim);
  font-size: var(--nl-text-2xs);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color var(--nl-motion-fast), background-color var(--nl-motion-fast), opacity var(--nl-motion-fast), transform var(--nl-motion-fast);
}
.move-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
  color: var(--ink);
}
.move-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.folder-transfer-select {
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(6, 11, 24, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--dim);
  font-size: var(--nl-text-2xs);
  outline: none;
  cursor: pointer;
  max-width: 90px;
}

/* Glass Buttons */
.glass-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink);
  font-size: var(--nl-text-sm);
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: color var(--nl-motion-control), background-color var(--nl-motion-control), border-color var(--nl-motion-control), box-shadow var(--nl-motion-control), transform var(--nl-transition-control);
}
/* One icon size across every button that has one, so a row of them lines up. */
.btn-icon { width: 16px; height: 16px; flex: 0 0 16px; opacity: .85; }

.glass-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}
/* Secondary actions in the panel are quiet. The add slot is dashed like the
   place a new folder will go; the guide is an ordinary button with its icon. */
.glass-btn.add-slot {
  width: 100%;
  margin-top: 14px;
  border-style: dashed;
  background: transparent;
  color: var(--nl-accent-text);
  font-weight: 600;
}
.glass-btn.add-slot:hover { background: color-mix(in srgb, var(--nl-accent) 10%, transparent); border-color: var(--nl-accent); }
.css-guide-btn { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.glass-btn.accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--nl-on-accent);
  font-weight: 600;
  box-shadow: var(--nl-shadow-1);
}
.glass-btn.accent:hover {
  filter: brightness(1.1);
}
/* One rule for every theme: the status token already has a light and a dark
   value, so the colour follows the theme and the weight never changes with
   it. The light copy of this rule was a bolder red, which moved the button. */
.glass-btn.danger {
  color: var(--nl-status-danger);
  background: color-mix(in srgb, var(--nl-status-danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--nl-status-danger) 32%, transparent);
}
.glass-btn.danger:hover {
  background: color-mix(in srgb, var(--nl-status-danger) 18%, transparent);
}

/* Custom Styled File Input */
.custom-file-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.hidden-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.glass-file-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  color: var(--ink);
  font-size: var(--nl-text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--nl-motion-control), background-color var(--nl-motion-control), border-color var(--nl-motion-control), transform var(--nl-motion-control);
}
.glass-file-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent);
  box-shadow: var(--nl-shadow-1);
}

/* ── Custom CSS Live Editor ───────────────────────────────────── */
#css-editor {
  width: 100%;
  height: 180px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(6, 11, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #8ce8ff;
  font-family: var(--font-mono);
  font-size: var(--nl-text-sm);
  line-height: 1.5;
  resize: vertical;
  outline: none;
}
#css-editor:focus {
  border-color: var(--accent);
  box-shadow: var(--nl-ring);
}

/* ── Universal 4-Source Icon Picker Modal ─────────────────────── */
#icon-modal {
  position: fixed;
  inset: 0;
  z-index: var(--nl-z-overlay);
  background: rgba(2, 6, 14, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--nl-motion-panel), transform var(--nl-motion-panel), visibility 0s var(--nl-motion-panel);
  padding: 20px;
}
#icon-modal.open {
  opacity: 1;
  visibility: visible;
}

.modal-box {
  width: min(92vw, 560px);
  max-height: 85vh;
  background: rgba(11, 18, 38, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  box-shadow: var(--nl-shadow-3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Pop plays on every open, not just once at page load */
#icon-modal.open .modal-box,
#css-docs-modal.open .modal-box {
  animation: modalPop var(--nl-transition-panel) both;
}

@keyframes modalPop {
  from { transform: scale(0.94) translateY(10px); }
  to { transform: none; }
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.modal-head b {
  font-size: var(--nl-text-lg);
  color: var(--ink);
}
.xbtn {
  background: transparent;
  border: 0;
  color: var(--dim);
  font-size: var(--nl-text-lg);
  cursor: pointer;
  padding: 4px;
}
.xbtn:hover {
  color: #fff;
}

.icon-modal-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(6, 10, 22, 0.4);
}
.icon-tab-btn {
  flex: 1;
  padding: 10px 8px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--dim);
  font-size: var(--nl-text-xs);
  font-weight: 500;
  cursor: pointer;
  /* The pane switches immediately. Keep the selection marker in lockstep with
     it; animating border-color left the old tab visibly selected for a frame. */
  transition: color var(--nl-motion-control), background-color var(--nl-motion-control), transform var(--nl-motion-control);
}
.icon-tab-btn:hover {
  color: var(--ink);
}
.icon-tab-btn.active {
  color: var(--nl-accent-text);
  border-bottom-color: var(--accent);
  background: rgba(124, 156, 255, 0.08);
}

.modal-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
  flex: 1;
}
.modal-tab-pane {
  display: none;
  flex-direction: column;
  gap: 12px;
}
.modal-tab-pane.active {
  display: flex;
}

.glass-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(14, 22, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink);
  font-size: var(--nl-text-sm);
  outline: none;
}
.glass-input:focus {
  border-color: var(--accent);
  box-shadow: var(--nl-ring);
}

.icon-category-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.icon-chip {
  flex: none;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--dim);
  font-size: var(--nl-text-xs);
  cursor: pointer;
  transition: color var(--nl-motion-fast), background-color var(--nl-motion-fast), border-color var(--nl-motion-fast), transform var(--nl-motion-fast);
}
.icon-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
}
.icon-chip.active {
  background: var(--accent);
  color: var(--nl-on-accent);
  font-weight: 600;
}

.icon-search-intro { margin: 0 0 12px; color: var(--nl-text-secondary); font-size: var(--nl-text-sm); line-height: 1.5; }
.icon-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.icon-search-status { min-height: 34px; padding: 8px 1px; color: var(--nl-text-tertiary); font-size: var(--nl-text-xs); }
.icon-search-legal { color: var(--nl-text-tertiary); font-size: var(--nl-text-2xs); text-align: center; }
.icon-search-row .glass-input { min-width: 0; }
.icon-search-row .glass-btn[aria-busy="true"] { opacity: .65; pointer-events: none; }

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(73px, 1fr));
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}
.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 4px;
  border-radius: 12px;
  background: rgba(14, 22, 44, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: color var(--nl-motion-control), background-color var(--nl-motion-control), border-color var(--nl-motion-control), transform var(--nl-motion-control);
}
.icon-item:hover {
  background: rgba(124, 156, 255, 0.2);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.icon-item svg,
.icon-item img,
.icon-item .mono {
  width: 34px;
  height: 34px;
  fill: var(--icon-preview-accent, currentColor);
  color: var(--ink);
}
.icon-item span {
  font-size: var(--nl-text-2xs);
  color: var(--dim);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon-item small {
  color: var(--nl-text-tertiary);
  font-size: var(--nl-text-2xs);
  transform: scale(.82);
  transform-origin: center;
  line-height: 1;
}
.discovered-icon img { object-fit: contain; }

.url-preview-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  /* Theme tokens, not a fixed near-black: on a light theme the fixed one
     made a grey slab with dark words on it, at under 2:1. */
  background: var(--nl-surface-card-deep);
  border: 1px solid var(--nl-border);
}
.url-preview-square {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--nl-text-primary) 6%, transparent);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}

.file-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  border-radius: 14px;
  background: rgba(8, 14, 30, 0.5);
  border: 2px dashed rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: color var(--nl-motion-control), background-color var(--nl-motion-control), border-color var(--nl-motion-control), transform var(--nl-motion-control);
}
.file-drop-zone:hover {
  background: rgba(14, 24, 52, 0.6);
  border-color: var(--accent);
}
.file-drop-hint { margin-top: 4px; color: var(--nl-text-secondary); font-size: var(--nl-text-2xs); }
.file-drop-hint.refused { color: var(--nl-status-danger); font-weight: 600; }
.file-drop-zone.drag-over {
  background: rgba(124, 156, 255, 0.18);
  border-color: var(--accent);
  box-shadow: 0 0 24px rgba(124, 156, 255, 0.35), inset 0 0 15px rgba(124, 156, 255, 0.15);
  transform: scale(1.015);
}

.css-preset-btn {
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--dim);
  font-size: var(--nl-text-2xs);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--nl-motion-control), background-color var(--nl-motion-control), border-color var(--nl-motion-control), transform var(--nl-motion-control);
}
.css-preset-btn:hover {
  background: rgba(124, 156, 255, 0.2);
  border-color: var(--accent);
  color: var(--ink);
  transform: translateY(-1px);
}

/* ── Interactive Icon Cropper Studio ──────────────────────────── */
.cropper-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cropper-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cropper-workspace {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 4px;
}

.cropper-viewport-wrap {
  position: relative;
  width: 260px;
  height: 260px;
  border-radius: 18px;
  overflow: hidden;
  background: 
    linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.03) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.03) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.03) 75%),
    rgba(6, 11, 24, 0.9);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: var(--nl-shadow-2);
  cursor: grab;
  user-select: none;
  touch-action: none;
  flex-shrink: 0;
}
.cropper-viewport-wrap:active {
  cursor: grabbing;
}

#cropper-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.cropper-overlay-guide {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1.5px dashed rgba(53, 214, 192, 0.5);
  border-radius: 18px;
}

.cropper-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--accent);
  border-style: solid;
  border-width: 0;
}
.cropper-corner.tl { top: 6px; left: 6px; border-top-width: 2.5px; border-left-width: 2.5px; border-top-left-radius: 6px; }
.cropper-corner.tr { top: 6px; right: 6px; border-top-width: 2.5px; border-right-width: 2.5px; border-top-right-radius: 6px; }
.cropper-corner.bl { bottom: 6px; left: 6px; border-bottom-width: 2.5px; border-left-width: 2.5px; border-bottom-left-radius: 6px; }
.cropper-corner.br { bottom: 6px; right: 6px; border-bottom-width: 2.5px; border-right-width: 2.5px; border-bottom-right-radius: 6px; }

.cropper-side-controls {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.cropper-label {
  font-size: var(--nl-text-xs);
  font-weight: 550;
  color: var(--dim);
}

.cropper-preview-card {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(14, 22, 44, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.cropper-tile-mockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.cropper-tile-box {
  width: 60px;
  height: 60px;
  border-radius: var(--tile-radius, 18px);
  background:
    radial-gradient(120% 120% at 30% 18%, rgba(53, 214, 192, 0.16), transparent 62%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: var(--nl-shadow-2);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 8px;
}

#cropper-tile-preview-canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.cropper-tile-lbl {
  font-size: var(--nl-text-2xs);
  font-weight: 450;
  color: var(--ink);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cropper-slider-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(14, 22, 44, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.cropper-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.crop-tool-btn {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink);
  font-size: var(--nl-text-sm);
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color var(--nl-motion-fast), background-color var(--nl-motion-fast), border-color var(--nl-motion-fast), transform var(--nl-motion-fast);
}
.crop-tool-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: var(--nl-accent-text);
}

.cropper-tools-row {
  display: flex;
  gap: 6px;
}

.crop-pill-btn {
  flex: 1;
  padding: 5px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--dim);
  font-size: var(--nl-text-2xs);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--nl-motion-fast), background-color var(--nl-motion-fast), border-color var(--nl-motion-fast), transform var(--nl-motion-fast);
  white-space: nowrap;
}
.crop-pill-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.18);
}

.cropper-actions-footer {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── CSS Docs Modal ────────────────────────────────────────────── */
#css-docs-modal {
  position: fixed;
  inset: 0;
  z-index: var(--nl-z-modal);
  background: rgba(2, 6, 14, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--nl-motion-panel), transform var(--nl-motion-panel), visibility 0s var(--nl-motion-panel);
  padding: 20px;
}
#css-docs-modal.open {
  opacity: 1;
  visibility: visible;
}
.css-docs-box {
  width: min(92vw, 600px);
}
.css-docs-body {
  padding: 0;
}
.css-tab-pane {
  display: none;
  padding: 20px;
}
.css-tab-pane.active {
  display: block;
  animation: fadeIn var(--nl-transition-control) both;
}
.css-tab-pane h4 {
  font-size: var(--nl-text-lg);
  color: var(--ink);
  margin-bottom: 6px;
}
.css-doc-desc {
  font-size: var(--nl-text-sm);
  color: var(--dim);
  margin-bottom: 16px;
}
.css-docs-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.css-docs-list li {
  font-size: var(--nl-text-sm);
  color: var(--dim);
  line-height: 1.4;
}
.css-docs-list code {
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--nl-accent-text);
  font-family: var(--font-mono);
  font-size: var(--nl-text-xs);
}
.css-recipe-item {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}
.css-recipe-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.css-recipe-header b {
  font-size: var(--nl-text-sm);
  color: var(--ink);
}
.btn-copy-recipe {
  padding: 4px 10px;
  font-size: var(--nl-text-xs);
}
.btn-copy-recipe.copied {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}
.css-recipe-item pre {
  margin: 0;
  padding: 10px;
  background: rgba(6, 11, 24, 0.8);
  border-radius: 8px;
  overflow-x: auto;
}
.css-recipe-item code {
  color: #8ce8ff;
  font-family: var(--font-mono);
  font-size: var(--nl-text-xs);
}

/* ── Light-Mode Polish & High-Contrast Overrides ──────────────── */
.light-ui .tg i {
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.16);
}
.light-ui .tg i::after {
  background: #ffffff;
  box-shadow: var(--nl-shadow-1);
}
.light-ui .tg input:checked + i {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--nl-shadow-1);
}
.light-ui .tg input:checked + i::after {
  transform: translateX(20px);
  background: #ffffff;
}

.light-ui select.ipt option {
  background: #ffffff;
  color: #0f172a;
}

.light-ui .glass-file-btn {
  background: rgba(0, 0, 0, 0.04);
  border: 1.5px dashed rgba(0, 0, 0, 0.18);
  color: #0f172a;
}
.light-ui .glass-file-btn:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: var(--accent);
  box-shadow: var(--nl-shadow-1);
}

.light-ui .css-preset-btn {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #475569;
}
.light-ui .css-preset-btn:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: var(--accent);
  color: #0f172a;
}

.light-ui .css-recipe-item {
  background: rgba(0, 0, 0, 0.025);
  border-color: rgba(0, 0, 0, 0.08);
}
.light-ui .css-recipe-item pre {
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.light-ui .css-recipe-item code {
  color: #38bdf8;
}
.light-ui .css-docs-list code {
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--nl-accent-text);
}

/* ── Responsive Settings Drawer ───────────────────────────────── */
@media (max-width: 480px) {
  #cfg {
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
  }
  #cfg-resizer {
    display: none;
  }
  .cbody {
    padding: 14px;
  }
  .theme-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }
}

/* This section used to open by redeclaring #cfg entirely — width, background,
   border and shadow — sixteen hundred lines below the rule it was overriding.
   Every edit to the real rule was silently discarded, which is how a shadow
   pointing the wrong way survived being fixed. Those values now live in the
   one #cfg rule at the top of this file. */
.settings-layout { min-height: 0; flex: 1; display: grid; grid-template-columns: 168px minmax(0, 1fr); }
.ctabs {
  min-width: 0; padding: 16px 10px; display: flex; flex-direction: column; align-items: stretch; gap: 18px;
  overflow: auto; mask-image: none; border: 0; border-right: 1px solid var(--nl-border); background: transparent;
}
.settings-nav-group { display: flex; flex-direction: column; gap: 4px; }
.settings-nav-label { padding: 0 10px 5px; color: var(--nl-text-tertiary); font-size: var(--nl-text-2xs); font-weight: 650; letter-spacing: var(--nl-track-label); text-transform: uppercase; }
.ctab { position: relative; min-height: 42px; padding: 0 12px; border-radius: var(--nl-radius-sm); text-align: left; display: flex; align-items: center; gap: 10px; }
.settings-tab-icon { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .82; }
.ctab.active { color: var(--nl-text-primary); background: color-mix(in srgb, var(--nl-accent) 14%, transparent); box-shadow: none; }
.ctab.active::before { content: ''; position: absolute; left: 0; inset-block: 9px; width: 3px; border-radius: 4px; background: var(--nl-accent); }
.cbody { min-width: 0; padding: 20px 24px 32px; overflow-y: auto; }
.csec[hidden] { display: none !important; }
.setting-row { min-height: 56px; padding-block: 6px; }
.setting-row :where(button, select, input:not([type="range"]), label.tg) { min-height: var(--nl-target-min); }
/* The scrim does not blur either. The drawer stopped carrying a backdrop-filter
   once it was measured at 0.28 of 255 behind a 94%-opaque panel, and a blur
   here would be the only one left — paid for on a full-screen layer, to soften
   a background that is already being covered. */
#dim, #dim.on { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#cfg :where(button, select, textarea, input:not([type="file"]), [role="button"]) { min-height: var(--nl-target-min); }
#cfg :where(button, select, [role="button"]) { min-width: var(--nl-target-min); }
#cfg input[type="range"] { height: var(--nl-target-min); margin-block: 0; }

/* Between the sheet and the desktop drawer the 600px floor used to leave
   whatever was over — 160px at 760, half a search field and a column of cut
   tiles — which read as a layout that had broken. Here the drawer takes the
   width and leaves one steady 96px band of the page: a backdrop, and a place
   to click to close, rather than a sliver of content. */
@media (min-width: 760px) and (max-width: 1023px) {
  #cfg { width: calc(100vw - 96px) !important; min-width: 0 !important; max-width: none !important; }
  #cfg-resizer { display: none; }
}

@media (max-width: 759px) {
  #cfg { width: 100vw !important; min-width: 0 !important; max-width: 100vw !important; }
  #cfg-resizer { display: none; }
  .settings-layout { display: flex; flex-direction: column; }
  .ctabs { flex: none; flex-direction: row; gap: 8px; padding: 8px 14px 10px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--nl-border); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 28px), transparent); }
  .settings-nav-group { flex-direction: row; gap: 6px; }
  .settings-nav-label { display: none; }
  .ctab { flex: none; min-width: max-content; text-align: center; padding-inline: 14px; }
  .ctab.active::before { inset-inline: 12px; top: auto; bottom: 0; width: auto; height: 3px; }
  .cbody { padding: 16px 14px 28px; }
}

.theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.theme-card { width: 100%; min-width: 0; min-height: 88px; text-align: left; font-family: inherit; }
.theme-card[aria-pressed="true"] { border-color: var(--nl-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--nl-accent) 30%, transparent); }
.appearance-shared-preview { position: sticky; top: -20px; z-index: var(--nl-z-raised); padding: 8px 0 12px; background: linear-gradient(var(--nl-surface-card-deep) 72%, transparent); }
.appearance-preview-card { width: 100%; min-height: 116px; padding: 16px; align-items: center; justify-content: center; }
.appearance-preview-card .tile { cursor: default; }
.appearance-preview-row { display: flex; justify-content: center; gap: var(--grid-gap, 14px); }
.appearance-shared-preview .nl-icon { --icon-accent: var(--nl-text-primary); }
.advanced-settings { border: 1px solid var(--nl-border); border-radius: var(--nl-radius-md); overflow: clip; }
.advanced-settings > summary { min-height: 44px; display: flex; align-items: center; padding: 0 14px; cursor: pointer; color: var(--nl-text-primary); font-weight: 600; }
.advanced-settings > .card-customizer-card { margin: 0 !important; border: 0; border-top: 1px solid var(--nl-border); border-radius: 0; }

@media (max-width: 480px) { .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bookmark-folder-accordion { border: 1px solid var(--nl-border); border-radius: var(--nl-radius-md); background: color-mix(in srgb, var(--nl-surface-card) 55%, transparent); overflow: clip; }
.bookmark-folder-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; padding-right: 6px; }
.bookmark-folder-summary { min-height: 52px; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 0 6px 0 10px; cursor: pointer; }
/* The chevron says the row opens; it used to say nothing and people clicked the
   name hoping. It turns when the folder is open. */
.bookmark-folder-chevron { width: 14px; height: 14px; border-right: 1.8px solid var(--nl-text-tertiary); border-bottom: 1.8px solid var(--nl-text-tertiary); transform: rotate(-45deg) translate(-2px, -2px); transition: transform var(--nl-transition-enter); }
.bookmark-folder-summary[aria-expanded="true"] .bookmark-folder-chevron { transform: rotate(45deg) translate(-1px, -3px); }

/* One button per row instead of five. */
.bookmark-overflow { font-size: var(--nl-text-lg); line-height: 1; letter-spacing: var(--nl-track-label); color: var(--nl-text-tertiary); }
.bookmark-overflow:hover { color: var(--nl-text-primary); }
.nl-overflow-menu { min-width: 210px; }

/* The obvious next thing to do inside an open folder, rather than the seventh
   identical grey button in a wrapped row. */
.bookmark-folder-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 6px 0 12px; }
.bookmark-add { min-height: var(--nl-target-min); }
.bookmark-columns { display: inline-flex; align-items: center; gap: 8px; color: var(--nl-text-secondary); font-size: var(--nl-text-sm); }
.bookmark-columns select { min-width: 64px; min-height: var(--nl-target-min); color: var(--nl-text-primary); background: var(--nl-surface-card-deep); border: 1px solid var(--nl-border); border-radius: var(--nl-radius-sm); }
.bookmark-folder-count { min-width: 24px; padding: 2px 7px; border-radius: 999px; text-align: center; background: color-mix(in srgb, var(--nl-accent) 14%, transparent); color: var(--nl-text-secondary); }
/* Wraps rather than running off both edges of a phone-width sheet. */
.bookmark-folder-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; padding: 0 10px 8px; }
.bookmark-folder-actions select,
.bookmark-summary-row select { min-width: var(--nl-target-min); color: var(--nl-text-primary); background: var(--nl-surface-card-deep); border: 1px solid var(--nl-border); border-radius: var(--nl-radius-sm); }
.bookmark-compact-action { min-width: 40px; min-height: 40px; padding: 0 9px; border: 1px solid transparent; border-radius: var(--nl-radius-sm); background: transparent; color: var(--nl-text-primary); cursor: pointer; }
.bookmark-compact-action:hover { background: color-mix(in srgb, var(--nl-text-primary) 7%, transparent); color: var(--nl-text-primary); }
.bookmark-compact-action.danger { color: var(--nl-status-danger); }
.bookmark-summary-list { padding: 4px 10px 12px; border-top: 1px solid var(--nl-border); }
.bookmark-summary-row { min-height: 56px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--nl-border) 65%, transparent); }
.bookmark-row-actions { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; }
.bookmark-row-actions select { flex: 1 1 108px; max-width: 132px; }
.bookmark-summary-icon { width: 32px; height: 32px; display: grid; place-items: center; }
.bookmark-summary-icon .nl-icon { width: 26px; height: 26px; display: grid; place-items: center; }
.bookmark-summary-icon :where(svg, img) { width: 100%; height: 100%; object-fit: contain; fill: var(--icon-accent); }
.bookmark-summary-meta { min-width: 0; display: flex; flex-direction: column; }
.bookmark-summary-name, .bookmark-summary-host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bookmark-summary-host { color: var(--nl-text-tertiary); font-size: var(--nl-text-2xs); }
.bookmark-editor { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(100px, .7fr) minmax(160px, 1.3fr) auto auto; gap: 8px; padding: 10px; border-radius: var(--nl-radius-sm); background: color-mix(in srgb, var(--nl-surface-elevated) 70%, transparent); }
.bookmark-editor[hidden] { display: none; }
.bookmark-editor input { min-height: 40px; min-width: 0; border: 1px solid var(--nl-border); border-radius: var(--nl-radius-sm); padding: 0 10px; color: var(--nl-text-primary); background: var(--nl-surface-card-deep); }
#icon-modal .modal-box { width: min(660px, calc(100vw - 24px)); max-width: 660px; }
.icon-live-preview { position: sticky; top: 0; z-index: var(--nl-z-raised); display: flex; justify-content: center; padding: 8px; background: linear-gradient(var(--nl-surface-elevated), transparent); }
.icon-live-preview .card { width: 126px; padding: 12px; align-items: center; }
.icon-item { min-width: 72px; min-height: 72px; }
#toast-dock { z-index: var(--nl-z-toast); pointer-events: none; }
#toast-dock .toast { pointer-events: auto; }

@media (max-width: 560px) {
  .bookmark-folder-summary { grid-template-columns: 14px minmax(0, 1fr) auto; padding-inline: 6px; }
  .bookmark-summary-row { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .bookmark-editor { grid-template-columns: 1fr; }
}

/* ── Background scenes ──────────────────────────────────────────────
   A shown choice instead of a list of engine names. The generative thumbnails
   are stills of the real scenes in the resolved palette, so a chosen colour
   mood — or one still being mixed — reaches the previews as it reaches the
   sky. */
.scene-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.look-share { margin-top: 16px; }
.look-actions, .look-paste-row, .look-decide-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.look-paste-label { display: block; margin-top: 4px; color: var(--nl-text-secondary); font-size: var(--nl-text-xs); }
.look-paste-row .ipt { flex: 1 1 220px; min-width: 0; font-family: var(--font-mono); font-size: var(--nl-text-xs); }
.look-status { min-height: 1.4em; margin: 0; color: var(--nl-text-secondary); font-size: var(--nl-text-xs); }
.look-status.refused { color: var(--nl-status-danger); }
.look-decide { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--nl-accent); border-radius: var(--nl-radius-md); background: color-mix(in srgb, var(--nl-accent) 8%, transparent); color: var(--nl-text-primary); font-size: var(--nl-text-sm); }
.scene-grid { display: grid; gap: 10px; }
.atmosphere-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.personal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scene-card {
  display: grid; gap: 7px; padding: 7px; border-radius: var(--nl-radius-md);
  border: 1px solid var(--nl-border); background: transparent; cursor: pointer;
  color: var(--nl-text-secondary); font: inherit; font-size: var(--nl-text-xs); text-align: center;
  transition: border-color var(--nl-motion-control), color var(--nl-motion-control), transform var(--nl-transition-control);
}
.scene-card:hover { border-color: var(--nl-border-strong); color: var(--nl-text-primary); transform: translateY(-1px); }
.scene-card[aria-checked="true"] { border-color: var(--nl-accent); color: var(--nl-text-primary); }
.scene-preview {
  position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--nl-radius-sm); overflow: hidden;
  background: var(--nl-canvas-gradient);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nl-text-primary) 8%, transparent);
}
/* The six generative previews are stills painted by the scene engine itself
   (paintStill in background.js) onto this canvas, over the theme's own sky. */
.scene-still { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene-preview[data-scene="solid"] { background: var(--nl-canvas); }
/* These two slots have nothing to preview until the user supplies a file. The
   placeholder stripes that stood here read as a broken texture and looked the
   same for both; a picture and a play mark say what each slot takes. */
.scene-preview[data-scene="custom-image"],
.scene-preview[data-scene="custom-video"] {
  position: relative;
  background: var(--nl-canvas);
  color: color-mix(in srgb, var(--nl-text-primary) 30%, transparent);
}
.scene-preview[data-scene="custom-image"]::before {
  content: "";
  position: absolute; left: 26%; top: 24%; width: 11%; aspect-ratio: 1;
  border-radius: 50%; background: currentColor;
}
.scene-preview[data-scene="custom-image"]::after {
  content: "";
  position: absolute; inset: 44% 22% 28%;
  background: currentColor;
  clip-path: polygon(0 100%, 32% 18%, 57% 100%, 44% 100%, 71% 40%, 100% 100%);
}
.scene-preview[data-scene="custom-video"]::after {
  content: "";
  position: absolute; left: 43%; top: 34%; width: 16%; aspect-ratio: 1;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.scene-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-block { display: grid; gap: 10px; margin-bottom: 6px; }
.scene-block .personal-label { margin-top: 8px; }

@media (max-width: 560px) {
  .atmosphere-grid { grid-template-columns: 1fr; }
  .personal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.atmosphere-palette { display: grid; gap: 9px; margin: 16px 0 4px; }
.palette-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.palette-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 11px 0 8px;
  border: 1px solid var(--nl-border); border-radius: 999px; background: transparent;
  color: var(--nl-text-secondary); font: inherit; font-size: var(--nl-text-xs); cursor: pointer;
  transition: border-color var(--nl-motion-control), color var(--nl-motion-control), background var(--nl-motion-control);
}
.palette-chip:hover { border-color: var(--nl-border-strong); color: var(--nl-text-primary); }
.palette-chip[aria-checked="true"] {
  border-color: color-mix(in srgb, var(--nl-accent) 70%, transparent);
  background: color-mix(in srgb, var(--nl-accent) 10%, transparent); color: var(--nl-text-primary);
}
.palette-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14ch; }
.palette-chip i { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--nl-canvas-gradient); box-shadow: inset 0 0 0 1px color-mix(in srgb, white 16%, transparent); }
/* Theme keeps the theme's own colours: it is the one chip that must not follow
   whatever mood happens to be selected. */
.palette-chip[data-palette="theme"] i { background: conic-gradient(from 215deg, var(--shader-1, #35d6c0), var(--shader-2, #5b6cff), var(--shader-3, #9d4edd), var(--shader-1, #35d6c0)); }
.palette-chip[data-palette="polar"] i { background: conic-gradient(from 215deg, #68e1d1, #6ea8fe, #9d8cff, #68e1d1); }
.palette-chip[data-palette="violet"] i { background: conic-gradient(from 215deg, #8be9fd, #8b7cff, #cf78ff, #8be9fd); }
.palette-chip[data-palette="ember"] i { background: conic-gradient(from 215deg, #ffd166, #f48c6b, #b86bff, #ffd166); }
.palette-chip[data-palette="mono"] i { background: conic-gradient(from 215deg, #dbeafe, #94a3b8, #64748b, #dbeafe); }

/* Making a mood, changing one and removing one are plain text actions beside
   the row rather than controls nested inside the radios. */
.palette-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: -2px; }
.palette-action {
  min-height: var(--nl-target-min); padding: 0 8px;
  border: 1px solid transparent; border-radius: var(--nl-radius-sm);
  background: transparent; color: var(--nl-accent-text);
  font: inherit; font-size: var(--nl-text-sm); cursor: pointer;
  transition: background-color var(--nl-motion-control), border-color var(--nl-motion-control);
}
.palette-action:hover { background: color-mix(in srgb, var(--nl-accent) 12%, transparent); }
.palette-action.danger { color: var(--nl-status-danger); }
.palette-action.danger:hover { background: color-mix(in srgb, var(--nl-status-danger) 14%, transparent); }
.palette-action[hidden] { display: none; }

.palette-editor {
  display: grid; gap: 12px; padding: 14px;
  border: 1px solid var(--nl-border); border-radius: var(--nl-radius-md);
  background: color-mix(in srgb, var(--nl-surface-card) 46%, transparent);
}
.palette-editor[hidden] { display: none; }
.palette-editor-bar {
  display: block; height: 46px; border-radius: var(--nl-radius-sm);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nl-text-primary) 12%, transparent);
}
.palette-editor-hint { margin: 0; color: var(--nl-text-secondary); font-size: var(--nl-text-xs); line-height: 1.5; }
.palette-editor-field { display: grid; gap: 6px; }
.palette-editor-field label { color: var(--nl-text-secondary); font-size: var(--nl-text-xs); }
.palette-editor-colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.palette-color {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 8px 5px 5px;
  border: 1px solid var(--nl-border); border-radius: var(--nl-radius-sm);
  background: color-mix(in srgb, var(--nl-canvas) 42%, transparent);
}
.palette-color .color-well { flex: none; width: 34px; min-width: 34px; height: 34px; min-height: 34px; }
.palette-color .hex-text { width: 100%; min-width: 0; }
.palette-editor-error { margin: 0; color: var(--nl-status-warning); font-size: var(--nl-text-xs); line-height: 1.5; }
.palette-helpers { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--nl-text-secondary); font-size: var(--nl-text-xs); }
.palette-editor-error:empty { display: none; }
.palette-editor-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

@media (max-width: 560px) {
  .palette-editor-colors { grid-template-columns: 1fr; }
  .palette-editor-actions .glass-btn { flex: 1 1 auto; justify-content: center; }
}

/* Hit areas — see the matching block in components.css. */
.icon-tab-btn { min-height: var(--nl-target-min); }
.icon-chip { min-height: var(--nl-target-min); }
#icon-modal .xbtn { min-width: var(--nl-target-min); min-height: var(--nl-target-min); }
#icon-modal .glass-input, .modal-box .glass-input { min-height: var(--nl-target-min); }
.nl-select { min-height: var(--nl-target-min); }
/* The switch keeps its 44x24 look; the label around it carries the hit area. */
.tg { display: inline-flex; align-items: center; height: var(--nl-target-min); }
.tg i { position: relative; inset: auto; width: 44px; height: 24px; }
/* A single digit was being clipped by its own ellipsis in the narrow folder rows. */
.nl-select { min-width: 0; }
.bookmark-folder-actions .nl-select { min-width: 64px; }
.nl-select-value { min-width: 1ch; }
.icon-chip { min-width: var(--nl-target-min); justify-content: center; }

/* While cropping, the picker's own preview showed the icon being replaced and the
   cropper's showed the one being made — two unlabelled previews contradicting
   each other. The cropper carries its own, so the shared one steps aside. */
#icon-modal:has(#modal-pane-cropper.active) .icon-live-preview { display: none; }

/* One Custom pane holds three ways to supply an icon, so each needs to say
   which one it is without shouting. */
.custom-source + .custom-source { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--nl-border); }
.custom-source h4 { margin: 0 0 10px; font-size: var(--nl-text-sm); font-weight: 650; color: var(--nl-text-secondary); }

/* Which service supplies the favicon is a detail; it matters only when the
   first answer is wrong. */
.favicon-sources { margin-bottom: 12px; }
.favicon-sources summary { display: inline-flex; align-items: center; min-height: var(--nl-target-min); color: var(--nl-text-secondary); font-size: var(--nl-text-sm); cursor: pointer; }
.favicon-sources summary:hover { color: var(--nl-text-primary); }
.favicon-source-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }

/* Three colours make a theme; the rest are consequences, kept out of the way. */
.theme-advanced { margin: 6px 0 2px; }
.theme-advanced summary { display: inline-flex; align-items: center; min-height: var(--nl-target-min); color: var(--nl-text-secondary); font-size: var(--nl-text-sm); cursor: pointer; }
.theme-advanced summary:hover { color: var(--nl-text-primary); }
.theme-advanced[open] summary { margin-bottom: 6px; }

/* Colour and tone matter now and then; the name and the address matter every
   time. The dialog opens on the second group and keeps the first out of it. */
.quick-advanced summary { display: inline-flex; align-items: center; min-height: var(--nl-target-min); color: var(--nl-text-secondary); font-size: var(--nl-text-sm); cursor: pointer; }
.quick-advanced summary:hover { color: var(--nl-text-primary); }
.quick-advanced-row { display: flex; align-items: flex-end; gap: 12px; padding-top: 8px; }
.quick-advanced-row .quick-field { flex: 1; min-width: 0; }

/* The icon preview is the way to change the icon, so it has to look pressable. */
.quick-icon-box { cursor: pointer; transition: border-color var(--nl-motion-control), transform var(--nl-motion-control); }
.quick-icon-box:hover { border-color: var(--nl-accent); transform: translateY(-1px); }

/* The composition cards show the arrangement itself, in the theme's own
   colours, so choosing one is a matter of looking rather than reading. */
/* Group labels inside the appearance panel. They used to style themselves with
   inline uppercase and tracking, which is how a tracking table gets bypassed. */
.settings-group-label {
  margin-top: 10px;
  color: var(--dim);
  font-size: var(--nl-text-2xs);
  font-weight: 650;
  letter-spacing: var(--nl-track-label);
  text-transform: uppercase;
}

/* A folder whose contents belong to the browser says so, quietly. */
.bookmark-folder-linked {
  padding: 2px 7px;
  border-radius: var(--nl-radius-sm);
  background: color-mix(in srgb, var(--nl-accent) 14%, transparent);
  color: var(--nl-text-secondary);
  font-size: var(--nl-text-2xs);
  letter-spacing: var(--nl-track-none);
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bookmark-add:disabled { opacity: .45; cursor: default; }

/* ── Support ────────────────────────────────────────────────────────────
   The one section that asks the user for something, so it deliberately
   borrows the drawer's existing vocabulary and adds no colour, no badge
   and no motion of its own. A donation surface that looks special is one
   step from a donation surface that pleads. */
.support-intro {
  margin: 0;
  max-width: 56ch;
  color: var(--nl-text-secondary);
  font-size: var(--nl-text-sm);
  line-height: 1.55;
}
.support-give { display: flex; flex-direction: column; gap: 10px; }
/* The same primary button every other section uses, at the same weight. */
.support-coffee { width: 100%; min-height: var(--nl-target-min); text-decoration: none; }
/* Secondary, not tertiary: the faint token measures 4.05:1 at 12px, and a hint
   nobody can read is decoration with a word count. */
/* The Backup panel's note about what the export file can and cannot carry is
   the same kind of sentence at the same weight, so it is the same rule. */
.support-hint,
.backup-note {
  margin: 0;
  color: var(--nl-text-secondary);
  font-size: var(--nl-text-xs);
  line-height: 1.5;
}
.backup-note { margin-bottom: 14px; }
/* No verified account means a sentence, never a control that goes nowhere. */
.support-unavailable {
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed var(--nl-border);
  border-radius: var(--nl-radius-md);
  color: var(--nl-text-secondary);
  font-size: var(--nl-text-sm);
  line-height: 1.5;
}

/* One collapsed panel, used twice: the wallets and the shortcut legend. */
.support-disclosure {
  border: 1px solid var(--nl-border);
  border-radius: var(--nl-radius-md);
  background: color-mix(in srgb, var(--nl-surface-card) 55%, transparent);
  overflow: clip;
}
.support-disclosure-summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  cursor: pointer;
  color: var(--nl-text-primary);
  font-size: var(--nl-text-sm);
  font-weight: 600;
  list-style: none;
}
.support-disclosure-summary::-webkit-details-marker { display: none; }
.support-chevron {
  width: 9px;
  height: 9px;
  flex: none;
  border-right: 1.8px solid var(--nl-text-tertiary);
  border-bottom: 1.8px solid var(--nl-text-tertiary);
  transform: rotate(-45deg);
  transition: transform var(--nl-transition-enter);
}
.support-disclosure[open] .support-chevron { transform: rotate(45deg) translate(-1px, -2px); }

.support-wallet-list {
  margin: 0;
  padding: 0 14px 14px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.support-wallet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px 10px;
}
.support-wallet-name {
  grid-column: 1 / -1;
  color: var(--nl-text-secondary);
  font-size: var(--nl-text-2xs);
  font-weight: 650;
  letter-spacing: var(--nl-track-wide);
  text-transform: uppercase;
}
/* An address is 42 characters of nothing you can hyphenate. It wraps rather
   than running off the edge of a phone-width sheet. */
.support-wallet-address {
  min-width: 0;
  color: var(--nl-text-primary);
  font-family: var(--font-mono);
  font-size: var(--nl-text-xs);
  line-height: 1.55;
  overflow-wrap: anywhere;
  user-select: all;
}
.support-copy { flex: none; min-height: var(--nl-target-min); }
.support-copy.copied {
  color: var(--nl-status-success);
  border-color: color-mix(in srgb, var(--nl-status-success) 40%, transparent);
}

.support-actions { display: flex; flex-direction: column; gap: 4px; }
.support-action {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--nl-radius-md);
  color: var(--nl-text-primary);
  text-decoration: none;
  transition: background-color var(--nl-transition-control), border-color var(--nl-transition-control);
}
.support-action:hover {
  background: color-mix(in srgb, var(--nl-text-primary) 6%, transparent);
  border-color: var(--nl-border);
}
.support-action-icon,
.support-action-out {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.support-action-icon { width: 18px; height: 18px; flex: none; opacity: .82; }
.support-action-out { width: 14px; height: 14px; flex: none; color: var(--nl-text-tertiary); }
.support-action-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.support-action-label { font-size: var(--nl-text-md); font-weight: 500; }
.support-action-hint {
  color: var(--nl-text-secondary);
  font-size: var(--nl-text-xs);
  line-height: 1.45;
}

/* ── About ──────────────────────────────────────────────────────────────
   Secondary to the ask above it and drawn that way: one line of text, one
   collapsed list, no surface of its own. */
.support-about { display: flex; flex-direction: column; gap: 6px; }
.support-about-line {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 14px;
  color: var(--nl-text-secondary);
  font-size: var(--nl-text-xs);
}
.support-version { font-family: var(--font-mono); }
/* Text-sized to the eye, 40px to the finger: the hit area contract applies to
   a quiet link in an About line exactly as it does to a primary button. */
.support-about-link {
  min-height: var(--nl-target-min);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--nl-text-secondary);
  text-decoration: none;
}
.support-about-link:hover { color: var(--nl-text-primary); }
.support-about-link:hover .support-about-link-label { text-decoration: underline; }
.support-about-link .support-action-icon { width: 14px; height: 14px; }

.support-shortcut-list {
  margin: 0;
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Keys and meaning on one line where there is room, and the meaning wrapping
   under the keys where there is not — no breakpoint needed. */
.support-shortcut {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.support-shortcut-keys {
  flex: none;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.support-shortcut-what {
  flex: 1 1 150px;
  min-width: 0;
  margin: 0;
  color: var(--nl-text-secondary);
  font-size: var(--nl-text-xs);
  line-height: 1.45;
}
.support-shortcut-or { color: var(--nl-text-tertiary); font-size: var(--nl-text-xs); }
.support-shortcut kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 3px 6px;
  border: 1px solid var(--nl-border);
  border-radius: var(--nl-radius-sm);
  background: color-mix(in srgb, var(--nl-text-primary) 6%, transparent);
  color: var(--nl-text-primary);
  font-family: var(--font-mono);
  font-size: var(--nl-text-2xs);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* Bookmarks → On the board: the two layouts as the same pair of choices the
   arrangement bar offers, each with the line that says what it does, and the
   way onto the board to arrange it. */
.board-layout-block { display: grid; gap: 10px; margin-bottom: 18px; }
.board-layout-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.board-layout-option {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; row-gap: 3px;
  padding: 11px 12px; border-radius: var(--nl-radius-md);
  border: 1px solid var(--nl-border); background: transparent; cursor: pointer;
  color: var(--nl-text-secondary); font: inherit; text-align: start;
  transition: border-color var(--nl-motion-control), color var(--nl-motion-control), background-color var(--nl-motion-control);
}
.board-layout-option .layout-glyph { grid-row: span 2; width: 30px; height: 20px; color: var(--nl-text-secondary); }
.board-layout-option:hover { border-color: var(--nl-border-strong); color: var(--nl-text-primary); }
.board-layout-option[aria-checked="true"] {
  border-color: var(--nl-accent);
  background: color-mix(in srgb, var(--nl-accent) 7%, transparent);
  color: var(--nl-text-primary);
}
.board-layout-option[aria-checked="true"] .layout-glyph { color: var(--nl-accent-text); }
.board-layout-name { font-size: var(--nl-text-sm); font-weight: 650; color: var(--nl-text-primary); }
.board-layout-note { font-size: var(--nl-text-xs); line-height: 1.4; color: var(--nl-text-secondary); }
.board-layout-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
/* The sentence about the rows takes its own line; the ways in sit under it,
   the one that starts arranging last and brightest. */
.board-rows-state { flex: 1 0 100%; min-width: 0; font-size: var(--nl-text-xs); line-height: 1.4; color: var(--nl-text-secondary); }
.board-layout-foot #cfg-size { margin-inline-start: auto; }
.board-arrange-btn { min-height: var(--nl-target-min); padding-inline: 16px; }
/* One page fit, under the layouts it is easy to mistake it for. */
.page-fit-block { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--nl-border); }
.page-fit-row { margin: 0; }
.page-fit-note { margin: 0; font-size: var(--nl-text-xs); line-height: 1.45; color: var(--nl-text-secondary); }
@media (max-width: 420px) {
  .board-layout-options { grid-template-columns: 1fr; }
}

/* Following the time of day: the switch sits with the moods it lights, and
   says what the sun is doing now. */
.daylight-block { display: grid; gap: 4px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--nl-border); }
.daylight-row { margin: 0; }
.daylight-note { margin: 0; font-size: var(--nl-text-xs); line-height: 1.45; color: var(--nl-text-secondary); }
.daylight-block .palette-action { justify-self: start; margin-left: -8px; }
.daylight-block .palette-action:disabled { opacity: 0.55; cursor: progress; }

/* ── Where an icon came from ────────────────────────────────────────
   The address row, the note shown while a remembered address is being
   changed, and the versions it has used, each shown by its own picture. */
.custom-source-note { display: block; margin-bottom: 6px; font-size: var(--nl-text-xs); color: var(--nl-text-secondary); }
.icon-url-row { display: flex; gap: 8px; margin-bottom: 12px; }
.icon-url-row .glass-input { flex: 1; min-width: 0; }
.icon-url-empty { font-size: var(--nl-text-2xs); color: var(--nl-text-secondary); }
.icon-url-editing { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: -4px 0 12px; padding: 8px 10px; border-radius: var(--nl-radius-sm); font-size: var(--nl-text-xs); color: var(--nl-text-secondary); background: color-mix(in srgb, var(--nl-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--nl-accent) 28%, transparent); }
.icon-url-editing[hidden] { display: none; }
.icon-url-link { padding: 0; min-height: 0; border: 0; background: none; color: var(--nl-text-primary); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.icon-url-history { margin-top: 14px; }
.icon-url-history[hidden] { display: none; }
.icon-url-strip { display: flex; gap: 4px; margin: 0; padding: 4px 4px 4px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 4px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.icon-url-version { position: relative; flex: none; width: 88px; padding-top: 10px; scroll-snap-align: start; }
.icon-url-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 0; border: 0; background: none; color: var(--nl-text-secondary); font: inherit; cursor: pointer; }
.icon-url-thumb { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; overflow: hidden; background: var(--nl-surface-card-deep); box-shadow: inset 0 0 0 1px var(--nl-border); }
.icon-url-thumb img { width: 34px; height: 34px; object-fit: contain; }
.icon-url-letter { font-size: var(--nl-text-lg); font-weight: 700; color: var(--nl-text-secondary); }
.icon-url-host { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--nl-text-2xs); }
.icon-url-pick:hover .icon-url-host, .icon-url-pick:focus-visible .icon-url-host { color: var(--nl-text-primary); }
.icon-url-pick:focus-visible { outline: none; }
.icon-url-pick:focus-visible .icon-url-thumb { outline: 2px solid var(--nl-focus); outline-offset: 2px; }
/* The one in use is ringed and ticked; the one being changed is dashed. */
.icon-url-version.is-current .icon-url-thumb { box-shadow: inset 0 0 0 1px var(--nl-border), 0 0 0 2px var(--nl-accent); }
.icon-url-version.is-current .icon-url-host { color: var(--nl-text-primary); font-weight: 600; }
.icon-url-version.is-current .icon-url-pick::after { content: ""; position: absolute; top: 46px; left: calc(50% + 14px); width: 16px; height: 16px; border-radius: 50%; background: var(--nl-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; box-shadow: 0 0 0 2px var(--nl-surface-elevated); }
.icon-url-version.is-editing .icon-url-thumb { outline: 2px dashed var(--nl-accent); outline-offset: 2px; }
/* Two small tools at the picture's upper corners: shown on hover or focus
   where there is hover, always where there is not. Each is drawn as a small
   disc but answers across the full 40px every target gets. */
.icon-url-tools { position: absolute; top: -8px; left: 0; right: 0; display: flex; justify-content: space-between; pointer-events: none; }
.icon-url-tool { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; color: var(--nl-text-primary); background: none; cursor: pointer; pointer-events: auto; }
.icon-url-tool::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--nl-surface-elevated); box-shadow: 0 0 0 1px var(--nl-border), var(--nl-shadow-1); }
.icon-url-tool svg { position: relative; }
.icon-url-tool:hover::before { background: var(--nl-surface-card-deep); }
.icon-url-tool[data-tool="remove"]:hover { color: var(--nl-status-danger); }
.icon-url-tool:focus-visible { outline: none; }
.icon-url-tool:focus-visible::before { outline: 2px solid var(--nl-focus); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) {
  .icon-url-tools { opacity: 0; transform: scale(.8); visibility: hidden; }
  .icon-url-tools .icon-url-tool { pointer-events: none; }
  .icon-url-version:hover .icon-url-tools, .icon-url-version:focus-within .icon-url-tools { opacity: 1; transform: none; visibility: visible; }
  .icon-url-version:hover .icon-url-tool, .icon-url-version:focus-within .icon-url-tool { pointer-events: auto; }
}
@media (forced-colors: active) {
  .icon-url-version.is-current .icon-url-thumb { outline: 2px solid Highlight; }
  .icon-url-tool { border: 1px solid ButtonText; }
}
/* The letters shown on a tile's own plate, at a size the pane can hold. */
.monogram-preview-tile { --tw: 54px; flex: none; pointer-events: none; }
.monogram-preview-tile .box { width: var(--tw); height: var(--tw); }
/* A followed bookmark says where its name and address are changed. */
.quick-linked-note { margin: -4px 0 0; font-size: var(--nl-text-xs); color: var(--nl-text-secondary); }
.quick-linked-note[hidden] { display: none; }
#quick-edit-modal .glass-input[readonly] { opacity: .72; cursor: default; }
/* The Glass choice has nothing to change while the glass is held solid —
   reduced motion or high legibility — and says so rather than seeming broken. */
.glass-solid-note { display: none; }
@media (prefers-reduced-motion: reduce) { .glass-solid-note { display: block; } }
html[data-legibility="high"] .glass-solid-note { display: block; }