/* Translate Your App – Business: the app page's own stylesheet. Kept small
   and self-contained so the page loads nothing from the main site's theme.
   Status colors follow the desktop app (AppTranslator.UI/apptranslator.css). */

:root {
  --text: #222; --text-muted: #666; --border: #d0d0d0; --surface: #fff; --surface-subtle: #f7f9fb;
  --accent: #0078d7; --accent-soft: #e8f4fd; --danger: #b00020; --danger-bg: #fdecea; --warning-bg: #fff8e1; --warning-text: #6b5900;
  --success-bg: #e8f5e9; --success-text: #256029; --info-bg: #e8f4fd; --info-text: #1a4c6e;
  --status-untranslated-bg: #eef1f5; --status-untranslated-text: #46515f;
  --status-review-bg: #fff2cc; --status-review-text: #6f5200;
  --status-reviewed-bg: #dceeff; --status-reviewed-text: #174f78;
  --status-final-bg: #dff3e4; --status-final-text: #1f6538;
  --stale-bg: #fdeaea; --stale-text: #8f2020;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: #e6e6e6; --text-muted: #a8a8a8; --border: #3c424c; --surface: #181b20; --surface-subtle: #20242b;
    --accent: #65b7ef; --accent-soft: #1f3646; --danger: #ff7772; --danger-bg: #3a1f22; --warning-bg: #3a3320; --warning-text: #e2b93b;
    --success-bg: #1f3a24; --success-text: #8fd19e; --info-bg: #1f3646; --info-text: #9fd0f0;
    --status-untranslated-bg: #2a2f38; --status-untranslated-text: #c7cdd6;
    --status-review-bg: #4a3d12; --status-review-text: #f3d27a;
    --status-reviewed-bg: #1c3a55; --status-reviewed-text: #a8d3f5;
    --status-final-bg: #1f4a2a; --status-final-text: #a3e0b4;
    --stale-bg: #4a2222; --stale-text: #ffb3b3;
  }
  body { color-scheme: dark; }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 15px/1.45 "Segoe UI", system-ui, sans-serif; color: var(--text); background: var(--surface); display: flex; flex-direction: column; min-height: 100vh; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
h2 { font-size: 1.35rem; margin: 0 0 .6rem; }
h3 { font-size: 1.05rem; margin: 1.2rem 0 .4rem; }
p { margin: .4rem 0; }
code { font-family: Consolas, Menlo, monospace; font-size: .92em; }
.tya-noscript { padding: 1rem; background: var(--warning-bg); color: var(--warning-text); }

.tya-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding: .6rem 1.2rem; border-bottom: 1px solid var(--border); background: var(--surface-subtle); }
.tya-company { font-weight: 700; letter-spacing: .06em; font-size: .78rem; color: var(--text); text-decoration: none; }
.tya-company span { font-weight: 300; }
.tya-title { margin: 0; font-size: 1.25rem; font-weight: 600; }
.tya-edition { font-weight: 300; color: var(--text-muted); }
.tya-links { display: flex; gap: 1rem; align-items: center; font-size: .9rem; }
.tya-version { color: var(--text-muted); font-size: .8rem; }

.tya-body { display: flex; flex: 1; min-height: 0; }
.tya-steps { width: 230px; flex-shrink: 0; padding: 1rem .8rem; border-right: 1px solid var(--border); background: var(--surface-subtle); display: flex; flex-direction: column; gap: .3rem; }
.tya-steps button { text-align: left; padding: .5rem .7rem; border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; display: flex; align-items: center; gap: .6rem; }
.tya-steps button:hover { background: var(--accent-soft); }
.tya-steps button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tya-steps button:disabled { opacity: .45; cursor: default; }
.tya-steps .n { display: inline-flex; width: 1.5rem; height: 1.5rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface); color: var(--text); font-size: .8rem; font-weight: 700; border: 1px solid var(--border); }
.tya-steps button.active .n { background: #fff; color: var(--accent); }
.tya-steps-note { margin-top: auto; font-size: .8rem; color: var(--text-muted); }

.tya-main { flex: 1; min-width: 0; padding: 1.2rem 1.5rem 2rem; overflow: auto; }
.tya-loading { color: var(--text-muted); }
.tya-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; padding: .6rem 1.2rem; border-top: 1px solid var(--border); font-size: .78rem; color: var(--text-muted); }

.tya-panel { border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.2rem; margin: 0 0 1rem; background: var(--surface); }
.tya-panel h3:first-child { margin-top: 0; }
.tya-row { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin: .4rem 0; }
.tya-field { display: flex; flex-direction: column; gap: .2rem; min-width: 12rem; }
.tya-field label, .tya-check { font-size: .85rem; color: var(--text-muted); }
.tya-field input, .tya-field select, .tya-field textarea, .tya-input { padding: .4rem .5rem; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); }
.tya-field input:focus, .tya-field select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.tya-check { display: flex; align-items: center; gap: .4rem; color: var(--text); }
.tya-help { font-size: .82rem; color: var(--text-muted); }

