:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #070b15;
  color: #f4f6fb;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--tg-theme-bg-color, radial-gradient(circle at top, #17213b 0, #090d18 38%, #070b15 100%));
  color: var(--tg-theme-text-color, #f4f6fb);
}
button, input, textarea, select { font: inherit; }
button, label, input, textarea, select { -webkit-tap-highlight-color: transparent; }

.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) 18px 14px;
  background: rgba(7, 11, 21, .86); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar h1 { margin: 2px 0 0; font-size: 20px; }
.eyebrow { color: #8ea0c8; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.badge { padding: 7px 10px; border-radius: 999px; color: #b8ffd9; background: rgba(39, 208, 128, .12); border: 1px solid rgba(39, 208, 128, .28); font-size: 12px; }
.topbar-actions { display: flex; align-items: center; gap: 7px; }
.topbar-actions .badge:first-child { color: #c8d5ff; background: rgba(93,124,245,.12); border-color: rgba(93,124,245,.28); }

.app-main { width: min(100%, 720px); margin: 0 auto; padding: 18px 14px 138px; }
.tab-panel { display: grid; gap: 14px; }
.tab-heading { margin: 0 0 2px; }
.screen-intro { padding: 2px 3px 4px; }
.screen-intro h2 { margin: 4px 0 5px; font-size: 23px; }
.screen-intro p { margin: 0; }
.card { background: var(--tg-theme-secondary-bg-color, rgba(17, 24, 42, .92)); border: 1px solid rgba(255,255,255,.09); border-radius: 18px; padding: 16px; box-shadow: 0 14px 40px rgba(0,0,0,.22); }
.access-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.access-card { width: min(100%, 360px); text-align: center; }
.access-card h1 { margin: 14px 0 8px; font-size: 22px; }
.access-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto; border-radius: 18px; background: linear-gradient(135deg, #5d7cf5, #7f5cf5); color: #fff; font-weight: 800; }
.intro { margin-bottom: 14px; }
h2 { margin: 0 0 12px; font-size: 18px; }
h3 { margin: 0; font-size: 16px; }
p { color: #bdc7dd; line-height: 1.5; }
.connection-info { margin-bottom: 14px; }
.connection-info p { color: var(--muted, #8997b5); line-height: 1.5; }
.connection-heading { margin: 0 0 8px; }
.profile-card h2, .delivery-guide h2 { margin-top: 5px; }
.profile-row { display: flex; align-items: center; gap: 12px; }
.profile-row > div { display: grid; gap: 4px; }
.profile-row small { color: #8997b5; line-height: 1.4; }
.profile-avatar { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 14px; background: rgba(39,208,128,.14); color: #8df0b9; font-weight: 800; }
.status-chip { padding: 6px 9px; border: 1px solid; border-radius: 999px; font-size: 11px; white-space: nowrap; }
.mode-mock { background: rgba(255,184,77,.14); border-color: rgba(255,184,77,.35); color: #ffd28a; }
.platform-cards { display: grid; gap: 10px; margin: 15px 0 18px; }
.provider-card { display: grid; gap: 13px; padding: 13px; border: 1px solid #25314b; border-radius: 15px; background: #0b1120; }
.provider-card-head { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.provider-card-head h3 { margin: 0 0 3px; }
.provider-card-head small { color: #8997b5; }
.provider-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #fff; font-size: 12px; font-weight: 850; letter-spacing: -.02em; }
.provider-instagram { background: linear-gradient(135deg, #7b40d8, #d94378 60%, #ff9a3d); }
.provider-youtube { background: #e33d3d; }
.provider-tiktok { background: linear-gradient(135deg, #28d9d1, #141727 48%, #ff4773); }
.capability-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; color: #bdc7dd; font-size: 13px; }
.capability-list li { position: relative; padding-left: 19px; }
.capability-list li::before { content: '✓'; position: absolute; left: 0; color: #78dfa7; }
.provider-action { width: 100%; color: #8997b5; }
.provider-action:disabled { cursor: default; opacity: .72; }
.settings-levels { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.09); }
.settings-levels > div { display: grid; grid-template-columns: 30px 1fr; align-items: start; gap: 10px; }
.settings-levels > div > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(93,124,245,.14); color: #cbd7ff; font-size: 12px; font-weight: 800; }
.settings-levels p { display: grid; gap: 2px; margin: 0; }
.settings-levels small { color: #8997b5; }
.system-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-top: 5px; }
.system-heading h2 { margin: 0 0 4px; }
.system-heading p, .system-card > p { margin: 0; font-size: 12px; }
.owner-chip { color: #b9caff; background: rgba(83,139,255,.12); border-color: rgba(83,139,255,.3); }
.current-connections h2 { margin-top: 5px; }
.delivery-guide summary { cursor: pointer; color: #d9e1f2; font-weight: 750; }
.connection-info details { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.09); }
.connection-info summary { cursor: pointer; font-weight: 700; }
.connection-info ol { margin: 12px 0; padding-left: 22px; color: #8997b5; }
.connection-info li + li { margin-top: 7px; }
.managed-connections { display: grid; gap: 8px; margin: 14px 0; }
.managed-connection { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #25314b; border-radius: 13px; background: #0b1120; }
.connection-actions { display: flex; align-items: center; gap: 7px; }
.compact { min-height: 34px; padding: 7px 9px; font-size: 11px; }
.connection-form { margin-top: 14px; }
.secret-warning { margin: 0; color: #ffd28a !important; font-size: 12px; }
.connection-mode-note { margin-bottom: 0; font-size: 12px; }
.provider-list { display: grid; gap: 8px; margin: 15px 0; }
.provider-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 12px; border: 1px solid #25314b; border-radius: 12px; background: #0b1120; }
.provider-row span { color: #8997b5; font-size: 12px; }
.owner-note { display: grid; gap: 4px; margin: 14px 0 18px; padding: 12px; border: 1px solid rgba(83,139,255,.3); border-radius: 13px; background: rgba(83,139,255,.09); }
.owner-note strong { color: #c8d8ff; font-size: 13px; }
.owner-note span { color: #8997b5; font-size: 12px; line-height: 1.4; }
.delivery-guide ol { display: grid; gap: 9px; margin: 12px 0; padding-left: 22px; color: #bdc7dd; line-height: 1.45; }
.browser-policy { margin: 14px 0 0; padding: 12px; border-radius: 13px; background: rgba(255,184,77,.09); border: 1px solid rgba(255,184,77,.22); color: #c8d0e1; font-size: 12px; }
.browser-policy strong { color: #ffd28a; }
.stack { display: grid; gap: 14px; }
.composer-step { display: grid; gap: 14px; }
.step-heading { display: flex; align-items: center; gap: 11px; }
.step-heading > div { display: grid; gap: 3px; }
.step-heading h3 { margin: 0; }
.step-heading small { color: #8997b5; line-height: 1.35; }
.step-number { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 11px; background: rgba(93,124,245,.16); color: #cbd7ff; font-weight: 800; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.publish-summary { position: sticky; z-index: 4; bottom: calc(78px + env(safe-area-inset-bottom)); display: grid; gap: 12px; background: rgba(17,24,42,.97); box-shadow: 0 -10px 30px rgba(0,0,0,.28); }
.summary-copy { display: grid; gap: 3px; }
.summary-copy span { color: #8997b5; font-size: 12px; }
.publish-summary .primary { width: 100%; }

label > span, legend { display: block; color: #cbd4e8; font-size: 13px; margin-bottom: 7px; }
.field-help { display: block; margin: 6px 0 10px; color: #8492af; font-size: 12px; line-height: 1.4; }
input, textarea, select {
  width: 100%; min-height: 46px; border: 1px solid #2c3752; border-radius: 12px;
  background: #0b1120; color: #f4f6fb; padding: 12px; outline: none;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: #6d8cff; box-shadow: 0 0 0 3px rgba(109,140,255,.16); }
fieldset { border: 0; padding: 0; margin: 0; }

.upload-zone { display: grid; place-items: center; min-height: 112px; padding: 16px; text-align: center; border: 1px dashed #516186; border-radius: 15px; background: rgba(92,119,204,.08); cursor: pointer; }
.upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-title { margin: 0 0 6px; color: #fff; font-weight: 700; }
.muted { color: #8997b5; }

.account-list { display: grid; gap: 8px; }
.account { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 12px; background: #0b1120; border: 1px solid #25314b; border-radius: 13px; }
.account input { width: 22px; min-height: 22px; accent-color: #7c9aff; }
.account-copy { margin: 0; display: grid; gap: 3px; }
.account-copy strong { font-size: 14px; }
.account-copy small, .target-identity small { color: #8492af; }

button { min-height: 44px; border: 0; border-radius: 12px; padding: 11px 14px; font-weight: 700; color: #fff; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
.primary { background: linear-gradient(135deg, #5d7cf5, #7f5cf5); }
.secondary { background: #273557; }
.ghost { background: transparent; border: 1px solid #34425f; color: #bdc7dd; }
.error { border: 1px solid rgba(255,93,115,.45); background: rgba(255,93,115,.1); color: #ffbac4; padding: 11px; border-radius: 12px; }

.section-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.section-heading h2 { margin: 0; }
.job-list { display: grid; gap: 12px; }
.job-card { display: grid; gap: 13px; }
.job-head, .job-footer, .target-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.caption { margin: 0; white-space: pre-wrap; }
.targets { display: grid; gap: 7px; }
.target-row { min-height: 48px; padding: 9px 11px; border-radius: 11px; background: #0b1120; }
.target-identity { display: grid; gap: 2px; }
.status { flex: 0 0 auto; padding: 6px 8px; border-radius: 999px; font-size: 11px; background: #26314b; color: #cbd4e8; }
.status-completed, .status-published { background: rgba(39,208,128,.13); color: #8df0b9; }
.status-processing, .status-running { background: rgba(83,139,255,.15); color: #a9c4ff; }
.status-retry_wait { background: rgba(255,193,7,.14); color: #ffd66b; }
.status-failed, .status-partial_failed { background: rgba(255,93,115,.15); color: #ffadb9; }
.status-cancelled { background: rgba(133,146,173,.14); color: #cbd4e8; }
.bottom-nav {
  position: fixed; z-index: 10; left: 50%; bottom: 0; transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(3, 1fr); width: min(100%, 720px);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(7, 11, 21, .94); border-top: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(18px);
}
.tab-button {
  display: grid; place-items: center; gap: 2px; min-height: 54px; padding: 5px 8px;
  border-radius: 13px; background: transparent; color: #8290ac; font-size: 11px;
}
.tab-button.active { color: #dce5ff; background: rgba(93,124,245,.14); }
.tab-icon { font-size: 21px; line-height: 1; }

@media (min-width: 640px) {
  .app-main { padding-top: 28px; }
  .account-list { grid-template-columns: 1fr 1fr; }
  .bottom-nav { bottom: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding-bottom: 8px; }
}

@media (max-width: 480px) {
  .topbar-actions .badge:last-child { display: none; }
}