/* ═══════════════════════════════════════════════════════════
   FLORICENTE — Design System v2.0
   Aesthetic: Luxury Business / Modern Financial Dashboard
   Fonts: DM Serif Display + DM Sans
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --brand:        #1a1a2e;
  --brand-2:      #16213e;
  --accent:       #e8b84b;
  --accent-light: #f5d98a;
  --accent-soft:  #fdf6e3;

  --surface:      #ffffff;
  --surface-2:    #f8f8fb;
  --surface-3:    #f1f1f6;
  --border:       #e8e8f0;
  --border-2:     #d8d8e8;

  --text:         #0f0f1a;
  --text-2:       #4a4a6a;
  --text-3:       #9090b0;

  --green:        #0d9e6e;
  --green-bg:     #e8f8f3;
  --red:          #e0344a;
  --red-bg:       #fde8eb;
  --blue:         #2563eb;
  --blue-bg:      #eff4ff;
  --orange:       #d97706;
  --orange-bg:    #fef3e2;

  --shadow-sm:    0 1px 3px rgba(15,15,26,.06), 0 1px 2px rgba(15,15,26,.04);
  --shadow-md:    0 4px 16px rgba(15,15,26,.08), 0 2px 6px rgba(15,15,26,.04);
  --shadow-lg:    0 12px 40px rgba(15,15,26,.12), 0 4px 12px rgba(15,15,26,.06);
  --shadow-accent:0 8px 24px rgba(232,184,75,.28);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --ease: cubic-bezier(.22,.68,0,1.2);
  --fast: 180ms;
  --med:  280ms;
}

/* ── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--surface-2);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
img { display: block; max-width: 100%; }

/* ── Page Shell ─────────────────────────────────────────── */
.page {
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--surface);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* ── Header ─────────────────────────────────────────────── */
.honey-top {
  background: var(--brand);
  min-height: 118px;
  padding: 28px 22px 22px;
  position: relative;
  overflow: hidden;
}

.honey-top::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light), var(--accent));
}

.honey-top::after {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,184,75,.1) 0%, transparent 70%);
  pointer-events: none;
}

.honey-top > * { position: relative; z-index: 1; }

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.status-row > span {
  font-family: 'DM Serif Display', serif;
  font-size: 15px;
  color: var(--accent);
  letter-spacing: .02em;
}

.top-user {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  padding: 6px 12px 6px 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  backdrop-filter: blur(8px);
  white-space: nowrap;
}

.avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
  font-size: 13px;
}

.title {
  font-family: 'DM Serif Display', serif;
  font-size: 26px;
  font-weight: 400;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.subtitle {
  margin: 6px 0 0;
  color: rgba(255,255,255,.5);
  font-size: 13px;
}

/* ── Logo Box (login) ───────────────────────────────────── */
.logo-box {
  text-align: center;
  padding: 48px 20px 24px;
  background: var(--brand);
  position: relative;
  overflow: hidden;
}

.logo-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light), var(--accent));
}

.logo-box::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,184,75,.08) 0%, transparent 70%);
  pointer-events: none;
}

.logo-mark {
  font-size: 44px;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.brand {
  font-family: 'DM Serif Display', serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -.04em;
  color: #fff;
  margin: 10px 0 0;
  position: relative;
  z-index: 1;
}

.brand small {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--accent);
  text-transform: uppercase;
  margin-top: 4px;
}

.helper {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.5;
  margin: 6px 0 0;
}

.logo-box .helper {
  color: rgba(255,255,255,.4);
  position: relative;
  z-index: 1;
  padding-bottom: 4px;
}

/* ── Content ────────────────────────────────────────────── */
.content { padding: 20px 18px 96px; }

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  margin-bottom: 12px;
  transition: box-shadow var(--fast) ease;
}

.card:hover { box-shadow: var(--shadow-md); }
.card.compact { padding: 12px; }

