*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--page);font-family:var(--sans)}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:0.48}
.onboarding-wrap{min-height:100%;display:grid;grid-template-columns:minmax(280px,520px);justify-content:center;align-items:start;padding:28px}
.welcome-panel,.content-panel,.metric-card,.plan-card{border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.welcome-panel{display:grid;align-content:start;gap:20px;padding:24px}
.step-badge{width:fit-content;padding:8px 12px;border-radius:999px;color:var(--telegram-dark);background:#e6f4ff;font-size:12px;font-weight:800;text-transform:uppercase}
.welcome-panel h1{margin:0;font-size:30px;line-height:1.06;letter-spacing:0}
.welcome-panel p,.muted{margin:0;color:var(--muted);line-height:1.55}
.business-list,.postback-list{display:grid;gap:10px}
.choice-button,.secondary-button,.primary-button,.ghost-button,.segment-button{min-height:42px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-weight:800}
.choice-button{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:center;padding:10px 12px;text-align:left}
.choice-button span:first-child{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;color:var(--telegram-dark);background:#e6f4ff;font-size:12px;font-weight:900;line-height:0}
.choice-button .business-icon{color:var(--ink);background:transparent}
.choice-button.is-selected{border-color:#8fc9f4;color:var(--telegram-dark);background:#f0f8ff;box-shadow:inset 0 0 0 2px rgba(36,152,237,0.18)}
.choice-button.is-selected .business-icon{color:var(--telegram-dark)}
.business-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.primary-button{border-color:transparent;color:#fff;background:linear-gradient(135deg,var(--telegram),var(--telegram-dark))}
.secondary-button{color:var(--telegram-dark);background:var(--surface)}
.admin-editor-panel{display:grid;gap:12px;margin:0 0 18px;padding:14px;border:1px solid #cfe0f2;border-radius:8px;background:var(--surface-2);box-shadow:0 12px 28px rgba(24,51,86,0.08)}
.admin-editor-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,280px);gap:12px;align-items:end}
.admin-editor-head h2{margin:0;color:var(--ink);font-size:18px}
.admin-editor-head p,.admin-editor-message{margin:4px 0 0;color:var(--muted);font-size:13px;font-weight:700}
.admin-editor-head label,.admin-edit-grid label,.admin-wide-field{display:grid;gap:5px;color:var(--muted);font-size:11px;font-weight:900;letter-spacing:0.03em;text-transform:uppercase}
.admin-editor-panel input,.admin-editor-panel select,.admin-editor-panel textarea{width:100%;min-height:38px;border:1px solid var(--line);border-radius:6px;padding:8px 10px;color:var(--ink);background:var(--panel);font:inherit;font-size:13px;font-weight:700;letter-spacing:0;text-transform:none}
.admin-editor-panel textarea{min-height:86px;resize:vertical}
.admin-editor-body{display:grid;gap:12px}
.admin-edit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.admin-wide-field{grid-column:1 / -1}
.admin-lines{display:grid;gap:8px}
.admin-line-row{display:grid;grid-template-columns:minmax(90px,0.8fr) minmax(120px,1.2fr) auto;gap:8px;align-items:center}
.admin-line-row button,.compact-admin-button{min-height:34px;border-radius:6px;font-size:12px}
.admin-editor-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.admin-create-card{display:grid;gap:10px;padding:12px;border:1px dashed var(--accent);border-radius:10px;background:var(--surface-2)}
.admin-create-title{margin:0;color:var(--ink);font-size:14px;font-weight:800}
.admin-create-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.admin-saved-cards{display:grid;gap:10px;margin-top:4px}
.admin-saved-card{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.admin-saved-card.is-editing{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.admin-saved-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.admin-saved-card-title{display:grid;gap:2px;min-width:0}
.admin-saved-card-title strong{color:var(--ink);font-size:14px}
.admin-saved-card-title small{color:var(--muted);font-size:12px}
.admin-saved-card-meta{color:var(--muted);font-size:12px;font-weight:700}
.admin-saved-card-actions{display:flex;gap:6px;flex:0 0 auto}
.admin-empty-note{margin:4px 0 0;color:var(--muted);font-size:13px}
.audience-editor{display:grid;gap:6px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
.audience-label{color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.04em}
.audience-modes{display:flex;flex-wrap:wrap;gap:14px}
.audience-mode{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink)}
.audience-picker{display:grid;gap:8px}
.audience-picker[hidden]{display:none}
.audience-search{width:100%;box-sizing:border-box;padding:8px 10px;font-size:14px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:6px}
.audience-search:focus{outline:none;border-color:var(--accent)}
.audience-toolbar{display:flex;align-items:center;gap:8px}
.audience-mini{font-size:12px;font-weight:600;padding:4px 10px;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;cursor:pointer}
.audience-mini:hover{border-color:var(--accent)}
.audience-count{margin-left:auto;font-size:12px;color:var(--muted)}
.audience-list{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow-y:auto;padding:6px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.audience-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);min-width:0;padding:7px 8px;border-radius:6px;cursor:pointer}
.audience-check:hover{background:var(--surface-2)}
.audience-check[hidden]{display:none}
.audience-check input[type="checkbox"]{width:auto;flex:0 0 auto;margin:0}
.audience-check-lbl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audience-empty{color:var(--muted);font-size:13px}
.danger-button{color:var(--negative)}
.danger-button:hover{border-color:var(--negative);color:var(--negative)}
.admin-broadcast-panel{margin-bottom:14px}
.ghost-button{color:var(--muted);background:transparent}
.form-stack{display:grid;gap:12px}
.auth-message{padding:10px 12px;border:1px solid rgba(232,59,114,0.26);border-radius:8px;color:#9f1744;background:#fff0f5;font-size:13px;font-weight:900}
.auth-message.is-success{border-color:rgba(13,148,136,0.22);color:#0f766e;background:#e8fbf8}
.field{display:grid;gap:6px}
.field label{color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase}
.field label small{font-size:1em;font-weight:inherit}
.field input,.field select{width:100%;min-height:42px;border:1px solid var(--line);border-radius:8px;padding:0 12px;color:var(--ink);background:var(--surface-2);caret-color:var(--telegram-dark);-webkit-user-select:text;user-select:text}
.field input:focus,.field select:focus{border-color:#8fc9f4;outline:3px solid rgba(36,152,237,0.16)}
.inline-actions{display:flex;flex-wrap:wrap;gap:10px}
.inline-actions button{flex:1 1 150px}
.grid-workbench{position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-height:var(--performance-grid-height)}
.performance-grid-dark{--ag-background-color:#202b3b;--ag-foreground-color:#f2f6fc;--ag-data-color:#f2f6fc;--ag-secondary-foreground-color:#aeb8c9;--ag-header-background-color:#273241;--ag-header-foreground-color:#f2f6fc;--ag-odd-row-background-color:#1d2838;--ag-row-hover-color:#26384f;--ag-selected-row-background-color:#244568;--ag-control-panel-background-color:#202b3b;--ag-subheader-background-color:#202b3b;--ag-input-background-color:#182334;--ag-input-border-color:#3b4a61;--ag-border-color:#344255;--ag-row-border-color:#344255;--ag-value-change-value-highlight-background-color:rgba(45,156,219,0.2);--ag-font-family:var(--sans);--ag-font-size:11px;--ag-cell-horizontal-padding:8px;--ag-cell-widget-spacing:6px}
.pill{display:inline-flex;align-items:center;min-height:32px;padding:6px 10px;border-radius:999px;color:var(--teal);background:#e8fbf8;font-size:12px;font-weight:900}
.content-panel{min-width:0;padding:14px}
.segment-button{min-height:32px;padding:0 10px;color:var(--muted)}
.segment-button.is-active{border-color:rgba(36,152,237,0.42);color:var(--telegram-dark);background:#e6f4ff}
.ag-box{width:100%;height:clamp(430px,calc(100vh - 260px),1200px);min-height:320px}
.ag-theme-quartz{--ag-background-color:#ffffff;--ag-foreground-color:var(--ink);--ag-header-background-color:#f7faff;--ag-odd-row-background-color:#fbfdff;--ag-row-hover-color:#eef7ff;--ag-selected-row-background-color:#e8fbf8;--ag-value-change-value-highlight-background-color:rgba(36,152,237,0.16);--ag-border-color:var(--line);--ag-font-family:var(--sans);--ag-font-size:12px;--ag-cell-horizontal-padding:8px;--ag-cell-widget-spacing:6px}
.plan-card h2{margin:0;font-size:15px}
.event-item{display:grid;gap:4px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
.event-item strong{font-size:13px}
.event-item span{color:var(--muted);font-size:12px}
.plan-card{display:grid;gap:12px;padding:14px}
.check-row{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:center;min-height:32px;color:var(--ink);font-size:13px;font-weight:800}
.keyboard-done-button{display:none;position:fixed;left:max(14px,env(safe-area-inset-left));bottom:max(var(--keyboard-done-bottom,12px),env(safe-area-inset-bottom));z-index:80;min-height:38px;border:1px solid #8fc9f4;border-radius:8px;padding:0 14px;color:#fff;background:var(--telegram);box-shadow:0 12px 28px rgba(21,120,196,0.28);font-size:14px;font-weight:900}
.registration-panel.is-keyboard-active .keyboard-done-button{display:inline-flex;align-items:center;justify-content:center}
.system-toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));z-index:80;width:min(440px,calc(100vw - 28px));transform:translateX(-50%);padding:13px 15px;border:1px solid rgba(232,59,114,0.22);border-radius:8px;color:#ffffff;background:#172235;box-shadow:0 16px 38px rgba(17,29,55,0.28);font-size:14px;font-weight:900;text-align:center;opacity:1;transition:opacity 180ms ease,transform 180ms ease}
.system-toast.is-hiding{opacity:0;transform:translate(-50%,8px)}
.fallback-table{width:100%;border-collapse:collapse;font-size:12px}
.fallback-table th,.fallback-table td{border-bottom:1px solid var(--line);padding:8px;text-align:left}
.fallback-note{margin-bottom:10px;padding:10px;border:1px solid #ffd6a8;border-radius:8px;color:#9a4d00;background:#fff7ed;font-size:13px}
@media (max-width:960px){.onboarding-wrap{grid-template-columns:1fr}
}
@media (max-width:700px){.admin-editor-head{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.admin-edit-grid,.admin-line-row{grid-template-columns:1fr}
.admin-editor-panel{padding:12px}
.grid-workbench{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr);min-height:var(--performance-grid-height)}
.performance-grid-dark{--ag-font-size:11px}
}
@media (max-width:560px){.onboarding-wrap{padding:58px 10px 10px}
.onboarding-wrap{padding-top:10px}
.metric-card,.content-panel,.plan-card{padding:12px}
.grid-workbench{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr);min-height:var(--performance-grid-height)}
.report-toolbar-head{display:grid;justify-content:stretch}
.ag-box{height:380px}
}
.pb-close{border:none;background:transparent;font-size:1.4rem;line-height:1;color:var(--muted);cursor:pointer;padding:2px 8px;border-radius:8px}
.pb-close:hover{background:var(--line)}
.pb-form-msg{min-height:18px;font-size:0.8rem;margin:8px 0;color:var(--muted)}
.lang-switcher{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;background:var(--panel);cursor:pointer}
.lang-switcher-icon{font-size:0.95rem;line-height:1}
.lang-switcher select{border:none;background:transparent;color:var(--ink);font-size:0.84rem;font-weight:600;cursor:pointer;padding:0;appearance:none}
.lang-switcher select:focus-visible{outline:2px solid var(--telegram);outline-offset:2px;border-radius:4px}
.welcome-panel .lang-switcher{align-self:flex-end;margin-bottom:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app-shell-controls{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px}
.theme-toggle{width:38px;height:38px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font-size:1rem;line-height:1}
.theme-toggle:hover{border-color:var(--accent)}
.theme-toggle:focus-visible,.lang-switcher select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.welcome-panel .app-shell-controls{position:static;align-self:flex-end}
:root[data-theme="dark"] .step-badge,:root[data-theme="dark"] .choice-button span:first-child{background:var(--tint);color:var(--accent)}
:root[data-theme="dark"] .choice-button.is-selected{border-color:var(--accent);background:var(--tint);color:var(--ink);box-shadow:inset 0 0 0 2px rgba(124,108,240,0.3)}
:root[data-theme="dark"] .segment-button.is-active{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="dark"] .secondary-button{background:var(--surface-2);color:var(--accent);border-color:var(--line)}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea,:root[data-theme="dark"] .field input,:root[data-theme="dark"] .field select,:root[data-theme="dark"] .field textarea{background:var(--surface-2);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] input::placeholder,:root[data-theme="dark"] textarea::placeholder{color:var(--muted)}
:root[data-theme="dark"] select option{background:var(--panel);color:var(--ink)}
:root[data-theme="dark"] .grid-workbench,:root[data-theme="dark"] .performance-grid-frame{background:transparent}
:root[data-theme="dark"] .admin-editor-panel{border-color:var(--line);background:var(--panel)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--accent)}
.check-row input[type="checkbox"]{width:16px;height:16px;flex:0 0 auto}
:root[data-theme="dark"] .auth-message{background:rgba(251,113,133,0.14);color:#ffb4c2}
:root[data-theme="dark"] .auth-message.is-success{background:rgba(52,211,153,0.14);color:#8ef0c4}
:root[data-theme="dark"] .pill{background:rgba(124,108,240,0.16);color:#c7bdff}
:root[data-theme="dark"] .fallback-note{background:rgba(251,146,60,0.14);color:#ffcd9a;border-color:var(--line)}
:root[data-theme="dark"] .admin-editor-panel{border-color:var(--line)}
:root[data-theme="dark"] .secondary-button:hover{border-color:var(--accent)}
.app-modal-overlay{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px;background:rgba(10,16,36,0.55);backdrop-filter:blur(2px)}
.app-modal{width:min(420px,100%);display:flex;flex-direction:column;gap:12px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
.app-modal-title{margin:0;font-size:1.02rem;color:var(--ink)}
.app-modal-message{margin:0;font-size:0.88rem;color:var(--muted)}
.app-modal-input{width:100%;height:38px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--ink);padding:0 12px;font-size:0.9rem}
.app-modal-input:focus{outline:2px solid var(--accent);outline-offset:1px}
.app-modal-error{margin:0;font-size:0.8rem;font-weight:600;color:#e0466e}
.app-modal-hint{margin:0;font-size:0.78rem;color:var(--muted)}
.app-modal-actions{display:flex;justify-content:flex-end;gap:8px}
.app-modal-actions .secondary-button,.app-modal-actions .primary-button{min-height:36px;padding:0 16px}
.app-modal-danger{background:linear-gradient(135deg,#f0506e,#d92d54)}
:where(button,a,input,select,textarea,[tabindex],[role="tab"],[role="button"]):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important}
}
#mainView .secondary-button,#mainView .primary-button,#mainView .ghost-button,#mainView .segment-button{min-height:30px;border-radius:7px;font-size:12.5px}
#mainView .segment-button{min-height:28px}
#mainView .pill{min-height:22px;padding:2px 8px;font-size:11px}
#mainView .status-pill{min-height:22px;font-size:11px}
#mainView .field input,#mainView .field select{min-height:34px}
#mainView .field label{font-size:11px}
#mainView .grid-search{height:30px}
@media (min-width:769px){#mainView .field input,#mainView .field select,#mainView .grid-search{font-size:13px}
}
@media (max-width:768px){#mainView input[type="text"],#mainView input[type="email"],#mainView input[type="password"],#mainView input[type="search"],#mainView input[type="number"],#mainView input:not([type]),#mainView textarea,#mainView .grid-search,.app-modal-input{font-size:16px}
}
.app-modal{padding:14px;gap:10px}
.app-modal-title{font-size:15px}
.app-modal-message{font-size:12.5px}
.app-modal-input{height:34px}
.mgmt-modal{width:min(460px,100%)}
.mgmt-drawer{width:min(620px,100%);max-height:88vh}
.app-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.app-modal-head .muted{margin:2px 0 0;font-size:12px}
.app-modal-body{display:grid;gap:10px;overflow:auto}
.mgmt-modal-msg:empty,.app-modal-error:empty{display:none}
@media (max-width:700px){.ag-paging-panel{flex-wrap:wrap;height:auto;min-height:0;justify-content:center;row-gap:2px;padding:6px 4px}
.ag-paging-panel > *{margin:0 6px;min-width:0}
.ag-paging-row-summary-panel,.ag-paging-page-summary-panel{white-space:nowrap;flex:none;display:inline-flex;align-items:center}
.ag-paging-page-size{flex:none;white-space:nowrap}
.ag-status-bar{flex-wrap:wrap;height:auto;padding:4px 8px;line-height:1.6}
.ag-status-bar .ag-status-panel{white-space:nowrap}
.ag-column-drop-horizontal{height:auto;min-height:32px;flex-wrap:wrap;padding:4px 8px}
}
