/**
 * Pipii Design System v2 — Unified Design Language
 *
 * Layers:
 *   1. Design Tokens (colors, spacing, typography, shadows, radii, animations)
 *   2. Component Primitives (buttons, cards, forms, tables, chips, panels)
 *   3. Micro-interactions & Glassmorphism
 *   4. Bridge aliases for legacy class compatibility
 */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
    /* ── Surface / Background ── */
    --pipii-bg-primary:        var(--bg-primary, #060607);
    --pipii-bg-secondary:      var(--bg-secondary, #0b0b0e);
    --pipii-bg-card:           var(--bg-card, #101014);
    --pipii-bg-elevated:       var(--bg-elevated, #17171d);
    --pipii-bg-hover:          var(--bg-hover, #1e1e26);

    /* ── Glass surfaces ── */
    --pipii-glass-bg:          rgba(255, 255, 255, 0.025);
    --pipii-glass-bg-hover:    rgba(255, 255, 255, 0.045);
    --pipii-glass-border:      rgba(255, 255, 255, 0.055);
    --pipii-glass-border-hover:rgba(255, 255, 255, 0.10);
    --pipii-glass-blur:        16px;
    --pipii-glass-bg-strong:   rgba(255, 255, 255, 0.06);

    /* ── Borders ── */
    --pipii-border:            var(--bd-border-panel, var(--border-subtle, rgba(255,255,255,0.055)));
    --pipii-border-default:    var(--border-default, rgba(255,255,255,0.095));
    --pipii-border-strong:     var(--border-strong, rgba(255,255,255,0.14));
    --pipii-divider:           var(--bd-divider, rgba(255,255,255,0.06));

    /* ── Accent (Mint/Teal) ── */
    --pipii-accent:            var(--accent-primary, #5fffd4);
    --pipii-accent-hover:      var(--accent-hover, #9dffeb);
    --pipii-accent-muted:      var(--accent-subtle, rgba(0,255,178,0.09));
    --pipii-accent-glow:       var(--accent-glow, rgba(0,255,178,0.18));
    --pipii-accent-cyan:       var(--accent-cyan, #00e6b8);
    --pipii-accent-50:         rgba(95, 255, 212, 0.05);
    --pipii-accent-100:        rgba(95, 255, 212, 0.10);
    --pipii-accent-200:        rgba(95, 255, 212, 0.20);
    --pipii-accent-300:        rgba(95, 255, 212, 0.30);
    --pipii-accent-400:        rgba(95, 255, 212, 0.40);
    --pipii-accent-500:        #5fffd4;
    --pipii-accent-600:        #3de6b8;
    --pipii-accent-700:        #1dcc9c;
    --pipii-accent-800:        #0fb380;
    --pipii-accent-900:        #089964;

    /* ── Brand Blue (Advertiser CTA) ── */
    --pipii-brand-blue:        #3b82f6;
    --pipii-brand-blue-hover:  #60a5fa;
    --pipii-brand-blue-muted:  rgba(59,130,246,0.12);
    --pipii-brand-blue-glow:   rgba(59,130,246,0.25);
    --pipii-brand-blue-600:    #2563eb;
    --pipii-brand-blue-700:    #1d4ed8;

    /* ── Semantic Colors ── */
    --pipii-success:           var(--success-primary, #3dd4a4);
    --pipii-success-muted:     var(--success-subtle, rgba(61,212,164,0.1));
    --pipii-success-glow:      rgba(61,212,164,0.18);
    --pipii-warning:           var(--warning-primary, #e8c26a);
    --pipii-warning-muted:     var(--warning-subtle, rgba(232,194,106,0.1));
    --pipii-danger:            var(--danger-primary, #f09393);
    --pipii-danger-muted:      var(--danger-subtle, rgba(240,147,147,0.1));
    --pipii-danger-glow:       rgba(240,147,147,0.15);

    /* ── Text ── */
    --pipii-text:              var(--text-primary, #ececf1);
    --pipii-text-secondary:    var(--text-secondary, #9595a3);
    --pipii-text-muted:        var(--text-muted, #63636f);
    --pipii-text-inverse:      var(--text-inverse, #060607);
    --pipii-link:              var(--bd-link, #93c5fd);
    --pipii-link-hover:        var(--bd-link-hover, #bfdbfe);

    /* ── Border Radii ── */
    --pipii-radius-xs:         4px;
    --pipii-radius-sm:         8px;
    --pipii-radius-md:         12px;
    --pipii-radius-lg:         16px;
    --pipii-radius-xl:         20px;
    --pipii-radius-full:       9999px;

    /* ── Shadows ── */
    --pipii-shadow-xs:         0 1px 2px rgba(0,0,0,0.35);
    --pipii-shadow-sm:         0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.025);
    --pipii-shadow-md:         0 8px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.03);
    --pipii-shadow-lg:         0 16px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.035);
    --pipii-shadow-xl:         0 24px 64px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
    --pipii-shadow-glass:      0 8px 32px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.04);

    /* ── Glows ── */
    --pipii-glow-accent:       0 0 36px var(--pipii-accent-200);
    --pipii-glow-accent-sm:    0 0 16px var(--pipii-accent-100);
    --pipii-glow-blue:         0 0 32px var(--pipii-brand-blue-glow);
    --pipii-glow-success:      0 0 24px var(--pipii-success-glow);
    --pipii-glow-danger:       0 0 20px var(--pipii-danger-glow);

    /* ── Typography Scale ── */
    --pipii-font-sans:         "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --pipii-font-serif:        "Instrument Serif", Georgia, "Times New Roman", serif;
    --pipii-font-size-2xs:     0.625rem;   /* 10px */
    --pipii-font-size-xs:      0.72rem;    /* 11.5px */
    --pipii-font-size-sm:      0.8125rem;  /* 13px */
    --pipii-font-size-base:    0.875rem;   /* 14px */
    --pipii-font-size-md:      0.9375rem;  /* 15px */
    --pipii-font-size-lg:      1.05rem;    /* ~17px */
    --pipii-font-size-xl:      1.25rem;    /* 20px */
    --pipii-font-size-2xl:     1.5rem;     /* 24px */
    --pipii-font-size-3xl:     clamp(1.85rem, 3vw, 2.35rem);
    --pipii-font-size-4xl:     clamp(2.2rem, 4vw, 3rem);

    /* ── Line Heights ── */
    --pipii-leading-tight:     1.15;
    --pipii-leading-normal:    1.5;
    --pipii-leading-relaxed:   1.65;

    /* ── Letter Spacing ── */
    --pipii-tracking-tight:    -0.03em;
    --pipii-tracking-normal:   0.01em;
    --pipii-tracking-wide:     0.08em;
    --pipii-tracking-wider:    0.12em;

    /* ── Spacing Scale (4px base) ── */
    --pipii-space-0:           0;
    --pipii-space-1:           4px;
    --pipii-space-2:           8px;
    --pipii-space-3:           12px;
    --pipii-space-4:           16px;
    --pipii-space-5:           20px;
    --pipii-space-6:           24px;
    --pipii-space-7:           32px;
    --pipii-space-8:           40px;
    --pipii-space-9:           48px;
    --pipii-space-10:          56px;
    --pipii-space-11:          64px;
    --pipii-space-12:          80px;

    /* ── Easing ── */
    --pipii-ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
    --pipii-ease-out-back:     cubic-bezier(0.34, 1.56, 0.64, 1);
    --pipii-ease-in-out:       cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Transitions ── */
    --pipii-transition-fast:   150ms var(--pipii-ease-out-expo);
    --pipii-transition-base:   260ms var(--pipii-ease-out-expo);
    --pipii-transition-slow:   340ms var(--pipii-ease-out-expo);
    --pipii-transition-spring: 420ms var(--pipii-ease-out-expo);

    /* ── Focus Ring ── */
    --pipii-ring-focus:        0 0 0 3px var(--pipii-accent-300);

    /* ── Legacy aliases for backward compat ── */
    --pipii-radius:            var(--pipii-radius-md);
    --pipii-shadow-card:       var(--pipii-shadow-sm);
}

/* ==========================================================================
   2. GLOBAL RESET ENHANCEMENTS
   ========================================================================== */

/* Smooth page transitions via View Transitions API (progressive enhancement) */
@supports (view-transition-name: none) {
    .pipii-product-surface {
        view-transition-name: pipii-surface;
    }
}

/* Focus visible — unified across all interactive elements */
:focus-visible {
    outline: none;
    box-shadow: var(--pipii-ring-focus);
    border-radius: var(--pipii-radius-xs);
}

/* Skip link for accessibility */
.pipii-skip-link {
    position: absolute;
    top: -100%;
    left: var(--pipii-space-4);
    z-index: 9999;
    padding: var(--pipii-space-2) var(--pipii-space-4);
    background: var(--pipii-accent-500);
    color: var(--pipii-text-inverse);
    border-radius: var(--pipii-radius-sm);
    font-weight: 600;
    font-size: var(--pipii-font-size-sm);
    text-decoration: none;
    transition: top var(--pipii-transition-fast);
}
.pipii-skip-link:focus {
    top: var(--pipii-space-2);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   3. GLASSMORPHISM UTILITIES
   ========================================================================== */

.pipii-glass {
    background: var(--pipii-glass-bg);
    backdrop-filter: blur(var(--pipii-glass-blur));
    -webkit-backdrop-filter: blur(var(--pipii-glass-blur));
    border: 1px solid var(--pipii-glass-border);
    box-shadow: var(--pipii-shadow-glass);
}

.pipii-glass--strong {
    background: var(--pipii-glass-bg-strong);
    border-color: var(--pipii-glass-border-hover);
}

.pipii-glass--hover:hover {
    background: var(--pipii-glass-bg-hover);
    border-color: var(--pipii-glass-border-hover);
    box-shadow: var(--pipii-shadow-md);
}

/* ==========================================================================
   4. TYPOGRAPHY SYSTEM
   ========================================================================== */

.pipii-type-hero {
    font-size: var(--pipii-font-size-3xl);
    font-weight: 700;
    letter-spacing: var(--pipii-tracking-tight);
    line-height: var(--pipii-leading-tight);
    color: var(--pipii-text);
}

.pipii-type-title {
    font-size: var(--pipii-font-size-2xl);
    font-weight: 700;
    letter-spacing: var(--pipii-tracking-tight);
    line-height: 1.25;
    color: var(--pipii-text);
}

.pipii-type-section {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pipii-text);
}

.pipii-type-subsection {
    font-size: var(--pipii-font-size-lg);
    font-weight: 600;
    line-height: 1.35;
    color: var(--pipii-text);
}

.pipii-type-kpi {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--pipii-text);
}

.pipii-type-body {
    font-size: var(--pipii-font-size-md);
    line-height: var(--pipii-leading-relaxed);
    color: var(--pipii-text-secondary);
}

.pipii-type-meta {
    font-size: var(--pipii-font-size-sm);
    line-height: var(--pipii-leading-normal);
    color: var(--pipii-text-muted);
}

.pipii-type-caption {
    font-size: var(--pipii-font-size-xs);
    font-weight: 500;
    line-height: 1.45;
    color: var(--pipii-text-muted);
}

.pipii-type-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: var(--pipii-tracking-wider);
    text-transform: uppercase;
    color: var(--pipii-accent-500);
}

/* ==========================================================================
   5. BUTTON SYSTEM (Unified)
   ========================================================================== */

.pipii-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pipii-space-2);
    min-height: 40px;
    padding: 0 18px;
    border-radius: var(--pipii-radius-full);
    font-size: var(--pipii-font-size-base);
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition:
        background var(--pipii-transition-fast),
        color var(--pipii-transition-fast),
        border-color var(--pipii-transition-fast),
        box-shadow var(--pipii-transition-fast),
        transform var(--pipii-transition-fast),
        filter var(--pipii-transition-fast);
    position: relative;
    overflow: hidden;
}

/* Shine effect on hover */
.pipii-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--pipii-transition-fast);
    pointer-events: none;
}
.pipii-btn:hover::after {
    opacity: 1;
}

.pipii-btn:focus-visible {
    outline: none;
    box-shadow: var(--pipii-ring-focus);
}

/* ── Primary (Mint gradient) ── */
.pipii-btn--primary {
    color: var(--pipii-text-inverse);
    background: linear-gradient(135deg, #7dffe0 0%, #2ee6a0 42%, #00c994 100%);
    border-color: var(--pipii-accent-300);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.15) inset,
        0 4px 16px var(--pipii-accent-200);
}

.pipii-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.20) inset,
        0 8px 28px var(--pipii-accent-200);
}

.pipii-btn--primary:active {
    transform: translateY(0);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.10) inset,
        0 2px 8px var(--pipii-accent-100);
}

/* ── Brand Blue (Advertiser CTA) ── */
.pipii-btn--brand {
    color: #fff;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
    border-color: rgba(59,130,246,0.45);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.12) inset,
        0 4px 20px var(--pipii-brand-blue-glow);
}

.pipii-btn--brand:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.16) inset,
        0 8px 32px var(--pipii-brand-blue-glow);
}

