/* Shared component contract, after page CSS. Palette/character art stays in skins.css.
   Media canvases, crop coordinates and code editors intentionally keep their own scale. */
:root {
  --ui-control-height: 2.75rem;
  --ui-control-radius: .5rem;
  --ui-card-padding: 1.25rem;
  --ui-field-gap: 1rem;
  --ui-small-text: .875rem;
  --accent-text: var(--text);
  --on-accent: #141820;
  --success-text: #84d8af;
  --warning-text: #efd28a;
  --text-main: var(--text);
  --text-primary: var(--text);
  --border-color: var(--border);
  --card-bg: var(--bg-card);
  --bg-secondary: var(--bg-input);
  --accent-hover: var(--accent);
  --ui-inset: color-mix(in srgb, var(--bg-card) 92%, var(--accent));
  --ui-overlay: rgb(8 12 20 / 78%);
  --ui-layer-dialog: 1000;
  color-scheme: dark;
}
html[data-theme="light"] { color-scheme: light; }
/* `hidden` is state, and must win over a component's display:flex/grid. */
[hidden]:not([hidden="until-found"]) { display: none !important; }
:where(button, input, select, textarea, a, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}
::selection { background: var(--accent); color: var(--on-accent); }
:where(input, textarea) { caret-color: var(--accent-text); }
:where(input, textarea)::placeholder { color: var(--text-muted); opacity: 1; }
:where(*) { scrollbar-color: var(--border) var(--bg-card); }
a { text-underline-offset: .2em; }
.main-content { min-width: 0; }
.navbar-brand { min-width: 0; flex-shrink: 1; }
.navbar-actions { flex-shrink: 0; }
.card { padding: var(--ui-card-padding); }
.card-title { font-size: 1.125rem; line-height: 1.45; color: var(--accent-text); margin-bottom: 1rem; }
.tool-page-header { gap: .75rem 1rem; margin-bottom: 1rem; }
.tool-title { margin: 0; font-size: 1.5rem; font-weight: 700; overflow-wrap: anywhere; }
.tool-page-header > .tool-title { flex: 1 1 12rem; }
.tool-page-header > .notes-current-user { margin-left: auto; }
.notes-top-actions { min-width: 0; flex-wrap: wrap; gap: .5rem; }
.notes-top-actions form { margin: 0; }
.notes-topbar-meta { min-width: 0; max-width: 100%; flex-shrink: 1; flex-wrap: wrap; }
.notes-topbar-tip, .notes-topbar-updated { white-space: normal; overflow-wrap: anywhere; }
.tool-page-header .notes-top-actions { margin-left: auto; }
.tool-page-header .btn-back { color: var(--text); border-color: var(--border); }
.btn, .btn-sm, .btn-back, .theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  min-height: var(--ui-control-height);
  font-size: .9375rem;
  line-height: 1.35;
  padding: .5rem 1rem;
  border-radius: var(--ui-control-radius);
}
.btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.btn-back { white-space: nowrap; }
/* Image skins use a 3px lower-edge shadow; shift content one pixel down to keep the visible face optically centered. */
html[data-image-skin="1"] body :where(.btn, .btn-sm, .btn-back, .theme-toggle-btn) {
  padding-block-start: calc(.5rem + 1px);
  padding-block-end: calc(.5rem - 1px);
}
.btn-primary, .btn-primary:hover { background: var(--accent); color: var(--on-accent); }
.btn:not(:disabled):hover { opacity: 1; }
.btn-secondary { background: var(--bg-input); color: var(--text); border-color: var(--border); }
.btn-danger { background: var(--danger); color: var(--bg-card); }
.btn:disabled, button:disabled { cursor: not-allowed; }
.form-group { min-width: 0; margin-bottom: var(--ui-field-gap); }
.form-label { font-size: .9375rem; line-height: 1.5; color: var(--text); margin-bottom: .375rem; }
.form-control {
  min-width: 0; min-height: var(--ui-control-height); padding: .625rem .75rem;
  font: inherit; font-size: 1rem; line-height: 1.5; border-radius: var(--ui-control-radius);
}
textarea.form-control { height: auto; min-height: 6rem; resize: vertical; }
input.form-control[type="color"] { padding: .25rem; }
.form-control:focus { border-color: var(--accent-text); }
.form-control:autofill { -webkit-text-fill-color: var(--text); box-shadow: inset 0 0 0 1000px var(--bg-input); }
.form-inline { gap: var(--ui-field-gap); }
.form-inline > .form-group { min-width: 0; flex-basis: 10rem; }
.share-form, .share-form-grid { gap: var(--ui-field-gap); }
.share-form > .form-group, .share-form-grid > .form-group { margin-bottom: 0; }
.input-with-btn { flex-wrap: wrap; }
.input-with-btn .form-control { min-width: 0; }
.num-stepper { min-height: var(--ui-control-height); border-radius: var(--ui-control-radius); }
.num-stepper-btn { width: var(--ui-control-height); flex-shrink: 0; color: var(--text); }
.num-stepper-btn:hover { color: var(--on-accent); }
.num-stepper-input { min-width: 0; font-size: 1rem; }
.radio-group { gap: .375rem 1rem; }
.radio-group label { min-height: var(--ui-control-height); font-size: .9375rem; }
.radio-group input { flex: none; }
.ui-file-picker {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: .5rem .75rem; padding: .375rem; border: 1px solid var(--border);
  border-radius: var(--ui-control-radius); background: var(--bg-input); min-width: 0;
}
.ui-file-picker-action { position: relative; display: grid; align-items: center; min-height: var(--ui-control-height); }
.ui-file-picker-label {
  display: grid; place-items: center; min-height: var(--ui-control-height); padding: .5rem .75rem;
  border: 1px solid var(--border); border-radius: var(--ui-control-radius);
  background: var(--ui-inset); color: var(--text); font-weight: 600; text-align: center;
}
/* The original native input remains focusable/clickable; ID, files and all listeners survive. */
.ui-file-picker input[type="file"].form-control {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; padding: 0;
}
.ui-file-picker-action:focus-within { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: .5rem; }
.ui-file-picker-name { min-width: 0; padding: .25rem; font-size: .9375rem; color: var(--text-muted); overflow-wrap: anywhere; }
.ui-file-picker:has(input:disabled) { opacity: .6; }
.file-drop-zone, .ai-resource-upload-zone { border-color: var(--border); background: var(--ui-inset); }
.file-drop-zone:hover, .file-drop-zone:focus, .file-drop-zone.is-dragging,
.ai-resource-upload-zone:focus-within { border-color: var(--accent-text); background: var(--ui-inset); }
.file-drop-zone-tip, .file-selection-tip, .ai-resource-upload-zone label > small { font-size: var(--ui-small-text); }
.file-selection-tip:not(:empty), .ai-resource-file-name { color: var(--accent-text); }
.ai-resource-upload-zone label { min-height: 7rem; padding: 1rem; }
.ai-resource-upload-zone { min-height: 0; }
.ai-resource-file-name { position: static; padding: 0 1rem .75rem; overflow-wrap: anywhere; font-size: var(--ui-small-text); }
.ai-resource-file-name:empty { display: none; }
.workspace-cache-bar, .video-source-empty, .sprite-source-empty, .ui-inset-panel {
  background: var(--ui-inset); color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--ui-control-radius);
}
.workspace-cache-copy { font-size: var(--ui-small-text); }
.workspace-cache-copy strong { color: var(--text); }
.workspace-cache-status[data-state="error"] { color: var(--danger); }
.status-box, .file-message { font-size: .9375rem; line-height: 1.5; padding: .75rem 1rem; overflow-wrap: anywhere; }
.status-box:empty, .file-message:empty { display: none; }
.status-box.info { background: var(--ui-inset); color: var(--text); border: 1px solid var(--border); }
.status-box.success, .file-message { background: var(--ui-inset); color: var(--success-text); border: 1px solid var(--success-text); }
.status-box.error, .file-message-error { background: var(--bg-card); color: var(--danger); border-color: var(--danger); }
.file-delete-btn { color: var(--danger); }
.file-table { font-variant-numeric: tabular-nums; }
.file-table th, .file-table td { font-size: .9375rem; }
.file-table-wrap { max-width: 100%; }
.ai-resource-hero { min-height: 0; padding: var(--ui-card-padding); gap: 1rem; border-color: var(--border); }
.ai-resource-hero-copy { min-width: 0; }
.ai-resource-hero-icon { width: 3.25rem; height: 3.25rem; font-size: 2rem; }
.ai-resource-hero-icon, .ai-resource-hero-plugins .ai-resource-hero-icon,
.ai-resource-manage-badge, .ai-resource-empty-art { background: var(--ui-inset); border-color: var(--border); }
.ai-resource-manage-intro h2 { margin: 0 0 .375rem; font-size: 1.125rem; }
.ai-resource-local-note, .ai-resource-card-head div > span, .ai-resource-card-meta,
.ai-resource-card-install-note, .ai-resource-explain p, .ai-resource-publish-foot p,
.ai-resource-optional, .ai-prompt-detail-meta span, .ai-prompt-detail-body label { font-size: var(--ui-small-text); }
.ai-resource-card-head h2, .ai-resource-explain h3 { font-size: 1.125rem; overflow-wrap: anywhere; }
.ai-resource-card > p { font-size: 1rem; }
.ai-resource-card-meta { flex-wrap: wrap; overflow-wrap: anywhere; }
.ai-resource-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.ai-resource-toolbar { flex-wrap: wrap; }
.ai-resource-search { min-height: var(--ui-control-height); min-width: 0; font-size: 1rem; }
.ai-resource-search input { min-width: 0; font-size: 1rem; color: var(--text); }
.ai-resource-filter-pills { flex-wrap: wrap; overflow: visible; }
.ai-resource-filter-pills button { min-height: var(--ui-control-height); font: inherit; padding: .5rem .75rem; }
html .ai-resource-filter-pills button.is-active { color: var(--accent-text); border-color: var(--accent-text); background: var(--ui-inset); }
.ai-resource-empty { padding: 2rem 1rem; }
.ai-resource-empty-art i { background: var(--accent); color: var(--on-accent); }
.ai-resource-empty-steps b, .ai-resource-upload-zone label > span, .ai-resource-publish-foot p span { color: var(--accent-text); }
.ai-resource-search-empty { padding: 1rem; color: var(--text-muted); }
.ai-prompt-detail-close, .notes-modal-close, .ev-modal-close {
  min-width: var(--ui-control-height); min-height: var(--ui-control-height); flex-shrink: 0;
}
.ai-prompt-detail-dialog { max-height: calc(100dvh - 2rem); }
.ai-prompt-detail-dialog[open] { display: flex; flex-direction: column; }
.ai-prompt-detail-head, .ai-prompt-detail-foot { flex-shrink: 0; }
.ai-prompt-detail-head > div { min-width: 0; }
.ai-prompt-detail-head h2 { overflow-wrap: anywhere; }
.ai-prompt-detail-dialog::backdrop { background: var(--ui-overlay); }
.ai-prompt-detail-body { min-height: 0; flex: 1 1 auto; max-height: none; }
.ai-prompt-detail-body textarea, .ai-prompt-detail-body input { padding: .75rem; font-size: 1rem; }
.notes-modal-overlay, .ev-modal-overlay { z-index: var(--ui-layer-dialog); background: var(--ui-overlay); }
.notes-modal, .ev-modal { max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); }
.notes-modal-title { overflow-wrap: anywhere; }
.notes-modal-foot { flex-wrap: wrap; }
.sb-mw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.file-login-card { padding: var(--ui-card-padding); }
.file-login-form { gap: .75rem; }
.file-login-form > .form-label { margin-bottom: -.375rem; }
.login-captcha-block > .form-label { margin-bottom: .375rem; }
.skin-picker-menu button { min-height: var(--ui-control-height); }
.skin-picker-menu small { font-size: var(--ui-small-text); }
.ai-chat-new-button { color: var(--on-accent); }
.ai-chat-model-name, .ai-chat-history-actions button, .ai-chat-sidebar-note { font-size: var(--ui-small-text); }
.ai-chat-topbar h2 { overflow-wrap: anywhere; }
.ai-chat-main { grid-template-columns: minmax(0, 1fr); }
.ai-chat-main > *, .ai-chat-input-row textarea { min-width: 0; }
.ai-chat-send-button { color: var(--on-accent); }
.ai-chat-model-options input:checked + span { color: var(--accent-text); }
.ai-chat-history-actions button, .ai-chat-model-options label > span { min-height: var(--ui-control-height); }
.ai-chat-history-item > button { min-width: 2.75rem; min-height: 2.75rem; }
.info-item-label, .share-meta, .share-help, .notes-card-meta, .file-login-tip,
.notes-topbar-tip, .notes-topbar-updated, .notes-topbar-vis { font-size: var(--ui-small-text); }
html[data-image-skin="1"] .home-page .tool-card {
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); grid-template-rows: auto 1fr;
  align-content: start; column-gap: .625rem; min-height: calc(13rem - 30px); padding: 1rem 7.6rem 1rem 1rem;
}
html[data-image-skin="1"] .home-page .tool-card-icon {
  grid-column: 1; grid-row: 1; align-self: center; margin: 0; font-size: 1.75rem;
}
html[data-image-skin="1"] .home-page .tool-card-title {
  grid-column: 2; grid-row: 1; align-self: center; margin: 0; font-size: 1.125rem; line-height: 1.4;
}
html[data-image-skin="1"] .home-page .tool-card-desc {
  grid-column: 1 / -1; grid-row: 2; margin-top: .5rem; font-size: .9375rem; line-height: 1.6;
}
@media (min-width: 701px) and (max-width: 1100px) {
  html[data-image-skin="1"] .home-page .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  :root { --ui-card-padding: 1rem; }
  .tool-title { font-size: 1.25rem; }
  .tool-page-header > .tool-title { flex-basis: 100%; }
  .tool-page-header .notes-top-actions { width: 100%; margin-left: 0; justify-content: flex-start; }
  .notes-page-header .notes-current-user { flex-basis: 100%; }
  .tool-page-header > .notes-current-user { margin-left: 0; }
  .btn, .btn-sm, .btn-back, .form-label, .radio-group label { font-size: 1rem; }
  .ui-file-picker { grid-template-columns: minmax(0, 1fr); }
  .ui-file-picker-name { border-top: 1px solid var(--border); padding: .5rem .375rem; }
  .sb-mw-grid { grid-template-columns: minmax(0, 1fr); }
  .ai-resource-hero { grid-template-columns: auto minmax(0, 1fr); }
  .ai-resource-hero-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .ai-resource-search { flex-basis: auto; max-width: none; }
  .ai-prompt-detail-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-prompt-detail-foot { gap: .5rem; }
  .ai-prompt-detail-foot .btn { flex: 1; }
  .ai-chat-icon-button, .ai-chat-image-viewer-close { min-width: 2.75rem; min-height: 2.75rem; }
  .navbar { height: auto; min-height: 3.75rem; gap: .5rem; padding: .5rem .75rem; }
  .navbar-brand-text { white-space: normal; font-size: .875rem; line-height: 1.4; letter-spacing: .02em; }
  .navbar-brand-mark { flex-shrink: 0; }
  .navbar-actions .theme-toggle-btn { padding-inline: .625rem; }
  .navbar-actions .account-nav-link { min-width: var(--ui-control-height); justify-content: center; }
  html[data-image-skin="1"] .home-page .tool-card { min-height: 9.75rem; padding-right: 6.9rem; }
  html[data-image-skin="1"] .home-page .tool-card-desc { font-size: 1rem; }
}
@media (max-width: 400px) {
  .form-inline > .form-group { flex-basis: 100%; }
  .ai-resource-card-buttons > .btn { padding-inline: .375rem; font-size: .9375rem; }
  .notes-page-header .notes-top-actions > .btn,
  .notes-page-header .notes-top-actions > form { width: 100%; flex-basis: 100%; }
  .notes-page-header .notes-top-actions > form > .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.btn, .tool-card, .file-drop-zone) { transition: none; }
}