:root {
  --ink: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --paper: #fff;
  --violet: #5b4df5;
  --green: #059669;
  --danger: #dc2626;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #eef0f5;
  color: var(--ink);
  font-family: "Microsoft YaHei UI", system-ui, sans-serif;
}
.hidden {
  display: none !important;
}
button,
input,
select {
  font: inherit;
}
button {
  border: 0;
  cursor: pointer;
}
.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card {
  width: min(420px, 100%);
  padding: 40px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 24px 70px #312e8124;
}
.login-secondary{width:100%;margin-top:10px}.form-message{min-height:22px;margin:12px 0 0;font-size:13px}.form-message.success{color:var(--green)}
.brand-mark {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  font-size: 25px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--violet), #8b5cf6);
}
.eyebrow {
  margin: 16px 0 6px;
  color: var(--violet);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.login-card h1,
.topbar h1 {
  margin: 0;
}
.muted {
  color: var(--muted);
  line-height: 1.6;
}
.login-card label,
.settings-panel > label {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 700;
}
.login-card input,
#watermarkText,
.settings-panel input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.primary {
  width: 100%;
  margin-top: 20px;
  padding: 14px 20px;
  border-radius: 12px;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, var(--violet), #4338ca);
}
.primary:disabled {
  opacity: 0.45;
}
.error {
  color: var(--danger);
}
.app {
  width: min(1520px, 100%);
  margin: auto;
  padding: 28px;
}
.topbar,
.control-head,
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar {
  margin-bottom: 22px;
}
.user-area {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ghost,
.mini {
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.mini {
  padding: 7px 10px;
  color: #4338ca;
  background: #eef2ff;
}
.panel {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 30px #1118270d;
}
.admin-panel{padding:24px}.user-permission-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.user-permission-card{padding:18px;border:1px solid var(--line);border-radius:16px;background:#fafbff}.user-permission-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.user-permission-head strong,.user-permission-head small{display:block}.user-permission-head small{margin-top:4px;color:var(--muted)}.enable-user{display:flex;align-items:center;gap:7px;font-size:13px}.permission-checks{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:16px 0}.permission-checks label{display:flex;align-items:center;gap:7px;padding:9px;border-radius:9px;background:#fff;font-size:13px}.save-user-permissions{width:100%}
.user-presence{display:flex;align-items:center;gap:6px;margin-top:7px;color:var(--muted);font-size:12px}.user-presence i{width:8px;height:8px;border-radius:50%;background:#94a3b8}.user-presence.online{color:var(--green)}.user-presence.online i{background:var(--green);box-shadow:0 0 0 3px #34d39920}.admin-password-reset{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:10px}.admin-password-reset input{min-width:0;height:40px;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink)}.admin-password-reset button{white-space:nowrap}
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  padding: 6px;
  border-radius: 14px;
  background: #e5e7eb;
}
.tabs button {
  padding: 11px 20px;
  border-radius: 10px;
  background: transparent;
  font-weight: 800;
}
.tabs button.active {
  background: #fff;
  color: var(--violet);
}
.dashboard-shell{display:grid;gap:18px}.dashboard-welcome{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:26px 4px 8px}.dashboard-welcome .eyebrow{margin-top:0}.dashboard-welcome h2{margin:0;font-size:32px}.dashboard-welcome p{margin-bottom:0}.period-badge{padding:9px 13px;border-radius:999px;background:#fff;color:var(--muted);font-size:13px}.dashboard-metrics{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}.dashboard-metrics>div{padding:22px;border-right:1px solid var(--line)}.dashboard-metrics>div:last-child{border-right:0}.dashboard-metrics span,.dashboard-metrics small{display:block;color:var(--muted);font-size:12px}.dashboard-metrics strong{display:inline-block;margin:8px 5px 3px 0;font-size:27px}.dashboard-detail{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:18px}.usage-detail,.dashboard-actions,.access-notice{padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff}.usage-detail h2,.dashboard-actions h2,.access-notice h2{margin:0}.usage-detail .eyebrow,.dashboard-actions .eyebrow,.access-notice .eyebrow{margin-top:0}.billing-formula{margin:20px 0;padding:15px 17px;border-left:4px solid var(--violet);background:#f6f5ff;color:#3730a3;line-height:1.6}.token-breakdown{display:flex;gap:10px;margin-bottom:16px}.token-breakdown span{flex:1;padding:13px 15px;border-radius:12px;background:#f8fafc;color:var(--muted)}.token-breakdown b{float:right;color:var(--ink)}.quick-action-list{display:grid;gap:9px;margin-top:17px}.quick-action-list button,.quick-action-list a{display:flex;justify-content:space-between;width:100%;padding:13px 14px;border-radius:11px;background:#f6f7fb;text-align:left;text-decoration:none;color:var(--ink)}.quick-action-list b{color:var(--violet)}.access-notice{display:flex;align-items:center;justify-content:space-between;gap:24px;border-color:#ddd6fe;background:linear-gradient(120deg,#fff,#f7f5ff)}.access-notice p{margin-bottom:0;line-height:1.6}.contact-options{display:flex;gap:10px;flex-wrap:wrap}.contact-options a,.contact-options>div{min-width:175px;padding:13px 15px;border:1px solid #ddd6fe;border-radius:12px;background:#fff;text-decoration:none;color:var(--ink)}.contact-options span,.contact-options strong{display:block}.contact-options span{margin-bottom:4px;color:var(--muted);font-size:11px}.contact-options strong{font-size:15px}
.cost-metric{position:relative}.currency-switch{display:flex;align-items:center;gap:7px;margin-top:5px}.currency-switch>span{white-space:nowrap;font-size:11px}.currency-switch select{max-width:126px;padding:5px 24px 5px 8px;border:1px solid var(--line);border-radius:8px;background:#f8fafc;color:var(--ink);font-size:11px}.currency-rate-note{margin:2px 0 10px;color:#7c3aed;font-size:12px;line-height:1.5}
.control-shell {
  display: grid;
  gap: 18px;
}
.image-tools-shell{display:grid;gap:18px}.image-tools-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 4px}.image-tools-intro h2{margin:0;font-size:30px}.image-tools-intro p{margin-bottom:0}.plugin-download{width:auto;margin:0;text-decoration:none;white-space:nowrap}.image-tool{padding:24px}.image-tool-heading{display:flex;align-items:flex-start;gap:13px;margin-bottom:18px}.image-tool-heading>span{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:var(--violet);color:#fff;font-weight:800}.image-tool-heading h2{margin:0;font-size:21px}.image-tool-heading p{margin:5px 0 0;color:var(--muted);font-size:13px}.image-upload-zone{min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:20px;border:1.5px dashed #a5b4fc;border-radius:14px;background:#f7f7ff;color:#4338ca;font-weight:800;cursor:pointer}.image-upload-zone input{display:none}.image-upload-zone small{color:var(--muted);font-weight:400}.image-upload-zone.compact{min-height:130px}.image-file-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:14px 0}.image-file-item{min-width:0;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px;border:1px solid var(--line);border-radius:10px}.image-file-item img{width:44px;height:44px;border-radius:7px;object-fit:cover}.image-file-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.image-file-item button{padding:6px;color:var(--danger);background:transparent;font-size:11px}.image-setting-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.image-setting-row label{display:grid;gap:7px;color:var(--muted);font-size:12px}.image-setting-row select,.image-setting-row input{height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}.image-action-row{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}.image-action-row .primary{width:auto;margin:0}.image-results{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px;padding-top:44px}.image-results:empty{display:none}.download-all-images{position:absolute;right:0;top:0}.image-result{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fafafa}.image-result img{display:block;width:100%;aspect-ratio:1;object-fit:contain}.image-result button{width:100%;border-width:1px 0 0;border-radius:0}.crop-workspace{display:grid;grid-template-columns:minmax(320px,.8fr) minmax(380px,1.2fr);gap:18px}.crop-settings{grid-template-columns:1fr 1fr}.crop-workspace .primary{margin-top:14px}.crop-preview{min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#f5f6f8;color:var(--muted)}.crop-preview canvas{display:block;max-width:100%;max-height:520px;object-fit:contain}.plugin-guide{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px}.plugin-guide h2{margin:0}.plugin-guide p:last-child{max-width:850px;margin-bottom:0;color:var(--muted);line-height:1.7}.plugin-guide .eyebrow{margin-top:0}
.crop-settings{grid-template-columns:repeat(3,1fr)}.crop-results{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px}.crop-results:empty{display:none}.crop-result{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff}.crop-result img{display:block;width:100%;aspect-ratio:1;object-fit:contain}.crop-result button{width:100%;border-width:1px 0 0;border-radius:0}.crop-download-all{grid-column:1/-1;justify-self:end}
.control-head,
.status-panel,
.account-panel,
.device-panel,
.action-panel {
  padding: 22px;
}
.control-head h2,
.section-heading h2,
.action-panel h2 {
  margin: 0;
  font-size: 20px;
}
.section-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.control-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 18px;
}
.control-grid.browser-only {
  grid-template-columns: 1fr;
}
.browser-workflow-note {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  background: #eef2ff;
  color: #3730a3;
}
.browser-workflow-note code {
  font-family: inherit;
  font-weight: 700;
}
.device-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 9px;
  margin-top: 18px;
  max-height: 440px;
  overflow: auto;
}
.device-card {
  display: flex;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fafafa;
  cursor: pointer;
}
.device-card:has(input:checked) {
  border-color: #818cf8;
  background: #eef2ff;
}
.device-card input {
  width: 18px;
  height: 18px;
  accent-color: var(--violet);
}
.device-card strong {
  display: block;
}
.device-card small {
  color: var(--muted);
}
.online-dot {
  color: var(--green);
}
.offline-dot {
  color: var(--danger);
}
.action-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 16px 0;
}
.action-tabs button {
  padding: 10px 6px;
  border-radius: 9px;
  background: #f3f4f6;
}
.action-tabs button.active {
  color: #fff;
  background: var(--violet);
}
.platform-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 15px 0;
}
.platform-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.action-options {
  display: grid;
  gap: 10px;
}
.action-options select,
.action-options input {
  width: 100%;
  height: 43px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.safe-note {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}
.result-list {
  margin-top: 15px;
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.result-row,
.empty-row {
  display: grid;
  grid-template-columns: 150px 110px 90px 1fr;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.empty-row {
  display: block;
  color: var(--muted);
}
.status-success,
.status-active {
  color: var(--green);
  font-weight: 800;
}
.status-failed,
.status-banned,
.status-logged_out {
  color: var(--danger);
  font-weight: 800;
}
.account-table {
  margin-top: 15px;
  max-height: 360px;
  overflow: auto;
}
.account-row {
  display: grid;
  grid-template-columns: 120px 1.2fr 120px 1fr 150px;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.account-row.head {
  position: sticky;
  top: 0;
  background: #f3f4f6;
  font-weight: 800;
}
.report-box {
  padding: 12px;
  white-space: pre-wrap;
  background: #fafafa;
}
.workflow {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr) minmax(
      280px,
      0.8fr
    );
  gap: 18px;
}
.upload-panel,
.preview-panel,
.settings-panel,
.job-panel {
  padding: 22px;
}
.step-title {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}
.step-title > span {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #eef2ff;
  color: var(--violet);
  font-weight: 900;
}
.step-title h2 {
  margin: 0;
  font-size: 18px;
}
.step-title p {
  margin: 5px 0;
  color: var(--muted);
  font-size: 12px;
}
.drop-zone {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  border: 1.5px dashed #c7c9d4;
  border-radius: 16px;
  background: #fafafa;
  text-align: center;
}
.drop-zone input {
  display: none;
}
.file-list {
  max-height: 220px;
  overflow: auto;
}
.file-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid var(--line);
}
.stage {
  position: relative;
  width: 100%;
  max-height: 560px;
  aspect-ratio: 9/16;
  margin: auto;
  overflow: hidden;
  border-radius: 16px;
  background: #101114;
}
.stage video {
  width: 100%;
  height: 100%;
  display: none;
  object-fit: contain;
}
.stage.ready video {
  display: block;
}
.watermark {
  position: absolute;
  z-index: 2;
  padding: 2px 5px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px dashed #818cf8;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
  cursor: grab;
}
.empty-preview {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #9ca3af;
}
.stage.ready .empty-preview {
  display: none;
}
.presets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.presets button {
  padding: 8px;
  border-radius: 8px;
}
.presets button.active {
  color: #fff;
  background: var(--violet);
}
.range-label span {
  display: flex;
  justify-content: space-between;
}
.inline-control {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.inline-control input[type="number"] {
  width: 88px;
  height: 34px;
  margin-left: auto;
}
.job-panel {
  margin-top: 18px;
}
.merge-panel {
  padding: 26px;
}
.merge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 18px 0;
}
.merge-file {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 22px;
  border: 1.5px dashed #a5b4fc;
  border-radius: 16px;
  background: #f5f7ff;
  font-weight: 800;
}
.merge-file input { height: auto; padding: 8px; background: #fff; }
.merge-file span { color: var(--muted); font-size: 13px; font-weight: 500; word-break: break-all; }
.merge-settings {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 14px;
  margin-bottom: 18px;
}
.analyzer-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
}
#analyzerFrame {
  display: block;
  width: 100%;
  min-height: 900px;
  border: 0;
  background: transparent;
}
.embedded-app-frame {
  display: block;
  width: 100%;
  min-height: calc(100vh - 190px);
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 30px #1118270d;
}
.photo-print-shell{display:grid;grid-template-columns:minmax(340px,.85fr) minmax(420px,1.15fr);gap:18px;align-items:start}.photo-print-controls,.photo-print-preview{padding:24px}.photo-print-controls form{display:grid;gap:14px;margin-top:18px}.photo-upload-zone{min-height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:20px;border:1.5px dashed #a5b4fc;border-radius:14px;background:#f7f7ff;color:#4338ca;font-weight:800;cursor:pointer}.photo-upload-zone input{display:none}.photo-upload-zone small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-weight:400}.photo-print-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.photo-print-options label,.photo-print-submit>label,.photo-frame-controls label{display:grid;gap:7px;color:var(--muted);font-size:12px}.photo-print-options input:not([type=range]),.photo-print-options select,.photo-print-submit select,.photo-print-submit input[type=number]{width:100%;height:44px;padding:0 11px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}.photo-print-options input[type=range],.photo-frame-controls input[type=range]{width:100%;accent-color:var(--violet)}.photo-print-options output{float:right;color:var(--ink);font-weight:700}.photo-adjust-actions,.photo-exports{display:flex;flex-wrap:wrap;gap:9px}.photo-frame-controls{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;padding:14px;border:1px solid var(--line);border-radius:12px;background:#f8fafc}.photo-frame-controls strong{grid-column:1/-1;font-size:13px}.photo-preview-stage{min-height:520px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#eef1f5;color:var(--muted)}.photo-preview-stage img{display:block;width:100%;height:100%;max-height:680px;object-fit:contain}.photo-print-submit{display:grid;grid-template-columns:1.5fr 1fr .55fr;gap:12px;margin-top:16px}.photo-exports,.photo-print-note,.photo-print-confirm,.photo-print-submit .primary,.photo-print-submit .form-message{grid-column:1/-1}.photo-exports a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--ink)}.photo-print-note{margin:0;padding:11px 13px;border-left:4px solid var(--violet);background:#f6f5ff;color:#4c4a75;font-size:12px;line-height:1.6}.photo-print-confirm{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important;color:var(--ink)!important}.photo-print-confirm input{width:18px;height:18px}.photo-print-submit .primary{margin-top:0}
.photo-studio{display:grid;grid-template-columns:260px minmax(430px,1fr) 330px;gap:12px;align-items:start}.photo-library,.photo-canvas-panel,.photo-inspector{min-height:calc(100vh - 190px);padding:18px;border-radius:14px}.photo-studio-title,.photo-canvas-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.photo-studio-title .eyebrow{margin:0 0 4px}.photo-studio-title h2{margin:0}.photo-upload-zone{margin-top:15px;min-height:86px}.photo-queue{display:grid;gap:6px;max-height:330px;margin:12px 0;overflow:auto}.photo-queue-item{width:100%;display:grid;grid-template-columns:46px minmax(0,1fr);gap:9px;align-items:center;padding:7px;border:1px solid transparent;border-radius:9px;background:#f7f8fa;color:var(--ink);text-align:left}.photo-queue-item.active{border-color:var(--violet);background:#eeecff}.photo-queue-item img{width:46px;height:46px;border-radius:6px;object-fit:cover}.photo-queue-item span,.photo-queue-item strong,.photo-queue-item small{display:block;min-width:0}.photo-queue-item strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.photo-queue-item small{margin-top:3px;color:var(--muted);font-size:10px}.photo-wide-button{width:100%}.photo-caption-editor{display:grid;gap:8px;margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}.photo-caption-editor strong{font-size:12px}.photo-caption-editor>input,.photo-caption-editor select,.photo-caption-editor input[type=number]{width:100%;height:40px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}.photo-caption-editor>div{display:grid;grid-template-columns:80px 1fr;gap:7px}.photo-canvas-panel{display:flex;flex-direction:column}.photo-canvas-head strong,.photo-canvas-head small{display:block}.photo-canvas-head small{margin-top:3px;color:var(--muted);font-size:11px}.photo-canvas-panel .photo-preview-stage{position:relative;flex:1;margin-top:12px;cursor:grab;user-select:none}.photo-canvas-panel .photo-preview-stage:active{cursor:grabbing}.photo-preview-loading{position:absolute;padding:10px 14px;border-radius:8px;background:#111827d9;color:#fff;font-size:12px}.photo-canvas-hint{margin:10px 0 0;color:var(--muted);font-size:11px;text-align:center}.photo-inspector{max-height:calc(100vh - 190px);overflow:auto}.photo-inspector form{display:grid;gap:0}.photo-inspector section{display:grid;gap:9px;padding:15px 0;border-bottom:1px solid var(--line)}.photo-inspector section:first-child{padding-top:0}.photo-inspector section:last-child{border-bottom:0}.photo-inspector h3{margin:0;font-size:14px}.photo-inspector label{display:grid;gap:5px;color:var(--muted);font-size:11px}.photo-inspector select,.photo-inspector input[type=number]{width:100%;height:40px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}.photo-inspector input[type=range]{width:100%;accent-color:var(--violet)}.photo-inspector output{float:right;color:var(--ink);font-weight:700}.photo-setting-note{margin:0;color:var(--muted);font-size:11px;line-height:1.55}.photo-output-row{display:grid;grid-template-columns:1fr 80px;gap:8px}.photo-inspector .primary{margin-top:0}.photo-inspector .photo-exports{display:grid;grid-template-columns:1.4fr 1fr 1fr}.photo-inspector .photo-exports a{text-align:center;font-size:11px}.photo-inspector .photo-print-note{font-size:11px}
.analyzer-inline-action{display:flex;justify-content:flex-end;margin:0 0 10px}
@media (max-width: 800px) {
  .merge-grid, .merge-settings { grid-template-columns: 1fr; }
  #analyzerFrame { min-height: 900px; }
  .dashboard-metrics{grid-template-columns:1fr 1fr}.dashboard-metrics>div:nth-child(2){border-right:0}.dashboard-metrics>div:nth-child(-n+2){border-bottom:1px solid var(--line)}.dashboard-detail{grid-template-columns:1fr}.access-notice{align-items:flex-start;flex-direction:column}
  .image-file-list{grid-template-columns:repeat(2,minmax(0,1fr))}.crop-workspace{grid-template-columns:1fr}.image-results{grid-template-columns:1fr 1fr}
}
.job-heading {
  display: flex;
  justify-content: space-between;
}
.progress-track {
  height: 10px;
  margin: 18px 0;
  background: #eceef3;
}
.progress-track div {
  height: 100%;
  background: var(--violet);
}
.downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.downloads a {
  padding: 10px;
  border-radius: 10px;
  background: #eef2ff;
  text-decoration: none;
}
.downloads a.zip {
  color: #fff;
  background: var(--green);
}
@media (max-width: 1000px) {
  .control-grid,
  .workflow {
    grid-template-columns: 1fr;
  }
  .device-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .photo-print-shell{grid-template-columns:1fr}.photo-preview-stage{min-height:430px}
  .photo-studio{grid-template-columns:230px minmax(390px,1fr)}.photo-inspector{grid-column:1/-1;max-height:none;min-height:0}.photo-inspector form{grid-template-columns:repeat(3,1fr);gap:14px}.photo-inspector section{padding:0;border:0}
}
@media (max-width: 680px) {
  .app {
    padding: 14px;
  }
  .tabs {
    overflow: auto;
  }
  .tabs button {
    white-space: nowrap;
  }
  .device-grid {
    grid-template-columns: 1fr;
  }
  .action-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
  .result-row {
    grid-template-columns: 1fr 1fr;
  }
  .account-row {
    grid-template-columns: 95px 1fr 90px;
  }
  .account-row span:nth-child(4),
  .account-row span:nth-child(5) {
    grid-column: 1/-1;
  }
  .login-card {
    padding: 28px 22px;
  }
  .user-permission-list,.permission-checks{grid-template-columns:1fr}
  .dashboard-metrics{grid-template-columns:1fr}.dashboard-metrics>div{border-right:0;border-bottom:1px solid var(--line)}.dashboard-metrics>div:last-child{border-bottom:0}.contact-options{width:100%}.contact-options a,.contact-options>div{width:100%}
  .image-tools-intro,.plugin-guide{align-items:flex-start;flex-direction:column}.plugin-download{width:100%;text-align:center}.image-file-list,.image-setting-row,.crop-settings,.image-results{grid-template-columns:1fr}
  .photo-print-controls,.photo-print-preview{padding:16px}.photo-print-options,.photo-print-submit,.photo-frame-controls{grid-template-columns:1fr}.photo-preview-stage{min-height:360px}.photo-adjust-actions .ghost,.photo-exports .ghost{flex:1}.photo-frame-controls strong{grid-column:auto}
  .photo-studio{grid-template-columns:1fr}.photo-library,.photo-canvas-panel,.photo-inspector{min-height:0}.photo-library{order:1}.photo-canvas-panel{order:2;min-height:520px}.photo-inspector{order:3}.photo-inspector form{grid-template-columns:1fr}.photo-queue{max-height:220px}
}

.theme-toggle { white-space: nowrap; }
.login-theme-toggle { position: fixed; top: 18px; right: 18px; z-index: 5; }

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e8edf5;
  --muted: #9aa6b5;
  --line: #303a49;
  --paper: #171d27;
  --violet: #9b8cff;
  --green: #34d399;
  --danger: #fb7185;
}
html[data-theme="dark"] body { background: #0f141c; color: var(--ink); }
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .dashboard-metrics,
html[data-theme="dark"] .usage-detail,
html[data-theme="dark"] .dashboard-actions,
html[data-theme="dark"] .access-notice,
html[data-theme="dark"] .period-badge,
html[data-theme="dark"] .contact-options a,
html[data-theme="dark"] .contact-options > div { background: #171d27; border-color: var(--line); box-shadow: none; }
html[data-theme="dark"] .ghost,
html[data-theme="dark"] .permission-checks label,
html[data-theme="dark"] .crop-result,
html[data-theme="dark"] .merge-file input { background: #202836; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .image-setting-row select,
html[data-theme="dark"] .image-setting-row input,
html[data-theme="dark"] .action-options select,
html[data-theme="dark"] .action-options input,
html[data-theme="dark"] .currency-switch select { background: #111821; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #748092; }
html[data-theme="dark"] .tabs { background: #202836; }
html[data-theme="dark"] .tabs button { color: #aeb8c6; }
html[data-theme="dark"] .tabs button.active { background: #343052; color: #c5bbff; }
html[data-theme="dark"] .user-permission-card,
html[data-theme="dark"] .device-card,
html[data-theme="dark"] .report-box,
html[data-theme="dark"] .drop-zone,
html[data-theme="dark"] .image-result { background: #121923; }
html[data-theme="dark"] .device-card:has(input:checked),
html[data-theme="dark"] .browser-workflow-note { background: #27264a; border-color: #6962aa; color: #d5d0ff; }
html[data-theme="dark"] .action-tabs button,
html[data-theme="dark"] .quick-action-list button,
html[data-theme="dark"] .quick-action-list a { background: #202836; color: var(--ink); }
html[data-theme="dark"] .action-tabs button.active { background: var(--violet); color: #10131a; }
html[data-theme="dark"] .billing-formula,
html[data-theme="dark"] .image-upload-zone,
html[data-theme="dark"] .photo-upload-zone,
html[data-theme="dark"] .merge-file { background: #242343; color: #d5d0ff; border-color: #6962aa; }
html[data-theme="dark"] .token-breakdown span { background: #111821; }
html[data-theme="dark"] .access-notice { background: #191827; }
html[data-theme="dark"] .account-row.head { background: #202836; }
html[data-theme="dark"] .crop-preview { background: #0c1118; }
html[data-theme="dark"] .photo-preview-stage { background: #0c1118; }
html[data-theme="dark"] .photo-frame-controls { background: #111821; }
html[data-theme="dark"] .photo-print-note { background: #242343; color: #d5d0ff; }
html[data-theme="dark"] .photo-queue-item { background:#111821; }
html[data-theme="dark"] .photo-queue-item.active { background:#29264a; }
.photo-caption-editor > div { grid-template-columns:92px minmax(0,1fr); gap:9px; }
.photo-output-row { grid-template-columns:minmax(0,1fr) 100px; gap:10px; }
html[data-theme="dark"] .photo-caption-editor > input,
html[data-theme="dark"] .photo-caption-editor input[type="number"],
html[data-theme="dark"] .photo-caption-editor select,
html[data-theme="dark"] .photo-inspector input[type="number"],
html[data-theme="dark"] .photo-inspector select {
  background:#0c131c;
  color:#f1f5f9;
  border-color:#526176;
  box-shadow:inset 0 0 0 1px #182230;
}
html[data-theme="dark"] .photo-caption-editor > input::placeholder { color:#91a0b3; }
html[data-theme="dark"] .photo-caption-editor input:focus,
html[data-theme="dark"] .photo-caption-editor select:focus,
html[data-theme="dark"] .photo-inspector input[type="number"]:focus,
html[data-theme="dark"] .photo-inspector select:focus {
  outline:2px solid #8f80ff;
  outline-offset:1px;
  border-color:#9b8cff;
}
html[data-theme="dark"] .progress-track { background: #303a49; }
html[data-theme="dark"] .downloads a { background: #29274a; color: #d5d0ff; }
html[data-theme="dark"] .embedded-app-frame { background: #0d0f10; box-shadow: none; }
html[data-theme="dark"] .publish-upload { background: #242343; border-color: #6962aa; }
html[data-theme="dark"] .publish-upload input { background: #111821 !important; color: var(--ink); }
html[data-theme="dark"] .human-confirm { background: #34251d; border-color: #9a5b31; }
html[data-theme="dark"] .human-confirm .ghost { background: #202836; }
html[data-theme="dark"] .channels-row { border-color: var(--line); }
html[data-theme="dark"] .screen-link,
html[data-theme="dark"] .currency-rate-note { color: #b9aeff; }

@media (max-width: 680px) {
  .topbar { align-items: flex-start; }
  .user-area { flex-wrap: wrap; justify-content: flex-end; }
  .theme-toggle { padding: 8px 10px; }
}

/* Phone layout: keep every Matrix tool usable without changing the desktop workspace. */
@media (max-width: 680px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden; }
  body { -webkit-text-size-adjust:100%; }
  button, a, input, select, textarea { touch-action:manipulation; }
  button, .ghost, .mini, .primary { min-height:44px; }
  input, select, textarea { font-size:16px; }

  .app {
    width:100%;
    max-width:none;
    padding:0 12px calc(20px + env(safe-area-inset-bottom));
  }
  .topbar {
    position:sticky;
    top:0;
    z-index:30;
    min-height:62px;
    margin:0 -12px;
    padding:10px 12px;
    align-items:center;
    gap:8px;
    background:color-mix(in srgb, var(--paper) 94%, transparent);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(14px);
  }
  .topbar .eyebrow { display:none; }
  .topbar h1 { max-width:46vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:19px; }
  .user-area { min-width:0; margin-left:auto; flex-wrap:nowrap; gap:6px; }
  #currentUser { max-width:22vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
  .topbar .theme-toggle, #logoutButton { min-height:38px; padding:7px 9px; font-size:12px; }

  .tabs {
    position:sticky;
    top:62px;
    z-index:29;
    display:flex;
    gap:6px;
    margin:0 -12px 12px;
    padding:8px 12px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    border-radius:0;
    border-bottom:1px solid var(--line);
    scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar { display:none; }
  .tabs button {
    flex:0 0 auto;
    min-height:40px;
    padding:8px 13px;
    scroll-snap-align:center;
    border:1px solid transparent;
    border-radius:8px;
    font-size:13px;
  }
  .tabs button.active { border-color:color-mix(in srgb, var(--violet) 45%, transparent); }

  .panel { border-radius:8px; }
  .dashboard-shell, .control-shell, .image-tools-shell { gap:12px; }
  .dashboard-welcome { align-items:flex-start; padding:8px 2px 2px; }
  .dashboard-welcome h2, .image-tools-intro h2 { font-size:24px; }
  .period-badge { flex:0 0 auto; padding:7px 9px; }
  .dashboard-metrics { grid-template-columns:1fr 1fr; border-radius:8px; }
  .dashboard-metrics>div { min-width:0; padding:15px; border-right:0; border-bottom:1px solid var(--line); }
  .dashboard-metrics>div:nth-child(odd) { border-right:1px solid var(--line); }
  .dashboard-metrics>div:nth-last-child(-n+2) { border-bottom:0; }
  .dashboard-metrics strong { max-width:100%; font-size:21px; overflow-wrap:anywhere; }
  .usage-detail, .dashboard-actions, .access-notice { padding:17px; border-radius:8px; }
  .billing-formula { margin:14px 0; padding:12px; font-size:13px; }
  .token-breakdown { flex-direction:column; }
  .quick-action-list button, .quick-action-list a { min-height:48px; align-items:center; }

  .control-head, .section-heading, .job-heading, .photo-studio-title, .photo-canvas-head {
    align-items:flex-start;
    gap:10px;
  }
  .control-head, .status-panel, .account-panel, .device-panel, .action-panel,
  .upload-panel, .preview-panel, .settings-panel, .job-panel, .merge-panel,
  .image-tool, .admin-panel { padding:16px; }
  .section-heading { flex-wrap:wrap; }
  .section-heading>div:first-child { min-width:0; flex:1 1 180px; }
  .section-heading>div:last-child { display:flex; gap:6px; }
  .device-grid { max-height:none; }
  .device-card { min-height:58px; border-radius:8px; }
  .action-tabs { grid-template-columns:1fr 1fr; gap:7px; }
  .action-tabs button { min-width:0; padding:9px 5px; font-size:12px; }
  .platform-chip { min-height:44px; flex:1 1 calc(50% - 8px); }
  .result-list, .account-table { max-height:none; overflow:visible; border:0; }
  .result-row, .account-row {
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px 10px;
    margin-bottom:8px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:8px;
  }
  .result-row>*:last-child, .account-row span:nth-child(2), .account-row span:nth-child(4), .account-row span:nth-child(5) { grid-column:1/-1; }
  .account-row.head { display:none; }

  .workflow { gap:12px; }
  .drop-zone { min-height:132px; padding:18px; border-radius:8px; }
  .stage { width:min(100%, 390px); max-height:64vh; border-radius:8px; }
  .presets { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .presets button { min-height:40px; padding:6px 2px; font-size:12px; }
  .inline-control { height:auto; min-height:50px; }
  .file-item { gap:8px; }
  .file-item span { min-width:0; overflow-wrap:anywhere; }

  .merge-workspace, .merge-grid, .merge-settings { grid-template-columns:1fr; }
  .merge-file { min-height:120px; padding:16px; border-radius:8px; }
  .merge-preview-controls { grid-template-columns:auto minmax(0,1fr) auto; }
  .merge-preview-controls span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .image-tools-intro { padding:4px 2px; }
  .image-tool-heading { gap:10px; }
  .image-tool-heading h2 { font-size:18px; }
  .image-upload-zone { min-height:96px; padding:15px; border-radius:8px; text-align:center; }
  .image-action-row { display:grid; grid-template-columns:1fr 1fr; }
  .image-action-row .primary { width:100%; }
  .crop-preview { min-height:220px; border-radius:8px; }
  .plugin-guide { padding:17px; }

  .photo-studio { gap:10px; }
  .photo-library, .photo-canvas-panel, .photo-inspector { padding:14px; border-radius:8px; }
  .photo-upload-zone { min-height:76px; padding:14px; border-radius:8px; }
  .photo-queue { display:flex; max-height:none; overflow-x:auto; overflow-y:hidden; padding-bottom:5px; scroll-snap-type:x proximity; }
  .photo-queue-item { flex:0 0 210px; min-height:62px; scroll-snap-align:start; }
  .photo-caption-editor>div { grid-template-columns:minmax(74px,.55fr) minmax(0,1.45fr); }
  .photo-canvas-panel { min-height:0; }
  .photo-canvas-panel .photo-preview-stage { min-height:0; height:min(58vh,520px); margin-top:10px; }
  .photo-preview-stage img { max-height:100%; }
  .photo-canvas-hint { line-height:1.5; }
  .photo-inspector section { padding:14px 0; border-bottom:1px solid var(--line); }
  .photo-adjust-actions { display:grid; grid-template-columns:1fr 1fr; }
  .photo-adjust-actions .ghost { min-width:0; }
  .photo-inspector .photo-exports { grid-template-columns:1fr 1fr 1fr; }
  .photo-output-row { grid-template-columns:minmax(0,1fr) 92px; }
  #photoSystemPrintButton { position:sticky; bottom:8px; z-index:4; box-shadow:0 8px 24px #11182733; }

  .user-permission-card { padding:14px; border-radius:8px; }
  .user-permission-head { align-items:flex-start; }
  .admin-password-reset { grid-template-columns:1fr; }
  .permission-checks label { min-height:44px; }

  .analyzer-inline-action { margin-bottom:8px; }
  #analyzerFrame, .embedded-app-frame {
    width:calc(100% + 24px);
    min-height:calc(100dvh - 132px);
    height:calc(100dvh - 132px);
    margin:0 -12px;
    border-radius:0;
    box-shadow:none;
  }
  #omnichatTab .analyzer-inline-action, #analyzerTab .analyzer-inline-action { padding:0 2px; }
  body[data-active-tab="analyzer"] .topbar,
  body[data-active-tab="omnichat"] .topbar { display:none; }
  body[data-active-tab="analyzer"] .tabs,
  body[data-active-tab="omnichat"] .tabs { top:0; }
  body[data-active-tab="analyzer"] #analyzerFrame,
  body[data-active-tab="omnichat"] .embedded-app-frame {
    min-height:calc(100dvh - 104px);
    height:calc(100dvh - 104px);
  }
}

@media (max-width: 380px) {
  .dashboard-metrics { grid-template-columns:1fr; }
  .dashboard-metrics>div, .dashboard-metrics>div:nth-child(odd) { border-right:0; border-bottom:1px solid var(--line); }
  .dashboard-metrics>div:last-child { border-bottom:0; }
  .topbar h1 { max-width:40vw; }
  #currentUser { display:none; }
  .photo-adjust-actions, .image-action-row { grid-template-columns:1fr; }
}