:root{--bg:#f4f6fb;--card:#fff;--ink:#111827;--muted:#6b7280;--line:#e5e7eb;--dark:#111827;--soft:#f8fafc;--accent:#2563eb;--danger:#b91c1c;--ok:#047857;--warn:#b45309;--shadow:0 12px 32px #11182714}*{box-sizing:border-box}body{font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);margin:0;color:var(--ink)}.page-shell{max-width:1320px;margin:28px auto;padding:0 20px}.hero{display:flex;justify-content:space-between;gap:24px;align-items:stretch;background:linear-gradient(135deg,#111827,#1f2937 55%,#172554);color:white;padding:28px;border-radius:26px;margin-bottom:20px;box-shadow:var(--shadow)}.hero h1{margin:4px 0 10px;font-size:34px;letter-spacing:-.03em}.hero p{max-width:820px;color:#d1d5db;margin:0;line-height:1.55}.eyebrow{margin:0;text-transform:uppercase;letter-spacing:.13em;font-size:12px;font-weight:800;color:#bfdbfe}.eyebrow.dark{color:#1d4ed8}.hero-panel{width:260px;min-width:220px;background:#ffffff12;border:1px solid #ffffff24;border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:8px}.hero-panel small{color:#d1d5db;line-height:1.35}.status-pill{align-self:flex-start;border-radius:999px;padding:6px 10px;background:#dcfce7;color:#14532d;font-size:12px;font-weight:800}.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.app-grid{align-items:stretch}.card{background:var(--card);padding:20px;border-radius:22px;box-shadow:var(--shadow);margin-bottom:18px;border:1px solid #ffffff}.builder-card{border:1px solid #dbeafe}.card-title,.section-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}.section-title-row.compact{align-items:center}.card h2,.section-title-row h2{margin:0 0 6px}.card h3{margin:0 0 8px;font-size:18px}.muted{color:var(--muted);margin:0 0 8px;line-height:1.45}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.form-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.builder-top-grid{display:grid;grid-template-columns:1.2fr 1.3fr 1fr auto;gap:14px;align-items:end;background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:16px}label{display:block;margin:8px 0;font-weight:750;font-size:13px}label small{display:block;color:var(--muted);font-weight:500;margin-top:5px;line-height:1.35}input,select,textarea{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid #d1d5db;border-radius:12px;margin-top:6px;background:white;color:var(--ink);outline:none}input:focus,select:focus,textarea:focus{border-color:#60a5fa;box-shadow:0 0 0 4px #bfdbfe80}textarea{font-family:Consolas,ui-monospace,monospace;line-height:1.45}.small-textarea{height:105px}.button-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.button-row.no-top{margin-top:0}.action-stack{display:flex;flex-direction:column;gap:8px}button{background:var(--dark);color:white;border:0;border-radius:12px;padding:11px 15px;margin:0;cursor:pointer;font-weight:750;transition:.15s}button.secondary{background:#4b5563}button.danger{background:var(--danger)}button.full{width:100%}button:hover{transform:translateY(-1px);filter:brightness(1.04)}button:active{transform:translateY(0)}.download-box a{display:inline-block;background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;border-radius:12px;padding:10px 12px;font-weight:800;text-decoration:none}.guide-panel{margin-top:14px;border:1px solid #bfdbfe;background:#eff6ff;border-radius:18px;padding:16px}.guide-panel h3{margin:0 0 8px}.guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}.guide-item{background:white;border:1px solid #dbeafe;border-radius:14px;padding:12px}.guide-item b{display:block;margin-bottom:6px}.guide-item small{color:var(--muted);line-height:1.35}.module-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.module{border:1px solid var(--line);background:linear-gradient(180deg,#fff,#f9fafb);border-radius:16px;padding:14px;display:flex;justify-content:space-between;gap:12px;align-items:center}.module small{color:var(--muted)}.module-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.badge{display:inline-block;background:#eef2ff;color:#3730a3;padding:4px 8px;border-radius:999px;font-size:12px;margin:4px 4px 0 0;font-weight:800}.badge.ok{background:#dcfce7;color:#166534}.badge.warn{background:#fef3c7;color:#92400e}.hidden{display:none!important}.sticky-head{position:sticky;top:0;z-index:5;background:white;border-bottom:1px solid var(--line);padding-bottom:12px}.form-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:18px}.builder-nav{position:sticky;top:96px;align-self:start;background:#f9fafb;border:1px solid var(--line);border-radius:18px;padding:12px}.builder-nav a{display:block;text-decoration:none;color:#374151;font-weight:800;padding:9px 10px;border-radius:10px}.builder-nav a:hover{background:#e0f2fe;color:#075985}.subcard{border:1px solid var(--line);background:#fff;border-radius:18px;padding:18px;margin-bottom:16px}.checkbox-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.check-item{display:flex;align-items:flex-start;gap:8px;margin:0;padding:11px;background:#f8fafc;border:1px solid var(--line);border-radius:12px;font-weight:750}.check-item input,.mini-check input{width:auto;margin:2px 4px 0 0}.check-item span{display:block}.check-item small{font-size:11px;margin-top:3px}.field-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.hint-chip{background:#f3f4f6;color:#374151;border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800}.field-row{border:1px solid #dbeafe;border-radius:16px;background:#f8fbff;padding:12px;margin:12px 0;display:grid;grid-template-columns:1fr 160px 1fr 1fr 1fr repeat(3,90px) 1.1fr 1.1fr 1.1fr auto;gap:10px;align-items:start}.field-row .mini-check{background:white;border:1px solid var(--line);border-radius:10px;padding:9px 8px;margin-top:6px;font-size:12px;display:flex;align-items:center;justify-content:center}.field-row textarea{height:74px;font-size:12px;margin-top:6px}.field-row input,.field-row select{font-size:13px}.compact-grid label{margin:4px 0}.editor-card textarea#moduleEditor{height:450px;font-size:13px}pre{white-space:pre-wrap;background:#111827;color:#e5e7eb;padding:14px;border-radius:14px;min-height:44px;overflow:auto}.validation-ok{background:#052e16;color:#dcfce7}.validation-bad{background:#3f1111;color:#fee2e2}.ledger-pack-panel{margin-top:14px;border:1px solid #c7d2fe;background:linear-gradient(180deg,#eef2ff,#f8fafc);border-radius:18px;padding:16px}.ledger-pack-panel h3{margin:0 0 8px}.ledger-guide{margin-top:12px}.ledger-pack-panel b{color:#111827}@media(max-width:1100px){.grid,.module-list,.form-layout{grid-template-columns:1fr}.builder-top-grid{grid-template-columns:1fr 1fr}.field-row{grid-template-columns:repeat(2,minmax(0,1fr))}.checkbox-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.builder-nav{position:relative;top:0}.hero{flex-direction:column}.hero-panel{width:auto}}@media(max-width:720px){.page-shell{padding:0 12px;margin:16px auto}.form-grid,.form-grid.three,.form-grid.four,.builder-top-grid,.guide-grid{grid-template-columns:1fr}.checkbox-grid{grid-template-columns:1fr}.module{flex-direction:column;align-items:flex-start}.hero h1{font-size:26px}}


/* Qentrixia v2.4.8 - Edit Form Fields readability and null-safe save upgrade */
#fieldsBox{
  width:100%;
  overflow-x:auto;
  overflow-y:visible;
  padding:4px 4px 16px;
  margin-top:8px;
  scrollbar-gutter:stable;
}
#fieldsBox .field-row{
  min-width:2460px;
  grid-template-columns:210px 170px 240px 220px 240px 110px 110px 110px 300px 300px 340px 340px 360px 100px;
}
#fieldsBox .field-row input,
#fieldsBox .field-row select{
  min-width:0;
  font-size:14px;
}
#fieldsBox .field-row textarea{
  min-width:0;
  resize:horizontal;
}
#fieldsBox .field-row .field-name{
  font-weight:800;
}
@media(max-width:1100px){
  #fieldsBox .field-row{
    grid-template-columns:210px 170px 240px 220px 240px 110px 110px 110px 300px 300px 340px 340px 360px 100px;
  }
}

