:root {
  --sidebar-width: 272px;
  --fb-primary: #4f46e5;
  --fb-primary-rgb: 79,70,229;
  --fb-success: #16a34a;
  --fb-danger: #dc2626;
  --fb-warning: #d97706;
  --fb-bg: #f4f7fb;
  --fb-panel: #ffffff;
  --fb-border: #e5eaf1;
  --fb-muted: #64748b;
  --fb-text: #172033;
  --fb-sidebar: #111827;
  --fb-sidebar-muted: #94a3b8;
  --fb-shadow: 0 14px 35px rgba(15,23,42,.075);
}
[data-bs-theme="dark"] {
  --fb-bg: #0b1120;
  --fb-panel: #111827;
  --fb-border: #263247;
  --fb-muted: #94a3b8;
  --fb-text: #e5e7eb;
  --fb-sidebar: #080d18;
  --fb-shadow: 0 18px 45px rgba(0,0,0,.25);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; font-family: "Hind Siliguri", "Noto Sans Bengali", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--fb-text); background: var(--fb-bg); }
a { text-decoration: none; }
button, input, select, textarea { font: inherit; }
body { font-size: 15px; line-height: 1.55; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,h6,strong,.btn,.nav-link,.form-label { font-family: "Hind Siliguri", "Noto Sans Bengali", Inter, sans-serif; }

.auth-body { min-height: 100vh; display: grid; place-items: center; padding: 24px; background:
  radial-gradient(circle at 10% 5%, rgba(var(--fb-primary-rgb),.13), transparent 32%),
  radial-gradient(circle at 95% 90%, rgba(14,165,233,.11), transparent 32%), var(--fb-bg); }
.auth-shell { width: min(100%, 1020px); display: grid; grid-template-columns: 1.08fr .92fr; overflow: hidden; border: 1px solid var(--fb-border); border-radius: 28px; background: var(--fb-panel); box-shadow: var(--fb-shadow); }
.auth-visual { padding: 56px; color: #fff; background: linear-gradient(145deg,#111827,#312e81 55%,#4338ca); position: relative; overflow: hidden; }
.auth-visual::before,.auth-visual::after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.09); }
.auth-visual::before { width:260px; height:260px; right:-110px; top:-80px; }
.auth-visual::after { width:190px; height:190px; left:-70px; bottom:-70px; }
.brand-lockup { display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
.brand-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:15px; background:rgba(255,255,255,.15); font-size:22px; }
.brand-lockup strong { display:block; font-size:18px; letter-spacing:-.02em; }
.brand-lockup small { color:rgba(255,255,255,.67); }
.auth-visual h1 { margin:80px 0 16px; max-width:560px; font-size:clamp(34px,5vw,54px); line-height:1.04; letter-spacing:-.045em; position:relative; z-index:1; }
.auth-visual p { max-width:520px; color:rgba(255,255,255,.72); font-size:16px; line-height:1.75; position:relative; z-index:1; }
.auth-features { display:grid; gap:12px; margin-top:34px; position:relative; z-index:1; }
.auth-feature { display:flex; gap:12px; align-items:center; color:rgba(255,255,255,.86); font-size:14px; }
.auth-feature i { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:rgba(255,255,255,.11); }
.auth-form-wrap { padding:56px; display:flex; flex-direction:column; justify-content:center; }
.auth-kicker,.topbar-kicker,.panel-kicker,.eyebrow { text-transform:uppercase; letter-spacing:.13em; font-size:11px; font-weight:800; color:var(--fb-primary); }
.auth-form-wrap h2 { margin:8px 0 8px; font-weight:800; letter-spacing:-.03em; }
.auth-form-wrap .lead { color:var(--fb-muted); font-size:14px; margin-bottom:28px; }
.form-control,.form-select { min-height:46px; border-color:var(--fb-border); background-color:var(--fb-panel); color:var(--fb-text); border-radius:12px; }
.form-control:focus,.form-select:focus { border-color:rgba(var(--fb-primary-rgb),.65); box-shadow:0 0 0 .22rem rgba(var(--fb-primary-rgb),.12); background-color:var(--fb-panel); color:var(--fb-text); }
.form-label { font-size:13px; font-weight:700; }
.btn { border-radius:11px; font-weight:700; }
.btn-primary { --bs-btn-bg:var(--fb-primary); --bs-btn-border-color:var(--fb-primary); --bs-btn-hover-bg:#4338ca; --bs-btn-hover-border-color:#4338ca; }
.auth-error { display:none; border-radius:12px; padding:12px 14px; margin-bottom:16px; font-size:14px; background:rgba(220,38,38,.1); color:#ef4444; border:1px solid rgba(220,38,38,.18); }
.auth-error.show { display:block; }
.theme-float { position:fixed; top:20px; right:20px; z-index:5; }

.app-shell { min-height:100vh; }
.sidebar { position:fixed; inset:0 auto 0 0; z-index:1030; width:var(--sidebar-width); display:flex; flex-direction:column; padding:20px 16px; background:var(--fb-sidebar); color:#fff; transition:transform .25s ease; }
.sidebar-brand { display:flex; align-items:center; gap:12px; padding:8px 10px 24px; }
.sidebar-brand .brand-mark { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(145deg,#6366f1,#4338ca); box-shadow:0 10px 24px rgba(79,70,229,.35); }
.sidebar-brand strong { display:block; font-size:17px; }
.sidebar-brand small { display:block; color:var(--fb-sidebar-muted); font-size:11px; margin-top:2px; }
.sidebar-nav { display:flex; flex-direction:column; gap:5px; }
.sidebar-nav .nav-link { width:100%; border:0; background:transparent; color:var(--fb-sidebar-muted); display:flex; align-items:center; gap:12px; padding:12px 13px; border-radius:12px; font-size:14px; font-weight:650; text-align:left; transition:.18s ease; }
.sidebar-nav .nav-link i { font-size:17px; }
.sidebar-nav .nav-link:hover { color:#fff; background:rgba(255,255,255,.065); }
.sidebar-nav .nav-link.active { color:#fff; background:linear-gradient(90deg,rgba(99,102,241,.3),rgba(99,102,241,.12)); box-shadow:inset 3px 0 #818cf8; }
.nav-badge { margin-left:auto; min-width:24px; height:22px; padding:0 7px; display:grid; place-items:center; border-radius:999px; background:rgba(255,255,255,.1); font-size:11px; }
.sidebar-footer { margin-top:auto; padding:12px 4px 2px; }
.system-pill { display:flex; align-items:center; gap:10px; padding:12px; border-radius:14px; background:rgba(255,255,255,.05); }
.system-pill strong,.system-pill small { display:block; }
.system-pill strong { font-size:12px; }
.system-pill small { color:var(--fb-sidebar-muted); font-size:10px; margin-top:2px; }
.status-dot { width:9px; height:9px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 5px rgba(34,197,94,.12); }
.workspace { margin-left:var(--sidebar-width); min-height:100vh; }
.topbar { height:82px; position:sticky; top:0; z-index:1020; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 30px; border-bottom:1px solid var(--fb-border); background:color-mix(in srgb,var(--fb-panel) 92%,transparent); backdrop-filter:blur(16px); }
.topbar h1 { font-size:23px; margin:2px 0 0; letter-spacing:-.035em; font-weight:800; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.icon-button { width:42px; height:42px; border:1px solid var(--fb-border); border-radius:12px; background:var(--fb-panel); color:var(--fb-text); display:grid; place-items:center; }
.icon-button:hover { background:rgba(var(--fb-primary-rgb),.08); color:var(--fb-primary); }
.user-chip { display:flex; align-items:center; gap:10px; padding:5px 10px 5px 5px; border:1px solid var(--fb-border); border-radius:14px; background:var(--fb-panel); }
.user-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; color:#fff; background:linear-gradient(145deg,#6366f1,#4338ca); font-weight:800; }
.user-chip strong,.user-chip small { display:block; line-height:1.2; }
.user-chip strong { font-size:12px; }
.user-chip small { color:var(--fb-muted); font-size:10px; margin-top:3px; }
.content-area { padding:28px 30px 44px; }
.app-view { display:none; animation:fadeIn .18s ease; }
.app-view.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
.hero-card { min-height:190px; padding:30px; border-radius:22px; color:#fff; background:linear-gradient(125deg,#111827,#312e81 58%,#4f46e5); display:flex; justify-content:space-between; align-items:flex-end; gap:28px; overflow:hidden; position:relative; box-shadow:var(--fb-shadow); }
.hero-card::after { content:""; position:absolute; width:300px; height:300px; right:-90px; top:-125px; border-radius:50%; background:rgba(255,255,255,.08); }
.hero-card > * { position:relative; z-index:1; }
.hero-card h2 { max-width:720px; margin:8px 0 10px; font-size:clamp(25px,4vw,39px); font-weight:800; line-height:1.08; letter-spacing:-.04em; }
.hero-card p { max-width:720px; margin:0; color:rgba(255,255,255,.67); }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.metric-card { min-height:122px; padding:20px; display:flex; align-items:center; gap:15px; border:1px solid var(--fb-border); border-radius:18px; background:var(--fb-panel); box-shadow:var(--fb-shadow); }
.metric-icon { width:48px; height:48px; flex:0 0 48px; border-radius:15px; display:grid; place-items:center; font-size:20px; }
.metric-card span,.metric-card small,.panel-kicker { display:block; }
.metric-card span { color:var(--fb-muted); font-size:12px; font-weight:700; }
.metric-card strong { display:block; margin-top:3px; font-size:27px; line-height:1; letter-spacing:-.04em; }
.metric-card small { margin-top:7px; color:var(--fb-muted); font-size:10px; }
.panel { border:1px solid var(--fb-border); border-radius:18px; background:var(--fb-panel); box-shadow:var(--fb-shadow); overflow:hidden; }
.panel-header { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:20px 22px; border-bottom:1px solid var(--fb-border); }
.panel-header h3 { margin:4px 0 0; font-size:17px; font-weight:800; letter-spacing:-.02em; }
.panel-body { padding:22px; }
.section-toolbar { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:20px; }
.section-toolbar h2 { margin:5px 0 5px; font-weight:800; letter-spacing:-.035em; }
.section-toolbar p { margin:0; color:var(--fb-muted); }
.status-card { height:100%; padding:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.qr-stage { width:256px; min-height:256px; margin:18px auto; display:grid; place-items:center; padding:18px; border:1px solid var(--fb-border); border-radius:20px; background:#fff; }
.qr-stage img,.qr-stage canvas { max-width:220px !important; height:auto !important; }
.state-badge { display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:7px 11px; font-size:11px; font-weight:800; }
.state-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.state-connected { color:#15803d; background:rgba(22,163,74,.11); }
.state-waiting_qr,.state-qr_retrying,.state-starting { color:#b45309; background:rgba(217,119,6,.11); }
.state-error,.state-disconnected,.state-logged_out { color:#b91c1c; background:rgba(220,38,38,.1); }
.state-reconnecting,.state-logging_out { color:#0369a1; background:rgba(2,132,199,.1); }
.table { color:var(--fb-text); --bs-table-bg:transparent; --bs-table-color:var(--fb-text); --bs-table-border-color:var(--fb-border); }
.table thead th { color:var(--fb-muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:800; background:color-mix(in srgb,var(--fb-bg) 55%,var(--fb-panel)); white-space:nowrap; }
.table td { vertical-align:middle; font-size:13px; }
.table-actions { display:flex; gap:6px; justify-content:flex-end; }
.code-chip { display:inline-flex; max-width:100%; padding:6px 9px; border-radius:9px; color:#4f46e5; background:rgba(var(--fb-primary-rgb),.08); font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace; word-break:break-all; }
[data-bs-theme="dark"] .code-chip { color:#a5b4fc; }
.pattern-grid,.key-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.pattern-card,.key-card,.doc-card { border:1px solid var(--fb-border); border-radius:16px; background:var(--fb-panel); padding:18px; }
.pattern-card:hover,.key-card:hover { border-color:rgba(var(--fb-primary-rgb),.4); box-shadow:0 10px 25px rgba(15,23,42,.06); }
.empty-state { min-height:220px; display:grid; place-items:center; text-align:center; color:var(--fb-muted); padding:30px; }
.empty-state i { font-size:36px; display:block; margin-bottom:8px; }
.setting-card { border:1px solid var(--fb-border); border-radius:16px; padding:20px; height:100%; background:var(--fb-panel); }
.setting-card .setting-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:rgba(var(--fb-primary-rgb),.1); color:var(--fb-primary); font-size:18px; }
.docs-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.doc-card h3 { font-size:15px; font-weight:800; }
.doc-card p,.doc-card li { color:var(--fb-muted); font-size:13px; line-height:1.65; }
.doc-card code { color:var(--fb-primary); }
.modal-content { border:1px solid var(--fb-border); border-radius:18px; background:var(--fb-panel); color:var(--fb-text); box-shadow:0 25px 70px rgba(15,23,42,.22); }
.modal-header,.modal-footer { border-color:var(--fb-border); }
.toast-container { z-index:2000; }
.toast { border:1px solid var(--fb-border); border-radius:14px; background:var(--fb-panel); color:var(--fb-text); box-shadow:var(--fb-shadow); }
.spinner-soft { width:34px; height:34px; border:3px solid rgba(var(--fb-primary-rgb),.15); border-top-color:var(--fb-primary); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.dataTables_wrapper .dt-search input,.dataTables_wrapper .dt-length select { border:1px solid var(--fb-border)!important; border-radius:9px!important; background:var(--fb-panel)!important; color:var(--fb-text)!important; }

@media(max-width:1199.98px){ .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pattern-grid,.docs-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:991.98px){ .sidebar{transform:translateX(-100%)}.sidebar.open{transform:none;box-shadow:20px 0 50px rgba(0,0,0,.25)}.workspace{margin-left:0}.content-area{padding:22px 18px 38px}.topbar{padding:0 18px}.auth-shell{grid-template-columns:1fr}.auth-visual{display:none}.auth-form-wrap{padding:38px}.key-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:767.98px){ .metric-grid,.pattern-grid,.docs-grid,.key-grid{grid-template-columns:1fr}.hero-card{align-items:flex-start;flex-direction:column}.section-toolbar{align-items:flex-start;flex-direction:column}.content-area{padding:18px 13px 34px}.topbar{height:72px}.topbar h1{font-size:19px}.auth-form-wrap{padding:30px 22px}.qr-stage{width:230px;min-height:230px}.metric-card{min-height:105px}.panel-header{align-items:flex-start;flex-direction:column} }

/* Bangla dashboard additions */
.admin-view { display:none; animation:fadeIn .18s ease; }
.admin-view.active { display:block; }
.bulk-toolbar { display:flex; align-items:center; gap:16px; padding:14px 18px; border-bottom:1px solid var(--fb-border); background:color-mix(in srgb,var(--fb-bg) 45%,var(--fb-panel)); }
.connection-success { width:112px; height:112px; display:grid; place-items:center; border-radius:32px; color:#fff; background:linear-gradient(145deg,#22c55e,#15803d); font-size:54px; box-shadow:0 18px 40px rgba(22,163,74,.25); }
.docs-grid-wide { grid-template-columns:repeat(3,minmax(0,1fr)); }
.monitor-table { min-width:1050px; }
.monitor-table td { vertical-align:top; }
.monitor-jid { display:inline-block; max-width:235px; color:var(--fb-primary); font-size:11px; word-break:break-all; }
.monitor-message { max-width:430px; min-width:220px; white-space:pre-wrap; word-break:break-word; line-height:1.5; font-size:13px; }
.form-check-input:checked { background-color:var(--fb-primary); border-color:var(--fb-primary); }
.setting-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:rgba(var(--fb-primary-rgb),.1); color:var(--fb-primary); font-size:18px; }

@media(max-width:1199.98px){ .docs-grid-wide{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:767.98px){ .bulk-toolbar{align-items:flex-start;flex-direction:column}.bulk-toolbar .ms-auto{margin-left:0!important;width:100%;justify-content:space-between}.docs-grid-wide{grid-template-columns:1fr} }

.qr-error { min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:18px; color:#b45309; text-align:center; font-size:13px; font-weight:600; }
.qr-error i { font-size:26px; animation:spin 1.2s linear infinite; }

/* Dynamic reaction settings */
.reaction-setting-card { position:relative; overflow:hidden; }
.reaction-setting-card::after { content:""; position:absolute; width:120px; height:120px; right:-55px; bottom:-58px; border-radius:50%; background:rgba(var(--fb-primary-rgb),.055); pointer-events:none; }
.reaction-switch { margin-top:4px; position:relative; z-index:1; }
.reaction-switch .form-check-input { width:2.7rem; height:1.35rem; cursor:pointer; }
.reaction-switch .form-check-label { margin-left:6px; color:var(--fb-muted); font-weight:700; cursor:pointer; }
.reaction-input-group { max-width:360px; }
.reaction-preview { min-width:58px; justify-content:center; font-size:24px; background:color-mix(in srgb,var(--fb-bg) 55%,var(--fb-panel)); }
.emoji-input { font-family:"Noto Color Emoji","Segoe UI Emoji","Apple Color Emoji","Hind Siliguri",sans-serif; font-size:22px; }
.emoji-picker { max-height:420px; overflow:auto; padding:12px; border:1px solid var(--fb-border); border-radius:16px; background:color-mix(in srgb,var(--fb-bg) 72%,var(--fb-panel)); scrollbar-width:thin; }
.emoji-category + .emoji-category { margin-top:14px; padding-top:14px; border-top:1px dashed var(--fb-border); }
.emoji-category-title { margin-bottom:8px; color:var(--fb-muted); font-size:12px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; }
.emoji-presets { display:flex; flex-wrap:wrap; gap:8px; position:relative; z-index:1; }
.emoji-preset { width:42px; height:40px; display:grid; place-items:center; border:1px solid var(--fb-border); border-radius:12px; background:var(--fb-panel); font-family:"Noto Color Emoji","Segoe UI Emoji","Apple Color Emoji",sans-serif; font-size:20px; cursor:pointer; transition:.16s ease; }
.emoji-preset:hover,.emoji-preset:focus-visible { border-color:rgba(var(--fb-primary-rgb),.55); background:rgba(var(--fb-primary-rgb),.08); transform:translateY(-1px); outline:none; box-shadow:0 0 0 3px rgba(var(--fb-primary-rgb),.10); }
@media (max-width:575.98px) { .emoji-picker { max-height:330px; padding:10px; } .emoji-preset { width:39px; height:38px; } }

/* Multi-service professional additions */
.link-steps{display:grid;gap:10px}.link-steps>div{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft)}.link-steps>div>span{display:grid;place-items:center;flex:0 0 31px;height:31px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;font:800 13px/1 Inter,sans-serif}.link-steps p{margin:0}.link-steps b,.link-steps small{display:block}.link-steps small{color:var(--muted);font-size:11px;margin-top:2px}.service-command-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.service-command-grid article{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);border-radius:16px;background:var(--surface-soft)}.service-symbol{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,rgba(45,105,255,.16),rgba(111,66,193,.18));color:var(--primary);font:800 14px Inter,sans-serif}.service-command-grid b,.service-command-grid code,.service-command-grid small{display:block}.service-command-grid code{width:max-content;margin:3px 0;padding:2px 7px;border-radius:6px;background:var(--surface);color:var(--primary);font-size:11px}.service-command-grid small{color:var(--muted);font-size:11px}.rate-summary{display:flex;flex-wrap:wrap;gap:5px;min-width:280px}.rate-mini{display:inline-flex;gap:4px;align-items:center;padding:4px 7px;border:1px solid var(--border);border-radius:999px;background:var(--surface-soft);font-size:10px;white-space:nowrap}.rate-mini b{font-weight:700}.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.service-card{padding:20px;border:1px solid var(--border);border-radius:22px;background:var(--surface);box-shadow:var(--shadow-sm);transition:.2s}.service-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.service-card-head{display:flex;align-items:center;gap:13px}.service-icon{display:grid;place-items:center;flex:0 0 48px;height:48px;border-radius:15px;background:linear-gradient(135deg,rgba(45,105,255,.16),rgba(111,66,193,.17));color:var(--primary);font:800 13px Inter,sans-serif}.service-card h3{margin:3px 0 0;font-size:18px;font-weight:700}.service-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:17px}.service-meta>div{padding:10px 11px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)}.service-meta span,.service-meta strong{display:block}.service-meta span{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}.service-meta strong{margin-top:3px;font-size:12px;overflow-wrap:anywhere}.service-template{margin-top:11px;padding:10px 11px;border:1px dashed var(--border);border-radius:12px}.service-template span{display:block;color:var(--muted);font-size:10px;margin-bottom:4px}.service-template code{font-size:11px;white-space:normal;overflow-wrap:anywhere}.max-panel{max-width:850px}.guide-list{padding-left:1.2rem;color:var(--muted)}.guide-list li{margin-bottom:9px}.empty-state{min-height:220px;display:grid;place-items:center;color:var(--muted)}.empty-state i{display:block;font-size:30px;margin-bottom:8px;text-align:center}
@media(max-width:1200px){.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.services-grid,.service-command-grid{grid-template-columns:1fr}.rate-summary{min-width:210px}.service-meta{grid-template-columns:1fr 1fr}}