:root {
  --bg: #08060b;
  --surface: #140d1b;
  --surface-soft: rgba(21, 13, 29, .82);
  --surface-raised: #1b1124;
  --line: rgba(222, 193, 255, .12);
  --line-strong: rgba(222, 193, 255, .2);
  --text: #fbf8ff;
  --muted: #a79dad;
  --faint: #7f7484;
  --cyan: #c18cff;
  --blue: #a367e4;
  --violet: #d0a3ff;
  accent-color: #b77bf4;
}

html { scrollbar-color: #7847a2 #0d0911; }
body {
  background:
    radial-gradient(circle at 9% 18%, rgba(128, 64, 178, .16), transparent 30rem),
    radial-gradient(circle at 94% 2%, rgba(191, 100, 235, .12), transparent 34rem),
    #08060b;
}
body::before {
  background:
    linear-gradient(rgba(220, 187, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 187, 255, .018) 1px, transparent 1px);
  background-size: 72px 72px;
}
::selection { color: #fff; background: #7740a7; }
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #d7adff;
  outline-offset: 3px;
}
.ambient-one { background: #9c4bd4; opacity: .18; }
.ambient-two { background: #5e238f; opacity: .2; }

.brand { gap: 9px; }
.brand-mark {
  width: 42px;
  height: 42px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(187, 120, 244, .3));
}
.brand small { color: #9c82b0; }
.eyebrow { color: #c6a0ed; }
.eyebrow span { background: linear-gradient(90deg, #ca92ff, transparent); }
.public-header { height: 88px; border-color: rgba(222, 193, 255, .09); }
.quiet-link,
.back-button { color: #a89aad; }

.button {
  border-color: rgba(222, 193, 255, .14);
  border-radius: 15px 15px 15px 6px;
}
.button.primary {
  color: #fff;
  background: linear-gradient(120deg, #7040aa, #9c58db 56%, #c564ad);
  box-shadow: 0 14px 34px rgba(128, 63, 176, .28);
}
.button.primary:hover { box-shadow: 0 18px 44px rgba(158, 83, 211, .36); }
.button.secondary { color: #eee6f3; background: rgba(224, 195, 255, .045); }
.button.secondary:hover { border-color: rgba(199, 143, 255, .32); }

.auth-intro h1,
.view-heading h1 { text-wrap: balance; }
.auth-intro > p:not(.eyebrow),
.view-heading > p:last-child { color: #aaa0b0; }
.trust-list { border-color: rgba(222, 193, 255, .11); }
.trust-list > div + div { border-color: rgba(222, 193, 255, .11); }
.trust-list > div > span { color: #a46ec9; }
.trust-list small { color: #847889; }
.auth-card {
  border-color: rgba(222, 193, 255, .18);
  border-radius: 26px 26px 26px 9px;
  background: linear-gradient(145deg, rgba(28, 17, 38, .96), rgba(12, 8, 16, .98));
  box-shadow: 0 42px 100px rgba(0, 0, 0, .44), 0 0 65px rgba(137, 65, 185, .1);
}
.auth-card::before { background: #9b4ece; opacity: .19; }
.card-kicker { color: #a88ab9; }
.card-copy { color: #a297a8; }
label { color: #c5b9ca; }
input,
select,
textarea {
  border-color: rgba(222, 193, 255, .13);
  border-radius: 13px 13px 13px 5px;
  background: rgba(7, 4, 10, .66);
}
input::placeholder,
textarea::placeholder { color: #6f6474; }
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(207, 159, 255, .58);
  box-shadow: 0 0 0 3px rgba(185, 120, 244, .12);
}
.method-picker label {
  border-color: rgba(222, 193, 255, .12);
  border-radius: 11px 11px 11px 5px;
}

.portal-header {
  border-color: rgba(222, 193, 255, .1);
  background: rgba(8, 6, 11, .9);
}
.account-avatar {
  border-color: rgba(222, 193, 255, .17);
  border-radius: 11px 11px 11px 4px;
  color: #ead6ff;
  background: #21142b;
}
.portal-sidebar {
  border-color: rgba(222, 193, 255, .09);
  background: rgba(11, 7, 15, .8);
}
.nav-item { border-radius: 12px 12px 12px 5px; color: #9b8fa0; }
.nav-item > span { color: #796a80; }
.nav-item:hover { color: #f1e9f5; background: rgba(219, 181, 255, .035); }
.nav-item.active {
  border-color: rgba(202, 143, 255, .2);
  color: #f5eaff;
  background: linear-gradient(110deg, rgba(181, 105, 235, .16), rgba(213, 80, 161, .055));
}
.nav-item.active > span { color: #d5a6ff; }
.sidebar-help,
.summary-card,
.form-section,
.content-card,
.detail-sidebar-card,
.conversation-card,
.filter-bar {
  border-color: rgba(222, 193, 255, .11);
  border-radius: 18px 18px 18px 6px;
  background: linear-gradient(145deg, rgba(224, 195, 255, .038), rgba(255, 255, 255, .012));
}
.summary-card { min-height: 110px; }
.summary-card span,
.ticket-reference,
.section-number,
.meta-item span,
.filter-bar label > span { color: #8f7e98; }

.ticket-row {
  border-color: rgba(222, 193, 255, .11);
  border-radius: 17px 17px 17px 6px;
  background: linear-gradient(110deg, rgba(224, 195, 255, .04), rgba(255, 255, 255, .01));
}
.ticket-row:hover {
  border-color: rgba(202, 143, 255, .27);
  background: linear-gradient(110deg, rgba(181, 105, 235, .09), rgba(255, 255, 255, .012));
}
.status-open { color: #d7a9ff; background: rgba(185, 120, 244, .1); }
.status-in_progress { color: #bd91ef; background: rgba(158, 91, 213, .11); }
.empty-state {
  border-color: rgba(222, 193, 255, .15);
  border-radius: 20px 20px 20px 7px;
}
.search-results {
  border-color: rgba(222, 193, 255, .18);
  border-radius: 15px 15px 15px 6px;
  background: #1a1022;
}
.search-result:hover,
.search-result:focus { background: rgba(185, 120, 244, .1); }
.small-avatar {
  border-color: rgba(222, 193, 255, .13);
  border-radius: 11px 11px 11px 4px;
  color: #e2c4ff;
  background: #21142b;
}
.selected-context {
  border-color: rgba(202, 143, 255, .2);
  border-radius: 13px 13px 13px 5px;
  background: rgba(185, 120, 244, .06);
}
.message-list { background: rgba(222, 193, 255, .1); }
.message { background: #100a15; }
.reply-form { background: rgba(223, 193, 255, .018); }
.toast {
  border-color: rgba(202, 143, 255, .24);
  border-radius: 14px 14px 14px 5px;
  color: #f0e1ff;
  background: #21142b;
}

@media (max-width: 760px) {
  .public-header { height: 72px; }
  .auth-card,
  .sidebar-help,
  .summary-card,
  .form-section,
  .content-card,
  .detail-sidebar-card,
  .conversation-card,
  .filter-bar,
  .ticket-row { border-radius: 16px 16px 16px 6px; }
}