/* CardFoundary Flashcard Studio: front-end styles. Loaded only on pages that use the plugin. */
.cft-app,.cft-projectbar,.cft-notfound{
	--cft-ink:#14162d;--cft-mute:#6a6679;--cft-paper:#f4f5ff;--cft-line:#e7e5ef;--cft-accent:#6f68e8;--cft-accent-a:rgba(111,104,232,.2);
	--cft-btn-a:#ff846d;--cft-btn-b:#ff5d62;--cft-btn-shadow:rgba(255,93,98,.26);--cft-btn-shadow-h:rgba(255,93,98,.35);
	--cft-bad:#c0392b;--cft-ok:#0f7b3f;--cft-serif:Georgia,'Times New Roman',serif;
	box-sizing:border-box;color:var(--cft-ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.45;
}
.cft-app *{box-sizing:border-box}
.cft-standalone{margin:0;background:radial-gradient(circle at 7% 7%,#f1edff 0,transparent 23%),radial-gradient(circle at 96% 16%,#fff0e8 0,transparent 25%),#fffdfb}
.cft-standalone__main{max-width:1280px;margin:0 auto;padding:16px}
.cft-standalone__main--themed{max-width:1640px;padding:28px 34px 0}
@media (max-width:700px){.cft-standalone__main--themed{padding:20px 14px 0}}
.cft-brand{font-weight:800;letter-spacing:-.04em}
.cft-projectbar{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding:0 0 12px}
.cft-projectbar__note{color:var(--cft-mute);font-size:14px}
.cft-notfound{max-width:520px;margin:60px auto;text-align:center}
.cft-notfound h1{font-family:var(--cft-serif);font-weight:500;letter-spacing:-.04em}

.cft-panel{background:#fff;border:1px solid var(--cft-line);border-radius:20px;padding:16px;box-shadow:0 12px 30px #25213d0c}
.cft-layout{display:grid;grid-template-columns:minmax(320px,480px) 1fr;gap:20px;align-items:start;margin-bottom:20px}
.cft-stage{position:sticky;top:12px}
@media (max-width:860px){.cft-layout{grid-template-columns:1fr}.cft-stage{position:static;order:-1}}
.cft-section{border:0;margin:0 0 18px;padding:0;min-width:0}
.cft-section>legend{font:800 11px/1.2 Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--cft-accent);padding:0 0 12px}
.cft-app h2,.cft-app h3{font-family:var(--cft-serif);font-weight:500;letter-spacing:-.03em}
.cft-previewpanel h2,.cft-actions h2{margin:0;font-size:26px;line-height:1.05}
.cft-actions h3{margin:18px 0 8px;font-size:19px}
.cft-field{margin:0 0 12px}
.cft-field label{display:block;font-weight:600;font-size:14px;margin-bottom:4px}
.cft-field--check label{display:flex;gap:8px;align-items:center;font-weight:500}
.cft-field--range label{display:flex;justify-content:space-between}
.cft-field--range output{font-weight:400;color:var(--cft-mute)}
.cft-field--color{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.cft-field--color label{margin:0}
.cft-field--color input{width:44px;height:30px;padding:0;border:1px solid #dcd9e8;border-radius:10px;background:#fff}
.cft-field input[type=range]{width:100%;accent-color:var(--cft-accent)}
.cft-field input[type=checkbox]{accent-color:var(--cft-accent);width:18px;height:18px}
.cft-app input[type=text],.cft-app input[type=url],.cft-app input[type=number],.cft-app select,.cft-app textarea{
	width:100%;padding:9px 10px;border:1px solid #dcd9e8;border-radius:12px;background:#fafaff;color:var(--cft-ink);font:inherit;min-height:40px}
.cft-app textarea{resize:vertical;min-height:84px;line-height:1.4}
.cft-app input:focus,.cft-app select:focus,.cft-app textarea:focus{border-color:var(--cft-accent);outline:0;box-shadow:0 0 0 3px var(--cft-accent-a)}
.cft-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.cft-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 12px;align-items:end}
@media (max-width:700px){.cft-row3{grid-template-columns:1fr}}
.cft-inputrow{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.cft-inputrow>input{flex:1 1 180px;width:auto}
.cft-count{margin:6px 0 0;font-size:13px;color:var(--cft-mute)}
.cft-count.is-warn{color:var(--cft-bad);font-weight:600}
.cft-hint{font-size:13px;color:var(--cft-mute);margin:4px 0}
.cft-adv,.cft-images{border:1px solid var(--cft-line);border-radius:14px;padding:8px 12px;margin:0 0 12px;background:#fcfcft}
.cft-adv summary,.cft-images summary{cursor:pointer;font-weight:600;padding:2px 0}

.cft-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #e6e5ee;background:#fff;color:#45415d;border-radius:999px;padding:10px 20px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;min-height:42px;line-height:1.2;transition:transform .2s,box-shadow .2s}
.cft-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 18px #28254320}
.cft-btn--primary{background:linear-gradient(135deg,var(--cft-btn-a),var(--cft-btn-b));border-color:transparent;color:#fff;box-shadow:0 13px 24px var(--cft-btn-shadow)}
.cft-btn--primary:hover:not(:disabled){box-shadow:0 16px 28px var(--cft-btn-shadow-h)}
.cft-btn--ghost{background:transparent;box-shadow:none}
.cft-btn--small{padding:5px 12px;min-height:32px;font-size:13px}
.cft-btn--xl{width:100%;min-height:56px;font-size:16px;margin-top:12px}
.cft-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.cft-btnrow{display:flex;flex-wrap:wrap;gap:8px}
.cft-app :focus-visible{outline:3px solid var(--cft-accent);outline-offset:2px}

.cft-previewpanel__head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.cft-status{min-height:1.4em;margin:8px 0 0;color:var(--cft-mute);font-size:14px}
.cft-error{margin:6px 0 0;font-size:14px;color:var(--cft-bad);font-weight:600}
.cft-stale{margin:8px 0 0;padding:8px 10px;background:#fff0e8;border:1px solid #ffd0c4;border-radius:12px;font-size:14px}

.cft-results{margin-top:24px}
.cft-actions{margin-bottom:20px}
.cft-share{margin-top:14px;padding-top:12px;border-top:1px solid var(--cft-line)}
.cft-results__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;margin-top:20px}
.cft-result{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.cft-result .cft-flip{width:100%}
.cft-result__btns{justify-content:center}


/* ---- Trading card maker ---- */
.cft-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;padding:4px;background:var(--cft-paper);border-radius:999px}
.cft-tab{flex:1 1 auto;border:0;background:transparent;border-radius:999px;padding:9px 14px;font:inherit;font-size:14px;font-weight:700;color:#45415d;cursor:pointer;min-height:40px}
.cft-tab.is-active{background:#fff;color:var(--cft-ink);box-shadow:0 4px 12px #25213d1a}
.cft-pane[hidden]{display:none}
.cft-label{font-weight:600;font-size:14px;margin:0 0 6px}
.cft-pt{padding-top:22px}
.cft-group{border:1px solid var(--cft-line);border-radius:14px;padding:10px 12px 4px;margin:0 0 12px;background:#fcfcff}
.cft-group>legend{font:800 11px/1.2 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--cft-accent);padding:0 6px}
.cft-statrow{display:grid;grid-template-columns:1.3fr 1fr;gap:8px;margin-bottom:8px}
.cft-tpls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
@media (max-width:520px){.cft-tpls{grid-template-columns:repeat(2,1fr)}}
.cft-tpl{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px solid transparent;background:#fff;border-radius:12px;padding:6px;font:inherit;font-size:12px;font-weight:700;color:#45415d;cursor:pointer}
.cft-tpl canvas{width:100%;height:auto;display:block}
.cft-tpl:hover{border-color:#dcd9e8}
.cft-tpl.is-active{border-color:var(--cft-accent);background:var(--cft-paper)}
.cft-cardtools{justify-content:center;margin-top:12px}
.cft-previewpanel__head h2{margin:0}

/* 3D flip, tilt and holo shine */
.cft-flipwrap{max-width:420px;margin:0 auto;perspective:1400px;filter:drop-shadow(0 22px 30px rgba(40,37,67,.28))}
.cft-flip{position:relative;width:100%;aspect-ratio:630/880;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out;touch-action:pan-y}
.cft-flip.is-dragging{cursor:grabbing;transition:none}
.cft-flip__inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.cft-flip.is-flipped .cft-flip__inner{transform:rotateY(180deg)}
.cft-face{position:absolute;inset:0;width:100%;height:100%;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cft-face--back{transform:rotateY(180deg)}
.cft-shine{position:absolute;inset:0;border-radius:5.7%/4.1%;pointer-events:none;opacity:0;transition:opacity .2s;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),rgba(255,255,255,0) 48%);mix-blend-mode:soft-light}
.cft-flip[data-foil="1"]:hover .cft-shine{opacity:1}
.cft-flip.is-flipped .cft-shine{display:none}
@media (prefers-reduced-motion:reduce){.cft-flip,.cft-flip__inner{transition:none}.cft-shine{display:none}}

/* Card gallery */
.cft-cards,.cft-actions{margin-bottom:20px}
.cft-cards h2,.cft-actions h2{margin:0 0 12px;font-size:26px}
.cft-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.cft-thumb{display:flex;flex-direction:column;align-items:center;gap:6px;border:2px solid transparent;border-radius:16px;background:none;padding:8px;font:inherit;cursor:pointer;color:var(--cft-ink)}
.cft-thumb canvas{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 10px rgba(40,37,67,.22))}
.cft-thumb:hover{background:var(--cft-paper)}
.cft-thumb.is-active{border-color:var(--cft-accent);background:var(--cft-paper)}
.cft-thumb__label{font-size:12px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cft-badge{display:inline-block;background:var(--cft-paper);border:1px solid #dcd9e8;border-radius:999px;padding:0 10px;font-size:13px;font-weight:600;vertical-align:middle}
.cft-btn--danger{border-color:#f0c4be;color:var(--cft-bad)}

/* ---- FAQ block used in the landing page content ---- */
.cft-faq{max-width:900px;margin:0 auto;padding:clamp(4rem,8vw,8rem) 28px 0;font-family:Inter,system-ui,sans-serif}
.cft-faq h2{font-family:Georgia,'Times New Roman',serif;font-weight:500;letter-spacing:-.06em;line-height:.98;font-size:clamp(2.6rem,5vw,4.6rem);text-align:center;margin:0 0 2.4rem}
.cft-faq details{border-top:1px solid #e7e5ef;padding:18px 4px}
.cft-faq details:last-of-type{border-bottom:1px solid #e7e5ef}
.cft-faq summary{cursor:pointer;font-weight:700;font-size:17px;color:#14162d;list-style:none;display:flex;justify-content:space-between;gap:16px}
.cft-faq summary::-webkit-details-marker{display:none}
.cft-faq summary::after{content:"+";color:#6f68e8;font-size:22px;line-height:1}
.cft-faq details[open] summary::after{content:"\2212"}
.cft-faq details p{margin:12px 0 0;color:#6a6679;font:1.05rem/1.65 Georgia,serif;max-width:46rem}
