/* Telegram passes its theme as --tg-theme-* variables; the fallbacks are for a plain browser,
   which is also where the sign-in pages open. */
:root {
  color-scheme: light dark;
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #1c1c1e);
  --hint: var(--tg-theme-hint-color, #8e8e93);
  --link: var(--tg-theme-link-color, #2481cc);
  --button: var(--tg-theme-button-color, #2481cc);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --surface: var(--tg-theme-secondary-bg-color, #f0f2f5);
  --section: var(--tg-theme-section-bg-color, var(--bg));
  --danger: var(--tg-theme-destructive-text-color, #d14836);
  --line: color-mix(in srgb, var(--hint) 25%, transparent);
  /* Room for the iPhone's home indicator, from the browser or from Telegram. */
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --tabs-height: 62px;
  /* From the logo: a midnight sky, royal-blue swirls, starlight gold and the paper plane's white. */
  --night: #070b1f;
  --deep: #0f1a3d;
  --royal: #3a6ee8;
  --royal-deep: #2747b5;
  --gold: #f4c76b;
  --amber: #b9791c;
  --paper: #f7f1e3;
  --accent: var(--royal);
  --accent-soft: color-mix(in srgb, var(--royal) 14%, transparent);
  /* As text, the accents are deeper on a light page and lighter on a dark one: 4.5:1 or more on the page, its
     cards and the tinted tags. */
  --gold-text: #8f5c10;
  --accent-text: #2a56c6;
  --glow: 0 6px 18px color-mix(in srgb, var(--royal) 35%, transparent);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Dark: in the Mini App, whenever Telegram is (data-theme, set by common.js), whatever the phone is; on plain
   pages (the sign-ins), when the phone is. */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--tg-theme-bg-color, #17212b);
  --text: var(--tg-theme-text-color, #f5f5f5);
  --link: var(--tg-theme-link-color, #6ab3f3);
  --surface: var(--tg-theme-secondary-bg-color, #232e3c);
  --accent: #5b8bff;
  --accent-soft: color-mix(in srgb, #5b8bff 18%, transparent);
  --gold-text: var(--gold);
  --accent-text: #7aa2ff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: var(--tg-theme-bg-color, #17212b);
    --text: var(--tg-theme-text-color, #f5f5f5);
    --link: var(--tg-theme-link-color, #6ab3f3);
    --surface: var(--tg-theme-secondary-bg-color, #232e3c);
    --accent: #5b8bff;
    --accent-soft: color-mix(in srgb, #5b8bff 18%, transparent);
    --gold-text: var(--gold);
    --accent-text: #7aa2ff;
  }
}

[hidden] {
  display: none !important;
}

/* Nothing may stick out sideways, even for a moment: a page sliding in from the side would make the
   page wider than the screen, and phone browsers then shift the fixed tab bar. "clip", unlike "hidden",
   leaves Home's banner able to stick to the top. */
html,
body {
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 16px calc(var(--tabs-height) + var(--safe-bottom) + 24px);
}

h1 {
  font-size: 1.5rem;
  margin: 4px 0 16px;
  letter-spacing: -0.01em;
}

/* A tab's title, with the logo beside it. */
.title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 16px;
}

.title-row h1 {
  margin: 0;
}

.mini-logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent), 0 2px 10px color-mix(in srgb, var(--royal) 40%, transparent);
}

h2 {
  font-size: 1.05rem;
  margin: 20px 0 8px;
}

a {
  color: var(--link);
}

.hint,
.notes {
  color: var(--hint);
  font-size: 0.9rem;
}

.notes {
  padding-inline-start: 20px;
}

.text {
  white-space: pre-line;
}

.empty {
  color: var(--hint);
  text-align: center;
  padding: 24px 0;
}

.notice,
#status:not(:empty) {
  white-space: pre-line;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
}

.notice.error {
  color: var(--danger);
}

/* --- the tabs at the bottom --- */

.tabs {
  position: fixed;
  isolation: isolate;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-around;
  height: var(--tabs-height);
  padding-bottom: var(--safe-bottom);
  /* Solid, with no backdrop blur, and on a layer of its own: phone browsers can stop drawing a fixed,
     blurred bar while the page under it slides, until the page is scrolled. */
  background: var(--section);
  border-top: 1px solid var(--line);
  z-index: 10;
  transform: translateZ(0);
  will-change: transform;
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  position: relative;
  color: var(--hint);
  text-decoration: none;
  font-size: 0.75rem;
  min-width: 0; /* equal tabs, however long a label */
  transition: color 0.25s var(--ease);
}

/* A label longer than its tab ("Einstellungen" among five on a small phone) ends in "…" rather than being cut
   off at both edges. Screen readers still read all of it. */
.tab-label {
  max-width: calc(100% - 8px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A fixed box, so the icon grows around its own centre whatever the emoji's width. */
.tab-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 24px;
  font-size: 1.3rem;
  line-height: 1;
  filter: grayscale(1);
  opacity: 0.7;
  transform-origin: center;
  transition: transform 0.35s var(--spring), filter 0.25s, opacity 0.25s;
}

.tab.active {
  color: var(--accent-text);
  font-weight: 600;
}

.tab.active .tab-icon {
  filter: none;
  opacity: 1;
  transform: scale(1.12);
}

/* A glowing pill glides to the open tab (placed by movePill in app.js). */
.tab-pill {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--royal) 18%, transparent), color-mix(in srgb, var(--gold) 14%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
  opacity: 0;
  z-index: -1;
  transition: transform 0.5s var(--spring), width 0.5s var(--spring), height 0.3s, opacity 0.3s;
}

.tab-pill.shown {
  opacity: 1;
}

/* A star of gold marks the open tab. */
.tab::before {
  content: "";
  position: absolute;
  top: 5px;
  left: calc(50% - 2px); /* centred explicitly: older phone browsers put it at the start otherwise */
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s, transform 0.4s var(--spring);
}

.tab.active::before {
  opacity: 1;
  transform: scale(1);
}

.tab:active .tab-icon {
  transform: scale(0.88);
}

/* --- cards (Home, Connections, Admin) --- */

.card {
  display: block;
  margin: 0 0 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.card h2 {
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--hint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.card p {
  margin: 4px 0;
}

.card-link:active {
  transform: scale(0.98);
}

@media (hover: hover) {
  .card-link:hover,
  .activity:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow);
  }
}

.big {
  font-size: 1.25rem;
  font-weight: 600;
}

.chevron {
  color: var(--hint);
}

[dir="rtl"] .chevron {
  transform: scaleX(-1);
}

.bar {
  height: 6px;
  margin: 8px 0 2px;
  border-radius: 3px;
  background: var(--bg);
  overflow: hidden;
}

.bar .fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--royal), var(--gold));
  transform-origin: left center;
  animation: grow-x 0.9s var(--ease) backwards;
}

[dir="rtl"] .bar .fill {
  transform-origin: right center;
  background: linear-gradient(270deg, var(--royal), var(--gold));
}

.bar .fill.full {
  background: var(--danger);
}

.status-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--hint);
}

.dot.ok {
  background: #2ea043;
  box-shadow: 0 0 0 3px color-mix(in srgb, #2ea043 22%, transparent);
  animation: pulse 2.4s ease-in-out infinite;
}

.dot.bad {
  background: var(--danger);
}

/* --- the Settings list --- */

.menu {
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

.menu-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.menu-row:last-child {
  border-bottom: 0;
}

.menu-row {
  transition: background 0.2s;
}

.menu-row:active {
  background: var(--accent-soft);
}

.menu-icon {
  font-size: 1.2rem;
}

.menu-label {
  flex: 1;
}

.menu-value {
  color: var(--hint);
  font-size: 0.9rem;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- lists of things --- */

.list,
.plain {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}

.item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.card .item:last-child {
  border-bottom: 0;
}

.item-main {
  flex: 1;
  min-width: 0;
}

.item-meta {
  color: var(--hint);
  font-size: 0.85rem;
}

/* a shared list's items: a tick box, the item (struck through once ticked), and ✕ */
.list-item .tick,
body.cosmic .list-item .tick {
  background: none;
  box-shadow: none;
  border: 0;
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 4px;
  min-width: 44px;
  min-height: 44px;
}

.item-text.done {
  text-decoration: line-through;
  color: var(--hint);
}

.group {
  color: var(--hint);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.grow {
  flex: 1;
  margin: 0;
}

/* --- forms and buttons --- */

label {
  display: block;
  margin: 12px 0 4px;
  font-weight: 600;
}

input,
select {
  box-sizing: border-box;
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Searching looks unlike the fields you type something new into: filled, with a magnifier. */
.search {
  margin: 12px 0 4px;
  border-color: transparent;
  background: var(--surface) no-repeat 12px center / 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
  padding-inline-start: 36px;
}

[dir="rtl"] .search {
  background-position: right 12px center;
}

.row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.row input {
  flex: 1;
  min-width: 0;
}

button,
.button-link {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  padding: 10px 18px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--royal), var(--royal-deep));
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--glow);
  transition: transform 0.18s var(--ease), box-shadow 0.25s, filter 0.2s;
}

button:active:not(:disabled),
.button-link:active {
  transform: scale(0.96);
}

.button-link {
  margin-top: 12px;
}

button.wide {
  display: block;
  width: 100%;
  margin-top: 14px;
}

button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Small to look at, but 44px to tap, like everything tappable. */
button.small {
  min-width: 44px;
  min-height: 44px;
  padding: 4px 10px;
  font-size: 0.85rem;
  flex-shrink: 0;
}

button.secondary {
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

.card button.secondary,
.card .chip:not(.on),
.card input {
  background: var(--bg);
}

button.danger {
  background: var(--danger);
  color: #ffffff;
  box-shadow: none;
}

.hint-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.9rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.chip {
  min-height: 44px;
  padding: 6px 14px;
  border-radius: 22px;
  font-weight: 400;
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
  transition: background 0.25s, color 0.25s, transform 0.3s var(--spring);
}

.chip.on {
  background: linear-gradient(135deg, var(--royal), var(--royal-deep));
  color: #ffffff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent);
  animation: pop 0.35s var(--spring);
}

.choices {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}

.choice {
  width: 100%;
  margin: 4px 0;
  text-align: start;
  overflow-wrap: anywhere;
  background: var(--surface);
  color: var(--text);
  font-weight: 400;
  box-shadow: none;
}

.choice.on {
  outline: 2px solid var(--gold);
}

/* --- Admin --- */

.person-title {
  margin-bottom: 2px;
}

.tag {
  margin-inline-start: 8px;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.8rem;
  background: var(--bg);
  color: var(--hint);
}

/* --- the notice that a change was saved, above the tabs --- */

.toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(var(--tabs-height) + var(--safe-bottom) + 12px);
  margin: 0 auto;
  max-width: 600px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--text);
  color: var(--bg);
  white-space: pre-line;
  z-index: 20;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
  animation: toast-in 0.45s var(--spring);
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.toast[hidden] {
  display: none;
}

.toast-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--gold), #e0a240);
  color: var(--night);
  animation: pop 0.5s var(--spring) 0.1s backwards;
}

.toast.error .toast-icon {
  background: #ffffff;
  color: var(--danger);
}

.toast-text {
  flex: 1;
}

/* How long until it goes: a thin line draining away along the bottom. */
.toast-time {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--royal), var(--gold));
  transform-origin: left center;
  animation: drain linear forwards;
}

