/* PosterForge v1 modular stylesheet. Cascade order is intentional. */
/* Ensure the HTML hidden attribute always wins over component display rules. */
[hidden] { display: none !important; }

:root {
  --bg: #0b0d12;
  --panel: #141821;
  --panel-2: #1b202b;
  --panel-3: #222836;
  --text: #f4f6fb;
  --muted: #a7afc0;
  --border: #2e3544;
  --accent: #18c5c8;
  --accent-2: #3b82f6;
  --danger: #ff5f6d;
  --warning: #ffbf47;
  --success: #4ed39a;
  --shadow: 0 20px 60px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
input, select, textarea { width: 100%; color: var(--text); background: #0f131b; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; outline: none; }
input[type="checkbox"], input[type="radio"] {
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0;
  flex-shrink: 0;
  accent-color: var(--accent);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(24,197,200,.22); }
input[type="checkbox"]:focus, input[type="radio"]:focus { box-shadow: none; }
textarea { resize: vertical; }
label { display: grid; gap: 7px; color: #d9deea; font-size: .86rem; }
h1,h2,h3,h4,h5,p { margin-top: 0; }
h1 { font-size: 2.25rem; margin-bottom: 10px; }
h2 { margin-bottom: 0; }
h3 { font-size: 1.28rem; margin-bottom: 7px; }
h4 { margin-bottom: 12px; }
h5 { margin: 12px 0 8px; }
a { color: inherit; text-decoration: none; }
.muted { color: var(--muted); }
.tiny { font-size: .74rem; }
.small-text { font-size: .84rem; }
.eyebrow { color: #969fb2; font-size: .68rem; letter-spacing: .14em; font-weight: 800; margin-bottom: 6px; }
.field-label { margin-bottom: 7px; }
.top-gap { margin-top: 18px; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 30% 10%, rgba(24,197,200,.18), transparent 35%), var(--bg); }
.login-card { width: min(460px, 100%); padding: 42px; border: 1px solid var(--border); border-radius: 22px; background: rgba(20,24,33,.96); box-shadow: var(--shadow); }
.brand-mark { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 18px; background: #ffffff; color: transparent; font-size: 0; font-weight: 900; margin-bottom: 22px; overflow: hidden; box-shadow: 0 12px 28px rgba(14,168,171,.22); }
.brand-mark.small { width: 48px; height: 48px; border-radius: 14px; margin: 0; font-size: 0; }
.brand-logo { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.discord-button, .primary-button, .secondary-button, .ghost-button, .danger-button, .tool-button, .icon-button { border: 0; border-radius: 9px; padding: 10px 14px; color: white; font-weight: 700; }
.discord-button { width: 100%; margin-top: 18px; background: var(--accent-2); display: flex; align-items: center; justify-content: center; gap: 10px; }
.dev-pill, .warning-chip { display: inline-flex; align-items: center; border-radius: 999px; font-size: .63rem; letter-spacing: .08em; font-weight: 900; padding: 5px 8px; }
.dev-pill { background: rgba(255,255,255,.18); }
.warning-chip { color: #261800; background: var(--warning); }
.primary-button { background: var(--accent); }
.secondary-button { background: var(--panel-3); border: 1px solid #41495a; }
.ghost-button { background: transparent; border: 1px solid var(--border); color: #dfe4ef; }
.danger-button { background: rgba(255,95,109,.14); color: #ff8b96; border: 1px solid rgba(255,95,109,.35); }
.icon-button { background: var(--panel-3); padding: 8px 11px; min-width: 36px; }
.tool-button { width: 100%; text-align: left; margin-bottom: 7px; background: var(--panel-2); border: 1px solid var(--border); }
button:disabled { opacity: .45; cursor: not-allowed; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 238px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 18px 14px; background: #0e1118; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.brand-row { display: flex; align-items: center; gap: 11px; padding: 5px 7px 22px; }
.brand-row span { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; }
.sidebar nav { display: grid; gap: 5px; }
.sidebar nav button { background: transparent; color: #aeb6c7; border: 0; padding: 11px 12px; border-radius: 9px; text-align: left; font-weight: 700; }
.sidebar nav button:hover, .sidebar nav button.active { background: var(--panel-2); color: white; }
.sidebar-bottom { margin-top: auto; padding: 12px 6px 4px; }
.workspace-switcher { display: grid; gap: 6px; margin-bottom: 10px; }
.workspace-switcher select { width: 100%; }
.user-summary { padding: 12px 0; font-size: .82rem; color: var(--muted); }
.user-summary strong { display: block; color: white; margin-bottom: 3px; }
.sidebar-bottom .ghost-button { width: 100%; }
.workspace { min-width: 0; }
.topbar { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 28px; border-bottom: 1px solid var(--border); background: rgba(11,13,18,.92); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px); }
.status-chip { display: inline-flex; align-items: center; gap: 8px; color: #bdc5d4; padding: 8px 11px; border: 1px solid var(--border); border-radius: 999px; font-size: .78rem; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px var(--success); }
.view { display: none; padding: 28px; }
.view.active { display: block; }
.screen { display: none; }
.screen.active { display: block; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 20px; }
.section-heading p { color: var(--muted); margin-bottom: 0; max-width: 760px; }
.section-heading.compact { margin-bottom: 14px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.template-card, .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; }
.template-card { overflow: hidden; }
.template-thumb { height: 245px; display: grid; place-items: center; background-color: #10141c; background-image: linear-gradient(45deg,#1c2230 25%,transparent 25%),linear-gradient(-45deg,#1c2230 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1c2230 75%),linear-gradient(-45deg,transparent 75%,#1c2230 75%); background-size: 20px 20px; background-position: 0 0,0 10px,10px -10px,-10px 0; }
.template-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.template-meta { padding: 15px; }
.template-meta h4 { margin-bottom: 5px; }
.template-actions { display: flex; gap: 7px; margin-top: 13px; }
.panel { padding: 18px; }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid { display: grid; gap: 12px; margin-bottom: 16px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.form-grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.compact-grid { gap: 8px; }
.button-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 13px; }
.button-row.end { justify-content: flex-end; }
.inline-status { margin-top: 12px; color: var(--muted); font-size: .84rem; }
.stack-list { display: grid; gap: 8px; }
.list-item { display: flex; justify-content: space-between; gap: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 11px; background: #11151d; }
.empty-state { padding: 20px; color: var(--muted); border: 1px dashed var(--border); border-radius: 10px; text-align: center; }
.mapper-panel { margin-top: 16px; }
.sheet-preview-wrap { overflow: auto; max-height: 380px; border: 1px solid var(--border); border-radius: 10px; margin: 15px 0; }
.sheet-table { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: .78rem; }
.sheet-table th, .sheet-table td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 7px 9px; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.sheet-table th { position: sticky; top: 0; background: #252c3a; z-index: 2; }
.sheet-table .row-number { position: sticky; left: 0; background: #202633; color: #9ba5b7; font-weight: 800; z-index: 1; }
.mapping-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: 10px; }
.mapping-row { background: #10141c; border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.record-preview { margin-top: 15px; display: grid; gap: 9px; }
.record-card { border: 1px solid var(--border); background: #10141c; border-radius: 10px; padding: 12px; }
.record-card.failed { border-color: rgba(255,95,109,.45); }
.record-card.success { border-color: rgba(78,211,154,.35); }
.record-card pre { white-space: pre-wrap; color: #bec6d5; font-size: .76rem; margin-bottom: 0; }
.toggle-row { display: flex; grid-template-columns: auto 1fr; align-items: center; gap: 9px; margin: 12px 0; }
.toggle-row input { width: auto; }
.divider { border-top: 1px solid var(--border); margin: 16px 0; }

.toast {
  position: fixed;
  z-index: 9999;
  top: 84px;
  right: 18px;
  bottom: auto;
  left: auto;
  width: fit-content;
  max-width: min(380px, calc(100vw - 36px));
  min-width: 0;
  height: auto;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid #414a5b;
  color: #eaf1f5;
  background: #242b38;
  box-shadow: var(--shadow);
  font-size: 12px;
  line-height: 1.45;
  pointer-events: none;
}

.toast.error { border-color: rgba(255,95,109,.6); background: #3b2028; color: #ffd7dc; }
.toast.success { border-color: rgba(78,211,154,.5); background: #173529; color: #bbf7d0; }

dialog .toast {
  position: fixed;
  top: 84px;
  right: 18px;
  bottom: auto;
  height: auto;
}

dialog { color: var(--text); border: 0; padding: 0; background: transparent; max-width: none; }
dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
.dialog-card { width: min(560px, calc(100vw - 28px)); padding: 22px; border-radius: 16px; border: 1px solid var(--border); background: var(--panel); box-shadow: var(--shadow); display: grid; gap: 14px; }
.dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dialog-heading h3 { margin-bottom: 0; }
.form-error { border: 1px solid rgba(255,95,109,.55); background: rgba(255,95,109,.10); color: #ffd7dc; border-radius: 10px; padding: 11px 12px; line-height: 1.42; font-size: .88rem; }
button:disabled { opacity: .58; cursor: not-allowed; }

.studio-dialog { width: 100vw; height: 100vh; }
.studio-shell { width: 100vw; height: 100vh; background: var(--bg); display: grid; grid-template-rows: auto 1fr; }
.studio-header { min-height: 70px; padding: 10px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #0f1219; }
.title-input { font-size: 1.15rem; font-weight: 800; padding: 5px 8px; min-width: 300px; }
.studio-body { min-height: 0; display: grid; grid-template-columns: 220px minmax(420px,1fr) 310px; }
.component-panel, .properties-panel { padding: 15px; overflow: auto; background: #10131a; }
.component-panel { border-right: 1px solid var(--border); }
.properties-panel { border-left: 1px solid var(--border); }
.component-list { display: grid; gap: 5px; margin-bottom: 12px; }
.component-list button { width: 100%; text-align: left; color: #cbd2e0; background: #171c25; border: 1px solid var(--border); padding: 8px 9px; border-radius: 8px; }
.component-list button.active { border-color: var(--accent); background: rgba(124,92,255,.13); color: white; }
.canvas-area { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto 1fr; background: #0a0c11; }
.canvas-toolbar { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px; border-bottom: 1px solid var(--border); }
.canvas-scroller { min-height: 0; overflow: auto; display: grid; place-items: start center; padding: 28px; }
#studioCanvas { display: block; box-shadow: 0 18px 65px rgba(0,0,0,.6); touch-action: none; }
.preview-fields { display: grid; gap: 8px; }
.image-dialog .dialog-card { width: min(760px, calc(100vw - 28px)); max-height: 94vh; overflow: auto; }
#generatedPosterImage { max-width: 100%; max-height: 72vh; object-fit: contain; background: #0b0d12; }

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 190px 1fr; }
  .studio-body { grid-template-columns: 180px minmax(360px,1fr) 270px; }
  .form-grid.four { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 800px) {
  .app-shell { display: block; }
  .sidebar { position: static; width: 100%; height: auto; }
  .sidebar nav { grid-template-columns: repeat(2,1fr); }
  .sidebar-bottom { display: flex; gap: 10px; align-items: center; }
  .two-column, .form-grid.three, .form-grid.four { grid-template-columns: 1fr; }
  .studio-body { grid-template-columns: 1fr; overflow: auto; }
  .component-panel, .properties-panel { border: 0; }
  .canvas-area { min-height: 70vh; order: -1; }
  .studio-header { align-items: flex-start; }
  .title-input { min-width: 150px; max-width: 45vw; }
}
.layer-button-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
.layer-button-grid button { padding-inline: 8px; }
.component-list button .layer-position { float: right; color: #8f99ad; font-size: .68rem; }

.shape-control { margin-top: 12px; }
.shape-control .field-label { display: block; color: #d9deea; font-size: .86rem; }
.shape-preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.shape-preset { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; padding: 8px 9px; border-radius: 9px; border: 1px solid var(--border); background: #11151d; color: #cdd4e2; font-weight: 700; }
.shape-preset:hover { border-color: #505a6e; }
.shape-preset.active { border-color: var(--accent); background: rgba(124,92,255,.15); color: white; box-shadow: 0 0 0 2px rgba(124,92,255,.10); }
.shape-icon { flex: 0 0 auto; width: 20px; height: 20px; border: 2px solid currentColor; display: inline-block; }
.shape-icon.circle { border-radius: 50%; }
.shape-icon.oval { width: 24px; height: 17px; border-radius: 50%; }
.shape-icon.rounded { border-radius: 6px; }
.shape-icon.rect { border-radius: 1px; }

.template-family-card { grid-column: 1 / -1; }
.template-family-head { display: grid; grid-template-columns: minmax(190px, 280px) 1fr; min-height: 250px; }
.template-family-head .template-thumb { height: 100%; min-height: 250px; border-right: 1px solid var(--border); }
.template-family-head .template-meta { display: flex; flex-direction: column; justify-content: center; padding: 22px; }
.layout-list { border-top: 1px solid var(--border); background: #0f131a; }
.layout-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 15px; border-bottom: 1px solid rgba(48,56,70,.7); }
.layout-row:last-child { border-bottom: 0; }
.layout-row.base-layout { background: rgba(124,92,255,.055); }
.layout-details { min-width: 0; }
.layout-details strong { display: block; color: #f4f6fb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layout-details span { display: block; margin-top: 3px; font-size: .75rem; color: var(--muted); }
.layout-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.layout-actions button { padding: 7px 10px; }
.compact-dialog { width: min(500px, calc(100vw - 28px)); }
.studio-title-block { min-width: 0; }
.studio-title-block .title-input { display: block; }
.save-status { display: inline-flex; align-items: center; gap: 6px; margin: 5px 0 0 8px; font-size: .72rem; color: #aab4c7; }
.save-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6f7788; }
.save-status.saved { color: #9ce7c3; }
.save-status.saved::before { background: var(--success); }
.save-status.dirty { color: #ffd08a; }
.save-status.dirty::before { background: #ffb84d; }
.save-status.saving { color: #b9c8ff; }
.save-status.saving::before { background: #7794ff; box-shadow: 0 0 7px #7794ff; }
.save-status.error { color: #ff9da6; }
.save-status.error::before { background: var(--danger); }
#propAssetKey { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .72rem; color: #9ca7ba; background: #0c0f15; }

@media (max-width: 800px) {
  .template-family-head { grid-template-columns: 1fr; }
  .template-family-head .template-thumb { border-right: 0; border-bottom: 1px solid var(--border); }
  .layout-row { align-items: flex-start; flex-direction: column; }
  .layout-actions { justify-content: flex-start; }
}

/* Required template naming and visible reusable-design cards */
.template-actions { flex-wrap: wrap; }
.template-actions button { min-height: 40px; }
.prominent-version-button { border-color: rgba(124,92,255,.85); box-shadow: 0 0 0 2px rgba(124,92,255,.12); }
.template-explainer { margin-top: 13px; max-width: 760px; padding: 11px 12px; border: 1px solid rgba(124,92,255,.28); border-radius: 10px; background: rgba(124,92,255,.07); color: #c9d0df; font-size: .82rem; line-height: 1.45; }
.required-step { display: grid; gap: 3px; padding: 10px 12px; border-left: 3px solid var(--accent); border-radius: 7px; background: rgba(124,92,255,.08); }
.required-step strong { color: #fff; }
.required-step span { color: var(--muted); font-size: .8rem; line-height: 1.4; }
.required-mark { color: #ff8d97; font-weight: 900; }
.shared-artwork-notice { padding: 12px; border: 1px solid rgba(78,211,154,.32); border-radius: 10px; background: rgba(78,211,154,.07); color: #d6f4e6; line-height: 1.45; }
.shared-artwork-notice span { color: #a9c7b9; font-size: .8rem; }
#createSubVersionFromStudio { border-color: rgba(124,92,255,.75); }


.studio-version-navigator { display: grid; gap: 10px; }
.studio-version-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.studio-version-heading-row h4 { margin: 0 0 3px; }
.studio-version-heading-row .icon-button { flex: 0 0 auto; width: 34px; height: 34px; }
.studio-version-list { display: grid; gap: 6px; }
.studio-version-button { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px; background: #151a23; color: #cbd3e2; text-align: left; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; }
.studio-version-button:hover { border-color: #505b70; background: #1a202b; }
.studio-version-button.active { border-color: var(--accent); background: rgba(124,92,255,.16); color: #fff; box-shadow: 0 0 0 2px rgba(124,92,255,.09); }
.studio-version-button:disabled { cursor: wait; }
.studio-version-copy { min-width: 0; }
.studio-version-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-version-copy span { display: block; margin-top: 2px; color: var(--muted); font-size: .68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-version-current { color: #d8d0ff; font-size: .66rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.studio-version-empty { padding: 10px; border: 1px dashed var(--border); border-radius: 9px; color: var(--muted); font-size: .75rem; }

input:disabled, select:disabled, textarea:disabled, button:disabled {
  opacity: 1;
  color: #6f7889;
  background: #10131a;
  border-color: #252b37;
  cursor: not-allowed;
  box-shadow: none;
}
label:has(input:disabled), label:has(select:disabled), label:has(textarea:disabled), .control-disabled {
  color: #70798a;
}
label:has(input:disabled) > span:not(.locked-badge), label:has(select:disabled) > span:not(.locked-badge) { color: #70798a; }
.locked-field { position: relative; }
.locked-badge { justify-self: start; display: inline-flex; border: 1px solid #343b49; border-radius: 999px; padding: 2px 6px; color: #7f899c; background: #171b23; font-size: .61rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.compact-toggle { margin: 0; min-height: 64px; align-content: center; padding: 0 9px; border: 1px solid var(--border); border-radius: 9px; background: #10141c; }
.font-picker-button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: #0f131b; color: white; text-align: left; }
.font-picker-button:hover { border-color: #505a6e; }
.font-picker-button span:last-child { color: #9da6b8; font-size: .75rem; }
.font-browser-dialog { width: min(930px, 96vw); }
.font-browser-card { width: min(930px, 96vw); max-height: 92vh; display: grid; grid-template-rows: auto auto auto auto minmax(220px, 1fr); gap: 12px; padding: 20px; border-radius: 16px; border: 1px solid var(--border); background: var(--panel); box-shadow: var(--shadow); }
.font-browser-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) 180px auto; gap: 9px; }
.upload-font-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 13px; border-radius: 9px; border: 1px solid var(--border); background: #202634; color: white; font-weight: 800; cursor: pointer; }
.upload-font-button:hover { border-color: #58647a; }
.font-browser-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.font-browser-tabs button { border: 1px solid var(--border); border-radius: 999px; padding: 7px 11px; background: #11151d; color: #adb6c7; font-weight: 800; }
.font-browser-tabs button.active { border-color: var(--accent); color: white; background: rgba(124,92,255,.17); }
.font-list { min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); align-content: start; gap: 9px; padding-right: 3px; }
.font-card { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; border: 1px solid var(--border); border-radius: 11px; padding: 11px; background: #10141c; }
.font-card:hover { border-color: #505a6e; background: #151a23; }
.font-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(124,92,255,.11); }
.font-card-main { min-width: 0; border: 0; padding: 0; background: transparent; color: white; text-align: left; }
.font-card-sample { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.32rem; line-height: 1.35; }
.font-card-meta { display: flex; gap: 6px; align-items: center; margin-top: 4px; color: #8f99ac; font: 700 .66rem/1.2 Inter, ui-sans-serif, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.font-favourite { width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 9px; background: #161b24; color: #8993a6; }
.font-favourite.active { color: #ffd166; border-color: #7f6c35; }
.font-list-empty { grid-column: 1 / -1; padding: 28px; border: 1px dashed var(--border); border-radius: 11px; color: var(--muted); text-align: center; }
@media (max-width: 720px) {
  .font-browser-toolbar { grid-template-columns: 1fr; }
  .font-list { grid-template-columns: 1fr; }
}


.standard-field-notice { margin: 7px 0 11px; padding: 8px 9px; border: 1px solid #2a3140; border-radius: 8px; background: #121720; color: #8792a5; }
@keyframes propertiesAttention { 0% { box-shadow: 0 0 0 0 rgba(124,92,255,0); } 25% { box-shadow: 0 0 0 3px rgba(124,92,255,.28); } 100% { box-shadow: 0 0 0 0 rgba(124,92,255,0); } }
.properties-attention { border-radius: 10px; animation: propertiesAttention .85s ease-out; }
#propLabelLockedBadge[hidden], #propFieldLockedBadge[hidden] { display: none !important; }


.technical-details { margin: 10px 0 12px; border: 1px solid #2a3140; border-radius: 9px; background: #10141c; }
.technical-details > summary { padding: 9px 11px; color: #a8b1c2; font-size: .78rem; font-weight: 800; cursor: pointer; user-select: none; }
.technical-details[open] > summary { border-bottom: 1px solid #252c39; }
.technical-details > label, .technical-details > p { margin: 10px 11px; }
.technical-details input:disabled { width: 100%; }

.setup-progress { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin: 0 0 18px; }
.setup-progress span { padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px; background: #11151d; color: #818b9d; font-size: .75rem; font-weight: 800; text-align: center; }
.setup-progress span.active { border-color: rgba(124,92,255,.7); color: #fff; background: rgba(124,92,255,.14); }
.sheet-source-columns { align-items: start; }
.sheet-source-item { align-items: center; }
.sheet-source-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.detected-column-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(235px,1fr)); gap: 10px; }
.detected-column-card { min-width: 0; border: 1px solid var(--border); border-radius: 11px; padding: 12px; background: #10141c; display: grid; gap: 8px; }
.detected-column-heading { display: flex; align-items: center; gap: 8px; min-width: 0; }
.detected-column-heading > span { flex: 0 0 auto; min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: rgba(124,92,255,.16); color: #cfc7ff; font: 900 .7rem/1 ui-monospace,Consolas,monospace; }
.detected-column-heading strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sample-value-list { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.sample-value-list code { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid #303848; border-radius: 6px; padding: 3px 6px; color: #c5ccda; background: #0b0f16; font-size: .69rem; }
.detected-header-row td { background: rgba(124,92,255,.12); box-shadow: inset 0 1px 0 rgba(124,92,255,.35), inset 0 -1px 0 rgba(124,92,255,.35); }
.detected-first-row td { background: rgba(78,211,154,.07); }

.field-builder-card { width: min(640px, calc(100vw - 28px)); max-height: 92vh; overflow: auto; }
.field-kind-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.field-kind-tabs button { border: 1px solid var(--border); border-radius: 9px; padding: 9px 10px; background: #11151d; color: #9ca6b8; font-weight: 800; }
.field-kind-tabs button.active { border-color: var(--accent); background: rgba(124,92,255,.16); color: #fff; }

.studio-source-panel { display: grid; gap: 8px; }
.studio-source-panel h4 { margin-bottom: 0; }
.binding-summary { display: grid; gap: 6px; margin-top: 3px; }
.binding-summary-ok, .binding-summary-warning { padding: 7px 9px; border-radius: 8px; font-size: .75rem; font-weight: 900; }
.binding-summary-ok { border: 1px solid rgba(78,211,154,.3); background: rgba(78,211,154,.08); color: #b6f0d2; }
.binding-summary-warning { border: 1px solid rgba(255,184,77,.38); background: rgba(255,184,77,.08); color: #ffd89d; }
.standard-check-grid { display: grid; grid-template-columns: 1fr; gap: 4px; }
.standard-check { display: block; padding: 4px 6px; border-radius: 6px; color: #778294; background: #0e1218; font-size: .66rem; }
.standard-check.complete { color: #9fe3bf; }
.standard-check.pending { color: #ffd18a; }

#dataBindingProperties .shared-artwork-notice { margin-top: 8px; }
#dynamicFieldBindingControls { display: grid; gap: 9px; }
#propDateBinding { display: grid; gap: 9px; padding: 10px; border: 1px solid #343c4b; border-radius: 9px; background: #0d1118; }

@media (max-width: 800px) {
  .setup-progress { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .field-kind-tabs { grid-template-columns: 1fr; }
}

.setup-progress { grid-template-columns: repeat(5, minmax(0,1fr)); }
.setup-progress span.complete { border-color: rgba(78,211,154,.34); color: #aee8c9; background: rgba(78,211,154,.07); }
.next-step-panel { margin-top: 18px; border-color: rgba(78,211,154,.42); background: linear-gradient(180deg,rgba(78,211,154,.06),rgba(16,20,28,.96)); scroll-margin-top: 18px; }
.next-step-panel.next-step-attention {
  animation: next-step-pulse 1.4s ease-out 1;
  box-shadow: 0 0 0 1px rgba(24,197,200,.45), 0 16px 40px rgba(14,168,171,.18);
  border-color: rgba(24,197,200,.55);
}
@keyframes next-step-pulse {
  0% { transform: translateY(6px); opacity: .72; }
  40% { transform: translateY(0); opacity: 1; }
  100% { transform: none; }
}
.next-step-badge { display: inline-flex; width: fit-content; margin-bottom: 9px; padding: 5px 8px; border: 1px solid rgba(78,211,154,.38); border-radius: 999px; color: #aee8c9; background: rgba(78,211,154,.08); font-size: .68rem; font-weight: 900; letter-spacing: .06em; }
.next-step-controls { display: grid; grid-template-columns: minmax(260px,1fr) auto; gap: 12px; align-items: end; }
.next-step-controls label { margin: 0; }
.next-step-controls button { min-height: 42px; }
.next-step-empty { display: grid; gap: 12px; justify-items: start; padding: 13px; border: 1px dashed #364052; border-radius: 10px; background: #0e131b; }
.next-step-empty p { margin: 0; color: #aeb7c7; }
@media (max-width: 840px) {
  .setup-progress { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .next-step-controls { grid-template-columns: 1fr; }
}

.timezone-setup-card { margin: 14px 0 16px; padding: 13px; border: 1px solid #394256; border-radius: 11px; background: linear-gradient(180deg,rgba(124,92,255,.08),rgba(14,18,25,.96)); display: grid; gap: 9px; }
.timezone-setup-card h5 { margin: 0; }
.timezone-setup-card p { margin: 0; }
.studio-primary-actions { margin-top: 0; justify-content: flex-end; }
.canvas-toolbar { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.toolbar-menu { position: relative; }
.toolbar-menu > summary { list-style: none; cursor: pointer; border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; background: transparent; color: #dfe4ef; font-weight: 800; user-select: none; }
.toolbar-menu > summary::-webkit-details-marker { display: none; }
.toolbar-menu[open] > summary { border-color: var(--accent); color: white; }
.toolbar-popover { position: absolute; z-index: 40; top: calc(100% + 7px); right: 0; width: 260px; padding: 12px; border: 1px solid var(--border); border-radius: 11px; background: #11151d; box-shadow: var(--shadow); display: grid; gap: 4px; }
.toolbar-popover .toggle-row { margin: 3px 0; }
.arrange-grid { width: 360px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.arrange-grid button { border: 1px solid var(--border); border-radius: 8px; padding: 8px 9px; background: #191f2a; color: #dbe1ec; font-weight: 750; text-align: left; }
#propTimeBinding { display: grid; gap: 9px; padding: 10px; border: 1px solid #343c4b; border-radius: 9px; background: #0d1118; }
.generated-poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; margin-top: 14px; }
.generated-run-list { display: grid; gap: 18px; margin-top: 14px; }
.generated-run-group { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(15, 18, 26, 0.55); }
.generated-run-group.has-failures { border-color: rgba(255,191,71,.45); }
.generated-run-heading { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; }
.generated-run-heading > div { display: grid; gap: 4px; }
.generated-run-group .generated-poster-grid { margin-top: 0; }
.generated-poster-strip { display: flex; gap: 12px; margin-top: 14px; overflow-x: auto; padding-bottom: 8px; }
.generated-poster-card { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); position: relative; min-width: 0; }
.generated-poster-strip .generated-poster-card { flex: 0 0 180px; }
.generated-poster-card img { width: 100%; height: 180px; object-fit: contain; border-radius: 8px; background-color: #0f131b; background-image: linear-gradient(45deg,#1c2230 25%,transparent 25%),linear-gradient(-45deg,#1c2230 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1c2230 75%),linear-gradient(-45deg,transparent 75%,#1c2230 75%); background-size: 18px 18px; background-position: 0 0,0 9px,9px -9px,-9px 0; }
.generated-poster-meta { min-width: 0; display: grid; gap: 2px; }
.generated-poster-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.generated-poster-meta span { color: var(--muted); font-size: .7rem; line-height: 1.3; }
.generated-poster-meta .poster-who { color: #d7e0ef; font-weight: 650; }
.generated-poster-actions { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.generated-poster-actions .ghost-button,
.generated-poster-actions .danger-button { min-height: 32px; padding: 6px 8px; font-size: .72rem; }
.failure-card-top { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.run-summary .run-who { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.run-summary { padding: 13px; border: 1px solid rgba(78,211,154,.35); border-radius: 11px; background: rgba(78,211,154,.06); display: grid; gap: 8px; }
.run-summary.has-failures { border-color: rgba(255,191,71,.45); background: rgba(255,191,71,.06); }
.run-summary span { color: var(--muted); font-size: .8rem; }
.failure-card-list { display: grid; gap: 10px; }
.failure-card { display: grid; gap: 6px; padding: 12px; border: 1px solid rgba(255,191,71,.35); border-radius: 10px; background: rgba(16,19,26,.75); }
.origin-pill, .queue-pill { display: inline-flex; width: max-content; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(124,92,255,.35); background: rgba(124,92,255,.12); color: #d6c9ff; font-size: .7rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.queue-summary-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.schedule-row-snapshot { white-space: pre-wrap; max-height: 220px; overflow: auto; margin: 8px 0 0; padding: 8px; border-radius: 8px; background: #0e1118; border: 1px solid #283041; }
.compact-settings-grid { display: grid; gap: 12px; }
.warning-record { display: grid; gap: 3px; border-color: rgba(255,191,71,.42); }
.warning-record span { color: var(--muted); font-size: .76rem; }
.intrusive-warning-card { border: 2px solid var(--warning); box-shadow: 0 0 0 5px rgba(255,191,71,.12), var(--shadow); }
.stacked-actions { display: grid; gap: 9px; }
.disabled-link { opacity: .45; pointer-events: none; }
.admin-summary-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 14px; }
.stat-card { min-height: 130px; padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); display: grid; align-content: center; gap: 7px; }
.stat-card strong { font-size: 2rem; }
.stat-card span { color: var(--muted); }
@media (max-width: 850px) {
  .toolbar-popover, .arrange-grid { width: min(330px,80vw); grid-template-columns: 1fr; }
  .studio-primary-actions { justify-content: flex-start; }
}

.important-guidance { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; margin:0 0 16px; border:1px solid rgba(255,188,72,.45); background:rgba(255,188,72,.08); border-radius:10px; color:#f4e7c4; }
.important-guidance strong { flex:0 0 auto; color:#ffd27a; }
.important-guidance span { line-height:1.45; }
.compact-guidance { margin:10px 0; font-size:.88rem; }
.poster-type-badge { display:inline-flex; width:max-content; padding:4px 9px; margin:0 0 8px; border-radius:999px; border:1px solid rgba(0,231,255,.3); background:rgba(0,231,255,.08); color:#8ff4ff; font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.temporary-preview-notice { display:grid; gap:5px; padding:10px; border-radius:9px; border:1px solid rgba(124,92,255,.35); background:rgba(124,92,255,.08); margin:8px 0 12px; }
.temporary-preview-notice strong { color:#cdbfff; }
.temporary-preview-notice span { color:var(--muted); font-size:.78rem; line-height:1.4; }
.temporary-preview-notice .ghost-button { justify-self:start; margin-top:3px; }
.creator-validation-results { margin-top:10px; border:1px solid var(--border); border-radius:9px; overflow:hidden; max-height:260px; overflow-y:auto; }
.creator-validation-summary { padding:10px; background:rgba(255,255,255,.035); font-size:.82rem; }
.creator-validation-row { padding:8px 10px; border-top:1px solid var(--border); font-size:.76rem; }
.creator-validation-row strong { display:block; margin-bottom:4px; }
.creator-validation-item { display:flex; justify-content:space-between; gap:8px; padding:3px 0; }
.creator-validation-item .ok { color:#72e6a1; }
.creator-validation-item .bad { color:#ff9999; }
.creator-validation-item .pending { color:#ffd27a; }

.package-dialog-card { width: min(760px, 94vw); }
.package-layout-choices { display: grid; gap: 8px; max-height: 330px; overflow-y: auto; padding: 4px; }
.package-layout-choice { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 11px; border: 1px solid var(--border); border-radius: 10px; background: #10151e; cursor: pointer; }
.package-layout-choice input { margin-top: 3px; }
.package-layout-choice span { display: grid; gap: 3px; }
.package-layout-choice small { color: var(--muted); }
.package-layout-choice:has(input:checked) { border-color: rgba(124,92,255,.55); background: rgba(124,92,255,.08); }
.package-layout-choice:has(input:disabled) { opacity: .82; cursor: default; }
.import-package-summary { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--border); border-radius: 11px; background: #0e131b; margin-bottom: 14px; }
.import-summary-heading { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.import-summary-heading span { color: var(--muted); font-size: .8rem; }
.import-summary-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 7px; }
.import-summary-grid span { padding: 8px; border: 1px solid #313948; border-radius: 8px; color: #c9d1de; font-size: .76rem; }
.import-conflict-policy { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; }
.import-conflict-policy legend { margin-bottom: 2px; }
#exportTemplateDialog .toggle-row, #importTemplateDialog .toggle-row { margin: 10px 0; }
#importTemplateDialog .toggle-row.is-design-dependent-off { opacity: .55; }
#importTemplateDialog #importArtworkHint { display: block; margin-top: 6px; }
#textProperties label:has(#propStroke), #textProperties label:has(#propStrokeWidth) { background: rgba(255,255,255,.025); border-radius: 8px; padding: 7px; }
@media (max-width: 640px) {
  .import-summary-heading { display: grid; }
  .import-summary-grid { grid-template-columns: 1fr; }
}

.inline-value { float: right; color: var(--muted); font-size: .82rem; font-weight: 700; }
.compact-details { margin-top: 10px; border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; background: rgba(255,255,255,.015); }
.compact-details > summary { cursor: pointer; font-weight: 800; color: #dfe5f0; }
.compact-details[open] > summary { margin-bottom: 10px; }
.generated-poster-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: stretch; }
.generated-poster-actions > * { min-width: 0; }
.generated-poster-actions .danger-button { padding-inline: 13px; }
#backToGenerationTemplate { white-space: nowrap; }

.template-asset-library { display: grid; gap: 11px; }
.template-asset-upload-form { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; align-items: stretch; }
.template-asset-name-field { min-width: 0; }
.template-asset-name-field span { font-size: .76rem; font-weight: 800; color: #dce3ee; }
.template-asset-name-field input { min-width: 0; }
.template-asset-upload-form .secondary-button { width: 100%; }
.template-asset-upload-help { margin: -1px 0 1px; line-height: 1.4; }
.compact-file-picker { position: relative; display: flex; width: 100%; min-width: 0; align-items: center; justify-content: flex-start; min-height: 39px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 8px; background: #151b25; color: #dce3ee; font-size: .78rem; font-weight: 800; cursor: pointer; white-space: nowrap; overflow: hidden; }
.compact-file-picker span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.compact-file-picker:hover { border-color: #4b5870; background: #1a2230; }
.compact-file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.template-asset-library-list { display: grid; gap: 8px; max-height: 330px; overflow-y: auto; padding-right: 2px; }
.template-asset-empty { padding: 11px; border: 1px dashed #384253; border-radius: 9px; color: var(--muted); font-size: .76rem; line-height: 1.45; background: rgba(255,255,255,.015); }
.template-asset-card { display: grid; grid-template-columns: 50px minmax(0,1fr) auto auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: #0f141d; }
.template-asset-card img { width: 50px; height: 44px; object-fit: contain; border-radius: 7px; background-color: #10151d; background-image: linear-gradient(45deg,#202736 25%,transparent 25%),linear-gradient(-45deg,#202736 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#202736 75%),linear-gradient(-45deg,transparent 75%,#202736 75%); background-size: 12px 12px; background-position: 0 0,0 6px,6px -6px,-6px 0; }
.template-asset-card > div { min-width: 0; display: grid; gap: 3px; }
.template-asset-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .79rem; }
.template-asset-card span { color: var(--muted); font-size: .68rem; }
.template-asset-card button { padding: 7px 8px; font-size: .69rem; }
.asset-choice-properties { display: grid; gap: 10px; margin-bottom: 12px; padding: 10px; border: 1px solid rgba(124,92,255,.38); border-radius: 10px; background: rgba(124,92,255,.055); }
.asset-choice-allowed-list { display: grid; gap: 7px; max-height: 220px; overflow-y: auto; }
.asset-choice-option { display: grid; grid-template-columns: auto 42px minmax(0,1fr); gap: 8px; align-items: center; margin: 0; padding: 7px 8px; border: 1px solid #343d4d; border-radius: 8px; background: #10161f; cursor: pointer; }
.asset-choice-option:has(input:checked) { border-color: rgba(124,92,255,.65); background: rgba(124,92,255,.09); }
.asset-choice-option input { margin: 0; }
.asset-choice-option img { width: 42px; height: 34px; object-fit: contain; border-radius: 5px; background: #080b10; }
.asset-choice-option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; }
@media (max-width: 640px) {
  .template-asset-card { grid-template-columns: 48px minmax(0,1fr); }
  .template-asset-card button { grid-column: auto; }
}


#studioCanvas.asset-choice-drawing { cursor: crosshair; }
#addAssetChoiceSlot.active { border-color: #00e7ff; box-shadow: 0 0 0 2px rgba(0,231,255,.18); background: rgba(0,231,255,.08); }
.asset-choice-draw-hint { margin: -2px 0 4px; padding: 8px 9px; border-left: 3px solid #00e7ff; background: rgba(0,231,255,.06); color: #cfeff5; border-radius: 0 7px 7px 0; }
.asset-choice-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.asset-choice-properties .template-asset-empty { border: 1px dashed #465064; border-radius: 8px; padding: 10px; }