:root{
  --bg-primary:#050810;--bg-secondary:#0c1120;--bg-tertiary:#111827;--bg-glass:rgba(255,255,255,.04);--bg-glass-hover:rgba(255,255,255,.07);
  --brand-primary:#00C48C;--brand-secondary:#0066ff;--brand-glow:rgba(0,196,140,.15);--brand-blue-glow:rgba(0,102,255,.15);
  --text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#475569;--text-inverse:#050810;
  --border-subtle:rgba(255,255,255,.06);--border-default:rgba(255,255,255,.1);--border-strong:rgba(255,255,255,.18);--border-brand:rgba(0,196,140,.35);
  --success:#00C48C;--warning:#f59e0b;--danger:#f43f5e;--info:#0066ff;
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);--shadow-md:0 4px 20px rgba(0,0,0,.5);--shadow-lg:0 8px 40px rgba(0,0,0,.6);--shadow-glow:0 0 30px rgba(0,196,140,.12);
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-full:9999px;--transition:all .2s cubic-bezier(.4,0,.2,1);--sidebar-width:240px;--topbar-height:56px;--page-max:1480px
}
.admin-theme{--brand-primary:#6366f1;--brand-secondary:#8b5cf6;--brand-glow:rgba(99,102,241,.15);--brand-blue-glow:rgba(139,92,246,.15);--border-brand:rgba(99,102,241,.35);--shadow-glow:0 0 30px rgba(99,102,241,.15)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
html{background:var(--bg-primary)}
body{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;line-height:1.6;color:var(--text-primary);-webkit-font-smoothing:antialiased;position:relative;
  background:radial-gradient(circle at top left,rgba(0,102,255,.11),transparent 28%),radial-gradient(circle at 85% 0,rgba(0,196,140,.1),transparent 24%),linear-gradient(180deg,#060913 0%,#050810 48%,#070d19 100%)
}
body::before,body::after{content:'';position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;opacity:.45}
body::before{width:340px;height:340px;top:-120px;right:-100px;background:rgba(0,102,255,.12)}
body::after{width:320px;height:320px;bottom:-110px;left:-90px;background:rgba(0,196,140,.08)}
h1,h2,h3,h4,h5,h6,p,ul,ol,pre{margin:0}
h1{font-size:28px;font-weight:800;letter-spacing:-.5px}h2{font-size:22px;font-weight:700;letter-spacing:-.3px}h3{font-size:17px;font-weight:600}h4{font-size:15px;font-weight:600}
a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}
code,pre,.api-key-text,.mono{font-family:'JetBrains Mono',monospace;font-size:13px}
pre{white-space:pre-wrap;word-break:break-word}img{max-width:100%;display:block}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.app-shell{min-height:100vh;position:relative;z-index:1}
.app-main{margin-left:var(--sidebar-width);min-height:100vh;position:relative}
.public-shell .app-main{margin-left:0}
.sidebar{
  width:var(--sidebar-width);height:100vh;position:fixed;left:0;top:0;background:rgba(12,17,32,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;z-index:100;box-shadow:var(--shadow-md)
}
.sidebar-logo{padding:20px 20px 16px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;gap:12px}
.sidebar-logo-icon{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand-primary),#00C48C);display:grid;place-items:center;color:var(--text-inverse);box-shadow:var(--shadow-glow);flex-shrink:0}
.admin-theme .sidebar-logo-icon{background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary))}
.sidebar-logo-text{font-size:15px;font-weight:700;letter-spacing:-.2px}.sidebar-logo-meta{font-size:11px;color:var(--text-muted)}
.sidebar-nav{flex:1;padding:12px;overflow-y:auto}.nav-group+.nav-group{margin-top:10px}
.nav-group-label{font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--text-muted);padding:12px 8px 6px}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:13.5px;font-weight:500;
  transition:var(--transition);border:1px solid transparent;margin-bottom:2px
}
.nav-item:hover{background:var(--bg-glass-hover);color:var(--text-primary)}
.nav-item.active{background:var(--brand-glow);color:var(--brand-primary);border-color:var(--border-brand)}
.nav-item .nav-icon,.nav-item i{width:16px;height:16px;opacity:.8;flex-shrink:0}.nav-item.active .nav-icon,.nav-item.active i{opacity:1}
.sidebar-user{padding:12px;border-top:1px solid var(--border-subtle)}
.sidebar-user-card{background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:12px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-sm)}
.user-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));display:grid;place-items:center;color:var(--text-inverse);flex-shrink:0}
.user-avatar i{width:16px;height:16px}.user-info{min-width:0}.user-info-name{font-size:13px;font-weight:600}.user-info-meta{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-info-credits{font-size:11px;color:var(--brand-primary);font-weight:600}
.sidebar-overlay{display:none}

.topbar{
  height:var(--topbar-height);position:fixed;top:0;left:var(--sidebar-width);right:0;background:rgba(5,8,16,.84);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;padding:0 32px;z-index:99
}
.public-shell .topbar{left:0}.topbar-left,.topbar-actions{display:flex;align-items:center;gap:12px}.topbar-left{gap:14px}
.topbar-hamburger{display:none;width:36px;height:36px;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--bg-glass);border:1px solid var(--border-default);color:var(--text-primary);cursor:pointer;transition:var(--transition)}
.topbar-hamburger:hover{background:var(--bg-glass-hover)}
.topbar-breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px}.breadcrumb-item,.breadcrumb-separator{color:var(--text-muted)}.breadcrumb-separator{opacity:.45}.breadcrumb-current{color:var(--text-primary);font-weight:500}
.topbar-credits-badge,.topbar-admin-badge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-full);padding:5px 12px;font-size:12px;font-weight:600;border:1px solid}
.topbar-credits-badge{background:var(--brand-glow);border-color:var(--border-brand);color:var(--brand-primary)}
.topbar-admin-badge{background:rgba(99,102,241,.15);border-color:rgba(99,102,241,.3);color:#a5b4fc}

.main-content{margin-top:var(--topbar-height);padding:28px 32px;min-height:calc(100vh - var(--topbar-height));animation:fadeUp .3s ease-out}
.main-content-inner{max-width:var(--page-max);margin:0 auto;display:grid;gap:24px}
.footer{padding:0 32px 28px;color:var(--text-muted)}.footer-inner{max-width:var(--page-max);margin:0 auto;border-top:1px solid var(--border-subtle);padding-top:18px;font-size:12px}
.flash-feed{display:none}

.page-header,.hero-banner-content,.card-header,.card-head,.table-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.page-title{font-size:24px;font-weight:800;letter-spacing:-.4px;margin-bottom:4px}.page-subtitle{font-size:13px;color:var(--text-secondary)}.page-actions,.form-actions,.toolbar-inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hero-banner{
  position:relative;overflow:hidden;padding:26px 28px;border-radius:var(--radius-xl);border:1px solid var(--border-subtle);box-shadow:var(--shadow-md);
  background:linear-gradient(135deg,rgba(0,196,140,.09),transparent 40%),linear-gradient(135deg,rgba(0,102,255,.1),transparent 58%),rgba(12,17,32,.92)
}
.admin-theme .hero-banner{background:linear-gradient(135deg,rgba(99,102,241,.14),transparent 40%),linear-gradient(135deg,rgba(139,92,246,.12),transparent 58%),rgba(12,17,32,.92)}
.hero-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent),linear-gradient(0deg,transparent,rgba(255,255,255,.02),transparent);background-size:220px 100%,100% 120px;pointer-events:none}
.hero-banner-label{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--radius-full);background:var(--bg-glass);border:1px solid var(--border-default);font-size:11px;color:var(--text-secondary);margin-bottom:14px}
.hero-banner h2{font-size:clamp(26px,4vw,36px);letter-spacing:-.7px}.hero-banner p{margin-top:10px;max-width:680px;color:var(--text-secondary)}
.hero-banner-meta{display:grid;gap:10px;min-width:220px}.hero-metric{border-radius:var(--radius-lg);padding:14px 16px;border:1px solid var(--border-subtle);background:rgba(255,255,255,.03)}
.hero-metric-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:6px}.hero-metric-value{font-size:16px;font-weight:700}

