:root {
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--sand);
  --sand: #FAF7F2;
  --surface: #FFFFFF;
  --surface-alt: #F4EFEA;
  --ink: #2C201A;
  --wood: #251812;
  --wood-accent: #3A261D;
  --muted: #6E5E53;
  --line: #E8DFD5;
  --clay: #B85A32;
  --clay-hover: #9C441E;
  --clay-soft: #F7EDE8;
  --ochre: #B58133;
  --ochre-soft: #FAF2E4;
  --success-bg: #E7F3E8;
  --success-ink: #246332;
  --warning-bg: #FDF2E3;
  --warning-ink: #8F560C;
  --error: #B83A28;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 6px rgba(37, 24, 18, 0.04);
  --shadow-md: 0 8px 24px rgba(37, 24, 18, 0.07);
  --shadow-lg: 0 16px 40px rgba(37, 24, 18, 0.12);
}

/* TOOLBAR & FILTERS */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.filter-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.search-input {
  min-width: 220px;
  padding: 9px 14px;
}
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  padding: 3px;
  gap: 2px;
}
.view-btn {
  border: 0;
  background: transparent;
  padding: 6px 12px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  box-shadow: none;
}
.view-btn.active {
  background: var(--surface);
  color: var(--wood);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

/* RECIBO DIGITAL */
.receipt-box {
  background: #FFFDF9;
  border: 2px dashed #D4C3B2;
  border-radius: var(--radius-md);
  padding: 24px;
  max-width: 420px;
  margin: 0 auto;
  color: #33231A;
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.receipt-header {
  text-align: center;
  border-bottom: 1px dashed #D4C3B2;
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.receipt-header h3 { font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; margin: 0 0 4px; font-size: 20px; }
.receipt-row { display: flex; justify-content: space-between; margin: 8px 0; font-size: 14px; }
.receipt-total { border-top: 1px dashed #D4C3B2; padding-top: 12px; margin-top: 12px; font-weight: bold; font-size: 16px; }


* { box-sizing: border-box; }
html, body { min-height: 100vh; background: var(--sand); }
body { margin: 0; color: var(--ink); font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; }
.fields > label { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.fields > label input, .fields > label select { width: 100%; box-sizing: border-box; }
.sale-item { margin-bottom: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.fields > fieldset { grid-column: 1 / -1; display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 8px; }
.fields > fieldset > label { display: flex; flex-direction: column; gap: 6px; }
button, input, select, textarea { font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; border: 0; transition: all 0.2s ease; }
a { color: inherit; }

/* ASIDE NAV */
aside {
  position: fixed;
  inset: 0 auto 0 0;
  width: 260px;
  padding: 32px 20px;
  background: var(--wood);
  color: #FFF5EA;
  display: flex;
  flex-direction: column;
  z-index: 20;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
}

.brand {
  text-decoration: none;
  display: block;
  padding: 0 8px 28px;
}

.signature {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.brand-small {
  display: block;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 10px;
  color: #D4B8A0;
  font-weight: 500;
}

nav { display: grid; gap: 4px; }
nav a {
  padding: 11px 14px;
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: #E2CEB9;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s ease;
}
nav a:hover {
  background: var(--wood-accent);
  color: #FFF5EA;
}
nav a.active {
  background: #F2DEC9;
  color: var(--wood);
  font-weight: 650;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.side-foot {
  margin-top: auto;
  color: #C2A890;
  font-size: 12px;
  line-height: 1.6;
  padding: 16px 8px 0;
}
.landscape {
  display: block;
  width: 100%;
  max-width: 150px;
  height: auto;
  border-radius: var(--radius-sm);
  margin: 0 auto 12px;
  opacity: 0.85;
}

/* WORKSPACE LAYOUT */
.mobile-masthead { display: none; }
.workspace { margin-left: 260px; min-height: 100vh; background: var(--sand); }

header {
  padding: 16px 40px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 10;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.header-greeting {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.greeting-title {
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--wood);
}
.greeting-title b {
  color: var(--clay);
  font-weight: 700;
}
.header-clock {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.header-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--ink);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  position: relative;
  box-shadow: none;
  padding: 0;
  transition: all 0.2s ease;
}
.header-icon-btn:hover {
  background: var(--clay-soft);
  color: var(--clay);
  transform: translateY(-1px);
}
.notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--error);
  color: white;
  font-size: 10px;
  font-weight: 700;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface);
}

.header-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
}
.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--clay);
  color: white;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(184, 90, 50, 0.3);
}

.profile { display: flex; gap: 8px; align-items: center; }
.profile label { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

/* DARK THEME */
body.dark-theme {
  --sand: #18110D;
  --surface: #241A14;
  --surface-alt: #2F2119;
  --ink: #F7EFE6;
  --wood: #120B08;
  --wood-accent: #261710;
  --muted: #C0B0A3;
  --line: #3E2B21;
  --clay-soft: #382319;
  --ochre-soft: #362917;
  --success-bg: #1B3822;
  --success-ink: #85E399;
  --warning-bg: #3D290F;
  --warning-ink: #F7C880;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
}
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme .greeting-title,
body.dark-theme .artisan-name,
body.dark-theme .card strong,
body.dark-theme label.field {
  color: #F7EFE6;
}
body.dark-theme .eyebrow {
  color: #E28359;
}
body.dark-theme .secondary {
  background: var(--surface-alt);
  color: #F7EFE6;
  border-color: var(--line);
}
body.dark-theme .secondary:hover {
  background: #3E2B21;
  color: #FFFFFF;
}
body.dark-theme .quick-action-btn {
  background: var(--surface);
  color: #F7EFE6;
  border-color: var(--line);
}
body.dark-theme .quick-action-btn:hover {
  background: var(--clay-soft);
  color: #E28359;
  border-color: #E28359;
}
body.dark-theme .note {
  background: #2D2316;
  border-left-color: #D49B45;
  color: #F7EFE6;
}
body.dark-theme .receipt-box {
  background: #1C1510;
  border-color: #4D372A;
  color: #F7EFE6;
}
body.dark-theme .receipt-header {
  border-bottom-color: #4D372A;
}
body.dark-theme .receipt-total {
  border-top-color: #4D372A;
}
body.dark-theme tr:hover td {
  background: var(--surface-alt);
}
body.dark-theme .card.accent {
  background: linear-gradient(135deg, #2D1D16 0%, #3B261D 100%);
  border-color: #4D3225;
}
body.dark-theme th { background: #2F2119; color: #B3A194; }

/* QUICK ACTIONS BAR */
.quick-actions-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.quick-action-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--wood);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}
.quick-action-btn:hover {
  background: var(--clay-soft);
  color: var(--clay);
  border-color: #E2BBA8;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

select, input {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
select:focus, input:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px var(--terracotta-glow, rgba(184, 90, 50, 0.15));
}

main {
  padding: 36px 40px;
  max-width: 1480px;
  margin: auto;
}

.page-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

h1 {
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 34px;
  font-weight: 700;
  margin: 4px 0 6px;
  color: var(--wood);
  letter-spacing: -0.5px;
}
h2 {
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--wood);
}
p { line-height: 1.6; color: var(--muted); margin-top: 0; }
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--clay);
}

/* BUTTONS */
.button, button {
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  background: var(--clay);
  color: white;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(184, 90, 50, 0.2);
}
button:hover, .button:hover {
  background: var(--clay-hover);
  box-shadow: 0 4px 12px rgba(184, 90, 50, 0.3);
  transform: translateY(-1px);
}
button:active { transform: translateY(0); }
.secondary {
  background: var(--surface-alt);
  color: #52382A;
  border: 1px solid var(--line);
  box-shadow: none;
}
.secondary:hover {
  background: #EBE2D7;
  color: var(--wood);
  box-shadow: var(--shadow-sm);
}
.actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* CARDS & PANELS */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}
.card, .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}
.card:hover { box-shadow: var(--shadow-md); }
.card small { color: var(--muted); font-size: 13px; font-weight: 500; }
.card strong {
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 32px;
  font-weight: 700;
  display: block;
  margin: 12px 0 6px;
  color: var(--wood);
}
.card.accent {
  background: linear-gradient(135deg, #FAF0E6 0%, #F5E4D4 100%);
  border-color: #E2C7B0;
}
.card.accent strong { color: var(--clay); }

.grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
.panel { margin-bottom: 24px; }

/* TABLES */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }
table {
  border-collapse: collapse;
  width: 100%;
  text-align: left;
  white-space: nowrap;
  font-size: 14px;
}
th {
  font-weight: 600;
  color: var(--muted);
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-alt);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
td {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
tr:last-child td { border-bottom: 0; }
tr:hover td { background: var(--sand); }
td small { display: block; color: var(--muted); margin-top: 4px; font-size: 12px; }

/* PILLS & BADGES */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--success-bg);
  color: var(--success-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.pill.amber { background: var(--warning-bg); color: var(--warning-ink); }
.note {
  background: var(--ochre-soft);
  border-left: 4px solid var(--ochre);
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.6;
  margin: 20px 0;
  color: #5C4119;
}

/* FLOW & PROGRESS */
.flow { display: grid; gap: 12px; }
.flow a {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: all 0.2s ease;
}
.flow a:hover {
  background: var(--clay-soft);
  border-color: #E2BBA8;
  transform: translateX(3px);
}
.flow b {
  display: grid;
  place-items: center;
  background: var(--clay-soft);
  color: var(--clay);
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  font-weight: 700;
}

.empty { padding: 36px; text-align: center; color: var(--muted); font-style: italic; }
.bar-row { margin: 18px 0; }
.bar-label { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 8px; font-weight: 500; }
.bar { height: 10px; border-radius: 10px; background: var(--surface-alt); overflow: hidden; }
.bar i { display: block; background: var(--clay); height: 100%; border-radius: 10px; transition: width 0.4s ease; }

/* FOOTER & DIALOGS */
footer {
  padding: 24px 40px 16px;
  color: #A39385;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.75;
}

dialog {
  border: 1px solid var(--line);
  border-radius: 20px;
  max-width: 740px;
  width: calc(100% - 32px);
  padding: 40px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
dialog::backdrop { background: rgba(37, 24, 18, 0.65); backdrop-filter: blur(6px); }
form { display: grid; gap: 24px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; }
label.field { display: grid; gap: 8px; font-size: 14px; font-weight: 600; color: var(--wood); }
.full { grid-column: 1 / -1; }
.form-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.close { background: var(--surface-alt); color: var(--ink); padding: 8px 14px; border-radius: 8px; font-weight: 600; }
.close:hover { background: var(--line); }
.error { color: var(--error); font-size: 14px; font-weight: 500; }

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] { -moz-appearance: textfield; }

.money-input {
  display: flex;
  align-items: center;
  border: 1px solid #D8CBBF;
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.money-input > span {
  padding: 12px 14px;
  color: var(--clay);
  font-weight: 700;
  font-size: 14px;
  background: var(--clay-soft);
  border-right: 1px solid #D8CBBF;
  min-width: 46px;
  text-align: center;
}
.money-input input {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
}
.money-input:focus-within {
  border-color: var(--clay);
  box-shadow: 0 0 0 3px var(--terracotta-glow, rgba(184, 90, 50, 0.15));
}


#toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  max-width: calc(100% - 48px);
  background: var(--wood);
  color: #FFF5EA;
  padding: 16px 24px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: none;
  z-index: 50;
  font-weight: 500;
}

/* ARTISANS & MODELS CARDS GRID */
.artisan-grid, .model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.artisan-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  cursor: pointer;
}
.artisan-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: #D4B69E;
}
.artisan-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.artisan-card-thumb, .artisan-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  background: var(--clay-soft);
  color: var(--clay);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  flex-shrink: 0;
  border: 3px solid var(--surface-alt);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease;
}
.artisan-card:hover .artisan-card-thumb {
  transform: scale(1.04);
}
.artisan-card-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.artisan-name {
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--wood);
  margin: 0;
  line-height: 1.3;
}
.artisan-specialty {
  font-size: 13px;
  color: var(--clay);
  font-weight: 600;
}
.artisan-meta {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.artisan-bio {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.artisan-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  gap: 12px;
}
.artisan-card-footer .pill {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

/* ARTISAN SHOWCASE MODAL / FICHA DO MESTRE ARTESÃO */
.artisan-showcase-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.artisan-showcase-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 600px) {
  .artisan-showcase-header {
    flex-direction: column;
    text-align: center;
  }
}
.artisan-showcase-photo-wrap {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--clay-soft);
  color: var(--clay);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  font-weight: 700;
  border: 4px solid var(--surface-alt);
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
}
.artisan-showcase-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.artisan-showcase-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.artisan-showcase-name {
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--wood);
  margin: 0;
}
body.dark-theme .artisan-showcase-name {
  color: #F7EFE6;
}
.artisan-showcase-badge {
  font-size: 14px;
  color: var(--clay);
  font-weight: 600;
}
.artisan-showcase-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}
.artisan-showcase-section-title {
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--wood);
  margin: 16px 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.dark-theme .artisan-showcase-section-title {
  color: #F7EFE6;
}
.artisan-models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.artisan-model-card {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.artisan-model-photo {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--sand);
}
.artisan-model-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--wood);
}
body.dark-theme .artisan-model-name {
  color: #F7EFE6;
}
.artisan-model-sub {
  font-size: 12px;
  color: var(--muted);
}
.artisan-model-price {
  font-weight: 700;
  color: var(--clay);
  font-size: 14px;
  margin-top: auto;
}


