/* CZR UI */
:root{color-scheme:light only;--czr-bg:#f5f8fa;--czr-bg-gradient:linear-gradient(160deg,#f5f8fa 0%,#e8eef3 100%);--czr-surface:rgba(255,255,255,0.82);--czr-surface-border:rgba(160,180,191,0.20);--czr-card-bg:rgba(255,255,255,0.92);--czr-card-shadow:0 2px 12px rgba(110,139,158,0.08);--czr-card-shadow-hover:0 8px 28px rgba(110,139,158,0.15);--czr-primary:#6e8b9e;--czr-primary-hover:#5d7b8e;--czr-primary-subtle:rgba(110,139,158,0.10);--czr-primary-light:#cad8e0;--czr-secondary:#a0b4bf;--czr-accent:#7d96a8;--czr-neutral:#7a8e98;--czr-text:#34454f;--czr-text-secondary:#6a7e88;--czr-nav-bg:rgba(255,255,255,0.88);--czr-nav-border:rgba(160,180,191,0.20);--czr-nav-active:#6e8b9e;--czr-nav-inactive:#8ea3ae;--czr-danger:#c48b7a;--czr-warning:#c4a97a;--czr-success:#6e8b9e;--czr-border:rgba(160,180,191,0.20);--czr-input-bg:rgba(255,255,255,0.85);--czr-input-border:rgba(160,180,191,0.35);--czr-input-focus:rgba(110,139,158,0.25);--czr-radius:16px;--czr-radius-sm:10px;--czr-radius-lg:24px;--czr-transition:0.35s cubic-bezier(0.4,0,0.2,1);--czr-transition-fast:0.2s cubic-bezier(0.4,0,0.2,1);--czr-shadow-sm:0 1px 4px rgba(140,150,120,0.06);--czr-particle:rgba(160,195,215,0.40);--czr-particle-secondary:rgba(200,215,225,0.30);}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;background:var(--czr-bg-gradient);color:var(--czr-text);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--czr-border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--czr-neutral)}
#czr-particles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0.6}
.czr-content{position:relative;z-index:1}
.czr-card{background:var(--czr-card-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--czr-radius);box-shadow:var(--czr-card-shadow);border:1px solid var(--czr-surface-border);animation:fadeInUp 0.45s ease both}
.czr-card:hover{box-shadow:var(--czr-card-shadow-hover)}
.czr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:var(--czr-radius-sm);font-weight:500;font-size:0.95rem;border:none;cursor:pointer;transition:all var(--czr-transition-fast);text-decoration:none}
.czr-btn-primary{background:var(--czr-primary);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.czr-btn-primary:hover{background:var(--czr-primary-hover);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,0.12)}
.czr-btn-primary:active{transform:translateY(0);box-shadow:0 1px 4px rgba(0,0,0,0.08)}
.czr-btn-primary:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.czr-btn-ghost{background:transparent;color:var(--czr-text-secondary);border:1px solid var(--czr-border)}
.czr-btn-ghost:hover{background:var(--czr-primary-subtle);border-color:var(--czr-primary);color:var(--czr-primary)}
.czr-input{width:100%;padding:12px 16px 12px 40px;border-radius:var(--czr-radius-sm);border:1px solid var(--czr-input-border);background:var(--czr-input-bg);color:var(--czr-text);font-size:0.95rem;outline:none;transition:border-color var(--czr-transition-fast),box-shadow var(--czr-transition-fast),background var(--czr-transition)}
.czr-input:focus{border-color:var(--czr-primary);box-shadow:0 0 0 3px var(--czr-input-focus)}
.czr-input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--czr-neutral);font-size:0.95rem}
.czr-select{width:100%;padding:12px 16px;border-radius:var(--czr-radius-sm);border:1px solid var(--czr-input-border);background-color:var(--czr-input-bg);color:var(--czr-text);font-size:0.95rem;cursor:pointer;outline:none;transition:border-color var(--czr-transition-fast),box-shadow var(--czr-transition-fast)}
.czr-select:focus{border-color:var(--czr-primary);box-shadow:0 0 0 3px var(--czr-input-focus)}
.czr-tip{background:var(--czr-primary-subtle);border:1px solid var(--czr-border);border-radius:var(--czr-radius-sm);padding:14px 16px;font-size:0.85rem;color:var(--czr-text-secondary);display:flex;gap:10px;align-items:flex-start}
.czr-tip i{color:var(--czr-primary);margin-top:2px;flex-shrink:0}
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes navDotIn{from{width:0;opacity:0}to{width:20px;opacity:1}}
.czr-login-card{background:var(--czr-card-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:var(--czr-radius-lg);box-shadow:0 8px 40px rgba(0,0,0,0.06);border:1px solid var(--czr-surface-border);width:100%;max-width:420px;animation:fadeInUp 0.5s ease both}
.czr-login-header{padding:32px 28px 20px;text-align:center}
.czr-login-header h1{font-size:1.6rem;font-weight:600;color:var(--czr-primary);margin:0 0 4px}
.czr-login-header p{color:var(--czr-text-secondary);font-size:0.9rem;margin:0}
.czr-login-body{padding:0 28px 28px}
.czr-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.czr-switch input{opacity:0;width:0;height:0}
.czr-switch .slider{position:absolute;cursor:pointer;inset:0;background:var(--czr-border);border-radius:24px;transition:background var(--czr-transition-fast)}
.czr-switch .slider::before{content:'';position:absolute;left:3px;bottom:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform var(--czr-transition-fast);box-shadow:0 1px 3px rgba(0,0,0,0.12)}
.czr-switch input:checked+.slider{background:var(--czr-primary)}
.czr-switch input:checked+.slider::before{transform:translateX(20px)}
.czr-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;animation:fadeIn 0.2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.czr-modal{background:var(--czr-card-bg);backdrop-filter:blur(16px);border-radius:var(--czr-radius);box-shadow:0 16px 48px rgba(0,0,0,0.15);max-width:380px;width:100%;padding:28px 24px 20px;text-align:center;animation:modalIn 0.25s ease;border:1px solid var(--czr-surface-border)}
@keyframes modalIn{from{opacity:0;transform:scale(0.92) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.czr-modal-icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:1.3rem}
.czr-modal-icon.success{background:rgba(110,139,158,0.12);color:var(--czr-primary)}
.czr-modal-icon.error{background:rgba(196,139,122,0.12);color:var(--czr-danger)}
.czr-modal-icon.warning{background:rgba(196,169,122,0.12);color:var(--czr-warning)}
.czr-modal-icon.info{background:rgba(110,139,158,0.12);color:var(--czr-primary)}
.czr-modal-title{font-size:1.05rem;font-weight:600;color:var(--czr-text);margin:0 0 8px}
.czr-modal-text{font-size:0.88rem;color:var(--czr-text-secondary);margin:0 0 20px;line-height:1.5;white-space:pre-wrap}
.czr-modal-buttons{display:flex;gap:8px;justify-content:center}
.czr-modal-buttons .czr-btn{min-width:90px;padding:10px 20px;font-size:0.88rem}
.czr-modal-loading{padding:12px}
.czr-modal-loading .czr-spinner{width:32px;height:32px;border:3px solid var(--czr-border);border-top-color:var(--czr-primary);border-radius:50%;animation:spin 0.7s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}
.czr-modal-loading-text{font-size:0.9rem;color:var(--czr-text-secondary)}