/* ─────────────────────────────────────────────────────────────────────────────
   abstract.css — scoped polish for the abstract mode panel
   Matches the newer Gradient / Geometric control language.
   Safe: all rules are prefixed with .mode-abstract.
   Add to index.html after base.css/mobile.css and after gradient/geometric css.
   ───────────────────────────────────────────────────────────────────────────── */

.mode-abstract .panel-body .section {
  margin-top: 22px;
}

.mode-abstract .panel-body .section:first-child {
  margin-top: 0;
}

.mode-abstract .section-label .value {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.06em;
}

/* Sliders — same tactile system as Gradient / Geometric. */
.mode-abstract .slider {
  height: 3px;
  border-radius: 2px;
  background: rgba(20, 20, 42, 0.14);
  margin: 14px 0 6px;
  cursor: pointer;
}

.mode-abstract .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--ink-2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition:
    transform      0.15s var(--ease-out),
    background     0.15s var(--ease-out),
    border-color   0.15s var(--ease-out),
    box-shadow     0.15s var(--ease-out);
}

.mode-abstract .slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--ink-2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition:
    transform      0.15s var(--ease-out),
    background     0.15s var(--ease-out),
    border-color   0.15s var(--ease-out),
    box-shadow     0.15s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .mode-abstract .slider:hover::-webkit-slider-thumb {
    transform: scale(1.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  }

  .mode-abstract .slider:hover::-moz-range-thumb {
    transform: scale(1.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  }
}

.mode-abstract .slider:active::-webkit-slider-thumb,
.mode-abstract .slider:focus::-webkit-slider-thumb {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow:
    0 0 0 5px var(--accent-soft),
    0 1px 4px rgba(0, 0, 0, 0.22);
  transform: scale(1.18);
}

.mode-abstract .slider:active::-moz-range-thumb,
.mode-abstract .slider:focus::-moz-range-thumb {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow:
    0 0 0 5px var(--accent-soft),
    0 1px 4px rgba(0, 0, 0, 0.22);
  transform: scale(1.18);
}

.mode-abstract .slider:focus {
  outline: none;
}

.mode-abstract .slider:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Standard swatches — used by the shared NurrPaletteEditor. */
.mode-abstract .swatches,
.mode-abstract .swatch-row,
.mode-abstract .color-row {
  gap: 10px;
}

.mode-abstract .swatch {
  border: 0 !important;
  border-radius: 13px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 0 -2px 8px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.15s var(--ease-out),
    box-shadow 0.15s var(--ease-out),
    outline-color 0.15s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .mode-abstract .swatch:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.18),
      inset 0 -2px 8px rgba(0, 0, 0, 0.08),
      0 5px 14px rgba(0, 0, 0, 0.16);
  }
}

.mode-abstract .swatch:active {
  transform: scale(0.96);
}

.mode-abstract .swatch.active {
  outline: 2.5px solid var(--accent) !important;
  outline-offset: 3px;
  box-shadow:
    0 0 0 2px var(--accent-soft),
    0 4px 12px rgba(0, 0, 0, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* Palette preset cards — same as Gradient cards. */
.mode-abstract .presets-section {
  margin-top: 24px;
}

.mode-abstract .palette-grid {
  gap: 7px;
}

.mode-abstract .palette-card {
  height: 42px;
  border-radius: 5px;
  overflow: hidden;
  border: 1.5px solid transparent;
  padding: 0;
  transition:
    transform    0.15s var(--ease-out),
    border-color 0.15s,
    box-shadow   0.15s;
}

@media (hover: hover) and (pointer: fine) {
  .mode-abstract .palette-card:hover {
    transform: translateY(-2px);
    border-color: var(--ink-dim);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
  }
}

.mode-abstract .palette-card:active {
  transform: scale(0.96);
}

.mode-abstract .palette-card.active {
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px var(--accent-soft),
    0 4px 12px rgba(0, 0, 0, 0.12);
}

.mode-abstract .palette-card span {
  display: block;
  flex: 1;
  height: 100%;
}

/* Layout / style cards, if Abstract uses them now or later. */
.mode-abstract .layout-grid {
  gap: 8px;
}

.mode-abstract .layout-card {
  border-radius: 8px;
  border: 1.5px solid transparent;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(20, 20, 42, 0.08);
  overflow: hidden;
  transition:
    transform    0.15s var(--ease-out),
    border-color 0.15s,
    box-shadow   0.15s,
    background   0.15s;
}

@media (hover: hover) and (pointer: fine) {
  .mode-abstract .layout-card:hover {
    transform: translateY(-2px);
    border-color: var(--ink-dim);
    box-shadow:
      inset 0 0 0 1px rgba(20, 20, 42, 0.08),
      0 4px 12px rgba(0, 0, 0, 0.14);
  }
}

.mode-abstract .layout-card:active {
  transform: scale(0.96);
}

.mode-abstract .layout-card.active {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 0 0 2px var(--accent-soft),
    0 4px 12px rgba(0, 0, 0, 0.12);
}

.mode-abstract .layout-card svg,
.mode-abstract .layout-card canvas,
.mode-abstract .layout-card img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Toggle / button groups often used by Abstract controls. */
.mode-abstract .toggle-row,
.mode-abstract .button-row,
.mode-abstract .pill-row {
  gap: 8px;
}

.mode-abstract .toggle,
.mode-abstract .pill,
.mode-abstract .mini-btn {
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--ink-2);
  transition:
    transform 0.15s var(--ease-out),
    background 0.15s var(--ease-out),
    border-color 0.15s var(--ease-out),
    box-shadow 0.15s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .mode-abstract .toggle:hover,
  .mode-abstract .pill:hover,
  .mode-abstract .mini-btn:hover {
    transform: translateY(-1px);
    border-color: var(--ink-dim);
  }
}

.mode-abstract .toggle.active,
.mode-abstract .pill.active,
.mode-abstract .mini-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Help card — same quieter card treatment. */
.mode-abstract .help.compact-help {
  background: rgba(20, 20, 42, 0.05);
  border: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  border-radius: 8px;
  padding: 11px 13px;
  margin-top: 22px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink-dim);
}