.model-photo {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--sand);
  margin-bottom: 14px;
}

/* TABLE THUMBNAIL PHOTO STYLES */
.table-photo-wrap {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}
.table-photo-wrap:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
  border-color: var(--clay);
}
.table-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.table-photo-zoom-hint {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.table-photo-wrap:hover .table-photo-zoom-hint {
  opacity: 1;
}

/* COMPACT TABLE ITEM WITH THUMBNAIL */
.table-item-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.table-mini-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--muted);
  flex-shrink: 0;
  overflow: hidden;
}
.table-mini-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.table-operator-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.table-operator-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--clay-soft);
  color: var(--clay);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  border: 1px solid var(--line);
}

/* FORM MODEL PREVIEW CARD */
.model-preview-box {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-top: 4px;
}
.model-preview-thumb {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--sand);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  overflow: hidden;
}
.model-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.model-preview-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.model-preview-title {
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--wood);
}
body.dark-theme .model-preview-title {
  color: #F7EFE6;
}
.model-preview-meta {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}



/* MODEL CARD GRID VIEW */
.model-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 20px;
}
.model-card-img-container {
  width: 100%;
  height: 210px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  cursor: pointer;
  position: relative;
}
.model-card-img-container:hover .model-card-img {
  transform: scale(1.05);
}
.model-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.no-photo-box {
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* PHOTO LIGHTBOX MODAL & SHOWCASE CARD */
.photo-lightbox-modal {
  text-align: center;
  max-width: 90vw !important;
  width: auto !important;
}
.photo-lightbox-img {
  max-width: 82vw;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  display: block;
  margin: 16px auto;
  background: rgba(0, 0, 0, 0.2);
}
body.dark-theme .photo-lightbox-img {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
}

/* SHOWCASE MODAL / FICHA DA PEÇA */
.showcase-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 16px;
  align-items: start;
}
@media (max-width: 700px) {
  .showcase-container {
    grid-template-columns: 1fr;
  }
}
.showcase-photo-frame {
  width: 100%;
  max-height: 380px;
  min-height: 220px;
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.showcase-img {
  max-width: 100%;
  max-height: 380px;
  object-fit: contain;
  display: block;
}
.showcase-no-photo {
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
  font-style: italic;
  font-size: 14px;
  width: 100%;
}
.showcase-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.showcase-title {
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--wood);
  margin: 0 0 2px;
}
body.dark-theme .showcase-title {
  color: #F7EFE6;
}
.showcase-variation {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}
.showcase-price-tag {
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--clay);
  margin: 4px 0;
}
.showcase-artisan-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.showcase-artisan-thumb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--clay-soft);
  color: var(--clay);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.showcase-artisan-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.showcase-artisan-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--wood);
}
body.dark-theme .showcase-artisan-name {
  color: #F7EFE6;
}
.showcase-artisan-sub {
  font-size: 12px;
  color: var(--muted);
}
.showcase-stock-box {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13px;
}
.showcase-stock-title {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--wood);
}
body.dark-theme .showcase-stock-title {
  color: #F7EFE6;
}
.showcase-stock-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* RESPONSIVE DESIGN */
@media (max-width: 1050px) {
  aside { width: 220px; padding: 24px 16px; }
  .workspace { margin-left: 220px; }
  main { padding: 24px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  aside { display: none; }
  .workspace { margin-left: 0; }
  .mobile-masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--wood);
    padding: 16px 20px;
  }
  .mobile-masthead a { display: block; max-width: 220px; flex: 1; }
  .mobile-masthead .signature { width: 100%; }
  #menu-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 14px;
  }
  header { padding: 14px 20px; flex-direction: column; gap: 12px; align-items: stretch; }
  .profile { justify-content: space-between; width: 100%; }
  main { padding: 20px; }
  h1 { font-size: 28px; }
  .page-top { flex-direction: column; align-items: stretch; }
  .cards { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
  .full { grid-column: auto; }
}

