*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f7f6f4;
  color: #1a1a1a;
  min-height: 100vh;
}

/* ─── Base utility classes ─── */
.btn-base {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition:
    color 0.15s,
    background 0.15s,
    border-color 0.15s;
}

/* ─── Typography utilities ─── */
.text-helper {
  font-weight: 400;
  color: #aaa;
}

.text-small-muted {
  font-size: 11px;
  color: #999;
  font-weight: 400;
}

.text-meta {
  font-size: 13px;
  color: #888;
}

.text-meta-dark {
  font-size: 13px;
  color: #666;
}

.text-muted {
  color: #888;
}

.text-warning {
  color: #92400e;
  font-weight: 600;
}

.text-form-label {
  font-size: 13px;
  font-weight: 500;
  color: #444;
  display: block;
}

.text-section-heading {
  font-size: 15px;
  font-weight: 600;
}

/* ─── Spacing utilities ─── */
.mt-6 {
  margin-top: 6px;
}

.mt-8 {
  margin-top: 8px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-12 {
  margin-top: 12px;
}

.mt-16 {
  margin-top: 16px;
}

.mt-18 {
  margin-top: 18px;
}

.mb-4 {
  margin-bottom: 4px;
}

.mb-8 {
  margin-bottom: 8px;
}

.mb-12 {
  margin-bottom: 12px;
}

.mb-14 {
  margin-bottom: 14px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-18 {
  margin-bottom: 18px;
}

.mb-24 {
  margin-bottom: 24px;
}

/* ─── Layout utilities ─── */
.flex-center {
  display: flex;
  align-items: center;
}

.flex-center-gap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.flex-center-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-column-gap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flex-gap-10 {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}

/* ─── Form utilities ─── */
.input-default {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  box-sizing: border-box;
}

.input-width-limited {
  max-width: 240px;
}

/* ─── Opacity utilities ─── */
.opacity-70 {
  opacity: 0.7;
}

.opacity-40 {
  opacity: 0.4;
}

/* ─── Text alignment ─── */
.text-center {
  text-align: center;
}

/* ─── Image utilities ─── */
.img-hero {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.img-constrained {
  max-width: 100%;
  border-radius: 4px;
}

.img-logo {
  max-height: 40px;
}

/* ─── Overflow utilities ─── */
.overflow-x-auto {
  overflow-x: auto;
}

/* ─── Flex item utilities ─── */
.flex-1 {
  flex: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.btn-no-shrink {
  flex-shrink: 0;
}

.input-url-wrapper {
  flex: 1;
  min-width: 260px;
}

.flex-column-tight {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.upload-zone-label {
  margin: 0;
  min-width: 160px;
}

.label-no-margin {
  margin-bottom: 0;
}

.flex-column-spaced {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 4px;
}

.textarea-spaced {
  margin-top: 8px;
}

/* ─── Email template utilities (translate-mailmag.js) ─── */
.email-sans-serif {
  font-family: sans-serif;
}

.email-padding-16 {
  padding: 16px;
}

.email-stack-column {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
  max-width: 300px;
  vertical-align: middle;
}

.email-img-responsive {
  width: 100%;
  height: auto;
}

.email-centered {
  margin: auto;
  font-family: sans-serif;
}

.email-text-left-16 {
  font-family: sans-serif;
  font-size: 16px;
  text-align: left;
}

.email-margin-auto {
  text-align: left;
  margin: 0;
}

.email-cell-center {
  text-align: center;
  font-size: 0;
  padding: 0;
  background-color: #ffffff;
}

.email-padding-24-16-0 {
  padding: 24px 16px 0;
}

.email-hk-footer {
  padding: 16px;
  font-family: sans-serif;
  font-size: 14px;
  color: #393c41;
  text-align: center;
}

.email-padding-16-16-0 {
  padding: 16px 16px 0;
}

.email-margin-16-auto {
  margin: 0 auto 16px;
}

.email-link-dark {
  font-weight: 700;
  color: #393c41;
}

.email-heading-border {
  border-left: #2c2e33 4px solid;
}

.email-heading-text {
  font-weight: 600;
  font-size: 16px;
  color: #393c41;
  padding-top: 3px;
}

.email-text-dark {
  color: #393c41;
}

.email-info-text {
  color: #393c41;
  font-family: sans-serif;
  font-size: 16px;
  text-align: left;
}

.email-release-date {
  border: 1px solid #393c41;
  padding: 16px;
  font-size: 16px;
  line-height: 24px;
  color: #393c41;
  font-family: sans-serif;
}

.email-bg-white {
  background-color: #ffffff;
  padding: 0;
}

/* ─── Additional app.js utilities ─── */
.error-msg {
  display: block;
  margin-bottom: 12px;
}

.heading-md {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
}

.code-block {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  white-space: pre-wrap;
  max-height: 600px;
  overflow-y: auto;
}

.flex-wrap-gap {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.error-inline {
  display: block;
  margin: 0;
}

.text-dark-secondary {
  color: #393c41;
}

.align-top-start {
  align-items: flex-start;
}

.heading-lg {
  font-size: 17px;
  font-weight: 600;
}

.min-w-0 {
  min-width: 0;
}

/* ─── Label utilities ─── */
.label-release-date {
  font-size: 12px;
  font-weight: 600;
  color: #888;
  min-width: 28px;
  padding-top: 8px;
}

/* ─── Textarea utilities ─── */
.textarea-release-date {
  flex: 1;
  font-size: 13px;
}

/* ─── Panel/container utilities ─── */
.panel-translating {
  padding: 32px;
  color: #888;
  font-size: 13px;
}

.panel-translating-small {
  opacity: 0.4;
}

.label-hint {
  font-size: 12px;
  color: #888;
  margin: 6px 0 0;
}

.input-base {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.input-base:focus {
  border-color: #333;
}

.card-base {
  background: #fff;
  border: 1px solid #e5e3df;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 32px;
}

.section-header {
  padding: 12px 16px;
  background: #f9f8f6;
  border-bottom: 1px solid #e5e3df;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #555;
}

.header-logo {
  text-decoration: none;
  cursor: pointer;
}

header {
  background: #fff;
  border-bottom: 1px solid #e5e3df;
  padding: 16px 32px 0;
}
.header-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  justify-content: center;
}

.header-auth {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  margin-left: auto;
}
.header-auth a {
  color: inherit;
  opacity: 0.75;
  text-decoration: none;
}
.header-auth a:hover { opacity: 1; }
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #f7f6f4;
}
.login-card {
  background: #fff;
  border: 1px solid #e5e3df;
  border-radius: 8px;
  padding: 40px 48px;
  text-align: center;
  max-width: 400px;
  width: 90%;
}
.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}
.login-tagline {
  color: #666;
  margin-bottom: 28px;
  font-size: 14px;
}
.login-btn {
  display: inline-block;
  background: #1a1a1a;
  color: #fff;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
}
.login-btn:hover { background: #333; }
/* Ownership/disclaimer note on the login pages. Makes clear this is an internal
   staff tool, not the public SHIRO site, so Google Safe Browsing's phishing
   classifier does not read the brand logo + password prompt as impersonation. */
.login-notice {
  color: #888;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #1a1a1a;
  border-radius: 2px;
  transition:
    transform 0.2s,
    opacity 0.2s;
}
.nav-hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
}
.nav-hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.shiro-logo {
  height: 25px;
  width: auto;
  color: #1a1a1a;
  flex-shrink: 0;
}
.header-subtitle {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #000;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px;
}

.input-card {
  background: #fff;
  border: 1px solid #e5e3df;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 32px;
}

.input-card label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  color: #444;
}

.input-card input,
.input-card textarea {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.input-card input:focus,
.input-card textarea:focus {
  border-color: #333;
}
.input-card textarea {
  resize: vertical;
  min-height: 72px;
}

.input-row {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}
.input-row .url-wrap {
  flex: 1;
}

.hint,
.csv-fields-hint,
.sidebar-hint {
  font-size: 11px;
  color: #999;
  margin-top: 4px;
}

.optional-row {
  margin-bottom: 16px;
}

.guidelines-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.guidelines-actions button {
  background: none;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  color: #555;
  font-family: inherit;
  transition: background 0.15s;
}
.guidelines-actions button:hover {
  background: #f4f3f1;
}

button.translate-btn {
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
button.translate-btn:hover {
  background: #333;
}
button.translate-btn:disabled {
  background: #999;
  cursor: not-allowed;
}

.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.error-box {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 13px;
  color: #b91c1c;
  margin-bottom: 24px;
  display: none;
}

/* Product header */
.product-header {
  margin-bottom: 24px;
  display: none;
}
.product-header h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
}
.product-header .meta {
  font-size: 13px;
  color: #666;
}
.product-header .images-strip {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.img-wrap {
  position: relative;
  flex-shrink: 0;
}
.product-header .images-strip img {
  height: 80px;
  width: 80px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #e5e3df;
  display: block;
}

/* Market tabs */
.tabs-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e5e3df;
  margin-bottom: 24px;
}
/* Page-type nav (header) */
.page-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 -32px;
  padding: 0 32px;
  position: relative;
}
@media (max-width: 600px) {
  .container {
    padding: 16px 12px;
  }
  .input-card {
    padding: 16px;
  }
  .header-top {
    justify-content: flex-start;
    margin-bottom: 0;
    padding-bottom: 12px;
  }
  .nav-hamburger {
    display: flex;
  }
  .page-nav {
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 8px 0 4px;
    border-top: 1px solid #e5e3df;
  }
  .page-nav.open {
    display: flex;
  }
  .page-nav-btn {
    text-align: left;
    padding: 12px 16px;
    border-bottom: none;
    border-left: 3px solid transparent;
    margin-bottom: 0;
    font-size: 14px;
  }
  .page-nav-btn.active {
    border-bottom-color: transparent;
    border-left-color: #1a1a1a;
  }
}
.page-nav-btn {
  background: none;
  border: none;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: #888;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition:
    color 0.15s,
    border-color 0.15s;
  font-family: inherit;
  text-transform: uppercase;
}
.page-nav-btn.active,
.tab-btn.active {
  color: #1a1a1a;
  border-bottom-color: #1a1a1a;
  font-weight: 700;
}
.page-nav-btn .badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  background: #e5e3df;
  color: #999;
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 5px;
  vertical-align: middle;
  letter-spacing: 0.03em;
}
.page-nav-btn.active .badge {
  background: #1a1a1a;
  color: #fff;
}

/* Page sections */
.page-section {
  display: none;
}
.page-section.active {
  display: block;
}

/* Empty state placeholder shown before first translation */
.results-empty-state {
  padding: 32px 24px;
  background: #faf9f7;
  border: 1px dashed #d6d3cd;
  border-radius: 8px;
  color: #aaa;
  font-size: 13px;
  text-align: center;
}
.results-empty-state p {
  margin: 0;
}
.results-empty-state strong {
  color: #888;
}

.jp-images-notice {
  margin-top: 8px;
  padding: 10px 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  font-size: 12px;
  color: #92400e;
}

/* Two-column layout: main content + image brief sidebar */
.page-two-col {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.page-main {
  flex: 1;
  min-width: 0;
}
.page-sidebar {
  width: 280px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #e5e3df;
  border-radius: 8px;
  padding: 16px;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.sidebar-header {
  margin-bottom: 4px;
}
.sidebar-title {
  font-size: 14px;
  font-weight: 600;
}
.sidebar-desc {
  font-size: 12px;
  color: #888;
  margin: 6px 0 0;
  line-height: 1.5;
}
.sidebar-hint {
  font-size: 12px;
  color: #aaa;
  margin: 8px 0 12px;
}
.il-generate-all-btn {
  background: #1a1a1a;
  color: #fff;
}
.il-generate-all-btn:hover:not(:disabled) {
  background: #333;
}
.il-generate-all-btn:disabled {
  background: #999;
  cursor: not-allowed;
}

/* Bulk action button group (sidebar + img-test tab) */
.il-bulk-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  margin-bottom: 16px;
}
.download-csv-btn--sharepoint {
  background: #0078d4;
  color: #fff;
  border-color: #0078d4;
  transition: all 0.2s ease;
}
.download-csv-btn--sharepoint:hover:not(:disabled) {
  background: #106ebe;
  border-color: #106ebe;
}
.download-csv-btn--sharepoint:disabled {
  background: #f4f3f1;
  color: #aaa;
  cursor: not-allowed;
  border-color: #e5e3df;
}

@keyframes pulse-orange {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 165, 0, 0.6); }
  50% { box-shadow: 0 0 20px rgba(255, 165, 0, 0.8); }
}

.sharepoint-export-banner {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
}
.sharepoint-export-banner a {
  color: inherit;
  font-weight: 600;
}
.sharepoint-export-banner li {
  margin: 2px 0;
}
.sharepoint-export-banner div {
  margin: 0;
}
.sharepoint-export-banner--success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}
.sharepoint-export-banner--pending {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}
.sharepoint-export-banner--error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.sharepoint-export-banner--info {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}
.sharepoint-overwrite-note {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: #888;
  line-height: 1.4;
}
.zip-download-row--sharepoint {
  flex-direction: column;
  align-items: flex-start;
}

