@fangxinyan/lumina 0.6.2 → 0.6.4

package/dist/styles.css

@@ -20,42 +20,52 @@
 
   /* Distance multiplier — driven by ThemeProvider `intensity` (1..10 → 0.4..1.6). */
   --d: 1;
+  --shadow-scale: 1;
+  --shadow-float-scale: 1;
 
-  --shadow-blur: calc(16px * var(--d));
-  --shadow-offset: calc(6px * var(--d));
-  --shadow-inset-blur: calc(10px * var(--d));
-  --shadow-inset-offset: calc(4px * var(--d));
+  --shadow-blur: calc(16px * var(--d) * var(--shadow-scale));
+  --shadow-offset: calc(6px * var(--d) * var(--shadow-scale));
+  --shadow-inset-blur: calc(10px * var(--d) * var(--shadow-scale));
+  --shadow-inset-offset: calc(4px * var(--d) * var(--shadow-scale));
 
-  --neu-out:
+  --neu-shadow-panel:
     var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--shadow-dark),
     calc(var(--shadow-offset) * -1) calc(var(--shadow-offset) * -1) var(--shadow-blur) var(--shadow-light);
 
-  --neu-out-sm:
+  --neu-shadow-control:
     calc(var(--shadow-offset) * 0.5) calc(var(--shadow-offset) * 0.5) calc(var(--shadow-blur) * 0.6) var(--shadow-dark),
     calc(var(--shadow-offset) * -0.5) calc(var(--shadow-offset) * -0.5) calc(var(--shadow-blur) * 0.6) var(--shadow-light);
 
-  --neu-out-lg:
+  --neu-shadow-lift:
     calc(var(--shadow-offset) * 1.6) calc(var(--shadow-offset) * 1.6) calc(var(--shadow-blur) * 1.4) var(--shadow-dark),
     calc(var(--shadow-offset) * -1.6) calc(var(--shadow-offset) * -1.6) calc(var(--shadow-blur) * 1.4) var(--shadow-light);
 
-  --neu-in:
+  --neu-shadow-inset-strong:
     inset var(--shadow-inset-offset) var(--shadow-inset-offset) var(--shadow-inset-blur) var(--shadow-dark),
     inset calc(var(--shadow-inset-offset) * -1) calc(var(--shadow-inset-offset) * -1) var(--shadow-inset-blur) var(--shadow-light);
 
-  --neu-in-sm:
+  --neu-shadow-inset:
     inset calc(var(--shadow-inset-offset) * 0.6) calc(var(--shadow-inset-offset) * 0.6) calc(var(--shadow-inset-blur) * 0.6) var(--shadow-dark),
     inset calc(var(--shadow-inset-offset) * -0.6) calc(var(--shadow-inset-offset) * -0.6) calc(var(--shadow-inset-blur) * 0.6) var(--shadow-light);
 
-  --neu-flat:
+  --neu-shadow-subtle:
     1px 1px 2px var(--shadow-dark),
     -1px -1px 2px var(--shadow-light);
 
   /* Floating-overlay elevation.
      No top-left highlight — there's no continuous surface beneath an overlay
      panel, so the neumorphic light-reflection metaphor would read as a halo. */
-  --neu-float:
-    0 calc(var(--shadow-offset) * 1.8) calc(var(--shadow-blur) * 2.2) var(--shadow-dark),
-    0 calc(var(--shadow-offset) * 0.4) calc(var(--shadow-blur) * 0.7) var(--shadow-dark);
+  --neu-shadow-float:
+    0 calc(var(--shadow-offset) * 1.8 * var(--shadow-float-scale)) calc(var(--shadow-blur) * 2.2 * var(--shadow-float-scale)) var(--shadow-dark),
+    0 calc(var(--shadow-offset) * 0.4 * var(--shadow-float-scale)) calc(var(--shadow-blur) * 0.7 * var(--shadow-float-scale)) var(--shadow-dark);
+
+  --neu-out: var(--neu-shadow-panel);
+  --neu-out-sm: var(--neu-shadow-control);
+  --neu-out-lg: var(--neu-shadow-lift);
+  --neu-in: var(--neu-shadow-inset-strong);
+  --neu-in-sm: var(--neu-shadow-inset);
+  --neu-flat: var(--neu-shadow-subtle);
+  --neu-float: var(--neu-shadow-float);
 
   /* ---- Accent (default sky) ---- */
   --accent: oklch(68% 0.14 235);
@@ -89,7 +99,13 @@
 
   /* ---- Control sizes (density) ---- */
   --ctrl-h: 40px;
+  --ctrl-h-sm: 30px;
+  --ctrl-h-lg: 52px;
+  --field-h-sm: 32px;
+  --field-h-lg: 48px;
   --ctrl-pad-x: 18px;
+  --ctrl-pad-x-sm: 12px;
+  --ctrl-pad-x-lg: 24px;
 
   /* ---- Type ---- */
   --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
@@ -97,6 +113,11 @@
                "Noto Sans CJK SC", sans-serif;
   --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
   --font-display: "SF Pro Display", var(--font-sans);
+  --fs-xs: 11px;
+  --fs-sm: 12px;
+  --fs-md: 13px;
+  --fs-lg: 14px;
+  --fs-xl: 15px;
 
   /* ---- Motion ---- */
   --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
@@ -122,13 +143,17 @@
   --shadow-dark: rgba(0, 0, 0, 0.55);
   --shadow-light: rgba(130, 145, 180, 0.06);
   /* 同时收紧阴影尺寸,深色模式下拟态更内敛 */
-  --shadow-offset: calc(4px * var(--d));
-  --shadow-blur: calc(10px * var(--d));
-  --shadow-inset-offset: calc(3px * var(--d));
-  --shadow-inset-blur: calc(7px * var(--d));
+  --shadow-offset: calc(4px * var(--d) * var(--shadow-scale));
+  --shadow-blur: calc(10px * var(--d) * var(--shadow-scale));
+  --shadow-inset-offset: calc(3px * var(--d) * var(--shadow-scale));
+  --shadow-inset-blur: calc(7px * var(--d) * var(--shadow-scale));
   --accent-soft: oklch(35% 0.06 235);
   --accent-ink: oklch(82% 0.09 235);
   --accent-glow: oklch(68% 0.14 235 / 0.18);
+  --info:    oklch(78% 0.12 235);
+  --success: oklch(78% 0.14 150);
+  --warning: oklch(82% 0.14 75);
+  --danger:  oklch(76% 0.16 25);
 }
 /* 深色模式的 accent-glow 统一降低强度,避免按钮外圈过亮 */
 [data-theme="dark"][data-accent="sky"]    { --accent-soft: oklch(35% 0.08 235); --accent-ink: oklch(82% 0.10 235); --accent-glow: oklch(68% 0.14 235 / 0.18); }
@@ -219,80 +244,99 @@ input, textarea, select { font-family: inherit; color: inherit; }
   gap: 8px;
   height: var(--ctrl-h);
   padding: 0 var(--ctrl-pad-x);
-  border: none;
+  border: 1px solid transparent;
   border-radius: var(--r-md);
-  font-size: 13px;
+  font-size: var(--fs-md);
   font-weight: 500;
   font-family: inherit;
   color: var(--fg);
   background: var(--bg);
-  box-shadow: var(--neu-out-sm);
+  box-shadow: var(--neu-shadow-control);
   cursor: pointer;
   user-select: none;
   white-space: nowrap;
   flex-shrink: 0;
-  transition: all var(--dur-fast) var(--ease);
+  transition:
+    background var(--dur-fast) var(--ease),
+    box-shadow var(--dur-fast) var(--ease),
+    color var(--dur-fast) var(--ease);
+}
+.btn > svg,
+.btn-icon-slot {
+  flex-shrink: 0;
+}
+.btn-icon-slot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.btn-icon-slot img {
+  display: block;
+  max-width: 1.25em;
+  max-height: 1.25em;
+  object-fit: contain;
 }
-.btn > svg { flex-shrink: 0; }
 .btn.icon {
   flex-shrink: 0;
   overflow: visible;
 }
-.btn:hover { color: var(--accent-ink); }
-.btn:active, .btn.pressed {
-  box-shadow: var(--neu-in-sm);
-  color: var(--accent-ink);
-}
 .btn.primary {
   color: var(--accent-ink);
-  background:
-    linear-gradient(145deg,
-      color-mix(in oklch, var(--accent-soft) 80%, var(--shadow-light)),
-      color-mix(in oklch, var(--accent-soft) 92%, var(--bg)));
-  box-shadow:
-    var(--neu-out-sm),
-    inset 1px 1px 0 color-mix(in oklch, var(--shadow-light) 60%, transparent),
-    inset -1px -1px 0 color-mix(in oklch, var(--accent) 15%, transparent);
+  background: color-mix(in oklch, var(--accent-soft) 62%, var(--bg));
   font-weight: 600;
 }
