*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f4f6fa;--bg-2:#eef1f6;--card:#ffffff;--ink:#101626;--ink-2:#3c4456;--mut:#6b7384;--mut-2:#98a0b0;
  --line:#e7eaf0;--line-2:#dde1ea;
  --green:#7bd64a;--green-d:#4f9e27;--green-dd:#3c8418;--green-soft:#edf8e4;--green-line:#cdeab4;
  --shadow-sm:0 1px 2px rgba(16,23,41,.05);
  --shadow:0 2px 6px rgba(16,23,41,.05),0 14px 38px -16px rgba(16,23,41,.16);
  --shadow-lg:0 8px 16px rgba(16,23,41,.06),0 30px 60px -22px rgba(16,23,41,.22);
}
html,body{height:100%}
body{font-family:'Plus Jakarta Sans',-apple-system,'Segoe UI',system-ui,sans-serif;color:var(--ink);
  background:
   radial-gradient(900px 520px at 88% -6%,rgba(123,214,74,.12),transparent 60%),
   radial-gradient(760px 520px at -6% 108%,rgba(123,214,74,.07),transparent 58%),
   var(--bg);
  -webkit-font-smoothing:antialiased}
a{color:inherit}
.svg{stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block}
.hide{display:none}

.shell{max-width:1200px;margin:0 auto;padding:0 30px;min-height:100vh;display:flex;flex-direction:column}

/* ── header / brand ── */
.nav{display:flex;align-items:center;gap:13px;padding:24px 2px}
.logo-lock{display:flex;align-items:center;background:#111521;border-radius:11px;padding:9px 13px;box-shadow:var(--shadow-sm)}
.logo-lock img{height:22px;display:block}
.pname{font-weight:700;letter-spacing:-.3px;font-size:1.02rem}
.pname b{color:var(--green-d)}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:7px;color:var(--mut);font-size:.86rem;text-decoration:none}
.nav .right:hover{color:var(--ink-2)}
.nav .right .svg{width:15px;height:15px;stroke-width:2.2}

/* ── login layout ── */
.main{flex:1;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;padding:24px 2px 56px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;background:var(--green-soft);border:1px solid var(--green-line);color:var(--green-dd);border-radius:30px;font-size:.79rem;font-weight:600}
.eyebrow .svg{width:14px;height:14px;stroke-width:2.4}
h1{font-size:clamp(2.3rem,4vw,3.3rem);line-height:1.06;letter-spacing:-1.4px;font-weight:800;margin-top:22px;color:var(--ink)}
h1 .g{color:var(--green-d)}
.lead{color:var(--ink-2);font-size:1.08rem;line-height:1.6;margin-top:18px;max-width:30em}
.trust{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px}
.trust span{display:inline-flex;align-items:center;gap:7px;color:var(--mut);font-size:.85rem;font-weight:500}
.trust .chk{width:18px;height:18px;border-radius:50%;background:var(--green-soft);color:var(--green-dd);display:flex;align-items:center;justify-content:center}
.trust .chk .svg{width:11px;height:11px;stroke-width:3}

.preview{margin-top:30px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;max-width:430px}
.pv-head{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid var(--line)}
.pv-icn{width:34px;height:34px;border-radius:9px;background:var(--green-soft);color:var(--green-dd);display:flex;align-items:center;justify-content:center}
.pv-icn .svg{width:18px;height:18px}
.pv-head h4{font-size:.95rem;font-weight:700;letter-spacing:-.2px}
.pv-head p{font-size:.78rem;color:var(--mut)}
.pv-tag{margin-left:auto;font-size:.7rem;font-weight:600;color:var(--green-dd);background:var(--green-soft);border:1px solid var(--green-line);padding:4px 9px;border-radius:20px}
.pv-chips{display:flex;gap:7px;padding:13px 18px 4px;flex-wrap:wrap}
.pv-chip{font-size:.74rem;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);padding:4px 10px;border-radius:7px;font-weight:500}
.pv-step{display:flex;gap:13px;padding:13px 18px;align-items:center}
.pv-step+.pv-step{border-top:1px solid var(--line)}
.pv-step img{width:74px;height:54px;object-fit:cover;border-radius:9px;flex:0 0 auto;border:1px solid var(--line-2)}
.pv-num{font-size:.7rem;font-weight:700;color:var(--green-dd);text-transform:uppercase;letter-spacing:.4px}
.pv-step h5{font-size:.88rem;font-weight:650;margin-top:1px}
.pv-step p{font-size:.78rem;color:var(--mut);margin-top:2px;line-height:1.35}