.card-title {
  font-family: 'DM Serif Display', serif;
  font-size: 17px;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Metric Cards ───────────────────────────────────────── */
.metric {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 90px;
  gap: 8px;
}

.metric label {
  display: block;
  color: var(--text-3);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.metric strong {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.03em;
  margin-top: auto;
}

.metric strong.danger  { color: var(--red); }
.metric strong.neutral { color: var(--text-2); }
.metric small {
  display: block;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
  margin-top: 2px;
}
.metric .orange { color: var(--orange); }
.metric .blue   { color: var(--blue); }

.metric-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  font-size: 20px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── Grids ──────────────────────────────────────────────── */
.grid-2        { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-3        { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.business-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── Inputs ─────────────────────────────────────────────── */
.input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 13px 16px;
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  margin: 6px 0;
  outline: none;
  transition: border-color var(--fast) ease, box-shadow var(--fast) ease;
  -webkit-appearance: none;
  appearance: none;
}

.input::placeholder { color: var(--text-3); }

.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232,184,75,.18);
}

select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239090b0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--r-md);
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 20px;
  min-height: 50px;
  cursor: pointer;
  letter-spacing: .01em;
  transition: background var(--fast) ease, transform var(--fast) var(--ease), box-shadow var(--fast) ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover   { background: #0d0d1f; box-shadow: var(--shadow-md); }
.btn:active  { transform: scale(.97); }
.btn.full    { width: 100%; }

.btn.secondary {
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.btn.secondary:hover { background: var(--surface-2); border-color: var(--border-2); box-shadow: var(--shadow-sm); }

.btn.danger {
  background: var(--red);
  color: #fff;
  box-shadow: 0 6px 20px rgba(224,52,74,.22);
}
.btn.danger:hover { background: #c4223a; }

.btn.small { min-height: 36px; padding: 8px 14px; border-radius: var(--r-sm); font-size: 13px; }

/* Accent primary (save/submit) */
#loginForm .btn,
#productForm .btn:not(.secondary):not(.danger),
#expenseForm .btn:not(.secondary),
#noteForm .btn:not(.secondary),
.btn.primary {
  background: var(--accent);
  color: var(--brand);
  font-weight: 700;
  box-shadow: var(--shadow-accent);
}
#loginForm .btn:hover,
#productForm .btn:not(.secondary):not(.danger):hover,
#expenseForm .btn:not(.secondary):hover,
#noteForm .btn:not(.secondary):hover,
.btn.primary:hover {
  background: var(--accent-light);
  box-shadow: 0 10px 28px rgba(232,184,75,.35);
}

/* ── Role Cards ─────────────────────────────────────────── */
.role-card {
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--fast) ease, box-shadow var(--fast) ease, background var(--fast) ease;
}
.role-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.role-card.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232,184,75,.18);
}
.role-icon  { font-size: 32px; line-height: 1; }
.role-title { font-size: 17px; font-weight: 700; margin: 10px 0 4px; color: var(--text); }
.role-card p{ margin: 0; color: var(--text-3); font-size: 12px; }

/* ── Install Card ───────────────────────────────────────── */
.install-card {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border: none;
  border-radius: var(--r-lg);
  padding: 18px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: center;
  box-shadow: var(--shadow-md);
  color: #fff;
}
.install-card .app-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: var(--accent);
  display: grid; place-items: center;
  font-size: 26px;
}
.install-card b       { color: #fff; font-size: 15px; }
.install-card .row-sub{ color: rgba(255,255,255,.6); font-size: 12px; margin-top: 2px; }
.install-card .btn    { grid-column: 1/-1; background: var(--accent); color: var(--brand); font-weight: 700; }

/* ── Bottom Nav ─────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 100%; max-width: 430px;
  background: rgba(255,255,255,.96);
  border-top: 1px solid var(--border);
  display: grid;
  gap: 2px;
  padding: 10px 10px 14px;
  z-index: 30;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 -4px 20px rgba(15,15,26,.06);
}
.nav-4 { grid-template-columns: repeat(4,1fr); }
.nav-3 { grid-template-columns: repeat(3,1fr); }

.nav-item {
  border-radius: var(--r-sm);
  padding: 8px 4px;
  text-align: center;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  transition: color var(--fast) ease, background var(--fast) ease;
  cursor: pointer;
}
.nav-item span {
  display: block;
  font-size: 20px;
  margin-bottom: 3px;
  transition: transform var(--fast) var(--ease);
}
.nav-item:hover span { transform: translateY(-2px); }
.nav-item.active {
  color: var(--brand);
  background: var(--accent-soft);
}

/* ── Section Titles ─────────────────────────────────────── */
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 12px;
}
.section-title h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--text);
}

/* ── Lists & Rows ───────────────────────────────────────── */
.list { display: flex; flex-direction: column; gap: 8px; }

.product-row,
.rank-row,
.staff-row,
.expense-row,
.code-row,
.user-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  transition: box-shadow var(--fast) ease, border-color var(--fast) ease;
  color: inherit;
  text-align: left;
}

