/* עיצוב — Mobile First, עברית, RTL — שפה עיצובית מודרנית */
:root {
  --bg: #F4F5FA;
  --card: #FFFFFF;
  --ink: #17203D;
  --muted: #69718A;
  --line: #E8EAF2;
  --accent: #4F46E5;
  --accent-deep: #4338CA;
  --accent-soft: #EEF0FE;
  --grad: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
  --ok: #0EA574;
  --ok-soft: #E5F7F0;
  --warn-soft: #FFF4DC;
  --warn-ink: #92600A;
  --danger: #E11D48;
  --danger-soft: #FDEDF1;
  --radius: 20px;
  --shadow: 0 4px 20px rgba(23, 32, 61, 0.06);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Rubik', 'Heebo', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100dvh;
}

#app { max-width: 560px; margin: 0 auto; padding: 14px 16px 110px; }

.loading { text-align: center; padding: 60px 0; color: var(--muted); }

/* ---------- כותרת עליונה ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px 16px; }
.topbar h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.3px; }
.topbar .back {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  font-family: inherit; font-size: 15px; font-weight: 500; color: var(--accent);
  cursor: pointer; padding: 8px 14px; box-shadow: var(--shadow);
}

/* תת-כותרת הסבר מתחת לכותרת */
.page-hint { color: var(--muted); font-size: 14.5px; margin: -10px 2px 16px; }

