:root {
  --color-primary:     #e8607a;
  --color-primary-dim: #c44860;
  --color-accent:      #f0907a;
  --color-text:        #f0e0c8;
  --color-text-muted:  rgba(240, 224, 200, 0.65);

  --bg-page:    #12100f;
  --bg-base:    #0a0908;
  --bg-surface: #161412;
  --bg-raised:  #1c1917;

  --primary-05:  rgba(232, 96, 122, 0.05);
  --primary-08:  rgba(232, 96, 122, 0.08);
  --primary-10:  rgba(232, 96, 122, 0.10);
  --primary-12:  rgba(232, 96, 122, 0.12);
  --primary-15:  rgba(232, 96, 122, 0.15);
  --primary-20:  rgba(232, 96, 122, 0.20);
  --primary-25:  rgba(232, 96, 122, 0.25);
  --primary-30:  rgba(232, 96, 122, 0.30);
  --primary-40:  rgba(232, 96, 122, 0.40);
  --primary-60:  rgba(232, 96, 122, 0.60);

  --text-50: rgba(240, 224, 200, 0.50);
  --text-60: rgba(240, 224, 200, 0.60);
  --text-70: rgba(240, 224, 200, 0.70);
  --text-80: rgba(240, 224, 200, 0.80);

  --surface-90: rgba(22, 20, 18, 0.90);
  --raised-70:  rgba(28, 25, 23, 0.70);
  --raised-95:  rgba(28, 25, 23, 0.95);
  --raised-solid: #1c1917;

  --input-bg: rgba(10, 9, 8, 0.80);
  --shadow-md: rgba(0, 0, 0, 0.40);
  --shadow-lg: rgba(0, 0, 0, 0.50);

  --color-green:     #7ecfd0;
  --color-green-txt: #a8dfe0;
  --color-red:       #e07a6b;
  --color-steam:     #7ecfd0;

  --radius:    4px;
  --radius-lg: 8px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }

body {
  font-family: var(--font);
  background: linear-gradient(180deg, var(--bg-page) 0%, var(--bg-base) 100%);
  background-attachment: fixed;
  color: var(--color-text);
  min-height: 100vh;
  line-height: 1.55;
}

code {
  font-family: 'SFMono-Regular', Consolas, monospace;
  background: var(--primary-08);
  color: var(--color-accent);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}

.dust-container { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.dust { position: absolute; width: 3px; height: 3px; background: var(--primary-30); border-radius: 50%; opacity: 0; animation: dust-float 18s linear infinite; }
.dust:nth-child(1) { left: 10%; animation-delay: 0s; }
.dust:nth-child(2) { left: 40%; animation-delay: 5s; }
.dust:nth-child(3) { left: 65%; animation-delay: 10s; }
.dust:nth-child(4) { left: 85%; animation-delay: 14s; }
@keyframes dust-float {
  0% { transform: translateY(100vh); opacity: 0; }
  10% { opacity: 0.5; }
  90% { opacity: 0.3; }
  100% { transform: translateY(-10vh); opacity: 0; }
}

.page { position: relative; z-index: 1; min-height: 100vh; }

.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--surface-90);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--primary-15);
}
.topbar-content {
  max-width: 1000px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.25rem; gap: 1rem;
}
.topbar-left { display: flex; align-items: center; gap: 1.25rem; }
.topbar-home {
  display: flex; align-items: center; gap: 0.4rem;
  color: var(--text-70); text-decoration: none; font-size: 0.9rem; font-weight: 500;
  transition: color 0.15s;
}
.topbar-home:hover { color: var(--color-accent); }
.topbar-home svg { width: 18px; height: 18px; }
.topbar-title { font-family: 'Lobster', cursive; font-size: 1.3rem; color: var(--color-accent); }
.topbar-sub { font-size: 0.8rem; color: var(--text-60); }

.steam-user-badge {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--raised-70); border: 1px solid var(--primary-15);
  border-radius: 20px; padding: 0.35rem 0.7rem 0.35rem 0.5rem;
  font-size: 0.85rem;
}
.steam-user-badge svg { width: 18px; height: 18px; color: var(--color-steam); }
.steam-user-name { font-weight: 600; }
.sign-out-link {
  background: none; border: none; color: var(--text-50); cursor: pointer;
  font-size: 0.75rem; text-decoration: underline; padding: 0;
}
.sign-out-link:hover { color: var(--color-accent); }
.hidden { display: none !important; }

