/* ════════════════════════════════════════════════════════════════════
   Localworks Design System — Primitives (v1.0)
   ────────────────────────────────────────────────────────────────────
   Canonical component library: buttons, cards, tables, badges, chips,
   forms, alerts, stat cards, heros, page headers.

   All classes use the `.lw-*` prefix to coexist safely with existing
   legacy classes (`.btn`, `.card`, `.panel`, etc.). New components and
   migrated pages should use `.lw-*`; old pages keep working unchanged.

   REQUIRES: lw-tokens.css loaded first (for --lw-* CSS variables).
   ════════════════════════════════════════════════════════════════════ */

/* ── BUTTONS ───────────────────────────────────────────────────────── */

.lw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--lw-radius);
    border: 1px solid transparent;
    background: var(--lw-navy);
    color: var(--lw-text-inverse);
    font-family: var(--lw-font-sans);
    font-size: 14px;
    font-weight: var(--lw-weight-medium);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--lw-transition-fast);
    box-shadow: var(--lw-shadow-sm);
    position: relative;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
}
.lw-btn:hover {
    background: var(--lw-navy-hover);
    color: var(--lw-text-inverse);
    transform: translateY(-1px);
    box-shadow: var(--lw-shadow-md);
}
.lw-btn:active { transform: translateY(0); box-shadow: var(--lw-shadow-sm); }
.lw-btn:focus-visible { outline: none; box-shadow: var(--lw-focus-ring); }
.lw-btn:disabled,
.lw-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

/* Button variants (colour) */
.lw-btn--primary { background: var(--lw-navy); color: var(--lw-text-inverse); border-color: var(--lw-navy); }
.lw-btn--primary:hover { background: var(--lw-navy-hover); border-color: var(--lw-navy-hover); }

.lw-btn--orange, .lw-btn--accent { background: var(--lw-orange); color: var(--lw-text-inverse); border-color: var(--lw-orange); }
.lw-btn--orange:hover, .lw-btn--accent:hover { background: var(--lw-orange-hover); border-color: var(--lw-orange-hover); box-shadow: var(--lw-focus-ring-orange); }

.lw-btn--secondary {
    background: var(--lw-surface);
    color: var(--lw-navy);
    border-color: var(--lw-border-strong);
}
.lw-btn--secondary:hover {
    background: var(--lw-surface-2);
    color: var(--lw-navy);
    border-color: var(--lw-gray-400);
    box-shadow: var(--lw-focus-ring);
}

.lw-btn--ghost {
    background: transparent;
    color: var(--lw-text);
    border-color: transparent;
    box-shadow: none;
}
.lw-btn--ghost:hover {
    background: var(--lw-surface-2);
    color: var(--lw-text);
    box-shadow: none;
}

/* Ghost button on dark surfaces (e.g. inside topbars) */
.lw-btn--ghost-light {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.92);
    border-color: rgba(255,255,255,0.12);
    box-shadow: none;
}
.lw-btn--ghost-light:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.3);
    box-shadow: none;
}

.lw-btn--success { background: var(--lw-success); border-color: var(--lw-success); color: var(--lw-text-inverse); }
.lw-btn--success:hover { background: var(--lw-success-dark); border-color: var(--lw-success-dark); }

.lw-btn--warning { background: var(--lw-warning); border-color: var(--lw-warning); color: var(--lw-text-inverse); }
.lw-btn--warning:hover { background: var(--lw-warning-dark); border-color: var(--lw-warning-dark); }

.lw-btn--danger { background: var(--lw-danger); border-color: var(--lw-danger); color: var(--lw-text-inverse); }
.lw-btn--danger:hover { background: var(--lw-danger-dark); border-color: var(--lw-danger-dark); box-shadow: var(--lw-focus-ring-danger); }

