/* Free Gang Sheet Maker: builder styles shared by the free tool and the embed.
   Tokens live on the mount (.fgsm) and on the floating UI (.fgsm-ui), never
   on :root, so an embed cannot bleed into a host page. */
.fgsm,.fgsm-ui{
  --bg:#0c0d10; --panel:#15171c; --panel-2:#1d2027; --panel-3:#20242c; --line:#2a2e37;
  --text:#eef0f4; --muted:#9aa3b2; --hint:#6b7280; --accent:#ffd23f; --accent-ink:#1a1500;
  --accent-2:#3fb6ff; --accent2-ink:#001624; --good:#46d39a; --danger:#ff5d5d; --radius:14px;
  --drop-line:#353a45; --well:#0d0f13; --bar:#12141a;
  --chk-a:#191b20; --chk-b:#12141a;
  color:var(--text);
}
.fgsm *{box-sizing:border-box}
/* Embedded mounts paint their own surface so the heading and intro never
   land on the host page's background (light text on a white site, or the
   reverse). The free tool skips this because its page already is the bg. */
.fgsm.fg-surface{background:var(--bg);color:var(--text);padding:18px;border-radius:var(--radius);color-scheme:dark}
.fgsm.fg-surface.fgsm-light{color-scheme:light}
@media (prefers-color-scheme: light){ .fgsm.fg-surface.fgsm-auto{color-scheme:light} }
@media (max-width:560px){ .fgsm.fg-surface{padding:12px} }
.fgsm-light,.fgsm-ui.fgsm-light{
  --bg:#f6f7f9; --panel:#ffffff; --panel-2:#f3f4f6; --panel-3:#e9ecf0; --line:#dfe3e8;
  --text:#111827; --muted:#5b6472; --hint:#6b7280; --good:#0f9f6e; --danger:#dc2626;
  --drop-line:#cbd5e1; --well:#ffffff; --bar:#e5e7eb; --chk-a:#e5e7eb; --chk-b:#f3f4f6;
}
@media (prefers-color-scheme: light){
  .fgsm-auto,.fgsm-ui.fgsm-auto{
    --bg:#f6f7f9; --panel:#ffffff; --panel-2:#f3f4f6; --panel-3:#e9ecf0; --line:#dfe3e8;
    --text:#111827; --muted:#5b6472; --hint:#6b7280; --good:#0f9f6e; --danger:#dc2626;
    --drop-line:#cbd5e1; --well:#ffffff; --bar:#e5e7eb; --chk-a:#e5e7eb; --chk-b:#f3f4f6;
  }
}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border:1px solid var(--line);background:var(--panel-2);color:var(--text);
    padding:10px 16px;border-radius:10px;font-weight:600;cursor:pointer;font-size:14px;transition:.15s;
  }
  .btn:hover{border-color:#3a3f4b;text-decoration:none}
  .btn.primary{background:var(--accent);color:var(--accent-ink,#111111);border-color:var(--accent)}
  .btn.primary:hover{filter:brightness(1.06)}
  .btn.accent{background:var(--accent-2);color:var(--accent2-ink,#001624);border-color:var(--accent-2)}
  .btn:disabled{opacity:.45;cursor:not-allowed}

  .app{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin:22px 0}
  @media (max-width:920px){.app{grid-template-columns:1fr}}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
  .card h2{font-size:15px;margin:0 0 12px;display:flex;align-items:center;gap:9px;letter-spacing:.2px}
  .step{width:24px;height:24px;border-radius:7px;background:var(--accent);color:var(--accent-ink,#111111);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none}

  .drop{
    border:2px dashed var(--drop-line);border-radius:12px;padding:30px 16px;text-align:center;
    color:var(--muted);cursor:pointer;transition:.15s;background:var(--panel-2)
  }
  .drop:hover,.drop.drag{border-color:var(--accent);color:var(--text);background:var(--panel-3)}
  .drop strong{color:var(--text);display:block;font-size:15px;margin-bottom:3px}
  .samplerow{margin-top:10px;text-align:center}
  .samplelink{background:transparent;border:0;color:var(--accent-2);font-size:13px;cursor:pointer;font-weight:600;padding:4px}
  .samplelink:hover{text-decoration:underline}
  :focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
  @media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important;scroll-behavior:auto !important}}

  .designs{margin-top:14px;display:flex;flex-direction:column;gap:8px;max-height:380px;overflow:auto}
  .design{display:grid;grid-template-columns:54px 1fr;gap:11px;align-items:start;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:9px}
  .thumb{width:54px;height:54px;border-radius:7px;background:#0d0f13 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><rect width="6" height="6" fill="%23222"/><rect x="6" y="6" width="6" height="6" fill="%23222"/></svg>');background-size:12px;object-fit:contain;border:1px solid var(--line);cursor:zoom-in;transition:.15s}
  .thumb:hover{border-color:var(--accent)}
  .design .body{min-width:0;display:flex;flex-direction:column;gap:7px}
  .design .top{display:flex;align-items:center;gap:8px}
  .design .name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
  .design .dims{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .dpibadge{font-size:10.5px;font-weight:700;border-radius:6px;padding:2px 7px;border:1px solid var(--line);white-space:nowrap}
  .dpibadge.ideal{background:rgba(70,211,154,.15);color:var(--good);border-color:rgba(70,211,154,.4)}
  .dpibadge.good{background:rgba(255,210,63,.15);color:var(--accent);border-color:rgba(255,210,63,.4)}
  .dpibadge.low{background:rgba(255,93,93,.15);color:var(--danger);border-color:rgba(255,93,93,.4)}
  .design .ctrls{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .size{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted)}
  .size input{width:50px;height:28px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:7px;text-align:center;font-size:12px;padding:0 4px;-moz-appearance:textfield}
  .size input::-webkit-outer-spin-button,.size input::-webkit-inner-spin-button{-webkit-appearance:none}
  .qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .qty button{background:var(--panel);border:0;color:var(--text);width:26px;height:30px;cursor:pointer;font-size:15px}
  .qty button:hover{background:var(--panel-3)}
  .qty input{width:38px;height:30px;border:0;background:transparent;color:var(--text);text-align:center;font-size:13px;-moz-appearance:textfield}
  .qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
  .chip{font-size:11px;border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:7px;padding:5px 7px;cursor:pointer;user-select:none}
  .chip.on{background:var(--accent-2);color:var(--accent2-ink,#001624);border-color:var(--accent-2);font-weight:700}
  .x{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:17px;line-height:1;padding:4px}
  .x:hover{color:var(--danger)}

  .field{margin-bottom:14px}
  .field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px;font-weight:600}
  .field .hint{font-size:11.5px;color:var(--hint);margin-top:5px}
  select,input[type=text],input[type=number]{
    width:100%;background:var(--panel-2);border:1px solid var(--line);color:var(--text);
    border-radius:9px;padding:10px;font-size:14px;font-family:inherit
  }
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

  .preview-wrap{margin-top:18px}
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px}
  @media (max-width:560px){.stats{grid-template-columns:repeat(2,1fr)}}
  .stat{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:11px 12px}
  .stat .v{font-size:19px;font-weight:800}
  .stat .v.good{color:var(--good)}
  .stat .k{font-size:11px;color:var(--muted);margin-top:2px}
  .canvas-host{background-color:var(--chk-b);
      background-image:linear-gradient(45deg,var(--chk-a) 25%,transparent 25%,transparent 75%,var(--chk-a) 75%),linear-gradient(45deg,var(--chk-a) 25%,transparent 25%,transparent 75%,var(--chk-a) 75%);
      background-size:20px 20px;background-position:0 0,10px 10px;border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center;min-height:160px;
      display:flex;align-items:center;justify-content:center;color:var(--muted)}
  .canvas-host canvas{max-width:100%;height:auto;display:block;margin:0 auto;box-shadow:0 6px 30px rgba(0,0,0,.4)}
  /* Long sheets preview as stacked tiles, so the shadow belongs to the stack. */
  .canvas-host .sheet{max-width:100%;margin:0 auto;box-shadow:0 6px 30px rgba(0,0,0,.4);font-size:0}
  .canvas-host .sheet canvas{box-shadow:none;margin:0}
  /* Export progress. A long sheet is a big PNG, so show real movement. */
  .dlprog{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px 13px;margin-bottom:14px}
  .dlhead{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:700;margin-bottom:8px}
  #dlpct{font-variant-numeric:tabular-nums;color:var(--accent)}
  .dlbar{height:8px;border-radius:999px;background:var(--bar);overflow:hidden;border:1px solid var(--line)}
  .dlbar i{display:block;height:100%;width:0%;border-radius:999px;background:var(--accent);transition:width .2s ease}
  .dlbar.indet i{width:35%;animation:dlslide 1.1s ease-in-out infinite}
  @keyframes dlslide{0%{margin-left:-35%}100%{margin-left:100%}}
  .dlnote{font-size:12px;color:var(--muted);margin-top:8px}
  .dlsave{margin-top:10px}
  @media (prefers-reduced-motion:reduce){.dlbar i{transition:none}.dlbar.indet i{animation:none;width:100%}}
  .pages{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
  .pagebtn{font-size:12px;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);border-radius:8px;padding:6px 11px;cursor:pointer}
  .pagebtn.on{background:var(--accent);color:var(--accent-ink,#111111);border-color:var(--accent);font-weight:700}

  .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--panel-2);border:1px solid var(--line);color:var(--text);padding:11px 18px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:.2s;z-index:50}
  .toast.show{opacity:1}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

  /* lightbox / image viewer */
  .lightbox{position:fixed;inset:0;background:rgba(4,5,7,.82);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:80;padding:24px}
  .lightbox.show{display:flex}
  .lb-inner{background:var(--panel);border:1px solid var(--line);border-radius:14px;max-width:94vw;max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
  .lb-bar{display:flex;align-items:center;gap:14px;padding:11px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
  .lb-title{font-size:13px;font-weight:600;flex:1;min-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lb-bg{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
  .sw{width:24px;height:24px;border-radius:6px;border:1px solid var(--line);cursor:pointer;padding:0}
  .sw.on{outline:2px solid var(--accent);outline-offset:1px}
  .sw-tr{background:#0d0f13 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><rect width="6" height="6" fill="%23333"/><rect x="6" y="6" width="6" height="6" fill="%23333"/></svg>');background-size:8px}
  .lb-bg input[type=color]{width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer}
  .lb-close{background:transparent;border:0;color:var(--muted);font-size:24px;line-height:1;cursor:pointer;padding:0 4px}
  .lb-close:hover{color:var(--text)}
  .lb-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto}
  .lb-stage img{max-width:100%;max-height:72vh;object-fit:contain;display:block}
  .lb-sub{font-size:11.5px;color:var(--muted);padding:0 14px 11px}

/* ---- embed-only pieces: locked values, fixed sizes, branding, handoff ---- */
.fgsm .static{font-size:14px;padding:9px 0 2px}
.fgsm .lock{font-size:10.5px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 7px;margin-left:6px;vertical-align:1px;white-space:nowrap}
.fgsm .sizes{display:flex;flex-wrap:wrap;gap:7px}
.fgsm .sizechip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 11px;border-radius:9px;border:1.5px solid var(--line);background:var(--panel-2);color:var(--text);font:inherit;cursor:pointer;text-align:left;line-height:1.25}
.fgsm .sizechip b{font-size:13px;font-weight:800}
.fgsm .sizechip span{font-size:11.5px;color:var(--muted)}
.fgsm .sizechip.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.fgsm .sizechip:hover{border-color:var(--accent)}
.fgsm .fg-head{margin:0 0 14px;display:flex;flex-direction:column;gap:6px}
.fgsm .fg-logo{height:36px;width:auto;max-width:220px;object-fit:contain;align-self:flex-start}
.fgsm .fg-heading{margin:0;font-size:26px;line-height:1.15;font-weight:800}
.fgsm .fg-intro{margin:0;font-size:15px;color:var(--muted);max-width:680px}
.fgsm .btn.cta{background:var(--accent);color:var(--accent-ink,#111111);border-color:var(--accent);font-weight:800}
.fgsm .fg-after{margin-top:14px}
.fgsm .fg-sendnote{font-size:11.5px;color:var(--hint);margin-top:8px}
.fgsm .fg-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.fgsm .fg-badge a{color:var(--muted);font-weight:700}
.fgsm .fg-badge a:hover{color:var(--text)}
.fgsm .preview-wrap{margin-top:18px}