:root{
  --bg:#070b12;--bg2:#0b101b;--panel:#0f1623;--panel2:#121b2a;--panel3:#172235;
  --border:#202c40;--border2:#2b3b55;--text:#f7f9fd;--muted:#8490a6;--muted2:#637087;
  --purple:#7c4dff;--purple2:#9b6cff;--blue:#4c8dff;--cyan:#48d6ff;--green:#3ed598;--gold:#f4b84f;--danger:#ff6474;
  --shadow:0 20px 60px rgba(0,0,0,.28);--radius:20px;--radius-sm:14px;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 60% -10%,#17233b 0,#0a101b 34%,#070b12 68%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}button{color:inherit}.hidden{display:none!important}
body{overflow:hidden}.app-shell{display:grid;grid-template-columns:minmax(0,1fr);height:100vh}.app-rail{display:none;background:rgba(6,10,17,.94);border-right:1px solid #182235;padding:12px 9px;flex-direction:column;align-items:center;gap:10px;overflow:hidden;position:relative;height:100vh;min-height:100vh}.shell-main{grid-column:1}.app-shell.servers-mode{grid-template-columns:68px minmax(0,1fr)}.app-shell.servers-mode .app-rail{display:flex;grid-column:1}.app-shell.servers-mode .shell-main{grid-column:2}.server-rail-list,.server-rail-controls{display:none}.app-shell.servers-mode .server-rail-list{display:grid;gap:9px;width:100%;justify-items:center;overflow:auto;scrollbar-width:none;padding:2px 0 132px;max-height:calc(100vh - 24px)}.app-shell.servers-mode .server-rail-list::-webkit-scrollbar{display:none}.app-shell.servers-mode .server-rail-controls{display:grid;gap:8px;justify-items:center;position:absolute;left:9px;right:9px;bottom:12px;z-index:5;padding-top:16px;background:linear-gradient(180deg,rgba(6,10,17,0),rgba(6,10,17,.96) 30%)}.rail-server,.rail-server-action{width:48px;height:48px;border-radius:15px;border:1px solid #1d2a40;background:#101827;color:#d9e2f0;display:grid;place-items:center;cursor:pointer;position:relative;transition:.17s ease;font-weight:900}.rail-server:hover,.rail-server.active{border-color:#7556ff;background:linear-gradient(145deg,#1c2b4b,#2b1e59);color:#fff;transform:translateY(-1px);box-shadow:0 0 22px rgba(124,77,255,.18)}.rail-server.active:before{content:"";position:absolute;left:-9px;width:4px;height:28px;border-radius:0 5px 5px 0;background:#8a68ff;box-shadow:0 0 12px rgba(138,104,255,.7)}.rail-server i{position:absolute;right:4px;bottom:4px;width:7px;height:7px;border-radius:50%;background:#42d698;box-shadow:0 0 9px rgba(66,214,152,.65)}.rail-server-action{color:#9ba9bd;background:#0d1420}.rail-server-action:hover{color:#fff;border-color:#465b7e;background:#162135}.rail-server-action.accent{color:#fff;background:linear-gradient(145deg,#4564df,#753fe9);border-color:#6850ec}.rail-empty{color:#536077;padding-top:14px}.rail-spacer{display:none}.shell-main{min-width:0;display:flex;flex-direction:column}.topbar{height:76px;border-bottom:1px solid #192338;background:rgba(8,13,22,.86);backdrop-filter:blur(18px);display:grid;grid-template-columns:210px minmax(460px,720px) 1fr;align-items:center;padding:0 18px 0 24px;gap:20px}.brand-wordmark{display:flex;align-items:baseline;gap:8px;letter-spacing:.04em}.brand-wordmark strong{font-size:19px}.brand-wordmark span{font-size:11px;color:var(--muted);letter-spacing:.24em}.top-tabs{height:52px;padding:5px;background:#0d1421;border:1px solid #1b2940;border-radius:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.top-tab{border:0;border-radius:14px;background:transparent;color:#929db2;font-weight:750;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px}.top-tab.active{color:#fff;background:linear-gradient(180deg,#1c2541,#141d33);box-shadow:inset 0 0 0 1px #3c376d,0 8px 22px rgba(0,0,0,.18)}.tab-icon{color:#8b73ff}.top-actions{justify-self:end;display:flex;align-items:center;gap:9px;min-width:0}.live-pill{padding:8px 11px;border-radius:999px;background:#151b29;border:1px solid #26324a;color:#a3aec1;font-size:12px;white-space:nowrap}.live-pill.online{background:#0f2a22;border-color:#1f5d49;color:#6de0af}.primary-btn,.ghost-btn,.danger-btn,.card-action,.discover-btn{border:0;border-radius:12px;padding:10px 15px;font-weight:800;cursor:pointer}.primary-btn{background:linear-gradient(135deg,#5b77ff,#8146ed);box-shadow:0 10px 24px rgba(91,96,255,.18)}.ghost-btn{background:#151d2e;border:1px solid #26344e;color:#d7deea}.ghost-btn.compact{padding:9px 11px}.danger-btn{background:#34161f;border:1px solid #632936;color:#ff9aa5}.full{width:100%}.icon-top-btn,.square-btn{border:1px solid #25324a;background:#111a29;border-radius:12px;color:#dce4f2;cursor:pointer}.icon-top-btn{width:42px;height:42px}.square-btn{width:40px;height:40px;font-size:19px}.square-btn.small{width:32px;height:32px}.view{display:none;flex:1;min-height:0;overflow:auto;padding:22px}.view.active{display:block}.panel,.feature-card{background:linear-gradient(180deg,rgba(17,25,39,.98),rgba(11,17,28,.98));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.eyebrow,.feature-kicker{font-size:10px;font-weight:900;letter-spacing:.16em;color:#77849a}.panel-title-row,.feature-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.panel-title-row h2,.panel-title-row h3,.feature-head h2{margin:4px 0 0}.compact-row{margin-bottom:14px}
/* PERSONAL */.personal-hero{padding:26px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(115deg,#121b2b 0,#101626 55%,#15132a 100%)}.profile-identity{display:flex;align-items:center;gap:18px}.avatar{display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#5577ff,#8a4df0);font-weight:900;border:1px solid rgba(255,255,255,.12)}.avatar.xl{width:70px;height:70px;font-size:24px}.avatar.lg{width:54px;height:54px}.avatar.sm{width:38px;height:38px}.profile-identity h1{margin:4px 0 5px;font-size:30px}.profile-identity p{margin:0;color:var(--muted)}.profile-actions{display:flex;gap:10px}.personal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}.feature-card{padding:22px;min-height:255px;position:relative;overflow:hidden}.feature-card:before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-80px;top:-90px;filter:blur(8px);opacity:.18}.friends-card:before{background:#4f8dff}.request-card:before{background:#f4b84f}.rok-card:before{background:#46d4d4}.feature-icon{font-size:26px;color:#aeb9cd}.feature-number{font-size:44px;font-weight:900;margin-top:32px}.feature-card p{color:var(--muted);line-height:1.55;min-height:48px}.card-action{position:absolute;left:22px;right:22px;bottom:20px;text-align:left;display:flex;justify-content:space-between;background:#131e31;border:1px solid #263752;color:#dbe5f6}.card-action:disabled{opacity:.6;cursor:not-allowed}.rok-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:18px}.rok-summary .stat{background:#101827;border:1px solid #22314a;border-radius:12px;padding:11px}.rok-summary span{display:block;color:var(--muted);font-size:11px}.rok-summary strong{display:block;margin-top:5px}.empty-inline{color:var(--muted);font-size:13px;grid-column:1/-1;padding:12px 0}.personal-bottom-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;margin-top:16px}.dm-dashboard-card,.account-overview{padding:22px}.personal-dm-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}.personal-dm{display:flex;align-items:center;gap:11px;padding:12px;border-radius:14px;background:#111a29;border:1px solid #22304a;cursor:pointer}.personal-dm small{display:block;color:var(--muted);margin-top:2px}.profile-overview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}.profile-overview-grid>div{padding:14px;border:1px solid #22304a;border-radius:14px;background:#101827}.profile-overview-grid span{display:block;color:var(--muted);font-size:11px}.profile-overview-grid strong{display:block;margin-top:5px}
/* SERVERS */.servers-layout{display:block;min-height:calc(100vh - 120px)}.server-workspace{min-width:0;width:100%;display:flex;flex-direction:column;gap:16px}.community-hero{padding:16px 18px;display:grid;grid-template-columns:60px 1fr auto;align-items:center;gap:14px}.community-emblem{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,#3e2d71,#15284a);border:1px solid #5d4a9e;font-weight:900;font-size:25px}.community-title-block h1{margin:5px 0 5px;font-size:25px}.community-title-block p{margin:0;color:var(--muted)}.community-actions{display:flex;gap:8px}.workspace-grid{display:grid;grid-template-columns:210px minmax(520px,1fr) 240px;gap:16px;min-height:0;flex:1}.rooms-panel,.people-panel{padding:16px;min-height:0;overflow:auto}.channel-list{display:grid;gap:5px}.nav-item{display:flex;align-items:center;justify-content:space-between;padding:10px 11px;border-radius:11px;color:#aab5c8;text-decoration:none}.nav-item:hover{background:#121c2c;color:#fff}.nav-item.active{background:linear-gradient(90deg,#24355e,#1c2743);color:#fff;border:1px solid #334f82}.role-section{border-top:1px solid #1e2a3e;margin-top:18px;padding-top:16px}.role-list{display:flex;flex-wrap:wrap;gap:7px}.role-chip{padding:7px 9px;border-radius:999px;background:#121d2d;border:1px solid #253550;color:#aeb9cb;font-size:11px}.chat-panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;min-height:0}.chat-head{padding:16px 18px;border-bottom:1px solid #1d293d}.chat-head strong{display:block;font-size:17px;margin-top:3px}.chat-head span:last-child{display:block;color:var(--muted);font-size:11px;margin-top:3px}.messages{overflow:auto;padding:16px}.welcome-card{padding:14px 0 18px;border-bottom:1px solid #1b273a;margin-bottom:8px}.welcome-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#1a2740;font-size:22px}.welcome-card h2{margin:10px 0 4px}.welcome-card p{margin:0;color:var(--muted)}.message{display:grid;grid-template-columns:42px 1fr;gap:11px;padding:12px 6px}.message:hover{background:#0d1421;border-radius:13px}.message-meta{display:flex;align-items:center;gap:8px}.message-meta time{font-size:10px;color:var(--muted)}.message-body p{margin:5px 0 0;color:#dce3ef;line-height:1.5}.badge.verified{font-size:10px;padding:3px 6px;border-radius:999px;background:#103729;color:#63dfac;border:1px solid #1b644b}.composer{border-top:1px solid #1d293d;padding:12px;display:grid;grid-template-columns:40px 1fr auto;gap:8px}.composer .plus{border:1px solid #273751;background:#141e30;border-radius:12px;color:#fff}.composer input{background:#111a2b;border:1px solid #24334d;border-radius:12px;padding:0 13px;color:#fff;outline:0}.send-btn{border:0;border-radius:12px;padding:0 16px;background:linear-gradient(135deg,#5a75ff,#7b46ef);font-weight:800;color:#fff}.member-count-badge{padding:5px 8px;border-radius:999px;background:#16223a;color:#9fb0c8;font-size:11px}.member-list{display:grid;gap:6px}.member-row{display:flex;align-items:center;gap:10px;padding:9px;border-radius:12px;cursor:pointer}.member-row:hover{background:#121c2c}.member-meta strong{display:block;font-size:13px}.member-meta small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.owner-crown{color:var(--gold)}.rok-check{color:var(--green)}
/* SETTINGS */.settings-layout{display:grid;grid-template-columns:250px minmax(0,760px);gap:16px;max-width:1050px;margin:0 auto}.settings-menu,.settings-content{padding:22px}.settings-menu h2{margin:5px 0 18px}.settings-menu-item{width:100%;text-align:left;padding:11px 12px;border:0;border-radius:11px;background:transparent;color:#8f9bb0;cursor:pointer}.settings-menu-item.active{background:#16223a;color:#fff}.settings-menu-item:disabled{opacity:.45}.settings-content h1{margin:5px 0 18px}.settings-profile-card{display:flex;align-items:center;gap:13px;padding:15px;background:#111a2a;border:1px solid #22304a;border-radius:16px}.settings-profile-card span{display:block;color:var(--muted);font-size:12px;margin-top:3px}.settings-row{margin-top:12px;padding:15px;border:1px solid #22304a;background:#0e1624;border-radius:15px;display:flex;align-items:center;justify-content:space-between;gap:20px}.settings-row strong{display:block}.settings-row span{display:block;color:var(--muted);font-size:12px;margin-top:4px}.settings-row.danger{border-color:#4d2430}.status-chip{padding:6px 9px;border-radius:999px!important;background:#1b2334;color:#9daac0!important}
/* DM + MODAL */.dm-top-wrap{position:relative}.dm-popover{position:absolute;right:0;top:50px;width:290px;background:#0e1624;border:1px solid #27354e;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.4);z-index:30;padding:12px}.dm-popover-head{display:flex;justify-content:space-between;align-items:center;padding:4px 3px 10px}.dm-popover-head button{border:0;background:#202c43;color:#fff;border-radius:8px}.dm-popover-list{display:grid;gap:6px}.dm-item{display:flex;align-items:center;gap:9px;padding:8px;border-radius:11px;text-decoration:none;color:#dce3ef}.dm-item:hover{background:#151f31}.modal-backdrop{position:fixed;inset:0;background:rgba(2,5,10,.72);display:grid;place-items:center;padding:20px;z-index:100}.modal{width:min(440px,94vw);max-height:90vh;overflow:auto;background:#0f1725;border:1px solid #293a56;border-radius:20px;box-shadow:0 30px 100px rgba(0,0,0,.55);padding:24px;position:relative}.modal.wide{width:min(620px,94vw)}.close{position:absolute;right:14px;top:12px;width:34px;height:34px;border-radius:10px;border:1px solid #293951;background:#151e2f;color:#fff}.modal-brand{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#7e50ff,#4e6fe8);font-weight:900}.modal h2{margin:12px 0}.field{width:100%;background:#0a111d;border:1px solid #273852;border-radius:12px;color:#fff;padding:12px 13px;outline:0;margin:6px 0 10px}.field.mini{margin:4px 0}.oauth{display:block;text-decoration:none;text-align:center;padding:12px;border-radius:12px;font-weight:800}.oauth.google{background:#fff;color:#111}.or{display:flex;align-items:center;gap:10px;color:#758299;font-size:11px;margin:15px 0}.or span{height:1px;background:#283750;flex:1}.checks{display:grid;gap:8px;margin:12px 0}.checks label,.permission-defaults label{display:block;padding:9px 10px;background:#111a29;border:1px solid #22304a;border-radius:10px}.invite-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.invite-result,.invite-history{margin-top:12px}.invite-result{padding:14px;background:#101a2a;border:1px solid #243650;border-radius:14px}.invite-result small,.invite-result strong{display:block}.invite-result strong{font-size:20px;margin:6px 0 10px}.invite-history-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #1f2a3d;font-size:12px}.member-modal-head{display:flex;align-items:center;gap:12px}.permission-defaults{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:13px}.profile-stat{padding:11px;background:#101827;border:1px solid #22304a;border-radius:12px}.profile-stat span{display:block;color:var(--muted);font-size:10px}.profile-stat b{display:block;margin-top:4px}.role-toggle-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.code-demo{padding:14px;border-radius:14px;background:#0b1422;border:1px dashed #3a4c6e;text-align:center}.code-demo small,.code-demo strong{display:block}.code-demo strong{font-size:22px;margin-top:5px}.success-panel{text-align:center}.success-icon{font-size:42px;color:var(--green)}.toast{position:fixed;right:24px;bottom:24px;z-index:200;background:#111b2b;border:1px solid #2d405f;border-radius:14px;padding:12px 16px;box-shadow:var(--shadow)}
@media(max-width:1250px){.topbar{grid-template-columns:160px minmax(420px,620px) 1fr}.workspace-grid{grid-template-columns:210px minmax(360px,1fr)}.people-panel{display:none}.personal-grid{grid-template-columns:1fr 1fr}.rok-card{grid-column:1/-1}}@media(max-width:900px){body{overflow:auto}.app-shell{grid-template-columns:1fr;height:auto;min-height:100vh}.app-rail{display:none}.topbar{position:sticky;top:0;z-index:40;grid-template-columns:1fr;gap:9px;height:auto;padding:12px}.brand-wordmark,.top-actions{display:none}.top-tabs{width:100%}.view{padding:12px}.workspace-grid{grid-template-columns:1fr}.rooms-panel{max-height:300px}.workspace-grid{grid-template-columns:1fr}.rooms-panel{max-height:300px}.personal-grid,.personal-bottom-grid,.settings-layout{grid-template-columns:1fr}.personal-hero{align-items:flex-start;flex-direction:column}.community-hero{grid-template-columns:58px 1fr}.community-actions{grid-column:1/-1}.profile-overview-grid{grid-template-columns:1fr 1fr}}

/* V0.5.3.3 — desktop server workspace height fix */
@media (min-width:901px){
  .shell-main{height:100vh;overflow:hidden}
  #serversView{overflow:hidden;padding:16px 20px 16px}
  #serversView.view.active{display:block}
  .servers-layout{height:100%;min-height:0}
  .server-workspace{height:100%;min-height:0;gap:14px}
  .community-hero{flex:0 0 auto;min-height:96px;padding:13px 18px;grid-template-columns:58px minmax(0,1fr) auto}
  .community-emblem{width:58px;height:58px}
  .workspace-grid{flex:1;height:0;min-height:0;gap:14px}
  .rooms-panel,.chat-panel,.people-panel{height:100%;min-height:0}
  .chat-panel{overflow:hidden}
  .chat-head{flex:0 0 auto;padding:13px 16px}
  .messages{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px}
  .composer{flex:0 0 auto;min-height:58px;padding:10px 12px;background:rgba(13,20,33,.98)}
  .rooms-panel,.people-panel{overflow-y:auto;overscroll-behavior:contain}
}


/* V0.6.0 — visual identity, avatars, role colors, login polish */
:root{
  --role-gold:#f3bd58;--role-blue:#63a7ff;--role-green:#68d59a;--role-violet:#9b79ff;
  --role-cyan:#55d6e7;--role-rose:#ed7aa7;--role-amber:#f0a65b;
}
body{background:
  radial-gradient(circle at 15% -10%,rgba(91,74,180,.11),transparent 34%),
  radial-gradient(circle at 85% 0%,rgba(28,128,170,.07),transparent 28%),
  #070c14}
.panel{box-shadow:inset 0 1px 0 rgba(255,255,255,.018),0 14px 34px rgba(0,0,0,.10)}
.community-hero{background:linear-gradient(110deg,#101827 0%,#0f1725 62%,rgba(73,49,120,.17) 100%)}
.community-emblem{box-shadow:0 10px 30px rgba(92,72,200,.18),inset 0 1px 0 rgba(255,255,255,.08)}
.rooms-panel,.people-panel{background:linear-gradient(180deg,rgba(17,26,42,.98),rgba(12,19,31,.98))}
.chat-panel{background:linear-gradient(180deg,#111a2a 0%,#0d1522 100%)}
.chat-head{background:linear-gradient(180deg,rgba(22,33,53,.74),rgba(15,24,39,.3))}
.nav-item{position:relative;transition:.16s ease}
.nav-item.active:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:4px;background:#7b6cff;box-shadow:0 0 12px #735cff}
.message{border:1px solid transparent;transition:.16s ease}
.message:hover{background:#111a29;border-color:#1c2940;transform:translateY(-1px)}
.message-meta strong{font-size:13px;letter-spacing:.01em}
.message-body p{font-size:13px}
.avatar-rich{position:relative;overflow:hidden;background:linear-gradient(145deg,var(--avatar-a,#7d5cff),var(--avatar-b,#4e6df3));box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 5px 14px rgba(0,0,0,.18)}
.avatar-rich img{width:100%;height:100%;display:block;object-fit:cover}
.avatar-rich span{display:grid;place-items:center;width:100%;height:100%;font-weight:900}
.avatar-rich:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none}
.rok-check{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#0d3c2c;border:1px solid #146546;color:#72edb5;font-size:9px;vertical-align:1px}
.owner-crown{filter:drop-shadow(0 0 4px rgba(243,189,88,.3))}
.role-chip{display:inline-flex;align-items:center;gap:7px;font-weight:700;border-color:color-mix(in srgb,currentColor 28%,transparent);background:color-mix(in srgb,currentColor 9%,#0f1826);color:#aeb9cb}
.role-chip i,.member-group-title i{display:block;width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 9px currentColor}
.role-gold{color:var(--role-gold)!important}.role-blue{color:var(--role-blue)!important}.role-green{color:var(--role-green)!important}.role-violet{color:var(--role-violet)!important}.role-cyan{color:var(--role-cyan)!important}.role-rose{color:var(--role-rose)!important}.role-amber{color:var(--role-amber)!important}
.member-group-title{display:flex;justify-content:space-between;align-items:center;margin:14px 5px 5px;padding-top:9px;border-top:1px solid #1c293c;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.member-group-title:first-child{border-top:0;margin-top:4px;padding-top:0}
.member-group-title span{display:flex;align-items:center;gap:7px}.member-group-title b{font-size:10px;color:#718198}
.member-row{position:relative;border:1px solid transparent;transition:.14s ease}
.member-row:hover{border-color:#22334e;background:#142034}
.member-gold:hover{border-color:rgba(243,189,88,.23)}.member-blue:hover{border-color:rgba(99,167,255,.23)}.member-green:hover{border-color:rgba(104,213,154,.22)}
.online-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#3dd68c;box-shadow:0 0 8px rgba(61,214,140,.55);margin-right:5px}
.badge.verified{font-weight:800;letter-spacing:.02em}
.composer{box-shadow:0 -10px 24px rgba(5,9,16,.16)}
.composer input:focus,.member-search input:focus,.field:focus{border-color:#576fe0;box-shadow:0 0 0 3px rgba(88,104,224,.10)}
.send-btn{box-shadow:0 8px 20px rgba(94,79,235,.20);transition:.15s ease}.send-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.rail-server{transition:.16s ease}.rail-server:hover{transform:translateY(-1px) scale(1.03)}
.rail-server.active{box-shadow:0 0 0 1px rgba(132,96,255,.52),0 0 20px rgba(109,76,255,.20)}

.login-modal{width:min(470px,94vw);padding:28px}
.login-brand-row{display:flex;align-items:center;gap:14px}.login-brand-row h2{margin:3px 0 0}.login-copy,.modal-copy{color:#98a6bd;line-height:1.55;margin:14px 0 18px}
.oauth.google{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px;border:1px solid #dce2ec;box-shadow:0 10px 24px rgba(0,0,0,.18);transition:.15s ease}.oauth.google:hover{transform:translateY(-1px);box-shadow:0 13px 30px rgba(0,0,0,.23)}
.google-mark{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid #d4d9e2;color:#4285f4;font-weight:900;background:#fff}
.login-trust{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;color:#7f8da4;font-size:10px;margin:13px 0 2px}.login-trust span{padding:5px 8px;border-radius:999px;background:#101827;border:1px solid #1e2a40}
.dev-only{display:none}.dev-mode .dev-only{display:block}
.field-label{display:block;color:#8493aa;font-size:11px;font-weight:800;margin:0 0 2px}
.rok-link-modal{width:min(560px,94vw)}
.rok-link-modal h2{font-size:26px}.code-demo{background:linear-gradient(145deg,#0c1727,#10182a);border-color:#41557a}.code-demo strong{letter-spacing:.08em;color:#b6c8ff}
.feature-card{transition:.18s ease}.feature-card:hover{transform:translateY(-2px);border-color:#2b3a58}
.personal-hero{background:linear-gradient(105deg,#111b2c 0%,#10192a 58%,rgba(86,54,143,.20) 100%)}
.settings-profile-card{background:linear-gradient(110deg,#111c2e,#101827)}

/* V0.6.1 custom role color support */
.role-color-input{height:46px;padding:5px 7px;cursor:pointer}
.role-color-dot{display:inline-block;width:9px;height:9px;border-radius:50%;box-shadow:0 0 8px currentColor;margin-right:5px}
.member-row:hover{border-color:color-mix(in srgb,var(--member-role-color,#50617f) 32%,transparent)}


/* V0.6.2 — Google-first onboarding / explicit ROKSS identity */
.settings-profile-card{display:flex;align-items:center;gap:12px}.settings-profile-main{display:flex;flex-direction:column;gap:3px;flex:1}.settings-profile-main span{color:var(--muted);font-size:11px}
.onboarding-backdrop{z-index:260;background:rgba(3,7,13,.86);backdrop-filter:blur(14px)}
.onboarding-backdrop.required .onboarding-modal{animation:onboardingIn .22s ease both}
.profile-setup-required{overflow:hidden}.profile-setup-required .topbar,.profile-setup-required .view{pointer-events:none;user-select:none}
.onboarding-modal{width:min(720px,94vw);padding:26px;border-color:#314265;background:linear-gradient(155deg,#121c2d 0%,#0d1522 68%,rgba(75,49,125,.24) 100%);box-shadow:0 30px 90px rgba(0,0,0,.48)}
.onboarding-head{display:flex;align-items:center;gap:14px}.onboarding-head h2{margin:3px 0 0;font-size:27px}
.profile-photo-builder{display:grid;grid-template-columns:92px minmax(0,1fr);gap:18px;align-items:center;padding:16px;margin:14px 0;background:#0d1625;border:1px solid #22324c;border-radius:16px}.avatar.xl{width:86px;height:86px;border-radius:24px;font-size:28px}.photo-actions{display:grid;gap:9px}.photo-actions strong{display:flex;align-items:center;gap:8px}.photo-actions strong small,.onboarding-field em{font-style:normal;font-size:10px;color:#7f8ca2;font-weight:600}.photo-action-row{display:flex;gap:8px;flex-wrap:wrap}.file-button{cursor:pointer}.text-btn{border:0;background:transparent;color:#8190aa;font-weight:800;font-size:11px;cursor:pointer;padding:8px}.text-btn:hover{color:#fff}.input-help{color:#6f7f98;font-size:10px}
.onboarding-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.onboarding-field{display:grid;gap:7px;margin-top:11px}.onboarding-field>span{font-size:11px;font-weight:900;color:#dce5f7}.onboarding-field b{color:#8f7aff}.onboarding-field input,.onboarding-field textarea{width:100%;box-sizing:border-box;background:#09111d;border:1px solid #263752;border-radius:12px;color:#fff;padding:12px 13px;outline:0;font:inherit}.onboarding-field textarea{resize:vertical;min-height:78px}.onboarding-field input:focus,.onboarding-field textarea:focus,.username-field:focus-within{border-color:#6678e7;box-shadow:0 0 0 3px rgba(93,107,222,.11)}.onboarding-field small{color:#73839b;font-size:10px}.username-field{display:flex;align-items:center;background:#09111d;border:1px solid #263752;border-radius:12px;overflow:hidden}.username-field i{font-style:normal;color:#71819a;padding-left:12px;font-weight:900}.username-field input{border:0!important;box-shadow:none!important;background:transparent;padding-left:4px}.username-status.good{color:#5fd59a}.username-status.bad{color:#ef7d89}.onboarding-note{margin:15px 0 12px;padding:10px 12px;border-radius:11px;background:rgba(79,104,201,.08);border:1px solid rgba(93,111,211,.18);color:#8e9db7;font-size:10px;line-height:1.5}.onboarding-submit{min-height:48px;font-size:13px}
@keyframes onboardingIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:700px){.onboarding-grid{grid-template-columns:1fr}.profile-photo-builder{grid-template-columns:1fr;text-align:center}.avatar.xl{margin:auto}.photo-action-row{justify-content:center}}


/* =========================================================
   ROK_MULTI_ACCOUNT_UI_V1
   ========================================================= */

.rok-card{
  min-height:330px;
}

.rok-summary{
  display:block;
  margin-top:14px;
  padding-bottom:48px;
}

.rok-account-switcher{
  display:flex;
  gap:7px;
  overflow-x:auto;
  padding:1px 1px 8px;
  scrollbar-width:thin;
}

.rok-account-pill{
  flex:0 0 auto;
  border:1px solid #263752;
  background:#101827;
  color:#9fabc0;
  border-radius:10px;
  padding:7px 9px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:800;
}

.rok-account-pill:hover{
  border-color:#40587d;
  color:#fff;
}

.rok-account-pill.active{
  background:linear-gradient(135deg,#23345c,#29204f);
  border-color:#6a58d8;
  color:#fff;
  box-shadow:0 6px 18px rgba(77,61,190,.15);
}

.rok-mini-primary{
  font-size:8px;
  letter-spacing:.08em;
  color:#f3c66c;
}

.rok-current-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:5px 0 10px;
}

.rok-current-head small{
  display:block;
  color:#69778e;
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
}

.rok-current-head strong{
  display:block;
  margin-top:2px;
  font-size:13px;
}

.rok-primary-badge{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid #5a4927;
  background:#211c12;
  color:#f3c66c;
  font-size:9px;
  font-weight:900;
}

.rok-stat-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}

.rok-stat-grid .stat{
  min-width:0;
}

.rok-stat-grid strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.rok-manager-heading{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
}

.rok-manager-heading h2{
  margin-bottom:6px;
}

.rok-manager-count{
  color:#8c99af;
  font-size:12px;
}

.rok-manage-list{
  display:grid;
  gap:10px;
  margin:18px 0 14px;
  max-height:430px;
  overflow-y:auto;
  padding-right:3px;
}

.rok-manage-account{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:14px;
  border:1px solid #26354e;
  border-radius:15px;
  background:#0f1827;
}

.rok-manage-account.primary{
  border-color:#5d4dc0;
  background:
    linear-gradient(135deg,rgba(44,55,93,.75),rgba(30,25,58,.82));
}

.rok-manage-title{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.rok-manage-title strong{
  font-size:15px;
}

.rok-governor-line{
  display:block;
  color:#8f9db3;
  font-size:11px;
  margin-top:5px;
}

.rok-governor-line b{
  color:#dce4f2;
}

.rok-manage-stats{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:10px;
}

.rok-manage-stats span{
  background:#111d2e;
  border:1px solid #24344f;
  border-radius:9px;
  padding:6px 8px;
  color:#78879e;
  font-size:9px;
}

.rok-manage-stats b{
  color:#d9e2f0;
  margin-left:4px;
}

.rok-manage-actions{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:112px;
}

.rok-back-accounts{
  margin-top:8px;
}

#rokStepManage > .primary-btn{
  margin-top:2px;
}

#rokStep1 .primary-btn,
#rokStep2 .primary-btn{
  margin-top:12px;
}

#verificationDevBox{
  margin:13px 0;
}

@media(max-width:700px){
  .rok-card{
    min-height:350px;
  }

  .rok-manage-account{
    grid-template-columns:1fr;
  }

  .rok-manage-actions{
    flex-direction:row;
  }

  .rok-manage-actions button{
    flex:1;
  }

  .rok-current-head{
    align-items:flex-start;
  }
}


/* ROKSS_VOICE_V1 */

.voice-panel{
  margin:12px 0 14px;
  padding:11px;
  border:1px solid #263752;
  border-radius:12px;
  background:#0e1827;
}

.voice-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
}

.voice-panel-head small{
  display:block;
  color:#6f8099;
  font-size:8px;
  letter-spacing:.13em;
  font-weight:900;
}

.voice-panel-head strong{
  display:block;
  margin-top:2px;
  font-size:12px;
}

.voice-live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#4ade80;
  box-shadow:0 0 10px rgba(74,222,128,.7);
}

.voice-participants{
  display:grid;
  gap:5px;
  margin-bottom:9px;
}

.voice-user{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:27px;
  padding:5px 7px;
  border-radius:8px;
  background:#111e30;
}

.voice-user strong{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
}

.voice-user small{
  font-size:10px;
}

.voice-user-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#68d59a;
}

.voice-controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
}

.voice-control-btn{
  border:1px solid #2a3d5b;
  background:#142136;
  color:#d9e4f4;
  border-radius:8px;
  padding:7px 6px;
  font-size:9px;
  font-weight:800;
  cursor:pointer;
}

.voice-control-btn:hover,
.voice-control-btn.active{
  border-color:#6c5ce7;
  background:#202449;
}

.voice-control-btn.danger{
  grid-column:1 / -1;
  border-color:#56303b;
  color:#ffabb8;
}

.voice-control-btn.danger:hover{
  background:#351a24;
}

.voice-audio-sink{
  display:none;
}

.nav-item.active span:first-child{
  color:#fff;
}


/* ROKSS_NOISE_SUPPRESSION_V1 */

.voice-control-btn.noise{
  grid-column:1 / -1;
}

.voice-control-btn.noise.active{
  border-color:#39765c;
  background:#173328;
  color:#8ff0bf;
}

.voice-control-btn.noise:not(.active){
  color:#8a98ac;
}


/* ROKSS_VOICE_PRESENCE_V2 */

.voice-user-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}

.voice-user-info strong{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.voice-peer-state{
  color:#72849d;
  font-size:8px !important;
}

.voice-user-icons{
  flex:0 0 auto;
}

.voice-user:has(.voice-peer-state){
  min-height:34px;
}


/* ROKSS_NOISE_LEVELS_V2 */

.voice-control-btn.noise-level{
  grid-column:1 / -1;
  border-color:#31506f;
  background:#13283b;
  color:#a8d7ff;
}

.voice-control-btn.noise-level:hover{
  border-color:#5e8dba;
  background:#193650;
}

.voice-control-btn.noise-level[data-level="2"]{
  border-color:#3d7b62;
  background:#173429;
  color:#98f2c3;
}

.voice-control-btn.noise-level[data-level="3"]{
  border-color:#8b6842;
  background:#39291a;
  color:#ffd39b;
}


/* ROKSS_VOICE_CONTEXT_MENU_V3 */

.voice-user{
  position:relative;
  cursor:default;
  user-select:none;
}

.voice-avatar{
  width:28px;
  height:28px;
  flex:0 0 28px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid #32445e;
  background:#1b2940;
}

.voice-avatar-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:900;
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #5d61dd,
      #8448d8
    );
}

.voice-user-info{
  flex:1;
  min-width:0;
}

.voice-user-info strong{
  display:block;
  color:#f0f4fa;
  font-size:10px;
  line-height:1.2;
}

.voice-peer-state{
  display:block;
  margin-top:2px;
  color:#73859d;
  font-size:8px!important;
}

.voice-context-menu{
  position:fixed;
  z-index:99999;
  width:260px;
  padding:10px;
  border:1px solid #293b57;
  border-radius:12px;
  background:#0c1523;
  box-shadow:
    0 18px 55px rgba(0,0,0,.55);
}

.voice-context-user{
  display:flex;
  align-items:center;
  gap:9px;
  padding:4px 4px 10px;
}

.voice-context-user strong{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:12px;
  color:#f5f7fb;
}

.voice-context-avatar{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:50%;
  object-fit:cover;
}

.voice-volume-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:7px 4px 5px;
  color:#9aabc1;
  font-size:9px;
  font-weight:800;
}

.voice-volume-head strong{
  color:#d8e5f5;
  font-size:9px;
}

.voice-volume-slider{
  width:100%;
  accent-color:#6f61f6;
  cursor:pointer;
}

.voice-context-separator{
  height:1px;
  margin:9px 0;
  background:#21314a;
}

.voice-moderator-actions{
  display:grid;
  gap:5px;
}

.voice-moderator-actions>small{
  margin:2px 3px;
  color:#61738c;
  font-size:8px;
  font-weight:900;
  letter-spacing:.15em;
}

.voice-moderator-actions button{
  width:100%;
  border:0;
  border-radius:8px;
  padding:8px 9px;
  text-align:left;
  cursor:pointer;
  background:transparent;
  color:#c8d4e4;
  font-size:10px;
  font-weight:700;
}

.voice-moderator-actions button:hover{
  background:#17253a;
  color:#fff;
}

.voice-moderator-actions button.danger{
  color:#ff8999;
}

.voice-moderator-actions button.danger:hover{
  background:#351923;
}



/* ROKSS_VOICE_DISCORD_UI_V4 */


/* -------------------------
   SES KANALI
   ------------------------- */

.voice-channel-group{
  display:block;
  margin:1px 0 5px;
}

.voice-channel-link{
  margin-bottom:1px;
}

.voice-channel-title{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}

.voice-channel-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  opacity:.9;
}

.voice-channel-count{
  min-width:15px;
  text-align:center;
  color:#76879f;
  font-size:9px;
}


/* -------------------------
   SES KANALI ALTINDA UYELER
   ------------------------- */

.voice-channel-members{
  display:grid;
  gap:2px;
  padding:3px 4px 4px 20px;
}

.voice-channel-member{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  min-height:30px;
  padding:3px 7px;
  border-radius:7px;
  color:#aeb9ca;
}

.voice-channel-member:hover{
  background:#162236;
  color:#e7edf6;
}

.voice-channel-member-avatar{
  width:22px;
  height:22px;
  flex:0 0 22px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid #30435e;
}

.voice-channel-member-name{
  flex:1;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:10px;
  font-weight:700;
}

.voice-channel-member-state{
  flex:0 0 auto;
  font-size:9px;
}


/* -------------------------
   AKTIF VOICE PANEL
   ------------------------- */

.voice-panel{
  padding:10px !important;
  margin:8px 0 12px !important;
  border-radius:11px !important;
  background:
    linear-gradient(
      180deg,
      #0d1a29,
      #0a1421
    ) !important;
}

.voice-panel-head{
  margin-bottom:7px !important;
}

.voice-panel-head small{
  color:#5f7896 !important;
}

.voice-panel-head strong{
  color:#f1f6fc;
}

.voice-participants{
  max-height:150px;
  overflow:auto;
  padding-right:2px;
}

.voice-user{
  border:0 !important;
  background:#101d2d !important;
  padding:5px 6px !important;
}

.voice-user:hover{
  background:#16273b !important;
}


/* -------------------------
   NOISE SLIDER
   ------------------------- */

.voice-noise-strength{
  grid-column:1 / -1;
  margin-top:2px;
  padding:9px 9px 7px;
  border:1px solid #28425d;
  border-radius:9px;
  background:#0e1b2a;
}

.voice-noise-strength-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:7px;
}

.voice-noise-strength-head span{
  color:#b7c8dc;
  font-size:9px;
  font-weight:800;
}

.voice-noise-strength-head strong{
  color:#72e3af;
  font-size:9px;
  font-weight:900;
}

.voice-noise-strength-slider{
  --noise-strength:72%;

  width:100%;
  height:4px;
  margin:0;
  appearance:none;
  outline:none;
  border-radius:99px;

  background:
    linear-gradient(
      90deg,
      #4ac88d 0,
      #4ac88d var(--noise-strength),
      #24364d var(--noise-strength),
      #24364d 100%
    );
}

.voice-noise-strength-slider::-webkit-slider-thumb{
  appearance:none;
  width:13px;
  height:13px;
  border-radius:50%;
  border:2px solid #d9f8ea;
  background:#61dca0;
  cursor:pointer;
  box-shadow:
    0 0 0 3px rgba(97,220,160,.12);
}

.voice-noise-strength-slider::-moz-range-thumb{
  width:13px;
  height:13px;
  border-radius:50%;
  border:2px solid #d9f8ea;
  background:#61dca0;
  cursor:pointer;
}

.voice-noise-scale{
  display:flex;
  justify-content:space-between;
  margin-top:5px;
}

.voice-noise-scale small{
  color:#566a83;
  font-size:7px;
  font-weight:800;
}



/* ROKSS_FASTENHANCER_V1 */

.voice-ai-card{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 9px;
  margin-top:2px;
  border:1px solid #29405c;
  border-radius:9px;
  background:
    linear-gradient(
      135deg,
      #101f31,
      #111a2c
    );
}

.voice-ai-icon{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:grid;
  place-items:center;
  border-radius:8px;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.04em;
  color:#e9fff5;
  background:
    linear-gradient(
      135deg,
      #25a86c,
      #4f68dc
    );
  box-shadow:
    0 0 16px rgba(48,190,128,.14);
}

.voice-ai-copy{
  min-width:0;
  flex:1;
}

.voice-ai-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
}

.voice-ai-title strong{
  color:#edf5ff;
  font-size:9px;
  font-weight:900;
}

#voiceAiStatus{
  font-size:8px;
  font-weight:900;
  color:#7c91ab;
}

#voiceAiStatus[data-status="active"]{
  color:#68e2a3;
}

#voiceAiStatus[data-status="loading"]{
  color:#e8c56d;
}

#voiceAiStatus[data-status="fallback"]{
  color:#ffb071;
}

#voiceAiStatus[data-status="error"]{
  color:#ff7e8e;
}

.voice-ai-copy small{
  display:block;
  margin-top:2px;
  color:#667b95;
  font-size:7px;
}


/* ===========================================================
   ROKSS_VOICE_DOCK_V5
   =========================================================== */


/* -----------------------------------------------------------
   SOL KOLONU BIRAZ GENISLET
   ----------------------------------------------------------- */

.workspace-grid{
  grid-template-columns:
    275px
    minmax(0,1fr)
    250px !important;
}


/* Sol panel kontrol dock'u i?in flex */
.rooms-panel{
  display:flex !important;
  flex-direction:column !important;
  min-width:0;
}


/* -----------------------------------------------------------
   VOICE CHANNEL ALTINDA KULLANICILAR
   ----------------------------------------------------------- */

.rokss-voice-inline-members{
  display:grid;
  gap:2px;
  margin:
    -1px
    3px
    7px
    15px;
  padding-left:7px;
}

.rokss-voice-inline-user{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  min-height:31px;
  padding:4px 7px;
  border-radius:7px;
  color:#a9b6c9;
  cursor:default;
  user-select:none;
}

.rokss-voice-inline-user:hover{
  background:#162236;
  color:#edf4ff;
}

.rokss-voice-inline-avatar{
  width:23px;
  height:23px;
  flex:0 0 23px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid #31445f;
  background:#18253a;
}

.rokss-voice-inline-fallback{
  display:grid;
  place-items:center;
  color:#fff;
  font-size:8px;
  font-weight:900;
  background:
    linear-gradient(
      135deg,
      #5d68db,
      #8548d6
    );
}

.rokss-voice-inline-name{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  font-weight:700;
}

.rokss-voice-inline-state{
  flex:0 0 auto;
  min-width:13px;
  text-align:center;
  font-size:9px;
}

.rokss-voice-count{
  margin-left:auto;
  color:#708198 !important;
  font-size:8px !important;
  font-weight:800;
}


/* -----------------------------------------------------------
   SES KONTROL DOCK
   ----------------------------------------------------------- */

#voicePanel.rokss-voice-dock{
  position:sticky;
  bottom:0;
  z-index:25;
  order:999;
  margin:
    auto
    -4px
    -4px !important;
  padding:9px !important;
  border:
    1px solid
    #263954 !important;
  border-radius:
    12px !important;
  background:
    rgba(
      8,
      15,
      26,
      .97
    ) !important;
  box-shadow:
    0 -12px 28px
    rgba(4,8,15,.32);
  backdrop-filter:
    blur(14px);
}


/* Kullan?c?n?n kendi sat?r? */
.voice-dock-self{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  margin-bottom:8px;
  padding:2px 2px 7px;
  border-bottom:
    1px solid
    #1c2a40;
}

.voice-dock-avatar{
  width:31px;
  height:31px;
  flex:0 0 31px;
  border-radius:50%;
  object-fit:cover;
  border:
    1px solid
    #3a4d69;
}

.voice-dock-avatar-fallback{
  display:grid;
  place-items:center;
  color:#fff;
  font-size:10px;
  font-weight:900;
  background:
    linear-gradient(
      135deg,
      #5e61df,
      #8647d8
    );
}

.voice-dock-self-copy{
  flex:1;
  min-width:0;
}

.voice-dock-self-copy strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f2f6fc;
  font-size:10px;
  font-weight:850;
}

.voice-dock-self-copy small{
  display:block;
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#708198;
  font-size:8px;
}

.voice-dock-live-dot{
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#4be09d;
  box-shadow:
    0 0 10px
    rgba(75,224,157,.7);
}


/* -----------------------------------------------------------
   BUTTON SATIRI
   ----------------------------------------------------------- */

#voicePanel .voice-controls{
  position:relative;
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:7px !important;
  grid-template-columns:none !important;
}

#voicePanel .voice-dock-round{
  width:36px !important;
  height:36px !important;
  flex:0 0 36px;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  border-radius:50% !important;
  border:
    1px solid
    #283a55 !important;
  background:#121e30 !important;
  color:#d9e5f5 !important;
  cursor:pointer;
  font-size:0 !important;
}

#voicePanel .voice-dock-round:hover{
  border-color:#526887 !important;
  background:#192941 !important;
}

#voicePanel .voice-dock-round.active{
  border-color:#4a7f67 !important;
  background:#173629 !important;
  color:#72e5aa !important;
}


/* Mic */
#voiceMuteBtn::before{
  content:"??";
  font-size:15px;
}

#voiceMuteBtn.active::before{
  content:"??";
}


/* Headset */
#voiceDeafenBtn::before{
  content:"??";
  font-size:15px;
}


/* Ayr?l */
#voiceLeaveBtn.voice-dock-leave{
  border-color:#64303a !important;
  background:#321821 !important;
  color:#ff91a0 !important;
}

#voiceLeaveBtn::before{
  content:"?";
  font-size:16px;
  transform:rotate(135deg);
}

#voiceLeaveBtn:hover{
  background:#4a1c29 !important;
}


/* -----------------------------------------------------------
   SES DALGASI AI BUTONU
   ----------------------------------------------------------- */

.voice-noise-wave-btn svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* -----------------------------------------------------------
   GURULTU AZALTMA POPOVER
   ----------------------------------------------------------- */

.voice-noise-popover{
  position:absolute;
  left:8px;
  right:8px;
  bottom:54px;
  z-index:100;
  padding:10px;
  border:
    1px solid
    #2c405d;
  border-radius:11px;
  background:#0b1523;
  box-shadow:
    0 18px 45px
    rgba(0,0,0,.55);
}

.voice-noise-popover-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:
    1px
    2px
    9px;
}

.voice-noise-popover-head strong{
  display:block;
  color:#eef4fb;
  font-size:10px;
}

.voice-noise-popover-head small{
  display:block;
  margin-top:2px;
  color:#697d98;
  font-size:7px;
}

.voice-ai-mini-badge{
  display:grid;
  place-items:center;
  width:27px;
  height:23px;
  border-radius:7px;
  color:#e8fff5;
  background:
    linear-gradient(
      135deg,
      #239e67,
      #5264dc
    );
  font-size:8px;
  font-weight:1000;
}

.voice-ai-toggle-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px;
  border:
    1px solid
    #20314a;
  border-radius:9px;
  background:#101c2c;
  color:#dce6f3;
  text-align:left;
  cursor:pointer;
}

.voice-ai-toggle-row:hover{
  background:#15243a;
}

.voice-ai-toggle-row span:first-child{
  flex:1;
  min-width:0;
}

.voice-ai-toggle-row strong{
  display:block;
  font-size:9px;
}

.voice-ai-toggle-row small{
  display:block;
  margin-top:3px;
  color:#71849e;
  font-size:7px;
  line-height:1.35;
}


/* Toggle */
.voice-switch{
  position:relative;
  width:31px;
  height:17px;
  flex:0 0 31px;
  border-radius:999px;
  background:#29384c;
  transition:.16s ease;
}

.voice-switch::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#91a0b4;
  transition:.16s ease;
}

.voice-switch.on{
  background:#246f50;
}

.voice-switch.on::after{
  left:17px;
  background:#70e4aa;
}


/* -----------------------------------------------------------
   ESKI BUYUK VOICE UI ARTIK KULLANILMIYOR
   ----------------------------------------------------------- */

#voicePanel .voice-ai-card,
#voicePanel #voiceNoiseBtn,
#voicePanel .voice-noise-strength,
#voicePanel #voiceNoiseLevelBtn{
  display:none !important;
}


/* -----------------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------------- */

@media(max-width:1400px){

  .workspace-grid{
    grid-template-columns:
      255px
      minmax(0,1fr)
      235px !important;
  }
}

@media(max-width:1100px){

  .workspace-grid{
    grid-template-columns:
      235px
      minmax(0,1fr)
      220px !important;
  }
}



/* ===========================================================
   ROKSS_VOICE_DOCK_FIX_V6
   =========================================================== */


/*
 * Eski ::before emoji ikonlar?n? tamamen iptal et.
 * ?? sorununun kayna?? bunlard?.
 */

#voiceMuteBtn::before,
#voiceDeafenBtn::before,
#voiceLeaveBtn::before{
  content:none !important;
  display:none !important;
}


/* Yeni SVG iconlar? */

#voicePanel .voice-dock-round svg{
  display:block;
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}


/* Mikrofon veya kulakl?k kapal? */

#voicePanel .voice-dock-round.voice-control-off{
  border-color:#70404a !important;
  background:#351c25 !important;
  color:#ff9cab !important;
}


/*
 * AI a?/kapa esnas?nda kullan?c?y?
 * kanaldan ??karm?yoruz.
 *
 * Sadece switch ge?ici olarak pasif olur.
 */

#voiceAiToggleRow:disabled{
  opacity:.65;
  cursor:wait;
}


/* Alt dock sabit ve temiz */

#voicePanel.rokss-voice-dock{
  overflow:visible !important;
}


