/*
 * Altflex MAX studio.
 *
 * This sheet is loaded inside a shadow root, which is why it can afford to be
 * plain: no host theme rule reaches across that boundary, so the studio no
 * longer inherits a theme's buttons, inputs, links or typography. The light-DOM
 * fallback keeps the .afmax-app prefixes for the same reason it always did.
 *
 * The reset below is still worth having: it clears user-agent defaults so a
 * control looks the same in every browser rather than only in the one it was
 * built in.
 */

:host {
	all: initial;
	display: block;
	--afmax-top: 0px;
}

.afmax-app,
.afmax-app *,
.afmax-app *::before,
.afmax-app *::after { box-sizing: border-box; }

/* The reset is wrapped in :where() so it carries no specificity at all. Written
   as plain element selectors it outweighed the component classes below — which
   is how the primary button ended up with no background of its own. */
:where(.afmax-app) :where(button, input, select, textarea) {
	margin: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: none;
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	line-height: inherit;
}
:where(.afmax-app) :where(a) { color: inherit; text-decoration: none; background: none; box-shadow: none; }
:where(.afmax-app) :where(h1, h2, h3, h4, p, figure) { margin: 0; font-weight: inherit; }
:where(.afmax-app) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.afmax-app) :where(img, svg) { display: block; max-width: 100%; }

/* Anything given a display of its own would otherwise ignore [hidden], which is
   what let the studio and its toolbar show through underneath the dashboard. */
.afmax-app [hidden] { display: none !important; }

/* ------------------------------------------------------------------ tokens */

.afmax-app {
	--bg: #0a0c11;
	--panel: #10131b;
	--panel-2: #151925;
	--raised: #1b2030;
	--raised-2: #232a3d;
	--line: #232a39;
	--line-soft: #1b2130;
	--ink: #f0f3f9;
	--muted: #99a3b8;
	--faint: #6a7488;
	--brand: #009FE2;
	--brand-2: #0076A6;
	--brand-lift: #22B7F0;
	--brand-soft: rgba(0, 159, 226, .16);
	--ok: #34d399;
	--warn: #fbbf24;
	--danger: #fb7185;
	--shadow: 0 18px 48px rgba(0, 0, 0, .5);
	--shadow-sm: 0 4px 14px rgba(0, 0, 0, .3);
	--stage: #0d1017;

	position: fixed;
	inset: var(--afmax-top, 0px) 0 0 0;
	z-index: 999990;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	overflow: hidden;
	background: var(--bg);
	color: var(--ink);
	font: 400 14px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-feature-settings: "cv02", "cv03", "cv04", "cv11";
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.afmax-app[data-theme="light"] {
	--bg: #f6f7fb;
	--panel: #ffffff;
	--panel-2: #fbfbfe;
	--raised: #eef0f7;
	--raised-2: #e4e8f2;
	--line: #e2e6f0;
	--line-soft: #edeff6;
	--ink: #121620;
	--muted: #58627a;
	--faint: #7b8598;
	--brand: #0086C4;
	--brand-2: #0076A6;
	--brand-lift: #22B7F0;
	--brand-soft: rgba(0, 134, 196, .11);
	--ok: #0f9d58;
	--warn: #b45309;
	--danger: #dc2626;
	--shadow: 0 16px 40px rgba(19, 24, 44, .12);
	--shadow-sm: 0 2px 10px rgba(19, 24, 44, .08);
	--stage: #e9ecf4;
}

.afmax-app :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }

/* ---------------------------------------------------------------- top bar */

.afmax-top {
	display: flex; align-items: center; gap: 12px;
	height: 56px; padding: 0 12px;
	border-bottom: 1px solid var(--line);
	background: var(--panel);
}
.afmax-mark {
	display: grid; place-items: center;
	width: 30px; height: 30px; flex: 0 0 auto;
	border-radius: 9px; overflow: hidden;
	background: linear-gradient(140deg, var(--brand-lift), var(--brand-2));
	color: #fff; font-size: 13px; font-weight: 800;
	box-shadow: 0 4px 14px rgba(0, 118, 166, .42);
}
.afmax-mark img { width: 100%; height: 100%; object-fit: contain; }
.afmax-mark--plain { background: none; box-shadow: none; }


/* Site switcher replaces the old rail: the canvas gets that width back. */
.afmax-switch { position: relative; min-width: 0; }
.afmax-switch__btn {
	display: flex; align-items: center; gap: 9px;
	max-width: 340px; min-height: 36px; padding: 0 10px;
	border: 1px solid transparent; border-radius: 10px;
	cursor: pointer;
}
.afmax-switch__btn:hover { background: var(--raised); }
.afmax-switch__btn[aria-expanded="true"] { background: var(--raised); border-color: var(--line); }
.afmax-switch__btn b { overflow: hidden; font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.afmax-switch__btn svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--faint); }
.afmax-menu {
	position: absolute; top: calc(100% + 6px); left: 0; z-index: 12;
	display: none; width: min(340px, 78vw); padding: 6px;
	border: 1px solid var(--line); border-radius: 14px;
	background: var(--panel); box-shadow: var(--shadow);
}
.afmax-menu[data-open="true"] { display: grid; gap: 2px; }
.afmax-menu button {
	display: grid; gap: 3px; padding: 9px 10px;
	border-radius: 10px; cursor: pointer; text-align: left;
}
.afmax-menu button:hover { background: var(--raised); }
.afmax-menu button[aria-current="true"] { background: var(--brand-soft); }
.afmax-menu b { font-size: 13px; font-weight: 650; }
.afmax-menu small { color: var(--faint); font-size: 11.5px; }

.afmax-top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ------------------------------------------------------------- primitives */

.afmax-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	min-height: 34px; padding: 0 14px;
	border: 1px solid transparent; border-radius: 10px;
	background: var(--brand); color: #fff;
	font-size: 13px; font-weight: 650; white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(16, 20, 34, .18);
	transition: transform .14s ease, opacity .14s ease, filter .14s ease;
}
.afmax-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.afmax-btn:active { transform: translateY(0); }
.afmax-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.afmax-btn svg { width: 15px; height: 15px; }
.afmax-btn--ghost { background: var(--raised); border-color: var(--line); color: var(--ink); box-shadow: none; }
.afmax-btn--quiet { background: transparent; color: var(--muted); box-shadow: none; }
.afmax-btn--quiet:hover { background: var(--raised); color: var(--ink); filter: none; }
.afmax-btn--danger { background: transparent; border-color: color-mix(in srgb, var(--danger) 34%, transparent); color: var(--danger); box-shadow: none; }
.afmax-btn--danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); filter: none; }
.afmax-btn--block { width: 100%; }
.afmax-btn--lg { min-height: 40px; font-size: 14px; border-radius: 11px; }
.afmax-btn--icon { width: 34px; min-height: 34px; padding: 0; }

.afmax-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 3px 10px; border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--raised); color: var(--muted);
	font-size: 11px; font-weight: 700; text-transform: capitalize;
}
.afmax-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.afmax-chip[data-tone="published"], .afmax-chip[data-tone="ready"] { color: var(--ok); }
.afmax-chip[data-tone="publishing"], .afmax-chip[data-tone="provisioning"] { color: var(--warn); }
.afmax-chip[data-tone="error"], .afmax-chip[data-tone="failed"] { color: var(--danger); }

.afmax-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); }

/* --------------------------------------------------------------- workbench */

.afmax-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 336px; min-height: 0; }

.afmax-canvas { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; background: var(--stage); }
.afmax-canvas__bar {
	display: flex; align-items: center; gap: 10px;
	padding: 8px 14px; border-bottom: 1px solid var(--line-soft); background: var(--panel);
}
.afmax-devices { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); }
/* No transition on the properties carrying the selected state: animating them
   left the pressed button painting its previous value. */
.afmax-devices button {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 28px; padding: 0 11px; border-radius: 8px;
	color: var(--muted); font-size: 12px; font-weight: 650; cursor: pointer;
}
.afmax-devices button:hover { color: var(--ink); }
.afmax-devices button[aria-pressed="true"] { background: var(--raised-2); color: var(--ink); box-shadow: var(--shadow-sm); }
.afmax-devices svg { width: 14px; height: 14px; }

.afmax-canvas__meta { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 12px; }
.afmax-panel-toggle { display: none; min-height: 30px; }

.afmax-history-controls { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.afmax-history-controls .afmax-btn { min-width: 30px; min-height: 28px; padding: 0; border-radius: 8px; }
.afmax-save-state { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--muted); font-weight: 650; }
.afmax-save-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.afmax-save-state[data-dirty="true"] { color: var(--warn); }
.afmax-save-state[data-dirty="true"]::before { background: var(--warn); animation: afmax-save-pulse 1.1s ease-in-out infinite; }
@keyframes afmax-save-pulse { 50% { opacity: .35; } }

.afmax-stage { position: relative; display: grid; place-items: start center; min-height: 0; overflow: auto; padding: 18px; }
.afmax-frame {
	position: relative;
	width: 100%; max-width: 100%; height: 100%;
	border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
	background: #fff; box-shadow: var(--shadow);
}
.afmax-stage[data-device="tablet"] .afmax-frame { max-width: 834px; }
.afmax-stage[data-device="mobile"] .afmax-frame { max-width: 414px; border-radius: 30px; }
.afmax-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.afmax-stage[data-loading="true"] .afmax-frame::after {
	position: absolute; inset: 0; content: ""; background: var(--stage); opacity: .55;
}

/* --------------------------------------------------------------- inspector */

.afmax-panel { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: var(--panel); }
.afmax-panel__tabs { display: flex; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.afmax-panel__tabs button {
	flex: 1 0 auto; min-height: 34px; padding: 0 10px;
	border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0;
	color: var(--muted); font-size: 12.5px; font-weight: 650; cursor: pointer;
}
.afmax-panel__tabs button:hover { background: var(--raised); color: var(--ink); }
.afmax-panel__tabs button[aria-selected="true"] { border-bottom-color: var(--brand); color: var(--ink); }

.afmax-panel__tabs .afmax-tab-max {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	margin-right: 5px; padding-inline: 12px; border: 1px solid color-mix(in srgb, var(--brand) 42%, var(--line));
	border-bottom-width: 2px; background: var(--brand-soft); color: var(--ink);
}
.afmax-panel__tabs .afmax-tab-max:hover { background: color-mix(in srgb, var(--brand) 18%, var(--panel)); }
.afmax-panel__tabs .afmax-tab-max[aria-selected="true"] { background: var(--brand-soft); border-color: var(--brand); }
.afmax-panel__tabs .afmax-tab-max img { width: 19px; height: 19px; object-fit: contain; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important; }
.afmax-max-logo { width: 34px; height: 34px; flex: 0 0 auto; object-fit: contain; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important; }
.afmax-selection-head { display: grid; gap: 3px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.afmax-selection-head small { color: var(--brand-lift); font-size: 9.5px; font-weight: 850; letter-spacing: .13em; }
.afmax-selection-head b { color: var(--ink); font: 600 11.5px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.afmax-color-control input[type="color"] { width: 100%; height: 38px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); cursor: pointer; }
.afmax-panel__body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: grid; gap: 18px; align-content: start; }
.afmax-panel__foot { padding: 12px; border-top: 1px solid var(--line); background: var(--panel-2); display: grid; gap: 8px; }

.afmax-group { display: grid; gap: 10px; }
.afmax-group + .afmax-group { padding-top: 16px; border-top: 1px solid var(--line-soft); }
.afmax-group > h4 { color: var(--faint); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.afmax-hint { color: var(--faint); font-size: 12px; line-height: 1.55; }

.afmax-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; min-height: 32px; }
.afmax-row > span { color: var(--muted); font-size: 12.5px; }

.afmax-swatch { display: inline-flex; align-items: center; gap: 8px; }
.afmax-swatch input[type="color"] {
	width: 32px; height: 32px; padding: 2px;
	border: 1px solid var(--line); border-radius: 9px; background: var(--bg); cursor: pointer;
}
.afmax-swatch input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.afmax-swatch input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 7px; }
.afmax-swatch input[type="color"]::-moz-color-swatch { border: 0; border-radius: 7px; }
.afmax-swatch input[type="text"] { width: 92px; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; text-transform: uppercase; }

.afmax-field { display: grid; gap: 6px; }
.afmax-field > span { color: var(--muted); font-size: 12.5px; }
.afmax-app input[type="text"],
.afmax-app input[type="url"],
.afmax-app select,
.afmax-app textarea {
	width: 100%; min-height: 36px; padding: 8px 11px;
	border: 1px solid var(--line); border-radius: 10px;
	background: var(--bg); color: var(--ink); font-size: 13px;
}
.afmax-app textarea { min-height: 84px; resize: vertical; line-height: 1.55; }
.afmax-app input::placeholder, .afmax-app textarea::placeholder { color: var(--faint); }
.afmax-app input:focus, .afmax-app select:focus, .afmax-app textarea:focus {
	border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-soft);
}