/* Remove button on image-test cards */
.il-card-remove {
  background: none;
  border: none;
  font-size: 14px;
  color: #aaa;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  align-self: flex-start;
}
.il-card-remove:hover {
  background: #f4f3f1;
  color: #555;
}

@media (max-width: 900px) {
  .page-two-col {
    flex-direction: column;
  }
  .page-sidebar {
    width: 100%;
    position: static;
    max-height: none;
  }
}

/* Settings page */
.settings-page {
  max-width: 720px;
}
.settings-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 24px;
}
.settings-section {
  padding: 20px;
}
.settings-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.settings-section-label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 3px;
}
.settings-section-hint,
.il-solution-hint {
  font-size: 12px;
  color: #888;
}
.settings-textarea {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  line-height: 1.5;
  outline: none;
  resize: vertical;
  min-height: 360px;
}
.settings-textarea:focus {
  border-color: #333;
}
.settings-textarea--short {
  min-height: 140px;
}

.settings-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e5e3df;
  padding-bottom: 0;
}
.settings-mkt-tab-btn,
.settings-ref-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 6px 14px 8px;
  font-size: 13px;
  font-weight: 500;
  color: #888;
  cursor: pointer;
  margin-bottom: -1px;
  border-radius: 0;
}
.settings-mkt-tab-btn:hover,
.settings-ref-tab-btn:hover,
.page-nav-btn:hover {
  color: #333;
}
.settings-mkt-tab-btn.active,
.settings-ref-tab-btn.active {
  color: #1a1a1a;
  border-bottom-color: #1a1a1a;
}