/* Qentrixia v2.5.0 - Guided Field Rule Builder UI */
.workflow-strip{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:12px 0;
}
.workflow-strip>div{
  background:#eff6ff;
  border:1px solid #bfdbfe;
  border-radius:14px;
  padding:12px;
}
.workflow-strip b{display:block;margin-bottom:4px;color:#1e3a8a}
.workflow-strip small{display:block;color:#475569;line-height:1.35}
#fieldsBox .guided-field-row{
  min-width:2380px;
  grid-template-columns:210px 170px 240px 220px 240px 110px 110px 110px 300px 300px 250px 250px 270px 100px;
}
.field-config-card{
  min-height:92px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:6px;
}
.field-config-card b{font-size:13px;color:#111827}
.field-config-card small{color:#6b7280;line-height:1.25;min-height:30px}
.field-config-card.configured{border-color:#86efac;background:#f0fdf4}
.field-config-card.config-error{border-color:#fecaca;background:#fff1f2}
.mini-button{padding:8px 10px;font-size:12px;border-radius:10px;align-self:flex-start}
.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(15,23,42,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.modal-card{
  width:min(880px,96vw);
  max-height:90vh;
  overflow:auto;
  background:#fff;
  border-radius:22px;
  padding:20px;
  box-shadow:0 24px 80px rgba(15,23,42,.35);
  border:1px solid #dbeafe;
}
.compact-guide{margin:0 0 12px;padding:12px}
.compact-guide small{display:block;color:#475569;margin-top:4px;line-height:1.35}
.wide-label{grid-column:1 / -1}
.modal-card label input[type="checkbox"]{width:auto;margin-right:8px}
@media(max-width:900px){.workflow-strip{grid-template-columns:1fr}.modal-card{width:96vw}.modal-backdrop{padding:12px}}

/* Qentrixia v2.5.1 - Compact field list with complete field popup */
#fieldsBox{
  overflow-x:visible;
  padding-bottom:8px;
}
#fieldsBox .compact-field-row,
#fieldsBox .guided-field-row.compact-field-row{
  min-width:0;
  grid-template-columns:minmax(240px,1fr) auto;
  align-items:center;
  background:#ffffff;
  border-color:#bfdbfe;
  padding:12px;
}
#fieldsBox .compact-field-row .field-name{
  margin-top:0;
  font-weight:850;
  font-size:15px;
}
.compact-field-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
}
.field-editor-card{
  width:min(1040px,96vw);
}
.field-editor-checks{
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
}
.field-editor-checks span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin:8px 12px 0 0;
  font-weight:700;
  color:#374151;
}
.field-editor-checks input[type="checkbox"]{
  width:auto;
  margin:0;
}
.field-json-grid{margin-top:12px}
.field-rule-panel{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}
.field-rule-card{
  border:1px solid var(--line);
  background:#f8fafc;
  border-radius:16px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.field-rule-card b{font-size:14px;color:#111827}
.field-rule-card small{color:#64748b;line-height:1.35;min-height:34px}
@media(max-width:900px){
  #fieldsBox .compact-field-row,
  #fieldsBox .guided-field-row.compact-field-row{grid-template-columns:1fr}
  .compact-field-actions{justify-content:flex-start}
  .field-rule-panel{grid-template-columns:1fr}
}

/* Qentrixia v2.5.2 - Nested configure popups must stay above the full field editor */
#fieldEditorModal{
  z-index:100;
}
#fieldConfigModal{
  z-index:220;
  align-items:flex-start;
  padding-top:28px;
}
#fieldConfigModal .modal-card{
  width:min(920px,96vw);
  max-height:84vh;
}

/* Qentrixia v2.5.3 - force nested configure popup above field editor */
#fieldConfigModal{
  z-index:9999 !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding-top:18px !important;
}
#fieldConfigModal .modal-card{
  width:min(940px,96vw) !important;
  max-height:86vh !important;
}
#fieldEditorModal{
  z-index:5000 !important;
}

