/**
 * iOS Cupertino Design System for Modals & Sheets
 * Provides native Apple iOS aesthetics for SweetAlert2 popups & info sheets.
 */

:root {
    --ios-bg: rgba(255, 255, 255, 0.96);
    --ios-card-bg: rgba(242, 242, 247, 0.92);
    --ios-card-inner: rgba(255, 255, 255, 0.85);
    --ios-separator: rgba(60, 60, 67, 0.12);
    --ios-label: #000000;
    --ios-secondary: #8e8e93;
    --ios-tertiary: #c7c7cc;
    --ios-blue: #007aff;
    --ios-blue-rgb: 0, 122, 255;
    --ios-green: #34c759;
    --ios-green-rgb: 52, 199, 89;
    --ios-indigo: #5856d6;
    --ios-indigo-rgb: 88, 86, 214;
    --ios-orange: #ff9500;
    --ios-orange-rgb: 255, 149, 0;
    --ios-pink: #ff2d55;
    --ios-pink-rgb: 255, 45, 85;
    --ios-purple: #af52de;
    --ios-purple-rgb: 175, 82, 222;
    --ios-red: #ff3b30;
    --ios-red-rgb: 255, 59, 48;
    --ios-teal: #30b0c7;
    --ios-teal-rgb: 48, 176, 199;
    --ios-border: rgba(0, 0, 0, 0.08);
    --ios-shadow: 0 28px 65px -12px rgba(0, 0, 0, 0.28), 0 0 1px rgba(0, 0, 0, 0.12);
    --ios-input-bg: rgba(118, 118, 128, 0.08);
    --ios-input-focus: rgba(0, 122, 255, 0.18);
    --ios-seg-bg: rgba(118, 118, 128, 0.12);
    --ios-seg-active: #ffffff;
    --ios-seg-active-text: #000000;
}

body[data-layout-mode="dark"] {
    --ios-bg: rgba(24, 24, 28, 0.96);
    --ios-card-bg: rgba(36, 36, 42, 0.88);
    --ios-card-inner: rgba(255, 255, 255, 0.08);
    --ios-separator: rgba(255, 255, 255, 0.12);
    --ios-label: #ffffff;
    --ios-secondary: #c4c4cc;
    --ios-tertiary: #8e8e93;
    --ios-blue: #0a84ff;
    --ios-blue-rgb: 10, 132, 255;
    --ios-green: #30d158;
    --ios-green-rgb: 48, 209, 88;
    --ios-indigo: #7d7aff;
    --ios-indigo-rgb: 125, 122, 255;
    --ios-orange: #ff9f0a;
    --ios-orange-rgb: 255, 159, 10;
    --ios-pink: #ff375f;
    --ios-pink-rgb: 255, 55, 95;
    --ios-purple: #bf5af2;
    --ios-purple-rgb: 191, 90, 242;
    --ios-red: #ff453a;
    --ios-red-rgb: 255, 69, 58;
    --ios-teal: #64d2ff;
    --ios-teal-rgb: 100, 210, 255;
    --ios-border: rgba(255, 255, 255, 0.14);
    --ios-shadow: 0 32px 75px -12px rgba(0, 0, 0, 0.65), 0 0 1px rgba(255, 255, 255, 0.15);
    --ios-input-bg: rgba(255, 255, 255, 0.08);
    --ios-input-focus: rgba(10, 132, 255, 0.35);
    --ios-seg-bg: rgba(255, 255, 255, 0.08);
    --ios-seg-active: rgba(255, 255, 255, 0.18);
    --ios-seg-active-text: #ffffff;
}

/* =========================================================
   1. SweetAlert2 iOS Modal Container Overrides (Global)
   ========================================================= */
.swal2-container {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition: opacity 0.35s ease, background-color 0.35s ease !important;
}