.lw-btn--link {
    background: transparent;
    color: var(--lw-navy);
    border-color: transparent;
    box-shadow: none;
    padding: 0 4px;
    height: auto;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.lw-btn--link:hover { color: var(--lw-navy-hover); background: transparent; transform: none; box-shadow: none; }

/* Button sizes */
.lw-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--lw-radius-sm); }
.lw-btn--lg { height: 48px; padding: 0 22px; font-size: 15px; border-radius: var(--lw-radius-md); }
.lw-btn--xl { height: 56px; padding: 0 28px; font-size: 16px; border-radius: var(--lw-radius-md); }

/* Icon-only button */
.lw-btn--icon { width: 40px; padding: 0; }
.lw-btn--icon.lw-btn--sm { width: 32px; }
.lw-btn--icon.lw-btn--lg { width: 48px; }

/* Full-width */
.lw-btn--block { width: 100%; }

/* ── SURFACES: panel, card ─────────────────────────────────────────── */

.lw-panel {
    background: var(--lw-surface);
    border-radius: var(--lw-radius-md);
    padding: var(--lw-space-6);
    box-shadow: var(--lw-shadow-md);
    margin-bottom: var(--lw-space-6);
}
.lw-panel > h2,
.lw-panel > .lw-panel-title {
    margin: 0 0 var(--lw-space-5);
    font-size: var(--lw-text-xl);
    font-weight: var(--lw-weight-semibold);
    color: var(--lw-navy);
}

.lw-card {
    background: var(--lw-surface);
    border-radius: var(--lw-radius-md);
    border: 1px solid var(--lw-border);
    overflow: hidden;
    transition: var(--lw-transition-fast);
}
.lw-card--hover { cursor: pointer; }
.lw-card--hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--lw-shadow-md);
    border-color: var(--lw-border-strong);
}
.lw-card-header {
    padding: var(--lw-space-4) var(--lw-space-6);
    border-bottom: 1px solid var(--lw-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lw-space-3);
    background: var(--lw-surface-2);
}
.lw-card-title {
    margin: 0;
    font-size: var(--lw-text-base);
    font-weight: var(--lw-weight-semibold);
    color: var(--lw-navy);
    display: flex;
    align-items: center;
    gap: var(--lw-space-2);
}
.lw-card-title i { color: var(--lw-orange); }
.lw-card-body { padding: var(--lw-space-6); }
.lw-card-footer {
    padding: var(--lw-space-3) var(--lw-space-6);
    border-top: 1px solid var(--lw-border);
    background: var(--lw-surface-2);
    display: flex;
    justify-content: flex-end;
    gap: var(--lw-space-3);
}

/* ── PAGE HEADER ───────────────────────────────────────────────────── */

.lw-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lw-space-4);
    margin-bottom: var(--lw-space-6);
    flex-wrap: wrap;
}
.lw-page-title {
    margin: 0;
    font-size: var(--lw-text-2xl);
    font-weight: var(--lw-weight-bold);
    color: var(--lw-navy);
    display: inline-flex;
    align-items: center;
    gap: var(--lw-space-3);
    letter-spacing: -0.3px;
}
.lw-page-title i { color: var(--lw-orange); }
.lw-page-subtitle {
    margin: var(--lw-space-1) 0 0;
    font-size: var(--lw-text-sm);
    color: var(--lw-text-secondary);
    font-weight: var(--lw-weight-normal);
}
.lw-page-actions { display: flex; gap: var(--lw-space-2); flex-wrap: wrap; }

/* ── HERO ──────────────────────────────────────────────────────────── */

