:root {
  color-scheme: dark;
  --bg: #080b14;
  --panel: rgba(18, 24, 41, 0.88);
  --panel-solid: #121829;
  --panel-soft: #171f35;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f7f8fc;
  --muted: #9ba6bd;
  --accent: #7c5cff;
  --accent-2: #4f8cff;
  --accent-soft: rgba(124, 92, 255, 0.15);
  --success: #35d39a;
  --warning: #f4bd5c;
  --danger: #ff6680;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  --radius: 18px;
  --radius-sm: 12px;
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 0%, rgba(79, 140, 255, 0.18), transparent 35%),
    radial-gradient(circle at 96% 10%, rgba(124, 92, 255, 0.18), transparent 34%),
    var(--bg);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.boot-screen {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  color: var(--muted);
}
.brand-logo {
  display: block;
  width: 112px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.brand-logo-large { width: 128px; }
.boot-brand{display:grid;justify-items:center;gap:8px}.brand-row-stack{display:grid;justify-items:start;gap:8px}.sidebar .brand-row-stack{justify-items:center}.brand-subtitle{color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.brand-subtitle-center{text-align:center}
.spinner {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(400px, 0.92fr);
}
.auth-art {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(32px, 5vw, 76px);
  border-right: 1px solid var(--line);
}
.auth-art::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -150px;
  bottom: -180px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow:
    0 0 0 70px rgba(124,92,255,.04),
    0 0 0 140px rgba(79,140,255,.025);
}
.brand-row { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.brand-copy strong { display: block; font: 800 18px/1.15 "Manrope", sans-serif; }
.brand-copy span { color: var(--muted); font-size: 13px; }
.auth-message { max-width: 650px; position: relative; z-index: 1; }
.eyebrow {
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #a99aff;
  font-weight: 700;
  font-size: 12px;
}
h1, h2, h3 { font-family: "Manrope", sans-serif; }
.auth-message h1 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(42px, 6vw, 78px);
  line-height: .98;
  letter-spacing: -.055em;
}
.auth-message p { margin: 24px 0 0; max-width: 590px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.auth-features { display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; }
.auth-feature { padding: 10px 14px; border: 1px solid var(--line); background: rgba(255,255,255,.035); border-radius: 999px; color: #c9d0df; font-size: 13px; }
.auth-panel { display: grid; place-items: center; padding: 32px; background: rgba(5,7,13,.4); }
.auth-card { width: min(100%, 470px); padding: 34px; background: var(--panel); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); backdrop-filter: blur(20px); }
.auth-card h2 { margin: 0 0 8px; font-size: 28px; }
.auth-card > p { margin: 0 0 28px; color: var(--muted); line-height: 1.6; }

.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field label { font-size: 13px; color: #d8dcea; font-weight: 600; }
.input, .select, .textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(8, 12, 23, .78);
  color: var(--text);
  border-radius: 12px;
  padding: 13px 14px;
  outline: none;
  transition: border .2s, box-shadow .2s, background .2s;
}
.input:focus, .select:focus, .textarea:focus { border-color: rgba(124,92,255,.75); box-shadow: 0 0 0 4px rgba(124,92,255,.12); background: #0d1322; }
.textarea { min-height: 100px; resize: vertical; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 43px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0 16px;
  background: var(--panel-soft);
  color: var(--text);
  font-weight: 700;
  transition: transform .15s, border .2s, background .2s, opacity .2s;
}
.btn:hover { transform: translateY(-1px); border-color: var(--line-strong); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 12px 25px rgba(82,84,255,.2); }
.btn-primary:hover { border-color: transparent; filter: brightness(1.06); }
.btn-secondary { background: rgba(255,255,255,.05); border-color: var(--line); }
.btn-danger { background: rgba(255,102,128,.12); border-color: rgba(255,102,128,.26); color: #ff9aad; }
.btn-block { width: 100%; }
.btn-small { min-height: 36px; border-radius: 10px; padding: 0 12px; font-size: 13px; }
.link-btn { border: 0; padding: 0; background: none; color: #a99aff; font-weight: 700; }
.auth-footer { margin-top: 20px; color: var(--muted); font-size: 13px; text-align: center; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  border-right: 1px solid var(--line);
  background: rgba(8, 11, 20, .78);
  backdrop-filter: blur(18px);
  z-index: 20;
}
.sidebar .brand-row { padding: 6px 8px 26px; }
.nav { display: grid; gap: 7px; }
.nav-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 12px 13px;
  border-radius: 12px;
  text-align: left;
  font-weight: 600;
}
.nav-button:hover { color: var(--text); background: rgba(255,255,255,.035); }
.nav-button.active { color: white; background: var(--accent-soft); border-color: rgba(124,92,255,.25); }
.nav-icon { width: 20px; height: 20px; display: grid; place-items: center; font-size: 17px; }
.sidebar-bottom { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.profile-mini { display: flex; align-items: center; gap: 11px; padding: 8px; min-width: 0; }
.avatar { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #263354, #1b2440); font-weight: 800; color: #cfd6ff; }
.profile-mini-copy { min-width: 0; }
.profile-mini-copy strong, .profile-mini-copy span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-mini-copy strong { font-size: 13px; }
.profile-mini-copy span { color: var(--muted); font-size: 12px; margin-top: 2px; text-transform: capitalize; }

.main { min-width: 0; padding: 0 32px 48px; }
.topbar { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.topbar-title h1 { margin: 0; font-size: 23px; letter-spacing: -.03em; }
.topbar-title p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }
.mobile-nav-btn { display: none; }
.content { max-width: 1500px; margin: 0 auto; padding-top: 28px; }

.grid { display: grid; gap: 18px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); box-shadow: 0 12px 34px rgba(0,0,0,.15); overflow: hidden; }
.card-body { padding: 22px; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.card-header h2, .card-header h3 { margin: 0; font-size: 17px; }
.card-header p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.stat-card { padding: 20px; position: relative; min-height: 142px; }
.stat-label { color: var(--muted); font-size: 13px; font-weight: 600; }
.stat-value { margin-top: 20px; font: 800 32px/1 "Manrope", sans-serif; letter-spacing: -.04em; }
.stat-note { margin-top: 10px; color: #c4cbdb; font-size: 12px; }
.stat-icon { position: absolute; right: 18px; top: 18px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #bfb5ff; background: var(--accent-soft); }
.section-gap { margin-top: 20px; }

.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 22px; }
.page-heading h2 { margin: 0; font-size: 28px; letter-spacing: -.04em; }
.page-heading p { margin: 8px 0 0; color: var(--muted); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
td { font-size: 14px; }
tr:last-child td { border-bottom: 0; }
.file-cell { display: flex; align-items: center; gap: 12px; min-width: 260px; }
.file-icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: rgba(79,140,255,.12); color: #8db4ff; font-weight: 800; font-size: 12px; }
.file-name strong, .file-name span { display: block; }
.file-name span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .035em; border: 1px solid var(--line); background: rgba(255,255,255,.04); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-ready, .badge-approved, .badge-active { color: var(--success); background: rgba(53,211,154,.08); border-color: rgba(53,211,154,.18); }
.badge-uploaded, .badge-analysing, .badge-extracting, .badge-validating { color: var(--warning); background: rgba(244,189,92,.08); border-color: rgba(244,189,92,.18); }
.badge-failed, .badge-rejected { color: var(--danger); background: rgba(255,102,128,.08); border-color: rgba(255,102,128,.18); }
.badge-draft, .badge-generic { color: #9cafff; }

.drop-zone {
  min-height: 270px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px dashed rgba(155,166,189,.36);
  border-radius: 16px;
  background: rgba(5,8,16,.38);
  padding: 30px;
  transition: border .2s, background .2s, transform .2s;
}
.drop-zone.dragging { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.005); }
.drop-zone-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 17px; background: var(--accent-soft); color: #b7abff; font-size: 25px; }
.drop-zone h3 { margin: 0; font-size: 18px; }
.drop-zone p { margin: 8px 0 18px; color: var(--muted); line-height: 1.6; }
.selected-file { margin-top: 14px; display: flex; gap: 10px; align-items: center; justify-content: center; color: #d8dcea; font-size: 13px; }
.progress { width: 100%; height: 8px; background: rgba(255,255,255,.07); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .25s; }

.schema-card { padding: 22px; }
.schema-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.schema-category { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); font-size: 22px; }
.schema-card h3 { margin: 18px 0 6px; font-size: 18px; }
.schema-card p { margin: 0; color: var(--muted); line-height: 1.55; min-height: 44px; }
.schema-meta { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; gap: 18px; color: var(--muted); font-size: 12px; }
.schema-meta strong { color: var(--text); }

.empty-state { padding: 52px 24px; text-align: center; color: var(--muted); }
.empty-state-icon { font-size: 34px; margin-bottom: 12px; }
.empty-state h3 { margin: 0 0 6px; color: var(--text); }
.empty-state p { margin: 0 auto; max-width: 440px; line-height: 1.6; }

.notice { padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 18px; font-size: 13px; line-height: 1.55; }
.notice-error { color: #ffacba; background: rgba(255,102,128,.09); border-color: rgba(255,102,128,.22); }
.notice-success { color: #8be8c6; background: rgba(53,211,154,.08); border-color: rgba(53,211,154,.20); }
.notice-info { color: #b8c6ff; background: rgba(79,140,255,.08); border-color: rgba(79,140,255,.2); }

.toast-stack { position: fixed; right: 22px; bottom: 22px; z-index: 100; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); }
.toast { padding: 14px 16px; border-radius: 13px; border: 1px solid var(--line-strong); background: #161d30; box-shadow: var(--shadow); animation: toastIn .25s ease; font-size: 13px; line-height: 1.5; }
.toast.success { border-color: rgba(53,211,154,.32); }
.toast.error { border-color: rgba(255,102,128,.32); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

.config-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.config-card { width: min(100%, 700px); padding: 30px; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.config-card code { display: block; white-space: pre-wrap; padding: 16px; border-radius: 12px; background: #070a12; color: #cfd5ff; border: 1px solid var(--line); line-height: 1.65; }
.config-card h1 { margin-top: 18px; }
.config-card p { color: var(--muted); line-height: 1.7; }

@media (max-width: 1120px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-shell { grid-template-columns: 1fr 440px; }
  .auth-message h1 { font-size: clamp(38px, 5vw, 60px); }
}
@media (max-width: 850px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-art { min-height: 420px; border-right: 0; border-bottom: 1px solid var(--line); }
  .app-shell { display: block; }
  .sidebar { position: fixed; left: 0; transform: translateX(-105%); width: 270px; transition: transform .25s ease; box-shadow: var(--shadow); }
  .sidebar.open { transform: translateX(0); }
  .main { padding: 0 18px 36px; }
  .mobile-nav-btn { display: inline-flex; }
  .topbar { min-height: 72px; }
}
@media (max-width: 650px) {
  .auth-art { padding: 28px 22px; min-height: 390px; }
  .auth-panel { padding: 18px; }
  .auth-card { padding: 25px 20px; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .topbar-title p { display: none; }
  .page-heading { display: block; }
  .page-heading .btn { margin-top: 16px; }
  .card-header { align-items: flex-start; }
  .stat-card { min-height: 125px; }
  .main { padding-inline: 14px; }
}

/* Template Factory V2 additions */
.workflow-list { display: grid; gap: 10px; }
.workflow-list button { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px; color: var(--text); background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 13px; cursor: pointer; }
.workflow-list button:hover { border-color: var(--line-strong); background: rgba(124,108,255,.06); }
.workflow-list button > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: #c7bdff; font-weight: 800; }
.workflow-list strong, .workflow-list small { display: block; }
.workflow-list small { color: var(--muted); margin-top: 2px; }
.action-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 320px; }
.error-copy { color: var(--danger) !important; max-width: 340px; white-space: normal; }
.muted-small { color: var(--muted); font-size: 12px; margin-top: 4px; }
.choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.choice-card { position: relative; display: flex; align-items: center; gap: 12px; min-height: 82px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); cursor: pointer; transition: .2s ease; }
.choice-card:hover, .choice-card.selected { border-color: rgba(124,108,255,.65); background: rgba(124,108,255,.09); }
.choice-card input { position: absolute; top: 10px; right: 10px; accent-color: var(--accent); }
.choice-card strong, .choice-card small { display: block; }
.choice-card small { margin-top: 4px; color: var(--muted); }
.subheading { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 14px; }
.subheading h3 { margin: 0; }
.subheading p { margin: 5px 0 0; color: var(--muted); }
.mapping-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.mapping-card { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.018); }
.mapping-card > div { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.mapping-card .select { min-width: 0; }
.compact-select { min-width: 165px; padding: 9px 34px 9px 10px; font-size: 12px; }
.preview-modal { position: fixed; inset: 0; z-index: 500; display: grid; grid-template-rows: auto 1fr; background: rgba(3,5,10,.96); }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: #0e1423; }
.preview-toolbar > div { display: flex; flex-wrap: wrap; gap: 7px; }
.preview-stage { overflow: auto; padding: 20px; display: flex; justify-content: center; align-items: flex-start; }
.preview-stage iframe { width: 100%; height: calc(100vh - 90px); border: 0; border-radius: 10px; background: white; transition: width .2s ease; }
.badge-needs_review, .badge-needs-review { color: #f9d47b; background: rgba(249,212,123,.08); border-color: rgba(249,212,123,.2); }
.badge-confirmed, .badge-completed, .badge-approved { color: var(--success); background: rgba(53,211,154,.08); border-color: rgba(53,211,154,.2); }
.badge-analysing, .badge-extracting, .badge-assembling, .badge-validating { color: #88b9ff; background: rgba(79,140,255,.08); border-color: rgba(79,140,255,.2); }

@media (max-width: 1120px) {
  .choice-grid, .mapping-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 650px) {
  .choice-grid, .mapping-grid { grid-template-columns: 1fr; }
  .preview-toolbar { align-items: flex-start; flex-direction: column; }
  .preview-stage { padding: 8px; }
  .preview-stage iframe { height: calc(100vh - 130px); }
  .action-row { min-width: 240px; }
}

/* V2.2 generation controls */
.field-help{display:block;margin-top:7px;color:var(--muted);font-size:12px;line-height:1.45}

/* V2.3 generation controls */
.generation-options { margin: 20px 0 16px; }
.setting-card { display: flex; align-items: flex-start; gap: 13px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); cursor: pointer; }
.setting-card:hover { border-color: rgba(124,108,255,.48); background: rgba(124,108,255,.065); }
.setting-card input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--accent); }
.setting-card strong, .setting-card small { display: block; }
.setting-card small { margin-top: 5px; color: var(--muted); line-height: 1.45; }
.advanced-panel { margin-top: 20px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255,255,255,.025); }
.advanced-panel summary { cursor: pointer; font-weight: 800; color: #e7e9f2; }
.section-mix-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.section-mix-grid .field { margin: 0; }
.choice-card input[type="checkbox"] { accent-color: var(--accent); }
@media(max-width: 960px){.section-mix-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width: 620px){.section-mix-grid{grid-template-columns:1fr}}


/* V4.3 structural mix generation layout */
.generation-setup-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.generation-control-card{display:flex;flex-direction:column;min-width:0;margin:0;padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}
.generation-control-card label{display:flex;align-items:center;gap:9px;min-height:30px;margin-bottom:12px;font-weight:800}
.generation-control-card .select{width:100%;min-height:48px}
.generation-control-card .field-help{margin-top:10px;min-height:36px}
.step-number{display:inline-grid;place-items:center;width:25px;height:25px;flex:0 0 auto;border-radius:8px;background:var(--accent-soft);color:#c9c0ff;font-size:12px;font-weight:900}
@media(max-width:1250px){.generation-setup-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.generation-control-card .field-help{min-height:auto}}
@media(max-width:760px){.generation-setup-grid{grid-template-columns:1fr}}