/* Fun tools shared layout (Soft & clear) */
.tool-app *{box-sizing:border-box}
.tool-app p{margin:0}
.tool-app .fz{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.tool-app .fz-main,.tool-app .fz-side{min-width:0;display:grid;gap:16px}
.tool-app .fz-main{align-content:start}
.tool-app .fz-panel{background:var(--zl-surface);border:1px solid var(--zl-line);border-radius:18px;padding:18px;display:grid;gap:14px;align-content:start;min-width:0}
.tool-app .fz-panel.fz-alt{background:var(--zl-surface-2)}
.tool-app .fz-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tool-app .fz-field{display:grid;gap:6px;min-width:0}
.tool-app .fz-field>label,.tool-app .fz-range-row label,.tool-app .fz-label{font:500 14px/1.3 var(--zl-font-head);color:var(--zl-ink-2)}
.tool-app .fz-field select,.tool-app .fz-field input{font-size:16px}
.tool-app .fz-field select,.tool-app .fz-field input[type=text],.tool-app .fz-field input[type=number],.tool-app .fz-field input[type=search]{width:100%;min-height:44px;padding:0 12px}
.tool-app .fz-field textarea{width:100%;padding:10px 12px;min-height:120px;resize:vertical;font-family:var(--zl-font-body);line-height:1.5}
.tool-app .fz-field input[type=range]{width:100%;min-height:28px;margin:0}
.tool-app .fz-range-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tool-app .fz-range-row strong{font:600 14px var(--zl-font-head);color:var(--zl-ink)}
.tool-app .fz-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tool-app .fz-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tool-app .fz-actions-center{justify-content:center}
.tool-app .fz-sm{min-height:44px;padding:0 14px;font-size:14px}
.tool-app .btn-outline.fz-danger{color:var(--zl-danger)}
.tool-app .btn-outline.fz-danger:hover{border-color:var(--zl-danger);color:var(--zl-danger)}
.tool-app .btn-outline[aria-pressed="true"]{background:var(--zl-tint);border-color:var(--zl-accent);color:var(--zl-accent-strong)}
.tool-app .fz-result{text-align:center;display:grid;gap:4px;min-height:64px}
.tool-app .fz-result-title{font:600 clamp(26px,3.4vw,36px)/1.15 var(--zl-font-head);color:var(--zl-ink);letter-spacing:-.02em}
.tool-app .fz-result-sub{color:var(--zl-muted);font-size:15px}
.tool-app .fz-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.tool-app .fz-stat{background:var(--zl-surface-2);border:1px solid var(--zl-line);border-radius:12px;padding:10px 12px;display:grid;gap:2px;min-width:0}
.tool-app .fz-stat strong{font:600 20px/1.2 var(--zl-font-head);color:var(--zl-ink);overflow-wrap:anywhere}
.tool-app .fz-stat span{color:var(--zl-muted);font-size:13px;line-height:1.35}
.tool-app .fz-stat span b{font-weight:600;color:var(--zl-ink-2)}
.tool-app .fz-mode{text-align:center;color:var(--zl-muted);font-size:14px;min-height:1.4em}
.tool-app .fz-note{color:var(--zl-muted);font-size:14px;min-height:1.3em}
.tool-app .fz-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.tool-app .fz-toggle span{font:500 14px var(--zl-font-head);color:var(--zl-ink-2)}
.tool-app .fz-switch{width:50px;height:30px;border:0;border-radius:999px;background:var(--zl-line-2);position:relative;cursor:pointer;flex:none;padding:0}
.tool-app .fz-switch::after{content:"";position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .15s ease}
.tool-app .fz-switch.active{background:var(--zl-accent)}
.tool-app .fz-switch.active::after{left:24px}
html[data-theme="dark"] .tool-app .fz-switch::after{background:var(--zl-ink)}
html[data-theme="dark"] .tool-app .fz-switch.active::after{background:var(--zl-accent-ink)}
.tool-app .fz-history{display:grid;gap:6px;max-height:280px;overflow:auto}
.tool-app .fz-history-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border:1px solid var(--zl-line);border-radius:12px;background:var(--zl-surface-2)}
.tool-app .fz-history-item strong{font:600 15px var(--zl-font-head);color:var(--zl-ink)}
.tool-app .fz-history-item span{color:var(--zl-muted);font-size:13px}
.tool-app .fz-empty{padding:16px;text-align:center;color:var(--zl-muted);border:1px dashed var(--zl-line-2);border-radius:12px;background:var(--zl-surface-2);font-size:14px}
/* dialog */
.tool-app .tz-modal{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:16px}
.tool-app .tz-modal.show{display:flex}
.tool-app .tz-modal-backdrop{position:absolute;inset:0;background:rgba(9,22,23,.5)}
.tool-app .tz-modal-card{position:relative;width:min(560px,100%);max-height:88vh;overflow:auto;border:1px solid var(--zl-line);border-radius:22px;background:var(--zl-surface);color:var(--zl-ink);display:flex;flex-direction:column}
.tool-app .tz-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--zl-line)}
.tool-app .tz-modal-head p:not(.zl-ui-title){color:var(--zl-muted);font-size:14px;margin-top:4px}
.tool-app .tz-modal-close{flex:none;width:44px;height:44px;border:1.5px solid var(--zl-line-2);border-radius:999px;background:var(--zl-surface);color:var(--zl-ink);font-size:22px;line-height:1;cursor:pointer}
.tool-app .tz-modal-body{padding:18px 20px 20px;display:grid;gap:14px}
.tool-app .tz-modal-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
@media (max-width:1100px){.tool-app .fz{grid-template-columns:1fr}}
@media (max-width:640px){
.tool-app .fz-panel{padding:14px}
.tool-app .fz-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.tool-app .fz-row{grid-template-columns:1fr}
.tool-app .fz-actions-center>button{flex:1 1 auto}
}
/* shared list rows, bottom grid, toast */
.tool-app .np-bottom{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.tool-app .em-row{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border:1px solid var(--zl-line);border-radius:12px;background:var(--zl-surface-2)}
.tool-app .em-row .em-text{min-width:0;flex:1}
.tool-app .em-row strong{display:block;font:500 14.5px/1.4 var(--zl-font-body);color:var(--zl-ink)}
.tool-app .em-row small{display:block;color:var(--zl-muted);font-size:12.5px;margin-top:2px}
.tool-app .em-row .em-btns{display:flex;gap:4px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.tool-app .em-row .em-btns button{min-height:36px;padding:0 10px;border-radius:999px;border:1.5px solid var(--zl-line-2);background:var(--zl-surface);color:var(--zl-ink);font:500 13px var(--zl-font-head);cursor:pointer}
.tool-app .em-row .em-btns button:hover{border-color:var(--zl-accent)}
@media (pointer:coarse){.tool-app .em-row .em-btns button{min-height:44px}}
.tool-app .em-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:400;padding:10px 18px;border-radius:999px;background:var(--zl-ink);color:var(--zl-surface);font:500 14px var(--zl-font-head);opacity:0;pointer-events:none;transition:opacity .2s}
.tool-app .em-toast.show{opacity:1}
/* poster controls */
.tool-app .pz-stage{display:grid;place-items:center;padding:18px;border-radius:14px;background:var(--zl-surface-2);border:1px solid var(--zl-line)}
.tool-app .pz-status{text-align:center}
.tool-app .pz-ai{display:grid;gap:14px;padding:14px;border-radius:14px;background:var(--zl-surface-2);border:1px solid var(--zl-line)}
.tool-app .pz-ai[hidden]{display:none}
.tool-app .pz-swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.tool-app .pz-swatch{aspect-ratio:1/1;min-height:40px;border-radius:12px;border:2px solid transparent;cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.tool-app .pz-swatch[aria-pressed="true"]{border-color:var(--zl-ink);box-shadow:0 0 0 2px var(--zl-surface) inset}
.tool-app .pz-color{width:100%;height:44px;padding:4px;border:1.5px solid var(--zl-line-2);border-radius:12px;background:var(--zl-surface);cursor:pointer}
.tool-app #editorInput{min-height:84px}
@media (max-width:860px){.tool-app .np-bottom{grid-template-columns:1fr}}
@media (max-width:640px){.tool-app .pz-stage{padding:10px}}

/* quote card (user artwork, exported as an image) */
.tool-app .quote-card{--card-bg: linear-gradient(145deg,#081225,#182d63 36%,#6b21a8 70%,#fb7185 112%); --card-text:#f8fbff; --card-accent:#93c5fd; --card-footer:#f9a8d4; --card-brand:#ffffff; --card-frame:rgba(255,255,255,.16); width:min(100%,560px); aspect-ratio:1 / 1; min-height:0; border-radius:26px; position:relative; overflow:hidden; display:grid; align-items:stretch; padding:28px;  isolation:isolate; border:0; background:var(--card-bg); color:var(--card-text); text-align:center;}
.tool-app .quote-card::before,.tool-app .quote-card::after{content:""; position:absolute; pointer-events:none;}
.tool-app .quote-card[data-align="left"]{text-align:left;}
.tool-app .quote-main{position:relative; z-index:2; display:grid; grid-template-rows:auto 1fr auto; gap:22px; height:100%;}
.tool-app .quote-topline{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.tool-app .quote-brand{font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; font-weight:900; opacity:.78; color:var(--card-brand);}
.tool-app .quote-mark{font-size:4.8rem; line-height:.7; font-weight:900; opacity:.9; color:var(--card-accent); text-shadow:0 8px 24px rgba(0,0,0,.12);}
.tool-app .quote-body{display:grid; align-items:center; justify-items:stretch;}
.tool-app .quote-text-wrap{display:grid; gap:18px; align-self:center;}
.tool-app .quote-text{margin:0; font-weight:700; line-height:1.2; letter-spacing:-.03em; font-size:clamp(1.55rem,4vw,2.45rem); color:var(--card-text); text-wrap:balance;}
.tool-app .quote-foot{display:grid; gap:12px; align-self:end;}
.tool-app .quote-footerline{width:100px; height:6px; border-radius:999px; background:linear-gradient(90deg,var(--card-accent),var(--card-footer)); justify-self:center;}
.tool-app .quote-card[data-align="left"] .quote-footerline{justify-self:start;}
.tool-app .quote-author{font-size:1rem; font-weight:800; letter-spacing:.04em; opacity:.95; color:var(--card-brand);}
.tool-app .quote-author.hidden{display:none;}
.tool-app .quote-card[data-layout="bottom"] .quote-body{align-items:end;}
.tool-app .quote-card[data-layout="top"] .quote-body{align-items:start;}
.tool-app .quote-card[data-layout="split"] .quote-main{grid-template-rows:auto auto 1fr auto;}
.tool-app .quote-card[data-layout="split"] .quote-topline{padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.14);}
.tool-app .quote-card[data-layout="split"] .quote-body{align-items:center;}
.tool-app .quote-card[data-mark="none"] .quote-mark{display:none;}
.tool-app .quote-card[data-mark="outline"] .quote-mark{-webkit-text-stroke:2px var(--card-accent); color:transparent;}
.tool-app .quote-card[data-mark="huge"] .quote-mark{position:absolute; right:18px; top:8px; font-size:10rem; opacity:.14; line-height:1;}
.tool-app .quote-card[data-font="serif"] .quote-text{font-family:Georgia,"Times New Roman",serif; font-weight:700; letter-spacing:-.02em;}
.tool-app .quote-card[data-font="display"] .quote-text{font-family:"Lexend",ui-sans-serif,system-ui,sans-serif; font-weight:600; text-transform:none;}
.tool-app .quote-card[data-pattern="orb"]::before{inset:-12% auto auto -10%; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.26), transparent 65%);}
.tool-app .quote-card[data-pattern="frame"]::before{inset:20px; border-radius:28px; border:2px solid var(--card-frame);}
.tool-app .quote-card[data-pattern="grid"]::before{inset:0; opacity:.22; background-image: linear-gradient(var(--card-frame) 1px, transparent 1px), linear-gradient(90deg, var(--card-frame) 1px, transparent 1px); background-size:28px 28px;}
.tool-app .quote-card[data-pattern="diagonal"]::before{inset:-25%; transform:rotate(-12deg); background:repeating-linear-gradient(90deg, transparent 0 18px, var(--card-frame) 18px 22px); opacity:.35;}
.tool-app .quote-card[data-pattern="spotlight"]::before{inset:auto -15% -15% auto; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.26), transparent 68%);}
.tool-app .quote-card[data-pattern="paper"]::before{inset:0; opacity:.28; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.38), transparent 16%), radial-gradient(circle at 80% 30%, rgba(255,255,255,.22), transparent 14%), radial-gradient(circle at 40% 80%, rgba(255,255,255,.16), transparent 10%); mix-blend-mode:soft-light;}
.tool-app .quote-card[data-pattern="ring"]::before{inset:auto auto 12% 56%; width:240px; height:240px; border-radius:50%; border:14px solid var(--card-frame); transform:translateX(-50%);}
.tool-app .quote-card[data-pattern="split"]::before{inset:0 auto 0 0; width:36%; background:linear-gradient(180deg, var(--card-frame), transparent); opacity:.9;}
.tool-app .quote-card[data-pattern="mosaic"]::before{inset:14px; border-radius:26px; background: linear-gradient(135deg, var(--card-frame) 0 24%, transparent 24% 50%, var(--card-frame) 50% 74%, transparent 74% 100%), linear-gradient(45deg, transparent 0 40%, var(--card-frame) 40% 60%, transparent 60% 100%); opacity:.28;}
.tool-app .quote-card[data-pattern="wave"]::before{left:-8%; right:-8%; bottom:-2%; height:44%; background: radial-gradient(80% 80% at 15% 100%, var(--card-frame) 0 46%, transparent 47%), radial-gradient(80% 80% at 50% 100%, var(--card-frame) 0 46%, transparent 47%), radial-gradient(80% 80% at 85% 100%, var(--card-frame) 0 46%, transparent 47%); opacity:.8;}
.tool-app .quote-card[data-pattern="confetti"]::before{inset:0; background: radial-gradient(circle at 12% 20%, var(--card-frame) 0 4px, transparent 5px), radial-gradient(circle at 82% 18%, var(--card-frame) 0 6px, transparent 7px), radial-gradient(circle at 24% 78%, var(--card-frame) 0 5px, transparent 6px), radial-gradient(circle at 70% 74%, var(--card-frame) 0 4px, transparent 5px), radial-gradient(circle at 54% 24%, var(--card-frame) 0 3px, transparent 4px), radial-gradient(circle at 86% 60%, var(--card-frame) 0 5px, transparent 6px); opacity:.8;}
.tool-app .quote-card[data-pattern="beam"]::before{inset:-10% auto auto -18%; width:320px; height:120%; transform:rotate(24deg); background:linear-gradient(90deg, transparent, var(--card-frame), transparent); opacity:.52;}
.tool-app .quote-card[data-pattern="stripe"]::before{inset:0; background:repeating-linear-gradient(180deg, transparent 0 18px, var(--card-frame) 18px 22px); opacity:.24;}
.tool-app .quote-card[data-pattern="marble"]::before{inset:0; opacity:.25; background: radial-gradient(circle at 25% 15%, var(--card-frame), transparent 20%), radial-gradient(circle at 75% 35%, var(--card-frame), transparent 18%), radial-gradient(circle at 30% 70%, var(--card-frame), transparent 20%), radial-gradient(circle at 80% 85%, var(--card-frame), transparent 16%); filter:blur(22px);}
.tool-app .quote-card::after{inset:18px; border-radius:26px; border:1px solid rgba(255,255,255,.08);}
/* quote poster tweaks */
.tool-app .quote-card{padding:clamp(18px,4.5%,28px)}
.tool-app .quote-main{min-height:0;gap:16px}
.tool-app .quote-body{min-height:0;overflow:hidden}
.tool-app .quote-text{font-family:"Lexend",ui-sans-serif,system-ui,sans-serif;overflow-wrap:anywhere}
.tool-app .quote-brand{font:600 12px/1.2 var(--zl-font-head);letter-spacing:.16em}
.tool-app .quote-author{font:500 15px/1.3 var(--zl-font-head);letter-spacing:.02em}
.tool-app .quote-card.no-brand .quote-brand{visibility:hidden}
@media (max-width:640px){.tool-app .quote-mark{font-size:3.4rem}.tool-app .quote-card[data-mark="huge"] .quote-mark{font-size:7rem}}
.tool-app .pz-color-row{align-items:end}