/* ==================================================
   were — Design System v5
   - Zero `transition: all` (root cause of font-load stretching)
   - Component classes for every repeated pattern
   - Full dark + RTL coverage
   ================================================== */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
  /* Brand */
  --primary:#0080ff; --primary-2:#0060cc; --primary-soft:rgba(0,128,255,.10);
  --success:#16a34a; --success-bg:rgba(22,163,74,.10);
  --warning:#f59e0b; --warning-bg:rgba(245,158,11,.10);
  --danger:#dc2626;  --danger-bg:rgba(220,38,38,.10);

  /* Surfaces (light) */
  --bg:#ffffff; --surface:#f6f8fb; --card:#ffffff; --card-elevated:#ffffff;

  /* Text (light) */
  --text:#0a0f1e; --heading:#0a0f1e; --muted:#5f6f89; --subtle:#8a9ab3;

  /* Borders (light) */
  --border:#e4e8ef; --border-hover:#c9d2e0;

  /* Shadows (light) */
  --shadow-sm:0 1px 3px rgba(10,15,30,.04);
  --shadow-md:0 6px 16px rgba(10,15,30,.06);
  --shadow-lg:0 18px 40px rgba(10,15,30,.10);
  --shadow-xl:0 30px 80px rgba(10,15,30,.14);

  /* Geometry */
  --radius:12px; --radius-lg:16px;
  --sidebar-w:248px; --sidebar-w-sm:64px;
  --topbar-h:60px;
  --max-w:1200px;
  --content-max:1280px;
  --content-pad:32px;
  --content-pad-sm:20px;
  --space-grid:18px;
  --space-section:24px;
  --card-pad:24px;
  --card-pad-sm:20px;

}

html.dark{
  --bg:#050b18; --surface:#0a1322; --card:#0d1a2e; --card-elevated:#101d34;
  --text:#e8f0ff; --heading:#f0f5ff; --muted:#91a2bd; --subtle:#6b7d99;
  --border:#1b2942; --border-hover:#2a3d5e;
  --shadow-sm:0 1px 3px rgba(0,0,0,.3);
  --shadow-md:0 6px 16px rgba(0,0,0,.35);
  --shadow-lg:0 18px 40px rgba(0,0,0,.45);
  --shadow-xl:0 30px 80px rgba(0,0,0,.6);
  --primary-soft:rgba(0,128,255,.18);
  --success-bg:rgba(22,163,74,.15);
  --warning-bg:rgba(245,158,11,.15);
  --danger-bg:rgba(220,38,38,.18);
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*{box-sizing:border-box}
*:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}
html,body{margin:0;min-height:100%;background:var(--bg)}
body{
  font-family:'Poppins','Alexandria',ui-sans-serif,system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--text);
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
html[lang="ar"] body,html[dir="rtl"] body{
  font-family:'Alexandria','Poppins',ui-sans-serif,system-ui,sans-serif;
}


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1,h2,h3,h4{color:var(--heading);margin:0 0 12px;letter-spacing:-.025em;font-weight:700;line-height:1.25}
h1{font-size:24px} h2{font-size:20px} h3{font-size:17px} h4{font-size:15px}
a{color:var(--primary);text-decoration:none;transition:color .15s}
a:hover{color:var(--primary-2)}


/* ============================================================
   4. LOGO
   ============================================================ */
.logo{
  display:inline-block; text-decoration:none; white-space:nowrap;
  font-weight:700; font-size:20px; letter-spacing:-.04em;
  color:var(--heading);
}
.logo .we{color:var(--primary);font-weight:700}
.logo .we,.logo .renders-text{display:inline;margin:0;padding:0}


/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:10px;
  border:1px solid var(--border);background:var(--card);color:var(--text);
  font:600 14px/1 'Poppins',inherit;cursor:pointer;text-decoration:none;
  transition:background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.btn:hover{border-color:var(--border-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 6px 20px rgba(0,128,255,.25)}
.btn-primary:hover{background:var(--primary-2);border-color:var(--primary-2);color:#fff;box-shadow:0 10px 28px rgba(0,128,255,.35)}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-danger:hover{background:#b91c1c;border-color:#b91c1c;color:#fff;box-shadow:0 10px 28px rgba(220,38,38,.30)}
.btn-block{width:100%}
.btn-sm{padding:6px 12px;font-size:12px}

/* Small icon-only danger button (used in tables) */
.btn-icon-danger{
  width:32px;height:32px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:transparent;color:var(--muted);
  border-radius:8px;cursor:pointer;
  transition:background-color .15s, border-color .15s, color .15s;
}
.btn-icon-danger:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-bg)}
.btn-icon-danger:disabled{opacity:.4;cursor:not-allowed}


/* ============================================================
   6. FORMS
   ============================================================ */
.form-group{margin-bottom:14px}
.label{
  display:block;font-size:12px;font-weight:600;
  color:var(--muted);margin-bottom:6px;letter-spacing:.2px;
}
.input,select.input,textarea.input{
  width:100%;padding:11px 14px;border-radius:10px;
  border:1.5px solid var(--border);background:var(--card);color:var(--text);
  font:400 14px/1.4 'Poppins',inherit;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}
.input:disabled{opacity:.6;cursor:not-allowed}

/* Select arrow chevron */
select.input{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:36px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235f6f89' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:14px 14px;
}
html.dark select.input{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2391a2bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
html[dir="rtl"] select.input{
  background-position:left 12px center;
  padding-right:14px;padding-left:36px;
}

/* 2 / 3 column form rows (account, admin/plans, etc.) */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}


/* ============================================================
   7. CARDS & ALERTS
   ============================================================ */
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:24px;
  box-shadow:var(--shadow-sm);
  transition:border-color .15s ease, box-shadow .2s ease;
}
.card-tight{padding:0;overflow:hidden}
.card.danger-card{border-color:rgba(220,38,38,.25)}
.card.danger-card > h3:first-child,
.card.danger-card > h3:first-child + p + *,
.card.danger-card .danger-title{color:var(--danger)}

.alert{padding:12px 14px;border-radius:10px;font-size:14px;margin-bottom:16px;border:1px solid transparent}
.alert-error  {background:var(--danger-bg); color:var(--danger);  border-color:rgba(220,38,38,.25)}
.alert-success{background:var(--success-bg);color:var(--success); border-color:rgba(22,163,74,.25)}
.alert-warning{background:var(--warning-bg);color:#b45309;        border-color:rgba(245,158,11,.30)}
html.dark .alert-warning{color:#fcd34d;border-color:rgba(252,211,77,.30)}

/* Inline alert with action button on the right (verification banner pattern) */
.alert.alert-action{
  display:flex;align-items:center;gap:12px;
  flex-wrap:wrap;justify-content:space-between;
}
.alert-msg{
  display:flex;align-items:center;gap:10px;
  flex:1;min-width:240px;
}
.alert-msg svg{flex-shrink:0}
.alert-btn{
  padding:7px 14px;border-radius:8px;
  border:1.5px solid currentColor;background:transparent;color:inherit;
  font:600 12.5px/1 'Poppins',inherit;cursor:pointer;white-space:nowrap;
  transition:background-color .15s, color .15s, opacity .15s;
}
.alert-btn:hover{opacity:.75}


/* ============================================================
   8. LAYOUT
   ============================================================ */
.app-layout{display:flex;min-height:100vh}
.main,.main-area{
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  min-height:100vh;
}
.center-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;
}

.main-content{
  padding:32px var(--content-pad) 64px;
  width:100%;max-width:none;
}
.main-content > *{
  max-width:var(--content-max);
  margin-left:auto;margin-right:auto;
  /* width:100% removed — was forcing h2/h3 to stretch and center,
     causing them to visually drift left/right relative to grids. */
}
.main-content > .page-header,
.main-content > .stats-grid,
.main-content > .tools-grid,
.main-content > .card,
.main-content > .account-grid,
.main-content > .billing-plans,
.main-content > .admin-tabs,
.main-content > .mod-layout,
.main-content > .settings-grid,
.main-content > .alert,
.main-content > form,
.main-content > h2,
.main-content > h3,
.main-content > h4{width:100%;margin-left:auto;margin-right:auto}
.main-content > .card{width:100%}

/* Section spacing inside content pages */
.main-content h2{
  font-size:18px;font-weight:700;letter-spacing:-.02em;
  color:var(--heading);line-height:1.3;
  margin:20px auto 12px;
}
.main-content h2:first-of-type,
.main-content h2:first-child,
.main-content h3:first-child{margin-top:0}


/* ============================================================
   9. TOPBAR
   ============================================================ */
.topbar{
  height:var(--topbar-h);
  display:flex;align-items:center;justify-content:space-between;
  /* padding auto-scales to match .main-content > * auto-margins */
  padding:0 max(var(--content-pad), calc((100% - var(--content-max)) / 2));
  gap:16px;
  border-bottom:1px solid var(--border);
  background:var(--bg);
  position:sticky;top:0;z-index:40;
}
.topbar-left{display:flex;align-items:center;gap:0;min-width:0;flex:1;position:relative}
.topbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}

.topbar-crumb{font-size:13px;color:var(--muted);font-weight:500;line-height:1;display:flex;align-items:center}
.topbar-crumb a,.topbar-crumb span{line-height:1;display:inline-flex;align-items:center}
.topbar-crumb .sep{display:inline-block;margin:0 8px;opacity:.5;vertical-align:baseline}
.topbar-crumb .current{color:var(--heading);font-weight:600}

.topbar-icon-btn{
  width:34px;height:34px;border-radius:9px;
  border:1px solid var(--border);background:var(--card);color:var(--muted);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:relative;
  transition:background-color .15s, border-color .15s, color .15s;
}
.topbar-icon-btn:hover{color:var(--text);border-color:var(--border-hover);background:var(--surface)}
.topbar-icon-btn .dot{
  position:absolute;top:7px;right:7px;
  width:9px;height:9px;border-radius:50%;
  background:var(--danger);border:2px solid var(--bg);
}

.topbar-user{
  display:flex;align-items:center;gap:10px;
  padding:4px 10px 4px 4px;border-radius:10px;
  border:1px solid var(--border);background:var(--card);
  cursor:pointer;font-family:inherit;
  transition:background-color .15s, border-color .15s;
}
.topbar-user:hover{border-color:var(--border-hover);background:var(--surface)}
.topbar-user[aria-expanded="true"]{border-color:var(--primary)}
.topbar-user .avatar{
  width:26px;height:26px;border-radius:6px;flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),#6941C6);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:11px;
}
.topbar-user .uname{
  font-size:13px;font-weight:600;color:var(--heading);
  max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.topbar-user svg{color:var(--muted);flex-shrink:0}

.topbar-logo{
  display:none;
  font-weight:700;font-size:15px;letter-spacing:-.04em;
  color:var(--heading);text-decoration:none;
  margin-right:4px;white-space:nowrap;
  align-items:center;
}
.topbar-logo .we{color:var(--primary);font-weight:700}
.topbar-logo .we,.topbar-logo .renders-text{display:inline;margin:0}
.topbar-logo::after{
  content:"/";color:var(--muted);
  margin:0 8px;opacity:.5;font-weight:400;
}
html.sb-collapsed .topbar-logo{display:inline-flex}


/* ============================================================
   10. SIDEBAR
   ============================================================ */
.sidebar{
  width:var(--sidebar-w);background:var(--surface);
  border-right:1px solid var(--border);
  flex-shrink:0;overflow-x:hidden;
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;z-index:50;
  transition:width .25s cubic-bezier(.4,0,.2,1);
}
html[dir="rtl"] .sidebar{border-right:0;border-left:1px solid var(--border)}

.sidebar-head{
  position:relative;
  height:var(--topbar-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;gap:8px;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.sidebar-toggle{
  position:relative;flex-shrink:0;padding:0;
  width:28px;height:28px;border-radius:8px;
  border:1px solid var(--border);background:var(--card);color:var(--muted);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background-color .15s, border-color .15s, color .15s;
}
.sidebar-toggle:hover{background:var(--primary-soft);color:var(--primary);border-color:var(--primary)}

.sidebar-scroll{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:14px 10px;
  display:flex;flex-direction:column;gap:3px;
}
.sidebar-scroll::-webkit-scrollbar{width:4px}
.sidebar-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}

.sidebar-divider{
  height:1px;background:var(--border);
  margin:10px 8px 4px;opacity:.7;
}
.sidebar-group-label{
  font-size:10px;font-weight:700;color:var(--subtle);
  text-transform:uppercase;letter-spacing:1px;
  padding:6px 12px 4px;
}

.sidebar-footer{
  padding:10px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:3px;flex-shrink:0;
}

.nav-link{
  position:relative;
  display:flex;align-items:center;gap:11px;
  padding:9px 12px;border-radius:9px;
  color:var(--muted);text-decoration:none;
  font:500 13px/1 'Poppins',inherit;
  transition:background-color .15s, color .15s;
}
.nav-link:hover{background:var(--card);color:var(--text)}
.nav-link.active{background:var(--primary-soft);color:var(--primary);font-weight:600}
.nav-link svg{width:18px;height:18px;stroke-width:1.7;flex-shrink:0}
.nav-link .nav-text{flex:1;white-space:nowrap;overflow:hidden;transition:opacity .15s}
.nav-logout:hover{background:var(--danger-bg);color:var(--danger)}

.theme-opt{
  flex:1;padding:5px;border-radius:6px;
  background:transparent;border:none;color:var(--muted);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .15s, color .15s;
}
.theme-opt:hover{color:var(--text)}
.theme-opt.active{background:var(--primary-soft);color:var(--primary)}


/* ---------- COLLAPSED SIDEBAR ---------- */
html.sb-collapsed .sidebar{
  width:var(--sidebar-w-sm) !important;
  transition:none;
}
body.sb-ready .sidebar{transition:width .25s cubic-bezier(.4,0,.2,1)}

html.sb-collapsed .sidebar .logo,
html.sb-collapsed .sidebar .sidebar-group-label,
html.sb-collapsed .sidebar .nav-text,
html.sb-collapsed .sidebar .nav-tag,
html.sb-collapsed .sidebar .theme-toggle-inline{
  display:none;
}

html.sb-collapsed .sidebar .sidebar-head{
  justify-content:center;padding:0;width:100%;
}
html.sb-collapsed .sidebar .sidebar-toggle{margin:0 auto}
html.sb-collapsed .sidebar .sidebar-toggle svg{transform:rotate(180deg)}

html.sb-collapsed .sidebar .nav-link{
  justify-content:center;
  padding:0;margin:2px auto;
  width:40px;height:40px;border-radius:10px;gap:0;
}
html.sb-collapsed .sidebar .nav-link svg{margin:0}

html.sb-collapsed .sidebar .sidebar-scroll{padding:14px 8px;gap:5px}
html.sb-collapsed .sidebar .sidebar-divider{margin:14px 16px;background:var(--border);opacity:.6}
html.sb-collapsed .sidebar .sidebar-footer{padding:8px;padding-top:8px;border-top:1px solid var(--border);margin-top:8px}

html.sb-collapsed .sidebar .nav-link:hover::after{
  content:attr(title);
  position:absolute;left:calc(100% + 12px);top:50%;
  transform:translateY(-50%);
  background:var(--card);color:var(--text);
  border:1px solid var(--border);
  padding:6px 12px;border-radius:8px;
  font-size:12px;font-weight:600;white-space:nowrap;
  z-index:1000;pointer-events:none;
  box-shadow:var(--shadow-md);
}
html[dir="rtl"].sb-collapsed .sidebar .nav-link:hover::after{
  left:auto;right:calc(100% + 12px);
}


/* ============================================================
   11. USER DROPDOWN MENU
   ============================================================ */
.topbar-user-wrap{position:relative}

.user-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:280px;
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:6px;
  box-shadow:var(--shadow-lg);
  z-index:200;
  animation:userMenuIn .15s ease-out;
}
.user-menu[hidden]{display:none !important}
@keyframes userMenuIn{
  from{opacity:0;transform:translateY(-4px)}
  to  {opacity:1;transform:translateY(0)}
}
html[dir="rtl"] .user-menu{right:auto;left:0}

.user-menu-head{
  display:flex;align-items:center;gap:14px;
  padding:16px 12px 18px;
}
.user-menu-info{min-width:0;flex:1}
.user-menu-name{
  font-size:14px;font-weight:700;color:var(--heading);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:2px;
}
.user-menu-email{
  font-size:12px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.user-menu-divider{height:1px;background:var(--border);margin:4px 0}

.user-menu-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:9px;
  color:var(--text);font-size:13.5px;font-weight:500;
  text-decoration:none;
  transition:background-color .12s;
}
.user-menu-item:hover{background:var(--surface)}
.user-menu-item svg{width:17px;height:17px;opacity:.8;flex-shrink:0}
.user-menu-item.danger{color:var(--danger)}
.user-menu-item.danger:hover{background:var(--danger-bg)}


/* ============================================================
   12. AVATARS
   ============================================================ */
.avatar{
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
  width:32px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,var(--primary),#6941C6);
  color:#fff;font-weight:700;font-size:13px;
  border:none;
}
.avatar.sm{width:28px;height:28px;border-radius:6px;font-size:12px}
.avatar.lg{width:44px;height:44px;border-radius:10px;font-size:16px}
.user-menu-head .avatar.lg{box-shadow:0 4px 10px rgba(0,128,255,.25)}


/* ============================================================
   13. PAGE HEADER
   Block layout (no flex) — flex + gap + flex-wrap caused a 14px
   row-gap between title and subtitle. Block with tight line-height
   gives a clean, predictable rhythm on every page.
   ============================================================ */
.page-header{margin-bottom:20px}
.page-title{
  font-size:24px;font-weight:700;
  margin:0 0 6px;
  line-height:1.2;letter-spacing:-.025em;
  color:var(--heading);
}
.page-subtitle{
  font-size:13.5px;color:var(--muted);
  margin:0;line-height:1.5;
}


/* ============================================================
   14. DASHBOARD — stats, tools, badges, section title
   ============================================================ */
.stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--space-grid);margin-bottom:var(--space-section);
}
.stat-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:22px 24px;
  transition:border-color .2s;
}
.stat-card:hover{border-color:var(--border-hover)}
.stat-label{
  font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.8px;
  margin-bottom:8px;
}
.stat-value{
  font-size:28px;font-weight:800;color:var(--heading);
  letter-spacing:-.02em;line-height:1.1;
}
/* Secondary unit text inside stat-value (e.g. "/ 5000 GB") */
.stat-unit{
  font-size:13px;color:var(--muted);font-weight:500;
  margin-left:4px;
}
html[dir="rtl"] .stat-unit{margin-left:0;margin-right:4px}
.stat-sub{font-size:12px;color:var(--muted);margin-top:6px}

