/* ============================================================
   OneTab Meta — Meta Business Suite Clone (onetab.css)
   Strictly mimics Facebook / Meta ecosystem aesthetics.
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;500;600;700&display=swap');
@font-face { font-family:'Hind Siliguri'; font-weight:400; font-display:swap; src:url('../fonts/hind-siliguri-400.woff2') format('woff2'); unicode-range:U+0980-09FF,U+200C-200D,U+25CC; }
@font-face { font-family:'Hind Siliguri'; font-weight:500; font-display:swap; src:url('../fonts/hind-siliguri-500.woff2') format('woff2'); unicode-range:U+0980-09FF,U+200C-200D,U+25CC; }
@font-face { font-family:'Hind Siliguri'; font-weight:600; font-display:swap; src:url('../fonts/hind-siliguri-600.woff2') format('woff2'); unicode-range:U+0980-09FF,U+200C-200D,U+25CC; }
@font-face { font-family:'Hind Siliguri'; font-weight:700; font-display:swap; src:url('../fonts/hind-siliguri-700.woff2') format('woff2'); unicode-range:U+0980-09FF,U+200C-200D,U+25CC; }

/* ---- Tokens ---- */
:root {
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Facebook Meta Light Theme */
  --bg: #F0F2F5; 
  --surface: #FFFFFF; 
  --surface-2: #F2F3F5; 
  --surface-3: #E4E6EB;
  
  --border: #CED0D4; 
  --border-strong: #BEC3C9;
  
  --text: #050505; 
  --text-2: #65676B; 
  --text-3: #8C939D;
  
  /* The exact Facebook Blue */
  --primary: #0866FF; 
  --primary-hover: #1877F2; 
  --primary-050: #E7F3FF; 
  --on-primary: #FFFFFF;
  
  --success: #31A24C; --success-bg: #E4F3E8; --success-fg: #1F7033;
  --warning: #F5A623; --warning-bg: #FEF2DA; --warning-fg: #A86900;
  --danger: #E41E3F; --danger-bg: #FBE5E8; --danger-fg: #9C1329;
  --info: #0A7CFF; --info-bg: #E6F2FF; --info-fg: #0058C9;
  
  --ring: rgba(8,102,255,0.3);
  
  /* Facebook Card Shadow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
  --shadow-lg: 0 12px 28px rgba(0,0,0,0.2);
  
  --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-full: 999px;
  --sidebar-w: 260px; --topbar-h: 56px;
}

:root[data-theme="dark"] {
  /* Facebook Meta Dark Theme */
  --bg: #18191A; 
  --surface: #242526; 
  --surface-2: #3A3B3C; 
  --surface-3: #4E4F50;
  
  --border: #3E4042; 
  --border-strong: #4E4F50;
  
  --text: #E4E6EB; 
  --text-2: #B0B3B8; 
  --text-3: #8C939D;
  
  --primary: #2D88FF; 
  --primary-hover: #1877F2; 
  --primary-050: #263951; 
  
  --success: #31A24C; --success-bg: #1A3C24; --success-fg: #6FD888;
  --warning: #F5A623; --warning-bg: #4B3613; --warning-fg: #FCD68A;
  --danger: #E41E3F; --danger-bg: #44141F; --danger-fg: #F5869A;
  --info: #2D88FF; --info-bg: #142F55; --info-fg: #7BB2FA;
  
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); 
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5); 
  --shadow-lg: 0 12px 28px rgba(0,0,0,0.6);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{ font-family:var(--font); background:var(--bg); color:var(--text);
  font-size:15px; line-height:1.4; -webkit-font-smoothing:antialiased; }
a{color:var(--primary);text-decoration:none}
button{font-family:inherit}
::selection{background:var(--ring)}

/* ---- Animations ---- */
@keyframes slideDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- Loader ---- */
.ot-loader{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9000}
.ot-spinner{width:40px;height:40px;border:3px solid var(--surface-3);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}

/* ---- App shell ---- */
.ot-app{display:none;min-height:100vh}
.ot-app.show{display:grid;grid-template-columns:var(--sidebar-w) 1fr; animation: fadeIn 0.3s ease;}

/* ---- Sidebar (Business Suite style) ---- */
.ot-sidebar{background:var(--surface); border-right:1px solid var(--border);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh; z-index: 100;}

/* BRAND: Facebook Blue background for white logo */
.ot-brand{display:flex;align-items:center;gap:12px;padding:12px 16px; background:var(--primary); color:white; height:var(--topbar-h); flex: none;}
.ot-brand img { width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); background: white; padding: 2px;}
.ot-brand b{font-size:16px;font-weight:700;letter-spacing:-.3px; margin-bottom:-2px; display:block;}
.ot-brand small{display:block;font-size:11px;color:rgba(255,255,255,0.8);font-weight:500;text-transform:uppercase; letter-spacing:0.3px;}