.pipii-btn--brand:active {
    transform: translateY(0);
}

/* ── Secondary (Glass) ── */
.pipii-btn--secondary {
    color: var(--pipii-text);
    background: var(--pipii-glass-bg-strong);
    border-color: var(--pipii-glass-border-hover);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pipii-btn--secondary:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.16);
    transform: translateY(-1px);
}

.pipii-btn--secondary:active {
    transform: translateY(0);
}

/* ── Ghost ── */
.pipii-btn--ghost {
    color: var(--pipii-text-secondary);
    background: transparent;
    border-color: var(--pipii-glass-border);
}

.pipii-btn--ghost:hover {
    color: var(--pipii-text);
    background: var(--pipii-glass-bg);
    border-color: var(--pipii-glass-border-hover);
}

/* ── Danger ── */
.pipii-btn--danger {
    color: #fff;
    background: rgba(240,147,147,0.18);
    border-color: rgba(240,147,147,0.35);
}

.pipii-btn--danger:hover {
    background: rgba(240,147,147,0.28);
    border-color: rgba(240,147,147,0.50);
    box-shadow: var(--pipii-glow-danger);
    transform: translateY(-1px);
}

.pipii-btn--danger:active {
    transform: translateY(0);
}

/* ── Sizes ── */
.pipii-btn--sm {
    min-height: 32px;
    padding: 0 12px;
    font-size: var(--pipii-font-size-xs);
    border-radius: var(--pipii-radius-sm);
}