.swal2-container.swal2-backdrop-show {
    animation: iosBackdropFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.swal2-container.swal2-backdrop-hide {
    animation: iosBackdropFadeOut 0.35s cubic-bezier(0.3, 0, 0.8, 0.15) forwards !important;
}

.swal2-popup {
    background: var(--ios-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--ios-border) !important;
    border-radius: 26px !important;
    box-shadow: var(--ios-shadow) !important;
    padding: 1.4rem 1.5rem !important;
    color: var(--ios-label) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, sans-serif !important;
    overflow: hidden !important;
    max-height: min(92vh, 880px) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    transform-origin: center center !important;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    will-change: transform, opacity;
}

/* Apple Native Fluid Spring Pop-in for SweetAlert2 (Global for both PC & Mobile) */
.swal2-popup.swal2-show,
.swal2-show {
    animation: iosModalPopIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both !important;
    -webkit-animation: iosModalPopIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.swal2-popup.swal2-hide,
.swal2-hide {
    animation: iosModalPopOut 0.35s cubic-bezier(0.3, 0, 0.8, 0.15) forwards !important;
    -webkit-animation: iosModalPopOut 0.35s cubic-bezier(0.3, 0, 0.8, 0.15) forwards !important;
}

.swal2-popup.ios-swal-popup,
.swal2-popup.ios-sheet-popup {
    border-radius: 28px !important;
    padding: 1.25rem 1.4rem 1.4rem !important;
    max-height: min(92vh, 880px) !important;
    display: flex !important;
    flex-direction: column !important;
}

/* iOS Sheet Handle / Grabber */
.ios-grabber {
    width: 40px;
    height: 5px;
    background: var(--ios-secondary);
    opacity: 0.35;
    border-radius: 999px;
    margin: 0 auto 0.9rem auto;
}

/* Title & Subtitle */
.swal2-popup .swal2-title {
    font-size: 1.22rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--ios-label) !important;
    margin: 0.4rem 0 0.5rem 0 !important;
    padding: 0 !important;
}

.swal2-popup.ios-swal-popup .swal2-title {
    margin-bottom: 0.75rem !important;
}

.swal2-popup .swal2-html-container {
    color: var(--ios-secondary) !important;
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
    margin: 0.35rem 0 0.75rem 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
}

.swal2-popup.ios-swal-popup .swal2-html-container {
    margin: 0 !important;
    padding: 0.15rem 0.2rem !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    text-align: left !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
}

/* iOS Styled Standard SweetAlert2 Status Icons */
.swal2-popup .swal2-icon {
    border-radius: 50% !important;
    border-width: 3.5px !important;
    margin: 1.1rem auto 0.75rem auto !important;
    width: 4.8rem !important;
    height: 4.8rem !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    animation: iosIconPopIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both !important;
    -webkit-animation: iosIconPopIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both !important;
}

/* Success Icon: Perfect Apple-Style Unified SVG Checkmark (Zero overlapping scissors seams) */
.swal2-popup .swal2-icon.swal2-success,
.swal2-icon.swal2-success {
    border-color: var(--ios-green) !important;
    background: rgba(var(--ios-green-rgb), 0.08) !important;
    box-shadow: 0 10px 26px rgba(var(--ios-green-rgb), 0.24) !important;
    color: var(--ios-green) !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    width: 4.8rem !important;
    height: 4.8rem !important;
    border-radius: 50% !important;
}

/* When enhanced with modern animated vector SVG, remove static CSS border */
.swal2-icon[data-ios-enhanced],
.swal2-popup .swal2-icon[data-ios-enhanced] {
    border: none !important;
    overflow: visible !important;
}

/* Completely suppress all legacy SweetAlert2 line segments, circular wrappers, and mask patches */
.swal2-icon[data-ios-enhanced] > span,
.swal2-icon[data-ios-enhanced] > div:not(.swal2-icon-content),
.swal2-icon[data-ios-enhanced] .swal2-icon-content,
.swal2-icon.swal2-success > span,
.swal2-icon.swal2-success > div:not(.swal2-icon-content),
.swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-icon.swal2-success .swal2-success-line-long,
.swal2-icon.swal2-success [class*="swal2-success-line"],
.swal2-icon.swal2-success [class*="swal2-success-circular-line"],
.swal2-icon.swal2-success .swal2-success-fix,
.swal2-icon.swal2-success .swal2-success-ring,
.swal2-popup .swal2-icon.swal2-success [class^='swal2-success-line'],
.swal2-popup .swal2-icon.swal2-success [class^='swal2-success-circular-line'],
.swal2-popup .swal2-icon.swal2-success .swal2-success-fix,
.swal2-popup .swal2-icon.swal2-success .swal2-success-ring {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    background: transparent !important;
    animation: none !important;
    -webkit-animation: none !important;
}

/* Hide fallback pseudo-elements when vector SVG is active */
.swal2-icon.swal2-success[data-ios-enhanced]::after,
.swal2-icon.swal2-error[data-ios-enhanced]::after,
.swal2-popup .swal2-icon.swal2-success[data-ios-enhanced]::after,
.swal2-popup .swal2-icon.swal2-error[data-ios-enhanced]::after {
    display: none !important;
    content: none !important;
}

/* Fallback static checkmark if JS is delayed */
.swal2-popup .swal2-icon.swal2-success:not([data-ios-enhanced])::after,
.swal2-icon.swal2-success:not([data-ios-enhanced])::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 2.35rem !important;
    height: 2.35rem !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2330d158' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E") !important;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
    animation: iosCheckmarkPop 0.38s 0.06s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

body[data-layout-mode="light"] .swal2-popup .swal2-icon.swal2-success:not([data-ios-enhanced])::after,
body[data-layout-mode="light"] .swal2-icon.swal2-success:not([data-ios-enhanced])::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334c759' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E") !important;
}

/* =========================================================
   Apple Live Animated Vector SVG Icons (Draw-in Motion)
   ========================================================= */
.ios-swal-svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    overflow: visible !important;
}

/* Circle track (subtle background guide) */
.ios-swal-circle-track {
    stroke: currentColor;
    opacity: 0.18;
}

/* Circle drawing animation (draws clockwise from 12 o'clock) */
.ios-swal-circle {
    stroke: currentColor;
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
    transform-origin: 27px 27px;
    transform: rotate(-90deg);
    animation: iosDrawCircle 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.08s forwards;
}

/* Vector V Checkmark drawing animation (sweeps down & whips up smoothly) */
.ios-swal-check {
    stroke: currentColor;
    stroke-dasharray: 42;
    stroke-dashoffset: 42;
    animation: iosDrawCheck 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}

