astralkit 0.3.0 → 0.3.2

package/astralkit-utilities.css

@@ -1,543 +1,543 @@
-/* ══════════════════════════════════════════════════════════
-   AstralKit — Component CSS & Primitives
-
-   Tokens live in astralkit-theme.css (v3/:root) or
-   astralkit-theme-v4.css (v4/@theme). This file contains
-   only base resets, component primitives, and utility classes.
-
-   All CSS is UNLAYERED. No @layer declarations.
-   Compatible with Tailwind v3 and v4.
-   ══════════════════════════════════════════════════════════ */
-
-/* ── Base resets (unlayered — always applies) ── */
-a { text-decoration: none; }
-html {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  scroll-padding-top: var(--height-ak-nav, 4.5rem);
-  scroll-padding-bottom: var(--spacing-ak-mobile-bar, 4.5rem);
-}
-
-/* ══════════════════════════════════════════════════════════
-   TOKENS are now in astralkit-theme.css (v3) or astralkit-theme-v4.css (v4).
-   This file contains only component CSS, primitives, and base resets.
-   ══════════════════════════════════════════════════════════ */
-/* ══════════════════════════════════════════════════════════
-   COMPONENT PRIMITIVES
-   Unlayered — source order determines cascade priority.
-   Component dark modifiers (e.g. .ak-sidebar-panel--dark) beat
-   [data-theme="dark"] because they come later in the file.
-   ══════════════════════════════════════════════════════════ */
-@import "./primitives/focus.css";
-@import "./primitives/typography.css";
-@import "./primitives/icons.css";
-@import "./primitives/sidebar.css";
-@import "./primitives/avatar.css";
-@import "./primitives/navigation.css";
-@import "./primitives/badges.css";
-@import "./primitives/mobile.css";
-@import "./primitives/animations.css";
-@import "./primitives/layout.css";
-@import "./primitives/accounts.css";
-@import "./primitives/forms.css";
-@import "./primitives/effects.css";
-
-@keyframes ak-skeleton-shimmer {
-  100% { transform: translateX(100%); }
-}
-
-/* Note: The unlayered override block that was here (170 lines) has been
-   removed. With @layer gone, all primitive declarations are unlayered and
-   compete with Tailwind preflight via specificity (.class > *). */
-
-/* ══════════════════════════════════════════════════════════
-   Neobrutalist interaction helper
-   Apply `.ak-brutal-press` to any element that has a brutal shadow
-   to get the signature "push into shadow" press effect:
-     - default:  4px 4px shadow + translate(0,0)
-     - hover:    2px 2px shadow + translate(2px,2px)
-     - active:   0px 0px shadow + translate(4px,4px) — fully pressed
-   Works with any --shadow-ak-brutal-* size.
-   Respects prefers-reduced-motion via the rule below.
-   ══════════════════════════════════════════════════════════ */
-.ak-brutal-press {
-  transition: transform 0.15s ease, box-shadow 0.15s ease;
-}
-.ak-brutal-press:hover {
-  transform: translate(2px, 2px);
-  box-shadow: var(--shadow-ak-brutal-sm);
-}
-.ak-brutal-press:active {
-  transform: translate(4px, 4px);
-  box-shadow: 0 0 0 0 var(--color-ak-brutal-ink);
-}
-
-/* ══════════════════════════════════════════════════════════
-   Form Primitives — Checkbox, Radio, Switch, Range, OTP
-   Styles that require pseudo-elements, attribute selectors,
-   vendor prefixes, or keyframes — things Tailwind can't do.
-   Components use Tailwind for everything else (layout, spacing,
-   colors, fonts). These are the minimal CSS escape hatches.
-   ══════════════════════════════════════════════════════════ */
-
-/* ── Checkbox ── */
-.ak-check {
-  appearance: none;
-  width: 22px; height: 22px;
-  border: 2px solid var(--color-ak-border-strong);
-  border-radius: 6px;
-  cursor: pointer; position: relative;
-  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
-  flex-shrink: 0;
-}
-.ak-check:hover { border-color: var(--color-ak-primary); }
-.ak-check:checked {
-  background: var(--color-ak-primary);
-  border-color: var(--color-ak-primary);
-}
-.ak-check:checked::after {
-  content: '';
-  position: absolute; left: 6px; top: 2px;
-  width: 6px; height: 11px;
-  border: solid var(--color-ak-on-primary);
-  border-width: 0 2.5px 2.5px 0;
-  transform: rotate(45deg);
-}
-.ak-check:focus-visible {
-  outline: 2px solid var(--color-ak-primary);
-  outline-offset: 2px;
-}
-.ak-check:disabled { cursor: not-allowed; opacity: 0.5; }
-
-/* ── Radio ── */
-.ak-radio {
-  appearance: none;
-  width: 22px; height: 22px;
-  border: 2px solid var(--color-ak-border-strong);
-  border-radius: 50%;
-  cursor: pointer; position: relative;
-  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
-  flex-shrink: 0;
-  background: var(--color-ak-bg);
-}
-.ak-radio:hover { border-color: var(--color-ak-primary); }
-.ak-radio:checked {
-  border-color: var(--color-ak-primary);
-  background: var(--color-ak-primary);
-}
-.ak-radio:checked::after {
-  content: '';
-  position: absolute; top: 50%; left: 50%;
-  transform: translate(-50%, -50%);
-  width: 8px; height: 8px;
-  border-radius: 50%;
-  background: var(--color-ak-on-primary);
-}
-.ak-radio:focus-visible {
-  outline: 2px solid var(--color-ak-primary);
-  outline-offset: 2px;
-}
-.ak-radio:disabled { cursor: not-allowed; opacity: 0.5; }
-
-/* ── Switch ── */
-.ak-switch-track {
-  position: relative; width: 52px; height: 28px;
-  background: var(--color-ak-border-strong);
-  border-radius: 9999px;
-  transition: background-color 0.2s;
-}
-.ak-switch[aria-checked="true"] .ak-switch-track {
-  background: var(--color-ak-primary);
-}
-.ak-switch-knob {
-  position: absolute; top: 3px; left: 3px;
-  width: 22px; height: 22px;
-  background: var(--color-ak-on-primary);
-  border-radius: 50%;
-  transition: transform 0.2s;
-}
-.ak-switch[aria-checked="true"] .ak-switch-knob {
-  transform: translateX(24px);
-}
-.ak-switch:focus-visible .ak-switch-track {
-  outline: 2px solid var(--color-ak-primary);
-  outline-offset: 2px;
-}
-/* Size: Small */
-.ak-switch-sm .ak-switch-track { width: 44px; height: 24px; }
-.ak-switch-sm .ak-switch-knob { width: 18px; height: 18px; }
-.ak-switch-sm[aria-checked="true"] .ak-switch-knob { transform: translateX(20px); }
-/* Size: Large */
-.ak-switch-lg .ak-switch-track { width: 64px; height: 34px; }
-.ak-switch-lg .ak-switch-knob { width: 28px; height: 28px; }
-.ak-switch-lg[aria-checked="true"] .ak-switch-knob { transform: translateX(30px); }
-
-/* Color tracks */
-.ak-switch-success[aria-checked="true"] .ak-switch-track { background: var(--color-ak-success); }
-.ak-switch-danger[aria-checked="true"] .ak-switch-track { background: var(--color-ak-danger); }
-
-/* Icon switch — default (72×36)
-   Track icons are absolutely positioned at left/right edges.
-   Knob is absolute and slides over them. Knob icon shows the active state icon. */
-.ak-switch-with-icons .ak-switch-track { width: 72px; height: 36px; }
-.ak-switch-with-icons .ak-switch-knob {
-  width: 30px; height: 30px; z-index: 2;
-  display: flex; align-items: center; justify-content: center;
-}
-.ak-switch-with-icons[aria-checked="true"] .ak-switch-knob { transform: translateX(36px); }
-/* Track icons — absolute, centered vertically at left/right */
-.ak-switch-track-icon {
-  position: absolute; top: 50%; transform: translateY(-50%);
-  z-index: 1; line-height: 1; font-size: 14px;
-  display: flex; align-items: center; justify-content: center;
-  transition: opacity 0.2s;
-}
-.ak-switch-track-icon:first-child { left: 10px; }
-.ak-switch-track-icon:last-child { right: 10px; }
-/* Off state: left icon hidden (behind knob), right icon visible */
-.ak-switch-with-icons .ak-switch-track-icon:first-child { opacity: 0; }
-.ak-switch-with-icons .ak-switch-track-icon:last-child { color: var(--color-ak-on-primary); opacity: 0.7; }
-/* On state: left icon visible, right icon hidden (behind knob) */
-.ak-switch-with-icons[aria-checked="true"] .ak-switch-track-icon:first-child { color: var(--color-ak-on-primary); opacity: 0.7; }
-.ak-switch-with-icons[aria-checked="true"] .ak-switch-track-icon:last-child { opacity: 0; }
-/* Knob icon */
-.ak-switch-knob-icon { font-size: 14px; color: var(--color-ak-text); line-height: 1; }
-
-/* Icon switch — lg (88×44) */
-.ak-switch-icons-lg .ak-switch-track { width: 88px; height: 44px; }
-.ak-switch-icons-lg .ak-switch-knob { width: 38px; height: 38px; }
-.ak-switch-icons-lg[aria-checked="true"] .ak-switch-knob { transform: translateX(44px); }
-.ak-switch-icons-lg .ak-switch-track-icon:first-child { left: 12px; }
-.ak-switch-icons-lg .ak-switch-track-icon:last-child { right: 12px; }
-.ak-switch-icons-lg .ak-switch-track-icon,
-.ak-switch-icons-lg .ak-switch-knob-icon { font-size: 18px; }
-/* Icon switch — xl (104×52) */
-.ak-switch-icons-xl .ak-switch-track { width: 104px; height: 52px; }
-.ak-switch-icons-xl .ak-switch-knob { width: 46px; height: 46px; }
-.ak-switch-icons-xl[aria-checked="true"] .ak-switch-knob { transform: translateX(52px); }
-.ak-switch-icons-xl .ak-switch-track-icon:first-child { left: 14px; }
-.ak-switch-icons-xl .ak-switch-track-icon:last-child { right: 14px; }
-.ak-switch-icons-xl .ak-switch-track-icon,
-.ak-switch-icons-xl .ak-switch-knob-icon { font-size: 22px; }
-/* Icon switch — xxl (120×60) */
-.ak-switch-icons-xxl .ak-switch-track { width: 120px; height: 60px; }
-.ak-switch-icons-xxl .ak-switch-knob { width: 54px; height: 54px; }
-.ak-switch-icons-xxl[aria-checked="true"] .ak-switch-knob { transform: translateX(60px); }
-.ak-switch-icons-xxl .ak-switch-track-icon:first-child { left: 16px; }
-.ak-switch-icons-xxl .ak-switch-track-icon:last-child { right: 16px; }
-.ak-switch-icons-xxl .ak-switch-track-icon,
-.ak-switch-icons-xxl .ak-switch-knob-icon { font-size: 26px; }
-
-/* Reversed field (switch left, label right) */
-.ak-switch-field-reversed { flex-direction: row-reverse; justify-content: flex-end; }
-/* Status text beside switch */
-.ak-switch-status { font-size: var(--text-ak-fl-base); font-weight: 600; color: var(--color-ak-text-muted); min-width: 24px; }
-
-@media (prefers-reduced-motion: reduce) {
-  .ak-switch-track, .ak-switch-knob, .ak-switch-track-icon { transition: none; }
-}
-
-/* ── Range Slider ── */
-.ak-range input[type="range"] {
-  --range-track: var(--color-ak-border);
-  --range-fill: var(--color-ak-text);
-  -webkit-appearance: none; appearance: none;
-  width: 100%; height: 3rem;
-  background: transparent; cursor: pointer;
-  margin: 0; padding: 0;
-}
-.ak-range input[type="range"]::-webkit-slider-runnable-track {
-  height: 6px; border-radius: 999px;
-  background: linear-gradient(to right, var(--range-fill) var(--ak-fill, 0%), var(--range-track) var(--ak-fill, 0%));
-}
-.ak-range input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none; appearance: none;
-  width: 1.5rem; height: 1.5rem; margin-top: -0.5625rem;
-  border: 4px solid var(--color-ak-text); border-radius: 999px;
-  background: var(--color-ak-bg);
-  transition: transform 0.15s ease, box-shadow 0.15s ease;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
-}
-.ak-range input[type="range"]::-moz-range-track {
-  height: 6px; border-radius: 999px;
-  background: var(--range-track);
-}
-.ak-range input[type="range"]::-moz-range-progress {
-  height: 6px; border-radius: 999px;
-  background: var(--range-fill);
-}
-.ak-range input[type="range"]::-moz-range-thumb {
-  width: 1rem; height: 1rem;
-  border: 4px solid var(--color-ak-text); border-radius: 999px;
-  background: var(--color-ak-bg);
-  transition: transform 0.15s ease;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
-}
-.ak-range input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); }
-.ak-range input[type="range"]:hover::-moz-range-thumb { transform: scale(1.15); }
-.ak-range input[type="range"]:focus-visible { outline: none; }
-.ak-range input[type="range"]:focus-visible::-webkit-slider-thumb {
-  box-shadow: 0 0 0 4px var(--color-ak-bg), 0 0 0 7px var(--color-ak-primary);
-  transform: scale(1.15);
-}
-.ak-range input[type="range"]:focus-visible::-moz-range-thumb {
-  box-shadow: 0 0 0 4px var(--color-ak-bg), 0 0 0 7px var(--color-ak-primary);
-  transform: scale(1.15);
-}
-
-/* ── Range Dual Track ── */
-.ak-dual-track { pointer-events: none; position: absolute; left: 0; right: 0; height: 6px; border-radius: 999px; background: var(--color-ak-border); z-index: 1; }
-.ak-dual-fill { position: absolute; height: 100%; border-radius: 999px; background: var(--color-ak-text); z-index: 0; }
-.ak-dual-input { pointer-events: none; position: absolute; left: 0; width: 100%; height: 3rem; background: transparent; z-index: 3; }
-.ak-dual-input::-webkit-slider-runnable-track { height: 6px; background: transparent !important; }
-.ak-dual-input::-webkit-slider-thumb { pointer-events: auto; position: relative; z-index: 10; }
-.ak-dual-input::-moz-range-track, .ak-dual-input::-moz-range-progress { background: transparent !important; }
-.ak-dual-input::-moz-range-thumb { pointer-events: auto; position: relative; z-index: 10; }
-
-/* ── Number Input Spinbutton Hide ── */
-.ak-stepper input,
-.ak-qty input,
-.ak-range input[type="number"] {
-  -moz-appearance: textfield; appearance: textfield;
-}
-.ak-stepper input::-webkit-outer-spin-button,
-.ak-stepper input::-webkit-inner-spin-button,
-.ak-qty input::-webkit-outer-spin-button,
-.ak-qty input::-webkit-inner-spin-button,
-.ak-range input[type="number"]::-webkit-outer-spin-button,
-.ak-range input[type="number"]::-webkit-inner-spin-button {
-  -webkit-appearance: none; margin: 0;
-}
-
-/* ── OTP Input ── */
-.ak-otp-input {
-  width: 56px; height: 64px; text-align: center;
-  font-size: var(--text-ak-2xl); font-weight: 700;
-  border: 2px solid var(--color-ak-border); border-radius: 0.75rem;
-  outline: none; background: var(--color-ak-bg); color: var(--color-ak-text);
-  transition: border-color 0.15s ease, background-color 0.15s ease;
-  caret-color: var(--color-ak-primary);
-}
-.ak-otp-input::placeholder { color: var(--color-ak-text-muted); }
-.ak-otp-input:hover { border-color: var(--color-ak-border-strong); }
-.ak-otp-input:focus-visible {
-  outline: 2px solid var(--color-ak-primary);
-  outline-offset: 2px;
-  border-color: var(--color-ak-primary);
-  background: var(--color-ak-surface);
-}
-.ak-otp-input.has-value { border-color: var(--color-ak-text); font-weight: 800; }
-@media (max-width: 400px) {
-  .ak-otp-input { width: 44px; height: 52px; font-size: var(--text-ak-xl); }
-}
-
-/* ── Color Picker Swatch ── */
-.ak-color-swatch:hover { border-color: var(--color-ak-border-strong); }
-.ak-color-swatch:active { transform: scale(0.95); transition-duration: 0.1s; }
-.ak-color-swatch.selected { border-color: var(--color-ak-text); }
-
-/* ── File Upload ── */
-@keyframes ak-spin { to { transform: rotate(360deg); } }
-.ak-spinner { animation: ak-spin 0.8s linear infinite; }
-.ak-dropzone { transition: border-color 0.2s ease, background-color 0.2s ease; }
-.ak-dropzone:hover { border-color: var(--color-ak-border-strong); background: var(--color-ak-hover); }
-.ak-dropzone.drag-over { border-color: var(--color-ak-primary); background: var(--color-ak-primary-subtle); }
-.ak-file-row { transition: background-color 0.15s ease, border-color 0.15s ease; }
-.ak-file-row:hover { background: var(--color-ak-hover); border-color: var(--color-ak-border-strong); }
-.ak-progress-fill { transition: width 0.3s ease; }
-
-/* ── Star Rating ── */
-.ak-star-btn {
-  display: inline-flex; align-items: center; justify-content: center;
-  width: 48px; height: 48px; cursor: pointer;
-  border: none; background: none; padding: 0;
-  border-radius: 8px;
-  color: var(--color-ak-text-disabled);
-  transition: color 0.15s, transform 0.15s;
-}
-.ak-star-btn.filled { color: var(--color-ak-text); }
-.ak-star-btn:hover { transform: scale(1.1); }
-.ak-star-btn:focus-visible { outline: 2px solid var(--color-ak-primary); outline-offset: 2px; }
-.ak-star-btn.ak-star-sm { width: 40px; height: 40px; }
-.ak-star-btn.ak-star-sm .ak-star-icon { font-size: 20px; }
-.ak-star-icon { font-size: 28px; }
-.ak-star-btn.ak-star-lg { width: 56px; height: 56px; }
-.ak-star-btn.ak-star-lg .ak-star-icon { font-size: 36px; }
-
-/* ── Switch Layout ── */
-.ak-switch {
-  display: inline-flex; align-items: center; justify-content: center;
-  background: none; border: none; padding: 8px 0; cursor: pointer;
-  border-radius: 9999px; flex-shrink: 0; min-height: 44px;
-}
-.ak-switch:focus { outline: none; }
-.ak-switch:disabled, .ak-switch[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
-.ak-switch-field {
-  display: flex; align-items: center; justify-content: space-between;
-  gap: 16px; min-height: 52px;
-}
-.ak-switch-label-wrap { display: flex; flex-direction: column; gap: 4px; cursor: pointer; flex: 1; min-width: 0; }
-.ak-switch-field:has(.ak-switch:disabled) .ak-switch-label-wrap,
-.ak-switch-field:has(.ak-switch[aria-disabled="true"]) .ak-switch-label-wrap { cursor: default; }
-/* When icon is present, use grid so icon spans full height and text+helper align */
-.ak-switch-label-wrap:has(.ak-switch-label-icon) {
-  display: grid;
-  grid-template-columns: 2.75rem 1fr;
-  grid-template-rows: auto auto;
-  column-gap: 14px;
-  row-gap: 2px;
-  align-items: center;
-}
-.ak-switch-label-wrap:has(.ak-switch-label-icon) .ak-switch-label-icon {
-  grid-column: 1;
-  grid-row: 1 / -1;
-  align-self: center;
-}
-.ak-switch-label-wrap:has(.ak-switch-label-icon) .ak-switch-label {
-  grid-column: 2;
-  grid-row: 1;
-}
-.ak-switch-label-wrap:has(.ak-switch-label-icon) .ak-switch-helper {
-  grid-column: 2;
-  grid-row: 2;
-}
-.ak-switch-label {
-  font-size: var(--text-ak-fl-lg); font-weight: 700; color: var(--color-ak-text);
-}
-.ak-switch-helper { font-size: var(--text-ak-fl-base); color: var(--color-ak-text-secondary); }
-.ak-switch-label-icon {
-  font-size: 1.5rem; color: var(--color-ak-text-secondary); line-height: 1; flex-shrink: 0;
-  width: 2.75rem; height: 2.75rem;
-  display: flex; align-items: center; justify-content: center;
-  background: var(--color-ak-surface); border-radius: 0.75rem;
-}
-.ak-switch-card {
-  border: 2px solid var(--color-ak-border); border-radius: 0.75rem;
-  padding: 20px 24px; transition: border-color 0.2s;
-}
-.ak-switch-card-active {
-  border-color: var(--color-ak-primary); background: var(--color-ak-primary-subtle);
-}
-.ak-switch-compact .ak-switch-field { padding: 16px 0; }
-.ak-switch-compact .ak-switch-field + .ak-switch-field { border-top: 1px solid var(--color-ak-border); }
-.ak-switch-compact .ak-switch-label { font-size: var(--text-ak-fl-base); }
-.ak-switch-compact .ak-switch-helper { font-size: var(--text-ak-fl-sm); }
-.ak-switch-value { font-size: var(--text-ak-fl-base); font-weight: 600; color: var(--color-ak-text); min-width: 32px; text-align: right; }
-.ak-switch-value-muted { color: var(--color-ak-text-secondary); font-weight: 400; }
-.ak-switch-group { border: none; padding: 0; margin: 0; }
-.ak-switch-group-legend { font-size: var(--text-ak-fl-base); font-weight: 700; color: var(--color-ak-text-secondary); padding: 0; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.05em; }
-.ak-switch-section { border: 2px solid var(--color-ak-border); border-radius: 0.75rem; padding: 24px; }
-.ak-switch-section .ak-switch-group-legend { font-size: var(--text-ak-fl-lg); margin-bottom: 16px; padding: 0 8px; text-transform: none; letter-spacing: normal; }
-.ak-switch-section .ak-switch-field + .ak-switch-field {
-  border-top: 1px solid var(--color-ak-border-subtle); padding-top: 16px; margin-top: 16px;
-}
-.ak-form-section { max-width: 640px; }
-
-/* ── Number Stepper Button Press ── */
-.ak-stepper-btn:active:not([aria-disabled="true"]) {
-  transform: translate(2px, 2px);
-  box-shadow: 2px 2px 0 0 var(--color-ak-brutal-ink) !important;
-}
-.ak-stepper-btn[aria-disabled="true"] { pointer-events: none; opacity: 0.3; }
-
-/* ── Quantity Selector ── */
-.ak-qty-btn { transition: all 0.15s ease; }
-.ak-qty-btn:active:not([aria-disabled="true"]) { transform: scale(0.96); }
-.ak-qty-btn[aria-disabled="true"] { opacity: 0.3; cursor: not-allowed; }
-
-/* ── Shared Keyframes ── */
-@keyframes ak-fadeInUp {
-  from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-@keyframes ak-slideIn {
-  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
-}
-@keyframes ak-fadeOut {
-  from { opacity: 1; transform: translateY(0) scale(1); }
-  to { opacity: 0; transform: translateY(-8px) scale(0.98); }
-}
-@keyframes ak-swipeOut {
-  from { transform: translateX(var(--radix-toast-swipe-end-x)); }
-  to { transform: translateX(100%); }
-}
-
-/* ── Glass Panel (split-screen logins) ── */
-.ak-glass-panel {
-  background: rgba(255, 255, 255, 0.03);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-/* ── Grid Pattern Background ── */
-.ak-bg-grid-pattern {
-  background-image: linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
-                    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
-  background-size: 40px 40px;
-}
-
-/* ── Toggle Group ── */
-.ak-toggle-group {
-  display: inline-flex; background: var(--color-ak-surface-2);
-  border-radius: 8px; padding: 4px; gap: 4px;
-}
-.ak-toggle-group-item {
-  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
-  background: none; border: none; padding: 0 16px; min-height: 44px;
-  font-family: inherit; font-size: var(--text-ak-base, 1rem); font-weight: 600;
-  color: var(--color-ak-text-secondary); border-radius: 8px; cursor: pointer;
-  transition: background-color 0.2s, color 0.2s; white-space: nowrap; line-height: 1;
-}
-.ak-toggle-group-item[aria-checked="true"],
-.ak-toggle-group-item[aria-pressed="true"] {
-  background: var(--color-ak-bg); color: var(--color-ak-text);
-}
-.ak-toggle-group-item[aria-checked="false"]:not(:disabled):hover,
-.ak-toggle-group-item[aria-pressed="false"]:not(:disabled):hover {
-  color: var(--color-ak-text); background: var(--color-ak-hover);
-}
-.ak-toggle-group-item:focus { outline: none; }
-.ak-toggle-group-item:focus-visible { outline: 2px solid var(--color-ak-primary); outline-offset: 2px; }
-.ak-toggle-group-item:disabled { opacity: 0.4; cursor: not-allowed; }
-.ak-toggle-group[aria-disabled="true"] { opacity: 0.5; }
-.ak-toggle-group[aria-disabled="true"] .ak-toggle-group-item { cursor: not-allowed; }
-.ak-toggle-group-item i { font-size: 20px; line-height: 1; }
-.ak-toggle-group-item-icon { padding: 0 14px; }
-/* Toggle group — small */
-.ak-toggle-group-sm { padding: 3px; gap: 3px; }
-.ak-toggle-group-sm .ak-toggle-group-item { min-height: 44px; padding: 0 12px; font-size: var(--text-ak-sm, 0.875rem); }
-.ak-toggle-group-sm .ak-toggle-group-item i { font-size: 18px; }
-.ak-toggle-group-sm .ak-toggle-group-item-icon { padding: 0 12px; }
-/* Toggle group — large */
-.ak-toggle-group-lg { padding: 5px; gap: 5px; }
-.ak-toggle-group-lg .ak-toggle-group-item { min-height: 52px; padding: 0 24px; font-size: var(--text-ak-lg, 1.125rem); }
-.ak-toggle-group-lg .ak-toggle-group-item i { font-size: 24px; }
-.ak-toggle-group-lg .ak-toggle-group-item-icon { padding: 0 18px; }
-
-/* ── Resizable Panel Cursors ── */
-body.ak-col-resizing, body.ak-col-resizing * {
-  cursor: col-resize !important; user-select: none !important; -webkit-user-select: none !important;
-}
-body.ak-ew-resizing, body.ak-ew-resizing * {
-  cursor: ew-resize !important; user-select: none !important; -webkit-user-select: none !important;
-}
-
-/* ── Focus Ring Utility ── */
-.ak-focus-ring:focus-visible { outline: 2px solid var(--color-ak-primary); outline-offset: 2px; }
-
-/* ── Price Fade Transition ── */
-.ak-price-fade { transition: opacity 0.15s ease-in-out; }
-
-/* Reduced motion — unlayered so it overrides everything */
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    transition-duration: 0.01ms !important;
-  }
-  .ak-star-btn:hover { transform: none !important; }
-  .ak-stepper-btn:active { transform: none !important; }
-  @keyframes ak-slideIn { from { opacity: 0; } to { opacity: 1; } }
-  @keyframes ak-fadeOut { from { opacity: 1; } to { opacity: 0; } }
-}
+/* ══════════════════════════════════════════════════════════
+   AstralKit — Component CSS & Primitives
+
+   Tokens live in astralkit-theme.css (v3/:root) or
+   astralkit-theme-v4.css (v4/@theme). This file contains
+   only base resets, component primitives, and utility classes.
+
+   All CSS is UNLAYERED. No @layer declarations.
+   Compatible with Tailwind v3 and v4.
+   ══════════════════════════════════════════════════════════ */
+
+/* ── Base resets (unlayered — always applies) ── */
+a { text-decoration: none; }
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  scroll-padding-top: var(--height-ak-nav, 4.5rem);
+  scroll-padding-bottom: var(--spacing-ak-mobile-bar, 4.5rem);
+}
+
+/* ══════════════════════════════════════════════════════════
+   TOKENS are now in astralkit-theme.css (v3) or astralkit-theme-v4.css (v4).
+   This file contains only component CSS, primitives, and base resets.
+   ══════════════════════════════════════════════════════════ */
+/* ══════════════════════════════════════════════════════════
+   COMPONENT PRIMITIVES
+   Unlayered — source order determines cascade priority.
+   Component dark modifiers (e.g. .ak-sidebar-panel--dark) beat
+   [data-theme="dark"] because they come later in the file.
+   ══════════════════════════════════════════════════════════ */
+@import "./primitives/focus.css";
+@import "./primitives/typography.css";
+@import "./primitives/icons.css";
+@import "./primitives/sidebar.css";
+@import "./primitives/avatar.css";
+@import "./primitives/navigation.css";
+@import "./primitives/badges.css";
+@import "./primitives/mobile.css";
+@import "./primitives/animations.css";
+@import "./primitives/layout.css";
+@import "./primitives/accounts.css";
+@import "./primitives/forms.css";
+@import "./primitives/effects.css";
+
+@keyframes ak-skeleton-shimmer {
+  100% { transform: translateX(100%); }
+}
+
+/* Note: The unlayered override block that was here (170 lines) has been
+   removed. With @layer gone, all primitive declarations are unlayered and
+   compete with Tailwind preflight via specificity (.class > *). */
+
+/* ══════════════════════════════════════════════════════════
+   Neobrutalist interaction helper
+   Apply `.ak-brutal-press` to any element that has a brutal shadow
+   to get the signature "push into shadow" press effect:
+     - default:  4px 4px shadow + translate(0,0)
+     - hover:    2px 2px shadow + translate(2px,2px)
+     - active:   0px 0px shadow + translate(4px,4px) — fully pressed
+   Works with any --shadow-ak-brutal-* size.
+   Respects prefers-reduced-motion via the rule below.
+   ══════════════════════════════════════════════════════════ */
+.ak-brutal-press {
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+.ak-brutal-press:hover {
+  transform: translate(2px, 2px);
+  box-shadow: var(--shadow-ak-brutal-sm);
+}
+.ak-brutal-press:active {
+  transform: translate(4px, 4px);
+  box-shadow: 0 0 0 0 var(--color-ak-brutal-ink);
+}
+
+/* ══════════════════════════════════════════════════════════
+   Form Primitives — Checkbox, Radio, Switch, Range, OTP
+   Styles that require pseudo-elements, attribute selectors,
+   vendor prefixes, or keyframes — things Tailwind can't do.
+   Components use Tailwind for everything else (layout, spacing,
+   colors, fonts). These are the minimal CSS escape hatches.
+   ══════════════════════════════════════════════════════════ */
+
+/* ── Checkbox ── */
+.ak-check {
+  appearance: none;
+  width: 22px; height: 22px;
+  border: 2px solid var(--color-ak-border-strong);
+  border-radius: 6px;
+  cursor: pointer; position: relative;
+  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+  flex-shrink: 0;
+}
+.ak-check:hover { border-color: var(--color-ak-primary); }
+.ak-check:checked {
+  background: var(--color-ak-primary);
+  border-color: var(--color-ak-primary);
+}
+.ak-check:checked::after {
+  content: '';
+  position: absolute; left: 6px; top: 2px;
+  width: 6px; height: 11px;
+  border: solid var(--color-ak-on-primary);
+  border-width: 0 2.5px 2.5px 0;
+  transform: rotate(45deg);
+}
+.ak-check:focus-visible {
+  outline: 2px solid var(--color-ak-primary);
+  outline-offset: 2px;
+}
+.ak-check:disabled { cursor: not-allowed; opacity: 0.5; }
+
+/* ── Radio ── */
+.ak-radio {
+  appearance: none;
+  width: 22px; height: 22px;
+  border: 2px solid var(--color-ak-border-strong);
+  border-radius: 50%;
+  cursor: pointer; position: relative;
+  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+  flex-shrink: 0;
+  background: var(--color-ak-bg);
+}
+.ak-radio:hover { border-color: var(--color-ak-primary); }
+.ak-radio:checked {
+  border-color: var(--color-ak-primary);
+  background: var(--color-ak-primary);
+}
+.ak-radio:checked::after {
+  content: '';
+  position: absolute; top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  background: var(--color-ak-on-primary);
+}
+.ak-radio:focus-visible {
+  outline: 2px solid var(--color-ak-primary);
+  outline-offset: 2px;
+}
+.ak-radio:disabled { cursor: not-allowed; opacity: 0.5; }
+
+/* ── Switch ── */
+.ak-switch-track {
+  position: relative; width: 52px; height: 28px;
+  background: var(--color-ak-border-strong);
+  border-radius: 9999px;
+  transition: background-color 0.2s;
+}
+.ak-switch[aria-checked="true"] .ak-switch-track {
+  background: var(--color-ak-primary);
+}
+.ak-switch-knob {
+  position: absolute; top: 3px; left: 3px;
+  width: 22px; height: 22px;
+  background: var(--color-ak-on-primary);
+  border-radius: 50%;
+  transition: transform 0.2s;
+}
+.ak-switch[aria-checked="true"] .ak-switch-knob {
+  transform: translateX(24px);
+}
+.ak-switch:focus-visible .ak-switch-track {
+  outline: 2px solid var(--color-ak-primary);
+  outline-offset: 2px;
+}
+/* Size: Small */
+.ak-switch-sm .ak-switch-track { width: 44px; height: 24px; }
+.ak-switch-sm .ak-switch-knob { width: 18px; height: 18px; }
+.ak-switch-sm[aria-checked="true"] .ak-switch-knob { transform: translateX(20px); }
+/* Size: Large */
+.ak-switch-lg .ak-switch-track { width: 64px; height: 34px; }
+.ak-switch-lg .ak-switch-knob { width: 28px; height: 28px; }
+.ak-switch-lg[aria-checked="true"] .ak-switch-knob { transform: translateX(30px); }
+
+/* Color tracks */
+.ak-switch-success[aria-checked="true"] .ak-switch-track { background: var(--color-ak-success); }
+.ak-switch-danger[aria-checked="true"] .ak-switch-track { background: var(--color-ak-danger); }
+
+/* Icon switch — default (72×36)
+   Track icons are absolutely positioned at left/right edges.
+   Knob is absolute and slides over them. Knob icon shows the active state icon. */
+.ak-switch-with-icons .ak-switch-track { width: 72px; height: 36px; }
+.ak-switch-with-icons .ak-switch-knob {
+  width: 30px; height: 30px; z-index: 2;
+  display: flex; align-items: center; justify-content: center;
+}
+.ak-switch-with-icons[aria-checked="true"] .ak-switch-knob { transform: translateX(36px); }
+/* Track icons — absolute, centered vertically at left/right */
+.ak-switch-track-icon {
+  position: absolute; top: 50%; transform: translateY(-50%);
+  z-index: 1; line-height: 1; font-size: 14px;
+  display: flex; align-items: center; justify-content: center;
+  transition: opacity 0.2s;
+}
+.ak-switch-track-icon:first-child { left: 10px; }
+.ak-switch-track-icon:last-child { right: 10px; }
+/* Off state: left icon hidden (behind knob), right icon visible */
+.ak-switch-with-icons .ak-switch-track-icon:first-child { opacity: 0; }
+.ak-switch-with-icons .ak-switch-track-icon:last-child { color: var(--color-ak-on-primary); opacity: 0.7; }
+/* On state: left icon visible, right icon hidden (behind knob) */
+.ak-switch-with-icons[aria-checked="true"] .ak-switch-track-icon:first-child { color: var(--color-ak-on-primary); opacity: 0.7; }
+.ak-switch-with-icons[aria-checked="true"] .ak-switch-track-icon:last-child { opacity: 0; }
+/* Knob icon */
+.ak-switch-knob-icon { font-size: 14px; color: var(--color-ak-text); line-height: 1; }
+
+/* Icon switch — lg (88×44) */
+.ak-switch-icons-lg .ak-switch-track { width: 88px; height: 44px; }
+.ak-switch-icons-lg .ak-switch-knob { width: 38px; height: 38px; }
+.ak-switch-icons-lg[aria-checked="true"] .ak-switch-knob { transform: translateX(44px); }
+.ak-switch-icons-lg .ak-switch-track-icon:first-child { left: 12px; }
+.ak-switch-icons-lg .ak-switch-track-icon:last-child { right: 12px; }
+.ak-switch-icons-lg .ak-switch-track-icon,
+.ak-switch-icons-lg .ak-switch-knob-icon { font-size: 18px; }
+/* Icon switch — xl (104×52) */
+.ak-switch-icons-xl .ak-switch-track { width: 104px; height: 52px; }
+.ak-switch-icons-xl .ak-switch-knob { width: 46px; height: 46px; }
+.ak-switch-icons-xl[aria-checked="true"] .ak-switch-knob { transform: translateX(52px); }
+.ak-switch-icons-xl .ak-switch-track-icon:first-child { left: 14px; }
+.ak-switch-icons-xl .ak-switch-track-icon:last-child { right: 14px; }
+.ak-switch-icons-xl .ak-switch-track-icon,
+.ak-switch-icons-xl .ak-switch-knob-icon { font-size: 22px; }
+/* Icon switch — xxl (120×60) */
+.ak-switch-icons-xxl .ak-switch-track { width: 120px; height: 60px; }
+.ak-switch-icons-xxl .ak-switch-knob { width: 54px; height: 54px; }
+.ak-switch-icons-xxl[aria-checked="true"] .ak-switch-knob { transform: translateX(60px); }
+.ak-switch-icons-xxl .ak-switch-track-icon:first-child { left: 16px; }
+.ak-switch-icons-xxl .ak-switch-track-icon:last-child { right: 16px; }
+.ak-switch-icons-xxl .ak-switch-track-icon,
+.ak-switch-icons-xxl .ak-switch-knob-icon { font-size: 26px; }
+
+/* Reversed field (switch left, label right) */
+.ak-switch-field-reversed { flex-direction: row-reverse; justify-content: flex-end; }
+/* Status text beside switch */
+.ak-switch-status { font-size: var(--text-ak-fl-base); font-weight: 600; color: var(--color-ak-text-muted); min-width: 24px; }
+
+@media (prefers-reduced-motion: reduce) {
+  .ak-switch-track, .ak-switch-knob, .ak-switch-track-icon { transition: none; }
+}
+
+/* ── Range Slider ── */
+.ak-range input[type="range"] {
+  --range-track: var(--color-ak-border);
+  --range-fill: var(--color-ak-text);
+  -webkit-appearance: none; appearance: none;
+  width: 100%; height: 3rem;
+  background: transparent; cursor: pointer;
+  margin: 0; padding: 0;
+}
+.ak-range input[type="range"]::-webkit-slider-runnable-track {
+  height: 6px; border-radius: 999px;
+  background: linear-gradient(to right, var(--range-fill) var(--ak-fill, 0%), var(--range-track) var(--ak-fill, 0%));
+}
+.ak-range input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none; appearance: none;
+  width: 1.5rem; height: 1.5rem; margin-top: -0.5625rem;
+  border: 4px solid var(--color-ak-text); border-radius: 999px;
+  background: var(--color-ak-bg);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
+}
+.ak-range input[type="range"]::-moz-range-track {
+  height: 6px; border-radius: 999px;
+  background: var(--range-track);
+}
+.ak-range input[type="range"]::-moz-range-progress {
+  height: 6px; border-radius: 999px;
+  background: var(--range-fill);
+}
+.ak-range input[type="range"]::-moz-range-thumb {
+  width: 1rem; height: 1rem;
+  border: 4px solid var(--color-ak-text); border-radius: 999px;
+  background: var(--color-ak-bg);
+  transition: transform 0.15s ease;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
+}
+.ak-range input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); }
+.ak-range input[type="range"]:hover::-moz-range-thumb { transform: scale(1.15); }
+.ak-range input[type="range"]:focus-visible { outline: none; }
+.ak-range input[type="range"]:focus-visible::-webkit-slider-thumb {
+  box-shadow: 0 0 0 4px var(--color-ak-bg), 0 0 0 7px var(--color-ak-primary);
+  transform: scale(1.15);
+}
+.ak-range input[type="range"]:focus-visible::-moz-range-thumb {
+  box-shadow: 0 0 0 4px var(--color-ak-bg), 0 0 0 7px var(--color-ak-primary);
+  transform: scale(1.15);
+}
+
+/* ── Range Dual Track ── */
+.ak-dual-track { pointer-events: none; position: absolute; left: 0; right: 0; height: 6px; border-radius: 999px; background: var(--color-ak-border); z-index: 1; }
+.ak-dual-fill { position: absolute; height: 100%; border-radius: 999px; background: var(--color-ak-text); z-index: 0; }
+.ak-dual-input { pointer-events: none; position: absolute; left: 0; width: 100%; height: 3rem; background: transparent; z-index: 3; }
+.ak-dual-input::-webkit-slider-runnable-track { height: 6px; background: transparent !important; }
+.ak-dual-input::-webkit-slider-thumb { pointer-events: auto; position: relative; z-index: 10; }
+.ak-dual-input::-moz-range-track, .ak-dual-input::-moz-range-progress { background: transparent !important; }
+.ak-dual-input::-moz-range-thumb { pointer-events: auto; position: relative; z-index: 10; }
+
+/* ── Number Input Spinbutton Hide ── */
+.ak-stepper input,
+.ak-qty input,
+.ak-range input[type="number"] {
+  -moz-appearance: textfield; appearance: textfield;
+}
+.ak-stepper input::-webkit-outer-spin-button,
+.ak-stepper input::-webkit-inner-spin-button,
+.ak-qty input::-webkit-outer-spin-button,
+.ak-qty input::-webkit-inner-spin-button,
+.ak-range input[type="number"]::-webkit-outer-spin-button,
+.ak-range input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none; margin: 0;
+}
+
+/* ── OTP Input ── */
+.ak-otp-input {
+  width: 56px; height: 64px; text-align: center;
+  font-size: var(--text-ak-2xl); font-weight: 700;
+  border: 2px solid var(--color-ak-border); border-radius: 0.75rem;
+  outline: none; background: var(--color-ak-bg); color: var(--color-ak-text);
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+  caret-color: var(--color-ak-primary);
+}
+.ak-otp-input::placeholder { color: var(--color-ak-text-muted); }
+.ak-otp-input:hover { border-color: var(--color-ak-border-strong); }
+.ak-otp-input:focus-visible {
+  outline: 2px solid var(--color-ak-primary);
+  outline-offset: 2px;
+  border-color: var(--color-ak-primary);
+  background: var(--color-ak-surface);
+}
+.ak-otp-input.has-value { border-color: var(--color-ak-text); font-weight: 800; }
+@media (max-width: 400px) {
+  .ak-otp-input { width: 44px; height: 52px; font-size: var(--text-ak-xl); }
+}
+
+/* ── Color Picker Swatch ── */
+.ak-color-swatch:hover { border-color: var(--color-ak-border-strong); }
+.ak-color-swatch:active { transform: scale(0.95); transition-duration: 0.1s; }
+.ak-color-swatch.selected { border-color: var(--color-ak-text); }
+
+/* ── File Upload ── */
+@keyframes ak-spin { to { transform: rotate(360deg); } }
+.ak-spinner { animation: ak-spin 0.8s linear infinite; }
+.ak-dropzone { transition: border-color 0.2s ease, background-color 0.2s ease; }
+.ak-dropzone:hover { border-color: var(--color-ak-border-strong); background: var(--color-ak-hover); }
+.ak-dropzone.drag-over { border-color: var(--color-ak-primary); background: var(--color-ak-primary-subtle); }
+.ak-file-row { transition: background-color 0.15s ease, border-color 0.15s ease; }
+.ak-file-row:hover { background: var(--color-ak-hover); border-color: var(--color-ak-border-strong); }
+.ak-progress-fill { transition: width 0.3s ease; }
+
+/* ── Star Rating ── */
+.ak-star-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 48px; height: 48px; cursor: pointer;
+  border: none; background: none; padding: 0;
+  border-radius: 8px;
+  color: var(--color-ak-text-disabled);
+  transition: color 0.15s, transform 0.15s;
+}
+.ak-star-btn.filled { color: var(--color-ak-text); }
+.ak-star-btn:hover { transform: scale(1.1); }
+.ak-star-btn:focus-visible { outline: 2px solid var(--color-ak-primary); outline-offset: 2px; }
+.ak-star-btn.ak-star-sm { width: 40px; height: 40px; }
+.ak-star-btn.ak-star-sm .ak-star-icon { font-size: 20px; }
+.ak-star-icon { font-size: 28px; }
+.ak-star-btn.ak-star-lg { width: 56px; height: 56px; }
+.ak-star-btn.ak-star-lg .ak-star-icon { font-size: 36px; }
+
+/* ── Switch Layout ── */
+.ak-switch {
+  display: inline-flex; align-items: center; justify-content: center;
+  background: none; border: none; padding: 8px 0; cursor: pointer;
+  border-radius: 9999px; flex-shrink: 0; min-height: 44px;
+}
+.ak-switch:focus { outline: none; }
+.ak-switch:disabled, .ak-switch[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
+.ak-switch-field {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 16px; min-height: 52px;
+}
+.ak-switch-label-wrap { display: flex; flex-direction: column; gap: 4px; cursor: pointer; flex: 1; min-width: 0; }
+.ak-switch-field:has(.ak-switch:disabled) .ak-switch-label-wrap,
+.ak-switch-field:has(.ak-switch[aria-disabled="true"]) .ak-switch-label-wrap { cursor: default; }
+/* When icon is present, use grid so icon spans full height and text+helper align */
+.ak-switch-label-wrap:has(.ak-switch-label-icon) {
+  display: grid;
+  grid-template-columns: 2.75rem 1fr;
+  grid-template-rows: auto auto;
+  column-gap: 14px;
+  row-gap: 2px;
+  align-items: center;
+}
+.ak-switch-label-wrap:has(.ak-switch-label-icon) .ak-switch-label-icon {
+  grid-column: 1;
+  grid-row: 1 / -1;
+  align-self: center;
+}
+.ak-switch-label-wrap:has(.ak-switch-label-icon) .ak-switch-label {
+  grid-column: 2;
+  grid-row: 1;
+}
+.ak-switch-label-wrap:has(.ak-switch-label-icon) .ak-switch-helper {
+  grid-column: 2;
+  grid-row: 2;
+}
+.ak-switch-label {
+  font-size: var(--text-ak-fl-lg); font-weight: 700; color: var(--color-ak-text);
+}
+.ak-switch-helper { font-size: var(--text-ak-fl-base); color: var(--color-ak-text-secondary); }
+.ak-switch-label-icon {
+  font-size: 1.5rem; color: var(--color-ak-text-secondary); line-height: 1; flex-shrink: 0;
+  width: 2.75rem; height: 2.75rem;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--color-ak-surface); border-radius: 0.75rem;
+}
+.ak-switch-card {
+  border: 2px solid var(--color-ak-border); border-radius: 0.75rem;
+  padding: 20px 24px; transition: border-color 0.2s;
+}
+.ak-switch-card-active {
+  border-color: var(--color-ak-primary); background: var(--color-ak-primary-subtle);
+}
+.ak-switch-compact .ak-switch-field { padding: 16px 0; }
+.ak-switch-compact .ak-switch-field + .ak-switch-field { border-top: 1px solid var(--color-ak-border); }
+.ak-switch-compact .ak-switch-label { font-size: var(--text-ak-fl-base); }
+.ak-switch-compact .ak-switch-helper { font-size: var(--text-ak-fl-sm); }
+.ak-switch-value { font-size: var(--text-ak-fl-base); font-weight: 600; color: var(--color-ak-text); min-width: 32px; text-align: right; }
+.ak-switch-value-muted { color: var(--color-ak-text-secondary); font-weight: 400; }
+.ak-switch-group { border: none; padding: 0; margin: 0; }
+.ak-switch-group-legend { font-size: var(--text-ak-fl-base); font-weight: 700; color: var(--color-ak-text-secondary); padding: 0; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.05em; }
+.ak-switch-section { border: 2px solid var(--color-ak-border); border-radius: 0.75rem; padding: 24px; }
+.ak-switch-section .ak-switch-group-legend { font-size: var(--text-ak-fl-lg); margin-bottom: 16px; padding: 0 8px; text-transform: none; letter-spacing: normal; }
+.ak-switch-section .ak-switch-field + .ak-switch-field {
+  border-top: 1px solid var(--color-ak-border-subtle); padding-top: 16px; margin-top: 16px;
+}
+.ak-form-section { max-width: 640px; }
+
+/* ── Number Stepper Button Press ── */
+.ak-stepper-btn:active:not([aria-disabled="true"]) {
+  transform: translate(2px, 2px);
+  box-shadow: 2px 2px 0 0 var(--color-ak-brutal-ink) !important;
+}
+.ak-stepper-btn[aria-disabled="true"] { pointer-events: none; opacity: 0.3; }
+
+/* ── Quantity Selector ── */
+.ak-qty-btn { transition: all 0.15s ease; }
+.ak-qty-btn:active:not([aria-disabled="true"]) { transform: scale(0.96); }
+.ak-qty-btn[aria-disabled="true"] { opacity: 0.3; cursor: not-allowed; }
+
+/* ── Shared Keyframes ── */
+@keyframes ak-fadeInUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes ak-slideIn {
+  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes ak-fadeOut {
+  from { opacity: 1; transform: translateY(0) scale(1); }
+  to { opacity: 0; transform: translateY(-8px) scale(0.98); }
+}
+@keyframes ak-swipeOut {
+  from { transform: translateX(var(--radix-toast-swipe-end-x)); }
+  to { transform: translateX(100%); }
+}
+
+/* ── Glass Panel (split-screen logins) ── */
+.ak-glass-panel {
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* ── Grid Pattern Background ── */
+.ak-bg-grid-pattern {
+  background-image: linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
+                    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
+  background-size: 40px 40px;
+}
+
+/* ── Toggle Group ── */
+.ak-toggle-group {
+  display: inline-flex; background: var(--color-ak-surface-2);
+  border-radius: 8px; padding: 4px; gap: 4px;
+}
+.ak-toggle-group-item {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  background: none; border: none; padding: 0 16px; min-height: 44px;
+  font-family: inherit; font-size: var(--text-ak-base, 1rem); font-weight: 600;
+  color: var(--color-ak-text-secondary); border-radius: 8px; cursor: pointer;
+  transition: background-color 0.2s, color 0.2s; white-space: nowrap; line-height: 1;
+}
+.ak-toggle-group-item[aria-checked="true"],
+.ak-toggle-group-item[aria-pressed="true"] {
+  background: var(--color-ak-bg); color: var(--color-ak-text);
+}
+.ak-toggle-group-item[aria-checked="false"]:not(:disabled):hover,
+.ak-toggle-group-item[aria-pressed="false"]:not(:disabled):hover {
+  color: var(--color-ak-text); background: var(--color-ak-hover);
+}
+.ak-toggle-group-item:focus { outline: none; }
+.ak-toggle-group-item:focus-visible { outline: 2px solid var(--color-ak-primary); outline-offset: 2px; }
+.ak-toggle-group-item:disabled { opacity: 0.4; cursor: not-allowed; }
+.ak-toggle-group[aria-disabled="true"] { opacity: 0.5; }
+.ak-toggle-group[aria-disabled="true"] .ak-toggle-group-item { cursor: not-allowed; }
+.ak-toggle-group-item i { font-size: 20px; line-height: 1; }
+.ak-toggle-group-item-icon { padding: 0 14px; }
+/* Toggle group — small */
+.ak-toggle-group-sm { padding: 3px; gap: 3px; }
+.ak-toggle-group-sm .ak-toggle-group-item { min-height: 44px; padding: 0 12px; font-size: var(--text-ak-sm, 0.875rem); }
+.ak-toggle-group-sm .ak-toggle-group-item i { font-size: 18px; }
+.ak-toggle-group-sm .ak-toggle-group-item-icon { padding: 0 12px; }
+/* Toggle group — large */
+.ak-toggle-group-lg { padding: 5px; gap: 5px; }
+.ak-toggle-group-lg .ak-toggle-group-item { min-height: 52px; padding: 0 24px; font-size: var(--text-ak-lg, 1.125rem); }
+.ak-toggle-group-lg .ak-toggle-group-item i { font-size: 24px; }
+.ak-toggle-group-lg .ak-toggle-group-item-icon { padding: 0 18px; }
+
+/* ── Resizable Panel Cursors ── */
+body.ak-col-resizing, body.ak-col-resizing * {
+  cursor: col-resize !important; user-select: none !important; -webkit-user-select: none !important;
+}
+body.ak-ew-resizing, body.ak-ew-resizing * {
+  cursor: ew-resize !important; user-select: none !important; -webkit-user-select: none !important;
+}
+
+/* ── Focus Ring Utility ── */
+.ak-focus-ring:focus-visible { outline: 2px solid var(--color-ak-primary); outline-offset: 2px; }
+
+/* ── Price Fade Transition ── */
+.ak-price-fade { transition: opacity 0.15s ease-in-out; }
+
+/* Reduced motion — unlayered so it overrides everything */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+  .ak-star-btn:hover { transform: none !important; }
+  .ak-stepper-btn:active { transform: none !important; }
+  @keyframes ak-slideIn { from { opacity: 0; } to { opacity: 1; } }
+  @keyframes ak-fadeOut { from { opacity: 1; } to { opacity: 0; } }
+}