/* ================================================
   iOS 26 Liquid Glass Design System
   Pure · Minimal · Premium
================================================ */

/* ── System Font Stack (SF Pro / -apple-system) ── */
:root {
    /* ── iOS System Colors ── */
    --blue:        #007AFF;
    --green:       #34C759;
    --tint:        #007AFF;

    /* ── Light Mode Surface ── */
    --bg:          #F2F2F7;
    --surface-1:   rgba(255, 255, 255, 0.72);
    --surface-2:   rgba(255, 255, 255, 0.55);
    --surface-3:   rgba(255, 255, 255, 0.38);
    --surface-fill:rgba(120, 120, 128, 0.12);
    --surface-sep: rgba(60, 60, 67, 0.13);

    /* ── Text ── */
    --label:       rgba(0, 0, 0, 0.88);
    --label-2:     rgba(60, 60, 67, 0.60);
    --label-3:     rgba(60, 60, 67, 0.38);
    --label-4:     rgba(60, 60, 67, 0.18);

    /* ── Blur & Radius ── */
    --blur-sm:     16px;
    --blur-md:     28px;
    --blur-lg:     48px;
    --r-sm:        12px;
    --r-md:        18px;
    --r-lg:        26px;
    --r-xl:        34px;
    --r-pill:      999px;

    /* ── Liquid Glass Borders ── */
    --glass-border-light: rgba(255, 255, 255, 0.65);
    --glass-border-dark:  rgba(255, 255, 255, 0.12);

    /* ── Shadow ── */
    --shadow-xs:   0 1px 3px rgba(0,0,0,0.06);
    --shadow-sm:   0 4px 16px rgba(0,0,0,0.07);
    --shadow-md:   0 8px 32px rgba(0,0,0,0.10);
    --shadow-lg:   0 20px 60px rgba(0,0,0,0.14);

    /* ── Transitions ── */
    --spring:      cubic-bezier(0.32, 0.72, 0, 1);
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast:    140ms;
    --dur-mid:     280ms;
    --dur-slow:    480ms;
}

/* ── Dark Mode ── */
[data-theme="dark"] {
    --bg:          #000000;
    --surface-1:   rgba(28, 28, 30, 0.78);
    --surface-2:   rgba(44, 44, 46, 0.65);
    --surface-3:   rgba(58, 58, 60, 0.50);
    --surface-fill:rgba(120, 120, 128, 0.18);
    --surface-sep: rgba(84, 84, 88, 0.60);

    --label:       rgba(255, 255, 255, 0.92);
    --label-2:     rgba(235, 235, 245, 0.60);
    --label-3:     rgba(235, 235, 245, 0.38);
    --label-4:     rgba(235, 235, 245, 0.18);
}

/* ── Reset ── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* ── Body & Background ── */
body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
                 "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: var(--bg);
    color: var(--label);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100dvh;
    overflow-x: hidden;
}

/* ── Ambient background orbs (subtle, not flashy) ── */
body::before,
body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

body::before {
    width: 380px;
    height: 380px;
    background: rgba(0, 122, 255, 0.07);
    top: -120px;
    right: -100px;
}

body::after {
    width: 300px;
    height: 300px;
    background: rgba(52, 199, 89, 0.05);
    bottom: 60px;
    left: -80px;
}

[data-theme="dark"] body::before { background: rgba(0, 122, 255, 0.10); }
[data-theme="dark"] body::after  { background: rgba(52, 199, 89, 0.07); }

/* ── Layout ── */
.container {
    position: relative;
    max-width: 390px;
    margin: 0 auto;
    padding: 0 16px 48px;
    z-index: 1;
}

/* ================================================
   LIQUID GLASS MIXIN (applied via classes)
================================================ */
.glass {
    background: var(--surface-1);
    backdrop-filter: blur(var(--blur-md)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--blur-md)) saturate(180%);
    border: 1px solid var(--glass-border-light);
    box-shadow: var(--shadow-sm),
                inset 0 1px 0 rgba(255,255,255,0.6),
                inset 0 -1px 0 rgba(0,0,0,0.04);
}

[data-theme="dark"] .glass {
    background: var(--surface-1);
    border-color: var(--glass-border-dark);
    box-shadow: var(--shadow-sm),
                inset 0 1px 0 rgba(255,255,255,0.08),
                inset 0 -1px 0 rgba(0,0,0,0.20);
}

/* ================================================
   HERO SECTION
================================================ */
.hero-section {
    text-align: center;
    padding: 52px 0 28px;
}

.hero-icon-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

.hero-icon {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    object-fit: cover;
    display: block;
    background-color: var(--surface-fill);
    position: relative;
    z-index: 1;
    box-shadow: var(--shadow-sm),
                0 0 0 1px rgba(0,0,0,0.06);
}

/* Liquid glass ring behind icon */
.hero-icon-wrap::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 28px;
    background: var(--surface-2);
    backdrop-filter: blur(var(--blur-sm)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(160%);
    border: 1px solid var(--glass-border-light);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
    z-index: 0;
}

