@font-face{font-family:Montserrat;src:local("Montserrat"),url(/assets/Montserrat-VariableFont_wght-DcaoeaBt.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Montserrat;src:local("Montserrat"),url(/assets/Montserrat-VariableFont_wght-DcaoeaBt.ttf) format("truetype");font-weight:500;font-style:normal}@font-face{font-family:Montserrat;src:local("Montserrat"),url(/assets/Montserrat-VariableFont_wght-DcaoeaBt.ttf) format("truetype");font-weight:600;font-style:normal}:root{--card-bg: rgba(23, 23, 23, .35);--card-border: rgba(72, 72, 72, .6);--info-card-bg: rgba(22, 22, 22, .7);--info-divider-color: #222323;--text-primary: #ffffff;--text-secondary: #999e9d;--text-tertiary: #82838b;--text-dark: #000000;--text-muted: #a0a2a6;--btn-light-bg: #e5e5e5;--toggle-inactive-bg: #262527;--toggle-active-bg: #3c3b3d;--segment-bg: #2b2b2b;--placeholder-bg: #2a2a2a;--hover-overlay: rgba(255, 255, 255, .05);--hover-warm: #4b444b;--hover-secondary: #3b353b;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 24px;--spacing-2xl: 32px;--spacing-3xl: 42px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 50%;--font-xs: 12px;--font-sm: 13px;--font-md: 14px;--font-lg: 16px;--font-xl: 18px;--font-2xl: 20px;--font-3xl: 28px;--font-4xl: 36px;--transition-fast: .2s ease;--transition-normal: .3s ease;--transition-slow: .5s ease}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{margin:0;padding:0;font-family:Montserrat,gg sans,sans-serif;background:linear-gradient(142deg,#0b0e14,#212130 35.01% 44.81%,#0b0e14 83.09%);background-repeat:no-repeat;background-attachment:fixed;background-size:cover;color:#fff;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}p,h1,h2,h3,h4,h5,h6{margin:0}.modal-overlay{position:fixed;inset:0;background:#000c;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease-out}.modal-content{background-color:#171717bf;border:1px solid rgba(72,72,72,.6);border-radius:8px;max-width:520px;width:520px;height:330px;padding:40px 44px 45px;overflow:hidden;display:flex;flex-direction:column;animation:fadeInScale .3s ease-out}.modal-header{display:flex;justify-content:space-between;align-items:center}.modal-close{background:none;border:none;color:#b9bbbe;font-size:24px;cursor:pointer}.modal-body{flex:1;overflow-y:hidden;padding:20px 0;color:#999e9d}.warning-text{color:#faa61a;font-size:14px}.modal-footer{display:flex;justify-content:flex-end;margin-top:auto;gap:12px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.btn{border:none;border-radius:12px;cursor:pointer;font-size:16px;font-weight:600;transition:all .3s ease}.btn-cancel{background:#3f3f46;border:1px solid #484848;color:#fff;transition:all .3s ease}.btn-confirm-delete{background:#b74c4c;border:1px solid #484848;color:#fff;transition:all .3s ease}.btn-confirm{background:#e5e5e5;border:1px solid #484848;color:#000;transition:all .3s ease}.features-section{padding:40px 20px;max-width:1920px;margin:0 auto}.main-container{max-width:1240px;margin:0 auto}.features-header{text-align:center;margin-bottom:90px}.main-title{font-family:Montserrat,gg sans,sans-serif;font-weight:600;font-size:36px;line-height:1.2;color:#fff;margin:0 0 18px}.main-subtitle{font-family:Montserrat,gg sans,sans-serif;font-weight:600;font-size:24px;line-height:1.2;color:#949a99;margin:0}.features-grid{display:flex;justify-content:center;gap:80px}.feature-card{background-color:#17171759;border:1px solid rgba(72,72,72,.6);border-radius:12px;width:580px;height:600px;display:flex;flex-direction:column;justify-content:space-between;padding:42px 50px;position:relative;overflow:hidden}.card-content{flex-grow:1;display:flex;flex-direction:column}.card-title{font-family:Montserrat,gg sans,sans-serif;font-weight:600;font-size:24px;color:#fff;margin:0 0 24px}.card-description{font-family:Montserrat,gg sans,sans-serif;font-weight:400;font-size:24px;line-height:1.2;color:#888787;margin:0;max-width:506px}.mockup-container{position:relative;margin-top:25px}.card-button{display:block;background-color:#e5e5e5;border:1px solid #484848;border-radius:12px;padding:14px;text-align:center;font-family:Montserrat,gg sans,sans-serif;font-weight:500;font-size:18px;color:#000;text-decoration:none;transition:all .3s ease}.card-button:hover{background-color:#d0d0d0}.card-button.disabled{pointer-events:none;opacity:.5;cursor:not-allowed}.creation-mockup .deco-img-1{position:absolute;top:386px;left:274px}.creation-mockup .deco-img-2{position:absolute;top:397px;left:404px}.creation-mockup .deco-img-3{position:absolute;top:251px;left:442px}.discord-user-list{position:absolute;top:0;left:18px;background-color:#292841;border-radius:8px;width:237px;height:208px;padding:11px 10px;font-family:gg sans,sans-serif}.user-list-header{display:flex;align-items:center;gap:4px;color:#82838b;font-size:13px;font-weight:500;margin-bottom:14px}.user-list-header img{width:19px;height:19px}.user-item{display:flex;align-items:center;gap:12px;margin-bottom:12px}.user-avatar-container{position:relative;width:32px;height:32px;flex-shrink:0}.user-avatar-container .avatar-bg{position:absolute;top:0;left:0;width:100%;height:100%}.user-avatar-container .avatar-status{position:absolute;bottom:-2px;right:-2px;width:15px;height:15px}.user-info{display:flex;flex-direction:column}.user-name{color:#fff;font-size:15px;font-weight:500}.user-status{display:flex;align-items:center;gap:2px;color:#82838b;font-size:12px;font-weight:500}.user-status img{width:13px;height:13px}.discord-chat-message{position:absolute;top:42px;left:160px;background-color:#1f1e36;border-radius:8px;width:296px;height:84px;padding:21px 14px;display:flex;gap:12px;align-items:flex-start;font-family:gg sans,sans-serif}.chat-avatar{width:41px;height:41px}.chat-content{flex-grow:1}.chat-header{display:flex;align-items:center;gap:8px;margin-bottom:3px}.chat-username{color:#fff;font-size:16px;font-weight:500}.chat-icon{width:18px;height:18px}.chat-timestamp{color:#8f9194;font-size:14px;font-weight:500;margin-left:auto}.chat-text{color:#cdcdce;font-size:15px;font-weight:500;margin:0}.editing-mockup .deco-img-4{position:absolute;top:371px;left:96px}.editing-mockup .deco-img-5{position:absolute;top:256px;left:477px}.editing-mockup .deco-img-6{position:absolute;top:350px;left:372px}.discord-role-item{position:absolute;top:14px;left:16px;background-color:#292841;border-radius:8px;width:364px;height:72px;display:flex;align-items:center;padding:0 24px;font-family:gg sans,sans-serif}.discord-role-item>img{width:24px;height:24px;margin-right:24px}.role-name{color:#fff;font-size:16px;font-weight:500}.role-actions{margin-left:auto;display:flex;gap:14px}.role-action-btn{background-color:#201f31;border-radius:8px;width:40px;height:40px;border:none;cursor:pointer;display:flex;justify-content:center;align-items:center}.discord-color-picker{position:absolute;top:99px;left:86px;background-color:#1f1e36;border-radius:8px;width:364px;height:72px;display:flex;align-items:center;padding:0 24px;font-family:Montserrat,gg sans,sans-serif}.color-swatch{width:36px;height:36px;margin-right:24px}.color-hash{color:#848484;font-size:20px;margin-right:8px}.color-code{color:#fff;font-size:18px}.color-picker-action{background-color:#1a1927;border-radius:8px;width:40px;height:40px;border:none;cursor:pointer;display:flex;justify-content:center;align-items:center;margin-left:auto}.roles-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:20px;color:#b9bbbe;font-size:14px}.role-editor-section{width:100%;display:flex;justify-content:center}.role-editor-container{background-color:#171717;border:1px solid #484848;border-radius:12px;max-width:580px;width:100%;padding:42px 50px 52px;box-sizing:border-box;display:flex;flex-direction:column}.title{color:#fff;font-family:Montserrat,sans-serif;font-weight:600;font-size:24px;line-height:29px;text-align:left;margin:0}.subtitle{color:#888787;font-family:Montserrat,sans-serif;font-weight:400;font-size:24px;line-height:29px;text-align:left;margin:24px 0 42px;max-width:493px}.roles-list-wrapper{flex:1;overflow-y:auto;border:1px solid #484848;border-radius:12px;padding:20px;display:flex;flex-direction:column;max-height:247px;overflow-y:scroll;gap:14px}.role-item{background-color:#202127;border-radius:9px;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;min-height:60px;box-sizing:border-box}.role-item:hover{cursor:pointer;background-color:#4f545c33;transform:scale(1.02);transition:all .2s ease}.role-item.selected{background-color:#4f545c52}.role-info{display:flex;align-items:center;gap:20px}.role-icon{width:24px;height:24px}.role-name{color:#fff;font-family:gg sans,sans-serif;font-weight:600;font-size:16px;line-height:21px}.toggle-switch{position:relative;display:inline-block;width:48px;height:26px;flex-shrink:0}.toggle-switch:hover{cursor:pointer}.toggle-input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#3f3f46;border-radius:14px;transition:.4s}.slider:before{position:absolute;content:"";height:18px;width:18px;left:4px;bottom:4px;background-color:#fff;border-radius:50%;transition:.4s}.toggle-input:checked+.slider{background-color:#17c964}.toggle-input:checked+.slider:before{transform:translate(22px)}.action-buttons{display:flex;justify-content:flex-end;gap:16px;margin-top:auto}.btn{flex:1;height:50px;border-radius:12px;border:1px solid #484848;font-family:Montserrat,sans-serif;font-weight:500;font-size:18px;line-height:22px;cursor:pointer;transition:opacity .2s}.btn:hover{opacity:.8;transform:scale(.98);transition:all .3s ease}.btn-edit{background-color:#e5e5e5;border:1px solid #484848;color:#000;transition:all .3s ease}.btn-delete{background-color:#b74c4c;border:1px solid #484848;color:#fff;transition:all .3s ease}.disabled{opacity:.5;pointer-events:none}.disabled:hover{cursor:not-allowed}@media (max-width: 600px){.role-editor-container{padding:24px}.title,.subtitle{font-size:20px;line-height:1.4}.subtitle{margin-bottom:30px}.role-item{padding:12px 16px}.action-buttons{flex-direction:column;margin-top:40px}}.roles-list-wrapper::-webkit-scrollbar{width:6px;overflow:hidden}.roles-list-wrapper::-webkit-scrollbar-track{background:transparent;border-radius:3px}.roles-list-wrapper::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.roles-list-wrapper::-webkit-scrollbar-thumb:hover{background:transparent}@media (max-width: 1280px){.container{max-width:95%}.features-grid{flex-direction:column;align-items:center;gap:40px}}@media (max-width: 640px){.features-section{padding:60px 15px}.features-header{margin-bottom:60px}.main-title{font-size:28px}.main-subtitle{font-size:18px}.feature-card{width:100%;height:auto;padding:30px 20px}.card-description{font-size:18px}.mockup-container{transform:scale(.85);transform-origin:top left;height:250px}.creation-mockup .deco-img-1,.creation-mockup .deco-img-2,.creation-mockup .deco-img-3,.editing-mockup .deco-img-4,.editing-mockup .deco-img-5,.editing-mockup .deco-img-6{display:none}}@media (max-width: 480px){.mockup-container{transform:scale(.7);transform-origin:top left;height:210px;margin-bottom:-30px}.discord-chat-message{left:100px;transform:scale(.9);transform-origin:top left}.discord-user-list{left:0}}.container{max-width:1440px;margin:0 auto;padding:60px 80px;min-height:100vh;box-sizing:border-box}.page-title{font-size:var(--font-4xl);font-weight:600;line-height:1.2;margin:0 0 30px}.info-card{background-color:var(--info-card-bg);border-radius:var(--radius-lg);padding:28px;margin-bottom:59px;cursor:pointer;transition:background-color var(--transition-normal)}.info-card:hover{background-color:#20202099}.info-header{display:flex;justify-content:space-between;align-items:center}.info-title{font-size:var(--font-2xl);font-weight:400;margin:0}.info-icon{transform:rotate(-90deg);width:var(--spacing-xl);height:var(--spacing-xl);transition:transform var(--transition-normal)}.info-divider{border:none;height:1px;background-color:var(--info-divider-color);margin:14px 0}.info-description{font-size:var(--font-2xl);font-weight:400;line-height:1.4;margin:0}.main-content-grid{display:flex;gap:59px;align-items:stretch}.card{background-color:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);padding:var(--spacing-3xl);flex:1;min-width:0}.form-group{margin-bottom:var(--spacing-2xl)}.form-group:last-child{margin-bottom:0}.form-label{display:block;font-size:var(--font-xl);font-weight:600;margin-bottom:var(--spacing-lg)}.text-input{width:100%;background-color:transparent;border:1px solid var(--card-border);border-radius:var(--radius-lg);padding:13px 14px;font-size:var(--font-xl);font-weight:400;color:var(--text-primary);font-family:inherit;outline:none;transition:border-color var(--transition-normal)}.text-input:focus{border-color:var(--text-primary)}.text-input::placeholder{color:var(--text-secondary)}.icon-upload-area{display:flex;align-items:center;gap:var(--spacing-xl);margin-top:22px}.icon-placeholder{width:100px;height:100px;background-color:var(--card-bg);border:1px dashed var(--card-border);border-radius:var(--radius-lg);display:flex;justify-content:center;align-items:center;flex-shrink:0;cursor:pointer;transition:border-color var(--transition-normal)}.icon-placeholder:hover{border-color:var(--text-primary)}.role-icon-preview{width:var(--spacing-2xl);height:var(--spacing-2xl);border-radius:var(--radius-md);object-fit:cover}.icon-upload-text{font-size:var(--font-md);font-weight:400;color:var(--text-secondary);line-height:1.2;margin:0}.btn{display:block;width:100%;border-radius:var(--radius-lg);padding:13px;font-size:var(--font-xl);font-family:Montserrat,gg sans,sans-serif;font-weight:500;border:none;cursor:pointer;text-decoration:none;text-align:center;transition:background-color var(--transition-normal)}.btn-light{background-color:var(--btn-light-bg);color:var(--text-dark);margin-top:34px}.btn-light:hover{background-color:var(--text-secondary)}.segmented-control{display:flex;background-color:var(--segment-bg);border-radius:var(--radius-lg);padding:5px}.segment-btn{flex:1;padding:9px;background-color:transparent;border:none;color:var(--text-primary);font-size:var(--font-xl);font-weight:500;border-radius:10px;cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast)}.segment-btn:hover{background-color:var(--hover-warm)}.segment-btn.active{background-color:var(--card-bg)}.segmented-control>.segment-btn{margin:0}.segmented-control>.segment-btn.active+.segment-btn{margin-left:var(--spacing-sm)}.segmented-control>.segment-btn+.segment-btn.active{margin-left:var(--spacing-sm)}.preview-header{font-size:var(--font-xl);font-weight:600;margin:0 0 var(--spacing-lg) 0}.preview-toggles{display:flex;flex-direction:column;gap:var(--font-xl);margin-bottom:40px}.toggle-btn{padding:13px;border-radius:var(--radius-lg);border:1px solid var(--card-border);background-color:var(--toggle-inactive-bg);color:var(--text-primary);font-size:var(--font-xl);font-weight:500;text-align:center;cursor:pointer;transition:background-color var(--transition-fast),border-color var(--transition-fast)}.toggle-btn:hover{background-color:var(--hover-secondary)}.toggle-btn.active{background-color:var(--toggle-active-bg);border-color:var(--toggle-active-bg)}.color-info-row{display:flex;gap:var(--spacing-lg);flex-wrap:nowrap;flex-direction:row;margin-bottom:var(--spacing-2xl)}.color-info-card{background-color:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);width:230px;height:60px;display:flex;align-items:center;padding:0 var(--spacing-md);box-sizing:border-box;flex-grow:1}.color-circle{width:36px;height:36px;background-color:#c8469f;border-radius:var(--radius-full);cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.color-circle:hover{transform:scale(1.05)}.color-hash{color:#848484;font-size:var(--font-2xl);line-height:24px;margin-left:var(--font-xl)}.color-code{background:none;border:none;color:var(--text-primary);font-size:var(--font-xl);line-height:22px;margin-left:var(--spacing-sm);width:70px;outline:none}.copy-icon{width:20px;height:20px;margin-left:auto;cursor:pointer;transition:transform var(--transition-fast),color var(--transition-fast)}.copy-action:hover{color:#f1c40f;transform:scale(1.1)}.gradient-palette{display:flex;flex-direction:column;gap:var(--spacing-sm)}.gradient-swatch-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(30px,1fr));gap:var(--spacing-sm)}.gradient-swatch{border:1px solid var(--card-border);border-radius:var(--radius-lg);flex-shrink:0;cursor:pointer;transition:transform var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast)}.gradient-swatch:hover{transform:scale(1.05)}.gradient-swatch{height:var(--spacing-3xl)}.gradient-swatch-1{background:linear-gradient(180deg,#aa3b3b,#ff4848)}.gradient-swatch-2{background:linear-gradient(180deg,#d4843d,#ffde90)}.gradient-swatch-3{background:linear-gradient(180deg,#369876,#71ff9e)}.gradient-swatch-4{background:linear-gradient(180deg,#4cadd0,#b2f9ff)}.gradient-swatch-5{background:linear-gradient(180deg,#9e6bff,#9fc1ff)}.gradient-swatch-6{background:linear-gradient(180deg,#ff5dd6,#ff9cbf)}.gradient-swatch-7{background:linear-gradient(180deg,#907575,#ffcec6)}.gradient-swatch-8{background:linear-gradient(180deg,#9b8666,#ffe1b4)}.gradient-swatch-9{background:linear-gradient(180deg,#749472,#b3e1b9)}.gradient-swatch-10{background:linear-gradient(180deg,#8799ae,#f1f7ff)}.gradient-swatch-11{background:linear-gradient(180deg,#826bc2,#b7a7f1)}.gradient-swatch-12{background:linear-gradient(180deg,#965f7f,#ffaadc)}.solid-palette{display:flex;flex-direction:column;gap:var(--spacing-sm)}.solid-swatch-row{display:grid;grid-template-columns:repeat(10,minmax(1px,1fr));gap:var(--spacing-sm);justify-items:center}.solid-swatch{width:40px;height:40px;border:1px solid var(--card-border);border-radius:var(--radius-lg);flex-shrink:0;cursor:pointer;transition:transform var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast)}.solid-swatch:hover{transform:scale(1.05)}@media (max-width: 768px){.solid-swatch-row{grid-template-columns:repeat(5,1fr);gap:var(--spacing-sm);max-width:100%}.solid-swatch{width:36px;height:36px}}@media (max-width: 600px){.solid-swatch-row{grid-template-columns:repeat(10,1fr);gap:8px}.solid-swatch{width:34px;height:34px}.gradient-swatch-row{grid-template-columns:repeat(4,1fr);gap:8px}.gradient-swatch{height:34px;min-width:60px}}@media (max-width: 480px){.solid-swatch-row{gap:6px}.solid-swatch{width:32px;height:32px;border-radius:var(--radius-sm)}.gradient-swatch-row{grid-template-columns:repeat(3,1fr);gap:6px;padding:0 4px}.gradient-swatch{height:32px;min-width:80px}.color-info-row{flex-direction:column;gap:var(--spacing-sm)}}@media (max-width: 320px){.solid-swatch-row{grid-template-columns:repeat(5,1fr);gap:4px;padding:0 2px}.solid-swatch{width:28px;height:28px;border-radius:4px}.gradient-swatch-row{grid-template-columns:repeat(2,1fr);gap:4px;padding:0 2px}.gradient-swatch{height:28px;min-width:100px}.solid-palette,.gradient-palette{gap:4px}}@media (max-width: 768px){.color-info-row,.solid-swatch-row,.gradient-swatch-row{overflow:hidden}.container{overflow-x:hidden;width:100%;max-width:100vw}.card{width:100%;min-width:0;box-sizing:border-box}}@media (max-width: 768px){.solid-swatch,.gradient-swatch{min-width:32px;min-height:32px;position:relative}.solid-swatch:before,.gradient-swatch:before{content:"";position:absolute;top:50%;left:50%;min-width:44px;min-height:44px;transform:translate(-50%,-50%)}}@media (max-width: 768px){.solid-swatch:focus,.gradient-swatch:focus{outline:2px solid var(--text-primary);outline-offset:2px;z-index:1}.solid-swatch,.gradient-swatch{border-width:1.5px}}@media (max-width: 768px) and (orientation: landscape){.solid-swatch-row{grid-template-columns:repeat(10,1fr)}.gradient-swatch-row{grid-template-columns:repeat(6,1fr)}}@media (max-width: 480px) and (orientation: landscape){.solid-swatch-row{grid-template-columns:repeat(8,1fr)}.gradient-swatch-row{grid-template-columns:repeat(4,1fr)}}.color-picker-container{position:absolute;z-index:10;background-color:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:0 4px 10px #00000040}.preview-container{max-width:560px;margin:0 auto;background-color:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);padding:var(--spacing-3xl);display:flex;flex-direction:column;align-items:center;gap:var(--font-xl);flex:1;min-width:0}.preview-title{font-family:inherit;font-weight:600;font-size:var(--font-xl);color:var(--text-primary);margin:0;width:100%;text-align:left;padding-bottom:2px}.preview-tab{width:476px;height:50px;border-radius:var(--radius-lg);border:1px solid var(--card-border);font-family:inherit;font-weight:500;font-size:var(--font-xl);color:var(--text-primary);cursor:pointer;display:flex;justify-content:center;align-items:center;transition:background-color var(--transition-fast)}.preview-tab.active{background-color:var(--toggle-active-bg)}.preview-tab.inactive{background-color:var(--toggle-inactive-bg)}.preview-content{border:1px solid var(--toggle-active-bg);border-radius:var(--radius-lg);padding:50px 28px}.preview-section{margin-bottom:36px}.preview-section:last-child{margin-bottom:0}.preview-section-title{font-size:var(--font-xl);font-weight:600;margin:0 0 14px}.chat-panel{width:476px;height:444px;background-color:var(--card-bg);border:1px solid var(--toggle-active-bg);border-radius:var(--radius-lg);padding:30px;animation:fadeInUp var(--transition-slow) forwards}@keyframes fadeInUp{0%{transform:translateY(20px)}to{transform:translateY(0)}}.message-list{border-radius:22px;overflow:hidden;display:flex;flex-direction:column;height:100%}.chat-message{display:flex;align-items:flex-start;gap:14px;padding:23px 36px;flex-grow:1}.style-11{background-color:#36373e}.style-10{background-color:#202024}.style-9{background-color:#0c0c0e}.style-8{background-color:#fbfbfb}.avatar{width:48px;height:48px;border-radius:var(--radius-full);flex-shrink:0}.message-body{display:flex;flex-direction:column;gap:var(--spacing-xs);padding-top:2px}.message-header{display:flex;align-items:center;gap:var(--spacing-sm)}.username{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:600;font-size:var(--font-lg);line-height:21.3px}.channel-icon{width:21.4px;height:21.4px}.timestamp{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:500;font-size:var(--font-md);line-height:18.7px}.message-text{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:500;font-size:var(--font-lg);line-height:21.3px;margin:0}.style-18{color:var(--text-primary)}.style-19{color:#cdcdce}.style-20{color:#b9bbbe}.style-13{color:#4b4b50;filter:brightness(.85)}.style-14{color:#323339}.style-15{color:#85868e}.user-list-widget{max-width:476px;width:476px;background-color:var(--card-bg);border:1px solid var(--toggle-active-bg);border-radius:var(--radius-lg);padding:var(--spacing-xl) 8rem;animation:fadeInUp var(--transition-slow) forwards}.widget-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.widget-header img{width:19px;height:19px}.widget-header h3{color:var(--text-tertiary);font-size:var(--font-sm);font-weight:500;line-height:1.3}.user-list-body{display:flex;flex-direction:column;gap:var(--spacing-sm)}.user-group-title{color:var(--text-tertiary);font-size:var(--font-sm);font-weight:500;line-height:1.3;margin-top:var(--spacing-md);margin-bottom:var(--spacing-xs);padding-left:var(--spacing-sm)}.user-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--spacing-sm);cursor:pointer;transition:background-color var(--transition-fast)}.user-item.active-user{background-color:#1f1f1f}.user-item:not(.active-user):hover{background-color:var(--hover-overlay)}.user-item.offline{opacity:.6}.user-item.offline .user-name{color:var(--text-muted)}.avatar-wrapper{position:relative;width:34px;height:34px;flex-shrink:0}.avatar-wrapper .avatar{width:100%;height:100%;border-radius:var(--radius-full);display:block}.avatar-wrapper .status-indicator{position:absolute;right:-2px;bottom:-2px;width:var(--spacing-md);height:var(--spacing-md);border-radius:var(--radius-full);border:2.5px solid var(--card-bg);background-clip:padding-box}.active-user .status-indicator{border-color:#1f1f1f}.user-details{display:flex;flex-direction:column;gap:2px;overflow:hidden}.user-name{font-size:15px;font-weight:500;line-height:1.3;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-activity{display:flex;align-items:center;gap:var(--spacing-xs)}.user-activity img{width:14px;height:14px;flex-shrink:0}.activity-text{font-size:var(--font-xs);font-weight:500;line-height:1.3;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-row{display:flex;align-items:center;gap:var(--font-xl);margin-bottom:var(--spacing-md)}.user-row:last-child{margin-bottom:0}.user-avatar{width:var(--spacing-3xl);height:var(--spacing-3xl);border-radius:var(--radius-full);flex-shrink:0}.user-name-placeholder{height:var(--font-xl);border-radius:15px;background-color:var(--placeholder-bg)}.user-name-placeholder.short{width:91px}.user-name-placeholder.long{width:154px}@media (max-width: 1440px){.container{padding:50px 60px}}@media (max-width: 1280px){.container{padding:40px}.main-content-grid{flex-direction:column;gap:40px}.card{width:100%}.preview-container,.chat-panel,.preview-tab,.user-list-widget{max-width:100%;width:100%}}@media (max-width: 1024px){.container{padding:32px}.page-title{font-size:var(--font-3xl);margin-bottom:var(--spacing-xl)}.info-card{margin-bottom:40px;padding:var(--spacing-xl)}.card{padding:var(--spacing-2xl)}.color-info-row{flex-wrap:wrap}.color-info-card{min-width:280px}}@media (max-width: 768px){.container{padding:var(--spacing-xl) 20px;padding-top:50px}.page-title{font-size:var(--font-3xl)}.info-card,.info-description{font-size:var(--spacing-lg)}.card{padding:var(--spacing-xl)}.icon-upload-area{flex-direction:column;align-items:flex-start;gap:var(--spacing-lg)}.preview-container{padding:var(--spacing-xl)}.chat-panel{padding:var(--spacing-lg);height:auto;flex-grow:1}.chat-message{padding:var(--spacing-lg)}.user-list-widget{padding:var(--spacing-lg) var(--spacing-xl)}}@media (max-width: 600px){.color-info-card{width:100%}.gradient-swatch-row{grid-template-columns:repeat(auto-fit,minmax(60px,1fr))}.gradient-swatch{width:auto}.color-picker-container{left:50%!important;transform:translate(-50%);width:90%;max-width:300px}.segmented-control{flex-direction:column;gap:var(--spacing-xs)}.segment-btn{border-radius:var(--radius-lg)}.main-content-grid{gap:var(--spacing-xl)}}@media (max-width: 480px){.container{padding:var(--spacing-lg) var(--spacing-lg);padding-top:50px}.page-title{font-size:24px;margin-bottom:var(--spacing-lg)}.info-card{padding:var(--spacing-lg);margin-bottom:var(--spacing-xl)}.info-title,.info-description{font-size:var(--font-lg)}.card{padding:var(--spacing-lg)}.form-label{font-size:var(--font-lg);margin-bottom:var(--spacing-md)}.text-input,.btn,.segment-btn,.toggle-btn{font-size:var(--font-lg);padding:var(--spacing-md)}.icon-placeholder{width:80px;height:80px}.role-icon-preview{width:24px;height:24px}.icon-upload-text{font-size:var(--font-xs)}.color-info-card{height:50px;padding:0 var(--spacing-sm)}.color-circle{width:28px;height:28px}.color-hash{font-size:var(--font-lg);margin-left:var(--spacing-md)}.color-code{font-size:var(--font-md);width:60px}.preview-container{padding:var(--spacing-lg);gap:var(--spacing-md)}.preview-title{font-size:var(--font-lg)}.chat-panel{padding:var(--spacing-md)}.chat-message{padding:var(--spacing-md) var(--spacing-lg);gap:var(--spacing-md)}.avatar{width:36px;height:36px}.username,.message-text{font-size:var(--font-md)}.timestamp{font-size:var(--font-xs)}.user-list-widget{padding:var(--spacing-md) var(--spacing-lg)}.avatar-wrapper{width:28px;height:28px}.user-name{font-size:var(--font-md)}.activity-text{font-size:11px}}@media (max-width: 320px){.container{padding:var(--spacing-md) var(--spacing-md);padding-top:50px}.page-title{font-size:20px}.info-card,.card{padding:var(--spacing-md)}.icon-placeholder{width:60px;height:60px}.role-icon-preview{width:20px;height:20px}.color-info-card{height:45px}.color-circle{width:24px;height:24px}.color-hash{font-size:var(--font-md);margin-left:var(--spacing-sm)}.color-code{font-size:var(--font-sm);width:50px}.gradient-swatch-row{grid-template-columns:repeat(auto-fit,minmax(50px,1fr));gap:var(--spacing-xs)}.avatar{width:32px;height:32px}.avatar-wrapper{width:24px;height:24px}.chat-message{padding:var(--spacing-sm) var(--spacing-md);gap:var(--spacing-sm)}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.role-icon-preview,.avatar,.color-circle{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.chat-panel,.user-list-widget{animation:none;opacity:1;transform:none}}@media print{.container{background-color:#fff;color:#000;padding:20px}.card,.info-card,.preview-container{border:1px solid #ccc;background-color:#fff;box-shadow:none}.btn,.toggle-btn,.segment-btn{border:1px solid #ccc;background-color:#fff;color:#000}.chat-panel,.user-list-widget{animation:none;opacity:1;transform:none}.color-picker-container,.icon-upload-area{display:none}}.text-input:focus,.btn:focus,.toggle-btn:focus,.segment-btn:focus,.color-circle:focus,.icon-placeholder:focus{outline-offset:2px}@media (prefers-contrast: high){:root{--card-border: #ffffff;--text-secondary: #cccccc}.text-input,.btn,.toggle-btn,.segment-btn{border-width:2px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mt-0{margin-top:0}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mt-xl{margin-top:var(--spacing-xl)}.mb-0{margin-bottom:0}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.mb-xl{margin-bottom:var(--spacing-xl)}.p-0{padding:0}.p-sm{padding:var(--spacing-sm)}.p-md{padding:var(--spacing-md)}.p-lg{padding:var(--spacing-lg)}.p-xl{padding:var(--spacing-xl)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.d-none{display:none}.d-block{display:block}.d-flex{display:flex}.d-grid{display:grid}.flex-column{flex-direction:column}.flex-row{flex-direction:row}.align-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.border-radius-sm{border-radius:var(--radius-sm)}.border-radius-md{border-radius:var(--radius-md)}.border-radius-lg{border-radius:var(--radius-lg)}.border-radius-full{border-radius:var(--radius-full)}.is-loading{opacity:.6;pointer-events:none}.is-loading:after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid var(--text-secondary);border-top-color:var(--text-primary);border-radius:var(--radius-full);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.has-error{border-color:#e74c3c;box-shadow:0 0 0 2px #e74c3c33}.error-message{color:#e74c3c;font-size:var(--font-sm);margin-top:var(--spacing-xs)}.has-success{border-color:#27ae60;box-shadow:0 0 0 2px #27ae6033}.success-message{color:#27ae60;font-size:var(--font-sm);margin-top:var(--spacing-xs)}.is-disabled{opacity:.5;pointer-events:none;cursor:not-allowed}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}