*{margin:0;padding:0;box-sizing:border-box}

:root{
    --primary:#4F6EF7;--primary-light:#6B8AFF;--primary-dark:#3A54D4;
    --success:#22C55E;--danger:#EF4444;--warning:#F59E0B;
    --gray-50:#F9FAFB;--gray-100:#F3F4F6;--gray-200:#E5E7EB;--gray-300:#D1D5DB;
    --gray-400:#9CA3AF;--gray-500:#6B7280;--gray-600:#4B5563;--gray-700:#374151;
    --gray-800:#1F2937;--gray-900:#111827;
    --radius:12px;--radius-lg:20px;
    --shadow:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:0 4px 6px -1px rgba(0,0,0,0.07),0 2px 4px -1px rgba(0,0,0,0.04);
    --shadow-lg:0 10px 25px -3px rgba(0,0,0,0.08),0 4px 6px -2px rgba(0,0,0,0.03);
    --shadow-xl:0 20px 40px -5px rgba(0,0,0,0.1);
    --transition:all 0.25s cubic-bezier(0.4,0,0.2,1);
}

body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    background:#F0F2F5;min-height:100vh;min-height:100dvh;
    color:var(--gray-800);-webkit-font-smoothing:antialiased;
}

/* 布局 */
.container{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:16px;position:relative;overflow:hidden}
.card-wrapper{width:100%;max-width:440px;z-index:10}
.card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);overflow:hidden;animation:cardIn 0.5s cubic-bezier(0.16,1,0.3,1)}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* 头部 */
.card-header{text-align:center;padding:36px 24px 28px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);color:#fff;position:relative}
.card-header::after{content:'';position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);width:40px;height:40px;background:#fff;border-radius:50%;box-shadow:var(--shadow)}
.logo{width:56px;height:56px;margin:0 auto 12px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px);animation:logoSpin 20s linear infinite}
@keyframes logoSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.logo svg{color:#fff;animation:logoSpin 20s linear infinite reverse}
.card-header h1{font-size:20px;font-weight:600;margin-bottom:4px;letter-spacing:0.5px}
.subtitle{font-size:13px;opacity:0.85;font-weight:400}

/* 内容 */
.card-body{padding:28px 24px 24px}

/* 表单/结果切换 */
.form-section{display:none}
.form-section.active{display:block;animation:fadeSlideIn 0.3s cubic-bezier(0.16,1,0.3,1)}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* 输入框 */
.input-group{margin-bottom:16px}
.input-group label{display:block;font-size:14px;font-weight:500;color:var(--gray-700);margin-bottom:6px}
.input-wrapper{position:relative;display:flex;align-items:center}
.input-icon{position:absolute;left:14px;color:var(--gray-400);pointer-events:none;transition:var(--transition)}
.input-wrapper input{width:100%;padding:12px 40px 12px 44px;border:1.5px solid var(--gray-200);border-radius:var(--radius);font-size:15px;color:var(--gray-800);background:var(--gray-50);transition:var(--transition);outline:none;font-family:inherit;letter-spacing:0.5px;-webkit-appearance:none}
.input-wrapper input::placeholder{color:var(--gray-400)}
.input-wrapper input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(79,110,247,0.1)}
.input-clear{position:absolute;right:12px;cursor:pointer;color:var(--gray-400);padding:4px;border-radius:50%;transition:var(--transition);display:flex;align-items:center}
.input-clear:hover{color:var(--gray-600);background:var(--gray-100)}

/* 按钮 */
.btn{width:100%;padding:14px;border:none;border-radius:var(--radius);font-size:15px;font-weight:600;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.btn::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,255,255,0.2) 0%,transparent 60%);opacity:0;transition:opacity 0.3s}
.btn:hover::after{opacity:1}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(79,110,247,0.3);margin-top:4px}
.btn-primary:hover{background:var(--primary-dark);box-shadow:0 4px 12px rgba(79,110,247,0.4);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0);box-shadow:0 1px 4px rgba(79,110,247,0.3)}
.btn-primary:disabled{background:var(--gray-300);cursor:not-allowed;box-shadow:none;transform:none}
.btn-secondary{background:var(--gray-100);color:var(--gray-600);margin-top:16px}
.btn-secondary:hover{background:var(--gray-200);color:var(--gray-700)}

/* 结果 */
.result-box{text-align:center;padding:20px 0}
.result-icon{width:72px;height:72px;margin:0 auto 20px;border-radius:50%;display:flex;align-items:center;justify-content:center;animation:resultPop 0.5s cubic-bezier(0.16,1,0.3,1)}
@keyframes resultPop{from{opacity:0;transform:scale(0.5)}50%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}
.result-icon.success{background:#ECFDF5;color:var(--success)}
.result-icon.error{background:#FEF2F2;color:var(--danger)}
.result-box h3{font-size:18px;font-weight:600;color:var(--gray-800);margin-bottom:8px}
.result-box p{font-size:14px;color:var(--gray-500);line-height:1.5}

/* 页脚 */
.card-footer{padding:14px 24px;text-align:center;border-top:1px solid var(--gray-100)}
.card-footer p{font-size:12px;color:var(--gray-400)}

/* 背景装饰 */
.bg-decor{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.circle{position:absolute;border-radius:50%;opacity:0.06}
.c1{width:500px;height:500px;background:var(--primary);top:-150px;right:-150px;animation:float 20s ease-in-out infinite}
.c2{width:350px;height:350px;background:#22C55E;bottom:-100px;left:-100px;animation:float 25s ease-in-out infinite reverse}
.c3{width:250px;height:250px;background:#F59E0B;top:50%;left:50%;transform:translate(-50%,-50%);animation:floatCenter 30s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(0,0)}25%{transform:translate(30px,-30px)}50%{transform:translate(-20px,20px)}75%{transform:translate(15px,15px)}}
@keyframes floatCenter{0%,100%{transform:translate(-50%,-50%)}25%{transform:translate(calc(-50% + 30px),calc(-50% - 30px))}50%{transform:translate(calc(-50% - 20px),calc(-50% + 20px))}75%{transform:translate(calc(-50% + 15px),calc(-50% + 15px))}}

/* Spinner */
.spinner{animation:spin 1s linear infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Toast */
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-100px);background:var(--gray-800);color:#fff;padding:12px 24px;border-radius:var(--radius);font-size:14px;font-weight:500;box-shadow:var(--shadow-lg);z-index:9999;transition:transform 0.35s cubic-bezier(0.16,1,0.3,1);white-space:nowrap;max-width:90vw;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0)}

/* 移动端 */
@media(max-width:480px){
    .container{padding:12px;align-items:flex-start;padding-top:24px}
    .card-header{padding:28px 20px 24px}
    .card-header h1{font-size:18px}
    .logo{width:48px;height:48px}
    .logo svg{width:32px;height:32px}
    .card-body{padding:24px 18px 20px}
    .input-wrapper input{padding:11px 38px 11px 42px;font-size:14px}
    .result-icon{width:64px;height:64px}
    .c1{width:300px;height:300px}
    .c2{width:200px;height:200px}
    .c3{width:150px;height:150px}
}