[data-theme="dark"] .hero-icon-wrap::before {
    border-color: var(--glass-border-dark);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.hero-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.6px;
    color: var(--label);
    margin-bottom: 6px;
    line-height: 1.2;
}

.hero-version {
    font-size: 13px;
    color: var(--label-2);
    font-weight: 450;
    letter-spacing: 0;
}

/* ================================================
   CARDS
================================================ */
.action-card,
.card {
    background: var(--surface-1);
    backdrop-filter: blur(var(--blur-md)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--blur-md)) saturate(180%);
    border-radius: var(--r-xl);
    padding: 22px 20px;
    border: 1px solid var(--glass-border-light);
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm),
                inset 0 1px 0 rgba(255,255,255,0.70),
                inset 0 -1px 0 rgba(0,0,0,0.03);
    transition: box-shadow var(--dur-mid) var(--ease-out);
}

[data-theme="dark"] .action-card,
[data-theme="dark"] .card {
    border-color: var(--glass-border-dark);
    box-shadow: var(--shadow-sm),
                inset 0 1px 0 rgba(255,255,255,0.07),
                inset 0 -1px 0 rgba(0,0,0,0.20);
}

/* ================================================
   MODE SWITCHER  — Liquid Segment Control
================================================ */
.mode-switch {
    display: flex;
    background: var(--surface-fill);
    padding: 3px;
    border-radius: var(--r-md);
    margin-bottom: 22px;
    gap: 2px;
    border: 1px solid var(--surface-sep);
}

.mode-item {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 590;
    cursor: pointer;
    border-radius: calc(var(--r-md) - 4px);
    transition: all var(--dur-mid) var(--spring);
    color: var(--label-2);
    white-space: nowrap;
    letter-spacing: -0.1px;
    user-select: none;
}

.mode-item.active {
    background: var(--surface-1);
    color: var(--label);
    box-shadow: var(--shadow-xs),
                inset 0 1px 0 rgba(255,255,255,0.80),
                inset 0 -1px 0 rgba(0,0,0,0.04);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
}

[data-theme="dark"] .mode-item.active {
    background: rgba(80, 80, 84, 0.70);
    color: var(--label);
    box-shadow: var(--shadow-xs),
                inset 0 1px 0 rgba(255,255,255,0.09),
                inset 0 -1px 0 rgba(0,0,0,0.22);
}

/* ================================================
   INPUTS — Liquid Fill Style
================================================ */
.input-group {
    margin-bottom: 14px;
}

.input-group label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--label-2);
    margin-bottom: 8px;
    padding-left: 4px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.input-group input {
    width: 100%;
    height: 50px;
    background: var(--surface-fill);
    border: 1.5px solid transparent;
    border-radius: var(--r-md);
    padding: 0 16px;
    font-size: 16px;
    font-weight: 450;
    color: var(--label);
    font-family: inherit;
    transition: background var(--dur-mid) var(--ease-out),
                border-color var(--dur-mid) var(--ease-out),
                box-shadow var(--dur-mid) var(--ease-out);
    -webkit-appearance: none;
    appearance: none;
}

.input-group input::placeholder {
    color: var(--label-3);
    font-weight: 400;
}

.input-group input:focus {
    outline: none;
    background: var(--surface-2);
    border-color: var(--blue);
    box-shadow: 0 0 0 3.5px rgba(0, 122, 255, 0.14);
}

/* Monospace UDID input */
#udidInput {
    text-align: center;
    font-family: 'SF Mono', 'Menlo', 'Courier New', monospace;
    letter-spacing: 0.5px;
    font-size: 14px;
}

/* ================================================
   BUTTONS — Liquid Pill Style
================================================ */
.btn {
    width: 100%;
    height: 54px;
    border-radius: var(--r-lg);
    border: none;
    font-size: 17px;
    font-weight: 610;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    letter-spacing: -0.2px;
    transition: transform var(--dur-fast) var(--spring),
                opacity var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-mid) var(--ease-out);
    position: relative;
    overflow: hidden;
    -webkit-appearance: none;
    user-select: none;
}

/* Liquid inner sheen on buttons */
.btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: rgba(255,255,255,0.14);
    border-radius: var(--r-lg) var(--r-lg) 60% 60% / var(--r-lg) var(--r-lg) 30% 30%;
    pointer-events: none;
}

.btn:active {
    transform: scale(0.96);
    opacity: 0.88;
}

.btn-primary {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.28),
                inset 0 1px 0 rgba(255,255,255,0.22);
}

.btn-primary.green {
    background: var(--green);
    box-shadow: 0 6px 20px rgba(52, 199, 89, 0.28),
                inset 0 1px 0 rgba(255,255,255,0.22);
}

/* Secondary ghost button */
.btn-ghost {
    background: var(--surface-fill);
    color: var(--label);
    border: 1px solid var(--surface-sep);
    box-shadow: var(--shadow-xs);
    font-size: 15px;
    height: 46px;
}

