:root {
  --bg: #ede9e3;
  --panel-bg: #ffffff;
  --text: #1a1815;
  --text-muted: #6b6459;
  --border: #ddd6c9;
  --accent: #2f2c27;
  --caution-bg: #f1e4d2;
  --caution-text: #7a4a12;
  --danger: #a3402f;
  --danger-bg: #f3e2dd;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
}

.brand {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.topbar-account {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-user {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.topbar-logout {
  color: var(--text-muted);
  font-size: 0.875rem;
  text-decoration: underline;
}

#app {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 32px 80px;
}

.screen.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 24, 21, 0.35);
  padding: 24px;
  z-index: 10;
}

/* The browser's built-in [hidden] rule loses to the class selector above, so
   without this an overlay stays rendered — and stacked on the next one shown
   — even after JS sets hidden = true. */
.screen.overlay[hidden] {
  display: none;
}

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 32px;
  max-width: 480px;
  width: 100%;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Scrollable middle section, used by panels whose content can outgrow the
   viewport (the upload panel, notably). The close button sits above this in
   markup order and .actions below it, so both stay pinned in view while the
   fields in between scroll. */
.panel-body {
  overflow-y: auto;
  min-height: 0;
}

.panel-narrow {
  max-width: 360px;
  margin: 120px auto 0;
  text-align: center;
}

h1 {
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0 0 8px;
}

h2 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 12px;
}

h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 20px 0 8px;
}

p {
  margin: 0 0 16px;
  color: var(--text);
}

label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 6px;
}

input[type='text'],
input[type='search'] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-bg);
  color: var(--text);
  font-size: 0.9375rem;
  margin-bottom: 8px;
}

input[type='text']:focus,
input[type='search']:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

code {
  background: var(--bg);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.875em;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-bg);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

.button:hover {
  border-color: var(--accent);
}

.button-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.button-primary:hover {
  opacity: 0.9;
}

.button-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.button-danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

.button-danger:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
}

.close-button {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  flex-shrink: 0;
}

.toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 32px 0 20px;
}

.toolbar #search {
  flex: 1;
  margin-bottom: 0;
}

.banner {
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 0.875rem;
}

.banner-note {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
}

.banner-warning {
  background: var(--caution-bg);
  color: var(--caution-text);
  border: 1px solid var(--caution-text);
}

.banner-error {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger);
}

.artifact-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.artifact-table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.artifact-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.artifact-table tr:last-child td {
  border-bottom: none;
}

.artifact-name {
  font-weight: 600;
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-signed-in {
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.badge-open {
  background: var(--caution-bg);
  color: var(--caution-text);
}

.row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.row-actions .button {
  padding: 6px 12px;
  font-size: 0.8125rem;
}

.empty-state {
  color: var(--text-muted);
  padding: 32px 0;
  text-align: center;
}

.about {
  margin-top: 32px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.about summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9375rem;
}

.about-content {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.about-content ul {
  padding-left: 20px;
  margin: 0 0 8px;
}

.about-content li {
  margin-bottom: 6px;
}

.help-text {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: -2px;
}

.dropzone {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  margin-bottom: 12px;
  color: var(--text-muted);
}

.dropzone.dragover {
  border-color: var(--accent);
  background: var(--bg);
}

.dropzone p {
  margin: 0 0 4px;
}

.file-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  text-align: left;
  font-size: 0.8125rem;
  color: var(--text);
}

.file-list li {
  padding: 2px 0;
}

.file-list-more {
  color: var(--text-muted);
  font-style: italic;
}

.progress-track {
  height: 8px;
  border-radius: 4px;
  background: var(--bg);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.15s ease;
}

#progress-label {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 6px 0 0;
}

.link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.link-row code {
  flex: 1;
  overflow-wrap: anywhere;
}