:root {
  --lp-ink: #101614;
  --lp-sidebar: #111815;
  --lp-sidebar-soft: #1a2420;
  --lp-canvas: #f4f6f4;
  --lp-surface: #ffffff;
  --lp-raised: #fbfcfa;
  --lp-text: #17211e;
  --lp-muted: #66736d;
  --lp-line: #dce3df;
  --lp-accent: #0b9a68;
  --lp-accent-strong: #087b55;
  --lp-accent-soft: #e4f7ee;
  --lp-warm: #c87622;
  --lp-facebook: #3976bf;
  --lp-radius-sm: 8px;
  --lp-radius-md: 12px;
  --lp-radius-lg: 18px;
  --lp-shadow: 0 12px 30px rgba(18, 30, 25, .08);
}
body { background: var(--lp-canvas); color: var(--lp-text); font-size: 15px; }
h1, h2, h3 { color: var(--lp-text); font-weight: 800; letter-spacing: 0; }
h1 { font-size: clamp(30px, 3vw, 44px); line-height: 1.04; }
h2 { font-size: clamp(20px, 2vw, 26px); }
p { color: var(--lp-muted); }
a { color: var(--lp-accent-strong); }
button, .button { border-radius: var(--lp-radius-sm); background: var(--lp-accent); box-shadow: none; font-weight: 760; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
button:hover, .button:hover { background: var(--lp-accent-strong); transform: translateY(-1px); }
.button-secondary { color: var(--lp-text); background: var(--lp-surface); border-color: var(--lp-line); }
.button-ghost { color: var(--lp-muted); }
input, textarea, select { border-color: var(--lp-line); border-radius: var(--lp-radius-sm); background: var(--lp-surface); min-height: 44px; }
textarea { min-height: 132px; }
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible { outline-color: rgba(11, 154, 104, .28); }
.app-nav { background: var(--lp-sidebar); border: 0; padding: 24px 14px 18px; color: #e5ede9; }
.nav-brand { padding: 0 10px; }
.brand { color: inherit; font-size: 21px; }
.brand:before { background: var(--lp-accent); border-radius: 9px; box-shadow: 0 0 0 5px rgba(11, 154, 104, .13); }
.nav-brand p { color: #9baaa3; line-height: 1.45; margin: 14px 0 28px; }
.app-nav nav { gap: 5px; }
.app-nav nav a { color: #bdc9c3; min-height: 46px; border-radius: 9px; padding: 10px; gap: 11px; }
.nav-icon { flex: 0 0 19px; width: 19px; height: 19px; }
.app-nav nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.app-nav nav a[aria-current=page] { background: var(--lp-accent); color: #fff; box-shadow: 0 7px 18px rgba(3, 60, 39, .25); }
.nav-footer { border-top: 1px solid rgba(255,255,255,.1); padding: 15px 2px 0; }
.nav-help { color: #bdc9c3; font-weight: 700; padding: 8px 10px; }
.nav-logout .button { width: 100%; justify-content: flex-start; color: #bdc9c3; }
.app-main { padding: 42px 42px 56px; }
.page { max-width: 1180px; }
.page-wide { max-width: 1380px; }
.page-header { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--lp-line); }
.page-header p { max-width: 680px; font-size: 16px; }
.card, .metric, .attention-list li, .activity-list li, .listing-row, .gallery figure, .analysis-processing, .empty-state,
.workflow-card, .readiness-card, .usage-card, .empty-inline { border-color: var(--lp-line); border-radius: var(--lp-radius-md); box-shadow: 0 1px 2px rgba(17, 27, 22, .03); }
.card { padding: 22px; }
.summary-grid { gap: 12px; }
.metric { padding: 18px; border-top: 3px solid var(--lp-accent); background: var(--lp-surface); }
.metric strong { font-size: 30px; }
.dashboard-action-grid { gap: 18px; }
.workflow-card, .readiness-card { padding: 26px; border-radius: var(--lp-radius-lg); }
.workflow-card { background: var(--lp-ink); color: #f4f8f5; border: 0; }
.workflow-card h2, .workflow-card p { color: inherit; }
.workflow-card p { color: #b8c8c0; }
.workflow-card .eyebrow { color: #8ae4bc; }
.workflow-card li { background: rgba(255,255,255,.09); color: #f4f8f5; }
.readiness-card { background: linear-gradient(145deg, #fff 0%, #f6fbf8 100%); }
.listing-table { gap: 10px; }
.listing-head { padding: 0 14px 5px; }
.listing-row { min-height: 76px; padding: 12px; background: var(--lp-surface); transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.listing-row:hover { border-color: #b4d7c8; box-shadow: var(--lp-shadow); transform: translateY(-1px); }
.listing-row img, .thumb-placeholder { border-radius: 10px; background: linear-gradient(145deg, #d8e1dd, #f6f8f7); }
.product-thumb-placeholder, .product-list-thumbnail.product-thumb-placeholder { background: linear-gradient(145deg, #dbe7e0 0%, #f6f8f7 100%); position: relative; overflow: hidden; }
.product-thumb-placeholder:after, .product-list-thumbnail.product-thumb-placeholder:after { content: ""; position: absolute; inset: 28% 23% 20%; border: 2px solid #8ba297; border-radius: 5px; }
.gallery { gap: 16px; }
.gallery figure { padding: 10px; background: var(--lp-surface); border-radius: var(--lp-radius-md); }
.gallery img, .thumbs img { border-radius: 10px; }
.product-photo-upload { background: var(--lp-raised); border-style: dashed; }
.photo-source-button { min-width: 160px; }
.workflow { gap: 8px; }
.workflow-step { border-radius: var(--lp-radius-sm); border-color: var(--lp-line); background: var(--lp-surface); min-height: 54px; display: flex; align-items: center; }
.workflow-step.active { background: var(--lp-accent-soft); border-color: #a9e4ca; color: var(--lp-accent-strong); }
.workflow-step.done { background: #eff8f2; border-color: #c2e6ce; }
.analysis-processing { border-left: 4px solid var(--lp-accent); box-shadow: var(--lp-shadow); padding: 24px; }
.analysis-progress { background: #d9e8e0; }
.analysis-progress span { background: var(--lp-accent); }
.analysis-steps li { border-radius: var(--lp-radius-sm); }
.suggestion-state-suggested { color: #087b55; background: var(--lp-accent-soft); border-radius: 6px; padding: 4px 7px; display: inline-flex; }
.suggestion-state-missing { color: #9a5a12; background: #fff3df; border-radius: 6px; padding: 4px 7px; display: inline-flex; }
.profile-form { max-width: 760px; margin-top: 24px; }
.profile-location { margin: 6px 0 4px; padding: 18px; border: 1px solid var(--lp-line); border-radius: var(--lp-radius-md); background: var(--lp-raised); }
.profile-location legend { padding: 0 6px; color: var(--lp-text); font-weight: 800; }
.profile-location > p { margin: 0 0 16px; }
.profile-location-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.marketplace-profile-default { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: baseline; margin: 12px 0; padding: 12px; border: 1px solid #b9e4ce; border-radius: 8px; background: var(--lp-accent-soft); }
.marketplace-profile-default small { grid-column: 2; color: var(--lp-accent-strong); font-weight: 700; }
.marketplace-location-override { margin: 10px 0; }
.marketplace-location-override summary { cursor: pointer; color: var(--lp-accent-strong); font-weight: 750; }
.editor-shell { gap: 30px; }
.editor-side .card { background: #f8faf8; }
.marketplace-workspace { margin: 0 0 24px; border: 1px solid var(--lp-line); border-radius: var(--lp-radius-lg); padding: 22px; background: var(--lp-surface); }
.workspace-header { border-bottom: 1px solid var(--lp-line); padding-bottom: 18px; }
.marketplace-toggles { gap: 10px; }
.marketplace-toggle { border-radius: 10px; border-color: var(--lp-line); background: var(--lp-raised); }
.marketplace-card { border-radius: var(--lp-radius-md); border-color: var(--lp-line); box-shadow: none; }
.marketplace-card:hover { border-color: #b2d7c7; }
.marketplace-card h3 { font-size: 19px; }
.marketplace-checklist li { border-radius: 8px; }
.marketplace-shared-checklist { margin: 20px 0; padding: 18px; border: 1px solid var(--border, #d9dee6); border-radius: 8px; background: var(--surface, #fff); }
.marketplace-shared-checklist h3 { margin: 0 0 12px; font-size: 16px; }
.marketplace-preview, .marketplace-preview-card { border-radius: var(--lp-radius-lg); overflow: hidden; }
.auth-main { background: radial-gradient(circle at top left, #e5f8ef 0, transparent 32%), var(--lp-canvas); }
.auth-card { border-radius: var(--lp-radius-lg); box-shadow: var(--lp-shadow); border-color: var(--lp-line); }
.mobile-bottom-nav { display: none; }
@media (max-width: 760px) {
  .mobile-topbar { background: var(--lp-sidebar); color: #fff; border: 0; padding: 13px 16px; }
  .mobile-topbar .brand { color: #fff; font-size: 18px; }
  .mobile-topbar .brand:before { width: 22px; height: 22px; margin-right: 7px; border-radius: 7px; }
  .menu-button, .mobile-create { min-height: 36px; background: rgba(255,255,255,.09); color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; padding: 7px 10px; font-weight: 750; }
  .mobile-create { text-decoration: none; }
  .app-main { padding: 24px 16px 94px; }
  .mobile-bottom-nav { position: fixed; z-index: 28; inset: auto 0 0; display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); background: rgba(17,24,21,.97); border-top: 1px solid rgba(255,255,255,.12); }
  .mobile-bottom-nav a { min-height: 52px; display: grid; place-items: center; gap: 2px; color: #b8c5be; font-size: 11px; font-weight: 750; text-decoration: none; }
  .mobile-bottom-nav .nav-icon { width: 19px; height: 19px; }
  .mobile-bottom-nav a[aria-current=page] { color: #86e6bb; }
  .page-header { gap: 16px; }
  .page-header h1 { font-size: 31px; }
  .marketplace-workspace { padding: 16px; margin-left: -2px; margin-right: -2px; }
  .marketplace-cards { grid-template-columns: 1fr; }
  .profile-location-grid { grid-template-columns: 1fr; }
  .marketplace-profile-default { grid-template-columns: 1fr; }
  .marketplace-profile-default small { grid-column: auto; }
  .gallery { gap: 10px; }
  .workflow-step { min-height: 48px; font-size: 13px; }
}
@media (max-width: 430px) {
  .app-main { padding-left: 12px; padding-right: 12px; }
  .card, .workflow-card, .readiness-card { padding: 18px; }
  .listing-row { min-height: 64px; }
  .photo-source-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .photo-source-button { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { transition: none !important; }
}