#menu-dialog {
  position: fixed;
  inset: 0 auto 0 0;
  margin: 0;
  width: min(88vw, 320px);
  max-width: 320px;
  height: 100dvh;
  border: 0;
  border-radius: 0;
  background: var(--wood);
  color: #FFF5EA;
  padding: 24px;
  overflow-y: auto;
}
#menu-dialog nav { display: grid; gap: 6px; }
#menu-dialog nav a { padding: 12px 16px; font-size: 15px; }

.user-intro { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.user-locations { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.photo-preview { display: block; width: 160px; height: 130px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sand); }
.photo-preview[hidden] { display: none; }

.money-input { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.money-input > span { padding: 10px 0 10px 14px; color: var(--muted); font-weight: 600; }
.money-input input { width: 100%; border: 0; border-radius: 0; background: transparent; }
/* Login shares the workshop palette and signature. */
body.login-screen {display:block;background:radial-gradient(circle at 15% 20%,#d9bc95 0,transparent 38%),#eee6d9;min-height:100dvh;}
.login-screen aside,.login-screen header,.login-screen .mobile-masthead,.login-screen footer {display:none;}
.login-screen .workspace {margin:0;width:100%;min-height:100dvh;}
.login-screen main {display:grid;place-items:center;min-height:100dvh;padding:28px 18px;box-sizing:border-box;}
.login-card {width:min(100%,430px);background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:32px;box-shadow:0 24px 70px #3c291f1a;box-sizing:border-box;}
.login-brand {background:#3c291f;border-radius:16px;padding:22px;margin-bottom:26px;text-align:center;}
.login-brand img {width:min(100%,270px);height:auto;display:block;margin:auto;}
.login-intro,.login-note {text-align:center;}
.login-intro p {margin:12px auto 0;max-width:330px;}
.login-card .eyebrow {display:block;}
.login-card .field {text-align:left;}
.login-card .auth-link {display:block;width:fit-content;margin:18px auto 0;color:var(--clay);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px;line-height:1.6;}
.login-card .forgot-link {margin:0 auto;padding:4px 8px;}
.login-card .auth-link:focus-visible {outline:2px solid var(--clay);outline-offset:5px;border-radius:3px;}
.login-card .login-note {margin:20px 0 0;font-size:13px;}
.login-card .auth-status {text-align:center;background:var(--bg);border-radius:10px;padding:12px;overflow-wrap:anywhere;}
.login-card .auth-status:empty {display:none;}
.login-card form[hidden] {display:none;}
.login-card [type=submit] {width:100%;min-height:48px;}
.login-card h1 {font-size:29px;margin:10px 0;}
.login-card p {line-height:1.6;color:var(--muted);font-size:14px;}
.login-card form {display:grid;gap:16px;margin-top:22px;}
.login-card .field {display:flex;flex-direction:column;gap:7px;}
.login-card input {width:100%;box-sizing:border-box;min-height:48px;}
.password-field {display:flex;position:relative;}
.password-field input {padding-right:82px;}
.password-field button {position:absolute;right:5px;top:6px;background:transparent;color:var(--clay);padding:8px;border:0;font-size:12px;}
.login-card #login-submit,.login-card #demo-entry {width:100%;min-height:46px;}
.login-card small {display:block;text-align:center;color:var(--muted);font-size:11px;margin-top:22px;}
.login-card .error:empty {display:none;}
@media(max-width:480px){.login-card{padding:22px;border-radius:18px;}.login-screen main{padding:18px 12px;}.login-card h1{font-size:25px;}}
.signed-user {display:flex;flex-direction:column;gap:3px;}
.signed-user[hidden],.profile[hidden] {display:none;}
.signed-user strong {font-size:14px;font-weight:600;color:var(--text);}
.signed-user small {font-size:11px;color:var(--muted);font-weight:400;}
@media(max-width:480px){.signed-user strong{font-size:12px;}.signed-user small{font-size:10px;}}

/* Mobile workspace: controls fit the screen; records become readable cards. */
.workspace, main, .panel, .cell-value {min-width:0;}
@media(max-width:900px){
 .mobile-masthead{position:sticky;top:0;z-index:20;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));}
 .mobile-masthead a{max-width:180px;min-width:0;}
 .mobile-masthead .signature{height:auto;display:block;}
 header{position:static;padding:14px 16px;gap:12px;}
 .header-left{justify-content:space-between;gap:8px;min-width:0;}
 .header-right{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;}
 .header-right>button{min-width:0;min-height:44px;padding:8px;font-size:13px;}
 .header-icon-btn{width:100%;border-radius:10px;}
 .header-user{grid-column:1/-1;min-width:0;border:0;padding:0;gap:8px;}
 .user-avatar{flex-shrink:0;}
 .profile{flex:1;min-width:0;gap:8px;}
 .profile select{min-width:0;width:100%;flex:1;}
 #connection{font-size:11px;display:flex;flex-wrap:wrap;gap:4px;}
 #connection .mini{font-size:11px;}
 main{padding:20px 16px;}
 .page-top{gap:14px;margin-bottom:20px;}
 .page-top>.actions{width:100%;}
 .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
 .card{padding:16px;min-width:0;}
 .card strong{font-size:26px;overflow-wrap:anywhere;}
 .card small{font-size:12px;}
 .quick-actions-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
 .quick-action-btn{min-height:48px;padding:10px;font-size:12px;white-space:normal;justify-content:center;}
 .artisan-grid,.model-card-grid,.model-grid{grid-template-columns:minmax(0,1fr);gap:16px;}
 .user-intro{flex-direction:column;align-items:stretch;}
 .user-locations{grid-template-columns:1fr;}
 dialog{box-sizing:border-box;width:calc(100% - 24px);max-width:740px;padding:20px;max-height:calc(100dvh - 24px);overflow-y:auto;}
 dialog .form-head{align-items:flex-start;gap:12px;}
 dialog h2{font-size:21px;overflow-wrap:anywhere;}
 dialog input,dialog select{min-width:0;width:100%;box-sizing:border-box;font-size:16px;}
 dialog input[type=checkbox]{width:auto;}
 .fields{gap:16px;}
 .form-head .close{flex-shrink:0;}
 #menu-dialog{width:min(88vw,320px);max-height:100dvh;padding:24px 18px;padding-bottom:max(24px,env(safe-area-inset-bottom));}
 #menu-dialog .form-head h2{color:#fff5ea;}
 #menu-dialog nav a{color:#fff5ea;min-height:44px;box-sizing:border-box;}
 footer{padding:20px 16px max(20px,env(safe-area-inset-bottom));}
 #toast{bottom:max(16px,env(safe-area-inset-bottom));left:16px;right:16px;max-width:none;padding:14px 16px;}
}
@media(max-width:600px){
 .table-wrap{overflow:visible;border-radius:0;}
 table,tbody{display:block;width:100%;white-space:normal;}
 thead{display:none;}
 tbody{display:grid;gap:14px;}
 tr{display:block;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;}
 td{display:grid;grid-template-columns:minmax(88px,32%) minmax(0,1fr);gap:12px;padding:12px;font-size:13px;align-items:start;white-space:normal;}
 td::before{content:attr(data-label);font-size:10px;font-weight:600;text-transform:uppercase;color:var(--muted);line-height:1.5;overflow-wrap:anywhere;}
 td .cell-value{overflow-wrap:anywhere;max-width:100%;}
 td[colspan]{display:block;}
 td[colspan]::before{display:none;}
 td .actions{gap:6px;}
 td button{padding:8px 10px;min-height:40px;font-size:12px;white-space:normal;}
 .view-toggle{display:flex;min-width:0;}
 .view-toggle button{min-width:0;padding:10px;}
 .note{padding:14px;font-size:13px;}
 .greeting-title{font-size:14px;}
 .header-clock{font-size:11px;}
 h1{font-size:26px;}
 h2{font-size:20px;}
 .bar-label{gap:8px;font-size:12px;}
}
@media(max-width:350px){.cards{grid-template-columns:1fr;}.mobile-masthead a{max-width:150px;}}
@media(display-mode:standalone){#install-app{display:none;}.mobile-masthead{padding-top:max(12px,env(safe-area-inset-top));}}