.grid{display:grid;gap:24px}.two-column-grid{grid-template-columns:minmax(0,1.6fr) minmax(320px,.9fr)}.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats-grid{display:grid;gap:18px}.stats-grid.four-col{grid-template-columns:repeat(4,minmax(0,1fr))}.stats-grid.six-col{grid-template-columns:repeat(6,minmax(0,1fr))}
.card,.table-container,.chart-shell,.glass-panel,.plan-card,.instance-card,.instance-create-card,.admin-summary-card{background:rgba(12,17,32,.88);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.card,.instance-card,.plan-card,.instance-create-card,.chart-shell{transition:var(--transition)}
.card:hover,.table-container:hover,.chart-shell:hover,.instance-card:hover,.plan-card:hover{border-color:var(--border-default)}
.glass-panel{background:var(--bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.card-header{padding:20px 24px 16px;border-bottom:1px solid var(--border-subtle)}.card-title{font-size:14px;font-weight:600}.card-title-stack p{margin-top:4px;font-size:12px;color:var(--text-secondary)}
.table-toolbar{padding:16px 20px;border-bottom:1px solid var(--border-subtle);align-items:center}
.card-body{padding:20px 24px}.card-footer{padding:16px 24px 20px;border-top:1px solid var(--border-subtle)}.card-head{padding:20px 24px 0}.card-content{padding:20px 24px 24px}.narrow{max-width:720px}
.stat-card{
  background:rgba(12,17,32,.88);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:20px 24px;position:relative;overflow:hidden;transition:var(--transition);animation:fadeUp .3s ease-out both
}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--brand-primary),transparent);opacity:0;transition:var(--transition)}
.stat-card:hover::before{opacity:1}.stat-card:hover{border-color:var(--border-default);transform:translateY(-1px)}
.stat-card:nth-child(1){animation-delay:.05s}.stat-card:nth-child(2){animation-delay:.1s}.stat-card:nth-child(3){animation-delay:.15s}.stat-card:nth-child(4){animation-delay:.2s}
.stat-icon{width:36px;height:36px;border-radius:var(--radius-sm);display:grid;place-items:center;margin-bottom:16px}.stat-icon i{width:16px;height:16px}
.stat-icon.mint{background:var(--brand-glow);color:var(--brand-primary)}.stat-icon.blue{background:var(--brand-blue-glow);color:var(--brand-secondary)}.stat-icon.warning{background:rgba(245,158,11,.12);color:var(--warning)}.stat-icon.danger{background:rgba(244,63,94,.12);color:var(--danger)}
.stat-value{font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1;margin-bottom:6px}.stat-label{font-size:12px;color:var(--text-secondary);font-weight:500}.stat-trend{font-size:11px;font-weight:600;margin-top:12px}.stat-trend.up{color:var(--success)}.stat-trend.down{color:var(--danger)}

