@font-face {
  font-family:Inconsolata;
  src:url('/assets/Inconsolata-Regular.ttf') format('truetype');
  font-display:swap;
  font-weight:400;
}
:root {
  color-scheme:dark;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#eee;
  background:#121212;
  font-size:14px;
  font-weight:300;
  --panel:#242424b8;
  --border:#ffffff1d;
  --muted:#b0b0b0;
  --field:#ffffff0c;
  --radius:4px;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  min-height:100vh;
  line-height:1.35;
  background:radial-gradient(ellipse at 75% 120%,#55555590,transparent 58%),linear-gradient(130deg,transparent 23%,#53535320 25%,transparent 28%,#5b5b5b20 52%,transparent 62%),linear-gradient(27deg,#111 0%,#1e1e1e 49%,#111 100%);
  background-attachment:fixed;
}
button,input,textarea,select {
  font:inherit;
  color:inherit;
}
button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent;
}
button,a {
  touch-action:manipulation;
}
button {
  cursor:pointer;
}
button {
  background:none;
  border:0;
}
button:disabled {
  cursor:not-allowed;
  opacity:.48;
}
a {
  color:inherit;
  text-decoration:none;
}
svg {
  width:18px;
  height:18px;
  flex-shrink:0;
}
img {
  max-width:100%;
  display:block;
}
h1,h2,p {
  margin:0;
}
h1 {
  font-size:16px;
  font-weight:400;
}
h2 {
  font-size:14px;
  font-weight:400;
}
p {
  overflow-wrap:anywhere;
}
input,textarea,select {
  background:var(--field);
  border:1px solid transparent;
  border-radius:3px;
  min-width:0;
  padding:10px 12px;
  font-size:13px;
  width:100%;
}
input::placeholder,textarea::placeholder {
  color:#969696;
}
input:focus,textarea:focus,select:focus {
  border-color:#b6b6b6;
}
input[type=checkbox] {
  width:18px;
  height:18px;
  accent-color:#ddd;
}
textarea {
  resize:vertical;
}
select {
  cursor:pointer;
}
option {
  background:#252525;
  color:#eee;
}
:focus-visible {
  outline:2px solid #eee;
  outline-offset:4px;
}
input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline-offset:1px;
}
input[aria-invalid=true],textarea[aria-invalid=true] {
  border-color:#edaaaa;
}
button[aria-invalid=true] {
  outline:1px solid #edaaaa;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  padding:12px 20px;
  background:white;
  color:#111;
  z-index:20;
}
.skip-link:focus {
  top:10px;
}
.boot {
  padding:30px;
}
.layout {
  display:grid;
  grid-template-columns:282px minmax(0,1fr);
  gap:14px;
  padding:20px;
  height:100dvh;
  max-width:1920px;
  margin:auto;
}
.panel {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.sidebar {
  display:grid;
  grid-template-rows:122px minmax(310px,1fr) auto;
  gap:14px;
  min-height:0;
}
.brand {
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
}
.brand img {
  width:25px;
  height:25px;
}
.brand span {
  font-weight:650;
  font-size:32px;
  letter-spacing:-1.8px;
}
.navigation,.sidebar-bottom {
  padding:20px;
}
.navigation {
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:#555 transparent;
}
.mode-badge {
  margin-left:auto;
  margin-right:12px;
  font-size:10px;
  color:#b5b5b5;
}
.main-header h1 {
  margin-right:12px;
}
.section-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--muted);
  font-size:12px;
  margin-bottom:12px;
}
.count {
  background:#ffffff08;
  border:1px solid #ffffff0d;
  min-width:20px;
  min-height:20px;
  display:grid;
  place-items:center;
  font:12px Inconsolata,monospace;
  border-radius:3px;
}
.project-select {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:40px;
  padding:10px 12px;
  border-radius:3px;
  background:#ffffff0a;
  text-align:left;
  font-size:14px;
}
.project-select>span {
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.project-select svg:first-child {
  width:13px;
  height:13px;
  color:#9c9c9c;
}
.project-select svg:last-child {
  width:12px;
  color:#999;
}
.divider {
  height:1px;
  background:var(--border);
  margin:20px 0;
}
.nav-link {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:37px;
  width:100%;
  padding:5px 0;
  text-align:left;
  font-size:16px;
  color:#a9a9a9;
}
.nav-link:hover,.nav-link.active {
  color:#fff;
}
.nav-dot {
  display:block;
  width:7px;
  height:7px;
  background:#88888838;
  border-radius:1px;
  border:1px solid #9992;
}
.active .nav-dot {
  background:#ededed;
  border-color:#ddd;
}
.preview-label {
  color:#ccc;
  font-size:11px;
  display:flex;
  align-items:center;
  gap:8px;
}
.status-dot {
  width:5px;
  height:5px;
  background:#d2d2d2;
  border-radius:50%;
}
.preview-copy,.session-note {
  color:#a8a8a8;
  font-size:11px;
  line-height:1.65;
  margin-top:7px;
}
.sidebar-bottom .nav-link {
  font-size:14px;
  min-height:34px;
}
.sidebar-bottom .divider {
  margin:15px 0;
}
.main-panel {
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.main-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:51px;
  min-height:51px;
  padding:0 20px;
  border-bottom:1px solid var(--border);
}
.icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  color:#aaa;
  border-radius:3px;
}
.icon-button:hover {
  background:#ffffff0a;
  color:#fff;
}
/* Selected icons stay white. A selected .chip sits on the light Studio accent and takes --on-accent from skin-studio.css
   (3 October 2026: the chosen preprocessing chip was white on white). */