.product-row:hover,
.rank-row:hover,
.staff-row:hover,
.expense-row:hover,
.code-row:hover,
.user-row:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-2);
}

.thumb {
  width: 48px; height: 48px; min-width: 48px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  display: grid; place-items: center;
  font-size: 24px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.row-main  { flex: 1; min-width: 0; }
.row-title { font-weight: 600; color: var(--text); font-size: 14px; }
.row-sub   { font-size: 12px; color: var(--text-3); margin-top: 3px; line-height: 1.4; }

/* ── Pills ──────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--surface-3);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.pill.green   { background: var(--green-bg);  color: var(--green);  border-color: transparent; }
.pill.red     { background: var(--red-bg);    color: var(--red);    border-color: transparent; }
.pill.blue    { background: var(--blue-bg);   color: var(--blue);   border-color: transparent; }
.pill.warning { background: var(--orange-bg); color: var(--orange); border-color: transparent; }
.pill.success { background: var(--green-bg);  color: var(--green);  border-color: transparent; }

/* ── Bar ────────────────────────────────────────────────── */
.bar { height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-light)); border-radius: 999px; }

/* ── Rank Number ────────────────────────────────────────── */
.rank-number {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}

/* ── Qty Control ────────────────────────────────────────── */
.qty { display: flex; align-items: center; gap: 10px; justify-content: center; }
.qty button {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: border-color var(--fast) ease, background var(--fast) ease;
  font-family: inherit;
}
.qty button:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ── Product Grid ───────────────────────────────────────── */
.product-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.product-card {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  transition: box-shadow var(--fast) ease;
}
.product-card:hover { box-shadow: var(--shadow-md); }
.product-card .thumb { margin: 0 auto 10px; width: 64px; height: 64px; font-size: 34px; }
.product-card .qty { margin-top: 10px; }

/* ── Segmented ──────────────────────────────────────────── */
.segmented {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: 0 0 16px;
  padding: 3px;
  gap: 2px;
}
.segmented a,
.segmented button {
  border: none;
  background: transparent;
  padding: 10px 8px;
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  color: var(--text-2);
  border-radius: calc(var(--r-md) - 2px);
  transition: color var(--fast), background var(--fast);
  cursor: pointer;
}
.segmented .active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.segmented select {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  color: var(--text-2);
  -webkit-appearance: none;
  appearance: none;
}

