:root{--discord-blue: #5865F2;--discord-hover: #4752C4;--background: #0f0f0f;--surface: #1a1a1a;--surface-hover: #242424;--border: #2a2a2a;--text-primary: #ffffff;--text-secondary: #b3b3b3;--success: #3ba55d;--danger: #ed4245}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--background);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6}.app{min-height:100vh;display:flex;flex-direction:column}.navbar{background-color:var(--surface);border-bottom:1px solid var(--border);padding:1rem 2rem}.nav-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.nav-title{font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,#5865f2,#9b59b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.main-content{flex:1;max-width:1200px;margin:0 auto;padding:2rem;width:100%}.btn{padding:.75rem 1.5rem;border:none;border-radius:.375rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:.5rem}.btn-sm{padding:.5rem 1rem;font-size:.875rem;border-radius:.35rem;white-space:nowrap;height:38px;box-sizing:border-box}label.btn{display:inline-flex;cursor:pointer;box-sizing:border-box}.btn-link{background:transparent;color:var(--discord-blue);padding:.25rem .5rem;font-weight:500}.btn-link:hover{text-decoration:underline;background:transparent}.btn-primary{background-color:var(--discord-blue);color:#fff}.btn-primary:hover{background-color:var(--discord-hover)}.btn-secondary{background-color:var(--surface-hover);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{background-color:#2f2f2f}.btn-danger{background-color:var(--danger);color:#fff}.btn-danger:hover{background-color:#c23538}.btn-danger:disabled{opacity:.6;cursor:not-allowed}.btn-discord{background-color:var(--discord-blue);color:#fff;font-size:1.125rem;padding:1rem 2rem}.btn-discord:hover{background-color:var(--discord-hover);transform:translateY(-2px);box-shadow:0 4px 12px #5865f266}.btn-back{background:transparent;color:var(--text-secondary);padding:.5rem 1rem}.btn-back:hover{color:var(--text-primary);background-color:var(--surface-hover)}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:linear-gradient(135deg,#0f0f0f,#1a1a2e)}.login-card{background-color:var(--surface);padding:3rem;border-radius:1rem;box-shadow:0 8px 32px #0006;text-align:center;max-width:400px;width:100%}.login-card h1{font-size:2.5rem;margin-bottom:.5rem;background:linear-gradient(135deg,#5865f2,#9b59b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.login-card h2{color:var(--text-secondary);font-size:1.5rem;margin-bottom:1.5rem;font-weight:400}.login-description{color:var(--text-secondary);margin-bottom:2rem}.login-footer{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border)}.login-footer p{font-size:.875rem;color:var(--text-secondary);margin-bottom:1rem}.login-legal-links{display:flex;justify-content:center;align-items:center;gap:.75rem;margin-top:1rem}.legal-link{color:var(--text-secondary);text-decoration:none;font-size:.75rem;transition:color .2s}.legal-link:hover{color:var(--discord-blue)}.legal-separator{color:var(--text-secondary);font-size:.75rem}.server-list-container h1{font-size:2.5rem;margin-bottom:.5rem}.subtitle{color:var(--text-secondary);font-size:1.125rem;margin-bottom:2rem}.servers-section{margin-bottom:3rem}.servers-section h2{font-size:1.5rem;margin-bottom:1rem;color:var(--text-primary)}.section-description{color:var(--text-secondary);margin-bottom:1rem}.server-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.server-grid.unavailable{opacity:.6}.server-card{background-color:var(--surface);border:1px solid var(--border);border-radius:.75rem;padding:1.5rem;cursor:pointer;transition:all .2s;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem}.server-card:hover{background-color:var(--surface-hover);border-color:var(--discord-blue);transform:translateY(-4px);box-shadow:0 8px 16px #0000004d}.server-card-invite{cursor:default}.server-card-invite:hover{transform:translateY(-2px);border-color:var(--border)}.bot-status{color:var(--text-secondary);font-size:.875rem;margin:-.5rem 0 .25rem}.invite-btn{margin-top:.5rem;width:100%}.invite-btn:disabled{opacity:.6;cursor:not-allowed}.server-icon{width:80px;height:80px;border-radius:50%;object-fit:cover}.server-icon-placeholder{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#5865f2,#9b59b6);display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700}.server-card h3{font-size:1.125rem;margin:0}.badge{display:inline-block;padding:.25rem .75rem;background-color:var(--danger);color:#fff;border-radius:1rem;font-size:.75rem;font-weight:600}.server-nav{background-color:var(--surface);border-bottom:1px solid var(--border);padding:0;margin-bottom:2rem}.server-nav-container{display:flex;align-items:center;justify-content:space-between;gap:1rem}.server-nav-left{display:flex;align-items:center;gap:1rem}.server-nav-tabs{display:flex;gap:.5rem}.server-nav-tab{padding:1rem 1.5rem;background:transparent;border:none;border-bottom:3px solid transparent;color:var(--text-secondary);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}.server-nav-tab:hover{color:var(--text-primary);background-color:var(--surface-hover)}.server-nav-tab.active{color:var(--discord-blue);border-bottom-color:var(--discord-blue)}.server-info{padding:1rem 1.5rem;display:flex;flex-direction:column}.server-info h1{font-size:1.5rem;margin-bottom:.25rem}.server-info .role-count{color:var(--text-secondary);font-size:.875rem}.server-content{padding:0 2rem 2rem}.role-manager-container .header{margin-bottom:2rem;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}.header-info{flex:1;margin-top:1rem}.btn-remove{margin-top:1rem}.header-info h1{font-size:2.5rem;margin-bottom:.25rem}.role-count{color:var(--text-secondary);font-size:1rem}.rarity-section{margin-bottom:3rem}.rarity-header{font-size:1.75rem;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.rarity-count{font-size:1rem;color:var(--text-secondary);font-weight:400}.role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}.role-card{background-color:var(--surface);border:1px solid var(--border);border-left:4px solid;border-radius:.5rem;padding:1rem;display:flex;gap:1rem;align-items:center;transition:all .2s}.role-card:hover{background-color:var(--surface-hover);transform:translate(4px)}.role-color-preview{width:60px;height:60px;border-radius:.5rem;flex-shrink:0;border:2px solid rgba(255,255,255,.1)}.role-info{flex:1;min-width:0}.role-name{font-size:1.125rem;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.role-hex{color:var(--text-secondary);font-family:Courier New,monospace;font-size:.875rem;margin-bottom:.25rem}.role-full-name{color:var(--text-secondary);font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.add-role-form{background:var(--surface);border:1px solid var(--border);border-radius:.5rem;padding:1rem;margin:.5rem 0 1rem;display:flex;flex-direction:column;gap:.75rem}.add-role-form .form-row{display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap}.add-role-form .field{display:flex;flex-direction:column;gap:.25rem}.add-role-form .field-name{flex:1;min-width:180px}.add-role-form .field-hex{width:140px}.add-role-form .field-picker{width:60px}label.field-label{font-size:.8rem;color:var(--text-secondary);font-weight:500}.input{background:var(--background);color:var(--text-primary);border:1px solid var(--border);border-radius:.375rem;padding:.5rem .6rem;font-size:.95rem}.input.color{font-family:Courier New,monospace}.color-picker-input{width:100%;height:38px;padding:2px;border:1px solid var(--border);border-radius:.375rem;background:var(--background);cursor:pointer}.form-actions{display:flex;gap:.5rem;align-items:center}.btn-add-role{margin-left:auto}.role-actions-compact{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:0 0 1rem}.role-actions-compact .btn{min-width:200px;justify-content:center}.csv-upload-inline{display:flex;align-items:center;gap:.5rem}.csv-upload-inline .btn{min-width:200px;justify-content:center}.csv-upload-inline .file-name{color:var(--text-secondary);font-size:.9rem}.upload-message-inline{margin-left:auto;padding:.25rem .5rem;border-radius:.375rem;font-size:.9rem}.upload-message-inline.success{color:var(--success)}.upload-message-inline.error{color:var(--danger)}.bulk-actions{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin:.5rem 0 1rem}.selection-controls{display:flex;align-items:center;gap:.25rem}.selection-count{color:var(--text-secondary);margin-left:.5rem;font-size:.9rem}.emoji-picker{position:absolute;top:110%;left:0;z-index:100;background:var(--surface);border:1px solid var(--border);border-radius:.5rem;box-shadow:0 10px 30px #00000080;padding:.5rem;min-width:420px;max-width:90vw}.emoji-grid{display:grid;grid-template-columns:repeat(10,38px);gap:8px;max-height:260px;overflow-y:auto;padding:4px}.emoji-btn{width:38px;height:38px;border-radius:8px;border:1px solid var(--border);background:var(--surface-hover);color:var(--text-primary);display:inline-flex;align-items:center;justify-content:center;font-size:20px;line-height:1;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,transform .05s ease}.emoji-btn:hover{background:#2f2f2f;border-color:var(--discord-blue)}.emoji-btn:active{transform:scale(.96)}.emoji-btn.selected{background:var(--discord-blue);border-color:var(--discord-blue);box-shadow:0 0 0 2px #5865f24d}.emoji-btn.has-variations{position:relative}.emoji-btn .variation-indicator{position:absolute;bottom:2px;right:2px;font-size:8px;opacity:.6;pointer-events:none}.emoji-variations-popup{display:flex;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:6px;box-shadow:0 8px 24px #0009;animation:fadeIn .1s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.emoji-variations-popup .emoji-btn{width:38px;height:38px}.emoji-tip{font-size:.8rem;color:var(--text-secondary);margin-top:.4rem}.emoji-tip kbd{background:var(--background);border:1px solid var(--border);border-radius:3px;padding:1px 4px;font-family:monospace;font-size:.75rem}kbd{background:var(--background);border:1px solid var(--border);border-radius:3px;padding:1px 5px;font-family:SF Mono,Monaco,Consolas,monospace;font-size:.85em;box-shadow:0 1px #0003}.banner-display{background:var(--surface);border:1px solid var(--border);color:var(--text-primary);padding:.75rem 1.25rem;border-radius:6px;display:flex;align-items:center;min-height:48px}.role-list-preview{max-height:220px;overflow:auto;border:1px solid var(--border);border-radius:.5rem;padding:.5rem;margin:.75rem 0 1rem;background:var(--surface)}.role-preview-item{display:flex;align-items:center;gap:.5rem;padding:.25rem .35rem}.role-color-dot{width:12px;height:12px;border-radius:50%;border:1px solid rgba(255,255,255,.2)}.role-checkbox{transform:translateY(2px)}.empty-state{text-align:center;padding:4rem 2rem;background-color:var(--surface);border-radius:1rem;border:2px dashed var(--border)}.empty-state h2{font-size:2rem;margin-bottom:1rem}.empty-state p{color:var(--text-secondary);font-size:1.125rem;margin-bottom:2rem}.role-format-info{max-width:500px;margin:2rem auto 0;text-align:left;background-color:var(--background);padding:1.5rem;border-radius:.5rem}.role-format-info h3{font-size:1.125rem;margin-bottom:.75rem;color:var(--text-primary)}.role-format-info ul{list-style:none;margin-bottom:1.5rem}.role-format-info li{padding:.5rem 0;color:var(--text-secondary)}.role-format-info code{background-color:var(--surface);padding:.25rem .5rem;border-radius:.25rem;font-family:Courier New,monospace;color:var(--discord-blue)}.info-notice,.warning-notice{margin:1.5rem 0;padding:1.25rem;border-radius:.5rem;border-left:4px solid}.info-notice{background-color:#5865f21a;border-left-color:var(--discord-blue)}.info-notice h3{color:var(--discord-blue);font-size:1.125rem;margin-bottom:.75rem}.warning-notice{background-color:#faa61a1a;border-left-color:#faa61a}.warning-notice h3{color:#faa61a;font-size:1.125rem;margin-bottom:.75rem}.info-notice p,.warning-notice p{color:var(--text-primary);margin-bottom:.5rem;line-height:1.6}.info-notice p:last-child,.warning-notice p:last-child{margin-bottom:0}.info-notice code,.warning-notice code{background-color:#0000004d;padding:.15rem .4rem;border-radius:.25rem;font-family:Courier New,monospace;color:var(--text-primary);font-size:.9em}.loading{display:flex;align-items:center;justify-content:center;min-height:50vh;font-size:1.25rem;color:var(--text-secondary)}.error{text-align:center;padding:4rem 2rem}.error h2{color:var(--danger);font-size:2rem;margin-bottom:1rem}.error p{color:var(--text-secondary);margin-bottom:2rem}@media(max-width:768px){.main-content{padding:1rem}.server-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.role-grid{grid-template-columns:1fr}.login-card{padding:2rem}.nav-title{font-size:1.25rem}}.modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.modal-content{background-color:var(--surface);border:1px solid var(--border);border-radius:.75rem;padding:2rem;max-width:500px;width:100%;box-shadow:0 8px 32px #00000080}.modal-content h2{margin:0 0 1rem;font-size:1.5rem}.modal-content p{margin:.5rem 0;color:var(--text-secondary);line-height:1.6}.warning-text{color:var(--danger)!important;font-weight:600;margin-top:1rem!important}.modal-actions{display:flex;gap:1rem;margin-top:1.5rem;justify-content:flex-end}.modal-actions .btn{flex:1;justify-content:center}.legal-page{max-width:800px;margin:0 auto;padding:2rem}.legal-page h1{font-size:2.5rem;margin-bottom:.5rem}.legal-page .last-updated{color:var(--text-secondary);font-size:.875rem;margin-bottom:2rem}.legal-page section{margin-bottom:2rem}.legal-page h2{font-size:1.5rem;margin-top:2rem;margin-bottom:1rem;color:var(--discord-blue)}.legal-page h3{font-size:1.25rem;margin-top:1.5rem;margin-bottom:.75rem}.legal-page p{line-height:1.8;margin-bottom:1rem;color:var(--text-secondary)}.legal-page ul{margin:1rem 0 1rem 2rem;line-height:1.8}.legal-page li{margin-bottom:.5rem;color:var(--text-secondary)}.legal-page a{color:var(--discord-blue);text-decoration:none}.legal-page a:hover{text-decoration:underline}.legal-page strong{color:var(--text-primary)}.footer{background-color:var(--surface);border-top:1px solid var(--border);padding:1.5rem 2rem;margin-top:auto;text-align:center}.footer-links{display:flex;justify-content:center;gap:2rem;margin-bottom:.5rem}.footer-link{color:var(--text-secondary);text-decoration:none;font-size:.875rem;transition:color .2s}.footer-link:hover{color:var(--discord-blue)}.footer-text{color:var(--text-secondary);font-size:.75rem}.schedule-row{transition:border-color .2s}.schedule-row:hover{border-color:var(--discord-blue)!important}.schedule-row input[type=time]{font-family:inherit;cursor:pointer}.schedule-row input[type=time]::-webkit-calendar-picker-indicator{filter:invert(1);cursor:pointer}