/* Group heading (not associated with a single input) */
.group-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  color: #444;
}

/* Market checkbox labels */
.market-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 13px;
  color: #333;
}

label.market-label {
  display: flex;
}
.market-label--muted {
  color: #888;
}

.market-label--divider {
  margin-left: 8px;
  border-left: 1px solid #e5e7eb;
  padding-left: 16px;
}

@media (max-width: 480px) {
  .market-label--divider {
    margin-left: 0;
    border-left: none;
    padding-left: 0;
  }
}

/* Markets row flex wrapper */
.markets-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.markets-row > .market-label input[type="checkbox"] {
  width: 16px;
}

/* Landing page reference table */
.landing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.landing-table th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
  background: #f9f8f6;
  border-bottom: 2px solid #e5e3df;
}

.lp-page-title {
  font-size: 17px;
  font-weight: 600;
}

.landing-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0eeeb;
}
.landing-table tr:nth-child(even) td {
  background: #fafaf9;
}
.landing-table td:first-child {
  font-weight: 500;
  white-space: nowrap;
}
.landing-table td a {
  color: #1a1a1a;
  font-size: 11px;
}
.landing-table td.na {
  color: #aaa;
}

/* Model selection rows */
.model-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.model-row label {
  font-size: 13px;
  font-weight: 500;
  min-width: 160px;
}
.model-row select {
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
}

