/* Shared control finish. Blur stays on small controls and the optional guide,
   never on the live image or measurement overlays. Opaque fallbacks come first. */
:root {
  --control-radius: 999px;
  --glass-dark: #292d34;
  --glass-highlight: inset 0 1px 0 #ffffff30;
}
.button, .nav-scan, .primary:not(.shutter), #camera-retry,
.photo-import, .help-button, .secondary, .lens-caption button,
.oft-back, .oft-next { border-radius: var(--control-radius); }
.button, .nav-scan { transition: background 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out; }
.button-primary { background: var(--glass-dark); color: #fff; }
.button:active, .nav-scan:active { transform: scale(.98); }
.nav-scan, .button-outline {
  background: var(--glass-dark); border-color: transparent;
  box-shadow: var(--glass-highlight); color: #f5f5f2;
}
.hero-actions .text-action {
  min-height: 48px; padding: 0 17px; border-radius: var(--control-radius);
  background: var(--glass-dark); box-shadow: var(--glass-highlight);
}
.hero-actions .text-action:hover { background: #414751; text-decoration: none; }
.reference-sheet { border-radius: 24px; }
.stage { border-radius: 24px; }
.header-actions { gap: 12px; }
.help-button { padding: 0 15px; background: var(--glass-dark); box-shadow: var(--glass-highlight); }
.photo-import {
  padding: 0 15px; border-color: transparent; background: #262c35;
  box-shadow: var(--glass-highlight), 0 4px 16px #0003;
}
.secondary, .lens-caption button {
  background: var(--glass-dark); box-shadow: var(--glass-highlight);
}
.secondary:hover, .lens-caption button:hover { background: #414751; text-decoration: none; }
.primary:not(.shutter), #camera-retry { box-shadow: inset 0 1px 0 #fff9, 0 5px 16px #0002; }
.primary.shutter { box-shadow: 0 4px 20px #0003; }
.oft-dialog { border-radius: 30px; background: #262a32; box-shadow: inset 0 1px 0 #ffffff29, 0 24px 80px #0007; }
.oft-dialog::backdrop { background: #03050496; }
.oft-back, .oft-close { background: #ffffff0e; box-shadow: var(--glass-highlight); }
.oft-back:hover:not(:disabled), .oft-close:hover { background: #ffffff1c; }
.oft-next { box-shadow: inset 0 1px 0 #fff9, 0 4px 12px #0002; }
.oft-dialog .oft-dot { width: 44px; height: 44px; min-height: 44px; }
/* The fitting workspace uses the same shapes on a light surface. */
body[data-surface="studio"] button:not(.oft-dialog button),
body[data-surface="studio"] input[type=file]::file-selector-button { border-radius: var(--control-radius); min-height: 44px; }
body[data-surface="studio"] .lens-panel { border-radius: 24px; }
body[data-surface="studio"] .canvas-wrap,
body[data-surface="studio"] .outline-review svg,
body[data-surface="studio"] input[type=number],
body[data-surface="studio"] .proposal-select { border-radius: 14px; }
body[data-surface="studio"] .site-header .tutorial-trigger {
  padding: 0 16px; background: #e6eaf0; box-shadow: inset 0 1px 0 #fffc;
}
@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
  .button-primary, .nav-scan, .button-outline, .hero-actions .text-action,
  .photo-import, .help-button, .secondary, .lens-caption button {
    background-color: #ffffff10;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
  }
  .oft-dialog {
    background: #20242be6;
    -webkit-backdrop-filter: blur(24px) saturate(125%);
    backdrop-filter: blur(24px) saturate(125%);
  }
}
/* Light catches the upper bevel; the darker lower edge gives glass thickness.
   A bounded reflection moves only on deliberate hover/press, never in the camera. */
.button-primary, .nav-scan, .button-outline, .hero-actions .text-action,
.photo-import, .help-button, .secondary, .lens-caption button {
  isolation: isolate;
  border: 1px solid #ffffff30;
  background-image: linear-gradient(150deg, #ffffff29 0%, #ffffff0b 45%, #ffffff03 70%, #ffffff14 100%);
  box-shadow: inset 0 1px 0 #ffffff45, inset 0 -1px 0 #ffffff0a, 0 7px 20px #0003;
  color: #f8f9fc;
}
.button-primary { border-color: #ffffff60; background-color: #ffffff19; }
.button-primary:hover, .nav-scan:hover, .button-outline:hover,
.hero-actions .text-action:hover, .help-button:hover {
  color: #fff;
  background-color: #ffffff26;
  background-image: linear-gradient(150deg, #ffffff29, #ffffff09 65%, #ffffff18);
}
.button, .nav-scan, .hero-actions .text-action { position: relative; overflow: hidden; }
.button::after, .nav-scan::after, .hero-actions .text-action::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, #ffffff22 48%, transparent 66%);
  transform: translateX(-120%);
}
@media (hover: hover) and (pointer: fine) {
  .button:hover::after, .nav-scan:hover::after,
  .hero-actions .text-action:hover::after { animation: glass-reflection 650ms cubic-bezier(.16,1,.3,1); }
}
.hero-object img {
  filter: grayscale(1);
  animation: frame-settle 4.5s cubic-bezier(.16,1,.3,1) both;
  transform-origin: 70% 55%;
}
@keyframes glass-reflection { to { transform: translateX(120%); } }
@keyframes frame-settle {
  0% { transform: translate(10px,14px) rotate(-1.4deg) scale(.985); filter: grayscale(1) brightness(.8); }
  42% { transform: translate(0,-7px) rotate(.35deg) scale(1.008); filter: grayscale(1) brightness(1.1); }
  100% { transform: translate(0,0) rotate(0) scale(1); filter: grayscale(1) brightness(1); }
}
@media (max-width: 760px) {
  .site-header .nav-scan { padding: 12px 15px; }
  .hero-actions { gap: 12px; }
  .hero-actions .text-action { padding: 0 14px; }
}
@media (max-width: 400px) {
  .hero-actions .text-action { padding: 0 12px; gap: 6px; }
  .hero-actions { gap: 10px; }
  body[data-surface="studio"] .site-header { gap: 8px; flex-wrap: wrap; }
}
@media (max-height: 570px) {
  .oft-dialog .oft-dot { width: 32px; height: 44px; min-height: 44px; }
}
@media (prefers-reduced-transparency: reduce) {
  .button-primary, .nav-scan, .button-outline, .hero-actions .text-action,
  .photo-import, .help-button, .secondary, .lens-caption button,
  .oft-dialog { background: var(--glass-dark); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .nav-scan { transition: none; }
  .button:active, .nav-scan:active { transform: none; }
  .hero-object img, .button::after, .nav-scan::after, .hero-actions .text-action::after { animation: none; }
}

/* Thin optical edge, with a clear centre. Restricted to controls: image pixels
   and the measurement canvas never receive a filter or displacement. */
.button-primary,.nav-scan,.button-outline,.hero-actions .text-action,
.photo-import,.help-button,.secondary,.lens-caption button {
  isolation:isolate;overflow:hidden;
  background-color:#c9d3e116;
  background-image:radial-gradient(ellipse at 12% 0%,#ffffff42,transparent 55%),linear-gradient(125deg,#ffffff12 20%,#ffffff03 48%,#ffffff1c 100%);
  border:1px solid #ffffff36;
  box-shadow:inset 0 1px 0 #ffffff7a,inset 1px 0 0 #ffffff2b,inset -1px -1px 0 #080d175c,0 5px 15px #00000024;
}
.button-primary::before,.nav-scan::before,.button-outline::before,.hero-actions .text-action::before,
.photo-import::before,.help-button::before,.secondary::before,.lens-caption button::before {
  content:"";position:absolute;inset:2px;border-radius:inherit;pointer-events:none;
  border-top:1px solid #ffffff27;border-bottom:1px solid #ffffff12;
}
/* Floating camera controls own their absolute positioning in simple.css. */
.help-button,.secondary,.lens-caption button { position:relative; }
@supports ((backdrop-filter:blur(12px)) or (-webkit-backdrop-filter:blur(12px))) {
  .button-primary,.nav-scan,.button-outline,.hero-actions .text-action,
  .photo-import,.help-button,.secondary,.lens-caption button {
    backdrop-filter:blur(12px) saturate(125%);-webkit-backdrop-filter:blur(12px) saturate(125%);
  }
}
@media(prefers-reduced-transparency:reduce){
  .button-primary,.nav-scan,.button-outline,.hero-actions .text-action,
  .photo-import,.help-button,.secondary,.lens-caption button {
    background:#303741;backdrop-filter:none;-webkit-backdrop-filter:none;
  }
}