.btn,.btn-primary,.btn-secondary,.btn-danger,.btn-ghost,.btn-outline,button[type='submit']{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;transition:var(--transition);text-decoration:none;line-height:1;white-space:nowrap
}
.btn,.btn-secondary,.btn-outline{background:var(--bg-glass);color:var(--text-primary);border:1px solid var(--border-default)}
.btn:hover,.btn-secondary:hover,.btn-outline:hover{background:var(--bg-glass-hover);border-color:var(--border-strong)}
.btn-primary,button.btn-primary,button[type='submit'].btn-primary{background:var(--brand-primary);color:var(--text-inverse);border:none;box-shadow:0 0 0 0 var(--brand-glow)}
.btn-primary:hover,button.btn-primary:hover,button[type='submit'].btn-primary:hover{background:#00BB81;box-shadow:0 0 20px rgba(0,196,140,.25);transform:translateY(-1px)}
.admin-theme .btn-primary:hover,.admin-theme button.btn-primary:hover,.admin-theme button[type='submit'].btn-primary:hover{background:#5658e8;box-shadow:0 0 22px rgba(99,102,241,.28)}
.btn-danger,button.btn-danger{background:rgba(244,63,94,.12);color:var(--danger);border:1px solid rgba(244,63,94,.2)}.btn-danger:hover,button.btn-danger:hover{background:rgba(244,63,94,.2)}
.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid transparent}.btn-ghost:hover{background:var(--bg-glass);color:var(--text-primary);border-color:var(--border-subtle)}
.btn-sm,.btn-outline.sm,.btn-danger.sm{padding:6px 12px;font-size:12px}.btn-lg{padding:12px 24px;font-size:14px}.btn-icon{padding:8px;width:34px;height:34px}
.btn:active,.btn-primary:active,.btn-secondary:active,.btn-danger:active,.btn-ghost:active,.btn-outline:active{transform:scale(.97)}

.form-grid{display:grid;gap:18px}.form-grid.horizontal{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}.filter-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.filter-grid>div,.inline-fields,.metric-list,.summary-list{display:grid;gap:8px}.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.form-label,label{display:block;font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px}
.form-control,input,select,textarea{
  width:100%;background:var(--bg-tertiary);border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:10px 14px;font-size:13.5px;color:var(--text-primary);transition:var(--transition);outline:none
}
textarea{resize:vertical;min-height:110px}input::placeholder,textarea::placeholder{color:var(--text-muted)}
.form-control:focus,input:focus,select:focus,textarea:focus{border-color:var(--brand-primary);box-shadow:0 0 0 3px var(--brand-glow)}
.form-control:hover:not(:focus),input:hover:not(:focus),select:hover:not(:focus),textarea:hover:not(:focus){border-color:var(--border-strong)}
.form-hint,.muted{font-size:11.5px;color:var(--text-muted)}
.input-with-icon{position:relative}.input-with-icon .form-control,.input-with-icon input{padding-left:38px}.input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);width:15px;height:15px}
.checkbox,.toggle-row{display:inline-flex;align-items:center;gap:10px;color:var(--text-secondary);text-transform:none;letter-spacing:0}.checkbox input,.toggle-row input{width:auto}
.inline-form{display:inline-flex;align-items:center;gap:10px;margin:0;flex-wrap:wrap}.inline-form.action-row{margin-top:0}

