.ca-wrap *,.ca-wrap *::before,.ca-wrap *::after{box-sizing:border-box}
.ca-wrap{font-family:'DM Sans',system-ui,sans-serif;color:#111827;width:100%;max-width:100%!important;-webkit-font-smoothing:antialiased}
.ca-wrap ::-webkit-scrollbar{width:5px;height:5px}
.ca-wrap ::-webkit-scrollbar-track{background:#f1f5f9}
.ca-wrap ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}

/* ── APP ── */
.ca-wrap #ca-app{
  display:flex;flex-direction:column;width:100%;background:#f8fafc;
  border-top:3px solid #6366f1;
  box-shadow:0 4px 24px rgba(99,102,241,.08);
  border-radius:0 0 12px 12px;
}
.ca-wrap #ca-app.results-mode{
  height:calc(100vh - 80px);
  min-height:650px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.admin-bar .ca-wrap #ca-app.results-mode{
  height:calc(100vh - 112px);
}
@media(max-width:782px){
  .admin-bar .ca-wrap #ca-app.results-mode{height:calc(100vh - 126px)}
}

/* ── RESULTS WRAPPER ── */
.ca-wrap #ca-results-wrap{
  width:100%;padding:0 10%;
  flex:1;display:flex;flex-direction:column;
  overflow:hidden;min-height:0;
}
@media(max-width:900px){.ca-wrap #ca-results-wrap{padding:0 3%}}

/* ── TOPBAR: sticky to page scroll ── */
.ca-wrap #topbar{
  background:#fff;border-bottom:1px solid #e5e7eb;
  padding:12px 0;
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;gap:8px;flex-wrap:wrap;
  box-shadow:0 2px 8px rgba(99,102,241,.08);
  position:sticky;top:0;z-index:9999;
}
/* Account for WP admin bar */
.admin-bar .ca-wrap #topbar{top:32px}
@media(max-width:782px){.admin-bar .ca-wrap #topbar{top:46px}}

/* ── BODY ── */
.ca-wrap #body{
  flex:1;display:flex;
  align-items:flex-start;
  min-height:0;overflow:hidden;
  border:1px solid #e5e7eb;
  border-radius:0 0 10px 10px;
}
@media(max-width:860px){.ca-wrap #body{flex-direction:column}}

/* ── LEFT PANEL: scrolls independently ── */
.ca-wrap #left-panel{
  flex:0 0 55%;
  height:100%;           /* fill body height */
  overflow-y:auto;       /* LEFT PANEL scrolls */
  border-right:1px solid #e5e7eb;
  background:#fff;
  min-width:0;
}
.ca-wrap #text-content{
  padding:20px 24px;
  line-height:1.85;font-size:14px;color:#374151;
}

/* ── RIGHT COLUMN: fixed height, tabs at top, content scrolls ── */
.ca-wrap #right-col{
  flex:0 0 45%;
  height:100%;
  display:flex;
  flex-direction:column;
  background:#f8fafc;
  min-width:0;
  overflow:hidden;       /* right-col itself does NOT scroll */
}
/* TABS: always visible at top of right-col, never scrolls away */
.ca-wrap .tabs{
  padding:5px 8px;
  border-bottom:1px solid #e5e7eb;
  display:flex;gap:4px;flex-wrap:wrap;
  background:#fff;
  flex-shrink:0;         /* never shrinks */
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
/* RIGHT PANEL: scrollable content area below tabs */
.ca-wrap #right-panel{
  flex:1;
  overflow-y:auto;       /* THIS scrolls */
  min-height:0;
  background:#f8fafc;
}
.ca-wrap #right-scroll{padding:10px}

