:root{
  --bg:#070707;--panel:#111;--panel2:#171717;--text:#fff;--muted:#a7a7a7;--line:#2b2b2b;
  --pink:#ff2a75;--violet:#8a3ffc;--blue:#1aa7ff;--ok:#55d98a;--warn:#ffca58;--bad:#ff6868;
  --radius:20px;--shadow:0 20px 60px rgba(0,0,0,.24)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:radial-gradient(circle at 8% 0%,rgba(255,42,117,.10),transparent 26%),radial-gradient(circle at 92% 0%,rgba(26,167,255,.09),transparent 28%),var(--bg);min-height:100vh}
a{color:inherit;text-decoration:none}.shell{width:min(1120px,calc(100% - 32px));margin-inline:auto}.main-shell{padding-top:34px;padding-bottom:70px}.app-header,.public-header{position:sticky;top:0;z-index:50;background:rgba(7,7,7,.88);backdrop-filter:blur(18px);border-bottom:1px solid #1c1c1c}.nav-shell{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;align-items:center;gap:11px;font-size:25px;font-weight:850;letter-spacing:-.8px}.brand-logo{width:38px;height:38px;border-radius:11px;object-fit:cover;display:block;box-shadow:0 0 28px rgba(255,42,117,.18)}.brand-mark{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--pink),var(--violet) 55%,var(--blue));font-size:23px;font-weight:900;box-shadow:0 0 28px rgba(138,63,252,.22)}.app-nav{display:flex;align-items:center;gap:4px}.app-nav a{padding:10px 13px;border-radius:10px;color:#c9c9c9;font-size:14px}.app-nav a:hover,.app-nav a.active{background:#161616;color:#fff}.nav-toggle{display:none;border:1px solid var(--line);background:#151515;color:#fff;border-radius:10px;padding:9px 11px;font-size:19px}.public-actions{display:flex;gap:10px}.app-footer{border-top:1px solid #1c1c1c;color:#777}.footer-shell{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:13px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:12px;border:0;font:inherit;font-weight:750;cursor:pointer;transition:.18s ease}.btn:hover{transform:translateY(-1px)}.btn-primary{background:linear-gradient(100deg,var(--pink),var(--violet) 55%,var(--blue));color:#fff;box-shadow:0 10px 28px rgba(138,63,252,.17)}.btn-dark{background:#111;color:#fff;border:1px solid #2b2b2b}.btn-ghost{background:#151515;color:#fff;border:1px solid #2d2d2d}.btn-danger{background:rgba(255,104,104,.10);color:#ffb5b5;border:1px solid rgba(255,104,104,.30)}.btn-link{padding:0;background:none;color:#ddd;min-height:auto}.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.btn-wide{width:100%}
.card{background:linear-gradient(145deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}.card+.card{margin-top:18px}.card h1,.card h2,.card h3{margin-top:0}.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;background:#121212;border:1px solid #292929;color:#d7d7d7;font-size:13px}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.status-ok{color:var(--ok)}.status-warn{color:var(--warn)}.status-bad{color:var(--bad)}.muted{color:var(--muted)}.small{font-size:13px}.tiny{font-size:12px}.title-xl{font-size:clamp(34px,5vw,56px);letter-spacing:-2px;line-height:1.02;margin:0 0 14px}.title-lg{font-size:32px;letter-spacing:-1px;margin:0 0 10px}.gradient-text{background:linear-gradient(90deg,var(--pink),var(--violet),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}.lead{font-size:18px;line-height:1.6;color:#c9c9c9}.divider{height:1px;background:#272727;margin:22px 0}.stack{display:grid;gap:14px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.form-card{max-width:560px;margin:28px auto}.field{display:grid;gap:7px;margin:16px 0}.field label{font-size:14px;color:#d6d6d6;font-weight:650}.field input,.field select,.field textarea{width:100%;border:1px solid #333;background:#0c0c0c;color:#fff;border-radius:12px;padding:13px 14px;font:inherit;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:#6e4bd1;box-shadow:0 0 0 3px rgba(138,63,252,.10)}.field-help{font-size:12px;color:#777}.checkbox{display:flex;gap:10px;align-items:flex-start}.error-text{color:#ffabab;font-size:13px}.success-text{color:#9ce2b5;font-size:13px}
.flash{padding:14px 16px;border-radius:13px;margin-bottom:18px;border:1px solid}.flash-success{background:rgba(85,217,138,.08);border-color:rgba(85,217,138,.28);color:#a8e7bc}.flash-error{background:rgba(255,104,104,.08);border-color:rgba(255,104,104,.28);color:#ffc0c0}.flash-info{background:rgba(26,167,255,.08);border-color:rgba(26,167,255,.25);color:#b7ddff}.flash-warning{background:rgba(255,202,88,.08);border-color:rgba(255,202,88,.25);color:#ffe1a0}
.hero{padding:50px 0 30px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}.feature{padding:23px;border-radius:17px;border:1px solid #292929;background:#0f0f0f}.feature-number{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(255,42,117,.18),rgba(26,167,255,.15));border:1px solid #333;font-weight:800}.feature h3{margin:16px 0 8px}.feature p{margin:0;color:var(--muted);line-height:1.55}
.display-preview-wrap{width:100%;aspect-ratio:4/1;border-radius:18px;overflow:hidden;background:#000;border:1px solid #303030;box-shadow:0 18px 50px rgba(0,0,0,.25)}.display-preview{display:block;width:100%;height:100%;border:0;background:#000}.preview-caption{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:13px;color:#aaa;font-size:13px}
.dashboard-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}.dashboard-primary{padding:30px}.dashboard-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px}.metric{min-width:160px;padding:16px;border-radius:14px;background:#0d0d0d;border:1px solid #292929}.metric-label{font-size:12px;color:#888}.metric-value{font-size:25px;font-weight:800;margin-top:5px}.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}.action-card{display:block;border:1px solid #2b2b2b;background:#0e0e0e;border-radius:15px;padding:17px}.action-card strong{display:block;margin-bottom:5px}.action-card span{font-size:13px;color:#8e8e8e}.account-row,.device-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 0;border-bottom:1px solid #252525}.account-row:last-child,.device-row:last-child{border-bottom:0}.account-main{display:flex;align-items:center;gap:13px}.platform-icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-weight:850;background:linear-gradient(135deg,#ff7854,#ff2a75 40%,#8a3ffc 72%,#1aa7ff)}.account-name{font-weight:800}.follower-number{font-size:22px;font-weight:850}.empty-state{text-align:center;padding:32px;border:1px dashed #343434;border-radius:16px;background:#0d0d0d;color:#aaa}.empty-state h3{color:#fff;margin:0 0 8px}.empty-state p{margin:0 0 18px}
.onboarding{max-width:840px;margin:24px auto}.progress{display:flex;gap:7px;margin-bottom:24px}.progress span{height:5px;flex:1;border-radius:999px;background:#242424}.progress span.done{background:linear-gradient(90deg,var(--pink),var(--violet),var(--blue))}.platform-card{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px;border:1px solid #303030;border-radius:16px;background:#0f0f0f}.platform-card.disabled{opacity:.45}.big-check{font-size:54px;color:var(--ok)}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.plan-card{position:relative}.plan-card.featured{border-color:#6846c7;box-shadow:0 20px 60px rgba(138,63,252,.14)}.plan-price{font-size:35px;font-weight:850}.plan-list{list-style:none;padding:0;margin:20px 0}.plan-list li{padding:7px 0;color:#cfcfcf}.plan-list li:before{content:'✓';color:var(--ok);margin-right:9px}
.layout-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.layout-card{border:1px solid #303030;border-radius:17px;padding:12px;background:#0d0d0d;cursor:pointer}.layout-card.selected{border-color:#825be0;box-shadow:0 0 0 3px rgba(138,63,252,.10)}.layout-preview{aspect-ratio:4/1;width:100%;border:0;border-radius:10px;background:#000}.layout-card h3{margin:12px 4px 4px}.saved-indicator{color:#9ce2b5;font-size:13px;min-height:18px}
.code-input{font-size:28px!important;text-align:center;letter-spacing:8px;font-weight:800}.status-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid #2d2d2d;border-radius:999px;padding:7px 10px;background:#101010;font-size:13px}.danger-zone{border-color:rgba(255,104,104,.22)}
.skeleton{background:linear-gradient(90deg,#141414,#1d1d1d,#141414);background-size:200% 100%;animation:skeleton 1.3s infinite;border-radius:8px}@keyframes skeleton{to{background-position:-200% 0}}
@media(max-width:900px){.hero-grid,.two-col,.plan-grid{grid-template-columns:1fr}.feature-grid,.three-col,.layout-grid{grid-template-columns:1fr 1fr}.action-grid{grid-template-columns:1fr}.dashboard-intro{align-items:flex-start;flex-direction:column}}
@media(max-width:700px){.shell{width:min(100% - 24px,1120px)}.main-shell{padding-top:24px}.nav-toggle{display:block}.app-nav{display:none;position:absolute;top:68px;left:12px;right:12px;background:#101010;border:1px solid #2a2a2a;border-radius:16px;padding:10px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.app-nav.open{display:flex}.app-nav a{padding:13px 14px}.public-actions .btn-ghost{display:none}.feature-grid,.three-col,.layout-grid{grid-template-columns:1fr}.card{padding:20px}.section-head,.account-row,.device-row,.preview-caption{align-items:flex-start;flex-direction:column}.btn-row{width:100%}.account-row .btn-row{width:auto}.footer-shell{padding:20px 0;min-height:auto;align-items:flex-start;flex-direction:column}.hero{padding-top:35px}.form-card{margin-top:10px}}
@media(max-width:430px){.title-xl{font-size:36px}.brand{font-size:22px}.brand-mark{width:33px;height:33px}.btn{min-height:48px}.public-actions .btn-primary{padding-inline:13px}.dashboard-primary{padding:19px}.metric{width:100%}.hero-actions .btn{width:100%}.platform-card{align-items:flex-start;flex-direction:column}.code-input{font-size:23px!important;letter-spacing:5px}}


/* Multi-Account / Designs UI */
.plan-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.btn-compact{min-height:38px;padding:0 12px;font-size:13px}
.metric-time,.metric-small{font-size:18px}
.section-kicker{font-size:11px;letter-spacing:1.5px;font-weight:800;color:#8f8f8f;margin-bottom:7px}
.pro-hint{text-align:center;margin-top:18px}
.dashboard-actions{margin-top:18px}
.account-overview-section{margin-top:18px}
.account-overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.account-overview-card{display:block;border:1px solid #2c2c2c;background:#0d0d0d;border-radius:16px;padding:18px;transition:.18s ease}
.account-overview-card:hover{border-color:#484848;transform:translateY(-1px)}
.account-overview-card.selected{border-color:#815ce0;box-shadow:0 0 0 3px rgba(138,63,252,.10)}
.account-overview-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}
.platform-icon-small{width:34px;height:34px;border-radius:10px;font-size:12px}
.account-state{font-size:12px;font-weight:700}
.account-overview-name{font-size:17px;font-weight:800}
.account-overview-followers{font-size:31px;font-weight:900;letter-spacing:-1px;margin:7px 0 3px}
.account-overview-followers span{font-size:13px;font-weight:500;letter-spacing:0;color:#969696}
.account-overview-action{margin-top:14px;color:#c7b6ff;font-size:12px;font-weight:750}

.account-summary-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 17px;margin-bottom:16px;border:1px solid #282828;background:#0d0d0d;border-radius:14px}
.account-summary-bar strong{font-size:24px;margin-right:8px}
.social-account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.social-account-card{border:1px solid #2c2c2c;background:linear-gradient(145deg,#151515,#0e0e0e);border-radius:18px;padding:20px;box-shadow:0 16px 40px rgba(0,0,0,.16)}
.social-account-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.social-account-name{font-size:18px;font-weight:850;margin-top:2px}
.social-account-number{font-size:36px;font-weight:900;letter-spacing:-1.2px;margin:24px 0 4px}
.social-account-number span{font-size:14px;font-weight:500;letter-spacing:0;color:#999}
.social-account-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid #252525}
.social-account-actions form{margin:0}

.account-selector-card{margin-bottom:18px}
.compact-head{margin-bottom:14px}
.account-switcher{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
.account-switch-card{min-width:190px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"name count" "label label";gap:3px 12px;align-items:end;border:1px solid #2c2c2c;background:#0d0d0d;border-radius:14px;padding:14px 15px}
.account-switch-card:hover{border-color:#484848}
.account-switch-card.selected{border-color:#815ce0;background:linear-gradient(135deg,rgba(255,42,117,.06),rgba(138,63,252,.08),rgba(26,167,255,.05));box-shadow:0 0 0 3px rgba(138,63,252,.08)}
.account-switch-card span{grid-area:name;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-switch-card strong{grid-area:count;font-size:22px}
.account-switch-card small{grid-area:label;color:#888}

.design-live-card{margin-bottom:18px}
.layout-preview-shell{overflow:hidden;border-radius:11px;background:#000;border:1px solid #282828}
.layout-card{padding:12px;display:flex;flex-direction:column;gap:10px}
.layout-card-content{padding:0 4px;min-height:78px}
.layout-card-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.layout-card-title h3{margin:0}
.layout-active-badge{font-size:11px;font-weight:800;color:#a7e5ba;background:rgba(85,217,138,.08);border:1px solid rgba(85,217,138,.22);border-radius:999px;padding:5px 8px}
.layout-card p{margin:7px 0 0}
.page-title-row{margin-bottom:24px}

@media(max-width:900px){
  .account-overview-grid,.social-account-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .plan-tools{justify-content:flex-start}
  .account-summary-bar{align-items:flex-start;flex-direction:column;gap:5px}
  .social-account-actions .btn,.social-account-actions form{flex:1 1 calc(50% - 8px)}
  .social-account-actions form .btn{width:100%}
}
@media(max-width:430px){
  .account-overview-grid{grid-template-columns:1fr}
  .account-switch-card{min-width:165px}
  .social-account-actions .btn,.social-account-actions form{flex-basis:100%}
}