.pipii-btn--lg {
    min-height: 48px;
    padding: 0 26px;
    font-size: var(--pipii-font-size-lg);
    font-weight: 700;
}

/* ── Block ── */
.pipii-btn--block {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

/* ── Icon-only ── */
.pipii-btn--icon {
    width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: var(--pipii-radius-full);
}
.pipii-btn--icon.pipii-btn--sm {
    width: 32px;
    min-height: 32px;
}

/* ── Disabled ── */
.pipii-btn:disabled,
.pipii-btn[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

/* ==========================================================================
   6. CARD / PANEL SYSTEM
   ========================================================================== */

.pipii-card {
    box-sizing: border-box;
    border-radius: var(--pipii-radius-md);
    border: 1px solid var(--pipii-glass-border);
    background: var(--pipii-bg-card);
    box-shadow: var(--pipii-shadow-sm);
    padding: var(--pipii-space-6) var(--pipii-space-5);
    transition:
        border-color var(--pipii-transition-base),
        box-shadow var(--pipii-transition-base),
        transform var(--pipii-transition-base);
}

.pipii-card:hover {
    border-color: var(--pipii-glass-border-hover);
}

/* ── Glass card ── */
.pipii-card--glass {
    background: var(--pipii-glass-bg);
    backdrop-filter: blur(var(--pipii-glass-blur));
    -webkit-backdrop-filter: blur(var(--pipii-glass-blur));
    border-color: var(--pipii-glass-border);
    box-shadow: var(--pipii-shadow-glass);
}
.pipii-card--glass:hover {
    background: var(--pipii-glass-bg-hover);
    border-color: var(--pipii-glass-border-hover);
    box-shadow: var(--pipii-shadow-md), var(--pipii-glow-accent-sm);
}

/* ── Elevated card ── */
.pipii-card--elevated {
    background: var(--pipii-bg-elevated);
    box-shadow: var(--pipii-shadow-md);
    border-color: var(--pipii-border-default);
}
.pipii-card--elevated:hover {
    box-shadow: var(--pipii-shadow-lg);
    border-color: var(--pipii-border-strong);
    transform: translateY(-2px);
}

/* ── Dense variant ── */
.pipii-card--dense {
    padding: var(--pipii-space-4);
}

/* ── Card header ── */
.pipii-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pipii-space-3);
    margin-bottom: var(--pipii-space-4);
    padding-bottom: var(--pipii-space-3);
    border-bottom: 1px solid var(--pipii-divider);
}

.pipii-card__title {
    font-size: var(--pipii-font-size-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pipii-text);
    margin: 0;
}

.pipii-card__subtitle {
    font-size: var(--pipii-font-size-xs);
    color: var(--pipii-text-muted);
    margin: 0;
}

/* ── Card body ── */
.pipii-card__body {
    color: var(--pipii-text-secondary);
    font-size: var(--pipii-font-size-base);
    line-height: var(--pipii-leading-relaxed);
}

/* ── Card footer / actions ── */
.pipii-card__actions {
    display: flex;
    align-items: center;
    gap: var(--pipii-space-2);
    margin-top: var(--pipii-space-4);
    padding-top: var(--pipii-space-3);
    border-top: 1px solid var(--pipii-divider);
}

/* ==========================================================================
   7. FORM SYSTEM
   ========================================================================== */

.pipii-form-group {
    margin-bottom: var(--pipii-space-5);
}

.pipii-form-group__label {
    display: block;
    margin-bottom: var(--pipii-space-1);
    font-size: var(--pipii-font-size-sm);
    font-weight: 600;
    color: var(--pipii-text);
    letter-spacing: var(--pipii-tracking-normal);
}

.pipii-form-group__hint {
    margin-top: var(--pipii-space-1);
    font-size: var(--pipii-font-size-2xs);
    color: var(--pipii-text-muted);
    line-height: 1.45;
}

.pipii-form-group__error {
    margin-top: var(--pipii-space-1);
    font-size: var(--pipii-font-size-2xs);
    color: var(--pipii-danger);
}

/* ── Input / Select / Textarea ── */
.pipii-input,
.pipii-select,
.pipii-textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: var(--pipii-font-size-base);
    font-family: inherit;
    color: var(--pipii-text);
    background: var(--pipii-bg-secondary);
    border: 1px solid var(--pipii-glass-border);
    border-radius: var(--pipii-radius-sm);
    transition:
        border-color var(--pipii-transition-fast),
        box-shadow var(--pipii-transition-fast),
        background var(--pipii-transition-fast);
    box-sizing: border-box;
    line-height: var(--pipii-leading-normal);
}

.pipii-input::placeholder,
.pipii-textarea::placeholder {
    color: var(--pipii-text-muted);
    opacity: 0.7;
}

.pipii-input:hover,
.pipii-select:hover,
.pipii-textarea:hover {
    border-color: var(--pipii-glass-border-hover);
}

.pipii-input:focus,
.pipii-select:focus,
.pipii-textarea:focus {
    outline: none;
    border-color: var(--pipii-accent-300);
    box-shadow:
        0 0 0 3px var(--pipii-accent-50),
        0 0 20px var(--pipii-accent-50);
    background: var(--pipii-bg-elevated);
}

