@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Bebas+Neue&family=Lobster&family=Montserrat:wght@400;700;900&family=Oswald:wght@400;600;700&family=Permanent+Marker&family=Playfair+Display:wght@400;700;900&family=Poppins:wght@400;600;800&family=Roboto:wght@400;700;900&family=Rye&display=swap');

#sd{--bg:#f4f6f9;--panel:#fff;--panel2:#f7f9fc;--line:#e3e8ef;--ink:#101216;--muted:#7c8695;--blue:#1976FF;--dark:#101216;
  position:relative;display:flex;flex-direction:column;height:100vh;background:var(--bg);color:var(--ink);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overflow:hidden;}
#sd *{box-sizing:border-box;}
#sd button{font:inherit;cursor:pointer;background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:7px;padding:7px 11px;transition:.12s;}
#sd button:hover:not(:disabled){border-color:#b9c3d1;background:#fbfcfe;}
#sd button:disabled{opacity:.42;cursor:default;}
#sd button.primary{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700;}
#sd button.primary:hover{background:#0f62e6;border-color:#0f62e6;}
#sd button.on{background:#e8f1ff;border-color:var(--blue);color:#0d5fd6;font-weight:700;}
#sd input,#sd select,#sd textarea{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:7px 9px;width:100%;}
#sd input[type=color]{padding:2px;height:32px;cursor:pointer;}
#sd input:focus,#sd select:focus{outline:2px solid #cfe1ff;border-color:var(--blue);}
#sd label{display:block;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin:0 0 4px;}

#sd-top{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--dark);border-bottom:2px solid var(--blue);flex:0 0 auto;}
#sd-top .sd-logo{font-weight:800;letter-spacing:.6px;color:#fff;font-size:15px;white-space:nowrap;}
#sd-top .sd-logo span{color:var(--blue);}
#sd-top #sd-job{width:190px;background:#1b1f27;border-color:#2c3340;color:#fff;}
#sd-top .sd-sp{flex:1;}
#sd-top button{background:#1b1f27;border-color:#2c3340;color:#e8ecf3;}
#sd-top button:hover:not(:disabled){background:#242a34;border-color:#3a4453;}
#sd-top button.primary{background:var(--blue);border-color:var(--blue);color:#fff;}
#sd-top .sd-ico{padding:7px 10px;font-size:15px;line-height:1;}

#sd main{flex:1;display:flex;min-height:0;}
#sd-left{width:288px;flex:0 0 288px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;}
#sd-tabs{display:flex;border-bottom:1px solid var(--line);flex:0 0 auto;}
#sd-tabs button{flex:1;border:0;border-radius:0;padding:11px 4px;font-size:12px;font-weight:700;color:var(--muted);background:var(--panel2);border-bottom:2px solid transparent;}
#sd-tabs button.on{background:var(--panel);color:var(--blue);border-bottom-color:var(--blue);}
#sd-left section{flex:1;overflow:auto;padding:13px;}
#sd .sd-row{display:flex;gap:8px;align-items:flex-end;margin-bottom:10px;}
#sd .sd-row>div{flex:1;min-width:0;}
#sd h4{margin:16px 0 8px;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);}
#sd h4:first-child{margin-top:0;}

#sd-chips{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px;}
#sd .sd-template-filters>div{margin-bottom:10px;}
#sd-chips button{padding:5px 9px;font-size:11.5px;border-radius:999px;}
#sd-tplgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
#sd .sd-tpl{border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;background:var(--panel2);padding:0;transition:.12s;}
#sd .sd-tpl:hover{border-color:var(--blue);box-shadow:0 3px 12px rgba(25,118,255,.16);transform:translateY(-1px);}
#sd .sd-tpl canvas{display:block;width:100%;height:auto;background:#fff;}
#sd .sd-tpl b{display:block;font-size:10.5px;font-weight:600;padding:5px 6px;color:#4a5462;text-align:left;line-height:1.25;}

