:root{--ink:#1e2638;--muted:#7d8798;--line:#e3e8f1;--blue:#5571f5;--cyan:#36b9df;--lav:#f1f2ff}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:radial-gradient(circle at 8% 0%,rgba(112,132,255,.15),transparent 30%),radial-gradient(circle at 96% 8%,rgba(73,210,205,.14),transparent 26%),#f7f9fd}.ecommerce-header{height:68px;display:flex;align-items:center;gap:34px;padding:0 34px;background:rgba(255,255,255,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(16px);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:9px;color:#1e2638;text-decoration:none;font-size:18px;font-weight:850;letter-spacing:-.04em;white-space:nowrap}.brand img{width:31px;height:31px;border-radius:9px}.brand b{color:#4c74ef}.ecommerce-header nav{display:flex;align-items:center;gap:25px;flex:1}.ecommerce-header nav a{color:#768196;text-decoration:none;font-size:13px;font-weight:650}.ecommerce-header nav a:hover,.ecommerce-header nav a.active{color:#4966e6}.header-credit{padding:9px 14px;border:1px solid var(--line);border-radius:99px;color:#536078;background:#fff;font-size:12px;font-weight:750;white-space:nowrap}.header-credit span{color:#5169eb;font-size:15px}.ecommerce-shell,.create-shell{width:min(1380px,calc(100% - 64px));margin:0 auto;padding:58px 0 90px}.ecommerce-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}.eyebrow{color:#7280c8;font-size:10px;font-weight:850;letter-spacing:.16em}.ecommerce-hero h1{margin:12px 0 9px;font-size:clamp(36px,4vw,58px);letter-spacing:-.065em}.ecommerce-hero p{margin:0;color:#728095;font-size:16px}.back-link{color:#596ee1;text-decoration:none;font-size:13px;font-weight:700}.back-link:hover{text-decoration:underline}.gallery-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:45px;padding-bottom:15px;border-bottom:1px solid var(--line)}.gallery-toolbar strong{font-size:20px}.gallery-toolbar span{margin-left:12px;color:var(--muted);font-size:12px}.search-wrap{display:flex;align-items:center;gap:6px;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:#fff}.search-wrap input{width:170px;height:38px;border:0;outline:0;color:var(--ink);font-size:12px}.gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:22px}.gallery-card{overflow:hidden;border:1px solid rgba(218,224,237,.9);border-radius:17px;background:rgba(255,255,255,.9);box-shadow:0 12px 28px rgba(46,61,101,.08);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.gallery-card:hover{transform:translateY(-3px);border-color:#9ca9ef;box-shadow:0 18px 38px rgba(58,71,145,.16)}.gallery-card img{width:100%;height:285px;display:block;object-fit:cover;background:#f0f2f7}.gallery-card-copy{padding:13px 14px 15px}.gallery-card-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.gallery-card-copy span{display:inline-flex;margin-top:7px;padding:4px 7px;border-radius:99px;color:#5b69ad;background:#eef1ff;font-size:10px;font-weight:700}.create-shell>.back-link{display:inline-block;margin-bottom:24px}.create-layout{display:grid;grid-template-columns:360px minmax(0,1fr);gap:22px;align-items:start}.create-reference,.create-card{border:1px solid rgba(218,224,237,.95);border-radius:22px;background:rgba(255,255,255,.92);box-shadow:0 20px 55px rgba(46,61,101,.09)}.create-reference{position:sticky;top:92px;padding:20px}.create-reference img{width:100%;height:430px;display:block;object-fit:cover;margin-top:13px;border-radius:14px;background:#f0f2f7}.reference-meta{display:flex;gap:7px;margin-top:12px}.reference-meta span{padding:5px 8px;border-radius:99px;color:#596aa9;background:#eef1ff;font-size:10px;font-weight:700}.create-reference h1{margin:16px 0 7px;font-size:26px;letter-spacing:-.04em}.create-reference p{margin:0;color:#7d8798;font-size:12px;line-height:1.65}.create-card{padding:28px 32px}.step-head{display:flex;align-items:center;gap:13px;margin-bottom:22px}.step-head>span{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;color:#5269e8;background:#edf0ff;font-weight:850}.step-head h2{margin:6px 0 0;font-size:24px;letter-spacing:-.04em}.step-head.compact{margin-top:30px;margin-bottom:17px}.field-label{display:block;position:relative;margin-bottom:22px;color:#27334b;font-size:13px;font-weight:750}.field-label small{float:right;color:#909aac;font-size:11px;font-weight:500}.field-label textarea{width:100%;min-height:130px;margin-top:9px;padding:13px 14px;resize:vertical;border:1px solid #d9dfeb;border-radius:13px;outline:0;color:var(--ink);font:inherit;font-weight:500;line-height:1.6}.field-label textarea:focus{border-color:#7788ec;box-shadow:0 0 0 4px rgba(90,108,231,.1)}.field-count{position:absolute;right:12px;bottom:10px;color:#9aa3b2;font-size:10px}.upload-box{position:relative;display:grid;place-items:center;align-content:center;min-height:184px;margin-top:9px;padding:18px;border:1px dashed #b8c3db;border-radius:14px;color:#8490a4;background:#fafbfe;text-align:center;cursor:pointer}.upload-box:hover{border-color:#7383e9;background:#f7f8ff}.upload-box input{position:absolute;inset:0;z-index:2;opacity:0;cursor:pointer}.upload-plus{font-size:30px;color:#6077eb;line-height:1}.upload-box strong{margin-top:5px;color:#46526a;font-size:13px}.upload-box>small{margin-top:4px;font-size:10px}.preview-grid{position:absolute;inset:10px;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;pointer-events:none}.preview-grid img{width:100%;height:100%;min-height:0;object-fit:contain;border:1px solid #dae0eb;border-radius:10px;background:#fff}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.select-field{display:grid;gap:8px;color:#27334b;font-size:13px;font-weight:750}.select-field select{height:46px;padding:0 12px;border:1px solid #d9dfeb;border-radius:12px;outline:0;color:#34415b;background:#fff;font-size:13px}.generation-note{display:flex;justify-content:space-between;gap:15px;margin-top:22px;padding:13px 14px;border-radius:12px;background:#f6f7ff;color:#78849a;font-size:11px}.generation-note strong{color:#5a6de2}.generate-button{width:100%;height:54px;margin-top:19px;border:0;border-radius:13px;color:#fff;background:linear-gradient(105deg,#536fff,#7559ee);font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 12px 26px rgba(82,91,227,.2)}.generate-button:hover{transform:translateY(-1px);filter:saturate(1.06)}.form-status{min-height:20px;margin:10px 2px 0;color:#7b8699;font-size:12px}.form-status.error{color:#cb5866}.form-status.success{color:#23866f}@media(max-width:980px){.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.create-layout{grid-template-columns:280px minmax(0,1fr)}.create-reference img{height:330px}}@media(max-width:720px){.ecommerce-header{height:58px;padding:0 15px;gap:12px}.ecommerce-header nav{gap:12px}.ecommerce-header nav a:not(.active){display:none}.header-credit{padding:7px 9px;font-size:10px}.ecommerce-shell,.create-shell{width:min(100% - 28px,620px);padding:36px 0 65px}.ecommerce-hero{display:block}.ecommerce-hero h1{font-size:38px}.ecommerce-hero p{font-size:13px}.ecommerce-hero .back-link{display:inline-block;margin-top:18px}.gallery-toolbar{display:block;margin-top:30px}.search-wrap{margin-top:12px}.search-wrap input{width:100%}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gallery-card img{height:210px}.create-layout{display:block}.create-reference{position:static;margin-bottom:14px}.create-reference img{height:320px}.create-card{padding:21px 17px}.field-label small{display:block;float:none;margin-top:5px}.generation-note{display:block}.generation-note strong{display:block;margin-top:6px}}

/* Embedded-shell isolation: the shared creator workspace keeps its own
   design tokens while the e-commerce page retains the standalone palette. */
:root { --ink:#171821; --muted:#888d9a; --line:#ececf1; --blue:#5a56f4; --cyan:#48d9f0; --bg:#fafafa; --shadow:0 16px 45px rgba(31,35,61,.08); }
.ecommerce-page { --ink:#1e2638; --muted:#7d8798; --line:#e3e8f1; --blue:#5571f5; --cyan:#36b9df; --lav:#f1f2ff; min-height:100%; margin:0; color:var(--ink); background:radial-gradient(circle at 8% 0%,rgba(112,132,255,.15),transparent 30%),radial-gradient(circle at 96% 8%,rgba(73,210,205,.14),transparent 26%),#f7f9fd; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
body.ecommerce-body { --ink:#1e2638; --muted:#7d8798; --line:#e3e8f1; --blue:#5571f5; --cyan:#36b9df; --lav:#f1f2ff; margin:0; color:var(--ink); background:radial-gradient(circle at 8% 0%,rgba(112,132,255,.15),transparent 30%),radial-gradient(circle at 96% 8%,rgba(73,210,205,.14),transparent 26%),#f7f9fd; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
.ecommerce-modal { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:24px; background:rgba(24,31,52,.28); backdrop-filter:blur(16px) saturate(1.06); opacity:0; pointer-events:none; transition:opacity .18s ease; }
.ecommerce-modal.is-open { opacity:1; pointer-events:auto; }
.ecommerce-modal-box { position:relative; display:grid; grid-template-columns:minmax(240px,.82fr) minmax(360px,1.18fr); gap:26px; width:min(920px,100%); max-height:min(760px,calc(100vh - 48px)); overflow:auto; padding:30px; border:1px solid rgba(224,229,245,.92); border-radius:24px; background:rgba(255,255,255,.91); box-shadow:0 30px 90px rgba(30,38,80,.24); transform:translateY(10px) scale(.985); transition:transform .22s cubic-bezier(.22,.8,.24,1); }
.ecommerce-modal.is-open .ecommerce-modal-box { transform:none; }
.ecommerce-modal-close { position:absolute; top:16px; right:16px; z-index:2; width:34px; height:34px; border:1px solid #e3e7f0; border-radius:50%; color:#7e8798; background:rgba(246,248,253,.9); font-size:23px; line-height:1; cursor:pointer; }
.ecommerce-modal-close:hover { color:#4f62dc; border-color:#a8b4f0; }
.ecommerce-modal-reference { min-width:0; padding-top:4px; }
.ecommerce-modal-reference img { width:100%; height:430px; display:block; margin-top:13px; border-radius:16px; object-fit:cover; background:#f0f2f7; box-shadow:0 13px 32px rgba(48,62,105,.12); }
.ecommerce-modal-reference h2 { margin:17px 0 7px; color:#202941; font-size:25px; letter-spacing:-.045em; }
.ecommerce-modal-reference p { margin:0; color:#7e899d; font-size:12px; line-height:1.7; }
.ecommerce-modal-form { min-width:0; padding:4px 2px 0; }
.ecommerce-form-head { margin-bottom:20px; }
.ecommerce-form-head h2 { margin:7px 0 0; color:#202941; font-size:25px; letter-spacing:-.045em; }
.ecommerce-modal-form .field-label { margin-bottom:19px; }
.ecommerce-modal-form .upload-box { min-height:164px; }
.ecommerce-modal-settings { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin-top:20px; }
.ecommerce-modal-footer { display:grid; grid-template-columns:1fr auto; gap:5px 13px; align-items:center; margin-top:21px; padding-top:15px; border-top:1px solid #edf0f5; color:#8993a5; font-size:11px; line-height:1.5; }
.ecommerce-modal-footer strong { color:#596ee1; font-size:14px; text-align:right; }
.ecommerce-modal-footer .generate-button { grid-column:1 / -1; margin-top:9px; }
.ecommerce-modal-form .form-status { grid-column:1 / -1; }
.ecommerce-result { grid-column:1 / -1; margin-top:18px; padding-top:16px; border-top:1px solid #edf0f5; }
.ecommerce-result-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; color:#27334b; font-size:13px; }
.ecommerce-result-head span { color:#8993a5; font-size:11px; font-weight:500; }
.ecommerce-result-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.ecommerce-result-grid a { display:block; overflow:hidden; border:1px solid #e1e6f0; border-radius:12px; background:#f7f8fc; }
.ecommerce-result-grid img { width:100%; aspect-ratio:1 / 1; display:block; object-fit:contain; }
body.ecommerce-modal-open { overflow:hidden; }
@media(max-width:760px){ .ecommerce-modal { padding:12px; place-items:stretch; } .ecommerce-modal-box { grid-template-columns:1fr; gap:18px; max-height:calc(100vh - 24px); padding:22px 18px 20px; border-radius:19px; } .ecommerce-modal-reference img { height:min(42vh,300px); } .ecommerce-modal-reference h2,.ecommerce-form-head h2 { font-size:21px; } .ecommerce-modal-settings { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } }
@media(prefers-reduced-motion: reduce){ .ecommerce-modal,.ecommerce-modal-box { transition:none; } }

/* The embedded library is intentionally one vertically scrollable gallery;
   all 48 templates remain discoverable without a next/previous control. */
.gallery-viewport { overflow: visible; touch-action: pan-y; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 22px; transform: none !important; transition: none; }
.gallery-empty { grid-column: 1 / -1; padding: 58px 20px; border: 1px dashed var(--line); border-radius: 17px; color: var(--muted); background: rgba(255,255,255,.72); text-align: center; font-size: 13px; }
.gallery-page { display: contents; }
.gallery-pager { display: none !important; }
@media(max-width:980px){ .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media(max-width:720px){ .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; } }