.lw-hero {
    background: linear-gradient(135deg, var(--lw-navy) 0%, var(--lw-navy-light) 100%);
    color: var(--lw-text-inverse);
    padding: var(--lw-space-8) var(--lw-space-6);
    border-radius: var(--lw-radius-lg);
    margin-bottom: var(--lw-space-6);
    position: relative;
    overflow: hidden;
}
.lw-hero--orange { background: linear-gradient(135deg, var(--lw-orange) 0%, var(--lw-orange-light) 100%); }
.lw-hero--grey   { background: linear-gradient(135deg, var(--lw-gray-700) 0%, var(--lw-gray-500) 100%); }
.lw-hero--purple { background: linear-gradient(135deg, var(--lw-navy-dark) 0%, var(--lw-navy) 50%, #3D2B7F 100%); }

.lw-hero-title {
    margin: 0;
    font-size: var(--lw-text-3xl);
    font-weight: var(--lw-weight-bold);
    color: var(--lw-text-inverse);
    letter-spacing: -0.4px;
}
.lw-hero-subtitle {
    margin: var(--lw-space-2) 0 0;
    font-size: var(--lw-text-base);
    color: rgba(255,255,255,0.85);
    max-width: 640px;
}
.lw-hero-stats {
    display: flex;
    gap: var(--lw-space-8);
    margin-top: var(--lw-space-6);
    flex-wrap: wrap;
}
.lw-hero-stat-value {
    font-size: var(--lw-text-3xl);
    font-weight: var(--lw-weight-bold);
    color: var(--lw-text-inverse);
    line-height: 1;
    display: block;
}
.lw-hero-stat-label {
    font-size: var(--lw-text-xs);
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: var(--lw-space-1);
    display: block;
}

/* ── STAT CARD ─────────────────────────────────────────────────────── */

.lw-stat {
    background: var(--lw-surface);
    border-radius: var(--lw-radius-md);
    padding: var(--lw-space-5);
    border: 1px solid var(--lw-border);
    display: flex;
    align-items: center;
    gap: var(--lw-space-4);
    transition: var(--lw-transition-fast);
}
.lw-stat--hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--lw-shadow-md);
    border-color: var(--lw-border-strong);
}
.lw-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--lw-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,140,0,0.12);
    color: var(--lw-orange);
    font-size: 20px;
    flex-shrink: 0;
}
.lw-stat-icon--navy    { background: rgba(26,20,100,0.10);  color: var(--lw-navy); }
.lw-stat-icon--success { background: rgba(16,185,129,0.12); color: var(--lw-success); }
.lw-stat-icon--warning { background: rgba(245,158,11,0.12); color: var(--lw-warning); }
.lw-stat-icon--danger  { background: rgba(239,68,68,0.12);  color: var(--lw-danger); }
.lw-stat-icon--info    { background: rgba(59,130,246,0.12); color: var(--lw-info); }
.lw-stat-body { flex: 1; min-width: 0; }
.lw-stat-value {
    font-size: var(--lw-text-2xl);
    font-weight: var(--lw-weight-bold);
    color: var(--lw-text);
    line-height: 1.1;
    letter-spacing: -0.3px;
}
.lw-stat-label {
    font-size: var(--lw-text-xs);
    font-weight: var(--lw-weight-medium);
    color: var(--lw-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: var(--lw-space-1);
}
.lw-stat-trend {
    font-size: var(--lw-text-xs);
    font-weight: var(--lw-weight-semibold);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--lw-radius-full);
    margin-top: var(--lw-space-2);
}
.lw-stat-trend--up   { background: var(--lw-success-light); color: var(--lw-success-dark); }
.lw-stat-trend--down { background: var(--lw-danger-light); color: var(--lw-danger-dark); }
.lw-stat-trend--flat { background: var(--lw-gray-100); color: var(--lw-text-secondary); }

/* ── BADGE ─────────────────────────────────────────────────────────── */