/*
 * Ses dalgas? aktifken ye?il.
 */

#voiceNoiseMenuBtn.active{
  border-color:#36785b !important;
  background:#17372a !important;
  color:#6ee3a8 !important;
}


/*
 * Kapal?yken normal gri.
 */

#voiceNoiseMenuBtn:not(.active){
  border-color:#293a52 !important;
  background:#121e30 !important;
  color:#9aa9bd !important;
}


/*
 * Eski text'ler yanl??l?kla buton i?inde
 * kalsa bile g?r?nmesin.
 */

#voicePanel .voice-dock-round{
  line-height:0 !important;
  overflow:hidden;
}


/* Avatar / kendi kullan?c? alan? hi?bir AI
   switch i?leminde gizlenmesin */

#voiceDockSelf{
  display:flex !important;
}



/* ROKSS_VOICE_DUPLICATE_FIX_V7 */

.voice-channel-members{
  display:none !important;
}
/* ================================
   ROKSS_UNIFIED_LAYOUT_V1
   Ayr� kart hissini azalt�r,
   tek b�t�n hissi verir.
================================ */

/* �st blok ile alt blok aras� bo�lu�u k���lt */
:is(
  .community-header,
  .server-header,
  .community-hero,
  .server-hero,
  .active-community-card,
  .active-server-card
){
  margin-bottom: 8px !important;
  border-radius: 24px !important;
  box-shadow: none !important;
}

