/* SonderVPN · cosmos · 0.3.6 */
:root, html, html[data-theme] {
  color-scheme: dark;
  --bg: #100b20; --panel: #1a142e; --line: #3a3051;
  --text: #f5efff; --muted: #b8accd; --accent: #dfc2fa; --ink: #241334;
  --background: #100b20; --surface: #1a142e; --border: #3a3051;
  --tg-theme-bg-color: #100b20; --tg-theme-secondary-bg-color: #1a142e;
  --tg-theme-text-color: #f5efff; --tg-theme-hint-color: #b8accd;
  --tg-theme-button-color: #dfc2fa; --tg-theme-button-text-color: #241334;
}
html { min-height: 100%; background: #100b20; }
body {
  min-height: 100vh; min-height: 100dvh;
  background-color: #100b20 !important;
  background-image:
    radial-gradient(1px 1px at 12% 16%, #e2c5fb55 90%, transparent),
    radial-gradient(1px 1px at 86% 26%, #c3b5ee44 90%, transparent),
    radial-gradient(1px 1px at 72% 74%, #e2c5fb44 90%, transparent),
    radial-gradient(1px 1px at 28% 88%, #c3b5ee44 90%, transparent),
    radial-gradient(ellipse at 86% 4%, #49317424, transparent 48%),
    radial-gradient(ellipse at 9% 76%, #3a2a6820, transparent 50%) !important;
  color: var(--text);
}
.sidebar { background: #110c22; border-color: var(--line); }
.sidebar nav a.active, .sidebar nav a:hover { background: #2a2041; }
.avatar, .server-icon { background: #2d2247; border-color: #6a5088; }
.pill { border-color: #70568c; }
.hero {
  border-color: #594176;
  background: radial-gradient(ellipse at 78% 52%, #60418a28, transparent 60%),
    linear-gradient(115deg, #2d2044, #181127 78%);
}
.hero p { color: #d9cbea; }
.panel, .copy-dialog { background: var(--panel); border-color: var(--line); }
.panel, .hero { box-shadow: 0 14px 48px #05020d18; }
.post p { color: #d9cfea; }
.welcome { background: linear-gradient(120deg, #2d2044, #181127 85%); border-color: #594176; }
.app-header { background: #110c22; }
.bottom-nav { background: #151026f5; }
.bottom-nav button[aria-current=page] { background: #2a2041; }
.button { background: var(--accent); color: var(--ink); }
.button:hover { background: #ecd6ff; }
.secondary:hover { background: #2a2041; }
input[type=password], input[type=text], textarea, select {
  background-color: #110c21; border-color: #655078; color: var(--text);
}
.notice { background: #302044; border-color: #74528e; }
.error { color: #ffcaca; background: #39202e; border-color: #985668; }
.choice { background: #18122a; }
.choice:has(input:checked) { border-color: var(--accent); background: #302044; }
.brand-mark, .logo-image, .sonder-admin-brand img,
img[src*="sonder-star.svg"], img[src*="sonder-favicon.svg"] {
  object-fit: contain; mix-blend-mode: normal !important;
}
.hero-art { mix-blend-mode: normal; }
.sidebar { background: transparent !important; border-right: 0; }
.avatar { position: relative; overflow: hidden; }
.avatar-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar-image[hidden], .avatar-fallback[hidden] { display: none !important; }
.payment-amount-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-top:13px; margin-top:14px; border-top:1px solid var(--line); font-size:13px; }
.payment-amount { font-size:19px; font-weight:600; color:var(--text); white-space:nowrap; }
.month-calendar { display:flex; align-items:center; gap:10px; min-width:0; padding:13px 16px; margin:26px 0 12px; background:var(--panel); border:1px solid var(--line); border-radius:13px; }
.calendar-year { flex:0 0 auto; padding-right:5px; font-size:15px; font-weight:650; color:var(--text); }
.month-scroll { position:relative; display:flex; gap:8px; min-width:0; flex:1; overflow-x:auto; overflow-y:hidden; padding:3px 0 7px; scrollbar-width:thin; scrollbar-color:#655078 transparent; }
.month-scroll::-webkit-scrollbar { height:4px; }
.month-scroll::-webkit-scrollbar-thumb { background:#655078; border-radius:4px; }
.calendar-month { display:flex; flex:0 0 92px; min-height:42px; align-items:center; justify-content:center; padding:9px 10px; border:1px solid var(--line); border-radius:10px; color:var(--muted); font-size:12px; white-space:nowrap; }
.calendar-month.is-paid { background:#17382b; border-color:#347c55; color:#b3efc7; font-weight:650; }
.calendar-month.is-overdue { background:#3b1c2c; border-color:#a75066; color:#ffbecb; font-weight:650; }
.telegram-bot-link { margin-top:12px; }
.calendar-arrow { flex:0 0 30px; width:30px; height:36px; padding:0; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--text); font-size:24px; }
.calendar-arrow:disabled { opacity:.3; cursor:default; }
@media(max-width:560px) { .month-calendar{padding:12px;gap:9px}.calendar-arrow{display:none}.calendar-month{flex-basis:88px}.stats .payment-amount-row{display:block}.stats .payment-amount{display:block;margin-top:4px} }
.hero-art::before, .hero-art::after { display: none; }
.login-art::before { background: radial-gradient(circle, #a579df24, transparent 70%); }
.login-art { width: min(100%, 380px); margin-top: 12px; }
.login-intro { align-self: start; }
:focus-visible { outline: 2px solid #dfc2fa; outline-offset: 4px; }
/* Admin uses the same palette while retaining distinct alternating records. */
html[data-theme], html:root {
  --primary: #3b2b55; --secondary: #201530; --accent-admin: #dfc2fa;
  --header-bg: #1b122c; --header-color: #f5efff; --header-link-color: #f5efff;
  --body-bg: #100b20; --body-fg: #f5efff; --body-quiet-color: #b8accd;
  --body-loud-color: #f5efff; --darkened-bg: #1a142e; --selected-bg: #2a2041;
  --selected-row: #38264f; --hairline-color: #3a3051; --border-color: #49395e;
  --link-fg: #dfc2fa; --link-hover-color: #f1dbff; --link-selected-fg: #f1dbff;
  --button-bg: #60417f; --button-hover-bg: #775297;
  --default-button-bg: #6c478f; --default-button-hover-bg: #8255aa;
  --close-button-bg: #4b3b5e; --close-button-hover-bg: #654e7d;
  --breadcrumbs-bg: #241935; --breadcrumbs-fg: #c8b6db; --breadcrumbs-link-fg: #f5efff;
  --object-tools-bg: #46315f; --object-tools-hover-bg: #60417f;
  --message-success-bg: #18382f; --message-warning-bg: #413321; --message-error-bg: #432434;
  --sonder-row-a: #1a142e; --sonder-row-b: #29203e; --sonder-row-border: #49395e;
}
#header { border-bottom: 1px solid #49395e; }
#header #branding a { color: #f5efff; }
#content .module, #nav-sidebar { background-color: #1a142e; }
#content .module caption, #content .module h2 { background-color: #302044; }
.inline-group .inline-related:not(.tabular):not(.empty-form) {
  border-color: var(--sonder-row-border);
}
.inline-group .inline-related:not(.tabular):not(.empty-form):nth-of-type(odd),
#result_list tbody tr:nth-child(odd),
.inline-group .tabular tbody tr.form-row:nth-of-type(odd) {
  --body-bg: var(--sonder-row-a); background-color: var(--sonder-row-a);
}
.inline-group .inline-related:not(.tabular):not(.empty-form):nth-of-type(even),
#result_list tbody tr:nth-child(even),
.inline-group .tabular tbody tr.form-row:nth-of-type(even) {
  --body-bg: var(--sonder-row-b); background-color: var(--sonder-row-b);
}
#result_list tbody tr.selected { background-color: var(--selected-row); }
#result_list tbody td, #result_list tbody th,
.inline-group .tabular tbody tr.form-row td { background-color: inherit; }
@media(max-width:1050px) { .login-art { width: 190px; margin: 0 auto; } }
@media(max-width:700px) {
  .login-art { width: 150px; }
  .sidebar { background: #110c22; }
}