:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; background:#101216; color:#f3f4f6; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:linear-gradient(180deg,#181b20 0%,#0e1013 100%); }
.app-shell { width:min(760px,100%); margin:0 auto; padding:calc(18px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); }
.topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.eyebrow { margin:0 0 3px; color:#9ca3af; font-size:13px; font-weight:600; }
h1 { margin:0; font-size:28px; letter-spacing:-.03em; }
h2 { margin:0 0 14px; font-size:15px; color:#cbd0d8; }
.connection { display:flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid #353a44; border-radius:999px; font-size:12px; white-space:nowrap; background:#20242a; }
.connection span { width:9px; height:9px; border-radius:50%; background:#ef4444; box-shadow:0 0 10px rgba(239,68,68,.5); }
.connection.online span { background:#22c55e; box-shadow:0 0 10px rgba(34,197,94,.55); }
.card { background:rgba(38,42,49,.92); border:1px solid #3b404a; border-radius:16px; padding:16px; margin:12px 0; box-shadow:0 12px 32px rgba(0,0,0,.18); }
.mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.mode { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px; background:#1b1e23; border:1px solid #343944; border-radius:12px; }
.mode strong { font-size:14px; }
.pill { font-size:11px; font-weight:700; padding:5px 7px; border-radius:999px; background:#3a2022; color:#fca5a5; }
.pill.on { background:#183824; color:#86efac; }
.list { display:grid; gap:8px; }
.row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #343944; }
.row:last-child { border-bottom:0; }
.state { font-size:12px; color:#fca5a5; }
.state.running { color:#86efac; }
.metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.metric { min-height:76px; padding:12px; border-radius:12px; background:#1b1e23; border:1px solid #343944; display:flex; flex-direction:column; justify-content:space-between; }
.metric span { font-size:11px; color:#aab0ba; overflow-wrap:anywhere; }
.metric strong { font-size:24px; letter-spacing:-.03em; }
.path-card p { margin:0; color:#d6dae1; font-size:13px; overflow-wrap:anywhere; }
footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 2px 0; color:#9ca3af; font-size:12px; }
button { border:1px solid #4b5260; background:#2e333b; color:#f4f4f5; border-radius:10px; padding:9px 13px; font:inherit; font-weight:700; }
button:active { transform:scale(.98); }
@media (max-width:520px) { .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .topbar { align-items:center; } h1 { font-size:24px; } }

.control-button {
  border: 1px solid #3a3f48;
  border-radius: 14px;
  background: #24272d;
  color: #f4f5f7;
  padding: 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.control-button.active { border-color: #2ea66f; background: #183629; }
.control-button span { color: #aeb4bf; font-size: 13px; }
.control-button:disabled { opacity: .55; cursor: wait; }
.command-message { min-height: 20px; margin: 12px 0 0; color: #8fd6ad; }
.command-message.error { color: #ff8d8d; }
.hidden { display: none; }
.picker-head, .folder-actions { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.folder-roots, .folder-list { display: grid; gap: 8px; margin-top: 12px; }
.folder-roots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.folder-picker button, .path-card button {
  border: 1px solid #3a3f48;
  border-radius: 10px;
  background: #2a2e35;
  color: #f4f5f7;
  padding: 11px 12px;
  cursor: pointer;
}
.folder-list button { text-align: left; }
.folder-current { word-break: break-word; color: #b7bdc8; }

.create-folder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 12px;
}
.create-folder input {
  min-width: 0;
  border: 1px solid #3a3f48;
  border-radius: 10px;
  background: #171a1f;
  color: #f4f5f7;
  padding: 11px 12px;
  font: inherit;
}
.create-folder input:focus {
  outline: 2px solid #2ea66f;
  outline-offset: 1px;
}

.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.section-head h2 { margin-bottom:0; }
.small-button { padding:7px 10px; font-size:12px; }
.counter-metric button { margin-top:8px; padding:6px 8px; font-size:11px; }
.danger-card { border-color:#5f3d3d; }
.danger-card summary { cursor:pointer; font-weight:700; color:#f2c2c2; }
.danger-note { color:#b8a2a2; font-size:12px; line-height:1.45; }
.danger-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:12px; }
.danger-grid button { background:#39282a; border-color:#694247; color:#ffd7d7; }
.danger-grid .destructive { grid-column:1 / -1; background:#5b2428; border-color:#9a3f47; }
@media (max-width:520px) { .danger-grid { grid-template-columns:1fr; } .danger-grid .destructive { grid-column:auto; } }

/* Diagnostics and logs */
.diagnostics-list { display: grid; gap: 8px; }
.diagnostic-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--border, #e5e7eb); }
.diagnostic-row:last-child { border-bottom:0; }
.diagnostic-row span { color:var(--muted, #6b7280); }
.diagnostic-row strong { text-align:right; overflow-wrap:anywhere; }
.diag-ok { color:#15803d; }
.diag-warning { color:#b45309; }
.diag-error { color:#b91c1c; }
.diag-neutral { color:inherit; }
.diagnostic-warnings { display:grid; gap:8px; margin-top:12px; }
.warning-chip { padding:10px 12px; border-radius:10px; background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; }
.log-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.log-filter { width:auto; padding:8px 11px; font-size:13px; background:#f3f4f6; color:#374151; }
.log-filter.active { background:#111827; color:white; }
.log-file { margin:0 0 10px; color:var(--muted, #6b7280); font-size:12px; overflow-wrap:anywhere; }
.logs-list { max-height:420px; overflow:auto; display:grid; gap:7px; }
.log-entry { display:grid; grid-template-columns:70px 1fr; gap:8px; align-items:start; padding:9px 10px; border-radius:9px; background:#f8fafc; font-size:12px; }
.log-entry span { font-weight:700; }
.log-entry p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.log-warning { background:#fffbeb; color:#92400e; }
.log-error, .log-critical { background:#fef2f2; color:#991b1b; }
.muted { color:var(--muted, #6b7280); }
.error-text { color:#b91c1c; }
@media (prefers-color-scheme: dark) {
  .diagnostic-row { border-color:#374151; }
  .warning-chip { background:#431407; border-color:#9a3412; color:#fed7aa; }
  .log-filter { background:#374151; color:#e5e7eb; }
  .log-filter.active { background:#f9fafb; color:#111827; }
  .log-entry { background:#111827; }
  .log-warning { background:#422006; color:#fde68a; }
  .log-error, .log-critical { background:#450a0a; color:#fecaca; }
}


.login-screen {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: 24px; background: #0b1020;
}
.login-card {
  width: min(100%, 420px); background: #151c2f; border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px; padding: 28px; box-shadow: 0 24px 70px rgba(0,0,0,.35);
}
.login-card h1 { margin: 4px 0 8px; }
.login-card p { color: #aeb8cc; }
.login-card input {
  width: 100%; box-sizing: border-box; margin: 16px 0 12px; padding: 14px 16px;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: #0e1527;
  color: #fff; font-size: 16px;
}
.login-card button { width: 100%; padding: 14px 16px; border-radius: 12px; font-weight: 700; }
.login-message { min-height: 22px; margin: 10px 0 0; color: #ff8f8f !important; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.logout-button { padding: 8px 11px; border-radius: 10px; font-size: 13px; }
.hidden { display: none !important; }


/* RAW preset selector */
.preset-card .section-head { align-items:flex-start; }
.preset-card .section-head h2 { margin-top:2px; }
.preset-field { display:grid; gap:8px; margin-top:14px; }
.preset-field > span { font-size:12px; color:#aeb4bf; font-weight:600; }
.preset-field select {
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid #4b5260;
  border-radius:12px;
  background:#1b1e23;
  color:#f4f5f7;
  padding:13px;
  font:inherit;
  font-weight:700;
}
.preset-field select:focus {
  outline:2px solid #2ea66f;
  outline-offset:1px;
}
.preset-field select:disabled { opacity:.55; }
.preset-hint { margin:10px 0 0; color:#8f96a3; font-size:12px; line-height:1.45; }


/* Rating descriptions */
.ratings-list {
  display:grid;
  gap:9px;
  margin-top:12px;
}
.rating-item {
  padding:12px 13px;
  border:1px solid #343944;
  border-radius:12px;
  background:#1b1e23;
}
.rating-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.rating-head strong {
  font-size:12px;
  color:#aeb4bf;
}
.rating-stars {
  font-size:15px;
  letter-spacing:1px;
  color:#f4f5f7;
}
.rating-title {
  margin-top:7px;
  font-size:15px;
  font-weight:700;
  color:#f4f5f7;
  overflow-wrap:anywhere;
}
.rating-description {
  margin-top:4px;
  color:#b5bbc5;
  font-size:12px;
  line-height:1.45;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.rating-description.empty {
  color:#747b87;
  font-style:italic;
}
.ratings-hint {
  margin:10px 0 0;
  color:#8f96a3;
  font-size:12px;
  line-height:1.45;
}

.preset-actions { display:flex; flex-direction:column; align-items:stretch; gap:6px; flex:0 0 auto; }
.preset-actions .small-button { min-width:82px; }
.secondary-button { background:#252a31; border-color:#3a404a; }
.actions-info-modal { max-height:min(78vh,680px); overflow-y:auto; }
.actions-info-modal .ratings-list { margin-top:14px; }


/* Proper overlay modal for Actions info */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.58);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.modal.hidden {
  display: none !important;
}

.modal-card {
  width: min(100%, 430px);
  max-height: 82vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #3a404a;
  border-radius: 18px;
  background: rgba(27, 30, 35, 0.96);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.48);
  padding: 16px;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 6px;
}

.modal-header h2 {
  margin: 2px 0 0;
}

.close-button {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid #454b56;
  border-radius: 10px;
  background: #252a31;
  color: #f4f5f7;
  font-size: 24px;
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0;
}

.close-button:active {
  transform: scale(0.96);
}

.actions-info-modal .ratings-list {
  margin-top: 12px;
}


/* Archive preview gallery */
.archive-modal-card {
  width: min(100%, 760px);
  max-height: 88vh;
  padding: 14px;
}
.archive-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.archive-count {
  min-height: 16px;
  margin: 3px 0 0;
  color: #8f96a3;
  font-size: 11px;
}
.archive-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.archive-item {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #343944;
  border-radius: 12px;
  background: #16191e;
}
.archive-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #0e1116;
}
.archive-item-meta {
  display: grid;
  gap: 2px;
  padding: 8px 9px 9px;
}
.archive-item-meta b {
  overflow: hidden;
  color: #f4f5f7;
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.archive-item-meta span {
  color: #7f8793;
  font-size: 10px;
}
.archive-empty {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  padding: 26px 14px;
  border: 1px dashed #3a404a;
  border-radius: 12px;
  color: #9da4af;
  text-align: center;
}
.archive-empty b { color: #d8dbe0; }
.archive-empty span { font-size: 12px; }
.archive-empty.error { border-color: #704040; }

@media (min-width: 700px) {
  .archive-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* Confirm modal */
.confirm-card {
  width: min(100%, 360px);
}
.confirm-text {
  margin: 12px 0 16px;
  color: #c5cad2;
  font-size: 13px;
  line-height: 1.5;
}
.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.danger-button {
  background: #5a2024;
  border-color: #7e2e34;
  color: #fff;
}
.danger-button:active {
  background: #6a252a;
}


/* Reprocess archive */
.archive-item {
  cursor: pointer;
}
.archive-item:active {
  transform: scale(0.99);
}
.reprocess-card {
  width: min(100%, 520px);
}
.reprocess-preview {
  display: block;
  width: 100%;
  max-height: 52vh;
  margin-top: 10px;
  border-radius: 12px;
  object-fit: contain;
  background: #0e1116;
}
.reprocess-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.reprocess-fields label {
  display: grid;
  gap: 5px;
  color: #9da4af;
  font-size: 11px;
}
.reprocess-fields select {
  width: 100%;
}
.reprocess-button {
  width: 100%;
  margin-top: 14px;
}
.reprocess-message {
  min-height: 18px;
  margin: 8px 0 0;
  color: #9da4af;
  font-size: 11px;
  text-align: center;
}
.reprocess-message.error {
  color: #ff8e8e;
}
@media (max-width: 520px) {
  .reprocess-fields {
    grid-template-columns: 1fr;
  }
}