html{height:100%}body{margin:0;padding:0;font-family:Arial,sans-serif;background-color:black;color:red;display:flex;flex-direction:column;min-height:100%}main{flex:1 0 auto}.app-container{display:flex;flex-direction:column;align-items:center;padding:40px 20px 80px 20px;width:100%;max-width:1200px;margin:0 auto;box-sizing:border-box}.app-header{text-align:center;margin-bottom:2rem}.app-header h1{font-size:2.25rem;font-weight:bold}.app-header p{color:#aaa}.panels-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;width:100%}@media (min-width:768px){.panels-grid{grid-template-columns:1fr 1fr}}.panel{background-color:#1a1a1a;padding:1.5rem;border-radius:0.5rem;display:flex;flex-direction:column;min-height:600px;max-height:calc(100vh - 250px);border:1px solid #333;overflow-y:auto}.search-container{display:grid;grid-template-columns:1fr auto;gap:0.5rem;margin-bottom:1rem}.category-filter{background-color:#333;border:1px solid #555;border-radius:0.375rem;padding:0.75rem 0.5rem;color:white;font-size:0.875rem;cursor:pointer;min-width:120px}.category-filter:focus{outline:none;border-color:red;box-shadow:0 0 0 2px rgba(255,0,0,0.5)}.quick-select-section{margin-bottom:1rem}.quick-select-title{font-size:0.875rem;font-weight:bold;color:#ccc;margin:0 0 0.5rem 0}.quick-select-list{display:flex;flex-wrap:wrap;gap:0.5rem}.quick-select-chip{background-color:#333;border:1px solid #555;border-radius:1rem;padding:0.375rem 0.75rem;color:#ccc;font-size:0.75rem;cursor:pointer;transition:all 0.2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.quick-select-chip:hover{background-color:#8B0000;color:white;border-color:#8B0000}.input-field,.server-search{box-sizing:border-box;width:100%;background-color:#333;border:1px solid #555;border-radius:0.375rem;padding:0.75rem 1rem;color:white;font-size:1rem;margin-bottom:1rem}.input-field:focus,.server-search:focus{outline:none;border-color:red;box-shadow:0 0 0 2px rgba(255,0,0,0.5)}.btn{width:100%;background-color:#8B0000;color:white;font-weight:bold;padding:0.75rem 1rem;border:none;border-radius:0.375rem;cursor:pointer;transition:background-color 0.2s}.btn:hover{background-color:#A52A2A}.btn:disabled{background-color:#555;cursor:not-allowed}.btn-secondary{background-color:#444}.btn-secondary:hover{background-color:#666}.server-list-container{flex-grow:1;overflow-y:auto;margin-bottom:1rem;position:relative}.server-list-item{padding:0.75rem;border-radius:0.375rem;cursor:pointer;transition:background-color 0.2s;color:#ccc;display:flex;justify-content:space-between;align-items:center;gap:0.5rem}.server-list-item:hover{background-color:#333}.server-list-item.selected{background-color:#8B0000;color:white}.server-list-item.selected .server-category,.server-list-item.selected .server-appid{color:rgba(255,255,255,0.8)}.server-item-content{flex:1;min-width:0}.server-name{display:block;font-weight:bold;margin-bottom:0.25rem}.server-item-meta{display:flex;gap:0.75rem;font-size:0.75rem;color:#888}.server-category{text-transform:capitalize}.server-appid{color:#666}.favorite-btn{background:none;border:none;color:#666;font-size:1.25rem;cursor:pointer;padding:0.25rem 0.5rem;transition:color 0.2s;flex-shrink:0}.favorite-btn:hover{color:#ffd700}.favorite-btn.active{color:#ffd700}.panel-footer{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}.right-panel-content{display:flex;flex-direction:column;gap:1rem}.path-validation{margin-top:0.25rem;font-size:0.75rem;min-height:1rem}.path-validation.valid{color:#4ade80}.path-validation.invalid{color:#ff4d4d}.advanced-options{background-color:#111;border:1px solid #444;border-radius:0.375rem;padding:0.75rem}.advanced-options summary{cursor:pointer;font-weight:bold;color:#ccc;user-select:none;list-style:none}.advanced-options summary::-webkit-details-marker{display:none}.advanced-options summary::before{content:'▶ ';display:inline-block;transition:transform 0.2s}.advanced-options[open] summary::before{transform:rotate(90deg)}.advanced-options-content{margin-top:1rem;display:flex;flex-direction:column;gap:1rem}.instructions{margin-top:auto;padding:1rem;background-color:#111;border:1px solid #444;border-radius:0.5rem;font-size:0.875rem;color:#ccc}.instructions h3{font-weight:bold;color:red;margin-bottom:0.5rem}.instructions a{color:#ff4d4d;text-decoration:underline}.instructions code{background-color:#444;padding:0.1rem 0.3rem;border-radius:0.25rem;font-family:monospace}.os-toggle{display:flex;background-color:#333;border-radius:0.375rem;padding:0.25rem}.os-toggle button{flex:1;border:none;background:none;padding:0.5rem;color:#aaa;font-weight:bold;cursor:pointer;border-radius:0.25rem;transition:background-color 0.2s,color 0.2s}.os-toggle button.active{background-color:#8B0000;color:white}.form-label{display:block;font-size:0.875rem;color:#ccc;margin-bottom:0.25rem}.modal-backdrop{position:fixed;inset:0;background-color:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:50;opacity:0;transition:opacity 0.3s ease;pointer-events:none}.modal-backdrop.visible{opacity:1;pointer-events:auto}.modal-panel{background-color:#1a1a1a;border:1px solid #333;border-radius:0.5rem;padding:1.5rem;width:100%;max-width:42rem;max-height:90vh;overflow-y:auto;transition:transform 0.3s ease;transform:scale(0.95)}.modal-backdrop.visible .modal-panel{transform:scale(1)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.modal-header h2{font-size:1.5rem;font-weight:bold}.modal-header button{background:none;border:none;color:#aaa;font-size:2rem;cursor:pointer;line-height:1;transition:color 0.2s}.modal-header button:hover{color:#ff4d4d}.modal-body textarea{width:100%;height:10rem;padding:0.75rem;background-color:black;color:white;font-family:'Courier New',monospace;border-radius:0.375rem;border:1px solid #555;box-sizing:border-box;font-size:0.875rem;resize:vertical}.modal-body textarea:focus{outline:none;border-color:red;box-shadow:0 0 0 2px rgba(255,0,0,0.5)}.modal-footer{margin-top:1rem;display:flex;flex-direction:column;gap:0.5rem}@media (min-width:640px){.modal-footer{flex-direction:row}}#loader-container{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background-color:rgba(26,26,26,0.9);z-index:10;border-radius:0.5rem}.loader{border:5px solid #555;border-top:5px solid red;border-radius:50%;width:60px;height:60px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.toast{position:fixed;bottom:2rem;right:2rem;background-color:#1a1a1a;border:1px solid #333;border-left:4px solid #4ade80;padding:1rem 1.5rem;border-radius:0.5rem;color:white;font-size:0.875rem;box-shadow:0 10px 25px rgba(0,0,0,0.5);z-index:100;opacity:0;transform:translateX(100%);transition:all 0.3s ease;max-width:300px}.toast.show{opacity:1;transform:translateX(0)}.toast-success{border-left-color:#4ade80}.toast-error{border-left-color:#ff4d4d}.toast-info{border-left-color:#60a5fa}@media (max-width:767px){.app-container{padding:20px 10px}.app-header h1{font-size:1.75rem}.panel{height:auto;min-height:400px}.search-container{grid-template-columns:1fr}.category-filter{min-width:auto}.quick-select-chip{max-width:150px}.server-item-meta{flex-direction:column;gap:0.25rem}.panel-footer{grid-template-columns:1fr}.modal-panel{max-width:95vw;padding:1rem}.modal-body textarea{height:8rem}.toast{bottom:1rem;right:1rem;left:1rem;max-width:none}}.server-list-container::-webkit-scrollbar{width:8px}.server-list-container::-webkit-scrollbar-track{background:#1a1a1a}.server-list-container::-webkit-scrollbar-thumb{background:#555;border-radius:4px}.server-list-container::-webkit-scrollbar-thumb:hover{background:#666}.server-list-item:focus{outline:2px solid red;outline-offset:2px}button:focus-visible{outline:2px solid red;outline-offset:2px}@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}}[data-theme="light"] body{background-color:#f0f2f5;color:#333}[data-theme="light"] .app-header h1{color:#1a1a1a}[data-theme="light"] .app-header p{color:#666}[data-theme="light"] .panel{background-color:#ffffff;border-color:#d1d5db}[data-theme="light"] .category-filter{background-color:#ffffff;border-color:#d1d5db;color:#333}[data-theme="light"] .category-filter:focus{border-color:#0056b3;box-shadow:0 0 0 2px rgba(0,86,179,0.3)}[data-theme="light"] .quick-select-title{color:#555}[data-theme="light"] .quick-select-chip{background-color:#e5e7eb;border-color:#d1d5db;color:#555}[data-theme="light"] .quick-select-chip:hover{background-color:#0056b3;color:#fff;border-color:#0056b3}[data-theme="light"] .input-field,[data-theme="light"] .server-search{background-color:#ffffff;border-color:#d1d5db;color:#333}[data-theme="light"] .input-field:focus,[data-theme="light"] .server-search:focus{border-color:#0056b3;box-shadow:0 0 0 2px rgba(0,86,179,0.3)}[data-theme="light"] .btn{background-color:#0056b3}[data-theme="light"] .btn:hover{background-color:#004494}[data-theme="light"] .btn:disabled{background-color:#d1d5db}[data-theme="light"] .btn-secondary{background-color:#6b7280}[data-theme="light"] .btn-secondary:hover{background-color:#4b5563}[data-theme="light"] .server-list-item{color:#555}[data-theme="light"] .server-list-item:hover{background-color:#f3f4f6}[data-theme="light"] .server-list-item.selected{background-color:#0056b3}[data-theme="light"] .server-item-meta{color:#6b7280}[data-theme="light"] .server-appid{color:#9ca3af}[data-theme="light"] .favorite-btn{color:#9ca3af}[data-theme="light"] .advanced-options{background-color:#f9fafb;border-color:#e5e7eb}[data-theme="light"] .advanced-options summary{color:#555}[data-theme="light"] .instructions{background-color:#f9fafb;border-color:#e5e7eb;color:#555}[data-theme="light"] .instructions h3{color:#0056b3}[data-theme="light"] .instructions a{color:#0056b3}[data-theme="light"] .instructions code{background-color:#e5e7eb}[data-theme="light"] .os-toggle{background-color:#e5e7eb}[data-theme="light"] .os-toggle button{color:#6b7280}[data-theme="light"] .os-toggle button.active{background-color:#0056b3}[data-theme="light"] .form-label{color:#555}[data-theme="light"] .modal-backdrop{background-color:rgba(0,0,0,0.5)}[data-theme="light"] .modal-panel{background-color:#ffffff;border-color:#d1d5db}[data-theme="light"] .modal-header h2{color:#1a1a1a}[data-theme="light"] .modal-header button{color:#6b7280}[data-theme="light"] .modal-header button:hover{color:#0056b3}[data-theme="light"] .modal-body textarea{background-color:#f9fafb;color:#333;border-color:#d1d5db}[data-theme="light"] .modal-body textarea:focus{border-color:#0056b3;box-shadow:0 0 0 2px rgba(0,86,179,0.3)}[data-theme="light"] #loader-container{background-color:rgba(255,255,255,0.9)}[data-theme="light"] .loader{border-color:#e5e7eb;border-top-color:#0056b3}[data-theme="light"] .toast{background-color:#ffffff;border-color:#d1d5db;color:#333}[data-theme="light"] .server-list-container::-webkit-scrollbar-track{background:#f9fafb}[data-theme="light"] .server-list-container::-webkit-scrollbar-thumb{background:#d1d5db}[data-theme="light"] .server-list-container::-webkit-scrollbar-thumb:hover{background:#9ca3af}[data-theme="light"] .server-list-item:focus{outline-color:#0056b3}[data-theme="light"] button:focus-visible{outline-color:#0056b3}