/* ── auth card ── */
.auth{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);padding:32px 32px 28px;max-width:412px;width:100%;justify-self:end}
.tabs{display:flex;background:var(--bg-2);border-radius:11px;padding:4px;gap:4px}
.tab{flex:1;text-align:center;padding:10px 0;border-radius:8px;font-size:.9rem;font-weight:600;color:var(--mut);cursor:pointer;border:none;background:transparent;transition:.16s;font-family:inherit}
.tab.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm)}
.welcome{margin:26px 0 4px;font-size:1.5rem;font-weight:800;letter-spacing:-.5px}
.welcome-sub{color:var(--mut);font-size:.91rem;margin-bottom:22px}
.field{margin-bottom:14px}
.field label{display:block;font-size:.83rem;font-weight:600;margin-bottom:7px;color:var(--ink-2)}
.inp{position:relative;display:flex;align-items:center}
.inp .lead-ic{position:absolute;left:13px;color:var(--mut-2)}
.inp .lead-ic .svg{width:18px;height:18px}
.inp input{width:100%;padding:12px 14px 12px 41px;border:1.5px solid var(--line-2);border-radius:11px;font-size:.94rem;font-family:inherit;background:#fcfdfe;color:var(--ink);transition:.15s;outline:none}
.inp input::placeholder{color:var(--mut-2)}
.inp input:focus{border-color:var(--green-d);box-shadow:0 0 0 4px rgba(123,214,74,.16);background:#fff}
.inp .eye{position:absolute;right:11px;color:var(--mut-2);cursor:pointer;background:none;border:none;padding:4px;display:flex}
.inp .eye:hover{color:var(--ink-2)}
.inp .eye .svg{width:19px;height:19px}
.btn{width:100%;padding:13px;border:none;border-radius:11px;font-size:.96rem;font-weight:700;cursor:pointer;transition:.18s;display:flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;text-decoration:none}
.btn[disabled]{opacity:.6;cursor:default}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#0a0f1c;transform:translateY(-1px);box-shadow:0 12px 24px -10px rgba(16,23,41,.5)}
.btn-green{background:linear-gradient(180deg,var(--green),var(--green-d));color:#0a2606}
.btn-green:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(79,158,39,.55)}
.btn .svg{width:18px;height:18px;stroke-width:2.4}
.form-btn{margin-top:8px}
.sep-or{display:flex;align-items:center;gap:13px;margin:20px 0 16px;color:var(--mut-2);font-size:.8rem}
.sep-or::before,.sep-or::after{content:"";flex:1;height:1px;background:var(--line)}
.links{text-align:center}
.links a{display:inline-block;color:var(--mut);font-size:.87rem;text-decoration:none;margin:4px 0;transition:.15s;cursor:pointer}
.links a:hover{color:var(--ink-2)}
.links a b{color:var(--green-dd)}
.alert{background:#fdecec;border:1px solid #f6c9c9;color:#a32020;font-size:.85rem;padding:11px 13px;border-radius:10px;margin-bottom:16px;display:flex;gap:8px;align-items:flex-start}
.alert .svg{width:16px;height:16px;stroke-width:2.4;flex:0 0 auto;margin-top:1px}

.foot{padding:18px 2px 26px;color:var(--mut-2);font-size:.81rem;border-top:1px solid var(--line)}

@media(max-width:940px){
  .main{grid-template-columns:1fr;gap:30px;padding:12px 0 36px}
  .auth{justify-self:stretch;max-width:none;order:-1}
  .preview{max-width:none}
}

/* ── dashboard ── */
.appbar{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.appbar .user{margin-left:auto;display:flex;align-items:center;gap:12px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;padding:5px 11px;border-radius:20px;border:1px solid var(--line);color:var(--ink-2);background:var(--card)}
.pill.free{color:var(--ink-2)}
.pill.premium{color:var(--green-dd);background:var(--green-soft);border-color:var(--green-line)}
.uchip{display:flex;align-items:center;gap:9px;font-size:.88rem;font-weight:600}
.uavatar{width:32px;height:32px;border-radius:9px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700}
.btn-ghost{background:transparent;border:1px solid var(--line-2);color:var(--ink-2);padding:8px 13px;border-radius:10px;font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:7px}
.btn-ghost:hover{background:var(--bg-2)}
.btn-ghost .svg{width:15px;height:15px;stroke-width:2.2}
.admin-link{color:var(--green-dd);text-decoration:none;font-size:.85rem;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.admin-link .svg{width:15px;height:15px}

.console{max-width:760px;margin:0 auto;padding:56px 0 80px;text-align:center}
.console .eyebrow{margin:0 auto}
.console h1{margin-top:18px}
.console .sub{color:var(--ink-2);font-size:1.05rem;margin-top:14px}
.searchbox{margin-top:34px;display:flex;gap:10px;background:var(--card);border:1.5px solid var(--line-2);border-radius:16px;padding:10px 10px 10px 18px;box-shadow:var(--shadow);align-items:center}
.searchbox:focus-within{border-color:var(--green-d);box-shadow:0 0 0 4px rgba(123,214,74,.14),var(--shadow)}
.searchbox .si{color:var(--mut-2)}
.searchbox .si .svg{width:20px;height:20px}
.searchbox input{flex:1;border:none;outline:none;font-size:1rem;font-family:inherit;background:transparent;color:var(--ink)}
.searchbox .go{width:auto;padding:12px 20px;margin:0}
.examples{margin-top:18px;display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.ex{font-size:.83rem;color:var(--ink-2);background:var(--card);border:1px solid var(--line);padding:7px 13px;border-radius:20px;cursor:pointer;transition:.15s}
.ex:hover{border-color:var(--green-line);background:var(--green-soft);color:var(--green-dd)}
.quota{margin-top:30px;color:var(--mut);font-size:.85rem}
.quota b{color:var(--ink)}
.soon{margin-top:40px;background:var(--card);border:1px dashed var(--line-2);border-radius:14px;padding:20px;color:var(--mut);font-size:.9rem}

/* ── manual view ── */
.back{display:inline-flex;align-items:center;gap:7px;color:var(--mut);font-size:.88rem;text-decoration:none;margin:18px 0 6px;font-weight:600}
.back:hover{color:var(--ink)}
.back .svg{width:16px;height:16px;stroke-width:2.2}
.manual{max-width:820px;margin:0 auto;padding-bottom:70px}
.mhead{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:26px 28px;margin-top:8px}
.mhead h1{font-size:1.9rem;line-height:1.15;letter-spacing:-.8px;margin:0}
.mchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.mchip{font-size:.8rem;font-weight:600;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);padding:6px 12px;border-radius:8px;display:inline-flex;align-items:center;gap:6px}
.mchip.green{color:var(--green-dd);background:var(--green-soft);border-color:var(--green-line)}
.mcols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.mbox{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.mbox h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.6px;color:var(--mut);margin-bottom:10px}
.mbox ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.mbox li{font-size:.9rem;color:var(--ink-2);display:flex;align-items:flex-start;gap:8px}
.mbox li .dot{width:6px;height:6px;border-radius:50%;background:var(--green-d);margin-top:7px;flex:0 0 auto}
.warnbox{background:#fff8ec;border-color:#f3dca6}
.warnbox h4{color:#b5852a}
.warnbox li .dot{background:#e0a32a}
.msteps-h{font-size:1.25rem;font-weight:800;letter-spacing:-.4px;margin:30px 0 16px}
.mstep{display:flex;gap:0;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.mstep .ph{flex:0 0 44%;background:#0c0d10;min-height:180px;position:relative;display:flex;align-items:center;justify-content:center}
.mstep .ph img{width:100%;height:100%;object-fit:cover}
.mstep .ph .noimg{color:var(--mut-2);font-size:.8rem}
.mstep .ph .tag{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.6);color:#fff;font-size:.68rem;padding:3px 8px;border-radius:6px}
.mstep .bd{padding:18px 22px;flex:1}
.mstep .num{font-size:.72rem;font-weight:700;color:var(--green-dd);text-transform:uppercase;letter-spacing:.5px}
.mstep h3{font-size:1.12rem;margin:3px 0 8px;letter-spacing:-.3px}
.mstep p{color:var(--ink-2);font-size:.94rem;line-height:1.5}
.mquote{margin-top:11px;font-size:.82rem;color:var(--mut);border-left:3px solid var(--green-line);padding-left:11px;font-style:italic}
.feedback{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;margin-top:26px}
.feedback h3{font-size:1.05rem;margin-bottom:14px}
.fbtns{display:flex;gap:12px;justify-content:center}
.fbtn{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--line-2);color:var(--ink-2);padding:11px 20px;border-radius:11px;font-size:.9rem;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s}
.fbtn:hover{border-color:var(--green-d);background:var(--green-soft);color:var(--green-dd);transform:translateY(-1px)}
.fbtn .svg{width:17px;height:17px}
@media(max-width:620px){.mcols{grid-template-columns:1fr}.mstep{flex-direction:column}.mstep .ph{width:100%;min-height:210px}}

/* ── dashboard progress + recent ── */
.progress-card{max-width:620px;margin:30px auto 0;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:24px;text-align:left;display:none}
.progress-card.on{display:block}
.pc-row{display:flex;align-items:center;gap:13px}
.spinner{width:22px;height:22px;border:2.5px solid var(--green-line);border-top-color:var(--green-d);border-radius:50%;animation:spin .8s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
.pc-row b{font-size:.98rem}
.pc-sub{color:var(--mut);font-size:.86rem;margin-top:5px;padding-left:35px}
.pc-err{color:#a32020;font-size:.9rem}
.recent{max-width:620px;margin:34px auto 0;text-align:left}
.recent h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.6px;color:var(--mut);margin-bottom:10px}
.ritem{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 15px;margin-bottom:8px;text-decoration:none;color:var(--ink);transition:.15s}
.ritem:hover{border-color:var(--green-line);transform:translateX(2px)}
.ritem .ri-ic{width:30px;height:30px;border-radius:8px;background:var(--green-soft);color:var(--green-dd);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ritem .ri-ic .svg{width:16px;height:16px}
.ritem .ri-t{font-size:.9rem;font-weight:600}
.ritem .ri-s{font-size:.78rem;color:var(--mut)}
.ritem .ri-go{margin-left:auto;color:var(--mut-2)}

/* ── admin ── */
.admin-wrap{padding:26px 0 70px}
.admin-h{font-size:1.7rem;font-weight:800;letter-spacing:-.6px}
.admin-sub{color:var(--mut);font-size:.92rem;margin-top:4px;margin-bottom:24px}
.cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mcard{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);padding:18px}
.mcard .lbl{font-size:.76rem;text-transform:uppercase;letter-spacing:.5px;color:var(--mut);display:flex;align-items:center;gap:7px}
.mcard .lbl .svg{width:15px;height:15px;color:var(--green-d)}
.mcard .val{font-size:1.8rem;font-weight:800;letter-spacing:-.8px;margin-top:8px}
.mcard .hint{font-size:.78rem;color:var(--mut);margin-top:3px}
.mcard.accent{background:linear-gradient(160deg,#f3fbeb,#fff);border-color:var(--green-line)}
.mcard.accent .val{color:var(--green-dd)}
.two-col{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;margin-top:22px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden}
.panel-h{padding:16px 20px;border-bottom:1px solid var(--line);font-weight:700;font-size:1rem;display:flex;align-items:center;gap:8px}
.panel-h .svg{width:17px;height:17px;color:var(--green-d)}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:var(--mut);padding:11px 16px;border-bottom:1px solid var(--line);font-weight:600}
td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle}
tr:last-child td{border-bottom:none}
.tag-r{font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:6px;background:var(--bg-2);color:var(--ink-2)}
.tag-r.admin{background:#eef0ff;color:#4a4ec0}
.tag-r.prem{background:var(--green-soft);color:var(--green-dd)}
.tag-r.ban{background:#fdecec;color:#a32020}
.tag-r.act{background:#e8f7ee;color:#1f8f4a}
.uname{font-weight:700;color:var(--ink)}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.abtn{font-size:.76rem;font-weight:600;padding:6px 10px;border-radius:8px;border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);cursor:pointer;font-family:inherit}
.abtn:hover{background:var(--bg-2);border-color:var(--mut-2)}
.abtn.danger:hover{background:#fdecec;border-color:#f0b4b4;color:#a32020}
.abtn.go:hover{background:var(--green-soft);border-color:var(--green-line);color:var(--green-dd)}
.devlist{padding:8px 0}
.devrow{display:flex;align-items:center;gap:12px;padding:9px 20px}
.devrow .rank{width:22px;height:22px;border-radius:6px;background:var(--bg-2);color:var(--ink-2);font-size:.74rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.devrow .dname{font-size:.88rem;color:var(--ink-2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.devrow .dn{font-size:.82rem;font-weight:700;color:var(--green-dd)}
.empty{padding:26px 20px;text-align:center;color:var(--mut-2);font-size:.88rem}
@media(max-width:900px){.cards-grid{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}}

/* ── premium ── */
.prem-wrap{max-width:880px;margin:0 auto;padding:30px 0 70px;text-align:center}
.prem-wrap .eyebrow{margin:0 auto}
.prem-wrap h1{margin-top:18px}
.prem-wrap .sub{color:var(--ink-2);font-size:1.05rem;margin-top:12px}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:36px;text-align:left}
.plan{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm);padding:28px}
.plan.best{border:1.5px solid var(--green-line);box-shadow:var(--shadow);position:relative}
.plan .pn{font-size:.8rem;text-transform:uppercase;letter-spacing:.6px;color:var(--mut);font-weight:700}
.plan .pp{font-size:2.3rem;font-weight:800;letter-spacing:-1px;margin-top:10px}
.plan .pp small{font-size:.95rem;font-weight:500;color:var(--mut)}
.plan ul{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:12px}
.plan li{display:flex;align-items:flex-start;gap:10px;font-size:.93rem;color:var(--ink-2)}
.plan li .ck{width:20px;height:20px;border-radius:50%;background:var(--green-soft);color:var(--green-dd);display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:1px}
.plan li .ck .svg{width:12px;height:12px;stroke-width:3}
.plan li.off{color:var(--mut-2)}
.plan li.off .ck{background:var(--bg-2);color:var(--mut-2)}
.plan .cta{margin-top:24px}
.badge-best{position:absolute;top:-11px;right:22px;background:linear-gradient(180deg,var(--green),var(--green-d));color:#0a2606;font-size:.74rem;font-weight:700;padding:4px 12px;border-radius:20px}
.notice{margin-top:26px;background:var(--bg-2);border:1px dashed var(--line-2);border-radius:12px;padding:16px;color:var(--mut);font-size:.88rem}
@media(max-width:720px){.plans{grid-template-columns:1fr}}

/* ── manual: detalle profesional ── */
.moverview{color:var(--ink-2);font-size:.97rem;line-height:1.62;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.mcaution{margin-top:11px;display:flex;gap:9px;align-items:flex-start;background:#fff4f4;border:1px solid #f3cccc;border-radius:10px;padding:10px 13px;font-size:.86rem;color:#9e2a2a;line-height:1.45}
.mcaution .svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px;stroke-width:2.4}
.mcaution b{font-weight:700}
.mtip{margin-top:9px;display:flex;gap:9px;align-items:flex-start;background:var(--green-soft);border:1px solid var(--green-line);border-radius:10px;padding:10px 13px;font-size:.86rem;color:var(--green-dd);line-height:1.45}
.mtip .svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px}
.mtip b{font-weight:700}
.mstools{margin-top:11px;display:flex;flex-wrap:wrap;gap:6px}
.mstool{font-size:.74rem;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);padding:4px 10px;border-radius:7px;display:inline-flex;align-items:center;gap:5px}
.mstool .svg{width:12px;height:12px;color:var(--green-d)}