:root {
  color-scheme: dark;
  --background: #09080d;
  --surface: #111016;
  --surface-raised: #17151e;
  --surface-soft: #131119;
  --text: #f7f5fb;
  --muted: #9c98a8;
  --subtle: #716c7b;
  --pink: #f56acb;
  --purple: #a986ff;
  --blue: #8c9aff;
  --green: #6ed6b0;
  --line: rgba(255, 255, 255, 0.075);
  --line-strong: rgba(255, 255, 255, 0.12);
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "DM Sans", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--background); }
body { min-width: 320px; min-height: 100vh; margin: 0; background: var(--background); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
body::before { position: fixed; z-index: 0; inset: 0; background-image: linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px); background-size: 56px 56px; content: ""; mask-image: linear-gradient(to bottom, #000, transparent 82%); pointer-events: none; }
body::after { position: fixed; z-index: 0; inset: 0; background-image: linear-gradient(180deg, rgba(9,8,13,.12), rgba(9,8,13,.34) 48%, rgba(9,8,13,.64)), linear-gradient(90deg, rgba(9,8,13,.6), rgba(9,8,13,.16) 49%, rgba(9,8,13,.48)), url("img/img1.png"); background-position: center, center, center; background-repeat: no-repeat; background-size: 100% 100%, 100% 100%, cover; content: ""; pointer-events: none; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
button { color: inherit; }
.app-shell { position: relative; z-index: 1; min-height: 100vh; }
.auth-gate { display: none !important; }
.sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; display: flex; width: 252px; flex-direction: column; padding: 27px 17px 18px; border-right: 1px solid var(--line); background: rgba(12, 11, 16, .84); backdrop-filter: blur(20px); }
.brand { display: grid; grid-template-columns: 39px 1fr; align-items: center; column-gap: 11px; padding: 0 10px 29px; }
.brand-mark, .mini-mark { display: grid; width: 37px; height: 37px; flex: none; place-items: center; overflow: hidden; border: 1px solid rgba(234,133,255,.38); border-radius: 12px; background: linear-gradient(145deg, rgba(231,108,214,.23), rgba(127,89,228,.25)); box-shadow: inset 0 0 14px rgba(197,107,255,.11), 0 0 22px rgba(161,99,226,.08); color: #f6d5ff; font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.brand-mark img, .mini-mark img, .home-brand-mark img, .topbar-avatar img, .resource-bottom-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }

.maintenance-view {
  min-height: min(680px, calc(100vh - 150px));
  display: grid;
  place-items: center;
}

.maintenance-card {
  position: relative;
  width: min(680px, 100%);
  padding: clamp(2.5rem, 7vw, 5rem);
  overflow: hidden;
  text-align: center;
  border: 1px solid rgba(184, 117, 239, 0.25);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0, rgba(184, 117, 239, 0.18), transparent 48%),
    rgba(20, 16, 29, 0.82);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}

.maintenance-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 auto 1.5rem;
  place-items: center;
  border: 1px solid rgba(224, 160, 255, 0.45);
  border-radius: 18px;
  color: #e0a0ff;
  font-size: 1.6rem;
  background: rgba(184, 117, 239, 0.14);
}

.maintenance-card h1 {
  margin: 0.75rem 0 1rem;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.05;
}

.maintenance-card p {
  max-width: 500px;
  margin: 0 auto;
  color: var(--muted);
  line-height: 1.7;
}

.maintenance-note {
  margin-top: 0.75rem !important;
  color: var(--text) !important;
}

.maintenance-card .button {
  display: inline-flex;
  margin-top: 2rem;
}

.account-email, #account-action-button {
  display: none;
}
.brand-name { align-self: end; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -1.2px; line-height: 1; }
.brand-period { color: var(--pink); }
.brand-caption { grid-column: 2; align-self: start; margin-top: 5px; color: #777181; font-size: 8px; font-weight: 700; letter-spacing: 1.65px; }
.workspace-label, .rail-section-label { padding: 0 11px; color: #706a7b; font-size: 9px; font-weight: 700; letter-spacing: 1.55px; }
.side-nav { display: grid; gap: 5px; margin-top: 13px; }
.nav-link { position: relative; display: flex; min-height: 45px; align-items: center; gap: 12px; padding: 0 11px; border: 1px solid transparent; border-radius: 9px; color: #9994a3; font-size: 12px; font-weight: 500; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; }
.nav-link svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }
.nav-link:hover { background: rgba(255,255,255,.035); color: #e8e4ee; }
.nav-link.is-active { border-color: rgba(197,139,255,.15); background: linear-gradient(100deg, rgba(167,112,239,.14), rgba(230,107,198,.055)); color: #f0e9fa; }
.nav-link.is-active::before { position: absolute; top: 10px; bottom: 10px; left: -1px; width: 2px; border-radius: 0 3px 3px 0; background: linear-gradient(var(--pink), var(--purple)); box-shadow: 0 0 10px rgba(218,113,225,.55); content: ""; }
.nav-badge { margin-left: auto; padding: 3px 5px; border: 1px solid rgba(204,151,255,.15); border-radius: 5px; background: rgba(153,108,238,.1); color: #c1a6ff; font-size: 8px; font-weight: 700; letter-spacing: .5px; }
.nav-live-dot, .live-indicator { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: #827c8b; }
.nav-live-dot.is-online, .live-indicator.is-online { background: var(--green); box-shadow: 0 0 10px rgba(110,214,176,.65); }
.sidebar-spacer { flex: 1; }
.sidebar-status { display: flex; align-items: center; gap: 10px; margin: 14px 4px 16px; padding: 13px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.018); }
.status-orb { display: grid; width: 29px; height: 29px; flex: none; place-items: center; border: 1px solid rgba(170,132,255,.19); border-radius: 9px; background: rgba(158,112,234,.09); }
.status-orb span { width: 6px; height: 6px; border-radius: 50%; background: #8b8499; }
.status-orb.is-online span { background: var(--green); box-shadow: 0 0 9px rgba(110,214,176,.6); }
.sidebar-status-copy { display: grid; min-width: 0; gap: 3px; }
.sidebar-status-copy strong { overflow: hidden; color: #e1dce8; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-status-copy span { color: #837e8e; font-size: 9px; }
.sidebar-status .live-indicator { margin-left: auto; }
.sidebar-footer { display: flex; align-items: center; gap: 9px; padding: 14px 7px 0; border-top: 1px solid var(--line); }
.sidebar-footer .mini-mark { width: 30px; height: 30px; border-radius: 9px; font-size: 15px; }
.sidebar-footer > span:nth-child(2) { display: grid; gap: 2px; }
.sidebar-footer strong { color: #e2deea; font-size: 10px; font-weight: 600; }
.sidebar-footer small { color: #777181; font-size: 9px; }
.version-label { margin-left: auto; color: #a28ee0; font-size: 8px; font-weight: 700; letter-spacing: 1px; }
.main-shell { min-height: 100vh; margin-left: 252px; }
.topbar { position: sticky; z-index: 10; top: 0; display: flex; height: 66px; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 4vw, 58px); border-bottom: 1px solid var(--line); background: rgba(9,8,13,.68); backdrop-filter: blur(18px); }
.breadcrumb { display: flex; align-items: center; gap: 11px; color: #777181; font-size: 10px; font-weight: 600; letter-spacing: .7px; }
.breadcrumb i { color: #554f60; font-style: normal; }
.breadcrumb strong { color: #d7d2df; font-size: 11px; font-weight: 500; letter-spacing: 0; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.topbar-system { display: flex; align-items: center; gap: 7px; color: #9994a3; font-size: 10px; }
.topbar-system i { width: 6px; height: 6px; border-radius: 50%; background: #817a8d; }
.topbar-system i.is-online { background: var(--green); box-shadow: 0 0 9px rgba(110,214,176,.55); }
.topbar-system i.is-offline { background: #f079a8; box-shadow: 0 0 8px rgba(240,121,168,.4); }
.topbar-divider { width: 1px; height: 21px; background: var(--line-strong); }
.topbar-avatar { display: grid; width: 31px; height: 31px; place-items: center; overflow: hidden; border: 1px solid rgba(216,151,255,.28); border-radius: 10px; background: linear-gradient(145deg, rgba(222,106,199,.19), rgba(132,97,225,.22)); color: #edccff; font-family: var(--font-display); font-size: 13px; font-weight: 700; }
.mobile-menu { display: none; }
.page-content { width: min(1510px, 100%); min-height: calc(100vh - 66px); margin-inline: auto; padding: 39px clamp(24px, 4vw, 58px) 20px; }
.view { animation: view-enter 260ms ease both; }
.view[hidden] { display: none; }
@keyframes view-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.welcome-row, .view-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 27px; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #aaa4b2; font-size: 9px; font-weight: 700; letter-spacing: 1.45px; }
.eyebrow-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--pink), var(--purple)); box-shadow: 0 0 11px rgba(233,113,227,.56); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); }
.welcome-row h1, .view-heading h1 { margin: 14px 0 8px; font-size: clamp(29px, 3.2vw, 39px); font-weight: 600; letter-spacing: -1.9px; line-height: 1.15; }
.gradient-text { background: linear-gradient(105deg, #f588d3 5%, #c28bff 60%, #8da7ff 105%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-lead { max-width: 620px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.welcome-actions { display: flex; align-items: center; gap: 15px; padding-bottom: 2px; }
.updated-label { display: inline-flex; align-items: center; gap: 6px; color: #817c8a; font-size: 9px; white-space: nowrap; }
.refresh-icon { color: #bca3ef; font-size: 13px; }
.button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 12px; padding: 0 14px; border: 1px solid transparent; border-radius: 8px; font-size: 10px; font-weight: 700; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: linear-gradient(110deg, #d95fbd, #8b68e1); box-shadow: 0 7px 20px rgba(180,77,201,.16); color: #fff; }
.button-primary:hover { box-shadow: 0 10px 25px rgba(180,77,201,.3); }
.button.is-disabled { cursor: not-allowed; filter: saturate(.55); opacity: .48; }
.stats-grid, .moderation-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.stat-card, .panel { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, rgba(23,21,30,.84), rgba(15,14,20,.88)); box-shadow: 0 12px 35px rgba(0,0,0,.12); }
.stat-card { min-height: 125px; padding: 15px 16px 13px; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.stat-card:hover { transform: translateY(-2px); border-color: rgba(195,136,246,.23); box-shadow: 0 14px 34px rgba(0,0,0,.22); }
.stat-card--accent::before { position: absolute; top: 0; left: 17px; width: 45px; height: 1px; background: linear-gradient(90deg, var(--pink), transparent); content: ""; }
.stat-top { display: flex; align-items: center; justify-content: space-between; color: #928c9c; font-size: 8px; font-weight: 700; letter-spacing: 1.15px; }
.stat-icon { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid transparent; border-radius: 8px; font-size: 13px; }
.stat-icon--pink { border-color: rgba(239,111,199,.13); background: rgba(229,98,193,.1); color: #f17acb; }
.stat-icon--purple { border-color: rgba(167,134,255,.14); background: rgba(148,112,234,.11); color: #b197ff; }
.stat-icon--blue { border-color: rgba(140,154,255,.14); background: rgba(106,125,226,.1); color: #9ba8ff; }
.stat-icon--green { border-color: rgba(110,214,176,.14); background: rgba(86,191,150,.1); color: #7de1bd; }
.stat-value { margin: 7px 0 5px; color: #f4f0f8; font-family: var(--font-display); font-size: 29px; font-weight: 600; letter-spacing: -1.5px; line-height: 1; }
.stat-foot { display: flex; min-height: 14px; align-items: center; gap: 6px; color: #aaa4b2; font-size: 9px; }
.stat-foot-label { color: #827d8c; }
.stat-foot-meta { margin-left: auto; color: #777181; font-size: 8px; }
.stat-foot .status-dot { width: 5px; height: 5px; border-radius: 50%; background: #837c8b; }
.stat-foot .status-dot.is-online { background: var(--green); box-shadow: 0 0 8px rgba(110,214,176,.5); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 14px; }
.panel { padding: 18px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.panel-kicker { color: #827b8d; font-size: 8px; font-weight: 700; letter-spacing: 1.2px; }
.panel-heading h2 { margin: 5px 0 0; color: #eee9f4; font-size: 15px; font-weight: 500; letter-spacing: -.35px; }
.panel-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid rgba(110,214,176,.12); border-radius: 6px; background: rgba(110,214,176,.045); color: #94d8ba; font-size: 7px; font-weight: 700; letter-spacing: .7px; }
.panel-chip i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(110,214,176,.6); }
.system-overview { display: grid; grid-template-columns: minmax(132px, .7fr) minmax(230px, 1.3fr); align-items: center; gap: 20px; padding: 18px 5px 16px; }
.system-visual { position: relative; display: grid; min-height: 188px; place-items: center; overflow: hidden; }
.system-ring { position: relative; z-index: 1; display: grid; width: 145px; height: 145px; place-items: center; border: 1px solid rgba(205,145,255,.24); border-radius: 50%; background: radial-gradient(circle, rgba(143,91,197,.15), transparent 68%); box-shadow: 0 0 48px rgba(164,89,216,.1), inset 0 0 28px rgba(206,134,255,.045); }
.system-ring::before, .system-ring::after { position: absolute; inset: 10px; border: 1px solid rgba(242,125,208,.16); border-radius: 50%; content: ""; }
.system-ring::after { inset: -10px; border-color: rgba(160,139,245,.1); }
.system-ring-inner { display: grid; width: 86px; height: 86px; align-content: center; justify-items: center; overflow: hidden; border: 1px solid rgba(226,181,255,.19); border-radius: 26px; background: linear-gradient(145deg, rgba(219,110,202,.22), rgba(107,83,195,.25)); box-shadow: 0 0 33px rgba(193,102,228,.16), inset 0 0 20px rgba(228,163,255,.08); transform: rotate(-6deg); }
.system-ring-inner img { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.24); border-radius: 13px; object-fit: cover; box-shadow: 0 3px 15px rgba(0,0,0,.32); }
.system-ring-label { margin-top: 3px; color: #dfc5ee; font-size: 6px; font-weight: 700; letter-spacing: 2px; transform: rotate(6deg); }
.system-orbit { position: absolute; width: 8px; height: 8px; border: 2px solid #e995d8; border-radius: 50%; background: #17101e; box-shadow: 0 0 12px rgba(237,125,216,.8); }
.system-orbit--one { top: 33px; right: 24px; }
.system-orbit--two { bottom: 28px; left: 25px; width: 6px; height: 6px; border-color: #a99aff; }
.service-list { display: grid; }
.service-row { display: flex; min-height: 49px; align-items: center; gap: 9px; border-bottom: 1px solid rgba(255,255,255,.045); }
.service-row:last-child { border-bottom: 0; }
.service-icon { display: grid; width: 27px; height: 27px; flex: none; place-items: center; border-radius: 8px; font-size: 12px; }
.service-icon--purple { background: rgba(148,112,234,.1); color: #b79aff; }
.service-icon--pink { background: rgba(229,98,193,.1); color: #f17acb; }
.service-icon--blue { background: rgba(106,125,226,.1); color: #9ba8ff; }
.service-icon--green { background: rgba(86,191,150,.1); color: #7de1bd; }
.service-copy { display: grid; min-width: 0; gap: 3px; }
.service-copy strong { overflow: hidden; color: #d9d4df; font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.service-copy small { overflow: hidden; color: #7f7a88; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.service-state, .integration-status { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: #a8a2ae; font-size: 8px; white-space: nowrap; }
.service-state i, .integration-status i { width: 5px; height: 5px; border-radius: 50%; background: #837c8b; }
.service-state.is-ready i, .integration-status.is-ready i { background: var(--green); box-shadow: 0 0 7px rgba(110,214,176,.45); }
.service-state.is-offline i, .integration-status.is-offline i { background: #f079a8; }
.service-state.is-ready, .integration-status.is-ready { color: #8fcdb2; }
.service-state.is-offline, .integration-status.is-offline { color: #e990ae; }
.panel-bottom-note { display: flex; align-items: center; gap: 7px; padding-top: 12px; border-top: 1px solid var(--line); color: #87818f; font-size: 9px; }
.note-lock { color: #b69be9; font-size: 12px; }
.text-link { color: #c6b4e6; font-size: 9px; font-weight: 600; white-space: nowrap; }
.text-link span { margin-left: 4px; color: var(--pink); transition: margin 180ms ease; }
.text-link:hover span { margin-left: 8px; }
.activity-summary { display: flex; align-items: baseline; gap: 7px; margin-top: 20px; }
.activity-summary strong { color: #f3eff8; font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -1px; }
.activity-summary span { color: #85808e; font-size: 9px; }
.chart-wrap { min-height: 112px; margin-top: 5px; }
.bar-chart { display: block; width: 100%; height: 112px; overflow: visible; }
.bar-chart text { fill: #777181; font-family: var(--font-body); font-size: 8px; }
.bar-chart .chart-grid-line { stroke: rgba(255,255,255,.055); stroke-dasharray: 3 5; }
.bar-chart .chart-bar { fill: url(#chart-gradient); }
.bar-chart .chart-bar.is-zero { fill: rgba(169,134,255,.12); }
.chart-legend { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 11px; border-bottom: 1px solid var(--line); color: #807a89; font-size: 8px; }
.chart-legend span:first-child { display: flex; align-items: center; gap: 6px; }
.chart-legend i { width: 6px; height: 6px; border-radius: 2px; background: linear-gradient(135deg, var(--pink), var(--purple)); }
.activity-list { display: grid; gap: 0; padding-top: 4px; }
.activity-item { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.activity-item:last-child { border-bottom: 0; }
.activity-item-icon { display: grid; width: 25px; height: 25px; flex: none; place-items: center; border: 1px solid rgba(239,111,199,.11); border-radius: 8px; background: rgba(229,98,193,.08); color: #e981c9; font-size: 11px; }
.activity-item-copy { display: grid; min-width: 0; gap: 3px; }
.activity-item-copy strong { overflow: hidden; color: #cbc5d2; font-size: 8px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.activity-item-copy small { color: #7a7483; font-size: 8px; }
.activity-item-time { margin-left: auto; color: #716c7b; font-size: 8px; white-space: nowrap; }
.empty-activity { display: flex; align-items: center; gap: 8px; padding: 15px 0 4px; color: #85808e; font-size: 9px; line-height: 1.5; }
.empty-activity span { color: #9c89d6; font-size: 13px; }
.loading-row { display: flex; align-items: center; gap: 8px; padding: 13px 2px; color: #898392; font-size: 9px; }
.spinner { width: 12px; height: 12px; border: 1px solid rgba(177,145,243,.22); border-top-color: #c18fe9; border-radius: 50%; animation: spin 750ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.quick-card { display: flex; min-height: 68px; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(19,17,25,.75); text-align: left; cursor: pointer; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; }
.quick-card:hover { transform: translateY(-2px); border-color: rgba(195,136,246,.24); background: rgba(27,23,35,.88); }
.quick-icon { display: grid; width: 31px; height: 31px; flex: none; place-items: center; border: 1px solid transparent; border-radius: 9px; font-size: 13px; }
.quick-icon--pink { border-color: rgba(239,111,199,.12); background: rgba(229,98,193,.1); color: #f17acb; }
.quick-icon--purple { border-color: rgba(167,134,255,.12); background: rgba(148,112,234,.1); color: #b197ff; }
.quick-icon--blue { border-color: rgba(140,154,255,.12); background: rgba(106,125,226,.1); color: #9ba8ff; }
.quick-card > span:nth-child(2) { display: grid; min-width: 0; gap: 4px; }
.quick-card strong { overflow: hidden; color: #dcd7e4; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.quick-card small { overflow: hidden; color: #827c8b; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.quick-arrow { margin-left: auto; color: #847c91; font-size: 12px; }
.app-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 25px; padding: 14px 1px 5px; border-top: 1px solid rgba(255,255,255,.045); color: #716c7a; font-size: 8px; }
.view-heading { align-items: center; margin-bottom: 25px; }
.view-heading h1 { margin-top: 14px; }
.model-badge, .retention-badge { display: inline-flex; min-height: 31px; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); color: #b9b2c2; font-size: 9px; white-space: nowrap; }
.model-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px rgba(110,214,176,.45); }
.ai-workspace { display: grid; min-height: min(660px, calc(100vh - 240px)); grid-template-columns: 236px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg, rgba(22,20,29,.84), rgba(13,12,17,.88)); box-shadow: 0 18px 55px rgba(0,0,0,.18); }
.ai-rail { display: flex; flex-direction: column; padding: 20px 13px 14px; border-right: 1px solid var(--line); background: rgba(255,255,255,.012); }
.ai-rail .rail-section-label { padding: 0 8px; font-size: 8px; }
.tool-item { display: flex; align-items: center; gap: 9px; margin-top: 11px; padding: 9px 8px; border: 1px solid transparent; border-radius: 8px; }
.tool-item.is-selected { border-color: rgba(197,139,255,.13); background: linear-gradient(100deg, rgba(167,112,239,.12), rgba(230,107,198,.045)); }
.tool-icon { display: grid; width: 28px; height: 28px; flex: none; place-items: center; border-radius: 8px; background: rgba(229,98,193,.1); color: #f17acb; font-size: 13px; }
.tool-item > span:nth-child(2), .capability-item > span:nth-child(2) { display: grid; gap: 4px; }
.tool-item strong, .capability-item strong { color: #d9d3e1; font-size: 9px; font-weight: 600; }
.tool-item small, .capability-item small { color: #837d8b; font-size: 8px; }
.tool-active-dot { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: var(--pink); box-shadow: 0 0 7px rgba(245,106,203,.55); }
.rail-divider { height: 1px; margin: 19px 4px; background: var(--line); }
.capability-item { display: flex; align-items: center; gap: 9px; padding: 11px 8px 7px; }
.capability-icon { display: grid; width: 26px; height: 26px; flex: none; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); color: #b99bfa; font-size: 12px; }
.capability-item + .capability-item .capability-icon { color: #ed8dcf; }
.ai-privacy-card { margin-top: auto; padding: 12px; border: 1px solid rgba(176,143,239,.13); border-radius: 9px; background: linear-gradient(145deg, rgba(120,81,172,.09), rgba(29,23,38,.22)); }
.ai-privacy-card > span { display: block; margin-bottom: 8px; color: #c2a8f3; font-size: 13px; }
.ai-privacy-card strong { color: #dcd3eb; font-size: 9px; font-weight: 600; }
.ai-privacy-card p { margin: 6px 0 0; color: #898291; font-size: 8px; line-height: 1.65; }
.chat-workspace { display: flex; min-width: 0; min-height: 570px; flex-direction: column; }
.chat-workspace-header { display: flex; min-height: 59px; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.chat-title { display: flex; align-items: center; gap: 9px; }
.chat-title .mini-mark { width: 29px; height: 29px; border-radius: 9px; font-size: 14px; }
.chat-title > span:last-child { display: grid; gap: 3px; }
.chat-title strong { color: #e5dfeb; font-size: 10px; font-weight: 600; }
.chat-title small { color: #888291; font-size: 8px; }
.chat-header-status { display: inline-flex; align-items: center; gap: 6px; color: #8f8998; font-size: 7px; font-weight: 700; letter-spacing: .7px; }
.chat-header-status i { width: 5px; height: 5px; border-radius: 50%; background: #8b8493; }
.chat-header-status.is-online { color: #8fd7b4; }
.chat-header-status.is-online i { background: var(--green); box-shadow: 0 0 8px rgba(110,214,176,.5); }
.chat-header-status.is-offline { color: #e895ad; }
.chat-header-status.is-offline i { background: #ef80a7; }
.chat-messages { display: flex; min-height: 340px; flex: 1; flex-direction: column; gap: 14px; overflow-y: auto; padding: 20px clamp(16px, 4vw, 45px); scrollbar-color: #393342 transparent; scrollbar-width: thin; }
.chat-welcome { display: grid; min-height: 335px; align-content: center; justify-items: center; padding: 12px 0; text-align: center; }
.welcome-emblem { display: grid; width: 47px; height: 47px; margin-bottom: 14px; place-items: center; border: 1px solid rgba(234,133,255,.32); border-radius: 15px; background: linear-gradient(145deg, rgba(231,108,214,.2), rgba(127,89,228,.22)); box-shadow: 0 0 28px rgba(181,104,224,.13); color: #f4d7ff; font-family: var(--font-display); font-size: 25px; font-weight: 700; }
.chat-welcome-kicker { color: #938b9e; font-size: 8px; font-weight: 700; letter-spacing: 1.45px; }
.chat-welcome h2 { margin: 11px 0 7px; color: #f1ecf5; font-size: clamp(23px, 3vw, 31px); font-weight: 500; letter-spacing: -1.2px; line-height: 1.15; }
.chat-welcome > p { margin-bottom: 18px; color: #8e8897; font-size: 9px; }
.chat-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.chat-suggestions button { display: inline-flex; min-height: 31px; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 7px; background: rgba(255,255,255,.018); color: #b4a1dd; font-size: 10px; cursor: pointer; transition: border-color 160ms ease, background 160ms ease; }
.chat-suggestions button span { color: #aaa4b2; font-size: 8px; }
.chat-suggestions button:hover { border-color: rgba(194,137,255,.35); background: rgba(160,112,224,.08); }
.message { display: flex; max-width: 85%; align-items: flex-start; gap: 8px; animation: message-enter 180ms ease both; }
@keyframes message-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.message--user { align-self: flex-end; justify-content: flex-end; }
.message--bot { align-self: flex-start; }
.message-mark { display: grid; width: 25px; height: 25px; flex: none; place-items: center; border: 1px solid rgba(234,133,255,.25); border-radius: 8px; background: rgba(166,112,222,.13); color: #e5c4ff; font-family: var(--font-display); font-size: 12px; font-weight: 700; }
.message p { margin: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.035); color: #d6d1de; font-size: 10px; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
.message--typing p { color: #a99bb5; }
.typing-dots { display: inline-block; width: 18px; overflow: hidden; color: #e5c4ff; animation: typing-pulse 1.1s steps(4, end) infinite; }
@keyframes typing-pulse { from { width: 0; } to { width: 18px; } }
.message--user p { border-color: rgba(188,128,233,.17); background: linear-gradient(135deg, rgba(150,101,211,.17), rgba(199,99,178,.09)); color: #eee5f2; }
.chat-form { display: flex; min-height: 47px; align-items: center; gap: 9px; margin: 0 clamp(16px, 4vw, 45px); padding: 5px 6px 5px 13px; border: 1px solid rgba(205,145,255,.17); border-radius: 10px; background: rgba(9,8,13,.6); box-shadow: 0 0 24px rgba(154,94,208,.05); transition: border-color 160ms ease, box-shadow 160ms ease; }
.chat-form:focus-within { border-color: rgba(207,137,245,.4); box-shadow: 0 0 25px rgba(154,94,208,.11); }
.chat-form input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #eee8f3; font-size: 10px; }
.chat-form input::placeholder { color: #716b7a; }
.chat-form input:disabled { opacity: .6; }
.chat-form button { display: grid; width: 33px; height: 33px; flex: none; place-items: center; border: 0; border-radius: 8px; background: linear-gradient(135deg, #df64c4, #9068e8); color: white; font-size: 20px; cursor: pointer; transition: transform 160ms ease, opacity 160ms ease; }
.chat-form button:hover { transform: translateY(-1px); }
.chat-form button:disabled { opacity: .48; cursor: wait; }
.chat-footnote { margin: 9px 16px 12px; color: #726d7b; font-size: 8px; text-align: center; }
.bot-hero { display: flex; min-height: 157px; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 14px; padding: 23px 26px; background: radial-gradient(ellipse at 18% 0%, rgba(162,91,211,.12), transparent 45%), linear-gradient(145deg, rgba(23,21,30,.94), rgba(15,14,20,.96)); }
.bot-identity { display: flex; align-items: center; gap: 17px; }
.bot-avatar-large { position: relative; display: grid; width: 76px; height: 76px; flex: none; place-items: center; overflow: hidden; border: 1px solid rgba(234,133,255,.35); border-radius: 23px; background: linear-gradient(145deg, rgba(231,108,214,.28), rgba(127,89,228,.28)); box-shadow: 0 0 35px rgba(177,98,218,.14), inset 0 0 18px rgba(228,163,255,.08); color: #f7dfff; font-family: var(--font-display); font-size: 45px; font-weight: 600; }
.bot-avatar-large img { width: 100%; height: 100%; object-fit: cover; }
.bot-avatar-large i { position: absolute; right: 6px; bottom: 7px; width: 10px; height: 10px; border: 2px solid #17141e; border-radius: 50%; background: #89818e; }
.bot-avatar-large i.is-online { background: var(--green); box-shadow: 0 0 10px rgba(110,214,176,.65); }
.bot-identity h2 { margin: 5px 0 5px; color: #f1ecf5; font-size: 25px; font-weight: 600; letter-spacing: -1px; }
.bot-identity p { margin: 0; color: #9992a1; font-size: 10px; }
.bot-hero-meta { display: grid; grid-template-columns: auto auto; align-items: center; justify-items: start; gap: 8px 13px; padding-left: 25px; border-left: 1px solid var(--line); }
.meta-label { color: #827b8c; font-size: 8px; font-weight: 700; letter-spacing: .9px; }
.bot-state-pill { display: inline-flex; align-items: center; gap: 6px; color: #a9a2b0; font-size: 9px; }
.bot-state-pill i { width: 6px; height: 6px; border-radius: 50%; background: #89818e; }
.bot-state-pill.is-online { color: #92d6b6; }
.bot-state-pill.is-online i { background: var(--green); box-shadow: 0 0 7px rgba(110,214,176,.55); }
.bot-state-pill.is-offline { color: #e895ad; }
.bot-state-pill.is-offline i { background: #ef80a7; }
.bot-hero-meta > strong { color: #d9d4df; font-size: 10px; font-weight: 500; }
.discord-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.count-pill { padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; color: #b6a1e2; font-size: 8px; font-weight: 700; }
.discord-command-list { margin-top: 15px; }
.discord-command { display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 52px; border-bottom: 1px solid rgba(255,255,255,.045); }
.discord-command:last-child { border-bottom: 0; }
.slash-icon { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid rgba(174,142,235,.14); border-radius: 7px; background: rgba(148,112,234,.08); color: #bea1f0; font-family: var(--font-display); font-size: 13px; }
.discord-command > span:nth-child(2) { display: grid; gap: 4px; }
.discord-command strong { color: #ddd7e5; font-size: 9px; font-weight: 600; }
.discord-command small { color: #837d8a; font-size: 8px; }
.command-type { padding: 4px 6px; border: 1px solid rgba(255,255,255,.07); border-radius: 5px; color: #827b8a; font-size: 7px; font-weight: 700; letter-spacing: .5px; }
.command-type--ai { border-color: rgba(234,127,204,.14); color: #dc8fc8; }
.command-tip { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding: 9px; border: 1px solid rgba(181,138,238,.1); border-radius: 7px; background: rgba(148,112,234,.045); color: #9991a1; font-size: 8px; line-height: 1.5; }
.command-tip > span { color: #c19aea; }
.command-tip code { color: #e5bee6; font-size: 8px; }
.integration-list { margin-top: 12px; }
.integration-row { display: flex; min-height: 53px; align-items: center; gap: 9px; border-bottom: 1px solid rgba(255,255,255,.045); }
.integration-row:last-child { border-bottom: 0; }
.integration-logo { display: grid; width: 28px; height: 28px; flex: none; place-items: center; border: 1px solid var(--line); border-radius: 8px; font-size: 11px; }
.integration-logo--discord { border-color: rgba(145,153,255,.13); background: rgba(100,111,218,.1); color: #aab0ff; }
.integration-logo--nvidia { border-color: rgba(110,214,176,.13); background: rgba(86,191,150,.08); color: #81d8ad; font-family: var(--font-display); font-weight: 700; }
.integration-logo--search { border-color: rgba(140,154,255,.13); background: rgba(106,125,226,.1); color: #9ba8ff; }
.integration-logo--database { border-color: rgba(167,134,255,.13); background: rgba(148,112,234,.1); color: #b197ff; }
.integration-row > span:nth-child(2) { display: grid; min-width: 0; gap: 4px; }
.integration-row strong { color: #dcd6e3; font-size: 9px; font-weight: 500; }
.integration-row small { overflow: hidden; color: #817b89; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.notice-card, .privacy-callout { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 14px; border: 1px solid rgba(177,145,243,.12); border-radius: 9px; background: rgba(126,91,177,.055); }
.notice-icon, .privacy-callout > span { flex: none; color: #b49bdc; font-size: 14px; }
.notice-card p, .privacy-callout p { margin: 0; color: #918a9a; font-size: 9px; line-height: 1.65; }
.notice-card strong, .privacy-callout strong { color: #d6c9e6; font-weight: 600; }
.retention-badge { color: #b5a2da; font-size: 8px; font-weight: 700; letter-spacing: .4px; }
.records-panel { margin-top: 14px; padding: 0; }
.records-heading { min-height: 67px; padding: 13px 17px; border-bottom: 1px solid var(--line); }
.filter-label { display: flex; align-items: center; gap: 8px; color: #827c8b; font-size: 8px; }
.filter-label select { min-height: 30px; padding: 0 27px 0 9px; border: 1px solid var(--line-strong); border-radius: 7px; background: #17151e; color: #c7c1ce; font-size: 8px; }
.records-table-wrap { overflow-x: auto; }
.records-table { width: 100%; border-collapse: collapse; text-align: left; }
.records-table th { height: 35px; padding: 0 17px; color: #777181; font-size: 7px; font-weight: 700; letter-spacing: .9px; white-space: nowrap; }
.records-table td { height: 45px; padding: 0 17px; border-top: 1px solid rgba(255,255,255,.04); color: #aaa4b1; font-size: 9px; white-space: nowrap; }
.records-table td:first-child { color: #d2cbd8; }
.event-category { display: inline-flex; align-items: center; gap: 7px; }
.event-category i { width: 6px; height: 6px; border-radius: 50%; background: #ed80c6; box-shadow: 0 0 7px rgba(237,128,198,.35); }
.platform-tag { display: inline-flex; padding: 4px 7px; border: 1px solid rgba(171,141,235,.12); border-radius: 5px; background: rgba(148,112,234,.06); color: #b9a2e2; font-size: 8px; }
.platform-tag.is-site { border-color: rgba(140,154,255,.12); background: rgba(106,125,226,.06); color: #a1a8de; }
.aggregate-platform { color: #b7a3df; font-size: 8px; }
.notification-state { display: inline-flex; align-items: center; gap: 6px; color: #8e8996; font-size: 8px; }
.notification-state i { width: 5px; height: 5px; border-radius: 50%; background: #8a8391; }
.notification-state.is-sent { color: #8fcdb2; }
.notification-state.is-sent i { background: var(--green); }
.empty-records { display: grid; min-height: 175px; align-content: center; justify-items: center; padding: 20px; text-align: center; }
.empty-records[hidden] { display: none; }
.empty-records > span { margin-bottom: 9px; color: #a28dd7; font-size: 20px; }
.empty-records strong { color: #d4cedc; font-size: 11px; font-weight: 600; }
.empty-records p { max-width: 340px; margin: 6px 0 0; color: #827c8a; font-size: 9px; line-height: 1.6; }
.records-footer { display: flex; justify-content: space-between; gap: 12px; padding: 11px 17px; border-top: 1px solid var(--line); color: #777181; font-size: 8px; }
.privacy-callout { margin-top: 14px; }
.privacy-callout p { margin-top: 3px; }
.sidebar-backdrop { display: none; }
.toast-region { position: fixed; z-index: 40; right: 20px; bottom: 18px; display: grid; gap: 8px; }
.toast { max-width: min(390px, calc(100vw - 40px)); padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: 9px; background: #1b1822; box-shadow: 0 12px 38px rgba(0,0,0,.4); color: #e9e3ed; font-size: 10px; line-height: 1.5; animation: view-enter 180ms ease both; }
.toast.is-error { border-color: rgba(237,128,166,.24); color: #f0b3c5; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 1150px) {
  .sidebar { width: 220px; }
  .main-shell { margin-left: 220px; }
  .system-overview { grid-template-columns: 125px minmax(190px, 1fr); gap: 10px; }
  .system-ring { width: 124px; height: 124px; }
  .system-ring-inner { width: 75px; height: 75px; }
  .service-state { font-size: 7px; }
  .stat-card { padding-inline: 13px; }
  .stat-foot-meta { display: none; }
}
@media (max-width: 940px) {
  .sidebar { width: 68px; align-items: center; padding-inline: 9px; }
  .brand { display: flex; padding-inline: 0; }
  .brand-name, .brand-caption, .workspace-label, .nav-link > span:not(.nav-live-dot), .sidebar-status-copy, .sidebar-footer > span:nth-child(2), .sidebar-footer .version-label { display: none; }
  .nav-link { width: 46px; justify-content: center; padding: 0; }
  .nav-link svg { width: 18px; height: 18px; }
  .nav-badge { position: absolute; top: 3px; right: 3px; display: grid !important; min-width: 15px; height: 14px; place-items: center; margin: 0; padding: 0 3px; font-size: 6px; }
  .nav-live-dot { position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; margin: 0; }
  .sidebar-status { justify-content: center; width: 46px; margin-inline: 0; padding: 8px; }
  .sidebar-status .status-orb { width: 29px; }
  .sidebar-status .live-indicator { display: none; }
  .sidebar-footer { justify-content: center; width: 100%; padding-inline: 0; }
  .main-shell { margin-left: 68px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .system-overview { grid-template-columns: minmax(130px, .6fr) minmax(260px, 1.4fr); gap: 20px; }
  .system-ring { width: 145px; height: 145px; }
  .system-ring-inner { width: 86px; height: 86px; }
  .service-state { font-size: 8px; }
}
@media (max-width: 680px) {
  body::before { background-size: 43px 43px; }
  .sidebar { z-index: 31; width: 265px; align-items: stretch; padding: 23px 16px 17px; transform: translateX(-105%); transition: transform 220ms ease; }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; z-index: 30; inset: 0; display: block; border: 0; background: rgba(0,0,0,.56); opacity: 0; pointer-events: none; transition: opacity 220ms ease; }
  .sidebar-backdrop.is-visible { opacity: 1; pointer-events: auto; }
  .brand { display: grid; grid-template-columns: 39px 1fr; column-gap: 11px; padding: 0 9px 28px; }
  .brand-name, .brand-caption, .workspace-label, .sidebar-status-copy, .sidebar-footer > span:nth-child(2), .sidebar-footer .version-label { display: initial; }
  .brand-caption { display: block; }
  .workspace-label { display: block; }
  .nav-link { width: auto; justify-content: flex-start; padding: 0 11px; }
  .nav-link > span:not(.nav-live-dot) { display: initial; }
  .nav-link svg { width: 17px; height: 17px; }
  .nav-badge { position: static; display: initial !important; min-width: auto; height: auto; margin-left: auto; padding: 3px 5px; font-size: 8px; }
  .nav-live-dot { position: static; width: 6px; height: 6px; margin-left: auto; }
  .sidebar-status { justify-content: flex-start; width: auto; margin: 14px 4px 16px; padding: 13px 10px; }
  .sidebar-status-copy { display: grid; }
  .sidebar-status .live-indicator { display: block; }
  .sidebar-footer { justify-content: flex-start; width: auto; padding-inline: 7px; }
  .main-shell { margin-left: 0; }
  .topbar { height: 58px; gap: 12px; padding-inline: 17px; }
  .mobile-menu { display: flex; width: 31px; height: 31px; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); cursor: pointer; }
  .mobile-menu span { width: 13px; height: 1px; border-radius: 2px; background: #d0c8d8; }
  .breadcrumb { min-width: 0; margin-right: auto; gap: 7px; font-size: 8px; }
  .breadcrumb strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-actions { gap: 9px; }
  .topbar-system { gap: 5px; font-size: 8px; }
  .topbar-divider { height: 17px; }
  .topbar-avatar { width: 27px; height: 27px; border-radius: 8px; }
  .page-content { min-height: calc(100vh - 58px); padding: 28px 17px 16px; }
  .welcome-row, .view-heading { align-items: flex-start; flex-direction: column; gap: 15px; margin-bottom: 20px; }
  .welcome-row h1, .view-heading h1 { margin-top: 11px; font-size: clamp(27px, 8vw, 34px); letter-spacing: -1.5px; }
  .page-lead { font-size: 10px; }
  .welcome-actions { width: 100%; justify-content: space-between; }
  .updated-label { font-size: 8px; }
  .button { min-height: 35px; padding-inline: 11px; font-size: 9px; }
  .stats-grid, .moderation-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 10px; }
  .stat-card { min-height: 112px; padding: 12px; }
  .stat-top { font-size: 7px; letter-spacing: .8px; }
  .stat-icon { width: 24px; height: 24px; }
  .stat-value { font-size: 26px; }
  .stat-foot { font-size: 8px; }
  .dashboard-grid { gap: 10px; }
  .panel { padding: 14px; border-radius: 10px; }
  .panel-heading h2 { font-size: 14px; }
  .system-overview { grid-template-columns: 1fr; gap: 2px; padding: 10px 0 12px; }
  .system-visual { min-height: 156px; }
  .system-ring { width: 126px; height: 126px; }
  .system-ring-inner { width: 78px; height: 78px; }
  .service-row { min-height: 47px; }
  .service-state { font-size: 7px; }
  .activity-summary { margin-top: 14px; }
  .chart-wrap { min-height: 102px; }
  .bar-chart { height: 102px; }
  .quick-grid { grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
  .quick-card { min-height: 59px; }
  .app-footer { align-items: flex-start; margin-top: 19px; font-size: 7px; }
  .app-footer > span:last-child { text-align: right; }
  .view-heading { align-items: flex-start; }
  .model-badge, .retention-badge { align-self: flex-start; }
  .ai-workspace { grid-template-columns: 1fr; }
  .ai-rail { display: none; }
  .chat-workspace { min-height: min(650px, calc(100vh - 200px)); }
  .chat-workspace-header { min-height: 53px; padding-inline: 12px; }
  .chat-messages { min-height: 340px; padding-inline: 13px; }
  .chat-welcome { min-height: 315px; }
  .chat-suggestions { max-width: 300px; }
  .chat-suggestions button { min-height: 29px; }
  .chat-form { margin-inline: 12px; }
  .chat-footnote { padding-inline: 8px; font-size: 7px; line-height: 1.5; }
  .bot-hero { align-items: flex-start; flex-direction: column; gap: 18px; padding: 18px; }
  .bot-avatar-large { width: 62px; height: 62px; border-radius: 19px; font-size: 37px; }
  .bot-identity { gap: 13px; }
  .bot-identity h2 { font-size: 22px; }
  .bot-hero-meta { width: 100%; grid-template-columns: auto 1fr auto 1fr; gap: 8px; padding: 13px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .bot-hero-meta > strong { justify-self: end; }
  .discord-grid { grid-template-columns: 1fr; gap: 10px; }
  .notice-card { padding: 10px; }
  .notice-card p { font-size: 8px; }
  .records-heading { align-items: flex-start; flex-direction: column; padding: 13px; }
  .filter-label { width: 100%; justify-content: space-between; }
  .filter-label select { flex: 1; }
  .records-table { min-width: 550px; }
  .records-table th, .records-table td { padding-inline: 12px; }
  .records-footer { align-items: flex-start; flex-direction: column; gap: 5px; padding-inline: 13px; }
}
@media (max-width: 380px) {
  .page-content { padding-inline: 13px; }
  .topbar { padding-inline: 12px; }
  .topbar-system span { max-width: 82px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stat-card { padding: 10px; }
  .stat-top { font-size: 6px; }
  .stat-icon { width: 22px; height: 22px; }
  .stat-value { font-size: 24px; }
  .stat-foot { font-size: 7px; }
  .bot-hero-meta { grid-template-columns: auto 1fr; }
  .bot-hero-meta > strong { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.auth-gate { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 50% 15%, rgba(167,86,219,.2), transparent 55%), #09080d; }
.auth-gate[hidden] { display: none; }
.auth-card { display: grid; gap: 13px; width: min(440px, 100%); padding: 34px; border: 1px solid rgba(196,130,235,.3); border-radius: 22px; background: rgba(22,18,29,.96); box-shadow: 0 24px 90px #0008; }
.auth-card > img { border-radius: 16px; }
.auth-card h1 { margin: 0; font: 700 30px "Space Grotesk", sans-serif; }
.auth-card p, .auth-card small, .bot-connect-panel > p { color: var(--text-muted); line-height: 1.6; }
.auth-card label, .account-form label { display: grid; gap: 7px; color: var(--text-secondary); font-size: 12px; }
.auth-card input, .account-form input, .account-form select { width: 100%; min-height: 44px; padding: 0 13px; border: 1px solid var(--border); border-radius: 10px; background: rgba(8,7,12,.75); color: var(--text-primary); }
.auth-card .button { justify-content: center; }
.auth-card .text-link { justify-self: center; }
.auth-error { color: #ff8b9b !important; margin: 0; }
.account-email { max-width: 190px; overflow: hidden; color: var(--text-secondary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions > .text-link { border: 0; background: none; color: var(--text-muted); cursor: pointer; }
.bot-connect-panel { margin-top: 18px; padding: 24px; }
.account-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.account-form label:nth-child(3) { grid-column: 1 / -1; }
.account-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.account-form > small { align-self: center; color: var(--text-muted); }
.discord-link-panel { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.discord-link-panel > p { max-width: 720px; color: var(--text-muted); line-height: 1.6; }
.discord-link-panel #discord-link-status { color: var(--text-muted); font-size: 12px; }
.discord-link-code { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(8,7,12,.6); }
.discord-link-code[hidden] { display: none; }
.discord-link-code p { width: 100%; margin: 0; color: var(--text-muted); font-size: 12px; }
.discord-link-code code { color: #e6c4ff; font-size: 14px; }
.account-memory-controls { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.account-memory-controls > div { flex: 1; }
@media (max-width: 680px) { .account-email { display: none; } .account-form { grid-template-columns: 1fr; } .account-form label:nth-child(3) { grid-column: auto; } .account-memory-controls { align-items: flex-start; flex-wrap: wrap; } }

body.home-active { overflow-x: hidden; }
body.home-active .sidebar, body.home-active .topbar, body.home-active .app-footer, body.home-active .sidebar-backdrop { display: none; }
body.home-active .main-shell { margin-left: 0; }
body.home-active .page-content { width: 100%; min-height: 100svh; padding: 0; }
.home-view { position: relative; display: flex; min-height: 100vh; min-height: 100svh; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(24px, 4.2vw, 58px) clamp(24px, 7.1vw, 112px) 25px; isolation: isolate; background: radial-gradient(ellipse at 63% 45%, rgba(32,23,48,.26), transparent 49%), linear-gradient(118deg, #09080d 8%, #0c0a12 53%, #0a080e 100%); animation: home-screen-enter 650ms ease both; }
.home-view::before { position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(90deg, rgba(8,7,12,.56), rgba(8,7,12,.16) 50%, rgba(8,7,12,.34)), linear-gradient(180deg, rgba(8,7,12,.16), rgba(8,7,12,.36) 58%, rgba(9,8,13,.68)), url("img/img1.png"); background-position: center, center, center; background-repeat: no-repeat; background-size: 100% 100%, 100% 100%, cover; content: ""; opacity: .96; pointer-events: none; }
.home-view[hidden] { display: none; }
@keyframes home-screen-enter { from { opacity: 0; } to { opacity: 1; } }
.home-backdrop { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.home-grid { position: absolute; inset: -10%; background-image: linear-gradient(rgba(207,187,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(207,187,255,.025) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 63% 48%, #000 0, rgba(0,0,0,.8) 22%, transparent 76%); transform: perspective(950px) rotateX(56deg) scale(1.7) translateY(13%); transform-origin: center; }
.home-glow { position: absolute; width: min(58vw, 800px); aspect-ratio: 1; border-radius: 50%; filter: blur(115px); opacity: .14; }
.home-glow--violet { top: 5%; right: 4%; background: #8650ed; transform: translate(calc(var(--home-pointer-x, 0) * -10px), calc(var(--home-pointer-y, 0) * 10px)); }
.home-glow--rose { right: 29%; bottom: -48%; width: min(40vw, 570px); background: #d54eac; opacity: .08; transform: translate(calc(var(--home-pointer-x, 0) * 7px), calc(var(--home-pointer-y, 0) * -7px)); }
.home-geometry { position: absolute; display: block; border: 1px solid rgba(209,171,255,.12); transform: rotate(35deg); }
.home-geometry--large { top: 14%; right: -9%; width: min(55vw, 740px); aspect-ratio: 1; border-radius: 42%; box-shadow: inset 0 0 100px rgba(153,102,227,.025), 0 0 80px rgba(155,99,224,.025); animation: home-geometry-drift 32s linear infinite; }
.home-geometry--small { right: 18%; bottom: -44%; width: min(40vw, 530px); aspect-ratio: 1; border-color: rgba(245,106,203,.09); border-radius: 48%; animation: home-geometry-drift 39s linear infinite reverse; }
.home-particle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #e9b5ff; box-shadow: 0 0 12px 2px rgba(221,151,255,.55); animation: home-particle-float 8s ease-in-out infinite; }
.home-particle--one { top: 22%; left: 47%; }
.home-particle--two { top: 36%; right: 9%; width: 2px; height: 2px; animation-delay: -2s; }
.home-particle--three { right: 37%; bottom: 20%; width: 2px; height: 2px; animation-delay: -5s; }
.home-particle--four { top: 73%; left: 12%; animation-delay: -3s; }
@keyframes home-geometry-drift { to { transform: rotate(395deg); } }
@keyframes home-particle-float { 0%, 100% { opacity: .32; transform: translate3d(0,0,0); } 50% { opacity: .9; transform: translate3d(6px,-12px,0); } }
.home-topline, .home-bottomline { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.home-brand { display: inline-flex; align-items: center; gap: 11px; }
.home-brand-mark { display: grid; width: 38px; height: 38px; place-items: center; overflow: hidden; border: 1px solid rgba(234,133,255,.44); border-radius: 12px; background: linear-gradient(145deg, rgba(231,108,214,.25), rgba(127,89,228,.26)); box-shadow: inset 0 0 14px rgba(197,107,255,.11), 0 0 25px rgba(161,99,226,.12); color: #f6d5ff; font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.home-brand-word { color: #f5f0f8; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -1.3px; }
.home-brand-word span { color: var(--pink); }
.home-platform-label { display: inline-flex; align-items: center; gap: 8px; color: #9c93a8; font-size: 8px; font-weight: 700; letter-spacing: 1.65px; }
.home-platform-label i, .home-bottom-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px rgba(110,214,176,.65); }
.home-main { position: relative; z-index: 1; display: grid; width: min(1310px, 100%); flex: 1; grid-template-columns: minmax(0, 1.03fr) minmax(360px, .97fr); align-items: center; gap: clamp(20px, 5vw, 80px); margin: 0 auto; padding-block: 20px; }
.home-copy { position: relative; z-index: 2; padding-block: 20px; }
.home-eyebrow { display: flex; align-items: center; gap: 11px; color: #c4bdce; font-size: 9px; font-weight: 700; letter-spacing: 1.8px; animation: home-copy-enter 850ms 100ms both; }
.home-eyebrow-line { width: 22px; height: 1px; background: linear-gradient(90deg, var(--pink), var(--purple)); box-shadow: 0 0 10px rgba(236,120,217,.5); }
.home-copy h1 { margin: 23px 0 17px; color: #f6f2f8; font-family: var(--font-display); font-size: clamp(44px, 6vw, 79px); font-weight: 500; letter-spacing: -.075em; line-height: .99; animation: home-copy-enter 850ms 220ms both; }
.home-copy h1 > span { white-space: nowrap; }
.home-copy h1 .home-title-accent { color: #dda5ff; }
.home-copy h1 .gradient-text { background-image: linear-gradient(100deg, #f588d3 5%, #c28bff 59%, #a1a0ff 105%); }
.home-subtitle { max-width: 470px; margin: 0; color: #aaa4b2; font-size: clamp(12px, 1.15vw, 14px); line-height: 1.9; animation: home-copy-enter 850ms 360ms both; }
.home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 29px; animation: home-copy-enter 850ms 470ms both; }
.home-button { position: relative; display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 14px; padding: 0 19px; overflow: hidden; border: 1px solid transparent; border-radius: 9px; font-size: 11px; font-weight: 700; transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease, background 200ms ease; }
.home-button:hover { transform: translateY(-2px); }
.home-button--primary { border-color: rgba(255,255,255,.14); background: linear-gradient(108deg, #d95fbd, #8b68e1 96%); box-shadow: 0 8px 26px rgba(180,77,201,.24), inset 0 1px rgba(255,255,255,.2); color: white; }
.home-button--primary::before { position: absolute; top: -50%; bottom: -50%; left: -50%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); content: ""; transform: skewX(-20deg); transition: left 450ms ease; }
.home-button--primary:hover { box-shadow: 0 11px 33px rgba(180,77,201,.38), inset 0 1px rgba(255,255,255,.24); }
.home-button--primary:hover::before { left: 130%; }
.home-button--primary > span { position: relative; color: #fce4fa; font-size: 13px; }
.home-button--secondary { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.025); color: #e1dbe8; backdrop-filter: blur(12px); }
.home-button--secondary:hover { border-color: rgba(195,147,255,.38); background: rgba(160,112,224,.08); }
.home-button--discord { border-color: rgba(169,134,255,.17); background: linear-gradient(110deg, rgba(148,112,234,.09), rgba(229,98,193,.045)); color: #d7c7f1; }
.home-button--discord:hover { border-color: rgba(195,147,255,.4); background: linear-gradient(110deg, rgba(148,112,234,.16), rgba(229,98,193,.08)); box-shadow: 0 8px 25px rgba(139,104,225,.12); }
.home-discord-icon { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid rgba(169,134,255,.18); border-radius: 6px; background: rgba(148,112,234,.1); color: #baa0ff; font-size: 11px; }
.home-button-arrow { color: #d4b0ef; font-size: 12px; }
.home-play { display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid rgba(237,159,230,.25); border-radius: 50%; color: #ed9cdd; font-size: 9px; }
.home-capabilities { display: flex; flex-wrap: wrap; gap: 21px; margin-top: 40px; animation: home-copy-enter 850ms 580ms both; }
.home-capabilities > span { display: inline-flex; align-items: center; gap: 7px; color: #87818f; font-size: 7px; font-weight: 700; letter-spacing: 1.05px; }
.capability-dot { width: 4px; height: 4px; border-radius: 50%; }
.capability-dot--pink { background: var(--pink); box-shadow: 0 0 7px rgba(245,106,203,.7); }
.capability-dot--purple { background: var(--purple); box-shadow: 0 0 7px rgba(169,134,255,.7); }
.capability-dot--blue { background: var(--blue); box-shadow: 0 0 7px rgba(140,154,255,.7); }
@keyframes home-copy-enter { from { opacity: 0; transform: translateY(17px); } to { opacity: 1; transform: translateY(0); } }
.home-art { position: relative; display: grid; min-height: min(58vw, 580px); place-items: center; perspective: 1000px; animation: home-art-enter 1.2s 180ms both; }
@keyframes home-art-enter { from { opacity: 0; transform: scale(.94) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.home-art-halo { position: absolute; width: min(34vw, 410px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(150,90,221,.22), rgba(218,95,190,.09) 36%, transparent 71%); filter: blur(15px); animation: home-halo-pulse 8s ease-in-out infinite; }
@keyframes home-halo-pulse { 50% { opacity: .67; transform: scale(1.1); } }
.home-art-orbit { position: absolute; border: 1px solid rgba(208,162,255,.15); border-radius: 50%; transform: rotate(-24deg); }
.home-art-orbit--outer { width: min(37vw, 465px); aspect-ratio: 1; box-shadow: 0 0 50px rgba(157,111,225,.035), inset 0 0 50px rgba(157,111,225,.025); animation: home-orbit-drift 28s linear infinite; }
.home-art-orbit--inner { width: min(29vw, 360px); aspect-ratio: 1; border-color: rgba(245,142,214,.13); transform: rotate(27deg) scaleY(.66); animation: home-orbit-inner 18s ease-in-out infinite alternate; }
@keyframes home-orbit-drift { to { transform: rotate(336deg); } }
@keyframes home-orbit-inner { to { transform: rotate(42deg) scaleY(.72); } }
.home-monogram { position: relative; display: grid; width: clamp(240px, 30vw, 390px); aspect-ratio: .88; align-content: center; justify-items: center; overflow: hidden; border: 1px solid rgba(234,178,255,.33); border-radius: 35% 35% 29% 29%; background: linear-gradient(145deg, rgba(38,28,51,.88), rgba(15,13,22,.95) 61%, rgba(29,20,39,.93)); box-shadow: 0 34px 100px rgba(0,0,0,.52), 0 0 70px rgba(178,93,222,.18), inset 0 1px rgba(255,255,255,.17), inset 0 0 50px rgba(206,134,255,.06); transform: rotate(-8deg) translateZ(30px); animation: home-monogram-float 6s ease-in-out infinite; }
.home-hero-image, .home-image-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-hero-image { object-fit: cover; object-position: 52% 34%; opacity: .96; filter: saturate(1.08) contrast(1.06); }
.home-image-shade { background: linear-gradient(180deg, rgba(13,10,19,.1) 3%, rgba(18,12,25,.03) 37%, rgba(17,11,23,.32) 70%, rgba(15,11,21,.88) 100%), linear-gradient(100deg, rgba(32,13,42,.16), transparent 50%, rgba(89,33,111,.17)); }
.home-monogram::before, .home-monogram::after { position: absolute; inset: 11px; border: 1px solid rgba(242,146,224,.12); border-radius: inherit; content: ""; }
.home-monogram::after { inset: 0; border: 0; border-radius: 0; background: linear-gradient(118deg, transparent 23%, rgba(255,255,255,.075) 37%, transparent 45%); transform: translateX(-100%); animation: home-monogram-shine 7s ease-in-out infinite; }
@keyframes home-monogram-float { 50% { transform: rotate(-5deg) translate3d(0,-11px,30px); } }
@keyframes home-monogram-shine { 0%, 33% { transform: translateX(-100%); } 64%, 100% { transform: translateX(100%); } }
.home-monogram-glint { position: absolute; top: 16%; right: 17%; width: 8px; height: 8px; border-radius: 50%; background: #ffb6e4; box-shadow: 0 0 18px 4px rgba(255,119,221,.76); }
.home-monogram-caption { position: absolute; z-index: 1; right: 0; bottom: 17px; left: 0; color: #f4dff8; font-size: 7px; font-weight: 700; letter-spacing: 3px; text-align: center; text-shadow: 0 1px 9px rgba(0,0,0,.8); transform: rotate(8deg); }
.home-orbit-node { position: absolute; z-index: 2; width: 9px; height: 9px; border: 2px solid #f0a3de; border-radius: 50%; background: #191220; box-shadow: 0 0 17px 3px rgba(237,125,216,.55); }
.home-orbit-node--top { top: 21%; right: 17%; }
.home-orbit-node--bottom { bottom: 18%; left: 18%; width: 6px; height: 6px; border-color: #b6a2ff; box-shadow: 0 0 13px 3px rgba(169,134,255,.53); }
.home-float-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; min-width: 173px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: linear-gradient(140deg, rgba(29,25,37,.82), rgba(15,13,20,.84)); box-shadow: 0 18px 42px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.06); backdrop-filter: blur(14px); animation: home-card-float 7s ease-in-out infinite; }
.home-float-card--ai { top: 25%; left: -1%; }
.home-float-card--discord { right: 0; bottom: 23%; animation-delay: -3.4s; }
@keyframes home-card-float { 50% { transform: translateY(-7px); } }
.home-float-icon { display: grid; width: 30px; height: 30px; flex: none; place-items: center; border: 1px solid rgba(245,106,203,.17); border-radius: 8px; background: rgba(229,98,193,.1); color: #f18bcf; font-size: 13px; }
.home-float-icon--discord { border-color: rgba(169,134,255,.17); background: rgba(148,112,234,.11); color: #baa0ff; }
.home-float-card > span:nth-child(2) { display: grid; gap: 4px; }
.home-float-card strong { color: #e1dbe8; font-size: 7px; font-weight: 700; letter-spacing: .9px; }
.home-float-card small { color: #928b9a; font-size: 8px; }
.home-float-card > i { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(110,214,176,.6); }
.home-art-coordinate { position: absolute; color: #797182; font-size: 7px; font-weight: 700; letter-spacing: 1.55px; }
.home-art-coordinate--top { top: 11%; right: 8%; }
.home-art-coordinate--bottom { bottom: 10%; left: 7%; color: #777181; }
.home-bottomline { gap: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.07); color: #756f7e; font-size: 7px; font-weight: 700; letter-spacing: 1.35px; }
.home-bottomline > span { display: inline-flex; align-items: center; gap: 8px; }
.home-bottomline > span:last-child i { color: #c79de8; font-size: 12px; font-style: normal; }

.nav-link svg, .brand-mark, .mini-mark, .topbar-avatar, .stat-icon, .quick-icon { transition: transform 260ms cubic-bezier(.2,.8,.2,1), filter 260ms ease, box-shadow 260ms ease; }
.nav-link:hover svg { transform: rotate(-8deg) scale(1.12); }
.brand:hover .brand-mark, .home-brand:hover .home-brand-mark { transform: rotate(-8deg) scale(1.08); box-shadow: 0 0 25px rgba(204,111,244,.32); }
.topbar-avatar:hover img, .mini-mark:hover img { transform: scale(1.08); }
.stat-card:hover { transform: translateY(-5px) scale(1.012); border-color: rgba(202,145,255,.35); box-shadow: 0 18px 42px rgba(0,0,0,.3), 0 0 30px rgba(162,100,226,.12); }
.resource-card:hover { transform: translateY(-5px); border-color: rgba(195,136,246,.35); box-shadow: 0 17px 38px rgba(0,0,0,.28), 0 0 28px rgba(162,100,226,.1); }
.quick-card { transition: transform 240ms cubic-bezier(.2,.8,.2,1), border-color 240ms ease, background 240ms ease, box-shadow 240ms ease; }
.quick-card:hover { box-shadow: 0 10px 24px rgba(0,0,0,.24), 0 0 20px rgba(193,129,244,.08); }
.stat-icon, .quick-icon { animation: icon-float 5s ease-in-out infinite; }
.stat-card:nth-child(2) .stat-icon, .quick-card:nth-child(2) .quick-icon { animation-delay: -1.6s; }
.stat-card:nth-child(3) .stat-icon, .quick-card:nth-child(3) .quick-icon { animation-delay: -3.2s; }
@keyframes icon-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.status-orb.is-online span, .live-indicator.is-online, .nav-live-dot.is-online, .chat-header-status.is-online i, .home-platform-label i { animation: status-glow 2.4s ease-in-out infinite; }
@keyframes status-glow { 50% { opacity: .55; box-shadow: 0 0 15px currentColor; } }
.view.is-visible .welcome-row, .view.is-visible .view-heading { animation: content-rise 620ms cubic-bezier(.2,.75,.25,1) both; }
.view.is-visible .stats-grid > :nth-child(1), .view.is-visible .moderation-stats > :nth-child(1) { animation: content-rise 560ms 70ms both; }
.view.is-visible .stats-grid > :nth-child(2), .view.is-visible .moderation-stats > :nth-child(2) { animation: content-rise 560ms 140ms both; }
.view.is-visible .stats-grid > :nth-child(3), .view.is-visible .moderation-stats > :nth-child(3) { animation: content-rise 560ms 210ms both; }
.view.is-visible .stats-grid > :nth-child(4), .view.is-visible .moderation-stats > :nth-child(4) { animation: content-rise 560ms 280ms both; }
.view.is-visible .dashboard-grid > :nth-child(1), .view.is-visible .discord-grid > :nth-child(1) { animation: content-rise 620ms 120ms both; }
.view.is-visible .dashboard-grid > :nth-child(2), .view.is-visible .discord-grid > :nth-child(2) { animation: content-rise 620ms 210ms both; }
.view.is-visible .quick-grid > :nth-child(1), .view.is-visible .resources-grid > :nth-child(1) { animation: content-rise 560ms 80ms both; }
.view.is-visible .quick-grid > :nth-child(2), .view.is-visible .resources-grid > :nth-child(2) { animation: content-rise 560ms 160ms both; }
.view.is-visible .quick-grid > :nth-child(3), .view.is-visible .resources-grid > :nth-child(3) { animation: content-rise 560ms 240ms both; }
.view.is-visible .quick-grid > :nth-child(4), .view.is-visible .resources-grid > :nth-child(4) { animation: content-rise 560ms 320ms both; }
.view.is-visible .ai-workspace, .view.is-visible .records-panel { animation: content-rise 680ms 100ms both; }
@keyframes content-rise { from { opacity: 0; transform: translateY(15px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
.chat-header-status.is-online { text-shadow: 0 0 12px rgba(110,214,176,.3); }
.message--typing .message-mark { animation: typing-breathe 1.4s ease-in-out infinite; }
.message--typing p { background-image: linear-gradient(110deg, rgba(255,255,255,.02) 25%, rgba(202,151,255,.11) 48%, rgba(255,255,255,.02) 72%); background-size: 220% 100%; animation: thinking-shimmer 2.2s linear infinite; }
@keyframes typing-breathe { 50% { transform: scale(1.08); box-shadow: 0 0 16px rgba(191,126,244,.3); } }
@keyframes thinking-shimmer { to { background-position: -220% 0; } }
.home-view::before { animation: backdrop-drift 18s ease-in-out infinite alternate; }
@keyframes backdrop-drift { to { background-position: center, center, calc(50% + 10px) 10px; } }
.home-art-halo { animation-duration: 5.5s; }
.home-monogram::after { animation-duration: 5s; }
.home-float-card { animation-duration: 5.5s; }
.home-float-card--discord { animation-delay: -2.7s; }
.home-particle { animation-duration: 5.5s; }
button, a { transition-timing-function: cubic-bezier(.2,.8,.2,1); }
button:active, .home-button:active, .button:active { transform: scale(.97); }

@media (max-width: 620px) {
  body::after { background-position: center, center, center; background-size: 100% 100%, 100% 100%, cover; }
  .home-view::before { background-position: center, center, center; background-size: 100% 100%, 100% 100%, cover; opacity: .86; }
  .home-monogram { width: clamp(175px, 52vw, 245px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 900px) {
  .home-view { padding-inline: clamp(24px, 6vw, 58px); }
  .home-main { grid-template-columns: minmax(0, 1.12fr) minmax(260px, .88fr); gap: 12px; }
  .home-copy h1 { font-size: clamp(42px, 6vw, 62px); }
  .home-art { min-height: 430px; }
  .home-monogram { width: clamp(180px, 30vw, 245px); }
  .home-float-card { min-width: 150px; padding: 8px; }
  .home-float-card--ai { left: -5%; }
  .home-float-card--discord { right: -5%; }
  .home-art-orbit--outer { width: min(44vw, 380px); }
  .home-art-orbit--inner { width: min(35vw, 300px); }
}
@media (max-width: 620px) {
  .home-view { min-height: 100vh; min-height: 100svh; padding: 20px 21px 17px; }
  .home-grid { background-size: 44px 44px; mask-image: radial-gradient(ellipse at 50% 47%, #000 0, rgba(0,0,0,.62) 31%, transparent 78%); transform: perspective(900px) rotateX(59deg) scale(2) translateY(13%); }
  .home-glow { width: 100vw; filter: blur(84px); }
  .home-glow--violet { top: 21%; right: -38%; opacity: .14; }
  .home-glow--rose { right: 18%; bottom: 0; width: 75vw; opacity: .07; }
  .home-geometry--large { top: 25%; right: -70%; width: 110vw; }
  .home-geometry--small { right: 20%; bottom: -20%; width: 78vw; }
  .home-brand-mark { width: 34px; height: 34px; border-radius: 10px; font-size: 18px; }
  .home-brand-word { font-size: 20px; }
  .home-platform-label { gap: 6px; font-size: 6px; letter-spacing: 1px; }
  .home-main { display: flex; min-height: 0; flex: 1; flex-direction: column; align-items: stretch; justify-content: center; gap: 0; padding-block: 8px 0; }
  .home-copy { padding: 0; }
  .home-eyebrow { gap: 8px; font-size: 7px; letter-spacing: 1.3px; }
  .home-eyebrow-line { width: 16px; }
  .home-copy h1 { margin: 16px 0 11px; font-size: clamp(36px, 9.3vw, 53px); letter-spacing: -.075em; line-height: 1.01; }
  .home-subtitle { max-width: 390px; font-size: 10px; line-height: 1.7; }
  .home-actions { gap: 8px; margin-top: 18px; }
  .home-button { min-height: 38px; gap: 7px; padding-inline: 10px; border-radius: 8px; font-size: 8px; }
  .home-button--secondary { gap: 7px; }
  .home-play { width: 18px; height: 18px; }
  .home-button--discord { min-height: 34px; margin-top: 1px; }
  .home-discord-icon { width: 17px; height: 17px; font-size: 9px; }
  .home-capabilities { gap: 11px; margin-top: 19px; }
  .home-capabilities > span { gap: 5px; font-size: 6px; letter-spacing: .65px; }
  .capability-dot { width: 3px; height: 3px; }
  .home-art { min-height: 245px; flex: none; margin-top: -1px; }
  .home-art-halo { width: 65vw; }
  .home-art-orbit--outer { width: min(72vw, 330px); }
  .home-art-orbit--inner { width: min(58vw, 265px); }
  .home-monogram { width: clamp(150px, 43vw, 205px); border-radius: 34% 34% 28% 28%; }
  .home-float-card { min-width: 130px; gap: 7px; padding: 7px; border-radius: 8px; }
  .home-float-card--ai { top: 20%; left: 0; }
  .home-float-card--discord { right: -1%; bottom: 17%; }
  .home-float-icon { width: 25px; height: 25px; border-radius: 7px; font-size: 11px; }
  .home-float-card strong { font-size: 6px; }
  .home-float-card small { font-size: 7px; }
  .home-art-coordinate { font-size: 5px; letter-spacing: 1px; }
  .home-art-coordinate--top { top: 8%; right: 5%; }
  .home-art-coordinate--bottom { bottom: 6%; left: 4%; }
  .home-bottomline { gap: 8px; padding-top: 11px; font-size: 5px; letter-spacing: .65px; }
  .home-bottomline > span { gap: 5px; }
  .home-bottomline > span:nth-child(2) { display: none; }
}
@media (max-width: 370px) {
  .home-view { padding-inline: 16px; }
  .home-copy h1 { font-size: 35px; }
  .home-button { padding-inline: 8px; font-size: 7px; }
  .home-capabilities { gap: 8px; }
  .home-capabilities > span { font-size: 5px; }
  .home-art { min-height: 220px; }
  .home-float-card--ai { left: -2%; }
  .home-float-card--discord { right: -3%; }
}

.resources-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.resource-card { position: relative; display: flex; min-height: 210px; flex-direction: column; align-items: flex-start; padding: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, rgba(23,21,30,.84), rgba(15,14,20,.88)); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.resource-card:hover { transform: translateY(-2px); border-color: rgba(195,136,246,.23); box-shadow: 0 14px 34px rgba(0,0,0,.2); }
.resource-card--featured { background: radial-gradient(ellipse at 92% 6%, rgba(201,105,203,.12), transparent 40%), linear-gradient(145deg, rgba(27,22,34,.97), rgba(15,14,20,.96)); }
.resource-number { color: #827b8d; font-size: 8px; font-weight: 700; letter-spacing: 1.15px; }
.resource-icon { display: grid; width: 35px; height: 35px; margin-top: 15px; place-items: center; border: 1px solid transparent; border-radius: 10px; font-size: 15px; }
.resource-icon--pink { border-color: rgba(239,111,199,.13); background: rgba(229,98,193,.1); color: #f17acb; }
.resource-icon--purple { border-color: rgba(167,134,255,.14); background: rgba(148,112,234,.11); color: #b197ff; }
.resource-icon--blue { border-color: rgba(140,154,255,.14); background: rgba(106,125,226,.1); color: #9ba8ff; }
.resource-icon--green { border-color: rgba(110,214,176,.14); background: rgba(86,191,150,.1); color: #7de1bd; }
.resource-card h2 { margin: 13px 0 7px; color: #eee9f4; font-family: var(--font-display); font-size: 16px; font-weight: 500; letter-spacing: -.3px; }
.resource-card p { max-width: 410px; margin: 0 0 14px; color: #9993a1; font-size: 10px; line-height: 1.7; }
.resource-card code { color: #d7b6e8; font-family: var(--font-body); font-size: 9px; }
.resource-link { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; color: #d9c2ee; font-size: 9px; font-weight: 600; }
.resource-link span { color: var(--pink); transition: transform 180ms ease; }
.resource-link:hover span { transform: translate(2px, -2px); }
.resources-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.018); }
.resources-bottom > span { display: inline-flex; align-items: center; gap: 9px; color: #aaa4b2; font-size: 9px; }
.resource-bottom-mark { display: grid; width: 25px; height: 25px; place-items: center; overflow: hidden; border: 1px solid rgba(234,133,255,.28); border-radius: 8px; background: rgba(148,112,234,.1); color: #e6c8f5; font-family: var(--font-display); font-size: 12px; font-weight: 700; }
@media (max-width: 680px) {
  .resources-grid { grid-template-columns: 1fr; gap: 9px; }
  .resource-card { min-height: 185px; padding: 15px; }
  .resource-icon { margin-top: 11px; }
  .resources-bottom { align-items: flex-start; flex-direction: column; padding: 12px; }
}

/* Refined control center */
:root {
  --surface: #121019;
  --surface-raised: #191622;
  --surface-soft: #15121c;
  --line: rgba(235, 219, 255, .09);
  --line-strong: rgba(235, 219, 255, .16);
}
body::before {
  background-size: 72px 72px;
  opacity: .7;
}
body::after {
  background-image:
    linear-gradient(180deg, rgba(9,8,13,.24), rgba(9,8,13,.47) 54%, rgba(9,8,13,.72)),
    linear-gradient(90deg, rgba(9,8,13,.69), rgba(9,8,13,.27) 53%, rgba(9,8,13,.56)),
    url("img/img1.png");
  background-position: center, center, center 43%;
  background-size: 100% 100%, 100% 100%, cover;
  opacity: .88;
}
.sidebar {
  width: 264px;
  padding: 29px 18px 20px;
  background: rgba(11, 10, 15, .88);
}
.brand { padding-bottom: 35px; }
.brand-mark { width: 42px; height: 42px; border-radius: 14px; }
.brand-name { font-size: 24px; }
.workspace-label { font-size: 9px; letter-spacing: 1.8px; }
.side-nav { gap: 7px; margin-top: 15px; }
.nav-link {
  min-height: 49px;
  gap: 13px;
  border-radius: 11px;
  font-size: 12px;
}
.nav-link svg { width: 18px; height: 18px; }
.sidebar-status {
  margin-bottom: 20px;
  padding: 14px 11px;
  border-radius: 12px;
  background: linear-gradient(120deg, rgba(152,100,212,.08), rgba(255,255,255,.018));
}
.sidebar-status-copy strong { font-size: 11px; }
.sidebar-status-copy span { font-size: 10px; }
.main-shell { margin-left: 264px; }
.topbar {
  height: 72px;
  padding-inline: clamp(24px, 4vw, 64px);
  background: rgba(10,9,14,.77);
}
.breadcrumb { font-size: 10px; }
.breadcrumb strong { font-size: 12px; }
.topbar-system { font-size: 10px; }
.topbar-chat-link {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid rgba(203,144,255,.2);
  border-radius: 10px;
  background: linear-gradient(110deg, rgba(182,98,204,.18), rgba(122,94,208,.16));
  color: #efdcff;
  font-size: 10px;
  font-weight: 700;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.topbar-chat-link > span { color: #f182ce; }
.topbar-chat-link:hover {
  transform: translateY(-1px);
  border-color: rgba(230,151,255,.42);
  box-shadow: 0 6px 22px rgba(175,97,209,.16);
}
.page-content {
  width: min(1580px, 100%);
  min-height: calc(100vh - 72px);
  padding: 36px clamp(24px, 4.2vw, 64px) 34px;
}
.view { animation: view-enter 360ms cubic-bezier(.2,.7,.25,1) both; }
@keyframes view-enter {
  from { opacity: 0; transform: translateY(10px); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.welcome-row {
  position: relative;
  align-items: center;
  min-height: 176px;
  margin-bottom: 18px;
  padding: 25px 28px;
  overflow: hidden;
  border: 1px solid rgba(205,163,247,.16);
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 86% 12%, rgba(219,102,200,.16), transparent 34%),
    radial-gradient(ellipse at 68% 115%, rgba(116,90,207,.18), transparent 48%),
    linear-gradient(110deg, rgba(22,19,30,.91), rgba(19,15,26,.76));
  box-shadow: 0 16px 55px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.025);
}
.welcome-row::after {
  position: absolute;
  right: 4%;
  bottom: -96px;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(218,167,255,.09);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(218,167,255,.025), 0 0 0 49px rgba(218,167,255,.018);
  content: "";
  pointer-events: none;
}
.welcome-row > div:first-child { position: relative; z-index: 1; }
.welcome-row .eyebrow { font-size: 9px; }
.welcome-row h1, .view-heading h1 {
  font-size: clamp(32px, 3.2vw, 44px);
  letter-spacing: -2px;
}
.page-lead { max-width: 650px; font-size: 12px; }
.welcome-actions {
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}
.welcome-actions .updated-label { flex-basis: 100%; justify-content: flex-end; }
.button {
  min-height: 42px;
  padding-inline: 16px;
  border-radius: 11px;
  font-size: 10px;
}
.button-secondary {
  border-color: rgba(207,163,245,.19);
  background: rgba(255,255,255,.035);
  color: #e8def3;
}
.button-secondary:hover {
  border-color: rgba(224,167,255,.4);
  background: rgba(189,131,232,.09);
}
.button-primary { background: linear-gradient(110deg, #d95fbd, #9369e8); }
.quick-grid--primary {
  gap: 13px;
  margin: 0 0 19px;
}
.quick-grid--primary .quick-card {
  min-height: 88px;
  padding: 15px 17px;
  border-color: rgba(226,207,250,.1);
  border-radius: 15px;
  background: linear-gradient(125deg, rgba(25,21,33,.88), rgba(16,14,21,.82));
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}
.quick-grid--primary .quick-card:hover {
  transform: translateY(-3px);
  border-color: rgba(202,144,247,.34);
  background: linear-gradient(125deg, rgba(40,28,49,.92), rgba(20,16,27,.9));
  box-shadow: 0 17px 38px rgba(0,0,0,.2), 0 0 24px rgba(174,100,214,.08);
}
.quick-grid--primary .quick-icon { width: 39px; height: 39px; border-radius: 12px; font-size: 16px; }
.quick-grid--primary .quick-card strong { font-size: 11px; }
.quick-grid--primary .quick-card small { font-size: 9px; }
.quick-grid--primary .quick-arrow { font-size: 15px; }
.stats-grid, .moderation-stats { gap: 13px; margin-bottom: 16px; }
.stat-card {
  min-height: 142px;
  padding: 18px;
  border-color: rgba(230,213,250,.1);
  border-radius: 15px;
  background:
    radial-gradient(ellipse at 100% 0, rgba(170,110,211,.07), transparent 45%),
    linear-gradient(145deg, rgba(25,22,32,.91), rgba(15,14,20,.91));
  box-shadow: 0 12px 34px rgba(0,0,0,.14);
}
.stat-top { font-size: 9px; letter-spacing: 1.1px; }
.stat-icon { width: 31px; height: 31px; border-radius: 10px; }
.stat-value { margin-block: 12px 8px; font-size: 34px; }
.stat-foot { font-size: 10px; }
.dashboard-grid { gap: 16px; }
.panel {
  border-color: rgba(230,213,250,.1);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(22,20,29,.92), rgba(13,12,18,.91));
  box-shadow: 0 15px 44px rgba(0,0,0,.16);
}
.panel-heading h2 { font-size: 17px; }
.panel-kicker { font-size: 9px; letter-spacing: 1.35px; }
.system-overview { padding-block: 23px 19px; }
.service-row { min-height: 54px; }
.service-copy strong { font-size: 10px; }
.service-copy small, .service-state { font-size: 9px; }
.panel-bottom-note { font-size: 10px; }
.activity-summary strong { font-size: 28px; }
.activity-summary span, .chart-legend { font-size: 9px; }
.activity-item-copy strong, .activity-item-copy small, .activity-item-time { font-size: 9px; }
.ai-workspace {
  min-height: min(720px, calc(100vh - 235px));
  grid-template-columns: 250px minmax(0, 1fr);
  border-color: rgba(227,202,251,.13);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(24,21,31,.91), rgba(13,12,18,.9));
  box-shadow: 0 18px 55px rgba(0,0,0,.2);
}
.ai-rail { padding: 21px 16px 17px; border-right-color: var(--line); }
.rail-section-label { font-size: 9px; letter-spacing: 1.45px; }
.tool-item { min-height: 56px; padding-inline: 10px; border-radius: 11px; }
.tool-item strong, .capability-item strong { font-size: 10px; }
.tool-item small, .capability-item small { font-size: 9px; }
.capability-item { padding-block: 12px 8px; }
.ai-privacy-card { padding: 14px; border-radius: 12px; }
.ai-privacy-card strong { font-size: 10px; }
.ai-privacy-card p { font-size: 9px; }
.chat-workspace { min-height: 650px; }
.chat-workspace-header { min-height: 68px; padding-inline: 22px; }
.chat-title strong { font-size: 12px; }
.chat-title small { font-size: 9px; }
.chat-header-status { font-size: 8px; }
.chat-messages { gap: 17px; padding: 25px clamp(20px, 4vw, 54px); }
.chat-welcome { min-height: 380px; }
.welcome-emblem { width: 54px; height: 54px; border-radius: 18px; }
.chat-welcome-kicker { font-size: 9px; }
.chat-welcome h2 { font-size: clamp(26px, 3vw, 36px); }
.chat-welcome > p { font-size: 11px; }
.chat-suggestions { gap: 9px; }
.chat-suggestions button { min-height: 38px; padding-inline: 12px; border-radius: 10px; font-size: 11px; }
.chat-suggestions button span { font-size: 9px; }
.message { max-width: min(82%, 720px); gap: 10px; }
.message-mark { width: 29px; height: 29px; }
.message p { padding: 11px 14px; border-radius: 13px; font-size: 12px; }
.chat-form {
  min-height: 56px;
  margin-inline: clamp(20px, 4vw, 54px);
  padding-left: 17px;
  border-radius: 13px;
  background: rgba(10,9,14,.74);
}
.chat-form input { font-size: 12px; }
.chat-form button { width: 39px; height: 39px; border-radius: 10px; }
.chat-footnote { margin-block: 11px 15px; font-size: 9px; }
.resource-card, .discord-command, .integration-row, .record-panel, .bot-hero {
  border-radius: 15px;
}
.resource-card {
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.resource-card:hover {
  transform: translateY(-4px);
  border-color: rgba(203,144,247,.28);
  box-shadow: 0 18px 40px rgba(0,0,0,.22), 0 0 23px rgba(176,100,214,.07);
}
.resource-card h2 { font-size: 18px; }
.resource-card p { font-size: 11px; }
.bot-hero { border-radius: 17px; }
.discord-command { min-height: 57px; }
.quick-card, .nav-link, .button, .resource-link, .discord-command, .integration-row { -webkit-tap-highlight-color: transparent; }
@keyframes ambient-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.home-view { padding-inline: clamp(26px, 8vw, 128px); }
.home-view::before { opacity: .82; }
.home-copy h1 { font-size: clamp(47px, 6.5vw, 86px); }
.home-art-halo { animation: home-halo-pulse 5.5s ease-in-out infinite, ambient-float 7s ease-in-out infinite; }
.home-float-card { animation: ambient-float 6s ease-in-out infinite; }
.home-float-card--discord { animation-delay: -2.6s; }
.home-button { min-height: 48px; border-radius: 12px; font-size: 11px; }
.home-platform-label { font-size: 9px; }
.home-bottomline { font-size: 8px; }

@media (max-width: 1150px) {
  .sidebar { width: 220px; }
  .main-shell { margin-left: 220px; }
  .quick-grid--primary .quick-card { padding-inline: 12px; }
}
@media (max-width: 940px) {
  .sidebar { width: 68px; }
  .main-shell { margin-left: 68px; }
  .topbar-chat-link { width: 36px; justify-content: center; padding: 0; font-size: 0; }
  .topbar-chat-link > span { font-size: 15px; }
  .welcome-row { align-items: flex-start; }
  .welcome-actions { justify-content: flex-start; }
  .welcome-actions .updated-label { flex-basis: auto; justify-content: flex-start; }
}
@media (max-width: 680px) {
  .sidebar { width: 265px; }
  .main-shell { margin-left: 0; }
  .topbar { height: 62px; padding-inline: 15px; }
  .topbar-chat-link { width: 34px; min-height: 34px; }
  .page-content { min-height: calc(100vh - 62px); padding: 20px 15px 24px; }
  .welcome-row {
    min-height: 0;
    gap: 13px;
    padding: 21px 18px;
    border-radius: 17px;
  }
  .welcome-row::after { right: -78px; }
  .welcome-row h1, .view-heading h1 { font-size: clamp(29px, 8vw, 36px); }
  .welcome-actions { width: 100%; gap: 8px; }
  .welcome-actions .updated-label { flex-basis: 100%; }
  .welcome-actions .button { flex: 1; }
  .quick-grid--primary { gap: 9px; margin-bottom: 13px; }
  .quick-grid--primary .quick-card { min-height: 70px; padding: 10px; border-radius: 12px; }
  .quick-grid--primary .quick-icon { width: 33px; height: 33px; }
  .quick-grid--primary .quick-card strong { font-size: 10px; }
  .quick-grid--primary .quick-card small { font-size: 8px; }
  .stats-grid, .moderation-stats { gap: 9px; }
  .stat-card { min-height: 119px; padding: 13px; border-radius: 13px; }
  .stat-top { font-size: 7px; }
  .stat-value { font-size: 29px; }
  .stat-foot { font-size: 8px; }
  .panel { border-radius: 14px; }
  .ai-workspace { min-height: min(700px, calc(100svh - 160px)); border-radius: 15px; }
  .chat-workspace { min-height: min(690px, calc(100svh - 170px)); }
  .chat-workspace-header { min-height: 59px; }
  .chat-messages { min-height: 300px; padding: 18px 13px; }
  .chat-welcome { min-height: 300px; }
  .chat-welcome h2 { font-size: 27px; }
  .message { max-width: 94%; }
  .message p { font-size: 11px; }
  .chat-form { min-height: 51px; margin-inline: 12px; }
  .chat-form input { font-size: 11px; }
  .chat-footnote { font-size: 8px; }
  .home-view { padding: 25px 22px 18px; }
  .home-main { grid-template-columns: 1fr; gap: 0; }
  .home-copy { padding-top: 36px; }
  .home-copy h1 { font-size: clamp(43px, 12vw, 67px); }
  .home-art { min-height: 340px; }
  .home-art-coordinate { display: none; }
  .home-bottomline > span:nth-child(2) { display: none; }
}
@media (max-width: 390px) {
  .welcome-actions .button { padding-inline: 9px; font-size: 8px; }
  .quick-grid--primary .quick-card { gap: 7px; padding: 9px 7px; }
  .quick-grid--primary .quick-card small { white-space: normal; }
}
@media (min-width: 681px) and (max-width: 940px) {
  .sidebar { width: 220px; align-items: stretch; padding: 25px 14px 18px; }
  .brand { display: grid; grid-template-columns: 39px 1fr; column-gap: 11px; padding: 0 7px 30px; }
  .brand-name, .brand-caption, .workspace-label, .sidebar-status-copy,
  .sidebar-footer > span:nth-child(2), .sidebar-footer .version-label { display: initial; }
  .brand-caption { display: block; }
  .workspace-label { display: block; }
  .nav-link { width: auto; justify-content: flex-start; padding-inline: 11px; }
  .nav-link > span:not(.nav-live-dot) { display: initial; }
  .nav-badge { position: static; min-width: auto; height: auto; margin-left: auto; padding: 3px 5px; font-size: 8px; }
  .nav-live-dot { position: static; width: 6px; height: 6px; margin-left: auto; }
  .sidebar-status { justify-content: flex-start; width: auto; margin: 14px 4px 16px; padding: 13px 10px; }
  .sidebar-status-copy { display: grid; }
  .sidebar-status .live-indicator { display: block; }
  .sidebar-footer { justify-content: flex-start; width: auto; padding-inline: 7px; }
  .main-shell { margin-left: 220px; }
  .topbar-chat-link { width: auto; justify-content: center; padding-inline: 12px; font-size: 10px; }
  .topbar-chat-link > span { font-size: 12px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-grid--primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-grid--primary .quick-card:last-child { grid-column: 1 / -1; }
}
.bar-chart .chart-bar { transform-box: fill-box; transform-origin: center bottom; animation: chart-rise 750ms cubic-bezier(.2,.7,.25,1) both; }
@keyframes chart-rise { from { opacity: .35; transform: scaleY(.1); } to { opacity: 1; transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .view, .home-view::before, .home-art-halo, .home-float-card, .bar-chart .chart-bar { animation: none !important; }
}

/* Zyro visual system refresh */
:root {
  color-scheme: dark;
  --background: #0b0911;
  --surface: #12101a;
  --surface-raised: #191624;
  --surface-soft: #15121d;
  --text: #f7f3fc;
  --muted: #b8b0c4;
  --subtle: #91899d;
  --pink: #f080cf;
  --purple: #b19aff;
  --blue: #96a8ff;
  --green: #83dfbc;
  --line: rgba(229, 216, 255, .09);
  --line-strong: rgba(229, 216, 255, .16);
}

html { background: var(--background); scroll-behavior: smooth; }
body { background: radial-gradient(ellipse at 80% 0%, rgba(99, 61, 128, .17), transparent 42%), var(--background); color: var(--text); font-size: 14px; }
body::before { opacity: .42; background-size: 64px 64px; }
body::after { opacity: .18; background-image: linear-gradient(180deg, rgba(9,8,13,.32), rgba(9,8,13,.72) 48%, #0b0911), linear-gradient(90deg, rgba(9,8,13,.74), rgba(9,8,13,.34) 49%, rgba(9,8,13,.72)), url("img/img1.png"); }
::selection { background: rgba(226, 128, 214, .32); color: #fff; }
[hidden] { display: none !important; }

.sidebar { width: 264px; padding: 24px 16px 16px; border-color: var(--line); background: rgba(13, 11, 19, .94); backdrop-filter: blur(24px); }
.brand { padding-bottom: 34px; }
.brand-mark, .mini-mark { border-color: rgba(213, 154, 255, .35); border-radius: 13px; background: linear-gradient(145deg, rgba(240, 128, 207, .2), rgba(136, 105, 236, .24)); box-shadow: 0 8px 28px rgba(117, 73, 164, .12); }
.workspace-label, .rail-section-label { color: #a49bb2; letter-spacing: 1.4px; }
.side-nav { gap: 7px; margin-top: 15px; }
.nav-link { min-height: 46px; border-radius: 11px; color: #b6aec2; font-size: 13px; }
.nav-link:hover { background: rgba(255,255,255,.045); color: #fff; }
.nav-link.is-active { border-color: rgba(191, 151, 255, .22); background: linear-gradient(100deg, rgba(170, 120, 239, .18), rgba(231, 116, 201, .075)); color: #fcf6ff; }
.sidebar-status { border-color: var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.sidebar-status-copy strong, .sidebar-footer strong { color: #f0eaf7; font-size: 11px; }
.sidebar-status-copy span, .sidebar-footer small { color: #a29aac; font-size: 10px; }
.main-shell { margin-left: 264px; }
.topbar { height: 70px; padding-inline: clamp(22px, 4vw, 64px); border-color: var(--line); background: rgba(11, 9, 17, .88); }
.breadcrumb, .topbar-system { color: #b0a8bb; font-size: 11px; }
.breadcrumb strong { color: #f0eaf5; font-size: 12px; }
.topbar-actions { gap: 16px; }
.page-content { width: min(1580px, 100%); min-height: calc(100vh - 70px); padding-top: clamp(28px, 4vw, 52px); }
.welcome-row, .view-heading { margin-bottom: 30px; }
.welcome-row h1, .view-heading h1 { font-size: clamp(30px, 3vw, 42px); letter-spacing: -1.7px; }
.eyebrow { color: #c0b5cc; font-size: 10px; }
.page-lead { color: #b5adbf; font-size: 13px; }
.button { min-height: 42px; border-radius: 11px; font-size: 11px; }
.button-primary { background: linear-gradient(115deg, #d96dc0, #916fef); box-shadow: 0 8px 25px rgba(170, 91, 207, .2); }
.button-primary:hover { box-shadow: 0 10px 30px rgba(170, 91, 207, .34); }
.button-secondary { border: 1px solid var(--line-strong); background: rgba(255,255,255,.035); color: #e6dff0; }
.button-secondary:hover { border-color: rgba(211, 170, 255, .38); background: rgba(175, 127, 236, .09); }

.quick-grid { gap: 13px; }
.quick-card, .stat-card, .panel, .resource-card, .bot-hero, .discord-command, .integration-row, .privacy-callout, .notice-card {
  border-color: var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(25, 22, 34, .96), rgba(17, 15, 24, .96));
  box-shadow: 0 14px 38px rgba(0,0,0,.16);
}
.quick-card { min-height: 84px; gap: 13px; padding: 15px; }
.quick-card strong, .service-copy strong, .integration-row strong { color: #f1ebf7; }
.quick-card small, .service-copy small, .integration-row small { color: #aaa2b4; }
.stat-card { min-height: 138px; padding: 18px; }
.stat-top, .panel-kicker { color: #b1a8bd; }
.stat-value { font-size: 34px; }
.stat-foot, .stat-foot-label, .panel-bottom-note { color: #aaa2b2; }
.panel { padding: 21px; }
.panel-heading h2 { color: #f4eff8; font-size: 17px; }
.service-row, .discord-command { border-color: rgba(233, 220, 255, .08); }
.service-copy strong, .discord-command strong { font-size: 11px; }
.service-copy small, .discord-command small { font-size: 10px; }
.chart-wrap { min-height: 130px; }
.activity-summary strong { color: #f8f3fc; }

.ai-workspace { gap: 14px; }
.ai-rail { border-color: var(--line); border-radius: 16px; background: rgba(16, 13, 22, .86); }
.tool-item, .capability-item { border-radius: 11px; }
.ai-privacy-card { border-color: rgba(190, 151, 255, .18); border-radius: 14px; background: rgba(171, 124, 230, .07); }
.chat-workspace { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: rgba(17, 14, 23, .9); box-shadow: 0 18px 50px rgba(0,0,0,.19); }
.chat-workspace-header { min-height: 68px; padding-inline: 22px; border-color: var(--line); }
.chat-title strong { color: #f3edf8; font-size: 12px; }
.chat-title small, .chat-footnote { color: #aaa2b3; font-size: 10px; }
.chat-messages { gap: 18px; padding-block: 26px; scrollbar-color: #5d4b70 transparent; }
.chat-welcome h2 { color: #faf6ff; }
.chat-welcome > p { color: #b4acbd; font-size: 11px; }
.chat-suggestions button { min-height: 36px; border-color: var(--line-strong); border-radius: 10px; background: rgba(255,255,255,.035); color: #e5c8f6; font-size: 11px; }
.chat-suggestions button span { color: #d0c6d8; font-size: 10px; }
.message p { max-width: min(760px, 82vw); padding: 14px 16px; border: 1px solid rgba(235, 221, 255, .09); border-radius: 14px; background: #1a1722; color: #f0ebf5; font-size: 13px; line-height: 1.75; overflow-wrap: anywhere; white-space: pre-wrap; }
.message--user p { border-color: rgba(210, 151, 255, .2); background: linear-gradient(145deg, rgba(129, 86, 171, .32), rgba(91, 67, 130, .27)); }
.message-mark { border: 1px solid rgba(222, 164, 255, .28); border-radius: 10px; background: linear-gradient(145deg, rgba(232, 126, 206, .2), rgba(135, 104, 225, .22)); }
.chat-form { min-height: 58px; gap: 12px; padding: 6px 8px 6px 17px; border-color: rgba(195, 151, 238, .32); border-radius: 14px; background: rgba(10, 8, 14, .9); }
.chat-form:focus-within { border-color: rgba(221, 149, 234, .68); box-shadow: 0 0 0 3px rgba(199, 117, 212, .1); }
.chat-form input, .chat-form textarea { width: 100%; min-width: 0; max-height: 120px; resize: none; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: 13px; line-height: 1.55; }
.chat-form input::placeholder, .chat-form textarea::placeholder { color: #a59bad; }
.chat-form button { width: 42px; height: 42px; border-radius: 12px; font-size: 22px; }
.chat-footnote { margin-block: 12px 17px; }

.records-table th { color: #b3a9bf; }
.records-table td { color: #e7e0ec; }
.privacy-callout, .notice-card { padding: 18px; }
.privacy-callout p, .notice-card p, .bot-connect-panel > p { color: #b7afc0; line-height: 1.7; }
.auth-gate { background: radial-gradient(ellipse at 50% 18%, rgba(131, 79, 167, .2), transparent 42%), rgba(8, 7, 12, .86); backdrop-filter: blur(14px); }
.auth-card { max-width: 440px; padding: 34px; border: 1px solid var(--line-strong); border-radius: 22px; background: linear-gradient(145deg, rgba(27, 23, 36, .98), rgba(15, 13, 20, .98)); box-shadow: 0 28px 90px rgba(0,0,0,.45); }
.auth-card { position: relative; }
.auth-close { position: absolute; top: 14px; right: 14px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(255,255,255,.04); color: #d9d1e2; font-size: 22px; cursor: pointer; }
.auth-close:hover { background: rgba(255,255,255,.09); color: #fff; }
.auth-card > p, .auth-card > small { color: #b3aabc; line-height: 1.65; }
.auth-card label { display: block; margin: 17px 0 7px; color: #e1d8e9; font-size: 12px; font-weight: 600; }
.auth-card input, .account-form select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: #100e16; color: #f7f1fb; }
.auth-card input:focus, .account-form select:focus { border-color: rgba(213, 147, 243, .65); outline: 3px solid rgba(213, 147, 243, .14); }
.toast { border-color: var(--line-strong); border-radius: 12px; background: #211c2b; color: #fbf6ff; }
.app-footer { color: #a59cac; }

@media (max-width: 1150px) {
  .sidebar { width: 228px; }
  .main-shell { margin-left: 228px; }
}
@media (max-width: 940px) and (min-width: 681px) {
  .sidebar { width: 220px; }
  .main-shell { margin-left: 220px; }
}
@media (max-width: 680px) {
  .sidebar { width: min(290px, 86vw); background: rgba(13, 11, 19, .98); }
  .main-shell { margin-left: 0; }
  .topbar { height: 62px; padding-inline: 14px; }
  .topbar-actions { gap: 9px; }
  .topbar-system, .topbar-divider, .account-email { display: none; }
  .page-content { min-height: calc(100svh - 62px); padding: 22px 14px 26px; }
  .welcome-row, .view-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
  .welcome-actions { width: 100%; flex-wrap: wrap; }
  .quick-grid--primary { grid-template-columns: 1fr; }
  .quick-card { min-height: 72px; }
  .stats-grid, .moderation-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid, .discord-grid { grid-template-columns: 1fr; }
  .panel { padding: 16px; }
  .system-overview { grid-template-columns: 1fr; }
  .system-visual { min-height: 150px; }
  .ai-workspace { grid-template-columns: 1fr; }
  .ai-rail { display: none; }
  .chat-workspace { min-height: min(720px, calc(100svh - 120px)); }
  .chat-messages { min-height: 300px; padding: 18px 12px; }
  .message { max-width: 100%; }
  .message p { max-width: calc(100vw - 74px); padding: 12px; font-size: 12px; }
  .chat-form { margin-inline: 10px; }
  .chat-form input, .chat-form textarea { font-size: 12px; }
  .home-view { padding: 24px 20px; }
  .home-copy h1 { font-size: clamp(42px, 12vw, 68px); }
  .auth-card { width: min(100% - 28px, 440px); padding: 25px 22px; }
  .records-table-wrap { overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body.ai-active .main-shell { display: flex; height: 100svh; min-height: 100svh; flex-direction: column; overflow: hidden; }
body.ai-active .page-content { display: flex; width: 100%; min-height: 0; height: calc(100svh - 70px); flex: 1; margin: 0; padding: 0; }
body.ai-active #view-ai { display: flex; min-width: 0; min-height: 0; flex: 1; flex-direction: column; animation: none; }
body.ai-active #view-ai > .view-heading,
body.ai-active #view-ai > .ai-workspace > .ai-rail,
body.ai-active .app-footer { display: none; }
body.ai-active .ai-workspace { display: flex; min-width: 0; min-height: 0; flex: 1; overflow: hidden; border: 0; border-radius: 0; background: rgba(12, 10, 17, .94); box-shadow: none; }
body.ai-active .chat-workspace { display: flex; width: 100%; min-width: 0; height: 100%; min-height: 0; flex-direction: column; border: 0; border-radius: 0; box-shadow: none; }
body.ai-active .chat-messages { width: min(100%, 1100px); min-height: 0; flex: 1; align-self: center; padding: 34px clamp(18px, 6vw, 76px); }
body.ai-active .message { width: min(100%, 900px); max-width: 100%; }
body.ai-active .message p { max-width: min(82%, 800px); padding: 15px 18px; font-size: 14px; line-height: 1.75; }
body.ai-active .chat-form { width: min(calc(100% - 36px), 930px); flex: none; align-self: center; margin-inline: 18px; }
body.ai-active .chat-footnote { flex: none; margin-bottom: 13px; }
@media (max-width: 680px) {
  body.ai-active .page-content { height: calc(100svh - 62px); }
  body.ai-active .chat-workspace-header { min-height: 58px; }
  body.ai-active .chat-messages { padding: 20px 12px; }
  body.ai-active .message p { max-width: 88%; padding: 12px 14px; font-size: 13px; }
  body.ai-active .chat-form { width: calc(100% - 24px); margin-inline: 12px; }
}
@media (max-width: 680px) {
  body.ai-active .main-shell { height: 100dvh; min-height: 100dvh; }
  body.ai-active .page-content { height: calc(100dvh - 58px); min-height: 0; }
  body.ai-active .topbar { height: 58px; flex: none; gap: 10px; padding-inline: 12px; }
  body.ai-active .breadcrumb { min-width: 0; flex: 1; font-size: 11px; }
  body.ai-active .breadcrumb > span:first-child,
  body.ai-active .breadcrumb > i,
  body.ai-active .topbar-chat-link,
  body.ai-active .topbar-avatar,
  body.ai-active .topbar-divider { display: none; }
  body.ai-active .topbar-actions { gap: 8px; }
  body.ai-active .topbar-system { gap: 0; }
  body.ai-active .topbar-system span { display: none; }
  body.ai-active .chat-workspace-header { min-height: 62px; gap: 8px; padding-inline: 15px; }
  body.ai-active .chat-title { gap: 10px; }
  body.ai-active .chat-title .mini-mark { width: 34px; height: 34px; }
  body.ai-active .chat-title strong { font-size: 13px; }
  body.ai-active .chat-title small { font-size: 10px; }
  body.ai-active .chat-header-status { gap: 5px; font-size: 7px; letter-spacing: .25px; }
  body.ai-active .chat-messages { width: 100%; gap: 14px; padding: 18px 14px 14px; overscroll-behavior: contain; }
  body.ai-active .message { gap: 7px; }
  body.ai-active .message-mark { width: 27px; height: 27px; border-radius: 9px; }
  body.ai-active .message p { max-width: calc(100% - 34px); padding: 12px 14px; border-radius: 16px; font-size: 14px; line-height: 1.6; }
  body.ai-active .message--user p { max-width: 88%; }
  body.ai-active .chat-welcome { min-height: 100%; padding: 18px 4px; }
  body.ai-active .chat-welcome h2 { font-size: clamp(26px, 8vw, 32px); }
  body.ai-active .chat-suggestions { max-width: 100%; }
  body.ai-active .chat-form { width: calc(100% - 20px); min-height: 56px; margin: 0 10px; padding: 6px 7px 6px 14px; border-radius: 17px; }
  body.ai-active .chat-form textarea { min-height: 38px; max-height: 112px; padding-block: 8px; font-size: 16px; line-height: 1.4; }
  body.ai-active .chat-form button { width: 42px; height: 42px; border-radius: 13px; }
  body.ai-active .chat-footnote { margin: 7px 12px calc(8px + env(safe-area-inset-bottom)); font-size: 9px; line-height: 1.4; }
}
@media (max-width: 390px) {
  body.ai-active .chat-workspace-header { padding-inline: 12px; }
  body.ai-active .chat-header-status { max-width: 58px; font-size: 6px; }
  body.ai-active .chat-messages { padding-inline: 10px; }
  body.ai-active .message p { max-width: calc(100% - 32px); padding-inline: 12px; font-size: 13px; }
  body.ai-active .message--user p { max-width: 88%; }
}