.pipii-input--glass,
.pipii-select--glass,
.pipii-textarea--glass {
    background: var(--pipii-glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: var(--pipii-glass-border);
}

.pipii-textarea {
    min-height: 100px;
    resize: vertical;
}

/* ── Select ── */
.pipii-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='m1 1.5 5 5 5-5' stroke='%239595a3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

/* ── Form Card (container for forms) ── */
.pipii-form-card {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--pipii-space-7) var(--pipii-space-6);
    border-radius: var(--pipii-radius-lg);
    border: 1px solid var(--pipii-glass-border);
    background: var(--pipii-glass-bg);
    backdrop-filter: blur(var(--pipii-glass-blur));
    -webkit-backdrop-filter: blur(var(--pipii-glass-blur));
    box-shadow: var(--pipii-shadow-glass);
}

.pipii-form-card__title {
    font-size: var(--pipii-font-size-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pipii-text);
    margin-bottom: var(--pipii-space-2);
}

.pipii-form-card__desc {
    font-size: var(--pipii-font-size-base);
    color: var(--pipii-text-secondary);
    margin-bottom: var(--pipii-space-6);
    line-height: var(--pipii-leading-relaxed);
}

/* ── Form Row (grid) ── */
.pipii-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--pipii-space-4);
}

/* ── Form Actions ── */
.pipii-form-actions {
    display: flex;
    align-items: center;
    gap: var(--pipii-space-3);
    margin-top: var(--pipii-space-6);
    padding-top: var(--pipii-space-5);
    border-top: 1px solid var(--pipii-divider);
}

/* ── Checkbox / Radio ── */
.pipii-checkbox,
.pipii-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--pipii-space-2);
    font-size: var(--pipii-font-size-base);
    color: var(--pipii-text-secondary);
    cursor: pointer;
}

.pipii-checkbox input[type="checkbox"],
.pipii-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--pipii-accent-500);
    cursor: pointer;
}

/* ==========================================================================
   8. TABLE SYSTEM
   ========================================================================== */

.pipii-table-shell {
    margin-top: var(--pipii-space-2);
    border-radius: var(--pipii-radius-md);
    border: 1px solid var(--pipii-glass-border);
    background: var(--pipii-bg-card);
    overflow: auto;
    box-shadow: var(--pipii-shadow-xs);
}

.pipii-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--pipii-font-size-base);
    line-height: var(--pipii-leading-normal);
}

.pipii-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.pipii-table th {
    padding: 12px var(--pipii-space-4);
    text-align: left;
    font-size: var(--pipii-font-size-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--pipii-tracking-wide);
    color: var(--pipii-text-muted);
    background: var(--pipii-bg-elevated);
    border-bottom: 1px solid var(--pipii-divider);
    white-space: nowrap;
}

.pipii-table td {
    padding: 12px var(--pipii-space-4);
    border-bottom: 1px solid var(--pipii-divider);
    color: var(--pipii-text-secondary);
    vertical-align: middle;
}

.pipii-table tbody tr {
    transition: background var(--pipii-transition-fast);
}

.pipii-table tbody tr:hover {
    background: var(--pipii-glass-bg);
}

.pipii-table tbody tr:last-child td {
    border-bottom: none;
}

/* ── Table align utilities ── */
.pipii-table .pipii-table--right {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.pipii-table .pipii-table--center {
    text-align: center;
}

/* ── Composer: brand-desk-tablewrap + pipii-table-shell (no double border) ── */
.brand-desk-tablewrap.pipii-table-shell {
    border-color: var(--pipii-glass-border);
    background: var(--pipii-bg-card);
    border-radius: var(--pipii-radius-md);
    box-shadow: var(--pipii-shadow-xs);
}

/* ==========================================================================
   9. STATUS CHIPS & BADGES
   ========================================================================== */

.pipii-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border-radius: var(--pipii-radius-full);
    font-size: var(--pipii-font-size-xs);
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid var(--pipii-glass-border);
    background: var(--pipii-glass-bg);
    color: var(--pipii-text-secondary);
    white-space: nowrap;
    transition:
        background var(--pipii-transition-fast),
        border-color var(--pipii-transition-fast);
}

.pipii-status-chip::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.65;
    flex-shrink: 0;
}

.pipii-status-chip--success {
    border-color: rgba(61,212,164,0.35);
    background: var(--pipii-success-muted);
    color: var(--pipii-success);
}

.pipii-status-chip--warning {
    border-color: rgba(232,194,106,0.35);
    background: var(--pipii-warning-muted);
    color: var(--pipii-warning);
}

.pipii-status-chip--danger {
    border-color: rgba(240,147,147,0.35);
    background: var(--pipii-danger-muted);
    color: var(--pipii-danger);
}

.pipii-status-chip--info {
    border-color: rgba(147,197,253,0.35);
    background: var(--pipii-brand-blue-muted);
    color: var(--pipii-brand-blue-hover);
}

.pipii-status-chip--neutral {
    border-color: var(--pipii-glass-border-hover);
    background: var(--pipii-glass-bg);
    color: var(--pipii-text-muted);
}

/* ── Badge (notification count) ── */
.pipii-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--pipii-radius-full);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--pipii-text-inverse);
    background: var(--pipii-accent-500);
    line-height: 1;
}

.pipii-badge--danger {
    background: var(--pipii-danger);
}

/* ==========================================================================
   10. KPI & METRIC CARDS
   ========================================================================== */

.pipii-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--pipii-space-3);
}

.pipii-kpi-card {
    padding: var(--pipii-space-4) var(--pipii-space-5);
    border-radius: var(--pipii-radius-md);
    border: 1px solid var(--pipii-glass-border);
    background: var(--pipii-glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:
        border-color var(--pipii-transition-base),
        box-shadow var(--pipii-transition-base),
        transform var(--pipii-transition-base);
}

.pipii-kpi-card:hover {
    border-color: var(--pipii-glass-border-hover);
    box-shadow: var(--pipii-shadow-glass);
    transform: translateY(-1px);
}

.pipii-kpi-card__label {
    font-size: var(--pipii-font-size-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--pipii-tracking-wide);
    color: var(--pipii-text-muted);
    margin-bottom: var(--pipii-space-1);
}

.pipii-kpi-card__value {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--pipii-text);
    font-variant-numeric: tabular-nums;
}

.pipii-kpi-card__hint {
    margin-top: var(--pipii-space-1);
    font-size: var(--pipii-font-size-2xs);
    color: var(--pipii-text-muted);
}

/* ── KPI accent glow on hover ── */
.pipii-kpi-card--accent:hover {
    border-color: var(--pipii-accent-200);
    box-shadow: var(--pipii-shadow-glass), var(--pipii-glow-accent-sm);
}

/* ==========================================================================
   11. NAVIGATION ENHANCEMENTS
   ========================================================================== */