.section_information {
  color: #aaa;
  margin-top: 10px;
  padding-bottom: 20px;
  margin-bottom: 10px;
  font-size: 14px;
  border-bottom: 1px solid #aaa;
}

/* Placeholder for upcoming sections */
.placeholder-card {
  background: #fff;
  border: 1px dashed #ddd;
  border-radius: 8px;
  padding: 48px 24px;
  text-align: center;
  color: #aaa;
  font-size: 14px;
}
.placeholder-card strong {
  display: block;
  font-size: 16px;
  color: #bbb;
  margin-bottom: 6px;
}

/* Market tabs (within product section) */
.tab-btn {
  background: none;
  border: none;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: #888;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition:
    color 0.15s,
    border-color 0.15s;
}

.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
}

/* Fields */
.field-block,
.csv-fields-card,
.il-image-card,
.il-solution-panel,
.settings-section {
  background: #fff;
  border: 1px solid #e5e3df;
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: visible;
}
.csv-fields-card {
  margin-bottom: 24px;
}
.field-block.empty {
  display: none;
}

.field-header,
.csv-fields-header {
  padding: 12px 16px;
  background: #f9f8f6;
  border-bottom: 1px solid #e5e3df;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #555;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.field-toggle-html-btn {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  color: #999;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.field-toggle-html-btn:hover {
  background: rgba(0,0,0,0.08);
  color: #555;
}
.field-toggle-html-btn.active {
  background: #e3f2fd;
  color: #1976d2;
}
.field-body {
  padding: 16px;
  font-size: 14px;
  line-height: 1.6;
}
.field-body[contenteditable="true"] {
  outline: none;
  border: 1px solid #e5e3df;
  border-radius: 8px;
  min-height: 100px;
}
.field-body[contenteditable="true"]:focus {
  border-color: #333;
}
.field-body img {
  max-width: 100%;
  height: auto;
}
.field-body p {
  margin-bottom: 8px;
}
.field-body h2,
.field-body h3 {
  margin: 12px 0 6px;
  font-size: 15px;
}
.field-body ul,
.field-body ol {
  margin-left: 18px;
  margin-bottom: 8px;
}
.field-body hr {
  border: none;
  border-top: 1px solid #e5e3df;
  margin: 12px 0;
}

