/* ExpertaConecta — paleta de Experta Center (experta.roki.site) */
:root{
  --navy:#15095E; --navy-2:#1E1278; --violet:#4A3AC8; --violet-d:#3627A3; --blue:#3366CC; --blue-2:#0057D3;
  --green:#7BB030; --green-d:#4F7F12; --orange:#F39046; --orange-d:#B9560F;
  --ink:#24233B; --muted:#5D5F77; --muted-2:#8A8CA3; --line:#E8E9F1; --line-2:#DCDEEA;
  --bg:#F5F6FB; --card:#FFFFFF; --soft:#F8F9FC;
  --t-blue:#EDF2FC; --t-violet:#F1EFFC; --t-green:#F2F8E8; --t-orange:#FEF3EA; --t-red:#FCEDEA;
  --ok:#2F7D3A; --err:#B4432B; --warn:#B8860B;
  --grad:linear-gradient(90deg,var(--green) 0%,var(--blue) 50%,var(--orange) 100%);
  --btn-grad:linear-gradient(120deg,var(--violet) 0%,var(--blue) 100%);
  --hero-grad:radial-gradient(960px 480px at 10% -10%,#3A2BB0 0%,transparent 60%),radial-gradient(720px 400px at 110% 110%,#2D5BC0 0%,transparent 55%),#15095E;
  --shadow-1:0 1px 2px rgba(21,9,94,.05),0 3.2px 11.2px rgba(21,9,94,.05);
  --shadow-2:0 14.4px 32px -14.4px rgba(21,9,94,.22),0 4.8px 12.8px -6.4px rgba(21,9,94,.10);
  --shadow-3:0 32px 64px -28.8px rgba(21,9,94,.30);
  --r:16px; --r-sm:9.6px; --ease:cubic-bezier(.22,1,.36,1);
  --font-display:"Sora","DM Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-body:"DM Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-body);color:var(--ink);background:var(--bg);font-size:12px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--violet);text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;color:var(--navy);letter-spacing:-.01em}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