-.btn.primary:hover {
-  background:
-    linear-gradient(145deg,
-      color-mix(in oklch, var(--accent-soft) 70%, var(--shadow-light)),
-      color-mix(in oklch, var(--accent) 18%, var(--accent-soft)));
-  box-shadow:
-    var(--neu-out-sm),
-    inset 1px 1px 0 color-mix(in oklch, var(--shadow-light) 70%, transparent),
-    inset -1px -1px 0 color-mix(in oklch, var(--accent) 20%, transparent),
-    0 0 16px -6px var(--accent-glow);
-}
-.btn.primary:active, .btn.primary.pressed {
-  box-shadow:
-    inset 2px 2px 4px color-mix(in oklch, var(--accent) 25%, var(--shadow-dark)),
-    inset -1px -1px 2px var(--shadow-light);
-  transform: none;
-}
 .btn.ghost {
   background: transparent;
   box-shadow: none;
   color: var(--fg-muted);
 }
-.btn.ghost:hover { background: var(--bg); box-shadow: var(--neu-flat); color: var(--fg); }
 .btn.danger { color: var(--danger); }
-.btn.danger:hover { color: var(--danger); }
+.btn:hover {
+  box-shadow: var(--neu-shadow-panel);
+}
+.btn.ghost:hover {
+  background: var(--bg);
+  border-color: transparent;
+  box-shadow: var(--neu-shadow-subtle);
+  color: var(--fg);
+}
+.btn.danger:hover {
+  color: var(--danger);
+}
+.btn:active,
+.btn.pressed {
+  box-shadow: var(--neu-shadow-inset-strong);
+}
+.btn.ghost:active,
+.btn.ghost.pressed {
+  background: var(--bg);
+  color: var(--fg);
+}
+.btn.danger:active,
+.btn.danger.pressed {
+  color: var(--danger);
+}
 .btn.icon { width: var(--ctrl-h); padding: 0; }
-.btn.sm { height: 30px; padding: 0 12px; font-size: 12px; border-radius: var(--r-sm); }
-.btn.sm.icon { width: 30px; padding: 0; }
-.btn.lg { height: 52px; padding: 0 24px; font-size: 15px; border-radius: var(--r-lg); }
-.btn.lg.icon { width: 52px; padding: 0; }
+.btn.sm { height: var(--ctrl-h-sm); padding: 0 var(--ctrl-pad-x-sm); font-size: var(--fs-sm); border-radius: var(--r-sm); }
+.btn.sm.icon { width: var(--ctrl-h-sm); padding: 0; }
+.btn.lg { height: var(--ctrl-h-lg); padding: 0 var(--ctrl-pad-x-lg); font-size: var(--fs-xl); border-radius: var(--r-lg); }
+.btn.lg.icon { width: var(--ctrl-h-lg); padding: 0; }
 .btn.block { width: 100%; flex-shrink: 1; }
 .btn[disabled], .btn.disabled, .btn:disabled {
   color: var(--fg-subtle);
   cursor: not-allowed;
-  box-shadow: var(--neu-flat);
+  border-color: transparent;
+  box-shadow: var(--neu-shadow-subtle);
+  transform: none;
+}
+.btn[disabled]:hover, .btn:disabled:hover, .btn.disabled:hover {
+  color: var(--fg-subtle);
+  background: var(--bg);
+  border-color: transparent;
+  box-shadow: var(--neu-shadow-subtle);
   transform: none;
 }
-.btn[disabled]:hover, .btn:disabled:hover, .btn.disabled:hover { transform: none; color: var(--fg-subtle); background: var(--bg); }
 .btn.loading { cursor: wait; }
 .btn .spinner {
   width: 14px; height: 14px;
@@ -310,7 +354,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   width: 100%;
 }
 .input-count {
-  font-size: 11px;
+  font-size: var(--fs-xs);
   color: var(--fg-subtle);
   font-variant-numeric: tabular-nums;
   text-align: right;
@@ -324,20 +368,30 @@ input, textarea, select { font-family: inherit; color: inherit; }
   padding: 0 var(--ctrl-pad-x);
   border-radius: var(--r-md);
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   transition: box-shadow var(--dur) var(--ease);
   gap: 8px;
 }
-.input-wrap.sm { height: 32px; padding: 0 12px; border-radius: var(--r-sm); gap: 6px; }
-.input-wrap.lg { height: 48px; padding: 0 18px; border-radius: var(--r-lg); gap: 10px; }
-.input-wrap:focus-within { box-shadow: var(--neu-in-sm), 0 0 0 2px var(--accent-glow); }
-.input-wrap.invalid { box-shadow: var(--neu-in-sm), 0 0 0 2px color-mix(in oklch, var(--danger) 30%, transparent); }
+.input-wrap.sm { height: var(--field-h-sm); padding: 0 var(--ctrl-pad-x-sm); border-radius: var(--r-sm); gap: 6px; }
+.input-wrap.lg { height: var(--field-h-lg); padding: 0 var(--ctrl-pad-x); border-radius: var(--r-lg); gap: 10px; }
+.input-wrap:focus-within { box-shadow: var(--neu-shadow-inset), 0 0 0 2px var(--accent-glow); }
+.input-wrap.invalid { box-shadow: var(--neu-shadow-inset), 0 0 0 2px color-mix(in oklch, var(--danger) 30%, transparent); }
 .input-wrap.disabled { opacity: 0.6; cursor: not-allowed; }
 .input-wrap .lead,
 .input-wrap .trail {
   color: var(--fg-subtle);
   flex-shrink: 0;
   display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.input-wrap .lead img,
+.input-wrap .trail img {
+  display: block;
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
 }
 .input-wrap .lead.interactive,
 .input-wrap .trail.interactive { cursor: pointer; pointer-events: auto; }
@@ -348,13 +402,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
   display: inline-flex;
   align-items: center;
   color: var(--fg-muted);
-  font-size: 13px;
+  font-size: var(--fs-md);
   white-space: nowrap;
   user-select: none;
   flex-shrink: 0;
 }
-.input-wrap.sm .input-affix { font-size: 12px; }
-.input-wrap.lg .input-affix { font-size: 14px; }
+.input-wrap.sm .input-affix { font-size: var(--fs-sm); }
+.input-wrap.lg .input-affix { font-size: var(--fs-lg); }
 .input-wrap .input-clear {
   display: inline-flex;
   align-items: center;
@@ -395,12 +449,12 @@ input, textarea, select { font-family: inherit; color: inherit; }
   background: transparent;
   box-shadow: none;
   color: var(--fg);
-  font-size: 13px;
+  font-size: var(--fs-md);
   font-family: inherit;
   outline: none;
 }
-.input-wrap.sm > .input { font-size: 12px; }
-.input-wrap.lg > .input { font-size: 14px; }
+.input-wrap.sm > .input { font-size: var(--fs-sm); }
+.input-wrap.lg > .input { font-size: var(--fs-lg); }
 .input-wrap > .input::placeholder { color: var(--fg-subtle); }
 .input-wrap.disabled > .input { cursor: not-allowed; }
 /* ============ Textarea ============ */
@@ -443,7 +497,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   border: none;
   border-radius: var(--r-md);
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   color: var(--fg);
   font-size: 13px;
   font-family: inherit;
@@ -452,8 +506,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
   outline: none;
   transition: box-shadow var(--dur) var(--ease);
 }
-.textarea:focus { box-shadow: var(--neu-in-sm), 0 0 0 2px var(--accent-glow); }
-.textarea.invalid { box-shadow: var(--neu-in-sm), 0 0 0 2px color-mix(in oklch, var(--danger) 30%, transparent); }
+.textarea:focus { box-shadow: var(--neu-shadow-inset), 0 0 0 2px var(--accent-glow); }
+.textarea.invalid { box-shadow: var(--neu-shadow-inset), 0 0 0 2px color-mix(in oklch, var(--danger) 30%, transparent); }
 .textarea::placeholder { color: var(--fg-subtle); }
 /* ============ Switch ============ */
 .switch {
@@ -476,7 +530,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   padding: 0;
   border-radius: 999px;
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   cursor: inherit;
   flex-shrink: 0;
   transition: all var(--dur) var(--ease);
@@ -484,9 +538,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .switch.sm { --w: 36px; --h: 20px; }
 .switch.lg { --w: 58px; --h: 32px; }
 /* When checkedChildren / unCheckedChildren are present, widen the track to fit. */
-.switch.with-children { --w: 60px; }
-.switch.with-children.sm { --w: 46px; }
-.switch.with-children.lg { --w: 74px; }
+.switch.with-children { --w: 72px; }
+.switch.with-children.sm { --w: 60px; }
+.switch.with-children.lg { --w: 86px; }
 .switch-thumb {
   position: absolute;
   top: 3px;
@@ -495,7 +549,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   height: calc(var(--h) - 6px);
   border-radius: 999px;
   background: var(--bg-raised);
-  box-shadow: var(--neu-out-sm);
+  box-shadow: var(--neu-shadow-control);
   transition: all var(--dur) var(--ease);
   z-index: 1;
 }
@@ -523,6 +577,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
   transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
 }
 /* Checked label sits on the left side of the track (thumb pushes right). */