/* Fluid finish without delayed bounce */
.swal2-icon.swal2-success[data-ios-enhanced="success"],
.swal2-popup .swal2-icon.swal2-success[data-ios-enhanced="success"] {
    animation: none !important;
}

/* Error Icon */
.swal2-popup .swal2-icon.swal2-error,
.swal2-icon.swal2-error {
    border-color: var(--ios-red) !important;
    background: rgba(var(--ios-red-rgb), 0.08) !important;
    box-shadow: 0 10px 26px rgba(var(--ios-red-rgb), 0.24) !important;
    color: var(--ios-red) !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    width: 4.8rem !important;
    height: 4.8rem !important;
    border-radius: 50% !important;
}

.swal2-icon.swal2-error > span,
.swal2-icon.swal2-error .swal2-x-mark,
.swal2-icon.swal2-error [class*="swal2-x-mark"],
.swal2-popup .swal2-icon.swal2-error [class^='swal2-x-mark'] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    background: transparent !important;
    animation: none !important;
    -webkit-animation: none !important;
}

.ios-swal-cross-1 {
    stroke: currentColor;
    stroke-dasharray: 26;
    stroke-dashoffset: 26;
    animation: iosDrawCross 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.18s forwards;
}

.ios-swal-cross-2 {
    stroke: currentColor;
    stroke-dasharray: 26;
    stroke-dashoffset: 26;
    animation: iosDrawCross 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.32s forwards;
}

/* Vector Info / Warning drawing animations */
.ios-swal-info-dot {
    opacity: 0;
    transform-origin: 27px 16.5px;
    animation: iosInfoPop 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.22s forwards;
}

.ios-swal-info-stem {
    stroke: currentColor;
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    animation: iosDrawStem 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.26s forwards;
}

