/* =========================================================
   Vira Design System v3.0 — Components (نسخه کامل + مقاوم‌سازی‌شده)
   ترکیب شده از: Vira Design System + iOS Glass Extension
   وابسته به: vira-tokens.css
   ========================================================= */

/* -----------------------------
   Reset & Base
   ----------------------------- */
.vira-tools-wrap *,
.vira-tools-wrap *::before,
.vira-tools-wrap *::after {
    box-sizing: border-box !important;
}

.vira-tools-wrap {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ==========================================
   BUTTONS (کاملاً مقاوم‌سازی شده)
   ========================================== */
.vira-tools-wrap .vira-btn,
.vira-tools-wrap a.vira-btn,
.vira-tools-wrap button.vira-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    border-radius: var(--vira-radius-md, 10px) !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    user-select: none !important;
    min-height: 38px !important;
    transition: background 0.2s ease, border-color 0.2s ease,
                color 0.2s ease, box-shadow 0.2s ease,
                transform 0.15s ease, opacity 0.2s ease !important;
    position: relative !important;
    overflow: hidden !important;
    letter-spacing: 0.01em !important;
    box-shadow: none !important;
    background: var(--vira-surface, #ffffff);
    color: var(--vira-text, #1e293b);
}

.vira-tools-wrap .vira-btn:active:not(:disabled) {
    transform: scale(0.97) !important;
}

.vira-tools-wrap .vira-btn:disabled,
.vira-tools-wrap .vira-btn[disabled] {
    opacity: .5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* Ripple Effect */
.vira-tools-wrap .vira-btn::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10.01%) !important;
    transform: scale(10) !important;
    opacity: 0 !important;
    transition: transform 0.5s, opacity 0.8s !important;
    pointer-events: none !important;
}
.vira-tools-wrap .vira-btn:active::after {
    transform: scale(0) !important;
    opacity: 0.3 !important;
    transition: 0s !important;
}

/* --- Primary --- */
.vira-tools-wrap .vira-btn-primary,
.vira-tools-wrap a.vira-btn-primary {
    background: var(--vira-primary, #3b82f6) !important;
    color: #ffffff !important;
    border-color: var(--vira-primary, #3b82f6) !important;
    box-shadow: var(--vira-shadow-sm, 0 2px 4px rgba(0,0,0,0.06)) !important;
}
.vira-tools-wrap .vira-btn-primary:hover,
.vira-tools-wrap .vira-btn-primary:focus,
.vira-tools-wrap a.vira-btn-primary:hover,
.vira-tools-wrap a.vira-btn-primary:focus {
    background: var(--vira-primary-hover, #2563eb) !important;
    color: #ffffff !important;
    border-color: var(--vira-primary-hover, #2563eb) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--vira-shadow-md, 0 8px 16px rgba(0,0,0,0.08)) !important;
    text-decoration: none !important;
}
.vira-tools-wrap .vira-btn-primary:active {
    background: var(--vira-primary-dark, #1d4ed8) !important;
    color: #ffffff !important;
    border-color: var(--vira-primary-dark, #1d4ed8) !important;
    transform: scale(0.97) !important;
}
.vira-tools-wrap .vira-btn-primary:disabled,
.vira-tools-wrap .vira-btn-primary[disabled] {
    background: var(--vira-primary, #3b82f6) !important;
    color: #ffffff !important;
    border-color: var(--vira-primary, #3b82f6) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* --- Secondary --- */
.vira-tools-wrap .vira-btn-secondary,
.vira-tools-wrap a.vira-btn-secondary {
    background: var(--vira-surface, #ffffff) !important;
    color: var(--vira-text, #1e293b) !important;
    border-color: var(--vira-border, #e5e7eb) !important;
    box-shadow: var(--vira-shadow-xs, 0 1px 2px rgba(0,0,0,0.05)) !important;
}
.vira-tools-wrap .vira-btn-secondary:hover,
.vira-tools-wrap .vira-btn-secondary:focus,
.vira-tools-wrap a.vira-btn-secondary:hover,
.vira-tools-wrap a.vira-btn-secondary:focus {
    background: var(--vira-surface-raised, #f8fafc) !important;
    color: var(--vira-text, #1e293b) !important;
    border-color: var(--vira-border-strong, #d1d5db) !important;
    box-shadow: var(--vira-shadow-sm, 0 2px 4px rgba(0,0,0,0.06)) !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}
.vira-tools-wrap .vira-btn-secondary:active {
    background: var(--vira-gray-200, #e5e7eb) !important;
    color: var(--vira-text, #1e293b) !important;
    border-color: var(--vira-border-strong, #d1d5db) !important;
    transform: scale(0.97) !important;
}
.vira-tools-wrap .vira-btn-secondary:disabled,
.vira-tools-wrap .vira-btn-secondary[disabled] {
    background: var(--vira-surface, #ffffff) !important;
    color: var(--vira-text-soft, #475569) !important;
    border-color: var(--vira-border, #e5e7eb) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* --- Danger --- */
.vira-tools-wrap .vira-btn-danger,
.vira-tools-wrap a.vira-btn-danger {
    background: var(--vira-danger, #ef4444) !important;
    color: #ffffff !important;
    border-color: var(--vira-danger, #ef4444) !important;
    box-shadow: var(--vira-shadow-sm, 0 2px 4px rgba(0,0,0,0.06)) !important;
}
.vira-tools-wrap .vira-btn-danger:hover,
.vira-tools-wrap .vira-btn-danger:focus,
.vira-tools-wrap a.vira-btn-danger:hover,
.vira-tools-wrap a.vira-btn-danger:focus {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--vira-shadow-md, 0 8px 16px rgba(0,0,0,0.08)) !important;
    text-decoration: none !important;
}
.vira-tools-wrap .vira-btn-danger:active {
    background: #b91c1c !important;
    color: #ffffff !important;
    border-color: #b91c1c !important;
    transform: scale(0.97) !important;
}
.vira-tools-wrap .vira-btn-danger:disabled,
.vira-tools-wrap .vira-btn-danger[disabled] {
    background: var(--vira-danger, #ef4444) !important;
    color: #ffffff !important;
    border-color: var(--vira-danger, #ef4444) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* --- Outline --- */
.vira-tools-wrap .vira-btn-outline,
.vira-tools-wrap a.vira-btn-outline {
    background: transparent !important;
    color: var(--vira-primary, #3b82f6) !important;
    border-color: var(--vira-primary, #3b82f6) !important;
    box-shadow: none !important;
}
.vira-tools-wrap .vira-btn-outline:hover,
.vira-tools-wrap .vira-btn-outline:focus,
.vira-tools-wrap a.vira-btn-outline:hover,
.vira-tools-wrap a.vira-btn-outline:focus {
    background: var(--vira-primary-50, #eff6ff) !important;
    color: var(--vira-primary, #3b82f6) !important;
    border-color: var(--vira-primary, #3b82f6) !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}
.vira-tools-wrap .vira-btn-outline:active {
    background: var(--vira-primary-100, #dbeafe) !important;
    color: var(--vira-primary, #3b82f6) !important;
    transform: scale(0.97) !important;
}
[data-theme="dark"] .vira-tools-wrap .vira-btn-outline {
    color: var(--vira-primary-light, #60a5fa) !important;
    border-color: rgba(59, 130, 246, .5) !important;
}
[data-theme="dark"] .vira-tools-wrap .vira-btn-outline:hover {
    background: rgba(59, 130, 246, .1) !important;
    color: var(--vira-primary-light, #60a5fa) !important;
}

/* --- Ghost --- */
.vira-tools-wrap .vira-btn-ghost,
.vira-tools-wrap a.vira-btn-ghost {
    background: transparent !important;
    color: var(--vira-text-soft, #475569) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.vira-tools-wrap .vira-btn-ghost:hover,
.vira-tools-wrap .vira-btn-ghost:focus,
.vira-tools-wrap a.vira-btn-ghost:hover,
.vira-tools-wrap a.vira-btn-ghost:focus {
    background: var(--vira-gray-100, #f3f4f6) !important;
    color: var(--vira-text, #1e293b) !important;
    border-color: transparent !important;
    text-decoration: none !important;
}
[data-theme="dark"] .vira-tools-wrap .vira-btn-ghost:hover {
    background: rgba(255, 255, 255, .06) !important;
    color: var(--vira-text, #f1f5f9) !important;
}

/* --- Gradient --- */
.vira-tools-wrap .vira-btn-gradient,
.vira-tools-wrap a.vira-btn-gradient {
    background: var(--vira-gradient-primary, linear-gradient(135deg, #3b82f6, #6366f1)) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: var(--vira-shadow-md, 0 8px 16px rgba(0,0,0,0.08)) !important;
}
.vira-tools-wrap .vira-btn-gradient:hover,
.vira-tools-wrap .vira-btn-gradient:focus,
.vira-tools-wrap a.vira-btn-gradient:hover,
.vira-tools-wrap a.vira-btn-gradient:focus {
    transform: translateY(-2px) !important;
    box-shadow: var(--vira-shadow-lg, 0 20px 40px rgba(0,0,0,0.12)) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* --- Glass --- */
.vira-tools-wrap .vira-btn-glass,
.vira-tools-wrap a.vira-btn-glass {
    background: var(--vira-glass-surface, rgba(255,255,255,0.62)) !important;
    color: var(--vira-text, #1e293b) !important;
    border-color: var(--vira-glass-border, rgba(255,255,255,0.45)) !important;
    backdrop-filter: blur(calc(var(--vira-glass-blur, 28px) * .75)) saturate(var(--vira-glass-saturate, 180%)) !important;
    -webkit-backdrop-filter: blur(calc(var(--vira-glass-blur, 28px) * .75)) saturate(var(--vira-glass-saturate, 180%)) !important;
    box-shadow: var(--vira-shadow-sm, 0 2px 4px rgba(0,0,0,0.06)) !important;
}
.vira-tools-wrap .vira-btn-glass:hover,
.vira-tools-wrap .vira-btn-glass:focus,
.vira-tools-wrap a.vira-btn-glass:hover,
.vira-tools-wrap a.vira-btn-glass:focus {
    background: var(--vira-glass-surface-strong, rgba(255,255,255,0.78)) !important;
    color: var(--vira-text, #1e293b) !important;
    border-color: var(--vira-glass-border-strong, rgba(255,255,255,0.6)) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--vira-shadow-md, 0 8px 16px rgba(0,0,0,0.08)) !important;
    text-decoration: none !important;
}
[data-theme="dark"] .vira-tools-wrap .vira-btn-glass {
    background: var(--vira-glass-surface, rgba(19,28,46,0.65)) !important;
    color: var(--vira-text, #f1f5f9) !important;
}
[data-theme="dark"] .vira-tools-wrap .vira-btn-glass:hover {
    background: var(--vira-glass-surface-strong, rgba(19,28,46,0.80)) !important;
}

/* --- Button Sizes --- */
.vira-tools-wrap .vira-btn-sm {
    padding: 6px 14px !important;
    font-size: 12px !important;
    min-height: 30px !important;
    border-radius: var(--vira-radius-sm, 6px) !important;
}
.vira-tools-wrap .vira-btn-lg {
    padding: 14px 28px !important;
    font-size: 15px !important;
    min-height: 46px !important;
    border-radius: var(--vira-radius-lg, 16px) !important;
}
.vira-tools-wrap .vira-btn-icon {
    padding: 10px !important;
    aspect-ratio: 1 !important;
    min-height: 38px !important;
    min-width: 38px !important;
}
.vira-tools-wrap .vira-btn-icon.vira-btn-sm {
    padding: 6px !important;
    min-height: 30px !important;
    min-width: 30px !important;
}
.vira-tools-wrap .vira-btn-icon.vira-btn-lg {
    padding: 14px !important;
    min-height: 46px !important;
    min-width: 46px !important;
}

/* --- Button Group (RTL) --- */
.vira-tools-wrap .vira-btn-group {
    display: inline-flex !important;
}
.vira-tools-wrap .vira-btn-group .vira-btn {
    border-radius: 0 !important;
}
.vira-tools-wrap .vira-btn-group .vira-btn:first-child {
    border-radius: 0 var(--vira-radius-md, 10px) var(--vira-radius-md, 10px) 0 !important;
}
.vira-tools-wrap .vira-btn-group .vira-btn:last-child {
    border-radius: var(--vira-radius-md, 10px) 0 0 var(--vira-radius-md, 10px) !important;
}
.vira-tools-wrap .vira-btn-group .vira-btn + .vira-btn {
    margin-left: 0 !important;
    margin-right: -1px !important;
}

/* ==========================================
   CARDS
   ========================================== */
.vira-tools-wrap .vira-card {
    position: relative !important;
    overflow: hidden !important;
    background: var(--vira-glass-surface, rgba(255,255,255,0.62)) !important;
    border: 1px solid var(--vira-glass-border, rgba(255,255,255,0.45)) !important;
    border-radius: var(--vira-radius-lg, 16px) !important;
    padding: var(--vira-space-5, 24px) !important;
    box-shadow: var(--vira-glass-shadow, 0 24px 48px rgba(15,23,42,0.12)) !important;
    backdrop-filter: blur(var(--vira-glass-blur, 28px)) saturate(var(--vira-glass-saturate, 180%)) !important;
    -webkit-backdrop-filter: blur(var(--vira-glass-blur, 28px)) saturate(var(--vira-glass-saturate, 180%)) !important;
    transition: background 0.2s ease, border-color 0.2s ease,
                box-shadow 0.3s ease, transform 0.3s ease !important;
}
.vira-tools-wrap .vira-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background: linear-gradient(135deg, var(--vira-glass-highlight, rgba(255,255,255,0.35)) 0%, transparent 45%) !important;
    opacity: .4 !important;
    pointer-events: none !important;
}
.vira-tools-wrap .vira-card:hover {
    box-shadow: var(--vira-shadow-lg, 0 20px 40px rgba(0,0,0,0.12)) !important;
    transform: translateY(-4px) !important;
}
.vira-tools-wrap .vira-card-solid {
    background: var(--vira-surface, #ffffff) !important;
    border-color: var(--vira-border, #e5e7eb) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.vira-tools-wrap .vira-card-solid::before {
    display: none !important;
}
.vira-tools-wrap .vira-card-interactive {
    cursor: pointer !important;
}
.vira-tools-wrap .vira-card-interactive:hover {
    border-color: var(--vira-primary-light, #60a5fa) !important;
    box-shadow: var(--vira-shadow-lg, 0 20px 40px rgba(0,0,0,0.12)) !important;
}
.vira-tools-wrap .vira-card-elevated {
    box-shadow: var(--vira-shadow-lg, 0 20px 40px rgba(0,0,0,0.12)) !important;
}
.vira-tools-wrap .vira-card-elevated:hover {
    box-shadow: var(--vira-shadow-xl, 0 32px 64px rgba(0,0,0,0.16)) !important;
}
.vira-tools-wrap .vira-card-bordered {
    background: var(--vira-surface, #ffffff) !important;
    border: 2px solid var(--vira-border, #e5e7eb) !important;
}
.vira-tools-wrap .vira-card-gradient {
    background: var(--vira-gradient-primary, linear-gradient(135deg, #3b82f6, #6366f1)) !important;
    color: #ffffff !important;
    border: none !important;
}
.vira-tools-wrap .vira-card-gradient::before {
    display: none !important;
}
.vira-tools-wrap .vira-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--vira-space-4, 16px) !important;
    margin-bottom: var(--vira-space-4, 16px) !important;
}
.vira-tools-wrap .vira-card-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--vira-text, #1e293b) !important;
    margin: 0 !important;
}
.vira-tools-wrap .vira-card-description {
    font-size: 14px !important;
    color: var(--vira-text-soft, #475569) !important;
    margin-top: 4px !important;
}
.vira-tools-wrap .vira-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: var(--vira-space-3, 12px) !important;
    margin-top: var(--vira-space-4, 16px) !important;
    padding-top: var(--vira-space-4, 16px) !important;
    border-top: 1px solid var(--vira-divider, #e5e7eb) !important;
}

/* ==========================================
   INPUTS
   ========================================== */
.vira-tools-wrap .vira-input {
    width: 100% !important;
    padding: 10px 14px !important;
    border-radius: var(--vira-radius-md, 10px) !important;
    border: 1.5px solid var(--vira-border, #e5e7eb) !important;
    background: var(--vira-surface, #ffffff) !important;
    color: var(--vira-text, #1e293b) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    transition: background 0.2s ease, border-color 0.2s ease,
                box-shadow 0.2s ease, color 0.2s ease !important;
    box-shadow: none !important;
    outline: none !important;
    min-height: 40px !important;
}
.vira-tools-wrap .vira-input::placeholder {
    color: var(--vira-text-muted, #94a3b8) !important;
}
.vira-tools-wrap .vira-input:hover:not(:focus) {
    border-color: var(--vira-border-strong, #d1d5db) !important;
}
.vira-tools-wrap .vira-input:focus {
    outline: none !important;
    border-color: var(--vira-primary, #3b82f6) !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .12) !important;
    background: var(--vira-surface, #ffffff) !important;
}
.vira-tools-wrap .vira-input-error {
    border-color: var(--vira-danger, #ef4444) !important;
}
.vira-tools-wrap .vira-input-error:focus {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .12) !important;
    border-color: var(--vira-danger, #ef4444) !important;
}
.vira-tools-wrap .vira-input-success {
    border-color: var(--vira-success, #10b981) !important;
}
.vira-tools-wrap .vira-input-success:focus {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .12) !important;
    border-color: var(--vira-success, #10b981) !important;
}
.vira-tools-wrap .vira-input-glass {
    background: var(--vira-glass-surface, rgba(255,255,255,0.62)) !important;
    border-color: var(--vira-glass-border, rgba(255,255,255,0.45)) !important;
    backdrop-filter: blur(calc(var(--vira-glass-blur, 28px) * .6)) saturate(var(--vira-glass-saturate, 180%)) !important;
    -webkit-backdrop-filter: blur(calc(var(--vira-glass-blur, 28px) * .6)) saturate(var(--vira-glass-saturate, 180%)) !important;
}
.vira-tools-wrap .vira-input-sm {
    padding: 7px 10px !important;
    font-size: 13px !important;
    min-height: 34px !important;
}
.vira-tools-wrap .vira-input-lg {
    padding: 14px 16px !important;
    font-size: 16px !important;
    min-height: 48px !important;
    border-radius: var(--vira-radius-lg, 16px) !important;
}
.vira-tools-wrap .vira-input-group {
    display: flex !important;
    align-items: stretch !important;
}
.vira-tools-wrap .vira-input-group .vira-input {
    border-radius: 0 !important;
}
.vira-tools-wrap .vira-input-group .vira-input:first-child {
    border-radius: 0 var(--vira-radius-md, 10px) var(--vira-radius-md, 10px) 0 !important;
}
.vira-tools-wrap .vira-input-group .vira-input:last-child {
    border-radius: var(--vira-radius-md, 10px) 0 0 var(--vira-radius-md, 10px) !important;
}
.vira-tools-wrap .vira-input-group .vira-btn:first-child {
    border-radius: 0 var(--vira-radius-md, 10px) var(--vira-radius-md, 10px) 0 !important;
}
.vira-tools-wrap .vira-input-group .vira-btn:last-child {
    border-radius: var(--vira-radius-md, 10px) 0 0 var(--vira-radius-md, 10px) !important;
}

/* ==========================================
   BADGES
   ========================================== */
.vira-tools-wrap .vira-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    border-radius: var(--vira-radius-full, 999px) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    background: var(--vira-gray-100, #f3f4f6) !important;
    color: var(--vira-text-soft, #475569) !important;
    border: 1px solid transparent !important;
    transition: all 0.15s ease !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
.vira-tools-wrap .vira-badge-dot::before {
    content: "" !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: currentColor !important;
    display: inline-block !important;
}
.vira-tools-wrap .vira-badge-glass {
    background: var(--vira-glass-surface, rgba(255,255,255,0.62)) !important;
    border: 1px solid var(--vira-glass-border, rgba(255,255,255,0.45)) !important;
    backdrop-filter: blur(calc(var(--vira-glass-blur, 28px) * .5)) saturate(var(--vira-glass-saturate, 180%)) !important;
    -webkit-backdrop-filter: blur(calc(var(--vira-glass-blur, 28px) * .5)) saturate(var(--vira-glass-saturate, 180%)) !important;
    color: var(--vira-text, #1e293b) !important;
}
.vira-tools-wrap .vira-badge-success {
    color: #ffffff !important;
    background: var(--vira-success, #10b981) !important;
    border-color: var(--vira-success, #10b981) !important;
}
.vira-tools-wrap .vira-badge-success.vira-badge-outline {
    color: var(--vira-success, #10b981) !important;
    background: var(--vira-success-50, #ecfdf5) !important;
    border: 1px solid var(--vira-success, #10b981) !important;
}
.vira-tools-wrap .vira-badge-danger {
    color: #ffffff !important;
    background: var(--vira-danger, #ef4444) !important;
    border-color: var(--vira-danger, #ef4444) !important;
}
.vira-tools-wrap .vira-badge-danger.vira-badge-outline {
    color: var(--vira-danger, #ef4444) !important;
    background: var(--vira-danger-50, #fef2f2) !important;
    border: 1px solid var(--vira-danger, #ef4444) !important;
}
.vira-tools-wrap .vira-badge-warning {
    color: #ffffff !important;
    background: var(--vira-warning, #f59e0b) !important;
    border-color: var(--vira-warning, #f59e0b) !important;
}
.vira-tools-wrap .vira-badge-warning.vira-badge-outline {
    color: var(--vira-warning, #f59e0b) !important;
    background: var(--vira-warning-50, #fffbeb) !important;
    border: 1px solid var(--vira-warning, #f59e0b) !important;
}
.vira-tools-wrap .vira-badge-muted {
    color: #ffffff !important;
    background: var(--vira-muted, #64748b) !important;
    border-color: var(--vira-muted, #64748b) !important;
}
.vira-tools-wrap .vira-badge-info {
    color: #ffffff !important;
    background: var(--vira-info, #0ea5e9) !important;
    border-color: var(--vira-info, #0ea5e9) !important;
}
.vira-tools-wrap .vira-badge-sm {
    padding: 2px 8px !important;
    font-size: 11px !important;
}
.vira-tools-wrap .vira-badge-lg {
    padding: 6px 14px !important;
    font-size: 14px !important;
}

/* ==========================================
   ALERTS
   ========================================== */
.vira-tools-wrap .vira-alert {
    position: relative !important;
    overflow: hidden !important;
    padding: 16px 20px !important;
    border-radius: var(--vira-radius-lg, 16px) !important;
    border: 1px solid var(--vira-glass-border, rgba(255,255,255,0.45)) !important;
    background: var(--vira-glass-surface, rgba(255,255,255,0.62)) !important;
    box-shadow: var(--vira-shadow-sm, 0 2px 4px rgba(0,0,0,0.06)) !important;
    backdrop-filter: blur(var(--vira-glass-blur, 28px)) saturate(var(--vira-glass-saturate, 180%)) !important;
    -webkit-backdrop-filter: blur(var(--vira-glass-blur, 28px)) saturate(var(--vira-glass-saturate, 180%)) !important;
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
}
.vira-tools-wrap .vira-alert::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background: linear-gradient(125deg, var(--vira-glass-highlight, rgba(255,255,255,0.35)), transparent 42%) !important;
    opacity: .3 !important;
    pointer-events: none !important;
}
.vira-tools-wrap .vira-alert-icon {
    flex-shrink: 0 !important;
    font-size: 20px !important;
    margin-top: 2px !important;
}
.vira-tools-wrap .vira-alert-content {
    flex: 1 !important;
}
.vira-tools-wrap .vira-alert-title {
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    color: var(--vira-text, #1e293b) !important;
}
.vira-tools-wrap .vira-alert-message {
    color: var(--vira-text-soft, #475569) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}
.vira-tools-wrap .vira-alert-success {
    border-color: rgba(16, 185, 129, .25) !important;
    background: linear-gradient(0deg, rgba(16, 185, 129, .08), rgba(16, 185, 129, .08)), var(--vira-glass-surface) !important;
}
.vira-tools-wrap .vira-alert-success .vira-alert-icon {
    color: var(--vira-success, #10b981) !important;
}
.vira-tools-wrap .vira-alert-danger {
    border-color: rgba(239, 68, 68, .25) !important;
    background: linear-gradient(0deg, rgba(239, 68, 68, .08), rgba(239, 68, 68, .08)), var(--vira-glass-surface) !important;
}
.vira-tools-wrap .vira-alert-danger .vira-alert-icon {
    color: var(--vira-danger, #ef4444) !important;
}
.vira-tools-wrap .vira-alert-warning {
    border-color: rgba(245, 158, 11, .25) !important;
    background: linear-gradient(0deg, rgba(245, 158, 11, .08), rgba(245, 158, 11, .08)), var(--vira-glass-surface) !important;
}
.vira-tools-wrap .vira-alert-warning .vira-alert-icon {
    color: var(--vira-warning, #f59e0b) !important;
}
.vira-tools-wrap .vira-alert-info {
    border-color: rgba(59, 130, 246, .25) !important;
    background: linear-gradient(0deg, rgba(59, 130, 246, .08), rgba(59, 130, 246, .08)), var(--vira-glass-surface) !important;
}
.vira-tools-wrap .vira-alert-info .vira-alert-icon {
    color: var(--vira-primary, #3b82f6) !important;
}

/* ==========================================
   LOADERS
   ========================================== */
@keyframes vira-spin {
    to { transform: rotate(360deg); }
}
.vira-tools-wrap .vira-loader {
    width: 20px !important;
    height: 20px !important;
    border: 2.5px solid var(--vira-border, #e5e7eb) !important;
    border-top-color: var(--vira-primary, #3b82f6) !important;
    border-radius: 50% !important;
    animation: vira-spin .8s linear infinite !important;
}
.vira-tools-wrap .vira-loader-sm {
    width: 16px !important;
    height: 16px !important;
    border-width: 2px !important;
}
.vira-tools-wrap .vira-loader-lg {
    width: 32px !important;
    height: 32px !important;
    border-width: 3px !important;
}

@keyframes vira-dots {
    0%, 20% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
    100%, 120% { opacity: 0; transform: scale(0.8); }
}
.vira-tools-wrap .vira-dots-loader {
    display: inline-flex !important;
    gap: 4px !important;
}
.vira-tools-wrap .vira-dots-loader span {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--vira-primary, #3b82f6) !important;
    animation: vira-dots 1.4s ease infinite !important;
}
.vira-tools-wrap .vira-dots-loader span:nth-child(2) {
    animation-delay: 0.2s !important;
}
.vira-tools-wrap .vira-dots-loader span:nth-child(3) {
    animation-delay: 0.4s !important;
}

@keyframes vira-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.vira-tools-wrap .vira-pulse-loader {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: var(--vira-primary, #3b82f6) !important;
    animation: vira-pulse 1.5s ease infinite !important;
}

@keyframes vira-skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.vira-tools-wrap .vira-skeleton {
    background: linear-gradient(90deg, var(--vira-gray-200, #e5e7eb) 25%, var(--vira-gray-100, #f3f4f6) 50%, var(--vira-gray-200, #e5e7eb) 75%) !important;
    background-size: 200% 100% !important;
    animation: vira-skeleton-loading 1.5s ease infinite !important;
    border-radius: var(--vira-radius-md, 10px) !important;
}
[data-theme="dark"] .vira-tools-wrap .vira-skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.03) 50%, rgba(255,255,255,.06) 75%) !important;
    background-size: 200% 100% !important;
}

/* ==========================================
   PAGE HEADER
   ========================================== */
.vira-tools-wrap .vira-page-header {
    margin: 0 0 var(--vira-space-5, 24px) !important;
    padding: var(--vira-space-6, 32px) !important;
    background: var(--vira-glass-surface, rgba(255,255,255,0.62)) !important;
    border: 1px solid var(--vira-glass-border, rgba(255,255,255,0.45)) !important;
    border-radius: var(--vira-radius-xl, 20px) !important;
    box-shadow: var(--vira-glass-shadow, 0 24px 48px rgba(15,23,42,0.12)) !important;
    backdrop-filter: blur(var(--vira-glass-blur, 28px)) saturate(var(--vira-glass-saturate, 180%)) !important;
    -webkit-backdrop-filter: blur(var(--vira-glass-blur, 28px)) saturate(var(--vira-glass-saturate, 180%)) !important;
}
.vira-tools-wrap .vira-page-header h1 {
    margin: 0 0 var(--vira-space-2, 8px) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--vira-text, #1e293b) !important;
    letter-spacing: -0.02em !important;
}
.vira-tools-wrap .vira-page-header p {
    margin: 0 !important;
    color: var(--vira-text-soft, #475569) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* ==========================================
   FOCUS UTILITY
   ========================================== */
.vira-tools-wrap .vira-focus:focus-visible,
.vira-tools-wrap .vira-btn:focus-visible,
.vira-tools-wrap .vira-input:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .22) !important;
}
.vira-tools-wrap .vira-focus-ring:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--vira-primary, #3b82f6) !important;
}

/* ==========================================
   LAYOUT UTILITIES
   ========================================== */
.vira-tools-wrap .vira-container {
    max-width: 1200px !important;
    margin: auto !important;
    padding: 0 var(--vira-space-5, 24px) !important;
}
.vira-tools-wrap .vira-container-sm {
    max-width: 640px !important;
    margin: auto !important;
    padding: 0 var(--vira-space-5, 24px) !important;
}
.vira-tools-wrap .vira-container-lg {
    max-width: 1400px !important;
    margin: auto !important;
    padding: 0 var(--vira-space-5, 24px) !important;
}
.vira-tools-wrap .vira-container-fluid {
    max-width: 100% !important;
    margin: auto !important;
    padding: 0 var(--vira-space-5, 24px) !important;
}

.vira-tools-wrap .vira-grid {
    display: grid !important;
    gap: var(--vira-space-5, 24px) !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}
.vira-tools-wrap .vira-grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}
.vira-tools-wrap .vira-grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}
.vira-tools-wrap .vira-grid-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}

.vira-tools-wrap .vira-flex {
    display: flex !important;
    gap: var(--vira-space-4, 16px) !important;
    align-items: center !important;
}
.vira-tools-wrap .vira-flex-col {
    flex-direction: column !important;
    align-items: stretch !important;
}
.vira-tools-wrap .vira-flex-wrap {
    flex-wrap: wrap !important;
}
.vira-tools-wrap .vira-flex-center {
    justify-content: center !important;
}
.vira-tools-wrap .vira-flex-between {
    justify-content: space-between !important;
}
.vira-tools-wrap .vira-flex-start {
    justify-content: flex-start !important;
}
.vira-tools-wrap .vira-flex-end {
    justify-content: flex-end !important;
}

.vira-tools-wrap .vira-gap-1 { gap: var(--vira-space-1, 4px) !important; }
.vira-tools-wrap .vira-gap-2 { gap: var(--vira-space-2, 8px) !important; }
.vira-tools-wrap .vira-gap-3 { gap: var(--vira-space-3, 12px) !important; }
.vira-tools-wrap .vira-gap-4 { gap: var(--vira-space-4, 16px) !important; }
.vira-tools-wrap .vira-gap-5 { gap: var(--vira-space-5, 24px) !important; }
.vira-tools-wrap .vira-gap-6 { gap: var(--vira-space-6, 32px) !important; }

.vira-tools-wrap .vira-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--vira-space-4, 16px) !important;
}
.vira-tools-wrap .vira-stack-1 { gap: var(--vira-space-1, 4px) !important; }
.vira-tools-wrap .vira-stack-2 { gap: var(--vira-space-2, 8px) !important; }
.vira-tools-wrap .vira-stack-3 { gap: var(--vira-space-3, 12px) !important; }
.vira-tools-wrap .vira-stack-4 { gap: var(--vira-space-4, 16px) !important; }
.vira-tools-wrap .vira-stack-5 { gap: var(--vira-space-5, 24px) !important; }
.vira-tools-wrap .vira-stack-6 { gap: var(--vira-space-6, 32px) !important; }

.vira-tools-wrap .vira-divider {
    height: 1px !important;
    background: var(--vira-divider, #e5e7eb) !important;
    border: none !important;
    margin: var(--vira-space-5, 24px) 0 !important;
}

/* ==========================================
   SPACING UTILITIES
   ========================================== */
.vira-tools-wrap .mt-0 { margin-top: 0 !important; }
.vira-tools-wrap .mt-1 { margin-top: var(--vira-space-1, 4px) !important; }
.vira-tools-wrap .mt-2 { margin-top: var(--vira-space-2, 8px) !important; }
.vira-tools-wrap .mt-3 { margin-top: var(--vira-space-3, 12px) !important; }
.vira-tools-wrap .mt-4 { margin-top: var(--vira-space-4, 16px) !important; }
.vira-tools-wrap .mt-5 { margin-top: var(--vira-space-5, 24px) !important; }
.vira-tools-wrap .mt-6 { margin-top: var(--vira-space-6, 32px) !important; }
.vira-tools-wrap .mt-7 { margin-top: var(--vira-space-7, 40px) !important; }
.vira-tools-wrap .mt-8 { margin-top: var(--vira-space-8, 48px) !important; }

.vira-tools-wrap .mb-0 { margin-bottom: 0 !important; }
.vira-tools-wrap .mb-1 { margin-bottom: var(--vira-space-1, 4px) !important; }
.vira-tools-wrap .mb-2 { margin-bottom: var(--vira-space-2, 8px) !important; }
.vira-tools-wrap .mb-3 { margin-bottom: var(--vira-space-3, 12px) !important; }
.vira-tools-wrap .mb-4 { margin-bottom: var(--vira-space-4, 16px) !important; }
.vira-tools-wrap .mb-5 { margin-bottom: var(--vira-space-5, 24px) !important; }
.vira-tools-wrap .mb-6 { margin-bottom: var(--vira-space-6, 32px) !important; }
.vira-tools-wrap .mb-7 { margin-bottom: var(--vira-space-7, 40px) !important; }
.vira-tools-wrap .mb-8 { margin-bottom: var(--vira-space-8, 48px) !important; }

.vira-tools-wrap .p-0 { padding: 0 !important; }
.vira-tools-wrap .p-1 { padding: var(--vira-space-1, 4px) !important; }
.vira-tools-wrap .p-2 { padding: var(--vira-space-2, 8px) !important; }
.vira-tools-wrap .p-3 { padding: var(--vira-space-3, 12px) !important; }
.vira-tools-wrap .p-4 { padding: var(--vira-space-4, 16px) !important; }
.vira-tools-wrap .p-5 { padding: var(--vira-space-5, 24px) !important; }
.vira-tools-wrap .p-6 { padding: var(--vira-space-6, 32px) !important; }

/* ==========================================
   TEXT UTILITIES
   ========================================== */
.vira-tools-wrap .text-xs { font-size: 12px !important; }
.vira-tools-wrap .text-sm { font-size: 13px !important; }
.vira-tools-wrap .text-base { font-size: 14px !important; }
.vira-tools-wrap .text-lg { font-size: 16px !important; }
.vira-tools-wrap .text-xl { font-size: 18px !important; }
.vira-tools-wrap .text-2xl { font-size: 20px !important; }
.vira-tools-wrap .text-3xl { font-size: 24px !important; }

.vira-tools-wrap .text-muted { color: var(--vira-text-muted, #94a3b8) !important; }
.vira-tools-wrap .text-soft { color: var(--vira-text-soft, #475569) !important; }
.vira-tools-wrap .text-success { color: var(--vira-success, #10b981) !important; }
.vira-tools-wrap .text-danger { color: var(--vira-danger, #ef4444) !important; }
.vira-tools-wrap .text-warning { color: var(--vira-warning, #f59e0b) !important; }
.vira-tools-wrap .text-primary { color: var(--vira-primary, #3b82f6) !important; }

.vira-tools-wrap .font-normal { font-weight: 400 !important; }
.vira-tools-wrap .font-medium { font-weight: 500 !important; }
.vira-tools-wrap .font-semibold { font-weight: 600 !important; }
.vira-tools-wrap .font-bold { font-weight: 700 !important; }

.vira-tools-wrap .text-center { text-align: center !important; }
.vira-tools-wrap .text-right { text-align: right !important; }
.vira-tools-wrap .text-left { text-align: left !important; }

.vira-tools-wrap .truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.vira-tools-wrap .line-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.vira-tools-wrap .line-clamp-3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ==========================================
   BORDER & SHADOW UTILITIES
   ========================================== */
.vira-tools-wrap .rounded-sm { border-radius: var(--vira-radius-sm, 6px) !important; }
.vira-tools-wrap .rounded-md { border-radius: var(--vira-radius-md, 10px) !important; }
.vira-tools-wrap .rounded-lg { border-radius: var(--vira-radius-lg, 16px) !important; }
.vira-tools-wrap .rounded-xl { border-radius: var(--vira-radius-xl, 20px) !important; }
.vira-tools-wrap .rounded-full { border-radius: var(--vira-radius-full, 999px) !important; }

.vira-tools-wrap .shadow-sm { box-shadow: var(--vira-shadow-sm, 0 2px 4px rgba(0,0,0,0.06)) !important; }
.vira-tools-wrap .shadow-md { box-shadow: var(--vira-shadow-md, 0 8px 16px rgba(0,0,0,0.08)) !important; }
.vira-tools-wrap .shadow-lg { box-shadow: var(--vira-shadow-lg, 0 20px 40px rgba(0,0,0,0.12)) !important; }
.vira-tools-wrap .shadow-xl { box-shadow: var(--vira-shadow-xl, 0 32px 64px rgba(0,0,0,0.16)) !important; }

/* ==========================================
   CURSOR, DISPLAY, POSITION, OVERFLOW
   ========================================== */
.vira-tools-wrap .cursor-pointer { cursor: pointer !important; }
.vira-tools-wrap .cursor-default { cursor: default !important; }
.vira-tools-wrap .cursor-not-allowed { cursor: not-allowed !important; }
.vira-tools-wrap .hidden { display: none !important; }
.vira-tools-wrap .block { display: block !important; }
.vira-tools-wrap .inline-block { display: inline-block !important; }
.vira-tools-wrap .inline-flex { display: inline-flex !important; }
.vira-tools-wrap .grid { display: grid !important; }
.vira-tools-wrap .w-full { width: 100% !important; }
.vira-tools-wrap .h-full { height: 100% !important; }
.vira-tools-wrap .min-h-screen { min-height: 100vh !important; }

.vira-tools-wrap .overflow-hidden { overflow: hidden !important; }
.vira-tools-wrap .overflow-auto { overflow: auto !important; }
.vira-tools-wrap .overflow-scroll { overflow: scroll !important; }
.vira-tools-wrap .overflow-x-auto { overflow-x: auto !important; }

.vira-tools-wrap .relative { position: relative !important; }
.vira-tools-wrap .absolute { position: absolute !important; }
.vira-tools-wrap .fixed { position: fixed !important; }
.vira-tools-wrap .sticky { position: sticky !important; }

.vira-tools-wrap .transition { transition: all var(--vira-transition, 200ms ease) !important; }
.vira-tools-wrap .transition-slow { transition: all var(--vira-transition-slow, 300ms ease) !important; }

.vira-tools-wrap .opacity-0 { opacity: 0 !important; }
.vira-tools-wrap .opacity-50 { opacity: 0.5 !important; }
.vira-tools-wrap .opacity-75 { opacity: 0.75 !important; }
.vira-tools-wrap .opacity-100 { opacity: 1 !important; }

/* ==========================================
   ANIMATIONS
   ========================================== */
@keyframes vira-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes vira-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes vira-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes vira-fade-down {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes vira-scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes vira-slide-in-right {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes vira-slide-in-left {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

.vira-tools-wrap .vira-fade {
    animation: vira-fade-in .3s cubic-bezier(0.19, 1, 0.22, 1) !important;
}
.vira-tools-wrap .vira-fade-up {
    animation: vira-fade-up .4s cubic-bezier(0.19, 1, 0.22, 1) !important;
}
.vira-tools-wrap .vira-scale-in {
    animation: vira-scale-in .3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ==========================================
   iOS GLASS COMPONENTS
   ========================================== */

/* --- iOS Glass Base --- */
.vira-tools-wrap .vira-ios-glass {
    position: relative !important;
    overflow: hidden !important;
    background: var(--vira-ios-glass-bg, rgba(255,255,255,0.22)) !important;
    backdrop-filter: var(--vira-ios-glass-filter, blur(40px) saturate(180%) brightness(1.08)) !important;
    -webkit-backdrop-filter: var(--vira-ios-glass-filter, blur(40px) saturate(180%) brightness(1.08)) !important;
    border: var(--vira-ios-material-thin, 0.5px) solid var(--vira-ios-glass-border, rgba(255,255,255,0.25)) !important;
    border-radius: var(--vira-ios-glass-radius, 20px) !important;
    box-shadow: var(--vira-ios-glass-shadow, 0 8px 32px rgba(0,0,0,0.12)), var(--vira-ios-glass-inset-all, inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.08)) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.vira-tools-wrap .vira-ios-glass::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 50% !important;
    background: linear-gradient(180deg, var(--vira-ios-glass-highlight, rgba(255,255,255,0.35)) 0%, transparent 100%) !important;
    border-radius: var(--vira-ios-glass-radius, 20px) var(--vira-ios-glass-radius, 20px) 0 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
.vira-tools-wrap .vira-ios-glass::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: inherit !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.05) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
.vira-tools-wrap .vira-ios-glass > * {
    position: relative !important;
    z-index: 2 !important;
}

/* --- iOS Glass Variants --- */
.vira-tools-wrap .vira-ios-glass-strong {
    background: var(--vira-ios-glass-bg-strong, rgba(255,255,255,0.35)) !important;
    backdrop-filter: var(--vira-ios-glass-filter-strong, blur(60px) saturate(200%) brightness(1.12)) !important;
    -webkit-backdrop-filter: var(--vira-ios-glass-filter-strong, blur(60px) saturate(200%) brightness(1.12)) !important;
    border-color: var(--vira-ios-glass-border-strong, rgba(255,255,255,0.4)) !important;
}
.vira-tools-wrap .vira-ios-glass-subtle {
    background: var(--vira-ios-glass-bg-subtle, rgba(255,255,255,0.12)) !important;
    backdrop-filter: var(--vira-ios-glass-filter-light, blur(28px) saturate(160%) brightness(1.05)) !important;
    -webkit-backdrop-filter: var(--vira-ios-glass-filter-light, blur(28px) saturate(160%) brightness(1.05)) !important;
    box-shadow: var(--vira-ios-glass-shadow, 0 8px 32px rgba(0,0,0,0.12)) !important;
}
.vira-tools-wrap .vira-ios-glass-elevated {
    box-shadow: var(--vira-ios-glass-shadow-elevated, 0 32px 80px rgba(0,0,0,0.18)) !important;
    border-color: var(--vira-ios-glass-border-strong, rgba(255,255,255,0.4)) !important;
}
.vira-tools-wrap .vira-ios-glass-elevated::before {
    background: linear-gradient(180deg, var(--vira-ios-glass-highlight-strong, rgba(255,255,255,0.5)) 0%, transparent 60%) !important;
}

/* Tinted Glass */
.vira-tools-wrap .vira-ios-glass-tinted-blue {
    background: linear-gradient(135deg, rgba(0,122,255,0.15), rgba(0,122,255,0.08)) !important;
}
.vira-tools-wrap .vira-ios-glass-tinted-purple {
    background: linear-gradient(135deg, rgba(175,82,222,0.15), rgba(175,82,222,0.08)) !important;
}
.vira-tools-wrap .vira-ios-glass-tinted-green {
    background: linear-gradient(135deg, rgba(52,199,89,0.15), rgba(52,199,89,0.08)) !important;
}

/* --- iOS Card --- */
.vira-tools-wrap .vira-ios-card {
    position: relative !important;
    overflow: hidden !important;
    background: var(--vira-ios-glass-bg, rgba(255,255,255,0.22)) !important;
    backdrop-filter: var(--vira-ios-glass-filter, blur(40px) saturate(180%) brightness(1.08)) !important;
    -webkit-backdrop-filter: var(--vira-ios-glass-filter, blur(40px) saturate(180%) brightness(1.08)) !important;
    border: var(--vira-ios-material-thin, 0.5px) solid var(--vira-ios-glass-border, rgba(255,255,255,0.25)) !important;
    border-radius: var(--vira-ios-glass-radius-lg, 28px) !important;
    padding: 24px !important;
    box-shadow: var(--vira-ios-glass-shadow, 0 8px 32px rgba(0,0,0,0.12)), var(--vira-ios-glass-inset-all, inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.08)) !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.vira-tools-wrap .vira-ios-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 50% !important;
    background: linear-gradient(180deg, var(--vira-ios-glass-highlight, rgba(255,255,255,0.35)) 0%, transparent 100%) !important;
    border-radius: var(--vira-ios-glass-radius-lg, 28px) var(--vira-ios-glass-radius-lg, 28px) 0 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
.vira-tools-wrap .vira-ios-card > * {
    position: relative !important;
    z-index: 2 !important;
}
.vira-tools-wrap .vira-ios-card:hover {
    transform: translateY(-4px) scale(1.01) !important;
    box-shadow: var(--vira-ios-glass-shadow-deep, 0 20px 60px rgba(0,0,0,0.15)) !important;
}

/* --- iOS Buttons --- */
.vira-tools-wrap .vira-ios-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    border-radius: var(--vira-ios-glass-radius, 20px) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: var(--vira-ios-material-thin, 0.5px) solid var(--vira-ios-glass-border, rgba(255,255,255,0.25)) !important;
    background: var(--vira-ios-glass-bg, rgba(255,255,255,0.22)) !important;
    backdrop-filter: var(--vira-ios-glass-filter, blur(40px) saturate(180%) brightness(1.08)) !important;
    -webkit-backdrop-filter: var(--vira-ios-glass-filter, blur(40px) saturate(180%) brightness(1.08)) !important;
    color: var(--vira-text, #1e293b) !important;
    box-shadow: var(--vira-ios-glass-shadow, 0 8px 32px rgba(0,0,0,0.12)), var(--vira-ios-glass-inset-all, inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.08)) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
.vira-tools-wrap .vira-ios-btn::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 50% !important;
    background: linear-gradient(180deg, var(--vira-ios-glass-highlight, rgba(255,255,255,0.35)) 0%, transparent 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
.vira-tools-wrap .vira-ios-btn:active {
    transform: scale(0.96) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1), var(--vira-ios-glass-inset-all, inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.08)) !important;
}
.vira-tools-wrap .vira-ios-btn > * {
    position: relative !important;
    z-index: 2 !important;
}

.vira-tools-wrap .vira-ios-btn-primary {
    background: var(--vira-ios-accent, #007aff) !important;
    border-color: rgba(0,122,255,0.3) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(0,122,255,0.3), var(--vira-ios-glass-inset-top, inset 0 1px 0 rgba(255,255,255,0.5)) !important;
}
.vira-tools-wrap .vira-ios-btn-primary:hover {
    background: var(--vira-ios-accent-hover, #0066d6) !important;
    box-shadow: 0 8px 24px rgba(0,122,255,0.4), var(--vira-ios-glass-inset-top, inset 0 1px 0 rgba(255,255,255,0.5)) !important;
}

.vira-tools-wrap .vira-ios-btn-secondary {
    background: rgba(0,122,255,0.12) !important;
    border-color: rgba(0,122,255,0.2) !important;
    color: var(--vira-ios-accent, #007aff) !important;
}
.vira-tools-wrap .vira-ios-btn-secondary:hover {
    background: rgba(0,122,255,0.18) !important;
}

.vira-tools-wrap .vira-ios-btn-filled {
    background: var(--vira-ios-glass-bg-strong, rgba(255,255,255,0.35)) !important;
    border-color: var(--vira-ios-glass-border-strong, rgba(255,255,255,0.4)) !important;
}
.vira-tools-wrap .vira-ios-btn-filled:hover {
    background: rgba(255,255,255,0.45) !important;
}

.vira-tools-wrap .vira-ios-btn-ghost {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.vira-tools-wrap .vira-ios-btn-ghost::before {
    display: none !important;
}
.vira-tools-wrap .vira-ios-btn-ghost:hover {
    background: rgba(255,255,255,0.08) !important;
}

.vira-tools-wrap .vira-ios-btn-sm {
    padding: 8px 16px !important;
    font-size: 13px !important;
    border-radius: 14px !important;
}
.vira-tools-wrap .vira-ios-btn-lg {
    padding: 16px 32px !important;
    font-size: 17px !important;
    border-radius: 24px !important;
}
.vira-tools-wrap .vira-ios-btn-pill {
    border-radius: var(--vira-ios-glass-radius-pill, 100px) !important;
}

/* --- iOS Navigation Bar --- */
.vira-tools-wrap .vira-ios-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: var(--vira-z-sticky, 200) !important;
    padding: 12px 20px !important;
    background: var(--vira-ios-glass-bg-strong, rgba(255,255,255,0.35)) !important;
    backdrop-filter: var(--vira-ios-glass-filter-strong, blur(60px) saturate(200%) brightness(1.12)) !important;
    -webkit-backdrop-filter: var(--vira-ios-glass-filter-strong, blur(60px) saturate(200%) brightness(1.12)) !important;
    border-bottom: var(--vira-ios-material-thin, 0.5px) solid var(--vira-ios-glass-border, rgba(255,255,255,0.25)) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.vira-tools-wrap .vira-ios-nav-title {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--vira-text, #1e293b) !important;
}
.vira-tools-wrap .vira-ios-nav-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    border: none !important;
    background: var(--vira-ios-glass-bg, rgba(255,255,255,0.22)) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    color: var(--vira-ios-accent, #007aff) !important;
    font-size: 20px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}
.vira-tools-wrap .vira-ios-nav-btn:hover {
    background: var(--vira-ios-glass-bg-strong, rgba(255,255,255,0.35)) !important;
}
.vira-tools-wrap .vira-ios-nav-btn:active {
    transform: scale(0.9) !important;
    opacity: 0.7 !important;
}

/* --- iOS Tab Bar --- */
.vira-tools-wrap .vira-ios-tab-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: var(--vira-z-sticky, 200) !important;
    padding: 8px 20px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    background: var(--vira-ios-glass-bg-strong, rgba(255,255,255,0.35)) !important;
    backdrop-filter: var(--vira-ios-glass-filter-strong, blur(60px) saturate(200%) brightness(1.12)) !important;
    -webkit-backdrop-filter: var(--vira-ios-glass-filter-strong, blur(60px) saturate(200%) brightness(1.12)) !important;
    border-top: var(--vira-ios-material-thin, 0.5px) solid var(--vira-ios-glass-border, rgba(255,255,255,0.25)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
}
.vira-tools-wrap .vira-ios-tab-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 12px !important;
    border-radius: 12px !important;
    border: none !important;
    background: transparent !important;
    color: var(--vira-text-soft, #475569) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}
.vira-tools-wrap .vira-ios-tab-item.active {
    color: var(--vira-ios-accent, #007aff) !important;
}
.vira-tools-wrap .vira-ios-tab-item:hover {
    background: rgba(255,255,255,0.08) !important;
}
.vira-tools-wrap .vira-ios-tab-item:active {
    transform: scale(0.9) !important;
}
.vira-tools-wrap .vira-ios-tab-icon {
    font-size: 24px !important;
    line-height: 1 !important;
}

/* --- iOS Modal --- */
.vira-tools-wrap .vira-ios-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.4) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: var(--vira-z-modal-backdrop, 300) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    animation: vira-ios-fade-in 0.3s ease !important;
}
.vira-tools-wrap .vira-ios-modal {
    width: 100% !important;
    max-width: 380px !important;
    background: var(--vira-ios-glass-bg-strong, rgba(255,255,255,0.35)) !important;
    backdrop-filter: var(--vira-ios-glass-filter-strong, blur(60px) saturate(200%) brightness(1.12)) !important;
    -webkit-backdrop-filter: var(--vira-ios-glass-filter-strong, blur(60px) saturate(200%) brightness(1.12)) !important;
    border: var(--vira-ios-material-thin, 0.5px) solid var(--vira-ios-glass-border-strong, rgba(255,255,255,0.4)) !important;
    border-radius: var(--vira-ios-glass-radius-lg, 28px) !important;
    box-shadow: var(--vira-ios-glass-shadow-elevated, 0 32px 80px rgba(0,0,0,0.18)), var(--vira-ios-glass-inset-all, inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.08)) !important;
    overflow: hidden !important;
    animation: vira-ios-scale-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.vira-tools-wrap .vira-ios-modal-header {
    text-align: center !important;
    padding: 24px 24px 8px !important;
}
.vira-tools-wrap .vira-ios-modal-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--vira-text, #1e293b) !important;
    margin-bottom: 4px !important;
}
.vira-tools-wrap .vira-ios-modal-message {
    font-size: 14px !important;
    color: var(--vira-text-soft, #475569) !important;
    line-height: 1.5 !important;
}
.vira-tools-wrap .vira-ios-modal-body {
    padding: 16px 24px !important;
}
.vira-tools-wrap .vira-ios-modal-actions {
    display: flex !important;
    flex-direction: column !important;
    border-top: var(--vira-ios-material-thin, 0.5px) solid var(--vira-ios-glass-border, rgba(255,255,255,0.25)) !important;
}
.vira-tools-wrap .vira-ios-modal-btn {
    padding: 16px 24px !important;
    border: none !important;
    background: transparent !important;
    color: var(--vira-ios-accent, #007aff) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}
.vira-tools-wrap .vira-ios-modal-btn + .vira-ios-modal-btn {
    border-top: var(--vira-ios-material-thin, 0.5px) solid var(--vira-ios-glass-border, rgba(255,255,255,0.25)) !important;
}
.vira-tools-wrap .vira-ios-modal-btn:hover {
    background: rgba(0,122,255,0.08) !important;
}
.vira-tools-wrap .vira-ios-modal-btn:active {
    background: rgba(0,122,255,0.15) !important;
}
.vira-tools-wrap .vira-ios-modal-btn-destructive {
    color: var(--vira-ios-red, #ff3b30) !important;
}
.vira-tools-wrap .vira-ios-modal-btn-destructive:hover {
    background: rgba(255,59,48,0.08) !important;
}

/* --- iOS List --- */
.vira-tools-wrap .vira-ios-list {
    background: var(--vira-ios-glass-bg-strong, rgba(255,255,255,0.35)) !important;
    backdrop-filter: var(--vira-ios-glass-filter, blur(40px) saturate(180%) brightness(1.08)) !important;
    -webkit-backdrop-filter: var(--vira-ios-glass-filter, blur(40px) saturate(180%) brightness(1.08)) !important;
    border: var(--vira-ios-material-thin, 0.5px) solid var(--vira-ios-glass-border, rgba(255,255,255,0.25)) !important;
    border-radius: var(--vira-ios-glass-radius-lg, 28px) !important;
    overflow: hidden !important;
}
.vira-tools-wrap .vira-ios-list-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 20px !important;
    border-bottom: var(--vira-ios-material-thin, 0.5px) solid var(--vira-ios-glass-border, rgba(255,255,255,0.25)) !important;
    transition: background 0.2s ease !important;
    cursor: pointer !important;
}
.vira-tools-wrap .vira-ios-list-item:last-child {
    border-bottom: none !important;
}
.vira-tools-wrap .vira-ios-list-item:hover {
    background: rgba(255,255,255,0.08) !important;
}
.vira-tools-wrap .vira-ios-list-item:active {
    background: rgba(255,255,255,0.12) !important;
}
.vira-tools-wrap .vira-ios-list-item-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}
.vira-tools-wrap .vira-ios-list-item-content {
    flex: 1 !important;
    min-width: 0 !important;
}
.vira-tools-wrap .vira-ios-list-item-title {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--vira-text, #1e293b) !important;
}
.vira-tools-wrap .vira-ios-list-item-subtitle {
    font-size: 13px !important;
    color: var(--vira-text-soft, #475569) !important;
    margin-top: 2px !important;
}
.vira-tools-wrap .vira-ios-list-item-chevron {
    color: var(--vira-text-muted, #94a3b8) !important;
    font-size: 20px !important;
}

/* --- iOS Badge --- */
.vira-tools-wrap .vira-ios-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    border-radius: var(--vira-ios-glass-radius-pill, 100px) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: var(--vira-ios-glass-bg, rgba(255,255,255,0.22)) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: var(--vira-ios-material-thin, 0.5px) solid var(--vira-ios-glass-border, rgba(255,255,255,0.25)) !important;
    box-shadow: var(--vira-ios-glass-inset-top, inset 0 1px 0 rgba(255,255,255,0.5)) !important;
    color: var(--vira-text, #1e293b) !important;
}
.vira-tools-wrap .vira-ios-badge-accent {
    background: rgba(0,122,255,0.12) !important;
    border-color: rgba(0,122,255,0.2) !important;
    color: var(--vira-ios-accent, #007aff) !important;
}
.vira-tools-wrap .vira-ios-badge-success {
    background: rgba(52,199,89,0.12) !important;
    border-color: rgba(52,199,89,0.2) !important;
    color: var(--vira-ios-green, #34c759) !important;
}
.vira-tools-wrap .vira-ios-badge-warning {
    background: rgba(255,149,0,0.12) !important;
    border-color: rgba(255,149,0,0.2) !important;
    color: var(--vira-ios-orange, #ff9500) !important;
}
.vira-tools-wrap .vira-ios-badge-danger {
    background: rgba(255,59,48,0.12) !important;
    border-color: rgba(255,59,48,0.2) !important;
    color: var(--vira-ios-red, #ff3b30) !important;
}

/* --- iOS Animations --- */
@keyframes vira-ios-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes vira-ios-scale-in {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes vira-ios-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes vira-ios-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.vira-tools-wrap .vira-ios-glow:hover {
    box-shadow: var(--vira-ios-glass-shadow-deep, 0 20px 60px rgba(0,0,0,0.15)), 0 0 40px rgba(0,122,255,0.15) !important;
}
.vira-tools-wrap .vira-ios-press:active {
    transform: scale(0.97) !important;
    opacity: 0.9 !important;
}

/* --- iOS Utilities --- */
.vira-tools-wrap .vira-ios-frosted {
    backdrop-filter: blur(60px) saturate(200%) brightness(1.15) !important;
    -webkit-backdrop-filter: blur(60px) saturate(200%) brightness(1.15) !important;
}
.vira-tools-wrap .vira-ios-vibrant {
    backdrop-filter: blur(40px) saturate(220%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(220%) !important;
}
.vira-tools-wrap .vira-ios-material-thin {
    border-width: var(--vira-ios-material-thin, 0.5px) !important;
}
.vira-tools-wrap .vira-ios-material-regular {
    border-width: var(--vira-ios-material-regular, 1px) !important;
}

/* =========================================================
   BROWSER FALLBACK
   ========================================================= */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vira-tools-wrap .vira-ios-glass,
    .vira-tools-wrap .vira-ios-card,
    .vira-tools-wrap .vira-ios-btn,
    .vira-tools-wrap .vira-ios-nav,
    .vira-tools-wrap .vira-ios-tab-bar,
    .vira-tools-wrap .vira-ios-modal,
    .vira-tools-wrap .vira-ios-badge,
    .vira-tools-wrap .vira-ios-list,
    .vira-tools-wrap .vira-card,
    .vira-tools-wrap .vira-alert,
    .vira-tools-wrap .vira-glass,
    .vira-tools-wrap .vira-btn-glass,
    .vira-tools-wrap .vira-input-glass,
    .vira-tools-wrap .vira-badge-glass {
        background: var(--vira-surface, #ffffff) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        opacity: 0.98 !important;
    }
    .vira-tools-wrap .vira-ios-glass::before,
    .vira-tools-wrap .vira-ios-card::before,
    .vira-tools-wrap .vira-card::before,
    .vira-tools-wrap .vira-alert::before,
    .vira-tools-wrap .vira-glass::before {
        display: none !important;
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .vira-tools-wrap *,
    .vira-tools-wrap *::before,
    .vira-tools-wrap *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
    .vira-tools-wrap .vira-grid-2,
    .vira-tools-wrap .vira-grid-3,
    .vira-tools-wrap .vira-grid-4 {
        grid-template-columns: 1fr !important;
    }
    .vira-tools-wrap .vira-container {
        padding: 0 var(--vira-space-4, 16px) !important;
    }
    .vira-tools-wrap .vira-page-header h1 {
        font-size: 24px !important;
    }
    .vira-tools-wrap .vira-page-header {
        padding: var(--vira-space-4, 16px) !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .vira-tools-wrap .vira-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}