:root {
  color-scheme: dark;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #202020;
  color: #f6f6f7;
  font-synthesis: none;
  --tg-height: 100vh;
  --surface: #343436;
  --surface-raised: #414143;
  --text-primary: #f6f6f7;
  --text-secondary: #a9a9af;
  --motion-fast: 160ms;
  --motion-standard: 240ms;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }

body { min-width: 320px; min-height: var(--tg-height); margin: 0; overflow-x: hidden; background: #202020; }

button, input, select, textarea { font: inherit; }

button { border: 0; color: inherit; cursor: pointer; touch-action: manipulation; transition: transform var(--motion-fast) var(--ease-standard), opacity var(--motion-fast) ease; }

button:active { transform: scale(.97); }

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #75757a; outline-offset: 2px; }

button:disabled { cursor: not-allowed; opacity: .46; }

[hidden] { display: none !important; }

.browser-gate { display: grid; min-height: 100vh; place-content: center; padding: 28px; text-align: center; }

.gate-mark { display: grid; width: 58px; height: 58px; margin: 0 auto 20px; place-items: center; border-radius: 50%; background: #4c4c4e; color: #fff; font-size: 17px; font-weight: 760; }

.browser-gate h1 { margin: 0; font-size: 22px; font-weight: 720; }

.browser-gate p { margin: 10px 0 0; color: #aaaab0; font-size: 15px; }

.boot-screen { display: grid; gap: 14px; justify-items: center; }

.boot-screen p { margin: 0; color: #aaaab0; font-size: 14px; }

.boot-mark { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 22px; background: #454547; color: #fff; font-size: 17px; font-weight: 760; }

.boot-spinner { width: 27px; height: 27px; border: 3px solid #454547; border-top-color: #f2f2f4; border-radius: 50%; }

.browser-gate.booting { align-content: center; }

.browser-gate.boot-exit { pointer-events: none; }

.app { width: 100%; max-width: 920px; min-height: var(--tg-height); margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) clamp(18px, 5.2vw, 28px) calc(28px + env(safe-area-inset-bottom)); background: #202020; }

.topbar { display: flex; min-height: 42px; align-items: center; justify-content: flex-start; }

.tg-avatar { display: grid; width: 42px; height: 42px; padding: 0; overflow: hidden; place-items: center; border-radius: 50%; background: #464648; color: #fff; font-size: 14px; font-weight: 740; }

.tg-avatar img, .user-avatar img { width: 100%; height: 100%; object-fit: cover; }

.profile-menu-layer { position: fixed; z-index: 14; inset: 0; }

.profile-menu { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 72px; display: grid; width: min(254px, calc(100vw - 96px)); gap: 4px; padding: 8px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 25px; background: #38383a; box-shadow: 0 16px 42px rgba(0, 0, 0, .42); }

.profile-menu-user { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 9px; padding: 5px 7px 9px; }

.profile-menu-user .user-avatar { width: 34px; height: 34px; font-size: 11px; }

.profile-menu-user b, .profile-menu-user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.profile-menu-user b { font-size: 13px; }
.profile-menu-user small { margin-top: 2px; color: #a8a8ae; font-size: 11px; }

.profile-menu-item { display: grid; min-height: 45px; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 9px; border-radius: 17px; background: transparent; color: #f0f0f2; text-align: left; font-size: 14px; font-weight: 570; }

.profile-menu-item:hover { background: #4a4a4c; }

.menu-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 11px; background: #4a4a4c; color: #d6d6da; }

.menu-icon svg, .menu-arrow { width: 16px; height: 16px; }
.menu-arrow { color: #a9a9af; }

.menu-switch { position: relative; width: 34px; height: 20px; border-radius: 999px; background: #56565a; }

.menu-switch i { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform var(--motion-fast) ease; }

.menu-switch.on { background: #7c9ff4; }
.menu-switch.on i { transform: translateX(14px); }

#screen { padding-top: 19px; }

.subscription-summary { padding: 0 0 29px; text-align: center; }

.subscription-summary .number { font-size: 72px; font-weight: 580; line-height: .9; }

.subscription-summary .caption { margin: 11px 0 0; color: #a5a5aa; font-size: 14px; font-weight: 450; }

.quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 auto 27px; }

.quick-action { display: grid; gap: 10px; justify-items: center; padding: 0; background: transparent; color: #cbcbcf; font-size: 15px; font-weight: 510; }

.quick-action .circle { display: grid; width: 51px; height: 51px; place-items: center; border-radius: 50%; background: #3e3e40; color: #c5c5c8; }

.quick-action svg { width: 21px; height: 21px; stroke-width: 1.65; }

.segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 4px; border-radius: 999px; background: #353536; }

.segment { display: inline-flex; min-width: 0; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 0 10px; overflow: hidden; border-radius: 999px; background: transparent; color: #b5b5ba; font-size: 14px; font-weight: 520; white-space: nowrap; }

.segment svg { width: 16px; height: 16px; }

.segment.active { background: #4a4a4c; color: #fff; }

.segment:not(.active) { color: #c2c2c7; }

.subscription-panel { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 16px; padding: 15px; border-radius: 24px; background: #38383a; }

.subscription-panel-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 16px; background: #4a4a4d; color: #d2d2d6; }

.subscription-panel-icon svg { width: 21px; height: 21px; }

.subscription-panel b, .subscription-panel small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.subscription-panel b { font-size: 15px; }
.subscription-panel small { margin-top: 4px; color: #adaeb3; font-size: 13px; }

.empty-subscription { min-height: 132px; display: grid; margin-top: 16px; place-items: center; border-radius: 24px; color: #aaaab0; font-size: 14px; }

.home-ticket-panel { margin-top: 16px; }

.home-ticket-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

.home-ticket-heading h2 { margin: 0; font-size: 17px; font-weight: 720; }

.home-empty-tickets { min-height: 174px; margin-top: 8px; }

.settings-card { margin-top: 13px; padding: 16px; border-radius: 24px; background: #313132; }

.settings-card h2 { margin: 0; font-size: 17px; }

.settings-card p { margin: 7px 0 0; color: #a9a9ae; font-size: 14px; line-height: 1.4; }

.section-heading { display: flex; align-items: center; justify-content: space-between; margin: 25px 0 14px; }

.section-heading h1, .section-heading h2, .admin-content-heading h2 { margin: 0; font-size: 19px; font-weight: 720; letter-spacing: 0; }

.heading-link { padding: 7px 0 7px 11px; border-radius: 999px; background: transparent; color: #b6b6bb; font-size: 14px; }

.icon-button { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border-radius: 50%; background: #383839; color: #d0d0d4; }

.icon-button svg { width: 19px; height: 19px; }

.ticket-list { display: grid; gap: 10px; }

.ticket-card { width: 100%; padding: 17px; border-radius: 27px; background: #414143; color: #f4f4f5; text-align: left; }

.ticket-card:active { background: #4b4b4e; }

.ticket-topline, .ticket-meta { display: flex; min-width: 0; align-items: center; gap: 9px; }

.ticket-subject { overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 660; }

.ticket-meta { margin-top: 8px; overflow: hidden; color: #b6b6bb; font-size: 13px; }

.ticket-meta span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pill { flex: 0 0 auto; padding: 6px 11px; border-radius: 999px; background: #29292a; color: #d2d2d5; font-size: 12px; line-height: 1; }

.pill.open { color: #e1e1e4; }
.pill.waiting { color: #d9c08d; }
.pill.closed { color: #a7a7ab; }

.empty-tickets { display: grid; min-height: 217px; place-content: center; justify-items: center; padding: 24px 15px; text-align: center; }

.empty-tickets h3 { margin: 0; font-size: 17px; font-weight: 670; }

.empty-tickets p { max-width: 280px; margin: 9px 0 17px; color: #aaaab0; font-size: 15px; line-height: 1.42; }

.round-button, .button-primary, .button-secondary, .button-danger { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; gap: 7px; padding: 0 17px; border-radius: 999px; font-size: 14px; font-weight: 650; white-space: nowrap; }

.round-button svg, .button-primary svg, .button-secondary svg, .button-danger svg { width: 18px; height: 18px; flex: 0 0 auto; }

.round-button { background: #f2f2f4; color: #282829; }
.button-primary { background: #f1f1f3; color: #252526; }
.button-secondary { background: #404042; color: #f2f2f4; }
.button-danger { background: #7a3d3d; color: #fff; }

.backline { display: inline-flex; min-height: 36px; align-items: center; gap: 7px; padding: 0 12px; border-radius: 999px; background: #333334; color: #d4d4d7; font-size: 14px; }

.backline svg { width: 17px; height: 17px; }

.page-title { margin: 16px 0 0; font-size: 27px; font-weight: 750; }

.subtitle { margin: 7px 0 18px; color: #a4a4a9; font-size: 14px; }

.admin-header { display: grid; gap: 18px; }

.admin-title-row { display: flex; align-items: center; justify-content: space-between; }

.admin-title-row h1 { max-width: calc(100% - 50px); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 25px; font-weight: 750; }

.admin-home { display: grid; width: 38px; height: 38px; padding: 0; place-items: center; border-radius: 50%; background: #353536; color: #c8c8cc; }

.admin-home svg { width: 18px; height: 18px; }

.switch-row { display: inline-flex; align-items: center; gap: 9px; color: #f0f0f2; font-size: 15px; font-weight: 540; }

.switch { position: relative; width: 35px; height: 21px; padding: 0; border-radius: 999px; background: #4d4d50; }

.switch span { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .18s ease; }

.switch.on { background: #5d91f8; }

.switch.on span { transform: translateX(14px); }

.admin-tabs { display: flex; width: 100%; gap: 3px; padding: 4px; overflow: hidden; border-radius: 999px; background: #2f2f30; }

.admin-tab { display: grid; min-width: 0; min-height: 44px; flex: 1 1 0; place-items: center; padding: 0; overflow: hidden; border-radius: 999px; background: transparent; color: #aaaab0; }

.admin-tab.selected { display: grid; min-width: 0; flex: 1 1 0; padding: 0; background: #454547; color: #f5f5f6; font-size: 12px; font-weight: 650; }

.admin-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.admin-tab svg { width: 17px; height: 17px; }

.admin-content-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 14px; }

.heading-tools { display: flex; flex: 0 0 auto; gap: 8px; }

.heading-tools .icon-button { width: 44px; height: 44px; background: transparent; }

.heading-tools .icon-button:hover { background: #363638; }

/* Admin panels: keys / payload / loader */
.admin-section-hint { margin: -6px 0 12px !important; }

.admin-stack {
  display: grid;
  gap: 12px;
  width: 100%;
}

.admin-panel-card {
  display: grid;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 16px;
  border: 0;
  border-radius: 24px;
  background: #414143;
  color: #f4f4f5;
  text-align: left;
  box-sizing: border-box;
}

.admin-summary-card { background: #38383a; }

.admin-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-stat-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: #2f2f31;
  color: #d2d2d6;
  font-size: 13px;
}

.admin-stat-chip b { color: #f5f5f7; font-weight: 700; }

.admin-key-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-key-label {
  color: #9f9fa5;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.admin-key-value,
.admin-code-line,
.admin-code-block,
.admin-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.4;
  word-break: break-all;
}

.admin-key-value {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 13px;
  border-radius: 16px;
  background: #2f2f31;
  color: #f5f5f7;
  font-size: 12.5px;
  font-weight: 650;
  box-sizing: border-box;
}

.admin-key-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.admin-key-grid > div {
  min-width: 0;
  padding: 10px 10px;
  border-radius: 14px;
  background: #353537;
}

.admin-key-grid small {
  display: block;
  margin-bottom: 4px;
  color: #9a9aa0;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.admin-key-grid b {
  display: block;
  overflow: hidden;
  color: #f0f0f3;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-key-actions {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  gap: 8px;
}

.admin-chip-btn {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  font-size: 12.5px;
}

.admin-payload-card {
  display: flex;
  align-items: stretch;
  gap: 8px;
  cursor: default;
  padding-right: 8px;
}
.admin-payload-main {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
}
.admin-payload-main:active { opacity: 0.85; }
.admin-payload-delete { flex-shrink: 0; align-self: center; color: #f87171; }

.admin-payload-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #f5f5f7;
  font-size: 16px;
  font-weight: 660;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-loader-status {
  color: #f0f0f2;
  font-size: 15px;
  font-weight: 620;
}

.admin-field { display: grid; gap: 6px; min-width: 0; }

.admin-field-label {
  color: #9f9fa5;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.admin-code-line,
.admin-code-block {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: #2f2f31;
  color: #d7d7dc;
  box-sizing: border-box;
}

.admin-code-line { cursor: pointer; }

.admin-upload-btn {
  display: inline-flex !important;
  width: 100%;
  min-height: 46px;
  margin-top: 2px;
  cursor: pointer;
  box-sizing: border-box;
}

.admin-upload-btn span { line-height: 1; }

.empty-admin {
  padding: 28px 16px;
  border-radius: 24px;
  background: #353536;
  color: #a8a8ae;
  font-size: 14px;
  text-align: center;
}

.admin-search { margin: -3px 0 13px; }

.input, .select, .textarea { width: 100%; border: 0; border-radius: 20px; outline: 0; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; background: #343436; color: #f4f4f5; }

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

.textarea { min-height: 116px; padding: 13px 15px; resize: none; }

.input:focus, .select:focus, .textarea:focus { outline: 0; box-shadow: inset 0 0 0 1px #6b6b70; }

.form-helper { margin: -5px 0 0; color: #a8a8ae; font-size: 13px; line-height: 1.4; }

.custom-select { position: relative; display: block; }

.select-trigger { display: grid; width: 100%; min-height: 46px; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; gap: 8px; padding: 0 15px; border-radius: 20px; background: #343436; color: #f4f4f5; text-align: left; }

.select-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-trigger svg { width: 18px; height: 18px; transition: transform var(--motion-fast) ease; }
.custom-select.open .select-trigger svg { transform: rotate(180deg); }

.select-options { position: absolute; z-index: 3; top: calc(100% + 7px); right: 0; left: 0; display: grid; gap: 3px; padding: 5px; transform: translateY(-5px) scale(.98); transform-origin: top; border: 1px solid rgba(255, 255, 255, .08); border-radius: 20px; background: #454547; box-shadow: 0 16px 34px rgba(0, 0, 0, .34); opacity: 0; pointer-events: none; transition: transform var(--motion-fast) var(--ease-standard), opacity var(--motion-fast) ease; }

.custom-select.open .select-options { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

.select-options button { min-height: 40px; padding: 0 12px; border-radius: 14px; background: transparent; color: #eeeef0; text-align: left; font-size: 14px; }

.select-options button:hover { background: #5a5a5d; }

.product-list { display: grid; gap: 10px; }

.product-card { display: grid; gap: 13px; width: 100%; padding: 16px; border-radius: 24px; background: #38383a; color: #f5f5f6; text-align: left; }

.product-card:not(.static):hover { background: #444446; }

.product-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.product-card-top b, .product-card-top small { display: block; }
.product-card-top b { font-size: 16px; }
.product-card-top small { margin-top: 4px; color: #a9a9af; font-size: 12px; }
.product-card-top > svg { width: 18px; color: #aaaab0; }

.plan-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.plan-chips span { padding: 7px 9px; border-radius: 999px; background: #4c4c4f; color: #d9d9dd; font-size: 12px; }

.plans-head { display: flex; align-items: center; justify-content: space-between; color: #c9c9cd; font-size: 13px; font-weight: 580; }

.text-icon-button { display: inline-flex; min-height: 36px; align-items: center; gap: 5px; padding: 0 10px; border-radius: 999px; background: #424244; color: #f0f0f2; font-size: 12px; font-weight: 650; }

.text-icon-button svg { width: 14px; height: 14px; }

.plan-editors { display: grid; gap: 8px; }

.plan-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px; align-items: end; gap: 8px; padding: 10px; border-radius: 20px; background: #353537; }

.plan-editor label { min-width: 0; }

.remove-plan { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: #4a4a4c; color: #d8d8dc; }

.remove-plan svg { width: 17px; height: 17px; }

.plan-purchase-list { display: grid; gap: 7px; }

.plan-purchase { display: flex; min-height: 44px; align-items: center; justify-content: space-between; padding: 0 13px; border-radius: 16px; background: #4b4b4d; color: #f5f5f6; font-size: 14px; }

.plan-purchase:hover { background: #5a5a5c; }

.admin-toolbar { display: grid; grid-template-columns: 1fr 116px; gap: 9px; margin-bottom: 14px; }

.user-list { display: grid; gap: 7px; }

.user-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px; border-radius: 22px; background: #343436; text-align: left; }

.user-avatar { display: grid; width: 42px; height: 42px; overflow: hidden; place-items: center; border-radius: 50%; background: #4b4b4e; color: #fff; font-size: 13px; font-weight: 730; }

.user-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 660; }

.user-info { display: flex; gap: 5px; margin-top: 3px; overflow: hidden; color: #a7a7ad; font-size: 12px; }

.user-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.user-detail-hero { margin-top: 18px; padding: 20px; border-radius: 34px; background: #414143; }

.user-detail-main { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 15px; }

.user-detail-avatar { display: grid; width: 74px; height: 74px; overflow: hidden; place-items: center; border: 1px solid #646468; border-radius: 50%; background: #4d4d50; color: #fff; font-size: 24px; font-weight: 720; }
.user-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }

.user-detail-main h1 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 23px; }
.user-detail-main p { margin: 5px 0 0; overflow: hidden; color: #b3b3b8; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }

.detail-status { padding: 8px 10px; border: 1px solid #66666a; border-radius: 999px; color: #dddde0; font-size: 12px; }
.detail-status.banned { border-color: #87504b; color: #ffc0b8; }

.detail-divider { height: 1px; margin: 20px 0; background: #606064; }

.user-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0; }
.user-detail-grid .wide { grid-column: 1 / -1; }
.user-detail-grid dt { color: #b3b3b8; font-size: 13px; }
.user-detail-grid dd { margin: 5px 0 0; overflow: hidden; color: #f0f0f2; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }

.user-detail-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 18px 0; padding: 4px; border-radius: 999px; background: #353537; }
.user-detail-tab { display: grid; width: 44px; height: 44px; min-width: 0; place-items: center; justify-self: center; border-radius: 50%; background: transparent; color: #b6b6bb; }
.user-detail-tab.selected { background: #4a4a4c; color: #f2f2f4; box-shadow: 0 4px 10px rgba(0, 0, 0, .16); }
.user-detail-tab svg { width: 20px; height: 20px; flex: 0 0 auto; }

.user-detail-panel { display: grid; gap: 18px; padding: 20px; border-radius: 30px; background: #414143; }
.panel-heading { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 11px; }
.panel-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 16px; background: #505053; color: #f3f3f5; }
.panel-icon svg { width: 19px; height: 19px; }
.panel-heading h2 { margin: 0; font-size: 19px; }
.panel-heading p { margin: 4px 0 0; color: #b2b2b7; font-size: 13px; line-height: 1.35; }
.user-profile-details { margin: 0; }
.empty-panel { display: grid; justify-items: center; gap: 10px; padding: 26px 12px 8px; color: #b2b2b7; text-align: center; font-size: 14px; line-height: 1.4; }
.empty-panel svg { width: 25px; height: 25px; color: #d4d4d8; }

.account-action { display: inline-flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 10px; padding: 0 15px; border: 1px solid #6b6b70; border-radius: 999px; background: transparent; color: #f2f2f4; font-size: 15px; font-weight: 620; text-align: center; white-space: nowrap; }
.account-action svg { width: 19px; height: 19px; flex: 0 0 auto; }
.account-action.ban { border-color: #89504a; color: #ffcbc4; }
.account-action.restore { border-color: #5e806a; color: #cef2d9; }

.access-state, .ban-reason { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 11px; padding: 13px; border-radius: 20px; background: #48484a; }
.access-state > svg, .ban-reason-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 14px; background: #536a5b; color: #ddf7e5; }
.ban-reason-icon { background: #6c4744; color: #ffd2cc; }
.access-state svg, .ban-reason-icon svg { width: 18px; height: 18px; }
.access-state b, .access-state small, .ban-reason small, .ban-reason b { display: block; overflow: hidden; text-overflow: ellipsis; }
.access-state b, .ban-reason b { font-size: 14px; }
.access-state small, .ban-reason small { margin-bottom: 3px; color: #bdbdc2; font-size: 12px; }
.ban-reason b { white-space: normal; line-height: 1.35; }

.ban-modal { display: grid; gap: 17px; }
.ban-modal-note { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 11px; padding: 13px; border-radius: 20px; background: #4a3c3c; color: #ffd5cf; }
.ban-modal-note span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 15px; background: #694541; }
.ban-modal-note svg { width: 20px; height: 20px; }
.ban-modal-note p { margin: 0; font-size: 14px; line-height: 1.4; }

.mini-role { padding: 5px 8px; border-radius: 999px; background: #464648; color: #cbcbcf; font-size: 11px; }
.mini-role.superadmin { background: #704641; color: #ffd0ca; }
.mini-role.admin { background: #485171; color: #dbe1ff; }
.mini-role.support { background: #426c5c; color: #cefae8; }

.empty-admin { padding: 44px 12px; color: #a9a9ae; text-align: center; font-size: 14px; }

.modal { position: fixed; z-index: 10; inset: 0; display: grid; align-items: center; padding: 16px; background: rgba(0, 0, 0, .62); backdrop-filter: blur(5px); }

.modal-card { width: min(100%, 500px); max-height: calc(var(--tg-height) - 32px); padding: 20px; overflow-y: auto; scrollbar-width: none; border-radius: 29px; background: #29292a; box-shadow: 0 22px 70px rgba(0, 0, 0, .4); }

.modal-card::-webkit-scrollbar { display: none; }

.has-modal body { overflow: hidden; }

.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; }

.modal-head h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; font-weight: 720; }

.modal-head .icon-button { flex: 0 0 44px; line-height: 0; }

.form { display: grid; gap: 14px; }

.form label { display: grid; gap: 7px; color: #c9c9cd; font-size: 13px; font-weight: 520; }

.form label > span { color: #c9c9cd; font-size: 13px; font-weight: 520; }

.field-hint {
  margin: 0;
  color: #8e8e96;
  font-size: 12px;
  font-weight: 450;
  line-height: 1.35;
}

.file-field { display: grid; gap: 7px; }

.file-field-label { color: #c9c9cd; font-size: 13px; font-weight: 520; }

.file-pick-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  text-align: left;
}

.file-pick-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.file-pick-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 550;
}

.form-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 3px; }

.details { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0 0 15px; }

.detail { padding: 11px 12px; border-radius: 19px; background: #353536; }

.detail dt { color: #9f9fa5; font-size: 11px; }
.detail dd { margin: 4px 0 0; overflow: hidden; color: #f2f2f4; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

.message-thread { display: grid; gap: 10px; max-height: 46vh; margin: 14px 0; overflow-y: auto; }

.message { max-width: 87%; padding: 12px 13px; border-radius: 20px 20px 20px 7px; background: #39393b; }

.message.own { justify-self: end; border-radius: 20px 20px 7px 20px; background: #505052; }

.message .author { margin-bottom: 5px; color: #c4c4c9; font-size: 12px; font-weight: 650; }

.message p { margin: 0; color: #f0f0f2; font-size: 14px; line-height: 1.38; white-space: pre-wrap; word-break: break-word; }

.message time { display: block; margin-top: 7px; color: #adadb1; font-size: 11px; }

.modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }

#toast { position: fixed; z-index: 30; bottom: calc(26px + env(safe-area-inset-bottom)); left: 50%; max-width: calc(100% - 32px); padding: 12px 16px; transform: translate(-50%, 18px); border-radius: 999px; background: #49494c; color: #f4f4f5; font-size: 14px; opacity: 0; pointer-events: none; transition: .18s ease; }

#toast.show { transform: translate(-50%, 0); opacity: 1; }

.light-theme { color-scheme: light; background: #f5f5f7; color: #1c1c1e; }

.light-theme body, .light-theme .app { background: #f5f5f7; color: #1c1c1e; }

.light-theme .tg-avatar, .light-theme .quick-action .circle, .light-theme .segmented, .light-theme .admin-tabs, .light-theme .backline { background: #e7e7ea; color: #4b4b51; }

.light-theme .subscription-summary .caption, .light-theme .quick-action, .light-theme .subtitle, .light-theme .ticket-meta, .light-theme .empty-tickets p, .light-theme .empty-admin, .light-theme .detail dt, .light-theme .profile-menu-user small, .light-theme .product-card-top small { color: #6e6e75; }

.light-theme .segment.active, .light-theme .admin-tab.selected { background: #fff; color: #1c1c1e; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

.light-theme .segment:not(.active), .light-theme .admin-tab, .light-theme .quick-action { color: #55555d; }

.light-theme .ticket-card, .light-theme .user-row, .light-theme .product-card, .light-theme .settings-card, .light-theme .admin-panel-card, .light-theme .detail, .light-theme .plan-editor, .light-theme .user-detail-hero, .light-theme .user-detail-panel { background: #fff; color: #1c1c1e; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.light-theme .admin-code-line, .light-theme .admin-code-block { background: #f2f2f4; color: #2a2a2e; }
.light-theme .empty-admin { background: #f4f4f6; color: #6b6b70; }
.light-theme .admin-payload-card:active { background: #f0f0f2; }

.light-theme .subscription-panel { background: #fff; color: #1c1c1e; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.light-theme .subscription-panel-icon { background: #ececef; color: #4b4b51; }
.light-theme .subscription-panel small, .light-theme .empty-subscription { color: #6e6e75; }

.light-theme .pill, .light-theme .plan-chips span, .light-theme .plan-purchase, .light-theme .button-secondary, .light-theme .text-icon-button, .light-theme .remove-plan, .light-theme .menu-icon { background: #ececef; color: #35353b; }

.light-theme .input, .light-theme .select, .light-theme .textarea, .light-theme .select-trigger { background: #ededf0; color: #242429; }

.light-theme .modal { background: rgba(20, 20, 22, .34); }
.light-theme .modal-card, .light-theme .profile-menu { border-color: rgba(0, 0, 0, .07); background: #fff; color: #1d1d20; }
.light-theme .profile-menu-item { color: #252529; }
.light-theme .profile-menu-item:hover, .light-theme .select-options button:hover { background: #eeeeF1; }
.light-theme .select-options { border-color: rgba(0, 0, 0, .08); background: #fff; }
.light-theme .select-options button { color: #26262b; }
.light-theme .message { background: #e9e9ed; color: #202025; }
.light-theme .message.own { background: #d8e5ff; }
.light-theme .message p, .light-theme .message .author, .light-theme .message time { color: inherit; }

.light-theme .icon-button, .light-theme .admin-home { background: #e8e8eb; color: #45454b; }
.light-theme .round-button, .light-theme .button-primary { background: #27272b; color: #fff; }
.light-theme .user-detail-tabs { background: #e7e7ea; }
.light-theme .user-detail-tab { color: #55555d; }
.light-theme .user-detail-tab.selected { background: #fff; color: #1c1c1e; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.light-theme .panel-icon, .light-theme .access-state, .light-theme .ban-reason { background: #eeeeF1; color: #34343a; }
.light-theme .panel-heading p, .light-theme .empty-panel, .light-theme .access-state small, .light-theme .ban-reason small { color: #6e6e75; }
.light-theme .access-state > svg { background: #d8ecdf; color: #426d51; }
.light-theme .ban-reason-icon { background: #f5dfdc; color: #8b4740; }
.light-theme .ban-modal-note { background: #f5e2df; color: #7d3e38; }
.light-theme .ban-modal-note span { background: #edcfcb; }

html, body, .app, .ticket-card, .user-row, .product-card, .segment, .admin-tab, .modal-card, .profile-menu, .input, .textarea, .select-trigger, .quick-action .circle { transition: background-color var(--motion-standard) var(--ease-standard), color var(--motion-standard) var(--ease-standard), border-color var(--motion-standard) var(--ease-standard), box-shadow var(--motion-standard) var(--ease-standard); }

.purchase-modal { padding: 28px; border-radius: 34px; background: #303031; }

.purchase-modal .form { gap: 17px; }

.purchase-modal .select-trigger { border: 1px solid #555559; background: transparent; }

.purchase-modal .input { border: 1px solid #555559; background: transparent; }

.purchase-plan-slider { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 4px; overflow: hidden; border: 1px solid #515155; border-radius: 22px; background: transparent; }

.purchase-plan-slider.plans-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.purchase-plan-slider.plans-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.purchase-plan-slider.plans-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.purchase-plan-slider::-webkit-scrollbar { display: none; }

.purchase-plan-slider.scrollable { display: flex; overflow-x: auto; scrollbar-width: none; }

.purchase-plan-option { min-width: 0; min-height: 43px; padding: 0 12px; overflow: hidden; border-radius: 18px; background: transparent; color: #bdbdc2; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

.purchase-plan-slider.scrollable .purchase-plan-option { min-width: max-content; flex: 1 0 auto; padding-right: 15px; padding-left: 15px; }

.purchase-plan-option.selected { background: #4c4c4f; color: #fff; font-weight: 680; }

.payment-option { display: flex; min-height: 48px; align-items: center; gap: 11px; padding: 0 14px; border-radius: 19px; background: #3b3b3d; color: #f2f2f4; font-size: 15px; font-weight: 620; }

.payment-dot { width: 11px; height: 11px; border-radius: 50%; background: #f4f4f5; box-shadow: 0 0 0 4px #535357; }

.price-summary { padding: 16px; border-radius: 23px; background: #444446; }

.price-summary small { display: block; color: #aaaab0; font-size: 13px; }
.price-summary b { display: block; margin-top: 3px; font-size: 28px; line-height: 1; }

.ticket-detail-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px; border-radius: 24px; background: #3b3b3d; }

.ticket-detail-card h3 { margin: 10px 0 4px; font-size: 17px; line-height: 1.25; }
.ticket-detail-card p { margin: 0; color: #aaaab0; font-size: 13px; }

.ticket-person { min-width: 90px; padding: 10px; border-radius: 17px; background: #48484a; }
.ticket-person span, .ticket-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-person span { font-size: 13px; font-weight: 650; }
.ticket-person small { margin-top: 3px; color: #b1b1b6; font-size: 11px; }

.tap-ripple { position: fixed; z-index: 50; width: 38px; height: 38px; margin: -19px; border-radius: 50%; background: rgba(255, 255, 255, .28); pointer-events: none; animation: ripple-pop .38s ease-out both; }

@media (prefers-reduced-motion: no-preference) {
  #screen.screen-enter > * { animation: surface-in var(--motion-standard) var(--ease-standard) both; }
  #screen.screen-enter > :nth-child(2) { animation-delay: 35ms; }
  #screen.screen-enter > :nth-child(3) { animation-delay: 65ms; }
  #screen.screen-enter > :nth-child(4) { animation-delay: 95ms; }
  .quick-action, .quick-action .circle, .segment, .admin-tab, .ticket-card, .user-row, .icon-button, .round-button, .button-primary, .button-secondary, .button-danger, .backline, .purchase-plan-option { transition: transform var(--motion-fast) ease, background-color var(--motion-fast) ease, color var(--motion-fast) ease, opacity var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
  .quick-action:hover .circle, .icon-button:hover, .round-button:hover, .button-primary:hover, .button-secondary:hover, .button-danger:hover { transform: translateY(-2px); }
  .ticket-card:hover, .user-row:hover { transform: translateY(-1px); }
  button:active { transform: scale(.96); }
  .quick-action:active .circle { transform: scale(.93); }
  .modal { animation: overlay-in .18s ease both; }
  .modal-card { animation: modal-in .25s cubic-bezier(.2, .85, .25, 1) both; }
  .profile-menu { animation: profile-menu-in .22s var(--ease-standard) both; }
  .boot-mark { animation: boot-mark-in .34s var(--ease-standard) both; }
  .boot-spinner { animation: spin .72s linear infinite; }
  .browser-gate.boot-exit { animation: overlay-out .2s ease both; }
}

button.tap-pop { animation: tap-pop .3s var(--ease-standard) both; }

@keyframes surface-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes profile-menu-in {
  from { opacity: 0; transform: translateX(10px) scale(.96); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes tap-pop {
  0% { transform: scale(1); }
  42% { transform: scale(.93); }
  100% { transform: scale(1); }
}

@keyframes ripple-pop {
  0% { opacity: .7; transform: scale(.3); }
  100% { opacity: 0; transform: scale(2.8); }
}

@keyframes boot-mark-in {
  from { opacity: 0; transform: translateY(8px) scale(.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes overlay-out {
  to { opacity: 0; transform: scale(1.01); }
}

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

@media (min-width: 700px) {
  .app { padding-right: 28px; padding-left: 28px; }
}