:root{
  --bg:#0f1117; --card:#161a23; --card2:#1c2230; --line:#2a3348;
  --txt:#f1f5f9; --muted:#94a3b8; --acc:#7c3aed; --acc2:#ec4899;
  --radius:18px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  min-height:100vh;
}
.bg-orbs span{position:fixed;border-radius:50%;filter:blur(110px);opacity:.35;z-index:0;pointer-events:none}
.bg-orbs span:first-child{width:520px;height:520px;background:#7c3aed;top:-160px;left:-120px}
.bg-orbs span:last-child{width:460px;height:460px;background:#ec4899;bottom:-160px;right:-100px}

/* ---- splash loader (backend cold-start wait) ---- */
.splash{
  position:fixed;inset:0;z-index:100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:#0f1117;text-align:center;padding:24px;
  transition:opacity .35s ease;
}
.splash.done{opacity:0;pointer-events:none}
.splash img{border-radius:22px;box-shadow:0 10px 40px rgba(124,58,237,.5)}
.splash h1{margin:6px 0 0;font-size:26px;letter-spacing:-.02em}
.splash p{margin:0;color:var(--muted);font-size:14px}
.spinner{
  width:42px;height:42px;border-radius:50%;
  border:4px solid #2a3348;border-top-color:#ec4899;
  animation:spin 0.9s linear infinite;margin-top:6px;
}
@keyframes spin{to{transform:rotate(360deg)}}

.topbar{
  position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;
  padding:16px 28px;background:rgba(15,17,23,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;gap:14px;align-items:center}
.logo{width:48px;height:48px;display:grid;place-items:center;font-size:26px;background:linear-gradient(135deg,var(--acc),var(--acc2));border-radius:14px}
.brand h1{margin:0;font-size:22px;letter-spacing:-.02em}
.brand p{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.top-meta{display:flex;gap:8px;flex-wrap:wrap}
.pill{font-size:12px;font-weight:700;background:#1e2536;border:1px solid var(--line);padding:7px 12px;border-radius:999px}
.pill.ghost{color:var(--muted);font-weight:600}
.pill.live{color:#fbbf24}
.pill.live.ok{color:#34d399}

.layout{
  position:relative;z-index:1;display:grid;grid-template-columns:420px 1fr;
  gap:22px;max-width:1280px;margin:24px auto;padding:0 22px 10px;
}
.panel{display:flex;flex-direction:column;gap:18px;min-width:0}
.card{background:linear-gradient(180deg,var(--card),#12161f);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.card h2{margin:0 0 12px;font-size:17px;display:flex;align-items:center;gap:10px}
.step{width:26px;height:26px;display:inline-grid;place-items:center;font-size:13px;font-weight:800;border-radius:8px;background:linear-gradient(135deg,var(--acc),var(--acc2))}
.muted{color:var(--muted)} .small{font-size:12.5px}

textarea,input[type=text],input:not([type]){
  width:100%;background:#0c0f16;border:1px solid var(--line);color:var(--txt);
  border-radius:12px;padding:12px;font-size:15px;font-family:inherit;outline:none;
}
textarea{resize:vertical;min-height:96px;line-height:1.5}
textarea:focus,input:focus{border-color:var(--acc)}
#authorFields input{width:100%}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.grid2 label{font-size:12px;color:var(--muted);display:block;margin-bottom:6px}
.row-between{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.charbar{height:6px;background:#0c0f16;border-radius:99px;margin:8px 0 4px;overflow:hidden}
.charbar div{height:100%;width:0%;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:99px;transition:width .15s}

.toggle-row{display:flex;justify-content:space-between;align-items:center;margin:16px 0 4px;font-weight:700;font-size:14px}
.switch{width:52px;height:28px;border-radius:99px;border:1px solid var(--line);background:#0c0f16;cursor:pointer;position:relative}
.switch span{position:absolute;top:3px;left:4px;width:20px;height:20px;border-radius:50%;background:#64748b;transition:.2s}
.switch.on{background:linear-gradient(90deg,var(--acc),var(--acc2))}
.switch.on span{left:26px;background:#fff}

.chip-row{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;font-size:12px;font-weight:700;background:#0c0f16;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:7px 12px;cursor:pointer}
.chip.active{background:linear-gradient(90deg,var(--acc),var(--acc2));color:#fff;border-color:transparent}
.cat-head{grid-column:1/-1;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 6px;max-height:312px;overflow-y:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:#7c3aed #0c0f16}
.theme-grid::-webkit-scrollbar{width:6px}
.theme-grid::-webkit-scrollbar-track{background:#0c0f16;border-radius:99px}
.theme-grid::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--acc),var(--acc2));border-radius:99px}
.theme{background:#0c0f16;border:2px solid var(--line);border-radius:14px;padding:12px 10px;color:var(--txt);cursor:pointer;font-weight:800;font-size:13.5px;display:flex;flex-direction:column;gap:6px;align-items:center;transition:.15s}
.theme small{color:var(--muted);font-weight:600}
.theme:hover{transform:translateY(-2px);border-color:#3b4763}
.theme.selected{border-color:var(--acc);box-shadow:0 0 0 3px rgba(124,58,237,.25)}
.sw{width:100%;height:44px;border-radius:10px}
.sw.tech{background:linear-gradient(180deg,#1e1b4b,#6d28d9)}
.sw.minimal{background:#FAF9F6;border:1px solid #ddd}
.sw.sunset{background:linear-gradient(180deg,#FF512F,#DD2476)}
.sw.neon{background:#000;border:2px solid #39FF14}
.pro-badge{font-style:normal;background:#f59e0b;color:#000;font-size:10.5px;font-weight:800;border-radius:20px;padding:2px 8px}

.slider-head{margin:14px 0 4px}
input[type=range]{width:100%;accent-color:var(--acc2);height:28px}
.note{margin-top:12px;background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.35);padding:10px 12px;border-radius:12px;font-size:13px;color:#ddd6fe}

.preview-card{position:sticky;top:86px}
.canvas-wrap{background:#0a0d13;border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;place-items:center}
canvas{width:100%;max-width:560px;aspect-ratio:1/1;height:auto;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.btn-row{display:flex;gap:10px;margin-top:14px}
.cta{flex:1;background:linear-gradient(90deg,var(--acc),var(--acc2));color:#fff;font-weight:800;font-size:16px;border:none;border-radius:12px;padding:15px;cursor:pointer}
.cta:hover{filter:brightness(1.1)}
.ghost-btn{background:transparent;border:1px solid var(--line);color:var(--txt);border-radius:12px;padding:15px 18px;font-weight:700;cursor:pointer}
.ghost-btn:hover{border-color:var(--acc)}

footer{text-align:center;color:var(--muted);font-size:12.5px;padding:18px;position:relative;z-index:1}

.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);display:grid;place-items:center;z-index:50;padding:20px}
.modal-backdrop[hidden]{display:none}
.modal{max-width:420px;background:var(--card2);border:1px solid var(--line);border-radius:18px;padding:26px;text-align:center}
.modal h3{margin:0 0 10px}
.modal .info{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.4);border-radius:10px;padding:10px;font-size:13px;margin:12px 0 16px;color:#fde68a}
.modal .cta{width:100%}
.ref-progress{margin:12px 0 4px;text-align:left}
.ref-progress .charbar{margin-top:8px}
.ref-link-row{display:flex;gap:8px;margin:10px 0}
.ref-link-row input{flex:1;font-size:13px}
.ref-link-row .ghost-btn{padding:12px 14px;white-space:nowrap}
.wa-btn{width:100%;background:#25D366;color:#062b16;font-weight:800;font-size:15px;border:none;border-radius:12px;padding:14px;cursor:pointer;margin:2px 0 4px}
.wa-btn:hover{filter:brightness(1.05)}

/* Highlighted watermark-removal button — nazar seedha yahin jaye */
.rmwm{
  width:100%;margin-top:10px;border:none;cursor:pointer;
  font-weight:800;font-size:15px;color:#fff;border-radius:12px;padding:14px;
  background:linear-gradient(90deg,#f59e0b,#ec4899,#7c3aed,#f59e0b);
  background-size:300% 100%;
  animation:shine 2.5s linear infinite;
  box-shadow:0 0 22px rgba(236,72,153,.55);
}
.rmwm:hover{transform:scale(1.02)}
.rmwm.off{background:#065f46;box-shadow:none;animation:none;cursor:default}
@keyframes shine{to{background-position:300% 0}}

.fld{display:block;text-align:left;font-size:13px;color:var(--muted);margin:12px 0 6px}
.stars{display:flex;gap:6px;justify-content:center;margin:4px 0 16px}
.stars button{
  font-size:38px;line-height:1;background:transparent;border:none;cursor:pointer;
  color:#3b4763;transition:.12s;padding:2px 4px;
}
.stars button.lit{color:#fbbf24;text-shadow:0 0 14px rgba(251,191,36,.7);transform:scale(1.12)}
.ghost-btn.full{width:100%;margin-top:8px}

/* Pro unlock popup — highlight banner + task options */
.unlock-banner{
  background:linear-gradient(90deg,#f59e0b,#ec4899);
  color:#fff;border-radius:12px;padding:12px;margin:10px 0;
  font-size:15px;box-shadow:0 0 18px rgba(236,72,153,.45);
}
.unlock-banner small{opacity:.92}
.task-card{background:#0c0f16;border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0;text-align:left}
.task-card .charbar{margin:8px 0 2px}
.task-or{color:var(--muted);font-weight:700;font-size:13px}
.x-btn{
  flex:1;display:grid;place-items:center;background:#000;color:#fff;text-decoration:none;
  font-weight:800;font-size:14px;border:1px solid #3b4763;border-radius:12px;padding:14px 10px;
}
.x-btn:hover{border-color:#fff}
.admin-link{color:var(--muted)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}
.stat{background:#0c0f16;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.stat b{font-size:26px;display:block}
.stat span{color:var(--muted);font-size:12px}
table.data{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
table.data th,table.data td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
table.data th{color:var(--muted);font-size:12px}

.logo-img{width:48px;height:48px;border-radius:14px;box-shadow:0 4px 18px rgba(124,58,237,.45)}
.install-btn{background:linear-gradient(90deg,var(--acc),var(--acc2));color:#fff;font-weight:800;font-size:13px;border:none;border-radius:999px;padding:9px 16px;cursor:pointer;white-space:nowrap}
.install-btn[hidden]{display:none}

/* mobile-only bits (desktop pe hidden) */
.pv-line{display:none}
.link-btn{display:none;background:none;border:none;color:var(--acc2);font-weight:800;font-size:12.5px;cursor:pointer;padding:6px 4px;min-height:32px;font-family:inherit}

/* ---- mobile bottom appbar (desktop pe hidden) ---- */
.appbar,.install-tip{display:none}

@media (max-width:980px){
  html{-webkit-tap-highlight-color:transparent}
  body{
    padding-bottom:calc(76px + env(safe-area-inset-bottom,0px));
    -webkit-text-size-adjust:100%;
  }
  /* compact app-style topbar */
  .topbar{
    flex-direction:row;gap:10px;align-items:center;
    padding:10px 14px;
    padding-top:calc(10px + env(safe-area-inset-top,0px));
  }
  .brand{gap:10px;min-width:0;flex:1}
  .logo-img{width:40px;height:40px;border-radius:12px}
  .brand h1{font-size:18px}
  .brand p{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top-meta{gap:6px;align-items:center}
  .hide-sm{display:none}
  #apiStatus{display:none} /* phone pe status pill overlap karta hai — splash handle karta hai */
  .install-btn{font-size:12px;padding:8px 12px}

  /* single column app flow — preview sabse upar, hamesha chipka rahega */
  .layout{display:flex;flex-direction:column;gap:12px;margin:10px auto;padding:0 12px 10px;max-width:640px}
  .card{padding:16px;border-radius:16px;scroll-margin-top:70px}
  .panel.preview{order:-1}
  /* mobile flow: Style pehle, Content baad me (pehle styling, phir detail) */
  #cardStyle{order:-1}
  #cardText{order:0}
  .card h2 .step{display:none}

  /* sticky live preview — style/font badlo, preview saamne dikhe, scroll nahi */
  .preview-card{
    position:sticky;top:62px;z-index:6;
    padding:10px 10px 12px;
    background:rgba(22,26,35,.96);backdrop-filter:blur(14px);
    box-shadow:0 10px 30px rgba(0,0,0,.5);
  }
  .preview-card h2,.preview-card p.muted,.preview-card .btn-row,.preview-card #dlHint{display:none}
  .pv-line{display:flex;align-items:baseline;justify-content:center;gap:4px;margin:0 0 8px;font-size:13px}
  .pv-line b{font-size:14px}
  .pv-line span{color:var(--muted);font-size:11.5px}
  .preview-card .canvas-wrap{padding:6px}
  .preview-card canvas{width:min(100%,30vh);margin:0 auto}

  /* style strip: horizontal swipe — apps jaisa, bina scroll ke */
  .chip-row{position:static;margin:0;padding:2px 2px 8px}
  .chip{font-size:13px;padding:10px 14px;min-height:44px}
  .theme-grid{
    display:flex;flex-direction:row;gap:10px;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    max-height:none;padding:6px 2px 12px;scrollbar-width:none;
  }
  .theme-grid::-webkit-scrollbar{display:none}
  .theme-grid .cat-head{display:none}
  .theme{
    flex:0 0 168px;min-height:178px;scroll-snap-align:center;
    font-size:13.5px;padding:12px 10px;border-radius:14px;gap:8px;
  }
  .theme small{font-size:11px;text-align:center;line-height:1.35}
  .sw{height:88px;border-radius:10px}
  .link-btn{display:inline}

  /* touch-friendly controls */
  textarea{font-size:16px;min-height:110px} /* 16px = iOS zoom fix */
  input:not([type]),input[type=text]{font-size:16px;min-height:48px}
  input[type=range]{height:36px}
  .cta,.ghost-btn,.rmwm,.wa-btn,.x-btn{min-height:52px;font-size:15px;touch-action:manipulation}
  .btn-row{flex-direction:column}
  .btn-row .ghost-btn{width:100%}
  .grid2{grid-template-columns:1fr}
  .canvas-wrap{padding:8px}
  canvas{max-width:100%}
  .stars button{font-size:44px;min-width:52px;min-height:52px}

  /* bottom fixed appbar */
  .appbar{
    display:flex;align-items:center;gap:8px;
    position:fixed;left:0;right:0;bottom:0;z-index:20;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(15,17,23,.94);backdrop-filter:blur(16px);
    border-top:1px solid var(--line);
  }
  .appbar-btn{
    flex:1;background:transparent;border:none;color:var(--muted);
    font-size:18px;font-weight:800;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;gap:2px;
    min-height:52px;justify-content:center;border-radius:12px;
  }
  .appbar-btn small{font-size:10px;font-weight:700}
  .appbar-btn:active{background:#1e2536}
  .appbar-dl{
    flex:1.6;border:none;cursor:pointer;border-radius:14px;min-height:52px;
    background:linear-gradient(90deg,var(--acc),var(--acc2));color:#fff;
    font-weight:800;font-size:15px;box-shadow:0 6px 22px rgba(124,58,237,.5);
  }
  .appbar-dl:disabled{opacity:.6}

  /* install hint sheet */
  .install-tip{
    display:flex;align-items:center;gap:10px;
    position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:30;
    background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;
    box-shadow:0 14px 40px rgba(0,0,0,.6);
  }
  .install-tip[hidden]{display:none}
  .install-tip div{display:flex;flex-direction:column;gap:4px;flex:1}
  .install-tip b{font-size:13.5px}
  .install-tip small{color:var(--muted);font-size:12px;line-height:1.5}
  .install-tip .ghost-btn{padding:10px 12px;min-height:44px}

  .modal-backdrop{padding:14px;align-items:flex-end}
  .modal{max-width:100%;width:100%;border-radius:20px 20px 16px 16px;max-height:88dvh;overflow-y:auto;text-align:center}
  footer{padding-bottom:8px}
}

/* installed app mode (standalone): browser chrome gayab, status-bar adjust */
@media (display-mode: standalone){
  .topbar{padding-top:calc(12px + env(safe-area-inset-top,0px))}
  footer{opacity:.7}
}