#sd .sd-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
#sd .sd-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
#sd .sd-tile{aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:6px;background:var(--panel2);}
#sd .sd-tile svg{width:100%;height:100%;fill:#3a4453;}
#sd .sd-sw{aspect-ratio:1;border-radius:6px;border:1px solid rgba(0,0,0,.14);cursor:pointer;padding:0;}
#sd .sd-drop{border:2px dashed #c4cad3;border-radius:9px;padding:16px 10px;text-align:center;color:var(--muted);font-size:12.5px;cursor:pointer;background:var(--panel2);}
#sd .sd-drop:hover{border-color:var(--blue);color:var(--blue);}
#sd .sd-note{font-size:11.5px;color:var(--muted);line-height:1.5;}

#sd-stage{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;}
#sd-props{flex:0 0 auto;display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line);min-height:49px;}
#sd-props .sd-hint{color:var(--muted);font-size:12.5px;}
#sd-props select,#sd-props input{width:auto;}
#sd-props #sd-font{width:132px;}
#sd-props #sd-fsize{width:64px;}
#sd-props .sd-div{width:1px;height:22px;background:var(--line);margin:0 2px;}
#sd-props button{padding:6px 9px;}
#sd-wrap{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:22px;background:
  linear-gradient(45deg,#eceff4 25%,transparent 25%,transparent 75%,#eceff4 75%),
  linear-gradient(45deg,#eceff4 25%,transparent 25%,transparent 75%,#eceff4 75%) 10px 10px,#f4f6f9;
  background-size:20px 20px;}
#sd-wrap .canvas-container{box-shadow:0 8px 34px rgba(16,18,22,.17);}
#sd-hud{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:7px 13px;background:var(--panel);border-top:1px solid var(--line);font-size:12px;color:var(--muted);}
#sd-hud b{color:var(--ink);}
#sd-warn{display:none;background:#c0392b;color:#fff;font-weight:700;padding:3px 9px;border-radius:4px;font-size:11.5px;cursor:pointer;}
#sd-status{margin-left:auto;}

#sd-layers .sd-lay{display:flex;align-items:center;gap:7px;padding:7px 8px;border:1px solid var(--line);border-radius:7px;margin-bottom:6px;background:var(--panel2);cursor:pointer;font-size:12.5px;}
#sd-layers .sd-lay.on{border-color:var(--blue);background:#e8f1ff;}
#sd-layers .sd-lay span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#sd-layers .sd-lay button{padding:2px 6px;font-size:12px;}

#sd .sd-modal-bg{position:absolute;inset:0;background:rgba(16,18,22,.55);display:none;align-items:center;justify-content:center;z-index:60;padding:20px;}
#sd .sd-modal-bg.open{display:flex;}
#sd .sd-modal{background:#fff;border-radius:12px;max-width:520px;width:100%;max-height:88%;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);}
#sd .sd-modal h3{margin:0;padding:15px 18px;background:var(--dark);color:#fff;font-size:14.5px;letter-spacing:.4px;border-radius:12px 12px 0 0;}
#sd .sd-modal .sd-mb{padding:18px;}
#sd .sd-modal .sd-acts{display:flex;gap:8px;justify-content:flex-end;padding:0 18px 18px;}
#sd .sd-prodlist button{display:block;width:100%;text-align:left;margin-bottom:7px;padding:11px 13px;}
#sd .sd-prodlist button small{display:block;color:var(--muted);font-weight:400;font-size:11.5px;margin-top:2px;}
@media (max-width:900px){
  #sd-left{width:230px;flex-basis:230px;}
  #sd-top #sd-job{width:120px;}
  #sd-tplgrid{grid-template-columns:1fr;}
}

/* Standalone editor: preserve the desktop workspace and keep the canvas usable on phones. */
#sd{height:var(--gqsd-editor-height,calc(100dvh - 80px));min-height:320px;isolation:isolate;}
#sd [hidden]{display:none!important;}
#sd button:focus-visible,#sd [role=button]:focus-visible{outline:3px solid #86baff;outline-offset:2px;}
#sd-top{flex-wrap:wrap;gap:8px;}
#sd-top .sd-logo{margin:0;line-height:1.2;}
#sd-help{display:flex;align-items:center;padding:6px 12px;margin-left:auto;color:#145ab3;font-size:12px;white-space:nowrap;text-decoration:none;}
#sd-top #sd-job{min-width:90px;}
#sd-savestate{font-size:11px;color:#d1dbea;max-width:160px;}
#sd-tabs{background:#fff;flex:none;position:relative;z-index:2;}
#sd-tabs [data-tab]{flex:0 1 140px;min-height:42px;}
#sd-panelclose{display:none;}
#sd-left{width:310px;flex-basis:310px;}
#sd main{position:relative;overflow:hidden;}
#sd-left section{overscroll-behavior:contain;}
#sd-canvas-tools{display:flex;align-items:center;gap:6px;padding:7px 10px;background:#fff;border-bottom:1px solid var(--line);flex:none;}
#sd-canvas-tools button{min-height:35px;min-width:35px;white-space:nowrap;}
#sd-edit-selected{margin-left:auto;}
#sd-selection-label{font-size:11px;color:#566375;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#sd-props{max-height:260px;overflow:auto;align-items:flex-start;overscroll-behavior:contain;}
#sd-props #sd-selwrap,#sd-props #sd-textonly{flex-wrap:wrap;min-width:0;max-width:100%;}
#sd .sd-text-field{flex:1 0 100%;text-transform:none;font-size:12px;}
#sd #sd-text-value{width:100%;display:block;min-height:56px;resize:vertical;max-height:160px;font-size:16px;line-height:1.35;}
#sd-wrap{padding:16px;min-height:80px;position:relative;}
#sd-empty-message{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;text-align:center;padding:20px;background:#f4f6f9e8;font-size:14px;}
#sd-empty-message strong{font-size:21px;}
#sd-empty-message span{font-size:12px;color:#536176;}
#sd-wrap.sd-zoomed{align-items:flex-start;justify-content:flex-start;}
#sd .sd-tpl svg,#sd .sd-tpl canvas{display:block;width:100%;height:130px;object-fit:contain;padding:6px;background-color:#f3f4f6;background-image:linear-gradient(45deg,#e3e8ef 25%,transparent 25%,transparent 75%,#e3e8ef 75%),linear-gradient(45deg,#e3e8ef 25%,transparent 25%,transparent 75%,#e3e8ef 75%);background-size:16px 16px;background-position:0 0,8px 8px;}
#sd .sd-tpl b{font-size:11px;min-height:36px;}
#sd-tplgrid{grid-template-columns:repeat(2,minmax(0,1fr));}
#sd-hud{flex-wrap:wrap;gap:5px 14px;min-height:42px;}
#sd-status{flex-basis:100%;margin:0;color:#445369;font-size:12px;line-height:1.35;max-height:3.5em;overflow:auto;}
#sd .sd-modal-bg{padding:14px;}
#sd .sd-modal{max-height:100%;}
#sd .sd-download-options{display:grid;gap:10px;}
#sd .sd-download-options button{text-align:left;padding:13px;min-height:56px;}
#sd .sd-download-options small{display:block;color:#556578;font-size:12px;}
#sd-recovery{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 12px;background:#fff3cd;font-size:12px;}
#sd-recovery span{flex:1;}
/* The primary template action opens a roomy gallery, using the same filtered list. */
#sd #sd-templatemodal{padding:16px;}
#sd .sd-template-picker{width:100%;max-width:1240px;height:100%;display:flex;flex-direction:column;overflow:hidden;}
#sd .sd-template-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;padding:16px 20px;border-bottom:1px solid var(--line);}
#sd .sd-template-heading h2{font-family:inherit;font-weight:700;font-size:22px;line-height:1.2;margin:0;color:#102e4b;}
#sd .sd-template-heading p{font-size:12px;line-height:1.4;color:#526477;margin:5px 0 0;}
#sd #sd-template-close{min-height:44px;flex:none;white-space:nowrap;}
#sd #sd-template-host{flex:1;min-height:0;display:flex;}
#sd #sd-template-host>section{width:100%;min-height:0;display:flex;flex-direction:column;padding:16px 20px 0;}
#sd #sd-template-host .sd-template-filters{display:grid;grid-template-columns:220px minmax(0,1fr);gap:8px 14px;flex:none;}
#sd #sd-template-host .sd-template-filters>div{min-width:0;margin:0;}
#sd #sd-template-host #sd-chips{grid-column:1/-1;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior:contain;padding:3px 2px 9px;margin:0;}
#sd #sd-template-host #sd-chips button{flex:none;min-height:34px;white-space:nowrap;}
#sd #sd-template-host #sd-tplgrid{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;align-content:start;grid-auto-rows:max-content;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:5px 3px 16px;}
#sd #sd-template-host .sd-tpl svg,#sd #sd-template-host .sd-tpl canvas{height:205px;padding:12px;}
#sd #sd-template-host .sd-tpl b{padding:10px 12px;font-size:13px;min-height:50px;}
#sd #sd-template-host>section>.sd-note{flex:none;padding:8px 0;margin:0!important;font-size:11px;}
@media(max-width:760px){
  #sd #sd-templatemodal{padding:6px;}
  #sd .sd-template-heading{padding:12px;gap:8px;}
  #sd .sd-template-heading h2{font-size:19px;}
  #sd .sd-template-heading p{font-size:11px;}
  #sd #sd-template-host>section{padding:10px 10px 0;}
  #sd #sd-template-host .sd-template-filters{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:6px 8px;}
  #sd #sd-template-host .sd-template-filters input,#sd #sd-template-host .sd-template-filters select{min-height:40px;}
  #sd #sd-template-host #sd-tplgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  #sd #sd-template-host .sd-tpl svg,#sd #sd-template-host .sd-tpl canvas{height:145px;padding:7px;}
  #sd #sd-template-host .sd-tpl b{padding:8px;font-size:12px;min-height:48px;}
  #sd #sd-template-host>section>.sd-note{display:none;}
}
@media(max-height:500px) and (min-width:761px){
  #sd #sd-templatemodal{padding:5px;}
  #sd .sd-template-heading{padding:6px 12px;}
  #sd .sd-template-heading h2{font-size:18px;}
  #sd .sd-template-heading p{display:none;}
  #sd #sd-template-host>section{padding:6px 12px 0;}
  #sd #sd-template-host .sd-template-filters{gap:2px 10px;}
  #sd #sd-template-host .sd-template-filters label{display:none;}
  #sd #sd-template-host #sd-chips{padding-bottom:3px;}
  #sd #sd-template-host .sd-tpl svg,#sd #sd-template-host .sd-tpl canvas{height:100px;padding:5px;}
  #sd #sd-template-host .sd-tpl b{min-height:34px;padding:6px;font-size:11px;}
  #sd #sd-template-host>section>.sd-note{display:none;}
}
@media(max-width:760px){
  #sd-top{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:8px;gap:6px;}
  #sd-top .sd-logo{grid-column:1/3;font-size:12px;letter-spacing:0;}
  #sd-top #sd-job{grid-column:3/7;width:100%;font-size:16px;min-height:38px;}
  #sd-top .sd-sp,#sd-savestate{display:none;}
  #sd-top #sd-save{grid-column:1/3;}
  #sd-top #sd-pdf{grid-column:3/5;}
  #sd-top #sd-use{grid-column:5/7;}
  #sd-top button{min-height:40px;font-size:13px;padding:6px;white-space:nowrap;}
  #sd-tabs [data-tab]{flex:1;min-width:0;font-size:12px;padding:10px 3px;}
  #sd.sd-panel-open #sd-panelclose{display:block;min-width:54px;padding:6px;font-size:12px;}
  #sd main{flex-direction:column;}
  #sd-stage{order:0;flex:1;min-height:145px;}
  #sd-left{order:1;width:100%;flex:0 1 43%;min-height:0;max-height:45%;border-right:0;border-top:2px solid #c8d9ed;display:none;}
  #sd.sd-panel-open #sd-left{display:flex;}
  #sd-left section{padding:10px;}
  #sd-canvas-tools{padding:4px 6px;gap:4px;}
  #sd-canvas-tools button{min-width:33px;min-height:36px;padding:5px 7px;font-size:12px;}
  #sd-selection-label{display:none;}
  #sd-props{display:none;padding:8px;max-height:43%;font-size:13px;}
  #sd.sd-props-open #sd-props{display:flex;}
  #sd-props button{min-height:36px;}
  #sd-wrap{padding:10px;min-height:65px;}
  #sd-hud{font-size:10px;padding:5px 8px;gap:3px 9px;}
  #sd-status{font-size:11px;max-height:2.8em;}
  #sd-tplgrid{grid-template-columns:repeat(2,minmax(0,1fr));}
  #sd .sd-tpl svg,#sd .sd-tpl canvas{height:115px;}
  #sd .sd-modal-bg{padding:8px;}
  #sd .sd-modal h3{font-size:14px;}
  #sd .sd-modal .sd-mb{padding:12px;}
  #sd input,#sd select,#sd textarea{font-size:16px;}
}

/* Short landscape screens use collapsible tools without a second header row. */
#sd .sd-background-controls{align-items:end;gap:12px;}
#sd .sd-background-controls>div:first-child{flex:0 0 80px;}
#sd .sd-background-controls input{min-height:42px;}
#sd #sd-bgcustom{width:100%;padding:3px;cursor:pointer;}
#sd #sd-bghex{font-family:monospace;}
#sd #sd-bgs{grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;margin-top:10px;}
#sd #sd-bgs button{min-width:0;height:30px;min-height:30px;padding:0;}
#sd #sd-design-colors{display:grid;gap:8px;}
#sd .sd-design-color{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;margin:0;background:#fff;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;}
#sd .sd-design-color input{width:44px;height:38px;padding:2px;cursor:pointer;}
#sd .sd-design-color small{font-size:11px;color:#596a7b;font-weight:400;}
#sd .sd-background-layer{width:100%;margin-top:8px;min-height:44px;text-align:left;background:#eaf3ff;}
#sd .sd-editing-title{flex-basis:100%;font-size:12px;line-height:1.4;color:#145ab3;}
#sd .sd-property-label{display:flex;flex-direction:column;gap:3px;font-size:11px;line-height:1.25;text-transform:none;letter-spacing:0;margin:0;}
#sd .sd-property-label input{height:36px;min-height:36px;}
@media(min-width:761px) and (max-width:1000px) and (max-height:500px){
  #sd-top{padding:6px 10px;flex-wrap:nowrap;}
  #sd-top .sd-logo{font-size:12px;}
  #sd-top #sd-job{width:150px;}
  #sd-savestate{display:none;}
  #sd main{flex-direction:column;}
  #sd-left{position:absolute;inset:0 auto 0 0;width:310px;z-index:5;max-width:80%;display:none;box-shadow:4px 0 18px #142a3c30;}
  #sd.sd-panel-open #sd-left{display:flex;}
  #sd.sd-panel-open #sd-panelclose{display:block;min-width:54px;}
  #sd-props{display:none;position:absolute;left:0;right:0;top:45px;z-index:6;max-height:70%;box-shadow:0 4px 15px #142a3c30;}
  #sd.sd-props-open #sd-props{display:flex;}
  #sd-selection-label{display:none;}
  #sd-canvas-tools{padding:3px 8px;}
  #sd-wrap{padding:8px;}
  #sd-hud{padding:3px 10px;min-height:30px;font-size:11px;}
}