.container { max-width: 1000px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

.panel {
  background: var(--bg-surface);
  border: 1px solid var(--primary-12);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 18px var(--shadow-md);
}
.panel-title {
  font-size: 1.15rem; font-weight: 700; color: var(--color-text);
  margin-bottom: 0.5rem;
}
.panel-hint { color: var(--text-60); font-size: 0.9rem; margin-bottom: 1.25rem; max-width: 70ch; }
.field-hint { color: var(--text-50); font-size: 0.8rem; margin-top: 0.5rem; }

.source-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--primary-12); }
.source-tab {
  background: none; border: none; cursor: pointer;
  color: var(--text-60); font-family: var(--font); font-size: 0.9rem; font-weight: 600;
  padding: 0.6rem 0.9rem; border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.source-tab:hover { color: var(--color-text); }
.source-tab.active { color: var(--color-accent); border-bottom-color: var(--color-primary); }
.source-panel { display: none; }
.source-panel.active { display: block; }

.field-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-70); margin-bottom: 0.4rem; }
.input-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.input-row input[type="text"], .input-row select {
  flex: 1 1 260px;
  background: var(--input-bg); color: var(--color-text);
  border: 1px solid var(--primary-15); border-radius: var(--radius);
  padding: 0.6rem 0.75rem; font-family: var(--font); font-size: 0.9rem;
}
.input-row input:focus, .input-row select:focus { outline: none; border-color: var(--color-primary); }
.input-narrow { flex: 0 1 160px !important; }
select { cursor: pointer; }

.local-folder-name { color: var(--text-60); font-size: 0.85rem; align-self: center; }

.source-status { margin-top: 1rem; font-size: 0.88rem; }
.status-loading { color: var(--color-accent); }
.status-error { color: var(--color-red); }
.status-ok { color: var(--color-green-txt); }

.btn {
  font-family: var(--font); font-size: 0.9rem; font-weight: 600;
  border-radius: var(--radius); padding: 0.6rem 1.1rem; cursor: pointer;
  border: 1px solid transparent; transition: all 0.15s; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dim); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-secondary { background: var(--raised-70); color: var(--color-text); border-color: var(--primary-20); }
.btn-secondary:hover { border-color: var(--color-primary); }
.btn-steam { background: rgba(126, 207, 208, 0.12); color: var(--color-steam); border-color: rgba(126, 207, 208, 0.4); }
.btn-steam:hover { background: rgba(126, 207, 208, 0.2); }

.editor-meta { margin-bottom: 1.25rem; }
.editor-meta .meta-name { font-weight: 700; color: var(--color-accent); }

.lang-row { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.lang-field { flex: 1 1 220px; }
.lang-field select {
  width: 100%; background: var(--input-bg); color: var(--color-text);
  border: 1px solid var(--primary-15); border-radius: var(--radius);
  padding: 0.6rem 0.75rem; font-family: var(--font); font-size: 0.9rem;
}

.fields-toolbar {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  margin: 1.25rem 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--primary-12);
}
.progress-wrap { display: flex; align-items: center; gap: 0.6rem; flex: 1 1 220px; }
.progress-bar { flex: 1; height: 8px; background: var(--raised-70); border-radius: 4px; overflow: hidden; }
.progress-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); transition: width 0.2s; }
.progress-text { font-size: 0.8rem; color: var(--text-60); white-space: nowrap; }
.checkbox-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--text-70); cursor: pointer; }

.fields-container { display: flex; flex-direction: column; gap: 1.75rem; }
.field-group-title {
  font-size: 0.95rem; font-weight: 700; color: var(--color-accent);
  margin-bottom: 0.6rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--primary-12);
}
.field-row {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.75rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--primary-08); align-items: start;
}
.field-row.field-row-filled { opacity: 0.9; }
.field-key { font-size: 0.72rem; color: var(--text-50); margin-bottom: 0.2rem; font-family: monospace; }
.field-source { font-size: 0.88rem; color: var(--text-70); white-space: pre-wrap; padding: 0.35rem 0; }
.field-target textarea {
  width: 100%; min-height: 2.4rem; resize: vertical;
  background: var(--input-bg); color: var(--color-text);
  border: 1px solid var(--primary-15); border-radius: var(--radius);
  padding: 0.45rem 0.6rem; font-family: var(--font); font-size: 0.88rem; line-height: 1.4;
}
.field-target textarea:focus { outline: none; border-color: var(--color-primary); }
.field-target textarea.filled { border-color: rgba(126, 207, 208, 0.4); }
.field-status { font-size: 1rem; align-self: center; }

@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; }
  .field-status { display: none; }
}

.actions-bar { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.pr-result { margin-top: 1rem; font-size: 0.9rem; }
.pr-result a { color: var(--color-accent); }
.pr-result .pr-error { color: var(--color-red); }
.pr-result .pr-success { color: var(--color-green-txt); }