/* Enhanced sticky navbar glass effect */
.pipii-navbar-glass {
    background: rgba(6, 6, 7, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Nav pill links */
.pipii-nav-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: var(--pipii-font-size-xs);
    font-weight: 600;
    color: var(--pipii-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--pipii-radius-full);
    text-decoration: none;
    transition:
        background var(--pipii-transition-fast),
        color var(--pipii-transition-fast),
        border-color var(--pipii-transition-fast);
}

.pipii-nav-pill:hover {
    color: var(--pipii-text);
    background: var(--pipii-glass-bg);
}

.pipii-nav-pill--active,
.pipii-nav-pill[aria-current="page"] {
    color: var(--pipii-accent-500);
    background: var(--pipii-accent-50);
    border-color: var(--pipii-accent-200);
}

/* Active nav link with glow */
.pipii-nav-link-active {
    color: var(--pipii-accent-500) !important;
    background: var(--pipii-accent-50);
    box-shadow: 0 0 16px var(--pipii-accent-100);
}

/* ==========================================================================
   12. MODAL & OVERLAY
   ========================================================================== */

.pipii-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 280;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: pipii-fade-in 200ms var(--pipii-ease-out-expo);
}

.pipii-modal {
    width: 90%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    padding: var(--pipii-space-6);
    border-radius: var(--pipii-radius-lg);
    border: 1px solid var(--pipii-glass-border-hover);
    background: var(--pipii-bg-card);
    box-shadow: var(--pipii-shadow-xl), var(--pipii-glow-accent-sm);
    animation: pipii-scale-in 260ms var(--pipii-ease-out-back);
}

.pipii-modal__title {
    font-size: var(--pipii-font-size-lg);
    font-weight: 700;
    color: var(--pipii-text);
    margin-bottom: var(--pipii-space-3);
}

.pipii-modal__body {
    font-size: var(--pipii-font-size-base);
    color: var(--pipii-text-secondary);
    line-height: var(--pipii-leading-relaxed);
    margin-bottom: var(--pipii-space-5);
}

.pipii-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--pipii-space-2);
}

/* ==========================================================================
   13. TOAST / NOTIFICATION BANNER
   ========================================================================== */

.pipii-toast-container {
    position: fixed;
    top: 80px;
    right: var(--pipii-space-4);
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: var(--pipii-space-2);
    pointer-events: none;
    max-width: 420px;
    width: 100%;
}

.pipii-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--pipii-space-3);
    padding: var(--pipii-space-4) var(--pipii-space-5);
    border-radius: var(--pipii-radius-md);
    border: 1px solid var(--pipii-glass-border);
    background: var(--pipii-glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--pipii-shadow-lg);
    pointer-events: auto;
    animation: pipii-slide-in-right 300ms var(--pipii-ease-out-expo);
    transition:
        opacity var(--pipii-transition-base),
        transform var(--pipii-transition-base);
}

.pipii-toast--success {
    border-color: rgba(61,212,164,0.35);
    background: rgba(61,212,164,0.08);
}

.pipii-toast--error {
    border-color: rgba(240,147,147,0.35);
    background: rgba(240,147,147,0.08);
}

.pipii-toast--info {
    border-color: rgba(147,197,253,0.35);
    background: rgba(147,197,253,0.06);
}

.pipii-toast__icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.pipii-toast__body {
    flex: 1;
    min-width: 0;
}

.pipii-toast__title {
    font-size: var(--pipii-font-size-sm);
    font-weight: 700;
    color: var(--pipii-text);
    margin-bottom: 2px;
}

.pipii-toast__msg {
    font-size: var(--pipii-font-size-xs);
    color: var(--pipii-text-secondary);
    line-height: 1.45;
}

.pipii-toast__dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--pipii-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 2px;
    line-height: 1;
    border-radius: var(--pipii-radius-xs);
    transition: color var(--pipii-transition-fast);
}

.pipii-toast__dismiss:hover {
    color: var(--pipii-text);
}

.pipii-toast--dismissing {
    opacity: 0;
    transform: translateX(40px);
}

/* ==========================================================================
   14. SKELETON LOADING
   ========================================================================== */

.pipii-skeleton {
    background: linear-gradient(
        90deg,
        var(--pipii-glass-bg) 0%,
        rgba(255,255,255,0.04) 40%,
        var(--pipii-glass-bg) 80%
    );
    background-size: 200% 100%;
    animation: pipii-shimmer 1.8s ease-in-out infinite;
    border-radius: var(--pipii-radius-sm);
}

.pipii-skeleton--text {
    height: 14px;
    width: 100%;
}

.pipii-skeleton--text-sm {
    height: 12px;
    width: 60%;
}

.pipii-skeleton--title {
    height: 22px;
    width: 45%;
    border-radius: var(--pipii-radius-xs);
}

.pipii-skeleton--avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--pipii-radius-full);
}

.pipii-skeleton--card {
    height: 120px;
    width: 100%;
    border-radius: var(--pipii-radius-md);
}

.pipii-skeleton--btn {
    height: 40px;
    width: 100px;
    border-radius: var(--pipii-radius-full);
}

/* ==========================================================================
   15. ANIMATIONS / KEYFRAMES
   ========================================================================== */

@keyframes pipii-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pipii-fade-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pipii-scale-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pipii-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pipii-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes pipii-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

@keyframes pipii-badge-breathe {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--pipii-accent-200);
    }
    50% {
        box-shadow: 0 0 0 8px transparent;
    }
}

@keyframes pipii-glow-pulse {
    0%, 100% {
        box-shadow: var(--pipii-shadow-glass), 0 0 0 0 var(--pipii-accent-200);
    }
    50% {
        box-shadow: var(--pipii-shadow-md), 0 0 28px var(--pipii-accent-200);
    }
}

@keyframes pipii-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Page content entry animation */
main.main-content > * {
    animation: pipii-fade-up 420ms cubic-bezier(0.16,1,0.3,1) both;
}
main.main-content > *:nth-child(1) { animation-delay: 0ms; }
main.main-content > *:nth-child(2) { animation-delay: 50ms; }
main.main-content > *:nth-child(3) { animation-delay: 100ms; }
main.main-content > *:nth-child(4) { animation-delay: 150ms; }

/* ── Animation utilities ── */
.pipii-anim-fade-up {
    animation: pipii-fade-up 400ms var(--pipii-ease-out-expo) both;
}

.pipii-anim-fade-in {
    animation: pipii-fade-in 300ms var(--pipii-ease-out-expo) both;
}

.pipii-anim-scale-in {
    animation: pipii-scale-in 260ms var(--pipii-ease-out-back) both;
}

