:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f5f1ff;
  background: #100e16;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at top, #2b2141, #100e16 48%); }
button, input { font: inherit; }
button { cursor: pointer; }

.shell { width: min(1080px, 100%); margin: 0 auto; padding: 24px 16px 48px; }
.hero { padding: 18px 0 22px; }
.eyebrow { color: #bca8ff; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 8px 0 8px; font-size: clamp(28px, 7vw, 48px); line-height: 1; }
.subtitle { max-width: 760px; color: #c8c0d4; line-height: 1.55; margin: 0; }

.statusbar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.pill { border: 1px solid #413753; background: #1d1927; color: #d7cee4; padding: 7px 10px; border-radius: 999px; font-size: 12px; }
.pill.ok { border-color: #315c48; background: #183127; color: #9ce2bc; }
.pill.warn { border-color: #755d2f; background: #392e18; color: #f4d188; }

.grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 860px) { .grid { grid-template-columns: 1.05fr .95fr; } }
.card { background: rgba(28, 24, 38, .94); border: 1px solid #3a3149; border-radius: 18px; padding: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.24); }
.card h2 { margin: 0 0 8px; font-size: 20px; }
.card p { color: #c8c0d4; line-height: 1.5; }

.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tab { flex: 1; border: 1px solid #43384f; background: #17131f; color: #c9bfd7; padding: 10px; border-radius: 12px; font-weight: 800; }
.tab.active { background: #7e5df1; border-color: #9e86f5; color: white; }

.form { display: grid; gap: 12px; }
label { display: grid; gap: 7px; color: #dcd5e8; font-size: 13px; font-weight: 700; }
input { width: 100%; border: 1px solid #4b4059; background: #110e17; color: #fff; border-radius: 12px; padding: 12px 13px; outline: none; }
input:focus { border-color: #9d84ff; box-shadow: 0 0 0 3px rgba(126,93,241,.18); }
.hint { color: #8f849c; font-size: 12px; line-height: 1.4; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.primary, .secondary, .danger { border: 0; border-radius: 12px; padding: 12px 15px; font-weight: 900; }
.primary { background: linear-gradient(135deg, #8a65ff, #6846dd); color: white; }
.secondary { background: #2b2437; color: #e7def3; border: 1px solid #4b4059; }
.danger { background: #3b2029; color: #ffc6d1; border: 1px solid #6f3848; }
button:disabled { opacity: .55; cursor: wait; }

.profile { display: grid; gap: 8px; margin-top: 14px; }
.row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid #332b40; font-size: 13px; }
.row span:first-child { color: #978ca5; }
.row code { overflow-wrap: anywhere; color: #e8dfff; }

.checklist { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.checklist li { display: flex; gap: 9px; color: #d3cadf; line-height: 1.4; }
.checklist li::before { content: "○"; color: #9d84ff; font-weight: 900; }

.log-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.log { margin-top: 12px; min-height: 260px; max-height: 520px; overflow: auto; background: #0d0b11; border: 1px solid #332b40; border-radius: 14px; padding: 12px; }
.log-entry { padding: 9px 0; border-bottom: 1px solid #282130; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.log-entry:last-child { border-bottom: 0; }
.log-time { color: #796e86; }
.log-info { color: #d8d0e3; }
.log-ok { color: #8fe0b3; }
.log-warn { color: #ffd17c; }
.log-error { color: #ff9aae; }

.notice { margin-top: 12px; border-left: 3px solid #8b6aff; background: #241d31; padding: 11px 12px; border-radius: 8px; color: #cfc5dc; font-size: 13px; line-height: 1.5; }
.hidden { display: none !important; }

.telegram-probe { margin-top: 20px; }
.telegram-probe .telegram-grid { display: grid; gap: 10px; margin-top: 12px; }
.telegram-probe .telegram-result { margin-top: 12px; }
.telegram-probe .telegram-result .row { align-items: flex-start; }
.telegram-probe .telegram-result code { overflow-wrap: anywhere; text-align: right; }