/* Key ingredients */
.ingredient-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ingredient-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.ingredient-item img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #e5e3df;
  flex-shrink: 0;
}
.ingredient-item .ing-text strong {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}
.ingredient-item .ing-text span {
  font-size: 13px;
  color: #555;
}

/* Variants */
.variant-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.variant-chip {
  background: #f4f3f1;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 13px;
}
.variant-chip .price {
  color: #777;
  margin-left: 6px;
  font-size: 12px;
}

/* CSV required fields panel */
.csv-fields-body {
  padding: 16px;
}
.csv-fields-row,
.news-csv-market-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}
.csv-fields-row {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.news-csv-market-row {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.csv-field-group input {
  min-width: 0;
  width: 100%;
}
.csv-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.csv-field-group label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #888;
}
.csv-field-group input.required-empty {
  border-color: #f59e0b;
}
.csv-field-group input.input-missing {
  border-color: #ef4444;
  outline: none;
}
.csv-field-group input.csv-barcode-missing {
  border-color: #f59e0b;
  background: #fffbeb;
}
.csv-field-group input.input-missing:focus {
  border-color: #ef4444;
}
.input-missing-msg {
  color: #ef4444;
  font-size: 11px;
  margin-top: 2px;
}
.csv-field-group input.csv-master-field {
  background: #f7f7f7;
  color: #666;
  cursor: default;
  border-radius: 6px;
}
.csv-fields-row-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #bbb;
  margin: 16px 0 6px;
}
.csv-fields-row-label:first-child {
  margin-top: 0;
}
.csv-field-required {
  color: #f59e0b;
}

input[type="checkbox"] {
  accent-color: #1a1a1a;
}

.zip-download-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.download-csv-btn {
  background: #fff;
  color: #1a1a1a;
  border: 1px solid #1a1a1a;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.15s,
    color 0.15s;
}
.download-csv-btn:hover:not(:disabled) {
  background: #1a1a1a;
  color: #fff;
}
.download-csv-btn:disabled {
  border-color: #ccc;
  color: #bbb;
  cursor: not-allowed;
}

label.il-upload-zone {
  display: inline-block;
  background: #f5f5f5;
  color: #1a1a1a;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
  margin-bottom: 0;
}

.il-upload-zone:hover {
  background: #efefef;
  border-color: #999;
}
.il-upload-zone::before {
  content: "↑ ";
  margin-right: 4px;
}

/* Results section — visible on load (shows empty state placeholder until translation runs) */

/* Loading overlay */
.loading-state {
  text-align: center;
  padding: 48px 24px;
  display: none;
  flex-direction: column;
  align-items: center;
}
.loading-state .big-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #e5e3df;
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}
.loading-state p {
  font-size: 14px;
  color: #666;
}
.loading-state .step {
  font-size: 12px;
  color: #999;
  margin-top: 6px;
}
button.abort-btn {
  margin-top: 12px;
  margin-left: auto;
  margin-right: auto;
  padding: 6px 16px;
  background: transparent;
  border: 1px solid #c0392b;
  color: #c0392b;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  display: block;
}
button.abort-btn:hover {
  background: #fdf2f2;
}

