.dbadge{background:linear-gradient(135deg,#2a2350,#7c5cff)}
#dGrid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
#dGrid .pcard img{aspect-ratio:3/4;object-fit:cover}
/* editor */
#dEditor{display:grid;gap:6px;padding:calc(4px + env(safe-area-inset-top)) calc(6px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));
 grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"top" "stage" "tools" "side"}
.dtop{grid-area:top;display:flex;align-items:center;gap:6px;min-width:0}
.dtop .tb{--tb:56px;flex:0 0 auto;width:56px;min-width:56px;height:56px}
.dtop .ttl{font-size:19px}
#dStage{grid-area:stage;position:relative;overflow:hidden;border-radius:20px;background:#e9e5f5;box-shadow:inset 0 0 0 1px rgba(60,40,140,.08);touch-action:none;min-height:0}
#dcv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
#dLoad{position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,255,255,.6)}
.spin{width:46px;height:46px;border-radius:50%;border:5px solid #d9d2ff;border-top-color:#7c5cff;animation:dsp 0.8s linear infinite}
@keyframes dsp{to{transform:rotate(360deg)}}
#dZoom{position:absolute;right:8px;top:8px;background:rgba(42,35,80,.75);color:#fff;font-weight:800;font-size:13px;border-radius:999px;padding:4px 10px;pointer-events:none;opacity:0;transition:opacity .3s}
#dZoom.show{opacity:1}
#dTools{grid-area:tools;padding:6px;border-radius:20px}
#dToolset{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.dtool{height:58px;border-radius:14px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;box-shadow:0 3px 10px rgba(60,40,140,.1);color:#2a2350;padding:0}
.dtool svg{width:30px;height:30px}
.dtool span{font-size:11px;font-weight:800;letter-spacing:.1px}
.dtool.on{background:#2a2350;color:#fff;box-shadow:0 4px 14px rgba(42,35,80,.35)}
.dtool.sec{opacity:.9}
.dctl{display:flex;align-items:center;gap:6px;margin-top:6px}
.dsize{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:#fff;border-radius:14px;height:56px;padding:0 10px;box-shadow:0 3px 10px rgba(60,40,140,.1)}
.dsize i{flex:0 0 26px;height:26px;display:grid;place-items:center}
.dsize i::after{content:"";width:var(--d,8px);height:var(--d,8px);border-radius:50%;background:var(--c,#2a2350)}
.dsize b{flex:0 0 30px;font-size:13px;text-align:right;color:#5a4f86}
.dsize input{flex:1;min-width:0;height:44px;accent-color:#7c5cff;touch-action:pan-x}
.tgl{flex:0 0 56px;width:56px;height:56px;border-radius:14px;background:#fff;display:grid;place-items:center;box-shadow:0 3px 10px rgba(60,40,140,.1);color:#8a80b0}
.tgl svg{width:30px;height:30px}
.tgl.on{background:#e8fff3;color:#139a5a;box-shadow:0 0 0 2px #46d17a inset}
#dHand.on{background:#2a2350;color:#fff;box-shadow:none}
#dSide{grid-area:side;padding:6px;border-radius:20px;min-height:0;display:flex;flex-direction:column;gap:6px}
.drecent{display:flex;gap:6px;align-items:center}
#dRecent{display:flex;gap:6px;overflow:hidden;flex:1;min-width:0}
.dcustom{flex:0 0 auto;width:48px;height:40px;border-radius:12px;background:conic-gradient(#ff3b30,#ffd60a,#34c759,#0a84ff,#af52de,#ff2d92,#ff3b30);display:grid;place-items:center;cursor:pointer;position:relative;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.dcustom::after{content:"+";position:absolute;inset:8px 12px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:900;color:#2a2350;font-size:18px;line-height:1}
.dcustom input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:0;padding:0}
#dPal{display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,40px);grid-auto-columns:40px;gap:5px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-x;padding-bottom:4px;scrollbar-width:thin}
.dsw{width:40px;height:40px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);position:relative;padding:0}
.dsw.rc{flex:0 0 40px}
.dsw.on{box-shadow:0 0 0 3px #fff,0 0 0 5px #2a2350;z-index:1}
.dtoast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#2a2350;color:#fff;font-weight:800;padding:12px 20px;border-radius:999px;z-index:40;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:90vw;text-align:center}
.card img.dprev{width:min(300px,62vw,40vh*0.75);aspect-ratio:3/4;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.15);-webkit-touch-callout:default;user-select:auto;-webkit-user-select:auto}
/* landscape phones + desktop: tools left, colors right */
@media (orientation:landscape) and (min-width:700px){
 #dEditor{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"tools top side" "tools stage side"}
 #dTools{width:136px;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}
 #dToolset{grid-template-columns:repeat(2,58px);gap:6px}
 .dctl{flex-wrap:wrap;margin-top:8px}
 .dsize{flex:1 1 100%;height:auto;flex-direction:column;padding:8px 6px;gap:4px}
 .dsize input{width:100%;height:32px}
 .dsize b{flex:none;text-align:center}
 #dSide{width:200px;overflow-y:auto}
 .drecent{flex-wrap:wrap}
 #dRecent{flex-wrap:wrap;flex:1 1 100%}
 #dPal{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(4,40px);grid-auto-rows:40px;overflow:visible;touch-action:pan-y}
}
@media (orientation:landscape) and (min-width:700px) and (max-height:500px){
 .dtop .ttl{display:none}
 .dtop{justify-content:flex-end}
 #dEditor{gap:5px}
 .dtool{height:56px}
 .dtool span{display:none}
 #dSide{width:186px}
 #dPal{grid-template-columns:repeat(4,38px);grid-auto-rows:38px;gap:4px}
 .dsw{width:38px;height:38px}
}
@media (min-width:1100px) and (min-height:600px){
 #dTools{width:150px}
 #dToolset{grid-template-columns:repeat(2,64px)}
 .dtool{height:66px}
 #dSide{width:300px}
 #dPal{grid-template-columns:repeat(6,40px)}
}
@media (max-width:380px){ .dtop .tb{width:52px;min-width:52px} }

@media (orientation:portrait),(max-width:699px){.dtop .ttl{visibility:hidden}}

/* v14: picture-group chips (Patterns, Old City, Scenic) */
#dChips{max-width:1180px;margin:0 auto 6px;display:flex;flex-wrap:wrap;gap:8px}
.dchip{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line,rgba(255,248,236,.14));background:rgba(14,7,38,.55);color:var(--mute,#BFB2E6);font:inherit;font-weight:800;font-size:clamp(14px,1.8vw,16px);cursor:pointer;white-space:nowrap}
.dchip.on{background:var(--mint,#58E9BF);border-color:var(--mint,#58E9BF);color:var(--navy,#27194A)}
.dchip:active{transform:scale(.97)}
#dGrid .sechead em{font-style:normal;font-weight:700;font-size:.7em;opacity:.6}
@media (max-width:560px){#dChips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 0 4px;padding:2px 0}#dChips::-webkit-scrollbar{display:none}.dchip{padding:0 13px}}