.afmax-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.afmax-tile {
	display: grid; gap: 2px; padding: 10px 11px;
	border: 1px solid var(--line); border-radius: 11px;
	background: var(--bg); color: var(--muted); text-align: left; cursor: pointer;
}
.afmax-tile:hover { border-color: var(--raised-2); color: var(--ink); }
.afmax-tile[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--ink); }
.afmax-tile b { font-size: 13px; font-weight: 650; }
.afmax-tile small { color: var(--faint); font-size: 11px; }
.afmax-tile[data-font] b { font-size: 16px; }


/* ------------------------------------------------------------ brand assets */

.afmax-asset { display: grid; gap: 10px; }
.afmax-asset__preview {
	display: grid; place-items: center; min-height: 96px; padding: 14px;
	border: 1px dashed var(--line); border-radius: 12px; background: var(--bg);
}
.afmax-asset__preview img { max-height: 64px; width: auto; object-fit: contain; }
.afmax-asset__preview[data-empty="true"] { color: var(--faint); font-size: 12px; text-align: center; }
.afmax-asset__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.afmax-asset__actions .afmax-btn { flex: 1 1 auto; }
.afmax-glyphs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.afmax-glyph {
	display: grid; place-items: center; aspect-ratio: 1;
	border: 1px solid var(--line); border-radius: 9px; background: var(--bg);
	color: var(--muted); font-size: 11px; font-weight: 700; cursor: pointer;
}
.afmax-glyph svg { width: 17px; height: 17px; }
.afmax-glyph b { font-size: 12px; font-weight: 750; }
.afmax-glyph:hover { border-color: var(--raised-2); color: var(--ink); }
.afmax-glyph[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--ink); }

/* ------------------------------------------------------------------- grow */

.afmax-offer {
	display: grid; gap: 8px; padding: 13px;
	border: 1px solid var(--line); border-radius: 13px;
	background: linear-gradient(180deg, var(--panel-2), var(--bg));
}
.afmax-offer__head { display: flex; align-items: center; gap: 9px; }
.afmax-offer__icon {
	display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto;
	border-radius: 9px; background: var(--brand-soft); color: var(--brand);
}
.afmax-offer__icon svg { width: 16px; height: 16px; }
.afmax-offer b { font-size: 13.5px; font-weight: 700; }
.afmax-offer p { color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.afmax-offer[data-asked="true"] { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.afmax-offer[data-asked="true"] .afmax-btn { background: transparent; border-color: color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); box-shadow: none; }

/* ------------------------------------------------------------------- chat */

/* MAX is a tab in the inspector, alongside the design controls rather than
   floating over the canvas in a corner of its own. It keeps its aura so it
   still reads as something you talk to, not another form control. */
/* The MAX tab fills the inspector: header, thread, composer. */
.afmax-chat {
	position: relative;
	display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
	min-height: 0; height: 100%;
	background: var(--panel);
}
.afmax-chat::before {
	position: absolute; inset: 0; z-index: 0; content: "";
	background: radial-gradient(120% 60% at 50% 0%, var(--brand-soft), transparent 70%);
	pointer-events: none;
}
.afmax-chat__head {
	position: relative; z-index: 1;
	display: flex; align-items: center; gap: 10px; padding: 12px 14px;
	border-bottom: 1px solid var(--line-soft);
}
.afmax-chat__head b { font-size: 14px; font-weight: 700; }
.afmax-chat__head small { display: block; color: var(--faint); font-size: 11px; }
.afmax-chat__head .afmax-btn { margin-left: auto; }
.afmax-chat__log { position: relative; z-index: 1; overflow-y: auto; padding: 14px; display: grid; gap: 10px; align-content: start; }
.afmax-msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 13px; line-height: 1.55; }
.afmax-msg[data-from="max"] { justify-self: start; border: 1px solid var(--line); border-bottom-left-radius: 5px; background: var(--raised); color: var(--ink); }
.afmax-msg[data-from="you"] { justify-self: end; border-bottom-right-radius: 5px; background: linear-gradient(140deg, var(--brand-lift), var(--brand-2)); color: #fff; }
.afmax-msg[data-from="max"][data-busy="true"] { color: var(--muted); }
.afmax-chat__form { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px; border-top: 1px solid var(--line-soft); background: var(--panel-2); }
.afmax-chat__form textarea { min-height: 40px; max-height: 120px; resize: none; }

.afmax-typing { display: inline-flex; gap: 4px; align-items: center; }
.afmax-typing i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: afmax-blink 1.2s ease-in-out infinite; }
.afmax-typing i:nth-child(2) { animation-delay: .18s; }
.afmax-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes afmax-blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ----------------------------------------------------------------- pieces */

.afmax-versions { display: grid; gap: 6px; }
.afmax-version {
	display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px;
	padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--bg);
}
.afmax-version b { font-size: 12.5px; font-weight: 650; }
.afmax-version small { display: block; color: var(--faint); font-size: 11px; }
.afmax-version[aria-current="true"] { border-color: var(--brand); background: var(--brand-soft); }

.afmax-facts { display: grid; gap: 9px; }
.afmax-fact { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.afmax-fact span { color: var(--faint); font-size: 12px; }
.afmax-fact b { font-size: 12.5px; font-weight: 650; }

.afmax-toast {
	position: fixed; left: 50%; bottom: 22px; z-index: 30;
	display: flex; align-items: center; gap: 9px;
	max-width: min(520px, 92vw); padding: 10px 16px;
	border: 1px solid var(--line); border-radius: 999px;
	background: var(--raised); color: var(--ink);
	font-size: 13px; box-shadow: var(--shadow);
	transform: translate(-50%, 14px); opacity: 0; pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
}
.afmax-toast[data-open="true"] { transform: translate(-50%, 0); opacity: 1; }
.afmax-toast[data-tone="error"] { border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); }
.afmax-toast[data-tone="ok"] { border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok); }

.afmax-empty { display: grid; gap: 10px; place-content: center; justify-items: center; height: 100%; padding: 40px; text-align: center; }
.afmax-empty h3 { font-size: 17px; font-weight: 700; }
.afmax-empty p { max-width: 42ch; color: var(--muted); }

.afmax-skeleton { height: 46px; border-radius: 10px; background: linear-gradient(90deg, var(--panel-2) 25%, var(--raised) 37%, var(--panel-2) 63%); background-size: 400% 100%; animation: afmax-shimmer 1.3s ease infinite; }
@keyframes afmax-shimmer { to { background-position: -135% 0; } }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
	.afmax-body { grid-template-columns: minmax(0, 1fr); }
	.afmax-panel {
		position: absolute; inset: 0 0 0 auto; z-index: 14;
		width: min(360px, 92vw); transform: translateX(101%);
		transition: transform .24s ease; box-shadow: var(--shadow);
	}
	.afmax-panel[data-open="true"] { transform: none; }
	.afmax-panel-toggle { display: inline-flex; }
	.afmax-stage { padding: 12px; }
}
@media (max-width: 720px) {
	.afmax-switch__btn { max-width: 150px; }
	.afmax-devices button span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.afmax-app *, .afmax-app *::before, .afmax-app *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Signed-out card. This one stays in the page, so it keeps a neutral look. */
.afmax-login { max-width: 460px; margin: 40px auto; padding: 28px; border: 1px solid #e5e8ef; border-radius: 16px; text-align: center; }
.afmax-login h2 { margin: 0 0 8px; }
.afmax-login .afmax-signin { display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; padding: 0 20px; border-radius: 999px; background: #6c5cff; color: #fff; font-weight: 700; text-decoration: none; }


/* ------------------------------------------------------- account dashboard */

.afmax-home { min-height: 0; overflow-y: auto; background: var(--bg); }
.afmax-home__inner { width: min(1180px, 100%); margin-inline: auto; padding: 34px clamp(18px, 3.4vw, 44px) 72px; display: grid; gap: 32px; }
.afmax-eyebrow { display: block; color: var(--brand-lift); font-size: 9.5px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }

.afmax-home-hero {
	position: relative; display: grid; grid-template-columns: minmax(0, 1.45fr) auto; gap: 28px 34px; align-items: start;
	padding: clamp(24px, 4vw, 42px); border: 1px solid var(--line); border-radius: 24px; overflow: hidden;
	background: linear-gradient(140deg, color-mix(in srgb, var(--panel) 94%, var(--brand) 6%), var(--panel)); box-shadow: var(--shadow-sm);
}
.afmax-home-hero::after { content: ""; position: absolute; right: -90px; top: -120px; width: 280px; height: 280px; border-radius: 50%; background: var(--brand-soft); filter: blur(4px); pointer-events: none; }
.afmax-home-hero__copy { position: relative; z-index: 1; display: grid; gap: 9px; max-width: 720px; }
.afmax-home-hero h1 { max-width: 760px; font-size: clamp(28px, 4vw, 44px); font-weight: 780; line-height: 1.04; letter-spacing: -.045em; }
.afmax-home-hero p { max-width: 680px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.afmax-home-hero__actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; }
.afmax-btn--hero { min-height: 40px; padding-inline: 18px; }
.afmax-home-stats { position: relative; z-index: 1; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--line); }
.afmax-home-stat { display: grid; gap: 1px; padding: 14px 16px; background: color-mix(in srgb, var(--panel-2) 94%, transparent); }
.afmax-home-stat strong { font-size: 20px; font-weight: 780; letter-spacing: -.03em; }
.afmax-home-stat span { color: var(--faint); font-size: 11px; font-weight: 650; }

.afmax-section { display: grid; gap: 14px; }
.afmax-section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.afmax-section-head h2 { margin-top: 3px; font-size: 20px; font-weight: 750; letter-spacing: -.025em; }
.afmax-section-count { min-width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted); font-size: 11px; font-weight: 750; }

.afmax-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px; }
.afmax-card {
	min-height: 250px; display: grid; grid-template-rows: auto 1fr auto; gap: 18px; padding: 18px;
	border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow-sm);
	transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.afmax-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 38%, var(--line)); box-shadow: var(--shadow); }
.afmax-card__visual { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.afmax-site-avatar { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg, var(--raised), var(--panel-2)); color: var(--brand-lift); font-size: 17px; font-weight: 820; }
.afmax-card__content { min-width: 0; display: grid; align-content: start; gap: 7px; }
.afmax-card__content h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 740; letter-spacing: -.02em; }
.afmax-card__meta { color: var(--faint); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.afmax-card__note { color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.afmax-card__actions { display: flex; gap: 8px; }
.afmax-card__actions .afmax-btn--block { flex: 1 1 auto; justify-content: space-between; }
.afmax-card__actions .afmax-btn--block svg { transform: rotate(-45deg); }
.afmax-empty { grid-column: 1 / -1; height: auto; text-align: left; display: grid; justify-items: start; gap: 10px; padding: 28px; border: 1px dashed var(--line); border-radius: 18px; background: var(--panel); }
.afmax-empty__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); }
.afmax-empty__icon svg { width: 20px; }
.afmax-empty h3 { font-size: 17px; font-weight: 730; }
.afmax-empty p { max-width: 540px; color: var(--muted); font-size: 13px; }

.afmax-grid2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(310px, .9fr); gap: 15px; }
.afmax-box { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); display: grid; gap: 16px; align-content: start; box-shadow: var(--shadow-sm); }
.afmax-box__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.afmax-box__head h3 { margin-top: 3px; font-size: 17px; font-weight: 740; letter-spacing: -.02em; }
.afmax-account-email, .afmax-member-since { max-width: 100%; color: var(--faint); font-size: 11px; overflow-wrap: anywhere; }
.afmax-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.afmax-box__foot { display: flex; justify-content: flex-end; padding-top: 2px; }

.afmax-orders { display: grid; gap: 8px; }
.afmax-order { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--bg); }
.afmax-order b { font-size: 13px; font-weight: 680; }
.afmax-order small { display: block; color: var(--faint); font-size: 11px; margin-top: 2px; }
.afmax-order > span { color: var(--muted); font-size: 12.5px; font-weight: 650; }
.afmax-order-empty { min-height: 130px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 20px; border: 1px dashed var(--line); border-radius: 12px; color: var(--faint); text-align: center; }
.afmax-order-empty span { color: var(--muted); }
.afmax-order-empty svg { width: 20px; }
.afmax-order-empty p { font-size: 12px; }

@media (max-width: 820px) {
	.afmax-home-hero { grid-template-columns: 1fr; }
	.afmax-home-hero__actions { justify-content: flex-start; }
	.afmax-grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.afmax-home__inner { padding: 18px 14px 48px; gap: 22px; }
	.afmax-home-hero { padding: 22px 18px; border-radius: 18px; }
	.afmax-home-hero__actions { flex-wrap: wrap; }
	.afmax-home-stats { grid-template-columns: repeat(3, 1fr); }
	.afmax-home-stat { padding: 12px 10px; }
	.afmax-cards { grid-template-columns: 1fr; }
	.afmax-form-grid { grid-template-columns: 1fr; }
	.afmax-order { grid-template-columns: 1fr auto; }
}



/* ALTFLEX MAX — WooCommerce account shell. These rules intentionally live in
   the light DOM too, so account endpoints that are not the Studio still look
   like the same product instead of falling back to a theme's raw Woo layout. */
