/* Shared visual finish. Functional layouts and catalogue content stay in their
   existing modules; this layer unifies surfaces, borders and interaction states. */
:root {
  --bg: #0e1420;
  --surface: #172131;
  --raised: #202d41;
  --line: #2e3c52;
  --field-line: #627493;
  --muted: #b4c0d3;
  --ink: #f3f6fc;
  --accent: #a4bbff;
  --accent-bg: #1b2b4b;
  --accent-border: #425e96;
  --primary: #4169e1;
  --warm: #e3a06b;
  --warm-border: #93694d;
  --radius: 24px;
  --radius-control: 14px;
  --edge-light: inset 0 1px 0 rgba(215, 230, 255, .09),
    inset 1px 0 0 rgba(175, 200, 255, .04), inset 0 -1px 0 rgba(2, 7, 17, .28);
  --shadow-card: var(--edge-light), 0 2px 3px rgba(2, 7, 17, .14), 0 8px 28px rgba(2, 7, 17, .17);
  --shadow-raised: var(--edge-light), 0 16px 40px rgba(2, 7, 17, .28);
  --shadow-dialog: var(--edge-light), 0 24px 80px rgba(0, 0, 0, .48);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --motion-fast: 160ms;
  --motion-panel: 280ms;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body { background: var(--bg); }
h1, h2, .editorial {
  font-family: inherit;
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
h1 { font-size: clamp(2rem, 3.7vw, 2.9rem); }
h2 { font-size: 1.55rem; }
.brand-name { font-family: inherit; font-weight: 650; letter-spacing: -.04em; }
.brand-place { letter-spacing: .19em; }
.monogram {
  border-color: var(--accent-border);
  border-radius: 13px;
  background: var(--accent-bg);
  font-family: inherit;
  font-weight: 650;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.sidebar { border-right-color: var(--line); background: #111a29; }
.topbar { border-bottom-color: var(--line); background: rgba(14, 20, 32, .95); }
.top-label { letter-spacing: .1em; font-size: .75rem; }
.nav-btn { border-radius: 15px; font-weight: 550; }
.nav-btn.active { background: var(--accent-bg); color: var(--ink); }
.nav-btn.active svg { color: var(--accent); }
.page-head { margin-bottom: 28px; }
.page-head .eyebrow { font-size: .75rem; font-weight: 650; letter-spacing: .13em; }
.page-head .subtle { margin-top: 12px; line-height: 1.6; }
.section-head h2, .panel h2, .meetup-banner h2, .scan-heading h2 { font-size: 1.4rem; }

.feature, .review-card, .cigar-card, .form-panel, .panel, .stat, .humidor-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.feature { border-color: var(--accent-border); }
.feature-body { padding: 26px; }
.feature h2 { font-size: clamp(1.75rem, 2.5vw, 2.1rem); }
.feature-brand, .cigar-brand { font-weight: 600; }
.feature-note {
  border-left: 2px solid var(--warm-border);
  padding: 4px 0 4px 16px;
  line-height: 1.65;
  color: var(--muted);
}
.feature-photo.product-photo { background: radial-gradient(ellipse at 50% 65%, #24395b, #101827 80%); }
.review-card, .cigar-card, .stat, .humidor-item { border-radius: 20px; }
.review-text { line-height: 1.65; color: #dce5f3; }
.cigar-name { font-weight: 600; letter-spacing: -.02em; }
.cigar-card .index, .stat b, .rating-field output {
  font-family: inherit;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}
.avatar { border-color: var(--line); background: var(--accent-bg); }
.profile-card .avatar { border-radius: 22px; }

.btn, .icon-btn, .languages select, input, select, textarea {
  border-radius: var(--radius-control);
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.btn, .icon-btn {
  background: var(--raised);
  border-color: var(--line);
  font-weight: 600;
}
.btn.primary {
  background: var(--primary);
  border-color: #6083ed;
  box-shadow: 0 4px 14px rgba(35, 68, 166, .24), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.btn.quiet { background: transparent; }
.btn:hover { filter: none; }
.icon-btn { min-width: 46px; min-height: 46px; }
.icon-btn.selected { background: var(--accent-bg); border-color: #6581bb; color: var(--accent); }
input, select, textarea {
  border: 1px solid var(--field-line);
  background: #111a29;
  color: var(--ink);
  font-size: 1rem;
}
input::placeholder, textarea::placeholder { color: #a7b6ce; opacity: 1; }
input[type="range"] { border: 0; background: transparent; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.languages select {
  background: var(--accent-bg);
  border-color: var(--accent-border);
  border-radius: 999px;
  min-height: 46px;
}
.search input { background: var(--surface); border-radius: 18px; }
.chip, .filter, .note-option { border-radius: 999px; }
.chip { padding: 5px 11px; background: #223047; border-color: transparent; }
.note-option { background: var(--surface); border-color: var(--line); }
.filter.active, .note-option[aria-pressed="true"] {
  color: var(--ink);
  background: var(--accent-bg);
  border-color: #6581bb;
  box-shadow: inset 0 0 0 1px rgba(101, 129, 187, .15);
}
.badge, .country-mark, .demo-strip span { border-radius: 999px; }
.badge { padding: 6px 11px; background: rgba(14, 20, 32, .92); }
.demo-strip { line-height: 1.6; }
.advertisement-slot {
  background: #141e2d;
  border: 1px dashed #3b4d68;
  border-radius: 20px;
}
.advertisement-label { font-size: .75rem; letter-spacing: .12em; }
.empty { border-color: #40516c; border-radius: 20px; background: #131d2c; }
.meetup-banner, .scan-section {
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  background: linear-gradient(125deg, #1c2b48, var(--surface) 78%);
  box-shadow: var(--shadow-card);
}
.scan-mark { border-radius: 16px; background: #243454; }
.scan-match, .similar-card {
  background: var(--surface);
  border-color: var(--line);
  border-radius: 18px;
}
.scan-preview { border-radius: 18px; }
.catalogue-notice, .monthly-preview, :root .cigar-blend {
  background: #1a2944;
  border-color: var(--accent-border);
  border-radius: 18px;
}
.catalogue-sync-error { border-radius: 16px; border-color: var(--warm-border); }
.similar-toggle { border-color: var(--accent-border); }
.similar-toggle[aria-expanded="true"] { background: var(--accent-bg); }
.record-source { border-color: var(--line); color: var(--muted); }
.cigar-photo-stage { border-radius: 20px; border-color: #dbe2ee; background: #fff; }
.cigar-photo-missing { border-radius: 18px; background: var(--raised); }
.editor-actions { background: var(--surface); border-color: var(--line); }
dialog {
  border: 1px solid #415474;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow-dialog);
}
dialog::backdrop { background: rgba(5, 10, 19, .8); backdrop-filter: blur(8px); }
.dialog-title { letter-spacing: -.04em; }
.dialog-head .icon-btn { border-radius: 50%; }
#toast { border-radius: 16px; box-shadow: var(--shadow-raised); }

/* Motion follows actions. No idle loops, delayed controls or hidden content. */
.btn, .icon-btn, .nav-btn, .filter, .note-option, .similar-card,
.link-button, .like, .avatar-button {
  transition: transform var(--motion-fast) var(--ease-out),
    background-color 180ms ease, border-color 180ms ease,
    color 180ms ease, box-shadow 180ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:not(:disabled):active, .icon-btn:not(:disabled):active,
.nav-btn:active, .filter:active, .note-option:active,
.similar-card:active, .avatar-button:active { transform: scale(.97); }
.like:not(:disabled):active, .link-button:not(:disabled):active { transform: scale(.96); }
.nav-btn svg, .icon-btn svg, .like svg, .link-button svg {
  transition: transform 220ms var(--ease-out), color 180ms ease;
}
.cigar-card, .review-card, .humidor-item {
  transition: transform 240ms var(--ease-out), border-color 220ms ease, box-shadow 220ms ease;
}
.scan-results { animation: panel-enter var(--motion-panel) var(--ease-out); }
#toast {
  transform: translate(-50%, 12px);
  transition: opacity 200ms ease, transform var(--motion-panel) var(--ease-out);
}
#toast.visible { transform: translate(-50%, 0); }
dialog[open] { animation: dialog-enter var(--motion-panel) var(--ease-out); }
dialog[open]::backdrop { animation: backdrop-enter 220ms ease; }
@keyframes panel-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes dialog-enter {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes backdrop-enter { from { opacity: 0; } to { opacity: 1; } }

/* Supporting browsers also keep native dialogs visible during their exit. */
@supports (transition-behavior: allow-discrete) and (overlay: auto) {
  dialog {
    opacity: 0;
    transform: translateY(16px) scale(.985);
    transition: opacity 200ms ease, transform var(--motion-panel) var(--ease-out),
      display var(--motion-panel) allow-discrete, overlay var(--motion-panel) allow-discrete;
  }
  dialog[open] { opacity: 1; transform: translateY(0) scale(1); animation: none; }
  dialog::backdrop {
    opacity: 0;
    transition: opacity 220ms ease, display var(--motion-panel) allow-discrete,
      overlay var(--motion-panel) allow-discrete;
  }
  dialog[open]::backdrop { opacity: 1; animation: none; }
  @starting-style {
    dialog[open] { opacity: 0; transform: translateY(16px) scale(.985); }
    dialog[open]::backdrop { opacity: 0; }
  }
}

@media (hover: hover) {
  .btn:not(:disabled):hover, .icon-btn:not(:disabled):hover { background: #2a3a54; border-color: #5a7197; }
  .btn.primary:not(:disabled):hover { background: #3d63d2; border-color: #8ba7ff; }
  .nav-btn:hover { background: var(--raised); }
  .similar-card:hover { background: #22324d; border-color: #6480b5; }
  .languages select:hover { border-color: var(--accent); }
  .cigar-photo-stage .btn:not(:disabled):hover { background: #dfe8ff; border-color: #486297; }
}
@media (hover: hover) and (pointer: fine) {
  .cigar-card:hover, .review-card:hover, .humidor-item:hover {
    transform: translateY(-3px);
    border-color: #526c97;
    box-shadow: var(--edge-light), 0 14px 32px rgba(2, 7, 17, .24);
  }
  .link-button:hover svg { transform: translateX(3px); }
  .like:hover svg { transform: scale(1.08); }
}
@media (max-width: 760px) {
  .topbar { padding: 14px 18px; gap: 12px; background: rgba(14, 20, 32, .96); }
  .brand-name { font-size: 1.15rem; }
  .brand-place { font-size: .6875rem; }
  .main { padding: 24px 18px calc(138px + env(safe-area-inset-bottom)); }
  .page-head h1 { font-size: clamp(2rem, 6.5vw, 2.4rem); line-height: 1.15; }
  .page-head .subtle { font-size: .9375rem; }
  .page-head { margin-bottom: 24px; }
  .feature-body { padding: 22px; }
  .feature h2 { font-size: 1.85rem; }
  .feature-note { font-size: .9375rem; }
  .catalog { gap: 14px; }
  .cigar-card-body { padding: 16px; }
  .cigar-brand, .cigar-card .meta, .cigar-card-actions .link-button { font-size: .875rem; }
  .cigar-name { font-size: 1.08rem; }
  .cigar-card-actions { flex-wrap: wrap; row-gap: 8px; }
  .cigar-card-actions .icon-btn { min-width: 44px; }
  .form-panel, .panel { padding: 22px; }
  .dialog-body { padding: 24px 20px; }
  .dialog-title { font-size: 1.8rem; }
  .mobile-nav {
    left: 12px;
    right: 12px;
    bottom: max(10px, env(safe-area-inset-bottom));
    padding: 6px;
    min-height: 76px;
    border: 1px solid #435674;
    border-radius: 23px;
    background: rgba(24, 35, 53, .97);
    box-shadow: var(--edge-light), 0 10px 32px rgba(0, 0, 0, .38);
  }
  .mobile-nav .nav-btn {
    border-radius: 17px;
    min-height: 62px;
    padding: 7px 2px;
    font-size: .75rem;
    line-height: 1.35;
    gap: 5px;
  }
  .mobile-nav .nav-btn.active { background: #2a416a; color: #e5edff; }
  .mobile-nav .nav-btn.review-nav svg { background: transparent; padding: 0; width: 23px; height: 23px; color: inherit; }
  #toast { bottom: calc(108px + env(safe-area-inset-bottom)); }
}
@media (max-width: 370px) {
  .topbar { padding: 12px 14px; }
  .brand-name { font-size: 1rem; }
  .main { padding-left: 14px; padding-right: 14px; }
  .feature-body, .form-panel, .panel { padding: 20px; }
  .mobile-nav { left: 8px; right: 8px; padding: 5px; }
}

/* A fine, upper-left highlight gives borders a restrained bevel. */
.feature, .review-card, .cigar-card, .form-panel, .panel, .stat, .humidor-item,
.scan-match, .similar-card, .cigar-photo-missing {
  border-color: #45556e #33435c #243147 #3c4f6c;
  box-shadow: var(--shadow-card);
}
.feature, .meetup-banner, .scan-section, .catalogue-notice, .monthly-preview,
:root .cigar-blend {
  border-color: #5c77a6 #425e96 #30466e #4c6390;
  box-shadow: var(--shadow-card);
}
dialog, .handoff-dialog-surface, .mobile-nav {
  border-color: #637899 #415474 #2b3b57 #4d6386;
}
.btn:not(.quiet), .icon-btn, .languages select {
  box-shadow: var(--edge-light), 0 2px 3px rgba(2, 7, 17, .2);
}
.btn:not(.quiet):not(.primary), .icon-btn {
  border-color: #50617d #3b4d69 #28374e #465b7b;
}
.btn.primary {
  border-color: #7c99f0 #6083ed #3455b6 #6a88e8;
  box-shadow: inset 0 1px 0 rgba(235, 242, 255, .2),
    inset 0 -1px 0 rgba(16, 37, 105, .22), 0 3px 0 rgba(9, 22, 60, .22),
    0 6px 16px rgba(35, 68, 166, .22);
}
.nav-btn.active, .filter.active, .note-option[aria-pressed="true"] {
  box-shadow: var(--edge-light), 0 2px 4px rgba(2, 7, 17, .12);
}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
textarea, select:not([data-language-picker]) {
  box-shadow: inset 0 2px 3px rgba(2, 7, 17, .22), 0 1px 0 rgba(210, 228, 255, .06);
}
.cigar-photo-stage {
  border-color: #eef2f9 #d4dce9 #bac7d9 #e2e9f4;
  box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(2, 7, 17, .12);
}
.advertisement-slot { box-shadow: var(--edge-light); }
.btn:not(:disabled):active, .icon-btn:not(:disabled):active {
  box-shadow: inset 0 2px 4px rgba(2, 7, 17, .22), 0 1px 0 rgba(210, 228, 255, .06);
}

/* Cover-to-main continuity: a short dissolve through two connected surfaces. */
.main {
  transition: transform 520ms cubic-bezier(.22,.8,.2,1);
}
.main.detail-underlay { transform: scale(.986); }
.handoff-copy {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
  user-select: none;
}
.handoff-copy, .handoff-copy * {
  pointer-events: none !important;
  transition: none !important;
  animation: none !important;
}
.handoff-dialog-copy { z-index: 60; }
.handoff-dialog-surface {
  overflow: hidden;
  color: var(--ink);
  border: 1px solid #415474;
  border-color: #637899 #415474 #2b3b57 #4d6386;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow-dialog);
}
#detail, #detail[open] {
  opacity: 1;
  transform: none;
  animation: none;
  transition: none;
}
#detail::backdrop { opacity: 1; transition: none; }
#detail[open]::backdrop { animation: backdrop-enter 480ms var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .btn:active, .icon-btn:active, .nav-btn:active, .filter:active, .note-option:active,
  .similar-card:active, .avatar-button:active, .like:active, .link-button:active,
  .cigar-card:hover, .review-card:hover, .humidor-item:hover,
  .link-button:hover svg, .like:hover svg, .main.detail-underlay { transform: none !important; }
  .handoff-copy { display: none; }
}