.page-crosshair_builder{--accent-primary:#ff4654;--accent-cyan:#00d4ff;--surface-1:#0a0a0a;--surface-2:#111;--surface-3:#1a1a1a;--text:#f0f6ff;--muted:#f0f6ffa6;color:var(--text);box-sizing:border-box;background:#000;min-height:100vh;font-family:Inter,-apple-system,sans-serif;overflow-x:hidden}.page-crosshair_builder *,.page-crosshair_builder :before,.page-crosshair_builder :after{box-sizing:border-box;margin:0;padding:0}.page-crosshair_builder .builder-header{z-index:1000;background:#000;border-bottom:1px solid #222;justify-content:space-between;align-items:center;height:64px;padding:0 24px;display:flex;position:fixed;top:0;left:0;right:0}.page-crosshair_builder .header-left{align-items:center;gap:16px;display:flex}.page-crosshair_builder .back-btn{color:var(--muted);background:0 0;border:1px solid #333;border-radius:10px;align-items:center;gap:8px;padding:8px 16px;font-size:.9rem;font-weight:600;text-decoration:none;transition:border-color .2s,color .2s;display:flex}.page-crosshair_builder .back-btn:hover{color:#fff;border-color:var(--accent-primary)}.page-crosshair_builder .header-title{color:#fff;letter-spacing:-.02em;font-size:1.2rem;font-weight:800}.page-crosshair_builder .header-actions{align-items:center;gap:8px;display:flex}.page-crosshair_builder .header-actions .vh-lang-switch{color:var(--muted);cursor:pointer;background:0 0;border:1px solid #ffffff26;border-radius:6px;padding:5px 8px;font-size:.8rem}.page-crosshair_builder .header-actions .vh-lang-switch:hover{color:var(--text);border-color:#ffffff4d}.page-crosshair_builder .header-actions .vh-lang-switch option{color:var(--text);background:#111}.page-crosshair_builder .builder-layout{z-index:1;grid-template-columns:1fr 380px;gap:0;min-height:100vh;padding-top:64px;display:grid;position:relative}.page-crosshair_builder .preview-area{background:#000;flex-direction:column;justify-content:center;align-items:center;padding:40px;display:flex;position:relative}.page-crosshair_builder .preview-container{width:100%;max-width:640px;position:relative}.page-crosshair_builder .preview-label{letter-spacing:.15em;text-transform:uppercase;color:#ff465499;align-items:center;gap:8px;margin-bottom:16px;font-size:.7rem;font-weight:700;display:flex}.page-crosshair_builder .preview-label:after{content:"";background:#333;flex:1;height:1px}.page-crosshair_builder .preview-canvas-wrapper{aspect-ratio:16/10;background:#111;border:1px solid #222;border-radius:12px;justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}.page-crosshair_builder .preview-bg-select{z-index:10;gap:6px;display:flex;position:absolute;top:12px;right:12px}.page-crosshair_builder .bg-option{cursor:pointer;opacity:.6;border:2px solid #0000;border-radius:8px;width:28px;height:28px;transition:all .2s}.page-crosshair_builder .bg-option:hover{opacity:1}.page-crosshair_builder .bg-option.active{border-color:var(--accent-primary);opacity:1}.page-crosshair_builder .bg-dark{background:#111}.page-crosshair_builder .bg-mid{background:#2a3a4a}.page-crosshair_builder .bg-light{background:#5a6a7a}.page-crosshair_builder .bg-dust{background:#8b7355}.page-crosshair_builder .bg-green{background:#2d5a3a}.page-crosshair_builder #mainPreview{image-rendering:pixelated}.page-crosshair_builder .code-display{width:100%;max-width:640px;margin-top:24px}.page-crosshair_builder .code-display-label{letter-spacing:.15em;text-transform:uppercase;color:#00d4ff80;align-items:center;gap:8px;margin-bottom:10px;font-size:.7rem;font-weight:700;display:flex}.page-crosshair_builder .code-display-label:after{content:"";background:#333;flex:1;height:1px}.page-crosshair_builder .code-box{background:#000;border:1px solid #222;border-radius:10px;align-items:center;gap:8px;padding:6px;display:flex}.page-crosshair_builder .code-text{color:#ffffffb3;white-space:nowrap;scrollbar-width:thin;flex:1;padding:10px 14px;font-family:JetBrains Mono,monospace;font-size:.85rem;overflow-x:auto}.page-crosshair_builder .code-text::-webkit-scrollbar{height:4px}.page-crosshair_builder .code-text::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}.page-crosshair_builder .action-btn{cursor:pointer;white-space:nowrap;border:none;border-radius:10px;align-items:center;gap:6px;padding:10px 18px;font-family:inherit;font-size:.8rem;font-weight:700;transition:background .2s,border-color .2s;display:flex}.page-crosshair_builder .btn-copy{color:#fff;background:#ff4654}.page-crosshair_builder .btn-copy:hover{background:#ff5e6a}.page-crosshair_builder .btn-share{color:#00d4ff;background:0 0;border:1px solid #333}.page-crosshair_builder .btn-share:hover{background:#00d4ff1a;border-color:#00d4ff}.page-crosshair_builder .btn-feed{color:#ff8a93;background:0 0;border:1px solid #333}.page-crosshair_builder .btn-feed:hover{background:#ff46541f;border-color:#ff4654}.page-crosshair_builder .btn-paste{color:var(--muted);background:0 0;border:1px solid #333}.page-crosshair_builder .btn-paste:hover{color:#fff;background:#111}.page-crosshair_builder .btn-random{color:#b07fff;background:0 0;border:1px solid #333}.page-crosshair_builder .btn-random:hover{background:#111}.page-crosshair_builder .quick-actions{flex-wrap:wrap;gap:8px;width:100%;max-width:640px;margin-top:12px;display:flex}.page-crosshair_builder .settings-panel{background:var(--surface-1);scrollbar-width:thin;scrollbar-color:#333 transparent;border-left:1px solid #222;height:calc(100vh - 64px);overflow-y:auto}.page-crosshair_builder .settings-panel::-webkit-scrollbar{width:6px}.page-crosshair_builder .settings-panel::-webkit-scrollbar-thumb{background:#333;border-radius:3px}.page-crosshair_builder .tab-nav{z-index:100;background:#000;border-bottom:1px solid #222;display:flex;position:sticky;top:0}.page-crosshair_builder .tab-btn{color:#7a8fa3;cursor:pointer;text-transform:uppercase;letter-spacing:.1em;background:0 0;border:none;flex:1;padding:14px 8px;font-size:.75rem;font-weight:700;transition:all .3s;position:relative}.page-crosshair_builder .tab-btn:hover{color:#b3c5d7}.page-crosshair_builder .tab-btn.active{color:var(--accent-primary)}.page-crosshair_builder .tab-btn.active:after{content:"";background:var(--accent-primary);border-radius:1px;width:60%;height:2px;position:absolute;bottom:0;left:20%}.page-crosshair_builder .tab-content{padding:20px;display:none}.page-crosshair_builder .tab-content.active{display:block}.page-crosshair_builder .setting-group{margin-bottom:24px}.page-crosshair_builder .group-header{border-bottom:1px solid #222;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:8px;display:flex}.page-crosshair_builder .group-title{letter-spacing:.15em;text-transform:uppercase;color:#fff6;font-size:.7rem;font-weight:800}.page-crosshair_builder .group-toggle{width:40px;height:22px;position:relative}.page-crosshair_builder .group-toggle input{opacity:0;width:0;height:0}.page-crosshair_builder .toggle-slider{cursor:pointer;background:#ffffff1a;border-radius:11px;transition:all .3s;position:absolute;inset:0}.page-crosshair_builder .toggle-slider:before{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:all .3s;position:absolute;bottom:3px;left:3px}.page-crosshair_builder .group-toggle input:checked+.toggle-slider{background:var(--accent-primary)}.page-crosshair_builder .group-toggle input:checked+.toggle-slider:before{transform:translate(18px)}.page-crosshair_builder .setting-row{justify-content:space-between;align-items:center;gap:12px;padding:8px 0;display:flex}.page-crosshair_builder .setting-label{color:#b3c5d7;flex-shrink:0;font-size:.82rem;font-weight:500}.page-crosshair_builder .setting-control{flex-shrink:0;align-items:center;gap:8px;display:flex}.page-crosshair_builder .range-wrapper{align-items:center;gap:10px;display:flex}.page-crosshair_builder input[type=range]{appearance:none;cursor:pointer;background:#ffffff1a;border-radius:2px;outline:none;width:120px;height:4px}.page-crosshair_builder input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent-primary);cursor:pointer;border-radius:50%;width:16px;height:16px}.page-crosshair_builder input[type=range]::-moz-range-thumb{background:var(--accent-primary);cursor:pointer;border:none;border-radius:50%;width:16px;height:16px}.page-crosshair_builder .range-value{color:#fff9;text-align:right;background:#0000004d;border:1px solid #ffffff0f;border-radius:6px;min-width:40px;padding:4px 8px;font-family:JetBrains Mono,monospace;font-size:.78rem}.page-crosshair_builder .color-options{flex-wrap:wrap;gap:6px;display:flex}.page-crosshair_builder .color-swatch{cursor:pointer;border:2px solid #0000;border-radius:8px;width:28px;height:28px;transition:all .2s;position:relative}.page-crosshair_builder .color-swatch:hover{opacity:.85}.page-crosshair_builder .color-swatch.active{border-color:#fff}.page-crosshair_builder .color-swatch.active:after{content:"✓";color:#000000b3;text-shadow:0 0 2px #ffffff80;justify-content:center;align-items:center;font-size:12px;font-weight:900;display:flex;position:absolute;inset:0}.page-crosshair_builder .hex-input-wrapper{align-items:center;gap:6px;margin-top:8px;display:flex}.page-crosshair_builder .hex-input{color:#fff;background:#0000004d;border:1px solid #ffffff14;border-radius:8px;outline:none;width:120px;padding:8px 12px;font-family:JetBrains Mono,monospace;font-size:.82rem;transition:border-color .3s}.page-crosshair_builder .hex-input:focus{border-color:#ff465480}.page-crosshair_builder .color-preview-circle{border:2px solid #ffffff1a;border-radius:8px;width:28px;height:28px}.page-crosshair_builder .modal-overlay{z-index:2000;background:#000c;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.page-crosshair_builder .modal-overlay.active{display:flex}.page-crosshair_builder .modal-box{background:#111;border:1px solid #222;border-radius:14px;width:90%;max-width:500px;padding:28px}.page-crosshair_builder .modal-title{color:#fff;margin-bottom:8px;font-size:1.2rem;font-weight:800}.page-crosshair_builder .modal-desc{color:#7a8fa3;margin-bottom:20px;font-size:.85rem}.page-crosshair_builder .modal-input{color:#fff;background:#0006;border:1px solid #ffffff14;border-radius:12px;outline:none;width:100%;margin-bottom:16px;padding:14px 16px;font-family:JetBrains Mono,monospace;font-size:.9rem;transition:border-color .3s}.page-crosshair_builder .modal-input:focus{border-color:#ff465480}.page-crosshair_builder .modal-actions{justify-content:flex-end;gap:10px;display:flex}.page-crosshair_builder .modal-btn{cursor:pointer;border:none;border-radius:10px;padding:10px 20px;font-size:.85rem;font-weight:700;transition:all .3s}.page-crosshair_builder .modal-btn-cancel{color:#7a8fa3;background:#ffffff0d}.page-crosshair_builder .modal-btn-cancel:hover{background:#ffffff1a}.page-crosshair_builder .modal-btn-apply{background:var(--accent-primary);color:#fff}.page-crosshair_builder .modal-btn-apply:hover{filter:brightness(1.1)}.page-crosshair_builder .toast{color:#fff;z-index:3000;opacity:0;background:#111;border:1px solid #333;border-radius:10px;align-items:center;gap:10px;padding:14px 28px;font-size:.9rem;font-weight:600;transition:opacity .3s,transform .3s;display:flex;position:fixed;bottom:30px;left:50%;transform:translate(-50%)translateY(100px)}.page-crosshair_builder .toast.show{opacity:1;transform:translate(-50%)translateY(0)}.page-crosshair_builder .toast i{color:var(--accent-primary)}@media (max-width:900px){.page-crosshair_builder .builder-layout{grid-template-rows:auto 1fr;grid-template-columns:1fr}.page-crosshair_builder .preview-area{min-height:50vh;padding:20px}.page-crosshair_builder .settings-panel{border-top:1px solid #222;border-left:none;height:auto}.page-crosshair_builder .quick-actions{justify-content:center}}@media (max-width:480px){.page-crosshair_builder .builder-header{padding:0 12px}.page-crosshair_builder .header-title{font-size:1rem}.page-crosshair_builder .preview-canvas-wrapper{aspect-ratio:4/3}.page-crosshair_builder .code-box{flex-direction:column}.page-crosshair_builder .code-box .action-btn{justify-content:center;width:100%}}.page-crosshair_builder .btn-copy.copied{color:#000!important;background:#00d4ff!important}.page-crosshair_builder .settings-divider{background:#222;height:1px;margin:20px 0}@media (max-width:480px){.page-crosshair_builder .hide-mobile{display:none}}