/* Tiridro AI Invitations - hub, editor and public invitation styles.
 * Self-contained: real webfont files are shipped in ./fonts and loaded via
 * @font-face below (same self-hosted-vendor-asset approach as the QR/
 * html2canvas libraries - no Google Fonts CDN, so the public invitation
 * page never blocks on a third party and never leaks a visitor's IP to
 * Google). Previously this relied on the *names* of these fonts with a
 * system-font fallback and no actual font files - on a system without
 * these fonts installed (most visitors) that silently fell back to plain
 * Georgia / Comic Sans MS / cursive, which is a large part of why the
 * invitations read as generic/AI-made rather than designed. Real font
 * files fix that regardless of what's installed on the visitor's device. */

@font-face { font-family:'TAI Inter';   font-style:normal; font-weight:400; font-display:swap; src:url('fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'TAI Inter';   font-style:normal; font-weight:700; font-display:swap; src:url('fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family:'TAI Playfair'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/playfair-display-400.woff2') format('woff2'); }
@font-face { font-family:'TAI Playfair'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/playfair-display-700.woff2') format('woff2'); }
@font-face { font-family:'TAI Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family:'TAI Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family:'TAI Baloo';   font-style:normal; font-weight:400; font-display:swap; src:url('fonts/baloo2-400.woff2') format('woff2'); }
@font-face { font-family:'TAI Baloo';   font-style:normal; font-weight:700; font-display:swap; src:url('fonts/baloo2-700.woff2') format('woff2'); }
@font-face { font-family:'TAI Caveat';  font-style:normal; font-weight:400; font-display:swap; src:url('fonts/caveat-400.woff2') format('woff2'); }
@font-face { font-family:'TAI Caveat';  font-style:normal; font-weight:700; font-display:swap; src:url('fonts/caveat-700.woff2') format('woff2'); }

.tai-hub, .tai-editor, .tai-public-page { --tai-ink:#2a1a45; --tai-pink:#ec5aa0; --tai-orange:#f79a4c; box-sizing:border-box; }
.tai-hub *, .tai-editor *, .tai-public-page * { box-sizing:inherit; }

/* ---------- Hub ---------- */
.tai-hub { max-width:960px; margin:0 auto; padding:24px 20px 60px; }
.tai-hub-hero { text-align:center; padding:28px 10px 8px; }
.tai-hub-kicker { display:inline-block; padding:6px 12px; border-radius:999px; background:#fff0f6; color:var(--tai-pink); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.tai-hub-hero h1 { margin:12px 0 6px; font-size:clamp(28px,5vw,44px); color:var(--tai-ink); }
.tai-hub-hero p { color:#6b5b7a; font-size:16px; }
.tai-hub-tabs { display:flex; gap:8px; justify-content:center; margin:22px 0; flex-wrap:wrap; }
.tai-hub-tab { padding:10px 18px; border-radius:999px; border:1px solid #eadff0; background:#fff; color:#6b5b7a; font-weight:700; cursor:pointer; }
.tai-hub-tab.is-active { background:linear-gradient(135deg,var(--tai-pink),var(--tai-orange)); color:#fff; border-color:transparent; }
.tai-hub-panel { margin-top:10px; }
.tai-prompt-box { display:flex; flex-direction:column; gap:10px; background:#fff; border:1px solid #eee1ec; border-radius:20px; padding:18px; box-shadow:0 14px 34px rgba(150,60,110,.08); }
.tai-prompt-box textarea { width:100%; border:1px solid #eadff0; border-radius:12px; padding:12px; font-size:15px; resize:vertical; font-family:inherit; }
.tai-btn { padding:11px 18px; border-radius:999px; border:1px solid #eadff0; background:#fff; color:#3a2a44; font-weight:800; cursor:pointer; }
.tai-btn-primary { background:linear-gradient(135deg,var(--tai-pink),var(--tai-orange)); color:#fff; border-color:transparent; box-shadow:0 10px 22px rgba(236,90,160,.28); }
.tai-btn:disabled { opacity:.6; cursor:default; }
.tai-prompt-status { color:#7a5468; font-size:14px; }
.tai-type-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.tai-type-chip { padding:8px 14px; border-radius:999px; border:1px solid #eadff0; background:#fff; color:#6b5b7a; font-size:13px; cursor:pointer; }
.tai-type-chip:hover { background:#fff0f6; }

/* Format / Intensity / Style pickers (Create with AI panel) */
.tai-prompt-options { display:flex; flex-direction:column; gap:10px; }
.tai-picker-group { display:flex; flex-direction:column; gap:6px; }
.tai-picker-label { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#8a7a94; }
.tai-picker-row { display:flex; gap:6px; flex-wrap:wrap; }
.tai-picker-btn { padding:7px 13px; border-radius:999px; border:1px solid #eadff0; background:#fff; color:#4a3a54; font-size:13px; font-weight:700; cursor:pointer; }
.tai-picker-btn:hover { background:#fff0f6; }
.tai-picker-btn.is-active { background:linear-gradient(135deg,var(--tai-pink),var(--tai-orange)); color:#fff; border-color:transparent; }

.tai-template-grid, .tai-mine-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-top:14px; }
.tai-template-card, .tai-mine-card { border-radius:18px; overflow:hidden; border:1px solid #eee1ec; background:#fff; cursor:pointer; text-align:left; box-shadow:0 10px 24px rgba(90,40,80,.07); }
.tai-template-card:hover, .tai-mine-card:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(90,40,80,.12); }
.tai-template-preview { height:110px; display:flex; align-items:center; justify-content:center; font-size:34px; }
.tai-template-card-body, .tai-mine-card-body { padding:12px 14px; }
.tai-template-card-body strong, .tai-mine-card-body strong { display:block; color:var(--tai-ink); }
.tai-template-card-body span, .tai-mine-card-body span { color:#8a7a94; font-size:13px; }
.tai-mine-card-actions { display:flex; gap:8px; padding:0 14px 14px; }
.tai-mine-card-actions a, .tai-mine-card-actions button { font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid #eadff0; background:#fff; color:#6b5b7a; cursor:pointer; text-decoration:none; }
.tai-muted { color:#9a8aa4; }

/* ---------- Editor ---------- */
.tai-editor { max-width:1280px; margin:0 auto; padding:16px 16px 60px; }
.tai-editor-shell { display:grid; grid-template-columns:320px 1fr; gap:18px; align-items:start; }
.tai-editor-panel { background:#fff; border:1px solid #eee1ec; border-radius:18px; padding:16px; position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; }
.tai-editor-panel h3 { margin:16px 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:#8a7a94; }
.tai-editor-panel h3:first-child { margin-top:0; }
.tai-field { margin-bottom:10px; }
.tai-field label { display:block; font-size:13px; font-weight:700; color:#4a3a54; margin-bottom:4px; }
.tai-field input[type=text], .tai-field input[type=number], .tai-field input[type=date], .tai-field input[type=time], .tai-field textarea, .tai-field select {
    width:100%; border:1px solid #eadff0; border-radius:10px; padding:8px 10px; font-size:14px; font-family:inherit;
}
.tai-field textarea { min-height:64px; resize:vertical; }
.tai-swatches { display:flex; gap:8px; flex-wrap:wrap; }
.tai-swatch { width:30px; height:30px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px #eadff0; cursor:pointer; }
.tai-swatch.is-active { box-shadow:0 0 0 2px var(--tai-pink); }
.tai-theme-grid, .tai-component-list { display:flex; flex-direction:column; gap:6px; }
.tai-theme-pick { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:10px; cursor:pointer; border:1px solid transparent; }
.tai-theme-pick.is-active { border-color:var(--tai-pink); background:#fff0f6; }
.tai-theme-swatch { width:22px; height:22px; border-radius:6px; flex:none; }
.tai-photo-drop { border:2px dashed #eadff0; border-radius:14px; padding:14px; text-align:center; color:#8a7a94; cursor:pointer; }
.tai-photo-drop img { max-width:100%; border-radius:10px; }
.tai-crop-modal-backdrop { position:fixed; inset:0; background:rgba(20,10,25,.6); z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; }
.tai-crop-modal { background:#fff; border-radius:18px; padding:18px; max-width:420px; width:100%; }
.tai-crop-stage { position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; border-radius:12px; background:#111; touch-action:none; cursor:grab; }
.tai-crop-stage img { position:absolute; left:0; top:0; user-select:none; -webkit-user-drag:none; }
.tai-crop-controls { display:flex; align-items:center; gap:10px; margin-top:12px; }
.tai-crop-controls input[type=range] { flex:1; }
.tai-crop-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }

.tai-editor-preview { min-width:0; }
.tai-editor-preview-toolbar { display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.tai-share-url { font-size:13px; color:#6b5b7a; background:#fff0f6; padding:6px 10px; border-radius:8px; }
.tai-preview-frame { border-radius:22px; overflow:hidden; box-shadow:0 20px 50px rgba(60,20,50,.15); min-height:420px; }

/* Positioning panel (editor.js "Positioning" section) */
.tai-position-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid #f3ecf5; font-size:13px; }
.tai-position-row:last-child { border-bottom:none; }
.tai-position-label { flex:1; color:#4a3a54; font-weight:700; }
.tai-position-coords { display:flex; align-items:center; gap:4px; }
.tai-position-coords span { font-size:11px; color:#9a8aa4; font-weight:700; }
.tai-position-coords input[type=number] { width:52px; padding:5px 6px; border:1px solid #eadff0; border-radius:8px; font-size:12px; }

/* Draggable elements in the editor preview only (never on the public
 * page - editor.js is the only script that ever adds these classes). */
.tai-editor .tai-editable-drag { cursor:grab; touch-action:none; }
.tai-editor .tai-editable-drag:hover { outline:2px dashed var(--tai-pink); outline-offset:4px; border-radius:8px; }
.tai-editor .tai-editable-drag.tai-dragging { cursor:grabbing; outline:2px solid var(--tai-pink); outline-offset:4px; border-radius:8px; z-index:5; }

@media (max-width:900px) {
    .tai-editor-shell { grid-template-columns:1fr; }
    .tai-editor-panel { position:static; max-height:none; }
}

/* ---------- Invitation (shared by editor preview and public page) ---------- */
/* v2.0: full-bleed layered composition, not a white card on a grey page.
 * `.tai-invitation` is the whole art board, sized by aspect-ratio (one of
 * the 4 `format`s) rather than a fixed height, so a "story" invitation is
 * tall and a "landscape" one is wide instead of every design being forced
 * into the same box. `.tai-bg` (the gradient/pattern scene, or the AI
 * background image) fills it; `.tai-stage` sits on top and is itself the
 * positioning root every `.tai-el-abs` element's percentage x/y resolves
 * against. `.tai-flow` is the plain top-to-bottom holder for whatever the
 * AI left unpositioned - this is what keeps a simple design from ever
 * collapsing into an empty, absolutely-positioned mess. */
.tai-public-page { max-width:640px; margin:0 auto; padding:20px 14px 60px; }
.tai-invitation-root { width:100%; }
.tai-invitation { position:relative; width:100%; min-height:420px; border-radius:22px; overflow:hidden; color:var(--tai-text,#222); background:#181022; isolation:isolate; }
.tai-format-portrait  { aspect-ratio:4 / 5; }
.tai-format-square    { aspect-ratio:1 / 1; }
.tai-format-landscape { aspect-ratio:4 / 3; }
.tai-format-story     { aspect-ratio:9 / 16; }

.tai-bg { position:absolute; inset:0; z-index:0; }
.tai-bg-photo { background-size:cover; background-position:center; }
.tai-bg-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55)); }
.tai-bg-motion { animation:tai-bg-pan 18s ease-in-out infinite alternate; background-size:140% 140% !important; }
@keyframes tai-bg-pan { from { background-position:0% 0%; } to { background-position:100% 100%; } }

.tai-pattern-stripes { background-image:repeating-linear-gradient(45deg, var(--tai-pattern-accent,#fff) 0 2px, transparent 2px 26px); opacity:.15; mix-blend-mode:overlay; }
.tai-pattern-grid { background-image:linear-gradient(var(--tai-pattern-accent,#fff) 1px,transparent 1px),linear-gradient(90deg,var(--tai-pattern-accent,#fff) 1px,transparent 1px); background-size:28px 28px; opacity:.12; }
.tai-pattern-dots { background-image:radial-gradient(var(--tai-pattern-accent,#fff) 2px, transparent 2px); background-size:22px 22px; opacity:.18; }
.tai-pattern-stars { background-image:radial-gradient(#fff 1px, transparent 1.4px); background-size:36px 36px; opacity:.5; }
.tai-pattern-scales { background-image:radial-gradient(circle at 50% 100%, transparent 60%, var(--tai-pattern-accent,#fff) 62%); background-size:26px 16px; opacity:.12; }
.tai-pattern-sparkle { background-image:radial-gradient(#fff 1.5px, transparent 2px); background-size:30px 30px; opacity:.5; }
.tai-pattern-confetti { background-image:radial-gradient(#fff 2px, transparent 2px); background-size:18px 18px; opacity:.2; }

.tai-stage { position:absolute; inset:0; z-index:1; }

/* `.tai-flow-behind` / `.tai-flow` / `.tai-flow-front` are inserted into
 * `.tai-stage` at three fixed points (see renderer.js render()), so
 * anything appended to the stage before `.tai-flow` paints underneath
 * mainContent and anything after paints over it. `.tai-flow-behind`/
 * `.tai-flow-front` are plain, unpadded, non-flex full-size passthrough
 * boxes: an unpositioned full-bleed decorative element (gradient scrim,
 * particle field) covers the *entire* stage via its own `inset:0`,
 * instead of becoming a stray row in a flex stack. `.tai-flow` keeps the
 * old padded flex-column layout - it's specifically for mainContent's
 * title/photo/subtitle/etc. stacking top-to-bottom. All three must stay
 * `position:relative` (not static) for the DOM-order-based layering to
 * actually take effect. */
.tai-flow-behind, .tai-flow-front { position:relative; z-index:0; height:100%; width:100%; }
.tai-flow { position:relative; z-index:0; height:100%; width:100%; box-sizing:border-box; padding:clamp(26px,6vw,48px) clamp(20px,5vw,36px) clamp(24px,5vw,36px); display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.tai-layout-split .tai-flow { align-items:flex-start; text-align:left; }
.tai-layout-poster .tai-flow { justify-content:flex-start; padding-top:clamp(50px,10vw,90px); }

/* Elements the AI (or, later, drag-and-drop) gave an explicit x/y. Position
 * is percentage-based against `.tai-stage`; the rest of the transform
 * (anchor offset, rotation, scale) is written inline by placeElement(). */
.tai-el-abs { position:absolute; max-width:min(92%,560px); }

.tai-c-hero-title { margin:0; font-size:clamp(28px,7vw,48px); line-height:1.05; text-shadow:0 2px 10px rgba(0,0,0,.25); }
.tai-c-name { margin:0; font-size:clamp(20px,4.5vw,30px); font-weight:700; line-height:1.15; }
.tai-c-subtitle { margin:0; font-size:18px; opacity:.92; }
.tai-c-age { margin:6px 0; }
.tai-c-age-number { display:inline-flex; align-items:center; justify-content:center; width:88px; height:88px; border-radius:50%; background:rgba(255,255,255,.18); font-size:44px; font-weight:900; border:3px solid currentColor; }
.tai-c-photo { width:150px; height:150px; overflow:hidden; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-size:60px; border:4px solid rgba(255,255,255,.6); box-shadow:0 10px 26px rgba(0,0,0,.25); }
.tai-c-photo img { width:100%; height:100%; object-fit:cover; }
.tai-c-photo .tai-c-photo-placeholder { width:46%; height:46%; opacity:.7; }
.tai-shape-circle { border-radius:50%; }
.tai-shape-rounded { border-radius:22px; }
.tai-shape-square { border-radius:6px; }
.tai-c-message { max-width:480px; line-height:1.6; font-size:16px; opacity:.95; }
.tai-c-datetime { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; font-weight:700; }
.tai-c-location { display:flex; flex-direction:column; gap:4px; align-items:center; }
.tai-c-location-link { color:inherit; text-decoration:underline; font-size:13px; opacity:.85; }
.tai-c-event-card { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); border-radius:16px; padding:14px 18px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; width:100%; max-width:340px; }
.tai-c-event-row { display:flex; gap:8px; align-items:center; font-size:14px; }
.tai-c-addcal { margin-top:4px; align-self:flex-start; padding:6px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.5); background:transparent; color:inherit; font-size:12px; cursor:pointer; }
.tai-c-illustration { font-size:56px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.tai-c-illustration .tai-icon-svg { width:56px; height:56px; }
.tai-c-decorative { font-size:30px; opacity:.85; }
.tai-c-decorative .tai-icon-svg { width:30px; height:30px; }
.tai-c-countdown-row { display:flex; gap:10px; }
.tai-c-countdown-cell { background:rgba(255,255,255,.16); border-radius:12px; padding:8px 12px; min-width:56px; }
.tai-c-countdown-cell strong { display:block; font-size:20px; }
.tai-c-countdown-cell small { font-size:10px; text-transform:uppercase; opacity:.8; }
.tai-c-countdown-live { font-weight:800; }
.tai-c-rsvp { width:100%; max-width:340px; }
.tai-c-rsvp-form { display:flex; flex-direction:column; gap:8px; background:rgba(255,255,255,.14); border-radius:16px; padding:14px; }
.tai-c-rsvp-form input[type=text], .tai-c-rsvp-form input[type=number] { border:none; border-radius:10px; padding:10px; font-size:14px; }
.tai-c-rsvp-choices { display:flex; gap:14px; justify-content:center; font-size:13px; }
.tai-c-rsvp-btn { padding:10px 16px; border-radius:999px; border:none; background:var(--tai-accent,#fff); color:#222; font-weight:800; cursor:pointer; }
.tai-c-rsvp-status { margin:0; font-size:13px; }
.tai-c-qr { display:flex; flex-direction:column; align-items:center; gap:6px; background:rgba(255,255,255,.9); border-radius:14px; padding:12px; color:#222; }
.tai-c-qr small { font-size:11px; }
.tai-c-footer { font-size:12px; opacity:.75; margin-top:6px; }

/* ---------- Typography treatments (title_sizes / typography_treatments / shadow_styles) ---------- */
/* Sizes stack onto whatever the builder's own font-size already is - used
 * on hero_title/name_text/age_number so "Simple" and "Wow" invitations
 * don't all read at the same scale. */
.tai-size-md   .tai-c-hero-title, .tai-c-name.tai-size-md, .tai-c-age.tai-size-md .tai-c-age-number { font-size:clamp(26px,6vw,40px); }
.tai-size-lg   .tai-c-hero-title, .tai-c-name.tai-size-lg, .tai-c-age.tai-size-lg .tai-c-age-number { font-size:clamp(34px,8vw,56px); }
.tai-size-xl   .tai-c-hero-title, .tai-c-name.tai-size-xl, .tai-c-age.tai-size-xl .tai-c-age-number { font-size:clamp(42px,10vw,72px); }
.tai-size-xxl  .tai-c-hero-title, .tai-c-name.tai-size-xxl, .tai-c-age.tai-size-xxl .tai-c-age-number { font-size:clamp(52px,13vw,96px); }
.tai-size-huge .tai-c-hero-title, .tai-c-name.tai-size-huge, .tai-c-age.tai-size-huge .tai-c-age-number { font-size:clamp(64px,17vw,132px); }
.tai-size-lg.tai-c-age .tai-c-age-number, .tai-size-xl.tai-c-age .tai-c-age-number, .tai-size-xxl.tai-c-age .tai-c-age-number, .tai-size-huge.tai-c-age .tai-c-age-number {
    width:auto; height:auto; padding:0 .18em; border-radius:28px; line-height:1.1;
}

.tai-tt-oversized.tai-c-hero-title, .tai-c-name.tai-tt-oversized { font-size:clamp(46px,11vw,110px); font-weight:900; letter-spacing:-.02em; }
.tai-tt-stacked.tai-c-hero-title, .tai-c-name.tai-tt-stacked { display:flex; flex-direction:column; gap:.02em; line-height:.98; }
.tai-tt-outlined.tai-c-hero-title, .tai-c-name.tai-tt-outlined { -webkit-text-stroke:2px currentColor; color:transparent; text-shadow:none; }
.tai-tt-gradient-fill.tai-c-hero-title, .tai-c-name.tai-tt-gradient-fill {
    background:linear-gradient(120deg, var(--tai-accent,#fff), #ffffff 55%, var(--tai-accent,#fff));
    -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none;
}
.tai-tt-shadow-pop.tai-c-hero-title, .tai-c-name.tai-tt-shadow-pop { text-shadow:4px 4px 0 rgba(0,0,0,.35), 8px 8px 18px rgba(0,0,0,.25); }
.tai-tt-rotated-tag.tai-c-hero-title, .tai-c-name.tai-tt-rotated-tag {
    display:inline-block; transform:rotate(-4deg); background:rgba(0,0,0,.28); padding:.15em .5em; border-radius:10px;
}

.tai-shadow-soft { filter:drop-shadow(0 6px 14px rgba(0,0,0,.22)); }
.tai-shadow-dramatic { filter:drop-shadow(0 14px 30px rgba(0,0,0,.4)); }

/* ---------- Icon / shape SVG primitives ---------- */
.tai-icon-svg { width:1em; height:1em; display:inline-block; vertical-align:-.15em; }
.tai-inline-icon { width:15px; height:15px; margin-right:4px; vertical-align:-2px; }
.tai-shape-svg { width:100%; height:100%; display:block; overflow:visible; }

/* ---------- Decorative layer builders ---------- */
.tai-d-gradient { position:absolute; inset:0; pointer-events:none; z-index:0; }
.tai-d-gradient-scrim-bottom { background:linear-gradient(0deg, rgba(0,0,0,.6), transparent 55%); }
.tai-d-gradient-scrim-top { background:linear-gradient(180deg, rgba(0,0,0,.5), transparent 55%); }
.tai-d-gradient-vignette { background:radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.45) 100%); }

.tai-d-shape { width:min(70vw,420px); height:min(70vw,420px); color:rgba(255,255,255,.16); pointer-events:none; }
.tai-d-shape .tai-shape-svg { fill:currentColor; }
.tai-d-silhouette { width:100%; height:38%; color:rgba(0,0,0,.35); pointer-events:none; position:absolute; left:0; bottom:0; }
.tai-d-silhouette .tai-shape-svg { fill:currentColor; }

.tai-d-glow { width:min(60vw,360px); height:min(60vw,360px); border-radius:50%; pointer-events:none; background:radial-gradient(circle, var(--tai-accent,#fff) 0%, transparent 70%); }
.tai-d-glow-soft { opacity:.25; }
.tai-d-glow-medium { opacity:.45; }
.tai-d-glow-strong { opacity:.7; filter:blur(2px); }

.tai-d-particles { position:absolute; inset:0; pointer-events:none; background-repeat:repeat; }
.tai-d-particles-confetti { background-image:radial-gradient(rgba(255,255,255,.9) 2px, transparent 2.4px), radial-gradient(var(--tai-accent,#ffd23f) 2px, transparent 2.4px); background-size:26px 30px, 40px 46px; background-position:0 0, 14px 18px; }
.tai-d-particles-sparkle { background-image:radial-gradient(rgba(255,255,255,.9) 1.6px, transparent 2px); background-size:24px 24px; }
.tai-d-particles-stars { background-image:radial-gradient(#fff 1px, transparent 1.4px); background-size:34px 34px; }
.tai-d-particles-bubbles { background-image:radial-gradient(rgba(255,255,255,.5) 40%, transparent 42%); background-size:38px 38px; }
.tai-density-minimal { opacity:.3; }
.tai-density-balanced { opacity:.55; }
.tai-density-rich { opacity:.85; }

.tai-d-rays { position:absolute; inset:-10% -10% auto -10%; height:70%; pointer-events:none; opacity:.35; mix-blend-mode:screen; background:repeating-conic-gradient(from 0deg at 50% 0%, rgba(255,255,255,.5) 0deg 4deg, transparent 4deg 16deg); }
.tai-d-rays-top { transform-origin:50% 0%; }
.tai-d-rays-top-left { transform-origin:20% 0%; }
.tai-d-rays-top-right { transform-origin:80% 0%; }

/* Full-bleed decorative effects (gradient scrims, particle fields, light
 * rays, silhouettes) default to `inset:0`/percentage sizing meant for an
 * un-positioned, layer-wide effect. If the AI (or future drag-and-drop)
 * ever does give one of these an explicit x/y - the schema allows it on
 * every element uniformly - these overrides give it a sane finite box
 * instead of the `inset:0` rules fighting the inline left/top/transform
 * placeElement() already wrote. */
.tai-el-abs.tai-d-gradient,
.tai-el-abs.tai-d-particles { inset:auto; width:min(92vw,560px); height:36vh; }
.tai-el-abs.tai-d-silhouette { inset:auto; bottom:auto; width:min(92vw,560px); height:30vh; }
.tai-el-abs.tai-d-rays { inset:auto; width:min(92vw,560px); height:50vh; }

.tai-d-icon-shape { width:min(30vw,140px); height:min(30vw,140px); color:rgba(255,255,255,.9); filter:drop-shadow(0 8px 16px rgba(0,0,0,.25)); pointer-events:none; }
.tai-d-icon-shape .tai-icon-svg { width:100%; height:100%; }

.tai-anim-fade .tai-flow { animation:tai-fade .6s ease both; }
.tai-anim-fade-up .tai-flow { animation:tai-fade-up .6s ease both; }
.tai-anim-slide .tai-flow { animation:tai-slide .6s ease both; }
.tai-anim-scale .tai-flow { animation:tai-scale .5s ease both; }
.tai-anim-float .tai-flow { animation:tai-fade-up .6s ease both; }
.tai-anim-float .tai-c-illustration { animation:tai-float 3.5s ease-in-out infinite; }
@keyframes tai-fade { from { opacity:0; } to { opacity:1; } }
@keyframes tai-fade-up { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes tai-slide { from { opacity:0; transform:translateX(-30px); } to { opacity:1; transform:translateX(0); } }
@keyframes tai-scale { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:scale(1); } }
@keyframes tai-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }

.tai-confetti-canvas { position:fixed; inset:0; pointer-events:none; z-index:99999; }

@media (prefers-reduced-motion: reduce) {
    .tai-bg-motion, .tai-anim-fade .tai-flow, .tai-anim-fade-up .tai-flow, .tai-anim-slide .tai-flow, .tai-anim-scale .tai-flow, .tai-anim-float .tai-c-illustration {
        animation:none !important;
    }
}

@media (max-width:520px) {
    .tai-hub-tabs { gap:6px; }
    .tai-hub-tab { padding:8px 12px; font-size:13px; }
    .tai-c-age-number { width:70px; height:70px; font-size:32px; }
    .tai-c-photo { width:120px; height:120px; }
}