.table-container{overflow:hidden}.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{background:var(--bg-tertiary);padding:11px 20px;text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);border-bottom:1px solid var(--border-subtle)}
tbody td{padding:14px 20px;color:var(--text-primary);border-bottom:1px solid var(--border-subtle);vertical-align:middle}
tbody tr{transition:var(--transition)}tbody tr:last-child td{border-bottom:none}tbody tr:hover td{background:var(--bg-glass)}.td-muted{color:var(--text-secondary);font-size:12px}
.status,.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:600;border:1px solid transparent;line-height:1.2}
.status::before,.badge::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0}
.badge-success,.status.connected,.status.sent,.status.active,.status.ready{background:rgba(0,196,140,.1);color:var(--success);border-color:rgba(0,196,140,.18)}
.badge-success::before,.status.connected::before,.status.sent::before,.status.active::before,.status.ready::before{background:var(--success)}
.badge-danger,.status.failed,.status.destroyed,.status.inactive{background:rgba(244,63,94,.1);color:var(--danger);border-color:rgba(244,63,94,.18)}
.badge-danger::before,.status.failed::before,.status.destroyed::before,.status.inactive::before{background:var(--danger)}
.badge-warning,.status.queued,.status.pending,.status.disconnected,.status.generating_qr,.status.retrying{background:rgba(245,158,11,.1);color:var(--warning);border-color:rgba(245,158,11,.18)}
.badge-warning::before,.status.queued::before,.status.pending::before,.status.disconnected::before,.status.generating_qr::before,.status.retrying::before{background:var(--warning)}
.badge-info,.status.info,.status.qr_pending{background:rgba(0,102,255,.1);color:var(--info);border-color:rgba(0,102,255,.18)}
.badge-info::before,.status.info::before,.status.qr_pending::before{background:var(--info)}
.badge-neutral{background:var(--bg-glass);color:var(--text-secondary);border:1px solid var(--border-subtle)}.badge-neutral::before{background:var(--text-muted)}
.alert{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--radius-md);font-size:13px;border:1px solid}.alert::before{content:'';width:8px;height:8px;margin-top:6px;border-radius:50%;flex-shrink:0}
.alert-success{background:rgba(0,196,140,.08);border-color:rgba(0,196,140,.25);color:var(--success)}.alert-success::before{background:var(--success)}
.alert-danger,.alert.error{background:rgba(244,63,94,.08);border-color:rgba(244,63,94,.25);color:var(--danger)}.alert-danger::before,.alert.error::before{background:var(--danger)}
.alert-warning{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.25);color:var(--warning)}.alert-warning::before{background:var(--warning)}
.alert-info,.alert.success{background:rgba(0,102,255,.08);border-color:rgba(0,102,255,.25);color:#7fb1ff}.alert-info::before,.alert.success::before{background:var(--info)}
.copy-inline{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.dashboard-actions-grid,.quick-actions-grid,.credits-explainer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.action-tile,.metric-list-item,.detail-item,.credits-explainer-card,.summary-list-item{
  padding:14px 16px;border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:rgba(255,255,255,.03)
}
.action-tile{display:grid;gap:10px}.action-tile:hover{transform:translateY(-2px);border-color:var(--border-default);background:var(--bg-glass-hover)}
.action-icon{width:36px;height:36px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--brand-glow);color:var(--brand-primary)}
.action-icon.blue{background:var(--brand-blue-glow);color:var(--brand-secondary)}.action-icon.warning{background:rgba(245,158,11,.12);color:var(--warning)}.action-icon i{width:16px;height:16px}
.action-title{font-size:13px;font-weight:600}.action-caption,.metric-list-label{font-size:12px;color:var(--text-secondary)}.metric-list-value{font-size:14px;font-weight:700}
.detail-item-label,.mini-stat-label,.hero-metric-label{display:block;font-size:11px;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}.detail-item strong,.mini-stat-value,.hero-metric-value{font-size:14px;font-weight:700}
.instance-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.instance-card{padding:20px;display:grid;gap:18px}.instance-card:hover{transform:translateY(-2px)}.instance-card-top,.instance-card-middle,.instance-card-bottom,.instance-card-stats,.bar-label-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.instance-card-top{align-items:flex-start}.instance-card-title{display:flex;align-items:center;gap:10px}.instance-card-name{font-size:16px;font-weight:700}.instance-card-meta{font-size:11px;color:var(--text-muted)}.instance-card-number{font-size:20px;font-weight:700;letter-spacing:-.5px}
.mini-stat{flex:1;padding:12px;border-radius:var(--radius-md);background:rgba(255,255,255,.03);border:1px solid var(--border-subtle)}
.status-dot,.status-dot-connected,.status-dot-disconnected{width:8px;height:8px;border-radius:50%;display:inline-block}.status-dot-connected{background:var(--brand-primary);animation:pulse-dot 2s ease-in-out infinite}.status-dot-disconnected{background:var(--danger)}
.instance-create-card{min-height:270px;padding:24px;display:grid;place-items:center;text-align:center;border-style:dashed;border-color:rgba(0,196,140,.28);background:linear-gradient(180deg,rgba(0,196,140,.05),transparent),rgba(12,17,32,.68);color:var(--brand-primary)}
.instance-create-card:hover{transform:translateY(-2px);border-color:var(--brand-primary);box-shadow:var(--shadow-glow)}.instance-create-card i{width:28px;height:28px;margin:0 auto 12px}
.quick-send-card textarea{min-height:120px}
.locked-nav-item{opacity:.78}
.locked-nav-item:hover{opacity:1}
.billing-toggle .btn-ghost.is-active{background:var(--brand-glow);border-color:var(--border-brand);color:var(--brand-primary)}
.template-card .instance-card-name{font-size:15px}
.auto-reply-rule .instance-card-name i{width:14px;height:14px;opacity:.7}

.step-strip{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}.step-item{display:inline-flex;align-items:center;gap:10px;color:var(--text-secondary);font-size:12px;font-weight:600}
.step-badge{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border-default);background:rgba(255,255,255,.03)}
.step-item.active{color:var(--text-primary)}.step-item.active .step-badge{background:var(--brand-glow);border-color:var(--border-brand);color:var(--brand-primary)}.step-divider{width:42px;height:1px;background:var(--border-default)}
.qr-page{max-width:1080px;margin:0 auto}.qr-page-shell{display:grid;gap:24px}.qr-grid,.send-layout,.admin-chart-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:24px}
.qr-panel,.phone-preview-shell,.chart-shell,.plan-card,.admin-summary-card{padding:20px;display:grid;gap:18px}
.qr-container,.qr-wrap{
  display:grid;place-items:center;gap:16px;min-height:320px;border-radius:var(--radius-xl);border:1px solid rgba(0,196,140,.24);
  background:radial-gradient(circle at center,rgba(0,196,140,.11),transparent 50%),rgba(12,17,32,.85);padding:20px;text-align:center;animation:qr-glow 2s ease-in-out infinite
}
.qr-wrap img,.qr-container img{width:min(240px,100%);padding:16px;border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-lg)}.qr-wrap.connected,.qr-container.connected{border-color:rgba(0,196,140,.34)}
.instruction-list{display:grid;gap:14px}.instruction-item,.user-cell{display:flex;align-items:flex-start;gap:12px}.instruction-number{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--brand-glow);border:1px solid var(--border-brand);color:var(--brand-primary);font-size:12px;font-weight:700;flex-shrink:0}
.qr-status,.chart-note{font-size:12px;color:var(--text-secondary)}.reveal-panel{display:none}.reveal-panel.is-open{display:block;animation:fadeUp .25s ease-out}
.key-reveal-box{display:grid;gap:10px;padding:18px;border-radius:var(--radius-lg);background:rgba(0,196,140,.08);border:1px solid rgba(0,196,140,.22)}