.lw-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--lw-radius-full);
    font-size: var(--lw-text-xs);
    font-weight: var(--lw-weight-semibold);
    line-height: 1.4;
    letter-spacing: 0.2px;
    white-space: nowrap;
    background: var(--lw-gray-100);
    color: var(--lw-gray-700);
}
.lw-badge--solid { color: var(--lw-text-inverse); }
.lw-badge--navy, .lw-badge--primary { background: var(--lw-navy); color: var(--lw-text-inverse); }
.lw-badge--orange, .lw-badge--accent { background: var(--lw-orange); color: var(--lw-text-inverse); }
.lw-badge--success-soft { background: var(--lw-success-light); color: var(--lw-success-dark); }
.lw-badge--warning-soft { background: var(--lw-warning-light); color: var(--lw-warning-dark); }
.lw-badge--danger-soft  { background: var(--lw-danger-light);  color: var(--lw-danger-dark);  }
.lw-badge--info-soft    { background: var(--lw-info-light);    color: var(--lw-info-dark);    }
.lw-badge--success { background: var(--lw-success); color: var(--lw-text-inverse); }
.lw-badge--warning { background: var(--lw-warning); color: var(--lw-text-inverse); }
.lw-badge--danger  { background: var(--lw-danger);  color: var(--lw-text-inverse); }
.lw-badge--info    { background: var(--lw-info);    color: var(--lw-text-inverse); }
.lw-badge--outline {
    background: transparent;
    border: 1px solid currentColor;
}

.lw-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

/* ── CHIP (removable tag) ──────────────────────────────────────────── */

.lw-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    border-radius: var(--lw-radius-full);
    background: var(--lw-gray-100);
    color: var(--lw-text);
    font-size: var(--lw-text-sm);
    font-weight: var(--lw-weight-medium);
    border: 1px solid transparent;
    transition: var(--lw-transition-fast);
}
.lw-chip--navy { background: rgba(26,20,100,0.08); color: var(--lw-navy); }
.lw-chip--orange { background: rgba(255,140,0,0.12); color: var(--lw-orange-dark); }
.lw-chip:hover { background: var(--lw-surface-2); }
.lw-chip-remove {
    width: 20px; height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--lw-text-secondary);
    border: none;
    cursor: pointer;
    transition: var(--lw-transition-fast);
    font-size: 10px;
}
.lw-chip-remove:hover { background: var(--lw-danger-light); color: var(--lw-danger-dark); }

/* ── TABLE ─────────────────────────────────────────────────────────── */

.lw-table-wrap {
    background: var(--lw-surface);
    border-radius: var(--lw-radius-md);
    border: 1px solid var(--lw-border);
    overflow: hidden;
    overflow-x: auto;
}

.lw-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--lw-text-sm);
    color: var(--lw-text);
}
.lw-table thead th {
    background: var(--lw-surface-2);
    color: var(--lw-text-secondary);
    font-weight: var(--lw-weight-semibold);
    font-size: var(--lw-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--lw-space-3) var(--lw-space-4);
    text-align: left;
    border-bottom: 1px solid var(--lw-border);
    white-space: nowrap;
}
.lw-table tbody td {
    padding: var(--lw-space-3) var(--lw-space-4);
    border-bottom: 1px solid var(--lw-border);
    vertical-align: middle;
}
.lw-table tbody tr:last-child td { border-bottom: none; }
.lw-table tbody tr:hover { background: var(--lw-surface-2); }
.lw-table tbody tr.is-selected { background: rgba(255,140,0,0.08); }
.lw-table--striped tbody tr:nth-child(even) { background: var(--lw-gray-50); }
.lw-table--striped tbody tr:nth-child(even):hover { background: var(--lw-surface-2); }
.lw-table--compact thead th,
.lw-table--compact tbody td { padding: var(--lw-space-2) var(--lw-space-3); }

.lw-table-align-end { text-align: right; }
.lw-table-align-center { text-align: center; }

/* ── FORMS ─────────────────────────────────────────────────────────── */

.lw-field {
    display: flex;
    flex-direction: column;
    gap: var(--lw-space-2);
    margin-bottom: var(--lw-space-4);
}
.lw-label {
    font-size: var(--lw-text-sm);
    font-weight: var(--lw-weight-medium);
    color: var(--lw-text);
}
.lw-label--req::after {
    content: ' *';
    color: var(--lw-danger);
    font-weight: var(--lw-weight-bold);
}
.lw-hint {
    font-size: var(--lw-text-xs);
    color: var(--lw-text-secondary);
}
.lw-error {
    font-size: var(--lw-text-xs);
    color: var(--lw-danger);
    display: flex;
    align-items: center;
    gap: 4px;
}