.progress{
  height:5px;background:var(--border);border-radius:999px;
  overflow:hidden;margin-top:10px;
}
.progress-bar{
  height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--primary),#4da6ff);
  transition:width .5s ease;
}

/* Section heading inside main-content (e.g. "Start a new render")
   Higher specificity than `.main-content h2` so it always wins.
   Sized for clear visual anchor on wide layouts. */
.main-content h2.section-title,
h2.section-title,
.section-title{
  font-size:19px;font-weight:700;color:var(--heading);
  margin:4px auto 14px;letter-spacing:-.02em;
}

.tools-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--space-grid);
}
.tool-card{
  display:flex;flex-direction:column;gap:12px;
  padding:22px;border-radius:14px;
  background:var(--card);border:1px solid var(--border);
  color:var(--text);text-decoration:none;
  position:relative;
  transition:border-color .2s, box-shadow .2s;
}
.tool-card:hover{
  border-color:var(--primary);
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(0,128,255,.08);
}
.tool-icon{
  width:40px;height:40px;border-radius:10px;
  background:var(--primary-soft);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:4px;
}
.tool-icon svg{width:20px;height:20px;stroke-width:1.8}
.tool-name{font-size:15px;font-weight:700;color:var(--heading)}
.tool-desc{font-size:13px;line-height:1.5;color:var(--muted);margin:0;flex:1}

.badge{
  display:inline-flex;align-self:flex-start;
  padding:3px 10px;border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;
  margin-top:10px;
}
.badge-live{background:var(--success-bg);color:var(--success)}
.badge-soon{background:var(--primary-soft);color:var(--primary)}
.badge-warning{background:var(--warning-bg);color:var(--warning)}
html.dark .badge-warning{color:#fcd34d}
.badge-danger{background:var(--danger-bg);color:var(--danger)}


/* ============================================================
   15. ACCOUNT & SIGNUP PLANS
   ============================================================ */
.account-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:var(--space-grid);
}
/* account-grid .card inherits base card padding (24px) for consistency */
/* Unified card-section-label style — used across account/settings/billing */
.card-section-label,
.account-grid .card > h3:first-child,
.settings-grid .card > h3:first-child{
  font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.6px;
  margin:0 0 16px;
}

.plan-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;margin-bottom:20px;
}
.plan-price{font-size:24px;font-weight:800;color:var(--heading);letter-spacing:-.02em}
.plan-price span{font-size:13px;color:var(--muted);font-weight:500}
.plan-meta{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.7}


/* ============================================================
   16. BILLING — current plan & available plans grid
   ============================================================ */
.billing-current{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--space-grid);flex-wrap:wrap;
}
.billing-current-info{flex:1;min-width:240px}
.billing-current-label{
  font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.6px;
  margin-bottom:8px;
}
.billing-current-name{
  font-size:28px;font-weight:800;color:var(--heading);
  letter-spacing:-.02em;line-height:1.1;margin-bottom:4px;
}
.billing-current-meta{font-size:14px;color:var(--muted)}
.billing-current-meta .warning{color:var(--warning)}

.billing-plans{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
}
.billing-plan-card{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:22px;
  transition:border-color .2s, box-shadow .2s;
}
.billing-plan-card.current{
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-soft);
}
.billing-plan-name{
  font-size:14px;font-weight:700;color:var(--heading);
  text-transform:uppercase;letter-spacing:.5px;
  margin-bottom:10px;
}
.billing-plan-price{
  font-size:28px;font-weight:800;color:var(--heading);
  letter-spacing:-.02em;line-height:1;
  margin-bottom:16px;
}
.billing-plan-price span{
  font-size:13px;font-weight:500;color:var(--muted);
  margin-left:3px;
}
html[dir="rtl"] .billing-plan-price span{margin-left:0;margin-right:3px}
.billing-plan-features{
  list-style:none;padding:0;margin:0 0 20px;
  flex:1;
}
.billing-plan-features li{
  padding:6px 0;font-size:13px;color:var(--muted);
  border-bottom:1px solid var(--border);
}
.billing-plan-features li:last-child{border-bottom:none}
.billing-plan-action{margin-top:auto}


/* ============================================================
   17. TEAM — table, role badges
   ============================================================ */