/* Image localisation — per-image card */
.il-image-card {
  padding: 20px;
  margin-bottom: 20px;
}
.il-card-header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0eeeb;
  min-width: 0;
}
.il-card-header > div {
  min-width: 0;
  overflow: hidden;
}
.il-card-header > div {
  min-width: 0;
  overflow: hidden;
}
.il-card-thumb {
  height: 72px;
  width: 72px;
  max-width: 72px;
  border: 1px solid #e5e3df;
  border-radius: 4px;
  flex-shrink: 0;
  object-fit: cover;
}
.il-card-keep-btn {
  align-self: flex-start;
  padding: 6px 12px;
  border: 1px solid #d1ccc7;
  background: #fafaf8;
  color: #666;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s;
  margin-bottom: 12px;
}
.il-card-keep-btn:hover {
  background: #f5f3f0;
  border-color: #999;
  color: #333;
}
.il-card-keep-btn:disabled {
  cursor: default;
  opacity: 0.6;
  background: #e8e6e2;
}

/* Image localisation — legacy thumb (still used if flagged strip rendered) */
.img-localise-thumb {
  cursor: pointer;
  border: 2px solid #e5e3df;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.img-localise-thumb:hover {
  border-color: #bbb;
}
.img-localise-thumb.selected {
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}
.img-localise-thumb img {
  height: 72px;
  width: 72px;
  object-fit: cover;
  display: block;
}

.il-brief-market-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.il-brief-tab-btn {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f7f6f4;
  cursor: pointer;
  color: #555;
}
.il-brief-tab-btn.active {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}
.il-brief-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.il-brief-table th {
  text-align: left;
  padding: 5px 8px;
  background: #f7f6f4;
  border: 1px solid #e5e3df;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
}
.il-brief-table td {
  padding: 5px 8px;
  border: 1px solid #e5e3df;
  vertical-align: top;
  color: #1a1a1a;
}
.il-brief-table tr:hover td {
  background: #faf9f7;
}
.il-brief-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid #ccc;
  vertical-align: middle;
  margin-right: 4px;
}
.il-brief-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.il-solution-panel {
  padding: 20px;
}
.il-solution-header {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f0eeeb;
}
.il-solution-title {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 3px;
}

/* Image card meta text */
.il-card-filename {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 2px;
}
.il-card-url {
  font-size: 11px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  margin-bottom: 6px;
}
.il-card-type-badge {
  display: none;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
}
.il-card-body {
  margin-top: 16px;
}
.il-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  margin-top: 16px;
}
.il-card-step {
  font-size: 12px;
  color: #999;
  display: block;
  margin-top: 8px;
}
.il-brief-btn {
  font-size: 12px;
  padding: 6px 14px;
}

/* Editable cells */
.il-brief-cell {
  cursor: text;
  outline: none;
}
.il-brief-cell:focus {
  background: #fffaed !important;
  outline: 1px solid #d4a574;
}

/* Fullscreen brief */
.il-brief-wrapper {
  position: relative;
}
.il-brief-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.il-brief-table-container {
  overflow-x: auto;
  max-height: none;
}

.il-brief-wrapper.il-brief-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: white;
  padding: 20px;
  margin: 0;
  border-radius: 0;
}
.il-brief-wrapper.il-brief-fullscreen .il-brief-table-container {
  height: calc(100vh - 80px);
  overflow-y: auto;
  border: 1px solid #e5e3df;
  border-radius: 4px;
}
.il-brief-wrapper.il-brief-fullscreen .il-brief-toolbar {
  margin-bottom: 16px;
}

/* LP CSV fields row */
.news-csv-market-row {
  width: 100%;
}
.news-csv-field-label,
.mm-info-label {
  font-size: 11px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 4px;
}
.news-csv-field-input,
.csv-field-group input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  box-sizing: border-box;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.news-csv-field-input:focus,
.csv-field-group input:focus {
  border-color: #333;
}