/* ---- Sidebar Nav ---- */
.ot-nav{padding:12px 8px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
.ot-nav-label{font-size:12px;color:var(--text-2);padding:12px 8px 6px;font-weight:600}

/* Menu Item */
.ot-nav-item{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:var(--r);color:var(--text);
  cursor:pointer;font-weight:500;transition:background .1s ease; user-select: none; font-size:15px;}
.ot-nav-item .flex-left { display: flex; align-items: center; gap: 12px; }
.ot-nav-item:hover{background:var(--surface-2);}
.ot-nav-item.active{background:var(--surface-2); font-weight:600;}
.ot-nav-item svg{width:20px;height:20px;flex:none; transition: transform 0.2s;}
.ot-nav-item .chevron { width: 16px; height: 16px; opacity: 0.5; }
.ot-nav-item.open .chevron { transform: rotate(180deg); opacity: 1; }

/* Submenu */
.ot-submenu { display: none; flex-direction: column; gap: 2px; padding: 2px 0 2px 32px; animation: slideDown 0.2s ease;}
.ot-nav-item.open + .ot-submenu { display: flex; }
.ot-submenu-item { display: flex; align-items: center; padding: 8px 12px; border-radius: var(--r); color: var(--text-2); font-size: 14px; font-weight: 500; cursor: pointer; transition: background .1s; }
.ot-submenu-item:hover { background: var(--surface-2); color: var(--text); }
.ot-submenu-item.active { color: var(--primary); font-weight: 600; background: var(--primary-050); }

.ot-sidebar-foot{padding:12px 8px;border-top:1px solid var(--border)}

/* ---- Main / Topbar ---- */
.ot-main{display:flex;flex-direction:column;min-width:0; background: var(--bg);}
.ot-topbar{height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 24px;border-bottom:1px solid var(--border);background:var(--surface);
  position:sticky;top:0;z-index:50;}
.ot-topbar h1{font-size:18px;margin:0;font-weight:700;}
.ot-topbar .sub{font-size:13px;color:var(--text-3); font-weight: 400; display:none;}
.ot-topbar-right{display:flex;align-items:center;gap:12px}

/* Search Box - FB Style */
.ot-search { position: relative; }
.ot-search input { padding: 8px 16px 8px 36px; border-radius: 50px; border: none; background: var(--surface-2); font-size: 15px; width: 260px; transition: background 0.2s; outline: none; color: var(--text); }
.ot-search input:focus { background: var(--surface-3); }
.ot-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-2); }

.ot-content{padding:24px;max-width:1400px;width:100%; margin: 0 auto;}
.ot-tab{display:none}
.ot-tab.active{display:block;animation:fadeIn .2s ease-out}

/* ---- User chip / avatar ---- */
.ot-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);
  color:#fff;display:grid;place-items:center;font-weight:600;font-size:15px; cursor:pointer; transition: opacity .1s;}
.ot-avatar:hover{opacity: 0.9;}
.ot-icon-btn{width:40px;height:40px;border-radius:50%;background:var(--surface-2);border:none;
  color:var(--text);display:grid;place-items:center;cursor:pointer;transition:background .1s}
.ot-icon-btn:hover{background:var(--surface-3);}

/* ---- Cards (FB Style) ---- */
.ot-card{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-sm); border:1px solid rgba(0,0,0,0.05);}
.ot-card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border)}
.ot-card-h h3{margin:0;font-size:16px;font-weight:600; color:var(--text);}
.ot-card-h p{margin:2px 0 0;font-size:13px;color:var(--text-2)}
.ot-card-b{padding:20px}
.ot-grid{display:grid;gap:20px}
.ot-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.ot-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.ot-grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.ot-grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.ot-grid.cols-2,.ot-grid.cols-3,.ot-grid.cols-4{grid-template-columns:1fr}}

/* ---- Stat tiles (FB style) ---- */
.ot-stat{background:var(--surface);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-sm); border:1px solid rgba(0,0,0,0.05);}
.ot-stat .top{display:flex;align-items:center;justify-content:space-between}
.ot-stat .ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--primary-050);color:var(--primary)}
.ot-stat .val{font-size:28px;font-weight:700;letter-spacing:-0.5px;margin-top:12px; color: var(--text);}
.ot-stat .lbl{font-size:14px;font-weight: 500; color:var(--text-2);margin-top:2px}
.ot-stat .trend { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; margin-top: 8px; }
.ot-stat .trend.up { color: var(--success); }
.ot-stat .trend.down { color: var(--danger); }

/* ---- Section header ---- */
.ot-section-h{margin:0 0 20px}
.ot-section-h h2{font-size:20px;margin:0;font-weight:700; color:var(--text);}
.ot-section-h p{margin:4px 0 0;color:var(--text-2);font-size:14px}
.ot-hint{color:var(--text-2);font-size:13px}

/* ---- Progress Bars ---- */
.ot-progress-bar { width: 100%; height: 6px; background: var(--surface-3); border-radius: var(--r-full); overflow: hidden; margin-top: 12px;}
.ot-progress-fill { height: 100%; border-radius: var(--r-full); background: var(--primary); transition: width 1s ease-in-out; }
.ot-progress-fill.success { background: var(--success); }
.ot-progress-fill.warning { background: var(--warning); }
.ot-progress-label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; color: var(--text-2); margin-top: 8px;}