.team-table{
  width:100%;border-collapse:collapse;table-layout:fixed;
}
.team-table th{
  text-align:left;padding:14px 18px;
  font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.team-table td{
  padding:14px 18px;border-bottom:1px solid var(--border);
  font-size:14px;color:var(--heading);
}
.team-table tr:last-child td{border-bottom:none}
.team-table tr:hover td{background:var(--surface)}
html[dir="rtl"] .team-table th{text-align:right}

.team-cell-user{display:flex;align-items:center;gap:10px}
.team-cell-muted{color:var(--muted)}
.team-cell-meta{color:var(--muted);font-size:13px}
.team-cell-actions{text-align:right}
html[dir="rtl"] .team-cell-actions{text-align:left}

.role-badge{
  display:inline-block;padding:3px 9px;border-radius:6px;
  font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.4px;
}
.role-owner {background:var(--primary-soft);color:var(--primary)}
.role-admin {background:rgba(245,158,11,.12);color:#d97706}
html.dark .role-admin{color:#fcd34d;background:rgba(245,158,11,.15)}
.role-member{background:var(--surface);color:var(--muted);border:1px solid var(--border)}
html.dark .role-member{background:rgba(255,255,255,.05);color:var(--muted);border-color:transparent}


/* ============================================================
   18. SETTINGS — theme cards, settings rows, danger zone
   ============================================================ */
.settings-grid{
  display:flex;flex-direction:column;gap:var(--space-grid);
  align-items:stretch;
}
.settings-grid > .card{width:100%}

.settings-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:14px 0;
  border-top:1px solid var(--border);
  flex-wrap:wrap;
}
.settings-row:first-child{border-top:0;padding-top:0}
.settings-label{font-size:13.5px;font-weight:600;color:var(--heading)}
.settings-help{font-size:12px;color:var(--muted);margin-top:3px}

.theme-grid{display:flex;gap:8px;flex-shrink:0}
.theme-card{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  min-width:70px;padding:10px 16px;border-radius:10px;
  border:1.5px solid var(--border);background:var(--card);
  color:var(--muted);font-size:11px;font-weight:600;
  cursor:pointer;
  transition:border-color .15s, color .15s, background-color .15s;
}
.theme-card:hover{border-color:var(--primary);color:var(--text)}
.theme-card.active{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.theme-card svg{display:block}


/* ============================================================
   19. NOTIFICATIONS (settings page)
   ============================================================ */
.notif-list{display:flex;flex-direction:column;gap:14px}
.notif-row{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;padding:14px 16px;
  border:1px solid var(--border);border-radius:10px;
  background:var(--surface);cursor:pointer;
  transition:border-color .15s, background-color .15s;
}
.notif-row:hover{border-color:var(--primary);background:var(--card)}
.notif-text{flex:1;min-width:0}

.notif-toggle{
  position:relative;display:inline-block;
  width:40px;height:22px;flex-shrink:0;margin-top:2px;
}
.notif-toggle input{
  position:absolute;opacity:0;width:0;height:0;pointer-events:none;
}
.notif-slider{
  position:absolute;inset:0;background:var(--border);
  border-radius:99px;cursor:pointer;
  transition:background-color .2s;
}
.notif-slider::before{
  content:"";position:absolute;
  width:16px;height:16px;left:3px;top:3px;
  background:#fff;border-radius:50%;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .2s;
}
.notif-toggle input:checked + .notif-slider{background:var(--primary)}
.notif-toggle input:checked + .notif-slider::before{transform:translateX(18px)}
.notif-toggle input:disabled + .notif-slider{opacity:.5;cursor:wait}
html[dir="rtl"] .notif-toggle input:checked + .notif-slider::before{transform:translateX(-18px)}

.notif-status{
  display:none;font-size:12px;
  margin-bottom:12px;padding:8px 12px;border-radius:8px;
}
.notif-status.success{background:var(--success-bg);color:var(--success);border:1px solid rgba(22,163,74,.25);display:block}
.notif-status.error  {background:var(--danger-bg); color:var(--danger); border:1px solid rgba(220,38,38,.25);display:block}


/* ============================================================
   20. SESSIONS (settings page)
   ============================================================ */
.sessions-actions{display:flex;justify-content:flex-end;margin-bottom:12px}
.sessions-empty{text-align:center;padding:20px 0;color:var(--muted);font-size:13px}

.session-row{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--border);
}
.session-row:last-child{border-bottom:none}
.session-icon{color:var(--muted);flex-shrink:0;display:flex}
.session-info{flex:1;min-width:0}
.session-label{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  font-weight:600;color:var(--heading);font-size:14px;
}
.session-meta{font-size:12px;color:var(--muted);margin-top:2px}
.session-action{flex-shrink:0}
.session-badge-current{
  display:inline-block;padding:2px 8px;border-radius:6px;
  background:var(--success-bg);color:var(--success);
  font-size:11px;font-weight:600;
}
.session-x-btn{
  width:28px;height:28px;padding:0;
  background:transparent;border:none;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;color:var(--muted);cursor:pointer;
  transition:background-color .15s, color .15s;
}
.session-x-btn:hover{background:var(--danger-bg);color:var(--danger)}
.session-x-btn:disabled{opacity:.4;cursor:not-allowed}


/* ============================================================
   21. ADMIN SUB-NAV TABS
   ============================================================ */
.admin-tabs{
  display:flex;flex-wrap:wrap;gap:4px;
  margin:4px 0 18px;padding:6px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;width:100%;
}
.admin-tab{
  padding:10px 18px;border-radius:8px;
  font-size:14px;font-weight:500;color:var(--muted);
  text-decoration:none;white-space:nowrap;
  transition:background-color .15s, color .15s;
}
.admin-tab:hover{background:var(--card);color:var(--heading)}
.admin-tab.active{background:var(--primary);color:#fff}
.admin-tab.active:hover{background:var(--primary-2);color:#fff}


/* ============================================================
   22. ADMIN TABLE — unified styling for all admin tables
   ============================================================ */
.admin-table{
  width:100%;border-collapse:collapse;table-layout:fixed;
  font-size:13px;
}
.admin-table thead tr{background:var(--surface);text-align:left}
.admin-table th{
  padding:12px 14px;
  font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px;
  border-bottom:1px solid var(--border);
}
.admin-table td{
  padding:12px 14px;border-top:1px solid var(--border);
  color:var(--text);
}
.admin-table tbody tr:hover td{background:var(--surface)}
.admin-table .col-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--muted)}
.admin-table .col-muted{color:var(--muted)}
.admin-table .col-strong{font-weight:600}
.admin-table .col-action{text-align:right;white-space:nowrap}
html[dir="rtl"] .admin-table thead tr,
html[dir="rtl"] .admin-table th{text-align:right}
html[dir="rtl"] .admin-table .col-action{text-align:left}
.admin-table .col-nowrap{white-space:nowrap}
.admin-table-compact th{padding:10px 14px;font-size:11px}
.admin-table-compact td{padding:10px 14px}


/* ============================================================
   23. PASSWORD INPUT (.pw-wrap + .pw-toggle)
   - Unified for both general (account, settings) and auth pages
   - Auth pages override colors via .login-card .pw-toggle
   ============================================================ */
.pw-wrap,.lp-pw-wrap{position:relative;display:block;width:100%}
.pw-wrap > input,
.pw-wrap .input,
.lp-pw-wrap > input{padding-right:44px}
html[dir="rtl"] .pw-wrap > input,
html[dir="rtl"] .pw-wrap .input,
html[dir="rtl"] .lp-pw-wrap > input{padding-right:14px;padding-left:44px}

.pw-toggle{
  position:absolute;right:6px;top:50%;
  transform:translateY(-50%);
  width:32px;height:32px;padding:0;margin:0;
  background:transparent;border:none;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;cursor:pointer;z-index:2;
  transition:background-color .15s, color .15s;
}
.pw-toggle:hover{background:var(--surface);color:var(--text)}
.pw-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
html[dir="rtl"] .pw-toggle{right:auto;left:6px}

/* Auth-page (.login-card) override — darker glass context */
.login-card .pw-toggle{color:#9bb0cc}
.login-card .pw-toggle:hover{background:rgba(255,255,255,.08);color:#e8f0ff}
html:not(.dark) .login-card .pw-toggle{color:#6b7280}
html:not(.dark) .login-card .pw-toggle:hover{background:rgba(0,0,0,.05);color:#111}


/* ============================================================
   24. MODALS
   ============================================================ */
.modal-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(8,14,28,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  animation:modalFade .15s ease-out;
}
.modal-overlay[hidden]{display:none !important}

.modal{
  width:100%;max-width:380px;
  padding:28px 26px 22px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl);
  text-align:center;
  animation:modalRise .2s cubic-bezier(.2,.9,.3,1);
}

.modal-icon{
  width:48px;height:48px;border-radius:14px;
  background:var(--primary-soft);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;
}
.modal-icon.danger{background:var(--danger-bg);color:var(--danger)}
.modal-icon.success{background:var(--success-bg);color:var(--success)}
.modal-icon.warning{background:var(--warning-bg);color:var(--warning)}

.modal h3{
  margin:0 0 6px;
  font:700 18px/1.3 'Poppins',inherit;
  color:var(--heading);letter-spacing:-.02em;
}
.modal p{margin:0 0 22px;color:var(--muted);font-size:13.5px;line-height:1.55}
.modal .input{margin:0 0 22px;width:100%}
.modal-actions{display:flex;gap:10px;justify-content:stretch}
.modal-actions .btn{flex:1;padding:10px 14px}

@keyframes modalFade{from{opacity:0}to{opacity:1}}
@keyframes modalRise{
  from{opacity:0;transform:translateY(10px) scale(.98)}
  to  {opacity:1;transform:translateY(0) scale(1)}
}


/* ============================================================
   25. AUTH PAGES — login / signup / forgot / reset
   ============================================================ */
.login-page{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:24px 16px;overflow:hidden;
  background:#050b18;
  font-family:'Poppins',ui-sans-serif,system-ui,-apple-system,sans-serif;
}
html:not(.dark) .login-page{background:#f4f6fb}

/* Signup variant — scrollable, multi-card layout */
body.auth-page:has(.signup-page){overflow:auto}
.login-page.signup-page{
  position:fixed;inset:0;
  display:block;
  padding:48px 16px 64px;
  overflow-x:hidden;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.login-page.signup-page .login-bg{position:fixed}

/* Background layers */
.login-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}

.lp-orb{position:absolute;border-radius:50%;filter:blur(90px)}
.lp-orb1{width:780px;height:620px;top:-220px;left:-180px;
  background:radial-gradient(circle,rgba(0,128,255,.32) 0%,transparent 65%);
  animation:lp-o1 24s ease-in-out infinite}
.lp-orb2{width:560px;height:480px;bottom:-160px;right:-120px;
  background:radial-gradient(circle,rgba(0,60,200,.26) 0%,transparent 65%);
  animation:lp-o2 30s ease-in-out infinite}
.lp-orb3{width:420px;height:360px;top:38%;left:62%;
  background:radial-gradient(circle,rgba(0,140,255,.18) 0%,transparent 65%);
  animation:lp-o3 20s ease-in-out infinite}
html:not(.dark) .lp-orb1{background:radial-gradient(circle,rgba(0,128,255,.18) 0%,transparent 65%)}
html:not(.dark) .lp-orb2{background:radial-gradient(circle,rgba(0,60,200,.13) 0%,transparent 65%)}
html:not(.dark) .lp-orb3{background:radial-gradient(circle,rgba(0,140,255,.10) 0%,transparent 65%)}
@keyframes lp-o1{0%,100%{transform:translate(0,0)}50%{transform:translate(70px,55px)}}
@keyframes lp-o2{0%,100%{transform:translate(0,0)}50%{transform:translate(-55px,-70px)}}
@keyframes lp-o3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-35px,28px) scale(1.12)}}

.lp-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(0,128,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,128,255,.045) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);
}

.lp-sweeps{position:absolute;inset:0}
.lp-sw{
  position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,transparent 25%,
    rgba(0,128,255,.4) 50%,rgba(120,200,255,.7) 52%,rgba(0,128,255,.4) 54%,
    transparent 75%,transparent 100%);
  animation:lp-sweep 14s linear infinite;
}
.lp-sw:nth-child(1){top:24%;animation-duration:16s;opacity:.55}
.lp-sw:nth-child(2){top:50%;animation-duration:12s;animation-delay:-6s;opacity:.4}
.lp-sw:nth-child(3){top:76%;animation-duration:18s;animation-delay:-3s;opacity:.5}
@keyframes lp-sweep{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

.lp-dots{position:absolute;inset:0}
.lp-pd{
  position:absolute;border-radius:50%;background:#0080ff;
  animation:lp-pulse 6s ease-in-out infinite;
}
@keyframes lp-pulse{
  0%,100%{opacity:.1;transform:scale(1)}
  50%   {opacity:.32;transform:scale(2.2)}
}

/* Card */
.login-wrap{position:relative;z-index:2;width:100%;max-width:420px}
.signup-wrap{max-width:720px;margin:0 auto}

/* Signup multi-card sections */
.signup-head{text-align:center;margin-bottom:28px;padding:0 4px}
.signup-section{
  margin-bottom:18px;padding:24px 28px;border-radius:16px;
  background:rgba(13,21,37,.78);
  border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  box-shadow:
    0 18px 50px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.04);
}
html:not(.dark) .signup-section{
  background:rgba(255,255,255,.94);
  border-color:rgba(15,23,42,.08);
  box-shadow:
    0 12px 40px rgba(0,40,120,.08),
    0 0 0 1px rgba(0,0,0,.03);
}
.signup-section-head{
  display:flex;align-items:center;gap:10px;
  margin:0 0 18px;padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
html:not(.dark) .signup-section-head{border-bottom-color:#eef0f4}
.signup-section-icon{
  width:32px;height:32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,128,255,.14);color:#0080ff;
  flex-shrink:0;
}
.signup-section-icon svg{width:16px;height:16px;stroke-width:1.7}
.signup-section-title{
  margin:0;
  font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:1.2px;
  color:#9bb0cc;
}
html:not(.dark) .signup-section-title{color:#374151}
.signup-section .lp-field:last-child{margin-bottom:0}
.signup-section .lp-row:last-child .lp-field{margin-bottom:0}

.signup-submit{margin:24px 4px 0}
.signup-foot-area{margin-top:22px;text-align:center;padding:0 4px}

.login-card{
  padding:42px 38px 32px;border-radius:18px;
  background:rgba(13,21,37,.78);
  border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04),
    0 0 80px rgba(0,128,255,.08);
}
html:not(.dark) .login-card{
  background:rgba(255,255,255,.92);
  border-color:rgba(15,23,42,.08);
  box-shadow:
    0 30px 80px rgba(0,40,120,.16),
    0 0 0 1px rgba(0,0,0,.03);
}

.login-head{text-align:center;margin-bottom:24px}
.login-logo{
  display:inline-block;text-decoration:none;
  font-weight:700;font-size:30px;letter-spacing:-.035em;line-height:1;
}
.lp-we{color:#0080ff}
.lp-renders{color:#e8f0ff}
html:not(.dark) .lp-renders{color:#0a0f1e}
.login-sub{margin:10px 0 0;font-size:13px;color:#7b8fad}
html:not(.dark) .login-sub{color:#6b7280}

.lp-section-label{
  font-size:10px;font-weight:700;color:#7b8fad;
  text-transform:uppercase;letter-spacing:1.5px;
  margin:18px 0 12px;padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
html:not(.dark) .lp-section-label{color:#6b7280;border-bottom-color:#e5e7eb}
.lp-section-label:first-of-type{margin-top:4px}
.lp-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.lp-field{margin-bottom:14px}
.lp-field label{
  display:block;font-size:12px;font-weight:500;
  color:#9bb0cc;margin-bottom:7px;
}
html:not(.dark) .lp-field label{color:#374151}

.lp-req{color:#0080ff;font-weight:700}
.lp-hint{color:#5b6f8e;font-weight:400;font-size:11px}
html:not(.dark) .lp-hint{color:#9ca3af}

.lp-field input,
.lp-field select{
  width:100%;padding:12px 14px;
  border-radius:10px;
  border:1.5px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.30);
  color:#e8f0ff;
  font:400 14px/1.4 inherit;
  outline:none;box-shadow:none;
  transition:border-color .15s, background-color .15s, box-shadow .15s;
  box-sizing:border-box;
}
.lp-field select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:36px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239bb0cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:14px 14px;
}
html[dir="rtl"] .lp-field select{
  background-position:left 12px center;
  padding-right:14px;padding-left:36px;
}
html:not(.dark) .lp-field input,
html:not(.dark) .lp-field select{
  background:#fafafa;border-color:#e5e7eb;color:#111;
}
html:not(.dark) .lp-field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:14px 14px;
}
.lp-field input::placeholder{color:#5b6f8e;opacity:.7;font-weight:300}
html:not(.dark) .lp-field input::placeholder{color:#9ca3af}
.lp-field input:focus,
.lp-field select:focus{
  border-color:#0080ff;
  background:rgba(0,0,0,.40);
  box-shadow:0 0 0 3px rgba(0,128,255,.14);
}
html:not(.dark) .lp-field input:focus,
html:not(.dark) .lp-field select:focus{background:#fff}

/* "Forgot password" link */
.lp-forgot{text-align:right;margin:-2px 0 4px}
html[dir="rtl"] .lp-forgot{text-align:left}
.lp-forgot a{
  font-size:12px;color:#7b8fad;
  text-decoration:none;font-weight:400;
  transition:color .15s;
}
html:not(.dark) .lp-forgot a{color:#6b7280}
.lp-forgot a:hover{color:#0080ff}

/* Plan picker (signup) */
.lp-plan-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;margin-bottom:4px;
}
.lp-plan{
  position:relative;display:block;
  padding:14px 12px;border-radius:12px;
  border:1.5px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.25);
  cursor:pointer;
  transition:border-color .15s, background-color .15s, box-shadow .15s;
}
.lp-plan:hover{border-color:rgba(0,128,255,.45);background:rgba(0,128,255,.06)}
.lp-plan.selected{
  border-color:#0080ff;background:rgba(0,128,255,.14);
  box-shadow:0 0 0 3px rgba(0,128,255,.12);
}
html:not(.dark) .lp-plan{background:#fafafa;border-color:#e5e7eb}
html:not(.dark) .lp-plan:hover{border-color:rgba(0,128,255,.45);background:rgba(0,128,255,.04)}
html:not(.dark) .lp-plan.selected{
  border-color:#0080ff;background:rgba(0,128,255,.08);
  box-shadow:0 0 0 3px rgba(0,128,255,.10);
}
.lp-plan input{position:absolute;opacity:0;pointer-events:none}
.lp-plan-name{font-size:14px;font-weight:700;color:#e8f0ff;margin-bottom:4px}
html:not(.dark) .lp-plan-name{color:#0a0f1e}
.lp-plan-price{font-size:20px;font-weight:700;color:#0080ff;margin-bottom:6px;line-height:1}
.lp-plan-price span{font-size:11px;color:#7b8fad;font-weight:500;margin-left:2px}
html:not(.dark) .lp-plan-price span{color:#6b7280}
.lp-plan-meta{font-size:11px;color:#9bb0cc;line-height:1.55}
html:not(.dark) .lp-plan-meta{color:#6b7280}

/* Submit button */
.lp-btn{
  width:100%;margin-top:18px;padding:13px;
  border:none;border-radius:10px;
  background:#0080ff;color:#fff;
  font:600 14.5px/1 'Poppins',inherit;
  letter-spacing:.1px;cursor:pointer;
  transition:background-color .15s, transform .15s, box-shadow .15s;
}
.lp-btn:hover{background:#0070e0;transform:translateY(-1px);box-shadow:0 10px 28px rgba(0,128,255,.32)}
.lp-btn:active{transform:translateY(0)}
.lp-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* OR divider */
.lp-divider{
  display:flex;align-items:center;
  margin:20px 0 16px;
  font-size:10px;font-weight:600;letter-spacing:1.5px;
  color:#5b6f8e;
}
html:not(.dark) .lp-divider{color:#9ca3af}
.lp-divider::before,
.lp-divider::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.08)}
html:not(.dark) .lp-divider::before,
html:not(.dark) .lp-divider::after{background:#e5e7eb}
.lp-divider span{padding:0 12px}

/* Footer text */
.lp-signup{text-align:center;font-size:13px;color:#7b8fad;margin:0;font-weight:400}
html:not(.dark) .lp-signup{color:#6b7280}
.lp-signup a{color:#0080ff;text-decoration:none;font-weight:600}
.lp-signup a:hover{text-decoration:underline}
.lp-foot{
  margin-top:22px;text-align:center;
  font-size:11px;font-weight:300;
  color:#5b6f8e;opacity:.7;
}
html:not(.dark) .lp-foot{color:#9ca3af}

/* Inline messages */
#login-error:not(:empty),
#signup-error:not(:empty){
  padding:10px 14px;border-radius:10px;margin-bottom:14px;
  background:rgba(239,68,68,.10);
  border:1.5px solid rgba(239,68,68,.25);
  color:#fca5a5;font-size:13px;font-weight:400;
}
html:not(.dark) #login-error:not(:empty),
html:not(.dark) #signup-error:not(:empty){
  background:rgba(239,68,68,.06);color:#dc2626;
}
#forgot-msg:not(:empty),
#reset-msg:not(:empty){
  padding:10px 14px;border-radius:10px;margin-bottom:14px;
  font-size:13px;
}
.lp-alert-error{
  padding:12px 14px;border-radius:10px;
  background:rgba(220,38,38,.12);
  border:1px solid rgba(220,38,38,.28);
  color:#fca5a5;font-size:13px;text-align:center;
}
html:not(.dark) .lp-alert-error{background:#fef2f2;border-color:#fecaca;color:#b91c1c}


/* ============================================================
   26. INVITE PAGE (invite_landing / invite_invalid)
   ============================================================ */
.invite-page{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:24px;background:var(--bg);
  font-family:'Poppins',system-ui,sans-serif;
  overflow-y:auto;
}
.invite-card{
  width:100%;max-width:440px;
  padding:36px 32px;
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow-md);
}
html.dark .invite-card{box-shadow:var(--shadow-lg)}
.invite-logo{
  font-size:22px;font-weight:800;letter-spacing:-.02em;
  color:var(--heading);text-align:center;
}
.invite-logo .we{color:var(--primary)}
.invite-icon-circle{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary-soft);
  margin:20px auto 16px;
}
.invite-icon-circle.danger{background:var(--danger-bg)}
.invite-icon-circle.danger svg{color:var(--danger)}
.invite-icon-circle.success{background:var(--success-bg)}
.invite-icon-circle.success svg{color:var(--success)}
.invite-icon-circle svg{color:var(--primary)}
.invite-title{
  margin:0 0 10px;
  font-size:22px;font-weight:700;color:var(--heading);
  text-align:center;
}
.invite-text{
  margin:0 0 24px;text-align:center;
  font-size:14px;color:var(--muted);line-height:1.5;
}
.invite-detail-box{
  margin-bottom:20px;padding:14px 16px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:10px;
}
.invite-detail-label{
  font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px;
  margin-bottom:4px;
}
.invite-detail-value{font-size:14px;font-weight:600;color:var(--heading)}


/* ============================================================
   27. UTILITIES
   ============================================================ */
.text-muted{color:var(--muted)}
.text-sm{font-size:13px}
.text-xs{font-size:12px}
.text-center{text-align:center}
.text-right{text-align:right}
.mt-1{margin-top:8px}
.mt-2{margin-top:16px}
.mb-2{margin-bottom:16px}
.mb-3{margin-bottom:24px}
.flex{display:flex}
.flex-1{flex:1}
.gap-2{gap:8px}
.hidden{display:none !important}

.htmx-indicator{display:none}
.htmx-request .htmx-indicator{display:inline}
.htmx-request .htmx-indicator-hide{display:none}


/* ============================================================
   28. RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .topbar{padding:0 20px}
  .main-content{padding:20px 24px 64px}
  .account-grid{grid-template-columns:1fr}
}

@media (max-width:768px){
  .sidebar{
    position:fixed;left:-280px;top:0;bottom:0;
    width:260px;height:100vh;z-index:100;
    box-shadow:var(--shadow-xl);
    transition:left .25s ease;
  }
  html[dir="rtl"] .sidebar{left:auto;right:-280px;transition:right .25s ease}
  .sidebar.open{left:0}
  html[dir="rtl"] .sidebar.open{right:0}

  html.sb-collapsed .sidebar{width:260px !important}
  html.sb-collapsed .sidebar .logo,
  html.sb-collapsed .sidebar .sidebar-group-label,
  html.sb-collapsed .sidebar .nav-text,
  html.sb-collapsed .sidebar .nav-tag,
  html.sb-collapsed .sidebar .theme-toggle-inline{display:revert}
  html.sb-collapsed .sidebar .nav-link{
    justify-content:flex-start;padding:9px 12px;gap:11px;
    width:auto;height:auto;margin:0;border-radius:9px;
  }
  html.sb-collapsed .sidebar .sidebar-toggle{display:none}
  html.sb-collapsed .sidebar .nav-link:hover::after{display:none}

  .main-content{padding:16px 16px 48px}
  .topbar{padding:0 14px;padding-left:60px}
  .topbar-user .uname{display:none}

  .mobile-menu-btn{
    position:fixed;top:13px;left:12px;z-index:90;
    width:34px;height:34px;border-radius:9px;
    background:var(--card);border:1px solid var(--border);color:var(--text);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;box-shadow:var(--shadow-sm);
  }
  html[dir="rtl"] .mobile-menu-btn{left:auto;right:12px}

  .stats-grid,.tools-grid,.account-grid,.billing-plans{grid-template-columns:1fr}
  .form-row,.form-row-3{grid-template-columns:1fr;gap:0}

  /* Admin tables horizontal scroll on mobile */
  .card-tight:has(.admin-table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .admin-table{min-width:640px}

  /* Team table */
  .card-tight:has(.team-table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .team-table{min-width:600px}
}

@media (min-width:769px){
  .mobile-menu-btn{display:none}
}

@media (max-width:640px){
  .page-header .page-title{font-size:22px}
  .stat-value{font-size:24px}
  .main-content{padding:20px var(--content-pad-sm) 48px}
  .admin-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}

  .login-page.signup-page{padding:32px 14px 56px}
  .signup-section{padding:20px 18px;border-radius:14px;margin-bottom:14px}
  .signup-section-head{margin-bottom:14px;padding-bottom:12px}
  .lp-row{grid-template-columns:1fr;gap:0}
  .lp-plan-grid{grid-template-columns:1fr 1fr

  .user-menu{
      position:fixed;top:auto;bottom:16px;
      left:16px;right:16px;
      min-width:auto;
    }
  .login-card{padding:32px 24px 26px;border-radius:16px}
    .login-logo{font-size:26px}
  .modal{padding:24px 20px 18px}
    .modal h3{font-size:17px}
}

}

.login-logo{font-size:26px}
}

.modal h3{font-size:17px}
}

@media (max-width:420px){
  .lp-plan-grid{grid-template-columns:1fr}
}

/* ============================================================
   BUTTON LOADING STATES — auto-applied during HTMX requests
   ============================================================ */
.btn{position:relative;transition:background-color .15s,border-color .15s,transform .1s,opacity .15s}
.btn:active:not(:disabled){transform:scale(.98)}
.btn.htmx-request{
  pointer-events:none;
  color:transparent !important;
}
.btn.htmx-request::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:16px;height:16px;
  margin:-8px 0 0 -8px;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  animation:btn-spin .6s linear infinite;
  color:#fff;
}
.btn:not(.btn-primary):not(.btn-danger).htmx-request::after{color:var(--text)}
@keyframes btn-spin{to{transform:rotate(360deg)}}

/* ============================================================
   PAGE LOADING INDICATOR — top progress bar during navigation
   ============================================================ */
.htmx-progress-bar{
  position:fixed;top:0;left:0;right:0;
  height:2px;
  background:transparent;
  z-index:9999;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
  transition:opacity .2s;
}
.htmx-progress-bar::before{
  content:"";
  position:absolute;top:0;left:0;
  height:100%;width:30%;
  background:linear-gradient(90deg,transparent,var(--primary) 50%,transparent);
  box-shadow:0 0 8px rgba(0,128,255,.6);
  border-radius:2px;
  animation:htmx-progress-slide 1.6s cubic-bezier(.4,0,.2,1) infinite;
}
body.htmx-request .htmx-progress-bar,
.htmx-progress-bar.show{opacity:1 !important}
@keyframes htmx-progress-slide{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(450%)}
}

/* Logo dot suffix — adds "." in renders color, then "/" separator on topbar */
.logo .renders-text::after,
.lp-renders::after,
.invite-logo::after{
  content:".";
  color:inherit;
  font-weight:700;
  margin-left:1px;
}
/* Topbar logo: dot in heading color (matches "renders"), then keep the "/" separator */
.topbar-logo .renders-text::after{
  content:".";
  color:var(--heading);
  font-weight:700;
  margin-left:1px;
}
.topbar-logo::after{
  content:"/";
  color:var(--muted);
  margin:0 8px;
  opacity:.5;
  font-weight:400;
}

/* ============================================================
   EMPTY STATES — unified placeholder for empty lists/tables
   ============================================================ */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 24px;
  text-align:center;
  color:var(--muted);
}
.empty-state-icon{
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary-soft);
  color:var(--primary);
  border-radius:14px;
  margin-bottom:16px;
}
.empty-state-icon svg{width:28px;height:28px;stroke-width:1.6}
.empty-state-title{
  font-size:15px;font-weight:600;
  color:var(--heading);
  margin:0 0 6px;
}
.empty-state-desc{
  font-size:13px;line-height:1.5;
  color:var(--muted);
  max-width:320px;
  margin:0 0 18px;
}
.empty-state-action{
  font-size:13px;font-weight:500;
}

/* ============================================================
   TOAST NOTIFICATIONS — non-blocking transient messages
   ============================================================ */
.toast-host{
  position:fixed;
  bottom:20px;right:20px;
  z-index:9999;
  display:flex;flex-direction:column;gap:10px;
  pointer-events:none;
  max-width:calc(100vw - 40px);
}
html[dir="rtl"] .toast-host{right:auto;left:20px}
.toast{
  pointer-events:auto;
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 14px 12px 14px;
  min-width:280px;max-width:380px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 10px 32px rgba(0,0,0,.14);
  font-size:13px;color:var(--text);
  transform:translateX(120%);
  opacity:0;
  transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .2s;
}
html.dark .toast{box-shadow:0 10px 32px rgba(0,0,0,.5)}
html[dir="rtl"] .toast{transform:translateX(-120%)}
.toast.show{transform:translateX(0);opacity:1}
.toast-icon{
  flex-shrink:0;width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
}
.toast-icon svg{width:18px;height:18px;stroke-width:2}
.toast-body{flex:1;line-height:1.4;padding-top:1px}
.toast-title{font-weight:600;color:var(--heading);margin:0 0 2px}
.toast-msg{font-size:12.5px;color:var(--muted);margin:0}
.toast-close{
  flex-shrink:0;background:none;border:none;cursor:pointer;
  color:var(--muted);padding:2px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  opacity:.6;transition:opacity .15s,background-color .15s;
}
.toast-close:hover{opacity:1;background:var(--surface)}
.toast-close svg{width:14px;height:14px;stroke-width:2}
.toast.success .toast-icon{color:var(--success)}
.toast.error   .toast-icon{color:var(--danger)}
.toast.warning .toast-icon{color:var(--warning)}
.toast.info    .toast-icon{color:var(--primary)}

/* ============================================================
   STATUS DOT — colored pulse indicator
   ============================================================ */
.status-dot{
  display:inline-block;
  width:8px;height:8px;
  border-radius:50%;
  margin-right:7px;
  vertical-align:middle;
  position:relative;
  top:-1px;
}
.status-dot.status-active{
  background:var(--success);
  box-shadow:0 0 0 0 rgba(22,163,74,.5);
  animation:status-pulse 2s ease-out infinite;
}
.status-dot.status-warning{background:var(--warning)}
.status-dot.status-danger{background:var(--danger)}
.status-dot.status-muted{background:var(--muted);opacity:.5}
@keyframes status-pulse{
  0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}
  70%{box-shadow:0 0 0 6px rgba(22,163,74,0)}
  100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}
}

/* ============================================================
   DASHBOARD QUICK ACTIONS
   ============================================================ */
.quick-actions{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--space-grid);
  margin-bottom:var(--space-section);
}
.quick-action{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  text-decoration:none;
  color:var(--text);
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.quick-action:hover{
  border-color:var(--primary);
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,128,255,.08);
}
.quick-action-icon{
  flex-shrink:0;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary-soft);
  color:var(--primary);
  border-radius:10px;
}
.quick-action-icon svg{width:20px;height:20px}
.quick-action-body{flex:1;min-width:0}
.quick-action-title{
  font-size:14px;font-weight:600;
  color:var(--heading);
  margin:0 0 2px;
}
.quick-action-desc{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
}
.quick-action-arrow{
  flex-shrink:0;width:16px;height:16px;
  color:var(--muted);
  opacity:.5;
  transition:transform .2s,opacity .2s;
}
.quick-action:hover .quick-action-arrow{
  color:var(--primary);opacity:1;
  transform:translateX(2px);
}
html[dir="rtl"] .quick-action-arrow{transform:scaleX(-1)}
html[dir="rtl"] .quick-action:hover .quick-action-arrow{transform:scaleX(-1) translateX(2px)}

/* ============================================================
   PREVIEW PAGE — branded file viewer
   ============================================================ */
body.preview-page{background:var(--bg)}
body.preview-page .sidebar,
body.preview-page .topbar,
body.preview-page .mobile-menu-btn{display:none !important}
body.preview-page .main{padding:0;margin:0;width:100%;max-width:none}
.preview-wrap{display:flex;flex-direction:column;min-height:100vh}
.preview-header{
  display:flex;align-items:center;gap:20px;
  padding:14px 24px;
  background:var(--card);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:10;
}
.preview-logo{
  font-size:20px;font-weight:700;text-decoration:none;color:var(--heading);
}
.preview-logo .we{color:var(--primary)}
.preview-logo .renders-text::after{content:".";color:inherit}
.preview-meta{flex:1;min-width:0}
.preview-filename{
  font-size:14px;font-weight:600;color:var(--heading);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.preview-sub{font-size:12px;color:var(--muted);margin-top:2px}
.preview-actions{flex-shrink:0}
.preview-body{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:24px;background:var(--bg);
}
.preview-image{max-width:100%;max-height:calc(100vh - 120px);border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.2)}
.preview-video{max-width:100%;max-height:calc(100vh - 120px);border-radius:8px;background:#000}
.preview-audio{width:100%;max-width:560px}
.preview-pdf{width:100%;height:calc(100vh - 120px);border:1px solid var(--border);border-radius:8px}
.preview-unsupported{text-align:center;color:var(--muted)}
.preview-unsupported svg{color:var(--muted);margin-bottom:16px}
.preview-unsupported h3{color:var(--heading);margin:0 0 6px;font-size:16px}
.preview-unsupported p{font-size:13px;margin:0}

/* ============================================================
   FILES LIBRARY — upload zone + file grid
   ============================================================ */
.upload-zone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 24px;
  border:2px dashed var(--border);
  border-radius:12px;
  background:var(--surface);
  cursor:pointer;text-align:center;
  transition:border-color .2s,background .2s,transform .2s;
}
.upload-zone:hover{border-color:var(--primary);background:var(--primary-soft)}
.upload-zone.drag{border-color:var(--primary);background:var(--primary-soft);transform:scale(1.01)}
.upload-zone svg{color:var(--muted);margin-bottom:12px}
.upload-zone:hover svg,.upload-zone.drag svg{color:var(--primary)}
.upload-zone-title{font-size:14px;font-weight:600;color:var(--heading);margin:0 0 4px}
.upload-zone-desc{font-size:12px;color:var(--muted);margin:0}

#upload-list:not(:empty){margin-top:16px;display:flex;flex-direction:column;gap:8px}
.upload-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
}
.upload-row.done{border-color:var(--success)}
.upload-row.error{border-color:var(--danger)}
.upload-row-icon{color:var(--primary);flex-shrink:0}
.upload-row.done .upload-row-icon{color:var(--success)}
.upload-row.error .upload-row-icon{color:var(--danger)}
.upload-row-body{flex:1;min-width:0}
.upload-row-name{font-size:13px;color:var(--heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.upload-row-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.upload-row-fill{height:100%;width:0;background:var(--primary);transition:width .15s;border-radius:2px}
.upload-row.done .upload-row-fill{background:var(--success)}
.upload-row.error .upload-row-fill{background:var(--danger)}
.upload-row-pct{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:40px;text-align:right}

.files-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:var(--space-grid);
}
.file-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  transform:translateY(0);
  transition:border-color .15s ease,box-shadow .2s ease,transform .2s ease;
  will-change:transform;
}
.file-card:hover{
  border-color:var(--primary);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,128,255,.08);
}
.file-thumb{
  aspect-ratio:16/10;
  background:var(--card);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
  overflow:hidden;
}
.file-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.file-thumb svg{width:36px;height:36px}
.file-info{padding:10px 12px 8px}
.file-name{
  font-size:13px;font-weight:500;color:var(--heading);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:2px;
}
.file-meta{font-size:11px;color:var(--muted)}
.file-actions{
  display:flex;gap:6px;padding:0 12px 12px;
}
.file-btn{
  flex:1;display:flex;align-items:center;justify-content:center;
  height:30px;background:var(--card);border:1px solid var(--border);border-radius:6px;
  color:var(--muted);cursor:pointer;text-decoration:none;
  transition:color .15s,border-color .15s,background .15s;
}
.file-btn:hover{color:var(--primary);border-color:var(--primary)}
.file-btn.file-delete:hover{color:var(--danger);border-color:var(--danger)}

/* ============================================================
   MEDIA PREVIEW MODAL — refined proportions + full responsive
   ============================================================ */
.media-modal{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s;
  padding:24px;
}
.media-modal.show{opacity:1}
.media-modal[hidden]{display:none !important}
.media-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(5,11,24,.82);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
html:not(.dark) .media-modal-backdrop{background:rgba(20,30,50,.55)}
.media-modal-body{
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  width:min(960px, 100%);
  max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;
  box-shadow:0 24px 64px rgba(0,0,0,.35);
  transform:scale(.96);transition:transform .2s;
  overflow:hidden;
}
.media-modal.show .media-modal-body{transform:scale(1)}
.media-modal-header{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  background:var(--card);
}
.media-modal-info{flex:1;min-width:0}
.media-modal-name{
  font-size:14px;font-weight:600;color:var(--heading);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.media-modal-meta{font-size:12px;color:var(--muted);margin-top:4px}
.media-modal-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.media-modal-actions .btn-primary{
  padding:6px 14px;font-size:13px;height:32px;
  display:inline-flex;align-items:center;border-radius:8px;
}
.media-modal-close{
  width:32px;height:32px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:color .15s,border-color .15s;
}
.media-modal-close:hover{color:var(--danger);border-color:var(--danger)}
.media-modal-content{
  flex:1;overflow:auto;position:relative;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  padding:24px;min-height:200px;
}
.media-modal-content img,
.media-modal-content video{
  max-width:100%;max-height:calc(100vh - 220px);
  border-radius:10px;display:block;
}
.media-modal-content video{background:#000;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.media-modal-content iframe{
  width:100%;height:calc(100vh - 220px);
  border:none;background:#fff;border-radius:10px;
}
.media-modal-unsupported{color:var(--muted);font-size:14px;text-align:center}

/* Meta pills inside modal header */
#mp-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.meta-pill{
  display:inline-flex;align-items:center;
  padding:3px 9px;font-size:11px;font-weight:500;
  background:var(--surface);border:1px solid var(--border);
  color:var(--muted);border-radius:999px;letter-spacing:.2px;
}
.meta-pill.meta-type{color:var(--primary);border-color:color-mix(in srgb, var(--primary) 30%, transparent)}
.meta-pill.meta-expiry{color:var(--warning);border-color:color-mix(in srgb, var(--warning) 30%, transparent)}
.meta-pill.meta-saved{color:var(--success);border-color:color-mix(in srgb, var(--success) 30%, transparent)}
.meta-pill.meta-duration{color:var(--primary)}
.meta-pill.meta-dims{color:var(--muted)}

/* ============================================================
   WR AUDIO PLAYER — branded
   ============================================================ */
.wr-audio-player{
  display:flex;flex-direction:column;align-items:center;gap:24px;
  padding:32px 28px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  width:min(440px, 100%);
}
.wr-audio-disc{
  width:100px;height:100px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--primary) 0%, var(--primary-2) 60%, #002a5e 100%);
  display:flex;align-items:center;justify-content:center;
  position:relative;
  box-shadow:0 10px 24px rgba(0,128,255,.25);
}
.wr-audio-disc::after{
  content:"";
  width:22px;height:22px;border-radius:50%;
  background:var(--card);
  border:2px solid var(--border);
}
.wr-audio-disc.playing{animation:wr-disc-spin 6s linear infinite}
@keyframes wr-disc-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.wr-audio-controls{display:flex;align-items:center;gap:12px;width:100%}
.wr-audio-play{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;
  background:var(--primary);color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s, background .15s;
}
.wr-audio-play:hover{background:var(--primary-2);transform:scale(1.05)}
.wr-audio-play svg{width:16px;height:16px}
.wr-audio-time{
  font-variant-numeric:tabular-nums;
  font-size:11.5px;color:var(--muted);
  min-width:36px;text-align:center;
}
.wr-audio-bar{
  flex:1;height:5px;background:var(--surface);
  border-radius:3px;cursor:pointer;position:relative;
  border:1px solid var(--border);
}
.wr-audio-bar-fill{
  height:100%;background:var(--primary);
  border-radius:3px;width:0;transition:width .1s linear;
}
.wr-audio-bar-handle{
  position:absolute;top:50%;left:0;
  width:11px;height:11px;border-radius:50%;
  background:var(--primary);
  transform:translate(-50%,-50%);
  box-shadow:0 1px 4px rgba(0,128,255,.4);
  pointer-events:none;
}
.wr-audio-vol-btn{
  flex-shrink:0;background:none;border:none;cursor:pointer;
  color:var(--muted);padding:6px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  transition:color .15s, background .15s;
}
.wr-audio-vol-btn:hover{color:var(--heading);background:var(--surface)}
.wr-audio-vol-btn svg{width:16px;height:16px}

/* ============================================================
   MODAL RESPONSIVE
   ============================================================ */
@media (max-width:768px){
  .media-modal{padding:12px}
  .media-modal-body{max-height:calc(100vh - 24px);border-radius:12px}
  .media-modal-header{padding:12px 14px;gap:10px;flex-wrap:wrap}
  .media-modal-name{font-size:13px}
  .media-modal-content{padding:14px;min-height:160px}
  .media-modal-content img,
  .media-modal-content video{max-height:calc(100vh - 200px)}
  .media-modal-actions .btn-primary{padding:5px 10px;font-size:12px;height:28px}
  .media-modal-close{width:28px;height:28px}
  .wr-audio-player{padding:20px;gap:18px}
  .wr-audio-disc{width:80px;height:80px}
}
@media (max-width:480px){
  .media-modal-actions .btn-primary span,
  .media-modal-actions .btn-primary{font-size:0;padding:5px 8px;min-width:32px}
  .media-modal-actions .btn-primary::before{
    content:"⬇";font-size:14px;
  }
  .meta-pill{font-size:10px;padding:2px 7px}
}

/* ============================================================
   MEDIA TOOLBAR (title + view density toggle)
   ============================================================ */
.media-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:16px;
}
.media-toolbar h3{margin:0}
.view-toggle{
  display:inline-flex;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:3px;
  gap:2px;
}
.view-btn{
  width:32px;height:30px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-radius:7px;
  color:var(--muted);cursor:pointer;
  transition:background .15s,color .15s;
}
.view-btn:hover{color:var(--heading);background:var(--card)}
.view-btn.active{
  background:var(--card);
  color:var(--primary);
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
html.dark .view-btn.active{box-shadow:0 1px 2px rgba(0,0,0,.25)}
.view-btn svg{width:16px;height:16px;stroke-width:1.7}

/* ============================================================
   MEDIA GRID DENSITY VARIANTS
   ============================================================ */
.files-grid{display:grid;gap:var(--space-grid)}
.files-grid.cols-2{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.files-grid.cols-4{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.files-grid.cols-6{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
@media (max-width:640px){
  .files-grid.cols-2,.files-grid.cols-4,.files-grid.cols-6{
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  }
}

/* ============================================================
   MODAL META PILLS
   ============================================================ */
#mp-meta{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;
}
.meta-pill{
  display:inline-flex;align-items:center;
  padding:3px 9px;
  font-size:11px;font-weight:500;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--muted);
  border-radius:999px;
  letter-spacing:.2px;
}
.meta-pill.meta-type{color:var(--primary);border-color:color-mix(in srgb, var(--primary) 30%, transparent)}
.meta-pill.meta-expiry{color:var(--warning);border-color:color-mix(in srgb, var(--warning) 30%, transparent)}
.meta-pill.meta-saved{color:var(--success);border-color:color-mix(in srgb, var(--success) 30%, transparent)}

/* ============================================================
   MEDIA MODAL — compact download button
   ============================================================ */
.media-modal-actions .btn-primary{
  padding:7px 14px;font-size:13px;height:32px;display:inline-flex;align-items:center;
}

/* ============================================================
   WR SPINNER — animated brand mark for loading states
   ============================================================ */
.wr-spinner{display:inline-flex;align-items:center;justify-content:center}
.wr-loading-overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;background:var(--card);
  z-index:5;
  border-radius:inherit;
}
.wr-loading-overlay-text{
  font-size:12px;color:var(--muted);letter-spacing:.4px;
}

/* Favorite button active state */
.file-btn.file-favorite.active{color:var(--warning);border-color:var(--warning)}
.file-btn.file-favorite:hover{color:var(--warning);border-color:var(--warning)}
.meta-pill.meta-duration{color:var(--primary)}
.meta-pill.meta-dims{color:var(--muted)}

/* Video play badge overlay */
.file-thumb{position:relative}
.file-play-badge{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.35) 100%);
  color:#fff;
  pointer-events:none;
  opacity:.85;
  transition:opacity .2s;
}
.file-card:hover .file-play-badge{opacity:1}
.file-play-badge svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}

/* Thumbnail skeleton — show shimmer until image loads */
.file-thumb img{opacity:0;transition:opacity .25s ease-out}
.file-thumb img.loaded{opacity:1}
.file-thumb.thumb-loading{
  background:linear-gradient(90deg,var(--surface) 0%,var(--card) 50%,var(--surface) 100%);
  background-size:200% 100%;
  animation:thumb-shimmer 1.4s ease-in-out infinite;
}
@keyframes thumb-shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* ============================================================
   WR AUDIO PLAYER — branded HTML5 audio replacement
   ============================================================ */
.wr-audio-player{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:32px 28px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  width:min(560px, 100%);
}
.wr-audio-disc{
  width:120px;height:120px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--primary) 0%, var(--primary-2) 60%, #002a5e 100%);
  display:flex;align-items:center;justify-content:center;
  position:relative;
  box-shadow:0 10px 24px rgba(0,128,255,.25);
}
.wr-audio-disc::after{
  content:"";
  width:24px;height:24px;border-radius:50%;
  background:var(--card);
  border:2px solid var(--border);
}
.wr-audio-disc.playing{animation:wr-disc-spin 6s linear infinite}
@keyframes wr-disc-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.wr-audio-controls{display:flex;align-items:center;gap:14px;width:100%}
.wr-audio-play{
  flex-shrink:0;
  width:44px;height:44px;border-radius:50%;
  background:var(--primary);color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s, background .15s;
}
.wr-audio-play:hover{background:var(--primary-2);transform:scale(1.05)}
.wr-audio-play svg{width:18px;height:18px}
.wr-audio-time{
  font-variant-numeric:tabular-nums;
  font-size:12px;color:var(--muted);
  min-width:42px;text-align:center;
}
.wr-audio-bar{
  flex:1;height:6px;background:var(--surface);
  border-radius:3px;cursor:pointer;position:relative;
  border:1px solid var(--border);
}
.wr-audio-bar-fill{
  height:100%;background:var(--primary);
  border-radius:3px;width:0;
  transition:width .1s linear;
}
.wr-audio-bar-handle{
  position:absolute;top:50%;left:0;
  width:12px;height:12px;border-radius:50%;
  background:var(--primary);
  transform:translate(-50%,-50%);
  box-shadow:0 1px 4px rgba(0,128,255,.4);
  transition:transform .15s;
  pointer-events:none;
}
.wr-audio-bar:hover .wr-audio-bar-handle{transform:translate(-50%,-50%) scale(1.2)}
.wr-audio-vol-btn{
  flex-shrink:0;background:none;border:none;cursor:pointer;
  color:var(--muted);padding:6px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  transition:color .15s, background .15s;
}
.wr-audio-vol-btn:hover{color:var(--heading);background:var(--surface)}
.wr-audio-vol-btn svg{width:18px;height:18px}

/* ============================================================
   BRAND KIT — tabs, panels, identity cards
   ============================================================ */
.bk-role-banner{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;
  background:color-mix(in srgb, var(--warning) 8%, var(--card));
  border:1px solid color-mix(in srgb, var(--warning) 30%, var(--border));
  color:var(--heading);
  border-radius:10px;
  margin-bottom:var(--space-section);
  font-size:13px;
}
.bk-role-banner svg{color:var(--warning);flex-shrink:0}

/* Brand Kit tabs inherit .admin-tabs / .admin-tab from admin styling.
   Just add icon support + ensure button (not <a>) works the same. */
.bk-tabs-nav.admin-tabs{margin-bottom:var(--space-section)}
.admin-tab.bk-tab{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;border:none;cursor:pointer;
  font-family:inherit;
}
.admin-tab.bk-tab svg{stroke-width:1.7;flex-shrink:0}
.admin-tab.bk-tab.active{
  color:var(--primary);background:var(--card);
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
html.dark .admin-tab.bk-tab.active{box-shadow:0 1px 2px rgba(0,0,0,.3)}

.bk-panel{display:flex;flex-direction:column;gap:var(--space-section);width:100%;align-items:stretch}
.bk-panel[hidden]{display:none !important}
.bk-panel-header{margin-bottom:16px}
.bk-panel-sub{font-size:13px;color:var(--muted);margin:4px 0 0}

/* Identity — colors grid */
.bk-colors-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;
  margin-bottom:16px;
}
.bk-color-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:10px;
  transition:border-color .15s;
}
.bk-color-item:hover{border-color:var(--primary)}
.bk-color-swatch{
  width:34px;height:34px;border-radius:8px;flex-shrink:0;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
}
.bk-color-info{flex:1;min-width:0}
.bk-color-name{font-size:13px;font-weight:500;color:var(--heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-color-hex{font-size:11px;color:var(--muted);font-family:ui-monospace,monospace}
.bk-color-remove{
  background:none;border:none;cursor:pointer;color:var(--muted);
  padding:4px;border-radius:4px;display:flex;
  opacity:.5;transition:opacity .15s, color .15s;
}
.bk-color-remove:hover{opacity:1;color:var(--danger)}
.bk-color-remove svg{width:14px;height:14px;stroke-width:2}

/* Identity — fonts */
/* ============================================================
   RTL SUPPORT
   ============================================================ */
html[dir="rtl"] .bk-tab svg,
html[dir="rtl"] .bk-role-banner svg{transform:scaleX(-1)}
html[dir="rtl"] .bk-tabs-nav{direction:rtl}
html[dir="rtl"] .bk-color-remove{margin-left:0;margin-right:auto}
html[dir="rtl"] /* Brand Kit color picker */
.bk-picker-row{display:flex;gap:16px;align-items:flex-start;margin:14px 0}
.bk-picker-swatch{
  width:120px;height:120px;flex-shrink:0;
  border-radius:12px;overflow:hidden;
  border:1px solid var(--border);
  position:relative;
}
.bk-picker-swatch input[type="color"]{
  position:absolute;inset:-4px;
  width:calc(100% + 8px);height:calc(100% + 8px);
  border:none;padding:0;background:none;cursor:pointer;
}
.bk-picker-fields{flex:1;min-width:0;text-align:left}
html[dir="rtl"] .bk-picker-fields{text-align:right}
.bk-picker-fields .label{display:block;margin-bottom:6px;font-size:12px;color:var(--muted)}
.bk-picker-fields .input{width:100%}

/* Brand Kit — Identity full-width stacked */
.bk-identity-grid{
  display:flex;flex-direction:column;
  gap:var(--space-section);
}
/* .bk-section inherits .card spacing — no extra gap overrides */
.bk-section-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:4px;
}
.bk-section-head .btn-sm{
  padding:6px 12px;font-size:12.5px;height:30px;flex-shrink:0;
}

/* Colors — compact 2-col grid within the card */
.bk-colors-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:12px;margin:0;
}

/* Fonts — stacked preview rows */
/* Brand Kit — Font dialog layout */
.bk-font-dialog{display:flex;flex-direction:column;gap:16px;margin:14px 0;text-align:left}
html[dir="rtl"] .bk-font-dialog{text-align:right}

.bk-font-drop{
  border:2px dashed var(--border);border-radius:12px;
  padding:24px 20px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  cursor:pointer;
  color:var(--muted);
  transition:border-color .15s, background .15s, color .15s;
  min-height:120px;justify-content:center;
}
.bk-font-drop:hover,
.bk-font-drop.drag{
  border-color:var(--primary);
  background:color-mix(in srgb, var(--primary) 4%, transparent);
  color:var(--heading);
}
.bk-font-drop.done{
  border-style:solid;
  border-color:color-mix(in srgb, var(--success) 40%, var(--border));
  background:color-mix(in srgb, var(--success) 4%, transparent);
}
.bk-font-drop.uploading{border-color:var(--primary);cursor:wait}
.bk-font-drop-title{font-size:14px;font-weight:500;color:var(--heading)}
.bk-font-drop-sub{font-size:12px;color:var(--muted)}

.bk-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:540px){.bk-field-row{grid-template-columns:1fr}}
.bk-field .label{display:block;margin-bottom:6px;font-size:12px;color:var(--muted)}
.bk-field .input{width:100%}

.bk-font-preview-area{
  border-top:1px solid var(--border);
  padding-top:14px;
}
.bk-font-preview-area .label{display:block;margin-bottom:6px;font-size:12px;color:var(--muted)}
.bk-font-preview-area .input{width:100%;margin-bottom:10px;font-size:13px}
.bk-font-preview-box{
  padding:20px 18px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  font-size:26px;line-height:1.3;color:var(--heading);
  min-height:72px;
  word-break:break-word;
}

/* ============================================================
   BRAND KIT — Brand basics / Preferences / Formats
   ============================================================ */

/* Brand basics — 2-column form */
.bk-brand-row{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
@media (max-width:640px){.bk-brand-row{grid-template-columns:1fr}}

/* Preferences rows */
.bk-pref-row{
  display:flex;align-items:center;gap:16px;
  padding:14px 0;
  border-top:1px solid var(--border);
}
.bk-pref-row:first-of-type{border-top:none;padding-top:4px}
.bk-pref-label{flex:1;min-width:0}
.bk-pref-title{font-size:13.5px;font-weight:500;color:var(--heading)}
.bk-pref-desc{font-size:12.5px;color:var(--muted);margin-top:2px}

/* Segmented control (LTR / RTL / Auto) */
.bk-segmented{
  display:inline-flex;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:9px;
  padding:3px;
  gap:2px;
}
.bk-seg{
  padding:6px 14px;
  background:transparent;border:none;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:500;
  color:var(--muted);border-radius:6px;
  transition:background .15s,color .15s;
}
.bk-seg:hover:not(:disabled){color:var(--heading)}
.bk-seg.active{
  background:var(--card);color:var(--primary);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.bk-seg:disabled{opacity:.5;cursor:not-allowed}

/* Toggle switch */
.bk-switch{position:relative;display:inline-block;cursor:pointer}
.bk-switch input{position:absolute;opacity:0;pointer-events:none}
.bk-switch-track{
  display:inline-block;width:40px;height:22px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:999px;position:relative;transition:background .2s;
}
.bk-switch-thumb{
  position:absolute;top:2px;left:2px;
  width:16px;height:16px;border-radius:50%;
  background:var(--muted);transition:transform .2s, background .2s;
}
.bk-switch input:checked ~ .bk-switch-track{
  background:var(--primary);border-color:var(--primary);
}
.bk-switch input:checked ~ .bk-switch-track .bk-switch-thumb{
  transform:translateX(18px);background:#fff;
}
.bk-switch input:disabled ~ .bk-switch-track{opacity:.5;cursor:not-allowed}

/* ============================================================
   BRAND KIT — Format cards (pro redesign)
   ============================================================ */
.bk-formats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:14px;
}
@media (max-width:640px){
  .bk-formats-grid{grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));gap:10px}
}
.bk-format-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px 14px 14px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  transition:border-color .15s, background .15s;
}
.bk-format-card:hover{border-color:color-mix(in srgb, var(--primary) 50%, var(--border))}
.bk-format-card.disabled{opacity:.5}
.bk-format-card.is-default{
  border-color:var(--primary);
  background:color-mix(in srgb, var(--primary) 5%, var(--surface));
}
.bk-fmt-badge-default{
  position:absolute;top:8px;right:8px;
  width:20px;height:20px;border-radius:50%;
  background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,128,255,.35);
  z-index:2;
}
html[dir="rtl"] .bk-fmt-badge-default{right:auto;left:8px}
.bk-fmt-frame{
  width:96px;height:96px;
  display:flex;align-items:center;justify-content:center;
}
.bk-fmt-visual{
  background:linear-gradient(135deg, var(--card) 0%, color-mix(in srgb, var(--primary) 8%, var(--card)) 100%);
  border:1.5px solid var(--border);
  border-radius:5px;
  position:relative;
  overflow:hidden;
}
.bk-format-card.is-default .bk-fmt-visual{
  border-color:color-mix(in srgb, var(--primary) 60%, var(--border));
}
.bk-fmt-logomark{
  position:absolute;bottom:6px;left:50%;
  transform:translateX(-50%);
  width:22px;height:5px;border-radius:2px;
  background:var(--primary);opacity:.85;
}
.bk-fmt-clean{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-size:9px;font-weight:600;letter-spacing:.6px;
  color:var(--muted);
  padding:3px 7px;
  border:1px solid var(--border);
  border-radius:4px;
  background:color-mix(in srgb, var(--card) 60%, transparent);
  white-space:nowrap;
}
.bk-fmt-meta{
  text-align:center;width:100%;
  display:flex;flex-direction:column;gap:1px;
}
.bk-fmt-title{
  font-size:12.5px;font-weight:600;color:var(--heading);
  font-variant-numeric:tabular-nums;
}
.bk-fmt-sub{
  font-size:11px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bk-fmt-dims{
  font-size:10.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.bk-fmt-actions{
  display:flex;gap:4px;justify-content:center;
  margin-top:4px;padding-top:8px;
  border-top:1px solid var(--border);
  width:100%;
}
.bk-fmt-icon{
  width:26px;height:26px;
  background:transparent;border:1px solid transparent;
  border-radius:6px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
  transition:color .15s, background .15s, border-color .15s;
}
.bk-fmt-icon svg{width:13px;height:13px}
.bk-fmt-icon:hover{color:var(--primary);background:var(--card);border-color:var(--border)}
.bk-fmt-icon *{pointer-events:none}
.bk-fmt-icon.danger:hover{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 40%, var(--border))}

.bk-fmt-icon *{pointer-events:none}

/* ============================================================
   BRAND KIT — Full responsive polish (mobile / tablet / desktop)
   ============================================================ */
/* Tablet — 1024px and below */
@media (max-width:1024px){
  .bk-formats-grid{grid-template-columns:repeat(auto-fit, minmax(155px, 1fr))}
}

/* Mobile — 768px and below: preference rows stack vertically */
@media (max-width:768px){
  .bk-pref-row{
    flex-direction:column;align-items:flex-start;gap:10px;
  }
  .bk-pref-label{width:100%}
  .bk-segmented{width:100%}
  .bk-seg{flex:1}
  .bk-section-head{flex-wrap:wrap}
  .bk-tabs-nav.admin-tabs{overflow-x:auto;flex-wrap:nowrap}
  .admin-tab.bk-tab{flex-shrink:0}
  .bk-formats-grid{grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));gap:10px}
}

