/* Rangooo Card Studio: app shell (phone first, desktop workspace) */
html.dcs-lock,html.dcs-lock body{overflow:hidden;height:100%;overscroll-behavior:none}
.dcs{--ink:#101828;--mut:#667085;--line:#E4E7EC;--acc:#145C63;--acc2:#E6F1F3;position:fixed;inset:0;z-index:2147483600;height:100vh;height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"top" "main" "panel" "dock";background:#F2F4F7;color:var(--ink);font:400 15px/1.4 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
.dcs *{box-sizing:border-box}
:where(.dcs) button{font-family:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.dcs button:focus-visible,.dcs input:focus-visible,.dcs textarea:focus-visible{outline:3px solid #E8590C;outline-offset:2px}
.dcs [hidden]{display:none!important}
/* top bar */
.dcs-top{grid-area:top;display:flex;align-items:center;gap:6px;padding:max(8px,env(safe-area-inset-top)) 12px 8px;background:#fff;border-bottom:1px solid var(--line);min-height:56px}
.dcs-title{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15;margin-left:2px}
.dcs-title b{font:600 17px Inter,system-ui,sans-serif;letter-spacing:-.01em}
.dcs-title span{font-size:12px;color:var(--mut)}
.dcs-ib{width:42px;height:42px;border-radius:12px;border:0;background:transparent;display:grid;place-items:center;color:var(--ink)}
.dcs-ib:active{background:#F2F4F7}
.dcs-ib:disabled{opacity:.32;cursor:default}
#dcs-back{background:#F2F4F7;border-radius:50%}
.dcs-pri{display:flex;align-items:center;gap:7px;min-height:42px;padding:0 16px;border-radius:12px;border:0;background:var(--acc);color:#fff;font:600 15px Inter,system-ui,sans-serif;box-shadow:0 1px 2px rgba(16,24,40,.2)}
.dcs-pri:active{filter:brightness(.92)}
/* canvas stage */
.dcs-main{grid-area:main;display:flex;flex-direction:column;min-height:0;min-width:0}
.dcs-stage{flex:1 1 auto;min-height:0;display:grid;place-items:center;overflow:hidden;background:#EAECF0;background-image:radial-gradient(rgba(16,24,40,.07) 1px,transparent 1.2px);background-size:18px 18px}
#dcs-cv{display:block;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:3px;box-shadow:0 1px 2px rgba(16,24,40,.12),0 16px 40px rgba(16,24,40,.2);background:#fff}
/* context bar */
.dcs-ctx{display:flex;gap:2px;padding:6px 8px;background:#fff;border-top:1px solid var(--line)}
.dcs-ctx button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border:0;border-radius:10px;background:transparent;color:#344054;font:500 11px Inter,system-ui,sans-serif}
.dcs-ctx button:first-child{color:var(--acc);font-weight:600}
.dcs-ctx button:active{background:#F2F4F7}
.dcs-ctx .dng{color:#B42318}
/* panel */
.dcs-panel{grid-area:panel;background:#fff;border-top:1px solid var(--line);padding:6px 14px 14px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;max-height:42dvh;max-height:42svh;min-height:0}
.dcs.pc .dcs-panel{display:none}
.dcs-h{margin:16px 0 8px;font:700 12px Inter,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.dcs-panel>.dcs-h:first-child{margin-top:8px}
.dcs-note{margin:10px 0 0;color:var(--mut);font-size:13px;line-height:1.5}
/* dock */
.dcs-dock{grid-area:dock;display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
.dcs-dock button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0 5px;border:0;background:transparent;color:#667085;font:600 11px Inter,system-ui,sans-serif;border-radius:12px}
.dcs-dock button.on{color:var(--acc)}
.dcs-dock button.on::before{content:"";position:absolute;top:-5px;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--acc)}
.dcs-dock button:active{background:#F2F4F7}
/* controls */
.dcs-grid{display:grid;gap:10px}.dcs-grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.dcs-grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dcs-tpl{display:flex;flex-direction:column;gap:5px;padding:0;border:1.5px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;text-align:center}
.dcs-tpl canvas{display:block;width:100%;height:auto;background:#eee}
.dcs-tpl span{font:500 11.5px Inter,system-ui,sans-serif;color:#344054;padding:0 4px 6px}
.dcs-tpl:active{border-color:var(--acc)}
.dcs-st{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:1px solid var(--line);border-radius:12px;background:#F9FAFB;min-height:84px;justify-content:center}
.dcs-st img{width:100%;height:46px;object-fit:contain}
.dcs-st span{font-size:11px;color:#475467}
.dcs-st:active{border-color:var(--acc);background:var(--acc2)}
.shp{display:block;width:36px;height:36px;background:#F6C022}
.shp-round{border-radius:10px}.shp-circle{border-radius:50%}.shp-ring{background:none;border:6px solid #F6C022;border-radius:50%}.shp-line{height:6px;margin:15px 0;border-radius:3px}.shp-diamond{transform:rotate(45deg) scale(.78)}
.dcs-sws{display:flex;flex-wrap:wrap;gap:9px}
.dcs-sw{position:relative;width:34px;height:34px;border-radius:50%;border:2px solid #fff;background:var(--c);box-shadow:0 0 0 1px #D0D5DD;padding:0}
.dcs-sw.on{box-shadow:0 0 0 2.5px var(--acc)}
.dcs-sws.big .dcs-sw{width:calc((100% - 45px)/6);height:auto;aspect-ratio:1;border-radius:12px}
.dcs-cust{display:grid;place-items:center;background:conic-gradient(#f43f5e,#f59e0b,#84cc16,#06b6d4,#6366f1,#d946ef,#f43f5e);color:#fff;overflow:hidden}
.dcs-cust input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.dcs-cust svg{pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.dcs-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.dcs-chip{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid #D0D5DD;background:#fff;font:600 13.5px Inter,system-ui,sans-serif;color:#344054}
.dcs-chip.on{background:var(--acc);border-color:var(--acc);color:#fff}
.dcs-rg{display:grid;grid-template-columns:104px minmax(0,1fr) 42px;align-items:center;gap:8px;margin:6px 0;font-size:13.5px;color:#344054}
.dcs-rg input{width:100%;height:32px;accent-color:var(--acc);margin:0}
.dcs-rg output{text-align:right;color:var(--mut);font-variant-numeric:tabular-nums;font-size:12.5px}
.dcs-ta{width:100%;min-height:92px;padding:12px 14px;border:1px solid #D0D5DD;border-radius:12px;background:#F9FAFB;font:16px/1.45 Inter,system-ui,sans-serif;color:var(--ink);resize:vertical}
.dcs-ta:focus{background:#fff;border-color:var(--acc)}
.dcs-fonts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dcs-font{min-height:46px;padding:0 8px;border:1px solid #D0D5DD;border-radius:10px;background:#fff;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.dcs-font.on{border-color:var(--acc);background:var(--acc2);box-shadow:0 0 0 1px var(--acc) inset}
.dcs-seg{display:flex;gap:6px;margin-bottom:6px}
.dcs-seg button{flex:1;min-height:42px;border:1px solid #D0D5DD;border-radius:10px;background:#fff;display:grid;place-items:center;font:600 15px Inter,system-ui,sans-serif}
.dcs-seg button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.dcs-adds{display:grid;gap:10px}
.dcs-adds button{min-height:50px;display:flex;align-items:center;justify-content:center;gap:9px;padding:0 14px;border:1px solid #D0D5DD;border-radius:12px;background:#fff;font:600 15px Inter,system-ui,sans-serif;color:var(--ink)}
.dcs-adds .a1{background:var(--acc);border-color:var(--acc);color:#fff}
.dcs-adds .t1{font:700 22px "Playfair Display",Georgia,serif;justify-content:flex-start}
.dcs-adds .t2{font:italic 500 18px "Cormorant Garamond",Georgia,serif;justify-content:flex-start}
.dcs-adds .t3{font:400 14.5px Inter,system-ui,sans-serif;justify-content:flex-start}
.dcs-adds button:active{background:var(--acc2)}
.dcs-adds .a1:active{filter:brightness(.92);background:var(--acc)}
.dcs-list{display:grid;gap:8px}
.dcs-list button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:#F9FAFB;text-align:left}
.dcs-list small{font:600 10.5px Inter,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.dcs-list b{font:600 16px/1.35 Inter,system-ui,sans-serif}
.dcs-list b.wsh{font-weight:500;font-size:14px;color:#344054}
.dcs-list button:active{border-color:var(--acc);background:var(--acc2)}
.dcs-syms{display:flex;flex-wrap:wrap;gap:8px}
.dcs-syms button{width:48px;height:48px;border:1px solid var(--line);border-radius:12px;background:#F9FAFB;font-size:24px;line-height:1}
.dcs-sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dcs-size{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;border:1px solid #D0D5DD;border-radius:12px;background:#fff}
.dcs-size i{display:block;width:26px;border:2px solid #98A2B3;border-radius:3px;max-height:34px}
.dcs-size b{font:600 12px Inter,system-ui,sans-serif}.dcs-size small{font-size:11px;color:var(--mut)}
.dcs-size.on{border-color:var(--acc);background:var(--acc2)}.dcs-size.on i{border-color:var(--acc)}
.dcs-layers{display:grid;gap:6px}
.dcs-ly{display:flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:10px;background:#fff}
.dcs-ly.on{border-color:var(--acc);background:var(--acc2)}
.dcs-ly .nm{flex:1;min-width:0;display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:10px 12px;border:0;background:none;text-align:left;font:500 14px Inter,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcs-ly small{color:var(--mut);font-size:11px;text-transform:capitalize}
.dcs-ly>button:last-child{width:42px;height:42px;border:0;background:none;display:grid;place-items:center;color:#667085}
.mc{margin-top:10px}
.dcs-mc{position:relative;display:flex;flex-direction:column;gap:4px;text-align:center}
.dcs-mc>button:first-child{padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.dcs-mc img{display:block;width:100%;height:auto}
.dcs-mc span{font-size:12px;color:#475467}
.dcs-mc .x{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(16,24,40,.72);color:#fff;display:grid;place-items:center}
.dcs-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.dcs-two label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--mut)}
.dcs-two input{width:100%;height:44px;border:1px solid #D0D5DD;border-radius:10px;padding:3px;background:#fff}
.dcs-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.dcs-acts button{min-height:44px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #D0D5DD;border-radius:10px;background:#fff;font:600 13.5px Inter,system-ui,sans-serif}
.dcs-toast{position:fixed;left:50%;top:calc(66px + env(safe-area-inset-top));transform:translate(-50%,-8px);max-width:min(92vw,420px);padding:11px 16px;border-radius:12px;background:#101828;color:#fff;font:600 14px Inter,system-ui,sans-serif;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;text-align:center}
.dcs-toast.on{opacity:1;transform:translate(-50%,0)}
.dcs-pad .r{display:grid;grid-template-columns:56px repeat(4,1fr);gap:8px;align-items:center;margin:8px 0}
.dcs-pad small{font:600 12px Inter,system-ui,sans-serif;color:var(--mut)}
.dcs-pad button{min-height:46px;border:1px solid #D0D5DD;border-radius:12px;background:#fff;display:grid;place-items:center;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.dcs-pad button:active{background:var(--acc2);border-color:var(--acc)}
/* SEO copy stays in the page for crawlers; the app covers it */
.dcs-seo{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
/* desktop workspace */
@media (min-width:861px){
  .dcs{grid-template-columns:78px 380px minmax(0,1fr);grid-template-rows:60px minmax(0,1fr);grid-template-areas:"top top top" "dock panel main"}
  .dcs-top{padding:0 18px;min-height:0;gap:8px}
  .dcs-dock{display:flex;flex-direction:column;gap:2px;padding:10px 8px;border-top:0;border-right:1px solid var(--line);align-content:flex-start}
  .dcs-dock button{padding:11px 0 9px;font-size:11.5px}
  .dcs-dock button.on{background:var(--acc2)}
  .dcs-dock button.on::before{top:12px;bottom:12px;left:-8px;right:auto;width:3px;height:auto;border-radius:0 3px 3px 0}
  .dcs-panel,.dcs.pc .dcs-panel{display:block;max-height:none;border-top:0;border-right:1px solid var(--line);padding:6px 18px 24px}
  .dcs-ctx{position:static;align-self:center;margin:0 0 16px;padding:5px;border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 20px rgba(16,24,40,.12)}
  .dcs-ctx button{flex:0 0 auto;flex-direction:row;gap:7px;padding:9px 14px;font-size:13px}
  .dcs-toast{top:72px}
  .dcs-title{flex:0 1 auto;margin-right:auto}
}
.dcs-pic{position:relative;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;aspect-ratio:3/4;background:#EEF0F3;box-shadow:0 0 0 1px #D0D5DD}
.dcs-pic.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.dcs-pic img{display:block;width:100%;height:100%;object-fit:cover}
.dcs-pic em{position:absolute;left:0;right:0;bottom:0;padding:14px 3px 3px;font:600 10.5px Inter,system-ui,sans-serif;font-style:normal;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.65));text-align:center}
.dcs-more{width:100%;margin-top:10px;min-height:44px;border:1px solid #D0D5DD;border-radius:12px;background:#fff;font:600 14px Inter,system-ui,sans-serif;color:var(--acc)}
@media (max-width:860px){.dcs-title{display:none}.dcq-open{margin-right:auto}}
@media (max-width:699px){.dcs-adds+.dcs-adds{margin-top:10px}}