@keyframes drain {
  to { transform: scaleX(0); }
}

.toast.error {
  background: var(--danger);
  color: #ffffff;
}

/* --- Tasks: rows that open, and the form --- */

.item-link {
  color: inherit;
  text-decoration: none;
}

.item-link:active {
  opacity: 0.6;
}

a.button-link.wide-link {
  display: block;
  margin: 0 0 8px;
  text-align: center;
}

textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 84px;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
}

/* A choice of a few, side by side: the selected one filled. */
.segments {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--surface);
}

/* Six ways to repeat: two rows of three, so the longer names fit on a phone. */
.segments.repeats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.segment {
  flex: 1;
  padding: 8px 6px;
  font-weight: 500;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  transition: background 0.25s, box-shadow 0.25s;
}

.segment.on {
  background: var(--bg);
  color: var(--text);
  font-weight: 700;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 18%, transparent);
}

.task-form .row input {
  flex: 1;
}

.task-form > .hint {
  margin: 6px 0 12px;
}

button.danger.wide {
  margin-top: 10px;
}

/* --- Explore: rows of cards to swipe through --- */

.shelf {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px; /* cards snap in line with the page, not against the screen's edge */
  margin: 0 -16px 8px;
  padding: 2px 16px 10px;
  scrollbar-width: none;
}