.composer-tabs{display:flex;flex-wrap:wrap;gap:8px}.composer-tab{padding:9px 12px;border-radius:var(--radius-full);border:1px solid var(--border-default);background:transparent;color:var(--text-secondary);cursor:pointer;transition:var(--transition)}
.composer-tab.is-active{background:var(--brand-glow);color:var(--brand-primary);border-color:var(--border-brand)}
.message-panels{display:grid;gap:14px}.message-panel{display:none}.message-panel.is-active{display:grid;gap:14px}
.credit-indicator{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius-full);background:var(--brand-glow);border:1px solid var(--border-brand);font-size:12px;font-weight:600;color:var(--brand-primary)}
.phone-frame{width:100%;max-width:320px;margin:0 auto;border-radius:28px;padding:14px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,#161d30,#0b1020);box-shadow:var(--shadow-lg)}
.phone-notch{width:112px;height:22px;border-radius:0 0 16px 16px;background:#050810;margin:-14px auto 14px}
.phone-screen{min-height:540px;border-radius:22px;padding:18px;background:radial-gradient(circle at top left,rgba(0,196,140,.08),transparent 22%),linear-gradient(180deg,#0f172a 0%,#0c1326 100%);display:flex;flex-direction:column;gap:16px}
.phone-header{display:flex;align-items:center;gap:10px}.phone-avatar,.user-cell-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));color:var(--text-inverse)}
.message-bubble{max-width:82%;margin-left:auto;padding:12px 14px;border-radius:18px 18px 4px 18px;background:linear-gradient(135deg,rgba(0,196,140,.18),rgba(0,102,255,.12));border:1px solid rgba(0,196,140,.18);box-shadow:var(--shadow-sm)}
.message-bubble-title{font-size:11px;color:rgba(248,250,252,.72);margin-bottom:6px}.message-bubble-text{white-space:pre-wrap;min-height:20px}.message-meta{margin-top:8px;font-size:10px;color:rgba(248,250,252,.54);text-align:right}

.logs-filter-bar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.toolbar-search{position:relative}.toolbar-search input{padding-left:38px}.toolbar-search i{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-muted)}
.log-row{cursor:pointer}.log-row.is-expanded td{background:rgba(255,255,255,.04)}.log-detail-row{display:none}.log-detail-row.is-open{display:table-row}.log-detail{padding:0 20px 20px}
.log-detail-card{padding:16px;border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:rgba(255,255,255,.03);display:grid;gap:12px}.log-detail pre{padding:14px;border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:#0b1020}
.pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px;flex-wrap:wrap}.pager a{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--border-default);color:var(--text-secondary);background:var(--bg-glass)}
.pager a.active,.pager a:hover{border-color:var(--border-brand);background:var(--brand-glow);color:var(--brand-primary)}