body.woocommerce-account:not(.elementor-editor-active) .woocommerce {
	max-width: 1180px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 32px) 64px;
}
body.woocommerce-account:not(.elementor-editor-active) .woocommerce-MyAccount-navigation {
	width: 230px; padding: 8px; border: 1px solid #e6e9f0; border-radius: 16px; background: #fff; box-shadow: 0 8px 30px rgba(19,24,44,.06);
}
body.woocommerce-account:not(.elementor-editor-active) .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
body.woocommerce-account:not(.elementor-editor-active) .woocommerce-MyAccount-navigation li { margin: 2px 0; }
body.woocommerce-account:not(.elementor-editor-active) .woocommerce-MyAccount-navigation a {
	display: block; padding: 10px 12px; border-radius: 10px; color: #465064; font-size: 13px; font-weight: 650; text-decoration: none;
}
body.woocommerce-account:not(.elementor-editor-active) .woocommerce-MyAccount-navigation li.is-active a,
body.woocommerce-account:not(.elementor-editor-active) .woocommerce-MyAccount-navigation a:hover { background: #edf8fd; color: #007caf; }
body.woocommerce-account:not(.elementor-editor-active) .woocommerce-MyAccount-content {
	width: calc(100% - 258px); padding: 24px; border: 1px solid #e6e9f0; border-radius: 18px; background: #fff; box-shadow: 0 8px 30px rgba(19,24,44,.06);
}
body.woocommerce-account:not(.elementor-editor-active) .woocommerce-MyAccount-content input,
body.woocommerce-account:not(.elementor-editor-active) .woocommerce-MyAccount-content select,
body.woocommerce-account:not(.elementor-editor-active) .woocommerce-MyAccount-content textarea { border-radius: 10px; }
body.woocommerce-account:not(.elementor-editor-active) .woocommerce-MyAccount-content .button { border-radius: 10px; }
@media (max-width: 780px) {
	body.woocommerce-account:not(.elementor-editor-active) .woocommerce { display: grid; gap: 14px; padding-inline: 14px; }
	body.woocommerce-account:not(.elementor-editor-active) .woocommerce-MyAccount-navigation,
	body.woocommerce-account:not(.elementor-editor-active) .woocommerce-MyAccount-content { width: 100%; }
}

/* ========================================================================== */
/* Altflex MAX 2.1 — workspace + focused visual editor                        */
/* ========================================================================== */

/* Studio uses the same mental model as modern visual builders:
   tools | canvas | contextual panel. The old horizontal inspector tabs are
   intentionally retired so the canvas remains the obvious primary surface. */
.afmax-body {
	grid-template-columns: 68px minmax(0, 1fr) 320px;
	background: var(--stage);
}

.afmax-toolrail {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 5px;
	padding: 9px 7px;
	border-right: 1px solid var(--line);
	background: var(--panel);
}
.afmax-toolrail__item {
	position: relative;
	display: grid;
	place-items: center;
	gap: 5px;
	min-height: 52px;
	padding: 7px 3px;
	border: 1px solid transparent;
	border-radius: 10px;
	color: var(--faint);
	cursor: pointer;
	transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.afmax-toolrail__item > span { display: grid; place-items: center; width: 20px; height: 20px; }
.afmax-toolrail__item svg { width: 18px; height: 18px; }
.afmax-toolrail__item small { font-size: 9.5px; font-weight: 720; letter-spacing: -.01em; }
.afmax-toolrail__item:hover { background: var(--raised); color: var(--ink); }
.afmax-toolrail__item[aria-selected="true"] {
	border-color: var(--line);
	background: var(--raised-2);
	color: var(--ink);
}
.afmax-toolrail__item[aria-selected="true"]::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 11px;
	bottom: 11px;
	width: 2px;
	border-radius: 0 2px 2px 0;
	background: var(--brand);
}
.afmax-toolrail__max { margin-bottom: 6px; }
.afmax-toolrail__max::after {
	content: "";
	position: absolute;
	left: 7px; right: 7px; bottom: -6px;
	height: 1px; background: var(--line-soft);
}
.afmax-toolrail__max img {
	width: 23px;
	height: 23px;
	object-fit: contain;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	filter: none !important;
}

.afmax-panel { min-width: 0; }
.afmax-panel__head {
	min-height: 58px;
	display: flex;
	align-items: center;
	padding: 10px 14px;
	border-bottom: 1px solid var(--line);
	background: var(--panel);
}
.afmax-panel__head > div { min-width: 0; display: grid; gap: 1px; }
.afmax-panel__head b { font-size: 13.5px; font-weight: 760; letter-spacing: -.015em; }
.afmax-panel__head small { color: var(--faint); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.afmax-panel__body { padding: 13px; gap: 14px; }
.afmax-panel__foot { padding: 9px 13px; }

/* Let the website own the screen, not its chrome. */
.afmax-canvas__bar { min-height: 50px; padding: 7px 12px; }
.afmax-stage { padding: 12px; }
.afmax-frame { border-radius: 9px; box-shadow: 0 8px 30px rgba(0,0,0,.26); }
.afmax-stage[data-device="mobile"] .afmax-frame { border-radius: 26px; }

/* Inspector controls are compact and contextual. */
.afmax-selection-head { padding: 10px 11px; border-radius: 9px; background: var(--raised); }
.afmax-selection-head small { font-size: 9px; }
.afmax-group { gap: 9px; }
.afmax-group + .afmax-group { padding-top: 13px; }
.afmax-group > h4 { font-size: 9.5px; }
.afmax-app input[type="text"],
.afmax-app input[type="url"],
.afmax-app input[type="number"],
.afmax-app select,
.afmax-app textarea {
	width: 100%;
	min-height: 36px;
	padding: 8px 10px;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--bg);
	color: var(--ink);
	font-size: 12.5px;
}
.afmax-app input[type="number"] { appearance: auto; -webkit-appearance: auto; }
.afmax-app textarea { min-height: 78px; }
.afmax-free-color { gap: 7px; }
.afmax-free-color__controls {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: 7px;
	align-items: center;
}
.afmax-free-color__controls input[type="color"] {
	width: 42px;
	height: 36px;
	padding: 3px;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--bg);
	cursor: pointer;
	appearance: auto;
	-webkit-appearance: auto;
}
.afmax-free-color__controls input[type="text"] {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	text-transform: uppercase;
}
.afmax-ai-quota {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	gap: 9px;
	align-items: center;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--raised);
}
.afmax-ai-quota img { width: 26px; height: 26px; object-fit: contain; background: none !important; box-shadow: none !important; border: 0 !important; }
.afmax-ai-quota > div { min-width: 0; display: grid; gap: 1px; }
.afmax-ai-quota b { font-size: 11.5px; font-weight: 720; }
.afmax-ai-quota small { color: var(--faint); font-size: 9.5px; line-height: 1.35; }
.afmax-empty-inspector {
	min-height: 240px;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 8px;
	padding: 24px 14px;
	text-align: center;
	color: var(--muted);
}
.afmax-empty-inspector .afmax-select-cursor { font-size: 25px; color: var(--brand-lift); }
.afmax-empty-inspector h3 { color: var(--ink); font-size: 14px; font-weight: 720; }
.afmax-empty-inspector p { max-width: 240px; color: var(--faint); font-size: 11.5px; line-height: 1.55; }

/* ---------------------------------------------------------------- account */
.afmax-home { background: var(--bg); }
.afmax-home-shell {
	width: min(1240px, 100%);
	min-height: 100%;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	gap: 0;
}
.afmax-home-nav {
	position: sticky;
	top: 0;
	align-self: start;
	min-height: calc(100vh - 56px);
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: 15px;
	padding: 20px 14px;
	border-right: 1px solid var(--line);
	background: var(--panel);
}
.afmax-home-nav__head {
	display: grid;
	grid-template-columns: 38px minmax(0,1fr);
	gap: 9px;
	align-items: center;
	padding: 5px;
}
.afmax-home-avatar {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--line);
	border-radius: 11px;
	background: var(--raised);
	color: var(--ink);
	font-size: 13px;
	font-weight: 800;
}
.afmax-home-nav__head > div { min-width: 0; display: grid; gap: 1px; }
.afmax-home-nav__head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 720; }
.afmax-home-nav__head small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); font-size: 9.5px; }
.afmax-home-nav nav { display: grid; gap: 4px; align-content: start; }
.afmax-home-nav__item,
.afmax-home-nav__link {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 38px;
	padding: 0 10px;
	border: 1px solid transparent;
	border-radius: 9px;
	color: var(--muted);
	font-size: 11.5px;
	font-weight: 650;
	text-align: left;
	cursor: pointer;
}
.afmax-home-nav__item svg,
.afmax-home-nav__link svg { width: 15px; height: 15px; flex: 0 0 auto; }
.afmax-home-nav__item:hover,
.afmax-home-nav__link:hover { background: var(--raised); color: var(--ink); }
.afmax-home-nav__item[aria-current="page"] { background: var(--raised-2); border-color: var(--line); color: var(--ink); }
.afmax-home-nav__bottom { display: grid; gap: 3px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.afmax-home-content {
	min-width: 0;
	padding: 34px clamp(22px, 4vw, 50px) 64px;
	display: grid;
	align-content: start;
	gap: 22px;
}
.afmax-page-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line-soft);
}
.afmax-page-head > div { display: grid; gap: 5px; }
.afmax-page-head h1 { font-size: clamp(24px, 3vw, 34px); line-height: 1.05; font-weight: 780; letter-spacing: -.04em; }
.afmax-page-head p { max-width: 600px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.afmax-eyebrow { color: var(--brand-lift); font-size: 9px; font-weight: 820; letter-spacing: .16em; }
.afmax-project-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}
.afmax-project-stats > div {
	display: grid;
	gap: 2px;
	padding: 13px 15px;
	border: 1px solid var(--line);
	border-radius: 11px;
	background: var(--panel);
}
.afmax-project-stats strong { font-size: 19px; font-weight: 780; }
.afmax-project-stats span { color: var(--faint); font-size: 9.5px; font-weight: 650; }
.afmax-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.afmax-project-card {
	min-height: 222px;
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: 15px;
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--panel);
	box-shadow: var(--shadow-sm);
	transition: transform .15s ease, border-color .15s ease;
}
.afmax-project-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 34%, var(--line)); }
.afmax-project-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.afmax-project-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 11px;
	background: #fff;
	color: var(--brand-2);
	font-size: 16px;
	font-weight: 820;
}
.afmax-project-icon img { width: 100%; height: 100%; object-fit: cover; }
.afmax-project-card__body { min-width: 0; display: grid; align-content: start; gap: 5px; }
.afmax-project-card__body h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 740; letter-spacing: -.02em; }
.afmax-project-card__body > p:last-child { color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.afmax-project-card__plan { color: var(--faint) !important; font-size: 9px !important; font-weight: 780; letter-spacing: .12em; }
.afmax-project-card__actions { display: flex; gap: 7px; }
.afmax-project-card__actions .afmax-btn:first-child { flex: 1 1 auto; }
.afmax-settings-card {
	width: min(760px, 100%);
	display: grid;
	gap: 18px;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--panel);
	box-shadow: var(--shadow-sm);
}
.afmax-settings-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 15px; border-bottom: 1px solid var(--line-soft); }
.afmax-settings-card__head > div { display: grid; gap: 3px; }
.afmax-settings-card__head h2 { font-size: 16px; font-weight: 740; }
.afmax-settings-card__head p,
.afmax-settings-card__head > span { color: var(--faint); font-size: 10.5px; }
.afmax-settings-card__foot { display: flex; justify-content: flex-end; padding-top: 2px; }
.afmax-billing-list { display: grid; gap: 8px; }
.afmax-billing-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: 12px;
	align-items: center;
	padding: 12px;
	border: 1px solid var(--line-soft);
	border-radius: 10px;
	background: var(--bg);
}
.afmax-billing-row > div { min-width: 0; }
.afmax-billing-row b { font-size: 12px; font-weight: 690; }
.afmax-billing-row small { display: block; margin-top: 2px; color: var(--faint); font-size: 9.5px; }
.afmax-billing-row > strong { font-size: 12px; font-weight: 720; }

/* Editor responsiveness: keep the tool rail available; turn only the inspector
   into a drawer. The old layout hid every Studio tool on narrow laptops. */
