*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#f5f4f0;--surface:#fff;--border:#e4e2da;--text:#111;--muted:#777672;
  --accent:#1D9E75;--accent-dk:#0F6E56;--danger:#e24b4a;
  --r:10px;--font:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;}


.section { display: none; }
.section.active { display: block; }

/* ── AUTH ── */
#auth-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;}
.auth-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:36px 32px;width:100%;max-width:380px;}
.logo-row{display:flex;align-items:center;gap:10px;margin-bottom:28px;}
.logo-name{font-size:15px;font-weight:700;}
.logo-sub{font-size:11px;color:var(--muted);}
.auth-h{font-size:20px;font-weight:700;margin-bottom:5px;}
.auth-p{font-size:13px;color:var(--muted);margin-bottom:22px;}
.f-group{margin-bottom:13px;}
.f-group label{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-bottom:4px;}
.f-group input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:var(--font);color:var(--text);background:#fff;}
.f-group input:focus{outline:none;border-color:var(--accent);}
.btn-p{width:100%;padding:12px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;}
.btn-p:hover{background:var(--accent-dk);}
.btn-p:disabled{opacity:.55;cursor:not-allowed;}
.auth-sw{text-align:center;margin-top:14px;font-size:13px;color:var(--muted);}
.auth-sw a{color:var(--accent);cursor:pointer;font-weight:500;}
.msg{font-size:12px;padding:9px 12px;border-radius:7px;margin-bottom:12px;display:none;}
.msg.err{background:#fff0f0;color:var(--danger);border:1px solid #ffd0d0;}
.msg.ok{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0;}

/* ── APP SHELL ── */
#app-wrap{display:none;flex-direction:column;height:100vh;overflow:hidden;}
.topbar{background:var(--surface);border-bottom:1px solid var(--border);height:52px;display:flex;align-items:center;padding:0 20px;gap:12px;flex-shrink:0;z-index:50;}
.topbar-logo{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;margin-right:auto;}
.slug-display{font-size:12px;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:4px 10px;}
.tbtn{padding:6px 13px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text);}
.tbtn:hover{background:var(--bg);}
.tbtn.accent{background:var(--accent);color:#fff;border-color:var(--accent);}
.tbtn.accent:hover{background:var(--accent-dk);}
.tbtn.red{border-color:#ffd0d0;color:var(--danger);}

/* ── MAIN SPLIT ── */
.main{display:grid;grid-template-columns:minmax(0,1fr) 520px;flex:1;overflow:hidden;}

/* ── LEFT: tabs + form ── */
.editor-col{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border);}
.tabs-bar{display:flex;background:var(--surface);border-bottom:1px solid var(--border);padding:0 16px;overflow-x:auto;flex-shrink:0;}
.tabs-bar::-webkit-scrollbar{height:3px;}
.tabs-bar::-webkit-scrollbar-thumb{background:var(--border);}
.tab-btn{padding:14px 16px;font-size:12px;font-weight:500;color:var(--muted);border:none;background:transparent;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:all .15s;}
.tab-btn:hover{color:var(--text);}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600;}
.form-scroll{flex:1;overflow-y:auto;padding:20px;}
.form-scroll::-webkit-scrollbar{width:4px;}
.form-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}

/* ── FORM COMPONENTS ── */
.section{display:none;}
.section.active{display:block;}
.sec-title{font-size:16px;font-weight:700;margin-bottom:3px;}
.sec-sub{font-size:12px;color:var(--muted);margin-bottom:18px;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;margin-bottom:14px;}
.card-h{font-size:12px;font-weight:600;color:var(--text);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border);}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
.row1{margin-bottom:12px;}
.fg{display:flex;flex-direction:column;gap:4px;}
.fg label{font-size:11px;font-weight:500;color:var(--muted);}
.fg input[type=text],.fg input[type=url],.fg input[type=time],.fg textarea,.fg select{
  padding:8px 10px;border:1px solid var(--border);border-radius:7px;font-size:13px;
  font-family:var(--font);color:var(--text);background:#fff;width:100%;transition:border .15s;
}
.fg input:focus,.fg textarea:focus{outline:none;border-color:var(--accent);}
.fg textarea{resize:vertical;min-height:68px;}

