#app{background:var(--color-bg);width:100%;min-height:100dvh}.route-overlay{z-index:9999;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0003;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.route-overlay.leave{animation:.35s forwards fadeOut}.route-spinner{border:4px solid #6c5ce726;border-top-color:var(--color-primary);border-radius:50%;width:44px;height:44px;animation:.7s linear infinite spin,.25s cubic-bezier(.34,1.56,.64,1) popIn}.route-spinner.leave{animation:.3s forwards popOut}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes popIn{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes popOut{to{opacity:0;transform:scale(0)}}:root{--color-primary:#6c5ce7;--color-primary-light:#a29bfe;--color-primary-dark:#5a4bd1;--color-secondary:#ff6b6b;--color-accent:#00d2d3;--color-success:#2ed573;--color-warning:#ffa502;--color-danger:#ff4757;--color-bg:#f0f3ff;--color-bg-card:#f8f7ff;--color-surface:#fff;--color-text:#2d3436;--color-text-secondary:#636e72;--color-text-light:#b2bec3;--card-shadow:8px 8px 24px #6c5ce71a, -4px -4px 16px #ffffffe6, inset -2px -2px 6px #00000008, inset 2px 2px 6px #fffc;--card-shadow-hover:12px 12px 32px #6c5ce724, -6px -6px 20px #fffffff2;--card-shadow-active:inset 4px 4px 12px #0000000f, inset -2px -2px 8px #ffffffb3;--card-radius:24px;--btn-radius:16px;--font-family:"Segoe UI", system-ui, -apple-system, sans-serif;--transition:.2s cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;font-size:16px}body{font-family:var(--font-family);color:var(--color-text);background:var(--color-bg);min-height:100vh;line-height:1.6}a{color:var(--color-primary);text-decoration:none}button{cursor:pointer;border:none;font-family:inherit}input,textarea,select{font-family:inherit;font-size:inherit}img{max-width:100%;height:auto}.clay-card{background:var(--color-bg-card);border-radius:var(--card-radius);box-shadow:var(--card-shadow);transition:transform var(--transition), box-shadow var(--transition);border:1px solid #fff9}.clay-card:hover{box-shadow:var(--card-shadow-hover);transform:translateY(-2px)}.clay-btn{border-radius:var(--btn-radius);transition:all var(--transition);border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:.95rem;font-weight:600;display:inline-flex}.clay-btn-primary{background:var(--color-primary);color:#fff;box-shadow:4px 4px 12px #6c5ce74d,-2px -2px 8px #ffffff80}.clay-btn-primary:hover{background:var(--color-primary-dark);box-shadow:6px 6px 16px #6c5ce759}.clay-btn-secondary{background:var(--color-surface);color:var(--color-text);box-shadow:3px 3px 10px #0000000f,-2px -2px 6px #fffc}.clay-btn-danger{background:var(--color-danger);color:#fff;box-shadow:4px 4px 12px #ff47574d}.clay-btn-ghost{color:var(--color-primary);box-shadow:none;background:0 0}.clay-input{border-radius:var(--btn-radius);background:var(--color-bg);width:100%;color:var(--color-text);transition:all var(--transition);border:1px solid #6c5ce71f;outline:none;padding:14px 18px;box-shadow:inset 2px 2px 6px #0000000a,inset -1px -1px 4px #fffc}.clay-input:focus{border-color:var(--color-primary-light);box-shadow:inset 2px 2px 6px #6c5ce714,0 0 0 3px #6c5ce71a}.clay-input::placeholder{color:var(--color-text-light)}.page-container{max-width:800px;margin:0 auto;padding:24px 16px 100px}@media (width>=768px){.page-container{padding:32px 24px}}.fade-enter-active,.fade-leave-active{transition:opacity .2s}.fade-enter-from,.fade-leave-to{opacity:0}