/* Small phone — 480px */
@media (max-width:480px){
  .admin-tab.bk-tab span{display:none}  /* icon-only tabs on tiny screens */
  .admin-tab.bk-tab{padding:8px 10px}
  .bk-formats-grid{grid-template-columns:repeat(auto-fit, minmax(130px, 1fr))}
  .bk-fmt-frame{width:84px;height:84px}
}

/* ============================================================
   BRAND KIT — Overlay control (pro, responsive)
   ============================================================ */

/* Some pref rows are full width (need more room) */
.bk-pref-row.bk-pref-row-stacked{
  flex-direction:column;
  align-items:stretch;
  gap:14px;
}
.bk-pref-row.bk-pref-row-stacked .bk-pref-label{width:100%}

.bk-overlay{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:center;
}
.bk-overlay-preview{
  width:120px;height:72px;
  border-radius:10px;border:1px solid var(--border);
  overflow:hidden;position:relative;
  background:linear-gradient(135deg, #4a6489 0%, #2a3f5f 60%, #18263e 100%);
  flex-shrink:0;
}
.bk-overlay-fill{
  position:absolute;inset:0;
  background:#000;opacity:.9;
  transition:background .12s ease, opacity .12s ease;
}
.bk-overlay-controls{
  display:flex;flex-direction:column;gap:10px;
  min-width:0;
}
.bk-overlay-color-row{
  display:flex;align-items:center;gap:10px;min-width:0;
}
.bk-overlay-swatch{
  width:34px;height:34px;flex-shrink:0;
  border-radius:8px;overflow:hidden;
  border:1px solid var(--border);position:relative;
}
.bk-overlay-swatch input[type="color"]{
  position:absolute;inset:-4px;
  width:calc(100% + 8px);height:calc(100% + 8px);
  border:none;padding:0;background:none;cursor:pointer;
}
#bk-overlay-hex{
  flex:1;min-width:0;height:34px;
  font-family:ui-monospace,monospace;font-size:12px;
}
.bk-overlay-slider-row{
  display:flex;align-items:center;gap:10px;min-width:0;
}
.bk-overlay-slider-row .bk-range{flex:1;min-width:0}
.bk-overlay-pct{
  font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums;
  min-width:40px;text-align:right;flex-shrink:0;
}
html[dir="rtl"] .bk-overlay-pct{text-align:left}

