/* Discord workspace: shared staff-panel surfaces, cyan navigation and green selection. */ #panel-page-discord-bot { --ui-sheen-rgb: 92, 214, 255; --discord-success: #83e6a8; --discord-border: rgba(255,255,255,.12); width:100%; max-width:none; min-width:0; gap:22px; color:var(--text); } #panel-page-discord-bot *, #panel-page-discord-bot *::before, #panel-page-discord-bot *::after { box-sizing:border-box; } #panel-page-discord-bot [hidden] { display:none !important; } #panel-page-discord-bot .discord-toolbar { display:flex; align-items:center; justify-content:space-between; gap:24px; } #panel-page-discord-bot .panel-page-heading { margin:0; } #panel-page-discord-bot .panel-page-heading h2 { margin:6px 0 10px; font-size:clamp(28px,2vw,42px); letter-spacing:-.04em; } #panel-page-discord-bot .panel-page-heading p:last-child { max-width:80ch; margin:0; color:var(--muted); font-size:13px; line-height:1.8; } #panel-page-discord-bot .eyebrow { color:#8ed8ee; } #panel-page-discord-bot .discord-toolbar > button { flex-shrink:0; } #panel-page-discord-bot .discord-error { color:#ffb9b2; } #panel-page-discord-bot .discord-error::before { background:#ff8c83; } #discord-bot-settings, #discord-bot-form { display:grid; gap:24px; min-width:0; } #panel-page-discord-bot .discord-server { display:flex; align-items:center; gap:16px; padding:22px 24px; border:1px solid var(--discord-border); border-radius:12px; background:linear-gradient(115deg,rgba(52,119,170,.20),rgba(255,255,255,.035)); box-shadow:0 8px 28px #0002; } #panel-page-discord-bot .discord-mark { display:grid; place-items:center; flex-shrink:0; width:48px; height:48px; border:1px solid #73c9ed40; border-radius:13px; background:linear-gradient(145deg,#285879,#183246); color:#b3e9ff; font-size:24px; font-weight:800; box-shadow:inset 0 1px #ffffff18; } #panel-page-discord-bot .discord-server-copy { min-width:0; } #panel-page-discord-bot .discord-server-copy p { margin:0 0 4px; font-size:12px; letter-spacing:.14em; font-weight:700; color:#8dc9e5; } #panel-page-discord-bot .discord-server-copy h3 { margin:0 0 5px; font-size:20px; letter-spacing:-.025em; overflow-wrap:anywhere; } #panel-page-discord-bot .discord-server-copy small { font-size:12px; color:var(--muted); } #panel-page-discord-bot .discord-server > .discord-tag { margin-left:auto; } #panel-page-discord-bot .discord-tag { display:inline-flex; align-items:center; gap:7px; padding:5px 10px; border:1px solid #8ed8ee30; border-radius:6px; background:#8ed8ee0c; color:#a9d7e8; font-size:12px; line-height:1.4; font-weight:600; white-space:nowrap; } #panel-page-discord-bot .discord-tag i { width:6px; height:6px; border-radius:50%; background:currentColor; } #panel-page-discord-bot .discord-tag.is-ready { color:var(--discord-success); background:#49da8010; border-color:#49da8038; } #panel-page-discord-bot .discord-tag.is-warning { color:#f2d38a; background:#f2c84b0b; border-color:#f2c84b35; } #panel-page-discord-bot .discord-section-heading { display:flex; align-items:center; gap:12px; margin:0 0 16px; } #panel-page-discord-bot .discord-step-number { display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; border:1px solid #8ed8ee30; border-radius:9px; background:#8ed8ee08; color:#8ed8ee; font-size:12px; font-weight:700; } #panel-page-discord-bot .discord-section-heading h3 { margin:0 0 3px; font-size:16px; letter-spacing:-.02em; } #panel-page-discord-bot .discord-section-heading p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; } #panel-page-discord-bot .discord-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr)); gap:16px; } #panel-page-discord-bot .discord-card { min-width:0; margin:0; padding:22px; border:1px solid var(--discord-border); border-radius:12px; background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.022)); box-shadow:0 8px 24px #0002; } #panel-page-discord-bot .discord-picker { position:relative; padding-top:14px; } #panel-page-discord-bot .discord-picker legend { float:left; flex-wrap:wrap; display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; margin:0 0 12px; padding:0; font-size:14px; font-weight:600; } #panel-page-discord-bot .discord-picker legend + p { clear:both; min-height:3.6em; margin:0 0 16px; color:var(--muted); font-size:12px; line-height:1.8; } #panel-page-discord-bot .discord-picker-title { display:flex; min-width:0; align-items:center; gap:9px; } #panel-page-discord-bot .discord-picker-title i { display:grid; place-items:center; width:27px; height:27px; flex-shrink:0; border-radius:7px; background:#8ed8ee0b; border:1px solid #8ed8ee25; color:#96cfe7; font-size:12px; font-style:normal; } #panel-page-discord-bot [data-count] { flex-shrink:0; padding:4px 8px; border-radius:5px; font-size:12px; font-weight:500; color:var(--discord-success); background:#49da800d; } #panel-page-discord-bot .discord-search { display:block; margin-bottom:12px; } #panel-page-discord-bot .discord-search > span { display:block; margin-bottom:7px; color:#c7d3e0; font-size:12px; font-weight:500; } #panel-page-discord-bot :is(input[type=search],select) { display:block; width:100%; min-height:42px; margin:0; padding:10px 12px; border:1px solid #ffffff20; border-radius:8px; background:#080e16; color:var(--text); font:inherit; font-size:14px; color-scheme:dark; transition:border-color .2s,box-shadow .2s; } #panel-page-discord-bot input[type=search]::placeholder { color:#8291a4; } #panel-page-discord-bot :is(input[type=search],select):hover { border-color:#8ed8ee70; } #panel-page-discord-bot :is(input,select,button,.discord-options):focus-visible { outline:2px solid #8ed8ee; outline-offset:3px; } #panel-page-discord-bot .discord-options { display:flex; flex-direction:column; gap:6px; height:clamp(280px,30vh,400px); padding:5px; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:#496273 #0a1119; border:1px solid #ffffff0d; border-radius:9px; background:#05090f55; scroll-behavior:smooth; } #panel-page-discord-bot .discord-options::-webkit-scrollbar { width:8px; } #panel-page-discord-bot .discord-options::-webkit-scrollbar-track { background:#0a1119; border-radius:10px; } #panel-page-discord-bot .discord-options::-webkit-scrollbar-thumb { border:2px solid #0a1119; border-radius:10px; background:#496273; } #panel-page-discord-bot .discord-options::-webkit-scrollbar-thumb:hover { background:#83b6c9; } #panel-page-discord-bot .discord-option { display:flex; align-items:center; gap:11px; flex-shrink:0; min-height:64px; margin:0; padding:11px 12px; border:1px solid transparent; border-radius:8px; background:#ffffff03; cursor:pointer; transition:background-color .2s,border-color .2s,box-shadow .2s; } #panel-page-discord-bot .discord-option:hover { background-color:#8ed8ee0b; border-color:#8ed8ee30; } #panel-page-discord-bot .discord-option:has(input:checked) { background-color:#49da801a; border-color:#65d98f77; box-shadow:inset 3px 0 #65d98f; } #panel-page-discord-bot .discord-option:has(input:checked):hover { background-color:#49da8028; border-color:#83e6a8aa; } #panel-page-discord-bot .discord-option:has(input:focus-visible) { outline:2px solid #8ed8ee; outline-offset:-2px; } #panel-page-discord-bot .discord-option:has(input:disabled):not(:has(input:checked)) { opacity:.5; cursor:not-allowed; } #panel-page-discord-bot .discord-option.is-missing { border-style:dashed; border-color:#f2c84b70; } #panel-page-discord-bot .discord-option input { appearance:none; display:grid; place-content:center; width:18px; height:18px; min-height:0; margin:0; padding:0; flex-shrink:0; border:1px solid #7993a570; border-radius:5px; background:#080e16; cursor:inherit; transition:background-color .18s,border-color .18s; } #panel-page-discord-bot .discord-option input::before { content:""; width:8px; height:5px; border-left:2px solid #072315; border-bottom:2px solid #072315; transform:rotate(-45deg) scale(0); transition:transform .18s; } #panel-page-discord-bot .discord-option input:checked { background:var(--discord-success); border-color:var(--discord-success); } #panel-page-discord-bot .discord-option input:checked::before { transform:rotate(-45deg) scale(1); } #panel-page-discord-bot .discord-option-copy { min-width:0; flex:1; overflow-wrap:anywhere; } #panel-page-discord-bot .discord-option strong { color:#e6edf5; font-size:14px; font-weight:500; } #panel-page-discord-bot .discord-option small { display:block; margin-top:3px; color:#95a6b9; font-size:12px; line-height:1.5; } #panel-page-discord-bot .discord-option .discord-tag { display:inline-flex; margin:3px 0 0 5px; padding:2px 5px; font-size:12px; } #panel-page-discord-bot .discord-selection { flex-shrink:0; font-size:12px; color:#8b9bad; } #panel-page-discord-bot .when-selected { display:none; color:var(--discord-success); } #panel-page-discord-bot .discord-option:has(input:checked) .when-selected { display:inline; } #panel-page-discord-bot .discord-option:has(input:checked) .when-unselected { display:none; } #panel-page-discord-bot .discord-picker-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:5px; margin-top:12px; color:#94a3b5; font-size:12px; } #panel-page-discord-bot .discord-empty { padding:20px 12px; margin:auto 0; color:#a9b9cb; text-align:center; font-size:12px; line-height:1.8; } #panel-page-discord-bot .discord-card-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; } #panel-page-discord-bot .discord-kicker { color:#8ec9dc; font-size:12px; letter-spacing:.14em; font-weight:700; } #panel-page-discord-bot .discord-card-heading h3 { margin:5px 0 0; font-size:18px; letter-spacing:-.025em; } #panel-page-discord-bot .discord-heading-mark { display:grid; place-items:center; width:34px; height:34px; border:1px solid #8ed8ee25; border-radius:9px; color:#8ed8ee; background:#8ed8ee08; } #panel-page-discord-bot .discord-routing label { color:#d6e1eb; font-size:12px; font-weight:500; } #panel-page-discord-bot .discord-routing select { margin:9px 0; } #panel-page-discord-bot .discord-routing small { display:block; color:#96a6ba; font-size:12px; font-weight:400; line-height:1.8; } #panel-page-discord-bot .discord-hint { margin:0; padding:16px 20px; border-left:2px solid #78cce477; border-radius:0 8px 8px 0; background:#8ed8ee06; color:#9fb0c3; font-size:12px; line-height:1.9; } #panel-page-discord-bot .discord-hint strong { color:#cedfe9; } #panel-page-discord-bot .discord-actions { position:sticky; bottom:12px; z-index:4; display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:14px 18px; border:1px solid #ffffff24; border-radius:10px; background:#111c28f5; box-shadow:0 8px 30px #0006; backdrop-filter:blur(12px); } #panel-page-discord-bot #discord-bot-dirty { display:flex; align-items:center; gap:9px; margin-right:auto; color:#9cbbab; font-size:12px; } #panel-page-discord-bot #discord-bot-dirty::before { content:""; width:7px; height:7px; border-radius:50%; background:#83e6a8; } #panel-page-discord-bot #discord-bot-dirty.is-dirty { color:#f2d38a; } #panel-page-discord-bot #discord-bot-dirty.is-dirty::before { background:#f2d38a; } #panel-page-discord-bot .button { min-height:40px; padding:10px 16px; border-radius:8px; font-size:12px; transition:transform .2s,background-color .2s,border-color .2s,opacity .2s; } /* The legacy panel palette uses five ID exclusions; keep this local action tone explicit. */ #panel-page-discord-bot .button.primary { background:#286e46 !important; border:1px solid #65d98f70 !important; color:#eafff1 !important; --ui-sheen-rgb:73,218,128; } #panel-page-discord-bot .button.primary:hover:not(:disabled) { background:#318454 !important; transform:translateY(-1px); } #panel-page-discord-bot .button:disabled { opacity:.42; cursor:not-allowed; transform:none; } #panel-page-discord-bot .discord-history ol { margin:0; padding:0; list-style:none; } #panel-page-discord-bot .discord-history li { position:relative; display:flex; justify-content:space-between; gap:12px; padding:16px 0 16px 23px; border-top:1px solid #ffffff0c; font-size:12px; line-height:1.6; } #panel-page-discord-bot .discord-history li::before { content:""; position:absolute; left:2px; top:21px; width:7px; height:7px; border-radius:50%; background:#65899b; box-shadow:0 0 0 4px #65899b15; } #panel-page-discord-bot .discord-history li:first-child::before { background:#83e6a8; box-shadow:0 0 0 4px #83e6a815; } #panel-page-discord-bot .discord-history li strong { flex-shrink:0; font-weight:500; } #panel-page-discord-bot .discord-history li span { color:#96a6ba; overflow-wrap:anywhere; text-align:right; } @keyframes discord-enter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } } @keyframes discord-loading { to { transform:rotate(360deg); } } @media(prefers-reduced-motion:no-preference) { #panel-page-discord-bot.active .discord-server, #panel-page-discord-bot.active .discord-step, #panel-page-discord-bot.active .discord-routing, #panel-page-discord-bot.active .discord-history { animation:discord-enter .45s cubic-bezier(.16,1,.3,1) both; animation-play-state:running; } #panel-page-discord-bot.active .discord-step:nth-child(1) { animation-delay:60ms; } #panel-page-discord-bot.active .discord-step:nth-child(2) { animation-delay:120ms; } #panel-page-discord-bot.active .discord-routing { animation-delay:180ms; } #panel-page-discord-bot.active .discord-history { animation-delay:220ms; } } @media(prefers-reduced-motion:reduce) { /* Like the other staff surfaces, retain short interaction feedback. Only continuous/decorative motion is suppressed in reduced-motion mode. */ #panel-page-discord-bot, #panel-page-discord-bot * { scroll-behavior:auto !important; } #panel-page-discord-bot .discord-hero::after, #panel-page-discord-bot .live-dashboard-overline i { animation:none !important; } } @media(max-width:900px) { #panel-page-discord-bot .discord-toolbar { align-items:flex-start; flex-direction:column; gap:16px; } #panel-page-discord-bot .discord-card { padding:16px; } #panel-page-discord-bot .discord-selection { display:none; } } @media(max-width:760px) { #panel-page-discord-bot .discord-grid { grid-template-columns:1fr; } #panel-page-discord-bot .discord-server { display:grid; grid-template-columns:48px minmax(0,1fr); padding:18px; } #panel-page-discord-bot .discord-server > .discord-tag { grid-column:2; justify-self:start; margin-left:0; } #panel-page-discord-bot .discord-picker legend + p { min-height:0; } #panel-page-discord-bot .discord-selection { display:block; } #panel-page-discord-bot .discord-actions { position:static; display:grid; grid-template-columns:1fr 1fr; padding:14px; } #panel-page-discord-bot #discord-bot-dirty { grid-column:1/-1; margin-bottom:4px; } #panel-page-discord-bot .discord-actions .button { padding:10px 8px; } #panel-page-discord-bot .discord-history li { flex-direction:column; gap:3px; } #panel-page-discord-bot .discord-history li span { text-align:left; } #panel-page-discord-bot .discord-options { height:280px; } } /* Controls keep a usable touch size without relying on the desktop density rules. */ @media(max-width:760px) { #panel-page-discord-bot { padding:16px 12px; gap:18px; } #panel-page-discord-bot .discord-toolbar > button { width:100%; } #panel-page-discord-bot :is(input[type=search],select) { min-height:46px; font-size:16px; } #panel-page-discord-bot .button { min-height:44px !important; font-size:12px !important; white-space:normal; } #panel-page-discord-bot .discord-option { padding:12px 9px; gap:9px; } #panel-page-discord-bot .discord-option input { width:20px; height:20px; } #panel-page-discord-bot .discord-card-heading { flex-wrap:wrap; } #panel-page-discord-bot .discord-server-copy { flex:1; } } @media(max-width:380px) { #panel-page-discord-bot .discord-actions { grid-template-columns:1fr; } #panel-page-discord-bot .discord-selection { display:none; } #panel-page-discord-bot .discord-card { padding:14px; } } /* Reuse the Live Server Dashboard hero and refresh motion, with a three-card overview. */ #panel-page-discord-bot { --live-accent:#53e991; --live-accent-rgb:83,233,145; --live-cyan:#5cd6ff; --live-cyan-rgb:92,214,255; --ui-sheen-rgb:83,233,145; } #panel-page-discord-bot .discord-hero { padding-bottom:64px; } #panel-page-discord-bot .discord-hero .discord-error { color:#ffb9b2; } #panel-page-discord-bot .live-dashboard-sync-card strong { font-size:clamp(26px,2vw,36px); font-variant-numeric:tabular-nums; } #panel-page-discord-bot .discord-summary { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:-48px 20px 2px; } #panel-page-discord-bot .discord-metric { --metric-rgb:83,233,145; position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; min-width:0; min-height:176px; padding:22px; border:1px solid rgba(var(--metric-rgb),.23); border-radius:15px; background:radial-gradient(circle at 100% 0%,rgba(var(--metric-rgb),.14),transparent 48%),linear-gradient(145deg,#0a161b,#040a0f); box-shadow:inset 0 1px #ffffff0a,0 16px 34px #0003; transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s; } #panel-page-discord-bot .discord-metric.permanent { --metric-rgb:92,214,255; } #panel-page-discord-bot .discord-metric.temporary { --metric-rgb:242,200,75; } #panel-page-discord-bot .discord-metric.offline { --metric-rgb:255,105,105; } #panel-page-discord-bot .discord-metric.unknown { --metric-rgb:148,163,184; } #panel-page-discord-bot .discord-metric:hover { transform:translateY(-4px); border-color:rgba(var(--metric-rgb),.5); box-shadow:0 20px 42px #0004,0 0 28px rgba(var(--metric-rgb),.06); } #panel-page-discord-bot .discord-metric .live-metric-heading > span { display:flex; align-items:center; gap:8px; color:#a7bcb3; font-size:12px; font-weight:600; } #panel-page-discord-bot .discord-metric .live-metric-heading > b { font-size:10px; } #panel-page-discord-bot .discord-metric > strong { margin:18px 0 8px; color:#effff5; font-size:clamp(32px,2.8vw,48px); line-height:1; font-weight:700; letter-spacing:-.045em; font-variant-numeric:tabular-nums; } #panel-page-discord-bot .discord-metric > small { color:#8fa89d; font-size:12px; line-height:1.6; } #panel-page-discord-bot .discord-metric-line { display:block; margin-top:auto; padding-top:16px; } #panel-page-discord-bot .discord-metric-line::after { content:""; display:block; height:2px; border-radius:2px; background:linear-gradient(90deg,rgba(var(--metric-rgb),.8),rgba(var(--metric-rgb),.06)); } @media(prefers-reduced-motion:no-preference) { #panel-page-discord-bot.active .discord-hero { animation:discord-enter .6s cubic-bezier(.16,1,.3,1) both; } #panel-page-discord-bot.active .discord-metric { animation:discord-enter .55s cubic-bezier(.16,1,.3,1) calc(var(--metric-index)*70ms + 100ms) backwards; } } @media(max-width:1100px) { #panel-page-discord-bot .discord-hero { grid-template-columns:1fr; gap:24px; padding:26px 24px 58px; } #panel-page-discord-bot .live-dashboard-hero-actions { display:grid; grid-template-columns:1fr 1fr; gap:14px; } #panel-page-discord-bot .discord-summary { margin-left:12px; margin-right:12px; gap:10px; } #panel-page-discord-bot .discord-metric { padding:16px; } } @media(max-width:760px) { #panel-page-discord-bot .discord-hero { padding:24px 18px; border-radius:16px; } #panel-page-discord-bot .discord-hero h2 { font-size:clamp(36px,8vw,54px); } #panel-page-discord-bot .discord-hero .live-dashboard-hero-copy > p { font-size:14px; line-height:1.8; } #panel-page-discord-bot .discord-summary { grid-template-columns:1fr; margin:0; gap:12px; } #panel-page-discord-bot .discord-metric { min-height:158px; padding:20px; } #panel-page-discord-bot .live-dashboard-hero-actions { grid-template-columns:1fr; } #panel-page-discord-bot .live-dashboard-refresh-command { width:100%; min-width:0; } } #panel-page-discord-bot .live-dashboard-sync-card { grid-template-columns:minmax(0,1fr) auto; gap:8px 14px; } #panel-page-discord-bot .live-dashboard-sync-card > span { grid-column:1; grid-row:1; } #panel-page-discord-bot .live-dashboard-sync-card > strong { grid-column:2; grid-row:1; white-space:nowrap; } #panel-page-discord-bot .live-dashboard-sync-card > em { grid-column:1/-1; grid-row:2; font-size:11px; line-height:1.6; font-weight:400; letter-spacing:0; text-transform:none; } /* Interaction motion: animate opacity over stable gradients instead of swapping gradient backgrounds, which browsers paint as an immediate change. */ #panel-page-discord-bot { --discord-ease:cubic-bezier(.22,1,.36,1); } #panel-page-discord-bot :is(.discord-option,.discord-card,.discord-server,.live-dashboard-sync-card) { position:relative; isolation:isolate; transition:border-color .38s ease,background-color .38s ease,box-shadow .45s ease; } #panel-page-discord-bot :is(.discord-option,.discord-card,.discord-server,.live-dashboard-sync-card)::after { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background:linear-gradient(115deg,rgba(92,214,255,.07),transparent 65%); opacity:0; transition:opacity .45s ease; } #panel-page-discord-bot :is(.discord-card,.discord-server,.live-dashboard-sync-card):is(:hover,:focus-within) { border-color:#8ed8ee50; box-shadow:0 12px 30px #0003,inset 0 1px #ffffff09; } #panel-page-discord-bot :is(.discord-option,.discord-card,.discord-server,.live-dashboard-sync-card):is(:hover,:focus-within)::after { opacity:1; } #panel-page-discord-bot .discord-option:has(input:checked)::after { background:linear-gradient(115deg,#49da8012,transparent 65%); } #panel-page-discord-bot .discord-option input { transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease; } #panel-page-discord-bot .discord-option input::before { transition:transform .32s var(--discord-ease); } #panel-page-discord-bot .discord-option:has(input:checked) input { box-shadow:0 0 0 3px #49da800e; } #panel-page-discord-bot .discord-option .discord-selection { display:grid; } #panel-page-discord-bot .discord-selection > span { grid-area:1/1; transition:opacity .3s ease,transform .35s var(--discord-ease); } #panel-page-discord-bot .discord-selection .when-selected { display:block; opacity:0; transform:translateY(3px); } #panel-page-discord-bot .discord-selection .when-unselected { display:block; opacity:1; transform:translateY(0); } #panel-page-discord-bot .discord-option:has(input:checked) .when-selected { display:block; opacity:1; transform:translateY(0); } #panel-page-discord-bot .discord-option:has(input:checked) .when-unselected { display:block; opacity:0; transform:translateY(-3px); } #panel-page-discord-bot :is(input[type=search],select) { transition:border-color .3s ease,box-shadow .4s ease,background-color .3s ease; } #panel-page-discord-bot :is(input[type=search],select):focus { border-color:#8ed8ee90; box-shadow:0 0 0 3px #8ed8ee10; } #panel-page-discord-bot .discord-history li { transition:background-color .35s ease; } #panel-page-discord-bot .discord-history li:hover { background-color:#8ed8ee07; } #panel-page-discord-bot .discord-history li::before { transition:box-shadow .4s ease,background-color .4s ease; } #panel-page-discord-bot .discord-history li:hover::before { box-shadow:0 0 0 6px #83e6a818,0 0 16px #83e6a82a; } #panel-page-discord-bot .discord-metric .live-metric-scan { transition:left 1s var(--discord-ease); } #panel-page-discord-bot .discord-metric-line::after { transform-origin:left; transform:scaleX(.88); opacity:.65; transition:transform .65s var(--discord-ease),opacity .4s ease; } #panel-page-discord-bot .discord-metric:hover .discord-metric-line::after { transform:scaleX(1); opacity:1; } #panel-page-discord-bot .button { transition:transform .38s var(--discord-ease),background-color .35s ease,border-color .35s ease,box-shadow .4s ease,opacity .3s ease; } @media(prefers-reduced-motion:reduce) { #panel-page-discord-bot :is(.discord-option,.discord-card,.discord-server,.discord-metric,.button,#discord-bot-refresh), #panel-page-discord-bot :is(.discord-option,.discord-card,.discord-server,#discord-bot-refresh)::after, #panel-page-discord-bot #discord-bot-refresh::before { transition-duration:.28s; } #panel-page-discord-bot .discord-metric:hover, #panel-page-discord-bot .live-metric-scan { transform:none !important; } #panel-page-discord-bot .live-metric-scan { display:none; } } @media(max-width:380px) { #panel-page-discord-bot .discord-option .discord-selection { display:none; } } /* Role directory: readable identities, explicit selection and restrained depth. */ #panel-page-discord-bot .discord-role-toolbar { display:flex; align-items:center; gap:5px; margin:0 0 12px; padding:4px; border:1px solid #ffffff0d; border-radius:9px; background:#060c124f; } #panel-page-discord-bot .discord-role-toolbar button { min-height:34px; border:1px solid transparent; border-radius:6px; padding:7px 11px; background:transparent; color:#91a6b8; font:inherit; font-size:11px; font-weight:600; cursor:pointer; transition:background-color .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease; } #panel-page-discord-bot .discord-role-toolbar button[aria-pressed=true] { color:#cff7e0; border-color:#83e6a82a; background-color:#83e6a813; box-shadow:0 2px 6px #0002; } #panel-page-discord-bot .discord-role-toolbar button:hover { color:#e9fff2; background-color:#83e6a818; } #panel-page-discord-bot .discord-role-toolbar > span { margin-left:auto; padding:0 7px; font-size:10px; color:#8194a5; } #panel-page-discord-bot .discord-role-picker .discord-options { height:clamp(320px,34vh,440px); padding:8px; gap:8px; border-color:#ffffff10; box-shadow:inset 0 2px 14px #0002; } #panel-page-discord-bot .discord-role-picker .discord-option { min-height:88px; padding:14px 13px; gap:12px; border-color:#ffffff09; background-color:#ffffff03; border-radius:10px; } #panel-page-discord-bot .discord-role-picker .discord-option:hover { border-color:#8ed8ee45; background-color:#8ed8ee0b; } #panel-page-discord-bot .discord-role-picker .discord-option:has(input:checked) { border-color:#65d98f77; background-color:#49da801a; box-shadow:inset 3px 0 #65d98f,0 4px 14px #0002; } #panel-page-discord-bot .discord-role-picker .discord-option strong { font-size:14px; font-weight:600; line-height:1.5; letter-spacing:-.01em; } #panel-page-discord-bot .discord-role-picker .discord-option small { font-size:11px; line-height:1.65; } #panel-page-discord-bot .discord-role-id { display:block; margin-top:3px; color:#768a9a; font-size:10px; letter-spacing:.025em; font-variant-numeric:tabular-nums; } #panel-page-discord-bot .discord-role-picker .discord-selection { padding:5px 8px; border-radius:6px; border:1px solid #ffffff0a; font-size:10px; transition:background-color .35s ease,border-color .35s ease; } #panel-page-discord-bot .discord-role-picker .discord-option:has(input:checked) .discord-selection { border-color:#83e6a82a; background-color:#83e6a809; } #panel-page-discord-bot .discord-role-picker .discord-option:has(input:disabled):not(:has(input:checked)) { opacity:.65; background-color:#ffffff01; } /* Body-mounted so panel entrance transforms cannot trap the fixed save bar. */ .discord-save-reminder { --ui-sheen-rgb:83,233,145; box-sizing:border-box; position:fixed; z-index:90; bottom:max(18px,env(safe-area-inset-bottom)); display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid #83e6a83d; border-radius:12px; color:#eaf6ef; background:linear-gradient(115deg,#15291ff5,#0c151dfc 65%); box-shadow:0 18px 65px #0009,inset 0 1px #ffffff0a; backdrop-filter:blur(16px); font-family:inherit; opacity:0; visibility:hidden; transform:translateY(22px) scale(.985); pointer-events:none; transition:opacity .32s ease,transform .55s cubic-bezier(.22,1,.36,1),visibility 0s .55s; } .discord-save-reminder.is-visible { opacity:1; visibility:visible; transform:translateY(0) scale(1); pointer-events:auto; transition:opacity .32s ease,transform .55s cubic-bezier(.22,1,.36,1),visibility 0s; } /* The persistent reminder handles the fixed actions while editing. Keep the original actions in the document instead of stacking two sticky bars. */ #panel-page-discord-bot .discord-actions:has(#discord-bot-dirty.is-dirty) { position:static; } .discord-save-reminder * { box-sizing:border-box; } .discord-reminder-icon { display:grid; place-items:center; flex-shrink:0; width:34px; height:34px; border:1px solid #f2c84b45; border-radius:10px; color:#f2d38a; background:#f2c84b0c; font-size:17px; font-weight:700; } .discord-reminder-copy { min-width:0; flex:1; } .discord-reminder-copy strong { display:block; font-size:13px; font-weight:600; line-height:1.6; } .discord-reminder-copy > span { display:block; color:#95ada2; font-size:11px; line-height:1.6; overflow-wrap:anywhere; } .discord-reminder-buttons { display:flex; align-items:center; flex-shrink:0; gap:10px; } .discord-save-reminder button { position:relative; isolation:isolate; overflow:hidden; min-height:42px; padding:10px 18px; border:1px solid #ffffff20; border-radius:8px; background:#ffffff05; color:#c9d9d1; font:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:background-color .3s ease,border-color .3s ease,box-shadow .35s ease,transform .35s cubic-bezier(.22,1,.36,1),opacity .3s ease; } .discord-save-reminder [data-reminder-save] { color:#eafff1; border-color:#65d98f65; background:#286e46; } .discord-save-reminder button::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 20%,#ffffff1c 50%,transparent 80%); opacity:0; transform:translateX(-100%); transition:opacity .3s ease,transform .8s cubic-bezier(.22,1,.36,1); } .discord-save-reminder button:is(:hover,:focus-visible):not(:disabled)::after { opacity:1; transform:translateX(100%); } .discord-save-reminder button:hover:not(:disabled) { border-color:#83e6a885; background-color:#ffffff0c; transform:translateY(-1px); } .discord-save-reminder [data-reminder-save]:hover:not(:disabled) { background-color:#338653; box-shadow:0 5px 18px #49da8018; } .discord-save-reminder button:disabled { opacity:.55; cursor:wait; } .discord-save-reminder button:focus-visible { outline:2px solid #8ed8ee; outline-offset:3px; } .discord-save-reminder.has-error { border-color:#ffad8370; } .discord-save-reminder.has-error .discord-reminder-copy > span { color:#ffbea4; } @media(max-width:760px) { #panel-page-discord-bot .discord-role-toolbar > span { display:none; } #panel-page-discord-bot .discord-role-picker .discord-option { gap:9px; padding:12px 9px; } #panel-page-discord-bot .discord-role-picker .discord-selection { display:none; } .discord-save-reminder { display:grid; grid-template-columns:28px minmax(0,1fr); padding:14px; gap:10px; bottom:max(12px,env(safe-area-inset-bottom)); } .discord-reminder-icon { width:28px; height:28px; border-radius:8px; } .discord-reminder-copy strong { font-size:12px; } .discord-reminder-copy > span { font-size:10px; } .discord-reminder-buttons { grid-column:1/-1; display:grid; grid-template-columns:1fr 2fr; } .discord-save-reminder button { min-height:44px; padding:10px; } } @media(prefers-reduced-motion:reduce) { .discord-save-reminder { transform:none; transition:opacity .28s ease,visibility 0s .28s; } .discord-save-reminder.is-visible { transform:none; transition:opacity .28s ease,visibility 0s; } .discord-save-reminder button::after { transform:none; background:#ffffff08; transition:opacity .28s ease; } .discord-save-reminder button:is(:hover,:focus-visible):not(:disabled)::after { transform:none; } } /* Leave ink room around gradient text: negative tracking can push the last glyph past the span's background clipping box. */ #panel-page-discord-bot .discord-hero h2 span { display:inline-block; padding:.06em .12em .1em .02em; margin:-.06em -.12em -.1em -.02em; line-height:1.12; vertical-align:baseline; } #panel-page-discord-bot .discord-summary.is-stale .discord-metric { border-color:#f2c84b50; } #panel-page-discord-bot .discord-summary .discord-metric { transition:transform .4s var(--discord-ease),border-color .4s ease,box-shadow .4s ease; } /* Status capsule and directory actions follow the live dashboard command style. */ #panel-page-discord-bot [data-mute-directory] { cursor:pointer; } #panel-page-discord-bot [data-mute-directory]:focus-visible { outline:2px solid #8ed8ee; outline-offset:4px; } #discord-mutes-dialog { --dm-tone:92,214,255; box-sizing:border-box; width:min(980px,calc(100vw - 40px)); max-width:none; max-height:calc(100dvh - 48px); margin:auto; padding:0; border:1px solid rgba(var(--dm-tone),.25); border-radius:20px; background:#0c141d; color:#e9f2f6; box-shadow:0 30px 100px #0009; overflow:hidden; opacity:0; transform:translateY(22px) scale(.97); transition:opacity .26s ease,transform .5s cubic-bezier(.22,1,.36,1); } #discord-mutes-dialog[open].is-open { opacity:1; transform:translateY(0) scale(1); } #discord-mutes-dialog::backdrop { background:#02060bdd; backdrop-filter:blur(9px); } #discord-mutes-dialog[data-kind=temporary] { --dm-tone:242,200,75; } #discord-mutes-dialog * { box-sizing:border-box; } #discord-mutes-dialog .dm-shell { display:flex; flex-direction:column; max-height:calc(100dvh - 50px); } #discord-mutes-dialog .dm-header { display:flex; align-items:flex-start; gap:20px; padding:28px 30px 24px; background:radial-gradient(ellipse at 0 0,rgba(var(--dm-tone),.13),transparent 70%); border-bottom:1px solid #ffffff0d; } #discord-mutes-dialog .dm-header > div { flex:1; min-width:0; } #discord-mutes-dialog .dm-overline { display:flex; align-items:center; gap:9px; color:rgb(var(--dm-tone)); font-size:10px; letter-spacing:.13em; font-weight:700; margin:0 0 12px; } #discord-mutes-dialog .dm-overline i { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px rgba(var(--dm-tone),.08); } #discord-mutes-dialog h2 { margin:0 0 10px; font-size:clamp(26px,3vw,36px); letter-spacing:-.045em; line-height:1.15; } #discord-mutes-dialog .dm-header p:last-child { margin:0; font-size:12px; color:#91a7b7; line-height:1.7; } #discord-mutes-dialog button { position:relative; isolation:isolate; overflow:hidden; font:inherit; font-size:12px; min-height:40px; padding:9px 14px; border:1px solid #ffffff22; border-radius:8px; background:#ffffff05; color:#cfdee7; cursor:pointer; transition:transform .38s cubic-bezier(.22,1,.36,1),border-color .35s,background-color .35s,box-shadow .4s,color .3s; } #discord-mutes-dialog button::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(112deg,transparent 25%,#ffffff17 50%,transparent 75%); opacity:0; transform:translateX(-100%); transition:opacity .25s,transform .75s cubic-bezier(.22,1,.36,1); } #discord-mutes-dialog button:is(:hover,:focus-visible):not(:disabled)::after { opacity:1; transform:translateX(100%); } #discord-mutes-dialog button:hover:not(:disabled) { transform:translateY(-1px); border-color:rgba(var(--dm-tone),.5); background-color:rgba(var(--dm-tone),.08); box-shadow:0 5px 20px #0002; } #discord-mutes-dialog :is(button,input):focus-visible { outline:2px solid rgb(var(--dm-tone)); outline-offset:3px; } #discord-mutes-dialog button:disabled { opacity:.5; cursor:wait; } #discord-mutes-dialog .dm-close { flex-shrink:0; font-size:23px; padding:4px; width:42px; min-height:42px; line-height:1; transition:transform .45s cubic-bezier(.18,.8,.2,1),border-color .35s,background-color .35s,box-shadow .4s,color .3s; } #discord-mutes-dialog .dm-close > span { display:block; transform:rotate(0deg); transition:transform .45s cubic-bezier(.18,.8,.2,1); } #discord-mutes-dialog .dm-close:hover:not(:disabled) { transform:translateY(-1px) scale(1.03); border-color:rgba(var(--dm-tone),.5); background-color:rgba(var(--dm-tone),.08); box-shadow:0 8px 22px #0003; } #discord-mutes-dialog .dm-close:hover:not(:disabled) > span { transform:rotate(90deg); } #discord-mutes-dialog .dm-close:active:not(:disabled) { transform:translateY(0) scale(.96); } #discord-mutes-dialog .dm-close:active:not(:disabled) > span { transform:rotate(180deg); } #discord-mutes-dialog .dm-toolbar { display:flex; align-items:flex-end; gap:12px; padding:20px 30px 14px; } #discord-mutes-dialog .dm-search { flex:1; min-width:0; } #discord-mutes-dialog .dm-search > span { display:block; margin-bottom:7px; color:#a9bdca; font-size:11px; } #discord-mutes-dialog input { width:100%; min-height:44px; padding:11px 13px; border:1px solid #ffffff22; border-radius:9px; background:#050c13; color:#eaf3f9; font:inherit; font-size:13px; transition:border-color .3s,box-shadow .3s; } #discord-mutes-dialog input:focus { border-color:rgba(var(--dm-tone),.5); box-shadow:0 0 0 3px rgba(var(--dm-tone),.05); } #discord-mutes-dialog .dm-refresh { min-width:188px; min-height:44px; display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:10px; padding:7px 12px; text-align:left; border-color:#53e99135; background:linear-gradient(135deg,#53e99112,#06100d); color:#bcf3cf; transition:transform .45s cubic-bezier(.18,.8,.2,1),border-color .35s ease,background .35s ease,box-shadow .35s ease; } #discord-mutes-dialog .dm-refresh .live-refresh-icon { position:relative; isolation:isolate; width:30px; height:30px; display:grid; place-items:center; color:#75e9a5; font-size:18px; line-height:1; } #discord-mutes-dialog .dm-refresh .live-refresh-icon > b { width:100%; height:100%; display:grid; place-items:center; font:inherit; line-height:1; transform-origin:center; } #discord-mutes-dialog .dm-refresh .live-refresh-icon > i { position:absolute; inset:-5px; z-index:-1; border:2px solid transparent; border-top-color:#65eca0; border-right-color:rgba(92,214,255,.66); border-radius:50%; opacity:0; transition:opacity .2s ease; } #discord-mutes-dialog .dm-refresh-copy small,#discord-mutes-dialog .dm-refresh-copy strong { display:block; } #discord-mutes-dialog .dm-refresh-copy small { color:#789189; font-size:8px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; } #discord-mutes-dialog .dm-refresh-copy strong { margin-top:2px; color:#e7fff0; font-size:13px; font-weight:850; } #discord-mutes-dialog .dm-refresh:hover:not(:disabled),#discord-mutes-dialog .dm-refresh:focus-visible:not(:disabled) { border-color:#53e99170; background:linear-gradient(135deg,#53e99120,#06100d); box-shadow:0 16px 34px #0004,0 0 0 3px #53e9910d; transform:translateY(-2px); outline:none; } #discord-mutes-dialog .dm-refresh:hover:not(:disabled) .live-refresh-icon > b,#discord-mutes-dialog .dm-refresh:focus-visible:not(:disabled) .live-refresh-icon > b { transform:rotate(180deg); transition:transform .7s cubic-bezier(.18,.8,.2,1); } #discord-mutes-dialog .dm-refresh.is-loading .live-refresh-icon { animation:live-refresh-icon-pulse .9s ease-in-out infinite; } #discord-mutes-dialog .dm-refresh.is-loading .live-refresh-icon > b { animation:live-refresh-command-spin .72s linear infinite; } #discord-mutes-dialog .dm-refresh.is-loading .live-refresh-icon > i { opacity:1; animation:live-refresh-command-spin 1.08s linear infinite reverse; } #discord-mutes-dialog .dm-refresh.is-settling .live-refresh-icon > b { animation:live-refresh-command-settle .54s cubic-bezier(.16,1,.3,1) both; } #discord-mutes-dialog .dm-filters { display:flex; flex-wrap:wrap; gap:7px; padding:4px 30px 14px; max-height:112px; overflow:auto; flex-shrink:0; } #discord-mutes-dialog .dm-filters button { min-height:32px; padding:6px 10px; font-size:10px; } #discord-mutes-dialog .dm-filters b { font-weight:500; margin-left:5px; opacity:.6; } #discord-mutes-dialog .dm-filters button[aria-pressed=true] { color:rgb(var(--dm-tone)); background-color:rgba(var(--dm-tone),.1); border-color:rgba(var(--dm-tone),.4); } #discord-mutes-dialog .dm-filters button:hover:not(:disabled),#discord-mutes-dialog .dm-filters button:focus-visible:not(:disabled) { transform:translateY(-1px); box-shadow:0 3px 12px #0002; } #discord-mutes-dialog .dm-status { display:flex; align-items:center; gap:9px; margin:0 30px 14px; padding:10px 12px; color:#9dbeb0; border:1px solid #53e99122; border-radius:8px; background:#53e99106; font-size:11px; line-height:1.5; } #discord-mutes-dialog .dm-status i { width:6px; height:6px; flex-shrink:0; border-radius:50%; background:#53e991; box-shadow:0 0 0 4px #53e99110; } #discord-mutes-dialog .dm-status.is-loading i { background:#f2c84b; animation:dm-status-pulse 1s ease-in-out infinite; } #discord-mutes-dialog .dm-status.is-error { color:#ffb9a9; border-color:#ff997733; } #discord-mutes-dialog .dm-status.is-error i { background:#ff9977; } #discord-mutes-dialog .dm-scroll { overflow:auto; overscroll-behavior:contain; min-height:100px; padding:0 30px 20px; } #discord-mutes-dialog :is(.dm-scroll,.dm-filters) { scrollbar-width:thin; scrollbar-color:#476478 #09121b; } #discord-mutes-dialog .dm-rows { display:grid; gap:10px; } #discord-mutes-dialog .dm-row { display:flex; align-items:flex-start; gap:14px; padding:18px; border:1px solid #ffffff12; border-radius:12px; background:linear-gradient(130deg,#ffffff04,#ffffff01); transition:border-color .35s,background-color .35s; } #discord-mutes-dialog .dm-row:hover { border-color:rgba(var(--dm-tone),.27); background-color:rgba(var(--dm-tone),.025); } #discord-mutes-dialog [hidden] { display:none!important; } #discord-mutes-dialog .dm-avatar { display:grid; place-items:center; width:40px; height:40px; flex-shrink:0; overflow:hidden; border-radius:11px; border:1px solid rgba(var(--dm-tone),.2); background:rgba(var(--dm-tone),.06); color:rgb(var(--dm-tone)); font-size:18px; font-weight:600; } #discord-mutes-dialog .dm-avatar img { width:100%; height:100%; display:block; object-fit:cover; border-radius:inherit; } #discord-mutes-dialog .dm-member { flex:1; min-width:0; overflow-wrap:anywhere; } #discord-mutes-dialog h3 { margin:0 0 3px; font-size:14px; font-weight:600; } #discord-mutes-dialog .dm-user-id { color:#8096a8; font-size:11px; font-variant-numeric:tabular-nums; } #discord-mutes-dialog .dm-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:10px 0 8px; color:#a6b9c6; font-size:10px; } #discord-mutes-dialog .dm-role { padding:3px 7px; border:1px solid rgba(var(--dm-tone),.18); border-radius:5px; color:rgb(var(--dm-tone)); background:rgba(var(--dm-tone),.045); } #discord-mutes-dialog .dm-reason { margin:0 0 5px; color:#aabac6; font-size:12px; line-height:1.65; white-space:pre-wrap; } #discord-mutes-dialog .dm-member small { color:#728a9c; font-size:10px; } #discord-mutes-dialog .dm-remove { flex-shrink:0; color:#f0b6a5; border-color:#e98c6e35; background-color:#e98c6e08; font-size:11px; } #discord-mutes-dialog .dm-remove > span { margin-right:6px; } #discord-mutes-dialog .dm-remove:hover:not(:disabled) { color:#ffcfbf; border-color:#e98c6e80; background-color:#e98c6e17; } #discord-mutes-dialog .dm-empty { padding:28px 10px; text-align:center; color:#9bb0bd; font-size:13px; line-height:1.7; } #discord-mutes-dialog .dm-more { display:block; margin:16px auto 0; } #discord-mutes-dialog .dm-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:15px 30px; border-top:1px solid #ffffff0d; color:#7e95a5; font-size:10px; } #discord-mutes-dialog .dm-count { color:#b8ccd7; } @keyframes dm-status-pulse { 0%,100% { opacity:.5; } 50% { opacity:1; } } @media(max-width:640px) { #discord-mutes-dialog { width:calc(100vw - 20px); max-height:calc(100dvh - 24px); border-radius:15px; } #discord-mutes-dialog .dm-shell { max-height:calc(100dvh - 26px); } #discord-mutes-dialog .dm-header { padding:20px 16px; } #discord-mutes-dialog .dm-toolbar { padding:16px 16px 12px; flex-wrap:wrap; } #discord-mutes-dialog .dm-search { flex-basis:100%; } #discord-mutes-dialog input { font-size:16px; } #discord-mutes-dialog .dm-refresh { width:100%; justify-content:center; } #discord-mutes-dialog .dm-filters { padding-left:16px; padding-right:16px; } #discord-mutes-dialog .dm-status { margin-left:16px; margin-right:16px; } #discord-mutes-dialog .dm-scroll { padding:0 16px 16px; } #discord-mutes-dialog .dm-row { flex-wrap:wrap; padding:14px; gap:10px; } #discord-mutes-dialog .dm-member { flex-basis:calc(100% - 52px); } #discord-mutes-dialog .dm-remove { width:100%; min-height:44px; } #discord-mutes-dialog .dm-footer { padding:12px 16px; } }