*{box-sizing:border-box;margin:0;padding:0}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;min-width:320px;min-height:100vh;background-color:#f5f5f5;color:#333}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer}button:focus,input:focus{outline:2px solid rgba(204,123,24,.4)}:root{--header-background: #E9FDF1;--page-background: #F2F2F2;--server-background: #FFFFFF;--service-background: #C9CFD1;--server-text: #2C3E50;--service-text: #2DBE60;--accent-text: #2DBE60;--accent-text-hover: color-mix(in srgb, #2DBE60 85%, white);--secondary-text: #7D7D7D;--accent-button: #2DBE60;--primary-button: #2DBE60;--primary-button-hover: color-mix(in srgb, #2DBE60 85%, white);--secondary-button: #C9CFD1;--secondary-button-hover: color-mix(in srgb, #C9CFD1 85%, white);--primary-button-text: #FFFFFF;--secondary-button-text: #2C3E50;--status-red: #EC6141;--status-amber: #DBA33A;--status-green: #7BB961;--input-border: #444;--placeholder-text: #777;--shortcut-description: #a0a0a0;--modal-overlay: rgba(0, 0, 0, .7);--kbd-background: #333;--kbd-border: #444;--kbd-text: #e0e0e0;--sorting-text: #a0a0a0;--transparent-light: rgba(255, 255, 255, .03);--transparent-border: rgba(255, 255, 255, .1);--delete-hover: rgba(236, 97, 65, .15);--hover-mix-ratio: 85%;--hover-palette-button: rgba(45, 190, 96, .1);--hover-service-item: color-mix(in srgb, var(--service-background) var(--hover-mix-ratio), white);--hover-status-red: color-mix(in srgb, var(--status-red) var(--hover-mix-ratio), white);--hover-text-button: var(--accent-text-hover);--font-size-xl: 2rem;--font-size-lg: 1.5rem;--font-size-md: 1.25rem;--font-size-base: 1rem;--font-size-sm: .875rem;--line-height-normal: 1.5;--line-height-compact: 1.4;--height-button: 38px;--height-service: 40px}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;margin:0;padding:0;background-color:var(--page-background);color:var(--server-text);overflow-x:hidden;line-height:var(--line-height-normal)}html{overflow-x:hidden;overscroll-behavior:none}#root{width:100%;margin:0;padding:0;text-align:left;overflow-x:hidden;max-width:100%}.homni-app{min-height:100vh;width:100%;max-width:100%;display:flex;flex-direction:column;background:var(--page-background);overflow:hidden;overscroll-behavior:none;margin:0;padding:0;gap:0}.container{max-width:100%;width:100%;margin:0;padding:2rem;flex:1 0 auto;box-sizing:border-box;display:flex;flex-direction:column;gap:1rem}.header{background-color:var(--header-background);padding:1rem 2rem;display:flex;align-items:center;gap:1.5rem;position:sticky;top:0;z-index:10;width:100%;box-sizing:border-box;justify-content:space-between}.header-logo{display:flex;align-items:center;gap:1rem;flex:1 0 0}.header h1{margin:0;font-size:var(--font-size-lg);font-weight:500;color:var(--server-text)}.add-button{background-color:var(--primary-button);color:var(--primary-button-text);border:none;padding:0 1rem;height:var(--height-button);border-radius:4px;font-size:var(--font-size-sm);font-weight:500;cursor:pointer}.btn-secondary{background-color:var(--secondary-button);color:var(--secondary-button-text);border:none;padding:0 1rem;height:var(--height-button);border-radius:4px;font-size:var(--font-size-sm);font-weight:500;cursor:pointer}.add-button:hover{background-color:var(--primary-button-hover)}.btn-secondary:hover{background-color:var(--secondary-button-hover)}.card{background-color:var(--server-background);border-radius:8px;padding:1.5rem;margin-bottom:1rem}.card:hover{transform:none}.welcome-section{padding-top:1rem;margin-bottom:1rem}.welcome-section .card h2{margin-bottom:1rem}.section-header{display:flex;justify-content:space-between;align-items:center;margin-top:2rem;margin-bottom:1rem;flex-wrap:wrap;gap:1rem;max-width:100%;margin-left:0;margin-right:0;padding:0;width:100%;box-sizing:border-box}.section-title{margin:0;color:var(--accent-text);font-weight:500;font-size:var(--font-size-lg);position:absolute;left:50%;transform:translate(-50%);text-align:center;line-height:var(--line-height-normal)}.section-buttons{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:0}.app-logo{width:32px;height:32px;background-color:var(--accent-text);-webkit-mask-image:url(/images/icon_white.png);-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-image:url(/images/icon_white.png);mask-size:contain;mask-repeat:no-repeat;mask-position:center}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;margin-top:40px}.loading-spinner{width:40px;height:40px;border:3px solid rgba(204,123,24,.3);border-radius:50%;border-top-color:#cc7b18;animation:spin 1s ease-in-out infinite;margin-bottom:20px}@keyframes spin{to{transform:rotate(360deg)}}.keyboard-shortcuts-info{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--transparent-border)}.keyboard-shortcuts-info h3{font-size:var(--font-size-base);color:var(--accent-text);margin-bottom:1rem;line-height:var(--line-height-normal)}.keyboard-shortcuts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;margin:0;padding:0}.shortcut-item{display:flex;flex-direction:column;align-items:center;padding:.75rem;border:1px solid var(--transparent-border);border-radius:5px;text-align:center;background-color:var(--transparent-light)}.shortcut-keys{display:flex;align-items:center;justify-content:center;gap:2px;margin-bottom:.5rem}.shortcut-description{font-size:var(--font-size-sm);color:var(--shortcut-description);margin:0;line-height:var(--line-height-compact);font-style:italic}.welcome-buttons{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem;margin-bottom:1.5rem}.welcome-buttons .btn-secondary{background-color:var(--secondary-button);color:var(--secondary-button-text);border:none;padding:.5rem 1rem;cursor:pointer;border-radius:4px;font-size:var(--font-size-sm);font-weight:500;transition:all .2s;height:var(--height-button)}.welcome-buttons .btn-secondary:hover{background-color:var(--secondary-button-hover)}kbd{background-color:var(--kbd-background);border:1px solid var(--kbd-border);border-radius:3px;box-shadow:none;color:var(--kbd-text);display:inline-block;font-size:var(--font-size-sm);font-family:monospace;line-height:1;padding:3px 5px}#servicePort{border-left:3px solid #CC7B18}#servicePort:focus{border-left:3px solid #CC7B18;background-color:#cc7b180d}.search-container{flex:0 1 auto;display:flex;justify-content:center;width:100%;max-width:1200px;margin:0 1.5rem}.search-bar{position:relative;width:100%}.search-input{width:100%;height:var(--height-button);padding:0 1rem;border-radius:20px;border:none;background-color:var(--service-background);color:var(--server-text);font-size:var(--font-size-base)}.search-input:focus{background-color:var(--service-background);border:1px solid var(--accent-text)!important;box-shadow:none}.search-input::placeholder{color:var(--secondary-text);opacity:.7}.search-clear-button{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--secondary-text);font-size:1.2rem;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%}.search-clear-button:hover{color:var(--accent-text);background-color:var(--hover-palette-button)}.search-status{margin-bottom:1.5rem;padding:.75rem 1rem;background-color:var(--server-background);color:var(--accent-text);border:1px solid var(--accent-text);border-radius:4px;display:flex;align-items:center;justify-content:space-between;box-shadow:none}.search-status p{margin:0;font-size:var(--font-size-sm);line-height:var(--line-height-compact)}.text-button{background:none;border:none;color:var(--accent-text);cursor:pointer;padding:0;text-decoration:underline;font-size:.95rem;margin-left:5px}.text-button:hover{color:var(--hover-text-button)}.footer{text-align:center;padding-top:0;padding-bottom:1rem;padding-left:0;padding-right:0;margin-top:1rem;margin-bottom:0;color:var(--server-text);font-size:.9rem;width:100%;display:flex;justify-content:center;align-items:center;gap:6px;position:relative;flex-shrink:0}.footer-logo{width:16px;height:16px;background-color:var(--accent-text);mask-image:url(/images/icon_white.png);mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-image:url(/images/icon_white.png);-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;flex:1 0 0}.header-palette-button{color:var(--accent-button);background:transparent;border:none;cursor:pointer;padding:0}.header-palette-button:hover{color:var(--accent-text)}.header-help-button{width:28px;height:28px;border-radius:50%;border:1px solid var(--secondary-text);background:transparent;color:var(--secondary-text);font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.header-help-button:hover{color:var(--accent-text);border-color:var(--accent-text)}.help-dialog{max-width:420px}.help-dialog .dialog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.help-dialog .dialog-close{background:transparent;border:none;color:var(--secondary-text);font-size:1.5rem;cursor:pointer;padding:0 .25rem;line-height:1}.help-dialog .dialog-close:hover{color:var(--server-text)}.header-palette-icon{width:24px;height:24px;background-color:currentColor;mask-image:url(/images/palette.png);mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-image:url(/images/palette.png);-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center}.dialog{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--modal-overlay);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.dialog-content,.palette-dialog-content{background-color:var(--server-background);padding:2rem;border-radius:8px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;position:relative;margin:auto;box-shadow:none}.theme-selector{display:flex;gap:1.5rem;margin-bottom:.375rem;margin-top:.375rem;justify-content:center}.theme-button{background:transparent;border:2px solid transparent;border-radius:8px;padding:.25rem;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;width:130px}.theme-button:hover{transform:none}.theme-button:focus{outline:none;border-color:var(--service-text)}.theme-preview{width:100%;height:80px;border-radius:6px;overflow:hidden;margin-bottom:.5rem;box-shadow:none;position:relative}.theme-button span{color:var(--server-text);font-size:var(--font-size-sm);line-height:var(--line-height-normal)}.dark-theme-preview{background-color:#202020}.dark-theme-preview .theme-header{height:20px;background-color:#101010}.dark-theme-preview .theme-server{height:40px;background-color:#181818;margin:10px;position:relative}.dark-theme-preview .theme-accent{position:absolute;right:8px;top:8px;width:24px;height:24px;background-color:#c17f33;border-radius:3px;border:none}.dark-theme-preview .theme-secondary{position:absolute;left:8px;top:8px;width:8px;height:24px;background-color:#dba33a;border-radius:2px;border:none}.light-theme-preview{background-color:#f2f2f2}.light-theme-preview .theme-header{height:20px;background-color:#e9fdf1}.light-theme-preview .theme-server{height:40px;background-color:#fff;margin:10px;position:relative}.light-theme-preview .theme-accent{position:absolute;right:8px;top:8px;width:24px;height:24px;background-color:#2dbe60;border-radius:3px;border:none}.light-theme-preview .theme-secondary{position:absolute;left:8px;top:8px;width:8px;height:24px;background-color:#2dbe60;border-radius:2px;border:none}.color-categories{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.25rem;margin-top:.5rem}.color-category{margin:0;padding:0}.color-category h3{margin:0 0 .25rem;color:var(--service-text);font-size:var(--font-size-base);font-weight:500;line-height:var(--line-height-normal)}.color-picker-container{display:flex;align-items:center;gap:8px;margin:0 0 .125rem;padding:0;width:100%}.color-categories.simplified .color-picker-container{padding:0;margin:0 0 .125rem}.color-category[data-group=backgrounds],.color-category[data-group=cards],.color-category[data-group=text],.color-category[data-group=status]{padding-bottom:.25rem}.color-picker-label{flex:1;font-size:var(--font-size-sm);min-width:120px;line-height:var(--line-height-normal)}.color-picker-input{width:100px;padding:.25rem;text-align:center;font-family:monospace;border-radius:3px;border:none;background-color:var(--service-background);color:var(--server-text)}.color-preview{width:30px;height:30px;border-radius:4px;border:1px solid var(--secondary-text);cursor:pointer;transition:transform .15s}.color-preview:hover{transform:scale(1.1)}.palette-actions{margin-top:1.5rem;display:flex;justify-content:space-between;align-items:center}.palette-action-buttons{display:flex;gap:.75rem}.palette-actions .btn-reset{background-color:var(--server-background);color:var(--accent-text);border:1px solid var(--accent-text);padding:.5rem 1rem;border-radius:4px;font-size:var(--font-size-sm);cursor:pointer;transition:all .2s;height:var(--height-button);display:inline-flex;align-items:center;justify-content:center;min-width:90px}.palette-actions .btn-reset:hover{background-color:var(--primary-button);color:var(--primary-button-text);border-color:var(--primary-button)}.palette-actions .btn-cancel,.palette-actions .btn-primary{padding:.5rem 1rem;border-radius:4px;font-size:var(--font-size-sm);cursor:pointer;transition:all .2s;height:var(--height-button);display:inline-flex;align-items:center;justify-content:center;min-width:90px;border:none}.palette-actions .btn-cancel{background-color:var(--secondary-button);color:var(--secondary-button-text)}.palette-actions .btn-primary{background-color:var(--primary-button);color:var(--primary-button-text)}.palette-actions .btn-cancel:hover{background-color:var(--secondary-button-hover)}.palette-actions .btn-primary:hover{background-color:var(--primary-button-hover)}.save-notification{position:fixed;bottom:2rem;right:2rem;background-color:var(--server-background);color:var(--server-text);padding:1rem 1.5rem;border-radius:4px;z-index:1000;animation:fadeInOut 3s ease-in-out;border:1px solid var(--accent-button)}.save-notification--error{border-color:var(--status-red)}.save-notification span{font-size:var(--font-size-sm);line-height:var(--line-height-normal)}@keyframes fadeInOut{0%{opacity:0;transform:translateY(20px)}10%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:36px;height:30px;padding:0;border:1px solid var(--secondary-text);border-radius:4px;cursor:pointer;background-color:transparent}input[type=color]::-webkit-color-swatch-wrapper{padding:0;margin:0;border:none}input[type=color]::-webkit-color-swatch{border:none;border-radius:3px}.color-picker-container input[type=color]+input[type=color]{margin-left:5px;border-radius:4px}.color-picker-container input[type=color]:first-of-type{border-radius:4px}.palette-preview{background-color:var(--server-background);border-radius:8px;padding:1rem;margin-top:1rem;border:1px solid var(--service-background)}.preview-server{background-color:var(--server-background);border-radius:4px;padding:1rem;margin-bottom:1rem;box-shadow:none}.preview-server-name{color:var(--server-text);font-weight:500;margin:0 0 .5rem}.preview-server-ip{color:var(--secondary-text);font-size:.85rem;margin:0 0 .75rem}.preview-service{background-color:var(--service-background);border-radius:4px;padding:.5rem .75rem;display:flex;justify-content:space-between;align-items:center}.preview-service-name{color:var(--service-text)}.preview-service-port{color:var(--secondary-text);font-size:.85rem}.preview-button{background-color:var(--accent-button);color:var(--primary-button-text);border:none;padding:.4rem .8rem;border-radius:4px;font-size:.85rem;margin-top:.75rem}.preview-status{display:flex;gap:10px;margin-top:1rem}.preview-status-item{width:15px;height:15px;border-radius:50%;border:1px solid var(--secondary-text)}.preview-status-red{background-color:var(--status-red)}.preview-status-amber{background-color:var(--status-amber)}.preview-status-green{background-color:var(--status-green)}@media (max-width: 900px){.header{flex-wrap:wrap;padding:1rem 2rem;gap:1rem}.header-logo{order:1;flex-basis:auto}.search-container{order:2;flex:1 1 auto;margin:0}.header-palette-button{order:3}.section-title{position:relative;left:0;transform:none;margin:1rem auto;width:100%;text-align:center}.section-header{flex-direction:column;align-items:flex-start;padding:1rem 0;margin-bottom:1rem}.sorting-options{margin-top:1rem;width:100%}}@media (max-width: 600px){.header-buttons{width:100%}.header-button,.add-button{font-size:.8rem;padding:.4rem .7rem}.header-palette-button{margin-left:1rem;margin-right:-.5rem}.container{padding:1rem 2rem!important}.section-header{padding:1rem 0}.welcome-buttons{flex-direction:column;width:100%}.welcome-buttons .add-button,.welcome-buttons .header-button{width:100%}}.palette-hint{color:var(--server-text);font-size:var(--font-size-sm);margin-top:1rem;margin-bottom:1rem;font-style:italic;text-align:left;line-height:var(--line-height-compact)}textarea{width:100%;padding:.5rem;border:1px solid var(--input-border);background-color:var(--service-background);color:var(--server-text);border-radius:4px;font-size:1rem;box-sizing:border-box;transition:border-color .2s;min-height:80px;font-family:inherit;resize:vertical}textarea:focus{outline:none;border-color:var(--accent-button);box-shadow:none}textarea::placeholder{color:var(--placeholder-text)}.checkbox-group{margin-top:.5rem}.checkbox-label{display:flex;align-items:center;gap:16px;cursor:pointer}.checkbox-label input[type=checkbox]{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--accent-button)}.checkbox-label span{font-size:var(--font-size-sm);line-height:var(--line-height-normal)}.notes-hidden-indicator{margin-bottom:.75rem;text-align:right}.notes-hidden-indicator small{font-size:var(--font-size-sm);color:var(--secondary-text);font-style:italic;padding:.2rem .5rem;background-color:var(--transparent-light);border-radius:3px;margin-top:.25rem;display:block;line-height:var(--line-height-compact)}.servers-grid{width:100%;margin:0;padding:0}.server-card{background-color:var(--server-background);border-radius:8px;padding:1.5rem;margin:0}.server-name{color:var(--accent-text);font-size:var(--font-size-md);margin:0;font-weight:500;display:flex;align-items:center;gap:.75rem}.server-ip{color:var(--secondary-text);font-size:var(--font-size-sm);margin:0;display:flex;align-items:center;gap:.75rem}.service-item{display:flex;align-items:center;gap:.75rem;background-color:var(--service-background);padding:0 1rem;border-radius:4px;margin-bottom:.5rem;height:var(--height-service)}.service-content{display:flex;align-items:center;justify-content:space-between;flex:1}.service-name{color:var(--primary-text);font-size:var(--font-size-base)}.service-port{color:var(--secondary-text);font-size:var(--font-size-sm)}.sort-controls{display:flex;gap:.75rem;margin-left:1.5rem}.sort-button{background-color:var(--secondary-button);color:var(--secondary-button-text);border:none;padding:0 1rem;height:var(--height-button);border-radius:4px;font-size:var(--font-size-sm);cursor:pointer}.sort-button.active{background-color:var(--primary-button);color:var(--primary-button-text)}.sort-button:hover{background-color:var(--secondary-button-hover)}.sort-button.active:hover{background-color:var(--primary-button-hover)}.welcome-intro{margin-bottom:2rem}.privacy-note p{margin-bottom:1.5rem}.privacy-note p:last-child{margin-bottom:2rem}.server-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.server-info{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.server-location{color:var(--secondary-text);font-size:var(--font-size-sm);margin:0;font-style:italic}.btn-tertiary{background-color:var(--server-background);color:var(--accent-text);border:1px solid var(--accent-text);padding:0 1rem;height:var(--height-button);border-radius:4px;font-size:var(--font-size-sm);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.btn-tertiary:hover{background-color:var(--primary-button);color:var(--primary-button-text);border-color:var(--primary-button)}.config-button{background:none;border:none;padding:.25rem;color:var(--secondary-text);cursor:pointer;display:flex;align-items:center;justify-content:center}.config-button:hover{color:var(--accent-text)}.add-service-button{background-color:var(--server-background);color:var(--accent-text);border:1px solid var(--accent-text);padding:0 1rem;height:var(--height-button);border-radius:4px;font-size:var(--font-size-sm);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;margin-left:auto}.add-service-button:hover{background-color:var(--primary-button);color:var(--primary-button-text);border-color:var(--primary-button)}