/* Base */
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans","Noto Sans Arabic","DejaVu Sans",sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, #1a2c7a, #0b1440 60%, #020412 100%);
  color:#fff; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}

/* Page wrapper centers entire page */
.page{ max-width:700px; margin:0 auto; padding:0 12px; }

/* Header: 25% / 75% columns */
.topbar{
  position:sticky; top:0; z-index:10;
  display:grid; grid-template-columns: 25% 75%; align-items:center; column-gap:10px;
  padding:10px 8px; background:rgba(2,4,18,.6); backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar .brand{font-weight:800; color:#ffd76b; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar .headline{font-weight:700; font-size:clamp(14px, 2.1vw, 18px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Content */
.container{ width:100%; margin:20px auto; }
.stage-wrapper{ display:flex; flex-direction:column; align-items:center; gap:10px; }

/* Toolbar pinned corners */
.toolbar.pinned{ position:relative; width:100%; height:48px; }
.toolbar.pinned .btn-file,
.toolbar.pinned #btnDownload{
  position:absolute; top:0; height:44px; display:inline-flex; align-items:center; justify-content:center;
  max-width: calc(50% - 6px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.toolbar.pinned .btn-file{ right:0; }
.toolbar.pinned #btnDownload{ left:0; }

/* Buttons */
.btn-file{
  position:relative; gap:8px; padding:10px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.06); color:#fff; cursor:pointer;
}
.btn-file input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.primary{
  background: linear-gradient(180deg, #f5c23e, #ffd76b); border:none; color:#111;
  padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:800;
}
.ghost{ background:transparent; border:1px solid rgba(255,255,255,.3); color:#fff; padding:10px 14px; border-radius:12px; cursor:pointer; }

/* Stage */
.stage{ position:relative; width:min(100%, 600px); aspect-ratio:1/1; border-radius:18px; background:rgba(255,255,255,.02);
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
  overflow:hidden; touch-action:none; }
#preview{ width:100%; height:100%; display:block; }

.under-stage{ display:flex; justify-content:center; width:100%; }
.caption-bottom{ color:#d7dbee; font-weight:700; opacity:.9; text-align:center; }

/* Controls */
.controls{ display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%; }
.controls .group{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.06); padding:10px 12px; border-radius:12px; }
.controls label{color:#c7cbe1; font-size:14px;}
.controls input[type=range]{width:220px;}
.controls .small{padding:6px 10px; border-radius:8px; border:1px solid rgba(255,255,255,.2); background:transparent; color:#fff; cursor:pointer;}

/* Nudge cross */
.pad-plus{ display:grid; grid-template-columns: 48px 48px 48px; grid-template-rows: 48px 48px 48px; gap:6px; justify-items:center; align-items:center; margin-top:4px;}
.pad-plus .up{ grid-column:2; grid-row:1; } .pad-plus .left{ grid-column:1; grid-row:2; } .pad-plus .right{ grid-column:3; grid-row:2; } .pad-plus .down{ grid-column:2; grid-row:3; }
.pad-plus .dot{ grid-column:2; grid-row:2; width:10px; height:10px; border-radius:50%; border:1px solid rgba(255,255,255,.4); opacity:.5; }
.nudge .arrow{ width:48px; height:48px; border-radius:10px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05); color:#fff; font-size:16px; cursor:pointer; }

/* Share */
.actions{ display:flex; align-items:center; justify-content:center; }
.actions .share{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.share .ico{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.04); color:#fff; cursor:pointer; }
.share .ico svg{width:22px; height:22px; fill:#fff}
.share .ico.more{font-size:22px;}

/* Footer */
.footer{ text-align:center; padding:20px 0 28px; color:#98a1c4; }