/* Alt ana 3 kolon alan� */
:is(
  .community-layout,
  .server-layout,
  .community-grid,
  .server-grid,
  .community-body,
  .server-body,
  .community-shell,
  .server-shell
){
  gap: 6px !important;
  align-items: stretch !important;
}

/* Sol - Orta - Sa� paneller ortak g�r�n�m */
:is(
  .channel-sidebar,
  .rooms-sidebar,
  .community-sidebar,
  .server-sidebar,
  .chat-main,
  .community-main,
  .server-main,
  .chat-panel,
  .members-sidebar,
  .community-members,
  .server-members,
  .people-sidebar
){
  box-shadow: none !important;
  background:
    linear-gradient(
      180deg,
      rgba(12,20,42,0.98) 0%,
      rgba(8,15,32,0.98) 100%
    ) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}

/* Sol panel */
:is(
  .channel-sidebar,
  .rooms-sidebar,
  .community-sidebar,
  .server-sidebar
){
  border-radius: 22px 10px 10px 22px !important;
  margin-right: 0 !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
}

/* Orta panel */
:is(
  .chat-main,
  .community-main,
  .server-main,
  .chat-panel
){
  border-radius: 10px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Sa� panel */
:is(
  .members-sidebar,
  .community-members,
  .server-members,
  .people-sidebar
){
  border-radius: 10px 22px 22px 10px !important;
  margin-left: 0 !important;
  border-left: 1px solid rgba(255,255,255,0.06) !important;
}

/* �� kartlar� da biraz birle�tir */
:is(
  .channel-sidebar,
  .rooms-sidebar,
  .community-sidebar,
  .server-sidebar,
  .members-sidebar,
  .community-members,
  .server-members,
  .people-sidebar
) > *{
  box-shadow: none !important;
}

/* Sol panel i�indeki ses alan� ile roller aras�na daha do�al ak�� */
:is(
  .channel-sidebar,
  .rooms-sidebar,
  .community-sidebar,
  .server-sidebar
) hr{
  opacity: 0.18 !important;
  margin: 12px 0 !important;
}

/* �� paddingler biraz daha tek par�a hissi versin */
:is(
  .channel-sidebar,
  .rooms-sidebar,
  .community-sidebar,
  .server-sidebar
){
  padding-right: 10px !important;
}

:is(
  .chat-main,
  .community-main,
  .server-main,
  .chat-panel
){
  padding-left: 12px !important;
  padding-right: 12px !important;
}

:is(
  .members-sidebar,
  .community-members,
  .server-members,
  .people-sidebar
){
  padding-left: 10px !important;
}

/* Banner ile alt g�vde ayn� aileden g�r�ns�n */
:is(
  .community-header,
  .server-header,
  .community-hero,
  .server-hero,
  .active-community-card,
  .active-server-card
){
  border: 1px solid rgba(255,255,255,0.05) !important;
  background:
    linear-gradient(
      90deg,
      rgba(12,20,42,0.98) 0%,
      rgba(15,24,50,0.98) 55%,
      rgba(18,20,48,0.98) 100%
    ) !important;
}

/* D�� taraftaki a��r� bo�luklar� biraz azalt */
:is(
  .community-page,
  .server-page,
  .community-view,
  .server-view
){
  gap: 8px !important;
}

/* =========================================================
   ROKSS_UNIFIED_LAYOUT_V2
   Community hero + rooms + chat + people = tek panel
   ========================================================= */

@media (min-width:901px){

  /*
   * B�t�n sunucu alan�n�n d�� kabu�u.
   * �ocuklar aras�ndaki 2px alan ayra� g�revi g�r�yor.
   */
  .server-workspace{
    gap:2px !important;
    padding:1px !important;
    box-sizing:border-box;

    background:#1b2940 !important;

    border:1px solid #263650 !important;
    border-radius:20px !important;

    overflow:hidden !important;
  }


  /*
   * �st ROKSS Connect banner art�k ayr� kart de�il.
   */
  .community-hero{
    margin:0 !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    background:
      linear-gradient(
        110deg,
        #111a2b 0%,
        #101827 62%,
        rgba(73,49,120,.20) 100%
      ) !important;
  }


  /*
   * Alt 3 kolon birbirine �ok yak�n.
   * 2px aral�k tek ince �izgi gibi g�r�necek.
   */
  .workspace-grid{
    gap:2px !important;

    background:#1b2940 !important;

    border:0 !important;
    border-radius:0 !important;

    overflow:hidden !important;
  }


  /*
   * Sol panel
   */
  .rooms-panel{
    margin:0 !important;
    padding:16px !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    background:
      linear-gradient(
        180deg,
        rgba(17,26,42,.99),
        rgba(12,19,31,.99)
      ) !important;
  }


  /*
   * Orta chat paneli
   */
  .chat-panel{
    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    background:
      linear-gradient(
        180deg,
        #111a2a 0%,
        #0d1522 100%
      ) !important;
  }


  /*
   * Sa� ki�iler paneli
   */
  .people-panel{
    margin:0 !important;
    padding:16px !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    background:
      linear-gradient(
        180deg,
        rgba(17,26,42,.99),
        rgba(12,19,31,.99)
      ) !important;
  }


  /*
   * Chat ba�l��� da kart hissi vermesin.
   * Sadece a�a��da ince ayra�.
   */
  .chat-head{
    border-bottom:
      1px solid
      rgba(94,113,145,.20) !important;

    background:
      linear-gradient(
        180deg,
        rgba(22,33,53,.48),
        rgba(15,24,39,.14)
      ) !important;
  }


  /*
   * Sol panel ile chat aras�nda,
   * chat ile ki�i paneli aras�nda
   * daha do�al ince �izgi.
   */
  .rooms-panel{
    border-right:
      1px solid
      rgba(255,255,255,.025) !important;
  }

  .people-panel{
    border-left:
      1px solid
      rgba(255,255,255,.025) !important;
  }


  /*
   * �nceki patch'ten kalan yuvarlak k��eleri kesin ez.
   */
  .community-hero,
  .rooms-panel,
  .chat-panel,
  .people-panel{
    outline:none !important;
  }

}


/* =========================================================
   ROKSS_THEME_TUNE_V3
   Daha uyumlu panel tonlar� + online/offline stilleri
   ========================================================= */

:root{
  --workspace-divider:#1e2c43;
  --workspace-surface:#101828;
  --workspace-surface-2:#101a2b;
  --workspace-surface-3:#0d1523;
  --workspace-soft:#132036;
}

.community-hero{
  background:linear-gradient(110deg,#111b2c 0%,#10192a 58%,#16233b 100%) !important;
}

.server-workspace,
.workspace-grid{
  background:var(--workspace-divider) !important;
}

.rooms-panel,
.people-panel{
  background:linear-gradient(180deg,#101829 0%,#0d1523 100%) !important;
}

.chat-panel{
  background:linear-gradient(180deg,#10192b 0%,#0d1523 100%) !important;
}

.chat-head{
  background:linear-gradient(180deg,rgba(19,31,49,.92),rgba(15,24,39,.70)) !important;
  border-bottom:1px solid rgba(92,108,135,.18) !important;
}

.composer{
  background:rgba(14,22,35,.96) !important;
  border-top:1px solid rgba(92,108,135,.18) !important;
}

.rooms-panel,
.chat-panel,
.people-panel,
.community-hero{
  box-shadow:none !important;
}

.member-row{
  border:1px solid transparent;
  transition:.14s ease;
}

.member-row:hover{
  background:#142036 !important;
  border-color:#22334d !important;
}

.member-section-sub{
  margin:-2px 0 8px;
  padding-left:2px;
  color:#7f8ea7;
  font-size:10px;
  font-weight:700;
  letter-spacing:.03em;
}

.online-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  margin-right:6px;
  vertical-align:middle;
}

.online-dot.online{
  background:#4fd89d;
  box-shadow:0 0 10px rgba(79,216,157,.42);
}

.online-dot.offline{
  background:#667486;
}

.presence-text.online{
  color:#79e2b3;
}

.presence-text.offline{
  color:#9aa7b8;
}

.member-meta small{
  display:flex;
  align-items:center;
  gap:0;
  flex-wrap:wrap;
}



/* ===========================================================
   ROKSS_THEME_PRESENCE_V4
   =========================================================== */

@media (min-width:901px){

  /*
   * Tek panel hissini koru ama tonlar? birbirine yakla?t?r.
   */

  .server-workspace{
    background:#1d2a40 !important;
    border-color:#273750 !important;
  }


  .workspace-grid{
    background:#1d2a40 !important;
  }


  .community-hero{
    background:
      linear-gradient(
        110deg,
        #111a2a 0%,
        #101827 58%,
        #111a2c 100%
      ) !important;
  }


  .rooms-panel{
    background:
      linear-gradient(
        180deg,
        #101929 0%,
        #0d1523 100%
      ) !important;
  }


  .chat-panel{
    background:
      linear-gradient(
        180deg,
        #101929 0%,
        #0d1523 100%
      ) !important;
  }


  .people-panel{
    background:
      linear-gradient(
        180deg,
        #101929 0%,
        #0d1523 100%
      ) !important;
  }


  .chat-head{
    background:
      linear-gradient(
        180deg,
        #121d30 0%,
        #101929 100%
      ) !important;

    border-bottom:
      1px solid
      #1d2b42 !important;
  }


  .composer{
    background:#0e1726 !important;

    border-top:
      1px solid
      #1d2b42 !important;
  }
}


/* ===========================================================
   MEMBER GROUP
   =========================================================== */

.member-presence-group-title{

  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-top:12px;
  padding:
    8px
    3px
    3px;

  border-top:
    1px solid
    rgba(78,96,124,.20);

  color:
    var(
      --presence-role-color,
      #72d8ae
    );
}


.member-presence-group-title:first-child{
  margin-top:0;
  border-top:0;
  padding-top:1px;
}


.member-presence-group-title span{

  display:flex;
  align-items:center;
  gap:6px;

  font-size:9px;
  font-weight:950;

  letter-spacing:.13em;
}


.member-presence-group-title span i{

  width:7px;
  height:7px;

  border-radius:50%;

  background:currentColor;

  box-shadow:
    0 0 9px
    color-mix(
      in srgb,
      currentColor 65%,
      transparent
    );
}


.member-presence-group-title b{

  color:#8290a6;

  font-size:9px;
  font-weight:900;
}


/* ===========================================================
   ONLINE/OFFLINE SUMMARY
   =========================================================== */

.member-presence-summary{

  display:flex;
  align-items:center;
  gap:5px;

  padding:
    1px
    3px
    5px;

  font-size:8px;
  font-weight:750;
}


.member-presence-summary .summary-online{
  color:#58cfa0;
}


.member-presence-summary .summary-offline{
  color:#65758c;
}


.member-presence-summary i{
  color:#405069;
  font-style:normal;
}


/* ===========================================================
   MEMBER ROW
   =========================================================== */

.member-row{

  min-height:48px;

  padding:
    8px
    7px !important;

  border:
    1px solid
    transparent;

  border-radius:11px;

  transition:
    background .14s ease,
    border-color .14s ease,
    opacity .14s ease;
}


.member-row:hover{

  background:#142137 !important;

  border-color:
    color-mix(
      in srgb,
      var(
        --member-role-color,
        #4f607d
      ) 25%,
      #24334c
    ) !important;
}


/* ===========================================================
   AVATAR STATUS
   =========================================================== */

.member-avatar-presence{

  position:relative;

  flex:
    0
    0
    auto;
}


.member-status-dot{

  position:absolute;

  right:-1px;
  bottom:0;

  width:8px;
  height:8px;

  border:
    2px solid
    #101929;

  border-radius:50%;
}


.member-status-dot.online{

  background:#48d69a;

  box-shadow:
    0 0 8px
    rgba(72,214,154,.60);
}


.member-status-dot.offline{
  background:#5c6879;
}


/* ===========================================================
   MEMBER META
   =========================================================== */

.member-meta{
  min-width:0;
}


.member-meta strong{

  display:flex !important;
  align-items:center;
  gap:4px;

  white-space:nowrap;
}


.member-meta small{

  display:flex !important;
  align-items:center;
  gap:4px;

  margin-top:3px !important;

  white-space:nowrap;
}


.presence-label{

  font-size:9px;
  font-weight:800;
}


.presence-label.online{
  color:#5ed6a4;
}


.presence-label.offline{
  color:#748196;
}


.member-meta-separator{
  color:#46556c;
}


/* ===========================================================
   OFFLINE UYEYI HAFIF SOLUK GOSTER
   =========================================================== */

.member-row.presence-offline{

  opacity:.62;
}


.member-row.presence-offline:hover{

  opacity:.90;
}


.member-row.presence-offline .avatar-rich{

  filter:
    saturate(.55)
    brightness(.82);
}


.member-row.presence-online{

  opacity:1;
}



/* =========================================================
   ROK_RISE_ACCOUNT_DELETE_STYLE_V1
   ========================================================= */

.rok-delete-btn{

  border-color:
    rgba(224,78,97,.42) !important;

  background:
    rgba(111,28,42,.17) !important;

  color:
    #ff8998 !important;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease;
}


.rok-delete-btn:hover{

  border-color:
    rgba(255,93,113,.75) !important;

  background:
    rgba(142,34,50,.30) !important;

  color:
    #ffb1ba !important;
}


.rok-delete-btn:active{

  transform:
    translateY(1px);
}


.rok-delete-btn:disabled{

  opacity:.50;

  cursor:wait;
}


/*
 * 3 buton oldu?unda sa? taraf
 * d?zg?n dikey hizalans?n.
 */

.rok-manage-actions{

  min-width:132px;
}


@media(max-width:700px){

  .rok-manage-actions{

    min-width:0;

    display:grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;
  }


  .rok-delete-btn{

    grid-column:
      1 / -1;
  }
}


/* =========================================================
   ROKSS_HIDDEN_SCROLLBARS_V1
   Scroll devam eder, scrollbar g�r�nmez.
   Mouse wheel + mobil touch destekli.
   ========================================================= */

/*
 * Sunucu ekran�ndaki scroll alanlar�.
 */
.rooms-panel,
.channel-list,
.messages,
.people-panel,
.member-list,
.rok-manage-list{

  overflow-y:auto !important;

  /* Firefox */
  scrollbar-width:none !important;

  /* Eski Edge / IE */
  -ms-overflow-style:none !important;

  /* Mobilde ak�c� parmak scroll */
  -webkit-overflow-scrolling:touch;

  /* Dikey parmak hareketine izin ver */
  touch-action:pan-y;

  /*
   * Bir panelin sonuna gelince
   * t�m sayfan�n istemeden z�plamas�n� azalt.
   */
  overscroll-behavior-y:contain;
}


/*
 * Chrome / Edge / Safari
 */
.rooms-panel::-webkit-scrollbar,
.channel-list::-webkit-scrollbar,
.messages::-webkit-scrollbar,
.people-panel::-webkit-scrollbar,
.member-list::-webkit-scrollbar,
.rok-manage-list::-webkit-scrollbar{

  width:0 !important;
  height:0 !important;
  display:none !important;
}


/*
 * Chat alan�nda sa� taraftaki bo� scrollbar
 * pay�n� da kald�r.
 */
.messages{
  scrollbar-gutter:auto !important;
}


/*
 * Sa� kullan�c� paneli ayn� �ekilde.
 */
.people-panel{
  scrollbar-gutter:auto !important;
}


/*
 * Mobilde parmakla rahat kayd�rma.
 */
@media(max-width:900px){

  .rooms-panel,
  .channel-list,
  .messages,
  .people-panel,
  .member-list,
  .rok-manage-list{

    overflow-y:auto !important;
    touch-action:pan-y !important;
    -webkit-overflow-scrolling:touch;
  }
}


/* =========================================================
   ROKSS_PERSONAL_UNIFIED_V1
   Profil ekran� = tek b�t�n panel
   ========================================================= */

@media (min-width:901px){

  /*
   * ORTAK RENK / AYRA�
   */
  .personal-hero,
  .personal-grid,
  .personal-bottom-grid{
    --personal-bg:#101929;
    --personal-bg-deep:#0d1523;
    --personal-divider:#1d2b42;
    --personal-border:#273750;
  }


  /* =======================================================
     �ST PROF�L BANNER
     Sadece �st k��eleri yuvarlak.
     ======================================================= */

  .personal-hero{
    margin:0 !important;

    border:
      1px solid
      var(--personal-border) !important;

    border-bottom:0 !important;

    border-radius:
      20px 20px 0 0 !important;

    box-shadow:none !important;

    background:
      linear-gradient(
        110deg,
        #111a2a 0%,
        #101827 58%,
        #151a31 100%
      ) !important;
  }


  /* =======================================================
     ORTA 3 KART
     Arkada�lar / Gelen �stekler / Rise
     ======================================================= */

  .personal-grid{
    margin-top:0 !important;

    padding:0 1px !important;

    gap:2px !important;

    background:
      var(--personal-divider) !important;

    border-left:
      1px solid
      var(--personal-border);

    border-right:
      1px solid
      var(--personal-border);

    /*
     * Hero ile aras�ndaki tek ince �izgi.
     */
    border-top:
      1px solid
      var(--personal-divider);
  }


  .personal-grid > .feature-card{
    margin:0 !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    background:
      linear-gradient(
        180deg,
        var(--personal-bg) 0%,
        var(--personal-bg-deep) 100%
      ) !important;
  }


  /*
   * Renkli glowlar kals�n ama daha yumu�ak olsun.
   */
  .personal-grid > .feature-card::before{
    opacity:.10 !important;
  }


  /* =======================================================
     ALT 2 KART
     Direkt Mesajlar / ROKSS Profili
     ======================================================= */

  .personal-bottom-grid{
    margin-top:0 !important;

    padding:2px 1px 1px !important;

    gap:2px !important;

    background:
      var(--personal-divider) !important;

    border-left:
      1px solid
      var(--personal-border);

    border-right:
      1px solid
      var(--personal-border);

    border-bottom:
      1px solid
      var(--personal-border);

    border-radius:
      0 0 20px 20px !important;

    overflow:hidden;
  }


  .personal-bottom-grid > .dm-dashboard-card,
  .personal-bottom-grid > .account-overview{
    margin:0 !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    background:
      linear-gradient(
        180deg,
        var(--personal-bg) 0%,
        var(--personal-bg-deep) 100%
      ) !important;
  }


  /*
   * Sadece en alttaki d�� k��eler yuvarlak.
   */

  .personal-bottom-grid > .dm-dashboard-card{
    border-radius:
      0 0 0 18px !important;
  }


  .personal-bottom-grid > .account-overview{
    border-radius:
      0 0 18px 0 !important;
  }


  /* =======================================================
     �� ELEMANLARI DA AYNI RENK A�LES�NE TOPLA
     ======================================================= */

  .card-action{
    background:#121e31 !important;

    border-color:
      #263750 !important;
  }


  .personal-dm{
    background:#111b2b !important;

    border-color:
      #22334d !important;
  }


  .profile-overview-grid > div{
    background:#0f1929 !important;

    border-color:
      #22334d !important;
  }


  .rok-summary .stat{
    background:#0f1929 !important;

    border-color:
      #22334d !important;
  }

}


/* =========================================================
   MOB�L
   Tek kolon ama b�t�n g�r�n�m korunur.
   ========================================================= */

@media(max-width:900px){

  .personal-hero{
    margin-bottom:0 !important;

    border-radius:
      18px 18px 0 0 !important;

    border-bottom:0 !important;
  }


  .personal-grid{
    margin-top:0 !important;

    gap:2px !important;

    padding:2px 1px 0 !important;

    background:#1d2b42 !important;

    border-left:
      1px solid #273750;

    border-right:
      1px solid #273750;
  }


  .personal-grid > .feature-card{
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }


  .personal-bottom-grid{
    margin-top:0 !important;

    gap:2px !important;

    padding:
      2px 1px 1px !important;

    background:#1d2b42 !important;

    border:
      1px solid #273750;

    border-top:0;

    border-radius:
      0 0 18px 18px !important;

    overflow:hidden;
  }


  .personal-bottom-grid > .dm-dashboard-card,
  .personal-bottom-grid > .account-overview{
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }


  .personal-bottom-grid > .account-overview{
    border-radius:
      0 0 17px 17px !important;
  }
}


/* =========================================================
   ROKSS_PERSONAL_COLOR_HARMONY_V2
   Profil ekran�ndaki b�t�n paneller ayn� renk ailesi.
   ========================================================= */

@media (min-width:901px){

  /*
   * ANA RENKLER
   */
  #personalView{
    --personal-main:#101929;
    --personal-main-deep:#0d1624;
    --personal-inner:#111c2d;
    --personal-divider:#223149;
    --personal-border:#2a3a54;
    --personal-soft:#162238;
  }


  /* =======================================================
     �ST PROF�L
     ======================================================= */

  .personal-hero{

    background:
      linear-gradient(
        110deg,
        #111b2c 0%,
        #101929 60%,
        #121a2d 100%
      ) !important;

    border-color:
      var(--personal-border) !important;
  }


  /* =======================================================
     ORTA 3 PANEL
     Art�k mavi / sar� / turkuaz ayr� glow yok.
     ======================================================= */

  .personal-grid{
    background:
      var(--personal-divider) !important;
  }


  .personal-grid > .feature-card{

    background:
      linear-gradient(
        180deg,
        var(--personal-main) 0%,
        var(--personal-main-deep) 100%
      ) !important;

    color:#eaf0fa !important;
  }


  /*
   * Eski renkli b�y�k glow efektlerini kald�r.
   */
  .friends-card::before,
  .request-card::before,
  .rok-card::before{

    opacity:0 !important;
    display:none !important;
  }


  /* =======================================================
     ALT PANELLER
     ======================================================= */

  .personal-bottom-grid{

    background:
      var(--personal-divider) !important;
  }


  .dm-dashboard-card,
  .account-overview{

    background:
      linear-gradient(
        180deg,
        var(--personal-main) 0%,
        var(--personal-main-deep) 100%
      ) !important;
  }


  /* =======================================================
     �� KARTLAR
     ======================================================= */

  .personal-dm{

    background:
      #111c2d !important;

    border-color:
      #263750 !important;
  }


  .personal-dm:hover{

    background:
      #16243a !important;

    border-color:
      #354b6a !important;
  }


  .profile-overview-grid > div{

    background:
      #111c2d !important;

    border-color:
      #263750 !important;
  }


  .rok-summary .stat{

    background:
      #111c2d !important;

    border-color:
      #263750 !important;
  }


  /* =======================================================
     ALTTAK� UZUN AKS�YON BUTONLARI
     ======================================================= */

  .card-action{

    background:
      #121f32 !important;

    border-color:
      #293b58 !important;

    color:
      #dce6f5 !important;
  }


  .card-action:hover:not(:disabled){

    background:
      #172740 !important;

    border-color:
      #405777 !important;

    color:#fff !important;
  }


  /* =======================================================
     BA�LIKLAR / A�IKLAMALAR
     ======================================================= */

  .feature-card p,
  .profile-identity p,
  .personal-dm small,
  .profile-overview-grid span{

    color:
      #8796ad !important;
  }


  .feature-kicker,
  .eyebrow{

    color:
      #8190a8 !important;
  }


  /*
   * �� kart�n ikonlar� yine birbirinden ay�rt
   * edilebilir ama ba��rmas�n.
   */
  .friends-card .feature-icon{
    color:#83a7e8 !important;
  }

  .request-card .feature-icon{
    color:#b7a77d !important;
  }

  .rok-card .feature-icon{
    color:#7fb7c7 !important;
  }

}


/* =========================================================
   MOB�LDE DE AYNI TON
   ========================================================= */

@media(max-width:900px){

  .personal-hero,
  .personal-grid > .feature-card,
  .dm-dashboard-card,
  .account-overview{

    background:
      linear-gradient(
        180deg,
        #101929 0%,
        #0d1624 100%
      ) !important;
  }


  .friends-card::before,
  .request-card::before,
  .rok-card::before{

    display:none !important;
  }


  .personal-dm,
  .profile-overview-grid > div,
  .rok-summary .stat{

    background:#111c2d !important;
    border-color:#263750 !important;
  }
}



/* =========================================================
   ROKSS_FRIEND_SYSTEM_STYLE_V1
   ========================================================= */

.profile-rokss-id{

  display:flex;
  align-items:center;
  gap:7px;

  margin-top:6px;

  color:#7f91aa;

  font-size:11px;
}


.profile-rokss-id b{

  color:#c8d5e8;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  letter-spacing:.08em;
}


.rokss-id-copy{

  display:grid;
  place-items:center;

  width:25px;
  height:25px;

  padding:0;

  border:
    1px solid
    #2b3b56;

  border-radius:8px;

  background:#111d30;

  color:#8fa2bd;

  cursor:pointer;

  transition:.15s ease;
}


.rokss-id-copy:hover{

  border-color:#596aeb;

  background:#192641;

  color:#fff;
}


/* =========================
   SOCIAL MODAL
   ========================= */

.social-modal{

  width:
    min(
      650px,
      calc(100vw - 30px)
    );

  max-height:
    min(
      720px,
      calc(100vh - 30px)
    );

  overflow-y:auto;

  scrollbar-width:none;
}


.social-modal::-webkit-scrollbar{
  display:none;
}


.social-modal-head{

  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  margin-bottom:18px;
}


.social-modal-head h2{
  margin:
    4px
    0
    5px;
}


.social-modal-head p{

  margin:0;

  color:#8998af;

  font-size:12px;
}


/* =========================
   MY ID
   ========================= */

.my-rokss-code-box{

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:14px;

  margin-bottom:12px;

  padding:
    13px
    14px;

  border:
    1px solid
    #273850;

  border-radius:13px;

  background:#101b2d;
}


.my-rokss-code-box > div{

  display:grid;
  gap:3px;
}


.my-rokss-code-box small{

  color:#7688a2;

  font-size:8px;
  font-weight:900;

  letter-spacing:.13em;
}


.my-rokss-code-box strong{

  color:#edf3fc;

  font-size:18px;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  letter-spacing:.12em;
}


/* =========================
   ADD FRIEND
   ========================= */

.friend-add-box{

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap:8px;

  padding-bottom:18px;

  border-bottom:
    1px solid
    #223149;
}


.friend-add-box .field{

  margin:0;
}


.social-list-head{

  display:flex;
  justify-content:space-between;
  align-items:center;

  margin:
    17px
    2px
    8px;

  color:#dce5f2;
}


.social-list-head span{

  display:grid;
  place-items:center;

  min-width:24px;
  height:24px;

  border-radius:8px;

  background:#17243a;

  color:#8fa1bb;

  font-size:10px;
}


/* =========================
   LIST
   ========================= */

.friend-list,
.friend-request-list{

  display:grid;
  gap:7px;
}


.friend-row,
.friend-request-row{

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  min-height:68px;

  padding:
    10px
    12px;

  border:
    1px solid
    #23344d;

  border-radius:13px;

  background:
    linear-gradient(
      180deg,
      #111c2e,
      #0f1929
    );
}


.friend-row:hover,
.friend-request-row:hover{

  border-color:#344a69;

  background:
    linear-gradient(
      180deg,
      #142137,
      #111c2e
    );
}


.friend-person{

  display:flex;
  align-items:center;

  min-width:0;

  gap:10px;
}


.friend-person-meta{

  display:grid;

  min-width:0;

  gap:2px;
}


.friend-person-meta strong{

  display:flex;
  align-items:center;

  gap:4px;

  color:#eef3fb;

  font-size:12px;
}


.friend-person-meta small{

  color:#8293ad;

  font-size:10px;
}


.friend-person-meta > span{

  color:#657891;

  font-size:9px;
}


.friend-person-meta > span b{

  color:#9babc1;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  letter-spacing:.05em;
}


.friend-request-actions{

  display:flex;

  flex:
    0
    0
    auto;

  gap:6px;
}


.danger-soft{

  border-color:
    rgba(224,78,97,.35) !important;

  background:
    rgba(110,29,42,.13) !important;

  color:#ee8b98 !important;
}


.danger-soft:hover{

  background:
    rgba(133,34,49,.28) !important;

  border-color:
    rgba(235,90,107,.60) !important;
}


/* =========================
   EMPTY
   ========================= */

.social-empty{

  display:grid;
  place-items:center;

  gap:5px;

  min-height:110px;

  padding:20px;

  border:
    1px dashed
    #293a54;

  border-radius:13px;

  color:#8999b0;

  text-align:center;

  font-size:12px;
}


.social-empty small{

  max-width:350px;

  color:#60728c;

  line-height:1.45;
}


/* =========================
   MOBILE
   ========================= */

@media(max-width:650px){

  .friend-add-box{

    grid-template-columns:
      1fr;
  }


  .friend-add-box .primary-btn{
    width:100%;
  }


  .friend-row,
  .friend-request-row{

    align-items:flex-start;

    flex-direction:column;
  }


  .friend-row > button{

    width:100%;
  }


  .friend-request-actions{

    width:100%;
  }


  .friend-request-actions button{

    flex:1;
  }


  .my-rokss-code-box strong{
    font-size:16px;
  }
}


/* ROKSS MEMBER SEARCH DARK V1 */

input[placeholder="Kişi ara..."],
input[placeholder="Search people..."] {
  width: 100%;
  box-sizing: border-box;

  background: transparent !important;
  color: #e9edf5 !important;

  border: 1px solid #243249 !important;
  border-radius: 8px !important;

  outline: none !important;

  padding: 8px 10px !important;

  font: inherit;
  font-size: 12px;
}

input[placeholder="Kişi ara..."]::placeholder,
input[placeholder="Search people..."]::placeholder {
  color: #66758b !important;
  opacity: 1;
}

input[placeholder="Kişi ara..."]:focus,
input[placeholder="Search people..."]:focus {
  background: rgba(255,255,255,.015) !important;
  border-color: rgba(123, 97, 255, .55) !important;

  box-shadow:
    0 0 0 2px
    rgba(123, 97, 255, .08) !important;
}

/* ROKSS MEMBER SEARCH DARK V1 END */


/* ROKSS SERVER QUICK MENU V1 */

/*
 * Eski create/join butonlar?
 * handler olarak DOM'da duruyor
 * fakat kullan?c?ya g?r?nm?yor.
 */
.serverLegacyAction{
  display:none !important;
}

.serverMenuLauncher{
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  min-height:46px !important;

  display:grid !important;
  place-items:center !important;

  padding:0 !important;

  border:
    1px solid
    rgba(139,112,255,.75)
    !important;

  border-radius:
    13px !important;

  outline:none !important;

  background:
    linear-gradient(
      145deg,
      #6256f4,
      #7542df
    ) !important;

  color:#fff !important;

  box-shadow:
    0 8px 22px
    rgba(62,43,170,.24)
    !important;

  cursor:pointer !important;

  transition:
    transform .16s ease,
    filter .16s ease,
    box-shadow .16s ease
    !important;
}

.serverMenuLauncher span{
  display:block;

  font-size:24px !important;
  font-weight:400 !important;

  line-height:1 !important;

  transform:
    translateY(-1px);

  transition:
    transform .18s ease;
}

.serverMenuLauncher:hover{
  filter:
    brightness(1.09);

  transform:
    translateY(-1px);
}

.serverMenuLauncher.isOpen{
  box-shadow:
    0 0 0 3px
    rgba(118,83,244,.13),
    0 10px 28px
    rgba(62,43,170,.3)
    !important;
}

.serverMenuLauncher.isOpen span{
  transform:
    rotate(45deg);
}


/* MENU */

.serverQuickMenu{
  position:fixed;

  z-index:9999;

  width:236px;

  box-sizing:border-box;

  padding:7px;

  border:
    1px solid
    #28364d;

  border-radius:
    13px;

  background:
    linear-gradient(
      180deg,
      #111a29,
      #0c1421
    );

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.42);

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transform:
    translateX(-5px)
    scale(.98);

  transform-origin:
    left bottom;

  transition:
    opacity .14s ease,
    transform .14s ease,
    visibility .14s ease;
}

.serverQuickMenu.isOpen{
  opacity:1;

  visibility:visible;

  pointer-events:auto;

  transform:
    translateX(0)
    scale(1);
}

.serverQuickMenuTitle{
  padding:
    6px 9px 8px;

  color:#667892;

  font-size:8px;

  font-weight:900;

  letter-spacing:1.8px;
}


/* MENU ITEM */

.serverQuickMenuItem{
  width:100%;

  box-sizing:border-box;

  display:flex;

  align-items:center;

  gap:10px;

  padding:10px;

  border:
    1px solid
    transparent;

  border-radius:9px;

  background:
    transparent;

  color:#e9eef7;

  text-align:left;

  cursor:pointer;

  transition:
    background .14s ease,
    border-color .14s ease;
}

.serverQuickMenuItem:hover{
  border-color:
    rgba(112,92,235,.22);

  background:
    rgba(102,80,230,.09);
}

.serverQuickMenuIcon{
  width:31px;
  height:31px;

  flex:0 0 31px;

  display:grid;

  place-items:center;

  border:
    1px solid
    #2b3a52;

  border-radius:8px;

  background:
    #111c2c;

  color:
    #a99aff;

  font-size:17px;

  font-weight:700;
}

.serverQuickMenuText{
  min-width:0;

  display:flex;

  flex-direction:column;

  gap:2px;
}

.serverQuickMenuText strong{
  color:#f4f6fb;

  font-size:11px;

  font-weight:800;
}

.serverQuickMenuText small{
  color:#6f7f95;

  font-size:9px;

  font-weight:500;
}


/* ROKSS SERVER QUICK MENU V1 END */

/* ROKSS_PROFILE_UI_V1 */

#memberModal .modal.wide{
  width:min(680px,94vw);
  max-height:92vh;
  padding:0 !important;
  overflow:auto;
  border:1px solid #2b3d59;
  border-radius:20px;
  background:#0c1421;
}