@@ -562,7 +619,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   padding: 0;
   border-radius: 7px;
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   display: grid;
   place-items: center;
   flex-shrink: 0;
@@ -573,12 +630,12 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .checkbox-box svg { opacity: 0; transform: scale(0.6); transition: all var(--dur) var(--ease); }
 .checkbox.checked .checkbox-box {
   background: var(--accent);
-  box-shadow: var(--neu-out-sm), 0 2px 8px var(--accent-glow);
+  box-shadow: var(--neu-shadow-control), 0 2px 8px var(--accent-glow);
 }
 .checkbox.checked .checkbox-box svg { opacity: 1; transform: scale(1); }
 .checkbox.indeterminate .checkbox-box {
   background: var(--accent);
-  box-shadow: var(--neu-out-sm), 0 2px 8px var(--accent-glow);
+  box-shadow: var(--neu-shadow-control), 0 2px 8px var(--accent-glow);
 }
 .checkbox.indeterminate .checkbox-box::after {
   content: "";
@@ -604,7 +661,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   padding: 0;
   border-radius: 999px;
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   cursor: inherit;
   position: relative;
   flex-shrink: 0;
@@ -612,7 +669,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 }
 .radio.checked .radio-dot {
   background: var(--accent);
-  box-shadow: var(--neu-out-sm), 0 2px 8px var(--accent-glow);
+  box-shadow: var(--neu-shadow-control), 0 2px 8px var(--accent-glow);
 }
 .radio.checked .radio-dot::after {
   content: "";
@@ -632,7 +689,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   padding: 4px;
   border-radius: var(--r-md);
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   gap: 2px;
   flex-wrap: nowrap;
 }
@@ -664,7 +721,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   left: 0;
   border-radius: calc(var(--r-md) - 4px);
   background: var(--bg);
-  box-shadow: var(--neu-out-sm);
+  box-shadow: var(--neu-shadow-control);
   pointer-events: none;
   transition:
     transform var(--dur-slow) var(--ease),
@@ -703,7 +760,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   height: 10px;
   border-radius: 999px;
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   touch-action: none;
   z-index: 1;
 }
@@ -722,7 +779,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   width: 22px; height: 22px;
   border-radius: 999px;
   background: var(--bg-raised);
-  box-shadow: var(--neu-out-sm);
+  box-shadow: var(--neu-shadow-control);
   transform: translate(-50%, -50%);
   transition: all var(--dur-fast) var(--ease);
   display: grid; place-items: center;
@@ -737,7 +794,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   background: var(--slider-thumb-color, var(--accent));
 }
 .slider-thumb:focus-visible {
-  box-shadow: var(--neu-out-sm), 0 0 0 3px var(--accent-glow);
+  box-shadow: var(--neu-shadow-control), 0 0 0 3px var(--accent-glow);
 }
 .slider:hover .slider-thumb { transform: translate(-50%, -50%) scale(1.08); }
 .slider-value {
@@ -750,13 +807,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
 /* Tone variants */
 .slider.success .slider-thumb { --slider-thumb-color: var(--success); }
 .slider.success .slider-fill { background: linear-gradient(90deg, color-mix(in oklch, var(--success) 70%, white), var(--success)); box-shadow: 0 0 10px color-mix(in oklch, var(--success) 35%, transparent); }
-.slider.success .slider-thumb:focus-visible { box-shadow: var(--neu-out-sm), 0 0 0 3px color-mix(in oklch, var(--success) 35%, transparent); }
+.slider.success .slider-thumb:focus-visible { box-shadow: var(--neu-shadow-control), 0 0 0 3px color-mix(in oklch, var(--success) 35%, transparent); }
 .slider.warning .slider-thumb { --slider-thumb-color: var(--warning); }
 .slider.warning .slider-fill { background: linear-gradient(90deg, color-mix(in oklch, var(--warning) 70%, white), var(--warning)); box-shadow: 0 0 10px color-mix(in oklch, var(--warning) 35%, transparent); }
-.slider.warning .slider-thumb:focus-visible { box-shadow: var(--neu-out-sm), 0 0 0 3px color-mix(in oklch, var(--warning) 35%, transparent); }
+.slider.warning .slider-thumb:focus-visible { box-shadow: var(--neu-shadow-control), 0 0 0 3px color-mix(in oklch, var(--warning) 35%, transparent); }
 .slider.danger .slider-thumb { --slider-thumb-color: var(--danger); }
 .slider.danger  .slider-fill { background: linear-gradient(90deg, color-mix(in oklch, var(--danger) 70%, white), var(--danger));  box-shadow: 0 0 10px color-mix(in oklch, var(--danger) 35%, transparent); }
-.slider.danger  .slider-thumb:focus-visible { box-shadow: var(--neu-out-sm), 0 0 0 3px color-mix(in oklch, var(--danger) 35%, transparent); }
+.slider.danger  .slider-thumb:focus-visible { box-shadow: var(--neu-shadow-control), 0 0 0 3px color-mix(in oklch, var(--danger) 35%, transparent); }
 /* Marks */
 .slider-marks {
   position: absolute;
@@ -782,7 +839,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   width: 6px; height: 6px;
   border-radius: 999px;
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   position: absolute;
   top: -12px;
   left: 50%;
@@ -839,7 +896,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
     color-mix(in oklch, var(--bg) 88%, var(--shadow-light)),
     color-mix(in oklch, var(--bg) 92%, var(--shadow-dark))
   );
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   overflow: hidden;
   position: relative;
 }
@@ -888,7 +945,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   font-size: 11px;
   font-weight: 500;
   background: var(--bg);
-  box-shadow: var(--neu-flat);
+  box-shadow: var(--neu-shadow-subtle);
   color: var(--fg-muted);
 }
 .tag.accent  { color: var(--accent-ink); }
@@ -903,7 +960,20 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .tag.solid.danger   { background: var(--danger);  color: var(--bg); box-shadow: 0 2px 6px color-mix(in oklch, var(--danger) 35%, transparent); }
 .tag.borderless { background: transparent; box-shadow: none; }
 .tag .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
-.tag .tag-ico { color: currentColor; display: inline-flex; }
+.tag .tag-ico {
+  color: currentColor;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  flex-shrink: 0;
+}
+.tag .tag-ico img {
+  display: block;
+  width: 1em;
+  height: 1em;
+  object-fit: contain;
+}
 .tag .x { cursor: pointer; color: var(--fg-subtle); margin-left: 2px; display: inline-flex; }
 .tag .x:hover { color: var(--fg); }
 /* ============ Badge ============ */
@@ -934,7 +1004,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   width: var(--size); height: var(--size);
   border-radius: 999px;
   background: var(--bg);
-  box-shadow: var(--neu-out-sm);
+  box-shadow: var(--neu-shadow-control);
   display: grid; place-items: center;
   overflow: hidden;
   color: var(--accent-ink);
@@ -984,7 +1054,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .divider.sunken {
   background: transparent;
   height: 2px;
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
 }
 .divider.sunken.vertical {
   width: 2px;
@@ -992,7 +1062,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 }
 .divider.sunken:has(.divider-label) { background: transparent; box-shadow: none; }
 .divider.sunken:has(.divider-label)::before,
-.divider.sunken:has(.divider-label)::after { height: 2px; background: transparent; box-shadow: var(--neu-in-sm); }
+.divider.sunken:has(.divider-label)::after { height: 2px; background: transparent; box-shadow: var(--neu-shadow-inset); }
 /* ---- Dashed variant ---- */
 .divider.dashed {
   background: transparent;
@@ -1048,11 +1118,11 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .card {
   background: var(--bg);
   border-radius: var(--r-lg);
-  box-shadow: var(--neu-out);
+  box-shadow: var(--neu-shadow-panel);
   padding: var(--gap-5);
 }
-.card.flat   { box-shadow: var(--neu-flat); }
-.card.sunken { box-shadow: var(--neu-in); }
+.card.flat   { box-shadow: var(--neu-shadow-subtle); }
+.card.sunken { box-shadow: var(--neu-shadow-inset-strong); }
 .card.pad-none { padding: 0; }
 .card.pad-sm   { padding: var(--gap-3); }
 .card.pad-lg   { padding: var(--gap-6); }
@@ -1062,10 +1132,10 @@ input, textarea, select { font-family: inherit; color: inherit; }
 }
 .card.hoverable:hover {
   transform: translateY(-3px);
-  box-shadow: var(--neu-out-lg);
+  box-shadow: var(--neu-shadow-lift);
 }
