/* ============================================================
   CreatorStore — styles.css
   Підключається до всіх сторінок разом з Tailwind CDN.
   Tailwind — лейаут і відступи.
   Цей файл — дизайн-токени, компоненти, phone preview.
   ============================================================ */

/* ── TOKENS ── */
:root {
  --font:              system-ui, -apple-system, sans-serif;
  --color-brand:       #2563eb;
  --color-brand-hover: #1d4ed8;
  --color-text:        #111827;
  --color-muted:       #6b7280;
  --color-border:      #e5e7eb;
  --radius-sm:         8px;
  --radius-md:         12px;
  --radius-lg:         16px;

  /* ── FONT SIZE SCALE ──────────────────────────────────────
     Base: 15px (body).
     Використовуй ці змінні замість хардкодних px-значень.
     ──────────────────────────────────────────────────────── */
  --fs-small: 14px;   /* дрібний: підказки, badge, лейбли, divider, phone preview */
  --fs-base:  15px;   /* body — базовий розмір */
  --fs-md:    16px;   /* підзаголовки карток, акцентний текст */
  --fs-lg:    18px;   /* логотип, назва сайту */
  --fs-xl:    20px;   /* заголовки секцій, plan-name */
  --fs-2xl:   24px;   /* h1 сторінки (.cs-title), OTP цифри */
  --fs-3xl:   28px;   /* великі ціни (.plan-price) */

  /* Висота рядка */
  --lh-tight:  1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* Phone preview — змінюються JS при зміні теми */
  --ph-bg:           #ffffff;
  --ph-text:         #111827;
  --ph-text-muted:   rgba(0,0,0,0.55);
  --ph-text-label:   rgba(0,0,0,0.4);
  --ph-text-section: rgba(0,0,0,0.35);
  --ph-card-bg:      rgba(0,0,0,0.04);
  --ph-icon-bg:      rgba(0,0,0,0.08);
}

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: var(--font); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--color-text); background: #fff; }