#memberModal .close{
  z-index:20;
  top:13px;
  right:13px;
  background:rgba(12,20,33,.9);
  backdrop-filter:blur(8px);
}

.profile-card{
  position:relative;
  overflow:hidden;
  min-height:520px;
}

.profile-cover{
  position:relative;
  height:190px;
  background:
    radial-gradient(
      circle at 75% 25%,
      rgba(105,82,255,.34),
      transparent 26%
    ),
    radial-gradient(
      circle at 20% 80%,
      rgba(33,107,190,.22),
      transparent 33%
    ),
    linear-gradient(
      135deg,
      #17233a,
      #10192b 48%,
      #221848
    );
  background-size:cover;
  background-position:center;
}

.profile-cover::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:80px;
  background:linear-gradient(
    transparent,
    #0c1421
  );
}

.profile-avatar-wrap{
  position:relative;
  z-index:5;
  width:max-content;
  margin:-58px auto 0;
}

.profile-avatar-wrap .avatar.xl{
  width:104px;
  height:104px;
  border:5px solid #0c1421;
  box-shadow:
    0 0 0 3px #7258ff,
    0 12px 34px rgba(0,0,0,.4);
}

.profile-avatar-wrap .avatar.xl span{
  font-size:34px;
}

.profile-avatar-wrap .avatar.xl img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.profile-online{
  position:absolute;
  right:2px;
  bottom:8px;
  width:19px;
  height:19px;
  border:4px solid #0c1421;
  border-radius:50%;
  background:#2bd477;
  box-sizing:border-box;
  box-shadow:0 0 12px rgba(43,212,119,.5);
}