.pipii-anim-stagger > * {
    opacity: 0;
    animation: pipii-fade-up 400ms var(--pipii-ease-out-expo) forwards;
}

.pipii-anim-stagger > *:nth-child(1) { animation-delay: 0ms; }
.pipii-anim-stagger > *:nth-child(2) { animation-delay: 60ms; }
.pipii-anim-stagger > *:nth-child(3) { animation-delay: 120ms; }
.pipii-anim-stagger > *:nth-child(4) { animation-delay: 180ms; }
.pipii-anim-stagger > *:nth-child(5) { animation-delay: 240ms; }
.pipii-anim-stagger > *:nth-child(6) { animation-delay: 300ms; }
.pipii-anim-stagger > *:nth-child(7) { animation-delay: 360ms; }
.pipii-anim-stagger > *:nth-child(8) { animation-delay: 420ms; }

/* ── Reduced motion override ── */
@media (prefers-reduced-motion: reduce) {
    .pipii-anim-fade-up,
    .pipii-anim-fade-in,
    .pipii-anim-scale-in,
    .pipii-anim-stagger > *,
    main.main-content > * {
        animation: none;
        opacity: 1;
    }
    .pipii-skeleton {
        animation: none;
        background: var(--pipii-glass-bg);
    }
    .btn:hover,
    .v2-btn:hover,
    .pipii-btn:hover,
    .pipii-card:hover,
    .pipii-kpi-card:hover,
    .stat-card:hover {
        transform: none;
    }
}

/* ==========================================================================
   16. PROGRESS / LOADING BAR
   ========================================================================== */

.pipii-progress {
    width: 100%;
    height: 6px;
    background: var(--pipii-glass-bg);
    border-radius: var(--pipii-radius-full);
    overflow: hidden;
}

.pipii-progress__bar {
    height: 100%;
    border-radius: var(--pipii-radius-full);
    background: linear-gradient(90deg, var(--pipii-accent-500), var(--pipii-accent-700));
    transition: width var(--pipii-transition-spring);
    position: relative;
}

.pipii-progress__bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.25),
        transparent
    );
    animation: pipii-shimmer 2s ease-in-out infinite;
}

.pipii-progress--brand .pipii-progress__bar {
    background: linear-gradient(90deg, var(--pipii-brand-blue), var(--pipii-brand-blue-600));
}

/* ==========================================================================
   17. DIVIDER & SPACING UTILITIES
   ========================================================================== */

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

.pipii-divider--sm {
    margin: var(--pipii-space-3) 0;
}

.pipii-divider--lg {
    margin: var(--pipii-space-9) 0;
}

/* ── Spacing gap utilities ── */
.pipii-gap-1 { gap: var(--pipii-space-1); }
.pipii-gap-2 { gap: var(--pipii-space-2); }
.pipii-gap-3 { gap: var(--pipii-space-3); }
.pipii-gap-4 { gap: var(--pipii-space-4); }
.pipii-gap-5 { gap: var(--pipii-space-5); }
.pipii-gap-6 { gap: var(--pipii-space-6); }

/* ── Flex layout utilities ── */
.pipii-flex { display: flex; }
.pipii-flex-col { flex-direction: column; }
.pipii-flex-wrap { flex-wrap: wrap; }
.pipii-items-center { align-items: center; }
.pipii-items-start { align-items: flex-start; }
.pipii-justify-between { justify-content: space-between; }
.pipii-justify-center { justify-content: center; }
.pipii-justify-end { justify-content: flex-end; }
.pipii-flex-1 { flex: 1; }

/* ==========================================================================
   18. EMPTY STATE
   ========================================================================== */

.pipii-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--pipii-space-9) var(--pipii-space-5);
    text-align: center;
}

.pipii-empty-state__icon {
    font-size: 2rem;
    margin-bottom: var(--pipii-space-3);
    opacity: 0.5;
}

.pipii-empty-state__title {
    font-size: var(--pipii-font-size-lg);
    font-weight: 700;
    color: var(--pipii-text);
    margin-bottom: var(--pipii-space-2);
}

.pipii-empty-state__desc {
    font-size: var(--pipii-font-size-base);
    color: var(--pipii-text-muted);
    max-width: 36ch;
    line-height: var(--pipii-leading-relaxed);
    margin-bottom: var(--pipii-space-5);
}

/* ==========================================================================
   19. HERO SECTION (Marketing + In-app)
   ========================================================================== */

.pipii-hero {
    margin-bottom: var(--pipii-space-7);
    padding-bottom: var(--pipii-space-5);
    border-bottom: 1px solid var(--pipii-divider);
}

.pipii-hero__eyebrow {
    margin: 0 0 var(--pipii-space-2);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: var(--pipii-tracking-wider);
    text-transform: uppercase;
    color: var(--pipii-accent-500);
}

.pipii-hero__title {
    margin: 0 0 var(--pipii-space-3);
    font-size: var(--pipii-font-size-3xl);
    font-weight: 700;
    letter-spacing: var(--pipii-tracking-tight);
    line-height: var(--pipii-leading-tight);
    color: var(--pipii-text);
}

.pipii-hero__lead {
    margin: 0;
    max-width: 68ch;
    font-size: var(--pipii-font-size-lg);
    line-height: var(--pipii-leading-relaxed);
    color: var(--pipii-text-secondary);
}

.pipii-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pipii-space-3);
    margin-top: var(--pipii-space-5);
}

/* ==========================================================================
   20. PRODUCT SURFACE (Workspace Root)
   ========================================================================== */

.pipii-product-surface {
    color: var(--pipii-text);
}

/* ── Section shell ── */
.pipii-section-shell {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--pipii-space-6);
    padding-right: var(--pipii-space-6);
}

.pipii-section-shell--narrow {
    max-width: 720px;
}

.pipii-section-shell--wide {
    max-width: 1100px;
}

/* ==========================================================================
   21. MARKETING PAGE POLISH
   ========================================================================== */

.pipii-marketing {
    --pipii-hero-accent: var(--pipii-accent-500);
}

body.pipii-page--marketing .nav-cta-primary {
    box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
}

body.pipii-page--marketing .nav-cta-primary:hover {
    filter: brightness(1.06);
}

.pipii-marketing .v2-marketing-eyebrow,
.pipii-marketing .v2-marketing-h1,
.pipii-marketing .v2-marketing-lead {
    color: inherit;
}

.pipii-marketing .v2-marketing-col {
    border-color: var(--pipii-glass-border);
    background: var(--pipii-glass-bg);
}

/* ==========================================================================
   22. GLOBAL LEGACY RETROFIT — force old classes to look modern
   ========================================================================== */

