:root {
  --bg: #111417;
  --panel: #202428;
  --panel-2: #2b3035;
  --text: #f4f6f7;
  --muted: #aeb8bf;
  --line: #3b4249;
  --accent: #59c293;
  --pink: #ff0a85;
  --orange: #ff8a00;
  --blue: #385d82;
  --glow: 0 22px 70px rgba(0,0,0,.34);
  --soft-glow: 0 18px 54px rgba(0,0,0,.22);
}
* { box-sizing: border-box; }
html { min-width:0; }
body { margin:0; background:
  radial-gradient(circle at 12% -10%, rgba(89,194,147,.16), transparent 28%),
  radial-gradient(circle at 94% 4%, rgba(255,10,133,.10), transparent 24%),
  linear-gradient(180deg,#14181c 0%, var(--bg) 34%, #101214 100%);
  color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; min-height:100vh; overflow-x:hidden; }
a { color:inherit; }
.topbar { height:58px; background:linear-gradient(90deg,rgba(49,91,132,.96),rgba(36,67,98,.96)); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 28px; font-weight:900; position:sticky; top:0; z-index:20; overflow:hidden; box-shadow:0 12px 34px rgba(0,0,0,.22); backdrop-filter:blur(14px); }
.topbar > div { min-width:0; }
.topbar-brand { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar-user { flex:0 0 auto; }
.topbar span { color:#73d1a2; }
.admin-menu-toggle { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(255,255,255,.12); color:#fff; padding:8px 12px; font:inherit; font-weight:950; box-shadow:inset 0 1px 0 rgba(255,255,255,.08); flex:0 0 auto; }
.admin-menu-toggle[aria-expanded="true"] { background:#11181c; border-color:#73d1a2; color:#fff; }
.menu-toggle-icon { font-size:18px; line-height:1; }
.admin-menu-backdrop { display:none; }
.layout { display:grid; grid-template-columns:minmax(220px,250px) minmax(0,1fr); min-height:calc(100vh - 58px); transition:grid-template-columns .2s ease; }
.sidebar { border-right:1px solid #111; background:linear-gradient(180deg,#171a1d,#121416); padding:10px; position:sticky; top:58px; height:calc(100vh - 58px); max-height:calc(100vh - 58px); overflow:hidden; display:flex; flex-direction:column; gap:8px; transition:opacity .18s ease, transform .18s ease, padding .18s ease, border-color .18s ease; box-shadow:inset -1px 0 0 rgba(255,255,255,.035); }
.sidebar-menu { min-height:0; flex:1 1 auto; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-gutter:stable; padding-right:2px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; align-content:start; }
.sidebar-footer { flex:0 0 auto; border-top:1px solid #30363d; padding-top:8px; background:#151719; display:grid; grid-template-columns:1fr; gap:6px; }
.sidebar-menu::-webkit-scrollbar { width:10px; }
.sidebar-menu::-webkit-scrollbar-track { background:#101214; }
.sidebar-menu::-webkit-scrollbar-thumb { background:#3f4449; border-radius:999px; border:2px solid #151719; }
.navlink { display:flex; align-items:center; justify-content:center; gap:6px; min-height:58px; padding:8px; border:1px solid #30363d; border-radius:8px; background:linear-gradient(180deg,#202428,#191d20); color:var(--muted); text-decoration:none; font-weight:850; font-size:12px; line-height:1.15; margin:0; overflow-wrap:anywhere; text-align:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); transition:transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease; }
.sidebar-footer .navlink { min-height:38px; justify-content:flex-start; text-align:left; background:#20262a; font-size:13px; padding:8px 10px; }
.navlink.active, .navlink:hover { background:linear-gradient(180deg,#243d34,#1b2d27); border-color:#3d8f68; color:#fff; box-shadow:0 12px 30px rgba(89,194,147,.10), inset 0 1px 0 rgba(255,255,255,.06); transform:translateY(-1px); }
.main { padding:28px; overflow:auto; min-width:0; }
.crumb { background:rgba(43,48,53,.82); border:1px solid rgba(255,255,255,.05); border-radius:8px; padding:14px 18px; margin-bottom:26px; color:#dce3e6; font-weight:800; box-shadow:var(--soft-glow); }
h1 { font-size:44px; margin:0 0 24px; font-weight:850; }
.kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:20px; }
.card { background:linear-gradient(180deg,rgba(35,39,43,.98),rgba(29,32,36,.98)); border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:18px; box-shadow:var(--soft-glow); }
.kpi-label { color:var(--muted); font-weight:800; font-size:13px; text-transform:uppercase; }
.kpi-value { font-size:36px; font-weight:950; margin-top:8px; }
.kpi-note { color:var(--accent); font-weight:850; margin-top:6px; }
.chart-grid { display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:20px; }
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:18px 0; flex-wrap:wrap; }
.btn, button { border:0; border-radius:6px; background:#4b4f54; color:#fff; padding:10px 14px; font-weight:850; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; }
.btn:hover, button:hover { transform:translateY(-1px); box-shadow:0 14px 34px rgba(0,0,0,.25); }
.btn:active, button:active { transform:translateY(0); box-shadow:none; }
.btn-green { background:linear-gradient(135deg,#51b789,#2f9a72); }
.btn-pink { background:linear-gradient(135deg,#ff0a85,#d80070); }
.btn:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline:3px solid rgba(89,194,147,.45); outline-offset:2px; }
.search { display:flex; border-radius:6px; overflow:hidden; background:#fff; }
.search input { width:min(360px,72vw); border:0; padding:11px 12px; font:inherit; }
.search select { border:0; border-left:1px solid #d8dde3; padding:0 10px; font:inherit; color:#20242a; background:#fff; }
.search button { border-radius:0; background:#3c3f43; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:8px; }
table { width:100%; border-collapse:collapse; min-width:1060px; }
th, td { padding:13px 14px; text-align:left; white-space:nowrap; }
th { background:#1f2225; color:#e6ecef; font-size:14px; }
tr:nth-child(odd) td { background:#34383b; }
tr:nth-child(even) td { background:#24272a; }
tbody tr:hover td { background:#29362f; }
td { color:#f3f3f3; font-weight:650; }
.muted { color:var(--muted); }
.pill { display:inline-flex; align-items:center; border-radius:999px; padding:4px 9px; background:#173f2d; color:#91e8ba; font-size:12px; font-weight:900; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.72); display:none; place-items:center; z-index:50; padding:20px; }
.modal.open { display:grid; }
.modal-card { width:min(720px,100%); background:#333638; border-radius:8px; border:1px solid var(--line); box-shadow:0 30px 80px rgba(0,0,0,.45); }
.modal-head, .modal-foot { padding:18px 22px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.modal-foot { border-top:1px solid var(--line); border-bottom:0; justify-content:flex-end; }
.modal-body { padding:28px; display:grid; grid-template-columns:160px 1fr; gap:12px 20px; }
.modal-body strong { text-align:right; }
.login-page { min-height:100vh; display:grid; grid-template-rows:58px 1fr auto; background:
  radial-gradient(circle at 18% 18%, rgba(255,10,133,.18), transparent 26%),
  radial-gradient(circle at 86% 12%, rgba(89,194,147,.20), transparent 28%),
  linear-gradient(135deg,#15181c,#202123); }
.login-card { width:min(520px, calc(100vw - 32px)); margin:auto; background:rgba(36,39,42,.88); border:1px solid rgba(255,255,255,.09); border-radius:8px; padding:44px; text-align:left; box-shadow:0 34px 100px rgba(0,0,0,.46); backdrop-filter:blur(18px); }
.avatar { width:120px; height:120px; border-radius:50%; background:#ddd; margin:0 auto 34px; }
.login-brandmark { width:62px; height:62px; border-radius:8px; display:grid; place-items:center; background:linear-gradient(135deg,var(--pink),var(--accent)); color:#fff; font-weight:950; font-size:22px; margin-bottom:24px; box-shadow:0 18px 45px rgba(255,10,133,.22); }
.premium-login-card h1 { font-size:34px; line-height:1; margin:0 0 10px; }
.login-subtitle { color:var(--muted); margin:0 0 26px; font-weight:750; }
.login-card label { display:block; color:var(--muted); font-weight:850; margin-bottom:14px; }
.login-card input { width:100%; min-height:50px; border:1px solid #4a5056; border-radius:6px; margin:7px 0 0; padding:12px 14px; font:inherit; background:#151719; color:#fff; }
.login-card .btn { width:100%; justify-content:center; min-height:50px; margin-top:8px; }
.login-assurance { margin-top:18px; color:var(--muted); font-size:13px; line-height:1.35; text-align:center; }
.login-footer { border-top:1px solid #454545; padding:22px; }
.login-footer a { color:#00d18f; text-decoration:none; font-weight:900; }
.notice { border-radius:6px; padding:12px 14px; margin-bottom:16px; font-weight:800; }
.notice.bad { background:#5a2222; color:#ffd4d4; }
.notice.ok { background:#163d2b; color:#a7f3c8; }
.form-card { background:linear-gradient(180deg,rgba(35,39,43,.98),rgba(29,32,36,.98)); border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:20px; margin-bottom:20px; box-shadow:var(--soft-glow); }
.form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.form-grid label { color:var(--muted); font-weight:850; font-size:13px; }
.form-grid input,.form-grid select,.form-grid textarea { width:100%; min-height:42px; border:1px solid #4a5056; border-radius:6px; background:#151719; color:#fff; padding:10px; font:inherit; margin-top:6px; transition:border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.login-card input:focus { border-color:#59c293; box-shadow:0 0 0 4px rgba(89,194,147,.10); background:#111416; }
.form-grid textarea { min-height:92px; resize:vertical; }
.builder-table { display:grid; gap:8px; margin:12px 0 22px; }
.builder-head, .builder-row { display:grid; grid-template-columns:1fr 1.5fr .8fr .8fr 1.4fr; gap:10px; align-items:center; }
.builder-head { color:var(--muted); font-size:12px; font-weight:900; text-transform:uppercase; }
.builder-row { background:#1d2023; border:1px solid var(--line); border-radius:8px; padding:10px; }
.builder-row input,.builder-row select,.builder-row textarea { width:100%; min-height:38px; border:1px solid #4a5056; border-radius:6px; background:#151719; color:#fff; padding:8px; font:inherit; }
.builder-row textarea { min-height:52px; resize:vertical; }
.builder-row label { color:var(--muted); font-weight:850; }
.actions-row { display:flex; gap:10px; flex-wrap:wrap; }
.asset-preview-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.asset-preview-row figure { margin:0; background:#151719; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.asset-preview-row img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.asset-preview-row figcaption { padding:8px 10px; color:var(--muted); font-weight:850; font-size:12px; }
.asset-delete { display:flex; align-items:center; gap:8px; padding:9px 10px 11px; border-top:1px solid var(--line); color:#ffd4d4; font-size:12px; font-weight:900; background:#21191b; }
.asset-delete input { width:auto; min-height:auto; margin:0; accent-color:var(--pink); }
.badge-spec-card { border:1px solid #395849; border-radius:8px; background:#13231b; color:#dff8e9; padding:16px; margin:12px 0 18px; }
.badge-spec-card strong { display:block; margin-bottom:8px; color:#fff; font-size:16px; }
.badge-spec-card ul { margin:0; padding-left:18px; display:grid; gap:5px; }
.badge-spec-card li { color:#bfe9d0; font-weight:750; }
.form-grid small { display:block; margin-top:6px; color:var(--muted); font-size:12px; font-weight:800; line-height:1.35; }
.webflow-editor { display:grid; grid-template-columns:minmax(420px,540px) minmax(0,1fr); gap:18px; align-items:start; }
.designer-panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:20px; }
.builder-tabs { position:sticky; top:68px; z-index:4; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:0 0 14px; margin-bottom:16px; background:var(--panel); }
.builder-tab { min-height:42px; border:1px solid var(--line); border-radius:8px; background:#1d2023; color:var(--muted); justify-content:center; font-size:12px; }
.builder-tab.active { background:var(--pink); border-color:var(--pink); color:#fff; box-shadow:0 14px 34px rgba(255,10,133,.18); }
.builder-pane { display:none; }
.builder-pane.active { display:block; }
.builder-pane h2 { margin-top:0; }
.module-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:16px 0; }
.module-toggle { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; min-height:84px; border:1px solid var(--line); border-radius:8px; background:#1b1f23; padding:14px; cursor:pointer; }
.module-toggle input { position:absolute; opacity:0; pointer-events:none; }
.module-switch { width:46px; height:26px; border-radius:999px; border:1px solid #48515a; background:#111418; position:relative; transition:background .16s ease, border-color .16s ease; }
.module-switch::after { content:""; width:18px; height:18px; border-radius:50%; background:#8b949e; position:absolute; top:3px; left:4px; transition:transform .16s ease, background .16s ease; }
.module-toggle input:checked + .module-switch { background:#173f2d; border-color:#2fcf85; }
.module-toggle input:checked + .module-switch::after { transform:translateX(18px); background:#34d399; }
.module-toggle strong { display:block; color:#fff; margin-bottom:4px; }
.module-toggle small { display:block; color:var(--muted); font-weight:800; line-height:1.35; }
.designer-canvas { position:sticky; top:76px; background:#101214; border:1px solid var(--line); border-radius:8px; min-height:720px; overflow:hidden; }
.canvas-toolbar { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); background:#181b1f; color:var(--muted); }
.live-preview { padding:20px; background:#e9edf2; min-height:680px; overflow:auto; }
.preview-page { background:#fff; color:#151821; min-height:620px; border-radius:8px; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.28); }
.preview-hero { min-height:300px; background:#111; background-size:cover; background-position:center; color:#fff; padding:34px; display:grid; align-content:end; }
.preview-brand { font-weight:950; margin-bottom:auto; }
.preview-brand span { color:var(--p); }
.preview-brand img { max-width:170px; max-height:88px; object-fit:contain; display:block; }
.preview-hero h1 { font-size:46px; line-height:.95; margin:70px 0 14px; }
.preview-hero p { color:#d9e0e8; font-size:18px; max-width:620px; }
.preview-hero button { width:max-content; border:0; border-radius:6px; padding:13px 22px; background:var(--p); color:#fff; font-weight:900; }
.preview-page section { padding:28px 34px; }
.preview-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.preview-cards div { min-height:86px; border-left:5px solid var(--s); background:#f4f6f8; border-radius:6px; padding:12px; }
.preview-cards strong { display:block; color:var(--p); font-size:26px; line-height:1; }
.preview-cards span,.preview-agenda p { color:#59636d; font-weight:800; }
.preview-speakers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.preview-speakers span { background:#101214; color:#fff; border-radius:6px; padding:12px; font-weight:900; }
iframe[src*="zadarma"], div[class*="zadarma"], div[id*="zadarma"], button[class*="zadarma"] { z-index:999999 !important; }
.followup-field input { margin-bottom:8px; }
.quick-dates { display:flex; gap:8px; flex-wrap:wrap; }
.quick-dates button { padding:7px 9px; border-radius:999px; background:#343a40; color:#dfe7ea; font-size:12px; }
.span-2 { grid-column:span 2; }
.span-3 { grid-column:span 3; }
.pipeline { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.pipe { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:14px; }
.pipe b { display:block; font-size:28px; margin-top:8px; }
.acl-list { display:flex; gap:8px; flex-wrap:wrap; }
.acl-chip { display:inline-flex; align-items:center; min-height:30px; border-radius:999px; padding:5px 10px; background:#1b1f23; border:1px solid var(--line); color:var(--muted); font-size:12px; font-weight:900; }
.acl-chip.on { background:#173f2d; border-color:#2b7654; color:#a7f3c8; }
.acl-matrix { display:grid; grid-template-columns:160px 1fr; gap:10px; align-items:start; }
.acl-head { color:var(--muted); font-size:12px; font-weight:950; text-transform:uppercase; border-bottom:1px solid var(--line); padding-bottom:8px; }
.usage-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.usage-bar { height:11px; background:#151719; border-radius:999px; overflow:hidden; border:1px solid var(--line); }
.usage-bar span { display:block; height:100%; background:var(--accent); border-radius:999px; }
.usage-bar.warn span { background:var(--orange); }
.usage-bar.danger span { background:var(--pink); }
.usage-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:18px 0; }
.usage-card { display:flex; flex-direction:column; gap:12px; min-height:180px; }
.usage-card h3 { margin:0; }
.usage-card .btn { margin-top:auto; width:max-content; }
.usage-number { font-size:30px; font-weight:950; }
.usage-number span { color:var(--muted); font-size:16px; }
.arrival-mini { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.arrival-mini span { background:#151719; border:1px solid var(--line); border-radius:6px; padding:8px; color:var(--muted); font-size:12px; font-weight:850; }
.arrival-mini strong { display:block; color:#fff; font-size:22px; margin-top:2px; }
.integration-guide { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:18px 0 22px; }
.integration-guide div { background:#202428; border:1px solid var(--line); border-radius:8px; padding:16px; display:grid; grid-template-columns:40px 1fr; gap:6px 12px; align-items:start; }
.integration-guide span { grid-row:span 2; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:#143728; color:#9df1bf; font-weight:950; }
.integration-guide strong { font-size:17px; }
.integration-guide p { margin:0; color:var(--muted); line-height:1.4; grid-column:2; }
.integration-audit-panel { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(320px,.9fr) auto; gap:16px; align-items:center; background:linear-gradient(135deg,#182028,#151719); border:1px solid rgba(255,255,255,.09); border-radius:8px; padding:18px; margin:0 0 24px; box-shadow:var(--soft-glow); }
.integration-audit-copy h2 { margin:6px 0 8px; }
.integration-audit-copy p { margin:0; color:var(--muted); line-height:1.45; }
.audit-badge { display:inline-flex; width:max-content; border-radius:999px; padding:5px 10px; background:#143728; color:#9df1bf; font-size:12px; font-weight:950; text-transform:uppercase; letter-spacing:.04em; }
.audit-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.audit-metrics div { min-height:76px; background:#101418; border:1px solid #303942; border-radius:8px; padding:10px; display:grid; align-content:center; gap:4px; }
.audit-metrics strong { display:block; color:#fff; font-size:18px; line-height:1.05; overflow-wrap:anywhere; }
.audit-metrics span { color:var(--muted); font-size:11px; font-weight:900; text-transform:uppercase; }
.integration-directory { display:grid; gap:16px; margin:18px 0 24px; }
.integration-directory-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; background:#151719; border:1px solid var(--line); border-radius:8px; padding:18px; }
.integration-directory-head h2 { margin:0 0 6px; }
.integration-directory-head p { margin:0; max-width:820px; }
.integration-category-block { background:#202326; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.integration-category-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:16px 18px; background:#181b1f; border-bottom:1px solid var(--line); }
.integration-category-head h3 { margin:0 0 4px; font-size:19px; }
.integration-category-head p { margin:0; color:var(--muted); line-height:1.35; }
.integration-category-head > span { flex:0 0 auto; border:1px solid #375444; background:#14261d; color:#9df1bf; border-radius:999px; padding:5px 10px; font-size:12px; font-weight:950; }
.integration-catalog { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:14px; }
.connector-card { background:#262a2e; border:1px solid var(--line); border-radius:8px; padding:14px; text-decoration:none; display:grid; grid-template-columns:46px minmax(0,1fr); gap:12px; min-height:158px; position:relative; transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.connector-card.active,.connector-card:hover { border-color:var(--pink); box-shadow:0 18px 50px rgba(255,10,133,.12); transform:translateY(-1px); }
.connector-icon { width:46px; height:46px; border-radius:8px; display:grid; place-items:center; background:#11181c; border:1px solid #3e4850; color:#fff; font-size:13px; font-weight:950; letter-spacing:.02em; }
.connector-copy { min-width:0; }
.connector-copy small { color:var(--accent); font-size:11px; font-weight:950; text-transform:uppercase; }
.connector-copy strong { display:block; margin:4px 0 7px; font-size:17px; line-height:1.15; }
.connector-copy p { margin:0; color:var(--muted); line-height:1.35; font-size:13px; }
.connector-meta { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid #3b4045; padding-top:10px; margin-top:2px; }
.connector-status { border-radius:999px; padding:4px 8px; color:#cbd4d9; background:#151719; border:1px solid #3b4045; font-size:12px; font-weight:900; }
.connector-status.on { background:#143728; border-color:#2a7b55; color:#9df1bf; }
.connector-status.draft { background:#392e16; border-color:#795e27; color:#ffd98a; }
.connector-meta b { color:#fff; font-size:12px; font-weight:950; }
.integration-table-wrap { background:#202326; }
.integration-table { min-width:980px; }
.integration-table th { font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.integration-table td { vertical-align:middle; white-space:normal; line-height:1.35; }
.integration-table tr.selected-row td { background:#2b2634; }
.integration-table tr.selected-row td:first-child { box-shadow:inset 4px 0 0 var(--pink); }
.category-pill { display:inline-flex; align-items:center; border-radius:999px; padding:5px 9px; background:#151719; border:1px solid #3b4045; color:#dce5e8; font-size:12px; font-weight:950; white-space:nowrap; }
.provider-cell { display:grid; grid-template-columns:42px minmax(0,1fr); gap:10px; align-items:center; min-width:260px; }
.provider-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:8px; background:#11181c; border:1px solid #3e4850; color:#fff; font-size:12px; font-weight:950; }
.provider-cell strong { display:block; color:#fff; margin-bottom:3px; }
.provider-cell small { display:block; color:var(--muted); font-size:12px; max-width:520px; }
.code-sample { white-space:pre-wrap; background:#151719; border:1px solid var(--line); border-radius:8px; padding:14px; color:#dfe7ea; overflow:auto; }
.endpoint-actions { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 12px; }
.integration-test-form { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0; margin:12px 0; display:grid; gap:8px; }
.integration-test-form p { margin:0; }
.whatsapp-shell { display:grid; grid-template-columns:360px minmax(0,1fr); gap:16px; margin-bottom:20px; align-items:stretch; }
.whatsapp-sidebar,.whatsapp-chat { background:linear-gradient(180deg,rgba(35,39,43,.98),rgba(29,32,36,.98)); border:1px solid rgba(255,255,255,.08); border-radius:8px; box-shadow:var(--soft-glow); min-height:680px; }
.whatsapp-sidebar { display:flex; flex-direction:column; overflow:hidden; }
.whatsapp-toolbar { display:flex; gap:8px; flex-wrap:wrap; padding:12px; border-bottom:1px solid var(--line); }
.whatsapp-toolbar .btn { padding:8px 10px; font-size:12px; }
.ticket-list { overflow:auto; padding:10px; display:grid; gap:8px; }
.ticket-item { display:grid; gap:5px; text-decoration:none; border:1px solid var(--line); border-radius:8px; background:#1a1e22; padding:12px; color:#fff; transition:border-color .16s ease, transform .16s ease, background .16s ease; }
.ticket-item:hover,.ticket-item.active { border-color:#2fcf85; background:#16261f; transform:translateY(-1px); }
.ticket-item span,.ticket-item small { color:var(--muted); overflow-wrap:anywhere; }
.whatsapp-chat { display:grid; grid-template-rows:auto auto minmax(260px,1fr) auto auto; overflow:hidden; }
.chat-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:18px; border-bottom:1px solid var(--line); }
.chat-head h2 { margin:0 0 4px; }
.chat-head p { margin:0; }
.ai-strip { display:flex; flex-wrap:wrap; gap:12px; align-items:center; background:#13231b; color:#dff8e9; border-bottom:1px solid #284938; padding:10px 18px; font-weight:850; }
.ai-strip span { color:#bfe9d0; }
.message-thread { padding:18px; overflow:auto; display:flex; flex-direction:column; gap:10px; background:linear-gradient(180deg,#101417,#15191d); }
.wa-message { width:min(76%,720px); border:1px solid var(--line); border-radius:10px; padding:12px 14px; box-shadow:0 12px 34px rgba(0,0,0,.16); }
.wa-message.inbound { align-self:flex-start; background:#20262a; }
.wa-message.outbound { align-self:flex-end; background:#173f2d; border-color:#2b7654; }
.wa-message small { display:block; margin-top:8px; color:#b8c4ca; font-size:11px; font-weight:850; }
.reply-box { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:14px; border-top:1px solid var(--line); background:#181b1f; }
.reply-box textarea { min-height:74px; border:1px solid #4a5056; border-radius:8px; background:#101418; color:#fff; padding:12px; font:inherit; resize:vertical; }
.assign-row { display:flex; gap:10px; padding:0 14px 14px; background:#181b1f; }
.assign-row select { flex:1; min-height:42px; border:1px solid #4a5056; border-radius:6px; background:#151719; color:#fff; padding:10px; font:inherit; }
.empty-state { border:1px dashed #4a5056; border-radius:8px; padding:18px; color:var(--muted); text-align:center; font-weight:850; }
.rule-list { display:grid; gap:8px; margin-top:14px; max-height:260px; overflow:auto; }
.rule-list a { display:grid; gap:3px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#151719; text-decoration:none; }
.rule-list a:hover { border-color:var(--accent); background:#18221d; }
.rule-list span { color:var(--muted); font-size:12px; font-weight:850; }
.chatbot-shell .ticket-item span { color:#d7dde1; }
.ai-guide { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:14px 0; }
.ai-guide div { border:1px solid var(--line); border-radius:8px; background:#151719; padding:14px; min-height:96px; }
.ai-guide strong { display:block; color:#fff; font-size:18px; margin-bottom:8px; }
.ai-guide span { color:var(--muted); font-weight:800; line-height:1.35; }
@media (max-width:1180px){
  .layout { grid-template-columns:210px minmax(0,1fr); }
  .sidebar { padding:8px; }
  .navlink { min-height:52px; padding:7px; font-size:11px; }
  .sidebar-footer .navlink { min-height:36px; font-size:12px; }
  .topbar { padding:0 16px; }
}
@media (min-width:961px) and (max-height:860px){
  .sidebar { height:calc(100vh - 58px); max-height:calc(100vh - 58px); overflow:hidden; padding:7px; }
  .sidebar-footer { padding-top:6px; }
  .sidebar-menu { gap:6px; }
  .navlink { min-height:48px; padding:6px; font-size:11px; border-radius:6px; }
  .sidebar-footer .navlink { min-height:32px; padding:6px 8px; font-size:12px; }
}
@media (min-width:961px){
  body.admin-sidebar-collapsed .layout { grid-template-columns:0 minmax(0,1fr); }
  body.admin-sidebar-collapsed .sidebar { width:0; min-width:0; padding:0; border-right:0; opacity:0; transform:translateX(-14px); pointer-events:none; }
  body.admin-sidebar-collapsed .main { padding-left:28px; }
}
@media (max-width:960px){
  .form-grid,.pipeline,.builder-head,.builder-row,.asset-preview-row,.webflow-editor,.usage-grid,.integration-catalog,.integration-guide,.module-grid,.ai-guide { grid-template-columns:1fr; }
  .span-2,.span-3 { grid-column:auto; }
  .designer-canvas { position:static; min-height:auto; }
  .live-preview { min-height:auto; }
  .usage-head { flex-direction:column; }
  .usage-card .btn { width:100%; justify-content:center; }
  .integration-directory-head,.integration-category-head,.integration-audit-panel { grid-template-columns:1fr; flex-direction:column; align-items:stretch; }
  .audit-metrics { grid-template-columns:1fr; }
  .admin-menu-backdrop { display:block; position:fixed; inset:58px 0 0; z-index:28; background:rgba(3,8,14,.62); opacity:0; pointer-events:none; backdrop-filter:blur(5px); transition:opacity .18s ease; }
  body.admin-menu-open .admin-menu-backdrop { opacity:1; pointer-events:auto; }
  body.admin-menu-open { overflow:hidden; }
  .layout { display:block; min-height:calc(100vh - 58px); }
  .sidebar { position:fixed; left:14px; right:14px; top:72px; z-index:29; height:auto; max-height:calc(100dvh - 86px); display:flex; flex-direction:column; gap:8px; overflow:hidden; border:1px solid #30363d; border-radius:14px; padding:10px; background:#151719; box-shadow:0 28px 80px rgba(0,0,0,.55); opacity:0; transform:translateY(-10px) scale(.98); pointer-events:none; transition:opacity .18s ease, transform .18s ease; }
  body.admin-menu-open .sidebar { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
  .sidebar-menu { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; overflow-y:auto; overflow-x:hidden; max-height:calc(100dvh - 206px); padding-right:2px; }
  .sidebar-footer { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; border-top:1px solid #30363d; padding-top:8px; margin-top:0; }
  .navlink { margin:0; min-height:46px; justify-content:center; font-size:13px; border-radius:8px; }
  .sidebar-footer .navlink { justify-content:center; text-align:center; }
  .kpis,.chart-grid,.acl-matrix { grid-template-columns:1fr; }
  .main { padding:18px; }
  h1 { font-size:34px; }
}
@media (max-width:760px){
  .integration-table-wrap { border:0; background:transparent; overflow:visible; }
  .integration-table { min-width:0; display:block; }
  .integration-table thead { display:none; }
  .integration-table tbody { display:grid; gap:12px; }
  .integration-table tr { display:block; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#24272a; }
  .integration-table tr.selected-row { border-color:var(--pink); box-shadow:0 16px 45px rgba(255,10,133,.10); }
  .integration-table td { display:grid; grid-template-columns:120px minmax(0,1fr); gap:12px; align-items:start; padding:11px 12px; white-space:normal; background:#24272a !important; border-bottom:1px solid #3b4045; }
  .integration-table td:last-child { border-bottom:0; }
  .integration-table td::before { content:attr(data-label); color:var(--muted); font-size:11px; font-weight:950; text-transform:uppercase; letter-spacing:.04em; }
  .integration-table tr.selected-row td:first-child { box-shadow:none; }
  .provider-cell { min-width:0; grid-template-columns:36px minmax(0,1fr); }
  .provider-mark { width:36px; height:36px; }
  .integration-table .btn { width:100%; justify-content:center; }
  .whatsapp-shell { grid-template-columns:1fr; }
  .whatsapp-sidebar,.whatsapp-chat { min-height:auto; }
  .ticket-list { max-height:360px; }
  .chat-head,.reply-box,.assign-row { grid-template-columns:1fr; flex-direction:column; }
  .wa-message { width:100%; }
}
@media (max-width:520px){
  .topbar { padding:0 10px; gap:8px; font-size:14px; }
  .topbar-brand { font-size:13px; }
  .topbar-user { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .admin-menu-toggle { min-height:38px; padding:8px 10px; }
  .sidebar { left:8px; right:8px; top:66px; max-height:calc(100dvh - 74px); padding:8px; border-radius:12px; }
  .sidebar-menu { grid-template-columns:1fr 1fr; max-height:calc(100dvh - 220px); gap:7px; }
  .sidebar-footer { grid-template-columns:1fr; gap:7px; }
  .navlink { min-height:46px; font-size:12px; padding:7px; }
  .sidebar-footer .navlink { min-height:40px; }
  .builder-tabs { grid-template-columns:1fr 1fr; position:static; }
  .integration-table td { grid-template-columns:1fr; gap:5px; }
  .connector-card { grid-template-columns:38px minmax(0,1fr); min-height:auto; padding:12px; }
  .connector-icon { width:38px; height:38px; font-size:11px; }
  .connector-meta { align-items:flex-start; flex-direction:column; }
  h1 { font-size:30px; }
}