-.card.hoverable.flat:hover { box-shadow: var(--neu-out-sm); }
-.card.hoverable.sunken:hover { box-shadow: var(--neu-out); }
+.card.hoverable.flat:hover { box-shadow: var(--neu-shadow-control); }
+.card.hoverable.sunken:hover { box-shadow: var(--neu-shadow-panel); }
 .card-head {
   display: flex; align-items: flex-start; justify-content: space-between;
   gap: var(--gap-3); margin-bottom: var(--gap-4);
@@ -1075,6 +1145,42 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .card-desc  { font-size: 12px; color: var(--fg-muted); }
 .card-actions { display: flex; gap: 6px; }
 .card-body { font-size: 13px; }
+/* ============ Surface ============ */
+.surface {
+  position: relative;
+  box-sizing: border-box;
+  min-width: 0;
+  color: var(--fg);
+  background: var(--bg);
+  border-radius: var(--r-lg);
+}
+.surface.tone-raised { background: var(--bg-raised); }
+.surface.tone-sunken { background: var(--bg-sunken); }
+.surface.tone-accent {
+  color: var(--accent-ink);
+  background: var(--accent-soft);
+}
+.surface.plain { box-shadow: none; }
+.surface.raised { box-shadow: var(--neu-shadow-panel); }
+.surface.sunken { box-shadow: var(--neu-shadow-inset-strong); }
+.surface.floating { box-shadow: var(--neu-shadow-float); }
+.surface.bordered { border: 1px solid var(--border); }
+.surface.pad-none { padding: 0; }
+.surface.pad-sm { padding: var(--gap-3); }
+.surface.pad-md { padding: var(--gap-5); }
+.surface.pad-lg { padding: var(--gap-8); }
+.surface.pad-xl { padding: var(--gap-10); }
+.surface.radius-none { border-radius: 0; }
+.surface.radius-sm { border-radius: var(--r-sm); }
+.surface.radius-md { border-radius: var(--r-md); }
+.surface.radius-lg { border-radius: var(--r-lg); }
+.surface.radius-xl { border-radius: var(--r-xl); }
+.surface.height-content { min-height: 0; }
+.surface.height-fill { min-height: 100%; }
+.surface.height-screen { min-height: 100vh; }
+.surface.scrollable { overflow: auto; }
+.surface > *:first-child { margin-top: 0; }
+.surface > *:last-child { margin-bottom: 0; }
 /* ============ Tabs ============ */
 .tabs { display: flex; flex-direction: column; gap: var(--gap-3); }
 .tabs-nav {
@@ -1082,7 +1188,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   padding: 5px;
   border-radius: var(--r-md);
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   gap: 2px;
   align-self: flex-start;
 }
@@ -1105,7 +1211,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .tabs-nav .tab.active {
   color: var(--accent-ink);
   background: var(--bg);
-  box-shadow: var(--neu-out-sm);
+  box-shadow: var(--neu-shadow-control);
   font-weight: 600;
 }
 .tabs-nav .tab[disabled] { opacity: 0.4; cursor: not-allowed; }
@@ -1145,7 +1251,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .collapse-item {
   background: var(--bg);
   border-radius: var(--r-md);
-  box-shadow: var(--neu-out-sm);
+  box-shadow: var(--neu-shadow-control);
   overflow: hidden;
 }
 .collapse.ghost .collapse-item {
@@ -1191,7 +1297,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   padding: 2px;
 }
 .collapse-chev.clickable { cursor: pointer; }
-.collapse-chev.clickable:hover { color: var(--fg); background: var(--bg); box-shadow: var(--neu-flat); }
+.collapse-chev.clickable:hover { color: var(--fg); background: var(--bg); box-shadow: var(--neu-shadow-subtle); }
 .collapse-item.open .collapse-chev { transform: rotate(180deg); color: var(--accent); }
 /* ============ Select ============ */
 .select {
@@ -1209,11 +1315,11 @@ input, textarea, select { font-family: inherit; color: inherit; }
   border: none;
   border-radius: var(--r-md);
   background: var(--bg);
-  box-shadow: var(--neu-out-sm);
+  box-shadow: var(--neu-shadow-control);
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  font-size: 13px;
+  font-size: var(--fs-md);
   font-family: inherit;
   color: var(--fg);
   cursor: pointer;
@@ -1228,21 +1334,46 @@ input, textarea, select { font-family: inherit; color: inherit; }
   flex: 1;
   min-width: 0;
 }
-.select-value > span {
+.select-value-label {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.select-icon,
+.menu-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  flex-shrink: 0;
+}
+.select-icon img,
+.menu-item-icon img {
+  display: block;
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+}
+.select.sm .select-icon img,
+.select.sm .menu-item-icon img {
+  width: 14px;
+  height: 14px;
+}
+.select.lg .select-icon img,
+.select.lg .menu-item-icon img {
+  width: 18px;
+  height: 18px;
+}
 .select.invalid .select-trigger {
-  box-shadow: var(--neu-out-sm), 0 0 0 2px color-mix(in oklch, var(--danger) 30%, transparent);
+  box-shadow: var(--neu-shadow-control), 0 0 0 2px color-mix(in oklch, var(--danger) 30%, transparent);
 }
 .select.invalid.open .select-trigger {
-  box-shadow: var(--neu-in-sm), 0 0 0 2px color-mix(in oklch, var(--danger) 30%, transparent);
+  box-shadow: var(--neu-shadow-inset), 0 0 0 2px color-mix(in oklch, var(--danger) 30%, transparent);
 }
-.select.sm .select-trigger { height: 30px; padding: 0 32px 0 12px; font-size: 12px; border-radius: var(--r-sm); }
-.select.lg .select-trigger { height: 48px; padding: 0 36px 0 18px; font-size: 14px; border-radius: var(--r-lg); }
+.select.sm .select-trigger { height: var(--ctrl-h-sm); padding: 0 32px 0 var(--ctrl-pad-x-sm); font-size: var(--fs-sm); border-radius: var(--r-sm); }
+.select.lg .select-trigger { height: var(--field-h-lg); padding: 0 36px 0 var(--ctrl-pad-x); font-size: var(--fs-lg); border-radius: var(--r-lg); }
 .select-trigger:hover { color: var(--accent-ink); }
-.select.open .select-trigger { box-shadow: var(--neu-in-sm); color: var(--accent-ink); }
+.select.open .select-trigger { box-shadow: var(--neu-shadow-inset); color: var(--accent-ink); }
 .select-trigger .placeholder { color: var(--fg-subtle); }
 .select-caret {
   position: absolute;
@@ -1290,7 +1421,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   height: 20px;
   border-radius: 999px;
   background: var(--bg);
-  box-shadow: var(--neu-out-sm);
+  box-shadow: var(--neu-shadow-control);
   display: inline-grid;
   place-items: center;
   cursor: pointer;
@@ -1300,14 +1431,14 @@ input, textarea, select { font-family: inherit; color: inherit; }
   z-index: 1;
 }
 .select:hover .select-clear { opacity: 1; }
-.select-clear:hover { color: var(--accent-ink); box-shadow: var(--neu-in-sm); }
+.select-clear:hover { color: var(--accent-ink); box-shadow: var(--neu-shadow-inset); }
 /* Multi-select menu: leading checkbox per item */
 .menu-check {
   width: 16px;
   height: 16px;
   border-radius: 5px;
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   display: inline-grid;
   place-items: center;
   flex-shrink: 0;
@@ -1316,7 +1447,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 }
 .menu-check.on {
   background: var(--accent);
-  box-shadow: var(--neu-out-sm), 0 1px 4px var(--accent-glow);
+  box-shadow: var(--neu-shadow-control), 0 1px 4px var(--accent-glow);
 }
 /* Menu search — flush with menu, single subtle separator (no nested frame) */
 .menu-search {
@@ -1334,7 +1465,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   justify-content: center;
   gap: 10px;
   padding: 26px 12px;
-  font-size: 12px;
+  font-size: var(--fs-sm);
   color: var(--fg-muted);
 }
 .menu-state .menu-state-ico {
@@ -1342,7 +1473,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   height: 40px;
   border-radius: var(--r-md);
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   display: grid;
   place-items: center;
   color: var(--fg-subtle);
@@ -1372,7 +1503,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   text-overflow: ellipsis;
 }
 .menu-item-desc {
-  font-size: 11px;
+  font-size: var(--fs-xs);
   color: var(--fg-subtle);
   white-space: nowrap;
   overflow: hidden;
@@ -1382,7 +1513,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 /* Keyboard / hover highlight — soft raised pill */
 .menu-item.highlight:not([disabled]) {
   background: var(--bg);
-  box-shadow: var(--neu-out-sm);
+  box-shadow: var(--neu-shadow-control);
   color: var(--accent-ink);
 }
 .menu-item[disabled] {
@@ -1392,7 +1523,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .menu {
   background: var(--bg);
   border-radius: var(--r-md);
-  box-shadow: var(--neu-float);
+  box-shadow: var(--neu-shadow-float);
   padding: 6px;
   min-width: 180px;
   z-index: 1000;
@@ -1403,7 +1534,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .menu-item {
   padding: 9px 12px;
   border-radius: var(--r-sm);
-  font-size: 13px;
+  font-size: var(--fs-md);
   cursor: pointer;
   color: var(--fg);
   display: flex;
@@ -1416,7 +1547,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   width: 100%;
   text-align: left;
 }
-.menu-item:hover { background: var(--bg); box-shadow: var(--neu-flat); color: var(--accent-ink); }
+.menu-item:hover { background: var(--bg); box-shadow: var(--neu-shadow-subtle); color: var(--accent-ink); }
 .menu-item.active { color: var(--accent-ink); font-weight: 500; }
 .menu-item .tick { margin-left: auto; color: var(--accent); opacity: 0; }
 .menu-item.active .tick { opacity: 1; }
@@ -1447,7 +1578,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .modal {
   background: var(--bg);
   border-radius: var(--r-xl);
-  box-shadow: var(--neu-float);
+  box-shadow: var(--neu-shadow-float);
   padding: var(--gap-6);
   width: min(480px, 92vw);
   animation: modalIn var(--dur-slow) var(--ease);
@@ -1500,7 +1631,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .modal-close:hover {
   color: var(--fg);
   background: var(--bg);
-  box-shadow: var(--neu-flat);
+  box-shadow: var(--neu-shadow-subtle);
 }
 .modal-static-body {
   display: flex;
@@ -1515,7 +1646,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   place-items: center;
   flex-shrink: 0;
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   color: var(--accent);
 }
 .modal-static-icon.success { color: var(--success); }
@@ -1545,6 +1676,9 @@ input, textarea, select { font-family: inherit; color: inherit; }
   overflow-y: auto;
   display: flex;
   flex-direction: column;
+  --drawer-shadow-offset: calc(var(--shadow-offset) * 4 * var(--shadow-float-scale));
+  --drawer-shadow-blur: calc(var(--shadow-blur) * 3.75 * var(--shadow-float-scale));
+  --drawer-shadow-spread: calc(var(--shadow-offset) * -3.3 * var(--shadow-float-scale));
 }
 .drawer.hidden {
   display: none;
@@ -1553,25 +1687,25 @@ input, textarea, select { font-family: inherit; color: inherit; }
   top: 0; right: 0; bottom: 0;
   width: min(420px, 92vw);
   animation: drawerInRight var(--dur-slow) var(--ease);
-  box-shadow: -24px 0 60px -20px rgba(40, 55, 80, 0.25);
+  box-shadow: calc(var(--drawer-shadow-offset) * -1) 0 var(--drawer-shadow-blur) var(--drawer-shadow-spread) var(--shadow-dark);
 }
 .drawer.left {
   top: 0; left: 0; bottom: 0;
   width: min(420px, 92vw);
   animation: drawerInLeft var(--dur-slow) var(--ease);
-  box-shadow: 24px 0 60px -20px rgba(40, 55, 80, 0.25);
+  box-shadow: var(--drawer-shadow-offset) 0 var(--drawer-shadow-blur) var(--drawer-shadow-spread) var(--shadow-dark);
 }
 .drawer.top {
   top: 0; left: 0; right: 0;
   height: min(320px, 80vh);
   animation: drawerInTop var(--dur-slow) var(--ease);
-  box-shadow: 0 24px 60px -20px rgba(40, 55, 80, 0.25);
+  box-shadow: 0 var(--drawer-shadow-offset) var(--drawer-shadow-blur) var(--drawer-shadow-spread) var(--shadow-dark);
 }
 .drawer.bottom {
   bottom: 0; left: 0; right: 0;
   height: min(320px, 80vh);
   animation: drawerInBottom var(--dur-slow) var(--ease);
-  box-shadow: 0 -24px 60px -20px rgba(40, 55, 80, 0.25);
+  box-shadow: 0 calc(var(--drawer-shadow-offset) * -1) var(--drawer-shadow-blur) var(--drawer-shadow-spread) var(--shadow-dark);
 }
 @keyframes drawerInRight  { from { transform: translateX( 20px); opacity: 0; } }
 @keyframes drawerInLeft   { from { transform: translateX(-20px); opacity: 0; } }
@@ -1609,7 +1743,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .drawer-close:hover {
   color: var(--fg);
   background: var(--bg);
-  box-shadow: var(--neu-flat);
+  box-shadow: var(--neu-shadow-subtle);
 }
 .drawer-body {
   flex: 1;
@@ -1636,7 +1770,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   font-size: 11px;
   font-weight: 500;
   white-space: nowrap;
-  box-shadow: var(--neu-out-sm);
+  box-shadow: var(--neu-shadow-control);
   pointer-events: none;
   animation: fadeIn var(--dur) var(--ease);
   z-index: 1000;
@@ -1658,7 +1792,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .message {
   background: var(--bg);
   border-radius: var(--r-md);
-  box-shadow: var(--neu-float);
+  box-shadow: var(--neu-shadow-float);
   padding: 12px 16px;
   min-width: 240px;
   display: flex; align-items: center; gap: 10px;
@@ -1692,7 +1826,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   background: var(--bg);
   border-radius: var(--r-md);
   min-width: 220px;
-  box-shadow: var(--neu-float);
+  box-shadow: var(--neu-shadow-float);
   position: relative;
 }
 /*
@@ -1785,7 +1919,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   padding: 14px 16px;
   border-radius: var(--r-md);
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   position: relative;
 }
 .alert-ico {
@@ -1793,6 +1927,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
   display: grid; place-items: center;
   flex-shrink: 0;
   margin-top: 1px;
+  line-height: 0;
+}
+.alert-ico img {
+  display: block;
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
 }
 .alert.info    .alert-ico { color: var(--info); }
 .alert.success .alert-ico { color: var(--success); }
@@ -1820,12 +1961,12 @@ input, textarea, select { font-family: inherit; color: inherit; }
   cursor: pointer;
   border: none; background: transparent;
 }
-.alert-close:hover { color: var(--fg); background: var(--bg); box-shadow: var(--neu-flat); }
+.alert-close:hover { color: var(--fg); background: var(--bg); box-shadow: var(--neu-shadow-subtle); }
 /* ============ Table ============ */
 .table-wrap {
   border-radius: var(--r-lg);
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   overflow: auto;
 }
 /* When scroll=y is on, the wrap itself becomes the scroll region. */
@@ -1862,13 +2003,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
   width: 16px; height: 16px;
   border-radius: 6px;
   background: var(--bg);
-  box-shadow: var(--neu-flat);
+  box-shadow: var(--neu-shadow-subtle);
   align-items: center; justify-content: center;
   margin-left: 6px;
   color: var(--fg-subtle);
   vertical-align: middle;
 }
-.table th.sorted .sort-ind { color: var(--accent); box-shadow: var(--neu-in-sm); }
+.table th.sorted .sort-ind { color: var(--accent); box-shadow: var(--neu-shadow-inset); }
 .table td {
   padding: 12px 18px;
   border-bottom: 1px solid var(--divider);
@@ -1927,14 +2068,14 @@ input, textarea, select { font-family: inherit; color: inherit; }
   border: none;
   border-radius: var(--r-sm);
   background: var(--bg);
-  box-shadow: var(--neu-flat);
+  box-shadow: var(--neu-shadow-subtle);
   color: var(--fg-subtle);
   display: inline-flex; align-items: center; justify-content: center;
   cursor: pointer;
   transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
 }
-.expand-btn:hover { color: var(--accent-ink); box-shadow: var(--neu-out-sm); }
-.expand-btn.open { transform: rotate(90deg); color: var(--accent-ink); box-shadow: var(--neu-in-sm); }
+.expand-btn:hover { color: var(--accent-ink); box-shadow: var(--neu-shadow-control); }
+.expand-btn.open { transform: rotate(90deg); color: var(--accent-ink); box-shadow: var(--neu-shadow-inset); }
 /* Expanded row panel */
 .table tbody tr.expanded-row td {
   padding: 14px 18px;
@@ -1945,7 +2086,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   padding: 14px 16px;
   border-radius: var(--r-md);
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   color: var(--fg);
   font-size: 13px;
 }
@@ -1956,14 +2097,14 @@ input, textarea, select { font-family: inherit; color: inherit; }
   border: none;
   padding: 0;
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   display: inline-flex; align-items: center; justify-content: center;
   cursor: pointer;
   transition: box-shadow var(--dur-fast) var(--ease);
 }
 .table .row-check .radio-dot:disabled { opacity: 0.5; cursor: not-allowed; }
 .table .row-check .radio-dot.checked {
-  box-shadow: var(--neu-out-sm);
+  box-shadow: var(--neu-shadow-control);
 }
 .table .row-check .radio-dot.checked::after {
   content: "";
@@ -1977,7 +2118,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   width: 18px; height: 18px;
   border-radius: 5px;
   background: var(--bg);
-  box-shadow: var(--neu-flat);
+  box-shadow: var(--neu-shadow-subtle);
   color: var(--fg-subtle);
   align-items: center; justify-content: center;
   margin-left: 6px;
@@ -1990,7 +2131,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .table th.filterable .filter-ind:hover { color: var(--fg); }
 .table th.filterable .filter-ind.active {
   color: var(--accent-ink);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
 }
 /* Filter popover panel (portaled to body) */
 .table-filter-panel {
@@ -1999,7 +2140,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   max-width: 260px;
   background: var(--bg);
   border-radius: var(--r-md);
-  box-shadow: var(--neu-float);
+  box-shadow: var(--neu-shadow-float);
   padding: 10px;
   animation: menuIn var(--dur) var(--ease);
 }
@@ -2038,17 +2179,17 @@ input, textarea, select { font-family: inherit; color: inherit; }
   padding: 6px 12px;
   border-radius: var(--r-sm);
   background: var(--bg);
-  box-shadow: var(--neu-out-sm);
+  box-shadow: var(--neu-shadow-control);
   font-size: 12px;
   font-family: inherit;
   color: var(--fg);
   cursor: pointer;
   transition: box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
 }
-.table-filter-actions .tf-btn:hover { box-shadow: var(--neu-in-sm); }
+.table-filter-actions .tf-btn:hover { box-shadow: var(--neu-shadow-inset); }
 .table-filter-actions .tf-btn.primary { color: var(--accent-ink); font-weight: 600; }
-.table-filter-actions .tf-btn.ghost { color: var(--fg-muted); box-shadow: var(--neu-flat); }
-.table-filter-actions .tf-btn.ghost:hover { box-shadow: var(--neu-in-sm); }
+.table-filter-actions .tf-btn.ghost { color: var(--fg-muted); box-shadow: var(--neu-shadow-subtle); }
+.table-filter-actions .tf-btn.ghost:hover { box-shadow: var(--neu-shadow-inset); }
 /* Built-in pagination bar */
 .table-pagination {
   margin-top: 12px;
@@ -2057,7 +2198,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .table-card {
   border-radius: var(--r-lg);
   background: var(--bg);
-  box-shadow: var(--neu-out-sm);
+  box-shadow: var(--neu-shadow-control);
   overflow: hidden;
 }
 .table-card .table-wrap { background: transparent; box-shadow: none; border-radius: 0; }
@@ -2116,7 +2257,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   border: none;
   border-radius: var(--r-sm);
   background: var(--bg);
-  box-shadow: var(--neu-out-sm);
+  box-shadow: var(--neu-shadow-control);
   display: inline-flex; align-items: center; justify-content: center;
   cursor: pointer;
   font-size: 12px;
@@ -2127,11 +2268,11 @@ input, textarea, select { font-family: inherit; color: inherit; }
 }
 .pagination .pg:hover { color: var(--accent-ink); }
 .pagination .pg.active {
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   color: var(--accent-ink);
   font-weight: 700;
 }
-.pagination .pg.disabled { color: var(--fg-subtle); cursor: not-allowed; box-shadow: var(--neu-flat); }
+.pagination .pg.disabled { color: var(--fg-subtle); cursor: not-allowed; box-shadow: var(--neu-shadow-subtle); }
 .pagination .ellipsis { padding: 0 4px; color: var(--fg-subtle); }
 /* size changer — compact Select inline with the page buttons */
 .pagination .pg-size-changer { margin-left: 8px; min-width: 108px; }
@@ -2152,7 +2293,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   border: none;
   border-radius: var(--r-sm);
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   color: var(--fg);
   font-family: inherit;
   font-size: 12px;
@@ -2162,7 +2303,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   transition: box-shadow var(--dur-fast) var(--ease);
 }
 .pagination .pg-jumper-input:focus-visible {
-  box-shadow: var(--neu-in-sm), 0 0 0 2px var(--accent-glow);
+  box-shadow: var(--neu-shadow-inset), 0 0 0 2px var(--accent-glow);
 }
 /* ============ List ============ */
 .list {
@@ -2170,7 +2311,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   flex-direction: column;
   background: var(--bg);
   border-radius: var(--r-lg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   padding: 8px;
 }
 .list-item {
@@ -2182,8 +2323,8 @@ input, textarea, select { font-family: inherit; color: inherit; }
   transition: all var(--dur-fast) var(--ease);
 }
 .list-item.clickable { cursor: pointer; }
-.list-item.clickable:hover { background: var(--bg); box-shadow: var(--neu-flat); }
-.list-item.selected { box-shadow: var(--neu-out-sm); background: var(--bg); }
+.list-item.clickable:hover { background: var(--bg); box-shadow: var(--neu-shadow-subtle); }
+.list-item.selected { box-shadow: var(--neu-shadow-control); background: var(--bg); }
 .list.with-dividers .list-item + .list-item { border-top: 1px solid var(--divider); border-radius: 0; }
 .list-item-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
 .list-item-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@@ -2210,7 +2351,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   border: none;
   border-radius: 50%;
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   animation: none;
 }
 .spin.ring::before {
@@ -2295,7 +2436,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   width: 56px; height: 56px;
   border-radius: var(--r-lg);
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   display: grid; place-items: center;
   color: var(--fg-subtle);
 }
@@ -2346,7 +2487,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   background: var(--bg);
   border-radius: var(--r-lg);
   padding: var(--gap-4);
-  box-shadow: var(--neu-out);
+  box-shadow: var(--neu-shadow-panel);
   width: 320px;
 }
 .calendar-head {
@@ -2361,7 +2502,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   font-family: inherit;
   transition: all var(--dur-fast) var(--ease);
 }
-.calendar-title:hover { background: var(--bg); box-shadow: var(--neu-flat); }
+.calendar-title:hover { background: var(--bg); box-shadow: var(--neu-shadow-subtle); }
 .calendar-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
@@ -2390,7 +2531,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   transition: all var(--dur-fast) var(--ease);
 }
 .calendar-cell.out { color: var(--fg-subtle); opacity: 0.5; }
-.calendar-cell:hover { background: var(--bg); box-shadow: var(--neu-flat); }
+.calendar-cell:hover { background: var(--bg); box-shadow: var(--neu-shadow-subtle); }
 .calendar-cell.today { font-weight: 700; color: var(--accent-ink); }
 .calendar-cell.today::after {
   content: ""; position: absolute; bottom: 4px; left: 50%;
@@ -2400,7 +2541,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 }
 .calendar-cell.selected {
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   color: var(--accent-ink);
   font-weight: 600;
 }
@@ -2413,17 +2554,39 @@ input, textarea, select { font-family: inherit; color: inherit; }
   border-radius: var(--r-md);
   background: var(--bg);
   padding: 6px;
-  box-shadow: var(--neu-out-sm);
+  box-shadow: var(--neu-shadow-control);
   overflow: hidden;
   line-height: 0;
 }
