:root {
  color-scheme: dark;
  --bg: #0b0c10;
  --surface: #14161d;
  --surface-2: #1b1e27;
  --border: #2a2e3a;
  --text: #f5f6fa;
  --muted: #999fad;
  --accent: #a970ff;
  --accent-strong: #9147ff;
  --success: #38d996;
  --danger: #ff6577;
  --warning: #ffc857;
  --radius: 16px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

/* Public product and pricing pages. */
.public-page {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 8%, rgb(145 71 255 / 22%), transparent 32rem),
    radial-gradient(circle at 92% 38%, rgb(56 217 150 / 8%), transparent 26rem),
    #090a0e;
}

.public-shell,
.public-nav-shell,
.public-footer {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.public-header {
  position: sticky;
  z-index: 40;
  top: 0;
  border-bottom: 1px solid rgb(255 255 255 / 7%);
  background: rgb(9 10 14 / 78%);
  backdrop-filter: blur(18px);
}

.public-nav-shell {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 76px;
}

.public-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.public-nav a,
.public-footer a {
  padding: 9px 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.public-nav a:hover,
.public-footer a:hover { color: var(--text); }
.public-login { justify-self: end; }

.public-hero {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(460px, 1.12fr);
  align-items: center;
  min-height: min(760px, calc(100svh - 76px));
  gap: clamp(38px, 7vw, 92px);
  padding-block: 90px 110px;
}

.hero-copy h1,
.pricing-hero h1 {
  max-width: 760px;
  font-size: clamp(52px, 7vw, 92px);
  letter-spacing: -.065em;
  line-height: .93;
}

.hero-copy h1 span,
.pricing-hero h1 span {
  color: transparent;
  background: linear-gradient(105deg, #cba9ff 5%, var(--accent-strong) 54%, #6fe4b4);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-lead {
  max-width: 600px;
  margin: 26px 0 30px;
  color: #b7bbc6;
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.65;
}

.hero-actions .button { min-height: 50px; padding-inline: 21px; border-radius: 12px; }
.hero-note { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; color: var(--muted); font-size: 11px; }
.hero-note span { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 5px rgb(255 200 87 / 10%); }

.hero-product { position: relative; perspective: 1200px; }
.product-window {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 20px;
  background: #11131a;
  box-shadow: 0 45px 100px rgb(0 0 0 / 50%), 0 0 70px rgb(145 71 255 / 13%);
  transform: rotateY(-4deg) rotateX(2deg);
}

.product-window-bar { display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 15px; border-bottom: 1px solid var(--border); background: #171920; }
.product-window-bar i { width: 8px; height: 8px; border-radius: 50%; background: #3b3e48; }
.product-window-bar i:first-child { background: #ff6577; }
.product-window-bar i:nth-child(2) { background: #ffc857; }
.product-window-bar i:nth-child(3) { background: #38d996; }
.product-window-bar span { margin-left: auto; color: #6f7481; font-size: 10px; }
.product-preview { display: grid; gap: 12px; padding: clamp(20px, 3vw, 34px); }
.preview-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 13px; }
.preview-heading div { display: grid; gap: 4px; }
.preview-heading small { color: var(--accent); font-size: 9px; font-weight: 850; letter-spacing: .14em; }
.preview-heading strong { font-size: clamp(19px, 2.5vw, 28px); }
.preview-online { color: var(--success); font-size: 10px; font-weight: 750; }
.product-preview article { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: rgb(255 255 255 / 2%); }
.product-preview article div { display: grid; min-width: 0; gap: 4px; }
.product-preview article strong { font-size: 12px; }
.product-preview article small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.product-preview article b { color: var(--success); font-size: 11px; }
.preview-icon { display: grid; width: 38px; height: 38px; border-radius: 10px; place-items: center; color: #160d20; background: var(--accent); font-weight: 900; }
.preview-icon.alert { color: #061b13; background: var(--success); }
.preview-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.preview-stats span { display: grid; gap: 5px; padding: 12px; border-radius: 10px; background: #0d0e13; }
.preview-stats small { color: var(--muted); font-size: 8px; }
.preview-stats strong { font-size: 13px; }
.success-copy { color: var(--success); }
.hero-orbit { position: absolute; z-index: 0; border: 1px solid rgb(169 112 255 / 18%); border-radius: 50%; }
.orbit-one { inset: -17% -5% -17% 8%; transform: rotate(-14deg); }
.orbit-two { inset: -6% 12% -7% -10%; transform: rotate(18deg); }

.public-section { padding-block: 110px; border-top: 1px solid rgb(255 255 255 / 7%); }
.public-section-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 20px 60px; margin-bottom: 52px; }
.public-section-heading .eyebrow { grid-column: 1 / -1; margin-bottom: -6px; }
.public-section-heading h2,
.public-cta h2,
.faq-section h2 { margin: 0; font-size: clamp(34px, 5vw, 56px); line-height: 1; }
.public-section-heading > p:last-child { max-width: 500px; margin: 0; color: var(--muted); line-height: 1.7; }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.feature-grid article { min-height: 230px; padding: 28px; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(145deg, rgb(255 255 255 / 3%), transparent), #11131a; }
.feature-number { color: var(--accent); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.feature-grid h3 { margin: 54px 0 10px; font-size: 22px; }
.feature-grid p { max-width: 440px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

.public-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-block: 30px 120px; padding: 48px; border: 1px solid rgb(169 112 255 / 30%); border-radius: 22px; background: linear-gradient(120deg, rgb(145 71 255 / 17%), rgb(56 217 150 / 5%)); }
.public-cta p:last-child { max-width: 600px; margin: 16px 0 0; color: var(--muted); line-height: 1.6; }
.public-cta > .button { flex: 0 0 auto; min-height: 50px; padding-inline: 24px; }
.public-footer { display: flex; align-items: center; justify-content: space-between; min-height: 110px; border-top: 1px solid rgb(255 255 255 / 7%); }
.public-footer > div { display: grid; gap: 4px; }
.public-footer span { color: var(--muted); font-size: 11px; }

.pricing-hero { max-width: 920px; padding-block: 100px 56px; text-align: center; }
.pricing-hero h1 { margin-inline: auto; }
.pricing-hero > p:not(.eyebrow) { max-width: 690px; margin: 24px auto 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.launch-notice { display: inline-flex; align-items: center; gap: 9px; margin-top: 30px; padding: 8px 13px; border: 1px solid rgb(255 200 87 / 24%); border-radius: 999px; color: #c4c7d0; background: rgb(255 200 87 / 5%); font-size: 11px; }
.launch-notice span { color: var(--warning); font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 14px; padding-block: 35px 60px; }
.pricing-card { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 27px; min-height: 490px; padding: 29px; border: 1px solid var(--border); border-radius: 18px; background: #12141b; box-shadow: 0 26px 70px rgb(0 0 0 / 18%); }
.pricing-card.is-featured { border-color: rgb(169 112 255 / 62%); background: linear-gradient(160deg, rgb(145 71 255 / 14%), transparent 44%), #15151e; }
.plan-badge { position: absolute; top: 0; right: 24px; padding: 7px 11px; border-radius: 0 0 9px 9px; color: #170d22; background: var(--accent); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.plan-name { margin-bottom: 8px; font-size: 24px; font-weight: 830; }
.plan-audience { min-height: 42px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.plan-price { display: grid; gap: 4px; margin: 0; }
.plan-price strong { font-size: 49px; line-height: 1; }
.plan-price span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.pricing-card ul { display: grid; align-content: start; gap: 14px; margin: 0; padding: 0; list-style: none; color: #cdd0d8; font-size: 12px; }
.pricing-card li { position: relative; padding-left: 22px; }
.pricing-card li::before { position: absolute; left: 0; color: var(--success); content: "✓"; font-weight: 900; }
.pricing-card .button { width: 100%; }
.pricing-note { display: grid; grid-template-columns: auto 1fr; gap: 22px; padding: 24px 28px; border: 1px solid var(--border); border-radius: 14px; background: rgb(255 255 255 / 2%); }
.pricing-note strong { color: var(--warning); }
.pricing-note p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.faq-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; padding-block: 120px; }
.faq-list { border-top: 1px solid var(--border); }
.faq-list details { padding: 18px 2px; border-bottom: 1px solid var(--border); }
.faq-list summary { position: relative; padding-right: 30px; font-size: 15px; font-weight: 760; list-style: none; }
.faq-list summary::after { position: absolute; right: 2px; color: var(--accent); content: "+"; font-size: 20px; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list p { margin: 12px 30px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

@media (max-width: 900px) {
  .public-hero { grid-template-columns: 1fr; min-height: auto; padding-block: 72px 100px; }
  .hero-copy { max-width: 720px; }
  .hero-product { width: min(640px, 100%); margin-inline: auto; }
  .pricing-grid { grid-template-columns: 1fr; width: min(610px, calc(100% - 48px)); }
  .pricing-card { min-height: auto; }
  .plan-audience { min-height: 0; }
}

@media (max-width: 620px) {
  .public-shell, .public-nav-shell, .public-footer { width: min(100% - 28px, 1180px); }
  .public-nav-shell { grid-template-columns: 1fr auto; min-height: 66px; }
  .public-nav { display: none; }
  .public-login { min-height: 38px; padding-inline: 13px; }
  .public-hero { gap: 54px; padding-block: 58px 78px; }
  .hero-copy h1, .pricing-hero h1 { font-size: clamp(42px, 14vw, 62px); }
  .hero-lead { font-size: 16px; }
  .hero-actions { display: grid; }
  .product-window { transform: none; }
  .product-preview { padding: 16px; }
  .product-preview article { grid-template-columns: 38px minmax(0, 1fr); }
  .product-preview article b { display: none; }
  .preview-stats { grid-template-columns: 1fr 1fr; }
  .preview-stats span:last-child { display: none; }
  .public-section { padding-block: 76px; }
  .public-section-heading, .feature-grid, .faq-section { grid-template-columns: 1fr; }
  .public-section-heading { gap: 16px; margin-bottom: 34px; }
  .feature-grid article { min-height: 200px; padding: 23px; }
  .feature-grid h3 { margin-top: 42px; }
  .public-cta { align-items: stretch; flex-direction: column; margin-bottom: 80px; padding: 28px 24px; }
  .public-footer { min-height: 100px; }
  .public-footer nav { display: none; }
  .pricing-hero { padding-block: 70px 35px; }
  .launch-notice { align-items: flex-start; flex-direction: column; border-radius: 13px; text-align: left; line-height: 1.5; }
  .pricing-grid { width: min(100% - 28px, 610px); }
  .pricing-card { padding: 24px; }
  .pricing-note { grid-template-columns: 1fr; gap: 8px; }
  .faq-section { gap: 38px; padding-block: 85px; }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 0%, rgb(145 71 255 / 18%), transparent 35rem),
    var(--bg);
}

a {
  color: inherit;
}

.topbar {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 0 4vw;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  background: rgb(11 12 16 / 88%);
  backdrop-filter: blur(18px);
}

.brand,
.topbar nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand {
  font-weight: 760;
  text-decoration: none;
}

.brand > span:last-child { display: grid; gap: 1px; }
.brand small { color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }

.brand-logo {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 10%);
}

.topbar nav a,
.telegram-shortcut,
.link-button {
  border: 0;
  color: var(--muted);
  background: none;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.topbar nav a:hover,
.telegram-shortcut:hover,
.link-button:hover {
  color: var(--text);
}

.topbar-navigation, .topbar-account, .primary-nav, .admin-nav { display: flex; align-items: center; }
.topbar-navigation { gap: 10px; margin-left: auto; }
.primary-nav, .admin-nav { gap: 4px !important; padding: 5px; border: 1px solid var(--border); border-radius: 12px; background: rgb(255 255 255 / 2%); }
.primary-nav a, .admin-nav a { padding: 8px 10px; border-radius: 8px; }
.primary-nav a:hover, .admin-nav a:hover { background: rgb(255 255 255 / 6%); }
.admin-nav > span { padding: 0 7px; color: var(--accent); font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.topbar-account { gap: 10px; margin-left: 16px; }
.telegram-shortcut { padding: 9px 12px; border-radius: 9px; color: #d8c4ff; background: rgb(169 112 255 / 10%); font-size: 12px; font-weight: 720; text-decoration: none; }
.pull-refresh {
  --pull-distance: 0px;
  position: fixed;
  z-index: 100;
  top: max(6px, env(safe-area-inset-top));
  left: 50%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: rgb(20 22 29 / 96%);
  box-shadow: 0 8px 28px rgb(0 0 0 / 34%);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-54px + var(--pull-distance)));
  transition: opacity .12s ease, color .12s ease;
}
.pull-refresh strong { font-size: 11px; white-space: nowrap; }
.pull-refresh-icon { display: inline-grid; width: 20px; height: 20px; place-items: center; color: var(--accent); font-size: 17px; transition: transform .15s ease; }
.pull-refresh.is-visible { opacity: 1; }
.pull-refresh.is-ready { color: var(--text); }
.pull-refresh.is-ready .pull-refresh-icon { transform: rotate(180deg); }
.pull-refresh.is-loading .pull-refresh-icon { animation: refresh-spin .65s linear infinite; }
@keyframes refresh-spin { to { transform: rotate(360deg); } }
.account-menu { position: relative; }
.account-menu summary { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; font-weight: 720; list-style: none; }
.account-menu summary::-webkit-details-marker { display: none; }
.user-avatar { display: grid; width: 30px; height: 30px; border-radius: 50%; place-items: center; color: #17111f; background: var(--accent); font-weight: 850; }
.menu-chevron { color: var(--muted); }
.account-popover { position: absolute; z-index: 30; top: calc(100% + 10px); right: 0; display: grid; width: 286px; gap: 4px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: #191b23; box-shadow: 0 18px 48px rgb(0 0 0 / 42%); }
.account-popover a, .account-popover .link-button { width: 100%; padding: 9px; border-radius: 8px; color: var(--text); text-align: left; text-decoration: none; }
.account-popover a:hover, .account-popover .link-button:hover { background: rgb(255 255 255 / 6%); }
.account-identity { display: grid; gap: 2px; padding: 5px 9px 9px; overflow-wrap: anywhere; }
.account-role { color: var(--muted); font-size: 11px; font-weight: 500; }
.account-telegram { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 9px; margin-bottom: 4px; border: 1px solid rgb(169 112 255 / 25%); background: rgb(169 112 255 / 7%); }
.account-telegram.is-connected { border-color: rgb(56 217 150 / 25%); background: rgb(56 217 150 / 6%); }
.account-telegram > span:last-child { display: grid; min-width: 0; gap: 2px; }
.account-telegram strong, .account-telegram small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-telegram small { color: var(--muted); font-size: 10px; font-weight: 500; }
.telegram-state-icon { display: grid; width: 28px; height: 28px; border-radius: 50%; place-items: center; color: #17111f; background: var(--accent); font-size: 16px; font-weight: 900; }
.account-telegram.is-connected .telegram-state-icon { background: var(--success); }

.user-pill {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
}

.page-shell {
  width: min(1260px, 92vw);
  margin: 0 auto;
  padding: 56px 0 96px;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 10px;
  font-size: clamp(34px, 5vw, 58px);
  letter-spacing: -0.045em;
  line-height: 0.98;
}

h2 {
  margin-bottom: 12px;
  letter-spacing: -0.025em;
}

.eyebrow {
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.muted {
  color: var(--muted);
}

.page-heading {
  margin-bottom: 32px;
}

.split-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.panel-card,
.account-card,
.auth-card,
.empty-state {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgb(255 255 255 / 3%), transparent),
    var(--surface);
  box-shadow: 0 24px 70px rgb(0 0 0 / 22%);
}

.auth-card {
  width: min(460px, 100%);
  margin: 7vh auto 0;
  padding: 36px;
}

.stacked-form,
.stacked-form label,
.settings-layout,
.settings-section > div:last-child {
  display: grid;
  gap: 18px;
}

label {
  display: grid;
  gap: 8px;
  color: #d9dce5;
  font-size: 13px;
  font-weight: 650;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  color: var(--text);
  background: var(--surface-2);
  font: inherit;
}

input,
select {
  min-height: 44px;
  padding: 0 12px;
}

textarea {
  padding: 12px;
  resize: vertical;
  line-height: 1.5;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(169 112 255 / 14%);
}

input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
  margin: 1px 0 0;
  accent-color: var(--accent-strong);
}

.button-row,
.toolbar,
.inline-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  background: var(--surface-2);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  filter: brightness(1.14);
}

.button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}

.button-primary {
  border-color: transparent;
  background: var(--accent-strong);
}

.button-success {
  border-color: transparent;
  color: #05271a;
  background: var(--success);
}

.button-danger {
  border-color: rgb(255 101 119 / 45%);
  color: var(--danger);
  background: rgb(255 101 119 / 8%);
}

.button-secondary {
  background: transparent;
}

.button-create-miner {
  border-color: rgb(56 217 150 / 48%);
  color: #071d15;
  background: var(--success);
}

.button-create-notifier {
  border-color: transparent;
  background: var(--accent-strong);
}

.account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 20px;
}

.account-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 18px;
  min-width: 0;
  padding: 24px;
  overflow: hidden;
}

.dashboard-object-card {
  position: relative;
  grid-template-rows: auto auto;
  gap: 13px;
  min-height: 150px;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease;
}

.dashboard-object-card:hover { border-color: rgb(169 112 255 / 55%); transform: translateY(-2px); }
.card-click-target { position: absolute; z-index: 1; inset: 0; border-radius: inherit; }
.dashboard-object-card > *:not(.card-click-target) { position: relative; z-index: 2; pointer-events: none; }
.dashboard-object-card .card-settings-link { pointer-events: auto; }
.dashboard-object-card .device-code-card-compact { pointer-events: auto; }
.dashboard-reorder-actions { display: none; }
.account-grid.is-reordering .dashboard-object-card { cursor: grab; touch-action: none; user-select: none; }
.account-grid.is-reordering .dashboard-object-card:active { cursor: grabbing; }
.account-grid.is-reordering .dashboard-object-card:hover { transform: none; }
.account-grid.is-reordering .card-click-target,
.account-grid.is-reordering .card-settings-link,
.account-grid.is-reordering .device-code-card-compact { pointer-events: none; }
.account-grid.is-reordering .card-corner-actions { visibility: hidden; }
.account-grid.is-reordering .dashboard-reorder-actions {
  position: absolute;
  z-index: 4;
  top: 13px;
  right: 13px;
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: auto;
}
.dashboard-reorder-actions button {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  place-items: center;
  color: var(--text);
  background: var(--surface-2);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
}
.dashboard-reorder-actions button:hover { border-color: rgb(169 112 255 / 58%); }
.dashboard-reorder-actions [data-order-drag] { color: var(--accent); cursor: grab; touch-action: none; }
.dashboard-reorder-actions [data-order-drag]:active { cursor: grabbing; }
.dashboard-object-card.is-dragging { z-index: 5; opacity: .18; border-color: var(--accent); pointer-events: none; }
.dashboard-object-card.is-dragging * { pointer-events: none !important; }
.dashboard-drag-ghost {
  position: fixed !important;
  z-index: 120;
  margin: 0 !important;
  opacity: .96;
  border-color: var(--accent) !important;
  box-shadow: 0 20px 54px rgb(0 0 0 / 48%);
  pointer-events: none !important;
  transform: rotate(.5deg) scale(1.015);
}
.dashboard-drag-ghost .dashboard-reorder-actions { display: none !important; }
.account-grid.is-reordering .dashboard-object-card .card-heading > div:first-child { padding-right: 102px; }
.card-corner-actions { display: flex; align-items: center; gap: 7px; }
.card-settings-link { display: grid; width: 31px; height: 31px; border: 1px solid var(--border); border-radius: 9px; place-items: center; color: var(--muted); background: var(--surface-2); font-size: 14px; text-decoration: none; }
.card-settings-link:hover { color: var(--text); border-color: rgb(169 112 255 / 55%); }
.dashboard-card-summary { display: grid; align-content: start; gap: 6px; color: var(--muted); font-size: 11px; }
.dashboard-card-summary > span { color: #d9dce5; font-weight: 700; }
.dashboard-card-summary p { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }

.miner-card {
  border-top: 2px solid var(--success);
}

.card-heading,
.section-heading,
.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.card-heading h2 {
  margin: 0;
  overflow-wrap: anywhere;
}

.card-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}

.card-kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card-owner {
  color: var(--text);
}

.card-kind {
  color: var(--accent);
}

.miner-card .card-kind {
  color: var(--success);
}

.miner-card-facts { display: grid; grid-template-columns: minmax(150px, 1.5fr) repeat(2, minmax(90px, .65fr)); border: 1px solid var(--border); border-radius: 11px; background: rgb(255 255 255 / 2%); }
.miner-card-facts > div { display: grid; gap: 5px; min-width: 0; padding: 13px 14px; }
.miner-card-facts > div + div { border-left: 1px solid var(--border); }
.miner-card-facts span, .miner-activity > span { color: var(--muted); font-size: 10px; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; }
.miner-card-facts strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.miner-activity { display: grid; align-content: start; gap: 8px; min-height: 72px; padding: 14px 16px; border-left: 2px solid rgb(56 217 150 / 55%); border-radius: 0 10px 10px 0; background: rgb(56 217 150 / 5%); }
.miner-activity p { display: -webkit-box; overflow: hidden; margin: 0; color: #c9cdd6; font: 12px/1.55 "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.card-actions .button:first-child { flex: 1 1 180px; }

.status {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status-running {
  border-color: rgb(56 217 150 / 35%);
  color: var(--success);
  background: rgb(56 217 150 / 8%);
}

.status-failed {
  border-color: rgb(255 101 119 / 35%);
  color: var(--danger);
  background: rgb(255 101 119 / 8%);
}

.status-stopping {
  color: var(--warning);
}

.mini-log,
#live-log {
  overflow: auto;
  margin: 0;
  border: 1px solid #252936;
  border-radius: 10px;
  color: #bbc1cd;
  background: #090a0e;
  font: 12px/1.55 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.mini-log {
  height: 116px;
  padding: 12px;
}

.empty-state {
  padding: 64px 28px;
  text-align: center;
}

.empty-state-actions {
  justify-content: center;
}

.empty-icon,
.section-number {
  color: var(--accent);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  font-weight: 800;
}

.toolbar {
  margin-bottom: 20px;
  padding: 16px;
}

.log-panel {
  padding: 24px;
}

#live-log {
  height: min(62vh, 680px);
  margin-top: 20px;
  padding: 18px;
}

.settings-layout {
  gap: 20px;
}

.settings-section {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  padding: 28px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.form-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.check-row {
  display: flex;
  align-items: flex-start;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgb(255 255 255 / 2%);
}

.check-row > span {
  display: grid;
  gap: 4px;
}

.check-row small {
  color: var(--muted);
  font-weight: 450;
  line-height: 1.4;
}

.setting-field {
  align-content: start;
}

.setting-field,
.check-row {
  position: relative;
}

.setting-label-line {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 7px;
  padding-right: 28px;
}

.setting-summary {
  min-height: 2.7em;
  color: var(--muted);
  font-weight: 450;
  line-height: 1.35;
}

.info-help {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-grid;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1px solid rgb(169 112 255 / 45%);
  border-radius: 50%;
  place-items: center;
  color: #d7c0ff;
  background: rgb(169 112 255 / 10%);
  font-size: 11px;
  font-weight: 800;
  cursor: help;
}

.check-row .info-help { top: 11px; right: 11px; }
.check-row .setting-label-line { padding-right: 24px; }

.info-popover {
  position: absolute;
  z-index: 80;
  top: calc(100% + 9px);
  right: 0;
  left: auto;
  display: none;
  width: min(330px, calc(100vw - 56px));
  padding: 11px 13px;
  border: 1px solid rgb(169 112 255 / 38%);
  border-radius: 10px;
  color: #e8e1f5;
  background: #20232d;
  box-shadow: 0 15px 45px rgb(0 0 0 / 45%);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.5;
}

.info-help:hover .info-popover,
.info-help:focus .info-popover,
.info-help:focus-within .info-popover {
  display: block;
}

fieldset {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

legend {
  padding: 0 8px;
  color: var(--muted);
  font-size: 12px;
}

.inline-options label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  font-size: 11px;
}

.priority-list,
.event-list {
  display: grid;
  gap: 9px;
}

.priority-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgb(255 255 255 / 2%);
}

.priority-row label {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.priority-row label > span {
  display: grid;
  gap: 3px;
}

.priority-row label small {
  color: var(--muted);
  font-weight: 450;
}

.button-small {
  min-height: 32px;
  padding: 0 10px;
}

.account-tabs {
  display: flex;
  gap: 8px;
  margin: 4px 0 20px;
  overflow-x: auto;
}

.account-tabs a {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.account-tabs a.active {
  border-color: var(--accent);
  color: var(--text);
  background: rgb(169 112 255 / 12%);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.metric-grid.compact {
  margin: 20px 0 0;
}

.metric-card {
  display: grid;
  gap: 7px;
  padding: 20px;
}

.metric-card span,
.metric-card small {
  color: var(--muted);
}

.metric-card strong {
  font-size: 24px;
}

.device-code-card {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  padding: 24px;
}

.device-code {
  font: 800 28px/1 "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.12em;
}

.device-code-card[hidden], .telegram-owner-state[hidden] { display: none !important; }
.device-code-copy ol { margin: 12px 0 0; padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.device-code-value, .device-code-actions { display: grid; gap: 9px; }
.device-code-value { min-width: 195px; padding: 16px; border: 1px solid rgb(169 112 255 / 35%); border-radius: 12px; background: rgb(169 112 255 / 8%); text-align: center; }
.device-code-value > span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.device-code-card-compact { grid-template-columns: 1fr auto; margin: 0; padding: 16px; }
.device-code-card-compact .eyebrow { margin-bottom: 8px; }
.device-code-card-compact .device-code { font-size: 22px; }
.device-code-card-compact time { display: block; margin-top: 7px; font-size: 11px; }

.authorization-success {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 15px 17px;
  border: 1px solid rgb(56 217 150 / 32%);
  border-radius: 13px;
  background: rgb(56 217 150 / 7%);
  animation: authorization-arrived .35s ease-out both;
}
.authorization-success[hidden] { display: none; }
.authorization-success > span:last-child { display: grid; gap: 3px; }
.authorization-success small { color: var(--muted); }
.authorization-success-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; place-items: center; color: #05271a; background: var(--success); font-size: 19px; font-weight: 900; box-shadow: 0 0 0 0 rgb(56 217 150 / 35%); animation: authorization-pulse 1.4s ease-out 2; }
@keyframes authorization-arrived { from { opacity: 0; transform: translateY(-8px); } }
@keyframes authorization-pulse { 50% { box-shadow: 0 0 0 10px rgb(56 217 150 / 0%); } }

.event-panel {
  padding: 24px;
}

.event-list {
  margin-top: 18px;
}

.event-list article {
  display: grid;
  grid-template-columns: 150px minmax(180px, 0.5fr) minmax(100px, 0.3fr) 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.event-list article p {
  margin: 0;
  color: var(--muted);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}

.tag-list span {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
}

.advanced-settings {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.advanced-settings > summary {
  font-weight: 740;
  cursor: pointer;
}

.advanced-settings[open] > summary {
  margin-bottom: 16px;
}

.advanced-settings-content,
.compact-check-grid {
  margin-bottom: 16px;
}

.standalone-field {
  max-width: 620px;
}

.default-settings-section {
  border-color: rgb(169 112 255 / 42%);
  background:
    linear-gradient(145deg, rgb(169 112 255 / 8%), transparent 52%),
    var(--surface);
}

.default-settings-intro,
.default-settings-note {
  padding: 14px 16px;
  border: 1px solid rgb(169 112 255 / 28%);
  border-radius: 11px;
  color: #d8c7f6;
  background: rgb(169 112 255 / 7%);
  line-height: 1.55;
}

.subsection-heading {
  margin-top: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.subsection-heading h3,
.subsection-heading p {
  margin-bottom: 6px;
}

.channel-section-heading {
  align-items: flex-start;
}

.channel-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.5fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgb(255 255 255 / 2%);
}

.streamer-list-heading,
.streamer-row-main {
  display: grid;
  grid-template-columns: 24px 34px minmax(150px, 1fr) minmax(210px, 0.7fr) auto;
  align-items: center;
  gap: 12px;
}

.streamer-list-heading {
  padding: 0 14px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.streamer-editor {
  display: grid;
  gap: 8px;
}

.streamer-edit-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgb(255 255 255 / 2%);
}

.streamer-edit-row:hover {
  border-color: rgb(169 112 255 / 32%);
}

.streamer-row-main {
  min-height: 62px;
  padding: 9px 12px;
}

.channel-select {
  display: grid;
  place-items: center;
}

.channel-position {
  color: var(--muted);
  font: 700 12px/1 "SFMono-Regular", Consolas, monospace;
  text-align: center;
}

.channel-row-actions,
.channel-bulk-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.button-icon {
  min-width: 32px;
  min-height: 32px;
  padding: 0;
}

.button-danger-quiet {
  border-color: rgb(255 101 119 / 25%);
  color: #ff9aa6;
  background: rgb(255 101 119 / 5%);
}

.button-danger-quiet:hover {
  border-color: rgb(255 101 119 / 55%);
  color: #fff;
  background: rgb(255 101 119 / 15%);
}

.streamer-row-identity a {
  color: #d8c7f6;
  font-weight: 780;
  text-decoration: none;
}

.streamer-row-identity a:hover {
  color: #fff;
  text-decoration: underline;
}

.settings-badge {
  justify-self: start;
  padding: 6px 9px;
  border: 1px solid rgb(56 217 150 / 25%);
  border-radius: 999px;
  color: var(--success);
  background: rgb(56 217 150 / 6%);
  font-size: 11px;
  font-weight: 720;
}

.settings-badge-custom {
  border-color: rgb(169 112 255 / 34%);
  color: #d5bfff;
  background: rgb(169 112 255 / 8%);
}

.empty-filter-result {
  padding: 24px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  text-align: center;
}

.event-filters { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(240px, 1.5fr) auto auto; align-items: end; gap: 10px; margin-top: 20px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: rgb(255 255 255 / 2%); }
.event-filters label { gap: 6px; }
.event-filters label > span { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.event-empty { padding: 36px 12px; text-align: center; }
.event-empty p { margin: 8px 0 0; }

.telegram-connection { margin: 4px 0 22px; }
.telegram-owner-state { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: rgb(255 255 255 / 2%); }
.telegram-owner-state.is-connected { border-color: rgb(56 217 150 / 28%); background: rgb(56 217 150 / 6%); }
.telegram-owner-state.is-missing { border-color: rgb(255 200 87 / 30%); background: rgb(255 200 87 / 6%); }
.telegram-owner-state > div { display: flex; align-items: flex-start; gap: 12px; }
.telegram-owner-state p { display: grid; gap: 5px; margin: 0; }
.telegram-owner-state p span { color: var(--muted); font-size: 12px; font-weight: 450; line-height: 1.45; }
.connection-dot { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 4px rgb(255 200 87 / 10%); }
.is-connected .connection-dot { background: var(--success); box-shadow: 0 0 0 4px rgb(56 217 150 / 10%); }
.field-fact { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 13px 14px; border: 1px solid var(--border); border-radius: 10px; }
.field-counter {
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.3;
  white-space: nowrap;
}
.field-counter.is-near-limit { color: var(--warning); }
.field-counter.is-over-limit { color: var(--danger); }
.field-fact span { color: var(--muted); }

.empty-channel-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 38px 24px;
  border: 1px dashed rgb(169 112 255 / 42%);
  border-radius: 12px;
  background: rgb(169 112 255 / 4%);
  text-align: center;
}

.empty-channel-state[hidden] {
  display: none;
}

.empty-channel-state strong {
  font-size: 18px;
}

.empty-channel-state p {
  max-width: 640px;
  margin: 0 0 6px;
  color: var(--muted);
  line-height: 1.55;
}

.channel-bulk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgb(255 255 255 / 2%);
}

.channel-select-all {
  display: flex;
  grid-template-columns: auto 1fr;
  flex-direction: row;
  align-items: center;
  gap: 7px;
}

.channel-bulk-actions {
  margin-left: auto;
}

.streamer-drawer {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr minmax(420px, 640px);
  pointer-events: none;
  visibility: hidden;
}

.streamer-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}

.streamer-drawer-backdrop {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  background: rgb(0 0 0 / 62%);
  cursor: default;
  transition: opacity 160ms ease;
}

.streamer-drawer.is-open .streamer-drawer-backdrop {
  opacity: 1;
}

.streamer-drawer-panel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  overflow: hidden;
  border-left: 1px solid var(--border);
  background: #11131a;
  box-shadow: -24px 0 80px rgb(0 0 0 / 45%);
  transform: translateX(100%);
  transition: transform 180ms ease;
}

.streamer-drawer.is-open .streamer-drawer-panel {
  transform: translateX(0);
}

.streamer-drawer-heading,
.streamer-drawer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.streamer-drawer-heading h2,
.streamer-drawer-heading p {
  margin-bottom: 0;
}

.streamer-drawer-content {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 24px;
  overflow-y: auto;
}

.streamer-drawer-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  border-bottom: 0;
  background: rgb(20 22 29 / 96%);
}

.streamer-drawer-actions .button-danger {
  margin-right: auto;
}

.default-settings-note {
  display: grid;
  gap: 4px;
  font-size: 12px;
}

.drawer-close {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  background: var(--surface-2);
  font: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.drawer-close:hover {
  color: var(--text);
}

.drawer-open {
  overflow: hidden;
}

.channel-dialog {
  width: min(620px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text);
  background: #14161d;
  box-shadow: 0 30px 100px rgb(0 0 0 / 55%);
}

.channel-dialog::backdrop {
  background: rgb(0 0 0 / 70%);
  backdrop-filter: blur(4px);
}

.channel-dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.channel-dialog-heading h2 {
  margin-bottom: 0;
}

.channel-import-preview {
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid rgb(56 217 150 / 24%);
  border-radius: 9px;
  color: var(--success);
  background: rgb(56 217 150 / 5%);
  font-size: 12px;
}

.channel-import-preview.has-errors {
  border-color: rgb(255 101 119 / 30%);
  color: #ffadb6;
  background: rgb(255 101 119 / 6%);
}

.channel-dialog-actions {
  justify-content: flex-end;
  margin-top: 18px;
}

.security-note {
  padding: 12px 14px;
  border-left: 3px solid var(--warning);
  color: var(--muted);
  background: rgb(255 200 87 / 6%);
  font-size: 12px;
  line-height: 1.55;
}

.notification-options {
  display: grid;
  gap: 10px;
}

.notification-choice-streak {
  display: grid;
}

.notification-rule {
  display: grid;
  gap: 12px;
  margin: -1px 10px 0;
  padding: 14px;
  border: 1px solid rgb(169 112 255 / 30%);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: rgb(169 112 255 / 6%);
}

.notification-rule[hidden],
.notification-rule-custom[hidden] {
  display: none;
}

.notification-rule-mode,
.notification-rule-custom {
  display: grid;
  gap: 8px;
}

.notification-rule-mode > span,
.notification-rule-custom > span {
  display: grid;
  gap: 3px;
}

.notification-rule-mode small,
.notification-rule-custom small,
.notification-rule-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.4;
}

.notification-rule-note {
  margin: 0;
}

.check-row-required {
  border-color: rgb(56 217 150 / 24%);
  background: rgb(56 217 150 / 5%);
}

.check-row-required input:disabled {
  opacity: 1;
}

.sticky-save {
  position: sticky;
  bottom: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgb(20 22 29 / 90%);
  backdrop-filter: blur(18px);
}

.two-column {
  display: grid;
  grid-template-columns: minmax(280px, 0.65fr) minmax(0, 1.35fr);
  gap: 20px;
}

.two-column .panel-card {
  padding: 24px;
}

.users-list-mobile { display: none; }
.user-mobile-card { padding: 14px 0; border-bottom: 1px solid var(--border); }
.user-mobile-card:last-child { border-bottom: 0; }
.user-mobile-heading, .user-mobile-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 12px; }
.user-mobile-heading { justify-content: space-between; margin-bottom: 8px; }
.user-mobile-heading strong { overflow-wrap: anywhere; }
.user-mobile-meta { margin-bottom: 11px; color: var(--muted); font-size: 11px; }
.user-state { padding: 4px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.user-state.is-active { color: var(--success); background: rgb(56 217 150 / 9%); }
.user-state.is-disabled { color: var(--danger); background: rgb(255 101 119 / 9%); }

.table-wrap {
  overflow-x: auto;
}

.statistics-table {
  margin-top: 20px;
  padding: 24px;
}

.statistics-groups {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.statistics-group {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgb(255 255 255 / 2%);
}

.statistics-group > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 16px 18px;
  list-style: none;
}

.statistics-group > summary::-webkit-details-marker {
  display: none;
}

.statistics-group > summary::before {
  color: var(--accent);
  content: "+";
  font-size: 18px;
  font-weight: 850;
  grid-column: 1;
  grid-row: 1;
  margin-right: 8px;
}

.statistics-group[open] > summary::before {
  content: "−";
}

.statistics-streamer {
  display: grid;
  gap: 4px;
  grid-column: 1;
  grid-row: 1;
  padding-left: 28px;
}

.statistics-streamer small,
.statistics-total small {
  color: var(--muted);
}

.statistics-total {
  display: grid;
  gap: 4px;
  text-align: right;
}

.statistics-total strong {
  font-size: 20px;
}

.statistics-breakdown {
  display: grid;
  gap: 12px;
  padding: 0 18px 18px 46px;
}

.statistics-breakdown > .button {
  justify-self: start;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 13px;
}

th {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.flash-stack {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}

.flash {
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.flash-success {
  border-color: rgb(56 217 150 / 35%);
}

.flash-error {
  border-color: rgb(255 101 119 / 42%);
  color: #ffadb6;
}

.mention-section {
  padding: 24px;
  margin-bottom: 20px;
}

.mention-history-section {
  border-color: rgb(169 112 255 / 42%);
}

.console-live,
.channel-progress {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.console-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--success);
}

.console-live::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 14px rgb(56 217 150 / 70%);
  content: "";
}

.channel-progress strong {
  color: var(--text);
}

.mention-console {
  display: grid;
  gap: 8px;
  max-height: 640px;
  padding: 8px;
  overflow: auto;
  border: 1px solid #252936;
  border-radius: 12px;
  background: #0b0c11;
  box-shadow: inset 0 1px 16px rgb(0 0 0 / 28%);
  color: var(--text);
  scroll-behavior: smooth;
}

.mention-console-preview {
  height: 214px;
  margin-bottom: 18px;
}

.mention-console-row {
  display: grid;
  gap: 11px;
  padding: 14px 15px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 9px;
  background: linear-gradient(135deg, rgb(255 255 255 / 3%), transparent),
    #101218;
}

.mention-console-row:hover {
  border-color: rgb(169 112 255 / 30%);
  background: linear-gradient(135deg, rgb(169 112 255 / 7%), transparent),
    #101218;
}

.mention-console-source {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.mention-console-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  color: #777e90;
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
}

.mention-console-channel {
  padding: 5px 9px;
  border: 1px solid rgb(169 112 255 / 34%);
  border-radius: 7px;
  color: #d4baff;
  background: rgb(145 71 255 / 12%);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.mention-console-channel:hover {
  border-color: rgb(169 112 255 / 65%);
  color: #fff;
}

.mention-console-author {
  color: #69e3af;
  font-size: 12px;
  font-weight: 750;
}

.mention-console-delivery {
  color: #777e90;
  text-align: right;
}

.mention-console-message {
  margin: 0;
  color: #f4f5fa;
  font-size: 14px;
  font-weight: 560;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

.mention-console-empty {
  margin: 0;
  padding: 24px 14px;
}

.channel-groups {
  display: grid;
  gap: 14px;
}

.channel-group {
  padding: 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  border-radius: 12px;
  background: rgb(255 255 255 / 2%);
}

.channel-group-joined {
  border-left-color: var(--success);
  background: rgb(56 217 150 / 3%);
}

.channel-group-waiting {
  border-left-color: var(--warning);
  background: rgb(255 200 87 / 3%);
}

.channel-group-timeout,
.channel-group-suspended {
  border-left-color: #ff9f66;
  background: rgb(255 159 102 / 4%);
}

.channel-group-error {
  border-left-color: var(--danger);
  background: rgb(255 101 119 / 4%);
}

.channel-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.channel-group-heading h3 {
  margin: 0;
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.channel-group-heading span {
  display: grid;
  min-width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
}

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

.channel-chip-form {
  margin: 0;
}

.channel-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: #b3b8c5;
  background: var(--surface-2);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
}

.channel-chip-action {
  cursor: pointer;
}

.channel-chip-action:hover {
  border-color: rgb(169 112 255 / 58%);
  color: var(--text);
}

.channel-chip small {
  color: #d5bfff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.monitor-health { max-height: 360px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.dashboard-filters {
  display: grid;
  gap: 15px;
  margin-bottom: 20px;
  padding: 16px;
}

.dashboard-order-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.dashboard-order-controls.is-active {
  position: fixed;
  z-index: 110;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgb(20 22 29 / 96%);
  box-shadow: 0 16px 44px rgb(0 0 0 / 42%);
  max-width: calc(100vw - 32px);
}
.dashboard-reordering { padding-bottom: 74px; }

.dashboard-order-controls [hidden] { display: none; }

.dashboard-order-controls [data-dashboard-order-status] {
  margin-right: auto;
  font-size: 11px;
}

#events { scroll-margin-top: 18px; }

.action-label-compact { display: none; }

.dashboard-filter-group {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.dashboard-filter-label {
  width: 92px;
  flex: 0 0 92px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.filter-chip:hover {
  border-color: rgb(169 112 255 / 50%);
  color: var(--text);
}

.filter-chip.is-active {
  border-color: rgb(169 112 255 / 60%);
  color: #fff;
  background: rgb(145 71 255 / 22%);
}

.draft-recovery {
  position: sticky;
  z-index: 8;
  top: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid rgb(255 200 87 / 45%);
  border-radius: 12px;
  background: rgb(38 32 18 / 96%);
  box-shadow: 0 12px 38px rgb(0 0 0 / 36%);
}

.draft-recovery[hidden] {
  display: none;
}

.draft-recovery > div:first-child {
  display: grid;
  gap: 3px;
}

.draft-recovery span {
  color: #d5c9aa;
  font-size: 12px;
}
.status-connecting,
.status-attention,
.status-partial,
.status-degraded,
.status-unavailable {
  border-color: rgb(255 200 87 / 35%);
  color: var(--warning);
  background: rgb(255 200 87 / 8%);
}
.status-healthy {
  border-color: rgb(56 217 150 / 35%);
  color: var(--success);
  background: rgb(56 217 150 / 8%);
}
.status-critical {
  border-color: rgb(255 101 119 / 38%);
  color: var(--danger);
  background: rgb(255 101 119 / 9%);
}
.operations-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.operation-metric {
  display: grid;
  gap: 7px;
  padding: 20px;
}
.operation-metric p { margin: 0; }
.operation-metric strong { font-size: 25px; }
.operation-issues { display: grid; gap: 10px; }
.operation-issue {
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning);
  border-radius: 9px;
  background: rgb(255 200 87 / 4%);
}
.operation-issue-danger {
  border-left-color: var(--danger);
  background: rgb(255 101 119 / 5%);
}
.operation-issue p { margin: 4px 0 0; color: var(--muted); }
.operation-empty { margin: 0; color: var(--success); }
.operation-list { display: grid; gap: 0; margin: 0; }
.operation-list div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.operation-list dt { color: var(--muted); }
.operation-list dd { margin: 0; overflow-wrap: anywhere; }
.operation-channels { display: grid; gap: 9px; }
.operation-channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
}
.operation-channel span { display: grid; gap: 3px; }
.operation-channel small { color: var(--warning); overflow-wrap: anywhere; }
.operation-restart-form { align-items: flex-end; margin-top: 12px; }
.operation-restart-form label { min-width: 240px; }
.danger-zone { border-color: rgb(255 101 119 / 24%); }
.account-delete-zone { margin-top: 28px; }
.account-delete-content { display: grid; max-width: 620px; gap: 14px; padding-top: 8px; }
.account-delete-content p { margin: 0; }
.account-delete-content .stacked-form { gap: 12px; }
.account-delete-content .button-danger { justify-self: start; }
.notifier-card { border-top: 2px solid var(--accent); }
summary { cursor: pointer; padding: 8px 0; }
.topbar nav { flex-wrap: wrap; }

@media (max-width: 1120px) {
  .topbar { padding-inline: 24px; }
  .admin-nav > span { display: none; }
  .primary-nav a, .admin-nav a { padding-inline: 8px; font-size: 12px; }
  .brand small { display: none; }
}

@media (max-width: 800px) {
  .topbar {
    align-items: center;
    padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 9px max(12px, env(safe-area-inset-left));
  }

  .topbar { position: sticky; flex-wrap: wrap; gap: 8px; }
  .brand { gap: 9px; }
  .brand-logo { width: 32px; height: 32px; border-radius: 9px; }
  .brand strong { font-size: 15px; }
  .topbar-navigation { order: 3; width: 100%; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .topbar-navigation::-webkit-scrollbar { display: none; }
  .primary-nav, .admin-nav { flex: 0 0 auto; flex-wrap: nowrap; }
  .primary-nav, .admin-nav { gap: 2px !important; padding: 3px; border-radius: 10px; }
  .primary-nav a, .admin-nav a { padding: 6px 8px; font-size: 11px; }
  .topbar-account { gap: 7px; margin-left: auto; }
  .telegram-shortcut { display: none; }
  .account-menu summary { padding: 2px; }
  .account-name, .menu-chevron { display: none; }
  .user-avatar { width: 32px; height: 32px; }
  .account-popover { width: min(286px, calc(100vw - 24px)); }
  .page-shell {
    width: min(100% - 24px, 1260px);
    padding: 22px 0 calc(110px + env(safe-area-inset-bottom));
  }

  .split-heading,
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .split-heading .page-actions {
    width: 100%;
  }

  .split-heading .page-actions .button {
    flex: 1 1 180px;
  }

  .account-card .card-heading {
    align-items: flex-start;
  }

  .detail-heading { position: relative; padding-right: 78px; }
  .detail-heading > .status { position: absolute; top: 0; right: 0; }
  .detail-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; }
  .detail-actions form, .detail-actions .button { width: 100%; }
  .detail-actions .muted { grid-column: 1 / -1; }

  .account-card {
    padding: 20px;
  }

  .dashboard-filter-group {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .dashboard-filter-label {
    width: auto;
    flex-basis: auto;
  }

  .draft-recovery {
    top: 12px;
    align-items: flex-start;
    flex-direction: column;
  }

  .form-grid,
  .form-grid-3,
  .form-grid-4,
  .check-grid,
  .channel-toolbar,
  .two-column,
  .metric-grid,
  .device-code-card,
  .event-filters {
    grid-template-columns: 1fr;
  }

  .telegram-owner-state { align-items: stretch; flex-direction: column; }
  .telegram-owner-state .button { width: 100%; }

  .streamer-list-heading {
    display: none;
  }

  .streamer-row-main {
    grid-template-columns: 24px 28px minmax(0, 1fr);
  }

  .streamer-row-main .settings-badge {
    grid-column: 3;
    grid-row: 2;
  }

  .channel-row-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-content: flex-end;
    padding-top: 5px;
    border-top: 1px solid var(--border);
  }

  .channel-bulk-toolbar {
    align-items: flex-start;
  }

  .channel-bulk-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .info-popover { right: 0; width: min(320px, calc(100vw - 32px)); }

  .streamer-drawer {
    grid-template-columns: 1fr;
  }

  .streamer-drawer-backdrop {
    display: none;
  }

  .streamer-drawer-actions {
    flex-wrap: wrap;
  }

  .streamer-drawer-actions .button-danger {
    margin-right: 0;
  }

  .event-list article {
    grid-template-columns: 1fr;
  }

  .settings-section {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .mention-section {
    padding: 18px;
  }

  .account-delete-zone { margin-top: 18px; }
  .account-delete-content .button-danger { width: 100%; }

  .mention-console-preview {
    height: 224px;
  }

  .mention-console-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .mention-console-delivery {
    text-align: left;
  }

  .operations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operation-restart-form {
    align-items: stretch;
  }
}

@media (max-width: 520px) {
  h1 {
    font-size: 29px;
    line-height: 1.03;
  }

  .page-heading {
    margin-bottom: 20px;
  }

  .statistics-page-heading, .notifier-form-heading, .users-page-heading { margin-bottom: 14px; }
  .statistics-page-heading .eyebrow, .notifier-form-heading .eyebrow, .users-page-heading .eyebrow { display: none; }
  .statistics-page-heading h1, .notifier-form-heading h1, .users-page-heading h1 { margin-bottom: 5px; font-size: 25px; }
  .statistics-page-heading .muted, .notifier-form-heading .muted, .users-page-heading .muted { margin-bottom: 0; font-size: 12px; line-height: 1.4; }

  .dashboard-heading { gap: 13px; margin-bottom: 14px; }
  .dashboard-heading .eyebrow { display: none; }
  .dashboard-heading h1 { margin-bottom: 5px; font-size: 25px; line-height: 1.05; }
  .dashboard-heading .muted { margin-bottom: 0; font-size: 13px; line-height: 1.4; }
  .dashboard-heading .page-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .dashboard-heading .page-actions .button { width: auto; min-height: 38px; padding: 0 10px; font-size: 12px; }
  .action-label-full { display: none; }
  .action-label-compact { display: inline; }
  .dashboard-filters { gap: 8px; margin-bottom: 14px; padding: 9px; }
  .dashboard-filter-group { gap: 0; }
  .dashboard-filter-label { display: none; }
  .dashboard-filters .filter-chips { gap: 5px; }
  .dashboard-filters .filter-chip { min-height: 32px; padding: 0 9px; font-size: 11px; }
  .dashboard-order-controls { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
  .dashboard-order-controls.is-active { right: max(10px, env(safe-area-inset-right)); left: max(10px, env(safe-area-inset-left)); grid-template-columns: 1fr 1fr; }
  .dashboard-order-controls.is-active [data-dashboard-order-cancel],
  .dashboard-order-controls.is-active [data-dashboard-order-toggle] { width: 100%; }
  .dashboard-order-controls [data-dashboard-order-cancel] { grid-column: 1; grid-row: 1; justify-self: start; }
  .dashboard-order-controls [data-dashboard-order-toggle] { grid-column: 2; grid-row: 1; justify-self: end; }
  .dashboard-order-controls [data-dashboard-order-status] { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 10px; }
  .dashboard-heading + .dashboard-filters + .empty-state { padding: 30px 16px; }
  .dashboard-heading + .dashboard-filters + .empty-state h2 { font-size: 22px; }
  .dashboard-heading + .dashboard-filters + .empty-state p { font-size: 13px; line-height: 1.45; }
  .dashboard-heading + .dashboard-filters + .empty-state .empty-state-actions { display: none; }
  .settings-layout { gap: 14px; }
  .notifier-settings-layout { gap: 8px; }
  .notifier-settings-layout .settings-section { padding-block: 13px; }
  .settings-section { gap: 8px; padding: 16px 14px; }
  .settings-section > div:last-child { gap: 14px; }
  .settings-section h2 { margin-bottom: 7px; font-size: 21px; }
  .settings-section .eyebrow { margin-bottom: 5px; }
  .settings-section .muted { font-size: 13px; line-height: 1.45; }
  .notification-rule { margin-inline: 5px; padding: 12px; }
  .notification-rule-mode select { font-size: 12px; }
  .default-settings-intro, .default-settings-note { padding: 11px 12px; font-size: 13px; line-height: 1.45; }

  .account-grid {
    gap: 14px;
  }

  .account-card {
    gap: 15px;
    padding: 17px;
  }

  .dashboard-object-card { min-height: 126px; gap: 10px; padding: 14px; }
  .dashboard-object-card .card-kicker { margin-bottom: 5px; font-size: 9px; }
  .dashboard-object-card .card-heading h2 { padding-right: 4px; font-size: 20px; }
  .dashboard-object-card .status { padding: 4px 6px; font-size: 8px; }
  .dashboard-object-card .card-settings-link { width: 27px; height: 27px; font-size: 12px; }
  .card-corner-actions { gap: 5px; }
  .detail-heading { min-height: 38px; margin-bottom: 12px; }
  .detail-heading h1 { margin-bottom: 0; font-size: 26px; }
  .detail-heading .eyebrow { margin-bottom: 5px; font-size: 9px; }
  .detail-heading > .status { padding: 5px 7px; font-size: 8px; }
  .detail-actions { margin-bottom: 12px; }

  .account-card .card-heading {
    gap: 10px;
  }

  .device-code-card-compact { grid-template-columns: 1fr; }
  .device-code-card-compact .device-code-actions { grid-template-columns: 1fr 1fr; }

  .status {
    padding: 6px 8px;
    font-size: 9px;
  }

  .filter-chips {
    width: 100%;
  }

  .filter-chip {
    flex: 1 1 auto;
    justify-content: center;
  }

  .empty-channel-state {
    padding: 30px 16px;
  }

  .empty-channel-state .button,
  .empty-state-actions .button,
  .page-actions .button {
    width: 100%;
  }

  .operations-grid { grid-template-columns: 1fr; }

  .statistics-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 10px; }
  .statistics-metrics .metric-card { min-width: 0; gap: 3px; padding: 11px; }
  .statistics-metrics .metric-card span { font-size: 10px; }
  .statistics-metrics .metric-card strong { overflow-wrap: anywhere; font-size: 17px; }
  .statistics-metrics .metric-card small { font-size: 9px; line-height: 1.3; }
  .statistics-filters { gap: 8px; margin-bottom: 10px; padding: 10px; }
  .statistics-filters label { gap: 5px; font-size: 10px; }
  .statistics-filters input, .statistics-filters select { min-height: 38px; }
  .statistics-table { margin-top: 10px; padding: 12px; }
  .statistics-table > .section-heading .eyebrow { display: none; }
  .statistics-table > .section-heading h2 { margin: 0; font-size: 17px; }
  .statistics-groups { gap: 6px; margin-top: 10px; }

  .statistics-group > summary {
    gap: 8px;
    padding: 10px;
  }

  .statistics-streamer {
    gap: 2px;
    padding-left: 22px;
  }

  .statistics-streamer strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  .statistics-streamer small, .statistics-total small { font-size: 9px; }

  .statistics-total strong {
    font-size: 16px;
  }

  .statistics-breakdown {
    padding: 0 10px 10px;
  }

  .users-table-desktop { display: none; }
  .users-list-mobile { display: block; }
  .two-column .panel-card { padding: 15px; }
  .user-create-card h2, .users-list-card h2 { font-size: 19px; }
  .user-create-card .stacked-form { gap: 12px; }
  .sticky-save { bottom: max(8px, env(safe-area-inset-bottom)); }
  .settings-layout { padding-bottom: 28px; }
}