/*
 * Strategy: Most PHP templates use plain old classes (.btn-primary, .v2-btn-primary,
 * .v2-dash-panel, .form-group input, etc.) WITHOUT the new pipii-* classes.
 * These global rules forcibly upgrade their appearance to the new design language.
 */

/* ── All buttons — universal upgrade ── */
.btn,
.v2-btn,
a.btn,
a.v2-btn,
button.btn,
button.v2-btn {
    border-radius: 999px !important;
    font-weight: 600;
    transition:
        background 0.18s cubic-bezier(0.16,1,0.3,1),
        color 0.18s cubic-bezier(0.16,1,0.3,1),
        border-color 0.18s cubic-bezier(0.16,1,0.3,1),
        box-shadow 0.18s cubic-bezier(0.16,1,0.3,1),
        transform 0.18s cubic-bezier(0.16,1,0.3,1),
        filter 0.18s cubic-bezier(0.16,1,0.3,1);
}

.btn:hover,
.v2-btn:hover {
    transform: translateY(-1px);
}

/* Primary buttons (green mint gradient) */
.btn-primary,
.v2-btn-primary,
a.btn-primary,
a.v2-btn-primary {
    color: var(--pipii-text-inverse, #060607) !important;
    background: linear-gradient(135deg, #7dffe0 0%, #2ee6a0 42%, #00c994 100%) !important;
    border: 1px solid rgba(0,255,178,0.30) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.15) inset,
        0 4px 16px rgba(0,255,178,0.18) !important;
}

.btn-primary:hover,
.v2-btn-primary:hover {
    box-shadow:
        0 1px 0 rgba(255,255,255,0.20) inset,
        0 8px 28px rgba(0,200,150,0.35) !important;
    filter: brightness(1.06);
}

/* Secondary / default buttons */
.btn-default,
.v2-btn-secondary,
a.btn-default,
a.v2-btn-secondary {
    color: var(--pipii-text, #ececf1) !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.btn-default:hover,
.v2-btn-secondary:hover {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.18) !important;
}

/* Ghost buttons */
.btn-ghost,
.v2-btn-ghost,
a.btn-ghost,
a.v2-btn-ghost {
    color: var(--pipii-text-secondary, #9595a3) !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
}

.btn-ghost:hover,
.v2-btn-ghost:hover {
    color: var(--pipii-text, #ececf1) !important;
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.14) !important;
}

/* Small buttons */
.btn-sm,
.v2-btn-sm {
    min-height: auto !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
}

/* Block buttons */
.btn-block,
.v2-btn-block {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
}

/* Danger buttons */
.btn-danger {
    background: rgba(240,147,147,0.18) !important;
    border-color: rgba(240,147,147,0.35) !important;
    color: #fecaca !important;
}

.btn-danger:hover {
    background: rgba(240,147,147,0.28) !important;
    box-shadow: 0 0 20px rgba(240,147,147,0.15) !important;
}

/* Outline buttons — glass upgrade */
	.btn-outline {
	    border-radius: 999px !important;
	    background: rgba(255,255,255,0.025) !important;
	    border: 1px solid rgba(255,255,255,0.10) !important;
	    color: var(--pipii-text-secondary, #9595a3) !important;
	    backdrop-filter: blur(8px) !important;
	    -webkit-backdrop-filter: blur(8px) !important;
	}

	.btn-outline:hover {
	    background: rgba(255,255,255,0.06) !important;
	    border-color: rgba(255,255,255,0.18) !important;
	    color: var(--pipii-text, #ececf1) !important;
	    box-shadow: 0 4px 18px rgba(0,0,0,0.2) !important;
	}

	/* Large buttons — modern sizing */
	.btn-lg {
	    padding: 14px 28px !important;
	    font-size: 16px !important;
	    border-radius: 999px !important;
	    font-weight: 700 !important;
	    min-height: 48px !important;
	}

	/* brand-desk-primary blue CTA — keep blue but modernize */
a.brand-desk-primary,
button.brand-desk-primary {
    border-radius: 14px !important;
    box-shadow: 0 4px 20px rgba(59,130,246,0.22) !important;
}
a.brand-desk-primary:hover,
button.brand-desk-primary:hover {
    box-shadow: 0 8px 32px rgba(59,130,246,0.32) !important;
}

/* ── All input / select / textarea — universal upgrade ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
input[type="tel"],
textarea,
select {
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    background: var(--pipii-bg-secondary, #0b0b0e) !important;
    color: var(--pipii-text, #ececf1) !important;
    transition:
        border-color 0.18s cubic-bezier(0.16,1,0.3,1),
        box-shadow 0.18s cubic-bezier(0.16,1,0.3,1),
        background 0.18s cubic-bezier(0.16,1,0.3,1) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: rgba(95,255,212,0.40) !important;
    box-shadow:
        0 0 0 3px rgba(95,255,212,0.06),
        0 0 20px rgba(95,255,212,0.06) !important;
    background: var(--pipii-bg-elevated, #17171d) !important;
}

input:hover,
textarea:hover,
select:hover {
    border-color: rgba(255,255,255,0.12) !important;
}

/* ── Form cards — glass upgrade ── */
.form-card {
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.02) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.28) !important;
}

/* ── All dash panels — glass upgrade ── */
.v2-dash-panel,
.os-os-panel {
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.02) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.25) !important;
    transition:
        border-color 0.26s cubic-bezier(0.16,1,0.3,1),
        box-shadow 0.26s cubic-bezier(0.16,1,0.3,1) !important;
}

.v2-dash-panel:hover,
.os-os-panel:hover {
    border-color: rgba(255,255,255,0.10) !important;
}

/* ── Tables — modern upgrade ── */
.brand-desk-table,
.os-data-table,
.table {
    border-radius: 12px !important;
    overflow: hidden !important;
}

.brand-desk-table th,
.os-data-table th,
.table th {
    background: var(--pipii-bg-elevated, #17171d) !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--pipii-text-muted, #63636f) !important;
}

.brand-desk-table tbody tr:hover,
.os-data-table tbody tr:hover,
.table tbody tr:hover {
    background: rgba(255,255,255,0.025) !important;
}

/* ── Status pills / badges — unified ── */
.v2-pill,
.os-stat-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 12px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    background: rgba(255,255,255,0.03) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

.v2-pill-live {
    border-color: rgba(61,212,164,0.35) !important;
    background: rgba(61,212,164,0.10) !important;
    color: #3dd4a4 !important;
}

/* ── Cards / stat cards — glass effect ── */
.stat-card,
.detail-card {
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.02) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.25) !important;
    transition:
        border-color 0.26s cubic-bezier(0.16,1,0.3,1),
        box-shadow 0.26s cubic-bezier(0.16,1,0.3,1),
        transform 0.26s cubic-bezier(0.16,1,0.3,1) !important;
}

