:root{--primary-wood:#d4a574;--wood-light:#e8c9a0;--wood-dark:#a67c52;--wood-shadow:#a67c524d;--primary-cream:#f5e6d3;--cream-light:#fff8f0;--cream-dark:#e8d9c5;--primary-dark:#2d2d2d;--dark-light:#4a4a4a;--dark-lighter:#5d5d5d;--primary-magic:#7b68ee;--magic-light:#9b8aff;--magic-dark:#6a5acd;--magic-glow:#7b68ee66;--magic-glow-strong:#7b68ee99;--tech-blue:#4a90d9;--tech-green:#50c878;--tech-orange:#ff8c00;--tech-red:#e74c3c;--tech-yellow:#f1c40f;--tech-purple:#9b59b6;--success:#27ae60;--success-light:#27ae601a;--warning:#f39c12;--warning-light:#f39c121a;--danger:#e74c3c;--danger-light:#e74c3c1a;--info:#3498db;--info-light:#3498db1a;--opacity-10:#d4a5741a;--opacity-20:#d4a57433;--opacity-30:#d4a5744d;--opacity-50:#d4a57480;--opacity-70:#d4a574b3;--gradient-wood:linear-gradient(135deg, var(--primary-wood) 0%, var(--wood-dark) 100%);--gradient-magic:linear-gradient(135deg, var(--primary-magic) 0%, var(--magic-dark) 100%);--gradient-gold:linear-gradient(135deg, gold 0%, orange 100%);--gradient-cream:linear-gradient(180deg, var(--primary-cream) 0%, var(--cream-dark) 100%);--gradient-magic-radial:radial-gradient(circle, var(--magic-light) 0%, var(--primary-magic) 70%);--font-cn:"PingFang SC", "Microsoft YaHei", "Noto Sans SC", -apple-system, sans-serif;--font-en:"Inter", "Segoe UI", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", "SF Mono", monospace;--font-pixel:"Press Start 2P", "Courier New", monospace;--text-xs:10px;--text-sm:12px;--text-base:14px;--text-lg:16px;--text-xl:18px;--text-2xl:20px;--text-3xl:24px;--text-4xl:28px;--text-5xl:32px;--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--radius-none:0;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:24px;--radius-full:9999px;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px #0000001a;--shadow-lg:0 10px 15px #0000001a;--shadow-xl:0 20px 25px #00000026;--shadow-2xl:0 25px 50px #00000040;--shadow-wood:0 2px 0 var(--wood-dark), 0 4px 8px #00000026;--shadow-wood-hover:0 4px 0 var(--wood-dark), 0 8px 16px #0003;--shadow-magic:0 0 15px var(--magic-glow), 0 4px 8px #00000026;--shadow-magic-hover:0 0 25px var(--magic-glow-strong), 0 8px 16px #0003;--duration-fast:.15s;--duration-normal:.25s;--duration-slow:.4s;--duration-xslow:.6s;--duration-xxslow:1s;--ease-default:cubic-bezier(.4, 0, .2, 1);--ease-in:cubic-bezier(.4, 0, 1, 1);--ease-out:cubic-bezier(0, 0, .2, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--ease-bounce:cubic-bezier(.68, -.55, .265, 1.55);--ease-elastic:cubic-bezier(.68, -.6, .32, 1.6);--z-dropdown:10;--z-sticky:20;--z-fixed:30;--z-modal-backdrop:40;--z-modal:50;--z-popover:60;--z-tooltip:70}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-size:14px}body{font-family:var(--font-cn);font-size:var(--text-base);color:var(--primary-dark);background:var(--primary-cream);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;line-height:1.6}body:before{content:"";pointer-events:none;z-index:0;background-image:repeating-linear-gradient(90deg,#0000 0 39px,#d4a57414 39px 40px),repeating-linear-gradient(0deg,#0000 0 39px,#d4a57414 39px 40px);position:fixed;inset:0}#app{z-index:1;min-height:100vh;position:relative}a{color:var(--primary-magic);text-decoration:none}a:hover{text-decoration:underline}img{max-width:100%;height:auto}@keyframes magicPulse{0%,to{transform:scale(1);box-shadow:0 0 20px #7b68ee66,0 0 40px #7b68ee33,inset 0 0 20px #7b68ee4d}50%{transform:scale(1.02);box-shadow:0 0 30px #7b68ee99,0 0 60px #7b68ee66,inset 0 0 30px #7b68ee80}}.magic-glow{animation:2s ease-in-out infinite magicPulse}@keyframes ledRandom{0%,to{opacity:1;background:var(--tech-green);box-shadow:0 0 4px var(--tech-green)}33%{opacity:.5;background:var(--tech-blue);box-shadow:0 0 4px var(--tech-blue)}66%{opacity:.8;background:var(--tech-orange);box-shadow:0 0 4px var(--tech-orange)}}@keyframes ledBlink{0%,90%,to{opacity:1}95%{opacity:.3}}.server-led{border-radius:50%;width:6px;height:6px;animation:2s ease-in-out infinite ledRandom;display:inline-block}.server-led.blue{background:var(--tech-blue)}.server-led.green{background:var(--tech-green)}.server-led.orange{background:var(--tech-orange)}.server-led.red{background:var(--tech-red)}.server-led.blink{animation:3s ease-in-out infinite ledBlink}@keyframes lobsterJump{0%,to{transform:translateY(0)rotate(0)scaleX(1)}15%{transform:translateY(-10px)rotate(-5deg)scaleX(.95)}30%{transform:translateY(-20px)rotate(0)scaleX(1)}50%{transform:translateY(-25px)rotate(0)scaleX(1)}70%{transform:translateY(-15px)rotate(5deg)scaleX(.98)}85%{transform:translateY(-5px)rotate(-2deg)scaleX(.99)}}@keyframes clawClap{0%,to{transform:rotate(0)}50%{transform:rotate(-15deg)}}@keyframes lobsterWave{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}.lobster-character{animation:1.2s ease-in-out infinite lobsterJump;display:inline-block}.lobster-character .claw{animation:.4s ease-in-out infinite clawClap}.lobster-character .antenna{animation:.6s ease-in-out infinite lobsterWave}@keyframes noteFloat{0%{opacity:1;transform:translateY(0)translate(0)rotate(0)scale(1)}25%{opacity:.9;transform:translateY(-15px)translate(5px)rotate(10deg)scale(1.1)}50%{opacity:.7;transform:translateY(-25px)translate(-3px)rotate(-5deg)scale(1)}75%{opacity:.4;transform:translateY(-35px)translate(8px)rotate(15deg)scale(.9)}to{opacity:0;transform:translateY(-50px)translate(0)rotate(0)scale(.8)}}@keyframes noteBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.music-note{color:var(--primary-magic);-webkit-user-select:none;user-select:none;pointer-events:none;font-size:24px;animation:2s ease-out infinite noteFloat;display:inline-block;position:absolute}.music-note.delay-1{animation-delay:0s}.music-note.delay-2{animation-delay:.4s}.music-note.delay-3{animation-delay:.8s}.music-note.delay-4{animation-delay:1.2s}.music-note.delay-5{animation-delay:1.6s}@keyframes typingCursor{0%,to{border-right-color:var(--primary-magic)}50%{border-right-color:#0000}}@keyframes typing{0%{width:0}to{width:100%}}.typing-effect{white-space:nowrap;border-right:2px solid var(--primary-magic);animation:3s steps(30,end) 1s forwards typing,.8s step-end infinite typingCursor;overflow:hidden}@keyframes cardSlideIn{0%{opacity:0;transform:translateY(20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes cardSlideInLeft{0%{opacity:0;transform:translate(-20px)scale(.95)}to{opacity:1;transform:translate(0)scale(1)}}@keyframes cardSlideInRight{0%{opacity:0;transform:translate(20px)scale(.95)}to{opacity:1;transform:translate(0)scale(1)}}@keyframes cardScaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.card-enter{animation:cardSlideIn var(--duration-slow) var(--ease-out) forwards}.card-enter-left{animation:cardSlideInLeft var(--duration-slow) var(--ease-out) forwards}.card-enter-right{animation:cardSlideInRight var(--duration-slow) var(--ease-out) forwards}.card-enter-scale{animation:cardScaleIn var(--duration-normal) var(--ease-out) forwards}.card-stagger-1{animation-delay:0s}.card-stagger-2{animation-delay:.1s}.card-stagger-3{animation-delay:.2s}.card-stagger-4{animation-delay:.3s}.card-stagger-5{animation-delay:.4s}.card-stagger-6{animation-delay:.5s}@keyframes spin{to{transform:rotate(360deg)}}@keyframes loadingBounce{0%,80%,to{opacity:.5;transform:scale(.6)}40%{opacity:1;transform:scale(1)}}@keyframes loadingPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}@keyframes loadingDots{0%,20%{content:"."}40%{content:".."}60%,to{content:"..."}}.spinner{border:4px solid var(--cream-dark);border-top-color:var(--primary-wood);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}.spinner-magic{border-color:var(--magic-light);border-top-color:var(--primary-magic)}@keyframes skeletonShimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton{background:linear-gradient(90deg, var(--cream-dark) 25%, var(--cream-light) 50%, var(--cream-dark) 75%);background-size:200% 100%;animation:1.5s ease-in-out infinite skeletonShimmer}@keyframes breathe{0%,to{opacity:.6}50%{opacity:1}}.breathe{animation:3s ease-in-out infinite breathe}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);font-family:var(--font-cn);font-size:var(--text-base);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);white-space:nowrap;-webkit-user-select:none;user-select:none;border:2px solid #0000;font-weight:500;line-height:1;text-decoration:none;display:inline-flex}.btn:focus-visible{outline:2px solid var(--primary-magic);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background:var(--gradient-wood);color:var(--cream-light);border-color:var(--wood-dark);box-shadow:var(--shadow-wood)}.btn-primary:hover{box-shadow:var(--shadow-wood-hover);filter:brightness(1.05);transform:translateY(-2px)}.btn-primary:active{box-shadow:0 1px 0 var(--wood-dark), 0 2px 4px #00000026;transform:translateY(1px)}.btn-magic{background:var(--gradient-magic);color:#fff;border-color:var(--magic-dark);box-shadow:var(--shadow-magic)}.btn-magic:hover{box-shadow:var(--shadow-magic-hover);filter:brightness(1.08);transform:translateY(-2px)}.btn-magic:active{box-shadow:0 0 10px var(--magic-glow), 0 2px 4px #00000026;transform:translateY(1px)}.btn-secondary{background:var(--cream-light);color:var(--primary-dark);border-color:var(--cream-dark);box-shadow:var(--shadow-sm)}.btn-secondary:hover{background:var(--primary-cream);border-color:var(--primary-wood);transform:translateY(-1px)}.btn-ghost{color:var(--dark-lighter);box-shadow:none;background:0 0;border-color:#0000}.btn-ghost:hover{background:var(--opacity-10);color:var(--primary-dark)}.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}.btn-danger:hover{filter:brightness(1.1);transform:translateY(-2px)}.btn-sm{padding:var(--space-2) var(--space-3);font-size:var(--text-sm)}.btn-lg{padding:var(--space-4) var(--space-6);font-size:var(--text-lg)}.btn-full{width:100%}.card{background:var(--cream-light);border:2px solid var(--primary-wood);border-radius:var(--radius-md);box-shadow:var(--shadow-md);position:relative;overflow:hidden}.card:before{content:"";background:linear-gradient(90deg, var(--wood-dark), var(--primary-wood), var(--wood-light), var(--primary-wood), var(--wood-dark));height:3px;position:absolute;top:0;left:0;right:0}.card-header{padding:var(--space-4) var(--space-4) 0}.card-title{font-size:var(--text-xl);color:var(--primary-dark);margin-bottom:var(--space-1);font-weight:600}.card-subtitle{font-size:var(--text-sm);color:var(--dark-lighter)}.card-body{padding:var(--space-4)}.card-footer{padding:0 var(--space-4) var(--space-4);border-top:1px solid var(--cream-dark);margin-top:var(--space-4);padding-top:var(--space-4)}.card-glass{-webkit-backdrop-filter:blur(10px);background:#fffc;border-color:#ffffff80}.card-featured{border-color:var(--primary-magic);box-shadow:0 0 20px var(--magic-glow)}.card-featured:before{content:"";background:var(--gradient-magic);height:4px;position:absolute;top:0;left:0;right:0}.form-group{gap:var(--space-2);flex-direction:column;display:flex}.form-label{font-size:var(--text-sm);color:var(--primary-dark);font-weight:500;display:block}.form-label-required:after{content:" *";color:var(--danger)}.form-input{width:100%;padding:var(--space-3) var(--space-4);border:2px solid var(--cream-dark);border-radius:var(--radius-sm);font-family:var(--font-cn);font-size:var(--text-base);color:var(--primary-dark);transition:all var(--duration-fast) var(--ease-default);background:#fff}.form-input:focus{border-color:var(--primary-wood);box-shadow:0 0 0 3px var(--opacity-20);outline:none}.form-input::placeholder{color:#aaa}.form-input:disabled{background:var(--cream-dark);cursor:not-allowed;opacity:.7}.form-input-error{border-color:var(--danger)}.form-input-error:focus{box-shadow:0 0 0 3px var(--danger-light)}.form-hint{font-size:var(--text-xs);color:var(--dark-lighter)}.form-error{font-size:var(--text-xs);color:var(--danger)}.input-wrapper{width:100%;position:relative}.input-icon-left,.input-icon-right{color:var(--dark-lighter);pointer-events:none;align-items:center;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.input-icon-left{left:var(--space-3)}.input-icon-right{right:var(--space-3)}.input-with-left-icon{padding-left:calc(var(--space-3) + 24px + var(--space-2))}.input-with-right-icon{padding-right:calc(var(--space-3) + 24px + var(--space-2))}.input-icon-clickable{pointer-events:auto;cursor:pointer;transition:color var(--duration-fast)}.input-icon-clickable:hover{color:var(--primary-wood)}.form-input-sm{padding:var(--space-2) var(--space-3);font-size:var(--text-sm)}.form-input-lg{padding:var(--space-4) var(--space-5);font-size:var(--text-lg)}.code-input-group{gap:var(--space-3);align-items:center;display:flex}.code-input-group .form-input{text-align:center;font-family:var(--font-mono);letter-spacing:8px;flex:1;font-size:20px}.code-image{border:2px solid var(--cream-dark);border-radius:var(--radius-sm);cursor:pointer;width:120px;height:44px;transition:border-color var(--duration-fast);object-fit:cover;background:var(--cream-light);flex-shrink:0}.code-image:hover{border-color:var(--primary-wood)}.form-textarea{resize:vertical;min-height:120px;line-height:var(--leading-normal)}.password-strength{gap:var(--space-1);margin-top:var(--space-2);display:flex}.strength-bar{background:var(--cream-dark);border-radius:var(--radius-full);height:4px;transition:background var(--duration-fast);flex:1}.strength-bar.active.weak{background:var(--danger)}.strength-bar.active.medium{background:var(--warning)}.strength-bar.active.strong{background:var(--success)}.strength-label{font-size:var(--text-xs);margin-top:var(--space-1);display:block}.strength-label.weak{color:var(--danger)}.strength-label.medium{color:var(--warning)}.strength-label.strong{color:var(--success)}.checkbox-wrapper{align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}.checkbox{appearance:none;border:2px solid var(--cream-dark);border-radius:var(--radius-sm);cursor:pointer;width:18px;height:18px;transition:all var(--duration-fast);background:#fff;flex-shrink:0;position:relative}.checkbox:checked{background:var(--primary-magic);border-color:var(--primary-magic)}.checkbox:checked:after{content:"✓";color:#fff;font-size:12px;font-weight:var(--font-bold);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.checkbox-label{font-size:var(--text-sm);color:var(--dark-lighter)}.toggle{appearance:none;background:var(--cream-dark);border-radius:var(--radius-full);cursor:pointer;width:48px;height:24px;transition:background var(--duration-fast);flex-shrink:0;position:relative}.toggle:before{content:"";width:20px;height:20px;transition:left var(--duration-fast) var(--ease-bounce);box-shadow:var(--shadow-sm);background:#fff;border-radius:50%;position:absolute;top:2px;left:2px}.toggle:checked{background:var(--primary-magic)}.toggle:checked:before{left:26px}.divider{align-items:center;gap:var(--space-3);color:var(--dark-lighter);font-size:var(--text-sm);display:flex}.divider:before,.divider:after{content:"";background:var(--cream-dark);flex:1;height:1px}.loading-overlay{z-index:var(--z-modal);border-radius:inherit;background:#f5e6d3e6;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.loading-dots{gap:var(--space-2);display:flex}.loading-dot{background:var(--primary-wood);border-radius:50%;width:8px;height:8px;animation:1.4s ease-in-out infinite loadingBounce}.loading-dot:first-child{animation-delay:0s}.loading-dot:nth-child(2){animation-delay:.2s}.loading-dot:nth-child(3){animation-delay:.4s}.toast-container{top:var(--space-4);right:var(--space-4);z-index:var(--z-tooltip);gap:var(--space-2);pointer-events:none;flex-direction:column;display:flex;position:fixed}.toast{background:var(--primary-dark);color:var(--cream-light);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);box-shadow:var(--shadow-lg);pointer-events:auto;animation:cardSlideInRight var(--duration-normal) var(--ease-out) forwards;max-width:320px}.toast.success{background:var(--success)}.toast.error{background:var(--danger)}.toast.warning{background:var(--warning);color:var(--primary-dark)}.container{width:100%;max-width:1200px;padding:0 var(--space-4);margin:0 auto}@media (width>=768px){.container{padding:0 var(--space-6)}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--cream-dark);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--primary-wood)}