.ca-wrap .tab{background:transparent;border:none!important;cursor:pointer;padding:5px 10px;border-radius:8px;font-size:11px;font-weight:700;color:#6b7280;transition:all .15s;white-space:nowrap;font-family:inherit;box-shadow:none!important}
.ca-wrap .tab.active{background:#6366f1!important;color:#fff!important}
.ca-wrap .tab:hover:not(.active){background:#f3f4f6!important}

/* ── INPUT SCREEN ── */
.ca-wrap #input-screen{background:#f8fafc;padding:28px 10% 80px;display:flex;flex-direction:column;align-items:center}
.ca-wrap .input-wrap{width:100%;max-width:100%}

/* ── CARDS ── */
.ca-wrap .card{background:#fff;border-radius:14px;border:1px solid #e5e7eb;padding:18px;margin-bottom:12px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.ca-wrap .badge-pill{display:inline-flex;align-items:center;background:#ede9fe;border:1px solid #c4b5fd;border-radius:40px;padding:4px 16px;margin-bottom:14px}
.ca-wrap .badge-text{color:#7c3aed;font-size:10px;font-weight:800;letter-spacing:.15em}
.ca-wrap h1.app-title{font-family:'DM Serif Display',serif!important;font-size:30px!important;font-weight:400!important;color:#111827!important;margin:0 0 6px!important;line-height:1.1!important;border:none!important;padding:0!important}
.ca-wrap .app-sub{color:#6b7280;font-size:13px;margin-bottom:24px}

/* ── FORMS ── */
.ca-wrap .inp{width:100%;background:#f9fafb;border:1.5px solid #e5e7eb!important;border-radius:10px;padding:13px;color:#111827;font-size:13px;resize:vertical;outline:none;font-family:'JetBrains Mono',monospace;line-height:1.6;transition:border-color .15s;box-shadow:none!important}
.ca-wrap .inp:focus{border-color:#6366f1!important;box-shadow:0 0 0 3px rgba(99,102,241,.1)!important}
.ca-wrap .editor-area{min-height:200px;max-height:340px;overflow:auto;background:#f9fafb;border:1.5px solid #e5e7eb;border-radius:10px;padding:14px;font-size:13px;line-height:1.85;color:#111827;outline:none;cursor:text}
.ca-wrap .editor-area:focus{border-color:#6366f1}
.ca-wrap .editor-area:empty::before{content:attr(data-placeholder);color:#9ca3af;pointer-events:none}

/* ── BUTTONS ── */
.ca-wrap .btn{display:inline-flex;align-items:center;gap:5px;border:none!important;border-radius:8px;padding:6px 13px;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;font-family:inherit;white-space:nowrap;text-decoration:none!important;line-height:1.4}
.ca-wrap .btn-primary{background:linear-gradient(135deg,#6366f1,#8b5cf6)!important;color:#fff!important;width:100%;padding:14px;font-size:14px;border-radius:13px;justify-content:center;box-shadow:0 4px 20px rgba(99,102,241,.25)}
.ca-wrap .btn-primary:hover{opacity:.92;color:#fff!important}
.ca-wrap .btn-ghost{background:#f3f4f6!important;color:#6b7280!important;border:1px solid #e5e7eb!important}
.ca-wrap .btn-ghost:hover{background:#e5e7eb!important;color:#374151!important}
.ca-wrap .btn-violet{background:#ede9fe!important;color:#7c3aed!important;border:1px solid #c4b5fd!important}
.ca-wrap .btn-green{background:#dcfce7!important;color:#16a34a!important;border:1px solid #86efac!important}
.ca-wrap .btn-red{background:#fee2e2!important;color:#dc2626!important;border:1px solid #fca5a5!important}
.ca-wrap .btn-blue{background:#dbeafe!important;color:#2563eb!important;border:1px solid #93c5fd!important}
.ca-wrap .btn-sm{padding:3px 9px;font-size:10px;border-radius:6px}
.ca-wrap .btn-toolbar{background:#f3f4f6;color:#374151;border:1px solid #e5e7eb!important;border-radius:5px;padding:3px 9px;font-size:11px;cursor:pointer;font-weight:700;font-family:inherit}
.ca-wrap .btn-toolbar:hover{background:#e5e7eb}
.ca-wrap button:focus{outline:none;box-shadow:none!important}
.ca-wrap .mode-toggle{display:flex;gap:4px;background:#f3f4f6;border-radius:9px;padding:3px;margin-bottom:16px;width:fit-content}

/* ── RINGS ── */
.ca-wrap .rings{display:flex;gap:6px;align-items:center}
.ca-wrap .ring-wrap{text-align:center}
.ca-wrap .ring-label{font-size:9px;color:#9ca3af;font-weight:700;letter-spacing:.08em;margin-top:2px}

/* ── ANALYSIS CARDS ── */
.ca-wrap .rcard{background:#fff;border-radius:10px;padding:12px;margin-bottom:10px;border:1px solid #e5e7eb}
.ca-wrap .rcard-title{font-size:9px;color:#9ca3af;font-weight:700;letter-spacing:.08em;margin-bottom:6px;text-transform:uppercase}
.ca-wrap .score-card{border-radius:12px;padding:16px;margin-bottom:12px;text-align:center;border:1px solid}
.ca-wrap .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px}
.ca-wrap .stat-box{background:#fff;border-radius:8px;padding:9px 11px;border:1px solid #e5e7eb}
.ca-wrap .stat-val{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:900}
.ca-wrap .stat-lbl{font-size:9px;color:#9ca3af;margin-top:1px}

/* ── ROWS ── */
.ca-wrap .prow{padding:8px 10px;border-radius:8px;cursor:pointer;margin-bottom:5px;border:1px solid #f3f4f6;background:#fff;display:flex;gap:8px;align-items:flex-start;transition:all .15s}
.ca-wrap .prow:hover{background:#f9fafb;border-color:#e5e7eb}
.ca-wrap .prow.active{background:#fefce8;border-color:#fde047}
.ca-wrap .srow{padding:7px 10px;border-radius:8px;cursor:pointer;margin-bottom:4px;border:1px solid #f3f4f6;background:#fff;display:flex;gap:9px;align-items:flex-start;transition:all .15s}
.ca-wrap .srow:hover{background:#f9fafb}
.ca-wrap .srow.active{background:#eff6ff;border-color:#bfdbfe}
.ca-wrap .scale-row{display:grid;grid-template-columns:48px 1fr 1fr;gap:4px;align-items:center;padding:5px 8px;border-radius:6px;margin-bottom:2px;border:1px solid transparent;transition:all .2s}
.ca-wrap .scale-row.active{border-color:var(--sc)!important;background:var(--scbg)!important}

/* ── MISC ── */
.ca-wrap .diff-banner{padding:6px 14px;background:#eff6ff;border-bottom:1px solid #bfdbfe;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;font-size:11px;color:#2563eb;font-weight:600;flex-wrap:wrap;gap:6px}
.ca-wrap .edit-toolbar{padding:6px 14px;border-bottom:1px solid #e0e7ff;background:#f5f3ff;display:flex;gap:4px;flex-wrap:wrap;align-items:center;flex-shrink:0}
.ca-wrap .edit-mode-label{font-size:10px;color:#7c3aed;font-weight:700;margin-right:4px}
.ca-wrap #edit-area{min-height:100%;outline:none;font-size:14px;line-height:1.85;color:#374151;font-family:'DM Sans',system-ui,sans-serif}
.ca-wrap #content-view{font-size:14px;line-height:1.85;color:#374151;word-break:break-word}
.ca-wrap #content-view h1{font-size:22px!important;font-weight:800!important;color:#111827!important;margin:18px 0 8px!important;line-height:1.2!important;border:none!important;padding:0!important}
.ca-wrap #content-view h2{font-size:18px!important;font-weight:700!important;color:#1f2937!important;margin:16px 0 6px!important;border:none!important}
.ca-wrap #content-view h3{font-size:15px!important;font-weight:700!important;color:#374151!important;margin:13px 0 5px!important}
.ca-wrap #content-view p{margin:0 0 12px!important;line-height:1.8!important}
.ca-wrap #content-view ul{list-style:disc!important;padding-left:20px!important;margin:0 0 12px!important}
.ca-wrap #content-view ol{list-style:decimal!important;padding-left:20px!important;margin:0 0 12px!important}
.ca-wrap #content-view li{margin-bottom:4px!important}
.ca-wrap #content-view strong,.ca-wrap #content-view b{font-weight:700!important}
.ca-wrap #content-view a{color:#2563eb!important;text-decoration:underline!important}
.ca-wrap #content-view mark.kw-mark{border-radius:3px;padding:0 2px;font-style:normal}
.ca-wrap .img-box{margin:14px 0;border:2px dashed #d1d5db;border-radius:10px;padding:14px 18px;background:#f9fafb;display:flex;align-items:center;gap:14px}
.ca-wrap .img-icon{width:48px;height:48px;background:#e5e7eb;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:22px}
.ca-wrap .img-alt-ok{font-size:11px;color:#6b7280;margin-top:2px;font-style:italic}
.ca-wrap .img-alt-miss{font-size:11px;color:#dc2626;font-weight:700;margin-top:2px}
.ca-wrap .kw-card{border-radius:10px;padding:10px 12px;margin-bottom:8px;cursor:pointer;transition:all .15s;border:1.5px solid}
.ca-wrap .kw-bar-track{height:4px;background:#f3f4f6;border-radius:2px;margin:5px 0}
.ca-wrap .kw-bar-fill{height:100%;border-radius:2px}
.ca-wrap .geo-row{padding:9px 11px;border-radius:8px;background:#fff;border:1px solid #e5e7eb;margin-bottom:5px;transition:all .15s;cursor:pointer}
.ca-wrap .geo-row.active{background:#eff6ff;border-color:#bfdbfe}
.ca-wrap .geo-bar{height:4px;background:#f3f4f6;border-radius:2px;margin-top:4px;overflow:hidden}
.ca-wrap .geo-bar-fill{height:100%;border-radius:2px;transition:width 1s}
.ca-wrap .ver-panel{border-bottom:1px solid #e5e7eb;background:#fff;max-height:220px;overflow:auto;padding:10px;position:sticky;top:42px;z-index:40}
.ca-wrap .ver-card{padding:8px 10px;border-radius:8px;border:1.5px solid #f3f4f6;background:#fff;margin-bottom:4px;transition:all .15s}
.ca-wrap .ver-card.current{border-color:#e5e7eb;background:#f8fafc}
.ca-wrap .ver-card.selected{border-color:#6366f1;background:#ede9fe}
.ca-wrap .ver-dot{width:6px;height:6px;border-radius:50%;background:#16a34a;display:inline-block}
.ca-wrap .ver-badge{font-size:9px;background:#dcfce7;color:#16a34a;border-radius:10px;padding:1px 6px;font-weight:700}
.ca-wrap .ver-actions{display:flex;gap:5px;margin-top:4px;padding-left:4px}
.ca-wrap .version-indicator{display:flex;align-items:center;gap:6px;background:#f3f4f6;border-radius:8px;padding:4px 10px}
.ca-wrap .save-msg{font-size:11px;font-weight:700;background:#f0fdf4;border:1px solid #86efac;color:#16a34a;border-radius:8px;padding:3px 10px}
.ca-wrap .htag-badge{font-size:8px;color:#9ca3af;font-weight:700;background:#f3f4f6;border-radius:4px;padding:1px 5px;margin-right:6px;vertical-align:middle;font-family:inherit;text-transform:none}

/* ── ANIMATIONS ── */
@keyframes ca-fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ca-wrap .fade-in{animation:ca-fadeIn .3s ease both}

/* ── WP RESETS ── */
.ca-wrap ul,.ca-wrap ol{margin:0;padding:0;list-style:none}
.ca-wrap a{text-decoration:none}
.ca-wrap #content-view ul{list-style:disc!important;padding-left:20px!important}
.ca-wrap #content-view ol{list-style:decimal!important;padding-left:20px!important}
.ca-wrap #edit-area ul{list-style:disc!important;padding-left:20px!important}
.ca-wrap #edit-area ol{list-style:decimal!important;padding-left:20px!important}

/* ── PRINT ── */
@media print{.ca-wrap #ca-app{display:none!important}}

/* ── MOBILE ── */
@media(max-width:859px){
  .ca-wrap #body{flex-direction:column;height:auto;overflow:visible}
  .ca-wrap #left-panel,.ca-wrap #right-col{height:auto;overflow-y:visible;width:100%;flex:none}
  .ca-wrap #left-panel{max-height:60vh;overflow-y:auto;border-right:none;border-bottom:2px solid #e5e7eb}
  .ca-wrap #right-col{max-height:none}
  .ca-wrap #right-panel{overflow-y:visible;height:auto}
  .ca-wrap #ca-app.results-mode{height:auto;overflow:visible}
  .ca-wrap #ca-results-wrap{overflow:visible}
}

/* ══ FORCE TABS VISIBLE — override any WP theme ══ */
.ca-wrap #right-tabs,
.ca-wrap .tabs,
.ca-wrap div.tabs {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  flex-wrap: wrap !important;
  flex-shrink: 0 !important;
  padding: 6px 8px !important;
  background: #fff !important;
  border-bottom: 1px solid #e5e7eb !important;
  position: relative !important;  /* NOT sticky in WP — avoids z-index/overflow conflicts */
  z-index: 50 !important;
}

/* ══ FORCE RIGHT-COL VISIBLE ══ */
.ca-wrap #right-col {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 45% !important;
  width: 45% !important;
  height: 100% !important;
  overflow: hidden !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ══ FORCE RIGHT-PANEL (scroll area) ══ */
.ca-wrap #right-panel {
  display: block !important;
  flex: 1 !important;
  overflow-y: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 0 !important;
}

/* ══ FORCE BODY LAYOUT ══ */
.ca-wrap #body {
  display: flex !important;
  flex-direction: row !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  height: 100% !important;
}

/* ══ FORCE LEFT-PANEL ══ */
.ca-wrap #left-panel {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 55% !important;
  width: 55% !important;
  height: 100% !important;
  overflow-y: auto !important;
  visibility: visible !important;
}

/* ══ TAB BUTTONS ══ */
.ca-wrap .tab,
.ca-wrap button.tab {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  padding: 5px 10px !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  background: transparent !important;
  color: #6b7280 !important;
}
.ca-wrap .tab.active,
.ca-wrap button.tab.active {
  background: #6366f1 !important;
  color: #fff !important;
}
.ca-wrap .tab:hover:not(.active),
.ca-wrap button.tab:hover:not(.active) {
  background: #f3f4f6 !important;
  color: #374151 !important;
}

/* ══════════════════════════════════════════════════════
   CRITICAL FIX: Force tabs visible
   The WP theme collapses height:100% children to 0
   when parent has no explicit height in flow context.
═══════════════════════════════════════════════════════ */

/* Remove height:100% — use flex stretch instead */
.ca-wrap #right-col {
  flex: 0 0 45% !important;
  width: 45% !important;
  height: auto !important;
  min-height: 300px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  align-self: stretch !important;
  margin: 33px 0 0 0 !important;
}

.ca-wrap #left-panel {
  flex: 0 0 55% !important;
  width: 55% !important;
  height: auto !important;         /* NOT 100% */
  min-height: 300px !important;
  align-self: stretch !important;
  overflow-y: auto !important;
}

/* Body: explicit min-height so children can grow */
.ca-wrap #body {
  min-height: 500px !important;
  align-items: stretch !important;
}

/* Tabs: force all possible display states */
.ca-wrap #right-tabs {
  margin-top: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  flex-shrink: 0 !important;
  min-height: 36px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #ffffff !important;
  border-bottom: 2px solid #6366f1 !important;
  padding: 6px 8px !important;
  gap: 4px !important;
  position: relative !important;
  z-index: 100 !important;
}

/* Force every button inside tabs to be visible */
.ca-wrap #right-tabs button,
.ca-wrap #right-tabs .tab,
.ca-wrap div#right-tabs > button {
  display: inline-flex !important;
  align-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 28px !important;
  max-height: none !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  position: static !important;
  color: #6b7280 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 5px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  pointer-events: auto !important;
}

.ca-wrap #right-tabs button.active,
.ca-wrap #right-tabs .tab.active {
  background: #6366f1 !important;
  color: #ffffff !important;
}

.ca-wrap #right-tabs button:hover:not(.active),
.ca-wrap #right-tabs .tab:hover:not(.active) {
  background: #f3f4f6 !important;
  color: #374151 !important;
}

/* Right panel: scroll area below tabs */
.ca-wrap #right-panel {
  flex: 1 !important;
  min-height: 200px !important;
  height: auto !important;
  overflow-y: auto !important;
  display: block !important;
  visibility: visible !important;
}