/* ---- Buttons (FB Style) ---- */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;padding:8px 16px;border-radius:var(--r-sm);
  font-weight:600;font-size:14px;cursor:pointer;border:none;transition:background .1s;white-space:nowrap}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-hover);}
.btn-ghost{background:var(--surface-2);color:var(--text);}
.btn-ghost:hover{background:var(--surface-3);}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:var(--danger-fg);}
.btn-sm{padding:6px 12px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-block{width:100%}

/* ---- Badges ---- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:var(--r-sm);font-size:12px;font-weight:600}
.badge-success{background:var(--success-bg);color:var(--success-fg)}
.badge-warning{background:var(--warning-bg);color:var(--warning-fg)}
.badge-danger{background:var(--danger-bg);color:var(--danger-fg)}
.badge-info{background:var(--info-bg);color:var(--info-fg)}
.badge-neutral{background:var(--surface-2);color:var(--text-2)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}

/* ---- Forms ---- */
.field{margin-bottom:16px}
.field > label{display:block;font-size:14px;font-weight:600;color:var(--text);margin-bottom:8px}
.input,.select,.textarea{width:100%;padding:10px 16px;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);font-size:15px;font-family:inherit;outline:none;transition:border-color .1s}
.input:focus,.select:focus,.textarea:focus{border-color:var(--primary);}
.textarea{resize:vertical;min-height:90px}
.row{display:grid;gap:16px}
.row.c2{grid-template-columns:1fr 1fr}

.toggle{display:inline-flex;align-items:center;gap:12px;cursor:pointer;user-select:none}
.toggle input{display:none}
.toggle .track{width:44px;height:24px;border-radius:var(--r-full);background:var(--surface-3);position:relative;transition:.2s;}
.toggle .track::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:.2s}
.toggle input:checked + .track{background:var(--primary);}
.toggle input:checked + .track::after{transform:translateX(20px)}

/* ---- Tables ---- */
.ot-table{width:100%;border-collapse:collapse;font-size:14px}
.ot-table th{text-align:left;font-size:13px;color:var(--text-2);font-weight:600;padding:12px 16px;border-bottom:1px solid var(--border)}
.ot-table td{padding:16px;border-bottom:1px solid var(--border); color: var(--text);}
.ot-table tr:last-child td{border-bottom:none}
.ot-table tbody tr:hover,.ot-table tr:hover{background:var(--surface-2)}
.ot-table-wrap{overflow-x:auto}

/* ---- Empty state ---- */
.ot-empty{padding:40px 20px;text-align:center;color:var(--text-3); font-weight: 500; font-size: 15px;}
.ot-empty svg{width:48px;height:48px;opacity:.5;margin-bottom:16px}

/* ---- Kill switch banner ---- */
.ot-killbar{display:none;align-items:center;gap:12px;background:var(--danger-bg);color:var(--danger-fg);
  border-radius:var(--r);padding:16px 20px;font-weight:600;font-size:14px;margin-bottom:20px; border:1px solid var(--danger);}
.ot-killbar.show{display:flex}

/* ---- Timeline (decisions) ---- */
.ot-timeline{display:flex;flex-direction:column;gap:4px}
.ot-tl{display:flex;gap:16px;padding:12px 0}
.ot-tl .mk{width:12px;height:12px;border-radius:50%;background:var(--primary);margin-top:4px;flex:none;box-shadow:0 0 0 3px var(--primary-050)}
.ot-tl .w{font-weight:600;font-size:15px; color: var(--text);}
.ot-tl .y{font-size:14px;color:var(--text-2); margin-top: 2px;}
.ot-tl .t{font-size:12px;color:var(--text-3);margin-top:4px;}