.lw-input,
.lw-select,
.lw-textarea {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--lw-border-strong);
    border-radius: var(--lw-radius);
    background: var(--lw-surface);
    color: var(--lw-text);
    font-family: var(--lw-font-sans);
    font-size: var(--lw-text-sm);
    transition: var(--lw-transition-fast);
    -webkit-appearance: none;
    appearance: none;
}
.lw-textarea { height: auto; padding: 10px 12px; min-height: 80px; resize: vertical; line-height: 1.5; }
.lw-input::placeholder,
.lw-textarea::placeholder { color: var(--lw-text-muted); }

.lw-input:hover,
.lw-select:hover,
.lw-textarea:hover { border-color: var(--lw-gray-400); }

.lw-input:focus,
.lw-select:focus,
.lw-textarea:focus {
    outline: none;
    border-color: var(--lw-navy);
    box-shadow: var(--lw-focus-ring);
}

.lw-input:disabled,
.lw-select:disabled,
.lw-textarea:disabled {
    background: var(--lw-gray-50);
    color: var(--lw-text-muted);
    cursor: not-allowed;
}

.lw-input--error,
.lw-select--error,
.lw-textarea--error { border-color: var(--lw-danger); }
.lw-input--error:focus,
.lw-select--error:focus,
.lw-textarea--error:focus { box-shadow: var(--lw-focus-ring-danger); }

/* Select chevron */
.lw-select {
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}

/* Input with leading icon */
.lw-input-group { position: relative; display: flex; align-items: stretch; }
.lw-input-group > .lw-input { padding-left: 38px; }
.lw-input-group-icon {
    position: absolute;
    left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--lw-text-muted);
    font-size: 14px;
    pointer-events: none;
}

/* Checkbox + radio */
.lw-check {
    display: inline-flex;
    align-items: center;
    gap: var(--lw-space-2);
    cursor: pointer;
    font-size: var(--lw-text-sm);
    color: var(--lw-text);
}
.lw-check input[type="checkbox"],
.lw-check input[type="radio"] {
    width: 16px; height: 16px;
    accent-color: var(--lw-orange);
    cursor: pointer;
}

/* ── ALERTS ────────────────────────────────────────────────────────── */

.lw-alert {
    display: flex;
    gap: var(--lw-space-3);
    align-items: flex-start;
    padding: var(--lw-space-3) var(--lw-space-4);
    border-radius: var(--lw-radius);
    border-left: 4px solid var(--lw-info);
    background: var(--lw-info-light);
    color: var(--lw-info-dark);
    font-size: var(--lw-text-sm);
    margin-bottom: var(--lw-space-4);
}
.lw-alert-icon { font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.lw-alert-body { flex: 1; min-width: 0; }
.lw-alert-title { font-weight: var(--lw-weight-semibold); margin: 0 0 var(--lw-space-1); font-size: var(--lw-text-sm); }
.lw-alert-body p:last-child { margin-bottom: 0; }

.lw-alert--success { border-left-color: var(--lw-success); background: var(--lw-success-light); color: var(--lw-success-dark); }
.lw-alert--warning { border-left-color: var(--lw-warning); background: var(--lw-warning-light); color: var(--lw-warning-dark); }
.lw-alert--danger  { border-left-color: var(--lw-danger);  background: var(--lw-danger-light);  color: var(--lw-danger-dark); }

/* ── EMPTY STATE ───────────────────────────────────────────────────── */

.lw-empty {
    text-align: center;
    padding: var(--lw-space-12) var(--lw-space-6);
    color: var(--lw-text-secondary);
}
.lw-empty-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--lw-surface-2);
    color: var(--lw-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto var(--lw-space-4);
}
.lw-empty-title {
    margin: 0 0 var(--lw-space-2);
    font-size: var(--lw-text-lg);
    font-weight: var(--lw-weight-semibold);
    color: var(--lw-text);
}
.lw-empty-desc {
    margin: 0 auto;
    max-width: 440px;
    font-size: var(--lw-text-sm);
    color: var(--lw-text-secondary);
}
.lw-empty-actions { margin-top: var(--lw-space-5); display: inline-flex; gap: var(--lw-space-2); }