.profile-content{
  padding:9px 38px 30px;
}

.profile-identity{
  text-align:center;
}

.profile-identity h2{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  margin:6px 0 3px !important;
  color:#f4f6fb;
  font-size:27px;
}

.profile-identity>span{
  color:#8999bd;
  font-size:12px;
}

.profile-identity p{
  max-width:460px;
  margin:8px auto 0;
  color:#7f8fa7;
  font-size:10px;
  line-height:1.5;
}

.profile-vip-badge{
  padding:3px 6px;
  border-radius:5px;
  background:linear-gradient(
    135deg,
    #5d6dff,
    #9147ed
  );
  color:#fff;
  font-size:7px;
  letter-spacing:.6px;
}

.profile-rok-empty{
  margin:13px 0 17px;
  color:#c6d0df;
  text-align:center;
  font-size:11px;
}

.profile-rok-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
  margin:16px 0;
}

.profile-rok-grid>div{
  padding:9px;
  border:1px solid #223149;
  border-radius:10px;
  background:#09111d;
}

.profile-rok-grid span{
  display:block;
  color:#65758c;
  font-size:7px;
  text-transform:uppercase;
}

.profile-rok-grid b{
  display:block;
  margin-top:4px;
  color:#eaf0f8;
  font-size:10px;
}