/* ── Tabs ───────────────────────────────────────────────── */
.tabs { display: flex; gap: 6px; margin: 10px 0 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button {
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--surface);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--fast), color var(--fast), background var(--fast);
}
.tabs .active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ── Form Sheet ─────────────────────────────────────────── */
.form-sheet {
  position: fixed;
  left: 50%; bottom: 0;
  transform: translateX(-50%) translateY(110%);
  width: 100%; max-width: 430px;
  background: var(--surface);
  border-top-left-radius: var(--r-xl);
  border-top-right-radius: var(--r-xl);
  box-shadow: 0 -8px 40px rgba(15,15,26,.16);
  padding: 6px 18px 28px;
  z-index: 50;
  transition: transform var(--med) var(--ease);
}
.form-sheet::before {
  content: '';
  display: block;
  width: 40px; height: 4px;
  background: var(--border-2);
  border-radius: 999px;
  margin: 10px auto 20px;
}
.form-sheet.open { transform: translateX(-50%) translateY(0); display: block; }
.form-sheet h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 16px;
}
.wide-sheet { max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ── Overlay ────────────────────────────────────────────── */
.overlay { display: none; position: fixed; inset: 0; background: rgba(15,15,26,.5); z-index: 45; backdrop-filter: blur(2px); }
.overlay.open { display: block; }

/* ── Notices ────────────────────────────────────────────── */
.notice {
  border-radius: var(--r-md);
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 13px;
}
.notice.danger  { background: var(--red-bg);   border-color: rgba(224,52,74,.2);  color: #9b1a29; }
.notice.success { background: var(--green-bg); border-color: rgba(13,158,110,.2); color: #065f46; }
.notice.dark    { background: var(--brand);    border-color: var(--brand);        color: #fff; }
.notice.dark p,
.notice.dark small { color: rgba(255,255,255,.7); }

/* ── Quick Actions ──────────────────────────────────────── */
.quick-actions { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 14px 0 20px; }
.quick-actions .btn { min-height: 44px; font-size: 13px; }

/* ── Health Card ────────────────────────────────────────── */
.health-card {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border: none;
  border-radius: var(--r-xl);
  padding: 20px;
  color: #fff;
  box-shadow: var(--shadow-md);
}
.health-score {
  font-family: 'DM Serif Display', serif;
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -.06em;
  color: var(--accent);
}

/* ── Money Flow ─────────────────────────────────────────── */
.money-flow { display: grid; gap: 6px; }
.money-flow .flow-line {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
  border-bottom: 1px dashed var(--border);
  padding: 10px 0;
  font-size: 14px;
}
.money-flow .flow-line.final { font-size: 16px; font-weight: 700; border-bottom: none; padding-top: 14px; color: var(--text); }
.flow-bar { height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin-top: 4px; }
.flow-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

/* ── Loss Line ──────────────────────────────────────────── */
.loss-line { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; margin-top: 10px; }
.loss-line span { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--surface-3); display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); }
.loss-line img { width: 100%; height: 100%; object-fit: cover; }
.loss-line small { color: var(--text-3); font-size: 12px; }

/* ── Form Blocks ────────────────────────────────────────── */
.form-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px; margin: 12px 0;
}
.form-block.light { background: var(--surface-2); border-radius: var(--r-lg); padding: 14px; border: 1px solid var(--border); }
.form-block h3 { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0 0 12px; }

/* ── Checkbox Line ──────────────────────────────────────── */
.checkbox-line {
  display: flex; gap: 12px; align-items: center;
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  margin: 8px 0;
  font-weight: 500; font-size: 14px;
  cursor: pointer;
  transition: border-color var(--fast);
}
.checkbox-line:hover { border-color: var(--accent); }
.checkbox-line input { width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; }

/* ── Calc Box ───────────────────────────────────────────── */
.calc-box {
  border: 1.5px dashed var(--border-2);
  background: var(--surface-2);
  border-radius: var(--r-lg);
  padding: 16px; margin: 14px 0;
}
.calc-box p { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0; color: var(--text-2); font-size: 13px; }
.calc-box strong { color: var(--text); font-weight: 700; }

/* ── File Picker ────────────────────────────────────────── */
.file-picker {
  border: 2px dashed var(--border-2);
  background: var(--surface-2);
  border-radius: var(--r-lg);
  padding: 16px; margin: 10px 0;
  text-align: center; cursor: pointer;
  transition: border-color var(--fast), background var(--fast);
}
.file-picker:hover { border-color: var(--accent); background: var(--accent-soft); }
.file-picker input { display: none; }
.file-picker b { font-size: 14px; color: var(--text); }
.file-picker .row-sub { font-size: 12px; color: var(--text-3); margin-top: 4px; }

/* ── Image Preview ──────────────────────────────────────── */
.image-preview {
  width: 88px; height: 88px;
  margin: 0 auto 12px;
  border-radius: var(--r-lg);
  background: var(--surface-3);
  display: grid; place-items: center;
  font-size: 36px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.image-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ── Select Label ───────────────────────────────────────── */
.select-label { font-weight: 600; font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; margin-top: 12px; display: block; }

/* ── Actions Row ────────────────────────────────────────── */
.actions-row { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ── Stall Choice ───────────────────────────────────────── */
.stall-choice-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 10px; margin-top: 10px; }
.stall-option {
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px; background: var(--surface);
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  text-align: center; cursor: pointer; min-height: 150px;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.stall-option input { accent-color: var(--brand); transform: scale(1.15); }
.stall-option:has(input:checked) { outline: 2px solid var(--brand); border-color: var(--brand); background: var(--accent-soft); }
.stall-photo-box { width: 100%; height: 86px; border-radius: var(--r-md); background: var(--surface-3); display: grid; place-items: center; overflow: hidden; font-size: 32px; border: 1px solid var(--border); }
.stall-photo-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stall-option b { font-size: 13px; font-weight: 700; color: var(--text); }
.stall-option small { font-size: 11px; color: var(--text-3); }

/* ── Tags ───────────────────────────────────────────────── */
.tag-list { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px; background: var(--surface); font-weight: 600; font-size: 11px; color: var(--text-2); }

/* ── Bee Sprite ─────────────────────────────────────────── */
.bee-sprite {
  width: 200px; height: 200px; margin: auto;
  background-image: url('../img/bee-sprite-transparent.png');
  background-repeat: no-repeat;
  background-size: 800px 600px;
  background-position: 0 0;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.15));
}

/* ── Intro Overlay ──────────────────────────────────────── */
.intro-overlay {
  position: fixed; inset: 0;
  background: var(--brand);
  z-index: 2000;
  display: grid; place-items: center;
  transition: opacity var(--med) ease, transform var(--med) ease;
}
.intro-overlay.out { opacity: 0; transform: scale(1.02); pointer-events: none; }
.intro-card { text-align: center; padding: 24px; }
.intro-card h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 36px; font-weight: 400;
  margin: 12px 0 6px;
  letter-spacing: -.04em;
  color: #fff;
}
.intro-card p { color: rgba(255,255,255,.5); font-weight: 500; }