/* Mobile — preview goes on top, controls below */
@media (max-width:640px){
  .bk-overlay{
    grid-template-columns:1fr;
    gap:12px;
  }
  .bk-overlay-preview{
    width:100%;height:64px;
  }
}

/* ============================================================
   BRAND KIT — Font cards (pro design + live preview)
   ============================================================ */
.bk-fonts-list{
  display:flex;flex-direction:column;gap:14px;
}
.bk-font-item{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px 20px;
  display:flex;flex-direction:column;gap:14px;
  transition:border-color .15s, background .15s;
}
.bk-font-item:hover{border-color:color-mix(in srgb, var(--primary) 35%, var(--border))}

/* Header row */
.bk-font-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
}
.bk-font-meta{flex:1;min-width:0}
.bk-font-role{
  font-size:11px;font-weight:700;letter-spacing:.8px;
  color:var(--primary);text-transform:uppercase;
}
.bk-font-family{
  font-size:13.5px;color:var(--heading);font-weight:500;margin-top:3px;
  font-variant-numeric:tabular-nums;
}

/* Action icons */
.bk-font-actions{display:flex;gap:4px;flex-shrink:0}
.bk-font-action{
  width:28px;height:28px;
  background:transparent;border:1px solid transparent;
  border-radius:7px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
  transition:color .15s, background .15s, border-color .15s;
}
.bk-font-action *{pointer-events:none}
.bk-font-action:hover{color:var(--primary);background:var(--card);border-color:var(--border)}
.bk-font-remove:hover{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 40%, var(--border))}

