:root {
  --blue: #0c5bb3;
  --blue-dark: #093f84;
  --blue-deep: #072b5e;
  --text: #1f3552;
  --muted: #6c7f95;
  --line: #dbe6f1;
  --panel: rgba(255,255,255,.96);
  --danger: #c62828;
  --success: #067647;
}
* { box-sizing: border-box; }
body { margin: 0; background: linear-gradient(180deg, #f6f9fd 0%, #edf3f9 100%); color: var(--text); font-family: Arial, Helvetica, sans-serif; overflow-x:hidden; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:20px 28px; background:#fff; border-bottom:1px solid #e5edf5; box-shadow:0 8px 24px rgba(16,45,89,.06); }
.topbar-clean { flex-wrap:nowrap; }
.title-brand { display:flex; align-items:center; gap:16px; min-width:0; }
.top-logo { width:72px; height:72px; object-fit:contain; flex:0 0 auto; }
.topbar h1 { margin:0; font-size:30px; line-height:1.1; color:var(--blue-deep); }
.top-subtitle { margin:6px 0 0; color:var(--muted); font-size:15px; }
.app-container { margin:0 auto; padding:24px 24px 150px; }
.wide-container { max-width:1500px; }
.panel { background:var(--panel); border:1px solid #e0e8f1; border-radius:24px; padding:22px; box-shadow:0 18px 40px rgba(15,47,109,.07); margin-bottom:24px; }
.panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:18px; }
.split-head { flex-wrap:wrap; }
.panel-head h2 { margin:0 0 6px; font-size:28px; color:var(--blue-deep); }
.panel-head p { margin:0; color:var(--muted); line-height:1.45; }
.settings-form,.compact-form { display:grid; gap:16px; }
.manage-grid { align-items:end; }
.field-grid { display:grid; gap:16px; }
.field-grid.one { grid-template-columns:1fr; }
.field-grid.two { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.field-grid.three { grid-template-columns:repeat(3, minmax(0, 1fr)); }
label { display:grid; gap:8px; color:#2b4364; font-size:14px; font-weight:700; }
input, textarea, select { width:100%; border:1px solid #ccd8e6; border-radius:14px; background:#fff; padding:13px 14px; color:var(--text); font-size:15px; font-family:Arial, Helvetica, sans-serif; line-height:1.4; outline:none; box-shadow: inset 0 1px 2px rgba(0,0,0,.03); }
input:focus, textarea:focus, select:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(12,91,179,.10); }
textarea { resize:vertical; }
.primary-btn,.secondary-btn,.danger-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:14px; padding:13px 18px; font-size:15px; font-weight:700; text-decoration:none; cursor:pointer; border:0; font-family:Arial, Helvetica, sans-serif; }
.primary-btn { color:#fff; background:linear-gradient(135deg, var(--blue), var(--blue-deep)); box-shadow:0 14px 26px rgba(9,91,177,.20); }
.secondary-btn { color:var(--blue-deep); background:#fff; border:1px solid #bfd1e3; }
.danger-btn { color:#fff; background:var(--danger); }
.small { padding:10px 12px; font-size:13px; }
.action-row { display:flex; justify-content:flex-end; gap:12px; flex-wrap:wrap; margin-top:16px; }
.count-pill { padding:9px 12px; border-radius:999px; background:#eef5ff; color:var(--blue-deep); font-weight:700; border:1px solid #d8e5f3; white-space:nowrap; }
.table-card { border:1px solid var(--line); border-radius:20px; overflow:auto; background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%); }
table { width:100%; border-collapse:separate; border-spacing:0; min-width:980px; }
.entry-table thead th,.saved-table thead th { background:linear-gradient(135deg, var(--blue), var(--blue-dark)); color:#fff; text-align:center; padding:15px 14px; font-size:14px; border-right:1px solid rgba(255,255,255,.12); position:sticky; top:0; z-index:1; vertical-align:middle; }
.entry-table td,.saved-table td { padding:14px 12px; border-bottom:1px solid #e3ebf3; vertical-align:middle; font-size:14px; }
.entry-table tbody tr:nth-child(odd), .saved-table tbody tr:nth-child(odd) { background:#f7fbff; }
.entry-table tbody tr:nth-child(even), .saved-table tbody tr:nth-child(even) { background:#fff; }
.row-no { text-align:center; font-weight:800; color:var(--blue-deep); vertical-align:middle !important; }
.thumb { width:120px; height:60px; object-fit:contain; background:#fff; border-radius:10px; border:1px solid #d8e5f0; display:inline-block; }
.muted { color:var(--muted); }
.danger-link { color:var(--danger); text-decoration:none; font-weight:700; }
.secondary-link { color:var(--blue); text-decoration:none; font-weight:700; }
.empty { text-align:center; color:var(--muted); padding:32px !important; }
.alert { border-radius:16px; padding:14px 16px; margin-bottom:18px; font-weight:700; font-size:14px; }
.success { background:#ecfdf3; color:var(--success); border:1px solid #abefc6; }
.error { background:#fef3f2; color:#b42318; border:1px solid #fecdca; }

/* Product List Management layout */
.management-panel {
  padding: 26px;
}
.management-head {
  margin-bottom: 20px;
}
.management-actions-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
.management-card {
  border: 1px solid #d7e4f1;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 20px;
  box-shadow: 0 12px 28px rgba(15, 47, 109, .055);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 220px;
}
.card-label-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.card-step {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--blue), var(--blue-deep));
  color: #fff;
  font-weight: 800;
  letter-spacing: .04em;
}
.management-card h3 {
  margin: 0 0 4px;
  color: var(--blue-deep);
  font-size: 20px;
}
.management-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
  font-size: 14px;
}
.management-form {
  margin-top: auto;
}
.create-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .45fr);
  gap: 14px;
  align-items: end;
}
.management-create-btn {
  width: 100%;
  margin-top: 2px;
}
.management-card input,
.management-card select {
  min-height: 56px;
}

.fab-dock { position:fixed; left:50%; transform:translateX(-50%); bottom:18px; display:flex; align-items:center; gap:12px; z-index:99999; background:rgba(255,255,255,.98); border:1px solid #cfe0ef; box-shadow:0 18px 35px rgba(12,45,96,.18); padding:12px; border-radius:22px; backdrop-filter: blur(8px); }
.fab-btn { min-width:170px; text-align:center; border-radius:16px; padding:14px 18px; font-size:16px; font-weight:700; text-decoration:none; box-shadow:0 10px 22px rgba(12,45,96,.12); border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.fab-primary { color:#fff; background:linear-gradient(135deg, var(--blue), var(--blue-deep)); }
.fab-secondary { color:var(--blue-deep); background:#fff; border:1px solid #bfd1e3; }

.entry-table td:not(.row-no), .saved-table td { text-align:left; }
.saved-table td:first-child, .saved-table td:nth-child(5), .saved-table td:nth-child(7), .saved-table td:nth-child(8) { text-align:center; }
.entry-table textarea, .entry-table input[type="text"], .entry-table input[type="file"] {
  width:100%;
  min-height:54px;
  height:54px;
  border-radius:16px;
}
.entry-table textarea {
  resize:none;
  padding-top:14px;
  padding-bottom:14px;
}
.entry-table input[type="text"] {
  padding-top:14px;
  padding-bottom:14px;
}
.entry-table input[type="file"] {
  padding:10px 12px;
  display:flex;
  align-items:center;
  background:#fff;
}
.entry-table input[type="file"]::file-selector-button {
  margin-right:10px;
  border:1px solid #bfd1e3;
  background:#f7fbff;
  color:var(--blue-deep);
  border-radius:10px;
  padding:8px 12px;
  font-weight:700;
  cursor:pointer;
}
.entry-table .danger-btn.small { min-height:46px; }


@media (max-width: 1100px) {
  .management-actions-grid { grid-template-columns: 1fr; }
  .management-card { min-height: auto; }
  .create-fields { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .field-grid.two,.field-grid.three { grid-template-columns:1fr; }
  .topbar { flex-direction:column; align-items:flex-start; }
  .topbar h1 { font-size:26px; }
  
/* Product List Management layout */
.management-panel {
  padding: 26px;
}
.management-head {
  margin-bottom: 20px;
}
.management-actions-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
.management-card {
  border: 1px solid #d7e4f1;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 20px;
  box-shadow: 0 12px 28px rgba(15, 47, 109, .055);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 220px;
}
.card-label-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.card-step {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--blue), var(--blue-deep));
  color: #fff;
  font-weight: 800;
  letter-spacing: .04em;
}
.management-card h3 {
  margin: 0 0 4px;
  color: var(--blue-deep);
  font-size: 20px;
}
.management-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
  font-size: 14px;
}
.management-form {
  margin-top: auto;
}
.create-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .45fr);
  gap: 14px;
  align-items: end;
}
.management-create-btn {
  width: 100%;
  margin-top: 2px;
}
.management-card input,
.management-card select {
  min-height: 56px;
}

.fab-dock { left:16px; right:16px; transform:none; bottom:16px; width:auto; flex-direction:column; align-items:stretch; }
  .fab-btn { min-width:0; width:100%; }
}
  .topbar { flex-direction:column; align-items:flex-start; }
  .topbar h1 { font-size:26px; }
  
/* Product List Management layout */
.management-panel {
  padding: 26px;
}
.management-head {
  margin-bottom: 20px;
}
.management-actions-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
.management-card {
  border: 1px solid #d7e4f1;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 20px;
  box-shadow: 0 12px 28px rgba(15, 47, 109, .055);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 220px;
}
.card-label-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.card-step {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--blue), var(--blue-deep));
  color: #fff;
  font-weight: 800;
  letter-spacing: .04em;
}
.management-card h3 {
  margin: 0 0 4px;
  color: var(--blue-deep);
  font-size: 20px;
}
.management-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
  font-size: 14px;
}
.management-form {
  margin-top: auto;
}
.create-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .45fr);
  gap: 14px;
  align-items: end;
}
.management-create-btn {
  width: 100%;
  margin-top: 2px;
}
.management-card input,
.management-card select {
  min-height: 56px;
}

.fab-dock { position:fixed; left:50%; transform:translateX(-50%); bottom:18px; display:flex; align-items:center; gap:12px; z-index:99999; background:rgba(255,255,255,.98); border:1px solid #cfe0ef; box-shadow:0 18px 35px rgba(12,45,96,.18); padding:12px; border-radius:22px; backdrop-filter: blur(8px); }
  .fab-btn { min-width:170px; text-align:center; border-radius:16px; padding:14px 18px; font-size:16px; font-weight:700; text-decoration:none; box-shadow:0 10px 22px rgba(12,45,96,.12); border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
}

/* Final Product Entry Table alignment and uniform field sizing overrides */
.entry-table thead th,
.saved-table thead th {
  text-align: center !important;
  vertical-align: middle !important;
  justify-content: center !important;
  align-items: center !important;
}

.entry-table tbody td {
  vertical-align: middle !important;
  text-align: center !important;
}

.entry-table tbody td textarea,
.entry-table tbody td input[type="text"],
.entry-table tbody td input[type="file"] {
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
  line-height: 22px !important;
  margin: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}

.entry-table tbody td textarea {
  resize: none !important;
  overflow-y: auto !important;
  padding: 18px 14px !important;
}

.entry-table tbody td input[type="text"] {
  padding: 18px 14px !important;
}

.entry-table tbody td input[type="file"] {
  padding: 13px 12px !important;
  font-size: 14px !important;
}

.entry-table tbody td .danger-btn.small {
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 auto !important;
}

/* Edit product page structure image controls */
.edit-page-wrap { max-width: 1420px; margin: 0 auto; padding: 24px; }
.edit-structure-grid { align-items: start; }
.current-structure-box, .replace-structure-box {
  width: 100%;
  min-height: 180px;
  border: 1px solid #dbe6f1;
  border-radius: 20px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow: hidden;
}
.current-structure {
  width: 100%;
  max-width: 420px;
  max-height: 170px;
  object-fit: contain;
  display: block;
  background: #fff;
}
.replace-structure-box {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
}
.replace-structure-box input[type="file"] {
  height: 54px;
  min-height: 54px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #fff;
}
.replace-structure-box input[type="file"]::file-selector-button {
  margin-right: 10px;
  border: 1px solid #bfd1e3;
  background: #f7fbff;
  color: var(--blue-deep);
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}

/* Dynamic form type helpers */
.field-grid.one { grid-template-columns: 1fr; }
.entry-table thead th, .saved-table thead th { text-align: center !important; vertical-align: middle !important; }
.entry-table td, .saved-table td { vertical-align: middle !important; }

/* Dynamic form builder */
.column-builder-box {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #d8e5f3;
  border-radius: 18px;
  background: linear-gradient(180deg, #fbfdff 0%, #f4f8fd 100%);
  display: grid;
  gap: 12px;
}
.column-builder-box h4 {
  margin: 0;
  color: var(--blue-deep);
  font-size: 18px;
}
.column-builder-box p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.column-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.check-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #c9d8e9;
  background: #fff;
  border-radius: 14px;
  color: var(--blue-deep);
  font-weight: 700;
}
.check-card input[type="checkbox"] {
  width: 18px;
  height: 18px;
  box-shadow: none;
}
.check-card.locked {
  background: #eef5ff;
}
.entry-table thead th, .saved-table thead th { text-align: center !important; }

/* Final workflow management layout override */
.workflow-panel { padding: 26px !important; }
.workflow-grid {
  display: grid !important;
  grid-template-columns: minmax(320px, .9fr) minmax(320px, .9fr) minmax(320px, .9fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
}
.workflow-grid .management-card {
  min-height: 0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%) !important;
  border: 1px solid #cfe0ef !important;
  border-radius: 22px !important;
  padding: 20px !important;
  box-shadow: 0 12px 28px rgba(16,45,89,.06) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
.workflow-grid .form-template-card { grid-column: span 1 !important; }
.workflow-grid .management-form { margin-top: 0 !important; }
.workflow-grid .management-card h3 { font-size: 20px !important; }
.workflow-grid .management-card p { font-size: 14px !important; }
.compact-builder {
  padding: 16px !important;
  border-radius: 18px !important;
  background: #f7fbff !important;
  border: 1px solid #d5e5f4 !important;
}
.compact-builder h4 { margin: 0 0 6px !important; color: var(--blue-deep) !important; font-size: 18px !important; }
.compact-builder p { margin: 0 0 12px !important; }
.compact-check-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
}
.compact-check-grid .check-card {
  min-height: 54px !important;
  padding: 12px !important;
  border-radius: 14px !important;
}
.workflow-grid textarea { min-height: 76px !important; }
.workflow-grid .management-create-btn { margin-top: auto !important; width: 100% !important; }
.settings-columns { display: none !important; }
@media (max-width: 1280px) {
  .workflow-grid { grid-template-columns: 1fr !important; }
}


.delete-product-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.delete-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  padding: 24px;
}
.delete-modal.is-open { display: flex; }
.delete-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 22, 49, .48);
  backdrop-filter: blur(4px);
}
.delete-modal-card {
  position: relative;
  width: min(420px, 100%);
  background: #fff;
  border: 1px solid #d9e5f1;
  border-radius: 24px;
  padding: 28px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(6, 36, 86, .24);
}
.delete-modal-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #fff3f3;
  color: var(--danger);
  border: 1px solid #ffcaca;
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 800;
}
.delete-modal-card h3 {
  margin: 0 0 8px;
  color: var(--blue-deep);
  font-size: 22px;
}
.delete-modal-card p {
  margin: 0 0 20px;
  color: var(--muted);
  line-height: 1.45;
}
.delete-modal-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}


.delete-list-form {
  margin-top: 14px;
}
.delete-list-btn {
  width: 100%;
  min-height: 52px;
  border-radius: 16px;
  font-size: 15px;
}


.delete-form-type-box {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed #c9d8e8;
}
.delete-form-type-box h4 {
  margin: 0 0 6px;
  color: var(--blue-deep);
  font-size: 18px;
}
.delete-form-type-box p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.delete-form-type-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 12px;
  align-items: center;
}
.delete-form-type-btn {
  min-height: 52px;
  border-radius: 16px;
  font-size: 15px;
}
.small-note {
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f6f9fd;
  border: 1px solid #dbe6f1;
}
@media (max-width: 900px) {
  .delete-form-type-form { grid-template-columns: 1fr; }
}