/* Hex color input */
.color-row{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:center;}
.color-swatch{width:44px;height:36px;border-radius:7px;border:1px solid var(--border);cursor:pointer;padding:2px;}
.color-hex{padding:8px 10px;border:1px solid var(--border);border-radius:7px;font-size:13px;font-family:monospace;color:var(--text);background:#fff;width:100%;text-transform:uppercase;}
.color-hex:focus{outline:none;border-color:var(--accent);}

/* URL personalizada */
.url-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:0;border:1px solid var(--border);border-radius:7px;overflow:hidden;}
.url-prefix{padding:8px 10px;background:var(--bg);font-size:12px;color:var(--muted);white-space:nowrap;border-right:1px solid var(--border);}
.url-input{padding:8px 10px;border:none;font-size:13px;font-family:var(--font);color:var(--text);background:#fff;min-width:0;flex:1;}
.url-input:focus{outline:none;}
.url-suffix{padding:8px 10px;background:var(--bg);font-size:12px;color:var(--muted);white-space:nowrap;border-left:1px solid var(--border);}
.url-status{font-size:11px;margin-top:4px;}
.url-status.ok{color:#16a34a;}
.url-status.err{color:var(--danger);}
.url-status.checking{color:var(--muted);}

/* Upload */
.upload-zone{border:1.5px dashed var(--border);border-radius:8px;padding:16px;text-align:center;cursor:pointer;transition:border .15s;position:relative;overflow:hidden;}
.upload-zone:hover{border-color:var(--accent);}
.upload-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0;}
.upload-zone-txt{font-size:12px;color:var(--muted);}
.upload-prev{width:100%;height:72px;object-fit:cover;border-radius:6px;margin-top:8px;display:none;}
.upload-prev-round{width:60px;height:60px;border-radius:50%;object-fit:cover;margin-top:8px;display:none;}

/* Horários */
.hr-grid{display:flex;flex-direction:column;gap:7px;}
.hr-row{display:grid;grid-template-columns:72px 40px 1fr 1fr;gap:10px;align-items:center;}
.hr-day{font-size:13px;font-weight:500;}
.toggle{width:38px;height:22px;background:var(--border);border-radius:50px;position:relative;cursor:pointer;border:none;flex-shrink:0;transition:background .2s;}
.toggle.on{background:var(--accent);}
.toggle-dot{width:16px;height:16px;background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;transition:transform .2s;}
.toggle.on .toggle-dot{transform:translateX(16px);}
.hr-time{padding:6px 8px;border:1px solid var(--border);border-radius:7px;font-size:12px;font-family:var(--font);width:100%;}
.hr-time:disabled{background:var(--bg);color:var(--muted);}

/* Produtos */
.prod-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:13px;margin-bottom:10px;}
.prod-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.prod-label{font-size:12px;font-weight:600;}
.rm-btn{background:none;border:none;cursor:pointer;color:var(--muted);font-size:18px;line-height:1;padding:0 4px;border-radius:4px;}
.rm-btn:hover{color:var(--danger);background:#fff0f0;}
.add-btn{display:flex;align-items:center;gap:6px;padding:9px 14px;border:1.5px dashed var(--border);border-radius:8px;background:transparent;font-size:12px;color:var(--muted);cursor:pointer;font-family:var(--font);width:100%;margin-top:4px;justify-content:center;}
.add-btn:hover{border-color:var(--accent);color:var(--accent);}

/* Link rows */
.lnk-row{display:grid;grid-template-columns:1fr 1fr 28px;gap:7px;align-items:center;margin-bottom:7px;}
.lnk-row input{padding:7px 9px;border:1px solid var(--border);border-radius:7px;font-size:12px;font-family:var(--font);color:var(--text);background:#fff;width:100%;}
.lnk-row input:focus{outline:none;border-color:var(--accent);}

/* Modelo grid */
.model-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:4px;}
.model-card{border:2px solid var(--border);border-radius:9px;padding:12px 8px;text-align:center;cursor:pointer;transition:all .15s;}
.model-card:hover{border-color:#9FE1CB;}
.model-card.sel{border-color:var(--accent);background:#f0fdf8;}
.model-n{font-size:18px;font-weight:800;color:var(--accent);}
.model-nm{font-size:11px;font-weight:600;margin-top:2px;}
.model-ds{font-size:10px;color:var(--muted);margin-top:1px;}

/* Save bar */
.save-bar{background:var(--surface);border-top:1px solid var(--border);padding:12px 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.save-txt{font-size:12px;color:var(--muted);}
.save-txt.saved{color:#16a34a;}
.save-txt.saving{color:var(--accent);}
.save-txt.errored{color:var(--danger);}
.btn-save{padding:9px 22px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;}
.btn-save:hover{background:var(--accent-dk);}
.btn-save:disabled{opacity:.55;cursor:not-allowed;}

/* ── RIGHT: preview ── */
.preview-col{background:#e8e6e0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:20px 16px;overflow-y:auto;gap:12px;}
.preview-label{font-size:10px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.06em;align-self:flex-start;}
.phone-shell{width:280px;border-radius:28px;border:8px solid #1a1a1a;overflow:hidden;background:#fff;flex-shrink:0;box-shadow:0 8px 32px rgba(0,0,0,0.18);}
.phone-shell iframe{width:280px;height:540px;border:none;display:block;}
.preview-actions{display:flex;gap:8px;}
.prev-btn{padding:7px 14px;border-radius:7px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid #ccc;background:#fff;color:#333;}
.prev-btn:hover{background:#f5f4f0;}

/* Toast */
.toast{position:fixed;bottom:20px;right:20px;background:#111;color:#fff;padding:10px 16px;border-radius:9px;font-size:13px;font-weight:500;z-index:999;opacity:0;transition:opacity .2s;pointer-events:none;}
.toast.show{opacity:1;}

/* ── PUBLIC.HTML ── */
#loading{display:flex;align-items:center;justify-content:center;min-height:100vh;flex-direction:column;gap:12px;background:#111;}
.spinner{width:24px;height:24px;border:2px solid rgba(255,255,255,0.2);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
#loading p{font-size:13px;color:rgba(255,255,255,0.4);}
#not-found{display:none;align-items:center;justify-content:center;min-height:100vh;flex-direction:column;gap:12px;background:#111;text-align:center;padding:20px;}
#not-found h1{font-size:20px;font-weight:700;color:#fff;}
#not-found p{font-size:13px;color:rgba(255,255,255,0.5);}
#page{display:none;min-height:100vh;}

/* Admin Style */ 
*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#f5f4f0;--sur:#fff;--bdr:#e4e2da;--txt:#111;--mut:#777;
  --acc:#1D9E75;--acc2:#0F6E56;--red:#e24b4a;--amb:#f59e0b;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
body{font-family:var(--font);background:var(--bg);color:var(--txt);min-height:100vh;}

/* ── AUTH ── */
#auth-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;}
.auth-box{background:var(--sur);border:1px solid var(--bdr);border-radius:16px;padding:36px 32px;width:100%;max-width:380px;}
.auth-logo{display:flex;align-items:center;gap:10px;margin-bottom:28px;}
.auth-logo-txt{font-size:15px;font-weight:700;}
.auth-logo-sub{font-size:11px;color:var(--mut);}
.auth-badge{display:inline-block;background:#fff8e1;color:#b45309;border:1px solid #fde68a;border-radius:50px;font-size:11px;font-weight:600;padding:3px 10px;margin-bottom:16px;}
.f{margin-bottom:12px;}
.f label{display:block;font-size:12px;font-weight:500;color:var(--mut);margin-bottom:4px;}
.f input{width:100%;padding:10px 12px;border:1px solid var(--bdr);border-radius:8px;font-size:14px;font-family:var(--font);color:var(--txt);}
.f input:focus{outline:none;border-color:var(--acc);}
.btn-p{width:100%;padding:12px;background:var(--acc);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;}
.btn-p:hover{background:var(--acc2);}
.btn-p:disabled{opacity:.55;cursor:not-allowed;}
.msg{font-size:12px;padding:9px 12px;border-radius:7px;margin-bottom:12px;display:none;}
.msg.err{background:#fff0f0;color:var(--red);border:1px solid #ffd0d0;}

/* ── APP SHELL ── */
#app{display:none;min-height:100vh;}
.shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh;}

/* ── SIDEBAR ── */
.sidebar{background:var(--sur);border-right:1px solid var(--bdr);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;}
.sb-logo{display:flex;align-items:center;gap:9px;padding:18px 16px 14px;border-bottom:1px solid var(--bdr);}
.sb-logo-name{font-size:14px;font-weight:700;}
.sb-logo-badge{font-size:9px;font-weight:700;background:#fff8e1;color:#b45309;border:1px solid #fde68a;border-radius:50px;padding:2px 7px;}
.sb-section{font-size:10px;font-weight:600;color:#aaa;text-transform:uppercase;letter-spacing:.07em;padding:12px 16px 4px;}
.sb-item{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:13px;font-weight:500;color:var(--mut);cursor:pointer;border-left:2px solid transparent;transition:all .15s;background:none;border-top:none;border-right:none;border-bottom:none;width:100%;text-align:left;font-family:var(--font);}
.sb-item:hover{color:var(--txt);background:var(--bg);}
.sb-item.active{color:var(--acc);border-left-color:var(--acc);background:#f0fdf8;font-weight:600;}
.sb-item svg{flex-shrink:0;opacity:.7;}
.sb-item.active svg{opacity:1;}
.sb-divider{height:1px;background:var(--bdr);margin:6px 16px;}
.sb-footer{margin-top:auto;padding:14px 16px;border-top:1px solid var(--bdr);}
.sb-user{display:flex;align-items:center;gap:8px;}
.sb-avatar{width:30px;height:30px;border-radius:50%;background:#f0fdf8;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--acc);flex-shrink:0;}
.sb-user-info{min-width:0;}
.sb-user-name{font-size:12px;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-user-role{font-size:10px;color:var(--mut);}
.sb-signout{font-size:11px;color:var(--mut);cursor:pointer;padding:2px 0;background:none;border:none;font-family:var(--font);}
.sb-signout:hover{color:var(--red);}

/* ── MAIN ── */
.main-content{padding:28px;overflow-y:auto;}
.page{display:none;}
.page.active{display:block;}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;gap:16px;}
.page-title{font-size:20px;font-weight:700;}
.page-sub{font-size:13px;color:var(--mut);margin-top:2px;}

/* ── CARDS ── */
.card{background:var(--sur);border:1px solid var(--bdr);border-radius:10px;padding:18px 20px;margin-bottom:16px;}
.card-h{font-size:13px;font-weight:600;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px;}
.stat-card{background:var(--sur);border:1px solid var(--bdr);border-radius:10px;padding:16px 18px;}
.stat-card.green{border-color:#9FE1CB;background:#f0fdf8;}
.stat-card.amber{border-color:#fde68a;background:#fff8e1;}
.stat-card.red{border-color:#ffd0d0;background:#fff0f0;}
.stat-label{font-size:11px;font-weight:500;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;}
.stat-val{font-size:28px;font-weight:800;color:var(--txt);line-height:1;}
.stat-card.green .stat-val{color:var(--acc);}
.stat-card.amber .stat-val{color:#b45309;}
.stat-card.red .stat-val{color:var(--red);}
.stat-sub{font-size:11px;color:#aaa;margin-top:4px;}

/* ── TABELAS ── */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{font-size:11px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;padding:8px 12px;text-align:left;border-bottom:1px solid var(--bdr);white-space:nowrap;}
td{padding:11px 12px;border-bottom:1px solid #f0eeea;vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:#fafaf8;}
.badge{display:inline-block;font-size:10px;font-weight:600;padding:3px 9px;border-radius:50px;}
.badge.green{background:#f0fdf8;color:var(--acc);border:1px solid #9FE1CB;}
.badge.red{background:#fff0f0;color:var(--red);border:1px solid #ffd0d0;}
.badge.amber{background:#fff8e1;color:#b45309;border:1px solid #fde68a;}
.badge.gray{background:var(--bg);color:var(--mut);border:1px solid var(--bdr);}
.badge.blue{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;}

/* ── BOTÕES ── */
.btn{padding:7px 14px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--bdr);background:transparent;color:var(--txt);font-family:var(--font);transition:all .15s;}
.btn:hover{background:var(--bg);}
.btn.primary{background:var(--acc);color:#fff;border-color:var(--acc);}
.btn.primary:hover{background:var(--acc2);border-color:var(--acc2);}
.btn.danger{border-color:#ffd0d0;color:var(--red);}
.btn.danger:hover{background:#fff0f0;}
.btn.sm{padding:4px 10px;font-size:11px;}
.btn.icon-btn{padding:5px 8px;display:inline-flex;align-items:center;gap:4px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* ── FORMS ── */
.fg{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;}
.fg label{font-size:12px;font-weight:500;color:var(--mut);}
.fg input,.fg select,.fg textarea{padding:8px 11px;border:1px solid var(--bdr);border-radius:7px;font-size:13px;font-family:var(--font);color:var(--txt);background:#fff;width:100%;}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--acc);}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}

/* ── MODAL ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:var(--sur);border-radius:14px;padding:24px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.modal-title{font-size:16px;font-weight:700;}
.modal-close{background:none;border:none;cursor:pointer;font-size:20px;color:var(--mut);line-height:1;}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--bdr);}

/* ── TOGGLE ── */
.toggle-wrap{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.toggle{width:38px;height:22px;background:var(--bdr);border-radius:50px;position:relative;cursor:pointer;border:none;transition:background .2s;flex-shrink:0;}
.toggle.on{background:var(--acc);}
.toggle-dot{width:16px;height:16px;background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;transition:transform .2s;}
.toggle.on .toggle-dot{transform:translateX(16px);}
.toggle-label{font-size:13px;font-weight:500;}
.toggle-desc{font-size:11px;color:var(--mut);}

/* ── PLANOS ── */
.plan-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #f0eeea;}
.plan-row:last-child{border-bottom:none;}
.plan-name{font-size:14px;font-weight:700;min-width:80px;}
.plan-price{font-size:13px;color:var(--mut);min-width:80px;}
.features-grid{display:flex;flex-wrap:wrap;gap:6px;flex:1;}
.feat-chip{display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:50px;font-size:11px;font-weight:500;border:1px solid var(--bdr);background:var(--bg);cursor:pointer;transition:all .15s;}
.feat-chip.on{background:#f0fdf8;border-color:#9FE1CB;color:var(--acc);}
.feat-chip:hover{border-color:var(--acc);}

/* ── CHART ── */
.chart-wrap{position:relative;height:200px;margin-top:8px;}

/* ── SEARCH ── */
.search-row{display:flex;gap:10px;align-items:center;margin-bottom:16px;}
.search-input{flex:1;padding:9px 12px;border:1px solid var(--bdr);border-radius:8px;font-size:13px;font-family:var(--font);color:var(--txt);background:#fff;}
.search-input:focus{outline:none;border-color:var(--acc);}
.filter-select{padding:9px 12px;border:1px solid var(--bdr);border-radius:8px;font-size:13px;font-family:var(--font);color:var(--txt);background:#fff;cursor:pointer;}

/* ── TOAST ── */
.toast{position:fixed;bottom:20px;right:20px;background:#111;color:#fff;padding:10px 16px;border-radius:9px;font-size:13px;font-weight:500;z-index:999;opacity:0;transition:opacity .2s;pointer-events:none;}
.toast.show{opacity:1;}

/* ── EMPTY ── */
.empty{text-align:center;padding:40px;color:var(--mut);font-size:13px;}
.empty svg{margin-bottom:8px;opacity:.3;}

/* ── AVATAR CHIP ── */
.av-chip{width:32px;height:32px;border-radius:50%;background:#f0fdf8;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--acc);flex-shrink:0;}




/* Conta Style */ 


.page-wrap{padding:28px;max-width:700px;}
.page-title{font-size:20px;font-weight:700;color:#111;margin-bottom:4px;}
.page-sub{font-size:13px;color:#777;margin-bottom:24px;}

/* Abas internas */
.inner-tabs{display:flex;gap:0;border-bottom:1px solid #e4e2da;margin-bottom:24px;}
.inner-tab{padding:10px 18px;font-size:13px;font-weight:500;color:#777;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit;}
.inner-tab:hover{color:#111;}
.inner-tab.active{color:#1D9E75;border-bottom-color:#1D9E75;font-weight:600;}

.section{display:none;}
.section.active{display:block;}

/* Cards */
.card{background:#fff;border:1px solid #e4e2da;border-radius:10px;padding:20px 22px;margin-bottom:16px;}
.card-h{font-size:13px;font-weight:600;color:#111;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid #e4e2da;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.row1{margin-bottom:14px;}
.fg{display:flex;flex-direction:column;gap:4px;}
.fg label{font-size:12px;font-weight:500;color:#777;}
.fg input,.fg select{padding:9px 11px;border:1px solid #e4e2da;border-radius:8px;font-size:13px;font-family:inherit;color:#111;background:#fff;width:100%;transition:border .15s;}
.fg input:focus,.fg select:focus{outline:none;border-color:#1D9E75;}
.fg .hint{font-size:11px;color:#aaa;margin-top:3px;}

/* Avatar */
.avatar-row{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
.avatar-circle{width:72px;height:72px;border-radius:50%;background:#e4e2da;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#888;}
.avatar-circle img{width:100%;height:100%;object-fit:cover;}
.avatar-actions{display:flex;flex-direction:column;gap:6px;}
.btn-outline{padding:7px 16px;border:1px solid #e4e2da;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;background:transparent;color:#111;font-family:inherit;}
.btn-outline:hover{background:#f5f4f0;}
.btn-outline.danger{border-color:#ffd0d0;color:#e24b4a;}
.btn-outline.danger:hover{background:#fff0f0;}

/* Toggle pessoa física/jurídica */
.person-toggle{display:flex;gap:8px;margin-bottom:14px;}
.person-opt{flex:1;padding:9px;border:1px solid #e4e2da;border-radius:8px;text-align:center;cursor:pointer;font-size:13px;font-weight:500;color:#777;transition:all .15s;}
.person-opt:hover{border-color:#9FE1CB;}
.person-opt.active{border-color:#1D9E75;background:#f0fdf8;color:#1D9E75;font-weight:600;}

/* Planos */
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px;}
.plan-card{border:2px solid #e4e2da;border-radius:10px;padding:16px 14px;cursor:pointer;transition:all .15s;position:relative;}
.plan-card:hover{border-color:#9FE1CB;}
.plan-card.current{border-color:#1D9E75;background:#f0fdf8;}
.plan-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:#1D9E75;color:#fff;font-size:10px;font-weight:700;padding:2px 10px;border-radius:50px;white-space:nowrap;}
.plan-name{font-size:15px;font-weight:700;color:#111;margin-bottom:4px;}
.plan-price{font-size:22px;font-weight:800;color:#1D9E75;margin-bottom:8px;}
.plan-price span{font-size:12px;font-weight:400;color:#aaa;}
.plan-features{list-style:none;display:flex;flex-direction:column;gap:5px;}
.plan-features li{font-size:11px;color:#555;display:flex;align-items:center;gap:5px;}
.plan-features li::before{content:'✓';color:#1D9E75;font-weight:700;font-size:11px;}
.plan-features li.off{color:#ccc;}
.plan-features li.off::before{content:'—';color:#ddd;}

/* Pixels */
.pixel-card{background:#fff;border:1px solid #e4e2da;border-radius:10px;padding:16px 18px;margin-bottom:10px;}
.pixel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.pixel-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#111;}
.pixel-badge-lock{font-size:10px;font-weight:600;padding:2px 8px;border-radius:50px;background:#fff8e1;color:#f59e0b;border:1px solid #fde68a;}
.pixel-badge-ok{font-size:10px;font-weight:600;padding:2px 8px;border-radius:50px;background:#f0fdf8;color:#1D9E75;border:1px solid #9FE1CB;}
.pixel-input-row{display:flex;gap:8px;align-items:center;}
.pixel-input-row input{flex:1;padding:8px 11px;border:1px solid #e4e2da;border-radius:8px;font-size:13px;font-family:monospace;color:#111;background:#fff;}
.pixel-input-row input:disabled{background:#f5f4f0;color:#aaa;}
.pixel-input-row input:focus{outline:none;border-color:#1D9E75;}
.upgrade-hint{font-size:11px;color:#aaa;margin-top:6px;}
.upgrade-hint a{color:#1D9E75;cursor:pointer;text-decoration:none;font-weight:500;}

/* Botão salvar */
.save-row{display:flex;align-items:center;justify-content:space-between;margin-top:20px;}
.save-msg{font-size:12px;color:#aaa;}
.save-msg.ok{color:#16a34a;}
.save-msg.err{color:#e24b4a;}
.btn-save{padding:10px 24px;background:#1D9E75;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;}
.btn-save:hover{background:#0F6E56;}
.btn-save:disabled{opacity:.55;cursor:not-allowed;}

/* Toast */
.toast{position:fixed;bottom:20px;right:20px;background:#111;color:#fff;padding:10px 16px;border-radius:9px;font-size:13px;font-weight:500;z-index:999;opacity:0;transition:opacity .2s;pointer-events:none;}
.toast.show{opacity:1;}



/* Dashboard Style */

.page-wrap{padding:28px;max-width:1000px;}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:gap;}
.page-title{font-size:20px;font-weight:700;color:#111;}
.page-sub{font-size:13px;color:#777;margin-top:2px;}
.period-select{padding:8px 12px;border:1px solid #e4e2da;border-radius:8px;font-size:13px;font-family:inherit;color:#111;background:#fff;cursor:pointer;}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:20px;}
.stat-card{background:#fff;border:1px solid #e4e2da;border-radius:10px;padding:16px 18px;}
.stat-label{font-size:11px;font-weight:500;color:#888;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;}
.stat-value{font-size:26px;font-weight:800;color:#111;line-height:1.1;}
.stat-sub{font-size:11px;color:#aaa;margin-top:4px;}
.stat-card.accent{border-color:#9FE1CB;background:#f0fdf8;}
.stat-card.accent .stat-value{color:#1D9E75;}
.chart-card{background:#fff;border:1px solid #e4e2da;border-radius:10px;padding:20px;margin-bottom:16px;}
.chart-title{font-size:13px;font-weight:600;color:#111;margin-bottom:16px;}
.chart-wrap{position:relative;height:200px;}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;}
.info-card{background:#fff;border:1px solid #e4e2da;border-radius:10px;padding:14px 16px;}
.info-label{font-size:11px;font-weight:500;color:#888;text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;}
.info-value{font-size:14px;font-weight:600;color:#111;}
.info-sub{font-size:11px;color:#aaa;margin-top:2px;}
.links-table{width:100%;border-collapse:collapse;}
.links-table th{font-size:11px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.05em;padding:8px 12px;text-align:left;border-bottom:1px solid #e4e2da;}
.links-table td{font-size:13px;padding:10px 12px;border-bottom:1px solid #f0eeea;color:#111;}
.links-table tr:last-child td{border-bottom:none;}
.links-table .bar-cell{width:120px;}
.bar-bg{height:6px;background:#f0eeea;border-radius:3px;overflow:hidden;}
.bar-fill{height:6px;background:#1D9E75;border-radius:3px;transition:width .6s;}
.badge-type{font-size:10px;font-weight:600;padding:2px 7px;border-radius:50px;background:#f0fdf8;color:#1D9E75;border:1px solid #9FE1CB;}
.empty-state{text-align:center;padding:40px 20px;color:#aaa;font-size:13px;}
.skeleton{background:linear-gradient(90deg,#f0eeea 25%,#e8e6e0 50%,#f0eeea 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:6px;}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.loading-block{height:24px;margin-bottom:8px;}



/* Aba Plans */ 
  @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@300;400;500;600;700&display=swap');
 
  :root {
    --brand:      #FF6B35;
    --brand-dark: #e0521e;
    --brand-glow: rgba(255,107,53,.12);
    --text:       #111;
    --text-2:     #555;
    --text-3:     #999;
    --border:     #e8e8e8;
    --bg:         #f7f7f7;
    --card:       #fff;
    --success:    #16a34a;
    --error:      #dc2626;
    --radius:     16px;
    --radius-sm:  10px;
  }
 
  .sub-root *, .sub-root *::before, .sub-root *::after { box-sizing: border-box; margin: 0; padding: 0; }
  .sub-root {
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
    max-width: 680px;
    margin: 0 auto;
    padding: 40px 20px 80px;
  }
 
  /* ── Cabeçalho ── */
  .sub-header { text-align: center; margin-bottom: 32px; }
  .sub-header h2 {
    font-family: 'DM Serif Display', serif;
    font-size: 1.9rem;
    font-weight: 400;
    margin-bottom: 6px;
  }
  .sub-header p { color: var(--text-2); font-size: .93rem; font-weight: 300; }
 
  /* ── Status ── */
  .sub-status {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 13px 18px;
    margin-bottom: 28px;
    font-size: .87rem;
  }
  .sub-status .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #d1d5db; flex-shrink: 0;
  }
  .sub-status .dot.active {
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(22,163,74,.15);
  }
  .sub-status strong { color: var(--text); }
  .sub-status span   { color: var(--text-3); }
 
  /* ── Cards de plano ── */
  .plans-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 28px;
  }
  @media (max-width: 480px) { .plans-grid { grid-template-columns: 1fr; } }
 
  .plan-card {
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 20px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .18s;
    position: relative;
    background: var(--card);
    user-select: none;
  }
  .plan-card:hover {
    border-color: var(--brand);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--brand-glow);
  }
  .plan-card.selected {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow);
  }
  .plan-card.is-current {
    border-color: var(--text);
  }
 
  /* Pill */
  .plan-pill {
    position: absolute;
    top: -11px; left: 50%;
    transform: translateX(-50%);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 3px 14px;
    border-radius: 20px;
    white-space: nowrap;
  }
  .plan-pill.popular  { background: var(--brand); color: #fff; }
  .plan-pill.current  { background: var(--text);  color: #fff; }
 
  /* Radio */
  .plan-radio {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border);
    position: absolute; top: 18px; right: 18px;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s;
    flex-shrink: 0;
  }
  .plan-card.selected .plan-radio {
    border-color: var(--brand);
    background: var(--brand);
  }
  .plan-card.selected .plan-radio::after {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fff;
  }
 
  .plan-name {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 10px;
  }
 
  .plan-price {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    line-height: 1;
    margin-bottom: 4px;
  }
  .plan-price .currency { font-size: .8rem; color: var(--text-2); padding-bottom: 4px; }
  .plan-price .amount   { font-size: 2.2rem; font-weight: 800; color: var(--text); letter-spacing: -1px; }
  .plan-price .period   { font-size: .78rem; color: var(--text-3); padding-bottom: 5px; margin-left: 2px; }
 
  .plan-note {
    font-size: .76rem;
    color: var(--text-3);
    margin-bottom: 18px;
    min-height: 14px;
  }
  .plan-note.savings {
    color: var(--success);
    font-weight: 600;
  }
 
  .plan-features { list-style: none; display: flex; flex-direction: column; gap: 7px; }
  .plan-features li {
    font-size: .83rem;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .plan-features li::before {
    content: '✓';
    color: var(--brand);
    font-weight: 800;
    font-size: .85rem;
    flex-shrink: 0;
  }
 
  /* ── Checkout ── */
  .checkout-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }
 
  .checkout-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .checkout-header h3 {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text);
  }
  .checkout-summary {
    margin-left: auto;
    text-align: right;
    font-size: .82rem;
  }
  .checkout-summary .cs-plan  { color: var(--text-2); }
  .checkout-summary .cs-price { font-weight: 700; color: var(--text); font-size: .9rem; }
 
  .checkout-body { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
 
  /* Campos */
  .field-group { display: flex; flex-direction: column; gap: 6px; }
  .field-label {
    font-size: .75rem;
    font-weight: 700;
    color: var(--text-2);
    letter-spacing: .4px;
    text-transform: uppercase;
  }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
 
  .field-input {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: 'DM Sans', sans-serif;
    font-size: .9rem;
    color: var(--text);
    background: var(--bg);
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
  }
  .field-input::placeholder { color: #bbb; }
  .field-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow);
    background: #fff;
  }
 
  .card-wrapper { position: relative; }
  .card-wrapper .field-input { padding-right: 40px; }
  .card-wrapper .brand-icon {
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem; pointer-events: none;
  }
 
  /* Métodos */
  .methods-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .method-btn {
    padding: 11px 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    gap: 7px;
    font-family: 'DM Sans', sans-serif;
    font-size: .86rem;
    font-weight: 500;
    color: var(--text-2);
    transition: all .2s;
  }
  .method-btn:hover { border-color: var(--brand); color: var(--text); }
  .method-btn.active {
    border-color: var(--brand);
    background: var(--brand-glow);
    color: var(--text);
    font-weight: 600;
  }
 
  /* Info PIX */
  .pix-box {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-sm);
    padding: 15px 16px;
    display: flex; gap: 12px;
    font-size: .86rem; color: #166534;
    line-height: 1.5;
  }
  .pix-box .pix-ico { font-size: 1.3rem; flex-shrink: 0; }
 
  /* Feedback */
  .feedback {
    display: none;
    padding: 13px 15px;
    border-radius: var(--radius-sm);
    font-size: .86rem;
    font-weight: 500;
    align-items: center;
    gap: 9px;
    line-height: 1.4;
  }
  .feedback.success { display: flex; background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
  .feedback.error   { display: flex; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
 
  /* Botão */
  .btn-assinar {
    width: 100%;
    padding: 14px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'DM Sans', sans-serif;
    font-size: .97rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .15s, box-shadow .2s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
  }
  .btn-assinar:hover:not(:disabled) {
    background: var(--brand-dark);
    box-shadow: 0 4px 14px var(--brand-glow);
  }
  .btn-assinar:active:not(:disabled) { transform: scale(.98); }
  .btn-assinar:disabled { background: #d1d5db; cursor: not-allowed; }
 
  .spinner {
    width: 17px; height: 17px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    display: none;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
 
  /* Footer */
  .checkout-footer {
    padding: 13px 22px;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: .74rem;
    color: var(--text-3);
  }