.shelf::-webkit-scrollbar {
  display: none;
}

.activity {
  flex: 0 0 62%;
  max-width: 230px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.activity:active {
  transform: scale(0.97);
}

.activity.locked {
  opacity: 0.65;
}

.activity-icon {
  font-size: 1.7rem;
  line-height: 1.2;
}

.activity-title {
  font-size: 1rem;
}

.activity-about {
  flex: 1;
  color: var(--hint);
  font-size: 0.85rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.badge {
  align-self: flex-start;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  background: var(--bg);
  color: var(--hint);
}

.activity-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.activity-head h1 {
  margin: 0;
}

.big-icon {
  font-size: 2.6rem;
}

/* --- Admin: usage --- */

h3 {
  font-size: 0.95rem;
  margin: 18px 0 6px;
}

.section-break {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.filters .segments {
  flex: 1;
  min-width: 140px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.stat {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
}

.stat-label {
  color: var(--hint);
  font-size: 0.8rem;
}

.stat-value {
  font-size: 1.4rem;
  font-weight: 600;
}

/* A column chart: an axis, a plot with hairline gridlines, then the day labels under the plot. */
.chart {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: 150px auto;
  column-gap: 6px;
}

.chart-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  color: var(--hint);
  font-size: 0.75rem;
  line-height: 1;
}

.chart-plot {
  position: relative;
}

.chart-grid {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}

.chart-columns {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.chart-col {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.chart-bar {
  position: relative;
  width: 100%;
  max-width: 24px;
  min-height: 0;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--royal), var(--royal-deep));
  transform-origin: bottom center;
  animation: grow-y 0.7s var(--ease) backwards;
}

.chart-col.lifted .chart-bar,
.chart-col:focus-visible .chart-bar {
  filter: brightness(1.15);
  outline: 2px solid var(--text);
  outline-offset: 1px;
}

/* A picked day (tapped): it stays marked, and the other days step back, until it's tapped again. */
.chart-col.selected .chart-bar {
  filter: brightness(1.15);
  outline: 2px solid var(--text);
  outline-offset: 1px;
}

.chart.picked .chart-col:not(.selected) .chart-bar {
  opacity: 0.45;
  transition: opacity 0.2s var(--ease);
}

/* Under the chart: the picked day, or the whole range. */
.usage-detail {
  margin-top: 14px;
}

.detail-head {
  margin-bottom: 8px;
  font-weight: 600;
}

.chart-value {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 2px;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.chart-tip {
  position: absolute;
  top: -6px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.8rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

.chart-labels {
  display: flex;
  gap: 2px;
  margin-top: 4px;
  color: var(--hint);
  font-size: 0.75rem;
}

.chart-labels span {
  flex: 1;
  text-align: center;
  white-space: nowrap;
}

.table-view {
  margin-top: 8px;
  font-size: 0.85rem;
}

.table-view summary {
  color: var(--link);
  cursor: pointer;
}

.table-view table {
  width: 100%;
  margin-top: 6px;
  border-collapse: collapse;
}

.table-view th,
.table-view td {
  padding: 4px 6px;
  text-align: end;
  border-bottom: 1px solid var(--line);
}

.table-view th:first-child,
.table-view td:first-child {
  text-align: start;
}

/* Feedback (Admin → Feedback) */
.feedback-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.feedback.done {
  opacity: 0.7;
}

/* A newer version is out (Admin → Health) */
.update-card {
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
}

.update-card .changes {
  margin: 8px 0;
  padding-left: 20px;
}

/* This month's spending against the budget (Admin → Usage) */
.budget {
  margin-top: 12px;
}

.meter {
  height: 10px;
  margin: 10px 0 2px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--hint) 18%, transparent);
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--royal), var(--gold));
  transition: width 0.6s var(--ease);
}

.meter.near .meter-fill {
  background: var(--gold);
}

.meter.over .meter-fill {
  background: var(--danger);
}

.ranking {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ranking li {
  display: grid;
  grid-template-columns: minmax(0, 38%) 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
}

.rank-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-track {
  height: 10px;
  border-radius: 0 4px 4px 0;
  background: var(--surface);
}

.rank-fill {
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(90deg, var(--royal), var(--gold));
  transform-origin: left center;
  animation: grow-x 0.9s var(--ease) backwards;
}

.rank-value {
  color: var(--hint);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* --- the Danger zone --- */

.danger-title {
  margin-top: 28px;
  color: var(--danger);
}

.danger-row {
  color: var(--danger);
  font-weight: 600;
}

.erase-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.erase-choice {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
}

.erase-choice.on {
  outline: 2px solid var(--danger);
}

/* --- the welcome --- */

.progress {
  display: flex;
  gap: 6px;
  margin: 4px 0 2px;
}

.dot-step {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--surface);
  transition: background 0.4s var(--ease), box-shadow 0.4s, flex-basis 0.4s var(--ease);
}

.dot-step.done {
  background: linear-gradient(90deg, var(--royal), var(--gold));
  box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 55%, transparent);
}

.step-count {
  margin: 0 0 10px;
  font-size: 0.8rem;
}

.tour-card {
  margin: 12px 0 16px;
  padding: 28px 20px;
  border-radius: 18px;
  background: var(--surface);
  text-align: center;
}

.tour-card h2 {
  margin: 8px 0;
  font-size: 1.3rem;
}

.tour-icon {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0 auto 6px;
  border-radius: 50%;
  font-size: 2.6rem;
  line-height: 1;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--royal) 55%, transparent), transparent 70%),
    color-mix(in srgb, var(--royal) 18%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent), 0 0 28px color-mix(in srgb, var(--royal) 45%, transparent);
  animation: float 4s ease-in-out infinite;
}