.profile-vip-box{
  min-height:65px;
  display:flex;
  align-items:center;
  gap:11px;
  box-sizing:border-box;
  margin:14px 0 18px;
  padding:11px 13px;
  border:1px solid rgba(133,87,255,.34);
  border-radius:12px;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(137,72,255,.13),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(99,63,189,.12),
      rgba(15,18,39,.72)
    );
}

.profile-vip-box.active{
  border-color:rgba(146,91,255,.58);
  box-shadow:
    inset 0 0 28px rgba(108,62,220,.08);
}

.profile-vip-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(155,112,255,.5);
  border-radius:50%;
  background:rgba(104,63,214,.16);
  color:#d7c9ff;
  font-size:19px;
}

.profile-vip-text{
  min-width:0;
  flex:1;
}

.profile-vip-text strong{
  display:flex;
  align-items:center;
  gap:6px;
  color:#f1f3f8;
  font-size:13px;
}

.profile-vip-text strong i{
  padding:2px 5px;
  border-radius:4px;
  background:#744eff;
  color:#fff;
  font-size:7px;
  font-style:normal;
}

.profile-vip-text p{
  margin:3px 0 0;
  color:#9293b5;
  font-size:9px;
}

.profile-info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.profile-info-grid article{
  min-height:52px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 11px;
  box-sizing:border-box;
  border:1px solid #1e2b3e;
  border-radius:10px;
  background:#111a28;
}