.billing-toggle{display:inline-flex;align-items:center;gap:6px;padding:4px;border-radius:var(--radius-full);background:rgba(255,255,255,.04);border:1px solid var(--border-subtle)}
.billing-toggle button{padding:8px 14px;border-radius:var(--radius-full);border:none;background:transparent;color:var(--text-secondary);cursor:pointer;min-width:120px;text-align:center}.billing-toggle button.is-active{background:var(--brand-glow);color:var(--brand-primary)}
.billing-discount,.plan-popular{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:var(--radius-full);font-size:11px;font-weight:700}
.billing-discount{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.18);color:var(--warning)}
.plans-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.plan-card{position:relative;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;padding:24px}
.plan-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--brand-primary),transparent);opacity:0;transition:var(--transition)}
.plan-card::after{content:'';position:absolute;inset:0;opacity:0;background:linear-gradient(135deg,rgba(0,196,140,.08),transparent);pointer-events:none;transition:var(--transition)}
.plan-card:hover::before,.plan-card.plan-featured::before,.plan-card.plan-active::before{opacity:1}
.plan-card:hover{transform:translateY(-4px)}.plan-card.plan-featured,.plan-card.plan-active{border-color:var(--border-brand);box-shadow:var(--shadow-glow)}.plan-card.plan-active::after{opacity:1}
.plan-popular{position:absolute;top:18px;right:18px;background:linear-gradient(135deg,var(--brand-primary),#00BB81);border:none;color:var(--text-inverse);padding:6px 14px;font-size:11px;font-weight:700;border-radius:var(--radius-full);box-shadow:0 0 25px rgba(0,196,140,.35);z-index:10;text-transform:uppercase;letter-spacing:.3px}
.plan-header{display:grid;gap:16px;position:relative;z-index:1}
.plan-name-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.plan-name-row h3{margin:0;font-size:18px;font-weight:700}
.plan-name-row .status{margin-left:auto}
.plan-price{display:flex;align-items:flex-end;gap:8px;margin-bottom:4px}
.plan-price-amount{font-size:38px;line-height:1;font-weight:800;letter-spacing:-1.4px}.plan-price-term{font-size:12px;color:var(--text-secondary);margin-bottom:5px}
.plan-feature-list{list-style:none;padding:0;display:grid;gap:12px;margin:12px 0}
.plan-feature{display:flex;align-items:flex-start;gap:10px;color:var(--text-secondary);font-size:13px}
.plan-feature i{width:16px;height:16px;color:var(--brand-primary);margin-top:3px;flex-shrink:0}
.plan-actions{display:grid;gap:10px;margin-top:auto}
.plan-actions.dual{grid-template-columns:1fr}
.plan-actions .btn-primary,.plan-actions .btn-secondary{width:100%;justify-content:center;min-height:42px;padding:10px 12px;font-size:13px;font-weight:700;white-space:normal;line-height:1.3}
.plan-actions .btn-secondary{background:rgba(0,102,255,.12);border-color:rgba(0,102,255,.28);color:#88b4ff}
.plan-actions .btn-secondary:hover{background:rgba(0,102,255,.18);border-color:rgba(0,102,255,.4);color:#c5dbff}
.btn-plan-buy i,.btn-plan-subscribe i{width:15px;height:15px}
.plan-card button{margin-top:auto}
.plan-card .btn-outline{color:var(--text-secondary);cursor:not-allowed;opacity:.6}
.plan-card .btn-primary{width:100%;padding:12px 16px;font-size:14px}
.plan-card .btn-primary:hover{transform:translateY(-2px)}

.admin-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}.admin-summary-card-label{color:var(--text-secondary);font-size:12px}.admin-summary-card-value{font-size:28px;font-weight:800;letter-spacing:-.8px}
.line-chart{display:flex;align-items:end;gap:10px;min-height:180px}.line-point{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px}.line-point-value{width:100%;border-radius:14px 14px 6px 6px;background:linear-gradient(180deg,rgba(99,102,241,.82),rgba(99,102,241,.15));border:1px solid rgba(99,102,241,.18);min-height:24px}
.bar-list{display:grid;gap:12px}.bar-item{display:grid;gap:8px}.bar-label-row{font-size:12px}.bar-track,.credits-meter-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.05);overflow:hidden}.bar-fill,.credits-meter-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand-primary),var(--brand-secondary))}
.user-table-row{cursor:pointer}.credits-meter{min-width:160px;display:grid;gap:6px}.table-filter-select{min-width:160px}
.inline-credit-form{display:none;align-items:center;gap:8px;flex-wrap:wrap}.inline-credit-form.is-open{display:inline-flex}.empty-state{padding:32px 20px;text-align:center;color:var(--text-secondary)}