@media (max-width: 1120px) {
	.afmax-body { grid-template-columns: 64px minmax(0, 1fr); }
	.afmax-panel {
		position: absolute;
		inset: 0 0 0 auto;
		z-index: 14;
		width: min(330px, calc(100vw - 64px));
		transform: translateX(101%);
		transition: transform .2s ease;
		box-shadow: var(--shadow);
	}
	.afmax-panel[data-open="true"] { transform: none; }
	.afmax-panel-toggle { display: inline-flex; }
}
@media (max-width: 760px) {
	.afmax-body { grid-template-columns: 54px minmax(0, 1fr); }
	.afmax-toolrail { padding-inline: 5px; }
	.afmax-toolrail__item { min-height: 48px; }
	.afmax-toolrail__item small { font-size: 8.5px; }
	.afmax-panel { width: min(330px, calc(100vw - 54px)); }
	.afmax-canvas__bar { flex-wrap: wrap; }
	.afmax-canvas__meta { margin-left: 0; }
	.afmax-stage { padding: 7px; }
	.afmax-home-shell { grid-template-columns: 1fr; }
	.afmax-home-nav { position: static; min-height: auto; grid-template-rows: auto auto; padding: 12px; border-right: 0; border-bottom: 1px solid var(--line); }
	.afmax-home-nav nav { grid-template-columns: repeat(3, minmax(0,1fr)); }
	.afmax-home-nav__item { justify-content: center; padding-inline: 6px; }
	.afmax-home-nav__item span { display: none; }
	.afmax-home-nav__bottom { display: none; }
	.afmax-home-content { padding: 22px 14px 48px; }
	.afmax-page-head { align-items: flex-start; }
	.afmax-project-stats { gap: 6px; }
	.afmax-project-stats > div { padding: 10px; }
	.afmax-projects { grid-template-columns: 1fr; }
	.afmax-billing-row { grid-template-columns: 1fr auto; }
	.afmax-billing-row .afmax-btn { grid-column: 1 / -1; }
}
.afmax-swatch input[type="color"] { appearance: auto; -webkit-appearance: auto; }

/* ================================================================== 2.2.0
   Immersive account + Studio cleanup. These rules intentionally live last so
   older component declarations cannot reintroduce constrained account widths. */
.afmax-app {
	inset: 0;
}
.afmax-app[data-theme="dark"] {
	--bg: #07101a;
	--panel: #0c1723;
	--panel-2: #102030;
	--raised: #14283a;
	--raised-2: #183149;
	--line: #1c3850;
	--line-soft: #142b3d;
	--stage: #07111c;
}
.afmax-app[data-theme="light"] {
	--bg: #f2f9fd;
	--panel: #ffffff;
	--panel-2: #f7fbfe;
	--raised: #eaf5fb;
	--raised-2: #dff1fa;
	--line: #d5e8f2;
	--line-soft: #e3f0f6;
	--stage: #eaf3f8;
}
.afmax-top {
	background: color-mix(in srgb, var(--panel) 92%, var(--brand) 8%);
	box-shadow: 0 1px 0 var(--line);
}
.afmax-home {
	background:
		radial-gradient(circle at 82% 2%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 28rem),
		linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, var(--brand) 4%), var(--bg));
}
.afmax-home-shell {
	width: 100%;
	max-width: none;
	margin: 0;
	min-height: 100%;
}
.afmax-home-nav {
	background: color-mix(in srgb, var(--panel) 94%, var(--brand) 6%);
}
.afmax-home-content {
	width: 100%;
	max-width: none;
	padding-inline: clamp(22px, 4vw, 64px);
}
.afmax-project-stats > div,
.afmax-project-card,
.afmax-settings-card {
	background: color-mix(in srgb, var(--panel) 96%, var(--brand) 4%);
}
.afmax-settings-card { width: 100%; max-width: none; }
.afmax-home-avatar svg { width: 18px; height: 18px; }
.afmax-project-icon > span { display: grid; place-items: center; width: 100%; height: 100%; }
.afmax-project-icon > span svg { width: 20px; height: 20px; }
.afmax-code {
	width: 100%;
	min-height: 180px !important;
	padding: 12px !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
	font-size: 11px !important;
	line-height: 1.6 !important;
	tab-size: 2;
}

@media (max-width: 760px) {
	.afmax-home-nav {
		grid-template-rows: auto auto;
		gap: 9px;
		padding: 10px 10px 8px;
	}
	.afmax-home-nav nav {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		padding-bottom: 2px;
		scrollbar-width: none;
	}
	.afmax-home-nav nav::-webkit-scrollbar { display: none; }
	.afmax-home-nav__item {
		flex: 0 0 auto;
		justify-content: flex-start;
		min-width: max-content;
		padding-inline: 10px;
	}
	.afmax-home-nav__item span { display: inline; }
	.afmax-home-content { padding: 20px 12px 42px; gap: 16px; }
	.afmax-page-head { flex-direction: column; align-items: stretch; }
	.afmax-page-head .afmax-btn { align-self: flex-start; }
	.afmax-project-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
	.afmax-project-stats span { font-size: 8.5px; }
	.afmax-settings-card { padding: 16px; }
}
@media (max-width: 480px) {
	.afmax-top { gap: 6px; padding-inline: 7px; }
	.afmax-back span, .afmax-top-actions .afmax-btn:not(.afmax-btn--icon) span { display: none; }
	.afmax-home-nav__head { grid-template-columns: 34px minmax(0,1fr); }
	.afmax-home-avatar { width: 34px; height: 34px; }
	.afmax-project-stats { gap: 5px; }
	.afmax-project-stats > div { padding: 9px 8px; }
	.afmax-project-card__actions { flex-wrap: wrap; }
	.afmax-project-card__actions .afmax-btn { flex: 1 1 100%; }
}

/* ================================================================== 2.2.5
   Billing integrity + readable account receipts. */