+.n-image.raw {
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.n-image.icon {
+  border-radius: var(--r-sm);
+}
+.n-image.unframed {
+  background: transparent;
+  box-shadow: none;
+}
 .n-image-frame {
   position: relative;
   overflow: hidden;
   border-radius: calc(var(--r-md) - 4px);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   background: var(--bg-sunken);
 }
+.n-image.raw .n-image-frame {
+  border-radius: 0;
+}
+.n-image.icon .n-image-frame {
+  border-radius: var(--r-sm);
+}
+.n-image.unframed .n-image-frame {
+  background: transparent;
+  box-shadow: none;
+}
 .n-image img {
   display: block;
   width: 100%;
@@ -2510,7 +2673,62 @@ input, textarea, select { font-family: inherit; color: inherit; }
   max-width: 80vw;
   max-height: 80vh;
   border-radius: var(--r-lg);
-  box-shadow: var(--neu-float);
+  box-shadow: var(--neu-shadow-float);
+}
+/* ============ SpriteImage / LayeredImage ============ */
+.n-sprite-image,
+.n-layered-image {
+  display: inline-block;
+  position: relative;
+  border-radius: var(--r-sm);
+  background: var(--bg);
+  padding: 6px;
+  box-shadow: var(--neu-shadow-control);
+  overflow: hidden;
+  line-height: 0;
+}
+.n-sprite-image.raw,
+.n-layered-image.raw {
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.n-sprite-image.unframed,
+.n-layered-image.unframed {
+  background: transparent;
+  box-shadow: none;
+}
+.n-sprite-image-frame,
+.n-layered-image-frame {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--r-sm);
+  background: var(--bg-sunken);
+  box-shadow: var(--neu-shadow-inset);
+}
+.n-sprite-image.raw .n-sprite-image-frame,
+.n-layered-image.raw .n-layered-image-frame {
+  border-radius: 0;
+}
+.n-sprite-image.unframed .n-sprite-image-frame,
+.n-layered-image.unframed .n-layered-image-frame {
+  background: transparent;
+  box-shadow: none;
+}
+.n-sprite-image-sprite {
+  display: block;
+  background-repeat: no-repeat;
+  transform-origin: top left;
+}
+.n-layered-image-layer {
+  position: absolute;
+  display: block;
+}
+.n-layered-image img {
+  display: block;
+  width: 100%;
+  height: 100%;
 }
 /* ============ Cascader ============ */
 .cascader {
@@ -2525,7 +2743,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   padding: 0 36px 0 var(--ctrl-pad-x);
   border-radius: var(--r-md);
   background: var(--bg);
-  box-shadow: var(--neu-out-sm);
+  box-shadow: var(--neu-shadow-control);
   display: inline-flex;
   align-items: center;
   font-size: 13px;
@@ -2537,7 +2755,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   text-align: left;
 }
 .cascader-trigger.placeholder { color: var(--fg-subtle); }
-.cascader.open .cascader-trigger { box-shadow: var(--neu-in-sm); color: var(--accent-ink); }
+.cascader.open .cascader-trigger { box-shadow: var(--neu-shadow-inset); color: var(--accent-ink); }
 .cascader-clear {
   position: absolute;
   right: 30px;
@@ -2547,7 +2765,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   height: 20px;
   border-radius: 999px;
   background: var(--bg);
-  box-shadow: var(--neu-out-sm);
+  box-shadow: var(--neu-shadow-control);
   display: inline-grid;
   place-items: center;
   color: var(--fg-subtle);
@@ -2555,13 +2773,13 @@ input, textarea, select { font-family: inherit; color: inherit; }
   transition: all var(--dur-fast) var(--ease);
 }
 .cascader:hover .cascader-clear { opacity: 1; }
-.cascader-clear:hover { color: var(--accent-ink); box-shadow: var(--neu-in-sm); }
+.cascader-clear:hover { color: var(--accent-ink); box-shadow: var(--neu-shadow-inset); }
 .cascader-panel {
   z-index: 1000;
   display: flex;
   background: var(--bg);
   border-radius: var(--r-md);
-  box-shadow: var(--neu-float);
+  box-shadow: var(--neu-shadow-float);
   padding: 6px;
   animation: menuIn var(--dur) var(--ease);
   gap: 4px;
@@ -2602,7 +2820,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 }
 .cascader-search-item:hover {
   background: var(--bg);
-  box-shadow: var(--neu-flat);
+  box-shadow: var(--neu-shadow-subtle);
   color: var(--accent-ink);
 }
 .cascader-path-sep { color: var(--fg-subtle); }
@@ -2640,10 +2858,23 @@ input, textarea, select { font-family: inherit; color: inherit; }
   width: 100%;
   text-align: left;
 }