.tour-dots {
  justify-content: center;
  margin-bottom: 4px;
}

.tour-dots .dot-step {
  flex: 0 0 10px;
}

.tour-dots .dot-step.done {
  flex-basis: 28px;
}

.skip-link {
  display: block;
  margin-top: 14px;
  text-align: center;
  color: var(--hint);
}

/* --- motion: pages and their parts ease in --- */

.page > * {
  animation: rise 0.45s var(--ease) backwards;
}

.page > :nth-child(2) { animation-delay: 0.04s; }
.page > :nth-child(3) { animation-delay: 0.08s; }
.page > :nth-child(4) { animation-delay: 0.12s; }
.page > :nth-child(5) { animation-delay: 0.16s; }
.page > :nth-child(6) { animation-delay: 0.2s; }
.page > :nth-child(n + 7) { animation-delay: 0.24s; }

.choices li {
  animation: rise 0.45s var(--ease) backwards;
}

.choices li:nth-child(2) { animation-delay: 0.03s; }
.choices li:nth-child(3) { animation-delay: 0.06s; }
.choices li:nth-child(4) { animation-delay: 0.09s; }
.choices li:nth-child(5) { animation-delay: 0.12s; }
.choices li:nth-child(6) { animation-delay: 0.15s; }
.choices li:nth-child(n + 7) { animation-delay: 0.18s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes grow-x {
  from { transform: scaleX(0); }
}

@keyframes grow-y {
  from { transform: scaleY(0); }
}

@keyframes pop {
  0% { transform: scale(0.9); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes pulse {
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, #2ea043 0%, transparent); }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
}

@keyframes float {
  50% { transform: translateY(-6px); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

/* --- Home: a strip of night sky with the logo and the greeting --- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  padding: 18px 16px;
  border-radius: 20px;
  overflow: hidden;
  color: var(--paper);
  background:
    radial-gradient(120% 140% at 85% 0%, color-mix(in srgb, var(--gold) 28%, transparent), transparent 55%),
    radial-gradient(100% 120% at 0% 100%, color-mix(in srgb, var(--royal) 55%, transparent), transparent 60%),
    linear-gradient(160deg, var(--deep), var(--night));
  box-shadow: 0 10px 30px color-mix(in srgb, var(--night) 35%, transparent);
}

.hero h1 {
  margin: 0;
  color: var(--paper);
  font-size: 1.35rem;
}

.hero .hint {
  margin: 2px 0 0;
  color: color-mix(in srgb, var(--paper) 70%, transparent);
}

.hero-logo {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 70%, transparent), 0 0 24px color-mix(in srgb, var(--royal) 70%, transparent);
  animation: float 5s ease-in-out infinite;
}

.hero .star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px #ffffff;
  animation: twinkle 3s ease-in-out infinite;
}

/* --- the welcome: always the logo's night sky, whatever Telegram's theme --- */

body.cosmic {
  --bg: var(--night);
  --text: var(--paper);
  --hint: #a9b6dc;
  --surface: rgb(24 34 76 / 0.82); /* solid enough that stars don't show through the text */
  --section: var(--night);
  --line: rgb(255 255 255 / 0.14);
  --accent: var(--gold);
  --accent-soft: color-mix(in srgb, var(--gold) 20%, transparent);
  --gold-text: var(--gold);
  --accent-text: var(--gold);
  background: var(--night);
}

body.cosmic main {
  position: relative;
  z-index: 1;
}

body.cosmic .card,
body.cosmic .choice,
body.cosmic .tour-card,
body.cosmic input {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

body.cosmic input {
  background: rgb(14 22 54 / 0.85);
}

body.cosmic .notice {
  background: rgb(255 255 255 / 0.08);
}

body.cosmic button:not(.secondary):not(.choice):not(.chip) {
  background: linear-gradient(135deg, #ffd98a, var(--gold) 45%, #d99a3a);
  color: var(--night);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--gold) 40%, transparent);
}

body.cosmic .chip.on {
  background: linear-gradient(135deg, var(--royal), var(--royal-deep));
}

body.cosmic .skip-link {
  color: var(--hint);
}

/* The sky behind it: nebula glows that drift, stars that twinkle, now and then a shooting star. */
.sky {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--night);
}

.sky[hidden] {
  display: none;
}

.nebula {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 35% at 25% 30%, color-mix(in srgb, var(--royal) 45%, transparent), transparent 70%),
    radial-gradient(35% 30% at 75% 65%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 70%),
    radial-gradient(45% 40% at 60% 20%, color-mix(in srgb, #5a3fb0 30%, transparent), transparent 70%);
  filter: blur(10px);
  animation: drift 40s ease-in-out infinite alternate;
}

@keyframes drift {
  to { transform: translate(4%, -3%) rotate(8deg) scale(1.08); }
}

.sky .star {
  position: absolute;
  border-radius: 50%;
  background: #ffffff;
  animation: twinkle 3s ease-in-out infinite;
}

.sky .star.gold {
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold);
}

.shooting {
  position: absolute;
  top: 12%;
  left: 70%;
  width: 120px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #ffffff, transparent);
  opacity: 0;
  transform: rotate(-30deg);
  animation: shoot 9s ease-in 3s infinite;
}

@keyframes shoot {
  0% { opacity: 0; transform: rotate(-30deg) translateX(0); }
  2% { opacity: 1; }
  8% { opacity: 0; transform: rotate(-30deg) translateX(-420px); }
  100% { opacity: 0; transform: rotate(-30deg) translateX(-420px); }
}

/* The logo at the top of every step, in a turning ring of gold and blue. */
.emblem {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 8px auto 14px;
  animation: float 5s ease-in-out infinite;
}

.emblem.big {
  width: 148px;
  height: 148px;
  margin-top: 18px;
}

.emblem img {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border-radius: 50%;
  box-shadow: 0 0 40px color-mix(in srgb, var(--royal) 65%, transparent);
}

.emblem::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--gold), transparent 30%, var(--royal) 55%, transparent 80%, var(--gold));
  animation: spin 9s linear infinite;
}

.emblem::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--night);
}