/* Billing Cycle Toggle */
.billing-toggle-section{margin-bottom:16px}.billing-toggle-card{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding:18px 24px;background:rgba(12,17,32,.88);border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}.billing-toggle-label{font-size:13px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.billing-toggle-wrapper{display:flex;align-items:center;gap:0;background:var(--bg-tertiary);border:1px solid var(--border-default);border-radius:var(--radius-full);padding:4px}.billing-toggle-input{position:absolute;opacity:0;width:0;height:0}.billing-toggle-option{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--radius-full);cursor:pointer;transition:var(--transition);font-size:13px;font-weight:600;color:var(--text-secondary);border:1px solid transparent}.billing-toggle-option:hover{background:var(--bg-glass)}.billing-toggle-input:checked + .billing-toggle-option{background:var(--brand-primary);color:var(--text-inverse);border-color:var(--brand-primary);box-shadow:0 2px 8px rgba(0,196,140,.25)}.billing-save-badge{display:inline-flex;align-items:center;padding:2px 6px;border-radius:var(--radius-full);background:rgba(0,196,140,.15);color:var(--brand-primary);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;margin-left:6px}.billing-toggle-input:checked + .billing-toggle-option .billing-save-badge{background:rgba(5,8,16,.16);color:var(--text-inverse)}