-.cascader-item:hover { background: var(--bg); box-shadow: var(--neu-flat); color: var(--accent-ink); }
+.cascader-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  flex-shrink: 0;
+}
+.cascader-icon img {
+  display: block;
+  width: 15px;
+  height: 15px;
+  object-fit: contain;
+}
+.cascader-item:hover { background: var(--bg); box-shadow: var(--neu-shadow-subtle); color: var(--accent-ink); }
 .cascader-item.active {
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   color: var(--accent-ink);
   font-weight: 500;
 }
@@ -2693,7 +2924,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   padding: 1px 6px;
   border-radius: 5px;
   background: var(--bg-sunken);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   color: var(--accent-ink);
   margin: 0 2px;
 }
@@ -2703,7 +2934,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   padding: 1px 7px;
   border-radius: 5px;
   background: var(--bg-raised);
-  box-shadow: var(--neu-flat);
+  box-shadow: var(--neu-shadow-subtle);
   border: 1px solid var(--border);
   color: var(--fg);
   margin: 0 2px;
@@ -2784,7 +3015,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 .typo-action:hover {
   color: var(--accent-ink);
   background: var(--bg);
-  box-shadow: var(--neu-flat);
+  box-shadow: var(--neu-shadow-subtle);
 }
 .typo-action:focus-visible {
   outline: 2px solid var(--accent-glow);
@@ -2806,7 +3037,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   font: inherit;
   color: inherit;
   background: var(--bg-sunken);
-  box-shadow: var(--neu-in);
+  box-shadow: var(--neu-shadow-inset-strong);
   border: none;
   outline: none;
   width: 100%;
@@ -2821,7 +3052,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   font-family: inherit;
 }
 .typo-editor:focus {
-  box-shadow: var(--neu-in), 0 0 0 3px var(--accent-glow);
+  box-shadow: var(--neu-shadow-inset-strong), 0 0 0 3px var(--accent-glow);
 }
 /* ---- Ellipsis ---- */
 .typo.ellipsis {
@@ -2880,7 +3111,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   padding: 4px;
   border: none;
   background: var(--bg);
-  box-shadow: var(--neu-flat);
+  box-shadow: var(--neu-shadow-subtle);
   border-radius: 10px;
   cursor: pointer;
   transition: box-shadow var(--dur) var(--ease);
@@ -2888,7 +3119,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   font: inherit;
 }
 .cp-trigger:hover:not(:disabled) {
-  box-shadow: var(--neu-out);
+  box-shadow: var(--neu-shadow-panel);
 }
 .cp-trigger:disabled {
   opacity: 0.5;
@@ -2910,7 +3141,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   width: 22px;
   height: 22px;
   border-radius: 6px;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), var(--neu-in-sm);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), var(--neu-shadow-inset);
   background-clip: padding-box;
 }
 .cp-trigger.sm .cp-swatch { width: 18px; height: 18px; border-radius: 5px; }