.btn-ghost::before { display: none; }
.btn-ghost:active { transform: scale(0.97); }

/* ================================================
   MANUAL UPLOAD FIELDS
================================================ */
.manual-fields { display: none; margin-top: 14px; }
.cert-download-fields { display: none; margin-top: 14px; }
.enterprise-fields { display: none; margin-top: 14px; }

.file-upload-box {
    position: relative;
    background: var(--surface-fill);
    border: 1.5px dashed var(--surface-sep);
    border-radius: var(--r-md);
    padding: 15px 16px;
    margin-bottom: 12px;
    transition: background var(--dur-mid) var(--ease-out),
                border-color var(--dur-mid) var(--ease-out);
    cursor: pointer;
}

.file-upload-box:active {
    background: var(--surface-2);
    border-style: solid;
    border-color: var(--blue);
}

.file-upload-box label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--label-3);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    pointer-events: none;
}

.file-name-display {
    font-size: 14px;
    font-weight: 500;
    color: var(--label);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.file-input-hidden {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* ================================================
   CERT LIST
================================================ */
.cert-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cert-item {
    background: var(--surface-fill);
    border: 1px solid var(--surface-sep);
    border-radius: var(--r-md);
    padding: 15px;
}

.cert-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--label);
    margin-bottom: 5px;
}

.cert-note {
    font-size: 12px;
    color: var(--label-2);
    margin-bottom: 10px;
    white-space: pre-wrap;
    line-height: 1.55;
}

.cert-password {
    font-size: 12px;
    color: var(--label-2);
    margin-bottom: 10px;
}

.cert-actions { display: flex; }

.cert-download-btn {
    height: 40px;
    border-radius: var(--r-sm);
    background: var(--blue);
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    width: 100%;
    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.22);
    transition: opacity var(--dur-fast);
}

.cert-download-btn:active { opacity: 0.80; }

.cert-empty {
    color: var(--label-2);
    font-size: 13px;
    text-align: center;
    padding: 20px 0;
}

/* ================================================
   INSTALL GUIDE
================================================ */
.install-guide {
    text-align: left;
    margin-top: 10px;
    padding: 0 2px;
}

.install-guide h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--label-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    padding-left: 4px;
}

.guide-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 14px;
    gap: 13px;
}

.step-num {
    width: 22px;
    height: 22px;
    background: var(--surface-fill);
    color: var(--blue);
    border: 1px solid var(--surface-sep);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.step-text {
    font-size: 13.5px;
    color: var(--label-2);
    line-height: 1.6;
}

/* ================================================
   OVERLAY / MODAL — Liquid Sheet
================================================ */
#overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    z-index: 1000;
    transition: opacity var(--dur-mid) var(--ease-out);
}

/* Slide-up sheet */
#overlay > .card {
    width: 100%;
    max-width: 390px;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: 28px 24px calc(28px + env(safe-area-inset-bottom));
    margin-bottom: 0;
    text-align: center;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: var(--shadow-lg),
                inset 0 1px 0 rgba(255,255,255,0.65);
    animation: slideUp var(--dur-slow) var(--spring) forwards;
}

[data-theme="dark"] #overlay > .card {
    box-shadow: var(--shadow-lg),
                inset 0 1px 0 rgba(255,255,255,0.09);
}

@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Handle bar */
#overlay > .card::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--surface-sep);
    border-radius: var(--r-pill);
    margin: 0 auto 24px;
}

/* Close button */
#closeOverlay {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 30px;
    height: 30px;
    background: var(--surface-fill);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    color: var(--label-2);
    line-height: 1;
    border: 1px solid var(--surface-sep);
    transition: background var(--dur-fast), opacity var(--dur-fast);
}

#closeOverlay:active { opacity: 0.6; }

/* ================================================
   SPINNER — SF-style Activity Indicator
================================================ */
.spinner {
    width: 34px;
    height: 34px;
    border: 3px solid var(--surface-sep);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin 0.72s linear infinite;
    margin: 0 auto 18px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ================================================
   SUCCESS ICON
================================================ */
#successStatus svg {
    filter: drop-shadow(0 4px 12px rgba(52, 199, 89, 0.35));
}

/* ================================================
   HINT TEXT (below main button)
================================================ */
.hint-text {
    text-align: center;
    font-size: 12px;
    margin-top: 14px;
    color: var(--label-3);
    letter-spacing: 0;
}

/* ================================================
   APP DESCRIPTION CARD
================================================ */
.app-desc-card h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--label-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.app-desc-card p {
    font-size: 14px;
    color: var(--label-2);
    line-height: 1.65;
    white-space: pre-line;
}

/* ================================================
   FOOTER
================================================ */
footer {
    text-align: center;
    padding: 36px 0 16px;
    font-size: 11px;
    color: var(--label-3);
    letter-spacing: 0.3px;
}

/* ================================================
   UTILITY
================================================ */
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-0  { margin-bottom: 0; }