:root{--font-sans:"Sora", "Space Grotesk", system-ui, -apple-system, sans-serif;--font-mono:"Geist Mono", "Courier New", Courier, monospace;--bg-base:#0c0a09;--bg-surface:#1c1917;--bg-surface-hover:#292524;--bg-elevated:#292524;--color-primary:#00ce88;--color-primary-subtle:#00ce8826;--ui-border:#57534e;--ui-shadow-color:#000;--color-secondary:#0ea5e9;--color-success:#10b981;--color-warning:#f59e0b;--color-danger:#ef4444;--text-primary:#fafaf9;--text-secondary:#d6d3d1;--text-muted:#a8a29e;--radius-lg:10px;--radius-md:8px;--radius-sm:4px;--transition-smooth:all .12s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-base);color:var(--text-primary);font-family:var(--font-sans);min-height:100vh;line-height:1.5;position:relative;overflow-x:hidden}body:before{content:"";background-image:radial-gradient(circle, var(--ui-border) 1px, transparent 1px);z-index:-2;opacity:.2;pointer-events:none;background-size:24px 24px;position:absolute;inset:0}.app-container{flex-direction:column;gap:24px;max-width:1200px;margin:0 auto;padding:30px 16px;display:flex}.main-header{border-bottom:3px solid var(--ui-border);justify-content:space-between;align-items:center;padding-bottom:20px;display:flex}.logo-area{align-items:center;gap:16px;display:flex}.logo-icon{background:var(--bg-surface);border:3px solid var(--ui-border);border-radius:var(--radius-md);width:44px;height:44px;box-shadow:4px 4px 0px var(--ui-shadow-color);justify-content:center;align-items:center;display:flex}.logo-icon .icon-primary{width:22px;height:22px;color:var(--color-primary)}h1{font-size:1.6rem;font-weight:800;line-height:1.2}.subtitle{color:var(--text-secondary);font-size:.85rem}.badge-status{background:var(--bg-surface);border:3px solid var(--ui-border);color:var(--color-success);box-shadow:3px 3px 0px var(--ui-shadow-color);border-radius:100px;align-items:center;gap:8px;padding:6px 14px;font-size:.8rem;font-weight:700;display:flex}.pulse-indicator{background:var(--color-success);border-radius:50%;width:6px;height:6px}.navigation-tabs{border-bottom:3px solid var(--ui-border);scrollbar-width:none;z-index:5;gap:8px;padding-bottom:0;display:flex;position:relative;overflow-x:auto}.navigation-tabs::-webkit-scrollbar{display:none}.nav-tab-btn{background:var(--bg-surface);border:3px solid var(--ui-border);color:var(--text-secondary);font-family:var(--font-sans);border-radius:var(--radius-md) var(--radius-md) 0 0;cursor:pointer;white-space:nowrap;transition:var(--transition-smooth);border-bottom:3px solid var(--ui-border);align-items:center;gap:8px;padding:10px 18px;font-size:.85rem;font-weight:700;display:inline-flex;position:relative;bottom:-3px}.nav-tab-btn:hover{color:var(--text-primary);background:var(--bg-surface-hover)}.nav-tab-btn.active{background:var(--bg-base);border-color:var(--color-primary) var(--color-primary) var(--bg-base) var(--color-primary);color:var(--color-primary);border-bottom-color:var(--bg-base);z-index:6}.glass-panel{background:var(--bg-surface);border:3px solid var(--ui-border);border-radius:var(--radius-lg);box-shadow:6px 6px 0px var(--ui-shadow-color);transition:var(--transition-smooth);width:100%}.glass-panel:hover{box-shadow:8px 8px 0px var(--ui-shadow-color);transform:translate(-2px,-2px)}.main-grid{grid-template-columns:1.1fr .9fr;gap:28px;display:grid}@media (width<=968px){.main-grid{grid-template-columns:1fr;gap:24px}}.right-column-grid{flex-direction:column;gap:28px;display:flex}.panel-inputs,.panel-output,.panel-utility{flex-direction:column;gap:20px;padding:24px;display:flex}.panel-header{border-bottom:3px solid var(--ui-border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;display:flex}.panel-header h2{flex-grow:1;font-size:1.15rem;font-weight:800}.header-icon{color:var(--color-primary);width:18px;height:18px}.header-actions{flex-wrap:wrap;gap:10px;display:flex}@media (width<=580px){.panel-header{flex-direction:column;align-items:stretch}.header-actions{width:100%}.header-actions .btn{text-align:center;flex:1;justify-content:center}}.form-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}@media (width<=580px){.form-grid{grid-template-columns:1fr}.form-grid>*{grid-column:span 1!important}}.full-width{grid-column:span 2}.form-group{flex-direction:column;gap:6px;display:flex}.form-label{color:var(--text-secondary);font-size:.8rem;font-weight:700}.form-input{background:var(--bg-base);border:3px solid var(--ui-border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-sans);transition:var(--transition-smooth);width:100%;padding:10px 14px;font-size:.9rem;box-shadow:inset 2px 2px #000c}.form-input:focus{border-color:var(--color-primary);outline:none}.section-divider{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:3px solid var(--ui-border);justify-content:space-between;align-items:center;margin-top:10px;padding-bottom:6px;font-size:.75rem;font-weight:800;display:flex}.btn-text-action{color:var(--color-primary);cursor:pointer;transition:var(--transition-smooth);background:0 0;border:none;align-items:center;gap:4px;font-size:.75rem;font-weight:700;display:flex}.input-with-icon{align-items:center;display:flex;position:relative}.input-icon{color:var(--text-muted);pointer-events:none;width:16px;height:16px;position:absolute;left:12px}.input-with-icon .form-input{padding-left:38px}.select-wrapper{position:relative}.select-input{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a8a29e'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;background-size:14px;padding-right:36px}.checkbox-wrapper{align-items:flex-end;padding-bottom:6px;display:flex}.checkbox-container{cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-secondary);align-items:center;gap:8px;font-size:.85rem;display:flex}.checkbox-container input{width:18px;height:18px;accent-color:var(--color-primary);cursor:pointer}.code-font{font-family:var(--font-mono)}.input-hint{color:var(--text-muted);margin-top:2px;font-size:.7rem}.preset-badge-group{flex-wrap:wrap;gap:8px;display:flex}.badge-btn{background:var(--bg-surface-hover);border:3px solid var(--ui-border);color:var(--text-primary);border-radius:var(--radius-sm);cursor:pointer;box-shadow:0px 3px 0px var(--ui-shadow-color);transition:var(--transition-smooth);padding:6px 12px;font-size:.8rem;font-weight:700;transform:translateY(-2px)}.badge-btn:hover{border-color:var(--color-primary);color:var(--color-primary);box-shadow:0px 2px 0px var(--ui-shadow-color);transform:translateY(-1px)}.badge-btn:active{transform:translateY(1px);box-shadow:0 0 #0000}.advanced-tuning{background:var(--bg-base);border:3px solid var(--ui-border);border-radius:var(--radius-md);padding:16px}.tuning-header{color:var(--color-primary);align-items:center;gap:8px;margin-bottom:12px;font-size:.85rem;font-weight:600;display:flex}.tuning-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.code-textarea{font-family:var(--font-mono);resize:vertical;font-size:.85rem}.advanced-section-toggle{justify-content:flex-start;margin-top:10px;display:flex}.advanced-section-toggle .toggle-btn{background:var(--bg-surface-hover);border:3px solid var(--ui-border);border-radius:var(--radius-sm);color:var(--color-primary);cursor:pointer;box-shadow:0px 3px 0px var(--ui-shadow-color);transition:var(--transition-smooth);align-items:center;gap:6px;padding:8px 12px;font-size:.85rem;font-weight:800;display:inline-flex;transform:translateY(-2px)}.advanced-section-toggle .toggle-btn:active{transform:translateY(1px);box-shadow:0 0 #0000}.btn{font-family:var(--font-sans);border-radius:var(--radius-md);border:3px solid var(--ui-border);cursor:pointer;box-shadow:0px 5px 0px var(--ui-shadow-color);transition:var(--transition-smooth);justify-content:center;align-items:center;gap:8px;padding:10px 18px;font-size:.85rem;font-weight:800;display:inline-flex;transform:translateY(-4px)}.btn-sm{padding:8px 14px;font-size:.8rem}.btn-primary{background:var(--color-primary);color:#0c0a09;border-color:var(--ui-border)}.btn-primary:hover{box-shadow:0px 3px 0px var(--ui-shadow-color);background:#00e094;transform:translateY(-2px)}.btn-primary:active{transform:translateY(1px);box-shadow:0 0 #0000}.btn-secondary{background:var(--bg-surface-hover);color:var(--text-primary);border-color:var(--ui-border)}.btn-secondary:hover{background:var(--bg-elevated);box-shadow:0px 3px 0px var(--ui-shadow-color);transform:translateY(-2px)}.btn-secondary:active{transform:translateY(1px);box-shadow:0 0 #0000}.output-wrapper{background:var(--bg-base);border:3px solid var(--ui-border);border-radius:var(--radius-sm);height:340px;padding:16px;display:flex;overflow:auto}.code-output{font-family:var(--font-mono);color:var(--color-primary);white-space:pre-wrap;word-break:break-all;width:100%;margin:0;font-size:.85rem}.toggle-mode-group{background:var(--bg-base);border-radius:var(--radius-sm);border:3px solid var(--ui-border);padding:2px;display:flex}.tab-btn{color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-smooth);background:0 0;border:none;padding:4px 10px;font-size:.75rem;font-weight:600}.tab-btn.active{background:var(--color-primary-subtle);color:var(--color-primary)}.base64-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}@media (width<=600px){.base64-grid{grid-template-columns:1fr}}.base64-textarea{resize:none;height:120px;font-size:.85rem}.bottom-grid{grid-template-columns:1.2fr .8fr;gap:24px;display:grid}@media (width<=968px){.bottom-grid{grid-template-columns:1fr}}.panel-bottom-servers,.panel-bottom-presets{padding:24px}.server-cards-container{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;display:grid}.server-card{background:var(--bg-surface);border:3px solid var(--ui-border);border-radius:var(--radius-md);box-shadow:4px 4px 0px var(--ui-shadow-color);transition:var(--transition-smooth);flex-direction:column;justify-content:space-between;gap:12px;padding:16px;display:flex}.server-card:hover{border-color:var(--color-primary);box-shadow:6px 6px 0px var(--ui-shadow-color);transform:translate(-2px,-2px)}.server-flag{justify-content:space-between;align-items:center;width:100%;margin-bottom:2px;display:flex}.server-flag-img{object-fit:cover;border-radius:var(--radius-sm);border:2px solid var(--ui-border);width:32px;height:20px;box-shadow:1px 1px 2px #00000080}.server-info{flex-direction:column;flex-grow:1;gap:4px;display:flex}.server-info h3{color:var(--text-primary);margin-bottom:2px;font-size:.95rem;font-weight:800}.srv-host{color:var(--color-primary);font-size:.75rem;font-family:var(--font-mono);word-break:break-all}.srv-provider{color:var(--text-muted);font-size:.72rem}.server-actions{align-items:center;gap:8px;margin-top:8px;display:flex}.server-actions .btn{flex-grow:1}.btn-icon-link{background:var(--bg-surface);border:3px solid var(--ui-border);width:28px;height:28px;color:var(--text-secondary);box-shadow:0px 2px 0px var(--ui-shadow-color);transition:var(--transition-smooth);border-radius:50%;justify-content:center;align-items:center;text-decoration:none;display:inline-flex;transform:translateY(-1px)}.btn-icon-link:hover{background:var(--color-primary-subtle);color:var(--color-primary);border-color:var(--color-primary)}.btn-icon-link:active{transform:translateY(1px);box-shadow:0 0 #0000}.empty-state{color:var(--text-muted);text-align:center;padding:30px 10px;font-size:.85rem}.saved-profiles-list{flex-direction:column;gap:12px;max-height:240px;display:flex;overflow-y:auto}.profile-item{background:var(--bg-base);border:3px solid var(--ui-border);border-radius:var(--radius-sm);box-shadow:3px 3px 0px var(--ui-shadow-color);justify-content:space-between;align-items:center;padding:12px;display:flex}.profile-meta h4{margin-bottom:2px;font-size:.85rem;font-weight:700}.profile-meta p{color:var(--text-secondary);font-size:.75rem}.profile-actions{gap:8px;display:flex}.btn-xs{border-radius:4px;padding:6px 10px;font-size:.75rem}.btn-danger{color:var(--color-danger);border:3px solid var(--ui-border);background:#ef444414}.btn-danger:hover{background:var(--color-danger);color:#fff}.profile-actions-bar{justify-content:flex-end;margin-top:10px;display:flex}.usage-instructions-full{background:var(--bg-surface);border:3px solid var(--ui-border);box-shadow:5px 5px 0px var(--ui-shadow-color);align-items:center;gap:16px;padding:20px;display:flex}.usage-instructions-full .warning-icon{width:24px;height:24px;color:var(--color-primary);flex-shrink:0}.usage-instructions-full h4{color:var(--color-primary);margin-bottom:4px;font-size:.95rem}.usage-instructions-full p{color:var(--text-secondary);font-size:.8rem;line-height:1.4}.app-footer{text-align:center;border-top:3px solid var(--ui-border);color:var(--text-muted);padding-top:16px;font-size:.8rem}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-base)}::-webkit-scrollbar-thumb{background:var(--ui-border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.isp-detect-container{background:var(--bg-surface-hover);border:2px dashed var(--ui-border);border-radius:var(--radius-sm);margin-bottom:6px;padding:12px}.isp-detect-header{flex-direction:column;gap:8px;display:flex}@media (width>=640px){.isp-detect-header{flex-direction:row;align-items:center}}.isp-detect-message{color:var(--color-primary);font-size:.8rem;font-weight:600}.label-with-action{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.text-primary-btn{font-weight:700;color:var(--color-primary)!important}.bug-check-feedback{border-radius:var(--radius-sm);margin-top:4px;padding:4px 8px;font-size:.75rem;font-weight:600}.bug-check-feedback.valid{color:var(--color-success);border:1px solid var(--color-success);background:#10b98126}.bug-check-feedback.invalid{color:var(--color-danger);border:1px solid var(--color-danger);background:#ef444426}.bug-check-feedback.error{color:var(--color-warning);border:1px solid var(--color-warning);background:#f59e0b26}.bug-check-feedback.idle{color:var(--text-muted)}.proxy-table-wrapper{border:3px solid var(--ui-border);border-radius:var(--radius-md);background:var(--bg-base);overflow-x:auto}.proxy-table{border-collapse:collapse;text-align:left;width:100%;font-size:.85rem}.proxy-table th,.proxy-table td{border-bottom:2px solid var(--ui-border);padding:12px}.proxy-table th{background:var(--bg-surface);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:700}.proxy-table tr:last-child td{border-bottom:none}.proxy-table tr:hover td{background:#ffffff05}.badge-proto{background:var(--color-primary-subtle);color:var(--color-primary);border-radius:var(--radius-sm);border:1px solid var(--color-primary);padding:2px 6px;font-size:.75rem;font-weight:700}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-pulse{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}.animate-spin{animation:1s linear infinite spin}@media (width<=600px){.server-card{flex-direction:column;align-items:flex-start;gap:12px;width:100%}.server-actions{border-top:1px solid var(--ui-border);flex-direction:row;justify-content:space-between;align-items:center;width:100%;margin-top:4px;padding-top:10px}.profile-item{flex-direction:column;align-items:flex-start;gap:12px}.profile-actions{justify-content:flex-end;width:100%}.btn-text-action{font-size:.8rem}.badge-btn{font-weight:800}}h1,h2,h3,h4{font-weight:800}.preset-groups-container{background:var(--bg-base);border:3px solid var(--ui-border);border-radius:var(--radius-sm);flex-direction:column;gap:12px;margin-top:6px;padding:14px;display:flex;box-shadow:inset 2px 2px #000c}.preset-operator-group{border-bottom:2px dashed var(--ui-border);flex-direction:column;gap:8px;padding-bottom:12px;display:flex}.preset-operator-group:last-child{border-bottom:none;padding-bottom:0}.preset-group-title-row{align-items:center;gap:8px;margin-bottom:4px;display:flex}.operator-logo-img{object-fit:contain;width:18px;height:18px}.preset-group-title{color:var(--color-primary);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:800}.srv-provider-row{align-items:center;gap:8px;margin-top:2px;display:flex}.provider-logo-img{border-radius:var(--radius-sm);object-fit:contain;border:1.5px solid var(--ui-border);background:#fff;width:14px;height:14px;padding:1px}.ping-badge-idle,.ping-badge{cursor:pointer;border:2px solid var(--ui-border);transition:var(--transition-smooth);-webkit-user-select:none;user-select:none;font-size:.68rem;font-weight:800;font-family:var(--font-sans);border-radius:100px;padding:3px 10px}.ping-badge-idle{background:var(--bg-surface-hover);color:var(--text-secondary)}.ping-badge-idle:hover{background:var(--color-primary-subtle);color:var(--color-primary);border-color:var(--color-primary)}.ping-badge.fast{color:var(--color-success);border-color:var(--color-success);background:#10b98126}.ping-badge.average{color:var(--color-warning);border-color:var(--color-warning);background:#f59e0b26}.ping-badge.slow{color:var(--color-danger);border-color:var(--color-danger);background:#ef444426}.ping-badge.timeout{color:var(--text-muted);border-color:var(--ui-border);background:#292524;text-decoration:line-through}.ping-badge.testing{background:var(--bg-surface-hover);color:var(--color-secondary);border-color:var(--color-secondary);animation:1.5s infinite pulse}@media (width<=768px){.utilities-grid-container{grid-template-columns:1fr!important}}.checkbox-container{cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-primary);align-items:center;gap:8px;font-size:.85rem;font-weight:800;display:inline-flex}.checkbox-container input[type=checkbox]{cursor:pointer;width:16px;height:16px;accent-color:var(--color-primary);border:2px solid var(--ui-border);border-radius:var(--radius-sm);vertical-align:middle;margin:0;display:inline-block}