.ico{width:14.4px;height:14.4px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico.lg{width:17.6px;height:17.6px}
.muted{color:var(--muted)} .small{font-size:10.4px} .tiny{font-size:9.6px}
.hidden{display:none!important}

/* ---------- Login ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login-hero{background:var(--hero-grad);color:#fff;padding:38.4px 44.8px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.login-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4.8px;background:var(--grad)}
.login-hero h1{color:#fff;font-size:35.2px;line-height:1.08;margin:22.4px 0 12.8px;max-width:448px}
.login-hero p.lead{color:#D9D5FA;font-size:14.4px;max-width:416px}
.brandmark{display:flex;align-items:center;gap:9.6px}
.brandmark img{width:41.6px;height:auto;background:#fff;border-radius:11.2px;padding:4px}
.brandmark .bm-name{font-family:var(--font-display);font-weight:700;font-size:17.6px;color:#fff;line-height:1}
.brandmark .bm-sub{font-size:9.6px;color:#BDB6F2;letter-spacing:.12em;text-transform:uppercase;margin-top:3.2px}
.hero-feats{display:grid;grid-template-columns:repeat(2,1fr);gap:11.2px;max-width:480px;margin-top:17.6px}
.hero-feat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:12.8px;padding:11.2px 12.8px;backdrop-filter:blur(4.8px)}
.hero-feat b{display:flex;align-items:center;gap:6.4px;font-family:var(--font-display);font-size:12px}
.hero-feat span{color:#C9C3F5;font-size:10.4px}
.hero-stats{display:flex;gap:28.8px;margin-top:20.8px}
.hero-stats div b{display:block;font-family:var(--font-display);font-size:22.4px}
.hero-stats div span{color:#BDB6F2;font-size:10.4px}
.login-side{display:flex;align-items:center;justify-content:center;padding:32px 19.2px;background:#fff}
.login-card{width:100%;max-width:336px}
.login-card h2{font-size:22.4px;margin-bottom:4.8px}
.demo-btns{display:grid;gap:8px;margin:17.6px 0 14.4px}
.demo-btn{display:flex;align-items:center;gap:11.2px;padding:11.2px 12.8px;border:1.5px solid var(--line);border-radius:12.8px;background:#fff;cursor:pointer;text-align:left;transition:all .25s var(--ease)}
.demo-btn:hover{border-color:var(--violet);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.demo-btn .db-ico{width:35.2px;height:35.2px;border-radius:9.6px;display:grid;place-items:center;color:#fff;flex:none}
.demo-btn b{display:block;font-family:var(--font-display);color:var(--navy)}
.demo-btn span{font-size:10.4px;color:var(--muted)}
.divider{display:flex;align-items:center;gap:9.6px;color:var(--muted-2);font-size:9.6px;margin:14.4px 0;text-transform:uppercase;letter-spacing:.1em}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- Layout ---------- */
.app{display:grid;grid-template-columns:208px 1fr;min-height:100vh}
.sidebar{background:var(--navy);color:#CFCAF4;padding:16px 11.2px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar .brandmark{padding:3.2px 6.4px 14.4px}
.sidebar .brandmark img{width:33.6px;border-radius:8.8px}
.sidebar .brandmark .bm-name{font-size:14.4px}
.nav-sec{font-size:8.8px;letter-spacing:.14em;text-transform:uppercase;color:#8E86D6;margin:12.8px 9.6px 4.8px}
.nav a{display:flex;align-items:center;gap:9.6px;padding:8px 9.6px;border-radius:9.6px;color:#CFCAF4;font-weight:500;margin-bottom:2px;transition:background .2s}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav a.active{background:linear-gradient(120deg,rgba(74,58,200,.9),rgba(51,102,204,.9));color:#fff;box-shadow:0 6.4px 16px -8px rgba(0,0,0,.5)}
.nav a .badge{margin-left:auto;background:var(--orange);color:#fff;border-radius:799.2px;font-size:8.8px;padding:1px 6.4px;font-weight:700}
.side-balance{margin-top:auto;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12.8px;padding:11.2px}
.side-balance .sb-row{display:flex;justify-content:space-between;font-size:10.4px;margin-bottom:4.8px}
.side-balance .sb-row b{color:#fff;font-family:var(--font-display)}
.bar{height:6.4px;border-radius:79.2px;background:rgba(255,255,255,.12);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:79.2px;background:var(--grad)}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:11.2px;padding:11.2px 22.4px;background:rgba(245,246,251,.85);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line)}
.topbar .tb-title{font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:14.4px}
.topbar .grow{flex:1}
.tb-chip{display:flex;align-items:center;gap:6.4px;background:#fff;border:1px solid var(--line);border-radius:799.2px;padding:4.8px 9.6px;font-size:10.4px;font-weight:600;color:var(--navy);cursor:pointer}
.tb-chip .dot{width:6.4px;height:6.4px;border-radius:50%;background:var(--green)}
.avatar{width:28.8px;height:28.8px;border-radius:50%;background:var(--btn-grad);color:#fff;display:grid;place-items:center;font-weight:700;font-family:var(--font-display);font-size:11.2px}
.user-chip{display:flex;align-items:center;gap:8px;cursor:pointer}
.user-chip .uc-name{font-weight:600;font-size:11.2px;line-height:1.1}
.user-chip .uc-role{font-size:9.6px;color:var(--muted)}
.content{padding:20.8px 22.4px 48px;max-width:none;width:100%}
.menu-btn{display:none}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12.8px;margin-bottom:17.6px;flex-wrap:wrap}
.page-head h1{font-size:22.4px}
.page-head p{margin:3.2px 0 0;color:var(--muted)}

/* ---------- Components ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6.4px;border:0;border-radius:9.6px;padding:8.8px 14.4px;font-weight:600;cursor:pointer;transition:all .2s var(--ease);white-space:nowrap;text-decoration:none}
.btn-primary{background:var(--btn-grad);color:#fff;box-shadow:0 6.4px 16px -8px rgba(74,58,200,.7)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 9.6px 20.8px -8px rgba(74,58,200,.8)}
.btn-orange{background:linear-gradient(120deg,#F39046,#E8701E);color:#fff;box-shadow:0 6.4px 16px -8px rgba(243,144,70,.9)}
.btn-green{background:linear-gradient(120deg,#7BB030,#5E9520);color:#fff}
.btn-ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--violet);color:var(--violet)}
.btn-soft{background:var(--t-violet);color:var(--violet)}
.btn-danger{background:var(--t-red);color:var(--err)}
.btn-sm{padding:5.6px 9.6px;font-size:10.4px;border-radius:8px}
.btn-lg{padding:11.2px 17.6px;font-size:12.8px;border-radius:11.2px}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-1)}
.card-pad{padding:17.6px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:9.6px;padding:14.4px 17.6px;border-bottom:1px solid var(--line)}
.card-head h3{font-size:12.8px}
.card-body{padding:16px 17.6px}
.grid{display:grid;gap:14.4px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g-1-1{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.mb{margin-bottom:14.4px}
.kpi{padding:14.4px 16px;position:relative;overflow:hidden}
.kpi .k-label{display:flex;align-items:center;gap:6.4px;color:var(--muted);font-size:10.4px;font-weight:600}
.kpi .k-ico{width:27.2px;height:27.2px;border-radius:8px;display:grid;place-items:center}
.kpi .k-val{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--navy);margin-top:8px;line-height:1}
.kpi .k-sub{font-size:10.4px;color:var(--muted);margin-top:4.8px}
.up{color:var(--ok);font-weight:700} .down{color:var(--err);font-weight:700}
.tint-blue{background:var(--t-blue);color:var(--blue)} .tint-violet{background:var(--t-violet);color:var(--violet)}
.tint-green{background:var(--t-green);color:var(--green-d)} .tint-orange{background:var(--t-orange);color:var(--orange-d)} .tint-red{background:var(--t-red);color:var(--err)}

/* Balance hero */
.balance-hero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14.4px;margin-bottom:14.4px}
.bh{border-radius:19.2px;padding:19.2px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow-2);display:flex;gap:17.6px;align-items:center}
.bh.sms{background:linear-gradient(135deg,#4A3AC8 0%,#3366CC 100%)}
.bh.voz{background:linear-gradient(135deg,#15095E 0%,#3A2BB0 100%)}
.bh::before{content:"";position:absolute;right:-48px;top:-48px;width:176px;height:176px;border-radius:50%;background:rgba(255,255,255,.07)}
.bh .bh-label{font-size:10.4px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.75);font-weight:700;display:flex;gap:6.4px;align-items:center}
.bh .bh-val{font-family:var(--font-display);font-size:36.8px;font-weight:800;line-height:1.05;margin:4.8px 0 2px}
.bh .bh-sub{color:rgba(255,255,255,.8);font-size:11.2px}
.bh .bh-actions{display:flex;gap:6.4px;margin-top:11.2px;flex-wrap:wrap}
.bh .btn-w{background:#fff;color:var(--navy)}
.bh .btn-t{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.25)}
.ring{width:96px;height:96px;flex:none;position:relative}
.ring svg{width:96px;height:96px;transform:rotate(-90deg)}
.ring .ring-txt{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-family:var(--font-display);font-weight:700;font-size:17.6px;line-height:1}
.ring .ring-txt small{display:block;font-size:8.8px;font-weight:600;opacity:.8;margin-top:2.4px;font-family:var(--font-body)}
.trial-banner{display:flex;align-items:center;gap:12.8px;background:linear-gradient(90deg,#FEF3EA,#FFF9F3);border:1px solid #F7D3B5;border-radius:14.4px;padding:11.2px 14.4px;margin-bottom:14.4px}
.trial-banner .tb-ico{width:33.6px;height:33.6px;border-radius:9.6px;background:var(--orange);color:#fff;display:grid;place-items:center;flex:none}
.trial-banner b{color:var(--orange-d);font-family:var(--font-display)}

/* Tables */
.table-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:11.2px}
table.t th{text-align:left;font-size:9.6px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;padding:9.6px 12.8px;border-bottom:1px solid var(--line);background:var(--soft);white-space:nowrap}
table.t td{padding:10.4px 12.8px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr{transition:background .15s}
table.t tbody tr:hover{background:#FAFAFE}
table.t tr.click{cursor:pointer}
.co-cell{display:flex;align-items:center;gap:9.6px}
.co-logo{width:30.4px;height:30.4px;border-radius:8.8px;display:grid;place-items:center;color:#fff;font-weight:800;font-family:var(--font-display);font-size:11.2px;flex:none}
.pill{display:inline-flex;align-items:center;gap:4.8px;border-radius:799.2px;padding:2.4px 8px;font-size:9.6px;font-weight:700;white-space:nowrap}
.pill::before{content:"";width:4.8px;height:4.8px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--t-green);color:var(--green-d)} .pill.err{background:var(--t-red);color:var(--err)}
.pill.warn{background:var(--t-orange);color:var(--orange-d)} .pill.info{background:var(--t-blue);color:var(--blue)}
.pill.vio{background:var(--t-violet);color:var(--violet)} .pill.gray{background:#EEF0F5;color:var(--muted)}
.minibar{height:4.8px;border-radius:79.2px;background:#EEF0F6;overflow:hidden;min-width:72px}
.minibar>i{display:block;height:100%;background:var(--btn-grad);border-radius:79.2px}
.minibar.o>i{background:linear-gradient(90deg,#F39046,#E8701E)}
.minibar.g>i{background:linear-gradient(90deg,#7BB030,#5E9520)}

/* Forms */
.field{margin-bottom:12.8px}
.field label{display:block;font-weight:600;font-size:10.4px;color:var(--navy);margin-bottom:4.8px}
.field label.switch{display:flex;font-weight:500;margin-bottom:0}
.field .hint{font-size:9.6px;color:var(--muted);margin-top:4px}
.input,.select,.textarea{width:100%;border:1.5px solid var(--line-2);border-radius:9.6px;padding:8.8px 11.2px;background:#fff;outline:none;transition:border .2s,box-shadow .2s}
.input:focus,.select:focus,.textarea:focus{border-color:var(--violet);box-shadow:0 0 0 3.2px rgba(74,58,200,.12)}
.textarea{resize:vertical;min-height:96px;line-height:1.5}
.input-group{display:flex;align-items:stretch}
.input-group .prefix{display:grid;place-items:center;padding:0 9.6px;background:var(--soft);border:1.5px solid var(--line-2);border-right:0;border-radius:9.6px 0 0 9.6px;font-weight:700;color:var(--navy)}
.input-group .input{border-radius:0 9.6px 9.6px 0}
.counter{display:flex;justify-content:space-between;font-size:9.6px;color:var(--muted);margin-top:4.8px}
.counter .over{color:var(--err);font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:6.4px}
.chip{border:1.5px dashed var(--violet);color:var(--violet);background:var(--t-violet);border-radius:799.2px;padding:4px 9.6px;font-size:10.4px;font-weight:700;cursor:pointer;font-family:ui-monospace,Consolas,monospace}
.chip:hover{background:var(--violet);color:#fff}
.switch{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:11.2px;user-select:none}
.switch input{display:none}
.switch .sw{width:32px;height:17.6px;border-radius:79.2px;background:#D5D7E3;position:relative;transition:background .2s;flex:none}
.switch .sw::after{content:"";position:absolute;top:2.4px;left:2.4px;width:12.8px;height:12.8px;border-radius:50%;background:#fff;transition:left .2s var(--ease);box-shadow:0 1px 2.4px rgba(0,0,0,.2)}
.switch input:checked+.sw{background:var(--violet)}
.switch input:checked+.sw::after{left:16.8px}
.seg{display:inline-flex;background:#EEF0F6;border-radius:9.6px;padding:3.2px;gap:2px}
.seg button{border:0;background:transparent;padding:5.6px 11.2px;border-radius:7.2px;font-weight:600;color:var(--muted);cursor:pointer;font-size:10.4px}
.seg button.on{background:#fff;color:var(--navy);box-shadow:var(--shadow-1)}

/* Phone preview */
.phone{width:224px;margin:0 auto;border-radius:30.4px;background:#0F0A33;padding:9.6px;box-shadow:var(--shadow-3)}
.phone .screen{background:linear-gradient(180deg,#F3F2FA,#E9E8F5);border-radius:22.4px;height:400px;overflow:hidden;display:flex;flex-direction:column}
.phone .notch{width:88px;height:19.2px;background:#0F0A33;border-radius:0 0 12.8px 12.8px;margin:0 auto}
.phone .ph-head{text-align:center;padding:6.4px 8px 9.6px;border-bottom:1px solid #DDDBEA}
.phone .ph-head .av{width:32px;height:32px;border-radius:50%;background:var(--btn-grad);color:#fff;display:grid;place-items:center;margin:3.2px auto;font-weight:800;font-size:11.2px}
.phone .ph-head b{font-size:10.4px;color:var(--ink)}
.phone .ph-body{padding:11.2px;flex:1;overflow:auto}
.bubble{background:#fff;border-radius:14.4px 14.4px 14.4px 3.2px;padding:8px 10.4px;font-size:10.8px;box-shadow:0 1px 2px rgba(0,0,0,.06);max-width:92%;white-space:pre-wrap;word-wrap:break-word}
.bubble-time{font-size:8.8px;color:var(--muted-2);margin:4.8px 3.2px}

/* Steps / wizard */
.steps{display:flex;gap:6.4px;margin-bottom:16px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;padding:6.4px 11.2px 6.4px 6.4px;border-radius:799.2px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:11.2px;color:var(--muted)}
.step i{width:22.4px;height:22.4px;border-radius:50%;display:grid;place-items:center;background:#EEF0F6;font-style:normal;font-weight:800;font-size:10.4px}
.step.on{border-color:var(--violet);color:var(--navy)}
.step.on i{background:var(--btn-grad);color:#fff}
.step.done i{background:var(--green);color:#fff}
.dropzone{border:2px dashed var(--line-2);border-radius:16px;padding:30.4px 16px;text-align:center;background:var(--soft);cursor:pointer;transition:all .2s}
.dropzone:hover,.dropzone.drag{border-color:var(--violet);background:var(--t-violet)}
.dropzone .dz-ico{width:51.2px;height:51.2px;border-radius:14.4px;background:var(--btn-grad);color:#fff;display:grid;place-items:center;margin:0 auto 9.6px}

/* Code */
.code{background:#120A45;color:#E6E3FF;border-radius:12.8px;padding:12.8px 14.4px;font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:10.4px;overflow-x:auto;white-space:pre;line-height:1.6;position:relative}
.code .k{color:#9FB7FF} .code .s{color:#B9E28C} .code .c{color:#8E86D6} .code .n{color:#F7B27A}
.endpoint{display:flex;align-items:center;gap:8px;padding:9.6px 11.2px;border:1px solid var(--line);border-radius:9.6px;margin-bottom:6.4px;font-family:ui-monospace,Consolas,monospace;font-size:10.4px;background:#fff;cursor:pointer}
.endpoint:hover{border-color:var(--violet)}
.method{font-weight:800;font-size:8.8px;padding:2.4px 6.4px;border-radius:4.8px;color:#fff}
.method.post{background:var(--green)} .method.get{background:var(--blue)} .method.del{background:var(--err)}
.keybox{display:flex;align-items:center;gap:8px;background:var(--soft);border:1px solid var(--line);border-radius:9.6px;padding:8px 9.6px;font-family:ui-monospace,Consolas,monospace;font-size:10.4px}
.keybox code{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Modal / drawer / toast */
.overlay{position:fixed;inset:0;background:rgba(21,9,94,.45);backdrop-filter:blur(2.4px);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;animation:fade .2s}
.modal{background:#fff;border-radius:19.2px;width:100%;max-width:448px;max-height:92vh;overflow:auto;box-shadow:var(--shadow-3);animation:pop .3s var(--ease)}
.modal.wide{max-width:656px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 19.2px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:15.2px}
.modal-body{padding:17.6px 19.2px}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:12.8px 19.2px;border-top:1px solid var(--line);background:var(--soft);border-radius:0 0 19.2px 19.2px}
.x-btn{border:0;background:#EEF0F6;width:27.2px;height:27.2px;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.drawer{position:fixed;right:0;top:0;bottom:0;width:320px;max-width:100%;background:#fff;z-index:110;box-shadow:var(--shadow-3);display:flex;flex-direction:column;animation:slide .35s var(--ease)}
.toasts{position:fixed;right:17.6px;bottom:17.6px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--navy);color:#fff;border-radius:11.2px;padding:9.6px 12.8px;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow-3);animation:pop .3s var(--ease);font-size:11.2px;max-width:304px}
.toast .ti{width:20.8px;height:20.8px;border-radius:6.4px;background:var(--green);display:grid;place-items:center;flex:none}
.toast.err .ti{background:var(--err)}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes slide{from{transform:translateX(100%)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.live{animation:pulse 1.4s infinite}

/* Plans */
.plan{padding:17.6px;border-radius:17.6px;background:#fff;border:1.5px solid var(--line);position:relative;display:flex;flex-direction:column}
.plan.best{border-color:var(--violet);box-shadow:var(--shadow-2)}
.plan .tag{position:absolute;top:-9.6px;left:17.6px;background:var(--btn-grad);color:#fff;font-size:8.8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3.2px 8px;border-radius:79.2px}
.plan h4{font-size:12.8px}
.plan .p-qty{font-family:var(--font-display);font-size:24px;font-weight:800;color:var(--navy);margin:8px 0 0}
.plan .p-price{color:var(--muted);margin-bottom:11.2px}
.plan ul{list-style:none;padding:0;margin:0 0 14.4px;font-size:11.2px;flex:1}
.plan li{display:flex;gap:6.4px;align-items:flex-start;margin-bottom:5.6px}
.plan li .ico{color:var(--green);width:12.8px;height:12.8px;margin-top:2.4px}

/* Assistant */
.fab{position:fixed;right:17.6px;bottom:17.6px;z-index:90;display:flex;align-items:center;gap:8px;background:var(--btn-grad);color:#fff;border:0;border-radius:799.2px;padding:9.6px 14.4px 9.6px 11.2px;font-weight:700;cursor:pointer;box-shadow:0 11.2px 24px -8px rgba(74,58,200,.8)}
.fab .ico{width:16px;height:16px}
.demo-fab{position:fixed;left:17.6px;bottom:17.6px;z-index:90;background:#fff;color:var(--navy);border:1.5px solid var(--line-2);border-radius:799.2px;padding:7.2px 11.2px;font-weight:700;font-size:10.4px;cursor:pointer;display:flex;gap:6.4px;align-items:center;box-shadow:var(--shadow-2)}
.assist-msg{background:var(--soft);border-radius:12.8px;padding:9.6px 11.2px;margin-bottom:8px;font-size:11.2px}
.assist-opt{display:flex;align-items:center;gap:9.6px;width:100%;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:11.2px;padding:9.6px 11.2px;margin-bottom:6.4px;cursor:pointer;font-weight:600;color:var(--navy)}
.assist-opt:hover{border-color:var(--violet);background:var(--t-violet)}
.assist-opt .ao-ico{width:27.2px;height:27.2px;border-radius:8px;display:grid;place-items:center;flex:none}
.checklist .ci{display:flex;align-items:center;gap:9.6px;padding:8px 0;border-bottom:1px dashed var(--line)}
.checklist .ci:last-child{border:0}
.checklist .ci .cb{width:19.2px;height:19.2px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center;flex:none}
.checklist .ci.done .cb{background:var(--green);border-color:var(--green);color:#fff}
.checklist .ci.done span{text-decoration:line-through;color:var(--muted)}
.empty{text-align:center;padding:32px 16px;color:var(--muted)}
.empty .e-ico{width:48px;height:48px;border-radius:14.4px;background:var(--t-violet);color:var(--violet);display:grid;place-items:center;margin:0 auto 9.6px}
.tabs{display:flex;gap:3.2px;border-bottom:1px solid var(--line);margin-bottom:14.4px;overflow-x:auto}
.tabs button{border:0;background:none;padding:8px 11.2px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button.on{color:var(--violet);border-bottom-color:var(--violet)}
.list-row{display:flex;align-items:center;gap:9.6px;padding:9.6px 0;border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:0}
.flex{display:flex;align-items:center;gap:8px}
.between{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wrap{flex-wrap:wrap}
.chart-box{position:relative;height:224px}
.chart-box.sm{height:176px}
.audio-card{display:flex;align-items:center;gap:11.2px;border:1.5px solid var(--line);border-radius:12.8px;padding:11.2px;background:#fff;cursor:pointer;transition:all .2s}
.audio-card.on{border-color:var(--violet);background:var(--t-violet)}
.wave{display:flex;align-items:center;gap:2.4px;height:25.6px}
.wave i{width:2.4px;border-radius:2.4px;background:var(--violet);opacity:.7}
.option-card{border:1.5px solid var(--line);border-radius:14.4px;padding:14.4px;cursor:pointer;transition:all .2s;background:#fff}
.option-card:hover{border-color:var(--violet)}
.option-card.on{border-color:var(--violet);background:var(--t-violet);box-shadow:0 0 0 3.2px rgba(74,58,200,.1)}
.option-card .oc-ico{width:35.2px;height:35.2px;border-radius:10.4px;display:grid;place-items:center;margin-bottom:8px}
.summary-line{display:flex;justify-content:space-between;padding:7.2px 0;border-bottom:1px dashed var(--line);font-size:11.2px}
.summary-line:last-child{border:0}
.summary-line b{font-family:var(--font-display);color:var(--navy)}

/* Responsive */
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.g-2-1{grid-template-columns:1fr}}
@media (max-width:860px){
  .login{grid-template-columns:1fr}.login-hero{padding:25.6px 16px}.login-hero h1{font-size:25.6px}.hero-feats{grid-template-columns:1fr}
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;z-index:120;width:216px;transform:translateX(-100%);transition:transform .3s var(--ease)}
  .sidebar.open{transform:none;box-shadow:var(--shadow-3)}
  .menu-btn{display:grid;place-items:center;border:0;background:#fff;width:30.4px;height:30.4px;border-radius:8px;border:1px solid var(--line)}
  .topbar{padding:9.6px 12.8px}.content{padding:14.4px 12.8px 72px}
  .g2,.g3,.g4,.g-1-1,.balance-hero{grid-template-columns:1fr}
  .bh{flex-direction:column;align-items:flex-start}.bh .bh-val{font-size:30.4px}
  .user-chip .uc-txt,.hide-m{display:none!important}
  .fab span{display:none}
}