/* Preview area */
.bk-font-preview-wrap{
  display:flex;flex-direction:column;gap:10px;
}
.bk-font-sample-input{
  width:100%;
  padding:8px 12px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--heading);
  font-size:12.5px;
  font-family:inherit;
  outline:none;
  transition:border-color .15s, background .15s;
}
.bk-font-sample-input:focus{
  border-color:var(--primary);
  background:color-mix(in srgb, var(--primary) 4%, var(--card));
}
.bk-font-sample-input::placeholder{color:var(--muted)}
.bk-font-sample{
  font-size:24px;line-height:1.4;color:var(--heading);
  padding:14px 16px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  word-break:break-word;
  min-height:54px;
  transition:font-family .15s;
}
.bk-font-glyphs{
  font-size:18px;color:var(--muted);
  padding:10px 16px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  letter-spacing:.5px;
  font-variant-numeric:tabular-nums;
}

/* Footer with badge */
.bk-font-footer{
  display:flex;align-items:center;gap:8px;
}
.bk-font-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;
  font-size:11px;font-weight:500;letter-spacing:.2px;
  border-radius:999px;border:1px solid var(--border);
  color:var(--muted);background:var(--card);
}
.bk-font-badge-custom{
  color:var(--success);
  border-color:color-mix(in srgb, var(--success) 35%, var(--border));
  background:color-mix(in srgb, var(--success) 5%, var(--card));
}
.bk-font-badge svg{flex-shrink:0}

/* Mobile */
@media (max-width:640px){
  .bk-font-item{padding:14px 16px;gap:12px}
  .bk-font-sample{font-size:20px;padding:12px}
  .bk-font-glyphs{font-size:16px;padding:10px 12px}
}

/* ============================================================
   BRAND KIT — Font dialog: source tabs + library picker
   ============================================================ */
.bk-font-source-tabs{
  display:flex;gap:6px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:4px;
  margin-bottom:14px;
}
.bk-font-tab{
  flex:1;
  background:transparent;
  border:none;
  padding:8px 14px;
  border-radius:7px;
  font-size:12.5px;font-weight:500;
  color:var(--muted);
  cursor:pointer;
  transition:background .15s, color .15s;
  font-family:inherit;
}
.bk-font-tab:hover{color:var(--heading)}
.bk-font-tab.active{
  background:var(--card);
  color:var(--heading);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}

.bk-font-library{
  min-height:140px;
  max-height:280px;
  overflow-y:auto;
  display:flex;flex-direction:column;gap:6px;
  padding:4px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
}
.bk-font-library-loading{
  padding:30px;text-align:center;
  color:var(--muted);font-size:13px;
}
.bk-font-library-empty{
  padding:30px 20px;text-align:center;
  color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.bk-font-library-empty-title{
  font-size:13.5px;color:var(--heading);font-weight:600;margin-top:6px;
}
.bk-font-library-empty-desc{
  font-size:12px;color:var(--muted);
}
.bk-font-lib-item{
  text-align:left;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 14px;
  cursor:pointer;
  transition:border-color .15s, background .15s, transform .1s;
  font-family:inherit;
  display:flex;flex-direction:column;gap:3px;
}
.bk-font-lib-item:hover{
  border-color:color-mix(in srgb, var(--primary) 50%, var(--border));
  background:color-mix(in srgb, var(--primary) 4%, var(--card));
}
.bk-font-lib-item.selected{
  border-color:var(--primary);
  background:color-mix(in srgb, var(--primary) 8%, var(--card));
}
.bk-font-lib-name{
  font-size:13px;font-weight:600;color:var(--heading);
}
.bk-font-lib-meta{
  font-size:11.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.bk-font-source[hidden]{display:none !important}

/* Font dialog — pane visibility + system info card */
.bk-font-pane{margin-top:10px}
.bk-font-pane[hidden]{display:none !important}
.bk-font-system-info{
  display:flex;align-items:flex-start;gap:10px;
  padding:14px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  font-size:12.5px;color:var(--muted);
  line-height:1.5;
}
.bk-font-system-info svg{flex-shrink:0;color:var(--primary);margin-top:1px}
.bk-font-system-info b{color:var(--heading);font-weight:600}

/* ============================================================
   BRAND KIT — Media Library polish (header / filters / density)
   ============================================================ */
.bk-media-stats{
  /* gap is handled by .bk-panel flex-column; no margin-bottom needed */
  margin-bottom:0;
  /* Always 5 columns on desktop, then collapse responsively */
  grid-template-columns:repeat(5, 1fr) !important;
}
@media (max-width:1280px){
  .bk-media-stats{
    grid-template-columns:repeat(5, 1fr) !important;
  }
  .bk-media-stats .stat-card{padding:16px 14px;min-width:0}
  .bk-media-stats .stat-value{font-size:24px;line-height:1.1}
  .bk-media-stats .stat-label{font-size:10px;letter-spacing:.4px;white-space:nowrap}
  .bk-media-stats .stat-sub{font-size:10.5px;white-space:nowrap}
}
@media (max-width:768px){
  .bk-media-stats{
    grid-template-columns:repeat(3, 1fr) !important;
  }
}
@media (max-width:480px){
  .bk-media-stats{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:10px;
  }
  .bk-media-stats .stat-card{padding:14px 12px}
  .bk-media-stats .stat-value{font-size:22px}
  /* If 5 items in 2 cols → last spans full width for balance */
  .bk-media-stats .stat-card:nth-child(5):last-child{
    grid-column:1 / -1;
  }
}

.bk-media-header{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:16px;flex-wrap:wrap;
  margin-bottom:18px;
  min-width:0;max-width:100%;
}
.bk-media-controls{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  min-width:0;max-width:100%;
}

/* Filter chips */
.bk-filter-chips{
  display:flex;gap:6px;flex-wrap:wrap;
}
.bk-filter-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--muted);font-size:12.5px;font-weight:500;
  cursor:pointer;
  font-family:inherit;
  transition:background .15s, color .15s, border-color .15s;
}
.bk-filter-chip:hover{
  color:var(--heading);
  border-color:color-mix(in srgb, var(--primary) 30%, var(--border));
}
.bk-filter-chip.active{
  background:color-mix(in srgb, var(--primary) 12%, var(--card));
  border-color:var(--primary);
  color:var(--primary);
}
.bk-filter-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:18px;padding:0 5px;
  background:var(--card);
  border-radius:999px;
  font-size:10.5px;font-weight:600;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.bk-filter-chip.active .bk-filter-count{
  background:var(--primary);color:#fff;
}

/* Density toggle (reuse style if exists) */
.density-toggle{
  display:inline-flex;background:var(--surface);
  border:1px solid var(--border);border-radius:8px;padding:3px;gap:2px;
}
.density-toggle button{
  background:transparent;border:none;color:var(--muted);
  width:32px;height:28px;border-radius:6px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s, color .15s;
}
.density-toggle button:hover{color:var(--heading)}
.density-toggle button.active{
  background:var(--card);color:var(--primary);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}

/* stat-sub line below stat-value */
.bk-media-stats .stat-sub{
  font-size:11px;color:var(--muted);margin-top:4px;
  font-variant-numeric:tabular-nums;
}

/* Mobile */
@media (max-width:640px){
  .bk-media-header{flex-direction:column;align-items:stretch}
  .bk-media-controls{justify-content:space-between}
  .bk-filter-chips{flex:1}
  .bk-media-stats{
    grid-template-columns:repeat(2, 1fr) !important;
  }
}

/* ============================================================
   BRAND KIT — Card thumbnail variants (font/audio/SVG/image)
   ============================================================ */

/* Image inside thumb: contain (no crop) instead of cover */
.bk-thumb-img,
.bk-thumb-svg{
  width:100%;height:100%;
  object-fit:contain !important;
  padding:8px;
  box-sizing:border-box;
}

