*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#eef7fb;color:#0b2c45}
:root{--navy:#063c66;--blue:#0878b7;--cyan:#17a4c8;--sky:#e9f7fc;--surface:#fff;--text:#0b2c45;--muted:#658099;--line:#d6e7f0;--ok:#1eaa62;--warn:#e0a122;--danger:#d84343;--shadow:0 12px 30px rgba(6,60,102,.09);--radius:18px}
html[data-theme="dark"]{--surface:#10283a;--text:#edf8ff;--muted:#9fc0d4;--line:#23485f;--sky:#0c2131;background:#091c2a;color:var(--text)}
body{margin:0;background:radial-gradient(circle at 12% 0%,rgba(23,164,200,.16),transparent 26%),#eef7fb;color:var(--text);min-height:100vh}
html[data-theme="dark"] body{background:#091c2a}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:12px;top:12px;z-index:999;background:#fff;padding:10px}
.app-shell{display:grid;grid-template-columns:270px minmax(0,1fr);min-height:100vh}.sidebar{background:linear-gradient(180deg,#07466f,#075d8c 56%,#064064);color:#fff;padding:22px 16px;display:flex;flex-direction:column;gap:28px;position:sticky;top:0;height:100vh;z-index:30}
.brand{display:flex;align-items:center;gap:12px}.brand strong{display:block;font-size:15px}.brand small{display:block;color:rgba(255,255,255,.7);margin-top:3px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border:2px solid rgba(255,255,255,.85);border-radius:12px;font-weight:900;letter-spacing:-1px;background:rgba(255,255,255,.08)}.brand-mark.large{width:54px;height:54px;font-size:18px}
.nav{display:grid;gap:6px}.nav a{color:rgba(255,255,255,.82);text-decoration:none;padding:12px 14px;border-radius:12px;display:flex;gap:12px;align-items:center;font-weight:650}.nav a:hover,.nav a.is-active{background:rgba(255,255,255,.14);color:#fff}.authority-card{margin-top:auto;padding:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:16px;display:flex;align-items:center;gap:12px}.authority-card img,.authority-placeholder{width:52px;height:52px;border-radius:14px;object-fit:cover;background:#fff3;display:grid;place-items:center}.authority-card small{display:block;color:#d4edf9}
.workspace{min-width:0}.topbar{height:72px;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 26px;position:sticky;top:0;z-index:20}.topbar small{display:block;color:var(--muted);margin-top:2px}.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}.icon-btn,.ghost-link{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;padding:9px 11px;text-decoration:none;cursor:pointer}.menu-toggle{display:none}
.content{padding:26px;max-width:1480px;margin:auto}.footer{padding:18px 26px;color:var(--muted);font-size:13px;text-align:center}.hero-panel{background:linear-gradient(125deg,#075c8f,#0994bf);color:#fff;border-radius:24px;padding:28px;display:flex;justify-content:space-between;gap:20px;align-items:end;box-shadow:var(--shadow);overflow:hidden;position:relative}.hero-panel:after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.08);right:-80px;top:-120px}.hero-panel h1,.page-head h1{margin:4px 0 6px;font-size:clamp(28px,4vw,42px);line-height:1.05}.hero-panel p{max-width:720px;color:#e2f7ff;margin:0}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}.hero-panel .eyebrow{color:#bdeeff}.hero-status{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:11px 14px;border-radius:999px;white-space:nowrap;font-size:13px;z-index:1}.status-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:8px;background:var(--warn)}.status-dot.ok{background:#58e89b}.status-dot.warn{background:#ffd369}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:18px 0}.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:0 6px 18px rgba(6,60,102,.04)}.kpi span{color:var(--muted);font-weight:700;font-size:13px}.kpi strong{display:block;font-size:34px;margin-top:8px}.kpi strong small{font-size:16px;color:var(--muted);margin-left:4px}.kpi p{margin:4px 0 0;color:var(--muted);font-size:13px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}.panel.accent{background:linear-gradient(180deg,var(--surface),var(--sky))}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.panel h2{margin:4px 0 10px}.panel p{color:var(--muted);line-height:1.6}.progress{height:8px;background:var(--line);border-radius:99px;overflow:hidden}.progress span{height:100%;display:block;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:inherit}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:11px;padding:11px 15px;font-weight:800;text-decoration:none;cursor:pointer}.btn.primary{background:linear-gradient(135deg,var(--blue),#086ba3);border-color:transparent;color:#fff}.btn.danger{color:#fff;background:var(--danger);border-color:transparent}.btn.small{padding:8px 11px;font-size:13px}.btn.large{padding:14px 20px;font-size:16px}.btn:disabled{opacity:.45;cursor:not-allowed}
.page-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:4px 0 20px}.page-head p{color:var(--muted);margin:0}.count{font-size:14px;background:var(--sky);color:var(--blue);padding:6px 9px;border-radius:999px;vertical-align:middle}
.stack{display:grid;gap:14px}label{display:grid;gap:7px;font-size:13px;font-weight:750;color:var(--text)}input,textarea,select{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:11px;padding:11px 12px;font:inherit;outline:none}input:focus,textarea:focus,select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(23,164,200,.12)}.phone-field{display:flex;border:1px solid var(--line);border-radius:11px;overflow:hidden}.phone-field span{padding:11px;background:var(--sky);color:var(--blue)}.phone-field input{border:0;border-radius:0}.check-row{grid-template-columns:auto 1fr;align-items:start}.check-row input{width:auto;margin-top:3px}.muted{color:var(--muted);font-size:13px}.sticky-card{position:sticky;top:92px;align-self:start}
.contacts-layout{grid-template-columns:minmax(280px,380px) 1fr}.contact-list,.user-list{display:grid;gap:8px}.contact-row{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px}.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--sky);color:var(--blue);font-weight:900}.grow{min-width:0;flex:1}.grow strong,.grow small{display:block}.grow small{color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.badge{display:inline-flex;padding:6px 9px;border-radius:999px;background:var(--sky);font-size:12px;font-weight:800}.badge.success{background:#e3f8eb;color:#16864b}.badge.muted{background:#eef1f4;color:#71808c}.row-menu{position:relative}.row-menu summary{list-style:none;cursor:pointer;font-size:22px}.row-menu div{position:absolute;right:0;top:28px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);padding:6px;border-radius:10px;min-width:130px;z-index:5}.row-menu button{width:100%;border:0;background:transparent;text-align:left;padding:8px;cursor:pointer;color:var(--text)}.danger-link{color:var(--danger)!important}.search{max-width:220px}
.wa-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.wa-device{text-align:center;padding:28px}.wa-icon{width:84px;height:84px;margin:auto;border-radius:24px;display:grid;place-items:center;background:linear-gradient(135deg,#20b96b,#0d934f);color:#fff;font-size:42px;box-shadow:0 16px 30px rgba(18,158,86,.22)}.actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:20px}.qr-panel{text-align:center}.qr-box{min-height:300px;display:grid;place-items:center;border:1px dashed var(--line);border-radius:16px;background:var(--sky);padding:16px}.qr-box img{width:min(270px,100%);height:auto;background:#fff;padding:10px;border-radius:12px}.connected-mark{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:#e4f9ed;color:#159058;font-size:42px}
.composer{max-width:1050px}.type-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.type-tabs input{position:absolute;opacity:0}.type-tabs span{display:block;padding:10px 14px;border:1px solid var(--line);border-radius:999px;cursor:pointer}.type-tabs input:checked+span{background:var(--blue);color:#fff;border-color:var(--blue)}.composer-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}.upload-card{border:1px dashed var(--line);border-radius:16px;padding:18px;background:var(--sky)}.file-preview{margin-top:12px;color:var(--muted);font-size:13px}.send-summary{display:flex;gap:28px;margin:18px 0}.send-summary div{display:grid}.send-summary strong{font-size:28px}.send-summary span{color:var(--muted);font-size:12px}.progress-box{margin-top:20px}.progress-box strong{display:block;margin-top:12px}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;min-width:760px}.data-table th,.data-table td{text-align:left;padding:12px;border-bottom:1px solid var(--line)}.data-table th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.flash{padding:12px 14px;border-radius:12px;margin-bottom:12px}.flash.success{background:#e4f8ed;color:#137c45}.flash.danger{background:#ffe8e8;color:#a72d2d}.flash.info{background:#e7f5fb;color:#086a9d}.empty-state{padding:28px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:14px}
.toast-region{position:fixed;right:18px;bottom:18px;display:grid;gap:8px;z-index:999}.toast{background:#092f4a;color:#fff;padding:12px 14px;border-radius:12px;box-shadow:var(--shadow);max-width:360px}.toast.success{background:#157d49}.toast.danger{background:#a93434}
.auth-body{display:grid;place-items:center;padding:28px;background:linear-gradient(135deg,#063e68,#0a85b8 54%,#45bdd3)}.login-grid{width:min(1100px,100%);display:grid;grid-template-columns:1.2fr .8fr;border-radius:28px;overflow:hidden;box-shadow:0 30px 70px rgba(0,30,60,.25);background:#fff}.login-hero{padding:56px;color:#fff;background:linear-gradient(135deg,rgba(4,54,91,.96),rgba(7,130,180,.92));min-height:560px;display:flex;flex-direction:column;justify-content:center}.login-hero h1{font-size:clamp(38px,6vw,68px);line-height:.98;margin:12px 0 18px}.login-hero p{font-size:18px;max-width:620px;color:#dcf6ff}.hero-badge{display:inline-flex;align-self:flex-start;border:1px solid rgba(255,255,255,.3);padding:8px 12px;border-radius:999px}.hero-lines{display:grid;gap:12px;margin-top:28px}.hero-lines span:before{content:"✓";margin-right:10px;color:#72f1b4}.auth-card{background:#fff;color:#0b2c45;padding:44px;align-self:stretch;display:flex;flex-direction:column;justify-content:center}.auth-card .brand small{color:#658099}.auth-card h2,.auth-card h1{margin:22px 0}.auth-card code{background:#edf3f6;padding:2px 5px;border-radius:5px}
@media(max-width:980px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-290px;width:270px;transition:left .2s ease}.menu-open .sidebar{left:0}.menu-toggle{display:inline-flex}.kpi-grid{grid-template-columns:1fr 1fr}.two-col,.wa-grid,.composer-grid{grid-template-columns:1fr}.sticky-card{position:static}.login-grid{grid-template-columns:1fr}.login-hero{min-height:auto;padding:36px}.auth-card{padding:32px}.page-head{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.content{padding:16px}.topbar{padding:0 14px}.kpi-grid{grid-template-columns:1fr 1fr;gap:10px}.kpi{padding:14px}.kpi strong{font-size:28px}.hero-panel{padding:20px;align-items:flex-start;flex-direction:column}.hero-status{white-space:normal}.panel{padding:16px;border-radius:15px}.contact-row{align-items:flex-start}.badge{display:none}.send-summary{justify-content:space-between}.auth-body{padding:0}.login-grid{border-radius:0;min-height:100vh}.login-hero{display:none}.auth-card{padding:28px}.type-tabs{overflow:auto;flex-wrap:nowrap;padding-bottom:4px}.type-tabs span{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* ===== F05-LUX AUTHKIT MIDNIGHT START ===== */
/* =========================================================
   F05-LUX · AUTHKIT MIDNIGHT VISUAL SYSTEM
   Visual only. No endpoints, DB or business logic affected.
   ========================================================= */

:root{
  --lux-canvas:#05060f;
  --lux-deep:#080a14;
  --lux-steel:#2f343e;
  --lux-fog:#9da7ba;
  --lux-mist:#c7d3ea;
  --lux-frost:#d1e4fa;
  --lux-ice:#d8ecf8;
  --lux-white:#fff;
  --lux-violet:#663af3;
  --lux-blueprint:#b6d9fc;
  --lux-edge:rgba(186,215,247,.12);
  --lux-edge-strong:rgba(216,236,248,.22);
  --lux-fill:rgba(199,211,234,.06);
  --lux-fill-strong:rgba(199,211,234,.10);
  --lux-card:rgba(186,214,247,.035);
  --lux-card-deep:rgba(5,6,15,.88);
  --lux-danger:#ffb4c0;
  --lux-success:#b9f1dc;
  --lux-warning:#f4deb1;
  --lux-gradient:linear-gradient(180deg,#d8ecf8 0%,#98c0ef 100%);
  --lux-shadow:inset 0 1px 1px rgba(216,236,248,.16), inset 0 24px 48px rgba(168,216,245,.045), 0 24px 42px rgba(0,0,0,.34);
  --lux-shadow-soft:inset 0 0 0 1px var(--lux-edge), inset 0 16px 38px rgba(199,211,234,.035), 0 16px 34px rgba(0,0,0,.22);
  --lux-radius-card:16px;
  --lux-radius-input:6px;
  --lux-radius-pill:999px;
  --lux-font-ui:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --lux-font-display:"Space Grotesk",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --lux-font-mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;

  /* compatibility tokens used by existing markup */
  --surface:var(--lux-card-deep);
  --text:var(--lux-frost);
  --muted:var(--lux-fog);
  --line:var(--lux-edge);
  --sky:rgba(199,211,234,.055);
  --navy:#0a0d18;
  --blue:var(--lux-violet);
  --cyan:var(--lux-blueprint);
  --ok:var(--lux-success);
  --warn:var(--lux-warning);
  --danger:var(--lux-danger);
  --shadow:var(--lux-shadow-soft);
  --radius:var(--lux-radius-card);
}

html{
  font-family:var(--lux-font-ui);
  background:var(--lux-canvas);
  color:var(--lux-frost);
  color-scheme:dark;
  scroll-behavior:smooth;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --surface:var(--lux-card-deep);
  --text:var(--lux-frost);
  --muted:var(--lux-fog);
  --line:var(--lux-edge);
  --sky:rgba(199,211,234,.055);
}

/* Optional light mode keeps the same frosted language. */
html[data-theme="light"]{
  color-scheme:light;
  --lux-canvas:#eaf1f8;
  --lux-deep:#f8fbff;
  --lux-fog:#617087;
  --lux-mist:#43536a;
  --lux-frost:#18263b;
  --lux-ice:#0e1b2d;
  --lux-white:#07111e;
  --lux-edge:rgba(54,78,108,.14);
  --lux-edge-strong:rgba(54,78,108,.22);
  --lux-fill:rgba(42,66,96,.055);
  --lux-fill-strong:rgba(42,66,96,.10);
  --lux-card:rgba(255,255,255,.54);
  --lux-card-deep:rgba(250,253,255,.84);
  --lux-gradient:linear-gradient(180deg,#13233a 0%,#476d9a 100%);
  --lux-shadow:inset 0 1px 1px rgba(255,255,255,.78), inset 0 24px 48px rgba(255,255,255,.34), 0 24px 42px rgba(41,63,88,.12);
  --lux-shadow-soft:inset 0 0 0 1px rgba(54,78,108,.12), inset 0 16px 38px rgba(255,255,255,.34), 0 16px 34px rgba(41,63,88,.10);
  --surface:var(--lux-card-deep);
  --text:var(--lux-frost);
  --muted:var(--lux-fog);
  --line:var(--lux-edge);
  --sky:rgba(42,66,96,.055);
}

*{box-sizing:border-box}
::selection{background:rgba(102,58,243,.42);color:#fff}

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(900px 520px at 50% -8%,rgba(124,145,182,.24),transparent 62%),
    radial-gradient(680px 520px at 84% 18%,rgba(102,58,243,.08),transparent 70%),
    var(--lux-canvas);
  color:var(--text);
  position:relative;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.72;
  background-image:
    linear-gradient(rgba(186,215,247,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(186,215,247,.045) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(circle at 50% 28%,#000 0 44%,transparent 86%);
}

body::after{
  content:"";
  position:fixed;
  width:920px;
  height:520px;
  left:50%;
  top:-310px;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:0;
  background:radial-gradient(ellipse at center,rgba(181,210,244,.14),transparent 66%);
  filter:blur(8px);
}

.app-shell,.login-grid{position:relative;z-index:1}
a{color:var(--lux-frost)}

.skip-link{
  position:fixed;
  left:12px;
  top:-80px;
  z-index:9999;
  padding:10px 14px;
  border-radius:var(--lux-radius-pill);
  background:var(--lux-violet);
  color:#fff;
  text-decoration:none;
  transition:top .16s ease;
}
.skip-link:focus{top:12px}

/* Shell */
.app-shell{
  display:grid;
  grid-template-columns:268px minmax(0,1fr);
  min-height:100vh;
}

.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  z-index:40;
  display:flex;
  flex-direction:column;
  gap:26px;
  padding:22px 14px 18px;
  color:var(--lux-frost);
  background:rgba(5,6,15,.74);
  border-right:1px solid var(--lux-edge);
  box-shadow:inset -1px 0 rgba(216,236,248,.035),24px 0 80px rgba(0,0,0,.20);
  backdrop-filter:blur(28px) saturate(125%);
  -webkit-backdrop-filter:blur(28px) saturate(125%);
  overflow:hidden;
}

.sidebar::before{
  content:"";
  position:absolute;
  inset:-120px -120px auto -160px;
  height:330px;
  background:radial-gradient(circle,rgba(152,192,239,.11),transparent 68%);
  pointer-events:none;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
  z-index:1;
  padding:4px 6px;
}
.brand strong{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--lux-ice)}
.brand small{display:block;margin-top:4px;color:var(--lux-fog);font-size:12px}
.brand-mark{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  flex:0 0 44px;
  border:0;
  border-radius:14px;
  color:var(--lux-ice);
  font-weight:700;
  letter-spacing:-.04em;
  background:linear-gradient(145deg,rgba(216,236,248,.10),rgba(186,214,247,.025));
  box-shadow:inset 0 1px 1px rgba(216,236,248,.20),inset 0 0 0 1px var(--lux-edge),0 10px 30px rgba(0,0,0,.20);
}
.brand-mark.large{width:56px;height:56px;flex-basis:56px;border-radius:18px;font-size:18px}

.nav{display:grid;gap:6px;position:relative;z-index:1}
.nav a{
  min-height:46px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  border-radius:var(--lux-radius-pill);
  color:var(--lux-mist);
  text-decoration:none;
  font-weight:500;
  font-size:14px;
  background:transparent;
  box-shadow:inset 0 0 0 1px transparent;
  transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.nav a:hover{
  color:var(--lux-white);
  background:rgba(199,211,234,.055);
  box-shadow:inset 0 0 0 1px rgba(186,215,247,.08);
  transform:translateX(2px);
}
.nav a.is-active{
  color:var(--lux-white);
  background:linear-gradient(90deg,rgba(216,236,248,.10),rgba(199,211,234,.035));
  box-shadow:inset 0 1px 1px rgba(216,236,248,.16),inset 0 0 0 1px var(--lux-edge);
}
.nav a.is-active::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--lux-ice);
  box-shadow:0 0 10px rgba(186,207,247,.44);
}

.authority-card{
  margin-top:auto;
  padding:13px;
  display:flex;
  align-items:center;
  gap:11px;
  border:0;
  border-radius:var(--lux-radius-card);
  background:rgba(199,211,234,.035);
  box-shadow:inset 0 1px 1px rgba(216,236,248,.10),inset 0 0 0 1px var(--lux-edge);
  position:relative;
  z-index:1;
}
.authority-card img,.authority-placeholder{
  width:48px;height:48px;border-radius:50%;object-fit:cover;display:grid;place-items:center;
  background:rgba(199,211,234,.08);color:var(--lux-mist);
  box-shadow:inset 0 0 0 1px var(--lux-edge);
}
.authority-card strong{font-size:13px;font-weight:600;color:var(--lux-frost)}
.authority-card small{display:block;margin-top:3px;font-size:12px;color:var(--lux-fog)}

.workspace{min-width:0;position:relative;z-index:1}
.topbar{
  height:76px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 26px;
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(5,6,15,.68);
  border-bottom:1px solid var(--lux-edge);
  backdrop-filter:blur(24px) saturate(120%);
  -webkit-backdrop-filter:blur(24px) saturate(120%);
}
.topbar strong{font-size:14px;font-weight:600;color:var(--lux-ice)}
.topbar small{display:block;margin-top:3px;color:var(--lux-fog);font-size:12px}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}

.icon-btn,.ghost-link{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:var(--lux-radius-pill);
  padding:9px 13px;
  color:var(--lux-frost);
  background:rgba(199,211,234,.045);
  box-shadow:inset 0 0 0 1px var(--lux-edge),inset 0 1px 1px rgba(216,236,248,.10);
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.icon-btn:hover,.ghost-link:hover{background:rgba(199,211,234,.09);color:var(--lux-white);transform:translateY(-1px)}
.menu-toggle{display:none}

.content{padding:34px 28px 44px;max-width:1280px;margin:0 auto}
.footer{padding:18px 26px 28px;color:var(--lux-fog);font-size:12px;text-align:center;letter-spacing:.01em}

/* Typography */
h1,h2,h3{font-family:var(--lux-font-display);letter-spacing:-.025em}
.hero-panel h1,.page-head h1,.login-hero h1,.auth-card h1,.auth-card h2{
  background:var(--lux-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-panel h1,.page-head h1{margin:6px 0 8px;font-size:clamp(32px,4.3vw,48px);line-height:1.08;font-weight:500}
.panel h2{margin:4px 0 10px;color:var(--lux-ice);font-size:22px;font-weight:500}
.page-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:4px 0 26px}
.page-head p,.panel p{color:var(--lux-mist);line-height:1.65}
.page-head p{margin:0;max-width:760px}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--lux-font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.12em;
  line-height:1.2;
  text-transform:uppercase;
  color:var(--lux-mist);
}
.eyebrow::before{content:"";width:18px;height:1px;background:linear-gradient(90deg,transparent,var(--lux-edge-strong))}
.muted{color:var(--lux-fog);font-size:13px}
code{
  font-family:var(--lux-font-mono);
  color:var(--lux-frost);
  background:rgba(199,211,234,.07);
  box-shadow:inset 0 0 0 1px var(--lux-edge);
  padding:2px 6px;
  border-radius:5px;
}
.count{
  display:inline-flex;align-items:center;vertical-align:middle;padding:5px 9px;border-radius:var(--lux-radius-pill);
  font-family:var(--lux-font-ui);font-size:12px;color:var(--lux-frost);background:rgba(199,211,234,.065);box-shadow:inset 0 0 0 1px var(--lux-edge);
}

/* Hero */
.hero-panel{
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
  padding:30px;
  border-radius:22px;
  color:var(--lux-frost);
  background:linear-gradient(145deg,rgba(186,214,247,.055),rgba(5,6,15,.72));
  box-shadow:var(--lux-shadow);
}
.hero-panel::before{
  content:"";
  position:absolute;
  inset:-180px 12% auto;
  height:320px;
  background:radial-gradient(circle at 50% 50%,rgba(152,192,239,.18),transparent 64%);
  pointer-events:none;
}
.hero-panel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--lux-edge);
  pointer-events:none;
}
.hero-panel> *{position:relative;z-index:1}
.hero-panel p{max-width:760px;margin:0;color:var(--lux-mist);font-size:15px;line-height:1.65}
.hero-status{
  flex:0 0 auto;
  padding:10px 14px;
  border-radius:var(--lux-radius-pill);
  white-space:nowrap;
  font-size:12px;
  color:var(--lux-frost);
  background:rgba(199,211,234,.055);
  box-shadow:inset 0 0 0 1px var(--lux-edge),inset 0 1px 1px rgba(216,236,248,.10);
}
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;background:var(--lux-warning);box-shadow:0 0 12px rgba(244,222,177,.28)}
.status-dot.ok{background:var(--lux-success);box-shadow:0 0 12px rgba(185,241,220,.30)}
.status-dot.warn{background:var(--lux-warning)}

/* Cards and panels */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}
.kpi,.panel{
  border:0;
  border-radius:var(--lux-radius-card);
  background:linear-gradient(145deg,rgba(186,214,247,.04),rgba(5,6,15,.76));
  box-shadow:var(--lux-shadow-soft);
}
.kpi{padding:19px}
.kpi span{color:var(--lux-fog);font-weight:500;font-size:12px;letter-spacing:.015em}
.kpi strong{display:block;margin-top:10px;font-family:var(--lux-font-display);font-size:34px;font-weight:500;letter-spacing:-.04em;color:var(--lux-ice)}
.kpi strong small{font-size:14px;color:var(--lux-fog);margin-left:4px;font-family:var(--lux-font-ui)}
.kpi p{margin:5px 0 0;color:var(--lux-fog);font-size:12px}
.panel{padding:22px}
.panel.accent{background:linear-gradient(145deg,rgba(102,58,243,.08),rgba(186,214,247,.035),rgba(5,6,15,.78))}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sticky-card{position:sticky;top:102px;align-self:start}

.progress{height:7px;background:rgba(199,211,234,.08);border-radius:var(--lux-radius-pill);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(186,215,247,.07)}
.progress span{height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#98c0ef,#d8ecf8);box-shadow:0 0 12px rgba(186,207,247,.22)}

/* Buttons */
.btn{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:var(--lux-radius-pill);
  padding:10px 16px;
  font-family:var(--lux-font-ui);
  font-size:14px;
  font-weight:600;
  color:var(--lux-white);
  text-decoration:none;
  cursor:pointer;
  background:rgba(199,211,234,.055);
  box-shadow:inset 0 0 0 1px var(--lux-edge),inset 0 1px 1px rgba(216,236,248,.10);
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease,opacity .16s ease;
}
.btn:hover{transform:translateY(-1px);background:rgba(199,211,234,.10);box-shadow:inset 0 0 0 1px var(--lux-edge-strong),0 8px 22px rgba(0,0,0,.16)}
.btn.primary{
  color:#fff;
  background:linear-gradient(180deg,#7048f6,#5b31e8);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.20),inset 0 0 0 1px rgba(255,255,255,.08),0 10px 28px rgba(102,58,243,.24);
}
.btn.primary:hover{background:linear-gradient(180deg,#7953f8,#6339eb);box-shadow:inset 0 1px 1px rgba(255,255,255,.24),0 12px 32px rgba(102,58,243,.31)}
.btn.danger{color:var(--lux-danger);background:rgba(255,180,192,.055);box-shadow:inset 0 0 0 1px rgba(255,180,192,.16)}
.btn.small{min-height:34px;padding:8px 13px;font-size:12px}
.btn.large{min-height:46px;padding:12px 20px;font-size:15px}
.btn:disabled{opacity:.36;cursor:not-allowed;transform:none;filter:saturate(.65)}

/* Forms */
.stack{display:grid;gap:14px}
label{display:grid;gap:7px;color:var(--lux-mist);font-size:12px;font-weight:600;letter-spacing:.005em}
input,textarea,select{
  width:100%;
  border:0;
  border-radius:var(--lux-radius-input);
  padding:11px 12px;
  font:inherit;
  color:var(--lux-white);
  background:rgba(199,211,234,.055);
  box-shadow:inset 0 0 0 1px var(--lux-edge),inset 0 1px 1px rgba(216,236,248,.06);
  outline:none;
  transition:box-shadow .16s ease,background .16s ease;
}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--lux-mist) 58%,transparent)}
input:hover,textarea:hover,select:hover{background:rgba(199,211,234,.075)}
input:focus,textarea:focus,select:focus{
  box-shadow:inset 0 0 0 1px rgba(186,215,247,.28),0 0 0 3px rgba(102,58,243,.13),0 0 22px rgba(186,207,247,.08);
  background:rgba(199,211,234,.075);
}
textarea{resize:vertical;min-height:110px}
select option{background:#0b0d18;color:#eef7ff}
input[type="checkbox"],input[type="radio"]{accent-color:var(--lux-violet)}
input[type="file"]::file-selector-button{
  border:0;border-radius:var(--lux-radius-pill);padding:8px 12px;margin-right:10px;color:var(--lux-frost);background:rgba(199,211,234,.09);box-shadow:inset 0 0 0 1px var(--lux-edge);cursor:pointer
}
.phone-field{display:flex;overflow:hidden;border:0;border-radius:var(--lux-radius-input);background:rgba(199,211,234,.055);box-shadow:inset 0 0 0 1px var(--lux-edge)}
.phone-field span{display:grid;place-items:center;padding:0 12px;color:var(--lux-mist);background:rgba(199,211,234,.04);border-right:1px solid var(--lux-edge)}
.phone-field input{border-radius:0;background:transparent;box-shadow:none}
.check-row{grid-template-columns:auto 1fr;align-items:start;gap:10px}
.check-row input{width:auto;margin-top:3px}
.search{max-width:230px}

/* Contacts / lists */
.contacts-layout{grid-template-columns:minmax(290px,380px) 1fr}
.contact-list,.user-list{display:grid;gap:8px}
.contact-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border:0;
  border-radius:14px;
  background:rgba(199,211,234,.028);
  box-shadow:inset 0 0 0 1px rgba(186,215,247,.075);
  transition:background .16s ease,transform .16s ease,box-shadow .16s ease;
}
.contact-row:hover{background:rgba(199,211,234,.055);transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--lux-edge),0 8px 24px rgba(0,0,0,.12)}
.avatar{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:0 0 42px;
  color:var(--lux-frost);font-weight:700;background:rgba(199,211,234,.07);box-shadow:inset 0 0 0 1px var(--lux-edge)
}
.grow{min-width:0;flex:1}.grow strong,.grow small{display:block}.grow strong{color:var(--lux-frost);font-weight:600}.grow small{margin-top:4px;color:var(--lux-fog);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{
  display:inline-flex;align-items:center;padding:5px 8px;border-radius:6px;background:rgba(199,211,234,.08);color:var(--lux-mist);font-size:11px;font-weight:600;box-shadow:inset 0 0 0 1px var(--lux-edge)
}
.badge.success{background:rgba(185,241,220,.055);color:var(--lux-success);box-shadow:inset 0 0 0 1px rgba(185,241,220,.15)}
.badge.muted{background:rgba(199,211,234,.045);color:var(--lux-fog)}
.row-menu{position:relative}.row-menu summary{list-style:none;cursor:pointer;color:var(--lux-mist);font-size:22px}.row-menu summary::-webkit-details-marker{display:none}
.row-menu div{
  position:absolute;right:0;top:30px;z-index:15;min-width:150px;padding:6px;border-radius:12px;background:rgba(5,6,15,.96);box-shadow:var(--lux-shadow);backdrop-filter:blur(22px)
}
.row-menu button{width:100%;border:0;border-radius:8px;background:transparent;text-align:left;padding:9px 10px;cursor:pointer;color:var(--lux-frost)}
.row-menu button:hover{background:rgba(199,211,234,.07)}
.danger-link{color:var(--lux-danger)!important}

/* WhatsApp */
.wa-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.wa-device{text-align:center;padding:30px}
.wa-icon{
  width:86px;height:86px;margin:auto;border-radius:50%;display:grid;place-items:center;
  color:var(--lux-ice);font-size:40px;background:radial-gradient(circle at 35% 30%,rgba(216,236,248,.15),rgba(199,211,234,.045) 58%,rgba(5,6,15,.72));
  box-shadow:inset 0 1px 1px rgba(216,236,248,.20),inset 0 0 0 1px var(--lux-edge),0 0 42px rgba(186,207,247,.10)
}
.wa-device h2,#waState{color:var(--lux-ice)}
.actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:20px}
.qr-panel{text-align:center}
.qr-box{
  min-height:310px;display:grid;place-items:center;padding:18px;border:0;border-radius:var(--lux-radius-card);
  color:var(--lux-mist);background:rgba(199,211,234,.028);box-shadow:inset 0 0 0 1px var(--lux-edge),inset 0 24px 60px rgba(199,211,234,.025)
}
.qr-box img{width:min(276px,100%);height:auto;padding:13px;border-radius:14px;background:#fff;box-shadow:0 18px 48px rgba(0,0,0,.32)}
.connected-mark{
  width:84px;height:84px;border-radius:50%;display:grid;place-items:center;margin:auto;
  background:rgba(216,236,248,.07);color:var(--lux-ice);font-size:38px;box-shadow:inset 0 0 0 1px var(--lux-edge),0 0 34px rgba(186,207,247,.12)
}

/* Composer */
.composer{max-width:1100px}
.type-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.type-tabs label{display:block}
.type-tabs input{position:absolute;opacity:0;pointer-events:none}
.type-tabs span{
  display:block;padding:9px 14px;border:0;border-radius:var(--lux-radius-pill);cursor:pointer;color:var(--lux-mist);background:rgba(199,211,234,.045);box-shadow:inset 0 0 0 1px var(--lux-edge);transition:.16s ease
}
.type-tabs span:hover{color:var(--lux-white);background:rgba(199,211,234,.075)}
.type-tabs input:checked+span{color:#fff;background:linear-gradient(180deg,#7048f6,#5b31e8);box-shadow:inset 0 1px 1px rgba(255,255,255,.18),0 8px 20px rgba(102,58,243,.20)}
.composer-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}
.upload-card{
  border:0;border-radius:var(--lux-radius-card);padding:18px;background:rgba(199,211,234,.03);box-shadow:inset 0 0 0 1px var(--lux-edge),inset 0 24px 48px rgba(199,211,234,.025)
}
.file-preview{margin-top:12px;color:var(--lux-fog);font-size:12px;line-height:1.5}
.send-summary{display:flex;gap:30px;margin:20px 0}
.send-summary div{display:grid}.send-summary strong{font-family:var(--lux-font-display);font-size:30px;font-weight:500;color:var(--lux-ice)}.send-summary span{color:var(--lux-fog);font-size:11px;max-width:160px}
.progress-box{margin-top:20px;padding-top:18px;border-top:1px solid var(--lux-edge)}.progress-box strong{display:block;margin-top:12px;color:var(--lux-frost)}

/* Tables */
.table-wrap{overflow:auto}
.data-table{width:100%;border-collapse:separate;border-spacing:0;min-width:760px}
.data-table th,.data-table td{text-align:left;padding:14px 13px;border-bottom:1px solid rgba(186,215,247,.08);vertical-align:top}
.data-table th{font-family:var(--lux-font-mono);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.10em;color:var(--lux-fog)}
.data-table td{color:var(--lux-mist);font-size:13px}
.data-table tbody tr{transition:background .14s ease}.data-table tbody tr:hover{background:rgba(199,211,234,.026)}
.data-table details summary{cursor:pointer;color:var(--lux-frost);font-weight:500}
.data-table details>div>div{background:rgba(199,211,234,.026)!important;border-color:var(--lux-edge)!important}

/* Feedback */
.flash{
  padding:12px 14px;border-radius:12px;margin-bottom:12px;background:rgba(199,211,234,.05);color:var(--lux-frost);box-shadow:inset 0 0 0 1px var(--lux-edge)
}
.flash.success{background:rgba(185,241,220,.055);color:var(--lux-success);box-shadow:inset 0 0 0 1px rgba(185,241,220,.14)}
.flash.danger{background:rgba(255,180,192,.055);color:var(--lux-danger);box-shadow:inset 0 0 0 1px rgba(255,180,192,.14)}
.flash.info{background:rgba(182,217,252,.055);color:var(--lux-blueprint)}
.empty-state{padding:30px;text-align:center;color:var(--lux-fog);border:0;border-radius:14px;background:rgba(199,211,234,.025);box-shadow:inset 0 0 0 1px var(--lux-edge)}
.toast-region{position:fixed;right:18px;bottom:18px;display:grid;gap:8px;z-index:9999}
.toast{
  max-width:380px;padding:12px 14px;border-radius:12px;color:var(--lux-frost);background:rgba(5,6,15,.94);box-shadow:var(--lux-shadow);backdrop-filter:blur(22px)
}
.toast.success{background:rgba(8,20,18,.94);color:var(--lux-success)}
.toast.danger{background:rgba(27,8,13,.94);color:var(--lux-danger)}

/* Login */
.auth-body{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px;
  background:
    radial-gradient(900px 520px at 50% -8%,rgba(124,145,182,.28),transparent 62%),
    radial-gradient(560px 440px at 20% 70%,rgba(102,58,243,.08),transparent 72%),
    var(--lux-canvas);
}
.login-grid{
  width:min(1120px,100%);
  display:grid;
  grid-template-columns:1.15fr .85fr;
  overflow:hidden;
  border-radius:24px;
  background:rgba(5,6,15,.62);
  box-shadow:inset 0 1px 1px rgba(216,236,248,.16),inset 0 0 0 1px var(--lux-edge),0 34px 90px rgba(0,0,0,.42);
  backdrop-filter:blur(26px);
}
.login-hero{
  min-height:580px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:58px;
  color:var(--lux-frost);
  background:
    radial-gradient(500px 380px at 50% 18%,rgba(152,192,239,.13),transparent 65%),
    linear-gradient(145deg,rgba(186,214,247,.035),rgba(5,6,15,.32));
  border-right:1px solid var(--lux-edge);
}
.login-hero h1{font-size:clamp(42px,6vw,72px);font-weight:500;line-height:.98;margin:16px 0 20px;letter-spacing:-.045em}
.login-hero p{max-width:620px;color:var(--lux-mist);font-size:17px;line-height:1.65}
.hero-badge{
  display:inline-flex;align-self:flex-start;padding:7px 11px;border:0;border-radius:6px;color:var(--lux-mist);background:rgba(199,211,234,.065);box-shadow:inset 0 0 0 1px var(--lux-edge);font-family:var(--lux-font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase
}
.hero-lines{display:grid;gap:13px;margin-top:28px;color:var(--lux-mist);font-size:13px}
.hero-lines span::before{content:"✦";margin-right:10px;color:var(--lux-ice)}
.auth-card{
  align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:46px;
  background:rgba(5,6,15,.88);color:var(--lux-frost)
}
.auth-card h2,.auth-card h1{margin:24px 0 18px;font-size:34px;font-weight:500}
.auth-card .brand small{color:var(--lux-fog)}
.auth-card .btn.primary{width:100%;border-radius:6px;min-height:46px}

/* Accessibility */
:focus-visible{outline:2px solid rgba(216,236,248,.72);outline-offset:3px}
[hidden]{display:none!important}

/* Subtle entrance only; no continuous motion. */
@keyframes lux-fade-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.hero-panel,.kpi,.panel{animation:lux-fade-in .38s ease both}
.kpi:nth-child(2){animation-delay:.035s}.kpi:nth-child(3){animation-delay:.07s}.kpi:nth-child(4){animation-delay:.105s}

/* Responsive */
@media(max-width:980px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:-292px;width:272px;transition:left .22s ease;box-shadow:24px 0 60px rgba(0,0,0,.42)}
  .menu-open .sidebar{left:0}
  .menu-toggle{display:inline-flex}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .two-col,.wa-grid,.composer-grid{grid-template-columns:1fr}
  .sticky-card{position:static}
  .login-grid{grid-template-columns:1fr;max-width:660px}
  .login-hero{min-height:auto;padding:38px;border-right:0;border-bottom:1px solid var(--lux-edge)}
  .login-hero h1{font-size:clamp(36px,8vw,54px)}
  .auth-card{padding:36px}
  .page-head{align-items:flex-start;flex-direction:column}
}

@media(max-width:600px){
  body::before{background-size:56px 56px;opacity:.5}
  .content{padding:20px 14px 32px}
  .topbar{height:66px;padding:0 12px}
  .topbar>div:nth-child(2){min-width:0}.topbar>div:nth-child(2) strong,.topbar>div:nth-child(2) small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
  .kpi-grid{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:15px}.kpi strong{font-size:28px}
  .hero-panel{padding:22px;align-items:flex-start;flex-direction:column;border-radius:18px}
  .hero-panel h1,.page-head h1{font-size:34px}
  .hero-status{white-space:normal}
  .panel{padding:17px;border-radius:14px}
  .panel-head{align-items:flex-start;flex-direction:column}
  .contact-row{align-items:flex-start}
  .badge{display:none}
  .send-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .send-summary strong{font-size:24px}.send-summary span{font-size:10px}
  .auth-body{padding:0}
  .login-grid{border-radius:0;min-height:100vh;box-shadow:none}
  .login-hero{display:none}
  .auth-card{padding:28px 22px}
  .type-tabs{overflow:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none}
  .type-tabs::-webkit-scrollbar{display:none}
  .type-tabs span{white-space:nowrap}
  .actions{justify-content:flex-start}
  .search{max-width:none;width:100%}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Scrollbars */
*{scrollbar-width:thin;scrollbar-color:rgba(199,211,234,.18) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(199,211,234,.14);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(199,211,234,.24);border:2px solid transparent;background-clip:padding-box}

/* ===== F06-B2 CONTACT GROUPS START ===== */

.groups-page-head{
    align-items:flex-end;
}

.groups-head-summary{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-end;
}

.groups-head-summary span{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 13px;
    border:1px solid rgba(186,215,247,.12);
    border-radius:999px;
    background:rgba(186,214,247,.035);
    color:var(--lux-text,#d1e4fa);
    font-size:.82rem;
    font-weight:700;
}

.contact-metrics{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-bottom:18px;
}

.contact-metric{
    position:relative;
    overflow:hidden;
    min-height:122px;
    padding:18px;
    border:1px solid rgba(186,215,247,.12);
    border-radius:16px;
    background:
        linear-gradient(
            145deg,
            rgba(186,214,247,.055),
            rgba(186,214,247,.018)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035);
}

.contact-metric::after{
    content:"";
    position:absolute;
    width:90px;
    height:90px;
    right:-35px;
    top:-40px;
    border-radius:50%;
    background:rgba(102,58,243,.12);
    filter:blur(28px);
    pointer-events:none;
}

.contact-metric > span{
    display:block;
    color:var(--lux-muted,#9db0ca);
    font-size:.76rem;
    text-transform:uppercase;
    letter-spacing:.09em;
    font-weight:800;
}

.contact-metric strong{
    display:block;
    margin-top:8px;
    color:var(--lux-text,#d8ecf8);
    font-size:2rem;
    line-height:1;
}

.contact-metric small{
    display:block;
    margin-top:9px;
    color:var(--lux-muted,#9db0ca);
}

.group-manager{
    margin-bottom:18px;
}

.group-create{
    position:relative;
}

.group-create > summary{
    list-style:none;
    cursor:pointer;
}

.group-create > summary::-webkit-details-marker{
    display:none;
}

.group-create[open] .group-create-form{
    display:grid;
}

.group-create-form{
    position:absolute;
    z-index:20;
    top:calc(100% + 10px);
    right:0;
    width:min(340px,calc(100vw - 48px));
    padding:16px;
    gap:12px;
    border:1px solid rgba(186,215,247,.14);
    border-radius:16px;
    background:rgba(7,10,22,.97);
    box-shadow:
        0 24px 60px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter:blur(22px);
}

.group-filter-grid{
    display:grid;
    grid-template-columns:repeat(
        auto-fill,
        minmax(190px,1fr)
    );
    gap:10px;
}

.group-filter-card,
.group-card{
    min-height:76px;
    border:1px solid rgba(186,215,247,.1);
    border-radius:14px;
    background:rgba(186,214,247,.025);
    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.group-filter-card{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    text-decoration:none;
    color:inherit;
}

.group-card{
    display:flex;
    align-items:stretch;
}

.group-filter-card:hover,
.group-card:hover{
    border-color:rgba(186,215,247,.22);
    background:rgba(186,214,247,.05);
}

.group-filter-card.is-selected,
.group-card.is-selected{
    border-color:rgba(102,58,243,.48);
    background:rgba(102,58,243,.1);
    box-shadow:
        inset 0 0 0 1px rgba(102,58,243,.12);
}

.group-card-main{
    display:flex;
    align-items:center;
    gap:12px;
    flex:1;
    min-width:0;
    padding:14px;
    color:inherit;
    text-decoration:none;
}

.group-card-copy{
    min-width:0;
}

.group-card-copy strong,
.group-card-copy small{
    display:block;
}

.group-card-copy strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.group-card-copy small{
    margin-top:4px;
    color:var(--lux-muted,#9db0ca);
}

.group-color{
    --group-color:#663AF3;
    display:inline-block;
    width:12px;
    height:12px;
    flex:0 0 12px;
    border-radius:999px;
    background:var(--group-color);
    box-shadow:
        0 0 0 4px
        color-mix(
            in srgb,
            var(--group-color) 17%,
            transparent
        );
}

.group-color.all{
    background:
        linear-gradient(
            135deg,
            #663af3 0 33%,
            #14b8a6 33% 66%,
            #f59e0b 66%
        );
}

.group-actions{
    position:relative;
    display:flex;
    align-items:center;
}

.group-actions > summary{
    display:grid;
    place-items:center;
    width:42px;
    min-height:100%;
    cursor:pointer;
    list-style:none;
    border-left:1px solid rgba(186,215,247,.08);
    font-size:1.25rem;
}

.group-actions > summary::-webkit-details-marker{
    display:none;
}

.group-actions[open]{
    z-index:30;
}

.group-actions[open]::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
}

.group-actions > form{
    display:none;
}

.group-actions[open] > form{
    display:grid;
}

.group-edit-form{
    position:absolute;
    z-index:31;
    top:calc(100% + 8px);
    right:0;
    width:280px;
    padding:14px;
    gap:10px;
    border:1px solid rgba(186,215,247,.14);
    border-radius:14px;
    background:rgba(7,10,22,.98);
    box-shadow:0 20px 50px rgba(0,0,0,.4);
}

.group-actions[open] > form:last-child{
    position:absolute;
    z-index:32;
    top:calc(100% + 190px);
    right:0;
    width:280px;
    padding:10px 14px 14px;
    background:rgba(7,10,22,.98);
    border:
        1px solid rgba(186,215,247,.14);
    border-top:0;
    border-radius:0 0 14px 14px;
}

.archived-groups{
    margin-top:14px;
}

.archived-groups > summary{
    cursor:pointer;
    color:var(--lux-muted,#9db0ca);
    font-weight:700;
}

.archived-group-list{
    display:grid;
    gap:8px;
    margin-top:10px;
}

.archived-group{
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 12px;
    border:1px solid rgba(186,215,247,.08);
    border-radius:12px;
    background:rgba(186,214,247,.02);
}

.contacts-workspace{
    display:grid;
    grid-template-columns:minmax(290px,.78fr) minmax(0,1.65fr);
    gap:16px;
    align-items:start;
}

.contact-create-panel{
    position:sticky;
    top:18px;
}

.group-check-fieldset{
    min-width:0;
    margin:0;
    padding:0;
    border:0;
}

.group-check-fieldset legend{
    margin-bottom:8px;
    font-weight:800;
}

.group-check-list{
    display:grid;
    gap:7px;
}

.group-check{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    padding:10px;
    cursor:pointer;
    border:1px solid rgba(186,215,247,.09);
    border-radius:11px;
    background:rgba(186,214,247,.025);
}

.group-check:hover{
    border-color:rgba(186,215,247,.2);
}

.group-check input{
    width:auto;
    flex:0 0 auto;
}

.group-check small{
    display:block;
    color:var(--lux-muted,#9db0ca);
}

.group-check.is-full{
    opacity:.55;
}

.group-check-list.compact{
    max-height:250px;
    overflow:auto;
}

.contact-list-head{
    gap:16px;
}

.contact-list-head .search{
    width:min(330px,100%);
}

.enhanced-contact-list{
    display:grid;
    gap:10px;
}

.contact-row-rich{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:13px;
    padding:14px;
    border:1px solid rgba(186,215,247,.085);
    border-radius:14px;
    background:rgba(186,214,247,.02);
}

.contact-row-rich:hover{
    border-color:rgba(186,215,247,.18);
    background:rgba(186,214,247,.035);
}

.contact-row-rich.is-blocked{
    border-color:rgba(239,68,68,.16);
    background:rgba(239,68,68,.035);
}

.contact-main{
    min-width:0;
}

.contact-name-line{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}

.contact-phone{
    display:block;
    margin-top:3px;
    color:var(--lux-muted,#9db0ca);
}

.contact-group-badges{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:9px;
}

.contact-group-badge{
    --group-color:#663AF3;
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:25px;
    padding:0 8px;
    border:
        1px solid
        color-mix(
            in srgb,
            var(--group-color) 38%,
            transparent
        );
    border-radius:999px;
    background:
        color-mix(
            in srgb,
            var(--group-color) 10%,
            transparent
        );
    font-size:.72rem;
    font-weight:750;
}

.contact-group-badge i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--group-color);
}

.contact-actions-rich{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
}

.contact-actions-rich form{
    margin:0;
}

.contact-group-editor{
    position:relative;
}

.contact-group-editor > summary{
    list-style:none;
    cursor:pointer;
}

.contact-group-editor > summary::-webkit-details-marker{
    display:none;
}

.contact-group-form{
    position:absolute;
    z-index:40;
    top:calc(100% + 7px);
    right:0;
    display:grid;
    width:min(330px,calc(100vw - 50px));
    gap:10px;
    padding:14px;
    border:1px solid rgba(186,215,247,.14);
    border-radius:14px;
    background:rgba(7,10,22,.98);
    box-shadow:0 22px 55px rgba(0,0,0,.42);
    backdrop-filter:blur(22px);
}

.contact-group-editor:not([open])
.contact-group-form{
    display:none;
}

.badge.danger{
    border-color:rgba(239,68,68,.25);
    background:rgba(239,68,68,.1);
    color:#fecaca;
}

@media (max-width:1100px){

    .contact-metrics{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .contacts-workspace{
        grid-template-columns:1fr;
    }

    .contact-create-panel{
        position:static;
    }
}

@media (max-width:720px){

    .groups-page-head{
        align-items:flex-start;
    }

    .groups-head-summary{
        justify-content:flex-start;
    }

    .contact-metrics{
        grid-template-columns:1fr 1fr;
    }

    .group-filter-grid{
        grid-template-columns:1fr;
    }

    .contact-list-head{
        align-items:stretch;
        flex-direction:column;
    }

    .contact-list-head .search{
        width:100%;
    }

    .contact-row-rich{
        grid-template-columns:auto minmax(0,1fr);
        align-items:start;
    }

    .contact-actions-rich{
        grid-column:1 / -1;
        justify-content:flex-start;
        padding-top:5px;
    }

    .contact-group-form{
        left:0;
        right:auto;
    }

    .group-create-form{
        left:0;
        right:auto;
    }
}

@media (max-width:480px){

    .contact-metrics{
        grid-template-columns:1fr;
    }

    .contact-row-rich{
        padding:12px;
    }

    .contact-actions-rich{
        display:grid;
        grid-template-columns:1fr 1fr;
        width:100%;
    }

    .contact-actions-rich > *,
    .contact-actions-rich button,
    .contact-actions-rich .btn{
        width:100%;
    }
}

/* ===== F06-B2 CONTACT GROUPS END ===== */

/* =========================================================
   F06-B3 GROUP COMPOSER
   ========================================================= */

.campaign-group-picker{
  display:grid;
  gap:14px;
  padding:16px;
  border:1px solid var(--border,rgba(148,163,184,.18));
  border-radius:14px;
  background:rgba(255,255,255,.025);
}

.campaign-group-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.campaign-group-toolbar small{
  display:block;
  margin-top:4px;
}

.campaign-group-count{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:8px 12px;
  border:1px solid var(--border,rgba(148,163,184,.18));
  border-radius:10px;
  background:rgba(255,255,255,.025);
}

.campaign-group-dot{
  --campaign-group-color:#663AF3;
  width:10px;
  height:10px;
  flex:0 0 10px;
  border-radius:999px;
  background:var(--campaign-group-color);
  box-shadow:0 0 0 4px color-mix(
    in srgb,
    var(--campaign-group-color) 18%,
    transparent
  );
}

.campaign-group-members{
  display:block;
}

.campaign-group-member-set{
  display:grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(220px,1fr)
    );
  gap:9px;
}

.campaign-member-option{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:11px 12px;
  border:1px solid var(--border,rgba(148,163,184,.18));
  border-radius:12px;
  background:rgba(255,255,255,.025);
  cursor:pointer;
  transition:
    border-color .16s ease,
    background .16s ease,
    transform .16s ease;
}

.campaign-member-option:hover{
  border-color:rgba(148,163,184,.38);
  background:rgba(255,255,255,.045);
}

.campaign-member-option:has(input:checked){
  border-color:rgba(102,58,243,.52);
  background:rgba(102,58,243,.08);
}

.campaign-member-option input{
  flex:0 0 auto;
}

.campaign-member-avatar{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:10px;
  font-size:.82rem;
  font-weight:800;
  background:rgba(102,58,243,.14);
  border:1px solid rgba(102,58,243,.24);
}

.campaign-member-option strong,
.campaign-member-option small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.campaign-member-option small{
  margin-top:2px;
  opacity:.72;
}

@media (max-width:720px){

  .campaign-group-picker{
    padding:13px;
  }

  .campaign-group-toolbar{
    align-items:stretch;
  }

  .campaign-group-toolbar .actions{
    width:100%;
  }

  .campaign-group-toolbar .actions .btn{
    flex:1;
  }

  .campaign-group-member-set{
    grid-template-columns:1fr;
  }

}

@media (prefers-reduced-motion:reduce){

  .campaign-member-option{
    transition:none;
  }

}

/* ===== F06-B3-R1 PREMIUM CONTACTS START ===== */

:root{
  --f06-primary:#087fb9;
  --f06-violet:#663af3;
  --f06-success:#16a36a;
  --f06-danger:#dc4f5d;
  --f06-warning:#e59a2d;

  --f06-surface:
    rgba(255,255,255,.78);

  --f06-surface-strong:
    rgba(255,255,255,.94);

  --f06-border:
    rgba(30,102,144,.13);

  --f06-border-strong:
    rgba(30,102,144,.22);

  --f06-text:#082d4b;
  --f06-muted:#68869e;

  --f06-shadow:
    0 18px 46px
    rgba(34,90,122,.075);
}

html[data-theme="dark"]{
  --f06-surface:
    rgba(186,214,247,.035);

  --f06-surface-strong:
    rgba(12,18,34,.90);

  --f06-border:
    rgba(186,215,247,.12);

  --f06-border-strong:
    rgba(186,215,247,.22);

  --f06-text:#d8ecf8;
  --f06-muted:#95abc5;

  --f06-shadow:
    0 20px 54px
    rgba(0,0,0,.20);
}


/* ---------------------------------------------------------
   Evitar que una regla visual anule el atributo hidden
   --------------------------------------------------------- */

#singleContactWrap[hidden],
#groupRecipientWrap[hidden],
.campaign-group-member-set[hidden]{
  display:none !important;
}


/* =========================================================
   COMUNICACIONES · GRUPO
   ========================================================= */

#groupRecipientWrap{
  margin-top:4px;
  padding:20px;
  border:
    1px solid
    var(--f06-border-strong);
  border-radius:18px;
  background:
    linear-gradient(
      145deg,
      var(--f06-surface-strong),
      var(--f06-surface)
    );
  box-shadow:
    var(--f06-shadow);
}

#groupRecipientWrap > label{
  display:grid;
  gap:8px;
  font-size:.92rem;
  font-weight:800;
  color:var(--f06-text);
}

#campaignGroupSelect{
  width:100%;
  min-height:50px;
  border:
    1px solid
    var(--f06-border-strong);
  border-radius:12px;
  padding:0 14px;
  font-size:.95rem;
  font-weight:700;
  background:
    var(--f06-surface-strong);
  color:var(--f06-text);
}

.campaign-selected-group-banner{
  display:grid;
  grid-template-columns:
    auto
    minmax(0,1fr)
    auto;
  align-items:center;
  gap:13px;
  min-height:72px;
  margin-top:12px;
  padding:13px 15px;
  border:
    1px solid
    var(--f06-border);
  border-radius:14px;
  background:
    rgba(102,58,243,.055);
}

.campaign-selected-group-dot{
  --selected-group-color:#663af3;
  width:15px;
  height:15px;
  border-radius:999px;
  background:
    var(--selected-group-color);
  box-shadow:
    0 0 0 6px
    color-mix(
      in srgb,
      var(--selected-group-color) 14%,
      transparent
    );
}

.campaign-selected-group-copy{
  display:grid;
  gap:2px;
  min-width:0;
}

.campaign-selected-group-copy small{
  color:var(--f06-muted);
  font-size:.67rem;
  font-weight:850;
  letter-spacing:.11em;
}

.campaign-selected-group-copy strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--f06-text);
  font-size:1.08rem;
}

.campaign-selected-group-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:62px;
  min-height:34px;
  padding:0 11px;
  border-radius:999px;
  background:
    rgba(102,58,243,.10);
  color:var(--f06-violet);
  font-weight:850;
}

.campaign-group-toolbar{
  margin-top:16px;
  padding-top:15px;
  border-top:
    1px solid
    var(--f06-border);
}

.campaign-group-count{
  margin-top:10px;
  border-radius:12px !important;
}

.campaign-group-member-set{
  margin-top:10px;
}

.campaign-member-option{
  min-height:66px;
  border-radius:13px !important;
  background:
    var(--f06-surface);
}

.campaign-member-option:has(input:checked){
  box-shadow:
    inset 0 0 0 1px
    rgba(102,58,243,.20);
}


/* =========================================================
   CONTACTOS · HEADER
   ========================================================= */

.groups-page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:18px;
}

.groups-page-head h1{
  margin-bottom:6px;
}

.groups-head-summary{
  display:flex !important;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}

.groups-head-summary span{
  display:inline-flex !important;
  align-items:center;
  min-height:36px;
  padding:0 14px;
  border:
    1px solid
    var(--f06-border);
  border-radius:999px;
  background:
    var(--f06-surface);
  color:
    var(--f06-text);
  font-size:.79rem;
  font-weight:800;
}


/* =========================================================
   CONTACTOS · MÉTRICAS
   ========================================================= */

.contact-metrics{
  display:grid !important;
  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );
  gap:12px;
  margin:
    0
    0
    18px;
}

.contact-metric{
  display:block !important;
  position:relative;
  min-height:126px;
  overflow:hidden;
  padding:18px;
  border:
    1px solid
    var(--f06-border);
  border-radius:16px;
  background:
    linear-gradient(
      145deg,
      var(--f06-surface-strong),
      var(--f06-surface)
    );
  box-shadow:
    var(--f06-shadow);
}

.contact-metric::after{
  content:"";
  position:absolute;
  right:-42px;
  top:-52px;
  width:105px;
  height:105px;
  border-radius:50%;
  background:
    rgba(102,58,243,.10);
  filter:blur(28px);
}

.contact-metric > span{
  position:relative;
  z-index:1;
  display:block !important;
  color:
    var(--f06-muted);
  font-size:.71rem;
  font-weight:850;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.contact-metric strong{
  position:relative;
  z-index:1;
  display:block !important;
  margin-top:8px;
  color:
    var(--f06-text);
  font-size:2rem;
  line-height:1;
}

.contact-metric small{
  position:relative;
  z-index:1;
  display:block !important;
  margin-top:10px;
  color:
    var(--f06-muted);
}


/* =========================================================
   CONTACTOS · GRUPOS
   ========================================================= */

.group-manager{
  margin-bottom:16px;
  padding:20px !important;
}

.group-manager .panel-head{
  margin-bottom:16px;
}

.group-filter-grid{
  display:grid !important;
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(210px,1fr)
    );
  gap:11px;
}

.group-filter-card,
.group-card{
  position:relative;
  overflow:visible;
  min-height:88px;
  border:
    1px solid
    var(--f06-border);
  border-radius:15px;
  background:
    linear-gradient(
      145deg,
      var(--f06-surface-strong),
      var(--f06-surface)
    );
  box-shadow:
    0 8px 24px
    rgba(30,80,110,.04);
  color:
    var(--f06-text);
}

.group-filter-card{
  display:flex !important;
  align-items:center;
  gap:14px;
  padding:15px;
  text-decoration:none !important;
}

.group-card{
  display:flex !important;
  align-items:stretch;
}

.group-card-main{
  display:flex !important;
  align-items:center;
  gap:14px;
  flex:1;
  min-width:0;
  padding:15px;
  text-decoration:none !important;
  color:
    var(--f06-text);
}

.group-filter-card:hover,
.group-card:hover{
  transform:
    translateY(-1px);
  border-color:
    var(--f06-border-strong);
}

.group-filter-card.is-selected,
.group-card.is-selected{
  border-color:
    rgba(102,58,243,.44);
  box-shadow:
    inset 0 0 0 1px
    rgba(102,58,243,.10),
    var(--f06-shadow);
}

.group-color{
  width:14px !important;
  height:14px !important;
  flex:0 0 14px !important;
}

.group-card-copy{
  min-width:0;
}

.group-card-copy strong{
  display:block;
  color:
    var(--f06-text);
  font-size:.96rem;
}

.group-card-copy small{
  display:block;
  margin-top:5px;
  color:
    var(--f06-muted);
  font-weight:700;
}

.group-actions > summary{
  min-width:44px;
  color:
    var(--f06-muted);
}

.group-create > summary{
  min-height:38px;
}


/* =========================================================
   CONTACTOS · WORKSPACE
   ========================================================= */

.contacts-workspace{
  display:grid !important;
  grid-template-columns:
    minmax(310px,.72fr)
    minmax(0,1.55fr);
  gap:16px;
  align-items:start;
}

.contact-create-panel,
.contacts-list-panel{
  border-radius:18px !important;
  box-shadow:
    var(--f06-shadow);
}

.contact-create-panel{
  position:sticky !important;
  top:18px;
  padding:20px !important;
}

.contact-create-panel .stack{
  gap:13px;
}

.contact-create-panel label{
  font-weight:750;
}

.contact-create-panel input,
.contact-create-panel textarea,
.contact-create-panel select{
  margin-top:6px;
}

.group-check-fieldset{
  margin:
    3px
    0
    0 !important;
  padding:
    14px !important;
  border:
    1px solid
    var(--f06-border) !important;
  border-radius:14px;
  background:
    var(--f06-surface);
}

.group-check-fieldset legend{
  padding:0 8px;
  color:
    var(--f06-text);
  font-size:.86rem;
  font-weight:850;
}

.group-check-list{
  display:grid !important;
  gap:8px;
}

.group-check{
  display:grid !important;
  grid-template-columns:
    auto
    auto
    minmax(0,1fr);
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:10px 11px !important;
  border:
    1px solid
    var(--f06-border) !important;
  border-radius:12px !important;
  background:
    var(--f06-surface-strong);
}

.group-check:has(input:checked){
  border-color:
    rgba(102,58,243,.40) !important;
  background:
    rgba(102,58,243,.055);
}

.check-row{
  display:grid !important;
  grid-template-columns:
    auto
    minmax(0,1fr);
  align-items:flex-start;
  gap:10px;
  padding:
    12px
    13px;
  border-radius:12px;
  background:
    rgba(8,127,185,.055);
}

.check-row input{
  margin-top:3px !important;
}


/* =========================================================
   CONTACTOS · DIRECTORIO
   ========================================================= */

.contacts-list-panel{
  padding:20px !important;
}

.contact-list-head{
  display:flex !important;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.contact-list-head .search{
  min-height:42px;
  width:min(330px,100%);
  margin:0;
}

.enhanced-contact-list{
  display:grid !important;
  gap:10px;
}

.contact-row-rich{
  display:grid !important;
  grid-template-columns:
    46px
    minmax(0,1fr)
    auto;
  align-items:center;
  gap:14px;
  min-height:92px;
  padding:15px !important;
  border:
    1px solid
    var(--f06-border) !important;
  border-radius:15px !important;
  background:
    linear-gradient(
      145deg,
      var(--f06-surface-strong),
      var(--f06-surface)
    ) !important;
  box-shadow:
    0 7px 20px
    rgba(30,80,110,.035);
}

.contact-row-rich:hover{
  border-color:
    var(--f06-border-strong) !important;
  transform:
    translateY(-1px);
}

.contact-row-rich .avatar{
  display:grid !important;
  place-items:center;
  width:46px !important;
  height:46px !important;
  border-radius:14px !important;
  background:
    linear-gradient(
      145deg,
      rgba(8,127,185,.15),
      rgba(102,58,243,.08)
    ) !important;
  border:
    1px solid
    rgba(8,127,185,.14);
  color:
    var(--f06-primary);
  font-size:1rem;
  font-weight:900;
}

.contact-main{
  min-width:0;
}

.contact-name-line{
  display:flex !important;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
}

.contact-name-line strong{
  color:
    var(--f06-text);
  font-size:.97rem;
}

.contact-phone{
  display:block !important;
  margin-top:4px;
  color:
    var(--f06-muted);
  font-size:.80rem;
}

.contact-group-badges{
  display:flex !important;
  flex-wrap:wrap;
  gap:6px;
  margin-top:9px;
}

.contact-group-badge{
  min-height:25px;
  padding:0 9px !important;
  border-radius:999px !important;
  font-size:.70rem;
  font-weight:800;
}

.badge.success{
  border-radius:999px !important;
  padding:4px 8px !important;
  background:
    rgba(22,163,106,.10) !important;
  color:
    #07844f !important;
}

.badge.danger{
  border-radius:999px !important;
  padding:4px 8px !important;
}

.contact-actions-rich{
  display:grid !important;
  grid-template-columns:
    repeat(2,auto);
  gap:6px;
  align-items:center;
  justify-content:end;
}

.contact-actions-rich form{
  margin:0 !important;
}

.contact-actions-rich .btn,
.contact-actions-rich button{
  min-height:33px;
  border-radius:999px !important;
  padding:
    0
    11px !important;
  font-size:.72rem !important;
  white-space:nowrap;
}

.contact-actions-rich .danger-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:33px;
  border:
    1px solid
    rgba(220,79,93,.20) !important;
  border-radius:999px !important;
  padding:
    0
    11px !important;
  background:
    rgba(220,79,93,.045);
  color:
    var(--f06-danger);
  font-size:.72rem;
  font-weight:750;
  text-decoration:none;
}

.contact-group-form{
  color:
    var(--f06-text);
}


/* =========================================================
   LIGHT THEME
   ========================================================= */

html[data-theme="light"]
.contact-metric,
html[data-theme="light"]
.group-card,
html[data-theme="light"]
.group-filter-card,
html[data-theme="light"]
.contact-row-rich{
  backdrop-filter:
    blur(14px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:1100px){

  .contact-metrics{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .contacts-workspace{
    grid-template-columns:1fr;
  }

  .contact-create-panel{
    position:static !important;
  }
}

@media (max-width:760px){

  .groups-page-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .groups-head-summary{
    justify-content:flex-start;
  }

  .contact-list-head{
    align-items:stretch;
    flex-direction:column;
  }

  .contact-list-head .search{
    width:100%;
  }

  .contact-row-rich{
    grid-template-columns:
      42px
      minmax(0,1fr);
  }

  .contact-actions-rich{
    grid-column:
      1 / -1;
    grid-template-columns:
      repeat(2,minmax(0,1fr));
    justify-content:stretch;
    margin-top:4px;
  }

  .contact-actions-rich .btn,
  .contact-actions-rich button,
  .contact-actions-rich form{
    width:100%;
  }

  .campaign-selected-group-banner{
    grid-template-columns:
      auto
      minmax(0,1fr);
  }

  .campaign-selected-group-count{
    grid-column:
      1 / -1;
    justify-self:start;
    margin-left:28px;
  }
}

@media (max-width:520px){

  .contact-metrics{
    grid-template-columns:1fr;
  }

  .group-filter-grid{
    grid-template-columns:1fr;
  }

  .contact-actions-rich{
    grid-template-columns:1fr;
  }

  #groupRecipientWrap{
    padding:14px;
  }
}

@media (prefers-reduced-motion:reduce){

  .group-card,
  .group-filter-card,
  .contact-row-rich{
    transition:none !important;
    transform:none !important;
  }
}

/* ===== F06-B3-R1 PREMIUM CONTACTS END ===== */

/* ===== F06-B3-R2 FINAL POLISH START ===== */


/* =========================================================
   COMUNICACIONES · MIEMBROS DEL GRUPO
   ========================================================= */

.campaign-group-member-set{
    display:grid !important;
    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        ) !important;
    gap:10px !important;
}

.campaign-member-option{
    display:grid !important;
    grid-template-columns:
        auto
        42px
        minmax(0,1fr) !important;

    align-items:center !important;

    gap:11px !important;

    min-width:0 !important;
    min-height:76px !important;

    padding:12px 14px !important;

    border-radius:14px !important;
}

.campaign-member-option > input{
    width:17px !important;
    height:17px !important;
    margin:0 !important;
}

.campaign-member-avatar{
    width:40px !important;
    height:40px !important;

    border-radius:12px !important;

    font-size:.84rem !important;
}

.campaign-member-option .grow{
    display:block !important;
    min-width:0 !important;
}

.campaign-member-option strong{
    display:block !important;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:
        var(
            --f06-text,
            #d8ecf8
        ) !important;

    font-size:.88rem !important;
    font-weight:850 !important;

    line-height:1.25;
}

.campaign-member-option small{
    display:block !important;

    margin-top:4px !important;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:
        var(
            --f06-muted,
            #95abc5
        ) !important;

    font-size:.72rem !important;
    font-weight:650;
}


/*
 * Tema oscuro.
 */

html[data-theme="dark"]
.campaign-member-option{
    background:
        rgba(
            186,
            214,
            247,
            .035
        ) !important;
}


/*
 * Tema claro.
 */

html[data-theme="light"]
.campaign-member-option{
    background:
        rgba(
            255,
            255,
            255,
            .92
        ) !important;

    border-color:
        rgba(
            35,
            85,
            118,
            .13
        ) !important;
}

html[data-theme="light"]
.campaign-member-option strong{
    color:#103650 !important;
}

html[data-theme="light"]
.campaign-member-option small{
    color:#68869e !important;
}


/* =========================================================
   CONTACTOS · SUPERFICIES MÁS LIMPIAS
   ========================================================= */

html[data-theme="light"]
.group-manager,
html[data-theme="light"]
.contact-create-panel,
html[data-theme="light"]
.contacts-list-panel{
    background:
        rgba(
            255,
            255,
            255,
            .90
        ) !important;

    border:
        1px solid
        rgba(
            41,
            92,
            122,
            .10
        ) !important;

    box-shadow:
        0 18px 45px
        rgba(
            40,
            76,
            100,
            .065
        ) !important;
}


/*
 * Evita ese bloque gris muy pesado detrás de
 * las tarjetas de grupos.
 */

html[data-theme="light"]
.group-manager{
    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                .96
            ),
            rgba(
                247,
                250,
                255,
                .92
            )
        ) !important;
}


/*
 * Workspace.
 */

html[data-theme="light"]
.contact-create-panel{
    background:
        rgba(
            251,
            253,
            255,
            .97
        ) !important;
}

html[data-theme="light"]
.contacts-list-panel{
    background:
        rgba(
            249,
            252,
            255,
            .96
        ) !important;
}


/* =========================================================
   CONTACTOS · TARJETAS DE GRUPO
   ========================================================= */

html[data-theme="light"]
.group-filter-card,
html[data-theme="light"]
.group-card{
    background:
        rgba(
            255,
            255,
            255,
            .96
        ) !important;

    border:
        1px solid
        rgba(
            30,
            100,
            140,
            .12
        ) !important;

    box-shadow:
        0 8px 22px
        rgba(
            36,
            78,
            104,
            .045
        ) !important;
}

html[data-theme="light"]
.group-filter-card.is-selected,
html[data-theme="light"]
.group-card.is-selected{
    background:
        linear-gradient(
            145deg,
            rgba(
                102,
                58,
                243,
                .09
            ),
            rgba(
                255,
                255,
                255,
                .97
            )
        ) !important;

    border-color:
        rgba(
            102,
            58,
            243,
            .35
        ) !important;
}


/* =========================================================
   CONTACTOS · DIRECTORIO
   ========================================================= */

html[data-theme="light"]
.contact-row-rich{
    background:
        rgba(
            255,
            255,
            255,
            .97
        ) !important;

    border-color:
        rgba(
            29,
            92,
            128,
            .11
        ) !important;

    box-shadow:
        0 7px 20px
        rgba(
            33,
            77,
            103,
            .045
        ) !important;
}

html[data-theme="light"]
.contact-row-rich:hover{
    background:#ffffff !important;

    border-color:
        rgba(
            29,
            92,
            128,
            .20
        ) !important;
}


/*
 * Más jerarquía en nombre.
 */

.contact-name-line strong{
    font-size:1rem !important;
    font-weight:850 !important;
}


/*
 * Acciones menos ruidosas.
 */

.contact-actions-rich{
    align-content:center;
}

.contact-actions-rich .btn,
.contact-actions-rich button,
.contact-actions-rich .danger-link{
    min-width:76px;
}


/* =========================================================
   FORMULARIO · CONTRASTE
   ========================================================= */

html[data-theme="light"]
.contact-create-panel input,
html[data-theme="light"]
.contact-create-panel textarea,
html[data-theme="light"]
.contact-create-panel select{
    background:#fff !important;

    color:#12344b !important;

    border-color:
        rgba(
            32,
            88,
            120,
            .14
        ) !important;
}

html[data-theme="light"]
.group-check-fieldset{
    background:
        rgba(
            247,
            250,
            255,
            .88
        ) !important;
}

html[data-theme="light"]
.group-check{
    background:
        rgba(
            255,
            255,
            255,
            .95
        ) !important;
}


/* =========================================================
   MÉTRICAS · MÁS LIMPIAS
   ========================================================= */

html[data-theme="light"]
.contact-metric{
    background:
        rgba(
            255,
            255,
            255,
            .94
        ) !important;

    border-color:
        rgba(
            30,
            90,
            125,
            .10
        ) !important;

    box-shadow:
        0 12px 32px
        rgba(
            37,
            78,
            104,
            .045
        ) !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:920px){

    .campaign-group-member-set{
        grid-template-columns:1fr !important;
    }

}

@media (max-width:600px){

    .campaign-member-option{
        grid-template-columns:
            auto
            38px
            minmax(0,1fr) !important;

        padding:11px !important;
    }

    .campaign-member-avatar{
        width:36px !important;
        height:36px !important;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    .campaign-member-option,
    .contact-row-rich,
    .group-card,
    .group-filter-card{
        transition:none !important;
    }

}

/* ===== F06-B3-R2 FINAL POLISH END ===== */