:root {

  /* ================================================================
   * LAYER 1 — PALETTE TOKENS
   * Raw named values. Components never reference these directly.
   * ================================================================ */

  /* Gray scale — 10 stops */
  --gray-1:  #F6F6F7;
  --gray-2:  #F1F1F2;
  --gray-3:  #E3E3E5;
  --gray-4:  #C9CCCF;
  --gray-5:  #8C9196;
  --gray-6:  #6D7175;
  --gray-7:  #4A4F54;
  --gray-8:  #2C3034;
  --gray-9:  #1A1D1F;
  --gray-10: #0D0E0E;

  /* Green — primary brand */
  --green-1: #F1F8F5;
  --green-2: #D4EDDF;
  --green-3: #A8D9BC;
  --green-4: #5CB485;
  --green-5: #2D8A5B;
  --green-6: #1A6B42;
  --green-7: #0D4F2E;
  --green-8: #06331C;

  /* Blue — interactive / info */
  --blue-1:  #EBF5FF;
  --blue-2:  #B5D9FF;
  --blue-3:  #7EBEFF;
  --blue-4:  #3590FF;
  --blue-5:  #0070F3;
  --blue-6:  #0051CC;
  --blue-7:  #003799;
  --blue-8:  #002166;

  /* Red — critical / danger */
  --red-1:   #FFF4F4;
  --red-2:   #FFD2D2;
  --red-3:   #FFA8A8;
  --red-4:   #E32222;
  --red-5:   #C41C1C;
  --red-6:   #A01414;
  --red-7:   #6C0C0C;
  --red-8:   #3C0404;

  /* Yellow — warning */
  --yellow-1: #FFFBE6;
  --yellow-2: #FFE880;
  --yellow-3: #FFCC00;
  --yellow-4: #CC9900;
  --yellow-5: #8A6400;
  --yellow-6: #5C4100;

  /* Orange — caution */
  --orange-1: #FFF5E9;
  --orange-2: #FFD6A4;
  --orange-3: #FFB347;
  --orange-4: #E07D00;
  --orange-5: #994F00;
  --orange-6: #5C2E00;

  /* Teal — highlight / info secondary */
  --teal-1:  #E8F9F9;
  --teal-2:  #AADEDE;
  --teal-3:  #52BFBF;
  --teal-4:  #00A19A;
  --teal-5:  #00706B;
  --teal-6:  #004D49;

  /* Purple — decorative / tags */
  --purple-1: #F3EDFF;
  --purple-2: #CAAFF5;
  --purple-3: #A272E8;
  --purple-4: #7B46CC;
  --purple-5: #572DA3;
  --purple-6: #351873;

  /* ================================================================
   * LAYER 2 — SEMANTIC COLOR TOKENS
   * Role-based aliases. Components use ONLY these.
   * ================================================================ */

  /* ── SURFACE ── */
  --color-bg:                   var(--gray-2);
  --color-bg-surface:           #FFFFFF;
  --color-bg-surface-raised:    #FFFFFF;
  --color-bg-surface-inset:     var(--gray-1);
  --color-bg-surface-hover:     var(--gray-2);
  --color-bg-surface-active:    var(--gray-3);
  --color-bg-surface-disabled:  var(--gray-1);

  /* ── FILL ── */
  --color-bg-fill:              var(--gray-9);
  --color-bg-fill-hover:        var(--gray-10);
  --color-bg-fill-active:       var(--gray-10);
  --color-bg-fill-selected:     var(--gray-9);
  --color-bg-fill-disabled:     var(--gray-3);

  --color-bg-fill-primary:        var(--green-6);
  --color-bg-fill-primary-hover:  var(--green-7);
  --color-bg-fill-primary-active: var(--green-8);

  --color-bg-fill-critical:        var(--red-4);
  --color-bg-fill-critical-hover:  var(--red-5);
  --color-bg-fill-critical-active: var(--red-6);

  --color-bg-fill-info:         var(--blue-5);
  --color-bg-fill-info-hover:   var(--blue-6);
  --color-bg-fill-success:      var(--green-5);
  --color-bg-fill-warning:      var(--yellow-3);

  /* ── PALE SURFACES ── */
  --color-bg-surface-critical:  var(--red-1);
  --color-bg-surface-warning:   var(--yellow-1);
  --color-bg-surface-success:   var(--green-1);
  --color-bg-surface-info:      var(--blue-1);
  --color-bg-surface-caution:   var(--orange-1);
  --color-bg-surface-primary:   var(--green-1);

  /* ── TEXT ── */
  --color-text:                 var(--gray-9);
  --color-text-secondary:       var(--gray-6);
  --color-text-disabled:        var(--gray-5);
  --color-text-inverse:         #FFFFFF;
  --color-text-primary:         var(--green-6);
  --color-text-primary-hover:   var(--green-7);
  --color-text-critical:        var(--red-5);
  --color-text-caution:         var(--orange-5);
  --color-text-warning:         var(--yellow-5);
  --color-text-success:         var(--green-6);
  --color-text-info:            var(--blue-6);

  /* ── ICON ── */
  --color-icon:                 var(--gray-6);
  --color-icon-hover:           var(--gray-9);
  --color-icon-active:          var(--gray-9);
  --color-icon-disabled:        var(--gray-4);
  --color-icon-primary:         var(--green-6);
  --color-icon-critical:        var(--red-4);
  --color-icon-caution:         var(--orange-4);
  --color-icon-success:         var(--green-5);
  --color-icon-info:            var(--blue-5);
  --color-icon-inverse:         #FFFFFF;

  /* ── BORDER ── */
  --color-border:               var(--gray-3);
  --color-border-secondary:     var(--gray-2);
  --color-border-strong:        var(--gray-4);
  --color-border-disabled:      var(--gray-3);
  --color-border-primary:       var(--green-5);
  --color-border-critical:      var(--red-4);
  --color-border-caution:       var(--orange-3);
  --color-border-success:       var(--green-4);
  --color-border-info:          var(--blue-4);
  --color-border-focus:         var(--blue-5);

  /* ── NAVIGATION ── */
  --color-nav-bg:               var(--gray-9);
  --color-nav-border:           var(--gray-8);
  --color-nav-text:             var(--gray-5);
  --color-nav-text-hover:       var(--gray-3);
  --color-nav-text-active:      #FFFFFF;
  --color-nav-item-hover:       var(--gray-8);
  --color-nav-item-active:      var(--green-6);
  --color-nav-item-selected-bg: rgba(26, 107, 66, 0.15);
  --color-nav-section-label:    var(--gray-7);

  /* ================================================================
   * LAYER 2 — NON-COLOR TOKENS
   * ================================================================ */

  /* ── TYPOGRAPHY ── */
  --font-sans: -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: "SFMono-Regular", "Consolas", "Liberation Mono", Menlo, Courier, monospace;

  --font-size-50:  10px;
  --font-size-75:  12px;
  --font-size-100: 13px;
  --font-size-200: 14px;
  --font-size-300: 16px;
  --font-size-400: 20px;
  --font-size-500: 24px;
  --font-size-600: 28px;
  --font-size-700: 32px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-100: 16px;
  --line-height-200: 20px;
  --line-height-300: 24px;
  --line-height-400: 28px;
  --line-height-500: 32px;
  --line-height-600: 40px;

  /* ── SPACING ── */
  --space-025:  1px;
  --space-050:  2px;
  --space-100:  4px;
  --space-150:  6px;
  --space-200:  8px;
  --space-300:  12px;
  --space-400:  16px;
  --space-500:  20px;
  --space-600:  24px;
  --space-800:  32px;
  --space-1000: 40px;
  --space-1200: 48px;
  --space-1600: 64px;
  --space-2000: 80px;

  /* ── BORDER RADIUS ── */
  --border-radius-050: 2px;
  --border-radius-100: 4px;
  --border-radius-150: 6px;
  --border-radius-200: 8px;
  --border-radius-300: 12px;
  --border-radius-400: 16px;
  --border-radius-full: 9999px;

  /* ── SHADOWS ── */
  --shadow-100: 0 1px 0 rgba(26, 26, 26, 0.07);
  --shadow-200: 0 1px 1px rgba(26, 26, 26, 0.10), 0 0 0 1px rgba(63, 63, 68, 0.05);
  --shadow-300: 0 2px 4px rgba(26, 26, 26, 0.10), 0 0 0 1px rgba(63, 63, 68, 0.05);
  --shadow-400: 0 4px 8px rgba(26, 26, 26, 0.10), 0 0 0 1px rgba(63, 63, 68, 0.05);
  --shadow-500: 0 8px 16px rgba(26, 26, 26, 0.12), 0 0 0 1px rgba(63, 63, 68, 0.05);
  --shadow-600: 0 16px 32px rgba(26, 26, 26, 0.14), 0 0 0 1px rgba(63, 63, 68, 0.05);
  --shadow-inset-100: inset 0 1px 2px rgba(26, 26, 26, 0.10);
  --shadow-focus: 0 0 0 3px var(--color-border-focus), 0 0 0 1px var(--color-border-focus);

  /* ── MOTION ── */
  --motion-duration-fast: 100ms;
  --motion-duration-base: 200ms;
  --motion-duration-slow: 300ms;
  --motion-ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --motion-ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* ── LAYOUT ── */
  --topbar-height:     56px;
  --sidebar-width:     240px;
  --sidebar-collapsed: 64px;
  --content-max-width: 1280px;
  --card-padding:      var(--space-400);
  --card-padding-lg:   var(--space-500);

  /* ================================================================
   * BACKWARD COMPATIBILITY ALIASES
   * Maps old token names → new semantic tokens so existing CSS rules
   * continue to work without modification.
   * ================================================================ */

  /* Old primary scale → green (brand shift from indigo to green) */
  --color-primary-50:  var(--green-1);
  --color-primary-100: var(--green-2);
  --color-primary-200: var(--green-3);
  --color-primary-300: var(--green-4);
  --color-primary-400: var(--green-5);
  --color-primary-500: var(--green-5);
  --color-primary-600: var(--color-bg-fill-primary);
  --color-primary-700: var(--color-bg-fill-primary-hover);
  --color-primary-800: var(--color-bg-fill-primary-active);
  --color-primary-900: var(--green-8);

  /* Old slate scale → gray */
  --color-slate-50:  var(--gray-1);
  --color-slate-100: var(--gray-1);
  --color-slate-200: var(--gray-3);
  --color-slate-300: var(--gray-4);
  --color-slate-400: var(--gray-5);
  --color-slate-500: var(--gray-6);
  --color-slate-600: var(--gray-6);
  --color-slate-700: var(--gray-7);
  --color-slate-800: var(--gray-8);
  --color-slate-900: var(--gray-9);

  /* Old semantic color aliases */
  --color-success:        var(--color-bg-fill-success);
  --color-success-pale:   var(--color-bg-surface-success);
  --color-success-text:   var(--color-text-success);
  --color-success-border: var(--color-border-success);
  --color-warning:        var(--color-text-warning);
  --color-warning-pale:   var(--color-bg-surface-warning);
  --color-warning-text:   var(--color-text-warning);
  --color-warning-border: var(--color-border-caution);
  --color-danger:         var(--color-bg-fill-critical);
  --color-danger-pale:    var(--color-bg-surface-critical);
  --color-danger-text:    var(--color-text-critical);
  --color-danger-border:  var(--color-border-critical);
  --color-info:           var(--color-bg-fill-info);
  --color-info-pale:      var(--color-bg-surface-info);
  --color-info-text:      var(--color-text-info);
  --color-info-border:    var(--color-border-info);

  /* Old surface aliases */
  --color-surface:       var(--color-bg);
  --color-card:          var(--color-bg-surface);
  --color-ink:           var(--color-text);
  --color-muted:         var(--color-text-secondary);
  --color-subtle:        var(--color-text-disabled);

  /* Old sidebar/topbar aliases → navigation tokens */
  --color-sidebar-bg:          var(--color-nav-bg);
  --color-sidebar-hover:       var(--color-nav-item-hover);
  --color-sidebar-active:      var(--color-nav-item-active);
  --color-sidebar-border:      var(--color-nav-border);
  --color-sidebar-text:        var(--color-nav-text);
  --color-sidebar-text-active: var(--color-nav-text-active);
  --color-topbar-hover:        var(--color-nav-item-hover);
  --color-shell-bg:            var(--gray-10);
  --color-notification:        var(--red-3);

  /* Old typography aliases */
  --text-xs:   var(--font-size-75);
  --text-sm:   var(--font-size-75);
  --text-base: var(--font-size-200);
  --text-md:   var(--font-size-300);
  --text-lg:   var(--font-size-300);
  --text-xl:   var(--font-size-400);
  --text-2xl:  var(--font-size-600);
  --weight-normal:   var(--font-weight-regular);
  --weight-medium:   var(--font-weight-medium);
  --weight-semibold: var(--font-weight-semibold);
  --weight-bold:     var(--font-weight-bold);

  /* Old spacing aliases */
  --space-1:  var(--space-100);
  --space-2:  var(--space-200);
  --space-3:  var(--space-300);
  --space-4:  var(--space-400);
  --space-5:  var(--space-500);
  --space-6:  var(--space-600);
  --space-8:  var(--space-800);
  --space-12: var(--space-1200);
  --space-16: var(--space-1600);

  /* Old border-radius aliases */
  --radius-xs:   var(--border-radius-100);
  --radius-sm:   var(--border-radius-150);
  --radius-md:   var(--border-radius-200);
  --radius-lg:   var(--border-radius-300);
  --radius-xl:   var(--border-radius-300);
  --radius-2xl:  var(--border-radius-400);
  --radius-3xl:  20px;
  --radius-pill: var(--border-radius-full);

  /* Old shadow aliases */
  --shadow-none: none;
  --shadow-xs:   var(--shadow-100);
  --shadow-sm:   var(--shadow-200);
  --shadow-md:   var(--shadow-300);
  --shadow-lg:   var(--shadow-400);
  --shadow-xl:   var(--shadow-500);

  /* Old motion aliases */
  --transition-fast: var(--motion-duration-fast) var(--motion-ease);
  --transition-base: var(--motion-duration-base) var(--motion-ease);
  --transition-slow: var(--motion-duration-slow) var(--motion-ease);

  /* Old misc aliases */
  --primary:    var(--color-bg-fill-primary);
  --secondary:  var(--color-text);
  --success:    var(--color-bg-fill-success);
  --warning:    var(--color-text-warning);
  --danger:     var(--color-bg-fill-critical);
  --background: var(--color-bg);
  --card:       var(--color-bg-surface);
  --border:     var(--color-border);
  --ink:        var(--color-text);
  --muted:      var(--color-text-secondary);

  /* ================================================================
   * LEGACY COMPATIBILITY TOKENS
   * Raw hardcoded values referenced by older CSS rules.
   * Do not use in new components — use semantic tokens instead.
   * ================================================================ */
  --legacy-color-1d4ed8: #1D4ED8;
  --legacy-color-2563eb: #2563EB;
  --legacy-color-111b30: #111B30;
  --legacy-color-dbeafe: #DBEAFE;
  --legacy-color-e5e7eb: #E5E7EB;
  --legacy-color-aeb6c2: #AEB6C2;
  --legacy-color-b91c1c: #B91C1C;
  --legacy-color-243041: #243041;
  --legacy-color-10b981: #10B981;
  --legacy-color-dcfce7: #DCFCE7;
  --legacy-color-eff6ff: #EFF6FF;
  --legacy-color-e0f2fe: #E0F2FE;
  --legacy-color-0369a1: #0369A1;
  --legacy-color-fbfcfd: #FBFCFD;
  --legacy-color-f5f7fa: #F5F7FA;
  --legacy-color-e3eaf3: #E3EAF3;
  --legacy-color-d6dbe3: #D6DBE3;
  --legacy-color-f4f6f8: #F4F6F8;
  --legacy-color-3f4754: #3F4754;
  --legacy-color-2f3742: #2F3742;
  --legacy-color-d9dde3: #D9DDE3;
  --legacy-color-f7f8fa: #F7F8FA;
  --legacy-color-4b5563: #4B5563;
  --legacy-color-fbfbfc: #FBFBFC;
  --legacy-color-f2f4f7: #F2F4F7;
  --legacy-color-cfd6df: #CFD6DF;
  --legacy-color-dde3ea: #DDE3EA;
  --legacy-color-e5e8ee: #E5E8EE;
  --legacy-color-7c2d12: #7C2D12;
  --legacy-color-c2410c: #C2410C;
  --legacy-color-6b7280: #6B7280;
  --legacy-color-dbe3ef: #DBE3EF;
  --legacy-color-1f6f43: #1F6F43;
  --legacy-color-8a5b14: #8A5B14;
  --legacy-color-dbe2ea: #DBE2EA;
  --legacy-color-d8dee8: #D8DEE8;
  --legacy-color-eef2f6: #EEF2F6;
  --legacy-color-374151: #374151;
  --legacy-color-e8f6ee: #E8F6EE;
  --legacy-color-f3f4f6: #F3F4F6;
  --legacy-color-fff7ed: #FFF7ED;
  --legacy-color-9a3412: #9A3412;
  --legacy-color-fff7e7: #FFF7E7;
  --legacy-color-f7ecef: #F7ECEF;
  --legacy-color-7f1220: #7F1220;
  --legacy-color-1e3a8a: #1E3A8A;
  --legacy-color-bfdbfe: #BFDBFE;
  --legacy-color-111827: #111827;
  --legacy-color-eef2f7: #EEF2F7;
  --legacy-color-22c55e: #22C55E;
  --legacy-color-f59e0b: #F59E0B;
  --legacy-color-ef4444: #EF4444;
  --legacy-color-93c5fd: #93C5FD;
  --legacy-color-0b1220: #0B1220;
  --legacy-color-1f2937: #1F2937;
  --legacy-color-d6dbe5: #D6DBE5;
  --legacy-color-ecfeff: #ECFEFF;
  --legacy-color-0e7490: #0E7490;
  --legacy-color-eaf8ef: #EAF8EF;
  --legacy-color-fff7e6: #FFF7E6;
  --legacy-color-9ca3af: #9CA3AF;
  --legacy-color-15803d: #15803D;
  --legacy-color-86efac: #86EFAC;
  --legacy-color-175c93: #175C93;
  --legacy-color-2f7d16: #2F7D16;
  --legacy-color-bd6a08: #BD6A08;
  --legacy-color-9fb8cf: #9FB8CF;
  --legacy-color-edf3f8: #EDF3F8;
  --legacy-color-60758a: #60758A;
  --legacy-color-276b1b: #276B1B;
  --legacy-color-edf8ea: #EDF8EA;
  --legacy-color-9f3131: #9F3131;
  --legacy-color-fff0f0: #FFF0F0;
  --legacy-color-e7e5e4: #E7E5E4;
  --legacy-color-1c1917: #1C1917;
  --legacy-color-292524: #292524;
  --legacy-color-d6d3d1: #D6D3D1;
  --legacy-color-44403c: #44403C;
  --legacy-color-f5f5f4: #F5F5F4;
  --legacy-color-a8a29e: #A8A29E;
  --legacy-color-fafaf9: #FAFAF9;
  --legacy-color-3f6212: #3F6212;
  --legacy-color-a16207: #A16207;
  --legacy-color-78716c: #78716C;
  --legacy-color-57534e: #57534E;
  --legacy-color-d1d5db: #D1D5DB;
  --legacy-color-f9fafc: #F9FAFC;
  --legacy-color-f9fafb: #F9FAFB;
  --legacy-color-f8f7f5: #F8F7F5;
  --legacy-color-f8f8f8: #F8F8F8;
  --legacy-color-8c8878: #8C8878;
  --legacy-color-d3d1c7: #D3D1C7;
  --legacy-color-fff5f5: #FFF5F5;
  --legacy-color-f3b9b9: #F3B9B9;
  --legacy-color-b42318: #B42318;
  --legacy-color-eff3ff: #EFF3FF;
  --legacy-color-7a7a7a: #7A7A7A;
  --legacy-color-8f8b7c: #8F8B7C;
  --legacy-color-3b5bdb: #3B5BDB;
  --legacy-color-888780: #888780;
  --legacy-color-7c7f85: #7C7F85;
  --legacy-rgba-f8e216cd7c: rgba(15, 23, 42, 0.09);
  --legacy-rgba-8d2af7fbfd: rgba(255, 255, 255, 0.22);
  --legacy-rgba-cc53ce15c7: rgba(255, 255, 255, 0.92);
  --legacy-rgba-3557e30eb0: rgba(37, 99, 235, 0.32);
  --legacy-rgba-e0b1d23205: rgba(15, 23, 42, 0.12);
  --legacy-rgba-bc67593373: rgba(15, 23, 42, 0.05);
  --legacy-rgba-22a296d792: rgba(15, 23, 42, 0.08);
  --legacy-rgba-e04b0af280: rgba(148, 163, 184, 0.14);
  --legacy-rgba-aa243d876f: rgba(15, 23, 42, 0.03);
  --legacy-rgba-c28d776ff9: rgba(15, 23, 42, 0.06);
  --legacy-rgba-fe3fb408d6: rgba(37, 99, 235, 0.12);
  --legacy-rgba-d8e19c4098: rgba(37, 99, 235, 0.14);
  --legacy-rgba-8ce00b242d: rgba(59, 130, 246, 0.08);
  --legacy-rgba-62ec1e2248: rgba(16, 185, 129, 0.14);
  --legacy-rgba-f29e7e942a: rgba(37, 99, 235, 0.1);
  --legacy-rgba-a03757fa22: rgba(0, 0, 0, 0.03);
  --legacy-rgba-000dc4704a: rgba(0, 0, 0, 0.05);
  --legacy-rgba-f48c31b3bb: rgba(15, 23, 42, 0.4);
  --legacy-rgba-9e87b73398: rgba(15, 23, 42, 0.28);
  --legacy-rgba-e651d46261: rgba(15, 23, 42, 0.15);
  --legacy-rgba-3d0b8ef9b6: rgba(15, 23, 42, 0.2);
  --legacy-rgba-9c46d2f9f9: rgba(37, 99, 235, 0.15);
  --legacy-rgba-307b5316a4: rgba(15, 23, 42, 0.58);
  --legacy-rgba-2ef1cf420b: rgba(30, 41, 59, 0.34);
  --legacy-rgba-0e2a2ee9de: rgba(239, 68, 68, 0.2);
  --legacy-rgba-254f75671f: rgba(255, 255, 255, 0);
  --legacy-rgba-23d204d6ff: rgba(148, 163, 184, 0.16);
  --legacy-rgba-8056952d08: rgba(15, 23, 42, 0.07);
  --legacy-rgba-3240abcadf: rgba(28, 25, 23, 0.12);
  --legacy-rgba-17ba441a6b: rgba(250, 250, 249, 0.96);
  --legacy-rgba-011607f240: rgba(0, 0, 0, 0.06);
  --legacy-rgba-a9f2373e64: rgba(15, 23, 42, 0.5);
  --legacy-rgba-1d5e96a5e3: rgba(37, 99, 235, 0.22);
  --legacy-rgba-fb59c332bc: rgba(37, 99, 235, 0.08);
  --legacy-rgba-bea5bf1f91: rgba(15, 23, 42, 0.35);
  --legacy-rgba-95d05dce9a: rgba(15, 23, 42, 0.25);
  --legacy-rgba-9e6faaf3f9: rgba(0,0,0,.1);
  --legacy-rgba-b41805d683: rgba(0,0,0,.15);
  --legacy-rgba-a6f87266b2: rgba(0,0,0,.12);
  --legacy-rgba-b8e23438dc: rgba(15,23,42,.1);
  --legacy-rgba-e38f8a1614: rgba(15,23,42,.5);
  --legacy-rgba-0845b805b7: rgba(15,23,42,.2);
  --legacy-rgba-53f7bd145a: rgba(37,99,235,.1);
  --legacy-rgba-56d89d6fe1: rgba(255, 255, 255, 0.18);
  --legacy-rgba-715ef8182c: rgba(79, 70, 229, 0.12);
  --legacy-rgba-348d02e200: rgba(220, 38, 38, 0.10);
  --legacy-rgba-c4bd787750: rgba(22, 163, 74, 0.10);
  --legacy-rgba-d4ebb9021f: rgba(15, 23, 42, 0.18);
  --legacy-rgba-384a914672: rgba(79, 70, 229, 0.25);
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-300);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1 { font-size: var(--font-size-600); font-weight: var(--font-weight-bold); color: var(--color-text); letter-spacing: -0.02em; line-height: var(--line-height-600); margin: 0; }
h2 { font-size: var(--font-size-500); font-weight: var(--font-weight-semibold); color: var(--color-text); letter-spacing: -0.01em; line-height: var(--line-height-500); margin: 0; }
h3 { font-size: var(--font-size-300); font-weight: var(--font-weight-semibold); color: var(--color-text); line-height: var(--line-height-400); margin: 0; }
h4 { font-size: var(--font-size-200); font-weight: var(--font-weight-semibold); color: var(--color-text); margin: 0; }

p { font-size: var(--font-size-200); line-height: var(--line-height-300); color: var(--color-text); margin: 0; }

/* ── Polaris text variant utility classes ── */

.text-heading-xl {
  font-size: var(--font-size-600);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-600);
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.text-heading-lg {
  font-size: var(--font-size-500);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-500);
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.text-heading-md {
  font-size: var(--font-size-300);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-400);
  color: var(--color-text);
}

.text-heading-sm {
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-300);
  color: var(--color-text);
}

.text-heading-xs {
  font-size: var(--font-size-75);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: var(--line-height-200);
  color: var(--color-text-secondary);
}

.text-body-lg {
  font-size: var(--font-size-300);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-400);
  color: var(--color-text);
}

.text-body-md {
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-300);
  color: var(--color-text);
}

.text-body-sm {
  font-size: var(--font-size-75);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-200);
  color: var(--color-text-secondary);
}

.text-caption {
  font-size: var(--font-size-75);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-100);
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
}

.text-subdued  { color: var(--color-text-secondary); }
.text-critical { color: var(--color-text-critical); }
.text-success  { color: var(--color-text-success); }

a {
  color: var(--color-text-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

code,
pre {
  font-family: var(--font-mono);
  font-size: var(--font-size-100);
}

.login-wrap {
  max-width: 1120px;
  margin: 48px auto;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--card);
  padding: 0;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  overflow: hidden;
  box-shadow: 0 14px 40px var(--legacy-rgba-f8e216cd7c);
}

.login-hero {
  background:
    linear-gradient(145deg, var(--legacy-color-1d4ed8), var(--legacy-color-2563eb)),
    radial-gradient(400px 180px at 20% 0%, var(--legacy-rgba-8d2af7fbfd), transparent 60%);
  color: var(--color-card);
  padding: 32px 30px;
}

.login-hero h2 {
  color: var(--color-card);
  margin: 0 0 12px;
  font-size: var(--text-2xl);
  line-height: 1.15;
}

.login-hero p {
  margin: 0;
  max-width: 360px;
  color: var(--legacy-rgba-cc53ce15c7);
}

.login-form-pane {
  padding: 26px;
}

.login-form-pane h3 {
  margin: 0 0 6px;
  font-size: var(--text-xl);
}

.shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
}

/* ── Task 3: Navigation / Sidebar (Polaris-inspired) ── */

.shell.sidebar-collapsed {
  grid-template-columns: var(--sidebar-collapsed) minmax(0, 1fr);
}

.sidebar {
  width: 240px;
  border-right: 1px solid var(--color-nav-border);
  background: var(--color-nav-bg);
  color: var(--color-nav-text);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
}

.brand-block {
  padding: var(--space-400) var(--space-400) var(--space-300);
  border-bottom: 1px solid var(--color-nav-border);
  display: flex;
  align-items: center;
  gap: var(--space-200);
  flex-shrink: 0;
}

/* Logo mark pseudo-element — no markup change needed */
.brand-block h1::before {
  content: 'I';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: var(--color-bg-fill-primary);
  border-radius: var(--border-radius-150);
  color: #FFFFFF;
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-bold);
  vertical-align: middle;
  margin-right: var(--space-200);
}

.sidebar h1 {
  margin: 0;
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: #FFFFFF;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
}

.brand-block .small {
  font-size: var(--font-size-50);
  font-weight: var(--font-weight-semibold);
  color: var(--color-nav-section-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-live-badge {
  display: none;
}

.sidebar-workspace {
  margin: var(--space-300) var(--space-400) 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-nav-border);
  border-radius: var(--border-radius-150);
  color: var(--color-nav-text-hover);
  height: 32px;
  font-size: var(--font-size-100);
  padding: 0 var(--space-300);
}

.sidebar-search {
  margin: var(--space-200) var(--space-400);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-nav-border);
  border-radius: var(--border-radius-150);
  color: var(--color-nav-text-hover);
  height: 32px;
  font-size: var(--font-size-100);
  padding: 0 var(--space-300);
}

.sidebar-search::placeholder {
  color: var(--color-nav-section-label);
}

.sidebar ul {
  list-style: none;
  margin: 0;
  padding: var(--space-200) 0;
  display: flex;
  flex-direction: column;
  align-items: stretch !important;
  gap: 0;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
}

.sidebar ul::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.nav-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-top: 1px solid var(--color-nav-border);
  margin-top: 3px;
  padding-top: 0;
}

.nav-section-btn {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #4A4F54;
  padding: 8px 16px 2px;
  text-align: left !important;
  cursor: default;
  pointer-events: none;
}

.nav-group-text {
  color: var(--color-nav-section-label);
}

.chevron {
  display: none;
}

.nav-sub {
  display: flex;
  flex-direction: column;
  align-items: stretch !important;
  width: 100%;
  gap: 0;
}

.nav-item-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  gap: 9px;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0;
  padding: 6px 14px;
  padding-left: 11px;
  text-align: left !important;
  text-decoration: none;
  background: transparent;
  color: var(--color-nav-text);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: background 100ms ease, color 100ms ease;
}

.nav-item-btn:hover {
  background: var(--color-nav-item-hover);
  color: var(--color-nav-text-hover);
}

.nav-item-btn.active {
  background: rgba(26, 107, 66, 0.12);
  color: #FFFFFF;
  font-weight: 600;
  border-left: 3px solid #1A6B42;
  padding-left: 11px;
}

.nav-item-btn svg,
.nav-section-btn svg {
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex-shrink: 0;
  color: currentColor;
  opacity: 0.7;
}

.nav-sub .nav-item-btn {
  padding-left: 11px;
}

.nav-item-btn.active svg {
  opacity: 1;
}

.nav-item-btn:focus-visible {
  outline: none;
  box-shadow: none;
}

.badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  border-radius: var(--border-radius-full);
  background: var(--color-nav-border);
  color: var(--color-nav-section-label);
  font-size: var(--font-size-75);
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-150);
}

.nav-item-btn.active .badge {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
}

.nav-divider {
  height: 1px;
  background: var(--color-nav-border);
  margin: var(--space-200) 0;
  border: none;
}

.sidebar-footer {
  margin-top: auto;
  padding: var(--space-300) var(--space-400);
  border-top: 1px solid var(--color-nav-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-200);
  cursor: pointer;
  transition: background var(--motion-duration-fast) var(--motion-ease);
}

.sidebar-footer:hover {
  background: var(--color-nav-item-hover);
}

.profile-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg-fill-primary);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-75);
  flex-shrink: 0;
}

.profile-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.profile-text strong {
  color: #FFFFFF;
  font-size: var(--font-size-100);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-text span {
  color: var(--color-nav-section-label);
  font-size: var(--font-size-75);
  font-weight: var(--font-weight-regular);
}

#sidebarLogoutBtn {
  display: none;
}

/* ── Collapsed state ── */
.shell.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed);
}

.shell.sidebar-collapsed .sidebar-search,
.shell.sidebar-collapsed .sidebar-workspace,
.shell.sidebar-collapsed .menu-label,
.shell.sidebar-collapsed .nav-group-text,
.shell.sidebar-collapsed .chevron,
.shell.sidebar-collapsed .brand-block .small,
.shell.sidebar-collapsed .profile-text,
.shell.sidebar-collapsed #sidebarLogoutBtn,
.shell.sidebar-collapsed .badge {
  display: none;
}

.shell.sidebar-collapsed .brand-block {
  padding: var(--space-300);
  justify-content: center;
}

.shell.sidebar-collapsed .brand-block h1 {
  font-size: 0;
  overflow: visible;
}

.shell.sidebar-collapsed .brand-block h1::before {
  margin-right: 0;
}

.shell.sidebar-collapsed .nav-item-btn {
  justify-content: center;
  padding: var(--space-200);
  border-left-color: transparent;
}

/* Collapsed active: solid green tint instead of left border */
.shell.sidebar-collapsed .nav-item-btn.active {
  background: rgba(26, 107, 66, 0.30);
  border-left-color: transparent;
}

.shell.sidebar-collapsed .nav-sub {
  display: none;
}

.shell.sidebar-collapsed .nav-section-btn {
  padding: 0;
  height: 0;
  overflow: hidden;
}

.shell.sidebar-collapsed .sidebar-footer {
  padding: var(--space-300);
  justify-content: center;
}

.shell.sidebar-collapsed .profile-avatar {
  margin: 0 auto;
}

.main {
  padding: 0;
  background: var(--background);
  min-width: 0;
  overflow-x: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: 56px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  background: var(--color-card);
  white-space: nowrap;
  overflow: visible;
}

.topbar > * {
  min-width: 0;
}

.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  margin-left: auto;
}

.top-notify {
  position: relative;
}

.notify-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--color-slate-900);
  color: var(--color-slate-50);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0 5px;
}

.notify-icon-btn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  position: relative;
}

.notify-icon-btn svg {
  width: 16px;
  height: 16px;
}

.notify-icon-btn .notify-count {
  position: absolute;
  top: -5px;
  right: -5px;
  margin-left: 0;
}

.top-dropdown-menu {
  position: fixed;
  right: 16px;
  top: calc(var(--topbar-height) + 4px);
  min-width: 280px;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 10px;
  background: var(--color-card);
  box-shadow: 0 10px 26px var(--legacy-rgba-e0b1d23205);
  padding: 6px;
  display: grid;
  gap: 4px;
  z-index: 200;
}

.top-dropdown-menu button {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--color-card);
  color: var(--color-slate-900);
  padding: 8px 10px;
  font-size: var(--text-sm);
}

.top-dropdown-menu button:hover {
  background: var(--color-slate-50);
  border-color: var(--color-slate-200);
}

.notify-menu-summary {
  display: grid;
  gap: 2px;
  padding: 4px 10px 8px;
  border-bottom: 1px solid var(--color-slate-200);
  margin-bottom: 4px;
}

.notify-menu-summary strong {
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.notify-menu-summary span {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.notify-menu-item {
  min-height: 0;
  height: auto;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--color-slate-50);
  color: var(--color-slate-700);
  white-space: normal;
  line-height: 1.35;
  border: 1px solid var(--color-slate-200);
}

.notify-menu-item:hover {
  background: var(--color-slate-50);
  border-color: var(--color-slate-200);
  color: var(--color-ink);
}

.app-toast {
  position: fixed;
  right: 16px;
  bottom: 20px;
  top: auto;
  z-index: 95;
  max-width: 280px;
  border-radius: 8px;
  border: 1px solid var(--color-slate-300);
  background: var(--color-slate-50);
  color: var(--color-slate-900);
  padding: 7px 12px;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.app-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.app-toast.ok {
  border-color: var(--color-success-border);
  background: var(--color-success-pale);
}

.app-toast.err {
  border-color: var(--color-danger-border);
  background: var(--color-danger-pale);
}

.top-actions button {
  width: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

#collapseSidebarBtn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  flex-shrink: 0;
}

#collapseSidebarBtn svg {
  width: 16px;
  height: 16px;
}

.workspace {
  max-width: none;
  width: 100%;
  padding: 12px;
  overflow-x: hidden;
}

/* ── Task 6: Card Component (Polaris-inspired) ── */
.card {
  background: var(--color-bg-surface);
  border-radius: var(--border-radius-200);
  box-shadow: var(--shadow-300);
  padding: var(--card-padding);
  overflow: hidden;
}

@media (min-width: 490px) {
  .card {
    padding: var(--card-padding-lg);
  }
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-300);
  margin-bottom: var(--space-400);
  padding-bottom: var(--space-400);
  border-bottom: 1px solid var(--color-border-secondary);
}

.card-header-title {
  font-size: var(--font-size-300);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  line-height: var(--line-height-400);
}

.card-header-subtitle {
  font-size: var(--font-size-75);
  color: var(--color-text-secondary);
  margin-top: var(--space-050);
}

.card-header-actions {
  margin-left: auto;
  display: flex;
  gap: var(--space-200);
}

.card-section {
  padding: var(--space-400) 0;
  border-top: 1px solid var(--color-border-secondary);
}

.card-section:first-child {
  border-top: none;
  padding-top: 0;
}

.card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-200);
  padding-top: var(--space-400);
  border-top: 1px solid var(--color-border-secondary);
  margin-top: var(--space-400);
}

/* Card variants */
.card-subdued {
  background: var(--color-bg-surface-inset);
  box-shadow: none;
  border: 1px solid var(--color-border);
}

.card-raised {
  box-shadow: var(--shadow-400);
}

.card-flat {
  box-shadow: none;
  border: 1px solid var(--color-border);
}

/* Locked overlay */
.card-locked {
  position: relative;
  overflow: hidden;
}

.card-locked::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(246, 246, 247, 0.80);
  z-index: 10;
  border-radius: inherit;
}

.card-locked-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-300);
  z-index: 11;
}

.card-locked-icon {
  width: 24px;
  height: 24px;
  color: var(--color-icon-disabled);
}

.card-locked-title {
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.card-locked-sub {
  font-size: var(--font-size-75);
  color: var(--color-text-disabled);
}

/* Preserve editor card overrides */
.editor-page-header.card,
.editor-page-header-singleline.card {
  padding: 8px 10px;
  margin-bottom: 0;
  border-radius: var(--border-radius-200);
  box-shadow: var(--shadow-100);
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

input,
select,
textarea,
button {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--border-radius-150);
  padding: 8px 10px;
  font: inherit;
  font-size: var(--text-sm);
  background: var(--color-card);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--legacy-color-aeb6c2);
  box-shadow: 0 0 0 3px var(--legacy-rgba-e04b0af280);
}

button {
  background: var(--primary);
  color: var(--color-card);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  border: none;
}

button.secondary {
  background: var(--color-card);
  color: var(--ink);
  border: 1px solid var(--border);
}

.table {
  width: 100%;
  border-collapse: collapse;
  border: none;
  background: transparent;
}

.table th,
.table td {
  text-align: left;
  border: none;
  padding: 12px 14px;
  font-size: var(--text-sm);
}

.table th {
  background: transparent;
  color: var(--color-slate-700);
  font-weight: 700;
}

.table tbody tr:nth-child(even) td {
  background: var(--legacy-rgba-aa243d876f);
}

.table tbody tr:hover td {
  background: var(--legacy-rgba-c28d776ff9);
}

.table tr:last-child td {
  border-bottom: none;
}

.small {
  font-size: var(--text-sm);
  color: var(--muted);
}

h2 {
  margin: 0 0 14px;
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--text-xl);
}

.ok {
  color: var(--color-success-text);
}

.err {
  color: var(--legacy-color-b91c1c);
}

.icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  min-width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.plugin-monitor-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.plugin-monitor-head h2{margin:0}.plugin-upload-card{display:flex;flex-direction:column;gap:10px}.plugin-upload-card h3{margin:0}.plugin-upload-card p{margin:0}.plugin-summary-grid{margin:16px 0}.plugin-monitor-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.plugin-status{display:inline-flex;padding:3px 9px;border-radius:999px;background:#eef2f7;font-size:12px;font-weight:700;text-transform:capitalize}.plugin-status.enabled{background:#dcfce7;color:#166534}.plugin-status.error{background:#fee2e2;color:#991b1b}.plugin-status.disabled{background:#f1f5f9;color:#475569}.plugin-perf{width:120px;height:6px;background:#e2e8f0;border-radius:9px;overflow:hidden;margin-bottom:4px}.plugin-perf i{display:block;height:100%;background:#2563eb;border-radius:9px}.plugin-timeline{height:170px;display:flex;align-items:flex-end;gap:6px;padding-top:16px;overflow-x:auto}.plugin-timeline>div{height:140px;min-width:28px;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px}.plugin-timeline i{display:block;width:100%;min-height:4px;background:#2563eb;border-radius:5px 5px 2px 2px}.plugin-timeline i.has-errors{background:#dc2626}.plugin-timeline small{font-size:10px;color:var(--muted);white-space:nowrap}.plugin-alert-list>div{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}.plugin-alert-list small{display:block;color:var(--muted);margin-top:3px}.plugin-alert-level{font-size:11px;font-weight:800;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:#e2e8f0}.plugin-alert-level.warning{background:#fef3c7;color:#92400e}.plugin-alert-level.critical{background:#fee2e2;color:#991b1b}.plugin-alert-level.info{background:#dbeafe;color:#1e40af}.plugin-error-list>div{display:grid;gap:3px;padding:10px 0;border-bottom:1px solid var(--border)}.plugin-error-list span{font-size:13px}.plugin-error-list small{color:var(--muted)}.plugin-alert-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}.plugin-alert-form input,.plugin-alert-form select{min-width:0;padding:9px;border:1px solid var(--border);border-radius:7px;background:var(--surface)}@media(max-width:900px){.plugin-monitor-columns{grid-template-columns:1fr}.plugin-alert-form{grid-template-columns:1fr}.plugin-alert-list>div{grid-template-columns:1fr}}
/* ── Plugin Monitor extensions ─────────────────────────────────────── */
.plugin-plan-card .plan-display{display:flex;align-items:center;gap:14px;margin:10px 0 14px}
.plan-pill{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--color-primary,#2563eb);color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.plan-pill--large{font-size:13px;padding:5px 14px}
.plan-stats{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--muted)}
.plan-stats strong{color:var(--color-text,#111)}
.plan-feature-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:6px}
.plan-feature-table th{text-align:left;padding:5px 6px;border-bottom:2px solid var(--border);font-weight:600;color:var(--muted)}
.plan-feature-table td{padding:5px 6px;border-bottom:1px solid var(--border);vertical-align:middle}
.plugin-row-actions{display:flex;gap:6px;flex-wrap:wrap}
.plugin-upload-actions{display:flex;gap:8px;margin-top:0}
.plugin-error-item{display:grid;gap:3px;padding:10px 0;border-bottom:1px solid var(--border)}
.plugin-error-item span{font-size:13px}
.plugin-error-item small{color:var(--muted)}
.plugin-error-pager{display:flex;align-items:center;gap:12px;padding:12px 0 4px;font-size:13px;color:var(--muted)}
.plugin-error-pager button{min-width:0;width:auto!important;padding:5px 12px!important;font-size:12px!important}
/* Plugin toolbar — search, filter, group toggle */
.plugin-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0 14px}
.plugin-search-input{flex:1;min-width:180px;max-width:280px}
.plugin-status-select{min-width:160px;max-width:200px}
.plugin-group-btn{white-space:nowrap}
.plugin-group-btn--active{background:var(--accent,#2563eb)!important;color:#fff!important;border-color:var(--accent,#2563eb)!important}
/* Category group header row */
.plugin-group-header td{background:var(--surface,#f8fafc);padding:7px 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-top:2px solid var(--border)}
.plugin-group-header:first-child td{border-top:none}
/* Uninstall modal */
dialog.plugin-modal{border:1px solid var(--border);border-radius:12px;padding:24px;min-width:360px;max-width:520px;box-shadow:0 12px 40px rgba(0,0,0,.18)}
dialog.plugin-modal::backdrop{background:rgba(0,0,0,.45)}
dialog.plugin-modal h3{margin:0 0 14px;font-size:1.1rem}
.plugin-modal-options{display:flex;flex-direction:column;gap:10px;margin:14px 0;padding:12px;background:var(--surface,#f8fafc);border-radius:8px;border:1px solid var(--border)}
.plugin-modal-options label{font-size:13px;display:flex;flex-direction:column;gap:4px}
.plugin-modal-options select{margin-top:4px;padding:7px;border:1px solid var(--border);border-radius:6px;background:#fff}
.plugin-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.plugin-uninstall-blocker{color:#991b1b;background:#fee2e2;padding:8px 10px;border-radius:6px;font-size:13px;margin:6px 0}
.plugin-uninstall-warning{color:#92400e;background:#fef3c7;padding:8px 10px;border-radius:6px;font-size:13px;margin:6px 0}
/* Sidebar plan strip */
.sidebar-plan-strip{display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;border-top:1px solid var(--border);background:var(--surface,#f8fafc);flex-shrink:0}
.sidebar-plan-strip:hover{background:var(--bg-hover,#f1f5f9)}
.sidebar-plan-strip .plan-meta{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.stat-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--color-card);
  padding: 20px;
}

.stat-card strong {
  display: block;
  font-size: var(--text-lg);
  color: var(--legacy-color-243041);
}

.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.theme-manager-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.theme-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.theme-card-active {
  border-color: var(--legacy-color-2563eb);
  box-shadow: 0 10px 25px var(--legacy-rgba-fe3fb408d6);
}

.theme-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.theme-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--text-sm);
  color: var(--muted);
}

.theme-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.theme-card-actions button {
  width: auto;
  min-width: 100px;
}

.theme-card-selected {
  border-color: var(--legacy-color-2563eb);
  box-shadow: 0 6px 20px var(--legacy-rgba-d8e19c4098);
  background: var(--legacy-rgba-8ce00b242d);
}

.theme-card-active {
  border-color: var(--legacy-color-10b981);
  box-shadow: 0 8px 24px var(--legacy-rgba-62ec1e2248);
}

.theme-card-active .badge {
  background: var(--legacy-color-dcfce7);
  color: var(--color-success-text);
}

.wizard-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.wizard-step {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--card);
  display: flex;
  align-items: center;
  gap: 10px;
}

.wizard-step.active {
  border-color: var(--legacy-color-2563eb);
  background: var(--legacy-color-eff6ff);
}

.wizard-step span {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-primary-50);
  color: var(--legacy-color-2563eb);
  font-weight: 700;
}

.wizard-card {
  padding: 24px;
}

.wizard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.wizard-option {
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wizard-option.selected {
  border-color: var(--legacy-color-2563eb);
  box-shadow: 0 10px 24px var(--legacy-rgba-fe3fb408d6);
}

.wizard-option .small {
  display: block;
  margin-top: 8px;
}

.wizard-step.done {
  border-color: var(--legacy-color-10b981);
  background: var(--color-success-pale);
}

.wizard-step.done span {
  background: var(--legacy-color-10b981);
  color: var(--color-card);
}

.wizard-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 4px;
}

.wizard-review-item {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wizard-review-item .small {
  color: var(--muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wizard-success {
  text-align: center;
  padding: 8px 0 4px;
}

.wizard-success-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--legacy-color-10b981);
  color: var(--color-card);
  font-size: var(--text-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.wizard-success h2 {
  margin: 0 0 8px;
}

.wizard-success p {
  color: var(--muted);
  margin: 0 0 20px;
}

.wizard-next-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.wizard-next-step-btn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  width: 100%;
}

.wizard-next-step-btn:hover {
  border-color: var(--legacy-color-2563eb);
  box-shadow: 0 4px 14px var(--legacy-rgba-f29e7e942a);
}

.wizard-next-step-btn strong {
  font-size: var(--text-base);
  color: var(--ink);
}

.wizard-next-step-btn .small {
  color: var(--muted);
  font-size: var(--text-sm);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--legacy-color-e0f2fe);
  color: var(--legacy-color-0369a1);
  font-size: var(--text-sm);
  font-weight: 700;
}

.hidden {
  display: none;
}

.page-editor-wrap {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 4px;
  background: linear-gradient(180deg, var(--legacy-color-fbfcfd) 0%, var(--legacy-color-f5f7fa) 100%);
}

.editor-fullscreen {
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
}

.editor-fullscreen .page-editor-wrap {
  max-width: none;
  width: 100%;
  margin: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  min-height: calc(100vh - 90px);
}

.page-editor-head {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--legacy-color-e3eaf3);
}

.seo-score-chip {
  width: fit-content;
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--legacy-color-d6dbe3);
  background: linear-gradient(180deg, var(--color-card) 0%, var(--legacy-color-f4f6f8) 100%);
  color: var(--legacy-color-243041);
  font-size: var(--text-sm);
  font-weight: 700;
}

.editor-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.editor-tab {
  width: auto;
  min-width: 88px;
  padding: 6px 10px;
}

.editor-tab.active {
  background: linear-gradient(180deg, var(--legacy-color-3f4754) 0%, var(--legacy-color-2f3742) 100%);
  color: var(--color-card);
  border-color: transparent;
}

.page-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.editor-panel {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.editor-panel.active {
  display: grid;
}

.field-block {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--legacy-color-d9dde3);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--color-card) 0%, var(--legacy-color-f7f8fa) 100%);
}

.field-sub-block {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px;
}

.field-sub-block-full {
  grid-column: 1 / -1;
}

.field-block-full {
  grid-column: 1 / -1;
}

.field-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-slate-600);
  letter-spacing: 0.01em;
  text-transform: none;
}

#permalinkText {
  color: var(--legacy-color-4b5563);
  font-weight: 700;
}

.json-editor {
  min-height: 140px;
  font-family: Consolas, "Courier New", monospace;
  line-height: 1.4;
  background: linear-gradient(180deg, var(--legacy-color-fbfbfc) 0%, var(--legacy-color-f2f4f7) 100%);
  color: var(--legacy-color-243041);
  border-color: var(--legacy-color-cfd6df);
}

.page-actions {
  border-top: 1px solid var(--legacy-color-dde3ea);
  margin-top: 2px;
  padding-top: 12px;
}

.seo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.char-progress {
  display: grid;
  gap: 4px;
}

.progress-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--legacy-color-e5e8ee);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width 0.18s ease;
}

.progress-good {
  background: linear-gradient(90deg, var(--color-slate-700), var(--color-slate-500));
}

.progress-warn {
  background: linear-gradient(90deg, var(--color-slate-400), var(--color-slate-300));
}

.progress-over {
  background: linear-gradient(90deg, var(--legacy-color-7c2d12), var(--legacy-color-c2410c));
}

.snippet-preview {
  margin-top: 10px;
  border: 1px solid var(--legacy-color-d9dde3);
  border-radius: 10px;
  padding: 10px;
  background: linear-gradient(180deg, var(--color-card) 0%, var(--legacy-color-f7f8fa) 100%);
}

.snippet-title {
  font-size: var(--text-md);
  color: var(--legacy-color-243041);
  margin-bottom: 4px;
  font-weight: 700;
}

.snippet-url {
  font-size: var(--text-sm);
  color: var(--legacy-color-6b7280);
  margin-bottom: 6px;
}

.snippet-desc {
  font-size: var(--text-sm);
  color: var(--legacy-color-4b5563);
}

.seo-score-wrap {
  border: 1px solid var(--legacy-color-d9dde3);
  border-radius: 10px;
  padding: 8px;
  background: linear-gradient(180deg, var(--color-card) 0%, var(--legacy-color-f7f8fa) 100%);
  margin-bottom: 10px;
  display: grid;
  gap: 6px;
}

.seo-score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.seo-score-value {
  font-weight: 800;
  color: var(--legacy-color-243041);
}

.seo-checklist {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 3px;
  font-size: var(--text-sm);
}

.seo-check-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--legacy-color-dbe3ef);
  background: var(--color-slate-50);
  font-size: var(--text-xs);
  font-weight: 700;
}

.seo-check-badge.pass {
  border-color: var(--color-success-border);
  background: var(--color-success-pale);
  color: var(--color-success-text);
}

.seo-check-badge.fix {
  border-color: var(--color-warning-border);
  background: var(--color-warning-pale);
  color: var(--color-warning-text);
}

.seo-context-signals {
  margin-top: 8px;
  border-top: 1px dashed var(--legacy-color-dbe3ef);
  padding-top: 8px;
  display: grid;
  gap: 6px;
}

.seo-context-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.seo-context-row strong {
  font-size: var(--text-sm);
  color: var(--color-slate-700);
}

.check-pass {
  color: var(--legacy-color-1f6f43);
}

.check-fail {
  color: var(--legacy-color-8a5b14);
}

.pages-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

.pages-topbar-compact h2 {
  font-size: var(--text-lg);
  line-height: 1.1;
  white-space: nowrap;
}

.pages-topbar-compact {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(260px, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.pages-search-topbar {
  width: 100%;
  min-width: 0;
}

.pages-header-shell {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-slate-50);
  padding-bottom: 6px;
}

.pages-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}

.pages-title-stack {
  min-width: 0;
}

.pages-count-pill,
.pages-mini-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--legacy-color-dbe2ea);
  border-radius: 999px;
  font-size: var(--text-xs);
  color: var(--color-slate-600);
  background: var(--color-card);
  white-space: nowrap;
}

.pages-mini-stats {
  display: inline-flex;
  gap: 4px;
  flex-wrap: nowrap;
  margin-left: 4px;
}

.pages-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
  flex-wrap: nowrap;
}

.pages-add-wrap {
  display: inline-flex;
  align-items: center;
}

.pages-add-btn {
  width: auto !important;
  min-width: 0;
  padding: 0 12px;
  height: 36px;
  border-radius: 10px;
  background: var(--legacy-color-2563eb);
  color: var(--color-card);
  border: 1px solid var(--legacy-color-2563eb);
  font-weight: 600;
}

.pages-view-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  border: 1px solid var(--legacy-color-dbe2ea);
  border-radius: 10px;
  background: var(--color-card);
}

.pages-view-switcher .icon-only-btn {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px;
}

.pages-view-switcher .icon-only-btn.active {
  background: var(--legacy-color-2563eb);
  border-color: var(--legacy-color-2563eb);
  color: var(--color-card);
}

.pages-filter-card,
.pages-bulk-card,
.pages-search-card {
  margin-bottom: 0;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 12px;
  background: var(--color-card);
  box-shadow: 0 1px 2px var(--legacy-rgba-a03757fa22);
}

.pages-search-compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--legacy-color-d8dee8);
  border-radius: 8px;
  background: var(--color-card);
  padding: 0 8px;
  height: 30px;
  width: 100%;
}

.pages-filter-chip-select {
  height: 34px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--legacy-color-d8dee8);
  border-radius: 10px;
  background: var(--color-card);
  color: var(--color-slate-900);
  font-size: var(--text-sm);
}

.pages-search-icon {
  width: 18px;
  text-align: center;
  color: var(--color-slate-500);
  font-size: var(--text-xs);
  font-weight: 700;
  border: 0;
  background: transparent;
}

.pages-search-compact input {
  border: 0;
  outline: none;
  width: 100%;
  height: 26px;
  padding: 0;
  font-size: var(--text-xs);
}

.pages-bulk-row,
.pages-search-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.pages-bulk-row select,
.pages-bulk-row input,
.pages-search-row select,
.pages-search-row input {
  width: auto;
  min-width: 0;
}

.pages-bulk-row .small,
.pages-search-row .small {
  margin-left: auto;
  white-space: nowrap;
}

@media (max-width: 960px) {
  .pages-topbar-compact {
    grid-template-columns: 1fr;
  }

  .pages-filter-row-compact {
    grid-template-columns: 1fr 1fr;
  }

  .pages-bulk-row,
  .pages-search-row {
    flex-wrap: wrap;
  }
}

.pages-table-wrap {
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 10px;
  overflow: auto;
  background: var(--color-card);
  margin-top: 4px;
}

.pages-table-wrap .table th,
.pages-table-wrap .table td {
  padding: 7px 8px;
}

.pages-table-wrap .table tbody tr td {
  height: 42px;
}

.row-action-menu {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.row-actions-cell {
  white-space: nowrap;
}

.row-action-menu .icon-only-btn {
  width: 26px;
  min-width: 26px;
  height: 26px;
  padding: 0;
  font-size: var(--text-xs);
  line-height: 1;
}

.row-action-menu .icon-only-btn svg,
.pages-bulk-actions .icon-only-btn svg,
.pages-search-row .icon-only-btn svg,
.pages-pagination .icon-only-btn svg {
  width: 14px;
  height: 14px;
}

/* Delete ghost at rest, red on hover */
.row-action-menu .icon-only-btn.danger {
  background: transparent !important;
  border-color: #E2E8F0 !important;
  color: #64748B !important;
  box-shadow: none !important;
}
.row-action-menu .icon-only-btn.danger:hover {
  background: #FEF2F2 !important;
  border-color: #FECACA !important;
  color: #DC2626 !important;
}

/* Row actions hidden at rest, visible on hover / selection */
.table tbody tr .row-action-menu {
  opacity: 0;
  transition: opacity 150ms ease;
}
.table tbody tr:hover .row-action-menu,
.table tbody tr.selected .row-action-menu {
  opacity: 1;
}

.pages-pagination {
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* ── Menus admin page ─────────────────────────────── */
.menus-filterbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.menus-search {
  flex: 1;
  min-width: 180px;
  max-width: 300px;
}

.menus-tab-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.menus-table-card {
  background: var(--color-card, #fff);
  border: 0.5px solid var(--legacy-color-e5e7eb, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}

.menus-table-card .table {
  margin: 0;
  border: none;
  border-radius: 0;
}

.menus-table-card .table thead tr.menus-thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-slate-500, #64748b);
  padding: 10px 12px;
  background: var(--color-slate-50, #f8fafc);
  border-bottom: 1px solid var(--legacy-color-e5e7eb, #e5e7eb);
}

.menus-table-card .table tbody td {
  padding: 10px 12px;
  vertical-align: middle;
}

.menu-label-text {
  font-weight: 500;
  color: var(--color-ink, #0f172a);
}

.menu-loc-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  text-transform: lowercase;
  background: var(--color-slate-100, #f1f5f9);
  color: var(--color-slate-600, #475569);
}

.menu-loc-badge.loc-header {
  background: #f0fdf4;
  color: #166534;
}

.menu-loc-badge.loc-footer {
  background: #eff6ff;
  color: #1d4ed8;
}

.menu-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 2px;
}

.menu-status-dot.dot-on {
  background: #22c55e;
}

.menu-status-dot.dot-off {
  background: #cbd5e1;
}

.loc-checks {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.loc-check-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--legacy-color-d8dee8, #d0d7de);
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, border-color 0.12s;
  background: var(--color-card, #fff);
  color: var(--color-slate-700, #334155);
  white-space: nowrap;
}

.loc-check-item input[type="checkbox"] {
  width: 13px;
  height: 13px;
  margin: 0;
  cursor: pointer;
  accent-color: #1a6b42;
}

.loc-check-item:has(input:checked) {
  background: #f0fdf4;
  border-color: #86efac;
  color: #166534;
}

.loc-check-item:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.loc-check-item:has(input:checked):hover {
  background: #dcfce7;
}

.pages-bulk-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px solid var(--legacy-color-e5e7eb);
}

.pages-bulk-actions button {
  width: auto;
  min-width: 0;
  height: 26px;
  padding: 0 6px;
  font-size: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pages-bulk-actions .icon-only-btn {
  background: var(--color-slate-50);
  color: var(--color-slate-700);
  border-color: var(--legacy-color-d8dee8);
}

.pages-bulk-actions .danger.icon-only-btn {
  background: var(--color-danger-pale);
  color: var(--legacy-color-b91c1c);
  border-color: var(--color-danger-border);
}

.pages-bulk-actions .icon-only-btn:hover,
.pages-bulk-actions .danger.icon-only-btn:hover {
  filter: brightness(0.98);
}

.pages-search-card .pages-bulk-row {
  gap: 4px;
}

.pages-search-card .pages-bulk-row input,
.pages-search-card .pages-bulk-row select {
  height: 28px;
}

.pages-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.pages-filter-pills,
.pages-active-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pages-filter-chip {
  width: auto !important;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pages-more-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--legacy-color-dbe2ea);
  border-radius: 10px;
  background: var(--color-card);
}

.pages-more-filters input,
.pages-more-filters button {
  height: 32px;
  font-size: var(--text-sm);
}

.pages-more-filters[hidden] {
  display: none !important;
}

.pages-active-chip {
  width: auto !important;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-slate-300);
  border-radius: 999px;
  background: var(--color-card);
  color: var(--color-slate-700);
}

.pages-active-chip.danger {
  border-color: var(--color-danger-border);
  color: var(--legacy-color-b91c1c);
  background: var(--color-danger-pale);
}

.pages-filter-chip svg,
.pages-active-chip svg {
  width: 14px;
  height: 14px;
}

.pages-table-wrap .pages-grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  padding: 8px;
}

.pages-grid-card {
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 10px;
  background: var(--color-card);
  padding: 10px;
  display: grid;
  gap: 6px;
}

.pages-grid-check {
  justify-self: start;
}

.pages-grid-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.pages-tree-view .table {
  width: 100%;
}

@media (max-width: 960px) {
  .pages-more-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1200px) {
  .pages-topbar-compact {
    grid-template-columns: minmax(0, 1fr);
  }

  .pages-topbar-actions {
    justify-self: start;
    flex-wrap: wrap;
  }

  .pages-search-compact {
    min-height: 36px;
  }
}

.pages-bulk-actions .small {
  margin-right: 2px;
}

.pages-topbar-compact button,
.pages-search-card button,
.pages-pagination button {
  width: auto;
  min-width: 0;
}

/* ── Pages 2-row toolbar ── */

.pages-header-shell {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #FFFFFF;
}

.pages-toolbar {
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
}

.pages-title-zone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pages-title-text {
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
  white-space: nowrap;
}

.pages-count-badge {
  background: #F1F5F9;
  color: #64748B;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.pages-toolbar-vsep {
  width: 1px;
  height: 18px;
  background: #E2E8F0;
  flex-shrink: 0;
}

.pages-search {
  flex: 1;
  max-width: 380px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 5px 12px;
  cursor: text;
}

.pages-search:focus-within {
  border-color: #1A6B42;
  box-shadow: 0 0 0 2px rgba(26, 107, 66, 0.12);
}

.pages-search .pages-search-icon {
  width: 14px;
  height: 14px;
  color: #94A3B8;
  flex-shrink: 0;
  border: none;
  background: transparent;
}

.pages-search .pages-search-icon svg {
  width: 14px;
  height: 14px;
}

.pages-search input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 13px;
  color: #0F172A;
  font-family: inherit;
  width: 100%;
  padding: 0;
  height: auto;
}

.pages-toolbar-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.pages-view-switcher {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.pages-view-btn {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 5px !important;
  background: #FFFFFF !important;
  color: #64748B !important;
  cursor: pointer;
}

.pages-view-btn svg {
  width: 14px;
  height: 14px;
}

.pages-view-btn.active {
  background: #1A6B42 !important;
  color: #FFFFFF !important;
  border-color: #1A6B42 !important;
}

.btn-add-page {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 14px !important;
  background: #1A6B42 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap;
  cursor: pointer;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
}

.btn-add-page:hover {
  background: #155534 !important;
}

/* ── Filter bar (Row 2) ── */

.pages-filterbar {
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  padding: 7px 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-height: 44px;
  overflow-x: auto;
}

.pages-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  border: 1px solid transparent !important;
  background: #F1F5F9 !important;
  color: #64748B !important;
  transition: all 150ms;
  flex-shrink: 0;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
}

.pages-status-pill span {
  font-weight: 500;
  opacity: 0.75;
}

.pages-status-pill.active {
  background: #0F172A !important;
  color: #FFFFFF !important;
  border-color: #0F172A !important;
}

.pages-status-pill.active span {
  opacity: 0.8;
}

.pages-status-pill[data-status-filter="published"] {
  background: #F0FDF4 !important;
  color: #166534 !important;
}

.pages-status-pill[data-status-filter="published"].active {
  background: #166534 !important;
  color: #FFFFFF !important;
  border-color: #166534 !important;
}

.pages-filterbar-vsep {
  width: 1px;
  height: 18px;
  background: #E2E8F0;
  flex-shrink: 0;
}

.filter-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  padding-right: 24px !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  background-color: #FFFFFF !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' viewBox='0 0 10 6'%3E%3Cpath stroke='%2394A3B8' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: border-color 150ms, color 150ms, background-color 150ms;
  height: auto !important;
  min-height: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  flex-shrink: 0;
  width: auto !important;
}

.filter-chip:hover {
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
  background-color: #F8FAFC !important;
}

.filter-chip.active {
  background-color: #F0FDF4 !important;
  border-color: #BBF7D0 !important;
  color: #166534 !important;
}

.pages-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  background: #FFFFFF;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  width: auto !important;
  min-width: 0;
  height: auto !important;
  min-height: 0 !important;
  flex-shrink: 0;
}

.pages-active-chip.danger {
  background: #FEF2F2 !important;
  border-color: #FECACA !important;
  color: #DC2626 !important;
}

/* ── Advanced filters (Row 3) ── */

.pages-advanced-filters {
  display: none;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  gap: 10px;
  align-items: flex-end;
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  padding: 10px 20px;
}

.pages-advanced-filters.open {
  display: grid;
}

.adv-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.adv-field label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #64748B;
}

.adv-field input {
  width: 100%;
  border: 1px solid #E2E8F0 !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-size: 13px;
  color: #0F172A;
  font-family: inherit;
  height: 34px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}

.adv-field input:focus {
  border-color: #1A6B42 !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(26, 107, 66, 0.10) !important;
}

.adv-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.adv-apply {
  padding: 6px 12px !important;
  background: #1A6B42 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer;
  height: auto !important;
  min-height: 0 !important;
}

.adv-apply:hover {
  background: #155534 !important;
}

.adv-clear {
  padding: 6px 10px !important;
  font-size: 12px !important;
  height: auto !important;
  min-height: 0 !important;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: capitalize;
  background: var(--legacy-color-eef2f6);
  color: var(--legacy-color-374151);
}

.status-pill.status-published {
  background: var(--legacy-color-e8f6ee);
  color: var(--legacy-color-1f6f43);
}

.status-pill.status-draft {
  background: var(--legacy-color-f3f4f6);
  color: var(--legacy-color-374151);
}

.status-pill.status-scheduled {
  background: var(--legacy-color-fff7ed);
  color: var(--legacy-color-9a3412);
}

.status-pill.status-draft {
  background: var(--color-slate-100);
  color: var(--color-slate-700);
}

.status-pill.status-review,
.status-pill.status-scheduled {
  background: var(--legacy-color-fff7e7);
  color: var(--legacy-color-8a5b14);
}

.status-pill.status-archived {
  background: var(--legacy-color-f7ecef);
  color: var(--legacy-color-7f1220);
}

.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--legacy-color-eff6ff);
  color: var(--legacy-color-1e3a8a);
  font-weight: 600;
}

.enterprise-editor {
  max-width: 100%;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 12px;
  box-shadow: 0 1px 3px var(--legacy-rgba-000dc4704a);
  background: var(--color-card);
}

.health-strip-compact {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  padding: 0;
  background: transparent;
  border: none;
}

.health-toggle-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--color-slate-50) 0%, var(--color-card) 100%);
  color: var(--legacy-color-374151);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.health-toggle-btn:hover {
  border-color: var(--color-slate-300);
  box-shadow: 0 2px 8px var(--legacy-rgba-c28d776ff9);
}

.health-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  font-size: var(--text-xs);
  color: var(--legacy-color-6b7280);
  transition: transform 0.2s ease;
}

.health-toggle-btn.expanded .health-toggle-icon {
  transform: rotate(90deg);
}

.health-overall-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.health-overall-compact span {
  color: var(--legacy-color-6b7280);
  font-size: var(--text-sm);
  font-weight: 500;
}

.health-overall-compact strong {
  color: var(--legacy-color-1d4ed8);
  font-size: var(--text-md);
  font-weight: 700;
}

.editor-tabs-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--legacy-color-e5e7eb);
}

.editor-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  white-space: nowrap;
  flex: 1;
}

.health-toggle-btn-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 36px;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 8px;
  background: var(--color-card);
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.health-toggle-btn-compact:hover {
  border-color: var(--color-slate-300);
  box-shadow: 0 2px 8px var(--legacy-rgba-c28d776ff9);
}

.health-score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--legacy-color-dbeafe) 0%, var(--legacy-color-bfdbfe) 100%);
  color: var(--legacy-color-1d4ed8);
  font-size: var(--text-xs);
  font-weight: 700;
}

.health-score-badge strong {
  font-size: var(--text-sm);
}


.health-strip.health-strip-side {
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 12px;
  padding: 10px 12px;
  grid-template-columns: 1fr;
  gap: 8px;
  background: linear-gradient(180deg, var(--color-card) 0%, var(--color-slate-50) 100%);
}

.health-chip {
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 8px;
  padding: 6px 10px;
  background: var(--color-card);
  font-size: var(--text-xs);
  color: var(--legacy-color-374151);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.health-chip strong {
  color: var(--legacy-color-111827);
  font-weight: 700;
  font-size: var(--text-sm);
}

.health-chip.health-overall {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-radius: 8px;
  border-color: var(--legacy-color-bfdbfe);
  background: var(--legacy-color-eff6ff);
  color: var(--legacy-color-1d4ed8);
  font-size: var(--text-sm);
  font-weight: 600;
  grid-column: 1 / -1;
}

.health-chip.health-overall strong {
  color: var(--legacy-color-1e3a8a);
  font-size: var(--text-md);
}

.health-score-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--legacy-color-374151);
  padding: 6px 10px;
  border: 1px solid var(--legacy-color-eef2f7);
  border-radius: 8px;
  background: var(--color-slate-50);
}

.health-strip.health-strip-side .health-score-row {
  grid-template-columns: 60px minmax(0, 1fr) 40px 48px;
  padding: 6px 8px;
}

.health-score-row span {
  font-weight: 600;
  color: var(--legacy-color-111827);
  min-width: 60px;
}

.health-score-row strong {
  color: var(--legacy-color-111827);
  font-weight: 700;
  font-size: var(--text-sm);
}

.health-score-row small {
  color: var(--legacy-color-6b7280);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.health-progress {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--legacy-color-e5e7eb);
}

.health-progress > div {
  width: 0;
  height: 100%;
  transition: width 0.16s ease;
}

.health-progress > div.good {
  background: linear-gradient(90deg, var(--legacy-color-22c55e) 0%, var(--color-success) 100%);
}

.health-progress > div.warn {
  background: linear-gradient(90deg, var(--legacy-color-f59e0b) 0%, var(--color-warning) 100%);
}

.health-progress > div.bad {
  background: linear-gradient(90deg, var(--legacy-color-ef4444) 0%, var(--color-danger) 100%);
}


.health-overall {
  border-color: var(--legacy-color-bfdbfe);
  background: var(--legacy-color-eff6ff);
}

.editor-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--legacy-color-e5e7eb);
  overflow-x: auto;
  white-space: nowrap;
}

.editor-top-nav .editor-tabs {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.editor-tab {
  width: auto;
  min-width: 84px;
  padding: 6px 10px;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 8px;
  background: var(--color-card);
  color: var(--legacy-color-374151);
}

.editor-tab.active {
  background: var(--legacy-color-2563eb);
  color: var(--color-card);
  border-color: var(--legacy-color-2563eb);
}

.editor-panel {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 10px;
  padding: 12px;
  background: var(--color-card);
}

.editor-panel.active {
  display: grid;
}

.field-block {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 8px;
  background: var(--color-card);
}

.field-label {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--legacy-color-111827);
  letter-spacing: 0;
  text-transform: none;
}

.field-block > span:first-child,
.field-sub-block > span:first-child,
.field-sub-block .small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}

.field-meta {
  display: none;
}

.field-meta-generic {
  display: none;
}

.field-help {
  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;
  min-height: 0 !important;
  border: 1px solid var(--color-slate-300) !important;
  border-radius: 999px !important;
  background: var(--color-card) !important;
  color: var(--color-slate-600) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: help !important;
  box-shadow: none !important;
  vertical-align: middle;
  flex-shrink: 0;
  margin-left: 2px !important;
}

.builder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  grid-column: 1 / -1;
  align-items: start;
  overflow: visible;
}

.builder-left-hidden {
  display: none;
}

.builder-left,
.builder-canvas,
.builder-right {
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 10px;
  background: var(--color-card);
  padding: 10px;
  box-shadow: 0 1px 2px var(--legacy-rgba-a03757fa22);
}

.builder-left {
  max-height: 80vh;
  overflow: visible;
  position: sticky;
  top: 8px;
  padding: 8px;
}

.slp-header {
  height: 44px;
  padding: 10px 12px;
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.slp-title {
  font-size: 11px;
  font-weight: 700;
  color: #64748B;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.slp-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #1A6B42;
  color: #fff;
  border: 0;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  min-height: 24px;
  box-shadow: none;
}

.slp-add svg {
  width: 11px;
  height: 11px;
}

.slp-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px;
}

.builder-rail {
  display: grid;
  gap: 6px;
}

.builder-rail-btn {
  width: 100%;
  min-width: 0;
  height: 34px;
  font-size: var(--text-base);
  font-weight: 700;
  padding: 0;
}

.structure-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.structure-header h4 {
  margin: 0;
}

.structure-list {
  display: grid;
  gap: 8px;
}

.structure-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  margin-bottom: 4px;
  cursor: pointer;
  position: relative;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.structure-item:hover {
  border-color: #CBD5E1;
  background: #F8FAFC;
}

.structure-item.selected {
  border-color: #1A6B42;
  background: #F0FDF4;
  box-shadow: 0 0 0 2px rgba(26, 107, 66, 0.12);
}

.structure-item.dragging {
  opacity: 0.6;
}

.structure-item.drop-before::before,
.structure-item.drop-after::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: #1A6B42;
  border-radius: 999px;
  box-shadow: -6px 0 0 0 #1A6B42;
}

.structure-item.drop-before::before { top: -3px; }
.structure-item.drop-after::after { bottom: -3px; }

.section-drag-handle {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #CBD5E1;
  cursor: grab;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.section-drag-handle svg {
  width: 14px;
  height: 14px;
}

.structure-select {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.section-name {
  font-size: 12px;
  font-weight: 600;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.section-type {
  font-size: 10px;
  color: #94A3B8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  margin-top: 1px;
}

.structure-actions {
  display: inline-flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 150ms ease;
  flex-shrink: 0;
}

.structure-item:hover .structure-actions,
.structure-item.selected .structure-actions {
  opacity: 1;
}

.section-action {
  width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: #64748B;
  box-shadow: none;
}

.section-action svg {
  width: 12px;
  height: 12px;
}

.section-action:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.section-action.danger:hover {
  background: #FEF2F2;
  color: #DC2626;
}

.section-library-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
}

.section-library-backdrop {
  position: absolute;
  inset: 0;
  background: var(--legacy-rgba-f48c31b3bb);
}

.section-library-panel {
  position: relative;
  z-index: 1;
  width: min(760px, 94vw);
  margin: 20px auto;
  max-height: calc(100vh - 40px);
  overflow: auto;
  background: var(--color-card);
  border: 1px solid var(--legacy-color-dbe3ef);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 24px 56px var(--legacy-rgba-9e87b73398);
}

.section-picker-panel {
  width: min(720px, 94vw);
  max-height: 80vh;
  border-radius: 12px;
  padding: 16px;
}

.section-picker-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-picker-header h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #0F172A;
}

.section-picker-header p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #64748B;
}

.section-picker-close {
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: #94A3B8;
}

.section-picker-close:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.section-picker-close svg {
  width: 14px;
  height: 14px;
}

.section-picker-search-wrap {
  margin-bottom: 12px;
}

.section-picker-search {
  width: 100%;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 7px;
  padding: 8px 14px;
  font-size: 13px;
  color: #0F172A;
}

.section-picker-search:focus {
  border-color: #1A6B42;
  box-shadow: 0 0 0 2px rgba(26, 107, 66, 0.10);
}

.section-picker-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.section-picker-tab {
  border: 0;
  border-radius: 999px;
  background: #F1F5F9;
  color: #64748B;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 600;
  box-shadow: none;
}

.section-picker-tab.active {
  background: #1A6B42;
  color: #FFFFFF;
}

.section-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px 0;
  max-height: calc(80vh - 220px);
  overflow: auto;
}

.section-template-card {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
  background: #FFFFFF;
  padding: 0;
  text-align: left;
  box-shadow: none;
}

.section-template-card:hover {
  border-color: #1A6B42;
  box-shadow: 0 0 0 2px rgba(26, 107, 66, 0.12);
}

.section-template-card.selected {
  border-color: #1A6B42;
  background: #F0FDF4;
}

.section-template-preview {
  position: relative;
  height: 120px;
  background: #F8FAFC;
  overflow: hidden;
}

.section-template-preview-thumb {
  position: absolute;
  inset: 14px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(148, 163, 184, 0.22), rgba(148, 163, 184, 0.1)),
    linear-gradient(90deg, rgba(148, 163, 184, 0.12) 35%, transparent 35% 50%, rgba(148, 163, 184, 0.12) 50% 100%);
}

.section-template-preview-thumb.hero {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(26, 107, 66, 0.7)),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
}

.section-template-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #1A6B42;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(26, 107, 66, 0.25);
}

.section-template-info {
  padding: 8px 10px;
  display: grid;
  gap: 2px;
}

.section-template-info strong {
  font-size: 12px;
  font-weight: 600;
  color: #0F172A;
}

.section-template-info span {
  font-size: 10px;
  color: #94A3B8;
}

.section-picker-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid #E2E8F0;
  padding-top: 12px;
  margin-top: 2px;
}

.section-picker-footer .primary {
  background: #1A6B42;
  color: #FFFFFF;
  border-radius: 6px;
}

.section-picker-footer .primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.section-picker-empty {
  grid-column: 1 / -1;
  margin: 32px 0;
  text-align: center;
  color: #64748B;
  font-size: 13px;
}

.section-template-preview-thumb.about {
  background:
    linear-gradient(90deg, rgba(26, 107, 66, 0.22) 0 42%, transparent 42% 48%, rgba(148, 163, 184, 0.18) 48%),
    linear-gradient(180deg, rgba(148, 163, 184, 0.16), rgba(148, 163, 184, 0.06));
}

.section-template-preview-thumb.features,
.section-template-preview-thumb.team,
.section-template-preview-thumb.gallery,
.section-template-preview-thumb.pricing,
.section-template-preview-thumb.testimonials {
  background:
    linear-gradient(90deg, rgba(26, 107, 66, 0.18) 0 30%, transparent 30% 35%, rgba(148, 163, 184, 0.18) 35% 65%, transparent 65% 70%, rgba(148, 163, 184, 0.18) 70%),
    linear-gradient(180deg, rgba(148, 163, 184, 0.08), rgba(148, 163, 184, 0.18));
}

.section-template-preview-thumb.contact,
.section-template-preview-thumb.cta {
  background:
    linear-gradient(180deg, rgba(26, 107, 66, 0.26) 0 26%, transparent 26% 38%, rgba(148, 163, 184, 0.18) 38% 52%, transparent 52% 62%, rgba(148, 163, 184, 0.14) 62% 76%, transparent 76%),
    #FFFFFF;
}

.structure-modal-panel {
  width: min(520px, 94vw);
}

.section-library-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.section-library-item {
  min-height: 72px;
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 2px;
  text-align: left;
}

.layout-marketplace-filters {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.layout-marketplace-toolbar {
  flex-wrap: wrap;
  align-items: center;
}

.layout-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.layout-category-tab {
  min-width: 72px;
  height: 30px;
  font-size: var(--text-sm);
  border-radius: 999px;
}

.layout-category-tab.active {
  background: var(--legacy-color-2563eb);
  color: var(--color-card);
  border-color: var(--legacy-color-2563eb);
}

.layout-marketplace-grid {
  max-height: min(58vh, calc(100vh - 290px));
  overflow: auto;
  padding-right: 2px;
}

.layout-marketplace-item {
  min-height: 86px;
  border-color: var(--legacy-color-e5e7eb);
  padding: 6px;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 10px;
  background: var(--color-card);
  cursor: pointer;
}

.layout-marketplace-item:hover {
  border-color: var(--color-slate-300);
  box-shadow: 0 6px 16px var(--legacy-rgba-22a296d792);
}

.layout-marketplace-item:focus-visible {
  outline: 2px solid var(--legacy-color-2563eb);
  outline-offset: 1px;
}

.layout-marketplace-select {
  width: 100%;
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 2px;
  text-align: left;
}

.layout-marketplace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.small-btn {
  min-width: 60px;
  height: 24px;
  padding: 2px 8px;
  font-size: var(--text-xs);
}

.section-template-thumb {
  width: 100%;
  height: 38px;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--color-slate-50) 0%, var(--color-primary-50) 100%);
}

.widget-search-wrap {
  margin-bottom: 8px;
}

.builder-left summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--legacy-color-111827);
  font-size: var(--text-sm);
}

.widget-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin: 8px 0;
}

.widget-list button {
  justify-content: flex-start;
}

.widget-item-btn {
  display: grid;
  gap: 1px;
  justify-items: start;
  text-align: left;
  padding: 7px 9px;
  border-radius: 8px;
}

.widget-item-title {
  font-size: var(--text-sm);
  color: var(--legacy-color-111827);
  font-weight: 600;
}

.widget-item-desc {
  font-size: var(--text-xs);
  color: var(--legacy-color-6b7280);
}

.canvas-toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  margin-bottom: 6px;
  overflow-x: auto;
}

.builder-action-cluster {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-right: 0;
  border-right: 0;
}

.canvas-view-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.canvas-view-tabs button.active {
  background: var(--primary);
  color: var(--color-card);
  border-color: var(--primary);
}

.canvas-right-controls {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 52%;
  overflow-x: auto;
  padding-left: 0;
  border-left: 0;
}

.icon-only-btn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-md);
}

.icon-only-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

.canvas-breakpoints {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.canvas-breakpoints .icon-only-btn {
  width: 26px;
  min-width: 26px;
  height: 26px;
  font-size: var(--text-xs);
}

.canvas-preview-tools {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.canvas-tool-btn {
  min-width: 72px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
}

.canvas-tool-select {
  height: 30px;
  min-width: 88px;
  border: 1px solid var(--legacy-color-d8dee8);
  border-radius: 999px;
  background: var(--color-card);
  font-size: var(--text-sm);
  padding: 0 10px;
}

.canvas-tool-btn.active {
  background: var(--primary);
  color: var(--color-card);
  border-color: var(--primary);
}

.canvas-breakpoint {
  min-width: 56px;
  height: 30px;
  border-radius: 999px;
  font-size: var(--text-sm);
}

.canvas-breakpoint.active {
  background: var(--primary);
  color: var(--color-card);
  border-color: var(--primary);
}

.builder-settings-toggle {
  min-width: 34px;
}

.builder-canvas {
  background: var(--color-slate-50);
  overflow: auto;
  min-width: 0;
}

.builder-canvas[data-theme='brand'] {
  background: radial-gradient(circle at top left, var(--legacy-color-dbeafe) 0%, transparent 46%), var(--color-slate-50);
}

.builder-canvas[data-theme='dark'] {
  background: linear-gradient(180deg, var(--legacy-color-0b1220) 0%, var(--legacy-color-111827) 100%);
}

.canvas-root {
  min-height: 560px;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 8px;
  background: var(--color-card);
  padding: 12px;
  display: grid;
  gap: 10px;
  margin: 0;
  width: 100%;
  min-width: 0;
  box-shadow: 0 1px 3px var(--legacy-rgba-000dc4704a);
}

.builder-canvas[data-device='desktop'] .canvas-root {
  width: min(100%, 1440px);
  margin: 0 auto;
}

.builder-canvas[data-device='tablet'] .canvas-root {
  width: min(860px, 100%);
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 18px 34px var(--legacy-rgba-e651d46261);
}

.builder-canvas[data-device='mobile'] .canvas-root {
  width: min(420px, 100%);
  margin: 0 auto;
  border-radius: 24px;
  box-shadow: 0 18px 34px var(--legacy-rgba-3d0b8ef9b6);
}

.builder-canvas[data-frame='on'][data-device='tablet'] .canvas-root {
  border: 10px solid var(--legacy-color-1f2937);
  padding: 14px;
}

.builder-canvas[data-frame='on'][data-device='mobile'] .canvas-root {
  border: 10px solid var(--legacy-color-111827);
  padding: 14px;
}

.builder-canvas[data-frame='off'] .canvas-root {
  width: 100% !important;
  border-radius: 8px;
  box-shadow: 0 1px 3px var(--legacy-rgba-000dc4704a);
  border-width: 1px;
}

.builder-canvas[data-theme='dark'] .canvas-root {
  background: var(--color-slate-900);
  border-color: var(--color-slate-700);
}

.builder-canvas[data-theme='dark'] .canvas-item {
  background: var(--legacy-color-111827);
  border-color: var(--color-slate-700);
}

.builder-canvas[data-theme='dark'] .canvas-item > header strong,
.builder-canvas[data-theme='dark'] .canvas-item .small {
  color: var(--color-slate-300);
}

.builder-canvas[data-theme='dark'] .section-mock {
  border-color: var(--color-slate-700);
  background: var(--color-slate-800);
}

.builder-canvas[data-theme='dark'] .section-mock h4,
.builder-canvas[data-theme='dark'] .section-mock p,
.builder-canvas[data-theme='dark'] .hero-stat small,
.builder-canvas[data-theme='dark'] .service-card-mock span,
.builder-canvas[data-theme='dark'] .faq-row-mock p {
  color: var(--color-slate-300);
}

.builder-canvas[data-theme='dark'] .hero-stat,
.builder-canvas[data-theme='dark'] .service-card-mock,
.builder-canvas[data-theme='dark'] .faq-row-mock,
.builder-canvas[data-theme='dark'] .testimonial-card-mock {
  background: var(--color-slate-900);
  border-color: var(--color-slate-700);
}

.preview-motion {
  animation: previewFloatIn 260ms ease;
}

.builder-canvas[data-fidelity='content'] .section-mock {
  background: var(--color-card);
  border-color: var(--legacy-color-d6dbe5);
  box-shadow: none;
}

.builder-canvas[data-fidelity='content'] .section-mock-overlay,
.builder-canvas[data-fidelity='content'] .hero-mock-stats,
.builder-canvas[data-fidelity='content'] .canvas-preview-actions .canvas-chip.secondary {
  opacity: 0.75;
}

.wireframe-mock {
  background: repeating-linear-gradient(-45deg, var(--color-slate-50), var(--color-slate-50) 10px, var(--color-slate-100) 10px, var(--color-slate-100) 20px);
  border-style: dashed;
  border-color: var(--color-slate-400);
  min-height: 140px;
  align-content: start;
}

.wireframe-title {
  display: inline-flex;
  width: fit-content;
  padding: 2px 8px;
  border: 1px solid var(--color-slate-400);
  border-radius: 999px;
  color: var(--color-slate-700);
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--color-card);
}

.wireframe-line {
  height: 10px;
  border-radius: 999px;
  background: var(--color-slate-300);
  width: 78%;
}

.wireframe-line.long {
  width: 92%;
}

.wireframe-line.short {
  width: 56%;
}

@keyframes previewFloatIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.canvas-item {
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 8px;
  padding: 8px;
  background: var(--color-card);
  min-width: 0;
}

.canvas-item.active {
  border-color: var(--legacy-color-93c5fd);
  box-shadow: 0 0 0 2px var(--legacy-rgba-9c46d2f9f9);
}

.canvas-item.dragging {
  opacity: 0.55;
}

.canvas-item.drop-target {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--legacy-rgba-fe3fb408d6);
}

.canvas-item header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.canvas-inline-editor {
  border-top: 1px dashed var(--legacy-color-e5e7eb);
  margin-top: 8px;
  padding-top: 8px;
  display: grid;
  gap: 8px;
}

.canvas-preview-card {
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 8px;
  background: var(--color-slate-50);
  padding: 10px;
  display: grid;
  gap: 6px;
}

.canvas-preview-card h4 {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-slate-900);
}

.canvas-preview-card p {
  margin: 0;
  color: var(--color-slate-600);
  font-size: var(--text-sm);
}

.canvas-preview-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.canvas-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--legacy-color-dbeafe);
  color: var(--legacy-color-1e3a8a);
  text-decoration: none;
}

.canvas-chip.secondary {
  background: var(--legacy-color-ecfeff);
  color: var(--legacy-color-0e7490);
}

.canvas-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.canvas-mini-card {
  border: 1px solid var(--color-slate-300);
  border-radius: 8px;
  background: var(--color-card);
  padding: 8px;
  display: grid;
  gap: 4px;
}

.canvas-mini-card strong {
  font-size: var(--text-sm);
  color: var(--color-slate-900);
}

.canvas-mini-card span {
  font-size: var(--text-xs);
  color: var(--color-slate-700);
}

.canvas-preview-faq {
  border: 1px dashed var(--color-slate-300);
  border-radius: 8px;
  background: var(--color-card);
  padding: 8px;
  display: grid;
  gap: 4px;
}

.section-mock {
  border: 1px solid var(--legacy-color-dbe3ef);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--color-card) 0%, var(--color-slate-50) 100%);
  padding: 12px;
  display: grid;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

.section-mock-head {
  display: grid;
  gap: 4px;
}

.section-mock-head h4,
.section-mock h4 {
  margin: 0;
  font-size: var(--text-md);
}

.section-mock-head p,
.section-mock p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-slate-600);
}

.hero-mock {
  grid-template-columns: 1.1fr 0.9fr;
  align-items: stretch;
  background: radial-gradient(circle at top right, var(--legacy-color-dbeafe) 0%, transparent 42%), linear-gradient(180deg, var(--color-card) 0%, var(--color-slate-50) 100%);
}

.hero-mock-copy {
  display: grid;
  gap: 8px;
}

.hero-mock-art {
  border: 1px solid var(--legacy-color-dbe3ef);
  border-radius: 12px;
  background: var(--color-slate-200);
  overflow: hidden;
  min-height: 170px;
}

.hero-mock-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-art-placeholder {
  width: 100%;
  height: 100%;
  min-height: 140px;
  display: grid;
  place-items: center;
  color: var(--color-slate-500);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hero-mock-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
}

.hero-stat {
  border: 1px solid var(--color-slate-300);
  border-radius: 10px;
  background: var(--color-card);
  padding: 6px;
  display: grid;
}

.hero-stat strong {
  font-size: var(--text-sm);
  color: var(--color-slate-900);
}

.hero-stat small {
  font-size: var(--text-xs);
  color: var(--color-slate-500);
}

.about-mock {
  grid-template-columns: 0.9fr 1.1fr;
  align-items: stretch;
}

.about-mock-media {
  border: 1px solid var(--legacy-color-dbe3ef);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-slate-200);
  min-height: 160px;
}

.about-mock-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-mock-copy {
  display: grid;
  gap: 8px;
}

.about-mock-copy ul {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 4px;
  color: var(--color-slate-700);
  font-size: var(--text-sm);
}

.services-mock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.service-card-mock {
  border: 1px solid var(--color-slate-300);
  border-radius: 10px;
  background: var(--color-card);
  padding: 8px;
  display: grid;
  gap: 4px;
}

.service-card-mock strong {
  font-size: var(--text-sm);
  color: var(--color-slate-900);
}

.service-card-mock span {
  font-size: var(--text-xs);
  color: var(--color-slate-500);
}

.cta-mock {
  background-size: cover;
  background-position: center;
  min-height: 150px;
}

.section-mock-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, var(--legacy-rgba-307b5316a4), var(--legacy-rgba-2ef1cf420b));
}

.section-mock-content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
}

.section-mock-content h4,
.section-mock-content p {
  color: var(--color-slate-50);
}

.testimonials-grid-mock {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.testimonial-card-mock {
  border: 1px solid var(--color-slate-300);
  border-radius: 10px;
  background: var(--color-card);
  padding: 8px;
  display: grid;
  gap: 4px;
}

.testimonial-card-mock strong {
  font-size: var(--text-sm);
}

.testimonial-card-mock small {
  color: var(--color-slate-500);
}

.testimonial-card-mock p {
  color: var(--color-slate-700);
}

.faq-mock {
  display: grid;
  gap: 8px;
}

.faq-row-mock {
  border: 1px dashed var(--color-slate-300);
  border-radius: 10px;
  background: var(--color-card);
  padding: 8px;
  display: grid;
  gap: 4px;
}

.faq-row-mock strong {
  font-size: var(--text-sm);
  color: var(--color-slate-900);
}

.faq-row-mock p {
  color: var(--color-slate-600);
}

.section-mock.preview-mobile,
.section-mock.preview-tablet {
  grid-template-columns: 1fr;
}

.section-mock.preview-mobile .hero-mock-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.builder-right {
  position: fixed;
  top: 92px;
  right: 16px;
  width: min(460px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 110px);
  overflow: auto;
  z-index: 65;
  box-shadow: 0 24px 50px var(--legacy-rgba-3d0b8ef9b6);
  transform: translateX(calc(100% + 18px));
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.22s ease;
  background: #FFFFFF;
}

.builder-right.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 110px);
}

.property-panel {
  background: #FFFFFF;
  border-left: 1px solid #E2E8F0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.property-panel-empty {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  color: #94A3B8;
}

.property-panel-empty-icon {
  font-size: 32px;
  color: #CBD5E1;
  line-height: 1;
}

.property-panel-empty p {
  margin: 0;
  font-size: 13px;
  color: #94A3B8;
}

.pp-header {
  padding: 10px 14px;
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  flex-shrink: 0;
}

.pp-type-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #1A6B42;
  background: #F0FDF4;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.pp-section-name {
  font-size: 13px;
  font-weight: 600;
  color: #0F172A;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp-close {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  padding: 0;
  color: #94A3B8;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.pp-close svg {
  width: 12px;
  height: 12px;
}

.pp-close:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.pp-tabs {
  display: flex;
  border-bottom: 1px solid #E2E8F0;
  background: #FFFFFF;
  flex-shrink: 0;
}

.pp-tab {
  flex: 1;
  padding: 8px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: color 150ms, border-color 150ms;
}

.pp-tab.active {
  color: #1A6B42;
  border-bottom-color: #1A6B42;
  background: transparent;
}

.pp-tab:hover:not(.active) {
  color: #0F172A;
}

.pp-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  min-height: 0;
}

.pp-panel {
  display: none;
}

.pp-panel.active {
  display: grid;
  gap: 12px;
}

.pp-field {
  display: grid;
  gap: 5px;
  margin-bottom: 14px;
}

.pp-label,
.pp-field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #64748B;
  margin-bottom: 5px;
}

.pp-counter {
  font-size: 10px;
  color: #94A3B8;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.pp-field input,
.pp-field select,
.pp-field textarea {
  width: 100%;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  color: #0F172A;
  font-family: inherit;
  outline: none;
  background: #FFFFFF;
  min-width: 0;
}

.pp-field input,
.pp-field select {
  height: 36px;
}

.pp-field textarea {
  height: auto;
  min-height: 72px;
  resize: vertical;
}

.pp-field input:focus,
.pp-field select:focus,
.pp-field textarea:focus {
  border-color: #1A6B42;
  box-shadow: 0 0 0 2px rgba(26, 107, 66, 0.10);
}

.repeatable-field {
  display: grid;
  gap: 8px;
}

.repeatable-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.repeatable-head h5 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748B;
}

.repeatable-add {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  width: 100%;
  padding: 7px;
  border: 1.5px dashed #CBD5E1;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
  cursor: pointer;
  margin-top: 4px;
  background: transparent;
}

.repeatable-add svg {
  width: 12px;
  height: 12px;
}

.repeatable-add:hover {
  border-color: #1A6B42;
  color: #1A6B42;
  background: rgba(26, 107, 66, 0.04);
}

.repeatable-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  background: #FAFAFA;
  margin-bottom: 4px;
  cursor: pointer;
}

.repeatable-item:hover {
  border-color: #CBD5E1;
  background: #F8FAFC;
}

.repeatable-item-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.repeatable-item-toggle,
.repeatable-action {
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #94A3B8;
  box-shadow: none;
}

.repeatable-item-toggle svg,
.repeatable-action svg {
  width: 12px;
  height: 12px;
}

.repeatable-item-name {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: none;
}

.repeatable-item-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.repeatable-action:hover {
  background: #E2E8F0;
}

.repeatable-action.danger:hover {
  background: #FEF2F2;
  color: #DC2626;
}

.repeater-grid {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.repeatable-sub-field {
  margin-bottom: 0;
}

.pp-footer {
  padding: 10px 14px;
  border-top: 1px solid #E2E8F0;
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.pp-discard {
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 12px;
  color: #64748B;
  background: #FFFFFF;
  box-shadow: none;
}

.pp-discard:hover {
  background: #F1F5F9;
}

.pp-save {
  background: #1A6B42;
  color: #FFFFFF;
  border-radius: 6px;
  padding: 7px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  flex: 1;
  box-shadow: none;
}

.pp-save:hover {
  background: #155534;
}

#widgetInspectorRoot {
  display: grid;
  gap: 10px;
}

.inspector-modes {
  display: inline-flex;
  gap: 8px;
  margin-bottom: 4px;
}

.inspector-mode-btn.active {
  background: var(--primary);
  color: var(--color-card);
  border-color: var(--primary);
}

.inspector-mode-panel {
  display: none;
  gap: 10px;
}

.inspector-mode-panel.active {
  display: grid;
}

.schema-hint-list {
  margin: 0 0 10px;
  padding-left: 18px;
  color: var(--color-slate-600);
  display: grid;
  gap: 2px;
}

.schema-group {
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 10px;
  padding: 10px;
  background: var(--color-slate-50);
}

.schema-group h4 {
  margin: 0 0 8px;
  font-size: var(--text-sm);
  text-transform: capitalize;
  color: var(--color-slate-700);
}

.schema-grid {
  display: grid;
  gap: 8px;
}

.image-field-block {
  border: 1px solid var(--legacy-color-dbe3ef);
  border-radius: 10px;
  background: var(--color-card);
  padding: 8px;
}

.image-field-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
}

.image-preview-wrap {
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 8px;
  background: var(--color-slate-50);
  padding: 8px;
  margin-top: 6px;
}

.image-preview-wrap img {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  border-radius: 6px;
}

.image-meta-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.full-content-editor {
  border: 1px solid var(--legacy-color-dbe3ef);
  border-radius: 10px;
  background: var(--color-card);
  padding: 8px;
  margin-bottom: 8px;
  display: grid;
  gap: 8px;
}

.full-content-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.page-json-editor {
  min-height: 50vh;
}

.builder-canvas.code-mode .canvas-root {
  min-height: 320px;
  max-height: 36vh;
  overflow: auto;
}

.media-picker-panel {
  width: min(920px, 96vw);
}

.media-picker-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  max-height: min(64vh, 620px);
  overflow: auto;
}

.media-picker-item {
  text-align: left;
  justify-content: start;
  display: grid;
  gap: 6px;
}

.media-picker-thumb {
  border: 1px solid var(--legacy-color-dbe3ef);
  border-radius: 8px;
  background: var(--color-slate-50);
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.media-picker-thumb img {
  display: block;
  width: 100%;
  max-height: 150px;
  object-fit: cover;
}
.media-upload-form {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(140px, 0.7fr) minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.media-dropzone {
  margin-top: 10px;
  border: 1px dashed var(--color-slate-400);
  border-radius: 10px;
  padding: 10px;
  background: var(--color-slate-50);
  display: grid;
  gap: 4px;
}

.media-dropzone.drag-over {
  border-color: var(--legacy-color-2563eb);
  background: var(--legacy-color-eff6ff);
}

.media-upload-progress-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--legacy-color-dbe3ef);
  overflow: hidden;
}

.media-upload-progress-track span {
  display: block;
  height: 100%;
  background: var(--legacy-color-2563eb);
  transition: width 0.15s ease;
}

.media-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 180px auto;
  gap: 8px;
  align-items: center;
}
.media-table-thumb {
  width: 92px;
  height: 60px;
  border: 1px solid var(--legacy-color-dbe3ef);
  border-radius: 8px;
  background: var(--color-slate-50);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.media-table-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-alt-input {
  min-width: 160px;
}

.repeater-field {
  border: 1px solid var(--legacy-color-dbe3ef);
  border-radius: 10px;
  background: var(--color-card);
  padding: 8px;
}

.repeater-item {
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 8px;
  background: var(--color-slate-50);
  padding: 8px;
  margin-bottom: 8px;
}

.repeater-item:last-child {
  margin-bottom: 0;
}

.repeater-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.repeater-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.repeater-sub-field {
  margin: 0;
}

.field-checkbox-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-checkbox-inline input[type='checkbox'] {
  margin: 0;
}

.input-error {
  border-color: var(--legacy-color-ef4444) !important;
  box-shadow: 0 0 0 1px var(--legacy-rgba-0e2a2ee9de);
}

.faq-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  margin-bottom: 8px;
}

.revision-item {
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 8px;
  background: var(--color-card);
  padding: 8px;
  margin-bottom: 6px;
  font-size: var(--text-sm);
}

.ops-admin-bar {
  height: 100%;
  position: static;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border-bottom: none;
  overflow: visible;
  flex: 1;
  min-width: 0;
}

.ops-admin-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--legacy-color-111827);
}

.ops-admin-actions-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.ops-admin-actions-wrap::before,
.ops-admin-actions-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  pointer-events: none;
  z-index: 1;
}

.ops-admin-actions-wrap::before {
  left: 26px;
  background: linear-gradient(to right, var(--color-card), var(--legacy-rgba-254f75671f));
}

.ops-admin-actions-wrap::after {
  right: 26px;
  background: linear-gradient(to left, var(--color-card), var(--legacy-rgba-254f75671f));
}

.ops-scroll-btn {
  width: 26px;
  min-width: 26px;
  height: 26px;
  padding: 0;
  line-height: 1;
  font-size: var(--text-sm);
  font-weight: 700;
  border-radius: 999px;
}

.ops-scroll-btn:disabled {
  opacity: 0.35;
}

.ops-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-success);
}

.ops-admin-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: visible;
  flex: 1;
  min-width: 0;
  flex-wrap: nowrap;
}

.ops-admin-actions::-webkit-scrollbar {
  height: 6px;
}

.ops-admin-actions::-webkit-scrollbar-thumb {
  background: var(--color-slate-300);
  border-radius: 999px;
}

.ops-admin-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 96px;
  padding: 5px 7px;
  font-size: var(--text-xs);
  white-space: nowrap;
}

.ops-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 18px;
  border-radius: 999px;
  background: var(--color-slate-200);
  color: var(--color-slate-700);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0 5px;
}

.ops-btn-label {
  display: inline-block;
}

.ops-dropdown {
  position: relative;
  display: inline-flex;
}

.ops-dropdown-toggle {
  width: auto;
  min-width: 112px;
  padding: 6px 10px;
}

.ops-dropdown-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  min-width: 210px;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 10px;
  background: var(--color-card);
  box-shadow: 0 10px 26px var(--legacy-rgba-e0b1d23205);
  padding: 6px;
  display: grid;
  gap: 4px;
  z-index: 70;
}

.ops-dropdown-menu[hidden] {
  display: none;
}

.ops-dropdown-menu button {
  width: 100%;
  text-align: left;
  background: var(--color-card);
  color: var(--color-slate-900);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 9px;
  font-size: var(--text-sm);
}

.ops-dropdown-menu button:hover {
  background: var(--color-slate-50);
  border-color: var(--color-slate-200);
}

.ops-disabled-action,
.ops-admin-actions button:disabled,
.ops-main button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

#opsQuickStatus {
  min-width: 124px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ops-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.ops-score-card {
  display: grid;
  gap: 2px;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 10px;
  padding: 10px;
  min-width: 190px;
  background: var(--color-card);
}

.ops-score-card strong {
  font-size: var(--text-2xl);
  color: var(--legacy-color-111827);
}

.ops-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px;
}

.ops-menu {
  display: grid;
  gap: 6px;
  align-content: start;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 10px;
  background: var(--color-card);
  padding: 8px;
  height: fit-content;
  position: sticky;
  top: 60px;
}

.ops-menu-btn {
  width: 100%;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--color-card);
  color: var(--legacy-color-374151);
  text-align: left;
  font-size: var(--text-sm);
}

.ops-menu-btn.active {
  background: var(--color-slate-100);
  border-color: var(--color-slate-300);
  color: var(--color-slate-900);
  font-weight: 700;
}

.ops-main {
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 10px;
  background: var(--color-card);
  padding: 12px;
}

.ops-form-grid {
  display: grid;
  gap: 12px;
}

.ops-panel {
  display: none;
  gap: 10px;
}

.ops-panel.active {
  display: grid;
  background: transparent;
  color: inherit;
}

.ops-panel h3 {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--legacy-color-111827);
  position: sticky;
  top: 42px;
  z-index: 2;
  background: var(--color-card);
  padding: 6px 0;
  border-bottom: 1px solid var(--legacy-color-eef2f7);
}

.ops-main button:not(.secondary) {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--color-slate-50);
}

.ops-main button[data-busy='true'] {
  opacity: 0.72;
  cursor: progress;
}

.ops-grid-2,
.ops-grid-3,
.ops-grid-4,
.ops-toggle-grid,
.ops-metrics,
.ops-recommendations {
  display: grid;
  gap: 10px;
}

.ops-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ops-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ops-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ops-toggle-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 10px;
  padding: 10px;
  background: var(--color-slate-50);
}

.ops-toggle-grid label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-sm);
  color: var(--legacy-color-374151);
}

.ops-toggle-grid input[type='checkbox'] {
  width: 15px;
  height: 15px;
  padding: 0;
}

.ops-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ops-metric {
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 10px;
  background: var(--color-card);
  padding: 10px;
  display: grid;
  gap: 4px;
}

.ops-metric span {
  font-size: var(--text-sm);
  color: var(--legacy-color-6b7280);
}

.ops-metric strong {
  font-size: var(--text-lg);
  color: var(--legacy-color-111827);
}

.ops-health-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ops-health-list > div {
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 6px;
}

.ops-chip {
  display: inline-flex;
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  text-transform: capitalize;
}

.ops-chip.ok {
  background: var(--legacy-color-eaf8ef);
  color: var(--color-success-text);
}

.ops-chip.warn {
  background: var(--legacy-color-fff7e6);
  color: var(--color-warning-text);
}

.ops-recommendations {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ops-recommendations > div {
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 6px;
  background: var(--color-card);
}

.ops-recommendations > div span {
  font-weight: 600;
  color: var(--legacy-color-111827);
}

.ops-recommendations > div small {
  color: var(--legacy-color-6b7280);
}

.ops-recommendations > div button {
  width: fit-content;
}

.ops-restore-list {
  display: grid;
  gap: 8px;
}

.ops-restore-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 8px;
  padding: 8px 10px;
  gap: 8px;
}

.ops-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--legacy-color-e5e7eb);
  padding-top: 10px;
}

/* -- Redirects Module -------------------------------------------------------- */
.redir-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.redir-header-left h2 {
  margin: 0 0 2px;
}

.redir-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.redir-header-actions button {
  width: auto;
  min-width: 100px;
  padding: 7px 12px;
  font-size: var(--text-sm);
}

.redir-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.redir-stat {
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--color-card);
  display: grid;
  gap: 3px;
}

.redir-stat span {
  font-size: var(--text-sm);
  color: var(--legacy-color-6b7280);
}

.redir-stat strong {
  font-size: var(--text-lg);
  color: var(--legacy-color-111827);
  font-weight: 700;
}

.redir-stat.redir-stat-warn strong {
  color: var(--color-warning);
}

.redir-stat.redir-stat-err strong {
  color: var(--color-danger);
}

.redir-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--legacy-color-e5e7eb);
  padding-bottom: 0;
}

.redir-tab-btn {
  width: auto;
  min-width: 100px;
  padding: 7px 14px;
  background: transparent;
  color: var(--legacy-color-6b7280);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  margin-bottom: -1px;
}

.redir-tab-btn.active {
  color: var(--legacy-color-2563eb);
  border-bottom-color: var(--legacy-color-2563eb);
  font-weight: 700;
}

.redir-tab-btn:hover:not(.active) {
  color: var(--legacy-color-374151);
  background: var(--color-slate-50);
}

.redir-panel {
  display: none;
}

.redir-panel.active {
  display: block;
}

.redir-filter-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.redir-filter-bar input,
.redir-filter-bar select {
  width: auto;
  min-width: 140px;
  height: 32px;
  font-size: var(--text-sm);
  padding: 0 8px;
}

.redir-filter-bar button {
  width: auto;
  height: 32px;
  padding: 0 12px;
  font-size: var(--text-sm);
}

.redir-bulk-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding: 6px 10px;
  background: var(--color-slate-100);
  border-radius: 8px;
  border: 1px solid var(--color-slate-200);
}

.redir-bulk-bar button {
  width: auto;
  padding: 5px 10px;
  font-size: var(--text-sm);
}

.redir-table-wrap {
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 10px;
  overflow: auto;
  background: var(--color-card);
  margin-bottom: 10px;
}

.redir-path-cell {
  font-family: 'Courier New', monospace;
  font-size: var(--text-sm);
  color: var(--legacy-color-374151);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.redir-arrow {
  color: var(--legacy-color-9ca3af);
  font-size: var(--text-base);
  padding: 0 4px;
}

.redir-code-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
}

.redir-code-pill.code-301 {
  background: var(--legacy-color-eff6ff);
  color: var(--legacy-color-1d4ed8);
}

.redir-code-pill.code-302 {
  background: var(--color-success-pale);
  color: var(--legacy-color-15803d);
}

.redir-hits-cell {
  font-size: var(--text-sm);
  color: var(--legacy-color-6b7280);
  white-space: nowrap;
}

.redir-hits-cell strong {
  color: var(--legacy-color-111827);
}

.redir-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.redir-pagination button {
  width: auto;
  padding: 5px 12px;
  font-size: var(--text-sm);
}

.redir-chain-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--color-warning-border);
  border-radius: 8px;
  background: var(--color-warning-pale);
  margin-bottom: 6px;
  font-size: var(--text-sm);
}

.redir-chain-node {
  font-family: 'Courier New', monospace;
  font-size: var(--text-xs);
  color: var(--legacy-color-374151);
  background: var(--color-slate-100);
  border-radius: 6px;
  padding: 4px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.redir-chain-arrow {
  color: var(--color-warning);
  font-size: var(--text-md);
  text-align: center;
}

.redir-chain-fix-btn {
  width: auto;
  padding: 4px 10px;
  font-size: var(--text-xs);
}

.redir-modal-grid {
  display: grid;
  gap: 10px;
}

.redir-modal-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.redir-modal-field {
  display: grid;
  gap: 4px;
}

.redir-modal-field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--legacy-color-374151);
}

.redir-modal-field input,
.redir-modal-field select,
.redir-modal-field textarea {
  font-size: var(--text-sm);
}

.redir-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 10px;
  border-top: 1px solid var(--legacy-color-e5e7eb);
}

.redir-modal-actions button {
  width: auto;
  min-width: 100px;
}

.redir-import-area {
  display: grid;
  gap: 10px;
}

.redir-import-area textarea {
  font-family: 'Courier New', monospace;
  font-size: var(--text-sm);
  min-height: 120px;
}

.redir-404-convert-btn {
  width: auto;
  padding: 4px 10px;
  font-size: var(--text-xs);
}

.redir-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}

.redir-empty strong {
  display: block;
  font-size: var(--text-md);
  color: var(--legacy-color-374151);
  margin-bottom: 6px;
}

@media (max-width: 960px) {
  .redir-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .redir-header {
    flex-direction: column;
  }

  .redir-chain-row {
    grid-template-columns: 1fr;
  }

  .redir-modal-grid-2 {
    grid-template-columns: 1fr;
  }
}

.gs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.gs-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  position: static;
  max-height: none;
  overflow: visible;
}

.gs-tab-btn {
  width: auto;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 8px;
  padding: 7px 10px;
  background: var(--color-card);
  color: var(--legacy-color-374151);
  text-align: left;
  font-size: var(--text-sm);
}

.gs-tab-btn.active {
  background: var(--color-slate-100);
  border-color: var(--color-slate-300);
  color: var(--color-slate-900);
  font-weight: 700;
}

.gs-main {
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 10px;
  background: var(--color-card);
  padding: 12px;
}

.gs-main .field-block {
  border: none;
  background: transparent;
  padding: 4px 0;
  border-radius: 0;
}

.gs-main .field-label {
  color: var(--legacy-color-111827);
}

.gs-main input:focus,
.gs-main select:focus,
.gs-main textarea:focus {
  border-color: var(--color-slate-400);
  box-shadow: 0 0 0 3px var(--legacy-rgba-23d204d6ff);
}

.gs-form-grid {
  display: grid;
  gap: 8px;
}

.gs-panel {
  display: none;
  gap: 12px;
}

.gs-panel.active {
  display: grid;
}

.gs-section {
  display: grid;
  gap: 6px;
}

.gs-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.gs-readonly {
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--color-slate-50);
  color: var(--color-slate-700);
}

.gs-checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.gs-checkbox input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.gs-checkbox span {
  font-size: var(--text-sm);
  color: var(--legacy-color-111827);
  font-weight: 600;
}

.gs-actions {
  border-top: 1px solid var(--legacy-color-e5e7eb);
  padding-top: 10px;
  display: grid;
  gap: 8px;
}

.gs-actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gs-actions-row button {
  width: auto;
  min-width: 120px;
}

.gs-actions-row button:not(.secondary) {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: var(--color-slate-50);
}

.gs-actions-row button:not(.secondary):hover {
  background: var(--legacy-color-1d4ed8);
  border-color: var(--legacy-color-1d4ed8);
}

.gs-actions-row .secondary {
  background: var(--color-card);
  color: var(--color-slate-900);
  border: 1px solid var(--color-slate-300);
}

@media (max-width: 960px) {
  .login-wrap {
    grid-template-columns: 1fr;
    margin: 24px;
  }

  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    top: auto;
    z-index: 1;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .list-header {
    flex-direction: column;
    align-items: stretch;
  }

  .topbar {
    height: 54px;
    flex-direction: row;
    align-items: center;
    padding: 0 10px;
    gap: 6px;
  }

  .top-actions {
    flex-wrap: nowrap;
    gap: 6px;
    margin-left: auto;
  }


  .notify-icon-btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
  }

  .workspace {
    padding: 16px;
  }

  .page-form-grid {
    grid-template-columns: 1fr;
  }
  .media-upload-form {
    grid-template-columns: 1fr;
  }
  .media-filters {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .editor-panel {
    grid-template-columns: 1fr;
  }

  .seo-grid {
    grid-template-columns: 1fr;
  }

  .pages-filter-grid {
    grid-template-columns: 1fr;
  }

  .pages-filter-row-compact {
    grid-template-columns: 1fr;
  }

  .pages-filter-grid-compact {
    grid-template-columns: 1fr;
  }

  .health-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 100%;
    margin-left: 0;
  }

  .editor-top-nav {
    grid-template-columns: 1fr;
  }

  .health-strip.health-strip-side {
    grid-template-columns: 1fr;
  }

  .image-meta-grid {
    grid-template-columns: 1fr;
  }

  .builder-layout {
    grid-template-columns: 1fr;
  }

  .builder-action-cluster {
    border-right: 0;
    padding-right: 0;
  }

  .canvas-right-controls {
    max-width: 100%;
    border-left: 0;
    padding-left: 0;
  }

  .builder-right.open {
    display: grid;
    left: 10px;
    right: 10px;
    width: auto;
    top: 84px;
    z-index: 60;
    max-height: calc(100vh - 100px);
    overflow: auto;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  .image-meta-grid {
    grid-template-columns: 1fr;
  }

  .faq-row {
    grid-template-columns: 1fr;
  }

  .ops-admin-bar {
    height: 100%;
    flex-wrap: nowrap;
    padding: 0;
  }

  .ops-admin-actions-wrap {
    grid-template-columns: 22px minmax(0, 1fr) 22px;
    gap: 3px;
  }

  .ops-admin-actions button {
    min-width: 90px;
    font-size: var(--text-xs);
    padding: 4px 6px;
  }


/* Premium editor refinement */
.topbar {
  height: 52px;
}

.brand-live-badge {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid var(--legacy-color-86efac);
  border-radius: 999px;
  background: var(--color-success-pale);
  color: var(--color-success-text);
  font-size: var(--text-xs);
  font-weight: 600;
}

.blog-manager {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-height: calc(100vh - 150px);
}

.blog-manager.editor-open {
  grid-template-columns: minmax(520px, 1fr) minmax(400px, 520px);
}

.blog-manager-main {
  min-width: 0;
}

.blog-manager-head,
.blog-head-actions,
.blog-filters,
.blog-bulk-bar,
.blog-editor-head,
.blog-editor-footer,
.blog-sections-head {
  display: flex;
  align-items: center;
}

.blog-manager-head {
  justify-content: space-between;
  gap: 16px;
}

.blog-manager-head h2,
.blog-manager-head p,
.blog-editor-head h3,
.blog-editor-head p,
.blog-sections-head h4,
.blog-sections-head p {
  margin: 0;
}

.blog-manager-head p {
  color: var(--muted);
  margin-top: 3px;
}

.blog-head-actions,
.blog-filters,
.blog-bulk-bar {
  gap: 8px;
}

.blog-head-actions button,
.blog-bulk-bar button,
.blog-import-actions button,
.blog-slug-control button,
.blog-sections-head button {
  width: auto;
}

.blog-head-actions > button,
.blog-sections-head > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.blog-head-actions svg,
.blog-bulk-bar svg,
.blog-sections-head svg {
  width: 16px;
  height: 16px;
}

.blog-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 12px;
}

.blog-stats > div {
  min-height: 78px;
  padding: 13px;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 8px;
  background: var(--color-slate-50);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.blog-stats strong {
  color: var(--legacy-color-175c93);
  font-size: var(--text-2xl);
  line-height: 1;
}

.blog-stats span {
  margin-top: 8px;
  color: var(--legacy-color-4b5563);
  font-size: var(--text-sm);
}

.blog-filters {
  margin-bottom: 10px;
}

.blog-filters select {
  width: 170px;
}

.blog-search {
  width: min(420px, 100%);
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-card);
}

.blog-search svg {
  width: 17px;
  color: var(--muted);
}

.blog-search input {
  border: 0;
  outline: 0;
  padding: 0;
  width: 100%;
}

.blog-bulk-bar {
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid var(--color-slate-300);
  border-radius: 7px;
  background: var(--color-slate-50);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.blog-bulk-bar strong {
  margin-right: auto;
  font-size: var(--text-sm);
}

.blog-manager-status {
  min-height: 16px;
  margin: 4px 0;
}

.blog-table-wrap {
  overflow: auto;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 8px;
  background: var(--color-card);
}

.blog-table {
  min-width: 820px;
}

.blog-table tbody tr {
  cursor: pointer;
}

.blog-table tbody tr:hover {
  background: var(--color-slate-50);
}

.blog-table td,
.blog-table th {
  vertical-align: middle;
}

.blog-table td:nth-child(2) {
  min-width: 210px;
}

.blog-slug {
  display: block;
  color: var(--muted);
  font-size: var(--text-xs);
  margin-top: 3px;
}

.blog-sort {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  width: auto;
  min-width: 0;
  height: auto;
  font: inherit;
  text-transform: uppercase;
}

.blog-seo-ring {
  --ring-color: var(--legacy-color-b91c1c);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--ring-color) calc(var(--score) * 1%), var(--legacy-color-e5e7eb) 0);
  position: relative;
}

.blog-seo-ring::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  background: var(--color-card);
}

.blog-seo-ring strong {
  position: relative;
  z-index: 1;
  color: var(--ring-color);
  font-size: var(--text-sm);
}

.blog-seo-ring.small {
  width: 42px;
  height: 42px;
}

.blog-seo-ring.good {
  --ring-color: var(--legacy-color-2f7d16);
}

.blog-seo-ring.warn {
  --ring-color: var(--legacy-color-bd6a08);
}

.blog-seo-ring.bad {
  --ring-color: var(--legacy-color-b91c1c);
}

.blog-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.blog-post-card {
  position: relative;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-card);
  cursor: pointer;
}

.blog-post-card:hover {
  border-color: var(--legacy-color-9fb8cf);
  box-shadow: 0 8px 22px var(--legacy-rgba-22a296d792);
}

.blog-card-image {
  aspect-ratio: 16 / 8;
  background: var(--legacy-color-edf3f8);
  display: grid;
  place-items: center;
  color: var(--legacy-color-60758a);
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card-check {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--color-card);
  box-shadow: 0 2px 8px var(--legacy-rgba-e0b1d23205);
}

.blog-card-body {
  padding: 12px;
}

.blog-card-body h3 {
  margin: 10px 0 6px;
  font-size: var(--text-md);
}

.blog-card-body p {
  min-height: 34px;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.blog-card-top,
.blog-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.blog-card-meta {
  margin-top: 12px;
  color: var(--color-slate-500);
  font-size: var(--text-xs);
}

.blog-score-text {
  color: var(--legacy-color-175c93);
  font-size: var(--text-xs);
  font-weight: 700;
}

.blog-editor-panel {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: calc(100vh - 120px);
  border: 1px solid var(--legacy-color-dbe2ea);
  border-radius: 8px;
  background: var(--color-card);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  box-shadow: -8px 0 26px var(--legacy-rgba-8056952d08);
}

.blog-editor-head {
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--legacy-color-e5e7eb);
}

.blog-editor-head h3 {
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-md);
}

.blog-editor-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--legacy-color-e5e7eb);
}

.blog-editor-tabs button {
  height: 36px;
  border: 0;
  border-radius: 0;
  background: var(--color-card);
  color: var(--color-slate-500);
  text-transform: capitalize;
}

.blog-editor-tabs button.active {
  color: var(--legacy-color-175c93);
  box-shadow: inset 0 -2px var(--legacy-color-175c93);
}

#blogEditorForm {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.blog-editor-body {
  overflow: auto;
  padding: 15px;
}

.blog-editor-footer {
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 15px;
  border-top: 1px solid var(--legacy-color-e5e7eb);
  background: var(--color-slate-50);
}

.blog-editor-footer p {
  margin: 0 auto 0 0;
}

.blog-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.blog-form-grid .field-block-full {
  grid-column: 1 / -1;
}

.blog-slug-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.blog-score-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.blog-score-summary h4,
.blog-score-summary p {
  margin: 0;
}

.blog-seo-layout {
  display: grid;
  gap: 16px;
}

.blog-seo-checklist {
  display: grid;
  gap: 6px;
  margin-top: 13px;
}

.blog-seo-checklist > div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 6px;
  font-size: var(--text-sm);
}

.blog-seo-checklist svg {
  width: 15px;
  height: 15px;
}

.blog-seo-checklist .pass {
  color: var(--legacy-color-276b1b);
  background: var(--legacy-color-edf8ea);
}

.blog-seo-checklist .fail {
  color: var(--legacy-color-9f3131);
  background: var(--legacy-color-fff0f0);
}

.blog-social-preview {
  padding-top: 14px;
  border-top: 1px solid var(--legacy-color-e5e7eb);
}

.blog-social-image {
  aspect-ratio: 1.91 / 1;
  margin-bottom: 10px;
  border-radius: 7px;
  background: var(--legacy-color-edf3f8);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--color-slate-500);
  font-size: var(--text-sm);
}

.blog-social-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-social-card {
  margin-top: 10px;
  padding: 11px;
  border: 1px solid var(--legacy-color-d8dee8);
  border-radius: 7px;
  background: var(--color-slate-50);
}

.blog-social-card p {
  margin: 5px 0;
  color: var(--legacy-color-4b5563);
  font-size: var(--text-sm);
}

.blog-social-card span {
  color: var(--color-slate-500);
  font-size: var(--text-xs);
}

.blog-sections-head {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.blog-section-list {
  display: grid;
  gap: 9px;
}

.blog-section-item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 30px;
  gap: 7px;
  align-items: start;
  padding: 9px;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 7px;
  background: var(--color-slate-50);
}

.blog-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.blog-toggle-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 7px;
  font-size: var(--text-sm);
}

.blog-import-box {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 7px;
  background: var(--color-slate-50);
}

.blog-import-box h4,
.blog-import-box p {
  margin: 0;
}

.blog-import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.blog-empty {
  padding: 32px;
  text-align: center;
  color: var(--muted);
}

@media (max-width: 1250px) {
  .blog-manager.editor-open {
    grid-template-columns: minmax(430px, 1fr) minmax(360px, 440px);
  }

  .blog-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .blog-manager.editor-open {
    grid-template-columns: 1fr;
  }

  .blog-editor-panel {
    position: relative;
    max-height: none;
  }

  .blog-stats,
  .blog-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-filters,
  .blog-manager-head {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .blog-stats,
  .blog-card-grid,
  .blog-form-grid,
  .blog-toggle-grid {
    grid-template-columns: 1fr;
  }

  .blog-form-grid .field-block-full {
    grid-column: auto;
  }

  .blog-section-item {
    grid-template-columns: 1fr 30px;
  }

  .blog-section-item textarea {
    grid-column: 1 / -1;
  }
}

/* Blog workspace uses a neutral editorial palette and full-page subviews. */
.blog-manager {
  display: block;
  min-height: 0;
}

.blog-manager-head {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--legacy-color-e7e5e4);
}

.blog-manager-head h2,
.blog-editor-head h2,
.blog-category-page h2 {
  color: var(--legacy-color-1c1917);
  letter-spacing: 0;
}

.blog-head-actions {
  flex-wrap: nowrap;
}

.blog-head-actions > button,
.blog-editor-head-actions > button,
.blog-editor-footer button[type="submit"],
.blog-category-form button[type="submit"],
.blog-sections-head > button {
  background: var(--legacy-color-292524);
  border-color: var(--legacy-color-292524);
  color: var(--color-card);
}

.blog-head-actions > button:hover,
.blog-editor-head-actions > button:hover,
.blog-editor-footer button[type="submit"]:hover,
.blog-category-form button[type="submit"]:hover,
.blog-sections-head > button:hover {
  background: var(--legacy-color-1c1917);
  border-color: var(--legacy-color-1c1917);
}

.blog-head-actions .secondary,
.blog-view-switcher .secondary,
.blog-row-actions .secondary,
.blog-back-btn.secondary {
  background: var(--color-card);
  border-color: var(--legacy-color-d6d3d1);
  color: var(--legacy-color-44403c);
}

.blog-head-actions .secondary:hover,
.blog-view-switcher .secondary:hover,
.blog-row-actions .secondary:hover,
.blog-back-btn.secondary:hover {
  background: var(--legacy-color-f5f5f4);
  border-color: var(--legacy-color-a8a29e);
}

.blog-view-switcher {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--legacy-color-d6d3d1);
  border-radius: 7px;
  background: var(--legacy-color-f5f5f4);
}

.blog-view-switcher button {
  width: auto;
  min-width: 74px;
  height: 32px;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.blog-view-switcher button.active {
  background: var(--color-card);
  color: var(--legacy-color-1c1917);
  box-shadow: 0 1px 3px var(--legacy-rgba-3240abcadf);
}

.blog-view-switcher svg,
.blog-row-actions svg,
.blog-back-btn svg {
  width: 14px;
  height: 14px;
}

.blog-stats > div {
  border-color: var(--legacy-color-e7e5e4);
  background: var(--legacy-color-fafaf9);
  text-align: left;
}

.blog-stats strong {
  color: var(--legacy-color-292524);
}

.blog-stats > div:nth-child(2) strong {
  color: var(--legacy-color-3f6212);
}

.blog-stats > div:nth-child(3) strong {
  color: var(--legacy-color-a16207);
}

.blog-filters {
  padding: 10px;
  border: 1px solid var(--legacy-color-e7e5e4);
  border-radius: 8px;
  background: var(--legacy-color-fafaf9);
}

.blog-search,
.blog-table-wrap,
.blog-post-card {
  border-color: var(--legacy-color-e7e5e4);
}

.blog-post-card:hover {
  border-color: var(--legacy-color-a8a29e);
}

.blog-card-image,
.blog-social-image {
  background: var(--legacy-color-f5f5f4);
  color: var(--legacy-color-78716c);
}

.blog-score-text {
  color: var(--legacy-color-57534e);
}

.blog-row-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
}

.blog-row-actions button {
  width: auto;
  min-width: 0;
  height: 29px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  white-space: nowrap;
}

.blog-row-actions .danger {
  color: var(--color-danger-text);
  border-color: var(--color-danger-border);
  background: var(--color-card);
}

.blog-editor-page,
.blog-category-page {
  min-height: calc(100vh - 150px);
}

.blog-editor-page {
  border: 1px solid var(--legacy-color-e7e5e4);
  border-radius: 8px;
  background: var(--color-card);
  overflow: hidden;
}

.blog-editor-head {
  min-height: 76px;
  padding: 13px 18px;
  background: var(--legacy-color-fafaf9);
}

.blog-editor-title,
.blog-editor-head-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.blog-editor-title h2 {
  max-width: 680px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-lg);
}

.blog-back-btn {
  width: auto;
  min-width: 125px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.blog-back-btn svg {
  transform: rotate(180deg);
}

.blog-editor-tabs {
  display: flex;
  gap: 4px;
  padding: 0 18px;
  background: var(--legacy-color-fafaf9);
}

.blog-editor-tabs button {
  width: auto;
  min-width: 110px;
  color: var(--legacy-color-78716c);
}

.blog-editor-tabs button.active {
  color: var(--legacy-color-1c1917);
  box-shadow: inset 0 -2px var(--legacy-color-292524);
}

#blogEditorForm {
  display: block;
}

.blog-editor-body {
  max-width: 1120px;
  min-height: 520px;
  margin: 0 auto;
  padding: 24px 28px 40px;
  overflow: visible;
}

.blog-editor-footer {
  position: sticky;
  bottom: 0;
  padding: 12px 18px;
  background: var(--legacy-rgba-17ba441a6b);
  backdrop-filter: blur(8px);
}

.blog-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.blog-category-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.blog-category-field button {
  width: auto;
  white-space: nowrap;
  background: var(--color-card);
  border-color: var(--legacy-color-d6d3d1);
  color: var(--legacy-color-44403c);
}

.blog-seo-layout {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 28px;
}

.blog-social-preview {
  padding: 0 0 0 24px;
  border-top: 0;
  border-left: 1px solid var(--legacy-color-e7e5e4);
}

.blog-category-page .blog-manager-head {
  margin-bottom: 18px;
}

.blog-category-page .blog-manager-head > div {
  display: grid;
  gap: 5px;
}

.blog-category-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.blog-category-form,
.blog-category-master {
  border: 1px solid var(--legacy-color-e7e5e4);
  border-radius: 8px;
  background: var(--color-card);
}

.blog-category-form {
  display: grid;
  gap: 13px;
  padding: 17px;
}

.blog-category-form h3,
.blog-category-master h3 {
  margin: 0;
  color: var(--legacy-color-292524);
}

.blog-category-form-actions,
.blog-category-master-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.blog-category-form-actions {
  justify-content: flex-end;
}

.blog-category-form-actions button {
  width: auto;
}

.blog-category-master {
  overflow: hidden;
}

.blog-category-master-head {
  padding: 15px 16px;
  border-bottom: 1px solid var(--legacy-color-e7e5e4);
  background: var(--legacy-color-fafaf9);
}

.blog-category-master-head span {
  color: var(--legacy-color-78716c);
  font-size: var(--text-sm);
}

.blog-category-master .table {
  margin: 0;
}

@media (max-width: 1000px) {
  .blog-head-actions {
    flex-wrap: wrap;
  }

  .blog-seo-layout,
  .blog-category-layout {
    grid-template-columns: 1fr;
  }

  .blog-social-preview {
    padding: 20px 0 0;
    border-top: 1px solid var(--legacy-color-e7e5e4);
    border-left: 0;
  }
}

@media (max-width: 700px) {
  .blog-editor-head,
  .blog-editor-title,
  .blog-editor-head-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .blog-editor-head-actions {
    flex-direction: row;
  }

  .blog-editor-title h2 {
    white-space: normal;
  }

  .blog-editor-tabs {
    overflow-x: auto;
  }

  .blog-editor-tabs button {
    min-width: 92px;
  }

  .blog-editor-body {
    padding: 18px 14px 32px;
  }

  .blog-row-actions button {
    width: 30px;
    padding: 0;
    font-size: 0;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SITEMAP MANAGER — design-system redesign
═══════════════════════════════════════════════════════════════ */
.sm-shell { display: flex; flex-direction: column; gap: 16px; }

.sm-title    { font-size: 22px; font-weight: 500; color: var(--text); margin: 0 0 4px; }
.sm-subtitle { font-size: 13px; color: var(--muted); margin: 0; }

/* Stat cards */
.sm-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.sm-stat-card {
  background: var(--surface, #fff);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md, 8px);
  padding: 12px 16px;
}
.sm-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: 6px;
}
.sm-stat-value { font-size: 20px; font-weight: 500; }
.sm-stat-green { color: #1e6b3a; }
.sm-stat-amber { color: #b45309; }
.sm-stat-red   { color: #dc2626; }

/* Toolbar */
.sm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.sm-tab-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.sm-tab-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.sm-tab-pill:hover { background: var(--border); color: var(--text); }
.sm-tab-pill-active   { background: #1a1a1a !important; color: #fff !important; border-color: #1a1a1a !important; }
.sm-tab-pill-included { background: #d1fae5 !important; color: #065f46 !important; border-color: #a7f3d0 !important; }
.sm-tab-pill-issue    { background: #fee2e2 !important; color: #991b1b !important; border-color: #fca5a5 !important; }

.sm-toolbar-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sm-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: var(--radius-md, 8px);
  white-space: nowrap;
  cursor: pointer;
}
.sm-action-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.sm-submit-btn  { background: #1e6b3a !important; color: #fff !important; border-color: #1e6b3a !important; }
.sm-submit-btn:hover  { background: #155a2e !important; }
.sm-include-btn { background: #1e6b3a !important; color: #fff !important; border-color: #1e6b3a !important; }
.sm-include-btn:hover { background: #155a2e !important; }
.sm-exclude-btn { color: #dc2626 !important; border-color: #fca5a5 !important; }

/* Table card */
.sm-table-card {
  background: var(--surface, #fff);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
}
.sm-table-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--border);
  background: var(--bg);
  flex-wrap: wrap;
}
.sm-filters-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sm-search { max-width: 200px; }
.sm-bulk-actions { display: flex; gap: 6px; }
.sm-bulk-hidden  { visibility: hidden; pointer-events: none; }
.sm-table-wrap   { overflow-x: auto; }

.sm-table { margin: 0; width: 100%; border-collapse: collapse; }
.sm-table thead tr.sm-thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  font-weight: 600;
  padding: 8px 10px;
  background: var(--bg);
  border-bottom: 0.5px solid var(--border);
}
.sm-table tbody tr { border-bottom: 0.5px solid var(--border); }
.sm-table tbody tr:last-child { border-bottom: none; }
.sm-table tbody tr:hover { background: var(--bg); }
.sm-table tbody td { padding: 8px 10px; vertical-align: middle; }

/* Column widths */
.sm-check-cell    { width: 36px; text-align: center; }
.sm-check-cell input[type="checkbox"] { accent-color: #1e6b3a; }
.sm-priority-cell { width: 80px; }
.sm-freq-cell     { width: 114px; }
.sm-date-cell     { width: 100px; font-size: 12px; color: var(--muted); }
.sm-status-cell   { width: 100px; text-align: center; }
.sm-actions-cell  { width: 60px; }

.sm-page-title { font-size: 13px; font-weight: 500; color: var(--text); }
.sm-page-url   { font-size: 11px; font-family: monospace; color: var(--muted); }

/* Inline inputs */
.sm-inline-input {
  height: 30px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md, 6px);
  padding: 0 6px;
  font-size: 12px;
  background: var(--surface);
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.sm-inline-input:focus {
  outline: none;
  border-color: #1e6b3a;
  box-shadow: 0 0 0 2px rgba(30,107,58,.12);
}
.sm-priority-input { width: 64px; text-align: center; }
.sm-freq-select    { width: 96px; }

/* Status badges */
.sm-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  user-select: none;
}
.sm-badge-included { background: #d1fae5; color: #1e6b3a; }
.sm-badge-excluded { background: #f3f4f6; color: #6b7280; }
.sm-badge-issue    { background: #fee2e2; color: #dc2626; }
.sm-dot            { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sm-dot-included   { background: #1e6b3a; }
.sm-dot-excluded   { background: #9ca3af; }
.sm-dot-issue      { background: #dc2626; }

/* Hover-reveal row actions */
.sm-table tbody tr .row-action-menu { opacity: 0; transition: opacity .15s; }
.sm-table tbody tr:hover .row-action-menu { opacity: 1; }

/* Pagination */
.sm-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 0.5px solid var(--border);
  gap: 10px;
  flex-wrap: wrap;
}
.sm-pagination-info { font-size: 12px; color: var(--muted); }
.sm-pagination-btns { display: flex; gap: 4px; align-items: center; }
.sm-page-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md, 6px);
  font-size: 12px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.sm-page-btn:hover:not([disabled]) { background: var(--border); }
.sm-page-btn.active  { background: #1e6b3a; color: #fff; border-color: #1e6b3a; }
.sm-page-btn[disabled] { opacity: .4; cursor: not-allowed; }
.sm-page-ellipsis { font-size: 12px; color: var(--muted); padding: 0 2px; }

@media (max-width: 768px) {
  .sm-stat-grid { grid-template-columns: repeat(3, 1fr); }
  .sm-toolbar   { flex-direction: column; align-items: flex-start; }
}

.ops-admin-status {
  display: none;
}

.ops-dropdown-toggle.ops-icon-btn {
  min-width: 30px;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
}

.ops-dropdown-toggle.ops-icon-btn svg {
  width: 14px;
  height: 14px;
}

.editor-hero-topbar {
  margin-bottom: 0;
}

.editor-fullscreen.card {
  padding: 0;
  margin-bottom: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.editor-fullscreen .editor-heading-shell {
  margin-bottom: 0;
}

.editor-fullscreen #pageStatus {
  margin: 0;
  min-height: 0;
}

#pageStatus:empty {
  display: none;
}

.editor-heading-shell {
  margin-bottom: 0;
}

.editor-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
  margin-bottom: 2px;
  padding: 8px 10px;
  position: sticky;
  top: 0;
  z-index: 12;
  background: var(--color-card);
  box-shadow: 0 1px 4px var(--legacy-rgba-c28d776ff9);
  border-color: var(--legacy-color-e5e7eb);
  border-radius: 10px;
}

.editor-page-header-pro {
  background: linear-gradient(180deg, var(--color-card) 0%, var(--color-slate-50) 100%);
}

.editor-page-leading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.builder-mode-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #2C3034;
  border-radius: 6px;
  padding: 2px;
  flex-shrink: 0;
}

.builder-mode-btn {
  position: relative;
  width: auto;
  border: 0;
  border-radius: 4px;
  padding: 4px 12px;
  background: transparent;
  color: #6B7280;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.builder-mode-btn.active {
  background: #1A6B42;
  color: #FFFFFF;
}

.builder-mode-btn.locked {
  padding-right: 34px;
}

.mode-locked-overlay {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.64);
  color: #F8FAFC;
  font-size: 10px;
  font-weight: 600;
  pointer-events: none;
}

.mode-locked-overlay i,
.mode-locked-overlay svg {
  width: 10px;
  height: 10px;
}

.builder-mode-shell {
  position: relative;
  min-height: 640px;
}

.builder-mode-pane {
  min-height: 640px;
}

.builder-mode-shell.is-loading .builder-mode-loading {
  opacity: 1;
  pointer-events: auto;
}

.builder-mode-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 250, 252, 0.82);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 4;
}

.builder-mode-loading-card {
  width: min(420px, 84%);
  padding: 18px;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  background: #FFFFFF;
  display: grid;
  gap: 10px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
}

.builder-mode-loading-line {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #E2E8F0 0%, #F8FAFC 50%, #E2E8F0 100%);
  background-size: 180% 100%;
  animation: builderModeShimmer 1.1s ease-in-out infinite;
}

.builder-mode-loading-line.wide {
  height: 18px;
  width: 68%;
}

.builder-mode-loading-line:nth-child(2) {
  width: 84%;
}

.builder-mode-loading-line:nth-child(3) {
  width: 52%;
}

@keyframes builderModeShimmer {
  0% { background-position: 180% 0; }
  100% { background-position: -180% 0; }
}

.builder-mode-locked {
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: #0F172A;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
}

.builder-mode-locked-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #F0FDF4;
  color: #1A6B42;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.builder-mode-locked-icon i,
.builder-mode-locked-icon svg {
  width: 18px;
  height: 18px;
}

.builder-mode-locked p {
  margin: 0;
  color: #64748B;
  font-size: 13px;
}

.builder-upgrade-panel {
  width: min(560px, 94vw);
  padding: 16px;
}

.builder-upgrade-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.builder-upgrade-head h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #0F172A;
}

.builder-upgrade-head p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #64748B;
}

.builder-upgrade-body {
  padding: 14px 0;
}

.builder-upgrade-lock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 10px 12px;
  background: #F8FAFC;
  color: #0F172A;
  font-size: 13px;
}

.builder-upgrade-lock i,
.builder-upgrade-lock svg {
  width: 14px;
  height: 14px;
  color: #1A6B42;
}

.builder-upgrade-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.visual-builder-root {
  min-height: 720px;
}

.visual-builder-shell {
  display: flex;
  min-height: 720px;
  height: 100%;
  background: #E8EAED;
  overflow: hidden;
}

.block-palette {
  width: 56px;
  min-width: 56px;
  background: #1E2126;
  border-right: 1px solid #2C3034;
  padding: 8px 0;
  overflow-y: auto;
  transition: width 180ms ease;
  position: relative;
}

.block-palette:hover,
.block-palette.expanded,
.block-palette.hover-open {
  width: 200px;
  min-width: 200px;
}

.block-palette-toggle {
  width: 40px;
  height: 40px;
  margin: 0 auto 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #2C3034;
  color: #6B7280;
}

.block-palette-label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4A4F54;
  padding: 6px 8px 2px;
}

.block-palette-group {
  margin-bottom: 4px;
}

.block-palette-items {
  display: grid;
  gap: 2px;
}

.block-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 4px;
  margin: 1px 4px;
  border-radius: 5px;
  color: #6B7280;
  cursor: grab;
}

.block-item:hover {
  background: #2C3034;
}

.block-item.is-dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.block-item-icon {
  width: 16px;
  height: 16px;
  color: #6B7280;
}

.block-item-icon svg {
  width: 16px;
  height: 16px;
}

.block-item-label {
  font-size: 8px;
  color: #4A4F54;
  text-align: center;
  line-height: 1.2;
}

.visual-canvas {
  flex: 1;
  overflow: auto;
  position: relative;
  background: #E8EAED;
  padding: 0 0 56px;
}

.visual-canvas-topbar {
  display: flex;
  justify-content: center;
  padding: 12px 16px 0;
}

.viewport-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: #2C3034;
  border-radius: 6px;
}

.viewport-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 4px;
  background: transparent;
  color: #6B7280;
  font-size: 11px;
  font-weight: 600;
}

.viewport-toggle-btn.active {
  background: #1A6B42;
  color: #FFFFFF;
}

.viewport-toggle-btn svg {
  width: 14px;
  height: 14px;
}

.canvas-frame {
  background: #FFFFFF;
  margin: 20px auto;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  width: 85%;
  min-height: 90%;
  transition: width 300ms ease;
  padding: 12px 0 20px;
}

.canvas-frame[data-viewport="tablet"] {
  width: 60%;
}

.canvas-frame[data-viewport="mobile"] {
  width: 375px;
}

.drop-zone {
  height: 28px;
  margin: 4px 12px;
  border-radius: 4px;
  border: 1.5px dashed #CBD5E1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #CBD5E1;
  transition: border-color 150ms, background 150ms, height 150ms;
}

.drop-zone.active {
  border-color: #1A6B42;
  color: #1A6B42;
  background: rgba(26, 107, 66, 0.04);
  height: 48px;
}

.canvas-block {
  position: relative;
  margin: 2px 0;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 150ms, box-shadow 150ms;
}

.canvas-block:hover {
  border-color: #E2E8F0;
}

.canvas-block.selected {
  border-color: #1A6B42;
  box-shadow: 0 0 0 1px #1A6B42;
}

.canvas-block-label {
  position: absolute;
  top: -1px;
  left: -1px;
  background: #1A6B42;
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 0 0 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  z-index: 2;
}

.canvas-block-toolbar {
  position: absolute;
  top: -1px;
  right: -1px;
  background: #1A6B42;
  border-radius: 0 4px 0 0;
  display: flex;
  z-index: 2;
}

.canvas-block-toolbar button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  color: #FFFFFF;
  font-size: 10px;
}

.canvas-block-toolbar svg {
  width: 10px;
  height: 10px;
}

.canvas-block-shell {
  padding: 14px 16px 16px;
}

.canvas-block-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  min-width: 0;
}

.canvas-block-title {
  min-width: 0;
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #0F172A;
  outline: none;
}

.canvas-block-type {
  font-size: 10px;
  color: #94A3B8;
  white-space: nowrap;
}

.visual-preview {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  overflow: hidden;
  background: #FFFFFF;
}

.visual-preview-copy {
  display: grid;
  gap: 6px;
  padding: 12px;
}

.visual-preview-copy strong {
  font-size: 14px;
  color: #0F172A;
}

.visual-preview-copy span {
  font-size: 12px;
  color: #64748B;
}

.visual-preview-hero {
  background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
  color: #FFFFFF;
}

.visual-preview-hero-band {
  height: 72px;
  background: linear-gradient(90deg, rgba(26, 107, 66, 0.35), rgba(255, 255, 255, 0.08));
}

.visual-preview-grid-cols,
.visual-preview-avatars {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

.visual-preview-grid-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.visual-preview-tile,
.visual-preview-avatar {
  height: 42px;
  border-radius: 8px;
  background: #E2E8F0;
}

.visual-preview-avatars {
  grid-template-columns: repeat(4, 1fr);
}

.visual-preview-avatar {
  border-radius: 999px;
  height: 48px;
}

.visual-preview-form-lines,
.visual-preview-lines {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

.visual-preview-form-lines span,
.visual-preview-lines span {
  height: 12px;
  border-radius: 999px;
  background: #E2E8F0;
}

.visual-preview-form-lines span:nth-child(2),
.visual-preview-lines span:nth-child(2) {
  width: 82%;
}

.visual-preview-form-lines span:nth-child(3),
.visual-preview-lines span:nth-child(3) {
  width: 64%;
}

.visual-canvas-empty {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #94A3B8;
}

.visual-canvas-empty strong {
  color: #0F172A;
}

.visual-canvas-empty .drop-zone {
  width: calc(100% - 48px);
}

.canvas-zoom-bar {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: #1A1D1F;
  border-radius: 999px;
  padding: 5px 14px;
  display: flex;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  color: #F1F5F9;
  font-size: 11px;
}

/* Visual Builder controls are isolated from the global CMS button system. */
.visual-builder-root .block-palette {
  flex: 0 0 56px;
}

.visual-builder-root .block-palette:hover,
.visual-builder-root .block-palette.expanded,
.visual-builder-root .block-palette.hover-open {
  flex-basis: 200px;
}

.visual-builder-root .block-palette-toggle,
.visual-builder-root .block-item,
.visual-builder-root .viewport-toggle-btn,
.visual-builder-root .canvas-block-toolbar button {
  width: auto;
  min-width: 0;
  border: 0;
  box-shadow: none;
}

.visual-builder-root .block-palette-toggle {
  width: 40px;
  min-width: 40px;
  padding: 0;
  background: #2C3034;
  color: #6B7280;
}

.visual-builder-root .block-item {
  width: calc(100% - 8px);
  min-height: 0;
  padding: 7px 4px;
  background: transparent;
  color: #6B7280;
  font-size: 8px;
  box-shadow: none;
}

.visual-builder-root .block-item:hover {
  background: #2C3034;
  color: #94A3B8;
}

.visual-builder-root .viewport-toggle-btn {
  min-height: 28px;
  padding: 4px 12px;
  background: transparent;
  color: #6B7280;
}

.visual-builder-root .viewport-toggle-btn.active {
  background: #1A6B42;
  color: #FFFFFF;
}

.visual-builder-root .canvas-frame {
  width: 85%;
  min-height: 90%;
  margin: 20px auto;
  padding: 12px 0 20px;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14);
}

.visual-builder-root .canvas-frame[data-viewport="tablet"] {
  width: 60%;
}

.visual-builder-root .canvas-frame[data-viewport="mobile"] {
  width: min(375px, calc(100% - 24px));
}

.visual-builder-root .drop-zone {
  height: 6px;
  min-height: 6px;
  border-color: transparent;
  color: transparent;
  opacity: 0;
  overflow: hidden;
}

.visual-builder-root .visual-builder-shell.is-dragging-block .drop-zone,
.visual-builder-root .visual-canvas-empty .drop-zone {
  height: 28px;
  border-color: #CBD5E1;
  color: #CBD5E1;
  opacity: 1;
}

.visual-builder-root .visual-builder-shell.is-dragging-block .drop-zone.active,
.visual-builder-root .visual-canvas-empty .drop-zone.active {
  height: 48px;
  border-color: #1A6B42;
  color: #1A6B42;
  background: rgba(26, 107, 66, 0.04);
}

.visual-builder-root .canvas-block.is-dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.visual-builder-root .canvas-block-toolbar button {
  min-height: 0;
  padding: 4px 8px;
  border-radius: 0;
  background: transparent;
  color: #FFFFFF;
  font-size: 10px;
}

.visual-builder-root .canvas-block-toolbar button:hover {
  background: rgba(255, 255, 255, 0.14);
}

.visual-builder-root [data-inline-title][contenteditable="true"] {
  cursor: text;
  background: #F0FDF4;
  box-shadow: inset 0 -1px 0 #1A6B42;
}

.visual-property-panel {
  background: #FFFFFF;
  border-left: 1px solid #E2E8F0;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 320px;
  max-width: 360px;
}

.visual-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #E2E8F0;
}

.visual-tabs .pp-tab {
  flex: 1;
  padding: 8px 0;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
  border-bottom: 2px solid transparent;
}

.visual-tabs .pp-tab.active {
  color: #1A6B42;
  border-bottom-color: #1A6B42;
}

.visual-panel-body {
  gap: 12px;
}

.visual-section-block {
  display: grid;
  gap: 10px;
  padding: 10px 0 4px;
}

.visual-section-block h4 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748B;
}

.visual-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.visual-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.visual-toggle-btn {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  color: #64748B;
  font-size: 11px;
  font-weight: 600;
}

.visual-toggle-btn.active {
  background: #1A6B42;
  border-color: #1A6B42;
  color: #FFFFFF;
}

.visual-swatch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.visual-swatch-token {
  display: grid;
  gap: 6px;
  justify-items: start;
  padding: 8px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #FAFAFA;
}

.visual-swatch-token.active {
  border-color: #1A6B42;
  box-shadow: 0 0 0 2px rgba(26, 107, 66, 0.12);
}

.visual-swatch-token span {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.visual-swatch-token small {
  font-size: 10px;
  color: #64748B;
  line-height: 1.2;
  text-align: left;
}

.visual-token-search {
  margin-bottom: 10px;
}

.visual-token-search input {
  width: 100%;
}

.visual-token-apply {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 12px;
}

.visual-token-scroll {
  display: grid;
  gap: 12px;
  overflow-y: auto;
  max-height: 100%;
}

.visual-token-group {
  display: grid;
  gap: 8px;
}

.visual-token-group-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94A3B8;
}

.visual-token-list {
  display: grid;
  gap: 6px;
}

.visual-token-item {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #FFFFFF;
  text-align: left;
}

.visual-token-item.active {
  border-color: #1A6B42;
  box-shadow: 0 0 0 2px rgba(26, 107, 66, 0.12);
}

.visual-token-swatch {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.visual-token-preview {
  font-size: 10px;
  color: #64748B;
  font-family: var(--font-mono);
}

.visual-token-meta {
  display: grid;
  gap: 2px;
}

.visual-token-meta strong {
  font-size: 10px;
  font-family: var(--font-mono);
  color: #0F172A;
}

.visual-token-meta span {
  font-size: 10px;
  color: #64748B;
  word-break: break-word;
}

.editor-page-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-self: end;
}

.builder-save-status {
  font-size: 11px;
  color: #4A4F54;
  white-space: nowrap;
  margin-right: 6px;
}

.builder-save-status.saving {
  color: #94A3B8;
  animation: builderSavePulse 1.2s ease-in-out infinite;
}

.builder-save-status.saved {
  color: #4ADE80;
}

.builder-save-status.failed {
  color: #F87171;
}

@keyframes builderSavePulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.back-compact-btn {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  font-size: var(--text-sm);
}

.editor-breadcrumb {
  font-size: var(--text-xs);
  color: var(--legacy-color-6b7280);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.editor-breadcrumb-pro {
  white-space: nowrap;
}

.editor-breadcrumb .breadcrumb-icon {
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
}

.editor-breadcrumb span {
  color: var(--legacy-color-9ca3af);
}

.editor-title-inline {
  width: min(100%, 240px);
  min-width: 120px;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: var(--text-md);
  line-height: 1.1;
  font-weight: 700;
  color: var(--legacy-color-111827);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-title-inline:focus {
  outline: none;
}

.editor-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  white-space: nowrap;
}

.editor-meta-row-compact .status-pill {
  padding: 2px 7px;
  font-size: var(--text-xs);
}

.code-editor-root {
  min-height: 720px;
}

.code-editor-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 720px;
  background: #0D1117;
  color: #E6EDF3;
}

.code-editor-topbar {
  height: 44px;
  background: #161B22;
  border-bottom: 1px solid #30363D;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  gap: 12px;
}

.code-top-left,
.code-top-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.code-back-btn {
  color: #8B949E;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.code-page-name {
  font-size: 12px;
  font-weight: 600;
  color: #E6EDF3;
  white-space: nowrap;
}

.code-mode-tabs {
  display: inline-flex;
  background: #1C2128;
  border: 1px solid #30363D;
  border-radius: 6px;
  padding: 2px;
}

.code-mode-btn {
  padding: 4px 10px;
  border-radius: 4px;
  color: #8B949E;
  font-size: 11px;
  font-weight: 600;
}

.code-mode-btn.active {
  background: #1A6B42;
  color: #FFFFFF;
}

.code-top-action {
  font-size: 11px;
  font-weight: 600;
  color: #E6EDF3;
  border: 1px solid #30363D;
  background: transparent;
  height: 28px;
  padding: 0 10px;
  border-radius: 5px;
}

.code-top-action.primary {
  background: #1A6B42;
  border-color: #1A6B42;
}

.code-editor-grid {
  display: grid;
  grid-template-columns: 200px 1fr 240px;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.code-editor-shell[data-mode="code"] .code-preview-frame-wrap {
  display: none;
}

.code-editor-shell[data-mode="preview"] .code-file-tree,
.code-editor-shell[data-mode="preview"] .code-editor-tabs,
.code-editor-shell[data-mode="preview"] .code-right-panel {
  display: none;
}

.code-editor-shell[data-mode="preview"] .code-editor-grid {
  grid-template-columns: 1fr;
}

.code-editor-shell[data-mode="preview"] .code-editor-area {
  grid-template-columns: 1fr;
}

.code-editor-shell[data-mode="preview"] .code-preview-frame-wrap {
  display: block;
}

.code-editor-shell[data-mode="split"] .code-editor-area {
  grid-template-columns: 1fr 1fr;
}

.code-file-tree {
  background: #161B22;
  border-right: 1px solid #30363D;
  overflow: auto;
}

.code-tree-header {
  padding: 6px 12px 3px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: #6E7681;
  letter-spacing: 0.07em;
}

.code-tree-body {
  display: grid;
  gap: 2px;
  padding-bottom: 8px;
}

.ft-dir,
.ft-file {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #6E7681;
}

.ft-dir:hover,
.ft-file:hover,
.ft-file.active {
  background: #1C2128;
  color: #E6EDF3;
}

.ft-file {
  padding-left: 24px;
  font-weight: 500;
}

.ft-file-icon {
  width: 16px;
  min-width: 16px;
  height: 16px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #0D1117;
}

.ft-file-icon.html { background: #F97316; }
.ft-file-icon.css { background: #4A9EFF; }
.ft-file-icon.js { background: #E3B341; }
.ft-file-icon.json { background: #4ADE80; }

.code-editor-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #0D1117;
}

.code-editor-tabs {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  background: #161B22;
  border-bottom: 1px solid #30363D;
}

.code-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 11px;
  color: #8B949E;
  border-right: 1px solid #30363D;
  white-space: nowrap;
  position: relative;
}

.code-tab.active {
  background: #0D1117;
  color: #E6EDF3;
}

.code-tab-close {
  opacity: 0;
  transition: opacity 150ms ease;
}

.code-tab:hover .code-tab-close {
  opacity: 1;
}

.code-tab-icon {
  font-size: 9px;
  color: #6E7681;
}

.code-editor-area {
  display: grid;
  grid-template-columns: 1fr 320px;
  min-height: 0;
  flex: 1;
}

.code-monaco-editor {
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.code-monaco-editor .monaco-editor,
.code-monaco-editor .monaco-editor .overflow-guard {
  border-radius: 0;
}

.code-monaco-editor .monaco-editor {
  min-height: 0;
}

.code-preview-frame-wrap {
  background: #0D1117;
  border-left: 1px solid #30363D;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.code-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid #30363D;
  background: #161B22;
  flex-shrink: 0;
}

.code-preview-device-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  border-radius: 6px;
  background: #2C3034;
}

.code-preview-device,
.code-preview-action {
  font-size: 11px;
  font-weight: 600;
  color: #8B949E;
  border-radius: 4px;
  padding: 4px 10px;
}

.code-preview-device.active {
  background: #1A6B42;
  color: #FFFFFF;
}

.code-preview-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.code-preview-action {
  border: 1px solid #30363D;
  background: transparent;
}

#codePreviewFrame {
  width: 100%;
  flex: 1;
  min-height: 0;
  border: 0;
  background: #FFFFFF;
}

.code-preview-frame-wrap[data-device="tablet"] #codePreviewFrame {
  width: 768px;
  max-width: 100%;
}

.code-preview-frame-wrap[data-device="mobile"] #codePreviewFrame {
  width: 390px;
  max-width: 100%;
}

.code-preview-frame-wrap[data-device="desktop"] #codePreviewFrame {
  width: 100%;
}

.code-preview-frame-wrap.hidden {
  display: none;
}

.code-preview-frame-wrap.full {
  grid-column: 1 / -1;
  border-left: 0;
}

.code-status-bar {
  height: 20px;
  background: #1A6B42;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

.code-right-panel {
  background: #161B22;
  border-left: 1px solid #30363D;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.code-right-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid #30363D;
}

.code-right-tab {
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #8B949E;
}

.code-right-tab.active {
  color: #E6EDF3;
  background: #1C2128;
}

.code-right-body {
  padding: 10px;
  overflow: auto;
  display: grid;
  gap: 12px;
}

.code-right-panel-view {
  display: none;
}

.code-right-panel-view.active {
  display: grid;
  gap: 10px;
}

.code-search {
  width: 100%;
  background: #1C2128;
  border: 1px solid #30363D;
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 11px;
  color: #E6EDF3;
}

.code-token-list {
  display: grid;
  gap: 10px;
}

.code-token-group-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: #6E7681;
  padding: 6px 0 3px;
}

.token-item {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 4px;
  color: #8B949E;
}

.token-item:hover {
  background: #1C2128;
}

.token-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.08);
}

.token-swatch.token-value {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  font-size: 10px;
  background: transparent;
}

.token-name,
.token-value {
  font-size: 10px;
  font-family: var(--font-mono);
}

.token-value {
  color: #6E7681;
}

.code-snippet-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #30363D;
  background: #1C2128;
}

.code-snippet-card strong {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  color: #E6EDF3;
}

.code-snippet-card p {
  margin: 0;
  font-size: 10px;
  color: #8B949E;
}

.code-error-list {
  display: grid;
  gap: 6px;
}

.code-error-item {
  width: 100%;
  text-align: left;
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 5px;
  background: #1C2128;
  color: #E6EDF3;
}

.code-error-item.ok {
  color: #4ADE80;
}

.code-error-item strong,
.code-error-item span {
  font-size: 10px;
}

.code-error-item span {
  color: #8B949E;
}
.status-ok {
  color: rgba(255, 255, 255, 0.8);
}

.status-err {
  color: #F87171;
}

/* ── Theme Swatch Bar ─────────────────────────────────────────── */
.theme-swatch-bar {
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  height: 36px;
  flex-shrink: 0;
  margin-bottom: 2px;
  border: 1px solid var(--legacy-rgba-011607f240);
}

.theme-swatch {
  flex: 1;
  display: block;
}

/* ── CMS Modal Overlay ────────────────────────────────────────── */
.cms-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--legacy-rgba-a9f2373e64);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 20px;
  backdrop-filter: blur(3px);
}

.cms-modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  max-width: 760px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px var(--legacy-rgba-3d0b8ef9b6);
}

.cms-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.cms-modal-header h3 {
  margin: 0;
}

.cms-modal-header button {
  flex-shrink: 0;
  width: auto;
  min-width: 36px;
  padding: 6px 10px;
}

.cms-modal-dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(100vw - 40px, 760px);
}

.cms-modal-dialog::backdrop {
  background: var(--legacy-rgba-a9f2373e64);
  backdrop-filter: blur(3px);
}

/* ── Theme Customizer Panel (inside modal) ────────────────────── */
.theme-customizer-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.theme-customizer-section h4 {
  margin: 0 0 10px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.theme-customizer-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.theme-customizer-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-customizer-color-row span {
  width: 80px;
  flex-shrink: 0;
  color: var(--muted);
}

.theme-customizer-color-row input[type="color"] {
  width: 40px;
  height: 34px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  flex-shrink: 0;
}

.color-hex-input {
  font-family: monospace;
  font-size: var(--text-sm);
  width: 90px;
  flex-shrink: 0;
}

.theme-swatch-preview {
  margin-top: 4px;
}

.theme-swatch-preview .theme-swatch-bar {
  height: 20px;
  border-radius: 6px;
}

/* ── Install modal uses 2-col grid at smaller sizes ───────────── */
.cms-modal .theme-manager-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

}

/* Theme Manager */
.theme-manager-page {
  background: #f4f6f8;
  min-height: calc(100vh - 56px);
  margin: -24px;
  padding: 32px 24px 56px;
}

.theme-container {
  max-width: 1440px;
  margin: 0 auto;
}

.theme-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
}

.theme-title {
  margin: 0 0 8px;
  color: #101828;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 750;
}

.theme-subtitle {
  margin: 0;
  color: #667085;
  font-size: 16px;
}

.theme-header-actions,
.active-theme-actions,
.theme-actions {
  display: flex;
  gap: 10px;
}

.theme-btn {
  width: auto;
  min-width: 0;
  height: 44px;
  padding: 0 18px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  background: #fff;
  color: #101828;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  font-size: 14px;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.theme-btn:hover:not(:disabled) { background: #f9fafb; }
.theme-btn-primary { background: #157347; border-color: #157347; color: #fff; }
.theme-btn-primary:hover:not(:disabled) { background: #11623c; border-color: #11623c; }
.theme-btn-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.theme-btn:disabled { opacity: .55; cursor: not-allowed; }

.active-theme-banner {
  background: linear-gradient(135deg, #ecfdf3 0%, #f6fffa 100%);
  border: 1px solid #12b76a;
  border-radius: 18px;
  padding: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
  box-shadow: 0 5px 16px rgba(18, 183, 106, .08);
}

.active-theme-identity { display: flex; align-items: center; gap: 18px; }
.active-theme-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: #d1fadf;
  color: #067647;
  display: grid;
  place-items: center;
  font-size: 27px;
}
.active-theme-eyebrow,
.theme-modal-eyebrow {
  margin: 6px 0 2px;
  color: #067647;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.active-theme-banner h2 { margin: 0; color: #101828; font-size: 22px; }
.active-theme-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 7px; color: #475467; font-size: 13px; }
.active-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #dcfae6;
  color: #067647;
  font-size: 12px;
  font-weight: 750;
}
.active-badge i { font-size: 7px; }
.no-active-theme { border-color: #f79009; background: #fffaeb; }

.theme-toolbar {
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.theme-tabs { display: flex; gap: 5px; flex-wrap: wrap; }
.theme-tab {
  width: auto;
  min-width: 0;
  padding: 9px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #667085;
  box-shadow: none;
  font-size: 13px;
  font-weight: 650;
}
.theme-tab.active { background: #eef4ff; color: #175cd3; }
.theme-filters { display: flex; gap: 9px; align-items: center; }
.theme-search {
  height: 42px;
  min-width: 210px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  color: #667085;
  background: #fff;
}
.theme-search input {
  border: 0;
  box-shadow: none;
  padding: 0;
  height: auto;
  min-width: 0;
}
.theme-search input:focus { outline: 0; box-shadow: none; }
.theme-select {
  width: auto;
  min-width: 130px;
  height: 42px;
  padding: 0 34px 0 11px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  background-color: #fff;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.theme-card {
  padding: 0;
  gap: 0;
  border: 1px solid #eaecf0;
  border-radius: 18px;
  overflow: visible;
  background: #fff;
  box-shadow: 0 2px 7px rgba(16, 24, 40, .06);
}
.theme-card.is-active { border: 2px solid #12b76a; box-shadow: 0 7px 22px rgba(18, 183, 106, .11); }
.theme-preview {
  height: 170px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(145deg, #eef2ff, #f8fafc);
  border-radius: 17px 17px 0 0;
  border-bottom: 1px solid #eaecf0;
}
.theme-preview-browser { height: 23px; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: rgba(255,255,255,.82); }
.theme-preview-browser span { width: 6px; height: 6px; border-radius: 50%; background: #d0d5dd; }
.theme-preview .theme-swatch-bar { position: absolute; inset: 23px 0 auto; height: 7px; border-radius: 0; }
.theme-preview-layout { padding: 26px 20px 14px; color: #98a2b3; }
.theme-preview-layout > i { display: block; height: 22px; padding: 5px 8px; background: rgba(255,255,255,.8); border-radius: 5px; }
.theme-preview-layout div { display: grid; grid-template-columns: 1.25fr .75fr; gap: 8px; margin-top: 9px; }
.theme-preview-layout div i { height: 70px; display: grid; place-items: center; background: rgba(255,255,255,.72); border-radius: 7px; font-size: 22px; }
.theme-status-badge {
  position: absolute;
  top: 40px;
  right: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #f2f4f7;
  color: #475467;
  font-size: 11px;
  font-weight: 750;
  text-transform: capitalize;
}
.theme-status-badge.active { background: #dcfae6; color: #067647; }
.theme-card-body { padding: 18px; }
.theme-card-title-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 7px; }
.theme-card h3 { margin: 0; color: #101828; font-size: 19px; }
.theme-category { padding: 3px 8px; border-radius: 999px; background: #f2f4f7; color: #475467; font-size: 11px; font-weight: 650; }
.theme-description { min-height: 44px; margin: 0; color: #667085; font-size: 13px; line-height: 1.55; }
.theme-meta { display: flex; gap: 13px; margin: 13px 0 16px; color: #667085; font-size: 12px; }
.theme-actions .theme-btn { flex: 1; height: 40px; padding: 0 13px; }
.theme-more-wrap { position: relative; flex: 0 0 auto; }
.theme-actions .more-menu { width: 40px; padding: 0; }
.theme-more-popover {
  position: absolute;
  right: 0;
  bottom: 46px;
  z-index: 20;
  width: 155px;
  padding: 6px;
  border: 1px solid #eaecf0;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(16, 24, 40, .16);
}
.theme-more-popover button {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #344054;
  box-shadow: none;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  font-size: 13px;
}
.theme-more-popover button:hover { background: #f9fafb; }
.theme-more-popover button.danger { color: #b42318; }
.theme-empty-state { grid-column: 1 / -1; padding: 60px; text-align: center; color: #667085; background: #fff; border: 1px dashed #d0d5dd; border-radius: 18px; }
.theme-empty-state i { font-size: 34px; }

.theme-modal-body { padding: 22px 24px; }
.theme-modal-footer { padding: 16px 24px 20px; border-top: 1px solid #eaecf0; display: flex; justify-content: flex-end; gap: 10px; }
.theme-warning { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid #fedf89; border-radius: 12px; background: #fffaeb; color: #7a2e0e; }
.theme-warning.danger { border-color: #fecdca; background: #fef3f2; color: #b42318; }
.theme-warning i { font-size: 21px; }
.theme-warning p { margin: 0; line-height: 1.5; }
.theme-operation-progress { margin-top: 18px; color: #475467; font-size: 13px; }
.progress-bar { height: 9px; margin-bottom: 9px; overflow: hidden; border-radius: 999px; background: #eaecf0; }
.progress-fill { width: var(--progress, 45%); height: 100%; border-radius: inherit; background: #157347; transition: width .3s ease; }
.theme-operation-progress:not([hidden]) .progress-fill { animation: theme-progress-pulse 1.2s ease-in-out infinite alternate; }
@keyframes theme-progress-pulse { from { opacity: .65; } to { opacity: 1; } }
.theme-operation-success { display: flex; gap: 12px; align-items: center; padding: 15px; border-radius: 12px; background: #ecfdf3; color: #067647; }
.theme-operation-success i { font-size: 25px; }
.theme-operation-success strong, .theme-operation-success span { display: block; }
.theme-operation-success span { margin-top: 2px; font-size: 13px; color: #027a48; }
.theme-upload-box {
  min-height: 190px;
  padding: 30px;
  border: 2px dashed #d0d5dd;
  border-radius: 15px;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  cursor: pointer;
}
.theme-upload-box.is-dragging, .theme-upload-box.has-file { border-color: #12b76a; background: #f0fdf4; }
.theme-upload-box > i { color: #157347; font-size: 32px; }
.theme-upload-box span { color: #667085; font-size: 13px; }
.theme-upload-box input { display: none; }
.theme-selected-file { margin-top: 12px; padding: 11px 13px; border: 1px solid #eaecf0; border-radius: 10px; display: flex; align-items: center; gap: 10px; }
.theme-selected-file i { color: #157347; font-size: 22px; }
.theme-selected-file span, .theme-selected-file small { display: block; }
.theme-selected-file small { color: #667085; }
.theme-validation-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; }
.theme-validation-list > div { display: flex; align-items: center; gap: 7px; color: #98a2b3; font-size: 13px; }
.theme-validation-list > div.passed { color: #067647; }

@media (max-width: 1180px) {
  .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-toolbar { align-items: stretch; flex-direction: column; }
  .theme-filters { flex-wrap: wrap; }
}

@media (max-width: 760px) {
  .theme-manager-page { margin: -16px; padding: 24px 16px 40px; }
  .theme-header, .active-theme-banner { flex-direction: column; align-items: stretch; }
  .theme-header-actions, .active-theme-actions { width: 100%; }
  .theme-header-actions .theme-btn, .active-theme-actions .theme-btn { flex: 1; }
  .theme-grid { grid-template-columns: 1fr; }
  .theme-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .theme-search { grid-column: 1 / -1; }
  .theme-select { width: 100%; }
}

@media (max-width: 520px) {
  .theme-header-actions, .active-theme-actions, .theme-actions, .theme-modal-footer { flex-direction: column; }
  .theme-filters { grid-template-columns: 1fr; }
  .theme-search { grid-column: auto; min-width: 0; }
  .theme-validation-list { grid-template-columns: 1fr; }
  .theme-actions .more-menu { width: 100%; }
}

@media (max-width: 960px) {

@media (max-width: 600px) {
  .cms-modal .theme-manager-grid {
    grid-template-columns: 1fr;
  }
}

.editor-meta-row .small {
  color: var(--legacy-color-6b7280);
  font-size: var(--text-xs);
}

.editor-page-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.editor-page-actions .icon-only-btn {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  font-size: var(--text-base);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.editor-topbar-btn {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  width: auto;
}

.editor-heading-shell {
  margin: 0 !important;
  padding: 0 !important;
}

#pageStatus {
  display: none !important;
  margin: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.editor-page-actions button.secondary {
  background: var(--color-slate-50);
  border: 1px solid var(--legacy-color-d1d5db);
}

.editor-page-actions button.primary {
  background: linear-gradient(180deg, var(--legacy-color-2563eb) 0%, var(--legacy-color-1d4ed8) 100%);
  color: var(--color-card);
  box-shadow: 0 2px 8px var(--legacy-rgba-1d5e96a5e3);
}

.editor-page-actions button:hover {
  transform: translateY(-1px);
}

.page-editor-wrap {
  padding: 6px;
  border-color: var(--legacy-color-e5e7eb);
  border-radius: 12px;
  box-shadow: 0 1px 3px var(--legacy-rgba-c28d776ff9);
}

.page-editor-wrap input,
.page-editor-wrap select,
.page-editor-wrap button {
  height: 30px;
  min-height: 30px;
  padding: 0 9px;
  font-size: var(--text-sm);
  border-radius: 8px;
}

.page-editor-wrap textarea {
  min-height: 88px;
  padding: 8px 9px;
  font-size: var(--text-sm);
  border-radius: 8px;
}

.editor-top-nav {
  grid-template-columns: minmax(0, 1fr) 280px;
  margin-bottom: 4px;
}

.health-strip.health-strip-side {
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 12px;
  padding: 10px 12px;
  grid-template-columns: 1fr;
  gap: 8px;
  background: linear-gradient(180deg, var(--color-card) 0%, var(--color-slate-50) 100%);
}

.health-chip.health-overall {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-radius: 8px;
  border-color: var(--legacy-color-bfdbfe);
  background: var(--legacy-color-eff6ff);
  color: var(--legacy-color-1d4ed8);
  font-size: var(--text-sm);
  font-weight: 600;
  grid-column: 1 / -1;
}

.health-chip.health-overall strong {
  color: var(--legacy-color-1e3a8a);
  font-size: var(--text-md);
}

.health-score-row {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 40px 48px;
  gap: 8px;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--legacy-color-374151);
  padding: 6px 8px;
  border: 1px solid var(--legacy-color-eef2f7);
  border-radius: 8px;
  background: var(--color-slate-50);
}

.health-score-row strong {
  color: var(--legacy-color-111827);
  font-weight: 700;
  font-size: var(--text-sm);
}

.health-score-row small {
  color: var(--legacy-color-6b7280);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.health-progress {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--legacy-color-e5e7eb);
}

.health-progress > div {
  width: 0;
  height: 100%;
  transition: width 0.16s ease;
}

.health-progress > div.good {
  background: linear-gradient(90deg, var(--legacy-color-22c55e) 0%, var(--color-success) 100%);
}

.health-progress > div.warn {
  background: linear-gradient(90deg, var(--legacy-color-f59e0b) 0%, var(--color-warning) 100%);
}

.health-progress > div.bad {
  background: linear-gradient(90deg, var(--legacy-color-ef4444) 0%, var(--color-danger) 100%);
}

.editor-tabs {
  gap: 6px;
  margin-bottom: 6px;
}

  .editor-tabs-wrapper {
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid var(--legacy-color-e5e7eb);
  }

  .health-toggle-btn-compact {
    width: 100%;
    min-width: auto;
    flex-shrink: 1;
    height: 32px;
    padding: 0 10px;
    font-size: var(--text-sm);
  }
}

.editor-panel {
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 10px;
  background: var(--color-card);
}

.editor-panel.active {
  border-left: 3px solid var(--legacy-color-2563eb);
  box-shadow: 0 1px 3px var(--legacy-rgba-fb59c332bc);
}

.field-block {
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--legacy-color-eef2f7);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--color-card) 0%, var(--legacy-color-f9fafc) 100%);
}

.field-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-slate-700);
}

.builder-layout {
  grid-template-columns: 280px minmax(0, 1fr) 360px;
  gap: 8px;
}

.builder-left {
  position: sticky;
  top: 10px;
  max-height: calc(100vh - 170px);
  overflow: auto;
  border-color: var(--legacy-color-e5e7eb);
  border-radius: 12px;
  padding: 8px;
}

.builder-canvas {
  background: var(--color-slate-50);
  border-color: var(--legacy-color-e5e7eb);
  border-radius: 12px;
  padding: 8px;
}

.canvas-root {
  border-color: var(--legacy-color-e5e7eb);
  border-radius: 12px;
  background: var(--color-card);
  width: min(100%, 1320px);
  margin: 0 auto;
}

.builder-right {
  width: 360px;
  max-width: 360px;
  border-color: var(--legacy-color-e5e7eb);
  border-radius: 12px;
  padding: 8px;
  display: none;
}

.builder-right.open {
  display: grid;
}

.builder-toolbar-search {
  min-width: 180px;
  height: 32px;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 8px;
  padding: 0 10px;
  font-size: var(--text-sm);
}

.canvas-right-controls {
  margin-left: auto;
}

.canvas-item {
  border-color: var(--legacy-color-e5e7eb);
  border-radius: 12px;
  padding: 8px;
}

.builder-canvas {
  background: #E8EAED;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  overflow: auto;
  height: 100%;
  min-width: 0;
}

#canvasRoot {
  flex: 1;
  min-height: 0;
}

.canvas-shell {
  position: relative;
  min-height: 100%;
  padding: 20px 0 76px;
}

.canvas-inner {
  width: min(85%, 1500px);
  min-height: 90%;
  margin: 20px auto;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14);
  background: #FFFFFF;
  overflow: hidden;
  transition: width 300ms ease, transform 300ms ease;
  display: grid;
  gap: 6px;
  padding: 8px;
}

.builder-canvas[data-device='tablet'] .canvas-inner {
  width: min(60%, 1200px);
}

.builder-canvas[data-device='mobile'] .canvas-inner {
  width: min(35%, 520px);
}

.canvas-section {
  border: 2px solid transparent;
  border-radius: 4px;
  margin: 2px 0;
  cursor: pointer;
  position: relative;
  background: #FFFFFF;
  overflow: hidden;
}

.canvas-section:hover {
  border-color: #CBD5E1;
}

.canvas-section.selected {
  border-color: #1A6B42;
  box-shadow: 0 0 0 1px #1A6B42;
}

.canvas-section.is-hidden {
  opacity: 0.72;
}

.canvas-section-label {
  position: absolute;
  top: -1px;
  left: -1px;
  z-index: 2;
  background: #1A6B42;
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 0 0 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.canvas-section-toolbar {
  position: absolute;
  top: -1px;
  right: -1px;
  z-index: 2;
  display: none;
  background: #1A6B42;
  border-radius: 0 4px 0 0;
  overflow: hidden;
}

.canvas-section.selected .canvas-section-toolbar {
  display: flex;
}

.canvas-section-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 4px 8px;
  font-size: 10px;
  color: #FFFFFF;
  background: transparent;
  border: 0;
  border-radius: 0;
  min-width: 0;
  box-shadow: none;
}

.canvas-section-toolbar button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.canvas-section-toolbar svg {
  width: 12px;
  height: 12px;
}

.canvas-section-shell {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.canvas-section-head {
  display: grid;
  gap: 4px;
  padding-right: 80px;
}

.canvas-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.2;
}

.canvas-section-subtitle,
.canvas-section-meta {
  font-size: 10px;
  color: #64748B;
  line-height: 1.3;
}

.canvas-section-preview {
  width: 100%;
}

.canvas-section.drop-before::before,
.canvas-section.drop-after::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  background: #1A6B42;
  z-index: 3;
}

.canvas-section.drop-before::before {
  top: -3px;
}

.canvas-section.drop-after::after {
  bottom: -3px;
}

.canvas-section.drop-before::before,
.canvas-section.drop-after::after {
  box-shadow: 0 0 0 1px rgba(26, 107, 66, 0.12);
}

.canvas-zoom-bar {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: #1A1D1F;
  border-radius: 999px;
  padding: 5px 14px;
  display: flex;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 5;
}

.canvas-zoom-option {
  font-size: 11px;
  color: #94A3B8;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.canvas-zoom-option.active {
  color: #F1F5F9;
  background: #2C3034;
}

.canvas-zoom-option:hover {
  background: rgba(255, 255, 255, 0.08);
}

.canvas-zoom-option.active:hover {
  background: #2C3034;
}

.canvas-item.active {
  border-color: var(--legacy-color-e5e7eb);
  box-shadow: 0 1px 3px var(--legacy-rgba-22a296d792);
}

.canvas-item.is-hidden {
  opacity: 0.58;
}

.canvas-item-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-bottom: 6px;
  background: var(--color-card);
}

.canvas-section-title {
  font-size: var(--text-md);
  font-weight: 700;
  outline: none;
}

.section-icon-toolbar .icon-only-btn {
  width: 26px;
  min-width: 26px;
  height: 26px;
  font-size: var(--text-xs);
}

.layout-hierarchy-card {
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 12px;
  padding: 8px;
  background: var(--color-card);
  display: grid;
  gap: 8px;
}

@media (max-width: 1440px) {
  .builder-layout {
    grid-template-columns: 240px minmax(0, 1fr) 320px;
    gap: 8px;
  }

  .builder-right {
    width: 320px;
    max-width: 320px;
  }
}

.layout-hierarchy-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.layout-hierarchy-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.layout-hierarchy-stats span {
  font-size: var(--text-sm);
  color: var(--legacy-color-4b5563);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--legacy-color-e5e7eb);
  background: var(--legacy-color-f9fafb);
}

.layout-hierarchy-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.layout-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.vb-tree-preview {
  display: grid;
  gap: 8px;
}

.vb-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px dashed var(--legacy-color-d1d5db);
  border-radius: 10px;
  background: var(--legacy-color-f9fafb);
}

.vb-col {
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 10px;
  padding: 8px;
  background: var(--color-card);
  display: grid;
  gap: 8px;
  min-width: 0;
}

.vb-col.is-selected {
  border-color: var(--legacy-color-2563eb);
  box-shadow: 0 0 0 2px var(--legacy-rgba-fe3fb408d6);
}

.vb-col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  color: var(--legacy-color-6b7280);
}

.vb-row-actions {
  grid-column: 1 / -1;
  display: inline-flex;
  gap: 8px;
  justify-content: flex-end;
}

.vb-widget {
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 8px;
  padding: 8px;
  display: grid;
  gap: 4px;
  background: var(--color-card);
  position: relative;
}

.vb-widget.dragging {
  opacity: 0.6;
}

.vb-widget.drop-target,
.vb-col.drop-target {
  border-color: var(--legacy-color-2563eb);
  box-shadow: 0 0 0 2px var(--legacy-rgba-fe3fb408d6);
}

.vb-widget-tools {
  position: absolute;
  top: 6px;
  right: 6px;
  display: none;
  gap: 4px;
}

.vb-widget:hover .vb-widget-tools {
  display: inline-flex;
}

.vb-widget-tools .icon-only-btn {
  width: 22px;
  min-width: 22px;
  height: 22px;
  font-size: var(--text-xs);
}

.vb-widget strong {
  font-size: var(--text-xs);
  color: var(--legacy-color-6b7280);
  text-transform: uppercase;
}

.vb-widget h5 {
  margin: 0;
  font-size: var(--text-md);
  outline: none;
}

.vb-widget p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--legacy-color-374151);
}

.editable-image-drop {
  position: relative;
}

.image-hover-actions {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.editable-image-drop:hover .image-hover-actions {
  display: grid;
}

.image-hover-actions button {
  height: 28px;
  font-size: var(--text-xs);
  padding: 0 6px;
}

.editable-image-drop.drop-target {
  outline: 2px dashed var(--legacy-color-2563eb);
  outline-offset: 2px;
}

.field-label,
.field-sub-block .small {
  font-size: var(--text-sm);
}

.field-sub-block .small {
  color: var(--legacy-color-6b7280);
  font-weight: 600;
}

.small,
.editor-breadcrumb,
.editor-slug-line,
.editor-meta-row .small {
  font-size: var(--text-sm);
}

.editor-command-palette {
  position: fixed;
  inset: 0;
  z-index: 90;
}

.editor-command-backdrop {
  position: absolute;
  inset: 0;
  background: var(--legacy-rgba-bea5bf1f91);
}

.editor-command-dialog {
  position: relative;
  width: min(720px, 94vw);
  margin: 90px auto 0;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 12px;
  background: var(--color-card);
  padding: 10px;
  box-shadow: 0 20px 50px var(--legacy-rgba-95d05dce9a);
}

.editor-command-dialog input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--legacy-color-e5e7eb);
  border-radius: 10px;
  padding: 0 12px;
  margin-bottom: 8px;
}

.editor-command-results {
  display: grid;
  gap: 6px;
  max-height: 340px;
  overflow: auto;
}

.editor-command-results button {
  display: grid;
  justify-items: start;
  gap: 2px;
  text-align: left;
}

@media (max-width: 960px) {
  .editor-page-header {
    grid-template-columns: 1fr;
    position: static;
    top: auto;
    box-shadow: none;
  }

  .editor-top-nav {
    grid-template-columns: 1fr;
  }

  .builder-layout {
    grid-template-columns: 1fr;
  }

  .builder-right {
    width: auto;
    max-width: none;
  }

  .layout-grid-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .ops-btn-icon {
    min-width: 22px;
    height: 16px;
    font-size: var(--text-xs);
  }

  #opsQuickStatus {
    display: none;
  }

  .ops-layout {
    grid-template-columns: 1fr;
  }

  .gs-layout {
    grid-template-columns: 1fr;
  }

  .gs-menu {
    position: static;
    justify-content: flex-start;
    max-height: none;
  }

  .gs-grid-3 {
    grid-template-columns: 1fr;
  }

  .ops-menu {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ops-grid-2,
  .ops-grid-3,
  .ops-grid-4,
  .ops-toggle-grid,
  .ops-metrics,
  .ops-recommendations,
  .ops-health-list {
    grid-template-columns: 1fr;
  }

  .ops-header {
    flex-direction: column;
  }
}



/* -- Theme Page Editor (Shopify-style 3-panel) ------------------------------- */

.tpe-shell {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 58px);
  overflow: hidden;
  background: var(--color-slate-100);
}

/* -- Topbar -------------------------------------------------------------------- */
.tpe-topbar {
  display: flex;
  align-items: center;
  height: 54px;
  padding: 0 12px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 0;
  justify-content: space-between;
}
.tpe-topbar-left  { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.tpe-topbar-center { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.tpe-topbar-right { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: flex-end; }

.tpe-back-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  background: none; border: 1px solid var(--border);
  cursor: pointer; color: var(--ink); flex-shrink: 0;
  transform: rotate(180deg);
  transition: background .15s;
}
.tpe-back-btn:hover { background: var(--background); }

.tpe-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  background: none; border: 1px solid var(--border);
  cursor: pointer; color: var(--muted); text-decoration: none;
  transition: background .15s, color .15s;
}
.tpe-icon-btn:hover { background: var(--background); color: var(--ink); }
.tpe-icon-btn.tpe-active { background: var(--legacy-color-eff6ff); color: var(--legacy-color-2563eb); border-color: var(--legacy-color-2563eb); }

.tpe-page-title {
  font-weight: 700;
  font-size: var(--text-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.tpe-status-pill {
  flex-shrink: 0;
  font-size: var(--text-xs);
}

/* Device switcher */
.tpe-devices {
  display: flex;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.tpe-device-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 7px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  transition: background .15s, color .15s;
}
.tpe-device-btn:hover { color: var(--ink); }
.tpe-device-btn.active {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 4px var(--legacy-rgba-9e6faaf3f9);
}

.tpe-save-status { color: var(--muted); white-space: nowrap; font-size: var(--text-sm); }
.tpe-save-status.ok  { color: var(--color-success); }
.tpe-save-status.err { color: var(--color-danger); }

.tpe-publish-btn {
  background: var(--legacy-color-2563eb);
  color: var(--color-card);
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: opacity .15s;
  white-space: nowrap;
}
.tpe-publish-btn:hover { opacity: .88; }

/* -- Builder body -------------------------------------------------------------- */
.tpe-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* -- Left panel ---------------------------------------------------------------- */
.tpe-left {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-right: 1px solid var(--border);
  overflow: hidden;
  transition: width .2s ease, opacity .2s ease;
}
.tpe-left.tpe-left-hidden {
  width: 0;
  opacity: 0;
  pointer-events: none;
}
.tpe-left-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.tpe-add-inline-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s;
}
.tpe-add-inline-btn:hover { background: var(--background); }

.tpe-section-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}
.tpe-section-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 9px;
  cursor: pointer;
  transition: background .12s;
  border: 1.5px solid transparent;
  margin-bottom: 3px;
  position: relative;
}
.tpe-section-item:hover { background: var(--background); }
.tpe-section-item.active {
  background: var(--legacy-color-eff6ff);
  border-color: var(--legacy-color-2563eb);
}
.tpe-section-item-drag {
  color: var(--color-slate-300);
  font-size: var(--text-md);
  cursor: grab;
  flex-shrink: 0;
  user-select: none;
}
.tpe-section-item-info { flex: 1; min-width: 0; }
.tpe-section-item-info strong {
  display: block;
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tpe-section-item-info span { font-size: var(--text-xs); color: var(--muted); }
.tpe-section-item-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity .12s;
  flex-shrink: 0;
}
.tpe-section-item:hover .tpe-section-item-actions,
.tpe-section-item.active .tpe-section-item-actions { opacity: 1; }
.tpe-section-item-actions .icon-only-btn.danger {
  background: transparent;
  border-color: #E2E8F0;
  color: #64748B;
}
.tpe-section-item-actions .icon-only-btn.danger:hover {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #DC2626;
}

/* -- Canvas (iframe center) ---------------------------------------------------- */
.tpe-canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-slate-200);
  position: relative;
}
.tpe-canvas-bg {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.tpe-iframe {
  border: none;
  display: block;
  background: var(--color-card);
  transition: width .3s ease, max-width .3s ease, box-shadow .3s ease;
  width: 100%;
  min-width: 0;
  height: 100%;
}
.tpe-iframe[data-device="mobile"] {
  width: min(390px, 100%);
  max-width: 390px;
  box-shadow: 0 0 0 1px var(--color-slate-300), 0 8px 40px var(--legacy-rgba-b41805d683);
}
.tpe-iframe[data-device="tablet"] {
  width: min(768px, 100%);
  max-width: 768px;
  box-shadow: 0 0 0 1px var(--color-slate-300), 0 8px 40px var(--legacy-rgba-a6f87266b2);
}
.tpe-iframe[data-device="desktop"] {
  max-width: 100%;
}

.tpe-iframe-loading {
  position: absolute;
  inset: 0;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.tpe-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: var(--text-base);
}
.tpe-loading-spin {
  width: 32px; height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--legacy-color-2563eb);
  border-radius: 50%;
  animation: tpe-spin .8s linear infinite;
}
@keyframes tpe-spin { to { transform: rotate(360deg); } }

/* -- Right panel (floating overlay) ------------------------------------------- */
.tpe-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 360px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px var(--legacy-rgba-b8e23438dc);
  z-index: 20;
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.tpe-right.open { transform: translateX(0); }

.tpe-right-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tpe-right-section-info { display: flex; flex-direction: column; gap: 2px; }
.tpe-right-section-type {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #1A6B42;
  background: #F0FDF4;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
#tpeRightTitle {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--ink);
}

.tpe-right-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tpe-tab {
  flex: 1;
  width: auto;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 4px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  box-shadow: none;
  transition: color .15s, border-color .15s;
  text-align: center;
}
.tpe-tab.active { color: var(--legacy-color-2563eb); border-bottom-color: var(--legacy-color-2563eb); }
.tpe-tab:hover:not(.active) { color: var(--ink); }

.tpe-right-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tpe-field { margin-bottom: 0; }

/* -- Add Section modal --------------------------------------------------------- */
.tpe-add-modal {
  position: fixed;
  inset: 0;
  background: var(--legacy-rgba-e38f8a1614);
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.tpe-add-modal[hidden] { display: none; }
.tpe-add-modal-inner {
  background: var(--card);
  border-radius: 20px;
  padding: 22px;
  width: 100%;
  max-width: 640px;
  max-height: 82vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px var(--legacy-rgba-0845b805b7);
}
.tpe-add-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}
.tpe-add-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.tpe-add-type-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.tpe-add-type-btn:hover {
  border-color: var(--legacy-color-2563eb);
  background: var(--legacy-color-eff6ff);
  box-shadow: 0 2px 10px var(--legacy-rgba-53f7bd145a);
}
.tpe-type-icon { font-size: var(--text-xl); flex-shrink: 0; }
.tpe-type-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tpe-type-info strong { font-size: var(--text-sm); color: var(--ink); }
.tpe-type-info .small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* -- Starter templates --------------------------------------------------------- */
.tpe-starter-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: var(--text-sm);
  text-align: left;
  transition: border-color .15s, background .15s;
}
.tpe-starter-btn:hover { border-color: var(--legacy-color-2563eb); background: var(--legacy-color-eff6ff); }
.tpe-starter-btn strong { color: var(--ink); }

/* -- Inline Builder panel (inside page editor) ------------------------------- */
.editor-builder-panel {
  display: none;
  grid-column: 1 / -1;
  height: calc(100vh - 180px);
  min-height: 500px;
  padding: 0;
  overflow: hidden;
  border-top: 1px solid var(--border);
}
.editor-builder-panel.active { display: flex; }

.eb-shell {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.eb-left {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
}
.eb-left-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  height: 44px;
  flex-shrink: 0;
}
.eb-left-head > span {
  white-space: nowrap;
}
.eb-center {
  flex: 1;
  overflow: hidden;
  background: var(--color-slate-200);
  display: flex;
  align-items: stretch;
}
.eb-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: var(--color-card);
}
.builder-canvas {
  background: #E8EAED;
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  position: relative;
}
.canvas-frame {
  background: #FFFFFF;
  width: 85%;
  min-height: 400px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  overflow: hidden;
}
.canvas-section-block {
  padding: 16px 20px;
  border-bottom: 1px solid #F1F5F9;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.canvas-section-block:hover {
  background: #F8FAFC;
  border-left-color: #CBD5E1;
}
.canvas-section-block.selected {
  background: #F0FDF4;
  border-left-color: #1A6B42;
}
.canvas-section-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94A3B8;
  margin-bottom: 3px;
}
.canvas-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #0F172A;
}
.eb-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 340px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 20px var(--legacy-rgba-b8e23438dc);
  z-index: 20;
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.eb-right.open { transform: translateX(0); }
.eb-right-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* ─── Canvas scaler / zoom ─── */
.canvas-scaler {
  width: 100%;
  transform-origin: top center;
  transition: transform 200ms ease;
}
.canvas-zoom-bar {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: #1A1D1F;
  border-radius: 999px;
  padding: 5px 14px;
  display: flex;
  gap: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 10;
  pointer-events: auto;
}
.canvas-zoom-btn {
  font-size: 11px;
  color: #94A3B8;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  width: auto;
  min-width: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  white-space: nowrap;
}
.canvas-zoom-btn:hover:not(.active) { color: #F1F5F9; }
.canvas-zoom-btn.active {
  color: #F1F5F9;
  background: #2C3034;
}

/* ─── Canvas section blocks (new structured previews) ─── */
.canvas-section {
  border: 2px solid transparent;
  border-radius: 4px;
  margin: 3px 0;
  cursor: pointer;
  position: relative;
  transition: border-color 150ms;
}
.canvas-section:hover { border-color: #CBD5E1; }
.canvas-section.selected {
  border-color: #1A6B42;
  box-shadow: 0 0 0 1px #1A6B42;
}
.canvas-section-tag {
  position: absolute;
  top: -1px;
  left: -1px;
  background: #1A6B42;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 0 0 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  z-index: 2;
  white-space: nowrap;
}
.canvas-section-toolbar {
  position: absolute;
  top: -1px;
  right: -1px;
  background: #1A6B42;
  border-radius: 0 4px 0 0;
  display: flex;
  z-index: 2;
}
.canvas-toolbar-btn {
  padding: 3px 8px;
  font-size: 11px;
  color: #fff;
  background: transparent;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  width: auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
}
.canvas-toolbar-btn:hover { background: rgba(255,255,255,0.15); }
.canvas-toolbar-btn i { font-size: 11px; }
.canvas-toolbar-del:hover { background: rgba(220,38,38,0.4); }
.csb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  color: #CBD5E1;
}
.csb-empty i { font-size: 32px; }
.csb-empty p { font-size: 13px; margin: 0; }

/* Canvas section preview components */
.csb-section { padding: 20px 24px; }
.csb-hero {
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: center;
  background: linear-gradient(135deg, #0F172A 0%, #1A6B42 100%);
}
.csb-hero-body { flex: 1; min-width: 0; }
.csb-cta {
  padding: 28px 24px;
  background: linear-gradient(135deg, #F0FDF4, #DCFCE7);
  text-align: center;
}
.csb-h {
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.csb-hero .csb-h,
.csb-hero .csb-line { color: #fff; }
.csb-cta .csb-h { font-size: 15px; }
.csb-line {
  background: #E2E8F0;
  border-radius: 3px;
  margin-bottom: 6px;
}
.csb-hero .csb-line { background: rgba(255,255,255,0.3); }
.csb-h-line { height: 12px; width: 55%; }
.csb-p-line { height: 8px; width: 85%; }
.csb-s-line { height: 10px; width: 70%; margin-bottom: 4px; }
.csb-xs-line { height: 8px; width: 55%; }
.csb-input { height: 28px; width: 100%; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 5px; margin-bottom: 8px; }
.csb-mx { margin-left: auto; margin-right: auto; }
.csb-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.csb-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 12px;
}
.csb-card-primary {
  background: #F0FDF4;
  border-color: #1A6B42;
}
.csb-center { text-align: center; }
.csb-card.csb-center { align-items: center; display: flex; flex-direction: column; }
.csb-icon {
  width: 28px;
  height: 28px;
  background: #E2E8F0;
  border-radius: 6px;
  margin-bottom: 8px;
}
.csb-avatar {
  width: 44px;
  height: 44px;
  background: #E2E8F0;
  border-radius: 50%;
  margin: 0 auto 8px;
}
.csb-avatar-sm {
  width: 28px;
  height: 28px;
  background: #E2E8F0;
  border-radius: 50%;
  flex-shrink: 0;
}
.csb-img {
  flex-shrink: 0;
  width: 120px;
  height: 80px;
  background: rgba(255,255,255,0.15);
  border-radius: 6px;
}
.csb-img-sq {
  width: 100%;
  aspect-ratio: 4/3;
  background: #E2E8F0;
  border-radius: 6px;
  height: auto;
}
.csb-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.csb-row.csb-center { justify-content: center; }
.csb-btn {
  height: 28px;
  width: 80px;
  background: #1A6B42;
  border-radius: 5px;
}
.csb-btn-full { width: 100%; }
.csb-form { margin-top: 12px; }
.csb-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.csb-author {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.csb-price {
  margin: 8px 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ─── EB right panel footer / empty state ─── */
.eb-right-footer {
  padding: 10px 14px;
  border-top: 1px solid #E2E8F0;
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.eb-section-discard {
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 12px;
  color: #64748B;
  background: transparent;
  box-shadow: none;
  width: auto;
  min-width: 0;
}
.eb-section-discard:hover { background: #F1F5F9; }
.eb-section-save {
  flex: 1;
  background: #1A6B42;
  color: #FFFFFF;
  border-radius: 6px;
  padding: 7px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  width: auto;
  min-width: 0;
  box-shadow: none;
}
.eb-section-save:hover { background: #155534; }
.eb-right-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  color: #CBD5E1;
}
.eb-right-empty i { font-size: 32px; }
.eb-right-empty p { font-size: 13px; color: #94A3B8; margin: 0; }

/* Builder tab highlight */
.editor-tab-builder {
  background: var(--legacy-color-eff6ff) !important;
  color: var(--legacy-color-2563eb) !important;
  border-color: var(--legacy-color-93c5fd) !important;
  font-weight: 700 !important;
}
.editor-tab-builder.active {
  background: var(--legacy-color-2563eb) !important;
  color: var(--color-card) !important;
  border-color: var(--legacy-color-2563eb) !important;
}

/* Table muted cell */
.muted-cell { color: var(--muted); font-size: var(--text-sm); }

/* -- Shared Section Field Styles (sf-*) -------------------------------------- */

.sf-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.sf-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sf-counter {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--muted);
}

/* URL field */
.sf-url-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--card);
}
.sf-url-icon {
  padding: 0 8px;
  color: var(--muted);
  font-size: var(--text-base);
  background: var(--background);
  border-right: 1px solid var(--border);
  height: 36px;
  display: flex;
  align-items: center;
}
.sf-url-wrap input {
  border: none;
  border-radius: 0;
  flex: 1;
  padding: 8px 10px;
  font-size: var(--text-sm);
}
.sf-url-wrap input:focus { outline: none; }

/* Image field */
.sf-image-field { margin-bottom: 14px; }
.sf-image-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--background);
}
.sf-image-thumb {
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  display: block;
}
.sf-image-empty {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: var(--text-sm);
  background: var(--background);
}
.sf-image-actions {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sf-media-pick-btn {
  font-size: var(--text-sm);
  padding: 6px 10px;
  width: 100%;
}
.sf-image-url {
  font-size: var(--text-sm);
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 100%;
}

/* Select */
.sf-field select {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: var(--text-sm);
  background: var(--card);
  cursor: pointer;
}

/* Repeater */
.sf-repeater { margin-bottom: 4px; }
.sf-repeater-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.sf-repeater-add {
  font-size: var(--text-sm);
  padding: 4px 10px;
}
.sf-repeater-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sf-repeater-empty {
  color: var(--muted);
  padding: 10px 0;
  text-align: center;
}
.sf-repeater-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
}
.sf-repeater-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px 2px 2px;
  gap: 6px;
  background: var(--background);
}
.sf-repeater-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  padding: 8px 8px;
  cursor: pointer;
  flex: 1;
  text-align: left;
  font-size: var(--text-sm);
  color: var(--ink);
  min-width: 0;
}
.sf-repeater-arrow {
  color: var(--muted);
  font-size: var(--text-xs);
  flex-shrink: 0;
}
.sf-repeater-preview {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sf-repeater-item-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.sf-repeater-item-actions .icon-only-btn {
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 0;
  font-size: 13px;
}
.sf-repeater-item-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 10px 10px 4px;
  border-top: 1px solid var(--border);
}
.sf-repeater-item-body .sf-field:last-child { margin-bottom: 6px; }

/* Media library picker modal grid */
.sf-media-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
}
.sf-media-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--background);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  cursor: pointer;
  transition: border-color .15s;
  overflow: hidden;
}
.sf-media-item:hover { border-color: var(--legacy-color-2563eb); }
.sf-media-item img {
  width: 100%;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
}
.sf-media-item span {
  font-size: var(--text-xs);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
}
.sf-media-icon {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  width: 100%;
}

/* Blog list refresh */
.blog-manager {
  --blog-bg: var(--background);
  --blog-surface: var(--card);
  --blog-surface-2: var(--legacy-color-f8f7f5);
  --blog-border: var(--border);
  --blog-text: var(--ink);
  --blog-muted: var(--muted);
  --blog-accent: var(--legacy-color-2563eb);
  --blog-ok: var(--legacy-color-15803d);
  --blog-warn: var(--color-warning);
  --blog-bad: var(--legacy-color-b91c1c);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.blog-manager-main {
  min-width: 0;
}

.blog-manager.editor-open {
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
}

.blog-manager-title h2,
.blog-editor-head h2,
.blog-category-page h2 {
  margin: 0;
  color: var(--blog-text);
  letter-spacing: 0;
}

.blog-manager-title {
  display: grid;
  gap: 4px;
}

.blog-manager-title h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-2xl);
}

.blog-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--blog-border);
  border-radius: 999px;
  background: var(--blog-surface-2);
  color: var(--blog-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.blog-head-actions,
.blog-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.blog-head-actions {
  justify-content: flex-end;
}

.blog-head-actions > button,
.blog-view-switcher button,
.blog-filters > button {
  width: auto;
  min-width: 0;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
}

.blog-category-action {
  border: 1px solid var(--blog-border);
  background: var(--blog-surface);
  color: var(--blog-text);
}

.blog-head-actions > button.secondary,
.blog-view-switcher button.secondary,
.blog-filters > button.secondary {
  background: var(--blog-surface);
  border-color: var(--blog-border);
  color: var(--blog-text);
}

.blog-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.blog-stats > div {
  border: 1px solid var(--blog-border);
  border-radius: 12px;
  background: var(--blog-surface);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}

.blog-stats > div::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: transparent;
}

.blog-stats > div:nth-child(4)::before {
  background: var(--blog-accent);
}

.blog-stats strong {
  display: block;
  margin-bottom: 4px;
  color: var(--blog-text);
  font-size: var(--text-xl);
  line-height: 1;
}

.blog-stats span {
  color: var(--blog-muted);
  font-size: var(--text-sm);
}

.blog-filters {
  padding: 12px;
  border: 1px solid var(--blog-border);
  border-radius: 12px;
  background: var(--blog-surface);
  align-items: center;
}

.blog-search,
.blog-filters select {
  height: 36px;
}

.blog-search {
  flex: 1 1 200px;
  min-width: 200px;
  position: relative;
}

.blog-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  color: var(--blog-muted);
  pointer-events: none;
}

.blog-search input {
  padding-left: 36px;
}

.blog-filters select {
  width: 160px;
  flex: 0 0 160px;
  height: 36px;
  border-radius: 8px;
}

.blog-view-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border: 1px solid var(--blog-border);
  border-radius: 8px;
  background: var(--blog-surface-2);
  overflow: hidden;
}

.blog-view-switcher button {
  min-width: 72px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.blog-view-switcher button + button {
  border-left: 1px solid var(--blog-border);
}

.blog-table-wrap {
  border: 1px solid var(--blog-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--blog-surface);
}

.blog-table {
  width: 100%;
  table-layout: fixed;
}

.blog-table thead th {
  padding: 13px 12px;
  border-bottom: 1px solid var(--blog-border);
  color: var(--blog-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.blog-sort {
  cursor: pointer;
  user-select: none;
}

.blog-table tbody tr {
  cursor: pointer;
}

.blog-table tbody tr:hover {
  background: var(--legacy-color-f8f8f8);
  box-shadow: inset 3px 0 0 var(--blog-accent);
}

.blog-table tbody tr.is-selected {
  background: var(--legacy-color-eff6ff);
  box-shadow: inset 3px 0 0 var(--blog-accent);
}

.blog-table td {
  padding: 12px;
  border-bottom: 1px solid var(--blog-border);
  vertical-align: middle;
}

.blog-title-cell {
  max-width: 290px;
}

.blog-title-cell strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blog-title-cell small {
  display: block;
  margin-top: 2px;
}

.blog-table td:nth-child(2) strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--blog-text);
}

.blog-table td:nth-child(2) small {
  display: block;
  margin-top: 3px;
  color: var(--blog-muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--text-xs);
}

.blog-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.blog-row-actions button,
.blog-close-btn {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  opacity: .4;
  transition: opacity .15s ease, background-color .15s ease, border-color .15s ease;
}

.blog-row-actions button:hover,
.blog-table tbody tr:hover .blog-row-actions button,
.blog-table tbody tr.is-selected .blog-row-actions button,
.blog-close-btn:hover {
  opacity: 1;
}

.blog-row-actions button svg,
.blog-close-btn svg {
  width: 14px;
  height: 14px;
}

.blog-editor-panel {
  width: 300px;
  min-width: 300px;
  border: 1px solid var(--blog-border);
  border-radius: 12px;
  background: var(--blog-surface);
  overflow: hidden;
}

.blog-editor-head,
.blog-category-page .blog-manager-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--blog-border);
  background: var(--blog-surface);
}

.blog-editor-title h2 {
  font-size: var(--text-lg);
}

.blog-editor-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.blog-editor-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 12px 0;
}

.blog-editor-tabs button {
  width: auto;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px 8px 0 0;
  background: var(--blog-surface-2);
  color: var(--blog-muted);
}

.blog-editor-tabs button.active {
  background: var(--blog-surface);
  color: var(--blog-text);
  border-bottom: 1px solid var(--blog-surface);
}

#blogEditorForm {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.blog-editor-body {
  max-height: calc(100vh - 240px);
  overflow: auto;
  padding: 16px;
}

.blog-editor-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--blog-border);
  background: var(--blog-surface);
}

.blog-editor-footer .small {
  margin-right: auto;
}

.blog-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.blog-form-grid .field-block-full {
  grid-column: 1 / -1;
}

.blog-category-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.blog-category-field button {
  width: auto;
  padding: 0 10px;
  white-space: nowrap;
}

.blog-seo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.blog-score-summary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blog-seo-ring {
  --size: 62px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(closest-side, var(--blog-surface) 76%, transparent 77% 100%),
    conic-gradient(currentColor calc(var(--score) * 1%), var(--legacy-color-e7e5e4) 0);
  color: var(--blog-accent);
}

.blog-seo-ring.good { color: var(--blog-ok); }
.blog-seo-ring.warn { color: var(--blog-warn); }
.blog-seo-ring.bad { color: var(--blog-bad); }
.blog-seo-ring.neutral {
  color: var(--legacy-color-8c8878);
}

.blog-seo-ring.neutral {
  background:
    radial-gradient(closest-side, var(--blog-surface) 76%, transparent 77% 100%),
    conic-gradient(var(--legacy-color-d3d1c7) calc(var(--score) * 1%), var(--legacy-color-d3d1c7) 0);
}

.blog-seo-ring.neutral strong {
  color: var(--legacy-color-8c8878);
}

.blog-seo-checklist {
  display: grid;
  gap: 6px;
}

.blog-seo-checklist > div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--blog-border);
  border-radius: 8px;
  background: var(--blog-surface);
}

.blog-social-preview {
  padding-top: 16px;
  border-top: 1px solid var(--blog-border);
}

.blog-social-card,
.blog-category-form,
.blog-category-master {
  border: 1px solid var(--blog-border);
  border-radius: 12px;
  background: var(--blog-surface);
}

.blog-category-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 16px;
}

.blog-category-form {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.blog-category-master-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--blog-border);
}

.blog-category-master .table {
  margin: 0;
}

.blog-bulk-bar {
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--blog-border);
  border-radius: 12px;
  background: var(--blog-surface);
}

.blog-bulk-bar button {
  width: auto;
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
}

.blog-bulk-bar .danger {
  background: var(--legacy-color-fff5f5);
  border-color: var(--legacy-color-f3b9b9);
  color: var(--legacy-color-b42318);
}

@media (max-width: 1100px) {
  .blog-manager.editor-open {
    grid-template-columns: 1fr;
  }

  .blog-editor-panel {
    width: 100%;
    min-width: 0;
  }
}

/* Page builder section list: Plan A, Task 2 */
.editor-fullscreen .section-list-panel {
  height: 100%;
  min-height: 0;
  background: #FAFAFA;
  border-right: 1px solid #E2E8F0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.editor-fullscreen .slp-header {
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 10px 12px;
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #FAFAFA;
}

.editor-fullscreen .slp-header > span {
  min-width: 0;
  color: #64748B;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.editor-fullscreen .slp-add {
  width: auto;
  min-width: 0;
  height: 26px;
  min-height: 26px;
  padding: 4px 10px;
  border: 1px solid #1A6B42;
  border-radius: 5px;
  background: #1A6B42;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  box-shadow: none;
}

.editor-fullscreen .slp-add:hover {
  border-color: #155C38;
  background: #155C38;
}

.editor-fullscreen .slp-add i {
  font-size: 11px;
}

.editor-fullscreen .slp-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 8px;
}

.editor-fullscreen .section-item {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 8px 10px;
  border: 1px solid #E2E8F0;
  border-radius: 7px;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.editor-fullscreen .section-item:hover {
  border-color: #CBD5E1;
  background: #F8FAFC;
}

.editor-fullscreen .section-item.selected {
  border-color: #1A6B42;
  background: #F0FDF4;
  box-shadow: 0 0 0 2px rgba(26, 107, 66, 0.12);
}

.editor-fullscreen .section-item.dragging {
  opacity: 0.55;
}

.editor-fullscreen .section-item-drag {
  width: 14px;
  min-width: 14px;
  height: 20px;
  color: #CBD5E1;
  cursor: grab;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.editor-fullscreen .section-item-drag:active {
  cursor: grabbing;
}

.editor-fullscreen .section-item-drag i {
  font-size: 14px;
  pointer-events: none;
}

.editor-fullscreen .section-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.editor-fullscreen .section-item-content strong,
.editor-fullscreen .section-item-content span {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-fullscreen .section-item-content strong {
  color: #0F172A;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.editor-fullscreen .section-item-content span {
  margin-top: 1px;
  color: #94A3B8;
  font-size: 10px;
  line-height: 13px;
}

.editor-fullscreen .section-item-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.editor-fullscreen .section-item:hover .section-item-actions,
.editor-fullscreen .section-item.selected .section-item-actions {
  opacity: 1;
  pointer-events: auto;
}

.editor-fullscreen .section-item-action {
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #64748B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.editor-fullscreen .section-item-action i {
  font-size: 12px;
}

.editor-fullscreen .section-item-action:hover {
  background: #E2E8F0;
  color: #334155;
}

.editor-fullscreen .section-item-action.delete:hover {
  background: #FEF2F2;
  color: #DC2626;
}

.editor-fullscreen .section-item.drop-before::before,
.editor-fullscreen .section-item.drop-after::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  height: 2px;
  border-radius: 999px;
  background: #1A6B42;
  z-index: 3;
  pointer-events: none;
}

.editor-fullscreen .section-item.drop-before::before {
  top: -4px;
}

.editor-fullscreen .section-item.drop-after::after {
  bottom: -4px;
}

.editor-fullscreen .section-item.drop-before .section-item-drag::before,
.editor-fullscreen .section-item.drop-after .section-item-drag::after {
  content: "";
  position: absolute;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1A6B42;
  z-index: 4;
  pointer-events: none;
}

.editor-fullscreen .section-item.drop-before .section-item-drag::before {
  top: -6px;
}

.editor-fullscreen .section-item.drop-after .section-item-drag::after {
  bottom: -6px;
}

@media (max-width: 900px) {
  .blog-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-filters {
    flex-wrap: wrap;
  }

  .blog-search {
    order: 0;
    min-width: 100%;
  }

  .blog-category-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .blog-head-actions,
  .blog-view-switcher {
    flex-wrap: wrap;
  }

  .blog-view-switcher button,
  .blog-row-actions button {
    min-width: 26px;
    width: 26px;
    padding: 0;
    font-size: 0;
  }

  .blog-form-grid,
  .blog-stats {
    grid-template-columns: 1fr;
  }
}

/* Blog module v2 */
.blog-manager {
  display: block;
  min-height: 0;
  background: var(--color-card);
}

.blog-manager-main,
.blog-editor-page,
.blog-category-page {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
}

.blog-manager-head,
.blog-category-page .blog-manager-head,
.blog-editor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.blog-manager-head h2 {
  font-size: var(--text-xl);
}

.blog-manager-title p,
.blog-category-page p,
.blog-editor-topbar,
.blog-manager-status {
  color: var(--blog-muted);
}

.blog-manager-title p {
  margin: 4px 0 0;
}

.blog-head-actions > button,
.blog-filters > button,
.blog-view-switcher button,
.blog-bulk-bar button,
.blog-editor-top-actions button,
.blog-generate-btn,
.blog-import-stack button {
  height: 36px;
  width: auto;
  min-width: 0;
  padding: 0 12px;
  border-radius: 8px;
}

.blog-stats {
  gap: 10px;
}

.blog-stats > div {
  padding: 14px 16px;
  border: 0.5px solid var(--blog-border);
}

.blog-stats strong {
  font-size: var(--text-xl);
}

.blog-filters {
  gap: 10px;
}

.blog-search {
  max-width: 320px;
}

.blog-filters select {
  width: 160px;
  flex: 0 0 160px;
}

.blog-view-switcher {
  display: inline-flex;
  overflow: hidden;
  border-radius: 8px;
  border: 0.5px solid var(--blog-border);
}

.blog-view-switcher button {
  min-width: 74px;
  border: 0;
  border-radius: 0;
}

.blog-view-switcher button + button {
  border-left: 0.5px solid var(--blog-border);
}

.blog-view-switcher button.active {
  background: var(--legacy-color-eff3ff);
}

.blog-category-action {
  border: 0.5px solid var(--blog-border);
}

.blog-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}

.blog-bulk-bar strong {
  margin-right: auto;
}

.blog-table-wrap {
  border: 0.5px solid var(--blog-border);
  border-radius: 12px;
}

.blog-table thead th {
  border-bottom: 0.5px solid var(--blog-border);
  color: var(--legacy-color-7a7a7a);
}

.blog-title-cell {
  max-width: 320px;
}

.blog-title-cell strong {
  font-size: var(--text-sm);
  font-weight: 600;
}

.blog-title-cell small {
  margin-top: 2px;
}

.blog-row-actions button {
  opacity: .4;
  width: 28px;
  min-width: 28px;
  height: 28px;
}

.blog-table tbody tr:hover {
  background: var(--legacy-color-f8f8f8);
  box-shadow: inset 3px 0 0 var(--blog-accent);
}

.blog-table tbody tr:hover .blog-row-actions button,
.blog-table tbody tr.is-selected .blog-row-actions button {
  opacity: 1;
}

.blog-seo-ring.neutral {
  color: var(--legacy-color-8f8b7c);
}

.blog-editor-page {
  padding-top: 4px;
}

.blog-editor-topbar,
.blog-editor-grid {
  align-items: flex-start;
}

.blog-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 65fr) minmax(320px, 35fr);
  gap: 18px;
}

.blog-editor-maincol,
.blog-editor-sidebar {
  min-width: 0;
}

.blog-editor-maincol {
  display: grid;
  gap: 14px;
}

.blog-title-input input {
  height: 52px;
  font-size: var(--text-2xl);
  border: 0;
  padding-left: 0;
  padding-right: 0;
  box-shadow: none;
}

.blog-slug-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.blog-slug-prefix {
  color: var(--blog-muted);
  font-size: var(--text-sm);
}

.blog-editor-tabs {
  padding: 0;
  gap: 18px;
  border-bottom: 0.5px solid var(--blog-border);
}

.blog-editor-tabs button {
  min-width: 0;
  padding: 0 0 12px;
  border: 0;
  background: transparent;
}

.blog-editor-tabs button.active {
  box-shadow: inset 0 -2px 0 var(--blog-accent);
}

.blog-toolbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.blog-rich-editor {
  min-height: 400px;
}

.blog-seo-layout {
  display: grid;
  gap: 16px;
}

.blog-score-summary {
  align-items: center;
}

.blog-seo-ring {
  --size: 64px;
}

.blog-seo-checklist > div {
  align-items: center;
}

.blog-section-item {
  display: grid;
  grid-template-columns: 18px 160px minmax(0, 1fr) 28px;
  gap: 8px;
}

.blog-drag-handle {
  color: var(--blog-muted);
  line-height: 1;
  padding-top: 8px;
}

.blog-add-section {
  width: auto;
  margin-top: 10px;
}

.blog-settings-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.blog-toggle-list,
.blog-import-stack {
  display: grid;
  gap: 8px;
}

.blog-import-stack button {
  justify-content: flex-start;
}

.blog-accordion {
  border: 0.5px solid var(--blog-border);
  border-radius: 12px;
  margin-bottom: 12px;
}

.blog-accordion-toggle {
  width: 100%;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--color-card);
  border: 0;
  border-radius: 12px;
}

.blog-accordion-body {
  display: none;
  padding: 0 14px 14px;
}

.blog-accordion-body.open {
  display: block;
}

.blog-upload-zone {
  border: 0.5px dashed var(--blog-border);
  border-radius: 12px;
  min-height: 150px;
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  color: var(--blog-muted);
}

.blog-delete-link {
  width: auto;
  justify-self: start;
  border: 0;
  background: transparent;
  color: var(--legacy-color-b42318);
  padding: 0;
  height: auto;
}

@media (max-width: 1100px) {
  .blog-editor-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .blog-stats {
    grid-template-columns: 1fr 1fr;
  }

  .blog-filters {
    flex-wrap: wrap;
  }

  .blog-search {
    min-width: 200px;
    max-width: none;
    flex: 1 1 100%;
  }
}

@media (max-width: 700px) {
  .blog-head-actions,
  .blog-editor-top-actions {
    flex-wrap: wrap;
  }

  .blog-settings-grid,
  .blog-stats {
    grid-template-columns: 1fr;
  }
}

/* Blog editor refinements */
.blog-breadcrumb,
.blog-breadcrumb.current {
  display: inline;
  width: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary, var(--blog-muted));
  font-size: var(--text-sm);
  font-weight: 400;
}

.blog-breadcrumb:hover {
  text-decoration: underline;
}

.blog-breadcrumb.current {
  pointer-events: none;
  text-decoration: none;
}

.blog-breadcrumb-divider {
  color: var(--color-text-secondary, var(--blog-muted));
}

.blog-editor-tabs {
  border-bottom: 0.5px solid var(--color-border-tertiary, var(--blog-border));
}

.blog-editor-tabs button {
  font-weight: 400;
  color: var(--color-text-secondary, var(--blog-muted));
}

.blog-editor-tabs button.active {
  color: var(--legacy-color-3b5bdb);
  font-weight: 500;
  box-shadow: inset 0 -2px 0 var(--legacy-color-3b5bdb);
}

.blog-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.blog-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.blog-toolbar-divider {
  width: 1px;
  height: 18px;
  background: var(--color-border-tertiary, var(--blog-border));
}

.blog-toolbar button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 6px;
}

.blog-toolbar button:hover {
  border-color: var(--legacy-color-3b5bdb);
}

.blog-rich-editor {
  min-height: 400px;
  border: 0.5px solid var(--color-border-tertiary, var(--blog-border));
  border-radius: 8px;
}

.blog-section-item {
  display: grid;
  gap: 10px;
  border: 0.5px solid var(--color-border-tertiary, var(--blog-border));
  border-left: 3px solid var(--section-accent, var(--legacy-color-888780));
  border-radius: 12px;
  padding: 14px;
  background: var(--color-card);
}

.blog-section-head {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.blog-section-body {
  display: none;
  gap: 12px;
}

.blog-section-body.open {
  display: grid;
}

.blog-section-image {
  display: grid;
  gap: 10px;
}

.blog-section-upload {
  display: flex;
  align-items: center;
}

.blog-section-upload button,
.blog-upload-trigger {
  width: auto;
  min-width: 0;
  height: 80px;
  border: 0.5px dashed var(--color-border-tertiary, var(--blog-border));
  border-radius: 8px;
  background: var(--color-card);
  color: var(--color-text-secondary, var(--blog-muted));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.blog-section-preview {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 8px;
  align-items: start;
}

.blog-section-preview img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 0.5px solid var(--color-border-tertiary, var(--blog-border));
}

.blog-section-seo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.blog-section-seo-grid .field-block-full {
  grid-column: 1 / -1;
}

.icon-help {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary, var(--blog-muted));
  vertical-align: middle;
}

.blog-add-section-wrap {
  display: grid;
  justify-items: start;
  gap: 8px;
}

.blog-section-picker {
  position: static;
  min-width: 320px;
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 8px;
  padding: 10px;
  border: 0.5px solid var(--color-border-tertiary, var(--blog-border));
  border-radius: 8px;
  background: var(--color-card);
}

.blog-section-chip {
  width: auto;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  border: 0.5px solid var(--color-border-tertiary, var(--blog-border));
  background: var(--color-card);
}

.blog-section-picker .blog-section-chip {
  display: inline-flex;
  align-items: center;
}

.blog-upload-zone {
  min-height: 120px;
  padding: 12px;
  place-items: center;
}

.blog-upload-zone .blog-upload-trigger {
  height: 120px;
  min-height: 120px;
  width: 100%;
  flex-direction: column;
}

.blog-upload-zone svg {
  width: 24px;
  height: 24px;
  color: var(--legacy-color-7c7f85);
}

.blog-editor-sidebar .field-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  color: var(--color-text-secondary, var(--blog-muted));
}

.blog-breadcrumb,
.blog-breadcrumb.current,
.blog-editor-top-actions button,
.blog-generate-btn,
.blog-add-section,
.blog-import-stack button {
  width: auto;
}

.blog-row-actions {
  gap: 8px;
}

.blog-row-actions button {
  width: 28px;
  height: 28px;
  border: 0.5px solid var(--color-border-tertiary, var(--blog-border));
  border-radius: 8px;
}

.blog-table tbody tr:hover .blog-row-actions button,
.blog-table tbody tr.is-selected .blog-row-actions button {
  opacity: 1;
}

.blog-table tbody tr {
  border-left: 3px solid transparent;
}

.blog-table tbody tr:hover,
.blog-table tbody tr.is-selected {
  border-left-color: var(--legacy-color-3b5bdb);
}

.blog-seo-ring.neutral {
  background:
    radial-gradient(closest-side, var(--color-card) 76%, transparent 77% 100%),
    conic-gradient(var(--legacy-color-d3d1c7) calc(var(--score) * 1%), var(--legacy-color-d3d1c7) 0);
  color: var(--legacy-color-8c8878);
}

.blog-seo-ring.neutral strong {
  color: var(--legacy-color-8c8878);
}

/* ── CMS Design System — Layout shell ── */
.shell {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  background: var(--color-bg);
}

.shell.sidebar-collapsed {
  grid-template-columns: var(--sidebar-collapsed) minmax(0, 1fr);
}

.main,
.workspace {
  background: var(--color-bg);
}

/* ── Task 4: Top Bar (Polaris-inspired) ── */
.topbar {
  height: var(--topbar-height);
  background: var(--color-nav-bg);
  border-bottom: 1px solid var(--color-nav-border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-400);
  gap: var(--space-300);
  position: sticky;
  top: 0;
  z-index: 100;
  font-family: var(--font-sans);
  white-space: nowrap;
  overflow: visible;
}

/* Collapse toggle / logo mark */
.topbar-mark,
#collapseSidebarBtn.topbar-mark {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: var(--color-bg-fill-primary);
  border-radius: var(--border-radius-150);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--motion-duration-fast) var(--motion-ease);
}

.topbar-mark:hover,
#collapseSidebarBtn.topbar-mark:hover {
  background: var(--color-bg-fill-primary-hover);
}

.topbar-mark svg,
#collapseSidebarBtn.topbar-mark svg {
  width: 15px;
  height: 15px;
  color: currentColor;
}

.topbar-name {
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-semibold);
  color: #FFFFFF;
  letter-spacing: 0;
  white-space: nowrap;
}

.topbar-env {
  background: var(--color-nav-item-hover);
  border: 1px solid #374151;
  border-radius: 5px;
  font-size: var(--font-size-50);
  font-weight: var(--font-weight-bold);
  color: #6B7280;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px var(--space-200);
  flex-shrink: 0;
}

.topbar-sep {
  width: 1px;
  height: 20px;
  background: var(--color-nav-border);
  flex-shrink: 0;
}

/* Ops nav strip */
.topbar-nav,
.ops-admin-bar.topbar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-100);
  flex: 0 0 auto;
  min-width: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.ops-admin-status {
  background: var(--color-nav-item-hover);
  border: 1px solid #374151;
  border-radius: 5px;
  color: #16A34A;
  padding: 2px var(--space-200);
  font-size: var(--font-size-50);
  font-weight: var(--font-weight-bold);
  margin-right: var(--space-200);
  display: flex;
  align-items: center;
  gap: var(--space-150);
}

.ops-admin-status strong {
  color: #16A34A;
  font-weight: var(--font-weight-bold);
}

.ops-admin-actions {
  display: flex;
  align-items: center;
  gap: var(--space-100);
  overflow: visible;
}

.ops-admin-actions-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* Topbar nav items (Performance, SEO, CDN, Maintenance, etc.) */
.topbar-nav-item,
.ops-admin-actions button.topbar-nav-item {
  width: auto;
  min-width: 0;
  height: auto;
  padding: var(--space-150) var(--space-300);
  border: none;
  border-radius: var(--border-radius-100);
  background: transparent;
  font-size: var(--font-size-100);
  font-weight: var(--font-weight-medium);
  color: var(--color-nav-text);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--motion-duration-fast) var(--motion-ease),
              color var(--motion-duration-fast) var(--motion-ease);
  user-select: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-150);
}

.ops-admin-actions button.topbar-nav-item span {
  display: inline;
}

.topbar-nav-item svg,
.ops-admin-actions button.topbar-nav-item svg {
  width: 14px;
  height: 14px;
  color: currentColor;
}

.topbar-nav-item:hover:not(.active),
.ops-admin-actions button.topbar-nav-item:hover:not(.active) {
  background: var(--color-nav-item-hover);
  color: var(--color-nav-text-hover);
}

.topbar-nav-item.active,
.ops-admin-actions button.topbar-nav-item.active,
.ops-dropdown.open .topbar-nav-item {
  background: rgba(26, 107, 66, 0.20);
  color: #FFFFFF;
  font-weight: var(--font-weight-semibold);
}

/* Right zone */
.topbar-right,
.top-actions.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-150);
  flex: 0 0 auto;
  overflow: visible;
}

.top-actions-menu-wrap {
  position: relative;
}

.top-actions-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 208px;
  padding: var(--space-150);
  border: 1px solid var(--color-nav-border);
  border-radius: var(--border-radius-200);
  background: var(--color-nav-bg);
  box-shadow: var(--shadow-300);
  display: grid;
  gap: var(--space-100);
  z-index: 120;
}

.top-actions-menu[hidden] {
  display: none;
}

.top-actions-menu-item {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 var(--space-300);
  border: none;
  border-radius: var(--border-radius-150);
  background: transparent;
  color: var(--color-nav-text-hover);
  text-align: left;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  font-size: var(--font-size-100);
}

.top-actions-menu-item:hover {
  background: var(--color-nav-item-hover);
  color: #FFFFFF;
}

.top-actions-menu-avatar {
  justify-content: center;
  background: var(--color-bg-fill-primary);
  color: #FFFFFF;
  font-weight: var(--font-weight-bold);
}

/* Topbar icon buttons */
.notify-icon-btn,
.ops-icon-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border: none;
  border-radius: var(--border-radius-100);
  background: transparent;
  color: var(--color-nav-text);
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background var(--motion-duration-fast) var(--motion-ease),
              color var(--motion-duration-fast) var(--motion-ease);
}

.notify-icon-btn:hover,
.ops-icon-btn:hover {
  background: var(--color-nav-item-hover);
  color: var(--color-nav-text-hover);
}

/* Notification dot */
.notify-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #F87171;
  border: 1.5px solid var(--color-nav-bg);
}

/* Topbar avatar */
.topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg-fill-primary);
  color: #FFFFFF;
  font-size: var(--font-size-75);
  font-weight: var(--font-weight-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: outline-color var(--motion-duration-fast) var(--motion-ease);
}

.topbar-avatar:hover {
  outline: 2px solid var(--color-bg-fill-primary);
  outline-offset: 2px;
}

/* Topbar search */
.topbar-search {
  display: flex;
  align-items: center;
  gap: var(--space-150);
  background: var(--gray-8);
  border: 1px solid var(--color-nav-border);
  border-radius: var(--border-radius-150);
  padding: var(--space-150) var(--space-300);
  font-size: var(--font-size-75);
  color: var(--color-nav-section-label);
  width: 200px;
  font-family: var(--font-sans);
  transition: border-color var(--motion-duration-base) var(--motion-ease);
}

.topbar-search input {
  background: transparent;
  border: none;
  outline: none;
  font-size: var(--font-size-75);
  color: #FFFFFF;
  font-family: var(--font-sans);
  width: 100%;
  min-width: 0;
}

.topbar-search input::placeholder {
  color: var(--color-nav-section-label);
}

.topbar-search i,
.topbar-search svg {
  color: var(--color-nav-section-label);
  font-size: var(--font-size-75);
  flex-shrink: 0;
}

.topbar-search:focus-within {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 2px rgba(0, 112, 243, 0.20);
}

.topbar-search input {
  background: transparent;
  border: none;
  outline: none;
  font-size: var(--text-sm);
  color: var(--color-slate-300);
  font-family: var(--font-sans);
  width: 100%;
  padding: 0;
}

.topbar-search input::placeholder {
  color: var(--color-slate-600);
}

.topbar-icon-btn,
.notify-icon-btn.topbar-icon-btn {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-slate-600);
  cursor: pointer;
  position: relative;
  transition: background 150ms ease, color 150ms ease;
  flex-shrink: 0;
}

.topbar-icon-btn:hover,
.notify-icon-btn.topbar-icon-btn:hover {
  background: var(--color-sidebar-hover);
  color: var(--color-slate-400);
}

.topbar-notif-dot,
.notify-icon-btn .topbar-notif-dot {
  width: 7px;
  min-width: 7px;
  height: 7px;
  padding: 0;
  margin: 0;
  background: var(--color-notification);
  border-radius: 50%;
  border: 1.5px solid var(--color-sidebar-bg);
  position: absolute;
  top: 5px;
  right: 5px;
  pointer-events: none;
}

.topbar-avatar,
#userProfileBtn.topbar-avatar {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-primary-600);
  color: var(--color-card);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: outline-offset 150ms ease;
}

.topbar-avatar.active,
#userProfileBtn.topbar-avatar.active {
  outline: 2px solid var(--color-primary-600);
  outline-offset: 2px;
}


@media (max-width: 720px) {
  .topbar-search {
    display: none;
  }

  .topbar-name,
  .topbar-env,
  .topbar-sep {
    display: none;
  }

  .topbar {
    gap: 8px;
    padding: 0 12px;
  }

  .topbar-right {
    gap: 4px;
  }

}

.sidebar-footer {
  border-top: 1px solid var(--color-sidebar-border);
  padding-top: var(--space-3);
}

.profile-avatar {
  background: var(--color-primary-600);
  color: var(--color-sidebar-text-active);
  font-weight: var(--weight-semibold);
}

.profile-text strong {
  color: var(--color-slate-300);
  font-size: var(--text-sm);
}

#sidebarLogoutBtn {
  border-color: var(--color-sidebar-border);
  background: var(--color-slate-800);
  color: var(--color-slate-200);
}

.main {
  background: var(--color-surface);
}

.workspace {
  padding: var(--space-600);
}

.card,
.stat-card,
.dashboard-action-card,
.pages-grid-card,
.sitemap-card-lite,
.ops-score-card,
.blog-post-card,
.cms-modal,
.structure-modal-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-200);
  background: var(--color-card);
  box-shadow: var(--shadow-xs);
}

/* viewRoot is the page shell — no card surface; inner components provide their own cards */
#viewRoot {
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  color: var(--color-ink);
  letter-spacing: 0;
}

h1 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: 1.2;
}

h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}

.small,
.td-muted,
.td-sub,
.pages-grid-meta,
.blog-card-meta {
  color: var(--color-muted);
}

/* ── Task 8: Button System (Polaris-inspired) ── */

/* Base — shared by all buttons */
button,
.button-like,
.pages-add-btn,
.blog-generate-btn,
.tpe-publish-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-150);
  border-radius: var(--border-radius-150);
  font-family: var(--font-sans);
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-200);
  padding: var(--space-150) var(--space-400);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--motion-duration-fast) var(--motion-ease),
              border-color var(--motion-duration-fast) var(--motion-ease),
              box-shadow var(--motion-duration-fast) var(--motion-ease);
  user-select: none;
  min-height: 32px;
}

/* Primary — green */
button:not(.secondary):not(.icon-only-btn):not(.nav-item-btn):not(.nav-section-btn):not(.sitemap-tab-btn):not(.redir-tab-btn):not(.topbar-mark):not(.page-tab):not(.page-back-btn):not(.topbar-nav-item):not(.topbar-dropdown-item):not(.topbar-avatar):not(.topbar-confirm-cancel):not(.topbar-confirm-ok):not(.topbar-icon-btn):not(.builder-mode-btn):not(.pp-tab):not(.tpe-tab):not(.eb-section-discard):not(.eb-section-save):not(.canvas-zoom-btn):not(.canvas-toolbar-btn):not(.bpe-back-pill):not(.bpe-btn-outline):not(.bpe-btn-green):not(.bpe-tab):not(.bpe-tool-btn):not(.bpe-accord-header):not(.smap-action-btn):not(.smap-tab-pill):not(.smap-bulk-btn):not(.smap-page-btn):not(.smap-edit-btn):not(.robots-ai-btn):not(.robots-chip):not(.icon-help):not(.blog-section-chip):not(.blog-add-section):not(.blog-upload-trigger):not(.bsc-icon-btn):not(.bsc-upload-btn):not(.bsc-remove-link):not(.bsc-add-btn),
.pages-add-btn,
.button-like,
.tpe-publish-btn {
  background: var(--color-bg-fill-primary);
  border-color: var(--color-bg-fill-primary);
  color: #FFFFFF;
  box-shadow: var(--shadow-100);
}

button:not(.secondary):not(.icon-only-btn):not(.nav-item-btn):not(.nav-section-btn):not(.sitemap-tab-btn):not(.redir-tab-btn):not(.topbar-mark):not(.page-tab):not(.page-back-btn):not(.topbar-nav-item):not(.topbar-dropdown-item):not(.topbar-avatar):not(.topbar-confirm-cancel):not(.topbar-confirm-ok):not(.topbar-icon-btn):not(.builder-mode-btn):not(.pp-tab):not(.tpe-tab):not(.bpe-back-pill):not(.bpe-btn-outline):not(.bpe-btn-green):not(.bpe-tab):not(.bpe-tool-btn):not(.bpe-accord-header):not(.smap-action-btn):not(.smap-tab-pill):not(.smap-bulk-btn):not(.smap-page-btn):not(.smap-edit-btn):not(.robots-ai-btn):not(.robots-chip):not(.icon-help):not(.blog-section-chip):not(.blog-add-section):not(.blog-upload-trigger):not(.bsc-icon-btn):not(.bsc-upload-btn):not(.bsc-remove-link):not(.bsc-add-btn):hover,
.pages-add-btn:hover,
.button-like:hover,
.tpe-publish-btn:hover {
  background: var(--color-bg-fill-primary-hover);
  border-color: var(--color-bg-fill-primary-hover);
}

button:not(.secondary):not(.icon-only-btn):not(.nav-item-btn):not(.nav-section-btn):not(.sitemap-tab-btn):not(.redir-tab-btn):not(.topbar-mark):not(.page-tab):not(.page-back-btn):not(.topbar-nav-item):not(.topbar-dropdown-item):not(.topbar-avatar):not(.topbar-confirm-cancel):not(.topbar-confirm-ok):not(.topbar-icon-btn):not(.builder-mode-btn):not(.pp-tab):not(.tpe-tab):not(.bpe-back-pill):not(.bpe-btn-outline):not(.bpe-btn-green):not(.bpe-tab):not(.bpe-tool-btn):not(.bpe-accord-header):not(.smap-action-btn):not(.smap-tab-pill):not(.smap-bulk-btn):not(.smap-page-btn):not(.smap-edit-btn):not(.robots-ai-btn):not(.robots-chip):not(.icon-help):not(.blog-section-chip):not(.blog-add-section):not(.blog-upload-trigger):not(.bsc-icon-btn):not(.bsc-upload-btn):not(.bsc-remove-link):not(.bsc-add-btn):active,
.pages-add-btn:active,
.button-like:active {
  background: var(--color-bg-fill-primary-active);
  border-color: var(--color-bg-fill-primary-active);
  transform: scale(0.99);
}

/* Dropdown item buttons — ID specificity beats the primary rule above */
#notifyMenu button {
  background: var(--color-bg-surface);
  border: 1px solid transparent;
  color: var(--color-text);
  font-size: var(--font-size-100);
  box-shadow: none;
}

#notifyMenu button:hover {
  background: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* Secondary / default — white with border */
button.secondary,
.secondary,
.icon-only-btn,
.sitemap-icon-btn,
.sitemap-filter-btn {
  background: var(--color-bg-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
  box-shadow: var(--shadow-100);
}

button.secondary:hover,
.secondary:hover,
.icon-only-btn:hover,
.sitemap-icon-btn:hover,
.sitemap-filter-btn:hover {
  background: var(--color-bg-surface-hover);
  border-color: var(--color-text-disabled);
  color: var(--color-text);
}

button.secondary:active,
.secondary:active,
.icon-only-btn:active {
  background: var(--color-bg-surface-active);
}

/* Danger / critical */
button.danger,
.secondary.danger,
.icon-only-btn.danger {
  background: var(--color-bg-fill-critical);
  border-color: var(--color-bg-fill-critical);
  color: #FFFFFF;
  box-shadow: var(--shadow-100);
}

button.danger:hover,
.secondary.danger:hover,
.icon-only-btn.danger:hover {
  background: var(--color-bg-fill-critical-hover);
  border-color: var(--color-bg-fill-critical-hover);
}

/* Plain variant */
.btn-plain {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-primary);
  box-shadow: none;
  padding-left: var(--space-100);
  padding-right: var(--space-100);
}

.btn-plain:hover {
  background: var(--color-bg-surface-hover);
  color: var(--color-text-primary-hover);
}

/* Critical plain */
.btn-critical-plain {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-critical);
  box-shadow: none;
}

.btn-critical-plain:hover {
  background: var(--color-bg-surface-critical);
}

/* Sizes */
.btn-slim {
  padding: var(--space-100) var(--space-300);
  min-height: 28px;
  font-size: var(--font-size-100);
}

.btn-large {
  padding: var(--space-300) var(--space-500);
  min-height: 40px;
  font-size: var(--font-size-300);
}

.btn-full {
  width: 100%;
  justify-content: center;
}

/* Icon button */
.btn-icon {
  padding: 0;
  width: 32px;
  height: 32px;
  min-height: 32px;
  justify-content: center;
}

/* Disabled — all variants */
button:disabled,
.button-like:disabled,
.pages-add-btn:disabled {
  background: var(--color-bg-fill-disabled);
  border-color: var(--color-border-disabled);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

/* Focus ring — blue for all interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.20);
}

input,
select,
textarea {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-card);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

input:not([type="checkbox"]):not([type="radio"]),
select {
  min-height: 36px;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--color-border-strong);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-subtle);
}

input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
  background: var(--color-slate-100);
  color: var(--color-subtle);
  cursor: not-allowed;
  box-shadow: none;
}

.field-label,
.form-label,
.field-block > span:first-child,
.field-sub-block > span:first-child,
.redir-modal-field label {
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.field-block > span:first-child,
.field-sub-block > span:first-child,
.field-sub-block .small {
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.field-block > input,
.field-block > select,
.field-block > textarea,
.field-sub-block > input,
.field-sub-block > select,
.field-sub-block > textarea {
  flex: 1 0 100%;
  width: 100%;
}

.table,
table {
  border-collapse: collapse;
  width: 100%;
}

.table th,
table th {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-slate-50);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.table td,
table td {
  border-bottom: 1px solid var(--color-slate-100);
  color: var(--color-ink);
  font-size: var(--text-base);
}

.table tbody tr:hover,
table tbody tr:hover {
  background: var(--color-slate-50);
}

.pages-topbar,
.pages-header-shell,
.editor-heading-shell,
.blog-editor-topbar,
.blog-manager-status,
.ops-admin-bar {
  border-color: var(--color-border);
  background: var(--color-card);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}

.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-pill,
.status-pill.status-draft,
.status-pill.status-archived {
  background: var(--color-slate-100);
  color: var(--color-slate-600);
}

.status-pill.status-published,
.status-pill.status-active {
  background: var(--color-success-pale);
  color: var(--color-success-text);
}

.status-pill.status-scheduled,
.status-pill.status-review {
  background: var(--color-warning-pale);
  color: var(--color-warning-text);
}

.status-pill.status-danger,
.status-pill.status-error,
.status-pill.status-inactive {
  background: var(--color-danger-pale);
  color: var(--color-danger-text);
}

.app-toast {
  right: var(--space-6);
  bottom: var(--space-6);
  top: auto;
  border-radius: var(--radius-md);
  padding: 7px 12px;
  font-size: 13px;
  background: var(--color-ink);
  color: var(--color-slate-50);
  box-shadow: var(--shadow-lg);
}

.app-toast.ok {
  background: var(--color-success-text);
  color: var(--color-success-pale);
}

.app-toast.err {
  background: var(--color-danger-text);
  color: var(--color-danger-pale);
}

.license-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-4) var(--space-6) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-lg);
  background: var(--color-warning-pale);
  color: var(--color-warning-text);
}

.license-banner-expired {
  border-color: var(--color-danger-border);
  background: var(--color-danger-pale);
  color: var(--color-danger-text);
}

.license-banner strong {
  display: block;
  margin-bottom: var(--space-1);
}

.license-banner .small {
  color: currentColor;
}

.feature-locked-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-xl);
  background: var(--color-warning-pale);
  color: var(--color-warning-text);
}

.license-disabled-control {
  opacity: 0.55;
}

.cms-modal-overlay,
.section-library-modal,
.tpe-add-modal {
  backdrop-filter: blur(2px);
}

.cms-modal,
.tpe-add-modal-inner,
.structure-modal-panel {
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
}

.login-wrap {
  border-radius: var(--radius-3xl);
  border-color: var(--color-border);
  box-shadow: var(--shadow-lg);
}

.login-hero {
  background: linear-gradient(145deg, var(--color-slate-900), var(--color-primary-700));
}

@media (max-width: 768px) {
  .workspace {
    padding: var(--space-4);
  }

  .license-banner {
    margin: var(--space-3) var(--space-4) 0;
    flex-direction: column;
  }
}

/* Reusable design-system component contracts */
/* ── Task 5: Page Header + Breadcrumb (Polaris-inspired) ── */
.page-header {
  padding: var(--space-400) var(--space-600);
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  margin-bottom: var(--space-400);
  background: transparent;
  border: none;
}

.page-breadcrumb,
.page-header-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-150);
  font-size: var(--font-size-75);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-100);
}

.page-breadcrumb a,
.page-header-breadcrumb a {
  color: var(--color-text-primary);
  cursor: pointer;
  text-decoration: none;
}

.page-breadcrumb a:hover,
.page-header-breadcrumb a:hover {
  text-decoration: underline;
}

.page-breadcrumb .separator,
.page-header-breadcrumb .separator {
  color: var(--color-text-disabled);
  margin: 0 2px;
}

.page-breadcrumb .current,
.page-header-breadcrumb .current {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.page-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-150);
  font-size: var(--font-size-75);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  margin-bottom: var(--space-150);
  background: none;
  border: none;
  padding: 0;
  width: auto;
}

.page-back-btn:hover {
  color: var(--color-text);
}

.page-back-btn svg {
  width: 16px;
  height: 16px;
  color: currentColor;
}

.page-title-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-400);
}

.page-header-title,
.page-title {
  margin: 0;
  font-size: var(--font-size-600);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-600);
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.page-header-subtitle,
.page-subtitle {
  font-size: var(--font-size-100);
  color: var(--color-text-secondary);
  margin-top: var(--space-100);
}

.page-header-actions,
.page-actions {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-200);
}

.page-header-save-status {
  margin-right: var(--space-200);
  color: var(--color-text-secondary);
  font-size: var(--font-size-100);
}

/* Page tabs */
.page-tabs,
.page-header-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  margin-top: var(--space-300);
  margin-bottom: 0;
}

.page-tab {
  padding: var(--space-200) var(--space-400);
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  width: auto;
  transition: color var(--motion-duration-fast) var(--motion-ease),
              border-color var(--motion-duration-fast) var(--motion-ease);
}

.page-tab:hover {
  color: var(--color-text);
}

.page-tab.active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-bg-fill-primary);
}

@media (max-width: 768px) {
  .page-title-row {
    flex-direction: column;
    gap: var(--space-200);
  }

  .page-header-actions,
  .page-actions {
    width: 100%;
    justify-content: flex-end;
    margin-left: 0;
  }

  .page-header-title,
  .page-title {
    font-size: var(--font-size-500);
  }
}

/* ── Task 7: Form Controls (Polaris-inspired) ── */
.form-group {
  margin-bottom: var(--space-400);
}

.form-label {
  display: block;
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-100);
}

.form-label .required {
  color: var(--color-text-critical);
}

.form-label .optional {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  margin-left: var(--space-100);
}

.form-control,
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea {
  width: 100%;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--border-radius-150);
  padding: var(--space-200) var(--space-300);
  font-size: var(--font-size-200);
  font-family: var(--font-sans);
  color: var(--color-text);
  line-height: var(--line-height-300);
  outline: none;
  box-shadow: var(--shadow-inset-100);
  transition: border-color var(--motion-duration-base) var(--motion-ease),
              box-shadow var(--motion-duration-base) var(--motion-ease);
}

.form-control:not(textarea),
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select {
  height: 36px;
}

.form-control::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--color-text-disabled);
}

.form-control:hover,
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
  border-color: var(--color-text-disabled);
}

.form-control:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-inset-100), 0 0 0 3px rgba(0, 112, 243, 0.15);
}

.has-error .form-control,
.has-error input,
.has-error select,
.has-error textarea,
.form-control.error,
input.error,
select.error,
textarea.error {
  border-color: var(--color-border-critical);
  box-shadow: var(--shadow-inset-100), 0 0 0 3px rgba(227, 34, 34, 0.12);
}

.has-success .form-control,
.has-success input,
.has-success select,
.has-success textarea,
.form-control.success,
input.success,
select.success,
textarea.success {
  border-color: var(--color-border-success);
  box-shadow: var(--shadow-inset-100), 0 0 0 3px rgba(26, 107, 66, 0.15);
}

.form-control:disabled,
.form-control[readonly],
.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled,
.form-group input[readonly],
.form-group textarea[readonly] {
  border-color: var(--color-border-secondary);
  background: var(--color-bg-surface-disabled);
  color: var(--color-text-disabled);
  box-shadow: none;
}

.form-control:disabled,
.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
  cursor: not-allowed;
}

.form-control[readonly],
.form-group input[readonly],
.form-group textarea[readonly] {
  background: var(--color-bg-surface-inset);
  cursor: default;
}

textarea.form-control,
.form-group textarea {
  height: auto;
  min-height: 80px;
  padding: var(--space-200) var(--space-300);
  resize: vertical;
}

select.form-control,
.form-group select {
  appearance: none;
  padding-right: var(--space-800);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236D7175' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.form-help,
.form-hint {
  font-size: var(--font-size-75);
  color: var(--color-text-secondary);
  margin-top: var(--space-100);
  line-height: var(--line-height-200);
}

.form-error-text,
.form-error {
  font-size: var(--font-size-75);
  color: var(--color-text-critical);
  margin-top: var(--space-100);
  display: flex;
  align-items: center;
  gap: var(--space-100);
}

/* Inline label variant */
.form-group-inline {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-400);
  align-items: start;
}

.form-group-inline .form-label {
  padding-top: 8px;
  margin-bottom: 0;
}

.input-wrapper {
  position: relative;
}

.input-icon-left,
.input-icon-right {
  position: absolute;
  top: 50%;
  color: var(--color-subtle);
  pointer-events: none;
  transform: translateY(-50%);
}

.input-icon-left { left: 10px; }
.input-icon-right { right: 10px; }
.input-wrapper.has-icon-left input { padding-left: 34px; }
.input-wrapper.has-icon-right input { padding-right: 34px; }

.form-group {
  margin-bottom: var(--space-4);
}

.form-row,
.form-row-3 {
  display: grid;
  gap: var(--space-4);
}

.form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.native-control-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.toggle-wrapper,
.checkbox-wrapper,
.radio-wrapper {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
}

.toggle-wrapper { gap: 10px; }
.checkbox-wrapper,
.radio-wrapper { gap: var(--space-2); }

.toggle-track {
  position: relative;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  border-radius: var(--radius-pill);
  background: var(--color-slate-300);
  transition: background var(--transition-base);
}

.toggle-track.on,
.toggle-wrapper input:checked + .toggle-track {
  background: var(--color-primary-600);
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-card);
  box-shadow: 0 1px 3px var(--legacy-rgba-d4ebb9021f);
  transition: left var(--transition-base);
}

.toggle-track.on .toggle-thumb,
.toggle-wrapper input:checked + .toggle-track .toggle-thumb {
  left: 19px;
}

.toggle-label,
.checkbox-label,
.radio-label {
  color: var(--color-ink);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}

.toggle-sublabel,
.checkbox-sublabel,
.radio-sublabel {
  margin-top: 2px;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.checkbox-box,
.radio-dot {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 1.5px solid var(--color-slate-300);
  background: var(--color-card);
  transition: background var(--transition-base), border-color var(--transition-base);
}

.checkbox-box {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
}

.checkbox-box:hover,
.checkbox-wrapper:hover .checkbox-box {
  border-color: var(--color-primary-400);
}

.checkbox-box.checked,
.checkbox-wrapper input:checked + .checkbox-box {
  border-color: var(--color-primary-600);
  background: var(--color-primary-600);
}

.checkbox-box svg {
  width: 9px;
  height: 9px;
  color: var(--color-card);
  stroke-width: 1.8;
}

.checkbox-box.indeterminate::after {
  width: 8px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-card);
  content: "";
}

.radio-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.radio-dot::after {
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary-600);
  content: "";
}

.radio-dot.checked,
.radio-wrapper input:checked + .radio-dot {
  border-color: var(--color-primary-600);
}

.radio-dot.checked::after,
.radio-wrapper input:checked + .radio-dot::after {
  display: block;
}

.toggle-wrapper.disabled,
.checkbox-wrapper.disabled,
.radio-wrapper.disabled,
.toggle-wrapper:has(input:disabled),
.checkbox-wrapper:has(input:disabled),
.radio-wrapper:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

.btn-xs { padding: var(--space-1) 10px; border-radius: var(--radius-sm); font-size: var(--text-xs); }
.btn-sm { padding: 6px var(--space-3); font-size: var(--text-sm); }
.btn-md { padding: var(--space-2) var(--space-4); font-size: var(--text-base); }
.btn-lg { padding: 10px var(--space-5); font-size: var(--text-md); }

.btn-primary {
  border-color: var(--color-primary-600);
  background: var(--color-primary-600);
  color: var(--color-card);
}

.btn-primary:hover {
  border-color: var(--color-primary-700);
  background: var(--color-primary-700);
}

.btn-primary:active {
  background: var(--color-primary-800);
  transform: scale(0.99);
}

.btn-primary:focus-visible {
  box-shadow: 0 0 0 3px var(--legacy-rgba-384a914672);
}

.btn-secondary {
  border-color: var(--color-border);
  background: var(--color-card);
  color: var(--color-ink);
}

.btn-secondary:hover {
  border-color: var(--color-border-strong);
  background: var(--color-slate-50);
}

.btn-secondary:active { background: var(--color-slate-100); }

.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--color-muted);
}

.btn-ghost:hover {
  background: var(--color-slate-100);
  color: var(--color-ink);
}

.btn-soft {
  border-color: var(--color-primary-50);
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

.btn-soft:hover {
  border-color: var(--color-primary-200);
  background: var(--color-primary-100);
}

.btn-danger {
  border-color: var(--color-danger);
  background: var(--color-danger);
  color: var(--color-card);
}

.btn-danger:hover {
  border-color: var(--color-danger-text);
  background: var(--color-danger-text);
}

.btn-danger-outline {
  border-color: var(--color-danger-border);
  background: var(--color-danger-pale);
  color: var(--color-danger-text);
}

.btn-danger-outline:hover { background: var(--color-danger-border); }

.btn-success {
  border-color: var(--color-success);
  background: var(--color-success);
  color: var(--color-card);
}

.btn-success:hover {
  border-color: var(--color-success-text);
  background: var(--color-success-text);
}

.btn-warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-pale);
  color: var(--color-warning-text);
}

.btn:disabled,
.btn.disabled {
  border-color: var(--color-border);
  background: var(--color-slate-100);
  color: var(--color-subtle);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-icon {
  width: 32px;
  height: 32px;
  justify-content: center;
  padding: 0;
}

.btn.loading {
  pointer-events: none;
  opacity: 0.75;
}

.btn.loading::before {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  content: "";
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Task 9: Badge & Status Indicators (Polaris-inspired) ── */
.badge,
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-100);
  font-size: var(--font-size-75);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-100);
  padding: var(--space-100) var(--space-200);
  border-radius: var(--border-radius-full);
  white-space: nowrap;
  /* Default / Neutral */
  background: var(--color-bg-surface-inset);
  color: var(--color-text-secondary);
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Status variants — pale bg + dark same-family text */
.badge-success,
.badge-published { background: var(--color-bg-surface-success); color: var(--color-text-success); }

.badge-info,
.badge-draft     { background: var(--color-bg-surface-info);    color: var(--color-text-info); }

.badge-caution,
.badge-scheduled { background: var(--color-bg-surface-caution); color: var(--color-text-caution); }

.badge-warning   { background: var(--color-bg-surface-warning); color: var(--color-text-warning); }

.badge-critical,
.badge-error,
.badge-danger    { background: var(--color-bg-surface-critical); color: var(--color-text-critical); }

.badge-new,
.badge-highlight { background: var(--teal-1); color: var(--teal-5); }

/* Backward compat aliases */
.badge-primary   { background: var(--color-bg-surface-info);    color: var(--color-text-info); }

/* Count badge (number-only, e.g. sidebar nav) */
.badge-count {
  background: var(--color-bg-fill-disabled);
  color: var(--color-text-secondary);
  font-size: 11px;
  min-width: 18px;
  justify-content: center;
  padding: 0 var(--space-150);
}

/* Count badge inside active nav item */
.nav-item-btn.active .badge,
.nav-item-btn.active .badge-count {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
}

/* ── Task 10: Resource List / Index Table (Polaris-inspired) ── */
.index-table,
.data-table-container {
  background: var(--color-bg-surface);
  border-radius: var(--border-radius-200);
  box-shadow: var(--shadow-300);
  overflow: hidden;
}

/* Toolbar */
.index-table-toolbar,
.data-table-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-200);
  padding: var(--space-300) var(--space-400);
  border-bottom: 1px solid var(--color-border);
  min-height: 52px;
}

.index-table-toolbar .table-search,
.data-table-toolbar .table-search {
  width: 220px;
  flex: 0 0 220px;
  background: var(--color-bg-surface-inset);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
}

.index-table-toolbar .table-search::placeholder,
.data-table-toolbar .table-search::placeholder {
  color: var(--color-text-secondary);
}

/* Filter chips */
.table-filter-chip,
.filter-chip,
.page-btn {
  height: 28px;
  padding: 0 var(--space-300);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--border-radius-100);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-75);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-100);
  transition: background var(--motion-duration-fast) var(--motion-ease),
              border-color var(--motion-duration-fast) var(--motion-ease),
              color var(--motion-duration-fast) var(--motion-ease);
}

.page-btn { border-radius: var(--border-radius-100); }

.table-filter-chip:hover,
.filter-chip:hover,
.page-btn:hover {
  background: var(--color-bg-surface-hover);
  color: var(--color-text);
}

.table-filter-chip.active,
.filter-chip.active {
  background: var(--color-bg-surface-success);
  color: var(--color-text-success);
  border-color: var(--color-border-success);
}

.page-btn.active {
  background: var(--color-bg-surface-info);
  color: var(--color-text-info);
  border-color: var(--color-border-info);
  font-weight: var(--font-weight-semibold);
}

/* Bulk action toolbar — visible when rows selected */
.bulk-action-toolbar {
  display: none;
  align-items: center;
  gap: var(--space-300);
  padding: var(--space-200) var(--space-400);
  background: var(--color-bg-surface-inset);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-75);
  color: var(--color-text-secondary);
}

.bulk-action-toolbar.visible {
  display: flex;
}

/* Table */
.index-table table,
.data-table-container table {
  width: 100%;
  border-collapse: collapse;
}

/* Column headers */
.index-table th,
.data-table-container th {
  padding: var(--space-200) var(--space-400);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-75);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.index-table th.sorted,
.data-table-container th.sorted { color: var(--color-text); }

.index-table th::after,
.data-table-container th::after {
  content: ' ↑';
  opacity: 0.4;
}

.index-table th.sorted-desc::after,
.data-table-container th.sorted-desc::after { content: ' ↓'; opacity: 1; }
.index-table th.sorted-asc::after,
.data-table-container th.sorted-asc::after { content: ' ↑'; opacity: 1; }

/* Rows */
.index-table tbody tr,
.data-table-container tbody tr {
  border-bottom: 1px solid var(--color-border-secondary);
  transition: background var(--motion-duration-fast) var(--motion-ease);
}

.index-table tbody tr { min-height: 52px; }

.index-table tbody tr:hover,
.data-table-container tbody tr:hover { background: var(--color-bg-surface-hover); }

.index-table tbody tr.is-selected,
.data-table-container tbody tr.is-selected { background: var(--color-bg-surface-success); }

/* Cells */
.index-table td,
.data-table-container td {
  padding: var(--space-400);
  font-size: var(--font-size-200);
  color: var(--color-text);
  vertical-align: middle;
}

.td-primary { font-weight: var(--font-weight-medium); }
.td-muted,
.td-sub { color: var(--color-text-secondary); font-size: var(--font-size-75); }
.td-sub { margin-top: 1px; }
.td-numeric { font-variant-numeric: tabular-nums; text-align: right; }

/* Checkbox column */
.td-checkbox {
  width: 40px;
  padding: 0 var(--space-200) 0 var(--space-400);
}

.td-checkbox input[type="checkbox"] {
  opacity: 0;
  transition: opacity var(--motion-duration-fast) var(--motion-ease);
  width: auto;
  height: auto;
  min-height: unset;
  cursor: pointer;
}

.index-table tbody tr:hover .td-checkbox input[type="checkbox"],
.data-table-container tbody tr:hover .td-checkbox input[type="checkbox"],
.index-table tbody tr.is-selected .td-checkbox input[type="checkbox"],
.data-table-container tbody tr.is-selected .td-checkbox input[type="checkbox"],
.index-table.has-selection .td-checkbox input[type="checkbox"],
.data-table-container.has-selection .td-checkbox input[type="checkbox"] {
  opacity: 1;
}

/* Row actions */
.td-actions,
.row-actions {
  text-align: right;
  opacity: 0;
  transition: opacity var(--motion-duration-fast) var(--motion-ease);
}

.index-table tbody tr:hover .td-actions,
.data-table-container tbody tr:hover .td-actions,
.index-table tbody tr:hover .row-actions,
.data-table-container tbody tr:hover .row-actions { opacity: 1; }

.row-actions {
  display: flex;
  gap: var(--space-100);
  justify-content: flex-end;
}

.row-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--border-radius-100);
  background: transparent;
  color: var(--color-icon);
  cursor: pointer;
  transition: background var(--motion-duration-fast) var(--motion-ease),
              color var(--motion-duration-fast) var(--motion-ease);
}

.row-action-btn:hover { background: var(--color-bg-surface-active); color: var(--color-icon-hover); }
.row-action-btn.danger:hover { background: var(--color-bg-surface-critical); color: var(--color-icon-critical); }

/* Pagination */
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-300) var(--space-400);
  border-top: 1px solid var(--color-border-secondary);
}

.table-pagination-count {
  font-size: var(--font-size-75);
  color: var(--color-text-secondary);
}

/* Empty state */
.table-empty {
  padding: var(--space-1200) var(--space-400);
  text-align: center;
}

.table-empty svg { width: 48px; height: 48px; color: var(--color-icon-disabled); }
.table-empty-title { margin-top: var(--space-400); color: var(--color-text); font-size: var(--font-size-300); font-weight: var(--font-weight-semibold); }
.table-empty-sub { margin-top: var(--space-200); color: var(--color-text-secondary); font-size: var(--font-size-200); }
.table-empty .btn { margin-top: var(--space-400); }

/* ── Task 11: Banner + Toast (Polaris-inspired) ── */
.banner {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-200);
  padding: var(--space-400);
  display: flex;
  align-items: flex-start;
  gap: var(--space-300);
  margin-bottom: var(--space-400);
  position: relative;
  overflow: hidden;
}

/* 4px left colored strip — Polaris signature */
.banner::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-border);
  border-radius: var(--border-radius-200) 0 0 var(--border-radius-200);
}

.banner-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  color: currentColor;
}

.banner-content { flex: 1; }

.banner-title {
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.banner-body {
  font-size: var(--font-size-200);
  color: var(--color-text-secondary);
  margin-top: var(--space-100);
}

.banner-action {
  margin-top: var(--space-200);
  padding-left: 0;
  padding-right: 0;
  font-size: var(--font-size-200);
  background: transparent;
  border-color: transparent;
  color: var(--color-text-primary);
  box-shadow: none;
  min-height: auto;
}

.banner-action:hover { color: var(--color-text-primary-hover); background: transparent; }

.banner-dismiss {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-icon);
  cursor: pointer;
  border-radius: var(--border-radius-100);
  min-height: unset;
  box-shadow: none;
}

.banner-dismiss:hover {
  background: var(--color-bg-surface-hover);
  color: var(--color-icon-hover);
}

.banner.permanent .banner-dismiss { display: none; }

/* Banner variants */
.banner-success {
  background: var(--color-bg-surface-success);
  border-color: var(--color-border-success);
}
.banner-success::before { background: var(--color-border-success); }
.banner-success .banner-title { color: var(--color-text-success); }
.banner-success .banner-body  { color: var(--color-text-success); }

.banner-info {
  background: var(--color-bg-surface-info);
  border-color: var(--color-border-info);
}
.banner-info::before { background: var(--color-border-info); }
.banner-info .banner-title { color: var(--color-text-info); }

.banner-warning,
.banner-caution {
  background: var(--color-bg-surface-caution);
  border-color: var(--color-border-caution);
}
.banner-warning::before,
.banner-caution::before { background: var(--color-border-caution); }
.banner-warning .banner-title,
.banner-caution .banner-title { color: var(--color-text-caution); }
.banner-warning .banner-body,
.banner-caution .banner-body  { color: var(--color-text-caution); }

.banner-critical,
.banner-danger {
  background: var(--color-bg-surface-critical);
  border-color: var(--color-border-critical);
}
.banner-critical::before,
.banner-danger::before { background: var(--color-border-critical); }
.banner-critical .banner-title,
.banner-danger .banner-title { color: var(--color-text-critical); }
.banner-critical .banner-body,
.banner-danger .banner-body  { color: var(--color-text-critical); }

/* License banners */
.banner-license-warning { }
.banner-license-critical.permanent .banner-dismiss { display: none; }
.banner-license-critical {
  border-radius: 0;
  margin-bottom: 0;
}

/* ── Toast (Polaris: bottom-CENTER, dark bg) ── */
.toast-container {
  position: fixed;
  bottom: var(--space-600);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  pointer-events: none;
  align-items: center;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  min-width: 320px;
  max-width: 480px;
  padding: var(--space-300) var(--space-400);
  border-radius: var(--border-radius-200);
  background: var(--color-nav-bg);
  color: #FFFFFF;
  box-shadow: var(--shadow-500);
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-medium);
  pointer-events: auto;
  animation: toastIn 200ms ease-out forwards;
  border: none;
}

.toast.exiting { animation: toastOut 150ms ease-in forwards; }

.toast-success svg { color: #5CB485; }
.toast-critical svg,
.toast-danger svg  { color: #F87171; }
.toast-warning svg { color: #FFBA6B; }

.toast-dismiss {
  width: 20px;
  height: 20px;
  margin-left: auto;
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  border-radius: var(--border-radius-100);
  padding: 0;
  min-height: unset;
  box-shadow: none;
}

.toast-dismiss:hover { color: rgba(255, 255, 255, 0.8); background: transparent; }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(var(--space-600)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
  to { opacity: 0; }
}

.overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--legacy-rgba-a9f2373e64);
  backdrop-filter: blur(2px);
  animation: fadeIn 150ms ease;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 201;
  width: clamp(320px, 90vw, 560px);
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: var(--color-card);
  box-shadow: var(--shadow-xl);
  transform: translate(-50%, -50%);
  animation: modalIn 180ms ease;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6) 0;
}

.modal-title { color: var(--color-ink); font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.modal-subtitle { margin-top: 3px; color: var(--color-muted); font-size: var(--text-sm); }
.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
}

.modal-close:hover { background: var(--color-slate-100); color: var(--color-ink); }
.modal-body { padding: var(--space-5) var(--space-6); }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-1);
  padding: var(--space-4) var(--space-6) var(--space-5);
  border-top: 1px solid var(--color-border);
}

.modal-sm { max-width: 400px; }
.modal-md { max-width: 560px; }
.modal-lg { max-width: 720px; }
.modal-xl { max-width: 900px; }

.confirm-danger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-danger-pale);
  color: var(--color-danger);
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 201;
  display: flex;
  flex-direction: column;
  width: clamp(320px, 40vw, 520px);
  border-left: 1px solid var(--color-border);
  background: var(--color-card);
  box-shadow: var(--shadow-xl);
  animation: drawerIn var(--transition-base);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.drawer-title { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--space-5) var(--space-6); }
.drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes drawerIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@media (max-width: 768px) {
  .page-header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
  }

  .page-header-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .page-header-title { font-size: var(--text-xl); }
  .form-row,
  .form-row-3 { grid-template-columns: 1fr; }
  .data-table-toolbar .table-search { width: 100%; flex: 1; }
  .drawer { width: min(100%, 520px); }
}

/* Sidebar badge — count style in nav */
.sidebar .badge {
  margin-left: auto;
  background: var(--color-nav-border);
  color: var(--color-nav-section-label);
}

.perf-toast {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 9999px;
  background: var(--color-info-pale);
  border: 1px solid var(--color-info-border);
  color: var(--color-info-text);
  font-size: var(--text-xs);
  line-height: 1.2;
}

.perf-toast.ok {
  background: var(--color-success-pale);
  border-color: var(--color-success-border);
  color: var(--color-success-text);
}

.perf-toast.err {
  background: var(--color-danger-pale);
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
}

/* ─── Topbar nav dropdowns ─── */

.topbar-dropdown-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.topbar-dropdown-wrap.open > .topbar-nav-item {
  background: rgba(26, 107, 66, 0.20);
  color: #FFFFFF;
}

.topbar-chevron {
  font-size: 11px;
  margin-left: 3px;
  transition: transform 150ms ease;
  flex-shrink: 0;
}

.topbar-dropdown-wrap.open .topbar-chevron {
  transform: rotate(180deg);
}

.topbar-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #1E2126;
  border: 1px solid #2C3034;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  min-width: 220px;
  z-index: 500;
  overflow: hidden;
}

.tb-ni .topbar-dropdown {
  left: 0;
}

.topbar-dropdown[hidden] {
  display: none;
}

.topbar-avatar-wrap .topbar-dropdown,
.topbar-dropdown--right {
  right: 0;
  left: auto;
}

.topbar-dropdown-status {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #4ADE80;
  cursor: default;
  user-select: none;
}

.topbar-dropdown-status.maintenance {
  color: #FBBF24;
}

.topbar-dropdown-status.maintenance .topbar-live-dot-sm {
  background: #FBBF24;
}

.topbar-live-dot-sm {
  width: 5px;
  min-width: 5px;
  height: 5px;
  background: #4ADE80;
  border-radius: 50%;
  flex-shrink: 0;
}

.topbar-dropdown-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #4A4F54;
  padding: 8px 12px 3px;
  user-select: none;
}

.topbar-dropdown-divider {
  height: 1px;
  background: #2C3034;
  margin: 3px 0;
}

.topbar-dropdown-item,
.dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #9CA3AF;
  cursor: pointer;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  transition: background 100ms ease, color 100ms ease;
  white-space: nowrap;
}

.topbar-dropdown-item i,
.dd-item i {
  font-size: 14px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  color: currentColor;
}

.topbar-dropdown-item:hover,
.dd-item:hover {
  background: #2C3034;
  color: #E2E8F0;
}

.topbar-dropdown-item:disabled,
.topbar-dropdown-item.ops-disabled-action {
  opacity: 0.4;
  cursor: not-allowed;
}

.topbar-dropdown-item--destructive:hover,
.dd-item.destructive:hover {
  background: #3C1515;
  color: #F87171;
}

.topbar-dropdown-item--signout:hover {
  background: #2C3034;
  color: #F87171;
}

/* ─── Live indicator (right zone) ─── */

/* ─── Avatar dropdown header ─── */

.topbar-avatar-wrap .topbar-avatar {
  width: auto;
  min-width: 0;
  height: 32px;
  padding: 0;
  gap: 4px;
  border-radius: 18px;
  background: transparent;
}

.topbar-avatar-wrap .topbar-avatar:hover {
  outline: none;
}

.topbar-avatar-initials {
  width: 30px;
  min-width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-primary-600);
  color: var(--color-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.topbar-avatar-wrap .topbar-chevron {
  color: #9CA3AF;
  margin-left: 0;
}

.topbar-avatar-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-bottom: 1px solid #2C3034;
}

.topbar-avatar-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--color-primary-600, #16A34A);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.topbar-avatar-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.topbar-avatar-name {
  font-size: 12px;
  font-weight: 600;
  color: #E2E8F0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-avatar-role {
  font-size: 10px;
  font-weight: 400;
  color: #4A4F54;
}

/* ─── Cache confirm dialog ─── */

.topbar-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-confirm-modal {
  background: #1E2126;
  border: 1px solid #2C3034;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.60);
  padding: 20px 24px;
  min-width: 280px;
  max-width: 380px;
}

.topbar-confirm-title {
  font-size: 14px;
  font-weight: 600;
  color: #E2E8F0;
  margin-bottom: 6px;
}

.topbar-confirm-body {
  font-size: 12px;
  color: #8C9196;
  margin-bottom: 18px;
}

.topbar-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.topbar-confirm-cancel {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid #374151;
  background: transparent;
  color: #8C9196;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}

.topbar-confirm-cancel:hover {
  background: #2C3034;
  color: #E2E8F0;
}

.topbar-confirm-ok {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid #7F1D1D;
  background: #991B1B;
  color: #FEE2E2;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 100ms ease;
}

.topbar-confirm-ok:hover {
  background: #B91C1C;
}

/* Page builder shell: Plan A */
.editor-fullscreen {
  min-height: calc(100vh - var(--topbar-height));
  overflow: hidden;
}

.builder-shell-topbar {
  height: 44px;
}

.builder-shell-topbar .editor-page-header {
  position: relative;
  top: auto;
  z-index: 30;
  width: 100%;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: #1A1D1F;
  box-shadow: none;
  display: grid;
  grid-template-columns: minmax(570px, 1fr) auto minmax(250px, 0.6fr);
  align-items: center;
  gap: 12px;
}

.builder-topbar-left,
.builder-shell-topbar .editor-page-actions {
  display: flex;
  align-items: center;
  min-width: 0;
}

.builder-topbar-left {
  gap: 8px;
  overflow: hidden;
}

.builder-shell-topbar .editor-page-actions {
  justify-content: flex-end;
  gap: 8px;
}

.builder-back-btn {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #4A4F54;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.builder-back-btn:hover {
  background: #2C3034;
  color: #94A3B8;
}

.builder-back-btn i {
  font-size: 14px;
}

.builder-topbar-divider {
  width: 1px;
  height: 20px;
  background: #2C3034;
  flex-shrink: 0;
}

.builder-shell-topbar .editor-title-inline {
  width: min(220px, 22vw);
  min-width: 80px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #F1F5F9;
  font-size: 13px;
  font-weight: 600;
}

.builder-shell-topbar .editor-title-inline:focus {
  box-shadow: none;
}

.builder-status-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.builder-status-badge.published {
  background: rgba(26, 107, 66, 0.30);
  color: #4ADE80;
}

.builder-status-badge.draft {
  background: rgba(255, 255, 255, 0.10);
  color: #94A3B8;
}

.builder-shell-topbar .builder-mode-switcher {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
  margin-left: 4px;
  background: #2C3034;
  padding: 2px;
}

.builder-shell-topbar .builder-mode-btn {
  width: auto;
  min-width: 0;
  height: 24px;
  min-height: 24px;
  flex: 0 0 auto;
  padding: 4px 12px;
  color: #6B7280;
  font-size: 11px;
}

.builder-shell-topbar .builder-mode-btn.active {
  background: #1A6B42;
  color: #FFFFFF;
}

.builder-shell-topbar .builder-mode-btn.locked {
  padding-right: 72px;
}

.builder-shell-topbar .mode-locked-overlay {
  right: 5px;
  padding: 2px 5px;
  background: #1A1D1F;
  color: #94A3B8;
  font-size: 9px;
}

.builder-viewport-toggle {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: 2px;
  padding: 2px;
  border-radius: 6px;
  background: #2C3034;
}

.builder-viewport-btn {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #4A4F54;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.builder-viewport-btn i {
  font-size: 14px;
}

.builder-viewport-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #94A3B8;
}

.builder-viewport-btn.active {
  background: #1A6B42;
  color: #FFFFFF;
}

.builder-shell-topbar .builder-save-status {
  margin: 0 4px 0 0;
  color: #4A4F54;
  font-size: 11px;
}

.builder-discard-btn,
.builder-publish-btn {
  width: auto;
  min-width: 0;
  height: 28px;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 5px;
  font-size: 11px;
  line-height: 18px;
  box-shadow: none;
}

.builder-discard-btn {
  border: 1px solid #334155;
  background: transparent;
  color: #94A3B8;
}

.builder-discard-btn:hover {
  background: #2C3034;
  color: #E2E8F0;
}

.builder-publish-btn {
  padding-inline: 14px;
  border: 1px solid #1A6B42;
  background: #1A6B42;
  color: #FFFFFF;
  font-weight: 600;
}

.builder-publish-btn:hover {
  background: #155C38;
  border-color: #155C38;
}

.editor-fullscreen .page-editor-wrap {
  height: calc(100dvh - var(--topbar-height) - 68px);
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.editor-fullscreen .editor-tabs-wrapper {
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0 10px;
  gap: 8px;
  border-bottom: 1px solid #E2E8F0;
  background: #FFFFFF;
  display: flex;
  align-items: stretch;
  flex-direction: row;
  flex-shrink: 0;
}

.editor-fullscreen .editor-tabs {
  min-width: 0;
  margin: 0;
  padding: 0;
  gap: 0;
  border: 0;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
}

.editor-fullscreen .editor-tab,
.editor-fullscreen .editor-tab-builder,
.editor-fullscreen .editor-tab-builder.active {
  width: auto;
  min-width: 0;
  height: 40px;
  min-height: 40px;
  padding: 8px 14px;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0;
  background: transparent !important;
  color: #64748B !important;
  box-shadow: none;
  font-size: 12px;
  font-weight: 500 !important;
  white-space: nowrap;
}

.editor-fullscreen .editor-tab:hover {
  color: #334155 !important;
}

.editor-fullscreen .editor-tab.active,
.editor-fullscreen .editor-tab-builder.active {
  color: #1A6B42 !important;
  border-bottom-color: #1A6B42 !important;
  font-weight: 600 !important;
}

#healthToggleBtn.builder-health-score {
  --health-angle: 0deg;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  margin: 4px 0 4px auto;
  border: 0;
  border-radius: 50%;
  background-color: #E2E8F0 !important;
  background-image: conic-gradient(from 0deg, #1A6B42 0deg var(--health-angle), #E2E8F0 var(--health-angle) 360deg) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

#healthToggleBtn.builder-health-score > span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#healthToggleBtn.builder-health-score strong {
  color: #1A6B42;
  font-size: 9px;
  font-weight: 700;
}

.editor-fullscreen .page-form-grid {
  min-height: 0;
  overflow: auto;
}

.editor-fullscreen .editor-builder-panel {
  height: auto;
  min-height: 0;
  flex: 1;
  border: 0;
}

.editor-fullscreen .builder-mode-shell,
.editor-fullscreen .builder-mode-pane {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.editor-fullscreen .eb-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  transition: grid-template-columns 180ms ease;
}

.editor-fullscreen .eb-shell.property-open {
  grid-template-columns: 240px minmax(0, 1fr) 320px;
}

.editor-fullscreen .eb-left {
  width: auto;
  min-width: 0;
  border-right: 1px solid #E2E8F0;
}

.editor-fullscreen .eb-center {
  min-width: 0;
  overflow: hidden;
}

.editor-fullscreen .eb-right {
  position: static;
  width: 320px;
  min-width: 320px;
  height: 100%;
  transform: none;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  box-shadow: none;
  transition: opacity 120ms ease;
}

.editor-fullscreen .eb-right.open {
  visibility: visible;
  opacity: 1;
}

.editor-fullscreen .builder-canvas {
  width: 100%;
  height: 100%;
  padding: 20px;
}

.editor-fullscreen #ebCanvasFrame {
  width: min(100%, 1200px);
  min-height: 60vh;
  margin: 0 auto;
  transition: width 180ms ease;
  box-shadow: 0 4px 24px rgba(0,0,0,0.14);
  border-radius: 8px;
}

.editor-fullscreen .builder-canvas {
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.editor-fullscreen .eb-shell[data-viewport="tablet"] #ebCanvasFrame {
  width: min(768px, 100%);
}

.editor-fullscreen .eb-shell[data-viewport="mobile"] #ebCanvasFrame {
  width: min(390px, 100%);
}

@media (max-width: 1100px) {
  .builder-shell-topbar .editor-page-header {
    grid-template-columns: minmax(280px, 1fr) 92px auto;
  }

  .builder-shell-topbar .editor-title-inline,
  .builder-shell-topbar .builder-status-badge,
  .builder-shell-topbar .builder-save-status,
  .builder-shell-topbar .builder-discard-btn {
    display: none;
  }

  .builder-shell-topbar .builder-mode-btn {
    padding-inline: 7px;
    font-size: 10px;
  }

  .builder-shell-topbar .builder-mode-btn.locked {
    padding-right: 28px;
  }

  .builder-shell-topbar .mode-locked-overlay {
    width: 18px;
    height: 18px;
    padding: 0;
  }

  .builder-shell-topbar .mode-locked-overlay span {
    display: none;
  }

  .editor-fullscreen .eb-shell.property-open {
    grid-template-columns: 220px minmax(0, 1fr) 0;
  }

  .editor-fullscreen .eb-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    min-width: 300px;
    z-index: 20;
    box-shadow: -4px 0 20px rgba(15, 23, 42, 0.12);
  }
}

@media (max-width: 760px) {
  .builder-shell-topbar .editor-page-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .builder-shell-topbar .builder-viewport-toggle {
    display: none;
  }
}

/* Section picker modal: scoped overrides for legacy modal/button rules. */
#ebAddModal .section-picker-panel {
  width: min(720px, 94vw);
  max-width: 720px;
  max-height: 80vh;
  padding: 16px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#ebAddModal .section-picker-tabs {
  flex-shrink: 0;
}

#ebAddModal .section-picker-tab {
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: #F1F5F9;
  color: #64748B;
  box-shadow: none;
}

#ebAddModal .section-picker-tab:hover {
  background: #E2E8F0;
  color: #334155;
}

#ebAddModal .section-picker-tab.active,
#ebAddModal .section-picker-tab.active:hover {
  background: #1A6B42;
  color: #FFFFFF;
}

#ebAddModal .section-picker-grid {
  min-height: 0;
  overflow-y: auto;
}

#ebAddModal .section-template-card {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #FFFFFF;
  color: #0F172A;
  display: block;
  text-align: left;
  box-shadow: none;
}

#ebAddModal .section-template-card:hover {
  border-color: #1A6B42;
  background: #FFFFFF;
  box-shadow: 0 0 0 2px rgba(26, 107, 66, 0.12);
}

#ebAddModal .section-template-card.selected,
#ebAddModal .section-template-card.selected:hover {
  border-color: #1A6B42;
  background: #F0FDF4;
}

#ebAddModal .section-template-preview,
#ebAddModal .section-template-info {
  width: 100%;
}

@media (max-width: 760px) {
  #ebAddModal .section-picker-panel {
    width: min(640px, 94vw);
  }

  #ebAddModal .section-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  #ebAddModal {
    padding: 12px;
  }

  #ebAddModal .section-picker-panel {
    width: 100%;
    max-height: 88vh;
    padding: 14px;
  }

  #ebAddModal .section-picker-grid {
    grid-template-columns: 1fr;
  }
}

/* Visual Builder baseline. The legacy rules above are nested in a narrow-screen media query. */
.visual-builder-root {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.visual-builder-root .visual-builder-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: #E8EAED;
}

.visual-builder-root .block-palette {
  width: 56px;
  min-width: 56px;
  flex: 0 0 56px;
  padding: 8px 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  background: #1E2126;
  border-right: 1px solid #2C3034;
  transition: width 180ms ease, flex-basis 180ms ease;
}

.visual-builder-root .block-palette:hover,
.visual-builder-root .block-palette.expanded,
.visual-builder-root .block-palette.hover-open {
  width: 200px;
  min-width: 200px;
  flex-basis: 200px;
}

.visual-builder-root .block-palette-toggle {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  margin: 0 auto 6px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: #2C3034;
  color: #6B7280;
  box-shadow: none;
}

.visual-builder-root .block-palette-label {
  padding: 6px 8px 2px;
  color: #4A4F54;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.visual-builder-root .block-palette-items {
  display: grid;
  gap: 2px;
}

.visual-builder-root .block-item {
  width: calc(100% - 8px);
  min-width: 0;
  min-height: 0;
  margin: 1px 4px;
  padding: 7px 4px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #6B7280;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: grab;
  box-shadow: none;
}

.visual-builder-root .block-item:hover {
  background: #2C3034;
  color: #94A3B8;
}

.visual-builder-root .block-item.is-dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.visual-builder-root .block-item-icon,
.visual-builder-root .block-item-icon svg {
  width: 16px;
  height: 16px;
}

.visual-builder-root .block-item-label {
  color: #4A4F54;
  font-size: 8px;
  line-height: 1.2;
  text-align: center;
}

.visual-builder-root .visual-canvas {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0 0 56px;
  overflow: auto;
  position: relative;
  background: #E8EAED;
}

.visual-builder-root .visual-property-panel {
  width: 320px;
  min-width: 320px;
  flex: 0 0 320px;
}

.visual-builder-root .visual-canvas-topbar {
  display: flex;
  justify-content: center;
  padding: 12px 16px 0;
}

.visual-builder-root .viewport-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 6px;
  background: #2C3034;
}

.visual-builder-root .viewport-toggle-btn {
  width: auto;
  min-width: 0;
  min-height: 28px;
  padding: 4px 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #6B7280;
  font-size: 11px;
  font-weight: 600;
  box-shadow: none;
}

.visual-builder-root .viewport-toggle-btn.active {
  background: #1A6B42;
  color: #FFFFFF;
}

.visual-builder-root .canvas-frame {
  width: 85%;
  min-height: calc(100% - 72px);
  margin: 20px auto;
  padding: 12px 0 20px;
  overflow: hidden;
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14);
  transition: width 300ms ease;
}

.visual-builder-root .canvas-frame[data-viewport="tablet"] {
  width: 60%;
}

.visual-builder-root .canvas-frame[data-viewport="mobile"] {
  width: min(375px, calc(100% - 24px));
}

.visual-builder-root .drop-zone {
  height: 6px;
  min-height: 6px;
  margin: 4px 12px;
  overflow: hidden;
  border: 1.5px dashed transparent;
  border-radius: 4px;
  color: transparent;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  transition: height 150ms, border-color 150ms, background 150ms, opacity 150ms;
}

.visual-builder-root .visual-builder-shell.is-dragging-block .drop-zone,
.visual-builder-root .visual-canvas-empty .drop-zone {
  height: 28px;
  border-color: #CBD5E1;
  color: #CBD5E1;
  opacity: 1;
}

.visual-builder-root .visual-builder-shell.is-dragging-block .drop-zone.active,
.visual-builder-root .visual-canvas-empty .drop-zone.active {
  height: 48px;
  border-color: #1A6B42;
  color: #1A6B42;
  background: rgba(26, 107, 66, 0.04);
}

.visual-builder-root .canvas-block {
  position: relative;
  margin: 2px 0;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 150ms, box-shadow 150ms;
}

.visual-builder-root .canvas-block:hover {
  border-color: #E2E8F0;
}

.visual-builder-root .canvas-block.selected {
  border-color: #1A6B42;
  box-shadow: 0 0 0 1px #1A6B42;
}

.visual-builder-root .canvas-block.is-dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.visual-builder-root .canvas-block-toolbar {
  position: absolute;
  top: -1px;
  right: -1px;
  z-index: 3;
  border-radius: 0 4px 0 0;
  background: #1A6B42;
  display: flex;
}

.visual-builder-root .canvas-block-toolbar button {
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #FFFFFF;
  font-size: 10px;
  box-shadow: none;
}

.visual-builder-root .canvas-block-toolbar button:hover {
  background: rgba(255, 255, 255, 0.14);
}

.visual-builder-root [data-inline-title][contenteditable="true"] {
  cursor: text;
  background: #F0FDF4;
  box-shadow: inset 0 -1px 0 #1A6B42;
}

@media (max-width: 900px) {
  .visual-builder-root .visual-property-panel {
    display: none;
  }
}

/* Keep Theme Manager controls isolated from the legacy global button skin. */
.theme-manager-page .theme-btn-secondary,
.cms-modal .theme-btn-secondary {
  background: #FFFFFF !important;
  border-color: #D0D5DD !important;
  color: #101828 !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05) !important;
}

.theme-manager-page .theme-btn-primary,
.cms-modal .theme-btn-primary {
  background: #157347 !important;
  border-color: #157347 !important;
  color: #FFFFFF !important;
}

.cms-modal .theme-btn-danger {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
  color: #FFFFFF !important;
}

.theme-manager-page .theme-tab {
  background: transparent !important;
  border-color: transparent !important;
  color: #667085 !important;
  box-shadow: none !important;
}

.theme-manager-page .theme-tab.active {
  background: #EEF4FF !important;
  color: #175CD3 !important;
}

.theme-manager-page .theme-more-popover button {
  background: transparent !important;
  border-color: transparent !important;
  color: #344054 !important;
  box-shadow: none !important;
}

.theme-manager-page .theme-more-popover button.danger {
  color: #B42318 !important;
}

/* Theme actions open in a fixed top sheet so long pages never jump to footer. */
.cms-modal-overlay.cms-top-sheet-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 12000 !important;
  padding: 76px 24px 24px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: rgba(16, 24, 40, 0.48) !important;
  backdrop-filter: blur(3px);
}

.cms-modal.cms-top-sheet {
  position: relative !important;
  width: min(760px, 100%) !important;
  max-width: 760px !important;
  max-height: calc(100vh - 100px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  border: 1px solid #EAECF0 !important;
  border-radius: 0 0 18px 18px !important;
  background: #FFFFFF !important;
  box-shadow: 0 24px 64px rgba(16, 24, 40, 0.28) !important;
  animation: cms-top-sheet-in 180ms ease-out;
}

.cms-modal.cms-top-sheet.is-wide {
  width: min(1040px, 100%) !important;
  max-width: 1040px !important;
}

.cms-modal.cms-top-sheet.is-compact {
  width: min(520px, 100%) !important;
  max-width: 520px !important;
}

.cms-top-sheet-handle {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 5px;
  background: #157347;
}

.cms-top-sheet .cms-modal-header {
  position: sticky;
  top: 5px;
  z-index: 2;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
  padding: 18px 24px;
  border-bottom: 1px solid #EAECF0;
  background: #FFFFFF;
}

.cms-top-sheet .cms-modal-header > button {
  margin-left: auto;
}

.cms-top-sheet .theme-selected-file[hidden],
.cms-top-sheet .theme-operation-progress[hidden],
.cms-top-sheet .theme-operation-success[hidden] {
  display: none !important;
}

.cms-top-sheet > .small,
.cms-top-sheet > .theme-manager-grid {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.cms-top-sheet > .small {
  margin-top: 18px !important;
}

.cms-top-sheet > .theme-manager-grid {
  margin-bottom: 24px;
}

.cms-top-sheet .theme-modal-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #FFFFFF;
}

@keyframes cms-top-sheet-in {
  from { opacity: 0; transform: translateY(-18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 700px) {
  .cms-modal-overlay.cms-top-sheet-overlay {
    padding: 56px 0 0 !important;
  }

  .cms-modal.cms-top-sheet,
  .cms-modal.cms-top-sheet.is-wide,
  .cms-modal.cms-top-sheet.is-compact {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100vh - 56px) !important;
    border-radius: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SEO MODULES — shared layout
═══════════════════════════════════════════════════════════════ */
.seo-module-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.seo-module-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}
.seo-module-sub {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.seo-filterbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.seo-summary-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.seo-summary-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border);
}
.seo-summary-pill.ok { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.seo-summary-pill.warn { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.seo-summary-pill.err { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.seo-summary-pill.blue { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }

.seo-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.seo-card-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.seo-card-body {
  padding: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   SEO MODULE 1 — SCHEMA MARKUP
═══════════════════════════════════════════════════════════════ */
.schema-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.3);
  z-index: 49;
}
.schema-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -6px 0 32px rgba(0,0,0,.18);
  z-index: 50;
  display: flex;
  flex-direction: column;
  animation: drawerSlideIn .18s ease;
}
@keyframes drawerSlideIn {
  from { transform: translateX(60px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.schema-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 10px;
}
.schema-drawer-title-main {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
}
.schema-drawer-title-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.schema-drawer-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.schema-drawer-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.schema-global-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}
.schema-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}
.schema-type-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0.5px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  background: transparent;
  transition: border-color .12s, background .12s;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}
.schema-type-tile:hover { background: rgba(0,0,0,.04); }
.schema-type-tile.active {
  border-color: #1e6b3a;
  background: rgba(30,107,58,.08);
  color: #1e6b3a;
  font-weight: 500;
}
.schema-switch {
  position: relative;
  display: inline-flex;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.schema-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.schema-switch-track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 20px;
  cursor: pointer;
  transition: background .15s;
}
.schema-switch-track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s;
}
.schema-switch input:checked ~ .schema-switch-track { background: #1e6b3a; }
.schema-switch input:checked ~ .schema-switch-track::after { transform: translateX(16px); }
.schema-drawer-body .field-block input,
.schema-drawer-body .field-block textarea,
.schema-drawer-body .field-block select {
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  border: 0.5px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--text);
}
.schema-drawer-body .field-block textarea {
  height: auto;
  padding: 8px 10px;
  resize: vertical;
}
.seo-jsonld-preview {
  background: #0f172a;
  border-radius: 8px;
  overflow: hidden;
}
.seo-jsonld-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
  padding: 6px 10px 2px;
}
.seo-jsonld-preview pre {
  color: #7dd3fc;
  font-family: monospace;
  font-size: 11px;
  padding: 6px 10px 10px;
  margin: 0;
  max-height: 140px;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════
   SEO MODULE 2 — ROBOTS.TXT
═══════════════════════════════════════════════════════════════ */
.seo-warn-banner {
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.seo-warn-banner svg { flex-shrink: 0; width: 16px; height: 16px; }
.robots-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
}
.robots-rule-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}
.robots-rule-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.robots-dirs { display: flex; flex-direction: column; gap: 6px; }
.robots-dir-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.robots-add-dir-btn {
  font-size: 12px;
  padding: 3px 10px;
  margin-top: 6px;
}
.robots-preview-col {
  background: #0f172a;
  border-radius: 10px;
  overflow: hidden;
  height: fit-content;
  position: sticky;
  top: 16px;
}
.seo-preview-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.robots-preview-pre {
  color: #7dd3fc;
  font-family: monospace;
  font-size: 12px;
  padding: 10px 12px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 120px;
}

/* ═══════════════════════════════════════════════════════════════
   SEO MODULE 4 — OPEN GRAPH
═══════════════════════════════════════════════════════════════ */
.og-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  align-items: start;
}
.og-left-col { display: flex; flex-direction: column; gap: 0; }
.og-right-col { position: sticky; top: 16px; }
.og-preview-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 12px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.og-tab-btn {
  background: none !important;
  border: 1px solid transparent !important;
  border-bottom: none !important;
  border-radius: 6px 6px 0 0 !important;
  padding: 6px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer;
  color: var(--muted);
  width: auto !important;
  margin-bottom: -1px;
  transition: background 0.12s, color 0.12s;
}
.og-tab-btn:hover { background: var(--surface) !important; color: var(--text); }
.og-tab-btn.active {
  background: var(--surface) !important;
  color: var(--text);
  border-color: var(--border) !important;
  border-bottom-color: var(--surface) !important;
  font-weight: 600 !important;
}
.og-preview-body { padding: 16px; min-height: 160px; }

/* Facebook card */
.og-fb-card {
  border: 1px solid #dae0e6;
  border-radius: 6px;
  overflow: hidden;
  font-family: Helvetica, Arial, sans-serif;
  max-width: 320px;
}
.og-fb-img {
  height: 168px;
  background: #e4e6eb center/cover no-repeat;
}
.og-fb-img-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bcc0c4;
}
.og-fb-img-empty svg { width: 40px; height: 40px; }
.og-fb-body { padding: 10px 12px; background: #f0f2f5; }
.og-fb-domain { font-size: 11px; text-transform: uppercase; color: #606770; margin-bottom: 2px; }
.og-fb-title { font-size: 14px; font-weight: 700; color: #1c1e21; margin-bottom: 2px; line-height: 1.3; }
.og-fb-desc { font-size: 13px; color: #606770; }

/* Twitter card */
.og-tw-card {
  border: 1px solid #cfd9de;
  border-radius: 12px;
  overflow: hidden;
  font-family: -apple-system, sans-serif;
  max-width: 320px;
}
.og-tw-large .og-tw-img {
  height: 160px;
  background: #cfd9de center/cover no-repeat;
}
.og-tw-body { padding: 10px 12px; }
.og-tw-title { font-size: 14px; font-weight: 700; color: #0f1419; margin-bottom: 2px; }
.og-tw-desc { font-size: 13px; color: #536471; margin-bottom: 2px; }
.og-tw-meta { font-size: 12px; color: #536471; }

/* ═══════════════════════════════════════════════════════════════
   SEO MODULE 5 — CORE WEB VITALS
═══════════════════════════════════════════════════════════════ */
.cwv-url-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: #fffbeb;
  border: 1.5px solid #f59e0b;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #78350f;
}
.cwv-url-warning svg { flex-shrink: 0; margin-top: 2px; color: #d97706; }
.cwv-url-warning strong { display: block; margin-bottom: 2px; }
.cwv-url-warning a { color: #d97706; font-weight: 600; text-decoration: underline; }
.cwv-url-warning code { background: #fef3c7; padding: 1px 5px; border-radius: 3px; font-size: 12px; }
.cwv-summary-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.cwv-summary-card {
  flex: 1;
  min-width: 100px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
}
.cwv-summary-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.cwv-summary-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.cwv-summary-val.ok  { color: #059669; }
.cwv-summary-val.warn { color: #d97706; }
.cwv-summary-val.err  { color: #dc2626; }

.cwv-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.cwv-good    { background: #d1fae5; color: #065f46; }
.cwv-ni      { background: #fef3c7; color: #92400e; }
.cwv-poor    { background: #fee2e2; color: #991b1b; }
.cwv-unknown { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }

/* ═══════════════════════════════════════════════════════════════
   SEO MODULES — scoped field helpers (panel & card contexts)
═══════════════════════════════════════════════════════════════ */
.seo-panel-body .field-block,
.seo-card-body .field-block,
.robots-builder-col .field-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
}
.seo-panel-body .field-label,
.seo-card-body .field-label,
.robots-builder-col .field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   BLOG CATEGORIES — refactored two-column layout
═══════════════════════════════════════════════════════════════ */
.cat-page-top {
  margin-bottom: 20px;
}
.cat-back-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, color .15s;
  margin-bottom: 14px;
}
.cat-back-pill:hover { background: var(--border); color: var(--text); }
.cat-back-chevron { display: inline-flex; }
.cat-back-chevron svg { transform: rotate(180deg); width: 14px; height: 14px; }
.cat-page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}
.cat-page-sub {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.cat-two-col {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.cat-form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  position: sticky;
  top: 16px;
}
.cat-form-card-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.cat-form-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}
.cat-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cat-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.cat-field-hint {
  font-size: 11px;
  color: var(--muted);
}
.cat-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 4px;
}
.cat-form-actions button { width: auto; }
.cat-submit-btn {
  background: #059669 !important;
  color: #fff !important;
}
.cat-submit-btn:hover { background: #047857 !important; }

.cat-table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.cat-table-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-wrap: wrap;
}
.cat-table-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.cat-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--border);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  margin-left: 4px;
}
.cat-search { max-width: 180px; }
.cat-table-card .table { margin: 0; }
.cat-slug-mono {
  font-family: monospace;
  font-size: 12px;
  color: var(--muted);
}
.cat-posts-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: #dbeafe;
  color: #1e40af;
}
@media (max-width: 800px) {
  .cat-two-col { grid-template-columns: 1fr; }
  .cat-form-card { position: static; }
}

/* ── Robots.txt Manager — enhanced ──────────────────────────────────────── */
.robots-section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.robots-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
/* AI section */
.robots-ai-warn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fef9c3;
  border: 1px solid #fde047;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: #713f12;
  margin-bottom: 10px;
}
.robots-ai-warn svg { flex-shrink: 0; margin-top: 1px; }
.robots-ai-grid { display: flex; flex-direction: column; gap: 6px; }
.robots-ai-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.robots-ai-row:last-child { border-bottom: none; }
.robots-ai-info { display: flex; flex-direction: column; }
.robots-ai-name { font-size: 13px; font-weight: 600; color: var(--text); }
.robots-ai-desc { font-size: 11px; color: var(--muted); }
.robots-ai-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.robots-ai-btn {
  padding: 0 12px;
  height: 28px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  border-radius: 0;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  width: auto;
  min-width: 0;
}
.robots-ai-btn:hover { background: var(--border); }
.robots-ai-btn.active-allow  { background: #dcfce7; color: #166534; font-weight: 700; }
.robots-ai-btn.active-disallow { background: #fee2e2; color: #991b1b; font-weight: 700; }

/* Quick-add chips */
.robots-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.robots-chip {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s;
  width: auto;
  min-width: 0;
  height: auto;
}
.robots-chip:hover:not(:disabled) { background: var(--border); }
.robots-chip-allow { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.robots-chip-allow:hover:not(:disabled) { background: #dcfce7; }
.robots-chip-added { opacity: 0.4; cursor: default; }

/* Suggestion banner */
.robots-suggest-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  background: #fefce8;
  border: 1px solid #fde047;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.robots-suggest-text {
  font-size: 12px;
  color: #713f12;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.robots-suggest-text svg { flex-shrink: 0; }
.robots-suggest-slug {
  display: inline-block;
  background: #fef08a;
  border-radius: 4px;
  padding: 1px 6px;
  font-family: monospace;
  font-size: 11px;
}

/* Sitemap field */
.robots-sitemap-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.robots-sitemap-val {
  flex: 1;
  font-size: 13px;
  font-family: monospace;
  color: var(--text);
  padding: 0 4px;
}

/* Rule card */
.robots-rule-card { margin-bottom: 8px; }
.robots-rule-ai { opacity: 0.6; pointer-events: none; }
.robots-delay-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

/* Preview panel */
.robots-preview-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
}

/* Validation overlay */
.robots-val-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.robots-val-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 480px;
  max-width: 96vw;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.robots-val-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.robots-val-body {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
}
.robots-val-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
}
.robots-val-icon { font-size: 14px; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.val-ok   { background: #f0fdf4; color: #166534; }
.val-warn { background: #fefce8; color: #713f12; }
.val-err  { background: #fef2f2; color: #991b1b; }
.robots-val-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}
.robots-val-footer button { width: auto; }
.robots-val-footer button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (max-width: 700px) {
  .robots-ai-row { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════════
   SITEMAP MANAGER — smap-* (new design)
══════════════════════════════════════════════════════════════════ */
.smap-shell { display: flex; flex-direction: column; }

/* Header */
.smap-header { margin-bottom: 20px; }
.smap-title  { font-size: 22px; font-weight: 500; color: var(--color-text); margin: 0 0 4px; }
.smap-subtitle { font-size: 13px; color: var(--color-text-secondary); margin: 0; }

/* Stat cards */
.smap-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.smap-stat-card {
  background: var(--color-bg-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 16px;
}
.smap-stat-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}
.smap-stat-value {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
}

/* Toolbar */
.smap-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

/* Tab pills — must stay inline-flex, never full-width */
.smap-tab-pills {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}
.smap-tab-pill {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  border: 0.5px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  width: auto;
  min-width: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.smap-tab-pill:hover { background: var(--color-bg-surface-inset); }
.smap-tab-all-active      { background: #1a1a1a !important; color: #fff !important; border-color: #1a1a1a !important; }
.smap-tab-included-active { background: #e6f2eb !important; color: #1e6b3a !important; border-color: #b6d9c3 !important; }
.smap-tab-excluded-active { background: var(--color-bg-surface-inset) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; font-weight: 600; }
.smap-tab-issues-active   { background: #fef2f2 !important; color: #dc2626 !important; border-color: #fca5a5 !important; }

/* Toolbar action buttons — must stay inline-flex, never full-width */
.smap-toolbar-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.smap-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  width: auto;
  min-width: 0;
  transition: background 0.12s;
}
.smap-action-outline {
  border: 0.5px solid var(--color-border-secondary);
  background: var(--color-bg-surface);
  color: var(--color-text);
}
.smap-action-outline:hover { background: var(--color-bg-surface-inset); }
.smap-action-green {
  border: none;
  background: #1e6b3a;
  color: #fff;
  font-weight: 500;
}
.smap-action-green:hover { background: #185530; }

/* Table card */
.smap-card {
  background: var(--color-bg-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}
.smap-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 0.5px solid var(--color-border);
}
.smap-filters-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Search */
.smap-search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 200px;
  flex-shrink: 0;
}
.smap-search-icon {
  position: absolute;
  left: 8px;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  pointer-events: none;
}
.smap-search-input {
  width: 100%;
  height: 32px;
  padding: 0 8px 0 30px;
  border: 0.5px solid var(--color-border-secondary);
  border-radius: 8px;
  font-size: 13px;
  background: var(--color-bg-surface);
  color: var(--color-text);
}
.smap-search-input:focus { outline: none; border-color: #1e6b3a; box-shadow: 0 0 0 2px rgba(30,107,58,0.12); }

/* Filters */
.smap-select {
  height: 32px;
  padding: 0 8px;
  border: 0.5px solid var(--color-border-secondary);
  border-radius: 8px;
  font-size: 13px;
  background: var(--color-bg-surface);
  color: var(--color-text);
  cursor: pointer;
  width: auto;
  min-width: 0;
}
.smap-select:focus { outline: none; border-color: #1e6b3a; }

/* Bulk action buttons */
.smap-bulk-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.smap-bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  width: auto;
  min-width: 0;
  transition: background 0.12s, opacity 0.12s;
}
.smap-bulk-btn:disabled { opacity: 0.4; cursor: default; }
.smap-bulk-exclude {
  border: 0.5px solid #fca5a5;
  background: #fef2f2;
  color: #dc2626;
}
.smap-bulk-exclude:not(:disabled):hover { background: #fee2e2; }
.smap-bulk-include {
  border: none;
  background: #1e6b3a;
  color: #fff;
}
.smap-bulk-include:not(:disabled):hover { background: #185530; }

/* Table */
.smap-table-wrap { overflow-x: auto; }
.smap-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.smap-th {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  padding: 10px 12px;
  border-bottom: 0.5px solid var(--color-border);
  text-align: left;
  white-space: nowrap;
  background: var(--color-bg-surface);
}
.smap-td {
  padding: 13px 12px;
  border-bottom: 0.5px solid var(--color-border);
  vertical-align: middle;
}
.smap-row:last-child .smap-td { border-bottom: none; }
.smap-row:hover { background: var(--color-bg-surface-inset); }
.smap-row:hover .smap-row-actions { display: flex; }
.smap-empty {
  text-align: center;
  padding: 28px;
  color: var(--color-text-secondary);
  font-size: 13px;
}

/* Column widths */
.smap-check-cell  { width: 36px; }
.smap-priority-cell { width: 80px; }
.smap-freq-cell   { width: 110px; }
.smap-date-cell   { width: 110px; font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; }
.smap-status-cell { width: 110px; text-align: center; }
.smap-actions-cell { width: 60px; text-align: right; }

/* Page cell */
.smap-page-name { font-size: 13px; font-weight: 500; color: var(--color-text); }
.smap-page-url  { font-size: 11px; font-family: monospace; color: var(--color-text-secondary); margin-top: 1px; }

/* Inline inputs */
.smap-inline-num {
  width: 64px;
  height: 30px;
  text-align: center;
  border: 0.5px solid var(--color-border-secondary);
  border-radius: 8px;
  font-size: 13px;
  background: var(--color-bg-surface);
  color: var(--color-text);
  padding: 0 4px;
}
.smap-inline-num:focus { outline: none; border-color: #1e6b3a; box-shadow: 0 0 0 2px rgba(30,107,58,0.10); }
.smap-inline-sel {
  width: 96px;
  height: 30px;
  border: 0.5px solid var(--color-border-secondary);
  border-radius: 8px;
  font-size: 12px;
  background: var(--color-bg-surface);
  color: var(--color-text);
  padding: 0 6px;
  cursor: pointer;
}
.smap-inline-sel:focus { outline: none; border-color: #1e6b3a; }

/* Status badges */
.smap-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.12s;
}
.smap-badge:hover { opacity: 0.8; }
.smap-badge-included { background: #e6f2eb; color: #1e6b3a; border: 0.5px solid #b6d9c3; }
.smap-badge-excluded { background: var(--color-bg-surface-inset); color: var(--color-text-secondary); border: 0.5px solid var(--color-border); }
.smap-badge-issue    { background: #fef2f2; color: #dc2626; border: 0.5px solid #fca5a5; }
.smap-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.smap-dot-included { background: #1e6b3a; }
.smap-dot-excluded { background: var(--color-text-secondary); }
.smap-dot-issue    { background: #dc2626; }

/* Row actions — hidden until hover */
.smap-row-actions {
  display: none;
  justify-content: flex-end;
}
.smap-edit-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.5px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0;
}
.smap-edit-btn:hover { background: var(--color-bg-surface-inset); color: var(--color-text); }

/* Pagination */
.smap-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 0.5px solid var(--color-border);
}
.smap-page-info { font-size: 12px; color: var(--color-text-secondary); }
.smap-page-btns { display: inline-flex; align-items: center; gap: 4px; }
.smap-page-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.5px solid var(--color-border-secondary);
  border-radius: 6px;
  background: var(--color-bg-surface);
  color: var(--color-text);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  width: auto;
  min-width: 28px;
  padding: 0 6px;
}
.smap-page-btn:hover:not(:disabled) { background: var(--color-bg-surface-inset); }
.smap-page-btn:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
.smap-page-btn-active { background: #1e6b3a !important; color: #fff !important; border-color: #1e6b3a !important; }
.smap-page-ellipsis { padding: 0 4px; font-size: 12px; color: var(--color-text-secondary); }

@media (max-width: 768px) {
  .smap-stat-grid { grid-template-columns: 1fr; }
  .smap-toolbar   { flex-direction: column; align-items: flex-start; }
  .smap-toolbar-right { flex-wrap: wrap; }
  .smap-card-header { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════
   BLOG POST EDITOR — bpe-* chrome
══════════════════════════════════════════════════════════════════ */
.bpe-page { display: flex; flex-direction: column; min-height: 100vh; background: var(--color-bg); }

/* Top bar */
.bpe-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; background: var(--color-bg-surface);
  border-bottom: 0.5px solid var(--color-border);
  flex-wrap: wrap; gap: 10px; position: sticky; top: 0; z-index: 50;
}
.bpe-breadcrumb-row { display: inline-flex; align-items: center; gap: 8px; }
.bpe-back-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 20px;
  border: 0.5px solid var(--color-border-secondary);
  background: var(--color-bg-surface); color: var(--color-text);
  font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
  width: auto; transition: background 0.12s;
}
.bpe-back-pill:hover { background: var(--color-bg-surface-inset); }
.bpe-bc-sep     { color: var(--color-text-secondary); font-size: 13px; }
.bpe-bc-current { font-size: 13px; color: var(--color-text-secondary); }
.bpe-top-actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.bpe-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 20px; font-size: 12px;
  background: var(--color-bg-surface-inset); color: var(--color-text-secondary);
  border: 0.5px solid var(--color-border); white-space: nowrap;
}
.bpe-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.bpe-btn-outline {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: 8px;
  border: 0.5px solid var(--color-border-secondary);
  background: var(--color-bg-surface); color: var(--color-text);
  font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
  width: auto; transition: background 0.12s;
}
.bpe-btn-outline:hover { background: var(--color-bg-surface-inset); }
.bpe-btn-green {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 16px; border-radius: 8px;
  border: none; background: #1e6b3a; color: #fff;
  font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
  width: auto; transition: background 0.12s;
}
.bpe-btn-green:hover { background: #185530; }

/* Grid */
.bpe-form { flex: 1; }
.bpe-grid {
  display: grid; grid-template-columns: 1fr 360px;
  gap: 20px; padding: 24px; align-items: start;
}

/* Title card */
.bpe-title-card {
  background: var(--color-bg-surface); border: 0.5px solid var(--color-border);
  border-radius: 10px; padding: 20px; margin-bottom: 0;
}
.bpe-title-label { font-size: 12px; font-weight: 500; color: var(--color-text-secondary); margin-bottom: 6px; }
.bpe-title-input {
  width: 100%; border: none; font-size: 26px; font-weight: 500;
  color: var(--color-text); background: transparent;
  border-bottom: 1px solid transparent; padding: 0 0 6px;
  outline: none; transition: border-color 0.15s; box-sizing: border-box;
}
.bpe-title-input::placeholder { color: var(--color-text-secondary); opacity: 0.5; }
.bpe-title-input:focus { border-bottom-color: var(--color-border-secondary); }
.bpe-slug-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.bpe-slug-prefix { font-size: 13px; color: var(--color-text-secondary); white-space: nowrap; flex-shrink: 0; }
.bpe-slug-input {
  flex: 1; height: 36px; font-family: monospace; font-size: 13px; padding: 0 10px;
  border: 0.5px solid var(--color-border-secondary); border-radius: 8px;
  background: var(--color-bg-surface); color: var(--color-text); min-width: 0;
}
.bpe-slug-input:focus { outline: none; border-color: #1e6b3a; box-shadow: 0 0 0 2px rgba(30,107,58,0.10); }
.bpe-generate-btn { height: 36px; flex-shrink: 0; }

/* Tab bar — underline, never pill/block */
.bpe-tabs {
  display: flex; gap: 4px;
  border-bottom: 0.5px solid var(--color-border);
  margin-top: 16px; background: transparent;
}
.bpe-tab {
  display: inline-flex; align-items: center;
  padding: 10px 16px; font-size: 13px; font-weight: 500;
  background: transparent; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--color-text-secondary); cursor: pointer;
  white-space: nowrap; width: auto; transition: color 0.12s, border-color 0.12s;
}
.bpe-tab:hover { color: var(--color-text); }
.bpe-tab-active { color: #1e6b3a !important; border-bottom-color: #1e6b3a !important; }

/* Panel card — flush under tabs, no top border */
.bpe-panel {
  background: var(--color-bg-surface); border: 0.5px solid var(--color-border);
  border-top: none; border-radius: 0 0 10px 10px; overflow: hidden;
}
.bpe-tab-body { padding: 20px; }

/* Toolbar */
.bpe-toolbar {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 0.5px solid var(--color-border);
  background: var(--color-bg-surface);
}
.bpe-toolbar-group { display: inline-flex; gap: 2px; }
.bpe-toolbar-sep {
  display: inline-block; width: 1px; height: 20px;
  background: var(--color-border); margin: 0 4px; align-self: center; flex-shrink: 0;
}
.bpe-tool-btn {
  width: 32px; height: 32px; display: inline-flex; align-items: center;
  justify-content: center; border: 0.5px solid var(--color-border-secondary);
  border-radius: 6px; background: var(--color-bg-surface); color: var(--color-text);
  cursor: pointer; font-size: 12px; font-weight: 600; padding: 0; transition: background 0.1s;
}
.bpe-tool-btn:hover { background: var(--color-bg-surface-inset); }
.bpe-editor-body { padding: 0; }
.bpe-content-area {
  width: 100%; min-height: 320px; padding: 16px; border: none; resize: vertical;
  font-size: 14px; line-height: 1.7; color: var(--color-text);
  background: var(--color-bg-surface); display: block; outline: none; box-sizing: border-box;
}

/* Sidebar */
.bpe-sidebar { display: flex; flex-direction: column; }
.bpe-accord-card {
  background: var(--color-bg-surface); border: 0.5px solid var(--color-border);
  border-radius: 10px; overflow: hidden; margin-bottom: 12px;
}
.bpe-accord-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--color-bg-surface); border: none;
  border-bottom: 0.5px solid var(--color-border); cursor: pointer;
  width: 100%; text-align: left; transition: background 0.12s;
}
.bpe-accord-header:hover { background: var(--color-bg-surface-inset); }
.bpe-accord-title { font-size: 13px; font-weight: 500; color: var(--color-text); }
.bpe-accord-right {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--color-text-secondary); flex-shrink: 0;
}
.bpe-accord-meta { font-size: 11px; }
.bpe-accord-body { display: none; padding: 14px 16px; flex-direction: column; gap: 10px; }
.bpe-accord-body.open { display: flex; }
.bpe-accord-card:has(.bpe-accord-body:not(.open)) .bpe-accord-header { border-bottom: none; }
.bpe-accord-card:has(.bpe-accord-body:not(.open)) .bpe-accord-right svg { transform: rotate(-90deg); }

/* Excerpt */
.bpe-excerpt-area {
  width: 100%; height: 110px; padding: 10px 12px;
  border: 0.5px solid var(--color-border-secondary); border-radius: 8px;
  font-size: 13px; line-height: 1.6; resize: vertical;
  color: var(--color-text); background: var(--color-bg-surface);
  box-sizing: border-box; transition: border-color 0.15s;
}
.bpe-excerpt-area:focus { outline: none; border-color: #1e6b3a; box-shadow: 0 0 0 2px rgba(30,107,58,0.08); }

/* Upload zone — dashed, never solid fill */
.bpe-upload-zone {
  border: 1.5px dashed var(--color-border-secondary); border-radius: 8px;
  padding: 28px 16px; text-align: center; cursor: pointer; background: transparent;
  transition: border-color 0.15s, background 0.15s;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.bpe-upload-zone:hover { border-color: #1e6b3a; background: #f0f8f3; }
.bpe-upload-placeholder { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bpe-upload-placeholder svg { width: 26px; height: 26px; color: var(--color-text-secondary); margin-bottom: 4px; }
.bpe-upload-label { font-size: 13px; font-weight: 500; color: var(--color-text); }
.bpe-upload-hint  { font-size: 11px; color: var(--color-text-secondary); }
.bpe-upload-preview { width: 100%; border-radius: 6px; object-fit: cover; max-height: 160px; }

/* Alt text */
.bpe-alt-field { margin-top: 2px; }
.bpe-alt-label {
  display: block; font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-text-secondary); margin-bottom: 4px;
}
.bpe-alt-input {
  width: 100%; height: 34px; padding: 0 10px;
  border: 0.5px solid var(--color-border-secondary); border-radius: 8px;
  font-size: 13px; background: var(--color-bg-surface); color: var(--color-text); box-sizing: border-box;
}
.bpe-alt-input:focus { outline: none; border-color: #1e6b3a; }

/* Sidebar fields */
.bpe-sidebar-field { display: flex; flex-direction: column; gap: 4px; }
.bpe-sidebar-label { font-size: 12px; font-weight: 500; color: var(--color-text-secondary); }
.bpe-sidebar-select,
.bpe-sidebar-input {
  width: 100%; height: 36px; padding: 0 10px;
  border: 0.5px solid var(--color-border-secondary); border-radius: 8px;
  font-size: 13px; background: var(--color-bg-surface); color: var(--color-text); box-sizing: border-box;
}
.bpe-sidebar-select:focus,
.bpe-sidebar-input:focus { outline: none; border-color: #1e6b3a; }

@media (max-width: 1024px) {
  .bpe-grid { grid-template-columns: 1fr; }
  .bpe-sidebar { order: 2; }
}

/* ══════════════════════════════════════════════════════════════════
   BLOG SECTION ITEMS — layout cleanup
══════════════════════════════════════════════════════════════════ */

/* Remove card-style from field-blocks inside section body */
.blog-section-body .field-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}
.blog-section-body .field-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  margin-bottom: 0;
}
.blog-section-body input,
.blog-section-body textarea {
  border: 0.5px solid var(--color-border-secondary);
  border-radius: 6px;
  background: var(--color-bg-surface);
  font-size: 13px;
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
  color: var(--color-text);
}
.blog-section-body input {
  height: 34px;
  padding: 0 10px;
}
.blog-section-body input:focus,
.blog-section-body textarea:focus {
  outline: none;
  border-color: #1e6b3a;
  box-shadow: 0 0 0 2px rgba(30,107,58,0.08);
}

/* Section image area — compact row */
.blog-section-image {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Upload trigger inside sections — proper dashed zone */
.blog-section-item .blog-section-upload {
  display: block;
}
.blog-section-item .blog-section-upload button {
  width: 100% !important;
  height: 56px !important;
  border: 1.5px dashed var(--color-border-secondary) !important;
  border-radius: 8px !important;
  background: var(--color-bg-surface) !important;
  color: var(--color-text-secondary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.blog-section-item .blog-section-upload button:hover {
  border-color: #1e6b3a !important;
  background: #f0f8f3 !important;
  color: #1e6b3a !important;
}

/* Image preview — full-width thumbnail with overlaid X */
.blog-section-preview {
  position: relative;
  display: block;
}
.blog-section-preview img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
  border: 0.5px solid var(--color-border);
  display: block;
}
.blog-section-preview .icon-only-btn.danger {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px !important;
  height: 26px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  opacity: 0.9;
}
.blog-section-preview .icon-only-btn.danger:hover { opacity: 1; }

/* Section SEO grid — clean label+input pairs */
.blog-section-seo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}

/* icon-help — inline info icon, no background */
.icon-help {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--color-text-secondary) !important;
  width: 14px !important;
  height: 14px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  cursor: help;
}

/* Section type chip picker */
.blog-section-chip {
  background: var(--color-bg-surface) !important;
  color: var(--color-text) !important;
  border: 0.5px solid var(--color-border) !important;
  box-shadow: none !important;
}
.blog-section-chip:hover {
  background: var(--color-bg-surface-inset) !important;
  border-color: #1e6b3a !important;
  color: #1e6b3a !important;
}

/* Add section button */
.blog-add-section {
  background: var(--color-bg-surface) !important;
  color: var(--color-text) !important;
  border: 0.5px solid var(--color-border-secondary) !important;
  box-shadow: none !important;
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto !important;
}
.blog-add-section:hover {
  background: var(--color-bg-surface-inset) !important;
}

/* =====================================================
   Blog Section Card (bsc-*) — Sections tab block cards
   ===================================================== */

.bsc-list {
  display: flex;
  flex-direction: column;
  padding: 16px 16px 0;
}

.bsc-card {
  background: var(--color-bg-surface, #fff);
  border: 0.5px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}

/* HEADER */
.bsc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--color-border, #e5e7eb);
  background: var(--color-bg-surface-inset, #f8f8f7);
}

.bsc-card.bsc-collapsed .bsc-head {
  border-bottom: none;
}

.bsc-drag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  cursor: grab;
  color: var(--color-text-secondary);
  border-radius: 5px;
}
.bsc-drag:hover {
  background: var(--color-border, #e5e7eb);
}
.bsc-drag svg { pointer-events: none; width: 16px; height: 16px; }

.bsc-type-select {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  padding: 0;
  outline: none;
  font-family: inherit;
}

.bsc-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Icon buttons in block header */
.bsc-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 0.5px solid var(--color-border-secondary, #d1d5db) !important;
  border-radius: 6px !important;
  background: var(--color-bg-surface, #fff) !important;
  color: var(--color-text-secondary) !important;
  box-shadow: none !important;
  min-height: unset !important;
}
.bsc-icon-btn:hover {
  background: var(--color-bg-surface-inset, #f8f8f7) !important;
}
.bsc-delete-btn:hover {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}

/* Rotate chevron when collapsed */
.bsc-card.bsc-collapsed .bsc-icon-btn[data-blog-section-toggle] {
  transform: rotate(-90deg);
}

/* BODY */
.bsc-body {
  display: none;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}
.bsc-body.open {
  display: flex;
}

/* Field wrapper: label stacked above input */
.bsc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Two-column field row */
.bsc-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Field label */
.bsc-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Field inputs */
.bsc-field input,
.bsc-field textarea {
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  padding: 0 10px;
  border: 0.5px solid var(--color-border-secondary, #d1d5db);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: var(--color-bg-surface, #fff);
  color: var(--color-text);
}
.bsc-field textarea {
  height: 70px;
  padding: 8px 10px;
  resize: vertical;
}
.bsc-field input:focus,
.bsc-field textarea:focus {
  outline: none;
  border-color: #1e6b3a;
  box-shadow: 0 0 0 2px rgba(30,107,58,0.1);
}

/* Image preview row */
.bsc-img-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.bsc-thumb {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 0.5px solid var(--color-border-secondary, #d1d5db);
  background: var(--color-bg-surface-inset, #f8f8f7);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-text-secondary);
}
.bsc-thumb svg { width: 24px; height: 24px; }
.bsc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bsc-img-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bsc-filename {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
}
.bsc-img-hint {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
.bsc-img-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Upload button */
.bsc-upload-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 10px !important;
  height: auto !important;
  width: auto !important;
  min-height: unset !important;
  border: 0.5px solid var(--color-border-secondary, #d1d5db) !important;
  border-radius: 6px !important;
  background: var(--color-bg-surface, #fff) !important;
  color: var(--color-text) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}
.bsc-upload-btn:hover {
  border-color: #1e6b3a !important;
  color: #1e6b3a !important;
  background: #f0f8f3 !important;
}
.bsc-upload-btn svg { width: 14px; height: 14px; }

/* Remove image text link */
.bsc-remove-link {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
  width: auto !important;
  min-height: unset !important;
  font-size: 12px !important;
  color: var(--color-text-secondary) !important;
  cursor: pointer;
  text-decoration: underline;
}
.bsc-remove-link:hover {
  color: #dc2626 !important;
}

/* Add block footer */
.bsc-add-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 16px 16px;
}

/* Add block button — dashed border */
.bsc-add-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 20px !important;
  height: auto !important;
  width: auto !important;
  min-height: unset !important;
  border: 0.5px dashed var(--color-border-secondary, #d1d5db) !important;
  border-radius: 6px !important;
  background: var(--color-bg-surface, #fff) !important;
  color: var(--color-text-secondary) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}
.bsc-add-btn:hover {
  border-color: #1e6b3a !important;
  color: #1e6b3a !important;
  background: #f0f8f3 !important;
}

/* Blog Section Editor (bse-*) — scoped field layout, label-above-input */
.bse-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bse-field-full {
  grid-column: 1 / -1;
}
.bse-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}
.bse-field input,
.bse-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 0.5px solid var(--color-border-secondary);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  background: var(--color-bg-surface);
  color: var(--color-text);
  font-family: inherit;
  resize: vertical;
}
.bse-field input:focus,
.bse-field textarea:focus {
  outline: none;
  border-color: #1e6b3a;
}

/* ════════════════════════════════════════════════════════════════════════════
   AI SEO MODULE — shared layout
   ════════════════════════════════════════════════════════════════════════════ */

.aiseo-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.aiseo-shell.aiseo-panel-open {
  grid-template-columns: 1fr 320px;
  gap: 16px;
}
.aiseo-main { min-width: 0; }
.aiseo-side-panel {
  background: var(--card, #fff);
  border: 0.5px solid var(--border, #e5e7eb);
  border-radius: var(--radius-lg, 10px);
  padding: 16px;
  height: fit-content;
  position: sticky;
  top: 16px;
}
.aiseo-panel-empty { color: var(--muted, #9ca3af); font-size: 13px; text-align: center; padding: 24px 0; }
.aiseo-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 8px;
}
.aiseo-panel-head strong { font-size: 14px; }

/* Score badges */
.aiseo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.aiseo-badge-good  { background: #d1fae5; color: #065f46; }
.aiseo-badge-amber { background: #fef3c7; color: #92400e; }
.aiseo-badge-poor  { background: #fee2e2; color: #991b1b; }
.aiseo-badge-none  { background: var(--bg-alt, #f3f4f6); color: var(--muted); }

.aiseo-row-selected { background: var(--bg-alt, #f9fafb); }

/* Factor bars */
.aiseo-factors { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.aiseo-factor-row { display: grid; grid-template-columns: 1fr 80px 36px; align-items: center; gap: 8px; }
.aiseo-factor-label { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aiseo-bar-track { height: 6px; border-radius: 3px; background: var(--border, #e5e7eb); overflow: hidden; }
.aiseo-bar-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.aiseo-bar-good  { background: #10b981; }
.aiseo-bar-amber { background: #f59e0b; }
.aiseo-bar-poor  { background: #ef4444; }
.aiseo-factor-score { font-size: 11px; color: var(--muted); text-align: right; }

/* Suggestions */
.aiseo-suggestions { border-top: 0.5px solid var(--border); padding-top: 12px; margin-top: 4px; }
.aiseo-suggestions-title { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 8px; }
.aiseo-suggestion-item {
  font-size: 12px;
  color: var(--text, #111827);
  padding: 6px 8px 6px 20px;
  margin-bottom: 6px;
  background: #fffbeb;
  border-left: 2px solid #f59e0b;
  border-radius: 0 4px 4px 0;
  position: relative;
  line-height: 1.4;
}
.aiseo-suggestion-item::before { content: '→'; position: absolute; left: 6px; color: #f59e0b; }
.aiseo-analyzed-at { font-size: 11px; color: var(--muted); margin: 10px 0 0; }

/* E-E-A-T Checklist */
.aiseo-eeat-summary {
  font-size: 13px; font-weight: 600; color: var(--text);
  margin-bottom: 12px;
}
.aiseo-checklist { display: flex; flex-direction: column; gap: 8px; }
.aiseo-check-item { display: flex; align-items: flex-start; gap: 8px; }
.aiseo-check-icon {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  min-width: 16px;
}
.aiseo-check-item.pass .aiseo-check-icon { color: #10b981; }
.aiseo-check-item.fail .aiseo-check-icon { color: #ef4444; }
.aiseo-check-text { font-size: 13px; line-height: 1.4; }
.aiseo-check-fix { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.aiseo-check-fix a { color: #1e6b3a; text-decoration: underline; cursor: pointer; }

.eeat-tick { font-size: 14px; font-weight: 700; }
.eeat-tick.pass { color: #10b981; }
.eeat-tick.fail { color: #ef4444; }

/* Summary banner */
.aiseo-summary-banner {
  padding: 10px 14px;
  border-radius: var(--radius-lg, 10px);
  font-size: 13px;
  margin-bottom: 12px;
}
.aiseo-summary-banner.good { background: #d1fae5; color: #065f46; }
.aiseo-summary-banner.warn { background: #fef3c7; color: #92400e; }

/* llms.txt layout */
.aiseo-llms-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  align-items: start;
}
.aiseo-llms-pages { max-height: 600px; overflow-y: auto; }
.aiseo-llms-page-list { display: flex; flex-direction: column; gap: 4px; }
.aiseo-llms-page-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: background .15s;
}
.aiseo-llms-page-row:hover { background: var(--bg-alt, #f3f4f6); }
.aiseo-llms-page-row.excluded { opacity: .5; }
.aiseo-llms-editor { display: flex; flex-direction: column; }
.aiseo-llms-textarea {
  width: 100%;
  min-height: 420px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.6;
  border: 0.5px solid var(--border, #e5e7eb);
  border-radius: 6px;
  padding: 12px;
  resize: vertical;
  box-sizing: border-box;
  background: var(--bg-alt, #f9fafb);
  color: var(--text);
}
.aiseo-llms-textarea:focus { outline: none; border-color: #1e6b3a; }
.aiseo-llms-empty { text-align: center; padding: 48px 16px; color: var(--muted); font-size: 14px; }

@media (max-width: 900px) {
  .aiseo-shell.aiseo-panel-open { grid-template-columns: 1fr; }
  .aiseo-side-panel { position: static; }
  .aiseo-llms-layout { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   SEO OVERVIEW DASHBOARD
═══════════════════════════════════════════════════════════════ */
.seo-health-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
}
.seo-quick-wins {
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
}
.seo-quick-win {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-left-width: 3px;
  margin-bottom: 6px;
  transition: background .12s;
}
.seo-quick-win:hover { background: rgba(0,0,0,.03); }
.seo-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.seo-overview-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.seo-overview-card:hover {
  border-color: #1e6b3a;
  box-shadow: 0 2px 12px rgba(30,107,58,.1);
}
.seo-overview-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.seo-overview-card-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   SECURITY AUDIT LOGS
═══════════════════════════════════════════════════════════════ */
.audit-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.audit-summary-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.audit-summary-num {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.audit-summary-label {
  font-size: 12px;
  color: var(--muted);
}
.audit-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  background: var(--border);
  color: var(--muted);
}
.audit-badge-ok {
  background: rgba(30,107,58,.12);
  color: #1e6b3a;
}
.audit-badge-err {
  background: rgba(220,38,38,.1);
  color: #dc2626;
}
.audit-row:hover { background: rgba(0,0,0,.02); }
.audit-row.expanded { background: rgba(30,107,58,.04); }
.audit-expand-row td { padding: 0; }
.audit-expand-body {
  padding: 8px 16px 12px;
  background: rgba(15,23,42,.03);
  border-top: 1px solid var(--border);
}
.audit-meta-pre {
  margin: 0;
  font-size: 11px;
  font-family: monospace;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}
.audit-pag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 0;
  justify-content: center;
}
.audit-pag-info {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  padding: 12px 0 0;
}

.field-hint { display:block; font-size:11px; color:var(--muted); margin-top:4px; line-height:1.4; }

/* ═══════════════════════════════════════════════════════════════
   API KEY BOXES — General Settings
═══════════════════════════════════════════════════════════════ */
.api-key-box {
  background: linear-gradient(135deg, #f0fdf4 0%, #f8fafc 100%);
  border: 1.5px solid rgba(30,107,58,.25);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 24px;
  position: relative;
}
.api-key-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(30,107,58,.08), 0 2px 8px rgba(30,107,58,.06);
  pointer-events: none;
}
.api-key-box-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.api-key-box-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1e6b3a;
}
.api-key-box-desc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.api-key-box-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.api-key-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.api-key-field-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.7);
  border: 0.5px solid rgba(30,107,58,.15);
  border-radius: 7px;
}
.api-field-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  grid-column: 1;
}
.api-key-display-val {
  grid-column: 2;
  font-size: 13px;
  color: var(--text);
  font-family: monospace;
  letter-spacing: .04em;
}
.api-key-masked {
  color: var(--muted);
  letter-spacing: .15em;
  font-size: 14px;
}
.api-key-not-set {
  font-family: inherit;
  letter-spacing: 0;
  font-size: 12px;
  color: #dc2626;
  font-style: italic;
  font-weight: 500;
}
.api-key-input-wrap {
  grid-column: 2;
}
.api-key-input-wrap input,
.api-key-input-wrap select {
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  border: 0.5px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  padding: 0 10px;
  background: #fff;
  color: var(--text);
  font-family: monospace;
}
.api-key-input-wrap select {
  font-family: inherit;
}
.api-field-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  display: block;
}
.api-key-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: #1e6b3a;
  text-decoration: none;
  white-space: nowrap;
}
.api-key-link:hover { text-decoration: underline; }
.api-key-link svg { width: 11px; height: 11px; }
.api-provider-divider {
  padding: 6px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  border-top: 0.5px solid rgba(30,107,58,.12);
  margin-top: 4px;
}
.api-key-editing {
  border-color: #1e6b3a;
  box-shadow: 0 0 0 3px rgba(30,107,58,.1);
}

/* ═══════════════════════════════════════════════════════════════
   AI SEO — MODULE 6: CITATION TRACKING
═══════════════════════════════════════════════════════════════ */

/* Tabs */
.cit-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1.5px solid var(--border);
  margin-bottom: 18px;
  padding-bottom: 0;
}
.cit-tab-btn {
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: -1.5px;
  transition: color .15s, border-color .15s;
  border-radius: 0;
}
.cit-tab-btn:hover { color: var(--text); }
.cit-tab-btn.active { color: #1e6b3a; border-bottom-color: #1e6b3a; font-weight: 600; }

/* Summary cards */
.cit-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.cit-summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
}
.cit-summary-card.cit-som { border-color: #1e6b3a; background: #f0fdf4; }
.cit-summary-num {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.cit-summary-unit { font-size: 18px; font-weight: 500; color: var(--muted); margin-left: 2px; }
.cit-summary-lbl { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }
.cit-summary-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Engine grid */
.cit-engine-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.cit-engine-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--engine-color, #888);
  border-radius: 10px;
  padding: 14px 16px;
}
.cit-engine-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
}
.cit-engine-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cit-no-key-pill {
  margin-left: auto;
  font-size: 10px;
  background: #fee2e2;
  color: #991b1b;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 600;
}
.cit-engine-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}
.cit-stat-num { display: block; font-size: 20px; font-weight: 700; color: var(--text); }
.cit-stat-lbl { display: block; font-size: 11px; color: var(--muted); }
.cit-engine-sentiment-bar {
  height: 4px;
  border-radius: 2px;
  background: #f3f4f6;
  display: flex;
  overflow: hidden;
  margin-bottom: 6px;
}
.cit-sent-pos { background: #16a34a; height: 100%; }
.cit-sent-neu { background: #d97706; height: 100%; }
.cit-sent-neg { background: #dc2626; height: 100%; }
.cit-engine-last { font-size: 11px; color: var(--muted); }
.cit-engine-no-data { font-size: 12px; color: var(--muted); padding-top: 4px; }
.cit-engine-no-data a { color: #1e6b3a; }

/* Chart */
.cit-chart-card { padding: 14px 16px; margin-bottom: 18px; }
.cit-chart-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.cit-chart-svg { width: 100%; max-height: 180px; display: block; }

/* Engine badges */
.cit-engine-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--engine-color, #888) 12%, white);
  color: var(--engine-color, #888);
  border: 1px solid color-mix(in srgb, var(--engine-color, #888) 30%, white);
}

/* Sentiment badges */
.cit-sentiment {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.cit-pos { background: #dcfce7; color: #16a34a; }
.cit-neu { background: #fef3c7; color: #d97706; }
.cit-neg { background: #fee2e2; color: #dc2626; }
.cit-none { background: #f3f4f6; color: #6b7280; }

/* Mention badge */
.cit-mentioned {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.cit-mentioned svg { width: 11px; height: 11px; }
.cit-yes { background: #dcfce7; color: #16a34a; }
.cit-no { background: #fee2e2; color: #dc2626; }

/* Category badges */
.cit-cat-badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}
.cit-cat-branded { background: #dbeafe; color: #1e40af; }
.cit-cat-non-branded { background: #f3f4f6; color: #374151; }
.cit-cat-competitor { background: #fef3c7; color: #92400e; }
.cit-cat-local { background: #dcfce7; color: #065f46; }

/* Result rows */
.cit-result-row { cursor: pointer; }
.cit-result-row:hover td { background: rgba(30,107,58,.04); }
.cit-expand-row td { background: #f9fafb !important; }
.cit-snippet {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  padding: 10px 12px;
  border-left: 3px solid #1e6b3a;
  background: #f9fafb;
}
.cit-url-link { color: #1e6b3a; font-size: 12px; text-decoration: none; }
.cit-url-link:hover { text-decoration: underline; }

/* Filters bar */
.cit-filters-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.cit-filters-bar select { font-size: 13px; }

/* Prompts */
.cit-prompt-form {
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 16px;
}
.cit-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.cit-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.cit-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.cit-prompts-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.cit-prompt-text { font-size: 13px; font-weight: 500; }
.cit-prompt-keywords { font-size: 11px; margin-top: 2px; }
.cit-summary-pill {
  font-size: 11px;
  padding: 2px 8px;
  background: #f3f4f6;
  border-radius: 999px;
  color: #374151;
}

/* Suggestions panel */
.cit-suggestions-panel {
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.cit-suggestions-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.cit-suggestion-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 0.5px solid #d1fae5;
  cursor: pointer;
  font-size: 13px;
}
.cit-suggestion-row:last-of-type { border-bottom: none; }
.cit-suggest-cat {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  white-space: nowrap;
}
.cit-suggest-cat.branded { background: #dbeafe; color: #1e40af; }
.cit-suggest-cat.non-branded { background: #f3f4f6; color: #374151; }
.cit-suggest-cat.competitor { background: #fef3c7; color: #92400e; }
.cit-suggest-cat.local { background: #dcfce7; color: #065f46; }

/* Competitors tab */
.cit-section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 16px;
}
.cit-section-card h4 { margin: 0 0 12px; font-size: 14px; }

/* Settings tab */
.cit-settings-sections { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.cit-engine-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--border);
}
.cit-engine-toggle-row:last-of-type { border-bottom: none; }
.cit-engine-toggle-label { flex: 1; font-size: 13px; }
.cit-key-ok { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #16a34a; margin-left: 6px; }
.cit-key-ok svg { width: 11px; height: 11px; }
.cit-key-missing { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #d97706; margin-left: 6px; }
.cit-key-missing svg { width: 11px; height: 11px; }
.cit-key-missing a { color: #d97706; }

/* Toggle switch (reusable) */
.cit-toggle-inline { display: inline-flex; align-items: center; cursor: pointer; }
.cit-toggle-inline input { display: none; }
.cit-toggle-track {
  width: 36px; height: 20px;
  background: #d1d5db;
  border-radius: 999px;
  position: relative;
  transition: background .2s;
  flex-shrink: 0;
}
.cit-toggle-track::after {
  content: '';
  position: absolute;
  left: 2px; top: 2px;
  width: 16px; height: 16px;
  background: white;
  border-radius: 50%;
  transition: left .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.cit-toggle-inline input:checked + .cit-toggle-track { background: #1e6b3a; }
.cit-toggle-inline input:checked + .cit-toggle-track::after { left: 18px; }
.cit-toggle-inline input:disabled + .cit-toggle-track { opacity: .45; cursor: not-allowed; }

/* Run banner */
.cit-run-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 14px;
}
.cit-run-spinner {
  width: 16px; height: 16px;
  border: 2px solid #bbf7d0;
  border-top-color: #1e6b3a;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Empty state */
.cit-empty-state {
  text-align: center;
  padding: 60px 24px;
  color: var(--muted);
}
.cit-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: .35; }
.cit-empty-icon svg { width: 52px; height: 52px; }
.cit-empty-state h3 { font-size: 18px; color: var(--text); margin: 0 0 8px; }
.cit-empty-state p { font-size: 14px; max-width: 380px; margin: 0 auto 20px; line-height: 1.5; }

/* Note text */
.cit-note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AI PROVIDERS — styles
   ═══════════════════════════════════════════════════════════════════════════ */

.aip-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.aip-table th {
  text-align: left;
  padding: 10px 14px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 0.5px solid var(--border);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.aip-table td {
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--border);
  vertical-align: middle;
}
.aip-table tbody tr:last-child td { border-bottom: none; }
.aip-table tbody tr:hover { background: #f9fafb; }
.aip-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
}
.aip-badge-connected { background:#dcfce7; color:#166534; }
.aip-badge-invalid   { background:#fee2e2; color:#991b1b; }
.aip-badge-untested  { background:#f1f5f9; color:#64748b; }
.aip-provider-tag {
  display: inline-block;
  background: #f1f5f9;
  color: #334155;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}
.aip-default-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #1e6b3a;
  margin-left: 4px;
}
.aip-actions { display: flex; gap: 6px; }
.aip-test-result {
  padding: 10px 16px;
  font-size: 13px;
  border-top: 0.5px solid var(--border);
}
.aip-test-result.ok { background: #f0fdf4; color: #166534; }
.aip-test-result.err { background: #fef2f2; color: #991b1b; }
.aip-empty { padding: 32px 20px; color: var(--muted); font-size: 14px; }
.aip-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 200;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.aip-drawer {
  background: #fff;
  width: 420px;
  max-width: 95vw;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,.12);
}
.aip-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 0.5px solid var(--border);
  font-weight: 600;
  font-size: 15px;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
.aip-drawer-body { padding: 20px; flex: 1; }
.aip-drawer-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 20px;
  border-top: 0.5px solid var(--border);
  position: sticky;
  bottom: 0;
  background: #fff;
}
.aip-usage-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.aip-usage-card {
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}
.aip-usage-val { font-size: 22px; font-weight: 700; color: var(--text); }
.aip-usage-lbl { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT ASSISTANT — styles
   ═══════════════════════════════════════════════════════════════════════════ */

.ca-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  align-items: flex-start;
  margin-top: 4px;
}
@media (max-width: 900px) {
  .ca-layout { grid-template-columns: 1fr; }
}
.ca-brief-panel {
  background: #fff;
  border: 0.5px solid var(--border);
  border-radius: 10px;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.ca-brief-panel.collapsed { overflow: visible; }
.ca-brief-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 0.5px solid var(--border);
  position: sticky;
  top: 0;
  background: #fff;
  border-radius: 10px 10px 0 0;
}
.ca-brief-panel.collapsed .ca-brief-header { border-bottom: none; border-radius: 10px; }
.ca-brief-body { padding: 14px; }
.ca-brief-section { margin-bottom: 18px; }
.ca-brief-section:last-child { margin-bottom: 0; }
.ca-brief-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 8px;
}
.ca-page-ref {
  margin-top: 8px;
  padding: 8px;
  background: #f8fafc;
  border-radius: 6px;
  border: 0.5px solid var(--border);
}
.ca-comp-url-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ca-comp-url-label { flex: 1; min-width: 0; }
.ca-comp-table { font-size: 12px; margin-top: 10px; }
.ca-comp-table th, .ca-comp-table td { padding: 6px 10px; }
.ca-gen-panel {
  background: #fff;
  border: 0.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.ca-tab-nav {
  display: flex;
  border-bottom: 0.5px solid var(--border);
  overflow-x: auto;
  background: #f8fafc;
}
.ca-tab-btn {
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.ca-tab-btn:hover { color: var(--text); }
.ca-tab-btn.active { color: #1e6b3a; border-bottom-color: #1e6b3a; font-weight: 600; }
.ca-tab-body { padding: 20px; }
.ca-tab-actions { margin-bottom: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ca-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
.ca-usage { font-size: 11px; color: var(--muted); }
.ca-variants { display: flex; flex-direction: column; gap: 14px; }
.ca-variant {
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  cursor: pointer;
  transition: border-color .15s;
}
.ca-variant.selected { border-color: #1e6b3a; background: #f0fdf4; }
.ca-variant-select-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ca-field-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ca-field-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing:.05em; color: var(--muted); }
.ca-char-count { font-size: 11px; font-weight: 600; margin-left: auto; }
.cc-good { color: #166534; }
.cc-warn { color: #b45309; }
.cc-bad  { color: #991b1b; }
.ca-field-value { font-size: 14px; color: var(--text); line-height: 1.5; word-break: break-word; }
.ca-serp-preview {
  margin-top: 12px;
  padding: 10px 14px;
  background: #fff;
  border: 0.5px solid #e2e8f0;
  border-radius: 6px;
  font-family: Arial, sans-serif;
}
.ca-serp-url { font-size: 12px; color: #202124; margin-bottom: 2px; }
.ca-serp-title { font-size: 18px; color: #1a0dab; font-weight: 400; margin-bottom: 3px; line-height: 1.3; }
.ca-serp-desc { font-size: 13px; color: #4d5156; line-height: 1.4; }
.ca-faq-list { display: flex; flex-direction: column; gap: 12px; }
.ca-faq-item { border: 0.5px solid var(--border); border-radius: 8px; padding: 14px; }
.ca-faq-check { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; cursor: pointer; }
.ca-summary-preview {
  font-size: 14px;
  line-height: 1.6;
  padding: 10px;
  background: #f8fafc;
  border-radius: 6px;
  border-left: 3px solid #1e6b3a;
  margin-top: 8px;
}
.ca-rewrite-diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 700px) { .ca-rewrite-diff { grid-template-columns: 1fr; } }
.ca-diff-col { border: 0.5px solid var(--border); border-radius: 8px; overflow: hidden; }
.ca-diff-header {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ca-diff-header.original { background: #fef2f2; color: #991b1b; }
.ca-diff-header.suggested { background: #f0fdf4; color: #166534; }
.ca-diff-body { padding: 12px 14px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.ca-explanation { padding: 6px 0; }
.ca-og-preview { margin-top: 12px; }
.ca-og-card {
  border: 0.5px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  max-width: 500px;
  font-family: Arial, sans-serif;
}
.ca-og-card-img {
  width: 120px;
  flex-shrink: 0;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #64748b;
}
.ca-og-card-body { padding: 10px 12px; flex: 1; }
.ca-og-card-title { font-size: 14px; font-weight: 600; color: #1a202c; margin-bottom: 4px; }
.ca-og-card-desc { font-size: 12px; color: #4a5568; line-height: 1.4; margin-bottom: 4px; }
.ca-og-card-url { font-size: 11px; color: #718096; }
.ca-apply-row { display: flex; gap: 10px; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 0.5px solid var(--border); }
.ca-empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT GAP FINDER — styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* Summary strip */
.gap-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 4px;
}
@media (max-width: 800px) { .gap-summary-strip { grid-template-columns: repeat(2, 1fr); } }
.gap-summary-card {
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  border-top: 3px solid transparent;
}
.gap-card-gap     { background:#fef2f2; border-top-color:#dc2626; }
.gap-card-high    { background:#fff7ed; border-top-color:#ea580c; }
.gap-card-partial { background:#fffbeb; border-top-color:#d97706; }
.gap-card-ok      { background:#f0fdf4; border-top-color:#16a34a; }
.gap-summary-val  { font-size: 28px; font-weight: 700; color: var(--text); }
.gap-summary-lbl  { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Run panel */
.gap-run-panel {
  background: #f8fafc;
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}
.gap-run-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: 15px;
}
/* Run banner */
.gap-run-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #eff6ff;
  border: 0.5px solid #bfdbfe;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  font-size: 13px;
}
.gap-progress-bar {
  flex: 1;
  height: 6px;
  background: #dbeafe;
  border-radius: 3px;
  overflow: hidden;
}
.gap-progress-fill {
  height: 100%;
  background: #2563eb;
  border-radius: 3px;
  transition: width .3s;
}

/* Coverage badges */
.gap-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.gap-covered { background: #dcfce7; color: #166534; }
.gap-partial  { background: #fef9c3; color: #713f12; }
.gap-gap      { background: #fee2e2; color: #991b1b; }
.gap-high     { background: #fee2e2; color: #991b1b; }
.gap-medium   { background: #fef9c3; color: #713f12; }
.gap-low      { background: #f1f5f9; color: #64748b; }
.gap-unknown  { background: #f1f5f9; color: #64748b; }
/* Source badge */
.gap-source-badge {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* Filters */
.gap-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.gap-filter-sel {
  padding: 6px 10px;
  border: 0.5px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  min-width: 130px;
}
.gap-filter-inp {
  padding: 6px 10px;
  border: 0.5px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  flex: 1;
  min-width: 180px;
}

/* Results table */
.gap-results-table { table-layout: auto; }
.gap-row { transition: background .1s; }
.gap-row:hover { background: #f8fafc; }
.gap-row.expanded { background: #f0fdf4; }
.gap-question { font-size: 13px; font-weight: 500; line-height: 1.4; }
.gap-category { margin-top: 2px; }
.gap-detail-panel {
  margin-top: 10px;
  padding: 10px;
  background: #fff;
  border: 0.5px solid var(--border);
  border-radius: 6px;
}

/* Pagination */
.gap-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 0.5px solid var(--border);
}

/* Tab count chip */
.gap-count-chip {
  display: inline-block;
  background: #e2e8f0;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
}

/* Discovery tab */
.gap-suggestions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.gap-suggestion-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 0.5px solid var(--border);
  border-radius: 6px;
}

/* Template form */
.gap-tpl-form {
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  background: #f8fafc;
}

/* Global keys banner */
.aip-global-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #f0fdf4;
  border: 0.5px solid #bbf7d0;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.aip-global-banner-body {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SITEMAP — GSC Banner, Submit button states, Popover
   ═══════════════════════════════════════════════════════════════════════════ */

.smap-gsc-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff8ed;
  border: 0.5px solid #fcd38a;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
}
.smap-gsc-banner-icon { font-size: 16px; flex-shrink: 0; }
.smap-gsc-banner-text { flex: 1; color: var(--text); }
.smap-gsc-banner-cta {
  background: none; border: none; color: #b45309;
  font-weight: 600; font-size: 13px; cursor: pointer;
  padding: 0; white-space: nowrap; text-decoration: underline;
}
.smap-gsc-banner-close {
  background: none; border: none; color: var(--muted);
  font-size: 16px; cursor: pointer; padding: 0 2px; line-height: 1; flex-shrink: 0;
}

.smap-action-outline-amber {
  background: transparent;
  border: 1.5px solid #f59e0b;
  color: #b45309;
  display: flex;
  align-items: center;
  gap: 6px;
}
.smap-action-outline-amber:hover { background: #fff8ed; }
.smap-amber-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #f59e0b; display: inline-block; flex-shrink: 0;
}

.smap-submit-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.smap-submit-sub  { font-size: 10px; color: var(--muted); }
.smap-submit-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.smap-submit-popover-cta { background: var(--primary, #0f172a); color: #fff; border: none; }
.smap-submit-popover-recheck { background: transparent; border: 1px solid var(--border); color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════════════
   SETTINGS — Integrations tab
   ═══════════════════════════════════════════════════════════════════════════ */

.intg-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--card-bg, #fff);
}
.intg-card-highlight { animation: intgGlowPulse 2s ease-out forwards; }
@keyframes intgGlowPulse {
  0%   { box-shadow: 0 0 0 3px rgba(59,130,246,.50); border-color: #3b82f6; }
  80%  { box-shadow: 0 0 0 3px rgba(59,130,246,.10); border-color: #3b82f6; }
  100% { box-shadow: none; border-color: var(--border); }
}
.intg-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface, #f8fafc);
}
.intg-card-body   { padding: 16px; }
.intg-card-desc   { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.intg-card-loading { font-size: 13px; color: var(--muted); }
.intg-status-dot  { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-green { background: #16a34a; }
.dot-amber { background: #f59e0b; }
.dot-grey  { background: #9ca3af; }

.intg-connect-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--primary, #0f172a); color: #fff; border: none;
  border-radius: 7px; padding: 8px 16px; font-size: 13px;
  font-weight: 500; cursor: pointer; text-decoration: none;
}
.intg-connect-btn:hover { opacity: .88; }
.intg-connected-as    { font-size: 13px; color: var(--text); font-weight: 500; }
.intg-connected-email { font-size: 12px; color: var(--muted); margin-top: 2px; }
.intg-select { font-size: 13px; flex: 1; }
.intg-amber-banner {
  background: #fff8ed; border: 0.5px solid #fcd38a;
  border-radius: 6px; padding: 8px 12px;
  font-size: 12px; color: #92400e; margin-bottom: 10px;
}
.intg-amber-banner a { color: #b45309; text-decoration: underline; }


/* ═══════════════════════════════════════════════════════════════
   SEO TASK MANAGER
═══════════════════════════════════════════════════════════════ */
.tm-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 4px;
}
.tm-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.tm-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tm-stat-num {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}
.tm-stat-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.tm-task-table {
  width: 100%;
  border-collapse: collapse;
}
.tm-task-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  white-space: nowrap;
}
.tm-task-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.tm-task-row {
  cursor: pointer;
}
.tm-task-row:hover td {
  background: var(--bg);
}
.tm-task-row:last-child td {
  border-bottom: none;
}
.tm-task-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}
.tm-type-chip {
  font-size: 10px;
  padding: 1px 6px;
  background: var(--border);
  border-radius: 4px;
  color: var(--muted);
}
.tm-priority-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}
.tm-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 500;
}
.tm-impact-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tm-impact-bar-track {
  flex: 1;
  height: 5px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}
.tm-impact-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .2s;
}
.tm-impact-bar-num {
  font-size: 11px;
  font-weight: 600;
  min-width: 14px;
}
.tm-col-sm {
  white-space: nowrap;
}
.tm-source-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  background: #dbeafe;
  color: #1e40af;
  margin-left: 6px;
}
.tm-checklist-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.tm-checklist-row:last-of-type {
  border-bottom: none;
}
.tm-shortcut-btn {
  font-size: 12px !important;
  padding: 5px 10px !important;
}
.tm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 49;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tm-modal {
  background: var(--surface);
  border-radius: 12px;
  width: 540px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.tm-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.tm-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tm-modal-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
@media (max-width: 900px) {
  .tm-summary-strip { grid-template-columns: 1fr 1fr; }
  .tm-col-sm { display: none; }
  .tm-task-table th.tm-col-sm { display: none; }
}


/* ============================================================================
   Contact Page Builder Studio (.cpb-*) CSS Rules
   ========================================================================== */

.cpb-studio {
  display: flex !important;
  flex-direction: column !important;
  height: calc(100vh - 60px) !important;
  min-height: 640px !important;
  background: #0f172a !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: #f8fafc !important;
}

.cpb-topbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 10px 20px !important;
  background: #0f172a !important;
  border-bottom: 1px solid #1e293b !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.cpb-topbar-left,
.cpb-topbar-right {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  width: auto !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

.cpb-page-title {
  color: #f8fafc !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

.cpb-page-slug {
  color: #64748b !important;
  font-size: 12px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

.cpb-divider-v {
  width: 1px !important;
  height: 18px !important;
  background: #334155 !important;
  display: inline-block !important;
}

.cpb-chip {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155 !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.cpb-chip:hover {
  background: #334155 !important;
  color: #ffffff !important;
}

.cpb-chip-primary {
  background: #1e6b3a !important;
  border-color: #1e6b3a !important;
  color: #ffffff !important;
}
.cpb-chip-primary:hover {
  background: #15542d !important;
}

.cpb-save-status {
  font-size: 12px !important;
  color: #94a3b8 !important;
}

.viewport-toggle {
  display: inline-flex !important;
  flex-direction: row !important;
  gap: 4px !important;
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  border-radius: 8px !important;
  padding: 3px !important;
  width: auto !important;
  margin: 0 !important;
}

.viewport-toggle-btn {
  color: #94a3b8 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  width: auto !important;
  display: inline-block !important;
  margin: 0 !important;
}
.viewport-toggle-btn:hover {
  color: #e2e8f0 !important;
}
.viewport-toggle-btn.active {
  color: #ffffff !important;
  background: #1e6b3a !important;
}

.cpb-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  background: #f8fafc !important;
}

.cpb-rail {
  flex: 0 0 52px !important;
  background: #0f172a !important;
  border-right: 1px solid #1e293b !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 0 !important;
}

.cpb-rail-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: #94a3b8 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.cpb-rail-btn:hover {
  background: #1e293b !important;
  color: #ffffff !important;
}
.cpb-rail-btn.active {
  background: #1e6b3a !important;
  color: #ffffff !important;
}

.cpb-left {
  flex: 0 0 280px !important;
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  color: #0f172a !important;
}

.cpb-left-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.cpb-left-search {
  padding: 10px 12px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.cpb-left-search input {
  width: 100% !important;
  padding: 8px 12px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  font-size: 12px !important;
}

.cpb-left-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 12px !important;
}

.cpb-mini-btn {
  background: #1e6b3a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  width: auto !important;
}

.cpb-canvas {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow-y: auto !important;
  padding: 24px !important;
  background: #f8fafc !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.cpb-frame {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.cpb-inspector {
  flex: 0 0 320px !important;
  background: #ffffff !important;
  border-left: 1px solid #e2e8f0 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 16px !important;
  color: #0f172a !important;
}