/* Transparent-bg thumb (SVG, transparent PNG) — checkered pattern */
.file-thumb.transparent-bg{
  background-image:
    linear-gradient(45deg, var(--surface) 25%, transparent 25%),
    linear-gradient(-45deg, var(--surface) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--surface) 75%),
    linear-gradient(-45deg, transparent 75%, var(--surface) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-color: var(--card);
}
html.dark .file-thumb.transparent-bg{
  background-color: #0a1322;
}

/* Font Aa thumbnail — show big "Aa" using the actual font */
.bk-font-thumb{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:64px;font-weight:600;line-height:1;
  color:var(--heading);
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 8%, var(--surface)),
    var(--surface));
  letter-spacing:-.02em;
  user-select:none;
  opacity:.4;
  transition:opacity .25s, font-family .15s;
}
.bk-font-thumb.loaded{opacity:1}

/* Audio thumbnail — disc with animated bars */
.bk-audio-thumb{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 12%, var(--surface)),
    var(--surface));
  color:var(--primary);
}
.bk-audio-thumb svg{width:32px;height:32px}
.bk-audio-bars{
  display:flex;align-items:flex-end;gap:3px;height:18px;
}
.bk-audio-bars span{
  display:block;width:3px;background:var(--primary);
  border-radius:2px;opacity:.7;
  animation:bk-audio-pulse 1.4s ease-in-out infinite;
}
.bk-audio-bars span:nth-child(1){height:60%;animation-delay:0s}
.bk-audio-bars span:nth-child(2){height:100%;animation-delay:.15s}
.bk-audio-bars span:nth-child(3){height:50%;animation-delay:.3s}
.bk-audio-bars span:nth-child(4){height:80%;animation-delay:.45s}
@keyframes bk-audio-pulse{
  0%,100%{transform:scaleY(1)}
  50%{transform:scaleY(.4)}
}

/* Mobile */
@media (max-width:640px){
  .bk-font-thumb{font-size:48px}
}

/* ============================================================
   BRAND KIT — Media Library: RTL + extended responsive
   ============================================================ */

/* RTL: filter chips reverse, density toggle reverse */
html[dir="rtl"] .bk-media-header{
  text-align:right;
}
html[dir="rtl"] .bk-media-controls{
  flex-direction:row-reverse;
}
html[dir="rtl"] .bk-filter-chips{
  flex-direction:row-reverse;
}
html[dir="rtl"] .bk-filter-chip{
  flex-direction:row-reverse;
}
html[dir="rtl"] .density-toggle{
  flex-direction:row-reverse;
}

/* RTL for thumbnails — keep visual order natural */
html[dir="rtl"] .bk-font-thumb,
html[dir="rtl"] .bk-audio-thumb{
  /* No mirror needed for content, just ensure direction */
  direction:ltr;  /* "Aa" stays left-to-right even in RTL UI */
}

/* Tablet (1024px) */
@media (max-width:1024px){
  .bk-media-header{gap:12px}
  .bk-media-controls{gap:10px}
  .bk-filter-chip{font-size:12px;padding:5px 10px}
  .bk-font-thumb{font-size:56px}
}

/* Tablet small (768px) */
@media (max-width:768px){
  .bk-media-stats{
    grid-template-columns:repeat(3, 1fr) !important;
  }
  .bk-media-header{flex-direction:column;align-items:stretch;gap:14px}
  .bk-media-controls{
    justify-content:space-between;
    flex-wrap:nowrap;
  }
  .bk-filter-chips{flex:1;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0}
  .bk-filter-chips::-webkit-scrollbar{display:none}
  .bk-filter-chip{flex-shrink:0}
  .density-toggle{flex-shrink:0}
}

/* Phone (480px) */
@media (max-width:480px){
  .bk-media-stats{
    grid-template-columns:repeat(2, 1fr) !important;
  }
  .bk-media-stats .stat-card{padding:14px}
  .bk-media-stats .stat-value{font-size:20px}
  .bk-font-thumb{font-size:42px}
  .density-toggle button{width:28px;height:24px}
  .bk-filter-chip{font-size:11.5px;padding:5px 9px}
  .bk-filter-count{min-width:18px;height:16px;font-size:10px}
}

/* === BRAND KIT — final mobile polish === */

/* Tabs nav: horizontal scroll on mobile (5 tabs don't fit) */
.bk-tabs-nav{
  display:flex;flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  width:100%;
}
.bk-tabs-nav::-webkit-scrollbar{display:none}
.bk-tabs-nav .bk-tab{
  flex:1 1 0;          /* distribute equally on desktop */
  white-space:nowrap;
  justify-content:center;
}
@media (max-width:768px){
  /* Keep tabs distributing equally — fill the whole container width */
  .bk-tabs-nav .bk-tab{flex:1 1 0;min-width:0}
  .bk-tabs-nav .bk-tab span{font-size:11.5px}
}
@media (max-width:480px){
  /* Hide tab text labels — show icons only on phones */
  .bk-tabs-nav .bk-tab{padding:10px 8px}
  .bk-tabs-nav .bk-tab span{display:none}
}

/* Mobile (768px) */
@media (max-width:768px){
  .bk-tabs-nav{
    /* No breakout — keep tabs inside content padding */
  }
  .bk-tab{padding:8px 12px;font-size:12px}
  .bk-tabs-nav{padding:4px}
  .bk-section{padding:18px}
  .bk-identity-grid{gap:14px}
  .bk-formats-grid{gap:10px}
  .bk-colors-list{grid-template-columns:repeat(auto-fit, minmax(160px, 1fr))}
  .bk-overlay{flex-direction:column;align-items:stretch;gap:10px}
  .bk-overlay-preview{width:100%;height:64px}
  /* Compact font cards */
  .bk-font-sample{font-size:18px;padding:10px 12px}
  .bk-font-glyphs{font-size:14px;padding:8px 12px}
  /* Library card on mobile */
  .bk-media-grid.cols-6{grid-template-columns:repeat(2, 1fr) !important}
  .bk-media-grid.cols-4{grid-template-columns:repeat(2, 1fr) !important}
  .bk-media-grid.cols-2{grid-template-columns:1fr !important}
}

/* Phone (480px) — ultra compact */
@media (max-width:480px){
  .bk-section{padding:14px}
  .bk-tab svg{width:14px;height:14px}
  .bk-formats-grid{grid-template-columns:repeat(2, 1fr)}
  .bk-colors-list{grid-template-columns:1fr}
  .bk-format-card{padding:12px 10px;gap:8px}
  .bk-fmt-frame{width:72px;height:72px}
  .bk-font-thumb{font-size:38px}
  .bk-media-header h3{font-size:18px}
  .bk-filter-chip{font-size:11px;padding:4px 9px}
  .bk-filter-count{font-size:9.5px}
}

/* Tiny (380px) */
@media (max-width:380px){
  .bk-section{padding:12px}
  .bk-format-card{padding:10px 8px}
  .bk-fmt-frame{width:64px;height:64px}
}
.bk-tabs-nav{width:100%} /* === bk-tabs-nav full width === */

/* Brand Kit panel children — prevent overflow */
.bk-panel > *{min-width:0;max-width:100%;box-sizing:border-box}

/* === BRAND KIT — Sections === */

.bk-sections-card{
  display:flex;flex-direction:column;gap:18px;
}

.bk-sections-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;
}
.bk-sections-head > div{flex:1;min-width:0}
.bk-sections-head h3{margin:0 0 4px}

/* Sections list */
.bk-sections-list{
  display:flex;flex-direction:column;gap:14px;
}

.bk-sec-loading{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:32px;color:var(--muted);font-size:13px;
}
.wr-spinner-sm{
  width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--primary);
  border-radius:50%;animation:wr-spin .8s linear infinite;
}
@keyframes wr-spin{to{transform:rotate(360deg)}}

.bk-sec-error{
  padding:16px;background:color-mix(in srgb, var(--danger) 8%, var(--card));
  border:1px solid color-mix(in srgb, var(--danger) 30%, var(--border));
  border-radius:8px;color:var(--danger);font-size:13px;
}

/* Section card */
.bk-section-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  transition:border-color .15s, background .15s;
}
.bk-section-card:hover{
  border-color:color-mix(in srgb, var(--primary) 25%, var(--border));
}
.bk-section-card.is-expanded{
  background:var(--card);
  border-color:color-mix(in srgb, var(--primary) 35%, var(--border));
}

/* Section header */
.bk-sec-header{
  display:flex;align-items:center;gap:8px;
  padding:6px 16px 6px 6px;
  min-height:60px;
}
.bk-sec-toggle{
  flex:1;display:flex;align-items:center;gap:14px;
  background:transparent;border:none;cursor:pointer;
  padding:18px 12px;text-align:left;color:var(--heading);
  font-family:inherit;font-size:16px;font-weight:600;
  border-radius:6px;
  min-width:0;
}
.bk-sec-toggle:hover{
  background:color-mix(in srgb, var(--primary) 6%, transparent);
}
.bk-sec-chev{
  display:flex;color:var(--muted);
  flex-shrink:0;
  transition:transform .2s;
}
.bk-section-card.is-expanded .bk-sec-chev{
  color:var(--primary);
}
.bk-sec-name{
  flex-shrink:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bk-sec-badge{
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb, var(--primary) 15%, var(--card));
  color:var(--primary);
  font-size:10.5px;font-weight:600;
  letter-spacing:.4px;text-transform:uppercase;
  flex-shrink:0;
}
.bk-sec-summary{
  margin-left:auto;
  font-size:12px;color:var(--muted);font-weight:400;
  flex-shrink:0;
}

/* Section actions */
.bk-sec-actions{
  display:flex;gap:4px;flex-shrink:0;
}
.bk-sec-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;
  background:transparent;border:1px solid transparent;
  border-radius:6px;color:var(--muted);cursor:pointer;
  transition:all .15s;
}
.bk-sec-btn:hover{
  background:var(--card);color:var(--heading);
  border-color:var(--border);
}
.bk-sec-delete:hover{
  color:var(--danger);
  border-color:color-mix(in srgb, var(--danger) 30%, var(--border));
}

/* Section body */
.bk-sec-body{
  padding:18px;
  border-top:1px solid var(--border);
  background:var(--bg);
}
.bk-sec-empty-body{
  padding:24px;text-align:center;color:var(--muted);font-size:13px;font-style:italic;
}

/* Mobile */
@media (max-width:640px){
  .bk-sec-summary{display:none}
  .bk-sec-toggle{padding:10px 6px;font-size:13px}
  .bk-sec-btn{width:28px;height:28px}
  .bk-sections-head{flex-direction:column;align-items:stretch}
  .bk-sections-head .btn{align-self:flex-start}
}

/* === BRAND KIT — Slots === */

/* Slot groups container */
.bk-slot-groups{
  display:flex;flex-direction:column;gap:6px;
}

/* Slot group (one per slot type or custom) */
.bk-slot-group{
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  transition:border-color .15s;
}
.bk-slot-group:hover{
  border-color:color-mix(in srgb, var(--primary) 20%, var(--border));
}
.bk-slot-group.is-expanded{
  border-color:color-mix(in srgb, var(--primary) 30%, var(--border));
}

/* Group toggle (header row) */
.bk-slot-group-toggle{
  display:flex;align-items:center;gap:14px;width:100%;
  padding:16px 18px;background:transparent;border:none;
  font-family:inherit;font-size:13.5px;color:var(--heading);
  cursor:pointer;text-align:left;
}
.bk-slot-group-toggle:hover{
  background:color-mix(in srgb, var(--primary) 5%, transparent);
}
.bk-slot-group-toggle .bk-slot-group-label{font-size:14px;font-weight:500}
.bk-slot-group-chev{
  display:flex;color:var(--muted);flex-shrink:0;
}
.bk-slot-group.is-expanded .bk-slot-group-chev{color:var(--primary)}
.bk-slot-group-icon{
  display:flex;color:var(--muted);flex-shrink:0;
}
.bk-slot-group.is-expanded .bk-slot-group-icon{color:var(--primary)}
.bk-slot-group-label{
  font-weight:500;flex-shrink:0;
}
.bk-slot-group-badge{
  display:inline-flex;align-items:center;
  padding:2px 7px;border-radius:999px;
  background:color-mix(in srgb, var(--warning) 15%, var(--card));
  color:var(--warning);
  font-size:10px;font-weight:600;
  letter-spacing:.4px;text-transform:uppercase;
  flex-shrink:0;
}
.bk-slot-group-count{
  margin-left:auto;
  font-size:11.5px;color:var(--muted);font-weight:500;
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}

/* Group actions (custom slot rename/delete) */
.bk-slot-group-actions{
  position:absolute;top:6px;right:6px;
  display:flex;gap:2px;
}
html[dir="rtl"] .bk-slot-group-actions{right:auto;left:6px}

/* Format rows (within expanded group) */
.bk-slot-formats{
  display:flex;flex-direction:column;gap:8px;
  padding:14px;
  background:var(--surface);
  border-top:1px solid var(--border);
}

.bk-slot-row{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;
  min-height:48px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:6px;
  transition:border-color .15s;
}
.bk-slot-row:hover{
  border-color:color-mix(in srgb, var(--primary) 20%, var(--border));
}
.bk-slot-row.is-filled{
  border-color:color-mix(in srgb, var(--success) 25%, var(--border));
}

.bk-slot-fmt{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:62px;height:26px;padding:0 10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:4px;
  font-size:11px;font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}

.bk-slot-state{flex:1;min-width:0;display:flex;align-items:center}
.bk-slot-state-text{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--heading);
  min-width:0;
}
.bk-slot-row.is-filled .bk-slot-state-text{color:var(--success)}
.bk-slot-empty-text{color:var(--muted);font-style:italic}
.bk-slot-fname{
  color:var(--heading);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:240px;
}

.bk-slot-actions{
  display:flex;gap:4px;flex-shrink:0;
}
.bk-slot-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 12px;
  background:transparent;
  border:1px solid var(--border);
  border-radius:5px;
  color:var(--muted);font-size:11.5px;font-family:inherit;
  cursor:pointer;
  transition:all .15s;
}
.bk-slot-btn:hover{
  background:var(--surface);color:var(--heading);
  border-color:color-mix(in srgb, var(--primary) 30%, var(--border));
}
.bk-slot-set:hover{color:var(--primary);border-color:var(--primary)}
.bk-slot-clear:hover{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 30%, var(--border))}

/* Add custom slot button */
.bk-add-custom-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;
  margin-top:14px;padding:14px 16px;
  background:transparent;
  border:1px dashed var(--border);
  border-radius:8px;
  color:var(--muted);font-size:13px;font-weight:500;font-family:inherit;
  cursor:pointer;
  transition:all .15s;
}
.bk-add-custom-btn:hover{
  color:var(--primary);
  border-color:var(--primary);
  border-style:solid;
  background:color-mix(in srgb, var(--primary) 5%, transparent);
}

/* Mobile */
@media (max-width:640px){
  .bk-slot-group-label{font-size:12.5px}
  .bk-slot-group-count{font-size:10.5px}
  .bk-slot-row{flex-wrap:wrap;gap:8px}
  .bk-slot-state{flex:1 1 100%;order:3}
  .bk-slot-actions{margin-left:auto}
  .bk-slot-fname{max-width:200px}
  .bk-slot-btn span{display:none}
  .bk-slot-btn{padding:6px 8px}
}


/* === BRAND KIT — Section status + meta === */

.bk-sec-status{
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
  margin-right:2px;
}
.bk-section-card.is-inactive{
  opacity:.65;
}
.bk-section-card.is-inactive .bk-sec-name{
  text-decoration:line-through;
  text-decoration-color:color-mix(in srgb, var(--muted) 40%, transparent);
}