.emblem img {
  z-index: 1;
}

.brand {
  margin: 0 0 4px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
}

body.cosmic h1 {
  text-align: center;
}

body.cosmic .step-count,
body.cosmic .welcome-about {
  text-align: center;
}

body.cosmic .progress:not(.tour-dots) {
  max-width: 220px;
  margin: 0 auto 4px;
}

/* Moving between steps: forward slides in from the end, back from the start. */
body.cosmic .page.forward > * {
  animation-name: slide-in;
}

body.cosmic .page.backward > * {
  animation-name: slide-back;
}

@keyframes slide-in {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: none; }
}

@keyframes slide-back {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: none; }
}

[dir="rtl"] body.cosmic .page.forward > * {
  animation-name: slide-back;
}

[dir="rtl"] body.cosmic .page.backward > * {
  animation-name: slide-in;
}

.tour-card {
  border: 1px solid var(--line);
}

.tour-card.enter {
  animation: card-in 0.5s var(--ease) backwards;
}

@keyframes card-in {
  from { opacity: 0; transform: translateX(40px) rotate(2deg); }
  to { opacity: 1; transform: none; }
}

/* Lift-off at the end of the tour: the paper plane crosses the sky, stars burst behind it. */
.liftoff {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.liftoff .plane {
  position: absolute;
  left: -60px;
  top: 70%;
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--gold) 80%, transparent));
  animation: fly 1.3s cubic-bezier(0.45, 0, 0.25, 1) forwards;
}

@keyframes fly {
  0% { transform: translate(0, 0) rotate(-10deg) scale(0.8); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(calc(100vw + 120px), -55vh) rotate(-28deg) scale(1.15); opacity: 1; }
}

.liftoff .spark {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
  animation: burst 1s var(--ease) forwards;
}

@keyframes burst {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}

/* For people who'd rather things didn't move: everything appears at once, nothing loops. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
  }

  .shooting,
  .liftoff {
    display: none;
  }
}

/* --- more life after the welcome --- */

/* The touch ripple (common.js): a soft circle spreading from the finger. */
button,
.card-link,
.menu-row,
.activity,
.tab,
.item-link,
.button-link {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.18;
  transform: scale(0);
  pointer-events: none;
  animation: ripple 0.6s var(--ease) forwards;
}

@keyframes ripple {
  to { transform: scale(1); opacity: 0; }
}

/* Moving between tabs and pages: the whole page glides in from the side it came from (the welcome
   slides each part instead, above). */
body:not(.cosmic) .page.forward {
  animation: page-forward 0.45s var(--ease) backwards;
}

body:not(.cosmic) .page.backward {
  animation: page-backward 0.45s var(--ease) backwards;
}

@keyframes page-forward {
  from { transform: translateX(36px); }
}

@keyframes page-backward {
  from { transform: translateX(-36px); }
}

[dir="rtl"] body:not(.cosmic) .page.forward {
  animation-name: page-backward;
}

[dir="rtl"] body:not(.cosmic) .page.backward {
  animation-name: page-forward;
}

/* A chart's columns are buttons too, but their value labels sit above them. */
.chart-col {
  overflow: visible;
}

/* While a page loads: shimmering shapes. */
.bone {
  border-radius: 16px;
  margin: 0 0 12px;
  background: linear-gradient(100deg, var(--surface) 30%, color-mix(in srgb, var(--surface) 55%, var(--bg)) 50%, var(--surface) 70%);
  background-size: 300% 100%;
  animation: shimmer 1.3s linear infinite;
}

.bone-title {
  width: 55%;
  height: 34px;
  margin-bottom: 18px;
}

.bone-card {
  height: 96px;
}

@keyframes shimmer {
  from { background-position: 100% 0; }
  to { background-position: -50% 0; }
}

/* Lists come in one after another. */
.menu-row,
.list > li,
.plain > li {
  animation: rise 0.45s var(--ease) backwards;
}

.menu-row:nth-child(2), .list > li:nth-child(2), .plain > li:nth-child(2) { animation-delay: 0.04s; }
.menu-row:nth-child(3), .list > li:nth-child(3), .plain > li:nth-child(3) { animation-delay: 0.08s; }
.menu-row:nth-child(4), .list > li:nth-child(4), .plain > li:nth-child(4) { animation-delay: 0.12s; }
.menu-row:nth-child(5), .list > li:nth-child(5), .plain > li:nth-child(5) { animation-delay: 0.16s; }
.menu-row:nth-child(6), .list > li:nth-child(6), .plain > li:nth-child(6) { animation-delay: 0.2s; }
.menu-row:nth-child(n + 7), .list > li:nth-child(n + 7), .plain > li:nth-child(n + 7) { animation-delay: 0.24s; }