/* ── Empty ──────────────────────────────────────────────── */
.empty { text-align: center; padding: 36px 20px; color: var(--text-3); }
.empty .big { font-size: 48px; display: block; margin-bottom: 10px; }

/* ── Misc ───────────────────────────────────────────────── */
.hidden   { display: none !important; }
.muted    { color: var(--text-3); }
.full-row { grid-column: 1/-1; }
.safe-area{ height: 8px; }

.mini-link {
  color: var(--brand);
  font-weight: 600;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--fast);
}
.mini-link:hover { color: var(--accent); }

.dev-badge { background: var(--brand); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.kbd { font-family: ui-monospace, monospace; background: var(--surface-3); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); font-size: 12px; }

.mini-stat    { font-size: 12px; color: var(--text-3); }
.history-table{ display: grid; gap: 10px; }
.small-form   { display: grid; gap: 8px; }
.dashboard-grid { display: grid; gap: 16px; }
.two-col        { display: grid; gap: 16px; }
.admin-grid     { display: grid; gap: 14px; }
.cost-fields    { display: grid; gap: 10px; }
.stall-photo, .note-photo { width: 52px; height: 52px; border-radius: var(--r-md); object-fit: cover; background: var(--surface-3); display: grid; place-items: center; border: 1px solid var(--border); }
.product-row button { flex-shrink: 0; font-family: inherit; }
.card.metric { border: 1px solid var(--border); }

/* ── IA Box accent ──────────────────────────────────────── */
#iaBox .card {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; border: none;
}
#iaBox .card .row-sub { color: rgba(255,255,255,.6); }
#iaBox .card .row-title { color: #fff; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

@media (min-width: 700px) {
  body { padding: 32px 20px; background: #eeeef5; }
  .page { max-width: 1200px; border-radius: var(--r-xl); min-height: auto; box-shadow: var(--shadow-lg); overflow: visible; }
  .honey-top { border-radius: var(--r-xl) var(--r-xl) 0 0; min-height: 130px; padding: 28px 36px; }
  .content { padding: 28px 36px 110px; }
  .business-grid { grid-template-columns: repeat(4,1fr); }
  .grid-2 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: repeat(3,1fr); }
  .product-grid { grid-template-columns: repeat(4,1fr); }
  .admin-grid { grid-template-columns: repeat(2,1fr); }
  .dashboard-grid, .two-col { grid-template-columns: 1fr 1fr; align-items: start; }
  .bottom-nav { max-width: 1200px; position: fixed; border-radius: 0 0 var(--r-xl) var(--r-xl); }
  .form-sheet { max-width: 560px; border-radius: var(--r-xl); bottom: 28px; }
  .form-sheet.open { transform: translateX(-50%) translateY(0); }
  .logo-box { padding-top: 60px; }
  .role-card { min-height: 160px; }
  .cost-fields { grid-template-columns: 1fr 1fr; }
  .cost-fields.hidden { display: none !important; }
}

@media (min-width: 1000px) {
  .business-grid { grid-template-columns: repeat(4,1fr); }
  .content > .list,
  .content > #topProducts,
  .content > #expensePreview,
  .content > #historySales,
  .content > #historyTime {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
  }
  .content > .list .empty { grid-column: 1/-1; }
  .rank-row, .product-row, .staff-row, .expense-row, .code-row, .user-row { min-height: 76px; }
}

@media (max-width: 360px) {
  .business-grid { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .bee-sprite { width: 160px; height: 160px; }
  .metric strong { font-size: 18px; }
}

@media (max-width: 430px) {
  .metric strong { font-size: 19px; }
  .btn.full { width: 100%; }
}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }@media(max-width:360px){.business-grid{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}.product-grid{grid-template-columns:1fr}.bee-sprite{width:190px;height:190px}}