.skeleton{background:linear-gradient(90deg,var(--bg-tertiary) 25%,var(--bg-glass-hover) 50%,var(--bg-tertiary) 75%);background-size:200% 100%;animation:skeleton-wave 1.5s infinite;border-radius:var(--radius-sm)}
.toast-stack{position:fixed;top:18px;right:18px;z-index:1200;display:grid;gap:10px;width:min(360px,calc(100vw - 36px))}
.toast{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:rgba(12,17,32,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--shadow-lg);padding:14px 16px;cursor:pointer;animation:toast-enter .2s ease}
.toast.hide{opacity:0;transform:translateY(-4px);transition:all .2s ease}.toast-title{font-size:13px;font-weight:700;margin-bottom:4px}.toast-message{font-size:12px;color:var(--text-secondary)}
.toast-success{border-color:rgba(0,196,140,.22)}.toast-success .toast-title{color:var(--success)}.toast-error{border-color:rgba(244,63,94,.22)}.toast-error .toast-title{color:var(--danger)}.toast-info{border-color:rgba(0,102,255,.22)}.toast-info .toast-title{color:#7fb1ff}
.popup-overlay{position:fixed;inset:0;z-index:1300;background:rgba(3,6,10,.72);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px}
.popup-overlay.open{display:flex}.popup-modal{width:min(500px,100%);border:1px solid var(--border-default);border-radius:var(--radius-xl);background:rgba(12,17,32,.96);box-shadow:var(--shadow-lg);padding:22px;animation:modal-enter .18s ease}
.popup-message{margin-top:10px;color:var(--text-secondary);line-height:1.5}.popup-actions{margin-top:18px;display:flex;justify-content:flex-end;gap:10px}
.popup-modal.auto-reply-modal{width:min(760px,100%);max-height:calc(100vh - 48px);overflow-y:auto;overscroll-behavior:contain;padding:20px}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}
@keyframes qr-glow{0%,100%{box-shadow:0 0 20px rgba(0,196,140,.2)}50%{box-shadow:0 0 40px rgba(0,196,140,.5)}}
@keyframes skeleton-wave{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes toast-enter{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes modal-enter{from{opacity:0;transform:translateY(6px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}

@media (max-width:1280px){.stats-grid.six-col,.admin-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.instance-grid,.plans-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.credits-explainer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.plan-card{padding:20px}.plan-price-amount{font-size:32px}}
@media (max-width:1100px){.two-column-grid,.qr-grid,.send-layout,.admin-chart-grid{grid-template-columns:minmax(0,1fr)}.stats-grid.four-col,.logs-filter-bar,.filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid.horizontal{grid-template-columns:minmax(0,1fr)}}
@media (max-width:768px){
  .sidebar{transform:translateX(-100%);transition:transform .3s ease;z-index:200}.sidebar.open{transform:translateX(0)}
  .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:199}.sidebar-overlay.open{display:block}
  .app-main{margin-left:0}.topbar{left:0;padding:8px 12px;flex-direction:column;align-items:stretch;justify-content:flex-start;height:auto;gap:8px;min-height:56px}.topbar-hamburger{display:inline-flex}.main-content{margin-top:calc(56px + 80px);padding:20px 16px;min-height:calc(100vh - 56px - 80px)}.footer{padding:0 16px 20px}
  .topbar-left{display:flex;align-items:center;gap:8px;width:100%}
  .topbar-breadcrumb{font-size:12px;min-width:0;flex:1}.breadcrumb-item,.breadcrumb-separator{font-size:11px}
  .topbar-actions{flex-direction:column;align-items:stretch;width:100%;gap:6px}
  .topbar-actions form{width:100%}.topbar-actions form button{width:100%}
  .topbar-credits-badge,.topbar-admin-badge{width:100%;justify-content:center;padding:8px 12px;font-size:11px}
  .page-header,.hero-banner-content,.card-header,.card-head,.table-toolbar{flex-direction:column;align-items:flex-start}
  .stats-grid.four-col,.stats-grid.six-col,.admin-kpis,.plans-grid,.instance-grid,.credits-explainer-grid,.logs-filter-bar,.filter-grid,.dashboard-actions-grid,.quick-actions-grid,.form-row,.two-col{grid-template-columns:1fr}
  .plan-card{padding:20px}.plan-popular{top:14px;right:14px;padding:5px 12px;font-size:10px}.plan-name-row h3{font-size:16px}.plan-price-amount{font-size:32px}.plan-feature-list{gap:10px}.plan-feature{font-size:12px}.plan-feature i{width:14px;height:14px}
  .plan-actions.dual{grid-template-columns:1fr}
  .toast-stack{left:12px;right:12px;width:auto}.popup-actions{flex-direction:column-reverse}.popup-actions .btn-outline,.popup-actions .btn-danger,.popup-actions .btn-primary{width:100%}
  .popup-modal.auto-reply-modal{max-height:90vh;padding:16px}
}
@media (min-width:769px){.topbar-hamburger{display:none}}

/* Responsive fixes for newly added feature pages */
@media (max-width: 768px) {
  .main-content,
  .content-wrapper,
  .page-content {
    padding: 16px !important;
  }

  .card,
  .glass-card,
  .stat-card,
  .feature-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .table-container,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wizard-steps {
    flex-direction: column;
    gap: 8px;
  }

  .import-preview {
    overflow-x: auto;
  }

  .campaign-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }

  .templates-grid {
    grid-template-columns: 1fr !important;
  }

  .rule-card {
    flex-direction: column;
  }

  .recipients-table td:nth-child(3),
  .recipients-table th:nth-child(3) {
    display: none;
  }
}

.glass-card,
.card {
  overflow: hidden;
  border-radius: 16px;
}

@media (max-width: 768px) {
  .modal-content {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 90vh;
    overflow-y: auto;
  }
}

@media (max-width: 768px) {
  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }
}