* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Segoe UI", Tahoma, sans-serif; background: #eef1f5; color: #1b2733; }
.loading { padding: 60px; text-align: center; color: #667; }

/* ---------- two-column shell: screens (left) | controls (right) ---------- */
.wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;   /* stage | sidebar */
    gap: 18px;
    max-width: 1760px;
    margin: 0 auto;
    padding: 16px 16px 96px;
    align-items: start;
}

/* the sidebar stays put, so you see the effect of every edit without scrolling */
.side {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-inline-start: 2px;   /* room for focus rings */
}
.side::-webkit-scrollbar { width: 6px; }
.side::-webkit-scrollbar-thumb { background: #cfd8e0; border-radius: 4px; }

.stage { min-width: 0; }

/* stack on narrow screens */
@media (max-width: 1100px) {
    .wrap { grid-template-columns: 1fr; }
    .side { position: static; max-height: none; }
}

/* ---------- theme picker ---------- */
.picker {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border-radius: 14px; padding: 12px 16px;
    box-shadow: 0 1px 5px rgba(0,0,0,.07); margin-bottom: 14px;
}
.picker label { font-weight: 800; color: #2b4c49; }
.picker select {
    flex: 1; max-width: 340px; padding: 9px; border-radius: 9px;
    border: 1px solid #d6dde4; font-size: 15px; background: #fff;
}

/* ---------- token palette ---------- */
.palette {
    background: #fff; border-radius: 14px; padding: 14px 16px;
    box-shadow: 0 1px 5px rgba(0,0,0,.07); margin-bottom: 18px;
}
.palette-h { font-weight: 800; color: #2b4c49; margin-bottom: 12px; }
.palette-g {
    display: grid; gap: 6px;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
}
.sw {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 6px 8px; border-radius: 9px; border: 1px solid transparent;
}
.sw:hover { background: #f2f6fa; }
.sw-on { background: #eaf4ff; border-color: #4AA3CA; }
/* checkerboard shows alpha */
.sw-c {
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
    border: 1px solid #dde3e9; overflow: hidden; position: relative;
    background-image:
        linear-gradient(45deg,#ccc 25%,transparent 25%),
        linear-gradient(-45deg,#ccc 25%,transparent 25%),
        linear-gradient(45deg,transparent 75%,#ccc 75%),
        linear-gradient(-45deg,transparent 75%,#ccc 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}
.sw-c i { position: absolute; inset: 0; display: block; }
.sw-l { font-size: 12.5px; line-height: 1.25; }

/* ---------- screen grid ---------- */
.grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}
.cell { display: flex; flex-direction: column; align-items: center; }
.cell-t { font-weight: 800; font-size: 13px; color: #47566a; margin-bottom: 7px; }
.phone {
    width: 100%; max-width: 268px; aspect-ratio: 9 / 19.5;   /* real phone ratio */
    border-radius: 22px; overflow: hidden;
    box-shadow: 0 6px 22px rgba(0,0,0,.17);
    border: 5px solid #1c1c1e; background: #fff;
}

/* ---------- screen chrome — dimensions taken from the real layouts ---------- */
.screen { height:100%; display:flex; flex-direction:column; font-size:11px; overflow:hidden; }
.s-body { flex:1; overflow-y:auto; padding-bottom:10px; }
.s-body.nopad { padding-bottom:0; }
.s-body::-webkit-scrollbar { width:3px; }
.s-body::-webkit-scrollbar-thumb { background:rgba(128,128,128,.3); border-radius:3px; }

.tok { cursor:pointer; }
.tok:hover { outline:1.5px dashed #4AA3CA; outline-offset:1px; }
.tok.sel { outline:2px solid #ff9500; outline-offset:1px; border-radius:3px; }

/* top bar (layout_toolbar): icons right, title, back square left */
.s-top { display:flex; align-items:center; gap:8px; padding:11px 11px 8px; }
.s-i { font-size:14px; line-height:1; }
.s-t { flex:1; font-weight:800; font-size:13px; text-align:end; }
.s-back { width:26px; height:26px; border-radius:8px; flex-shrink:0;
          display:flex; align-items:center; justify-content:center; font-size:13px; }
.s-gr { flex:1; text-align:end; line-height:1.3; }
.s-gr em { display:block; font-style:normal; font-size:9.5px; }
.s-gr b { font-size:12px; }

/* home location card (r8) */
.s-loc { margin:4px 11px; padding:9px 11px; border-radius:8px;
         display:flex; align-items:center; justify-content:space-between;
         font-size:9.5px; font-weight:600; }

/* offers pager */
.s-pager { margin:7px 11px; height:92px; border-radius:12px; position:relative;
           background:linear-gradient(135deg,#cfd8e0,#aeb9c4);
           display:flex; align-items:center; justify-content:center; font-size:30px; }
.s-dots { position:absolute; inset-inline-start:7px; top:50%; transform:translateY(-50%);
          display:flex; flex-direction:column; gap:4px;
          background:rgba(255,255,255,.75); padding:4px 3px; border-radius:8px; }
.s-dots i { width:5px; height:5px; border-radius:50%; display:block; }

/* search input (h=38) */
.s-inp { margin:6px 11px; height:34px; padding:0 11px; border-radius:8px;
         display:flex; align-items:center; justify-content:space-between; font-size:9.5px; }

/* sector chips */
.s-fr { display:flex; gap:5px; padding:5px 11px; overflow-x:auto; }
.s-fr::-webkit-scrollbar { display:none; }
.s-f { padding:5px 11px; border-radius:15px; font-size:9.5px; font-weight:700;
       white-space:nowrap; flex-shrink:0; }

/* section head (14ssp) */
.s-sec { padding:10px 11px 5px; font-weight:800; font-size:12px; }
.s-sec.arrow { display:flex; align-items:center; justify-content:space-between; }
.s-sec.arrow span { font-size:10px; font-weight:700; }
.s-para { padding:2px 11px; font-size:9.5px; line-height:1.7; }
.s-ul { padding-inline-start:22px; padding-top:3px; font-size:9.5px; line-height:1.9; margin:0; }
.s-line { height:1px; margin:9px 11px; }

/* ===== row_home_norah: card r14, img 125, chips 26, title 17, body 13, btn 40 ===== */
.s-hc { margin:4px 11px; border-radius:14px; overflow:hidden; }
.s-hc-img { height:104px; position:relative; font-size:32px;
            background:linear-gradient(135deg,#d94040,#a82020);
            display:flex; align-items:center; justify-content:center; }
.s-hc-badge { position:absolute; top:7px; inset-inline-start:7px;
              padding:3px 8px; border-radius:5px; font-size:8px; font-weight:700; }
.s-hc-chips { display:flex; gap:5px; padding:9px 10px 0; }
.s-hc-chip { height:22px; padding:0 9px; border-radius:6px; font-size:8.5px; font-weight:700;
             display:inline-flex; align-items:center; }
.s-hc-t { display:block; padding:7px 10px 0; font-size:13px; font-weight:800; }
.s-hc-d { padding:3px 10px 0; font-size:9.5px; line-height:1.6; margin:0; }
.s-hc-div { height:1px; margin:9px 10px 0; }
.s-hc-btn { margin:9px 10px 10px; height:33px; border-radius:8px; font-size:10.5px; font-weight:800;
            display:flex; align-items:center; justify-content:center; }
.s-hc-btn.wide { margin:12px 11px 6px; }

/* ===== row_of_offer: card r9, img 77x61, text right ===== */
.s-ro { margin:5px 11px; border-radius:9px; padding:9px;
        display:flex; gap:9px; align-items:flex-start; }
.s-ro.float { margin-top:-24px; position:relative; z-index:2; }
.s-ro-txt { flex:1; min-width:0; display:flex; flex-direction:column;
            align-items:flex-start; gap:3px; }
.s-ro-txt b { font-size:10.5px; font-weight:800; }
.s-ro-txt p { font-size:9px; line-height:1.55; margin:0; }
.s-ro-img { display:flex; flex-direction:column; align-items:center; gap:5px; flex-shrink:0; }
.s-pic { width:62px; height:50px; border-radius:8px; background:#fff;
         display:flex; align-items:center; justify-content:center; font-size:20px;
         border:1px solid rgba(0,0,0,.07); }
.s-pic.sm { width:44px; height:44px; font-size:17px; }
.s-heart { width:21px; height:21px; border-radius:50%; font-size:10px;
           display:flex; align-items:center; justify-content:center;
           box-shadow:0 1px 3px rgba(0,0,0,.15); }
.s-new { padding:3px 7px; border-radius:5px; font-size:8px; font-weight:700; }
.s-disc { padding:4px 10px; border-radius:6px; font-size:9px; font-weight:800;
          margin-top:2px; display:inline-block; }
.s-rate { font-size:9px; font-weight:700; }
.s-meta2 { display:flex; gap:6px; padding:6px 11px; }
.s-mchip { padding:4px 9px; border-radius:6px; font-size:8.5px; font-weight:700; }

/* brand grid */
.s-bg2 { display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:4px 11px; }
.s-bcard { height:46px; border-radius:11px; font-size:17px;
           display:flex; align-items:center; justify-content:center; }

/* ===== fragment_settings: label OUTSIDE, card r14, rows + 1px dividers ===== */
.s-slbl { padding:11px 13px 5px; font-size:10px; font-weight:700; }
.s-scard { margin:0 11px 4px; border-radius:14px; padding:0 11px; }
.s-scard.tall { padding:12px 13px; }
.s-srow { display:flex; align-items:center; gap:9px; padding:11px 0; font-size:10px; }
.s-slab { flex:1; font-weight:700; }
.s-sdiv { height:1px; }
/* toggle: MaterialCardView 40x26 r25 */
.s-stog { width:34px; height:20px; border-radius:12px; padding:2px; display:flex;
          flex-shrink:0; align-items:center; }
.s-stog i { width:15px; height:15px; border-radius:50%; display:block; }
.s-stog.on i { margin-inline-start:auto; }
/* icon chip: card h30 r8 */
.s-mico { width:24px; height:24px; border-radius:7px; flex-shrink:0; font-size:11px;
          display:flex; align-items:center; justify-content:center; }

/* ===== profile ===== */
.s-phdr { height:74px; padding:11px; display:flex; align-items:flex-start; gap:9px; }
.s-ptitle { flex:1; text-align:end; font-weight:800; font-size:13px; }
.s-pav-wrap { display:flex; justify-content:center; margin-top:-26px; }
.s-pav { width:52px; height:52px; border-radius:50%; font-size:20px; font-weight:800;
         display:flex; align-items:center; justify-content:center; }
.s-pname { text-align:center; padding:7px 0 10px; }
.s-pname b { display:block; font-size:13px; }
.s-pname em { font-style:normal; font-size:9.5px; }

/* ===== more/menu ===== */
.s-mcard { margin:6px 11px; height:74px; border-radius:9px;
           background:linear-gradient(135deg,#2b4c49,#1d3330);
           display:flex; flex-direction:column; align-items:center; justify-content:center;
           gap:3px; color:#fff; }
.s-mcard-n { font-size:12px; font-weight:800; }
.s-mcard em { font-style:normal; font-size:9px; opacity:.85; }
.s-gift { margin:5px 11px; border-radius:9px; padding:11px;
          display:flex; align-items:center; justify-content:space-between; gap:8px; }
.s-gift-t { font-size:9.5px; font-weight:700; }
.s-gift-b { padding:6px 11px; border-radius:7px; font-size:9px; font-weight:800;
            white-space:nowrap; }

/* ===== row_news_item: card r13, Border 1.5f ===== */
.s-nc { margin:6px 11px; border-radius:13px; overflow:hidden; }
.s-nimg { height:62px; font-size:22px;
          background:linear-gradient(135deg,#3a4a5e,#1e2a38);
          display:flex; align-items:center; justify-content:center; }
.s-nb { padding:9px 10px 11px; }
.s-nb b { display:block; font-size:11px; margin:3px 0; }
.s-nb p { font-size:9px; line-height:1.55; margin:0; }
.s-date { font-style:normal; font-size:8.5px; font-weight:700; }

/* ===== community: 3 tab cards (r6) + friend rows ===== */
.s-ctabs { display:flex; gap:5px; padding:7px 11px; }
.s-ctab { flex:1; padding:7px 4px; border-radius:6px; font-size:8.5px; font-weight:700;
          text-align:center; }
.s-fc { margin:5px 11px; border-radius:10px; padding:9px;
        display:flex; align-items:center; gap:9px; }
.s-fav { width:38px; height:38px; border-radius:5px; flex-shrink:0;
         display:flex; align-items:center; justify-content:center;
         font-size:15px; font-weight:800; }
.s-fb { flex:1; min-width:0; }
.s-fb b { display:block; font-size:10.5px; }
.s-fb em { font-style:normal; font-size:9px; }
.s-fbtn { width:26px; height:26px; border-radius:5px; flex-shrink:0; font-size:11px;
          display:flex; align-items:center; justify-content:center; font-weight:800; }
.s-fpend { padding:5px 9px; border-radius:5px; font-size:8.5px; font-weight:700;
           white-space:nowrap; }
.s-fico { font-size:14px; }

/* ===== about us: gradient cards (r9) ===== */
.s-abc { margin:5px 11px; padding:13px; border-radius:9px; position:relative; overflow:hidden; }
.s-abc b { display:block; font-size:11.5px; margin-bottom:4px; }
.s-abc p { font-size:9.5px; line-height:1.7; margin:0; }
.s-abc-acc { position:absolute; inset-block:0; inset-inline-end:0; width:5px; }

/* ===== offer details: ticket ===== */
.s-tkt { margin:5px 11px; border-radius:10px; padding:13px 11px;
         display:flex; align-items:center; gap:11px; position:relative; }
.s-tkt-l { display:flex; flex-direction:column; align-items:center; gap:5px; flex-shrink:0; }
.s-tkt-l em { font-style:normal; font-size:8px; font-weight:700; }
.s-tkt-rule { width:2px; align-self:stretch; border-radius:2px; }
.s-tkt-v { flex:1; text-align:center; font-size:26px; font-weight:800; }
.s-hdr { display:block; font-size:10.5px; margin-bottom:8px; }
.s-hdr2 { display:block; font-size:10.5px; margin-bottom:5px; }
.s-exp { margin:5px 11px; padding:11px; border-radius:9px;
         display:flex; align-items:center; justify-content:space-between;
         font-size:10px; font-weight:700; }

/* ===== partner details ===== */
.s-plogo { margin:6px 11px; height:56px; border-radius:9px; background:#fff;
           border:1px solid rgba(0,0,0,.07); font-size:24px;
           display:flex; align-items:center; justify-content:center; }
.s-pcard { margin:5px 11px; border-radius:8px; padding:9px 11px;
           display:flex; align-items:center; gap:7px; }
.s-pname2 { flex:1; font-size:11.5px; font-weight:800; }
.s-pact { width:24px; height:24px; border-radius:6px; flex-shrink:0; font-size:10px;
          display:flex; align-items:center; justify-content:center; }
.s-pfav { margin:4px 11px; padding:8px 11px; border-radius:5px; font-size:9px; font-weight:600; }

/* tabs (underline) */
.s-tb { display:flex; gap:16px; padding:6px 13px 0; margin-bottom:4px; }
.s-tbi { padding:7px 0; font-size:10px; font-weight:700; }

/* map */
.s-map { margin:6px 11px 0; height:150px; border-radius:12px; position:relative;
         background:
           repeating-linear-gradient(0deg,#dfe6ec 0 22px,#d3dce4 22px 23px),
           repeating-linear-gradient(90deg,#dfe6ec 0 22px,#d3dce4 22px 23px);
         display:flex; align-items:center; justify-content:center; }
.s-pin { font-size:24px; }
.s-pin.sm { font-size:16px; position:absolute; top:32px; inset-inline-start:44px; }

/* bottom nav: solid bar + floating centre button */
.s-nav { display:flex; justify-content:space-around; align-items:center;
         padding:8px 4px 7px; position:relative; flex-shrink:0; }
.s-nv { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:13px; }
.s-nv em { font-style:normal; font-size:7.5px; font-weight:600; }
.s-nvc { position:absolute; left:50%; transform:translateX(-50%); top:-15px;
         width:40px; height:40px; border-radius:50%;
         display:flex; align-items:center; justify-content:center;
         font-size:16px; box-shadow:0 3px 10px rgba(0,0,0,.3); }

/* ---------- popup ---------- */
.ov {
    position: fixed; inset: 0; background: rgba(0,0,0,.42);
    display: flex; align-items: center; justify-content: center; z-index: 60;
}
.pop {
    background: #fff; border-radius: 16px; width: 320px; max-width: 90vw;
    padding: 18px; box-shadow: 0 14px 44px rgba(0,0,0,.3);
}
.pop-h { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 16px; margin-bottom: 13px; }
.pop-h .x { border: none; background: none; font-size: 17px; cursor: pointer; color: #8b96a3; }
.pop-pv {
    height: 62px; border-radius: 11px; margin-bottom: 13px; border: 1px solid #e6eaee;
    background-image:
        linear-gradient(45deg,#ddd 25%,transparent 25%),
        linear-gradient(-45deg,#ddd 25%,transparent 25%),
        linear-gradient(45deg,transparent 75%,#ddd 75%),
        linear-gradient(-45deg,transparent 75%,#ddd 75%);
    background-size: 12px 12px;
}
.pop-r { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.pop-r input[type=color] { width: 50px; height: 42px; border: none; border-radius: 8px; background: none; cursor: pointer; }
.hex {
    flex: 1; padding: 10px; border: 1px solid #d6dde4; border-radius: 8px;
    font-family: ui-monospace, monospace; font-size: 15px; text-transform: uppercase;
    direction: ltr; text-align: center;
}
.pop-r.alpha label { font-size: 12.5px; min-width: 52px; }
.pop-r.alpha input[type=range] { flex: 1; }
.pop-a { margin-top: 6px; }
.pop-a .ok {
    width: 100%; padding: 12px; border: none; border-radius: 9px;
    background: #2b4c49; color: #fff; font-weight: 800; font-size: 14px; cursor: pointer;
}
.pop-n {
    margin-top: 11px; font-size: 11px; color: #9aa5b1; text-align: center;
    direction: ltr; font-family: ui-monospace, monospace;
}

/* ---------- save bar ---------- */
.savebar {
    position: fixed; bottom: 0; inset-inline: 0; z-index: 40;
    background: #fff; padding: 12px 20px;
    box-shadow: 0 -2px 14px rgba(0,0,0,.11);
    display: flex; align-items: center; justify-content: center; gap: 14px;
}
.save {
    min-width: 260px; padding: 14px; border: none; border-radius: 11px;
    background: #2b4c49; color: #fff; font-size: 15px; font-weight: 800; cursor: pointer;
}
.save:disabled { opacity: .6; cursor: default; }
.msg { font-size: 13px; font-weight: 700; color: #1f8a4c; }

/* ---------- theme generator ---------- */
.gen {
    background: #fff; border-radius: 14px; padding: 14px 16px;
    box-shadow: 0 1px 5px rgba(0,0,0,.07); margin-bottom: 16px;
}
.gen-row { display: flex; gap: 9px; }
.gen-in {
    flex: 1; padding: 11px 13px; border: 1px solid #d6dde4;
    border-radius: 10px; font-size: 14.5px; font-family: inherit;
}
.gen-in:focus { outline: 2px solid #4AA3CA; outline-offset: -1px; border-color: transparent; }
.gen-btn {
    min-width: 92px; padding: 11px 18px; border: none; border-radius: 10px;
    background: #2b4c49; color: #fff; font-weight: 800; font-size: 14px; cursor: pointer;
}
.gen-btn:disabled { opacity: .5; cursor: default; }

.gen-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gen-tag {
    padding: 5px 12px; border-radius: 14px; font-size: 12.5px; cursor: pointer;
    background: #eef3f7; color: #40566b; border: 1px solid #dde5ec;
}
.gen-tag:hover { background: #e0ecf5; border-color: #4AA3CA; color: #1f4257; }

.gen-res { margin-top: 12px; border-top: 1px solid #eef1f4; padding-top: 11px; }
.gen-res-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.gen-res-h b { font-size: 14.5px; }
.src {
    font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
    background: #eef3f7; color: #5b7085;
}
.undo, .asnew {
    margin-inline-start: auto; padding: 7px 13px; border-radius: 8px;
    font-size: 12.5px; font-weight: 700; cursor: pointer; border: 1px solid #d6dde4;
    background: #fff; color: #44586b;
}
.asnew { margin-inline-start: 0; background: #2b4c49; color: #fff; border-color: #2b4c49; }
.asnew:disabled { opacity: .55; cursor: default; }

.warn {
    margin-top: 9px; padding: 8px 11px; border-radius: 8px; font-size: 12.5px;
    background: #fff5e6; color: #8a5a00; border: 1px solid #ffe0b2;
}
.pass {
    margin-top: 9px; padding: 8px 11px; border-radius: 8px; font-size: 12.5px;
    background: #eaf7ef; color: #1f6b40; border: 1px solid #c6e9d4;
}

/* ---------- error page ---------- */
.err-wrap {
    max-width: 620px; margin: 80px auto; padding: 28px 32px;
    background: #fff; border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.err-wrap h2 { color: #b3261e; margin-bottom: 10px; font-size: 21px; }
.err-wrap p { color: #46525f; line-height: 1.75; margin-bottom: 10px; }
.err-id code {
    background: #f1f4f7; padding: 3px 7px; border-radius: 5px;
    font-family: ui-monospace, monospace; direction: ltr; display: inline-block;
}
.err-home {
    display: inline-block; margin-top: 14px; padding: 10px 20px;
    background: #2b4c49; color: #fff; text-decoration: none;
    border-radius: 9px; font-weight: 700;
}

.s-tkt-ic { font-size:12px; }
.s-mdist { font-style:normal; font-size:8.5px; font-weight:700; }

/* ---------- theme metadata (force-apply + background image) ---------- */
.meta {
    background: #fff; border-radius: 14px; padding: 13px 16px;
    box-shadow: 0 1px 5px rgba(0,0,0,.07); margin-bottom: 14px;
    display: flex; flex-direction: column; gap: 11px;
}

/* force-apply */
.force { display: flex; align-items: center; gap: 9px; cursor: pointer; flex-wrap: wrap; }
.force input { width: 17px; height: 17px; cursor: pointer; accent-color: #2b4c49; }
.force span { font-weight: 800; font-size: 14px; color: #23343f; }
.force em {
    font-style: normal; font-size: 11.5px; color: #7b8b99;
    padding-inline-start: 4px;
}

/* image url row */
.img-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.img-in {
    flex: 1; min-width: 190px; padding: 10px 12px;
    border: 1px solid #d6dde4; border-radius: 9px;
    font-size: 13px; direction: ltr; text-align: left; font-family: inherit;
}
.img-in:focus { outline: 2px solid #4AA3CA; outline-offset: -1px; border-color: transparent; }

/* hide the real file input, style its label as the button */
.img-file { display: none; }
.img-btn {
    padding: 10px 15px; border-radius: 9px; cursor: pointer;
    background: #eef3f7; color: #40566b; border: 1px solid #dde5ec;
    font-size: 13px; font-weight: 700; white-space: nowrap;
}
.img-btn:hover { background: #e0ecf5; border-color: #4AA3CA; color: #1f4257; }

.img-save {
    padding: 10px 17px; border: none; border-radius: 9px; cursor: pointer;
    background: #2b4c49; color: #fff; font-size: 13px; font-weight: 800;
}
.img-save:disabled { opacity: .55; cursor: default; }

/* preview */
.img-prev {
    margin-top: 9px; display: flex; align-items: center; gap: 10px;
}
.img-prev img {
    height: 54px; width: 96px; object-fit: cover;
    border-radius: 8px; border: 1px solid #e2e8ee; background: #f4f7fa;
}
.img-clear {
    padding: 6px 12px; border-radius: 8px; cursor: pointer;
    background: #fff; color: #b3261e; border: 1px solid #f0c9c6;
    font-size: 12px; font-weight: 700;
}

/* status line */
.meta-msg {
    margin-top: 7px; padding: 7px 11px; border-radius: 8px; font-size: 12.5px;
    background: #eaf7ef; color: #1f6b40; border: 1px solid #c6e9d4;
}
.meta-msg.err { background: #fdeceb; color: #a4231c; border-color: #f4c7c3; }
.img { border-top: 1px solid #eef1f4; padding-top: 11px; }

/* ---------- picker toolbar: rename / duplicate / export / import ---------- */
.picker { flex-wrap: wrap; }

.mini {
    padding: 8px 13px; border-radius: 8px; cursor: pointer;
    background: #eef3f7; color: #40566b; border: 1px solid #dde5ec;
    font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.mini:hover { background: #e0ecf5; border-color: #4AA3CA; color: #1f4257; }
.mini:disabled { opacity: .5; cursor: default; }
.mini.ok { background: #2b4c49; color: #fff; border-color: #2b4c49; }
.mini.as-btn { display: inline-block; }   /* label styled as a button (file input) */

.rename-in {
    flex: 1; min-width: 180px; padding: 9px 12px;
    border: 1px solid #4AA3CA; border-radius: 9px;
    font-size: 14.5px; font-family: inherit;
}
.rename-in:focus { outline: 2px solid #4AA3CA; outline-offset: -1px; }

/* ---------- save bar: keep-original toggle ---------- */
.keep {
    display: flex; align-items: center; gap: 7px; cursor: pointer;
    font-size: 12.5px; font-weight: 700; color: #44586b; white-space: nowrap;
}
.keep input { width: 16px; height: 16px; cursor: pointer; accent-color: #2b4c49; }

/* ---------- four image slots ---------- */
.img-slot {
    padding: 11px 0;
    border-bottom: 1px dashed #e6ecf1;
}
.img-slot:last-of-type { border-bottom: none; padding-bottom: 4px; }

.img-lbl { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.img-lbl b  { font-size: 13px; color: #23343f; }
.img-lbl em { font-style: normal; font-size: 11.5px; color: #8695a3; }

/* logo previews are usually transparent — show a checkerboard behind them */
.img-prev img {
    background-image:
        linear-gradient(45deg, #e8edf1 25%, transparent 25%),
        linear-gradient(-45deg, #e8edf1 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e8edf1 75%),
        linear-gradient(-45deg, transparent 75%, #e8edf1 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0;
    object-fit: contain;
}

/* ===================================================================
   Intro / Splash — the two screens that consume IntroUrl / LoadingUrl / LogoUrl.
   Both are full-bleed: the image IS the background, so no scroll chrome.
   =================================================================== */
.screen.intro, .screen.splash { position: relative; }

.intro-body {
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 26px 16px 20px; overflow: hidden;
}
.intro-logo { flex: 1; display: flex; align-items: center; justify-content: center; }
.intro-logo img { max-width: 62%; max-height: 90px; object-fit: contain; }
.intro-logo span { font-size: 17px; font-weight: 800; }

.intro-actions { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.intro-or { font-size: 10px; }
.intro-fp {
    width: 42px; height: 42px; border-radius: 50%; font-size: 19px;
    display: flex; align-items: center; justify-content: center;
}
.intro-sup { font-size: 10px; font-weight: 700; text-decoration: underline; }

/* splash */
.splash { display: flex; flex-direction: column; }
.splash-mid {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 15px;
}
.splash-logo { max-width: 60%; max-height: 88px; object-fit: contain; }
.splash-logo-ph { font-size: 17px; font-weight: 800; }
.splash-bar {
    width: 42%; height: 4px; border-radius: 3px; overflow: hidden;
}
.splash-bar i { display: block; width: 55%; height: 100%; border-radius: 3px; }
.splash-lic {
    text-align: center; font-size: 8.5px; padding-bottom: 16px; font-weight: 600;
}

/* ---------- login / register ---------- */
.lg-top {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 16px 16px 12px; text-align: center;
}
.lg-logo { max-width: 46%; max-height: 44px; object-fit: contain; margin-bottom: 5px; }
.lg-logo-ph { font-size: 14px; font-weight: 800; margin-bottom: 3px; }
.lg-top b  { font-size: 14px; }
.lg-top em { font-style: normal; font-size: 10px; }

/* the two tabs (btnLoginTap / btnJoinNow) inside one r12 card */
.lg-tabs {
    margin: 4px 13px 10px; border-radius: 12px; padding: 3px;
    display: flex; gap: 3px;
}
.lg-tab {
    flex: 1; padding: 8px 4px; border-radius: 9px; text-align: center;
    font-size: 10.5px; font-weight: 800;
}

.lg-fld { padding: 0 13px 9px; }
.lg-lbl { display: flex; gap: 3px; margin-bottom: 5px; font-size: 10px; font-weight: 700; }
.lg-in {
    height: 34px; padding: 0 11px; border-radius: 8px;
    display: flex; align-items: center; font-size: 10px;
}

.lg-rem { display: flex; align-items: center; gap: 6px; padding: 2px 13px 4px; font-size: 10px; }
.lg-chk {
    width: 15px; height: 15px; border-radius: 4px; font-size: 9px;
    display: flex; align-items: center; justify-content: center; font-weight: 800;
}

.lg-alt { display: flex; gap: 7px; padding: 9px 13px 0; }
.lg-altb {
    flex: 1; padding: 9px 4px; border-radius: 8px; text-align: center;
    font-size: 9.5px; font-weight: 700;
}
.lg-foot { text-align: center; padding: 12px 13px 6px; font-size: 10px; font-weight: 700; }

/* ---------- FAQ ---------- */
.faq { margin: 5px 11px; border-radius: 6px; padding: 11px; }
.faq-q { display: flex; align-items: center; gap: 8px; }
.faq-q b { flex: 1; font-size: 10.5px; line-height: 1.5; }
.faq-ar { font-size: 12px; flex-shrink: 0; }
.faq-div { height: 1px; margin: 9px 0; }
.faq-a { font-size: 9.5px; line-height: 1.75; margin: 0; }

/* ---------- support ---------- */
.sup-art { text-align: center; font-size: 40px; padding: 14px 0 6px; }
.sup-h { text-align: center; font-size: 13px; font-weight: 800; padding-bottom: 4px; }
.sup-s { text-align: center; font-size: 9.5px; padding: 0 16px 11px; line-height: 1.6; }
.sup-v { font-size: 9px; direction: ltr; }

/* ---------- sidebar tabs ---------- */
.tabs {
    display: flex; gap: 4px;
    background: #e4eaf0; border-radius: 11px; padding: 4px;
}
.tab {
    flex: 1; padding: 9px 6px; border: none; border-radius: 8px; cursor: pointer;
    background: transparent; color: #5a6b7b;
    font-size: 12.5px; font-weight: 800; font-family: inherit;
    white-space: nowrap;
}
.tab:hover { color: #1f4257; }
.tab.on {
    background: #fff; color: #2b4c49;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* ---------- sidebar: tighten the panels ---------- */
.side .picker,
.side .meta,
.side .gen,
.side .palette { margin-bottom: 0; }

/* picker wraps its buttons onto their own line inside the narrow sidebar */
.side .picker { flex-wrap: wrap; gap: 7px; }
.side .picker select { flex: 1 1 100%; max-width: none; }
.side .picker .mini { flex: 1 1 auto; text-align: center; }

/* the token palette is the main tab — give it room and 2 columns */
.side .palette-g { grid-template-columns: 1fr 1fr; }

/* image rows stack vertically in the sidebar instead of one cramped line */
.side .img-row { flex-wrap: wrap; }
.side .img-in { flex: 1 1 100%; min-width: 0; }
.side .img-btn,
.side .img-save,
.side .img-clear { flex: 1 1 auto; text-align: center; }

.side .img-prev { margin-top: 8px; }
.side .img-prev img { height: 60px; width: 100%; }

/* label above each image slot */
.side .img-lbl { flex-direction: column; align-items: flex-start; gap: 2px; }
.side .img-slot { padding: 12px 0; }

/* generator */
.side .gen-row { flex-wrap: wrap; }
.side .gen-in { flex: 1 1 100%; }
.side .gen-btn { flex: 1 1 auto; }

/* keep the fixed save bar clear of the sticky sidebar */
@media (min-width: 1101px) {
    .savebar { inset-inline-end: 398px; }   /* 380 sidebar + 18 gap */
}

/* ---------- font picker (MzFonts) ---------- */
.fontrow { padding: 4px 0 13px; border-bottom: 1px dashed #e6ecf1; }

.font-line { display: flex; gap: 6px; align-items: center; }
.font-sel {
    flex: 1; min-width: 0; padding: 9px 11px;
    border: 1px solid #d6dde4; border-radius: 9px;
    font-size: 13px; font-family: inherit; background: #fff; cursor: pointer;
}
.font-sel:focus { outline: 2px solid #4AA3CA; outline-offset: -1px; }

.font-ic {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 9px; cursor: pointer; font-size: 15px; font-weight: 800;
    background: #eef3f7; color: #40566b; border: 1px solid #dde5ec;
    display: flex; align-items: center; justify-content: center; font-family: inherit;
}
.font-ic:hover { background: #e0ecf5; border-color: #4AA3CA; color: #1f4257; }
.font-ic:disabled { opacity: .45; cursor: default; }
.font-ic.add { background: #2f9e5f; color: #fff; border-color: #2f9e5f; font-size: 18px; }
.font-ic.add:hover { background: #268a51; border-color: #268a51; color: #fff; }

.font-edit { display: flex; gap: 6px; margin-top: 8px; }
.font-in {
    flex: 1; min-width: 0; padding: 9px 11px;
    border: 1px solid #4AA3CA; border-radius: 9px; font-size: 13px; font-family: inherit;
}
.font-in:focus { outline: 2px solid #4AA3CA; outline-offset: -1px; }

/* ---------- three variants per image kind ---------- */
.img-var {
    display: flex; flex-direction: column; gap: 5px;
    padding: 7px 0 7px 0;
    border-inline-start: 2px solid #eef2f6;
    padding-inline-start: 9px;
    margin-top: 6px;
}
.img-n {
    width: 18px; height: 18px; border-radius: 50%;
    background: #eef3f7; color: #64788a;
    font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}

/* ---------- temporary login page ---------- */
.lg-wrap {
    min-height: 100vh; display: grid; place-items: center;
    background: linear-gradient(135deg, #1B2A4A, #2C4066);
    padding: 20px;
}
.lg-card {
    width: 100%; max-width: 380px; background: #fff;
    border-radius: 18px; padding: 34px 30px;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.lg-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.lg-mark {
    width: 46px; height: 46px; border-radius: 13px;
    background: linear-gradient(135deg, #B19300, #D4B62C);
    display: grid; place-items: center; color: #1B2A4A; font-weight: 800; font-size: 20px;
}
.lg-brand b { display: block; font-size: 16px; color: #1B2A4A; }
.lg-brand span { font-size: 11.5px; color: #7A899B; }

.lg-card h1 { margin: 0 0 4px; font-size: 21px; color: #1B2A4A; }
.lg-sub { margin: 0 0 22px; font-size: 13px; color: #7A899B; }

.lg-field { margin-bottom: 16px; }
.lg-field label { display: block; font-size: 12.5px; font-weight: 700; color: #44586b; margin-bottom: 6px; }
.lg-in {
    width: 100%; box-sizing: border-box; padding: 11px 13px;
    border: 1px solid #d6dde4; border-radius: 10px; font-size: 14px; font-family: inherit;
}
.lg-in:focus { outline: 2px solid #B19300; outline-offset: -1px; border-color: #B19300; }

.lg-btn {
    width: 100%; padding: 12px; border: none; border-radius: 10px;
    background: #1B2A4A; color: #fff; font-size: 14.5px; font-weight: 800;
    cursor: pointer; font-family: inherit; margin-top: 4px;
}
.lg-btn:hover { background: #2C4066; }
.lg-link {
    width: 100%; padding: 10px; border: none; background: none;
    color: #7A899B; font-size: 13px; cursor: pointer; font-family: inherit; margin-top: 4px;
}
.lg-link:hover { color: #1B2A4A; }

.lg-err {
    background: #FCF0EE; border: 1px solid #F0C9C1; color: #C0442E;
    padding: 10px 12px; border-radius: 9px; font-size: 12.5px; margin-bottom: 14px;
}

/* logout button in the corner of protected pages */
.mz-logout {
    position: fixed; top: 12px; inset-inline-start: 12px; z-index: 60;
    padding: 7px 14px; border: 1px solid #d6dde4; border-radius: 9px;
    background: #fff; color: #44586b; font-size: 12.5px; font-weight: 700;
    cursor: pointer; font-family: inherit; text-decoration: none;
}
.mz-logout:hover { border-color: #C0442E; color: #C0442E; }