:root{
  --bo-bg:#f3f7f6;
  --bo-card:#ffffff;
  --bo-ink:#0f172a;
  --bo-muted:#617086;
  --bo-brand:#19c37d;
  --bo-line:#e3e9ef;
  --bo-shadow:0 10px 28px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
body.backoffice-page{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--bo-ink);
  background:radial-gradient(1000px 500px at 85% -80px,#dff7ea 0%,rgba(223,247,234,0) 65%),var(--bo-bg);
}
.bo-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.bo-sidebar{
  background:#0f172a;
  color:#dbe4ef;
  border-right:1px solid rgba(255,255,255,.08);
  padding:22px 16px;
  display:flex;
  flex-direction:column;
}
.bo-brand{color:#fff;font-weight:800;font-size:1.2rem;letter-spacing:-.02em}
.bo-brand span{color:#7be7b8}
.bo-role-label{margin:10px 0 18px;color:#93a3bb;font-size:.85rem}
.bo-nav{display:grid;gap:6px}
.bo-nav a{
  color:#d8e1ec;
  border-radius:12px;
  padding:10px 12px;
  border:1px solid transparent;
  text-decoration:none;
  font-size:.92rem;
}
.bo-nav a:hover{background:#162237;border-color:#203150}
.bo-nav a.is-active{background:#19344b;border-color:#296183;color:#e8fbff}
.bo-sidebar-foot{margin-top:auto;display:grid;gap:8px}
.bo-sidebar-foot a{color:#9eb0c9;font-size:.83rem;text-decoration:none}
.bo-main{padding:20px 22px 28px}
.bo-topbar{
  background:var(--bo-card);
  border:1px solid var(--bo-line);
  border-radius:16px;
  padding:14px 16px;
  box-shadow:var(--bo-shadow);
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.bo-topbar p{margin:4px 0 0;color:var(--bo-muted);font-size:.86rem}
.bo-top-link{
  text-decoration:none;
  color:#1e7c5e;
  font-weight:700;
  border:1px solid #c8e9da;
  border-radius:999px;
  padding:8px 12px;
}
.bo-section{margin-top:18px}
.bo-grid{display:grid;gap:14px}
.bo-grid.kpi{grid-template-columns:repeat(4,1fr)}
.bo-grid.two{grid-template-columns:1.2fr .8fr}
.bo-grid.three{grid-template-columns:repeat(3,1fr)}
.bo-card{
  background:var(--bo-card);
  border:1px solid var(--bo-line);
  border-radius:16px;
  box-shadow:var(--bo-shadow);
  padding:16px;
}
.bo-card h2,.bo-card h3{margin:.2rem 0}
.bo-kpi-label{font-size:.8rem;color:var(--bo-muted)}
.bo-kpi-value{font-size:1.6rem;font-weight:800;letter-spacing:-.02em}
.bo-list{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.bo-list li{
  border:1px solid var(--bo-line);
  border-radius:12px;
  padding:10px;
  font-size:.9rem;
  color:#334155;
}
.bo-table{width:100%;border-collapse:collapse;margin-top:8px}
.bo-table th,.bo-table td{padding:10px;border-top:1px solid #edf2f7;text-align:left;font-size:.9rem}
.bo-table th{background:#f7fafc;border-top:none;color:#43556e}
.bo-pill{
  display:inline-block;
  font-size:.74rem;
  border-radius:999px;
  padding:4px 8px;
  background:#ecf9f3;
  color:#197a5b;
  border:1px solid #cbeedc;
}
.bo-actions{display:flex;gap:8px;flex-wrap:wrap}
.bo-form-grid{display:grid;gap:8px}
.bo-input{
  border:1px solid #d5deea;
  border-radius:10px;
  padding:8px 10px;
  font:inherit;
  min-width:140px;
  background:#fff;
}
textarea.bo-input{min-height:76px;resize:vertical}
.bo-btn{
  text-decoration:none;
  border:1px solid #cfe4da;
  border-radius:10px;
  padding:8px 10px;
  font-size:.85rem;
  color:#245a47;
  background:#f5fcf9;
}
.bo-auth-wrap{min-height:100vh;display:grid;place-items:center;padding:22px}
.bo-auth-card{
  width:min(440px,100%);
  background:#fff;
  border:1px solid var(--bo-line);
  border-radius:20px;
  padding:20px;
  box-shadow:var(--bo-shadow);
}
.bo-auth-card h1{font-size:1.8rem;margin:.2rem 0 .7rem}
.bo-auth-card p{color:var(--bo-muted)}
.bo-submit-btn{
  border:none;
  border-radius:12px;
  padding:12px;
  font-weight:700;
  font-size:.95rem;
  background:#19c37d;
  color:#fff;
  cursor:pointer;
}
.bo-submit-btn:hover{background:#0e8f5c}
.bo-error{color:#b91c1c;font-size:.9rem;margin:6px 0}
.bo-auth-alt{margin:10px 0 0;font-size:.88rem;color:var(--bo-muted)}
.bo-auth-alt a{color:#1e7c5e;font-weight:600}
.bo-user-badge{
  font-size:.78rem;
  color:#93a3bb;
  margin:0 0 14px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(255,255,255,.04);
}
/* Page header */
.bo-page-header h2{font-size:1.4rem;margin:0 0 4px}
.bo-page-header p{color:var(--bo-muted);margin:0;font-size:.9rem}

/* Onboarding card */
.bo-onboard-card{
  background:var(--bo-card);
  border:1px solid var(--bo-line);
  border-radius:16px;
  box-shadow:var(--bo-shadow);
  padding:24px;
  display:flex;
  align-items:flex-start;
  gap:18px;
  flex-wrap:wrap;
}
.bo-onboard-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:14px;
  background:#ecf9f3;
  color:#19c37d;
  flex-shrink:0;
}
.bo-onboard-content{flex:1;min-width:200px}
.bo-onboard-content h3{margin:0 0 4px;font-size:1.05rem}
.bo-onboard-content p{margin:0;color:var(--bo-muted);font-size:.88rem}
.bo-onboard-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Empty state */
.bo-empty-state{
  background:var(--bo-card);
  border:1px solid var(--bo-line);
  border-radius:16px;
  box-shadow:var(--bo-shadow);
  padding:48px 24px;
  text-align:center;
}
.bo-empty-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  border-radius:18px;
  background:#f0f4f8;
  color:#94a3b8;
  margin-bottom:16px;
}
.bo-empty-state h3{margin:0 0 6px;font-size:1.1rem}
.bo-empty-state p{margin:0 0 20px;color:var(--bo-muted);font-size:.9rem}
.bo-empty-state .bo-submit-btn{display:inline-block;text-decoration:none;margin-bottom:10px}

/* Success card */
.bo-success-card{
  background:var(--bo-card);
  border:1px solid #cbeedc;
  border-radius:16px;
  box-shadow:var(--bo-shadow);
  padding:40px 24px;
  text-align:center;
}
.bo-success-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  border-radius:50%;
  background:#ecf9f3;
  color:#19c37d;
  margin-bottom:16px;
}
.bo-success-card h2{margin:0 0 8px;font-size:1.4rem}
.bo-success-card p{margin:0 0 24px;color:var(--bo-muted);font-size:.92rem}
.bo-success-details{
  background:#f8fafb;
  border:1px solid var(--bo-line);
  border-radius:12px;
  padding:14px;
  margin:0 auto 24px;
  max-width:360px;
  text-align:left;
}
.bo-success-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 0;
}
.bo-success-row + .bo-success-row{border-top:1px solid var(--bo-line)}
.bo-success-label{color:var(--bo-muted);font-size:.84rem}
.bo-success-value{font-weight:600;font-size:.88rem}
.bo-success-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.bo-success-actions .bo-submit-btn{display:inline-block;text-decoration:none}
.bo-success-actions .bo-btn{display:inline-block}

/* Status pill variants */
.bo-pill-unassigned{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.bo-pill-claimed{background:#fffbeb;color:#b45309;border-color:#fde68a}
.bo-pill-assigned{background:#ecf9f3;color:#197a5b;border-color:#cbeedc}
.bo-pill-disabled{background:#f1f5f9;color:#64748b;border-color:#e2e8f0}
.bo-pill-ready{background:#eff6ff;color:#2563eb;border-color:#bfdbfe;font-weight:600}

/* Active filter button */
.bo-btn-active{background:#19c37d;color:#fff;border-color:#19c37d}

/* Subtle link */
.bo-link-subtle{
  display:inline-block;
  color:var(--bo-muted);
  font-size:.85rem;
  text-decoration:underline;
  cursor:pointer;
  background:none;
  border:none;
  font:inherit;
}
.bo-link-subtle:hover{color:var(--bo-ink)}

/* URL cell in admin tables */
.bo-url-cell{
  font-size:.78rem;
  color:var(--bo-muted);
  word-break:break-all;
  max-width:260px;
  display:inline-block;
}

/* Copy button */
.bo-copy-btn{cursor:pointer;font:inherit}

@media (max-width:980px){
  .bo-shell{grid-template-columns:1fr}
  .bo-sidebar{position:sticky;top:0;z-index:40;padding:12px}
  .bo-grid.kpi,.bo-grid.two,.bo-grid.three{grid-template-columns:1fr}
  .bo-onboard-card{flex-direction:column;align-items:stretch}
}
