/* Dark surfaces for the panels created by the studio's existing controllers. */
body.atelier {
  --panel-ink: #f1f2f7;
  --panel-muted: #a1a6b7;
  --panel-line: #303444;
  --panel-accent: #8b7af5;
  --panel-tint: #29233f;
  --panel-danger: #ff9ca9;
  --panel-danger-bg: #3a202a;
  --panel-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* History is a workspace page, not a blocking overlay. */
body.atelier .shell #historyPanel {
  position: static;
  inset: auto;
  transform: none;
  width: 100%;
  min-width: 0;
  max-height: none;
  margin: 0;
  padding: 8px 0 28px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--panel-ink);
  box-shadow: none;
  font: 14px/1.6 var(--panel-font);
}
body.atelier #historyPanel .history-head {
  position: static;
  gap: 20px;
  margin: 0 0 24px;
  padding: 0 0 20px;
  border-color: var(--panel-line);
  background: transparent;
}
body.atelier #historyPanel .history-head h2 {
  margin: 5px 0 0;
  color: var(--panel-ink);
  font: 650 28px/1.25 var(--panel-font);
  letter-spacing: -.8px;
}
body.atelier #historyPanel .history-head .eyebrow {
  color: var(--panel-muted);
  font: 600 11px/1.4 var(--panel-font);
  letter-spacing: .1em;
}
body.atelier #historyPanel #historyClose {
  flex-shrink: 0;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  background: #191b24;
  color: var(--panel-ink);
  font: 600 13px/1.4 var(--panel-font);
}
body.atelier .history-type-switch {
  gap: 4px;
  margin: 0 0 24px;
  padding: 4px;
  border-color: var(--panel-line);
  border-radius: 12px;
  background: #12141c;
}
body.atelier .history-type-switch button {
  min-height: 40px;
  min-width: 106px;
  padding: 9px 20px;
  border-color: transparent;
  border-radius: 8px;
  color: var(--panel-muted);
  background: transparent;
  font: 600 13px/1.4 var(--panel-font);
}
body.atelier .history-type-switch button[aria-pressed="true"] {
  background: #191b24;
  border-color: #393347;
  color: var(--panel-accent);
  box-shadow: 0 2px 5px #00000026;
}
body.atelier #historyPanel :is(.history-list, .cincong-history-grid) {
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 20px;
  color: var(--panel-muted);
}
body.atelier #historyPanel :is(.history-list .history-card, .cincong-history-grid article) {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--panel-line);
  border-radius: 16px;
  background: #191b24;
  box-shadow: 0 3px 12px #0000001a;
}
body.atelier .history-media {
  gap: 2px;
  background: #101116;
}
body.atelier .history-media a { height: 200px; }
body.atelier .history-media a > span {
  bottom: 10px;
  left: 10px;
  padding: 5px 8px;
  border: 1px solid #ffffff30;
  border-radius: 6px;
  background: #101116cc;
  color: #f1f2f7;
  font-size: 11px;
  letter-spacing: .05em;
}
body.atelier .history-no-video {
  padding: 16px;
  background: #15171f;
  color: var(--panel-muted);
  font-size: 13px;
  text-align: center;
}
body.atelier .history-details { padding: 18px 18px 16px; }
body.atelier .history-card-heading { gap: 10px; flex-wrap: wrap; }
body.atelier .history-card-heading time { color: var(--panel-muted); font-size: 12px; }
body.atelier .history-state {
  border-color: #59482e;
  background: #352c20;
  color: #e9c279;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 9px;
}
body.atelier .history-state.is-finished {
  background: #17352c;
  border-color: #2d5747;
  color: #79d7af;
}
body.atelier .history-state.is-error {
  background: var(--panel-danger-bg);
  border-color: #61333f;
  color: var(--panel-danger);
}
body.atelier .history-card .history-details h3 {
  color: var(--panel-ink);
  font: 600 16px/1.5 var(--panel-font);
  letter-spacing: -.2px;
}
body.atelier .history-card :is(.history-video-name, .history-user) {
  color: var(--panel-muted);
  font-size: 13px;
}
body.atelier .history-output-links a {
  border-color: #45395f;
  border-radius: 8px;
  background: var(--panel-tint);
  color: #c2b7ff;
  font-size: 13px;
  line-height: 1.5;
  padding: 9px 11px;
}
body.atelier .history-card .history-actions {
  gap: 10px;
  padding: 13px 18px;
  border-color: var(--panel-line);
  background: #161821;
}
body.atelier .history-saved { color: #79d7af; font-size: 12px; }
body.atelier .history-actions .resume-job {
  min-height: 40px;
  background: var(--panel-accent);
  color: #101116;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--panel-accent);
}
body.atelier .history-actions .delete-job {
  min-height: 38px;
  border-color: #61333f;
  color: var(--panel-danger);
  background: #191b24;
  font-size: 13px;
}
body.atelier .history-card .history-error {
  background: var(--panel-danger-bg);
  color: var(--panel-danger) !important;
  font-size: 13px !important;
  line-height: 1.6;
}
body.atelier .history-empty {
  padding: 56px 24px;
  background: #191b24;
  border-color: #393647;
  color: var(--panel-muted);
  font-size: 14px;
}
body.atelier .cincong-photo-history > h3 {
  margin: 0 0 20px;
  color: var(--panel-ink);
  font: 600 17px/1.5 var(--panel-font);
}
/* Empty photo and video archives intentionally share the same quiet layout. */
body.atelier .history-empty-state {
  margin: 28px 0 0;
  color: var(--panel-muted);
}
body.atelier .history-empty-state h3 {
  margin: 0 0 20px;
  color: var(--panel-ink);
  font: 600 17px/1.5 var(--panel-font);
}
body.atelier .history-empty-state p {
  margin: 0;
  font-size: 14px;
}
body.atelier .cincong-history-grid img {
  height: 250px;
  background: #12141c;
}
body.atelier .cincong-history-grid a {
  margin: 0;
  padding: 14px 16px;
  border-color: var(--panel-line);
  background: #191b24;
  color: #c2b7ff;
  font-size: 13px;
  font-weight: 600;
}
body.atelier .cincong-history-grid button {
  margin: 0 16px 16px;
  padding: 8px 11px;
  min-height: 38px;
  border: 1px solid #61333f;
  border-radius: 8px;
  background: #191b24;
  color: var(--panel-danger);
  font-size: 13px;
}
body.atelier .cincong-photo-history > p {
  color: var(--panel-danger);
  font-size: 13px;
  line-height: 1.6;
}

/* Costs and calendar. */
body.atelier .billing-intro { margin: 0 0 22px; }
body.atelier .billing-intro > p { color: var(--panel-muted); font-size: 11px; letter-spacing: .1em; }
body.atelier .billing-intro h3 {
  color: var(--panel-ink);
  font: 600 22px/1.35 var(--panel-font);
  letter-spacing: -.4px;
}
body.atelier .billing-intro > span { color: var(--panel-muted); font-size: 14px; }
body.atelier .billing-people { gap: 9px; margin: 20px 0 24px; }
body.atelier .billing-people .billing-person {
  min-height: 46px;
  border-color: var(--panel-line);
  background: #191b24;
  color: var(--panel-ink);
  font-size: 13px;
}
body.atelier .billing-people .billing-person.active {
  border-color: #7868ba;
  background: var(--panel-tint);
  color: #c2b7ff;
}
body.atelier .billing-avatar { background: #29233f; color: #8b7af5; font-size: 13px; }
body.atelier .billing-person-check { color: #8b7af5; }
body.atelier :is(.billing-summary article, .billing-summary article + article, .billing-totals article, .billing-totals article:nth-child(2), .billing-totals article:nth-child(3)) {
  gap: 10px;
  padding: 23px 24px;
  border: 1px solid var(--panel-line);
  border-radius: 16px;
  background: #191b24;
}
body.atelier .billing-summary article:first-child {
  border-color: #45395f;
  background: var(--panel-tint);
}
body.atelier :is(.billing-summary strong, .billing-totals strong) {
  color: var(--panel-ink);
  font-family: var(--panel-font);
  font-weight: 650;
  letter-spacing: -1px;
}
body.atelier .billing-summary strong { font-size: 36px; }
body.atelier .billing-totals strong { font-size: 28px; }
body.atelier :is(.billing-summary small, .billing-totals small) {
  color: var(--panel-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
}
body.atelier .billing-summary :is(span, em) { color: var(--panel-muted); }
body.atelier .billing-summary span { font-size: 13px; }
body.atelier .full-calendar {
  padding: 24px;
  border-color: var(--panel-line);
  border-radius: 16px;
  background: #191b24;
}
body.atelier .calendar-nav strong { color: var(--panel-ink); font-size: 18px; font-weight: 600; }
body.atelier .calendar-nav button {
  width: 40px;
  height: 40px;
  border-color: var(--panel-line);
  background: #191b24;
  color: var(--panel-ink);
  font-size: 16px;
}
body.atelier .calendar-week { color: var(--panel-muted); font-size: 12px; font-weight: 600; }
body.atelier .calendar-grid .calendar-cell {
  min-height: 92px;
  padding: 12px;
  border-color: #2c2f3d;
  border-radius: 10px;
  background: #20232e;
  color: var(--panel-muted);
  font-size: 13px;
}
body.atelier .calendar-grid .calendar-cell b { font-weight: 600; }
body.atelier .calendar-grid .calendar-cell small { font-size: 12px; color: var(--panel-muted); }
body.atelier .calendar-grid .calendar-cell.has-usage {
  border-color: #45395f;
  background: #29233f;
  color: #c2b7ff;
}
body.atelier .calendar-grid .calendar-cell.has-usage small:last-child { color: #c2b7ff; }
body.atelier .calendar-grid .calendar-cell.today {
  border-color: #9d8cf7;
  background: var(--panel-tint);
  box-shadow: inset 0 0 0 1px #9d8cf724;
}
body.atelier .billing-footnote { font-size: 13px; color: var(--panel-muted); }
body.atelier :is(.calendar-total, .monthly-total) {
  border-color: #45395f;
  background: var(--panel-tint);
  color: #c2b7ff;
  font-size: 14px;
}
body.atelier .billing-table { font-size: 13px; color: var(--panel-ink); }
body.atelier .billing-table :is(th, td) { padding: 13px 10px; border-color: var(--panel-line); }
body.atelier .billing-table th { color: var(--panel-muted); font-weight: 600; }
body.atelier .billing-total { color: var(--panel-ink); font-size: 15px; }

/* Shared account dialogs: keep display under the native dialog controller. */
body.atelier :is(.password-dialog, .admin-users-dialog, .balance-history, .account-notifications-dialog) {
  box-sizing: border-box;
  border: 1px solid var(--panel-line);
  border-radius: 18px;
  background: #191b24;
  color: var(--panel-ink);
  box-shadow: 0 24px 80px #00000066, 0 3px 12px #00000026;
  font: 14px/1.6 var(--panel-font);
  scrollbar-color: #4d4863 transparent;
  color-scheme: dark;
}
body.atelier :is(.admin-users-dialog, .balance-history, .account-notifications-dialog, dialog:has(.password-dialog))::backdrop {
  background: #080910b3;
  backdrop-filter: blur(6px);
}
body.atelier .admin-users-dialog::before { display: none; }
body.atelier :is(.password-dialog h2, .admin-users-head h2, .bh-heading h2, .account-notifications-form h2) {
  color: var(--panel-ink);
  font: 650 26px/1.25 var(--panel-font);
  letter-spacing: -.65px;
}
body.atelier :is(.password-dialog p, .admin-users-note, .admin-panel-subtitle, .bh-message, .bh-footnote, .account-notifications-intro, .account-notifications-help, .account-notifications-toggle small) {
  color: var(--panel-muted);
  font-size: 13px;
  line-height: 1.7;
}
body.atelier :is(.password-kicker, .admin-users-head .eyebrow, .bh-heading small, .account-notifications-kicker) {
  color: #a59bb9;
  font: 600 11px/1.5 var(--panel-font);
  letter-spacing: .08em;
}
body.atelier :is(.password-dialog label, .admin-user-form label, .account-notifications-email) {
  gap: 8px;
  color: var(--panel-ink);
  font-size: 13px;
  font-weight: 600;
}
body.atelier :is(.password-dialog input, .admin-user-form input, .admin-user-form select, .admin-users-search, .account-notifications-email input) {
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid #353849;
  border-radius: 10px;
  background: #12141c !important;
  color: var(--panel-ink);
  box-shadow: none !important;
  font: 400 14px/1.4 var(--panel-font);
}
body.atelier :is(.password-dialog input, .admin-user-form input, .admin-user-form select, .admin-users-search, .account-notifications-email input):hover {
  border-color: #58516b;
}
body.atelier :is(.password-dialog input, .admin-user-form input, .admin-user-form select, .admin-users-search, .account-notifications-email input):focus {
  outline: 2px solid #a596f7;
  outline-offset: 2px;
  border-color: var(--panel-accent);
}
body.atelier :is(.password-dialog input, .admin-user-form input, .admin-users-search, .account-notifications-email input)::placeholder {
  color: #858c9e;
  opacity: 1;
}
body.atelier :is(.password-dialog small, .admin-user-form small, .account-notifications-message) {
  color: #79d7af;
  font-size: 13px;
  line-height: 1.6;
}
body.atelier :is(.password-dialog small.error, .admin-user-form small.error, .account-notifications-message.error) {
  color: var(--panel-danger);
}
/* Password validation uses one message node without state classes. */
body.atelier .password-dialog #passwordMessage { color: var(--panel-muted); }
body.atelier :is(.password-actions button:last-child, .admin-save, .account-notifications-actions button[type="submit"]) {
  min-height: 44px;
  padding: 11px 17px;
  border: 1px solid var(--panel-accent);
  border-radius: 10px;
  background: var(--panel-accent);
  color: #101116;
  box-shadow: none;
  font: 600 13px/1.5 var(--panel-font);
}
body.atelier :is(.password-actions button:last-child, .admin-save, .account-notifications-actions button[type="submit"]):hover:not(:disabled) {
  background: #a495ff;
  border-color: #a495ff;
  box-shadow: none;
  transform: none;
}
body.atelier :is(.password-actions button:first-child, .admin-secondary, .account-notifications-actions button:not([type="submit"])) {
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  background: #191b24;
  color: var(--panel-muted);
  font: 600 13px/1.5 var(--panel-font);
}
body.atelier :is(.password-close, .admin-close, .bh-close, .admin-edit-close, .account-notifications-close) {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  background: #20232e;
  color: var(--panel-muted);
  line-height: 1;
  font-size: 24px;
}
body.atelier :is(.password-close, .admin-close, .bh-close, .admin-edit-close, .account-notifications-close):hover {
  background: #29233f;
  border-color: #534969;
  color: var(--panel-ink);
  transform: none;
}
body.atelier .admin-users-card { padding: 30px; scrollbar-color: #4d4863 transparent; }
body.atelier .admin-users-card::-webkit-scrollbar-thumb { background: #4d4863; }
body.atelier .admin-users-list { gap: 10px; border-color: var(--panel-line); }
body.atelier .admin-user-row {
  gap: 12px;
  padding: 15px;
  border-color: var(--panel-line);
  border-radius: 12px;
  background: #191b24;
  color: var(--panel-ink);
  box-shadow: none;
}
body.atelier .admin-user-row:hover,
body.atelier .admin-user-row:focus {
  background: #252232;
  border-color: #706295;
  transform: none;
  box-shadow: none;
}
body.atelier .admin-user-row b { font-size: 14px; overflow-wrap: anywhere; }
body.atelier .admin-user-row small { color: var(--panel-muted); font-size: 12px; }
body.atelier .admin-user-row span { color: #c2b7ff; font-size: 13px; }
body.atelier .admin-user-row.is-blocked { background: #3a202a; border-color: #61333f; }
body.atelier .admin-user-row.is-blocked small { color: var(--panel-danger); }
body.atelier .admin-users-dialog.is-editing .admin-user-form {
  padding: 20px;
  border-color: #45395f;
  background: #15171f;
  box-shadow: none;
}
body.atelier .admin-users-dialog.is-editing .admin-users-head { border-color: var(--panel-line); }
body.atelier .admin-users-dialog.is-editing .admin-users-head h2 { color: var(--panel-ink); }
body.atelier .admin-user-form label:first-of-type input[readonly] {
  background: #20232e !important;
  border-color: var(--panel-line);
  color: var(--panel-muted);
}
body.atelier .admin-users-dialog.is-editing .admin-save { box-shadow: none; }
body.atelier .admin-user-form :is(#testRunpodKey, #changeRunpodKey),
body.atelier .admin-users-dialog.is-editing .admin-user-form :is(#testRunpodKey, #changeRunpodKey) {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #45395f;
  background: var(--panel-tint);
  color: #c2b7ff;
  box-shadow: none;
  font: 600 13px/1.5 var(--panel-font);
}
body.atelier .admin-user-form :is(#testRunpodKey, #changeRunpodKey):hover,
body.atelier .admin-users-dialog.is-editing .admin-user-form :is(#testRunpodKey, #changeRunpodKey):hover {
  border-color: #7868ba;
  background: #352c50;
  color: #c2b7ff;
  transform: none;
}
body.atelier .admin-user-form #runpodKeyConsole {
  padding: 12px;
  border-color: var(--panel-line);
  background: #12141c;
  color: var(--panel-muted);
  font-size: 12px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
body.atelier .account-notifications-toggle input { accent-color: var(--panel-accent); }
body.atelier .account-notifications-toggle strong { color: var(--panel-ink); font-size: 14px; }
body.atelier .account-notifications-delivery {
  padding: 14px;
  border-color: #59482e;
  background: #352c20;
  color: #e9c279;
  font-size: 13px;
  line-height: 1.6;
}

/* Balance history and the SVG created by balance-history.js. */
body.atelier .balance-history { padding: 30px; }
body.atelier .bh-summary {
  padding: 22px;
  border-color: #45395f;
  border-radius: 14px;
  background: #29233f;
}
body.atelier .bh-summary span { color: var(--panel-muted); font-size: 13px; }
body.atelier .bh-current { color: #c2b7ff; font-size: 34px; font-weight: 650; }
body.atelier .bh-range { color: var(--panel-ink); font-size: 16px; }
body.atelier .bh-controls button {
  min-height: 42px;
  padding: 10px 14px;
  border-color: var(--panel-line);
  border-radius: 9px;
  background: #191b24;
  color: var(--panel-muted);
  font: 600 13px/1.5 var(--panel-font);
}
body.atelier .bh-controls button[aria-pressed="true"] {
  border-color: var(--panel-accent);
  background: var(--panel-accent);
  color: #101116;
}
body.atelier .bh-controls button:hover { border-color: #7868ba; }
body.atelier .bh-chart { padding: 12px; border: 1px solid var(--panel-line); background: #12141c; }
body.atelier .bh-chart svg path { stroke: #8b7af5; }
body.atelier .bh-chart svg circle { fill: #8b7af5; }
body.atelier .bh-chart svg line { stroke: #303444; }
body.atelier .bh-chart svg text { fill: #a1a6b7; }
body.atelier .bh-point { color: #c2b7ff; font-size: 13px; }
body.atelier .bh-footnote { border-color: var(--panel-line); }

/* The paired-video queue and its add-files dialog. */
body.atelier .batch-queue {
  padding: 20px;
  border-color: var(--panel-line);
  border-radius: 14px;
  background: #20232e;
  color: var(--panel-ink);
}
body.atelier :is(.batch-title > small, .batch-add-head small, .batch-order) {
  color: var(--panel-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
}
body.atelier .batch-title > b { font-size: 18px; font-weight: 650; }
body.atelier .batch-actions > span { color: var(--panel-muted); font-size: 13px; }
body.atelier .batch-actions button {
  min-height: 40px;
  border-color: #45395f;
  background: var(--panel-tint);
  color: #c2b7ff;
  font-size: 13px;
}
body.atelier .batch-actions button:hover { background: #352c50; }
body.atelier .batch-progress { height: 5px; background: #353046; }
body.atelier .batch-progress > div { background: var(--panel-accent); }
body.atelier .batch-hint { color: var(--panel-muted); font-size: 13px; }
body.atelier .batch-item { border-color: var(--panel-line); background: #191b24; padding: 16px; }
body.atelier .batch-item.active { border-color: #7868ba; background: #242033; box-shadow: inset 3px 0 #8b7af5; }
body.atelier .batch-item em { font-size: 12px; color: var(--panel-muted); background: #20232e; border-color: var(--panel-line); }
body.atelier .batch-item.active em { color: #c2b7ff; background: var(--panel-tint); border-color: #45395f; }
body.atelier .batch-item.done em { color: #79d7af; background: #17352c; border-color: #2d5747; }
body.atelier .batch-item.state-error em { color: var(--panel-danger); background: var(--panel-danger-bg); border-color: #61333f; }
body.atelier .batch-item.state-stopped em { color: #e9c279; background: #352c20; border-color: #59482e; }
body.atelier .batch-pair-row > i { background: #29233f; border-color: #45395f; color: #a99ac7; }
body.atelier .batch-pair-row small { color: var(--panel-muted); font-size: 11px; letter-spacing: .05em; }
body.atelier .batch-pair-row b { color: var(--panel-ink); font-size: 13px; }
body.atelier .batch-item-foot { border-color: var(--panel-line); color: var(--panel-muted); font-size: 12px; }
body.atelier .batch-dot { background: #7c778d; }
body.atelier .active .batch-dot { background: #8b7af5; }
body.atelier .done .batch-dot { background: #79d7af; }
body.atelier .state-error .batch-dot { background: var(--panel-danger); }
body.atelier .batch-add-dialog { background: #080910b3; backdrop-filter: blur(6px); }
body.atelier .batch-add-card {
  padding: 28px;
  border-color: var(--panel-line);
  border-radius: 18px;
  background: #191b24;
  color: var(--panel-ink);
  box-shadow: 0 24px 80px #00000066;
  font-family: var(--panel-font);
}
body.atelier .batch-add-head h2 { color: var(--panel-ink); font: 650 25px/1.3 var(--panel-font); letter-spacing: -.6px; }
body.atelier .batch-add-head button {
  border-color: var(--panel-line);
  border-radius: 10px;
  background: #20232e;
  color: var(--panel-muted);
}
body.atelier .batch-add-card > p { color: var(--panel-muted); font-size: 13px; line-height: 1.7; }
body.atelier .batch-file { padding: 16px; border-color: #45395f; background: #15171f; }
body.atelier .batch-file:hover,
body.atelier .batch-file:focus-within { border-color: #9d8cf7; background: #242033; }
body.atelier .batch-file-heading { color: var(--panel-ink); font-size: 13px; }
body.atelier .batch-file-heading > b { color: #a99ac7; font-size: 11px; }
body.atelier .batch-file-preview { background: #29233f; }
body.atelier .batch-file-symbol { color: #a99ac7; }
body.atelier .batch-file input { color: var(--panel-muted); font-size: 12px; }
body.atelier .batch-file input::file-selector-button {
  padding: 8px 10px;
  border-color: #45395f;
  background: #191b24;
  color: #c2b7ff;
  font-size: 12px;
}
body.atelier .batch-file > small { color: var(--panel-muted); font-size: 12px; }
body.atelier .batch-duration { border-color: var(--panel-line); background: #20232e; }
body.atelier .batch-duration b { color: var(--panel-ink); font-size: 13px; }
body.atelier .batch-duration small { color: var(--panel-muted); font-size: 12px; }
body.atelier .batch-duration input { accent-color: var(--panel-accent); }
body.atelier .batch-duration output { color: #c2b7ff; font-size: 14px; }
body.atelier .batch-add-card > .batch-pair-note { color: var(--panel-muted); font-size: 13px; }
body.atelier .batch-add-submit { background: var(--panel-accent); color: #101116; min-height: 48px; font-size: 14px; }
body.atelier .batch-add-submit:hover:not(:disabled) { background: #a495ff; }
body.atelier .batch-add-card > #batchAddError { color: var(--panel-danger); font-size: 13px; }

/* Processing state remains legible against the dark workspace. */
body.atelier .side { padding: 22px; border-color: var(--panel-line); background: #191b24; border-radius: 16px; }
body.atelier .progress-title .eyebrow { color: var(--panel-muted); font-size: 11px; letter-spacing: .08em; }
body.atelier .progress-title > span { padding: 5px 9px; color: #c2b7ff; background: var(--panel-tint); font-size: 12px; }
body.atelier .side li { color: var(--panel-muted); font-size: 13px; line-height: 1.6; }
body.atelier .side li i { background: #20232e; border-color: #393647; color: #a59bb9; }
body.atelier .side li:not(:last-child)::after { background: #393647; }
body.atelier .side li.done { color: var(--panel-ink); }
body.atelier .side li.done i { background: #17352c; border-color: #2d5747; color: #79d7af; }
body.atelier .shutdown { border-color: var(--panel-line); }
body.atelier .shutdown b { color: var(--panel-ink); font-size: 13px; }
body.atelier .shutdown p { color: var(--panel-muted); font-size: 13px; line-height: 1.6; }
body.atelier #status {
  padding: 18px;
  border-color: #45395f;
  border-radius: 12px;
  background: #242033;
  color: var(--panel-ink);
}
body.atelier #status b { font-size: 14px; }
body.atelier #status span { color: #8b7af5; font-size: 13px; }
body.atelier #status p { color: var(--panel-muted); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
body.atelier #status button { min-height: 40px; background: #191b24; border-color: #61333f; color: var(--panel-danger); font-size: 13px; }
body.atelier .system-health {
  margin: 20px 0 0;
  padding: 22px;
  border-color: var(--panel-line);
  border-radius: 16px;
  background: #191b24;
  color: var(--panel-ink);
}
body.atelier .system-health-head b { font-size: 14px; font-weight: 600; }
body.atelier .system-health-head span { color: #79d7af; font: 500 12px/1.5 var(--panel-font); }
body.atelier .system-health-grid { gap: 12px; margin-top: 18px; }
body.atelier .system-health-grid > div { padding: 4px 15px; background: transparent; border-color: var(--panel-line); }
body.atelier .system-health-grid small { color: var(--panel-muted); font: 500 11px/1.5 var(--panel-font); letter-spacing: .04em; }
body.atelier .system-health-grid strong { color: var(--panel-ink); font-size: 14px; font-weight: 600; }
body.atelier .system-health-grid em { color: var(--panel-muted); font-size: 12px; line-height: 1.6; }
body.atelier .system-health.warning { border-color: #59482e; background: #352c20; }
body.atelier .system-health.warning .system-health-head span { color: #e9c279; }
body.atelier .system-health.warning .system-health-grid > div { border-color: #59482e; }
body.atelier #comfyLiveProgress {
  padding: 17px 20px;
  border-color: #45395f;
  border-radius: 14px;
  background: #20232ef2;
  color: var(--panel-ink);
  box-shadow: 0 10px 40px #00000066;
  backdrop-filter: blur(16px);
}
body.atelier #comfyLiveProgress .comfy-live-head { font-size: 13px !important; line-height: 1.5; }
body.atelier #comfyLiveProgress .comfy-live-head span { flex-shrink: 0; color: #8b7af5; font-size: 13px; }
body.atelier #comfyLiveProgress .comfy-live-track { height: 6px; background: #353046; }
body.atelier #comfyLiveProgress .comfy-live-track span { background: #8b7af5; }

/* Keyboard access, disabled controls, and visibility stay explicit. */
body.atelier :is(#historyPanel, .admin-users-dialog, .balance-history, .password-dialog, .account-notifications-dialog, .batch-add-dialog, .batch-queue, #status) :is(button, a, input, select, [tabindex]):focus-visible {
  outline: 2px solid #a596f7;
  outline-offset: 3px;
}
body.atelier :is(.admin-users-dialog, .password-dialog, .account-notifications-dialog, .batch-add-dialog, .batch-queue, #historyPanel, #status) :is(button, input, select):disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
body.atelier :is(#historyPanel, .batch-queue, .batch-add-dialog, #status, #comfyLiveProgress)[hidden],
body.atelier :is(#historyPanel, .admin-users-dialog, .password-dialog, .balance-history, .account-notifications-dialog, .batch-add-dialog, .batch-queue, .side) [hidden] {
  display: none !important;
}
body.atelier dialog:not([open]) { display: none !important; }

@media (max-width: 760px) {
  body.atelier .system-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.atelier .system-health-head { align-items: flex-start; }
  body.atelier .system-health-head span { text-align: right; }
  body.atelier .billing-totals { grid-template-columns: 1fr; }
  body.atelier .full-calendar { padding: 16px; }
  body.atelier .full-calendar .calendar-grid { gap: 5px; }
  body.atelier .calendar-grid .calendar-cell { min-height: 82px; padding: 8px 5px; }
}
@media (max-width: 560px) {
  body.atelier #historyPanel .history-head { gap: 12px; margin-bottom: 20px; }
  body.atelier #historyPanel .history-head h2 { font-size: 24px; }
  body.atelier #historyPanel #historyClose { padding: 9px 12px; }
  body.atelier #historyPanel :is(.history-list, .cincong-history-grid) { grid-template-columns: 1fr; gap: 16px; }
  body.atelier .history-media a { height: 190px; }
  body.atelier .billing-summary { gap: 10px; }
  body.atelier :is(.billing-summary article, .billing-summary article + article) { padding: 17px 14px; }
  body.atelier .billing-summary strong { font-size: 27px; letter-spacing: -.7px; }
  body.atelier .billing-summary em { font-size: 18px; }
  body.atelier .billing-summary small { font-size: 10px; letter-spacing: .03em; }
  body.atelier .full-calendar { padding: 12px; }
  body.atelier .full-calendar .calendar-grid { gap: 3px; }
  body.atelier .calendar-grid .calendar-cell { min-height: 78px; padding: 7px 2px; font-size: 12px; text-align: center; border-radius: 7px; }
  body.atelier .calendar-grid .calendar-cell small { font-size: 10px; letter-spacing: -.2px; }
  body.atelier .calendar-nav strong { font-size: 16px; }
  body.atelier .calendar-week { font-size: 11px; }
  body.atelier :is(.password-dialog h2, .admin-users-head h2, .bh-heading h2, .account-notifications-form h2) { font-size: 23px; }
  body.atelier :is(.admin-users-card, .password-dialog, .account-notifications-form) { padding: 26px 20px; }
  body.atelier .admin-users-dialog.is-editing .admin-user-form { padding: 16px; }
  body.atelier .admin-user-form { grid-template-columns: minmax(0, 1fr); }
  body.atelier .admin-user-row { flex-wrap: wrap; align-items: flex-start; }
  body.atelier .admin-user-row small { flex-basis: 100%; order: 3; }
  body.atelier .admin-form-actions { flex-wrap: wrap; }
  body.atelier .balance-history { padding: 24px 18px; }
  body.atelier .bh-heading { align-items: flex-start; }
  body.atelier .bh-close { flex-shrink: 0; }
  body.atelier .bh-summary { padding: 18px; flex-direction: column; gap: 18px; }
  body.atelier .bh-current { font-size: 29px; overflow-wrap: anywhere; }
  body.atelier .bh-controls { gap: 6px; }
  body.atelier .bh-controls button { padding: 9px 11px; font-size: 12px; }
  body.atelier .bh-controls .bh-refresh { margin-left: 0; }
  body.atelier .bh-chart { padding: 2px; }
  body.atelier .batch-add-dialog { padding: 12px; }
  body.atelier .batch-add-card { padding: 22px 18px; }
  body.atelier .batch-add-head h2 { font-size: 23px; }
  body.atelier .batch-pair-inputs { gap: 10px; }
  body.atelier .batch-file { padding: 11px; }
  body.atelier .batch-file-heading { flex-wrap: wrap; gap: 4px 7px; }
  body.atelier .batch-file input::file-selector-button { display: block; margin: 0 0 7px; }
  body.atelier .batch-duration { display: grid; gap: 12px; }
  body.atelier .batch-duration label { min-width: 0; }
  body.atelier .batch-queue { padding: 16px; }
  body.atelier .batch-head { align-items: flex-start; }
  body.atelier .batch-item-top { flex-wrap: wrap; }
  body.atelier .system-health { padding: 18px; }
  body.atelier .system-health-grid { gap: 16px 8px; }
  body.atelier .system-health-grid > div { padding: 2px 10px; }
  body.atelier #comfyLiveProgress { bottom: 12px; padding: 14px 16px; }
}
@media (max-width: 380px) {
  body.atelier .billing-summary { grid-template-columns: 1fr; }
  body.atelier .batch-pair-inputs { grid-template-columns: 1fr; }
  body.atelier .system-health-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  body.atelier :is(.batch-progress > div, #comfyLiveFill, .admin-user-row, .admin-save) { transition: none; }
}