/* ---------- כרטיסים ---------- */
.card {
  background: var(--card); border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: var(--shadow); padding: 20px; margin-bottom: 14px;
}
.card h2 { font-size: 17px; font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.card .sub { color: var(--muted); font-size: 14px; }
.section-desc { color: var(--muted); font-size: 13.5px; margin: 2px 0 14px; }

/* ---------- כפתורים ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 52px; border: none; border-radius: 14px; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 600;
  background: var(--grad); color: #fff;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.28);
  transition: transform .08s ease, box-shadow .2s, opacity .15s;
  touch-action: manipulation;
}
.btn:active { transform: scale(0.975); }
.btn.secondary { background: var(--accent-soft); color: var(--accent-deep); box-shadow: none; }
.btn.danger { background: var(--danger-soft); color: var(--danger); box-shadow: none; }
.btn.danger-solid { background: var(--danger); color: #fff; box-shadow: 0 4px 14px rgba(225, 29, 72, 0.3); }
.btn.ghost { background: none; color: var(--muted); box-shadow: none; min-height: 46px; font-weight: 500; }
.btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
.btn + .btn { margin-top: 10px; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; margin-top: 0; }

/* ---------- טפסים ---------- */
label.field { display: block; margin-bottom: 16px; }
label.field span {
  display: block; font-weight: 500; font-size: 14px; color: var(--ink); margin-bottom: 6px;
}
input, textarea, select {
  width: 100%; min-height: 50px; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 12px;
  font-family: inherit; font-size: 16px; background: #FBFBFE; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 92px; resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent); background: #fff;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
input[type="file"] { padding: 10px; background: #fff; }
.hint { font-size: 13px; color: var(--muted); margin-top: 5px; line-height: 1.45; }

/* ---------- מתג ---------- */
.switch { position: relative; display: inline-block; width: 52px; height: 30px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; cursor: pointer; border-radius: 30px; background: #D5D9E6; transition: .2s; }
.switch .slider::before {
  content: ''; position: absolute; height: 24px; width: 24px; right: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.switch input:checked + .slider { background: var(--ok); }
.switch input:checked + .slider::before { transform: translateX(-22px); }

/* שורת מתג עם כותרת והסבר */
.toggle-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.toggle-row .t-info { flex: 1; }
.toggle-row .t-title { font-weight: 600; font-size: 15.5px; }
.toggle-row .t-desc { color: var(--muted); font-size: 13px; line-height: 1.4; }

/* ---------- דשבורד ---------- */
.community-row { display: flex; align-items: center; gap: 12px; }
.community-row .info { flex: 1; min-width: 0; }
.community-row .name { font-weight: 600; font-size: 17px; margin-bottom: 2px; }
.community-row .meta { font-size: 13.5px; color: var(--muted); }
.badge {
  display: inline-block; background: var(--accent-soft); color: var(--accent-deep);
  border-radius: 999px; padding: 3px 11px; font-size: 12.5px; font-weight: 600; margin-top: 6px; margin-inline-end: 4px;
}
.badge.warn { background: var(--warn-soft); color: var(--warn-ink); }
.badge.ok { background: var(--ok-soft); color: var(--ok); }

/* ---------- טאבים בתוך מסך קהילה ---------- */
.seg {
  display: flex; background: #E9EBF4; border-radius: 14px; padding: 4px;
  margin-bottom: 16px; gap: 2px; overflow-x: auto;
}
.seg button {
  flex: 1; min-height: 42px; border: none; border-radius: 11px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted);
  background: none; white-space: nowrap; padding: 0 10px;
}
.seg button.active { background: #fff; color: var(--accent-deep); box-shadow: 0 2px 8px rgba(23,32,61,.1); }
.tabpanel { display: none; }
.tabpanel.active { display: block; animation: fadeIn .18s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* שמירה צפה בתחתית מסך הקהילה */
.savebar {
  position: fixed; bottom: 86px; right: 16px; left: 16px; z-index: 9;
  max-width: 560px; margin: 0 auto;
}

/* ---------- אשף ---------- */
.steps { display: flex; gap: 6px; margin-bottom: 18px; }
.steps .step { flex: 1; height: 6px; border-radius: 3px; background: #E0E3EF; }
.steps .step.done { background: var(--grad); }

.list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 14px; border: 1.5px solid var(--line); border-radius: 14px;
  margin-bottom: 10px; cursor: pointer; background: #fff;
  transition: border-color .15s, background .15s;
}
.list-item.selected { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- בדיקות ---------- */
.check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; }
.check .icon { font-size: 20px; }
.check .help { font-size: 13.5px; color: var(--muted); margin-top: 2px; }

/* ---------- לוג ---------- */
.log-item { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.log-item:last-child { border-bottom: none; }
.log-item .time { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ---------- חירום ---------- */
.emergency-banner {
  background: var(--danger); color: #fff; border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 14px; font-weight: 600; text-align: center;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.3);
}

/* ---------- סרגל תחתון ---------- */
.tabbar {
  position: fixed; bottom: 12px; right: 16px; left: 16px; z-index: 10;
  max-width: 560px; margin: 0 auto;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 20px;
  display: flex; justify-content: space-around;
  padding: 8px; box-shadow: 0 8px 28px rgba(23, 32, 61, 0.12);
}
.tabbar button {
  background: none; border: none; font-family: inherit; cursor: pointer;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 18px; border-radius: 14px; min-width: 74px;
}
.tabbar button .ico { font-size: 21px; }
.tabbar button.active { color: var(--accent-deep); background: var(--accent-soft); }

/* ---------- Toast ---------- */
#toast {
  position: fixed; bottom: 96px; right: 50%; transform: translateX(50%) translateY(8px);
  background: var(--ink); color: #fff; padding: 13px 22px;
  border-radius: 14px; font-size: 14.5px; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  z-index: 100; max-width: 90vw; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
#toast.show { opacity: 1; transform: translateX(50%) translateY(0); }

/* ---------- שונות ---------- */
.qr-box { text-align: center; padding: 12px 0; }
.qr-box img { width: 240px; max-width: 80vw; border-radius: 14px; border: 1px solid var(--line); }

.days-row { display: flex; gap: 6px; }
.day-btn {
  flex: 1; min-height: 44px; border-radius: 11px; cursor: pointer;
  border: 1.5px solid var(--line); background: #fff;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--muted);
  transition: all .12s;
}
.day-btn.on { background: var(--grad); border-color: transparent; color: #fff; }

details summary { cursor: pointer; color: var(--muted); font-size: 14px; padding: 4px 0; }

.center { text-align: center; }
.mt { margin-top: 14px; }
.big-emoji { font-size: 44px; text-align: center; display: block; margin-bottom: 8px; }

/* ---------- סגנונות דשבורד אחוד ומודלים ---------- */
#app { max-width: 820px; margin: 0 auto; padding: 14px 16px 60px; }

.dash-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 4px 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px;
  flex-wrap: wrap; gap: 10px;
}
.dash-title-group h1 { font-size: 23px; font-weight: 700; }
.dash-title-group .sub { font-size: 13.5px; color: var(--muted); }
.dash-actions { display: flex; align-items: center; gap: 8px; }

.conn-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.conn-pill.online { background: var(--ok-soft); color: var(--ok); border: 1px solid rgba(14,165,116,0.3); }
.conn-pill.offline { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(225,29,72,0.3); }
.conn-pill.waiting { background: var(--warn-soft); color: var(--warn-ink); border: 1px solid rgba(234,179,8,0.4); }

.groups-bar {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px;
}
.group-tab {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 14px; border: 1.5px solid var(--line);
  background: #fff; cursor: pointer; font-size: 14.5px; font-weight: 600;
  color: var(--muted); white-space: nowrap; transition: all .15s;
}
.group-tab.active {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep);
  box-shadow: 0 2px 10px rgba(79,70,229,0.12);
}
.group-tab .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.group-tab.active .dot { background: var(--accent); }

.section-grid {
  display: grid; grid-template-columns: 1fr; gap: 16px;
}
@media (min-width: 768px) {
  .section-grid { grid-template-columns: 1fr 1fr; }
  .grid-full { grid-column: span 2; }
}

.card-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.card-head h2 { font-size: 17.5px; font-weight: 600; margin: 0; }

.pill-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.pill-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 10px; border: 1.5px solid var(--line);
  background: #FBFBFE; font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: all .15s;
}
.pill-item.active {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); font-weight: 600;
}

.modal-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: fadeIn .15s ease;
}
.modal-card {
  background: #fff; border-radius: 24px; padding: 24px;
  width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
}
.modal-close {
  background: var(--bg); border: none; font-size: 18px; width: 34px; height: 34px;
  border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
}

/* ---------- מעטפת דשבורד: סרגל ניווט ימני ---------- */
body { background: #F2F5F9; }
#app { max-width: none; margin: 0; padding: 0; }
.dashboard-shell {
  min-height: 100dvh; display: grid; grid-template-columns: 274px minmax(0, 1fr);
  background: radial-gradient(circle at 82% 0%, #E8EEFF 0, transparent 29rem), #F2F5F9; align-items: start;
}
.app-sidebar {
  height: 100dvh; min-height: 100dvh; box-sizing: border-box; position: sticky; top: 0; display: flex; flex-direction: column;
  padding: 26px 16px 18px; background: #172033; border-left: 1px solid #24304A;
  box-shadow: -14px 0 34px rgba(15, 23, 42, .12); z-index: 5; overflow: hidden;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 28px; }
.brand-mark {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  color: #102032; font-weight: 800; font-size: 18px; background: linear-gradient(135deg, #67E8D1, #87B9FF);
  box-shadow: 0 8px 20px rgba(79, 214, 194, .18);
}
.sidebar-brand strong { display: block; color: #F8FAFC; font-size: 17px; letter-spacing: -.3px; }
.sidebar-brand span { display: block; color: #96A5BE; font-size: 11.5px; margin-top: -2px; }
.sidebar-connection {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: right;
  border: 1px solid #31405F; border-radius: 14px; padding: 11px; background: rgba(255,255,255,.055);
  font: inherit; cursor: pointer; transition: .16s ease; margin-bottom: 24px;
}
.sidebar-connection:hover { border-color: #5E739C; background: rgba(255,255,255,.09); }
.sidebar-connection b, .sidebar-connection small { display: block; }
.sidebar-connection b { color: #F4F7FF; font-size: 12.5px; }
.sidebar-connection small { color: #9BA9C1; font-size: 11px; margin-top: 1px; }
.account-avatar { width: 30px; height: 30px; flex: 0 0 auto; overflow: hidden; display: grid; place-items: center; border-radius: 50%; background: #30405D; color: #D6E0F0; font-size: 10px; font-weight: 700; }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-connection.online .account-avatar { box-shadow: 0 0 0 3px var(--ok-soft); }
.sidebar-connection.waiting .account-avatar { background: var(--warn-soft); color: var(--warn-ink); }
.sidebar-connection.offline .account-avatar { background: var(--danger-soft); color: var(--danger); }
.connection-chevron { margin-right: auto; color: #93A4C2; font-size: 24px; font-weight: 300; }
.sidebar-section-title { padding: 0 10px 9px; color: #8293B0; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; }
.sidebar-communities { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; gap: 4px; overflow-y: auto; }
.sidebar-community, .sidebar-action {
  width: 100%; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 12px;
  padding: 10px 10px; background: transparent; color: #B5C0D2; cursor: pointer; font: inherit; text-align: right;
  transition: background .14s, color .14s;
}
.sidebar-community:hover, .sidebar-action:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar-community.active { background: linear-gradient(90deg, rgba(91, 111, 235, .25), rgba(91, 111, 235, .06)); color: #fff; font-weight: 600; }
.community-avatar { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: #293752; color: #BFCCE3; font-size: 13px; font-weight: 700; }
.sidebar-community.active .community-avatar { background: #DDFBF4; color: #126C62; }
.sidebar-community-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.community-state { font-size: 10px; }
.sidebar-empty { color: var(--muted); font-size: 12.5px; padding: 10px; }
.sidebar-add {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 42px; margin-top: 12px;
  border: 1px dashed #50658A; border-radius: 12px; background: rgba(255,255,255,.035); color: #D8E3F4;
  font: 600 12.5px inherit; cursor: pointer; transition: .15s ease;
}
.sidebar-add:hover { background: rgba(255,255,255,.1); border-color: #87B9FF; }
.sidebar-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid #2A3853; }
.sidebar-action { font-size: 12.5px; }
.sidebar-action span { width: 21px; text-align: center; }
.sidebar-action.emergency-active { color: #C51A42; background: var(--danger-soft); }
.sidebar-action.muted { color: #7F8DA7; }
.dashboard-main { padding: 38px clamp(22px, 4.5vw, 72px) 64px; width: min(100%, 1520px); }
.workspace-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; margin: 0 0 24px; padding: 28px 30px; border: 1px solid rgba(211, 220, 236, .9); border-radius: 24px; background: rgba(255,255,255,.68); box-shadow: 0 12px 32px rgba(48, 61, 87, .055); }
.workspace-eyebrow { color: #60708F; font-size: 11px; font-weight: 800; letter-spacing: .55px; margin-bottom: 7px; }
.workspace-header h1 { color: #17233C; font-size: clamp(25px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -.8px; }
.workspace-header p { color: #6C7890; font-size: 13.5px; margin-top: 9px; }
.workspace-status { white-space: nowrap; border: 1px solid #E5E8F1; border-radius: 99px; padding: 8px 12px; font-size: 12px; font-weight: 700; }
.workspace-status.online { background: var(--ok-soft); color: var(--ok); border-color: #C9EDDF; }
.workspace-status.waiting { background: var(--warn-soft); color: var(--warn-ink); }
.workspace-status.offline { background: var(--danger-soft); color: var(--danger); border-color: #F5D4DD; }
.dashboard-main .section-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.dashboard-main .section-grid > .card { grid-column: span 6; }
.dashboard-main .section-grid > .card:nth-child(1) { grid-column: span 7; }
.dashboard-main .section-grid > .card:nth-child(2) { grid-column: span 5; }
.dashboard-main .section-grid > .card:nth-child(3) { grid-column: span 5; }
.dashboard-main .section-grid > .card:nth-child(4) { grid-column: span 7; }
.dashboard-main .section-grid > .grid-full { grid-column: 1 / -1; }
.dashboard-main .card {
  position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgba(220, 226, 237, .88);
  border-radius: 24px 24px 24px 8px; background: linear-gradient(140deg, rgba(255,255,255,.96), rgba(247,249,253,.9));
  box-shadow: 0 16px 35px rgba(34, 46, 76, .055), inset 0 1px 0 rgba(255,255,255,.9); padding: 25px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dashboard-main .card::before {
  content: ''; position: absolute; z-index: -1; width: 180px; height: 180px; left: -88px; top: -104px;
  border-radius: 50%; background: radial-gradient(circle, rgba(125, 144, 255, .16), rgba(125, 144, 255, 0) 68%);
}
.dashboard-main .card::after {
  content: ''; position: absolute; z-index: -1; width: 72px; height: 4px; right: 25px; top: 0;
  border-radius: 0 0 99px 99px; background: linear-gradient(90deg, #7B8BFF, #68DFC8);
}
.dashboard-main .section-grid > .card:nth-child(2)::after,
.dashboard-main .section-grid > .card:nth-child(5n)::after { background: linear-gradient(90deg, #F1B766, #E8839B); }
.dashboard-main .section-grid > .card:nth-child(3)::after { background: linear-gradient(90deg, #54CBB8, #69A9EB); }
.dashboard-main .card:hover { transform: translateY(-2px); border-color: #CCD6E9; box-shadow: 0 22px 42px rgba(34, 46, 76, .09), inset 0 1px 0 #fff; }
.dashboard-main .card-head { align-items: flex-start; padding: 0 0 15px; margin-bottom: 18px; border-bottom: 1px solid rgba(226, 231, 240, .82); }
.dashboard-main .card-head h2 { color: #25314B; font-size: 16px; font-weight: 750; letter-spacing: -.2px; }
.dashboard-main .card-head .btn { box-shadow: none; border: 1px solid #DCE3ED; background: rgba(255,255,255,.78); color: #56647D; }
/* ==========================================================================
   שדרוג פאנלים ראשיים — שפה עיצובית יוקרתית (Executive Dashboard)
   ========================================================================== */

.dashboard-main .automation-panel {
  position: relative;
  padding: 24px;
  border-radius: 22px;
  border: 1px solid rgba(215, 224, 238, 0.85);
  box-shadow: 0 14px 34px rgba(22, 33, 56, 0.05), 0 1px 2px rgba(22, 33, 56, 0.02);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  background: #ffffff;
}

.dashboard-main .automation-panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(22, 33, 56, 0.08);
  border-color: #cbd7eb;
}

/* הדגשות רקע וגרדיאנט עדין לכל פאנל */
.dashboard-main .commerce-panel {
  background: linear-gradient(165deg, #FFFFFF 0%, #FFFBF7 50%, #FFF5ED 100%);
  border-top: 3px solid #F97316;
}

.dashboard-main .content-guard-panel {
  background: linear-gradient(165deg, #FFFFFF 0%, #F8FCFA 50%, #F0F9F5 100%);
  border-top: 3px solid #10B981;
}

.dashboard-main .rss-panel {
  background: linear-gradient(165deg, #FFFFFF 0%, #F9FAFF 50%, #F1F4FF 100%);
  border-top: 3px solid #6366F1;
}

.dashboard-main .join-panel {
  background: linear-gradient(165deg, #FFFFFF 0%, #FAF8FF 50%, #F3F0FF 100%);
  border-top: 3px solid #8B5CF6;
}

/* כותרת פאנל משודרגת */
.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.panel-header-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.panel-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.commerce-panel .panel-icon-badge {
  background: #FFF0E6;
  color: #EA580C;
  border: 1px solid #FFD8C2;
}

.content-guard-panel .panel-icon-badge {
  background: #E8F8F2;
  color: #059669;
  border: 1px solid #C4EEDC;
}

.rss-panel .panel-icon-badge {
  background: #EEF2FF;
  color: #4F46E5;
  border: 1px solid #D5DCFC;
}

.join-panel .panel-icon-badge {
  background: #F3E8FF;
  color: #7C3AED;
  border: 1px solid #E4CDFD;
}

.panel-title-wrap h2 {
  font-size: 17.5px;
  font-weight: 750;
  color: #162035;
  margin: 0;
  letter-spacing: -0.3px;
  line-height: 1.25;
}

.panel-subtitle {
  font-size: 12.5px;
  color: #64748B;
  margin-top: 3px;
}

/* באדג' סטטוס מודרני עם פולס חי */
.panel-status-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(226, 232, 240, 0.85);
  margin-bottom: 14px;
  font-size: 12px;
  backdrop-filter: blur(6px);
}

.pulse-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 999px;
}

.pulse-badge.active {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

.pulse-badge.active::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
  animation: pulseAnim 2s infinite;
}

.pulse-badge.paused {
  background: #F1F5F9;
  color: #64748B;
  border: 1px solid #CBD5E1;
}

.pulse-badge.paused::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94A3B8;
}

@keyframes pulseAnim {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* תצוגת בועת וואטסאפ חיה (Live WhatsApp Chat Bubble Preview) */
.wa-preview-box {
  margin: 14px 0 16px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #D6E4DB;
  background-color: #EFEAE2;
  background-image: radial-gradient(#D3CDC4 0.75px, transparent 0.75px);
  background-size: 14px 14px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.04);
}

.wa-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  backdrop-filter: blur(4px);
}

.wa-preview-head .tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #0EA574;
}

.wa-bubble-wrap {
  padding: 12px 14px;
  display: flex;
  justify-content: flex-start;
}

.wa-bubble {
  position: relative;
  max-width: 88%;
  background: #FFFFFF;
  border-radius: 12px 12px 12px 2px;
  padding: 9px 12px 6px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #111827;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.wa-bubble::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: -6px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-left: 6px solid #FFFFFF;
  border-bottom: 0 solid transparent;
}

.wa-bubble-author {
  font-size: 11px;
  font-weight: 800;
  color: #075E54;
  margin-bottom: 2px;
}

.wa-bubble-text {
  word-break: break-word;
  white-space: pre-wrap;
}

.wa-bubble-text .mention {
  color: #027EB5;
  font-weight: 600;
  direction: ltr;
  display: inline-block;
}

.wa-bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  font-size: 10px;
  color: #8696A0;
  margin-top: 4px;
}

.wa-ticks {
  color: #53BDEB;
  font-weight: 700;
  letter-spacing: -2px;
  margin-right: 2px;
}

/* שורת ימי פעילות טקטילית ומעוצבת */
.tactile-days-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.tactile-days-row .day-btn {
  flex: 1;
  min-height: 42px;
  border-radius: 12px;
  border: 1.5px solid #E2E8F0;
  background: #FFFFFF;
  color: #475569;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.tactile-days-row .day-btn:hover {
  border-color: #CBD5E1;
  background: #F8FAFC;
  transform: translateY(-1px);
}

.tactile-days-row .day-btn.on {
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  border-color: #0F172A;
  color: #FFFFFF;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.25);
  transform: translateY(-1px);
}

.commerce-panel .tactile-days-row .day-btn.on {
  background: linear-gradient(135deg, #EA580C 0%, #C2410C 100%);
  border-color: #C2410C;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3);
}

.rss-panel .tactile-days-row .day-btn.on {
  background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%);
  border-color: #4338CA;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

/* כרטיס שעות מודרני עם אייקון ומפריד */
.time-range-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  margin-top: 8px;
}

.time-range-card .time-input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.time-range-card .time-input-group span {
  font-size: 11.5px;
  font-weight: 700;
  color: #64748B;
}

.time-range-card input[type="number"] {
  min-height: 42px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1.5px solid #E2E8F0;
  background: #F8FAFC;
  font-weight: 700;
  font-size: 15px;
  color: #1E293B;
  text-align: center;
}

.time-range-divider {
  color: #94A3B8;
  font-size: 18px;
  font-weight: 700;
  margin-top: 14px;
}

/* משתנים להוספה להודעה — פילי גלולות אינטראקטיביים */
.template-chips-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.template-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.template-chip:hover {
  border-color: #CBD5E1;
  background: #F1F5F9;
  transform: translateY(-1px);
}

.template-chip:active {
  transform: scale(0.96);
}

.template-chip .chip-icon {
  font-size: 13px;
}

/* סטודיו לוגו והטבעה של פוסטים מ-RSS */
.rss-watermark-studio {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  margin: 12px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
  align-items: center;
}

.post-mockup-frame {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #1E293B, #334155);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  border: 2px solid #FFFFFF;
  display: grid;
  place-items: center;
}

.post-mockup-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.watermark-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  border: 1.5px solid #FFFFFF;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.watermark-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.watermark-badge .no-logo {
  font-size: 14px;
}

.studio-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.studio-title {
  font-size: 13.5px;
  font-weight: 750;
  color: #1E293B;
}

.studio-sub {
  font-size: 12px;
  color: #64748B;
  line-height: 1.4;
}

/* רשימת בנקי מילים מודולרית */
.bank-module-item {
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 10px 14px;
  margin-bottom: 8px;
  transition: all 0.15s ease;
}

.bank-module-item.active {
  border-color: #A7F3D0;
  background: #F0FDF4;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.08);
}

.bank-module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bank-name-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: #1E293B;
  cursor: pointer;
}

.bank-words-preview {
  font-size: 11.5px;
  color: #64748B;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.bank-hours-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #D1FAE5;
  font-size: 12px;
  color: #065F46;
  font-weight: 600;
}

.bank-hours-input {
  width: 58px;
  min-height: 32px;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid #A7F3D0;
  background: #FFFFFF;
  font-weight: 700;
  text-align: center;
}

/* כרטיסי נושאי RSS מודרניים */
.topics-grid-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.topic-chip-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 12px;
  border: 1.5px solid #E2E8F0;
  background: #FFFFFF;
  cursor: pointer;
  transition: all 0.14s ease;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
}

.topic-chip-card:hover {
  border-color: #CBD5E1;
  background: #F8FAFC;
}

.topic-chip-card.active {
  background: #EEF2FF;
  border-color: #818CF8;
  color: #3730A3;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.12);
}

.topic-chip-card input[type="checkbox"] {
  width: auto;
  min-height: auto;
  margin: 0;
}

/* גריד מספרים מודרני (קצב פוסטים) */
.metrics-cadence-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0;
}

.cadence-card {
  padding: 10px 12px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
}

.cadence-card span {
  font-size: 11.5px;
  font-weight: 700;
  color: #64748B;
  display: block;
  margin-bottom: 4px;
}

.cadence-card input {
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 9px;
  border: 1.5px solid #E2E8F0;
  background: #F8FAFC;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
}

/* כפתורי פעולה יוקרתיים */
.panel-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
}

.commerce-panel .panel-action-btn {
  background: linear-gradient(135deg, #EA580C 0%, #C2410C 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.28);
}

.content-guard-panel .panel-action-btn {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.28);
}

.rss-panel .panel-action-btn {
  background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.28);
}

.join-panel .panel-action-btn {
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.28);
}

.panel-action-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.panel-action-btn:active {
  transform: scale(0.98);
}

.panel-action-row {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.panel-action-row .panel-action-btn {
  flex: 1;
}

.test-rss-btn {
  background: #EEF2FF !important;
  color: #4338CA !important;
  border: 1.5px solid #C7D2FE !important;
  box-shadow: none !important;
}

.test-rss-btn:hover {
  background: #E0E7FF !important;
  border-color: #A5B4FC !important;
}
.group-logo-preview {
  width: 44px; height: 44px; flex: 0 0 auto; overflow: hidden; display: grid; place-items: center;
  border-radius: 50%; background: #E0E7FF; color: #59617A; font-size: 20px;
}
.group-logo-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.rss-topic-edit { padding: 14px 0; border-bottom: 1px solid var(--line); }
.rss-topic-edit:first-child { padding-top: 0; }
.rss-topic-edit .field { margin-bottom: 10px; }
.rss-topic-edit .btn { min-height: 40px; font-size: 13px; }
.rss-topic-editor { border-top: 1px solid var(--line); margin-top: 4px; }
.topic-empty-state { padding: 20px 0; color: var(--muted); text-align: center; }
.rss-topic-new { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.rss-topic-new summary { color: var(--accent-deep); font-weight: 600; }
.word-bank-card { padding: 14px 0; border-bottom: 1px solid var(--line); }
.word-bank-card:first-child { padding-top: 0; }
.word-bank-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.word-bank-head b, .word-bank-head span { display: block; }
.word-bank-head span { margin-top: 2px; color: var(--muted); font-size: 12px; }
.word-bank-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-height: 50px; margin-top: 12px; padding: 8px;
  border: 1.5px solid var(--line); border-radius: 12px; background: #FBFBFE; cursor: text;
}
.word-bank-tags:focus-within { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(79, 70, 229, .12); }
.word-bank-tag { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 5px 7px 5px 5px; border-radius: 8px; background: #E9EBFF; color: var(--accent-deep); font-size: 13px; font-weight: 600; }
.word-bank-tag button { width: 17px; height: 17px; border: 0; border-radius: 50%; background: #D3D7FF; color: var(--accent-deep); cursor: pointer; font-size: 16px; line-height: 14px; }
.word-bank-tag-input { flex: 1 1 150px; width: auto; min-height: 30px; padding: 2px; border: 0; background: transparent; box-shadow: none !important; }
.word-bank-tag-input:focus { outline: none; }
.word-bank-save { width: auto; min-height: 36px; margin-top: 10px; padding: 0 14px; font-size: 13px; }
.template-variables { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 9px; }
.template-variables > span { color: var(--muted); font-size: 12px; }
.template-variables button { min-height: 28px; padding: 0 9px; border: 1px solid #D9DCF0; border-radius: 8px; background: #F8F8FF; color: var(--accent-deep); font: 600 12px inherit; cursor: pointer; transition: .14s ease; }
.template-variables button:hover { border-color: var(--accent); background: var(--accent-soft); }
.add-flow { width: min(100%, 600px); margin: 0 auto; padding: 34px 20px 54px; }
.add-flow-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.add-flow-header > div { flex: 1; }
.add-flow-header span { display: block; color: #8B93A8; font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.add-flow-header h1 { font-size: 26px; line-height: 1.2; letter-spacing: -.4px; }
.add-flow-header .back { flex: 0 0 auto; }
.wizard-card { margin: 0; padding: 24px; }
.wizard-step { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #737C92; font-size: 12px; font-weight: 700; margin-bottom: 20px; }
.wizard-progress { display: flex; gap: 5px; width: 92px; }
.wizard-progress i { display: block; flex: 1; height: 5px; border-radius: 10px; background: #E5E8F1; }
.wizard-progress i.active { background: var(--accent); }
.wizard-card h2 { font-size: 20px; margin-bottom: 4px; }
.wizard-description { margin-bottom: 22px; }
.wizard-form .field { margin-bottom: 14px; }
.wizard-form .btn { margin-top: 8px; }
.group-picker-card > .sub { margin: 8px 0 0; }
.add-group-picker { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.add-group-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; font-size: 14px; font-weight: 600; }
.add-group-picker-head small { color: var(--muted); font-size: 12px; font-weight: 500; }
.add-group-picker > input { min-height: 42px; margin-bottom: 9px; }
.add-group-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-inline-end: 2px; }
.add-group-choice { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 47px; padding: 8px 10px; border: 1px solid #E8EAF2; border-radius: 11px; background: #fff; color: var(--ink); cursor: pointer; font: inherit; text-align: right; transition: .14s ease; }
.add-group-choice[hidden] { display: none; }
.add-group-choice:hover { border-color: #BFC5F0; background: #FAFAFF; }
.add-group-choice.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.add-group-icon { font-size: 18px; }
.add-group-choice > span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.add-group-check { display: none; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; }
.add-group-choice.selected .add-group-check { display: grid; }

@media (max-width: 880px) {
  .dashboard-shell { display: block; }
  .app-sidebar { position: static; height: auto; min-height: auto; padding: 14px 14px 10px; border-left: 0; border-bottom: 1px solid #293752; box-shadow: none; overflow: visible; }
  .sidebar-brand { padding: 0 4px 12px; }
  .sidebar-connection { position: absolute; top: 15px; left: 14px; width: auto; margin: 0; padding: 7px 9px; }
  .sidebar-connection span:nth-child(2) { display: none; }
  .connection-chevron { display: none; }
  .sidebar-section-title { padding: 0 4px 7px; }
  .sidebar-communities { flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; padding-bottom: 3px; }
  .sidebar-community { width: auto; flex: 0 0 auto; padding: 7px 9px; border: 1px solid #354563; }
  .sidebar-community-name { max-width: 120px; }
  .sidebar-add { display: inline-flex; width: auto; min-height: 37px; padding: 0 12px; margin: 8px 0 0; }
  .sidebar-footer { display: flex; gap: 3px; margin-top: 8px; padding-top: 8px; border-color: #2A3853; }
  .sidebar-action { width: auto; padding: 7px; font-size: 0; }
  .sidebar-action span { font-size: 16px; }
  .dashboard-main { padding: 22px 14px 40px; }
  .workspace-header { margin-bottom: 20px; padding: 21px 20px; border-radius: 18px; }
  .workspace-header p { max-width: 520px; }
  .workspace-status { display: none; }
}

@media (max-width: 520px) {
  .workspace-header h1 { font-size: 24px; }
  .dashboard-main .card { padding: 16px; border-radius: 16px; }
  .sidebar-community-name { max-width: 95px; }
  .add-flow { padding: 22px 14px 40px; }
  .add-flow-header { margin-bottom: 16px; }
  .add-flow-header h1 { font-size: 23px; }
  .wizard-card { padding: 18px; }
}

@media (max-width: 767px) {
  .dashboard-main .section-grid { grid-template-columns: 1fr; gap: 14px; }
  .dashboard-main .section-grid > .card,
  .dashboard-main .section-grid > .card:nth-child(n),
  .dashboard-main .section-grid > .grid-full { grid-column: auto; }
  .dashboard-main .card::after { right: 18px; }
}