.menu-row .menu-icon {
  transition: transform 0.35s var(--spring);
}

.menu-row:active .menu-icon {
  transform: scale(1.2) rotate(-8deg);
}

/* Home's banner: drifting glows, a shooting star, and it shrinks into a slim bar as the page scrolls. */
.hero {
  --shrink: 0;
  position: sticky;
  top: 8px;
  z-index: 5;
  padding: calc(18px - 8px * var(--shrink)) 16px;
  transition: box-shadow 0.3s;
}

.hero-nebula {
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(30% 40% at 30% 40%, color-mix(in srgb, var(--royal) 55%, transparent), transparent 70%),
    radial-gradient(25% 35% at 75% 60%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 70%);
  animation: drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}

.hero-shooting {
  top: 18%;
  left: 85%;
  width: 70px;
  animation-duration: 7s;
  animation-delay: 1.5s;
}

.hero > :not(.hero-nebula):not(.shooting):not(.star) {
  position: relative;
}

.hero-logo {
  scale: calc(1 - 0.32 * var(--shrink));
  transition: scale 0.1s linear;
}

.hero h1 {
  font-size: calc(1.35rem - 0.25rem * var(--shrink));
}

/* Today's use as a ring that fills, gold to blue, with the share in the middle. */
.gauge-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ring-box {
  position: relative;
  width: 84px;
  height: 84px;
  flex-shrink: 0;
}

.ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring circle {
  fill: none;
  stroke-width: 9;
}

.ring-track {
  stroke: var(--line);
}

.ring-arc {
  stroke: url(#ring-colours);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: var(--to);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--gold) 55%, transparent));
  animation: ring-fill 1.1s var(--ease) backwards;
}

.ring.full .ring-arc {
  stroke: var(--danger);
}

@keyframes ring-fill {
  from { stroke-dashoffset: 100; }
}

.ring-share {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.big,
.stat-value {
  font-variant-numeric: tabular-nums;
}

/* The usage bar has a sheen running over it now and then. */
.bar .fill {
  position: relative;
  overflow: hidden;
}

.bar .fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.55), transparent);
  transform: translateX(-100%);
  animation: sheen 3.5s ease-in-out 1s infinite;
}

@keyframes sheen {
  30%, 100% { transform: translateX(100%); }
}

/* Explore: the cards fully in view stand forward, the ones at the edge sink back (view-explore.js). */
.activity {
  scale: calc(0.9 + 0.1 * var(--focus, 1));
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), scale 0.35s var(--ease), filter 0.35s;
  filter: saturate(calc(0.5 + 0.5 * var(--focus, 1)));
}

.activity-icon {
  display: inline-block;
  /* As wide as the emoji, not the card (a column's items stretch): it turns and grows around itself. */
  align-self: flex-start;
  transform-origin: center;
  transition: transform 0.4s var(--spring);
}

.activity:active .activity-icon,
.activity:hover .activity-icon {
  transform: scale(1.18) rotate(-6deg);
}

.page > h2 {
  position: relative;
}

/* Stat tiles and cards get a faint glow in the logo's colours. */
.stat {
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  background:
    radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--royal) 10%, transparent), transparent 60%),
    var(--surface);
}

/* A star burst from a notice (Sky.burst). */
.burst {
  position: fixed;
  z-index: 25;
  pointer-events: none;
}

.burst .spark {
  position: absolute;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  animation: burst 0.8s var(--ease) forwards;
}

