/* aFig studio — "Studio Flow" design (v3). Palette and type match afig.si:
   royal #0a5bd3 → violet #2f7ae5 → purple #003399, deep indigo #00276e, orange #ff8a00 → flame #f26a1b,
   Roboto (headings) + Roboto (body, 400–700). */

/* =========================================================
   1. Tokens & base
   ========================================================= */
.aai {
	--a-royal: #0a5bd3; --a-violet: #2f7ae5; --a-purple: #003399; --a-indigo: #002f87; --a-deep: #00276e;
	--a-orange: #ff8a00; --a-flame: #f26a1b; --a-gold: #ff8a00; --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, #0a5bd3, #2f7ae5 65%, #003399);
	--a-grad-deep: radial-gradient(circle at 90% 0, rgba(255, 196, 80, .22), transparent 45%), linear-gradient(170deg, #00276e, #0b4fc2);
	--a-warm: linear-gradient(110deg, #ff8a00, #f26a1b);
	--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(0, 39, 110, .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(255, 138, 0, .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(242, 106, 27, .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(242, 106, 27, .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(10, 91, 211, .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(242, 106, 27, .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(10, 91, 211, .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, #f26a1b) !important; }
.aai-gi-scientific-illustration { background: linear-gradient(135deg, #5a8cff, #0a5bd3) !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, #2f7ae5) !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(0, 39, 110, .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(255, 138, 0, .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(255, 138, 0, .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(10, 91, 211, .12), transparent 70%), radial-gradient(520px 240px at 100% 10%, rgba(255, 138, 0, .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(0, 39, 110, .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(10, 91, 211, .25), 0 26px 46px -24px rgba(0, 39, 110, .6); }
.aai-hero-gen:hover::after { box-shadow: inset 0 0 0 2px rgba(10, 91, 211, .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(10, 91, 211, .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(10, 91, 211, .07), rgba(255, 138, 0, .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(0, 39, 110, .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(10, 91, 211, .35), 0 14px 26px -18px rgba(10, 91, 211, .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(0, 39, 110, .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(10, 91, 211, .3), 0 24px 40px -24px rgba(0, 39, 110, .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(255, 138, 0, .5), 0 24px 40px -18px rgba(0, 39, 110, .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: #002f87; }
.aai-menu button.is-on { color: #002f87; }
.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 #0a5bd3; }
.aai-notice.is-warning { background: #fff6ef; box-shadow: inset 3px 0 0 #ff8a00; }
.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 { color: var(--a-gold); }
.aai-plan-card .aai-eyebrow::before { background: var(--a-gold); }
.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(242, 106, 27, .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(0, 39, 110, .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: #0a5bd3; stroke-dasharray: 3 2; pointer-events: none; }
.aai-handle { fill: #fff; stroke: #0a5bd3; cursor: pointer; }
.aai-guide { stroke: #ff3d8b; pointer-events: none; }
.aai-marquee { fill: rgba(10, 91, 211, .08); stroke: #0a5bd3; pointer-events: none; }
.aai-flag { fill: none; stroke: #ff8a00; pointer-events: none; }
.aai-region { fill: rgba(200, 53, 43, .12); stroke: #c8352b; pointer-events: none; }
.aai-fixsel { fill: rgba(255, 138, 0, .14); stroke: #f26a1b; 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(10, 91, 211, .7); outline-offset: 3px; caret-color: #0a5bd3; }
.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(0, 39, 110, .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(0, 39, 110, .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(10, 91, 211, .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(242, 106, 27, .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(255, 138, 0, .55); } 100% { box-shadow: 0 0 0 16px rgba(255, 138, 0, 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, #f26a1b, #ff8a00); 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(0, 39, 110, .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: #003399; 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: #2f7ae5; 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, #f26a1b, #ff8a00); box-shadow: 0 10px 22px -10px rgba(242, 106, 27, .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(242, 106, 27, .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(10, 91, 211, .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(0, 39, 110, .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, #ff8a00, #f26a1b); 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: #ff8a00; color: #fff; }
.aai-file-more:hover, .aai-file-more:focus-visible { background: #fff1e3; color: #f26a1b; }

/* 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 #f26a1b; }
.aai-folder-row.is-drop-after { box-shadow: inset 0 -2px 0 #f26a1b; }

/* Clear orange: solid accent buttons with a defined shadow */
.aai { --a-orange: #ff7a00; --a-flame: #e8590c; --a-warm: linear-gradient(180deg, #f76707, #ec5f06); }
.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: #e8590c; }
.aai-rv-result .aai-pbtns [data-apply-ops] { background: #f76707; }

/* 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(10, 91, 211, .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: #f76707; 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: #0a5bd3; 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: #ff7a00; 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: #f76707; color: #fff !important; box-shadow: 0 10px 22px -10px rgba(170, 60, 0, .55); }
.aai-dlg .aai-btn-primary:hover { background: #e8590c; }
.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: #e8590c; text-decoration-thickness: 2px; }
.aai-was em { padding: 3px 9px; border-radius: 999px; background: #e8590c; 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(10, 91, 211, .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: #0b2350; 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: #0b2350; }
.aai-side-nav button em { color: #45577a; }
.aai-side-nav button:hover { color: #003399; background: rgba(0, 51, 153, .08); }
.aai-side-nav button.is-on { color: #003399; background: #fff; box-shadow: inset 3px 0 0 #f76707, 0 2px 10px -5px rgba(0, 39, 110, .3); }
.aai-side-nav button.is-on em { color: #c2410c; }
.aai-folder-more { color: #3a4e74; }
.aai-folder-more:hover { color: #003399; 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: #003399; border-color: #0a5bd3; 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: #003399; 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 #0a5bd3; 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: #e8590c; --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: #002f87; box-shadow: inset 3px 0 0 #ff9a3c, 0 6px 14px -8px rgba(0, 39, 110, .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: #002f87; color: #fff; border-color: #002f87; }

/* One orange everywhere: light orange #f5761a; text on orange is navy for readability */
.aai { --a-orange: #f5761a; --a-flame: #f26a1b; --a-warm: linear-gradient(110deg, #f26a1b, #ff8a00); }
.aai-btn-primary, .aai-btn-accent, .aai-dlg .aai-btn-primary { background: linear-gradient(110deg, #f26a1b, #ff8a00); 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, #ff7a00); }
.aai-btn-ghost { box-shadow: inset 0 0 0 1.5px #f5761a; }
.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: #f5761a; color: #fff; }
.aai-flow li.is-on b, .aai-ed-top .aai-flow.is-compact li.is-on b { background: #f5761a; color: #fff; }
.aai-tools button[data-tool="fixtext"].is-on { background: #f5761a; color: #fff; }
.aai-side-nav button.is-on { box-shadow: inset 3px 0 0 #f5761a, 0 6px 14px -8px rgba(0, 39, 110, .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, #0a5bd3, #2f7ae5 65%, #003399); box-shadow: 0 16px 34px -20px rgba(10, 91, 211, .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 #ff8a00; }


/* 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, #0a5bd3, #2f7ae5 65%, #003399); color: #fff; box-shadow: inset 3px 0 0 #ff8a00, 0 10px 22px -12px rgba(10, 91, 211, .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: #ff8a00; }


/* 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, #0a5bd3, #2f7ae5 65%, #003399); }
.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, #0a5bd3, #2f7ae5 65%, #003399); color: #fff; border-color: transparent; box-shadow: 0 8px 18px -10px rgba(10, 91, 211, .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: #f5761a; color: #fff; }
.aai-menu button.is-on { color: #0a5bd3; }


/* 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: #0a5bd3; 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(0, 39, 110, .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: #0b2350; 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: #0b2350; 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(0, 39, 110, .4); color: #0b2350; 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: #002f87; color: #fff; font: 600 14px/1.2 var(--a-body, inherit); transform: translateX(-50%); box-shadow: 0 8px 20px -10px rgba(0, 39, 110, .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: #0b2350; font: 600 13px/1 var(--a-body, inherit); box-shadow: 0 4px 14px -8px rgba(0, 39, 110, .5); cursor: pointer; }
.aai-reveal-skip:hover { background: #f5761a; }

/* 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(0, 39, 110, .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: #0b2350; 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(0, 39, 110, .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(245, 118, 26, 0), rgba(245, 118, 26, .14) 70%, rgba(255, 150, 60, .9) 96%, rgba(245, 118, 26, 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(0, 39, 110, .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: #0b2350; 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(0, 39, 110, .5); color: #0b2350; 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: #f5761a; 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(245, 118, 26, .6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(245, 118, 26, 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(10, 79, 191, .14), 0 12px 26px -20px rgba(0, 39, 110, .55); animation: aaiPanelIn .6s ease both; animation-delay: calc(var(--p) * .18s); }
.aai-dp-panel h4 { margin: 0 0 8px; overflow: hidden; color: #0b2350; 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, #0a4fbf, #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, #f5761a, #f6612a); 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: #0b2350; 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: #f5761a; 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: #f5761a; }
@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(245, 118, 26, .1); box-shadow: 0 0 0 2px rgba(245, 118, 26, .95), 0 0 18px rgba(245, 118, 26, .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: #0b2350; 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(245, 118, 26, 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(245, 118, 26, .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%, #f5761a 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, #f5761a, #7c3aed, #3b82f6, #2ba59b, #f5761a); 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, #0a4fbf, #7c3aed 50%, #f6612a); -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(245, 118, 26, .85)); } 100% { transform: scale(1); } }
.aai-sc-spark b { position: absolute; width: 12px; height: 12px; background: radial-gradient(circle, #fff 0, #ffd27a 45%, #f5761a 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(10, 79, 191, .18); color: #0b2350; 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: #0b2350; 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: #f5761a; 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: #0b2350; 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(0, 39, 110, .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: #0a4fbf; background: #5b8fd9; }
.aai-tpick p { margin: 8px 0 0; color: #0b2350; 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: #0b2350; 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: #0a4fbf; }
.aai-tools.is-big .aai-tb.is-on { background: var(--a-indigo, #0b2350); color: #fff; }
.aai-tools.is-big .aai-tb.is-upload { margin-bottom: 2px; background: #f5761a; 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: #0b2350; }
.aai-tools.is-big .aai-tb[data-tool="fixtext"] { color: var(--a-flame, #f6612a); }
.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(0, 39, 110, .45); animation: aaiPopIn2 .18s ease; }
.aai-tfly b { display: block; margin: 0 2px 8px; color: #0b2350; 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: #0b2350; font: 600 10.5px/1.1 var(--a-body, sans-serif); cursor: pointer; }
.aai-tfly button:hover { background: #f5761a; }
.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(0, 39, 110, .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: #0b2350; 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, #0b2350); 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: #0b2350; 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: #0b2350; 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: #0a4fbf; background: #eef3ff; box-shadow: 0 0 0 3px rgba(10, 79, 191, .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 #f5761a, 0 0 24px rgba(245, 118, 26, .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: #0b2350; 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: #f5761a; 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: #0a5bd3; 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: #ff8a00; }
.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: #0b2350; font: 700 13px/1 var(--a-body); box-shadow: 0 6px 18px -8px rgba(11, 35, 80, .35), inset 0 0 0 1px rgba(10, 91, 211, .14); cursor: pointer; transition: box-shadow .2s, color .2s; }
.aai-cv-btn:hover, .is-canvas .aai-cv-btn { color: #0a5bd3; box-shadow: 0 6px 18px -8px rgba(11, 35, 80, .35), inset 0 0 0 2px #0a5bd3; }
.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(10, 91, 211, .12); font: 600 13px/1 var(--a-body); color: #0b2350; 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: #0b2350; 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: #0b2350; 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: #0a5bd3; background: #eef4ff; }
.aai-cv-ic:hover, .aai-cv-lock:hover { background: #eef4ff; color: #0a5bd3; }
.aai-cv-txt { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: #0b2350; 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: #0a5bd3; 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: #2f7ae5; pointer-events: none; }
.aai-cv-handle { fill: #fff; stroke: #2f7ae5; }
.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: #0b2350; 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: #0a5bd3; }
.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, #0a5bd3, #2f7ae5); color: #fff; font: 700 13.5px var(--a-body); cursor: pointer; box-shadow: 0 8px 20px -10px rgba(10, 91, 211, .7); transition: transform .2s, box-shadow .2s; }
.aai-blank-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(10, 91, 211, .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 #0a5bd3; transform: translateY(-2px); }
.aai-blank-grid i { display: block; margin-bottom: 8px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1.5px #0a5bd3, 0 6px 12px -6px rgba(10, 91, 211, .5); }
.aai-blank-grid b { color: #0b2350; font-size: 13.5px; }
.aai-blank-grid span { color: #0a5bd3; 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: #0b2350; }
.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, #0a5bd3, #2f7ae5); color: #fff; font-size: 13px; box-shadow: 0 6px 14px -6px rgba(10, 91, 211, .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: #0b2350; 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: #0b2350; }
.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 #0a5bd3, 0 14px 30px -18px rgba(10, 91, 211, .6); transform: translateY(-2px); }
.aai-ch-art { display: block; border-radius: 11px; overflow: hidden; background: #fff; }
.aai-ch-txt b { display: block; color: #0b2350; 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: #0a5bd3; }
@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(10, 91, 211, .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: #f5761a; 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: #0a5bd3; }
.aai-lib-cats button.is-on svg { color: #0a5bd3; }
.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: #0a5bd3; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.aai-poly-pt { fill: #fff; stroke: #0a5bd3; stroke-width: .8; pointer-events: none; }
.aai-poly-pt.is-first { fill: #f5761a; }

/* ===== 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(10, 91, 211, .12); font: 600 12.5px/1 var(--a-body); color: #0b2350; 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: #0b2350; 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: #0b2350; 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: #0b2350; 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: #0a5bd3; }
.aai-sb-btn.is-on { background: #e2ecff; color: #0a5bd3; }
.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: #0a5bd3; }
.aai-sb-range input { width: 96px; accent-color: #0a5bd3; }
.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: #0b2350; font: 700 13px var(--a-body); cursor: pointer; }
.aai-x-bgs button.is-on { box-shadow: inset 0 0 0 2px #0a5bd3; background: #eef4ff; color: #0a5bd3; }
.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: #0b2350; }
.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: #f5761a; color: #fff !important; }
.aai-rp-clear { margin-left: 4px; height: 26px; padding: 0 10px; border: 0; border-radius: 99px; background: #eef4ff; color: #0a5bd3; font: 700 11.5px var(--a-body); cursor: pointer; }
.aai-rp-draft { fill: rgba(245, 118, 26, .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(10, 91, 211, .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: #f5761a; box-shadow: 0 0 0 0 rgba(245, 118, 26, .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(245, 118, 26, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(245, 118, 26, 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: #f5761a !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(10, 91, 211, .12); font: 600 13px/1.3 var(--a-body); color: #0b2350; 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: #0a5bd3; font: 700 13.5px var(--a-body); cursor: pointer; }
.aai-sp-sugs button:hover { background: #0a5bd3; 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: #0b2350; }

/* ===== 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: #0a5bd3; 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: #0b2350; 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: #0a5bd3; 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(0, 39, 110, .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(245, 118, 26, .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: #0b2350; 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, #0a5bd3); box-shadow: 0 0 0 4px rgba(10, 91, 211, .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, #0a5bd3, #2f7ae5); }
.aai-sw.is-auto i:nth-child(2) { background: #9cc0f5; } .aai-sw.is-auto i:nth-child(3) { background: #f5761a; } .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(10, 91, 211, .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: #0b2350; 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(10, 91, 211, .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(10, 91, 211, .1); overflow: hidden; font: 600 13px var(--a-body); color: #0b2350; 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 #f5761a; }
.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, #f5761a, #ff8a1f); color: #3a1d00; box-shadow: 0 8px 18px -10px rgba(255, 138, 31, .9); }
.aai-gal-nf { background: #eef4ff; color: #0a5bd3; }
.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: #0b2350; 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, #0a5bd3, #2f7ae5); color: #fff; box-shadow: 0 8px 18px -12px rgba(10, 91, 211, .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(10, 91, 211, .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(10, 91, 211, .35); outline-offset: -3px; }
.aai-gal-f.is-drop { background: #fff3e6 !important; color: #0b2350 !important; box-shadow: inset 0 0 0 2px #f5761a !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 #2f7ae5, 0 12px 22px -14px rgba(10, 91, 211, .7); }
.aai-gal-it.is-new { box-shadow: inset 0 0 0 2px #f5761a; }
.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: #0b2350; 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: #0b2350; 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: #0a5bd3; 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(10, 91, 211, .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: #0a5bd3; 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(10, 91, 211, .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: #0b2350; 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: #0a5bd3; } .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: #0a5bd3; }
@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(245, 118, 26, .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(245, 118, 26, .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, #0a5bd3, #7c3aed 45%, #ff4f86 70%, #f5761a) 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%, #2f7ae5) 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(245, 118, 26, .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(245, 118, 26, .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%, #f5761a 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: #0b2350; 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: #0b2350; 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: #f26a1b; }
.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(242, 106, 27, .0); } 50% { box-shadow: 0 0 0 2px currentColor inset, 0 0 0 5px rgba(242, 106, 27, .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(10, 91, 211, .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, #0a5bd3, #7c3aed 55%, #f6612a); -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, #0a5bd3, #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: #0b2350; 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(10, 91, 211, .35); }
.aai-paintfly button > svg { flex: none; width: 22px; height: 22px; padding: 6px; border-radius: 10px; background: #f1f4fb; color: #0a5bd3; 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: #0b2350; }
.aai-pb-tool.is-on { background: #0a5bd3; 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 #0a5bd3; }
.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: #0b2350; 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(245, 118, 26, .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: #f5761a; 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, #0a5bd3, #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: #ff8a00; 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(245, 118, 26, .2); color: #ffd8ad; }
.aai-ed-status.is-offline::before { background: #f5761a; }
@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: #0b2350; 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: #0b2350; 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: #ff8a00; 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: #0a5bd3; 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: #f5761a; border-color: #f5761a; 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: #0b2350; } .aai-crop-brand svg { width: 18px; height: 18px; color: #0a5bd3; } .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: #0a5bd3; color: #fff; }
.aai-crop-grid { stroke: rgba(255, 255, 255, .75); fill: none; pointer-events: none; }
.aai-crop-size rect { fill: #0b2350; } .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, #0a5bd3, #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, #0a5bd3) !important; }

/* Dragging a figure onto a folder (light sidebar) */
.aai-dragging .aai-side-nav [data-folder]:not([data-folder="all"]) { outline: 2px dashed rgba(10, 91, 211, .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: #0b2350 !important; outline: 2px solid #f5761a !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: #0b2350; 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(10, 91, 211, .15); font: 700 13px var(--a-body); color: #0b2350; }
.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(10, 91, 211, .25); } 50% { outline-color: rgba(10, 91, 211, .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: #2f7ae5; 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: #0a5bd3; 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 #0a5bd3; border-radius: 8px; background: #fff; color: #0b2350; font: 600 14px var(--a-body, Roboto, sans-serif); outline: none; box-shadow: 0 0 0 3px rgba(10, 91, 211, .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: #f5761a; 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: #f5761a; background-image: linear-gradient(110deg, #f26a1b, #ff8a00); 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(10, 91, 211, .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(10, 91, 211, .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(10, 91, 211, .07) !important; box-shadow: inset 0 0 0 1px rgba(10, 91, 211, .14), 0 8px 18px -14px rgba(10, 60, 160, .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, #0a3d9e 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, #e8590c, #f26a1b 50%, #ff8a00) !important; box-shadow: 0 12px 22px -12px rgba(242, 106, 27, .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, #f26a1b, #ff8a00) !important; color: #fff !important; box-shadow: 0 12px 24px -12px rgba(242, 106, 27, .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(10, 91, 211, .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(10, 91, 211, .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: #0b2350 !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(242, 106, 27, .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, #0a4fbf, #2f7ae5); }
.aai-share-ic i { position: absolute; left: 10px; top: 14px; width: 12px; height: 15px; border-radius: 3px; background: linear-gradient(135deg, #f26a1b, #ff8a00); 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, #0a4fbf, #2f7ae5)); 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, #f26a1b, #ff8a00); box-shadow: 0 4px 14px rgba(242, 106, 27, .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: #0a4fbf; 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: #f26a1b; }
.aai-share-av { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #0a4fbf, #2f7ae5); 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 #f26a1b; 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: #0a4fbf; }
.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(255, 138, 0, .30), transparent 64%),
		radial-gradient(46vw 46vw at 72% 96%, rgba(10, 79, 191, .32), transparent 62%),
		radial-gradient(30vw 30vw at 18% 92%, rgba(242, 106, 27, .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(0, 39, 110, .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(0, 39, 110, .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(255, 138, 0, .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(10, 79, 191, .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(0, 39, 110, .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: #e8590c !important; box-shadow: inset 0 0 0 2px #f5761a, 0 8px 18px -10px rgba(255, 140, 40, .6) !important; }
.is-xopen .aai-ed-export svg { color: #e8590c; }
.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, #0a3d9e, #1f63d6 70%, #0a4fbf) !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: #0a3d9e; 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(0, 39, 110, .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(0, 39, 110, .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: #f5761a; 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: #0a4fbf; }
.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(0, 39, 110, .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, #f26a1b, #ff8a00) !important; color: #fff !important; text-align: left; box-shadow: 0 16px 30px -14px rgba(242, 106, 27, .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(242, 106, 27, .95), inset 0 1px 0 rgba(255, 255, 255, .4); }
@keyframes aaiMinBreath { 50% { box-shadow: 0 16px 30px -14px rgba(242, 106, 27, .85), 0 0 0 7px rgba(255, 138, 0, .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, #0a4fbf, #2f7ae5); color: #fff; cursor: move; box-shadow: 0 4px 10px -4px rgba(0, 39, 110, .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: #f26a1b !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 #2f7ae5, 0 10px 22px -12px rgba(10, 79, 191, .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(0, 39, 110, .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(10, 91, 211, .22), transparent 70%), radial-gradient(50% 50% at 76% 70%, rgba(242, 106, 27, .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(0, 39, 110, .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: #0b2350 !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: #f26a1b !important; box-shadow: 0 0 0 3px rgba(242, 106, 27, .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: #f26a1b !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: #0a5bd3; 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 #f26a1b; }
.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: #0b2350; }
.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 #f26a1b; }
.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: #f26a1b; }
.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: #0b2350 !important; box-shadow: inset 0 0 0 1.5px #f8c9a6, 0 6px 14px -10px rgba(242, 106, 27, .6) !important; }
.aai-tools.is-big .aai-tb.is-icons:hover { box-shadow: inset 0 0 0 2px #f26a1b, 0 10px 20px -12px rgba(242, 106, 27, .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 #f26a1b; }
.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: #0b2350; }
.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(242, 106, 27, .55); }
.aai-gal-f.is-on .aai-cat-ic { box-shadow: 0 0 0 1.5px #f26a1b; }
@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: #0b2350; }
.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, #ff8a00, #f26a1b); }
.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(10, 91, 211, .1); stroke: #0a5bd3; }
.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(10, 91, 211, .08); stroke: #0a5bd3; }
@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: #0a5bd3; --a-violet: #2f7ae5; --a-purple: #003399; --a-indigo: #002f87; --a-deep: #00276e;
	--a-orange: #ff8a00; --a-flame: #f26a1b; --a-gold: #ff8a00; --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, #0a5bd3, #2f7ae5 65%, #003399);
	--a-warm: linear-gradient(110deg, #ff8a00, #f26a1b);
	--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(10, 91, 211, .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, #0a5bd3, #2f7ae5 55%, #ff8a00); }
.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(0, 39, 110, .55) !important; }
.aai-ch-item:hover { box-shadow: inset 0 0 0 2px var(--a-royal), 0 18px 34px -20px rgba(10, 91, 211, .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, #0a3d9e, #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(10, 91, 211, .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: #00276e; }
.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: #ff8a00; }
.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 #0a5bd3; }
.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: #0a5bd3; }
.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: #0a5bd3; }
.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, #0a5bd3, #ff8a00) 1; }
.aai-brand-foot b { font: 800 12px/1.2 Roboto, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #0a5bd3; }
.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(10, 91, 211, .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: #00276e; }
.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 #0a5bd3, 0 14px 26px -18px rgba(10, 91, 211, .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: #0a5bd3; 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: #00276e; }
.aai-cht-t input:focus { background: #eef4ff; box-shadow: inset 0 0 0 2px #0a5bd3; }
.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: #0a5bd3; 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: #0a5bd3; 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 #0a5bd3; color: #0a5bd3; 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 #0a5bd3; }
.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: #0a5bd3; 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 #0a5bd3; }
.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, #ff8a00, #f26a1b); box-shadow: 0 14px 30px -12px rgba(242, 106, 27, .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: #0a5bd3; }
.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(10, 91, 211, .6); }
.aai-gal-it.is-chart:hover::after { box-shadow: inset 0 0 0 2px #0a5bd3; }
.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, #0a5bd3 0%, #2f7ae5 55%, #f26a1b 140%); box-shadow: 0 12px 22px -14px rgba(10, 91, 211, .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(242, 106, 27, .9), inset 0 0 0 1px rgba(255, 255, 255, .3); background: linear-gradient(160deg, #0a5bd3 0%, #2f7ae5 45%, #f26a1b 115%); }
.aai-tools.is-big .aai-tb.aai-tb-graphs.is-on { box-shadow: 0 0 0 2.5px #ff8a00, 0 12px 22px -14px rgba(10, 91, 211, .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(255, 138, 0, .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, #ff8a00, #f26a1b); 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(255, 138, 0, .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: #0a5bd3; } .aai-side-graphs.is-on .aai-sg-ico i:nth-child(3) { background: #f26a1b; }

/* 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, #0a5bd3, #ff8a00); }
.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 #0a5bd3; }
.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: #0a5bd3; 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: #0a5bd3; 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, #ff8a00, #f26a1b) !important; box-shadow: 0 14px 28px -14px rgba(242, 106, 27, .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 #0a5bd3; color: #0a5bd3; }
.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: #0a5bd3; 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: #0a5bd3; }
.aai-cht-range b { min-width: 38px; color: #0a5bd3; text-align: right; }
.aai-cht-mini-btn { height: 32px; padding: 0 10px; border: 0; border-radius: 9px; background: #f1f5fd; color: #0a5bd3; 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 #0a5bd3; }
.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: #0a5bd3; 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, #0a5bd3 0%, #2f7ae5 55%, #f26a1b 140%) !important; }
.aai-tools.is-big .aai-tb.aai-tb-graphs:hover { background: linear-gradient(160deg, #0a5bd3 0%, #2f7ae5 45%, #f26a1b 115%) !important; box-shadow: 0 16px 26px -14px rgba(242, 106, 27, .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, #0a5bd3, #2f7ae5) !important; box-shadow: 0 10px 20px -14px rgba(10, 91, 211, .9) !important; }
.aai-tools.is-big .aai-tb.aai-tb-graphs:hover { background: linear-gradient(160deg, #0a4fbf, #2a72dd) !important; box-shadow: 0 12px 22px -14px rgba(10, 91, 211, 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: #0b2350; 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 #0a5bd3; }
@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(10, 91, 211, .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: #0a5bd3; }
.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: #0a5bd3 !important; }
.aai-side-graphs:not(.is-on) .aai-sg-ico i:nth-child(3) { background: #f26a1b !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 #f26a1b; 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: #0a5bd3 !important; box-shadow: inset 0 0 0 2px #0a5bd3, 0 8px 18px -12px rgba(10, 91, 211, .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: #0a5bd3; 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, #0a5bd3, #2f7ae5 55%, #ff8a00); 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, #2f7ae5, #ff8a00); 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, #f26a1b, #ff8a00) !important; box-shadow: 0 10px 20px -14px rgba(242, 106, 27, .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 #0a5bd3; }
.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 #0a5bd3; 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: #0a5bd3; 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: #0b2350; } .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: #0a5bd3; } .aai-lk-lay u { height: 3px; border-radius: 2px; background: #f26a1b; }
.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 #0a5bd3; }
.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: #0a5bd3; box-shadow: inset 0 0 0 2px #0a5bd3; }
.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(10, 91, 211, .18); transition: background .15s, height .15s; }
	.aai-rail-grip:hover::after, .aai-rail-grip.is-drag::after { background: #0a5bd3; 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(10, 91, 211, .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(10, 91, 211, .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 #0a5bd3; 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 #0a5bd3; }
.aai-lk-sizes i.is-fit { box-shadow: inset 0 0 0 2px #f26a1b; 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(10, 91, 211, .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: #0a5bd3; }
.aai-objbar button.is-del:hover { background: #fff1f0; color: #d93025; }
.aai-objbar button.has-l { background: #eef4ff; color: #0a5bd3; }
.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: #0a5bd3; }
.aai-objbar.is-moving { box-shadow: 0 22px 40px -14px rgba(11, 35, 80, .55), 0 0 0 1.5px #2f7ae5; }
.aai-objbar.is-moving .aai-ob-grip { cursor: grabbing; color: #0a5bd3; }
@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: #0a5bd3; color: #fff; font: 800 10.5px/1 Roboto, sans-serif; }
.aai-ob-order button:hover b { background: #f26a1b; }

/* ===== 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, #f26a1b, #ffd2a8, #ff8a00, #ffe3c7, #f26a1b) 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(242, 106, 27, .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, #f26a1b, #ffd2a8, #ff8a00, #ffe3c7, #f26a1b) 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: #f26a1b; }
.aai-editor .aai-ed-body .aai-tools.is-big .aai-tb.aai-tb-logokit .aai-lg-ico { background: linear-gradient(135deg, #0a5bd3, #2f7ae5 55%, #ff8a00) !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, #0a5bd3, #9ec5ff, #2f7ae5, #d6e6ff, #0a5bd3) border-box !important;
	background-size: 100% 100%, 300% 100% !important; animation: aaiRailLine 5s linear infinite !important;
	color: #0a4fbf !important; box-shadow: 0 6px 16px -12px rgba(10, 91, 211, .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, #0a5bd3, #9ec5ff, #2f7ae5, #d6e6ff, #0a5bd3) 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: #0a5bd3 !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: #ff8a00 !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, #0b2350); 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: #2f7ae5; }
.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: #2f7ae5; --k2: #0a5bd3; }
.aai-opening.is-graph .aai-op-kind i { border-radius: 3px; }
.aai-opening.is-logo .aai-op-kind { --k: #ff8a00; --k2: #f26a1b; }
@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(10, 91, 211, 0), rgba(10, 91, 211, .28), rgba(47, 122, 229, .22), rgba(18, 181, 255, .22), rgba(10, 91, 211, 0)); }
.aai-opening.is-logo .aai-op-halo { background: conic-gradient(from 0deg, rgba(242, 106, 27, 0), rgba(242, 106, 27, .26), rgba(255, 138, 0, .24), rgba(255, 183, 3, .2), rgba(242, 106, 27, 0)); }
.aai-opening.is-graph .aai-op-bar b { background: linear-gradient(90deg, #2f7ae5, #0a5bd3); }
.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, #0a3d9e, #2f7ae5); 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, #f26a1b, #ff8a00); color: #fff; box-shadow: 0 6px 14px -8px rgba(242, 106, 27, .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, #0a3d9e, #2f7ae5); 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: #f26a1b; box-shadow: 0 0 0 2px rgba(242, 106, 27, .35); }
.aai-enh-cmp { height: 32px; margin-left: 4px; padding: 0 14px; border: 1px dashed #f26a1b; 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: #f26a1b; 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(242, 106, 27, .12); stroke: #f26a1b; }
[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: #ff8a00; stroke-width: 2; filter: drop-shadow(0 0 10px rgba(255, 138, 0, .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: #0b2350; }
.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: #0b2350; }
.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 #0a5bd3; }
.aai-pic-any i { background: conic-gradient(#e2615f, #f5c242, #3fae72, #2bb0aa, #0a5bd3, #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(242, 106, 27, .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: #0b2350; }
.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: #f26a1b; 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: #0b2350; }
.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: #0b2350; 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: #0a5bd3; 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, #f26a1b, #ff8a00); color: #fff !important; font: 700 13px var(--a-body, Roboto, sans-serif); box-shadow: 0 8px 18px -8px rgba(242, 106, 27, .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, #f26a1b, #ff8a00 45%, #0a5bd3 80%, #0a5bd3) 0 0 / 220% 100%; box-shadow: 0 10px 22px -12px rgba(242, 106, 27, .9); }
.aai-enh-all .aai-enh-ic { color: #fff; filter: none; animation: none; }
.aai-pf-badge.is-fix { background: linear-gradient(140deg, #f26a1b, #ff8a00) !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: #0b2350; font: inherit; }
.aai-restmenu button:hover:not(:disabled) { background: #fff3e8; }
.aai-restmenu button:hover:not(:disabled) svg { color: #f26a1b; }
.aai-restmenu button:disabled { cursor: default; opacity: .5; }
.aai-restmenu svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: #0a4fbf; }
.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(255, 138, 0, .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, #2f7ae5, #7c3aed, #ff8a00); 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: #ff8a00; stroke-width: 5px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(255, 138, 0, .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: #ff8a00; opacity: 0; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 6px rgba(255, 138, 0, .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, #0a5bd3, #7c3aed 45%, #f26a1b 80%, #ff8a00) 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(255, 138, 0, .26), inset 0 0 0 2px rgba(255, 138, 0, .55); } }
@keyframes aaiMxSpin { to { transform: rotate(360deg); } }
@keyframes aaiMxDraw { to { stroke-dashoffset: 0; } }
@keyframes aaiMxHue { 0% { stroke: #2f7ae5; } 33% { stroke: #7c3aed; } 66% { stroke: #ff8a00; } 100% { stroke: #2f7ae5; } }
@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, #0a5bd3, #7c3aed 55%, #ff8a00); 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: #0b2350; 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, #0b2350, #0a3f9a 60%, #0a5bd3); 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, #2f7ae5, #7c3aed 55%, #ff8a00); }
.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, #f26a1b, #ff8a00); box-shadow: 0 12px 24px -12px rgba(242, 106, 27, .95); transition: transform .18s, box-shadow .18s; }
.ps-dl:hover { transform: translateY(-1px); box-shadow: 0 16px 28px -12px rgba(242, 106, 27, 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: #0a5bd3; }
.ps-rail button.is-on { background: linear-gradient(135deg, #0a5bd3, #2f7ae5); color: #fff; box-shadow: 0 10px 18px -12px rgba(10, 91, 211, .9); }
.ps-rail button[data-pstab="print"] { margin-top: auto; color: #f26a1b; }
.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: #0b2350; }
.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: #ff8a00; color: #f26a1b; transform: translateY(-1px); box-shadow: 0 10px 20px -16px rgba(242, 106, 27, .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: #0b2350; }
.ps-f input[type="range"] { flex: 1; accent-color: #f26a1b; }
.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: #0b2350; cursor: pointer; }
.ps-num input { width: 52px; height: 32px; border: 0; text-align: center; font: 700 13px Roboto, sans-serif; color: #0b2350; -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: #0a5bd3; 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, #0a5bd3, #2f7ae5); box-shadow: 0 10px 20px -14px rgba(10, 91, 211, .9); }
.ps-big.is-alt { background: #fff; color: #0a5bd3; 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: #0a5bd3; 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: #0b2350; 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: #0b2350; cursor: pointer; }
.ps-symbols button:hover { background: #fff3e8; color: #f26a1b; }
.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: #f26a1b; box-shadow: 0 6px 14px -10px rgba(242, 106, 27, .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: #0a5bd3; border-color: #0a5bd3; 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: #0b2350; 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(10, 91, 211, .55); }
.ps-hit.is-section.is-on, .ps-hit.is-block.is-on, .ps-hit.is-on { box-shadow: 0 0 0 2.5px #f26a1b, 0 0 0 6px rgba(242, 106, 27, .18); }
.ps-hit.is-stitle { cursor: grab; }
.ps-tag { position: absolute; left: 0; top: -20px; display: none; padding: 2px 7px; border-radius: 6px; background: #0a5bd3; 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: #0b2350; 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(10, 91, 211, 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(10, 91, 211, .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 #f26a1b; border-radius: 6px; background: rgba(255, 255, 255, .96); color: #0b2350; 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: #0a5bd3; color: #fff; font: 700 13px Roboto, sans-serif; pointer-events: none; box-shadow: 0 14px 28px -12px rgba(10, 91, 211, .9); }
.ps-dropline { position: absolute; z-index: 7; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #f26a1b, #ff8a00); box-shadow: 0 0 12px rgba(242, 106, 27, .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: #0b2350; }
.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: #0a5bd3; 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, #f26a1b, #ff8a00); 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: #ff8a00; transform: translateY(-2px); box-shadow: 0 12px 22px -16px rgba(242, 106, 27, .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: #0b2350; }
.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: #0b2350; }
.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: #0a5bd3; }
.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: #f26a1b; }
.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: #ff8a00; box-shadow: 0 18px 32px -20px rgba(242, 106, 27, .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, #f26a1b, #ff8a00); 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: #0b2350; }
.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: #0b2350; }
.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: #0a5bd3; background: #f3f7ff; }
.ps-ex-fmt input, .ps-ex-opt input { margin-top: 3px; width: 17px; height: 17px; accent-color: #0a5bd3; }
.ps-ex-fmt b, .ps-ex-opt b { display: flex; align-items: center; gap: 8px; font: 700 14px Roboto, sans-serif; color: #0b2350; }
.ps-ex-fmt b em { padding: 2px 8px; border-radius: 99px; background: linear-gradient(110deg, #f26a1b, #ff8a00); 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: #2f7ae5; } .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: #0a5bd3; }
.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, #f26a1b, #ff8a00); 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, #f26a1b, #ff8a00); }
.aai-ftag.is-beta { background: #e8efff; color: #0a5bd3; 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(242, 106, 27, .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: #0a5bd3; }
.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, #f26a1b, #ff8a00); 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(242, 106, 27, .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(242, 106, 27, .7); } 50% { transform: scale(1.07); box-shadow: 0 0 0 4px rgba(255, 138, 0, .18), 0 6px 16px -4px rgba(242, 106, 27, .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: #0a5bd3; }
.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: #0a5bd3; background: #f3f7ff; box-shadow: inset 0 0 0 1px #0a5bd3; }
.ax-q button:disabled { opacity: .45; cursor: not-allowed; }
.ax-q b { font: 700 14px Roboto, sans-serif; color: #0b2350; }
.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: #0a5bd3; }
.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, #0a5bd3, #2f7ae5); }
.aai-objbar [data-ob="group"].is-group:hover { filter: brightness(1.08); }

/* Picture 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, #2f7ae5); 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 #2f7ae5, 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: #0a5bd3; 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: #0b2350; 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, #f26a1b, #ff8a00); color: #fff; font: 800 11px Roboto, sans-serif; box-shadow: 0 10px 20px -10px rgba(242, 106, 27, .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, #0a5bd3, #2f7ae5); }
.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; } }

/* Picture 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(242, 106, 27, .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, #f26a1b, #ff8a00); 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(242, 106, 27, .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, #f26a1b, #ff8a00); }
.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(#0a5bd3 0 25%, #ff8a00 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: #0b2350; font: 700 9px/1 var(--a-body, sans-serif); font-style: normal; }
.aai-chcol-pals button.is-on { border-color: #0a4fbf; box-shadow: 0 0 0 3px rgba(10, 79, 191, .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: #0b2350; 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: #0b2350; 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(245, 118, 26, .05); stroke: rgba(245, 118, 26, .55); stroke-width: 1; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.aai-enh-mark.is-on { fill: rgba(245, 118, 26, .16); stroke: #f5761a; 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(245, 118, 26, .55); }
.ps-hit.is-flogo.is-on { box-shadow: 0 0 0 2px #f5761a; }
.ps-lgrz { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #f5761a; 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 #f5761a; 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: #f5761a; 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: #f5761a; 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: #0a5bd3; }
.aai-stylebar .aai-pb-tool.is-on, .aai-paintbar .aai-pb-tool.is-on { background: linear-gradient(135deg, #0a5bd3, #2f7ae5); color: #fff; box-shadow: 0 6px 14px -8px rgba(10, 91, 211, .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; }

.aai-harvest-bar{position:fixed;right:24px;top:76px;z-index:100050;display:flex;align-items:center;gap:12px;padding:8px 10px 8px 16px;border-radius:99px;background:#0b2350;color:#fff;box-shadow:0 14px 30px -12px rgba(11,35,80,.6);font:500 13px Roboto,system-ui,sans-serif}.aai-harvest-bar b{color:#ffb27a}
.aai-harvest-final{width:min(680px,94vw)}.aai-hf-row{display:flex;gap:14px;align-items:center}.aai-hf-big{flex:1;display:grid;place-items:center;height:340px;border-radius:12px;background:repeating-conic-gradient(#eef2f8 0 25%,#fff 0 50%) 0 0/20px 20px}.aai-hf-big img{max-width:96%;max-height:330px}.aai-hf-sm{display:grid;gap:10px;justify-items:center;width:120px;font-size:12px;color:#5b6b88}.aai-hf-b{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.aai-hf-msg{min-height:18px;font-size:13px;color:#1d6a45}

/* Learning robot (studio): eye-catching, animated, brand colours */
.aai-robot{position:fixed;left:18px;bottom:18px;z-index:100040;display:flex;align-items:flex-end;gap:10px;font:500 13px Roboto,system-ui,sans-serif;pointer-events:none}
.aai-robot .rb-btn{pointer-events:auto;width:64px;height:64px;padding:4px;border:0;border-radius:22px;background:linear-gradient(145deg,#0a5bd3,#2488d1);box-shadow:0 10px 26px -10px rgba(10,91,211,.75),inset 0 1px 0 rgba(255,255,255,.35);cursor:pointer;animation:rbFloat 3.6s ease-in-out infinite;transition:transform .2s}
.aai-robot .rb-btn:hover{transform:scale(1.08) rotate(-4deg)}
.aai-robot svg{width:100%;height:100%;display:block;overflow:visible}
.aai-robot .rb-led{fill:#9fb3d9;transition:fill .2s}
.aai-robot .rb-eye{transform-origin:center;transform-box:fill-box;animation:rbBlink 4.8s infinite}
.aai-robot .rb-gear{transform-origin:32px 57px;opacity:.35}
.aai-robot .rb-arm{transform-origin:41px 33px}
.aai-robot.is-thinking .rb-gear{opacity:1;animation:rbSpin 1s linear infinite}
.aai-robot.is-thinking .rb-eye{animation:rbLook 1.1s ease-in-out infinite}
.aai-robot.is-thinking .rb-led{fill:#7fd3ff;animation:rbPulse .8s ease-in-out infinite}
.aai-robot.is-learned .rb-led{fill:#22c55e;filter:drop-shadow(0 0 6px #22c55e)}
.aai-robot.is-learned .rb-btn{animation:rbHop .6s cubic-bezier(.2,.9,.3,1.4) 2;box-shadow:0 0 0 4px rgba(34,197,94,.35),0 12px 30px -10px rgba(34,197,94,.8)}
.aai-robot.is-learned .rb-arm{animation:rbWave .5s ease-in-out 3}
.aai-robot.is-acted .rb-led{fill:#ff8a00;filter:drop-shadow(0 0 6px #ff8a00)}
.aai-robot.is-acted .rb-btn{box-shadow:0 0 0 4px rgba(242,106,27,.35),0 12px 30px -10px rgba(242,106,27,.8)}
.aai-robot .rb-bubble{pointer-events:auto;max-width:280px;padding:10px 12px;border-radius:14px 14px 14px 4px;background:#fff;color:#0b2350;box-shadow:0 12px 30px -12px rgba(11,35,80,.45);border:1px solid #e1e6f0;animation:rbIn .35s cubic-bezier(.2,.9,.3,1.3)}
.aai-robot.is-learned .rb-bubble{border-color:#86efac}.aai-robot.is-acted .rb-bubble{border-color:#ffc49a}
.aai-robot .rb-bubble b{display:block;font-size:12.5px}.aai-robot .rb-bubble em{display:block;font-style:normal;color:#3c4a66;font-size:12px;margin-top:2px}
.aai-robot .rb-bubble button{margin-top:6px;padding:3px 10px;border:1px solid #ffc49a;border-radius:99px;background:#fff6ef;color:#a8440f;font-size:12px;cursor:pointer}
.aai-robot-panel{width:min(560px,94vw)}.aai-robot-panel ul{max-height:46vh;overflow:auto;margin:10px 0;padding:0;list-style:none}.aai-robot-panel li{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid #eef1f6;font-size:12.5px}.aai-robot-panel li button{border:0;background:#fde4e4;color:#9e2a36;border-radius:50%;width:24px;height:24px;cursor:pointer}.aai-robot-panel code{background:#f3f6fb;padding:1px 6px;border-radius:6px}.aai-robot-panel .rb-on{display:inline-flex;gap:6px;align-items:center;margin-right:14px;font-size:13px}
@keyframes rbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes rbBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes rbLook{0%,100%{transform:translateX(0)}30%{transform:translateX(-1.8px)}70%{transform:translateX(1.8px)}}
@keyframes rbSpin{to{transform:rotate(360deg)}}
@keyframes rbPulse{50%{opacity:.4}}
@keyframes rbHop{50%{transform:translateY(-12px) scale(1.06)}}
@keyframes rbWave{50%{transform:rotate(-28deg)}}
@keyframes rbIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.aai-robot .rb-btn,.aai-robot .rb-eye{animation:none}}
@media print{.aai-robot{display:none}}

.aai-robot.is-swing{z-index:100090}.aai-robot.is-swing .rb-btn{animation:none;transition:none;box-shadow:0 14px 34px -10px rgba(242,106,27,.8),inset 0 1px 0 rgba(255,255,255,.35)}.aai-robot.is-swing .rb-bubble{visibility:hidden}
.rb-web{position:fixed;inset:0;width:100vw;height:100vh;z-index:100085;pointer-events:none;overflow:visible}
.rb-magic{position:fixed;z-index:100086;width:0;height:0;pointer-events:none}.rb-magic i{position:absolute;left:-7px;top:-9px;font-style:normal;font-size:16px;color:#f26a1b;text-shadow:0 0 6px #ffd27a;animation:rbMagic .9s ease-out forwards}.rb-magic i:nth-child(3n){color:#0a5bd3;text-shadow:0 0 6px #9fd0ff}.rb-magic i:nth-child(4n){color:#16a34a;font-size:12px}
.rb-magic::before{content:"";position:absolute;left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(255,210,122,.75),rgba(255,138,0,0) 70%);animation:rbFlash .7s ease-out forwards}
@keyframes rbMagic{0%{transform:translate(0,0) scale(.3);opacity:1}70%{opacity:1}100%{transform:translate(var(--x),var(--y)) scale(1.1) rotate(160deg);opacity:0}}
@keyframes rbFlash{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.8);opacity:0}}
.aai-robot-panel .rb-fix{margin:10px 0 12px;padding:12px 14px;border-radius:12px;background:#f2f7ff;border:1px solid #cfe0fb}.aai-robot-panel .rb-fix ul{margin:8px 0 10px;padding-left:18px}.aai-robot-panel .rb-fix li{display:list-item;border:0;padding:2px 0}.aai-robot-panel h4{margin:12px 0 6px;font-size:13px}

.aai-robot .rb-legs path{transform-box:view-box}.aai-robot .rb-l1,.aai-robot .rb-l2{transform-origin:23px 38px}.aai-robot .rb-r1,.aai-robot .rb-r2{transform-origin:41px 38px}
.aai-robot .rb-l1,.aai-robot .rb-r2{animation:rbLeg 2.4s ease-in-out infinite}.aai-robot .rb-l2,.aai-robot .rb-r1{animation:rbLeg 2.4s ease-in-out -1.2s infinite}
.aai-robot.is-thinking .rb-legs path{animation-duration:.45s}
.aai-robot.is-swing .rb-l1,.aai-robot.is-swing .rb-l2{animation:none;transform:rotate(22deg)}.aai-robot.is-swing .rb-r1,.aai-robot.is-swing .rb-r2{animation:none;transform:rotate(-22deg)}.aai-robot.is-swing .rb-arm{animation:none;transform:rotate(-40deg)}
.aai-robot.is-acted .rb-legs path{animation-duration:.3s}
@keyframes rbLeg{0%,100%{transform:rotate(0)}50%{transform:rotate(7deg)}}
@media (prefers-reduced-motion:reduce){.aai-robot .rb-legs path,.aai-robot .rb-btn{animation:none!important}}
.aai-robot-panel .rb-how{margin:0 0 10px;font-size:12.5px;color:#3c4a66}

/* Weaver: a little friendly spider hanging on its thread (no tile, no text) */
.aai-robot .rb-btn{width:54px;height:54px;padding:0;border-radius:50%;background:none;box-shadow:none;animation:rbDangle 4s ease-in-out infinite;transform-origin:50% -60px;filter:drop-shadow(0 6px 8px rgba(11,35,80,.25))}
.aai-robot .rb-btn:hover{transform:scale(1.1)}
.aai-robot .rb-btn::before{content:"";position:absolute;left:50%;bottom:100%;width:1.4px;height:70px;margin-left:-.7px;background:linear-gradient(rgba(11,35,80,0),rgba(11,35,80,.45))}
.aai-robot .rb-btn{position:relative}
.aai-robot.is-learned .rb-btn{animation:rbHop .6s cubic-bezier(.2,.9,.3,1.4) 1;box-shadow:none;filter:drop-shadow(0 0 10px rgba(34,197,94,.9))}
.aai-robot.is-acted .rb-btn{box-shadow:none;filter:drop-shadow(0 0 10px rgba(242,106,27,.8))}
.aai-robot.is-swing .rb-btn{box-shadow:none;filter:drop-shadow(0 8px 10px rgba(11,35,80,.35))}.aai-robot.is-swing .rb-btn::before{display:none}
.aai-robot .rb-bubble{padding:0;border:0;background:none;box-shadow:none;max-width:none}
.aai-robot .rb-bubble [data-rbundo]{display:grid;place-items:center;width:34px;height:34px;margin:0 0 8px;padding:0;border:1px solid #ffc49a;border-radius:50%;background:#fff;box-shadow:0 6px 16px -8px rgba(242,106,27,.7);cursor:pointer}
.aai-robot .rb-bubble [data-rbundo] svg{width:18px;height:18px;fill:none;stroke:#a8440f;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@keyframes rbDangle{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}
.aai-robot.is-no .rb-btn{animation:rbNo .8s ease-in-out}.aai-robot.is-no .rb-eye{animation:none}
@keyframes rbNo{0%,100%{transform:rotate(0)}15%{transform:rotate(-16deg)}35%{transform:rotate(14deg)}55%{transform:rotate(-11deg)}75%{transform:rotate(7deg)}}

.aai-mem-dot{background:conic-gradient(#0a5bd3,#22c55e,#f26a1b,#0a5bd3)!important}.aai-mem-row button{display:flex;align-items:center;gap:6px}.aai-mem-row .aai-ftag{margin-left:0}
.aai-memgen .aai-modal-card{width:min(560px,94vw)}.aai-memgen textarea{width:100%;min-height:120px;padding:12px;border:1px solid #d5deee;border-radius:12px;font:400 14px/1.5 Roboto,sans-serif;resize:vertical}
.aai-mem-parts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 4px;min-height:28px}.aai-mem-parts small{color:#5b6b88;font-size:12px}
.aai-mem-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:#f3f6fb;border:1px solid #dfe6f2;font-size:12.5px;color:#0b2350}.aai-mem-chip i{width:8px;height:8px;border-radius:50%;background:#c3cddd}.aai-mem-chip i.is-known{background:#22c55e}.aai-mem-chip i.is-icon{background:#f26a1b}.aai-mem-chip.is-known{border-color:#bfe9cf}
.aai-mem-chip i.is-look{background:#0a5bd3}.aai-mem-key{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;width:100%;color:#7a869c;font-size:11px}.aai-mem-key i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#c3cddd}.aai-mem-key i.is-icon{background:#f26a1b}.aai-mem-key i.is-look{background:#0a5bd3}.aai-mem-key i.is-known{background:#22c55e}.aai-memgen-page .aai-gen-card b .aai-ftag{vertical-align:middle}