/* ═══════════════════════════════════════════════════════════════
   CropFco — Mobbin Inverted Dark Design System
   Based on DESIGN-mobbin.md (100% specification match)
   Black-and-White Inverted Polarity · Shadow-Free Gallery Chrome
   Stadium-Pill Controls (9999px) · 24px Cards · 30% Squircle
   Zero Shadows · Saans/Inter 650 Headings with Terminal Periods
═══════════════════════════════════════════════════════════════ */

:root {
  /* Colors from DESIGN-mobbin.md — POLARITY INVERTED FOR DARK THEME */
  --color-primary: #ffffff;             /* Primary CTA fill: White stadium pill */
  --color-on-primary: #141414;          /* Text on primary CTA: Near-black ink */
  --color-ink: #ffffff;                 /* Headlines & primary text: Pure White */
  --color-ink-soft: #e6e6e6;            /* Secondary text */
  --color-text-muted: #a3a3a3;          /* Supporting copy */
  --color-text-faint: #666666;          /* Placeholders, disabled */
  
  --color-canvas: #141414;              /* Mobbin ink becomes page canvas */
  --color-canvas-soft: #1f1f1f;         /* 6% lift over canvas: Featured cards, nav pill */
  --color-field: #262626;               /* 8% lift: Form inputs fill without borders */
  --color-hairline-soft: #262626;       /* Faintest card outline */
  --color-hairline: #333333;            /* Control borders (button-outline, etc.) */
  --color-accent: #0066ff;              /* Mobbin Electric Blue: Commercial signals */

  /* Geometry from DESIGN-mobbin.md */
  --rounded-none: 0px;
  --rounded-sm: 16px;                   /* Inputs, video tiles, FAQ rows */
  --rounded-md: 24px;                   /* Content cards, 24px card geometry */
  --rounded-full: 9999px;               /* Stadium pill: every button, toggle, badge */

  /* Spacing from DESIGN-mobbin.md */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  /* Typography: Inter at Mobbin variable weight specs (650 headings, 450 body, 300 light, 600 links) */
  --font-family: 'Inter', -apple-system, "Helvetica Neue", Arial, sans-serif;
  --weight-heading: 650;
  --weight-body: 450;
  --weight-light: 300;
  --weight-link: 600;

  --header-height: 64px;
  --sidebar-width: 360px;

  /* Compatibility aliases for ui.js modals */
  --text-primary: #ffffff;
  --text-secondary: #c5c2bb;
  --text-muted: #a3a3a3;
  --border-subtle: #262626;
  --bg-card: #1f1f1f;
  --bg-input: #262626;
}

/* ── BASE RESETS ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: var(--font-family);
  background: var(--color-canvas);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: 0; /* Natural tracking per Mobbin */
}

/* Custom Scrollbar - Clean & Minimal */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-hairline);
  border-radius: var(--rounded-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-faint);
}

/* ── 1. MOBBIN FLOATING TOP NAV ── */
.header-wrapper {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-height);
  background: var(--color-canvas);
  border-bottom: 1px solid var(--color-hairline-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-lg);
  z-index: 100;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.brand-link {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  color: var(--color-ink);
}

/* iOS-style 30% squircle */
.brand-squircle {
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: 30%; /* 30% squircle */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.brand-title {
  font-size: 18px;
  font-weight: var(--weight-heading);
  color: var(--color-ink);
  letter-spacing: 0;
}

/* Nav Stadium Pill (Mobbin nav-pill in canvas-soft #1f1f1f - Centered in screen) */
.nav-pill-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--color-canvas-soft);
  padding: 5px 8px;
  border-radius: var(--rounded-full);
}

.nav-link {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: var(--weight-link);
  padding: 8px 20px;
  border-radius: var(--rounded-full);
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-link:hover {
  color: var(--color-ink);
  background: rgba(255, 255, 255, 0.08);
}

/* Commercial link */
.nav-link-trade {
  color: var(--color-text-muted);
}
.nav-link-trade:hover {
  color: var(--color-ink);
  background: rgba(255, 255, 255, 0.08);
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Text Input: Mobbin text-input (borderless field fill with pill radius) */
.field-filename {
  width: 220px;
  height: 40px;
  background: var(--color-field);
  border: none;
  border-radius: var(--rounded-full);
  color: var(--color-ink);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: var(--weight-body);
  padding: 0 var(--space-md);
  outline: none;
  transition: box-shadow 0.15s ease;
}
.field-filename::placeholder {
  color: var(--color-text-faint);
}
.field-filename:focus {
  box-shadow: 0 0 0 2px var(--color-ink);
}

/* Button Primary: Mobbin button-primary (White stadium pill with near-black ink text) */
.btn-export {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--rounded-full);
  height: 40px;
  padding: 0 var(--space-lg);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: var(--weight-link);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  transition: opacity 0.15s ease;
}
.btn-export:hover {
  opacity: 0.9;
}
.btn-export:active {
  opacity: 0.8;
}

/* ── 2. WORKSPACE ── */
.workspace {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  display: flex;
  background: var(--color-canvas);
}

/* ── 3. SIDEBAR (Mobbin Gallery Controls) ── */
.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--color-canvas);
  border-right: 1px solid var(--color-hairline-soft);
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Section Headings: Mobbin heading-4 in sentence case with terminal period */
.section-title {
  font-size: 16px;
  font-weight: var(--weight-heading);
  color: var(--color-ink);
  line-height: 1.25;
  margin-bottom: var(--space-xs);
}