/* Behind everything: in dark mode, faint twinkling stars; in light mode, a soft glow of blue and gold at
   the top. (The welcome has its own sky.) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 15% 0%, color-mix(in srgb, var(--royal) 12%, transparent), transparent 70%),
    radial-gradient(50% 35% at 90% 5%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%);
}

/* The Mini App only: plain pages are too short for a sky. */
:root[data-theme="dark"] body::before {
  background:
    radial-gradient(1px 1px at 12% 18%, #ffffff 50%, transparent),
    radial-gradient(1px 1px at 37% 62%, #ffffff 50%, transparent),
    radial-gradient(1.5px 1.5px at 68% 24%, var(--gold) 50%, transparent),
    radial-gradient(1px 1px at 84% 71%, #ffffff 50%, transparent),
    radial-gradient(1px 1px at 22% 83%, #ffffff 50%, transparent),
    radial-gradient(1.5px 1.5px at 55% 41%, #ffffff 50%, transparent),
    radial-gradient(1px 1px at 91% 39%, #ffffff 50%, transparent),
    radial-gradient(1px 1px at 6% 52%, var(--gold) 50%, transparent),
    radial-gradient(1px 1px at 47% 9%, #ffffff 50%, transparent),
    radial-gradient(1px 1px at 74% 90%, #ffffff 50%, transparent),
    radial-gradient(60% 40% at 15% 0%, color-mix(in srgb, var(--royal) 16%, transparent), transparent 70%);
  opacity: 0.7;
  animation: twinkle-all 6s ease-in-out infinite;
}

@keyframes twinkle-all {
  50% { opacity: 0.35; }
}

body.cosmic::before {
  display: none;
}

main {
  position: relative;
}

/* --- Admin: requests to join, settings, health --- */

.count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 0.75rem;
  background: linear-gradient(135deg, var(--gold), #e0a240);
  color: var(--night);
  vertical-align: middle;
  animation: pop 0.5s var(--spring) 0.2s backwards;
}

.request .chips {
  margin-top: 0;
  flex-shrink: 0;
}

.admin-parts {
  margin-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}

/* Each sized to its label (People has room for its count); they scroll sideways on a narrow screen. */
.admin-parts .segment {
  flex: 1 0 auto;
  padding: 8px 10px;
  white-space: nowrap;
  font-size: 0.85rem;
}

.admin-parts .count-badge {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-inline-start: 4px;
  font-size: 0.75rem;
}

.admin-part {
  animation: rise 0.4s var(--ease) backwards;
}

.admin-part > h2:first-child {
  margin-top: 4px;
}

.setting .card-head {
  align-items: center;
  gap: 8px;
}

.setting-value {
  color: var(--accent-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.setting .segments {
  margin-top: 8px;
  max-width: 220px;
}

.setting-origin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 0.85rem;
}

/* A model's prices under its card (Admin → Bot → Models) */
.prices {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.prices summary {
  cursor: pointer;
  font-size: 0.9rem;
}

.price-form input {
  width: 0; /* three equal boxes beside the button, however narrow the phone */
}

.tag.changed {
  margin: 0;
  background: color-mix(in srgb, var(--gold) 25%, transparent);
  color: var(--gold-text);
}

.tag.starter {
  margin: 0;
  background: color-mix(in srgb, var(--royal) 16%, transparent);
  color: var(--accent-text);
  white-space: nowrap;
}

.health-card .status-line {
  margin-bottom: 10px;
}

.problem {
  align-items: flex-start;
  border-inline-start: 3px solid var(--gold);
  padding-inline-start: 10px;
  margin-bottom: 4px;
}

.problem.error,
.problem.critical {
  border-inline-start-color: var(--danger);
}

/* How the announcement will look in Telegram: a message bubble from the bot. */
.announce-preview {
  margin: 8px 0 4px;
  padding: 8px 12px 10px;
  max-width: 85%;
  border-radius: 16px 16px 16px 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: rise 0.3s var(--ease) backwards;
}

.announce-from {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-text);
}

/* The email form: a server's name and its port side by side (Settings → Connections → Email) */
.row input.port {
  flex: 0 0 5.5em;
}

/* --- Home's weather card: a background for the weather and the time of day, with a little motion --- */

.card.weather {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 128px;
  color: #ffffff;
  border: 0;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
}

.card.weather.loading,
.card.weather.wx-none {
  background: var(--surface);
  color: var(--text);
  text-shadow: none;
}

.card.weather.loading {
  min-height: 128px;
  animation: wx-loading 1.4s ease-in-out infinite;
}

@keyframes wx-loading {
  50% { opacity: 0.55; }
}

.weather .wx-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.wx-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wx-temp {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.wx-icon {
  font-size: 2.2rem;
  line-height: 1;
}

.card .wx-condition {
  margin: 6px 0 2px;
  font-size: 1.05rem;
  font-weight: 600;
}

.card .wx-place,
.card .wx-details {
  margin: 2px 0;
  font-size: 0.85rem;
  opacity: 0.9;
}

/* Skies */
.wx-day.wx-clear { background: radial-gradient(circle at 88% 12%, #fff3b0 0 9%, rgb(255 230 128 / 0.55) 16%, transparent 34%), linear-gradient(160deg, #2f7fd4, #79c2f0); }
.wx-night.wx-clear { background: radial-gradient(circle at 88% 14%, rgb(246 241 211 / 0.35), transparent 26%), linear-gradient(160deg, #081634, #22386a); }
.wx-day.wx-partly { background: radial-gradient(circle at 86% 14%, #fff1a8 0 8%, transparent 22%), linear-gradient(160deg, #3f86d0, #a8c8e6); }
.wx-night.wx-partly { background: linear-gradient(160deg, #111d38, #3a4968); }
.wx-day.wx-cloudy { background: linear-gradient(160deg, #75879b, #b5c1cd); }
.wx-night.wx-cloudy { background: linear-gradient(160deg, #222935, #454f5e); }
.wx-day.wx-fog { background: linear-gradient(180deg, #a3acb3, #d3d8dc); color: #1f2a33; text-shadow: none; }
.wx-night.wx-fog { background: linear-gradient(180deg, #394047, #5d656c); }
.wx-day.wx-drizzle,
.wx-day.wx-rain { background: linear-gradient(160deg, #3b5775, #6e8eae); }
.wx-night.wx-drizzle,
.wx-night.wx-rain { background: linear-gradient(160deg, #16212f, #32445b); }
.wx-day.wx-snow { background: linear-gradient(160deg, #9db6cf, #e4edf5); color: #1b2a3b; text-shadow: none; }
.wx-night.wx-snow { background: linear-gradient(160deg, #26354b, #5a7090); }
.wx-storm { background: linear-gradient(160deg, #1f2035, #4a4d6b); }

/* Motion: clouds drift, rain and snow fall, lightning flickers, stars twinkle */
.wx-partly .wx-scene,
.wx-cloudy .wx-scene,
.wx-fog .wx-scene {
  background:
    radial-gradient(ellipse 34% 22% at 22% 70%, rgb(255 255 255 / 0.32), transparent 70%),
    radial-gradient(ellipse 30% 18% at 62% 40%, rgb(255 255 255 / 0.26), transparent 70%),
    radial-gradient(ellipse 40% 24% at 95% 80%, rgb(255 255 255 / 0.22), transparent 70%);
  inset: 0 -10%; /* wider than the card, so drifting never shows its edge */
  animation: wx-drift 18s ease-in-out infinite alternate;
}

.wx-fog .wx-scene {
  filter: blur(6px);
}

@keyframes wx-drift {
  from { transform: translateX(-6%); }
  to { transform: translateX(6%); }
}

.wx-rain .wx-scene,
.wx-drizzle .wx-scene,
.wx-storm .wx-scene {
  background-image: repeating-linear-gradient(105deg, rgb(255 255 255 / 0.28) 0 1px, transparent 1px 11px);
  background-size: 100% 28px;
  animation: wx-fall 0.55s linear infinite;
  opacity: 0.7;
}

.wx-drizzle .wx-scene {
  opacity: 0.4;
  animation-duration: 0.9s;
}

@keyframes wx-fall {
  to { background-position: -8px 28px; }
}

.wx-storm .wx-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / 0.55);
  opacity: 0;
  animation: wx-flash 7s linear infinite;
}

@keyframes wx-flash {
  0%, 92%, 96%, 100% { opacity: 0; }
  93%, 95% { opacity: 1; }
}

.wx-snow .wx-scene {
  background-image:
    radial-gradient(circle, rgb(255 255 255 / 0.75) 1.5px, transparent 2px),
    radial-gradient(circle, rgb(255 255 255 / 0.45) 1px, transparent 1.5px);
  background-size: 38px 38px, 26px 26px;
  background-position: 0 0, 11px 7px;
  animation: wx-snowfall 6s linear infinite;
}

.wx-day.wx-snow .wx-scene {
  filter: drop-shadow(0 0 1px rgb(80 110 140 / 0.6));
}

@keyframes wx-snowfall {
  to { background-position: 8px 34px, 19px 29px; }
}

.wx-night.wx-clear .wx-scene,
.wx-night.wx-partly .wx-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgb(255 255 255 / 0.85) 1px, transparent 1.5px),
    radial-gradient(circle, rgb(255 255 255 / 0.55) 0.8px, transparent 1.2px);
  background-size: 47px 41px, 29px 33px;
  background-position: 5px 9px, 17px 3px;
  animation: twinkle 4s ease-in-out infinite;
}

/* Places to pick from as a city is typed */
.matches .item {
  padding: 0;
}

.match {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 10px 4px;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  text-align: start;
  font-weight: 400;
}

.match:active {
  background: var(--surface);
}

/* Spending (Home → Spending): the month and its arrows, a category per line with its bar, each entry's amount. */
.month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.spend-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.item-amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Galaxy (Home → Galaxy): the planet on a patch of night sky, its values, Stardust and upgrades. */
.galaxy-invite {
  background: radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--royal) 30%, transparent), transparent 60%),
    linear-gradient(160deg, var(--deep), var(--night));
  color: var(--paper);
  border-color: color-mix(in srgb, var(--gold) 35%, transparent);
}

.galaxy-invite .hint {
  color: #c3cbe6;
}

.galaxy-invite .chevron {
  color: var(--gold);
}

.galaxy-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.galaxy-row .big {
  margin: 0;
}

.planet-stage {
  display: grid;
  place-items: center;
  padding: 8px 0;
  margin: 0 -16px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--royal) 18%, transparent), transparent);
}

.planet-name,
.planet-words {
  text-align: center;
  margin: 4px 0;
}

.rename {
  margin: 8px 0 16px;
  text-align: center;
}

.rename summary {
  cursor: pointer;
  color: var(--link);
  font-size: 0.9rem;
  min-height: 44px;
  line-height: 44px;
}

.planet-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.planet-stat {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
}

.stardust-card .big {
  color: var(--gold-text);
  margin: 0;
}

/* Naming a planet: the name, 🎲 for another, and the button that keeps it. */
.naming .planet-stage {
  background: none;
}

.naming .name-form {
  margin-top: 12px;
}

/* The galaxy map (Galaxy → 🔭 Galaxy map): the galaxy, the observatory's scans, the planet tapped, and lists. */
.galaxy-canvas {
  display: block;
  margin: 0 auto;
  border-radius: 16px;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
}

.map-tap {
  text-align: center;
  margin: 6px 0 12px;
}

.map-scan {
  margin-bottom: 12px;
  text-align: center;
}

.map-detail {
  background: linear-gradient(160deg, var(--deep), var(--night));
  color: var(--paper);
}

.map-detail .hint {
  color: #c3cbe6;
}

.map-detail .planet-stage {
  background: none;
}

.map-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--text);
  text-align: start;
  font: inherit;
}

.map-row-text {
  display: flex;
  flex-direction: column;
}

.map-dot {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--paper) 40%, transparent);
}

/* A seasonal event (Galaxy): its line above the planet or the map */
.season-banner {
  text-align: center;
  margin: 4px 0 10px;
  font-weight: 600;
  color: var(--gold-text);
}

.map-trip {
  font-weight: 600;
}

.map-gift-title {
  text-align: center;
  margin: 16px 0 8px;
}

.map-gift {
  justify-content: center;
}

.map-detail .rename summary {
  color: var(--gold);
}

/* Collecting Stardust: gold buttons beside what's waiting, sparkles flying to the total, and the total's bump */
button.collect {
  background: linear-gradient(135deg, #ffd98a, var(--gold) 45%, #d99a3a);
  color: var(--night);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--gold) 40%, transparent);
  white-space: nowrap;
  animation: collect-glow 2.4s ease-in-out infinite;
}

button.collect.wide {
  display: block;
  width: 100%;
  margin: 4px 0 8px;
}

@keyframes collect-glow {
  50% {
    box-shadow: 0 4px 24px color-mix(in srgb, var(--gold) 70%, transparent);
  }
}

.spark {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  font-size: 1.15rem;
}

.stardust-card.pop {
  animation: stardust-pop 480ms var(--spring);
}

@keyframes stardust-pop {
  40% {
    transform: scale(1.06);
  }
}

.collect-hint {
  margin: 2px 0 0;
  font-weight: 600;
  color: var(--gold-text);
}

.galaxy-invite .collect-hint {
  color: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
  button.collect,
  .stardust-card.pop {
    animation: none;
  }
}