/* vmcloud 潘多拉 - iOS / iPhone Design System (Apple-style frosted glass + mesh gradient) */
:root {
    --ios-blue:#0071E3; --ios-blue-2:#0A84FF; --ios-pink:#FF2D55; --ios-green:#34C759;
    --ios-orange:#FF9500; --ios-red:#FF3B30; --ios-yellow:#FFCC00; --ios-purple:#AF52DE;
    --ios-teal:#5AC8FA; --ios-indigo:#5856D6; --ios-mint:#00C7BE;
    --ios-label:#1C1C1E; --ios-label-2:rgba(60,60,67,0.85); --ios-label-3:rgba(60,60,67,0.60); --ios-label-4:rgba(60,60,67,0.30);
    --ios-separator:rgba(60,60,67,0.12);
    --glass-bg:rgba(255,255,255,0.72); --glass-bg-2:rgba(255,255,255,0.55); --glass-bg-3:rgba(255,255,255,0.88);
    --glass-border:rgba(255,255,255,0.6); --glass-border-2:rgba(255,255,255,0.35);
    --glass-shadow:0 8px 32px rgba(17,24,39,0.10),0 1px 0 rgba(255,255,255,0.7) inset,0 -1px 0 rgba(17,24,39,0.04) inset;
    --r-card:22px; --r-control:14px; --r-icon:22px; --r-pill:980px;
    --ease-spring:cubic-bezier(0.34,1.56,0.64,1); --ease-out:cubic-bezier(0.16,1,0.3,1);
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body {
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,"PingFang SC","Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    color:var(--ios-label); min-height:100vh;
}
body {
    color:var(--ios-label); background-color:#e9eef6;
    background-image:
        radial-gradient(at 11% 16%, rgba(125,211,252,0.95) 0px, transparent 45%),
        radial-gradient(at 86% 12%, rgba(244,143,177,0.85) 0px, transparent 42%),
        radial-gradient(at 78% 78%, rgba(196,181,253,0.95) 0px, transparent 48%),
        radial-gradient(at 14% 78%, rgba(253,226,135,0.80) 0px, transparent 44%),
        radial-gradient(at 50% 50%, rgba(94,200,250,0.35) 0px, transparent 55%),
        linear-gradient(135deg, #fef6e4 0%, #dde9ff 48%, #ece1fc 100%);
    background-attachment:fixed; background-size:cover;
}
body::before, body::after {
    content:""; position:fixed; border-radius:50%; filter:blur(70px); z-index:0;
    pointer-events:none; opacity:0.55; animation:floatOrb 18s ease-in-out infinite;
}
body::before { width:380px; height:380px; background:radial-gradient(circle, rgba(175,82,222,0.5), transparent 70%); top:-80px; left:-60px; }
body::after { width:460px; height:460px; background:radial-gradient(circle, rgba(90,200,250,0.45), transparent 70%); bottom:-120px; right:-100px; animation-delay:-9s; }
@keyframes floatOrb { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(30px,-25px) scale(1.08); } }
.glass {
    background:var(--glass-bg);
    backdrop-filter:blur(40px) saturate(180%);
    -webkit-backdrop-filter:blur(40px) saturate(180%);
    border:1px solid var(--glass-border); box-shadow:var(--glass-shadow); border-radius:var(--r-card);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))) {
    .glass { background:rgba(255,255,255,0.96); }
}
.btn-ios, .ios-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border:none; cursor:pointer; font-family:inherit; font-weight:600; font-size:1rem; letter-spacing:-0.01em;
    padding:14px 22px; border-radius:var(--r-pill);
    background:linear-gradient(180deg, #2E9BFF, var(--ios-blue)); color:#fff;
    box-shadow:0 4px 14px rgba(0,113,227,0.35), 0 1px 0 rgba(255,255,255,0.4) inset;
    transition:transform 0.35s var(--ease-spring), box-shadow 0.25s var(--ease-out), filter 0.2s;
    text-decoration:none; -webkit-tap-highlight-color:transparent;
}
.btn-ios:hover, .ios-btn:hover { transform:scale(1.03); filter:brightness(1.05); }
.btn-ios:active, .ios-btn:active { transform:scale(0.97); }
.btn-ios.ios-pink   { background:linear-gradient(180deg, #FF5E7A, var(--ios-pink));   box-shadow:0 4px 14px rgba(255,45,85,0.35), 0 1px 0 rgba(255,255,255,0.4) inset; }
.btn-ios.ios-green  { background:linear-gradient(180deg, #4ADE80, var(--ios-green));  box-shadow:0 4px 14px rgba(52,199,89,0.35), 0 1px 0 rgba(255,255,255,0.4) inset; }
.btn-ios.ios-orange { background:linear-gradient(180deg, #FFB23C, var(--ios-orange));   box-shadow:0 4px 14px rgba(255,149,0,0.35), 0 1px 0 rgba(255,255,255,0.4) inset; }
.btn-ios.ios-gray, .ios-btn.ghost {
    background:var(--glass-bg-2);
    backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
    color:var(--ios-label); border:1px solid var(--glass-border);
    box-shadow:0 2px 8px rgba(17,24,39,0.08), 0 1px 0 rgba(255,255,255,0.6) inset;
}
.btn-ios.block { width:100%; }
.btn-ios:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
.ios-input {
    width:100%; padding:15px 18px;
    border:1px solid rgba(60,60,67,0.18); border-radius:var(--r-control);
    background:rgba(255,255,255,0.7);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    color:var(--ios-label); font-size:1rem; font-family:inherit; outline:none;
    transition:border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.ios-input::placeholder { color:var(--ios-label-4); }
.ios-input:focus { border-color:var(--ios-blue); background:rgba(255,255,255,0.92); box-shadow:0 0 0 4px rgba(0,113,227,0.18); }
.center-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; position:relative; z-index:1; }
.center-card { width:100%; max-width:440px; padding:44px 36px; text-align:center; position:relative; z-index:1; }
.center-card.wide { max-width:560px; }
.ios-logo { width:76px; height:76px; border-radius:22px; filter:drop-shadow(0 8px 20px rgba(0,113,227,0.35)); margin:0 auto 14px; }
.ios-title {
    font-size:1.7rem; font-weight:700; letter-spacing:-0.02em;
    background:linear-gradient(135deg, #5AC8FA, #0071E3 50%, #AF52DE);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.ios-subtitle { color:var(--ios-label-2); font-size:0.95rem; margin-top:6px; font-weight:400; }
.ios-pill {
    display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:var(--r-pill);
    background:rgba(0,113,227,0.12); color:var(--ios-blue); font-size:0.8rem; font-weight:600; border:1px solid rgba(0,113,227,0.18);
}
.ios-pill.warn { background:rgba(255,149,0,0.12); color:var(--ios-orange); border-color:rgba(255,149,0,0.2); }
.ios-pill.danger { background:rgba(255,59,48,0.12); color:var(--ios-red); border-color:rgba(255,59,48,0.2); }
.ios-pill.green { background:rgba(52,199,89,0.12); color:var(--ios-green); border-color:rgba(52,199,89,0.2); }
.ios-pill.purple { background:rgba(175,82,222,0.12); color:var(--ios-purple); border-color:rgba(175,82,222,0.2); }
.ios-divider { display:flex; align-items:center; margin:22px 0; color:var(--ios-label-3); font-size:0.82rem; }
.ios-divider::before, .ios-divider::after { content:""; flex:1; height:1px; background:var(--ios-separator); }
.ios-divider span { padding:0 12px; }
.ios-error {
    color:var(--ios-red); font-size:0.88rem; margin-top:12px; display:none;
    padding:10px 14px; background:rgba(255,59,48,0.08); border-radius:10px; border:1px solid rgba(255,59,48,0.2);
}
.ios-error.show { display:block; animation:shake 0.4s var(--ease-out); }
@keyframes shake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-6px); } 75% { transform:translateX(6px); } }
.price-card {
    background:linear-gradient(135deg, rgba(0,113,227,0.10), rgba(175,82,222,0.06));
    border:1px solid rgba(0,113,227,0.18); border-radius:var(--r-card); padding:24px; margin:24px 0;
}
.price-card .amount {
    font-size:2.6rem; font-weight:800; letter-spacing:-0.03em;
    background:linear-gradient(135deg, var(--ios-blue), var(--ios-purple));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.price-card .period { color:var(--ios-label-3); font-size:0.95rem; }
.big-emoji { font-size:4rem; line-height:1; margin-bottom:10px; display:inline-block; animation:popIn 0.6s var(--ease-spring); }
@keyframes popIn { 0% { transform:scale(0); opacity:0; } 60% { transform:scale(1.15); } 100% { transform:scale(1); opacity:1; } }
.muted { color:var(--ios-label-3); }
.mt-12 { margin-top:12px; } .mt-16 { margin-top:16px; } .mt-24 { margin-top:24px; }
.text-center { text-align:center; }
.link-back { display:inline-block; margin-top:18px; color:var(--ios-blue); text-decoration:none; font-size:0.9rem; font-weight:500; }
.link-back:hover { text-decoration:underline; }
.fade-in { animation:fadeIn 0.5s var(--ease-out); }
@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:600px) { .center-card { padding:32px 22px; } .ios-title { font-size:1.45rem; } }