.section-desc {
  font-size: 13px;
  font-weight: var(--weight-body);
  color: var(--color-text-muted);
  line-height: 1.4;
  margin-bottom: var(--space-sm);
}

/* ── 4. AUTO-DETECT FEATURED CARD (Mobbin pricing-card-featured in canvas-soft) ── */
.auto-card {
  background: var(--color-canvas-soft); /* #1f1f1f */
  border-radius: var(--rounded-md);      /* 24px */
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.auto-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.badge-ai {
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 11px;
  font-weight: var(--weight-link);
  padding: 3px var(--space-sm);
  border-radius: var(--rounded-full);
}

/* Button Primary on Auto Card: White stadium pill */
.btn-auto-all {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--rounded-full);
  height: 42px;
  padding: 0 var(--space-md);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: var(--weight-link);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  transition: opacity 0.15s ease;
  width: 100%;
}
.btn-auto-all:hover {
  opacity: 0.9;
}
.btn-auto-all:active {
  opacity: 0.8;
}

/* Button Outline Group: Mobbin button-outline */
.auto-buttons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-xs);
}

.btn-auto-sub {
  background: var(--color-canvas);
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
  border-radius: var(--rounded-full);
  height: 36px;
  padding: 0 4px;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: var(--weight-link);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-auto-sub:hover {
  background: var(--color-field);
  border-color: var(--color-ink);
}

#auto-detect-status {
  font-size: 12px;
  font-weight: var(--weight-body);
  color: var(--color-ink);
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline-soft);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--rounded-full);
  text-align: center;
  line-height: 1.4;
}

/* ── 5. UPLOAD CARDS (Mobbin pricing-card style) ── */
.slots-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.upload-card {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--rounded-sm); /* 16px */
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  outline: none;
  position: relative;
}
.upload-card:hover {
  background: var(--color-canvas-soft);
  border-color: var(--color-text-faint);
}
.upload-card:focus-visible {
  border-color: var(--color-ink);
}
.upload-card.drag-over {
  background: var(--color-canvas-soft);
  border-color: var(--color-ink);
}
.upload-card.filled {
  border-color: var(--color-ink);
  background: var(--color-canvas);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-info {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.card-name {
  font-size: 14px;
  font-weight: var(--weight-heading);
  color: var(--color-ink);
}

.card-sub {
  font-size: 11px;
  font-weight: var(--weight-body);
  color: var(--color-text-muted);
  background: var(--color-canvas-soft);
  padding: 2px var(--space-xs);
  border-radius: var(--rounded-full);
}

.card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
}

/* Mobbin button-pill-soft */
.btn-icon {
  background: var(--color-canvas-soft);
  border: none;
  color: var(--color-ink);
  font-size: 13px;
  width: 32px;
  height: 32px;
  border-radius: var(--rounded-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.btn-icon:hover {
  background: var(--color-field);
}
.btn-crop {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.btn-crop:hover {
  opacity: 0.9;
}

/* Thumbnails */
.card-preview-wrap {
  margin-top: var(--space-sm);
}
.card-preview-wrap canvas {
  border-radius: var(--rounded-sm) !important;
  border: 1px solid var(--color-hairline) !important;
}

/* Button Toggle More Slots */
.btn-toggle-more {
  width: 100%;
  background: var(--color-canvas);
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
  border-radius: var(--rounded-full);
  padding: 10px var(--space-md);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: var(--weight-link);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  transition: all 0.15s ease;
}
.btn-toggle-more:hover {
  background: var(--color-canvas-soft);
  border-color: var(--color-ink);
}

/* ── 6. TOOL PANELS (Mobbin 24px cards) ── */
.tool-panel {
  background: var(--color-canvas-soft);
  border-radius: var(--rounded-md); /* 24px */
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Switch (Mobbin black-and-white stadium switch) */
.switch-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 14px;
  font-weight: var(--weight-heading);
  color: var(--color-ink);
}

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--color-hairline);
  transition: background-color 0.2s ease;
  border-radius: var(--rounded-full);
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: var(--color-ink);
  transition: transform 0.2s ease;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: var(--color-primary);
}
input:checked + .slider:before {
  transform: translateX(20px);
  background-color: var(--color-on-primary);
}

/* Mobbin Form Inputs: text-input (field fill, rounded.sm 16px, borderless at rest) */
.field-input {
  width: 100%;
  background: var(--color-field);
  border: none;
  border-radius: var(--rounded-sm); /* 16px */
  color: var(--color-ink);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: var(--weight-body);
  padding: var(--space-sm) var(--space-md);
  outline: none;
  transition: box-shadow 0.15s ease;
}
.field-input::placeholder {
  color: var(--color-text-faint);
}
.field-input:focus {
  box-shadow: 0 0 0 2px var(--color-ink);
}

/* Tag Chips: Mobbin button-outline pills */
.tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}
.tag-chip {
  font-size: 12px;
  font-weight: var(--weight-link);
  padding: 4px var(--space-sm);
  border-radius: var(--rounded-full);
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  color: var(--color-ink);
  cursor: pointer;
  transition: all 0.15s ease;
}
.tag-chip:hover {
  border-color: var(--color-ink);
}

/* Border Controls Grid */
.border-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.border-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.border-color-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.border-color {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--color-hairline);
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
}