/* Qentrixia v2.5.5 - Guided popup cards for module-level JSON sections */
.guided-json-grid{align-items:stretch}
.guided-json-card{
  border:1px solid #dbeafe;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border-radius:16px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:132px;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}
.guided-json-card>b{font-size:15px;color:#0f172a}
.guided-json-card>small:first-of-type{color:#475569;min-height:20px}
.guided-json-card.configured{border-color:#86efac;background:linear-gradient(180deg,#fff,#f0fdf4)}
.guided-json-card.config-error{border-color:#fca5a5;background:#fff7f7}
.advanced-config-backdrop{z-index:2147483000;align-items:flex-start;padding-top:24px}
.advanced-config-card{width:min(980px,96vw);max-height:92vh;overflow:auto}
.config-row-card{border:1px solid #e2e8f0;border-radius:14px;padding:12px;margin:10px 0;background:#fff}
.config-row-title{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.config-row-title b{color:#0f172a}
.hidden-config[hidden]{display:none!important}

/* Qentrixia v2.6.10 - SaaS cloud workspace UI */
.cloud-auth-card {
  border: 1px solid rgba(79, 70, 229, 0.22);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}
.hidden { display: none !important; }
#cloudUserInfo[readonly] { background: rgba(15, 23, 42, 0.04); }

/* Qentrixia v2.6.13 - Developer UX landing and workspace flow UI only */
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
button.light{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35)}
.landing-card{border:1px solid #dbeafe;background:linear-gradient(180deg,#ffffff,#f8fbff)}
.ux-guide-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0}
.auth-panel,.project-select-panel{background:#f8fafc;border:1px solid var(--line);border-radius:18px;padding:16px;margin-top:12px}
.auth-copy h3{margin:0 0 4px}.auth-copy{margin-bottom:8px}
.project-select-panel{background:linear-gradient(180deg,#eff6ff,#ffffff);border-color:#bfdbfe}
.factory-workspace{scroll-margin-top:18px}
.app-grid>.card{margin-bottom:0}
#cloudProjectSelect:empty{min-height:42px}
.workspace-empty-note{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:14px;padding:12px;margin-top:12px;font-weight:750}
@media(max-width:1100px){.ux-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.hero-actions button{width:100%}.ux-guide-grid{grid-template-columns:1fr}.auth-panel .form-grid.four,.project-select-panel .form-grid.four{grid-template-columns:1fr}}