/* Patch v5 — responsivo PC/celular sem redesenhar tudo */
.admin-grid{display:grid;gap:14px}.product-row button{flex-shrink:0}.card.metric{border:0}.form-sheet h2{margin-top:0}.product-row{color:inherit;text-decoration:none;text-align:left}.product-row button{font-family:inherit}.top-user,.dev-badge{white-space:nowrap}
@media(min-width:820px){
  body{padding:32px 18px;background:#fff8e8}.page{max-width:1180px;width:100%;min-height:auto;border-radius:28px;box-shadow:0 18px 50px rgba(75,42,0,.12);overflow:hidden}.page:after{display:none}.honey-top{min-height:150px;padding:28px 32px}.content{padding:24px 32px 110px}.business-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bottom-nav{max-width:1180px;border-radius:0;position:fixed}.form-sheet{max-width:560px;border-radius:26px;bottom:24px}.logo-box{padding-top:48px}.logo-box+.content{max-width:720px;margin:0 auto}.role-card{min-height:150px}.metric strong{font-size:26px}}
@media(min-width:1180px){.business-grid{grid-template-columns:repeat(4,1fr)}.content>.list,.content>#topProducts,.content>#expensePreview,.content>#historySales,.content>#historyTime{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.content>.list .empty{grid-column:1/-1}.rank-row,.product-row,.staff-row,.expense-row,.code-row,.user-row{min-height:82px}}
@media(max-width:430px){.actions-row{flex-direction:row}.product-row{align-items:flex-start}.business-grid{grid-template-columns:1fr 1fr}.metric strong{font-size:20px}.btn.full{width:100%}}


/* Patch v6 — modo preto e branco minimalista, responsivo e institucional */
:root{
  --yellow:#111111; --yellow-2:#333333; --cream:#f7f7f7; --card:#ffffff; --brown:#111111; --muted:#666666;
  --green:#111111; --green-bg:#f2f2f2; --orange:#111111; --red:#111111; --red-bg:#f4f4f4; --blue:#111111; --line:#e5e5e5;
  --shadow:0 14px 32px rgba(0,0,0,.08);
}
html,body{background:#f5f5f5;color:#111111}.page{background:#ffffff}.honey-top{background:#111111;color:#ffffff;box-shadow:none;border-bottom:1px solid #111111}.honey-top:before{display:none}.subtitle,.honey-top .subtitle{color:#dddddd}.top-user,.dev-badge{background:#ffffff;color:#111111;border:1px solid #e6e6e6}.card,.product-row,.rank-row,.staff-row,.expense-row,.code-row,.user-row,.product-card,.health-card,.install-card{border-color:#e7e7e7;box-shadow:0 10px 24px rgba(0,0,0,.05);background:#ffffff}.btn{background:#111111;color:#ffffff;box-shadow:none;border:1px solid #111111}.btn.secondary{background:#ffffff;color:#111111;border:1px solid #111111}.btn.danger{background:#111111;color:#ffffff}.input{border-color:#d8d8d8;background:#ffffff}.input:focus{border-color:#111111;box-shadow:0 0 0 4px rgba(0,0,0,.08)}.role-card.active{border-color:#111111;background:#f4f4f4;box-shadow:none}.metric-icon,.thumb,.app-icon{background:#f2f2f2;color:#111111}.metric strong,.metric .orange,.metric .blue,.health-score{color:#111111}.bar>i{background:#111111}.segmented .active,.segmented a.active,.segmented button.active{background:#111111;color:#ffffff}.bottom-nav{border-top:1px solid #e5e5e5;background:rgba(255,255,255,.96)}.nav-item.active{background:#111111;color:#ffffff}.pill{background:#f1f1f1;color:#111111}.pill.green,.pill.red,.pill.blue{background:#f1f1f1;color:#111111}.notice,.notice.success,.notice.danger{background:#f8f8f8;border-color:#e4e4e4;color:#111111}.form-sheet{border:1px solid #e4e4e4}.overlay.open{background:rgba(0,0,0,.45)}.brand small{color:#444444}.mini-link{color:#111111}.rank-number{background:#111111;color:white}.qty button{background:#111111;color:white}.intro-overlay{background:#ffffff}.bee-sprite{filter:grayscale(1) drop-shadow(0 18px 24px rgba(0,0,0,.10))}
@media(min-width:820px){body{padding:32px 20px}.page{max-width:1200px;display:block}.content{padding-left:36px;padding-right:36px}.business-grid{grid-template-columns:repeat(4,1fr)}.admin-grid{grid-template-columns:repeat(2,1fr)}}

/* Patch V8 - cadastro de produto com custo, embalagem e estoque */
.hidden{display:none!important}
.wide-sheet{max-height:92vh;overflow:auto}
.form-block{background:var(--card,#fff);border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:14px;margin:12px 0;box-shadow:0 8px 24px rgba(0,0,0,.04)}
.form-block h3{font-size:15px;margin:0 0 10px;font-weight:800;letter-spacing:-.01em}
.checkbox-line{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid rgba(0,0,0,.08);border-radius:14px;background:#fff;margin:8px 0;font-weight:700}
.checkbox-line input{width:20px;height:20px;accent-color:#111}
.calc-box{border:1px dashed rgba(0,0,0,.3);background:#fafafa;border-radius:18px;padding:14px;margin:14px 0}
.calc-box p{display:flex;justify-content:space-between;gap:12px;margin:8px 0;color:#555}
.calc-box strong{color:#111}
.product-row .row-sub{line-height:1.35}
@media (min-width: 760px){.form-sheet.wide-sheet{max-width:720px}.cost-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cost-fields.hidden{display:none!important}}


/* V9 - funções de negócio, desktop/celular */
.page{max-width:min(1180px,100%);}
@media (min-width: 760px){
  .page{border-radius:0;box-shadow:none;min-height:100vh;background:#fafafa;}
  .content{max-width:1100px;margin:0 auto;padding:24px 28px 110px;}
  .honey-top{border-radius:0;padding-left:max(28px,calc((100vw - 1100px)/2));padding-right:max(28px,calc((100vw - 1100px)/2));}
  .business-grid{grid-template-columns:repeat(4,1fr);}
  .dashboard-grid,.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
  .bottom-nav{max-width:720px;left:50%;transform:translateX(-50%);border-radius:24px 24px 0 0;}
  .product-grid{grid-template-columns:repeat(4,1fr);}
  .form-sheet{max-width:620px;left:50%;transform:translateX(-50%) translateY(110%);} .form-sheet.open{transform:translateX(-50%) translateY(0);}
}
.card.compact{padding:12px}.mini-stat{font-size:13px;color:var(--muted)}
.notice.dark{background:#111;color:#fff;border-color:#111}.notice.dark p,.notice.dark small{color:#e6e6e6}
.money-flow{display:grid;gap:10px}.money-flow .flow-line{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding:8px 0}.money-flow .flow-line.final{font-size:18px;font-weight:900;border-bottom:0;padding-top:12px}.flow-bar{height:9px;background:#eee;border-radius:999px;overflow:hidden}.flow-bar i{display:block;height:100%;background:#111;border-radius:999px}.tag-list{display:flex;gap:8px;flex-wrap:wrap}.tag{border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:#fff;font-weight:800;font-size:12px}.stall-photo,.note-photo{width:56px;height:56px;border-radius:16px;object-fit:cover;background:#f2f2f2;display:grid;place-items:center}.tabs{display:flex;gap:8px;margin:10px 0 14px}.tabs a,.tabs button{border:1px solid #ddd;border-radius:999px;padding:9px 12px;background:#fff;font-weight:800}.tabs .active{background:#111;color:#fff;border-color:#111}.muted{color:var(--muted)}.full-row{grid-column:1/-1}.history-table{display:grid;gap:10px}.small-form{display:grid;gap:8px}.kbd{font-family:ui-monospace,monospace;background:#f3f3f3;padding:2px 6px;border-radius:6px}

/* V10: escolha de barraca/ponto de venda com foto */
.stall-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:10px}
.stall-option{border:1px solid var(--line,#ddd);border-radius:18px;padding:10px;background:var(--card,#fff);display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;cursor:pointer;min-height:150px;transition:.15s ease}
.stall-option input{accent-color:#111;transform:scale(1.15)}
.stall-option:has(input:checked){outline:3px solid #111;border-color:#111}
.stall-photo-box{width:100%;height:86px;border-radius:14px;background:#f4f4f4;display:grid;place-items:center;overflow:hidden;font-size:36px;border:1px solid #e5e5e5}
.stall-photo-box img{width:100%;height:100%;object-fit:cover;display:block}
.stall-option b{font-size:14px}.stall-option small{font-size:12px;color:var(--muted,#666)}
.form-block.light{background:#f7f7f7;border-radius:18px;padding:14px;border:1px solid #e8e8e8}


/* Patch V11: gastos com apagar e separação negócio/bolso */
.row-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pill.warning{background:#fff7ed;color:#9a3412;border-color:#fed7aa}
.pill.success{background:#f0fdf4;color:#166534;border-color:#bbf7d0}
.expense-row .row-actions .btn{margin:0}


/* V12 - faturamento por produto e períodos */
.period-toolbar{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:10px 0 16px}
.period-toolbar select,.period-select{border:1px solid var(--border,#ddd);border-radius:14px;padding:11px 12px;background:var(--card,#fff);color:var(--text,#111);font-weight:700}
.product-money-list{display:grid;gap:10px;margin-top:12px}
.product-money-row{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--border,#e5e5e5);border-radius:18px;padding:12px;background:rgba(255,255,255,.04)}
.money-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.money-mini-grid span{border:1px solid var(--border,#e5e5e5);border-radius:12px;padding:8px;font-size:.86rem;display:flex;justify-content:space-between;gap:8px;background:rgba(255,255,255,.03)}
.money-mini-grid .positive{background:rgba(46,204,113,.09);border-color:rgba(46,204,113,.25)}
.period-breakdown{display:grid;gap:10px}
.period-row{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid var(--border,#e5e5e5);border-radius:16px;padding:12px;background:var(--card,#fff)}
.period-row small{display:block;opacity:.72;margin-top:3px}.period-values{display:flex;flex-direction:column;text-align:right;gap:4px;font-weight:700}.period-row.negativo{border-color:rgba(231,76,60,.4)}.period-row.positivo{border-color:rgba(46,204,113,.25)}
.notice.compact{margin-top:12px;padding:10px 12px}.notice.compact p{margin:.35rem 0 0}
@media (max-width:520px){.money-mini-grid{grid-template-columns:1fr}.period-row{align-items:flex-start;flex-direction:column}.period-values{text-align:left}.product-money-row{padding:10px}}


/* ── V18 — Skeleton loading, Perfil, Editar gasto, Filtros histórico ── */

/* Skeleton loading */
@keyframes skeleton-pulse{0%,100%{opacity:.45}50%{opacity:.9}}
.skeleton-line{
  display:block;height:16px;border-radius:8px;
  background:linear-gradient(90deg,#e5e5e5 25%,#f0f0f0 50%,#e5e5e5 75%);
  background-size:200% 100%;animation:skeleton-pulse 1.4s ease infinite;
  margin-bottom:10px;width:100%
}
.skeleton-card{
  border-radius:18px;padding:18px;
  background:linear-gradient(90deg,#ececec 25%,#f5f5f5 50%,#ececec 75%);
  background-size:200% 100%;animation:skeleton-pulse 1.4s ease infinite;
  min-height:80px;margin-bottom:10px
}
.loading-spinner{
  display:flex;justify-content:center;align-items:center;padding:32px;
  gap:6px;color:var(--muted,#666);font-size:.9rem
}
.loading-spinner::before{
  content:"";width:18px;height:18px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  animation:spin .7s linear infinite;display:inline-block
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Segmented buttons */
.segmented{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}
.seg-btn{
  flex:1;min-width:60px;padding:9px 6px;border:1px solid var(--border,#ddd);
  border-radius:14px;background:var(--card,#fff);color:var(--muted,#666);
  font-weight:600;font-size:.83rem;cursor:pointer;transition:.15s
}
.seg-btn.active{background:#111;color:#fff;border-color:#111}

/* Perfil */
#profileAvatar{display:block;margin:0 auto 8px}

/* Gastos — botão editar */
.expense-row .row-actions{flex-direction:column;align-items:flex-end;gap:4px}
.expense-row .row-actions .btn.secondary{background:transparent;border:1px solid #ddd;color:#444}

/* Histórico filtros */
.field-label{display:block;font-size:.8rem;font-weight:600;color:var(--muted,#666);margin:8px 0 3px}
.checkbox-label{display:flex;align-items:center;gap:8px;font-size:.9rem;margin:8px 0}

/* IA combos */
#aiCombos .notice,#aiProductSuggestions .notice{margin-bottom:8px}

/* Customer window result */
#customerWindowResult .pill{display:inline-block;padding:4px 10px;border-radius:8px}

/* Dark mode skeleton */
@media(prefers-color-scheme:dark){
  .skeleton-line,.skeleton-card{
    background:linear-gradient(90deg,#2a2a2a 25%,#333 50%,#2a2a2a 75%);
    background-size:200% 100%
  }
}