/* ---- Toast ---- */
.ot-toasts{position:fixed;right:24px;bottom:24px;display:flex;flex-direction:column;gap:12px;z-index:9500}
.ot-toast{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-md);padding:16px 20px;font-size:14px; font-weight: 500; min-width:280px;animation:slidein .2s ease; border: 1px solid var(--border);}
@keyframes slidein{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

.flex{display:flex}.between{justify-content:space-between}.items-center{align-items:center}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.mt-0{margin-top:0}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.muted{color:var(--text-3)} .grow{flex:1}

@media(max-width:1024px){
  .ot-app.show{grid-template-columns:1fr}
  .ot-sidebar{position:fixed;left:-100%;z-index:200;width:var(--sidebar-w);transition:left .3s; box-shadow: var(--shadow-lg);}
  .ot-sidebar.open{left:0}
  .ot-content{padding:16px}
}

/* Compact autonomous-decisions feed (dashboard + intelligence). Functional first-pass — Antigravity to polish. */
.dec-sum{font-size:12px;color:var(--text-secondary);margin:4px 0 12px; font-weight: 500;}
.dec-list{display:flex;flex-direction:column; gap:4px;}
.dec-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer; transition:all .2s ease; border: 1px solid transparent; background:var(--surface);}
.dec-row:hover{background:var(--surface-hover); border-color:var(--border-light); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.02);}
.dec-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);}
.dec-lbl{font-size:13px;font-weight:700;color:var(--text-primary);flex-shrink:0;}
.dec-sub{font-size:13px;color:var(--text-secondary);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dec-time{font-size:12px;font-weight:500;color:var(--text-placeholder);flex-shrink:0;white-space:nowrap;}
.dec-chev{color:var(--text-placeholder);flex-shrink:0;transition:transform .2s ease;}
.dec-row.open .dec-chev{transform:rotate(180deg); color:var(--meta-blue);}
.dec-detail{font-size:13px;color:var(--text-secondary);line-height:1.5;padding:12px 14px;background:rgba(8,102,255,0.04);border-left: 2px solid var(--meta-blue); border-radius:4px 8px 8px 4px;margin:2px 0 10px 22px; animation: decFadeIn 0.2s ease-out;}
.dec-viewall{display:inline-block;margin-top:14px;font-size:13px;font-weight:600;color:var(--meta-blue);text-decoration:none; padding: 6px 12px; background: rgba(8,102,255,0.08); border-radius: 8px; transition: background .15s;}
.dec-viewall:hover{background: rgba(8,102,255,0.15);}
@keyframes decFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Nav Badge (for File Manager pending count) ---- */
.nav-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 800;
    background: var(--danger, #E41E3F);
    color: #fff;
    line-height: 1;
    margin-left: auto;
    flex-shrink: 0;
    letter-spacing: 0;
    animation: fadeIn 0.3s ease;
}
.nav-badge.show { display: flex; }

/* ---- Unified search input (FM, Pages, Schedule) ---- */
.ot-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ot-filter-bar .fm-search-wrap { flex: 1; min-width: 160px; }
.ot-filter-select {
    padding: 7px 10px;
    font-size: 12.5px;
    border: 1px solid var(--border, #CED0D4);
    border-radius: 8px;
    background: var(--surface-2, #F2F3F5);
    color: var(--text, #050505);
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
    font-family: inherit;
}
.ot-filter-select:focus { border-color: var(--primary, #0866FF); }

/* Dark mode for filter selects */
[data-theme="dark"] .ot-filter-select {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

/* ============================================================
   1. Post Performance Cards (Insights)
   ============================================================ */
.post-cards-grid {
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
  gap: 16px; 
  align-items: start;
}
.post-card {
  background: var(--surface, #fff); 
  border: 1px solid var(--border, #CED0D4); 
  border-radius: var(--r-lg, 12px); 
  cursor: pointer; 
  overflow: hidden; 
  /* The type chip inside is position:absolute. Without a positioned card it resolved
     against a far ancestor, so every card's chip stacked in the same spot and only one
     was ever visible. This makes each chip land on its own card. */
  position: relative;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.post-card:hover {
  box-shadow: var(--shadow-md); 
  transform: translateY(-2px);
  border-color: var(--border-strong, #BEC3C9);
}
.post-card-media {
  position: relative; 
  width: 100%; 
  height: 160px; 
  overflow: hidden; 
  background: var(--surface-2);
}
.post-card-media img {
  width: 100%; 
  height: 100%; 
  object-fit: cover;
  transition: transform .3s ease;
}
.post-card:hover .post-card-media img {
  transform: scale(1.03);
}
.post-card-play {
  position: absolute; 
  inset: 0; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background: rgba(0,0,0,.3);
  transition: background .2s;
}
.post-card:hover .post-card-play {
  background: rgba(0,0,0,.4);
}
.post-card-badge {
  position: absolute; 
  top: 8px; 
  right: 8px; 
  background: rgba(0,0,0,.65); 
  color: #fff; 
  font-size: 10.5px; 
  padding: 2px 8px; 
  border-radius: var(--r-sm, 6px); 
  text-transform: uppercase; 
  font-weight: 600; 
  letter-spacing: .3px;
  backdrop-filter: blur(4px);
}
.post-card-body {
  padding: 14px 16px;
}
.post-card-caption {
  font-size: 12.5px; 
  line-height: 1.6; 
  color: var(--text, #050505); 
  word-break: break-word; 
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card-footer {
  padding: 10px 16px 14px;
  display: flex; 
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--border, #CED0D4);
}
.post-card-engagement {
  display: flex; 
  gap: 14px; 
  font-size: 12px; 
  color: var(--text-2, #65676B); 
  font-weight: 500;
}
.post-card-engagement span {
  display: inline-flex; 
  align-items: center; 
  gap: 4px;
}
.post-card-time {
  font-size: 11px; 
  color: var(--text-3, #8C939D);
  white-space: nowrap;
  text-align: right;
}
[data-theme="dark"] .post-card {
  background: var(--surface); 
  border-color: var(--border);
}
[data-theme="dark"] .post-card:hover {
  border-color: var(--border-strong);
}
[data-theme="dark"] .post-card-footer {
  border-top-color: var(--border);
}

/* ---- Post Detail Popup (click to read full caption) ---- */
.post-detail-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.post-detail-overlay.active {
  opacity: 1; visibility: visible;
}
.post-detail-modal {
  background: var(--surface, #fff);
  border-radius: var(--r-lg, 12px);
  box-shadow: var(--shadow-lg);
  width: 95%; max-width: 600px;
  max-height: 85vh; overflow-y: auto;
  animation: modalPop .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.post-detail-media { position: relative; width: 100%; max-height: 300px; overflow: hidden; }
.post-detail-media img { width: 100%; height: 100%; object-fit: cover; }
.post-detail-body { padding: 20px 24px; }
.post-detail-page { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.post-detail-caption {
  font-size: 14px; line-height: 1.7; color: var(--text, #050505);
  white-space: pre-wrap; word-break: break-word;
}
.post-detail-footer {
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--border, #CED0D4);
  font-size: 13px;
}
.post-detail-engagement {
  display: flex; gap: 18px; color: var(--text-2); font-weight: 500;
}
.post-detail-engagement span { display: inline-flex; align-items: center; gap: 5px; }
.post-detail-time { font-size: 12px; color: var(--text-3); }
.post-detail-open {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; margin: 0 24px 16px;
  background: var(--primary, #0866FF); color: #fff;
  border: none; border-radius: var(--r-sm, 6px);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.post-detail-open:hover { background: var(--primary-hover, #1877F2); }
[data-theme="dark"] .post-detail-modal {
  background: var(--surface); border: 1px solid var(--border);
}
[data-theme="dark"] .post-detail-footer { border-top-color: var(--border); }

/* ============================================================
   2. Humanizer Block (admin.php)
   ============================================================ */
.humanizer-block {
  border: 1px solid var(--border, #CED0D4); 
  border-radius: var(--r-lg, 12px); 
  padding: 16px; 
  background: var(--surface-2, #F2F3F5); 
  transition: border-color .15s ease, background .15s ease;
}
.humanizer-block:hover {
  border-color: var(--primary-050, #E7F3FF); 
  background: var(--surface, #fff);
}
.humanizer-header {
  display: flex; 
  align-items: center; 
  gap: 8px; 
  margin-bottom: 6px;
}
.humanizer-header svg {
  flex-shrink: 0;
  color: var(--primary, #0866FF);
}
.humanizer-title {
  font-size: 12px; 
  font-weight: 600; 
  color: var(--text-2); 
  text-transform: uppercase; 
  letter-spacing: .5px;
}
.humanizer-subtitle {
  font-size: 11px; 
  color: var(--text-3); 
  margin-left: auto;
}
.humanizer-desc {
  font-size: 11.5px; 
  color: var(--text-3); 
  line-height: 1.5; 
  margin: 0 0 12px;
}
.humanizer-control {
  display: flex; 
  align-items: center; 
  gap: 10px;
}
.humanizer-control label {
  font-size: 12px; 
  font-weight: 600; 
  color: var(--text-2); 
  text-transform: uppercase; 
  letter-spacing: .5px;
}
.humanizer-control select {
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--border, #CED0D4);
  border-radius: var(--r, 8px);
  background: var(--surface, #fff);
  color: var(--text, #050505);
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
  font-family: inherit;
}
.humanizer-control select:focus {
  border-color: var(--primary, #0866FF);
}
[data-theme="dark"] .humanizer-block {
  background: var(--surface-2);
  border-color: var(--border);
}
[data-theme="dark"] .humanizer-block:hover {
  border-color: var(--primary-050);
  background: var(--surface);
}
[data-theme="dark"] .humanizer-control select {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

/* ============================================================
   3. Preview Before->After (Character Studio)
   ============================================================ */
.preview-panels {
  display: flex; 
  gap: 16px; 
  flex-wrap: wrap;
}
.preview-panel {
  flex: 1; 
  min-width: 240px; 
  padding: 14px 16px; 
  border: 1px solid var(--border, #CED0D4); 
  border-radius: var(--r-lg, 12px); 
  background: var(--surface, #fff);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.preview-panel:hover {
  box-shadow: var(--shadow-sm);
}
.preview-panel--original {
  opacity: 0.8;
  background: var(--surface-2, #F2F3F5);
}
.preview-panel--humanized {
  border-left: 3px solid var(--primary, #0866FF); 
  opacity: 1;
}
.preview-label {
  font-size: 11px; 
  font-weight: 600; 
  text-transform: uppercase; 
  letter-spacing: .4px; 
  margin-bottom: 8px;
}
.preview-label--original {
  color: var(--text-3);
}
.preview-label--humanized {
  color: var(--primary, #0866FF);
}
.preview-text {
  font-size: 13px; 
  line-height: 1.6; 
  color: var(--text); 
  white-space: pre-wrap; 
  word-break: break-word;
}
.preview-hint {
  font-size: 11px; 
  color: var(--text-3); 
  margin-top: 8px;
}
[data-theme="dark"] .preview-panel {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .preview-panel--original {
  background: var(--surface-2);
}

/* ============================================================
   4. Offline Database Module
   ============================================================ */
.offline-layout {
  display: grid; 
  grid-template-columns: 320px 1fr; 
  gap: 20px; 
  align-items: start;
}
@media (max-width: 768px) { 
  .offline-layout { grid-template-columns: 1fr; } 
}
.off-group-item {
  padding: 10px 14px; 
  border-radius: var(--r, 8px); 
  cursor: pointer; 
  border: 1px solid transparent; 
  transition: background .15s ease, border-color .15s ease;
}
.off-group-item:hover {
  background: var(--surface-2);
}
.off-group-item.active {
  background: var(--primary-050, #E7F3FF); 
  border-color: var(--primary, #0866FF);
}
.off-group-name {
  font-size: 13px; 
  font-weight: 600; 
  color: var(--text);
}
.off-group-meta {
  font-size: 10.5px; 
  color: var(--text-3); 
  margin-top: 3px;
}
.off-progress {
  height: 5px; 
  background: var(--surface-3, #E4E6EB); 
  border-radius: 3px; 
  overflow: hidden; 
  margin-top: 6px;
}
.off-progress-fill {
  height: 100%; 
  border-radius: 3px; 
  transition: width .4s ease;
  background: var(--primary, #0866FF);
}
.off-pct {
  font-size: 11px; 
  font-weight: 700;
  color: var(--primary, #0866FF);
}
.off-drop-zone {
  border: 2px dashed var(--border, #CED0D4); 
  border-radius: var(--r-lg, 16px); 
  padding: 36px 24px; 
  text-align: center; 
  cursor: pointer; 
  background: linear-gradient(135deg, rgba(8,102,255,.02) 0%, rgba(99,102,241,.03) 50%, rgba(8,102,255,.02) 100%);
  transition: all .3s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.off-drop-zone::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(8,102,255,.06), transparent 70%);
  opacity: 0;
  transition: opacity .3s;
}
.off-drop-zone:hover::before, .off-drop-zone.drag-over::before { opacity: 1; }
.off-drop-zone:hover, .off-drop-zone.drag-over {
  border-color: var(--primary, #0866FF); 
  background: linear-gradient(135deg, rgba(8,102,255,.04) 0%, rgba(99,102,241,.06) 50%, rgba(8,102,255,.04) 100%);
  box-shadow: 0 0 0 4px rgba(8,102,255,.08), 0 8px 32px rgba(8,102,255,.1);
  transform: translateY(-1px);
}
.off-drop-zone.drag-over {
  border-style: solid;
  transform: scale(1.01);
}
.off-drop-icon {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #E7F3FF 0%, #DBEAFE 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow: 0 4px 12px rgba(8,102,255,.12);
}
.off-drop-icon svg {
  width: 26px; height: 26px;
  stroke: var(--primary, #0866FF);
  stroke-width: 2;
  fill: none;
  transition: transform .3s;
}
.off-drop-zone:hover .off-drop-icon svg {
  animation: offUploadBounce 1s ease-in-out infinite;
}
@keyframes offUploadBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.off-drop-title {
  font-weight: 700; 
  font-size: 15px; 
  color: var(--text, #050505);
  margin-bottom: 6px;
  letter-spacing: -.2px;
}
.off-drop-title span {
  color: var(--primary, #0866FF);
  font-weight: 800;
}
.off-drop-hint {
  font-size: 12.5px; 
  color: var(--text-2, #65676B); 
  margin-top: 4px;
  line-height: 1.6;
  max-width: 480px;
  margin-left: auto; margin-right: auto;
}
.off-drop-formats {
  display: flex; gap: 8px; justify-content: center;
  margin-top: 14px; flex-wrap: wrap;
}
.off-drop-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  border: 1px solid;
}
.off-drop-chip--csv {
  background: rgba(16,185,129,.08);
  color: #059669;
  border-color: rgba(16,185,129,.2);
}
.off-drop-chip--txt {
  background: rgba(99,102,241,.08);
  color: #6366F1;
  border-color: rgba(99,102,241,.2);
}
.off-drop-chip svg { width: 12px; height: 12px; fill: currentColor; }
.off-caption-item {
  padding: 12px 14px; 
  border: 1px solid var(--border, #CED0D4); 
  border-radius: var(--r, 8px); 
  background: var(--surface); 
  position: relative; 
  transition: border-color .15s ease, box-shadow .15s ease;
}
.off-caption-item:hover {
  border-color: var(--primary, #0866FF);
  box-shadow: var(--shadow-sm);
}
.off-caption-text {
  font-size: 13px; 
  line-height: 1.55; 
  color: var(--text); 
  white-space: pre-wrap; 
  word-break: break-word;
  padding-right: 24px;
}
.off-caption-meta {
  margin-top: 6px; 
  font-size: 10.5px; 
  color: var(--text-3);
}
.off-caption-del {
  position: absolute; 
  top: 8px; 
  right: 8px; 
  background: none; 
  border: none; 
  color: var(--text-3); 
  cursor: pointer; 
  font-size: 12px; 
  padding: 4px 6px; 
  border-radius: var(--r-sm); 
  transition: color .15s, background .15s;
}
.off-caption-del:hover {
  color: var(--danger); 
  background: var(--danger-bg, #FBE5E8);
}
.off-overview-grid {
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); 
  gap: 8px; 
  margin-bottom: 12px;
}
.off-overview-stat {
  padding: 10px; 
  background: var(--surface-2); 
  border-radius: var(--r, 8px); 
  text-align: center;
}
.off-overview-val {
  font-size: 1.2em; 
  font-weight: 700;
  color: var(--text);
}
.off-overview-label {
  font-size: 10.5px; 
  color: var(--text-3); 
  margin-top: 2px;
}
.off-overview-file {
  padding: 8px 0; 
  border-top: 1px solid var(--border); 
  font-size: 12px;
  color: var(--text-2);
}
.off-overview-sample {
  margin-top: 4px; 
  padding: 6px 8px; 
  background: var(--surface-2); 
  border-radius: var(--r-sm); 
  font-size: 11.5px;
  color: var(--text);
}
.off-status-bar {
  padding: 10px 14px; 
  border-radius: var(--r, 8px); 
  background: var(--surface-2); 
  margin-bottom: 14px;
  color: var(--text-2);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-theme="dark"] .off-group-item:hover {
  background: var(--surface-3);
}
[data-theme="dark"] .off-group-item.active {
  background: var(--primary-050);
  border-color: var(--primary);
}
[data-theme="dark"] .off-drop-zone {
  background: linear-gradient(135deg, rgba(8,102,255,.04) 0%, rgba(99,102,241,.04) 50%, rgba(8,102,255,.04) 100%);
  border-color: var(--border);
}
[data-theme="dark"] .off-drop-zone:hover, [data-theme="dark"] .off-drop-zone.drag-over {
  background: linear-gradient(135deg, rgba(8,102,255,.08) 0%, rgba(99,102,241,.08) 50%, rgba(8,102,255,.08) 100%);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(8,102,255,.12), 0 8px 32px rgba(8,102,255,.15);
}
[data-theme="dark"] .off-drop-icon {
  background: linear-gradient(135deg, rgba(8,102,255,.15) 0%, rgba(99,102,241,.12) 100%);
  box-shadow: 0 4px 12px rgba(8,102,255,.2);
}
[data-theme="dark"] .off-drop-chip--csv {
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.25);
}
[data-theme="dark"] .off-drop-chip--txt {
  background: rgba(99,102,241,.12);
  border-color: rgba(99,102,241,.25);
}
[data-theme="dark"] .off-caption-item {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .off-caption-item:hover {
  border-color: var(--primary);
}
[data-theme="dark"] .off-caption-del:hover {
  background: var(--danger-bg);
}
[data-theme="dark"] .off-overview-stat, [data-theme="dark"] .off-overview-sample, [data-theme="dark"] .off-status-bar {
  background: var(--surface-2);
}

/* ============================================================
   5. Source Pills (Connected Pages)
   ============================================================ */
.source-pill {
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  padding: 4px 12px; 
  border-radius: var(--r-full, 999px); 
  font-size: 11.5px; 
  font-weight: 700; 
  cursor: pointer; 
  transition: all .15s ease; 
  border: 1px solid transparent;
}
.source-pill--ai {
  background: var(--success-bg, #E4F3E8); 
  color: var(--success-fg, #1F7033); 
  border-color: rgba(49,162,76,.2);
}
.source-pill--ai:hover {
  background: rgba(49,162,76,.2);
}
.source-pill--offline {
  background: var(--warning-bg, #FEF2DA); 
  color: var(--warning-fg, #A86900); 
  border-color: rgba(245,166,35,.2);
}
.source-pill--offline:hover {
  background: rgba(245,166,35,.2);
}
.bulk-source-wrap {
  display: inline-flex; 
  align-items: center; 
  gap: 3px; 
  border: 1px solid var(--border); 
  border-radius: var(--r, 8px); 
  padding: 3px; 
  background: var(--surface-2);
}
.bulk-source-label {
  font-size: 11px; 
  color: var(--text-2); 
  padding: 0 5px; 
  font-weight: 600;
}
[data-theme="dark"] .source-pill--ai {
  background: rgba(49,162,76,.12);
  color: var(--success, #31A24C);
  border-color: rgba(49,162,76,.25);
}
[data-theme="dark"] .source-pill--offline {
  background: rgba(210,153,34,.12);
  color: var(--warning, #F5A623);
  border-color: rgba(245,166,35,.2);
}

/* ---- Active Status Badge with pulse dot ---- */
.status-active {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-full, 999px);
  background: var(--success-bg, #E4F3E8);
  color: var(--success-fg, #1F7033);
  font-size: 11.5px; font-weight: 700;
}
.status-active-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--success, #31A24C);
  animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(49,162,76,.4); }
  50% { opacity: .7; box-shadow: 0 0 0 4px rgba(49,162,76,0); }
}
[data-theme="dark"] .status-active {
  background: rgba(49,162,76,.12);
  color: var(--success, #31A24C);
}

/* ============================================================
   6. App Edit Modal
   ============================================================ */
.app-edit-overlay {
  position: fixed; 
  inset: 0; 
  background: rgba(240,242,245,.85); 
  backdrop-filter: blur(4px); 
  z-index: 1000; 
  display: none; 
  align-items: center; 
  justify-content: center;
}
.app-edit-overlay.active {
  display: flex;
}
.app-edit-modal {
  background: var(--surface, #fff);
  border-radius: var(--r-lg, 12px);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 400px;
  padding: 24px;
  animation: modalPop .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes modalPop {
  0% { transform: scale(0.95); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.app-edit-input {
  padding: 10px 14px; 
  font-size: 16px; 
  text-align: center; 
  width: 100%;
  border: 1px solid var(--border-strong, #BEC3C9);
  border-radius: var(--r-sm, 6px);
  background: var(--surface, #fff);
  color: var(--text, #050505);
  outline: none;
  transition: border-color .15s ease;
  font-family: inherit;
}
.app-edit-input:focus {
  border-color: var(--primary, #0866FF);
}
.app-edit-info {
  font-size: 12px; 
  color: var(--text-3); 
  margin-top: 8px;
  text-align: center;
}
.app-edit-actions {
  display: flex; 
  gap: 10px; 
  margin-top: 18px; 
  justify-content: flex-end;
}
[data-theme="dark"] .app-edit-overlay {
  background: rgba(24,25,26,.85);
}
[data-theme="dark"] .app-edit-modal {
  background: var(--surface);
  border: 1px solid var(--border);
}
[data-theme="dark"] .app-edit-input {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}
[data-theme="dark"] .app-edit-input:focus {
  border-color: var(--primary);
}

/* ---- Preview Tags (Caption preview offline/AI badges) ---- */
.preview-tag {
  display: inline-flex; align-items: center;
  padding: 1px 8px;
  border-radius: var(--r-sm, 6px);
  font-size: 10.5px; font-weight: 700;
  line-height: 1.6;
}
.preview-tag--offline {
  background: var(--warning-bg, #FEF2DA);
  color: var(--warning-fg, #A86900);
  border: 1px solid rgba(245,166,35,.3);
}
.preview-tag--online {
  background: var(--success-bg, #E4F3E8);
  color: var(--success-fg, #1F7033);
  border: 1px solid rgba(49,162,76,.25);
}
[data-theme="dark"] .preview-tag--offline {
  background: rgba(210,153,34,.15);
  color: var(--warning, #F5A623);
  border-color: rgba(210,153,34,.3);
}
[data-theme="dark"] .preview-tag--online {
  background: rgba(49,162,76,.15);
  color: var(--success, #31A24C);
  border-color: rgba(49,162,76,.3);
}

/* ── Posts Performance: LIST view ───────────────────────────────────────────
   A real list: ONE compact row per post, so many posts fit on a screen. Same
   .post-card markup as the grid — only layout changes — but laid out as three
   columns (thumb | text | stats) instead of the grid's stacked blocks, which is
   what made an early attempt render as a tall narrow tile instead of a row. */
.post-cards-grid.is-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* The grid rule above sets align-items:start, which in a column flexbox shrinks
     every row to its own content width. Rows must span the full width instead. */
  align-items: stretch;
}
.post-cards-grid.is-list .post-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  border-radius: var(--r-md, 10px);
}
.post-cards-grid.is-list .post-card:hover {
  transform: none;   /* a row lifting off the page reads as broken, unlike a tile */
}
.post-cards-grid.is-list .post-card-media {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  flex-shrink: 0;
}
.post-cards-grid.is-list .post-card:hover .post-card-media img { transform: none; }
/* The play glyph is sized for a 160px tile; shrink it for a 56px thumb. */
.post-cards-grid.is-list .post-card-play svg { width: 18px; height: 18px; }

.post-cards-grid.is-list .post-card-body {
  padding: 0;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.post-cards-grid.is-list .post-card-page-name {
  flex-shrink: 0;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}
.post-cards-grid.is-list .post-card-caption {
  -webkit-line-clamp: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  font-size: 12px;
  line-height: 1.4;
  min-width: 0;
  flex: 1;
}
/* The type chip is absolutely positioned over the thumbnail in grid view; in a
   row that corner is cramped, so let it sit inline with the caption instead. */
.post-cards-grid.is-list .post-card-badge {
  position: static;
  flex-shrink: 0;
  background: var(--surface-2, #F0F2F5);
  color: var(--text-2, #65676b);
  backdrop-filter: none;
  font-size: 9.5px;
  padding: 1px 6px;
}
.post-cards-grid.is-list .post-card-footer {
  padding: 0;
  border-top: none;
  gap: 14px;
  flex-shrink: 0;
}
.post-cards-grid.is-list .post-card-engagement { gap: 10px; font-size: 11.5px; }

/* Narrow screens: drop the page name and the timestamp, keep thumb + caption + counts. */
@media (max-width: 700px) {
  .post-cards-grid.is-list .post-card { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 9px; }
  .post-cards-grid.is-list .post-card-media { width: 44px; height: 44px; }
  .post-cards-grid.is-list .post-card-page-name,
  .post-cards-grid.is-list .post-card-time { display: none; }
}