/* ── LOGO ── */
.cs-logo      { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:32px; }
.cs-logo-mark { width:32px; height:32px; border-radius:50%; background:var(--color-brand); display:flex; align-items:center; justify-content:center; color:#fff; font-size:var(--fs-small); font-weight:700; flex-shrink:0; }
.cs-logo-name { font-size:var(--fs-lg); font-weight:700; color:var(--color-text); }

/* ── TYPOGRAPHY ── */
.cs-title    { font-size:var(--fs-2xl); font-weight:700; color:var(--color-text); text-align:center; margin-bottom:4px; line-height:var(--lh-tight); }
.cs-subtitle { font-size:var(--fs-base); color:var(--color-muted); text-align:center; margin-bottom:24px; line-height:var(--lh-normal); }
.cs-label    { display:block; font-size:var(--fs-base); font-weight:500; color:#374151; margin-bottom:4px; }
.cs-small    { font-size:var(--fs-small); }
.cs-hint     { font-size:var(--fs-small); color:var(--color-muted); margin-top:4px; line-height:var(--lh-normal); }
.cs-section-title { font-size:var(--fs-xl); font-weight:600; color:var(--color-text); margin-bottom:12px; line-height:var(--lh-tight); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  text-decoration: none;
  white-space: nowrap;
}
.btn-full { width: 100%; }

.btn-primary { background: var(--color-brand); color: #fff; }
.btn-primary:hover { background: var(--color-brand-hover); }
.btn-primary:disabled { background: #d1d5db; color: #9ca3af; cursor: not-allowed; }

.btn-secondary { background: #fff; color: #374151; border: 1px solid var(--color-border); }
.btn-secondary:hover { background: #f9fafb; }

.btn-google {
  background: #fff;
  color: #374151;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  width: 100%;
  padding: 12px;
  margin-bottom: 16px;
}
.btn-google:hover { background: #f9fafb; }

/* ── INPUTS ── */
.cs-input {
  width: 100%;
  padding: 11px 12px;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.cs-input:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.cs-input.error {
  border-color: #f87171;
  box-shadow: 0 0 0 3px rgba(248,113,113,.15);
}

/* Input з префіксом slug */
.cs-input-prefix {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.cs-input-prefix:focus-within {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.cs-input-prefix-label { padding: 11px 6px 11px 12px; color:var(--color-muted); white-space:nowrap; user-select:none; }
.cs-input-prefix input  { flex:1; padding:11px 12px 11px 0; border:none; outline:none; background:transparent; color:var(--color-text); }

/* Select */
.cs-select-wrap { position:relative; }
.cs-select {
  width:100%; padding:11px 36px 11px 12px;
  color:var(--color-text); background:#fff;
  border:1px solid var(--color-border); border-radius:var(--radius-md);
  outline:none; appearance:none; cursor:pointer;
  transition: border-color .15s, box-shadow .15s;
}
.cs-select:focus { border-color:var(--color-brand); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.cs-select-arrow { position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--color-muted); }

/* Error text */
.cs-field-err { display:none; font-size:var(--fs-small); color:#ef4444; margin-top:4px; }
.cs-field-err.show { display:block; }

/* ── DIVIDER ── */
.cs-divider { display:flex; align-items:center; gap:12px; margin:16px 0; }
.cs-divider-line { flex:1; height:1px; background:var(--color-border); }
.cs-divider-text { font-size:var(--fs-small); color:var(--color-muted); }

/* ── ALERTS ── */
.cs-alert { display:none; align-items:flex-start; gap:8px; padding:12px; border-radius:var(--radius-sm); margin-bottom:16px; }
.cs-alert.show    { display:flex; }
.cs-alert-error   { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; }
.cs-alert-success { background:#f0fdf4; border:1px solid #bbf7d0; color:#15803d; }

/* ── MODAL TITLE ── */
.modal-title { font-size:var(--fs-md); font-weight:700; color:var(--color-text); }

/* ── PASSWORD STRENGTH ── */
.cs-strength { display:flex; gap:4px; margin-top:8px; }
.cs-strength-bar { height:4px; flex:1; border-radius:2px; background:var(--color-border); transition:background .2s; }

/* ── OTP ── */
.cs-otp { display:flex; justify-content:center; gap:12px; margin-bottom:16px; }
.cs-otp-input {
  width:56px; height:56px; text-align:center; font-size:var(--fs-2xl); font-weight:700;
  border:2px solid var(--color-border); border-radius:var(--radius-md);
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.cs-otp-input:focus { border-color:var(--color-brand); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.cs-otp-input.error { border-color:#f87171; }

/* ── HR ── */
.cs-hr { border:none; border-top:1px solid var(--color-border); }

/* ── TAB NAV ── */
.cs-tab-btn {
  padding:10px 16px; font-weight:600;
  color:var(--color-muted); border:none; border-bottom:2px solid transparent;
  background:none; cursor:pointer; transition:color .15s;
  margin-bottom:-2px; border-radius:6px 6px 0 0;
}
.cs-tab-btn:hover { color:var(--color-brand); background:#eff6ff; }
.cs-tab-btn.active { color:var(--color-brand); border-bottom-color:var(--color-brand); }

/* ── STYLE CARDS (thumbnail picker) ── */
.style-card { cursor:pointer; padding:16px; text-align:center; border:2px solid var(--color-border); border-radius:var(--radius-md); transition:border-color .15s, background .15s; }
.style-card:hover { border-color:#93c5fd; background:#f0f9ff; }
.style-card.selected { border-color:var(--color-brand); background:#eff6ff; }

/* ── PREVIEW SECTIONS ── */
.preview-section { display:none; }
.preview-section.active { display:block; }

/* ── THEME SWATCHES ── */
.theme-swatch { width:36px; height:36px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:transform .15s; }
.theme-swatch:hover { transform:scale(1.15); }
.theme-swatch.active { border-color:var(--color-brand); }

/* ── CATEGORY CHIPS ── */
.cat-group-label { font-size:var(--fs-small); font-weight:600; color:var(--color-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }

.cat-chip {
  padding: 4px 14px;
  font-size: var(--fs-base);
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: #374151;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.cat-chip:hover,
.cat-chip.active {
  border-color: var(--color-brand);
  color: var(--color-brand);
  background: #eff6ff;
}

/* ── PLAN CARDS ── */
.plan-card {
  position:relative; display:flex; flex-direction:column; padding:20px;
  cursor:pointer; background:#fff; border:2px solid var(--color-border);
  border-radius:var(--radius-lg); transition:border-color .15s;
}
.plan-card.selected { border-color:var(--color-brand); }
.plan-badge {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--color-brand); color:#fff; border-radius:999px;
  padding:2px 12px; font-size:var(--fs-small); font-weight:600; white-space:nowrap;
}
.plan-name   { font-size:var(--fs-xl); font-weight:700; color:var(--color-text); margin-bottom:6px; }
.plan-price  { font-size:var(--fs-3xl); font-weight:700; color:var(--color-text); line-height:var(--lh-tight); }
.plan-period { font-size:var(--fs-base); color:var(--color-muted); }
.plan-trial  { font-size:var(--fs-base); color:var(--color-muted); margin-bottom:20px; }
.plan-features { list-style:none; padding:0; margin:0; flex:1; display:flex; flex-direction:column; gap:8px; }
.plan-feat     { display:flex; align-items:flex-start; gap:8px; font-size:var(--fs-base); color:#374151; }
.plan-feat.off { color:var(--color-muted); }
.plan-feat-icon       { font-weight:700; flex-shrink:0; color:#22c55e; }
.plan-feat.off .plan-feat-icon { color:#d1d5db; }
.plan-sel-badge {
  display:none; margin-top:20px; width:100%; padding:6px;
  text-align:center; font-weight:600;
  color:var(--color-brand); background:#eff6ff; border-radius:var(--radius-sm);
}
.plan-card.selected .plan-sel-badge { display:block; }

/* ── PHONE PREVIEW ── */
.ph-shell { border:5px solid #000; border-radius:var(--radius-lg); overflow:hidden; width:100%; }

.ph-screen {
  background: var(--ph-bg);
  padding: 16px 20px 0;
  transition: background .3s;
  height: 70vh;
  overflow-y: auto;
  scrollbar-width: none;
}
.ph-screen-mobile {
  background: var(--ph-bg);
  padding: 12px 16px 0;
  overflow-y: scroll;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ph-menu { display:flex; justify-content:flex-end; margin-bottom:14px; opacity:.6; }
.ph-menu-sm { margin-bottom:10px; }

.ph-avatar {
  width:72px; height:72px; border-radius:50%;
  margin:0 auto 12px; display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:700; color:var(--ph-text); background:var(--ph-icon-bg);
}
.ph-avatar-sm { width:56px; height:56px; font-size:24px; margin-bottom:8px; }

.ph-name    { text-align:center; font-weight:700; font-size:var(--fs-2xl); color:var(--ph-text); margin-bottom:8px; line-height:var(--lh-tight); }
.ph-name-sm { font-size:var(--fs-lg); margin-bottom:4px; }
.ph-desc    { text-align:center; font-size:var(--fs-base); color:var(--ph-text-muted); line-height:var(--lh-loose); margin-bottom:16px; }
.ph-desc-sm { font-size:var(--fs-small); margin-bottom:12px; }

.ph-socials    { display:flex; justify-content:center; gap:12px; margin-bottom:24px; }
.ph-socials-sm { gap:8px; margin-bottom:12px; }
.ph-social-icon    { width:40px; height:40px; border-radius:50%; background:var(--ph-icon-bg); display:flex; align-items:center; justify-content:center; }
.ph-social-icon-sm { width:32px; height:32px; }

.ph-section-label    { font-size:var(--fs-small); font-weight:700; color:var(--ph-text-section); text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px; }
.ph-section-label-sm { font-size:var(--fs-small); margin-bottom:8px; }

.ph-card    { background:var(--ph-card-bg); border-radius:var(--radius-md); overflow:hidden; margin-bottom:12px; }
.ph-card-sm { border-radius:10px; margin-bottom:8px; }
.ph-card-grid    { display:grid; grid-template-columns:repeat(4,1fr); height:80px; }
.ph-card-grid-sm { height:60px; }
.ph-card-body    { padding:10px 14px 12px; }
.ph-card-body-sm { padding:6px 10px 8px; }
.ph-card-label    { font-size:var(--fs-small); color:var(--ph-text-label); margin-bottom:2px; }
.ph-card-label-sm { font-size:var(--fs-small); margin-bottom:1px; }
.ph-card-title    { font-size:var(--fs-md); font-weight:700; color:var(--ph-text); }
.ph-card-title-sm { font-size:var(--fs-small); }
.ph-card-price    { font-size:var(--fs-small); color:var(--ph-text-muted); margin-top:2px; }
.ph-card-price-sm { font-size:var(--fs-small); margin-top:1px; }

/* ── TOGGLE SWITCH ── */
.toggle { position:relative; display:inline-block; width:40px; height:22px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; position:absolute; }
.toggle-slider { position:absolute; cursor:pointer; inset:0; background:#d1d5db; border-radius:99px; transition:.2s; }
.toggle-slider:before { content:""; position:absolute; width:16px; height:16px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s; }
.toggle input:checked ~ .toggle-slider { background:var(--color-brand); }
.toggle input:checked ~ .toggle-slider:before { transform:translateX(18px); }

/* ── RICH TEXT EDITOR ── */
.rte-editor { min-height:110px; outline:none; line-height:var(--lh-loose); font-size:var(--fs-base); color:var(--color-text); }
.rte-editor:empty:before { content:attr(data-placeholder); color:#9ca3af; }

/* ── DROPZONE ── */
.dropzone { border:2px dashed var(--color-border); transition:border-color .15s, background .15s; cursor:pointer; }
.dropzone:hover, .dropzone.drag-active { border-color:var(--color-brand); background:#eff6ff; }

/* ── DELIVERY TABS ── */
.dtab { flex:1; padding:8px; border:1.5px solid var(--color-border); border-radius:var(--radius-sm); background:#fff; color:var(--color-muted); font-size:var(--fs-small); font-weight:600; cursor:pointer; transition:all .15s; text-align:center; }
.dtab.active { border-color:var(--color-brand); background:#eff6ff; color:var(--color-brand); }

/* ── ADD DASHED BUTTON ── */
.add-dashed { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:7px 14px; border:1.5px dashed #bfdbfe; border-radius:var(--radius-sm); color:var(--color-brand); font-size:var(--fs-small); font-weight:600; background:none; cursor:pointer; transition:all .15s; margin-top:8px; }
.add-dashed:hover { background:#eff6ff; border-color:var(--color-brand); }

/* ── TAG PILL ── */
.tag-pill { display:inline-flex; align-items:center; gap:4px; background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; border-radius:20px; padding:3px 10px; font-size:var(--fs-small); font-weight:500; }
.tag-pill button { color:#93c5fd; font-size:var(--fs-small); line-height:1; background:none; border:none; cursor:pointer; padding:0; }
.tag-pill button:hover { color:#1e40af; }

/* ── TAG INPUT WRAP ── */
.tag-input-wrap { display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-height:44px; padding:7px 10px; border:1.5px solid var(--color-border); border-radius:var(--radius-sm); cursor:text; transition:border-color .15s; background:#fff; }
.tag-input-wrap:focus-within { border-color:var(--color-brand); }
.tag-input-wrap input { border:none; outline:none; font-size:var(--fs-small); color:var(--color-text); background:transparent; min-width:120px; flex:1; }

/* ── COLLECT ROW ── */
.collect-row { display:flex; align-items:center; gap:10px; padding:9px 12px; background:#f9fafb; border:1px solid var(--color-border); border-radius:var(--radius-sm); margin-bottom:6px; font-size:var(--fs-small); }

/* ── FIELD MENU ── */
.field-menu { position:absolute; top:calc(100% + 4px); left:0; z-index:100; background:#fff; border:1.5px solid var(--color-border); border-radius:var(--radius-md); box-shadow:0 4px 20px rgba(0,0,0,.1); padding:6px; min-width:200px; }
.field-option { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:7px; cursor:pointer; font-size:var(--fs-small); color:#374151; transition:background .12s; }
.field-option:hover { background:#eff6ff; color:var(--color-brand); }

/* ── GALLERY SLOT ── */
.gallery-slot { width:98px; height:98px; border:2px dashed var(--color-border); border-radius:var(--radius-md); display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; color:#9ca3af; transition:all .15s; position:relative; overflow:hidden; background:#fff; flex-shrink:0; }
.gallery-slot:hover { border-color:var(--color-brand); color:var(--color-brand); background:#eff6ff; }
.gallery-slot img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.gallery-slot .rm { position:absolute; top:3px; right:3px; width:18px; height:18px; background:rgba(0,0,0,.55); border:none; border-radius:50%; color:#fff; font-size:10px; cursor:pointer; display:none; align-items:center; justify-content:center; z-index:1; }
.gallery-slot:hover .rm { display:flex; }

/* ── SECTION LOCKED (popup mode) ── */
.section-locked { position:relative; pointer-events:none; }
.section-locked::after { content:"Unavailable in Popup mode"; position:absolute; inset:0; background:rgba(249,250,251,.9); display:flex; align-items:center; justify-content:center; font-size:var(--fs-small); font-weight:600; color:#9ca3af; pointer-events:all; cursor:not-allowed; backdrop-filter:blur(1px); }

/* ── KBD ── */
kbd { background:#f3f4f6; border:1px solid var(--color-border); border-radius:4px; padding:1px 5px; font-size:var(--fs-small); }

/* ── OG TEMPLATE PICKER ── */
.og-tpl { border:2px solid var(--color-border); border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; position:relative; transition:border-color .15s; }
.og-tpl:hover { border-color:#93c5fd; }
.og-tpl.selected { border-color:var(--color-brand); }
.og-check { position:absolute; top:5px; right:5px; width:16px; height:16px; background:var(--color-brand); border-radius:50%; display:none; align-items:center; justify-content:center; }
.og-check.visible { display:flex; }

/* ── CS-UPLOAD (уніфікований компонент завантаження фото) ── */
.cs-upload { display:flex; align-items:center; gap:20px; }
.cs-upload-preview {
  width:100px; height:100px; flex-shrink:0;
  background:#fff;
  border:1px solid #e5e7eb;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative; overflow:hidden; transition:opacity .15s;
}
.cs-upload-preview.wide { width:300px; height:100px; }
@media (max-width:640px) {
  .cs-upload-preview       { width:80px; height:80px; }
  .cs-upload-preview.wide  { width:240px; height:80px; }
}
.cs-upload-preview:hover .cs-upload-overlay { opacity:1; }
.cs-upload-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:var(--fs-small); font-weight:600;
  opacity:0; transition:opacity .15s; border-radius:inherit;
}
.cs-upload-letter { font-size:28px; font-weight:700; color:#2563eb; }
.cs-upload-icon   { font-size:28px; }
.cs-upload-info   { flex:1; }

/* ============================================================
   My Store — page-specific styles
   ============================================================ */

/* ── SIDEBAR ── */
.sidebar {
  width: 240px; position: fixed; top: 0; left: 0; bottom: 0;
  background: #fff; border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column; z-index: 30;
}
.sidebar-logo {
  display: flex; align-items: center; gap: 8px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--color-border); flex-shrink: 0;
}
.sidebar-nav { flex: 1; overflow-y: auto; padding: 6px 8px; }
.nav-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--color-muted); padding: 12px 10px 4px;
}
.nav-divider { margin: 4px 10px; border-top: 1px solid var(--color-border); }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: var(--fs-small); color: #4b5563;
  text-decoration: none; cursor: pointer; border: none;
  background: none; width: 100%; text-align: left;
  transition: background .12s, color .12s;
}
.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.nav-item:hover { background: #f3f4f6; color: var(--color-text); }
.nav-item.active { background: #eff6ff; color: var(--color-brand); font-weight: 600; }
.sidebar-bottom { padding: 10px 8px; border-top: 1px solid var(--color-border); flex-shrink: 0; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-top: 4px; }
.sidebar-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-brand);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: var(--fs-small); font-weight: 700; flex-shrink: 0;
}
.upgrade-nav {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: var(--fs-small); font-weight: 600; color: var(--color-brand);
  text-decoration: none; transition: background .12s;
}
.upgrade-nav:hover { background: #eff6ff; }

/* ── MAIN ── */
.main-wrap { margin-left: 240px; }

/* ── TOPBAR ── */
.topbar { background: #fff; border-bottom: 1px solid var(--color-border); padding: 0; }
.topbar-title { font-size: 22px; font-weight: 700; color: var(--color-text); padding: 16px 0 10px; }
.main-tabs { display: flex; border-bottom: 2px solid var(--color-border); }
.main-tab {
  padding: 10px 20px; font-size: var(--fs-small); font-weight: 500; color: var(--color-muted);
  background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -2px; cursor: pointer; white-space: nowrap; transition: all .15s;
}
.main-tab:hover { color: #374151; }
.main-tab.active { border-bottom-color: var(--color-brand); color: var(--color-brand); font-weight: 600; }

/* ── COMPACT BAR ── */
.compact-bar {
  display: flex; align-items: center; gap: 6px;
  background: #fff; padding: 0; height: 48px; margin: 16px 0;
}
.manage-pages-btn {
  padding: 5px 10px; border-radius: var(--radius-sm); flex-shrink: 0;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--color-muted);
  background: #f3f4f6; border: none; cursor: pointer;
  white-space: nowrap; transition: all .15s;
}
.manage-pages-btn:hover { background: #eff6ff; color: var(--color-brand); }
.bar-divider { width: 1px; height: 24px; background: var(--color-border); flex-shrink: 0; }
.page-tabs-row {
  display: flex; align-items: center; gap: 3px;
  overflow-x: auto; flex: 1; scrollbar-width: none;
}
.page-tabs-row::-webkit-scrollbar { display: none; }
.page-tab {
  padding: 5px 12px; border-radius: 7px; white-space: nowrap;
  font-size: var(--fs-small); font-weight: 500; color: var(--color-muted);
  background: none; border: 1px solid transparent;
  cursor: pointer; transition: all .15s;
}
.page-tab:hover { background: #f3f4f6; color: #374151; }
.page-tab.active { background: #eff6ff; color: var(--color-brand); font-weight: 600; border-color: #bfdbfe; }
.page-tab-hidden { opacity: .45; }
.add-page-btn {
  width: 26px; height: 26px; border-radius: 7px;
  background: #f3f4f6; border: none; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-muted); font-size: 18px; line-height: 1; transition: all .15s;
}
.add-page-btn:hover { background: #eff6ff; color: var(--color-brand); }

/* ── BLOCK ROW ── */
.block-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  margin-bottom: 12px; transition: all .15s;
}
.block-row:hover { border-color: #93c5fd; box-shadow: 0 2px 8px rgba(0,0,0,.05); }

/* ── BLOCK ICON ── */
.block-icon {
  width: 40px; height: 40px; border-radius: 9px; background: #f3f4f6;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}

.global-badge {
  font-size: 11px; background: #eff6ff; color: var(--color-brand);
  padding: 2px 8px; border-radius: 99px; font-weight: 500;
}
.drag-handle { color: #d1d5db; flex-shrink: 0; cursor: grab; }
.empty-state { text-align: center; padding: 48px 20px; }

/* ── MODALS ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-box {
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,.16);
  width: 100%; display: flex; flex-direction: column; max-height: 88vh;
}
.modal-header {
  padding: 20px 24px 16px; border-bottom: 1px solid var(--color-border);
  display: flex; align-items: flex-start; justify-content: space-between; flex-shrink: 0;
}
.modal-body  { padding: 0 24px; overflow-y: auto; flex: 1; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--color-border); flex-shrink: 0; }

/* ── ICON BUTTON ── */
.icon-btn {
  width: 28px; height: 28px; border-radius: 7px; border: none;
  background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-muted); transition: all .12s; flex-shrink: 0;
}
.icon-btn:hover { background: #f3f4f6; color: #374151; }
.icon-btn.off { color: #d1d5db; }

.modal-close {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-muted); transition: all .12s;
}
.modal-close:hover { background: #f3f4f6; color: #374151; }

/* ── BLOCK CATALOG ── */
.cat-heading {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--color-muted); margin: 16px 0 8px;
}
.block-option {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); margin-bottom: 6px;
  cursor: pointer; transition: all .15s; background: #fff;
}
.block-option:hover { border-color: #93c5fd; background: #f0f9ff; }
.block-option-icon {
  width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}

/* ── MANAGE PAGES ── */
.manage-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); margin-bottom: 6px; background: #fff;
}
.manage-row.is-home { background: #f9fafb; }

/* ── SETTINGS TABS ── */
.stab {
  flex: 1; padding: 7px; border-radius: var(--radius-sm);
  font-size: var(--fs-small); font-weight: 500; color: var(--color-muted);
  border: none; background: none; cursor: pointer; transition: all .15s;
}
.stab.active { background: #fff; color: var(--color-text); box-shadow: 0 1px 3px rgba(0,0,0,.1); }

/* ── CONFIRM ICON ── */
.confirm-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ── THREE-DOT MENU ── */
.block-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 7px 12px; border-radius: var(--radius-sm);
  font-size: var(--fs-small); color: #374151;
  background: none; border: none; cursor: pointer; transition: background .1s;
}
.block-menu-item:hover { background: #f3f4f6; }
.block-menu-danger { color: #ef4444; }
.block-menu-danger:hover { background: #fef2f2; }

/* ── TOAST ── */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #1f2937; color: #fff; padding: 9px 20px; border-radius: 99px;
  font-size: var(--fs-small); font-weight: 500; z-index: 999; pointer-events: none;
  animation: toastUp .25s ease;
}
@keyframes toastUp {
  from { opacity:0; transform:translateX(-50%) translateY(8px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* ── MOBILE ── */
@media (max-width: 1024px) {
  .sidebar { display: none; }
  .main-wrap { margin-left: 0; }
}

/* ── CHOOSE PRODUCT TYPE ── */
.product-type-icon {
  width:52px;height:52px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.product-type-card {
  display:flex;align-items:center;gap:16px;padding:16px 20px;
  border:1.5px solid var(--color-border);border-radius:var(--radius-md);
  background:#fff;transition:border-color .15s,box-shadow .15s;
  text-align:left;width:100%;cursor:pointer;position:relative;
}
.product-type-card:not(.soon):hover { border-color:#93c5fd;box-shadow:0 2px 8px rgba(0,0,0,.06); }
.product-type-card.selected { border-color:var(--color-brand);background:#eff6ff; }
.product-type-card.soon { cursor:default;opacity:.8; }
.soon-badge {
  position:absolute;top:12px;right:12px;
  background:#f3f4f6;color:var(--color-muted);
  font-size:11px;font-weight:700;padding:2px 8px;
  border-radius:99px;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--color-border);
}
.section-divider {
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--color-muted);
  margin:28px 0 14px;display:flex;align-items:center;gap:10px;
}
.section-divider::after { content:'';flex:1;height:1px;background:var(--color-border); }

/* ── TABLE ROWS ── */
tbody tr { transition: background .15s; }
tbody tr:hover { background: #f9fafb; }

/* ── DROPDOWN BUTTON ── */
.dd-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; background:#fff; border:1px solid #e5e7eb; border-radius:8px; font-size:14px; color:#374151; cursor:pointer; white-space:nowrap; }
.dd-btn:hover { border-color:#93c5fd; }
.dd-item { padding:8px 12px; font-size:14px; color:#374151; cursor:pointer; }
.dd-item:hover { background:#f9fafb; }

/* ── CONTEXT (DOT) MENU ── */
.ctx { position:relative; display:inline-block; }
.ctx-menu { display:none; position:absolute; right:0; top:100%; margin-top:4px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.1); min-width:130px; z-index:50; padding:4px; }
.ctx-menu.show { display:block; }
.ctx-menu a { display:flex; align-items:center; gap:8px; padding:8px 12px; font-size:14px; color:#374151; border-radius:8px; cursor:pointer; text-decoration:none; }
.ctx-menu a:hover { background:#f9fafb; }
.ctx-menu a.danger { color:#dc2626; }

/* ── AVATAR PALETTE ── */
.av-0{background:#e0e7ff;color:#4338ca} .av-1{background:#dbeafe;color:#1d4ed8}
.av-2{background:#d1fae5;color:#065f46} .av-3{background:#fef3c7;color:#92400e}
.av-4{background:#fce7f3;color:#9d174d} .av-5{background:#ede9fe;color:#5b21b6}
.av-6{background:#e0f2fe;color:#0369a1} .av-7{background:#ccfbf1;color:#0f766e}
.av-8{background:#ffe4e6;color:#9f1239} .av-9{background:#ffedd5;color:#c2410c}

/* ── PAGINATION ── */
.pg-btn { width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; font-size:14px; font-weight:500; cursor:pointer; }
.pg-btn.active { background:#2563eb; color:#fff; }
.pg-btn:not(.active):not(:disabled) { color:#374151; }
.pg-btn:not(.active):not(:disabled):hover { background:#f3f4f6; }
.pg-btn:disabled { color:#d1d5db; cursor:not-allowed; }

/* ── PERIOD BUTTONS ── */
.period-btn { padding:6px 12px; border-radius:8px; font-size:14px; font-weight:500; cursor:pointer; border:none; background:none; }

/* ════════════════════════════════════════════════════
   СПІЛЬНІ УТИЛІТИ — додані після аналізу дублювання
   ════════════════════════════════════════════════════ */

/* ── FONT SIZE HELPERS (замість inline style="font-size:...") ── */
.cs-md    { font-size: var(--fs-md); }
.cs-lg    { font-size: var(--fs-lg); }
.cs-xl    { font-size: var(--fs-xl); }

/* ── SPACING HELPERS ── */
.m-0      { margin: 0; }
.mt-0     { margin-top: 0; }
.mb-0     { margin-bottom: 0; }
.mt-2px   { margin-top: 2px; }

/* ── LAYOUT HELPERS ── */
.flex-min { flex: 1; min-width: 0; }
.no-resize { resize: none; }

/* ── SCROLL TOUCH (замість inline -webkit-overflow-scrolling) ── */
.scroll-touch {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroll-touch::-webkit-scrollbar { display: none; }

/* ── LOGO MARK SIZES (замість inline width/height/font-size) ── */
.logo-sm {
  width: 28px; height: 28px;
  font-size: var(--fs-small);
  flex-shrink: 0;
}
.logo-md {
  width: 30px; height: 30px;
  font-size: var(--fs-small);
}
.logo-lg {
  width: 32px; height: 32px;
  font-size: var(--fs-small);
}

/* ── PAGE CONTENT WRAP (замість inline padding-top:72px) ── */
.page-content {
  padding-top: 72px;
  padding-bottom: 48px;
}

/* ── MOBILE PREVIEW STRIP HEIGHT ── */
.preview-strip {
  height: calc(40vh - 104px);
  overflow-y: auto;
}

/* ── TABLE ROWS ── */
tbody tr { transition: background .15s; }
tbody tr:hover { background: #f9fafb; }

/* ── DROPDOWN BUTTON ── */
.dd-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; background:#fff; border:1px solid #e5e7eb; border-radius:8px; font-size:14px; color:#374151; cursor:pointer; white-space:nowrap; }
.dd-btn:hover { border-color:#93c5fd; }
.dd-item { padding:8px 12px; font-size:14px; color:#374151; cursor:pointer; }
.dd-item:hover { background:#f9fafb; }

/* ── CONTEXT (DOT) MENU ── */
.ctx { position:relative; display:inline-block; }
.ctx-menu { display:none; position:absolute; right:0; top:100%; margin-top:4px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.1); min-width:130px; z-index:50; padding:4px; }
.ctx-menu.show { display:block; }
.ctx-menu a { display:flex; align-items:center; gap:8px; padding:8px 12px; font-size:14px; color:#374151; border-radius:8px; cursor:pointer; text-decoration:none; }
.ctx-menu a:hover { background:#f9fafb; }
.ctx-menu a.danger { color:#dc2626; }

/* ── AVATAR PALETTE ── */
.av-0{background:#e0e7ff;color:#4338ca} .av-1{background:#dbeafe;color:#1d4ed8}
.av-2{background:#d1fae5;color:#065f46} .av-3{background:#fef3c7;color:#92400e}
.av-4{background:#fce7f3;color:#9d174d} .av-5{background:#ede9fe;color:#5b21b6}
.av-6{background:#e0f2fe;color:#0369a1} .av-7{background:#ccfbf1;color:#0f766e}
.av-8{background:#ffe4e6;color:#9f1239} .av-9{background:#ffedd5;color:#c2410c}

/* ── PAGINATION ── */
.pg-btn { width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; font-size:14px; font-weight:500; cursor:pointer; }
.pg-btn.active { background:#2563eb; color:#fff; }
.pg-btn:not(.active):not(:disabled) { color:#374151; }
.pg-btn:not(.active):not(:disabled):hover { background:#f3f4f6; }
.pg-btn:disabled { color:#d1d5db; cursor:not-allowed; }

/* ── PERIOD BUTTONS ── */
.period-btn { padding:6px 12px; border-radius:8px; font-size:14px; font-weight:500; cursor:pointer; border:none; background:none; }