fernwell 0.1.0

package/dist/fernwell.css

@@ -0,0 +1,1548 @@
+/*! fernwell v0.1.0 | MIT | https://github.com/JacobKnaack/fernwell */
+/* src/css/tokens.css */
+@layer fw-tokens {
+  :root,
+  [data-theme=light] {
+    --fw-text: #1F2430;
+    --fw-text-soft: #565D6E;
+    --fw-bg: #F5F6F1;
+    --fw-bg-dim: #EAEBE4;
+    --fw-surface: #FFFFFF;
+    --fw-primary: #FFC145;
+    --fw-primary-hover: color-mix(in srgb, var(--fw-primary), var(--fw-text) 12%);
+    --fw-primary-soft: color-mix(in srgb, var(--fw-primary), white 35%);
+    --fw-secondary: #4C3A73;
+    --fw-secondary-hover: color-mix(in srgb, var(--fw-secondary), var(--fw-text) 15%);
+    --fw-secondary-bg: color-mix(in srgb, var(--fw-secondary) 10%, var(--fw-surface));
+    --fw-success: #3FA672;
+    --fw-success-bg: color-mix(in srgb, var(--fw-success) 12%, var(--fw-surface));
+    --fw-warning: #E8A521;
+    --fw-warning-bg: color-mix(in srgb, var(--fw-warning) 14%, var(--fw-surface));
+    --fw-danger: #E85B4F;
+    --fw-danger-bg: color-mix(in srgb, var(--fw-danger) 13%, var(--fw-surface));
+    --fw-info: #3E8FD0;
+    --fw-info-bg: color-mix(in srgb, var(--fw-info) 12%, var(--fw-surface));
+    --fw-on-primary: #1F2430;
+    --fw-on-secondary: #FFFFFF;
+    --fw-on-secondary-soft: color-mix(in srgb, var(--fw-on-secondary) 72%, transparent);
+    --fw-on-secondary-fill: color-mix(in srgb, var(--fw-on-secondary) 10%, transparent);
+    --fw-on-secondary-line: color-mix(in srgb, var(--fw-on-secondary) 16%, transparent);
+    --fw-overlay: rgba(31, 36, 48, 0.55);
+    --fw-overlay-soft: rgba(31, 36, 48, 0.32);
+    --fw-focus-ring: 0 0 0 4px color-mix(in srgb, var(--fw-primary) 25%, transparent);
+    --fw-font-display:
+      "Plus Jakarta Sans",
+      system-ui,
+      sans-serif;
+    --fw-font-body:
+      "Inter",
+      system-ui,
+      sans-serif;
+    --fw-font-mono:
+      "IBM Plex Mono",
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      monospace;
+    --fw-sp-1: 4px;
+    --fw-sp-2: 8px;
+    --fw-sp-3: 12px;
+    --fw-sp-4: 16px;
+    --fw-sp-5: 24px;
+    --fw-sp-6: 32px;
+    --fw-sp-7: 48px;
+    --fw-sp-8: 64px;
+    --fw-sp-9: 96px;
+    --fw-r-sm: 10px;
+    --fw-r-md: 16px;
+    --fw-r-lg: 24px;
+    --fw-r-xl: 32px;
+    --fw-r-full: 999px;
+    --fw-shadow-sm: 0 1px 2px rgba(31, 36, 48, 0.06), 0 1px 1px rgba(31, 36, 48, 0.04);
+    --fw-shadow-md: 0 4px 12px rgba(31, 36, 48, 0.08), 0 2px 4px rgba(31, 36, 48, 0.04);
+    --fw-shadow-lg: 0 12px 32px rgba(31, 36, 48, 0.12), 0 4px 8px rgba(31, 36, 48, 0.06);
+    --fw-shadow-primary: 0 6px 16px color-mix(in srgb, var(--fw-primary) 35%, transparent);
+    --fw-shadow-success: 0 6px 16px color-mix(in srgb, var(--fw-success) 28%, transparent);
+    --fw-border-w: 1.5px;
+    --fw-motion-fast: 120ms;
+    --fw-motion-base: 180ms;
+    --fw-motion-ease: ease;
+  }
+  [data-theme=dark] {
+    --fw-text: #F2F1EA;
+    --fw-text-soft: #9CA1B0;
+    --fw-bg: #14161C;
+    --fw-bg-dim: #2B2F3B;
+    --fw-surface: #1D2029;
+    --fw-primary: #FFC145;
+    --fw-primary-hover: color-mix(in srgb, var(--fw-primary), var(--fw-text) 12%);
+    --fw-primary-soft: color-mix(in srgb, var(--fw-primary), white 35%);
+    --fw-secondary: #6B54A3;
+    --fw-secondary-hover: color-mix(in srgb, var(--fw-secondary), var(--fw-text) 15%);
+    --fw-secondary-bg: color-mix(in srgb, var(--fw-secondary) 16%, transparent);
+    --fw-success: #55D194;
+    --fw-success-bg: color-mix(in srgb, var(--fw-success) 14%, transparent);
+    --fw-warning: #FFD166;
+    --fw-warning-bg: color-mix(in srgb, var(--fw-warning) 16%, transparent);
+    --fw-danger: #FF8478;
+    --fw-danger-bg: color-mix(in srgb, var(--fw-danger) 14%, transparent);
+    --fw-info: #6BB3E8;
+    --fw-info-bg: color-mix(in srgb, var(--fw-info) 14%, transparent);
+    --fw-on-primary: #1F2430;
+    --fw-on-secondary: #FFFFFF;
+    --fw-on-secondary-soft: color-mix(in srgb, var(--fw-on-secondary) 72%, transparent);
+    --fw-on-secondary-fill: color-mix(in srgb, var(--fw-on-secondary) 10%, transparent);
+    --fw-on-secondary-line: color-mix(in srgb, var(--fw-on-secondary) 16%, transparent);
+    --fw-overlay: rgba(0, 0, 0, 0.6);
+    --fw-overlay-soft: rgba(0, 0, 0, 0.4);
+    --fw-focus-ring: 0 0 0 4px color-mix(in srgb, var(--fw-primary) 25%, transparent);
+    --fw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --fw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
+    --fw-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
+    --fw-shadow-primary: 0 6px 16px color-mix(in srgb, var(--fw-primary) 22%, transparent);
+    --fw-shadow-success: 0 6px 16px color-mix(in srgb, var(--fw-success) 22%, transparent);
+  }
+}
+
+/* src/css/base.css */
+.fw-root {
+  background: var(--fw-bg);
+  color: var(--fw-text);
+  font-family: var(--fw-font-body);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  transition: background var(--fw-motion-base) var(--fw-motion-ease), color var(--fw-motion-base) var(--fw-motion-ease);
+}
+.fw-root,
+.fw-root *,
+.fw-root *::before,
+.fw-root *::after {
+  box-sizing: border-box;
+}
+.fw-root :where(h1, h2, h3, h4) {
+  font-family: var(--fw-font-display);
+  color: var(--fw-text);
+  margin: 0;
+}
+.fw-root :where(p) {
+  margin: 0;
+}
+.fw-root :where(a) {
+  color: inherit;
+}
+.fw-root :where(code) {
+  font-family: var(--fw-font-mono);
+}
+[hidden] {
+  display: none !important;
+}
+.fw-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.fw-scroll-lock {
+  overflow: hidden;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fw-root {
+    scroll-behavior: auto;
+  }
+  .fw-btn,
+  .fw-btn:hover,
+  .fw-list-row,
+  .fw-list-row:hover {
+    transform: none;
+  }
+}
+
+/* src/css/components/layout.css */
+.fw-wrap {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 0 var(--fw-sp-5);
+}
+.fw-row {
+  display: flex;
+  gap: var(--fw-sp-4);
+  flex-wrap: wrap;
+  align-items: center;
+}
+.fw-grid-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--fw-sp-5);
+}
+@media (max-width: 640px) {
+  .fw-grid-2 {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* src/css/components/button.css */
+.fw-btn {
+  font-family: var(--fw-font-body);
+  font-weight: 700;
+  font-size: 15px;
+  line-height: 1.2;
+  border-radius: var(--fw-r-md);
+  padding: 12px 22px;
+  border: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--fw-sp-2);
+  text-decoration: none;
+  transition:
+    transform var(--fw-motion-fast) var(--fw-motion-ease),
+    box-shadow var(--fw-motion-fast) var(--fw-motion-ease),
+    background var(--fw-motion-fast) var(--fw-motion-ease),
+    border-color var(--fw-motion-fast) var(--fw-motion-ease);
+}
+.fw-btn:hover {
+  transform: translateY(-1px);
+}
+.fw-btn:active {
+  transform: translateY(0);
+}
+.fw-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--fw-focus-ring);
+}
+.fw-btn-primary {
+  background: var(--fw-primary);
+  color: var(--fw-on-primary);
+  box-shadow: var(--fw-shadow-primary);
+}
+.fw-btn-primary:hover {
+  background: var(--fw-primary-hover);
+}
+.fw-btn-secondary {
+  background: var(--fw-secondary);
+  color: var(--fw-on-secondary);
+}
+.fw-btn-secondary:hover {
+  background: var(--fw-secondary-hover);
+}
+.fw-btn-ghost {
+  background: transparent;
+  color: var(--fw-text);
+  border: var(--fw-border-w) solid var(--fw-bg-dim);
+}
+.fw-btn-ghost:hover {
+  border-color: var(--fw-text-soft);
+}
+.fw-btn-danger {
+  background: var(--fw-danger-bg);
+  color: var(--fw-danger);
+}
+.fw-btn-lg {
+  padding: 14px 26px;
+}
+.fw-btn:disabled,
+.fw-btn[aria-disabled=true] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none;
+}
+.fw-btn-loading {
+  cursor: progress;
+}
+.fw-btn .fw-spinner {
+  margin-right: 2px;
+}
+.fw-icon-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--fw-r-sm);
+  border: var(--fw-border-w) solid var(--fw-bg-dim);
+  background: var(--fw-surface);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--fw-text-soft);
+  flex-shrink: 0;
+  padding: 0;
+  text-decoration: none;
+  transition: border-color var(--fw-motion-fast) var(--fw-motion-ease), color var(--fw-motion-fast) var(--fw-motion-ease);
+}
+.fw-icon-btn:hover {
+  border-color: var(--fw-secondary);
+  color: var(--fw-secondary);
+}
+.fw-icon-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--fw-focus-ring);
+}
+.fw-icon-btn svg {
+  width: 15px;
+  height: 15px;
+}
+
+/* src/css/components/card.css */
+.fw-card {
+  background: var(--fw-surface);
+  border-radius: var(--fw-r-lg);
+  border: var(--fw-border-w) solid var(--fw-bg-dim);
+  box-shadow: var(--fw-shadow-sm);
+  padding: var(--fw-sp-5);
+  color: var(--fw-text);
+}
+
+/* src/css/components/tag.css */
+.fw-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--fw-font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.3;
+  padding: 5px 12px;
+  border-radius: var(--fw-r-md);
+  transform: rotate(-2deg);
+  background: var(--fw-bg-dim);
+  color: var(--fw-text-soft);
+  white-space: nowrap;
+}
+.fw-tag:nth-of-type(2n) {
+  transform: rotate(1.5deg);
+}
+.fw-tag:nth-of-type(3n) {
+  transform: rotate(-1deg);
+}
+.fw-tag-pill,
+.fw-tag-pill:nth-of-type(n) {
+  transform: none;
+  font-size: 11px;
+  padding: 4px 10px;
+  border-radius: var(--fw-r-full);
+}
+.fw-tag-live {
+  background: var(--fw-success-bg);
+  color: var(--fw-success);
+}
+.fw-tag-live::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--fw-success);
+}
+.fw-tag-pending {
+  background: var(--fw-warning-bg);
+  color: var(--fw-warning);
+}
+.fw-tag-error {
+  background: var(--fw-danger-bg);
+  color: var(--fw-danger);
+}
+.fw-tag-info {
+  background: var(--fw-info-bg);
+  color: var(--fw-info);
+}
+.fw-tag-secondary {
+  background: var(--fw-secondary-bg);
+  color: var(--fw-secondary);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .fw-tag {
+    transition: transform var(--fw-motion-fast) var(--fw-motion-ease);
+  }
+}
+
+/* src/css/components/eyebrow.css */
+.fw-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--fw-sp-2);
+  font-family: var(--fw-font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--fw-secondary);
+  background: var(--fw-surface);
+  border: var(--fw-border-w) solid var(--fw-bg-dim);
+  padding: 7px 16px;
+  border-radius: var(--fw-r-full);
+  box-shadow: var(--fw-shadow-sm);
+}
+.fw-eyebrow::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--fw-primary);
+}
+[data-theme=dark] .fw-eyebrow {
+  color: var(--fw-secondary-hover);
+}
+
+/* src/css/components/field.css */
+.fw-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-width: 320px;
+}
+.fw-field-full {
+  max-width: none;
+}
+.fw-label,
+.fw-field > label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--fw-text);
+}
+.fw-hint {
+  font-size: 12px;
+  color: var(--fw-text-soft);
+}
+.fw-error-msg {
+  font-size: 12px;
+  color: var(--fw-danger);
+  font-weight: 600;
+}
+.fw-required {
+  color: var(--fw-danger);
+  font-weight: 700;
+  margin-left: 3px;
+}
+.fw-input,
+.fw-field input:not([type=checkbox]):not([type=radio]),
+.fw-field select,
+.fw-field textarea {
+  font-family: var(--fw-font-body);
+  font-size: 15px;
+  line-height: 1.4;
+  padding: 11px 14px;
+  border-radius: var(--fw-r-sm);
+  border: var(--fw-border-w) solid var(--fw-bg-dim);
+  background: var(--fw-surface);
+  color: var(--fw-text);
+  outline: none;
+  width: 100%;
+  transition:
+    border-color var(--fw-motion-fast) var(--fw-motion-ease),
+    box-shadow var(--fw-motion-fast) var(--fw-motion-ease),
+    background var(--fw-motion-base) var(--fw-motion-ease),
+    color var(--fw-motion-base) var(--fw-motion-ease);
+}
+textarea.fw-input,
+.fw-field textarea {
+  min-height: 96px;
+  resize: vertical;
+}
+.fw-input::placeholder,
+.fw-field input::placeholder,
+.fw-field textarea::placeholder {
+  color: var(--fw-text-soft);
+  opacity: 1;
+}
+.fw-input:focus,
+.fw-field input:focus,
+.fw-field select:focus,
+.fw-field textarea:focus {
+  border-color: var(--fw-primary-hover);
+  box-shadow: var(--fw-focus-ring);
+}
+.fw-input.is-error,
+.fw-input[aria-invalid=true],
+.fw-field.is-error input,
+.fw-field.is-error select,
+.fw-field.is-error textarea,
+.fw-field input.is-error,
+.fw-field textarea.is-error {
+  border-color: var(--fw-danger);
+}
+.fw-input:disabled,
+.fw-field input:disabled,
+.fw-field select:disabled,
+.fw-field textarea:disabled {
+  background: var(--fw-bg-dim);
+  color: var(--fw-text-soft);
+  border-color: var(--fw-bg-dim);
+  cursor: not-allowed;
+}
+.fw-field.is-disabled .fw-label,
+.fw-field.is-disabled > label {
+  color: var(--fw-text-soft);
+}
+
+/* src/css/components/selection.css */
+.fw-checkbox,
+.fw-radio,
+.fw-toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  font-family: var(--fw-font-body);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fw-text);
+}
+.fw-checkbox input,
+.fw-radio input,
+.fw-toggle input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+}
+.fw-checkbox:has(input:disabled),
+.fw-radio:has(input:disabled),
+.fw-toggle:has(input:disabled) {
+  cursor: not-allowed;
+}
+.fw-checkbox input:disabled ~ span,
+.fw-radio input:disabled ~ span,
+.fw-toggle input:disabled ~ span {
+  color: var(--fw-text-soft);
+}
+.fw-option-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--fw-sp-3);
+}
+.fw-option-group-inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--fw-sp-5);
+}
+.fw-checkbox .fw-box {
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+  border: var(--fw-border-w) solid var(--fw-bg-dim);
+  background: var(--fw-surface);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background var(--fw-motion-fast) var(--fw-motion-ease), border-color var(--fw-motion-fast) var(--fw-motion-ease);
+}
+.fw-checkbox .fw-box::after {
+  content: "";
+  width: 12px;
+  height: 12px;
+  opacity: 0;
+  background-color: var(--fw-on-primary);
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5L6.2 11.5L13 4.5' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5L6.2 11.5L13 4.5' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
+  transition: opacity 100ms var(--fw-motion-ease);
+}
+.fw-checkbox input:checked + .fw-box {
+  background: var(--fw-primary);
+  border-color: var(--fw-primary);
+}
+.fw-checkbox input:checked + .fw-box::after {
+  opacity: 1;
+}
+.fw-checkbox input:focus-visible + .fw-box {
+  box-shadow: var(--fw-focus-ring);
+}
+.fw-checkbox input:disabled + .fw-box {
+  background: var(--fw-bg-dim);
+  border-color: var(--fw-bg-dim);
+}
+.fw-radio .fw-box {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: var(--fw-border-w) solid var(--fw-bg-dim);
+  background: var(--fw-surface);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: border-color var(--fw-motion-fast) var(--fw-motion-ease);
+}
+.fw-radio .fw-box::after {
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: transparent;
+  transition: background var(--fw-motion-fast) var(--fw-motion-ease);
+}
+.fw-radio input:checked + .fw-box {
+  border-color: var(--fw-primary);
+}
+.fw-radio input:checked + .fw-box::after {
+  background: var(--fw-primary);
+}
+.fw-radio input:focus-visible + .fw-box {
+  box-shadow: var(--fw-focus-ring);
+}
+.fw-radio input:disabled + .fw-box {
+  background: var(--fw-bg-dim);
+  border-color: var(--fw-bg-dim);
+}
+.fw-toggle .fw-track {
+  width: 42px;
+  height: 24px;
+  border-radius: var(--fw-r-full);
+  background: var(--fw-bg-dim);
+  position: relative;
+  flex-shrink: 0;
+  transition: background 160ms var(--fw-motion-ease);
+}
+.fw-toggle .fw-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--fw-surface);
+  box-shadow: var(--fw-shadow-sm);
+  transition: transform 160ms var(--fw-motion-ease);
+}
+.fw-toggle input:checked + .fw-track {
+  background: var(--fw-primary);
+}
+.fw-toggle input:checked + .fw-track .fw-thumb {
+  transform: translateX(18px);
+}
+.fw-toggle input:focus-visible + .fw-track {
+  box-shadow: var(--fw-focus-ring);
+}
+.fw-toggle input:disabled + .fw-track {
+  opacity: 0.5;
+}
+
+/* src/css/components/combobox.css */
+.fw-combobox {
+  position: relative;
+}
+.fw-combobox-list {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  right: 0;
+  z-index: 30;
+  background: var(--fw-surface);
+  border: var(--fw-border-w) solid var(--fw-bg-dim);
+  border-radius: var(--fw-r-md);
+  box-shadow: var(--fw-shadow-lg);
+  max-height: 220px;
+  overflow-y: auto;
+  padding: 6px;
+  margin: 0;
+  list-style: none;
+  opacity: 0;
+  transform: translateY(-4px);
+  pointer-events: none;
+  transition: opacity 140ms var(--fw-motion-ease), transform 140ms var(--fw-motion-ease);
+}
+.fw-combobox-list.is-open {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+.fw-combobox-option {
+  padding: 10px 12px;
+  border-radius: var(--fw-r-sm);
+  font-family: var(--fw-font-body);
+  font-size: 14px;
+  cursor: pointer;
+  color: var(--fw-text);
+}
+.fw-combobox-option:hover,
+.fw-combobox-option.is-active {
+  background: var(--fw-bg);
+}
+.fw-combobox-option b {
+  color: var(--fw-primary-hover);
+  font-weight: 700;
+}
+.fw-combobox-empty {
+  padding: 14px 12px;
+  font-size: 13px;
+  color: var(--fw-text-soft);
+  text-align: center;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fw-combobox-list {
+    transform: none;
+  }
+}
+
+/* src/css/components/alert.css */
+.fw-alert {
+  display: flex;
+  gap: var(--fw-sp-3);
+  padding: var(--fw-sp-4);
+  border-radius: var(--fw-r-md);
+  align-items: flex-start;
+  font-family: var(--fw-font-body);
+  color: var(--fw-text);
+  background: var(--fw-bg-dim);
+}
+.fw-alert-dot {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  margin-top: 2px;
+  background: var(--fw-text-soft);
+}
+.fw-alert-title {
+  font-weight: 700;
+  font-size: 14px;
+}
+.fw-alert-body {
+  font-size: 13px;
+  color: var(--fw-text-soft);
+  margin-top: 2px;
+}
+.fw-alert-success {
+  background: var(--fw-success-bg);
+}
+.fw-alert-success .fw-alert-dot {
+  background: var(--fw-success);
+}
+.fw-alert-error {
+  background: var(--fw-danger-bg);
+}
+.fw-alert-error .fw-alert-dot {
+  background: var(--fw-danger);
+}
+.fw-alert-pending {
+  background: var(--fw-warning-bg);
+}
+.fw-alert-pending .fw-alert-dot {
+  background: var(--fw-warning);
+}
+.fw-alert-info {
+  background: var(--fw-info-bg);
+}
+.fw-alert-info .fw-alert-dot {
+  background: var(--fw-info);
+}
+.fw-alert-with-action {
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.fw-alert-with-action .fw-alert-main {
+  display: flex;
+  align-items: center;
+  gap: var(--fw-sp-3);
+}
+
+/* src/css/components/progress.css */
+.fw-progress-label {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 6px;
+  font-family: var(--fw-font-body);
+  font-size: 13px;
+}
+.fw-progress-name {
+  font-weight: 600;
+  color: var(--fw-text);
+}
+.fw-progress-pct {
+  font-family: var(--fw-font-mono);
+  color: var(--fw-text-soft);
+}
+.fw-progress {
+  position: relative;
+  height: 10px;
+  border-radius: var(--fw-r-full);
+  background: var(--fw-bg-dim);
+  overflow: hidden;
+}
+.fw-progress-sm {
+  height: 8px;
+}
+.fw-progress-fill {
+  height: 100%;
+  border-radius: var(--fw-r-full);
+  background: var(--fw-primary);
+  transition: width 400ms var(--fw-motion-ease);
+}
+.fw-progress.is-success .fw-progress-fill,
+.fw-progress-fill.is-success {
+  background: var(--fw-success);
+}
+.fw-progress.is-indeterminate .fw-progress-fill {
+  position: absolute;
+  width: 40%;
+  left: -40%;
+  animation: fw-indeterminate-slide 1.4s ease-in-out infinite;
+}
+@keyframes fw-indeterminate-slide {
+  0% {
+    left: -40%;
+    width: 40%;
+  }
+  50% {
+    width: 60%;
+  }
+  100% {
+    left: 100%;
+    width: 40%;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fw-progress.is-indeterminate .fw-progress-fill {
+    position: static;
+    width: 100%;
+    animation: fw-pulse-opacity 1.2s ease-in-out infinite;
+  }
+}
+
+/* src/css/components/spinner.css */
+.fw-spinner {
+  display: inline-block;
+  border-radius: 50%;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  border: 3px solid var(--fw-bg-dim);
+  border-top-color: currentColor;
+  animation: fw-spin 800ms linear infinite;
+}
+.fw-spinner-sm {
+  width: 16px;
+  height: 16px;
+  border-width: 2px;
+}
+.fw-spinner-md {
+  width: 24px;
+  height: 24px;
+  border-width: 3px;
+}
+.fw-spinner-lg {
+  width: 40px;
+  height: 40px;
+  border-width: 4px;
+}
+@keyframes fw-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes fw-pulse-opacity {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.35;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fw-spinner {
+    animation: fw-pulse-opacity 1.2s ease-in-out infinite;
+    border-top-color: var(--fw-bg-dim);
+  }
+}
+
+/* src/css/components/nav.css */
+.fw-nav {
+  position: relative;
+  background: var(--fw-secondary);
+  border-radius: var(--fw-r-lg);
+  padding: var(--fw-sp-4) var(--fw-sp-5);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--fw-sp-4);
+  box-shadow: var(--fw-shadow-md);
+  font-family: var(--fw-font-body);
+  color: var(--fw-on-secondary);
+}
+.fw-nav-sticky {
+  position: sticky;
+  top: var(--fw-sp-5);
+  z-index: 100;
+}
+.fw-nav-brand {
+  color: var(--fw-on-secondary);
+  font-family: var(--fw-font-display);
+  font-weight: 800;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  gap: var(--fw-sp-2);
+  text-decoration: none;
+}
+.fw-nav-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--fw-primary);
+}
+.fw-nav-hex {
+  width: 16px;
+  height: 16px;
+  background: var(--fw-primary);
+  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
+}
+.fw-nav-links {
+  display: flex;
+  gap: var(--fw-sp-5);
+  align-items: center;
+}
+.fw-nav-links a {
+  color: var(--fw-on-secondary-soft);
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: color var(--fw-motion-fast) var(--fw-motion-ease);
+}
+.fw-nav-links a:hover {
+  color: var(--fw-on-secondary);
+}
+.fw-nav-links a.is-active {
+  color: var(--fw-on-secondary);
+  border-bottom: 2px solid var(--fw-primary);
+  padding-bottom: 3px;
+}
+.fw-nav-right {
+  display: flex;
+  align-items: center;
+  gap: var(--fw-sp-4);
+}
+.fw-nav-avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: var(--fw-r-sm);
+  background: var(--fw-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  font-size: 13px;
+  color: var(--fw-on-primary);
+  font-family: var(--fw-font-display);
+  border: none;
+  padding: 0;
+  cursor: default;
+}
+.fw-nav-btn,
+.fw-nav-toggle {
+  width: 38px;
+  height: 38px;
+  border-radius: var(--fw-r-sm);
+  background: var(--fw-on-secondary-fill);
+  border: var(--fw-border-w) solid var(--fw-on-secondary-line);
+  color: var(--fw-on-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  font-size: 15px;
+  transition: background var(--fw-motion-fast) var(--fw-motion-ease);
+}
+.fw-nav-btn:hover,
+.fw-nav-toggle:hover {
+  background: var(--fw-on-secondary-line);
+}
+.fw-nav-btn:focus-visible,
+.fw-nav-toggle:focus-visible {
+  outline: none;
+  box-shadow: var(--fw-focus-ring);
+}
+.fw-nav-toggle {
+  display: none;
+  flex-direction: column;
+  gap: 4px;
+}
+.fw-nav-toggle span {
+  width: 16px;
+  height: 2px;
+  background: var(--fw-on-secondary);
+  border-radius: 2px;
+  transition: transform var(--fw-motion-base) var(--fw-motion-ease), opacity var(--fw-motion-base) var(--fw-motion-ease);
+}
+.fw-nav-toggle[aria-expanded=true] span:nth-child(1) {
+  transform: translateY(6px) rotate(45deg);
+}
+.fw-nav-toggle[aria-expanded=true] span:nth-child(2) {
+  opacity: 0;
+}
+.fw-nav-toggle[aria-expanded=true] span:nth-child(3) {
+  transform: translateY(-6px) rotate(-45deg);
+}
+.fw-nav-dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  right: 0;
+  z-index: 20;
+  background: var(--fw-surface);
+  border-radius: var(--fw-r-lg);
+  border: var(--fw-border-w) solid var(--fw-bg-dim);
+  box-shadow: var(--fw-shadow-lg);
+  padding: var(--fw-sp-3);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  opacity: 0;
+  transform: translateY(-6px) scale(0.98);
+  pointer-events: none;
+  transition: opacity 160ms var(--fw-motion-ease), transform 160ms var(--fw-motion-ease);
+}
+.fw-nav-dropdown.is-open {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  pointer-events: auto;
+}
+.fw-nav-dropdown-menu {
+  left: auto;
+  min-width: 200px;
+}
+.fw-nav-dropdown a,
+.fw-nav-dropdown button {
+  color: var(--fw-text);
+  font-family: var(--fw-font-body);
+  font-size: 15px;
+  font-weight: 600;
+  text-decoration: none;
+  text-align: left;
+  padding: 12px 14px;
+  border-radius: var(--fw-r-sm);
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background var(--fw-motion-fast) var(--fw-motion-ease);
+}
+.fw-nav-dropdown a:hover,
+.fw-nav-dropdown button:hover {
+  background: var(--fw-bg);
+}
+.fw-nav-dropdown a.is-active {
+  background: var(--fw-primary);
+  color: var(--fw-on-primary);
+}
+@media (max-width: 600px) {
+  .fw-nav-links {
+    display: none;
+  }
+  .fw-nav-toggle {
+    display: flex;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fw-nav-dropdown {
+    transform: none;
+  }
+}
+
+/* src/css/components/stat.css */
+.fw-stat-label {
+  font-family: var(--fw-font-body);
+  font-size: 13px;
+  color: var(--fw-text-soft);
+  font-weight: 600;
+}
+.fw-stat-value {
+  font-family: var(--fw-font-display);
+  font-size: 32px;
+  font-weight: 800;
+  line-height: 1.1;
+  color: var(--fw-text);
+  margin-top: 4px;
+}
+.fw-stat-value .fw-stat-unit {
+  font-size: 18px;
+  color: var(--fw-primary-hover);
+}
+.fw-stat-delta {
+  font-family: var(--fw-font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--fw-text-soft);
+  margin-top: 4px;
+}
+.fw-stat-delta.is-up {
+  color: var(--fw-success);
+}
+.fw-stat-delta.is-down {
+  color: var(--fw-danger);
+}
+
+/* src/css/components/empty.css */
+.fw-empty {
+  text-align: center;
+  padding: var(--fw-sp-7) var(--fw-sp-5);
+  font-family: var(--fw-font-body);
+}
+.fw-empty-blob {
+  width: 72px;
+  height: 72px;
+  margin: 0 auto var(--fw-sp-4);
+  border-radius: 38% 62% 60% 40% / 48% 42% 58% 52%;
+  background:
+    linear-gradient(
+      135deg,
+      var(--fw-primary),
+      var(--fw-primary-soft));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+}
+.fw-empty-title {
+  font-family: var(--fw-font-display);
+  font-size: 17px;
+  font-weight: 700;
+  color: var(--fw-text);
+  margin: 0 0 6px;
+}
+.fw-empty-body {
+  font-size: 14px;
+  color: var(--fw-text-soft);
+  max-width: 36ch;
+  margin: 0 auto var(--fw-sp-4);
+}
+
+/* src/css/components/modal.css */
+.fw-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--fw-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--fw-sp-5);
+  z-index: 100;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--fw-motion-base) var(--fw-motion-ease);
+}
+.fw-modal-overlay.is-open {
+  opacity: 1;
+  pointer-events: auto;
+}
+.fw-modal {
+  background: var(--fw-surface);
+  color: var(--fw-text);
+  font-family: var(--fw-font-body);
+  border-radius: var(--fw-r-xl);
+  box-shadow: var(--fw-shadow-lg);
+  width: 100%;
+  max-width: 460px;
+  max-height: 88vh;
+  overflow-y: auto;
+  padding: var(--fw-sp-6);
+  transform: translateY(8px) scale(0.98);
+  transition: transform var(--fw-motion-base) var(--fw-motion-ease);
+}
+.fw-modal-wide {
+  max-width: 600px;
+}
+.fw-modal-overlay.is-open .fw-modal {
+  transform: translateY(0) scale(1);
+}
+.fw-modal-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--fw-sp-3);
+  margin-bottom: var(--fw-sp-5);
+}
+.fw-modal-head h2,
+.fw-modal-title {
+  font-family: var(--fw-font-display);
+  font-size: 19px;
+  font-weight: 800;
+  color: var(--fw-text);
+  margin: 0;
+}
+.fw-modal-sub {
+  font-size: 13px;
+  color: var(--fw-text-soft);
+  margin: 2px 0 0;
+}
+.fw-modal-foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--fw-sp-3);
+  align-items: center;
+  margin-top: var(--fw-sp-2);
+  padding-top: var(--fw-sp-5);
+  border-top: var(--fw-border-w) solid var(--fw-bg-dim);
+}
+@media (prefers-reduced-motion: reduce) {
+  .fw-modal {
+    transform: none;
+  }
+}
+
+/* src/css/components/drawer.css */
+.fw-drawer-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--fw-overlay-soft);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--fw-motion-base) var(--fw-motion-ease);
+  z-index: 90;
+}
+.fw-drawer-overlay.is-open {
+  opacity: 1;
+  pointer-events: auto;
+}
+.fw-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 440px;
+  max-width: 92vw;
+  background: var(--fw-bg);
+  color: var(--fw-text);
+  font-family: var(--fw-font-body);
+  box-shadow: var(--fw-shadow-lg);
+  border-left: var(--fw-border-w) solid var(--fw-bg-dim);
+  transform: translateX(100%);
+  transition: transform 240ms var(--fw-motion-ease);
+  z-index: 91;
+  display: flex;
+  flex-direction: column;
+}
+.fw-drawer.is-open {
+  transform: translateX(0);
+}
+.fw-drawer-head {
+  padding: var(--fw-sp-5);
+  border-bottom: var(--fw-border-w) solid var(--fw-bg-dim);
+  background: var(--fw-surface);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--fw-sp-3);
+  flex-shrink: 0;
+}
+.fw-drawer-head-text {
+  flex: 1;
+  min-width: 0;
+}
+.fw-drawer-eyebrow {
+  font-family: var(--fw-font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--fw-text-soft);
+  margin-bottom: 4px;
+}
+.fw-drawer-title {
+  font-family: var(--fw-font-display);
+  font-size: 19px;
+  font-weight: 800;
+  color: var(--fw-text);
+  margin: 0;
+}
+.fw-drawer-title-input {
+  font-family: var(--fw-font-display);
+  font-size: 19px;
+  font-weight: 800;
+  color: var(--fw-text);
+  border: none;
+  background: transparent;
+  padding: 2px 0;
+  width: 100%;
+  outline: none;
+  border-radius: 6px;
+}
+.fw-drawer-title-input:focus {
+  background: var(--fw-bg);
+  padding: 2px 6px;
+  margin: 0 -6px;
+}
+.fw-drawer > form {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.fw-drawer-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: var(--fw-sp-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--fw-sp-5);
+}
+.fw-drawer-foot {
+  padding: var(--fw-sp-4) var(--fw-sp-5);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--fw-sp-3);
+  flex-shrink: 0;
+  border-top: var(--fw-border-w) solid var(--fw-bg-dim);
+  background: var(--fw-surface);
+}
+@media (max-width: 560px) {
+  .fw-drawer {
+    width: 100vw;
+    max-width: 100vw;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fw-drawer {
+    transition: opacity var(--fw-motion-base) var(--fw-motion-ease);
+    transform: none;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .fw-drawer.is-open {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+/* src/css/components/toast.css */
+.fw-toast {
+  position: fixed;
+  bottom: var(--fw-sp-6);
+  right: var(--fw-sp-6);
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  gap: var(--fw-sp-3);
+  max-width: min(360px, calc(100vw - 2 * var(--fw-sp-5)));
+  background: var(--fw-success-bg);
+  color: var(--fw-text);
+  font-family: var(--fw-font-body);
+  border-radius: var(--fw-r-md);
+  padding: var(--fw-sp-3) var(--fw-sp-4);
+  box-shadow: var(--fw-shadow-lg);
+  font-size: 13px;
+  font-weight: 600;
+  transform: translateY(12px);
+  opacity: 0;
+  pointer-events: none;
+  transition: transform var(--fw-motion-base) var(--fw-motion-ease), opacity var(--fw-motion-base) var(--fw-motion-ease);
+}
+.fw-toast.is-show {
+  transform: translateY(0);
+  opacity: 1;
+  pointer-events: auto;
+}
+.fw-toast-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--fw-success);
+  flex-shrink: 0;
+}
+.fw-toast-error {
+  background: var(--fw-danger-bg);
+}
+.fw-toast-error .fw-toast-dot {
+  background: var(--fw-danger);
+}
+.fw-toast-info {
+  background: var(--fw-info-bg);
+}
+.fw-toast-info .fw-toast-dot {
+  background: var(--fw-info);
+}
+.fw-toast-pending {
+  background: var(--fw-warning-bg);
+}
+.fw-toast-pending .fw-toast-dot {
+  background: var(--fw-warning);
+}
+@media (prefers-reduced-motion: reduce) {
+  .fw-toast {
+    transform: none;
+  }
+}
+
+/* src/css/components/list-row.css */
+.fw-list-row {
+  display: block;
+  background: var(--fw-surface);
+  border-radius: var(--fw-r-lg);
+  border: var(--fw-border-w) solid var(--fw-bg-dim);
+  box-shadow: var(--fw-shadow-sm);
+  padding: var(--fw-sp-4) var(--fw-sp-5);
+  color: inherit;
+  font-family: var(--fw-font-body);
+  text-decoration: none;
+  transition: transform var(--fw-motion-fast) var(--fw-motion-ease), box-shadow var(--fw-motion-fast) var(--fw-motion-ease);
+}
+.fw-list-row:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--fw-shadow-md);
+  text-decoration: none;
+}
+.fw-list-row:focus-visible {
+  outline: none;
+  box-shadow: var(--fw-focus-ring);
+}
+.fw-list-row.is-locked {
+  opacity: 0.6;
+}
+.fw-list-row.is-locked:hover {
+  transform: none;
+  box-shadow: var(--fw-shadow-sm);
+}
+.fw-list-row + .fw-list-row {
+  margin-top: var(--fw-sp-3);
+}
+.fw-list-row-main {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--fw-sp-2) var(--fw-sp-4);
+}
+.fw-list-row-title {
+  font-family: var(--fw-font-display);
+  font-weight: 700;
+  font-size: 16px;
+  color: var(--fw-text);
+}
+.fw-list-row-meta {
+  font-size: 13px;
+  color: var(--fw-text-soft);
+}
+.fw-sub-list {
+  margin: var(--fw-sp-2) 0 0 var(--fw-sp-5);
+  padding-left: var(--fw-sp-4);
+  border-left: var(--fw-border-w) solid var(--fw-bg-dim);
+}
+.fw-sub-list-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--fw-sp-2) var(--fw-sp-3);
+  padding: var(--fw-sp-2) 0;
+}
+.fw-sub-list-row + .fw-sub-list-row {
+  border-top: 1px solid var(--fw-bg-dim);
+}
+.fw-sub-list-title {
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--fw-text);
+}
+
+/* src/css/components/disclosure.css */
+.fw-disclosure > summary {
+  cursor: pointer;
+  color: var(--fw-secondary);
+  font-family: var(--fw-font-body);
+  font-weight: 600;
+  font-size: 13px;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.fw-disclosure > summary::-webkit-details-marker {
+  display: none;
+}
+.fw-disclosure > summary:hover {
+  text-decoration: underline;
+}
+.fw-disclosure > summary:focus-visible {
+  outline: none;
+  border-radius: 4px;
+  box-shadow: var(--fw-focus-ring);
+}
+.fw-disclosure-chevron {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  transition: transform 150ms var(--fw-motion-ease);
+}
+.fw-disclosure[open] > summary .fw-disclosure-chevron {
+  transform: rotate(180deg);
+}
+.fw-disclosure-count {
+  font-family: var(--fw-font-mono);
+  font-size: 10.5px;
+  font-weight: 700;
+  color: var(--fw-secondary);
+  background: var(--fw-surface);
+  border: var(--fw-border-w) solid var(--fw-bg-dim);
+  border-radius: var(--fw-r-full);
+  padding: 1px 7px;
+}
+.fw-disclosure-body {
+  margin-top: var(--fw-sp-3);
+  border: var(--fw-border-w) solid var(--fw-bg-dim);
+  border-radius: var(--fw-r-md);
+  padding: var(--fw-sp-4);
+  background: var(--fw-bg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--fw-sp-3);
+}
+
+/* src/css/components/pagination.css */
+.fw-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--fw-sp-3);
+  font-family: var(--fw-font-body);
+}
+.fw-pag-info,
+.fw-pag-label {
+  font-family: var(--fw-font-mono);
+  font-size: 12px;
+  color: var(--fw-text-soft);
+}
+.fw-pag-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--fw-sp-3);
+}
+.fw-btn-page {
+  display: inline-flex;
+  align-items: center;
+  height: 34px;
+  padding: 0 14px;
+  border-radius: var(--fw-r-sm);
+  border: var(--fw-border-w) solid var(--fw-bg-dim);
+  background: var(--fw-surface);
+  color: var(--fw-text);
+  font-family: var(--fw-font-body);
+  font-size: 13px;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+  transition: border-color var(--fw-motion-fast) var(--fw-motion-ease);
+}
+.fw-btn-page:hover {
+  border-color: var(--fw-text-soft);
+  text-decoration: none;
+}
+.fw-btn-page:focus-visible {
+  outline: none;
+  box-shadow: var(--fw-focus-ring);
+}
+.fw-btn-page.is-disabled,
+.fw-btn-page[aria-disabled=true],
+.fw-btn-page:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* src/css/index.css */