/* LP body panel */
.news-panel-label,
.mm-section-label {
  font-size: 11px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.news-body-editable,
.mm-editable {
  padding: 16px;
  border: 1px solid #e5e3df;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.7;
  outline: none;
}
.news-body-editable {
  min-height: 200px;
}
.mm-editable {
  min-height: 40px;
  padding: 12px 14px;
}
.mm-editable:focus {
  border-color: #333;
}
.news-panel-wrap {
  margin-bottom: 16px;
}

/* Download CSV button row */
.tab-download-row {
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* LP no-content message */
.tab-empty-msg {
  color: #999;
  font-size: 14px;
}

/* LP image localisation section card header */
.il-localise-section-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 14px;
}

/* LP article pipeline — body images constrained to container */
#news-tab-UK img,
#news-tab-KR img,
#news-tab-TW img,
#news-tab-HK img,
#news-tab-US img {
  max-width: 100%;
  height: auto;
}

/* LP article pipeline — TBD and image placeholders */
.add-image-placeholder {
  display: block;
  padding: 20px;
  margin: 12px 0;
  background: #f0f9ff;
  border: 2px dashed #93c5fd;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1e40af;
  text-align: center;
}
.tbd-price,
.link-tbd {
  background: #fef9c3;
  color: #854d0e;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.9em;
}

/* ─── Mail magazine ────────────────────────────────────────────────────────── */

.mm-section {
  margin-bottom: 20px;
}
.mm-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mm-tbd {
  background: #fef9c3;
  color: #854d0e;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.mm-pass-through {
  background: #e0f2fe;
  color: #0369a1;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.mm-img-download {
  font-size: 10px;
  font-weight: 600;
  color: #0369a1;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
}
.mm-img-download:hover {
  text-decoration: underline;
}
.mm-inline-editable {
  display: inline-block;
  padding: 2px 6px;
  border: 1px dashed #ccc;
  border-radius: 4px;
  min-width: 80px;
  font-size: 13px;
  outline: none;
}
.mm-inline-editable:focus {
  border-color: #333;
  border-style: solid;
}
.mm-product-block {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid #e5e3df;
  border-radius: 8px;
  background: #fafaf9;
}
.mm-product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mm-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  flex-wrap: wrap;
}
.mm-info-label {
  min-width: 60px;
  letter-spacing: 0.04em;
}
.mm-info-note {
  font-size: 11px;
  color: #aaa;
}
.mm-banners {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mm-banner-item {
  border: 1px solid #e5e3df;
  border-radius: 8px;
  overflow: hidden;
}
.mm-banner-meta {
  padding: 8px 12px;
  background: #fafaf9;
  font-size: 12px;
}

.mm-content-editable {
  min-height: 300px;
  font-size: 12px;
  font-family: monospace;
  white-space: pre-wrap;
  line-height: 1.5;
}

/* ─── App footer + language switcher ─── */
/* Mobile-only switcher inside the nav menu; the desktop switcher is the footer. */
.nav-lang {
  display: none;
}

.app-footer {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 24px 40px;
  border-top: 1px solid #e5e3df;
  display: flex;
  justify-content: flex-end;
}

.footer-lang {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-lang-label {
  font-size: 12px;
  color: #999;
  font-weight: 500;
}

.lang-switcher {
  display: inline-flex;
  border: 1px solid #e5e3df;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.lang-btn {
  background: none;
  border: none;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: #888;
  font-family: inherit;
  transition:
    color 0.15s,
    background 0.15s;
}

.lang-btn + .lang-btn {
  border-left: 1px solid #e5e3df;
}

.lang-btn:hover {
  color: #1a1a1a;
}

.lang-btn.active {
  background: #1a1a1a;
  color: #fff;
  font-weight: 700;
}

/* ─── Mobile overrides (placed last so they win the cascade over the base
   rules above; media queries do not add specificity) ─── */
@media (max-width: 600px) {
  /* The bottom footer sits below the fold on mobile; surface the language
     switcher inside the hamburger menu instead (see .nav-lang in Header). */
  .app-footer {
    display: none;
  }
  .nav-lang {
    display: flex;
    justify-content: flex-start;
    padding: 12px 16px 4px;
    margin-top: 4px;
    border-top: 1px solid #e5e3df;
  }
  /* iOS Safari zooms the page when a focused form control has font-size < 16px.
     Force 16px on mobile to suppress the auto-zoom. !important is needed to beat
     the many higher-specificity 14px input rules above. */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}