:root {
  --app-bg: #f5f6f8;
  --app-surface: #ffffff;
  --app-border: #e2e5e9;
  --app-text: #1a1d21;
  --app-text-muted: #5c6370;
  --app-primary: #0d6efd;
  --app-primary-hover: #0b5ed7;
  --app-card-shadow: 0 1px 3px rgba(0,0,0,0.06);
  --app-input-bg: #fff;
}
[data-theme="dark"] {
  --app-bg: #16181c;
  --app-surface: #212529;
  --app-border: #343a40;
  --app-text: #e9ecef;
  --app-text-muted: #adb5bd;
  --app-primary: #4dabf7;
  --app-primary-hover: #339af0;
  --app-card-shadow: 0 1px 3px rgba(0,0,0,0.3);
  --app-input-bg: #2b3035;
}
body { background: var(--app-bg); color: var(--app-text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.app-wrap { max-width: 1160px; margin: 0 auto; padding: 1rem 1.25rem 2rem; }
.app-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.25rem; padding-bottom:1rem; border-bottom:1px solid var(--app-border); }
.app-title { margin:0; font-size:1.35rem; }
.app-subtitle { margin:.25rem 0 0; color:var(--app-text-muted); font-size:.875rem; }
.app-theme-toggle { width:2.25rem; height:2.25rem; border:1px solid var(--app-border); border-radius:.375rem; background:var(--app-surface); cursor:pointer; }
.app-keys-panel,.app-help-card,.app-results,.progress { background:var(--app-surface); border:1px solid var(--app-border); border-radius:.5rem; box-shadow:var(--app-card-shadow); }
.app-keys-panel { padding:.75rem 1rem; margin-bottom:1.25rem; }
.app-keys-row { display:flex; flex-wrap:wrap; gap:.75rem; }
.app-keys-field { flex:1 1 220px; }
.app-nav { display:flex; gap:.25rem; border-bottom:2px solid var(--app-border); margin-bottom:1.25rem; }
.main-tab { background:transparent; border:0; border-bottom:2px solid transparent; color:var(--app-text-muted); padding:.6rem 1rem; font-weight:500; }
.main-tab.active { color:var(--app-primary); border-bottom-color:var(--app-primary); font-weight:600; }
.main-tab-help { margin-left:auto; }
.main-tab-content { display:none; }
.main-tab-content.active { display:block; }
.app-content-row { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width: 992px){ .app-content-row { grid-template-columns:1fr 320px; } }
.app-help-card { padding:1.25rem; position:sticky; top:1rem; }
.card-title { font-weight:600; margin-bottom:.75rem; }
.app-form .form-group { margin-bottom: 1rem; }
.app-form .form-label { margin-bottom: .35rem; font-weight: 500; }
.app-form .form-control, .app-form .form-select { background:var(--app-input-bg); color:var(--app-text); border-color:var(--app-border); }
.app-form .form-control, .app-form .form-select, .app-form textarea {
  min-height: 2.5rem;
  font-size: .9375rem;
}
.app-form textarea { min-height: 110px; resize: vertical; }
.app-form .form-text { color: var(--app-text-muted); font-size: .8125rem; margin-top: .25rem; }
.content-locale-fields .form-group { flex: 1 1 0; }
.content-locale-fields .form-group .form-select,
.content-locale-fields .form-group .form-control { width: 100%; }
.generation-mode-tabs { display:flex; gap:.5rem; border-bottom:2px solid var(--app-border); padding-bottom:.5rem; }
.generation-mode-tab { border:1px solid var(--app-primary); background:var(--app-primary); color:#fff; border-radius:1rem; padding:.45rem .9rem; }
.btn-group-actions { display:flex; justify-content:flex-end; margin-top:1rem; }
.btn-group-actions .btn { min-width: 220px; }
.progress {
  display: block;
  height: auto;
  overflow: visible;
  margin-top: 1rem;
  padding: 1rem;
}
.progress-bar-container { margin:10px 0; background:var(--app-border); height:8px; border-radius:4px; overflow:hidden; }
.progress-bar-fill { width:0%; height:100%; background:var(--app-primary); transition:width .3s; }
.progress-logs { min-height:80px; max-height:220px; overflow-y:auto; background:var(--app-bg); border:1px solid var(--app-border); border-radius:8px; padding:12px; font-size:.875rem; }
.app-results { margin-top:1.5rem; padding:1.25rem; }
.result-section { border:1px solid var(--app-border); border-radius:8px; padding:12px; margin:12px 0; background:var(--app-surface); }
.app-alert-danger { padding:.75rem 1rem; border-radius:.375rem; background:rgba(220,53,69,.12); border:1px solid rgba(220,53,69,.4); color:#dc3545; }
.textarea-counter { display:block; font-size:.75rem; color:var(--app-text-muted); margin-top:.25rem; }

@media (max-width: 991.98px) {
  .app-wrap { padding: .75rem .875rem 1.25rem; }
  .btn-group-actions { justify-content: stretch; }
  .btn-group-actions .btn { width: 100%; min-width: 0; }
}