.profile-info-grid b{
  display:block;
  color:#edf1f7;
  font-size:10px;
}

.profile-info-grid small{
  display:block;
  margin-top:2px;
  color:#65758b;
  font-size:7px;
  font-weight:900;
  letter-spacing:.7px;
}

.profile-crown{
  color:#f2b82b;
  font-size:16px;
}

.profile-user-icon{
  color:#8998b6;
  font-size:17px;
}

.profile-status-dot{
  width:9px;
  height:9px;
  flex:0 0 9px;
  border-radius:50%;
  background:#2bd270;
  box-shadow:0 0 10px rgba(43,210,112,.5);
}

.profile-role-tags{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:5px;
  margin-top:10px;
}

.profile-role-tag{
  padding:4px 7px;
  border:1px solid #26354b;
  border-radius:999px;
  background:#09111d;
  color:#7889a0;
  font-size:8px;
}

.profile-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid #1e2b3e;
}

.profile-actions button{
  min-height:43px;
  border-radius:10px;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}

.profile-secondary{
  border:1px solid #2c3c57;
  background:#09111d;
  color:#a2b1d5;
}

.profile-secondary:hover{
  background:#101a2a;
}

.profile-primary{
  border:1px solid #715aff;
  background:linear-gradient(
    135deg,
    #5f74ff,
    #8c42ed
  );
  color:#fff;
  box-shadow:0 8px 22px rgba(92,64,214,.18);
}

.profile-primary:hover{
  filter:brightness(1.08);
}

.profile-full{
  grid-column:1/-1;
}

.profile-admin{
  margin-top:9px;
}

.profile-admin-toggle{
  width:100%;
  min-height:31px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:#65758b;
  font-size:8px;
  cursor:pointer;
}

.profile-admin-toggle:hover{
  border-color:#223149;
  background:#09111d;
  color:#98a8bd;
}

.profile-role-editor{
  margin-top:7px;
  padding:11px;
  border:1px solid #233249;
  border-radius:10px;
  background:#09111d;
}

.profile-role-editor .role-toggle-grid{
  margin:8px 0 10px;
}

@media(max-width:650px){

  #memberModal .modal.wide{
    width:95vw;
  }

  .profile-cover{
    height:155px;
  }

  .profile-content{
    padding:8px 17px 22px;
  }

  .profile-avatar-wrap{
    margin-top:-50px;
  }

  .profile-avatar-wrap .avatar.xl{
    width:88px;
    height:88px;
  }

  .profile-rok-grid{
    grid-template-columns:1fr 1fr;
  }

  .profile-info-grid{
    grid-template-columns:1fr;
  }

  .profile-actions{
    grid-template-columns:1fr;
  }
}

/* ROKSS_PROFILE_UI_V1 END */


/* ROKSS VIP BANNER CONTROLS V1 */

.profile-vip-controls{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}

.profile-vip-cover-btn{
  min-height:30px;
  padding:0 9px;
  border:1px solid rgba(138,104,255,.38);
  border-radius:7px;
  background:rgba(100,72,190,.14);
  color:#cfc5ff;
  font-size:8px;
  font-weight:900;
  cursor:pointer;
  transition:
    background .15s ease,
    border-color .15s ease;
}

.profile-vip-cover-btn:hover{
  background:rgba(109,77,213,.25);
  border-color:rgba(154,121,255,.58);
}

.profile-vip-cover-btn:disabled{
  opacity:.55;
  cursor:wait;
}

.profile-vip-cover-btn.danger{
  border-color:rgba(225,83,112,.25);
  background:rgba(128,42,63,.08);
  color:#dc8fa0;
}

.profile-vip-cover-btn.danger:hover{
  background:rgba(159,48,74,.16);
}

@media(max-width:650px){
  .profile-vip-controls{
    width:100%;
    margin-left:53px;
  }

  .profile-vip-cover-btn{
    flex:1;
  }
}

/* ROKSS VIP BANNER CONTROLS V1 END */



/* ROKSS PROFILE SETTINGS V3 */

/*
 * Profil kartinda banner degistirme
 * butonlari artik gosterilmez.
 */

#memberModal
.profile-vip-controls{
  display:none !important;
}


/* SETTINGS BANNER */

.vip-profile-banner-panel{
  margin:14px 0;

  padding:15px;

  border:
    1px solid
    #273850;

  border-radius:
    15px;

  background:
    linear-gradient(
      145deg,
      #0c1524,
      #11182a
    );
}


.vip-profile-banner-head{
  display:flex;

  align-items:flex-start;

  justify-content:
    space-between;

  gap:12px;

  margin-bottom:
    11px;
}


.vip-profile-banner-head
span{
  display:block;

  margin-bottom:3px;

  color:#9c85ff;

  font-size:8px;

  font-weight:900;

  letter-spacing:1.3px;
}


.vip-profile-banner-head
strong{
  display:block;

  color:#eef2f8;

  font-size:13px;
}


.vip-profile-banner-head
p{
  margin:4px 0 0;

  color:#75859b;

  font-size:9px;
}


.vip-profile-banner-head>b{
  padding:4px 7px;

  border-radius:6px;

  background:
    linear-gradient(
      135deg,
      #6173ff,
      #9144ef
    );

  color:#fff;

  font-size:7px;
}


.vip-profile-banner-preview{
  position:relative;

  height:145px;

  overflow:hidden;

  border:
    1px solid
    #293a55;

  border-radius:
    11px;

  background:
    radial-gradient(
      circle at 75% 20%,
      rgba(105,78,255,.26),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #17243a,
      #191633
    );

  background-size:cover;

  background-position:center;
}


.vip-profile-banner-placeholder{
  position:absolute;

  inset:0;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:4px;

  color:#77879e;
}


.vip-profile-banner-preview.has-image
.vip-profile-banner-placeholder{
  display:none;
}


.vip-profile-banner-placeholder
span{
  color:#a08cff;

  font-size:21px;
}


.vip-profile-banner-placeholder
strong{
  color:#9facbf;

  font-size:10px;
}


.vip-profile-banner-placeholder
small{
  font-size:8px;
}


.vip-profile-banner-locked{
  display:flex;

  align-items:center;

  gap:9px;

  margin-top:9px;

  padding:9px 10px;

  border:
    1px solid
    rgba(127,92,229,.23);

  border-radius:9px;

  background:
    rgba(100,68,190,.07);
}


.vip-profile-banner-locked>span{
  color:#a18dff;
}


.vip-profile-banner-locked
strong,
.vip-profile-banner-locked
small{
  display:block;
}


.vip-profile-banner-locked
strong{
  color:#c7bcff;

  font-size:9px;
}


.vip-profile-banner-locked
small{
  margin-top:2px;

  color:#738098;

  font-size:8px;
}


.vip-profile-banner-actions{
  display:flex;

  justify-content:flex-end;

  gap:7px;

  margin-top:10px;
}


.vip-profile-banner-actions
button{
  min-height:33px;

  padding:0 11px;
}


.vip-profile-banner-remove{
  border:
    1px solid
    rgba(220,80,109,.3);

  border-radius:8px;

  background:
    rgba(130,39,61,.09);

  color:#de8b9d;

  font-size:9px;

  font-weight:900;

  cursor:pointer;
}

/* ROKSS PROFILE SETTINGS V3 END */

/* ROKSS_STREAM_UI_V9 */

.rokss-stream-inline-actions{
  margin-top:3px !important;
  gap:6px !important;
}

