/* aFig studio — "Studio Flow" design (v3). Palette and type match afig.app:
   royal #2f7bc4 → violet #4a8fd2 → purple #23609f, deep indigo #1b4c80, orange #f0701f → flame #e85d1a,
   Roboto (headings) + Roboto (body, 400–700). */

/* =========================================================
   1. Tokens & base
   ========================================================= */
.aai {
	--a-royal: #2f7bc4; --a-violet: #4a8fd2; --a-purple: #23609f; --a-indigo: #1f568f; --a-deep: #1b4c80;
	--a-orange: #f0701f; --a-flame: #e85d1a; --a-gold: #f0701f; --a-green: #16a34a; --a-red: #c8352b;
	--a-ink: #1a1b1e; --a-ink2: #1d2240; --a-text: #3c4257; --a-muted: #5d6273; --a-faint: #8a91a8;
	--a-line: #e3e8f4; --a-line2: #d6def0; --a-soft: #f1f5fd; --a-paper: #f6f9ff;
	--a-grad: radial-gradient(circle at 100% 0, rgba(111, 208, 255, .4), transparent 50%), linear-gradient(145deg, #2f7bc4, #4a8fd2 65%, #23609f);
	--a-grad-deep: radial-gradient(circle at 90% 0, rgba(255, 196, 80, .22), transparent 45%), linear-gradient(170deg, #1b4c80, #2a6db0);
	--a-warm: linear-gradient(110deg, #f0701f, #e85d1a);
	--a-head: Roboto, system-ui, sans-serif;
	--a-body: Roboto, system-ui, sans-serif;
	--a-ease: cubic-bezier(.16, 1, .3, 1);
	--a-spring: cubic-bezier(.34, 1.56, .64, 1);
	--a-shadow: 0 18px 40px -24px rgba(15, 42, 74, .45);
	display: grid; gap: 24px; width: 100%; max-width: 1440px; margin-left: auto !important; margin-right: auto !important;
	padding: 0; color: var(--a-ink); font: 400 15px/1.55 var(--a-body); text-align: left;
}
.aai *, .aai *::before, .aai *::after { box-sizing: border-box; }
.aai h2, .aai h3, .aai h4 { margin: 0; font-family: var(--a-head); color: var(--a-ink); line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; }
.aai p { margin: 0; }
.aai ul, .aai ol { margin: 0; padding: 0; list-style: none; }
.aai input, .aai select, .aai textarea, .aai button { font-family: inherit; }
.aai [hidden] { display: none !important; }
.aai :focus-visible { outline: 3px solid rgba(240, 112, 31, .7); outline-offset: 2px; }
.aai-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 6px; font: 700 12px/1 var(--a-head); letter-spacing: .14em; text-transform: uppercase; color: var(--a-royal); }
.aai-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--a-warm); }
.aai-muted { color: var(--a-muted); }
.aai-small { font-size: 12.5px; color: var(--a-muted); }
.aai-center { text-align: center; }
.aai-err { color: var(--a-red); font-size: 14px; font-weight: 600; }
.aai-bad { color: var(--a-red); }
.aai-fine { font-size: 12.5px; color: var(--a-muted); }

/* =========================================================
   2. Buttons, chips, fields
   ========================================================= */
.aai-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; font: 700 15px/1 var(--a-body); cursor: pointer; text-decoration: none !important; overflow: hidden; isolation: isolate; white-space: nowrap; transition: transform .3s var(--a-ease), box-shadow .3s, background-color .25s, color .25s; }
.aai-btn svg { width: 18px; height: 18px; transition: transform .3s var(--a-ease); }
.aai-btn:hover svg:last-child { transform: translateX(3px); }
.aai-btn:active { transform: scale(.97); }
.aai-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.aai-btn-primary, .aai-btn-accent { color: #fff !important; background: var(--a-warm); box-shadow: 0 12px 26px -12px rgba(232, 93, 26, .75); }
.aai-btn-primary::after, .aai-btn-accent::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--a-ease); }
.aai-btn-primary:hover, .aai-btn-accent:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(232, 93, 26, .85); }
.aai-btn-primary:hover::after, .aai-btn-accent:hover::after { transform: translateX(120%); }
.aai-btn-ghost { color: var(--a-indigo) !important; background: #fff; box-shadow: inset 0 0 0 1.5px var(--a-line2); }
.aai-btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--a-royal); color: var(--a-royal) !important; }
.aai-btn-light { color: #fff !important; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
.aai-btn-sm { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.aai-btn-block { width: 100%; }
.aai-link, .aai-link-btn { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--a-royal); font: 700 13.5px var(--a-body); cursor: pointer; }
.aai-link-btn svg { width: 16px; height: 16px; }
.aai-back-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--a-line2); color: var(--a-indigo); font: 700 13.5px var(--a-body); cursor: pointer; transition: box-shadow .25s, transform .3s var(--a-ease); }
.aai-back-pill svg { width: 16px; height: 16px; transition: transform .3s var(--a-ease); }
.aai-back-pill:hover { box-shadow: inset 0 0 0 2px var(--a-royal); }
.aai-back-pill:hover svg { transform: translateX(-3px); }
.aai-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--a-line2); color: var(--a-muted); font: 700 12.5px var(--a-body); cursor: pointer; transition: all .25s var(--a-ease); }
.aai-chip svg { width: 15px; height: 15px; }
.aai-chip:hover, .aai-chip.is-on { color: var(--a-indigo); box-shadow: inset 0 0 0 1.5px rgba(47, 123, 196, .45); background: #f2f6ff; }
.aai-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aai-mini-btn { border: 0; border-radius: 999px; padding: 5px 11px; background: #eef3ff; color: var(--a-indigo); font: 700 12px/1.4 var(--a-body); cursor: pointer; transition: background-color .2s, transform .25s var(--a-ease); }
.aai-mini-btn:hover { background: #e1e9ff; }
.aai-mini-btn.is-warn { background: var(--a-warm); color: #fff; box-shadow: 0 8px 16px -8px rgba(232, 93, 26, .8); }
.aai-ok-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--a-green); }
.aai-ok-pill svg { width: 14px; height: 14px; }

.aai-field { display: grid; gap: 6px; }
.aai-field > label, .aai-flabel { font: 700 13.5px var(--a-body); color: var(--a-ink2); }
.aai-field input[type=text], .aai-field input[type=email], .aai-field input[type=password], .aai-field textarea, .aai-field select, .aai-form-grid input {
	width: 100%; min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--a-line2); border-radius: 14px; background: #fff; color: var(--a-ink); font: 500 15px var(--a-body); transition: border-color .2s, box-shadow .2s;
}
.aai-field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.aai-field input:focus, .aai-field textarea:focus, .aai-field select:focus, .aai-form-grid input:focus { outline: none; border-color: var(--a-royal); box-shadow: 0 0 0 4px rgba(47, 123, 196, .12); }
.aai-check { display: flex; gap: 8px; align-items: flex-start; font: 600 14px var(--a-body); cursor: pointer; }
.aai-check input { margin-top: 3px; accent-color: var(--a-royal); }
.aai-check-sm { font-weight: 500; font-size: 13px; color: var(--a-muted); }
.aai-msg { padding: 11px 14px; border-radius: 14px; font-size: 14px; font-weight: 600; }
.aai-msg.is-err { background: #fdecea; color: #8a1f17; }
.aai-msg.is-ok { background: #e8f7ef; color: #0d6b3d; }
.aai-msg.is-info { background: #eef3ff; color: var(--a-ink2); }
.aai-card { background: #fff; border-radius: 22px; padding: clamp(18px, 2.4vw, 28px); box-shadow: 0 0 0 1px var(--a-line), var(--a-shadow); }
.aai-card h2 { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 8px; }
.aai-note { padding: 16px 18px; border-radius: 16px; background: #fff7f0; box-shadow: inset 0 0 0 1px #ffd9c2; }
.aai-note-wait { background: var(--a-soft); box-shadow: inset 0 0 0 1px var(--a-line); }

/* =========================================================
   3. Visitor gate (logged-out studio section)
   ========================================================= */
.aai-gate { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; padding: 30px 32px; border-radius: 22px; background: #fff; }
.aai-gate b { display: block; font: 800 22px var(--a-head); color: var(--a-ink); }
.aai-gate span { color: var(--a-muted); font-size: 15px; }
.aai-gate-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* =========================================================
   4. Dashboard shell
   ========================================================= */
.aai-dash { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 680px; background: #fff; border-radius: 22px; overflow: hidden; }
.aai-dash-side { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px 14px; background: var(--a-grad-deep); color: rgba(255, 255, 255, .85); isolation: isolate; overflow: hidden; }
.aai-dash-side::after { content: ""; position: absolute; left: -60px; bottom: -80px; z-index: -1; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(111, 208, 255, .28), transparent 70%); filter: blur(10px); animation: aai-float 14s ease-in-out infinite; }
.aai-create { width: 100%; min-height: 50px; justify-content: center; font-size: 15.5px; }
.aai-create svg { width: 20px; height: 20px; }
.aai-side-h { margin: 20px 10px 6px; font: 700 11px var(--a-head); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.aai-side-nav { display: grid; gap: 2px; }
.aai-side-nav button { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 0; border-radius: 12px; background: none; color: rgba(255, 255, 255, .82); font: 600 14px var(--a-body); cursor: pointer; text-align: left; transition: background-color .25s, color .25s, transform .3s var(--a-ease); }
.aai-side-nav button svg { width: 18px; height: 18px; flex: none; opacity: .8; }
.aai-side-nav button span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aai-side-nav button em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .5); }
.aai-side-nav button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.aai-side-nav button.is-on { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 3px 0 0 var(--a-orange); }
.aai-side-nav button.is-on em { color: var(--a-gold); }
.aai-side-nav button span.aai-gen-dot, .aai-gen-dot { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.aai-folder-row { display: flex; align-items: center; border-radius: 12px; }
.aai-folder-row > button:first-child { flex: 1; min-width: 0; }
.aai-folder-more { width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: rgba(255, 255, 255, .6); cursor: pointer; opacity: 0; font-size: 16px; transition: opacity .2s; }
.aai-folder-row:hover .aai-folder-more { opacity: 1; }
.aai-folder-more:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.aai-side-add { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 9px 11px; border: 1.5px dashed rgba(255, 255, 255, .28); border-radius: 12px; background: none; color: rgba(255, 255, 255, .85); font: 700 13.5px var(--a-body); cursor: pointer; transition: all .25s; }
.aai-side-add svg { width: 16px; height: 16px; }
.aai-side-add:hover { border-color: var(--a-gold); color: #fff; background: rgba(255, 255, 255, .06); }
.aai-dragging .aai-side-nav [data-folder]:not([data-folder="all"]) { outline: 1.5px dashed rgba(255, 215, 106, .55); outline-offset: -2px; }
.aai-side-nav button.is-drop { background: rgba(255, 215, 106, .2) !important; color: #fff; transform: scale(1.03); }

.aai-dash-main { min-width: 0; padding-bottom: 30px; background: var(--a-paper); }

/* Generator colour keys */
.aai-gen-ico { flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--a-grad); }
.aai-gi-graphical-abstract { background: linear-gradient(135deg, #ffb35a, #e85d1a) !important; }
.aai-gi-scientific-illustration { background: linear-gradient(135deg, #5a8cff, #2f7bc4) !important; }
.aai-gi-experimental-workflow { background: linear-gradient(135deg, #3fd1c4, #0b8f8a) !important; }
.aai-gi-review-summary { background: linear-gradient(135deg, #f48fbf, #c2306c) !important; }
.aai-gi-timeline { background: linear-gradient(135deg, #ffd06a, #e08a00) !important; }
.aai-gi-multi-panel { background: linear-gradient(135deg, #8f8cff, #4a8fd2) !important; }

/* =========================================================
   5. Flow rail: Choose → Describe → Create → Refine & export
   ========================================================= */
.aai-flowbar { position: sticky; top: 64px; z-index: 6; padding: 14px 28px; background: rgba(246, 249, 255, .97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--a-line); box-shadow: 0 10px 20px -18px rgba(15, 42, 74, .5); }
.admin-bar .aai-flowbar { top: 96px; }
.aai-flow { --n: 0; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: 760px; margin: 0 auto; }
.aai-flow li { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px; font: 700 13.5px var(--a-body); color: var(--a-faint); white-space: nowrap; transition: color .4s; }
.aai-flow li b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--a-line2); font: 800 13px var(--a-head); color: var(--a-faint); transition: all .5s var(--a-ease); }
.aai-flow li b svg { width: 16px; height: 16px; stroke-width: 2.6; }
.aai-flow li.is-done { color: var(--a-ink2); }
.aai-flow li.is-done b { background: var(--a-royal); color: #fff; box-shadow: none; }
.aai-flow li.is-on { color: var(--a-ink); }
.aai-flow li.is-on b { background: var(--a-warm); color: #fff; box-shadow: 0 0 0 5px rgba(240, 112, 31, .18); animation: aai-pulse 2.4s ease-in-out infinite; }
.aai-flow-line { position: absolute; left: 12.5%; right: 12.5%; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: var(--a-line); z-index: 0; }
.aai-flow-line::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--a-royal), var(--a-orange)); transform-origin: 0 50%; transform: scaleX(calc(var(--n) / 3)); transition: transform .8s var(--a-ease); }
.aai-flow li span { padding: 4px 8px; border-radius: 8px; background: rgba(246, 249, 255, .95); }
.aai-flow.is-compact { display: inline-grid; grid-template-columns: repeat(4, auto); gap: 14px; margin: 0 6px; max-width: none; }
.aai-flow.is-compact .aai-flow-line { display: none; }
.aai-flow.is-compact li { gap: 6px; font-size: 12px; }
.aai-flow.is-compact li b { width: 22px; height: 22px; font-size: 11px; }
.aai-flow.is-compact li b svg { width: 12px; height: 12px; }
.aai-flow.is-compact li span { background: none; padding: 0; }
.aai-flow.is-compact li:not(.is-on) span { display: none; }
@keyframes aai-pulse { 50% { box-shadow: 0 0 0 9px rgba(240, 112, 31, .08); } }

/* =========================================================
   6. Choose: greeting + animated generator cards
   ========================================================= */
.aai-dash-hero { position: relative; padding: 34px 28px 30px; isolation: isolate; overflow: hidden; }
.aai-dash-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(600px 260px at 10% 0, rgba(47, 123, 196, .12), transparent 70%), radial-gradient(520px 240px at 100% 10%, rgba(240, 112, 31, .1), transparent 70%); }
.aai-hello { margin-bottom: 26px; }
.aai-hello h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 900; letter-spacing: -.03em; }
.aai-hello p { margin-top: 8px; color: var(--a-muted); font-size: 16px; }
.aai-hero-gens { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.aai-hero-gen { --gx: 50%; --gy: 50%; position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--a-line), 0 14px 30px -24px rgba(15, 42, 74, .5); cursor: pointer; overflow: hidden; color: var(--a-ink); animation: aai-rise .7s var(--a-ease) both; animation-delay: calc(var(--i, 0) * 70ms); transition: transform .45s var(--a-ease), box-shadow .45s var(--a-ease); }
.aai-hero-gen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .35s; pointer-events: none; }
.aai-hero-gen:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(47, 123, 196, .25), 0 26px 46px -24px rgba(15, 42, 74, .6); }
.aai-hero-gen:hover::after { box-shadow: inset 0 0 0 2px rgba(47, 123, 196, .35); }
.aai-hero-gen:active { transform: translateY(-2px) scale(.985); }
.aai-hg-art { display: block; padding: 12px 12px 0; background: linear-gradient(170deg, #f8faff, #edf2fd); }
.aai-hg-art .fig { display: block; width: 100%; height: auto; border-radius: 12px; background: #fff; transition: transform .6s var(--a-ease); }
.aai-hero-gen:hover .aai-hg-art .fig { transform: scale(1.04); }
.aai-hg-art .aai-gen-ico { display: block; width: 100%; height: 110px; border-radius: 12px; }
.aai-hg-txt { display: grid; gap: 4px; padding: 14px 16px 6px; }
.aai-hg-txt b { font: 800 16px/1.2 var(--a-head); }
.aai-hg-txt em { font-style: normal; font-size: 12.5px; line-height: 1.45; color: var(--a-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aai-hg-go { display: inline-flex; align-items: center; gap: 6px; margin: 4px 16px 16px; font: 700 13px var(--a-body); color: var(--a-royal); }
.aai-hg-go svg { width: 16px; height: 16px; transition: transform .35s var(--a-ease); }
.aai-hero-gen:hover .aai-hg-go svg { transform: translateX(5px); }
.aai-dash-hero.is-pulse .aai-hero-gen { animation: aai-rise .6s var(--a-ease) both, aai-glow 1.4s ease-out 1; animation-delay: calc(var(--i, 0) * 60ms), calc(var(--i, 0) * 60ms + .4s); }
.aai-hero-more { display: flex; justify-content: flex-start; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.aai-hero-more label { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--a-line2); color: var(--a-indigo); font: 700 13px var(--a-body); cursor: pointer; transition: box-shadow .25s; }
.aai-hero-more label:hover { box-shadow: inset 0 0 0 2px var(--a-royal); }
.aai-hero-more svg { width: 16px; height: 16px; }

/* Shared panel header (Describe / Check / Create) */
.aai-dash-hero.is-panel { background: transparent; }
.aai-panel-enter { animation: aai-rise .6s var(--a-ease) both; }
.aai-panel-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.aai-panel-head h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 900; letter-spacing: -.025em; }
.aai-panel-head p { margin-top: 4px; }
.aai-panel-head .aai-gen-ico { width: 42px; height: 42px; border-radius: 13px; }

/* =========================================================
   7. Describe
   ========================================================= */
.aai-brief-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 22px; align-items: start; }
.aai-brief-main, .aai-brief-side { display: grid; gap: 16px; }
.aai-compose { position: relative; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--a-line), var(--a-shadow); transition: box-shadow .3s; }
.aai-compose:focus-within { box-shadow: 0 0 0 2px var(--a-royal), 0 24px 50px -28px rgba(47, 123, 196, .55); }
.aai-compose-l { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 18px 22px 0; font: 800 17px var(--a-head); color: var(--a-ink); }
.aai-compose-l svg { width: 20px; height: 20px; color: var(--a-orange); }
.aai-compose-l span { flex-basis: 100%; font: 500 13px var(--a-body); color: var(--a-muted); }
.aai-compose textarea { display: block; width: 100%; min-height: 240px; padding: 14px 22px; border: 0; background: none; resize: vertical; font: 400 16.5px/1.7 var(--a-body); color: var(--a-ink); outline: none; }
.aai-compose textarea:focus, .aai-compose textarea:focus-visible { outline: none; box-shadow: none; }
.aai-compose textarea::placeholder { color: #a2a9bd; }
.aai-compose-foot { display: flex; align-items: center; gap: 12px; padding: 12px 18px 16px 22px; border-top: 1px solid var(--a-line); }
.aai-wmeter { flex: 1; height: 6px; border-radius: 6px; background: #edf1f9; overflow: hidden; }
.aai-wmeter i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #8fb0ff, var(--a-royal)); transition: width .4s var(--a-ease); }
.aai-wmeter.is-good i { background: linear-gradient(90deg, var(--a-royal), #22c55e); }
.aai-wmeter.is-over i { background: var(--a-red); }
.aai-wc { font: 700 12.5px var(--a-body); color: var(--a-muted); white-space: nowrap; }
.aai-wc.is-over { color: var(--a-red); }
.aai-brief-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; }
.aai-drop { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border: 1.5px dashed var(--a-line2); border-radius: 16px; background: #fff; color: var(--a-muted); cursor: pointer; transition: border-color .25s, background-color .25s; }
.aai-drop:hover, .aai-drop:focus-within { border-color: var(--a-royal); background: #f7f9ff; }
.aai-drop.has-files { border-style: solid; border-color: rgba(22, 163, 74, .45); background: #f3fbf6; }
.aai-drop > svg { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 9px; background: #eef3ff; color: var(--a-royal); }
.aai-drop span { display: grid; gap: 2px; min-width: 0; }
.aai-drop b { font: 700 14px var(--a-body); color: var(--a-ink2); }
.aai-drop em { font-style: normal; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aai-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.aai-brief-side { position: sticky; top: 140px; padding: 18px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--a-line), var(--a-shadow); }
.aai-gen-card { display: grid; gap: 6px; padding: 12px; border-radius: 16px; background: linear-gradient(170deg, #f8faff, #edf2fd); }
.aai-gen-card-art .fig { display: block; width: 100%; height: auto; border-radius: 12px; background: #fff; }
.aai-gen-card-art .aai-gen-ico { display: block; width: 100%; height: 120px; border-radius: 12px; }
.aai-gen-card b { margin-top: 6px; font: 800 16px var(--a-head); }
.aai-gen-card p { font-size: 13px; color: var(--a-muted); }
.aai-ai-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: linear-gradient(120deg, rgba(47, 123, 196, .07), rgba(240, 112, 31, .08)); font-size: 13.5px; color: var(--a-ink2); }
.aai-ai-note svg { flex: none; width: 20px; height: 20px; color: var(--a-orange); animation: aai-breath 2.6s ease-in-out infinite; }
.aai-go { min-height: 56px; font-size: 17px; }
.aai-pals { display: grid; gap: 6px; }
.aai-pal { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: #fff; border: 1.5px solid transparent; cursor: pointer; font-size: 13px; }
.aai-pal:has(input:checked) { border-color: var(--a-royal); }
.aai-pal i { width: 14px; height: 14px; border-radius: 4px; margin-right: 2px; display: inline-block; }
.aai-pal em { font-style: normal; color: var(--a-muted); }

/* Check the structures */
.aai-warn { padding: 12px 16px; border-radius: 14px; background: #fff7ed; box-shadow: inset 0 0 0 1px #fed7aa; margin-bottom: 14px; font-size: 14px; }
.aai-warn ul { margin: 6px 0 0 18px; list-style: disc; }
.aai-review { display: grid; gap: 12px; }
.aai-review h3 { margin-top: 10px; font-size: 17px; }
.aai-table-wrap { overflow-x: auto; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--a-line); }
.aai-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.aai-table th { text-align: left; padding: 10px 10px 8px; font: 700 11.5px var(--a-head); letter-spacing: .1em; text-transform: uppercase; color: var(--a-muted); background: var(--a-soft); }
.aai-table td { padding: 6px 8px; border-top: 1px solid var(--a-line); }
.aai-table input, .aai-table select { width: 100%; min-height: 38px; border: 1.5px solid var(--a-line2); border-radius: 10px; padding: 6px 10px; font: 500 14px var(--a-body); background: #fff; }
.aai-table input:focus, .aai-table select:focus { outline: none; border-color: var(--a-royal); }
.aai-x { width: 32px; height: 32px; border: 0; border-radius: 10px; background: var(--a-soft); color: var(--a-muted); font-size: 18px; cursor: pointer; }
.aai-x:hover { background: #fdecea; color: var(--a-red); }
.aai-panels-edit { display: grid; gap: 6px; }
.aai-panels-edit label { display: flex; gap: 8px; align-items: center; }
.aai-panels-edit input { flex: 1; min-height: 38px; border: 1.5px solid var(--a-line2); border-radius: 10px; padding: 6px 10px; font: inherit; }
.aai-review-go { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; padding: 16px 18px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--a-line); }

/* =========================================================
   8. Create (generation progress)
   ========================================================= */
.aai-gen-progress { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 34px; align-items: center; padding: 6px 0 4px; }
.aai-gp-art { position: relative; padding: 18px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px var(--a-line), 0 30px 60px -34px rgba(15, 42, 74, .55); isolation: isolate; }
.aai-gp-glow { position: absolute; inset: -30px; z-index: -1; border-radius: 50px; background: var(--a-grad); opacity: .22; filter: blur(34px); animation: aai-breath 3.4s ease-in-out infinite; }
.aai-gp-art .fig { display: block; width: 100%; height: auto; }
.aai-gp-art .aai-gen-ico { display: block; width: 100%; height: 220px; border-radius: 16px; }
.aai-gp-info { display: grid; gap: 16px; }
.aai-gp-info h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; }
.aai-progress { display: grid; gap: 8px; }
.aai-dstage { display: flex; justify-content: space-between; font: 700 13px var(--a-body); color: var(--a-ink2); }
.aai-dstage [data-p="pct"] { font-variant-numeric: tabular-nums; color: var(--a-royal); }
.aai-track { height: 10px; border-radius: 99px; background: #e8edf8; overflow: hidden; }
.aai-track i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--a-royal), #7c95ff, var(--a-orange), var(--a-royal)); background-size: 300% 100%; animation: aai-flowbg 2.4s linear infinite; transition: width .6s var(--a-ease); }
@keyframes aai-flowbg { to { background-position: -300% 0; } }
.aai-stagelist { display: grid; gap: 8px; }
.aai-stagelist li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--a-line); color: var(--a-faint); font: 600 14px var(--a-body); transition: all .45s var(--a-ease); }
.aai-stagelist li i { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--a-line2); }
.aai-stagelist li.is-on { color: var(--a-ink); box-shadow: 0 0 0 2px rgba(47, 123, 196, .35), 0 14px 26px -18px rgba(47, 123, 196, .7); transform: translateX(6px); }
.aai-stagelist li.is-on i { box-shadow: inset 0 0 0 2.5px var(--a-royal); border-top: 2.5px solid transparent; animation: aai-spin .9s linear infinite; }
.aai-stagelist li.is-on i { box-shadow: none; border: 2.5px solid #dbe4fb; border-top-color: var(--a-royal); }
.aai-stagelist li.is-done { color: var(--a-ink2); }
.aai-stagelist li.is-done i { background: var(--a-green); box-shadow: none; }
.aai-stagelist li.is-done i::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.aai-gp-tip { padding: 12px 14px; border-radius: 14px; background: #fff8ef; color: #8a4a06; font-size: 13.5px; font-weight: 600; }
.aai-gp-tip.is-in { animation: aai-rise .5s var(--a-ease); }
.aai-orb { display: none; }

/* =========================================================
   9. Figures list
   ========================================================= */
.aai-files-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 26px 28px 12px; border-top: 1px solid var(--a-line); }
.aai-files-head h3 { font: 800 21px var(--a-head); }
.aai-files-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aai-search { display: flex; align-items: center; gap: 8px; min-width: 240px; height: 40px; padding: 0 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--a-line2); color: var(--a-faint); transition: box-shadow .2s; }
.aai-search svg { width: 17px; height: 17px; }
.aai-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: 500 14px var(--a-body); color: var(--a-ink); }
.aai-search:focus-within { box-shadow: inset 0 0 0 2px var(--a-royal); }
.aai-files-tools select { height: 40px; padding: 0 12px; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--a-line2); background: #fff; font: 600 13.5px var(--a-body); color: var(--a-ink2); }
.aai-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--a-line2); }
.aai-seg button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--a-faint); cursor: pointer; }
.aai-seg button svg { width: 17px; height: 17px; }
.aai-seg button.is-on { background: var(--a-indigo); color: #fff; }
.aai-gen-filter:empty { display: none; }
.aai-files { padding: 8px 28px; }
.aai-files.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.aai-file { position: relative; display: grid; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--a-line), 0 12px 26px -22px rgba(15, 42, 74, .5); cursor: pointer; overflow: hidden; outline: none; animation: aai-rise .55s var(--a-ease) both; animation-delay: calc(var(--i, 0) * 45ms); transition: transform .4s var(--a-ease), box-shadow .4s var(--a-ease); }
.aai-file:hover, .aai-file:focus-visible { transform: translateY(-5px); box-shadow: 0 0 0 1px rgba(47, 123, 196, .3), 0 24px 40px -24px rgba(15, 42, 74, .6); }
.aai-file-thumb { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; background: #f3f6fc var(--a-dots, none); }
.aai-file-thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--a-ease); }
.aai-file:hover .aai-file-thumb img { transform: scale(1.04); }
.aai-file-gen { position: absolute; top: 10px; left: 10px; width: 24px; height: 24px; border-radius: 8px; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4); }
.aai-file-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; opacity: 0; transform: translateY(-6px); transition: opacity .3s var(--a-ease), transform .3s var(--a-ease); }
.aai-file:hover .aai-file-actions, .aai-file:focus-within .aai-file-actions { opacity: 1; transform: none; }
.aai-file-actions button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .92); color: var(--a-indigo); cursor: pointer; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .35); transition: transform .25s var(--a-ease), color .2s; }
.aai-file-actions button svg { width: 16px; height: 16px; }
.aai-file-actions button:hover { transform: translateY(-2px); }
.aai-file-actions button.is-danger:hover { color: var(--a-red); }
.aai-file-meta { display: grid; gap: 2px; padding: 12px 44px 14px 14px; }
.aai-file-meta b { font: 700 15px var(--a-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aai-file-meta span { font-size: 12.5px; color: var(--a-muted); }
.aai-file-more { position: absolute; right: 8px; bottom: 14px; width: 32px; height: 32px; border: 0; border-radius: 10px; background: none; color: var(--a-faint); font-size: 18px; cursor: pointer; }
.aai-file-more:hover { background: var(--a-soft); color: var(--a-indigo); }
.aai-file.is-opening { transform: scale(1.03); box-shadow: 0 0 0 3px rgba(240, 112, 31, .5), 0 24px 40px -18px rgba(15, 42, 74, .6); }
.aai-file.is-removing { transition: transform .26s ease-in, opacity .26s ease-in; transform: scale(.85); opacity: 0; }
.aai-file.is-drag { opacity: .5; transform: scale(.97) rotate(-1deg); }
.aai-files.is-list { display: grid; gap: 8px; }
.aai-files.is-list .aai-file { grid-template-columns: 110px 1fr; align-items: center; }
.aai-files.is-list .aai-file-more { top: 50%; bottom: auto; transform: translateY(-50%); }
.aai-files-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 8px; padding: 54px 20px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--a-line2); color: var(--a-muted); text-align: center; }
.aai-files-empty svg { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: #eef3ff; color: var(--a-royal); }
.aai-files-empty b { font: 800 17px var(--a-head); color: var(--a-ink); }

/* Menus, popovers, toasts */
.aai-menu { position: absolute; z-index: 99999; min-width: 220px; max-height: 60vh; overflow-y: auto; padding: 6px; border-radius: 16px; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 0 0 1px var(--a-line, #e3e8f4), 0 24px 50px -18px rgba(10, 20, 60, .5); font-family: Roboto, system-ui, sans-serif; animation: aai-pop-in .22s cubic-bezier(.16, 1, .3, 1); }
.aai-menu button { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: none; text-align: left; font: 600 14px Roboto, sans-serif; color: #1d2240; cursor: pointer; }
.aai-menu button:hover { background: #eef3ff; color: #1f568f; }
.aai-menu button.is-on { color: #1f568f; }
.aai-menu button.is-on::after { content: " ✓"; }
.aai-menu button.is-danger { color: #c8352b; }
.aai-menu hr { border: 0; border-top: 1px solid #e6ebf6; margin: 4px 0; }
.aai-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 260px; max-width: 360px; padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #e3e8f4, 0 24px 50px -20px rgba(10, 20, 60, .45); animation: aai-pop-in .22s cubic-bezier(.16, 1, .3, 1); }
.aai-pop-title { padding: 6px 10px; font: 700 12px Roboto, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #5d6273; }
.aai-pop-empty { display: grid; justify-items: center; gap: 6px; padding: 22px; color: #5d6273; }
.aai-notice { margin: 6px 0; padding: 12px 14px; border-radius: 14px; background: #f4f7fd; box-shadow: inset 3px 0 0 #2f7bc4; }
.aai-notice.is-warning { background: #fff6ef; box-shadow: inset 3px 0 0 #f0701f; }
.aai-notice.is-read { opacity: .7; }
.aai-notice b { display: block; font-size: 14px; }
.aai-notice p { margin: 2px 0 4px; font-size: 13px; color: #3c4257; }
.aai-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 99999; display: grid; gap: 8px; max-width: min(440px, calc(100vw - 40px)); font-family: Roboto, system-ui, sans-serif; }
.aai-toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; background: #1d2240; color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .45); animation: aai-toast-in .4s cubic-bezier(.16, 1, .3, 1); transition: opacity .35s, transform .35s; }
.aai-toast.is-ok { background: linear-gradient(110deg, #0f7a45, #16a34a); }
.aai-toast.is-err { background: linear-gradient(110deg, #9b2a21, #c8352b); }
.aai-toast.is-out { opacity: 0; transform: translateY(8px); }
.aai-toast button { margin-left: auto; border: 0; border-radius: 999px; padding: 5px 12px; background: rgba(255, 255, 255, .2); color: #fff; font-weight: 700; cursor: pointer; }

/* =========================================================
   10. Account
   ========================================================= */
.aai-acc-back { justify-self: start; margin: 20px 0 0 20px; }
.aai-account-page { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; align-items: start; padding: 0 20px 24px; }
.aai-acc-tabs { position: sticky; top: 90px; display: grid; gap: 4px; padding: 10px; border-radius: 20px; background: var(--a-grad-deep); }
.aai-acc-tabs button { padding: 11px 14px; border: 0; border-radius: 12px; background: none; color: rgba(255, 255, 255, .8); font: 700 14.5px var(--a-body); text-align: left; cursor: pointer; transition: background-color .2s, color .2s; }
.aai-acc-tabs button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.aai-acc-tabs button.is-on { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 3px 0 0 var(--a-orange); }
.aai-acc-pane { display: grid; gap: 18px; animation: aai-rise .5s var(--a-ease); }
.aai-acc-pane h3 { font: 900 26px var(--a-head); letter-spacing: -.02em; }
.aai-photo-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.aai-photo-row img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 0 0 6px #e1e9fd; }
.aai-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.aai-plan-card { position: relative; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 24px; border-radius: 20px; background: var(--a-grad); color: #fff; overflow: hidden; }
.aai-plan-card .aai-eyebrow { display: inline-flex; align-items: center; width: fit-content; padding: 5px 12px; border-radius: 999px; color: #ffc46b; background: rgba(15, 42, 74, .28); box-shadow: inset 0 0 0 1px rgba(255, 196, 107, .45); }
.aai-plan-card .aai-eyebrow::before { background: #ffc46b; }
.aai-plan-card b { display: block; font: 900 26px var(--a-head); }
.aai-plan-card p { opacity: .85; }
.aai-plan-usage { min-width: 230px; }
.aai-plan-usage b { display: inline; font-size: 32px; }
.aai-plan-usage i { display: block; height: 8px; margin-top: 8px; border-radius: 9px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.aai-plan-usage em { display: block; height: 100%; background: var(--a-warm); }
.aai-plan-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.aai-plan-opt { position: relative; display: grid; gap: 8px; padding: 20px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--a-line); }
.aai-plan-opt.is-best { box-shadow: 0 0 0 2px var(--a-orange), 0 16px 30px -18px rgba(232, 93, 26, .6); }
.aai-plan-opt b { font: 900 28px var(--a-head); color: var(--a-indigo); }
.aai-plan-opt small { font-size: 14px; color: var(--a-muted); font-weight: 600; }
.aai-save { position: absolute; top: -11px; right: 14px; padding: 4px 10px; border-radius: 99px; background: var(--a-warm); color: #fff; font: 700 11.5px var(--a-body); font-style: normal; }
.aai-loading { display: grid; place-items: center; min-height: 200px; color: var(--a-muted); }

/* =========================================================
   11. Editor (Refine & export)
   ========================================================= */
.aai-editor { display: grid; grid-template-rows: auto 1fr; height: min(88vh, 940px); min-height: 580px; border-radius: 22px; background: #fff; overflow: hidden; color: var(--a-ink); font-size: 14px; animation: aai-rise .5s var(--a-ease); }
.aai-editor.is-full { position: fixed; inset: 0; z-index: 99990; height: 100vh; border-radius: 0; }
html.aai-fullscreen-on { overflow: hidden; }
.aai-ed-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--a-grad-deep); color: #fff; }
.aai-ed-top .aai-icon-btn { color: #fff; }
.aai-ed-top .aai-icon-btn:hover { background: rgba(255, 255, 255, .14); }
.aai-ed-title { min-width: 120px; max-width: 320px; flex: 0 1 300px; padding: 7px 10px; border: 1.5px solid transparent; border-radius: 10px; background: transparent; color: #fff; font: 800 16px var(--a-head); }
.aai-ed-title:hover, .aai-ed-title:focus { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); outline: none; }
.aai-ed-gen { padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .9); font: 700 12px var(--a-body); white-space: nowrap; }
.aai-ed-status { font-size: 12px; color: rgba(255, 255, 255, .65); white-space: nowrap; }
.aai-ed-sp { flex: 1; }
.aai-ed-top .aai-flow.is-compact li { color: rgba(255, 255, 255, .6); }
.aai-ed-top .aai-flow.is-compact li b { background: rgba(255, 255, 255, .14); box-shadow: none; color: #fff; }
.aai-ed-top .aai-flow.is-compact li.is-done b { background: rgba(255, 255, 255, .9); color: var(--a-indigo); }
.aai-ed-top .aai-flow.is-compact li.is-on { color: #fff; }
.aai-ed-top .aai-flow.is-compact li.is-on b { background: var(--a-warm); }
.aai-icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--a-ink); cursor: pointer; transition: background-color .2s, transform .25s var(--a-ease); }
.aai-icon-btn:hover { background: var(--a-soft); }
.aai-icon-btn:active { transform: scale(.92); }
.aai-zoom { display: inline-flex; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.aai-zoom button { height: 34px; padding: 0 11px; border: 0; background: none; color: #fff; font: 700 13px var(--a-body); cursor: pointer; }
.aai-zoom button:hover { background: rgba(255, 255, 255, .14); }
.aai-ed-top .aai-btn-primary { min-height: 38px; }
.aai-ed-body { display: grid; grid-template-columns: 64px minmax(0, 1fr) 340px; min-height: 0; }
.aai-tools { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 10px 8px; background: #fff; border-right: 1px solid var(--a-line); overflow-y: auto; }
.aai-tools button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 13px; background: transparent; color: var(--a-ink2); cursor: pointer; transition: background-color .2s, color .2s, transform .25s var(--a-ease); }
.aai-tools button:hover { background: var(--a-soft); color: var(--a-royal); }
.aai-tools button.is-on { background: var(--a-indigo); color: #fff; box-shadow: 0 10px 20px -10px rgba(0, 47, 135, .8); }
.aai-tools button[data-tool="fixtext"] { color: var(--a-flame); }
.aai-tools button[data-tool="fixtext"].is-on { background: var(--a-warm); color: #fff; }
.aai-tool-sep { display: block; width: 26px; height: 1px; margin: 4px 0; background: var(--a-line); }
.aai-stagewrap { position: relative; display: grid; min-width: 0; min-height: 0; }
.aai-viewport { min-height: 0; overflow: auto; background: #eef2fa radial-gradient(rgba(165, 183, 210, .55) 1.2px, transparent 1.5px); background-size: 20px 20px; }
.aai-viewport.is-space, .aai-editor[data-tool="hand"] .aai-viewport { cursor: grab; }
.aai-viewport.is-panning { cursor: grabbing; }
.aai-pad { position: relative; display: inline-block; min-width: 100%; }
.aai-canvas { display: block; max-width: none !important; background: #fff; box-shadow: 0 24px 50px -26px rgba(15, 42, 74, .45); overflow: visible; user-select: none; }
.aai-editor[data-tool="text"] .aai-canvas { cursor: text; }
.aai-editor:not([data-tool="select"]):not([data-tool="hand"]):not([data-tool="text"]) .aai-canvas { cursor: crosshair; }
.aai-canvas [data-id] { cursor: move; }
.aai-canvas .is-locked { cursor: default; }
.aai-selbox { fill: none; stroke: #2f7bc4; stroke-dasharray: 3 2; pointer-events: none; }
.aai-handle { fill: #fff; stroke: #2f7bc4; cursor: pointer; }
.aai-guide { stroke: #ff3d8b; pointer-events: none; }
.aai-marquee { fill: rgba(47, 123, 196, .08); stroke: #2f7bc4; pointer-events: none; }
.aai-flag { fill: none; stroke: #f0701f; pointer-events: none; }
.aai-region { fill: rgba(200, 53, 43, .12); stroke: #c8352b; pointer-events: none; }
.aai-fixsel { fill: rgba(240, 112, 31, .14); stroke: #e85d1a; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.aai-inline-edit { position: absolute; z-index: 5; box-sizing: border-box; margin: 0; padding: 0; border: 0; border-radius: 2px; font-family: Arial, Helvetica, sans-serif; background: transparent; resize: none; overflow: hidden; white-space: pre-wrap; word-break: normal; box-shadow: none; outline: 1.5px dashed rgba(47, 123, 196, .7); outline-offset: 3px; caret-color: #2f7bc4; }
.aai-inline-edit::selection { background: rgba(47, 122, 229, .28); }
.aai-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 7px 14px; border-radius: 99px; background: rgba(15, 42, 74, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 12.5px; font-weight: 600; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aai-hint:empty { display: none; }
.aai-side { display: grid; grid-template-rows: auto 1fr; min-height: 0; border-left: 1px solid var(--a-line); background: #fbfcff; }
.aai-tabs { display: flex; gap: 4px; margin: 10px 12px 0; padding: 4px; border-radius: 999px; background: #edf1fa; }
.aai-tabs button { flex: 1; min-height: 36px; border: 0; border-radius: 999px; background: none; color: var(--a-muted); font: 700 13px var(--a-body); cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s; }
.aai-tabs button.is-on { background: #fff; color: var(--a-indigo); box-shadow: 0 6px 14px -8px rgba(15, 42, 74, .5); }
.aai-side-body { min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 16px 20px; }
.aai-pgroup { display: grid; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--a-line); }
.aai-pgroup:last-child { border-bottom: 0; }
.aai-pgroup h4 { font: 700 12px var(--a-head); letter-spacing: .12em; text-transform: uppercase; color: var(--a-muted); }
.aai-pgroup > summary { list-style: none; cursor: pointer; font: 700 12px var(--a-head); letter-spacing: .12em; text-transform: uppercase; color: var(--a-muted); display: flex; justify-content: space-between; }
.aai-pgroup > summary::-webkit-details-marker { display: none; }
.aai-pgroup > summary::after { content: "+"; font-size: 16px; color: var(--a-royal); }
.aai-pgroup[open] > summary::after { content: "–"; }
.aai-pgroup-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.aai-pf { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 13px; }
.aai-pf > span { color: var(--a-muted); font-weight: 600; }
.aai-pf-wide { grid-template-columns: 1fr; }
.aai-pf input, .aai-pf select, .aai-pf textarea { width: 100%; min-height: 36px; padding: 6px 10px; border: 1.5px solid var(--a-line2); border-radius: 10px; background: #fff; color: var(--a-ink); font: 500 13.5px var(--a-body); }
.aai-pf input:focus, .aai-pf select:focus, .aai-pf textarea:focus { outline: none; border-color: var(--a-royal); }
.aai-pf textarea { font-family: Arial, Helvetica, sans-serif; resize: vertical; }
.aai-pf input[type=color] { height: 36px; padding: 3px; }
.aai-chars { display: flex; flex-wrap: wrap; gap: 4px; }
.aai-chars button { min-width: 30px; height: 30px; border: 1px solid var(--a-line2); border-radius: 8px; background: #fff; cursor: pointer; font: 14px Arial, sans-serif; }
.aai-chars button:hover { border-color: var(--a-royal); color: var(--a-royal); }
.aai-pbtns, .aai-align { display: flex; flex-wrap: wrap; gap: 6px; }
.aai-pbtns button, .aai-align button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--a-line2); color: var(--a-ink2); font: 700 12.5px var(--a-body); cursor: pointer; transition: box-shadow .2s, color .2s; }
.aai-pbtns button:hover, .aai-align button:hover { box-shadow: inset 0 0 0 2px var(--a-royal); color: var(--a-royal); }
.aai-pbtns .is-danger { color: var(--a-red); }
.aai-sizes, .aai-align-all { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.aai-sizes button, .aai-align-all button { min-width: 34px; padding: 5px 9px; border: 0; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--a-line2); cursor: pointer; font: 700 12px var(--a-body); color: var(--a-ink2); }
.aai-sizes button.is-on, .aai-sizes button:hover, .aai-align-all button:hover { box-shadow: inset 0 0 0 2px var(--a-royal); color: var(--a-royal); }
.aai-note-flag { margin: 0; padding: 9px 12px; border-radius: 12px; background: #fff4eb; color: #9a4a0b; font-size: 12.5px; }
.aai-keys { line-height: 1.8; }
.aai-label-list { display: grid; gap: 4px; max-height: 240px; overflow-y: auto; }
.aai-label-list button { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 11px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--a-line); cursor: pointer; text-align: left; font: 600 13px var(--a-body); color: var(--a-ink); transition: box-shadow .2s; }
.aai-label-list button:hover { box-shadow: inset 0 0 0 1.5px rgba(47, 123, 196, .45); }
.aai-label-list button.is-flag { box-shadow: inset 3px 0 0 var(--a-orange), inset 0 0 0 1px var(--a-line); }
.aai-label-list span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aai-label-list em { flex: 0 0 auto; font-style: normal; font-size: 11.5px; color: var(--a-faint); white-space: nowrap; }
.aai-read-list { display: grid; gap: 5px; max-height: 280px; overflow: auto; }
.aai-read-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--a-line); font-size: 13.5px; font-weight: 600; transition: all .3s var(--a-ease); }
.aai-read-list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aai-read-list li em { font-style: normal; color: var(--a-green); font-weight: 700; }
.aai-read-list li.is-wrong { background: #fff6ef; box-shadow: inset 3px 0 0 var(--a-flame), inset 0 0 0 1px #ffd2b5; }
.aai-read-list li.is-wrong span { color: #b4410b; }
.aai-read-list li.is-fixed { opacity: .6; }
.aai-read-list button { flex: none; min-height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: #eef3ff; color: var(--a-indigo); font: 700 12px var(--a-body); cursor: pointer; }
.aai-read-list li.is-wrong button { background: var(--a-warm); color: #fff; box-shadow: 0 6px 14px -8px rgba(232, 93, 26, .8); }
.aai-res { display: grid; gap: 4px; padding: 11px 13px; border-radius: 12px; font-size: 13px; }
.aai-res.is-ok { background: #ecf9f2; color: #0d6b3d; } .aai-res.is-mid { background: #fff8eb; color: #8a5a07; } .aai-res.is-bad { background: #fdeeec; color: #8a1f17; }
.aai-dims { margin: 0; font: 800 16px var(--a-head); }
.aai-xprog { height: 6px; border-radius: 99px; background: var(--a-soft); overflow: hidden; }
.aai-xprog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--a-royal), var(--a-orange)); transition: width .3s; }
.aai-issues { display: grid; gap: 6px; }
.aai-issues li { position: relative; padding: 9px 11px 9px 30px; border-radius: 10px; background: var(--a-soft); font-size: 13px; }
.aai-issues li::before { content: ""; position: absolute; left: 11px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; }
.aai-issues li.is-error::before { background: var(--a-red); } .aai-issues li.is-warning::before { background: #f59e0b; } .aai-issues li.is-info::before { background: var(--a-royal); }
.aai-vlist { display: grid; gap: 8px; }
.aai-vlist li { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--a-line); font-size: 13px; }
.aai-vlist img { width: 64px; height: 48px; object-fit: contain; border-radius: 8px; background: var(--a-soft); }
.aai-vlist li > div { flex: 1; }
.aai-vlist em { font-style: normal; font-size: 12px; color: var(--a-green); font-weight: 700; }
.aai-vlist button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: #eef3ff; color: var(--a-indigo); cursor: pointer; font: 700 12px var(--a-body); }
.aai-layer { padding: 10px 0; border-bottom: 1px solid var(--a-line); }
.aai-layer-head { display: flex; align-items: center; gap: 6px; }
.aai-layer-head b { flex: 1; }
.aai-layer ul { display: grid; gap: 2px; margin-top: 6px; }
.aai-layer li { display: flex; align-items: center; gap: 2px; border-radius: 8px; }
.aai-layer li.is-sel { background: #e9f0ff; }
.aai-li-name { flex: 1; padding: 6px 8px; border: 0; background: none; text-align: left; font: 13px var(--a-body); color: var(--a-ink); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aai-li-name em { font-style: normal; font-size: 11px; color: var(--a-muted); }
.aai-li-name .aai-flagtxt { color: #d9600b; }

/* =========================================================
   12. Motion
   ========================================================= */
@keyframes aai-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes aai-pop-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes aai-toast-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes aai-spin { to { transform: rotate(360deg); } }
@keyframes aai-breath { 50% { transform: scale(1.1); opacity: .85; } }
@keyframes aai-float { 50% { transform: translate(30px, -30px); } }
@keyframes aai-glow { 0% { box-shadow: 0 0 0 0 rgba(240, 112, 31, .55); } 100% { box-shadow: 0 0 0 16px rgba(240, 112, 31, 0); } }
.aai-btn, .aai-chip, .aai-side-nav button, .aai-seg button, .aai-pbtns button, .aai-mini-btn, .aai-tools button, .aai-icon-btn { -webkit-tap-highlight-color: transparent; }

/* =========================================================
   13. Responsive
   ========================================================= */
@media (max-width: 1240px) {
	.aai-hero-gens { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.aai-ed-top .aai-flow.is-compact { display: none; }
}
@media (max-width: 1100px) {
	.aai-dash { grid-template-columns: 1fr; }
	.aai-dash-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px; }
	.aai-dash-side .aai-side-h { display: none; }
	.aai-create { width: auto; }
	.aai-side-nav { display: flex; flex-wrap: wrap; gap: 4px; }
	.aai-side-nav button { width: auto; }
	.aai-side-add { margin-top: 0; }
	.aai-brief-grid, .aai-gen-progress { grid-template-columns: 1fr; }
	.aai-brief-side { position: static; }
	.aai-ed-body { grid-template-columns: 60px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
	.aai-side { grid-column: 1 / -1; max-height: 46vh; border-left: 0; border-top: 1px solid var(--a-line); }
	.aai-editor { height: auto; min-height: 0; }
	.aai-stagewrap { height: 58vh; }
	.aai-account-page { grid-template-columns: 1fr; }
	.aai-acc-tabs { position: static; grid-auto-flow: column; overflow-x: auto; }
}
@media (max-width: 720px) {
	.aai-flowbar { top: 0; padding: 12px 14px; }
	.aai-flow li span { display: none; }
	.aai-flow li.is-on span { display: inline; position: absolute; top: 34px; font-size: 11.5px; background: none; }
	.aai-flowbar { padding-bottom: 26px; }
	.aai-hero-gens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.aai-brief-row, .aai-form-grid { grid-template-columns: 1fr; }
	.aai-dash-hero, .aai-files, .aai-files-head { padding-left: 16px; padding-right: 16px; }
	.aai-search { min-width: 0; flex: 1; }
	.aai-ed-gen, .aai-ed-status { display: none; }
	.aai-ed-body { grid-template-columns: 1fr; }
	.aai-tools { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: center; border-right: 0; border-bottom: 1px solid var(--a-line); }
	.aai-tool-sep { width: 1px; height: 26px; margin: 0 4px; }
}
@media (max-width: 460px) {
	.aai-hero-gens { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.aai *, .aai *::before, .aai *::after { animation: none !important; transition: none !important; }
}


/* ===== v2: Review panel, evidence levels, Rights to Publish dialog ===== */
.aai-table tr.is-uncertain td { background: #fdf1ed; }
.aai-table tr.is-uncertain select[data-k="certainty"] { color: #b44a35; font-weight: 700; }
.aai-rv-in { width: 100%; box-sizing: border-box; margin: 6px 0 8px; padding: 9px 11px; border: 1.5px solid #dfe4f2; border-radius: 10px; font: inherit; font-size: 14px; resize: vertical; }
.aai-rv-in:focus { outline: none; border-color: #2e9c94; box-shadow: 0 0 0 3px rgba(46, 156, 148, .15); }
.aai-rv-result { margin-top: 12px; padding: 12px; border-radius: 12px; background: #f5faf9; box-shadow: inset 0 0 0 1px #d6ece8; }
.aai-ops { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.aai-ops label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; font-size: 13.5px; line-height: 1.4; }
.aai-ops small { display: block; color: #6b7395; font-size: 12px; }
.aai-ops li.is-done { opacity: .55; text-decoration: line-through; }
.aai-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; background: #fdeee8; color: #b44a35; font: 700 10.5px/1.6 inherit; font-style: normal; text-transform: uppercase; letter-spacing: .05em; }
.aai-proof li { display: grid; gap: 4px; }
.aai-proof li.is-done { opacity: .6; }
.aai-cat { justify-self: start; padding: 1px 8px; border-radius: 999px; background: #e9ebf7; color: #3e4992; font: 700 10.5px/1.7 inherit; text-transform: uppercase; letter-spacing: .06em; }
.aai-proof .aai-pbtns { margin-top: 2px; }
.aai-okmark { color: #1f7f79; font-size: 12.5px; }
.aai-wf { margin: 4px 0 0; padding-left: 20px; font-size: 13px; color: #6b7395; display: grid; gap: 2px; }
.aai-wf li.is-done { color: #1f7f79; font-weight: 700; }
.aai-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 22, 48, .55); backdrop-filter: blur(4px); }
.aai-modal-card { width: min(720px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 20px; padding: 22px 24px; box-shadow: 0 40px 90px -30px rgba(12, 10, 60, .6); }
.aai-modal-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.aai-modal-head h3 { margin: 4px 0 6px; font-size: 22px; }
.aai-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.aai-modal-grid .aai-pf-wide { grid-column: 1 / -1; }
.aai-modal-grid input, .aai-modal-grid select { width: 100%; box-sizing: border-box; }
.aai-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
@media (max-width: 640px) { .aai-modal-grid { grid-template-columns: 1fr; } }

.aai-rv-result .aai-pbtns [data-apply-ops] { background: linear-gradient(110deg, #e85d1a, #f0701f); color: #fff; border: 0; }
.aai-rv-result .aai-pbtns [data-apply-ops]:disabled { opacity: .6; }


/* ===== Themed dialogs (replace the browser's confirm/prompt) ===== */
.aai-dlg { opacity: 0; transition: opacity .2s ease; }
.aai-dlg.is-in { opacity: 1; }
.aai-dlg .aai-dlg-card { width: min(440px, 100%); padding: 26px 26px 20px; border-radius: 22px; transform: translateY(12px) scale(.97); transition: transform .26s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 40px 90px -30px rgba(15, 42, 74, .55), 0 0 0 1px rgba(47, 122, 229, .08); }
.aai-dlg.is-in .aai-dlg-card { transform: none; }
.aai-dlg-ico { width: 46px; height: 46px; margin-bottom: 14px; border-radius: 14px; display: grid; place-items: center; color: #23609f; background: linear-gradient(135deg, #e7ecfd, #efe9fe); }
.aai-dlg-ico svg { width: 22px; height: 22px; }
.aai-dlg.is-danger .aai-dlg-ico { color: #d6453d; background: linear-gradient(135deg, #fdecea, #fde4e0); }
.aai-dlg-card h3 { margin: 0 0 6px; font: 800 20px/1.25 Roboto, system-ui, sans-serif; color: #1b1f3b; letter-spacing: -.01em; }
.aai-dlg-card p { margin: 0; font-size: 15px; line-height: 1.55; color: #5d6273; }
.aai-dlg-l { display: grid; gap: 6px; margin-top: 16px; }
.aai-dlg-l span { font: 700 12px/1 Roboto, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #6b7395; }
.aai-dlg-in { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1.5px solid #dfe4f2; border-radius: 12px; font: 500 15px Roboto, system-ui, sans-serif; color: #1b1f3b; background: #fbfcff; transition: border-color .15s, box-shadow .15s; }
.aai-dlg-in:focus { outline: none; border-color: #4a8fd2; box-shadow: 0 0 0 4px rgba(47, 122, 229, .14); background: #fff; }
.aai-dlg-in.is-bad { border-color: #e5484d; box-shadow: 0 0 0 4px rgba(229, 72, 77, .12); }
.aai-dlg-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.aai-dlg .aai-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 10px 20px; border: 0; border-radius: 999px; font: 700 14px/1 Roboto, system-ui, sans-serif; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s; }
.aai-dlg .aai-btn:hover { transform: translateY(-1px); }
.aai-dlg .aai-btn:focus-visible { outline: 3px solid rgba(47, 122, 229, .35); outline-offset: 2px; }
.aai-dlg [data-dlg="1"] { color: #fff; background: linear-gradient(110deg, #e85d1a, #f0701f); box-shadow: 0 10px 22px -10px rgba(232, 93, 26, .8); }
.aai-dlg [data-dlg="0"] { color: #3b3f5c; background: #f1f3fb; }
.aai-dlg [data-dlg="0"]:hover { background: #e7eaf7; }
.aai-dlg.is-danger [data-dlg="1"] { background: linear-gradient(110deg, #e5484d, #c9362f); box-shadow: 0 10px 22px -10px rgba(201, 54, 47, .8); }
@media (max-width: 480px) { .aai-dlg-foot { flex-direction: column-reverse; } .aai-dlg-foot .aai-btn { width: 100%; } }


/* ===== European blue (light) + Roboto ===== */
.aai-btn-primary, .aai-btn-accent { color: #fff !important; box-shadow: 0 12px 26px -12px rgba(232, 93, 26, .65); }
.aai-rv-result .aai-pbtns [data-apply-ops], .aai-dlg [data-dlg="1"] { color: #fff; }
.aai-dlg.is-danger [data-dlg="1"] { color: #fff; }

/* ===== Figure ready: full-size animated hand-over from generation to the editor ===== */
.aai-opening { position: relative; display: grid; justify-items: center; align-content: center; gap: 14px; min-height: min(620px, 78vh); padding: 48px 24px; border-radius: 26px; text-align: center; overflow: hidden; background: radial-gradient(circle at 50% -10%, rgba(111, 208, 255, .28), transparent 55%), linear-gradient(180deg, #ffffff, #f3f7ff); box-shadow: var(--a-shadow), inset 0 0 0 1px var(--a-line); animation: opIn .55s var(--a-ease) both; }
.aai-opening::before { content: ""; position: absolute; inset: -40% -10% auto; height: 70%; background: radial-gradient(closest-side, rgba(47, 123, 196, .10), transparent); animation: opFloat 6s ease-in-out infinite; pointer-events: none; }
.aai-op-logo { width: min(200px, 46%); }
.aai-op-logo .lg-svg { width: 100%; height: auto; }
.aai-op-logo .ai-tr, .aai-op-logo .ai-smile { animation-duration: 2.6s; }
.aai-op-logo .ai-node, .aai-op-logo .ai-glow, .aai-op-logo .ai-ends circle { animation-duration: 1s; }
.aai-op-canvas { position: relative; width: min(560px, 92%); aspect-ratio: 16 / 9; margin-top: 6px; border-radius: 18px; overflow: hidden; background: #f6f9ff; box-shadow: inset 0 0 0 1px #dfe8f8, 0 24px 50px -30px rgba(15, 42, 74, .5); }
.aai-op-canvas i { position: absolute; display: block; background: linear-gradient(90deg, #e3ecfb, #edf3fd); border-radius: 12px; opacity: 0; animation: opBlock .6s var(--a-ease) forwards, opPulse 1.6s ease-in-out infinite; }
.aai-op-canvas .b1 { left: 7%; top: 18%; width: 30%; height: 58%; border-radius: 50%; animation-delay: .15s, .8s; }
.aai-op-canvas .b2 { left: 44%; top: 22%; width: 18%; height: 30%; border-radius: 50%; animation-delay: .3s, .95s; }
.aai-op-canvas .b3 { left: 68%; top: 20%; width: 24%; height: 40%; animation-delay: .45s, 1.1s; }
.aai-op-canvas .b4 { left: 44%; top: 64%; width: 48%; height: 7%; animation-delay: .6s, 1.25s; }
.aai-op-canvas .b5 { left: 44%; top: 76%; width: 30%; height: 7%; animation-delay: .7s, 1.35s; }
.aai-op-canvas .b6 { left: 36%; top: 44%; width: 10%; height: 3%; animation-delay: .8s, 1.45s; }
.aai-op-canvas .sheen { inset: 0; width: auto; height: auto; border-radius: 0; opacity: 1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .85) 50%, transparent 65%); transform: translateX(-100%); animation: opSheen 1.8s ease-in-out .6s infinite; }
.aai-op-check { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 50%; background: #16a34a; opacity: 0; transform: scale(.4); animation: opPop .5s var(--a-spring) 1s forwards; }
.aai-op-check::after { content: ""; position: absolute; left: 12px; top: 8px; width: 8px; height: 14px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.aai-opening h3 { margin: 6px 0 0; font: 800 26px/1.2 var(--a-head); color: var(--a-ink); letter-spacing: -.01em; }
.aai-opening p { margin: 0; color: var(--a-muted); font-size: 15px; }
.aai-op-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.aai-op-steps li { padding: 6px 12px; border-radius: 999px; background: #eef4ff; color: var(--a-royal); font: 700 12.5px var(--a-body); opacity: 0; animation: opIn .4s var(--a-ease) forwards; }
.aai-op-steps li:nth-child(1) { animation-delay: .4s; } .aai-op-steps li:nth-child(2) { animation-delay: .7s; } .aai-op-steps li:nth-child(3) { animation-delay: 1s; }
.aai-op-bar { width: min(320px, 70%); height: 6px; border-radius: 6px; background: #e6edf9; overflow: hidden; }
.aai-op-bar b { display: block; width: 40%; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #f0701f, #e85d1a); animation: opBar 1.3s ease-in-out infinite; }
@keyframes opIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes opBlock { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes opPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.04); } }
@keyframes opSheen { to { transform: translateX(100%); } }
@keyframes opPop { to { opacity: 1; transform: scale(1); } }
@keyframes opBar { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@keyframes opFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { .aai-opening, .aai-opening * { animation: none !important; opacity: 1 !important; transform: none !important; } }

/* Required profile fields */
.aai-req { color: #d93025; font-weight: 700; margin-left: 2px; }

/* Figure cards: no empty generator badge; action icons turn orange on hover */
.aai-file-gen { display: none !important; }
.aai-file-actions button:hover, .aai-file-actions button:focus-visible, .aai-file-actions button.is-danger:hover { background: #f0701f; color: #fff; }
.aai-file-more:hover, .aai-file-more:focus-visible { background: #fff1e3; color: #e85d1a; }

/* Folder reordering: drag a folder row, or use Move up / Move down in its menu */
.aai-folder-row { position: relative; }
.aai-folder-row[draggable="true"] { cursor: grab; }
.aai-folder-grip { position: absolute; left: -12px; top: 50%; width: 8px; height: 14px; transform: translateY(-50%); opacity: 0; pointer-events: none; background-image: radial-gradient(circle, currentColor 1.1px, transparent 1.5px); background-size: 4px 4.6px; color: inherit; transition: opacity .2s; }
.aai-folder-row:hover .aai-folder-grip, .aai-folder-row:focus-within .aai-folder-grip { opacity: .6; }
.aai-folder-row.is-dragging { opacity: .4; cursor: grabbing; }
.aai-folder-row.is-drop-before { box-shadow: inset 0 2px 0 #e85d1a; }
.aai-folder-row.is-drop-after { box-shadow: inset 0 -2px 0 #e85d1a; }

/* Clear orange: solid accent buttons with a defined shadow */
.aai { --a-orange: #f0701f; --a-flame: #e85d1a; --a-warm: linear-gradient(180deg, #e8641c, #e85d1a); }
.aai-btn-primary, .aai-btn-accent { box-shadow: 0 10px 22px -10px rgba(170, 60, 0, .55) !important; text-shadow: 0 1px 1px rgba(110, 35, 0, .3); }
.aai-btn-primary:hover, .aai-btn-accent:hover { background: #e85d1a; }
.aai-rv-result .aai-pbtns [data-apply-ops] { background: #e8641c; }

/* Folder PIN: lock badge and PIN tools in the sidebar */
.aai-lock { display: inline-grid; place-items: center; margin-left: 6px; color: #ffb066; }
.aai-pin-tools { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .14); }
.aai-pin-tools button { display: flex; align-items: center; gap: 7px; padding: 7px 11px; border: 0; border-radius: 10px; background: none; color: rgba(255, 255, 255, .82); font: 600 12.5px/1.2 inherit; text-align: left; cursor: pointer; }
.aai-pin-tools button:hover, .aai-pin-tools button:focus-visible { background: rgba(255, 255, 255, .1); color: #fff; }

/* Sidebar groups: automatic generator folders vs folders the member creates */
.aai-side-sub { display: flex; align-items: baseline; gap: 6px; margin: 16px 11px 5px; font: 700 10.5px/1.2 var(--a-head, inherit); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.aai-side-sub small { font: 600 10px/1 inherit; letter-spacing: .02em; text-transform: none; color: rgba(255, 255, 255, .45); }
.aai-side-sub + .aai-folder-row, .aai-side-sub + .aai-side-empty { margin-top: 0; }
.aai-folder-row:not(.is-auto) + .aai-side-sub, .aai-side-empty + .aai-side-sub { margin-top: 14px; }
.aai-side-nav .aai-side-sub:nth-of-type(2) { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .14); }
.aai-side-empty { margin: 2px 11px 8px; font-size: 12px; color: rgba(255, 255, 255, .55); }

/* Tips strip above the studio steps */
.aai-tipbar { position: sticky; top: 64px; z-index: 6; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 28px; background: rgba(246, 249, 255, .97); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(47, 123, 196, .08); font: 500 13.5px/1.35 var(--a-body, inherit); color: #1d2240; }
.admin-bar .aai-tipbar { top: 96px; }
.aai-tipbar ~ .aai-flowbar { top: 104px; }
.admin-bar .aai-tipbar ~ .aai-flowbar { top: 136px; }
.aai-tip-badge { flex: none; padding: 3px 9px; border-radius: 999px; background: #e8641c; color: #fff; font: 700 11px/1.2 var(--a-head, inherit); letter-spacing: .06em; text-transform: uppercase; }
[data-tipline] { min-width: 0; transition: opacity .35s; }
[data-tipline].is-fade { opacity: 0; }
@media (max-width: 720px) { .aai-tipbar { position: static; padding: 8px 14px; font-size: 12.5px; } .aai-tipbar ~ .aai-flowbar { top: 0; } }

/* Sharing by email */
.aai-share-card { max-width: 520px; text-align: left; }
.aai-share-card > p { text-align: left; }
.aai-share-form textarea.aai-dlg-in { resize: vertical; min-height: 60px; font: inherit; }
.aai-share-list { margin-top: 16px; padding-top: 12px; border-top: 1px solid #e3e8f4; max-height: 220px; overflow: auto; }
.aai-share-h { margin-bottom: 6px; font: 700 11px/1.2 var(--a-head, inherit); letter-spacing: .12em; text-transform: uppercase; color: #5d6273; }
.aai-share-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #eef1f8; }
.aai-share-row span { display: flex; flex-direction: column; min-width: 0; }
.aai-share-row b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.aai-share-row em { font-size: 12px; font-style: normal; color: #5d6273; }
.aai-shared-tag { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: #2f7bc4; color: #fff; font: 700 11px/1 var(--a-body, inherit); }
.aai-sv-card { display: flex; flex-direction: column; width: min(1200px, 94vw); max-width: none; max-height: 92vh; padding: 18px 20px; text-align: left; }
.aai-sv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.aai-sv-head h3 { margin: 0; }
.aai-sv-x { width: 36px; height: 36px; border: 0; border-radius: 10px; background: #f1f5fd; color: #1d2240; font-size: 22px; cursor: pointer; }
.aai-sv-x:hover { background: #f0701f; color: #fff; }
.aai-sv-body { display: grid; flex: 1; place-items: center; min-height: 240px; overflow: auto; border-radius: 12px; background: #f6f9ff; }
.aai-sv-img { display: block; max-width: 100%; height: auto; background: #fff; box-shadow: 0 10px 30px -18px rgba(0, 30, 90, .4); }
.aai-sv-note { margin-top: 10px; font-style: italic; }

/* Dialogs live outside .aai, so primary buttons get explicit colours */
.aai-dlg .aai-btn-primary { background: #e8641c; color: #fff !important; box-shadow: 0 10px 22px -10px rgba(170, 60, 0, .55); }
.aai-dlg .aai-btn-primary:hover { background: #e85d1a; }
.aai-dlg .aai-btn-primary:disabled { opacity: .6; cursor: default; }

/* Limited offer on the studio price card */
.aai-was { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 2px; }
.aai-was s { font-weight: 700; font-size: 17px; color: #8a90a6; text-decoration-color: #e85d1a; text-decoration-thickness: 2px; }
.aai-was em { padding: 3px 9px; border-radius: 999px; background: #e85d1a; color: #fff; font-size: 11.5px; font-weight: 700; font-style: normal; }

/* The studio frame clips its content, so the bars cannot stick to the window: keep them at the top in normal flow */
.aai-tipbar, .admin-bar .aai-tipbar { top: 0; padding: 14px 28px; border-bottom: 1px solid rgba(47, 123, 196, .1); }
.aai-tipbar ~ .aai-flowbar, .admin-bar .aai-tipbar ~ .aai-flowbar { top: 0; padding-top: 14px; }

/* Light European-blue sidebar with dark, high-contrast text */
.aai-dash-side { background: linear-gradient(180deg, #edf4ff 0%, #dde9fd 100%); color: #0f2a4a; border-right: 1px solid #c9daf6; }
.aai-dash-side::after { display: none; }
.aai-dash-side .aai-side-h, .aai-side-sub { color: #3a4e74; }
.aai-side-sub small { color: #55668a; }
.aai-side-nav button { color: #0f2a4a; }
.aai-side-nav button em { color: #45577a; }
.aai-side-nav button:hover { color: #23609f; background: rgba(0, 51, 153, .08); }
.aai-side-nav button.is-on { color: #23609f; background: #fff; box-shadow: inset 3px 0 0 #e8641c, 0 2px 10px -5px rgba(15, 42, 74, .3); }
.aai-side-nav button.is-on em { color: #c2410c; }
.aai-folder-more { color: #3a4e74; }
.aai-folder-more:hover { color: #23609f; background: rgba(0, 51, 153, .08); }
.aai-side-add { color: #0a4fb8; border: 1px dashed #8fb0e6; background: rgba(255, 255, 255, .45); }
.aai-side-add:hover { color: #23609f; border-color: #2f7bc4; background: #fff; }
.aai-side-nav .aai-side-sub:nth-of-type(2), .aai-pin-tools { border-top-color: #c9daf6; }
.aai-side-empty { color: #45577a; }
.aai-pin-tools button { color: #1d3566; }
.aai-pin-tools button:hover, .aai-pin-tools button:focus-visible { color: #23609f; background: rgba(0, 51, 153, .08); }
.aai-lock { color: #c2410c; }

/* Billing details: upgrade, card on file, billing address, invoices */
.aai-bill-up { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 0 6px; padding: 16px 18px; border: 1px solid #ffd1ad; border-radius: 16px; background: #fff6ee; }
.aai-bill-up b { font-size: 16px; color: #1d2240; }
.aai-bill-up p { margin: 4px 0 0; color: #3c4257; font-size: 14px; }
.aai-bill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 14px; }
.aai-bill-box { padding: 16px 18px; border: 1px solid #e3e8f4; border-radius: 16px; background: #fff; }
.aai-bill-box h4 { margin: 0 0 10px; font-size: 15px; color: #1d2240; }
.aai-bill-box p { margin: 0 0 12px; color: #3c4257; }
.aai-bill-card b { display: block; font-size: 16px; color: #1d2240; letter-spacing: .02em; }
.aai-bill-card span { display: block; font-size: 13px; color: #5d6273; }
.aai-bill-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.aai-bill-form .aai-field { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 13px; color: #3c4257; }
.aai-bill-form .aai-field:nth-child(1), .aai-bill-form .aai-field:nth-child(2) { grid-column: 1 / -1; }
.aai-bill-form input { padding: 9px 11px; border: 1px solid #cfd8ea; border-radius: 10px; font: inherit; color: #1d2240; background: #fff; }
.aai-bill-form input:focus { outline: 2px solid #2f7bc4; outline-offset: 1px; }
.aai-bill-actions { display: flex; justify-content: flex-end; gap: 8px; grid-column: 1 / -1; }
.aai-bill-inv { margin-top: 14px; overflow-x: auto; }
.aai-bill-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.aai-bill-table th { padding: 8px 10px; border-bottom: 1px solid #e3e8f4; color: #5d6273; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.aai-bill-table td { padding: 10px; border-bottom: 1px solid #f0f3f9; color: #1d2240; white-space: nowrap; }
.aai-bill-table td:last-child { text-align: right; }
.aai-bill-st { padding: 3px 9px; border-radius: 999px; background: #f1f5fd; color: #3c4257; font-size: 12px; font-weight: 700; }
.aai-bill-st.is-paid { background: #e8f7ee; color: #0d6b3d; }
@media (max-width: 600px) { .aai-bill-form { grid-template-columns: 1fr; } }

/* Larger text across the site (generated: +10% up to 20px, +5% up to 40px) */
.aai { font-size: 16.5px; }
.aai-eyebrow { font-size: 13.2px; }
.aai-small { font-size: 13.8px; }
.aai-err { font-size: 15.4px; }
.aai-fine { font-size: 13.8px; }
.aai-btn { font-size: 16.5px; }
.aai-btn-sm { font-size: 14.9px; }
.aai-link, .aai-link-btn { font-size: 14.9px; }
.aai-back-pill { font-size: 14.9px; }
.aai-chip { font-size: 13.8px; }
.aai-mini-btn { font-size: 13.2px; }
.aai-ok-pill { font-size: 13.2px; }
.aai-field > label, .aai-flabel { font-size: 14.9px; }
.aai-field input[type="text"], .aai-field input[type="email"], .aai-field input[type="password"], .aai-field textarea, .aai-field select, .aai-form-grid input { font-size: 16.5px; }
.aai-check { font-size: 15.4px; }
.aai-check-sm { font-size: 14.3px; }
.aai-msg { font-size: 15.4px; }
.aai-gate b { font-size: 23.1px; }
.aai-gate span { font-size: 16.5px; }
.aai-create { font-size: 17.1px; }
.aai-side-h { font-size: 12.1px; }
.aai-side-nav button { font-size: 15.4px; }
.aai-side-nav button em { font-size: 13.2px; }
.aai-folder-more { font-size: 17.6px; }
.aai-side-add { font-size: 14.9px; }
.aai-flow li { font-size: 14.9px; }
.aai-flow li b { font-size: 14.3px; }
.aai-flow.is-compact li { font-size: 13.2px; }
.aai-flow.is-compact li b { font-size: 12.1px; }
.aai-hello p { font-size: 17.6px; }
.aai-hg-txt b { font-size: 17.6px; }
.aai-hg-txt em { font-size: 13.8px; }
.aai-hg-go { font-size: 14.3px; }
.aai-hero-more label { font-size: 14.3px; }
.aai-compose-l { font-size: 18.7px; }
.aai-compose-l span { font-size: 14.3px; }
.aai-compose textarea { font-size: 18.2px; }
.aai-wc { font-size: 13.8px; }
.aai-drop b { font-size: 15.4px; }
.aai-drop em { font-size: 13.2px; }
.aai-gen-card b { font-size: 17.6px; }
.aai-gen-card p { font-size: 14.3px; }
.aai-ai-note { font-size: 14.9px; }
.aai-go { font-size: 18.7px; }
.aai-pal { font-size: 14.3px; }
.aai-warn { font-size: 15.4px; }
.aai-review h3 { font-size: 18.7px; }
.aai-table { font-size: 15.4px; }
.aai-table th { font-size: 12.7px; }
.aai-table input, .aai-table select { font-size: 15.4px; }
.aai-x { font-size: 19.8px; }
.aai-dstage { font-size: 14.3px; }
.aai-stagelist li { font-size: 15.4px; }
.aai-gp-tip { font-size: 14.9px; }
.aai-files-head h3 { font-size: 22.1px; }
.aai-search input { font-size: 15.4px; }
.aai-files-tools select { font-size: 14.9px; }
.aai-file-meta b { font-size: 16.5px; }
.aai-file-meta span { font-size: 13.8px; }
.aai-file-more { font-size: 19.8px; }
.aai-files-empty b { font-size: 18.7px; }
.aai-menu button { font-size: 15.4px; }
.aai-pop-title { font-size: 13.2px; }
.aai-notice b { font-size: 15.4px; }
.aai-notice p { font-size: 14.3px; }
.aai-toast { font-size: 15.4px; }
.aai-acc-tabs button { font-size: 16px; }
.aai-acc-pane h3 { font-size: 27.3px; }
.aai-plan-card b { font-size: 27.3px; }
.aai-plan-usage b { font-size: 33.6px; }
.aai-plan-opt b { font-size: 29.4px; }
.aai-plan-opt small { font-size: 15.4px; }
.aai-editor { font-size: 15.4px; }
.aai-ed-title { font-size: 17.6px; }
.aai-ed-gen { font-size: 13.2px; }
.aai-ed-status { font-size: 13.2px; }
.aai-zoom button { font-size: 14.3px; }
.aai-hint { font-size: 13.8px; }
.aai-tabs button { font-size: 14.3px; }
.aai-pgroup h4 { font-size: 13.2px; }
.aai-pgroup > summary { font-size: 13.2px; }
.aai-pgroup > summary::after { font-size: 17.6px; }
.aai-pf { font-size: 14.3px; }
.aai-pf input, .aai-pf select, .aai-pf textarea { font-size: 14.9px; }
.aai-chars button { font-size: 15.4px; }
.aai-pbtns button, .aai-align button { font-size: 13.8px; }
.aai-sizes button, .aai-align-all button { font-size: 13.2px; }
.aai-note-flag { font-size: 13.8px; }
.aai-label-list button { font-size: 14.3px; }
.aai-label-list em { font-size: 12.7px; }
.aai-read-list li { font-size: 14.9px; }
.aai-read-list button { font-size: 13.2px; }
.aai-res { font-size: 14.3px; }
.aai-dims { font-size: 17.6px; }
.aai-issues li { font-size: 14.3px; }
.aai-vlist li { font-size: 14.3px; }
.aai-vlist em { font-size: 13.2px; }
.aai-vlist button { font-size: 13.2px; }
.aai-li-name { font-size: 14.3px; }
.aai-li-name em { font-size: 12.1px; }
.aai-rv-in { font-size: 15.4px; }
.aai-ops label { font-size: 14.9px; }
.aai-ops small { font-size: 13.2px; }
.aai-okmark { font-size: 13.8px; }
.aai-wf { font-size: 14.3px; }
.aai-modal-head h3 { font-size: 23.1px; }
.aai-dlg-card h3 { font-size: 22px; }
.aai-dlg-card p { font-size: 16.5px; }
.aai-dlg-l span { font-size: 13.2px; }
.aai-dlg-in { font-size: 16.5px; }
.aai-dlg .aai-btn { font-size: 15.4px; }
.aai-opening h3 { font-size: 27.3px; }
.aai-opening p { font-size: 16.5px; }
.aai-op-steps li { font-size: 13.8px; }
.aai-side-sub { font-size: 11.6px; }
.aai-side-empty { font-size: 13.2px; }
.aai-tipbar { font-size: 14.9px; }
.aai-tip-badge { font-size: 12.1px; }
.aai-share-h { font-size: 12.1px; }
.aai-share-row em { font-size: 13.2px; }
.aai-shared-tag { font-size: 12.1px; }
.aai-sv-x { font-size: 23.1px; }
.aai-was s { font-size: 18.7px; }
.aai-was em { font-size: 12.7px; }
.aai-bill-up b { font-size: 17.6px; }
.aai-bill-up p { font-size: 15.4px; }
.aai-bill-box h4 { font-size: 16.5px; }
.aai-bill-card b { font-size: 17.6px; }
.aai-bill-card span { font-size: 14.3px; }
.aai-bill-form .aai-field { font-size: 14.3px; }
.aai-bill-table { font-size: 15.4px; }
.aai-bill-table th { font-size: 13.2px; }
.aai-bill-st { font-size: 13.2px; }
@media (max-width: 720px) {
	.aai-flow li.is-on span { font-size: 12.7px; }
	.aai-tipbar { font-size: 13.8px; }
}

/* Contrast pass (WCAG AA): deeper orange behind white text, darker inactive labels */
.aai { --a-warm: linear-gradient(180deg, #cc4b0c, #b73d0a); --a-orange: #e85d1a; --a-flame: #c2410c; }
.aai-btn-primary, .aai-btn-accent { background: linear-gradient(180deg, #cc4b0c, #b73d0a); }
.aai-btn-primary:hover, .aai-btn-accent:hover { background: #a8380a; }
.aai-dlg .aai-btn-primary { background: #c2410c; }
.aai-dlg .aai-btn-primary:hover { background: #a8380a; }
.aai-tip-badge, .aai-save, .aai-was em, .aai-file-actions button:hover, .aai-file-actions button:focus-visible, .aai-file-actions button.is-danger:hover { background: #c2410c; }
.aai-flowbar li:not(.is-on) b, .aai-flowbar li:not(.is-on) span { color: #535a6e; }
/* Selected items are navy blue with white text */
.aai-side-nav button.is-on { color: #fff; background: #1f568f; box-shadow: inset 3px 0 0 #ff9a3c, 0 6px 14px -8px rgba(15, 42, 74, .55); }
.aai-side-nav button.is-on em { color: #ffd2a8; }
.aai-acc-tabs button.is-on, .aai-chip.is-on, .aai-seg button.is-on, .aai-tabs button.is-on, .aai-menu button.is-on, .aai-sizes button.is-on { background: #1f568f; color: #fff; border-color: #1f568f; }

/* One orange everywhere: light orange #e8641c; text on orange is navy for readability */
.aai { --a-orange: #e8641c; --a-flame: #e85d1a; --a-warm: linear-gradient(110deg, #e85d1a, #f0701f); }
.aai-btn-primary, .aai-btn-accent, .aai-dlg .aai-btn-primary { background: linear-gradient(110deg, #e85d1a, #f0701f); color: #fff !important; text-shadow: none; box-shadow: 0 10px 22px -10px rgba(230, 120, 30, .6) !important; }
.aai-btn-primary svg, .aai-btn-accent svg { color: #fff; }
.aai-btn-primary:hover, .aai-btn-accent:hover, .aai-dlg .aai-btn-primary:hover { background: linear-gradient(110deg, #e85f12, #f0701f); }
.aai-btn-ghost { box-shadow: inset 0 0 0 1.5px #e8641c; }
.aai-btn-ghost:hover { background: #fff4e8; }
.aai-mini-btn.is-warn, .aai-save, .aai-tip-badge, .aai-was em, .aai-rv-result .aai-pbtns [data-apply-ops], .aai-file-actions button:hover, .aai-file-actions button:focus-visible, .aai-file-actions button.is-danger:hover { background: #e8641c; color: #fff; }
.aai-flow li.is-on b, .aai-ed-top .aai-flow.is-compact li.is-on b { background: #e8641c; color: #fff; }
.aai-tools button[data-tool="fixtext"].is-on { background: #e8641c; color: #fff; }
.aai-side-nav button.is-on { box-shadow: inset 3px 0 0 #e8641c, 0 6px 14px -8px rgba(15, 42, 74, .55); }


/* Plan-card blue: account tabs */
.aai-acc-tabs { background: radial-gradient(circle at 100% 0, rgba(111, 208, 255, .4), transparent 50%), linear-gradient(145deg, #2f7bc4, #4a8fd2 65%, #23609f); box-shadow: 0 16px 34px -20px rgba(47, 123, 196, .6); }
.aai-acc-tabs button { color: rgba(255, 255, 255, .88); }
.aai-acc-tabs button:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.aai-acc-tabs button.is-on { background: rgba(255, 255, 255, .2); color: #fff; border-color: transparent; box-shadow: inset 3px 0 0 #f0701f; }


/* Account panes open instantly */
.aai-acc-pane { animation: aai-quickfade .16s ease-out; }
@keyframes aai-quickfade { from { opacity: 0; } }


/* Plan-card blue: selected sidebar item */
.aai-side-nav button.is-on, .aai-folder-row:has(> button.is-on) > button:first-child { background: radial-gradient(circle at 100% 0, rgba(111, 208, 255, .4), transparent 50%), linear-gradient(145deg, #2f7bc4, #4a8fd2 65%, #23609f); color: #fff; box-shadow: inset 3px 0 0 #f0701f, 0 10px 22px -12px rgba(47, 123, 196, .7); }
.aai-side-nav button.is-on svg, .aai-side-nav button.is-on span { color: #fff; opacity: 1; }
.aai-side-nav button.is-on em { color: #f0701f; }


/* Studio matches the website: plan-card blue for every selected state */
.aai-ed-top { background: radial-gradient(circle at 100% 0, rgba(111, 208, 255, .4), transparent 50%), linear-gradient(145deg, #2f7bc4, #4a8fd2 65%, #23609f); }
.aai-tabs button.is-on, .aai-seg button.is-on, .aai-chip.is-on, .aai-sizes button.is-on, .aai-tools button.is-on, .aai-acc-tabs button.is-on.aai-solid { background: radial-gradient(circle at 100% 0, rgba(111, 208, 255, .4), transparent 50%), linear-gradient(145deg, #2f7bc4, #4a8fd2 65%, #23609f); color: #fff; border-color: transparent; box-shadow: 0 8px 18px -10px rgba(47, 123, 196, .7); }
.aai-tabs button.is-on svg, .aai-seg button.is-on svg, .aai-chip.is-on svg, .aai-tools button.is-on svg { color: #fff; }
.aai-tools button[data-tool="fixtext"].is-on { background: #e8641c; color: #fff; }
.aai-menu button.is-on { color: #2f7bc4; }


/* Figure card buttons: always visible, colour change on hover only */
.aai-file .aai-file-actions, .aai-file:hover .aai-file-actions, .aai-file:focus-within .aai-file-actions { opacity: 1 !important; transform: none !important; visibility: visible !important; pointer-events: auto; }

/* Share dialog: figure name on its own line */
.aai-share-name { position: relative; z-index: 1; display: block; width: fit-content; max-width: 100%; margin: 12px 0 14px; padding: 7px 14px 8px; border-radius: 12px; background: #eef4ff; box-shadow: inset 0 0 0 1px #d6e4ff; color: #2f7bc4; font: 700 16px/1.4 "Red Hat Text", system-ui, sans-serif; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Drawing table (generation screen): description read, layout sketched in pencil, parts coloured; no "AI" look */
.aai-board-wrap { display: grid; place-items: center; }
.aai-board { position: relative; width: 100%; aspect-ratio: 1000 / 620; border-radius: 18px; overflow: hidden; background: #fffdf8 radial-gradient(rgba(165, 183, 210, .35) 1px, transparent 1.3px) 0 0 / 22px 22px; box-shadow: inset 0 0 0 1px #e3e8f4, 0 18px 40px -24px rgba(15, 42, 74, .35); }
.aai-board-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.aai-b-scribble path { fill: none; stroke: #9fb0cc; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.aai-board.is-idle .aai-b-scribble path { opacity: 1; animation: aaiScribble 3.2s ease-in-out infinite; }
.aai-board.is-idle .aai-b-scribble path:nth-child(2) { animation-delay: 1.2s; }
.aai-b-panel { fill: rgba(244, 247, 253, .6); stroke: #b9c8e2; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: aaiDraw .9s ease-out forwards; animation-delay: var(--d); }
.aai-b-part { fill: var(--ink); fill-opacity: 0; stroke: #3a4e74; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: aaiDraw .8s ease-in-out forwards; animation-delay: var(--d); transition: fill-opacity 1.4s ease; }
.aai-board.is-ink .aai-b-part { animation: aaiDraw .8s ease-in-out forwards, aaiInk 1.4s ease forwards; animation-delay: var(--d), var(--di, 2s); }
.aai-b-link { fill: none; stroke: #0f2a4a; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: aaiDraw .7s ease-in-out forwards; animation-delay: var(--d); }
.aai-b-link.is-inh { stroke: #c2410c; }
.aai-b-head { fill: none; stroke: #0f2a4a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; animation: aaiFade .25s ease forwards; animation-delay: var(--d); }
.aai-board-pencil { position: absolute; top: 72%; left: 30%; z-index: 2; width: 46px; margin: -40px 0 0 -4px; transition: left .55s cubic-bezier(.3, .7, .2, 1), top .55s cubic-bezier(.3, .7, .2, 1); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .2)); pointer-events: none; }
.aai-board.is-idle .aai-board-pencil { animation: aaiWrite 3.2s ease-in-out infinite; }
.aai-board-cap { position: absolute; left: 16px; bottom: 12px; z-index: 2; margin: 0; padding: 6px 14px; border-radius: 99px; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 14px -8px rgba(15, 42, 74, .4); color: #0f2a4a; font: 600 14px/1.2 var(--a-body, inherit); }
@keyframes aaiDraw { to { stroke-dashoffset: 0; } }
@keyframes aaiInk { to { fill-opacity: .85; } }
@keyframes aaiFade { to { opacity: 1; } }
@keyframes aaiScribble { 0% { stroke-dashoffset: 1; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes aaiWrite { 0% { left: 14%; top: 84%; } 60% { left: 64%; top: 82%; } 100% { left: 14%; top: 84%; } }

/* Reveal of a new figure: painted part by part, then each label written with a pen */
.aai-reveal { position: absolute; inset: 0; z-index: 30; pointer-events: auto; transition: opacity .4s; }
.aai-reveal.is-out { opacity: 0; pointer-events: none; }
.aai-reveal-fig { position: absolute !important; margin: 0 !important; background: #fff; transition: opacity .35s; }
.aai-reveal-fig.is-out { opacity: 0; }
.aai-reveal-fig .afig-status { display: none !important; }
.aai-reveal-pen { position: absolute; top: 0; left: 0; z-index: 3; width: 40px; margin: -34px 0 0 -6px; opacity: 0; transition: opacity .2s; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); pointer-events: none; }
.aai-reveal-pen.is-on { opacity: 1; }
.aai-reveal-cap { position: absolute; top: 14px; left: 50%; z-index: 3; margin: 0; padding: 7px 16px; border-radius: 99px; background: #1f568f; color: #fff; font: 600 14px/1.2 var(--a-body, inherit); transform: translateX(-50%); box-shadow: 0 8px 20px -10px rgba(15, 42, 74, .6); }
.aai-reveal-skip { position: absolute; top: 14px; right: 14px; z-index: 3; padding: 7px 14px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .95); color: #0f2a4a; font: 600 13px/1 var(--a-body, inherit); box-shadow: 0 4px 14px -8px rgba(15, 42, 74, .5); cursor: pointer; }
.aai-reveal-skip:hover { background: #e8641c; }

/* Wider, clearer left panel with smooth motion */
.aai-dash { grid-template-columns: 300px minmax(0, 1fr); }
.aai-dash-side { padding: 22px 18px; gap: 6px; }
.aai-side-nav button { padding: 11px 14px; font-size: 16px; border-radius: 14px; transition: background .25s ease, color .25s ease, transform .25s cubic-bezier(.3, .7, .2, 1), box-shadow .25s ease; }
.aai-side-nav button:hover { transform: translateX(4px); }
.aai-side-nav button svg { width: 20px; height: 20px; }
.aai-side-nav button em { font-size: 13px; }
.aai-side-sub { font-size: 11.5px; margin-top: 18px; }
.aai-side-nav > *, .aai-dash-side > .aai-side-add { animation: aaiSideIn .45s cubic-bezier(.3, .7, .2, 1) both; }
.aai-side-nav > *:nth-child(2) { animation-delay: .03s; } .aai-side-nav > *:nth-child(3) { animation-delay: .06s; } .aai-side-nav > *:nth-child(4) { animation-delay: .09s; } .aai-side-nav > *:nth-child(5) { animation-delay: .12s; } .aai-side-nav > *:nth-child(6) { animation-delay: .15s; } .aai-side-nav > *:nth-child(7) { animation-delay: .18s; } .aai-side-nav > *:nth-child(8) { animation-delay: .21s; } .aai-side-nav > *:nth-child(n+9) { animation-delay: .24s; }
@keyframes aaiSideIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@media (max-width: 1100px) { .aai-dash { grid-template-columns: 260px minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .aai-board *, .aai-side-nav > *, .aai-dash-side > .aai-side-add { animation: none !important; } .aai-b-panel, .aai-b-part, .aai-b-link { stroke-dashoffset: 0; } .aai-b-head { opacity: 1; } }

/* Drawing table: the real figure is painted as soon as it exists (sketch fades away) */
.aai-board-fig { position: absolute !important; top: 50%; left: 50%; z-index: 1; margin: 0 !important; max-width: 94%; max-height: 90%; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px -18px rgba(15, 42, 74, .45); transform: translate(-50%, -50%); }
.aai-board-fig .afig-status { display: none !important; }
.aai-board .aai-board-svg, .aai-board .aai-board-pencil { transition: opacity .6s ease; }
.aai-board.is-paint .aai-board-svg, .aai-board.is-paint .aai-board-pencil { opacity: 0; }


/* Creation show (generation screen): the left panel follows the steps on the right with the figure's own content.
   0 the description is read, 1 the planned panels and parts take their places while colour develops,
   2 the figure comes into focus while terms are checked, 3 it is finished, 4 ready. */
.aai-board.aai-show { background: linear-gradient(160deg, #fbfdff 0%, #f1f6ff 55%, #e9f1ff 100%); }
.aai-show > * { transition: opacity .7s ease, transform .7s ease; }
.aai-show-mesh { position: absolute; inset: -12%; opacity: calc(.14 + var(--dev, 0) * .5); filter: blur(40px) saturate(1.15); pointer-events: none; }
.aai-show-mesh i { position: absolute; width: 44%; aspect-ratio: 1; border-radius: 50%; animation: aaiMesh 14s ease-in-out infinite alternate; }
.aai-show-mesh i:nth-child(1) { left: 2%; top: 8%; background: #8fb4ff; }
.aai-show-mesh i:nth-child(2) { left: 36%; top: -6%; background: #c4b0ff; animation-delay: -3s; }
.aai-show-mesh i:nth-child(3) { left: 60%; top: 28%; background: #7fd8cc; animation-delay: -6s; }
.aai-show-mesh i:nth-child(4) { left: 18%; top: 50%; background: #ffc690; animation-delay: -9s; }
.aai-show-mesh i:nth-child(5) { left: 50%; top: 56%; background: #ffb4a3; animation-delay: -12s; }
@keyframes aaiMesh { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(7%, -6%) scale(1.12); } 100% { transform: translate(-6%, 7%) scale(.94); } }
.aai-show.has-fig .aai-show-mesh { opacity: .1; }

.aai-show-read { position: absolute; inset: 8% 7% 19%; display: flex; align-items: center; overflow: hidden; -webkit-mask: linear-gradient(#000 80%, transparent); mask: linear-gradient(#000 80%, transparent); }
.aai-show-read p { margin: 0; color: #24365f; font: 500 clamp(12px, 1.3vw, 17px)/1.75 var(--a-body, inherit); }
.aai-show-read p span { display: inline-block; padding: 0 2px; border-radius: 5px; opacity: 0; transform: translateY(6px); background: linear-gradient(#ffdcae, #ffdcae) no-repeat 0 0 / 0 100%; animation: aaiWordIn .5s ease forwards; animation-delay: calc(var(--i) * 55ms); transition: background-size .6s ease, color .3s ease; }
.aai-show-read p span.is-key { background-size: 100% 100%; color: #0f2a4a; font-weight: 700; }
@keyframes aaiWordIn { to { opacity: 1; transform: none; } }
.aai-show-skel { display: grid; gap: 14px; width: 100%; }
.aai-show-skel i { height: 12px; border-radius: 99px; background: linear-gradient(90deg, #e1e9fa 0%, #f7f9ff 50%, #e1e9fa 100%) 0 0 / 200% 100%; animation: aaiShim 1.4s linear infinite; }
.aai-show-skel i:nth-child(2n) { width: 84%; }
.aai-show-skel i:nth-child(3n) { width: 62%; }
@keyframes aaiShim { to { background-position: -200% 0; } }
.aai-show:not([data-step="0"]) .aai-show-read { opacity: 0; transform: translateY(-14px); pointer-events: none; }

.aai-show-plan { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); pointer-events: none; }
.aai-show-plan::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%) -150% 0 / 250% 100% no-repeat; animation: aaiSheen 4.2s ease-in-out infinite; }
.aai-show:not([data-step="0"]):not(.has-fig) .aai-show-plan { opacity: 1; transform: none; }
@keyframes aaiPanelIn { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes aaiSheen { 0%, 40% { background-position: -150% 0; } 100% { background-position: 150% 0; } }

.aai-show-fig { position: absolute; inset: 4%; display: grid; place-items: center; pointer-events: none; }
.aai-show-fig img { max-width: 100%; max-height: 100%; border-radius: 10px; background: #fff; box-shadow: 0 16px 36px -22px rgba(15, 42, 74, .55); opacity: 0; filter: blur(18px) saturate(.4) brightness(1.08); transform: scale(1.05); transition: opacity 1.2s ease, filter 14s cubic-bezier(.2, .7, .2, 1), transform 14s cubic-bezier(.2, .7, .2, 1); }
.aai-show.has-fig .aai-show-fig img { opacity: 1; filter: blur(2.5px) saturate(.92); transform: scale(1.01); }
.aai-show.has-fig[data-step="3"] .aai-show-fig img, .aai-show.has-fig[data-step="4"] .aai-show-fig img { filter: none; transform: none; transition-duration: 1.2s, 1.6s, 1.6s; }
.aai-show-scan { position: absolute; left: 4%; right: 4%; top: 4%; z-index: 2; height: 36px; border-radius: 4px; opacity: 0; background: linear-gradient(rgba(232, 100, 28, 0), rgba(232, 100, 28, .14) 70%, rgba(255, 150, 60, .9) 96%, rgba(232, 100, 28, 0)); pointer-events: none; }
.aai-show.has-fig[data-step="2"] .aai-show-scan { opacity: 1; animation: aaiScan 2.8s ease-in-out infinite alternate; }
@keyframes aaiScan { from { top: 3%; } to { top: 86%; } }

.aai-show-terms { position: absolute; right: 14px; bottom: 12px; z-index: 3; display: grid; gap: 6px; max-width: 46%; margin: 0; padding: 10px 12px; list-style: none; border-radius: 12px; background: rgba(255, 255, 255, .95); box-shadow: 0 10px 26px -14px rgba(15, 42, 74, .5); opacity: 0; transform: translateY(8px); pointer-events: none; }
.aai-show-terms:empty { visibility: hidden; }
.aai-show[data-step="2"] .aai-show-terms { opacity: 1; transform: none; }
.aai-show-terms li { display: flex; align-items: center; gap: 7px; min-width: 0; color: #0f2a4a; font: 600 clamp(10px, 1vw, 13px)/1.25 var(--a-body, inherit); animation: aaiTermIn .4s ease both; }
.aai-show-terms li span { overflow: hidden; min-width: 0; white-space: nowrap; text-overflow: ellipsis; }
.aai-show-terms li i { position: relative; flex: none; width: 15px; height: 15px; border-radius: 50%; background: #16a34a; animation: aaiTick .5s .25s cubic-bezier(.3, 1.6, .5, 1) both; }
.aai-show-terms li i::after { content: ""; position: absolute; left: 5px; top: 2.5px; width: 3.5px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes aaiTermIn { from { opacity: 0; transform: translateX(10px); } }
@keyframes aaiTick { from { transform: scale(0); } }

.aai-show-ok { position: absolute; top: 14px; right: 14px; z-index: 4; width: 42px; height: 42px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 8px rgba(22, 163, 74, .16), 0 14px 26px -12px rgba(22, 163, 74, .7); opacity: 0; transform: scale(.4); }
.aai-show-ok::after { content: ""; position: absolute; left: 15px; top: 8px; width: 9px; height: 18px; border: solid #fff; border-width: 0 4px 4px 0; transform: rotate(45deg); }
.aai-show[data-step="4"] .aai-show-ok { opacity: 1; transform: scale(1); transition: opacity .35s ease, transform .5s cubic-bezier(.3, 1.6, .5, 1); }

.aai-show-cap { position: absolute; left: 14px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; max-width: 52%; margin: 0; padding: 7px 14px 7px 11px; border-radius: 99px; background: rgba(255, 255, 255, .96); box-shadow: 0 6px 18px -10px rgba(15, 42, 74, .5); color: #0f2a4a; font: 600 clamp(11px, 1.05vw, 14px)/1.2 var(--a-body, inherit); }
.aai-show-cap span { display: block; overflow: hidden; min-width: 0; white-space: nowrap; text-overflow: ellipsis; }
.aai-show-cap i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #e8641c; animation: aaiPing 1.6s ease-out infinite; }
.aai-show-cap.is-in span { animation: aaiCapIn .45s ease; }
.aai-show[data-step="4"] .aai-show-cap i { background: #16a34a; animation: none; }
@keyframes aaiPing { 0% { box-shadow: 0 0 0 0 rgba(232, 100, 28, .6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(232, 100, 28, 0); } }
@keyframes aaiCapIn { from { opacity: 0; transform: translateY(5px); } }

@media (max-width: 600px) {
	.aai-show-terms { right: 8px; bottom: 8px; max-width: 50%; padding: 6px 8px; }
	.aai-show-terms li:nth-child(-n+2) { display: none; }
	.aai-show-cap { left: 8px; bottom: 8px; max-width: 48%; padding: 5px 10px 5px 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.aai-show *, .aai-show *::after { animation: none !important; transition: none !important; }
	.aai-show-read p span { opacity: 1; transform: none; }
}

/* Generation notices: connection lost / signed out (the figure keeps being made on the server) */
.aai-msg.is-warn { border: 1px solid #fed7aa; background: #fff7ed; color: #7a3410; }
.aai-msg.is-warn .aai-btn { display: inline-flex; margin: 10px 0 0; }

/* Creation show, drawing step: the figure's panels (as in the finished figure) with colour developing inside them */
.aai-dp { position: absolute; inset: 6% 4% 18%; display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 2.5%; }
.aai-dp[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aai-dp-panel { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 10px; border-radius: 16px; background: rgba(244, 247, 253, .92); box-shadow: inset 0 0 0 1.5px rgba(43, 116, 189, .14), 0 12px 26px -20px rgba(15, 42, 74, .55); animation: aaiPanelIn .6s ease both; animation-delay: calc(var(--p) * .18s); }
.aai-dp-panel h4 { margin: 0 0 8px; overflow: hidden; color: #0f2a4a; font: 800 clamp(10px, 1.15vw, 15px)/1.25 var(--a-body, inherit); white-space: nowrap; text-overflow: ellipsis; }
.aai-dp-art { position: relative; flex: 1; overflow: hidden; border-radius: 12px; background: #fff; }
.aai-dp-art i { position: absolute; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--c) 0, var(--c) 42%, transparent 72%); opacity: .2; filter: blur(calc(16px - var(--dev, 0) * 6px)) saturate(.75); transform: scale(.7); animation: aaiDev 9s ease-in-out infinite alternate; animation-delay: var(--d, 0s); transition: opacity 1.4s ease, filter 1.4s ease, transform 1.4s cubic-bezier(.3, 1.3, .5, 1); }
.aai-dp-art i.is-on { opacity: .8; filter: blur(calc(12px - var(--dev, 0) * 5px)) saturate(1.05); transform: scale(1); }
.aai-dp-art i.is-wash { opacity: .7; filter: blur(20px); transform: none; }
.aai-dp-art b { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .85) 48%, transparent 66%) -160% 0 / 260% 100% no-repeat; animation: aaiSheen 3.6s ease-in-out infinite; animation-delay: calc(var(--p) * .6s); }
@keyframes aaiDev { 0% { translate: 0 0; } 50% { translate: 6% -5%; } 100% { translate: -5% 6%; } }
@media (max-width: 600px) { .aai-dp { inset: 5% 3% 21%; } .aai-dp-panel { padding: 6px; border-radius: 10px; } .aai-dp-panel h4 { margin-bottom: 5px; } }

/* Creation show: a card that mirrors the active step on the right (same title, four-part progress, one illustration
   per step); the real figure takes over once it exists. */
.aai-show-read, .aai-show-plan { display: none !important; }
.aai-show-card { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px 8% 20px; text-align: center; }
.aai-show.has-fig .aai-show-card { opacity: 0; transform: scale(.97); pointer-events: none; }
.aai-show:not(.has-fig) .aai-show-cap { opacity: 0; }
.aai-sc-steps { display: flex; gap: 6px; width: min(260px, 70%); }
.aai-sc-steps i { position: relative; flex: 1; height: 6px; overflow: hidden; border-radius: 99px; background: #dbe5f6; }
.aai-sc-steps i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #2b74bd, #3b82f6); transform: scaleX(0); transform-origin: left; transition: transform .6s ease; }
.aai-show[data-step="1"] .aai-sc-steps i:nth-child(1)::after, .aai-show[data-step="2"] .aai-sc-steps i:nth-child(-n+2)::after, .aai-show[data-step="3"] .aai-sc-steps i:nth-child(-n+3)::after, .aai-show[data-step="4"] .aai-sc-steps i::after { transform: scaleX(1); }
.aai-show[data-step="0"] .aai-sc-steps i:nth-child(1)::after, .aai-show[data-step="1"] .aai-sc-steps i:nth-child(2)::after, .aai-show[data-step="2"] .aai-sc-steps i:nth-child(3)::after, .aai-show[data-step="3"] .aai-sc-steps i:nth-child(4)::after { background: linear-gradient(90deg, #e8641c, #e85d1a); animation: aaiSeg 2.4s ease-in-out infinite; }
@keyframes aaiSeg { 0% { transform: scaleX(.12); } 60% { transform: scaleX(.9); } 100% { transform: scaleX(.12); } }
.aai-sc-art { display: none; width: min(300px, 60%); }
.aai-sc-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.aai-show[data-step="0"] .aai-sc-art[data-art="0"], .aai-show:not([data-step="0"]) .aai-sc-art[data-art="1"] { display: block; animation: aaiArtIn .5s ease both; }
@keyframes aaiArtIn { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.aai-show-card h3 { margin: 2px 0 0; color: #0f2a4a; font-family: inherit; font-size: clamp(15px, 1.7vw, 21px); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.aai-show-card p { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 0; color: #45577a; font: 600 clamp(12px, 1.15vw, 15px)/1.3 var(--a-body, inherit); }
.aai-show-card p span { display: block; overflow: hidden; min-width: 0; white-space: nowrap; text-overflow: ellipsis; }
.aai-show-card p i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #e8641c; animation: aaiPing 1.6s ease-out infinite; }
.aai-show-card p.is-in span { animation: aaiCapIn .45s ease; }
/* Step 1 art: the description is read line by line, the layout appears beside it. */
.sc-hl { opacity: .32; animation: aaiHl 5.1s linear infinite; }
@keyframes aaiHl { 0%, 16.5% { transform: translateY(0); } 16.6%, 33.2% { transform: translateY(17px); } 33.3%, 49.9% { transform: translateY(34px); } 50%, 66.5% { transform: translateY(51px); } 66.6%, 83.2% { transform: translateY(68px); } 83.3%, 100% { transform: translateY(85px); } }
.sc-lens { animation: aaiLens 5.1s ease-in-out infinite; }
@keyframes aaiLens { 0% { transform: translate(48px, 40px); } 14% { transform: translate(112px, 40px); } 16.6% { transform: translate(48px, 57px); } 31% { transform: translate(104px, 57px); } 33.3% { transform: translate(48px, 74px); } 47% { transform: translate(110px, 74px); } 50% { transform: translate(48px, 91px); } 64% { transform: translate(94px, 91px); } 66.6% { transform: translate(48px, 108px); } 81% { transform: translate(108px, 108px); } 83.3% { transform: translate(48px, 125px); } 97% { transform: translate(84px, 125px); } 100% { transform: translate(48px, 40px); } }
.sc-plan rect { fill: #e7eefc; stroke: #9db7ea; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: aaiPlanIn 5.1s ease infinite; }
.sc-plan rect:nth-child(2) { animation-delay: .35s; }
.sc-plan rect:nth-child(3) { animation-delay: .7s; }
.sc-plan rect:nth-child(4) { animation-delay: 1.05s; fill: #fff1e3; stroke: #e8641c; }
@keyframes aaiPlanIn { 0% { opacity: 0; transform: translateY(6px) scale(.9); } 18%, 84% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* Step 2 art: a structure is outlined and coloured, an arrow drawn, a second structure added. */
.sc-d1, .sc-d2, .sc-d3 { stroke-dasharray: 1; stroke-dashoffset: 1; }
.sc-d1 { animation: aaiD1 6s ease-in-out infinite; }
.sc-d2 { animation: aaiD2 6s ease-in-out infinite; }
.sc-d3 { animation: aaiD3 6s ease-in-out infinite; }
@keyframes aaiD1 { 0% { stroke-dashoffset: 1; } 22%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes aaiD2 { 0%, 34% { stroke-dashoffset: 1; } 50%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes aaiD3 { 0%, 52% { stroke-dashoffset: 1; } 72%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.sc-f1, .sc-f2, .sc-f3, .sc-f4, .sc-f5 { opacity: 0; }
.sc-f1 { animation: aaiF1 6s ease infinite; }
.sc-f2 { animation: aaiF2 6s ease infinite; }
.sc-f3 { animation: aaiF3 6s ease infinite; }
.sc-f4 { animation: aaiF4 6s ease infinite; }
.sc-f5 { animation: aaiF5 6s ease infinite; }
@keyframes aaiF1 { 0%, 22% { opacity: 0; } 30%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes aaiF2 { 0%, 27% { opacity: 0; } 34%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes aaiF3 { 0%, 72% { opacity: 0; } 80%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes aaiF4 { 0%, 49% { opacity: 0; } 52%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes aaiF5 { 0%, 80% { opacity: 0; } 86%, 92% { opacity: 1; } 100% { opacity: 0; } }
.sc-pen { animation: aaiPen 6s ease-in-out infinite; }
@keyframes aaiPen { 0% { transform: translate(110px, 82px); opacity: 1; } 5.5% { transform: translate(78px, 114px); } 11% { transform: translate(46px, 82px); } 16.5% { transform: translate(78px, 50px); } 22% { transform: translate(110px, 82px); } 34% { transform: translate(116px, 82px); } 50% { transform: translate(166px, 80px); } 52% { transform: translate(188px, 58px); } 57% { transform: translate(206px, 70px); } 62% { transform: translate(194px, 106px); } 67% { transform: translate(176px, 94px); } 72% { transform: translate(188px, 58px); } 80%, 92% { transform: translate(206px, 40px); opacity: 1; } 96% { opacity: 0; } 100% { transform: translate(110px, 82px); opacity: 0; } }
@media (max-width: 600px) { .aai-sc-art { width: 70%; } .aai-show-card { gap: 6px; padding: 10px 6% 12px; } }
@media (prefers-reduced-motion: reduce) { .sc-d1, .sc-d2, .sc-d3 { stroke-dashoffset: 0; } .sc-f1, .sc-f2, .sc-f3, .sc-f4, .sc-f5, .sc-plan rect { opacity: 1; } }

/* Click a word in the figure to change it: hover glow, then a shimmer with sparkles before it dissolves */
.aai-word-hover { position: absolute; z-index: 5; border-radius: 6px; background: rgba(232, 100, 28, .1); box-shadow: 0 0 0 2px rgba(232, 100, 28, .95), 0 0 18px rgba(232, 100, 28, .55); pointer-events: none; }
.aai-word-hover::after { content: attr(data-tip); position: absolute; left: 50%; bottom: 100%; padding: 3px 9px; border-radius: 99px; background: #0f2a4a; color: #fff; font: 600 11px/1.3 var(--a-body, sans-serif); white-space: nowrap; transform: translate(-50%, -6px); }
.aai-magic { position: absolute; z-index: 6; pointer-events: none; }
.aai-magic > i { position: absolute; inset: -40% -14%; border-radius: 14px; background: radial-gradient(closest-side, #fff 0, rgba(255, 236, 205, .95) 50%, rgba(232, 100, 28, 0) 100%); animation: aaiMagicGlow .62s ease-out forwards; }
.aai-magic::before { content: ""; position: absolute; inset: -12% -8%; z-index: 1; border-radius: 8px; background: linear-gradient(100deg, transparent 15%, rgba(124, 58, 237, .4) 38%, rgba(255, 255, 255, .95) 50%, rgba(232, 100, 28, .5) 62%, transparent 85%) -130% 0 / 240% 100% no-repeat; animation: aaiMagicSweep .6s ease-in-out forwards; }
.aai-magic b { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: 10px; height: 10px; margin: -5px 0 0 -5px; background: radial-gradient(circle, #fff 0, #ffd27a 45%, #e8641c 75%); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: aaiSpark .85s ease-out var(--d) both; }
.aai-magic.is-out { opacity: 0; transition: opacity .5s ease; }
@keyframes aaiMagicGlow { 0% { opacity: 0; transform: scale(.6); } 45% { opacity: 1; transform: scale(1); } 100% { opacity: .95; transform: scale(1.04); } }
@keyframes aaiMagicSweep { to { background-position: 130% 0; } }
@keyframes aaiSpark { 0% { opacity: 0; transform: scale(0) rotate(0); } 40% { opacity: 1; transform: scale(1.7) rotate(45deg); } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.4) rotate(90deg); } }

/* Generation steps 1-2: the client's own terms are decoded in the centre and gather below (no drawing) */
.aai-sc-art { display: none !important; }
.aai-sc-magic { position: relative; display: grid; place-items: center; width: min(440px, 88%); min-height: 96px; }
.aai-sc-orb { position: absolute; top: 50%; left: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%; background: conic-gradient(from 0deg, #e8641c, #7c3aed, #3b82f6, #2ba59b, #e8641c); opacity: .42; filter: blur(30px); animation: aaiOrb 6s linear infinite; }
@keyframes aaiOrb { to { transform: rotate(360deg); } }
.aai-sc-word { position: relative; max-width: 100%; overflow: hidden; padding: 4px 6px; background: linear-gradient(90deg, #2b74bd, #7c3aed 50%, #e85d1a); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: inherit; font-size: clamp(20px, 2.6vw, 34px); font-weight: 800; letter-spacing: .01em; text-overflow: ellipsis; white-space: nowrap; }
.aai-sc-word.is-done { animation: aaiWordPop .55s ease; }
@keyframes aaiWordPop { 0% { transform: scale(1); } 40% { transform: scale(1.07); filter: drop-shadow(0 0 12px rgba(232, 100, 28, .85)); } 100% { transform: scale(1); } }
.aai-sc-spark b { position: absolute; width: 12px; height: 12px; background: radial-gradient(circle, #fff 0, #ffd27a 45%, #e8641c 75%); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: aaiTwinkle 2.4s ease-in-out infinite; }
.aai-sc-spark b:nth-child(1) { left: 6%; top: 18%; }
.aai-sc-spark b:nth-child(2) { left: 22%; top: 78%; animation-delay: .4s; }
.aai-sc-spark b:nth-child(3) { left: 48%; top: 4%; animation-delay: .8s; }
.aai-sc-spark b:nth-child(4) { left: 74%; top: 82%; animation-delay: 1.2s; }
.aai-sc-spark b:nth-child(5) { left: 90%; top: 24%; animation-delay: 1.6s; }
.aai-sc-spark b:nth-child(6) { left: 60%; top: 50%; animation-delay: 2s; }
@keyframes aaiTwinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.aai-sc-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 88%; min-height: 26px; }
.aai-sc-tray span { max-width: 180px; overflow: hidden; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .88); box-shadow: inset 0 0 0 1px rgba(43, 116, 189, .18); color: #0f2a4a; font: 600 clamp(10px, 1vw, 12.5px)/1.2 var(--a-body, sans-serif); text-overflow: ellipsis; white-space: nowrap; animation: aaiChipDrop .5s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes aaiChipDrop { from { opacity: 0; transform: translateY(-24px) scale(.7); } }
@media (prefers-reduced-motion: reduce) { .aai-magic, .aai-sc-orb, .aai-sc-spark { display: none; } }

/* Size control beside a retyped word */
.aai-size-pop { position: absolute; z-index: 7; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 99px; background: #0f2a4a; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .45); transform: translateX(-50%); animation: aaiPopIn .25s ease; }
.aai-size-pop button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font: 700 16px/1 sans-serif; cursor: pointer; }
.aai-size-pop button:hover, .aai-size-pop button:focus-visible { background: #e8641c; color: #fff; outline: none; }
.aai-size-pop span { min-width: 54px; color: #fff; font: 600 12px/1 var(--a-body, sans-serif); text-align: center; }
@keyframes aaiPopIn { from { opacity: 0; transform: translate(-50%, -4px); } }

/* Editor: millimetre ruler along the top of the canvas */
.aai-stagewrap { position: relative; }
.aai-ruler { position: absolute; top: 0; left: 0; z-index: 4; height: 22px; border-bottom: 1px solid #d5deee; background: rgba(250, 252, 255, .96); pointer-events: none; font-family: var(--a-body, sans-serif); }
.aai-ruler canvas { display: block; }
.aai-ruler span { position: absolute; top: 3px; left: 4px; padding: 0 4px; border-radius: 4px; background: #0f2a4a; color: #fff; font: 700 9px/14px var(--a-body, sans-serif); letter-spacing: .04em; }
/* Table picker */
.aai-tpick { position: absolute; z-index: 30; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #dbe3f2, 0 18px 40px -16px rgba(15, 42, 74, .45); animation: aaiPopIn2 .18s ease; }
.aai-tpick-grid { display: grid; grid-template-columns: repeat(10, 18px); gap: 3px; }
.aai-tpick-grid i { width: 18px; height: 14px; border: 1px solid #cdd8ec; border-radius: 3px; background: #fff; cursor: pointer; }
.aai-tpick-grid i.is-on { border-color: #2b74bd; background: #5b8fd9; }
.aai-tpick p { margin: 8px 0 0; color: #0f2a4a; font: 600 13px/1.2 var(--a-body, sans-serif); text-align: center; }
@keyframes aaiPopIn2 { from { opacity: 0; transform: translateY(-4px); } }

/* Editor toolbar: big, labelled, Upload first; arrows and shapes in pop-outs; hover demo screens */
.aai-ed-body { grid-template-columns: 92px minmax(0, 1fr) 340px; }
.aai-tools.is-big { gap: 2px; padding: 8px 6px; }
.aai-tools.is-big .aai-tb { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 78px; height: auto; min-height: 54px; padding: 7px 2px 6px; border-radius: 12px; color: #0f2a4a; font: 600 11.5px/1.1 var(--a-body, sans-serif); }
.aai-tools.is-big .aai-tb svg { width: 23px; height: 23px; }
.aai-tools.is-big .aai-tb span { white-space: nowrap; }
.aai-tools.is-big .aai-tb:hover { background: #eef3ff; color: #2b74bd; }
.aai-tools.is-big .aai-tb.is-on { background: var(--a-indigo, #0f2a4a); color: #fff; }
.aai-tools.is-big .aai-tb.is-upload { margin-bottom: 2px; background: #e8641c; color: #fff; box-shadow: 0 8px 18px -10px rgba(246, 97, 42, .75); }
.aai-tools.is-big .aai-tb.is-upload:hover { background: #ff9a3c; color: #0f2a4a; }
.aai-tools.is-big .aai-tb[data-tool="fixtext"] { color: var(--a-flame, #e85d1a); }
.aai-tools.is-big .aai-tb[data-tool="repair"] { color: #7c3aed; }
.aai-tools.is-big .aai-tb[data-tool="fixtext"].is-on, .aai-tools.is-big .aai-tb[data-tool="repair"].is-on { color: #fff; }
.aai-tools.is-big .aai-tb.has-more::after { content: ""; position: absolute; right: 7px; bottom: 7px; border: 4px solid transparent; border-right-color: currentColor; border-bottom-color: currentColor; opacity: .55; }
.aai-tools.is-big .aai-tool-sep { width: 54px; margin: 4px auto; }
.aai-tfly { position: absolute; z-index: 40; width: 240px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #dbe3f2, 0 18px 40px -16px rgba(15, 42, 74, .45); animation: aaiPopIn2 .18s ease; }
.aai-tfly b { display: block; margin: 0 2px 8px; color: #0f2a4a; font: 700 11.5px/1.2 var(--a-body, sans-serif); letter-spacing: .06em; text-transform: uppercase; }
.aai-tfly > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.aai-tfly button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; border: 0; border-radius: 10px; background: #f4f7fd; color: #0f2a4a; font: 600 10.5px/1.1 var(--a-body, sans-serif); cursor: pointer; }
.aai-tfly button:hover { background: #e8641c; }
.aai-tfly svg { width: 21px; height: 21px; }
.aai-demo { position: absolute; z-index: 45; width: 236px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #dbe3f2, 0 22px 44px -18px rgba(15, 42, 74, .5); pointer-events: none; animation: aaiPopIn2 .18s ease; }
.aai-demo-screen { overflow: hidden; border-radius: 10px; box-shadow: inset 0 0 0 1px #e1e8f5; }
.aai-demo-screen svg { display: block; width: 100%; height: auto; }
.aai-demo b { display: block; margin: 9px 2px 3px; color: #0f2a4a; font: 700 13.5px/1.2 var(--a-body, sans-serif); }
.aai-demo p { margin: 0 2px; color: #45577a; font: 500 12px/1.45 var(--a-body, sans-serif); }
/* Side panel: one large Export tab */
.aai-side .aai-tabs { display: block; }
.aai-side .aai-tabs [data-tab] { width: 100%; padding: 12px 16px; border-radius: 12px; background: var(--a-indigo, #0f2a4a); color: #fff; font: 700 16px/1.2 var(--a-body, sans-serif); letter-spacing: .01em; cursor: default; }
/* Export: resolution choice */
.aai-dpi-h { margin: 10px 0 6px; color: #0f2a4a; font: 700 12px/1.2 var(--a-body, sans-serif); }
.aai-dpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 12px; }
.aai-dpi button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; border: 1.5px solid #d5deee; border-radius: 12px; background: #fff; color: #0f2a4a; cursor: pointer; text-align: center; transition: border-color .2s, background .2s, box-shadow .2s; }
.aai-dpi button:hover { border-color: #9db7ea; }
.aai-dpi button b { font: 800 15px/1.1 var(--a-body, sans-serif); }
.aai-dpi button span { color: #45577a; font: 600 10.5px/1.2 var(--a-body, sans-serif); }
.aai-dpi button em { color: #7a88a6; font: 500 10px/1.2 var(--a-body, sans-serif); font-style: normal; }
.aai-dpi button.is-on { border-color: #2b74bd; background: #eef3ff; box-shadow: 0 0 0 3px rgba(43, 116, 189, .14); }
/* Repair in progress, and the repair button in the text size bar */
.aai-repairing { position: absolute; z-index: 6; display: grid; place-items: center; overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 2px #e8641c, 0 0 24px rgba(232, 100, 28, .6); pointer-events: none; }
.aai-repairing i { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, .25) 20%, rgba(255, 255, 255, .95) 45%, rgba(255, 214, 160, .85) 55%, rgba(255, 255, 255, .25) 80%) -150% 0 / 250% 100% no-repeat; animation: aaiSheen 1.6s ease-in-out infinite; }
.aai-repairing span { position: relative; padding: 3px 10px; border-radius: 99px; background: #0f2a4a; color: #fff; font: 600 11px/1.3 var(--a-body, sans-serif); }
.aai-size-pop .aai-sp-repair { width: auto; margin-left: 4px; padding: 0 11px; border-radius: 99px; background: #e8641c; color: #fff; font: 600 11.5px/26px var(--a-body, sans-serif); }
.aai-size-pop button[hidden] { display: none; }

/* ===== Editor: corner scaling, Edit canvas, free-trial download, studio branding ===== */
.aai-gbox { fill: none; stroke: #2f7bc4; pointer-events: none; }
.aai-ghandle[data-handle="g-nw"], .aai-ghandle[data-handle="g-se"] { cursor: nwse-resize; }
.aai-ghandle[data-handle="g-ne"], .aai-ghandle[data-handle="g-sw"] { cursor: nesw-resize; }
.aai-handle[data-handle="nw"], .aai-handle[data-handle="se"] { cursor: nwse-resize; }
.aai-handle[data-handle="ne"], .aai-handle[data-handle="sw"] { cursor: nesw-resize; }
.aai-handle[data-handle="n"], .aai-handle[data-handle="s"], .aai-ghandle[data-handle="g-n"], .aai-ghandle[data-handle="g-s"] { cursor: ns-resize; }
.aai-handle[data-handle="e"], .aai-handle[data-handle="w"], .aai-ghandle[data-handle="g-e"], .aai-ghandle[data-handle="g-w"] { cursor: ew-resize; }
.aai-handle.is-side { transition: fill .15s; }
.aai-handle.is-side:hover { fill: #f0701f; }
.aai-cv-btn { position: absolute; z-index: 6; left: 14px; top: 34px; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: #fff; color: #0f2a4a; font: 700 13px/1 var(--a-body); box-shadow: 0 6px 18px -8px rgba(11, 35, 80, .35), inset 0 0 0 1px rgba(47, 123, 196, .14); cursor: pointer; transition: box-shadow .2s, color .2s; }
.aai-cv-btn:hover, .is-canvas .aai-cv-btn { color: #2f7bc4; box-shadow: 0 6px 18px -8px rgba(11, 35, 80, .35), inset 0 0 0 2px #2f7bc4; }
.aai-cvbar { position: absolute; z-index: 7; top: 34px; left: 160px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: #fff; box-shadow: 0 14px 34px -14px rgba(11, 35, 80, .45), inset 0 0 0 1px rgba(47, 123, 196, .12); font: 600 13px/1 var(--a-body); color: #0f2a4a; white-space: nowrap; max-width: calc(100% - 180px); overflow-x: auto; }
.aai-cvbar[hidden] { display: none; }
.aai-cv-grip { width: 8px; height: 22px; background: radial-gradient(circle, #9aa7c0 1.2px, transparent 1.6px) 0 0 / 4px 5px; opacity: .8; }
.aai-cvbar select, .aai-cv-num { height: 36px; border: 1px solid #d6deec; border-radius: 9px; background: #fff; color: #0f2a4a; font: 600 13px var(--a-body); }
.aai-cvbar select { padding: 0 8px; max-width: 220px; }
.aai-cv-num { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; }
.aai-cv-num input { width: 64px; border: 0; outline: 0; font: 600 14px var(--a-body); color: #0f2a4a; background: transparent; }
.aai-cv-num b { color: #8a96ad; font-weight: 600; }
.aai-cv-lock, .aai-cv-ic { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 9px; background: transparent; color: #8a96ad; cursor: pointer; }
.aai-cv-lock.is-on { color: #2f7bc4; background: #eef4ff; }
.aai-cv-ic:hover, .aai-cv-lock:hover { background: #eef4ff; color: #2f7bc4; }
.aai-cv-txt { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: #0f2a4a; font: 700 12.5px var(--a-body); cursor: pointer; }
.aai-cv-txt:hover { background: #eef4ff; }
.aai-cv-color { position: relative; }
.aai-cv-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.aai-cv-color i { width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(11, 35, 80, .25); }
.aai-cv-apply { background: #2f7bc4; color: #fff; }
.aai-cv-apply:hover { background: #084bb0; }
.is-canvas .aai-canvas { overflow: visible; }
.aai-cv-dim { fill: rgba(30, 41, 59, .38); pointer-events: none; }
.aai-cv-frame { fill: none; stroke: #4a8fd2; pointer-events: none; }
.aai-cv-handle { fill: #fff; stroke: #4a8fd2; }
.aai-cvh-nw, .aai-cvh-se { cursor: nwse-resize; } .aai-cvh-ne, .aai-cvh-sw { cursor: nesw-resize; }
.aai-cvh-n, .aai-cvh-s { cursor: ns-resize; } .aai-cvh-e, .aai-cvh-w { cursor: ew-resize; }
.aai-trial-mark { display: grid; gap: 6px; margin: 0 0 14px; padding: 14px; border-radius: 14px; background: linear-gradient(145deg, #fff7ee, #fff); box-shadow: inset 0 0 0 1px #ffd9b0; color: #5b4321; font-size: 12.5px; line-height: 1.45; }
.aai-trial-mark b { color: #0f2a4a; font-size: 13.5px; }
.aai-trial-mark .aai-btn { justify-self: start; margin-top: 4px; }
.aai-lock-tag { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 99px; background: #fff1e0; color: #b4620f; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; }
.aai-pbtns.is-locked button { color: #8a96ad; }
.aai-brand { display: flex; align-items: center; gap: 10px; margin: 0 4px 14px; padding: 0 0 14px; border-bottom: 1px solid rgba(11, 35, 80, .1); }
.aai-brand img { height: 30px; width: auto; display: block; }
.aai-brand span { padding: 3px 9px; border-radius: 99px; background: #fff1e0; color: #c25e00; font: 800 11px/1.2 var(--a-body); letter-spacing: .08em; text-transform: uppercase; }
.aai-brand-foot { display: flex; align-items: center; gap: 10px; margin: auto 4px 0; padding: 14px 0 0; border-top: 1px solid rgba(11, 35, 80, .1); color: #3c4a66; font-size: 11.5px; line-height: 1.4; }
.aai-foot-mark { flex: none; display: grid; place-items: center; width: 34px; height: 38px; }
.aai-foot-mark .aai-gmark { width: 34px; height: 38px; }
.aai-brand-foot b { color: #2f7bc4; }
.aai-ed-mark { flex: none; display: grid; place-items: center; width: 40px; height: 44px; margin: -4px 4px -4px 0; }
.aai-ed-mark .aai-gmark { width: 40px; height: 44px; filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .95)) drop-shadow(0 0 8px rgba(255, 255, 255, .35)); }
@media (max-width: 900px) { .aai-brand-foot { display: none; } .aai-cvbar { left: 12px; right: 12px; max-width: none; top: 80px; } }
.aai-cvbar { max-width: calc(100% - 176px); }
.aai-brand img { height: 32px; }
.aai-blank-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: linear-gradient(145deg, #2f7bc4, #4a8fd2); color: #fff; font: 700 13.5px var(--a-body); cursor: pointer; box-shadow: 0 8px 20px -10px rgba(47, 123, 196, .7); transition: transform .2s, box-shadow .2s; }
.aai-blank-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(47, 123, 196, .8); }
.aai-blank-btn svg { width: 16px; height: 16px; }
.aai-blank-card { width: min(640px, calc(100vw - 32px)); text-align: left; }
.aai-blank-card h3 { margin: 0 0 6px; }
.aai-blank-card p { margin: 0 0 16px; color: #3c4a66; font-size: 14px; }
.aai-blank-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.aai-blank-grid button { display: grid; justify-items: center; gap: 4px; padding: 16px 10px 14px; border: 0; border-radius: 14px; background: #f5f8fe; box-shadow: inset 0 0 0 1px #dde5f3; cursor: pointer; transition: box-shadow .2s, transform .2s; font-family: var(--a-body); }
.aai-blank-grid button:hover { box-shadow: inset 0 0 0 2px #2f7bc4; transform: translateY(-2px); }
.aai-blank-grid i { display: block; margin-bottom: 8px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1.5px #2f7bc4, 0 6px 12px -6px rgba(47, 123, 196, .5); }
.aai-blank-grid b { color: #0f2a4a; font-size: 13.5px; }
.aai-blank-grid span { color: #2f7bc4; font-size: 12px; font-weight: 700; }
.aai-blank-grid em { color: #7a869c; font-size: 11.5px; font-style: normal; }
@media (max-width: 560px) { .aai-blank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Sidebar items: full rounded pills inside the sidebar, counts as small badges (nothing runs into the edge). */
.aai-dash-side { min-width: 0; overflow: hidden; }
.aai-side-nav, .aai-side-nav > *, .aai-folder-row > button:first-child { min-width: 0; }
.aai-side-nav button span:not(.aai-gen-dot) { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; overflow-wrap: anywhere; }
.aai-folder-row { position: relative; }
.aai-folder-row > .aai-folder-more { position: absolute; right: 6px; left: auto; top: 50%; transform: translateY(-50%); z-index: 2; width: 28px; min-width: 0; height: 28px; padding: 0; pointer-events: none; }

.aai-side-nav { padding-right: 4px; }
.aai-side-nav button { width: 100%; border-radius: 14px; }
.aai-side-nav button:hover { transform: none; }
.aai-side-nav button em { flex: none; min-width: 28px; margin-left: auto; padding: 3px 8px; border-radius: 99px; background: rgba(11, 35, 80, .07); text-align: center; line-height: 1.2; }
.aai-side-nav button.is-on em { background: rgba(255, 255, 255, .2); color: #fff; }

/* Home: the step bar sits at the top of the studio (no tip bar above it any more). */
.aai-dash-main > .aai-flowbar, .admin-bar .aai-dash-main > .aai-flowbar { top: 0; }

/* Generator folder intro: the figure draws itself beside what the generator is for and how it works. */
.aai-gen-intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 6px 0 4px; }
.aai-gi-art { border-radius: 18px; background: #fff; box-shadow: 0 22px 50px -28px rgba(0, 40, 120, .45), inset 0 0 0 1px #e1e8f5; padding: 12px; overflow: hidden; animation: aaiGiIn .6s cubic-bezier(.2, .7, .2, 1) both; }
.aai-gi-art .afig-frame { border-radius: 12px; }
.aai-gi-copy { animation: aaiGiIn .6s .12s cubic-bezier(.2, .7, .2, 1) both; }
.aai-gi-copy .aai-eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.aai-gi-copy .aai-gen-dot { width: 12px; height: 12px; border-radius: 4px; }
.aai-gi-copy h2 { margin: 8px 0 10px; font: 800 clamp(24px, 2.4vw, 32px)/1.12 Roboto, system-ui, sans-serif; letter-spacing: -.01em; color: #0f2a4a; }
.aai-gi-lead { margin: 0 0 18px; color: #3c4a66; font-size: 15.5px; line-height: 1.55; }
.aai-gi-steps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.aai-gi-steps li { display: flex; gap: 12px; align-items: flex-start; opacity: 0; animation: aaiGiIn .5s cubic-bezier(.2, .7, .2, 1) both; }
.aai-gi-steps li:nth-child(1) { animation-delay: .25s; } .aai-gi-steps li:nth-child(2) { animation-delay: .38s; } .aai-gi-steps li:nth-child(3) { animation-delay: .51s; }
.aai-gi-steps b { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(145deg, #2f7bc4, #4a8fd2); color: #fff; font-size: 13px; box-shadow: 0 6px 14px -6px rgba(47, 123, 196, .7); }
.aai-gi-steps span { color: #3c4a66; font-size: 13.5px; line-height: 1.45; }
.aai-gi-steps em { display: block; font-style: normal; font-weight: 800; color: #0f2a4a; font-size: 14px; }
.aai-gi-actions .aai-btn { gap: 8px; }
@keyframes aaiGiIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) { .aai-gen-intro { grid-template-columns: 1fr; } }

/* Create new: choose a generator or a blank canvas */
.aai-chooser-card { width: min(980px, calc(100vw - 32px)); text-align: left; padding: 24px; }
.aai-ch-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.aai-ch-head h3 { margin: 4px 0 0; font: 800 24px/1.2 Roboto, system-ui, sans-serif; color: #0f2a4a; }
.aai-ch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.aai-ch-item { display: grid; grid-template-rows: auto 1fr; gap: 10px; padding: 10px; border: 0; border-radius: 16px; background: #f5f8fe; box-shadow: inset 0 0 0 1px #dde5f3; text-align: left; cursor: pointer; opacity: 0; animation: aaiGiIn .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * .05s); transition: box-shadow .2s, transform .2s; font-family: var(--a-body); }
.aai-ch-item:hover { box-shadow: inset 0 0 0 2px #2f7bc4, 0 14px 30px -18px rgba(47, 123, 196, .6); transform: translateY(-2px); }
.aai-ch-art { display: block; border-radius: 11px; overflow: hidden; background: #fff; }
.aai-ch-txt b { display: block; color: #0f2a4a; font-size: 15px; margin: 0 4px 2px; }
.aai-ch-txt em { display: block; color: #5b6880; font-size: 12.5px; font-style: normal; line-height: 1.4; margin: 0 4px 4px; }
.aai-ch-blank .aai-ch-art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; background: repeating-linear-gradient(0deg, transparent 0 15px, #eef2fa 15px 16px), repeating-linear-gradient(90deg, transparent 0 15px, #eef2fa 15px 16px), #fff; }
.aai-ch-blank .aai-ch-art svg { width: 34px; height: 34px; color: #2f7bc4; }
@media (max-width: 760px) { .aai-ch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Editor: export as a pop-up (canvas uses the full width) ===== */
.aai-editor { position: relative; }
.aai-ed-body, .aai-ed-body[class] { grid-template-columns: 92px minmax(0, 1fr); }
.aai-editor .aai-side { position: absolute; z-index: 30; top: 66px; right: 16px; width: min(400px, calc(100% - 32px)); max-height: calc(100% - 82px); border: 0; border-radius: 18px; background: #fff; box-shadow: 0 30px 70px -28px rgba(11, 35, 80, .55), 0 0 0 1px rgba(47, 123, 196, .1); overflow: hidden; opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top right; pointer-events: none; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility 0s .2s; }
.aai-editor.is-xopen .aai-side { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .2s ease, transform .2s ease; }
.aai-editor .aai-side .aai-tabs { position: relative; }
.aai-side-x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .18); color: #fff; font-size: 15px; cursor: pointer; }
.aai-side-x:hover { background: rgba(255, 255, 255, .3); }
.aai-editor .aai-side-body { overflow: auto; }
.aai-ed-export { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: #e8641c; color: #fff; font: 800 13.5px var(--a-body); cursor: pointer; box-shadow: 0 8px 18px -10px rgba(255, 140, 40, .9); transition: transform .2s, box-shadow .2s; }
.aai-ed-export:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgba(255, 140, 40, 1); }
.is-xopen .aai-ed-export { background: #fff; }
@media (max-width: 900px) { .aai-ed-body, .aai-ed-body[class] { grid-template-columns: 60px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } .aai-editor .aai-side { top: 110px; } }

/* ===== Library pop-up: categories + grid ===== */
.aai-lib { position: absolute; z-index: 40; display: flex; align-items: flex-start; gap: 8px; filter: drop-shadow(0 18px 34px rgba(11, 35, 80, .22)); animation: aaiGiIn .18s ease both; }
.aai-lib-cats { display: grid; gap: 2px; width: 200px; padding: 8px; border-radius: 16px; background: #fff; }
.aai-lib-cats button { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 11px; background: none; color: #33405a; font: 600 14.5px var(--a-body); cursor: pointer; text-align: left; }
.aai-lib-cats button svg { width: 28px; height: 22px; flex: none; color: #33405a; }
.aai-lib-cats button span { flex: 1; }
.aai-lib-cats button i { font-style: normal; color: #8a96ad; font-size: 18px; }
.aai-lib-cats button:hover, .aai-lib-cats button.is-on { background: #f1f5fc; color: #2f7bc4; }
.aai-lib-cats button.is-on svg { color: #2f7bc4; }
.aai-lib-grid { display: grid; grid-template-columns: repeat(4, 64px); gap: 4px; max-height: min(72vh, 620px); overflow: auto; padding: 10px; border-radius: 16px; background: #fff; }
.aai-lib[data-for="lines"] .aai-lib-grid { grid-template-columns: repeat(4, 64px); }
.aai-lib-grid button { display: grid; place-items: center; width: 64px; height: 48px; border: 0; border-radius: 10px; background: none; cursor: pointer; transition: background .15s, transform .15s; }
.aai-lib-grid button:hover { background: #eef4ff; transform: translateY(-1px); }
.aai-lib-svg { width: 52px; height: 36px; overflow: visible; }
.aai-lib-tool { width: 26px; height: 26px; color: #33405a; }
.aai-free-draft { fill: none; stroke: #2f7bc4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.aai-poly-pt { fill: #fff; stroke: #2f7bc4; stroke-width: .8; pointer-events: none; }
.aai-poly-pt.is-first { fill: #e8641c; }

/* ===== Style bar (selection) ===== */
.aai-stylebar { position: absolute; z-index: 8; top: 34px; left: 160px; right: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: max-content; max-width: calc(100% - 174px); padding: 6px 8px; border-radius: 14px; background: #fff; box-shadow: 0 14px 34px -16px rgba(11, 35, 80, .45), inset 0 0 0 1px rgba(47, 123, 196, .12); font: 600 12.5px/1 var(--a-body); color: #0f2a4a; animation: aaiGiIn .16s ease both; }
.is-canvas .aai-stylebar { display: none; }
.aai-sb-g { display: flex; align-items: center; gap: 4px; padding: 0 6px; border-right: 1px solid #e6ebf4; }
.aai-sb-g:last-child { border-right: 0; }
.aai-stylebar select { height: 32px; max-width: 150px; padding: 0 6px; border: 1px solid #d6deec; border-radius: 8px; background: #fff; color: #0f2a4a; font: 600 12.5px var(--a-body); }
.aai-sb-size { display: inline-flex; align-items: center; height: 32px; border: 1px solid #d6deec; border-radius: 8px; overflow: hidden; }
.aai-sb-size button { width: 26px; height: 100%; border: 0; background: #f5f8fe; color: #0f2a4a; font-size: 15px; cursor: pointer; }
.aai-sb-size input { width: 46px; height: 100%; border: 0; text-align: center; font: 700 13px var(--a-body); color: #0f2a4a; outline: 0; }
.aai-sb-btn { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border: 0; border-radius: 8px; background: none; color: #33405a; font: 600 14px var(--a-body); cursor: pointer; }
.aai-sb-btn svg { width: 18px; height: 18px; }
.aai-sb-btn:hover { background: #eef4ff; color: #2f7bc4; }
.aai-sb-btn.is-on { background: #e2ecff; color: #2f7bc4; }
.aai-sb-small { font-size: 16px; }
.aai-sb-col { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border-radius: 8px; cursor: pointer; }
.aai-sb-col:hover { background: #eef4ff; }
.aai-sb-col input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.aai-sb-col i { width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(11, 35, 80, .25); }
.aai-sb-col i.is-none { background: linear-gradient(135deg, #fff 45%, #e5484d 45%, #e5484d 55%, #fff 55%) !important; }
.aai-sb-col em, .aai-sb-range em, .aai-sb-sel em { font-style: normal; color: #5b6880; font-weight: 600; }
.aai-sb-range { display: grid; gap: 4px; padding: 0 4px; }
.aai-sb-range[hidden] { display: none; }
.aai-sb-range em b { color: #2f7bc4; }
.aai-sb-range input { width: 96px; accent-color: #2f7bc4; }
.aai-sb-sel { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 900px) { .aai-stylebar { left: 8px; right: 8px; top: 80px; max-width: none; } }
.aai-lib .aai-lib-grid[data-cols="3"] { grid-template-columns: repeat(3, 64px); }
.aai-lib .aai-lib-grid[data-cols="4"] { grid-template-columns: repeat(4, 64px); }
.aai-lib .aai-lib-grid[data-cols="5"] { grid-template-columns: repeat(5, 64px); }

/* Folder rows: no ⋯ button (options open with a right-click); the count stays visible. */
.aai-folder-row > .aai-folder-more, .aai-folder-row:hover > .aai-folder-more, .aai-folder-row:focus-within > .aai-folder-more { opacity: 0 !important; pointer-events: none !important; }
.aai-folder-grip, .aai-folder-row:hover .aai-folder-grip, .aai-folder-row:focus-within .aai-folder-grip { display: none !important; }

/* Export pop-up: compact */
.aai-x-bgs { display: flex; gap: 8px; }
.aai-x-bgs button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px #d6deec; color: #0f2a4a; font: 700 13px var(--a-body); cursor: pointer; }
.aai-x-bgs button.is-on { box-shadow: inset 0 0 0 2px #2f7bc4; background: #eef4ff; color: #2f7bc4; }
.aai-x-bgs i { width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(11, 35, 80, .25); }
.aai-x-bgs i.is-clear { background: repeating-conic-gradient(#d6deec 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
.aai-x-bg { align-items: center; }
.aai-x-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 6px; }
.aai-x-actions .aai-btn { min-height: 46px; }
.aai-x-actions .aai-lock-tag { margin: 0 6px 0 0; }
.aai-x-bgs button { white-space: nowrap; flex: 1; justify-content: center; }
.aai-x-bg { grid-template-columns: auto 1fr; }

/* ===== Repair bar and areas ===== */
.aai-repairbar .aai-rp-shape { display: inline-flex; gap: 5px; padding: 0 9px; font-size: 12.5px; }
.aai-repairbar { flex-wrap: nowrap; }
.aai-rp-step { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px 0 8px; color: #3c4a66; font-weight: 700; white-space: nowrap; }
.aai-rp-step[hidden] { display: none; }
.aai-rp-step b { color: #0f2a4a; }
.aai-rp-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #1aa36f; color: #fff !important; font-size: 11px; }
.aai-rp-n.is-2 { background: #e8641c; color: #fff !important; }
.aai-rp-clear { margin-left: 4px; height: 26px; padding: 0 10px; border: 0; border-radius: 99px; background: #eef4ff; color: #2f7bc4; font: 700 11.5px var(--a-body); cursor: pointer; }
.aai-rp-draft { fill: rgba(232, 100, 28, .16); stroke: #ff8a1f; stroke-dasharray: 5 4; stroke-linejoin: round; pointer-events: none; animation: aaiAnts 0.6s linear infinite; }
.aai-rp-draft.is-ref { fill: rgba(26, 163, 111, .14); stroke: #1aa36f; }
.aai-rp-refmark { fill: rgba(26, 163, 111, .12); stroke: #1aa36f; stroke-dasharray: 6 4; pointer-events: none; animation: aaiAnts 0.9s linear infinite; }
@keyframes aaiAnts { to { stroke-dashoffset: -18; } }

/* ===== Tip under the canvas: small, light, animated ===== */
.aai-hint, .aai-hint[class] { bottom: 12px; padding: 5px 12px 5px 26px; border-radius: 99px; background: rgba(255, 255, 255, .9); color: #3c4a66; font: 600 11.5px/1.35 var(--a-body); box-shadow: 0 8px 22px -12px rgba(11, 35, 80, .35), inset 0 0 0 1px rgba(47, 123, 196, .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.aai-hint::before { content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #e8641c; box-shadow: 0 0 0 0 rgba(232, 100, 28, .55); animation: aaiHintDot 2s ease-out infinite; }
.aai-hint.is-swap { animation: aaiHintIn .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes aaiHintIn { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes aaiHintDot { 0% { box-shadow: 0 0 0 0 rgba(232, 100, 28, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(232, 100, 28, 0); } }

/* Generator intro: breathing room between the text, the steps and the button */
.aai-gen-intro .aai-gi-lead { margin: 0 0 22px; }
.aai-gen-intro .aai-gi-steps { margin: 0 0 30px; gap: 14px; }
.aai-gen-intro .aai-gi-actions { margin-top: 6px; padding-top: 2px; }

/* Export pop-up: clearly visible close button */
.aai-editor .aai-side .aai-side-x, .aai-editor .aai-side .aai-side-x[class] { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .22) !important; color: #fff !important; font: 700 17px/1 var(--a-body); opacity: 1 !important; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); cursor: pointer; transition: background .2s, transform .2s; }
.aai-editor .aai-side .aai-side-x:hover { background: #e8641c !important; color: #fff !important; transform: translateY(-50%) rotate(90deg); }

/* ===== Spell check ===== */
.aai-spell-line { fill: none; stroke: #e5484d; stroke-linejoin: round; pointer-events: none; }
.aai-spell-hit { fill: transparent; cursor: pointer; pointer-events: all; }
.aai-spell-hit:hover { fill: rgba(229, 72, 77, .1); }
.aai-spell-pop { position: absolute; z-index: 45; width: 240px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px -16px rgba(11, 35, 80, .45), inset 0 0 0 1px rgba(47, 123, 196, .12); font: 600 13px/1.3 var(--a-body); color: #0f2a4a; animation: aaiGiIn .16s ease both; }
.aai-sp-h { display: block; margin-bottom: 4px; color: #7a869c; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.aai-spell-pop s { display: block; margin-bottom: 8px; color: #e5484d; font-size: 14px; }
.aai-sp-sugs { display: grid; gap: 4px; margin-bottom: 8px; }
.aai-sp-sugs button { text-align: left; padding: 8px 10px; border: 0; border-radius: 9px; background: #eef4ff; color: #2f7bc4; font: 700 13.5px var(--a-body); cursor: pointer; }
.aai-sp-sugs button:hover { background: #2f7bc4; color: #fff; }
.aai-sp-more { display: flex; gap: 6px; padding-top: 8px; border-top: 1px solid #e6ebf4; }
.aai-sp-more button { flex: 1; padding: 6px 4px; border: 0; border-radius: 8px; background: none; color: #5b6880; font: 600 12px var(--a-body); cursor: pointer; }
.aai-sp-more button:hover { background: #f1f5fc; color: #0f2a4a; }

/* ===== Adjust bar ===== */
.aai-adjbar .aai-sb-range input { width: 110px; }
.is-adjust .aai-stylebar:not(.aai-adjbar) { display: none; }

/* ===== Symbols panel ===== */
.aai-symbols .aai-lib-cats { width: 190px; }
.aai-sym-ic { display: grid; place-items: center; width: 28px; height: 24px; border-radius: 7px; background: #f1f5fc; color: #2f7bc4; font: 700 14px/1 'Cambria Math', 'Times New Roman', serif; }
.aai-sym-grid { display: grid; grid-template-columns: repeat(8, 42px); gap: 4px; max-height: min(62vh, 460px); overflow: auto; padding: 10px; border-radius: 16px; background: #fff; }
.aai-sym-grid button { min-width: 42px; height: 38px; padding: 0 4px; border: 0; border-radius: 9px; background: #f7f9fd; color: #0f2a4a; font: 600 16px/1 'Cambria Math', 'Segoe UI Symbol', 'Times New Roman', serif; cursor: pointer; transition: background .15s, transform .15s; }
.aai-sym-grid button.is-wide { grid-column: span 2; font: 700 13px/1 var(--a-body); }
.aai-sym-grid button:hover { background: #2f7bc4; color: #fff; transform: translateY(-1px); }

/* Opening a figure: the aFig logo writes itself on a soft card */
.aai-op-stage { position: relative; display: grid; place-items: center; width: min(520px, 90%); aspect-ratio: 16 / 8; margin-top: 4px; border-radius: 22px; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #f4f8ff 60%, #eaf1fd 100%); box-shadow: inset 0 0 0 1px #dfe8f8, 0 30px 60px -36px rgba(15, 42, 74, .55); animation: opIn .55s var(--a-ease) both; }
.aai-op-ring { position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(47, 122, 229, .13), rgba(232, 100, 28, .07) 60%, transparent 72%); animation: opBreath 2.8s ease-in-out infinite; }
.aai-op-mark { position: relative; z-index: 2; width: 72%; animation: opRise .8s cubic-bezier(.34, 1.56, .64, 1) .05s both, opFloatMark 3.2s ease-in-out 2.6s infinite; }
.aai-op-mark svg { filter: drop-shadow(0 0 0 rgba(47, 122, 229, 0)); animation: opGlow 1.4s ease 2.3s both; }
.aai-op-mark svg, .aai-op-mark img { display: block; width: 100%; height: auto; overflow: visible; }
.aai-op-mark .aai-op-stroke { stroke-dasharray: 1; stroke-dashoffset: 1; animation: opWrite .75s cubic-bezier(.65, 0, .35, 1) forwards; }
.aai-op-mark svg .lf-smile { animation: lfPaint 1.9s cubic-bezier(.55, .05, .35, 1) .4s forwards; }
.aai-opening.is-done .aai-op-stage { animation: opDone .35s ease forwards; }
@keyframes opDone { to { transform: scale(1.02); box-shadow: inset 0 0 0 1px #dfe8f8, 0 30px 60px -30px rgba(255, 138, 31, .45); } }
.aai-op-mark svg .lf-dot { opacity: 0; transform-box: fill-box; transform-origin: center; animation: opDot .6s cubic-bezier(.34, 1.56, .64, 1) 1.75s forwards; }
.aai-op-sheen { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .75) 50%, transparent 62%); transform: translateX(-100%); animation: opSheen 2.2s ease-in-out 2.4s infinite; pointer-events: none; z-index: 3; }
.aai-op-stage .aai-op-check { right: 16px; top: 16px; z-index: 4; animation-delay: 2.6s; }
@keyframes opWrite { to { stroke-dashoffset: 0; } }
@keyframes opDot { from { opacity: 0; transform: translateY(-60%) scale(.3); } to { opacity: 1; transform: none; } }
@keyframes opRise { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes opBreath { 0%, 100% { transform: scale(.94); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .aai-op-mark .aai-op-stroke { stroke-dashoffset: 0; } .aai-op-mark svg .lf-dot { opacity: 1; } }

/* Colour scheme picker (Describe step) */
.aai-scheme { position: relative; }
.aai-scheme-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 8px 12px; border: 1px solid #d6deec; border-radius: 12px; background: #fff; color: #0f2a4a; font: 600 14px var(--a-body); text-align: left; cursor: pointer; transition: border-color .18s, box-shadow .18s; }
.aai-scheme-btn:hover, .aai-scheme.is-open .aai-scheme-btn { border-color: var(--a-royal, #2f7bc4); box-shadow: 0 0 0 4px rgba(47, 123, 196, .1); }
.aai-scheme-btn em { flex: 1; min-width: 0; overflow: hidden; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.aai-scheme-btn svg { flex: none; width: 18px; height: 18px; color: #5b6b82; transition: transform .25s var(--a-ease, ease); }
.aai-scheme.is-open .aai-scheme-btn svg { transform: rotate(180deg); }
.aai-sw { flex: none; display: inline-flex; overflow: hidden; border-radius: 5px; box-shadow: 0 0 0 1px rgba(11, 35, 80, .18); }
.aai-sw i { display: block; width: 13px; height: 18px; }
.aai-sw.is-auto i { background: linear-gradient(135deg, #2f7bc4, #4a8fd2); }
.aai-sw.is-auto i:nth-child(2) { background: #9cc0f5; } .aai-sw.is-auto i:nth-child(3) { background: #e8641c; } .aai-sw.is-auto i:nth-child(4) { background: #2ba59b; }
.aai-sw.is-auto i:nth-child(5) { background: #7c3aed; } .aai-sw.is-auto i:nth-child(6) { background: #e32d91; } .aai-sw.is-auto i:nth-child(7) { background: #ffca08; } .aai-sw.is-auto i:nth-child(8) { background: #1d2a55; }
.aai-scheme-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-height: 340px; overflow-y: auto; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 24px 50px -18px rgba(11, 35, 80, .45), 0 0 0 1px rgba(47, 123, 196, .12); transform-origin: top center; animation: aaiSchemeIn .2s var(--a-ease, ease) both; scrollbar-width: thin; }
.aai-scheme-list[hidden] { display: none; }
.aai-scheme-sep { margin: 6px 8px 4px; color: #7a879c; font: 700 10.5px var(--a-body); letter-spacing: .08em; text-transform: uppercase; }
.aai-scheme-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 9px; background: transparent; color: #0f2a4a; font: 600 13.5px var(--a-body); text-align: left; cursor: pointer; transition: background .14s, transform .14s; }
.aai-scheme-opt em { font-style: normal; }
.aai-scheme-opt:hover, .aai-scheme-opt:focus-visible { outline: none; background: #f1f6ff; transform: translateX(2px); }
.aai-scheme-opt.is-on { background: #e7f0ff; box-shadow: inset 0 0 0 1.5px rgba(47, 123, 196, .45); }
.aai-scheme-opt.is-on em::after { content: "✓"; margin-left: 8px; color: #ff8a1f; font-weight: 800; }
@keyframes aaiSchemeIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .aai-sw i { width: 10px; } .aai-scheme-list { max-height: 50vh; } }

/* Upload gallery: earlier uploads and the member's own folders */
.aai-gal { position: absolute; z-index: 45; display: flex; flex-direction: column; width: min(620px, calc(100% - 120px)); height: min(520px, calc(100% - 24px)); border-radius: 18px; background: #fff; box-shadow: 0 28px 60px -24px rgba(11, 35, 80, .5), 0 0 0 1px rgba(47, 123, 196, .1); overflow: hidden; font: 600 13px var(--a-body); color: #0f2a4a; transform-origin: left top; animation: aaiGalIn .24s cubic-bezier(.2, .9, .3, 1.1) both; }
.aai-gal.is-out { animation: aaiGalOut .16s ease forwards; }
.aai-gal.is-filedrop { box-shadow: 0 28px 60px -24px rgba(11, 35, 80, .5), 0 0 0 3px #e8641c; }
.aai-gal-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 18px; border-bottom: 1px solid #edf1f8; background: linear-gradient(180deg, #fbfcff, #fff); }
.aai-gal-head > div { flex: 1; display: grid; gap: 1px; }
.aai-gal-head b { font: 800 16px var(--a-head); letter-spacing: -.01em; }
.aai-gal-head em { font-style: normal; font-weight: 600; font-size: 12px; color: #6b7a93; }
.aai-gal-up, .aai-gal-nf { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border: 0; border-radius: 99px; font: 700 13px var(--a-body); cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; }
.aai-gal-up { background: linear-gradient(135deg, #e8641c, #ff8a1f); color: #3a1d00; box-shadow: 0 8px 18px -10px rgba(255, 138, 31, .9); }
.aai-gal-nf { background: #eef4ff; color: #2f7bc4; }
.aai-gal-up:hover, .aai-gal-nf:hover { transform: translateY(-1px); }
.aai-gal-up svg, .aai-gal-nf svg { width: 16px; height: 16px; }
.aai-gal-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f1f4f9; color: #0f2a4a; font: 400 20px/1 var(--a-body); cursor: pointer; }
.aai-gal-x:hover { background: #e3e9f3; }
.aai-gal-body { flex: 1; display: grid; grid-template-columns: 178px 1fr; min-height: 0; }
.aai-gal-fl { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; border-right: 1px solid #edf1f8; background: #f8faff; overflow-y: auto; }
.aai-gal-sep { margin: 10px 8px 4px; color: #7a879c; font: 700 10.5px var(--a-body); letter-spacing: .08em; text-transform: uppercase; }
.aai-gal-f { position: relative; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 8px 0 10px; border-radius: 10px; color: #23365e; cursor: pointer; transition: background .15s, box-shadow .15s, transform .15s; outline: none; }
.aai-gal-f span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.aai-gal-f i { min-width: 22px; padding: 2px 6px; border-radius: 99px; background: #e7eefb; color: #3c5480; font: 700 11px var(--a-body); font-style: normal; text-align: center; }
.aai-gal-f svg { flex: none; width: 16px; height: 16px; color: #5b7bb4; }
.aai-gal-f:hover, .aai-gal-f:focus-visible { background: #eef4ff; }
.aai-gal-f.is-on { background: linear-gradient(135deg, #2f7bc4, #4a8fd2); color: #fff; box-shadow: 0 8px 18px -12px rgba(47, 123, 196, .9); }
.aai-gal-f.is-on svg { color: #fff; } .aai-gal-f.is-on i { background: rgba(255, 255, 255, .22); color: #fff; }
.aai-gal-fx { display: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; font: 600 13px/1 var(--a-body); cursor: pointer; opacity: .75; }
.aai-gal-fx:hover { opacity: 1; background: rgba(47, 123, 196, .12); }
.aai-gal-f.is-mine:hover .aai-gal-fx { display: inline-block; } .aai-gal-f.is-mine:hover i { display: none; }
.aai-gal.is-dragging .aai-gal-f:not([data-f="all"]) { outline: 1.5px dashed rgba(47, 123, 196, .35); outline-offset: -3px; }
.aai-gal-f.is-drop { background: #fff3e6 !important; color: #0f2a4a !important; box-shadow: inset 0 0 0 2px #e8641c !important; transform: scale(1.03); }
.aai-gal-f.is-got { animation: aaiGalGot .6s ease; }
.aai-gal-main { min-height: 0; overflow-y: auto; padding: 12px; scrollbar-width: thin; }
.aai-gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.aai-gal-it { position: relative; display: grid; grid-template-rows: 1fr auto; aspect-ratio: 1 / 1.08; border-radius: 12px; background: repeating-conic-gradient(#f1f4f9 0 25%, #fff 0 50%) 0 0 / 14px 14px; box-shadow: inset 0 0 0 1px #e3e9f3; overflow: hidden; cursor: pointer; animation: aaiGalItem .32s ease both; transition: transform .18s, box-shadow .18s; }
.aai-gal-it img { width: 100%; height: 100%; min-height: 0; object-fit: contain; padding: 8px; box-sizing: border-box; pointer-events: none; }
.aai-gal-it span { padding: 5px 8px 6px; overflow: hidden; background: rgba(255, 255, 255, .94); color: #3c4a66; font: 600 11.5px var(--a-body); white-space: nowrap; text-overflow: ellipsis; }
.aai-gal-it:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px #4a8fd2, 0 12px 22px -14px rgba(47, 123, 196, .7); }
.aai-gal-it.is-new { box-shadow: inset 0 0 0 2px #e8641c; }
.aai-gal-it.is-drag { opacity: .45; transform: scale(.96); }
.aai-gal-it.is-placing { opacity: .6; pointer-events: none; }
.aai-gal-it.is-busy { display: grid; place-items: center; cursor: default; background: #f6f9ff; }
.aai-gal-ib { position: absolute; top: 6px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .96); color: #0f2a4a; box-shadow: 0 4px 10px -4px rgba(11, 35, 80, .4); font: 600 16px/1 var(--a-body); cursor: pointer; opacity: 0; transform: scale(.85); transition: opacity .15s, transform .15s; }
.aai-gal-ib svg { width: 15px; height: 15px; }
.aai-gal-ib[data-gmove] { left: 6px; } .aai-gal-ib.is-del { right: 6px; color: #c2410c; }
.aai-gal-it:hover .aai-gal-ib, .aai-gal-ib:focus-visible { opacity: 1; transform: none; }
.aai-gal-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 6px; padding: 54px 20px; color: #6b7a93; text-align: center; }
.aai-gal-empty svg { width: 34px; height: 34px; color: #9cb3db; }
.aai-gal-empty b { color: #0f2a4a; font: 800 15px var(--a-head); }
.aai-gal-empty p { max-width: 300px; margin: 0; font-weight: 500; font-size: 12.5px; line-height: 1.5; }
.aai-gal .aai-spin { width: 22px; height: 22px; border: 2.5px solid #dbe6f8; border-top-color: #2f7bc4; border-radius: 50%; animation: aai-spin .8s linear infinite; }
.aai-gal-foot { padding: 8px 16px; border-top: 1px solid #edf1f8; background: #fbfcff; color: #7a879c; font-size: 11.5px; font-weight: 600; }
.aai-gal-tip { position: absolute; z-index: 3; width: 214px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 22px 44px -18px rgba(11, 35, 80, .5), 0 0 0 1px rgba(47, 123, 196, .12); pointer-events: none; animation: aaiGalTip .18s ease both; }
.aai-gal-tip b { display: block; font: 800 13.5px var(--a-head); }
.aai-gal-tip em { display: block; margin-bottom: 8px; color: #6b7a93; font-style: normal; font-size: 11.5px; }
.aai-gal-tip div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.aai-gal-tip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 7px; background: #f1f4f9; box-shadow: inset 0 0 0 1px #e3e9f3; }
.aai-gal-tip small { display: block; margin-top: 6px; color: #2f7bc4; font-weight: 700; font-size: 11.5px; }
.aai-gal-tip p { margin: 0; color: #7a879c; font-size: 12px; font-weight: 500; }
.aai-gal-menu { position: absolute; z-index: 4; display: grid; min-width: 180px; max-height: 260px; overflow-y: auto; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 18px 36px -14px rgba(11, 35, 80, .5), 0 0 0 1px rgba(47, 123, 196, .12); animation: aaiGalTip .16s ease both; }
.aai-gal-menu b { padding: 4px 8px 6px; color: #7a879c; font: 700 10.5px var(--a-body); letter-spacing: .08em; text-transform: uppercase; }
.aai-gal-menu button { padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: #0f2a4a; font: 600 13px var(--a-body); text-align: left; cursor: pointer; }
.aai-gal-menu button:hover { background: #eef4ff; }
.aai-gal-menu button.is-on { color: #2f7bc4; } .aai-gal-menu button.is-on::after { content: " ✓"; color: #ff8a1f; }
.aai-gal-menu [data-mnew] { margin-top: 4px; border-top: 1px solid #edf1f8; border-radius: 0 0 8px 8px; color: #2f7bc4; }
@keyframes aaiGalIn { from { opacity: 0; transform: translateX(-10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes aaiGalOut { to { opacity: 0; transform: translateX(-8px) scale(.98); } }
@keyframes aaiGalItem { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes aaiGalTip { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes aaiGalGot { 0% { transform: scale(1); } 40% { transform: scale(1.06); background: #fff3e6; } 100% { transform: scale(1); } }
@media (max-width: 760px) { .aai-gal { left: 8px !important; right: 8px; width: auto; } .aai-gal-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .aai-gal-fl { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #edf1f8; } .aai-gal-sep { display: none; } .aai-gal-f { flex: none; } }
@media (prefers-reduced-motion: reduce) { .aai-gal, .aai-gal *, .aai-gal-tip { animation: none !important; } }

/* Opening: halo, glow and sparkle burst */
.aai-op-halo { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 0deg, rgba(47, 122, 229, 0), rgba(47, 122, 229, .22), rgba(168, 46, 232, .2), rgba(255, 79, 134, .18), rgba(232, 100, 28, .26), rgba(47, 122, 229, 0)); filter: blur(26px); opacity: 0; animation: opHaloIn 1.2s ease .2s forwards, opSpin 7s linear infinite; }
.aai-op-sparks { position: absolute; left: 50%; top: 50%; z-index: 1; width: 0; height: 0; }
.aai-op-sparks i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); opacity: 0; animation: opSpark 1.3s cubic-bezier(.2, .8, .3, 1) var(--t) forwards; }
.aai-op-sparks i:nth-child(3n) { width: 5px; height: 5px; left: -2.5px; top: -2.5px; }
.aai-op-sparks i:nth-child(4n) { border-radius: 2px; transform: rotate(45deg); }
.aai-op-mark .aai-op-stroke { filter: drop-shadow(0 0 0 transparent); }
@keyframes opSpin { to { transform: rotate(360deg); } }
@keyframes opHaloIn { to { opacity: 1; } }
@keyframes opSpark { 0% { opacity: 0; transform: rotate(var(--a)) translateX(10px) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(1); } }
@keyframes opGlow { 0% { filter: drop-shadow(0 0 0 rgba(47, 122, 229, 0)); } 40% { filter: drop-shadow(0 0 18px rgba(47, 122, 229, .55)) drop-shadow(0 0 30px rgba(232, 100, 28, .35)); } 100% { filter: drop-shadow(0 6px 14px rgba(10, 42, 156, .18)); } }
@keyframes opFloatMark { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .aai-op-halo, .aai-op-sparks { display: none; } }

.aai-x-note { flex-basis: 100%; margin: 6px 0 0; color: #6b7a93; font: 500 12px/1.45 var(--a-body); }
.aai-x-bgs button[disabled] { opacity: .45; cursor: not-allowed; }

/* Opening: a figure assembling itself under a magic wand */
.aai-op-mark .mg-svg { width: 100%; height: auto; overflow: visible; }
.mg-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: opWrite var(--d, .8s) cubic-bezier(.65, 0, .35, 1) var(--t, 0s) forwards; }
.mg-pop { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); animation: mgPop .55s cubic-bezier(.34, 1.56, .64, 1) var(--t, 0s) forwards; }
.mg-fill { opacity: 0; animation: mgFade .7s ease var(--t, 0s) forwards; }
.mg-flow { opacity: 0; animation: mgFade .3s ease var(--t, 0s) forwards; }
.mg-label { opacity: 0; transform: translateY(6px); animation: mgLabel .45s cubic-bezier(.2, .9, .3, 1.2) var(--t, 0s) forwards; }
.mg-trail { opacity: 0; animation: mgTrail 2.6s ease calc(var(--k) * .08s) forwards; }
.mg-wand { animation: mgWandOut .5s ease 2.7s forwards; }
@keyframes mgPop { to { opacity: 1; transform: scale(1); } }
@keyframes mgFade { to { opacity: 1; } }
@keyframes mgLabel { to { opacity: 1; transform: none; } }
@keyframes mgTrail { 0% { opacity: 0; } 10% { opacity: .95; } 85% { opacity: .5; } 100% { opacity: 0; } }
@keyframes mgWandOut { to { opacity: 0; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { .mg-draw { stroke-dashoffset: 0; } .mg-pop, .mg-fill, .mg-label, .mg-flow { opacity: 1; transform: none; } .mg-wand, .mg-trail { display: none; } }

/* ✨ Enhance text: button and on-canvas effect */
.aai-enh { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px 0 12px; border: 0; border-radius: 99px; overflow: hidden; color: #fff; font: 800 13px var(--a-body); white-space: nowrap; cursor: pointer; background: linear-gradient(110deg, #2f7bc4, #7c3aed 45%, #ff4f86 70%, #e8641c) 0 0 / 220% 100%; box-shadow: 0 10px 22px -12px rgba(124, 58, 237, .9); animation: aaiEnhFlow 4s ease-in-out infinite; transition: transform .18s, box-shadow .18s; }
.aai-enh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%) -120% 0 / 60% 100% no-repeat; animation: aaiEnhShine 2.6s ease-in-out 1s infinite; }
.aai-enh:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 14px 26px -12px rgba(124, 58, 237, 1); }
.aai-enh-ic { width: 17px; height: 17px; color: #ffe7b8; filter: drop-shadow(0 0 4px rgba(255, 210, 122, .9)); animation: aaiEnhTwinkle 1.8s ease-in-out infinite; }
.aai-enh.is-busy { cursor: progress; }
.aai-enh.is-busy .aai-enh-ic { animation: aaiEnhSpin .9s linear infinite; }
.aai-enh.is-done { background: linear-gradient(110deg, #0f9f6e, #14a38b 50%, #4a8fd2) 0 0 / 220% 100%; }
.aai-enh-fx { position: fixed; z-index: 99995; pointer-events: none; overflow: hidden; border-radius: 4px; transition: opacity .5s ease; }
.aai-enh-fx.is-out { opacity: 0; }
.aai-enh-scan { position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; background: linear-gradient(90deg, transparent, rgba(124, 58, 237, .16) 40%, rgba(255, 255, 255, .85) 50%, rgba(232, 100, 28, .22) 60%, transparent); box-shadow: 0 0 40px rgba(124, 58, 237, .35); animation: aaiEnhScan .9s cubic-bezier(.5, 0, .5, 1) forwards; }
.aai-enh-box { position: absolute; border-radius: 6px; box-shadow: 0 0 0 2px rgba(232, 100, 28, .95), 0 0 16px 3px rgba(124, 58, 237, .45), inset 0 0 12px rgba(255, 210, 122, .45); opacity: 0; transform: scale(1.35); animation: aaiEnhBox 1.6s cubic-bezier(.2, .9, .3, 1.2) both; }
.aai-enh-spark { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: radial-gradient(circle, #fff 0, #ffd27a 45%, #e8641c 75%); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); opacity: 0; animation: aaiEnhSpark 1s ease both; }
@keyframes aaiEnhFlow { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }
@keyframes aaiEnhShine { 0% { background-position: -120% 0; } 60%, 100% { background-position: 220% 0; } }
@keyframes aaiEnhTwinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.18) rotate(12deg); } }
@keyframes aaiEnhSpin { to { transform: rotate(360deg); } }
@keyframes aaiEnhScan { to { left: 100%; } }
@keyframes aaiEnhBox { 0% { opacity: 0; transform: scale(1.35); } 25% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: .0; } }
@keyframes aaiEnhSpark { 0% { opacity: 0; transform: scale(.2) rotate(0); } 40% { opacity: 1; transform: scale(1.2) rotate(90deg); } 100% { opacity: 0; transform: scale(.4) rotate(180deg) translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .aai-enh, .aai-enh::after, .aai-enh-ic, .aai-enh-fx * { animation: none !important; } .aai-enh-box { opacity: 1; transform: none; } }

/* aFig "g" mark: draws in, the brush paints the smile, then gently sways */
.aai-gmark { display: block; overflow: visible; cursor: default; }
.aai-gmark .gm-o, .aai-gmark .gm-stem { stroke-dasharray: 520; stroke-dashoffset: 520; animation: gmDraw .9s cubic-bezier(.65, 0, .35, 1) .1s forwards; }
.aai-gmark .gm-stem { stroke-dasharray: 200; stroke-dashoffset: 200; animation-delay: .55s; animation-duration: .5s; }
.aai-gmark .gm-smile { stroke-dasharray: 1; stroke-dashoffset: 1; animation: gmDraw .7s cubic-bezier(.55, .05, .35, 1) .95s forwards; }
.aai-gmark .gm-brush { transform-box: view-box; }
.aai-gmark .gm-brush-in { transform-origin: 0 0; animation: gmBrushIn .7s cubic-bezier(.34, 1.56, .64, 1) .2s both, gmSway 3.6s ease-in-out 2s infinite; }
.aai-gmark .gm-spark { animation: gmSpark 3.6s ease-out 1.6s infinite; }
.aai-gmark:hover .gm-brush-in { animation: gmPaint .7s ease-in-out infinite; }
.aai-gmark:hover .gm-letter { filter: drop-shadow(0 0 14px rgba(255, 79, 134, .55)); }
@keyframes gmDraw { to { stroke-dashoffset: 0; } }
@keyframes gmBrushIn { from { opacity: 0; transform: translate(60px, -60px) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes gmSway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg); } }
@keyframes gmPaint { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-16deg) translateX(-6px); } }
@keyframes gmSpark { 0%, 70%, 100% { r: 0; opacity: 0; } 76% { r: 22px; opacity: .9; } 88% { r: 34px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .aai-gmark * { animation: none !important; stroke-dashoffset: 0 !important; } }

.aai-adj-state { padding: 0 8px; color: #14a38b; font: 700 11.5px var(--a-body); white-space: nowrap; }
.aai-adj-state::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #14a38b; box-shadow: 0 0 0 0 rgba(20, 163, 139, .5); animation: aaiLive 1.6s ease-out infinite; vertical-align: 1px; }
.aai-adj-state.is-busy { color: #ff8a1f; } .aai-adj-state.is-busy::before { background: #ff8a1f; }
.aai-adj-x { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: #f1f4f9; color: #0f2a4a; font: 400 19px/1 var(--a-body); cursor: pointer; transition: background .15s, transform .15s; }
.aai-adj-x:hover { background: #e3e9f3; transform: rotate(90deg); }
@keyframes aaiLive { 0% { box-shadow: 0 0 0 0 rgba(20, 163, 139, .5); } 100% { box-shadow: 0 0 0 7px rgba(20, 163, 139, 0); } }

/* Repair bar: friendly modes, stepper and canvas tags */
.aai-rp-modes { gap: 6px; }
.aai-rp-mode { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 11px; border: 0; border-radius: 99px; background: #f1f5fc; color: #23365e; font: 700 13px var(--a-body); white-space: nowrap; cursor: pointer; transition: background .18s, color .18s, box-shadow .18s, transform .15s; }
.aai-rp-mode svg { width: 18px; height: 18px; }
.aai-rp-mode:hover { transform: translateY(-1px); background: #e7efff; }
.aai-rp-mode.is-on[data-rm="blend"] { background: linear-gradient(120deg, #7c3aed, #a855f7); color: #fff; box-shadow: 0 10px 20px -12px rgba(124, 58, 237, .9); }
.aai-rp-mode.is-on[data-rm="ref"] { background: linear-gradient(120deg, #0f9f6e, #14a38b); color: #fff; box-shadow: 0 10px 20px -12px rgba(15, 159, 110, .9); }
.aai-rp-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 5px; border-radius: 99px; background: #f1f4f9; color: #7a879c; font: 700 12px var(--a-body); transition: all .25s; }
.aai-rp-chip b { display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #dfe6f1; color: #5b6b82; font-size: 11px; }
.aai-rp-chip.is-on { color: #0f2a4a; background: #fff; box-shadow: 0 0 0 2px currentColor inset; animation: aaiRpPulse 1.6s ease-in-out infinite; }
.aai-rp-chip.is-src.is-on { color: #0f9f6e; } .aai-rp-chip.is-dst.is-on { color: #e85d1a; }
.aai-rp-chip.is-on b { background: currentColor; color: #fff; }
.aai-rp-chip.is-done { color: #0f9f6e; background: #e6f7f0; } .aai-rp-chip.is-done b { background: #0f9f6e; color: #fff; }
.aai-rp-arrow { color: #9aa7bd; font-style: normal; font-weight: 800; }
.aai-rp-tag rect { fill: #0f9f6e; } .aai-rp-tag text { fill: #fff; font-family: var(--a-body, sans-serif); font-weight: 700; pointer-events: none; }
.aai-rp-tag { pointer-events: none; animation: aaiGiIn .25s ease both; }
@keyframes aaiRpPulse { 0%, 100% { box-shadow: 0 0 0 2px currentColor inset, 0 0 0 0 rgba(232, 93, 26, .0); } 50% { box-shadow: 0 0 0 2px currentColor inset, 0 0 0 5px rgba(232, 93, 26, .12); } }

/* aFig Paint */
.aai-paintfly { position: absolute; z-index: 42; width: 290px; padding: 8px; border-radius: 18px; background: #fff; box-shadow: 0 24px 50px -20px rgba(11, 35, 80, .5), 0 0 0 1px rgba(47, 123, 196, .1); animation: aaiGalIn .22s cubic-bezier(.2, .9, .3, 1.1) both; transform-origin: left top; }
.aai-pf-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; margin-bottom: 4px; border-bottom: 1px solid #edf1f8; }
.aai-pf-head b { display: block; font: 800 15px var(--a-head); background: linear-gradient(100deg, #2f7bc4, #7c3aed 55%, #e85d1a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aai-pf-head em { font-style: normal; color: #6b7a93; font: 600 11.5px var(--a-body); }
.aai-pf-badge { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #2f7bc4, #7c3aed 55%, #ff4f86); box-shadow: 0 8px 16px -8px rgba(124, 58, 237, .8); }
.aai-pf-badge svg { width: 19px; height: 19px; }
.aai-pf-badge.is-sm { width: 26px; height: 26px; border-radius: 8px; } .aai-pf-badge.is-sm svg { width: 15px; height: 15px; }
.aai-paintfly button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: #0f2a4a; text-align: left; cursor: pointer; animation: aaiGalItem .3s ease both; transition: background .15s, transform .15s; }
.aai-paintfly button:hover { background: #f1f6ff; transform: translateX(2px); }
.aai-paintfly button.is-on { background: #eef4ff; box-shadow: inset 0 0 0 1.5px rgba(47, 123, 196, .35); }
.aai-paintfly button > svg { flex: none; width: 22px; height: 22px; padding: 6px; border-radius: 10px; background: #f1f4fb; color: #2f7bc4; box-sizing: content-box; }
.aai-paintfly button span { flex: 1; display: grid; gap: 1px; } .aai-paintfly button b { font: 700 13.5px var(--a-body); } .aai-paintfly button em { font-style: normal; color: #6b7a93; font: 500 11.5px/1.35 var(--a-body); }
.aai-paintfly kbd { padding: 2px 7px; border-radius: 6px; background: #f1f4f9; color: #5b6b82; font: 700 11px var(--a-body); }
.aai-tb.is-paint > svg { color: #7c3aed; }
.aai-paintbar .aai-pb-brand { gap: 7px; } .aai-paintbar .aai-pb-brand b { font: 800 13px var(--a-head); color: #0f2a4a; }
.aai-pb-tool.is-on { background: #2f7bc4; color: #fff; }
.aai-pb-col { gap: 8px; }
.aai-pb-well { position: relative; display: block; width: 30px; height: 30px; border-radius: 9px; overflow: hidden; box-shadow: 0 0 0 1px rgba(11, 35, 80, .2), inset 0 0 0 2px #fff; cursor: pointer; }
.aai-pb-well input { position: absolute; inset: -8px; width: 46px; height: 46px; opacity: 0; cursor: pointer; }
.aai-pb-well i { position: absolute; inset: 0; pointer-events: none; }
.aai-pb-recent { display: grid; grid-template-columns: repeat(4, 13px); gap: 3px; }
.aai-pb-recent button { width: 13px; height: 13px; padding: 0; border: 0; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(11, 35, 80, .2); cursor: pointer; transition: transform .12s; }
.aai-pb-recent button:hover { transform: scale(1.25); } .aai-pb-recent button.is-on { box-shadow: 0 0 0 2px #2f7bc4; }
.aai-paintbar [hidden] { display: none !important; }
.aai-paint-draft { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.aai-paint-draft.is-erase { filter: drop-shadow(0 0 1px rgba(11, 35, 80, .6)); }
.aai-pcur { fill: none; stroke: #0f2a4a; pointer-events: none; mix-blend-mode: difference; }
.aai-pen-draft { fill: none; stroke: #7c3aed; pointer-events: none; }
.aai-pen-h { stroke: #9aa7bd; pointer-events: none; } .aai-pen-hp { fill: #fff; stroke: #7c3aed; stroke-width: .8; pointer-events: none; }
.aai-pen-a { fill: #fff; stroke: #7c3aed; pointer-events: none; } .aai-pen-a.is-first { fill: #7c3aed; }
[data-ptool="brush"] .aai-viewport svg, [data-ptool="eraser"] .aai-viewport svg { cursor: none; }
[data-ptool="bucket"] .aai-viewport svg { cursor: cell; } [data-ptool="eyedropper"] .aai-viewport svg, [data-ptool="bezier"] .aai-viewport svg { cursor: crosshair; }

/* Toolbar in two columns: every tool visible at once */
@media (min-width: 901px) {
	.aai-ed-body, .aai-ed-body[class] { grid-template-columns: 170px minmax(0, 1fr); }
	.aai-tools.is-big { display: grid; grid-template-columns: repeat(2, 74px); grid-auto-rows: min-content; align-content: start; justify-content: center; gap: 4px; padding: 10px 8px; overflow-y: auto; }
	.aai-tools.is-big .aai-tb { width: 74px; min-height: 58px; animation: aaiTbIn .35s ease both; }
	.aai-tools.is-big .aai-tb.is-upload { grid-column: 1 / -1; width: auto; min-height: 52px; flex-direction: row; gap: 8px; margin-bottom: 2px; }
	.aai-tools.is-big .aai-tool-sep { grid-column: 1 / -1; width: 100%; margin: 4px 0; }
	.aai-tools.is-big .aai-tb:nth-child(n) { animation-delay: calc(var(--i, 0) * 20ms); }
}
@keyframes aaiTbIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Tighter two-column toolbar and the animated logo underneath */
@media (min-width: 901px) {
	.aai-ed-body, .aai-ed-body[class] { grid-template-columns: 148px minmax(0, 1fr); }
	.aai-tools.is-big { position: relative; grid-template-columns: repeat(2, 64px); gap: 2px 4px; padding: 8px 6px 120px; }
	.aai-tools.is-big .aai-tb { width: 64px; min-height: 50px; padding: 5px 2px 4px; gap: 3px; font-size: 11.5px; }
	.aai-tools.is-big .aai-tb svg { width: 21px; height: 21px; }
	.aai-tools.is-big .aai-tb.is-upload { min-height: 44px; }
	.aai-tools.is-big .aai-tb.has-more::after { right: 4px; bottom: 5px; border-width: 3.5px; }
	.aai-tools.is-big .aai-tool-sep { margin: 2px 0; }
}
.aai-tools-logo { position: absolute; left: 10px; right: 10px; bottom: 16px; display: grid; place-items: center; cursor: pointer; }
.aai-tools-logo .aai-tl-mark { width: 100%; animation: opRise .7s cubic-bezier(.34, 1.56, .64, 1) both, opFloatMark 3.2s ease-in-out 2.4s infinite; }
.aai-tools-logo .aai-tl-mark svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 12px rgba(10, 42, 156, .18)); }
.aai-tools-logo::before { content: ""; position: absolute; inset: -14px -6px; border-radius: 50%; background: radial-gradient(closest-side, rgba(47, 122, 229, .14), rgba(232, 100, 28, .08) 60%, transparent); animation: opBreath 2.8s ease-in-out infinite; pointer-events: none; }
@media (max-width: 900px) { .aai-tools-logo { display: none; } }
.aai-editor.is-full ~ * { visibility: visible; }
.aai-ed-home { display: inline-grid; place-items: center; margin-right: 2px; background: rgba(255, 255, 255, .16); color: #fff; text-decoration: none; transition: background .15s, transform .15s; }
.aai-ed-home:hover { background: #e8641c; color: #fff; transform: translateY(-1px); }

/* Opening: a quick tour of the studio's features */
.aai-op-mark .aai-ft { position: relative; width: 100%; aspect-ratio: 2 / 1.18; }
.aai-ft .ft-scene { position: absolute; inset: 0 0 18% 0; opacity: 0; transform: translateY(8px) scale(.97); animation: ftScene .78s ease var(--s) both; }
.aai-ft .ft-scene.is-last { animation: ftSceneLast .5s ease var(--s) forwards; }
.aai-ft .ft-scene svg { width: 100%; height: 100%; overflow: visible; }
.aai-ft .ft-scene * { animation-delay: calc(var(--s) + var(--w, 0s)) !important; }
.aai-ft .ft-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: opWrite var(--d, .5s) ease both; }
.aai-ft .ft-fade { opacity: 0; animation: mgFade .4s ease both; }
.aai-ft .ft-pop { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); animation: mgPop .4s cubic-bezier(.34, 1.56, .64, 1) both; }
.aai-ft .ft-type { animation: ftType .5s steps(12) both; }
.aai-ft .ft-wave { opacity: 0; animation: ftWave .7s ease both; --w: .2s; }
.aai-ft .ft-cur { animation: ftCur .7s ease both; }
.aai-ft .ft-smudge { animation: ftSmudge .7s ease both; }
.aai-ft .ft-wand { animation: ftWand .7s ease both; }
.aai-ft .ft-spark { opacity: 0; transform-box: fill-box; transform-origin: center; animation: ftSpark .5s ease both; }
.aai-ft .ft-brush { offset-path: path('M40 82 C70 40, 100 100, 130 58'); offset-rotate: 0deg; animation: ftBrush .55s ease both; }
.aai-ft .ft-fill { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2); animation: ftFill .4s cubic-bezier(.34, 1.56, .64, 1) both; }
.aai-ft .ft-dl { animation: ftDl .9s ease-in-out infinite; }
.aai-ft .ft-chips { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 6px; }
.aai-ft .ft-chips span { padding: 4px 10px; border-radius: 99px; background: #eef2fa; color: #7a879c; font: 700 11px/1.2 var(--a-body, Roboto, sans-serif); animation: ftChip .4s ease var(--s) both; }
@keyframes ftScene { 0% { opacity: 0; transform: translateY(8px) scale(.97); } 18%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes ftSceneLast { to { opacity: 1; transform: none; } }
@keyframes ftType { from { width: 0; } to { width: 96px; } }
@keyframes ftWave { 0%, 30% { opacity: 0; } 45%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ftCur { from { transform: translate(18px, 14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ftSmudge { 0%, 35% { opacity: 1; } 75%, 100% { opacity: 0; transform: scale(.85); } }
@keyframes ftWand { from { transform: translate(70px, 30px); } to { transform: translate(150px, 40px); } }
@keyframes ftSpark { 0% { opacity: 0; transform: scale(.2) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(90deg); } 100% { opacity: 0; transform: scale(.4) rotate(180deg); } }
@keyframes ftBrush { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes ftFill { to { opacity: 1; transform: none; } }
@keyframes ftDl { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes ftChip { from { background: #eef2fa; color: #7a879c; } to { background: linear-gradient(120deg, #2f7bc4, #7c3aed); color: #fff; box-shadow: 0 6px 14px -8px rgba(124, 58, 237, .9); } }
@media (prefers-reduced-motion: reduce) { .aai-ft .ft-scene { animation: none !important; opacity: 0; } .aai-ft .ft-scene.is-last { opacity: 1; } .aai-ft * { animation: none !important; } }
/* Save status next to the title: saving (spinner) → saved (green check) */
.aai-ed-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 99px; transition: background .25s, color .25s; }
.aai-ed-status::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; }
.aai-ed-status.is-saving, .aai-ed-status.is-pending { background: rgba(255, 255, 255, .14); color: #fff; }
.aai-ed-status.is-saving::before, .aai-ed-status.is-pending::before { border: 2px solid rgba(255, 255, 255, .35); border-top-color: #f0701f; animation: aai-spin .7s linear infinite; }
.aai-ed-status.is-saved { color: #c8f7e3; }
.aai-ed-status.is-saved::before { width: 14px; height: 14px; background: #14a38b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 10px no-repeat; animation: aaiSavedPop .35s cubic-bezier(.34, 1.56, .64, 1); }
.aai-ed-status.is-offline { background: rgba(232, 100, 28, .2); color: #ffd8ad; }
.aai-ed-status.is-offline::before { background: #e8641c; }
@keyframes aaiSavedPop { from { transform: scale(.3); } to { transform: none; } }

/* Paint: the pointer takes the shape of the tool, its tip is the working point */
[data-ptool="eyedropper"] .aai-viewport svg, [data-ptool="eyedropper"] .aai-viewport svg * { cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2024%2024'%3E%3Cg%20fill='none'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cg%20stroke='white'%20stroke-width='4.2'%3E%3Cpath%20d='M14.5%204.5a2.1%202.1%200%200%201%203%200l2%202a2.1%202.1%200%200%201%200%203L17%2012l-5-5z'/%3E%3Cpath%20d='M12%207l-7.3%207.3a2%202%200%200%200-.5.9L3.5%2019l1%201%203.8-.7a2%202%200%200%200%20.9-.5L16.5%2011.5'/%3E%3C/g%3E%3Cg%20stroke='%230b2350'%20stroke-width='1.9'%3E%3Cpath%20d='M14.5%204.5a2.1%202.1%200%200%201%203%200l2%202a2.1%202.1%200%200%201%200%203L17%2012l-5-5z'/%3E%3Cpath%20d='M12%207l-7.3%207.3a2%202%200%200%200-.5.9L3.5%2019l1%201%203.8-.7a2%202%200%200%200%20.9-.5L16.5%2011.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 4 27, crosshair !important; }
[data-ptool="brush"] .aai-viewport svg, [data-ptool="brush"] .aai-viewport svg * { cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2024%2024'%3E%3Cg%20fill='none'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cg%20stroke='white'%20stroke-width='4.2'%3E%3Cpath%20d='M18.5%203.5a2%202%200%200%201%202.8%202.8L12%2015.6%209.4%2013z'/%3E%3Cpath%20d='M9.4%2013c-2.4%200-4%201.7-4%203.9%200%201.2-.6%202.2-2.4%202.6%201%20.9%202.6%201.3%204%201.3%203.1%200%205-2.1%205-4.6'/%3E%3C/g%3E%3Cg%20stroke='%230b2350'%20stroke-width='1.9'%3E%3Cpath%20d='M18.5%203.5a2%202%200%200%201%202.8%202.8L12%2015.6%209.4%2013z'/%3E%3Cpath%20d='M9.4%2013c-2.4%200-4%201.7-4%203.9%200%201.2-.6%202.2-2.4%202.6%201%20.9%202.6%201.3%204%201.3%203.1%200%205-2.1%205-4.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 3 27, crosshair !important; }
[data-ptool="eraser"] .aai-viewport svg, [data-ptool="eraser"] .aai-viewport svg * { cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2024%2024'%3E%3Cg%20fill='none'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cg%20stroke='white'%20stroke-width='4.2'%3E%3Cpath%20d='M4.6%2014.6l9.2-9.2a2%202%200%200%201%202.8%200l3%203a2%202%200%200%201%200%202.8L12%2018.8a2%202%200%200%201-1.4.6H8.4a2%202%200%200%201-1.4-.6l-2.4-2.4a2%202%200%200%201%200-2.8z'/%3E%3Cpath%20d='M9.5%209.7l5.8%205.8'/%3E%3C/g%3E%3Cg%20stroke='%230b2350'%20stroke-width='1.9'%3E%3Cpath%20d='M4.6%2014.6l9.2-9.2a2%202%200%200%201%202.8%200l3%203a2%202%200%200%201%200%202.8L12%2018.8a2%202%200%200%201-1.4.6H8.4a2%202%200%200%201-1.4-.6l-2.4-2.4a2%202%200%200%201%200-2.8z'/%3E%3Cpath%20d='M9.5%209.7l5.8%205.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 8 25, crosshair !important; }
[data-ptool="bucket"] .aai-viewport svg, [data-ptool="bucket"] .aai-viewport svg * { cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2024%2024'%3E%3Cg%20fill='none'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cg%20stroke='white'%20stroke-width='4.2'%3E%3Cpath%20d='M5%2011l7-7%208%208-7%207a2%202%200%200%201-2.8%200L5%2013.8a2%202%200%200%201%200-2.8z'/%3E%3Cpath%20d='M5%2012h15'/%3E%3Cpath%20d='M20%2015s2%202.4%202%203.6a2%202%200%200%201-4%200c0-1.2%202-3.6%202-3.6z'/%3E%3C/g%3E%3Cg%20stroke='%230b2350'%20stroke-width='1.9'%3E%3Cpath%20d='M5%2011l7-7%208%208-7%207a2%202%200%200%201-2.8%200L5%2013.8a2%202%200%200%201%200-2.8z'/%3E%3Cpath%20d='M5%2012h15'/%3E%3Cpath%20d='M20%2015s2%202.4%202%203.6a2%202%200%200%201-4%200c0-1.2%202-3.6%202-3.6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 26 28, crosshair !important; }
[data-ptool="bezier"] .aai-viewport svg, [data-ptool="bezier"] .aai-viewport svg * { cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2024%2024'%3E%3Cg%20fill='none'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cg%20stroke='white'%20stroke-width='4.2'%3E%3Cpath%20d='M12%2021l4.5-9L12%203%207.5%2012z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='1.6'/%3E%3C/g%3E%3Cg%20stroke='%230b2350'%20stroke-width='1.9'%3E%3Cpath%20d='M12%2021l4.5-9L12%203%207.5%2012z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='1.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 16 28, crosshair !important; }
[data-ptool="brush"] .aai-pcur, [data-ptool="eraser"] .aai-pcur { stroke-dasharray: 3 2; }
/* Paint bar: instant, styled labels on the tool icons */
.aai-pb-tool { position: relative; }
.aai-pb-tip { position: absolute; left: 50%; top: calc(100% + 10px); z-index: 60; display: grid; gap: 3px; width: max-content; max-width: 210px; padding: 8px 11px; border-radius: 10px; background: #0f2a4a; color: #cfdaf0; font: 500 11.5px/1.4 var(--a-body); text-align: left; white-space: normal; pointer-events: none; opacity: 0; transform: translate(-50%, -4px); transition: opacity .15s, transform .15s; box-shadow: 0 12px 26px -12px rgba(11, 35, 80, .7); }
.aai-pb-tip::before { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; background: #0f2a4a; transform: translateX(-50%) rotate(45deg); }
.aai-pb-tip b { color: #fff; font-weight: 800; font-size: 12.5px; }
.aai-pb-tip kbd { margin-left: 4px; padding: 0 5px; border-radius: 4px; background: rgba(255, 255, 255, .16); color: #f0701f; font: 700 10.5px var(--a-body); }
.aai-pb-tool:hover .aai-pb-tip, .aai-pb-tool:focus-visible .aai-pb-tip { opacity: 1; transform: translate(-50%, 0); transition-delay: .12s; }
.aai-demo.is-below { animation: aaiGiIn .2s ease both; }
.aai-demo b kbd { margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: #eef4ff; color: #2f7bc4; font: 700 12px var(--a-body); vertical-align: 2px; }
.aai-ed-orig { display: inline-flex; align-items: center; gap: 6px; height: 30px; margin-left: 4px; padding: 0 12px 0 9px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 99px; background: rgba(255, 255, 255, .08); color: #fff; font: 700 12.5px var(--a-body); cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.aai-ed-orig svg { width: 15px; height: 15px; transition: transform .35s; }
.aai-ed-orig:hover { background: #e8641c; border-color: #e8641c; color: #fff; transform: translateY(-1px); }
.aai-ed-orig:hover svg { transform: rotate(-200deg); }
@media (max-width: 900px) { .aai-ed-orig span { display: none; } .aai-ed-orig { padding: 0 8px; } }

/* Crop tool */
.aai-cropbar { flex-wrap: nowrap; }
.aai-crop-brand { gap: 7px; color: #0f2a4a; } .aai-crop-brand svg { width: 18px; height: 18px; color: #2f7bc4; } .aai-crop-brand b { font: 800 13px var(--a-head); }
.aai-crop-ratios { gap: 3px; }
.aai-crop-r { height: 30px; padding: 0 10px; border: 0; border-radius: 99px; background: #f1f5fc; color: #23365e; font: 700 12px var(--a-body); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.aai-crop-r:hover { background: #e3ecff; } .aai-crop-r.is-on { background: #2f7bc4; color: #fff; }
.aai-crop-grid { stroke: rgba(255, 255, 255, .75); fill: none; pointer-events: none; }
.aai-crop-size rect { fill: #0f2a4a; } .aai-crop-size text { fill: #fff; font-family: var(--a-body, sans-serif); font-weight: 700; pointer-events: none; } .aai-crop-size { pointer-events: none; }
.is-canvas[data-tool] .aai-viewport svg { cursor: default; }

.is-canvas .aai-stylebar.aai-cropbar { display: flex; }
.is-canvas .aai-cropbar ~ * .aai-cv-dim, .aai-cv-dim { transition: fill .2s; }
[data-crop-on] .aai-cv-dim { fill: rgba(15, 23, 42, .58); }
.aai-crop-grid { stroke: rgba(255, 255, 255, .9); }
.aai-lift-btn { position: absolute; z-index: 46; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 11px; border: 0; border-radius: 99px; background: linear-gradient(120deg, #2f7bc4, #7c3aed); color: #fff; font: 800 12.5px var(--a-body); cursor: pointer; box-shadow: 0 12px 24px -10px rgba(124, 58, 237, .8); animation: aaiGiIn .2s ease both; }
.aai-lift-btn svg { width: 16px; height: 16px; }
.aai-lift-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }

/* Under the tools: plain white, only the small animated "g" mark */
.aai-tools-logo::before { content: none; }
.aai-tools-logo { bottom: 14px; }
.aai-tl-g { display: grid; place-items: center; width: 46px; height: 52px; }
.aai-tl-g .aai-gmark { width: 46px; height: 52px; filter: none; }

/* New generators */
.aai-gi-protocol { background: linear-gradient(135deg, #8f8cff, #5b2be0) !important; }
.aai-gi-flowchart { background: linear-gradient(135deg, #3fd1c4, #2f7bc4) !important; }

/* Dragging a figure onto a folder (light sidebar) */
.aai-dragging .aai-side-nav [data-folder]:not([data-folder="all"]) { outline: 2px dashed rgba(47, 123, 196, .4); outline-offset: -3px; border-radius: 12px; animation: aaiDropPulse 1.2s ease-in-out infinite; }
.aai-side-nav button.is-drop, .aai-side-nav [data-folder].is-drop { background: #fff3e6 !important; color: #0f2a4a !important; outline: 2px solid #e8641c !important; outline-offset: -2px; transform: scale(1.04); animation: none; box-shadow: 0 10px 22px -12px rgba(255, 138, 31, .8); }
.aai-side-nav [data-folder].is-got { animation: aaiDropGot .7s ease; }
.aai-dragging .aai-dash-side { position: relative; }
.aai-dragging .aai-dash-side::after { content: "Drop on a folder to move it"; position: sticky; bottom: 12px; display: block; margin: 10px auto 0; width: max-content; padding: 7px 12px; border-radius: 99px; background: #0f2a4a; color: #fff; font: 700 12px var(--a-body); box-shadow: 0 10px 22px -10px rgba(11, 35, 80, .6); animation: aaiGiIn .2s ease both; }
.aai-file.is-drag { opacity: .45; transform: scale(.97); }
.aai-drag-ghost { position: fixed; top: -1000px; left: -1000px; display: flex; align-items: center; gap: 10px; width: 240px; padding: 8px 12px 8px 8px; border-radius: 14px; background: #fff; box-shadow: 0 14px 30px -12px rgba(11, 35, 80, .5), 0 0 0 1px rgba(47, 123, 196, .15); font: 700 13px var(--a-body); color: #0f2a4a; }
.aai-drag-ghost img { width: 64px; height: 44px; object-fit: cover; border-radius: 8px; background: #f1f4f9; }
.aai-drag-ghost b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@keyframes aaiDropPulse { 0%, 100% { outline-color: rgba(47, 123, 196, .25); } 50% { outline-color: rgba(47, 123, 196, .6); } }
@keyframes aaiDropGot { 0% { transform: scale(1); } 40% { transform: scale(1.06); background: #e6f7f0; } 100% { transform: scale(1); } }

/* Paint · Select: marching-ants box; the lifted piece floats inside it until it is dropped */
.aai-marq { fill: rgba(47, 122, 229, .07); stroke: #4a8fd2; stroke-width: 1.6; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; animation: aaiAnts .7s linear infinite; pointer-events: none; }
.aai-marq.is-float { fill: none; }
@keyframes aaiAnts { to { stroke-dashoffset: -10; } }
[data-ptool="marquee"] .aai-viewport svg, [data-ptool="marquee"] .aai-viewport svg * { cursor: crosshair; }

/* Creating screen: nothing overlaps at any zoom level */
.aai-show-fig { inset: 4% 4% 17% 4%; }
.aai-sc-tray { max-height: 28px; overflow: hidden; }
.aai-show-card h3 { position: relative; z-index: 1; margin: 2px 0 0; }
.aai-show-terms { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; max-width: 56%; padding: 6px 8px; overflow: hidden; box-sizing: border-box; }
.aai-show-terms li { flex: 0 1 auto; min-width: 0; max-width: 150px; padding: 3px 8px 3px 4px; border-radius: 99px; background: #f1f7f2; }
.aai-show-terms li i { flex: none; }
.aai-show-cap { max-width: 40%; box-sizing: border-box; }
@media (max-width: 760px) { .aai-show-terms { display: none; } .aai-show-cap { max-width: 90%; } }
/* Edit canvas lives in the toolbar; the floating button only shows while the canvas is being edited */
.aai-cv-btn { display: none; }
.is-canvas .aai-cv-btn { display: inline-flex; }

.aai-marq-h { fill: #fff; stroke: #2f7bc4; stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }

/* Paint bar: labelled tools, clear colour and size */
.aai-paintbar .aai-pb-tools { gap: 2px; }
.aai-paintbar .aai-pb-tool { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: auto; min-width: 46px; height: auto; padding: 5px 6px 4px; }
.aai-paintbar .aai-pb-tool small { font: 600 9.5px/1 var(--a-body, sans-serif); white-space: nowrap; }
.aai-paintbar .aai-pb-ct { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.aai-paintbar .aai-pb-ct em, .aai-paintbar .aai-sb-range em { font-style: normal; font-size: 10.5px; font-weight: 700; color: #45577a; }
.aai-paintbar .aai-pb-well { width: 28px; height: 28px; }
.aai-paintbar .aai-pb-size { gap: 10px; align-items: center; }
.aai-pb-dot { display: inline-block; flex: none; border-radius: 50%; box-shadow: 0 0 0 1px rgba(11, 35, 80, .25); }
.aai-area-draft { pointer-events: none; }
[data-ptool="area"] .aai-viewport svg, [data-ptool="area"] .aai-viewport svg * { cursor: crosshair; }

/* Create new: the folder panel steps aside so the steps get the full width; "Back" brings it back. */
.aai-dash.is-making { grid-template-columns: minmax(0, 1fr) !important; }
.aai-dash.is-making > .aai-dash-side { display: none !important; }
.aai-gp-back { margin: 0 0 12px; }
/* Folders rename in place */
.aai-inline-name { flex: 1; min-width: 0; height: 28px; padding: 0 8px; border: 1.5px solid #2f7bc4; border-radius: 8px; background: #fff; color: #0f2a4a; font: 600 14px var(--a-body, Roboto, sans-serif); outline: none; box-shadow: 0 0 0 3px rgba(47, 123, 196, .15); }
.is-renaming { cursor: text !important; }
/* Uploads: rename and delete are always visible on your own folders */
.aai-gal-f.is-mine .aai-gal-fx { display: inline-flex; align-items: center; justify-content: center; opacity: .55; }
.aai-gal-f.is-mine:hover .aai-gal-fx { opacity: 1; }
.aai-gal-f.is-mine:hover i { display: inline-block; }
.aai-gal-fx[data-fdel]:hover { background: rgba(214, 48, 49, .12); color: #c62828; }
.aai-ed-report { display: inline-flex; align-items: center; gap: 6px; height: 36px; margin-right: 8px; padding: 0 12px; border: 1px solid #d5deee; border-radius: 999px; background: #fff; color: #3c4a66; font: 600 13px var(--a-body, Roboto, sans-serif); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.aai-ed-report:hover { border-color: #e8641c; color: #c2410c; background: #fff7ee; }
@media (max-width: 1280px) { .aai-ed-report span { display: none; } .aai-ed-report { width: 36px; padding: 0; justify-content: center; } }
.aai-msg-report { margin-left: 4px; padding: 4px 12px; border: 0; border-radius: 999px; background: #e8641c; background-image: linear-gradient(110deg, #e85d1a, #f0701f); color: #fff; font: 600 12.5px var(--a-body, Roboto, sans-serif); cursor: pointer; }
.aai-inline-name.is-row { margin: 2px 4px; height: 34px; }

/* Editor always fits the window, at any browser zoom: one flexible column, a header that shrinks instead of pushing tools off-screen. */
.aai-editor { grid-template-columns: minmax(0, 1fr) !important; }
.aai-editor > * { min-width: 0; }
.aai-ed-top { min-width: 0; overflow: hidden; }
.aai-ed-top > * { flex-shrink: 0; }
.aai-ed-top .aai-ed-title { flex: 1 1 260px !important; min-width: 90px !important; width: auto !important; }
.aai-ed-top .aai-ed-gen { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1180px) { .aai-ed-top .aai-ed-gen { display: none; } }
@media (max-width: 980px) { .aai-ed-top .aai-ed-status { display: none; } .aai-ed-top .aai-ed-home { display: none; } .aai-ed-export { padding: 0 12px !important; } }
@media (max-width: 840px) { .aai-ed-top .aai-zoom > :not([data-act="zoomin"]):not([data-act="zoomout"]):not(span) { display: none; } .aai-ed-top [data-act="full"] { display: none; } }
/* Tool bars (text style, paint, repair, crop…) wrap onto a second row instead of running off the canvas. */
.aai-stylebar { max-width: calc(100% - 16px) !important; flex-wrap: wrap !important; row-gap: 6px; box-sizing: border-box; }
.aai-stylebar .aai-sb-g { flex-wrap: wrap; row-gap: 4px; }
/* Export: real detail of the picture at the chosen DPI */
.aai-hd { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 4px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; }
.aai-hd b { font-size: 13px; }
.aai-hd.is-ok { background: #ecfdf3; color: #14532d; border: 1px solid #b7ebcb; }
.aai-hd.is-mid { background: #eef4ff; color: #173a7a; border: 1px solid #cddcf7; }
.aai-hd.is-low { background: #fff7ee; color: #7c3d12; border: 1px solid #ffd2ad; }
.aai-hd .aai-btn { align-self: flex-start; margin-top: 4px; }

/* Tool bars float over the canvas as frosted glass: the canvas never moves, shrinks or re-zooms when a tool opens. */
.aai-stagewrap { padding-top: 0 !important; }
.aai-stylebar, .aai-stylebar.aai-paintbar, .aai-stylebar.aai-repairbar, .aai-stylebar.aai-cropbar, .aai-stylebar.aai-adjbar {
	background: rgba(255, 255, 255, .62) !important;
	-webkit-backdrop-filter: blur(18px) saturate(1.6);
	backdrop-filter: blur(18px) saturate(1.6);
	border: 1px solid rgba(255, 255, 255, .75);
	box-shadow: 0 18px 40px -18px rgba(11, 35, 80, .38), 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px rgba(47, 123, 196, .10) !important;
	transition: background .2s, box-shadow .2s;
}
.aai-stylebar:hover { background: rgba(255, 255, 255, .80) !important; }
.aai-stylebar select, .aai-stylebar input[type="number"], .aai-stylebar input[type="text"], .aai-stylebar .aai-sb-btn { background-color: rgba(255, 255, 255, .7); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .aai-stylebar { background: rgba(255, 255, 255, .94) !important; } }

/* ================= Crystal studio: glass surfaces, smooth spring motion ================= */
:root { --aai-spring: cubic-bezier(.2, .9, .25, 1.15); --aai-ease: cubic-bezier(.22, .8, .24, 1); }
/* Left tool rail: frosted glass */
.aai-tools.is-big {
	background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(244, 248, 255, .66)) !important;
	-webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
	border-right: 1px solid rgba(47, 123, 196, .10) !important;
	box-shadow: 1px 0 0 rgba(255, 255, 255, .9) inset, 8px 0 30px -24px rgba(11, 35, 80, .45);
}
.aai-tools.is-big .aai-tb {
	transition: transform .28s var(--aai-spring), background-color .25s var(--aai-ease), color .2s, box-shadow .3s var(--aai-ease) !important;
	will-change: transform;
}
.aai-tools.is-big .aai-tb svg { transition: transform .3s var(--aai-spring); }
.aai-tools.is-big .aai-tb:hover { background: rgba(47, 123, 196, .07) !important; box-shadow: inset 0 0 0 1px rgba(47, 123, 196, .14), 0 8px 18px -14px rgba(43, 116, 189, .6); transform: translateY(-1px); }
.aai-tools.is-big .aai-tb:hover svg { transform: scale(1.1); }
.aai-tools.is-big .aai-tb:active { transform: scale(.95); transition-duration: .1s !important; }
/* Active tool: glossy crystal pill */
.aai-tools.is-big .aai-tb.is-on {
	background: linear-gradient(140deg, #235f9c 0%, #1f63d6 55%, #3b82f6 100%) !important; color: #fff !important;
	box-shadow: 0 12px 22px -12px rgba(10, 61, 158, .9), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
	animation: aaiPillIn .38s var(--aai-spring);
	overflow: hidden;
}
.aai-tools.is-big .aai-tb.is-on::before { content: ""; position: absolute; inset: 0 0 52% 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); pointer-events: none; }
.aai-tools.is-big .aai-tb[data-tool="fixtext"].is-on { background: linear-gradient(140deg, #e85d1a, #e85d1a 50%, #f0701f) !important; box-shadow: 0 12px 22px -12px rgba(232, 93, 26, .9), inset 0 1px 0 rgba(255, 255, 255, .35) !important; }
.aai-tools.is-big .aai-tb[data-tool="repair"].is-on { background: linear-gradient(140deg, #5b21b6, #7c3aed 55%, #a855f7) !important; box-shadow: 0 12px 22px -12px rgba(124, 58, 237, .9), inset 0 1px 0 rgba(255, 255, 255, .35) !important; }
@keyframes aaiPillIn { 0% { transform: scale(.9); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
/* Upload: warm glass with a soft light sweep */
.aai-tools.is-big .aai-tb.is-upload { overflow: hidden; background: linear-gradient(135deg, #e85d1a, #f0701f) !important; color: #fff !important; box-shadow: 0 12px 24px -12px rgba(232, 93, 26, .85), inset 0 1px 0 rgba(255, 255, 255, .35) !important; }
.aai-tools.is-big .aai-tb.is-upload::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg); animation: aaiSweep 4.5s var(--aai-ease) infinite; pointer-events: none; }
.aai-tools.is-big .aai-tb.is-upload:hover { background: linear-gradient(135deg, #ff7a2a, #ffa033) !important; color: #fff !important; transform: translateY(-2px); }
@keyframes aaiSweep { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
/* Tool bars: crystal entrance */
.aai-stylebar { animation: aaiGlassIn .34s var(--aai-spring) both !important; transform-origin: top left; }
@keyframes aaiGlassIn { 0% { opacity: 0; transform: translateY(-8px) scale(.97); filter: blur(3px); } 100% { opacity: 1; transform: none; filter: none; } }
.aai-stylebar button, .aai-stylebar select, .aai-stylebar label { transition: background-color .2s var(--aai-ease), box-shadow .2s var(--aai-ease), transform .22s var(--aai-spring), color .2s; }
.aai-stylebar button:hover { transform: translateY(-1px); }
.aai-stylebar button:active { transform: scale(.96); }
.aai-stylebar input[type="range"] { transition: filter .2s; }
.aai-stylebar input[type="range"]:hover { filter: drop-shadow(0 2px 6px rgba(47, 123, 196, .35)); }
/* Pop-up menus and flyouts: glass, spring in */
.aai-menu, .aai-paintfly, .aai-tfly, .aai-gal-menu {
	background: rgba(255, 255, 255, .78) !important;
	-webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
	border: 1px solid rgba(255, 255, 255, .8) !important;
	box-shadow: 0 24px 48px -20px rgba(11, 35, 80, .42), inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(47, 123, 196, .08) !important;
	animation: aaiGlassIn .3s var(--aai-spring) both;
}
.aai-menu button, .aai-paintfly button, .aai-tfly button { transition: background-color .18s var(--aai-ease), transform .2s var(--aai-spring); }
.aai-menu button:hover, .aai-paintfly button:hover, .aai-tfly button:hover { transform: translateX(2px); }
/* Hint pill: glass */
.aai-hint { color: #0f2a4a !important; background: rgba(255, 255, 255, .72) !important; -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 10px 26px -14px rgba(11, 35, 80, .4) !important; transition: opacity .3s var(--aai-ease), transform .3s var(--aai-spring); }
/* Editor header buttons */
.aai-ed-top button, .aai-ed-top a { transition: transform .22s var(--aai-spring), background-color .2s var(--aai-ease), box-shadow .25s var(--aai-ease); }
.aai-ed-top button:hover { transform: translateY(-1px); }
.aai-ed-top button:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .aai-tools.is-big .aai-tb, .aai-stylebar, .aai-menu, .aai-paintfly, .aai-tfly { animation: none !important; transition: none !important; } .aai-tools.is-big .aai-tb.is-upload::before { display: none; } }

/* ---------- Share figures (account) ---------- */
.aai-share-cta { display: flex; align-items: center; gap: 14px; margin: 18px 0; padding: 16px 18px; border-radius: 18px; background: linear-gradient(120deg, rgba(47, 122, 229, .08), rgba(232, 93, 26, .08)); border: 1px solid rgba(47, 122, 229, .16); }
.aai-share-cta > div { flex: 1; min-width: 0; }
.aai-share-cta b { font-weight: 800; color: #0a2a6b; }
.aai-share-cta p { margin: 2px 0 0; }
.aai-share-ic { position: relative; width: 44px; height: 44px; flex: none; border-radius: 14px; background: linear-gradient(135deg, #2b74bd, #4a8fd2); }
.aai-share-ic i { position: absolute; left: 10px; top: 14px; width: 12px; height: 15px; border-radius: 3px; background: linear-gradient(135deg, #e85d1a, #f0701f); animation: aaiShareHop 2.4s cubic-bezier(.5, 0, .3, 1) infinite; }
.aai-share-ic i:nth-child(2) { animation-delay: .8s; }
.aai-share-ic i:nth-child(3) { animation-delay: 1.6s; }
@keyframes aaiShareHop { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 20% { opacity: 1; transform: translate(2px, -4px) scale(1); } 80% { opacity: 1; transform: translate(16px, 0) scale(1); } 100% { opacity: 0; transform: translate(20px, 4px) scale(.6); } }
.aai-share-form { display: grid; gap: 14px; margin-bottom: 22px; }
.aai-share-anim { position: relative; display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 6px; border-radius: 16px; background: var(--a-grad, linear-gradient(120deg, #2b74bd, #4a8fd2)); overflow: hidden; }
.aai-share-anim span { position: relative; z-index: 1; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font: 700 13px Roboto, sans-serif; }
.aai-share-anim .s-fig { position: absolute; left: 70px; top: 50%; width: 18px; height: 22px; margin-top: -11px; border-radius: 4px; background: linear-gradient(135deg, #e85d1a, #f0701f); box-shadow: 0 4px 14px rgba(232, 93, 26, .45); animation: aaiShareFly 3s cubic-bezier(.55, 0, .35, 1) infinite; }
.aai-share-anim .s-fig:nth-of-type(2) { animation-delay: 1s; }
.aai-share-anim .s-fig:nth-of-type(3) { animation-delay: 2s; }
.aai-share-form.is-sending .s-fig { animation-duration: 1.1s; }
@keyframes aaiShareFly { 0% { transform: translateX(0) translateY(6px) rotate(-8deg) scale(.5); opacity: 0; } 15% { opacity: 1; } 50% { transform: translateX(calc(50cqw - 60px)) translateY(-10px) rotate(6deg) scale(1); } 85% { opacity: 1; } 100% { transform: translateX(calc(100cqw - 170px)) translateY(4px) rotate(0) scale(.5); opacity: 0; } }
.aai-share-anim { container-type: inline-size; }
.aai-share-n { display: flex; align-items: stretch; max-width: 180px; border: 1px solid #d5ddeb; border-radius: 12px; overflow: hidden; }
.aai-share-n button { width: 42px; border: 0; background: #f3f6fc; color: #2b74bd; font: 700 18px Roboto, sans-serif; cursor: pointer; }
.aai-share-n button:hover { background: #e6eefc; }
.aai-share-n input { flex: 1; min-width: 0; border: 0 !important; text-align: center; font: 700 16px Roboto, sans-serif; -moz-appearance: textfield; }
.aai-share-n input::-webkit-inner-spin-button { -webkit-appearance: none; }
.aai-share-locked { margin-bottom: 20px; padding: 18px; border-radius: 16px; background: #f6f8fd; border: 1px dashed #c9d5ea; }
.aai-share-locked b { display: block; margin-bottom: 4px; color: #0a2a6b; }
.aai-share-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.aai-share-cols h4 { margin: 0 0 8px; font: 800 14px Roboto, sans-serif; color: #0a2a6b; }
.aai-share-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.aai-share-log li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #f6f8fd; animation: aaiShareIn .4s ease both; }
.aai-share-log li div { flex: 1; min-width: 0; }
.aai-share-log b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.aai-share-log small { color: #5d6273; font-size: 12px; }
.aai-share-log em { font-style: normal; font-weight: 800; color: #e85d1a; }
.aai-share-av { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #2b74bd, #4a8fd2); color: #fff; font-weight: 800; font-size: 13px; }
@keyframes aaiShareIn { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 720px) { .aai-share-cols { grid-template-columns: 1fr; } .aai-share-cta { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .aai-share-anim .s-fig, .aai-share-ic i { animation: none; opacity: 1; } }
.aai-share-form textarea { min-height: 64px !important; height: 64px; resize: vertical; }
.aai-share-form > .aai-btn { justify-self: start; width: auto; padding-left: 30px; padding-right: 30px; }

.aai-share-policy { margin: 0; padding: 12px 16px; border-radius: 14px; background: #fff7ee; border-left: 4px solid #e85d1a; color: #3c4257; font-size: 14px; line-height: 1.55; }
.aai-share-policy > b:first-child { display: block; margin-bottom: 2px; color: #c2410c; }
.aai-lots { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.aai-lots span { padding: 6px 12px; border-radius: 99px; background: #eef4ff; color: #0a2a6b; font-size: 13.5px; }
.aai-lots span b { color: #2b74bd; }
.aai-lots em { font-style: normal; font-size: 13px; color: #5d6273; }
.aai-policy { margin-top: 10px; }

/* ================= Frosted glass studio (every screen and tool) ================= */
body.studio-page { background: #edf3ff !important; }
body.studio-page::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(38vw 38vw at 6% 14%, rgba(47, 122, 229, .42), transparent 62%),
		radial-gradient(34vw 34vw at 94% 10%, rgba(240, 112, 31, .30), transparent 64%),
		radial-gradient(46vw 46vw at 72% 96%, rgba(43, 116, 189, .32), transparent 62%),
		radial-gradient(30vw 30vw at 18% 92%, rgba(232, 93, 26, .14), transparent 62%),
		linear-gradient(160deg, #eaf2ff, #f4f6ff 48%, #fff5ec); }
body.studio-page .studio-app, body.studio-page .studio-sec, body.studio-page .studio-shell { background: transparent !important; }
.studio-page .aai {
	--g-bg: rgba(255, 255, 255, .4); --g-bg2: rgba(255, 255, 255, .16); --g-solid: rgba(255, 255, 255, .72);
	--g-bd: rgba(255, 255, 255, .78); --g-bd2: rgba(150, 180, 235, .32);
	--g-blur: blur(18px) saturate(1.6);
	--g-shadow: 0 14px 34px -20px rgba(10, 40, 110, .42), inset 0 1px 0 rgba(255, 255, 255, .95);
}
/* large panels: real frosted glass */
.studio-page .aai .aai-dash, .studio-page .aai .aai-card, .studio-page .aai .aai-compose, .studio-page .aai .aai-brief-side,
.studio-page .aai .aai-gate, .studio-page .aai .aai-table-wrap, .studio-page .aai .aai-editor, .studio-page .aai .aai-editor .aai-side,
.studio-page .aai .aai-tools, .studio-page .aai .aai-board, .studio-page .aai .aai-hero-gen, .studio-page .aai .aai-drop,
.studio-page .aai .aai-bill-box, .studio-page .aai .aai-bill-up, .studio-page .aai .aai-lib-cats, .studio-page .aai .aai-lib-grid,
.studio-page .aai .aai-demo, .studio-page .aai .aai-note, .studio-page .aai .aai-plan-opt,
.studio-page .aai-modal-card, .studio-page .aai-pop, .studio-page .aai-tpick, .studio-page .aai-tfly, .studio-page .aai-cvbar {
	background: var(--g-bg, rgba(255, 255, 255, .5)) !important;
	-webkit-backdrop-filter: var(--g-blur, blur(18px) saturate(1.6)); backdrop-filter: var(--g-blur, blur(18px) saturate(1.6));
	border: 1px solid var(--g-bd, rgba(255, 255, 255, .78)) !important;
	box-shadow: var(--g-shadow, 0 14px 34px -20px rgba(10, 40, 110, .42), inset 0 1px 0 rgba(255, 255, 255, .95)) !important;
}
.studio-page .aai-modal-card, .studio-page .aai-pop, .studio-page .aai-tpick, .studio-page .aai-tfly { background: rgba(255, 255, 255, .72) !important; -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7); }
.studio-page .aai-modal { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* inner areas of a glass panel: lighter tint, no second blur */
.studio-page .aai .aai-dash-main { background: var(--g-bg2) !important; }
.studio-page .aai .aai-dash-side { background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .18)) !important; border-right: 1px solid var(--g-bd2) !important; }
.studio-page .aai .aai-flowbar, .studio-page .aai .aai-tipbar { background: rgba(255, 255, 255, .55) !important; -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); border-bottom: 1px solid var(--g-bd2) !important; }
/* repeated items: translucent glass tiles (no blur, keeps scrolling smooth) */
.studio-page .aai .aai-file, .studio-page .aai .aai-stagelist li, .studio-page .aai .aai-label-list button, .studio-page .aai .aai-read-list li,
.studio-page .aai .aai-vlist li, .studio-page .aai .aai-chars button, .studio-page .aai .aai-pbtns button, .studio-page .aai .aai-align button,
.studio-page .aai .aai-sizes button, .studio-page .aai .aai-align-all button, .studio-page .aai .aai-dpi button, .studio-page .aai .aai-x-bgs button,
.studio-page .aai .aai-files-empty, .studio-page .aai .aai-pal, .studio-page .aai .aai-gp-tip, .studio-page .aai .aai-share-log li,
.studio-page .aai .aai-share-locked, .studio-page .aai .aai-review-go, .studio-page .aai .aai-hero-more label, .studio-page .aai .aai-blank-grid i {
	background: rgba(255, 255, 255, .58) !important;
	border-color: rgba(255, 255, 255, .85) !important;
	box-shadow: 0 8px 22px -16px rgba(10, 40, 110, .4), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.studio-page .aai .aai-file { transition: transform .35s var(--a-spring, ease), box-shadow .35s, background-color .35s; }
.studio-page .aai .aai-file:hover { background: rgba(255, 255, 255, .78) !important; transform: translateY(-3px); box-shadow: 0 18px 34px -18px rgba(10, 40, 110, .5), inset 0 1px 0 #fff; }
/* buttons, pills and fields: glass */
.studio-page .aai .aai-btn-ghost, .studio-page .aai .aai-back-pill, .studio-page .aai .aai-chip, .studio-page .aai .aai-search, .studio-page .aai .aai-seg,
.studio-page .aai .aai-cv-btn, .studio-page .aai .aai-lock-tag {
	background: rgba(255, 255, 255, .55) !important; border-color: rgba(255, 255, 255, .85) !important;
	box-shadow: 0 6px 16px -12px rgba(10, 40, 110, .45), inset 0 1px 0 rgba(255, 255, 255, .95);
}
.studio-page .aai .aai-btn-ghost:hover, .studio-page .aai .aai-back-pill:hover, .studio-page .aai .aai-chip:hover { background: rgba(255, 255, 255, .8) !important; }
.studio-page .aai input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), .studio-page .aai select, .studio-page .aai textarea,
.studio-page .aai-modal-card input, .studio-page .aai-modal-card select, .studio-page .aai-modal-card textarea {
	background-color: rgba(255, 255, 255, .62) !important; border-color: rgba(160, 185, 230, .55) !important;
}
.studio-page .aai input:focus, .studio-page .aai select:focus, .studio-page .aai textarea:focus { background-color: rgba(255, 255, 255, .9) !important; }
/* account: tab rail as deep-blue glass */
.studio-page .aai .aai-acc-tabs { background: linear-gradient(170deg, rgba(15, 42, 74, .82), rgba(11, 79, 194, .78)) !important; -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); box-shadow: 0 18px 40px -22px rgba(15, 42, 74, .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
/* figures stay on true white so colours are judged correctly */
.studio-page .aai .aai-canvas, .studio-page .aai .aai-file-thumb, .studio-page .aai .aai-board-fig, .studio-page .aai .aai-reveal-fig, .studio-page .aai .aai-sv-img { background: #fff !important; }
.studio-page .aai .aai-file-thumb { border-bottom: 1px solid rgba(255, 255, 255, .9); }
/* no glass support: fall back to near-solid white */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.studio-page .aai .aai-dash, .studio-page .aai .aai-card, .studio-page .aai .aai-editor, .studio-page .aai-modal-card, .studio-page .aai-pop { background: rgba(255, 255, 255, .95) !important; }
}
@media (max-width: 720px) { .studio-page .aai { --g-blur: blur(12px) saturate(1.4); } }

.studio-page .aai .aai-dash-hero { background: transparent !important; }
.studio-page .aai .aai-file { background: rgba(255, 255, 255, .5) !important; }
/* editor: workspace, ruler, tabs and top bar as glass */
.studio-page .aai .aai-viewport {
	background-color: #f1f6ff !important;
	background-image: radial-gradient(rgba(47, 122, 229, .22) 1.2px, transparent 1.4px), radial-gradient(120% 90% at 0% 0%, rgba(47, 122, 229, .10), transparent 55%), radial-gradient(90% 80% at 100% 100%, rgba(240, 112, 31, .08), transparent 55%), linear-gradient(180deg, #f4f8ff, #ecf3ff) !important;
	background-size: 22px 22px, 100% 100%, 100% 100%, 100% 100% !important;
}
.studio-page .aai .aai-ruler { background: rgba(255, 255, 255, .5) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-color: rgba(255, 255, 255, .8) !important; }
.studio-page .aai .aai-tabs { background: rgba(255, 255, 255, .38) !important; border: 1px solid rgba(255, 255, 255, .75); }
.studio-page .aai .aai-ed-top { background: radial-gradient(circle at 100% 0, rgba(111, 208, 255, .35), transparent 50%), linear-gradient(120deg, rgba(43, 116, 189, .86), rgba(47, 122, 229, .8) 65%, rgba(0, 51, 153, .86)) !important; -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .2), 0 10px 26px -18px rgba(15, 42, 74, .7); }
.studio-page .aai .aai-tool-sep { background: rgba(160, 185, 230, .45) !important; }
/* the card title style must not reach the bold text inside the mini studio preview */
.aai-gen-card .aai-gen-card-art b, .aai .dv b { margin-top: 0; font-size: inherit; font-family: inherit; line-height: inherit; }
.aai .aai-flowbar li.is-done b { color: #fff !important; }
.aai .aai-flowbar li.is-done b svg { stroke-width: 2.6; }

/* editor tool rail and side panel: clean white-blue glass, no lavender cast */
.studio-page .aai .aai-editor .aai-tools, .studio-page .aai .aai-editor .aai-side { background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(241, 246, 255, .8)) !important; }
.studio-page .aai .aai-editor.is-full { background: #eef4ff !important; }

/* Touch screens (iPad): a finger drag goes to the chosen tool, never scrolls or drags the picture; two fingers pan / zoom (studio.js) */
.aai-viewport { touch-action: none; overscroll-behavior: contain; }
.aai-viewport svg, .aai-viewport img { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
.aai-stylebar, .aai-tools, .aai-cvbar { touch-action: manipulation; }
/* Export open: the button stays readable, the panel header keeps its blue */
.is-xopen .aai-ed-export { background: #fff !important; color: #e85d1a !important; box-shadow: inset 0 0 0 2px #e8641c, 0 8px 18px -10px rgba(255, 140, 40, .6) !important; }
.is-xopen .aai-ed-export svg { color: #e85d1a; }
.studio-page .aai .aai-side .aai-tabs [data-tab] { background: radial-gradient(circle at 100% 0, rgba(111, 208, 255, .35), transparent 50%), linear-gradient(140deg, #235f9c, #1f63d6 70%, #2b74bd) !important; color: #fff !important; }
.studio-page .aai .aai-side .aai-tabs [data-tab] * { color: #fff; }

/* ---------- minimised figure: a small window in the corner while a figure is made ---------- */
.aai-gp-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.aai-gp-min { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .85); border-radius: 999px; background: rgba(255, 255, 255, .62); color: #235f9c; font: 700 13.5px Roboto, sans-serif; cursor: pointer; box-shadow: 0 8px 20px -14px rgba(10, 40, 110, .55), inset 0 1px 0 #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform .25s, background-color .25s; }
.aai-gp-min:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .9); }
.aai-mini { position: fixed; left: 22px; bottom: 22px; z-index: 99990; display: flex; align-items: center; gap: 12px; width: min(330px, calc(100vw - 110px)); padding: 10px 14px 10px 10px; border-radius: 20px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 22px 44px -22px rgba(15, 42, 74, .6), 0 0 0 1px rgba(47, 122, 229, .12), inset 0 1px 0 #fff; cursor: pointer; font-family: Roboto, sans-serif; animation: aaiMiniIn .45s cubic-bezier(.2, .9, .25, 1.15) both; transition: transform .25s, box-shadow .25s; }
.aai-mini:hover { transform: translateY(-3px); box-shadow: 0 26px 48px -22px rgba(15, 42, 74, .7), 0 0 0 1px rgba(47, 122, 229, .25), inset 0 1px 0 #fff; }
.aai-mini.is-out { animation: aaiMiniOut .25s ease forwards; }
@keyframes aaiMiniIn { from { opacity: 0; transform: translateY(18px) scale(.9); } }
@keyframes aaiMiniOut { to { opacity: 0; transform: translateY(14px) scale(.92); } }
.aai-mini-ring { position: relative; flex: none; width: 52px; height: 52px; display: grid; place-items: center; }
.aai-mini-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.aai-mini-ring circle { fill: none; stroke-width: 4.5; }
.aai-mini-ring .bg { stroke: #e3ebfa; }
.aai-mini-ring .fg { stroke: #e8641c; stroke-linecap: round; stroke-dasharray: 125.66; transition: stroke-dashoffset .4s ease; }
.aai-mini-ring b { position: relative; font: 800 13px Roboto, sans-serif; color: #0a2a6b; }
.aai-mini-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.aai-mini-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #0a2a6b; }
.aai-mini-t em { font-style: normal; font-size: 12.5px; font-weight: 600; color: #3c4257; }
.aai-mini-t small { font-size: 11.5px; color: #5d6273; }
.aai-mini-go { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #eef4ff; color: #2b74bd; }
.aai-mini-x { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #eef2f8; color: #3c4257; font-size: 18px; line-height: 1; cursor: pointer; }
.aai-mini.is-done { background: linear-gradient(120deg, rgba(240, 253, 244, .92), rgba(255, 255, 255, .88)); animation: aaiMiniIn .45s cubic-bezier(.2, .9, .25, 1.15) both, aaiMiniPulse 2s ease-in-out .5s 3; }
.aai-mini.is-done .aai-mini-ring .fg { stroke: #16a34a; }
.aai-mini.is-done .aai-mini-ring b { color: #16a34a; font-size: 18px; }
.aai-mini.is-done .aai-mini-t em { color: #15803d; }
.aai-mini.is-err .aai-mini-ring .fg { stroke: #ef4444; }
.aai-mini.is-err .aai-mini-ring b { color: #ef4444; font-size: 18px; }
.aai-mini.is-err { cursor: default; }
@keyframes aaiMiniPulse { 50% { box-shadow: 0 0 0 8px rgba(22, 163, 74, .18), 0 22px 44px -22px rgba(15, 42, 74, .6); } }
@media (max-width: 640px) { .aai-mini { right: 12px; left: 12px; bottom: 88px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .aai-mini, .aai-mini.is-done { animation: none; } }
/* Minimise button: prominent, warm, gently animated */
.studio-page .aai .aai-gp-min, .aai-gp-min { position: relative; overflow: hidden; display: inline-grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 12px; height: auto; padding: 12px 24px 12px 18px; border: 0; border-radius: 18px; background: linear-gradient(110deg, #e85d1a, #f0701f) !important; color: #fff !important; text-align: left; box-shadow: 0 16px 30px -14px rgba(232, 93, 26, .85), inset 0 1px 0 rgba(255, 255, 255, .35); animation: aaiMinBreath 2.6s ease-in-out infinite; }
.aai-gp-min svg { grid-row: 1 / 3; width: 26px; height: 26px; padding: 7px; box-sizing: content-box; border-radius: 12px; background: rgba(255, 255, 255, .22); animation: aaiMinDown 1.6s ease-in-out infinite; }
.aai-gp-min span { font: 800 15.5px/1.2 Roboto, sans-serif; letter-spacing: .01em; }
.aai-gp-min em { font: 500 12.5px/1.2 Roboto, sans-serif; font-style: normal; opacity: .9; }
.aai-gp-min::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg); animation: aaiMinShine 3.2s ease-in-out infinite; pointer-events: none; }
.aai-gp-min:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 20px 34px -14px rgba(232, 93, 26, .95), inset 0 1px 0 rgba(255, 255, 255, .4); }
@keyframes aaiMinBreath { 50% { box-shadow: 0 16px 30px -14px rgba(232, 93, 26, .85), 0 0 0 7px rgba(240, 112, 31, .16), inset 0 1px 0 rgba(255, 255, 255, .35); } }
@keyframes aaiMinDown { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@keyframes aaiMinShine { 0%, 55% { left: -40%; } 100% { left: 130%; } }
@media (max-width: 640px) { .aai-gp-min { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .aai-gp-min, .aai-gp-min svg, .aai-gp-min::after { animation: none; } }

/* Compact pop-up messages: small, beside the support button, never covering the work */
.aai-toasts { right: 92px !important; bottom: 24px !important; gap: 6px !important; max-width: min(320px, calc(100vw - 110px)) !important; }
.aai-toast { gap: 8px !important; padding: 7px 8px 7px 12px !important; border-radius: 12px !important; font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.35 !important; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .45) !important; }
.aai-toast button { padding: 3px 10px !important; font-size: 12px !important; flex: none; }
@media (max-width: 640px) { .aai-toasts { right: 12px !important; left: 12px !important; bottom: 88px !important; max-width: none !important; } }

/* Superscript / subscript buttons: x² with the 2 raised, x₂ with the 2 lowered (never stacked) */
.aai-ss { display: inline-block; position: relative; font: 700 15px/1 Roboto, sans-serif; white-space: nowrap; }
.aai-ss sup, .aai-ss sub { position: relative; display: inline; font-size: 10px; line-height: 0; vertical-align: baseline; margin-left: 1px; }
.aai-ss sup { top: -0.55em; }
.aai-ss sub { top: 0.35em; }

a.aai-mini, a.aai-mini:hover { text-decoration: none; color: inherit; }
/* Move handle shown while a text is being typed */
.aai-inline-grip { position: absolute; z-index: 6; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(135deg, #2b74bd, #4a8fd2); color: #fff; cursor: move; box-shadow: 0 4px 10px -4px rgba(15, 42, 74, .6); touch-action: none; }
.aai-inline-grip[hidden] { display: none; }
.aai-inline-grip:hover { transform: scale(1.1); }
/* Bend points on lines: the small "+" on each segment adds a corner when dragged */
.aai-handle.is-add { fill: #fff; stroke: #e85d1a !important; stroke-dasharray: 1.5 1.2; opacity: .9; cursor: copy; }
.aai-handle.is-add:hover { fill: #fff3e8; opacity: 1; }
.aai-local-note { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: #eef7f0; color: #166534; font-size: 12.5px; font-weight: 600; }
/* Resolution choices: a soft pop and glow when one is picked */
.aai-dpi button { transition: transform .25s cubic-bezier(.2, .9, .25, 1.2), box-shadow .25s, background-color .25s, border-color .25s; }
.aai-dpi button:hover { transform: translateY(-2px); }
.aai-dpi button.is-on { animation: aaiDpiPick .45s cubic-bezier(.2, .9, .25, 1.3); box-shadow: 0 0 0 2px #4a8fd2, 0 10px 22px -12px rgba(43, 116, 189, .6) !important; }
@keyframes aaiDpiPick { 0% { transform: scale(.94); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .aai-dpi button.is-on { animation: none; } }
/* Built-in only: buttons of AI editing actions are not shown (only new figures use the AI) */
.aai [data-do="ai-erase"], .aai [data-do="hd"], .aai [data-do="regen"], .aai [data-do="relocate"], .aai [data-do="retext"], .aai [data-do="validate"], .aai [data-rv-go], .aai [data-proof], .aai [data-repair], .aai .aai-rv-in { display: none !important; }
/* Arrow and shape library over the figure: the drop-shadow filter on its holder stopped the glass blur, so the figure showed through sharp. The shadow moves to the panels, which get the pop-up glass and stay readable. */
.studio-page .aai .aai-lib { filter: none; }
.studio-page .aai .aai-lib-cats, .studio-page .aai .aai-lib-grid { background: rgba(255, 255, 255, .84) !important; -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7); box-shadow: 0 18px 34px -14px rgba(11, 35, 80, .32), inset 0 1px 0 rgba(255, 255, 255, .95) !important; }
/* Wide screens: the bars start 160px in, so they may only be that much narrower than the canvas (they wrap instead of running off the right edge). */
@media (min-width: 901px) { .aai-stylebar { max-width: calc(100% - 174px) !important; } }
/* Create figure sits in the writing box footer, beside "Try an example" */
.aai-compose-foot .aai-go-inline { flex: none; min-height: 44px; padding: 0 22px; font-size: 15.5px !important; border-radius: 999px; white-space: nowrap; }
@media (max-width: 640px) { .aai-compose-foot { flex-wrap: wrap; } .aai-compose-foot .aai-go-inline { width: 100%; justify-content: center; } }
/* Creating a figure: the same laptop view as the home page, standing free (no card around it) */
.aai-gp-art.aai-gp-laptop { padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.aai-lap { width: 100%; max-width: 660px; margin: 0 auto; padding: 10px; border-radius: 22px; background: #10182b; box-shadow: 0 0 0 1px #2a3550, 0 30px 60px -30px rgba(15, 42, 74, .55); }
.aai-lap-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px 10px; }
.aai-lap-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.aai-lap-bar i:nth-child(2) { background: #febc2e; } .aai-lap-bar i:nth-child(3) { background: #28c840; }
.aai-lap-bar span { margin-left: 10px; padding: 3px 14px; border-radius: 99px; background: #1e2840; color: #b9c4dc; font: 500 11.5px var(--a-body, sans-serif); }
.aai-lap-screen { position: relative; overflow: hidden; border-radius: 12px; background: #fff; isolation: isolate; }
/* The home page laptop (same frame and base as the hero), with the progress animation on its screen */
.aai-gp-laptop { position: relative; padding: 0 0 6px !important; }
.aai-gp-laptop::before { content: ""; position: absolute; inset: 8% 6% 12%; z-index: -1; border-radius: 50px; background: radial-gradient(55% 55% at 28% 38%, rgba(47, 123, 196, .22), transparent 70%), radial-gradient(50% 50% at 76% 70%, rgba(232, 93, 26, .24), transparent 70%); filter: blur(34px); animation: aaiLapGlow 6s ease-in-out infinite alternate; }
.aai-gp-dv { position: relative; width: 88%; max-width: 620px; margin: 0 auto; container-type: inline-size; filter: drop-shadow(0 30px 44px rgba(0, 20, 70, .32)); }
.aai-gp-dv .dv-screen { display: flex; flex-direction: column; }
.aai-gp-dv .aai-lap-screen { flex: 1; min-height: 0; border-radius: 0; }
.aai-gp-dv .aai-lap-screen .aai-board { height: 100%; min-height: 0; border-radius: 0 !important; }
/* Screen content in the site theme: light page, orange and blue accents (no strong blue wash) */
.aai-lap-screen .aai-board, .studio-page .aai .aai-lap-screen .aai-board { background: linear-gradient(160deg, #ffffff 0%, #f7f9fd 60%, #fff4ec 100%) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; box-shadow: none !important; }
.aai-lap-screen .aai-show-mesh { opacity: .1 !important; }
.aai-lap-screen .aai-show-mesh i:nth-child(1), .aai-lap-screen .aai-show-mesh i:nth-child(3) { background: #9fc0f5; }
.aai-lap-screen .aai-show-mesh i:nth-child(2) { background: #ffd2b0; }
@keyframes aaiLapGlow { from { opacity: .7; transform: scale(.97); } to { opacity: 1; transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .aai-gp-laptop::before { animation: none; } }
/* Inside the laptop: the studio itself (menu with the chosen generator, steps) and the running progress as a card */
.aai-gp-dv .aai-lap-app { flex: 1; height: auto; min-height: 0; }
.aai-gp-dv .dv-main { min-height: 0; }
.aai-gp-dv .aai-lap-screen { flex: 1; border-radius: 1.6cqw; box-shadow: 0 0 0 1px #dfe6f2, 0 1.6cqw 3.6cqw -2cqw rgba(15, 42, 74, .35); }
.aai-gp-dv .aai-board { container-type: inline-size; }
.aai-gp-dv .aai-sc-word { font-size: 7.2cqw !important; line-height: 1.15; }
.aai-gp-dv .aai-show-card h3 { font-size: 3.6cqw !important; line-height: 1.25; margin: 2cqw 0 1cqw; }
.aai-gp-dv .aai-show-card p { font-size: 2.9cqw !important; }
.aai-gp-dv .aai-sc-tray span { font-size: 2.6cqw !important; padding: .8cqw 2cqw; max-width: 40cqw; }
.aai-gp-dv .aai-show-cap { font-size: 2.6cqw !important; }
.aai-gp-dv .aai-sc-steps { transform: scale(.85); }
/* No studio menu inside the laptop: the steps bar and the progress card use the whole screen */
.aai-lap-nosb { grid-template-columns: 1fr !important; }
/* Laptop screen shows only the progress card (no address bar, no steps row) */
.aai-gp-dv .aai-lap-app { height: 100% !important; }
.aai-gp-dv .aai-lap-nosb .dv-main { padding: 1.6cqw; }
/* Laptop screen: checked terms in a neat wrapping row above the status line, both fully inside the screen */
.aai-gp-dv .aai-show-cap { left: 2.4cqw !important; right: auto; bottom: 2.4cqw !important; max-width: calc(100% - 4.8cqw) !important; padding: 1.2cqw 2.4cqw 1.2cqw 1.8cqw; font-size: 2.5cqw !important; }
.aai-gp-dv .aai-show-terms { left: 2.4cqw !important; right: auto !important; top: auto !important; bottom: 9.5cqw !important; display: flex !important; flex-wrap: wrap; gap: .9cqw 1.2cqw !important; max-width: calc(100% - 4.8cqw) !important; padding: 1.2cqw 1.6cqw !important; border-radius: 1.6cqw !important; }
.aai-gp-dv .aai-show-terms li { font-size: 2.2cqw !important; max-width: 34cqw; padding: 0 !important; background: none !important; box-shadow: none !important; }
.aai-gp-dv .aai-show-terms li i { width: 2.4cqw; height: 2.4cqw; }
.aai-gp-dv .aai-show-terms li i::after { left: .8cqw; top: .4cqw; width: .6cqw; height: 1.2cqw; }
.aai-gp-dv .aai-show-terms li:nth-last-child(n+5) { display: none; }
/* Figure name in the editor bar: a clear white pill with navy text (readable on the blue bar), orange ring when editing */
.studio-page .aai .aai-ed-top .aai-ed-title, .aai-ed-top .aai-ed-title { background: rgba(255, 255, 255, .96) !important; color: #0f2a4a !important; border: 1.5px solid rgba(255, 255, 255, .9) !important; border-radius: 12px !important; padding: 7px 14px !important; box-shadow: 0 6px 16px -10px rgba(0, 20, 70, .6); text-overflow: ellipsis; }
.aai-ed-top .aai-ed-title::placeholder { color: #7a869c; }
.aai-ed-top .aai-ed-title:hover { background: #fff !important; }
.aai-ed-top .aai-ed-title:focus { background: #fff !important; border-color: #e85d1a !important; box-shadow: 0 0 0 3px rgba(232, 93, 26, .25) !important; outline: none; }
.studio-page .aai .aai-ed-top input.aai-ed-title.aai-ed-title.aai-ed-title.aai-ed-title, .studio-page .aai .aai-ed-top input.aai-ed-title.aai-ed-title.aai-ed-title.aai-ed-title:hover { background-color: #fff !important; border-color: rgba(255, 255, 255, .95) !important; }
.studio-page .aai .aai-ed-top input.aai-ed-title.aai-ed-title.aai-ed-title.aai-ed-title:focus { background-color: #fff !important; border-color: #e85d1a !important; }
/* Change case ("Aa") menu in the text bar */
.aai-stylebar select.aai-sb-case { width: 58px; min-width: 58px; font-weight: 700; text-align: center; }
.aai-stylebar .aai-sb-flip { display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; color: #2f7bc4; font-weight: 700; }
/* Icon library pop-out (studio toolbar → Search icons) */
.aai-iconlib .aai-lib-cats button { justify-content: space-between; }
.aai-iconlib .aai-lib-cats button i { font-style: normal; font-size: 12px; color: #7a869c; }
.aai-iconlib .aai-icon-main { display: flex !important; flex-direction: column; gap: 10px; width: 400px; max-height: min(70vh, 560px); overflow: hidden; }
.aai-icon-q { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px #d5deee; }
.aai-icon-q:focus-within { box-shadow: inset 0 0 0 2px #e85d1a; }
.aai-icon-q svg { width: 18px; height: 18px; color: #5b6b88; flex: none; }
.studio-page .aai .aai-icon-q input, .aai-icon-q input { flex: 1; min-width: 0; height: 36px; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; font: 600 14px var(--a-body, sans-serif); color: #0f2a4a; }
.aai-icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; overflow: auto; padding: 2px; }
.aai-icon-grid button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 0; border-radius: 12px; background: #f6f8fd; cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s; }
.aai-icon-grid button:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px -12px rgba(11, 35, 80, .5), 0 0 0 1.5px #e85d1a; }
.aai-icon-grid button.is-busy { opacity: .5; }
.aai-icon-grid img { width: 56px; height: 56px; object-fit: contain; }
.aai-icon-grid span { max-width: 100%; overflow: hidden; color: #33405a; font: 600 11px/1.2 var(--a-body, sans-serif); text-overflow: ellipsis; white-space: nowrap; }
.aai-icon-grid .aai-small { grid-column: 1 / -1; margin: 8px 4px; }
.aai-tools [data-act="icons"] svg { color: #e85d1a; }
.aai-tools.is-big .aai-tb.is-icons { grid-column: 1 / -1; width: auto; min-height: 44px; flex-direction: row; gap: 8px; margin: 2px 0 2px; border-radius: 14px; background: #fff !important; color: #0f2a4a !important; box-shadow: inset 0 0 0 1.5px #f8c9a6, 0 6px 14px -10px rgba(232, 93, 26, .6) !important; }
.aai-tools.is-big .aai-tb.is-icons:hover { box-shadow: inset 0 0 0 2px #e85d1a, 0 10px 20px -12px rgba(232, 93, 26, .7) !important; transform: translateY(-1px); }
.aai-lib-grid .aai-icon-grid button { display: flex !important; width: auto !important; height: auto !important; min-height: 92px; }
/* Uploads & icons panel: search across both, icon library folders under your uploads */
.aai-gal-q { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 140px; max-width: 280px; height: 36px; margin: 0 4px 0 auto; padding: 0 10px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1.5px #d5deee; }
.aai-gal-q:focus-within { box-shadow: inset 0 0 0 2px #e85d1a; }
.aai-gal-q svg { width: 16px; height: 16px; color: #5b6b88; flex: none; }
.studio-page .aai .aai-gal-q input, .aai-gal-q input { flex: 1; min-width: 0; height: 32px; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; font: 600 13px var(--a-body, sans-serif); color: #0f2a4a; }
.aai-gal-sub { grid-column: 1 / -1; margin: 4px 2px 0; color: #7a879c; font: 700 11px var(--a-body); letter-spacing: .08em; text-transform: uppercase; }
.aai-gal-it.is-icon img { object-fit: contain; padding: 8px; background: #fff; }
.aai-gal-f .aai-cat-ic { width: 22px; height: 22px; flex: none; }
.aai-gal-f .aai-cat-ic { width: 26px; height: 26px; padding: 3px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px #e3eaf6, 0 3px 8px -5px rgba(232, 93, 26, .55); }
.aai-gal-f.is-on .aai-cat-ic { box-shadow: 0 0 0 1.5px #e85d1a; }
@media (min-width: 761px) { .aai-gal { width: min(760px, calc(100% - 100px)) !important; } .aai-gal-body { grid-template-columns: 228px 1fr !important; } }
.aai-gal-f span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Icon library pop-up: search only (no upload or folders) */
.aai-gal.is-icons .aai-gal-up, .aai-gal.is-icons [data-gnew] { display: none !important; }

/* Copy style (format painter) */
.aai-editor[data-tool="painter"] .aai-canvas { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cg stroke='%23fff' stroke-width='3.4' stroke-linejoin='round' fill='none'%3E%3Crect x='4' y='3' width='13' height='6' rx='1.5'/%3E%3Cpath d='M17 6h2.5v5.5l-7.5 1.5v2'/%3E%3Crect x='10' y='15' width='4' height='6' rx='1'/%3E%3C/g%3E%3Cg stroke='%230b2350' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='13' height='6' rx='1.5' fill='%23ff8a00'/%3E%3Cpath d='M17 6h2.5v5.5l-7.5 1.5v2' fill='none'/%3E%3Crect x='10' y='15' width='4' height='6' rx='1' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E") 12 23, copy; }
.aai-painterbar { flex-wrap: nowrap; }
.aai-pb-step { gap: 7px; color: #3c4a66; font-weight: 600; font-size: 13px; white-space: nowrap; }
.aai-pb-step b { color: #0f2a4a; }
.aai-pb-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(110deg, #f0701f, #e85d1a); }
.aai-pb-sample { gap: 8px; font-size: 12.5px; font-weight: 600; color: #33405a; white-space: nowrap; }
.aai-pb-aa { display: grid; place-items: center; min-width: 34px; height: 30px; padding: 0 6px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #dfe6f3; font-size: 18px; line-height: 1; }
.aai-pb-dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.aai-sb-btn.aai-pb-btn { font-size: 12.5px; padding: 0 10px; }
.aai-fixsel.is-paste { fill: rgba(47, 123, 196, .1); stroke: #2f7bc4; }
.aai-fmtflash { fill: rgba(15, 157, 88, .08); stroke: #0f9d58; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; animation: aaiFmtFlash .95s ease-out forwards; }
.aai-fmtflash.is-paste { fill: rgba(47, 123, 196, .08); stroke: #2f7bc4; }
@keyframes aaiFmtFlash { 0% { opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.aai-painterbar { -webkit-user-select: none; user-select: none; }
.aai-sb-btn.aai-pb-w { min-width: 30px; height: 30px; font-size: 15px; font-family: Georgia, serif; }
.aai-sb-btn.aai-pb-w b { font-family: Roboto, Arial, sans-serif; font-weight: 900; }

/* Step 2: Back sits in the step bar, left of the steps */
.aai-flowbar { transition: padding-left .5s cubic-bezier(.2, .8, .2, 1); }
.aai-flowbar.has-back { padding-left: 128px; }
.aai-flowbar .aai-flow-back { position: absolute; left: 26px; top: 50%; margin-top: -18px; z-index: 2; }

/* Pop-ups (dialogs) in the site's look. They sit outside the studio area, so they carry the same colours and type. */
.aai-modal {
	--a-royal: #2f7bc4; --a-violet: #4a8fd2; --a-purple: #23609f; --a-indigo: #1f568f; --a-deep: #1b4c80;
	--a-orange: #f0701f; --a-flame: #e85d1a; --a-gold: #f0701f; --a-green: #16a34a; --a-red: #c8352b;
	--a-ink: #1a1b1e; --a-ink2: #1d2240; --a-text: #3c4257; --a-muted: #5d6273; --a-faint: #8a91a8;
	--a-line: #e3e8f4; --a-line2: #d6def0; --a-soft: #f1f5fd; --a-paper: #f6f9ff;
	--a-grad: radial-gradient(circle at 100% 0, rgba(111, 208, 255, .4), transparent 50%), linear-gradient(145deg, #2f7bc4, #4a8fd2 65%, #23609f);
	--a-warm: linear-gradient(110deg, #f0701f, #e85d1a);
	--a-head: Roboto, system-ui, sans-serif; --a-body: Roboto, system-ui, sans-serif;
	--a-ease: cubic-bezier(.16, 1, .3, 1); --a-spring: cubic-bezier(.34, 1.56, .64, 1);
	color: var(--a-ink); font: 400 15px/1.55 var(--a-body); text-align: left;
	background: rgba(4, 20, 58, .58) !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important;
}
.aai-modal *, .aai-modal *::before, .aai-modal *::after { box-sizing: border-box; }
.aai-modal h3 { font-family: var(--a-head); color: var(--a-deep); letter-spacing: -.015em; }
.aai-modal .aai-modal-card, .studio-page .aai-modal .aai-modal-card {
	position: relative; border-radius: 24px; background: linear-gradient(180deg, #fff 0, #fff 70%, #f7faff 100%) !important;
	-webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important;
	box-shadow: 0 40px 90px -30px rgba(0, 20, 70, .65), 0 0 0 1px rgba(47, 123, 196, .07) !important;
}
.aai-modal .aai-modal-card::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, #2f7bc4, #4a8fd2 55%, #f0701f); }
.aai-modal [data-x].aai-icon-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--a-soft); color: var(--a-deep); font-size: 15px; font-weight: 700; }
.aai-modal [data-x].aai-icon-btn:hover { background: #e3ecff; transform: rotate(90deg); }
.aai-modal .aai-eyebrow { color: var(--a-royal); }
.aai-modal .aai-dlg-card p { color: var(--a-muted); }
.aai-ch-head h3 { color: var(--a-deep); }
.aai-ch-item { background: #fff !important; box-shadow: inset 0 0 0 1px var(--a-line), 0 12px 26px -22px rgba(15, 42, 74, .55) !important; }
.aai-ch-item:hover { box-shadow: inset 0 0 0 2px var(--a-royal), 0 18px 34px -20px rgba(47, 123, 196, .55) !important; transform: translateY(-3px); }
.aai-ch-txt b { color: var(--a-deep); }
/* Blank canvas preview */
.aai-ch-blank .aai-ch-art { display: block; aspect-ratio: auto; background: #fff; }
.aai-bl .dv-app { display: block; }
.aai-bl-main, .aai-ch-blank .aai-ch-art .aai-bl-main svg { display: block; width: 100%; height: 100%; color: inherit; }

/* Text menu, Quick styles gallery, Shape outline panel */
.aai-pf-badge.is-text { background: linear-gradient(140deg, #235f9c, #1f63d6 55%, #3b82f6) !important; }
.aai-qs, .aai-olp { position: absolute; z-index: 55; padding: 12px 14px 14px; border-radius: 16px; background: #fff; box-shadow: 0 22px 48px -18px rgba(10, 40, 110, .5), 0 0 0 1px rgba(47, 123, 196, .08); font-family: Roboto, system-ui, sans-serif; animation: aaiGlassIn .3s cubic-bezier(.34, 1.56, .64, 1) both; }
.aai-qs-head { margin: 0 2px 10px; }
.aai-qs-head b { display: block; font-size: 14px; font-weight: 800; color: #1b4c80; }
.aai-qs-head em { display: block; font-style: normal; font-size: 11.5px; color: #5d6273; }
.aai-qs-row { display: flex; align-items: center; gap: 7px; margin-top: 7px; }
.aai-qs-l { width: 66px; flex: none; font-size: 10.5px; font-weight: 700; color: #8a91a8; text-transform: uppercase; letter-spacing: .04em; line-height: 1.15; }
.aai-qs button { width: 46px; height: 34px; border: 0; border-radius: 8px; cursor: pointer; font: 600 13px Roboto, Arial, sans-serif; transition: transform .15s, outline-color .15s; outline: 2px solid transparent; outline-offset: 2px; }
.aai-qs button.is-clear { background-image: linear-gradient(45deg, #eef1f7 25%, transparent 25%, transparent 75%, #eef1f7 75%), linear-gradient(45deg, #eef1f7 25%, transparent 25%, transparent 75%, #eef1f7 75%) !important; background-size: 10px 10px; background-position: 0 0, 5px 5px; }
.aai-qs button:hover { transform: translateY(-2px) scale(1.04); outline-color: #f0701f; }
.aai-olp { width: 236px; }
.aai-olp-cols { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.aai-olp-cols button { aspect-ratio: 1; border: 0; border-radius: 7px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); transition: transform .15s; }
.aai-olp-cols button:hover { transform: scale(1.1); }
.aai-olp-cols button.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2f7bc4; }
.aai-olp-none { width: 100%; margin-top: 9px; height: 30px; border: 0; border-radius: 8px; background: #f3f6fc; color: #33405a; font: 600 12.5px Roboto, sans-serif; cursor: pointer; }
.aai-olp-none.is-on { background: #e2ecff; color: #2f7bc4; }
.aai-olp-more { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; font-size: 12px; font-weight: 600; color: #33405a; cursor: pointer; }
.aai-olp-more input { width: 34px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.aai-olp-l { display: block; margin: 11px 2px 5px; font-style: normal; font-size: 10.5px; font-weight: 700; color: #8a91a8; text-transform: uppercase; letter-spacing: .06em; }
.aai-olp-list { display: grid; gap: 3px; }
.aai-olp-list button { display: flex; align-items: center; gap: 10px; height: 26px; padding: 0 8px; border: 0; border-radius: 7px; background: none; cursor: pointer; font: 600 12px Roboto, sans-serif; color: #33405a; }
.aai-olp-list button:hover { background: #f3f6fc; }
.aai-olp-list button.is-on { background: #e2ecff; color: #2f7bc4; }
.aai-olp-list i { flex: 1; display: block; background: currentColor; border-radius: 2px; }
.aai-olp-list span { width: 52px; text-align: right; }
.aai-olp-list.is-dash i { height: 2.4px; background: none; border-top: 2.4px solid currentColor; }
.aai-olp-list.is-dash i.is-dashed { border-top-style: dashed; }
.aai-olp-list.is-dash i.is-dotted { border-top-style: dotted; }
.aai-editor[data-tool="outline"] .aai-canvas, .aai-editor[data-tool="textbox"] .aai-canvas { cursor: crosshair; }
/* Sidebar foot: a quiet signature, no logo */
@media (min-width: 901px) { .aai-brand-foot { display: block; } }
.aai-brand-foot > span { display: grid; gap: 3px; padding-left: 12px; border-left: 2px solid transparent; border-image: linear-gradient(180deg, #2f7bc4, #f0701f) 1; }
.aai-brand-foot b { font: 800 12px/1.2 Roboto, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #2f7bc4; }
.aai-brand-foot em { font: 500 13px/1.45 Roboto, system-ui, sans-serif; font-style: normal; color: #5d6273; }
/* Library pop-ups (arrows, lines, shapes, symbols, icons): solid, so the toolbar never shows through */
.studio-page .aai .aai-lib .aai-lib-cats, .studio-page .aai .aai-lib .aai-lib-grid, .aai-lib .aai-lib-cats, .aai-lib .aai-lib-grid {
	background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
	box-shadow: 0 22px 48px -18px rgba(10, 40, 110, .45), 0 0 0 1px rgba(47, 123, 196, .08) !important; border: 0 !important;
}

/* Charts: library tiles and the chart editor */
.aai-cht-intro { grid-column: 1 / -1; display: grid; gap: 2px; padding: 2px 2px 6px; }
.aai-cht-intro b { font-size: 14px; color: #1b4c80; }
.aai-cht-intro span { font-size: 12.5px; color: #5d6273; }
.aai-gal-it.is-chart { background: #fff !important; box-shadow: inset 0 0 0 1px #e3e8f4; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.aai-gal-it.is-chart:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 2px #2f7bc4, 0 14px 26px -18px rgba(47, 123, 196, .6); }
.aai-cht-mini { display: grid; place-items: center; padding: 8px 6px 0; }
.aai-cht-mini svg { width: 100%; height: auto; }
.aai-gal-it.is-chart:hover .aai-cht-mini svg { animation: aaiChtPop .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes aaiChtPop { 0% { transform: scaleY(.2); transform-origin: 50% 100%; opacity: .4; } 100% { transform: none; opacity: 1; } }
.aai-chartdlg .aai-chart-card { width: min(1180px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 22px 24px 20px; display: flex; flex-direction: column; }
.aai-cht-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 22px; min-height: 0; flex: 1; }
.aai-cht-left { display: flex; flex-direction: column; min-height: 0; }
.aai-cht-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #f1f5fd; margin-bottom: 12px; }
.aai-cht-tabs button { flex: 1; height: 36px; border: 0; border-radius: 9px; background: none; font: 700 13.5px Roboto, sans-serif; color: #5d6273; cursor: pointer; }
.aai-cht-tabs button.is-on { background: #fff; color: #2f7bc4; box-shadow: 0 6px 14px -10px rgba(10, 40, 110, .5); }
.aai-cht-pane { overflow: auto; max-height: calc(100vh - 230px); padding-right: 2px; }
.aai-cht-note { margin: 0 0 8px; font-size: 12px; color: #5d6273; }
.aai-cht-tw { overflow: auto; border-radius: 12px; box-shadow: inset 0 0 0 1px #e3e8f4; }
.aai-cht-t { border-collapse: collapse; width: 100%; font: 500 13px Roboto, sans-serif; }
.aai-cht-t th, .aai-cht-t td { border-bottom: 1px solid #eef1f8; border-right: 1px solid #eef1f8; padding: 0; }
.aai-cht-t th { background: #f6f9ff; }
.aai-cht-t th > div, .aai-cht-t th, .aai-cht-t td:first-child { white-space: nowrap; }
.aai-cht-t input:not([type]) , .aai-cht-t input[inputmode] { width: 100%; min-width: 64px; height: 36px; padding: 0 10px; border: 0; background: transparent; font: inherit; color: #1d2240; outline: none; }
.aai-cht-t th input { font-weight: 700; color: #1b4c80; }
.aai-cht-t input:focus { background: #eef4ff; box-shadow: inset 0 0 0 2px #2f7bc4; }
.aai-cht-t th, .aai-cht-t td:first-child { position: relative; }
.aai-cht-t td:first-child, .aai-cht-t th:not(.aai-cht-eh):not(.aai-cht-add) { display: table-cell; }
.aai-cht-t th:not(.aai-cht-eh):not(.aai-cht-add) > *, .aai-cht-t td:first-child > * { vertical-align: middle; }
.aai-cht-t td:first-child { background: #fbfcff; }
.aai-cht-t td:first-child input { font-weight: 600; }
.aai-cht-t button[data-sdel], .aai-cht-t button[data-rdel] { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fdecea; color: #c8352b; font-weight: 800; cursor: pointer; opacity: 0; transition: opacity .15s; }
.aai-cht-t th:hover button[data-sdel], .aai-cht-t td:hover button[data-rdel] { opacity: 1; }
.aai-cht-sw { position: relative; display: inline-block; width: 16px; height: 16px; margin-left: 8px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); cursor: pointer; vertical-align: middle; }
.aai-cht-sw input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.aai-cht-sw + input { display: inline-block; width: calc(100% - 30px) !important; }
.aai-cht-eh { font-size: 11px; font-weight: 700; color: #8a91a8; text-transform: uppercase; letter-spacing: .05em; padding: 0 8px !important; }
.aai-cht-ec input { color: #5d6273 !important; min-width: 56px !important; }
.aai-cht-add button { height: 36px; padding: 0 12px; border: 0; background: none; color: #2f7bc4; font: 700 12.5px Roboto, sans-serif; cursor: pointer; white-space: nowrap; }
.aai-cht-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.aai-cht-radd { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: #f1f5fd; color: #2f7bc4; font: 700 12.5px Roboto, sans-serif; cursor: pointer; }
.aai-cht-radd:hover { background: #e3ecff; }
.aai-cht-types { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.aai-cht-types button { display: grid; gap: 2px; padding: 6px 4px 5px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #e3e8f4; cursor: pointer; font: 600 10.5px Roboto, sans-serif; color: #3c4257; }
.aai-cht-types button svg { width: 100%; height: auto; }
.aai-cht-types button.is-on { box-shadow: inset 0 0 0 2px #2f7bc4; color: #2f7bc4; background: #f3f7ff; }
.aai-cht-f { display: grid; gap: 4px; margin-bottom: 9px; }
.aai-cht-f span, .aai-cht-pl { font-size: 11px; font-weight: 700; color: #8a91a8; text-transform: uppercase; letter-spacing: .05em; }
.aai-cht-f input { height: 36px; padding: 0 12px; border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1.5px #dfe6f3; font: 500 13.5px Roboto, sans-serif; color: #1d2240; outline: none; }
.aai-cht-f input:focus { box-shadow: inset 0 0 0 2px #2f7bc4; }
.aai-cht-seg { display: flex; gap: 4px; margin: 6px 0 10px; }
.aai-cht-seg button { flex: 1; height: 32px; border: 0; border-radius: 9px; background: #f1f5fd; font: 700 12.5px Roboto, sans-serif; color: #5d6273; cursor: pointer; }
.aai-cht-seg button.is-on { background: #2f7bc4; color: #fff; }
.aai-cht-chk { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; margin: 4px 0 12px; font-size: 13px; color: #1d2240; }
.aai-cht-chk label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.aai-cht-pals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.aai-cht-pals button { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 7px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #e3e8f4; cursor: pointer; }
.aai-cht-pals button i { height: 12px; border-radius: 3px; }
.aai-cht-pals button span { grid-column: 1 / -1; font: 600 11px Roboto, sans-serif; color: #3c4257; margin-top: 3px; }
.aai-cht-pals button.is-on { box-shadow: inset 0 0 0 2px #2f7bc4; }
.aai-cht-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.aai-cht-prev { flex: 1; display: grid; place-items: center; padding: 12px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px #e3e8f4, 0 18px 36px -26px rgba(10, 40, 110, .45); }
.aai-cht-prev svg { width: 100%; height: auto; max-height: calc(100vh - 260px); }
.aai-cht-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aai-cht-foot span { font-size: 12px; color: #5d6273; }
.aai-cht-foot .aai-btn { height: 46px; padding: 0 26px; border: 0; border-radius: 99px; font: 800 15px Roboto, sans-serif; color: #fff; background: linear-gradient(110deg, #f0701f, #e85d1a); box-shadow: 0 14px 30px -12px rgba(232, 93, 26, .75); cursor: pointer; white-space: nowrap; }
.aai-cht-foot .aai-btn:disabled { opacity: .7; cursor: progress; }
@media (max-width: 860px) { .aai-cht-body { grid-template-columns: 1fr; } .aai-cht-types { grid-template-columns: repeat(5, 1fr); } }
/* Graphs panel */
.aai-graphs .aai-gr-body { flex: 1; overflow: auto; padding: 10px 16px 14px; }
.aai-gr-h { margin: 6px 2px 8px; font: 800 11px Roboto, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #8a91a8; }
.aai-gr-h:not(:first-child) { margin-top: 16px; }
.aai-graphs .aai-gal-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.aai-tools.is-big .aai-tb.is-graphs { color: #2f7bc4; }
.aai-cht-corner { font-size: 11px; font-weight: 700; color: #8a91a8; text-transform: uppercase; letter-spacing: .05em; padding: 0 10px !important; text-align: left; }

/* Graph tiles: the hover outline sits above the label, so it shows all round */
.aai-gal-it.is-chart::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #e3e8f4; pointer-events: none; transition: box-shadow .2s; }
.aai-gal-it.is-chart, .aai-gal-it.is-chart:hover { box-shadow: none; }
.aai-gal-it.is-chart:hover { box-shadow: 0 14px 26px -18px rgba(47, 123, 196, .6); }
.aai-gal-it.is-chart:hover::after { box-shadow: inset 0 0 0 2px #2f7bc4; }
.aai-gal-it.is-chart:focus-visible { outline: none; }

/* Graphs: its own card at the foot of the tool rail */
.aai-tools.is-big .aai-tb.aai-tb-graphs { margin-top: auto; flex: none; gap: 3px; min-height: 74px; padding: 9px 2px 8px; color: #fff; background: linear-gradient(160deg, #2f7bc4 0%, #4a8fd2 55%, #e85d1a 140%); box-shadow: 0 12px 22px -14px rgba(47, 123, 196, .95), inset 0 0 0 1px rgba(255, 255, 255, .18); overflow: hidden; }
.aai-tools.is-big .aai-tb.aai-tb-graphs::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); animation: aaiTbgShine 4.5s ease-in-out infinite; pointer-events: none; }
.aai-tools.is-big .aai-tb.aai-tb-graphs:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 26px -14px rgba(232, 93, 26, .9), inset 0 0 0 1px rgba(255, 255, 255, .3); background: linear-gradient(160deg, #2f7bc4 0%, #4a8fd2 45%, #e85d1a 115%); }
.aai-tools.is-big .aai-tb.aai-tb-graphs.is-on { box-shadow: 0 0 0 2.5px #f0701f, 0 12px 22px -14px rgba(47, 123, 196, .95); }
.aai-tb-graphs > span:not(.aai-tbg-ico) { font-weight: 800; letter-spacing: .01em; }
.aai-tb-graphs em { font: 600 9.5px/1 var(--a-body, sans-serif); font-style: normal; opacity: .82; letter-spacing: .02em; }
.aai-tbg-ico { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.aai-tbg-ico i { display: block; width: 5px; border-radius: 2px 2px 1px 1px; background: #fff; transform-origin: bottom; animation: aaiTbgBar 2.4s ease-in-out infinite; }
.aai-tbg-ico i:nth-child(1) { height: 9px; } .aai-tbg-ico i:nth-child(2) { height: 15px; animation-delay: .15s; } .aai-tbg-ico i:nth-child(3) { height: 12px; animation-delay: .3s; background: #ffd2a8; } .aai-tbg-ico i:nth-child(4) { height: 21px; animation-delay: .45s; background: #ff9a3c; }
@keyframes aaiTbgBar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.55); } }
@keyframes aaiTbgShine { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .aai-tbg-ico i, .aai-tb-graphs::before { animation: none !important; } }

/* Sidebar: Graph studio, set apart from the generator folders */
.aai-side-tools { margin: 14px 0 4px; padding: 12px 0 2px; border-top: 1px solid rgba(255, 255, 255, .14); }
.aai-side-tools .aai-side-sub { margin-top: 0; }
.aai-side-nav .aai-side-tools + .aai-side-sub { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .14); }
.aai-side-nav .aai-side-sub:nth-of-type(2) { padding-top: 0; border-top: 0; }
.aai-side-graphs { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 12px; background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(240, 112, 31, .16)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); color: #fff; font: 700 14px var(--a-body, sans-serif); text-align: left; cursor: pointer; transition: background .2s, box-shadow .2s, transform .2s; }
.aai-side-graphs > span:nth-child(2) { flex: 1; }
.aai-side-graphs em { padding: 3px 7px; border-radius: 99px; background: linear-gradient(110deg, #f0701f, #e85d1a); color: #fff; font: 800 9.5px/1 var(--a-body, sans-serif); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.aai-side-graphs:hover { transform: translateX(2px); background: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(240, 112, 31, .24)); }
.aai-side-graphs.is-on { background: #fff; color: #0a3f9a; box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .55); }
.aai-sg-ico { display: flex; align-items: flex-end; gap: 2.5px; width: 22px; height: 18px; padding: 3px; border-radius: 7px; background: rgba(255, 255, 255, .18); box-sizing: content-box; }
.aai-sg-ico i { flex: 1; border-radius: 1.5px; background: #fff; transform-origin: bottom; animation: aaiTbgBar 2.4s ease-in-out infinite; }
.aai-sg-ico i:nth-child(1) { height: 45%; } .aai-sg-ico i:nth-child(2) { height: 80%; animation-delay: .2s; } .aai-sg-ico i:nth-child(3) { height: 100%; animation-delay: .4s; background: #ff9a3c; }
.aai-side-graphs.is-on .aai-sg-ico { background: #eef4ff; } .aai-side-graphs.is-on .aai-sg-ico i { background: #2f7bc4; } .aai-side-graphs.is-on .aai-sg-ico i:nth-child(3) { background: #e85d1a; }

/* Graph studio hero: a table filling in beside its graph */
.aai-gs-dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 3px; background: linear-gradient(135deg, #2f7bc4, #f0701f); }
.aai-gs-art { display: grid; grid-template-columns: 132px 1fr; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: linear-gradient(160deg, #f4f8ff, #fff); box-shadow: inset 0 0 0 1px #e3eaf6; }
.aai-gs-sheet { display: grid; gap: 3px; font: 600 11.5px Roboto, sans-serif; color: #1d2240; }
.aai-gs-th, .aai-gs-tr { display: grid; grid-template-columns: 1fr 44px; gap: 3px; }
.aai-gs-th span { padding: 4px 6px; color: #8a91a8; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.aai-gs-tr span { height: 24px; padding: 0 6px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #e3e9f3; line-height: 24px; white-space: nowrap; overflow: hidden; opacity: .45; transition: opacity .3s, box-shadow .3s; }
.aai-gs-tr.is-on span { opacity: 1; }
.aai-gs-tr span:last-child { text-align: right; font-weight: 700; }
.aai-gs-tr.is-typing span:last-child { box-shadow: inset 0 0 0 2px #2f7bc4; }
.aai-gs-tr.is-typing span:last-child::after { content: ""; display: inline-block; width: 1.5px; height: 12px; margin-left: 2px; vertical-align: -2px; background: #2f7bc4; animation: aaiGsCaret .8s steps(1) infinite; }
@keyframes aaiGsCaret { 50% { opacity: 0; } }
.aai-gs-type { display: flex; gap: 3px; margin-top: 6px; }
.aai-gs-type i { flex: 1; padding: 4px 0; border-radius: 6px; background: #eef3fb; color: #5d6273; font: 700 9.5px Roboto, sans-serif; font-style: normal; text-align: center; transition: background .3s, color .3s; }
.aai-gs-type i.is-on { background: #2f7bc4; color: #fff; }
.aai-gs-chart svg { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 14px 30px -20px rgba(11, 35, 80, .55); }
.aai-gs-go { background: linear-gradient(110deg, #f0701f, #e85d1a) !important; box-shadow: 0 14px 28px -14px rgba(232, 93, 26, .85) !important; }
@media (max-width: 720px) { .aai-gs-art { grid-template-columns: 1fr; } }

/* Canvas dialog: background choice */
.aai-blank-bg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 14px; }
.aai-blank-bg > span { margin-right: 4px; font: 700 11px Roboto, sans-serif; color: #8a91a8; letter-spacing: .06em; text-transform: uppercase; }
.aai-blank-bg button, .aai-blank-pick { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 8px; border: 0; border-radius: 10px; background: #f1f5fd; color: #23365e; font: 700 12.5px Roboto, sans-serif; cursor: pointer; transition: box-shadow .15s, background .15s; }
.aai-blank-bg button.is-on, .aai-blank-pick.is-on { background: #fff; box-shadow: inset 0 0 0 2px #2f7bc4; color: #2f7bc4; }
.aai-blank-bg i, .aai-cht-bgs i, .aai-cht-pick i { display: inline-block; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(11, 35, 80, .18); }
.aai-blank-bg i.is-clear, .aai-cht-bgs i.is-clear { background: repeating-conic-gradient(#dfe6f3 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
.aai-blank-pick input, .aai-cht-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* Chart editor: background, outline, text, own text */
.aai-cht-bgs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.aai-cht-pick { position: relative; display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 6px; height: 32px; border-radius: 9px; background: #f1f5fd; color: #5d6273; font: 700 12.5px Roboto, sans-serif; cursor: pointer; }
.aai-cht-pick.is-on { background: #2f7bc4; color: #fff; }
.aai-cht-pick.is-sq { flex: none; width: 36px; padding: 0; }
.aai-cht-row { display: flex; align-items: center; gap: 6px; margin: 6px 0 10px; }
.aai-cht-row .aai-cht-seg { flex: 1; margin: 0; }
.aai-cht-range { display: flex; flex: 1; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 9px; background: #f1f5fd; font: 700 12px Roboto, sans-serif; color: #5d6273; }
.aai-cht-range input { flex: 1; accent-color: #2f7bc4; }
.aai-cht-range b { min-width: 38px; color: #2f7bc4; text-align: right; }
.aai-cht-mini-btn { height: 32px; padding: 0 10px; border: 0; border-radius: 9px; background: #f1f5fd; color: #2f7bc4; font: 700 12px Roboto, sans-serif; cursor: pointer; }
.aai-cht-notes { display: grid; gap: 6px; margin: 6px 0 12px; }
.aai-cht-notes small { color: #8a91a8; font-size: 11.5px; }
.aai-cht-note-r { display: flex; align-items: center; gap: 5px; }
.aai-cht-note-r input:not([type]) { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 0; border-radius: 9px; box-shadow: inset 0 0 0 1.5px #dfe6f3; font: 500 13px Roboto, sans-serif; color: #1d2240; outline: none; }
.aai-cht-note-r input:not([type]):focus { box-shadow: inset 0 0 0 2px #2f7bc4; }
.aai-cht-note-r button { width: 32px; height: 32px; flex: none; border: 0; border-radius: 9px; background: #f1f5fd; color: #5d6273; font: 700 14px Roboto, sans-serif; cursor: pointer; }
.aai-cht-note-r button.is-on { background: #2f7bc4; color: #fff; }
.aai-cht-prev text { cursor: default; }
.aai-tools.is-big .aai-tb.aai-tb-graphs { grid-column: 1 / -1; width: auto !important; margin: 10px 0 4px; color: #fff !important; background: linear-gradient(160deg, #2f7bc4 0%, #4a8fd2 55%, #e85d1a 140%) !important; }
.aai-tools.is-big .aai-tb.aai-tb-graphs:hover { background: linear-gradient(160deg, #2f7bc4 0%, #4a8fd2 45%, #e85d1a 115%) !important; box-shadow: 0 16px 26px -14px rgba(232, 93, 26, .9), inset 0 0 0 1px rgba(255, 255, 255, .3) !important; }
.aai-tools.is-big .aai-tb.aai-tb-graphs svg { display: none; }
.aai-side-graphs .aai-sg-ico { flex: none !important; width: 22px !important; }
.aai-side-graphs .aai-sg-ico i { flex: 1 1 0; width: auto; max-width: 6px; }
.aai-side-graphs > span:nth-child(2) { flex: 1 !important; }

/* Graphs button: calm — no sweeping light, no bouncing bars */
.aai-tools.is-big .aai-tb.aai-tb-graphs::before { display: none; }
.aai-tbg-ico i, .aai-sg-ico i { animation: none !important; }
.aai-tools.is-big .aai-tb.aai-tb-graphs { min-height: 62px; background: linear-gradient(160deg, #2f7bc4, #4a8fd2) !important; box-shadow: 0 10px 20px -14px rgba(47, 123, 196, .9) !important; }
.aai-tools.is-big .aai-tb.aai-tb-graphs:hover { background: linear-gradient(160deg, #2b74bd, #2a72dd) !important; box-shadow: 0 12px 22px -14px rgba(47, 123, 196, 1) !important; transform: translateY(-1px); }
.aai-tools.is-big .aai-tb.aai-tb-graphs.is-top { margin: 0 0 6px; }

/* Graph studio intro: every ready-made example, calmly one after another */
.aai-gs-art { display: grid !important; grid-template-columns: 1fr !important; gap: 8px; padding: 14px 14px 10px; }
.aai-gs-stage { position: relative; aspect-ratio: 640 / 400; }
.aai-gs-card { position: absolute; inset: 0; animation: aaiGsIn .6s ease both; }
.aai-gs-card.is-out { animation: aaiGsOut .45s ease forwards; }
.aai-gs-card svg { display: block; width: 100%; height: 100%; border-radius: 12px; box-shadow: 0 12px 28px -22px rgba(11, 35, 80, .5), 0 0 0 1px #e8eef8; }
@keyframes aaiGsIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes aaiGsOut { to { opacity: 0; } }
.aai-gs-name { color: #0f2a4a; font: 700 13px Roboto, sans-serif; text-align: center; }
.aai-gs-strip { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.aai-gs-strip button { flex: none; width: 58px; padding: 4px; border: 0; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #e3e9f3; cursor: pointer; opacity: .7; transition: opacity .2s, box-shadow .2s; }
.aai-gs-strip button svg { display: block; width: 100%; height: auto; }
.aai-gs-strip button:hover { opacity: 1; }
.aai-gs-strip button.is-on { opacity: 1; box-shadow: inset 0 0 0 2px #2f7bc4; }
@media (prefers-reduced-motion: reduce) { .aai-gs-card, .aai-gs-card.is-out { animation: none; } }

/* Graph editor: its own rail and header */
.aai-tools.is-graphrail .aai-tool-h { grid-column: 1 / -1; display: block; width: 100%; margin: 8px 0 2px; padding: 6px 4px 0; border-top: 1px solid rgba(47, 123, 196, .1); color: #8a91a8; font: 800 9.5px/1 Roboto, sans-serif; letter-spacing: .12em; text-transform: uppercase; text-align: left; }
.aai-tools.is-graphrail .aai-tb.is-chartdata { color: #2f7bc4; }
.aai-editor.is-graphdoc .aai-ed-orig, .aai-editor.is-graphdoc .aai-ed-top .aai-flow { display: none; }
.aai-ed-gen.is-graph { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .2); color: #fff; }
.aai-ed-gen.is-graph .aai-sg-ico { display: inline-flex; align-items: flex-end; gap: 2px; width: 12px; height: 11px; padding: 0; background: none; }
.aai-ed-gen.is-graph .aai-sg-ico i { display: block; flex: 1; border-radius: 1px; background: #fff; }
.aai-ed-gen.is-graph .aai-sg-ico i:nth-child(1) { height: 45%; } .aai-ed-gen.is-graph .aai-sg-ico i:nth-child(2) { height: 80%; } .aai-ed-gen.is-graph .aai-sg-ico i:nth-child(3) { height: 100%; background: #ffb066; }
.aai-side-graphs .aai-sg-n { padding: 2px 8px; border-radius: 99px; background: rgba(255, 255, 255, .2); font: 700 11px var(--a-body, sans-serif); font-style: normal; }
.aai-side-graphs.is-on .aai-sg-n { background: #e7eefb; color: #0a3f9a; }
.aai-gs-copy.is-swap { animation: aaiGsCopy .5s ease both; }
@keyframes aaiGsCopy { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.aai-graph-intro .aai-gs-copy { min-height: 300px; }
@media (prefers-reduced-motion: reduce) { .aai-gs-copy.is-swap { animation: none; } }
/* Transparent (PNG) background shown as a soft checkerboard */
.aai-gs-stage { border-radius: 12px; background: repeating-conic-gradient(#f1f4f9 0 25%, #fff 0 50%) 0 0 / 16px 16px; box-shadow: inset 0 0 0 1px #e3e9f3; }
.aai-gs-card svg { box-shadow: none !important; }
.aai-cht-prev svg { background: repeating-conic-gradient(#f1f4f9 0 25%, #fff 0 50%) 0 0 / 16px 16px; border-radius: 12px; }
/* Transparent graphs show what is behind them: on the site that is plain white, no checkerboard */
.aai-gs-stage { background: #fff !important; box-shadow: inset 0 0 0 1px #e8eef8 !important; }
.aai-cht-prev svg { background: #fff !important; }
/* Sidebar: switching folders never leaves a blank row (the highlight can't fade, so the text colour must not either) */
.aai-side-nav button, .aai-side-nav button *, .aai-folder-row > button { transition-property: transform, opacity, box-shadow !important; transition-duration: .18s !important; }
/* Selected folder switches in one frame: no fading shadow or colour left behind on the folder you leave */
.aai-side-nav button, .aai-side-nav button *, .aai-folder-row > button { transition: none !important; }
/* Graph studio icon on the light sidebar */
.aai-side-graphs:not(.is-on) .aai-sg-ico { background: #eef4ff !important; }
.aai-side-graphs:not(.is-on) .aai-sg-ico i { background: #2f7bc4 !important; }
.aai-side-graphs:not(.is-on) .aai-sg-ico i:nth-child(3) { background: #e85d1a !important; }
.aai-side-graphs.is-on .aai-sg-ico { background: rgba(255, 255, 255, .2) !important; }
.aai-side-graphs.is-on .aai-sg-ico i { background: #fff !important; }
.aai-side-graphs.is-on .aai-sg-ico i:nth-child(3) { background: #ffb066 !important; }

/* Drag to the bin: delete with a little magic */
.aai-bin { position: absolute; left: 50%; bottom: 22px; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 10px 20px 10px 10px; border-radius: 99px; background: rgba(255, 255, 255, .96); box-shadow: 0 18px 40px -16px rgba(11, 35, 80, .45), inset 0 0 0 1.5px #e3e9f3; color: #3c4a66; font: 700 13px Roboto, sans-serif; transform: translate(-50%, 30px) scale(.92); opacity: 0; transition: transform .25s cubic-bezier(.2, .9, .25, 1.2), opacity .2s, background .2s, box-shadow .2s; pointer-events: none; }
.aai-bin.is-in { transform: translate(-50%, 0) scale(1); opacity: 1; }
.aai-bin-ico { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff1f0; color: #d93025; transition: transform .2s, background .2s; }
.aai-bin-ico svg { width: 21px; height: 21px; }
.aai-bin.is-over { background: #fff; box-shadow: 0 20px 44px -14px rgba(217, 48, 37, .5), inset 0 0 0 2px #e85d1a; color: #d93025; }
.aai-bin.is-over .aai-bin-ico { transform: scale(1.18) rotate(-8deg); background: #d93025; color: #fff; }
.aai-svg.is-binning .aai-sel, .is-binning [data-sel] { opacity: .5; }
.aai-bin.is-poof { opacity: 1; transform: translate(-50%, 0) scale(1); }
.aai-bin.is-poof .aai-bin-ico { animation: aaiBinGulp .55s cubic-bezier(.3, 1.6, .5, 1) both; }
.aai-bin.is-poof b { opacity: 0; transition: opacity .2s; }
.aai-bin.is-poof { animation: aaiBinOut .3s ease .55s forwards; }
.aai-bin-spark { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; animation: aaiBinSpark .65s ease-out both; }
@keyframes aaiBinGulp { 0% { transform: scale(1.18); } 35% { transform: scale(.82) rotate(6deg); } 70% { transform: scale(1.12) rotate(-4deg); } 100% { transform: scale(1); } }
@keyframes aaiBinSpark { 0% { transform: translate(0, 0) scale(1.2); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
@keyframes aaiBinOut { to { opacity: 0; transform: translate(-50%, 20px) scale(.9); } }

/* Handwriting */
.aai-ink-draft { fill: none; stroke-linecap: round; stroke-linejoin: round; }
[data-tool="ink"] .aai-viewport svg { cursor: crosshair; }

/* Export background: an unmistakable choice */
.studio-page .aai .aai-x-bgs button.is-on, .aai-x-bgs button.is-on { position: relative; background: #eef4ff !important; color: #2f7bc4 !important; box-shadow: inset 0 0 0 2px #2f7bc4, 0 8px 18px -12px rgba(47, 123, 196, .8) !important; }
.aai-x-bgs button.is-on::after { content: "✓"; position: absolute; top: -7px; right: -7px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #2f7bc4; color: #fff; font: 800 11px/1 Roboto, sans-serif; box-shadow: 0 0 0 2px #fff; }
.aai-x-bgs button.is-pop { animation: aaiBgPop .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes aaiBgPop { 0% { transform: scale(.94); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* Logo studio */
.aai-lg-ico { position: relative; display: inline-block; flex: none; width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, #2f7bc4, #4a8fd2 55%, #f0701f); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.aai-lg-ico::before { content: ""; position: absolute; left: 5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.aai-lg-ico::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 7px; height: 7px; border-radius: 2px; background: #ffd2a8; }
.aai-side-graphs.is-logo { margin-top: 6px; }
.aai-ed-gen.is-graph .aai-lg-ico { width: 13px; height: 13px; border-radius: 4px; }
.aai-ed-gen.is-graph .aai-lg-ico::before { left: 3px; top: 3px; width: 5px; height: 5px; }
.aai-ed-gen.is-graph .aai-lg-ico::after { right: 2px; bottom: 2px; width: 4px; height: 4px; }
.aai-gs-dot.is-logo { background: linear-gradient(135deg, #4a8fd2, #f0701f); border-radius: 50%; }
.aai-gs-stage.is-logo { aspect-ratio: 16 / 10; display: grid; place-items: center; }
.aai-gs-stage.is-logo .aai-gs-card { display: grid; place-items: center; }
.aai-gs-stage.is-logo .aai-gs-card svg { width: auto; height: 92%; }
.aai-logo-intro .aai-gs-strip button { width: 64px; }
.aai-tools.is-logorail .aai-tb-graphs { margin-top: 10px; }
.aai-bin { bottom: 64px; }
/* The bin follows the drag sideways */
.aai-bin { bottom: 64px; transition: transform .25s cubic-bezier(.2, .9, .25, 1.2), opacity .2s, background .2s, box-shadow .2s, left .12s ease-out; }
/* While an item is dragged, the selection bar steps aside so it never covers the bin */
.aai-editor.is-dragging .aai-objbar { visibility: hidden; pointer-events: none; }

/* Logo kit */
.aai-tools.is-big .aai-tb.aai-tb-logokit { background: linear-gradient(150deg, #e85d1a, #f0701f) !important; box-shadow: 0 10px 20px -14px rgba(232, 93, 26, .95) !important; }
.aai-tools.is-big .aai-tb.aai-tb-logokit .aai-lg-ico { background: rgba(255, 255, 255, .25); }
.aai-logokit { width: 380px; height: min(640px, calc(100% - 16px)); }
.aai-lk-body { flex: 1; overflow-y: auto; padding: 6px 16px 16px; scrollbar-width: thin; }
.aai-lk-designs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.aai-lk-designs button { aspect-ratio: 1; padding: 6px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #e3e9f3; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.aai-lk-designs button:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px #2f7bc4; }
.aai-lk-designs svg { width: 100%; height: 100%; display: block; }
.aai-lk-pals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.aai-lk-pals > button, .aai-lk-fonts button, .aai-lk-lay button { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 10px; border: 0; border-radius: 10px; background: #f4f7fd; color: #23365e; font: 700 12.5px Roboto, sans-serif; text-align: left; cursor: pointer; transition: box-shadow .15s, background .15s; }
.aai-lk-pals > button span { display: flex; } .aai-lk-pals > button i { width: 14px; height: 22px; } .aai-lk-pals > button i:first-child { border-radius: 5px 0 0 5px; } .aai-lk-pals > button i:last-child { border-radius: 0 5px 5px 0; }
.aai-lk-pals > button:hover, .aai-lk-fonts button:hover, .aai-lk-lay button:hover { background: #eaf1ff; }
.aai-lk-designs button.is-on, .aai-lk-pals > button.is-on, .aai-lk-fonts button.is-on, .aai-lk-lay button.is-on { box-shadow: inset 0 0 0 2px #2f7bc4; background: #eef4ff; }
.is-pop { animation: aaiBgPop .4s cubic-bezier(.3, 1.6, .5, 1); }
.aai-lk-own { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: #f4f7fd; font: 700 12px Roboto, sans-serif; color: #5d6273; }
.aai-lk-own span { flex: 1; }
.aai-lk-own input { width: 28px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.aai-lk-own button, .aai-lk-row button { height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: #2f7bc4; color: #fff; font: 700 12.5px Roboto, sans-serif; cursor: pointer; }
.aai-lk-fonts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.aai-lk-fonts button { flex-direction: column; align-items: flex-start; gap: 2px; }
.aai-lk-fonts b { font-size: 16px; color: #0f2a4a; } .aai-lk-fonts small { font-size: 11px; font-weight: 500; color: #6b7a93; }
.aai-lk-lay { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.aai-lk-lay i { position: relative; flex: none; width: 30px; height: 22px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1px #d6deec; }
.aai-lk-lay s, .aai-lk-lay u { position: absolute; display: block; }
.aai-lk-lay s { width: 8px; height: 8px; border-radius: 50%; background: #2f7bc4; } .aai-lk-lay u { height: 3px; border-radius: 2px; background: #e85d1a; }
.aai-lk-l-stack s { left: 11px; top: 3px; } .aai-lk-l-stack u { left: 7px; right: 7px; top: 14px; }
.aai-lk-l-side s { left: 4px; top: 7px; } .aai-lk-l-side u { left: 15px; right: 4px; top: 10px; }
.aai-lk-l-name s { display: none; } .aai-lk-l-name u { left: 6px; right: 6px; top: 10px; }
.aai-lk-l-mark s { left: 11px; top: 7px; } .aai-lk-l-mark u { display: none; }
.aai-lk-row { display: flex; gap: 6px; }
.aai-lk-row input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 0; border-radius: 9px; box-shadow: inset 0 0 0 1.5px #dfe6f3; font: 600 13px Roboto, sans-serif; color: #1d2240; outline: none; }
.aai-lk-row input:focus { box-shadow: inset 0 0 0 2px #2f7bc4; }
.aai-lk-tip { margin: 14px 0 0; color: #7a879c; font-size: 11.5px; line-height: 1.5; }
.aai-side-graphs .aai-lg-ico { flex: none !important; width: 22px !important; height: 22px !important; padding: 0 !important; }
.aai-logo-intro .aai-gs-copy { min-height: 0; }
.aai-logo-intro .aai-gi-steps { margin-top: 14px; }
.aai-gal.aai-logokit { width: 360px !important; max-width: calc(100% - 120px); }
.aai-logo-intro .aai-gi-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.aai-btn.aai-lg-own { background: #fff; color: #2f7bc4; box-shadow: inset 0 0 0 2px #2f7bc4; }
.aai-btn.aai-lg-own:hover { background: #eef4ff; }
.aai-btn.aai-lg-own svg { width: 18px; height: 18px; }
.aai-btn.aai-lg-own[hidden] { display: none; }

/* Tool rail fits the screen: wider (3–4 columns) instead of hiding tools below; its edge can be dragged */
.aai-ed-body { position: relative; }
.aai-tools.is-big.is-graphrail { padding-bottom: 14px !important; }
@media (min-width: 901px) {
	.aai-editor[data-railcols="3"] .aai-ed-body[class] { grid-template-columns: 220px minmax(0, 1fr); }
	.aai-editor[data-railcols="3"] .aai-tools.is-big { grid-template-columns: repeat(3, 64px); }
	.aai-editor[data-railcols="4"] .aai-ed-body[class] { grid-template-columns: 290px minmax(0, 1fr); }
	.aai-editor[data-railcols="4"] .aai-tools.is-big { grid-template-columns: repeat(4, 64px); }
	.aai-rail-grip { position: absolute; top: 0; bottom: 0; z-index: 6; width: 7px; cursor: ew-resize; }
	.aai-rail-grip::after { content: ""; position: absolute; left: 2px; top: 50%; width: 3px; height: 44px; margin-top: -22px; border-radius: 3px; background: rgba(47, 123, 196, .18); transition: background .15s, height .15s; }
	.aai-rail-grip:hover::after, .aai-rail-grip.is-drag::after { background: #2f7bc4; height: 64px; margin-top: -32px; }
}
@media (max-width: 900px) { .aai-rail-grip { display: none; } }

/* Hero buttons: a soft light passes over, and the label glides in when it changes */
.aai-gs-go { position: relative; overflow: hidden; }
.aai-gs-go::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg); animation: aaiGoShine 3.6s ease-in-out infinite; pointer-events: none; }
@keyframes aaiGoShine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
.aai-gs-go [data-gslabel] { display: inline-block; }
.aai-gs-go [data-gslabel].is-swap { animation: aaiLabelIn .45s cubic-bezier(.2, .9, .25, 1.1) both; }
@keyframes aaiLabelIn { from { opacity: 0; transform: translateY(8px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
.aai-gs-go svg { transition: transform .3s; } .aai-gs-go:hover svg { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .aai-gs-go::after, .aai-gs-go [data-gslabel].is-swap { animation: none; } }
@media (min-width: 901px) {
	.aai-editor[data-railcols="3"] .aai-tools.is-big .aai-tb.is-upload, .aai-editor[data-railcols="4"] .aai-tools.is-big .aai-tb.is-upload,
	.aai-editor[data-railcols="3"] .aai-tools.is-big .aai-tb.is-icons, .aai-editor[data-railcols="4"] .aai-tools.is-big .aai-tb.is-icons,
	.aai-editor[data-railcols="3"] .aai-tools.is-big .aai-tb-logokit, .aai-editor[data-railcols="4"] .aai-tools.is-big .aai-tb-logokit,
	.aai-editor[data-railcols="4"] .aai-tools.is-big .aai-tb-graphs { grid-column: span 2 !important; min-height: 42px !important; flex-direction: row !important; gap: 6px !important; margin: 0 0 2px !important; padding: 4px 6px !important; font-size: 11.5px; }
	.aai-editor[data-railcols="3"] .aai-tools.is-big .aai-tb-graphs { grid-column: 1 / -1 !important; min-height: 44px !important; flex-direction: row !important; gap: 8px !important; }
	.aai-editor[data-railcols="3"] .aai-tools.is-big .aai-tb, .aai-editor[data-railcols="4"] .aai-tools.is-big .aai-tb { min-height: 48px; }
	.aai-editor[data-railcols="3"] .aai-tools.is-big .aai-tool-h, .aai-editor[data-railcols="4"] .aai-tools.is-big .aai-tool-h { margin-top: 4px; }
	.aai-editor[data-railcols] .aai-tools.is-big .aai-tb-graphs .aai-tbg-ico { height: 16px; }
}

/* ================= iPad / tablet ================= */
@media (min-width: 701px) and (max-width: 1100px) {
	.aai-dash { grid-template-columns: 236px minmax(0, 1fr) !important; }
	.aai-dash-side { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; gap: 4px; padding: 18px 12px !important; }
	.aai-dash-side .aai-create { width: 100%; }
	.aai-side-nav { display: flex !important; flex-direction: column; flex-wrap: nowrap !important; }
	.aai-side-nav button, .aai-side-nav .aai-folder-row { width: 100% !important; }
	.aai-side-add { margin-top: 8px; }
}
@media (max-width: 700px) { .aai-dash { grid-template-columns: 1fr !important; } }
/* Touch screens: no hover-only extras, bigger targets, no double-tap zoom on controls */
.aai, .aai button, .aai [role="button"] { touch-action: manipulation; }
@media (hover: none) {
	.aai-demo.is-side, .aai-tb-demo, .aai-gal-tip { display: none !important; }
	.aai-rail-grip { width: 16px; }
	.aai-rail-grip::after { background: rgba(47, 123, 196, .3); }
	.aai-tools.is-big .aai-tb { min-height: 52px; }
}

/* iPad / tablet editor: full-height canvas and the same two-column tool rail as on a laptop (wider when tools would be hidden) */
@media (min-width: 701px) and (max-width: 1100px) {
	.aai-editor { height: min(88vh, 940px) !important; min-height: 560px !important; }
	.aai-ed-body, .aai-ed-body[class] { grid-template-columns: 148px minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; }
	.aai-stagewrap { height: auto !important; }
	.aai-editor .aai-side { top: 66px !important; }
	.aai-tools.is-big { display: grid !important; grid-template-columns: repeat(2, 64px); grid-auto-rows: min-content; align-content: start; justify-content: center; gap: 2px 4px; padding: 8px 6px 14px !important; overflow-y: auto; flex-direction: column; }
	.aai-tools.is-big .aai-tb { width: 64px; min-height: 52px; padding: 5px 2px 4px; gap: 3px; font-size: 11.5px; }
	.aai-tools.is-big .aai-tb svg { width: 21px; height: 21px; }
	.aai-tools.is-big .aai-tb.is-upload, .aai-tools.is-big .aai-tb.is-icons, .aai-tools.is-big .aai-tb-graphs, .aai-tools.is-big .aai-tb-logokit { grid-column: 1 / -1; width: auto; }
	.aai-tools.is-big .aai-tool-sep, .aai-tools.is-big .aai-tool-h { grid-column: 1 / -1; width: 100%; }
	.aai-ed-gen, .aai-ed-status { display: inline-flex; }
	.aai-editor[data-railcols="3"] .aai-ed-body[class] { grid-template-columns: 220px minmax(0, 1fr) !important; }
	.aai-editor[data-railcols="3"] .aai-tools.is-big { grid-template-columns: repeat(3, 64px); }
	.aai-editor[data-railcols="4"] .aai-ed-body[class] { grid-template-columns: 290px minmax(0, 1fr) !important; }
	.aai-editor[data-railcols="4"] .aai-tools.is-big { grid-template-columns: repeat(4, 64px); }
	.aai-editor[data-railcols="3"] .aai-tools.is-big .aai-tb.is-upload, .aai-editor[data-railcols="4"] .aai-tools.is-big .aai-tb.is-upload,
	.aai-editor[data-railcols="3"] .aai-tools.is-big .aai-tb.is-icons, .aai-editor[data-railcols="4"] .aai-tools.is-big .aai-tb.is-icons,
	.aai-editor[data-railcols="3"] .aai-tools.is-big .aai-tb-logokit, .aai-editor[data-railcols="4"] .aai-tools.is-big .aai-tb-logokit,
	.aai-editor[data-railcols="4"] .aai-tools.is-big .aai-tb-graphs { grid-column: span 2 !important; min-height: 42px !important; flex-direction: row !important; gap: 6px !important; }
	.aai-rail-grip { display: block; position: absolute; top: 0; bottom: 0; z-index: 6; width: 16px; cursor: ew-resize; }
	.aai-rail-grip::after { content: ""; position: absolute; left: 6px; top: 50%; width: 4px; height: 52px; margin-top: -26px; border-radius: 3px; background: rgba(47, 123, 196, .28); }
	.aai-gal.aai-logokit, .aai-gal.aai-graphs { max-width: calc(100% - 170px); }
	.aai-chartdlg .aai-modal-card { width: calc(100vw - 32px) !important; }
}
.aai-lk-sizes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.aai-lk-sizes button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 10px; background: #f4f7fd; color: #23365e; text-align: left; cursor: pointer; transition: box-shadow .15s, background .15s; }
.aai-lk-sizes button:hover { background: #eaf1ff; }
.aai-lk-sizes button.is-on { box-shadow: inset 0 0 0 2px #2f7bc4; background: #eef4ff; }
.aai-lk-sizes i { flex: none; display: block; width: 26px; height: 26px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 2px #2f7bc4; }
.aai-lk-sizes i.is-fit { box-shadow: inset 0 0 0 2px #e85d1a; border-radius: 6px; }
.aai-lk-sizes i.is-custom { box-shadow: inset 0 0 0 2px #9cb3db; background: repeating-linear-gradient(45deg, #fff 0 4px, #eef4ff 4px 8px); }
.aai-lk-sizes span { display: grid; } .aai-lk-sizes b { font: 700 12.5px Roboto, sans-serif; } .aai-lk-sizes small { font: 500 11px Roboto, sans-serif; color: #6b7a93; }

/* Selection bar: order, lock, copy, delete, pick a part */
.aai-objbar { position: absolute; z-index: 25; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .97); box-shadow: 0 14px 30px -14px rgba(11, 35, 80, .5), 0 0 0 1px rgba(47, 123, 196, .12); animation: aaiObIn .18s ease both; white-space: nowrap; }
@keyframes aaiObIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.aai-objbar button { display: inline-flex; align-items: center; gap: 6px; height: 34px; min-width: 34px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; color: #23365e; font: 700 12px Roboto, sans-serif; cursor: pointer; justify-content: center; }
.aai-objbar button:hover { background: #eef4ff; color: #2f7bc4; }
.aai-objbar button.is-del:hover { background: #fff1f0; color: #d93025; }
.aai-objbar button.has-l { background: #eef4ff; color: #2f7bc4; }
.aai-objbar [data-ob="unlock"] { background: #fff3e6 !important; color: #c2410c !important; }
.aai-objbar i { width: 1px; height: 22px; margin: 0 3px; background: #e3e9f3; }
@media (hover: none) { .aai-objbar button { height: 40px; min-width: 40px; } }
.aai-ob-grip { display: inline-grid; place-items: center; width: 22px; height: 34px; margin-right: 2px; border-radius: 8px; color: #9aa6c0; cursor: grab; touch-action: none; }
.aai-ob-grip:hover { background: #eef4ff; color: #2f7bc4; }
.aai-objbar.is-moving { box-shadow: 0 22px 40px -14px rgba(11, 35, 80, .55), 0 0 0 1.5px #4a8fd2; }
.aai-objbar.is-moving .aai-ob-grip { cursor: grabbing; color: #2f7bc4; }
@media (hover: none) { .aai-ob-grip { width: 28px; height: 40px; } }
.aai-ob-order { display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; background: #f4f7fd; }
.aai-ob-order button { gap: 5px !important; padding: 0 9px !important; }
.aai-ob-order b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #2f7bc4; color: #fff; font: 800 10.5px/1 Roboto, sans-serif; }
.aai-ob-order button:hover b { background: #e85d1a; }

/* ===== Rail feature buttons: light, equal size, with a moving coloured outline (orange: Logo kit, Upload, Search icons · blue: Graphs) ===== */
.aai-editor .aai-ed-body .aai-tools.is-big .aai-tb.is-upload, .aai-editor .aai-ed-body .aai-tools.is-big .aai-tb.is-icons, .aai-editor .aai-ed-body .aai-tools.is-big .aai-tb.aai-tb-logokit {
	position: relative; overflow: hidden; border: 2px solid transparent !important; border-radius: 14px !important;
	background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #e85d1a, #ffd2a8, #f0701f, #ffe3c7, #e85d1a) border-box !important;
	background-size: 100% 100%, 300% 100% !important; animation: aaiRailLine 5s linear infinite !important;
	color: #b4470f !important; box-shadow: 0 6px 16px -12px rgba(232, 93, 26, .7) !important;
	grid-column: 1 / -1 !important; width: auto !important; min-height: 46px !important; flex-direction: row !important; gap: 8px !important; margin: 0 0 4px !important; padding: 4px 10px !important; font-weight: 700;
}
.aai-editor .aai-ed-body .aai-tools.is-big .aai-tb.is-upload::before, .aai-editor .aai-ed-body .aai-tools.is-big .aai-tb.is-upload::after, .aai-editor .aai-ed-body .aai-tools.is-big .aai-tb.aai-tb-logokit::before { display: none !important; }
.aai-editor .aai-ed-body .aai-tools.is-big .aai-tb.is-upload:hover, .aai-editor .aai-ed-body .aai-tools.is-big .aai-tb.is-icons:hover, .aai-editor .aai-ed-body .aai-tools.is-big .aai-tb.aai-tb-logokit:hover {
	background: linear-gradient(#fff7ef, #fff7ef) padding-box, linear-gradient(90deg, #e85d1a, #ffd2a8, #f0701f, #ffe3c7, #e85d1a) border-box !important; background-size: 100% 100%, 300% 100% !important; color: #c2410c !important; transform: translateY(-1px);
}
.aai-editor .aai-ed-body .aai-tools.is-big .aai-tb.is-upload svg, .aai-editor .aai-ed-body .aai-tools.is-big .aai-tb.is-icons svg { color: #e85d1a; }
.aai-editor .aai-ed-body .aai-tools.is-big .aai-tb.aai-tb-logokit .aai-lg-ico { background: linear-gradient(135deg, #2f7bc4, #4a8fd2 55%, #f0701f) !important; }
/* Graphs: white with a moving blue line */
.aai-editor .aai-ed-body .aai-tools.is-big .aai-tb.aai-tb-graphs:not(.aai-tb-logokit) {
	border: 2px solid transparent !important; border-radius: 14px !important;
	background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #2f7bc4, #9ec5ff, #4a8fd2, #d6e6ff, #2f7bc4) border-box !important;
	background-size: 100% 100%, 300% 100% !important; animation: aaiRailLine 5s linear infinite !important;
	color: #2b74bd !important; box-shadow: 0 6px 16px -12px rgba(47, 123, 196, .7) !important; min-height: 46px !important; flex-direction: row !important; gap: 8px !important; padding: 4px 10px !important;
}
.aai-editor .aai-ed-body .aai-tools.is-big .aai-tb.aai-tb-graphs:not(.aai-tb-logokit):hover { background: linear-gradient(#f2f7ff, #f2f7ff) padding-box, linear-gradient(90deg, #2f7bc4, #9ec5ff, #4a8fd2, #d6e6ff, #2f7bc4) border-box !important; background-size: 100% 100%, 300% 100% !important; transform: translateY(-1px); }
.aai-editor .aai-ed-body .aai-tools.is-big .aai-tb.aai-tb-graphs:not(.aai-tb-logokit) .aai-tbg-ico { height: 16px; }
.aai-editor .aai-ed-body .aai-tools.is-big .aai-tb.aai-tb-graphs:not(.aai-tb-logokit) .aai-tbg-ico i { background: #2f7bc4 !important; }
.aai-editor .aai-ed-body .aai-tools.is-big .aai-tb.aai-tb-graphs:not(.aai-tb-logokit) .aai-tbg-ico i:nth-child(3) { background: #9ec5ff !important; }
.aai-editor .aai-ed-body .aai-tools.is-big .aai-tb.aai-tb-graphs:not(.aai-tb-logokit) .aai-tbg-ico i:nth-child(4) { background: #f0701f !important; }
@keyframes aaiRailLine { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 300% 0; } }
/* Wider rail: the three sit side by side, same size */
.aai-editor[data-railcols="3"] .aai-ed-body .aai-tools.is-big .aai-tb.is-upload, .aai-editor[data-railcols="3"] .aai-ed-body .aai-tools.is-big .aai-tb.is-icons, .aai-editor[data-railcols="3"] .aai-ed-body .aai-tools.is-big .aai-tb.aai-tb-logokit,
.aai-editor[data-railcols="4"] .aai-ed-body .aai-tools.is-big .aai-tb.is-upload, .aai-editor[data-railcols="4"] .aai-ed-body .aai-tools.is-big .aai-tb.is-icons, .aai-editor[data-railcols="4"] .aai-ed-body .aai-tools.is-big .aai-tb.aai-tb-logokit {
	grid-column: span 1 !important; flex-direction: column !important; gap: 3px !important; min-height: 58px !important; padding: 4px 2px !important; font-size: 11px; line-height: 1.1; text-align: center;
}
.aai-editor[data-railcols="4"] .aai-ed-body .aai-tools.is-big .aai-tb.aai-tb-graphs { grid-column: 1 / -1 !important; }
@media (prefers-reduced-motion: reduce) { .aai-editor .aai-ed-body .aai-tools.is-big .aai-tb { animation: none !important; } }
.aai-editor[data-railcols] .aai-ed-body .aai-tools.is-big .aai-tb.is-icons span, .aai-editor[data-railcols] .aai-ed-body .aai-tools.is-big .aai-tb.is-upload span, .aai-editor[data-railcols] .aai-ed-body .aai-tools.is-big .aai-tb.aai-tb-logokit > span:last-child { white-space: normal !important; font-size: 10.5px; line-height: 1.1; }
.aai-editor[data-railcols="4"] .aai-ed-body .aai-tools.is-big .aai-tb.aai-tb-graphs:not(.aai-tb-logokit) { grid-column: 1 / -1 !important; }
/* Chinese version: balanced headings, strict line breaking (no punctuation at line starts) */
html.is-zh .aai h1, html.is-zh .aai h2, html.is-zh .aai h3 { text-wrap: balance; line-break: strict; }
html.is-zh .aai p { text-wrap: pretty; line-break: strict; }
html.is-zh .aai .aai-tb span { white-space: nowrap; }

/* Table size picker: finger, Apple Pencil and mouse (pointer events); bigger cells on touch screens */
.aai-tpick-grid { touch-action: none; -webkit-user-select: none; user-select: none; }
@media (hover: none), (pointer: coarse) {
	.aai-tpick-grid { grid-template-columns: repeat(10, 26px); gap: 4px; }
	.aai-tpick-grid i { width: 26px; height: 22px; border-radius: 4px; }
	.aai-tpick p { font-size: 15px; }
}

/* Opening screen: its own look for graphs (blue), logos (orange) and illustrations (blue to violet) */
.aai-op-kind { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 7px 11px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .9); box-shadow: 0 10px 24px -16px rgba(11, 35, 80, .55), inset 0 0 0 1px #dfe8f8; color: var(--a-ink, #0f2a4a); font: 800 12.5px/1 var(--a-body, Roboto, sans-serif); letter-spacing: .04em; text-transform: uppercase; opacity: 0; animation: opIn .5s var(--a-ease, ease) .05s forwards; --k: #7c3aed; --k2: #4a8fd2; }
.aai-op-kind i { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--k2), var(--k)); box-shadow: 0 0 0 0 color-mix(in srgb, var(--k) 45%, transparent); animation: opKindPulse 1.8s ease-in-out infinite; }
.aai-op-kind::after { content: ""; position: absolute; left: 0; bottom: 0; width: 45%; height: 2px; background: linear-gradient(90deg, transparent, var(--k), transparent); animation: opKindLine 2.2s linear infinite; }
.aai-opening.is-graph .aai-op-kind { --k: #4a8fd2; --k2: #2f7bc4; }
.aai-opening.is-graph .aai-op-kind i { border-radius: 3px; }
.aai-opening.is-logo .aai-op-kind { --k: #f0701f; --k2: #e85d1a; }
@keyframes opKindLine { from { transform: translateX(-100%); } to { transform: translateX(230%); } }
@keyframes opKindPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--k) 45%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
.aai-opening.is-graph .aai-op-halo { background: conic-gradient(from 0deg, rgba(47, 123, 196, 0), rgba(47, 123, 196, .28), rgba(47, 122, 229, .22), rgba(18, 181, 255, .22), rgba(47, 123, 196, 0)); }
.aai-opening.is-logo .aai-op-halo { background: conic-gradient(from 0deg, rgba(232, 93, 26, 0), rgba(232, 93, 26, .26), rgba(240, 112, 31, .24), rgba(255, 183, 3, .2), rgba(232, 93, 26, 0)); }
.aai-opening.is-graph .aai-op-bar b { background: linear-gradient(90deg, #4a8fd2, #2f7bc4); }
.aai-opening.is-graph .aai-ft .ft-chips span { animation-name: ftChipG; }
.aai-opening.is-logo .aai-ft .ft-chips span { animation-name: ftChipL; }
@keyframes ftChipG { from { background: #eef2fa; color: #7a879c; } to { background: linear-gradient(120deg, #235f9c, #4a8fd2); color: #fff; box-shadow: 0 6px 14px -8px rgba(10, 61, 158, .9); } }
@keyframes ftChipL { from { background: #eef2fa; color: #7a879c; } to { background: linear-gradient(120deg, #e85d1a, #f0701f); color: #fff; box-shadow: 0 6px 14px -8px rgba(232, 93, 26, .9); } }
.aai-ft .ft-grow { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); animation: ftGrow .55s cubic-bezier(.34, 1.3, .64, 1) both; }
@keyframes ftGrow { to { transform: scaleY(1); } }
.aai-ft .ft-typeL { animation: ftTypeL .7s steps(14) both; }
@keyframes ftTypeL { from { width: 0; } to { width: 126px; } }
@media (prefers-reduced-motion: reduce) { .aai-op-kind { opacity: 1; animation: none; } .aai-op-kind::after, .aai-op-kind i { animation: none; } .aai-ft .ft-grow { transform: none; } }

/* Enhance text options (Adjust bar): Sharper, Bolder, Outline colour and thickness, hold to Compare */
.aai-enh-opts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.aai-enh-opts[hidden] { display: none; }
.aai-enh-l { margin-left: 6px; color: #5d6b8a; font: 700 11.5px var(--a-body, Roboto, sans-serif); letter-spacing: .02em; }
.aai-enh-o { height: 32px; padding: 0 12px; border: 1px solid #dbe3f2; border-radius: 99px; background: #fff; color: #23365e; font: 700 12.5px var(--a-body, Roboto, sans-serif); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.aai-enh-o:hover { border-color: #9fbaf0; }
.aai-enh-o.is-on { background: linear-gradient(115deg, #235f9c, #4a8fd2); border-color: transparent; color: #fff; }
.aai-enh-sw { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid #dbe3f2; border-radius: 50%; background: #fff; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.aai-enh-sw i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(11, 35, 80, .25); }
.aai-enh-sw.is-on { border-color: #e85d1a; box-shadow: 0 0 0 2px rgba(232, 93, 26, .35); }
.aai-enh-cmp { height: 32px; margin-left: 4px; padding: 0 14px; border: 1px dashed #e85d1a; border-radius: 99px; background: #fff7ee; color: #b94a00; font: 800 12.5px var(--a-body, Roboto, sans-serif); cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; }
.aai-enh-cmp.is-on { background: #e85d1a; border-style: solid; color: #fff; }
@media (hover: none) { .aai-enh-o, .aai-enh-cmp { height: 38px; } .aai-enh-sw { width: 36px; height: 36px; } }

/* Grid lines button (editor top bar): lit while the grid shows */
.aai-grid-btn.is-on { background: rgba(255, 255, 255, .28) !important; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85); color: #fff; }

/* Magic eraser: the selection being drawn, then a glow and a burst of sparkles as it vanishes */
.aai-lasso { fill: rgba(232, 93, 26, .12); stroke: #e85d1a; }
[data-ptool="eraser"] .aai-viewport svg, [data-ptool="eraser"] .aai-viewport svg * { cursor: crosshair !important; }
.aai-poof { position: absolute; z-index: 40; pointer-events: none; }
.aai-poof svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.aai-poof path { fill: rgba(255, 255, 255, .85); stroke: #f0701f; stroke-width: 2; filter: drop-shadow(0 0 10px rgba(240, 112, 31, .8)) drop-shadow(0 0 18px rgba(47, 122, 229, .55)); animation: aaiPoofGlow 1s ease-out forwards; }
.aai-poof i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; box-shadow: 0 0 10px currentColor; animation: aaiPoofSpark 1s cubic-bezier(.2, .8, .3, 1) forwards; opacity: 0; }
.aai-poof i:nth-child(3n) { border-radius: 2px; transform: rotate(45deg); }
@keyframes aaiPoofGlow { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(1.04); } }
@keyframes aaiPoofSpark { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .aai-poof { display: none; } }
/* Description box: grows with the text (fitDesc sets its height and, for long texts, a slightly smaller size). */
.aai-compose textarea#aai-desc { resize: none; transition: none; }
.aai-brief-row.is-single { grid-template-columns: 1fr; }
/* My icons: make an icon in aFig format, share it with the aFig Icon library */
.aai-gal-it.is-mine .aai-mine-st { position: absolute; left: 6px; top: 6px; padding: 1px 7px; border-radius: 99px; font: 600 10px var(--a-body, Roboto, sans-serif); font-style: normal; background: #fff4c8; color: #7a5a00; }
.aai-gal-it.is-mine .aai-mine-st.is-approved { background: #e3f6ea; color: #1d6a45; }
.aai-gal-it.is-mine .aai-mine-st.is-declined { background: #fde4e4; color: #9e2a36; }
.aai-mine-dlg { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: rgba(11, 35, 80, .28); border-radius: inherit; animation: aaiFade .2s ease both; }
.aai-mine-card { display: grid; gap: 10px; width: min(460px, 100%); max-height: 100%; overflow: auto; padding: 18px; border-radius: 18px; background: #fff; box-shadow: 0 24px 60px -24px rgba(11, 35, 80, .55); }
.aai-mine-card > b { font: 700 16px var(--a-head, Roboto, sans-serif); color: #0f2a4a; }
.aai-mine-card p { margin: 0; font-size: 13px; color: #5b6b88; }
.aai-mine-card label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: #0f2a4a; }
.aai-mine-card input, .aai-mine-card select { padding: 8px 10px; border: 1px solid #d5deee; border-radius: 10px; font: inherit; font-weight: 400; }
.aai-mine-pv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aai-mine-pv.is-one { grid-template-columns: 1fr; }
.aai-mine-pv figure { position: relative; display: grid; place-items: center; gap: 4px; margin: 0; padding: 10px; min-height: 150px; border: 1px solid #e1e6f0; border-radius: 12px; background: #fff; }
.aai-mine-pv img { max-width: 100%; max-height: 130px; object-fit: contain; }
.aai-mine-pv figcaption { font-size: 11.5px; color: #7a869c; }
.aai-mine-b { display: flex; justify-content: flex-end; gap: 8px; }
@keyframes aaiFade { from { opacity: 0; } to { opacity: 1; } }
/* Delete bin: a fixed corner while dragging (never under the object); deletes only with the pointer inside it */
.aai-bin.is-corner { left: auto; right: 22px; transform: translateY(30px) scale(.92); }
.aai-bin.is-corner.is-in, .aai-bin.is-corner.is-poof { transform: none; }
[data-ptool="bgerase"] .aai-canvas { cursor: crosshair; }
.aai-bin.is-corner.is-poof { animation: aaiBinOutC .3s ease .55s forwards; }
@keyframes aaiBinOutC { to { opacity: 0; transform: translateY(20px) scale(.9); } }
/* Icons and pictures: brightness, contrast, colour and recolour in the selection bar */
.aai-sb-pl { font-size: 11.5px; font-weight: 700; color: #5b6b88; margin-right: 2px; }
.aai-pic-sw { width: 20px; height: 20px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px #d5deee; cursor: pointer; transition: transform .15s; }
.aai-pic-sw:hover { transform: scale(1.15); }
.aai-pic-sw.is-on { box-shadow: 0 0 0 2px #2f7bc4; }
.aai-pic-any i { background: conic-gradient(#e2615f, #f5c242, #3fae72, #2bb0aa, #2f7bc4, #9a86de, #e2615f) !important; }
.aai-sb-pic.is-flash { animation: aaiPicFlash .9s ease; border-radius: 10px; }
@keyframes aaiPicFlash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px rgba(232, 93, 26, .55); } }
@media (pointer: coarse) { .aai-pic-sw { width: 26px; height: 26px; } }
/* Convert a graph to another type that fits its data */
.aai-sb-conv { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.aai-sb-conv svg { width: 16px; height: 16px; }
.aai-chconv { position: absolute; z-index: 70; width: min(560px, calc(100% - 16px)); max-height: 70vh; overflow: auto; padding: 14px 16px 16px; border-radius: 18px; background: #fff; box-shadow: 0 24px 60px -24px rgba(11, 35, 80, .5), 0 0 0 1px #e3e9f3; animation: aaiFade .18s ease both; }
.aai-chconv-h { display: flex; justify-content: space-between; align-items: center; }
.aai-chconv-h b { font: 700 15px var(--a-head, Roboto, sans-serif); color: #0f2a4a; }
.aai-chconv p { margin: 6px 0 10px; font-size: 12.5px; color: #5b6b88; }
.aai-chconv-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.aai-chconv-g button { display: grid; gap: 3px; padding: 8px; border: 1px solid #e1e6f0; border-radius: 12px; background: #f9fbff; cursor: pointer; text-align: left; transition: border-color .15s, transform .15s; }
.aai-chconv-g button:hover { border-color: #e85d1a; transform: translateY(-2px); }
.aai-chconv-g button:disabled { opacity: .5; }
.aai-chconv-p { display: block; height: 70px; border-radius: 8px; background: #fff; overflow: hidden; }
.aai-chconv-p svg { width: 100%; height: 100%; }
.aai-chconv-g b { font-size: 12.5px; color: #0f2a4a; }
.aai-chconv-g em { font-style: normal; font-size: 11px; color: #7a869c; }
.aai-chconv-none { padding: 12px; border: 1px dashed #d5deee; border-radius: 12px; }
/* Folder options: Rename and Delete beside the open folder's title (right-click or long press on a folder too) */
.aai-files-head { flex-wrap: wrap; }
.aai-fhead-acts { display: inline-flex; gap: 6px; margin-left: 10px; vertical-align: middle; }
.aai-fhead-acts button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: 1px solid #d5deee; border-radius: 99px; background: #fff; color: #0f2a4a; font: 600 12.5px var(--a-body, Roboto, sans-serif); cursor: pointer; transition: border-color .15s, background .15s; }
.aai-fhead-acts button svg { width: 15px; height: 15px; }
.aai-fhead-acts button:hover { border-color: #2f7bc4; background: #f3f7ff; }
.aai-fhead-acts button.is-danger { color: #c62828; }
.aai-fhead-acts button.is-danger:hover { border-color: #c62828; background: #fff5f5; }
/* Graphs: Convert graph type stands out in the bar */
.aai-stylebar .aai-sb-conv { gap: 7px; padding: 7px 16px; border: 0; border-radius: 99px; background: linear-gradient(135deg, #e85d1a, #f0701f); color: #fff !important; font: 700 13px var(--a-body, Roboto, sans-serif); box-shadow: 0 8px 18px -8px rgba(232, 93, 26, .75); position: relative; overflow: hidden; }
.aai-stylebar .aai-sb-conv svg { width: 17px; height: 17px; stroke: #fff; }
.aai-stylebar .aai-sb-conv:hover { filter: brightness(1.06); transform: translateY(-1px); }
.aai-stylebar .aai-sb-conv::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); animation: aaiConvShine 1.6s ease .3s 2; }
@keyframes aaiConvShine { to { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .aai-stylebar .aai-sb-conv::after { animation: none; } }
/* Adjust bar: "Make all text editable" beside "Enhance text look" */
.aai-enh-all { margin-left: 8px; background: linear-gradient(110deg, #e85d1a, #f0701f 45%, #2f7bc4 80%, #2f7bc4) 0 0 / 220% 100%; box-shadow: 0 10px 22px -12px rgba(232, 93, 26, .9); }
.aai-enh-all .aai-enh-ic { color: #fff; filter: none; animation: none; }
.aai-pf-badge.is-fix { background: linear-gradient(140deg, #e85d1a, #f0701f) !important; }
.aai-pf-badge.is-erase { background: linear-gradient(140deg, #7c3aed, #a855f7 60%, #ec4899) !important; }
/* Restore menu (header): Back to original · Back to my version · Save as my version */
.aai-restmenu { position: fixed; z-index: 99990; width: 300px; padding: 6px; border-radius: 14px; background: #fff; border: 1px solid #dfe6f3; box-shadow: 0 18px 40px -14px rgba(11, 35, 80, .35); animation: aaiRestIn .16s ease-out; }
@keyframes aaiRestIn { from { opacity: 0; transform: translateY(-4px); } }
.aai-restmenu button { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; color: #0f2a4a; font: inherit; }
.aai-restmenu button:hover:not(:disabled) { background: #fff3e8; }
.aai-restmenu button:hover:not(:disabled) svg { color: #e85d1a; }
.aai-restmenu button:disabled { cursor: default; opacity: .5; }
.aai-restmenu svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: #2b74bd; }
.aai-restmenu b { display: block; font: 700 13.5px/1.25 Roboto, sans-serif; }
.aai-restmenu em { display: block; margin-top: 2px; font: 400 12px/1.35 Roboto, sans-serif; font-style: normal; color: #5b6478; }
.aai-restmenu hr { margin: 4px 8px; border: 0; border-top: 1px solid #e6ebf4; }
/* The magic moment (Make all text / arrows editable, Enhance text look, Fix one arrow) */
.aai-mx { position: fixed; inset: 0; z-index: 99996; pointer-events: none; transition: opacity .55s ease; }
.aai-mx.is-out { opacity: 0; }
.aai-mx-stage { position: fixed; overflow: hidden; border-radius: 8px; }
.aai-mx-sweep { position: absolute; top: -25%; bottom: -25%; left: -45%; width: 38%; transform: skewX(-18deg); background: linear-gradient(100deg, transparent, rgba(47, 122, 229, .16) 25%, rgba(124, 58, 237, .2) 40%, rgba(255, 255, 255, .8) 52%, rgba(240, 112, 31, .26) 66%, transparent); animation: aaiMxSweep 1.5s cubic-bezier(.45, 0, .25, 1) infinite; }
.aai-mx-stage.is-done .aai-mx-sweep { animation: aaiMxSweep 1.1s cubic-bezier(.45, 0, .25, 1) 1 forwards; }
.aai-mx-glow { position: absolute; inset: 0; border-radius: 8px; animation: aaiMxGlow 1.6s ease-in-out infinite; }
.aai-mx-stage.is-done .aai-mx-glow { animation: aaiMxGlow 1.6s ease-in-out 2; }
.aai-mx-pill { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; padding: 8px 16px 10px 12px; border-radius: 99px; overflow: hidden; color: #fff; font: 700 13px/1.2 Roboto, Arial, sans-serif; white-space: nowrap; background: rgba(11, 35, 80, .88); box-shadow: 0 12px 30px -12px rgba(11, 35, 80, .7); transition: opacity .3s; }
.aai-mx-pill em { font-style: normal; }
.aai-mx-pill s { position: absolute; left: 0; bottom: 0; height: 3px; width: 4%; background: linear-gradient(90deg, #4a8fd2, #7c3aed, #f0701f); transition: width .25s ease; }
.aai-mx-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .28); border-top-color: #ffb347; animation: aaiMxSpin .8s linear infinite; }
.aai-mx-stage.is-done .aai-mx-pill { opacity: 0; }
.aai-mx-svg { position: fixed; left: 0; top: 0; overflow: visible; }
.aai-mx-line { fill: none; stroke: #f0701f; stroke-width: 5px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(240, 112, 31, .9)) drop-shadow(0 0 2px #fff); animation: aaiMxDraw .75s cubic-bezier(.3, 0, .2, 1) forwards, aaiMxHue 2.4s linear infinite; }
.aai-mx-head { fill: #f0701f; opacity: 0; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 6px rgba(240, 112, 31, .9)); animation: aaiMxPop .45s cubic-bezier(.2, 1.6, .4, 1) .55s forwards; }
.aai-mx-box { fill: rgba(255, 179, 71, .1); stroke: #7c3aed; stroke-width: 2.5px; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 5px rgba(124, 58, 237, .8)); animation: aaiMxDraw .6s ease-out forwards, aaiMxHue 2.4s linear infinite; }
.aai-mx-spark { position: fixed; width: 16px; height: 16px; margin: -8px 0 0 -8px; opacity: 0; background: radial-gradient(circle, #fff 0 18%, rgba(255, 210, 122, .95) 20% 34%, transparent 36%); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: aaiMxSpark .9s ease-out forwards; }
.aai-mx-badge { position: fixed; transform: translate(-50%, -50%) scale(.6); opacity: 0; display: flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 99px; color: #fff; font: 800 16px/1.2 Roboto, Arial, sans-serif; white-space: nowrap; background: linear-gradient(110deg, #2f7bc4, #7c3aed 45%, #e85d1a 80%, #f0701f) 0 0 / 200% 100%; box-shadow: 0 18px 40px -14px rgba(124, 58, 237, .85), 0 0 0 4px rgba(255, 255, 255, .55); animation: aaiMxBadge 2.3s cubic-bezier(.2, 1.4, .4, 1) .5s forwards, aaiEnhFlow 3s ease-in-out infinite; }
.aai-mx-badge span { font-size: 20px; }
@keyframes aaiMxSweep { from { left: -45%; } to { left: 120%; } }
@keyframes aaiMxGlow { 0%, 100% { box-shadow: inset 0 0 30px rgba(47, 122, 229, .22), inset 0 0 0 2px rgba(47, 122, 229, .35); } 50% { box-shadow: inset 0 0 55px rgba(240, 112, 31, .26), inset 0 0 0 2px rgba(240, 112, 31, .55); } }
@keyframes aaiMxSpin { to { transform: rotate(360deg); } }
@keyframes aaiMxDraw { to { stroke-dashoffset: 0; } }
@keyframes aaiMxHue { 0% { stroke: #4a8fd2; } 33% { stroke: #7c3aed; } 66% { stroke: #f0701f; } 100% { stroke: #4a8fd2; } }
@keyframes aaiMxPop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes aaiMxSpark { 0% { opacity: 0; transform: scale(.2) rotate(0deg); } 35% { opacity: 1; transform: scale(1.3) rotate(90deg); } 100% { opacity: 0; transform: scale(.4) rotate(200deg) translateY(-14px); } }
@keyframes aaiMxBadge { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } 26%, 82% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -62%) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .aai-mx * { animation-duration: .01s !important; animation-iteration-count: 1 !important; } .aai-mx-line, .aai-mx-box { stroke-dashoffset: 0; } .aai-mx-head, .aai-mx-badge { opacity: 1; } }
/* ================= Poster studio ================= */
.ps-side-ico { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; flex: none; width: 22px; height: 22px; padding: 6px 3px 3px; border-radius: 7px; background: linear-gradient(135deg, #2f7bc4, #7c3aed 55%, #f0701f); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); box-sizing: border-box; }
.ps-side-ico::before { content: ""; position: absolute; left: 3px; right: 3px; top: 3px; height: 2px; border-radius: 2px; background: #fff; }
.ps-side-ico i { border-radius: 1.5px; background: rgba(255, 255, 255, .85); }
.aai-side-graphs.is-on .ps-side-ico { box-shadow: none; }
.ps-intro .ps-intro-acts { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.aai-poster { position: relative; display: flex; flex-direction: column; height: min(90vh, 980px); min-height: 600px; border-radius: 22px; overflow: hidden; background: #e9eef7; font-family: Roboto, Arial, sans-serif; color: #0f2a4a; box-shadow: 0 30px 60px -40px rgba(11, 35, 80, .5); animation: aai-rise .5s ease; }
.aai-poster.is-full { position: fixed; inset: 0; z-index: 99990; height: 100vh; border-radius: 0; }
.ps-top { display: flex; align-items: center; gap: 8px; height: 58px; padding: 0 14px; background: linear-gradient(110deg, #0f2a4a, #0a3f9a 60%, #2f7bc4); color: #fff; box-shadow: 0 8px 22px -14px rgba(11, 35, 80, .8); }
.ps-top .aai-icon-btn { color: #fff; background: rgba(255, 255, 255, .12); border: 0; }
.ps-top .aai-icon-btn:hover { background: rgba(255, 255, 255, .24); }
.ps-title { min-width: 120px; max-width: 320px; height: 36px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; font: 700 15px Roboto, Arial, sans-serif; }
.ps-title:focus { outline: none; background: rgba(255, 255, 255, .2); border-color: #ffb347; }
.ps-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 99px; background: rgba(255, 255, 255, .14); font: 700 12px Roboto, sans-serif; }
.ps-badge-ico { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, #4a8fd2, #7c3aed 55%, #f0701f); }
.ps-status { font-size: 12px; opacity: .8; }
.ps-status.is-busy::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); border-top-color: #ffb347; animation: aaiMxSpin .8s linear infinite; vertical-align: -1px; }
.ps-sp { flex: 1; }
.ps-zoom { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .12); }
.ps-zoom button { min-width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: #fff; font: 700 14px Roboto, sans-serif; cursor: pointer; }
.ps-zoom button:hover { background: rgba(255, 255, 255, .18); }
.ps-zoom span { min-width: 46px; text-align: center; font: 700 12px Roboto, sans-serif; }
.ps-dl { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 0; border-radius: 99px; color: #fff; font: 800 14px Roboto, sans-serif; cursor: pointer; background: linear-gradient(110deg, #e85d1a, #f0701f); box-shadow: 0 12px 24px -12px rgba(232, 93, 26, .95); transition: transform .18s, box-shadow .18s; }
.ps-dl:hover { transform: translateY(-1px); box-shadow: 0 16px 28px -12px rgba(232, 93, 26, 1); }
.ps-dl:disabled { opacity: .6; cursor: progress; }
.ps-dl svg { width: 18px; height: 18px; }
.ps-body { flex: 1; display: flex; min-height: 0; }
.ps-rail { display: flex; flex-direction: column; gap: 4px; width: 78px; padding: 12px 8px; background: #fff; border-right: 1px solid #dfe6f3; }
.ps-rail button { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; border: 0; border-radius: 12px; background: none; color: #33415c; font: 600 11.5px Roboto, sans-serif; cursor: pointer; transition: background .15s, color .15s; }
.ps-rail button svg { width: 22px; height: 22px; }
.ps-rail button:hover { background: #f1f5fc; color: #2f7bc4; }
.ps-rail button.is-on { background: linear-gradient(135deg, #2f7bc4, #4a8fd2); color: #fff; box-shadow: 0 10px 18px -12px rgba(47, 123, 196, .9); }
.ps-rail button[data-pstab="print"] { margin-top: auto; color: #e85d1a; }
.ps-panel { width: 300px; flex: none; overflow-y: auto; padding: 16px 16px 30px; background: #fff; border-right: 1px solid #dfe6f3; box-shadow: 10px 0 24px -22px rgba(11, 35, 80, .45); }
.ps-ph { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ps-ph b { font: 800 18px Roboto, sans-serif; color: #0f2a4a; }
.ps-ph em { width: 100%; font: 400 12.5px Roboto, sans-serif; font-style: normal; color: #6b7891; }
.ps-del { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; color: #d93a3a; font: 700 12.5px Roboto, sans-serif; cursor: pointer; }
.ps-del svg { width: 15px; height: 15px; }
.ps-grp > span, .ps-sub { display: block; margin: 16px 0 8px; font: 800 11px Roboto, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8190a8; }
.ps-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ps-tiles.is-small { grid-template-columns: repeat(4, 1fr); }
.ps-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 8px 4px; border: 1px solid #e1e8f4; border-radius: 12px; background: #fff; color: #33415c; font: 600 12px Roboto, sans-serif; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s, color .15s; }
.ps-tiles.is-small .ps-tile { min-height: 58px; font-size: 10.5px; }
.ps-tile svg { width: 24px; height: 24px; }
.ps-tile:hover { border-color: #f0701f; color: #e85d1a; transform: translateY(-1px); box-shadow: 0 10px 20px -16px rgba(232, 93, 26, .9); }
.ps-tip, .ps-hint { margin: 10px 0 0; font: 400 12px/1.45 Roboto, sans-serif; color: #6b7891; }
.ps-hint b.is-ok { color: #0f9f6e; } .ps-hint b.is-warn { color: #d97706; } .ps-hint b.is-bad { color: #d93a3a; }
.ps-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 9px 0; font: 600 12.5px Roboto, sans-serif; color: #33415c; }
.ps-f > span { flex: none; max-width: 42%; }
.ps-f select, .ps-f input[type="text"] { flex: 1; min-width: 0; height: 34px; padding: 0 9px; border: 1px solid #d6dfee; border-radius: 9px; background: #fff; font: 500 13px Roboto, sans-serif; color: #0f2a4a; }
.ps-f input[type="range"] { flex: 1; accent-color: #e85d1a; }
.ps-num { display: flex; align-items: center; border: 1px solid #d6dfee; border-radius: 9px; overflow: hidden; }
.ps-num button { width: 32px; height: 32px; border: 0; background: #f4f7fc; font: 700 16px Roboto, sans-serif; color: #0f2a4a; cursor: pointer; }
.ps-num input { width: 52px; height: 32px; border: 0; text-align: center; font: 700 13px Roboto, sans-serif; color: #0f2a4a; -moz-appearance: textfield; }
.ps-num em { padding: 0 8px 0 2px; font: 600 11px Roboto, sans-serif; font-style: normal; color: #8190a8; }
.ps-seg { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: 10px; background: #f1f5fc; }
.ps-seg button { min-width: 30px; height: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: #33415c; font: 600 12px Roboto, sans-serif; cursor: pointer; }
.ps-seg button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; vertical-align: middle; }
.ps-seg button.is-on { background: #fff; color: #2f7bc4; box-shadow: 0 2px 8px -3px rgba(11, 35, 80, .35); }
.ps-col { display: inline-flex; align-items: center; gap: 7px; }
.ps-col input { width: 34px; height: 30px; padding: 0; border: 1px solid #d6dfee; border-radius: 8px; background: none; cursor: pointer; }
.ps-col em { font: 500 11.5px Roboto, sans-serif; font-style: normal; color: #6b7891; }
.ps-col button { border: 0; background: #f1f5fc; border-radius: 6px; width: 22px; height: 22px; cursor: pointer; color: #6b7891; }
.ps-big { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 42px; margin: 4px 0; border: 0; border-radius: 12px; color: #fff; font: 700 13.5px Roboto, sans-serif; cursor: pointer; background: linear-gradient(110deg, #2f7bc4, #4a8fd2); box-shadow: 0 10px 20px -14px rgba(47, 123, 196, .9); }
.ps-big.is-alt { background: #fff; color: #2f7bc4; box-shadow: inset 0 0 0 1.5px #c9d8f2; }
.ps-big svg { width: 17px; height: 17px; }
.ps-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ps-link { margin: 6px 0; padding: 0; border: 0; background: none; color: #2f7bc4; font: 700 12.5px Roboto, sans-serif; cursor: pointer; text-align: left; }
.ps-sym { height: 32px; padding: 0 12px; border: 1px solid #d6dfee; border-radius: 9px; background: #fff; font: 700 13px Roboto, sans-serif; color: #0f2a4a; cursor: pointer; }
.ps-symbols { position: fixed; z-index: 100001; display: grid; grid-template-columns: repeat(10, 30px); gap: 3px; padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 18px 40px -16px rgba(11, 35, 80, .5); border: 1px solid #e1e8f4; }
.ps-symbols button { width: 30px; height: 30px; border: 0; border-radius: 7px; background: #f4f7fc; font: 500 15px Roboto, sans-serif; color: #0f2a4a; cursor: pointer; }
.ps-symbols button:hover { background: #fff3e8; color: #e85d1a; }
.ps-empty { margin-top: 40px; text-align: center; color: #8190a8; font: 400 13px/1.5 Roboto, sans-serif; }
.ps-empty svg { width: 34px; height: 34px; color: #b6c3d9; }
.ps-themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ps-themes button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 4px; border: 1.5px solid #e1e8f4; border-radius: 11px; background: #fff; font: 600 10.5px Roboto, sans-serif; color: #33415c; cursor: pointer; }
.ps-themes button span { display: block; }
.ps-themes button i { display: inline-block; width: 14px; height: 14px; margin: 0 -2px; border-radius: 50%; border: 2px solid #fff; }
.ps-themes button.is-on { border-color: #e85d1a; box-shadow: 0 6px 14px -10px rgba(232, 93, 26, .9); }
.ps-sizes { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 10px; }
.ps-sizes > span { width: 100%; font: 600 11.5px Roboto, sans-serif; color: #6b7891; }
.ps-sizes button { height: 30px; padding: 0 10px; border: 1px solid #d6dfee; border-radius: 99px; background: #fff; font: 600 12px Roboto, sans-serif; color: #33415c; cursor: pointer; }
.ps-sizes button.is-on { background: #2f7bc4; border-color: #2f7bc4; color: #fff; }
.ps-custom { display: flex; align-items: center; gap: 5px; font: 600 12px Roboto, sans-serif; color: #33415c; }
.ps-custom input { width: 64px; height: 30px; padding: 0 6px; border: 1px solid #d6dfee; border-radius: 8px; font: 600 12px Roboto, sans-serif; }
.ps-custom select { height: 30px; border: 1px solid #d6dfee; border-radius: 8px; }
.ps-custom button { height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: #0f2a4a; color: #fff; font: 700 12px Roboto, sans-serif; cursor: pointer; }
.ps-stage { position: relative; flex: 1; overflow: auto; display: grid; place-items: center; padding: 30px; background: radial-gradient(circle at 1px 1px, rgba(11, 35, 80, .1) 1px, transparent 0) 0 0 / 18px 18px, #e9eef7; }
.ps-paper { position: relative; flex: none; background: #fff; box-shadow: 0 30px 60px -30px rgba(11, 35, 80, .55), 0 0 0 1px rgba(11, 35, 80, .06); }
.ps-svg, .ps-svg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ps-hits { position: absolute; inset: 0; }
.ps-hit { position: absolute; border-radius: 4px; cursor: pointer; transition: box-shadow .12s; }
.ps-hit.is-back { cursor: default; }
.ps-hit:not(.is-back):hover, .ps-hit.is-stitle:hover { box-shadow: 0 0 0 1.5px rgba(47, 123, 196, .55); }
.ps-hit.is-section.is-on, .ps-hit.is-block.is-on, .ps-hit.is-on { box-shadow: 0 0 0 2.5px #e85d1a, 0 0 0 6px rgba(232, 93, 26, .18); }
.ps-hit.is-stitle { cursor: grab; }
.ps-tag { position: absolute; left: 0; top: -20px; display: none; padding: 2px 7px; border-radius: 6px; background: #2f7bc4; color: #fff; font: 700 10.5px Roboto, sans-serif; white-space: nowrap; pointer-events: none; }
.ps-hit:not(.is-back):hover > .ps-tag { display: block; }
.ps-hit.is-header:hover, .ps-hit.is-section:hover { box-shadow: none; }
.ps-tb { position: absolute; z-index: 5; display: flex; align-items: center; gap: 2px; height: 34px; padding: 0 4px 0 10px; border-radius: 10px; background: #0f2a4a; color: #fff; box-shadow: 0 12px 24px -12px rgba(11, 35, 80, .8); white-space: nowrap; }
.ps-tb b { margin-right: 6px; font: 700 11.5px Roboto, sans-serif; }
.ps-tb button { min-width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; color: #fff; font: 600 14px Roboto, sans-serif; cursor: pointer; }
.ps-tb button:hover { background: rgba(255, 255, 255, .16); }
.ps-div { position: absolute; width: 12px; cursor: col-resize; z-index: 3; }
.ps-div i { position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: rgba(47, 123, 196, 0); transition: background .15s; }
.ps-div::after { content: ""; position: absolute; left: 1px; top: 50%; width: 10px; height: 34px; margin-top: -17px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1.5px #9db7ea, 0 4px 10px -4px rgba(11, 35, 80, .4); opacity: 0; transition: opacity .15s; }
.ps-paper:hover .ps-div::after, .ps-div:hover::after { opacity: 1; }
.ps-div:hover i { background: rgba(47, 123, 196, .7); }
.ps-over { position: absolute; z-index: 4; border-top: 3px dashed #d93a3a; pointer-events: none; }
.ps-over span { position: absolute; left: 0; top: 4px; padding: 4px 8px; border-radius: 7px; background: #d93a3a; color: #fff; font: 700 11px Roboto, sans-serif; white-space: nowrap; }
.ps-edit { position: absolute; z-index: 6; box-sizing: border-box; padding: 6px; border: 2px solid #e85d1a; border-radius: 6px; background: rgba(255, 255, 255, .96); color: #0f2a4a; line-height: 1.25; resize: none; overflow: hidden; outline: none; box-shadow: 0 14px 30px -12px rgba(11, 35, 80, .5); }
.ps-ghost { position: fixed; z-index: 100002; padding: 8px 14px; border-radius: 10px; background: #2f7bc4; color: #fff; font: 700 13px Roboto, sans-serif; pointer-events: none; box-shadow: 0 14px 28px -12px rgba(47, 123, 196, .9); }
.ps-dropline { position: absolute; z-index: 7; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #e85d1a, #f0701f); box-shadow: 0 0 12px rgba(232, 93, 26, .8); pointer-events: none; }
.ps-paper.is-dragging .ps-hit { cursor: grabbing; }
/* pickers */
.ps-pick-card { width: min(920px, 94vw); max-height: 86vh; display: flex; flex-direction: column; padding: 0 !important; overflow: hidden; border-radius: 18px !important; }
.ps-pick-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #e6ebf4; }
.ps-pick-title { font: 800 17px Roboto, sans-serif; color: #0f2a4a; }
.ps-pick-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: #f1f5fc; }
.ps-pick-tabs button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: none; font: 700 13px Roboto, sans-serif; color: #33415c; cursor: pointer; }
.ps-pick-tabs button svg { width: 16px; height: 16px; }
.ps-pick-tabs button.is-on { background: #fff; color: #2f7bc4; box-shadow: 0 2px 8px -3px rgba(11, 35, 80, .35); }
.ps-pick-q { flex: 1; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 1px solid #d6dfee; border-radius: 10px; }
.ps-pick-q svg { width: 16px; height: 16px; color: #8190a8; }
.ps-pick-q input { flex: 1; border: 0; outline: none; font: 500 13.5px Roboto, sans-serif; }
.ps-pick-up { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 10px; background: linear-gradient(110deg, #e85d1a, #f0701f); color: #fff; font: 700 13px Roboto, sans-serif; cursor: pointer; }
.ps-pick-up svg { width: 16px; height: 16px; }
.ps-pick-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; padding: 16px; }
.ps-pick-grid.is-charts { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.ps-pick-it { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border: 1px solid #e1e8f4; border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.ps-pick-it img { width: 100%; height: 100px; object-fit: contain; border-radius: 8px; background: #f6f8fc; }
.ps-pick-it.is-chart img { height: 106px; background: #fff; }
.ps-pick-it span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 11.5px Roboto, sans-serif; color: #33415c; text-align: center; }
.ps-pick-it em.is-low { position: absolute; left: 8px; top: 8px; padding: 2px 6px; border-radius: 6px; background: #fff3e0; color: #b45309; font: 700 9.5px Roboto, sans-serif; font-style: normal; }
.ps-pick-it:hover { border-color: #f0701f; transform: translateY(-2px); box-shadow: 0 12px 22px -16px rgba(232, 93, 26, .9); }
.ps-pick-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 50px 0; color: #8190a8; font: 400 13.5px Roboto, sans-serif; }
.ps-pick-empty svg { width: 30px; height: 30px; }
.ps-pick-foot { padding: 10px 16px; border-top: 1px solid #e6ebf4; font: 400 12px Roboto, sans-serif; color: #6b7891; }
/* template gallery */
.ps-gal-card { width: min(1180px, 96vw); height: min(860px, 92vh); display: flex; flex-direction: column; padding: 0 !important; overflow: hidden; border-radius: 20px !important; }
.ps-gal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #e6ebf4; }
.ps-gal-head h3 { margin: 0; font: 800 22px Roboto, sans-serif; color: #0f2a4a; }
.ps-gal-body { flex: 1; display: flex; min-height: 0; }
.ps-gal-side { width: 220px; flex: none; padding: 18px; border-right: 1px solid #e6ebf4; }
.ps-gal-side > b { display: block; margin: 4px 0 10px; font: 800 15px Roboto, sans-serif; color: #0f2a4a; }
.ps-gal-side > b:not(:first-child) { margin-top: 22px; }
.ps-gal-side label { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; font: 600 14px Roboto, sans-serif; color: #33415c; cursor: pointer; }
.ps-gal-side label:hover { background: #f4f7fc; }
.ps-gal-side input { width: 18px; height: 18px; accent-color: #2f7bc4; }
.ps-gal-themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.ps-gal-themes button { height: 34px; border: 1.5px solid #e1e8f4; border-radius: 10px; background: #fff; cursor: pointer; }
.ps-gal-themes button i { display: inline-block; width: 13px; height: 13px; margin: 0 -2px; border-radius: 50%; border: 2px solid #fff; }
.ps-gal-themes button.is-on { border-color: #e85d1a; }
.ps-gal-main { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 16px 20px; }
.ps-gal-q { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 1px solid #d6dfee; border-radius: 12px; margin-bottom: 16px; }
.ps-gal-q svg { width: 18px; height: 18px; color: #8190a8; }
.ps-gal-q input { flex: 1; border: 0; outline: none; font: 500 15px Roboto, sans-serif; }
.ps-gal-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; padding: 4px 4px 20px; align-content: start; }
.ps-gal-it { display: flex; flex-direction: column; gap: 4px; padding: 0 0 12px; border: 1px solid #e1e8f4; border-radius: 14px; background: #fff; text-align: left; cursor: pointer; overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s; animation: aaiFadeUp .4s both; animation-delay: calc(var(--i, 0) * 25ms); }
.ps-gal-it:hover { transform: translateY(-3px); border-color: #f0701f; box-shadow: 0 18px 32px -20px rgba(232, 93, 26, .9); }
.ps-gal-thumb { display: grid; place-items: center; height: 220px; padding: 12px; background: linear-gradient(180deg, #f4f7fc, #eaf0fa); }
.ps-gal-thumb svg { max-width: 100%; max-height: 100%; width: auto; height: 100%; box-shadow: 0 8px 18px -10px rgba(11, 35, 80, .45); background: #fff; }
.ps-gal-thumb.is-landscape svg { width: 100%; height: auto; }
.ps-gal-it.is-blank .ps-gal-thumb i { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(110deg, #e85d1a, #f0701f); color: #fff; font: 300 40px Roboto, sans-serif; font-style: normal; }
.ps-gal-it b { padding: 8px 12px 0; font: 700 14.5px Roboto, sans-serif; color: #0f2a4a; }
.ps-gal-it em { padding: 0 12px; font: 400 12.5px Roboto, sans-serif; font-style: normal; color: #6b7891; }
@keyframes aaiFadeUp { from { opacity: 0; transform: translateY(8px); } }
/* download dialog */
.ps-ex-card { width: min(980px, 96vw); max-height: 92vh; display: flex; flex-direction: column; padding: 0 !important; overflow: hidden; border-radius: 20px !important; }
.ps-ex-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #e6ebf4; }
.ps-ex-head h3 { margin: 4px 0 0; font: 800 21px Roboto, sans-serif; color: #0f2a4a; }
.ps-ex-body { flex: 1; display: grid; grid-template-columns: 300px 1fr; gap: 22px; padding: 18px 22px; overflow-y: auto; }
.ps-ex-prev { display: grid; place-items: center; min-height: 300px; padding: 14px; border-radius: 14px; background: linear-gradient(180deg, #f4f7fc, #e7eef9); }
.ps-ex-prev img { max-width: 100%; max-height: 420px; box-shadow: 0 14px 30px -14px rgba(11, 35, 80, .55); }
.ps-ex-fmts { display: grid; gap: 8px; }
.ps-ex-fmt, .ps-ex-opt { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1.5px solid #e1e8f4; border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.ps-ex-fmt:has(input:checked) { border-color: #2f7bc4; background: #f3f7ff; }
.ps-ex-fmt input, .ps-ex-opt input { margin-top: 3px; width: 17px; height: 17px; accent-color: #2f7bc4; }
.ps-ex-fmt b, .ps-ex-opt b { display: flex; align-items: center; gap: 8px; font: 700 14px Roboto, sans-serif; color: #0f2a4a; }
.ps-ex-fmt b em { padding: 2px 8px; border-radius: 99px; background: linear-gradient(110deg, #e85d1a, #f0701f); color: #fff; font: 800 10px Roboto, sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: .05em; }
.ps-ex-fmt small, .ps-ex-opt small { display: block; margin-top: 2px; font: 400 12.5px/1.4 Roboto, sans-serif; color: #6b7891; }
.ps-checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ps-checks li { display: flex; align-items: flex-start; gap: 9px; font: 500 13px/1.4 Roboto, sans-serif; color: #33415c; }
.ps-checks li i { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font: 800 11px Roboto, sans-serif; font-style: normal; color: #fff; }
.ps-checks li.is-ok i { background: #0f9f6e; } .ps-checks li.is-ok i::after { content: "✓"; }
.ps-checks li.is-warn i { background: #f59e0b; } .ps-checks li.is-warn i::after { content: "!"; }
.ps-checks li.is-bad i { background: #d93a3a; } .ps-checks li.is-bad i::after { content: "×"; }
.ps-checks li.is-info i { background: #4a8fd2; } .ps-checks li.is-info i::after { content: "i"; }
.ps-ex-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid #e6ebf4; background: #fafcff; }
.ps-ex-prog { flex: 1; font: 600 13px Roboto, sans-serif; color: #2f7bc4; }
.ps-ex-warn { font: 600 12.5px Roboto, sans-serif; color: #d93a3a; }
@media (max-width: 1024px) { .ps-panel { width: 250px; padding: 14px 12px 30px; } .ps-stage { padding: 16px; } }
@media (max-width: 700px) { .ps-panel { position: absolute; left: 78px; top: 58px; bottom: 0; z-index: 8; width: 270px; } }
@media (max-width: 900px) { .ps-ex-body { grid-template-columns: 1fr; } .ps-gal-side { display: none; } .ps-badge, .ps-zoom span { display: none; } }
.aai-side-graphs .ps-side-ico { flex: none !important; width: 22px !important; height: 22px !important; padding: 6px 3px 3px !important; display: inline-grid !important; }
.ps-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; align-items: center; }
.ps-intro h2 { margin: 6px 0 8px; }
.ps-intro p { margin: 0; color: #5b6478; }
.ps-intro-pts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.ps-intro-pts li { position: relative; padding-left: 20px; font: 600 13px Roboto, sans-serif; color: #33415c; }
.ps-intro-pts li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: linear-gradient(110deg, #e85d1a, #f0701f); color: #fff; font: 800 9px/15px Roboto, sans-serif; text-align: center; }
.ps-intro-art { position: relative; height: 230px; }
.ps-ia { position: absolute; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 18px 36px -18px rgba(11, 35, 80, .55); animation: psFloat 6s ease-in-out infinite; }
.ps-ia svg { display: block; width: 100%; height: 100%; }
.ps-ia-1 { left: 4%; top: 30px; width: 62%; aspect-ratio: 1189 / 841; z-index: 2; }
.ps-ia-2 { right: 18%; top: 0; width: 30%; aspect-ratio: 841 / 1189; transform: rotate(4deg); animation-delay: -2s; }
.ps-ia-3 { right: 0; top: 46px; width: 28%; aspect-ratio: 841 / 1189; transform: rotate(-3deg); z-index: 3; animation-delay: -4s; }
@keyframes psFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (max-width: 900px) { .ps-intro { grid-template-columns: 1fr; } .ps-intro-art { display: none; } }
.ps-gal-grid, .ps-pick-grid { grid-auto-rows: max-content; min-height: 0; }
.ps-gal-thumb { flex: none; }

.ps-seg-wide { margin: 0 0 10px; }
.ps-seg-wide .ps-seg { flex-wrap: nowrap; }
.ps-seg-wide .ps-seg button { flex: 1; }

/* New / Beta labels on recent features */
.aai-ftag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 99px; font: 700 9.5px/1.5 Roboto, sans-serif; letter-spacing: .05em; text-transform: uppercase; font-style: normal; vertical-align: 1px; color: #fff; white-space: nowrap; }
.aai-ftag.is-new { background: linear-gradient(110deg, #e85d1a, #f0701f); }
.aai-ftag.is-beta { background: #e8efff; color: #2f7bc4; box-shadow: inset 0 0 0 1px #b9cdf5; }
.aai-ftag.is-sm { margin-left: 4px; padding: 0 5px; font-size: 8.5px; }
.aai-tb { position: relative; }
.aai-tb > .aai-ftag.is-sm { position: absolute; top: 2px; right: 2px; margin: 0; pointer-events: none; box-shadow: 0 2px 6px -2px rgba(232, 93, 26, .6); }
.aai-ed-orig > .aai-ftag.is-sm { margin-left: 6px; }
.aai-paintfly button b > .aai-ftag, .aai-demo b > .aai-ftag { color: #fff; font: 700 9px/1.6 Roboto, sans-serif; letter-spacing: .05em; margin-left: 5px; padding: 0 6px; }
.aai-paintfly button b > .aai-ftag.is-beta, .aai-demo b > .aai-ftag.is-beta { color: #2f7bc4; }
.aai-paintfly button b > .aai-ftag + .aai-ftag { margin-left: 3px; }
.aai-fixfly { width: 330px; }
.aai-fixfly button b { white-space: nowrap; }

/* poster studio on iPad: a finger scrolls; the selected item, titles and column handles drag; no page zoom */
.ps-stage { touch-action: pan-x pan-y; -webkit-tap-highlight-color: transparent; }
.ps-hit.is-on, .ps-hit.is-stitle, .ps-div { touch-action: none; }
.ps-edit { touch-action: auto; }
.aai-tb > .aai-ftag.is-sm.is-beta { box-shadow: inset 0 0 0 1px #b9cdf5; }
/* sidebar tools: animated "New" pill (shine sweep + soft glow), count as a pill beside it */
.aai-side-nav .aai-side-graphs > em, .aai-side-nav button.aai-side-graphs.is-on > em { position: relative; overflow: hidden; margin-left: auto; padding: 4px 9px; border-radius: 99px; background: linear-gradient(110deg, #e85d1a, #f0701f); color: #fff; font: 800 9.5px/1 Roboto, sans-serif; letter-spacing: .08em; text-transform: uppercase; font-style: normal; box-shadow: 0 4px 12px -4px rgba(232, 93, 26, .7); animation: aaiNewGlow 2.4s ease-in-out infinite; }
.aai-side-nav .aai-side-graphs > em::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent); transform: skewX(-20deg); animation: aaiNewShine 2.4s ease-in-out infinite; }
.aai-side-nav .aai-side-graphs > .aai-sg-n { margin-left: auto; padding: 3px 8px; border-radius: 99px; background: #e7eefb; color: #0a3f9a; font: 700 11px/1 Roboto, sans-serif; font-style: normal; }
.aai-side-nav .aai-side-graphs > .aai-sg-n + em { margin-left: 6px; }
.aai-side-nav .aai-side-graphs:nth-of-type(2) > em, .aai-side-nav .aai-side-graphs:nth-of-type(2) > em::after { animation-delay: .4s; }
.aai-side-nav .aai-side-graphs:nth-of-type(3) > em, .aai-side-nav .aai-side-graphs:nth-of-type(3) > em::after { animation-delay: .8s; }
@keyframes aaiNewShine { 0%, 55% { left: -60%; } 85%, 100% { left: 120%; } }
@keyframes aaiNewGlow { 0%, 100% { transform: scale(1); box-shadow: 0 4px 12px -4px rgba(232, 93, 26, .7); } 50% { transform: scale(1.07); box-shadow: 0 0 0 4px rgba(240, 112, 31, .18), 0 6px 16px -4px rgba(232, 93, 26, .8); } }
@media (prefers-reduced-motion: reduce) { .aai-side-nav .aai-side-graphs > em, .aai-side-nav .aai-side-graphs > em::after { animation: none; } }

/* poster studio: panel only when opened; the poster can always be scrolled to every edge */
.aai-poster:not(.is-panel) .ps-panel { display: none; }
.aai-poster.is-panel .ps-panel { animation: psPanelIn .22s cubic-bezier(.2, .9, .3, 1); }
@keyframes psPanelIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.ps-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #eef3fb; color: #33415c; font: 700 12px Roboto, sans-serif; cursor: pointer; }
.ps-close:hover { background: #dfe8f8; color: #2f7bc4; }
.ps-panel .ps-ph { padding-right: 34px; }
.ps-stage { place-items: start; overscroll-behavior: contain; }
.ps-stage.is-grab, .ps-stage.is-grab .ps-hit { cursor: grab; }
.ps-stage.is-panning, .ps-stage.is-panning .ps-hit { cursor: grabbing; user-select: none; }
@media (min-width: 701px) { .aai-poster.is-panel .ps-panel { position: relative; } }

/* download window for figures, graphs and logos (poster-style) */
.aai-xdlg .ps-ex-prev img { max-height: 380px; border-radius: 6px; background: #fff; }
.aai-xdlg .ps-ex-prev img.is-clear { background: repeating-conic-gradient(#e6ebf3 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.aai-xdlg .ps-ex-fmt.is-lock { opacity: .78; }
.aai-xdlg .ps-ex-fmt .aai-lock-tag { margin-left: 2px; }
.ax-q { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ax-q.is-bg { grid-template-columns: repeat(2, 1fr); }
.ax-q button { display: grid; gap: 2px; justify-items: start; padding: 10px 12px; border: 1.5px solid #e1e8f4; border-radius: 12px; background: #fff; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.ax-q.is-bg button { grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.ax-q button.is-on { border-color: #2f7bc4; background: #f3f7ff; box-shadow: inset 0 0 0 1px #2f7bc4; }
.ax-q button:disabled { opacity: .45; cursor: not-allowed; }
.ax-q b { font: 700 14px Roboto, sans-serif; color: #0f2a4a; }
.ax-q small { font: 400 12px/1.35 Roboto, sans-serif; color: #6b7891; }
.ax-q em { font: 600 11.5px Roboto, sans-serif; font-style: normal; color: #2f7bc4; }
.ax-q i { width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px #cfd8e8; }
.ax-q i.is-clear { background: repeating-conic-gradient(#d9e1ee 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
.aai-xdlg .ps-ex-foot .aai-xprog { width: 140px; }
@media (max-width: 600px) { .ax-q { grid-template-columns: 1fr; } }

/* poster open: the page does not scroll, only the poster inside the editor */
html.aai-poster-open, html.aai-poster-open body { overflow: hidden !important; overscroll-behavior: none; }
.aai-poster .ps-panel, .aai-poster .ps-stage { overscroll-behavior: contain; }

.aai-poster { max-width: 100%; min-width: 0; }
.ps-body, .ps-stage { min-width: 0; min-height: 0; }
.ps-board { margin: auto; flex: none; }
.ps-stage { contain: size; }
.aai-poster { contain: inline-size; }
.aai-objbar [data-ob="group"].is-group { color: #fff; background: linear-gradient(135deg, #2f7bc4, #4a8fd2); }
.aai-objbar [data-ob="group"].is-group:hover { filter: brightness(1.08); }

/* Figure studio: sidebar icon, intro with an animated picture being edited, drop zone */
.pi-side-ico { position: relative; flex: none; width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, #0ea5a4, #4a8fd2); box-shadow: 0 6px 12px -6px rgba(14, 165, 164, .9); overflow: hidden; }
.pi-side-ico::before { content: ""; position: absolute; left: 4px; right: 4px; bottom: 4px; height: 8px; background: #fff; clip-path: polygon(0 100%, 35% 20%, 55% 60%, 75% 35%, 100% 100%); }
.pi-side-ico i { position: absolute; right: 5px; top: 4px; width: 5px; height: 5px; border-radius: 50%; background: #ffd27a; }
.pi-intro { position: relative; border-radius: 18px; transition: box-shadow .2s, background .2s; }
.pi-intro.is-over { background: #f2f7ff; box-shadow: inset 0 0 0 2.5px #4a8fd2, 0 0 0 6px rgba(47, 122, 229, .12); }
.pi-hint { display: inline-block; margin-left: 12px; font: 500 12.5px Roboto, sans-serif; color: #6b7891; }
.pi-art { position: relative; height: 240px; }
.pi-card { position: absolute; left: 6%; top: 10px; width: 78%; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 46px -22px rgba(11, 35, 80, .55), 0 0 0 1px rgba(11, 35, 80, .06); animation: psFloat 6s ease-in-out infinite; }
.pi-card svg { display: block; width: 100%; height: auto; }
.pi-word .pi-good, .pi-word .pi-box { opacity: 0; }
.pi-word .pi-bad { animation: piBad 7s ease-in-out infinite; }
.pi-word .pi-good { animation: piGood 7s ease-in-out infinite; }
.pi-word .pi-box { animation: piBox 7s ease-in-out infinite; }
.pi-arrow { stroke-dasharray: 90; animation: piArrow 7s ease-in-out infinite; }
.pi-handles { opacity: 0; animation: piHandles 7s ease-in-out infinite; }
@keyframes piBox { 0%, 8% { opacity: 0; } 14%, 34% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes piBad { 0%, 22% { opacity: 1; } 28%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes piGood { 0%, 26% { opacity: 0; } 34%, 90% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes piArrow { 0%, 44% { stroke-dashoffset: 0; } 50% { stroke-dashoffset: 90; } 58%, 100% { stroke-dashoffset: 0; } }
@keyframes piHandles { 0%, 54% { opacity: 0; } 60%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
.pi-drop { position: absolute; right: 2%; bottom: 8px; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: #fff; color: #2f7bc4; font: 700 12.5px Roboto, sans-serif; box-shadow: 0 14px 28px -14px rgba(11, 35, 80, .55); animation: piDrop 7s ease-in-out infinite; }
.pi-drop svg { width: 18px; height: 18px; }
.pi-drop b { color: #0f2a4a; font-weight: 700; }
@keyframes piDrop { 0% { opacity: 0; transform: translateY(14px); } 6%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
.pi-chip { position: absolute; padding: 5px 11px; border-radius: 99px; background: linear-gradient(110deg, #e85d1a, #f0701f); color: #fff; font: 800 11px Roboto, sans-serif; box-shadow: 0 10px 20px -10px rgba(232, 93, 26, .9); opacity: 0; }
.pi-chip-1 { right: 4%; top: 30px; animation: piChip 7s ease-in-out infinite .2s; }
.pi-chip-2 { right: 0; top: 96px; animation: piChip 7s ease-in-out infinite 2.9s; background: linear-gradient(110deg, #2f7bc4, #4a8fd2); }
.pi-chip-3 { left: 0; top: 150px; animation: piChip 7s ease-in-out infinite 4.6s; background: linear-gradient(110deg, #7c3aed, #a855f7); }
@keyframes piChip { 0% { opacity: 0; transform: translateY(8px) scale(.9); } 6%, 30% { opacity: 1; transform: none; } 38%, 100% { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 900px) { .pi-art { display: none; } .pi-hint { display: block; margin: 8px 0 0; } }
@media (prefers-reduced-motion: reduce) { .pi-card, .pi-word *, .pi-arrow, .pi-handles, .pi-drop, .pi-chip { animation: none !important; } .pi-word .pi-bad { opacity: 0; } .pi-word .pi-good, .pi-handles, .pi-drop { opacity: 1; } }

/* Figure studio: the Fix it kit leads the tool rail */
.aai-tools.is-big .aai-fixdock { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0 0 6px; padding: 8px 6px 6px; border-radius: 14px; background: linear-gradient(160deg, #fff4ea, #ffe7d4); box-shadow: inset 0 0 0 1.5px #ffcf9f, 0 10px 20px -16px rgba(232, 93, 26, .9); }
.aai-fixdock .aai-fd-h { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 4px; padding: 5px 8px; border-radius: 9px; background: linear-gradient(110deg, #e85d1a, #f0701f); color: #fff; font: 800 12px Roboto, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.aai-fixdock .aai-fd-h svg { width: 15px; height: 15px; }
.aai-tools.is-big .aai-fixdock .aai-tb.aai-fd-b { width: auto !important; min-height: 58px; background: #fff; color: #7a3a0c; box-shadow: 0 2px 6px -3px rgba(232, 93, 26, .5); }
.aai-tools.is-big .aai-fixdock .aai-tb.aai-fd-b:hover { background: #fff8f1; color: #c2410c; }
.aai-tools.is-big .aai-fixdock .aai-tb.aai-fd-b.is-on { color: #fff; background: linear-gradient(135deg, #e85d1a, #f0701f); }
.aai-tools.is-big .aai-fixdock .aai-tb.aai-fd-b span { font-size: 10.5px; line-height: 1.15; }
.aai-editor[data-railcols="3"] .aai-tools.is-big .aai-fixdock, .aai-editor[data-railcols="4"] .aai-tools.is-big .aai-fixdock { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aai-side-graphs .pi-side-ico { flex: none !important; width: 22px !important; height: 22px !important; padding: 0 !important; display: block !important; }
.pi-intro .ps-intro-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pi-intro .pi-hint { margin: 0; }
.aai-tools.is-big .aai-fixdock .aai-tb.aai-fd-b:last-child:nth-child(even) { grid-column: 1 / -1; }

/* Graph: Colours & patterns pop-out (Prism style patterns) */
.aai-sb-colsw { display: inline-block; width: 14px; height: 14px; margin-right: 6px; border-radius: 4px; background: conic-gradient(#2f7bc4 0 25%, #f0701f 0 50%, #16a34a 0 75%, #9333ea 0); vertical-align: -2px; }
.aai-chcol { width: 340px; }
.aai-chcol-l { display: block; margin: 10px 0 6px; color: #45577a; font: 700 11px/1.2 var(--a-body, sans-serif); letter-spacing: .06em; text-transform: uppercase; }
.aai-chcol-pals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.aai-chcol-pals button { position: relative; display: flex; height: 26px; padding: 3px; overflow: hidden; border: 1.5px solid #dbe3f2; border-radius: 8px; background: #fff; cursor: pointer; }
.aai-chcol-pals button i { flex: 1; border-radius: 2px; }
.aai-chcol-pals button em { position: absolute; right: 4px; bottom: 2px; color: #0f2a4a; font: 700 9px/1 var(--a-body, sans-serif); font-style: normal; }
.aai-chcol-pals button.is-on { border-color: #2b74bd; box-shadow: 0 0 0 3px rgba(43, 116, 189, .15); }
.aai-chcol-list { display: grid; gap: 6px; max-height: 240px; overflow: auto; }
.aai-chcol-row { display: flex; align-items: center; gap: 8px; }
.aai-chcol-row > span { flex: 1; min-width: 0; overflow: hidden; color: #0f2a4a; font: 600 12.5px/1.2 var(--a-body, sans-serif); text-overflow: ellipsis; white-space: nowrap; }
.aai-chcol-sw { position: relative; flex: none; width: 26px; height: 26px; overflow: hidden; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); cursor: pointer; }
.aai-chcol-sw input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.aai-chcol-pat { display: flex; align-items: center; gap: 5px; }
.aai-chcol-pat select { padding: 4px 6px; border: 1px solid #d5deee; border-radius: 7px; background: #fff; color: #0f2a4a; font: 600 12px/1.2 var(--a-body, sans-serif); }

/* Handwrite: a pen tip instead of the arrow, wherever the pen is on the page */
[data-tool~="ink"] .aai-viewport svg, [data-tool~="ink"] .aai-viewport svg * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 21l1.2-4.6L16.5 4.1a2 2 0 0 1 2.8 0l.6.6a2 2 0 0 1 0 2.8L7.6 19.8z' fill='%231d2240' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M3 21l1.2-4.6 3.4 3.4z' fill='%23f5761a' stroke='%23fff' stroke-width='.8' stroke-linejoin='round'/%3E%3C/svg%3E") 3 21, crosshair !important; }
/* Enhance one text: a frame round every word; the chosen ones glow orange */
.aai-enh-mark { fill: rgba(232, 100, 28, .05); stroke: rgba(232, 100, 28, .55); stroke-width: 1; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.aai-enh-mark.is-on { fill: rgba(232, 100, 28, .16); stroke: #e8641c; stroke-width: 2; stroke-dasharray: none; }

/* Profile: first and last name are fixed once given; a change is requested from the team */
.aai-name-lock { margin: 4px 0 16px; padding: 12px 14px; border: 1px solid #e3e8f2; border-radius: 12px; background: #f7f9fd; }
.aai-name-lock p { margin: 0 0 8px; font-size: 13px; color: #44506a; }
.aai-name-pending { padding: 8px 10px; border-radius: 8px; background: #fff4e8; color: #8a4a0b !important; }
.aai-name-form { margin-top: 10px; }
.aai-name-form textarea { width: 100%; box-sizing: border-box; border: 1px solid #d6dce8; border-radius: 10px; padding: 8px 10px; font: inherit; resize: vertical; }
.aai-name-note { margin: 2px 0 14px; }
.aai-account-page input:disabled { background: #f1f3f8; color: #6b7690; cursor: not-allowed; }

/* Folder rows: six dots on the left to slide a folder up or down (works with touch and Apple Pencil) */
.aai-dash-side .aai-folder-row .aai-folder-grip, .aai-dash-side .aai-folder-row:hover .aai-folder-grip, .aai-dash-side .aai-folder-row:focus-within .aai-folder-grip { display: block !important; position: static; flex: 0 0 auto; width: 10px; height: 16px; margin: 0 0 0 4px; transform: none; opacity: .35; pointer-events: auto; cursor: grab; touch-action: none; background-image: radial-gradient(circle, currentColor 1.2px, transparent 1.6px); background-size: 5px 5.4px; }
.aai-dash-side .aai-folder-row:hover .aai-folder-grip { opacity: .75; }
.aai-dash-side .aai-folder-row.is-dragging { background: #eef4ff; box-shadow: 0 6px 18px rgba(11, 35, 80, .16); position: relative; z-index: 2; }
.aai-dash-side .aai-folder-row.is-dragging .aai-folder-grip { cursor: grabbing; opacity: 1; }
@media (pointer: coarse) { .aai-dash-side .aai-folder-row .aai-folder-grip { width: 16px; height: 24px; opacity: .55; background-size: 6px 6.6px; } }
.aai-fhead-acts button.is-pin svg { width: 14px; height: 14px; }

/* Poster logo boxes: drag anywhere, corner to resize, tap an empty one to upload */
.ps-hit.is-flogo { cursor: move; touch-action: none; box-shadow: 0 0 0 1.5px rgba(232, 100, 28, .55); }
.ps-hit.is-flogo.is-on { box-shadow: 0 0 0 2px #e8641c; }
.ps-lgrz { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #e8641c; cursor: nwse-resize; touch-action: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
@media (pointer: coarse) { .ps-lgrz { width: 22px; height: 22px; right: -11px; bottom: -11px; } }

/* Poster free objects: eight resize handles and a turn knob */
.ps-hit.is-flogo .ps-lgrz { position: absolute; right: auto; bottom: auto; width: 12px; height: 12px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; border: 2px solid #e8641c; touch-action: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); z-index: 2; }
.ps-hit.is-flogo .ps-lgrz.is-n, .ps-hit.is-flogo .ps-lgrz.is-s, .ps-hit.is-flogo .ps-lgrz.is-e, .ps-hit.is-flogo .ps-lgrz.is-w { border-radius: 3px; }
.ps-lgrz.is-nw { left: 0; top: 0; cursor: nwse-resize; } .ps-lgrz.is-n { left: 50%; top: 0; cursor: ns-resize; } .ps-lgrz.is-ne { left: 100%; top: 0; cursor: nesw-resize; } .ps-lgrz.is-e { left: 100%; top: 50%; cursor: ew-resize; }
.ps-lgrz.is-se { left: 100%; top: 100%; cursor: nwse-resize; } .ps-lgrz.is-s { left: 50%; top: 100%; cursor: ns-resize; } .ps-lgrz.is-sw { left: 0; top: 100%; cursor: nesw-resize; } .ps-lgrz.is-w { left: 0; top: 50%; cursor: ew-resize; }
.ps-lgrot { position: absolute; left: 50%; top: -30px; width: 14px; height: 14px; transform: translateX(-50%); border-radius: 50%; background: #e8641c; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); cursor: grab; touch-action: none; z-index: 2; }
.ps-lgrot::after { content: ""; position: absolute; left: 50%; top: 12px; width: 2px; height: 14px; background: #e8641c; transform: translateX(-50%); }
@media (pointer: coarse) { .ps-hit.is-flogo .ps-lgrz { width: 20px; height: 20px; right: auto; bottom: auto; } .ps-lgrot { width: 22px; height: 22px; top: -40px; } }

/* Profile Save button: calm and clear — grey when there is nothing to save, orange when there is, "Saving…" then a green tick */
.aai-psave::after { display: none !important; }
.aai-psave:hover { transform: none !important; }
.aai-psave:disabled { background: #e6eaf2 !important; color: #7a86a0 !important; box-shadow: none !important; cursor: default; }
.aai-psave.is-busy:disabled { background: #f7a25c !important; color: #fff !important; cursor: progress; }
.aai-psave.is-saved, .aai-psave.is-saved:disabled { background: #1f9d55 !important; color: #fff !important; }

/* Active buttons in the style and paint bars stay visible (the frosted button background above must not cover them) */
.aai-stylebar .aai-sb-btn.is-on { background-color: #e2ecff; color: #2f7bc4; }
.aai-stylebar .aai-pb-tool.is-on, .aai-paintbar .aai-pb-tool.is-on { background: linear-gradient(135deg, #2f7bc4, #4a8fd2); color: #fff; box-shadow: 0 6px 14px -8px rgba(47, 123, 196, .9); }
/* "Erase & repair" is longer than a rail button: two short lines instead of a clipped one */
.aai-tools .aai-tb[data-act="erasemenu"] span { white-space: normal; max-width: 58px; line-height: 1.08; text-align: center; }

/* poster typing box: solid, so the words under it never show through twice */
.aai-poster .ps-edit, .studio-page .aai .aai-poster textarea.ps-edit, .studio-page .aai .aai-poster textarea.ps-edit:focus { background: #fff !important; background-color: #fff !important; }

/* Icon harvest, the learning robot and Memory illustrations were removed on 2026-10-29. */

/* ==== STUDIO-THEME:START — the site's "Aurora lab" colours in the studio (owner, 2026-10-27) ==== */
.aai, .aai-modal {
	--a-aqua: #22bfd6; --a-aqua-2: #7fe3ef; --a-lilac: #9fa8ff; --a-soft: #eef6fd; --a-paper: #f2f8fe;
	--a-grad: radial-gradient(circle at 100% 0, rgba(127, 227, 239, .45), transparent 50%), radial-gradient(circle at 0 100%, rgba(159, 168, 255, .35), transparent 55%), linear-gradient(145deg, #4a8fd2, #3d84ca 60%, #2f7bc4);
	--a-grad-deep: radial-gradient(circle at 90% 0, rgba(127, 227, 239, .35), transparent 45%), radial-gradient(circle at 0 100%, rgba(159, 168, 255, .3), transparent 50%), linear-gradient(170deg, #2a6db0, #2f7bc4 55%, #3d84ca);
}
.aai-dash-side::after { background: radial-gradient(circle, rgba(127, 227, 239, .35), transparent 70%); }
.aai :focus-visible { outline-color: #22bfd6; }
.aai ::selection { background: rgba(34, 191, 214, .25); }
/* ==== STUDIO-THEME:END ==== */
/* white figure previews */
.aai-file-thumb { background: #fff !important; }
/* ==== SOFT-PRO:START (owner 2026-10-28: calm, light, professional — white surfaces, thin borders, small radii, one pastel band) ==== */
.aai { --sp-ink: #1f2a37; --sp-tx: #4b5563; --sp-mut: #6b7280; --sp-line: #e3e8ef; --sp-bg: #f7f8fa; --sp-blue: #2f7bc4; --sp-soft: #eaf2fb; }
/* sidebar: white, thin border, quiet items */
.aai .aai-dash-side { background: #fff !important; color: var(--sp-ink) !important; border-right: 1px solid var(--sp-line) !important; box-shadow: none !important; padding: 18px 14px !important; }
.aai .aai-dash-side::before, .aai .aai-dash-side::after { display: none !important; }
.aai .aai-create { min-height: 42px !important; border-radius: 8px !important; font-size: 15px !important; box-shadow: none !important; }
.aai .aai-side-sub { color: var(--sp-mut) !important; font-size: 11.5px !important; letter-spacing: .08em !important; }
.aai .aai-side-nav button, .aai .aai-side-graphs { padding: 8px 10px !important; border-radius: 8px !important; font-size: 14.5px !important; font-weight: 500 !important; color: var(--sp-ink) !important; background: none !important; box-shadow: none !important; transform: none !important; }
.aai .aai-side-nav button:hover, .aai .aai-side-graphs:hover { background: var(--sp-bg) !important; }
.aai .aai-side-nav button.is-on, .aai .aai-side-graphs.is-on { background: var(--sp-soft) !important; color: var(--sp-blue) !important; font-weight: 600 !important; }
.aai .aai-side-nav button em, .aai .aai-side-graphs .aai-sg-n { background: var(--sp-bg) !important; color: var(--sp-mut) !important; }
.aai .aai-side-add { border-radius: 8px !important; color: var(--sp-blue) !important; border-color: var(--sp-line) !important; }
.aai .aai-dash-main { background: #fff !important; }
/* home: one soft pastel band with compact cards */
.aai .aai-dash-hero:has(.aai-home2) { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.aai-home2 { margin: 0 0 8px; padding: 34px 28px 30px; border-radius: 12px; background: linear-gradient(120deg, #dfeefc 0%, #eaf3fb 45%, #e3f5ef 100%); text-align: center; }
.aai-home2 h2 { margin: 0 0 22px; font: 600 clamp(22px, 2.2vw, 28px)/1.25 Roboto, sans-serif; color: var(--sp-ink); letter-spacing: -.01em; background: none; -webkit-text-fill-color: currentColor; }
.aai-h2-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; max-width: 1180px; margin: 0 auto; text-align: left; }
.aai-h2-card { display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; row-gap: 4px; align-items: center; padding: 14px 14px 16px !important; border: 1px solid #e6ebf2 !important; border-radius: 10px !important; background: #fff !important; cursor: pointer; box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important; transition: border-color .15s, box-shadow .15s; }
.aai-h2-card:hover { border-color: color-mix(in srgb, var(--acc) 45%, #e6ebf2) !important; box-shadow: 0 4px 14px -6px rgba(16, 24, 40, .14) !important; }
.aai-h2-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; color: #fff; background: var(--acc); }
.aai-h2-card b { font: 600 15px Roboto, sans-serif; color: var(--sp-ink); }
.aai-h2-card b em { margin-left: 4px; padding: 1px 6px; border-radius: 4px; font: 700 10.5px Roboto, sans-serif; font-style: normal; color: #0e7a5a; background: #dcf5ea; vertical-align: 2px; }
.aai-h2-card small { grid-column: 1 / -1; color: var(--sp-tx); font-size: 13px; line-height: 1.4; }
.aai .aai-home2 + .aai-hero-more { margin: 10px 0 4px !important; justify-content: center; }
/* file grid: thin outlined cards */
.aai .aai-files-head h3 { font: 600 18px Roboto, sans-serif !important; color: var(--sp-ink) !important; }
.aai .aai-file { border-radius: 10px !important; box-shadow: 0 0 0 1px #e3e8ef !important; transition: box-shadow .15s !important; transform: none !important; }
.aai .aai-file:hover { box-shadow: 0 0 0 1px #c9d6e6, 0 6px 18px -10px rgba(16, 24, 40, .25) !important; }
.aai .aai-file-thumb { background: #fff !important; border-bottom: 1px solid #eef1f5; }
.aai .aai-file-meta b { font: 600 14.5px Roboto, sans-serif !important; color: var(--sp-ink) !important; }
.aai .aai-file-meta span { font-size: 12.5px !important; color: var(--sp-mut) !important; }
.aai .aai-search, .aai [data-sort], .aai .aai-seg { border-radius: 8px !important; box-shadow: none !important; border: 1px solid var(--sp-line) !important; background: #fff !important; }
/* Describe */
.aai .aai-brief .aai-compose { border-radius: 12px !important; box-shadow: none !important; border: 1px solid var(--sp-line) !important; }
.aai .aai-brief .aai-compose:focus-within { border-color: var(--sp-blue) !important; box-shadow: 0 0 0 3px rgba(47, 123, 196, .12) !important; }
.aai .aai-brief .aai-compose-foot { background: var(--sp-bg) !important; border-top: 1px solid var(--sp-line) !important; }
.aai .aai-brief .aai-brief-side { border-radius: 12px !important; background: #fff !important; box-shadow: none !important; border: 1px solid var(--sp-line) !important; }
.aai .aai-brief .aai-gen-card { border-radius: 10px !important; box-shadow: none !important; border: 1px solid var(--sp-line) !important; background: var(--sp-bg) !important; }
.aai .aai-brief .aai-go { border-radius: 8px !important; box-shadow: none !important; }
.aai .aai-brief .aai-panel-head h2 { font: 600 26px Roboto, sans-serif !important; color: var(--sp-ink) !important; }
.aai .aai-field input, .aai .aai-field select { border-radius: 8px !important; border-color: var(--sp-line) !important; }
/* flat buttons everywhere in the studio */
.aai .aai-btn { border-radius: 8px !important; }
.aai .aai-btn-primary { box-shadow: none !important; }
/* editor: white top bar like a desktop app */
body.studio-page .aai .aai-editor .aai-ed-top { background: #fff !important; border-bottom: 1px solid var(--sp-line, #e3e8ef) !important; box-shadow: none !important; }
body.studio-page .aai .aai-editor .aai-ed-top .aai-icon-btn { color: #374151 !important; background: none !important; box-shadow: none !important; border-radius: 8px !important; transform: none !important; }
body.studio-page .aai .aai-editor .aai-ed-top .aai-icon-btn:hover { background: #f3f5f8 !important; }
body.studio-page .aai .aai-editor .aai-ed-title { background: none !important; color: #1f2a37 !important; font-weight: 600 !important; box-shadow: none !important; border: 1px solid transparent !important; border-radius: 8px !important; }
body.studio-page .aai .aai-editor .aai-ed-title:hover, body.studio-page .aai .aai-editor .aai-ed-title:focus { border-color: #e3e8ef !important; box-shadow: none !important; }
body.studio-page .aai .aai-editor .aai-ed-gen { background: #f3f5f8 !important; color: #4b5563 !important; border-radius: 6px !important; }
body.studio-page .aai .aai-editor .aai-ed-status { color: #6b7280 !important; }
body.studio-page .aai .aai-editor .aai-zoom { background: #f3f5f8 !important; box-shadow: none !important; color: #374151 !important; border-radius: 8px !important; }
body.studio-page .aai .aai-editor .aai-zoom button { color: #374151 !important; }
body.studio-page .aai .aai-editor .aai-ed-export { border-radius: 8px !important; box-shadow: none !important; background: #e8641c !important; }
body.studio-page .aai .aai-editor .aai-ed-report { border-radius: 8px !important; box-shadow: none !important; border: 1px solid #e3e8ef !important; }
body.studio-page .aai .aai-editor .aai-tools { margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; border-right: 1px solid #e3e8ef !important; background: #fff !important; }
body.studio-page .aai .aai-editor .aai-tools .aai-tb { border-radius: 8px !important; color: #374151 !important; transform: none !important; }
body.studio-page .aai .aai-editor .aai-tools .aai-tb:hover { background: #f3f5f8 !important; }
body.studio-page .aai .aai-editor .aai-tools .aai-tb.is-on { background: #eaf2fb !important; color: #2f7bc4 !important; box-shadow: none !important; }
body.studio-page .aai .aai-editor .aai-stagewrap { background: #f3f5f8 !important; }
body.studio-page .aai .aai-editor .aai-side { margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; border-left: 1px solid #e3e8ef !important; }
body.studio-page .aai .aai-editor .aai-side .aai-tabs { margin: 8px !important; border-radius: 8px !important; background: #f3f5f8 !important; }
body.studio-page .aai .aai-editor .aai-side .aai-tabs button.is-on { box-shadow: 0 1px 2px rgba(16, 24, 40, .08) !important; }
body.studio-page .aai .aai-editor .aai-hint { background: #1f2a37 !important; border-radius: 8px !important; box-shadow: none !important; }
/* pop-ups: white, thin border, quiet */
.aai-modal { background: rgba(17, 24, 39, .35) !important; backdrop-filter: blur(2px) !important; }
.aai-modal-card, .aai-dlg .aai-dlg-card { border-radius: 12px !important; border: 1px solid #e3e8ef !important; box-shadow: 0 20px 50px -20px rgba(16, 24, 40, .35) !important; }
.aai-modal-card::before, .aai-dlg .aai-dlg-card::before { display: none !important; }
.aai-dlg-ico { border-radius: 8px !important; color: #2f7bc4 !important; background: #eaf2fb !important; box-shadow: none !important; }
.aai-dlg.is-danger .aai-dlg-ico { color: #dc2626 !important; background: #fdecec !important; }
.aai-dlg-card h3 { font: 600 18px Roboto, sans-serif !important; color: #1f2a37 !important; }
.aai-dlg .aai-btn { border-radius: 8px !important; min-height: 38px !important; box-shadow: none !important; transform: none !important; }
.aai-dlg [data-dlg="1"] { background: #2f7bc4 !important; }
.aai-dlg.is-danger [data-dlg="1"] { background: #dc2626 !important; }
.aai-dlg [data-dlg="0"] { background: #fff !important; color: #374151 !important; border: 1px solid #d1d9e3 !important; }
.aai-dlg-in { border-radius: 8px !important; border-color: #d1d9e3 !important; background: #fff !important; }
.aai-dlg-in:focus { border-color: #2f7bc4 !important; box-shadow: 0 0 0 3px rgba(47, 123, 196, .14) !important; }
.aai-pop { border-radius: 10px !important; border: 1px solid #e3e8ef !important; box-shadow: 0 12px 30px -14px rgba(16, 24, 40, .3) !important; }
.aai-h2-card { text-align: left !important; justify-items: start; align-content: start; }
.aai .aai-dash-side .aai-ftag, .aai .aai-side-graphs .aai-ftag, .aai .aai-dash-side em.is-new { padding: 1px 6px !important; border-radius: 4px !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .02em !important; color: #c2410c !important; background: #fdeee5 !important; box-shadow: none !important; animation: none !important; border: 0 !important; }
.aai .aai-dash-side .aai-ftag.is-beta { color: #4b5563 !important; background: #f3f5f8 !important; }
.aai .aai-side-graphs > em { padding: 1px 6px !important; border-radius: 4px !important; font-size: 10px !important; font-weight: 700 !important; color: #c2410c !important; background: #fdeee5 !important; box-shadow: none !important; animation: none !important; border: 0 !important; }
.aai .aai-side-graphs > em::before, .aai .aai-side-graphs > em::after { display: none !important; }
body.studio-page .aai .aai-editor .aai-ed-orig { color: #374151 !important; background: #fff !important; border: 1px solid #e3e8ef !important; border-radius: 8px !important; box-shadow: none !important; }
body.studio-page .aai .aai-editor .aai-ed-orig svg { color: #374151 !important; }
body.studio-page .aai .aai-editor .aai-ed-top .aai-flow li { color: #4b5563 !important; }
body.studio-page .aai .aai-editor .aai-ed-top .aai-flow li.is-done { color: #2f7bc4 !important; }
body.studio-page .aai .aai-editor .aai-ed-top .aai-flow li.is-on { color: #1f2a37 !important; font-weight: 600 !important; }
body.studio-page .aai .aai-editor .aai-ed-top .aai-flow li::before, body.studio-page .aai .aai-editor .aai-ed-top .aai-flow li > b, body.studio-page .aai .aai-editor .aai-ed-top .aai-flow li > i { color: #fff !important; background: #2f7bc4 !important; border-color: #2f7bc4 !important; }
body.studio-page .aai .aai-editor .aai-ed-top .aai-flow li.is-on::before, body.studio-page .aai .aai-editor .aai-ed-top .aai-flow li.is-on > b, body.studio-page .aai .aai-editor .aai-ed-top .aai-flow li.is-on > i { background: #e8641c !important; border-color: #e8641c !important; }
body.studio-page .aai .aai-editor .aai-ed-top .aai-flow .aai-flow-line { background: #e3e8ef !important; }
body.studio-page .aai .aai-editor .aai-hint, body.studio-page .aai .aai-editor .aai-hint * { color: #fff !important; }
body.studio-page .aai .aai-flowbar { position: sticky; top: var(--sa-head, 74px); z-index: 30; background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); border-bottom: 1px solid #e3e8ef; }
body.studio-page:has(.site-header.is-hidden) .aai .aai-flowbar { top: 0; }
body.studio-page .aai .aai-flow-back { display: inline-flex !important; align-items: center; gap: 6px; padding: 7px 14px !important; border: 1px solid #d1d9e3 !important; border-radius: 8px !important; background: #fff !important; color: #1f2a37 !important; font-weight: 600 !important; box-shadow: none !important; }
body.studio-page .aai .aai-flow-back:hover { background: #f3f5f8 !important; }
/* ==== SOFT-PRO:END ==== */
/* ==== SOFT-PRO-2:START (owner 2026-10-28: every generator/tool intro, opening, colour schemes, download — light and professional) ==== */
/* selected sidebar item: readable */
.aai .aai-dash-side .is-on, .aai .aai-dash-side .is-on span, .aai .aai-dash-side .is-on b { color: #2f7bc4 !important; }
.aai .aai-dash-side .aai-folder-row button.is-on { background: #eaf2fb !important; box-shadow: inset 3px 0 0 #2f7bc4 !important; }
/* generator and tool intros: one light band, no mock-ups */
.aai .aai-dash-hero:has(.aai-gen-intro) { padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.aai .aai-gen-intro { display: block !important; padding: 30px 32px !important; border-radius: 12px !important; background: linear-gradient(120deg, #dfeefc 0%, #eef4fb 50%, #e3f5ef 100%) !important; box-shadow: none !important; border: 0 !important; min-height: 0 !important; }
.aai .aai-gen-intro::before, .aai .aai-gen-intro::after { display: none !important; }
.aai .aai-gen-intro .aai-gi-art { display: none !important; }
.aai .aai-gi-copy { max-width: 980px !important; padding: 0 !important; }
.aai .aai-gen-intro .aai-eyebrow { color: #2f7bc4 !important; font-size: 12px !important; letter-spacing: .1em !important; }
.aai .aai-gen-intro .aai-eyebrow::before { display: none !important; }
.aai .aai-gen-intro h2 { margin: 6px 0 6px !important; font: 600 clamp(22px, 2.2vw, 28px)/1.2 Roboto, sans-serif !important; color: #1f2a37 !important; background: none !important; -webkit-text-fill-color: currentColor !important; letter-spacing: -.01em !important; }
.aai .aai-gi-lead { color: #4b5563 !important; font-size: 15.5px !important; margin: 0 0 18px !important; }
.aai .aai-gi-steps { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px !important; margin: 0 0 20px !important; padding: 0 !important; }
.aai .aai-gi-steps li { display: flex !important; gap: 10px !important; align-items: flex-start; padding: 12px 14px !important; border-radius: 10px !important; background: #fff !important; border: 1px solid #e3e8ef !important; box-shadow: none !important; }
.aai .aai-gi-steps li b { flex: none; display: grid; place-items: center; width: 26px !important; height: 26px !important; border-radius: 7px !important; background: #eaf2fb !important; color: #2f7bc4 !important; font-size: 13px !important; box-shadow: none !important; }
.aai .aai-gi-steps li em { display: block; font-style: normal; font-weight: 600; color: #1f2a37 !important; font-size: 14.5px; }
.aai .aai-gi-steps li span { color: #6b7280 !important; font-size: 13px !important; line-height: 1.4; }
.aai .aai-gi-actions .aai-btn { border-radius: 8px !important; box-shadow: none !important; }
/* opening a figure: a quiet card, no glows */
body.studio-page .aai-opening .aai-op-halo, body.studio-page .aai-opening .aai-op-ring, body.studio-page .aai-opening .aai-op-sparks, body.studio-page .aai-opening .aai-op-sheen, body.studio-page .aai-opening::before, body.studio-page .aai-opening::after { display: none !important; }
body.studio-page .aai-opening .aai-op-stage { background: #fff !important; border: 1px solid #e3e8ef !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important; border-radius: 14px !important; backdrop-filter: none !important; }
body.studio-page .aai-opening .aai-op-stage * { filter: none !important; }
body.studio-page .aai-opening .aai-op-kind { background: #fff !important; border: 1px solid #e3e8ef !important; box-shadow: none !important; color: #374151 !important; font-weight: 600 !important; letter-spacing: .08em !important; }
body.studio-page .aai-opening .aai-op-kind::after { display: none !important; }
body.studio-page .aai-opening .aai-ft .ft-chips span { box-shadow: none !important; }
/* colour schemes: a clear grid of swatch cards */
.aai .aai-scheme-btn { border-radius: 8px !important; border: 1px solid #d1d9e3 !important; background: #fff !important; box-shadow: none !important; }
.aai .aai-scheme-btn:hover { border-color: #2f7bc4 !important; }
.aai .aai-scheme-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; padding: 10px !important; border-radius: 12px !important; border: 1px solid #e3e8ef !important; background: #fff !important; box-shadow: 0 16px 40px -18px rgba(16, 24, 40, .3) !important; max-height: 380px; overflow: auto; }
.aai .aai-scheme-list[hidden] { display: none !important; }
.aai .aai-scheme-sep { grid-column: 1 / -1; margin: 4px 2px 0 !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; color: #6b7280 !important; }
.aai .aai-scheme-opt { display: grid !important; gap: 6px !important; padding: 8px !important; border-radius: 8px !important; border: 1px solid #e3e8ef !important; background: #fff !important; text-align: left; }
.aai .aai-scheme-opt:first-child { grid-column: 1 / -1; }
.aai .aai-scheme-opt:hover { border-color: #b9cbe0 !important; background: #f8fafc !important; }
.aai .aai-scheme-opt.is-on { border-color: #2f7bc4 !important; box-shadow: 0 0 0 2px rgba(47, 123, 196, .18) !important; }
.aai .aai-scheme-opt em { font-style: normal; font-size: 12.5px !important; font-weight: 500; color: #1f2a37 !important; }
/* download dialog */
.aai .ps-ex-card { border-radius: 14px !important; }
.aai .ps-ex-head { border-bottom: 1px solid #e3e8ef !important; }
.aai .ps-ex-prev, .aai .ps-ex-left { background: #f3f5f8 !important; border-radius: 10px !important; }
.aai .ps-ex-fmts label, .aai .ps-ex-fmts > * { border-radius: 8px !important; border: 1px solid #e3e8ef !important; box-shadow: none !important; background: #fff !important; }
.aai .ps-ex-fmts .is-on, .aai .ps-ex-fmts label:has(input:checked) { border-color: #2f7bc4 !important; background: #f4f8fd !important; box-shadow: 0 0 0 2px rgba(47, 123, 196, .15) !important; }
.aai .ax-q { border-radius: 8px !important; box-shadow: none !important; }
.aai .ps-ex-foot { border-top: 1px solid #e3e8ef !important; }
.aai .ps-ex-foot .aai-btn-primary, .aai .ps-dl { border-radius: 8px !important; box-shadow: none !important; }
/* ==== SOFT-PRO-2:END ==== */
/* ==== STUDIO-Z:START (owner-approved studio redesign 2026-10-28: calm blue + white, site look, software feel) ==== */
.aai { --z-ink: #0f2a4a; --z-tx: #4a5d7c; --z-mut: #7d8ea5; --z-line: #dce6f2; --z-blue: #2f7bc4; --z-soft: #e8f1fb; }
body.studio-page, body.studio-page .studio-shell .aai, .aai .aai-dash-main { background: #f2f8fe !important; }
.aai .aai-dash { background: #f2f8fe !important; }
/* side menu */
.aai .aai-dash-side { background: #fff !important; border-right: 1px solid var(--z-line) !important; padding: 16px 12px !important; }
.aai .aai-create { min-height: 42px !important; border-radius: 10px !important; background: linear-gradient(110deg, #e85d1a, #f0701f) !important; font-weight: 700 !important; }
.aai .aai-side-sub { margin: 14px 10px 4px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase; color: var(--z-mut) !important; }
.aai .aai-side-nav button, .aai .aai-side-graphs { padding: 7px 10px !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 500 !important; color: var(--z-ink) !important; }
.aai .aai-side-nav button:hover, .aai .aai-side-graphs:hover { background: #f4f8fd !important; }
.aai .aai-dash-side .is-on, .aai .aai-dash-side button.is-on { background: var(--z-soft) !important; color: var(--z-blue) !important; font-weight: 600 !important; box-shadow: none !important; }
.aai .aai-dash-side .is-on * { color: var(--z-blue) !important; }
/* home band */
.aai .aai-z-band { margin: 0 0 6px !important; padding: 28px 30px !important; border-radius: 16px !important; border: 1px solid #d6e5f6 !important; background: radial-gradient(70% 120% at 100% 0, rgba(127, 227, 239, .28), transparent 60%), linear-gradient(120deg, #e3effc, #f2f8fe 60%, #eaf6fb) !important; text-align: center !important; }
.aai .aai-z-eye { display: inline-block; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--z-blue); }
.aai .aai-z-band h2 { margin: 0 0 6px !important; font: 800 clamp(26px, 2.6vw, 34px)/1.12 Roboto, sans-serif !important; letter-spacing: -.025em !important; background: linear-gradient(100deg, #0f2a4a, #2f7bc4) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; }
.aai .aai-z-band > p { margin: 0 auto 20px !important; max-width: 620px; color: var(--z-tx) !important; font-size: 15.5px !important; }
.aai .aai-z-gens { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; text-align: left; }
.aai .aai-z-gen { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; row-gap: 3px; align-items: center; justify-items: start; padding: 16px !important; border-radius: 12px !important; background: #fff !important; border: 1px solid var(--z-line) !important; text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.aai .aai-z-gen:hover { border-color: color-mix(in srgb, var(--acc) 50%, #dce6f2) !important; box-shadow: 0 12px 26px -18px rgba(15, 42, 74, .45); transform: translateY(-2px); }
.aai .aai-z-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #fff; background: var(--acc); }
.aai .aai-z-ic svg { width: 20px; height: 20px; }
.aai .aai-z-gen b { font: 700 15.5px Roboto, sans-serif; color: var(--z-ink); }
.aai .aai-z-gen small { grid-column: 1 / -1; margin-top: 6px; color: var(--z-tx); font-size: 13px; line-height: 1.4; }
.aai .aai-z-go { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--acc); }
.aai .aai-z-go svg { width: 15px; height: 15px; }
.aai .aai-z-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; }
.aai .aai-z-tools > span { margin-right: 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--z-mut); }
.aai .aai-z-tools button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px !important; border-radius: 999px !important; background: #fff !important; border: 1px solid var(--z-line) !important; font: 600 13.5px Roboto, sans-serif; color: var(--z-ink) !important; cursor: pointer; }
.aai .aai-z-tools button svg { width: 15px; height: 15px; color: var(--acc); }
.aai .aai-z-tools button:hover { border-color: var(--acc) !important; }
.aai .aai-home2 + .aai-hero-more { display: flex; justify-content: center; gap: 10px; margin: 12px 0 0 !important; }
.aai .aai-hero-more > * { border-radius: 10px !important; box-shadow: none !important; }
/* figures */
.aai .aai-files-head h3 { font: 700 19px Roboto, sans-serif !important; color: var(--z-ink) !important; }
.aai .aai-file { border-radius: 12px !important; box-shadow: 0 0 0 1px var(--z-line) !important; background: #fff !important; padding: 8px 8px 0 !important; }
.aai .aai-file:hover { box-shadow: 0 0 0 1px #c7d8eb, 0 12px 26px -18px rgba(15, 42, 74, .45) !important; }
.aai .aai-file-thumb { border-radius: 8px !important; background: #fff !important; border: 1px solid #edf2f8 !important; }
.aai .aai-search, .aai [data-sort] { border-radius: 10px !important; border: 1px solid var(--z-line) !important; background: #fff !important; box-shadow: none !important; }
/* step bar */
body.studio-page .aai .aai-flowbar { background: rgba(242, 248, 254, .96) !important; border-bottom: 1px solid var(--z-line) !important; }
.aai .aai-dash:not(.is-making) .aai-flowbar { display: none !important; }
.aai .aai-dash:not(.is-making) .aai-dash-hero { margin-top: 18px !important; }
/* Describe (screen 2) */
.aai .aai-dash-hero.is-panel { background: none !important; border: 0 !important; box-shadow: none !important; padding: 18px 0 0 !important; }
.aai .aai-brief .aai-panel-head { margin-bottom: 14px !important; }
.aai .aai-brief .aai-panel-head .aai-eyebrow { color: var(--z-blue) !important; font-size: 12px !important; letter-spacing: .12em !important; }
.aai .aai-brief .aai-panel-head .aai-eyebrow::before { display: none !important; }
.aai .aai-brief .aai-panel-head h2 { margin: 4px 0 6px !important; font: 800 clamp(26px, 2.6vw, 34px)/1.12 Roboto, sans-serif !important; letter-spacing: -.025em !important; background: linear-gradient(100deg, #0f2a4a, #2f7bc4) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.aai .aai-z-sub { margin: 0; color: var(--z-tx); font-size: 15px; }
.aai .aai-brief-grid { display: grid !important; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr) !important; gap: 22px !important; align-items: start !important; }
.aai .aai-brief .aai-compose { border-radius: 14px !important; background: #fff !important; border: 1px solid var(--z-line) !important; box-shadow: none !important; overflow: hidden; }
.aai .aai-brief .aai-compose:focus-within { border-color: var(--z-blue) !important; box-shadow: 0 0 0 3px rgba(47, 123, 196, .12) !important; }
.aai .aai-z-name { display: block; width: 100%; box-sizing: border-box; padding: 13px 18px !important; border: 0 !important; border-bottom: 1px solid #edf2f8 !important; border-radius: 0 !important; outline: 0; font: 600 15px Roboto, sans-serif !important; color: var(--z-ink); background: #fff !important; box-shadow: none !important; }
.aai .aai-brief .aai-compose textarea { min-height: 260px; padding: 16px 18px !important; font-size: 16px !important; line-height: 1.6 !important; border: 0 !important; box-shadow: none !important; }
.aai .aai-brief .aai-compose-foot { background: #f7fafd !important; border-top: 1px solid #edf2f8 !important; padding: 10px 14px !important; }
.aai .aai-brief .aai-chip { border-radius: 8px !important; background: #fff !important; border: 1px solid var(--z-line) !important; color: var(--z-blue) !important; box-shadow: none !important; }
.aai .aai-brief .aai-brief-side { position: sticky; top: 140px; padding: 18px !important; border-radius: 14px !important; background: #fff !important; border: 1px solid var(--z-line) !important; box-shadow: none !important; }
.aai .aai-z-get b { display: block; margin-bottom: 8px; font: 700 14px Roboto, sans-serif; color: var(--z-ink); }
.aai .aai-z-get ul { display: grid; gap: 7px; margin: 0 0 14px; padding: 0; list-style: none; }
.aai .aai-z-get li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--z-ink); }
.aai .aai-z-get li::before { content: "\2713"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #e3f6ee; color: #18a874; font-size: 11px; font-weight: 800; }
.aai .aai-brief .aai-field label { font: 700 13.5px Roboto, sans-serif !important; color: var(--z-ink) !important; }
.aai .aai-brief .aai-field select { border-radius: 10px !important; border: 1px solid var(--z-line) !important; background-color: #fff !important; box-shadow: none !important; }
.aai .aai-brief .aai-ai-note { border-radius: 10px !important; background: #f4f8fd !important; border: 0 !important; color: var(--z-tx) !important; }
.aai .aai-z-cta { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; margin-top: 14px !important; border-radius: 12px !important; background: linear-gradient(110deg, #e85d1a, #f0701f) !important; color: #fff !important; font-size: 16px !important; font-weight: 700 !important; box-shadow: none !important; }
@media (max-width: 980px) { .aai .aai-brief-grid { grid-template-columns: 1fr !important; } .aai .aai-brief .aai-brief-side { position: static; } }
/* Creating (screen 3): calm white card, thin borders, blue progress */
.aai .aai-gen-progress { padding: 22px !important; border-radius: 16px !important; background: #fff !important; border: 1px solid var(--z-line) !important; box-shadow: none !important; }
.aai .aai-gen-progress .aai-eyebrow { color: var(--z-blue) !important; }
.aai .aai-gen-progress .aai-eyebrow::before { display: none !important; }
.aai .aai-gen-progress h2, .aai .aai-gen-progress h3 { color: var(--z-ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
.aai .aai-gp-laptop { filter: none !important; }
.aai .aai-gp-laptop .dv-base { display: none !important; }
.aai .aai-gp-laptop .dv-screen, .aai .aai-lap-screen { border-radius: 12px !important; border: 1px solid var(--z-line) !important; box-shadow: none !important; background: #f2f8fe !important; padding: 8px !important; }
.aai .aai-track, .aai .aai-gp-bar { border-radius: 9px !important; background: #e6eef7 !important; box-shadow: none !important; }
.aai .aai-track > *, .aai .aai-gp-bar > * { border-radius: 9px !important; background: linear-gradient(90deg, #2f7bc4, #22bfd6) !important; box-shadow: none !important; }
.aai .aai-stagelist li { border-radius: 10px !important; box-shadow: 0 0 0 1px #edf2f8 !important; transform: none !important; }
.aai .aai-stagelist li.is-on { background: #f4f8fd !important; box-shadow: 0 0 0 1px #b9d3ef !important; }
.aai .aai-stagelist li.is-done i { background: #18a874 !important; }
.aai .aai-gp-tip { border-radius: 10px !important; background: #f4f8fd !important; border: 0 !important; box-shadow: none !important; color: var(--z-tx) !important; }
/* Editor (screen 4) */
body.studio-page .aai .aai-editor .aai-stagewrap { background: radial-gradient(rgba(47, 123, 196, .12) 1px, transparent 1.3px) 0 0 / 20px 20px, #f2f8fe !important; }
body.studio-page .aai .aai-editor .aai-ed-top, body.studio-page .aai .aai-editor .aai-tools, body.studio-page .aai .aai-editor .aai-side { border-color: #dce6f2 !important; }
body.studio-page .aai .aai-editor .aai-tools .aai-tb.is-on { background: #e8f1fb !important; color: #2f7bc4 !important; }
body.studio-page .aai .aai-editor .aai-ed-export { border-radius: 10px !important; background: linear-gradient(110deg, #e85d1a, #f0701f) !important; }
body.studio-page .aai .aai-editor .aai-hint { border-radius: 999px !important; background: #0f2a4a !important; }
/* Download (screen 5) */
.aai .aai-xdlg .ps-ex-fmts { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.aai .aai-xdlg .ps-ex-fmt { margin: 0 !important; border-radius: 10px !important; border: 1px solid #dce6f2 !important; box-shadow: none !important; background: #fff !important; }
.aai .aai-xdlg .ps-ex-fmt:has(input:checked) { border-color: #2f7bc4 !important; background: #f4f8fd !important; box-shadow: 0 0 0 3px rgba(47, 123, 196, .12) !important; }
.aai .aai-xdlg .ps-ex-fmt em { padding: 1px 6px !important; border-radius: 5px !important; background: #e3f6ee !important; color: #0e7a5a !important; font-size: 10.5px !important; box-shadow: none !important; }
.aai .aai-xdlg .ax-q { border-radius: 10px !important; border: 1px solid #dce6f2 !important; box-shadow: none !important; }
.aai .aai-xdlg .ax-q:has(input:checked), .aai .aai-xdlg .ax-q.is-on { border-color: #2f7bc4 !important; background: #f4f8fd !important; }
.aai .aai-xdlg .ps-ex-left, .aai .aai-xdlg .ps-ex-prev { background: #f2f8fe !important; border: 1px solid #dce6f2 !important; border-radius: 12px !important; }
.aai .aai-xdlg .ps-ex-foot { background: #f7fafd !important; border-top: 1px solid #edf2f8 !important; }
.aai .aai-xdlg .ps-ex-foot .aai-btn { border-radius: 10px !important; box-shadow: none !important; }
.aai .aai-xdlg .ps-ex-foot .aai-btn:not(.aai-btn-primary) { background: #fff !important; border: 1px solid #dce6f2 !important; }
/* Intros (screen 6) */
.aai .aai-gen-intro .aai-gs-copy, .aai .aai-gen-intro .aai-gi-copy { min-height: 0 !important; height: auto !important; }
.aai .aai-gen-intro .aai-gi-actions { margin-top: 0 !important; }
.aai .aai-gen-intro { border: 1px solid #d6e5f6 !important; border-radius: 16px !important; background: radial-gradient(70% 120% at 100% 0, rgba(127, 227, 239, .28), transparent 60%), linear-gradient(120deg, #e3effc, #f2f8fe 60%, #eaf6fb) !important; }
.aai .aai-gen-intro h2 { font: 800 clamp(26px, 2.6vw, 34px)/1.12 Roboto, sans-serif !important; letter-spacing: -.025em !important; background: linear-gradient(100deg, #0f2a4a, #2f7bc4) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.aai .aai-gen-intro .aai-gi-actions .aai-btn-primary { border-radius: 12px !important; background: linear-gradient(110deg, #e85d1a, #f0701f) !important; }
/* Picture & Poster intros: same light band and heading, own inner layout kept */
.aai .ps-intro { border: 1px solid #d6e5f6 !important; border-radius: 16px !important; background: radial-gradient(70% 120% at 100% 0, rgba(127, 227, 239, .28), transparent 60%), linear-gradient(120deg, #e3effc, #f2f8fe 60%, #eaf6fb) !important; box-shadow: none !important; }
.aai .ps-intro .aai-eyebrow { color: #2f7bc4 !important; }
.aai .ps-intro h2 { font: 800 clamp(26px, 2.6vw, 34px)/1.12 Roboto, sans-serif !important; letter-spacing: -.025em !important; background: linear-gradient(100deg, #0f2a4a, #2f7bc4) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.aai .ps-intro-txt > p { color: #4a5d7c !important; }
.aai .ps-intro .aai-btn-primary { border-radius: 12px !important; background: linear-gradient(110deg, #e85d1a, #f0701f) !important; box-shadow: none !important; }
/* side menu: cleaner, like the preview */
.aai .aai-dash-side .aai-folder-grip { opacity: 0 !important; transition: opacity .15s; }
.aai .aai-dash-side .aai-folder-row:hover .aai-folder-grip { opacity: .6 !important; }
.aai .aai-dash-side .aai-gen-dot { width: 10px !important; height: 10px !important; border-radius: 3px !important; box-shadow: none !important; }
.aai .aai-dash-side .aai-folder-row button > em, .aai .aai-dash-side [data-folder] > em { min-width: 22px; padding: 0 6px !important; border-radius: 6px !important; background: transparent !important; color: #7d8ea5 !important; font-weight: 600 !important; box-shadow: none !important; }
.aai .aai-dash-side .aai-side-graphs { min-height: 0 !important; gap: 10px !important; }
.aai .aai-dash-side .aai-side-graphs > span:first-child { transform: scale(.82); }
.aai .aai-dash-side .aai-side-tools { margin-top: 4px !important; padding-top: 0 !important; border: 0 !important; }
.aai .aai-dash-side .aai-side-add { border: 1px dashed #c7d8eb !important; border-radius: 10px !important; color: #2f7bc4 !important; background: transparent !important; }
.aai .aai-dash-side .aai-brand-foot { display: none !important; }
.aai .aai-gp-laptop::before, .aai .aai-gp-art .aai-show-mesh, .aai .aai-gp-art .aai-sc-orb { display: none !important; }
.aai .aai-gp-art .aai-lap-screen, .aai .aai-gp-art .dv-screen { background: #fff !important; }
/* fixes after owner review (2026-10-28) */
.aai .ps-intro { padding: 28px 30px !important; }
.aai .pi-intro { display: block !important; }
.aai .pi-intro > :not(.ps-intro-txt) { display: none !important; }
.aai .pi-intro .ps-intro-txt { max-width: 860px !important; }
.aai .ps-intro .ps-intro-acts { margin-top: 18px !important; }
.aai .aai-dash-side .aai-side-tools { margin: 6px 0 0 !important; padding: 0 !important; border: 0 !important; }
.aai .aai-dash-side .aai-side-graphs { display: flex !important; align-items: center; gap: 10px !important; width: 100%; padding: 7px 10px !important; min-height: 0 !important; margin: 0 !important; }
.aai .aai-dash-side .aai-side-graphs > span:first-child { flex: none; width: 20px !important; height: 20px !important; transform: none !important; }
.aai .aai-dash-side .aai-side-graphs > span:nth-child(2) { flex: 1; text-align: left; }
.aai .aai-dash-side .aai-side-sub { margin-top: 16px !important; }
.aai .aai-xdlg .ps-ex-left { align-self: start !important; }
.aai .aai-xdlg .ps-ex-prev { min-height: 0 !important; }
.aai .aai-xdlg .ps-link { display: inline-flex !important; align-items: center; margin-top: 10px !important; padding: 7px 12px !important; border-radius: 8px !important; border: 1px solid #dce6f2 !important; background: #fff !important; color: #2f7bc4 !important; font-weight: 600 !important; text-decoration: none !important; }
/* all studio buttons in calm blue (owner 2026-10-28) */
.aai .aai-btn-primary, .aai .aai-create, .aai .aai-z-cta, .aai .ps-intro .aai-btn-primary, .aai .aai-gen-intro .aai-gi-actions .aai-btn-primary, .aai .aai-xdlg .ps-ex-foot .aai-btn-primary, .aai .aai-xdlg .ps-dl, body.studio-page .aai .aai-editor .aai-ed-export, .aai .aai-dlg [data-dlg="1"], .aai-dlg [data-dlg="1"] { background: linear-gradient(110deg, #2b6fb3, #3a82c8) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 8px 18px -12px rgba(43, 111, 179, .8) !important; }
.aai .aai-btn-primary:hover, .aai .aai-create:hover, .aai .aai-z-cta:hover, body.studio-page .aai .aai-editor .aai-ed-export:hover { background: linear-gradient(110deg, #245f9c, #2f7bc4) !important; }
.aai-dlg.is-danger [data-dlg="1"] { background: #dc2626 !important; box-shadow: none !important; }
body.studio-page .aai .aai-editor .aai-tb.is-upload, body.studio-page .aai .aai-editor .aai-tb.is-icons { color: #2b6fb3 !important; border-color: #b9d3ef !important; background: #f4f8fd !important; box-shadow: none !important; }
.aai .aai-z-go { color: #2b6fb3 !important; }
.aai .aai-plan-card .aai-btn-primary { background: #fff !important; color: #1f568f !important; }
/* pop-ups in calm blue (owner 2026-10-28): soft blue head, blue icon, blue main button — also for delete */
.aai-modal { background: rgba(15, 42, 74, .38) !important; backdrop-filter: blur(4px) !important; }
.aai-dlg .aai-dlg-card, .aai-modal-card { border-radius: 16px !important; border: 1px solid #dce6f2 !important; background: linear-gradient(180deg, #e6f0fb 0, #f4f8fd 86px, #fff 150px) !important; box-shadow: 0 40px 80px -36px rgba(15, 42, 74, .55) !important; }
.aai-dlg .aai-dlg-card::before, .aai-modal-card::before { display: none !important; }
.aai-dlg-ico, .aai-dlg.is-danger .aai-dlg-ico { width: 46px !important; height: 46px !important; border-radius: 12px !important; color: #2b6fb3 !important; background: #fff !important; box-shadow: 0 0 0 1px #d3e3f4, 0 10px 20px -14px rgba(43, 111, 179, .7) !important; }
.aai-dlg-card h3 { color: #0f2a4a !important; font-weight: 800 !important; }
.aai-dlg-card p { color: #4a5d7c !important; }
.aai-dlg [data-dlg="1"], .aai-dlg.is-danger [data-dlg="1"] { border-radius: 10px !important; background: linear-gradient(110deg, #2b6fb3, #3a82c8) !important; color: #fff !important; box-shadow: 0 8px 18px -12px rgba(43, 111, 179, .8) !important; }
.aai-dlg [data-dlg="0"] { border-radius: 10px !important; background: #fff !important; color: #1f568f !important; border: 1px solid #c9dbee !important; }
.aai-dlg-in:focus { border-color: #2b6fb3 !important; box-shadow: 0 0 0 3px rgba(43, 111, 179, .15) !important; }
.aai .ps-dl, .aai button.ps-dl { background: linear-gradient(110deg, #2b6fb3, #3a82c8) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 8px 18px -12px rgba(43, 111, 179, .8) !important; }
.aai .aai-eyebrow::before { background: #2b6fb3 !important; }
.aai .ps-intro-pts li::before { background-color: #2b6fb3 !important; }
.aai .aai-file-actions button:hover, .aai .aai-file-actions button:focus-visible, .aai .aai-file-actions button.is-danger:hover, .aai .aai-file-actions [data-fa="delete"]:hover { background: linear-gradient(110deg, #2b6fb3, #3a82c8) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 8px 16px -10px rgba(43, 111, 179, .8) !important; }
.aai .aai-file-actions button:hover svg { color: #fff !important; stroke: currentColor; }
/* every remaining orange button state in the studio -> calm blue (auto-collected) */
body.studio-page .aai .aai-gen-intro .aai-gi-actions .aai-btn-primary,
body.studio-page .aai .ps-intro .aai-btn-primary,
body.studio-page .aai-acc-tabs button.is-on,
body.studio-page .aai-btn-accent,
body.studio-page .aai-btn-accent:hover,
body.studio-page .aai-btn-primary,
body.studio-page .aai-btn-primary:hover,
body.studio-page .aai-cht-foot .aai-btn,
body.studio-page .aai-dlg .aai-btn-primary,
body.studio-page .aai-dlg .aai-btn-primary:hover,
body.studio-page .aai-ed-home:hover,
body.studio-page .aai-ed-orig:hover,
body.studio-page .aai-ed-report:hover,
body.studio-page .aai-ed-top .aai-flow.is-compact li.is-on b,
body.studio-page .aai-editor .aai-ed-body .aai-tools.is-big .aai-tb.aai-tb-logokit,
body.studio-page .aai-editor .aai-ed-body .aai-tools.is-big .aai-tb.aai-tb-logokit:hover,
body.studio-page .aai-editor .aai-ed-body .aai-tools.is-big .aai-tb.is-upload,
body.studio-page .aai-editor .aai-ed-body .aai-tools.is-big .aai-tb.is-upload:hover,
body.studio-page .aai-editor .aai-side .aai-side-x:hover,
body.studio-page .aai-enh-cmp.is-on,
body.studio-page .aai-file-actions button.is-danger:hover,
body.studio-page .aai-file-actions button:focus-visible,
body.studio-page .aai-file-actions button:hover,
body.studio-page .aai-file-more:hover,
body.studio-page .aai-flow li.is-on b,
body.studio-page .aai-folder-row:has(> button.is-on) > button:first-child,
body.studio-page .aai-mini-btn.is-warn,
body.studio-page .aai-ob-order button:hover b,
body.studio-page .aai-read-list li.is-wrong button,
body.studio-page .aai-reveal-skip:hover,
body.studio-page .aai-rv-result .aai-pbtns [data-apply-ops],
body.studio-page .aai-save,
body.studio-page .aai-side-add:hover,
body.studio-page .aai-size-pop button:focus-visible,
body.studio-page .aai-size-pop button:hover,
body.studio-page .aai-sv-x:hover,
body.studio-page .aai-tfly button:hover,
body.studio-page .aai-tools button[data-tool="fixtext"].is-on,
body.studio-page .aai-tools.is-big .aai-fixdock .aai-tb.aai-fd-b,
body.studio-page .aai-tools.is-big .aai-fixdock .aai-tb.aai-fd-b.is-on,
body.studio-page .aai-tools.is-big .aai-tb.aai-tb-graphs,
body.studio-page .aai-tools.is-big .aai-tb.aai-tb-graphs:hover,
body.studio-page .aai-tools.is-big .aai-tb.aai-tb-logokit,
body.studio-page .aai-tools.is-big .aai-tb.is-upload,
body.studio-page .aai-tools.is-big .aai-tb[data-tool="fixtext"].is-on,
body.studio-page .aai .aai-editor .aai-ed-top .aai-flow li.is-on > b,
body.studio-page .aai .aai-editor .aai-ed-top .aai-flow li.is-on > i,
body.studio-page .aai .aai-editor .aai-ed-top .aai-flow li.is-on::before { background: linear-gradient(110deg, #2b6fb3, #3a82c8) !important; border-color: #2b6fb3 !important; color: #fff !important; box-shadow: 0 8px 18px -12px rgba(43, 111, 179, .8) !important; }
/* ==== STUDIO-Z:END ==== */

/* ======================================================================
   NO DOT GRIDS (owner, 2026-10-28)
   The dotted canvas pattern is gone; the soft washes behind it stay.
   ====================================================================== */
.aai-viewport { background-image: none !important; }
.aai-board { background-image: none !important; }
body.studio-page .aai .aai-editor .aai-stagewrap { background: #f2f8fe !important; }
.studio-page .aai .aai-viewport {
	background-image: radial-gradient(120% 90% at 0% 0%, rgba(47, 122, 229, .10), transparent 55%), radial-gradient(90% 80% at 100% 100%, rgba(240, 112, 31, .08), transparent 55%), linear-gradient(180deg, #f4f8ff, #ecf3ff) !important;
	background-size: 100% 100%, 100% 100%, 100% 100% !important;
}
/* ===== END NO DOT GRIDS ===== */

/* ======================================================================
   ONE CALM BLUE FOR EVERY TAG (owner, 2026-10-28)
   New and Beta read the same everywhere: the sidebar, the generator cards,
   the toolbars and the pop-outs. The orange gradient and the grey sidebar
   tag are both replaced. These selectors have to outrank
   ".aai .aai-dash-side .aai-ftag", which carries !important at line ~3699.
   A count in a folder row is not a tag and is left alone.
   ====================================================================== */
html body .aai-ftag,
html body .aai-ftag.is-new,
html body .aai-ftag.is-beta,
html body .aai-ftag.is-afig,
html body .aai .aai-ftag,
html body .aai .aai-dash-side .aai-ftag,
html body .aai .aai-dash-side .aai-ftag.is-beta,
html body .aai .aai-dash-side em.is-new,
html body .aai .aai-side-graphs .aai-ftag,
html body .aai-side-graphs em,
html body .aai .aai-side-graphs > em,
html body .aai .aai-side-nav .aai-side-graphs > em,
html body .aai .aai-dash-side .aai-side-graphs > em,
html body .aai .aai-side-nav .aai-side-graphs.is-on > em,
html body .aai-tb > .aai-ftag.is-sm,
html body .aai-tb > .aai-ftag.is-sm.is-beta {
	background: #eaf1fb !important;
	background-image: none !important;
	color: #2f6db5 !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 4px !important;
	font: 700 10px/10px Roboto, Arial, sans-serif !important;
	letter-spacing: .8px !important;
	padding: 1px 6px !important;
	text-transform: uppercase !important;
}
/* Keep the little tag on a toolbar button pinned where it was. */
html body .aai-tb > .aai-ftag.is-sm,
html body .aai-tb > .aai-ftag.is-sm.is-beta {
	position: absolute !important;
	top: 2px !important;
	right: 2px !important;
	margin: 0 !important;
}
/* A count in a folder row is not a tag. */
html body .aai-folder-row > em,
html body .aai-folder-row button > em:not(.aai-ftag) {
	background: none !important;
	color: inherit !important;
	font: 600 13px/1.4 Roboto, Arial, sans-serif !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}
/* ===== END ONE CALM BLUE FOR EVERY TAG ===== */

/* ======================================================================
   iPad, first pass (owner, 2026-10-28)
   1. 100vh on iOS Safari means the TALLEST viewport, with the browser bars
      hidden. A full-screen editor set to 100vh therefore runs underneath
      them and its bottom row cannot be reached. 100svh is the small
      viewport - the one actually on screen. Guarded by @supports, so any
      browser without svh keeps the old rule.
   2. A long press on the canvas or a tool pops the iOS copy/look-up callout
      and interrupts the drag; -webkit-touch-callout turns that off on the
      editor chrome only, never on text the member needs to select.
   ====================================================================== */
@supports (height: 100svh) {
	.aai-editor.is-full, .aai-poster.is-full { height: 100svh; }
	.aai-modal-card { max-height: calc(100svh - 32px); }
	.aai-chartdlg .aai-chart-card { max-height: calc(100svh - 32px); }
	.aai-cht-pane { max-height: calc(100svh - 230px); }
	.aai-cht-prev svg { max-height: calc(100svh - 260px); }
	.rb-web { height: 100svh; }
}
.aai-tools, .aai-tools *,
.aai-stylebar, .aai-stylebar *,
.aai-cvbar, .aai-cvbar *,
.aai-paintfly, .aai-paintfly *,
.aai-fixdock, .aai-fixdock *,
.aai-tb, .aai-icon-btn, .aai-side-nav button,
.aai-stagewrap, .aai-viewport {
	-webkit-touch-callout: none;
}

/* A finger cannot hover. Controls that only appear on hover are out of reach
   on an iPad, so on a touch screen they are simply always there. Tooltips are
   left hidden on purpose - on touch they are noise, not help. */
@media (hover: none) {
	.aai-folder-row .aai-folder-more { opacity: 1; }
	.aai-gal-it .aai-gal-ib { opacity: 1; transform: none; }
	.aai-gal-f.is-mine .aai-gal-fx { opacity: 1; }
	.aai-cht-t button[data-sdel], .aai-cht-t button[data-rdel] { opacity: 1; }
	.aai-gs-strip button { opacity: 1; }
}
/* ===== END iPad, first pass ===== */


/* ── SELECT & MOVE ARMS ON ITS OWN BUTTON (owner, 2026-10-29) ───────────────
   Until Select & move is pressed the canvas leaves one-finger scrolling and
   pinch zoom to the browser; studio.js arms it from that button only. */
.aai .aai-editor[data-tool="select"]:not([data-armed="1"]) .aai-viewport,
.aai-editor[data-tool="select"]:not([data-armed="1"]) .aai-viewport { touch-action: manipulation !important; }

/* and the button says so while it holds the canvas */
.aai .aai-editor[data-armed="1"] button[data-tool="select"],
.aai-editor[data-armed="1"] button[data-tool="select"] { outline: 2px solid #2f6db5 !important; outline-offset: -2px !important; }

/* ── MINIMISE BUTTON REDRAWN IN THE CURRENT STUDIO THEME (owner, 2026-10-29) ──
   It was a warm orange gradient with a shimmer sweep, left from the old palette.
   It now matches the back pill beside it: white glass, royal-blue lettering, a
   soft blue icon tile and a calm hover, with no animation. */
.studio-page .aai .aai-gp-min, .aai .aai-gp-min, .aai-gp-min {
	background: rgba(255, 255, 255, .72) !important;
	color: var(--a-indigo, #1d2a55) !important;
	border-radius: 16px !important;
	box-shadow: inset 0 0 0 1.5px var(--a-line2, #dbe4f3), 0 14px 26px -18px rgba(16, 42, 100, .5) !important;
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	transition: box-shadow .25s ease, background-color .25s, transform .25s !important;
}
.studio-page .aai .aai-gp-min:hover, .aai .aai-gp-min:hover, .aai-gp-min:hover {
	background: rgba(255, 255, 255, .94) !important;
	box-shadow: inset 0 0 0 2px var(--a-royal, #2f6db5), 0 16px 30px -18px rgba(16, 42, 100, .55) !important;
	transform: translateY(-1px) !important;
}
.studio-page .aai .aai-gp-min svg, .aai-gp-min svg {
	background: var(--a-soft, #eaf1fb) !important;
	color: var(--a-royal, #2f6db5) !important;
	animation: none !important;
}
.studio-page .aai .aai-gp-min em, .aai-gp-min em { color: var(--a-indigo, #1d2a55) !important; opacity: .62 !important; }
.studio-page .aai .aai-gp-min::after, .aai-gp-min::after { display: none !important; }

/* ── THE PAGE BEHIND THE STUDIO (owner, 2026-10-29) ──
   The wash had two orange blooms and a warm cream corner, which showed as a
   peach wall around the white panel. It is now near-white with only a faint
   blue depth, so it blends with the studio itself. */
body.studio-page::before {
	background:
		radial-gradient(42vw 42vw at 6% 12%, rgba(47, 122, 229, .13), transparent 62%),
		radial-gradient(46vw 46vw at 90% 94%, rgba(43, 116, 189, .10), transparent 62%),
		linear-gradient(160deg, #f6faff, #f8fbfe 55%, #ffffff) !important;
}

/* ===== DELETED folder (2026-10-29): figures kept 7 days, restore or delete forever ===== */
.aai-files .aai-trash-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 4px; border-radius: 14px; background: #f2f8fe; border: 1px solid #d6e5f7; color: #24476f; }
.aai-files .aai-trash-note > svg { flex: 0 0 22px; width: 22px; height: 22px; fill: none; stroke: #2f7bc4; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aai-files .aai-trash-note div { flex: 1 1 auto; min-width: 0; }
.aai-files .aai-trash-note b { display: block; font-size: 14.5px; color: #0f2a4a; }
.aai-files .aai-trash-note p { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: #45577a; }
.aai-files .aai-trash-note [data-trash-empty] { flex: 0 0 auto; }
.aai-file.is-trash { cursor: default; }
.aai-file.is-trash .aai-file-thumb img { filter: grayscale(.35); opacity: .82; }
.aai-file.is-trash .aai-trash-left { position: absolute; left: 10px; top: 10px; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, .94); border: 1px solid #f3c9b3; color: #b4471a; font: 700 11.5px/1 var(--a-body, sans-serif); box-shadow: 0 4px 12px -6px rgba(11, 35, 80, .35); }
.aai-file.is-trash .aai-trash-acts { display: flex; gap: 8px; padding: 0 14px 14px; }
.aai-file.is-trash .aai-trash-acts .aai-btn { flex: 1 1 0; justify-content: center; }
.aai-file.is-trash .aai-trash-acts .is-danger { color: #b42318 !important; }
.aai-files.is-list .aai-file.is-trash .aai-trash-acts { padding: 0 10px; align-items: center; }
@media (max-width: 640px) { .aai-files .aai-trash-note { flex-wrap: wrap; } }

/* ===== STATISTICAL STUDIO (2026-10-29): calm blue, white cards, five steps ===== */
.sts-app { --sts-blue: #2f7bc4; --sts-ink: #0f2a4a; --sts-mut: #5d6b85; --sts-line: #e3e8f4; min-height: 100vh; background: #f4f8fd; font-family: var(--a-body, Roboto, Arial, sans-serif); color: var(--sts-ink); }
.sts-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--sts-line); flex-wrap: wrap; }
.sts-title { min-width: 160px; max-width: 280px; padding: 7px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; font: 700 16px var(--a-head, inherit); color: var(--sts-ink); }
.sts-title:hover, .sts-title:focus { border-color: var(--sts-line); background: #fff; outline: none; }
.sts-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #eaf8f2; color: #0f7a55; font: 700 12px var(--a-body, inherit); }
.sts-badge-ico { width: 12px; height: 12px; border-radius: 3px; background: linear-gradient(180deg, transparent 45%, #18a874 45%) left / 3px 100% no-repeat, linear-gradient(180deg, transparent 20%, #18a874 20%) center / 3px 100% no-repeat, linear-gradient(180deg, transparent 60%, #18a874 60%) right / 3px 100% no-repeat; }
.sts-status { font-size: 12px; color: var(--sts-mut); }
.sts-steps { display: flex; gap: 4px; margin: 0 auto; padding: 4px; border-radius: 999px; background: #eef3fa; }
.sts-steps button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--sts-mut); font: 600 13px var(--a-body, inherit); cursor: pointer; }
.sts-steps button i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid #d3deee; font: 700 11.5px/1 var(--a-body, inherit); font-style: normal; }
.sts-steps button.is-done i { background: #e6f1fb; border-color: #b9d4ef; color: var(--sts-blue); }
.sts-steps button.is-on { background: #fff; color: var(--sts-ink); box-shadow: 0 2px 8px -4px rgba(15, 42, 74, .35); }
.sts-steps button.is-on i { background: var(--sts-blue); border-color: var(--sts-blue); color: #fff; }
.sts-steps button:disabled { opacity: .45; cursor: not-allowed; }
.sts-sp { flex: 0 0 0; }
.sts-dl { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 0; border-radius: 10px; background: var(--sts-blue); color: #fff; font: 600 13.5px var(--a-body, inherit); cursor: pointer; }
.sts-dl:hover { background: #2568a8; }
.sts-main { padding: 26px 22px 60px; }
.sts-wrap { max-width: 1180px; margin: 0 auto; }
.sts-hd { margin-bottom: 18px; }
.sts-hd-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sts-eye { font: 700 11.5px var(--a-body, inherit); letter-spacing: .08em; text-transform: uppercase; color: var(--sts-blue); }
.sts-hd h2 { margin: 4px 0 6px; font: 800 26px/1.2 var(--a-head, inherit); color: var(--sts-ink); }
.sts-hd p { margin: 0; color: var(--sts-mut); font-size: 14.5px; }
.sts-foot { display: flex; justify-content: center; margin-top: 22px; }
.sts-foot-row { justify-content: flex-end; align-items: center; gap: 10px; }
.sts-foot-row > span:first-child, .sts-msg { margin-right: auto; }
.sts-msg { font-size: 13.5px; color: #b45309; } .sts-msg.is-ok { color: #0f7a55; }
.sts-go { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px !important; font-size: 15px !important; }
.sts-go:disabled { opacity: .45; cursor: not-allowed; }
/* set up */
.sts-setup { max-width: 920px; }
.sts-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sts-kind { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; border: 1.5px solid var(--sts-line); border-radius: 16px; background: #fff; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.sts-kind:hover { border-color: #b9d4ef; transform: translateY(-1px); }
.sts-kind.is-on { border-color: var(--sts-blue); box-shadow: 0 0 0 4px rgba(47, 123, 196, .12); }
.sts-kind-ic { width: 44px; height: 44px; padding: 8px; border-radius: 12px; background: #eef5fd; color: var(--sts-blue); }
.sts-kind-ic svg { width: 100%; height: 100%; }
.sts-kind b { font: 700 16px var(--a-head, inherit); color: var(--sts-ink); }
.sts-kind span:not(.sts-kind-ic) { font-size: 13.5px; color: #33415c; }
.sts-kind small { font-size: 12px; color: var(--sts-mut); }
.sts-qs { margin-top: 18px; padding: 8px 22px; border-radius: 16px; background: #fff; border: 1px solid var(--sts-line); }
.sts-q { display: grid; grid-template-columns: 260px 1fr; align-items: center; gap: 6px 18px; padding: 14px 0; border-bottom: 1px solid #eef2f8; }
.sts-q:last-child { border-bottom: 0; }
.sts-q > label { font: 600 14px var(--a-body, inherit); color: var(--sts-ink); }
.sts-q > em { grid-column: 2; font-style: normal; font-size: 12.5px; color: var(--sts-mut); }
.sts-q input:not([type]), .sts-q input[type="text"] { padding: 9px 11px; border: 1px solid #d6deec; border-radius: 9px; font: 14px var(--a-body, inherit); color: var(--sts-ink); background: #fff; }
.sts-two { display: grid; grid-template-columns: 1fr 160px; gap: 8px; }
.sts-names { display: flex; flex-wrap: wrap; gap: 8px; } .sts-names input { width: 150px; }
.sts-stepper { display: inline-flex; align-items: center; border: 1px solid #d6deec; border-radius: 10px; overflow: hidden; background: #fff; width: max-content; }
.sts-stepper button { width: 36px; height: 38px; border: 0; background: #f4f8fd; color: var(--sts-blue); font: 700 18px/1 var(--a-body, inherit); cursor: pointer; }
.sts-stepper button:hover { background: #e6f1fb; }
.sts-stepper input { width: 64px; height: 38px; border: 0 !important; border-radius: 0 !important; text-align: center; font: 700 15px var(--a-body, inherit) !important; }
.sts-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: #eef3fa; gap: 2px; flex-wrap: wrap; }
.sts-seg button { padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: #33415c; font: 600 13px var(--a-body, inherit); cursor: pointer; }
.sts-seg button.is-on { background: #fff; color: var(--sts-blue); box-shadow: 0 1px 4px rgba(15, 42, 74, .15); }
/* data */
.sts-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sts-tb { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--sts-line); border-radius: 9px; background: #fff; color: var(--sts-ink); font: 600 13px var(--a-body, inherit); cursor: pointer; }
.sts-tb svg { width: 16px; height: 16px; } .sts-tb:hover { border-color: #b9d4ef; background: #f7fbff; }
.sts-tb.is-blue { background: #e9f2fc; border-color: #c9ddf3; color: #1f5f9e; } .sts-tb.is-quiet { color: var(--sts-mut); }
.sts-tsep { width: 1px; height: 24px; background: var(--sts-line); margin: 0 4px; }
.sts-dgrid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
.sts-gridbox { max-height: 62vh; overflow: auto; border: 1px solid var(--sts-line); border-radius: 14px; background: #fff; }
.sts-grid { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 14px; }
.sts-grid th, .sts-grid td { border-bottom: 1px solid #eef2f8; border-right: 1px solid #eef2f8; padding: 0; }
.sts-grid thead th { position: sticky; top: 0; z-index: 2; background: #f7faff; padding: 8px 8px; }
.sts-grid tfoot td, .sts-grid tfoot th { position: sticky; bottom: 0; background: #f7faff; padding: 6px 10px; font-size: 12px; color: var(--sts-mut); }
.sts-grid tfoot td b { color: var(--sts-ink); margin-right: 6px; }
.sts-rh { width: 46px; min-width: 46px; text-align: center; color: #8a95ab; font: 600 12px var(--a-body, inherit); background: #fbfcfe; position: relative; }
.sts-rh button, .sts-gh button { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fde8e8; color: #b42318; font: 700 12px/18px var(--a-body, inherit); cursor: pointer; opacity: 0; }
.sts-grid tr:hover .sts-rh button, .sts-gh:hover button { opacity: 1; }
.sts-rh.is-name { width: 170px; text-align: left; } .sts-rh.is-name input { width: 100%; padding: 9px 26px 9px 10px; border: 0; background: transparent; font: 600 13.5px var(--a-body, inherit); color: var(--sts-ink); }
.sts-gh { position: relative; display: flex; align-items: center; gap: 6px; min-width: 120px; padding-right: 20px; }
.sts-gh i { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 3px; }
.sts-gh input { width: 100%; border: 0; background: transparent; font: 700 13.5px var(--a-body, inherit); color: var(--sts-ink); padding: 4px 2px; }
.sts-gh input:focus { outline: 2px solid #c9ddf3; border-radius: 6px; }
.sts-grid td input { width: 100%; min-width: 110px; padding: 9px 10px; border: 0; background: transparent; font: 14px var(--a-body, inherit); color: var(--sts-ink); text-align: right; }
.sts-grid td input:focus { outline: 2px solid var(--sts-blue); outline-offset: -2px; background: #f4f9ff; }
.sts-grid td input.is-bad { background: #fff1f0; color: #b42318; }
.sts-tot { text-align: center; font-weight: 700; color: var(--sts-mut); padding: 0 12px !important; }
.sts-glance { position: sticky; top: 76px; padding: 14px; border: 1px solid var(--sts-line); border-radius: 14px; background: #fff; }
.sts-glance > b { font: 700 13px var(--a-body, inherit); color: var(--sts-mut); text-transform: uppercase; letter-spacing: .06em; }
.sts-mini { margin-top: 8px; } .sts-mini svg { width: 100%; height: auto; display: block; } .sts-mini-empty { margin: 30px 0; text-align: center; font-size: 13px; color: var(--sts-mut); }
.sts-ministats div { display: flex; align-items: center; gap: 7px; padding: 5px 0; font-size: 12.5px; border-top: 1px solid #f0f3f8; }
.sts-ministats i { width: 9px; height: 9px; border-radius: 3px; flex: none; } .sts-ministats b { color: var(--sts-ink); } .sts-ministats span { margin-left: auto; color: var(--sts-mut); }
/* tests */
.sts-cols { display: grid; grid-template-columns: 1fr 1.15fr; gap: 16px; align-items: start; }
.sts-card { padding: 18px; border: 1px solid var(--sts-line); border-radius: 16px; background: #fff; }
.sts-card h3 { margin: 0 0 12px; font: 700 16px var(--a-head, inherit); color: var(--sts-ink); }
.sts-checks { list-style: none; margin: 0; padding: 0; }
.sts-checks li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid #f0f3f8; }
.sts-checks li:first-child { border-top: 0; }
.sts-checks li > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sts-checks b { font-size: 14px; } .sts-checks span { font-size: 13px; color: #33415c; } .sts-checks small { font-size: 12.5px; color: var(--sts-mut); }
.sts-ck { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 800 13px/1 var(--a-body, inherit); font-style: normal; }
.sts-ck.is-ok { background: #e6f6ee; color: #0f7a55; } .sts-ck.is-warn { background: #fff4e5; color: #b45309; } .sts-ck.is-info { background: #eaf2fb; color: var(--sts-blue); }
.sts-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.sts-chips em { font-style: normal; font-size: 12px; padding: 3px 8px; border-radius: 999px; background: #f2f5fa; color: #33415c; }
.sts-chips em.is-ok { background: #e9f7f0; color: #0f7a55; } .sts-chips em.is-warn { background: #fff4e5; color: #b45309; }
.sts-testlist { display: flex; flex-direction: column; gap: 10px; }
.sts-test { display: flex; gap: 12px; padding: 14px; border: 1.5px solid var(--sts-line); border-radius: 14px; background: #fff; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sts-test:hover { border-color: #b9d4ef; } .sts-test.is-on { border-color: var(--sts-blue); box-shadow: 0 0 0 4px rgba(47, 123, 196, .1); }
.sts-radio { flex: 0 0 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 2px solid #b9c6da; }
.sts-test.is-on .sts-radio { border: 5px solid var(--sts-blue); }
.sts-test b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; color: var(--sts-ink); }
.sts-test b small { font: 600 11.5px var(--a-body, inherit); color: var(--sts-mut); }
.sts-rec { font-style: normal; font: 700 11px var(--a-body, inherit); padding: 3px 8px; border-radius: 999px; background: #e6f6ee; color: #0f7a55; }
.sts-test p { margin: 4px 0 8px; font-size: 13px; color: #33415c; line-height: 1.45; }
.sts-res { font: 600 12.5px var(--a-body, inherit); color: var(--sts-mut); } .sts-res.is-sig { color: #1f5f9e; }
.sts-cmp { margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef2f8; display: flex; flex-direction: column; gap: 10px; }
.sts-cmp > b { font-size: 14px; }
.sts-ctl { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #33415c; }
.sts-ctl select, .sts-ps select { padding: 7px 10px; border: 1px solid #d6deec; border-radius: 9px; font: 13.5px var(--a-body, inherit); background: #fff; color: var(--sts-ink); }
.sts-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sts-pair { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--sts-line); border-radius: 10px; font-size: 13px; cursor: pointer; background: #fff; }
.sts-pair.is-on { border-color: #b9d4ef; background: #f4f9ff; }
.sts-pair i { font-style: normal; color: var(--sts-mut); font-size: 12px; } .sts-pair em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--sts-mut); } .sts-pair em.is-sig { color: #1f5f9e; }
.sts-hint { font-size: 12px; color: var(--sts-mut); line-height: 1.4; }
/* graph */
.sts-graph { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; max-width: 1240px; }
.sts-panel { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; padding: 6px 16px 16px; border: 1px solid var(--sts-line); border-radius: 16px; background: #fff; }
.sts-ps { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-bottom: 1px solid #eef2f8; }
.sts-ps:last-child { border-bottom: 0; }
.sts-more { border-bottom: 1px solid #eef2f8; }
.sts-more > summary { padding: 14px 0; cursor: pointer; list-style: revert; font: 700 12px var(--a-body, inherit); text-transform: uppercase; letter-spacing: .06em; color: var(--sts-mut); }
.sts-more > summary:hover { color: var(--sts-blue); }
.sts-more .sts-ps { padding: 0 0 14px; border-bottom: 0; }
.sts-ps > b { font: 700 12px var(--a-body, inherit); text-transform: uppercase; letter-spacing: .06em; color: var(--sts-mut); }
.sts-ps input:not([type]) { padding: 8px 10px; border: 1px solid #d6deec; border-radius: 9px; font: 13.5px var(--a-body, inherit); color: var(--sts-ink); }
.sts-ps .sts-cmp { margin: 0; padding: 0; border: 0; } .sts-ps .sts-pairs { grid-template-columns: 1fr; }
.sts-gtypes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sts-gtypes button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 8px; border: 1.5px solid var(--sts-line); border-radius: 12px; background: #fff; font: 600 12.5px var(--a-body, inherit); color: #33415c; cursor: pointer; }
.sts-gtypes button.is-on { border-color: var(--sts-blue); background: #f4f9ff; color: var(--sts-ink); }
.sts-sug { position: absolute; top: 4px; right: 4px; font-style: normal; font: 700 9.5px var(--a-body, inherit); padding: 2px 6px; border-radius: 999px; background: #e6f6ee; color: #0f7a55; }
.sts-gt { width: 44px; height: 30px; background: no-repeat center / contain; }
.sts-gt-bar { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 30'%3E%3Cpath d='M2 29h40' stroke='%231d2240' stroke-width='1.5'/%3E%3Crect x='7' y='14' width='10' height='15' fill='%232f7bc4' fill-opacity='.3' stroke='%232f7bc4' stroke-width='1.5'/%3E%3Crect x='26' y='6' width='10' height='23' fill='%23f26a1b' fill-opacity='.3' stroke='%23f26a1b' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='16' r='1.6' fill='%232f7bc4'/%3E%3Ccircle cx='14' cy='12' r='1.6' fill='%232f7bc4'/%3E%3Ccircle cx='29' cy='8' r='1.6' fill='%23f26a1b'/%3E%3Ccircle cx='33' cy='5' r='1.6' fill='%23f26a1b'/%3E%3C/svg%3E"); }
.sts-gt-box { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 30'%3E%3Cpath d='M2 29h40M12 3v6M12 20v6M31 6v5M31 22v5' stroke='%231d2240' stroke-width='1.5'/%3E%3Crect x='7' y='9' width='10' height='11' rx='1.5' fill='%232f7bc4' fill-opacity='.3' stroke='%232f7bc4' stroke-width='1.5'/%3E%3Cpath d='M7 15h10' stroke='%231d2240' stroke-width='2'/%3E%3Crect x='26' y='11' width='10' height='11' rx='1.5' fill='%23f26a1b' fill-opacity='.3' stroke='%23f26a1b' stroke-width='1.5'/%3E%3Cpath d='M26 17h10' stroke='%231d2240' stroke-width='2'/%3E%3C/svg%3E"); }
.sts-gt-violin { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 30'%3E%3Cpath d='M2 29h40' stroke='%231d2240' stroke-width='1.5'/%3E%3Cpath d='M12 3c-2 6-6 9-6 14s4 7 6 10c2-3 6-5 6-10s-4-8-6-14z' fill='%232f7bc4' fill-opacity='.3' stroke='%232f7bc4' stroke-width='1.5'/%3E%3Cpath d='M31 6c-3 5-6 8-6 12s3 6 6 9c3-3 6-5 6-9s-3-7-6-12z' fill='%23f26a1b' fill-opacity='.3' stroke='%23f26a1b' stroke-width='1.5'/%3E%3C/svg%3E"); }
.sts-gt-dots { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 30'%3E%3Cpath d='M2 29h40M7 15h10M26 9h10M12 9v12M31 4v11' stroke='%231d2240' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='17' r='2' fill='%232f7bc4'/%3E%3Ccircle cx='14' cy='13' r='2' fill='%232f7bc4'/%3E%3Ccircle cx='11' cy='11' r='2' fill='%232f7bc4'/%3E%3Ccircle cx='29' cy='10' r='2' fill='%23f26a1b'/%3E%3Ccircle cx='33' cy='7' r='2' fill='%23f26a1b'/%3E%3Ccircle cx='31' cy='12' r='2' fill='%23f26a1b'/%3E%3C/svg%3E"); }
.sts-gt-pairs { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 30'%3E%3Cpath d='M2 29h40' stroke='%231d2240' stroke-width='1.5'/%3E%3Cpath d='M11 21L33 9M11 17L33 12M11 24L33 16' stroke='%239aa6bd' stroke-width='1.4' fill='none'/%3E%3Cg fill='%232f7bc4'%3E%3Ccircle cx='11' cy='21' r='2.4'/%3E%3Ccircle cx='11' cy='17' r='2.4'/%3E%3Ccircle cx='11' cy='24' r='2.4'/%3E%3C/g%3E%3Cg fill='%23f26a1b'%3E%3Ccircle cx='33' cy='9' r='2.4'/%3E%3Ccircle cx='33' cy='12' r='2.4'/%3E%3Ccircle cx='33' cy='16' r='2.4'/%3E%3C/g%3E%3C/svg%3E"); }
.sts-tgl { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #33415c; cursor: pointer; }
.sts-tgl input { position: absolute; opacity: 0; } .sts-tgl span { position: relative; flex: 0 0 34px; height: 20px; border-radius: 999px; background: #d3dbe8; transition: background .15s; }
.sts-tgl span::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.sts-tgl input:checked + span { background: var(--sts-blue); } .sts-tgl input:checked + span::after { transform: translateX(14px); }
.sts-pals { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sts-pals button { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 8px; border: 1.5px solid var(--sts-line); border-radius: 10px; background: #fff; cursor: pointer; }
.sts-pals button.is-on { border-color: var(--sts-blue); background: #f4f9ff; }
.sts-pals span { display: flex; gap: 3px; } .sts-pals i { width: 16px; height: 16px; border-radius: 4px; } .sts-pals small { font: 600 11.5px var(--a-body, inherit); color: #33415c; }
.sts-ps .sts-sub { margin: 4px 0 -2px; font-size: 12px; color: var(--sts-mut); }
.sts-gcols { display: flex; flex-direction: column; gap: 4px; }
.sts-gcols label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #33415c; cursor: pointer; }
.sts-gcols input[type="color"] { width: 26px; height: 26px; padding: 0; border: 1px solid #d6deec; border-radius: 7px; background: #fff; cursor: pointer; }
.sts-stage { min-width: 0; }
.sts-plot { padding: 14px; border: 1px solid var(--sts-line); border-radius: 16px; background: #fff; }
.sts-plot svg { display: block; width: 100%; height: auto; }
.sts-result { margin-top: 14px; padding: 16px 18px; border: 1px solid var(--sts-line); border-radius: 16px; background: #fff; }
.sts-rline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.sts-rline b { font-size: 15px; } .sts-rline span { font-size: 13.5px; color: #33415c; } .sts-post { padding: 2px 9px; border-radius: 999px; background: #eef5fd; color: #1f5f9e !important; font-size: 12px !important; font-weight: 600; }
.sts-result p { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: #26324a; }
.sts-ctab { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 13px; }
.sts-ctab th { text-align: left; font: 700 11.5px var(--a-body, inherit); text-transform: uppercase; letter-spacing: .05em; color: var(--sts-mut); padding: 6px 8px; border-bottom: 1px solid var(--sts-line); }
.sts-ctab td { padding: 7px 8px; border-bottom: 1px solid #f0f3f8; } .sts-ctab em { font-style: normal; font-weight: 700; color: var(--sts-mut); } .sts-ctab em.is-sig { color: #1f5f9e; }
/* report */
.sts-report { max-width: 980px; }
.sts-paper { padding: 34px 44px 26px; border: 1px solid var(--sts-line); border-radius: 14px; background: #fff; box-shadow: 0 24px 50px -36px rgba(15, 42, 74, .45); }
.sts-ph { display: flex; align-items: center; justify-content: space-between; padding: 0 0 16px; margin-bottom: 20px; border-bottom: 2px solid #eef3fa; }
.sts-ph img { height: 30px; width: auto; } .sts-ph div { display: flex; flex-direction: column; align-items: flex-end; } .sts-ph b { color: var(--sts-blue); font-size: 13px; } .sts-ph span { font-size: 12px; color: var(--sts-mut); }
.sts-paper h1 { margin: 0 0 18px; font: 800 24px/1.25 var(--a-head, inherit); color: var(--sts-ink); }
.sts-rs { margin-bottom: 22px; } .sts-rs h3 { position: relative; margin: 0 0 10px; padding-bottom: 6px; font: 700 15.5px var(--a-head, inherit); color: var(--sts-ink); }
.sts-rs h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 26px; height: 2.5px; border-radius: 2px; background: #f26a1b; }
.sts-rs p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: #26324a; }
.sts-methods { padding: 12px 14px; border-radius: 10px; background: #f7faff; border: 1px solid #e3ecf7; }
.sts-copy { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid #c9ddf3; border-radius: 8px; background: #fff; color: #1f5f9e; font: 600 12.5px var(--a-body, inherit); cursor: pointer; }
.sts-rgraph { border: 1px solid #eef2f8; border-radius: 10px; overflow: hidden; } .sts-rgraph svg { display: block; width: 100%; height: auto; }
.sts-kv { display: grid; grid-template-columns: 190px 1fr; margin: 0; font-size: 13.5px; }
.sts-kv dt { padding: 7px 12px 7px 0; font-weight: 700; color: #33415c; border-bottom: 1px solid #f0f3f8; } .sts-kv dd { margin: 0; padding: 7px 0; color: #26324a; border-bottom: 1px solid #f0f3f8; }
.sts-tbw { overflow-x: auto; }
.sts-rt { width: 100%; border-collapse: collapse; font-size: 13px; }
.sts-rt th { text-align: left; background: #eef4fb; padding: 8px; font-weight: 700; color: var(--sts-ink); white-space: nowrap; } .sts-rt td { padding: 8px; border-bottom: 1px solid #eef2f8; }
.sts-rt tbody tr:nth-child(even) td { background: #fafcff; }
.sts-pf { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 12px; border-top: 1px solid #eef2f8; font-size: 12px; color: var(--sts-mut); }
/* intro in the studio */
.sts-intro-art { position: relative; flex: 1 1 380px; max-width: 520px; }
.sts-ia-card { padding: 10px; border-radius: 18px; background: #fff; border: 1px solid var(--sts-line); box-shadow: 0 30px 60px -40px rgba(15, 42, 74, .55); transform: rotate(-1.5deg); }
.sts-ia-card svg { display: block; width: 100%; height: auto; }
.sts-ia-chip { position: absolute; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--sts-line); font: 700 12.5px var(--a-body, inherit); color: var(--sts-ink); box-shadow: 0 12px 26px -18px rgba(15, 42, 74, .6); animation: stFloat 5s ease-in-out infinite; }
.sts-ia-1 { left: -14px; top: 18%; color: #0f7a55; } .sts-ia-2 { right: -10px; top: 6%; animation-delay: -1.6s; } .sts-ia-3 { right: 8%; bottom: -12px; color: #1f5f9e; animation-delay: -3s; }
@keyframes stFloat { 50% { transform: translateY(-6px); } }
.aai-side-graphs.is-stats .sts-side-ico { width: 22px; height: 22px; border-radius: 6px; background: #e8f7f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318a874' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 19v-6M10 19V8M15 19v-9M20 19V5M4 4.5h7'/%3E%3C/svg%3E") center / 15px no-repeat; flex: none; }
@media (max-width: 980px) {
	.sts-kinds, .sts-cols, .sts-dgrid, .sts-graph { grid-template-columns: 1fr; }
	.sts-q { grid-template-columns: 1fr; } .sts-q > em { grid-column: 1; }
	.sts-panel, .sts-glance { position: static; max-height: none; }
	.sts-steps { order: 5; width: 100%; overflow-x: auto; margin: 4px 0 0; }
	.sts-steps button span { display: none; } .sts-paper { padding: 22px 18px; }
}

/* ===== PANEL STUDIO (2026-10-30): many results → one paper figure; reuses the calm .sts- shell ===== */
.pn-badge-ico { width: 12px; height: 12px; border-radius: 2px; background: linear-gradient(#c43d7a, #c43d7a) 0 0 / 5px 5px no-repeat, linear-gradient(#c43d7a, #c43d7a) 7px 0 / 5px 5px no-repeat, linear-gradient(#c43d7a, #c43d7a) 0 7px / 12px 5px no-repeat; }
.pn-badge { color: #a8306a; background: #fbeef4; }
.pn-srcs { margin: 4px 0 14px; }
.pn-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 200px; padding: 26px; border: 2px dashed #c9d6ea; border-radius: 18px; background: #fff; color: var(--sts-mut); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.pn-drop:hover, .pn-drop.is-over { border-color: var(--sts-blue); background: #f5f9fe; }
.pn-drop b { font: 700 16px var(--a-head, inherit); color: var(--sts-ink); }
.pn-drop span { font-size: 13px; }
.pn-drop-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #e9f2fc; color: var(--sts-blue); }
.pn-drop-ico svg { width: 24px; height: 24px; }
.pn-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 420px; overflow: auto; padding: 4px; }
.pn-pk { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1.5px solid var(--sts-line); border-radius: 12px; background: #fff; cursor: pointer; text-align: left; }
.pn-pk img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 8px; background: #f4f7fb; }
.pn-pk span { font-size: 12px; color: #33415c; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pn-pk i { position: absolute; top: 10px; right: 10px; display: none; width: 22px; height: 22px; border-radius: 50%; background: var(--sts-blue); color: #fff; font: 700 13px/22px var(--a-body, inherit); text-align: center; font-style: normal; }
.pn-pk.is-on { border-color: var(--sts-blue); background: #f4f9ff; } .pn-pk.is-on i { display: block; }
.pn-pick-act { display: flex; justify-content: flex-end; margin-top: 10px; }
.pn-empty { padding: 26px; text-align: center; color: var(--sts-mut); font-size: 14px; }
.pn-tray { margin-top: 16px; }
.pn-tray h3 em { font-style: normal; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #eef3fa; color: var(--sts-mut); font-size: 12px; }
.pn-tray-list { display: flex; flex-wrap: wrap; gap: 10px; }
.pn-ti { position: relative; width: 120px; margin: 0; }
.pn-ti img { width: 120px; height: 84px; object-fit: contain; border: 1px solid var(--sts-line); border-radius: 10px; background: #f6f8fc; }
.pn-ti figcaption { font-size: 11.5px; color: var(--sts-mut); margin-top: 3px; }
.pn-ti button { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border: 1px solid var(--sts-line); border-radius: 50%; background: #fff; color: #5d6b85; font-size: 14px; line-height: 1; cursor: pointer; }
.pn-ti button:hover { color: #c0392b; border-color: #f0c4be; }
.pn-found .pn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pn-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: #f2f6fc; font-size: 13px; color: #33415c; }
.pn-chip b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sts-blue); color: #fff; font-size: 12.5px; }
.pn-found-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pn-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin: 16px 0; }
.pn-card { display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1.5px solid var(--sts-line); border-radius: 16px; background: #fff; cursor: pointer; text-align: left; transition: border-color .15s, transform .15s; }
.pn-card:hover { border-color: #b9d4ef; transform: translateY(-1px); }
.pn-card.is-on { border-color: var(--sts-blue); box-shadow: 0 0 0 3px rgba(47, 123, 196, .12); }
.pn-card-art { display: flex; align-items: center; justify-content: center; height: 190px; padding: 8px; border-radius: 10px; background: #eef2f8; overflow: hidden; }
.pn-card-art svg { max-width: 100%; max-height: 100%; width: auto; height: auto; box-shadow: 0 4px 14px -8px rgba(15, 42, 74, .4); }
.pn-card-tx b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 700 14.5px var(--a-head, inherit); color: var(--sts-ink); }
.pn-card-tx small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--sts-mut); }
.pn-look-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pn-look { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border: 1.5px solid var(--sts-line); border-radius: 12px; background: #fff; font: 600 13.5px var(--a-body, inherit); color: var(--sts-ink); cursor: pointer; }
.pn-look.is-on { border-color: var(--sts-blue); background: #f4f9ff; }
.pn-look i { width: 34px; height: 24px; border-radius: 6px; border: 1px solid #d6deec; background: #fff; }
.pn-look-soft i { background: #f2f6fc; box-shadow: inset 0 0 0 3px #fff; } .pn-look-framed i { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px #8f9bb3; } .pn-look-dark i { background: #000; border-color: #000; }
.sts-wrap.pn-edit { display: grid; grid-template-columns: 330px 1fr; gap: 18px; align-items: start; max-width: 1440px; }
.pn-stage { min-width: 0; }
.pn-canvas { padding: 22px; border: 1px solid var(--sts-line); border-radius: 16px; background: #eef2f8; }
.pn-canvas svg { display: block; width: 100%; height: auto; margin: 0 auto; background: #fff; box-shadow: 0 10px 30px -18px rgba(15, 42, 74, .45); }
.pn-canvas .pn-hit-sec, .pn-canvas .pn-hit-img { cursor: pointer; }
.pn-canvas .pn-hit-img:hover { fill: rgba(47, 123, 196, .08); }
.fc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.fc-chips button { padding: 6px 11px; border: 1px solid #d5deec; border-radius: 999px; background: #fff; color: #33415c; font: 600 12.5px var(--a-body, inherit); cursor: pointer; }
.fc-chips button small { margin-left: 3px; color: #7b889e; font-weight: 500; }
.fc-chips button.is-on { border-color: var(--sts-blue, #2f7bc4); background: #eaf2fb; color: var(--sts-blue, #2f7bc4); }
.fc-gh small { margin-left: 4px; color: #7b889e; font-weight: 500; font-size: .8em; }
.mp-left { color: #b3261e; }
.mp-table input.is-bad, .mp-srow.is-off input[data-sf="lat"], .mp-srow.is-off input[data-sf="lon"] { border-color: #b3261e; background: #fdf1f0; }
.mp-chead { display: flex; align-items: center; gap: 4px; }
.pn-lost { margin: 0 0 6px; font-size: 12px; color: #b3261e; }
.pn-hint { margin: 8px 4px 0; font-size: 12.5px; color: var(--sts-mut); }
.pn-panel input:not([type]) { width: 100%; box-sizing: border-box; }
.pn-secs { display: flex; flex-direction: column; gap: 10px; }
.pn-sec { padding: 10px; border: 1.5px solid var(--sts-line); border-radius: 12px; background: #fff; transition: border-color .15s; }
.pn-sec.is-sel { border-color: var(--sts-blue); background: #f8fbff; }
.pn-sec-hd { display: flex; align-items: center; gap: 6px; }
.pn-sec-hd input { flex: 1; min-width: 0; padding: 7px 9px !important; }
.pn-sec-hd button { width: 28px; height: 30px; border: 1px solid var(--sts-line); border-radius: 8px; background: #fff; color: #33415c; cursor: pointer; }
.pn-sec-hd button:disabled { opacity: .35; cursor: default; }
.pn-let { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 8px; background: var(--sts-ink); color: #fff; font: 700 13px var(--a-body, inherit); font-style: normal; }
.pn-sl { display: grid; grid-template-columns: auto 1fr 46px; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--sts-mut); }
.sts-ps > .pn-sl { grid-template-columns: 1fr 52px; margin-top: 0; }
.pn-sl input[type="range"] { width: 100%; accent-color: var(--sts-blue); }
.pn-sl output { font: 600 12px var(--a-body, inherit); color: var(--sts-ink); text-align: right; }
.pn-arr { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--sts-mut); }
.pn-arr .sts-seg button { padding: 6px 8px; font-size: 12px; }
.pn-its { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pn-it { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 8px; padding: 6px; border-radius: 10px; background: #f6f8fc; }
.pn-it.is-sel { box-shadow: inset 0 0 0 1.5px #f26a1b; background: #fff8f3; }
.pn-it img { width: 58px; height: 46px; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--sts-line); }
.pn-it-c { min-width: 0; padding-right: 18px; }
.pn-it-c input { padding: 6px 8px !important; font-size: 12.5px !important; }
.pn-it-c .pn-sl { margin-top: 4px; }
.pn-it-c select { width: 100%; margin-top: 4px; padding: 5px 8px; border: 1px solid #d6deec; border-radius: 8px; background: #fff; font-size: 12.5px; color: var(--sts-ink); }
.pn-x { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: #8a95ab; font-size: 15px; line-height: 1; cursor: pointer; }
.pn-x:hover { color: #c0392b; background: #fdecea; }
.pn-panel .sts-ps > .sts-tb { margin-top: 10px; align-self: flex-start; }
.pn-lays { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pn-lays button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border: 1.5px solid var(--sts-line); border-radius: 10px; background: #fff; color: #33415c; font: 600 11px var(--a-body, inherit); cursor: pointer; }
.pn-lays button.is-on { border-color: var(--sts-blue); color: var(--sts-blue); background: #f4f9ff; }
.pn-panel .sts-seg + .sts-seg { margin-top: 6px; }
.pn-txts { display: flex; flex-direction: column; gap: 8px; }
.pn-tx { position: relative; padding: 8px; border-radius: 10px; background: #f6f8fc; }
.pn-tx.is-sel { box-shadow: inset 0 0 0 1.5px #f26a1b; background: #fff8f3; }
.pn-tx > input { padding: 7px 9px !important; padding-right: 26px !important; }
.pn-tx .pn-sl { margin-top: 6px; }
.pn-tx-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.pn-bold { width: 28px; height: 26px; border: 1px solid var(--sts-line); border-radius: 7px; background: #fff; font: 800 13px var(--a-body, inherit); color: #33415c; cursor: pointer; }
.pn-bold.is-on { background: var(--sts-ink); border-color: var(--sts-ink); color: #fff; }
.pn-sw { width: 22px; height: 22px; border: 1px solid #c9d4e6; border-radius: 50%; background: var(--c); cursor: pointer; }
.pn-sw.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--sts-blue); }
.pn-tx-del { position: static; margin-left: auto; }
.pn-canvas .pn-ftext { cursor: move; touch-action: none; }
.pn-trim { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 12px; color: var(--sts-mut); cursor: pointer; }
.pn-trim input { accent-color: var(--sts-blue); }
.pn-modal { --sts-blue: #2f7bc4; --sts-ink: #0f2a4a; --sts-mut: #5d6b85; --sts-line: #e3e8f4; position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 16px; background: rgba(15, 42, 74, .28); }
.pn-dlg { width: min(460px, 100%); padding: 20px 22px; border: 1px solid var(--sts-line, #e3e8f4); border-radius: 16px; background: #fff; box-shadow: 0 24px 60px -28px rgba(15, 42, 74, .5); font-family: var(--a-body, Roboto, Arial, sans-serif); color: #0f2a4a; }
.pn-dlg h3 { margin: 0 0 6px; font: 700 18px var(--a-head, inherit); }
.pn-dlg .sts-ps { border: 0; padding: 10px 0; }
.pn-qs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pn-q { display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1.5px solid #e3e8f4; border-radius: 12px; background: #fff; text-align: left; cursor: pointer; }
.pn-q b { font-size: 14px; color: #0f2a4a; } .pn-q small { font-size: 11.5px; color: #5d6b85; } .pn-q em { font-style: normal; font-size: 11px; color: #1f5f9e; margin-top: 4px; }
.pn-q.is-on { border-color: #2f7bc4; background: #f4f9ff; }
.pn-dlg-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.pn-intro-art { position: relative; flex: 1 1 520px; max-width: 680px; }
.pn-ia-card { padding: 10px; border-radius: 18px; background: #fff; border: 1px solid #e3e8f4; box-shadow: 0 30px 60px -40px rgba(15, 42, 74, .55); transform: rotate(1.2deg); }
.pn-ia-card svg { display: block; width: 100%; height: auto; }
.pn-ia-1 { left: -18px; bottom: 30%; color: #a8306a; } .pn-ia-2 { right: -10px; top: -10px; color: #0f7a55; animation-delay: -1.6s; } .pn-ia-3 { right: 10%; bottom: -12px; color: #1f5f9e; animation-delay: -3s; }
.aai-side-graphs.is-panel .pn-side-ico { width: 22px; height: 22px; border-radius: 6px; background: #fbeef4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c43d7a' stroke-width='2'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.2'/%3E%3Crect x='13' y='4' width='7' height='5' rx='1.2'/%3E%3Crect x='13' y='11' width='7' height='9' rx='1.2'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.2'/%3E%3C/svg%3E") center / 16px no-repeat; flex: none; }
@media (max-width: 980px) {
	.sts-wrap.pn-edit { grid-template-columns: 1fr; }
	.pn-canvas { padding: 10px; }
	.pn-qs { grid-template-columns: 1fr; }
}

/* Opening screens of the Statistical studio (green) and the Panel studio (rose) */
.aai-opening.is-stats .aai-op-kind { --k: #18a874; --k2: #0f7a55; }
.aai-opening.is-panel .aai-op-kind { --k: #d6458a; --k2: #c43d7a; }
.aai-opening.is-panel .aai-op-kind i { border-radius: 3px; }
.aai-opening.is-stats .aai-op-halo { background: conic-gradient(from 0deg, rgba(24, 168, 116, 0), rgba(24, 168, 116, .26), rgba(47, 123, 196, .2), rgba(24, 168, 116, .2), rgba(24, 168, 116, 0)); }
.aai-opening.is-panel .aai-op-halo { background: conic-gradient(from 0deg, rgba(196, 61, 122, 0), rgba(196, 61, 122, .24), rgba(242, 106, 27, .2), rgba(47, 123, 196, .18), rgba(196, 61, 122, 0)); }
.aai-opening.is-stats .aai-op-bar b { background: linear-gradient(90deg, #18a874, #0f7a55); }
.aai-opening.is-panel .aai-op-bar b { background: linear-gradient(90deg, #d6458a, #c43d7a); }
.aai-opening.is-stats .aai-ft .ft-chips span { animation-name: ftChipS; }
.aai-opening.is-panel .aai-ft .ft-chips span { animation-name: ftChipP; }
@keyframes ftChipS { from { background: #eef2fa; color: #7a879c; } to { background: linear-gradient(120deg, #0f7a55, #18a874); color: #fff; box-shadow: 0 6px 14px -8px rgba(15, 122, 85, .9); } }
@keyframes ftChipP { from { background: #eef2fa; color: #7a879c; } to { background: linear-gradient(120deg, #a8306a, #d6458a); color: #fff; box-shadow: 0 6px 14px -8px rgba(168, 48, 106, .9); } }

/* Studio intro ticks (Poster, Figure, Statistical, Panel): calm blue like the Graph studio steps, with room after the paragraph */
.aai .ps-intro-txt > p { margin-bottom: 0 !important; }
.aai .ps-intro-pts { margin: 22px 0 4px !important; gap: 12px 24px !important; }
.aai .ps-intro-pts li { padding-left: 30px !important; line-height: 20px !important; }
.aai .ps-intro-pts li::before { top: 0 !important; width: 20px !important; height: 20px !important; border-radius: 6px !important; background: #eaf2fb !important; color: #2f7bc4 !important; font: 800 11px/20px Roboto, sans-serif !important; box-shadow: none !important; }
.aai .ps-intro-acts { margin-top: 26px !important; }

/* ===== MAP STUDIO (2026-10-30): study areas, values and prevalence by country or by area; reuses the calm .sts- shell ===== */
.mp-badge { color: #0b6e8a; background: #e6f6fb; }
.mp-badge-ico { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #7fd3ea, #0e8fb3 70%); box-shadow: inset 0 0 0 1.5px #ffffff; }
.mp-loading { display: grid; place-items: center; gap: 12px; min-height: 50vh; color: var(--sts-mut); text-align: center; }
.mp-kind-ic svg { width: 26px; height: 26px; }
.mp-qs { margin-top: 16px; }
.mp-qs select { width: 100%; max-width: 420px; padding: 9px 12px; border: 1px solid #d6deec; border-radius: 10px; background: #fff; font: 14px var(--a-body, inherit); color: var(--sts-ink); }
.mp-levels { margin: 10px 0 6px; } .mp-levels .sts-seg em { font-style: normal; font-weight: 500; color: var(--sts-mut); font-size: 11.5px; }
.mp-split { display: grid; grid-template-columns: minmax(440px, 480px) 1fr; gap: 18px; align-items: start; }
.mp-side { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; }
.mp-side h3 { margin: 0 0 10px; font: 700 15px var(--a-head, inherit); color: var(--sts-ink); } .mp-side h3 small { font-weight: 500; color: var(--sts-mut); font-size: 12px; }
.mp-h3 { margin-top: 18px !important; }
.mp-add { display: flex; gap: 8px; } .mp-add input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid #d6deec; border-radius: 10px; font: 14px var(--a-body, inherit); }
.mp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.mp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 999px; background: #eef4fb; font-size: 13px; color: #1f3b63; }
.mp-chip i { width: 9px; height: 9px; border-radius: 50%; background: #2f7bc4; } .mp-chip button { width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: #6a7891; cursor: pointer; font-size: 14px; } .mp-chip button:hover { background: #fde9e6; color: #c0392b; }
.mp-sites { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.mp-srow { display: grid; grid-template-columns: 1.5fr 1fr 1fr 24px; gap: 6px; align-items: center; } .mp-srow.has-n { grid-template-columns: 1.4fr 1fr 1fr .8fr 24px; }
.mp-srow input { width: 100%; box-sizing: border-box; padding: 7px 8px; border: 1px solid #d6deec; border-radius: 8px; font: 13px var(--a-body, inherit); }
.mp-shead span { font-size: 11.5px; font-weight: 700; color: var(--sts-mut); text-transform: uppercase; letter-spacing: .04em; }
.mp-srow .pn-x { position: static; }
.mp-tbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.mp-tablewrap { max-height: 52vh; overflow: auto; border: 1px solid var(--sts-line); border-radius: 12px; }
.mp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mp-table th { position: sticky; top: 0; z-index: 1; background: #f4f8fd; padding: 6px; text-align: left; font-weight: 700; color: var(--sts-ink); border-bottom: 1px solid var(--sts-line); }
.mp-table th input { width: 100%; min-width: 70px; box-sizing: border-box; padding: 5px 7px; border: 1px solid #d6deec; border-radius: 7px; font: 700 12.5px var(--a-body, inherit); }
.mp-table td { padding: 4px 6px; border-bottom: 1px solid #f0f3f8; vertical-align: top; }
.mp-table td input { width: 100%; min-width: 56px; box-sizing: border-box; padding: 6px 7px; border: 1px solid transparent; border-radius: 7px; background: #f7f9fc; font: 13px var(--a-body, inherit); }
.mp-table td input:focus { border-color: #9cc1e8; background: #fff; outline: none; }
.mp-name { display: flex; align-items: center; gap: 6px; } .mp-table .mp-name input { min-width: 150px; }
.mp-table .pn-x { position: static; display: inline-block; }
.mp-ok, .mp-no { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font: 800 11px/1 var(--a-body, inherit); font-style: normal; }
.mp-ok { background: #e6f6ee; color: #0f7a55; } .mp-no { background: #fff1e6; color: #c2410c; }
.mp-sug { margin: 4px 0 2px; font-size: 12px; color: #8a4b12; } .mp-sug button { border: 0; padding: 1px 7px; border-radius: 999px; background: #fff1e6; color: #a84a0b; font: 600 12px var(--a-body, inherit); cursor: pointer; }
.mp-prev { white-space: nowrap; font-weight: 600; color: var(--sts-ink); padding-top: 9px !important; } .mp-prev small { font-weight: 400; color: var(--sts-mut); }
.is-up { color: #c2410c; } .is-down { color: #1f5f9e; }
.mp-results { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #f4f9f6; border: 1px solid #d4eee0; font-size: 13.5px; color: #1d2a3f; }
.mp-results > b { display: block; margin-bottom: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #0f7a55; } .mp-results p { margin: 4px 0; line-height: 1.5; }
.mp-stage { min-width: 0; }
.mp-canvas { padding: 14px; border: 1px solid var(--sts-line); border-radius: 16px; background: #fff; }
.mp-canvas svg { display: block; width: 100%; height: auto; margin: 0 auto; }
.mp-canvas .mp-c { cursor: pointer; transition: opacity .12s; } .mp-canvas .mp-c:hover { opacity: .78; }
.mp-tip { min-height: 18px; margin: 8px 4px 0; font-size: 13px; color: var(--sts-mut); }
.sts-wrap.mp-design { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; max-width: 1440px; }
.mp-pals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mp-pals button { padding: 4px; border: 1.5px solid var(--sts-line); border-radius: 9px; background: #fff; cursor: pointer; } .mp-pals button span { display: block; height: 14px; border-radius: 5px; }
.mp-pals button.is-on { border-color: var(--sts-blue); box-shadow: 0 0 0 2px rgba(47, 123, 196, .15); }
.mp-sws { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mp-own input { width: 26px; height: 26px; padding: 0; border: 1px solid #d6deec; border-radius: 50%; background: #fff; cursor: pointer; }
.mp-dl { width: 100%; margin-top: 14px; justify-content: center; }
.mp-fmts { grid-template-columns: repeat(5, 1fr) !important; }
.mp-intro-art { position: relative; flex: 1 1 520px; max-width: 680px; }
.mp-ia-card { min-height: 220px; display: grid; place-items: center; padding: 10px; border-radius: 18px; background: #fff; border: 1px solid #e3e8f4; box-shadow: 0 30px 60px -40px rgba(15, 42, 74, .55); transform: rotate(-.8deg); }
.mp-ia-card svg { display: block; width: 100%; height: auto; }
.mp-ia-1 { left: -16px; top: 14%; color: #c2410c; } .mp-ia-2 { right: -10px; top: -10px; color: #0f7a55; animation-delay: -1.6s; } .mp-ia-3 { right: 10%; bottom: -12px; color: #1f5f9e; animation-delay: -3s; }
.aai-side-graphs.is-map .mp-side-ico { width: 22px; height: 22px; border-radius: 6px; background: #e6f6fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e8fb3' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E") center / 16px no-repeat; flex: none; }
@media (max-width: 980px) { .mp-split, .sts-wrap.mp-design { grid-template-columns: 1fr; } .mp-side { position: static; max-height: none; } }

.aai-opening.is-map .aai-op-kind { --k: #14a7cc; --k2: #0e8fb3; }
.aai-opening.is-map .aai-op-halo { background: conic-gradient(from 0deg, rgba(14, 143, 179, 0), rgba(14, 143, 179, .26), rgba(47, 123, 196, .2), rgba(242, 106, 27, .14), rgba(14, 143, 179, 0)); }
.aai-opening.is-map .aai-op-bar b { background: linear-gradient(90deg, #14a7cc, #0e8fb3); }
.aai-opening.is-map .aai-ft .ft-chips span { animation-name: ftChipM; }
@keyframes ftChipM { from { background: #eef2fa; color: #7a879c; } to { background: linear-gradient(120deg, #0b6e8a, #14a7cc); color: #fff; box-shadow: 0 6px 14px -8px rgba(11, 110, 138, .9); } }
.mp-design .sts-ps > .pn-sl { grid-template-columns: auto 1fr 46px; margin-top: 6px; }

/* ── THE TWO-COLUMN EDITORS USE THE WHOLE WIDTH (owner, 2026-10-30) ──
   They were capped at 1440px and centred, so on a wide screen an empty column
   sat beside the controls while the preview still wanted room. The single
   column steps keep their cap, where a narrow measure is easier to read. */
.sts-wrap.pn-edit, .sts-wrap.mp-design { max-width: none; }

/* ── SPACE BETWEEN BARS, UNDER THE GRAPH (owner, 2026-10-30) ── */
.sts-barsl { margin: 2px 0 12px; }
.sts-barsl-l { display: flex; align-items: center; gap: 12px; max-width: 540px; margin: 0 auto; padding: 9px 16px; border-radius: 14px; background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1.5px var(--a-line2, #dbe4f3); font: 600 12.5px/1 Roboto, system-ui, sans-serif; color: var(--a-indigo, #1d2a55); }
.sts-barsl-l input[type="range"] { flex: 1 1 auto; min-width: 120px; }
.sts-barsl-l output { min-width: 44px; text-align: right; font-weight: 700; color: var(--a-royal, #2f6db5); }

/* the statistical editor fills the page as the panel and map editors do */
.sts-graph { max-width: none; }

/* ── CHANGING A WORD ON THE GRAPH ITSELF (owner, 2026-10-30) ── */
.sts-plot [data-ed]:hover { fill: #2f6db5; }
input.sts-edin { position: absolute; z-index: 6; box-sizing: border-box; min-width: 64px; max-width: 100%; text-align: center; padding: 5px 9px; border: 0; border-radius: 9px; background: #fff; box-shadow: 0 0 0 2px var(--a-royal, #2f6db5), 0 10px 22px -12px rgba(16, 42, 100, .6); font: 600 13px/1.2 Roboto, system-ui, sans-serif; color: var(--a-indigo, #1d2a55); }
input.sts-edin:focus { outline: none; }

/* ── THE GRAPH KEEPS A SENSIBLE SIZE (owner, 2026-10-30) ──
   The editor fills the page, but the figure itself should stay near the size it
   is drawn at rather than stretching across a wide monitor. */
.sts-plot svg { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ── BIOINFORMATICS STUDIO (2026-10-30) ──
   Drop a results table, see what it is, pick the figure. Borrows the
   Statistical studio's shell, so only the new pieces are styled here. */
.bio-wrap { max-width: 900px; margin: 0 auto; padding: 26px 20px 60px; }
.bio-wrap .sts-h { margin: 0 0 6px; font: 700 22px/1.25 Roboto, system-ui, sans-serif; color: var(--a-indigo, #1d2a55); }
.bio-wrap .sts-sub { margin: 0 0 18px; font-size: 13.5px; line-height: 1.6; color: #6b7390; }
.bio-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 148px; padding: 22px; border: 2px dashed #c3d0e8; border-radius: 16px; background: #f8faff; cursor: pointer; transition: border-color .15s, background .15s; }
.bio-drop:hover, .bio-drop.is-over { border-color: var(--a-royal, #2f6db5); background: #eef4ff; }
.bio-drop b { font: 700 15px/1.3 Roboto, system-ui, sans-serif; color: var(--a-indigo, #1d2a55); }
.bio-drop span { font-size: 12.5px; color: #7b839b; }
.bio-paste { display: block; width: 100%; min-height: 128px; margin: 14px 0 0; padding: 12px 14px; border: 1px solid #dbe3f2; border-radius: 12px; background: #fff; font: 400 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; color: #2b3350; resize: vertical; }
.bio-paste:focus { outline: none; border-color: var(--a-royal, #2f6db5); box-shadow: 0 0 0 3px rgba(47, 109, 181, .14); }
.bio-say { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; min-height: 22px; font-size: 13px; color: #6b7390; }
.bio-say b { font-size: 14px; color: var(--a-indigo, #1d2a55); }
.bio-say.is-good { padding: 14px 16px; border-radius: 12px; background: #eafaf3; box-shadow: inset 0 0 0 1px #bfe8d6; }
.bio-say.is-bad { padding: 12px 14px; border-radius: 12px; background: #fdf0ec; color: #a6432a; box-shadow: inset 0 0 0 1px #f3cfc3; }
.bio-say.is-busy { color: var(--a-royal, #2f6db5); }
.bio-say .sts-dl { margin-left: auto; }
.bio-found { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; margin-bottom: 24px; border-radius: 12px; background: #eef4ff; box-shadow: inset 0 0 0 1px #d4e0f5; }
.bio-found b { font: 700 14.5px/1.3 Roboto, system-ui, sans-serif; color: var(--a-indigo, #1d2a55); }
.bio-found span { font-size: 12.5px; color: #6b7390; }
.bio-found em { font-style: normal; font-size: 11.5px; color: #8a93a6; }
.bio-again { margin-left: auto; padding: 7px 13px; border: 0; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #c9d6ee; font: 600 12px/1 Roboto, system-ui, sans-serif; color: var(--a-royal, #2f6db5); cursor: pointer; }
.bio-again:hover { background: #f4f8ff; }
.bio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 12px 0 26px; }
.bio-card { display: block; padding: 16px; text-align: left; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #dbe3f2, 0 10px 24px -18px rgba(16, 42, 100, .5); cursor: pointer; transition: box-shadow .15s, transform .15s; }
.bio-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--a-royal, #2f6db5), 0 14px 28px -18px rgba(16, 42, 100, .6); }
.bio-card b { display: block; margin-bottom: 5px; font: 700 14px/1.3 Roboto, system-ui, sans-serif; color: var(--a-indigo, #1d2a55); }
.bio-card span { font-size: 12.5px; line-height: 1.5; color: #6b7390; }
.bio-cards.is-small .bio-card { padding: 10px 13px; font: 600 12.5px/1.3 Roboto, system-ui, sans-serif; color: #55607d; box-shadow: 0 0 0 1px #e2e8f4; }
.bio-draw { display: flex; gap: 22px; align-items: flex-start; max-width: none; margin: 0; padding: 22px 24px 50px; }
.bio-draw .sts-side { flex: 0 0 236px; display: flex; flex-direction: column; gap: 16px; }
.bio-draw .sts-plot { flex: 1 1 auto; min-width: 0; }
.bio-draw .sts-plot svg { display: block; width: 100%; max-width: 820px; height: auto; margin: 0 auto; }
.bio-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bio-row label { font-size: 11.5px; color: #6b7390; }
.bio-row input { width: 74px; padding: 5px 7px; border: 1px solid #dbe3f2; border-radius: 8px; font-size: 12.5px; }
.bio-draw .sts-ps input[type="text"] { width: 100%; padding: 6px 9px; border: 1px solid #dbe3f2; border-radius: 9px; font-size: 12.5px; }
.bio-draw .sts-ps input[type="range"] { width: 168px; vertical-align: middle; }
@media (max-width: 880px) { .bio-draw { flex-direction: column; } .bio-draw .sts-side { flex: 1 1 auto; width: 100%; } }

/* the three ways out of the Bioinformatics studio */
.bio-dlw { display: flex; align-items: center; gap: 6px; }
.bio-dll { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 Roboto, system-ui, sans-serif; color: #6b7390; }
.bio-dll svg { width: 15px; height: 15px; }
.bio-dlw button { padding: 7px 12px; border: 0; border-radius: 9px; background: #eef3fc; box-shadow: inset 0 0 0 1px #d9e3f5; font: 700 11.5px/1 Roboto, system-ui, sans-serif; color: #2f6db5; letter-spacing: .3px; cursor: pointer; transition: background .15s, box-shadow .15s; }
.bio-dlw button:hover { background: #2f6db5; box-shadow: none; color: #fff; }

/* the Bioinformatics studio's sidebar row: its own mark, and a name that fits one line */
.aai .aai-side-graphs.is-bio .sts-side-ico { background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><circle cx='6' cy='17' r='2.3' fill='%235790cc'/><circle cx='11' cy='12' r='2' fill='%235790cc'/><circle cx='17' cy='7' r='2.3' fill='%23e07a56'/><circle cx='18.5' cy='14' r='1.7' fill='%23e07a56'/><path d='M3 20.5h18' stroke='%23b9c4da' stroke-width='1.6' stroke-linecap='round'/></svg>"); background-size: 18px 18px; background-position: center; background-repeat: no-repeat; }
.aai .aai-side-graphs.is-bio > span:not(.sts-side-ico) { white-space: nowrap; }

/* how many of the typed names were actually in the table */
.bio-found-n { display: block; margin-top: 6px; font-size: 11px; line-height: 1.45; color: #7b839b; }
.bio-found-n.is-ok { color: #2f8f6b; }
.bio-found-n.is-miss { color: #b4633f; }

/* something to try when the client has no file open */
.bio-eg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.bio-eg > span { font-size: 12.5px; color: #7b839b; margin-right: 2px; }
.bio-eg button { padding: 7px 13px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #d9e3f5; font: 600 12.5px/1 Roboto, system-ui, sans-serif; color: #2f6db5; cursor: pointer; transition: background .15s, box-shadow .15s, transform .15s; }
.bio-eg button:hover { background: #2f6db5; color: #fff; box-shadow: none; transform: translateY(-1px); }

/* Bioinformatics studio: scope line and the warnings under a read table (2026-10-30) */
.bio-scope { margin: -8px 0 18px; padding: 10px 14px; border-radius: 10px; background: #f4f7fd; box-shadow: inset 0 0 0 1px #dfe7f5; font-size: 12.5px; line-height: 1.55; color: #55607d; }
.bio-say.is-bad span { flex: 1 1 100%; font-size: 12.5px; line-height: 1.55; color: #8a4a36; }
.bio-notes { flex: 1 1 100%; margin: 4px 0 0; padding: 0 0 0 18px; font-size: 12.5px; line-height: 1.55; color: #8a5a12; }
.bio-notes li { margin: 2px 0; }
.bio-draw .sts-ps select { width: 100%; padding: 6px 9px; border: 1px solid #dbe3f2; border-radius: 9px; background: #fff; font-size: 12.5px; color: var(--a-indigo, #1d2a55); }

/* Bioinformatics studio: recommended figure, figure switcher, look settings (2026-10-30) */
.bio-rec { display: inline-block; margin: 0 0 6px; padding: 2px 8px; border-radius: 999px; background: #e8f6ef; color: #0f7a55; font: 700 10.5px/1.5 Roboto, system-ui, sans-serif; font-style: normal; letter-spacing: .02em; }
.bio-card.is-rec { box-shadow: 0 0 0 2px #9fd8bd, 0 10px 24px -18px rgba(16, 42, 100, .45); }
.bio-card .bio-rec { display: table; }
.bio-many { margin: -2px 0 12px !important; color: #4b5675 !important; }
.bio-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 auto 12px; max-width: 820px; }
.bio-switch > span { margin-right: 4px; font: 700 11.5px/1 Roboto, system-ui, sans-serif; color: #6b7390; text-transform: uppercase; letter-spacing: .05em; }
.bio-switch button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #d8e1f0; font: 600 12px/1.2 Roboto, system-ui, sans-serif; color: #44506b; cursor: pointer; }
.bio-switch button:hover { box-shadow: inset 0 0 0 1px #9db8e3; }
.bio-switch button.is-on { background: #eef4ff; color: var(--a-indigo, #1d2a55); box-shadow: inset 0 0 0 1.5px var(--a-royal, #2f6db5); }
.bio-switch .bio-rec { margin: 0; padding: 1px 6px; font-size: 9.5px; }
.bio-look label { display: flex; justify-content: space-between; margin: 8px 0 4px; font-size: 11.5px; color: #6b7390; }
.bio-look label span { color: var(--a-indigo, #1d2a55); font-weight: 600; }
.bio-look input[type="range"] { width: 100%; }
.bio-look .sts-seg { margin-bottom: 2px; }

.bio-help { margin: 2px 0 8px; font-size: 11.5px; line-height: 1.45; color: #7b839b; }
.bio-lab { display: block; margin: 8px 0 4px; font-size: 11.5px; color: #55607d; }
.bio-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.bio-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 9px; border-radius: 999px; background: #eef4ff; color: var(--a-indigo, #1d2a55); font: 600 11.5px/1.3 Roboto, system-ui, sans-serif; }
.bio-chip.is-miss { background: #fdf0ec; color: #a6432a; text-decoration: line-through; }
.bio-chip button { width: 18px; height: 18px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 13px; line-height: 1; cursor: pointer; }
.bio-chip button:hover { background: rgba(0, 0, 0, .07); }
.bio-lrow { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.bio-clear { padding: 4px 10px; border: 0; border-radius: 8px; background: transparent; color: #6b7390; font: 600 11.5px Roboto, system-ui, sans-serif; cursor: pointer; }
.bio-clear:hover { background: #f1f4fa; }

/* Bioinformatics studio: appearance panel under the figure (2026-10-30) */
.bio-appear { max-width: 900px; margin: 18px auto 0; padding: 16px 18px 18px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #e3e9f4, 0 14px 30px -26px rgba(16, 42, 100, .5); }
.bio-appear h4 { margin: 0 0 12px; font: 700 12px/1 Roboto, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #6b7390; }
.bio-ap-grid { display: grid; grid-template-columns: 1.15fr 1.3fr 1fr .9fr; gap: 0; }
.bio-ap-col { padding: 0 16px; border-left: 1px solid #edf1f7; min-width: 0; }
.bio-ap-col:first-child { padding-left: 0; border-left: 0; }
.bio-ap-col:last-child { padding-right: 0; }
.bio-ap-col > b { display: block; margin-bottom: 8px; font: 700 13px/1.2 Roboto, system-ui, sans-serif; color: var(--a-indigo, #1d2a55); }
.bio-ap-col label { display: flex; justify-content: space-between; margin: 8px 0 4px; font-size: 11.5px; color: #6b7390; }
.bio-ap-col label:first-of-type { margin-top: 0; }
.bio-ap-col label span { color: var(--a-indigo, #1d2a55); font-weight: 600; }
.bio-ap-col input[type="text"] { width: 100%; box-sizing: border-box; padding: 6px 9px; border: 1px solid #dbe3f2; border-radius: 9px; font-size: 12.5px; }
.bio-ap-col input[type="range"] { width: 100%; }
.bio-ap-col .sts-seg { display: inline-flex; }
.bio-pals { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bio-pals button { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 0; border-radius: 9px; background: #f6f8fc; box-shadow: inset 0 0 0 1px #e3e9f4; font: 600 12px/1.2 Roboto, system-ui, sans-serif; color: #44506b; cursor: pointer; }
.bio-pals button i { flex: none; width: 22px; height: 12px; border-radius: 4px; }
.bio-pals button.is-on { background: #eef4ff; color: var(--a-indigo, #1d2a55); box-shadow: inset 0 0 0 1.5px var(--a-royal, #2f6db5); }
@media (max-width: 1100px) { .bio-ap-grid { grid-template-columns: 1fr 1fr; gap: 16px 0; } .bio-ap-col:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 640px) { .bio-ap-grid { grid-template-columns: 1fr; } .bio-ap-col { padding: 0; border-left: 0; } }

/* figure page: switcher above, appearance below, the white card for the figure alone */
.bio-draw .bio-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.bio-main > .bio-switch { width: 100%; max-width: none; margin: 0 0 12px; }
.bio-main > .bio-appear { width: 100%; max-width: none; margin: 16px 0 0; box-sizing: border-box; }
.bio-main > .bio-appear { background: #f3f6fb; box-shadow: inset 0 0 0 1px #e1e7f2; } /* only the figure sits on white */
.bio-main > .bio-appear .bio-ap-col { border-left-color: #e1e7f2; }
.bio-main > .bio-appear .bio-pals button { background: #fff; }

/* Graph studio intro: like the other studios, with every graph as a name (2026-10-30) */
.gs-chips-head { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 8px; }
.gs-chips-head b { font: 700 14px/1 Roboto, sans-serif; color: #1f2a37; }
.gs-chips-head span { font-size: 12.5px; color: #5b6b86; }
.gs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gs-chip { padding: 6px 11px; border: 1px solid #d6e2f1; border-radius: 999px; background: #fff; font: 600 12.5px/1.2 Roboto, sans-serif; color: #33415c; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.gs-chip:hover, .gs-chip.is-on { border-color: #2f7bc4; background: #eef5fd; color: #1f5f9e; }
.gs-chip:focus-visible { outline: 2px solid #2f7bc4; outline-offset: 2px; }
.gs-prev { aspect-ratio: 640 / 400; }
.gs-prev svg { display: block; width: 100%; height: 100%; }
.gs-prev-cap { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 6px 0 2px; font-size: 12.5px; color: #66728c; }
.gs-prev-cap b { color: #1d2a55; font-size: 13px; }

/* quick opening (2026-10-31): small, calm card; opens as soon as the figure is loaded */
.aai-opening.aai-opening-q { min-height: min(420px, 60vh); padding: 24px; background: none; border-radius: 0; }
.aai-opening.aai-opening-q::before { display: none; }
.aai-oq-card { display: grid; justify-items: center; gap: 8px; width: min(360px, 92%); padding: 26px 28px 24px; border: 1px solid #dbe5f1; border-radius: 14px; background: #fff; animation: oqIn .2s ease both; }
.aai-oq-kind { font: 600 12.5px/1 var(--a-body); color: #2f6db5; letter-spacing: .01em; }
.aai-opening.aai-opening-q h3 { margin: 2px 0 0; font: 700 19px/1.25 var(--a-head); color: var(--a-ink); letter-spacing: 0; }
.aai-opening.aai-opening-q p { margin: 0; font-size: 13.5px; color: var(--a-muted); }
.aai-opening.aai-opening-q .aai-op-bar { width: 100%; height: 3px; margin-top: 10px; background: #e6edf7; }
.aai-opening.aai-opening-q .aai-op-bar b { width: 35%; background: #2f6db5; animation: opBar 1s ease-in-out infinite; }
@keyframes oqIn { from { opacity: 0; } to { opacity: 1; } }
.aai-oq-card { overflow: hidden; }
.aai-opening.aai-opening-q .aai-oq-card .aai-op-bar { justify-self: stretch !important; width: auto !important; max-width: 100% !important; height: 3px !important; margin: 10px 0 0 !important; }

/* opening card: one light looping drawing per studio */
.aai-oq-art { width: 142px; height: 64px; margin-bottom: 2px; }
.aai-oq-art * { fill: none; stroke: #2f6db5; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aai-oq-art .oq-ax { stroke: #c5d5e8; stroke-width: 1.6; }
.aai-oq-art .oq-dash { stroke-dasharray: 3 3; }
.aai-oq-art .oq-d { stroke-dasharray: 1; stroke-dashoffset: 1; animation: oqDraw 1.6s ease-in-out var(--w, 0s) infinite; }
.aai-oq-art .oq-p { fill: #2f6db5; stroke: none; opacity: 0; animation: oqFade 1.6s ease var(--w, 0s) infinite; }
.aai-oq-art .oq-p.oq-hot { fill: #e07a4f; }
.aai-oq-art .oq-g, .aai-oq-art .oq-g2 { fill: #cfdff2; stroke: #2f6db5; stroke-width: 1.4; transform-box: fill-box; transform-origin: 50% 100%; animation: oqGrow 1.6s ease var(--w, 0s) infinite; }
.aai-oq-art .oq-g2 { fill: #2f6db5; transform-origin: 0 50%; animation-name: oqWide; }
.aai-oq-art .oq-t { fill: #e8f0f9; stroke: #9db8d9; stroke-width: 1.4; opacity: 0; animation: oqFade 1.6s ease var(--w, 0s) infinite; }
.aai-oq-art .oq-r { fill: #e8f0f9; stroke: #9db8d9; stroke-width: 1.2; animation: oqFill 1.6s ease var(--w, 0s) infinite; }
@keyframes oqDraw { 0% { stroke-dashoffset: 1; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes oqFade { 0% { opacity: 0; } 30%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes oqGrow { 0% { transform: scaleY(0); } 40%, 85% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes oqWide { 0% { transform: scaleX(0); } 40%, 85% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes oqFill { 0% { fill: #f4f8fc; } 40%, 85% { fill: #9cc0e6; } 100% { fill: #f4f8fc; } }
@media (prefers-reduced-motion: reduce) { .aai-oq-art * { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; } }

/* ==== graph dialog, calm theme (2026-10-31): one ground, thin lines, one blue, flat controls ==== */
.aai-chartdlg { background: rgba(14, 34, 56, .32) !important; backdrop-filter: blur(2px); }
.aai-chartdlg .aai-chart-card { padding: 22px 24px 20px !important; border-radius: 14px !important; border: 1px solid #d6e1ee !important; background: #fff !important; box-shadow: 0 24px 60px -30px rgba(14, 34, 56, .35) !important; }
.aai-chartdlg .aai-ch-head { align-items: flex-start; margin-bottom: 16px !important; padding-bottom: 14px; border-bottom: 1px solid #e3ebf4; }
.aai-chartdlg .aai-ch-head .aai-eyebrow { display: none !important; }
.aai-chartdlg .aai-ch-head h3 { margin: 0 !important; font: 700 20px/1.25 Roboto, sans-serif !important; color: #0e2238 !important; letter-spacing: 0 !important; }
.aai-chartdlg .aai-ch-sub { margin: 4px 0 0; font-size: 13.5px; color: #62748a; }
.aai-chartdlg .aai-icon-btn { width: 34px !important; height: 34px !important; border-radius: 8px !important; background: #f4f8fc !important; border: 1px solid #d6e1ee !important; color: #3c4d63 !important; font-size: 14px !important; box-shadow: none !important; }
.aai-chartdlg .aai-icon-btn:hover { background: #e8f0f9 !important; color: #2f6db5 !important; }
.aai-chartdlg .aai-cht-body { gap: 20px !important; }
.aai-chartdlg .aai-cht-tabs { display: flex !important; gap: 2px !important; padding: 3px !important; margin-bottom: 14px !important; border: 1px solid #d6e1ee !important; border-radius: 9px !important; background: #f4f8fc !important; box-shadow: none !important; }
.aai-chartdlg .aai-cht-tabs button { flex: 1; padding: 8px 12px !important; border: 0 !important; border-radius: 7px !important; background: none !important; box-shadow: none !important; font: 600 13.5px Roboto, sans-serif !important; color: #3c4d63 !important; }
.aai-chartdlg .aai-cht-tabs button.is-on { background: #fff !important; color: #2f6db5 !important; box-shadow: 0 0 0 1px #b9cde6 inset !important; }
.aai-chartdlg .aai-cht-tw { border: 1px solid #d6e1ee !important; border-radius: 10px !important; overflow: auto; box-shadow: none !important; background: #fff !important; }
.aai-chartdlg .aai-cht-t { border-collapse: collapse !important; width: 100%; font-size: 13.5px !important; }
.aai-chartdlg .aai-cht-t thead th { background: #f4f8fc !important; border-bottom: 1px solid #d6e1ee !important; font: 600 12.5px Roboto, sans-serif !important; color: #3c4d63 !important; text-transform: none !important; letter-spacing: 0 !important; padding: 8px 10px !important; }
.aai-chartdlg .aai-cht-t td { border-bottom: 1px solid #edf2f8 !important; padding: 0 !important; background: #fff !important; }
.aai-chartdlg .aai-cht-t tbody tr:last-child td { border-bottom: 0 !important; }
.aai-chartdlg .aai-cht-t td + td, .aai-chartdlg .aai-cht-t th + th { border-left: 1px solid #edf2f8 !important; }
.aai-chartdlg .aai-cht-t input { width: 100%; padding: 9px 10px !important; border: 0 !important; background: transparent !important; font: 400 13.5px Roboto, sans-serif !important; color: #0e2238 !important; border-radius: 0 !important; box-shadow: none !important; }
.aai-chartdlg .aai-cht-t td:first-child input { font-weight: 600 !important; min-width: 168px; }
.aai-chartdlg .aai-cht-t thead input { font-weight: 600 !important; padding: 2px 4px !important; }
.aai-chartdlg .aai-cht-t input:focus { outline: 2px solid #2f6db5 !important; outline-offset: -2px; background: #f7faff !important; }
.aai-chartdlg .aai-cht-eh, .aai-chartdlg .aai-cht-ec input { color: #62748a !important; }
.aai-chartdlg .aai-cht-sw { width: 14px !important; height: 14px !important; border-radius: 4px !important; box-shadow: none !important; }
.aai-chartdlg .aai-cht-add button { background: none !important; border: 0 !important; color: #2f6db5 !important; font: 600 12.5px Roboto, sans-serif !important; padding: 0 !important; }
.aai-chartdlg .aai-cht-tools { display: flex; flex-wrap: wrap; gap: 8px !important; margin-top: 12px !important; }
.aai-chartdlg .aai-cht-radd { padding: 7px 12px !important; border: 1px solid #d6e1ee !important; border-radius: 8px !important; background: #fff !important; color: #2f6db5 !important; font: 600 12.5px Roboto, sans-serif !important; box-shadow: none !important; cursor: pointer; }
.aai-chartdlg .aai-cht-radd:hover { background: #f4f8fc !important; border-color: #b9cde6 !important; }
.aai-chartdlg .aai-cht-note { padding: 8px 12px !important; border-radius: 8px !important; background: #f4f8fc !important; border: 1px solid #e3ebf4 !important; color: #3c4d63 !important; font-size: 12.5px !important; }
.aai-chartdlg .aai-cht-prev { border: 1px solid #d6e1ee !important; border-radius: 10px !important; background: #f4f8fc !important; box-shadow: none !important; padding: 14px !important; }
.aai-chartdlg .aai-cht-prev svg { background: #fff; border-radius: 6px; }
.aai-chartdlg .aai-cht-foot { margin-top: 14px !important; align-items: center; }
.aai-chartdlg .aai-cht-foot span { font-size: 12.5px !important; color: #62748a !important; }
.aai-chartdlg .aai-btn-warm, .aai-chartdlg [data-cins] { min-height: 40px; padding: 0 22px !important; border: 0 !important; border-radius: 8px !important; background: #2f6db5 !important; color: #fff !important; font: 600 14px Roboto, sans-serif !important; box-shadow: none !important; }
.aai-chartdlg [data-cins]:hover { background: #245a98 !important; }
.aai-chartdlg .aai-cht-pl { font: 600 12px Roboto, sans-serif !important; color: #62748a !important; text-transform: none !important; letter-spacing: 0 !important; }
.aai-chartdlg .aai-cht-seg { border: 1px solid #d6e1ee !important; border-radius: 8px !important; background: #f4f8fc !important; padding: 3px !important; box-shadow: none !important; }
.aai-chartdlg .aai-cht-seg button { border-radius: 6px !important; border: 0 !important; background: none !important; color: #3c4d63 !important; font: 600 12.5px Roboto, sans-serif !important; box-shadow: none !important; }
.aai-chartdlg .aai-cht-seg button.is-on { background: #fff !important; color: #2f6db5 !important; box-shadow: 0 0 0 1px #b9cde6 inset !important; }
.aai-chartdlg .aai-cht-f input, .aai-chartdlg .aai-cht-note-r input { border: 1px solid #d6e1ee !important; border-radius: 8px !important; background: #fff !important; box-shadow: none !important; }
.aai-chartdlg .aai-cht-types button { border: 1px solid #d6e1ee !important; border-radius: 8px !important; background: #fff !important; box-shadow: none !important; }
.aai-chartdlg .aai-cht-types button.is-on { border-color: #2f6db5 !important; box-shadow: 0 0 0 1px #2f6db5 inset !important; }
.aai-chartdlg .aai-cht-pals button { border-radius: 8px !important; box-shadow: none !important; }
.aai-chartdlg .aai-cht-pals button.is-on { box-shadow: 0 0 0 2px #2f6db5 !important; }
.aai-chartdlg input[type=range] { accent-color: #2f6db5; }
.aai-chartdlg input[type=checkbox] { accent-color: #2f6db5; }
.aai-chartdlg .aai-cht-f > span, .aai-chartdlg .aai-cht-range > span { font: 600 12px Roboto, sans-serif !important; color: #62748a !important; text-transform: none !important; letter-spacing: 0 !important; }

/* theme-matched dialog (plans, add-ons, membership notices) */
.aai-qdlg { position: fixed; inset: 0; z-index: 100050; display: grid; place-items: center; padding: 20px; background: rgba(14, 34, 56, .32); opacity: 0; transition: opacity .16s; font-family: Roboto, system-ui, sans-serif; }
.aai-qdlg.is-in { opacity: 1; }
.aai-qdlg-card { width: min(460px, 100%); padding: 24px 24px 18px; border: 1px solid #d6e1ee; border-radius: 14px; background: #fff; box-shadow: 0 24px 60px -30px rgba(14, 34, 56, .35); transform: translateY(6px); transition: transform .16s; }
.aai-qdlg.is-in .aai-qdlg-card { transform: none; }
.aai-qdlg h3 { margin: 0 0 8px; font: 700 19px/1.3 Roboto, sans-serif; color: #0e2238; }
.aai-qdlg-text { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: #3c4d63; }
.aai-qdlg-choices { display: grid; gap: 10px; }
.aai-qdlg-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 12px 16px; border: 1px solid #d6e1ee; border-radius: 10px; background: #fff; text-align: left; font: inherit; cursor: pointer; text-decoration: none !important; transition: border-color .15s, background-color .15s; }
.aai-qdlg-opt b { font-size: 15px; font-weight: 600; color: #0e2238; }
.aai-qdlg-opt span { font-size: 13px; color: #62748a; }
.aai-qdlg-opt:hover { border-color: #9db8d9; background: #f7faff; }
.aai-qdlg-opt.is-primary { border-color: #2f6db5; background: #2f6db5; }
.aai-qdlg-opt.is-primary b { color: #fff; } .aai-qdlg-opt.is-primary span { color: #dce8f6; }
.aai-qdlg-opt.is-primary:hover { background: #245a98; }
.aai-qdlg-opt:focus-visible { outline: 2px solid #2f6db5; outline-offset: 2px; }
.aai-qdlg-x { display: block; margin: 14px auto 0; padding: 6px 12px; border: 0; background: none; font: 600 13.5px Roboto, sans-serif; color: #62748a; cursor: pointer; }
.aai-qdlg-x:hover { color: #2f6db5; }
.aai-plan-see { margin: 12px 0; }

.aai-qdlg { z-index: 2147483000 !important; }

/* Studio price tag beside the start button */
.aai .ps-intro-acts { align-items: flex-start; }
.aai-ptag { flex: 1 1 300px; max-width: 460px; border: 1px solid #d6e3f5; background: #fff; border-radius: 12px; padding: 12px 14px; font-size: 13px; color: #33465f; line-height: 1.45; }
.aai-ptag.is-addon { border-color: #f7c9a4; background: #fffaf5; }
.aai-ptag-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.aai-ptag-k { font-weight: 700; color: #1b4e9b; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.aai-ptag.is-addon .aai-ptag-k { color: #d9560f; }
.aai-ptag-p { display: inline-flex; align-items: baseline; gap: 4px; }
.aai-ptag-p b { font-size: 18px; color: #0f2747; font-weight: 700; }
.aai-ptag-r { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.aai-ptag-r .aai-ptag-p > span:first-child { font-weight: 600; color: #0f2747; }
.aai-ptag-r .aai-ptag-p b { font-size: 15px; }
.aai-ptag p { margin: 6px 0 0 !important; font-size: 13px !important; color: #33465f !important; }
.aai-ptag-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e7eef8; font-size: 12.5px; color: #5b6b80; }
.aai-ptag-f a { font-weight: 600; color: #fff !important; background: #1f5fbf; border-radius: 8px; padding: 6px 12px; text-decoration: none !important; white-space: nowrap; }
.aai-ptag.is-addon .aai-ptag-f a { background: linear-gradient(90deg, #f26a1b, #ff8a00); }
.aai-ptag.is-in { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; color: #17703d; border-color: #bfe3cc; background: #f3fbf6; font-weight: 600; align-self: center; }
.aai-ptag.is-in svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.4; }

/* What is left, and locked studios */
.aai-left { display: inline-flex; align-items: baseline; gap: 4px; font-size: 13px; color: #33465f; }
.aai-left b { font-size: 15px; color: #0f2747; }
.aai-left.is-unl b, .aai-ptag .aai-inf { color: #17703d; font-size: 16px; }
.aai-left.is-0 { color: #b4471a; }
.aai-left.is-0 b { color: #b4471a; }
.aai-left svg, .aai-ptag-f a svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; align-self: center; margin-right: 2px; }
.aai-ptag-f a { display: inline-flex; align-items: center; gap: 4px; }
.aai-ptag.is-locked { border-color: #f2c2a6; }
.ps-intro-acts:has(.aai-ptag.is-locked) .ps-dl, .ps-intro-acts:has(.aai-ptag.is-locked) .pi-hint { display: none !important; }
.aai-ptag.is-locked .aai-ptag-f a { background: linear-gradient(90deg, #f26a1b, #ff8a00); }
.aai-sg-lock { margin-left: auto; display: inline-flex; color: #b4471a; }
.aai-sg-lock svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.aai-side-graphs.is-locked > span:not(.aai-sg-lock), .aai-folder-row [data-folder].is-locked > span { opacity: .6; }
.aai-ch-left { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 4px; }
.aai-ch-item.is-locked { opacity: .55; }
.aai-go-left { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 8px 0 6px !important; text-align: center; }
.aai-go[data-lock-go] svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; margin-right: 6px; }

/* calm blue for every price tag and used studio, no lock icons (owner, 2026-10-31) */
.aai-ptag.is-addon, .aai-ptag.is-locked { border-color: #cfdff3; background: #f7faff; }
.aai-ptag.is-addon .aai-ptag-k { color: #1b4e9b; }
.aai-ptag.is-addon .aai-ptag-f a, .aai-ptag.is-locked .aai-ptag-f a { background: #2f6fd1; }
.aai-ptag-f a:hover { background: #1f5fbf !important; }
.aai-left.is-0, .aai-left.is-0 b { color: #4a6a96; }
.aai .aai-side-graphs.is-locked > span, .aai .aai-folder-row [data-folder].is-locked > span { opacity: 1 !important; color: #8fa9cc !important; }
.aai .aai-side-graphs.is-locked > span[aria-hidden], .aai .aai-folder-row [data-folder].is-locked .aai-gen-dot { opacity: .45 !important; filter: saturate(.5); }
.aai-ch-item.is-locked { opacity: .6; filter: saturate(.7); }

/* Membership, add-on and credit windows (2026-11) */
.aai-qdlg-card.aai-buy { max-width: 520px; text-align: left; }
.aai-buy-per { display: inline-flex; border: 1px solid #d6e3f5; border-radius: 10px; padding: 3px; margin: 4px 0 12px; background: #f5f9ff; }
.aai-buy-per button { border: 0; background: none; padding: 7px 14px; border-radius: 8px; font: 600 13px/1 inherit; color: #33465f; cursor: pointer; }
.aai-buy-per button.is-on { background: #fff; color: #1b4e9b; box-shadow: 0 1px 3px rgba(20,50,100,.12); }
.aai-buy-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e1eaf6; border-radius: 10px; margin: 0 0 8px; background: #fff; cursor: pointer; }
.aai-buy-row.is-base { background: #f5f9ff; border-color: #cfdff3; cursor: default; }
.aai-buy-row input { width: 18px; height: 18px; accent-color: #2f6fd1; flex: 0 0 auto; }
.aai-buy-row > span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.aai-buy-row b { color: #0f2747; font-size: 14px; }
.aai-buy-row em { font-style: normal; font-size: 12.5px; color: #5b6b80; line-height: 1.35; }
.aai-buy-row strong { font-size: 13.5px; color: #1b4e9b; white-space: nowrap; }
.aai-buy-row:has(input:checked) { border-color: #9fc0ec; background: #f7faff; }
.aai-buy-row:has(input:disabled) { opacity: .55; cursor: default; }
.aai-buy-h { margin: 14px 0 8px !important; font-weight: 700; color: #0f2747; font-size: 13px; }
.aai-buy-h span { font-weight: 400; color: #5b6b80; margin-left: 6px; }
.aai-buy-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 2px 4px; border-top: 1px solid #e7eef8; margin-top: 10px; color: #33465f; font-size: 14px; }
.aai-buy-total > b { font-size: 20px; color: #0f2747; }
.aai-buy-go { width: 100%; margin-top: 10px; padding: 12px 16px; border: 0; border-radius: 10px; background: #2f6fd1; color: #fff; font: 600 15px/1 inherit; cursor: pointer; }
.aai-buy-go:hover { background: #1f5fbf; }
.aai-buy-go:disabled { background: #9db6da; cursor: default; }
.aai-buy-err { color: #b3261e; font-size: 13px; margin: 8px 0 0 !important; }
.aai-buy-fine { font-size: 12px; color: #6b7a8f; margin: 8px 0 0 !important; text-align: center; }
.aai-buy-n { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 6px; }
.aai-buy-n button { min-width: 40px; height: 40px; border: 1px solid #d6e3f5; border-radius: 10px; background: #fff; font: 600 15px/1 inherit; color: #1b4e9b; cursor: pointer; }
.aai-buy-n input { width: 90px; height: 40px; text-align: center; border: 1px solid #cfdff3; border-radius: 10px; font: 700 18px/1 inherit; color: #0f2747; }
.aai-buy-link { font-size: 12.5px; font-weight: 600; color: #1f5fbf; text-decoration: none; }
.aai-addon-list { margin: 16px 0 8px; display: flex; flex-direction: column; gap: 8px; }
.aai-addon-list > b { color: #0f2747; font-size: 14px; }
.aai-addon-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #e1eaf6; border-radius: 10px; background: #fff; }
.aai-addon-item > span { display: flex; flex-direction: column; gap: 2px; }
.aai-addon-item em { font-style: normal; font-size: 12.5px; color: #5b6b80; }
.aai-addon-on { display: inline-flex; align-items: center; gap: 4px; font-style: normal; color: #17703d; font-weight: 600; font-size: 13px; }
.aai-addon-on svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.aai-credit-buy { margin-bottom: 14px; }

.aai-account.is-gift { border-color: #cfdff3; background: #f5f9ff; }
.aai-gift-line { color: #1b4e9b; font-weight: 600; }

/* Ticks: always dead centre in their circles, whatever the circle size (2026-11-01) */
.aai-stagelist li { padding-left: 16px !important; }
.aai .aai-stagelist li i { width: 24px !important; height: 24px !important; flex: 0 0 24px; display: block; }
.aai .aai-stagelist li.is-done i::after { left: 50% !important; top: 46% !important; width: 6px !important; height: 11px !important; transform: translate(-50%, -50%) rotate(45deg) !important; }
.aai-show-ok::after { left: 50% !important; top: 46% !important; transform: translate(-50%, -50%) rotate(45deg) !important; }

/* Redraw with changes (0.5 credit) */
.aai-stagewrap { position: relative; }
.aai-redraw-fab { position: absolute; right: 96px; bottom: 22px; z-index: 30; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 999px; background: #2f6fd1; color: #fff; font: 600 14px/1 inherit; box-shadow: 0 12px 26px -12px rgba(20, 60, 140, .7); cursor: pointer; }
.aai-redraw-fab:hover { background: #1f5fbf; }
.aai-redraw-fab svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.aai-redraw-fab em { font-style: normal; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .2); font-size: 12.5px; }
.aai-redraw-in { width: 100%; box-sizing: border-box; margin: 10px 0 8px; padding: 10px 12px; border: 1px solid #cfdff3; border-radius: 10px; font: 14px/1.5 inherit; color: #0f2747; resize: vertical; }
.aai-redraw-in:focus { outline: none; border-color: #2f6fd1; box-shadow: 0 0 0 3px rgba(47, 111, 209, .15); }
.aai-redraw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.aai-redraw-chips button { padding: 5px 10px; border: 1px solid #d6e3f5; border-radius: 999px; background: #f5f9ff; color: #1b4e9b; font: 600 12.5px inherit; cursor: pointer; }
.aai-redraw-chips button:hover { background: #e8f1ff; }
.aai-redraw-bal { margin: 4px 0 0 !important; font-size: 13px; color: #4a6a96; }

/* aFig Visual Studio */
.aai-vs-btn { display: flex; align-items: center; gap: 10px; width: 100%; margin: 4px 0 12px; padding: 12px 14px; border: 1px solid #b9d3ef; border-radius: 12px; background: #eef5ff; color: #1b4e9b; text-align: left; cursor: pointer; }
.aai-vs-btn:hover { background: #e3eefd; }
.aai-vs-ico { flex: none; display: grid; place-items: center; width: 28px; height: 24px; border-radius: 7px; background: #e3eefd; }
.aai-vs-ico svg { width: 22px; height: 22px; display: block; }
.aai-vs-btn b { display: block; font-size: 15px; color: #0f3a78; }
.aai-vs-btn em { display: block; font-style: normal; font-size: 12px; color: #4a6a96; margin-top: 2px; }
.aai-vs-detect { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 2px; font-size: 13px; color: #4a6a96; }
.aai-vs-detect .aai-vs-t { padding: 3px 10px; border-radius: 999px; background: #e6f5ec; color: #17703d; font-weight: 700; }
.aai-vs-detect .aai-vs-c { margin-left: 4px; color: #7a8ca6; }
.aai-vs-detect button { padding: 3px 10px; border: 1px solid #d6e3f5; border-radius: 999px; background: #fff; color: #1b4e9b; font: 600 12.5px inherit; cursor: pointer; }
.aai-vs-detect button:hover { background: #f1f7ff; }

/* aFig Visual Studio intro */
.aai-vsi-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.aai-vsi-kind { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid #dfe7f2; border-radius: 14px; background: #fff; }
.aai-vsi-kind .aai-ch-art { aspect-ratio: 16 / 10; border: 1px solid #eef2f8; }
.aai-vsi-kind .aai-ch-art > * { width: 100%; height: 100%; }
.aai-vsi-kind b { margin-top: 4px; font-size: 15px; color: #10325f; }
.aai-vsi-kind em { font-style: normal; font-size: 13px; line-height: 1.45; color: #5b6b82; }
.aai-vsi-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.aai-vsi-steps li { display: flex; gap: 10px; align-items: flex-start; }
.aai-vsi-steps li > span { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #eaf2fc; color: #2f6fb8; font-weight: 700; font-size: 13px; }
.aai-vsi-steps b { display: block; font-size: 14px; color: #10325f; }
.aai-vsi-steps em { font-style: normal; font-size: 13px; line-height: 1.45; color: #5b6b82; }
.aai-vsi-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 24px; }
.aai-vsi-cost { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: #5b6b82; }
@media (max-width: 900px) { .aai-vsi-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aai-vsi-steps { grid-template-columns: 1fr; } }
.aai-vsi-engine { display: flex; gap: 14px; align-items: center; margin-top: 24px; padding: 14px 16px; border: 1px solid #dfe7f2; border-radius: 14px; background: linear-gradient(90deg, #f3f8ff, #fff8f2); }
.aai-vsi-engine b { display: block; font-size: 15px; color: #10325f; }
.aai-vsi-engine em { font-style: normal; font-size: 13px; line-height: 1.5; color: #5b6b82; }
.aai-vsi-eng-mark { flex: none; position: relative; width: 38px; height: 38px; border-radius: 11px; background: #2f7bc4; }
.aai-vsi-eng-mark i { position: absolute; left: 9px; height: 3px; border-radius: 2px; background: #fff; }
.aai-vsi-eng-mark i:nth-child(1) { top: 11px; width: 20px; } .aai-vsi-eng-mark i:nth-child(2) { top: 17.5px; width: 14px; background: #ff9a3c; } .aai-vsi-eng-mark i:nth-child(3) { top: 24px; width: 18px; }
.aai-vs-btn .aai-vs-ico { flex: 0 0 30px !important; width: 30px !important; min-width: 0 !important; height: 28px !important; padding: 0 !important; }
.aai-vs-btn .aai-vs-ico svg { width: 24px !important; height: 24px !important; }
.aai-vs-btn > span:last-child { flex: 1 1 auto; min-width: 0; }
.aai .aai-z-gens:has(.aai-z-vs) { grid-template-columns: 1fr; }
.aai .aai-z-gen.aai-z-vs { grid-template-columns: 48px 1fr; padding: 20px 22px !important; }
.aai .aai-z-vs .aai-vs-ico.is-lg { width: 48px; height: 48px; border-radius: 13px; background: #e3eefd; grid-row: span 2; }
.aai .aai-z-vs .aai-vs-ico.is-lg svg { width: 36px; height: 36px; }
.aai .aai-z-vs b { font-size: 18px; align-self: end; }
.aai .aai-z-vs-eng { align-self: start; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: #e85d1a; }
.aai .aai-z-vs small { font-size: 14px; }
.aai-z-vs-kinds { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.aai-z-vs-kinds i { font-style: normal; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: #eef4fb; color: #2b5b93; }
.aai .aai-z-vs .aai-z-go { grid-column: 1 / -1; margin-top: 16px; padding: 10px 18px; border-radius: 10px; background: #2f7bc4; color: #fff !important; font-size: 14.5px; transition: background .15s; }
.aai .aai-z-vs:hover .aai-z-go { background: #2567ad; }
.aai .aai-z-vs .aai-z-go svg { stroke: #fff; }
.vs-art .sts-ia-card { padding: 12px; }
.vs-prev .aai-ch-art { display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #fff; }
.vs-prev .aai-ch-art > * { width: 100%; height: 100%; }
/* Visual Studio band: button and engine badge on one line */
.ps-intro-acts.vs-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.vs-intro-eng { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid #f6d3bd; background: #fff6ef; font-size: 13px; font-weight: 600; color: #c4500f; }
.vs-intro-eng i { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #f26a1b, #ff8a00); }
/* Visual Studio slider */
.vs-slides { position: relative; }
.vs-slides img { display: block; width: 100%; height: auto; border-radius: 12px; opacity: 0; transition: opacity .6s ease; }
.vs-slides img:not(:first-child) { position: absolute; top: 12px; left: 12px; width: calc(100% - 24px); }
.vs-slides img.is-on { opacity: 1; }
.vs-slide-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 12.5px; color: #4a5d78; }
.vs-slide-bar [data-vscap] { font-weight: 600; color: #10325f; }
.vs-dots { display: inline-flex; gap: 6px; }
.vs-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #c9d6e8; cursor: pointer; transition: width .25s, background .25s; }
.vs-dots button.is-on { width: 20px; border-radius: 4px; background: #2f7bc4; }
.vs-art .vs-ia-1 { left: -14px; bottom: 26px; } .vs-art .vs-ia-2 { right: -10px; top: 18px; }
.gs-chip.vs-kind { cursor: default; }
.aai-vs-btn.is-on { background: #dbe9fb; border-color: #9fc2ea; }
.aai-side-home { display: flex; align-items: center; gap: 10px; width: 100%; margin: 2px 0 6px; padding: 10px 14px; border: 0; border-radius: 10px; background: transparent; color: #1b3f6e; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.aai-side-home:hover { background: #eef4fb; }
.aai-side-home.is-on { background: #e6effa; color: #1f5fa8; }
.aai-side-home svg { flex: none; color: #2f7bc4; }
/* Describe page: the text box and the side box end on the same line, Create figure at the bottom of the side box */
.aai .aai-brief-grid { align-items: stretch !important; }
.aai .aai-brief-grid > .aai-brief-main { display: flex !important; flex-direction: column; }
.aai .aai-brief-grid > .aai-brief-main > .aai-compose { flex: 1 1 auto; }
.aai .aai-brief-grid > .aai-brief-side { display: flex !important; flex-direction: column; gap: 10px !important; padding: 16px !important; }
.aai .aai-brief-side .aai-go-left { margin-top: 0 !important; }
.aai .aai-brief-side .aai-go { margin-top: auto !important; }
/* studio top bar: Home pill on the left, back to the main website */
.site-header > .hdr-home { position: absolute; left: 40px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .14); color: #fff !important; font-size: 13.5px; font-weight: 600; text-decoration: none !important; z-index: 2; }
.site-header .hdr-home:hover { background: rgba(255, 255, 255, .24); }
@media (max-width: 700px) { .site-header .hdr-home span { display: none; } .site-header .hdr-home { padding: 0 10px; } }
/* aFig Visual Studio mark: a blue tile with a white cell, an orange nucleus and an arrow (eye-catching, brand colours) */
.aai-vs-ico { background: linear-gradient(135deg, #ff9a2e, #f26a1b 55%, #e2531a) !important; box-shadow: 0 5px 12px -5px rgba(242, 106, 27, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
.aai .aai-z-vs .aai-vs-ico.is-lg { background: linear-gradient(135deg, #ff9a2e, #f26a1b 55%, #e2531a) !important; box-shadow: 0 10px 22px -10px rgba(242, 106, 27, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
.aai-vs-btn:hover .aai-vs-ico { transform: translateY(-1px) rotate(-3deg); transition: transform .2s; }
/* ===== FLOWCHART STUDIO (2026-11-02): text or file → three filled designs → drag-and-link editor; reuses the calm .sts- shell ===== */
.fc-app { --fc: #d9731f; --fc-soft: #fff3e8; }
.fc-badge { color: #a4520f; background: var(--fc-soft); }
.fc-badge-ico { width: 13px; height: 12px; border-radius: 3px; background: linear-gradient(90deg, #d9731f 0 38%, transparent 38% 62%, #2f7bc4 62%); box-shadow: inset 0 0 0 1.5px #fff; }
.fc-main { padding-bottom: 30px; }
/* 1 · start */
.fc-start { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr); gap: 18px; align-items: start; }
.fc-card { background: #fff; border: 1px solid var(--sts-line); border-radius: 16px; padding: 20px; }
.fc-card-h { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.fc-card-h h2 { margin: 0 0 4px; font: 700 18px var(--a-head, inherit); color: var(--sts-ink); }
.fc-card-h p { margin: 0; color: var(--sts-mut); font-size: 13.5px; line-height: 1.5; }
.fc-num { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font: 800 14px var(--a-head, inherit); color: #fff; background: var(--fc); }
.fc-num.is-b { background: #2f7bc4; }
.fc-mode { margin-bottom: 12px; }
.fc-text { width: 100%; box-sizing: border-box; min-height: 200px; padding: 12px 14px; border: 1px solid #d6deec; border-radius: 12px; font: 14px/1.55 var(--a-body, inherit); color: var(--sts-ink); resize: vertical; }
.fc-text:focus { outline: none; border-color: #9cc1e8; }
.fc-count { margin-top: 6px; text-align: right; font-size: 12px; color: var(--sts-mut); } .fc-count.is-over { color: #c0392b; font-weight: 700; }
.fc-try { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; font-size: 12.5px; color: var(--sts-mut); }
.fc-try button { padding: 5px 10px; border: 1px solid #e3e8f4; border-radius: 999px; background: #f7f9fc; font: 600 12.5px var(--a-body, inherit); color: #2a4a72; cursor: pointer; }
.fc-try button:hover { border-color: #b9cde8; background: #eef4fb; }
.fc-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px; border: 1.5px dashed #c9d6ea; border-radius: 14px; background: #fafcff; text-align: center; cursor: pointer; color: #2a4a72; }
.fc-drop svg { width: 26px; height: 26px; color: var(--fc); } .fc-drop b { font-size: 14px; } .fc-drop span { font-size: 12.5px; color: var(--sts-mut); }
.fc-drop.is-over, .fc-drop:hover { border-color: var(--fc); background: var(--fc-soft); } .fc-drop.is-busy { opacity: .6; pointer-events: none; }
.fc-rule { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 9px 11px; border-radius: 10px; background: #f6f8fb; font-size: 12.5px; color: #4a5d7c; line-height: 1.45; } .fc-rule svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: #2f7bc4; }
.fc-file { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 12px; border: 1px solid #e3e8f4; border-radius: 10px; font-size: 13px; } .fc-file svg { width: 16px; height: 16px; color: var(--fc); } .fc-file span { color: var(--sts-mut); margin-left: auto; }
.fc-file button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: #6a7891; cursor: pointer; font-size: 16px; } .fc-file button:hover { background: #fde9e6; color: #c0392b; }
.fc-peek { margin-top: 8px; max-height: 120px; overflow: auto; padding: 10px 12px; border-radius: 10px; background: #f7f9fc; font-size: 12.5px; color: #4a5d7c; white-space: pre-line; }
.fc-go { margin-top: 14px; width: 100%; justify-content: center; }
.fc-search { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid #d6deec; border-radius: 10px; font: 13.5px var(--a-body, inherit); margin-bottom: 10px; }
.fc-gallery { max-height: 62vh; overflow: auto; padding-right: 4px; }
.fc-gh { margin: 12px 0 8px; font: 700 13px var(--a-head, inherit); color: var(--sts-ink); } .fc-gh small { font-weight: 600; color: var(--sts-mut); }
.fc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.fc-tpl { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid #e3e8f4; border-radius: 12px; background: #fff; cursor: pointer; text-align: left; font: 600 12.5px var(--a-body, inherit); color: var(--sts-ink); transition: border-color .15s, transform .15s; }
.fc-tpl:hover { border-color: #b9cde8; transform: translateY(-1px); }
.fc-tpl em { position: absolute; top: 12px; right: 12px; padding: 2px 7px; border-radius: 999px; background: var(--fc-soft); color: #a4520f; font: 700 10.5px var(--a-body, inherit); font-style: normal; }
.fc-thumb { display: block; height: 104px; border-radius: 8px; background: #f7f9fc; overflow: hidden; } .fc-thumb svg { width: 100%; height: 100%; display: block; }
.fc-gallery.is-rail .fc-grid { grid-template-columns: 1fr 1fr; } .fc-gallery.is-rail .fc-thumb { height: 74px; } .fc-gallery.is-rail { max-height: none; }
.fc-none { color: var(--sts-mut); font-size: 13px; }
/* 2 · pick */
.fc-read { display: flex; gap: 16px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }
.fc-read h2 { margin: 0 0 4px; font: 700 20px var(--a-head, inherit); color: var(--sts-ink); } .fc-read p { margin: 0; color: var(--sts-mut); font-size: 13.5px; }
.fc-facts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: var(--sts-mut); }
.fc-facts em { font-style: normal; padding: 4px 10px; border-radius: 999px; background: #eef4fb; color: #1f3b63; font-weight: 700; }
.fc-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fc-opt { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--sts-line); border-radius: 16px; background: #fff; }
.fc-opt.is-best { border-color: #9cc1e8; } .fc-opt.is-auto { border-color: #f0c9a4; }
.fc-tag { display: flex; align-items: center; gap: 10px; margin: -2px -2px 2px; padding: 10px 12px; border-radius: 12px; background: #f1f5fb; color: #1f3b63; }
.fc-tag-i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #fff; border: 1px solid #d6e2f1; font-size: 15px; color: #2f7bc4; }
.fc-tag-t { display: flex; flex-direction: column; gap: 1px; } .fc-tag-t b { font: 700 14.5px var(--a-head, inherit); } .fc-tag-t small { font-size: 12px; color: #5d6b85; }
.fc-opt.is-best .fc-tag { background: #2f7bc4; color: #fff; } .fc-opt.is-best .fc-tag-t small { color: #dceafa; } .fc-opt.is-best .fc-tag-i { background: #fff; color: #2f7bc4; border-color: #fff; }
.fc-opt.is-auto .fc-tag { background: #d9731f; color: #fff; } .fc-opt.is-auto .fc-tag-t small { color: #ffe7d3; } .fc-opt.is-auto .fc-tag-i { background: #fff; color: #d9731f; border-color: #fff; }
.fc-prev { height: 300px; border-radius: 12px; background: #f7f9fc; overflow: hidden; padding: 8px; } .fc-prev svg { width: 100%; height: 100%; display: block; }
.fc-opt h3 { margin: 4px 0 0; font: 700 15.5px var(--a-head, inherit); color: var(--sts-ink); } .fc-opt p { margin: 0; flex: 1; font-size: 13px; color: var(--sts-mut); line-height: 1.45; }
.fc-opt .aai-btn { justify-content: center; }
.fc-pick-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; font-size: 13px; color: var(--sts-mut); } .fc-pick-foot a { color: #1f5fa8; font-weight: 700; }
.fc-alldlg { width: min(980px, 94vw); } .fc-alldlg .fc-gallery { max-height: 64vh; }
.fc-dp { margin: 6px 0 14px; color: #4a5d7c; font-size: 13.5px; line-height: 1.5; }
/* 3 · edit */
.fc-edit { display: grid; grid-template-columns: 250px minmax(0, 1fr) 270px; gap: 12px; height: calc(100vh - 118px); min-height: 520px; }
.fc-rail, .fc-panel { background: #fff; border: 1px solid var(--sts-line); border-radius: 14px; overflow: auto; }
.fc-tabs { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--sts-line); background: #fff; }
.fc-tabs button { padding: 10px 2px; border: 0; background: none; font: 700 12px var(--a-body, inherit); color: var(--sts-mut); cursor: pointer; border-bottom: 2px solid transparent; }
.fc-tabs button.is-on { color: #1f3b63; border-bottom-color: var(--fc); }
.fc-railbody { padding: 12px; }
.fc-rh { margin: 4px 0 8px; font: 700 12.5px var(--a-head, inherit); color: var(--sts-ink); } .fc-rh small { display: block; font-weight: 500; color: var(--sts-mut); font-size: 11.5px; margin-top: 2px; }
.fc-rnote { margin: 0 0 10px; font-size: 12px; color: var(--sts-mut); line-height: 1.45; }
.fc-shapes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
.fc-shapes button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: 1px solid #e3e8f4; border-radius: 10px; background: #fff; cursor: pointer; font: 600 11.5px var(--a-body, inherit); color: #2a4a72; }
.fc-shapes button:hover { border-color: #b9cde8; background: #f7fafe; }
.fc-sh { display: block; width: 40px; height: 24px; border: 1.6px solid #2f7bc4; background: #eef5fd; border-radius: 3px; }
.fc-sh-round { border-radius: 8px; } .fc-sh-pill { border-radius: 12px; } .fc-sh-square { border-radius: 0; } .fc-sh-circle { width: 28px; height: 28px; border-radius: 50%; }
.fc-sh-diamond { width: 20px; height: 20px; transform: rotate(45deg); margin: 2px 0; } .fc-sh-note { border-style: dashed; background: #f6f8fb; border-color: #9aa7bd; } .fc-sh-band { width: 12px; height: 28px; border-radius: 4px; background: #2f7bc4; }
.fc-linehelp { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; font-size: 12px; color: var(--sts-mut); } .fc-linehelp p { margin: 0; line-height: 1.45; }
.fc-dotdemo { flex: none; width: 34px; height: 24px; border: 1.6px solid #2f7bc4; border-radius: 6px; position: relative; } .fc-dotdemo::after { content: ''; position: absolute; right: -6px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: #2f7bc4; box-shadow: 0 0 0 2px #fff; }
.fc-rbtn { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 8px 10px; border: 1px solid #e3e8f4; border-radius: 10px; background: #fff; cursor: pointer; font: 600 12.5px var(--a-body, inherit); color: #2a4a72; }
.fc-rbtn:hover { border-color: #b9cde8; background: #f7fafe; } .fc-rbtn svg { width: 15px; height: 15px; } .fc-rbtn.is-del { color: #b23a2b; } .fc-rbtn.is-logo { color: #a4520f; border-color: #f0c9a4; background: var(--fc-soft); }
.fc-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.fc-icons button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border: 1px solid #eef1f7; border-radius: 10px; background: #fff; cursor: pointer; color: #2f7bc4; font: 600 10.5px var(--a-body, inherit); }
.fc-icons button span { color: #4a5d7c; } .fc-icons button:hover { border-color: #b9cde8; background: #f7fafe; }
.fc-icons img, .fc-afig img { width: 24px; height: 24px; object-fit: contain; } .fc-afig { display: grid; place-items: center; width: 24px; height: 24px; }
.fc-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.fc-themes button { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid #e3e8f4; border-radius: 12px; cursor: pointer; text-align: left; font: 700 12px var(--a-body, inherit); }
.fc-themes button.is-on { border-color: var(--fc); box-shadow: inset 0 0 0 1px var(--fc); }
.fc-sw { display: flex; gap: 4px; } .fc-sw i { width: 18px; height: 14px; border-radius: 4px; border: 1.4px solid; }
.fc-stage { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--sts-line); border-radius: 14px; overflow: hidden; }
.fc-tools { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--sts-line); flex-wrap: wrap; }
.fc-tools button { display: inline-flex; align-items: center; gap: 5px; min-width: 30px; height: 30px; padding: 0 9px; border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer; font: 700 12.5px var(--a-body, inherit); color: #2a4a72; justify-content: center; }
.fc-tools button:hover { background: #f1f5fb; } .fc-tools button.is-on { background: #eef4fb; border-color: #cfdcef; } .fc-tools button svg { width: 15px; height: 15px; }
.fc-tools i { width: 1px; height: 18px; background: var(--sts-line); margin: 0 4px; } .fc-tools [data-zoom] { min-width: 44px; text-align: center; font-size: 12px; color: var(--sts-mut); }
.fc-checkbtn { margin-left: auto; color: #18794e !important; border-color: #bfe3cf !important; background: #f0faf4 !important; }
.fc-canvas { position: relative; flex: 1; overflow: auto; cursor: default; touch-action: none; user-select: none; }
.fc-canvas.is-grid { background-image: radial-gradient(#d9e1ee 1px, transparent 1px); }
.fc-canvas svg { display: block; }
.fc-node { cursor: move; } .fc-lhit { cursor: pointer; }
.fc-selbox { fill: none; stroke: #2f7bc4; stroke-width: 1.4; stroke-dasharray: 5 4; pointer-events: none; }
.fc-dot { fill: #2f7bc4; stroke: #fff; stroke-width: 2.5; cursor: crosshair; } html:not(.aai-touch) .fc-dot:hover { r: 8; }
.fc-rsz { fill: #fff; stroke: #2f7bc4; stroke-width: 1.6; cursor: nwse-resize; }
.fc-lselp { fill: none; stroke: #2f7bc4; stroke-width: 5; stroke-opacity: .25; pointer-events: none; }
.fc-tmpl { stroke: #2f7bc4; stroke-width: 1.8; stroke-dasharray: 6 4; fill: none; pointer-events: none; }
.fc-band { fill: rgba(47, 123, 196, .07); stroke: #2f7bc4; stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none; }
.fc-inline { position: absolute; z-index: 3; box-sizing: border-box; padding: 8px 10px; border: 2px solid #2f7bc4; border-radius: 8px; background: #fff; font-family: Roboto, Arial, sans-serif; color: #0f2a4a; text-align: center; resize: both; line-height: 1.3; box-shadow: 0 10px 24px -14px rgba(15, 42, 74, .5); }
.fc-inline:focus { outline: none; }
.fc-hint { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 7px 12px; border-top: 1px solid var(--sts-line); font-size: 11.5px; color: var(--sts-mut); } .fc-hint b { color: #2a4a72; }
.fc-panel { padding: 14px; } .fc-panel h3 { margin: 0 0 10px; font: 700 15px var(--a-head, inherit); color: var(--sts-ink); }
.fc-ps { margin-bottom: 12px; } .fc-ps > b { display: block; margin-bottom: 5px; font-size: 12px; color: var(--sts-ink); } .fc-ps > b small { font-weight: 500; color: var(--sts-mut); }
.fc-ps textarea, .fc-ps input:not([type]), .fc-ps select { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #d6deec; border-radius: 9px; font: 13px var(--a-body, inherit); color: var(--sts-ink); resize: vertical; }
.fc-ps input[type=range] { width: 100%; }
.fc-row { display: flex; gap: 6px; flex-wrap: wrap; }
.fc-tg { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid #e3e8f4; border-radius: 9px; background: #fff; cursor: pointer; font: 600 12px var(--a-body, inherit); color: #2a4a72; } .fc-tg svg { width: 14px; height: 14px; }
.fc-tg.is-on { background: #eef4fb; border-color: #9cc1e8; } .fc-tg.is-del { color: #b23a2b; } .fc-tg:hover { border-color: #b9cde8; }
.fc-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.fc-roles button { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #e3e8f4; border-radius: 9px; background: #fff; cursor: pointer; font: 600 11.5px var(--a-body, inherit); color: #2a4a72; text-align: left; }
.fc-roles button.is-on { border-color: var(--fc); background: var(--fc-soft); } .fc-roles i { flex: none; width: 14px; height: 12px; border-radius: 3px; border: 1.4px solid; }
.fc-cols { display: flex; gap: 8px; align-items: flex-end; } .fc-cols label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--sts-mut); } .fc-cols input { width: 40px; height: 28px; padding: 0; border: 1px solid #d6deec; border-radius: 7px; background: none; }
.fc-cols button { margin-left: auto; padding: 6px 9px; border: 1px solid #e3e8f4; border-radius: 8px; background: #fff; cursor: pointer; font: 600 11.5px var(--a-body, inherit); color: #4a5d7c; }
.fc-lst { display: flex; flex-wrap: wrap; gap: 5px; } .fc-lst button { padding: 6px 9px; border: 1px solid #e3e8f4; border-radius: 8px; background: #fff; cursor: pointer; font: 600 11.5px var(--a-body, inherit); color: #2a4a72; } .fc-lst button.is-on { border-color: #9cc1e8; background: #eef4fb; }
.fc-tips p { margin: 0 0 6px; font-size: 12px; color: #4a5d7c; } .fc-tips kbd { display: inline-block; padding: 1px 6px; border: 1px solid #d6deec; border-bottom-width: 2px; border-radius: 5px; background: #f7f9fc; font: 700 11px var(--a-body, inherit); color: #2a4a72; }
.fc-stat { font-size: 12.5px; color: var(--sts-mut); }
.fc-chk { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 6px; }
.fc-chk li { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; font-size: 13px; } .fc-chk li svg { width: 16px; height: 16px; }
.fc-chk li.is-ok { background: #f0faf4; color: #18794e; } .fc-chk li.is-bad { background: #fdf0ee; color: #b23a2b; } .fc-chk li span { color: #4a5d7c; font-size: 12px; }
/* the engine at work */
.fc-think { display: grid; place-items: center; min-height: 62vh; }
.fc-th-card { width: min(620px, 94%); padding: 26px 28px; border: 1px solid var(--sts-line); border-radius: 18px; background: #fff; }
.fc-th-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; } .fc-th-head b { font: 700 12px var(--a-body, inherit); color: #a4520f; letter-spacing: .04em; text-transform: uppercase; } .fc-th-head h2 { margin: 2px 0 0; font: 700 20px var(--a-head, inherit); color: var(--sts-ink); }
.fc-th-ico { position: relative; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--fc-soft); }
.fc-th-ico i { position: absolute; left: 11px; width: 24px; height: 7px; border-radius: 3px; background: #2f7bc4; animation: fcThBox 1.2s ease-in-out infinite; }
.fc-th-ico i:nth-child(1) { top: 9px; } .fc-th-ico i:nth-child(2) { top: 20px; left: 17px; width: 18px; background: #d9731f; animation-delay: .2s; } .fc-th-ico i:nth-child(3) { top: 31px; background: #18a874; animation-delay: .4s; }
@keyframes fcThBox { 0%, 100% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(4px); opacity: .55; } }
.fc-th-steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
.fc-th-steps li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--sts-mut); opacity: .35; animation: fcThStep .35s ease var(--d) forwards; }
.fc-th-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c9d6ea; position: relative; }
.fc-th-steps li .fc-th-dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #18a874; transform: scale(0); animation: fcThTick .3s ease calc(var(--d) + .25s) forwards; }
@keyframes fcThStep { to { opacity: 1; color: var(--sts-ink); } } @keyframes fcThTick { to { transform: scale(1); } }
.fc-th-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fc-th-cards span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 1px solid #e3e8f4; border-radius: 12px; background: #f7f9fc; opacity: 0; transform: translateY(6px); animation: fcThCard .4s ease var(--d) forwards; }
.fc-th-cards i { display: block; width: 70%; height: 9px; border-radius: 3px; background: #dbe7f6; } .fc-th-cards i:nth-child(2) { width: 50%; background: #fbe1cc; } .fc-th-cards i:last-child { background: #d5efe1; }
@keyframes fcThCard { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fc-th-steps li, .fc-th-cards span, .fc-th-steps li .fc-th-dot::after { animation-duration: .01s; } }
/* Panel studio picker: figures by kind */
.pn-pkcats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.pn-pkcats button { padding: 6px 12px; border: 1px solid #e3e8f4; border-radius: 999px; background: #fff; cursor: pointer; font: 600 12.5px var(--a-body, inherit); color: #2a4a72; }
.pn-pkcats button.is-on { background: #eef4fb; border-color: #9cc1e8; color: #1f3b63; }
/* studio intro band */
.fc-intro-art { position: relative; flex: 1 1 520px; max-width: 680px; min-height: 300px; }
.fc-ia-card { position: absolute; padding: 8px; border-radius: 16px; background: #fff; border: 1px solid #e3e8f4; box-shadow: 0 30px 60px -40px rgba(15, 42, 74, .55); overflow: hidden; }
.fc-ia-card svg { display: block; width: 100%; height: 100%; }
.fc-ia-card.is-a { left: 0; top: 0; width: 46%; height: 300px; transform: rotate(-1.2deg); }
.fc-ia-card.is-b { left: 40%; top: 18px; width: 40%; height: 220px; transform: rotate(1deg); z-index: 1; }
.fc-ia-card.is-c { right: 0; top: 150px; width: 32%; height: 170px; transform: rotate(-.6deg); z-index: 2; }
.fc-ia-1 { left: 6%; bottom: -6px; z-index: 3; } .fc-ia-2 { right: 28%; top: -10px; z-index: 3; animation-delay: -1.6s; } .fc-ia-3 { right: 2%; bottom: 40px; z-index: 3; animation-delay: -3.1s; }
.aai-side-graphs.is-flow .fc-side-ico, .fc-side-ico { display: inline-block; width: 16px; height: 14px; border-radius: 4px; background: linear-gradient(90deg, #d9731f 0 36%, transparent 36% 64%, #2f7bc4 64%); box-shadow: inset 0 0 0 1.5px #fff, 0 0 0 1px #e9d6c4; }
@media (max-width: 1100px) { .fc-start { grid-template-columns: 1fr; } .fc-opts { grid-template-columns: 1fr; } .fc-edit { grid-template-columns: 210px minmax(0, 1fr); } .fc-panel { grid-column: 1 / -1; } }
/* ===== END FLOWCHART STUDIO ===== */
/* ===== AUTODRAW STUDIO (2026-11-02): sketch → aFig icon suggestions, own library, move to uploads; calm .sts- shell ===== */
.dw-app { --ad: #6c5ce7; --ad-soft: #f1effe; }
.dw-badge { color: #4b3fc0; background: var(--ad-soft); }
.dw-badge-ico { width: 13px; height: 13px; border-radius: 4px; background: linear-gradient(135deg, #8a7cf0, #2f7bc4); box-shadow: inset 0 0 0 1.5px #fff; }
.dw-main { display: grid; grid-template-columns: 52px minmax(0, 1fr) 272px; gap: 10px; height: calc(100vh - 118px); min-height: 520px; padding: 10px 14px 14px; box-sizing: border-box; }
.dw-rail { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; background: #fff; border: 1px solid var(--sts-line); border-radius: 14px; }
.dw-rail button { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; color: #2a4a72; cursor: pointer; }
.dw-rail button:hover { background: #f1f5fb; } .dw-rail button.is-on { background: var(--ad-soft); color: #4b3fc0; } .dw-rail button.dw-auto.is-on { background: #6c5ce7; color: #fff; }
.dw-rail i { width: 26px; height: 1px; background: var(--sts-line); margin: 4px 0; }
.dw-swatch { position: relative; width: 30px; height: 30px; margin: 2px 0 4px; cursor: pointer; } .dw-swatch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .dw-swatch span { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #d6deec; }
.dw-stage { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--sts-line); border-radius: 14px; overflow: hidden; }
.dw-sug { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--sts-line); background: #fbfcfe; min-height: 64px; }
.dw-sug-h { flex: none; font: 600 12.5px var(--a-body, inherit); color: var(--sts-mut); }
.dw-sug-row { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: thin; min-width: 0; flex: 1; padding: 2px 0; }
.dw-sug-tip { font-size: 12.5px; color: var(--sts-mut); white-space: nowrap; font-style: normal; }
.dw-sug-g { flex: none; padding: 3px 8px; border-radius: 999px; font: 700 10.5px var(--a-body, inherit); letter-spacing: .03em; text-transform: uppercase; color: #4b3fc0; background: var(--ad-soft); }
.dw-sug-g + .dw-sg { margin-left: 2px; }
.dw-sg { flex: none; width: 50px; height: 50px; padding: 4px; border: 1px solid #e6ebf4; border-radius: 12px; background: #fff; cursor: pointer; transition: transform .12s, border-color .12s; }
.dw-sg:hover { transform: translateY(-2px); border-color: #b9b1f5; } .dw-sg.is-own { border-color: #e2ddfb; background: #fcfbff; } .dw-sg svg { width: 100%; height: 100%; display: block; }
.dw-type { display: flex; align-items: center; gap: 8px; margin: 10px 12px 0; padding: 6px 6px 6px 12px; border: 1px solid #dfe6f1; border-radius: 12px; background: #fff; }
.dw-type:focus-within { border-color: #b9b1f5; box-shadow: 0 0 0 3px var(--ad-soft); }
.dw-type-i { display: grid; place-items: center; color: #6c5ce7; } .dw-type-i svg { width: 17px; height: 17px; }
.dw-type input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 14px var(--a-body, inherit); color: var(--sts-ink); }
.dw-type button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 0; border-radius: 9px; background: #6c5ce7; color: #fff; font: 700 12.5px var(--a-body, inherit); cursor: pointer; } .dw-type button:hover { background: #5a4bd4; } .dw-type button svg { width: 15px; height: 15px; }
.dw-canvas { position: relative; flex: 1; overflow: auto; background: #eef2f8; display: grid; place-items: center; touch-action: none; }
.dw-canvas[data-tool="auto"], .dw-canvas[data-tool="pen"] { cursor: crosshair; } .dw-canvas[data-tool="erase"] { cursor: cell; }
.dw-page { display: block; margin: 14px; border-radius: 6px; box-shadow: 0 1px 0 #dfe6f1, 0 18px 40px -30px rgba(15, 42, 74, .45); }
.dw-pend { opacity: .9; }
.dw-it { cursor: move; } .dw-canvas[data-tool="auto"] .dw-it, .dw-canvas[data-tool="pen"] .dw-it { cursor: crosshair; }
.dw-it.is-new { animation: adPop .3s ease both; }
@keyframes adPop { from { opacity: 0; } to { opacity: 1; } }
.dw-selbox { fill: none; stroke: #6c5ce7; stroke-width: 1.6; stroke-dasharray: 6 5; pointer-events: none; }
.dw-marq { fill: rgba(108, 92, 231, .06); stroke: #6c5ce7; stroke-width: 1.2; stroke-dasharray: 4 4; pointer-events: none; }
.dw-rsz { fill: #fff; stroke: #6c5ce7; stroke-width: 2; cursor: nwse-resize; }
.dw-panel { background: #fff; border: 1px solid var(--sts-line); border-radius: 14px; overflow: auto; }
.dw-tabs { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border-bottom: 1px solid var(--sts-line); }
.dw-tabs button { padding: 10px 2px; border: 0; background: none; border-bottom: 2px solid transparent; font: 700 12px var(--a-body, inherit); color: var(--sts-mut); cursor: pointer; } .dw-tabs button.is-on { color: #1f3b63; border-bottom-color: #6c5ce7; }
.dw-pbody { padding: 12px; }
.dw-gh { margin: 2px 0 8px; font: 700 13px var(--a-head, inherit); color: var(--sts-ink); } .dw-gh small { font-weight: 600; color: var(--sts-mut); }
.dw-note, .dw-dp { margin: 0 0 10px; font-size: 12px; line-height: 1.45; color: var(--sts-mut); } .dw-dp { font-size: 13.5px; color: #4a5d7c; }
.dw-none { font-size: 12.5px; color: var(--sts-mut); }
.dw-search, .dw-rename { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #d6deec; border-radius: 9px; font: 13px var(--a-body, inherit); color: var(--sts-ink); margin-bottom: 10px; }
.dw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 12px; }
.dw-grid button { aspect-ratio: 1; padding: 5px; border: 1px solid #eef1f7; border-radius: 10px; background: #fff; cursor: pointer; } .dw-grid button:hover { border-color: #b9b1f5; background: #fcfbff; } .dw-grid svg { width: 100%; height: 100%; display: block; }
.dw-mine { display: grid; gap: 6px; }
.dw-mi { display: grid; grid-template-columns: 46px 1fr auto; gap: 8px; align-items: center; padding: 5px; border: 1px solid #eef1f7; border-radius: 10px; }
.dw-mi > button { width: 46px; height: 46px; padding: 3px; border: 0; border-radius: 8px; background: #f7f9fc; cursor: pointer; } .dw-mi img { width: 100%; height: 100%; object-fit: contain; }
.dw-mi span { font-size: 12.5px; font-weight: 600; color: var(--sts-ink); cursor: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-mi div { display: flex; gap: 2px; } .dw-mi div button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; color: #4a5d7c; cursor: pointer; } .dw-mi div button:hover { background: #f1f5fb; } .dw-mi div svg { width: 15px; height: 15px; }
.dw-selprev { display: grid; place-items: center; height: 120px; margin-bottom: 8px; border-radius: 12px; background: #f7f9fc; } .dw-selprev svg { width: 104px; height: 104px; }
.dw-ps { margin-bottom: 12px; } .dw-ps > b { display: block; margin-bottom: 5px; font-size: 12px; color: var(--sts-ink); } .dw-ps > b small { font-weight: 500; color: var(--sts-mut); } .dw-ps input[type=range] { width: 100%; }
.dw-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .dw-seg button { padding: 6px 2px; border: 1px solid #e3e8f4; border-radius: 8px; background: #fff; cursor: pointer; font: 600 11px var(--a-body, inherit); color: #2a4a72; } .dw-seg button.is-on { border-color: #b9b1f5; background: var(--ad-soft); color: #4b3fc0; }
.dw-hues { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; } .dw-hues button { aspect-ratio: 1; border: 0; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); } .dw-hues button.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #1f3b63; }
.dw-row { display: flex; gap: 6px; } .dw-row .dw-btn { flex: 1; }
.dw-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; box-sizing: border-box; margin: 0 0 7px; padding: 8px 10px; border: 1px solid #e3e8f4; border-radius: 10px; background: #fff; cursor: pointer; font: 600 12.5px var(--a-body, inherit); color: #2a4a72; }
.dw-btn:hover { border-color: #b9cde8; background: #f7fafe; } .dw-btn svg { width: 15px; height: 15px; } .dw-btn.is-del { color: #b23a2b; } .dw-btn.is-pri { background: #6c5ce7; border-color: #6c5ce7; color: #fff; } .dw-btn.is-pri:hover { background: #5a4bd4; }
.dw-how ol { margin: 0 0 12px; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: #4a5d7c; } .dw-how li { margin-bottom: 5px; } .dw-how b { color: var(--sts-ink); }
.dw-tips p { margin: 0 0 5px; font-size: 11.5px; color: #4a5d7c; } .dw-tips kbd { display: inline-block; padding: 0 5px; border: 1px solid #d6deec; border-bottom-width: 2px; border-radius: 5px; background: #f7f9fc; font: 700 10.5px var(--a-body, inherit); color: #2a4a72; }
.dw-upf { margin-bottom: 4px; } .dw-upf > b, .dw-nm b { display: block; margin: 4px 0 6px; font-size: 12px; color: var(--sts-ink); }
.dw-fl { display: grid; gap: 5px; margin-bottom: 8px; max-height: 220px; overflow: auto; }
.dw-fo { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #e3e8f4; border-radius: 9px; cursor: pointer; font-size: 13px; } .dw-fo.is-on { border-color: #b9b1f5; background: var(--ad-soft); }
.dw-fo span { flex: 1; } .dw-fo button { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: #6a7891; cursor: pointer; } .dw-fo button:hover { background: #fff; } .dw-fo .dw-rename { margin: 0; flex: 1; }
/* studio intro band */
.dw-intro-art { position: relative; flex: 1 1 520px; max-width: 640px; min-height: 290px; }
.dw-ia-pad { position: relative; padding: 14px; border-radius: 18px; background: #fff; border: 1px solid #e3e8f4; box-shadow: 0 30px 60px -40px rgba(15, 42, 74, .55); }
.dw-ia-pad > svg { display: block; width: 100%; height: auto; }
.dw-ia-sk { fill: none; stroke: #6c5ce7; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: adSk 5s ease infinite; } 
@keyframes adSk { 0% { stroke-dashoffset: 1; opacity: 1; } 18%, 55% { stroke-dashoffset: 0; opacity: 1; } 62%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.dw-ia-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 8px; border-radius: 12px; background: #fbfcfe; border: 1px solid #eef1f7; font: 600 11.5px var(--a-body, inherit); color: var(--sts-mut); }
.dw-ia-row i { width: 40px; height: 40px; padding: 3px; border: 1px solid #e6ebf4; border-radius: 10px; background: #fff; opacity: 0; animation: adIa 5s ease var(--d) infinite; } .dw-ia-row i svg { width: 100%; height: 100%; display: block; }
@keyframes adIa { 0%, 14% { opacity: 0; transform: translateY(4px); } 22%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.dw-ia-done { position: absolute; left: 29%; top: 17%; width: 42%; opacity: 0; animation: adDone 5s ease infinite; } .dw-ia-done svg { width: 100%; height: auto; display: block; }
@keyframes adDone { 0%, 58% { opacity: 0; transform: scale(.85); } 66%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.dw-ia-type { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 8px 8px 12px; border-radius: 14px; background: #fff; border: 1px solid #e3e8f4; box-shadow: 0 20px 40px -32px rgba(15, 42, 74, .5); }
.dw-ia-ti { display: grid; place-items: center; color: #6c5ce7; } .dw-ia-ti svg { width: 16px; height: 16px; }
.dw-ia-tq { flex: 1; min-width: 0; font: 600 13px var(--a-body, inherit); color: var(--sts-ink); white-space: nowrap; overflow: hidden; }
.dw-ia-tq i { display: inline-block; font-style: normal; overflow: hidden; vertical-align: bottom; width: 0; border-right: 2px solid #6c5ce7; animation: dwType 6s steps(12, end) infinite; }
@keyframes dwType { 0%, 8% { width: 0; } 38%, 92% { width: 12ch; } 100% { width: 0; } }
.dw-ia-type b { padding: 6px 12px; border-radius: 9px; background: #6c5ce7; color: #fff; font: 700 12px var(--a-body, inherit); }
.dw-ia-type em { width: 34px; height: 34px; opacity: 0; animation: dwTi 6s ease infinite; } .dw-ia-type em svg { width: 100%; height: 100%; display: block; } .dw-ia-type em.dw-ia-ti1 { animation-delay: .25s; }
@keyframes dwTi { 0%, 44% { opacity: 0; transform: scale(.7); } 52%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.dw-ia-1 { left: -12px; top: 38%; z-index: 2; } .dw-ia-2 { right: -6px; top: -12px; z-index: 2; animation-delay: -2s; }
.fc-side-ico.dw-side-ico, .dw-side-ico { display: inline-block; width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(135deg, #8a7cf0, #2f7bc4); position: relative; } .dw-side-ico::after { content: ''; position: absolute; left: 4px; top: 4px; width: 8px; height: 8px; border: 1.6px solid #fff; border-radius: 50%; border-right-color: transparent; transform: rotate(-30deg); }
@media (max-width: 1100px) { .dw-main { grid-template-columns: 52px minmax(0, 1fr); } .dw-panel { grid-column: 1 / -1; max-height: 340px; } }
@media (prefers-reduced-motion: reduce) { .dw-ia-tq i { width: 12ch; animation: none; } .dw-ia-type em { opacity: 1; animation: none; } .dw-ia-sk, .dw-ia-row i, .dw-ia-done, .dw-it.is-new { animation: none; opacity: 1; stroke-dashoffset: 0; } }

.dw-intro-stats { display: flex; gap: 10px; margin: 16px 0 4px; flex-wrap: wrap; }
.dw-intro-stats > div { flex: 1 1 110px; padding: 10px 12px; border: 1px solid #e3e8f4; border-radius: 12px; background: #fff; }
.dw-intro-stats b { display: block; font: 700 22px/1.1 Roboto, sans-serif; color: #6c5ce7; }
.dw-intro-stats span { display: block; margin-top: 3px; font: 500 12px/1.35 Roboto, sans-serif; color: #5a6680; }
.dw-intro .ps-intro-pts { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 760px) { .dw-intro .ps-intro-pts { grid-template-columns: 1fr 1fr; } }
.dw-credit { flex-basis: 100%; margin: 14px 0 0; font: 400 11px Roboto, sans-serif; color: #8a94a8; }
@keyframes dwPick { 0%, 48% { border-color: #e6ebf4; box-shadow: none; } 54%, 92% { border-color: #6c5ce7; box-shadow: 0 0 0 2px rgba(108, 92, 231, .18); } 100% { border-color: #e6ebf4; } }
.dw-ia-row i.is-pick { animation: adIa 5s ease var(--d) infinite, dwPick 5s ease infinite; }
/* ===== END AUTODRAW STUDIO ===== */
/* ===== SCIENTIFIC IMAGE STUDIO (2026-11-02) ===== */
.sq-app { --sq: #0f7a8a; --sq-soft: #e6f4f6; }
.sq-badge-ico, .sq-side-ico { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, #14a3b8, #2f7bc4); position: relative; vertical-align: -2px; margin-right: 6px; }
.sq-side-ico { width: 16px; height: 16px; margin-right: 0; } .sq-side-ico::after, .sq-badge-ico::after { content: ''; position: absolute; left: 3px; right: 3px; top: 4px; height: 2px; background: #fff; box-shadow: 0 4px 0 #fff; border-radius: 1px; }
.sq-main { flex: 1; min-height: 0; overflow: auto; background: #f6f8fc; }
.sq-add { max-width: 1040px; margin: 0 auto; padding: 28px 24px 40px; }
.sq-drop { display: grid; justify-items: center; gap: 10px; padding: 34px 24px; border: 1.5px dashed #b9c7dc; border-radius: 16px; background: #fff; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.sq-drop.is-over, .sq-drop:hover { border-color: var(--sq); background: #fbfeff; }
.sq-drop h3 { margin: 0; font: 700 20px Roboto, sans-serif; color: #1f2a44; } .sq-drop p { margin: 0; max-width: 640px; font: 400 14px/1.55 Roboto, sans-serif; color: #5a6680; } .sq-drop code { font-size: 12.5px; background: #f1f4f9; padding: 1px 5px; border-radius: 4px; }
.sq-drop-ico { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--sq-soft); color: var(--sq); } .sq-drop-ico svg { width: 26px; height: 26px; }
.sq-safe { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px Roboto, sans-serif; color: #18794e; } .sq-safe svg { width: 15px; height: 15px; }
.sq-types { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 16px; }
.sq-type { display: grid; gap: 4px; align-content: start; text-align: left; padding: 12px; border: 1px solid #e3e8f4; border-radius: 12px; background: #fff; cursor: pointer; font-family: Roboto, sans-serif; }
.sq-type i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #f1f5fb; color: #2f7bc4; } .sq-type b { font: 600 13.5px Roboto, sans-serif; color: #1f2a44; } .sq-type span { font: 400 12px/1.4 Roboto, sans-serif; color: #6b778f; }
.sq-type.is-on { border-color: var(--sq); box-shadow: 0 0 0 2px rgba(15, 122, 138, .12); } .sq-type.is-on i { background: var(--sq-soft); color: var(--sq); }
.sq-auto { margin: 12px 2px 0; font: 400 13px Roboto, sans-serif; color: #5a6680; }
.sq-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 18px; }
.sq-li { display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px; border: 1px solid #e3e8f4; border-radius: 10px; background: #fff; }
.sq-li img { grid-row: 1 / 3; width: 44px; height: 44px; object-fit: cover; border-radius: 6px; background: #111; } .sq-li span { font: 500 12.5px Roboto, sans-serif; color: #1f2a44; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sq-li em { font: 400 11.5px Roboto, sans-serif; color: #6b778f; font-style: normal; }
.sq-li button { grid-row: 1 / 3; grid-column: 3; border: 0; background: none; color: #9aa4b8; cursor: pointer; } .sq-li button:hover { color: #e04f5f; }
.sq-add-go { display: flex; justify-content: flex-end; margin-top: 16px; }
.sq-busy { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(246, 248, 252, .82); z-index: 30; }
.sq-busy > div { display: grid; justify-items: center; gap: 6px; padding: 22px 30px; border: 1px solid #e3e8f4; border-radius: 14px; background: #fff; min-width: 300px; }
.sq-busy b { font: 700 14px Roboto, sans-serif; color: var(--sq); } .sq-busy p { margin: 0; font: 400 13px Roboto, sans-serif; color: #5a6680; text-align: center; }
.sq-app { position: relative; }
/* results */
.sq-res { max-width: 1240px; margin: 0 auto; padding: 22px 24px 40px; }
.sq-res-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.sq-res-head h2 { margin: 2px 0 0; font: 700 22px Roboto, sans-serif; color: #1f2a44; }
.sq-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.sq-bdg { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #dfe5f0; border-radius: 999px; background: #fff; font: 600 12.5px Roboto, sans-serif; color: #33415c; cursor: default; }
.sq-bdg svg { width: 15px; height: 15px; } .sq-bdg em { font-style: normal; font-weight: 500; color: #6b778f; } .sq-bdg.is-ok { border-color: #bfe6d2; color: #18794e; } .sq-bdg.is-warn { border-color: #f6d3a8; color: #b45309; } button.sq-bdg { cursor: pointer; }
.sq-res-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.sq-graph-card, .sq-card { border: 1px solid #e3e8f4; border-radius: 14px; background: #fff; padding: 14px; }
.sq-gtools { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.sq-gtools label { display: flex; align-items: center; gap: 8px; font: 600 12.5px Roboto, sans-serif; color: #5a6680; }
.sq-gtools select, .sq-insp select, .sq-insp input:not([type]), .sq-insp input[type=number] { padding: 6px 8px; border: 1px solid #dfe5f0; border-radius: 8px; font: 500 13px Roboto, sans-serif; color: #1f2a44; background: #fff; }
.sq-seg { display: inline-flex; border: 1px solid #dfe5f0; border-radius: 8px; overflow: hidden; } .sq-seg button { border: 0; background: #fff; padding: 6px 12px; font: 600 12px Roboto, sans-serif; color: #5a6680; cursor: pointer; } .sq-seg button.is-on { background: var(--sq-soft); color: var(--sq); }
.sq-graph svg { display: block; width: 100%; height: auto; }
.sq-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sq-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; } .sq-side > * { min-width: 0; } /* the column keeps its width at any zoom; only wide tables scroll inside their card */
.sq-side .sq-qc, .sq-side .sq-meth, .sq-side .sq-hint { overflow-wrap: anywhere; }
.sq-card h4, .sq-insp h4 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; font: 700 13.5px Roboto, sans-serif; color: #1f2a44; }
.sq-tab { width: 100%; border-collapse: collapse; font: 400 13px Roboto, sans-serif; color: #33415c; } .sq-tab th { text-align: left; font-weight: 600; color: #6b778f; font-size: 12px; padding: 4px 6px; border-bottom: 1px solid #eef1f6; } .sq-tab td { padding: 5px 6px; border-bottom: 1px solid #f3f5f9; }
.sq-tab td:first-child { display: flex; align-items: center; gap: 6px; } .sq-tab i { width: 10px; height: 10px; border-radius: 3px; flex: none; } .sq-tab input { width: 100%; border: 1px solid transparent; border-radius: 6px; padding: 3px 5px; font: 600 13px Roboto, sans-serif; color: #1f2a44; background: transparent; } .sq-tab input:hover, .sq-tab input:focus { border-color: #dfe5f0; background: #fff; }
.sq-hint { margin: 8px 0 0; font: 400 12px Roboto, sans-serif; color: #6b778f; }
.sq-link { border: 0; background: none; padding: 0; color: #2f7bc4; font: 600 12.5px Roboto, sans-serif; cursor: pointer; }
.sq-pts { display: grid; gap: 4px; max-height: 260px; overflow: auto; }
.sq-pt { display: grid; grid-template-columns: minmax(0, 1fr) 130px 70px auto; gap: 6px; align-items: center; font: 400 12.5px Roboto, sans-serif; color: #33415c; }
.sq-pt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sq-pt select { padding: 3px 6px; border: 1px solid #e3e8f4; border-radius: 6px; font: 500 12px Roboto, sans-serif; } .sq-pt b { text-align: right; font-weight: 600; color: #1f2a44; } .sq-sat { font-style: normal; font-size: 11px; color: #e04f5f; }
.sq-meth { margin: 0; font: 400 12.5px/1.55 Roboto, sans-serif; color: #33415c; }
.sq-note { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; padding: 10px 12px; border: 1px solid #f6d3a8; border-radius: 10px; background: #fffaf3; font: 400 13px Roboto, sans-serif; color: #7c4a03; }
/* check */
.sq-check { display: grid; grid-template-columns: 190px minmax(0, 1fr) 300px; height: calc(100vh - 150px); min-height: 560px; } .sq-check > * { min-height: 0; } .sq-check .sq-thumbs, .sq-check .sq-insp { overflow-y: auto; }
.sq-thumbs { overflow: auto; padding: 10px; border-right: 1px solid #e3e8f4; background: #fff; display: grid; gap: 8px; align-content: start; }
.sq-thumbs button { display: grid; gap: 3px; padding: 6px; border: 1px solid #e3e8f4; border-radius: 10px; background: #fff; cursor: pointer; text-align: left; } .sq-thumbs button.is-on { border-color: var(--sq); box-shadow: 0 0 0 2px rgba(15, 122, 138, .12); } .sq-thumbs button.is-warn { border-color: #f6d3a8; }
.sq-thumbs img { width: 100%; height: 96px; object-fit: cover; border-radius: 6px; background: #111; } .sq-thumbs span { font: 500 12px Roboto, sans-serif; color: #1f2a44; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sq-thumbs em { font: 400 11px Roboto, sans-serif; color: #6b778f; font-style: normal; }
.sq-view { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; }
.sq-vtools { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid #e3e8f4; background: #fff; } .sq-vtools .is-on { background: var(--sq-soft); color: var(--sq); } .sq-zl { font: 600 12px Roboto, sans-serif; color: #6b778f; min-width: 44px; }
.sq-stage { position: relative; overflow: hidden; background: #fff; min-height: 420px; } .sq-stage.is-dark { background: #1b2232; } /* white around blots, gels, IHC and cells; dark around fluorescence */ .sq-stage canvas[data-cv] { position: absolute; inset: 0; cursor: grab; } .sq-stage canvas[data-cv]:active { cursor: grabbing; }
.sq-loupe { position: absolute; width: 220px; height: 220px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); pointer-events: none; }
.sq-vhint { margin: 0; padding: 7px 12px; font: 400 12px Roboto, sans-serif; color: #5a6680; background: #fff; border-top: 1px solid #e3e8f4; }
.sq-insp { overflow: auto; padding: 14px; border-left: 1px solid #e3e8f4; background: #fff; display: grid; gap: 10px; align-content: start; }
.sq-insp label { display: grid; gap: 4px; font: 600 12px Roboto, sans-serif; color: #5a6680; } .sq-insp label em { font: 400 11.5px Roboto, sans-serif; color: #8a94a8; font-style: normal; }
.sq-chk { display: flex !important; align-items: center; gap: 6px; font: 500 12.5px Roboto, sans-serif !important; color: #33415c !important; }
.sq-mini { display: grid; gap: 6px; } .sq-mini div { display: flex; justify-content: space-between; gap: 8px; font: 400 12.5px Roboto, sans-serif; color: #5a6680; } .sq-mini b { color: #1f2a44; font-weight: 600; }
.sq-qc p { display: flex; gap: 6px; margin: 0 0 6px; font: 400 12.5px/1.45 Roboto, sans-serif; color: #33415c; } .sq-qc p svg { flex: none; width: 15px; height: 15px; color: #2f7bc4; } .sq-qc p.is-warn svg { color: #d97706; }
.sq-ok { display: flex; gap: 6px; align-items: center; margin: 0; font: 500 12.5px Roboto, sans-serif; color: #18794e; } .sq-ok svg { width: 15px; height: 15px; }
.sq-adj { border: 1px solid #e3e8f4; border-radius: 10px; padding: 8px 10px; display: grid; gap: 10px; } .sq-adj summary { cursor: pointer; font: 600 12.5px Roboto, sans-serif; color: #33415c; } .sq-adj[open] { padding-bottom: 12px; }
.sq-dlg-list { display: grid; gap: 6px; margin: 10px 0; } .sq-dlg-list button { text-align: left; padding: 10px 12px; border: 1px solid #e3e8f4; border-radius: 10px; background: #fff; font: 500 13.5px Roboto, sans-serif; color: #1f2a44; cursor: pointer; } .sq-dlg-list button:hover { border-color: var(--sq); }
/* intro */
.sq-intro-types { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; } .sq-intro-types span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #e3e8f4; border-radius: 999px; background: #fff; font: 600 12.5px Roboto, sans-serif; color: #1f2a44; } .sq-intro-types i { display: grid; color: var(--sq, #0f7a8a); } .sq-intro-types svg { width: 15px; height: 15px; }
.sq-intro .ps-intro-pts { grid-template-columns: 1fr 1fr 1fr; } @media (max-width: 760px) { .sq-intro .ps-intro-pts { grid-template-columns: 1fr 1fr; } }
.sq-intro-art { position: relative; flex: 1 1 460px; max-width: 600px; min-height: 260px; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 24px; border: 1px solid #e3e8f4; border-radius: 18px; background: #fff; }
.sq-ia-blot { position: relative; display: flex; gap: 10px; padding: 18px 14px; border-radius: 10px; background: #eef1f5; overflow: hidden; }
.sq-ia-blot span { display: grid; gap: 34px; width: 34px; } .sq-ia-blot i { display: block; height: 9px; border-radius: 5px; background: #1f2a44; opacity: calc(.15 + var(--b) * .85); filter: blur(.6px); } .sq-ia-blot i.lc { opacity: .8; }
.sq-ia-scan { position: absolute; top: 0; bottom: 0; width: 2px; background: #14a3b8; box-shadow: 0 0 0 3px rgba(20, 163, 184, .15); animation: sqScan 4s ease-in-out infinite; }
@keyframes sqScan { 0% { left: 6px; } 60%, 100% { left: calc(100% - 8px); } }
.sq-ia-arrow { color: #9aa7bd; } .sq-ia-arrow svg { width: 26px; height: 26px; }
.sq-ia-graph { display: flex; align-items: flex-end; gap: 10px; height: 130px; padding: 0 10px 0 8px; border-left: 1.5px solid #33415c; border-bottom: 1.5px solid #33415c; }
.sq-ia-graph span { width: 26px; height: calc(var(--h) * 120px); border: 1.6px solid var(--c); border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--c) 22%, #fff); transform-origin: bottom; animation: sqBar 4s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
@keyframes sqBar { 0%, 45% { transform: scaleY(0); } 65%, 100% { transform: scaleY(1); } }
.sq-ia-1 { left: -10px; top: 18%; } .sq-ia-2 { right: -8px; bottom: 14%; }
@media (prefers-reduced-motion: reduce) { .sq-ia-scan, .sq-ia-graph span { animation: none; } }
@media (max-width: 1100px) { .sq-res-grid { grid-template-columns: 1fr; } .sq-types { grid-template-columns: repeat(2, 1fr); } .sq-check { grid-template-columns: 1fr; } .sq-thumbs { grid-auto-flow: column; grid-auto-columns: 150px; border-right: 0; border-bottom: 1px solid #e3e8f4; } .sq-insp { border-left: 0; } }
.sq-noimg { display: block; width: 100%; height: 96px; border-radius: 6px; background: #e9edf4; } .sq-li .sq-noimg { grid-row: 1 / 3; width: 44px; height: 44px; }
.sq-pat { font: 500 11.5px Roboto, sans-serif; color: #6b778f; } .sq-pat .sq-link { font-size: 11.5px; }
.sq-aside { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 11px 14px; border: 1px solid #dfe5ef; border-radius: 10px; background: #f7f9fc; font: 400 13px Roboto, sans-serif; color: #33415c; } .sq-aside > svg { flex: none; margin-top: 1px; color: #2f7bc4; } .sq-aside b { display: block; font-weight: 600; color: #1f2a44; margin-bottom: 3px; } .sq-aside p { margin: 3px 0 0; } .sq-aside p span { color: #6b778f; }
.sq-li em.is-aside { color: #8a94a8; font-style: italic; }
.sq-tab td.sq-prot { display: table-cell; font-weight: 600; color: #1f2a44; white-space: nowrap; } .sq-tab td.sq-prot + td { display: flex; align-items: center; gap: 6px; }
@media (max-width: 1100px) { .sq-check { height: auto; } .sq-check .sq-stage { height: 60vh; } }
/* ===== Set up, statuses and "How did aFig decide?" (2026-11-02, v2) ===== */
.sq-setup { max-width: 920px; margin: 0 auto; padding: 26px 24px 48px; font-family: Roboto, sans-serif; }
.sq-su-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.sq-su-head h2 { margin: 4px 0 0; font: 700 22px Roboto, sans-serif; color: #1f2a37; }
.sq-pill { flex: none; padding: 5px 12px; border-radius: 999px; font: 600 12.5px Roboto, sans-serif; border: 1px solid; }
.sq-pill.is-warn { color: #c2410c; background: #fdeee5; border-color: #f8d3bd; } .sq-pill.is-ok { color: #18794e; background: #e8f6ee; border-color: #c4e7d3; }
.sq-setup .sq-find { list-style: none; margin: 0 0 18px; padding: 12px 14px; display: grid; gap: 8px; background: #fff; border: 1px solid #e3e8ef; border-radius: 12px; }
.sq-find li { display: flex; align-items: center; gap: 9px; font: 400 14px/1.45 Roboto, sans-serif; color: #1f2a37; }
.sq-find li > svg { flex: none; width: 17px; height: 17px; } .sq-find li.is-ok > svg { color: #18a874; } .sq-find li.is-info > svg { color: #2f7bc4; } .sq-find li.is-warn > svg { color: #d97706; } .sq-find li.is-crit > svg { color: #d0384a; }
.sq-q { position: relative; margin: 0 0 12px; padding: 16px 18px; background: #fff; border: 1px solid #e3e8ef; border-radius: 12px; }
.sq-q.is-done { background: #fbfdfc; } .sq-q.is-done h3 i { background: #e8f6ee; color: #18a874; }
.sq-q h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 600 15.5px/1.35 Roboto, sans-serif; color: #1f2a37; flex-wrap: wrap; }
.sq-q h3 i { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #eaf2fb; color: #2f7bc4; font: 700 12px Roboto, sans-serif; font-style: normal; } .sq-q h3 i svg { width: 14px; height: 14px; }
.sq-q-file { font: 400 12.5px Roboto, sans-serif; color: #6b7280; }
.sq-q-sub { margin: 0 0 10px 34px; font: 400 13px/1.5 Roboto, sans-serif; color: #4b5563; }
.sq-q > :not(h3):not(.sq-q-sub) { margin-left: 34px; }
.sq-q-note { margin: 10px 0 0; font: 400 12.5px/1.5 Roboto, sans-serif; color: #4b5563; } .sq-q-note.is-warn { color: #b45309; }
.sq-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .sq-opts.is-col { flex-direction: column; align-items: stretch; } .sq-opts.is-sm .sq-opt { padding: 6px 10px; }
.sq-opt { display: inline-grid; gap: 1px; text-align: left; padding: 8px 12px; border: 1px solid #d6dde8; border-radius: 9px; background: #fff; cursor: pointer; font: 500 13.5px Roboto, sans-serif; color: #1f2a37; transition: border-color .12s, background .12s; }
.sq-opt small { font: 400 11.5px Roboto, sans-serif; color: #6b7280; } .sq-opt:hover { border-color: #2f7bc4; }
.sq-opt.is-sug { border-style: dashed; border-color: #8fb6df; } .sq-opt.is-sug small { color: #2f7bc4; }
.sq-opt.is-on { border-color: #2f7bc4; background: #eef5fc; box-shadow: inset 0 0 0 1px #2f7bc4; } .sq-opt.is-on small { color: #2f7bc4; }
.sq-inline { display: inline-flex; align-items: center; gap: 8px; margin: 10px 14px 0 0; font: 500 13px Roboto, sans-serif; color: #374151; }
.sq-inline input, .sq-inline select, .sq-lt input, .sq-setup .sq-tab input { height: 32px; padding: 0 9px; border: 1px solid #d6dde8; border-radius: 7px; font: 400 13px Roboto, sans-serif; color: #1f2a37; background: #fff; }
.sq-inline input[type=number] { width: 70px; } .sq-inline input:focus, .sq-inline select:focus, .sq-setup .sq-tab input:focus { outline: none; border-color: #2f7bc4; box-shadow: 0 0 0 3px rgba(47, 123, 196, .14); }
.sq-help { margin-top: 10px; padding: 10px 12px; border-radius: 9px; background: #f4f8fc; font: 400 13px/1.55 Roboto, sans-serif; color: #374151; } .sq-help p { margin: 0 0 6px; } .sq-help p:last-child { margin: 0; }
.sq-next { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border: 1px solid #f8d3bd; border-radius: 10px; background: #fff8f3; } .sq-next > svg { width: 18px; height: 18px; color: #e8641c; flex: none; } .sq-next p { flex: 1; min-width: 220px; margin: 0; font: 400 13px/1.5 Roboto, sans-serif; color: #374151; }
.sq-roles { display: grid; gap: 10px; } .sq-role { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 10px; border: 1px solid #eef1f5; border-radius: 10px; } .sq-role img { width: 64px; height: 64px; object-fit: cover; border-radius: 7px; background: #f1f4f8; } .sq-role b { font: 600 13.5px Roboto, sans-serif; color: #1f2a37; word-break: break-word; }
.sq-sugt { display: block; margin-top: 3px; font: 400 11.5px Roboto, sans-serif; color: #b45309; }
.sq-pv { margin: 6px 0 8px; overflow-x: auto; } .sq-pv canvas { display: block; max-width: 100%; border: 1px solid #e3e8ef; border-radius: 8px; }
.sq-lanes-q { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; font: 400 13px Roboto, sans-serif; color: #374151; } .sq-lanes-q .sq-inline { margin: 0; }
.sq-okt { font: 600 12px Roboto, sans-serif; font-style: normal; color: #18794e; }
.sq-pair { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font: 500 13px/1.45 Roboto, sans-serif; color: #1f2a37; } .sq-pair.is-warn { color: #b45309; } .sq-pair input { margin-top: 2px; }
.sq-adv { margin-top: 8px; font: 400 12.5px Roboto, sans-serif; color: #4b5563; } .sq-adv summary { cursor: pointer; color: #2f7bc4; }
.sq-lt { margin-top: 6px; } .sq-lt h4 { margin: 10px 0 4px; font: 600 13px Roboto, sans-serif; color: #374151; } .sq-lt tr.is-off td { color: #9ca3af; } .sq-setup .sq-tab td input:not([type=checkbox]) { width: 100%; max-width: 260px; }
.sq-qbtns { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0 10px; font: 400 12.5px Roboto, sans-serif; color: #6b7280; }
.sq-ti { width: 28px; height: 28px; object-fit: cover; border-radius: 5px; vertical-align: middle; margin-right: 8px; background: #f1f4f8; }
.sq-chans { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 4px; } .sq-chans figure { margin: 0; padding: 4px; border: 1px solid #e3e8ef; border-radius: 9px; text-align: center; } .sq-chans figure.is-nuc { border-color: #2f7bc4; } .sq-chans figure.is-mk { border-color: #18a874; } .sq-chans img { display: block; width: 120px; border-radius: 6px; background: #000; } .sq-chans figcaption { margin-top: 4px; font: 500 12px Roboto, sans-serif; color: #374151; }
.sq-su-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: linear-gradient(120deg, #dfeefc, #eef4fb, #e3f5ef); } .sq-su-foot p { margin: 0; flex: 1; min-width: 240px; font: 400 13.5px/1.5 Roboto, sans-serif; color: #1f2a37; }
.sq-whyw { position: relative; display: inline-block; vertical-align: middle; margin-left: 4px; }
.sq-why { width: 18px; height: 18px; padding: 0; border: 1px solid #c9d3e1; border-radius: 50%; background: #fff; color: #2f7bc4; font: 700 11px/16px Roboto, sans-serif; cursor: pointer; } .sq-why:hover, .sq-why:focus-visible { border-color: #2f7bc4; background: #eef5fc; outline: none; }
.sq-tipbox { position: absolute; z-index: 40; top: 24px; left: -8px; width: min(340px, 78vw); padding: 10px 12px; border: 1px solid #e3e8ef; border-radius: 10px; background: #fff; box-shadow: 0 6px 20px rgba(15, 23, 42, .1); font: 400 12.5px/1.5 Roboto, sans-serif; color: #374151; text-align: left; white-space: normal; } .sq-tipbox b { display: block; margin-bottom: 3px; font: 600 12px Roboto, sans-serif; color: #2f7bc4; }
.sq-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 14px; border: 1px solid #f8d3bd; border-radius: 12px; background: #fff8f3; } .sq-banner > svg { width: 20px; height: 20px; color: #d97706; flex: none; } .sq-banner > div { flex: 1; min-width: 240px; display: grid; gap: 2px; } .sq-banner b { font: 600 14px Roboto, sans-serif; color: #1f2a37; } .sq-banner span { font: 400 13px/1.45 Roboto, sans-serif; color: #4b5563; }
.sq-banner.is-info { border-color: #cfe0f3; background: #f4f8fc; } .sq-banner.is-info > svg { color: #2f7bc4; }
.sq-status { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 4px 0 14px; }
.sq-st { position: relative; display: grid; gap: 2px; padding: 9px 26px 9px 11px; border: 1px solid #e3e8ef; border-left-width: 3px; border-radius: 10px; background: #fff; } .sq-st span { font: 500 11.5px Roboto, sans-serif; color: #6b7280; text-transform: uppercase; letter-spacing: .03em; } .sq-st b { font: 600 13.5px/1.3 Roboto, sans-serif; color: #1f2a37; }
.sq-st .sq-whyw { position: absolute; top: 8px; right: 6px; margin: 0; } .sq-st .sq-tipbox { left: auto; right: -6px; }
.sq-st.is-ok { border-left-color: #18a874; } .sq-st.is-warn { border-left-color: #e8a317; } .sq-st.is-bad { border-left-color: #d0384a; } .sq-st.is-bad b { color: #b42335; }
.sq-qc p.is-crit { color: #b42335; } .sq-qc p.is-crit svg { color: #d0384a; } .sq-qc p span b { display: block; font: 600 12px Roboto, sans-serif; } .sq-qc p span { display: block; }
.sq-rob { margin: 10px 0 0; font: 400 12.5px/1.5 Roboto, sans-serif; color: #4b5563; }
.sq-mtw { max-height: 320px; overflow: auto; } .sq-mt { font-size: 12.5px; } .sq-mt td, .sq-mt th { white-space: nowrap; }
.sq-flags em { display: inline-block; margin: 0 4px 2px 0; padding: 1px 6px; border-radius: 6px; font: 500 11px Roboto, sans-serif; font-style: normal; } .sq-flags em.is-crit { background: #fde8eb; color: #b42335; } .sq-flags em.is-warn { background: #fdf3e1; color: #a15c07; }
.sq-empty { padding: 40px 12px; text-align: center; font: 400 14px Roboto, sans-serif; color: #6b7280; }
.sq-detok { width: 100%; justify-content: center; margin-top: 10px; }
.sq-busy button[data-stop] { margin-top: 6px; }
@media (max-width: 900px) { .sq-status { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sq-q > :not(h3):not(.sq-q-sub), .sq-q-sub { margin-left: 0; } }
.sq-multi { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e3e8ef; } .sq-multi-q { margin: 0 0 6px; font: 600 13.5px Roboto, sans-serif; color: #1f2a37; } .sq-multi .sq-q-note svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; color: #2f7bc4; } .sq-bnames { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.sq-cal { margin: 8px 0 0; } .sq-cal svg { display: block; max-width: 100%; border: 1px solid #e3e8ef; border-radius: 8px; background: #fff; }
.sq-vtools .aai-btn.is-on { border-color: #2f7bc4; background: #eef5fc; color: #1f4f80; } .sq-app .sq-vtools .aai-btn.sq-danger, .sq-app .sq-vtools .aai-btn.sq-danger svg { color: #b42335 !important; stroke: #b42335 !important; } .sq-app .sq-vtools .aai-btn.sq-danger { border-color: #f3c4cb !important; background: #fff5f6 !important; } .sq-vtools { flex-wrap: wrap; row-gap: 6px; }
/* demonstrations, guide card, one-question-at-a-time set-up (2026-11-02) */
.sq-demo { display: block; }
.sq-demo .sq-d-grow { transform-box: fill-box; transform-origin: top; animation: sqGrow 3.2s ease-in-out infinite; }
.sq-demo .sq-d-down { animation: sqDown 3.2s ease-in-out infinite; }
.sq-demo .sq-d-widen { transform-box: fill-box; transform-origin: left; animation: sqWiden 3.2s ease-in-out infinite; }
.sq-demo .sq-d-grip { animation: sqGrip 3.2s ease-in-out infinite; }
.sq-demo .sq-d-right { animation: sqRight 3.2s ease-in-out infinite; }
.sq-demo .sq-d-box { transform-box: fill-box; transform-origin: top left; animation: sqBox 3.4s ease-in-out infinite; }
.sq-demo .sq-d-diag { animation: sqDiag 3.4s ease-in-out infinite; }
.sq-demo .sq-d-fade { animation: sqFade 3.4s ease-in-out infinite; }
.sq-demo .sq-d-pop { opacity: 0; animation: sqPop 3s ease-out infinite; }
.sq-demo .sq-d-up { transform-box: fill-box; transform-origin: bottom; animation: sqUp 3s ease-out infinite; }
.sq-demo .sq-d-tint { animation: sqTint 3.4s ease-out infinite; }
.sq-demo .sq-d-show { opacity: 0; animation: sqShow 3.4s ease-out infinite; }
@keyframes sqGrow { 0%, 12% { transform: scaleY(.05); opacity: 0; } 18% { opacity: 1; } 55%, 85% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes sqDown { 0%, 12% { transform: translate(150px, 22px); } 55%, 100% { transform: translate(150px, 40px); } }
@keyframes sqWiden { 0%, 15% { transform: scaleX(1); } 55%, 85% { transform: scaleX(1.33); } 100% { transform: scaleX(1); } }
@keyframes sqGrip { 0%, 15% { transform: translateX(0); } 55%, 85% { transform: translateX(8px); } 100% { transform: translateX(0); } }
@keyframes sqRight { 0%, 15% { transform: translate(76px, 44px); } 55%, 85% { transform: translate(84px, 44px); } 100% { transform: translate(76px, 44px); } }
@keyframes sqBox { 0%, 10% { transform: scale(.05); opacity: 0; } 15% { opacity: 1; } 50%, 90% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
@keyframes sqDiag { 0%, 10% { transform: translate(92px, 51px); } 50%, 100% { transform: translate(116px, 73px); } }
@keyframes sqFade { 0%, 55% { opacity: 1; } 70%, 92% { opacity: .15; } 100% { opacity: 1; } }
@keyframes sqPop { 0% { opacity: 0; transform: translateY(3px); } 15%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sqUp { 0%, 20% { transform: scaleY(0); } 60%, 90% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: .3; } }
@keyframes sqTint { 0% { fill: transparent; stroke: #9aa4b4; } 25%, 85% { fill: color-mix(in srgb, var(--c) 22%, transparent); stroke: var(--c); } 100% { fill: transparent; stroke: #9aa4b4; } }
@keyframes sqShow { 0%, 45% { opacity: 0; } 60%, 90% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sq-demo *, .sq-q.is-current h3 i { animation: none !important; opacity: 1 !important; } }
.sq-q { display: flow-root; } /* the card always grows around its floated demonstration */
.sq-q-demo { float: right; margin: -4px 0 4px 14px; padding: 6px; border: 1px solid #e3e8ef; border-radius: 10px; background: #fbfcfe; }
.sq-q.is-current { border-color: #9cc2e8; box-shadow: 0 0 0 3px rgba(47, 123, 196, .08); }
.sq-q.is-current h3 i { background: #2f7bc4; color: #fff; animation: sqPulse 2.4s ease-in-out infinite; }
@keyframes sqPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 123, 196, .35); } 50% { box-shadow: 0 0 0 6px rgba(47, 123, 196, 0); } }
.sq-q.is-mini { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; margin-bottom: 8px; background: #fbfdfc; }
.sq-q.is-mini h3 { margin: 0; font-weight: 500; color: #374151; } .sq-q .sq-fold { margin-left: auto; font-weight: 500; }
.sq-prog { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: 500 13px Roboto, sans-serif; color: #374151; } .sq-prog i { flex: 1; height: 6px; border-radius: 3px; background: #e3e8ef; overflow: hidden; } .sq-prog b { display: block; height: 100%; border-radius: 3px; background: #2f7bc4; transition: width .4s ease; }
.sq-stage .sq-guide { position: absolute; z-index: 5; top: 10px; left: 10px; display: flex; gap: 12px; align-items: flex-start; max-width: min(460px, calc(100% - 20px)); padding: 10px 12px; border: 1px solid #e3e8ef; border-radius: 12px; background: rgba(255, 255, 255, .97); box-shadow: 0 4px 16px rgba(15, 23, 42, .08); font-family: Roboto, sans-serif; }
.sq-guide b { display: block; font: 600 14px Roboto, sans-serif; color: #1f2a37; } .sq-guide p { margin: 3px 0 8px; font: 400 12.5px/1.5 Roboto, sans-serif; color: #4b5563; } .sq-guide-demo { flex: none; padding: 4px; border-radius: 8px; background: #f6f8fb; } .sq-guide-demo .sq-demo { width: 128px; height: 77px; }
.sq-guide-acts { display: flex; align-items: center; gap: 12px; } .sq-guide-done { padding: 5px 14px !important; font-size: 12.5px !important; }
.sq-app .sq-vtools .aai-btn.sq-tool.is-on, .sq-app .sq-vtools .aai-btn.sq-tool.is-on:hover { background: #2f7bc4 !important; border-color: #2f7bc4 !important; color: #fff !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .12) !important; } .sq-app .sq-vtools .aai-btn.sq-tool.is-on svg { color: #fff !important; stroke: #fff !important; }
.sq-blots { margin: 0 0 8px; padding-left: 18px; font: 400 13px/1.5 Roboto, sans-serif; color: #374151; }
.sq-gcol { width: 22px; height: 22px; padding: 0; margin-right: 6px; border: 1px solid #d6dde8; border-radius: 6px; background: #fff; vertical-align: middle; cursor: pointer; } .sq-gcol::-webkit-color-swatch-wrapper { padding: 2px; } .sq-gcol::-webkit-color-swatch { border: 0; border-radius: 4px; }
.sq-start { max-width: 1060px; margin: 0 auto; padding: 40px 24px 48px; text-align: center; font-family: Roboto, sans-serif; } .sq-start h2 { margin: 6px 0 6px; font: 700 26px Roboto, sans-serif; color: #1f2a37; } .sq-start > p { margin: 0 0 22px; font: 400 14.5px/1.5 Roboto, sans-serif; color: #4b5563; }
.sq-start .sq-start-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: 12px; text-align: center; }
.sq-start .sq-start-card { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; height: 100%; padding: 18px 14px 16px; border: 1px solid #e3e8ef; border-radius: 12px; background: #fff; text-align: center; cursor: pointer; opacity: 0; transform: translateY(6px); animation: sqIn .4s ease-out forwards; transition: border-color .15s, transform .15s; } .sq-start .sq-start-card:hover { border-color: #2f7bc4; transform: translateY(-2px); }
.sq-start .sq-start-card i { flex: none; width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 2px; border-radius: 10px; background: #eef5fc; color: #2f7bc4; } .sq-start .sq-start-card b { display: block; max-width: 100%; font: 600 15px/1.3 Roboto, sans-serif; color: #1f2a37; letter-spacing: -0.01em; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } .sq-start .sq-start-card span { display: block; max-width: 100%; font: 400 12.5px/1.45 Roboto, sans-serif; color: #6b7280; overflow-wrap: break-word; }
@keyframes sqIn { to { opacity: 1; transform: none; } } .sq-start-skip { display: inline-block; margin-top: 18px; } @media (prefers-reduced-motion: reduce) { .sq-start-card { animation: none; opacity: 1; transform: none; } }
.sq-find li.is-auto { color: #374151; } .sq-find li.is-auto > svg { color: #16a34a; }
.sq-stats .sq-marks { margin-left: auto; font: 400 12px Roboto, sans-serif; } .sq-st-test { margin: 0 0 4px; font: 400 13px/1.5 Roboto, sans-serif; color: #1f2a37; } .sq-st-sent { margin: 0 0 8px; font: 400 13px/1.5 Roboto, sans-serif; color: #374151; } .sq-st-prot { margin: 8px 0 2px; font: 600 13px Roboto, sans-serif; color: #0f2a4a; } .sq-st-tab { margin-bottom: 6px; }
.sq-app .sq-tab input.sq-gcol, .sq-app input.sq-gcol { width: 22px !important; min-width: 22px; max-width: 22px; height: 22px; padding: 0 !important; flex: none; }
.sq-findings{background:#f2f8fe;border:1px solid #d6e5f7;border-left:3px solid #2563eb;border-radius:8px;padding:10px 12px;margin:0 0 12px}
.sq-findings b{display:block;font-size:12px;color:#2563eb;margin-bottom:4px}
.sq-findings p{margin:4px 0 0;font-size:13.5px;line-height:1.45;color:#0f1f3d;font-weight:500}
.sq-reptab { margin: 4px 0 6px; } .sq-reptab td { vertical-align: middle; } .sq-app .sq-reptab input.sq-repn { width: 64px; height: 30px; padding: 0 8px; border: 1px solid #d6dde8; border-radius: 7px; font: 400 13px Roboto, sans-serif; }
.sq-fmt { display: block; margin-top: 6px; font-size: 13px; color: #6b7280; }
/* Western blot plan and upload places (2026-11-02) */
.sq-plan { max-width: 780px; margin: 0 auto; padding: 32px 24px 48px; font-family: Roboto, sans-serif; } .sq-plan h2 { margin: 6px 0 4px; font: 700 24px Roboto, sans-serif; color: #1f2a37; } .sq-plan-lead { margin: 0 0 18px; font: 400 14px/1.5 Roboto, sans-serif; color: #4b5563; }
.sq-plan-q { margin: 0 0 12px; padding: 16px 18px; background: #fff; border: 1px solid #e3e8ef; border-radius: 12px; } .sq-plan-q h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 600 15px Roboto, sans-serif; color: #1f2a37; }
.sq-plan-q h3 i { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #eaf2fb; color: #2f7bc4; font: 700 12px Roboto, sans-serif; font-style: normal; }
.sq-plan-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px 34px; } .sq-plan .sq-plan-sub { margin: 6px 0 6px 34px; font: 400 13px/1.45 Roboto, sans-serif; color: #6b7280; } .sq-plan-q > .sq-link, .sq-plan-q > .sq-opts, .sq-plan-q > .sq-seg, .sq-plan-q > .sq-slots { margin-left: 34px; }
.sq-app .sq-plan input[type=text], .sq-app .sq-plan input[type=number], .sq-app .sq-plan select { height: 36px; padding: 0 10px; border: 1px solid #d6dde8; border-radius: 8px; font: 400 14px Roboto, sans-serif; color: #1f2a37; background: #fff; } .sq-app .sq-plan input[type=text] { width: 220px; max-width: 100%; } .sq-app .sq-plan input[type=number] { width: 84px; }
.sq-app .sq-plan input:focus, .sq-app .sq-plan select:focus { outline: none; border-color: #2f7bc4; box-shadow: 0 0 0 3px rgba(47, 123, 196, .14); } .sq-plan-kda { display: inline-flex; align-items: center; gap: 6px; font: 400 13px Roboto, sans-serif; color: #6b7280; }
.sq-plan-n { display: inline-flex; } .sq-plan-go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; } .sq-plan-go .ps-dl[disabled] { opacity: .5; cursor: not-allowed; } .sq-plan .sq-plan-fmt { margin-left: 0; }
.sq-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.sq-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 14px 10px 12px; border: 1.5px dashed #c9d6e8; border-radius: 10px; background: #fbfcfe; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.sq-slot:hover, .sq-slot.is-over { border-color: #2f7bc4; background: #f2f8fe; } .sq-slot.is-full { border-style: solid; border-color: #b9dcc7; background: #fff; }
.sq-slot-ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #eaf2fb; color: #2f7bc4; } .sq-slot img { width: 100%; height: 56px; object-fit: contain; border-radius: 6px; background: #f3f5f9; }
.sq-slot b { font: 600 14px Roboto, sans-serif; color: #1f2a37; overflow-wrap: anywhere; } .sq-slot span { font: 400 12px Roboto, sans-serif; color: #6b7280; } .sq-slot em { font: 400 11.5px Roboto, sans-serif; font-style: normal; color: #8a94a6; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-plan-more { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; font: 400 13px Roboto, sans-serif; color: #6b7280; } .sq-app .sq-plan .sq-plan-more input { width: 64px; height: 32px; }
.sq-plan-reps { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 4px 0 10px; }
.sq-lt.is-fold { margin: 0; border-top: 1px solid #eef1f6; } .sq-lt.is-open + .sq-lt.is-fold, .sq-lt.is-fold:first-child { border-top: 0; }
.sq-lt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 0; } .sq-lt-row b { font: 600 13.5px Roboto, sans-serif; color: #1f2a37; } .sq-lt-sum { flex: 1; min-width: 0; font: 400 13px Roboto, sans-serif; color: #6b7280; overflow-wrap: anywhere; } .sq-lt-act { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.sq-lt.is-open { margin: 4px 0 10px; padding: 4px 12px 8px; border: 1px solid #e3e8ef; border-radius: 10px; background: #fff; }
.sq-lt .sq-qbtns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 2px; } .sq-lt .sq-qbtns > span { font: 400 12.5px Roboto, sans-serif; color: #6b7280; margin-right: 2px; }
.sq-app .sq-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border: 1px solid #d6e2f2; border-radius: 999px; background: #fff; font: 500 12.5px Roboto, sans-serif; color: #2f6fae; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s; } .sq-app .sq-chip:hover { border-color: #2f7bc4; background: #f2f8fe; }
.sq-lt .sq-tab td { vertical-align: middle; } .sq-lt .sq-tab td:first-child { display: table-cell; width: 60px; color: #4b5563; } .sq-lt .sq-tab td:last-child, .sq-lt .sq-tab th:last-child { text-align: center; width: 90px; }
.sq-plan-q { display: flow-root; } .sq-plan-q .sq-q-demo { margin: -2px 0 6px 14px; } .sq-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .sq-plan-demo { flex: none; margin: 0 0 12px; padding: 6px; border: 1px solid #e3e8ef; border-radius: 10px; background: #fbfcfe; } .sq-plan { display: flow-root; }
.sq-demo .sq-d-drop { animation: sqDrop 3.4s ease-in-out infinite; } @keyframes sqDrop { 0%, 12% { transform: translate(0, 0); opacity: 1; } 55%, 88% { transform: translate(82px, 14px); opacity: 1; } 100% { transform: translate(82px, 14px); opacity: 0; } }
.sq-lt-tip { display: flex; align-items: center; gap: 12px; margin: 2px 0 10px; padding: 6px 10px; border: 1px solid #e3e8ef; border-radius: 10px; background: #fbfcfe; } .sq-lt-tip p { margin: 0; font: 400 13px/1.45 Roboto, sans-serif; color: #4b5563; } .sq-lt-tip .sq-demo { flex: none; width: 120px; height: 72px; }
@media (max-width: 640px) { .sq-plan-demo, .sq-plan-q .sq-q-demo { display: none; } }
@media (prefers-reduced-motion: reduce) { .sq-demo * { animation: none !important; opacity: 1 !important; } }
.sq-left { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; } .sq-left > * { min-width: 0; } .sq-left > .sq-card { margin: 0; }
.sq-stats h4 .sq-marks { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font: 400 12.5px Roboto, sans-serif; color: #6b7280; } .sq-app .sq-stats .sq-marks select { height: 28px; padding: 0 8px; border: 1px solid #d6dde8; border-radius: 7px; font: 400 12.5px Roboto, sans-serif; color: #1f2a37; background: #fff; }
.sq-below { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; } .sq-below .sq-mtw { max-height: 360px; }
.sq-app .sq-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 14px; }
.sq-app .sq-acts > button, .sq-app .sq-acts > .sq-dd > button, .sq-app .sq-acts > div > button { width: 100%; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0 12px; border: 1px solid #d6e2f2; border-radius: 9px; background: #fff; box-shadow: none; font: 500 13.5px Roboto, sans-serif; color: #2f6fae; } .sq-app .sq-acts > button:hover, .sq-app .sq-acts > div > button:hover { border-color: #2f7bc4; background: #f2f8fe; }
.sq-app .sq-acts > button.ps-dl { background: #2f7bc4; border-color: #2f7bc4; color: #fff; } .sq-app .sq-acts > button.ps-dl:hover { background: #2a6fb0; } .sq-app .sq-acts svg { width: 16px; height: 16px; flex: none; }
.sq-app .sq-steps .sq-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 4px; } @media (max-width: 520px) { .sq-app .sq-steps .sq-acts { grid-template-columns: minmax(0, 1fr); } }
.sq-app .sq-res-grid { align-items: stretch; } .sq-app .sq-left, .sq-app .sq-side { display: flex; flex-direction: column; gap: 12px; } .sq-app .sq-left > :last-child, .sq-app .sq-side > :last-child { flex: 1 1 auto; } /* both columns end level: the last card of the shorter one fills the rest */
@media (max-width: 1100px) { .sq-app .sq-left > :last-child, .sq-app .sq-side > :last-child { flex: none; } }
.sq-zl { display: inline-flex; align-items: center; gap: 2px; font: 500 12.5px Roboto, sans-serif; color: #4b5563; } .sq-app .sq-zl input { width: 76px; height: 30px; padding: 0 6px; border: 1px solid #d6dde8; border-radius: 7px; font: 500 12.5px Roboto, sans-serif; color: #1f2a37; text-align: right; background: #fff; }
.sq-adj-lead { margin: 2px 0 8px; font: 400 12.5px/1.4 Roboto, sans-serif; color: #6b7280; } .sq-adj-why { display: block; margin: 2px 0 6px; font: 400 12px/1.45 Roboto, sans-serif; color: #6b7280; } .sq-adj-ends { display: flex; justify-content: space-between; align-items: center; font: 400 11.5px Roboto, sans-serif; color: #8a94a6; } .sq-adj-ends i { font-style: normal; } .sq-adj-ends em { font-style: normal; color: #2f6fae; }
.sq-mark { margin: 10px 0; padding: 10px 12px; border: 1px solid #f3d4bf; border-radius: 10px; background: #fffaf6; } .sq-mark h5 { margin: 0 0 4px; font: 600 13px Roboto, sans-serif; color: #9a3412; }
.sq-mark ol { margin: 6px 0; padding: 0; list-style: none; display: grid; gap: 4px; } .sq-mark li { display: flex; align-items: center; gap: 8px; font: 400 12.5px Roboto, sans-serif; color: #374151; } .sq-mark li span { min-width: 52px; }
.sq-app .sq-mark select { height: 28px; padding: 0 6px; border: 1px solid #d6dde8; border-radius: 7px; font: 400 12.5px Roboto, sans-serif; background: #fff; } .sq-mark label { display: flex; align-items: center; gap: 6px; font: 500 12.5px Roboto, sans-serif; color: #374151; }
.sq-app .sq-undo { display: inline-flex; align-items: center; gap: 4px; width: auto; padding: 0 8px; font: 500 12.5px Roboto, sans-serif; color: #2f6fae; } .sq-app .sq-undo[disabled] { opacity: .4; cursor: default; }
.sq-revnav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 4px; padding-top: 12px; border-top: 1px solid #eef1f6; } .sq-revnav .ps-dl { margin: 0; }
.sq-setbio { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 8px 0 4px; } .sq-setbio .ps-dl { margin: 0; } .sq-setbio span { font: 400 12px/1.4 Roboto, sans-serif; color: #6b7280; }
.sq-q.is-flash { animation: sqFlash 1.6s ease-out; } @keyframes sqFlash { 0%, 40% { box-shadow: 0 0 0 3px rgba(47, 123, 196, .35); } 100% { box-shadow: 0 0 0 0 rgba(47, 123, 196, 0); } }
.sq-view > .sq-guide { position: static; display: flex; align-items: center; gap: 12px; max-width: none; margin: 0; padding: 8px 14px; border: 0; border-bottom: 1px solid #e3e8ef; border-radius: 0; background: #f7faff; box-shadow: none; } /* the tool tip sits above the blot, never on it */
.sq-view > .sq-guide .sq-guide-demo { flex: none; } .sq-view > .sq-guide .sq-guide-demo .sq-demo { width: 96px; height: 58px; } .sq-view > .sq-guide b { font: 600 13px Roboto, sans-serif; color: #1f2a37; } .sq-view > .sq-guide p { margin: 2px 0 4px; font: 400 12.5px/1.45 Roboto, sans-serif; color: #4b5563; } .sq-view > .sq-guide .sq-guide-acts { display: flex; align-items: center; gap: 12px; } .sq-view > .sq-guide .sq-guide-done { height: 30px; padding: 0 14px; }
.sq-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 2px; padding-top: 12px; border-top: 1px dashed #e3e8ef; } .sq-confirm .ps-dl { margin: 0; } .sq-confirm span { font: 400 12.5px Roboto, sans-serif; color: #6b7280; }
.sq-qc-fix { display: block; margin-top: 4px; font: 400 12.5px/1.45 Roboto, sans-serif; font-style: normal; color: #6b7280; } .sq-app .sq-qc-btn { margin-top: 6px; }
.sq-lwl { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px Roboto, sans-serif; color: #4b5563; } .sq-lwl input[type=range] { width: 90px; }
.sq-app .sq-vtools button[disabled] { opacity: .45; cursor: default; }
.sq-revnav { flex-direction: column; align-items: stretch; gap: 6px; } .sq-revnav .ps-dl { justify-content: center; width: 100%; } .sq-revnav .sq-link { align-self: center; font-size: 12.5px; }
.sq-mini > div { align-items: baseline; } .sq-mini span { font-size: 12.5px; } .sq-mini b { white-space: nowrap; }
.sq-qc p span { font-size: 13px; line-height: 1.45; } .sq-qc .sq-qc-btn { margin: 4px 0 0; display: inline-flex; }
/* Review side panel: never wider than its column (long option names wrap or truncate inside); the tip gets its own row above the blot */
.sq-check .sq-insp { overflow-x: hidden; grid-template-columns: minmax(0, 1fr); } .sq-check .sq-insp > *, .sq-insp label, .sq-insp details { min-width: 0; max-width: 100%; }
.sq-insp select, .sq-insp input:not([type=checkbox]):not([type=radio]) { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; text-overflow: ellipsis; }
.sq-insp .sq-mini > div { min-width: 0; } .sq-insp .sq-mini span { min-width: 0; overflow-wrap: anywhere; } .sq-insp h4 { overflow-wrap: anywhere; min-width: 0; }
.sq-view:has(> .sq-guide) { grid-template-rows: auto auto minmax(0, 1fr) auto; } .sq-view > .sq-guide { min-height: max-content; overflow: visible; }
/* Results graph controls: an aligned grid, label above each control, calm blue */
.sq-app .sq-gtools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; align-items: end; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #edf1f7; }
.sq-app .sq-gtools > .sq-fld { display: flex; flex-direction: column; align-items: stretch; gap: 5px; min-width: 0; font: 500 11.5px Roboto, sans-serif; color: #64748b; } .sq-app .sq-gtools > label:not(.sq-chk) { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; justify-items: start; column-gap: 6px; row-gap: 5px; min-width: 0; font: 500 11.5px Roboto, sans-serif; color: #64748b; letter-spacing: .01em; }
.sq-app .sq-gtools > label.sq-wide { grid-column: span 2; } .sq-app .sq-gtools > label.sq-chk { flex-direction: row; align-items: center; align-self: center; font-size: 12.5px; color: #33415c; }
.sq-app .sq-gtools select { grid-column: 1 / -1; justify-self: stretch; width: 100%; min-width: 0; height: 36px; padding: 0 30px 0 10px; border: 1px solid #d8e0ec; border-radius: 8px; font: 500 13px Roboto, sans-serif; color: #1f2a44; background-color: #fff; text-overflow: ellipsis; }
.sq-app .sq-gtools select:focus { outline: none; border-color: #2f7bc4; box-shadow: 0 0 0 3px rgba(47,123,196,.12); }
.sq-app .sq-gtools .sq-seg { display: flex; height: 36px; padding: 3px; border: 1px solid #d8e0ec; border-radius: 8px; background: #f6f8fc; }
.sq-app .sq-gtools .sq-seg button { flex: 1; border: 0; border-radius: 6px; background: transparent; font: 600 12.5px Roboto, sans-serif; color: #5a6680; cursor: pointer; }
.sq-app .sq-gtools .sq-seg button.is-on { background: #2f7bc4; color: #fff; }
@media (max-width: 760px) { .sq-app .sq-gtools { grid-template-columns: minmax(0, 1fr); } .sq-app .sq-gtools > label.sq-wide { grid-column: auto; } }
.sq-app .sq-bsp { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px auto 2px; padding: 8px 16px; width: fit-content; border: 1px solid #e3e8f0; border-radius: 10px; background: #fff; font: 600 12.5px Roboto, sans-serif; color: #33415c; } .sq-app .sq-bsp input { width: 220px; accent-color: #2f7bc4; } .sq-app .sq-bsp output { min-width: 38px; font-weight: 600; color: #2f7bc4; }
/* Statistics card: one compact table, test details in small type below */
.sq-app .sq-st-tab { width: 100%; margin: 12px 0 8px; border-collapse: collapse; font: 400 13px Roboto, sans-serif; color: #1f2a44; }
.sq-app .sq-st-tab th { padding: 7px 8px; background: #f4f7fb; border-bottom: 1px solid #e3e8f0; font: 600 11.5px Roboto, sans-serif; color: #5a6680; text-align: left; } .sq-app .sq-st-tab th:first-child { border-radius: 8px 0 0 0; } .sq-app .sq-st-tab th:last-child { border-radius: 0 8px 0 0; }
.sq-app .sq-st-tab td { padding: 8px; border-bottom: 1px solid #eef1f6; vertical-align: middle; } .sq-app .sq-st-tab tr.is-first td { border-top: 1px solid #dfe5ee; } .sq-app .sq-st-tab .sq-num { text-align: right; font-variant-numeric: tabular-nums; } .sq-app .sq-st-tab .sq-st-p { font-weight: 600; }
.sq-app .sq-sig { display: inline-block; min-width: 34px; padding: 2px 8px; border-radius: 999px; background: #eef1f6; color: #5a6680; font: 600 11.5px Roboto, sans-serif; text-align: center; } .sq-app .sq-sig.is-sig { background: #e7f0fa; color: #1f5f9e; }
.sq-app .sq-st-foot p { margin: 0 0 4px; font: 400 12px/1.5 Roboto, sans-serif; color: #5a6680; } .sq-app .sq-st-foot b { color: #33415c; font-weight: 600; } .sq-app .sq-st-lines span { display: block; }
/* Quality card: a table, one row per issue */
.sq-app .sq-qc-tab { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font: 400 12.5px/1.45 Roboto, sans-serif; color: #33415c; }
.sq-app .sq-qc-tab th { padding: 7px 8px; background: #f4f7fb; border-bottom: 1px solid #e3e8f0; font: 600 11.5px Roboto, sans-serif; color: #5a6680; text-align: left; } .sq-app .sq-qc-tab td { padding: 8px; border-bottom: 1px solid #eef1f6; vertical-align: top; } .sq-app .sq-qc-tab .sq-qi { font-weight: 600; color: #1f2a44; }
.sq-app .sq-lv { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 600 11px Roboto, sans-serif; white-space: nowrap; } .sq-app .sq-lv.is-crit { background: #fdecec; color: #b42318; } .sq-app .sq-lv.is-warn { background: #fff4e5; color: #a15c07; } .sq-app .sq-lv.is-info { background: #e7f0fa; color: #1f5f9e; }
.sq-app .sq-rob { margin-top: 4px; padding-top: 10px; border-top: 1px solid #eef1f6; }
/* Findings: a light line between findings */
.sq-app .sq-findings p + p { margin-top: 8px; padding-top: 8px; border-top: 1px solid #d6e4f3; }
/* Every drop-down in the studio: the site's calm style (rounded, thin border, blue chevron, soft blue focus) */
.sq-app select { -webkit-appearance: none; appearance: none; min-height: 34px; padding: 6px 32px 6px 10px; border: 1px solid #d8e0ec; border-radius: 8px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232f7bc4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; font: 500 13px Roboto, sans-serif; color: #1f2a44; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sq-app select:hover { border-color: #b9c8dc; } .sq-app select:focus { outline: none; border-color: #2f7bc4; box-shadow: 0 0 0 3px rgba(47,123,196,.12); } .sq-app select:disabled { background-color: #f6f8fc; color: #8a94a8; cursor: default; }
.sq-app .sq-gtools > .sq-bsz { grid-column: span 2; gap: 6px; } .sq-app .sq-bsz-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 44px; align-items: center; gap: 10px; font: 500 12.5px Roboto, sans-serif; color: #33415c; } .sq-app .sq-bsz-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sq-app .sq-bsz-row input { width: 100%; accent-color: #2f7bc4; } .sq-app .sq-bsz-row output { font-weight: 600; color: #2f7bc4; text-align: right; }
.sq-plan .sq-mside .sts-seg { display: inline-flex; }
/* the marker question: a two-column form (label | controls), aligned rows */
.sq-plan .sq-mform { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 12px 16px; margin: 4px 0 6px 34px; max-width: 640px; }
.sq-plan .sq-mf-l { font: 500 13.5px Roboto, sans-serif; color: #5a6680; } .sq-plan .sq-mf-c { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.sq-plan .sq-mf-c select { flex: 0 0 auto; width: auto; min-width: 150px; } .sq-plan .sq-mf-c select[data-pl="ma0"], .sq-plan .sq-mf-c select[data-pl="ma1"] { min-width: 112px; } .sq-plan .sq-mf-c select[data-pl="mstd"] { min-width: 260px; } .sq-plan .sq-mf-c input[data-pl="msizes"] { flex: 1 1 260px; min-width: 0; }
.sq-plan .sq-mf-and { margin: 0 6px; font: 400 13.5px Roboto, sans-serif; color: #5a6680; } .sq-plan .sq-mform .sts-seg { display: inline-flex; }
@media (max-width: 640px) { .sq-plan .sq-mform { grid-template-columns: minmax(0, 1fr); gap: 4px; margin-left: 0; } .sq-plan .sq-mf-l { margin-top: 8px; } }
.sq-app .sq-gtools .sq-bsz-mode { width: 200px; margin-bottom: 4px; }
.sq-app .wb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; } .sq-app .wb-lw { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font: 500 12.5px Roboto, sans-serif; color: #5a6680; } .sq-app .wb-lw input { width: 120px; accent-color: #2f7bc4; }
/* results controls: rows aligned at the top; Blot size a block of its own */
.sq-app .sq-gtools { align-items: start; } .sq-app .sq-gtools > label.sq-chk { align-self: center; margin-top: 18px; }
.sq-app .sq-gtools > .sq-bsz { padding: 10px 12px; border: 1px solid #e3e8f0; border-radius: 10px; background: #fafcff; } .sq-app .sq-gtools > .sq-bsz > span { margin-bottom: 2px; }
.sq-app .sq-bsz-row { grid-template-columns: 96px minmax(0, 1fr) 44px; }
/* sample matching: the blot previews side by side in equal frames, top-aligned, each drawn to the frame's full width (one scale for all) */
.sq-app .wb-pair { align-items: start; } .sq-app .wb-pair figure { display: flex; flex-direction: column; height: 100%; } .sq-app .wb-pair canvas { width: 100%; height: auto; }
.sq-app .wb-adj { margin: 2px 0 8px; } .sq-app .wb-adj .sq-hint { font-size: 12.5px; }
.sq-app .wb-pv canvas { width: 100%; height: auto; } /* Check bands: every blot preview the frame's full width, one scale for all */
/* Blot size: compact — the label and Auto/Manual on one line, the sliders in two columns beside each other */
.sq-app .sq-gtools > .sq-bsz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; row-gap: 6px; align-items: center; }
.sq-app .sq-gtools > .sq-bsz > span { grid-column: 1; margin: 0; } .sq-app .sq-gtools > .sq-bsz > .sq-bsz-mode { grid-column: 2; justify-self: end; width: 180px; height: 32px; margin: 0; }
.sq-app .sq-gtools > .sq-bsz > .sq-hint { grid-column: 1 / -1; } .sq-app .sq-bsz-row { grid-template-columns: 70px minmax(0, 1fr) 40px; gap: 8px; }
.sq-app .wb-sec > h4 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sq-app .wb-sec > h4 .wb-adjbtn { margin-left: auto; }
.sq-app .wb-adjbtn { padding: 7px 14px; border: 0; border-radius: 8px; background: #2f7bc4; color: #fff; font: 600 13px Roboto, sans-serif; cursor: pointer; transition: background .15s; } .sq-app .wb-adjbtn:hover { background: #276aa9; } .sq-app .wb-adjbtn:focus-visible { outline: 2px solid #9cc3ea; outline-offset: 2px; }
/* Blot size as a card at the top of the right column, above Groups */
.sq-app .sq-side > .sq-bsz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; row-gap: 8px; align-items: center; }
.sq-app .sq-side > .sq-bsz > h4 { grid-column: 1; margin: 0; } .sq-app .sq-side > .sq-bsz > .sq-bsz-mode { grid-column: 2; justify-self: end; width: 170px; height: 32px; margin: 0; }
.sq-app .sq-side > .sq-bsz > .sq-hint { grid-column: 1 / -1; margin: 0; }
/* start page: the feature list in two even columns, one line each; the graph with a significance bracket */
.sq-intro .ps-intro-pts.sq-intro-pts { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 40px; row-gap: 10px; } .sq-intro .sq-intro-pts li { white-space: nowrap; } @media (max-width: 760px) { .sq-intro .ps-intro-pts.sq-intro-pts { grid-template-columns: 1fr; } .sq-intro .sq-intro-pts li { white-space: normal; } }
.sq-ia-graph { position: relative; } .sq-ia-sig { position: absolute; left: 21px; width: 72px; top: -20px; height: 9px; border: 1.5px solid #33415c; border-bottom: 0; font-style: normal; } .sq-ia-sig b { position: absolute; left: 50%; top: -17px; transform: translateX(-50%); font: 700 15px/1 Roboto, sans-serif; color: #1f2a44; letter-spacing: 1px; }
.sq-ia-2 svg { width: 15px; height: 15px; margin-right: 4px; vertical-align: -2px; color: #2f7bc4; }
.sq-intro .sq-intro-pts li::before { background: #eaf2fb !important; color: #2f7bc4 !important; box-shadow: none !important; }
/* ---- Two ways to work, one step bar, light motion (2026-11-03) ---- */
@keyframes sqEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sqGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.sq-app .sq-enter { animation: sqEnter .32s cubic-bezier(.2, .7, .2, 1) both; }
.sq-app .sq-enter .sq-card, .sq-app .sq-enter .wb-pane, .sq-app .sq-enter .sq-q, .sq-app .sq-enter .sq-qstat, .sq-app .sq-enter .wb-status, .sq-app .sq-enter .wb-hl { animation: sqEnter .38s cubic-bezier(.2, .7, .2, 1) both; }
.sq-app .sq-enter .sq-card:nth-child(2), .sq-app .sq-enter .wb-hl:nth-child(2) { animation-delay: .05s; } .sq-app .sq-enter .sq-card:nth-child(3), .sq-app .sq-enter .wb-hl:nth-child(3) { animation-delay: .1s; } .sq-app .sq-enter .sq-card:nth-child(n+4) { animation-delay: .14s; }
.sq-app .sq-enter .sq-qsvg rect[rx] { transform-box: fill-box; transform-origin: 50% 100%; animation: sqGrow .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: .12s; }
.sq-app .sts-steps button { transition: background .2s, color .2s, box-shadow .2s; }
.sq-app .sts-steps button.is-done i { background: #e7f0fb !important; color: #2f7bc4 !important; }
.sq-app .sts-steps.is-many button { padding-left: 9px; padding-right: 11px; }
.sq-app .sts-steps.is-many button span { font-size: 12.5px; }
.sq-app .wb-steps, .sq-app .wb-head { display: none; }
.sq-goal { max-width: 860px; margin: 0 auto; text-align: center; }
.sq-goal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 22px auto 14px; max-width: 760px; }
.sq-goal-card { text-align: left; background: #fff; border: 1px solid #dfe6f1; border-radius: 16px; padding: 22px 22px 18px; cursor: pointer; font: inherit; color: #14213d; display: grid; gap: 6px; align-content: start; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 14px 34px -24px rgba(20, 33, 61, .45); transition: transform .15s, box-shadow .2s, border-color .2s; animation: sqEnter .4s cubic-bezier(.2, .7, .2, 1) both; }
.sq-goal-card:hover { transform: translateY(-2px); border-color: #9cc3e6; box-shadow: 0 2px 4px rgba(16, 24, 40, .06), 0 20px 40px -24px rgba(20, 33, 61, .5); }
.sq-goal-card.is-on { border-color: #2f7bc4; box-shadow: inset 0 0 0 1px #2f7bc4, 0 14px 34px -24px rgba(47, 123, 196, .8); }
.sq-goal-card i { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #eaf2fb; color: #2f7bc4; margin-bottom: 4px; }
.sq-goal-card i svg { width: 22px; height: 22px; }
.sq-goal-card b { font: 700 17px Roboto, sans-serif; }
.sq-goal-card > span { color: #5a6680; font-size: 13.5px; }
.sq-goal-card ul { list-style: none; margin: 8px 0 0; padding: 10px 0 0; border-top: 1px solid #eef2f8; display: grid; gap: 6px; }
.sq-goal-card li { position: relative; padding-left: 22px; font-size: 13px; color: #33415c; }
.sq-goal-card li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 5px; background: #eaf2fb; color: #2f7bc4; font: 800 10px/16px Roboto, sans-serif; text-align: center; }
.sq-goal-back { margin-top: 4px; }
@media (max-width: 640px) { .sq-goal-grid { grid-template-columns: 1fr; } }
.sq-goalsw { display: inline-flex; border: 1px solid #d6e0ee; border-radius: 999px; padding: 3px; background: #fff; gap: 2px; flex: 0 0 auto; }
.sq-goalsw button { border: 0; background: none; border-radius: 999px; padding: 6px 13px; font: 600 12.5px Roboto, sans-serif; color: #33415c; cursor: pointer; transition: background .2s, color .2s; }
.sq-goalsw button.is-on { background: #2f7bc4; color: #fff; }
.sq-goalsw button:not(.is-on):hover { background: #f1f6fc; }
.sq-res-head .sq-goalsw { margin-left: auto; }
.sq-quant { max-width: 1180px; margin: 0 auto; }
.sq-qhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sq-qhead h2 { margin: 2px 0 0; font: 800 24px Roboto, sans-serif; color: #14213d; letter-spacing: -.01em; }
.sq-qstat { display: flex; align-items: center; gap: 10px; border: 1px solid #c9e6d5; border-left: 4px solid #18a874; background: #f2fbf6; border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; font-size: 13px; color: #33415c; }
.sq-qstat.is-review { border-color: #f2d7a6; border-left-color: #e8a21a; background: #fffaf0; }
.sq-qstat > svg { width: 18px; height: 18px; flex: 0 0 auto; color: #18a874; } .sq-qstat.is-review > svg { color: #c27c0e; }
.sq-qstat span { flex: 1 1 auto; } .sq-qstat b { color: #14213d; margin-right: 8px; } .sq-qstat .ps-dl { flex: 0 0 auto; }
.sq-qacts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.sq-qacts svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.sq-qgrid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.sq-qmain, .sq-qside { display: grid; gap: 14px; min-width: 0; }
@media (max-width: 900px) { .sq-qgrid { grid-template-columns: 1fr; } }
.sq-quant .sq-card { margin: 0; }
.sq-qsvg svg { width: 100%; height: auto; display: block; }
.sq-qtab h4 { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.sq-qref, .sq-qmeas { font: 500 12.5px Roboto, sans-serif; color: #5a6680; display: inline-flex; gap: 6px; align-items: center; }
.sq-qref select, .sq-qmeas select { font: 12.5px Roboto, sans-serif; padding: 3px 8px; border: 1px solid #d6dde8; border-radius: 8px; background: #fff; color: #14213d; }
.sq-qmeas { margin-top: 8px; }
.sq-qname { width: 100%; min-width: 90px; box-sizing: border-box; border: 1px solid transparent; border-radius: 6px; padding: 3px 6px; font: 13px Roboto, sans-serif; color: #14213d; background: transparent; transition: border-color .15s, background .15s; }
.sq-qname:hover { border-color: #d6dde8; background: #fff; } .sq-qname:focus { outline: 0; border-color: #2f7bc4; background: #fff; box-shadow: 0 0 0 3px rgba(47, 123, 196, .15); }
.sq-qtab tr.is-off td { color: #8a94a8; }
.sq-qflag em { display: inline-block; font-style: normal; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 7px; margin: 1px 3px 1px 0; background: #fff4e0; color: #9a5b00; white-space: nowrap; }
.sq-qflag em.is-crit { background: #fdecec; color: #b42318; }
.sq-qimg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sq-qimg-grid figure { margin: 0; background: #f6f8fb; border: 1px solid #e3e8ef; border-radius: 10px; padding: 6px; }
.sq-qimg-grid canvas { width: 100%; height: auto; display: block; border-radius: 6px; }
.sq-qimg-grid figcaption { font-size: 12px; color: #4b5563; margin: 4px 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-qmore p { margin: 0 0 8px; font-size: 13px; color: #4b5563; }
.sq-qline p { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 13px; }
.sq-qline p svg { width: 16px; height: 16px; flex: 0 0 auto; }
.sq-qline .sq-q-crit { color: #b42318; } .sq-qline .sq-q-warn { color: #9a5b00; } .sq-qline .sq-ok { color: #18794e; }
.sq-statmore > summary { color: #2f7bc4; font-weight: 600; }
.sq-slim .sq-res-head { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .sq-app *, .sq-app *::before, .sq-intro * { animation: none !important; transition: none !important; } }
.sq-qacts .aai-btn, .sq-slim .wb-actbar .aai-btn, .sq-qacts .ps-dl, .sq-slim .wb-actbar .ps-dl { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 15px; border-radius: 999px; font: 600 13px Roboto, sans-serif; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.sq-qacts .aai-btn, .sq-slim .wb-actbar .aai-btn { border: 1px solid #cfdcef; background: #fff; color: #1d4f8a; }
.sq-qacts .aai-btn:hover, .sq-slim .wb-actbar .aai-btn:hover { background: #f2f7fd; border-color: #2f7bc4; }
.sq-qacts .aai-btn svg, .sq-qacts .ps-dl svg { width: 15px; height: 15px; margin: 0; }
.sq-slim .sq-res-grid { align-items: start; }
.sq-slim .sq-side { align-self: start; }
.sq-slim .sq-side > .sq-card { flex: 0 0 auto; height: auto; }
/* ===== END SCIENTIFIC IMAGE STUDIO ===== */

/* ---------- touch screens: controls a finger can use, nothing that only appears under a mouse ---------- */
html.aai-touch button, html.aai-touch [role="button"], html.aai-touch a.aai-btn, html.aai-touch a.aai-icon-btn, html.aai-touch select, html.aai-touch textarea, html.aai-touch label.sts-tgl, html.aai-touch .aai-tb, html.aai-touch .sts-tb, html.aai-touch .aai-btn { min-height: 44px; }
html.aai-touch button, html.aai-touch a.aai-icon-btn, html.aai-touch .aai-icon-btn { min-width: 44px; }
html.aai-touch input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) { min-height: 44px; box-sizing: border-box; }
html.aai-touch input[type="color"] { min-width: 44px; }
html.aai-touch input[type="range"] { touch-action: none; }
html.aai-touch .sts-seg button, html.aai-touch .pn-qs button { display: inline-flex; align-items: center; justify-content: center; }
/* the small crosses keep their look; the place a finger can press is wider than what is drawn */
html.aai-touch .pn-x { min-width: 0; min-height: 0; width: 28px; height: 28px; }
html.aai-touch .pn-x::before { content: ''; position: absolute; inset: -9px; }
html.aai-touch .mp-table .pn-x { position: relative; }
/* what a mouse finds by hovering is simply there */
html.aai-touch .sts-grid .sts-rh button, html.aai-touch .sts-gh button, html.aai-touch .aai-cht-t button[data-sdel], html.aai-touch .aai-cht-t button[data-rdel], html.aai-touch .aai-gal-it .aai-gal-ib, html.aai-touch .aai-gal-f.is-mine .aai-gal-fx, html.aai-touch .aai-folder-row .aai-folder-more, html.aai-touch .ps-div::after { opacity: 1 !important; }
html.aai-touch .aai-gal-f.is-mine .aai-gal-fx { display: inline-block; }
html.aai-touch .aai-gal-it .aai-gal-ib { transform: none !important; }
/* handles and connection dots a finger can catch */
html.aai-touch .aai-viewport .aai-hit, .aai-hit { fill: transparent; stroke: none; }
.aai-shift-btn { display: none !important; }
html.aai-touch .aai-shift-btn { display: inline-flex !important; align-items: center; justify-content: center; font: 700 18px/1 system-ui, sans-serif; }
html.aai-touch .aai-shift-btn.is-on { background: #2f6db5 !important; color: #fff !important; }
/* dialogs are never taller than what is left above the on-screen keyboard */
html.aai-touch .pn-dlg, html.aai-touch .aai-modal-card { box-sizing: border-box; max-height: calc(var(--aai-vvh, 100dvh) - 24px); overflow: auto; -webkit-overflow-scrolling: touch; }
html.aai-touch .aai-side-graphs, html.aai-touch .aai-btn, html.aai-touch select, html.aai-touch .aai-dash-side button, html.aai-touch .aai-dash-side a { min-height: 44px !important; }
html.aai-touch .pn-it-c { padding-right: 44px; }
html.aai-touch .ps-col input { width: 44px; height: 44px; }
html.aai-touch .ps-col button { width: 44px; height: 44px; flex: none; }
html.aai-touch .ps-panel .ps-ph { padding-right: 56px; }
html.aai-touch .ps-close { min-width: 44px; min-height: 44px; width: 44px; height: 44px; top: 6px; right: 6px; }
html.aai-touch .ps-f { flex-wrap: wrap; }
/* a narrow window (a portrait iPad, Split View): the figure stays in sight above its settings, and the page never runs wider than the window */
@media (max-width: 980px) {
	.sts-graph, .sts-wrap.pn-edit, .sts-wrap.mp-design { grid-template-columns: minmax(0, 1fr); }
	.sts-graph > .sts-stage, .sts-wrap.pn-edit > .pn-stage, .sts-wrap.mp-design > .mp-stage { order: -1; position: sticky; top: 0; z-index: 6; max-height: 48vh; overflow: auto; background: #f4f7fc; box-shadow: 0 10px 16px -14px rgba(15, 42, 74, .45); }
	.sts-wrap.pn-edit > .pn-stage svg, .sts-wrap.mp-design > .mp-stage svg { max-height: 44vh; width: auto !important; max-width: 100%; display: block; margin: 0 auto; }
	.sts-graph .sts-plot svg { max-height: 44vh; width: auto; max-width: 100%; display: block; margin: 0 auto; }
	.ps-intro { grid-template-columns: minmax(0, 1fr); }
	.ps-intro > * { min-width: 0; }
	.ps-intro-pts, .sq-intro .ps-intro-pts, .sq-intro .ps-intro-pts.sq-intro-pts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mp-split { grid-template-columns: minmax(0, 1fr); }
	.aai-dash-hero, .aai-dash-main, .aai-dash { min-width: 0; }
	.aai-dash-hero .aai-panel-enter { max-width: 100%; }
	.sts-steps { max-width: 100%; overflow-x: auto; }
}
@media (max-width: 700px) { .ps-intro-pts, .sq-intro .ps-intro-pts, .sq-intro .ps-intro-pts.sq-intro-pts { grid-template-columns: minmax(0, 1fr); } }
html.aai-touch .fc-tabs { grid-template-columns: repeat(2, 1fr); }
html.aai-touch .fc-tabs button { min-width: 0; }
@media (max-width: 980px) { .sq-intro { flex-wrap: wrap; } .sq-intro-art { flex-basis: 100%; max-width: 100%; } .sq-intro .sq-intro-pts li { white-space: normal; } }
html.aai-touch .aai .aai-dash-side .aai-side-graphs { min-height: 44px !important; }
html.aai-touch select { -webkit-appearance: menulist-button; appearance: menulist-button; }
html.aai-touch .sts-gh { padding-right: 34px; }
html.aai-touch .sts-rh button, html.aai-touch .sts-gh button { width: 28px; height: 28px; min-width: 0; min-height: 0; }
html.aai-touch .sts-rh button::before, html.aai-touch .sts-gh button::before { content: ''; position: absolute; inset: -8px; }
/* selects: any browser honours a finger's height once the system's own drawing is off; the arrow is drawn back */
html.aai-touch select { -webkit-appearance: none !important; appearance: none !important; border: 1px solid #d6deec; border-radius: 8px; padding-right: 26px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235a6680' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 9px center !important; }
html.aai-touch .sq-gcol { width: 44px !important; min-width: 44px !important; }
html.aai-touch .fc-pick-foot a[data-all] { display: inline-block; padding: 14px 4px; }
html.aai-touch .ps-tb { height: 50px; }
html.aai-touch .ps-tb button { min-width: 40px; }
/* Split View and other narrow windows */
@media (max-width: 680px) {
	.fc-edit { grid-template-columns: minmax(0, 1fr); height: auto; }
	.fc-stage { order: -1; height: 62vh; min-height: 380px; }
	.fc-rail { max-height: 50vh; }
	.fc-alldlg { width: 100%; box-sizing: border-box; }
	.fc-alldlg .fc-search { width: 100%; box-sizing: border-box; }
	.fc-alldlg .fc-gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
	.ps-top { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.ps-top > * { flex: none; }
}
@media (max-width: 680px) {
	.sts-report { width: auto; max-width: calc(100vw - 44px); }
	.sts-paper { min-width: 0 !important; box-sizing: border-box; }
	.sts-hd-row, .sts-ph { flex-wrap: wrap; }
	.sts-paper { padding: 18px 14px !important; }
	.sts-paper table { display: block; max-width: 100%; overflow-x: auto; }
	.sts-paper svg { max-width: 100%; height: auto; }
	.sts-kv { grid-template-columns: minmax(0, 1fr) !important; }
	.sts-kv dd { margin-left: 0; }
}
/* the editor uses the whole height of the window on a tablet */
html.aai-touch .aai-editor { height: 100vh !important; height: 100dvh !important; max-height: none !important; }
/* in Split View the tools run in one line above the canvas, which keeps the whole width */
@media (max-width: 700px) {
	.aai-editor { min-height: 480px !important; }
	.aai-ed-body, .aai-ed-body[class] { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) !important; }
	.aai-tools, .aai-tools.is-big, .aai-editor .aai-ed-body .aai-tools.is-big { grid-column: 1 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center; gap: 2px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 6px 8px !important; border-right: 0 !important; border-bottom: 1px solid #dce6f2 !important; -webkit-overflow-scrolling: touch; }
	.aai-tools.is-big .aai-tb, .aai-tools .aai-tb { flex: none !important; width: 64px !important; min-height: 52px; }
	.aai-tools.is-big .aai-tb.is-upload, .aai-tools.is-big .aai-tb.is-icons, .aai-tools.is-big .aai-tb-graphs, .aai-tools.is-big .aai-tb-logokit { width: auto !important; flex: none !important; padding: 0 12px !important; white-space: nowrap; }
	.aai-tools .aai-tool-sep, .aai-tools.is-big .aai-tool-sep { flex: none; width: 1px !important; height: 40px; margin: 0 4px; }
	.aai-tools .aai-tool-h, .aai-tools.is-big .aai-tool-h { display: none !important; }
	.aai-ed-top { flex-wrap: wrap; height: auto !important; row-gap: 4px; padding: 6px 8px !important; }
	.aai-editor .aai-side { max-width: calc(100% - 16px); }
	.aai-stagewrap { min-height: 0; }
}
html.aai-touch .aai-stylebar.is-low { top: auto !important; bottom: 44px !important; }
@media (max-width: 700px) {
	.aai-stagewrap { height: auto !important; }
	/* what a tool opens comes up from the bottom of the window, whole */
	.aai-editor .aai-paintfly, .aai-editor .aai-tfly, .aai-editor .aai-tpick, .aai-editor .aai-lib, .aai-editor .aai-gal, .aai-editor .aai-qs, .aai-editor .aai-olp { position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important; bottom: 8px !important; width: auto !important; max-width: none !important; max-height: 62vh; overflow: auto; z-index: 60; }
	.aai-editor .aai-gal { height: min(70vh, 520px) !important; }
	.aai-editor .aai-demo { display: none !important; }
}
html.aai-touch .aai-cv-txt { flex: none; white-space: nowrap; min-width: max-content; }
html.aai-touch .ps-tb button { min-width: 44px; }
html.aai-touch .ps-col { gap: 10px; }
html.aai-touch .aai-gal-head { flex-wrap: wrap; row-gap: 6px; }
html.aai-touch .aai-gal-head > div { min-width: 0; flex: 1 1 40%; }
html.aai-touch .mp-table td:last-child, html.aai-touch .mp-table th:last-child { padding-right: 14px; padding-left: 8px; }
/* a long press on a canvas does not select or offer to save the picture */
html.aai-touch .aai-viewport, html.aai-touch .fc-canvas, html.aai-touch .dw-canvas, html.aai-touch .ps-stage, html.aai-touch .pn-canvas, html.aai-touch .sq-main canvas, html.aai-touch [data-mpmap] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
html.aai-touch .aai-viewport textarea, html.aai-touch .fc-canvas textarea, html.aai-touch .ps-stage textarea { -webkit-user-select: text; user-select: text; }
@media (max-width: 680px) {
	.sts-app, .sts-main { max-width: 100vw; box-sizing: border-box; }
	.sts-top { flex-wrap: wrap; row-gap: 6px; }
	.sts-top .sts-title { min-width: 0; flex: 1 1 120px; width: auto; }
	.sts-wrap { width: auto; min-width: 0; max-width: calc(100vw - 44px); }
	.sts-kinds, .sts-cols, .sts-dgrid, .sts-graph, .sts-q { grid-template-columns: minmax(0, 1fr) !important; }
	.sts-gridbox { max-width: 100%; }
}
@media (max-width: 680px) {
	.sts-q input, .sts-q select, .sts-q > * { max-width: 100%; min-width: 0; box-sizing: border-box; }
	.sts-foot { flex-wrap: wrap; }
	.sts-foot .aai-btn, .sts-hd-row .aai-btn { white-space: normal; height: auto; min-height: 44px; }
}
/* below three columns the chart keeps its height, whatever the panel under it holds: selecting a box never moves the chart */
@media (min-width: 681px) and (max-width: 1100px) {
	.fc-edit { height: auto; grid-template-rows: minmax(380px, 58vh) auto; }
	.fc-stage, .fc-rail { min-height: 0; }
}
html.aai-touch .ps-col { flex-wrap: wrap; }
html.aai-touch .mp-table .pn-x { width: 44px; height: 44px; }
html.aai-touch .pn-panel .pn-x { width: 36px; height: 36px; }
/* aFig Visual Studio mark: same square tile everywhere, logo colours, centred star (2026-11-05) */
.aai .aai-vs-ico, .aai-vs-ico { display: grid !important; place-items: center !important; flex: 0 0 32px !important; width: 32px !important; height: 32px !important; padding: 0 !important; border-radius: 10px !important; background: linear-gradient(135deg, #2f7bc4 0%, #6a4fe0 52%, #f26a1b 100%) !important; background-size: 180% 180% !important; box-shadow: 0 6px 14px -6px rgba(106, 79, 224, .75), inset 0 1px 0 rgba(255, 255, 255, .35) !important; animation: vsFlow 7s ease-in-out infinite; }
.aai .aai-vs-ico.is-lg, .aai-vs-ico.is-lg { flex-basis: 52px !important; width: 52px !important; height: 52px !important; border-radius: 15px !important; box-shadow: 0 12px 24px -10px rgba(106, 79, 224, .8), inset 0 1px 0 rgba(255, 255, 255, .35) !important; }
.aai .aai-vs-ico svg, .aai-vs-ico svg { display: block !important; width: 72% !important; height: 72% !important; margin: 0 !important; overflow: visible; }
.aai-vs-ico svg path { transform-box: fill-box; transform-origin: center; }
.aai-vs-ico .vs-s1 { animation: vsTw 3.2s ease-in-out infinite; }
.aai-vs-ico .vs-s2 { animation: vsTw 3.2s ease-in-out .9s infinite; }
.aai-vs-ico .vs-s3 { animation: vsTw 3.2s ease-in-out 1.7s infinite; }
@keyframes vsTw { 0%, 100% { transform: scale(1); } 50% { transform: scale(.86); } }
body .aai .aai-z-gen.aai-z-vs .aai-z-ic.aai-vs-ico.is-lg, body .aai .aai-z-vs .aai-vs-ico.is-lg, body .aai .aai-vs-btn .aai-vs-ico, body .aai .aai-vs-btn.is-on .aai-vs-ico { background: linear-gradient(135deg, #2f7bc4 0%, #6a4fe0 52%, #f26a1b 100%) !important; background-size: 150% 150% !important; }
@keyframes vsFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .aai-vs-ico, .aai-vs-ico svg path { animation: none !important; } }