* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #f7f2ec;
  color: #1f1a17;
}
a { color: inherit; text-decoration: none; }
.subpage-hero {
  background: linear-gradient(180deg, #2b2119, #4a382e);
  color: #fff8f1;
  padding: 24px;
}
.subpage-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.breadcrumb { font-size: 0.92rem; opacity: 0.9; margin-bottom: 8px; }
.subpage-title { margin: 0; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.05; }
.back-link, .btn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  border: 1px solid #111;
  font-weight: 700;
  cursor: pointer;
}
.section { max-width: 1560px; margin: 0 auto; padding: 48px 24px; }
.tool-shell { background: #fffaf6; border-radius: 28px; box-shadow: 0 12px 32px rgba(50,28,9,.06); overflow: hidden; }
.tool-grid { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
.tool-controls { padding: 24px; border-right: 1px solid #f0e5da; background: #fffdfb; }
.tool-preview-wrap { padding: 24px; }
.field-label { display: block; margin: 14px 0 6px; font-weight: 800; color: #5f4737; }
input, select, textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid #e7ddd3;
  background: #fffcf9;
  color: #1f1a17;
  font: inherit;
}
textarea { min-height: 120px; resize: vertical; }
.small-note, .muted, .status { color: #6e5a4d; font-size: .95rem; }
.status { margin-top: 12px; font-weight: 700; }
#runStyleAiButton { margin-top: 16px; width: 100%; }
.result-panel { min-height: 720px; border: 1px solid #eadbcf; border-radius: 22px; background: #fffdfb; padding: 22px; overflow: auto; }
.result-grid { display: grid; gap: 16px; }
.card { border: 1px solid #eadbcf; border-radius: 18px; background: #fff; padding: 16px; box-shadow: 0 8px 18px rgba(50,28,9,.04); }
.card h3 { margin: 0 0 10px; }
.rank-table { width: 100%; border-collapse: collapse; }
.rank-table th, .rank-table td { border-bottom: 1px solid #eee3d8; padding: 10px; text-align: left; }
.rank-table th { background: #f8efe7; }
.badge { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #f2e4d7; color: #5f4737; font-weight: 800; font-size: .84rem; }
ul { margin-top: 8px; }
@media (max-width: 900px) { .tool-grid { grid-template-columns: 1fr; } .tool-controls { border-right: none; border-bottom: 1px solid #f0e5da; } }


.password-field-wrap {
  position: relative;
  width: 100%;
}

.password-field-wrap input {
  padding-right: 52px;
}

.password-toggle-btn {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: #5f4737;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.password-toggle-btn:hover {
  background: rgba(46, 34, 26, 0.08);
}

.password-toggle-btn.is-visible {
  color: #111;
  background: rgba(46, 34, 26, 0.12);
}

.password-eye-icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
  pointer-events: none;
}

.strategy-note-wrap {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.mini-note {
  border: 1px solid rgba(122, 90, 65, 0.18);
  background: rgba(246, 238, 230, 0.45);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
}



/* ============================================================
   Fashion Company Theme Override v2
   Visual-only update.
   - Shorter homepage/top hero image.
   - Clearer text contrast.
   - More fashion-company palette: ivory, charcoal, pearl gray, soft champagne.
   - Softer modern rounded-rectangle buttons instead of pill buttons.
   ============================================================ */
:root {
  --fc-bg: #f5f3ef;
  --fc-bg-soft: #faf8f5;
  --fc-card: #ffffff;
  --fc-card-soft: #fbfaf8;
  --fc-line: #d9d2c8;
  --fc-line-strong: #bbb0a3;
  --fc-text: #171717;
  --fc-text-2: #2f2f2f;
  --fc-muted: #555c66;
  --fc-soft-muted: #737985;
  --fc-charcoal: #222326;
  --fc-charcoal-2: #34363b;
  --fc-slate: #4b5563;
  --fc-champagne: #d7c3a6;
  --fc-blush: #eaded8;
  --fc-shadow: 0 14px 34px rgba(24, 24, 27, 0.08);
  --fc-shadow-soft: 0 7px 18px rgba(24, 24, 27, 0.055);
}

/* Base */
html,
body {
  background: linear-gradient(180deg, #fbfaf8 0%, var(--fc-bg) 100%) !important;
  color: var(--fc-text) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Shorten top photo/hero areas. No image overlay/filter. */
.hero {
  min-height: 50vh !important;
  height: auto !important;
  background-image: url('images/IMG_1760.webp') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  filter: none !important;
}

.hero-inner {
  padding: 28px 0 18px !important;
  align-items: center !important;
}

#page-home .hero {
  min-height: 50vh !important;
}

.hero::before,
.hero::after,
.subpage-hero::before,
.subpage-hero::after {
  display: none !important;
  content: none !important;
}

/* Text over photo should be readable, but image itself remains untouched */
.hero .logo,
.hero .eyebrow,
.hero h1,
.hero p {
  color: #ffffff !important;
  text-shadow: 0 3px 18px rgba(0,0,0,0.42) !important;
  font-weight: 800 !important;
}

.hero p {
  color: rgba(255,255,255,0.98) !important;
  font-weight: 650 !important;
  max-width: 760px !important;
}

.hero-card {
  background: rgba(255,255,255,0.92) !important;
  color: var(--fc-text) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.12) !important;
  backdrop-filter: none !important;
}

.hero-card h3,
.hero-card p,
.hero-card span {
  color: var(--fc-text) !important;
  text-shadow: none !important;
}

/* Subpage headers: clean fashion look */
.subpage-hero,
.hero:not(#page-home .hero) {
  background-color: #ffffff !important;
}

.subpage-hero {
  background: linear-gradient(180deg, #ffffff 0%, #f7f5f1 100%) !important;
  color: var(--fc-text) !important;
  border-bottom: 1px solid var(--fc-line) !important;
  box-shadow: var(--fc-shadow-soft) !important;
}

.subpage-hero .breadcrumb,
.subpage-hero .subpage-title,
.subpage-hero h1,
.subpage-hero p {
  color: var(--fc-text) !important;
  text-shadow: none !important;
  font-weight: 800 !important;
}

/* Cards / option and result windows */
.tool-shell,
.page-shell,
.panel,
.preview,
.report-card,
.card,
.result-card,
.result-panel,
.chart-box,
.table-wrap,
.status,
.file-item,
.summary-card,
.metric-card,
.merge-panel,
.note,
.drop-zone,
.tool-preview,
.preview-shell,
.sidebar,
.box,
.tab,
.check-grid,
.download-zone,
.option-card,
.chart-card,
.about-box,
.collection-card,
.contact-box {
  background: linear-gradient(180deg, var(--fc-card) 0%, var(--fc-card-soft) 100%) !important;
  border: 1px solid var(--fc-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--fc-shadow-soft) !important;
  color: var(--fc-text) !important;
}

/* Left option panels slightly warmer; result panels cleaner */
.tool-controls,
.panel,
aside.card {
  background: linear-gradient(180deg, #fffdfb 0%, #f8f5f1 100%) !important;
  border-color: var(--fc-line) !important;
}

.tool-preview-wrap,
.preview,
.result-area,
.result-grid,
main.stack {
  color: var(--fc-text) !important;
}

/* Typography */
h1, h2, h3, h4,
.lead,
.section-title,
.result-title,
.card h3,
.panel h3 {
  color: var(--fc-text) !important;
  font-weight: 850 !important;
  letter-spacing: -0.015em;
}

h2,
.kicker,
label,
.field-label,
.summary-card .label,
.metric-card .label {
  color: var(--fc-charcoal) !important;
  font-weight: 850 !important;
}

.muted,
.small,
.small-note,
.helper-text,
.note,
.status,
.card p,
.collection-card p {
  color: var(--fc-muted) !important;
  font-weight: 550 !important;
}

strong,
b {
  color: var(--fc-text) !important;
  font-weight: 850 !important;
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="file"],
input[type="password"],
textarea,
select {
  background: #ffffff !important;
  border: 1px solid #cfd5dd !important;
  border-radius: 12px !important;
  color: var(--fc-text) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) !important;
  font-weight: 600 !important;
}

input::placeholder,
textarea::placeholder {
  color: #8a919b !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--fc-charcoal) !important;
  box-shadow: 0 0 0 4px rgba(34, 35, 38, 0.10) !important;
}

/* Buttons: modern rounded rectangle, fashion-company look */
button,
.btn,
.btn-primary,
.btn-secondary,
.btn-dark,
.tool-link,
.download-link,
.mini-btn,
.back,
.back-link,
.tabbtn,
.tab,
.tab.active,
.tabs .tab,
.ghost,
.secondary,
.primary-btn,
.run-btn,
.danger,
.chart-close-btn,
.scroll-top-fab {
  background: linear-gradient(135deg, var(--fc-charcoal) 0%, var(--fc-charcoal-2) 100%) !important;
  color: #ffffff !important;
  border: 1px solid var(--fc-charcoal) !important;
  border-radius: 12px !important;
  box-shadow: 0 9px 18px rgba(17, 24, 39, 0.16) !important;
  font-weight: 850 !important;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease !important;
}

button:hover,
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-dark:hover,
.tool-link:hover,
.download-link:hover,
.mini-btn:hover,
.back:hover,
.back-link:hover,
.tabbtn:hover,
.tab:hover,
.ghost:hover,
.secondary:hover,
.primary-btn:hover,
.run-btn:hover,
.danger:hover,
.chart-close-btn:hover,
.scroll-top-fab:hover {
  background: linear-gradient(135deg, #111827 0%, #2f3035 100%) !important;
  border-color: #111827 !important;
  transform: translateY(-1px);
  box-shadow: 0 13px 26px rgba(17, 24, 39, 0.20) !important;
}

button:disabled,
.btn:disabled,
.mini-btn:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Secondary-like buttons still clear but softer */
.btn-secondary,
.secondary,
.mini-btn,
.tab:not(.active) {
  background: #ffffff !important;
  color: var(--fc-charcoal) !important;
  border: 1px solid #bfc7d1 !important;
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.07) !important;
}

.btn-secondary:hover,
.secondary:hover,
.mini-btn:hover,
.tab:not(.active):hover {
  background: #f1f5f9 !important;
  color: #111827 !important;
  border-color: #9ca3af !important;
}

/* Tables */
table,
.rank-table,
.data-table,
.summary-table {
  background: #ffffff !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid var(--fc-line) !important;
}

thead th,
th,
.rank-table thead th,
.data-table thead th,
.summary-table thead th,
.main-head th,
.filter-row th {
  background: linear-gradient(135deg, #2f3542 0%, #1f2937 100%) !important;
  color: #ffffff !important;
  border-bottom: 1px solid #111827 !important;
  font-weight: 850 !important;
  letter-spacing: 0.01em;
}

tbody td,
td,
.rank-table tbody td,
.data-table tbody td,
.summary-table tbody td {
  background: #ffffff !important;
  color: var(--fc-text) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  font-weight: 600 !important;
}

tbody tr:nth-child(even) td,
.rank-table tbody tr:nth-child(even) td {
  background: #f8fafc !important;
}

tbody tr:hover td,
.rank-table tbody tr:hover td {
  background: #edf2f7 !important;
}

/* Badges and chips */
.badge,
.chip,
.pill,
.tag,
.duplicate-order-info {
  background: #f3f4f6 !important;
  color: var(--fc-charcoal) !important;
  border: 1px solid #cfd5dd !important;
  border-radius: 999px !important;
  font-weight: 850 !important;
}

.ok { color: #166534 !important; background: #ecfdf3 !important; border-color: #bbf7d0 !important; }
.warn { color: #92400e !important; background: #fffbeb !important; border-color: #fde68a !important; }
.bad { color: #991b1b !important; background: #fef2f2 !important; border-color: #fecaca !important; }

/* Upload areas and progress */
.drop-zone,
.upload-zone,
.preview-box {
  border: 2px dashed #c6ced8 !important;
  background: #ffffff !important;
}

.drop-zone.dragover {
  border-color: var(--fc-charcoal) !important;
  background: #f8fafc !important;
  box-shadow: inset 0 0 0 3px rgba(31, 41, 55, 0.09) !important;
}

.progress-shell {
  background: #e5e7eb !important;
  border: 1px solid #d1d5db !important;
}

.progress-bar {
  background: linear-gradient(135deg, var(--fc-charcoal) 0%, #64748b 100%) !important;
}

/* Strategy/note cards */
.mini-note,
.strategy-box,
.note-box {
  background: #ffffff !important;
  border: 1px solid var(--fc-line) !important;
  color: var(--fc-text) !important;
  border-radius: 14px !important;
  box-shadow: var(--fc-shadow-soft) !important;
}

/* Keep actual work canvas/template white */
.linesheet-page,
.linesheet-slot,
.linesheet-main-stage,
.linesheet-thumb-stage,
.pdf-main-scroll,
.pdf-side-window,
.pdf-main-page-canvas,
.mini-preview,
.preview-page,
canvas {
  background: #ffffff !important;
  border-color: var(--fc-line) !important;
}

/* Password eye button */
.password-toggle-btn {
  background: transparent !important;
  color: var(--fc-charcoal) !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 999px !important;
}
.password-toggle-btn:hover {
  background: rgba(31, 41, 55, 0.10) !important;
  transform: translateY(-50%) !important;
}

/* Home tool cards: slightly more premium spacing */
.collection-card {
  transition: transform .16s ease, box-shadow .16s ease !important;
}
.collection-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--fc-shadow) !important;
}

/* Mobile hero should not be too tall */
@media (max-width: 720px) {
  .hero,
  #page-home .hero {
    min-height: 48vh !important;
  }
  .hero-inner {
    grid-template-columns: 1fr !important;
  }
}



/* ============================================================
   Fashion Company Theme Override v3
   Visual-only update.
   - Homepage/top hero height reduced.
   - No photo filters/overlays.
   - Fashion palette: porcelain, ivory, ink, champagne, cool gray.
   - Clearer text contrast.
   - Modern rounded-rectangle buttons.
   ============================================================ */
:root {
  --fe-bg: #f6f5f2;
  --fe-bg-2: #ebe7e1;
  --fe-surface: #ffffff;
  --fe-surface-2: #fbfaf7;
  --fe-option: #f3f0eb;
  --fe-result: #ffffff;
  --fe-line: #d7d1c8;
  --fe-line-2: #bdb5aa;
  --fe-text: #111111;
  --fe-text-2: #262626;
  --fe-muted: #4b5563;
  --fe-muted-2: #667085;
  --fe-ink: #171717;
  --fe-ink-2: #2b2d31;
  --fe-champagne: #c8ad86;
  --fe-champagne-soft: #efe6d8;
  --fe-blush: #eee4df;
  --fe-shadow: 0 18px 38px rgba(17, 17, 17, 0.08);
  --fe-shadow-soft: 0 8px 20px rgba(17, 17, 17, 0.055);
}

/* Base */
html,
body {
  background: linear-gradient(180deg, #ffffff 0%, var(--fe-bg) 52%, #efebe5 100%) !important;
  color: var(--fe-text) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Homepage/top photo area: shorter and no image effect */
.hero {
  min-height: 46vh !important;
  height: auto !important;
  background-image: url('images/IMG_1760.webp') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  filter: none !important;
  color: #ffffff !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

#page-home .hero {
  min-height: 46vh !important;
}

.hero-inner {
  padding: 22px 0 16px !important;
  align-items: center !important;
}

.hero::before,
.hero::after,
.subpage-hero::before,
.subpage-hero::after,
.satomi-banner::before,
.satomi-banner::after {
  display: none !important;
  content: none !important;
}

img,
.hero img,
.about-box img,
.collection-card img,
.gallery-grid img,
.satomi-slice img,
.tool-preview img {
  filter: none !important;
  mix-blend-mode: normal !important;
}

.about-box:has(img),
.collection-card:has(img),
.gallery-grid img,
.satomi-banner {
  box-shadow: none !important;
}

/* Readable hero text without changing photo itself */
.hero .logo,
.hero .eyebrow,
.hero h1,
.hero p {
  color: #ffffff !important;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.46) !important;
  font-weight: 850 !important;
}

.hero h1 {
  font-size: clamp(2.05rem, 4.7vw, 4.1rem) !important;
  letter-spacing: -0.035em !important;
}

.hero p {
  color: rgba(255,255,255,0.98) !important;
  font-weight: 700 !important;
  max-width: 780px !important;
}

.hero-card {
  background: rgba(255,255,255,0.94) !important;
  color: var(--fe-text) !important;
  border: 1px solid rgba(255,255,255,0.76) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.12) !important;
  backdrop-filter: none !important;
}

.hero-card h3,
.hero-card p,
.hero-card span {
  color: var(--fe-text) !important;
  text-shadow: none !important;
}

/* Subpage hero/header */
.subpage-hero {
  background: linear-gradient(180deg, #ffffff 0%, #f7f4ef 100%) !important;
  color: var(--fe-text) !important;
  border-bottom: 1px solid var(--fe-line) !important;
  box-shadow: var(--fe-shadow-soft) !important;
}

.subpage-hero .breadcrumb,
.subpage-hero .subpage-title,
.subpage-hero h1,
.subpage-hero h2,
.subpage-hero h3,
.subpage-hero p {
  color: var(--fe-text) !important;
  text-shadow: none !important;
  font-weight: 850 !important;
}

/* Layout surfaces */
.tool-shell,
.page-shell,
.panel,
.preview,
.report-card,
.card,
.result-card,
.result-panel,
.chart-box,
.table-wrap,
.status,
.file-item,
.summary-card,
.metric-card,
.merge-panel,
.note,
.drop-zone,
.tool-preview,
.preview-shell,
.sidebar,
.box,
.tab,
.check-grid,
.download-zone,
.option-card,
.chart-card,
.about-box,
.collection-card,
.contact-box {
  background: linear-gradient(180deg, var(--fe-surface) 0%, var(--fe-surface-2) 100%) !important;
  border: 1px solid var(--fe-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--fe-shadow-soft) !important;
  color: var(--fe-text) !important;
}

/* Option windows vs result windows */
.tool-controls,
.panel,
aside.card {
  background: linear-gradient(180deg, var(--fe-option) 0%, #faf8f5 100%) !important;
  border-color: var(--fe-line) !important;
}

.tool-preview-wrap,
.preview,
.result-area,
.result-grid,
main.stack {
  background: transparent !important;
  color: var(--fe-text) !important;
}

/* Typography: stronger contrast */
h1, h2, h3, h4,
.lead,
.section-title,
.result-title,
.card h3,
.panel h3 {
  color: var(--fe-text) !important;
  font-weight: 900 !important;
  letter-spacing: -0.018em;
}

h2,
.kicker,
label,
.field-label,
.summary-card .label,
.metric-card .label {
  color: var(--fe-ink) !important;
  font-weight: 900 !important;
}

.muted,
.small,
.small-note,
.helper-text,
.note,
.status,
.card p,
.collection-card p {
  color: var(--fe-muted) !important;
  font-weight: 600 !important;
}

strong,
b {
  color: var(--fe-text) !important;
  font-weight: 900 !important;
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="file"],
input[type="password"],
textarea,
select {
  background: #ffffff !important;
  border: 1px solid #cbd5df !important;
  border-radius: 12px !important;
  color: var(--fe-text) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) !important;
  font-weight: 650 !important;
}

input::placeholder,
textarea::placeholder {
  color: #7d8590 !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--fe-ink) !important;
  box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.10) !important;
}

/* Buttons: fashion editorial rounded rectangle */
button,
.btn,
.btn-primary,
.btn-secondary,
.btn-dark,
.tool-link,
.download-link,
.mini-btn,
.back,
.back-link,
.tabbtn,
.tab,
.tab.active,
.tabs .tab,
.ghost,
.secondary,
.primary-btn,
.run-btn,
.danger,
.chart-close-btn,
.scroll-top-fab {
  background: linear-gradient(135deg, #191919 0%, #34363b 100%) !important;
  color: #ffffff !important;
  border: 1px solid #111111 !important;
  border-radius: 11px !important;
  box-shadow: 0 9px 18px rgba(17, 17, 17, 0.17) !important;
  font-weight: 900 !important;
  letter-spacing: 0.005em;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease !important;
}

button:hover,
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-dark:hover,
.tool-link:hover,
.download-link:hover,
.mini-btn:hover,
.back:hover,
.back-link:hover,
.tabbtn:hover,
.tab:hover,
.ghost:hover,
.secondary:hover,
.primary-btn:hover,
.run-btn:hover,
.danger:hover,
.chart-close-btn:hover,
.scroll-top-fab:hover {
  background: linear-gradient(135deg, #000000 0%, #24262b 100%) !important;
  border-color: #000000 !important;
  transform: translateY(-1px);
  box-shadow: 0 13px 26px rgba(17, 17, 17, 0.22) !important;
}

button:disabled,
.btn:disabled,
.mini-btn:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Softer secondary buttons */
.btn-secondary,
.secondary,
.mini-btn,
.tab:not(.active) {
  background: #ffffff !important;
  color: var(--fe-ink) !important;
  border: 1px solid #bfc7d1 !important;
  box-shadow: 0 6px 14px rgba(17, 17, 17, 0.065) !important;
}

.btn-secondary:hover,
.secondary:hover,
.mini-btn:hover,
.tab:not(.active):hover {
  background: #f1f2f4 !important;
  color: #000000 !important;
  border-color: #9aa3af !important;
}

/* Tables */
table,
.rank-table,
.data-table,
.summary-table {
  background: #ffffff !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid var(--fe-line) !important;
}

thead th,
th,
.rank-table thead th,
.data-table thead th,
.summary-table thead th,
.main-head th,
.filter-row th {
  background: linear-gradient(135deg, #191919 0%, #34363b 100%) !important;
  color: #ffffff !important;
  border-bottom: 1px solid #000000 !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em;
}

tbody td,
td,
.rank-table tbody td,
.data-table tbody td,
.summary-table tbody td {
  background: #ffffff !important;
  color: var(--fe-text) !important;
  border-bottom: 1px solid #e3e6ea !important;
  font-weight: 650 !important;
}

tbody tr:nth-child(even) td,
.rank-table tbody tr:nth-child(even) td {
  background: #f8f8f8 !important;
}

tbody tr:hover td,
.rank-table tbody tr:hover td {
  background: #f1eee9 !important;
}

/* Badges/chips with subtle fashion accent */
.badge,
.chip,
.pill,
.tag,
.duplicate-order-info {
  background: linear-gradient(180deg, #f7f3ed 0%, #eee6dc 100%) !important;
  color: var(--fe-ink) !important;
  border: 1px solid #d5c7b6 !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
}

.ok { color: #166534 !important; background: #ecfdf3 !important; border-color: #bbf7d0 !important; }
.warn { color: #92400e !important; background: #fffbeb !important; border-color: #fde68a !important; }
.bad { color: #991b1b !important; background: #fef2f2 !important; border-color: #fecaca !important; }

/* Upload/progress */
.drop-zone,
.upload-zone,
.preview-box {
  border: 2px dashed #c3cad3 !important;
  background: #ffffff !important;
}

.drop-zone.dragover {
  border-color: var(--fe-ink) !important;
  background: #f8f8f8 !important;
  box-shadow: inset 0 0 0 3px rgba(17, 17, 17, 0.08) !important;
}

.progress-shell {
  background: #e5e7eb !important;
  border: 1px solid #d1d5db !important;
}

.progress-bar {
  background: linear-gradient(135deg, #191919 0%, #6b7280 100%) !important;
}

/* Note/strategy cards */
.mini-note,
.strategy-box,
.note-box {
  background: #ffffff !important;
  border: 1px solid var(--fe-line) !important;
  color: var(--fe-text) !important;
  border-radius: 14px !important;
  box-shadow: var(--fe-shadow-soft) !important;
}

/* Keep workspaces clean */
.linesheet-page,
.linesheet-slot,
.linesheet-main-stage,
.linesheet-thumb-stage,
.pdf-main-scroll,
.pdf-side-window,
.pdf-main-page-canvas,
.mini-preview,
.preview-page,
canvas {
  background: #ffffff !important;
  border-color: var(--fe-line) !important;
}

/* Password eye button */
.password-toggle-btn {
  background: transparent !important;
  color: var(--fe-ink) !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 999px !important;
}
.password-toggle-btn:hover {
  background: rgba(17, 17, 17, 0.08) !important;
  transform: translateY(-50%) !important;
}

/* Homepage tool cards */
.collection-card {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}
.collection-card:hover {
  transform: translateY(-2px);
  border-color: #c8ad86 !important;
  box-shadow: var(--fe-shadow) !important;
}

/* Hide empty top nav link container if present */
.nav-links:empty {
  display: none !important;
}

/* Mobile */
@media (max-width: 720px) {
  .hero,
  #page-home .hero {
    min-height: 44vh !important;
  }
  .hero-inner {
    grid-template-columns: 1fr !important;
  }
}


/* ECOM Team Helper password modal */
.password-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(17, 17, 17, 0.48);
  backdrop-filter: blur(6px);
}
.password-modal.hidden {
  display: none !important;
}
.password-modal-card {
  width: min(460px, 100%);
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
  border: 1px solid #d7d1c8;
  box-shadow: 0 24px 70px rgba(0,0,0,0.25);
  padding: 28px;
  position: relative;
  color: #111;
}
.password-modal-card h2 {
  margin: 4px 0 8px;
  font-size: 1.65rem;
  line-height: 1.1;
}
.password-modal-kicker {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  font-weight: 900;
  color: #6b5a48;
}
.password-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #cfc7bd;
  background: #fff;
  color: #111;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  box-shadow: none;
}
.password-modal-error {
  margin-top: 10px;
  min-height: 20px;
  color: #991b1b;
  font-weight: 800;
  font-size: 0.92rem;
}
.password-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
  flex-wrap: wrap;
}
.password-modal-actions .btn {
  width: auto !important;
  margin-top: 0 !important;
}
body.password-modal-open {
  overflow: hidden;
}


/* Revenue forecast chart additions */
.forecast-chart-box {
  width: 100%;
  height: 380px;
  margin: 14px 0 18px;
  padding: 12px;
  border: 1px solid var(--fe-line, #d7d1c8);
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
}
.forecast-chart-box canvas {
  width: 100% !important;
  height: 100% !important;
}
.scenario-summary {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.forecast-scenario-card {
  overflow: hidden;
}

/* Forecast v2: scenario basis badge */
.scenario-basis {
  margin-left: 8px;
  font-size: 0.72rem;
  background: #eef1f4;
  color: #30343b;
}

/* Pose recommendation additions */
.pose-card {
  overflow: hidden;
}
.pose-feature-table {
  margin-top: 12px;
}
.pose-site-card ul {
  margin: 8px 0 6px 18px;
  padding: 0;
}
.pose-site-card li {
  margin-bottom: 4px;
}
.pose-confidence-strong {
  background: #e8f3ec;
  color: #1f5a37;
}
.pose-confidence-moderate {
  background: #eef1f4;
  color: #30343b;
}
.pose-confidence-weak,
.pose-confidence-uncertain,
.pose-confidence-unknown {
  background: #f6eee4;
  color: #755334;
}