.border-width {
  width: 60px;
  background: var(--color-field);
  color: var(--color-ink);
  border: none;
  border-radius: var(--rounded-full);
  text-align: center;
  font-size: 13px;
  font-weight: var(--weight-link);
  padding: 6px var(--space-xs);
  outline: none;
}
.border-width:focus {
  box-shadow: 0 0 0 2px var(--color-ink);
}

.slot-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-hairline-soft);
}

.slot-check-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-ink);
  cursor: pointer;
  font-weight: var(--weight-body);
}
.slot-check-item input[type="checkbox"] {
  accent-color: var(--color-primary);
  width: 16px;
  height: 16px;
}

/* ── 7. CANVAS VIEWPORT (Mobbin Dark Gallery Wall) ── */
.canvas-area {
  flex: 1;
  background: #0d0d0d; /* Gallery Wall in deep dark */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  padding: var(--space-lg);
}

.canvas-wrap {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--rounded-md); /* 24px */
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  background: var(--color-canvas);
  /* Mobbin is 100% shadow-free */
}

#main-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Empty State */
.canvas-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: var(--color-canvas);
  pointer-events: none;
}

.empty-squircle {
  width: 64px;
  height: 64px;
  border-radius: 30%; /* 30% squircle */
  background: var(--color-canvas-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.empty-title {
  font-size: 18px;
  font-weight: var(--weight-heading);
  color: var(--color-ink);
}

.empty-text {
  font-size: 14px;
  color: var(--color-text-muted);
  max-width: 320px;
  text-align: center;
  line-height: 1.4;
}

/* Floating Stage HUD: Mobbin stadium pill */
.stage-hud {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 8px var(--space-lg);
  background: var(--color-canvas-soft);
  border: 1px solid var(--color-hairline);
  border-radius: var(--rounded-full);
  z-index: 10;
  pointer-events: auto;
}

.hud-item {
  font-size: 13px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.hud-item strong {
  color: var(--color-ink);
  font-weight: var(--weight-heading);
}
.hud-divider {
  width: 1px;
  height: 14px;
  background: var(--color-hairline);
}

/* ── 8. MODALS (Mobbin Dialog Card in 24px) ── */
#crop-modal, #info-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
#crop-modal.hidden, #info-modal.hidden {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.modal-box {
  position: relative;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--rounded-md); /* 24px */
  width: min(92vw, 980px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-hairline-soft);
  flex-shrink: 0;
}

.modal-title {
  font-size: 16px;
  font-weight: var(--weight-heading);
  color: var(--color-ink);
}

.modal-close {
  background: var(--color-canvas-soft);
  border: none;
  color: var(--color-ink);
  font-size: 14px;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: var(--rounded-full);
  transition: background 0.15s ease;
}
.modal-close:hover {
  background: var(--color-hairline);
}

.modal-hint {
  padding: var(--space-xs) var(--space-lg);
  font-size: 13px;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-hairline-soft);
  background: var(--color-canvas-soft);
  flex-shrink: 0;
}

.modal-canvas-wrap {
  position: relative;
  flex: 1;
  overflow: auto;
  background: #0d0d0d;
  cursor: crosshair;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}

.modal-canvas-wrap img {
  display: block;
  max-width: 100%;
  max-height: 60vh;
  user-select: none;
  pointer-events: none;
  border-radius: var(--rounded-sm);
}

#crop-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-hairline-soft);
  background: var(--color-canvas);
  flex-shrink: 0;
}

.modal-btn-confirm {
  padding: 10px var(--space-lg);
  border-radius: var(--rounded-full);
  border: none;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: var(--weight-link);
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.modal-btn-confirm:hover {
  opacity: 0.9;
}
.modal-btn-confirm:disabled {
  background: var(--color-field);
  color: var(--color-text-faint);
  cursor: not-allowed;
}

.modal-btn-full, .modal-btn-cancel {
  padding: 10px var(--space-md);
  border-radius: var(--rounded-full);
  border: 1px solid var(--color-hairline);
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: var(--weight-link);
  cursor: pointer;
  transition: background 0.15s ease;
}
.modal-btn-full:hover, .modal-btn-cancel:hover {
  background: var(--color-canvas-soft);
}

.hidden {
  display: none !important;
}