@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;background:#0a0e1a;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.oc-bg{background:radial-gradient(at 20%,#0d1f3ce6 0%,#0000 60%),radial-gradient(at 80% 20%,#1a0d2ecc 0%,#0000 60%),#0a0e1a;justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.oc-card{background:#0a1428e6;border:1px solid #00d4ff2e;border-radius:20px;width:100%;max-width:480px;padding:48px 40px;position:relative;overflow:hidden;box-shadow:0 0 60px #00d4ff12,0 0 120px #7800ff0a,inset 0 1px #00d4ff14}.oc-card:before{content:"";background:linear-gradient(90deg,#0000,#00d4ff,#7800ff,#00d4ff,#0000);height:2px;position:absolute;top:0;left:0;right:0}.oc-header{text-align:center;margin-bottom:32px}.oc-logo{filter:drop-shadow(0 0 16px #00d4ff80);margin-bottom:16px;font-size:3.5rem;display:block}.oc-title{letter-spacing:-.02em;background:linear-gradient(135deg,#00d4ff 0%,#7800ff 55%,#00ffa3 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:8px;font-size:2.4rem;font-weight:700;line-height:1.1}.oc-subtitle{letter-spacing:.2em;text-transform:uppercase;color:#00d4ff73;font-size:.8rem;font-weight:500}.oc-divider{background:linear-gradient(90deg,#0000,#00d4ff33,#7800ff33,#0000);height:1px;margin:0}.oc-body{padding:36px 0}.oc-state{text-align:center;flex-direction:column;align-items:center;gap:16px;display:flex}.oc-badge{letter-spacing:.03em;border-radius:100px;align-items:center;gap:8px;padding:6px 16px;font-size:.85rem;font-weight:600;display:inline-flex}.oc-badge.green{color:#00ffa3;background:#00ffa31a;border:1px solid #00ffa340}.oc-badge.red{color:#ff4060;background:#ff40601a;border:1px solid #ff406040}.oc-badge.yellow{color:#fc0;background:#ffcc001a;border:1px solid #ffcc0040}.oc-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.oc-dot.green{background:#00ffa3;box-shadow:0 0 6px #00ffa3}.oc-dot.red{background:#ff4060;box-shadow:0 0 6px #ff4060}.oc-dot.yellow{background:#fc0;box-shadow:0 0 6px #fc0}.oc-dot.blink{animation:1.2s ease-in-out infinite blink}@keyframes blink{0%,to{opacity:1}50%{opacity:.15}}.oc-state-label{color:#b4c8ff99;margin:0;font-size:.95rem;font-weight:400;line-height:1.5}.oc-state-label.muted{color:#96aadc73}.oc-btn{letter-spacing:.02em;cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;gap:8px;width:100%;margin-top:8px;padding:14px 28px;font-family:Inter,sans-serif;font-size:.92rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex}.oc-btn.primary{color:#00d4ff;background:linear-gradient(135deg,#00d4ff26,#7800ff26);border:1px solid #00d4ff66;box-shadow:0 0 24px #00d4ff14}.oc-btn.primary:hover:not(:disabled){color:#00d4ff;background:linear-gradient(135deg,#00d4ff38,#7800ff38);border-color:#00d4ffb3;transform:translateY(-1px);box-shadow:0 0 32px #00d4ff33}.oc-btn.primary:disabled{opacity:.45;cursor:not-allowed;transform:none}.oc-btn.outline{color:#00d4ff99;background:0 0;border:1px solid #00d4ff40}.oc-btn.outline:hover{color:#00d4ff;border-color:#00d4ff80}.oc-btn.danger{color:#ff4060;background:linear-gradient(135deg,#ff40601f,#c8003c1f);border:1px solid #ff406059;box-shadow:0 0 20px #ff40600f}.oc-btn.danger:hover:not(:disabled){background:linear-gradient(135deg,#ff406038,#c8003c38);border-color:#ff4060a6;transform:translateY(-1px);box-shadow:0 0 28px #ff40602e}.oc-btn.danger:disabled{opacity:.45;cursor:not-allowed;transform:none}.oc-progress{background:#ffffff0d;border-radius:2px;width:100%;height:3px;overflow:hidden}.oc-progress-bar{background:linear-gradient(90deg,#00d4ff,#7800ff,#00ffa3,#00d4ff) 0 0/300% 100%;width:100%;height:100%;animation:2s linear infinite shimmer}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.oc-countdown{color:#00d4ff59;font-size:.78rem;font-weight:400}.oc-hint{color:#b4c8ff59;font-size:.78rem}.oc-pulse-ring{border:2px solid #00d4ff40;border-radius:50%;width:44px;height:44px;animation:1.8s ease-out infinite pulse;position:relative}.oc-pulse-ring:after{content:"";background:#00d4ff1f;border-radius:50%;position:absolute;inset:6px}@keyframes pulse{0%{opacity:.8;transform:scale(.85)}to{opacity:0;transform:scale(1.3)}}.oc-spinner{border:2px solid #00d4ff40;border-top-color:#00d4ff;border-radius:50%;flex-shrink:0;width:14px;height:14px;animation:.7s linear infinite spin}.oc-btn.danger .oc-spinner{border-color:#ff4060 #ff406040 #ff406040}@keyframes spin{to{transform:rotate(360deg)}}.oc-footer{text-align:center;color:#00d4ff33;letter-spacing:.05em;padding-top:20px;font-size:.7rem}.oc-sep{margin:0 10px}.oc-modal-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:100;background:#050a19bf;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.oc-modal{background:#0a1226f7;border:1px solid #ff406040;border-radius:16px;width:100%;max-width:420px;padding:36px 32px;position:relative;overflow:hidden;box-shadow:0 0 60px #ff40601a,inset 0 1px #ff406014}.oc-modal:before{content:"";background:linear-gradient(90deg,#0000,#ff4060,#7800ff,#ff4060,#0000);height:2px;position:absolute;top:0;left:0;right:0}.oc-modal-header{align-items:center;gap:12px;margin-bottom:12px;display:flex}.oc-modal-icon{font-size:1.5rem}.oc-modal-title{color:#ff4060;letter-spacing:-.01em;font-size:1.25rem;font-weight:700}.oc-modal-desc{color:#b4c8ff8c;margin-bottom:24px;font-size:.9rem;line-height:1.5}.oc-modal-field{margin-bottom:24px}.oc-input{color:#e0eaff;background:#ffffff0a;border:1px solid #00d4ff33;border-radius:8px;outline:none;width:100%;padding:12px 16px;font-family:Inter,sans-serif;font-size:.92rem;transition:border-color .2s,box-shadow .2s}.oc-input::placeholder{color:#b4c8ff4d}.oc-input:focus{border-color:#00d4ff80;box-shadow:0 0 0 3px #00d4ff14}.oc-input.error{border-color:#ff406099;box-shadow:0 0 0 3px #ff406014}.oc-input-error{color:#ff4060;align-items:center;gap:6px;margin-top:8px;font-size:.8rem;display:flex}.oc-input-error:before{content:"✕";font-size:.7rem}.oc-modal-actions{gap:12px;display:flex}.modal-btn{flex:1;margin-top:0}.modal-enter-active,.modal-leave-active{transition:opacity .2s}.modal-enter-from,.modal-leave-to{opacity:0}.modal-enter-active .oc-modal,.modal-leave-active .oc-modal{transition:transform .2s,opacity .2s}.modal-enter-from .oc-modal,.modal-leave-to .oc-modal{opacity:0;transform:scale(.95)translateY(8px)}