.selected:not(.chip) {
  color:#fff!important;
}
.selected svg {
  fill:#eaeaea33;
}
.main-scroll {
  overflow:auto;
  min-height:0;
  padding:20px;
  scrollbar-color:#555 transparent;
  scrollbar-width:thin;
}
.controls-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.control-card {
  border:1px solid var(--border);
  border-radius:4px;
  padding:14px 12px 12px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-width:0;
  min-height:210px;
}
.control-card h2 {
  text-align:center;
  font-size:12px;
  color:#bbb;
  font-weight:300;
  margin-bottom:14px;
}
/* Also worn by a <button>: the library square and the character picker; padding:0 keeps the thumbnail flush. */
.upload-square {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:96px;
  height:96px;
  border:1px dashed #fff3;
  border-radius:4px;
  margin:0 auto 14px;
  padding:0;
  cursor:pointer;
  overflow:hidden;
  color:#969696;
}
.upload-square:hover {
  border-color:#bdbdbd;
  color:white;
}
.upload-square img {
  height:100%;
  width:100%;
  object-fit:cover;
}
.upload-square svg {
  width:30px;
  height:30px;
  stroke-width:1;
}
.upload-control {
  position:relative;
  max-width:100%;
  margin:0 auto;
}
.upload-control:focus-within .upload-square,.file-button:focus-within {
  outline:2px solid #eee;
  outline-offset:4px;
}
.file-input {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  padding:0;
  border:0;
}
.remove-image {
  position:absolute;
  right:-7px;
  top:-7px;
  border-radius:50%;
  background:#383838;
  border:1px solid #777;
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  padding:4px;
}
.remove-image svg {
  width:13px;
  height:13px;
}
.thumbnail-label {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  font-size:9px;
  padding:4px 2px;
  background:#0009;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.range-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10px;
  color:#aaa;
  margin-top:auto;
}
.range-label output {
  color:#ddd;
  font:11px Inconsolata,monospace;
}
.slider {
  appearance:none;
  padding:0;
  height:12px;
  margin:6px 0 0;
  background:transparent;
  border:0;
  cursor:pointer;
}
.slider::-webkit-slider-runnable-track {
  height:2px;
  background:#9996;
}
.slider::-webkit-slider-thumb {
  appearance:none;
  background:#ddd;
  border-radius:50%;
  width:9px;
  height:9px;
  margin-top:-3.5px;
}
.slider::-moz-range-track {
  height:2px;
  background:#9996;
}
.slider::-moz-range-thumb {
  width:9px;
  height:9px;
  border:none;
  background:#ddd;
}
.ratio-display {
  height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  color:#c5c5c5;
}
.ratio-display span {
  height:78px;
  width:52px;
  border:1px dashed #979797;
  border-radius:3px;
}
.ratio-1-1 span {
  width:70px;
  height:70px;
}
.ratio-3-2 span,.ratio-4-3 span {
  width:85px;
  height:58px;
}
.ratio-9-16 span {
  width:44px;
  height:78px;
}
.ratio-16-9 span {
  width:88px;
  height:50px;
}
.scale-display {
  font-size:42px;
  font-weight:200;
}
.light-display {
  height:96px;
  text-align:center;
  font-size:64px;
  color:#a5a5a5;
  margin-bottom:14px;
}
.control-card>select {
  font:12px Inconsolata,monospace;
  text-align:center;
  padding:5px 6px;
  margin-top:auto;
  background:#ffffff03;
  border-color:#ffffff10;
}
.field {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  margin-bottom:14px;
}
.field>span:first-child,.field>label {
  font-size:12px;
  color:#b0b0b0;
}
.advanced .field {
  margin-bottom:12px;
}
.advanced .field>span:first-child,.advanced .field>label {
  font-size:11px;
  color:#c6c6c6;
}
.advanced input:not([type=range]) {
  padding:9px 10px;
  font:12px Inconsolata,monospace;
  background:#ffffff06;
}
.control-caption {
  font-size:11px;
  color:#aaa;
  text-align:center;
  margin-top:auto;
}
.prompt-row {
  display:flex;
  gap:10px;
  margin-top:10px;
}
.prompt-row textarea {
  min-height:57px;
  max-height:160px;
  line-height:1.5;
  font-size:12px;
  padding:12px;
  background:#00000020;
  border:1px solid var(--border);
}
.submit-button {
  flex-shrink:0;
  width:50px;
  min-height:57px;
  background:#ededed;
  color:#282828;
  border-radius:3px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.submit-button:hover:not(:disabled) {
  background:white;
}
.submit-button svg {
  width:25px;
  height:25px;
}
#composer {
  padding-bottom:20px;
  border-bottom:1px solid var(--border);
  margin-bottom:20px;
}
.pending-hint {
  margin-top:10px;
  color:#ccc;
  font-size:12px;
}
.field-error {
  display:block;
  color:#ffc1c1;
  font-size:12px;
  line-height:1.45;
  margin-top:6px;
}
.gallery {
  display:flex;
  flex-direction:column;
  gap:25px;
}
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.image-card {
  position:relative;
  min-width:0;
  aspect-ratio:2/3;
}
.image-open {
  padding:0;
  width:100%;
  height:100%;
  display:block;
  overflow:hidden;
  border-radius:3px;
  background:#1b1b1b;
}
.image-open img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.resolution {
  position:absolute;
  top:6px;
  left:6px;
  font:10px Inconsolata,monospace;
  background:#171717c9;
  color:#eee;
  border-radius:3px;
  padding:3px 4px;
  pointer-events:none;
}
.image-favorite {
  position:absolute;
  top:5px;
  right:5px;
  background:#15151599;
  color:#ddd;
  border-radius:3px;
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  padding:6px;
}
.image-favorite svg {
  width:15px;
  height:15px;
}
.image-favorite:hover {
  background:#111;
}
.blurred img,img.blurred {
  filter:blur(13px);
}
.job-caption {
  padding:12px;
  background:#0003;
  border:1px solid #ffffff0c;
  border-radius:3px;
  margin-top:10px;
}
.job-caption>p {
  font-size:12px;
  line-height:1.5;
  color:#d0d0d0;
  white-space:pre-wrap;
}
.job-footer {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px 16px;
  flex-wrap:wrap;
}
.job-footer>.text-button {
  flex-shrink:0;
}
.ratio-4-5 span { width:62px; height:78px; }
.ratio-5-4 span { width:85px; height:68px; }
#poseMode { margin-top:8px; font-size:11px; padding:6px; }
.tags {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:10px;
}
.tags span,.tag {
  font:10px Inconsolata,monospace;
  color:#b8b8b8;
  border:1px solid #fff1;
  border-radius:2px;
  padding:3px 5px;
}
.tags span:first-child {
  color:#ddd;
}
.job-progress,.job-failed {
  display:flex;
  gap:18px;
  align-items:center;
  min-height:180px;
  justify-content:center;
  background:#ffffff03;
  border:1px dashed #ffffff28;
  border-radius:4px;
  padding:25px;
}
.job-progress strong,.job-failed strong {
  font-weight:400;
  font-size:14px;
}
.job-progress p,.job-failed p {
  font-size:12px;
  color:#b8b8b8;
  margin-top:8px;
}
.job-failed {
  flex-direction:column;
  gap:8px;
}
.job-failed strong {
  color:#efb4b4;
}
.spinner {
  border:1px solid #aaa5;
  border-top-color:currentColor;
  border-radius:50%;
  width:20px;
  height:20px;
  display:inline-block;
  animation:spin 1s linear infinite;
}
.operation-status {
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  margin-bottom:16px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#242424;
  color:#eee;
}
.operation-status .spinner, .button .spinner { flex-shrink:0; width:16px; height:16px; }
@keyframes spin {
  to {
    transform:rotate(360deg);
  }
}
.empty-state {
  min-height:280px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:12px;
  color:#b6b6b6;
  padding:30px;
}
.empty-state>svg {
  width:28px;
  height:28px;
  color:#999;
  margin-bottom:8px;
}
.empty-state h2 {
  font-size:17px;
  color:#ddd;
}
.empty-state p {
  font-size:13px;
  max-width:350px;
  line-height:1.6;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:36px;
  padding:10px 15px;
  border-radius:3px;
  background:#e3e3e3;
  color:#222;
  border:1px solid transparent;
  font-size:12px;
  font-weight:400;
}
.button:hover:not(:disabled) {
  background:#fff;
}
.button.secondary {
  background:#ffffff06;
  border-color:var(--border);
  color:#ddd;
}
.button.secondary:hover:not(:disabled) {
  background:#ffffff12;
}
.button svg {
  width:15px;
  height:15px;
}
.text-button {
  color:#bbb;
  text-decoration:underline;
  text-underline-offset:3px;
  font-size:12px;
  min-height:30px;
}
.page-intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
  font-size:13px;
  color:#b0b0b0;
}
.character-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.character-card {
  padding:12px;
  border:1px solid var(--border);
  border-radius:4px;
  background:#ffffff03;
}
.character-detail {
  display:block;
  text-align:left;
  padding:0;
  width:100%;
}
.character-detail>img {
  aspect-ratio:1;
  width:100%;
  object-fit:cover;
  border-radius:3px;
}
.character-detail>div {
  padding:12px 0;
}
.character-detail h2 {
  font-size:15px;
}
.character-detail p {
  font-size:11px;
  color:#aaa;
  margin-top:6px;
}
.character-card>.button {
  width:100%;
}
.settings-form {
  max-width:450px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.settings-form>.button {
  align-self:flex-start;
}
.settings-form>p {
  line-height:1.7;
  margin-bottom:12px;
}
.muted {
  color:var(--muted);
}
.small {
  font-size:11px;
}
.support-copy {
  max-width:630px;
  line-height:1.75;
}
.support-copy h2 {
  margin:0 0 12px;
  font-size:18px;
}
.support-copy p {
  margin-bottom:25px;
  color:#b8b8b8;
  font-size:14px;
}
.support-copy .check {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  margin:15px 0;
}
.support-copy .check input {
  flex-shrink:0;
}
/* Toasts top right (Mathias, 6 October 2026, src/toasts.js): a fixed stack outside the page, so a message never moves
   it; the newest message is at the bottom, a running operation's toast (spinner) first. Below the header row (its
   icons stay free) and never clickable, so a toast cannot catch a click meant for the page. */
#notice {
  position:fixed;
  top:calc(72px + env(safe-area-inset-top, 0px));
  right:16px;
  z-index:30;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  width:min(360px, calc(100vw - 32px));
  pointer-events:none;
}
.toast {
  display:flex;
  align-items:center;
  gap:10px;
  max-width:100%;
  padding:12px 16px;
  border:1px solid #555;
  border-radius:6px;
  background:#2b2b2b;
  color:#eee;
  box-shadow:0 5px 24px #0007;
  font-size:12px;
  line-height:1.4;
  overflow-wrap:anywhere;
  pointer-events:none;
  animation:toast-in .18s ease-out;
}
.toast .spinner { flex-shrink:0; width:16px; height:16px; }
.toast.leaving { animation:toast-out .2s ease-in forwards; }
@keyframes toast-in { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:none; } }
@keyframes toast-out { to { opacity:0; transform:translateX(16px); } }
@media (prefers-reduced-motion: reduce) { .toast, .toast.leaving { animation-duration:1ms; } }
dialog {
  color:#eee;
  background:#232323;
  border:1px solid #555;
  border-radius:6px;
  padding:0;
  max-width:calc(100vw - 32px);
  width:480px;
  max-height:calc(100dvh - 48px);
  box-shadow:0 15px 100px #0008;
}
dialog::backdrop {
  background:#0009;
  backdrop-filter:blur(5px);
}
.wide-dialog {
  width:850px;
}
.dialog-header {
  position:sticky;
  top:0;
  background:#232323;
  z-index:2;
  padding:15px 20px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.dialog-header h2 {
  font-size:16px;
}
.dialog-body {
  padding:20px;
}
.dialog-session {
  padding:16px 20px 0;
}
.dialog-session .connection-error {
  margin-bottom:0;
}
.dialog-body .stack {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:18px;
}
.dialog-body .stack>label:not(.button) {
  font-size:12px;
  color:#bbb;
}
.dialog-body>p {
  font-size:13px;
  line-height:1.6;
  margin-bottom:16px;
}
.dialog-body>.button {
  margin-top:15px;
}
.project-list {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.project-row {
  display:flex;
  align-items:center;
  gap:5px;
  border:1px solid var(--border);
  border-radius:3px;
  padding-right:8px;
}
.project-choice {
  display:flex;
  gap:10px;
  align-items:center;
  min-width:0;
  flex:1;
  padding:14px 10px;
  text-align:left;
  font-size:13px;
}
.project-choice>span:first-of-type {
  flex:1;
  overflow-wrap:anywhere;
}
.project-choice>.muted {
  font-size:10px;
}
.project-choice.current {
  background:#ffffff08;
}
.character-options {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.character-option {
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:3px;
  width:100%;
  text-align:left;
}
.character-option img {
  width:48px;
  height:48px;
  border-radius:3px;
  object-fit:cover;
}
.character-option>.muted {
  margin-left:auto;
  font-size:11px;
}
.character-summary {
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:20px;
}
.character-summary img {
  width:90px;
  height:90px;
  object-fit:cover;
  border-radius:4px;
}
.character-summary p {
  margin:6px 0;
}
.dataset-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.dataset-item img {
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:3px;
}
.dataset-item textarea {
  font-size:11px;
  margin-top:5px;
  min-height:65px;
}
.dataset-item .text-button {
  padding:2px;
}
.file-button {
  position:relative;
  cursor:pointer;
}
.image-detail {
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:24px;
}
.image-detail>img {
  width:100%;
  max-height:70vh;
  object-fit:contain;
  border-radius:4px;
}
.image-info>p {
  margin-top:15px;
  line-height:1.6;
  font-size:13px;
}
.image-actions {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:25px;
}
.signed-out {
  padding:45px;
  max-width:440px;
  margin:15vh auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}
.signed-out>img {
  width:35px;
  opacity:.7;
}
.signed-out h1 {
  font-size:36px;
  font-weight:500;
}
.signed-out>p {
  font-size:14px;
  line-height:1.6;
}
.login-page {
  max-width:480px;
  margin:7vh auto;
  padding:36px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.login-brand {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
}
.login-brand img {
  width:28px;
}
.login-brand h1 {
  font-size:34px;
  font-weight:650;
  letter-spacing:-1.8px;
}
.login-page>.mode-badge {
  margin:0;
  text-align:center;
}
.login-page>.muted {
  line-height:1.65;
  font-size:13px;
}
.login-page .stack {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.login-page .stack>label {
  font-size:12px;
  color:var(--muted);
}
.login-page .field-error:empty {
  display:none;
}
.login-success {
  font-size:13px;
  line-height:1.6;
  padding:12px;
  border:1px solid var(--border);
}
.login-switch {
  margin:0;
  text-align:center;
  font-size:13px;
  color:var(--muted);
}
.login-mode-title {
  margin:0;
  font-size:18px;
  font-weight:600;
  text-align:center;
}
.login-link-entry summary {
  cursor:pointer;
  font-size:13px;
}
.login-link-entry>p {
  margin:15px 0;
  line-height:1.6;
}
.connection-hint {
  color:#bbb;
  font-size:11px;
  margin-bottom:14px;
}
.connection-error {
  padding:12px;
  border:1px solid #bd8686;
  color:#ffcece;
  font-size:13px;
  margin-bottom:16px;
}
.load-more {
  margin:20px auto;
  display:flex;
}
.detail-full {
  width:100%;
  /* width/height attributes only reserve the aspect ratio while the original loads (preview shown beneath). */
  height:auto;
  max-height:70vh;
  object-fit:contain;
}
.sample-section {
  margin:24px 0;
}
.sample-section h3,.sample-section p {
  margin-bottom:12px;
}
@media(max-width:520px) {
  .login-page {
    margin:20px 12px;
    padding:24px;
  }
}
@media(min-width:1450px) {
  .layout {
    grid-template-columns:320px minmax(0,1fr);
  }
  .sidebar {
    grid-template-rows:150px minmax(310px,1fr) auto;
  }
  .controls-grid {
    gap:14px;
  }
  .control-card {
    min-height:230px;
    padding:18px;
  }
  .upload-square {
    width:110px;
    height:110px;
  }
  .ratio-display,.light-display {
    height:110px;
  }
  .gallery-grid {
    gap:14px;
  }
}
@media(max-width:1000px) {
  .layout {
    grid-template-columns:220px minmax(0,1fr);
    padding:14px;
    gap:12px;
  }
  .sidebar {
    gap:12px;
  }
  .navigation,.sidebar-bottom {
    padding:16px;
  }
  .main-scroll {
    padding:16px;
  }
  .control-card {
    padding:12px 8px;
    min-height:200px;
  }
  .upload-square {
    width:78px;
    height:92px;
  }
  .character-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-intro {
    align-items:flex-start;
    flex-direction:column;
  }
}
@media(max-width:760px) {
  .layout {
    display:block;
    padding:10px;
    height:auto;
    min-height:100dvh;
  }
  .sidebar {
    display:grid;
    grid-template-columns:100px minmax(0,1fr);
    grid-template-rows:auto;
    gap:8px;
    margin-bottom:10px;
  }
  .brand {
    min-height:64px;
    gap:5px;
  }
  .brand span {
    font-size:26px;
  }
  .brand img {
    width:19px;
  }
  .navigation {
    display:contents;
  }
  .navigation>.section-label,.navigation>.divider,.preview-copy {
    display:none;
  }
  .project-select {
    grid-column:2;
    grid-row:1;
    align-self:center;
    background:#ffffff0a;
    min-height:45px;
    width:100%;
    font-size:12px;
  }
  .navigation nav {
    grid-column:1/-1;
    display:flex;
    gap:4px;
    overflow-x:auto;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:4px;
    padding:4px;
  }
  .navigation nav .nav-link {
    font-size:12px;
    justify-content:center;
    flex:1;
    min-width:65px;
    min-height:35px;
    gap:6px;
  }
  .navigation nav .nav-link.active {
    background:#ffffff0a;
    border-radius:3px;
  }
  .nav-dot {
    width:5px;
    height:5px;
  }
  .preview-label {
    grid-column:1/-1;
    justify-content:center;
    font-size:10px;
    padding:2px;
  }
  .sidebar-bottom {
    grid-column:1/-1;
    display:flex;
    gap:20px;
    justify-content:center;
    padding:6px 10px;
    border:0;
    background:transparent;
  }
  .sidebar-bottom .nav-link {
    width:auto;
    font-size:12px;
    min-height:24px;
  }
  .sidebar-bottom .divider,.sidebar-bottom .session-note {
    display:none;
  }
  .main-panel {
    min-height:70dvh;
    overflow:visible;
  }
  .main-header {
    height:48px;
    min-height:48px;
    padding:0 14px;
  }
  .main-scroll {
    padding:12px;
    overflow:visible;
  }
  .controls-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .control-card {
    padding:14px;
    min-height:210px;
  }
  .upload-square {
    width:96px;
    height:96px;
  }
  .advanced .field {
    margin-bottom:12px;
  }
  .gallery-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .character-grid {
    gap:10px;
  }
  .character-card {
    padding:8px;
  }
  .character-detail h2 {
    font-size:13px;
  }
  .character-card>.button {
    font-size:11px;
    padding:8px;
  }
  .image-detail {
    grid-template-columns:1fr;
  }
  .image-detail>img {
    max-height:48vh;
  }
  .image-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .dataset-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-intro {
    gap:12px;
  }
  .page-intro>.button {
    width:100%;
  }
  .dialog-body {
    padding:16px;
  }
  .signed-out {
    margin:10vh 20px;
  }
  .support-copy h2 {
    font-size:16px;
  }
  .support-copy p {
    font-size:13px;
  }
  .empty-state {
    padding:25px 10px;
  }
}
@media(min-width:761px) and (max-height:800px) {
  .sidebar {
    grid-template-rows:90px minmax(0,1fr) auto;
  }
  .navigation .nav-link {
    min-height:32px;
    font-size:14px;
  }
  .navigation>.divider:last-of-type,
  .navigation>.preview-label,
  .navigation>.preview-copy {
    display:none;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

/* Preserve the original panel layout when job actions and writable dialogs expand. */
.job-tools { display:flex; gap:16px; flex-wrap:wrap; }
.dataset-item form { display:flex; flex-wrap:wrap; gap:8px; }
.dataset-item form textarea { flex-basis:100%; }
.settings-form details { display:grid; gap:12px; }
.settings-form details[open] .field { margin-top:12px; }
.control-card > .text-button { align-self:center; font-size:11px; margin-top:6px; }
.settings-form[hidden] { display: none; }

/* Character sharing (29 September 2026): the "Freigeben" tab, the inbox and the read-only copy. Existing controls
   (button, text-button, field, tag, muted) keep the look; Studio adjusts the few own surfaces in skin-studio.css. */
.share-panel { max-width: 760px; padding: 20px 0 32px; display: grid; gap: 24px; }
.share-panel > .field-error:empty { display: none; }
.share-form { display: grid; gap: 20px; }
.share-form p, .share-status p, .share-dialog p, .share-inbox p { margin: 0; line-height: 1.5; }
.share-dialog, .share-inbox { font-size: 13px; }
.share-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; }
.share-fieldset legend { font-size: 12px; color: #b0b0b0; margin-bottom: 10px; padding: 0; }
.share-search { max-width: 420px; }
.share-choice-list { list-style: none; padding: 0; margin: 0; max-height: 340px; overflow-y: auto; }
.share-choice-list li[hidden] { display: none; }
.share-choice { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-top: 1px solid var(--border, #444); cursor: pointer; font-size: 13px; }
.share-choice-list li:first-child .share-choice { border-top: 0; }
.share-choice input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; accent-color: #ddd; }
.share-choice:has(input:disabled) { cursor: not-allowed; color: #858585; }
.share-choice > span { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.share-choice strong, .share-status strong, .share-dialog strong, .share-inbox strong { font-weight: 400; color: #eee; }
.share-email { display: block; flex-basis: 100%; font-size: 12px; color: #9a9a9a; overflow-wrap: anywhere; }
.share-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.share-status { display: grid; gap: 12px; }
.share-status h3 { font-size: 15px; font-weight: 400; margin: 0; }
.share-status-list, .share-inbox-list, .share-summary, .share-lora-rows { list-style: none; padding: 0; margin: 0; }
.share-status-item, .share-inbox-item { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--border, #444); }
.share-status-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.share-status-head h3 { font-size: 15px; font-weight: 400; margin: 0 0 4px; }
.share-person { min-width: 0; font-size: 13px; }
.share-state { flex: 0 0 auto; font: 10px Inconsolata, monospace; text-transform: uppercase; letter-spacing: .04em; border: 1px solid #fff2; border-radius: 2px; padding: 3px 6px; color: #cfcfcf; }
.share-state-pending { border-color: #dcc99d88; color: #e8d9b3; }
.share-state-accepted { border-color: #9fcf9f66; color: #c8e3c8; }
.share-state-declined, .share-state-cancelled { color: #8f8f8f; }
.share-item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.share-addition-line { font-size: 13px; color: #e8d9b3; }
.share-protection { font-size: 12px; line-height: 1.5; color: #d9d0bb; border-left: 2px solid #dcc99d88; padding-left: 10px; margin: 0 0 12px; }
.share-history summary { cursor: pointer; font-size: 12px; color: #aaa; padding: 6px 0; }
.share-dialog .share-summary li { padding: 8px 0; border-top: 1px solid var(--border, #444); font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.share-mail { flex-basis: 100%; font-size: 12px; color: #b8b8b8; }
.share-dialog .dialog-actions, .share-inbox .dialog-actions, .dialog-body > .dialog-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.share-project-name { margin: 8px 0 0; }
.share-inbox { display: grid; gap: 12px; }
.share-inbox-item:first-child { border-top: 0; padding-top: 0; }
.share-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; margin-bottom: 16px; border: 1px solid #dcc99d66; border-radius: 4px; background: #dcc99d10; font-size: 13px; }
.share-count, .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e8d9b3; color: #111; font: 11px/1 Inconsolata, monospace; }
.nav-badge { margin-left: 8px; }
.share-copy-notice { display: grid; gap: 6px; padding: 12px 14px; margin-bottom: 18px; border: 1px solid var(--border, #444); border-left: 2px solid #9fcf9f88; border-radius: 4px; font-size: 13px; }
.share-copy-notice p { margin: 0; line-height: 1.5; }
.share-addition { display: grid; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border, #444); }
.character-loras { margin-top: 18px; }
.share-lora-rows li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; border-top: 1px solid var(--border, #444); font-size: 13px; }
.share-lora-name { min-width: 0; overflow-wrap: anywhere; }
.share-download { margin-left: auto; }
.character-detail .shared-from { font-size: 11px; color: #c8e3c8; margin-top: 4px; }
.generation-model { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; }
.generation-model select { max-width: 340px; }
.flux2-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flux2-result { display: block; width: 100%; height: auto; }
@media (max-width: 600px) { .generation-model { align-items: stretch; flex-direction: column; gap: 8px; } }

/* Library picker (17 September 2026): own earlier uploads next to the FLUX.2 upload tiles. Its own grid, because
   .image-card is fixed to aspect-ratio 2/3 in a four-column gallery and stays unreadable inside a dialog. */
.library-panel { display:flex; flex-direction:column; gap:14px; }
.library-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.library-actions .muted { flex:1; min-width:170px; }
.library-filter { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
/* .chip carries no standalone style; without this the filter would look like a plain button with no on/off state. */
.library-filter .chip { border:1px solid #2c2c2c; border-radius:999px; background:transparent; color:#e3e1de; font-size:11px; padding:3px 10px; min-height:24px; cursor:pointer; }
.library-filter .chip:hover, .library-filter .chip:focus-visible { border-color:#e3e1de; }
.library-filter .chip:disabled { opacity:.5; cursor:default; }
.library-filter .chip[aria-pressed="true"] { background:var(--accent,#222); color:#fff; border-color:var(--accent,#222); }
.library-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; }
.library-tile { position:relative; padding:0; aspect-ratio:1; display:block; overflow:hidden; border-radius:3px; background:#1b1b1b; }
.library-tile img { width:100%; height:100%; object-fit:cover; }
.library-meta { position:absolute; left:0; right:0; bottom:0; padding:3px 4px; font:10px Inconsolata,monospace; color:#eee; background:#171717c9; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; pointer-events:none; }
.library-loading { display:flex; align-items:center; gap:10px; justify-content:center; padding:40px 0; color:#b6b6b6; }
.library-loading .spinner { width:16px; height:16px; }
#library-error:empty { display:none; }
/* Dataset preparation keeps each candidate readable as one image with its controls. */
.dataset-preparation { display:grid; gap:14px; }
.dataset-preparation>header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.dataset-preparation>header h2 { margin:4px 0; }
.dataset-preparation>header p { max-width:54ch; margin:0; color:#a8a8a8; font-size:13px; line-height:1.5; }
.dataset-preparation-count { flex:none; font:20px Inconsolata,monospace; color:#eee; }
.dataset-preparation-count small { color:#888; font-size:12px; }
.dataset-preparation-controls { display:flex; align-items:end; flex-wrap:wrap; gap:10px; }
.dataset-preparation-controls>.button { min-height:38px; }
.dataset-target { width:112px; margin:0; }
.dataset-target input { min-height:38px; font-variant-numeric:tabular-nums; }
.dataset-preparation-status { min-height:1.4em; margin:0; color:#c9b995; font-size:12px; }
.dataset-preparation-run-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.dataset-quota { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none; }
.dataset-quota-card { display:grid; grid-template-rows:auto auto 5px; align-content:space-between; gap:7px; min-width:0; min-height:76px; padding:10px; border:1px solid #343434; border-radius:3px; background:#141414; }
.dataset-quota-card>span { color:#aaa; font-size:11px; line-height:1.25; }
.dataset-quota-label { position:relative; display:flex; align-items:center; justify-content:space-between; gap:6px; }
.dataset-info { display:inline-grid; width:20px; height:20px; flex:none; place-items:center; padding:0; border:1px solid #4a4a4a; border-radius:50%; background:#191919; color:#aaa; font:11px Inconsolata,monospace; cursor:help; }
.dataset-info:focus-visible { outline:2px solid #d8c5a0; outline-offset:2px; }
.dataset-tooltip { position:absolute; z-index:4; left:0; top:calc(100% + 7px); width:min(220px,70vw); padding:8px 10px; border:1px solid #4a4438; background:#211e18; color:#e8ddc8; font-size:11px; line-height:1.4; box-shadow:0 8px 24px #0009; opacity:0; pointer-events:none; }
.dataset-info:hover+.dataset-tooltip,.dataset-info:focus-visible+.dataset-tooltip { opacity:1; }
.dataset-quota-card>strong { color:#eee; font:14px Inconsolata,monospace; font-variant-numeric:tabular-nums; }
.dataset-quota-card>strong small { color:#777; font-size:11px; }
.dataset-quota-card progress { display:block; width:100%; height:4px; overflow:hidden; border:0; border-radius:2px; background:#333; accent-color:#c5b18d; }
.dataset-quota-card progress::-webkit-progress-bar { border-radius:2px; background:#333; }
.dataset-quota-card progress::-webkit-progress-value { border-radius:2px; background:#c5b18d; }
.dataset-quota-card progress::-moz-progress-bar { border-radius:2px; background:#c5b18d; }
.dataset-candidate-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.dataset-candidate { display:grid; grid-template-columns:minmax(150px,220px) minmax(0,1fr); gap:14px; padding:12px; border:1px solid #333; border-radius:3px; background:#131313; }
.dataset-candidate.selected { border-color:#625840; }
.dataset-candidate-image { position:relative; width:100%; align-self:start; aspect-ratio:1; overflow:hidden; background:#202020; }
.dataset-candidate-image.portrait { aspect-ratio:7/9; }
.dataset-candidate-image>img,.dataset-candidate-image .dataset-candidate-crop,.dataset-candidate-image .dataset-candidate-crop canvas { display:block; width:100%; height:100%; object-fit:cover; }
.dataset-candidate-copy { display:grid; align-content:start; gap:10px; min-width:0; }
.dataset-candidate-copy .field { margin:0; }
.dataset-candidate-copy textarea { min-height:68px; }
.dataset-candidate-check { display:flex; align-items:center; gap:8px; min-height:28px; color:#ddd; font-size:12px; }
.dataset-candidate-check input { accent-color:#c5b18d; }
.dataset-candidate-category { position:absolute; top:7px; left:7px; right:auto; bottom:auto; width:auto; height:auto; display:inline-block; padding:4px 7px; border:1px solid #555; border-radius:2px; background:#111e; color:#eee; font-size:10px; }
.dataset-candidate-meta { display:flex; flex-wrap:wrap; gap:12px; color:#888; font-size:11px; }
.dataset-candidate-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; min-height:34px; }
.dataset-preparation>footer { display:flex; align-items:center; flex-wrap:wrap; gap:9px; padding-top:12px; border-top:1px solid #333; }
.dataset-preparation>footer .button { min-height:38px; }
.dataset-preparation>footer>p { flex:1 1 100%; margin:0; }
.dataset-preparation-empty { padding:18px; border:1px dashed #393939; color:#bbb; }
.dataset-preparation-empty p { margin:5px 0 0; font-size:12px; }
@media (max-width:760px) {
  .dataset-quota { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .dataset-candidate { grid-template-columns:minmax(120px,180px) minmax(0,1fr); gap:10px; }
}
@media (max-width:520px) {
  .dataset-preparation>header { gap:10px; }
  .dataset-quota { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dataset-candidate { grid-template-columns:minmax(0,1fr); }
  .dataset-candidate-image { max-width:260px; }
  .dataset-preparation-controls>.file-button { width:100%; justify-content:center; }
}
/* The two-Character mask editor (pair-mask-dialog, sandbox 4 October 2026) shares the Image Edit geometry. */
:is(dialog.image-edit-dialog, dialog.pair-mask-dialog) { width:min(1460px, calc(100vw - 24px)); max-width:1460px; height:min(94dvh, 960px); max-height:94dvh; padding:0; overflow:hidden; background:#0d0d0d; }
:is(dialog.image-edit-dialog, dialog.pair-mask-dialog)>.dialog-header { min-height:48px; padding:14px 20px 4px; border-bottom:0; background:#111; }
:is(dialog.image-edit-dialog, dialog.pair-mask-dialog)>.dialog-header h2 { font-size:16px; letter-spacing:-.01em; }
:is(dialog.image-edit-dialog, dialog.pair-mask-dialog)[open] { display:flex; flex-direction:column; }
:is(dialog.image-edit-dialog, dialog.pair-mask-dialog)>.dialog-header { flex:none; }
:is(dialog.image-edit-dialog, dialog.pair-mask-dialog)>.dialog-body { flex:1; height:auto; min-height:0; max-height:none; overflow:hidden; padding:0; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.image-edit { display:flex; height:100%; min-height:0; flex-direction:column; background:#0d0d0d; }
/* Cleaned-up editor (30 September 2026): meta line under the title, one toolbar row, no boxes in the side panel. */
.image-edit-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0; padding:0 20px 12px; border-bottom:1px solid #292929; background:#111; color:#858585; font-size:12px; }
.image-edit-source-size { padding-right:10px; border-right:1px solid #333; color:#d9d9d9; font:11px Inconsolata,monospace; white-space:nowrap; }
.image-edit-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; min-height:0; flex:1; }
.image-edit-canvas-column,.image-edit-settings { min-width:0; min-height:0; }
.image-edit-canvas-column { display:flex; flex-direction:column; gap:10px; padding:12px 16px 14px; overflow:auto; background:#090909; }
.image-edit-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.image-edit-mode { display:inline-flex; align-self:flex-start; gap:3px; margin:0; padding:3px; border:1px solid #323232; border-radius:4px; background:#151515; }
.image-edit-toolbar .image-edit-mode { align-self:center; }
.image-edit-mode label { position:relative; margin:0; cursor:pointer; }
.image-edit-mode input { position:absolute; opacity:0; pointer-events:none; }
.image-edit-mode span { display:block; min-height:30px; padding:7px 12px; border:1px solid transparent; border-radius:2px; color:#999; font-size:12px; line-height:14px; white-space:nowrap; }
.image-edit-mode input:checked+span { border-color:#594f3d; color:#f0dfbd; background:#2b271f; }
.image-edit-mode input:focus-visible+span { outline:2px solid #d8c5a0; outline-offset:2px; }
.image-edit-tools { display:flex; flex:1; flex-wrap:wrap; align-items:center; gap:8px 12px; min-width:0; }
.image-edit-tools[hidden] { display:none; }
.image-edit-tool-group { display:inline-flex; gap:2px; }
.image-edit-tool,.image-edit-zoom button { display:inline-flex; align-items:center; justify-content:center; min-height:32px; border:1px solid #3b3b3b; background:#181818; color:#bdbdbd; padding:5px 9px; border-radius:2px; cursor:pointer; font-size:12px; }
.image-edit-tool.icon,.image-edit-zoom button { width:32px; min-width:32px; padding:0; border-color:transparent; background:transparent; }
.image-edit-tool.icon:hover:not(:disabled),.image-edit-zoom button:hover:not(:disabled) { border-color:#3b3b3b; background:#181818; color:#eee; }
.image-edit-tool svg,.image-edit-zoom svg,.image-edit-reference-slot svg { width:18px; height:18px; }
.image-edit-tool.selected,.image-edit-tool[aria-pressed="true"] { border-color:#776a50; color:#f1dfb9; background:#302a20; }
.image-edit-tool:disabled,.image-edit-zoom button:disabled { opacity:.35; cursor:not-allowed; }
.image-edit-tool:focus-visible,.image-edit-zoom button:focus-visible { outline:2px solid #d8c5a0; outline-offset:1px; }
.image-edit-brush { display:flex; align-items:center; gap:8px; color:#8f8f8f; font-size:11px; }
.image-edit-brush input { width:96px; min-width:58px; min-height:0; margin:0; padding:0; border:0; background:transparent; accent-color:#d8c5a0; }
.image-edit-brush output,.image-edit-zoom output { min-width:44px; color:#d9c9a8; font:11px Inconsolata,monospace; white-space:nowrap; }
.image-edit-zoom output { min-width:38px; text-align:center; }
.image-edit-zoom { display:flex; align-items:center; gap:2px; margin-left:auto; }
.image-edit-stage-shell { display:flex; min-height:300px; flex:1; flex-direction:column; }
.image-edit-stage { display:flex; min-height:260px; flex:1; justify-content:center; align-items:center; overflow:hidden; border-radius:2px; background:#141414; }
.image-edit-layer { position:relative; flex:0 1 auto; width:max-content; max-width:100%; max-height:64vh; transform-origin:center; box-shadow:0 12px 40px #0009; }
.image-edit-layer img { display:block; width:auto; height:auto; max-width:100%; max-height:62vh; object-fit:contain; user-select:none; }
.image-edit-layer canvas { position:absolute; inset:0; display:block; width:100%; height:100%; touch-action:none; cursor:crosshair; }
.image-edit-layer canvas:focus-visible { outline:2px solid #d8c5a0; outline-offset:2px; }
.image-edit-below { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; }
.image-edit-mask-status { margin:0 2px; color:#8a8a8a; font-size:11px; }
.image-edit-rectangles { flex:0 1 auto; }
.image-edit-rectangles[open] { flex-basis:100%; }
.image-edit-rectangles summary { display:inline-block; padding:2px; color:#a89a7d; cursor:pointer; font-size:11px; text-decoration:underline; text-underline-offset:3px; list-style:none; }
.image-edit-rectangles summary::-webkit-details-marker { display:none; }
.image-edit-rectangles summary:hover { color:#e4d2ad; }
.image-edit-rectangles[open] summary { float:right; }
.image-edit-coordinate-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) auto; gap:8px; align-items:end; clear:both; padding-top:8px; }
.image-edit-coordinate-grid label { display:flex; flex-direction:column; gap:4px; color:#888; font-size:11px; }
.image-edit-coordinate-grid input { width:100%; min-width:0; min-height:34px; background:#151515; color:#eee; border:1px solid #3b3b3b; border-radius:2px; padding:6px 8px; }
.image-edit-coordinate-grid button { min-height:34px; }
.image-edit-settings { display:flex; flex-direction:column; gap:10px; padding:16px 18px; overflow:auto; border-left:1px solid #262626; background:#131313; }
.image-edit-settings>.image-edit-model { display:flex; align-self:stretch; }
.image-edit-settings>.image-edit-model label { flex:1; }
.image-edit-settings>.image-edit-model span { text-align:center; }
.image-edit-hint { margin:-2px 0 4px; color:#777; font-size:11px; line-height:1.45; }
.image-edit-field { display:flex; flex-direction:column; gap:7px; color:#dedede; font-size:12px; }
.image-edit-prompt { font-weight:600; }
.image-edit-field textarea { width:100%; min-height:150px; resize:vertical; padding:11px 12px; color:#f2f2f2; background:#0d0d0d; border:1px solid #3a3a3a; border-radius:2px; font-weight:400; line-height:1.5; }
.image-edit-field textarea:focus { border-color:#8b7c5f; outline:1px solid #8b7c5f; }
.image-edit-field textarea::placeholder { color:#656565; }
.image-edit-settings .field-error:empty { display:none; }
.image-edit-label { display:block; color:#dedede; font-size:12px; font-weight:600; }
.image-edit-optional { margin-left:4px; color:#6f6f6f; font-size:11px; font-weight:400; }
.image-edit-reference,.image-edit-character { display:grid; gap:8px; padding-top:10px; border-top:1px solid #262626; }
.image-edit-reference-row { display:flex; align-items:center; gap:12px; min-width:0; }
.image-edit-reference-slot { display:inline-flex; flex:none; align-items:center; justify-content:center; width:64px; height:64px; padding:0; overflow:hidden; border:1px dashed #4a4a4a; border-radius:3px; background:#0d0d0d; color:#a89a7d; cursor:pointer; }
.image-edit-reference-slot:hover:not(:disabled) { border-color:#8b7c5f; color:#e4d2ad; }
.image-edit-reference-slot:has(img) { border-style:solid; border-color:#3b3b3b; }
.image-edit-reference-slot img { width:100%; height:100%; object-fit:cover; }
.image-edit-reference-slot:focus-visible { outline:2px solid #d8c5a0; outline-offset:2px; }
.image-edit-reference-slot:disabled { opacity:.4; cursor:not-allowed; }
.image-edit-reference-copy { display:grid; justify-items:start; gap:2px; min-width:0; }
.image-edit-reference-copy p { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.image-edit-reference-copy .text-button { padding:0; color:#a89a7d; font-size:12px; }
.image-edit-character select { min-height:36px; width:100%; padding:7px 9px; color:#eee; background:#0d0d0d; border:1px solid #3b3b3b; border-radius:2px; }
.image-edit-lora-toggle { display:flex; align-items:flex-start; gap:8px; color:#c9c9c9; font-size:12px; line-height:1.4; }
.image-edit-lora-toggle input { accent-color:#d8c5a0; }
.image-edit-settings .muted { margin:0; color:#777; }
.image-edit-status { margin:0; color:#e4d2ad; font-size:11px; }
.image-edit-status:empty { display:none; }
.image-edit-submit-error { margin:0; padding:10px 12px; border:1px solid #bd8686; background:#2a1717; color:#ffcece; font-size:13px; line-height:1.45; }
.image-edit-submit-error:focus { outline:2px solid #ffcece; outline-offset:2px; }
.image-edit-submit-row { position:sticky; bottom:-16px; z-index:2; display:grid; gap:10px; margin-top:auto; padding:12px 0 2px; border-top:1px solid #2a2a2a; background:#131313; }
.image-edit-output { color:#7d7d7d; font-size:11px; }
.image-edit-output strong { color:#eadcbe; font:12px Inconsolata,monospace; }
.image-edit-output span { float:right; color:#7d7a72; font:11px Inconsolata,monospace; }
.image-edit-submit-row .button { min-height:42px; width:100%; }
.image-edit-layout[hidden] { display:none; }
/* The reference picker takes the place of the editor while it is open; the draft and its mask stay untouched. */
.image-edit-library { flex:1; min-height:0; overflow:auto; padding:16px 20px; }
.image-edit-library-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.image-edit-library-heading h3 { margin:0; color:#eee; font-size:15px; }
@media (max-width: 900px) {
  :is(dialog.image-edit-dialog, dialog.pair-mask-dialog) { width:calc(100vw - 16px); height:96dvh; max-height:96dvh; }
  :is(dialog.image-edit-dialog, dialog.pair-mask-dialog)>.dialog-body { overflow:auto; }
  .image-edit { height:auto; min-height:100%; }
  .image-edit-layout { grid-template-columns:minmax(0,1fr); }
  .image-edit-canvas-column { min-height:580px; overflow:visible; }
  .image-edit-stage { min-height:380px; }
  .image-edit-layer,.image-edit-layer img { max-height:52vh; }
  .image-edit-settings { overflow:visible; border-top:1px solid #262626; border-left:0; }
  .image-edit-submit-row { bottom:-16px; }
}
@media (max-width: 600px) {
  :is(dialog.image-edit-dialog, dialog.pair-mask-dialog) { width:100vw; max-width:none; height:100dvh; max-height:100dvh; margin:0; border-radius:0; }
  :is(dialog.image-edit-dialog, dialog.pair-mask-dialog)>.dialog-header { min-height:48px; padding:12px 14px 4px; }
  .image-edit-meta { padding:0 14px 10px; }
  .image-edit-canvas-column { min-height:0; padding:10px; }
  .image-edit-toolbar .image-edit-mode { flex:1 0 100%; }
  .image-edit-mode label { flex:1; }
  .image-edit-mode span { text-align:center; }
  .image-edit-tools { gap:6px 8px; }
  .image-edit-tool,.image-edit-zoom button { min-height:40px; }
  .image-edit-tool.icon,.image-edit-zoom button { width:40px; min-width:40px; }
  .image-edit-brush { order:3; width:100%; }
  .image-edit-zoom { order:4; }
  .image-edit-brush input { flex:1; }
  .image-edit-stage-shell { min-height:280px; }
  .image-edit-stage { min-height:240px; }
  .image-edit-layer,.image-edit-layer img { max-height:44vh; }
  .image-edit-settings { padding:14px 12px; }
  .image-edit-coordinate-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .image-edit-coordinate-grid button { grid-column:1/-1; justify-self:start; }
  .image-edit-submit-row { bottom:-14px; padding-bottom:3px; }
  .image-edit-library-heading { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.image-edit-dialog, .pair-mask-dialog) * { scroll-behavior:auto !important; animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

/* Account → API (Edit-API admin, 30 September 2026): token list, usage and the one-time token display. Existing controls
   (button, text-button, field, tag, muted, connection-hint) keep the look in Classic and Studio; tables scroll inside their
   own focusable region instead of widening the page. */
.api-admin { max-width: 1100px; padding: 8px 0 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.api-admin p { margin: 0; line-height: 1.55; }
.api-intro { max-width: 720px; font-size: 13px; color: #c8c8c8; }
.api-tokens, .api-usage, .api-guide { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.api-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.api-section-head h3, .api-guide h3 { font-size: 15px; font-weight: 400; margin: 0; }
.api-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.api-month { margin: 0; min-width: 200px; }
/* position: the visually hidden caption and header text stay inside the scroller instead of widening the page. */
.api-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.api-table-wrap:focus-visible { outline: 1px solid #ddd; outline-offset: 2px; }
.api-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.api-table th, .api-table td { padding: 10px 9px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); }
.api-table thead th { border-top: 0; font-size: 11px; font-weight: 400; color: #a8a8a8; white-space: nowrap; background: #ffffff05; }
.api-table tbody th { font-weight: 400; }
.api-table strong { font-weight: 400; color: #eee; }
.api-table code, .api-guide code, .api-dialog code { font: 11px Inconsolata, monospace; color: #d8d8d8; overflow-wrap: anywhere; }
.api-table code, .api-table .tag { white-space: nowrap; }
.api-table tbody th { min-width: 150px; }
.api-table .api-sub { white-space: normal; }
.api-sub { display: block; margin-top: 3px; font-size: 11px; color: #9a9a9a; }
.api-number { white-space: nowrap; font-variant-numeric: tabular-nums; }
.api-warn { color: #e8d9b3; }
.api-row-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.api-row-actions .text-button { min-height: 24px; white-space: nowrap; }
.api-token-revoked, .api-token-expired { color: #8f8f8f; }
.api-state { display: inline-block; font: 10px Inconsolata, monospace; text-transform: uppercase; letter-spacing: .04em; border: 1px solid #fff2; border-radius: 2px; padding: 3px 6px; color: #cfcfcf; white-space: nowrap; }
.api-state-active { border-color: #9fcf9f66; color: #c8e3c8; }
.api-state-revoked, .api-state-expired { color: #8f8f8f; }
.api-danger { color: #f0b4b4; }
.button.api-danger-button { background: #f0b4b4; color: #2a1111; }
.button.api-danger-button:hover:not(:disabled) { background: #f7caca; }
.api-usage-total { font-size: 13px; }
.api-usage-total strong { font-weight: 400; color: #eee; }
.api-guide { max-width: 760px; font-size: 13px; }
.api-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.55; }
.api-steps strong { font-weight: 400; color: #eee; }
.api-guide a { text-decoration: underline; text-underline-offset: 3px; }
.api-dialog { font-size: 13px; }
.api-dialog .field { margin-bottom: 0; }
.api-dialog textarea { min-height: 72px; font: 12px Inconsolata, monospace; }
.api-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.api-fieldset legend { font-size: 12px; color: #b0b0b0; margin-bottom: 6px; padding: 0; }
.api-choice { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.api-choice input { width: 16px; height: 16px; margin: 0; accent-color: #ddd; }
.api-secret-notice { padding: 10px 12px; border: 1px solid #dcc99d88; border-left-width: 3px; border-radius: 4px; background: #dcc99d12; color: #e8d9b3; }
.api-secret-notice strong { font-weight: 500; color: #f3e6c4; }
.api-secret { font: 13px Inconsolata, monospace; letter-spacing: .02em; }
.api-dialog .field-error:empty { margin-top: 0; }
@media (max-width: 600px) {
  .api-section-head { align-items: stretch; flex-direction: column; }
  .api-month { min-width: 0; }
  /* The sixth account tab (API) does not fit a phone row: the strip scrolls instead of widening the page. */
  .account-tabs { overflow-x: auto; scrollbar-width: none; }
}

/* Account → Team, Usage, Storage (src/team.js, 7 October 2026). Tables use the API tab styles. */
.team-admin { gap: 20px; }
.team-invite, .team-budget { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.team-invite .field, .team-budget .field { flex: 1 1 260px; max-width: 420px; margin: 0; }
.team-invite p, .team-budget p { flex-basis: 100%; }
.team-budget-card { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); }
.team-budget-card h3 { font-size: 15px; font-weight: 400; margin: 0; }
/* No inline styles (CSP style-src 'self'): a native progress bar carries the share. */
.team-meter { appearance: none; -webkit-appearance: none; width: 100%; height: 6px; border: 0; border-radius: 3px; background: #ffffff14; overflow: hidden; }
.team-meter::-webkit-progress-bar { background: #ffffff14; border-radius: 3px; }
.team-meter::-webkit-progress-value { background: #e6e6e6; border-radius: 3px; }
.team-meter::-moz-progress-bar { background: #e6e6e6; border-radius: 3px; }
.team-usage-head { display: flex; justify-content: flex-start; }
.team-month { margin: 0; min-width: 200px; }
.team-admin select { max-width: 160px; }
.team-admin tr.muted td, .team-admin tr.muted th { opacity: .6; }