.afmax-toast {
	width: max-content;
	max-width: min(520px, calc(100vw - 28px));
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: normal;
	line-height: 1.4;
	text-align: center;
	border-radius: 14px;
}
.afmax-field--wide { grid-column: 1 / -1; }
.afmax-settings-card__subhead {
	grid-column: 1 / -1;
	display: grid;
	gap: 4px;
	padding-top: 16px;
	border-top: 1px solid var(--line-soft);
}
.afmax-settings-card__subhead h3 { font-size: 13px; font-weight: 740; }
.afmax-settings-card__subhead p { color: var(--faint); font-size: 10.5px; line-height: 1.5; }
.afmax-order-title { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.afmax-order-badge {
	display: inline-flex;
	align-items: center;
	min-height: 20px;
	padding: 0 7px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--raised);
	color: var(--faint);
	font-size: 8.5px;
	font-weight: 760;
	text-transform: uppercase;
	letter-spacing: .06em;
}
.afmax-payment-note {
	grid-template-columns: minmax(0,1fr) auto;
	align-items: center;
}
.afmax-payment-note h2 { margin: 0 0 5px; font-size: 15px; font-weight: 740; }
.afmax-payment-note p { max-width: 780px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.afmax-order-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 18px; }
.afmax-order-modal__backdrop { position: absolute; inset: 0; background: rgba(3,13,22,.62); backdrop-filter: blur(5px); }
.afmax-order-modal__card {
	position: relative;
	z-index: 1;
	width: min(680px, 100%);
	max-height: min(760px, calc(100vh - 36px));
	overflow: auto;
	display: grid;
	gap: 18px;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: var(--panel);
	box-shadow: var(--shadow);
}
.afmax-order-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.afmax-order-modal__head > div { display: grid; gap: 4px; }
.afmax-order-modal__head h2 { font-size: 21px; font-weight: 760; letter-spacing: -.025em; }
.afmax-order-modal__head p { color: var(--muted); font-size: 11px; }
.afmax-order-modal__facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.afmax-order-modal__facts > div { display: grid; gap: 3px; padding: 11px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--bg); }
.afmax-order-modal__facts span { color: var(--faint); font-size: 9px; font-weight: 680; text-transform: uppercase; letter-spacing: .07em; }
.afmax-order-modal__facts strong { min-width: 0; overflow-wrap: anywhere; font-size: 12px; font-weight: 720; }
.afmax-order-modal__section { display: grid; gap: 9px; }
.afmax-order-modal__section h3 { font-size: 13px; font-weight: 740; }
.afmax-order-line { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.afmax-order-line b { font-size: 11.5px; font-weight: 680; }
.afmax-order-line small { display: block; margin-top: 2px; color: var(--faint); font-size: 9.5px; }
.afmax-order-line strong { font-size: 11.5px; font-weight: 720; }
.afmax-order-address { white-space: pre-line; color: var(--muted); font-size: 11.5px; line-height: 1.6; }
.afmax-order-modal__section > small { color: var(--faint); font-size: 10px; overflow-wrap: anywhere; }
@media (max-width: 640px) {
	.afmax-field--wide { grid-column: auto; }
	.afmax-payment-note { grid-template-columns: 1fr; }
	.afmax-payment-note .afmax-btn { justify-self: start; }
	.afmax-order-modal { padding: 8px; }
	.afmax-order-modal__card { max-height: calc(100vh - 16px); padding: 16px; border-radius: 14px; }
	.afmax-order-modal__facts { grid-template-columns: 1fr; }
}

/* Layers: the page as a list. Indentation carries the nesting, because a panel
   320px wide has no room for a tree of collapsing boxes. */
.afmax-layers{display:flex;flex-direction:column;gap:1px}
.afmax-layer{display:flex;align-items:baseline;gap:8px;width:100%;padding:7px 10px;border:0;border-radius:7px;background:transparent;text-align:left;cursor:pointer;font:inherit;color:inherit;transition:background .12s}
.afmax-layer:hover{background:rgba(127,127,127,.10)}
.afmax-layer.is-selected{background:rgba(11,111,209,.12);box-shadow:inset 2px 0 0 var(--afmax-accent,#0B6FD1)}
.afmax-layer--section{font-weight:700;margin-top:6px}
.afmax-layer--section:first-child{margin-top:0}
.afmax-layer__kind{flex:0 0 auto;font-size:11.5px}
.afmax-layer--section .afmax-layer__kind{font-size:12.5px}
.afmax-layer__text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.6;font-size:11px}
.afmax-layers__note{margin:12px 2px 0;opacity:.55;font-size:11px;line-height:1.55}

/* A selected layer opens in place: its properties and its controls appear under
   the row rather than in a separate pane, so the thing being changed and the
   controls changing it are never more than a few pixels apart. */
.afmax-layerprops{margin:4px 0 8px;padding:10px;border-radius:9px;background:rgba(127,127,127,.07);display:flex;flex-direction:column;gap:8px}
.afmax-layerprops .afmax-field{display:flex;flex-direction:column;gap:4px;margin:0}
.afmax-layerprops .afmax-field>span{font-size:11px;opacity:.7;font-weight:600}
.afmax-layerprops input,.afmax-layerprops select,.afmax-layerprops textarea{width:100%;padding:6px 8px;border-radius:7px;border:1px solid rgba(127,127,127,.28);background:transparent;color:inherit;font:inherit;font-size:12px}
.afmax-layerprops textarea{resize:vertical;line-height:1.5}
.afmax-layerbar{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px}
.afmax-layerbar__btn{width:30px;height:30px;display:grid;place-items:center;border:1px solid rgba(127,127,127,.24);border-radius:7px;background:transparent;color:inherit;cursor:pointer;font-size:13px;line-height:1;transition:background .12s,border-color .12s}
.afmax-layerbar__btn:hover{background:rgba(127,127,127,.12)}
.afmax-layerbar__btn.is-danger:hover{border-color:#b02a21;color:#b02a21}
.afmax-layeradd{width:100%;padding:6px 8px;border-radius:7px;border:1px solid rgba(127,127,127,.28);background:transparent;color:inherit;font:inherit;font-size:12px;margin-bottom:10px}

/* ==========================================================================
   Studio: sharp, atomic, one job per control.
   ==========================================================================
   Loaded last so it settles the design language over everything above it,
   rather than 82 individual radius declarations being hunted down one by one.

   Three rules, applied without exception:

     1. Corners are square. A rounded control reads as decoration; a square one
        reads as a tool. An editor is a workshop, not a landing page.
     2. A button says what it does, in one line, and nothing else. Explanation
        lives above it as a hint, so the eye reads the reason then the action
        instead of parsing a sentence inside a target it is trying to hit.
     3. Controls share one height and one border, so a row of them is a row
        rather than an assortment.
*/

.afmax-app,
.afmax-app * { border-radius: 0 !important; }

/* Photography and avatars are content, not chrome, and keep their shape. */
.afmax-app img[class*="avatar"],
.afmax-app .afmax-swatch { border-radius: 999px !important; }

/* ---- Controls ---------------------------------------------------------- */

.afmax-app .afmax-btn {
	min-height: 30px;
	padding: 0 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px solid var(--line);
	transition: background .12s, border-color .12s, color .12s;
}
.afmax-app .afmax-btn--block { width: 100%; }
.afmax-app .afmax-btn--icon { width: 30px; padding: 0; }

/* The reason above, the action below. Never both inside the target. */
.afmax-app .afmax-hint {
	margin: 0 0 6px;
	font-size: 11px;
	line-height: 1.5;
	opacity: .62;
}

.afmax-app input,
.afmax-app select,
.afmax-app textarea {
	min-height: 30px;
	font-size: 12px;
	border: 1px solid var(--line);
	background: transparent;
	color: inherit;
}
.afmax-app textarea { min-height: 64px; line-height: 1.5; padding: 7px 9px; }

/* ---- Panel plumbing ---------------------------------------------------- */

/* A grid column sizes to its content unless told otherwise, which is how a
   long layer name pushed the whole panel sideways instead of being clipped. */
.afmax-app .afmax-panel__body { grid-template-columns: minmax(0, 1fr); }
.afmax-app .afmax-panel__body > * { min-width: 0; }

.afmax-app .afmax-loading {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 28px 0;
	font-size: 12px;
	opacity: .6;
}

/* ---- Layers ------------------------------------------------------------ */

.afmax-app .afmax-layers {
	display: grid;
	min-width: 0;
	gap: 10px;
}
.afmax-app .afmax-layer-group {
	min-width: 0;
	border: 1px solid var(--line);
	background: var(--panel);
}
.afmax-app .afmax-layer-group__head {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) auto;
	min-height: 52px;
	background: var(--panel-2);
}
.afmax-app .afmax-layer-group__toggle,
.afmax-app .afmax-layer-toggle {
	display: grid;
	place-items: center;
	width: 32px;
	min-width: 32px;
	padding: 0;
	border: 0;
	border-right: 1px solid var(--line);
	background: transparent;
	color: var(--muted);
	font: 600 15px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
	cursor: pointer;
}
.afmax-app .afmax-layer-group__toggle:hover,
.afmax-app .afmax-layer-toggle:hover { background: var(--raised-2); color: var(--ink); }
.afmax-app .afmax-layer-group__select {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	align-items: center;
	gap: 9px;
	min-width: 0;
	padding: 8px 10px;
	border: 0;
	background: transparent;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.afmax-app .afmax-layer-group__select.is-selected { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.afmax-app .afmax-layer-group__index {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--line);
	color: var(--faint);
	font: 700 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.afmax-app .afmax-layer-group__title { display: grid; min-width: 0; gap: 2px; }
.afmax-app .afmax-layer-group__title b {
	overflow: hidden;
	font-size: 11px;
	font-weight: 750;
	letter-spacing: .055em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}
.afmax-app .afmax-layer-group__title small {
	overflow: hidden;
	color: var(--faint);
	font-size: 9px;
	letter-spacing: .035em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}
.afmax-app .afmax-layer-group__status {
	align-self: center;
	margin-right: 8px;
	padding: 3px 5px;
	border: 1px solid var(--line);
	color: var(--faint);
	font-size: 8px;
	font-weight: 750;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.afmax-app .afmax-layer-group__body { min-width: 0; padding: 7px; border-top: 1px solid var(--line); }
.afmax-app .afmax-layer-group__body[hidden],
.afmax-app .afmax-layer-children[hidden] { display: none; }
.afmax-app .afmax-layer-section-tools { padding: 9px; margin-bottom: 7px; border: 1px solid var(--line); background: var(--panel-2); }
.afmax-app .afmax-layer-node { min-width: 0; margin-left: calc(var(--afmax-layer-depth, 0) * 10px); }
.afmax-app .afmax-layer-node + .afmax-layer-node { border-top: 1px solid var(--line-soft); }
.afmax-app .afmax-layer-line { display: grid; grid-template-columns: 26px minmax(0, 1fr); min-width: 0; }
.afmax-app .afmax-layer-toggle { width: 26px; min-width: 26px; min-height: 34px; border-right-color: var(--line-soft); font-size: 13px; }
.afmax-app .afmax-layer-toggle--empty { cursor: default; }
.afmax-app .afmax-layer-toggle--empty:hover { background: transparent; }
.afmax-app .afmax-layer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 8px;
	row-gap: 1px;
	width: 100%;
	min-width: 0;
	min-height: 34px;
	padding: 6px 8px;
	border: 0;
	border-left: 2px solid transparent;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 11px;
	text-align: left;
	cursor: pointer;
}
.afmax-app div.afmax-layer { cursor: pointer; }
.afmax-app .afmax-layer:hover { background: var(--panel-2); }
.afmax-app .afmax-layer.is-selected {
	border-left-color: var(--brand);
	background: var(--brand-soft);
	box-shadow: none;
}
.afmax-app .afmax-layer__kind {
	grid-column: 1;
	grid-row: 1;
	overflow: hidden;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .035em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}
.afmax-app .afmax-layer__text {
	grid-column: 1;
	grid-row: 2;
	overflow: hidden;
	font-size: 10px;
	opacity: .58;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.afmax-app .afmax-layer__state {
	grid-column: 2;
	grid-row: 1 / span 2;
	padding: 2px 4px;
	border: 1px solid var(--line);
	color: var(--faint);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.afmax-app .afmax-layer.is-hidden,
.afmax-app .afmax-layer-group__select.is-hidden { opacity: .52; }
.afmax-app .afmax-layer-children { margin-left: 12px; border-left: 1px solid var(--line); }
.afmax-app .afmax-layer-editor { margin: 4px 0 8px 26px; padding: 8px; border: 1px solid var(--line); background: var(--panel-2); }
.afmax-app .afmax-layer-editor .afmax-layerprops { margin: 0 0 8px; padding: 0; border: 0; }

/* The move controls are one instrument, so they sit as one strip of keys. */
.afmax-app .afmax-layerbar { gap: 0; margin-bottom: 8px; }
.afmax-app .afmax-layerbar__btn {
	width: 30px;
	height: 30px;
	border: 1px solid var(--line);
	margin-left: -1px;
}
.afmax-app .afmax-layerbar__btn:first-child { margin-left: 0; }
.afmax-app .afmax-layerbar__btn:hover { position: relative; z-index: 1; }

.afmax-app .afmax-layerprops {
	padding: 10px;
	border: 1px solid var(--line);
	background: transparent;
	gap: 9px;
}

/* ==========================================================================
   Studio, settled. Loaded last, so it is the final word on the palette.
   ==========================================================================
   The colours were defined four times over the life of this file — a base set,
   a light set, then a second dark and light pair appended later with different
   values. Nothing was wrong with any one of them; the problem was that each
   later block only redefined some of the tokens, so panels came from one
   palette and their borders from another. That is what "the colours are not
   aligned" looks like from the inside.
   Everything below restates the whole set, once, in one place.
*/

.afmax-app,
.afmax-app[data-theme="dark"] {
	--bg:        #1A1A1A;   /* the shell behind everything */
	--stage:     #262626;   /* the canvas surround */
	--panel:     #1E1E1E;   /* rails and panels */
	--panel-2:   #232323;   /* a panel sitting on a panel */
	--raised:    #2B2B2B;   /* inputs and rest-state controls */
	--raised-2:  #363636;   /* hover */
	--line:      #333333;
	--line-soft: #2A2A2A;
	--ink:       #EDEDED;
	--muted:     #A3A3A3;
	--faint:     #6E6E6E;
	--brand:     #146EF5;   /* one accent, used only for what is active */
	--brand-2:   #0F58C4;
	--brand-lift:#2F81F7;
	--brand-soft: rgba(20, 110, 245, .18);
}

.afmax-app[data-theme="light"] {
	--bg:        #F5F5F5;
	--stage:     #EBEBEB;
	--panel:     #FFFFFF;
	--panel-2:   #FAFAFA;
	--raised:    #F0F0F0;
	--raised-2:  #E6E6E6;
	--line:      #DEDEDE;
	--line-soft: #EAEAEA;
	--ink:       #1A1A1A;
	--muted:     #6B6B6B;
	--faint:     #949494;
}

/* One family, one scale. Mixed families across panels is the other half of
   what reads as unfinished. */
.afmax-app {
	font-family: Inter, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	color: var(--ink);
	background: var(--bg);
}
.afmax-app h1, .afmax-app h2, .afmax-app h3, .afmax-app h4 {
	font-weight: 600;
	letter-spacing: -.01em;
	margin: 0;
}
.afmax-app h1 { font-size: 15px; }
.afmax-app h2 { font-size: 13px; }
.afmax-app h3 { font-size: 12px; }

/* Section labels in a tool are signposts, not headlines: small, spaced, quiet. */
.afmax-app .afmax-panel__head b,
.afmax-app .afmax-group__title {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ---- Controls ---------------------------------------------------------- */

.afmax-app .afmax-btn {
	background: var(--raised);
	border-color: var(--line);
	color: var(--ink);
}
.afmax-app .afmax-btn:hover { background: var(--raised-2); border-color: var(--line); }
.afmax-app .afmax-btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.afmax-app .afmax-btn--primary:hover { background: var(--brand-lift); border-color: var(--brand-lift); }
.afmax-app .afmax-btn--ghost { background: transparent; }
.afmax-app .afmax-btn--ghost:hover { background: var(--raised); }

.afmax-app input,
.afmax-app select,
.afmax-app textarea {
	background: var(--raised);
	border-color: var(--line);
	color: var(--ink);
	padding: 0 9px;
}
.afmax-app input:focus,
.afmax-app select:focus,
.afmax-app textarea:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: inset 0 0 0 1px var(--brand);
}
.afmax-app ::placeholder { color: var(--faint); }

/* ---- The MAX composer -------------------------------------------------- */
/* It read as two unrelated objects because it was two unrelated objects: a
   field with its own border beside a floating square. One frame, one focus
   ring, the send key inside it. */

.afmax-app .afmax-composer {
	display: flex;
	align-items: stretch;
	gap: 0;
	border: 1px solid var(--line);
	background: var(--raised);
}
.afmax-app .afmax-composer:focus-within { border-color: var(--brand); }
.afmax-app .afmax-composer textarea,
.afmax-app .afmax-composer input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0 !important;
	background: transparent;
	box-shadow: none !important;
	padding: 9px 10px;
	resize: none;
}
.afmax-app .afmax-composer button {
	flex: 0 0 34px;
	width: 34px;
	border: 0;
	border-left: 1px solid var(--line);
	background: transparent;
	color: var(--muted);
	display: grid;
	place-items: center;
	cursor: pointer;
}
.afmax-app .afmax-composer button:hover { background: var(--brand); color: #fff; }
.afmax-app .afmax-composer button svg { width: 15px; height: 15px; }

/* ---- Rails and panels -------------------------------------------------- */

.afmax-app .afmax-toolrail {
	background: var(--panel);
	border-right: 1px solid var(--line);
}
.afmax-app .afmax-toolrail__item {
	color: var(--muted);
	border: 0;
	border-left: 2px solid transparent;
}
.afmax-app .afmax-toolrail__item:hover { color: var(--ink); background: var(--panel-2); }
.afmax-app .afmax-toolrail__item[aria-selected="true"] {
	color: var(--ink);
	background: var(--panel-2);
	border-left-color: var(--brand);
}
.afmax-app .afmax-panel { background: var(--panel); border-left: 1px solid var(--line); }
.afmax-app .afmax-panel__head { border-bottom: 1px solid var(--line); background: var(--panel); }
.afmax-app .afmax-stage { background: var(--stage); }

/* ---- Boot -------------------------------------------------------------- */
/* Studio takes a moment to fetch a project, a revision and a preview. Showing
   the empty shell while that happens is what makes a tool feel unfinished
   before it has done anything wrong. */

.afmax-boot-screen {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	gap: 22px;
	background: #0D0D0D;
	animation: afmax-boot-in .18s ease-out;
}
.afmax-boot-screen[hidden] { display: none; }
.afmax-boot-screen__mark { width: 44px; height: 44px; opacity: .96; }
.afmax-boot-screen__bar {
	width: 260px;
	height: 2px;
	background: rgba(255, 255, 255, .14);
	overflow: hidden;
}
.afmax-boot-screen__bar i {
	display: block;
	height: 100%;
	width: 40%;
	background: linear-gradient(90deg, transparent, #146EF5 45%, #6BB0FF);
	animation: afmax-boot-run 1.05s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes afmax-boot-run { from { transform: translateX(-100%); } to { transform: translateX(350%); } }
@keyframes afmax-boot-in { from { opacity: 0; } to { opacity: 1; } }

/* Conversations, customer side. A thread is a sequence, so it reads as one:
   their message and ours in the same column, ours marked by the accent rather
   than by being pushed to the other side of the panel. */
.afmax-app .afmax-tickets { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.afmax-app .afmax-thread { border: 1px solid var(--line); padding: 9px 10px; }
.afmax-app .afmax-thread__head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 7px; }
.afmax-app .afmax-thread__head b { font-size: 12px; }
.afmax-app .afmax-thread__head span { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.afmax-app .afmax-msg { padding: 6px 0 6px 9px; border-left: 2px solid var(--line); }
.afmax-app .afmax-msg.is-staff { border-left-color: var(--brand); }
.afmax-app .afmax-msg small { display: block; color: var(--faint); font-size: 10px; margin-bottom: 2px; }
.afmax-app .afmax-msg p { margin: 0; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }


/* Which part of the page the AI box is pointed at.
 *
 * Sits under the composer rather than in the panel header, because it has to be
 * read in the second before somebody presses send, not found afterwards. Turns
 * solid when a section is selected so the difference is visible at a glance
 * rather than requiring the sentence to be read. */
.afmax-chat__scope {
	display: block;
	padding: 6px 2px 0;
	font-size: 11px;
	line-height: 1.5;
	color: var(--afmax-muted, #6b7490);
}

.afmax-chat__scope.is-focused {
	color: var(--afmax-brand, #146ef5);
	font-weight: 600;
}

/* ------------------------------------------------- Studio photo search */

.afmax-photos {
	margin: 6px 0 2px;
}

.afmax-photos__body {
	padding: 8px 0 2px;
}

.afmax-photos__bar {
	display: flex;
	gap: 6px;
}

.afmax-photos__q {
	flex: 1 1 auto;
	min-width: 0;
}

.afmax-photos__grid {
	display: grid;
	/* Three across in the panel, two when it is narrow. Small enough to scan,
	   large enough to tell a photograph of a bakery from one of a kitchen. */
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 6px;
	max-height: 260px;
	overflow-y: auto;
	margin-top: 8px;
}

.afmax-photos__grid[aria-busy="true"] {
	opacity: .6;
	pointer-events: none;
}

.afmax-photos__tile {
	position: relative;
	display: block;
	padding: 0;
	border: 1px solid var(--afmax-line, #e5e7eb);
	border-radius: 6px;
	overflow: hidden;
	background: none;
	cursor: pointer;
	line-height: 0;
}

.afmax-photos__tile:hover,
.afmax-photos__tile:focus-visible {
	border-color: var(--afmax-brand, #146ef5);
	outline: none;
}

.afmax-photos__tile img {
	width: 100%;
	height: 64px;
	object-fit: cover;
	display: block;
}

.afmax-photos__tile.is-busy {
	opacity: .5;
}

/* Credit is required by nobody and worth showing anyway: the photographer
   made the picture, and a name costs one line. */
.afmax-photos__by {
	position: absolute;
	inset: auto 0 0 0;
	padding: 2px 4px;
	font-size: 9px;
	line-height: 1.3;
	color: #fff;
	background: rgba(16, 24, 47, .66);
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ===========================================================================
   MAX 7.14 — SaaS workspace and Studio surface
   ========================================================================== */

.afmax-app {
	--bg: #070913;
	--panel: #0d111d;
	--panel-2: #111727;
	--raised: #171e30;
	--raised-2: #202941;
	--line: #26304a;
	--line-soft: #1b2439;
	--ink: #f7f8fc;
	--muted: #a4aec2;
	--faint: #6f7b94;
	--brand: #199fe6;
	--brand-2: #1174d4;
	--brand-lift: #66c9ff;
	--brand-soft: rgba(25,159,230,.15);
	--stage: #080b13;
	--shadow: 0 28px 90px rgba(0,0,0,.48);
	--shadow-sm: 0 12px 36px rgba(0,0,0,.24);
	background:
		radial-gradient(circle at 74% -20%, rgba(29,130,255,.10), transparent 42rem),
		var(--bg);
}
.afmax-app[data-theme="light"] {
	--bg: #f4f6fb;
	--panel: #ffffff;
	--panel-2: #f8faff;
	--raised: #eef2f9;
	--raised-2: #e4ebf6;
	--line: #dce3ef;
	--line-soft: #e9edf5;
	--ink: #111729;
	--muted: #5d6980;
	--faint: #8791a5;
	--brand: #087fc2;
	--brand-2: #0866b5;
	--brand-lift: #169fe8;
	--brand-soft: rgba(8,127,194,.10);
	--stage: #e9edf5;
	--shadow: 0 28px 80px rgba(24,35,58,.16);
	--shadow-sm: 0 12px 34px rgba(24,35,58,.09);
}

/* Bring dimensional, purposeful corners back after the legacy square-tool
   stylesheet. Radius is now part of the component hierarchy, not decoration. */
.afmax-app .afmax-btn,
.afmax-app input,
.afmax-app select,
.afmax-app textarea,
.afmax-app .afmax-chip { border-radius: 10px !important; }
.afmax-app .afmax-frame { border-radius: 16px !important; }
.afmax-app .afmax-project-card,
.afmax-app .afmax-settings-card,
.afmax-app .afmax-project-stats > div,
.afmax-app .afmax-project-stats > button { border-radius: 18px !important; }
.afmax-app .afmax-toolrail__item,
.afmax-app .afmax-selection-head,
.afmax-app .afmax-ai-quota,
.afmax-app .afmax-layerprops { border-radius: 12px !important; }

.afmax-top {
	height: 64px;
	padding: 0 16px;
	gap: 12px;
	border-bottom-color: color-mix(in srgb,var(--line) 78%,transparent);
	background: color-mix(in srgb,var(--panel) 86%,transparent);
	backdrop-filter: blur(22px) saturate(150%);
	box-shadow: 0 1px 0 rgba(255,255,255,.025),0 10px 40px rgba(0,0,0,.12);
}
.afmax-top > b { font-size: 14px; font-weight: 720; letter-spacing: -.015em; }
.afmax-switch__btn { min-height: 40px; border-radius: 12px !important; }
.afmax-top-actions { gap: 7px; }

.afmax-token-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 5px 12px 5px 6px;
	border: 1px solid color-mix(in srgb,var(--brand) 36%,var(--line));
	border-radius: 12px !important;
	background: linear-gradient(145deg,color-mix(in srgb,var(--brand) 15%,var(--raised)),var(--raised));
	color: var(--ink);
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.12);
	transition: transform .16s ease,border-color .16s ease,background .16s ease;
}
.afmax-token-button:hover { transform: translateY(-1px); border-color: var(--brand); background: color-mix(in srgb,var(--brand) 21%,var(--raised)); }
.afmax-token-button__icon {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 9px !important;
	background: linear-gradient(145deg,var(--brand-lift),var(--brand-2));
	color: #fff;
	box-shadow: 0 6px 16px color-mix(in srgb,var(--brand) 32%,transparent);
}
.afmax-token-button__icon svg { width: 15px; height: 15px; }
.afmax-token-button__copy { display: grid; text-align: left; line-height: 1.15; }
.afmax-token-button__copy b { font-size: 11px; font-weight: 760; }
.afmax-token-button__copy small { color: var(--muted); font-size: 8.5px; }

/* Studio — the canvas is the product. Chrome recedes into glass rails while
   the live page sits on a deep, precise workspace. */
.afmax-body { grid-template-columns: 76px minmax(0,1fr) 356px; background: var(--stage); }
.afmax-toolrail {
	padding: 12px 9px;
	gap: 7px;
	border-right-color: var(--line-soft);
	background: linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 94%,#05070d));
}
.afmax-toolrail__item {
	min-height: 58px;
	border: 1px solid transparent !important;
	color: var(--faint);
}
.afmax-toolrail__item > span { width: 23px; height: 23px; }
.afmax-toolrail__item svg { width: 19px; height: 19px; }
.afmax-toolrail__item small { font-size: 9px; font-weight: 680; letter-spacing: .01em; }
.afmax-toolrail__item:hover { background: var(--raised); color: var(--ink); }
.afmax-toolrail__item[aria-selected="true"] {
	border-color: color-mix(in srgb,var(--brand) 30%,var(--line)) !important;
	background: linear-gradient(145deg,color-mix(in srgb,var(--brand) 16%,var(--raised)),var(--raised));
	color: var(--ink);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.05),0 10px 24px rgba(0,0,0,.15);
}
.afmax-toolrail__item[aria-selected="true"]::before { left: -9px; width: 3px; background: linear-gradient(var(--brand-lift),var(--brand)); box-shadow: 0 0 14px var(--brand); }
.afmax-canvas { background: var(--stage); }
.afmax-canvas__bar {
	min-height: 54px;
	padding: 8px 15px;
	background: color-mix(in srgb,var(--panel) 90%,transparent);
	backdrop-filter: blur(16px);
}
.afmax-stage {
	padding: clamp(12px,1.6vw,24px);
	background-color: var(--stage);
	background-image: radial-gradient(circle,color-mix(in srgb,var(--faint) 18%,transparent) 1px,transparent 1px),radial-gradient(circle at 50% 0,color-mix(in srgb,var(--brand) 9%,transparent),transparent 46%);
	background-size: 22px 22px,100% 100%;
}
.afmax-frame {
	overflow: hidden;
	border: 1px solid color-mix(in srgb,var(--line) 80%,#fff 8%);
	box-shadow: 0 40px 100px rgba(0,0,0,.40),0 0 0 1px rgba(255,255,255,.025);
}
.afmax-panel {
	border-left-color: var(--line-soft);
	background: linear-gradient(180deg,color-mix(in srgb,var(--panel) 96%,#17203a),var(--panel));
	box-shadow: -14px 0 44px rgba(0,0,0,.12);
}
.afmax-panel__head { min-height: 64px; padding: 12px 16px; background: transparent; }
.afmax-panel__head b { font-size: 14px !important; font-weight: 760 !important; text-transform: none !important; letter-spacing: -.02em !important; color: var(--ink) !important; }
.afmax-panel__body { padding: 16px; gap: 17px; }
.afmax-panel__foot { padding: 11px 16px; background: color-mix(in srgb,var(--panel-2) 72%,transparent); }
.afmax-chat { margin: 0 12px 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px !important; background: color-mix(in srgb,var(--raised) 58%,var(--panel)); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.afmax-chat__head { padding: 12px 13px; background: transparent; }
.afmax-chat__form { margin: 0 10px 10px; padding: 3px; border: 1px solid var(--line); border-radius: 12px !important; background: var(--bg); }
.afmax-chat__form textarea { min-height: 42px; border: 0 !important; box-shadow: none !important; background: transparent; }
.afmax-devices,.afmax-history-controls { border-radius: 12px !important; background: color-mix(in srgb,var(--bg) 78%,transparent); }
.afmax-devices button,.afmax-history-controls .afmax-btn { border-radius: 8px !important; }

/* Dashboard — full product workspace, with depth, breathing room and an
   intentional information hierarchy shared with Studio. */
.afmax-home {
	background:
		radial-gradient(circle at 86% 0,color-mix(in srgb,var(--brand) 15%,transparent),transparent 34rem),
		radial-gradient(circle at 30% 86%,rgba(87,71,255,.07),transparent 34rem),
		var(--bg);
}
.afmax-home-shell { grid-template-columns: 260px minmax(0,1fr); max-width: 1560px; }
.afmax-home-nav {
	min-height: calc(100vh - 64px);
	padding: 24px 17px;
	border-right-color: var(--line-soft);
	background: color-mix(in srgb,var(--panel) 88%,transparent);
	backdrop-filter: blur(20px);
}
.afmax-home-nav__head { padding: 6px 4px 22px; border-bottom: 1px solid var(--line-soft); }
.afmax-home-avatar {
	width: 42px;
	height: 42px;
	border-radius: 13px !important;
	background: linear-gradient(145deg,color-mix(in srgb,var(--brand) 34%,var(--raised)),var(--raised));
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.afmax-home-nav nav { gap: 6px; }
.afmax-home-nav__item,.afmax-home-nav__link { min-height: 43px; padding: 0 12px; border-radius: 11px !important; font-size: 12px; }
.afmax-home-nav__item[aria-current="page"] { border-color: color-mix(in srgb,var(--brand) 22%,var(--line)); background: linear-gradient(135deg,var(--brand-soft),var(--raised)); }
.afmax-home-content { padding: 50px clamp(28px,4.4vw,72px) 84px; gap: 28px; }
.afmax-page-head { padding-bottom: 24px; }
.afmax-page-head h1 { font-size: clamp(32px,4vw,50px) !important; font-weight: 720 !important; letter-spacing: -.055em !important; }
.afmax-page-head p { max-width: 680px; font-size: 13px; }
.afmax-eyebrow { font-size: 9px; font-weight: 780; letter-spacing: .19em; }
.afmax-project-stats { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.afmax-project-stats > div,.afmax-project-stats > button {
	min-height: 88px;
	display: grid;
	align-content: center;
	gap: 4px;
	padding: 17px 19px;
	border: 1px solid var(--line);
	background: linear-gradient(145deg,color-mix(in srgb,var(--panel) 94%,var(--brand) 6%),var(--panel));
	color: var(--ink);
	text-align: left;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.025),var(--shadow-sm);
}
.afmax-project-stats > button { cursor: pointer; border-color: color-mix(in srgb,var(--brand) 26%,var(--line)); }
.afmax-project-stats > button:hover { transform: translateY(-2px); border-color: var(--brand); }
.afmax-project-stats strong { font-size: 27px; font-weight: 720; letter-spacing: -.04em; }
.afmax-project-stats span { font-size: 10px; color: var(--muted); }
.afmax-projects { grid-template-columns: repeat(auto-fill,minmax(310px,1fr)); gap: 16px; }
.afmax-project-card {
	min-height: 258px;
	padding: 20px;
	gap: 18px;
	background: linear-gradient(145deg,color-mix(in srgb,var(--panel) 96%,var(--brand) 4%),var(--panel));
	box-shadow: inset 0 1px 0 rgba(255,255,255,.03),0 18px 48px rgba(0,0,0,.15);
}
.afmax-project-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb,var(--brand) 52%,var(--line)); box-shadow: 0 24px 60px rgba(0,0,0,.22); }
.afmax-project-icon { width: 48px; height: 48px; border-radius: 14px !important; }
.afmax-project-card__body h3 { font-size: 18px !important; font-weight: 700 !important; }
.afmax-settings-card { padding: 26px; background: linear-gradient(145deg,color-mix(in srgb,var(--panel) 97%,var(--brand) 3%),var(--panel)); box-shadow: inset 0 1px 0 rgba(255,255,255,.025),var(--shadow-sm); }
.afmax-billing-row { border-radius: 12px !important; background: color-mix(in srgb,var(--bg) 72%,var(--panel)); }

/* Token wallet and one-time-payment confirmation. */
.afmax-token-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 18px; }
.afmax-token-modal__card {
	position: relative;
	z-index: 1;
	width: min(760px,100%);
	max-height: calc(100vh - 36px);
	overflow: auto;
	border: 1px solid color-mix(in srgb,var(--brand) 24%,var(--line));
	border-radius: 24px !important;
	background: radial-gradient(circle at 84% 0,color-mix(in srgb,var(--brand) 18%,transparent),transparent 22rem),var(--panel);
	box-shadow: 0 44px 130px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.06);
}
.afmax-token-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--line);
	border-radius: 10px !important;
	background: var(--raised);
	color: var(--muted);
	cursor: pointer;
}
.afmax-token-modal__close svg { width: 15px; height: 15px; }
.afmax-token-modal__body { display: grid; gap: 15px; padding: clamp(28px,5vw,52px); }
.afmax-token-modal__body h2 { max-width: 620px; font-size: clamp(28px,4.4vw,45px) !important; line-height: 1.02; font-weight: 720 !important; letter-spacing: -.05em !important; }
.afmax-token-modal__intro { max-width: 610px; color: var(--muted); font-size: 13px; }
.afmax-token-balance { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px !important; background: color-mix(in srgb,var(--raised) 72%,transparent); }
.afmax-token-balance span { color: var(--muted); font-size: 11px; }
.afmax-token-balance strong { font-size: 22px; font-weight: 740; }
.afmax-token-packs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.afmax-token-pack {
	position: relative;
	min-height: 190px;
	display: grid;
	place-items: start;
	align-content: end;
	gap: 4px;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: 17px !important;
	background: linear-gradient(145deg,var(--raised),color-mix(in srgb,var(--panel) 86%,#000));
	color: var(--ink);
	text-align: left;
	cursor: pointer;
	transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.afmax-token-pack:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: 0 20px 48px rgba(0,0,0,.24); }
.afmax-token-pack.is-best { border-color: color-mix(in srgb,var(--brand) 50%,var(--line)); background: linear-gradient(145deg,color-mix(in srgb,var(--brand) 17%,var(--raised)),var(--raised)); }
.afmax-token-pack__spark { position: absolute; top: 18px; left: 18px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px !important; background: var(--brand-soft); color: var(--brand-lift); }
.afmax-token-pack__spark svg { width: 17px; height: 17px; }
.afmax-token-pack__badge { position: absolute; top: 18px; right: 14px; color: var(--brand-lift); font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.afmax-token-pack strong { font-size: 30px; line-height: 1; font-weight: 740; letter-spacing: -.05em; }
.afmax-token-pack > span:not([class]) { color: var(--muted); font-size: 10px; }
.afmax-token-pack > b { margin-top: 8px; font-size: 14px; font-weight: 700; }
.afmax-token-footnote { color: var(--faint); font-size: 10px; text-align: center; }
.afmax-token-unavailable { padding: 22px; border: 1px dashed var(--line); border-radius: 14px !important; color: var(--muted); text-align: center; }
.afmax-token-confirm__mark { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px !important; background: linear-gradient(145deg,var(--brand-lift),var(--brand-2)); color: #fff; box-shadow: 0 16px 34px color-mix(in srgb,var(--brand) 30%,transparent); }
.afmax-token-confirm__mark svg { width: 25px; height: 25px; }
.afmax-token-confirm__price { color: var(--brand-lift); font-size: 20px; font-weight: 720; }
.afmax-token-security { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px; align-items: start; padding: 16px; border: 1px solid var(--line); border-radius: 14px !important; background: color-mix(in srgb,var(--raised) 74%,transparent); }
.afmax-token-security > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px !important; background: color-mix(in srgb,var(--ok) 13%,transparent); color: var(--ok); }
.afmax-token-security svg { width: 17px; height: 17px; }
.afmax-token-security p { color: var(--muted); font-size: 11.5px; line-height: 1.55; }

@media (max-width:1120px) {
	.afmax-body { grid-template-columns: 70px minmax(0,1fr); }
}
@media (max-width:760px) {
	.afmax-body { grid-template-columns: 56px minmax(0,1fr); }
	.afmax-home-shell { grid-template-columns: 1fr; }
	.afmax-home-nav { min-height: auto; }
	.afmax-project-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.afmax-token-packs { grid-template-columns: 1fr; }
	.afmax-token-pack { min-height: 130px; }
	.afmax-token-button__copy { display: none; }
	.afmax-token-button { padding: 5px; }
}
@media (max-width:480px) {
	.afmax-top { padding-inline: 8px; }
	.afmax-project-stats { grid-template-columns: 1fr 1fr; }
	.afmax-project-stats > div,.afmax-project-stats > button { min-height: 74px; padding: 12px; }
	.afmax-token-modal { padding: 7px; }
	.afmax-token-modal__card { max-height: calc(100vh - 14px); border-radius: 18px !important; }
	.afmax-token-modal__body { padding: 52px 20px 24px; }
}

/* ===========================================================================
   MAX 7.15 — light-first geometric workspace
   ========================================================================== */

/* The requested language is deliberately architectural: hard edges, quiet
   borders, flat planes and one blue signal. This final rule also prevents an
   older component block from quietly restoring decorative radii. */
.afmax-app.afmax-app.afmax-app,
.afmax-app.afmax-app.afmax-app *:not(iframe),
.afmax-app.afmax-app.afmax-app *::before,
.afmax-app.afmax-app.afmax-app *::after { border-radius: 0 !important; }

.afmax-app,
.afmax-app[data-theme="light"] {
	--bg: #f3f5f8;
	--panel: #ffffff;
	--panel-2: #fafbfc;
	--raised: #f0f3f7;
	--raised-2: #e7ebf1;
	--line: #d9dee7;
	--line-soft: #e8ebf0;
	--ink: #10141c;
	--muted: #5e6878;
	--faint: #8a93a1;
	--brand: #087fc2;
	--brand-2: #075f93;
	--brand-lift: #159dde;
	--brand-soft: rgba(8,127,194,.09);
	--stage: #e8ebf0;
	--shadow: 0 22px 54px rgba(26,35,50,.12);
	--shadow-sm: 0 5px 18px rgba(26,35,50,.06);
	background: var(--bg);
}
.afmax-app[data-theme="dark"] {
	--bg: #111318;
	--panel: #171a20;
	--panel-2: #1b1f26;
	--raised: #222730;
	--raised-2: #2a303b;
	--line: #303743;
	--line-soft: #252b34;
	--ink: #f1f3f6;
	--muted: #a3aab5;
	--faint: #737d8a;
	--stage: #0e1014;
	--shadow: 0 24px 60px rgba(0,0,0,.36);
	--shadow-sm: 0 6px 20px rgba(0,0,0,.18);
	background: var(--bg);
}
.afmax-app :focus-visible { border-radius: 0 !important; }

/* Studio chrome. */
.afmax-top {
	height: 58px;
	padding: 0 14px;
	border-bottom: 1px solid var(--line);
	background: var(--panel);
	backdrop-filter: none;
	box-shadow: none;
}
.afmax-switch__btn { min-height: 34px; border-color: var(--line); background: var(--panel-2); }
.afmax-menu { padding: 0; border-color: var(--line); box-shadow: var(--shadow); }
.afmax-menu button { min-height: 42px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
.afmax-token-button {
	min-height: 34px;
	padding: 0 10px 0 0;
	gap: 9px;
	border: 1px solid var(--line);
	background: var(--panel-2);
	box-shadow: none;
}
.afmax-token-button:hover { transform: none; border-color: var(--brand); background: var(--brand-soft); }
.afmax-token-button__icon { width: 33px; height: 33px; background: var(--brand); box-shadow: none; }
.afmax-token-button__copy b { font-size: 10.5px; }.afmax-token-button__copy small { font-size: 8px; }
.afmax-btn { box-shadow: none; }

.afmax-body { grid-template-columns: 68px minmax(0,1fr) 344px; background: var(--stage); }
.afmax-toolrail { padding: 0; gap: 0; border-right: 1px solid var(--line); background: var(--panel); }
.afmax-toolrail__item {
	min-height: 62px;
	border: 0 !important;
	border-bottom: 1px solid var(--line-soft) !important;
	background: transparent;
}
.afmax-toolrail__item:hover { background: var(--panel-2); }
.afmax-toolrail__item[aria-selected="true"] { border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; background: var(--brand-soft); box-shadow: none; color: var(--brand); }
.afmax-toolrail__item[aria-selected="true"]::before { left: 0; width: 3px; background: var(--brand); box-shadow: none; }
.afmax-canvas__bar { min-height: 48px; padding: 7px 12px; background: var(--panel); backdrop-filter: none; }
.afmax-devices,.afmax-history-controls { padding: 0; gap: 0; border-color: var(--line); background: var(--panel-2); }
.afmax-devices button,.afmax-history-controls .afmax-btn { min-height: 30px; border-right: 1px solid var(--line); }
.afmax-stage {
	padding: clamp(10px,1.4vw,20px);
	background-color: var(--stage);
	background-image: linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
	background-size: 24px 24px;
}
.afmax-frame { border: 1px solid #cbd2dd; box-shadow: 12px 12px 0 color-mix(in srgb,var(--ink) 7%,transparent); }
.afmax-panel { border-left: 1px solid var(--line); background: var(--panel); box-shadow: none; }
.afmax-panel__head { min-height: 55px; padding: 10px 13px; border-bottom: 1px solid var(--line); }
.afmax-panel__body { padding: 13px; gap: 14px; }
.afmax-panel__foot { padding: 9px 13px; background: var(--panel-2); }
.afmax-chat { margin: 0 10px 10px; border-color: var(--line); background: var(--panel-2); box-shadow: none; }
.afmax-chat__form { margin: 0 8px 8px; border-color: var(--line); background: var(--panel); }
.afmax-composer { border-color: var(--line); background: var(--panel); }
.afmax-selection-head,.afmax-ai-quota,.afmax-layerprops { box-shadow: none; }

/* Dashboard shell. */
.afmax-home { background: var(--bg); }
.afmax-home-shell { grid-template-columns: 224px minmax(0,1fr); max-width: 1600px; }
.afmax-home-nav {
	min-height: calc(100vh - 58px);
	padding: 18px 14px;
	border-right: 1px solid var(--line);
	background: var(--panel);
	backdrop-filter: none;
}
.afmax-home-nav__head { padding: 4px 4px 18px; }
.afmax-home-avatar { width: 38px; height: 38px; border: 1px solid var(--line); background: var(--panel-2); box-shadow: none; }
.afmax-home-nav nav { gap: 0; border-top: 1px solid var(--line-soft); }
.afmax-home-nav__item,.afmax-home-nav__link { min-height: 42px; padding: 0 10px; border: 0; border-bottom: 1px solid var(--line-soft); }
.afmax-home-nav__item:hover,.afmax-home-nav__link:hover { background: var(--panel-2); }
.afmax-home-nav__item[aria-current="page"] { border-color: var(--line-soft); background: var(--brand-soft); color: var(--brand); }
.afmax-home-content { padding: 42px clamp(24px,4vw,64px) 72px; gap: 24px; }
.afmax-page-head { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.afmax-page-head h1 { font-size: clamp(30px,3.4vw,44px) !important; font-weight: 650 !important; letter-spacing: -.045em !important; }
.afmax-project-stats { gap: 0; border: 1px solid var(--line); }
.afmax-project-stats > div,.afmax-project-stats > button {
	min-height: 82px;
	padding: 14px 17px;
	border: 0;
	border-right: 1px solid var(--line);
	background: var(--panel);
	box-shadow: none;
}
.afmax-project-stats > :last-child { border-right: 0; }
.afmax-project-stats > button:hover { transform: none; background: var(--brand-soft); }
.afmax-projects { gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.afmax-project-card {
	min-height: 236px;
	padding: 18px;
	border: 0;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--panel);
	box-shadow: none;
}
.afmax-project-card:hover { transform: none; border-color: var(--line); background: var(--panel-2); box-shadow: none; }
.afmax-project-icon { width: 42px; height: 42px; border: 1px solid var(--line); }
.afmax-settings-card { padding: 22px; border-color: var(--line); background: var(--panel); box-shadow: none; }
.afmax-billing-row { background: var(--panel-2); }

/* Two-stage token purchase sheet: neutral pack choice, then native payment. */
.afmax-token-modal { align-items: center; padding: 18px; }
.afmax-token-modal .afmax-order-modal__backdrop { background: rgba(16,24,38,.54); backdrop-filter: blur(8px); }
.afmax-token-modal__card {
	width: min(720px,100%);
	max-height: calc(100dvh - 36px);
	border: 1px solid #cfd6e1;
	border-top: 3px solid var(--brand);
	background: var(--panel);
	box-shadow: 0 32px 90px rgba(9,18,31,.28);
}
.afmax-token-modal__close { top: 14px; right: 14px; width: 36px; height: 36px; border-color: #d7dde6; background: #f7f9fb; color: #536072; }
.afmax-token-modal__close:hover { border-color: #aab5c3; background: #eef2f6; color: #111722; }
.afmax-token-modal__body { gap: 18px; padding: 30px 32px 26px; }
.afmax-token-modal__heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-right: 48px; }
.afmax-token-modal__body h2 { max-width: 520px; margin-top: 5px; font-size: clamp(27px,3.5vw,38px) !important; font-weight: 680 !important; letter-spacing: -.045em !important; }
.afmax-token-modal__intro { max-width: 590px; margin-top: -7px; color: #667386; font-size: 12.5px; line-height: 1.55; }
.afmax-token-balance {
	min-width: 118px;
	display: grid;
	justify-items: end;
	gap: 2px;
	padding: 10px 12px;
	border: 1px solid #d7dde6;
	background: #f7f9fb;
}
.afmax-token-balance span { color: #667386; font-size: 8px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.afmax-token-balance strong { color: var(--brand); font-size: 22px; line-height: 1.05; }
.afmax-token-flow { display: grid; grid-template-columns: auto minmax(28px,1fr) auto; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid #d7dde6; background: #f7f9fb; }
.afmax-token-flow > i { height: 1px; background: #d4dae3; }
.afmax-token-flow__step { display: flex; align-items: center; gap: 8px; color: #8a95a5; }
.afmax-token-flow__step b { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #cbd3de; background: #fff; font: 700 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.afmax-token-flow__step span { font-size: 10px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }
.afmax-token-flow__step.is-active { color: #111722; }.afmax-token-flow__step.is-active b { border-color: var(--brand); background: var(--brand); color: #fff; }
.afmax-token-flow__step.is-complete { color: #4d5a6c; }.afmax-token-flow__step.is-complete b { border-color: #9dd7bd; background: #eaf8f0; color: #148452; }
.afmax-token-packs { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid #cfd6e1; background: #fff; }
.afmax-token-pack {
	min-height: 78px;
	display: grid;
	grid-template-columns: 38px minmax(0,1fr) auto 20px;
	place-items: center stretch;
	align-content: center;
	gap: 15px;
	padding: 13px 16px;
	border: 0;
	border-bottom: 1px solid #e0e5ec;
	background: #fff;
	box-shadow: none;
	transition: background .14s ease,box-shadow .14s ease;
}
.afmax-token-pack:last-child { border-bottom: 0; }
.afmax-token-pack:hover,.afmax-token-pack:focus-visible { transform: none; border-color: #e0e5ec; background: #f5faff; box-shadow: inset 3px 0 0 var(--brand); }
.afmax-token-pack__index { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #d9dfe8; background: #f7f9fb; color: #7d8999; font: 700 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .07em; }
.afmax-token-pack__quantity { display: flex; align-items: baseline; gap: 8px; }
.afmax-token-pack__quantity strong { color: #111722; font-size: 22px; font-weight: 700; letter-spacing: -.04em; }
.afmax-token-pack__quantity small { color: #667386; font-size: 8px; font-weight: 750; letter-spacing: .12em; }
.afmax-token-pack__cost { display: grid; justify-items: end; gap: 2px; }
.afmax-token-pack__cost small { color: #8a95a5; font-size: 7px; font-weight: 750; letter-spacing: .12em; }
.afmax-token-pack__price { margin: 0 !important; color: #111722; font-size: 14px !important; font-weight: 700 !important; }
.afmax-token-pack__arrow { color: var(--brand); transform: rotate(-90deg); }.afmax-token-pack__arrow svg { width: 14px; height: 14px; }
.afmax-token-footnote { color: #7d8999; font-size: 8px; font-weight: 650; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.afmax-token-confirm__summary { display: flex; align-items: end; justify-content: space-between; gap: 22px; padding: 4px 0 17px; border-bottom: 1px solid var(--line); }
.afmax-token-confirm__summary h2 { margin-top: 4px; }.afmax-token-confirm__price { color: var(--brand); font-size: 18px; white-space: nowrap; }
.afmax-token-security { grid-template-columns: 26px minmax(0,1fr); gap: 10px; align-items: center; padding: 11px 12px; border-color: #d7dde6; background: #f7f9fb; }
.afmax-token-security > span { width: 26px; height: 26px; background: #eaf8f0; color: #148452; }
.afmax-token-security p { color: #667386; font-size: 10.5px; line-height: 1.45; }
.afmax-token-checkout-status { padding: 10px 12px; border: 1px solid #d7dde6; border-left: 3px solid var(--brand); background: #f7f9fb; color: #667386; font-size: 10.5px; }
.afmax-token-checkout-status[data-tone="error"] { border-left-color: var(--danger); color: var(--danger); }
.afmax-token-pack:disabled { cursor: wait; opacity: .58; }
.afmax-token-pack[data-loading="true"] { opacity: 1; background: #f5faff; box-shadow: inset 3px 0 0 var(--brand); }
.afmax-token-modal__card.is-checkout { width: min(940px,100%); overflow: hidden; }
.afmax-token-modal__card.is-checkout .afmax-token-modal__body { gap: 12px; padding: 22px; }
.afmax-token-frame__head { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-right: 42px; }
.afmax-token-frame__head h2 { margin-top: 3px; font-size: clamp(22px,3vw,30px) !important; }
.afmax-token-frame__price { color: var(--brand); font-size: 17px; white-space: nowrap; }
.afmax-token-frame__status { min-height: 34px; display: flex; align-items: center; padding: 8px 11px; border: 1px solid #d7dde6; border-left: 3px solid var(--brand); background: #f7f9fb; color: #667386; font-size: 10.5px; }
.afmax-token-frame__status[data-tone="error"] { border-left-color: var(--danger); color: var(--danger); }
.afmax-token-frame__viewport { position: relative; height: min(610px,calc(100dvh - 250px)); min-height: 390px; overflow: hidden; border: 1px solid #cfd6e1; background: #f5f7f9; }
.afmax-token-frame { display: block; width: 100%; height: 100%; border: 0; background: #f5f7f9; }
.afmax-token-frame__loader { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: #f1f3f6; }
.afmax-token-frame__loader[hidden] { display: none; }
.afmax-token-frame__loader img { position: relative; z-index: 1; display: block; width: 38px; height: 38px; object-fit: contain; }
.afmax-app.afmax-app.afmax-app .afmax-token-frame__orbit { position: absolute; width: 68px; height: 68px; border: 2px solid #d8dee7; border-top-color: #079bd7; border-right-color:#079bd7; border-radius:50% !important; animation:afmax-token-orbit .8s linear infinite; }
.afmax-token-frame__foot { display: flex; align-items: center; justify-content: flex-start; gap: 16px; color: var(--muted); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
@keyframes afmax-token-orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .afmax-token-frame__orbit { animation-duration: 1.8s; } }
.afmax-token-methods { display: grid; gap: 8px; min-height: 44px; }
.afmax-token-method { min-height: 44px; }
.afmax-token-result {
	min-height: 390px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 10px;
	padding: clamp(24px,5vw,52px);
	border: 1px solid var(--line);
	border-top: 4px solid var(--brand);
	background: var(--panel);
}
.afmax-token-result[data-tone="success"] { border-top-color: var(--ok); }
.afmax-token-result[data-tone="cancelled"] { border-top-color: var(--muted); }
.afmax-token-result[data-tone="error"] { border-top-color: var(--danger); }
.afmax-token-result[data-tone="uncertain"] { border-top-color: #c4820a; }
.afmax-token-result__mark {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	margin-bottom: 12px;
	border: 1px solid currentColor;
	color: var(--brand);
	background: var(--brand-soft);
}
.afmax-token-result[data-tone="success"] .afmax-token-result__mark { color: var(--ok); }
.afmax-token-result[data-tone="error"] .afmax-token-result__mark { color: var(--danger); }
.afmax-token-result[data-tone="uncertain"] .afmax-token-result__mark { color: #9b6500; }
.afmax-token-result__mark svg { width: 20px; height: 20px; }
.afmax-token-result h2 { margin: 0 !important; font-size: clamp(30px,4vw,42px) !important; }
.afmax-token-result > p { max-width: 520px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.afmax-token-result__amount { margin: 10px 0 3px; color: var(--brand); font-size: clamp(22px,3vw,30px); letter-spacing: -.035em; }
.afmax-token-receipt { width: 100%; max-width: 520px; margin-top: 10px; border-top: 1px solid var(--line); }
.afmax-token-receipt > div { min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line-soft); }
.afmax-token-receipt span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.afmax-token-receipt b { overflow-wrap: anywhere; font: 650 11px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace; text-align: right; }
.afmax-token-result__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.afmax-token-result__actions .afmax-btn { min-height: 42px; padding-inline: 18px; }

@media (max-width:1120px) {
	.afmax-body { grid-template-columns: 62px minmax(0,1fr); }
}
@media (max-width:760px) {
	.afmax-top { height: 54px; }
	.afmax-body { grid-template-columns: 52px minmax(0,1fr); }
	.afmax-toolrail__item { min-height: 56px; }
	.afmax-home-shell { grid-template-columns: 1fr; }
	.afmax-home-nav { min-height: auto; padding: 10px 12px 0; border-right: 0; border-bottom: 1px solid var(--line); }
	.afmax-home-nav__head { display: none; }
	.afmax-home-nav nav { display: flex; overflow-x: auto; border-top: 0; }
	.afmax-home-nav__item { min-width: 92px; justify-content: center; border-right: 1px solid var(--line-soft); }
	.afmax-home-content { padding: 24px 14px 48px; }
	.afmax-project-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.afmax-project-stats > :nth-child(2) { border-right: 0; }.afmax-project-stats > :nth-child(-n+2) { border-bottom: 1px solid var(--line); }
	.afmax-token-modal { padding: 8px; }
	.afmax-token-modal__card { max-height: calc(100dvh - 16px); box-shadow: 8px 8px 0 rgba(9,18,31,.16); }
	.afmax-token-modal__body { padding: 26px 20px 22px; }
	.afmax-token-result { min-height: 340px; }
}
@media (max-width:480px) {
	.afmax-top { padding-inline: 7px; gap: 6px; }
	.afmax-top > b,.afmax-switch { display: none; }
	.afmax-token-button { padding-right: 0; border: 0; }.afmax-token-button__icon { width: 32px; height: 32px; }
	.afmax-home-content { padding-inline: 10px; }
	.afmax-page-head h1 { font-size: 28px !important; }
	.afmax-project-stats > div,.afmax-project-stats > button { min-height: 68px; padding: 10px; }
	.afmax-token-modal { padding: 0; }
	.afmax-token-modal__card { width: 100%; height: 100dvh; max-height: 100dvh; border: 0; box-shadow: none; }
	.afmax-token-modal__body { padding: 52px 16px 20px; }
	.afmax-token-modal__heading,.afmax-token-confirm__summary { align-items: start; }
	.afmax-token-modal__heading { display: grid; gap: 12px; padding-right: 0; }.afmax-token-balance { min-width: 0; width: 100%; display: flex; align-items: baseline; justify-content: space-between; }
	.afmax-token-flow { gap: 7px; padding: 10px; }.afmax-token-flow__step { gap: 5px; }.afmax-token-flow__step b { width: 20px; height: 20px; }.afmax-token-flow__step span { font-size: 7px; letter-spacing: .025em; }
	.afmax-token-pack { grid-template-columns: 30px minmax(0,1fr) auto 14px; gap: 8px; padding-inline: 10px; }
	.afmax-token-pack__quantity { display: grid; gap: 1px; }.afmax-token-pack__quantity strong { font-size: 18px; }
	.afmax-token-pack__cost { min-width: 58px; }.afmax-token-pack__price { font-size: 12px !important; }
	.afmax-token-confirm__summary { display: grid; gap: 10px; }.afmax-token-confirm__price { font-size: 16px; }
	.afmax-token-result { min-height: calc(100dvh - 72px); padding: 28px 18px; border-inline: 0; border-bottom: 0; }
	.afmax-token-result__actions { width: 100%; display: grid; }.afmax-token-result__actions .afmax-btn { width: 100%; }
	.afmax-token-modal__card.is-checkout .afmax-token-modal__body { height: 100%; grid-template-rows: auto auto auto minmax(0,1fr) auto; padding: 48px 8px 8px; }
	.afmax-token-frame__head { display: grid; gap: 5px; padding: 0 40px 0 4px; }
	.afmax-token-frame__price { font-size: 14px; }
	.afmax-token-frame__status { margin-inline: 0; }
	.afmax-token-frame__viewport { height: auto; min-height: 0; }
	.afmax-token-frame__foot { padding-inline: 4px; }
}