/* Keyframe animations for real drawing motion */
@keyframes iosDrawCircle {
    0% {
        stroke-dashoffset: 160;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes iosDrawCheck {
    0% {
        stroke-dashoffset: 42;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes iosDrawCross {
    0% {
        stroke-dashoffset: 26;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes iosInfoPop {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes iosDrawStem {
    0% {
        stroke-dashoffset: 20;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes iosSuccessBounce {
    0% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.09);
    }
    75% {
        transform: scale(0.97);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes iosCheckmarkPop {
    0% {
        transform: translate(-50%, -50%) scale(0.35);
        opacity: 0;
    }
    68% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.swal2-popup .swal2-icon.swal2-warning {
    border-color: var(--ios-orange) !important;
    color: var(--ios-orange) !important;
    background: rgba(var(--ios-orange-rgb), 0.08) !important;
    box-shadow: 0 8px 24px rgba(var(--ios-orange-rgb), 0.22) !important;
}

.swal2-popup .swal2-icon.swal2-info {
    border-color: var(--ios-blue) !important;
    color: var(--ios-blue) !important;
    background: rgba(var(--ios-blue-rgb), 0.08) !important;
    box-shadow: 0 8px 24px rgba(var(--ios-blue-rgb), 0.22) !important;
}

.swal2-popup .swal2-icon.swal2-question {
    border-color: var(--ios-purple) !important;
    color: var(--ios-purple) !important;
    background: rgba(var(--ios-purple-rgb), 0.08) !important;
    box-shadow: 0 8px 24px rgba(var(--ios-purple-rgb), 0.22) !important;
}

/* iOS Standard Inputs inside SweetAlert2 */
.swal2-popup .swal2-input,
.swal2-popup .swal2-file,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select {
    background: var(--ios-input-bg) !important;
    border: 1px solid var(--ios-separator) !important;
    border-radius: 14px !important;
    color: var(--ios-label) !important;
    box-shadow: none !important;
    font-size: 0.95rem !important;
    padding: 0.65rem 0.95rem !important;
    margin: 0.85rem auto !important;
    transition: all 0.2s ease !important;
}

.swal2-popup .swal2-input:focus,
.swal2-popup .swal2-textarea:focus,
.swal2-popup .swal2-select:focus {
    outline: none !important;
    border-color: var(--ios-blue) !important;
    box-shadow: 0 0 0 4px var(--ios-input-focus) !important;
    background: var(--ios-card-inner) !important;
}

.swal2-popup .swal2-validation-message {
    background: rgba(var(--ios-red-rgb), 0.12) !important;
    color: var(--ios-red) !important;
    border: 1px solid rgba(var(--ios-red-rgb), 0.2) !important;
    border-radius: 12px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    padding: 0.6rem 0.85rem !important;
    margin: 0.75rem auto 0 !important;
}

/* =========================================================
   2. iOS Hero Header (Avatar / Squircle Icon + Title)
   ========================================================= */
.ios-hero-banner {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    padding: 0.85rem 1rem;
    background: var(--ios-card-bg);
    border: 1px solid var(--ios-separator);
    border-radius: 20px;
    margin-bottom: 1rem;
}

.ios-hero-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

.ios-hero-icon.is-key {
    background: linear-gradient(135deg, #ff9500, #ff5e3a);
}

.ios-hero-icon.is-device {
    background: linear-gradient(135deg, #007aff, #5856d6);
}

.ios-hero-icon.is-package {
    background: linear-gradient(135deg, #34c759, #30b0c7);
}

.ios-hero-icon.is-member {
    background: linear-gradient(135deg, #e14b54, #8f1921);
}

.ios-hero-icon.is-password {
    background: linear-gradient(135deg, #af52de, #5856d6);
}

.ios-hero-icon.bg-red,
.ios-hero-icon.is-danger {
    background: linear-gradient(135deg, #ff453a, #ff3b30);
}

.ios-hero-icon.bg-green,
.ios-hero-icon.is-success {
    background: linear-gradient(135deg, #30d158, #34c759);
}

.ios-hero-icon.bg-orange,
.ios-hero-icon.is-warning {
    background: linear-gradient(135deg, #ff9f0a, #ff9500);
}

.ios-hero-icon.bg-blue,
.ios-hero-icon.is-info {
    background: linear-gradient(135deg, #0a84ff, #007aff);
}

.ios-hero-icon.bg-purple {
    background: linear-gradient(135deg, #bf5af2, #af52de);
}

.ios-hero-text {
    flex: 1;
    min-width: 0;
}

.ios-hero-kicker {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ios-secondary);
}

.ios-hero-title {
    margin: 0.15rem 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ios-label);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ios-hero-subtitle {
    margin-top: 0.15rem;
    font-size: 0.82rem;
    color: var(--ios-secondary);
}

/* =========================================================
   3. iOS Inset Grouped Card & Cells
   ========================================================= */
.ios-section-header {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ios-secondary);
    margin: 0.9rem 0 0.35rem 0.5rem;
}

.ios-grouped-list {
    background: var(--ios-card-bg);
    border: 1px solid var(--ios-separator);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 0.85rem;
}

.ios-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 0.5px solid var(--ios-separator);
    min-height: 48px;
    transition: background 0.15s ease;
}

.ios-cell:last-child {
    border-bottom: none;
}

.ios-cell-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.ios-squircle-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.ios-squircle-icon.bg-blue { background: linear-gradient(135deg, #0a84ff, #007aff); }
.ios-squircle-icon.bg-green { background: linear-gradient(135deg, #30d158, #34c759); }
.ios-squircle-icon.bg-orange { background: linear-gradient(135deg, #ff9f0a, #ff9500); }
.ios-squircle-icon.bg-indigo { background: linear-gradient(135deg, #5e5ce6, #5856d6); }
.ios-squircle-icon.bg-purple { background: linear-gradient(135deg, #bf5af2, #af52de); }
.ios-squircle-icon.bg-pink { background: linear-gradient(135deg, #ff375f, #ff2d55); }
.ios-squircle-icon.bg-teal { background: linear-gradient(135deg, #64d2ff, #30b0c7); }
.ios-squircle-icon.bg-red { background: linear-gradient(135deg, #ff453a, #ff3b30); }
.ios-squircle-icon.bg-gray { background: linear-gradient(135deg, #8e8e93, #636366); }

.ios-cell-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ios-label);
    white-space: nowrap;
}

.ios-cell-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    text-align: right;
    min-width: 0;
    flex: 1;
}

.ios-cell-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ios-label);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ios-cell-key {
    max-width: 280px;
}

/* =========================================================
   4. iOS Pill Badges (Status, Mode, Level)
   ========================================================= */
.ios-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.68rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.ios-pill.is-active,
.ios-pill.is-green {
    background: rgba(var(--ios-green-rgb), 0.15);
    color: var(--ios-green);
    border: 1px solid rgba(var(--ios-green-rgb), 0.25);
}

.ios-pill.is-locked,
.ios-pill.is-expired,
.ios-pill.is-red {
    background: rgba(var(--ios-red-rgb), 0.15);
    color: var(--ios-red);
    border: 1px solid rgba(var(--ios-red-rgb), 0.25);
}

.ios-pill.is-pending,
.ios-pill.is-orange {
    background: rgba(var(--ios-orange-rgb), 0.15);
    color: var(--ios-orange);
    border: 1px solid rgba(var(--ios-orange-rgb), 0.25);
}

.ios-pill.is-blue {
    background: rgba(var(--ios-blue-rgb), 0.15);
    color: var(--ios-blue);
    border: 1px solid rgba(var(--ios-blue-rgb), 0.25);
}

.ios-pill.is-indigo {
    background: rgba(var(--ios-indigo-rgb), 0.15);
    color: var(--ios-indigo);
    border: 1px solid rgba(var(--ios-indigo-rgb), 0.25);
}

.ios-pill.is-gray {
    background: rgba(142, 142, 147, 0.12);
    color: var(--ios-secondary);
    border: 1px solid rgba(142, 142, 147, 0.2);
}

body[data-layout-mode="dark"] .ios-pill.is-gray {
    background: rgba(255, 255, 255, 0.12);
    color: #d1d1d6;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

/* =========================================================
   5. iOS Code & Quick Copy Row
   ========================================================= */
.ios-code-card {
    background: var(--ios-card-bg);
    border: 1px solid var(--ios-separator);
    border-radius: 18px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.85rem;
}

.ios-code-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.ios-code-card-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ios-secondary);
}

.ios-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.26rem 0.65rem;
    background: rgba(var(--ios-blue-rgb), 0.12);
    color: var(--ios-blue);
    border: 1px solid rgba(var(--ios-blue-rgb), 0.2);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ios-copy-btn:hover {
    background: rgba(var(--ios-blue-rgb), 0.22);
    transform: translateY(-1px);
}

.ios-copy-btn:active {
    transform: scale(0.95);
}

.ios-copy-btn.is-copied {
    background: rgba(var(--ios-green-rgb), 0.18);
    color: var(--ios-green);
    border-color: rgba(var(--ios-green-rgb), 0.3);
}

.ios-code-content {
    background: var(--ios-card-inner);
    border: 1px solid var(--ios-separator);
    border-radius: 12px;
    padding: 0.65rem 0.8rem;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--ios-label) !important;
    -webkit-text-fill-color: var(--ios-label) !important;
    word-break: break-all;
    user-select: all;
    font-weight: 600;
}

body[data-layout-mode="dark"] .ios-code-content {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* =========================================================
   6. iOS Segmented Control
   ========================================================= */
.ios-segmented-control {
    display: flex;
    align-items: center;
    background: var(--ios-seg-bg);
    border-radius: 12px;
    padding: 3px;
    position: relative;
    user-select: none;
    gap: 2px;
    margin-bottom: 0.65rem;
}

.ios-segment-btn {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--ios-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.45rem 0.65rem;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.ios-segment-btn.active {
    background: var(--ios-seg-active);
    color: var(--ios-seg-active-text);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.ios-segment-btn:hover:not(.active) {
    color: var(--ios-label);
}

/* Style active cho chip mức độ cảnh báo (Info / System / Warning) */
.ios-segment-btn[data-level="0"].active {
    background: rgba(48, 209, 88, 0.2) !important;
    color: #30d158 !important;
    border-color: rgba(48, 209, 88, 0.45) !important;
}

.ios-segment-btn[data-level="1"].active {
    background: rgba(10, 132, 255, 0.2) !important;
    color: #0a84ff !important;
    border-color: rgba(10, 132, 255, 0.45) !important;
}

.ios-segment-btn[data-level="2"].active {
    background: rgba(255, 69, 58, 0.2) !important;
    color: #ff453a !important;
    border-color: rgba(255, 69, 58, 0.45) !important;
}

/* =========================================================
   7. iOS Form Controls (Inputs, Selects, Textareas)
   ========================================================= */
.ios-input-group {
    background: var(--ios-card-bg);
    border: 1px solid var(--ios-separator);
    border-radius: 18px;
    padding: 0.95rem 1.05rem;
    margin-bottom: 0.85rem;
}

.ios-label-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.45rem;
}

.ios-label-text {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ios-secondary);
}

.ios-input,
.ios-select,
.ios-textarea {
    width: 100%;
    background: var(--ios-input-bg) !important;
    border: 1px solid var(--ios-separator) !important;
    border-radius: 13px !important;
    padding: 0.65rem 0.85rem !important;
    font-size: 0.92rem !important;
    color: var(--ios-label) !important;
    -webkit-text-fill-color: var(--ios-label) !important;
    transition: all 0.2s ease !important;
    font-family: inherit !important;
}

body[data-layout-mode="dark"] .ios-input,
body[data-layout-mode="dark"] .ios-select,
body[data-layout-mode="dark"] .ios-textarea {
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body[data-layout-mode="dark"] .ios-select option {
    background-color: #1e1e24 !important;
    color: #ffffff !important;
}

body[data-layout-mode="dark"] .ios-select option:checked {
    background-color: #2c2c36 !important;
    color: #ffffff !important;
}

.ios-input:focus,
.ios-select:focus,
.ios-textarea:focus {
    outline: none !important;
    border-color: var(--ios-blue) !important;
    background: var(--ios-card-inner) !important;
    box-shadow: 0 0 0 4px var(--ios-input-focus) !important;
}

.ios-input[readonly],
.ios-textarea[readonly] {
    opacity: 1 !important;
    cursor: default;
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: var(--ios-separator) !important;
    color: var(--ios-label) !important;
    -webkit-text-fill-color: var(--ios-label) !important;
}

body[data-layout-mode="dark"] .ios-input[readonly],
body[data-layout-mode="dark"] .ios-textarea[readonly] {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.ios-input::placeholder,
.ios-textarea::placeholder {
    color: rgba(60, 60, 67, 0.5) !important;
    opacity: 1 !important;
}

body[data-layout-mode="dark"] .ios-input::placeholder,
body[data-layout-mode="dark"] .ios-textarea::placeholder {
    color: rgba(255, 255, 255, 0.42) !important;
}

.ios-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.ios-input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.65;
}

body[data-layout-mode="dark"] .ios-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
body[data-layout-mode="dark"] .ios-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.2) !important;
    opacity: 0.85;
}

.ios-input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.ios-input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* =========================================================
   8. iOS Action Buttons
   ========================================================= */
.swal2-actions {
    margin-top: 1.15rem !important;
    gap: 0.75rem !important;
    flex-shrink: 0 !important;
}

.swal2-confirm.ios-btn-confirm,
.swal2-confirm {
    background: linear-gradient(135deg, var(--ios-blue), #005bb5) !important;
    color: #ffffff !important;
    border-radius: 14px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    padding: 0.72rem 1.5rem !important;
    min-height: 46px !important;
    box-shadow: 0 6px 18px rgba(var(--ios-blue-rgb), 0.32) !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

.swal2-confirm:hover {
    box-shadow: 0 8px 24px rgba(var(--ios-blue-rgb), 0.45) !important;
    transform: translateY(-1px) !important;
}

.swal2-cancel.ios-btn-cancel,
.swal2-cancel {
    background: rgba(142, 142, 147, 0.16) !important;
    color: var(--ios-secondary) !important;
    border-radius: 14px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    padding: 0.72rem 1.35rem !important;
    min-height: 46px !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

.swal2-cancel:hover {
    background: rgba(142, 142, 147, 0.26) !important;
    color: var(--ios-label) !important;
}

/* Instant Push Button (Gửi ngay) - iOS Vibrant Action */
.ios-btn-push {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    background: linear-gradient(135deg, var(--ios-blue), #5856d6);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(var(--ios-blue-rgb), 0.32);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ios-btn-push:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--ios-blue-rgb), 0.42);
}

.ios-btn-push:active {
    transform: scale(0.96);
}

/* iOS Callout Banner */
.ios-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 0.95rem;
    border-radius: 14px;
    font-size: 0.82rem;
    line-height: 1.45;
    margin-top: 0.6rem;
}

.ios-callout.is-blue {
    background: rgba(var(--ios-blue-rgb), 0.1);
    border: 1px solid rgba(var(--ios-blue-rgb), 0.18);
    color: var(--ios-blue);
}

.ios-callout.is-green {
    background: rgba(var(--ios-green-rgb), 0.1);
    border: 1px solid rgba(var(--ios-green-rgb), 0.18);
    color: var(--ios-green);
}

.ios-callout.is-muted {
    background: rgba(142, 142, 147, 0.1);
    border: 1px solid rgba(142, 142, 147, 0.16);
    color: var(--ios-secondary);
}

.ios-callout-icon {
    font-size: 1.15rem;
    margin-top: 1px;
}

/* =========================================================
   9. iOS Mobile Responsive System (Bottom Sheet & Compact UI)
   ========================================================= */

/* Tablets and below (iPad, Foldables, landscape phones) */
@media (max-width: 991.98px) {
    .swal2-popup.ios-swal-popup,
    .swal2-popup.ios-sheet-popup,
    .swal2-popup {
        max-width: 92vw !important;
        max-height: 88vh !important;
    }
}

/* Mobile Devices (iPhone & Android Phones) */
@media (max-width: 767.98px) {
    /* 1. iOS Centered Modal Container - Synchronized with PC */
    .swal2-container {
        padding: 1rem 0.75rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    .swal2-container.swal2-backdrop-show {
        background: rgba(0, 0, 0, 0.48) !important;
    }

    /* 2. iOS Modal Card - Hardware Accelerated 60fps/120fps Mobile Smoothness */
    .swal2-popup {
        width: min(92vw, 390px) !important;
        max-width: min(92vw, 390px) !important;
        min-width: 0 !important;
        margin: auto !important;
        border-radius: 24px !important;
        border: 1px solid var(--ios-border) !important;
        max-height: min(88vh, calc(100vh - 32px)) !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 1.35rem 1.25rem 1.35rem !important;
        box-sizing: border-box !important;
        box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.32), 0 0 1px rgba(0, 0, 0, 0.14) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: var(--ios-bg) !important;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        will-change: transform, opacity;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        overflow: hidden !important;
    }

    /* Detailed Dialogs & Edit Sheets */
    .swal2-popup.ios-swal-popup,
    .swal2-popup.ios-sheet-popup {
        width: min(94vw, 560px) !important;
        max-width: min(94vw, 560px) !important;
        border-radius: 26px !important;
        padding: 1.25rem 1.15rem 1.25rem !important;
    }

    .swal2-popup.swal2-show {
        animation: iosModalPopIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both !important;
    }

    .swal2-popup.swal2-hide {
        animation: iosModalPopOut 0.35s cubic-bezier(0.3, 0, 0.8, 0.15) forwards !important;
    }

    /* 3. Handle Grabber (Only present in explicit form sheets) */
    .ios-grabber {
        width: 36px !important;
        height: 4.5px !important;
        border-radius: 999px !important;
        background: var(--ios-secondary) !important;
        opacity: 0.35 !important;
        margin: 0 auto 0.75rem auto !important;
        flex-shrink: 0 !important;
    }

    /* 4. Internal Smooth Scroll Container */
    .swal2-popup.ios-swal-popup .swal2-html-container,
    .swal2-popup .swal2-html-container {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        padding: 0.15rem 0.25rem !important;
        margin: 0.35rem 0 0 0 !important;
    }

    .swal2-popup .swal2-html-container::-webkit-scrollbar {
        width: 4px;
    }
    .swal2-popup .swal2-html-container::-webkit-scrollbar-track {
        background: transparent;
    }
    .swal2-popup .swal2-html-container::-webkit-scrollbar-thumb {
        background: rgba(142, 142, 147, 0.35);
        border-radius: 999px;
    }

    /* 5. Synchronized Action Buttons - Matches PC exactly */
    .swal2-actions {
        flex-shrink: 0 !important;
        width: 100% !important;
        margin: 1.15rem 0 0 0 !important;
        padding: 0 !important;
        border-top: none !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.65rem !important;
        box-sizing: border-box !important;
    }

    /* Strictly respect SweetAlert button visibility - never force hidden Cancel to show */
    .swal2-actions button[style*="display: none"],
    .swal2-confirm[style*="display: none"],
    .swal2-cancel[style*="display: none"],
    .swal2-deny[style*="display: none"],
    .swal2-close[style*="display: none"] {
        display: none !important;
    }

    .swal2-confirm.ios-btn-confirm,
    .swal2-confirm,
    .swal2-cancel.ios-btn-cancel,
    .swal2-cancel {
        min-height: 44px !important;
        font-size: 0.92rem !important;
        font-weight: 600 !important;
        padding: 0.65rem 1.25rem !important;
        margin: 0 !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        transition: all 0.2s ease !important;
    }

    /* Single visible button layout (e.g. only [OK] or [Đã đọc!]) */
    .swal2-actions:not(:has(.swal2-cancel:not([style*="display: none"]))) .swal2-confirm,
    .swal2-actions[data-visible-buttons="1"] .swal2-confirm,
    .swal2-actions[data-visible-buttons="1"] .swal2-cancel {
        min-width: 140px !important;
        flex: 0 1 auto !important;
        margin: 0 auto !important;
    }

    /* Dual button layout (when both Confirm and Cancel are active) */
    .swal2-actions:has(.swal2-cancel:not([style*="display: none"])) .swal2-confirm,
    .swal2-actions:has(.swal2-confirm:not([style*="display: none"])) .swal2-cancel,
    .swal2-actions[data-visible-buttons="2"] .swal2-confirm,
    .swal2-actions[data-visible-buttons="2"] .swal2-cancel {
        flex: 1 1 110px !important;
        min-width: 0 !important;
    }

    /* 6. Hero Banner */
    .ios-hero-banner {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.65rem 0.75rem !important;
        padding: 0.72rem 0.85rem !important;
        border-radius: 16px !important;
        margin-bottom: 0.75rem !important;
    }

    .ios-hero-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        font-size: 1.35rem !important;
        border-radius: 12px !important;
    }

    .ios-hero-text {
        flex: 1 1 160px !important;
        min-width: 0 !important;
    }

    .ios-hero-kicker {
        font-size: 0.68rem !important;
        letter-spacing: 0.05em !important;
    }

    .ios-hero-title {
        font-size: 1.05rem !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .ios-hero-subtitle {
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .ios-hero-banner .ios-pill {
        font-size: 0.72rem !important;
        padding: 0.22rem 0.55rem !important;
        margin-left: auto !important;
    }

    /* 7. Section Header & Grouped List Cells */
    .ios-section-header {
        font-size: 0.72rem !important;
        margin: 0.75rem 0 0.35rem 0.25rem !important;
        letter-spacing: 0.05em !important;
    }

    .ios-grouped-list {
        border-radius: 16px !important;
        margin-bottom: 0.75rem !important;
    }

    .ios-cell {
        padding: 0.65rem 0.85rem !important;
        min-height: 44px !important;
        gap: 0.55rem !important;
        flex-wrap: wrap !important;
    }

    .ios-cell-left {
        flex: 1 0 auto !important;
        min-width: 100px !important;
    }

    .ios-squircle-icon {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        font-size: 0.92rem !important;
        border-radius: 7px !important;
    }

    .ios-cell-label {
        font-size: 0.85rem !important;
    }

    .ios-cell-right {
        flex: 1 0 auto !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
        gap: 0.35rem !important;
        justify-content: flex-end !important;
    }

    .ios-cell-value {
        font-size: 0.85rem !important;
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.35 !important;
        max-width: 100% !important;
    }

    .ios-cell-key {
        max-width: 100% !important;
        word-break: break-all !important;
    }

    .ios-pill {
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.3 !important;
    }

    /* 8. Code & Token Card */
    .ios-code-card {
        padding: 0.75rem 0.85rem !important;
        border-radius: 16px !important;
        margin-bottom: 0.75rem !important;
    }

    .ios-code-card-head {
        flex-wrap: wrap !important;
        gap: 0.45rem !important;
        margin-bottom: 0.45rem !important;
    }

    .ios-code-card-label {
        font-size: 0.75rem !important;
    }

    .ios-copy-btn {
        font-size: 0.74rem !important;
        padding: 0.32rem 0.65rem !important;
        min-height: 32px !important;
    }

    .ios-code-content {
        font-size: 0.78rem !important;
        line-height: 1.45 !important;
        padding: 0.55rem 0.7rem !important;
        border-radius: 10px !important;
        word-break: break-all !important;
    }

    /* 9. Form Inputs (Prevent iOS Safari Auto-Zoom) */
    .ios-input-group {
        padding: 0.75rem 0.85rem !important;
        border-radius: 16px !important;
        margin-bottom: 0.75rem !important;
    }

    .ios-label-text {
        font-size: 0.75rem !important;
    }

    .ios-input,
    .ios-select,
    .ios-textarea,
    .swal2-popup .swal2-input,
    .swal2-popup .swal2-select,
    .swal2-popup .swal2-textarea {
        font-size: 16px !important; /* CRITICAL: Prevents iOS auto-zoom */
        min-height: 44px !important;
        padding: 0.6rem 0.78rem !important;
        border-radius: 11px !important;
    }

    .ios-textarea,
    .swal2-popup .swal2-textarea {
        min-height: 68px !important;
        line-height: 1.4 !important;
    }

    /* 10. Segmented Controls & Notification Level Buttons */
    .ios-segmented-control {
        padding: 2.5px !important;
        gap: 2px !important;
        border-radius: 11px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .ios-segment-btn {
        padding: 0.42rem 0.35rem !important;
        font-size: 0.75rem !important;
        min-height: 36px !important;
        gap: 0.25rem !important;
        white-space: nowrap !important;
    }

    .ios-segment-btn i {
        font-size: 0.88rem !important;
    }

    #editPackageLevelGroup,
    #editDeviceLevelGroup {
        gap: 0.35rem !important;
    }

    #editPackageLevelGroup .ios-segment-btn,
    #editDeviceLevelGroup .ios-segment-btn {
        padding: 0.42rem 0.25rem !important;
        font-size: 0.75rem !important;
        min-height: 36px !important;
    }

    /* 11. Push Button ("Gửi ngay") */
    .ios-btn-push {
        padding: 0.3rem 0.65rem !important;
        font-size: 0.74rem !important;
    }

    /* 12. Package Picker inside Edit Key Modal */
    .swal2-popup .package-picker {
        grid-template-columns: 1fr !important;
        gap: 0.45rem !important;
    }

    .swal2-popup .package-picker-card {
        min-height: 42px !important;
        padding: 0.45rem 0.65rem !important;
        border-radius: 11px !important;
    }

    .swal2-popup .package-picker-label {
        font-size: 0.82rem !important;
    }

    /* 13. SweetAlert Standard Status Icons */
    .swal2-popup .swal2-icon {
        width: 3.8rem !important;
        height: 3.8rem !important;
        margin: 0.8rem auto 0.5rem auto !important;
    }

    /* 14. Bootstrap Standard Modals */
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }

    .modal-content {
        border-radius: 20px !important;
        overflow: hidden !important;
    }

    .modal-body {
        padding: 1rem !important;
        max-height: calc(85vh - 120px) !important;
        overflow-y: auto !important;
    }

    .modal-footer {
        padding: 0.75rem 1rem !important;
        flex-wrap: nowrap !important;
    }

    .modal-footer > * {
        flex: 1 1 0 !important;
        margin: 0 0.25rem !important;
    }
}

/* Extra small smartphones (iPhone SE, Galaxy A, screens <= 380px) */
@media (max-width: 380px) {
    .swal2-popup {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        padding: 1.15rem 0.95rem 1.15rem !important;
        border-radius: 22px !important;
    }

    .swal2-popup.ios-swal-popup,
    .swal2-popup.ios-sheet-popup {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        padding: 1.1rem 0.9rem 1.1rem !important;
        border-radius: 24px !important;
    }

    .ios-cell {
        padding: 0.6rem 0.65rem !important;
        gap: 0.45rem !important;
    }

    .ios-cell-left {
        gap: 0.45rem !important;
    }

    .ios-segment-btn {
        font-size: 0.7rem !important;
        padding: 0.38rem 0.2rem !important;
    }

    .ios-hero-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        font-size: 1.2rem !important;
    }
}

/* Native Apple iOS Modal Spring Pop-in (Silky Smooth) */
@keyframes iosModalPopIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 16px, 0) scale(0.92);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* Native Apple iOS Modal Exit */
@keyframes iosModalPopOut {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate3d(0, 8px, 0) scale(0.94);
    }
}

/* Modal Icon Entrance */
@keyframes iosIconPopIn {
    0% {
        opacity: 0;
        transform: scale(0.7) translate3d(0, 0, 0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translate3d(0, 0, 0);
    }
}

/* Backdrop Fade In / Out */
@keyframes iosBackdropFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes iosBackdropFadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* 10. Inner Scrollable Modal Containers (e.g. Created Keys Card) */
.created-keys-card,
[data-scrollable="true"] {
    max-height: 230px;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
    position: relative;
}

.created-keys-card::-webkit-scrollbar,
[data-scrollable="true"]::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.created-keys-card::-webkit-scrollbar-track,
[data-scrollable="true"]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 999px;
}

.created-keys-card::-webkit-scrollbar-thumb,
[data-scrollable="true"]::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.35);
    border-radius: 999px;
}

.created-keys-card::-webkit-scrollbar-thumb:hover,
[data-scrollable="true"]::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.6);
}

.created-key-item {
    touch-action: pan-y !important;
}

.created-key-code {
    touch-action: pan-y !important;
}

@media (max-width: 767.98px), (pointer: coarse) {
    .created-key-code {
        -webkit-user-select: text !important;
        user-select: text !important;
        touch-action: pan-y !important;
    }
}

body[data-layout-mode="dark"] .created-keys-card::-webkit-scrollbar-track,
body[data-layout-mode="dark"] [data-scrollable="true"]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
}

body[data-layout-mode="dark"] .created-keys-card::-webkit-scrollbar-thumb,
body[data-layout-mode="dark"] [data-scrollable="true"]::-webkit-scrollbar-thumb {
    background: rgba(129, 140, 248, 0.4);
}