.rokss-stream-inline-actions > b{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 6px;
  border-radius:6px;
  background:rgba(255,70,90,.12);
  border:1px solid rgba(255,70,90,.26);
  color:#ff6675 !important;
  letter-spacing:.3px;
}

.rokss-stream-inline-actions button{
  border:1px solid rgba(126,104,255,.35) !important;
  background:rgba(110,88,255,.16) !important;
  color:#c8c0ff !important;
  transition:.15s ease;
}

.rokss-stream-inline-actions button:hover{
  background:rgba(110,88,255,.30) !important;
  transform:translateY(-1px);
}

/* ROKSS_STREAM_UI_V9 END */


/* ROKSS_AI_STRENGTH_UI_V1 */

.rokss-ai-strength-box{
  padding:10px 12px 12px;
  margin-top:8px;
  border-top:1px solid rgba(255,255,255,.07);
}

.rokss-ai-strength-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
  font-size:11px;
}

.rokss-ai-strength-head span{
  color:#b9c3d6;
  font-weight:700;
}

.rokss-ai-strength-head b{
  color:#7fe3ba;
  font-size:11px;
}

#voiceAiStrengthSlider{
  --rokss-ai-value:72%;
  width:100%;
  height:5px;
  appearance:none;
  border:0;
  border-radius:999px;
  outline:none;
  cursor:pointer;
  background:
    linear-gradient(
      to right,
      #41c994 0%,
      #41c994 var(--rokss-ai-value),
      #263247 var(--rokss-ai-value),
      #263247 100%
    );
}

#voiceAiStrengthSlider::-webkit-slider-thumb{
  appearance:none;
  width:15px;
  height:15px;
  border-radius:50%;
  background:#eaf2ff;
  border:3px solid #48ce9b;
  box-shadow:0 0 0 3px rgba(72,206,155,.12);
}

#voiceAiStrengthSlider::-moz-range-thumb{
  width:11px;
  height:11px;
  border-radius:50%;
  background:#eaf2ff;
  border:3px solid #48ce9b;
}

.rokss-ai-strength-scale{
  display:flex;
  justify-content:space-between;
  margin-top:6px;
  color:#65738b;
  font-size:9px;
}

/* ROKSS_AI_STRENGTH_UI_V1 END */


/* ROKSS_AI_SLIDER_UI_V2 */

#rokssAiSliderV2{
  display:block !important;
  padding:10px 12px 12px;
  margin-top:7px;
  border-top:1px solid rgba(255,255,255,.07);
}

#voiceAiStrengthSliderV2{
  --rokss-ai-value:72%;
  display:block;
  width:100%;
  height:5px;
  margin:8px 0 0;
  appearance:none;
  border:0;
  border-radius:999px;
  cursor:pointer;
  outline:none;
  background:linear-gradient(
    to right,
    #45cf9b 0%,
    #45cf9b var(--rokss-ai-value),
    #263247 var(--rokss-ai-value),
    #263247 100%
  );
}

#voiceAiStrengthSliderV2::-webkit-slider-thumb{
  appearance:none;
  width:15px;
  height:15px;
  border-radius:50%;
  background:#f5f8ff;
  border:3px solid #45cf9b;
  cursor:grab;
}

.rokss-ai-strength-head,
.rokss-ai-strength-scale{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.rokss-ai-strength-head{
  font-size:10px;
  font-weight:800;
}

.rokss-ai-strength-head b{
  color:#62d9aa;
}

.rokss-ai-strength-scale{
  margin-top:6px;
  font-size:8px;
  color:#708099;
}

.voice-noise-popover{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}

/* ROKSS_AI_SLIDER_UI_V2 END */


/* ROKSS_TOP_VIP_UI_V2 */

#livePill{
  display:none !important;
}

.rokss-top-vip-badge{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  margin-left:8px;
  padding:3px 7px;
  border-radius:999px;

  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.7px;

  color:#ffeaa7;

  background:
    linear-gradient(
      135deg,
      rgba(107,83,255,.95),
      rgba(167,91,255,.95) 58%,
      rgba(216,169,65,.95)
    );

  border:1px solid rgba(255,213,105,.48);

  box-shadow:
    0 0 14px rgba(129,83,255,.32),
    inset 0 1px 0 rgba(255,255,255,.18);

  vertical-align:middle;
}

/* ROKSS_TOP_VIP_UI_V2 END */


/* ROKSS_TOP_VIP_FINAL_UI_V6 */

.brand-wordmark{
  display:flex;
  align-items:center;
}

#rokssTopVipBadge{
  align-items:center !important;
  justify-content:center !important;

  margin-left:8px !important;
  padding:4px 8px !important;

  border-radius:999px !important;

  font-size:9px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:.7px !important;

  color:#ffe9a6 !important;

  background:
    linear-gradient(
      135deg,
      #624cff,
      #a65bff 58%,
      #d9a641
    ) !important;

  border:
    1px solid rgba(255,211,100,.58) !important;

  box-shadow:
    0 0 15px rgba(128,82,255,.42) !important;
}

/* ROKSS_TOP_VIP_FINAL_UI_V6 END */


/* ROKSS_VIP_CENTER_UI_V1 */

.rokss-vip-center-backdrop{
  position:fixed;
  inset:0;
  z-index:120000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(3,6,14,.78);
  backdrop-filter:blur(9px);
}

.rokss-vip-center-backdrop.hidden{
  display:none !important;
}

.rokss-vip-center{
  position:relative;
  width:min(780px,94vw);
  max-height:88vh;
  overflow:auto;
  padding:24px;
  border-radius:22px;
  background:#0e1726;
  border:1px solid rgba(125,103,255,.32);
  box-shadow:0 35px 100px rgba(0,0,0,.65);
}

.rokss-vip-close{
  position:absolute;
  top:15px;
  right:15px;
  width:38px;
  height:38px;
  border-radius:10px;
  border:1px solid #29364c;
  background:#121d2e;
  color:#c7d1e3;
  cursor:pointer;
}

.rokss-vip-hero{
  display:flex;
  align-items:center;
  gap:16px;
  padding:15px 48px 22px 2px;
}

.rokss-vip-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  flex:0 0 58px;
  border-radius:17px;
  font-size:25px;
  color:#ffe8a2;
  background:linear-gradient(135deg,#5c49ff,#a85eff,#d4a446);
  box-shadow:0 0 28px rgba(126,83,255,.38);
}

.rokss-vip-hero-copy{
  flex:1;
}

.rokss-vip-kicker{
  display:block;
  margin-bottom:3px;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.8px;
  color:#9d90ff;
}

.rokss-vip-hero h2{
  margin:0;
  font-size:27px;
}

.rokss-vip-hero p{
  max-width:470px;
  margin:6px 0 0;
  color:#8491a8;
  font-size:12px;
  line-height:1.55;
}

.rokss-vip-price{
  display:flex;
  align-items:flex-end;
  gap:4px;
}

.rokss-vip-price strong{
  font-size:27px;
  color:#ffe09a;
}

.rokss-vip-price span{
  padding-bottom:4px;
  color:#818da3;
  font-size:11px;
}

.rokss-vip-status{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 15px;
  margin-bottom:14px;
  border-radius:13px;
}

.rokss-vip-status.active{
  background:rgba(55,199,139,.10);
  border:1px solid rgba(55,199,139,.27);
}

.rokss-vip-status.locked{
  background:rgba(137,103,255,.10);
  border:1px solid rgba(137,103,255,.27);
}

.rokss-vip-status > span{
  font-size:18px;
}

.rokss-vip-status strong,
.rokss-vip-status small{
  display:block;
}

.rokss-vip-status small{
  margin-top:2px;
  color:#8592a7;
  font-size:10px;
}

.rokss-vip-features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.rokss-vip-feature{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:70px;
  padding:12px;
  border-radius:13px;
  border:1px solid #26344b;
  background:#111c2c;
}

.rokss-vip-feature.featured{
  border-color:rgba(143,108,255,.42);
  background:
    linear-gradient(
      135deg,
      rgba(102,78,255,.12),
      #111c2c
    );
}

.rokss-vip-feature-icon{
  font-size:19px;
}

.rokss-vip-feature div{
  flex:1;
}

.rokss-vip-feature strong,
.rokss-vip-feature small{
  display:block;
}

.rokss-vip-feature small{
  margin-top:3px;
  color:#7f8ca4;
  font-size:10px;
}

.rokss-vip-feature > b{
  padding:3px 6px;
  border-radius:6px;
  font-size:8px;
  color:#ffe9a5;
  background:rgba(174,112,255,.15);
  border:1px solid rgba(222,176,82,.28);
}

.rokss-vip-main-btn{
  width:100%;
  margin-top:14px;
  padding:13px;
  border:0;
  border-radius:12px;
  color:#fff;
  font-weight:900;
  cursor:pointer;
  background:linear-gradient(135deg,#604cff,#a55bff);
  box-shadow:0 12px 30px rgba(99,74,255,.24);
}

@media(max-width:700px){
  .rokss-vip-features{
    grid-template-columns:1fr;
  }

  .rokss-vip-price{
    display:none;
  }
}

/* ROKSS_VIP_CENTER_UI_V1 END */


/* ROKSS_PROFILE_VIP_OPTIONS_UI_V1 */

.rokss-profile-vip-options{
  margin-top:14px;
  padding:14px;
  border-radius:15px;
  border:1px solid #26354d;
  background:#101a2a;
}

.rokss-profile-vip-options-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.rokss-profile-vip-options-head div{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.rokss-profile-vip-options-head span{
  font-size:8px;
  font-weight:900;
  letter-spacing:1.5px;
  color:#9e8cff;
}

.rokss-profile-vip-options-head strong{
  font-size:13px;
}

.rokss-profile-vip-options-head > b{
  padding:3px 7px;
  border-radius:6px;
  font-size:8px;
  color:#ffe7a2;
  border:1px solid rgba(229,181,79,.35);
  background:rgba(143,95,255,.16);
}

.rokss-profile-vip-grid{
  display:grid;
  gap:7px;
}

.rokss-profile-vip-option{
  width:100%;
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 12px;

  border:1px solid #283750;
  border-radius:11px;

  background:#111c2c;
  color:#eaf0fa;

  text-align:left;
  cursor:pointer;

  transition:
    border-color .15s,
    background .15s,
    transform .15s;
}

.rokss-profile-vip-option:hover{
  transform:translateY(-1px);
  border-color:rgba(134,105,255,.55);
  background:#142035;
}

.rokss-profile-vip-icon{
  width:30px;
  height:30px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 30px;

  border-radius:8px;

  background:
    linear-gradient(
      135deg,
      rgba(100,76,255,.22),
      rgba(177,91,255,.12)
    );
}

.rokss-profile-vip-option > span:nth-child(2){
  flex:1;
}

.rokss-profile-vip-option strong,
.rokss-profile-vip-option small{
  display:block;
}

.rokss-profile-vip-option strong{
  font-size:11px;
}

.rokss-profile-vip-option small{
  margin-top:2px;
  color:#7e8ca5;
  font-size:9px;
}

.rokss-profile-vip-option em{
  padding:3px 6px;
  border-radius:6px;

  font-size:7px;
  font-style:normal;
  font-weight:900;
}

.rokss-profile-vip-option em.locked{
  color:#ffe49b;
  border:1px solid rgba(226,176,73,.32);
  background:rgba(149,94,255,.15);
}

.rokss-profile-vip-option em.active{
  color:#78e4b4;
  border:1px solid rgba(67,203,144,.28);
  background:rgba(67,203,144,.10);
}

/* ROKSS_PROFILE_VIP_OPTIONS_UI_V1 END */

/* ROKSS_SETTINGS_VIP_MENU_V1 */
.rokss-settings-menu-item{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
}

.rokss-settings-menu-item:hover{
  filter:brightness(1.08);
}

.rokss-settings-vip-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  color:#ffd98a;
  background:linear-gradient(135deg,rgba(104,91,255,.22),rgba(181,94,255,.18));
  border:1px solid rgba(174,138,255,.45);
  box-shadow:0 0 18px rgba(135,92,255,.16);
  flex:none;
}
/* ROKSS_SETTINGS_VIP_MENU_V1 END */


/* ROKSS STREAM MINI PLAYER V1 */

.rokss-stream-mini{
  position:fixed !important;
  width:min(380px,calc(100vw - 28px)) !important;
  height:235px !important;
  max-width:none !important;
  max-height:none !important;
  z-index:100000 !important;
  box-shadow:0 20px 60px rgba(0,0,0,.62) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  touch-action:none;
}

.rokss-stream-mini video{
  max-height:calc(100% - 42px) !important;
}

.rokss-mini-expand{
  display:none;
}

.rokss-stream-mini .rokss-mini-expand{
  display:flex;
  position:absolute;
  right:52px;
  top:8px;
  width:34px;
  height:34px;
  z-index:100002;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:#121c2e;
  color:#fff;
  cursor:pointer;
  font-size:18px;
}

@media(max-width:700px){

  .rokss-stream-mini{
    width:min(320px,calc(100vw - 20px)) !important;
    height:200px !important;
  }

}

/* ROKSS STREAM MINI PLAYER V1 END */


/* ROKSS NUMERIC VERIFY INPUT V1 */

.rok-code-input-wrap{
  display:flex;
  align-items:stretch;
  width:100%;
  margin:10px 0;
  overflow:hidden;
  border:1px solid #293852;
  border-radius:12px;
  background:#0b1423;
}

.rok-code-input-wrap:focus-within{
  border-color:#7664ff;
  box-shadow:0 0 0 3px rgba(118,100,255,.12);
}

.rok-code-prefix{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border-right:1px solid #293852;
  background:rgba(118,100,255,.10);
  color:#a99dff;
  font-weight:900;
  letter-spacing:.04em;
  user-select:none;
}

.rok-code-input-wrap .rok-code-number{
  flex:1;
  min-width:0;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:0 !important;
  font-weight:800;
  letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
}

/* ROKSS NUMERIC VERIFY INPUT V1 END */