.tya-btn { padding: .45rem .9rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-subtle); cursor: pointer; }
.tya-btn:hover { border-color: var(--accent); }
.tya-btn:disabled { opacity: .5; cursor: default; }
.tya-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.tya-btn.danger { color: var(--danger); }
.tya-btn.small { padding: .2rem .5rem; font-size: .82rem; }

.tya-drop { border: 2px dashed var(--border); border-radius: 10px; padding: 1.6rem; text-align: center; color: var(--text-muted); margin: .8rem 0; }
.tya-drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.tya-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.tya-card { border: 1px solid var(--border); border-radius: 8px; padding: 1rem; background: var(--surface-subtle); }
.tya-card h3 { margin-top: 0; }

.tya-note { padding: .6rem .8rem; border-radius: 6px; margin: .6rem 0; font-size: .9rem; }
.tya-note.info { background: var(--info-bg); color: var(--info-text); }
.tya-note.warn { background: var(--warning-bg); color: var(--warning-text); }
.tya-note.error { background: var(--danger-bg); color: var(--danger); white-space: pre-wrap; }
.tya-note.ok { background: var(--success-bg); color: var(--success-text); }

table.tya-table { width: 100%; border-collapse: collapse; margin: .6rem 0; font-size: .9rem; }
.tya-table th, .tya-table td { padding: .4rem .5rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.tya-table th { background: var(--surface-subtle); position: sticky; top: 0; z-index: 1; }
.tya-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tya-table-wrap { overflow: auto; max-height: 65vh; border: 1px solid var(--border); border-radius: 6px; }

.tya-status { display: inline-block; padding: .1rem .5rem; border-radius: 10px; font-size: .78rem; white-space: nowrap; }
.tya-status.untranslated { background: var(--status-untranslated-bg); color: var(--status-untranslated-text); }
.tya-status.translated-needs-review { background: var(--status-review-bg); color: var(--status-review-text); }
.tya-status.reviewed { background: var(--status-reviewed-bg); color: var(--status-reviewed-text); }
.tya-status.final { background: var(--status-final-bg); color: var(--status-final-text); }
.tya-flag { display: inline-block; padding: .05rem .4rem; border-radius: 4px; font-size: .74rem; margin-left: .3rem; }
.tya-flag.stale { background: var(--stale-bg); color: var(--stale-text); }
.tya-flag.error { background: var(--danger-bg); color: var(--danger); }
.tya-flag.warning { background: var(--warning-bg); color: var(--warning-text); }
.tya-flag.prov { background: var(--surface-subtle); color: var(--text-muted); border: 1px solid var(--border); }
.tya-flag.unsaved { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); font-weight: 600; }
.tya-btn.primary.unsaved { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-text); }

.tya-ws td.key { font-family: Consolas, Menlo, monospace; font-size: .82rem; max-width: 14rem; word-break: break-all; }
.tya-ws td.source { max-width: 22rem; white-space: pre-wrap; }
.tya-ws td.target textarea { width: 100%; min-width: 16rem; min-height: 2.4rem; resize: vertical; padding: .3rem .4rem; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); white-space: pre-wrap; }
.tya-ws td.target textarea.changed { border-color: var(--accent); border-left: 4px solid var(--accent); background: var(--accent-soft); }
.tya-ws td.note { color: var(--text-muted); font-size: .82rem; max-width: 16rem; }
.tya-ws select { padding: .2rem; border-radius: 4px; border: 1px solid var(--border); background: var(--surface); }

.tya-progress { height: 10px; border-radius: 5px; background: var(--surface-subtle); border: 1px solid var(--border); overflow: hidden; margin: .5rem 0; }
.tya-progress > div { height: 100%; background: var(--accent); width: 0; transition: width .2s; }
.tya-log { font-family: Consolas, Menlo, monospace; font-size: .8rem; white-space: pre-wrap; max-height: 12rem; overflow: auto; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: 6px; padding: .5rem; }

.tya-langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .2rem .8rem; max-height: 16rem; overflow: auto; border: 1px solid var(--border); border-radius: 6px; padding: .5rem; }
.tya-langs label { font-size: .88rem; display: flex; gap: .4rem; align-items: center; }

.tya-toast { position: fixed; right: 1rem; bottom: 3.2rem; max-width: 26rem; padding: .7rem 1rem; border-radius: 8px; background: #333; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.3); font-size: .9rem; z-index: 10; }
.tya-toast.error { background: var(--danger); }

@media (max-width: 800px) {
  .tya-body { flex-direction: column; }
  .tya-steps { width: auto; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); }
  .tya-steps-note { display: none; }
  .tya-main { padding: 1rem; }
}