@@ -2936,7 +3167,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   padding: 12px;
   background: var(--bg);
   border-radius: var(--r-md);
-  box-shadow: var(--neu-float);
+  box-shadow: var(--neu-shadow-float);
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -3032,7 +3263,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   border: none;
   outline: none;
   background: var(--bg-sunken);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   border-radius: 7px;
   font-family: var(--font-mono);
   font-size: 12px;
@@ -3040,7 +3271,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   text-transform: lowercase;
 }
 .cp-input:focus {
-  box-shadow: var(--neu-in-sm), 0 0 0 2px var(--accent-soft);
+  box-shadow: var(--neu-shadow-inset), 0 0 0 2px var(--accent-soft);
 }
 .cp-presets {
   display: grid;
@@ -3065,7 +3296,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
 }
 /* Dark mode tweaks */
 [data-theme="dark"] .cp-swatch {
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), var(--neu-in-sm);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), var(--neu-shadow-inset);
 }
 [data-theme="dark"] .cp-preset {
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
@@ -3123,7 +3354,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   border: none; padding: 0;
   border-radius: 999px;
   background: var(--bg);
-  box-shadow: var(--neu-flat);
+  box-shadow: var(--neu-shadow-subtle);
   position: relative;
   cursor: pointer;
   transition: transform var(--dur-fast) var(--ease);
@@ -3163,7 +3394,7 @@ input, textarea, select { font-family: inherit; color: inherit; }
   overflow: visible;
 }
 .win-controls.windows .win-btn svg { display: block; flex-shrink: 0; }
-.win-controls.windows .win-btn:hover { background: var(--bg); box-shadow: var(--neu-in-sm); color: var(--fg); }
+.win-controls.windows .win-btn:hover { background: var(--bg); box-shadow: var(--neu-shadow-inset); color: var(--fg); }
 .win-controls.windows .win-btn.close:hover {
   background: var(--danger);
   color: white;
@@ -3199,11 +3430,11 @@ input, textarea, select { font-family: inherit; color: inherit; }
   width: 100%;
   transition: all var(--dur-fast) var(--ease);
 }
-.sidebar-item:hover { color: var(--fg); background: var(--bg); box-shadow: var(--neu-flat); }
+.sidebar-item:hover { color: var(--fg); background: var(--bg); box-shadow: var(--neu-shadow-subtle); }
 .sidebar-item.active {
   color: var(--accent-ink);
   background: var(--bg);
-  box-shadow: var(--neu-in-sm);
+  box-shadow: var(--neu-shadow-inset);
   font-weight: 500;
 }
 .sidebar-icon { display: inline-flex; flex-shrink: 0; }
@@ -3237,3 +3468,445 @@ input, textarea, select { font-family: inherit; color: inherit; }
   min-width: 0;
   overflow: auto;
 }