.mode-abstract .help.compact-help kbd {
  font-size: 9px;
  padding: 1px 4px;
}

/* ── Glass type picker grid ──────────────────────────────────────────────── */
.mode-abstract .glass-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-top: 10px;
}

.mode-abstract .glass-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 4px 7px;
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.10);
  cursor: pointer;
  transition:
    transform    0.15s var(--ease-out),
    background   0.15s var(--ease-out),
    border-color 0.15s var(--ease-out),
    box-shadow   0.15s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .mode-abstract .glass-type-btn:hover {
    transform: translateY(-2px);
    border-color: var(--ink-dim);
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
  }
}

.mode-abstract .glass-type-btn:active {
  transform: scale(0.95);
}

.mode-abstract .glass-type-btn.active {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.20);
  box-shadow:
    0 0 0 2px var(--accent-soft),
    0 3px 10px rgba(0, 0, 0, 0.10);
}

.mode-abstract .gt-sym {
  font-size: 18px;
  line-height: 1;
  opacity: 0.85;
}

.mode-abstract .glass-type-btn.active .gt-sym {
  opacity: 1.0;
}

.mode-abstract .gt-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

.mode-abstract .glass-type-btn.active .gt-label {
  color: var(--accent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Abstract module cleanup — Form selector + palette transform row
   Owns only Abstract-specific UI, so global panel CSS does not need to carry
   old Formation/Glass Type edge cases.
   ───────────────────────────────────────────────────────────────────────────── */
.mode-abstract .compact-row{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:6px !important;
  align-items:center !important;
}
.mode-abstract .compact-row .btn{
  min-width:0 !important;
  height:30px !important;
  padding:0 8px !important;
  font-size:8px !important;
  line-height:30px !important;
  letter-spacing:.12em !important;
  text-align:center !important;
  white-space:nowrap !important;
}
.mode-abstract .abstract-transform-btn.active{
  background:rgba(255,255,255,.82) !important;
  color:rgba(18,20,28,.94) !important;
  border-color:rgba(255,255,255,.72) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 8px 20px rgba(0,0,0,.12) !important;
}
.mode-abstract .abstract-form-section{
  margin-top:10px !important;
}
.mode-abstract .abstract-form-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:6px !important;
}
.mode-abstract .abstract-form-btn{
  height:46px !important;
  min-height:46px !important;
  padding:6px 4px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  gap:4px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:var(--nx-ink, rgba(18,20,28,.82)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.mode-abstract .abstract-form-btn.active{
  background:rgba(255,255,255,.78) !important;
  border-color:rgba(255,255,255,.70) !important;
  color:rgba(18,20,28,.96) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62), 0 10px 24px rgba(0,0,0,.14) !important;
}
.mode-abstract .abstract-form-btn .gt-sym{
  display:block !important;
  font-size:13px !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  opacity:.92 !important;
}
.mode-abstract .abstract-form-btn .gt-label{
  display:block !important;
  font-size:7px !important;
  line-height:1 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  opacity:.84 !important;
}
.mode-abstract .toggle-row{ display:none !important; }

/* ─────────────────────────────────────────────────────────────
   Extracted ownership rules — 2026-06-29 CSS architecture cleanup.
   Moved out of global CSS without changing declaration values.
   ───────────────────────────────────────────────────────────── */
.mode-abstract .material-toggle,
.mode-abstract .segment { gap: 7px !important; }.mode-abstract .panel:not(.collapsed) .swatch, .mode-abstract.panel:not(.collapsed) .swatch{ width:35px !important; height:35px !important; min-width:35px !important; }.mode-abstract.panel:not(.collapsed) .panel-body{
  gap:0 !important;
}.mode-abstract.panel:not(.collapsed) .swatches,
.mode-abstract.panel:not(.collapsed) .palette-editor .swatches,
.mode-abstract.panel:not(.collapsed) .palette-row{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  align-items:center !important;
  overflow:visible !important;
}.mode-abstract.panel:not(.collapsed) .swatch{
  width:31px !important;
  height:31px !important;
  min-width:31px !important;
}.mode-abstract.panel:not(.collapsed) .glass-type-grid{
  gap:6px !important;
}.mode-abstract.panel:not(.collapsed) .glass-type-btn{
  min-width:0 !important;
  height:36px !important;
  min-height:36px !important;
  padding:3px 4px !important;
}.mode-abstract.panel:not(.collapsed) .gt-label{
  font-size:6.5px !important;
  letter-spacing:.08em !important;
}.mode-abstract.panel:not(.collapsed){
  --accent: currentColor !important;
  --accent-soft: rgba(255,255,255,.10) !important;
}.mode-abstract.panel:not(.collapsed) .slider:active::-webkit-slider-thumb,
.mode-abstract.panel:not(.collapsed) .slider:focus::-webkit-slider-thumb,
.mode-abstract.panel:not(.collapsed) .slider:active::-moz-range-thumb,
.mode-abstract.panel:not(.collapsed) .slider:focus::-moz-range-thumb{
  background:currentColor !important;
  border-color:currentColor !important;
  box-shadow:0 0 0 4px rgba(255,255,255,.10), 0 1px 4px rgba(0,0,0,.18) !important;
}.mode-abstract.panel:not(.collapsed) .glass-type-btn.active .gt-label,
.mode-abstract.panel:not(.collapsed) .glass-type-btn.active .gt-sym{
  color:currentColor !important;
}.mode-abstract.panel:not(.collapsed) .glass-type-btn.active{
  border-color:currentColor !important;
  box-shadow:inset 0 0 0 1px currentColor !important;
  background:rgba(255,255,255,.075) !important;
}.panel:not(.collapsed) .swatch,
.panel:not(.collapsed) .palette-section .swatch,
.mode-abstract.panel:not(.collapsed) .swatch{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  line-height:1 !important;
  border:1px solid rgba(255,255,255,.42) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 0 0 1px rgba(0,0,0,.035) !important;
  transform:none !important;
}.panel:not(.collapsed) .swatch.add,
.mode-abstract.panel:not(.collapsed) .swatch.add{
  flex:0 0 42px !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  margin:0 !important;
  font:300 30px/42px var(--nx-font) !important;
  text-align:center !important;
  vertical-align:middle !important;
  color:currentColor !important;
  opacity:.58 !important;
}.panel:not(.collapsed) .swatch-remove,
.mode-abstract.panel:not(.collapsed) .swatch-remove{
  position:absolute !important;
  top:-7px !important;
  right:-7px !important;
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  border-radius:50% !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font:500 14px/20px var(--nx-font) !important;
  letter-spacing:0 !important;
  text-align:center !important;
  background:rgba(255,255,255,.96) !important;
  color:rgba(0,0,0,.86) !important;
  border:1px solid rgba(0,0,0,.06) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.10) !important;
}.mode-abstract.panel:not(.collapsed) .palette-section .btn-row.compact-row{
  grid-template-columns:1fr 1fr !important;
}.mode-abstract.panel:not(.collapsed) .glass-type-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:7px !important;
}.mode-abstract.panel:not(.collapsed) .glass-type-btn{
  height:39px !important;
  min-height:39px !important;
  min-width:0 !important;
  padding:4px 4px 3px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  border:1px solid var(--nx-line-soft) !important;
  border-radius:7px !important;
  background:rgba(255,255,255,.045) !important;
  overflow:hidden !important;
}.mode-abstract.panel:not(.collapsed) .gt-sym{
  display:block !important;
  height:12px !important;
  font:700 13px/12px var(--nx-font) !important;
  letter-spacing:.04em !important;
  opacity:.78 !important;
}.mode-abstract.panel:not(.collapsed) .gt-label{
  display:block !important;
  font:800 6.4px/1 var(--nx-font) !important;
  letter-spacing:.08em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}.mode-abstract.panel:not(.collapsed) .panel-body .section{
  margin-top:0 !important;
}.mode-abstract.panel:not(.collapsed) .section{
  padding-top:14px !important;
  padding-bottom:14px !important;
}.panel:not(.collapsed) .swatch,
.panel:not(.collapsed) .palette-section .swatch,
.mode-abstract.panel:not(.collapsed) .swatch{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  flex:0 0 40px !important;
  border-radius:50% !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  line-height:1 !important;
}.panel:not(.collapsed) .swatch.add,
.mode-abstract.panel:not(.collapsed) .swatch.add{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  flex:0 0 40px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  font:300 27px/1 var(--nx-font, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  letter-spacing:0 !important;
  text-align:center !important;
  transform:none !important;
}.panel:not(.collapsed) .swatch-remove,
.mode-abstract.panel:not(.collapsed) .swatch-remove{
  top:-7px !important;
  right:-7px !important;
  width:19px !important;
  height:19px !important;
  min-width:19px !important;
  max-width:19px !important;
  border-radius:50% !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font:500 13px/19px var(--nx-font, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  letter-spacing:0 !important;
  text-align:center !important;
  box-sizing:border-box !important;
}.mode-abstract.panel:not(.collapsed) .palette-section .swatches{ gap:9px !important; }.mode-abstract.panel:not(.collapsed){
  --accent:currentColor !important;
  --nx-accent:currentColor !important;
}.mode-abstract.panel:not(.collapsed) .glass-type-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:6px !important;
}.mode-abstract.panel:not(.collapsed) .glass-type-btn{
  height:36px !important;
  min-height:36px !important;
  min-width:0 !important;
  padding:3px 3px 4px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-color:var(--nx-line-soft, rgba(255,255,255,.16)) !important;
  border-radius:7px !important;
  background:rgba(255,255,255,.035) !important;
  box-shadow:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  overflow:hidden !important;
}.mode-abstract.panel:not(.collapsed) .glass-type-btn.active{
  background:rgba(255,255,255,.14) !important;
  border-color:currentColor !important;
  box-shadow:inset 0 0 0 1px currentColor !important;
}.mode-abstract.panel:not(.collapsed) .gt-sym{
  height:11px !important;
  font:800 12px/11px var(--nx-font, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  opacity:.78 !important;
  letter-spacing:.02em !important;
}.mode-abstract.panel:not(.collapsed) .gt-label{
  font:800 6.2px/1 var(--nx-font, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  letter-spacing:.08em !important;
  white-space:nowrap !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}.mode-abstract.panel:not(.collapsed) .glass-type-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:7px !important;
}.mode-abstract.panel:not(.collapsed) .glass-type-btn{
  height:42px !important;
  min-height:42px !important;
  padding:5px 4px !important;
  border-radius:8px !important;
  overflow:hidden !important;
}.mode-abstract.panel:not(.collapsed) .gt-sym{ font-size:13px !important; line-height:13px !important; height:13px !important; }.mode-abstract.panel:not(.collapsed) .gt-label{ font-size:6.8px !important; letter-spacing:.07em !important; line-height:1 !important; }.mode-abstract.panel:not(.collapsed) .glass-type-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:8px !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}.mode-abstract.panel:not(.collapsed) .glass-type-btn{
  width:100% !important;
  height:40px !important;
  min-height:40px !important;
  padding:4px 3px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  border:1px solid var(--nx-line-soft) !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.045) !important;
  box-shadow:none !important;
  overflow:hidden !important;
  color:var(--nx-ink-soft) !important;
}.mode-abstract.panel:not(.collapsed) .glass-type-btn.active{
  background:rgba(255,255,255,.84) !important;
  color:#08080a !important;
  border-color:rgba(255,255,255,.45) !important;
}.mode-abstract.panel:not(.collapsed) .glass-type-btn .gt-sym{
  height:12px !important;
  font:900 13px/12px var(--nx-font, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  letter-spacing:.05em !important;
}.mode-abstract.panel:not(.collapsed) .glass-type-btn .gt-label{
  font:900 6.5px/1 var(--nx-font, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}.mode-abstract.panel .glass-type-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:7px !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}.mode-abstract.panel .glass-type-btn{
  height:38px !important;
  min-height:38px !important;
  border-radius:7px !important;
  border:1px solid var(--nx-line-soft) !important;
  background:rgba(255,255,255,.045) !important;
  color:var(--nx-ink-soft) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  padding:4px 3px !important;
  overflow:hidden !important;
  box-shadow:none !important;
}.mode-abstract.panel .glass-type-btn.active{
  background:rgba(255,255,255,.86) !important;
  color:#07080A !important;
  border-color:rgba(255,255,255,.50) !important;
}.mode-abstract.panel .glass-type-btn .gt-sym{ font:900 12px/11px var(--nx-font, "Helvetica Neue", Helvetica, Arial, sans-serif) !important; height:11px !important; }.mode-abstract.panel .glass-type-btn .gt-label{ font:900 6px/1 var(--nx-font, "Helvetica Neue", Helvetica, Arial, sans-serif) !important; letter-spacing:.08em !important; white-space:nowrap !important; }.mode-abstract.panel .glass-type-btn .gt-sym{ letter-spacing:.06em !important; }.mode-abstract.panel .glass-type-btn:first-child .gt-sym{ font-size:13px !important; letter-spacing:-.03em !important; }.mode-abstract.panel:not(.collapsed) .glass-type-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:8px !important; }.mode-abstract.panel:not(.collapsed) .glass-type-btn{
  height:42px !important;
  min-height:42px !important;
  padding:5px 4px !important;
  overflow:hidden !important;
  isolation:isolate !important;
}.mode-abstract.panel:not(.collapsed) .glass-type-btn::before,
.mode-abstract.panel:not(.collapsed) .glass-type-btn::after,
.mode-abstract.panel:not(.collapsed) .glass-type-btn .gt-sym::before,
.mode-abstract.panel:not(.collapsed) .glass-type-btn .gt-sym::after{ content:none !important; display:none !important; }.mode-abstract.panel:not(.collapsed) .glass-type-btn .gt-sym{
  display:block !important;
  height:14px !important;
  font:900 14px/12px var(--nx-font, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  letter-spacing:.06em !important;
  color:currentColor !important;
  overflow:hidden !important;
  opacity:.78 !important;
}.mode-abstract.panel:not(.collapsed) .glass-type-btn:first-child .gt-sym{
  font-size:14px !important;
  letter-spacing:-.12em !important;
  transform:scaleX(.85) !important;
}.mode-abstract.panel:not(.collapsed) .glass-type-btn .gt-label{
  display:block !important;
  font:900 6.8px/1 var(--nx-font, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  letter-spacing:.08em !important;
  color:currentColor !important;
}.mode-abstract.panel:not(.collapsed) .glass-type-btn.active{
  background:rgba(255,255,255,.16) !important;
  border-color:rgba(255,255,255,.42) !important;
  color:var(--nx-ink) !important;
}

/* Additional extracted ownership rules after malformed-comment cleanup. */
.mode-abstract .glass-type-grid{ display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:5px !important; }.mode-abstract .glass-type-btn{ height:42px !important; min-height:42px !important; padding:4px 5px !important; border:1px solid var(--nx-line-soft) !important; background:rgba(255,255,255,.045) !important; color:var(--nx-ink) !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:3px !important; box-shadow:none !important; }.mode-abstract .glass-type-btn.active{ border-color:rgba(255,255,255,.32) !important; background:rgba(255,255,255,.16) !important; }.mode-abstract .gt-sym{ width:18px !important; height:11px !important; display:block !important; color:transparent !important; position:relative !important; }.mode-abstract .gt-sym::before{ content:""; position:absolute; inset:1px 0; border-top:2px solid currentColor; border-bottom:2px solid currentColor; opacity:.72; color:var(--nx-ink); }.mode-abstract .glass-type-btn:nth-child(2) .gt-sym::before{ border-top-style:dotted; border-bottom-style:dotted; opacity:.55; }.mode-abstract .glass-type-btn:nth-child(3) .gt-sym::before{ transform:skewX(-24deg); }.mode-abstract .glass-type-btn:nth-child(4) .gt-sym::before{ border-radius:999px; opacity:.62; }.mode-abstract .gt-label{ font:800 7px/1 var(--nx-font) !important; letter-spacing:.10em !important; text-transform:uppercase !important; }.mode-abstract .seg{ border:1px solid var(--nx-line-soft) !important; }.mode-abstract .seg-opt{ border:0 !important; border-right:1px solid var(--nx-line-soft) !important; }.mode-abstract .seg-opt:last-child{ border-right:0 !important; }