/* ==========================================================
   CUBICALL REDESIGN — Normal + Beta OVH-style panel switch
   ========================================================== */
:root{
  --cx-bg:#0a0e16;
  --cx-surface:#101722;
  --cx-surface-2:#151d2a;
  --cx-border:#273346;
  --cx-text:#eef3fb;
  --cx-muted:#8996aa;
  --cx-brand:#7c6cf0;
  --cx-brand-2:#4dc8ff;
  --cx-success:#19a66b;
  --cx-warning:#e2a21b;
  --cx-danger:#d94a5b;
  --cx-shadow:0 18px 60px rgba(0,0,0,.35);
  --cx-radius:16px;
}

*{box-sizing:border-box}
body.cx-modern{
  margin:0;
  background:var(--cx-bg);
  color:var(--cx-text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
a{color:inherit}
.cx-shell{min-height:100vh}
.cx-topbar{
  height:66px; display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; border-bottom:1px solid var(--cx-border);
  background:color-mix(in srgb,var(--cx-surface) 94%,transparent);
  position:sticky;top:0;z-index:50;backdrop-filter:blur(18px);
}
.cx-brand{display:flex;align-items:center;gap:11px;font-weight:800;text-decoration:none}
.cx-brand-mark{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--cx-brand),var(--cx-brand-2));color:#fff;
  box-shadow:0 8px 20px rgba(91,75,219,.25)
}
.cx-top-actions{display:flex;gap:8px;align-items:center}
.cx-btn{
  border:1px solid var(--cx-border);background:var(--cx-surface);color:var(--cx-text);
  border-radius:10px;padding:9px 13px;font:inherit;font-weight:700;text-decoration:none;
  cursor:pointer;transition:.18s ease
}
.cx-btn:hover{transform:translateY(-1px);border-color:var(--cx-brand)}
.cx-btn-primary{border-color:transparent;background:var(--cx-brand);color:#fff}
.cx-btn-ghost{background:transparent}
.cx-layout{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:calc(100vh - 66px)}
.cx-sidebar{
  border-right:1px solid var(--cx-border);background:var(--cx-surface);
  padding:20px 14px;position:sticky;top:66px;height:calc(100vh - 66px)
}
.cx-side-label{padding:8px 10px;color:var(--cx-muted);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.cx-nav{display:grid;gap:5px}
.cx-nav a{
  padding:11px 12px;border-radius:10px;text-decoration:none;color:var(--cx-muted);font-weight:650
}
.cx-nav a:hover,.cx-nav a.active{background:var(--cx-surface-2);color:var(--cx-text)}
.cx-nav a.active{box-shadow:inset 3px 0 0 var(--cx-brand)}
.cx-main{padding:32px;min-width:0}
.cx-container{max-width:1260px;margin:0 auto}
.cx-breadcrumb{color:var(--cx-muted);font-size:13px;margin-bottom:18px}
.cx-title-row{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:25px}
.cx-title-row h1{margin:0;font-size:30px;letter-spacing:-.03em}
.cx-subtitle{margin:7px 0 0;color:var(--cx-muted);line-height:1.6}
.cx-grid{display:grid;gap:18px}
.cx-grid-4{grid-template-columns:repeat(4,1fr)}
.cx-grid-3{grid-template-columns:repeat(3,1fr)}
.cx-grid-2{grid-template-columns:repeat(2,1fr)}
.cx-card{
  background:var(--cx-surface);border:1px solid var(--cx-border);border-radius:var(--cx-radius);
  box-shadow:var(--cx-shadow);padding:20px
}
.cx-stat-label{color:var(--cx-muted);font-size:12px;font-weight:700}
.cx-stat-value{font-size:27px;font-weight:850;margin-top:8px}
.cx-stat-note{color:var(--cx-success);font-size:12px;margin-top:6px}
.cx-table{width:100%;border-collapse:collapse}
.cx-table th,.cx-table td{padding:14px 12px;border-bottom:1px solid var(--cx-border);text-align:left}
.cx-table th{font-size:12px;color:var(--cx-muted);text-transform:uppercase;letter-spacing:.06em}
.cx-table tr:last-child td{border-bottom:0}
.cx-badge{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:11px;font-weight:800}
.cx-badge-green{background:rgba(25,166,107,.12);color:var(--cx-success)}
.cx-badge-yellow{background:rgba(226,162,27,.12);color:var(--cx-warning)}
.cx-badge-red{background:rgba(217,74,91,.12);color:var(--cx-danger)}
.cx-profile{
  display:grid;grid-template-columns:270px minmax(0,1fr);gap:18px
}
.cx-profile-cover{
  min-height:240px;border-radius:var(--cx-radius);padding:24px;
  background:linear-gradient(145deg,var(--cx-brand),var(--cx-brand-2));color:#fff;
  position:relative;overflow:hidden
}
.cx-profile-avatar{
  width:88px;height:88px;border-radius:24px;background:rgba(255,255,255,.18);
  display:grid;place-items:center;font-size:35px;font-weight:900;border:1px solid rgba(255,255,255,.35)
}
.cx-profile-cover h2{margin:18px 0 5px}.cx-profile-cover p{margin:0;opacity:.82}
.cx-profile-meta{display:grid;gap:12px}
.cx-profile-row{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--cx-border)}
.cx-profile-row:last-child{border-bottom:0}
.cx-cloner{
  display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px
}
.cx-cloner-side{display:grid;align-content:start;gap:8px}
.cx-cloner-step{
  display:flex;gap:10px;align-items:center;padding:13px;border:1px solid var(--cx-border);
  border-radius:12px;background:var(--cx-surface)
}
.cx-cloner-step strong{
  width:27px;height:27px;border-radius:8px;display:grid;place-items:center;
  background:var(--cx-surface-2);font-size:12px
}
.cx-cloner-step.active{border-color:var(--cx-brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--cx-brand) 12%,transparent)}
.cx-cloner-body{min-height:500px}
.cx-progress{height:7px;border-radius:99px;background:var(--cx-surface-2);overflow:hidden}
.cx-progress span{display:block;height:100%;width:58%;background:linear-gradient(90deg,var(--cx-brand),var(--cx-brand-2))}
.cx-option{
  border:1px solid var(--cx-border);border-radius:13px;padding:14px;display:flex;align-items:center;
  justify-content:space-between;gap:15px;margin-top:10px;background:var(--cx-surface-2)
}
.cx-switch{position:relative;width:44px;height:24px}.cx-switch input{opacity:0;width:0;height:0}
.cx-slider{position:absolute;inset:0;border-radius:99px;background:#9aa3b2;cursor:pointer}
.cx-slider:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.2s}
.cx-switch input:checked+.cx-slider{background:var(--cx-brand)}
.cx-switch input:checked+.cx-slider:before{transform:translateX(20px)}
.cx-panel-switcher{
  display:inline-flex;padding:4px;border:1px solid var(--cx-border);background:var(--cx-surface);
  border-radius:12px;gap:4px
}
.cx-panel-switcher button{border:0;background:transparent;color:var(--cx-muted);padding:8px 12px;border-radius:8px;font-weight:800;cursor:pointer}
.cx-panel-switcher button.active{background:var(--cx-brand);color:#fff}
.cx-beta-banner{
  display:none;margin-bottom:18px;padding:11px 14px;border:1px solid rgba(77,200,255,.28);
  border-radius:12px;background:rgba(77,200,255,.08);color:var(--cx-text)
}
html[data-cx-theme="beta"] .cx-beta-banner{display:block}
.cx-beta-only{display:none}
html[data-cx-theme="beta"] .cx-beta-only{display:block}
.cx-normal-only{display:block}
html[data-cx-theme="beta"] .cx-normal-only{display:none}
@media(max-width:1050px){
  .cx-grid-4{grid-template-columns:repeat(2,1fr)}
  .cx-sidebar{width:190px}.cx-layout{grid-template-columns:190px minmax(0,1fr)}
}
@media(max-width:760px){
  .cx-topbar{padding:0 14px}.cx-layout{display:block}.cx-sidebar{position:static;width:auto;height:auto;border-right:0;border-bottom:1px solid var(--cx-border);padding:10px}
  .cx-nav{display:flex;overflow:auto}.cx-nav a{white-space:nowrap}.cx-main{padding:18px}
  .cx-grid-4,.cx-grid-3,.cx-grid-2,.cx-profile,.cx-cloner{grid-template-columns:1fr}
  .cx-title-row{display:block}.cx-title-row .cx-top-actions{margin-top:15px}
}