/* TemplateForge application UI */
:root {
  --app-brand: #4f46e5;
  --app-brand-rgb: 79, 70, 229;
  --app-sidebar: #111827;
  --app-sidebar-text: #cbd5e1;
  --app-bg: #f6f7fb;
  --app-surface: #ffffff;
  --app-border: #e5e7eb;
  --app-muted: #6b7280;
  --bs-primary: #4f46e5;
  --bs-primary-rgb: 79, 70, 229;
  --bs-link-color: #4338ca;
  --bs-link-color-rgb: 67, 56, 202;
  --bs-link-hover-color: #3730a3;
  --bs-body-font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
[data-bs-theme="dark"] { --app-bg: #0b1020; --app-surface: #111827; --app-border: #1f2937; --app-muted: #9ca3af; --bs-link-color: #a5b4fc; --bs-link-color-rgb: 165, 180, 252; }
html[data-ui-scale="110"] { font-size: 110%; } html[data-ui-scale="125"] { font-size: 125%; } html[data-ui-scale="150"] { font-size: 150%; }
body { background: var(--app-bg); }
.btn-primary { --bs-btn-bg: #4f46e5; --bs-btn-border-color: #4f46e5; --bs-btn-hover-bg: #4338ca; --bs-btn-hover-border-color: #4338ca; --bs-btn-active-bg: #3730a3; --bs-btn-disabled-bg: #6366f1; --bs-btn-disabled-border-color: #6366f1; }
.btn-outline-primary { --bs-btn-color: #4338ca; --bs-btn-border-color: #4f46e5; --bs-btn-hover-bg: #4f46e5; --bs-btn-hover-border-color: #4f46e5; --bs-btn-active-bg: #4338ca; }
.text-primary { color: #4338ca !important; }
[data-bs-theme="dark"] .text-primary { color: #a5b4fc !important; }
.form-control:focus, .form-select:focus { border-color: #a5b4fc; box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .2); }
.form-check-input:checked { background-color: #4f46e5; border-color: #4f46e5; }
.nav-pills { --bs-nav-pills-link-active-bg: #4f46e5; }
.pagination { --bs-pagination-active-bg: #4f46e5; --bs-pagination-active-border-color: #4f46e5; }
:focus-visible { outline: 3px solid rgba(79, 70, 229, .45); outline-offset: 2px; }

.app { display: flex; min-height: 100vh; }
.app-sidebar { width: 248px; flex-shrink: 0; background: var(--app-sidebar); color: var(--app-sidebar-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.app-brand { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.25rem; color: #fff; font-weight: 800; font-size: 1.1rem; text-decoration: none; }
.app-brand img { width: 30px; height: 30px; }
.app-nav { list-style: none; margin: 0; padding: .5rem .75rem; flex: 1; overflow-y: auto; }
.app-nav-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #8b95a7; padding: 1rem .75rem .35rem; }
.app-nav a { display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border-radius: .5rem; color: var(--app-sidebar-text); text-decoration: none; font-size: .925rem; }
.app-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.app-nav a.active { background: rgba(99, 102, 241, .25); color: #fff; font-weight: 600; }
.app-nav .bi { font-size: 1.05rem; }
.app-sidebar-foot { padding: 1rem 1.25rem; font-size: .8rem; color: #8b95a7; border-top: 1px solid rgba(255,255,255,.08); }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-top { display: flex; align-items: center; gap: .75rem; padding: .65rem 1.5rem; background: var(--app-surface); border-bottom: 1px solid var(--app-border); position: sticky; top: 0; z-index: 1020; }
.app-content { padding: 1.5rem; flex: 1; }
.app-content > * + * { margin-top: 1.25rem; }
.app-footer { padding: .9rem 1.5rem; font-size: .8rem; color: var(--app-muted); }
.app-menu-btn { display: none; }
@media (max-width: 991.98px) {
  .app-sidebar { position: fixed; z-index: 1045; transform: translateX(-100%); transition: transform .2s; }
  .app.nav-open .app-sidebar { transform: none; }
  .app-menu-btn { display: inline-flex; }
  .app-content { padding: 1rem; }
}
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.page-head h1 { font-size: 1.6rem; margin: 0; font-weight: 800; }
.page-head p { margin: .25rem 0 0; color: var(--app-muted); }
.card { border-color: var(--app-border); border-radius: .85rem; }
.card-header { background: transparent; font-weight: 600; }
.stat { padding: 1.1rem 1.25rem; }
.stat .num { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.stat .lbl { color: var(--app-muted); font-size: .85rem; }
.project-card { transition: box-shadow .15s, transform .15s; height: 100%; }
.project-card:hover { box-shadow: 0 10px 30px rgba(15, 23, 42, .08); transform: translateY(-2px); }
.project-card .thumb { height: 120px; border-radius: .85rem .85rem 0 0; display: grid; place-items: center; font-size: 2.6rem; color: #fff; }
.thumb-ST01 { background: linear-gradient(135deg, #4f46e5, #0ea5e9); } .thumb-ST02 { background: linear-gradient(135deg, #db2777, #f59e0b); }
.thumb-ST03 { background: linear-gradient(135deg, #1d4ed8, #0f172a); } .thumb-ST04 { background: linear-gradient(135deg, #c2410c, #f59e0b); }
.thumb-ST05 { background: linear-gradient(135deg, #18181b, #52525b); } .thumb-ST06 { background: linear-gradient(135deg, #15803d, #84cc16); }
.thumb-ST07 { background: linear-gradient(135deg, #7c3aed, #ec4899); } .thumb-ST08 { background: linear-gradient(135deg, #0e7490, #22d3ee); }
.thumb-ST09 { background: linear-gradient(135deg, #64748b, #0f172a); } .thumb-BLANK, .thumb-CLONE { background: linear-gradient(135deg, #94a3b8, #475569); }
.status { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .25rem .55rem; border-radius: 999px; }
.status-DRAFT { background: #e5e7eb; color: #374151; } .status-IN_REVIEW { background: #fef3c7; color: #92400e; } .status-APPROVED { background: #dbeafe; color: #1e40af; }
.status-RELEASED, .status-PUBLISHED, .status-SUCCEEDED { background: #dcfce7; color: #166534; } .status-ARCHIVED { background: #f3f4f6; color: #6b7280; }
.status-REJECTED, .status-FAILED { background: #fee2e2; color: #991b1b; } .status-QUEUED { background: #e0e7ff; color: #3730a3; } .status-RUNNING { background: #e0f2fe; color: #075985; }
.status-ACTIVE { background: #dcfce7; color: #166534; } .status-DISABLED { background: #fee2e2; color: #991b1b; }
.project-tabs { flex-wrap: nowrap; overflow-x: auto; border-bottom: 1px solid var(--app-border); }
.project-tabs .nav-link { white-space: nowrap; color: var(--app-muted); border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: .6rem .9rem; }
.project-tabs .nav-link.active { color: var(--bs-body-color); border-bottom-color: #4f46e5; font-weight: 600; background: none; }
.kit-card { cursor: pointer; height: 100%; border: 2px solid var(--app-border); }
.btn-check:checked + .kit-card { border-color: #4f46e5; box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .15); }
.kit-card .thumb { height: 90px; border-radius: .7rem .7rem 0 0; display: grid; place-items: center; font-size: 2.2rem; color: #fff; }
.swatch-row { display: flex; gap: 4px; }
.swatch-row span { flex: 1; height: 22px; border-radius: 4px; }
.wizard-steps { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.wizard-steps li { display: flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border-radius: 999px; background: var(--app-surface); border: 1px solid var(--app-border); font-size: .875rem; color: var(--app-muted); }
.wizard-steps li.current { border-color: #4f46e5; color: #3730a3; font-weight: 600; }
.wizard-steps li.done { color: #166534; }
.wizard-step[hidden] { display: none !important; }
.table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--app-muted); }
.code { font-family: "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; }
textarea.code { min-height: 320px; white-space: pre; }
.log { background: #0f172a; color: #e2e8f0; border-radius: .6rem; padding: 1rem; max-height: 420px; overflow: auto; font-size: .78rem; white-space: pre-wrap; }
.score { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font-weight: 800; font-size: 1.2rem; border: 5px solid; }
.score-good { border-color: #22c55e; color: #15803d; } .score-ok { border-color: #f59e0b; color: #b45309; } .score-bad { border-color: #ef4444; color: #b91c1c; }
.check-row { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 0; border-bottom: 1px solid var(--app-border); }
.check-row .bi-check-circle-fill { color: #16a34a; } .check-row .bi-x-circle-fill { color: #dc2626; } .check-row .bi-dash-circle { color: #6b7280; }
.empty { text-align: center; padding: 3rem 1rem; color: var(--app-muted); }
.empty .bi { font-size: 2.5rem; display: block; margin-bottom: .5rem; }
.token-swatch { width: 40px; height: 40px; border-radius: .5rem; border: 1px solid var(--app-border); padding: 0; }
.contrast-bad { color: #b91c1c; font-weight: 600; } .contrast-ok { color: #15803d; }
.preview-stage { background: repeating-conic-gradient(#e5e7eb 0% 25%, #f8fafc 0% 50%) 50% / 20px 20px; border-radius: .85rem; padding: 1rem; display: grid; place-items: center; min-height: 70vh; }
.preview-frame { background: #fff; border: 0; border-radius: .6rem; box-shadow: 0 20px 50px rgba(15, 23, 42, .18); transition: width .25s, height .25s; max-width: 100%; }
.device-bar .btn.active { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; background: radial-gradient(1000px 500px at 10% -10%, rgba(79,70,229,.18), transparent), radial-gradient(800px 400px at 110% 110%, rgba(14,165,233,.15), transparent), var(--app-bg); }
.auth-card { width: 100%; max-width: 430px; }
.auth-card .card-body { padding: 2rem; }
.kbd-list kbd { background: var(--app-bg); color: var(--bs-body-color); border: 1px solid var(--app-border); }
.diff-added { background: #dcfce7; } .diff-removed { background: #fee2e2; } .diff-changed { background: #fef9c3; }
[data-bs-theme="dark"] .diff-added { background: #14532d; } [data-bs-theme="dark"] .diff-removed { background: #7f1d1d; } [data-bs-theme="dark"] .diff-changed { background: #713f12; }
.shot { border: 1px solid var(--app-border); border-radius: .5rem; max-width: 100%; }
.qr svg { width: 200px; height: 200px; }
.sitemap-node { border: 1px solid var(--app-border); border-radius: .6rem; padding: .6rem .8rem; background: var(--app-surface); }
.sticky-actions { position: sticky; bottom: 0; background: var(--app-surface); border-top: 1px solid var(--app-border); padding: .75rem 0; }

/* fieldset legends used as field labels */
legend.form-label { font-size: 1rem; font-weight: 600; margin-bottom: .4rem; }