+/* ============ ThemePanel ============ */
+.theme-panel {
+  width: min(100%, 340px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-3);
+  box-sizing: border-box;
+  padding: var(--gap-4);
+  border-radius: var(--r-xl);
+  color: var(--fg);
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-lift);
+}
+.theme-panel.compact {
+  width: min(100%, 300px);
+  gap: var(--gap-2);
+  padding: var(--gap-3);
+}
+.theme-panel-head {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.theme-panel-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  color: var(--fg);
+  font-size: 14px;
+  font-weight: 700;
+}
+.theme-panel-title svg {
+  flex: 0 0 auto;
+  color: var(--accent);
+}
+.theme-panel-title span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.theme-panel-desc {
+  font-size: 12px;
+  color: var(--fg-muted);
+}
+.theme-panel-row {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: var(--gap-3);
+  border-top: 1px solid var(--divider);
+}
+.theme-panel-head + .theme-panel-row,
+.theme-panel-row:first-child {
+  border-top: none;
+  padding-top: 0;
+}
+.theme-panel-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--fg);
+}
+.theme-panel-label > span:last-child:not(:first-child) {
+  min-width: 0;
+  max-width: 54%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 2px 8px;
+  border-radius: var(--r-pill);
+  color: var(--accent-ink);
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-inset);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+}
+.theme-panel-presets {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--gap-2);
+}
+.theme-panel-preset-shell {
+  position: relative;
+  min-width: 0;
+}
+.theme-panel .theme-panel-preset.btn {
+  min-width: 0;
+  width: 100%;
+  height: auto;
+  min-height: 74px;
+  justify-content: stretch;
+  align-items: stretch;
+  flex-direction: column;
+  gap: 8px;
+  padding: 9px;
+  color: var(--fg-muted);
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-control);
+  text-align: left;
+  white-space: normal;
+  transition:
+    color var(--dur-fast) var(--ease),
+    box-shadow var(--dur-fast) var(--ease),
+    transform var(--dur-fast) var(--ease);
+}
+.theme-panel .theme-panel-preset.btn:hover {
+  color: var(--fg);
+  box-shadow: var(--neu-shadow-panel);
+  transform: translateY(-1px);
+}
+.theme-panel .theme-panel-preset.btn.active {
+  color: var(--accent-ink);
+  box-shadow: var(--neu-shadow-inset), 0 0 0 1px var(--accent-glow);
+  transform: none;
+}
+.theme-panel .theme-panel-preset.btn.active:hover {
+  color: var(--accent-ink);
+  box-shadow: var(--neu-shadow-inset), 0 0 0 1px var(--accent-glow);
+}
+.theme-panel .theme-panel-preset-shell.deletable .theme-panel-preset.btn {
+  padding-right: 28px;
+}
+.theme-panel .theme-panel-preset-delete.btn {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 22px;
+  height: 22px;
+  min-width: 22px;
+  padding: 0;
+  color: var(--fg-subtle);
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-control);
+  opacity: 0;
+  transform: scale(0.92);
+}
+.theme-panel-preset-shell:hover .theme-panel-preset-delete.btn,
+.theme-panel-preset-shell:focus-within .theme-panel-preset-delete.btn {
+  opacity: 1;
+  transform: scale(1);
+}
+.theme-panel .theme-panel-preset-delete.btn:hover {
+  box-shadow: var(--neu-shadow-inset);
+}
+.theme-panel-preset-ink {
+  display: grid;
+  grid-template-columns: 1fr 1fr 0.7fr;
+  gap: 4px;
+  width: 100%;
+}
+.theme-panel-preset-ink span {
+  height: 18px;
+  min-width: 0;
+  border-radius: var(--r-pill);
+  box-shadow: inset 0 0 0 1px var(--divider);
+}
+.theme-panel-preset-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  width: 100%;
+}
+.theme-panel-preset-copy > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: inherit;
+  font-size: 12px;
+  font-weight: 700;
+}
+.theme-panel-preset-copy small {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--fg-subtle);
+  font-size: 10px;
+  font-weight: 500;
+}
+.theme-panel-swatches {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.theme-panel .theme-panel-swatch.btn {
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  padding: 0;
+  border-radius: var(--r-pill);
+  box-shadow: var(--neu-shadow-subtle);
+}
+.theme-panel-swatch.active {
+  box-shadow: var(--neu-shadow-inset), 0 0 0 2px var(--accent-glow);
+}
+.theme-panel .radio-group.segmented {
+  width: 100%;
+}
+.theme-panel .btn.block {
+  margin-top: var(--gap-1);
+}
+.theme-panel-create {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px;
+  border-radius: var(--r-md);
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-inset);
+}
+.theme-panel-create-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+.theme-panel-create-head > div {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.theme-panel-create-head span {
+  color: var(--fg);
+  font-size: 12px;
+  font-weight: 700;
+}
+.theme-panel-create-head small {
+  min-width: 0;
+  color: var(--fg-subtle);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.theme-panel-create-field {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  color: var(--fg-subtle);
+  font-family: var(--font-mono);
+  font-size: 10px;
+}
+.theme-panel-create-field .radio-group.segmented {
+  width: 100%;
+}
+.theme-panel-create-mode.radio-group.segmented {
+  width: 100%;
+}
+.theme-panel-create-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+.theme-panel-create-grid .cp-trigger,
+.theme-panel-create-grid .cp-custom-trigger {
+  width: 100%;
+}
+.theme-panel-create-sliders {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 2px 0;
+}
+.theme-panel-shadow {
+  gap: 7px;
+}
+.theme-panel-create-preview {
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 7px 9px;
+  border-radius: var(--preview-radius, var(--r-md));
+  color: var(--preview-fg, var(--fg));
+  background: var(--preview-bg, var(--bg));
+  box-shadow:
+    calc(var(--shadow-offset) * 0.45 * var(--preview-shadow-scale, 1)) calc(var(--shadow-offset) * 0.45 * var(--preview-shadow-scale, 1)) calc(var(--shadow-blur) * 0.55 * var(--preview-shadow-scale, 1)) var(--preview-shadow-dark, var(--shadow-dark)),
+    calc(var(--shadow-offset) * -0.45 * var(--preview-shadow-scale, 1)) calc(var(--shadow-offset) * -0.45 * var(--preview-shadow-scale, 1)) calc(var(--shadow-blur) * 0.55 * var(--preview-shadow-scale, 1)) var(--preview-shadow-light, var(--shadow-light));
+  font-family: var(--preview-font, var(--font-sans));
+  font-size: 12px;
+  font-weight: 700;
+}
+.theme-panel-create-preview-label {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  color: inherit;
+}
+.theme-panel-create-preview-label > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.theme-panel-create-preview i {
+  flex: 0 0 auto;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--r-pill);
+  background: var(--preview-accent, var(--accent));
+  box-shadow:
+    inset 1px 1px 2px color-mix(in oklch, var(--preview-accent, var(--accent)) 50%, white),
+    0 0 0 4px var(--preview-accent-glow, var(--accent-glow));
+}
+.theme-panel-create-actions {
+  display: grid;
+  grid-template-columns: 0.85fr 1fr;
+  gap: 8px;
+}
+.theme-panel-advanced {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-top: 2px;
+}
+.theme-panel-advanced-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 10px;
+  border-top: 1px solid var(--divider);
+}
+.theme-panel-advanced-section.compact {
+  padding-top: 0;
+  border-top: none;
+}
+.theme-panel-advanced-title {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+}
+.theme-panel-advanced-title span {
+  min-width: 0;
+  color: var(--fg);
+  font-size: 11px;
+  font-weight: 700;
+}
+.theme-panel-advanced-title small {
+  min-width: 0;
+  color: var(--fg-subtle);
+  font-family: var(--font-mono);
+  font-size: 9px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.theme-panel-token-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+.theme-panel-token-field {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 88px minmax(0, 1fr);
+  gap: 8px;
+  align-items: center;
+}
+.theme-panel-token-label {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.theme-panel-token-label span {
+  color: var(--fg-muted);
+  font-size: 10px;
+  font-weight: 650;
+  white-space: nowrap;
+}
+.theme-panel-token-label code {
+  color: var(--fg-subtle);
+  font-family: var(--font-mono);
+  font-size: 9px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.theme-panel-token-input {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 24px minmax(0, 1fr);
+  gap: 7px;
+  align-items: center;
+}
+.theme-panel-token-field.scale {
+  align-items: start;
+}
+.theme-panel-token-scale {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr);
+  gap: 7px;
+  align-items: center;
+}
+.theme-panel-token-picker {
+  width: 24px;
+  height: 24px;
+}
+.theme-panel-token-picker .cp-custom-trigger {
+  width: 24px;
+  height: 24px;
+  display: block;
+  border-radius: 7px;
+}
+.theme-panel-token-swatch {
+  display: block;
+  width: 24px;
+  height: 24px;
+  border-radius: 7px;
+  box-shadow: var(--neu-shadow-inset), inset 0 0 0 1px var(--border);
+  transition:
+    box-shadow var(--dur-fast) var(--ease),
+    transform var(--dur-fast) var(--ease);
+}
+.theme-panel-token-picker .cp-custom-trigger:hover .theme-panel-token-swatch {
+  box-shadow: var(--neu-shadow-control), inset 0 0 0 1px var(--border);
+  transform: translateY(-1px);
+}
+.theme-panel-token-input .input-wrap,
+.theme-panel-create-field .input-wrap {
+  min-width: 0;
+}
+.theme-panel-token-input .input {
+  font-family: var(--font-mono);
+  font-size: 11px;
+}