.bk-sec-meta{
  display:inline-flex;align-items:center;gap:10px;
  margin-left:8px;
  font-size:11px;color:var(--muted);font-weight:400;
  flex-shrink:0;
}
.bk-sec-meta-item{
  display:inline-flex;align-items:center;gap:4px;
  font-variant-numeric:tabular-nums;
}
.bk-sec-meta-item svg{opacity:.7}

.bk-sec-toggle-active[data-active="0"]{
  color:var(--muted);
}
.bk-sec-toggle-active[data-active="1"]:hover{
  color:var(--success);
  border-color:color-mix(in srgb, var(--success) 30%, var(--border));
}
.bk-sec-toggle-active[data-active="0"]:hover{
  color:var(--primary);
  border-color:var(--primary);
}

/* Mobile: hide meta dates and summary, keep dot + name + actions */
@media (max-width:640px){
  .bk-sec-meta{display:none}
  .bk-sec-summary{display:none}
}

/* RTL */
html[dir="rtl"] .bk-sec-meta{margin-left:0;margin-right:8px}

/* slot btn min-height for visual balance */
.bk-slot-btn{min-height:32px;line-height:1}
.bk-slot-fmt{min-height:26px;line-height:26px}

/* === BRAND KIT — Source Picker (matches font-dialog style) === */

.bk-source-modal h3{margin-top:0}
.bk-source-modal p{margin:0 0 18px;font-size:13px}

/* Tabs row */
.bk-src-tabs{
  display:flex;gap:4px;
  padding:4px;margin-bottom:16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
}
.bk-src-tab{
  flex:1;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 12px;
  background:transparent;border:none;border-radius:7px;
  color:var(--muted);font:500 13px/1 'Poppins',inherit;
  cursor:pointer;transition:all .15s;
}
.bk-src-tab:hover{color:var(--heading);background:var(--card)}
.bk-src-tab.active{
  background:var(--card);color:var(--primary);
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}

/* Content area — fixed height so tab switches don't jump */
.bk-src-content{
  position:relative;
  min-height:320px;
  margin-bottom:18px;
}
.bk-src-pane{}
.bk-src-pane[hidden]{display:none !important}

/* Upload pane */
.bk-src-upload{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:300px;padding:24px;
  border:2px dashed var(--border);border-radius:12px;
  color:var(--muted);cursor:pointer;
  transition:all .15s;
}
.bk-src-upload:hover,
.bk-src-upload.is-drag{
  border-color:var(--primary);
  background:color-mix(in srgb, var(--primary) 5%, transparent);
  color:var(--primary);
}
.bk-src-up-title{font:500 14px/1.3 'Poppins',inherit;color:var(--heading)}
.bk-src-up-desc{font-size:12px;color:var(--muted)}

#bk-src-upload-progress{margin-top:14px}
.bk-src-progress-row{
  display:flex;align-items:center;gap:12px;
  padding:12px;
  background:var(--surface);border:1px solid var(--border);border-radius:8px;
}
.bk-src-progress-name{
  flex:1;min-width:0;
  font-size:12.5px;color:var(--heading);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bk-src-progress-bar{
  flex:0 0 120px;height:5px;
  background:var(--border);border-radius:3px;overflow:hidden;
}
.bk-src-progress-fill{
  height:100%;width:0;
  background:linear-gradient(90deg, var(--primary), var(--primary-2));
  transition:width .15s;
}
.bk-src-progress-pct{
  font-size:11.5px;color:var(--muted);min-width:32px;text-align:right;
  font-variant-numeric:tabular-nums;
}

/* Library pane */
.bk-src-lib-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
  gap:10px;
  max-height:300px;overflow-y:auto;
  padding-right:4px;
}
.bk-src-lib-card{
  display:flex;flex-direction:column;gap:6px;
  padding:8px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  cursor:pointer;text-align:left;
  font-family:inherit;
  transition:all .15s;
}
.bk-src-lib-card:hover{
  border-color:var(--primary);
  background:color-mix(in srgb, var(--primary) 5%, var(--card));
}
.bk-src-lib-thumb{
  display:flex;align-items:center;justify-content:center;
  height:80px;
  background:var(--surface);
  border-radius:5px;overflow:hidden;
  color:var(--muted);
}
.bk-src-lib-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.bk-src-lib-font{
  font:600 32px/1 'Poppins',inherit;color:var(--heading);
}
.bk-src-lib-name{
  font-size:11.5px;color:var(--heading);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bk-src-lib-meta{font-size:10.5px;color:var(--muted);text-transform:capitalize}

/* Template pane (placeholder empty) */
.bk-src-tpl-empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:48px 24px;color:var(--muted);
  min-height:300px;justify-content:center;
}
.bk-src-tpl-empty svg{color:var(--primary);margin-bottom:12px;opacity:.6}
.bk-src-tpl-empty h4{margin:0 0 6px;font:600 15px/1.3 'Poppins',inherit;color:var(--heading)}
.bk-src-tpl-empty p{margin:0;font-size:12.5px;max-width:320px;line-height:1.5}

/* Mobile */
@media (max-width:560px){
  .bk-src-tab span{display:none}
  .bk-src-lib-grid{grid-template-columns:repeat(auto-fill, minmax(95px, 1fr))}
}

/* === BRAND KIT — Templates Tab === */

.bk-tpl-card{display:flex;flex-direction:column;gap:var(--space-section)}

/* Header with title + add button */
.bk-tpl-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  flex-wrap:wrap;
}
.bk-tpl-head h3{margin:0 0 4px;font:600 17px/1.3 'Poppins',inherit;color:var(--heading)}
.bk-tpl-head .bk-desc{margin:0;max-width:560px}
.bk-tpl-head .btn{flex-shrink:0}

/* Filter chips row */
.bk-tpl-filters{
  display:flex;gap:8px;flex-wrap:wrap;
  padding-bottom:6px;
  border-bottom:1px solid var(--border);
}
.bk-tpl-filters:empty{display:none}

/* Gallery grid */
.bk-tpl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:14px;
  margin-top:6px;
}

/* Single template card */
.bk-tpl-item{
  display:flex;flex-direction:column;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.bk-tpl-item:hover{
  border-color:color-mix(in srgb, var(--primary) 40%, var(--border));
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.bk-tpl-item.is-inactive{opacity:.55}
.bk-tpl-item.is-inactive .bk-tpl-name{text-decoration:line-through}

/* Thumbnail area */
.bk-tpl-thumb{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  height:120px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 6%, var(--surface)), var(--surface));
  border-bottom:1px solid var(--border);
}
.bk-tpl-thumb-icon{
  display:flex;align-items:center;justify-content:center;
  color:color-mix(in srgb, var(--primary) 70%, var(--muted));
  opacity:.7;
}
.bk-tpl-system-badge{
  position:absolute;top:8px;right:8px;
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;
  background:color-mix(in srgb, var(--primary) 14%, var(--card));
  color:var(--primary);
  border:1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  border-radius:6px;
  font-size:10.5px;font-weight:600;letter-spacing:.3px;
  text-transform:uppercase;
}
html[dir="rtl"] .bk-tpl-system-badge{right:auto;left:8px}

/* Info block */
.bk-tpl-info{
  display:flex;flex-direction:column;gap:6px;
  padding:14px 14px 12px;
  flex:1;
}
.bk-tpl-name{
  font:600 14px/1.3 'Poppins',inherit;color:var(--heading);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bk-tpl-kind{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;color:var(--muted);
}
.bk-tpl-meta{
  font-size:11.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.bk-tpl-formats{
  font-size:11px;color:var(--muted);opacity:.85;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Action buttons row */
.bk-tpl-actions{
  display:flex;align-items:center;gap:6px;
  padding:10px 12px;
  border-top:1px solid var(--border);
  background:var(--surface);
}
.bk-tpl-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 10px;
  background:transparent;
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--muted);
  font:500 12px/1 'Poppins',inherit;
  cursor:pointer;transition:all .15s;
}
.bk-tpl-btn:hover{
  color:var(--primary);
  border-color:color-mix(in srgb, var(--primary) 35%, var(--border));
  background:color-mix(in srgb, var(--primary) 6%, transparent);
}
.bk-tpl-btn.bk-tpl-delete:hover{
  color:var(--danger);
  border-color:color-mix(in srgb, var(--danger) 35%, var(--border));
  background:color-mix(in srgb, var(--danger) 6%, transparent);
}
.bk-tpl-btn.bk-tpl-preview{
  flex:1;justify-content:center;
  color:var(--primary);
  border-color:color-mix(in srgb, var(--primary) 30%, var(--border));
}
.bk-tpl-btn.bk-tpl-preview:hover{
  background:color-mix(in srgb, var(--primary) 12%, transparent);
}

/* === Preview modal === */
.bk-tpl-preview-modal h3{margin-top:0;margin-bottom:6px}
.bk-tpl-preview-modal p{margin:0 0 14px;font-size:13px}
.bk-tpl-prev-badge{
  display:inline-block;
  padding:2px 8px;
  background:color-mix(in srgb, var(--primary) 14%, var(--surface));
  color:var(--primary);
  border-radius:5px;
  font-size:11px;font-weight:600;letter-spacing:.3px;
  text-transform:uppercase;
}

/* Format switcher (segmented) */
.bk-tpl-prev-formats{
  display:flex;gap:4px;
  padding:4px;margin-bottom:14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
}
.bk-tpl-prev-fmt{
  flex:1;
  padding:7px 10px;
  background:transparent;border:none;border-radius:7px;
  color:var(--muted);font:500 12px/1 'Poppins',inherit;
  cursor:pointer;transition:all .15s;
}
.bk-tpl-prev-fmt:hover{color:var(--heading);background:var(--card)}
.bk-tpl-prev-fmt.active{
  background:var(--card);color:var(--primary);
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}

/* Stage (visual mockup) */
.bk-tpl-prev-stage{
  margin-bottom:18px;
  display:flex;justify-content:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px;
}
.bk-tpl-stage-frame{
  position:relative;
  width:100%;max-width:560px;
  aspect-ratio:16/9;
  background:linear-gradient(135deg, #1a1f2e, #0d1117);
  border-radius:6px;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.bk-tpl-stage-frame[data-fmt="9:16"]{aspect-ratio:9/16;max-width:240px}
.bk-tpl-stage-frame[data-fmt="1:1"]{aspect-ratio:1/1;max-width:380px}
.bk-tpl-stage-frame[data-fmt="4:5"]{aspect-ratio:4/5;max-width:340px}
.bk-tpl-stage-layer{
  position:absolute;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--primary) 25%, transparent);
  border:1px dashed color-mix(in srgb, var(--primary) 50%, transparent);
  border-radius:3px;
  color:#fff;font-size:11px;font-weight:600;
  pointer-events:none;
  font-family:'Poppins',sans-serif;
}

/* Details (layers + placeholders) */
.bk-tpl-prev-details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:18px;
}
.bk-tpl-prev-section{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 14px;
}
.bk-tpl-prev-section h4{
  margin:0 0 8px;
  font:600 11px/1 'Poppins',inherit;
  color:var(--muted);
  text-transform:uppercase;letter-spacing:.6px;
}
.bk-tpl-prev-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:6px;
}
.bk-tpl-prev-list li{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--heading);
}
.bk-tpl-prev-tag{
  display:inline-block;
  padding:2px 7px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:4px;
  font-size:10.5px;color:var(--muted);
  font-family:ui-monospace, SFMono-Regular, monospace;
  text-transform:lowercase;
}
.bk-tpl-required{
  margin-left:6px;
  color:var(--danger);
  font-size:10.5px;font-weight:500;
}

/* Mobile */
@media (max-width:640px){
  .bk-tpl-grid{grid-template-columns:1fr}
  .bk-tpl-prev-details{grid-template-columns:1fr}
  .bk-tpl-stage-frame{max-width:100% !important}
}

/* badge inside preview meta is inline (override absolute card placement) */
.bk-tpl-prev-meta .bk-tpl-system-badge,
#bk-tpl-prev-meta .bk-tpl-system-badge{
  position:static;top:auto;right:auto;left:auto;
  margin-left:4px;
}

/* Slot row variant: source = template (palette-purple accent) */
.bk-slot-row.is-template{
  border-color:color-mix(in srgb, var(--primary) 35%, var(--border));
  background:color-mix(in srgb, var(--primary) 4%, var(--card));
}
.bk-slot-row.is-template .bk-slot-state-text svg{color:var(--primary)}


/* === Brand Kit: Editorial Policy (Identity tab) === */
.bk-pol-terms{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.bk-pol-row{ display:flex; align-items:center; gap:8px; }
.bk-pol-row .input{ flex:1; min-width:0; }
.bk-pol-arrow{ color:var(--muted); flex:0 0 auto; font-size:14px; }
.bk-pol-del{ flex:0 0 auto; width:30px; height:30px; display:inline-flex;
  align-items:center; justify-content:center; border-radius:8px;
  border:1px solid var(--border); background:transparent; color:var(--muted);
  cursor:pointer; transition:color .15s, border-color .15s; }
.bk-pol-del:hover{ color:var(--danger); border-color:var(--danger); }


/* === Brand Kit: Editorial Policy v2 (labels + chips) === */
.bk-pol-cols{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.bk-pol-cols .bk-pol-col-label{ flex:1; font-size:11.5px; font-weight:600;
  color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.bk-pol-cols .bk-pol-col-mid{ flex:0 0 14px; }
.bk-pol-cols .bk-pol-col-end{ flex:0 0 30px; }
.bk-pol-examples{ display:flex; flex-wrap:wrap; align-items:center;
  gap:6px; margin-top:10px; }
.bk-pol-ex-label{ font-size:11.5px; color:var(--muted); margin-inline-end:2px; }
.bk-pol-chip{ padding:4px 10px; border-radius:999px; font-size:12px;
  direction:rtl; unicode-bidi:plaintext;
  background:color-mix(in srgb, var(--primary) 8%, var(--card));
  border:1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  color:var(--text); cursor:pointer;
  transition:background .13s, border-color .13s; }
.bk-pol-chip:hover{
  background:color-mix(in srgb, var(--primary) 16%, var(--card));
  border-color:color-mix(in srgb, var(--primary) 50%, var(--border)); }


/* === Brand Kit: Editorial Policy v3 (rules list) === */
.bk-pol-subhead{ display:flex; align-items:flex-start;
  justify-content:space-between; gap:12px; margin-top:18px;
  padding-top:14px; border-top:1px solid var(--border); }
.bk-pol-sub-title{ display:block; font-size:13px; font-weight:600;
  color:var(--heading); }
.bk-pol-sub-desc{ display:block; font-size:11.5px; color:var(--muted);
  margin-top:2px; }
.bk-pol-rules{ display:flex; flex-direction:column; gap:8px;
  margin-top:10px; }
.bk-pol-rrow{ display:flex; align-items:center; gap:8px; }
.bk-pol-rrow .input{ flex:1; min-width:0; }
.bk-pol-rnum{ flex:0 0 24px; height:24px; display:inline-flex;
  align-items:center; justify-content:center; border-radius:7px;
  font-size:11px; font-weight:600; color:var(--primary);
  background:color-mix(in srgb, var(--primary) 10%, var(--card));
  border:1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); }
.bk-pol-rchip{ padding:4px 10px; border-radius:999px; font-size:12px;
  background:color-mix(in srgb, var(--primary) 8%, var(--card));
  border:1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  color:var(--text); cursor:pointer;
  transition:background .13s, border-color .13s; }
.bk-pol-rchip:hover{
  background:color-mix(in srgb, var(--primary) 16%, var(--card));
  border-color:color-mix(in srgb, var(--primary) 50%, var(--border)); }

/* ── Templates tab: live mini-preview thumbnails + search (roadmap #5) ── */
.bk-tpl-search{max-width:280px;margin:0 0 12px}
.bk-tpl-thumb{overflow:hidden;height:auto;aspect-ratio:16/9}
.bk-tpl-live{
  position:absolute;left:0;top:0;border:0;
  transform-origin:0 0;
  pointer-events:none;background:transparent;
}
.bk-tpl-thumb .bk-tpl-system-badge{position:relative;z-index:2}