:root {
  --ink: #171421;
  --muted: #7d778a;
  --line: #e9e7ee;
  --soft: #f7f6fa;
  --paper: #ffffff;
  --sidebar: #0b0913;
  --sidebar-2: #141023;
  --violet: #8e2dff;
  --violet-2: #b43dff;
  --electric: #5a7cff;
  --cyan: #62d7ef;
  --good: #149c6b;
  --danger: #ec385a;
  --warning: #ef9b31;
  --shadow: 0 14px 42px rgba(23, 18, 37, .09);
  --radius: 20px;
  --font-display: Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #fbfafc; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); font-family: var(--font-body); background: #fbfafc; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .54; }
a { color: inherit; }
img { max-width: 100%; }
.hidden { display: none !important; }
.noscript { padding: 18px; text-align: center; font-weight: 800; color: #fff; background: #111; }

/* icon system */
.icon { width: 18px; height: 18px; flex: 0 0 auto; display: block; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.icon.fill { fill: currentColor; stroke: none; }

/* auth */
.auth-shell { min-height: 100svh; display: grid; grid-template-columns: minmax(470px, 41%) 1fr; background: #fff; }
.auth-panel { min-height: 100svh; padding: clamp(26px, 5vw, 76px); display: flex; flex-direction: column; position: relative; z-index: 2; overflow: auto; background: #fff; }
.auth-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.auth-logo { display: inline-flex; align-items: center; width: 144px; min-height: 43px; }
.auth-logo img { width: 100%; display: block; }
.language-switch { display: inline-flex; overflow: hidden; background: #fff; border: 1px solid #e6e3eb; border-radius: 11px; box-shadow: 0 4px 14px rgba(25, 21, 41, .05); }
.lang-button { min-width: 62px; min-height: 36px; padding: 8px 11px; border: 0; color: #9993a4; background: #fff; font-size: 11px; font-weight: 700; letter-spacing: .025em; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: color .18s ease, background .18s ease; }
.lang-button + .lang-button { border-left: 1px solid #ece9f0; }
.lang-button:hover { color: #514a5d; background: #faf9fc; }
.lang-flag { width: 20px; height: 14px; flex: 0 0 auto; display: block; overflow: hidden; border-radius: 3px; box-shadow: 0 0 0 1px rgba(25, 21, 41, .10), 0 2px 4px rgba(25, 21, 41, .08); }
.lang-button.is-active { color: #181421; background: #f8f7fb; font-weight: 800; }
.auth-content { width: min(100%, 430px); margin: auto; padding: 40px 0; }
.auth-eyebrow { color: #7554e4; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .15em; margin-bottom: 13px; }
.auth-content h1 { margin: 0; font-family: var(--font-display); font-size: clamp(36px, 4vw, 52px); font-weight: 700; letter-spacing: .04em; line-height: 1; }
.auth-content > p { color: #9993a5; font-family: var(--font-body); font-size: 14px; line-height: 1.6; margin: 12px 0 26px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; border-radius: 15px; background: #f1f0f5; margin-bottom: 25px; }
.auth-tab { border: 0; border-radius: 11px; color: #9993a5; padding: 13px 9px; font-size: 12px; font-weight: 900; background: transparent; }
.auth-tab.is-active { color: #191528; background: #fff; box-shadow: 0 3px 10px rgba(31, 25, 46, .11); }
.form-stack { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field > label, .field-label { font-size: 11px; font-weight: 900; color: #878092; letter-spacing: .055em; text-transform: uppercase; }
.control { position: relative; display: flex; align-items: center; min-height: 54px; border: 1px solid #e1dfe8; border-radius: 15px; background: #fff; transition: border .2s, box-shadow .2s; }
.control:focus-within { border-color: rgba(134, 75, 255, .65); box-shadow: 0 0 0 4px rgba(143, 54, 255, .10); }
.control .icon { color: #ada6b8; margin-left: 16px; }
.control input, .control select, .control textarea { min-width: 0; width: 100%; outline: none; border: 0; color: #251f34; background: transparent; padding: 14px 15px; font-size: 14px; font-weight: 700; }
.control input::placeholder, textarea::placeholder { color: #b6b0c0; font-weight: 600; }
.control select { appearance: none; }
.control textarea { resize: vertical; min-height: 95px; line-height: 1.5; }
.password-toggle { border: 0; color: #b0a9bb; background: transparent; margin-right: 12px; padding: 7px; }
.field-help { margin: -1px 3px 0; color: #9a94a5; font-size: 11px; line-height: 1.5; }
.field-help.good { color: var(--good); font-weight: 700; }
.auth-primary, .primary-button { border: 0; min-height: 54px; border-radius: 15px; padding: 0 20px; color: #fff; background: linear-gradient(100deg, #7440ff, #a733ff 52%, #58cdec); box-shadow: 0 14px 26px rgba(108, 65, 242, .22); font-weight: 900; display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: transform .16s ease, box-shadow .16s ease; }
.auth-primary:hover, .primary-button:hover { transform: translateY(-1px); box-shadow: 0 18px 32px rgba(108, 65, 242, .28); }
.auth-message { min-height: 19px; color: var(--danger); font-size: 12px; font-weight: 700; line-height: 1.4; }
.auth-message.good { color: var(--good); }
.auth-divider { display: flex; align-items: center; gap: 12px; color: #b4adbe; font-size: 11px; font-weight: 800; }
.auth-divider:before, .auth-divider:after { content: ''; height: 1px; flex: 1; background: #eeedf2; }
.license-gate { padding: 18px; border: 1px dashed #d8d2e5; border-radius: 16px; background: #fbfaff; }
.license-gate > p { margin: 0 0 12px; color: #766f82; font-size: 12px; line-height: 1.5; }
.avatar-upload { display: flex; align-items: center; gap: 13px; padding: 12px; border: 1px dashed #d9d3e4; border-radius: 15px; color: #756e81; font-size: 12px; font-weight: 700; background: #fdfcff; }
.avatar-preview { width: 43px; height: 43px; flex: 0 0 auto; overflow: hidden; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #8e2dff, #58cdec); display: grid; place-items: center; font-size: 15px; font-weight: 900; }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload input { max-width: 210px; font-size: 11px; }
.auth-note { margin-top: 24px; color: #9c95a7; text-align: center; font-size: 11px; line-height: 1.55; }
.auth-visual { overflow: hidden; position: relative; min-height: 100svh; color: #fff; background: radial-gradient(circle at 77% 17%, rgba(177, 42, 255, .52), transparent 23%), radial-gradient(circle at 21% 88%, rgba(62, 166, 255, .32), transparent 28%), linear-gradient(135deg, #080710 2%, #11102a 50%, #0c0d1b); }
.visual-grid { position: absolute; inset: 0; opacity: .24; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, transparent, black 18%, black 85%, transparent); }
.visual-blob { position: absolute; width: 470px; height: 470px; filter: blur(4px); border-radius: 50%; opacity: .62; background: linear-gradient(135deg, rgba(238, 52, 255,.65), rgba(94, 127, 255,.10)); right: -160px; top: -120px; }
.visual-content { position: relative; z-index: 1; max-width: 760px; min-height: 100%; padding: clamp(44px, 7vw, 98px); display: flex; flex-direction: column; justify-content: center; }
.visual-kicker { display: inline-flex; width: max-content; padding: 7px 11px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.75); background: rgba(255,255,255,.05); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.visual-content h2 { margin: 20px 0 13px; max-width: 540px; font-family: var(--font-display); font-size: clamp(52px, 6vw, 88px); font-weight: 700; letter-spacing: .05em; line-height: .92; }
.visual-content > p { max-width: 500px; margin: 0; color: rgba(255,255,255,.65); font-size: 15px; line-height: 1.7; }
.visual-board { margin-top: 46px; width: min(100%, 640px); border: 1px solid rgba(255,255,255,.15); border-radius: 24px; padding: 16px; background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); box-shadow: 0 30px 100px rgba(0,0,0,.35); transform: rotate(-2deg); backdrop-filter: blur(14px); }
.visual-board-top { display: flex; justify-content: space-between; align-items: center; padding: 2px 2px 14px; color: rgba(255,255,255,.75); font-size: 11px; font-weight: 800; }
.visual-dots { display: flex; gap: 5px; }
.visual-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); }
.visual-board-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; }
.visual-card { min-height: 116px; padding: 15px; border: 1px solid rgba(255,255,255,.10); border-radius: 16px; background: rgba(7,7,20,.55); }
.visual-card.big { grid-row: span 2; min-height: 245px; }
.visual-card strong { display: block; font-size: 12px; margin-bottom: 9px; }
.visual-line { height: 8px; border-radius: 99px; margin-top: 9px; background: linear-gradient(90deg, rgba(255,255,255,.75), rgba(255,255,255,.14)); }
.visual-line.short { width: 58%; }
.visual-live { margin-top: 30px; display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.76); font-size: 12px; font-weight: 800; }
.visual-live b { width: 8px; height: 8px; border-radius: 50%; background: #ff4b68; box-shadow: 0 0 0 5px rgba(255,75,104,.13); }

/* app shell */
.app-shell { min-height: 100svh; display: grid; grid-template-columns: 268px minmax(0, 1fr); background: #f8f7fa; }
.sidebar { position: sticky; top: 0; height: 100svh; padding: 22px 15px 16px; color: rgba(255,255,255,.78); background: radial-gradient(circle at 85% 8%, rgba(181,52,255,.22), transparent 22%), linear-gradient(180deg, #0d0b15, #090810); display: flex; flex-direction: column; z-index: 20; }
.sidebar-brand { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 10px 21px; }
.sidebar-brand img { width: 128px; display: block; }
.sidebar-badge { color: #c9b5ff; background: rgba(169, 71, 255, .16); border: 1px solid rgba(189, 97, 255, .24); padding: 5px 8px; border-radius: 9px; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.sidebar-user { margin: 0 5px 17px; padding: 11px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(255,255,255,.045); }
.sidebar-user-copy { min-width: 0; display: grid; gap: 2px; }
.sidebar-user-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 12px; }
.sidebar-user-copy span { color: rgba(255,255,255,.48); font-size: 10px; font-weight: 700; }
.role-pill { width: max-content; display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: .04em; }
.role-pill.todu { color: #fde047; background: var(--role-todu-bg); border: 1px solid var(--role-todu-border); }
.role-pill.admin { color: #cffafe; background: var(--role-admin-bg); border: 1px solid var(--role-admin-border); }
.role-pill.moderator { color: #dcfce7; background: var(--role-mod-bg); border: 1px solid var(--role-mod-border); }
.role-name.is-todu { color: var(--role-todu); font-weight: 800; }
.role-name.is-admin { color: var(--role-admin); font-weight: 800; }
.role-name.is-moderator { color: var(--role-mod); font-weight: 800; }
td .subline .role-name.is-todu { color: var(--role-todu); font-weight: 700; }
td .subline .role-name.is-admin { color: var(--role-admin); font-weight: 700; }
td .subline .role-name.is-moderator { color: var(--role-mod); font-weight: 700; }
.sidebar-nav { display: grid; gap: 4px; overflow-y: auto; padding: 0 2px 14px; }
.nav-caption { padding: 16px 11px 5px; color: rgba(255,255,255,.30); font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.nav-item { width: 100%; min-height: 44px; padding: 0 11px; border: 1px solid transparent; border-radius: 13px; color: rgba(255,255,255,.64); background: transparent; display: flex; align-items: center; gap: 11px; font-size: 12px; font-weight: 800; text-align: left; }
.nav-item .icon { width: 18px; color: rgba(255,255,255,.47); }
.nav-item em { min-width: 19px; height: 19px; margin-left: auto; padding: 0 5px; border-radius: 7px; color: #fff; background: rgba(255,255,255,.12); display: inline-grid; place-items: center; font-style: normal; font-size: 9px; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.055); }
.nav-item.is-active { color: #fff; border-color: rgba(185,88,255,.22); background: linear-gradient(90deg, rgba(155,56,255,.24), rgba(255,255,255,.035)); box-shadow: inset 3px 0 0 #b63aff; }
.nav-item.is-active .icon { color: #d776ff; }
.sidebar-footer { margin-top: auto; display: grid; gap: 10px; padding: 10px 5px 0; }
.live-mini { padding: 10px 11px; border-radius: 13px; color: rgba(255,255,255,.57); background: rgba(255,255,255,.045); font-size: 10px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.live-mini b { width: 8px; height: 8px; border-radius: 50%; background: #ff4563; box-shadow: 0 0 0 4px rgba(255,69,99,.12); }
.logout-button { min-height: 42px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; color: rgba(255,255,255,.7); background: rgba(255,255,255,.03); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 11px; font-weight: 800; }
.logout-button:hover { color: #fff; background: rgba(255,255,255,.08); }
.main-area { min-width: 0; padding: 26px clamp(18px, 3.1vw, 48px) 45px; }
.topbar { min-height: 59px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 24px; }
.topbar-left { display: flex; min-width: 0; align-items: center; gap: 13px; }
.mobile-menu { display: none; }
.crumb { color: #8b8593; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.topbar h1 { margin: 3px 0 0; font-family: var(--font-display); font-size: clamp(28px, 2.8vw, 40px); font-weight: 700; letter-spacing: .04em; line-height: 1; }
.topbar-right { position: relative; display: flex; align-items: center; gap: 9px; }
.icon-button { width: 42px; height: 42px; border: 1px solid #e4e2e9; border-radius: 13px; color: #625d6d; background: #fff; display: inline-grid; place-items: center; position: relative; box-shadow: 0 3px 10px rgba(26, 20, 38, .03); }
.icon-button:hover { color: #5015c5; border-color: #cfc5ed; }
.notification-badge { position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px; padding: 0 4px; border: 2px solid #f8f7fa; border-radius: 999px; color: #fff; background: var(--danger); font-size: 9px; font-weight: 900; display: grid; place-items: center; }
.top-avatar { width: 42px; height: 42px; overflow: hidden; border: 1px solid #ddd7e8; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #8d2cff, #59c7ef); display: grid; place-items: center; font-size: 13px; font-weight: 900; }
.top-avatar img, .avatar img { width: 100%; height: 100%; object-fit: cover; }
.workspace { max-width: 1600px; margin: 0 auto; }
.page-subtitle { margin: 0 0 24px; color: #857e8f; font-size: 13px; line-height: 1.6; }

/* reusable components */
.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { min-width: 0; border: 1px solid #e8e6ed; border-radius: var(--radius); background: #fff; box-shadow: 0 7px 23px rgba(25, 20, 41, .035); }
.card.pad { padding: 22px; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.card-head h2, .card-head h3 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: .03em; }
.card-head h2 { font-size: clamp(24px, 2vw, 32px); line-height: 1.05; }
.card-head h3 { font-size: clamp(20px, 1.6vw, 26px); line-height: 1.08; }
.card-head p { font-family: var(--font-body); }
.card-head h2 { font-size: 19px; }
.card-head h3 { font-size: 15px; }
.card-head p { margin: 6px 0 0; color: #918a9b; font-size: 11px; line-height: 1.55; }
.card-head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.stat-card { position: relative; overflow: hidden; min-height: 144px; padding: 20px; border: 1px solid #e8e6ef; border-radius: 18px; background: #fff; box-shadow: 0 7px 22px rgba(30, 23, 44, .035); }
.stat-card:after { content: ''; width: 100px; height: 100px; position: absolute; top: -40px; right: -28px; border-radius: 50%; background: radial-gradient(circle, rgba(181,64,255,.17), rgba(94,211,239,0)); }
.stat-kicker { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #8b8495; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.stat-icon { width: 34px; height: 34px; border-radius: 11px; color: #7030e8; background: #f1eaff; display: grid; place-items: center; }
.stat-value { position: relative; z-index: 1; margin-top: 18px; font-family: var(--font-display); font-size: 31px; font-weight: 700; letter-spacing: -.05em; }
.stat-note { position: relative; z-index: 1; margin-top: 5px; color: #9a93a4; font-size: 11px; font-weight: 700; }
.live-stat .stat-icon { color: #e33d59; background: #fff0f2; }
.live-stat .stat-value { color: #dc3352; }
.mini-button, .ghost-button, .danger-button, .outline-button { min-height: 34px; border-radius: 10px; padding: 0 11px; border: 1px solid #e0dde7; color: #5f5969; background: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 10px; font-weight: 900; }
.mini-button:hover, .ghost-button:hover, .outline-button:hover { color: #5925cf; border-color: #cfc2f6; background: #fbfaff; }
.danger-button { color: #d72e4c; border-color: #ffd1da; background: #fff7f8; }
.danger-button:hover { background: #fff0f3; }
.primary-small { min-height: 35px; border: 0; border-radius: 10px; padding: 0 12px; color: #fff; background: linear-gradient(100deg,#7a40f5,#ab35f7); display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 10px; font-weight: 900; }
.primary-small:hover { filter: brightness(1.04); }
.pill { width: max-content; max-width: 100%; padding: 5px 8px; border-radius: 999px; font-size: 9px; font-weight: 900; line-height: 1; }
.pill.green { color: #08744b; background: #dcf7eb; }
.pill.red { color: #c52744; background: #ffe5eb; }
.pill.orange { color: #ad6211; background: #fff0db; }
.pill.blue { color: #2551b0; background: #e4eeff; }
.pill.purple { color: #6e27cc; background: #f0e4ff; }
.muted { color: #928b9b; }
.small { font-size: 11px; }
.empty-state { min-height: 160px; padding: 28px; display: grid; place-items: center; text-align: center; color: #928b9d; font-size: 12px; line-height: 1.65; }
.empty-state .icon { width: 28px; height: 28px; margin: 0 auto 9px; color: #ab9fc2; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }
.app-field { display: grid; gap: 6px; }
.app-field label { color: #857e8d; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.app-control { min-height: 42px; width: 100%; outline: none; border: 1px solid #e2dfe8; border-radius: 11px; color: #282231; background: #fff; padding: 10px 11px; font-size: 12px; font-weight: 700; transition: box-shadow .18s, border .18s; }
textarea.app-control { min-height: 90px; resize: vertical; line-height: 1.5; }
.app-control:focus { border-color: #aa80ff; box-shadow: 0 0 0 3px rgba(147, 70, 255, .10); }
.file-control { display: flex; min-height: 42px; align-items: center; gap: 9px; padding: 8px 10px; border: 1px dashed #d6cfdf; border-radius: 11px; color: #8a8294; background: #fdfcff; font-size: 11px; font-weight: 700; }
.file-control input { max-width: 220px; font-size: 10px; }
.table-wrap { overflow: auto; border: 1px solid #eceaf0; border-radius: 15px; }
table { width: 100%; border-collapse: collapse; min-width: 670px; }
th { padding: 11px 13px; color: #958e9e; background: #faf9fb; border-bottom: 1px solid #eeeaf2; text-align: left; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
td { padding: 12px 13px; color: #453f4e; border-bottom: 1px solid #f0edf3; font-size: 11px; font-weight: 700; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td .subline { display: block; margin-top: 4px; color: #a39baa; font-size: 10px; font-weight: 600; }
.table-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.table-icon { width: 28px; height: 28px; padding: 0; border: 1px solid #e7e3ec; border-radius: 8px; color: #7f7789; background: #fff; display: grid; place-items: center; }
.table-icon .icon { width: 14px; height: 14px; }
.table-icon:hover { color: #6322d5; border-color: #cfbdf2; }
.table-icon.danger:hover { color: #d52e4a; border-color: #ffc8d2; }
.info-strip { display: flex; align-items: flex-start; gap: 9px; padding: 12px 13px; border-radius: 13px; color: #635b70; background: #f7f4ff; font-size: 11px; line-height: 1.55; }
.info-strip .icon { margin-top: 1px; color: #7c35e9; }

/* dashboard */
.dashboard-hero { position: relative; overflow: hidden; min-height: 245px; padding: 27px; border-radius: 22px; color: #fff; background: radial-gradient(circle at 85% 12%, rgba(211,62,255,.78), transparent 27%), radial-gradient(circle at 44% 140%, rgba(89,207,248,.28), transparent 38%), linear-gradient(120deg, #151020, #25123c 54%, #17264c); box-shadow: 0 18px 44px rgba(36, 22, 67, .18); }
.dashboard-hero:before { content: ''; position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(90deg, black, transparent); }
.dashboard-hero > * { position: relative; z-index: 1; }
.dashboard-hero h2 { max-width: 530px; margin: 5px 0 9px; font-family: var(--font-display); font-size: clamp(27px, 4vw, 39px); line-height: 1.05; letter-spacing: -.055em; }
.dashboard-hero p { max-width: 530px; margin: 0; color: rgba(255,255,255,.73); font-size: 12px; line-height: 1.65; }
.hero-eyebrow { font-size: 10px; font-weight: 900; letter-spacing: .14em; color: #d8a1ff; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 21px; }
.hero-live-button { min-height: 39px; border: 1px solid rgba(255,255,255,.2); border-radius: 11px; color: #fff; background: rgba(255,255,255,.08); padding: 0 13px; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 900; }
.hero-live-button.is-live { border-color: rgba(255,116,133,.56); color: #fff1f3; background: rgba(229, 54, 82, .32); }
.hero-live-button .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff6078; box-shadow: 0 0 0 4px rgba(255,96,120,.16); }
.hero-visual-mark { position: absolute; right: clamp(20px, 7vw, 95px); bottom: -35px; width: min(44%, 350px); opacity: .76; filter: drop-shadow(0 18px 28px rgba(0,0,0,.24)); transform: rotate(-3deg); }
.dashboard-columns { grid-template-columns: 1.12fr .88fr; align-items: start; }
.leader-item { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid #efedf2; }
.leader-item:last-child { border-bottom: 0; }
.rank { width: 23px; height: 23px; border-radius: 8px; color: #7546d0; background: #f0eaff; display: grid; place-items: center; font-size: 10px; font-weight: 900; }
.leader-info { min-width: 0; flex: 1; }
.leader-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.leader-info span { display: block; margin-top: 3px; color: #9992a2; font-size: 10px; }
.leader-score { color: #6522d8; font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.live-list { display: grid; gap: 10px; }
.live-person { padding: 11px; display: flex; align-items: center; gap: 10px; border: 1px solid #fee1e7; border-radius: 13px; background: #fff9fa; }
.live-person-info { min-width: 0; flex: 1; }
.live-person-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #392936; font-size: 11px; }
.live-person-info span { display: block; margin-top: 3px; color: #de3b57; font-size: 10px; font-weight: 800; }

/* chat */
.chat-layout { height: min(720px, calc(100svh - 155px)); min-height: 560px; display: grid; grid-template-columns: 245px minmax(0, 1fr); overflow: hidden; }
.chat-contacts { border-right: 1px solid #ebe8ef; background: #fdfcff; display: flex; flex-direction: column; }
.chat-contacts-head { padding: 17px 14px 12px; border-bottom: 1px solid #eeeaf1; }
.chat-contacts-head strong { display: block; font-family: var(--font-display); font-size: 15px; }
.chat-contacts-head span { display: block; margin-top: 4px; color: #9690a0; font-size: 10px; }
.chat-group-button, .contact-row { width: calc(100% - 16px); margin: 8px; padding: 10px; border: 1px solid transparent; border-radius: 12px; color: #585160; background: transparent; display: flex; align-items: center; gap: 9px; text-align: left; }
.chat-group-button.is-active, .contact-row.is-active { border-color: #dfcffd; color: #5021b8; background: #f7f1ff; }
.chat-group-button .icon { color: #8e36ee; }
.contact-list { min-height: 0; overflow: auto; padding: 0 0 12px; }
.contact-row { margin-top: 2px; margin-bottom: 2px; }
.contact-copy { min-width: 0; flex: 1; }
.contact-copy strong { display: flex; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.contact-copy span { display: block; margin-top: 3px; color: #a099a9; font-size: 9px; font-weight: 700; }
.online-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #c7c1ce; }
.online-dot.online { background: #20bc79; box-shadow: 0 0 0 3px rgba(32,188,121,.13); }
.online-dot.live { background: #ed3c59; box-shadow: 0 0 0 3px rgba(237,60,89,.13); }
.chat-main { min-width: 0; display: flex; flex-direction: column; background: #fff; }
.chat-head { min-height: 71px; padding: 13px 18px; border-bottom: 1px solid #ece9ef; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.chat-title { display: flex; align-items: center; min-width: 0; gap: 10px; }
.chat-title strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.chat-title span { display: block; margin-top: 3px; color: #9a94a3; font-size: 10px; }
.chat-messages { min-height: 0; flex: 1; padding: 20px; overflow-y: auto; background: linear-gradient(180deg, #fff, #fbfaff); }
.message-row { display: flex; gap: 9px; margin-bottom: 17px; align-items: flex-end; }
.message-row.mine { flex-direction: row-reverse; }
.message-row .message-body { max-width: min(78%, 620px); }
.message-meta { margin: 0 0 5px; color: #9b94a4; font-size: 9px; font-weight: 800; }
.message-row.mine .message-meta { text-align: right; }
.message-bubble { position: relative; padding: 10px 12px; border: 1px solid #ebe6f0; border-radius: 5px 14px 14px 14px; color: #423c4a; background: #fff; box-shadow: 0 4px 12px rgba(39, 28, 56, .04); font-size: 12px; font-weight: 700; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.message-row.mine .message-bubble { border: 0; border-radius: 14px 5px 14px 14px; color: #fff; background: linear-gradient(120deg, #7940e8, #a535ec); box-shadow: 0 9px 17px rgba(119, 63, 222, .20); }
.message-delete { width: 24px; height: 24px; padding: 0; margin-left: 5px; border: 0; border-radius: 8px; color: #a9a2b2; background: transparent; display: inline-grid; place-items: center; opacity: 0; }
.message-row:hover .message-delete { opacity: 1; }
.message-row.mine .message-delete { margin-left: 0; margin-right: 5px; }
.message-file { margin-top: 8px; padding: 8px 9px; border-radius: 9px; color: inherit; background: rgba(255,255,255,.15); display: flex; align-items: center; gap: 7px; text-decoration: none; font-size: 10px; font-weight: 900; }
.message-row:not(.mine) .message-file { color: #5b25cb; background: #f4efff; }
.typing-indicator { min-height: 18px; padding: 1px 20px; color: #8d849b; font-size: 10px; font-weight: 700; }
.chat-compose { padding: 12px; border-top: 1px solid #ece8ef; background: #fff; }
.chat-compose-row { display: flex; gap: 8px; align-items: flex-end; }
.chat-compose textarea { min-height: 45px; max-height: 110px; resize: vertical; flex: 1; }
.attach-label { width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid #e2dce9; border-radius: 11px; color: #7c7487; background: #fff; display: grid; place-items: center; }
.attach-label input { display: none; }
.send-button { width: 43px; height: 43px; flex: 0 0 auto; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #7a3df5, #b237ee); display: grid; place-items: center; }
.chat-limits { margin: 8px 2px 0; color: #a199aa; font-size: 9px; font-weight: 700; }

/* lists */
.ticket-list, .reward-list, .note-list { display: grid; gap: 12px; }
.ticket-card { padding: 16px; border: 1px solid #ebe7ef; border-radius: 16px; background: #fff; }
.ticket-top { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; }
.ticket-title { min-width: 0; }
.ticket-title h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ticket-title p { margin: 5px 0 0; color: #958e9e; font-size: 10px; font-weight: 700; }
.ticket-card > .ticket-message { margin: 12px 0; color: #554e5e; font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
.ticket-assets { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.asset-link { max-width: 100%; padding: 7px 9px; border-radius: 8px; color: #6323d0; background: #f4eeff; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 10px; font-weight: 900; }
.ticket-replies { display: grid; gap: 8px; margin-top: 13px; }
.ticket-reply { padding: 10px 11px; border-left: 3px solid #c9a4ff; border-radius: 0 11px 11px 0; background: #faf8ff; }
.ticket-reply strong { display: block; color: #5c29bd; font-size: 10px; }
.ticket-reply p { margin: 5px 0 0; color: #55505c; font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
.ticket-reply-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-top: 12px; }
.ticket-reply-form textarea { min-height: 38px; resize: vertical; }
.reward-card { padding: 16px; border: 1px solid #e9e5ef; border-radius: 16px; display: flex; align-items: center; gap: 13px; background: linear-gradient(110deg, #fff, #fcfaff); }
.reward-symbol { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 14px; color: #8b2de6; background: #f2e6ff; display: grid; place-items: center; }
.reward-body { min-width: 0; flex: 1; }
.reward-body strong { display: block; font-size: 12px; }
.reward-body span { display: block; margin-top: 4px; color: #938c9d; font-size: 10px; line-height: 1.4; }
.reward-code { display: inline-flex; margin-top: 8px; padding: 6px 8px; border-radius: 8px; color: #4b286e; background: #f5f1fa; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; word-break: break-all; }
.note-card { padding: 15px; border: 1px solid #e9e5ef; border-radius: 15px; background: #fffef5; }
.note-card p { margin: 0; color: #514c45; white-space: pre-wrap; font-size: 12px; line-height: 1.65; }
.note-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; color: #9a9285; font-size: 10px; font-weight: 700; }
.library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.library-section { min-width: 0; }
.wow-card, .broadcast-card, .black-card { padding: 14px; border: 1px solid #ebe7ef; border-radius: 15px; background: #fff; }
.wow-card + .wow-card, .broadcast-card + .broadcast-card, .black-card + .black-card { margin-top: 10px; }
.item-head { display: flex; gap: 9px; align-items: flex-start; justify-content: space-between; }
.item-head strong { font-size: 12px; }
.item-meta { margin: 5px 0 0; color: #9991a1; font-size: 10px; font-weight: 700; }
.code-block { margin-top: 10px; padding: 9px; border-radius: 9px; color: #5d27aa; background: #f3edff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; word-break: break-all; }
.item-content { margin: 9px 0 0; color: #5e5865; font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
.copy-button { min-height: 28px; padding: 0 8px; border: 0; border-radius: 8px; color: #6422d0; background: #f1eaff; font-size: 9px; font-weight: 900; }
.rule-block { padding: 19px; border: 1px solid #e9e5ef; border-radius: 16px; color: #504959; background: #fff; white-space: pre-wrap; font-size: 12px; line-height: 1.72; }

/* team / settings */
.user-list { display: grid; gap: 10px; }
.user-card { padding: 12px; border: 1px solid #e9e6ed; border-radius: 14px; background: #fff; display: flex; align-items: center; gap: 10px; }
.user-card-copy { min-width: 0; flex: 1; }
.user-card-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.user-card-copy span { display: block; margin-top: 3px; color: #9992a1; font-size: 10px; font-weight: 700; }
.avatar { width: 33px; height: 33px; overflow: hidden; flex: 0 0 auto; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #8e2dff, #5dd0ee); display: grid; place-items: center; font-size: 11px; font-weight: 900; }
.avatar.large { width: 50px; height: 50px; font-size: 16px; }
.team-detail { display: flex; align-items: center; gap: 10px; }
.license-result { margin-top: 13px; padding: 13px; border: 1px solid #ddc5ff; border-radius: 13px; color: #5e22b7; background: #fbf7ff; }
.license-result strong { display: block; font-size: 10px; }
.license-code { margin-top: 7px; display: flex; gap: 9px; align-items: center; justify-content: space-between; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 900; word-break: break-all; }
.settings-profile { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid #eeeaf1; }
.settings-profile p { margin: 4px 0 0; color: #928a9b; font-size: 11px; line-height: 1.5; }
.activity-list { display: grid; gap: 10px; }
.activity-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid #efecf2; }
.activity-row:last-child { border-bottom: 0; }
.activity-dot { width: 9px; height: 9px; flex: 0 0 auto; margin-top: 4px; border-radius: 50%; background: linear-gradient(135deg, #8240ed, #57c5ec); }
.activity-copy { min-width: 0; flex: 1; }
.activity-copy strong { display: block; font-size: 11px; }
.activity-copy span { display: block; margin-top: 3px; color: #9992a2; font-size: 10px; line-height: 1.4; }
.activity-time { color: #ada6b4; font-size: 9px; font-weight: 800; white-space: nowrap; }
.log-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* modal / toast / notifications */
.modal-backdrop { position: fixed; z-index: 100; inset: 0; padding: 18px; display: grid; place-items: center; background: rgba(13, 10, 21, .55); backdrop-filter: blur(5px); }
.modal { width: min(100%, 620px); max-height: min(86svh, 760px); overflow: auto; padding: 21px; border: 1px solid rgba(255,255,255,.2); border-radius: 21px; background: #fff; box-shadow: 0 28px 80px rgba(9, 7, 14, .30); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.modal-head h2 { margin: 0; font-family: var(--font-display); font-size: 19px; letter-spacing: -.04em; }
.modal-head p { margin: 5px 0 0; color: #948c9d; font-size: 11px; line-height: 1.5; }
.modal-close { width: 34px; height: 34px; padding: 0; border: 1px solid #e7e3eb; border-radius: 10px; color: #7f7886; background: #fff; display: grid; place-items: center; }
.modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.toast-root { position: fixed; z-index: 150; right: 17px; bottom: 17px; width: min(calc(100vw - 34px), 370px); display: grid; gap: 9px; pointer-events: none; }
.toast { padding: 13px 14px; border: 1px solid #e4dfeb; border-radius: 14px; color: #4b4554; background: #fff; box-shadow: 0 14px 36px rgba(28, 22, 42, .15); font-size: 11px; font-weight: 800; line-height: 1.5; animation: toast-in .24s ease; }
.toast.success { border-color: #c6efdc; color: #08764e; }
.toast.error { border-color: #ffd0d9; color: #c82b48; }
@keyframes toast-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
.notification-menu { position: absolute; z-index: 50; top: calc(100% + 12px); right: 50px; width: min(420px, calc(100vw - 28px)); max-height: min(560px, calc(100svh - 105px)); overflow: hidden; border: 1px solid #e5e1e9; border-radius: 20px; background: #fff; box-shadow: 0 24px 70px rgba(26, 20, 38, .18), 0 5px 18px rgba(26, 20, 38, .07); }
.notification-menu::before { content: ""; position: absolute; top: -6px; right: 17px; width: 12px; height: 12px; border: 1px solid #e5e1e9; border-right: 0; border-bottom: 0; background: #fff; transform: rotate(45deg); }
.notification-menu-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 18px 15px; border-bottom: 1px solid #eeebf1; background: linear-gradient(180deg, #fff 0%, #fcfbfd 100%); }
.notification-menu-title { min-width: 0; display: flex; align-items: center; gap: 11px; }
.notification-menu-title > div { min-width: 0; display: grid; gap: 3px; }
.notification-menu-title strong { color: #211c2b; font-size: 14px; font-weight: 750; letter-spacing: -.015em; }
.notification-menu-title > div > span { color: #948d9e; font-size: 10px; font-weight: 500; }
.notification-menu-icon { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: #7136d6; background: #f0e8ff; }
.notification-menu-icon .icon { width: 17px; height: 17px; }
.notification-read-all { flex: 0 0 auto; min-height: 32px; padding: 7px 9px; border: 1px solid #e6e1ec; border-radius: 9px; color: #625a6e; background: #fff; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 650; }
.notification-read-all:hover:not(:disabled) { color: #6529c9; border-color: #d7c9ee; background: #faf7ff; }
.notification-read-all .icon { width: 13px; height: 13px; }
.notification-list { max-height: min(474px, calc(100svh - 175px)); overflow-y: auto; padding: 8px; scrollbar-width: thin; scrollbar-color: #d8d2df transparent; }
.notification-item { width: 100%; padding: 12px 10px; border: 1px solid transparent; border-radius: 13px; color: inherit; background: transparent; display: grid; grid-template-columns: 34px minmax(0, 1fr) 7px; align-items: start; gap: 10px; text-align: left; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.notification-item + .notification-item { margin-top: 3px; }
.notification-item:hover { border-color: #ebe6f0; background: #faf9fc; transform: translateY(-1px); }
.notification-item.unread { border-color: #eee5ff; background: #faf7ff; }
.notification-item.unread:hover { border-color: #dfd0fb; background: #f7f1ff; }
.notification-type { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: #eee8fb; }
.notification-type i { width: 8px; height: 8px; border-radius: 50%; background: #7b42dc; box-shadow: 0 0 0 4px rgba(123, 66, 220, .12); }
.notification-type.success, .notification-type.approved { background: #e6f7f0; }
.notification-type.success i, .notification-type.approved i { background: #149c6b; box-shadow: 0 0 0 4px rgba(20, 156, 107, .12); }
.notification-type.warning, .notification-type.pending { background: #fff3e3; }
.notification-type.warning i, .notification-type.pending i { background: #e68c22; box-shadow: 0 0 0 4px rgba(230, 140, 34, .12); }
.notification-type.error, .notification-type.danger, .notification-type.rejected { background: #ffebef; }
.notification-type.error i, .notification-type.danger i, .notification-type.rejected i { background: #e63a58; box-shadow: 0 0 0 4px rgba(230, 58, 88, .12); }
.notification-copy { min-width: 0; display: grid; gap: 5px; }
.notification-item-top { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.notification-item strong { min-width: 0; overflow: hidden; color: #312b39; font-size: 12px; font-weight: 650; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.notification-item time { flex: 0 0 auto; color: #aaa3b0; font-size: 9px; font-weight: 500; white-space: nowrap; }
.notification-body { color: #7d7586; font-size: 10.5px; font-weight: 400; line-height: 1.5; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.notification-unread-dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #8041e4; box-shadow: 0 0 0 3px rgba(128, 65, 228, .11); }
.notification-empty { min-height: 230px; padding: 35px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.notification-empty > span { width: 48px; height: 48px; margin-bottom: 12px; display: grid; place-items: center; border-radius: 15px; color: #8b7d9b; background: #f3f0f6; }
.notification-empty strong { color: #3c3545; font-size: 13px; }
.notification-empty p { max-width: 230px; margin: 6px 0 0; color: #9991a2; font-size: 10.5px; line-height: 1.5; }

@media (max-width: 1160px) {
  .grid.four { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .library-grid { grid-template-columns: 1fr; }
  .dashboard-columns { grid-template-columns: 1fr; }
}
@media (max-width: 940px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-panel { padding: 24px; }
  .auth-content { margin: auto; padding: 42px 0; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { width: 270px; position: fixed; inset: 0 auto 0 0; transform: translateX(-105%); transition: transform .22s ease; box-shadow: 18px 0 40px rgba(0,0,0,.25); }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; z-index: 15; inset: 0; background: rgba(10,8,14,.38); }
  .mobile-menu { display: grid; }
  .main-area { padding: 20px 18px 34px; }
  .topbar { padding-bottom: 18px; }
}
@media (max-width: 720px) {
  .topbar-right .top-avatar { display: none; }
  .grid.two, .grid.three, .form-grid, .form-grid.three { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .dashboard-hero { min-height: 265px; padding: 22px; }
  .hero-visual-mark { right: -22px; width: 53%; opacity: .36; }
  .chat-layout { height: calc(100svh - 145px); min-height: 490px; grid-template-columns: 76px minmax(0,1fr); }
  .chat-contacts-head { padding: 14px 8px; text-align: center; }
  .chat-contacts-head strong, .chat-contacts-head span, .contact-copy, .chat-group-button > span { display: none; }
  .chat-group-button, .contact-row { width: 48px; height: 48px; margin: 7px auto; padding: 7px; justify-content: center; }
  .contact-row .avatar { width: 30px; height: 30px; }
  .chat-messages { padding: 15px; }
  .message-row .message-body { max-width: 88%; }
  .chat-head { padding: 11px 12px; }
  .chat-title span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ticket-reply-form { grid-template-columns: 1fr; }
  .reward-card { align-items: flex-start; flex-wrap: wrap; }
  .library-grid { grid-template-columns: 1fr; }
  .notification-menu { right: 0; top: calc(100% + 10px); }
}

/* 3.8.25 — premium reward movement cards */
.reward-vault-card .reward-list { gap: 14px; }
.reward-vault-item {
  min-height: 150px !important;
  padding: 22px !important;
  grid-template-columns: 82px minmax(0,1fr) minmax(138px,auto) !important;
  align-items: start !important;
  gap: 20px !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 38px rgba(39,25,56,.075) !important;
}
.reward-vault-item > .reward-visual {
  position: static !important;
  width: 78px !important;
  height: 78px !important;
  border-radius: 22px !important;
  grid-column: 1;
  grid-row: 1;
  box-shadow: 0 16px 32px rgba(38,25,56,.16) !important;
}
.reward-vault-item .reward-body { min-width: 0; gap: 8px !important; }
.reward-card-kicker {
  margin: 0 !important;
  color: #9a8ba4 !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  letter-spacing: .13em;
}
.reward-vault-item .reward-body > strong {
  color: #1d1029 !important;
  font-size: clamp(18px, 1.7vw, 23px) !important;
  line-height: 1.08;
}
.reward-vault-item .reward-meta-line { min-height: 32px; gap: 8px !important; }
.reward-vault-item .reward-meta-line time {
  padding: 6px 8px;
  border-radius: 9px;
  color: #786b82;
  background: rgba(255,255,255,.76);
  font-size: 10px;
}
.reward-code-row {
  width: 100%;
  margin-top: 4px;
  padding: 12px;
  border: 1px solid rgba(126,76,164,.16);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(247,241,252,.92));
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 9px !important;
  box-shadow: inset 0 1px 0 #fff, 0 9px 22px rgba(44,28,62,.055);
}
.reward-code-label {
  grid-column: 1 / -1;
  color: #8a7697;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .1em;
}
.reward-code-label .icon { width: 13px; height: 13px; }
.reward-code-row .reward-code {
  width: 100% !important;
  min-height: 45px;
  margin: 0 !important;
  padding: 0 15px !important;
  overflow-x: auto;
  align-items: center;
  border-radius: 12px !important;
  font-size: 13px !important;
  white-space: nowrap;
}
.reward-code-row .reward-copy-code {
  min-height: 45px;
  margin: 0 !important;
  padding: 0 15px;
  border-radius: 12px;
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #7131c9, #a63ee7);
  box-shadow: 0 11px 22px rgba(114,49,202,.2);
}
.reward-vault-item .card-head-actions {
  min-width: 138px;
  display: flex;
  flex-direction: column;
  align-items: stretch !important;
  justify-self: stretch !important;
  gap: 9px !important;
}
.reward-vault-item .card-head-actions .pill,
.reward-vault-item .card-head-actions .primary-small {
  width: 100%;
  min-height: 42px;
  justify-content: center;
}
.reward-vault-item.is-unused .pill.orange {
  color: #915100;
  border-color: #ffdca2;
  background: linear-gradient(135deg, #fff4dd, #ffdda4);
}
.reward-vault-item.is-used { opacity: .92; }
.reward-used-at {
  color: #7e7187;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}
.reward-used-at .icon { width: 12px; height: 12px; }
@media (max-width: 900px) {
  .reward-vault-item {
    grid-template-columns: 72px minmax(0,1fr) !important;
  }
  .reward-vault-item > .reward-visual { width: 68px !important; height: 68px !important; }
  .reward-vault-item .card-head-actions {
    grid-column: 1 / -1 !important;
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .reward-vault-item .card-head-actions > * { flex: 1 1 120px; }
}
@media (max-width: 560px) {
  .reward-vault-item { padding: 16px !important; grid-template-columns: 58px minmax(0,1fr) !important; gap: 13px !important; }
  .reward-vault-item > .reward-visual { position: static !important; width: 54px !important; height: 54px !important; border-radius: 17px !important; }
  .reward-vault-item .reward-body > strong { font-size: 17px !important; }
  .reward-code-row { grid-column: 1 / -1; grid-template-columns: 1fr; padding: 10px; }
  .reward-code-row .reward-copy-code { width: 100%; justify-content: center; }
  .reward-vault-item .reward-meta-line { align-items: flex-start; flex-direction: column; }
}

/* 3.8.26 — rebuilt reward cards */
.reward-vault-item.reward-premium-card {
  position: relative;
  min-height: 230px !important;
  padding: 24px !important;
  overflow: hidden;
  grid-template-columns: 112px minmax(0,1fr) 158px !important;
  align-items: stretch !important;
  gap: 22px !important;
  border: 1px solid #e7deed !important;
  border-radius: 26px !important;
  background: linear-gradient(145deg, #fff 0%, #fcf9ff 62%, #f7fbff 100%) !important;
  box-shadow: 0 18px 48px rgba(39,24,57,.085) !important;
}
.reward-vault-item.reward-premium-card::before {
  top: 24px;
  bottom: 24px;
  width: 4px;
}
.reward-premium-card.reason-active { background: linear-gradient(145deg, #fff 0%, #f4fbff 60%, #f0f6ff 100%) !important; }
.reward-premium-card.reason-monthly { background: linear-gradient(145deg, #fff 0%, #fbf5ff 60%, #f4faff 100%) !important; }
.reward-premium-card.reason-success { background: linear-gradient(145deg, #fff 0%, #f3fff9 60%, #f7fffb 100%) !important; }
.premium-reward-art {
  min-width: 0;
  padding: 14px 10px 11px;
  border: 1px solid rgba(126,88,151,.14);
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: inset 0 1px 0 #fff, 0 12px 30px rgba(45,29,63,.07);
}
.premium-reward-art .reward-visual {
  position: static !important;
  width: 82px !important;
  height: 82px !important;
  border-radius: 24px !important;
  display: grid !important;
  box-shadow: 0 17px 32px rgba(41,25,58,.17) !important;
}
.premium-reward-art > span {
  max-width: 100%;
  overflow: hidden;
  color: #887792;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .09em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.premium-reward-main { min-width: 0; display: grid; align-content: start; gap: 13px; }
.premium-reward-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.premium-reward-head > div { min-width: 0; }
.premium-reward-head > div > span {
  color: #9d8ba8;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .15em;
}
.premium-reward-head h3 {
  margin: 4px 0 0;
  color: #1a1022;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.05;
  letter-spacing: -.04em;
}
.premium-reward-head time {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #ece4f1;
  border-radius: 999px;
  color: #82748b;
  background: rgba(255,255,255,.82);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}
.premium-reward-head time .icon { width: 13px; height: 13px; }
.premium-reward-reason {
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid rgba(127,53,220,.12);
  border-radius: 16px;
  background: rgba(127,53,220,.055);
  display: flex;
  align-items: center;
  gap: 10px;
}
.premium-reason-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #7f35dc, #bf45ec);
  display: grid;
  place-items: center;
  box-shadow: 0 9px 18px rgba(127,53,220,.18);
}
.premium-reason-icon .icon { width: 16px; height: 16px; }
.premium-reward-reason > div { min-width: 0; display: grid; gap: 2px; }
.premium-reward-reason small { color: #9a88a5; font-size: 8px; font-weight: 950; letter-spacing: .1em; }
.premium-reward-reason strong { overflow: hidden; color: #40274f; font-size: 12px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.premium-recipient {
  min-width: 0;
  margin-left: auto;
  padding: 5px 9px 5px 5px;
  border: 1px solid #e7ddec;
  border-radius: 999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 7px 16px rgba(45,29,63,.07);
}
.premium-recipient .avatar { width: 26px; height: 26px; }
.premium-recipient b { max-width: 130px; overflow: hidden; color: #4b3659; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.premium-code-vault {
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: linear-gradient(135deg, #171020, #0c0911 68%, #151021);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 15px 30px rgba(18,10,25,.16);
}
.premium-code-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.premium-code-title > span { color: #d6b9ef; display: inline-flex; align-items: center; gap: 6px; font-size: 8px; font-weight: 950; letter-spacing: .12em; }
.premium-code-title .icon { width: 13px; height: 13px; }
.premium-code-title em { color: #7e7088; font-size: 8px; font-style: normal; font-weight: 700; }
.premium-code-row { margin-top: 9px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; }
.premium-code-row code {
  min-width: 0;
  min-height: 46px;
  padding: 0 15px;
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  color: #fff;
  background: rgba(255,255,255,.055);
  display: flex;
  align-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
}
.premium-code-row button {
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #7630d0, #a43ce7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(118,48,208,.25);
}
.premium-code-row button:hover { transform: translateY(-1px); filter: brightness(1.06); }
.premium-code-row button .icon { width: 15px; height: 15px; }
.premium-reward-actions {
  padding-left: 18px;
  border-left: 1px solid #ebe3ef;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.premium-status {
  min-height: 42px;
  padding: 0 12px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .06em;
}
.premium-status i { width: 8px; height: 8px; border-radius: 50%; }
.premium-status.unused { color: #915300; border: 1px solid #f5d79d; background: linear-gradient(135deg, #fff5e0, #ffe0a7); }
.premium-status.unused i { background: #e99a2f; box-shadow: 0 0 0 4px rgba(233,154,47,.17); }
.premium-status.used { color: #087647; border: 1px solid #bcebd3; background: linear-gradient(135deg, #e8fff3, #c9f4dd); }
.premium-status.used i { background: #16a568; box-shadow: 0 0 0 4px rgba(22,165,104,.16); }
.premium-reward-actions > small { color: #887b91; display: flex; align-items: flex-start; justify-content: center; gap: 6px; font-size: 8px; line-height: 1.5; text-align: center; }
.premium-reward-actions > small .icon { width: 13px; height: 13px; }
.premium-use-button,
.premium-delete-button {
  min-height: 42px;
  padding: 0 12px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}
.premium-use-button { border: 0; color: #fff; background: linear-gradient(135deg, #7130c8, #a33ce6); box-shadow: 0 11px 22px rgba(113,48,200,.22); }
.premium-delete-button { border: 1px solid #f0d8df; color: #c43b59; background: #fff4f6; }
.premium-use-button .icon,
.premium-delete-button .icon { width: 15px; height: 15px; }
.reward-premium-card.is-used .premium-reward-art,
.reward-premium-card.is-used .premium-reward-main { opacity: .84; }
@media (max-width: 1050px) {
  .reward-vault-item.reward-premium-card { grid-template-columns: 96px minmax(0,1fr) !important; }
  .premium-reward-actions { grid-column: 1 / -1; padding: 14px 0 0; border-left: 0; border-top: 1px solid #ebe3ef; flex-direction: row; flex-wrap: wrap; }
  .premium-reward-actions > * { flex: 1 1 130px; }
}
@media (max-width: 680px) {
  .reward-vault-item.reward-premium-card { min-height: 0 !important; padding: 16px !important; grid-template-columns: 1fr !important; gap: 14px !important; }
  .premium-reward-art { padding: 11px; flex-direction: row; justify-content: flex-start; }
  .premium-reward-art .reward-visual { width: 58px !important; height: 58px !important; border-radius: 18px !important; }
  .premium-reward-head { flex-direction: column; }
  .premium-reward-head time { align-self: flex-start; }
  .premium-reward-reason { align-items: flex-start; flex-wrap: wrap; }
  .premium-recipient { width: 100%; margin-left: 0; }
  .premium-code-title em { display: none; }
  .premium-code-row { grid-template-columns: 1fr; }
  .premium-code-row button { width: 100%; }
  .premium-reward-actions { display: grid; grid-template-columns: 1fr; }
  .premium-reward-actions > * { width: 100%; }
}
@media (max-width: 440px) {
  .auth-panel { padding: 18px; }
  .auth-logo { width: 119px; }
  .lang-button { padding: 7px 8px; font-size: 10px; }
  .auth-content h1 { font-size: 30px; }
  .topbar h1 { font-size: 24px; }
  .topbar-right { gap: 6px; }
  .topbar-right .primary-small { display: none; }
  .grid.four { grid-template-columns: 1fr; }
  .stat-card { min-height: 122px; }
  .chat-layout { grid-template-columns: 60px minmax(0,1fr); margin: 0 -5px; border-radius: 15px; }
  .chat-group-button, .contact-row { width: 40px; height: 40px; }
}

/* === Todu 3.2 refinement: clearer type and professional interactions === */
:root {
  --ink: #171421;
  --muted: #746e7e;
  --line: #e9e6ef;
  --soft: #f8f7fb;
  --role-admin: #0891b2;
  --role-admin-soft: #22d3ee;
  --role-admin-bg: rgba(8,145,178,.14);
  --role-admin-border: rgba(34,211,238,.30);
  --role-admin-gradient: linear-gradient(135deg, #0891b2, #22d3ee);
  --role-mod: #16a34a;
  --role-mod-soft: #4ade80;
  --role-mod-bg: rgba(34,197,94,.14);
  --role-mod-border: rgba(74,222,128,.30);
  --role-mod-gradient: linear-gradient(135deg, #15803d, #22c55e);
  --role-todu: #facc15;
  --role-todu-soft: #fde047;
  --role-todu-bg: rgba(250, 204, 21, .14);
  --role-todu-border: rgba(250, 204, 21, .36);
  --role-todu-gradient: linear-gradient(135deg, #ca8a04, #facc15);
}
body,
button,
input,
textarea,
select {
  font-family: var(--font-body) !important;
}
body { font-size: 14px; font-weight: 400; }
button, input, textarea, select { font-weight: 500; }
.auth-content > p, .card-head p, .dashboard-hero p, .field-help, .auth-note { font-size: 12px; line-height: 1.55; }
.auth-logo, .sidebar-brand img { overflow: visible; }
.auth-logo img, .sidebar-brand img { height: auto; object-fit: contain; }
.sidebar-brand img { width: min(145px, 100%); }
.sidebar-badge { display: none !important; }

/* Form treatment */
.field > label, .field-label, .app-field label { font-weight: 650; letter-spacing: .045em; }
.control input, .control select, .control textarea { font-weight: 500; font-size: 15px; }
.app-control { min-height: 46px; padding: 11px 13px; font-size: 13px; font-weight: 500; border-radius: 12px; }
textarea.app-control { min-height: 100px; }
.app-control::placeholder, .control input::placeholder, .control textarea::placeholder { font-weight: 400; }
.primary-small, .mini-button, .ghost-button, .danger-button, .outline-button, .auth-primary { font-weight: 650; font-size: 12px; }
.primary-small { min-height: 40px; padding: 0 15px; border-radius: 11px; }
.mini-button, .ghost-button, .danger-button, .outline-button { min-height: 40px; padding: 0 14px; border-radius: 11px; }
.auth-primary, .primary-button { font-size: 14px; font-weight: 700; }
.equal-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.equal-actions > button { width: 100%; min-height: 42px; margin: 0; }
.modal-wide { width: min(100%, 820px); }
.modal-rule { margin: 20px 0; border: 0; border-top: 1px solid #eeeaf2; }
.modal-actions { align-items: stretch; }

/* File picker */
.file-control, .avatar-upload {
  position: relative;
  min-height: 50px;
  border: 1px solid #e3dfeb;
  border-radius: 13px;
  color: #645d6f;
  background: linear-gradient(135deg, #fff, #faf8ff);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.file-control:hover, .avatar-upload:hover { border-color: #b98cff; background: #fbf8ff; box-shadow: 0 0 0 4px rgba(142,45,255,.08); }
.file-control .icon { color: #823de9; }
.file-control input, .avatar-upload input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.file-control span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-large { min-height: 56px; padding: 13px 14px; }

/* Login / registration */
.auth-tabs { margin-bottom: 22px; }
.auth-tab { font-weight: 650; font-size: 13px; }
.auth-link-button { appearance: none; width: max-content; padding: 4px 0; border: 0; color: #7740db; background: transparent; font-size: 12px; font-weight: 650; text-align: left; }
.auth-link-button:hover { color: #4f18ba; text-decoration: underline; }
.auth-crop-card { display: grid; gap: 12px; padding: 14px; border: 1px solid #e5e0ef; border-radius: 16px; background: linear-gradient(145deg, #fdfcff, #f7f4ff); }
.crop-preview-wrap { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px; }
.crop-preview { width: 96px; height: 96px; overflow: hidden; border: 3px solid #fff; border-radius: 50%; background: linear-gradient(135deg, #8644eb, #5ccce9); box-shadow: 0 12px 26px rgba(85, 38, 171, .18); }
.crop-preview canvas { width: 100%; height: 100%; display: block; }
.crop-copy strong { display: block; font-size: 13px; font-weight: 650; }
.crop-copy span { display: block; margin-top: 5px; color: #81798c; font-size: 12px; line-height: 1.45; }
.crop-control { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 10px; color: #766e81; font-size: 12px; }
.crop-control input { width: 100%; accent-color: #843de8; }

/* Header / avatar */
.top-avatar, [data-action="open-settings"] { cursor: pointer; }
.top-avatar { border: 2px solid #eee8fa; border-radius: 50%; transition: transform .16s ease, border-color .16s ease; }
.top-avatar:hover { transform: translateY(-1px); border-color: #b685ff; }
.avatar { font-weight: 650; }

/* Broadcast and live state */
.broadcast-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px 28px;
  margin-bottom: 18px;
}
.broadcast-banner:not(:has(.broadcast-banner-actions)) { grid-template-columns: auto minmax(0, 1fr); }
.broadcast-banner-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.broadcast-idle-copy, .broadcast-live-copy { min-width: 0; }
.broadcast-idle-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-top: 6px; }
.broadcast-status-pill {
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(141,58,224,.18);
  border-radius: 999px;
  color: #6b4f86;
  background: rgba(141,58,224,.08);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}
.broadcast-status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #a855f7; box-shadow: 0 0 0 3px rgba(168,85,247,.16); }
.live-label, .broadcast-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #e72f50; box-shadow: 0 0 0 5px rgba(231,47,80,.13); animation: toduPulse 1.5s infinite; }
@keyframes toduPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.78); opacity: .72; } }

/* Leaderboard badges */
.leader-item { position: relative; min-height: 58px; padding: 11px 0; }
.leader-item.is-winner { margin: 8px -3px; padding: 13px; border: 1px solid rgba(143,55,242,.30); border-radius: 15px; background: linear-gradient(105deg, rgba(135,57,237,.09), rgba(94,214,239,.12)); box-shadow: 0 11px 24px rgba(102,51,202,.09); }
.rank { width: 28px; height: 28px; border-radius: 9px; font-size: 11px; }
.rank-badge { display: inline-flex; align-items: center; gap: 5px; width: max-content; max-width: 100%; margin-top: 5px; padding: 4px 7px; border-radius: 999px; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .02em; }
.rank-badge .icon { width: 12px; height: 12px; }
.rank-badge.purple { background: linear-gradient(135deg, #7d39e9, #c149ff); }
.rank-badge.orange { background: linear-gradient(135deg, #f17727, #ffb348); }
.rank-badge.aqua { background: linear-gradient(135deg, #18aabc, #55d9d4); }
.rank-badge.blue { background: linear-gradient(135deg, #2b7fe9, #68baf7); }
.rank-badge.red { background: linear-gradient(135deg, #df3959, #ff6c76); }
.leader-score { font-size: 17px; font-weight: 700; }
.leader-manager-note { margin-top: 12px; padding: 10px 12px; border-radius: 11px; color: #766c82; background: #f7f4fb; font-size: 12px; line-height: 1.45; }

/* Chat redesigned */
.chat-layout { border: 1px solid #e9e5ef; box-shadow: 0 18px 40px rgba(27, 18, 46, .06); }
.chat-contacts { background: linear-gradient(180deg, #fcfbff, #f8f6fb); }
.chat-contacts-head strong { font-weight: 700; }
.chat-contacts-head span { font-size: 11px; line-height: 1.45; }
.chat-group-button, .contact-row { min-height: 50px; font-size: 13px; font-weight: 600; }
.contact-copy strong { font-size: 12px; font-weight: 650; }
.contact-copy span { font-size: 10px; font-weight: 500; }
.chat-head { min-height: 76px; padding: 14px 18px; }
.chat-title strong { font-size: 14px; font-weight: 700; }
.chat-title span { font-size: 11px; font-weight: 400; }
.chat-messages { padding: 22px; }
.message-row { align-items: flex-end; gap: 9px; }
.message-row .avatar { margin-bottom: 1px; }
.message-body { max-width: min(78%, 670px); }
.message-meta { margin: 0 0 4px; color: #9c94a5; font-size: 10px; font-weight: 500; }
.message-bubble { border-radius: 16px; padding: 11px 13px; font-size: 13px; font-weight: 400; line-height: 1.55; box-shadow: 0 4px 12px rgba(22,16,34,.04); }
.message-row.mine .message-bubble { background: linear-gradient(125deg, #7040e8, #ad42ed 55%, #4ebfe9); }
.message-delete { opacity: 0; transition: opacity .16s ease; }
.message-row:hover .message-delete { opacity: 1; }
.message-image { display: block; margin-top: 8px; overflow: hidden; border-radius: 12px; border: 1px solid rgba(255,255,255,.28); }
.message-image img { display: block; max-width: min(100%, 310px); max-height: 250px; object-fit: cover; }
.message-file { margin-top: 8px; min-height: 35px; padding: 8px 10px; border-radius: 10px; color: inherit; background: rgba(255,255,255,.16); display: inline-flex; align-items: center; gap: 7px; font-size: 11px; text-decoration: none; }
.typing-indicator { min-height: 20px; padding: 0 17px; color: #7b54ca; font-size: 11px; font-weight: 500; }
.chat-compose { padding: 13px 16px 14px; }
.chat-compose-row { align-items: stretch; gap: 9px; }
.chat-compose textarea.app-control { min-height: 50px; max-height: 120px; padding: 14px 13px; border-radius: 14px; resize: none; }
.attach-label { width: 50px; min-height: 50px; border: 1px solid #e3deeb; border-radius: 14px; color: #6d39db; background: #faf8ff; display: grid; place-items: center; cursor: pointer; transition: .16s ease; }
.attach-label:hover { color: #fff; border-color: #7137e7; background: #7137e7; }
.attach-label input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.send-button { min-width: 110px; min-height: 50px; border: 0; border-radius: 14px; color: #fff; background: linear-gradient(110deg, #7540e8, #a63fe9, #54c9e6); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 700; box-shadow: 0 10px 20px rgba(107,51,224,.19); }
.send-button:hover { filter: brightness(1.05); transform: translateY(-1px); }
.chat-compose-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 12px; margin: 8px 2px 0; color: #9992a2; font-size: 10px; font-weight: 500; }

/* Support, tickets and management cards */
.support-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.support-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.support-tabs button { min-height: 34px; padding: 0 12px; border: 1px solid #e8e2ef; border-radius: 10px; color: #756d7f; background: #fff; font-size: 11px; font-weight: 600; }
.support-tabs button.is-active { border-color: #c8a7fc; color: #6328ce; background: #f8f2ff; }
.support-compact-list, .ticket-list { display: grid; gap: 10px; }
.support-compact-card, .password-request-card { padding: 14px; border: 1px solid #e9e5ed; border-radius: 15px; background: #fff; transition: border .16s ease, box-shadow .16s ease; }
.support-compact-card:hover, .password-request-card:hover { border-color: #d2b8ff; box-shadow: 0 9px 20px rgba(58,35,107,.06); }
.ticket-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ticket-title h3 { margin: 0; font-size: 14px; font-weight: 650; }
.ticket-title p { margin: 4px 0 0; color: #928999; font-size: 11px; line-height: 1.45; }
.ticket-excerpt { margin: 10px 0 12px; color: #5d5665; font-size: 12px; line-height: 1.55; }
.ticket-reply { margin-top: 11px; padding: 10px 11px; border-radius: 11px; color: #5f5867; background: #faf8fc; font-size: 12px; }
.ticket-reply strong { display: block; font-size: 11px; font-weight: 650; }
.ticket-reply p { margin: 5px 0 0; line-height: 1.5; }
.ticket-detail { display: grid; gap: 14px; }
.ticket-detail-message { padding: 14px; border-radius: 14px; color: #4e4755; background: #faf9fc; font-size: 13px; line-height: 1.65; }
.ticket-detail-meta { display: flex; flex-wrap: wrap; gap: 7px 13px; color: #918999; font-size: 11px; }
.ticket-thread { display: grid; gap: 9px; }
.ticket-thread-item { padding: 11px 12px; border-left: 3px solid #b987ff; border-radius: 0 11px 11px 0; color: #55505b; background: #fbf9fe; font-size: 12px; line-height: 1.55; }
.ticket-thread-item strong { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 650; }
.reply-tools { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.status-toggle { min-height: 34px; padding: 0 10px; border: 0 !important; outline: 0 !important; box-shadow: none !important; border-radius: 9px; color: #5f5867; background: #f4f0fa; font-size: 10px; font-weight: 650; }
.status-toggle.loaded, .status-toggle.added { color: #077548; background: #dff8ea; }
.status-toggle.not_loaded, .status-toggle.not_added { color: #b14b17; background: #fff0e2; }

/* Points, licenses, actions */
.points-plus { color: #118453; } .points-minus { color: #d22f4e; }
.license-list, .category-list, .badge-settings { display: grid; gap: 9px; margin-top: 14px; }
.license-row, .category-row, .badge-setting { display: grid; align-items: center; gap: 10px; padding: 11px; border: 1px solid #e9e4ed; border-radius: 13px; background: #fff; }
.license-row { grid-template-columns: minmax(0, 1fr) auto auto; }
.category-row { grid-template-columns: minmax(150px, 1fr) 94px auto auto auto; }
.badge-setting { grid-template-columns: auto minmax(150px, 1fr) 120px auto auto; }
.license-row strong, .category-row strong { display: block; font-size: 12px; font-weight: 650; }
.license-row span, .category-row span { display: block; margin-top: 3px; color: #978f9f; font-size: 10px; }
.system-label { display: inline-flex; margin-left: 4px; padding: 2px 5px; border-radius: 6px; color: #6530c7; background: #f1e7ff; font-size: 8px; font-weight: 700; vertical-align: middle; }
.check-label { display: inline-flex !important; align-items: center; gap: 7px; color: #706879 !important; font-size: 11px !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap; }
.check-label input { accent-color: #7a3de0; }

/* Notifications */
.toast { font-size: 12px; font-weight: 600; border-radius: 15px; }

@media (max-width: 520px) {
  .notification-menu { position: fixed; top: 74px; right: 10px; left: 10px; width: auto; max-height: calc(100svh - 88px); border-radius: 18px; }
  .notification-menu::before { display: none; }
  .notification-menu-head { padding: 14px; }
  .notification-list { max-height: calc(100svh - 160px); }
  .notification-read-all span { display: none; }
  .notification-read-all { width: 32px; padding: 0; justify-content: center; }
  .notification-item { grid-template-columns: 32px minmax(0, 1fr) 7px; padding: 11px 8px; gap: 9px; }
  .notification-type { width: 32px; height: 32px; }
  .notification-item-top { display: grid; gap: 2px; }
  .notification-item time { grid-row: 2; }
}

@media (max-width: 720px) {
  body { font-size: 14px; }
  .leave-request-card .ticket-top { align-items: flex-start; gap: 10px; }
  .leave-request-card .card-head-actions { flex-direction: column; align-items: flex-end; }
  .leave-review-user { flex-wrap: wrap; }
  .leave-review-user time { width: 100%; margin-left: 50px; }
  .chat-layout { height: calc(100svh - 138px); min-height: 500px; }
  .chat-messages { padding: 15px 12px; }
  .message-body { max-width: 90%; }
  .send-button { min-width: 50px; width: 50px; padding: 0; }
  .send-button span { display: none; }
  .chat-compose { padding: 10px; }
  .chat-compose-foot { font-size: 9px; }
  .crop-preview-wrap { grid-template-columns: 80px minmax(0, 1fr); }
  .crop-preview { width: 80px; height: 80px; }
  .category-row, .badge-setting { grid-template-columns: 1fr 1fr; }
  .category-row > :first-child, .badge-setting > :first-child { grid-column: 1 / -1; }
  .license-row { grid-template-columns: 1fr auto; }
  .license-row > :first-child { grid-column: 1 / -1; }
  .reply-tools { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
  .equal-actions { grid-template-columns: 1fr; }
  .chat-layout { grid-template-columns: 56px minmax(0,1fr); }
  .attach-label { width: 46px; min-width: 46px; }
  .send-button { width: 46px; min-width: 46px; }
  .crop-control { grid-template-columns: 1fr; gap: 5px; }
}
/* Class alignment refinements */
.leader-item.winner { margin: 8px -3px; padding: 13px; border: 1px solid rgba(143,55,242,.30); border-radius: 15px; background: linear-gradient(105deg, rgba(135,57,237,.09), rgba(94,214,239,.12)); box-shadow: 0 11px 24px rgba(102,51,202,.09); }
.winner-label { display: inline-flex; margin-left: 5px; padding: 3px 6px; border-radius: 999px; color: #fff; background: linear-gradient(100deg, #7d3be4, #b340f2); font-size: 8px; font-weight: 700; letter-spacing: .04em; vertical-align: 2px; }
.broadcast-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.support-compact-card { width: 100%; min-height: 72px; color: #403848; text-align: left; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 11px; cursor: pointer; }
.support-compact-card strong { display: block; font-size: 13px; font-weight: 650; }
.support-compact-card p { margin: 4px 0 0; overflow: hidden; color: #928999; font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.support-compact-card > .icon { color: #7d37da; }
.support-category { display: inline-flex; width: max-content; padding: 4px 7px; border-radius: 8px; color: #6f35c5; background: #f3eaff; font-size: 9px; font-weight: 700; }
.ticket-detail .ticket-message { margin: 0; padding: 14px; border-radius: 14px; color: #4e4755; background: #faf9fc; font-size: 13px; line-height: 1.65; white-space: pre-wrap; }
.ticket-detail h4 { margin: 3px 0 0; font-size: 13px; font-weight: 700; }
.ticket-replies { display: grid; gap: 9px; }
.ticket-reply-form { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 4px; }
.ticket-reply-form textarea { min-height: 96px; }
.inline-status-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: end; }
@media (max-width:720px) {
  .support-compact-card { grid-template-columns: auto minmax(0, 1fr) auto; }
  .support-compact-card > .icon { display: none; }
  .inline-status-form { grid-template-columns: 1fr; }
  .broadcast-actions { justify-content: flex-start; }
}

/* Discord-style channel chat */
.discord-chat.chat-layout { grid-template-columns: 270px minmax(0, 1fr); border: 0; border-radius: 20px; background: #1e1f22; box-shadow: 0 22px 55px rgba(22, 18, 30, .13); }
.discord-chat .chat-contacts { min-width: 0; border-right: 0; color: #d8d5de; background: #1e1f22; }
.chat-server-head { min-height: 68px; padding: 13px 14px; border-bottom: 1px solid #111216; display: flex; align-items: center; justify-content: space-between; gap: 10px; box-shadow: 0 1px 0 rgba(255,255,255,.025); }
.chat-server-head > div { min-width: 0; display: grid; gap: 3px; }
.chat-server-head strong { color: #fff; font-size: 13px; font-weight: 750; letter-spacing: .04em; }
.chat-server-head span { color: #8e8a96; font-size: 10px; }
.chat-add-channel, .channel-section-label button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; color: #aaa5b2; background: #2b2c31; display: grid; place-items: center; }
.chat-add-channel:hover, .channel-section-label button:hover { color: #fff; background: #3a3b42; }
.chat-add-channel .icon, .channel-section-label button .icon { width: 15px; height: 15px; }
.channel-section { padding: 12px 8px 8px; }
.direct-section { min-height: 0; padding: 5px 8px 10px; border-top: 1px solid #2b2c31; display: flex; flex: 1; flex-direction: column; }
.channel-section-label { min-height: 26px; padding: 0 7px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.channel-section-label > span { color: #77737f; font-size: 9px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.channel-section-label button { width: 24px; height: 24px; background: transparent; }
.channel-list { display: grid; gap: 3px; }
.chat-channel { width: 100%; min-height: 42px; padding: 8px 9px; border: 0; border-radius: 9px; color: #96929d; background: transparent; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 7px; text-align: left; }
.chat-channel:hover { color: #dad7df; background: #292a2f; }
.chat-channel.is-active { color: #fff; background: #35363c; }
.chat-channel.announcement .chat-channel-icon { color: #f04d81; }
.chat-channel.media .chat-channel-icon { color: #b9a4ff; }
.chat-channel-icon { display: grid; place-items: center; color: #85818c; }
.chat-channel-icon .icon { width: 17px; height: 17px; }
.chat-channel > span:nth-child(2) { min-width: 0; overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.chat-channel > span:nth-child(2)::before { content: "#"; margin-right: 4px; color: #72767d; font-weight: 800; }
.chat-channel b { padding: 3px 5px; border-radius: 5px; color: #f07aa0; background: rgba(240,77,129,.12); font-size: 7px; font-weight: 750; letter-spacing: .04em; }
.discord-chat .contact-list { padding: 0; }
.discord-chat .contact-row { width: 100%; min-height: 48px; margin: 2px 0; padding: 7px 8px; border: 0; border-radius: 9px; color: #aaa6b0; }
.discord-chat .contact-row:hover { color: #e4e1e7; background: #292a2f; }
.discord-chat .contact-row.is-active { color: #fff; background: #35363c; }
.discord-chat .contact-row .avatar { width: 32px; height: 32px; border: 0; font-size: 10px; }
.discord-chat .contact-copy strong { color: inherit; font-size: 11px; }
.discord-chat .contact-copy span { color: #77737f; font-size: 9px; }
.discord-chat .contact-row .online-dot { margin-left: auto; }
.chat-unread { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; color: #fff; background: #ec385a; display: inline-grid; place-items: center; font-size: 8px; font-style: normal; font-weight: 800; box-shadow: 0 3px 8px rgba(236,56,90,.28); }
.discord-chat .chat-main { border-radius: 20px 0 0 20px; overflow: hidden; }
.discord-chat .chat-head { min-height: 68px; padding: 11px 16px; background: rgba(255,255,255,.97); box-shadow: 0 1px 0 #ece9f0; }
.channel-head-icon { width: 38px; height: 38px; display: grid !important; place-items: center; border-radius: 11px; color: #6e3bd0 !important; background: #f0e9fc; }
.channel-head-icon .icon { width: 18px; height: 18px; }
.chat-head-actions { display: flex; align-items: center; gap: 7px; }
.chat-head-button { min-height: 34px; padding: 7px 9px; border: 1px solid #e5e1e9; border-radius: 9px; color: #716a78; background: #fff; display: inline-flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 650; }
.chat-head-button .icon { width: 14px; height: 14px; }
.chat-head-button.danger:hover { color: #d52f4e; border-color: #f3c7d0; background: #fff7f8; }
.chat-locked { min-height: 76px; padding: 14px 18px; border-top: 1px solid #ece8ef; color: #706878; background: #faf9fc; display: flex; align-items: center; justify-content: center; gap: 11px; }
.chat-locked > .icon { width: 19px; height: 19px; color: #8b55dc; }
.chat-locked div { display: grid; gap: 3px; }
.chat-locked strong { color: #433b4c; font-size: 11px; }
.chat-locked span { font-size: 9px; }
.chat-empty { min-height: 100%; }
.chat-mention { padding: 1px 4px; border-radius: 5px; color: #6332c4; background: #ebe1ff; font-weight: 700; }
.message-row.mine .chat-mention { color: #fff; background: rgba(255,255,255,.19); }
.message-bubble { white-space: pre-wrap; }
.message-image { position: relative; overflow: hidden; max-width: 330px; margin-top: 8px; padding: 0; border: 0; border-radius: 12px; background: #18161d; display: block; cursor: zoom-in; }
.message-image img { display: block; width: auto; max-width: min(100%, 330px); max-height: 280px; object-fit: cover; transition: transform .2s ease, opacity .2s ease; }
.message-image > span { position: absolute; right: 8px; bottom: 8px; padding: 6px 8px; border-radius: 8px; color: #fff; background: rgba(16,14,20,.72); backdrop-filter: blur(5px); display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 650; opacity: 0; transform: translateY(4px); transition: .18s ease; }
.message-image > span .icon { width: 13px; height: 13px; }
.message-image:hover img { transform: scale(1.015); opacity: .92; }
.message-image:hover > span { opacity: 1; transform: translateY(0); }
.chat-lightbox { min-height: 260px; display: grid; place-items: center; border-radius: 15px; background: #111015; }
.chat-lightbox img { display: block; max-width: 100%; max-height: 68svh; object-fit: contain; }

@media (max-width: 940px) and (min-width: 721px) {
  .discord-chat.chat-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .discord-chat .chat-contacts-head strong, .discord-chat .chat-contacts-head span, .discord-chat .contact-copy, .discord-chat .chat-group-button > span { display: initial; }
  .discord-chat .contact-row { width: 100%; height: auto; margin: 2px 0; justify-content: flex-start; }
}

@media (max-width: 720px) {
  .discord-chat.chat-layout { height: calc(100svh - 132px); grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .discord-chat .chat-contacts { max-height: 188px; border-bottom: 1px solid #101115; display: block; overflow-y: auto; }
  .chat-server-head { min-height: 50px; padding: 8px 11px; }
  .channel-section, .direct-section { padding: 7px; border-top: 0; }
  .channel-list, .discord-chat .contact-list { display: flex; gap: 5px; overflow-x: auto; }
  .chat-channel { width: auto; min-width: max-content; grid-template-columns: 20px auto auto auto; }
  .discord-chat .contact-row { width: auto; min-width: 48px; height: 42px; margin: 0; padding: 5px; }
  .discord-chat .contact-copy { display: none; }
  .channel-section-label { min-height: 22px; }
  .discord-chat .chat-main { border-radius: 0; }
  .discord-chat .chat-head { min-height: 60px; }
  .chat-head-button span { display: none; }
  .message-image img { max-height: 220px; }
}

/* Todu Connect — professional chat refinement */
.main-area.chat-page { height: 100svh; overflow: hidden; padding: 18px 20px; }
.chat-page .topbar { min-height: 54px; padding-bottom: 14px; }
.chat-page .page-subtitle { display: none; }
.chat-page .workspace { width: 100%; max-width: none; }
.chat-page .discord-chat.chat-layout { height: calc(100svh - 86px); min-height: 560px; margin: 0 auto; border: 1px solid rgba(120, 73, 205, .13); background: #18181d; box-shadow: 0 24px 70px rgba(23, 17, 34, .14); }
.chat-page .chat-messages { background: radial-gradient(circle at 90% 8%, rgba(99, 211, 235, .055), transparent 25%), radial-gradient(circle at 12% 92%, rgba(142, 45, 255, .055), transparent 30%), linear-gradient(180deg, #fff, #fbfafe); }
.chat-server-head { min-height: 76px; padding: 12px; border-bottom-color: rgba(255,255,255,.10); background: radial-gradient(circle at 15% 0%, rgba(255,255,255,.22), transparent 30%), linear-gradient(125deg, #6f31d8 0%, #9d35e7 48%, #44c5df 115%); }
.chat-server-head > div { display: flex; }
.chat-server-brand { min-width: 0; display: flex !important; align-items: center; gap: 10px; }
.chat-server-brand > div { min-width: 0; display: grid; gap: 2px; }
.chat-server-brand strong { font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.chat-server-brand span { color: rgba(255,255,255,.70); }
.chat-brand-logo { width: 39px; height: 39px; flex: 0 0 auto; padding: 7px; border: 1px solid rgba(255,255,255,.34); border-radius: 12px; background: rgba(255,255,255,.92); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(35,11,69,.20); }
.chat-brand-logo img { width: 100%; height: auto; display: block; }
.chat-server-actions { flex: 0 0 auto; display: flex !important; align-items: center; gap: 6px; }
.chat-server-head .chat-add-channel { position: relative; color: #fff; border: 1px solid rgba(255,255,255,.19); background: rgba(15,9,27,.18); }
.chat-server-head .chat-add-channel:hover { background: rgba(15,9,27,.32); }
.chat-add-channel.has-badge em { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border: 2px solid #8f36df; border-radius: 999px; color: #fff; background: #ec385a; display: grid; place-items: center; font-size: 7px; font-style: normal; font-weight: 800; }
.discord-chat .contact-row { min-height: 56px; padding: 8px; border: 1px solid transparent; }
.discord-chat .contact-row.role-todu, .discord-chat .contact-row.role-admin { background: linear-gradient(100deg, rgba(142,45,255,.09), rgba(68,197,223,.055)); }
.discord-chat .contact-row.role-moderator { background: rgba(255,255,255,.018); }
.discord-chat .contact-row.role-todu:hover, .discord-chat .contact-row.role-admin:hover { border-color: rgba(116,192,234,.20); background: linear-gradient(100deg, rgba(142,45,255,.18), rgba(68,197,223,.11)); }
.discord-chat .contact-row.is-active { border-color: rgba(125,201,239,.30); background: linear-gradient(105deg, rgba(126,53,222,.46), rgba(52,113,141,.26)); box-shadow: inset 3px 0 0 #61d1e6; }
.discord-chat .contact-copy { display: grid; gap: 4px; }
.discord-chat .contact-copy strong { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.discord-chat .contact-copy > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.contact-role, .contact-restriction { padding: 3px 5px; border-radius: 5px; color: #bcb4c6; background: rgba(255,255,255,.07); font-size: 7px; font-style: normal; font-weight: 750; letter-spacing: .03em; }
.role-todu .contact-role { color: var(--role-todu-soft); background: var(--role-todu-bg); }
.role-admin .contact-role { color: #0e7490; background: #cffafe; }
.role-moderator .contact-role { color: #15803d; background: #dcfce7; }
.contact-restriction { color: #ffd7a3; background: rgba(239,155,49,.15); }
.contact-restriction.danger { color: #ffb6c3; background: rgba(236,56,90,.17); }
.discord-chat .chat-main { background: #fff; }
.discord-chat .chat-title .avatar { box-shadow: 0 0 0 3px rgba(130,71,224,.10); }
.chat-head-actions { max-width: 50%; flex-wrap: wrap; justify-content: flex-end; }
.chat-head-button.active-warning { color: #a45b00; border-color: #f0d29f; background: #fff8eb; }
.chat-head-button.danger.is-active { color: #fff; border-color: #d92d4d; background: #e33a58; }
.chat-locked.is-restricted { color: #995d12; border-top-color: #f2d6a7; background: #fff9ee; }
.chat-locked.is-restricted > .icon { color: #e2932c; }
.message-row { margin-bottom: 20px; align-items: flex-end; }
.message-row .avatar { width: 34px; height: 34px; box-shadow: 0 4px 12px rgba(38,27,53,.11); }
.message-row .message-body { max-width: min(76%, 760px); }
.message-meta { min-height: 18px; margin: 0 3px 5px; display: flex; align-items: center; gap: 6px; color: #9991a2; font-size: 9px; font-weight: 500; }
.message-meta strong { color: #4b4353; font-size: 10px; font-weight: 700; }
.message-meta time { color: #aaa3b0; }
.message-role { padding: 3px 6px; border-radius: 6px; color: #6c35c7; background: #f0e7ff; font-size: 7px; font-weight: 750; letter-spacing: .025em; }
.message-row.role-todu .message-role { color: #7c3aed; background: #f0e7ff; }
.message-row.role-admin .message-role { color: #0e7490; background: #cffafe; }
.message-row.role-moderator .message-role { color: #15803d; background: #dcfce7; }
.message-row.mine .message-meta { justify-content: flex-end; }
.message-bubble { padding: 12px 14px; border: 1px solid #e8e3ec; border-radius: 5px 16px 16px 16px; background: linear-gradient(135deg, #fff, #faf8fc); box-shadow: 0 7px 18px rgba(31,22,44,.055); font-size: 12.5px; }
.message-row.role-todu:not(.mine) .message-bubble { color: #fff; border: 0; background: linear-gradient(125deg, #7135d7, #9c39df 53%, #43b9d4); box-shadow: 0 10px 24px rgba(99,52,190,.18); }
.message-row.role-admin:not(.mine) .message-bubble { color: #fff; border: 0; background: var(--role-admin-gradient); box-shadow: 0 10px 24px rgba(8,145,178,.20); }
.message-row.role-moderator:not(.mine) .message-bubble { color: #fff; border: 0; background: var(--role-mod-gradient); box-shadow: 0 10px 24px rgba(22,163,74,.18); }
.message-row.role-todu:not(.mine) .chat-mention, .message-row.role-admin:not(.mine) .chat-mention, .message-row.role-moderator:not(.mine) .chat-mention { color: #fff; background: rgba(255,255,255,.18); }
.message-row.mine .message-bubble { border-radius: 16px 5px 16px 16px; background: linear-gradient(125deg, #6f36dc, #a13ce5 52%, #42c2dc); }
.message-row.role-todu:not(.mine) .message-file, .message-row.role-admin:not(.mine) .message-file, .message-row.role-moderator:not(.mine) .message-file { color: #fff; background: rgba(255,255,255,.16); }
.message-receipt { min-height: 18px; margin: 4px 4px 0; color: #9f97a6; display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 8px; font-weight: 600; }
.message-receipt .icon { width: 11px; height: 11px; }
.message-receipt.is-seen { color: #188d70; }
.typing-indicator { min-height: 24px; padding: 2px 18px; color: #6f3cc5; font-size: 10px; font-weight: 600; }
.typing-indicator:not(:empty)::before { content: ""; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: #7f43dc; display: inline-block; box-shadow: 8px 0 0 rgba(127,67,220,.55), 16px 0 0 rgba(127,67,220,.25); animation: typing-pulse 1s ease-in-out infinite; }
@keyframes typing-pulse { 50% { opacity: .45; } }
.chat-compose-foot { align-items: center; }
.chat-file-selection { min-width: 0; max-width: 58%; padding: 5px 8px; overflow: hidden; border-radius: 7px; color: #9992a2; background: #f7f5f9; text-overflow: ellipsis; white-space: nowrap; }
.chat-file-selection.has-file { color: #246d5b; background: #e9f8f2; font-weight: 650; box-shadow: inset 0 0 0 1px #ccebdd; }
.departed-chat-list { display: grid; gap: 10px; }
.departed-chat-row { padding: 12px; border: 1px solid #e9e4ed; border-radius: 14px; background: #fbfafc; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; }
.departed-chat-row > div { min-width: 0; display: grid; gap: 4px; }
.departed-chat-row strong { font-size: 12px; }
.departed-chat-row span { color: #8f8798; font-size: 10px; }
.chat-blocked-card { min-height: calc(100svh - 130px); padding: 40px; border: 1px solid #ecdce2; border-radius: 22px; background: radial-gradient(circle at 85% 10%, rgba(236,56,90,.08), transparent 28%), #fff; display: flex; align-items: center; justify-content: center; gap: 18px; text-align: left; box-shadow: 0 18px 45px rgba(31,22,44,.06); }
.chat-blocked-card > .icon { width: 48px; height: 48px; color: #d53754; }
.chat-blocked-card h2 { margin: 6px 0; font-size: 22px; }
.chat-blocked-card p { max-width: 520px; margin: 0; color: #807787; font-size: 12px; line-height: 1.6; }

@media (max-width: 720px) {
  .main-area.chat-page { height: 100svh; padding: 10px; }
  .chat-page .topbar { min-height: 48px; padding-bottom: 9px; }
  .chat-page .discord-chat.chat-layout { height: calc(100svh - 68px); min-height: 520px; border-radius: 15px; }
  .chat-server-head { min-height: 58px; }
  .chat-brand-logo { width: 34px; height: 34px; }
  .chat-server-brand strong { font-size: 10px; }
  .chat-server-brand span { font-size: 8px; }
  .chat-head-actions { max-width: 42%; gap: 4px; }
  .chat-head-button { width: 32px; min-height: 32px; padding: 0; justify-content: center; }
  .message-row .message-body { max-width: 86%; }
  .message-meta { flex-wrap: wrap; }
  .message-role { display: none; }
  .chat-file-selection { max-width: 64%; }
  .departed-chat-row { grid-template-columns: auto minmax(0, 1fr); }
  .departed-chat-row .danger-button { grid-column: 1 / -1; }
}

/* Todu Chat 3.5 — Discord-inspired, larger and centered */
.main-area.chat-page { display: flex; flex-direction: column; background: #f4f3f7; }
.chat-page .workspace { min-height: 0; flex: 1; display: grid; place-items: center; }
.chat-page .discord-chat.chat-layout { width: min(100%, 1280px); height: min(720px, calc(100% - 20px)); min-height: 520px; grid-template-columns: 270px minmax(0, 1fr); border: 1px solid #202126; border-radius: 18px; background: #2b2d31; box-shadow: 0 22px 65px rgba(20,18,28,.18); }
.discord-chat .chat-contacts { color: #dbdee1; background: #2b2d31; }
.channel-section { padding: 15px 9px 10px; }
.channel-section-label { min-height: 34px; padding: 0 8px; }
.channel-section-label > span { color: #949ba4; font-size: 11px; font-weight: 700; letter-spacing: .055em; }
.channel-label-actions { display: flex; align-items: center; gap: 4px; }
.channel-section-label button { position: relative; width: 29px; height: 29px; color: #b5bac1; }
.channel-section-label button:hover { color: #fff; background: #3f4147; }
.channel-section-label button.has-badge em { position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; padding: 0 3px; border: 2px solid #2b2d31; border-radius: 999px; color: #fff; background: #f23f43; display: grid; place-items: center; font-size: 7px; font-style: normal; font-weight: 800; }
.chat-channel { min-height: 44px; padding: 9px 10px; border-radius: 7px; color: #949ba4; }
.chat-channel > span:nth-child(2) { font-size: 14px; font-weight: 550; }
.chat-channel:hover { color: #dbdee1; background: #35373c; }
.chat-channel.is-active { color: #f2f3f5; background: #404249; box-shadow: none; }
.chat-channel b { font-size: 8px; }
.direct-section { padding: 8px 9px 13px; border-top-color: #232428; }
.discord-chat .contact-row { min-height: 58px; padding: 8px 9px; border-radius: 7px; }
.discord-chat .contact-row.role-todu, .discord-chat .contact-row.role-admin, .discord-chat .contact-row.role-moderator { background: transparent; }
.discord-chat .contact-row:hover { color: #dbdee1; background: #35373c; }
.discord-chat .contact-row.is-active { color: #fff; border-color: transparent; background: #404249; box-shadow: none; }
.discord-chat .contact-row.role-todu { position: relative; overflow: hidden; }
.discord-chat .contact-row.role-todu::before { content: ""; position: absolute; inset: 0; opacity: .18; background: linear-gradient(110deg, #8e2dff, #b43dff, #62d7ef, #8e2dff); background-size: 260% 100%; animation: todu-flow 4s linear infinite; pointer-events: none; }
.discord-chat .contact-row.role-todu > * { position: relative; z-index: 1; }
@keyframes todu-flow { to { background-position: 260% 0; } }
.discord-chat .contact-row .avatar { width: 36px; height: 36px; font-size: 11px; }
.discord-chat .contact-copy strong { color: #f2f3f5; font-size: 13px; font-weight: 600; }
.contact-role { color: #949ba4; background: transparent; font-size: 9px; padding: 0; }
.role-todu .contact-role { color: #cfa8ff; font-weight: 800; letter-spacing: .08em; }
.role-admin .contact-role { color: #a5f3fc; background: var(--role-admin-bg); font-weight: 700; }
.role-moderator .contact-role { color: #bbf7d0; background: var(--role-mod-bg); font-weight: 700; }
.discord-chat .chat-main { border-radius: 0 18px 18px 0; color: #dbdee1; background: #313338; }
.discord-chat .chat-head { min-height: 60px; padding: 10px 18px; border-bottom: 1px solid #26272d; color: #f2f3f5; background: #313338; box-shadow: 0 2px 4px rgba(0,0,0,.16); }
.discord-chat .chat-title strong { color: #f2f3f5; font-size: 16px; font-weight: 700; }
.discord-chat .chat-title span { color: #949ba4; font-size: 11px; }
.channel-head-icon { color: #b5bac1 !important; background: #404249; }
.chat-head-button { color: #b5bac1; border-color: #4b4d55; background: #383a40; font-size: 11px; }
.chat-head-button:hover { color: #fff; background: #43454c; }
.chat-page .chat-messages { padding: 16px 12px 24px; background: #313338; }
.message-row, .message-row.mine { position: relative; margin: 0; padding: 9px 12px; align-items: flex-start; flex-direction: row; border-radius: 4px; }
.message-row:hover { background: #2e3035; }
.message-row.role-todu { overflow: hidden; margin: 4px 0; border: 1px solid rgba(170,92,255,.22); background: linear-gradient(110deg, rgba(142,45,255,.10), rgba(98,215,239,.055)); }
.message-row.role-todu::before { content: ""; position: absolute; inset: 0; opacity: .14; background: linear-gradient(110deg, transparent 15%, #a541ff 42%, #62d7ef 58%, transparent 85%); background-size: 240% 100%; animation: todu-message-shine 5s ease-in-out infinite; pointer-events: none; }
@keyframes todu-message-shine { 0%,100% { background-position: 180% 0; } 50% { background-position: -80% 0; } }
.message-row > * { position: relative; z-index: 1; }
.message-row .avatar { width: 40px; height: 40px; margin: 1px 8px 0 0; }
.message-row .message-body { width: min(100%, 820px); max-width: calc(100% - 76px); }
.message-meta, .message-row.mine .message-meta { min-height: 21px; margin: 0 0 2px; justify-content: flex-start; color: #949ba4; font-size: 10px; }
.message-meta strong { color: #f2f3f5; font-size: 14px; font-weight: 650; }
.message-row.role-todu .message-meta strong { position: relative; overflow: hidden; padding: 3px 9px; border-radius: 6px; color: #fff; background: linear-gradient(100deg, #8e2dff, #b43dff 52%, #55cfe8); background-size: 180% 100%; animation: todu-name-card 3.5s ease-in-out infinite alternate; box-shadow: 0 4px 12px rgba(142,45,255,.22); }
@keyframes todu-name-card { to { background-position: 100% 0; box-shadow: 0 4px 16px rgba(85,207,232,.24); } }
.message-role { padding: 2px 5px; color: #b5bac1; background: #3f4147; font-size: 8px; }
.message-row.role-admin .message-role { color: #a5f3fc; background: rgba(8,145,178,.22); }
.message-row.role-moderator .message-role { color: #bbf7d0; background: rgba(34,197,94,.20); }
.message-bubble, .message-row.mine .message-bubble, .message-row.role-todu:not(.mine) .message-bubble, .message-row.role-admin:not(.mine) .message-bubble, .message-row.role-moderator:not(.mine) .message-bubble { padding: 2px 0; border: 0; border-radius: 0; color: #dbdee1; background: transparent; box-shadow: none; font-size: 14px; font-weight: 400; line-height: 1.55; }
.message-row.role-todu:not(.mine) .chat-mention, .message-row.role-admin:not(.mine) .chat-mention, .message-row.mine .chat-mention, .chat-mention { color: #e7d6ff; background: rgba(142,45,255,.35); }
.message-receipt { margin: 3px 0 0; justify-content: flex-start; color: #949ba4; font-size: 9px; }
.message-receipt.is-seen { color: #5fcaad; }
.message-delete { margin-top: 7px; color: #949ba4; }
.typing-indicator { min-height: 28px; padding: 4px 20px; color: #b5bac1; background: #313338; font-size: 11px; }
.chat-compose { padding: 0 16px 14px; border-top: 0; background: #313338; }
.chat-compose-row { padding: 2px; border-radius: 9px; background: #383a40; }
.chat-compose textarea.app-control { min-height: 52px; color: #dbdee1; border: 0; background: transparent; font-size: 14px; }
.chat-compose textarea.app-control::placeholder { color: #949ba4; }
.attach-label { width: 48px; min-height: 48px; color: #b5bac1; border: 0; background: transparent; }
.attach-label:hover { color: #fff; background: #45474e; }
.send-button { min-width: 96px; min-height: 48px; border-radius: 8px; font-size: 13px; }
.chat-compose-foot { min-height: 24px; margin: 5px 2px 0; color: #8e9297; font-size: 10px; }
.chat-file-selection:empty { display: none; }
.chat-file-selection.has-file { max-width: 70%; color: #a8ead7; background: #27443d; }
.chat-locked { color: #b5bac1; border-top-color: #26272d; background: #2b2d31; }
.chat-locked strong { color: #f2f3f5; font-size: 13px; }
.chat-empty { color: #949ba4; }

@media (max-width: 940px) and (min-width: 721px) {
  .chat-page .discord-chat.chat-layout { width: 100%; grid-template-columns: 230px minmax(0,1fr); }
}

@media (max-width: 720px) {
  .main-area.chat-page { height: 100svh; padding: 0; background: #313338; }
  .chat-page .topbar { min-height: 58px; padding: 8px 10px; background: #2b2d31; }
  .chat-page .topbar h1 { color: #f2f3f5; font-size: 20px; }
  .chat-page .crumb { color: #949ba4; }
  .chat-page .workspace { display: block; }
  .chat-page .discord-chat.chat-layout { width: 100%; height: calc(100svh - 58px); min-height: 0; grid-template-rows: auto minmax(0, 1fr); border: 0; border-radius: 0; box-shadow: none; }
  .discord-chat .chat-contacts { max-height: 178px; }
  .channel-section { padding: 8px 7px 5px; }
  .channel-section-label { min-height: 28px; }
  .chat-channel { min-height: 40px; }
  .chat-channel > span:nth-child(2) { font-size: 13px; }
  .direct-section { padding: 5px 7px 8px; }
  .discord-chat .contact-row { min-width: 48px; min-height: 46px; }
  .discord-chat .chat-main { border-radius: 0; }
  .discord-chat .chat-head { min-height: 56px; padding: 8px 10px; }
  .discord-chat .chat-title strong { font-size: 14px; }
  .discord-chat .chat-title span { max-width: 180px; font-size: 9px; }
  .chat-page .chat-messages { padding: 9px 4px 16px; }
  .message-row, .message-row.mine { padding: 8px 7px; }
  .message-row .avatar { width: 34px; height: 34px; margin-right: 6px; }
  .message-row .message-body { max-width: calc(100% - 48px); }
  .message-meta strong { font-size: 13px; }
  .message-bubble, .message-row.mine .message-bubble, .message-row.role-todu:not(.mine) .message-bubble, .message-row.role-admin:not(.mine) .message-bubble, .message-row.role-moderator:not(.mine) .message-bubble { font-size: 13px; }
  .chat-compose { padding: 0 7px 8px; }
  .chat-compose-row { gap: 2px; }
  .chat-compose textarea.app-control { min-height: 48px; padding: 12px 8px; font-size: 13px; }
  .attach-label { width: 42px; min-width: 42px; min-height: 44px; }
  .send-button { width: 44px; min-width: 44px; min-height: 44px; }
  .chat-compose-foot { padding: 0 3px; font-size: 9px; }
  .chat-file-selection.has-file { max-width: 65%; }
}

/* Todu Chat 3.6 — logo, controls and responsive finishing */
.mobile-menu { display: none !important; }
.sidebar-brand { height: 58px; margin-bottom: 14px; padding: 0; overflow: hidden; justify-content: center; }
.sidebar-brand img { width: 195px !important; max-width: none !important; height: auto !important; object-fit: initial !important; transform: translateY(-13px); }
.hero-visual-mark { right: clamp(20px, 5vw, 72px); bottom: 12px; width: min(48%, 520px); height: 160px; border-radius: 17px; opacity: .72; object-fit: cover; object-position: center 82%; filter: drop-shadow(0 18px 28px rgba(0,0,0,.25)); transform: none; }
.chat-page .discord-chat.chat-layout { width: min(100%, 1380px); height: min(780px, calc(100% - 16px)); }
.discord-chat .contact-copy strong { min-width: 0; justify-content: flex-start; gap: 7px; }
.discord-chat .contact-copy strong > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-role { flex: 0 0 auto; padding: 3px 7px; border-radius: 6px; color: #c8cbd0; background: #3c3e44; font-family: var(--font-display); font-size: 10.5px; font-style: normal; font-weight: 650; letter-spacing: .01em; line-height: 1.2; }
.role-todu .contact-role { color: #e7d5ff; background: rgba(142,45,255,.22); font-weight: 800; letter-spacing: .075em; }
.role-admin .contact-role { color: #cffafe; background: rgba(8,145,178,.20); font-weight: 700; }
.role-moderator .contact-role { color: #dcfce7; background: rgba(34,197,94,.18); font-weight: 700; }
.discord-chat .contact-row .online-dot { width: 8px; height: 8px; margin: 0 0 0 2px; align-self: center; }
.online-dot.online { background: #23d18b; box-shadow: 0 0 0 3px rgba(35,209,139,.14); }
.online-dot.live { background: #f05267; box-shadow: 0 0 0 3px rgba(240,82,103,.15); }
.chat-messages, .discord-chat .chat-contacts, .channel-list, .discord-chat .contact-list { scrollbar-width: none; }
.chat-messages::-webkit-scrollbar, .discord-chat .chat-contacts::-webkit-scrollbar, .channel-list::-webkit-scrollbar, .discord-chat .contact-list::-webkit-scrollbar { width: 0; height: 0; display: none; }
.chat-compose { padding: 0 16px 16px; }
.chat-compose-row { min-height: 58px; padding: 5px 6px; align-items: center; border: 1px solid #44464d; border-radius: 12px; background: #383a40; box-shadow: 0 6px 18px rgba(0,0,0,.10); }
.chat-compose textarea.app-control { min-height: 46px; padding: 12px 10px; }
.attach-label { width: 40px; min-width: 40px; min-height: 40px; height: 40px; border-radius: 50%; color: #d2d5d8; background: #2b2d31; }
.attach-label .icon { width: 19px; height: 19px; }
.attach-label:hover { color: #fff; background: #4a4d55; transform: none; }
.send-button { width: 42px; min-width: 42px; min-height: 42px; height: 42px; padding: 0; border-radius: 50%; background: linear-gradient(135deg, #8e2dff, #b43dff 55%, #58cfe7); box-shadow: 0 7px 18px rgba(142,45,255,.28); }
.send-button .icon { width: 18px; height: 18px; transform: translateX(-1px); }
.send-button:hover { filter: brightness(1.1); transform: translateY(-1px) scale(1.03); }
.chat-compose-foot { min-height: 0; margin: 6px 4px 0; }
.chat-compose-foot:has(.chat-file-selection:empty) { display: none; }
.chat-file-selection.has-file { max-width: 100%; padding: 6px 9px; color: #b8f0df; background: #29443e; font-size: 10px; }
.chat-locked.is-restricted { min-height: 82px; padding: 14px 18px; border-top: 1px solid #42444b; color: #b5bac1; background: linear-gradient(105deg, #2b2d31, #30313a); justify-content: flex-start; }
.chat-locked.is-restricted > .icon { display: none; }
.chat-restricted-icon { width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid rgba(180,61,255,.28); border-radius: 12px; color: #d69cff; background: rgba(142,45,255,.13); display: grid; place-items: center; }
.chat-restricted-icon .icon { width: 19px; height: 19px; }
.chat-locked.is-restricted strong { color: #f2f3f5; font-size: 13px; }
.chat-locked.is-restricted span { color: #aeb2b8; font-size: 11px; }
.chat-blocked-card { min-height: 0; width: min(100%, 920px) !important; height: min(520px, calc(100% - 30px)); padding: 46px; border: 1px solid rgba(166,68,239,.28); border-radius: 24px; color: #f2f3f5; background: radial-gradient(circle at 12% 15%, rgba(142,45,255,.20), transparent 32%), radial-gradient(circle at 88% 85%, rgba(98,215,239,.12), transparent 30%), #23242a; display: flex !important; align-items: center; justify-content: center; gap: 20px; text-align: left; box-shadow: 0 25px 70px rgba(21,16,30,.24); }
.chat-blocked-card > .icon { display: none; }
.chat-blocked-icon { width: 68px; height: 68px; flex: 0 0 auto; border: 1px solid rgba(192,94,255,.32); border-radius: 20px; color: #d69cff; background: linear-gradient(145deg, rgba(142,45,255,.18), rgba(98,215,239,.10)); display: grid; place-items: center; box-shadow: 0 12px 28px rgba(82,32,134,.22); }
.chat-blocked-icon .icon { width: 31px; height: 31px; }
.chat-blocked-card .section-eyebrow { color: #bda7d0; }
.chat-blocked-card h2 { color: #fff; font-size: 24px; }
.chat-blocked-card p { color: #b5bac1; font-size: 13px; }
.chat-channel .chat-unread, .contact-row .chat-unread { min-width: 20px; height: 20px; padding: 0 5px; margin: 0; justify-self: end; align-self: center; border: 0; border-radius: 10px; color: #fff; background: #f23f43; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 9px; font-style: normal; font-weight: 800; line-height: 20px; text-align: center; box-shadow: 0 3px 9px rgba(242,63,67,.28); }
.typing-indicator { min-height: 34px; padding: 4px 18px 6px; display: flex; align-items: center; gap: 9px; overflow: hidden; color: #b5bac1; }
.typing-indicator:not(:empty)::before { display: none; content: none; }
.typing-avatars { height: 24px; flex: 0 0 auto; display: flex; align-items: center; padding-left: 4px; }
.typing-avatars .avatar { width: 23px; height: 23px; margin-left: -5px; border: 2px solid #313338; font-size: 7px; box-shadow: none; }
.typing-copy { min-width: 0; display: flex; align-items: baseline; gap: 5px; overflow: hidden; white-space: nowrap; }
.typing-copy strong { max-width: min(520px, 55vw); overflow: hidden; color: #e3e5e8; font-size: 10.5px; font-weight: 650; text-overflow: ellipsis; }
.typing-copy > span { color: #949ba4; font-size: 10px; }
.typing-wave { height: 15px; flex: 0 0 auto; display: flex; align-items: flex-end; gap: 2px; }
.typing-wave i { width: 3px; height: 6px; border-radius: 3px; background: linear-gradient(#b43dff, #62d7ef); animation: typing-wave 850ms ease-in-out infinite alternate; }
.typing-wave i:nth-child(2) { height: 11px; animation-delay: 140ms; }
.typing-wave i:nth-child(3) { height: 8px; animation-delay: 280ms; }
@keyframes typing-wave { to { height: 14px; opacity: .55; } }

@media (max-width: 940px) {
  .mobile-menu { display: inline-grid !important; }
}

@media (max-width: 720px) {
  .sidebar-brand { height: 54px; }
  .sidebar-brand img { width: 184px !important; transform: translateY(-13px); }
  .hero-visual-mark { right: -12px; bottom: 12px; width: 58%; height: 112px; border-radius: 13px; opacity: .48; object-position: center 82%; }
  .chat-page .discord-chat.chat-layout { width: 100%; height: calc(100svh - 58px); grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .discord-chat .chat-contacts { overflow-x: hidden; overflow-y: auto; }
  .channel-list, .discord-chat .contact-list { overflow-x: auto; overflow-y: hidden; }
  .chat-messages { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .contact-role { padding: 3px 6px; font-size: 9.5px; }
  .chat-compose { padding: 0 7px 8px; }
  .chat-compose-row { min-height: 52px; padding: 3px 4px; border-radius: 10px; }
  .attach-label { width: 38px; min-width: 38px; height: 38px; min-height: 38px; }
  .send-button { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
  .chat-blocked-card { width: calc(100% - 20px) !important; height: auto; min-height: 360px; padding: 28px 22px; border-radius: 18px; flex-direction: column; text-align: center; }
  .chat-blocked-card h2 { font-size: 20px; }
  .chat-blocked-card p { font-size: 12px; }
  .chat-locked.is-restricted { min-height: 76px; padding: 11px; }
  .chat-restricted-icon { width: 38px; height: 38px; }
  .typing-indicator { min-height: 32px; padding: 3px 10px 5px; gap: 7px; }
  .typing-copy strong { max-width: 190px; font-size: 9.5px; }
  .typing-copy > span { font-size: 9px; }
}

/* Chat image viewer */
.modal-backdrop:has(.chat-lightbox) { padding: 24px; background: rgba(4, 5, 9, .88); backdrop-filter: blur(14px) saturate(.85); }
.modal:has(.chat-lightbox) { width: min(1120px, 96vw); max-height: 94svh; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.10); border-radius: 20px; color: #f2f3f5; background: #191a1f; box-shadow: 0 34px 100px rgba(0,0,0,.58); }
.modal:has(.chat-lightbox) .modal-head { min-height: 58px; margin: 0; padding: 13px 16px 13px 20px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.07); background: #202126; }
.modal:has(.chat-lightbox) .modal-head h2 { max-width: min(720px, 70vw); overflow: hidden; color: #f2f3f5; font-family: var(--font-display); font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0; }
.modal:has(.chat-lightbox) .modal-close { width: 34px; height: 34px; border-radius: 10px; color: #b5bac1; background: rgba(255,255,255,.055); }
.modal:has(.chat-lightbox) .modal-close:hover { color: #fff; background: #da373c; }
.chat-lightbox { min-height: 0; display: block; border-radius: 0; background: #0d0e12; }
.chat-lightbox-stage { min-height: 320px; height: min(72svh, 760px); padding: 20px; display: grid; place-items: center; background: radial-gradient(circle at center, #292b33 0, #16171c 54%, #0d0e12 100%); }
.chat-lightbox-stage img { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; border-radius: 8px; object-fit: contain; box-shadow: 0 18px 55px rgba(0,0,0,.46); }
.chat-lightbox-caption { min-height: 54px; padding: 11px 18px; display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; column-gap: 9px; border-top: 1px solid rgba(255,255,255,.07); color: #e3e5e8; background: #202126; }
.chat-lightbox-caption > .icon { width: 18px; height: 18px; grid-row: 1 / span 2; color: #c47aff; }
.chat-lightbox-caption span { min-width: 0; overflow: hidden; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.chat-lightbox-caption small { color: #949ba4; font-size: 9px; }

@media (max-width: 720px) {
  .modal-backdrop:has(.chat-lightbox) { padding: 0; }
  .modal:has(.chat-lightbox) { width: 100vw; max-height: 100svh; height: 100svh; border: 0; border-radius: 0; }
  .modal:has(.chat-lightbox) .modal-head { min-height: 54px; }
  .chat-lightbox-stage { height: calc(100svh - 112px); min-height: 0; padding: 10px; }
  .chat-lightbox-caption { min-height: 58px; padding: 9px 13px; }
  .chat-lightbox-caption small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Maintenance, licenses and account management */
.chat-maintenance { position: relative; width: min(100%, 920px) !important; height: min(560px, calc(100% - 30px)); padding: 54px; overflow: hidden; border: 1px solid #343640; border-radius: 24px; color: #f2f3f5; background: radial-gradient(circle at 15% 10%, rgba(142,45,255,.25), transparent 34%), radial-gradient(circle at 88% 86%, rgba(98,215,239,.16), transparent 32%), #202126; display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 28px 80px rgba(18,16,25,.22); isolation: isolate; }
.chat-maintenance-glow { position: absolute; z-index: -1; width: 300px; height: 300px; border-radius: 50%; background: rgba(164,72,255,.11); filter: blur(45px); animation: maintenance-pulse 3.2s ease-in-out infinite alternate; }
.chat-maintenance-icon { width: 82px; height: 82px; margin-bottom: 22px; border: 1px solid rgba(207,143,255,.34); border-radius: 25px; color: #d9a8ff; background: linear-gradient(145deg, rgba(142,45,255,.24), rgba(98,215,239,.10)); display: grid; place-items: center; box-shadow: 0 18px 45px rgba(93,36,153,.30); }
.chat-maintenance-icon .icon { width: 34px; height: 34px; animation: maintenance-spin 8s linear infinite; }
.chat-maintenance .section-eyebrow { color: #bda9ce; letter-spacing: .16em; }
.chat-maintenance h2 { margin: 9px 0 10px; color: #fff; font-size: clamp(25px, 3vw, 38px); letter-spacing: -.045em; }
.chat-maintenance p { max-width: 590px; margin: 0; color: #b5bac1; font-size: 13px; line-height: 1.75; }
.chat-maintenance-status { margin-top: 26px; padding: 9px 14px; border: 1px solid rgba(98,215,239,.18); border-radius: 999px; color: #c7d2d8; background: rgba(255,255,255,.045); display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 650; }
.chat-maintenance-status i { width: 8px; height: 8px; border-radius: 50%; background: #63d7ef; box-shadow: 0 0 0 5px rgba(99,215,239,.10); animation: maintenance-dot 1.2s ease-in-out infinite alternate; }
@keyframes maintenance-spin { to { transform: rotate(360deg); } }
@keyframes maintenance-pulse { to { transform: scale(1.25); opacity: .55; } }
@keyframes maintenance-dot { to { opacity: .4; } }

.license-list { display: grid; gap: 10px; }
.license-row { padding: 15px 16px; border: 1px solid #e7e2ec; border-radius: 15px; background: linear-gradient(145deg, #fff, #fbfaff); align-items: flex-start; box-shadow: 0 6px 18px rgba(39,27,61,.04); }
.license-row > div:first-child { min-width: 0; display: grid; gap: 5px; }
.license-row code { width: fit-content; padding: 5px 8px; border-radius: 7px; color: #6332a1; background: #f2eaff; font-size: 11px; font-weight: 750; }
.license-row > div:first-child > span { color: #88818e; font-size: 10px; }
.license-status, .password-summary, .request-status { min-height: 27px; padding: 5px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; font-size: 9px; font-weight: 750; white-space: nowrap; }
.license-status i, .password-summary i, .request-status i { width: 7px; height: 7px; border-radius: 50%; }
.license-status.is-used { color: #18785d; background: #e6f7f1; }
.license-status.is-used i { background: #22ae83; box-shadow: 0 0 0 4px rgba(34,174,131,.11); }
.license-status.is-waiting { color: #8b641d; background: #fff4d9; }
.license-status.is-waiting i { background: #e8a72d; box-shadow: 0 0 0 4px rgba(232,167,45,.12); }
.license-assignee { margin-top: 7px; padding-top: 10px; border-top: 1px solid #eeeaf2; display: flex; align-items: center; gap: 9px; }
.license-assignee .avatar { width: 31px; height: 31px; font-size: 9px; }
.license-assignee div { display: grid; gap: 2px; }
.license-assignee strong { color: #352e3a; font-size: 11px; }
.license-assignee span { color: #928a98; font-size: 9px; }

.user-manage-modal { width: min(100%, 670px); padding: 0; overflow: hidden; border-radius: 20px; }
.user-manage-modal .modal-head, .password-action-modal .modal-head { margin: 0; padding: 20px 22px 16px; }
.managed-user-hero { padding: 18px 22px; border-block: 1px solid #ece8f0; background: linear-gradient(110deg, #f7f0ff, #f1fbfd); display: flex; align-items: center; gap: 13px; }
.managed-user-hero .avatar { width: 52px; height: 52px; font-size: 14px; box-shadow: 0 0 0 4px rgba(255,255,255,.85), 0 9px 22px rgba(91,51,145,.15); }
.managed-user-hero > div { min-width: 0; display: grid; gap: 3px; }
.managed-user-hero strong { color: #2d2632; font-size: 15px; }
.managed-user-hero span { color: #8c8291; font-size: 10px; }
.managed-user-hero em { margin-left: auto; padding: 6px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 9px; font-style: normal; font-weight: 750; }
.managed-user-hero em i { width: 7px; height: 7px; border-radius: 50%; }
.managed-user-hero em.is-active { color: #176f56; background: #ddf5ed; }
.managed-user-hero em.is-active i { background: #20ad7e; }
.managed-user-hero em.is-disabled { color: #a53a4d; background: #ffe6eb; }
.managed-user-hero em.is-disabled i { background: #dc4961; }
.managed-user-hero em.is-banned { color: #991b1b; background: #fee2e2; }
.managed-user-hero em.is-banned i { background: #ef4444; }
.user-manage-actions { padding: 20px 22px 22px; border-top: 1px solid #ece7f0; background: linear-gradient(180deg, #fff, #faf8fb); }
.user-manage-actions-head { display: grid; gap: 5px; margin-bottom: 14px; }
.user-manage-actions-head .section-eyebrow { color: #9b4de8; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.user-manage-actions-head strong { color: #2d2632; font-size: 14px; letter-spacing: -.02em; }
.user-manage-actions-head p { margin: 0; color: #8c8291; font-size: 10px; line-height: 1.5; }
.user-manage-actions-grid { display: grid; gap: 8px; }
.user-manage-action { width: 100%; padding: 12px 14px; border: 1px solid #e9e3ed; border-radius: 13px; background: #fff; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.user-manage-action:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(47,30,76,.06); }
.user-manage-action-icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px; display: grid; place-items: center; }
.user-manage-action-icon .icon { width: 17px; height: 17px; }
.user-manage-action-copy { min-width: 0; flex: 1; display: grid; gap: 2px; }
.user-manage-action-copy strong { color: #2d2632; font-size: 12px; font-weight: 750; }
.user-manage-action-copy small { color: #928a98; font-size: 10px; line-height: 1.4; }
.user-manage-action > .icon { width: 14px; height: 14px; flex: 0 0 14px; color: #b8b0bc; opacity: .75; }
.user-manage-action.is-warn { border-color: #fed7aa; background: #fffaf5; }
.user-manage-action.is-warn .user-manage-action-icon { color: #ea580c; background: #ffedd5; }
.user-manage-action.is-warn:hover { border-color: #fdba74; }
.user-manage-action.is-ban { border-color: #fecaca; background: #fffafa; }
.user-manage-action.is-ban .user-manage-action-icon { color: #dc2626; background: #fee2e2; }
.user-manage-action.is-ban:hover { border-color: #fca5a5; }
.user-manage-action.is-success { border-color: #bbf7d0; background: #f8fffb; }
.user-manage-action.is-success .user-manage-action-icon { color: #059669; background: #d1fae5; }
.user-manage-action.is-success:hover { border-color: #86efac; }
.user-manage-action.is-danger { margin-top: 4px; border-color: #fecdd3; background: #fff5f7; }
.user-manage-action.is-danger .user-manage-action-icon { color: #be123c; background: #ffe4e6; }
.user-manage-action.is-danger:hover { border-color: #fda4af; box-shadow: 0 8px 22px rgba(190,18,60,.08); }
.user-manage-action.is-danger .user-manage-action-copy strong { color: #be123c; }
.user-manage-form { padding: 20px 22px 18px; }
.user-manage-modal .modal-rule { margin: 0; border-color: #ece8f0; }
.user-password-form { padding: 18px 22px 22px; background: #fbfafc; }
.user-password-form::before { content: "GÜVENLİK"; color: #a198a8; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.user-password-form .danger-button { justify-self: start; border-color: #f0c5cd; color: #b7344c; background: #fff1f4; }
.role-change-note { margin-top: 7px; padding: 7px 8px; border-radius: 8px; color: #75667f; background: #f5effa; display: flex; align-items: center; gap: 6px; font-size: 8.5px; font-weight: 550; line-height: 1.4; }
.role-change-note .icon { width: 12px; height: 12px; flex: 0 0 auto; color: #8b42cf; }

.password-center-card { border: 0; background: linear-gradient(145deg, #fff, #fcfaff); box-shadow: 0 18px 50px rgba(47,30,76,.07); }
.password-center-card > .card-head { padding-bottom: 17px; border-bottom: 1px solid #eeeaf2; }
.password-summary { color: #667078; background: #edf0f2; }
.password-summary i { background: #89939a; }
.password-summary.has-pending { color: #875f16; background: #fff2d2; }
.password-summary.has-pending i { background: #eea92b; box-shadow: 0 0 0 4px rgba(238,169,43,.13); }
.password-request-card { position: relative; padding: 18px; overflow: hidden; border-radius: 16px; }
.password-request-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: #aeb5ba; }
.password-request-card.status-pending::before { background: #eea92b; }
.password-request-card.status-resolved::before { background: #25ae82; }
.password-request-card.status-rejected::before { background: #d44d62; }
.password-request-card .ticket-title { min-width: 0; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; column-gap: 10px; }
.password-user-avatar { grid-row: 1 / span 2; }
.password-user-avatar .avatar { width: 38px; height: 38px; font-size: 10px; }
.password-request-card .ticket-title h3, .password-request-card .ticket-title p { grid-column: 2; }
.password-request-card .ticket-title h3 { font-size: 13px; }
.password-request-card .ticket-title p { font-size: 9px; }
.request-status.status-pending { color: #875f16; background: #fff2d2; }
.request-status.status-pending i { background: #eea92b; }
.request-status.status-resolved { color: #187257; background: #e2f6ef; }
.request-status.status-resolved i { background: #25ae82; }
.request-status.status-rejected { color: #a43d50; background: #ffe8ed; }
.request-status.status-rejected i { background: #d44d62; }
.password-request-card > .primary-small { margin-top: 14px; border-radius: 10px; background: linear-gradient(135deg, #7f34dc, #a53df1); box-shadow: 0 8px 18px rgba(127,52,220,.20); }
.reopen-request-button { min-height: 30px; padding: 6px 10px; border: 1px solid #cbb6eb; border-radius: 9px; color: #6f36a8; background: #f6efff; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 9px; font-weight: 750; cursor: pointer; transition: transform .16s ease, background .16s ease, box-shadow .16s ease; }
.reopen-request-button .icon { width: 13px; height: 13px; }
.reopen-request-button:hover { color: #fff; background: linear-gradient(135deg, #7f34dc, #a53df1); box-shadow: 0 7px 16px rgba(127,52,220,.22); transform: translateY(-1px); }
.password-request-card .ticket-reply { margin-top: 13px; border-radius: 11px; background: #f7f5f9; }
.password-action-modal { width: min(100%, 560px); padding: 0; overflow: hidden; border-radius: 20px; }
.password-request-user { padding: 14px 22px; border-block: 1px solid #ece8f0; background: linear-gradient(110deg, #f8f2ff, #f2fbfd); display: flex; align-items: center; gap: 10px; }
.password-request-user .avatar { width: 38px; height: 38px; font-size: 10px; }
.password-request-user > div { display: grid; gap: 2px; }
.password-request-user strong { color: #312a36; font-size: 12px; }
.password-request-user span, .password-request-user time { color: #918898; font-size: 9px; }
.password-request-user time { margin-left: auto; }
.password-action-modal [data-form="resolve-password-request"] { padding: 20px 22px 22px; }

@media (max-width: 720px) {
  .chat-maintenance { width: calc(100% - 20px) !important; height: calc(100% - 22px); min-height: 420px; padding: 30px 22px; border-radius: 19px; }
  .chat-maintenance-icon { width: 68px; height: 68px; border-radius: 20px; }
  .chat-maintenance h2 { font-size: 25px; }
  .chat-maintenance p { font-size: 11.5px; }
  .license-row { gap: 10px; }
  .managed-user-hero { align-items: flex-start; flex-wrap: wrap; }
  .managed-user-hero em { margin-left: 65px; }
  .user-manage-form { grid-template-columns: 1fr; }
  .password-request-card .ticket-top { align-items: flex-start; gap: 10px; }
  .password-request-card .card-head-actions { flex-direction: column; align-items: flex-end; }
  .password-request-user { flex-wrap: wrap; }
  .password-request-user time { width: 100%; margin-left: 48px; }
}

/* Leave control and monthly ranking */
.leave-control-card { border: 0; background: linear-gradient(145deg, #fff, #fcfaff); box-shadow: 0 18px 52px rgba(47,30,76,.07); }
.leave-control-card > .card-head { padding-bottom: 17px; border-bottom: 1px solid #eeeaf2; }
.leave-summary, .leave-status { min-height: 27px; padding: 5px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; font-size: 9px; font-weight: 750; white-space: nowrap; }
.leave-summary i, .leave-status i { width: 7px; height: 7px; border-radius: 50%; }
.leave-summary { color: #667078; background: #edf0f2; }
.leave-summary i { background: #89939a; }
.leave-summary.has-pending, .leave-status.status-pending { color: #875f16; background: #fff2d2; }
.leave-summary.has-pending i, .leave-status.status-pending i { background: #eea92b; box-shadow: 0 0 0 4px rgba(238,169,43,.12); }
.leave-status.status-approved { color: #187257; background: #e2f6ef; }
.leave-status.status-approved i { background: #25ae82; }
.leave-status.status-rejected { color: #a43d50; background: #ffe8ed; }
.leave-status.status-rejected i { background: #d44d62; }
.leave-request-card { position: relative; padding: 18px; overflow: hidden; border: 1px solid #e9e5ed; border-radius: 16px; background: #fff; box-shadow: 0 7px 20px rgba(46,31,69,.045); }
.leave-request-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: #abb2b8; }
.leave-request-card.status-pending::before { background: #eea92b; }
.leave-request-card.status-approved::before { background: #25ae82; }
.leave-request-card.status-rejected::before { background: #d44d62; }
.leave-request-card .ticket-title { min-width: 0; display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: center; column-gap: 11px; }
.leave-user-avatar { grid-row: 1 / span 2; }
.leave-user-avatar .avatar { width: 40px; height: 40px; font-size: 10px; }
.leave-request-card .ticket-title h3, .leave-request-card .ticket-title p { grid-column: 2; }
.leave-request-card .ticket-title h3 { font-size: 13px; }
.leave-request-card .ticket-title p { font-size: 9px; }
.leave-request-card .ticket-message { margin: 15px 0 0; padding: 12px 14px; border: 1px solid #eeeaf2; border-radius: 11px; color: #625a68; background: #faf9fb; font-size: 11px; line-height: 1.6; }
.leave-request-card [data-action="open-review-leave"] { border-radius: 9px; background: linear-gradient(135deg, #7f34dc, #a53df1); box-shadow: 0 7px 16px rgba(127,52,220,.18); }
.leave-review-modal { width: min(100%, 620px); padding: 0; overflow: hidden; border-radius: 20px; }
.leave-review-modal .modal-head { margin: 0; padding: 20px 22px 16px; }
.leave-review-user { padding: 14px 22px; border-block: 1px solid #ece8f0; background: linear-gradient(110deg, #f8f2ff, #f2fbfd); display: flex; align-items: center; gap: 10px; }
.leave-review-user .avatar { width: 40px; height: 40px; font-size: 10px; }
.leave-review-user > div { display: grid; gap: 2px; }
.leave-review-user strong { color: #312a36; font-size: 12px; }
.leave-review-user span, .leave-review-user time { color: #918898; font-size: 9px; }
.leave-review-user time { margin-left: auto; padding: 6px 9px; border-radius: 8px; background: rgba(255,255,255,.78); }
.leave-review-reason { margin: 18px 22px 0; padding: 13px 14px; border: 1px solid #ece8f0; border-radius: 12px; background: #faf9fb; }
.leave-review-reason span { color: #9a91a0; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.leave-review-reason p { margin: 6px 0 0; color: #5f5665; font-size: 11px; line-height: 1.6; }
.leave-review-modal [data-form="review-leave"] { padding: 18px 22px 22px; }

.rank-emblem { position: relative; width: 42px; height: 42px; flex: 0 0 42px; overflow: visible; border: 2px solid #fff; border-radius: 50%; background: linear-gradient(145deg, #24222a, #3b3542); display: grid; place-items: center; box-shadow: 0 0 0 1px #ded7e6, 0 7px 16px rgba(34,27,43,.17); }
.rank-emblem img { width: 32px; height: 32px; border-radius: 50%; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 3px 5px rgba(20,18,29,.26)); }
.rank-emblem em { position: absolute; right: -2px; bottom: -1px; width: 17px; height: 17px; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #36323b; display: grid; place-items: center; font-size: 8px; font-style: normal; font-weight: 900; box-shadow: 0 3px 8px rgba(0,0,0,.20); }
.rank-emblem.rank-1 em { background: #8d25db; }
.rank-emblem.rank-2 em { background: #d77813; }
.rank-emblem.rank-3 em { background: #048e9f; }
.rank-emblem.rank-4 em { background: #167fc8; }
.rank-emblem.rank-5 em { background: #b82339; }
.leader-item:has(.rank-emblem) { min-height: 66px; }
.leader-info .winner-label { display: inline-flex; margin-top: 0; color: #fff; background: linear-gradient(100deg, #7d3be4, #b340f2); box-shadow: 0 4px 10px rgba(125,59,228,.22); }
.leader-identity { position: relative; width: 58px; height: 54px; flex: 0 0 58px; display: grid; place-items: center; }
.leader-identity > .avatar { width: 46px; height: 46px; border: 3px solid #fff; font-size: 12px; box-shadow: 0 0 0 1px #dcd5e3, 0 8px 18px rgba(42,31,54,.16); }
.leader-identity > .rank-emblem { position: absolute; right: -1px; bottom: -2px; width: 29px; height: 29px; border-width: 2px; box-shadow: 0 0 0 1px #d4cadc, 0 6px 12px rgba(31,24,39,.22); }
.leader-identity > .rank-emblem img { width: 22px; height: 22px; }
.leader-identity > .rank-emblem em { right: -4px; bottom: -3px; width: 14px; height: 14px; border-width: 1.5px; font-size: 7px; }
.leader-item.winner .leader-identity > .avatar { box-shadow: 0 0 0 2px rgba(159,66,234,.32), 0 9px 22px rgba(101,42,153,.22); }

/* Broadcast control */
.broadcast-banner.is-idle {
  position: relative;
  min-height: 108px;
  padding: 22px 28px;
  overflow: hidden;
  border: 1px solid rgba(141,58,224,.20);
  border-radius: 20px;
  color: #38294a;
  background:
    radial-gradient(circle at 0% 0%, rgba(153,63,236,.12), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(75,203,226,.10), transparent 32%),
    linear-gradient(120deg, #fbf8ff, #f7fcfd);
  box-shadow: 0 14px 36px rgba(66,38,107,.08);
}
.broadcast-banner.is-idle::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #9333ea, #38bdf8);
  border-radius: 20px 0 0 20px;
}
.broadcast-banner.is-idle .section-eyebrow { color: #8f71a4; font-size: 11px; letter-spacing: .14em; }
.broadcast-banner.is-idle strong { color: #221032; font-size: clamp(20px, 1.6vw, 24px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.broadcast-banner.is-idle p { max-width: 760px; margin: 8px 0 0; color: #6f6278; font-size: 14px; line-height: 1.6; }
.broadcast-control-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border: 1px solid rgba(157,70,235,.24);
  border-radius: 16px;
  color: #963de9;
  background: linear-gradient(145deg, rgba(142,45,255,.14), rgba(65,201,226,.10));
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(102,42,162,.12);
}
.broadcast-control-icon .icon { width: 26px; height: 26px; }
.broadcast-control-icon.is-live {
  color: #fff;
  border-color: rgba(255,255,255,.22);
  background: linear-gradient(145deg, #f23f5d, #d72e4d);
  box-shadow: 0 0 0 7px rgba(242,63,93,.10), 0 12px 30px rgba(205,38,70,.28);
  animation: live-control-pulse 1.5s ease-in-out infinite alternate;
}
@keyframes live-control-pulse { to { box-shadow: 0 0 0 11px rgba(242,63,93,.045), 0 15px 34px rgba(205,38,70,.32); } }
.broadcast-start-btn,
.broadcast-banner.is-idle .primary-small {
  min-width: 168px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  background: linear-gradient(135deg, #7d31d8, #a83cf2 55%, #55cbe1);
  box-shadow: 0 10px 24px rgba(127,49,216,.24);
}
.broadcast-start-btn:hover,
.broadcast-banner.is-idle .primary-small:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(127,49,216,.28); }
.broadcast-banner.is-live {
  min-height: 112px;
  padding: 22px 28px;
  border: 1px solid rgba(236,61,92,.26);
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 20%, rgba(239,58,91,.22), transparent 32%),
    radial-gradient(circle at 90% 82%, rgba(151,62,230,.17), transparent 32%),
    linear-gradient(125deg, #251e2a, #2b202b 60%, #281d2e);
  box-shadow: 0 18px 44px rgba(60,28,43,.16);
}
.broadcast-banner.is-live .section-eyebrow { color: #ffb8c5; font-size: 11px; letter-spacing: .14em; display: inline-flex; align-items: center; gap: 7px; }
.broadcast-banner.is-live .section-eyebrow .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff6078; box-shadow: 0 0 0 4px rgba(255,96,120,.18); animation: toduPulse 1.5s infinite; }
.broadcast-banner.is-live strong {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: #fff;
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -.03em;
}
.broadcast-live-meta { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.broadcast-live-meta > span {
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  color: #d8cfd6;
  background: rgba(255,255,255,.06);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.broadcast-live-meta .icon { width: 14px; height: 14px; color: #e496f3; }
.broadcast-live-meta b { color: #fff; font-weight: 700; }
.broadcast-live-meta em { color: #fff; font-style: normal; font-weight: 750; }
.broadcast-banner.is-live .broadcast-actions button { min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 13px; font-weight: 800; }
.broadcast-banner.is-live .broadcast-actions .ghost-button { color: #f3dce2; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06); }

@media (min-width: 1100px) {
  .broadcast-banner.is-idle { min-height: 118px; padding: 24px 32px; gap: 24px 32px; }
  .broadcast-banner.is-idle p { max-width: none; }
  .broadcast-start-btn, .broadcast-banner.is-idle .primary-small { min-width: 184px; min-height: 50px; }
}

@media (max-width: 720px) {
  .broadcast-banner { grid-template-columns: 1fr; gap: 14px; }
  .broadcast-banner.is-idle,
  .broadcast-banner.is-live { min-height: 0; padding: 18px; }
  .broadcast-banner.is-idle::before { width: 3px; }
  .broadcast-control-icon { width: 50px; height: 50px; flex-basis: 50px; }
  .broadcast-control-icon .icon { width: 22px; height: 22px; }
  .broadcast-idle-head { margin-top: 4px; }
  .broadcast-banner.is-idle strong { font-size: 19px; }
  .broadcast-banner.is-idle p { font-size: 13px; }
  .broadcast-banner-actions,
  .broadcast-banner.is-live .broadcast-actions { width: 100%; }
  .broadcast-start-btn,
  .broadcast-banner.is-idle .primary-small,
  .broadcast-banner.is-live .broadcast-actions button { width: 100%; justify-content: center; }
  .broadcast-banner.is-live strong { font-size: 18px; white-space: normal; }
}

/* Consistent select controls */
select.app-control, .control select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237b7282' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px 14px; }
select.app-control:hover, .control select:hover { border-color: #c9b9dc; }
select.app-control:focus, .control select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238e2dff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 14 5-5 5 5'/%3E%3C/svg%3E"); }
.log-select { width: min(260px, 100%); min-width: 190px; }

.badge-only-grid { grid-template-columns: 1fr !important; }
.badge-studio-card { border: 1px solid #e5deeb; border-radius: 19px; background: linear-gradient(145deg, #fff, #fcfaff); box-shadow: 0 15px 40px rgba(48,31,73,.065); }
.badge-studio-card .badge-settings { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
.badge-image-setting { min-width: 0; padding: 14px; border: 1px solid #e9e3ee; border-radius: 15px; background: #fff; display: flex; flex-direction: column; gap: 11px; }
.badge-image-preview { min-height: 70px; padding: 10px; border-radius: 12px; background: linear-gradient(145deg, #f6f1fa, #f2f9fb); display: flex; align-items: center; gap: 10px; }
.badge-image-preview > div { min-width: 0; display: grid; gap: 3px; }
.badge-image-preview strong { color: #3a313f; font-size: 10px; }
.badge-image-preview span { color: #948b9a; font-size: 8px; }
.badge-image-picker { min-height: 38px; padding: 8px 10px; overflow: hidden; border: 1px dashed #cdb9dc; border-radius: 10px; color: #704095; background: #faf6fd; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 9px; font-weight: 700; cursor: pointer; }
.badge-image-picker:hover { border-color: #9e63cc; background: #f4eafa; }
.badge-image-picker .icon { width: 14px; height: 14px; flex: 0 0 auto; }
.badge-image-picker span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-image-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.badge-save-button { width: 100%; min-height: 36px; justify-content: center; border-radius: 10px; color: #fff; border-color: transparent; background: linear-gradient(135deg, #7e34d5, #a13ced); box-shadow: 0 7px 16px rgba(126,52,213,.18); }

@media (max-width: 1100px) { .badge-studio-card .badge-settings { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px) { .badge-studio-card .badge-settings { grid-template-columns: 1fr; } }

/* Team and license command center */
.team-command-hero { position: relative; min-height: 190px; margin-bottom: 18px; padding: 30px 32px; overflow: hidden; border: 1px solid rgba(153,74,230,.24); border-radius: 23px; color: #f3f0f6; background: radial-gradient(circle at 12% 18%, rgba(173,72,255,.30), transparent 35%), radial-gradient(circle at 90% 82%, rgba(73,207,232,.20), transparent 35%), linear-gradient(125deg, #211a2c, #282431 55%, #202c33); display: flex; align-items: center; justify-content: space-between; gap: 32px; box-shadow: 0 24px 60px rgba(35,24,51,.20); isolation: isolate; }
.team-command-hero::after { content: ""; position: absolute; z-index: -1; right: -70px; top: -120px; width: 300px; height: 300px; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.025), 0 0 0 70px rgba(255,255,255,.018); }
.team-command-copy { max-width: 600px; }
.team-command-copy .section-eyebrow { color: #cbb5dc; letter-spacing: .16em; }
.team-command-copy h2 { margin: 9px 0 9px; color: #fff; font-size: clamp(23px, 3vw, 34px); line-height: 1.08; letter-spacing: -.045em; }
.team-command-copy p { max-width: 560px; margin: 0; color: #b9b2c0; font-size: 11px; line-height: 1.65; }
.team-command-stats { min-width: 360px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.team-command-stats > div { min-height: 86px; padding: 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: rgba(255,255,255,.055); backdrop-filter: blur(8px); display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.team-command-stats strong { color: #fff; font-family: var(--font-display); font-size: 27px; line-height: 1; }
.team-command-stats span { color: #aaa3b1; font-size: 8.5px; font-weight: 650; }
.team-license-grid { align-items: stretch; }

/* Lisans stüdyosu — app.css yedek (v6.css önbellek sorunlarına karşı) */
.license-studio-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) 190px minmax(280px, .9fr);
  gap: 18px;
  align-items: stretch;
  min-height: 260px;
  margin-bottom: 18px;
  padding: 24px;
  border: 1px solid rgba(121,49,207,.14);
  border-radius: 28px;
  background:
    radial-gradient(circle at 16% 10%, rgba(121,49,207,.20), transparent 30%),
    radial-gradient(circle at 86% 18%, rgba(81,210,231,.18), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,242,255,.94));
  box-shadow: 0 24px 64px rgba(38,23,55,.11);
}
.license-studio-copy {
  position: relative;
  min-height: 210px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 23px;
  background: rgba(255,255,255,.66);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.license-studio-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(121,49,207,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
}
.license-studio-identity-copy { display: grid; gap: 4px; min-width: 0; }
.license-studio-identity-copy strong { font-size: 15px; color: #221032; }
.license-studio-identity-copy span { display: inline-flex; align-items: center; gap: 6px; color: #7a6b88; font-size: 12px; font-weight: 650; }
.license-studio-access-badge {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(34,197,94,.18);
  background: rgba(240,253,244,.92);
  color: #166534;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
}
.license-studio-access-badge i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.license-studio-copy h2 { margin: 7px 0 10px; color: #1f1228; font-size: clamp(30px, 3vw, 46px); line-height: .98; letter-spacing: -.06em; }
.license-studio-copy p { margin: 0 0 4px; color: #6d6078; font-size: 14px; line-height: 1.65; }
.license-studio-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; }
.license-studio-chips span {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(121,49,207,.12);
  background: rgba(255,255,255,.78);
  color: #5b21b6;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
}
.license-studio-health {
  padding: 14px 15px;
  border-radius: 18px;
  border: 1px solid rgba(121,49,207,.10);
  background: rgba(255,255,255,.72);
}
.license-studio-health-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.license-studio-health-head span { display: inline-flex; align-items: center; gap: 7px; color: #7a6b88; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.license-studio-health-head strong { color: #4c1d95; font-size: 22px; line-height: 1; }
.license-studio-health small { display: block; margin-top: 9px; color: #8a7a96; font-size: 12px; font-weight: 700; }
.license-studio-orb {
  min-height: 210px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 24px;
  background: linear-gradient(165deg, #2a1840 0%, #5d2490 52%, #7e3acf 100%);
  color: #fff;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
}
.license-studio-orb-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  display: grid;
  place-items: center;
}
.license-studio-orb strong { color: #fff; font-size: 54px; line-height: 1; letter-spacing: -.06em; }
.license-studio-orb em { color: rgba(255,255,255,.72); font-size: 10px; font-style: normal; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.license-studio-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.license-studio-stats article {
  min-height: 96px;
  padding: 16px;
  border: 1px solid rgba(121,49,207,.12);
  border-radius: 20px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 12px 28px rgba(38,23,55,.06);
  display: grid;
  align-content: center;
  gap: 4px;
}
.license-studio-stats article > span {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  color: #7931cf;
  background: rgba(121,49,207,.10);
  border: 1px solid rgba(121,49,207,.14);
  display: grid;
  place-items: center;
}
.license-studio-stats strong { color: #201529; font-size: 31px; line-height: 1; letter-spacing: -.06em; }
.license-studio-stats em { color: #8b8093; font-size: 10px; font-style: normal; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.license-studio-grid { display: grid; grid-template-columns: minmax(330px, .72fr) minmax(0, 1.28fr); gap: 18px; align-items: stretch; }
@media (max-width: 1180px) {
  .license-studio-hero { grid-template-columns: minmax(0, 1fr) minmax(240px, .72fr); }
  .license-studio-orb { grid-column: 2; grid-row: 1; }
  .license-studio-stats { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .license-studio-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .license-studio-hero { grid-template-columns: 1fr; padding: 16px; border-radius: 22px; gap: 12px; }
  .license-studio-copy { min-height: 0; padding: 17px; }
  .license-studio-identity { grid-template-columns: auto minmax(0, 1fr); }
  .license-studio-access-badge { grid-column: 1 / -1; justify-self: start; }
  .license-studio-orb { grid-column: auto; grid-row: auto; min-height: 150px; }
  .license-studio-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .license-studio-grid { grid-template-columns: 1fr; gap: 14px; }
}

.license-create-card, .license-vault-card, .team-members-card { position: relative; overflow: hidden; border: 1px solid #e6e0ec; border-radius: 19px; background: linear-gradient(145deg, #fff, #fcfaff); box-shadow: 0 15px 38px rgba(48,31,73,.065); }
.license-create-card::before { content: ""; position: absolute; right: -45px; top: -55px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(151,65,234,.13), transparent 68%); pointer-events: none; }
.license-create-card .card-head h2, .license-vault-card .card-head h2, .team-members-card .card-head h2 { font-size: 17px; }
.license-create-card #licenseForm { margin-top: 8px; padding: 14px; border: 1px solid #ece7f1; border-radius: 14px; background: rgba(249,247,252,.82); }
.license-create-card #licenseForm .primary-small { min-height: 43px; justify-content: center; border-radius: 11px; background: linear-gradient(135deg, #7932d2, #a33cf0 57%, #58cce2); box-shadow: 0 9px 21px rgba(121,50,210,.22); }
.license-vault-card .license-list { max-height: 520px; overflow-y: auto; scrollbar-width: none; }
.license-vault-card .license-list::-webkit-scrollbar { display: none; }
.team-members-card { margin-top: 18px !important; }
.team-members-card .user-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.team-member-card { position: relative; min-height: 88px; padding: 13px 14px; overflow: hidden; border: 1px solid #e9e4ed; border-radius: 15px; background: #fff; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.team-member-card:hover { border-color: #cdb4ea; box-shadow: 0 12px 27px rgba(71,43,105,.10); transform: translateY(-2px); }
.team-member-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: #aaa3ae; }
.team-member-card.member-todu::before { background: var(--role-todu-gradient); }
.team-member-card.member-admin::before { background: var(--role-admin-gradient); }
.team-member-card.member-moderator::before { background: var(--role-mod-gradient); }
.team-member-card.is-disabled { opacity: .68; background: #f8f7f9; }
.team-member-card > .avatar { width: 48px; height: 48px; font-size: 13px; box-shadow: 0 0 0 3px #f2edf7; }
.team-member-card .user-card-copy strong { color: #312a37; font-size: 13px; }
.team-member-card .user-card-copy > span { color: #918997; font-size: 9px; line-height: 1.5; }
.team-member-card .card-head-actions { align-items: center; }
.member-account-status { padding: 5px 7px; border-radius: 999px; color: #28725d; background: #e7f6f1; display: inline-flex; align-items: center; gap: 5px; font-size: 8px; font-weight: 750; }
.member-account-status i { width: 6px; height: 6px; border-radius: 50%; background: #25ae82; }
.team-member-card.is-disabled .member-account-status { color: #9e4253; background: #ffe7ec; }
.team-member-card.is-disabled .member-account-status i { background: #d64d64; }
.team-manage-button { min-height: 35px; padding: 7px 9px; border: 1px solid #d9cae9; border-radius: 10px; color: #65339a; background: #f8f2ff; display: inline-flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 750; cursor: pointer; transition: color .16s ease, background .16s ease, box-shadow .16s ease; }
.team-manage-button .icon { width: 13px; height: 13px; }
.team-manage-button .icon:last-child { width: 11px; }
.team-manage-button:hover { color: #fff; border-color: transparent; background: linear-gradient(135deg, #7f34dc, #a53df1); box-shadow: 0 8px 18px rgba(127,52,220,.23); }

@media (max-width: 900px) {
  .team-command-hero { align-items: flex-start; flex-direction: column; }
  .team-command-stats { width: 100%; min-width: 0; }
  .team-members-card .user-list { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .team-command-hero { min-height: 0; padding: 24px 20px; border-radius: 19px; }
  .team-command-stats { gap: 6px; }
  .team-command-stats > div { min-height: 72px; padding: 10px; }
  .team-command-stats strong { font-size: 22px; }
  .team-member-card { grid-template-columns: auto minmax(0,1fr); }
  .team-member-card .card-head-actions { grid-column: 1 / -1; width: 100%; justify-content: flex-end; }
  .team-manage-button { flex: 1; justify-content: center; }
}

/* Final account management alignment */
.user-manage-modal { max-height: min(92svh, 780px); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.user-manage-modal::-webkit-scrollbar { display: none; }
.user-manage-modal .modal-head { min-height: 78px; padding: 20px 24px; align-items: center; background: #fff; }
.user-manage-modal .modal-head h2 { font-size: 20px; }
.user-manage-modal .modal-head p { max-width: 460px; }
.managed-user-hero { min-height: 88px; padding: 17px 24px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px; }
.managed-user-hero > div { align-self: center; }
.managed-user-hero em { margin: 0; align-self: center; white-space: nowrap; }
.user-manage-form { position: relative; padding: 42px 24px 22px; display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; gap: 16px; background: #fff; }
.user-manage-form::before { content: "HESAP BİLGİLERİ"; position: absolute; left: 24px; top: 20px; color: #9a91a0; font-size: 8px; font-weight: 850; letter-spacing: .14em; }
.user-manage-form .app-field { min-width: 0; margin: 0; }
.user-manage-form .app-field > label:not(.check-label) { margin-bottom: 7px; color: #665d6b; font-size: 9px; font-weight: 750; }
.user-manage-form .app-control { min-height: 46px; border-color: #ded7e5; background: #fcfbfd; }
.user-manage-form .app-field.full { grid-column: 1 / -1; }
.user-manage-form .app-field.full:has(.check-label) { padding: 12px 14px; border: 1px solid #e9e3ed; border-radius: 12px; background: #faf8fb; }
.user-manage-form .check-label { width: 100%; min-height: 24px; margin: 0; color: #534a59; display: flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 650; }
.user-manage-form .check-label input { width: 17px; height: 17px; accent-color: #8e2dff; }
.user-manage-form .modal-actions { width: 100%; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.user-manage-form .modal-actions button { min-height: 43px; justify-content: center; border-radius: 11px; }
.user-manage-form .modal-actions .primary-small { background: linear-gradient(135deg, #7e34d5, #a43df0); box-shadow: 0 8px 19px rgba(126,52,213,.20); }
.user-manage-modal .modal-rule { height: 1px; margin: 0; border: 0; background: #ece7f0; }
.user-password-form { position: relative; padding: 43px 24px 24px; display: grid !important; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 12px; background: linear-gradient(145deg, #fbfafc, #f8f5fa); }
.user-password-form::before { position: absolute; left: 24px; top: 19px; }
.user-password-form .app-field { min-width: 0; margin: 0; }
.user-password-form .app-field label { margin-bottom: 7px; color: #665d6b; font-size: 9px; font-weight: 750; }
.user-password-form .app-control { min-height: 44px; background: #fff; }
.user-password-form .danger-button { min-height: 44px; padding-inline: 16px; justify-self: stretch; justify-content: center; border-radius: 11px; white-space: nowrap; }

@media (max-width: 620px) {
  .user-manage-modal { width: 100%; max-height: 100svh; border-radius: 0; }
  .user-manage-modal .modal-head { min-height: 70px; padding: 16px 18px; }
  .managed-user-hero { padding: 15px 18px; grid-template-columns: auto minmax(0,1fr); }
  .managed-user-hero em { grid-column: 2; justify-self: start; }
  .user-manage-form { padding: 42px 18px 20px; grid-template-columns: 1fr; gap: 13px; }
  .user-manage-form::before, .user-password-form::before { left: 18px; }
  .user-manage-form .app-field.full { grid-column: 1; }
  .user-manage-form .modal-actions { grid-template-columns: 1fr; }
  .user-password-form { padding: 42px 18px 20px; grid-template-columns: 1fr; }
  .user-manage-actions { padding: 18px; }
  .user-manage-action { padding: 11px 12px; }
}

/* Broadcast library redesign */
.library-command-hero { position: relative; min-height: 172px; margin-bottom: 18px; padding: 28px 30px; overflow: hidden; border: 1px solid rgba(83,185,211,.24); border-radius: 22px; color: #f4f1f7; background: radial-gradient(circle at 12% 20%, rgba(139,52,222,.28), transparent 34%), radial-gradient(circle at 90% 80%, rgba(58,197,224,.22), transparent 34%), linear-gradient(125deg, #211a2b, #252630 58%, #1d3035); display: flex; align-items: center; justify-content: space-between; gap: 28px; box-shadow: 0 22px 56px rgba(33,25,45,.18); }
.library-command-hero::after { content: ""; position: absolute; right: -85px; top: -100px; width: 260px; height: 260px; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; box-shadow: 0 0 0 32px rgba(255,255,255,.024), 0 0 0 64px rgba(255,255,255,.015); }
.library-command-hero > div:first-child { position: relative; z-index: 1; max-width: 610px; }
.library-command-hero .section-eyebrow { color: #bda9ce; letter-spacing: .15em; }
.library-command-hero h2 { margin: 8px 0 8px; color: #fff; font-size: clamp(22px, 2.8vw, 32px); line-height: 1.1; letter-spacing: -.045em; }
.library-command-hero p { max-width: 560px; margin: 0; color: #b8b2bf; font-size: 11px; line-height: 1.65; }
.library-command-stats { position: relative; z-index: 1; min-width: 340px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.library-command-stats span { min-height: 76px; padding: 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; color: #aaa4b0; background: rgba(255,255,255,.055); display: flex; flex-direction: column; justify-content: center; gap: 4px; font-size: 8.5px; font-weight: 650; }
.library-command-stats strong { color: #fff; font-family: var(--font-display); font-size: 24px; line-height: 1; }

.library-admin-grid { grid-template-columns: 1fr !important; gap: 12px; }
.library-create-card { min-height: 0; padding: 20px 22px; border: 1px solid #e7e1eb; border-radius: 18px; background: linear-gradient(145deg, #fff, #fcfaff); display: grid; grid-template-columns: 230px minmax(0,1fr); align-items: center; gap: 22px; box-shadow: 0 11px 30px rgba(48,32,71,.055); }
.library-create-card .card-head { min-width: 0; margin: 0; }
.library-create-card .card-head h2 { font-size: 16px; }
.library-create-card .card-head p { margin-top: 5px; font-size: 10px; line-height: 1.5; }
.library-create-card .form-stack { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); align-items: end; gap: 9px; }
.library-create-card .form-stack > * { min-width: 0; margin: 0; }
.library-create-card textarea.app-control { min-height: 46px; height: 46px; resize: vertical; }
.library-create-card .primary-small { min-height: 46px; justify-content: center; border-radius: 11px; white-space: nowrap; background: linear-gradient(135deg, #7e34d5, #a33def); box-shadow: 0 8px 18px rgba(126,52,213,.18); }
.library-create-card.create-wow { border-left: 3px solid #9c47e6; }
.library-create-card.create-text { border-left: 3px solid #36b9d1; }
.library-create-card.create-blacklist { border-left: 3px solid #e05269; }

.library-content-grid { grid-template-columns: 1fr !important; gap: 14px; }
.library-section { padding: 20px 22px; border: 1px solid #e6e0ea; border-radius: 19px; background: linear-gradient(145deg, #fff, #fcfaff); display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; align-content: start; gap: 11px; box-shadow: 0 13px 34px rgba(47,31,69,.06); }
.library-section > .card-head, .library-section > .empty-state { grid-column: 1 / -1; }
.library-section > .card-head { margin-bottom: 3px; padding-bottom: 14px; border-bottom: 1px solid #eee9f1; }
.library-section > .card-head h2 { font-size: 17px; }
.library-section > .card-head p { font-size: 10px; }
.library-section .wow-card, .library-section .broadcast-card, .library-section .black-card { min-width: 0; height: 100%; margin: 0 !important; padding: 16px; border: 1px solid #ebe6ef; border-radius: 14px; background: #fff; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 6px 17px rgba(43,30,60,.04); transition: border-color .17s ease, box-shadow .17s ease, transform .17s ease; }
.library-section .wow-card:hover, .library-section .broadcast-card:hover, .library-section .black-card:hover { border-color: #ceb8e2; box-shadow: 0 11px 25px rgba(62,38,91,.09); transform: translateY(-2px); }
.library-section .item-head { min-width: 0; align-items: flex-start; }
.library-section .item-head > div { min-width: 0; }
.library-section .item-head strong { display: block; overflow: hidden; color: #332b38; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.library-section .item-meta { margin: 4px 0 0; color: #99909e; font-size: 8.5px; }
.library-section .item-content { margin: 0; overflow-wrap: anywhere; color: #625968; font-size: 10px; line-height: 1.62; white-space: pre-wrap; }
.library-section .code-block { min-width: 0; padding: 9px 10px; border: 1px solid #e5d8f0; border-radius: 10px; color: #673596; background: #f7f0fc; display: flex; align-items: center; justify-content: space-between; gap: 8px; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.library-section .copy-button { min-height: 32px; margin-top: auto; justify-content: center; border-radius: 9px; }
.library-section .code-block .copy-button { flex: 0 0 auto; margin: 0; }
.library-section .asset-link { width: fit-content; min-height: 34px; border-radius: 9px; }

@media (max-width: 1100px) {
  .library-command-hero { align-items: flex-start; flex-direction: column; }
  .library-command-stats { width: 100%; min-width: 0; }
  .library-create-card { grid-template-columns: 1fr; gap: 13px; }
}

@media (max-width: 760px) {
  .library-command-hero { min-height: 0; padding: 23px 19px; border-radius: 18px; }
  .library-command-stats { gap: 6px; }
  .library-command-stats span { min-height: 66px; padding: 9px; }
  .library-command-stats strong { font-size: 20px; }
  .library-create-card { padding: 17px; }
  .library-create-card .form-stack { grid-template-columns: 1fr; }
  .library-section { padding: 17px; grid-template-columns: 1fr; }
  .library-section > .card-head { grid-column: 1; }
}

/* Dashboard monthly moderator showcase */
.dashboard-ranking-card { position: relative; overflow: hidden; border: 1px solid #e3daea; border-radius: 21px; background: linear-gradient(145deg, #fff, #fcf9ff); box-shadow: 0 17px 44px rgba(52,33,78,.08); }
.dashboard-ranking-card::after { content: ""; position: absolute; right: -90px; top: -110px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(153,61,232,.10), transparent 68%); pointer-events: none; }
.dashboard-ranking-card > .card-head { position: relative; z-index: 1; padding-bottom: 15px; border-bottom: 1px solid #eee8f2; }
.dashboard-ranking-card > .card-head > div:first-child { min-width: 0; }
.dashboard-ranking-card > .card-head p { max-width: 680px; }
.ranking-head-actions { margin-left: auto; display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 0 0 auto; }
.ranking-head-actions .pill { margin: 0; }
.reset-leaderboard-button { min-height: 34px; padding: 7px 10px; border: 1px solid #ead1d8; border-radius: 10px; color: #a63d54; background: #fff1f4; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 9px; font-weight: 750; cursor: pointer; transition: color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease; }
.reset-leaderboard-button .icon { width: 13px; height: 13px; }
.reset-leaderboard-button:hover { color: #fff; background: linear-gradient(135deg, #ca3f5a, #ee5f75); box-shadow: 0 8px 18px rgba(202,63,90,.22); transform: translateY(-1px); }
.dashboard-ranking-card > .card-head h2 { font-size: 19px; }
.dashboard-ranking-card .dashboard-winner { min-height: 132px; margin: 15px 0 10px; padding: 19px 18px; border: 1px solid rgba(156,65,230,.30); border-radius: 18px; background: radial-gradient(circle at 8% 15%, rgba(161,67,237,.18), transparent 35%), radial-gradient(circle at 94% 85%, rgba(71,200,225,.15), transparent 36%), linear-gradient(130deg, #f8f2ff, #f1fbfd); box-shadow: 0 14px 31px rgba(96,48,137,.13); }
.dashboard-ranking-card .dashboard-winner .leader-identity { width: 96px; height: 92px; flex-basis: 96px; }
.dashboard-ranking-card .dashboard-winner .leader-identity > .avatar { width: 78px; height: 78px; border: 4px solid #fff; font-size: 19px; box-shadow: 0 0 0 2px rgba(147,56,222,.28), 0 14px 30px rgba(87,42,123,.25); }
.dashboard-ranking-card .dashboard-winner .leader-identity > .rank-emblem { right: 0; bottom: -1px; width: 42px; height: 42px; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(126,57,177,.25), 0 8px 16px rgba(54,31,70,.26); }
.dashboard-ranking-card .dashboard-winner .leader-identity > .rank-emblem img { width: 32px; height: 32px; }
.dashboard-ranking-card .dashboard-winner .leader-identity > .rank-emblem em { right: -5px; bottom: -4px; width: 17px; height: 17px; }
.dashboard-ranking-card .dashboard-winner .leader-info strong { color: #2f2635; font-size: 17px; line-height: 1.35; }
.dashboard-ranking-card .dashboard-winner .leader-info > span { margin-top: 7px; color: #766c7c; font-size: 10px; }
.dashboard-ranking-card .dashboard-winner .winner-label { margin-left: 7px; padding: 4px 8px; color: #fff; font-size: 8px; }
.dashboard-ranking-card .dashboard-winner .leader-score { min-width: 58px; height: 58px; border-radius: 16px; color: #fff; background: linear-gradient(145deg, #7f32d6, #ad43f1); display: grid; place-items: center; font-size: 20px; box-shadow: 0 10px 23px rgba(127,50,214,.25); }
.dashboard-ranking-card .dashboard-ranked-user { min-height: 70px; margin: 0; padding: 9px 10px; border-bottom: 1px solid #eee9f1; }
.dashboard-ranking-card .dashboard-ranked-user:last-of-type { border-bottom: 0; }
.dashboard-ranking-card .dashboard-ranked-user .leader-identity { width: 56px; flex-basis: 56px; }
.dashboard-ranking-card .leader-manager-note { border: 1px solid #ece5f2; background: #faf7fc; }

/* UC operations center */
.uc-command-hero { position: relative; min-height: 178px; margin-bottom: 18px; padding: 29px 31px; overflow: hidden; border: 1px solid rgba(112,73,214,.22); border-radius: 22px; color: #f3eff7; background: radial-gradient(circle at 10% 18%, rgba(143,49,230,.30), transparent 35%), radial-gradient(circle at 91% 82%, rgba(51,191,220,.22), transparent 34%), linear-gradient(125deg, #21192d, #252430 58%, #1c3035); display: flex; align-items: center; justify-content: space-between; gap: 28px; box-shadow: 0 22px 57px rgba(35,25,48,.19); }
.uc-command-hero::after { content: ""; position: absolute; right: -80px; top: -100px; width: 260px; height: 260px; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; box-shadow: 0 0 0 34px rgba(255,255,255,.022), 0 0 0 68px rgba(255,255,255,.014); }
.uc-command-hero > div:first-child { position: relative; z-index: 1; max-width: 610px; }
.uc-command-hero .section-eyebrow { color: #c4afd5; letter-spacing: .15em; }
.uc-command-hero h2 { margin: 8px 0; color: #fff; font-size: clamp(23px, 2.8vw, 33px); line-height: 1.08; letter-spacing: -.045em; }
.uc-command-hero p { max-width: 570px; margin: 0; color: #b8b1bf; font-size: 11px; line-height: 1.65; }
.uc-command-stats { position: relative; z-index: 1; min-width: 360px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.uc-command-stats span { min-height: 80px; padding: 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; color: #aaa3b0; background: rgba(255,255,255,.055); display: flex; flex-direction: column; justify-content: center; gap: 4px; font-size: 8.5px; font-weight: 650; }
.uc-command-stats strong { color: #fff; font-family: var(--font-display); font-size: 25px; line-height: 1; }
.uc-command-grid { grid-template-columns: minmax(0,1.65fr) minmax(290px,.7fr); align-items: stretch; gap: 14px; }
.uc-entry-card, .uc-flow-card, .uc-list-card { border: 1px solid #e5deea; border-radius: 19px; background: linear-gradient(145deg, #fff, #fcfaff); box-shadow: 0 14px 37px rgba(48,31,72,.065); }
.uc-entry-card .card-head h2, .uc-flow-card .card-head h2, .uc-list-card .card-head h2 { font-size: 17px; }
.uc-entry-card #addUcForm { margin-top: 11px; padding: 14px; border: 1px solid #eae4ee; border-radius: 14px; background: #faf8fc; grid-template-columns: repeat(4, minmax(0,1fr)); align-items: end; }
.uc-entry-card #addUcForm .form-action { align-self: end; }
.uc-entry-card #addUcForm .primary-small { width: 100%; min-height: 46px; justify-content: center; border-radius: 11px; white-space: nowrap; background: linear-gradient(135deg, #7e34d5, #a43df0 58%, #55c8df); box-shadow: 0 9px 20px rgba(126,52,213,.21); }
.id-entry-card #addIdForm { margin-top: 11px; padding: 14px; border: 1px solid #eae4ee; border-radius: 14px; background: #faf8fc; grid-template-columns: repeat(3, minmax(0,1fr)); align-items: end; }
.id-entry-card #addIdForm .form-action { align-self: end; }
.id-entry-card #addIdForm .primary-small { width: 100%; min-height: 46px; justify-content: center; border-radius: 11px; white-space: nowrap; background: linear-gradient(135deg, #7e34d5, #a43df0 58%, #55c8df); box-shadow: 0 9px 20px rgba(126,52,213,.21); }
.id-command-hero { background: radial-gradient(circle at 10% 18%, rgba(48,151,229,.27), transparent 35%), radial-gradient(circle at 91% 82%, rgba(84,208,200,.22), transparent 34%), linear-gradient(125deg, #1c2030, #222a34 58%, #1c3333); }
.uc-flow-card { position: relative; overflow: hidden; color: #f1edf4; background: radial-gradient(circle at 90% 10%, rgba(77,201,225,.18), transparent 34%), linear-gradient(145deg, #29242f, #252d34); }
.uc-flow-card .card-head h2 { color: #fff; }
.uc-flow-card .card-head p { color: #aaa4ae; }
.uc-flow-card .info-strip { min-height: 70px; border: 1px solid rgba(255,255,255,.08); color: #c7c1cb; background: rgba(255,255,255,.055); }
.uc-flow-card .info-strip .icon { color: #66d4e8; }
.uc-flow-card .info-strip b { color: #fff; font-size: 15px; }
.uc-list-card { margin-top: 18px !important; overflow: hidden; }
.uc-list-card > .card-head { padding-bottom: 15px; border-bottom: 1px solid #eee8f1; }
.uc-list-card .table-wrap { margin-top: 8px; border: 1px solid #ebe6ef; border-radius: 14px; }
.uc-list-card table { min-width: 900px; }
.uc-list-card thead th { padding: 12px 13px; color: #807687; background: #f7f4f9; font-size: 8.5px; letter-spacing: .045em; }
.uc-list-card tbody td { padding: 13px; border-bottom-color: #eeeaf1; font-size: 10px; }
.uc-list-card .uc-data-row { position: relative; }
.uc-list-card .uc-data-row.status-loaded td:first-child { box-shadow: inset 3px 0 0 #28ad82; }
.uc-list-card .uc-data-row.status-not_loaded td:first-child { box-shadow: inset 3px 0 0 #e3a22c; }
.uc-list-card .uc-data-row.status-added td:first-child { box-shadow: inset 3px 0 0 #28ad82; }
.uc-list-card .uc-data-row.status-not_added td:first-child { box-shadow: inset 3px 0 0 #e3a22c; }
.uc-list-card .status-toggle { min-height: 29px; padding: 5px 9px; border-radius: 999px; font-size: 8.5px; font-weight: 750; }
.uc-list-card .status-toggle.uc-status-loaded { border: 1px solid #bde8d9; color: #157154; background: #ddf6ed; box-shadow: 0 4px 11px rgba(33,168,124,.10); }
.uc-list-card .status-toggle.uc-status-waiting { border: 1px solid #f0d797; color: #8a6215; background: #fff2cb; box-shadow: 0 4px 11px rgba(224,164,39,.10); }
.uc-list-card .status-toggle:disabled { opacity: .62; cursor: wait; pointer-events: none; }
.player-id-cell { width: fit-content; max-width: 100%; min-height: 34px; padding: 5px 5px 5px 9px; border: 1px solid #e3daea; border-radius: 9px; color: #563477; background: #f8f3fc; display: inline-flex; align-items: center; gap: 8px; }
.player-id-cell code { min-width: 0; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.player-id-cell button { width: 27px; height: 27px; flex: 0 0 27px; padding: 0; border: 0; border-radius: 7px; color: #7540a4; background: #eee2f7; display: grid; place-items: center; cursor: pointer; transition: color .15s ease, background .15s ease, transform .15s ease; }
.player-id-cell button:hover { color: #fff; background: #8e3bd4; transform: translateY(-1px); }
.player-id-cell button .icon { width: 13px; height: 13px; }

/* Professional dashboard command center */
.dashboard-workspace { position: relative; }
.dashboard-command-hero { min-height: 280px; padding: 34px 36px; border: 1px solid rgba(185,104,255,.22); border-radius: 25px; background: radial-gradient(circle at 82% 10%, rgba(200,63,255,.70), transparent 27%), radial-gradient(circle at 48% 130%, rgba(72,205,240,.30), transparent 40%), linear-gradient(120deg, #14101d, #251238 52%, #142b45); box-shadow: 0 26px 65px rgba(35,21,61,.24); }
.dashboard-command-hero::before { opacity: .16; background-size: 38px 38px; }
.dashboard-command-hero .hero-eyebrow { width: fit-content; padding: 6px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: #ded2e8; background: rgba(255,255,255,.07); font-size: 8px; font-weight: 800; letter-spacing: .15em; }
.dashboard-command-hero h2 { max-width: 650px; margin-top: 14px; font-size: clamp(34px, 4vw, 50px); line-height: 1.02; }
.dashboard-command-hero p { max-width: 610px; color: rgba(255,255,255,.72); font-size: 13px; }
.dashboard-health { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.dashboard-health span { min-height: 30px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.10); border-radius: 9px; color: #c9c1cf; background: rgba(255,255,255,.055); display: inline-flex; align-items: center; gap: 7px; font-size: 9px; font-weight: 650; }
.dashboard-health i { width: 7px; height: 7px; border-radius: 50%; background: #40d7a0; box-shadow: 0 0 0 5px rgba(64,215,160,.10); }
.dashboard-health .icon { width: 13px; height: 13px; color: #70d8eb; }
.dashboard-command-hero .hero-actions { margin-top: 14px; }
.dashboard-command-hero .hero-live-button { min-height: 42px; padding: 0 15px; border: 1px solid rgba(255,255,255,.13); border-radius: 11px; color: #fff; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.dashboard-command-hero .hero-live-button:hover { background: rgba(255,255,255,.15); transform: translateY(-2px); }
.dashboard-command-hero .hero-visual-mark { opacity: .58; filter: drop-shadow(0 22px 34px rgba(0,0,0,.34)); }

.dashboard-stat-grid { gap: 13px; }
.dashboard-stat-grid .stat-card { min-height: 152px; padding: 20px 21px; border: 1px solid #e4deea; border-radius: 18px; background: linear-gradient(145deg, #fff, #fcfaff); box-shadow: 0 12px 30px rgba(46,30,68,.06); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.dashboard-stat-grid .stat-card:hover { border-color: #cbb5df; box-shadow: 0 17px 35px rgba(60,37,88,.10); transform: translateY(-3px); }
.dashboard-stat-grid .stat-card::after { width: 125px; height: 125px; top: -52px; right: -37px; opacity: .75; }
.dashboard-stat-grid .stat-kicker { color: #746b7a; font-size: 10px; font-weight: 700; }
.dashboard-stat-grid .stat-icon { width: 38px; height: 38px; border-radius: 12px; background: #f1e9f8; }
.dashboard-stat-grid .stat-icon .icon { width: 18px; height: 18px; }
.dashboard-stat-grid .stat-value { margin-top: 14px; color: #2e2633; font-size: 34px; letter-spacing: -.04em; }
.dashboard-stat-grid .stat-note { color: #8e8593; font-size: 10px; }
.dashboard-stat-grid .dashboard-stat-1 .stat-icon { color: #7c35cf; background: #f1e7fa; }
.dashboard-stat-grid .dashboard-stat-2 .stat-icon { color: #237fb8; background: #e7f4fb; }
.dashboard-stat-grid .dashboard-stat-3 .stat-icon { color: #d73c59; background: #ffe9ee; }
.dashboard-stat-grid .dashboard-stat-4 .stat-icon { color: #bd7d18; background: #fff3d9; }

.dashboard-control-grid { grid-template-columns: minmax(0,1.18fr) minmax(340px,.82fr); gap: 15px; }
.dashboard-side-card, .dashboard-history-card { border: 1px solid #e5dfea; border-radius: 19px; background: linear-gradient(145deg, #fff, #fcfaff); box-shadow: 0 13px 35px rgba(47,30,69,.06); }
.dashboard-side-card > .card-head, .dashboard-history-card > .card-head { padding-bottom: 13px; border-bottom: 1px solid #eee9f1; }
.dashboard-side-card .live-person { border-color: #f3dce2; border-radius: 12px; background: linear-gradient(145deg, #fff8fa, #fff); }
.dashboard-side-card .activity-row { padding: 12px 0; }
.dashboard-history-card { margin-top: 18px !important; }
.dashboard-history-card .table-wrap { margin-top: 8px; border: 1px solid #eae4ee; border-radius: 13px; }

@media (max-width: 1100px) {
  .dashboard-control-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .dashboard-command-hero { min-height: 320px; padding: 24px 21px; border-radius: 19px; }
  .dashboard-command-hero h2 { font-size: 31px; }
  .dashboard-command-hero p { font-size: 11px; }
  .dashboard-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-stat-grid .stat-card { min-height: 128px; padding: 15px; }
  .dashboard-stat-grid .stat-value { font-size: 28px; }
}

/* Larger desktop typography for 2K displays */
@media (min-width: 1500px) {
  .sidebar-nav .nav-caption { font-size: 9px; }
  .nav-item { min-height: 45px; }
  .nav-item span, .logout-button, .live-mini { font-size: 12px; }
  .topbar h1 { font-size: 25px; }
  .topbar .crumb, .page-subtitle { font-size: 12px; }
  .card-head h2 { font-size: 19px; }
  .card-head h3 { font-size: 17px; }
  .card-head p { font-size: 12px; line-height: 1.55; }
  .app-field label { font-size: 11px; }
  .app-control { min-height: 48px; font-size: 14px; }
  .primary-small, .ghost-button, .danger-button, .mini-button, .copy-button { font-size: 11px; }
  table th { font-size: 10px; }
  table td { font-size: 12px; }
  .item-meta, .subline { font-size: 10px; }
  .activity-copy strong, .user-card-copy strong, .ticket-title h3 { font-size: 13px; }
  .activity-copy span, .user-card-copy span, .ticket-title p { font-size: 11px; }
  .pill, .request-status, .license-status, .leave-status { font-size: 10px; }
  .workspace { max-width: 1680px; }
}

/* Refined sidebar and corrected Todu logo alignment */
.app-shell { grid-template-columns: 286px minmax(0,1fr); }
.sidebar { width: 286px; padding: 18px 14px 15px; border-right: 1px solid rgba(177,94,239,.13); background: radial-gradient(circle at 86% 5%, rgba(166,56,246,.20), transparent 24%), radial-gradient(circle at 15% 92%, rgba(57,185,213,.08), transparent 27%), linear-gradient(180deg, #111019, #0a0910 72%); box-shadow: 9px 0 30px rgba(25,18,34,.06); }
.sidebar::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .40; background: linear-gradient(120deg, transparent 0 34%, rgba(179,77,255,.10) 45%, transparent 56%); background-size: 260% 100%; animation: sidebar-sheen 7s linear infinite; }
.sidebar-brand { position: relative; width: 100%; height: 92px; margin: 0 0 13px; padding: 0 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.055); border-radius: 16px; background: radial-gradient(circle at 50% 20%, rgba(148,63,229,.14), transparent 58%), rgba(255,255,255,.025); display: flex; align-items: center; justify-content: center; }
.sidebar-brand::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 11px; height: 1px; background: linear-gradient(90deg, transparent, rgba(197,98,255,.55), rgba(91,209,231,.45), transparent); }
.sidebar-brand img { width: 190px !important; max-width: none !important; height: auto !important; margin: 0 auto; object-fit: initial !important; transform: translateY(7px); filter: drop-shadow(0 9px 17px rgba(0,0,0,.28)); }
.sidebar-nav { gap: 3px; padding: 0 3px 14px; scrollbar-width: none; }
.sidebar-nav::-webkit-scrollbar { display: none; }
.sidebar-nav .nav-caption { position: relative; margin-top: 5px; padding: 13px 10px 7px; color: rgba(226,216,234,.38); font-size: 8px; font-weight: 850; letter-spacing: .17em; }
.sidebar-nav .nav-caption::after { content: ""; position: absolute; right: 8px; top: 50%; width: 42px; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.10), transparent); }
.sidebar .nav-item { position: relative; min-height: 46px; padding: 0 10px; overflow: hidden; border: 1px solid transparent; border-radius: 11px; color: #a8a3ad; gap: 10px; font-size: 12px; font-weight: 620; transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease; }
.sidebar .nav-item::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 4px 4px 0; background: transparent; }
.sidebar .nav-item .icon { width: 32px; height: 32px; padding: 7px; flex: 0 0 32px; border-radius: 9px; color: #827d88; background: rgba(255,255,255,.035); transition: color .16s ease, background .16s ease; }
.sidebar .nav-item:hover { color: #f0edf2; border-color: rgba(255,255,255,.055); background: rgba(255,255,255,.045); transform: translateX(2px); }
.sidebar .nav-item:hover .icon { color: #d5b4ec; background: rgba(165,70,235,.10); }
.sidebar .nav-item.is-active { color: #fff; border-color: rgba(183,89,244,.18); background: linear-gradient(100deg, rgba(137,48,215,.22), rgba(71,168,192,.07)); box-shadow: none; }
.sidebar .nav-item.is-active::before { background: linear-gradient(#c25bff, #55cde4); box-shadow: 0 0 12px rgba(183,73,246,.50); }
.sidebar .nav-item.is-active .icon { color: #efd9ff; background: linear-gradient(145deg, rgba(164,70,235,.26), rgba(75,191,215,.13)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.sidebar .nav-item.is-active .icon { animation: active-nav-glow 1.9s ease-in-out infinite alternate; }
.sidebar .nav-item em { min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #a43ceb, #dc3e82); font-size: 8.5px; font-weight: 800; box-shadow: 0 5px 12px rgba(169,48,159,.25); }
.sidebar-footer { gap: 8px; padding: 12px 3px 0; border-top: 1px solid rgba(255,255,255,.065); }
.sidebar .live-mini { min-height: 42px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.055); border-radius: 11px; color: #918b98; background: rgba(255,255,255,.035); font-size: 9.5px; font-weight: 620; }
.sidebar .logout-button { min-height: 43px; border-color: rgba(222,73,103,.13); border-radius: 11px; color: #b8a7ad; background: rgba(207,55,86,.045); font-size: 10px; font-weight: 700; }
.sidebar .logout-button:hover { color: #ffdfe5; border-color: rgba(225,79,108,.25); background: rgba(207,55,86,.11); }

@media (max-width: 940px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { width: min(278px, 86vw); }
  .sidebar-brand { height: 62px; align-items: flex-start; }
  .sidebar-brand img { width: 160px !important; transform: translateY(4px); }
}

@keyframes sidebar-sheen { to { background-position: -260% 0; } }
@keyframes active-nav-glow { to { box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 0 15px rgba(161,75,236,.20); } }

@media (max-width: 1100px) {
  .uc-command-hero { align-items: flex-start; flex-direction: column; }
  .uc-command-stats { width: 100%; min-width: 0; }
  .uc-command-grid { grid-template-columns: 1fr; }
  .uc-entry-card #addUcForm { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .id-entry-card #addIdForm { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 720px) {
  .dashboard-ranking-card .dashboard-winner { min-height: 0; padding: 15px 12px; gap: 8px; }
  .dashboard-ranking-card .dashboard-winner .leader-identity { width: 74px; height: 72px; flex-basis: 74px; }
  .dashboard-ranking-card .dashboard-winner .leader-identity > .avatar { width: 62px; height: 62px; }
  .dashboard-ranking-card .dashboard-winner .leader-identity > .rank-emblem { width: 34px; height: 34px; }
  .dashboard-ranking-card .dashboard-winner .leader-identity > .rank-emblem img { width: 26px; height: 26px; }
  .dashboard-ranking-card .dashboard-winner .leader-info strong { font-size: 14px; }
  .dashboard-ranking-card .dashboard-winner .winner-label { margin: 5px 0 0; }
  .dashboard-ranking-card .dashboard-winner .leader-score { min-width: 44px; height: 44px; border-radius: 12px; font-size: 16px; }
  .uc-command-hero { min-height: 0; padding: 23px 19px; border-radius: 18px; }
  .uc-command-stats { gap: 6px; }
  .uc-command-stats span { min-height: 67px; padding: 9px; }
  .uc-command-stats strong { font-size: 21px; }
  .uc-entry-card #addUcForm { grid-template-columns: 1fr; }
  .id-entry-card #addIdForm { grid-template-columns: 1fr; }
  .uc-list-card .table-wrap { overflow: visible; border: 0; }
  .uc-list-card table, .uc-list-card tbody { min-width: 0; width: 100%; display: block; }
  .uc-list-card thead { display: none; }
  .uc-list-card tbody tr.uc-data-row { margin-bottom: 10px; padding: 12px; border: 1px solid #e8e2ec; border-radius: 13px; background: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; box-shadow: 0 6px 16px rgba(45,31,64,.045); }
  .uc-list-card tbody tr.uc-data-row td { min-width: 0; padding: 0; border: 0; display: grid; gap: 3px; overflow-wrap: anywhere; }
  .uc-list-card tbody tr.uc-data-row td::before { content: attr(data-label); color: #9a919f; font-size: 7.5px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
  .uc-list-card tbody tr.uc-data-row td:first-child { box-shadow: none; }
  .uc-list-card tbody tr.uc-data-row td:nth-child(2), .uc-list-card tbody tr.uc-data-row td:last-child { grid-column: 1 / -1; }
  .uc-list-card .table-actions { justify-content: flex-start; }
}

/* 3.8.7 — static sidebar logo, support desk and rewards polish */
.sidebar::before,
.sidebar-brand::after {
  display: none !important;
  content: none !important;
  animation: none !important;
  background: none !important;
}
.sidebar {
  background: linear-gradient(180deg, #111019 0%, #0b0a11 100%) !important;
}
.sidebar-brand {
  height: 94px !important;
  padding: 10px 12px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.025) !important;
}
.sidebar-brand img {
  width: min(190px, 92%) !important;
  max-width: 92% !important;
  max-height: 68px !important;
  object-fit: contain !important;
  transform: none !important;
  filter: none !important;
}
.sidebar .nav-item,
.sidebar .nav-item .icon {
  animation: none !important;
}
.sidebar .nav-item:hover {
  transform: none !important;
}

.support-desk-enhanced { display: grid; gap: 16px; }
.support-command-hero,
.reward-command-hero {
  position: relative;
  min-height: 184px;
  padding: 30px 32px;
  overflow: hidden;
  border: 1px solid rgba(155,70,232,.22);
  border-radius: 24px;
  color: #f7f3fb;
  background: radial-gradient(circle at 12% 18%, rgba(168,67,255,.30), transparent 34%), radial-gradient(circle at 88% 86%, rgba(84,206,231,.18), transparent 34%), linear-gradient(125deg, #211a2d, #292333 58%, #1e2b31);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  box-shadow: 0 22px 54px rgba(34,24,48,.18);
}
.support-command-hero h2,
.reward-command-hero h2 { margin: 8px 0 8px; color: #fff; font-size: clamp(24px, 3vw, 36px); letter-spacing: -.045em; line-height: 1.08; }
.support-command-hero p,
.reward-command-hero p { max-width: 650px; margin: 0; color: #c5bccd; font-size: 12px; line-height: 1.72; }
.support-command-stats,
.reward-command-stats {
  min-width: 330px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.support-command-stats button,
.reward-command-stats span {
  min-height: 84px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  color: #a9a1b0;
  background: rgba(255,255,255,.055);
  display: grid;
  align-content: center;
  gap: 4px;
  text-align: left;
}
.support-command-stats button.is-active {
  color: #fff;
  border-color: rgba(207,142,255,.32);
  background: rgba(174,83,255,.18);
}
.support-command-stats strong,
.reward-command-stats strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
}
.support-command-stats span,
.reward-command-stats span span { font-size: 9px; font-weight: 750; }
.support-create-panel,
.reward-create-card,
.reward-vault-card {
  border: 1px solid #e5dfeb;
  border-radius: 20px;
  background: linear-gradient(145deg, #fff, #fcfaff);
  box-shadow: 0 14px 34px rgba(44,30,62,.055);
}
.support-status-tabs { padding: 4px; border: 1px solid #ebe6ef; border-radius: 14px; background: #fff; }
.support-status-tabs button { flex: 1; min-height: 42px; border-radius: 11px; font-weight: 800; }
.support-status-tabs button.is-active { color: #fff; border-color: transparent; background: linear-gradient(135deg, #8037df, #b642f2); box-shadow: 0 10px 20px rgba(128,55,223,.18); }
.support-ticket-card {
  position: relative;
  min-height: 88px;
  padding: 15px;
  overflow: hidden;
  grid-template-columns: 42px auto auto minmax(0,1fr) auto auto !important;
  border-radius: 17px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.support-ticket-card:hover { transform: translateY(-2px); box-shadow: 0 13px 28px rgba(52,33,80,.09); }
.support-ticket-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #a449ed; }
.support-ticket-card.status-answered::before { background: #4fbfd8; }
.support-ticket-card.status-closed::before { background: #31b56f; }
.support-ticket-orb {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #7d35d5;
  background: #f6edff;
  display: grid;
  place-items: center;
}
.support-ticket-orb .icon { width: 20px; height: 20px; }
.support-ticket-owner { display: inline-flex; align-items: center; gap: 6px; color: #7e7486; font-size: 9px; font-weight: 750; }
.support-ticket-owner .avatar { width: 25px; height: 25px; font-size: 8px; }
.support-status-pill { justify-self: end; }

.rewards-enhanced { display: grid; gap: 16px; }
.reward-command-hero.has-monthly-award {
  border-color: rgba(218,93,255,.34);
  background: radial-gradient(circle at 10% 18%, rgba(255,79,185,.30), transparent 34%), radial-gradient(circle at 88% 78%, rgba(85,212,239,.25), transparent 34%), linear-gradient(125deg, #271836, #30233b 55%, #202f37);
}
.reward-create-card { margin-bottom: 0; }
.reward-create-card {
  position: relative;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(155,80,226,.18) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(166,62,239,.13), transparent 34%),
    linear-gradient(145deg, #ffffff, #fbf8ff) !important;
  box-shadow: 0 22px 60px rgba(46,31,68,.095) !important;
}
.reward-create-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #8137dd, #d94cf2 58%, #55d2e9);
}
.reward-create-card .card-head {
  min-height: 94px;
  margin: 0;
  padding: 24px 28px 18px 32px;
  border-bottom: 1px solid #eee7f4;
}
.reward-create-card .card-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #21142f;
  font-size: 24px;
  font-weight: 950;
  letter-spacing: -.045em;
}
.reward-create-card .card-head h2::before {
  content: "";
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='13' rx='2'/%3E%3Cpath d='M12 8v13M3 12h18M12 8H7.5A2.5 2.5 0 1 1 10 5.5C10 7 12 8 12 8Zm0 0h4.5A2.5 2.5 0 1 0 14 5.5C14 7 12 8 12 8Z'/%3E%3C/svg%3E") center / 22px 22px no-repeat,
    linear-gradient(145deg, #8137dd, #d94cf2 58%, #55d2e9);
  box-shadow: 0 14px 28px rgba(129,55,221,.22);
}
.reward-create-card .card-head p {
  margin-top: 7px;
  color: #897d94;
  font-size: 12px;
  font-weight: 700;
}
.reward-create-card #rewardForm {
  padding: 20px 24px 24px 32px;
  gap: 14px;
  align-items: end;
}
.reward-create-card .app-field {
  padding: 12px;
  border: 1px solid #eee7f4;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 8px 18px rgba(44,30,62,.035);
}
.reward-create-card .app-field label {
  color: #7d7187;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .11em;
}
.reward-create-card .app-control {
  min-height: 46px;
  border-color: #e4daee;
  border-radius: 13px;
  background-color: #fff;
  font-weight: 800;
}
.reward-create-card .app-field.full {
  grid-column: span 3;
}
.reward-create-card #rewardForm .app-field:last-child {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.reward-create-card #rewardForm button[type="submit"] {
  min-height: 50px;
  border-radius: 16px;
  background: linear-gradient(135deg, #7f35dc, #b640f1 58%, #55cfe7);
  box-shadow: 0 16px 30px rgba(127,53,220,.24);
  font-size: 12px;
  font-weight: 950;
}
.reward-list { gap: 12px; }
.reward-vault-item {
  position: relative;
  min-height: 104px;
  padding: 16px 16px 16px 92px;
  overflow: hidden;
  border: 1px solid #e8e2ed;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(42,28,61,.055);
}
.reward-vault-item.monthly-moderator-reward {
  border-color: rgba(171,74,239,.30);
  background: linear-gradient(135deg, #fff, #fbf4ff 58%, #f2fcff);
}
.reward-vault-item.reason-monthly {
  border-color: rgba(139,53,228,.26) !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(223,70,242,.16), transparent 34%),
    linear-gradient(135deg, #fff, #fbf3ff 58%, #f4fbff) !important;
}
.reward-vault-item.reason-success {
  border-color: rgba(24,166,106,.24) !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(88,214,141,.16), transparent 34%),
    linear-gradient(135deg, #fff, #f2fff8 58%, #f7fffb) !important;
}
.reward-vault-item.reason-congrats {
  border-color: rgba(255,92,168,.24) !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(255,92,168,.18), transparent 34%),
    linear-gradient(135deg, #fff, #fff3fb 58%, #fbf4ff) !important;
}
.reward-vault-item.reason-elite {
  border-color: rgba(242,169,59,.30) !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(242,169,59,.20), transparent 34%),
    linear-gradient(135deg, #fff, #fff8eb 56%, #fbf3ff) !important;
}
.reward-vault-item.reason-active {
  border-color: rgba(40,185,212,.24) !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(72,125,255,.15), transparent 34%),
    linear-gradient(135deg, #fff, #f1fbff 58%, #f5f7ff) !important;
}
.reward-vault-item.reason-default {
  border-color: rgba(127,53,220,.20) !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(85,207,231,.14), transparent 34%),
    linear-gradient(135deg, #fff, #fbf8ff 62%, #f6fcff) !important;
}
.reward-recipient-mini {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 58px;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: #8d8396;
  font-size: 8px;
  font-weight: 800;
  text-align: center;
}
.reward-recipient-mini .avatar { width: 48px; height: 48px; box-shadow: 0 0 0 4px #f2edf8; }
.reward-vault-item .reward-symbol { background: linear-gradient(145deg, #883be3, #55cfe7); color: #fff; }
.reward-vault-item .reward-body strong { font-size: 14px; }
.reward-vault-item .reward-body span { font-size: 11px; }
.reward-vault-item .reward-code { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: #17121f; color: #f4effb; display: inline-flex; }
.reward-celebration {
  position: fixed;
  z-index: 9999;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(13,8,20,.12);
  animation: rewardFade 5.2s ease forwards;
}
.reward-celebration-card {
  width: min(430px, calc(100vw - 34px));
  padding: 28px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(145deg, rgba(124,48,224,.94), rgba(200,59,241,.91), rgba(76,199,229,.90));
  text-align: center;
  box-shadow: 0 30px 90px rgba(58,20,91,.35);
  animation: rewardPop .7s cubic-bezier(.2, 1.3, .25, 1) both;
}
.reward-celebration-card .icon { width: 42px; height: 42px; margin-bottom: 10px; }
.reward-celebration-card span { display: block; font-size: 10px; font-weight: 900; letter-spacing: .18em; opacity: .8; }
.reward-celebration-card strong { display: block; margin-top: 6px; font-size: clamp(24px, 5vw, 38px); line-height: 1.06; letter-spacing: -.045em; }
.reward-celebration-card p { margin: 10px 0 0; color: rgba(255,255,255,.82); font-size: 13px; }
.reward-celebration i {
  position: absolute;
  top: -18px;
  left: var(--x);
  width: 9px;
  height: 16px;
  border-radius: 4px;
  background: var(--c);
  transform: rotate(var(--r));
  animation: confettiFall 4.2s linear var(--d) forwards;
}
@keyframes rewardPop { from { opacity: 0; transform: translateY(18px) scale(.88); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes rewardFade { 0%, 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes confettiFall { to { transform: translateY(110vh) rotate(calc(var(--r) + 420deg)); } }

@media (max-width: 940px) {
  .sidebar-brand { height: 72px !important; align-items: center !important; }
  .sidebar-brand img { width: min(162px, 88%) !important; max-height: 50px !important; transform: none !important; }
  .support-command-hero,
  .reward-command-hero { align-items: flex-start; flex-direction: column; padding: 24px 20px; }
  .support-command-stats,
  .reward-command-stats { width: 100%; min-width: 0; }
}

@media (max-width: 720px) {
  .support-command-stats,
  .reward-command-stats { grid-template-columns: 1fr; }
  .support-ticket-card { grid-template-columns: 38px minmax(0,1fr) auto !important; }
  .support-ticket-card .support-ticket-owner,
  .support-ticket-card > .icon { display: none; }
  .reward-vault-item { padding: 84px 14px 14px; }
  .reward-recipient-mini { left: 14px; top: 14px; width: auto; grid-auto-flow: column; align-items: center; justify-items: start; }
}

/* 3.8.8 — premium reward vault cards */
.reward-vault-card {
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(155,80,226,.16) !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbf8ff 100%) !important;
  box-shadow: 0 22px 60px rgba(46,31,68,.10) !important;
}
.reward-vault-card > .card-head {
  min-height: 96px;
  margin: 0;
  padding: 24px 26px 20px;
  border-bottom: 1px solid #eee7f4;
  background:
    radial-gradient(circle at 92% 18%, rgba(166,62,239,.12), transparent 28%),
    linear-gradient(135deg, #fff, #faf6ff);
}
.reward-vault-card > .card-head h2 {
  color: #21142f;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -.04em;
}
.reward-vault-card > .card-head p {
  margin-top: 7px;
  color: #8d8198;
  font-size: 12px;
  font-weight: 650;
}
.reward-vault-card .reward-list {
  padding: 18px;
  gap: 14px;
}
.reward-vault-item {
  min-height: 128px !important;
  padding: 18px 18px 18px 104px !important;
  border: 1px solid #ebe4f1 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 98% 0%, rgba(161,60,235,.10), transparent 30%),
    linear-gradient(135deg, #fff, #fcfaff 62%, #f6fcff) !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0,1fr) minmax(210px, auto) !important;
  align-items: center !important;
  gap: 16px !important;
  box-shadow: 0 14px 36px rgba(42,28,61,.075) !important;
}
.reward-vault-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 5px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, #8738e4, #d849f3 52%, #55cfe7);
  box-shadow: 0 0 18px rgba(160,63,233,.25);
}
.reward-vault-item.monthly-moderator-reward::after {
  content: "AYIN MODERATÖRÜ";
  position: absolute;
  right: 18px;
  top: 14px;
  padding: 6px 9px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #8c35e4, #df46f2);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .11em;
  box-shadow: 0 10px 22px rgba(148,54,227,.22);
}
.reward-recipient-mini {
  left: 18px !important;
  top: 50% !important;
  width: 68px !important;
  transform: translateY(-50%);
  color: #72677c !important;
}
.reward-recipient-mini .avatar {
  width: 56px !important;
  height: 56px !important;
  border: 3px solid #fff;
  box-shadow: 0 10px 24px rgba(46,31,68,.16), 0 0 0 5px #f3edf9 !important;
}
.reward-recipient-mini small {
  display: none !important;
}
.reward-vault-item .reward-symbol {
  width: 58px !important;
  height: 58px !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, #7f35dc, #b640f1 58%, #55cfe7) !important;
  box-shadow: 0 14px 28px rgba(125,53,220,.24);
}
.reward-vault-item .reward-symbol .icon {
  width: 24px;
  height: 24px;
}
.reward-vault-item .reward-body {
  display: grid;
  gap: 7px;
}
.reward-vault-item .reward-body strong {
  color: #1d1228;
  font-size: 17px !important;
  font-weight: 900;
  letter-spacing: -.025em;
}
.reward-vault-item .reward-body span {
  max-width: 760px;
  color: #7d7387;
  font-size: 12px !important;
  font-weight: 650;
}
.reward-vault-item .reward-code {
  width: max-content;
  max-width: 100%;
  margin-top: 3px !important;
  padding: 10px 13px !important;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #15101f, #070610) !important;
  font-size: 12px !important;
  letter-spacing: .035em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.reward-copy-code {
  width: max-content;
  min-height: 34px;
  margin-top: 0;
  padding: 0 12px;
  border: 1px solid #ded3ea;
  border-radius: 11px;
  color: #65309f;
  background: #f8f1ff;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}
.reward-copy-code:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #7f35dc, #b640f1);
  transform: translateY(-1px);
}
.reward-copy-code .icon { width: 13px; height: 13px; }
.reward-vault-item .card-head-actions {
  justify-self: end;
  align-items: center;
  gap: 9px;
}
.reward-vault-item .pill {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 950;
}
.reward-vault-item .primary-small {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 13px;
  background: linear-gradient(135deg, #7f35dc, #b640f1);
  box-shadow: 0 12px 24px rgba(127,53,220,.22);
}
.reward-vault-item .table-icon.danger {
  width: 40px;
  height: 40px;
  border-radius: 13px;
}
.reward-vault-item .table-icon.danger {
  position: relative;
  border: 1px solid rgba(236,75,103,.18) !important;
  color: #d73555 !important;
  background: linear-gradient(145deg, #fff1f4, #ffe6ec) !important;
  box-shadow: 0 10px 20px rgba(215,53,85,.11);
  transition: color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.reward-vault-item .table-icon.danger:hover {
  color: #fff !important;
  background: linear-gradient(145deg, #ee4668, #d9294f) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(217,41,79,.22);
}
.reward-vault-item .table-icon.danger .icon {
  width: 17px;
  height: 17px;
  stroke-width: 2.4;
}

@media (max-width: 1100px) {
  .reward-vault-item {
    grid-template-columns: 54px minmax(0,1fr) !important;
  }
  .reward-vault-item .card-head-actions {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 720px) {
  .reward-vault-card > .card-head { padding: 20px 18px 16px; }
  .reward-vault-card .reward-list { padding: 12px; }
  .reward-vault-item {
    min-height: 0 !important;
    padding: 92px 14px 15px !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .reward-recipient-mini {
    top: 16px !important;
    left: 14px !important;
    width: auto !important;
    transform: none !important;
    grid-auto-flow: column;
    align-items: center;
    justify-items: start;
  }
  .reward-recipient-mini .avatar { width: 52px !important; height: 52px !important; }
  .reward-vault-item .reward-symbol {
    position: absolute;
    right: 14px;
    top: 18px;
    width: 50px !important;
    height: 50px !important;
  }
  .reward-vault-item .card-head-actions {
    grid-column: auto;
    width: 100%;
    justify-content: stretch;
  }
  .reward-vault-item .card-head-actions .primary-small,
  .reward-vault-item .card-head-actions .pill { flex: 1; justify-content: center; }
}

/* 3.8.9 — reward type visuals */
.reward-vault-item .reward-symbol {
  display: none !important;
}
.reward-visual {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 16px 32px rgba(38,25,56,.18);
}
.reward-visual svg {
  width: 40px;
  height: 40px;
  display: block;
}
.reward-visual .icon {
  width: 28px;
  height: 28px;
}
.reward-visual-google {
  background: linear-gradient(145deg, #ffffff, #eef9ff);
  border: 1px solid #dcebf4;
}
.reward-visual-google svg {
  width: 36px;
  height: 36px;
  transform: translateX(1px);
}
.reward-visual-appstore svg {
  width: 40px;
  height: 40px;
}
.reward-visual-appstore {
  background: linear-gradient(145deg, #eaf8ff, #edf1ff);
  border: 1px solid #d7e7ff;
}
.reward-visual-uc {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 25%, rgba(255,230,173,.24), transparent 48%),
    linear-gradient(145deg, #19151d, #070608);
  border: 1px solid rgba(233,207,158,.22);
}
.reward-visual-uc img {
  width: 84%;
  height: 84%;
  object-fit: contain;
  object-position: center;
  transform: none;
  filter: drop-shadow(0 12px 14px rgba(0,0,0,.35));
}
.reward-visual-moderator {
  color: #fff;
  background: linear-gradient(145deg, #8137dd, #d94cf2 56%, #55d2e9);
  border: 1px solid rgba(255,255,255,.20);
}
.reward-visual-gift {
  color: #fff;
  background: linear-gradient(145deg, #7f35dc, #55cfe7);
}
.reward-kind-googleplay::before { background: linear-gradient(180deg, #23d3c3, #ffd25f 52%, #ff5f6d) !important; }
.reward-kind-appstore::before { background: linear-gradient(180deg, #43d7ff, #1888ff 52%, #7257ff) !important; }
.reward-kind-uc::before { background: linear-gradient(180deg, #e8d09b, #a88354 52%, #423426) !important; }
.reward-kind-uc .reward-code {
  border-color: rgba(232,208,155,.18);
  background: linear-gradient(135deg, #1e1710, #080706) !important;
}

@media (max-width: 720px) {
  .reward-visual {
    position: absolute;
    right: 14px;
    top: 18px;
    width: 54px;
    height: 54px;
    border-radius: 17px;
  }
  .reward-visual svg { width: 36px; height: 36px; }
  .reward-visual-uc {
    width: 62px;
    height: 54px;
  }
}

/* 3.8.9 — reward reason/status chips */
.reward-meta-line {
  margin-top: 2px !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #8a8094 !important;
}
.reward-owner-inline {
  min-height: 31px;
  padding: 4px 9px 4px 4px;
  border: 1px solid #ece5f3;
  border-radius: 999px;
  background: #fff;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  box-shadow: 0 7px 15px rgba(44,30,62,.055);
}
.reward-owner-inline .avatar {
  width: 23px;
  height: 23px;
  font-size: 7px;
}
.reward-owner-inline b {
  color: #3a2b48;
  font-size: 10px;
  font-weight: 900;
}
.reward-reason-badge {
  min-height: 31px;
  padding: 0 11px;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  font-style: normal;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(74,37,106,.14);
}
.reward-reason-badge.reason-monthly { background: linear-gradient(135deg, #8b35e4, #df46f2); }
.reward-reason-badge.reason-success { background: linear-gradient(135deg, #18a66a, #58d68d); }
.reward-reason-badge.reason-congrats { background: linear-gradient(135deg, #ff5ca8, #a449ed); }
.reward-reason-badge.reason-elite { background: linear-gradient(135deg, #f2a93b, #8b35e4); }
.reward-reason-badge.reason-active { background: linear-gradient(135deg, #28b9d4, #487dff); }
.reward-reason-badge.reason-default { background: linear-gradient(135deg, #7f35dc, #55cfe7); }
.reward-meta-line time {
  color: #9b92a4;
  font-size: 10px;
  font-weight: 750;
}
.reward-vault-item .pill.orange,
.reward-vault-item .pill.green {
  min-width: 104px;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  box-shadow: 0 10px 20px rgba(34,22,48,.08);
}
.reward-vault-item .pill.orange {
  color: #9a5300;
  border-color: #ffe0ab;
  background: linear-gradient(135deg, #fff2d8, #ffd997);
}
.reward-vault-item .pill.green {
  color: #fff;
  background: linear-gradient(135deg, #16a568, #45cc85);
  box-shadow: 0 12px 24px rgba(22,165,104,.20);
}
.reward-vault-item .pill.orange::before,
.reward-vault-item .pill.green::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.reward-vault-item .pill.orange::before {
  background: #f0a437;
  box-shadow: 0 0 0 4px rgba(240,164,55,.18);
}
.reward-vault-item .pill.green::before {
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.18);
}

/* 3.8.12 — editable reward catalog */
.reward-visual-custom {
  background: linear-gradient(145deg, #ffffff, #f4f0fb);
  border: 1px solid #e2d8ee;
}
.reward-visual-custom img,
.reward-visual img {
  max-width: 86%;
  max-height: 86%;
  object-fit: contain;
  object-position: center;
}
.reward-visual-uc img {
  width: 88% !important;
  height: 88% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}
.reward-catalog-card {
  margin-top: 18px;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(155,80,226,.16) !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, #fff, #fbf8ff) !important;
  box-shadow: 0 18px 48px rgba(46,31,68,.075) !important;
}
.reward-catalog-card .card-head {
  margin: 0;
  padding: 22px 26px 17px;
  border-bottom: 1px solid #eee7f4;
}
.reward-catalog-card .card-head h2 {
  color: #21142f;
  font-size: 21px;
  font-weight: 950;
  letter-spacing: -.04em;
}
.reward-catalog-card .card-head p {
  color: #8d8198;
  font-size: 12px;
  font-weight: 650;
}
.reward-catalog-grid {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.reward-catalog-item {
  min-width: 0;
  padding: 13px;
  border: 1px solid #ebe4f1;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  display: grid;
  grid-template-columns: 72px minmax(0,1.1fr) minmax(130px,.7fr);
  align-items: end;
  gap: 10px;
  box-shadow: 0 10px 24px rgba(44,30,62,.045);
}
.reward-catalog-preview {
  width: 68px;
  height: 68px;
  align-self: center;
  display: grid;
  place-items: center;
}
.reward-catalog-preview .reward-visual {
  width: 62px;
  height: 62px;
}
.reward-catalog-add {
  border: 1px dashed #cdb9e4;
  border-radius: 18px;
  color: #7f35dc;
  background: #f8f1ff;
}
.reward-catalog-add .icon {
  width: 24px;
  height: 24px;
}
.reward-catalog-item .app-field {
  margin: 0;
}
.reward-catalog-item .app-field label {
  color: #82768c;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .1em;
}
.reward-catalog-item .app-control {
  min-height: 42px;
  border-radius: 12px;
  font-weight: 800;
}
.reward-icon-picker {
  min-height: 42px;
  margin: 0;
  border-radius: 12px;
  justify-content: center;
}
.reward-catalog-item .mini-button,
.reward-catalog-item .table-icon {
  min-height: 42px;
  border-radius: 12px;
}
.reward-catalog-delete {
  width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  border: 1px solid rgba(220,55,85,.18) !important;
  border-radius: 14px !important;
  color: #d73555 !important;
  background: linear-gradient(145deg, #fff1f4, #ffe7ec) !important;
  box-shadow: 0 10px 20px rgba(215,53,85,.10);
  transition: transform .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease;
}
.reward-catalog-delete:hover {
  color: #fff !important;
  background: linear-gradient(145deg, #ee4668, #d9294f) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(217,41,79,.20);
}
.reward-catalog-delete .icon {
  width: 17px;
  height: 17px;
  stroke-width: 2.4;
}
@media (max-width: 980px) {
  .reward-catalog-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .reward-catalog-item { grid-template-columns: 64px minmax(0,1fr); }
  .reward-catalog-item .reward-icon-picker,
  .reward-catalog-item .mini-button,
  .reward-catalog-item .table-icon { grid-column: 1 / -1; }
}

/* 3.8.13 — reward picker, catalog delete and type-based colors */
.reward-choice-field {
  padding: 14px !important;
}
.reward-choice-grid {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.reward-choice {
  min-height: 54px;
  padding: 8px 12px;
  border: 1px solid #e6ddec;
  border-radius: 16px;
  color: #352640;
  background: linear-gradient(145deg, #fff, #fbf8ff);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 9px 20px rgba(44,30,62,.045);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}
.reward-choice:hover,
.reward-choice.is-active {
  border-color: rgba(139,53,228,.32);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(91,48,143,.11);
}
.reward-choice.is-active {
  position: relative;
  border-color: rgba(139,53,228,.55);
  background: linear-gradient(145deg, #f8efff, #f1fbff);
  box-shadow: 0 0 0 4px rgba(139,53,228,.08), 0 16px 30px rgba(91,48,143,.16);
}
.reward-choice.is-active::after {
  content: "✓";
  position: absolute;
  right: -6px;
  top: -7px;
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #7f35dc, #b640f1);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 950;
}
.reward-choice .reward-visual {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(38,25,56,.12);
}
.reward-choice .reward-visual svg {
  width: 24px;
  height: 24px;
}
.reward-reason-choice {
  min-height: 40px;
  color: #fff;
}
.reward-reason-choice.reason-monthly { background: linear-gradient(135deg, #8b35e4, #df46f2); }
.reward-reason-choice.reason-success { background: linear-gradient(135deg, #18a66a, #58d68d); }
.reward-reason-choice.reason-elite { background: linear-gradient(135deg, #f2a93b, #8b35e4); }
.reward-reason-choice.reason-active { background: linear-gradient(135deg, #28b9d4, #487dff); }
.reward-reason-choice.is-active {
  outline: 0;
  border-color: rgba(255,255,255,.65);
  box-shadow: 0 0 0 4px rgba(127,53,220,.10), 0 16px 30px rgba(44,30,62,.16);
}
.reward-filter-select {
  width: min(260px, 100%);
  min-height: 42px;
  border-radius: 13px;
  font-weight: 850;
}
.reward-vault-item.reward-kind-googleplay {
  border-color: rgba(35,211,195,.24) !important;
  background:
    radial-gradient(circle at 94% 8%, rgba(255,210,95,.20), transparent 33%),
    radial-gradient(circle at 82% 76%, rgba(90,167,255,.12), transparent 32%),
    linear-gradient(135deg, #fff, #f4fffd 58%, #fff9ed) !important;
}
.reward-vault-item.reward-kind-appstore {
  border-color: rgba(24,136,255,.24) !important;
  background:
    radial-gradient(circle at 94% 8%, rgba(67,215,255,.18), transparent 33%),
    linear-gradient(135deg, #fff, #eef8ff 58%, #f2f1ff) !important;
}
.reward-vault-item.reward-kind-uc {
  border-color: rgba(232,208,155,.30) !important;
  background:
    radial-gradient(circle at 93% 10%, rgba(232,208,155,.22), transparent 34%),
    linear-gradient(135deg, #fff, #fbf7ee 48%, #f2eadc) !important;
}
.reward-vault-item.reward-kind-gift,
.reward-vault-item.reward-kind-custom {
  border-color: rgba(127,53,220,.20) !important;
  background:
    radial-gradient(circle at 94% 8%, rgba(127,53,220,.13), transparent 34%),
    linear-gradient(135deg, #fff, #fbf8ff 58%, #f5fcff) !important;
}
.reward-catalog-item.reward-catalog-kind-googleplay {
  background: linear-gradient(145deg, #fff, #f4fffd 58%, #fff9ed);
}
.reward-catalog-item.reward-catalog-kind-appstore {
  background: linear-gradient(145deg, #fff, #eef8ff 58%, #f2f1ff);
}
.reward-catalog-item.reward-catalog-kind-uc {
  background: linear-gradient(145deg, #fff, #fbf7ee 58%, #f2eadc);
}
.reward-catalog-item.reward-catalog-kind-custom,
.reward-catalog-item.reward-catalog-kind-gift {
  background: linear-gradient(145deg, #fff, #fbf8ff 58%, #f5fcff);
}
.reward-catalog-preview.is-cleared {
  border: 1px dashed #d8c6ea;
  border-radius: 18px;
  background: #faf7fd;
}
.reward-catalog-preview.is-cleared::after {
  content: "Görsel yok";
  color: #8c7a99;
  font-size: 9px;
  font-weight: 900;
}
.reward-clear-image {
  color: #8a4c1e;
  border-color: #f5d3ae;
  background: #fff5e9;
}
.reward-icon-picker {
  border: 1px solid #ddd0ea !important;
  color: #6931a6 !important;
  background: linear-gradient(145deg, #fff, #f7f0ff) !important;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(90,48,130,.07);
}
.reward-icon-picker:hover {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #7f35dc, #b640f1) !important;
}
.reset-points-button {
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(220,55,85,.18);
  border-radius: 13px;
  color: #d73555;
  background: linear-gradient(145deg, #fff1f4, #ffe7ec);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(215,53,85,.10);
  transition: transform .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease;
}
.reset-points-button:hover {
  color: #fff;
  background: linear-gradient(145deg, #ee4668, #d9294f);
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(217,41,79,.20);
}
.reset-points-button .icon {
  width: 15px;
  height: 15px;
}
.reward-catalog-item {
  grid-template-columns: 72px minmax(180px,1fr) minmax(132px,auto) auto auto auto !important;
}
.reward-catalog-new {
  grid-template-columns: 72px minmax(180px,1fr) minmax(132px,auto) auto !important;
}
@media (max-width: 1180px) {
  .reward-catalog-item,
  .reward-catalog-new {
    grid-template-columns: 72px minmax(0,1fr) minmax(132px,auto) !important;
  }
  .reward-catalog-item .reward-catalog-save,
  .reward-catalog-item .reward-catalog-delete,
  .reward-catalog-item .reward-clear-image,
  .reward-catalog-new .reward-catalog-save {
    grid-column: auto;
  }
}
@media (max-width: 720px) {
  .reward-choice { width: 100%; justify-content: flex-start; }
  .reward-catalog-item,
  .reward-catalog-new {
    grid-template-columns: 64px minmax(0,1fr) !important;
  }
  .reward-catalog-item .reward-icon-picker,
  .reward-catalog-item .reward-clear-image,
  .reward-catalog-item .reward-catalog-save,
  .reward-catalog-item .reward-catalog-delete,
  .reward-catalog-new .reward-icon-picker,
  .reward-catalog-new .reward-catalog-save {
    grid-column: 1 / -1;
  }
}

/* 3.8.16 — operations center and reward catalog alignment */
.operations-workspace {
  display: grid;
  gap: 18px;
}
.operations-hero {
  position: relative;
  overflow: hidden;
  min-height: 154px;
  padding: 24px;
  border: 1px solid rgba(129,58,214,.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 96% 8%, rgba(85,212,239,.22), transparent 30%),
    radial-gradient(circle at 9% 12%, rgba(166,60,255,.22), transparent 32%),
    linear-gradient(135deg, #17101f, #2a1742 52%, #101923);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-shadow: 0 22px 55px rgba(29,18,46,.18);
}
.operations-hero h2 {
  margin: 6px 0 7px;
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1;
  letter-spacing: -.055em;
}
.operations-hero p {
  max-width: 660px;
  margin: 0;
  color: rgba(255,255,255,.76);
  font-size: 13px;
  font-weight: 650;
}
.operations-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px,1fr));
  gap: 10px;
}
.operations-stats span {
  min-width: 96px;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  display: grid;
  gap: 4px;
  color: rgba(255,255,255,.70);
  font-size: 10px;
  font-weight: 850;
  backdrop-filter: blur(12px);
}
.operations-stats strong {
  color: #fff;
  font-size: 24px;
  letter-spacing: -.04em;
}
.operations-card,
.operations-security-card {
  border-radius: 24px !important;
  border: 1px solid #e9e1f0 !important;
  background: linear-gradient(145deg, #fff, #fbf8ff) !important;
  box-shadow: 0 16px 42px rgba(46,31,68,.07) !important;
}
.operations-card .card-head,
.operations-security-card .card-head {
  align-items: center;
  gap: 14px;
}
.operations-list {
  display: grid;
  gap: 9px;
}
.operation-row {
  position: relative;
  min-height: 66px;
  padding: 12px 14px !important;
  border: 1px solid #eee8f4 !important;
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  align-items: center !important;
  box-shadow: 0 10px 22px rgba(41,28,58,.045);
}
.operation-row .avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  box-shadow: 0 9px 18px rgba(42,25,62,.12);
}
.operation-row .activity-dot {
  width: 9px;
  height: 9px;
  margin-top: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b35e4, #55d4ef);
  box-shadow: 0 0 0 4px rgba(139,53,228,.10);
}
.operation-row .activity-copy strong {
  color: #21142f;
  font-size: 13px;
  font-weight: 950;
}
.operation-row .activity-copy span {
  color: #82768c;
  font-size: 11px;
  font-weight: 700;
}
.operation-row .activity-time {
  margin-left: auto;
  padding: 7px 9px;
  border-radius: 999px;
  color: #74657e;
  background: #f5f0fa;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}
.operation-security-icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, #7f35dc, #55d4ef);
  display: grid;
  place-items: center;
  box-shadow: 0 12px 23px rgba(88,54,145,.18);
}
.operation-security-icon .icon {
  width: 18px;
  height: 18px;
}

.reward-catalog-item,
.reward-catalog-new {
  grid-template-columns: 72px minmax(220px,1fr) minmax(300px,auto) !important;
  align-items: center !important;
}
.reward-catalog-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.reward-catalog-actions .reward-icon-picker {
  min-width: 132px;
  padding: 0 14px;
}
.reward-catalog-save {
  min-width: 102px;
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #7f35dc, #55d4ef) !important;
  box-shadow: 0 12px 22px rgba(91,63,170,.16);
}
.reward-catalog-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(91,63,170,.24);
}
.reward-catalog-save .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.8;
}
.reward-user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.reward-user-choice {
  min-height: 64px;
  justify-content: flex-start;
}
.reward-user-choice .avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}
.reward-user-choice span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reward-user-choice small {
  margin-left: auto;
  padding: 5px 8px;
  border-radius: 999px;
  color: #725783;
  background: rgba(127,53,220,.09);
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .operations-hero { align-items: stretch; flex-direction: column; }
  .operations-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .reward-catalog-item,
  .reward-catalog-new { grid-template-columns: 64px minmax(0,1fr) !important; }
  .reward-catalog-actions { grid-column: 1 / -1; justify-content: stretch; }
  .reward-catalog-actions .reward-icon-picker,
  .reward-catalog-actions .reward-catalog-save { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .operations-hero { padding: 18px; border-radius: 22px; }
  .operations-stats { grid-template-columns: 1fr; }
  .operations-card .card-head,
  .operations-security-card .card-head { align-items: stretch; flex-direction: column; }
  .log-select { width: 100%; }
  .operation-row { align-items: flex-start !important; flex-wrap: wrap; }
  .operation-row .activity-time { width: 100%; margin-left: 58px; text-align: center; }
  .reward-catalog-actions { flex-wrap: wrap; }
  .reward-catalog-actions .reward-catalog-delete { flex: 0 0 42px; }
  .reward-user-grid { grid-template-columns: 1fr; }
}

/* 3.8.17 — reward card cleanup */
.reward-vault-item.monthly-moderator-reward::after {
  content: none !important;
  display: none !important;
}
.reward-owner-inline.only-avatar {
  width: 31px;
  min-width: 31px;
  padding: 4px !important;
  justify-content: center;
}
.reward-owner-inline.only-avatar b {
  display: none !important;
}
.reward-vault-item .reward-visual-uc,
.reward-choice .reward-visual-uc,
.reward-catalog-preview .reward-visual-uc {
  width: 62px !important;
  height: 62px !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #ffffff, #f6f1fb) !important;
  border: 1px solid #e2d8ee !important;
  box-shadow: 0 16px 32px rgba(38,25,56,.14) !important;
}
.reward-vault-item .reward-visual-uc img,
.reward-choice .reward-visual-uc img,
.reward-catalog-preview .reward-visual-uc img {
  width: 86% !important;
  height: 86% !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 9px 13px rgba(45,31,20,.20)) !important;
}
.reward-code-field {
  grid-column: 1 / -1 !important;
}
.reward-code-field .app-control {
  width: 100%;
  min-height: 52px;
  font-size: 13px;
}
.reward-catalog-new {
  grid-column: 1 / -1;
  grid-template-columns: 72px minmax(260px,1fr) minmax(300px,auto) !important;
}
.security-agent {
  display: block;
  max-width: 820px;
  margin-top: 5px;
  color: #9a8fa4;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.35;
  word-break: break-word;
}
.operations-activity-card {
  border: 1px solid rgba(85,207,231,.18) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 94% 8%, rgba(85,207,231,.16), transparent 32%),
    linear-gradient(145deg, #fff, #f6fbff 58%, #fbf8ff) !important;
  box-shadow: 0 16px 42px rgba(46,31,68,.07) !important;
}
.activity-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
.activity-summary-grid span {
  min-height: 74px;
  padding: 13px;
  border: 1px solid #e8eef7;
  border-radius: 17px;
  color: #81738d;
  background: rgba(255,255,255,.82);
  display: grid;
  align-content: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 9px 20px rgba(44,30,62,.045);
}
.activity-summary-grid strong {
  color: #21142f;
  font-size: 18px;
  letter-spacing: -.04em;
}
.active-day-list {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px,1fr));
  gap: 8px;
}
.active-day-row {
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #eee8f4;
  border-radius: 14px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.active-day-row span {
  color: #83778d;
  font-size: 11px;
  font-weight: 750;
}
.active-day-row b {
  color: #7f35dc;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}
.broadcast-announcement {
  position: fixed;
  z-index: 9998;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(242,63,93,.18), transparent 42%);
  animation: broadcastAnnounceFade 6.2s ease forwards;
}
.broadcast-announcement-card {
  width: min(460px, calc(100vw - 34px));
  padding: 28px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,83,112,.30), transparent 34%),
    radial-gradient(circle at 88% 90%, rgba(164,73,237,.24), transparent 34%),
    linear-gradient(135deg, #17111d, #2b1725 58%, #211429);
  text-align: center;
  box-shadow: 0 30px 95px rgba(33,12,30,.38);
  pointer-events: auto;
  animation: broadcastAnnouncePop .72s cubic-bezier(.2,1.3,.25,1) both;
}
.broadcast-announcement-orb {
  width: 62px;
  height: 62px;
  margin: 0 auto 14px;
  border-radius: 21px;
  color: #fff;
  background: linear-gradient(145deg, #ff4768, #b640f1);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 10px rgba(255,71,104,.12), 0 18px 34px rgba(191,49,98,.28);
  animation: live-control-pulse 1.4s ease-in-out infinite alternate;
}
.broadcast-announcement-orb .icon {
  width: 29px;
  height: 29px;
}
.broadcast-announcement-card .section-eyebrow {
  color: #ffbdca;
}
.broadcast-announcement-card strong {
  display: block;
  margin-top: 7px;
  font-size: clamp(25px, 4vw, 38px);
  line-height: 1.04;
  letter-spacing: -.05em;
}
.broadcast-announcement-card p {
  margin: 10px 0 18px;
  color: rgba(255,255,255,.76);
  font-size: 13px;
  font-weight: 700;
}
.broadcast-announcement-card .broadcast-announcement-join-btn {
  min-height: 42px;
  padding: 0 15px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #9333ea);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(124, 58, 237, .28);
}
@keyframes broadcastAnnouncePop {
  from { opacity: 0; transform: translateY(18px) scale(.88); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes broadcastAnnounceFade {
  0%, 84% { opacity: 1; }
  100% { opacity: 0; }
}
@media (max-width: 720px) {
  .dashboard-ranking-card > .card-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .ranking-head-actions {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }
  .reward-vault-item .reward-visual-uc {
    width: 54px !important;
    height: 54px !important;
    border-radius: 17px !important;
  }
  .reward-catalog-new {
    grid-template-columns: 64px minmax(0,1fr) !important;
  }
}
/* Reward list uses catalog artwork; recipient is shown as text in Todu view. */
.reward-vault-item > .reward-visual {
  position: static !important;
  width: 62px !important;
  height: 62px !important;
  display: grid !important;
  grid-column: 1;
  grid-row: 1;
}
.reward-vault-item {
  padding-left: 18px !important;
  grid-template-columns: 72px minmax(0,1fr) minmax(210px, auto) !important;
}
.reward-recipient-mini { display: none !important; }
.reward-recipient-name {
  min-height: 31px;
  padding: 0 11px;
  border: 1px solid #e8dfef;
  border-radius: 999px;
  color: #4f3b5e !important;
  background: rgba(255,255,255,.86);
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 10px !important;
  font-weight: 900 !important;
}
.reward-recipient-name .icon { width: 13px; height: 13px; }
.reward-vault-item .reward-meta-line {
  min-height: 31px;
  margin-top: 0 !important;
  align-items: center;
}
.reward-code-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}
.reward-code-row .reward-code,
.reward-code-row .reward-copy-code {
  margin-top: 0 !important;
}

/* 3.8.23 — detailed audit center */
.log-filter-card {
  border: 1px solid #e8dff0 !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, #fff, #fbf8ff) !important;
  box-shadow: 0 16px 42px rgba(46,31,68,.07) !important;
}
.log-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.log-filter-heading h2 { margin: 4px 0 3px; font-size: 20px; }
.log-filter-heading p { margin: 0; color: #8b8094; font-size: 11px; font-weight: 700; }
.log-filter-reset { min-height: 40px; flex: 0 0 auto; }
.log-filter-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1fr;
  gap: 11px;
}
.log-filter-grid label { min-width: 0; display: grid; gap: 7px; }
.log-filter-grid label > span { color: #6f6279; font-size: 10px; font-weight: 900; }
.log-filter-grid .app-control { width: 100%; min-width: 0; min-height: 45px; }
.log-filter-summary {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee8f3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}
.log-filter-summary > span {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  color: #685873;
  background: #f5effa;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 850;
}
.log-filter-summary .avatar { width: 22px; height: 22px; }
.log-filter-summary .icon { width: 14px; height: 14px; }
.log-result-count {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid #e4d8ed;
  border-radius: 999px;
  color: #7138a8;
  background: #f8f1ff;
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}
.activity-user-list { margin-top: 13px; display: grid; gap: 9px; }
.activity-user-row {
  min-height: 66px;
  padding: 11px 13px;
  border: 1px solid #ebe6f1;
  border-radius: 17px;
  background: rgba(255,255,255,.84);
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto auto;
  align-items: center;
  gap: 11px;
}
.activity-user-row .avatar { width: 42px; height: 42px; }
.activity-user-row div { min-width: 0; display: grid; gap: 3px; }
.activity-user-row strong { color: #23162f; font-size: 12px; font-weight: 950; }
.activity-user-row span { overflow: hidden; color: #8a7f93; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.activity-user-row > em { padding: 6px 8px; border-radius: 999px; color: #8a7c92; background: #f1edf4; font-size: 9px; font-style: normal; font-weight: 900; white-space: nowrap; }
.activity-user-row > em.is-online { color: #087c4b; background: #ddf8eb; }
.activity-user-row > b { min-width: 82px; color: #7f35dc; font-size: 12px; font-weight: 950; text-align: right; }
.operation-detail { display: block; margin-top: 4px; color: #9a8fa4; font-size: 10px; font-weight: 650; }
.security-facts { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.security-facts span { padding: 6px 8px; border-radius: 9px; color: #55465f !important; background: #f4eff8; display: inline-flex !important; gap: 5px; font-size: 9px !important; }
.security-facts b { color: #7f35dc; font-weight: 950; }
.operation-security-icon.success { background: linear-gradient(135deg, #16a568, #4bd590); }
.operation-security-icon.warning { background: linear-gradient(135deg, #e5962e, #e85175); }
@media (max-width: 980px) {
  .log-filter-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .reward-vault-item {
    padding: 82px 14px 15px !important;
    grid-template-columns: 1fr !important;
  }
  .reward-vault-item > .reward-visual {
    position: absolute !important;
    left: 14px;
    top: 15px;
    width: 54px !important;
    height: 54px !important;
  }
  .reward-code-row {
    align-items: stretch;
  }
  .log-filter-heading { align-items: stretch; flex-direction: column; }
  .log-filter-reset { width: 100%; justify-content: center; }
  .log-filter-grid { grid-template-columns: 1fr; }
  .activity-user-row { grid-template-columns: 40px minmax(0,1fr) auto; }
  .activity-user-row > em { grid-column: 2; justify-self: start; }
  .activity-user-row > b { grid-column: 3; grid-row: 1 / span 2; min-width: 0; }
  .log-result-count { align-self: flex-start; }
}

/* Final reward-card cascade — shared by Todu, Management and Moderator views. */
.reward-vault-item {
  min-height: 150px !important;
  padding: 22px !important;
  grid-template-columns: 82px minmax(0,1fr) minmax(138px,auto) !important;
  align-items: start !important;
  gap: 20px !important;
  border-radius: 22px !important;
}
.reward-vault-item > .reward-visual {
  position: static !important;
  width: 78px !important;
  height: 78px !important;
  display: grid !important;
  grid-column: 1;
  grid-row: 1;
  border-radius: 22px !important;
}
.reward-vault-item .reward-body { min-width: 0; display: grid; gap: 8px !important; }
.reward-vault-item .reward-code-row {
  width: 100%;
  margin-top: 4px;
  padding: 12px;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 9px !important;
}
.reward-vault-item .reward-code-label { grid-column: 1 / -1; }
.reward-vault-item .reward-code-row .reward-code { width: 100% !important; min-height: 45px; margin: 0 !important; }
.reward-vault-item .reward-code-row .reward-copy-code { min-height: 45px; margin: 0 !important; }
.reward-vault-item .card-head-actions {
  min-width: 138px;
  display: flex;
  flex-direction: column;
  align-items: stretch !important;
  justify-self: stretch !important;
}
@media (max-width: 900px) {
  .reward-vault-item { grid-template-columns: 72px minmax(0,1fr) !important; }
  .reward-vault-item > .reward-visual { width: 68px !important; height: 68px !important; }
  .reward-vault-item .card-head-actions { grid-column: 1 / -1 !important; min-width: 0; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .reward-vault-item { padding: 16px !important; grid-template-columns: 58px minmax(0,1fr) !important; gap: 13px !important; }
  .reward-vault-item > .reward-visual { position: static !important; width: 54px !important; height: 54px !important; }
  .reward-vault-item .reward-code-row { grid-template-columns: 1fr; }
  .reward-vault-item .reward-code-row .reward-copy-code { width: 100%; justify-content: center; }
}

/* TODU V4 — unified product design */
:root {
  --v4-night: #09080f;
  --v4-night-2: #12101d;
  --v4-purple: #962dff;
  --v4-magenta: #d83cff;
  --v4-blue: #427dff;
  --v4-cyan: #4dd9f1;
  --v4-ink: #17111f;
  --v4-muted: #81768c;
  --v4-line: rgba(56,35,75,.10);
  --v4-surface: rgba(255,255,255,.88);
  --v4-shadow: 0 18px 55px rgba(36,21,54,.09);
}
body {
  color: var(--v4-ink);
  background:
    radial-gradient(circle at 86% 0%, rgba(77,217,241,.10), transparent 28%),
    radial-gradient(circle at 22% 0%, rgba(150,45,255,.09), transparent 32%),
    #f7f5fa;
  font-size: 15px;
}
.v4-shell.app-shell {
  grid-template-columns: 294px minmax(0,1fr) !important;
  background: transparent;
}
.v4-shell .sidebar {
  width: 294px;
  padding: 18px 15px 16px;
  overflow: hidden;
  border-right: 1px solid rgba(193,95,255,.12);
  background:
    radial-gradient(circle at 86% 3%, rgba(174,52,255,.28), transparent 25%),
    radial-gradient(circle at 10% 88%, rgba(64,177,255,.10), transparent 30%),
    linear-gradient(180deg, #0d0b14 0%, #0a0910 58%, #08070c 100%);
  box-shadow: 18px 0 60px rgba(19,11,28,.11);
}
.v4-shell .sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(to bottom, #000, transparent 76%);
}
.v4-shell .sidebar > * { position: relative; z-index: 1; }
.v4-shell .sidebar-brand {
  width: 100%;
  height: 104px !important;
  margin: 0 0 10px;
  padding: 14px 20px !important;
  overflow: visible !important;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 18px 40px rgba(0,0,0,.18);
}
.v4-shell .sidebar-brand::before {
  content: "";
  position: absolute;
  left: 22%; right: 22%; bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #c43fff, #4dd9f1, transparent);
  box-shadow: 0 0 16px rgba(182,58,255,.56);
}
.v4-shell .sidebar-brand img {
  width: 214px !important;
  max-width: 100% !important;
  max-height: 72px !important;
  margin: 0 !important;
  object-fit: contain !important;
  transform: none !important;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
.v4-shell .sidebar-nav { gap: 5px; padding: 0 3px 16px; scrollbar-width: none; }
.v4-shell .nav-caption {
  margin: 5px 0 1px;
  padding: 13px 11px 7px;
  color: rgba(238,228,247,.34);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
}
.v4-shell .nav-item {
  position: relative;
  min-height: 49px;
  padding: 0 11px;
  border-radius: 15px;
  color: #a9a3b1;
  gap: 11px;
  font-size: 12px;
  font-weight: 760;
  transition: transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease;
}
.v4-shell .nav-item .icon {
  width: 34px;
  height: 34px;
  padding: 8px;
  color: #88818f;
  border-radius: 11px;
  background: rgba(255,255,255,.038);
}
.v4-shell .nav-item:hover { color: #fff; border-color: rgba(255,255,255,.07); background: rgba(255,255,255,.052); transform: translateX(3px); }
.v4-shell .nav-item:hover .icon { color: #dfbaff; background: rgba(169,61,241,.13); }
.v4-shell .nav-item.is-active {
  color: #fff;
  border-color: rgba(192,83,255,.21);
  background: linear-gradient(100deg, rgba(151,44,237,.27), rgba(63,178,222,.09));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 11px 25px rgba(0,0,0,.12);
}
.v4-shell .nav-item.is-active::after {
  content: "";
  position: absolute;
  right: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #55e2f7;
  box-shadow: 0 0 10px #55e2f7;
}
.v4-shell .nav-item.is-active .icon { color: #fff; background: linear-gradient(145deg, #9330e8, #526ee8); box-shadow: 0 9px 18px rgba(119,48,218,.28); }
.v4-shell .nav-item em { min-width: 22px; height: 22px; margin-left: auto; border-radius: 999px; background: linear-gradient(135deg, #bd39f0, #e54883); box-shadow: 0 7px 14px rgba(207,49,137,.25); }
.v4-shell .sidebar-footer { padding: 13px 3px 0; border-top: 1px solid rgba(255,255,255,.075); }
.v4-shell .live-mini { min-height: 44px; border: 1px solid rgba(255,255,255,.065); border-radius: 14px; color: #9d95a4; background: rgba(255,255,255,.035); }
.v4-shell .logout-button { min-height: 44px; border-radius: 14px; color: #c6aeb5; border-color: rgba(239,77,110,.16); background: rgba(223,50,87,.055); }
.v4-shell .main-area {
  position: relative;
  min-width: 0;
  padding: 24px clamp(24px, 3.2vw, 58px) 54px;
  background:
    radial-gradient(circle at 94% 0%, rgba(77,217,241,.10), transparent 22%),
    radial-gradient(circle at 28% -10%, rgba(150,45,255,.11), transparent 28%),
    linear-gradient(180deg, #faf9fc, #f5f3f8 66%);
}
.v4-shell .topbar {
  min-height: 68px;
  margin: 0 auto;
  padding: 0 0 18px;
  max-width: 1740px;
  border-bottom: 1px solid rgba(57,35,76,.08);
}
.v4-shell .crumb { color: #9b8aa8; font-size: 9px; letter-spacing: .2em; }
.v4-shell .topbar h1 { margin-top: 5px; color: #17101f; font-size: clamp(25px, 2.5vw, 35px); font-weight: 760; letter-spacing: -.055em; }
.v4-shell .page-subtitle { max-width: 1740px; margin: 15px auto 24px; color: #81758b; font-size: 12px; font-weight: 650; }
.v4-system-chip {
  min-height: 44px;
  padding: 5px 12px 5px 8px;
  border: 1px solid rgba(69,42,91,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 10px 25px rgba(45,28,62,.055);
  backdrop-filter: blur(14px);
}
.v4-system-chip > i { width: 9px; height: 9px; border-radius: 50%; background: #21c77a; box-shadow: 0 0 0 5px rgba(33,199,122,.12), 0 0 14px rgba(33,199,122,.42); }
.v4-system-chip > span { display: grid; gap: 1px; }
.v4-system-chip b { color: #2e2137; font-size: 10px; }
.v4-system-chip small { color: #95899d; font-size: 8px; font-weight: 750; white-space: nowrap; }
.v4-shell .language-switch,
.v4-shell .icon-button,
.v4-shell .top-avatar { border-color: rgba(67,43,86,.11); background: rgba(255,255,255,.78); box-shadow: 0 10px 24px rgba(45,28,62,.055); backdrop-filter: blur(14px); }
.v4-shell .workspace { width: 100%; max-width: 1740px; }
.v4-shell .card {
  border: 1px solid var(--v4-line);
  border-radius: 24px;
  background: var(--v4-surface);
  box-shadow: var(--v4-shadow);
  backdrop-filter: blur(18px);
}
.v4-shell .card.pad { padding: clamp(20px, 2vw, 28px); }
.v4-shell .card-head { margin-bottom: 20px; }
.v4-shell .card-head h2 { color: #211529; font-size: clamp(19px, 1.5vw, 24px); }
.v4-shell .card-head h3 { color: #211529; font-size: 17px; }
.v4-shell .card-head p { color: #8a7f93; font-size: 11px; }
.v4-shell .app-control,
.v4-shell .control {
  min-height: 48px;
  border-color: rgba(68,42,89,.13);
  border-radius: 14px;
  color: #251a2e;
  background-color: rgba(255,255,255,.84);
  box-shadow: inset 0 1px 0 #fff;
}
.v4-shell .app-control:focus,
.v4-shell .control:focus-within { border-color: rgba(144,45,255,.48); box-shadow: 0 0 0 4px rgba(144,45,255,.09), inset 0 1px 0 #fff; }
.v4-shell .primary-small,
.v4-shell .auth-primary { min-height: 42px; padding: 0 16px; border-radius: 13px; background: linear-gradient(110deg, #772de0, #a62ee9 52%, #477ce8); box-shadow: 0 12px 25px rgba(116,43,211,.20); }
.v4-shell .ghost-button,
.v4-shell .mini-button { min-height: 40px; border-radius: 12px; }
.v4-shell .table-wrap { overflow: auto; border: 1px solid rgba(62,39,80,.08); border-radius: 18px; background: rgba(255,255,255,.66); }
.v4-shell table { width: 100%; border-collapse: separate; border-spacing: 0; }
.v4-shell th { padding: 13px 15px; color: #8b7e95; background: #f5f1f8; font-size: 9px; letter-spacing: .08em; }
.v4-shell td { padding: 14px 15px; border-top: 1px solid #eee8f2; color: #51445b; font-size: 11px; }
.v4-shell tbody tr:hover td { background: rgba(148,49,231,.035); }
.modal {
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 28px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 35px 100px rgba(25,12,38,.28);
  backdrop-filter: blur(22px);
}
.v4-shell :is(.uc-command-hero,.support-command-hero,.library-command-hero,.reward-command-hero,.team-command-hero,.operations-hero) {
  position: relative;
  overflow: hidden;
  min-height: 180px;
  padding: clamp(24px,3vw,38px) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 28px !important;
  color: #fff;
  background:
    radial-gradient(circle at 92% 15%, rgba(195,55,255,.48), transparent 26%),
    radial-gradient(circle at 66% 125%, rgba(70,137,255,.30), transparent 38%),
    linear-gradient(120deg,#100c18,#211132 52%,#111c32) !important;
  box-shadow: 0 24px 62px rgba(29,15,43,.20) !important;
}
.v4-shell :is(.uc-command-hero,.support-command-hero,.library-command-hero,.reward-command-hero,.team-command-hero,.operations-hero)::after {
  content: "";
  position: absolute;
  width: 240px; height: 240px;
  right: -74px; top: -100px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(255,255,255,.024),0 0 0 76px rgba(255,255,255,.015);
}
.v4-shell :is(.uc-command-hero,.support-command-hero,.library-command-hero,.reward-command-hero,.team-command-hero,.operations-hero) > * { position: relative; z-index: 1; }
.v4-shell :is(.uc-command-hero,.support-command-hero,.library-command-hero,.reward-command-hero,.team-command-hero,.operations-hero) h2 { margin: 7px 0 9px; color: #fff; font-size: clamp(26px,3vw,42px); line-height: 1; letter-spacing: -.055em; }
.v4-shell :is(.uc-command-hero,.support-command-hero,.library-command-hero,.reward-command-hero,.team-command-hero,.operations-hero) p { color: rgba(255,255,255,.68); font-size: 12px; }
.v4-shell :is(.uc-command-stats,.support-command-stats,.library-command-stats,.reward-command-stats,.team-command-stats,.operations-stats) > * {
  border-color: rgba(255,255,255,.12) !important;
  border-radius: 17px !important;
  color: rgba(255,255,255,.72) !important;
  background: rgba(255,255,255,.075) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(12px);
}
.v4-shell :is(.uc-command-stats,.support-command-stats,.library-command-stats,.reward-command-stats,.team-command-stats,.operations-stats) strong { color: #fff !important; }
.v4-shell .dashboard-command-hero {
  min-height: 310px;
  padding: clamp(28px, 4vw, 48px) !important;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 85% 20%, rgba(202,54,255,.58), transparent 24%),
    radial-gradient(circle at 65% 110%, rgba(67,131,255,.34), transparent 35%),
    linear-gradient(120deg, #0d0a14 0%, #1b102b 48%, #111b35 100%) !important;
  box-shadow: 0 28px 70px rgba(29,15,43,.25) !important;
}
.v4-shell .dashboard-command-hero::after {
  content: "";
  position: absolute;
  right: -70px; top: -100px;
  width: 380px; height: 380px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 50%;
  box-shadow: inset 0 0 80px rgba(178,55,255,.16), 0 0 0 45px rgba(255,255,255,.025), 0 0 0 90px rgba(255,255,255,.018);
}
.v4-shell .dashboard-command-hero h2 { max-width: 690px; font-size: clamp(34px, 4.4vw, 64px); line-height: .98; }
.v4-shell .dashboard-command-hero p { max-width: 620px; color: rgba(255,255,255,.68); font-size: 13px; }
.v4-shell .hero-visual-mark { right: 38px; bottom: 22px; width: min(36%, 430px); opacity: .20; filter: drop-shadow(0 22px 35px rgba(0,0,0,.35)); }
.v4-shell .hero-live-button { min-height: 45px; padding: 0 16px; border-radius: 14px; border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.08); backdrop-filter: blur(12px); }
.v4-shell .hero-live-button:first-child { border: 0; background: linear-gradient(110deg, #9631ea, #536de8); box-shadow: 0 14px 28px rgba(105,45,221,.28); }
.v4-shell .dashboard-stat-grid { gap: 14px; }
.v4-shell .stat-card {
  min-height: 158px;
  padding: 21px;
  border: 1px solid rgba(65,42,83,.09);
  border-radius: 22px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 16px 40px rgba(42,26,60,.07);
}
.v4-shell .stat-card::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 3px; border-radius: 0 99px 99px 0; background: linear-gradient(#a338f1,#4ecfe9); }
.v4-shell .stat-icon { width: 40px; height: 40px; border-radius: 14px; background: linear-gradient(145deg, #f4e8ff, #edf5ff); }
.v4-shell .stat-value { font-size: 38px; }
.v4-shell .leader-item,
.v4-shell .user-card,
.v4-shell .license-row,
.v4-shell .ticket-card,
.v4-shell .activity-row { border-color: rgba(64,40,82,.09); background: rgba(255,255,255,.78); }
.permission-studio {
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px solid rgba(139,50,220,.15);
  border-radius: 20px;
  background: linear-gradient(145deg, #fbf7ff, #f5faff);
}
.permission-studio-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.permission-studio-head strong { display: block; margin-top: 4px; color: #26172f; font-size: 16px; }
.permission-studio-head p { margin: 4px 0 0; color: #8e8198; font-size: 10px; }
.permission-studio-head > span { padding: 8px 10px; border-radius: 999px; color: #7132a9; background: #efe3fa; display: inline-flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 900; white-space: nowrap; }
.permission-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.permission-option { position: relative; min-height: 72px; padding: 11px; border: 1px solid #e8e0ed; border-radius: 16px; background: rgba(255,255,255,.80); display: grid; grid-template-columns: 38px minmax(0,1fr) 34px; align-items: center; gap: 9px; cursor: pointer; }
.permission-option input { position: absolute; opacity: 0; pointer-events: none; }
.permission-option-icon { width: 38px; height: 38px; border-radius: 12px; color: #8b7b96; background: #f2edf5; display: grid; place-items: center; }
.permission-option > span:nth-of-type(2) { min-width: 0; display: grid; gap: 3px; }
.permission-option strong { color: #3c2b47; font-size: 10px; }
.permission-option small { color: #998da1; font-size: 8px; line-height: 1.35; }
.permission-option > i { width: 34px; height: 20px; padding: 3px; border-radius: 999px; background: #dcd5e1; }
.permission-option > i::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #fff; display: block; box-shadow: 0 2px 5px rgba(0,0,0,.16); transition: transform .18s ease; }
.permission-option:has(input:checked) { border-color: rgba(133,47,218,.25); background: linear-gradient(145deg,#fff,#f7efff); box-shadow: 0 10px 22px rgba(80,38,112,.07); }
.permission-option:has(input:checked) .permission-option-icon { color: #fff; background: linear-gradient(145deg,#8833dc,#4f7de8); }
.permission-option:has(input:checked) > i { background: linear-gradient(90deg,#8733db,#b03ee8); }
.permission-option:has(input:checked) > i::after { transform: translateX(14px); }

/* Rebuilt authentication */
.auth-shell { grid-template-columns: minmax(460px, 43%) 1fr; background: #0a0810; }
.auth-panel { padding: clamp(28px,4.4vw,68px); background: radial-gradient(circle at 0 0, rgba(153,47,244,.08), transparent 28%), #fbfafc; }
.auth-logo { width: 190px; height: 72px; overflow: visible; }
.auth-logo img { width: 100%; height: 100%; object-fit: contain; transform: none; }
.auth-content { width: min(100%,460px); }
.auth-content h1 { color: #181020; font-size: clamp(36px,4vw,56px); }
.auth-eyebrow { color: #8f30df; }
.auth-tabs { padding: 6px; border-radius: 17px; background: #eeeaf2; }
.auth-tab { min-height: 43px; border-radius: 12px; }
.auth-visual { background: radial-gradient(circle at 74% 16%, rgba(191,47,255,.54), transparent 22%), radial-gradient(circle at 20% 84%, rgba(60,138,255,.30), transparent 28%), linear-gradient(135deg,#08070d,#151025 52%,#0b1427); }
.visual-content h2 { max-width: 650px; font-size: clamp(50px,6vw,88px); }

@media (max-width: 1180px) {
  .v4-shell.app-shell { grid-template-columns: 1fr !important; }
  .v4-shell .sidebar { position: fixed; width: min(294px,88vw); transform: translateX(-105%); }
  .v4-shell .sidebar.is-open { transform: translateX(0); }
  .v4-shell .mobile-menu { display: inline-grid; }
  .v4-shell .dashboard-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-panel { min-height: 100svh; }
  .auth-visual { display: none; }
  .v4-shell .main-area { padding: 16px 14px 32px; }
  .v4-shell .topbar { align-items: flex-start; }
  .v4-system-chip { display: none; }
  .v4-shell .dashboard-command-hero { min-height: 330px; padding: 26px 22px !important; }
  .v4-shell .dashboard-command-hero h2 { font-size: clamp(34px,10vw,48px); }
  .v4-shell .hero-visual-mark { width: 55%; right: 8px; bottom: 8px; }
  .permission-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 14px; }
  .v4-shell .topbar-right .language-switch { display: none; }
  .v4-shell .topbar h1 { font-size: 25px; }
  .v4-shell .page-subtitle { margin: 10px 2px 18px; font-size: 11px; }
  .v4-shell .dashboard-stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .v4-shell .stat-card { min-height: 132px; padding: 16px; }
  .v4-shell .stat-value { margin-top: 11px; font-size: 29px; }
  .v4-shell .card.pad { padding: 17px; }
  .permission-studio-head { align-items: flex-start; flex-direction: column; }
}