.stat-card:hover {
    border-color: rgba(255,255,255,0.12) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important;
    transform: translateY(-2px) !important;
}

/* ── Hero sections — glass upgrade ── */
.brand-desk-hero {
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* ── Datalist / filter bars — glass ── */
.filter-form,
.brand-desk-strip {
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.015) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* ── Side rails — glass ── */
.brand-desk-rail {
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.015) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* ── Section links (view all) — accent color ── */
.v2-section-link {
    color: var(--pipii-accent-500, #5fffd4) !important;
    font-weight: 600;
    transition: color 0.15s ease;
}

.v2-section-link:hover {
    color: var(--pipii-accent-hover, #9dffeb) !important;
}

/* ==========================================================================
   22b. BRIDGE: DUAL-CLASS COMPATIBILITY (pipii-btn + old class on same element)
   ========================================================================== */

/* ── v2-btn + pipii-btn bridge (preserve existing markup) ── */
a.v2-btn-primary.pipii-btn--primary,
button.v2-btn-primary.pipii-btn--primary {
    color: var(--pipii-text-inverse);
    background: linear-gradient(165deg, #7dffe0 0%, #2ee6a0 42%, #00c994 100%);
    border-color: var(--pipii-accent-300);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.22) inset,
        0 8px 28px rgba(0,200,150,0.35);
}

a.v2-btn-primary.pipii-btn--primary:hover,
button.v2-btn-primary.pipii-btn--primary:hover {
    transform: translateY(-1px);
    filter: none;
    color: var(--pipii-text-inverse);
    background: linear-gradient(165deg, #a8ffec 0%, #4df0b8 42%, #12d4a8 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.26) inset,
        0 10px 32px rgba(0,220,170,0.42);
}

a.v2-btn-secondary.pipii-btn--secondary,
button.v2-btn-secondary.pipii-btn--secondary {
    color: var(--pipii-text);
    background: var(--pipii-bg-elevated);
    border-color: var(--pipii-border-default);
}

a.v2-btn-secondary.pipii-btn--secondary:hover,
button.v2-btn-secondary.pipii-btn--secondary:hover {
    filter: none;
    color: var(--pipii-text);
    background: var(--pipii-bg-hover);
    border-color: var(--pipii-border-strong);
    box-shadow: var(--pipii-shadow-xs);
    transform: translateY(-1px);
}

a.v2-btn-ghost.pipii-btn--ghost,
button.v2-btn-ghost.pipii-btn--ghost {
    color: var(--pipii-text-secondary);
    background: transparent;
    border-color: var(--pipii-border-default);
}

a.v2-btn-ghost.pipii-btn--ghost:hover,
button.v2-btn-ghost.pipii-btn--ghost:hover {
    filter: none;
    color: var(--pipii-text);
    background: var(--pipii-glass-bg);
    border-color: var(--pipii-border-strong);
}

a.v2-btn-sm.pipii-btn,
button.v2-btn-sm.pipii-btn {
    min-height: auto;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--pipii-radius-sm);
}

a.v2-btn-block.pipii-btn,
button.v2-btn-block.pipii-btn {
    display: flex;
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
}

/* v2 non-sm buttons — keep original sizing */
a.v2-btn.v2-btn-primary.pipii-btn--primary:not(.v2-btn-sm),
button.v2-btn.v2-btn-primary.pipii-btn--primary:not(.v2-btn-sm),
a.v2-btn.v2-btn-secondary.pipii-btn--secondary:not(.v2-btn-sm),
button.v2-btn.v2-btn-secondary.pipii-btn--secondary:not(.v2-btn-sm) {
    min-height: auto;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--pipii-radius-sm);
}

/* ── brand-desk-primary bridge (blue CTA) ── */
a.brand-desk-primary.pipii-btn--primary,
button.brand-desk-primary.pipii-btn--primary {
    min-height: 44px;
    padding: 0 22px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: var(--pipii-radius-md);
    color: #fff;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    border-color: rgba(59,130,246,0.45);
    box-shadow: 0 4px 20px var(--pipii-brand-blue-glow);
}

a.brand-desk-primary.pipii-btn--primary:hover,
button.brand-desk-primary.pipii-btn--primary:hover {
    filter: brightness(1.06);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 32px var(--pipii-brand-blue-glow);
}

/* brand-adv-dashboard hero secondary */
.brand-adv-dashboard .brand-adv-dash-hero__secondary.pipii-btn--secondary {
    min-height: 44px;
    padding: 0 18px;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: var(--pipii-radius-sm);
    color: var(--pipii-text);
    background: rgba(0,0,0,0.2);
    border-color: var(--pipii-glass-border-hover);
}

.brand-adv-dashboard .brand-adv-dash-hero__secondary.pipii-btn--secondary:hover {
    filter: none;
    color: #fff;
    background: var(--pipii-glass-bg-hover);
    border-color: rgba(255,255,255,0.32);
    transform: translateY(-1px);
}

/* ── Old .btn compatibility (keep working until migration) ── */
.btn.pipii-btn {
    border-radius: var(--pipii-radius-full);
}

.btn-primary.pipii-btn--primary {
    background: linear-gradient(135deg, #7dffe0 0%, #2ee6a0 42%, #00c994 100%);
}

.btn-default.pipii-btn--secondary {
    background: var(--pipii-bg-elevated);
    border-color: var(--pipii-border-default);
}

/* ── OS panel bridge ── */
.os-os-panel.pipii-card--glass {
    background: var(--pipii-glass-bg);
    backdrop-filter: blur(var(--pipii-glass-blur));
    -webkit-backdrop-filter: blur(var(--pipii-glass-blur));
}

/* ==========================================================================
   23. RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (max-width: 768px) {
    .pipii-card {
        padding: var(--pipii-space-4);
    }

    .pipii-form-card {
        padding: var(--pipii-space-5) var(--pipii-space-4);
        border-radius: var(--pipii-radius-md);
    }

    .pipii-hero__title {
        font-size: clamp(1.5rem, 5vw, 1.85rem);
    }

    .pipii-kpi-card__value {
        font-size: 1.35rem;
    }

    .pipii-section-shell {
        padding-left: var(--pipii-space-4);
        padding-right: var(--pipii-space-4);
    }
}

@media (max-width: 480px) {
    .pipii-form-row {
        grid-template-columns: 1fr;
    }

    .pipii-modal {
        width: 95%;
        padding: var(--pipii-space-5) var(--pipii-space-4);
    }

    .pipii-btn--lg {
        min-height: 44px;
        padding: 0 20px;
        font-size: var(--pipii-font-size-base);
    }
}