/* ── DIVIDER ───────────────────────────────────────────────────────── */

.lw-divider {
    border: none;
    border-top: 1px solid var(--lw-border);
    margin: var(--lw-space-6) 0;
}
.lw-divider--compact { margin: var(--lw-space-3) 0; }

/* ── GRID HELPERS ──────────────────────────────────────────────────── */

.lw-grid { display: grid; gap: var(--lw-space-6); }
.lw-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lw-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lw-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lw-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lw-grid-auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

@media (max-width: 1024px) {
    .lw-grid-4, .lw-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lw-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .lw-grid-2, .lw-grid-3, .lw-grid-4, .lw-grid-5 { grid-template-columns: 1fr; }
}

/* ── CONTAINER ─────────────────────────────────────────────────────── */

.lw-container {
    width: 100%;
    max-width: var(--lw-content-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--lw-space-6);
    padding-right: var(--lw-space-6);
}
.lw-container--wide { max-width: var(--lw-content-wide); }

@media (max-width: 640px) {
    .lw-container { padding-left: var(--lw-space-4); padding-right: var(--lw-space-4); }
}

/* ── TOAST (floating notifications) ────────────────────────────────── */

.lw-toast-dock {
    position: fixed;
    bottom: var(--lw-space-5);
    right: var(--lw-space-5);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--lw-space-2);
    max-width: 360px;
    pointer-events: none;
}
.lw-toast {
    background: var(--lw-surface);
    border-radius: var(--lw-radius-md);
    border: 1px solid var(--lw-border);
    box-shadow: var(--lw-shadow-lg);
    padding: var(--lw-space-3) var(--lw-space-4);
    display: flex;
    gap: var(--lw-space-3);
    align-items: flex-start;
    pointer-events: auto;
    animation: lw-toast-in 260ms var(--lw-ease-spring);
    border-left: 4px solid var(--lw-info);
}
.lw-toast--success { border-left-color: var(--lw-success); }
.lw-toast--warning { border-left-color: var(--lw-warning); }
.lw-toast--danger  { border-left-color: var(--lw-danger); }
.lw-toast-icon { font-size: 16px; flex-shrink: 0; margin-top: 2px; color: var(--lw-info); }
.lw-toast--success .lw-toast-icon { color: var(--lw-success); }
.lw-toast--warning .lw-toast-icon { color: var(--lw-warning); }
.lw-toast--danger  .lw-toast-icon { color: var(--lw-danger); }
.lw-toast-body { flex: 1; min-width: 0; font-size: var(--lw-text-sm); color: var(--lw-text); }
.lw-toast-title { font-weight: var(--lw-weight-semibold); margin: 0 0 2px; }

@keyframes lw-toast-in {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── UTILITIES (minimal set) ───────────────────────────────────────── */

.lw-flex       { display: flex; }
.lw-flex-col   { display: flex; flex-direction: column; }
.lw-items-center { align-items: center; }
.lw-justify-between { justify-content: space-between; }
.lw-gap-1 { gap: var(--lw-space-1); }
.lw-gap-2 { gap: var(--lw-space-2); }
.lw-gap-3 { gap: var(--lw-space-3); }
.lw-gap-4 { gap: var(--lw-space-4); }

.lw-text-muted  { color: var(--lw-text-secondary); }
.lw-text-xs     { font-size: var(--lw-text-xs); }
.lw-text-sm     { font-size: var(--lw-text-sm); }
.lw-text-right  { text-align: right; }
.lw-text-center { text-align: center; }
.lw-fw-bold     { font-weight: var(--lw-weight-bold); }
.lw-fw-semi     { font-weight: var(--lw-weight-semibold); }

.lw-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}