.kln-camera-open { display: inline-block; margin: 10px 0; padding: 11px 16px; min-height: 44px; border: 1px solid #77838d; border-radius: 5px; color: #243746; background: #fff; font: inherit; font-weight: 600; line-height: 1.4; cursor: pointer; }
.kln-camera-open:disabled { opacity: .5; cursor: wait; }
.kln-camera-note { display: block; color: #943b12; line-height: 1.5; }
.kln-camera-overlay { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; background: rgba(8, 16, 25, .86); color: #f8fbff; font: 16px/1.45 Arial, sans-serif; overscroll-behavior: contain; }
.kln-camera-overlay *, .kln-camera-overlay *::before, .kln-camera-overlay *::after { box-sizing: border-box; }
.kln-camera-overlay [hidden], .kln-camera-note[hidden] { display: none !important; }
.kln-camera-panel { display: flex; flex-direction: column; width: 100%; max-width: 920px; height: 100%; max-height: 960px; min-height: 0; padding: 20px; border: 1px solid #53616f; border-radius: 10px; background: #142331; overflow: auto; }
.kln-camera-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; }
.kln-camera-header h2 { margin: 0; color: #fff; font-size: 1.2rem; line-height: 1.35; text-transform: none; }
.kln-camera-overlay button { min-height: 44px; min-width: 44px; padding: 10px 16px; border: 1px solid #8193a4; border-radius: 5px; color: #f7fbff; background: #263c4f; font: inherit; line-height: 1.35; cursor: pointer; touch-action: manipulation; white-space: normal; }
.kln-camera-overlay button:disabled { opacity: .5; cursor: wait; }
.kln-camera-overlay button:focus-visible, .kln-camera-open:focus-visible { outline: 3px solid #ffd578; outline-offset: 3px; }
.kln-camera-overlay .kln-camera-close { flex: none; padding: 4px 12px; font-size: 30px; line-height: 1; background: transparent; }
.kln-camera-intro { flex: none; padding: 10px 0; }
.kln-camera-intro p { margin: 0 0 10px; color: #e0e9f2; font-size: .9rem; line-height: 1.45; }
.kln-camera-formats { display: flex; gap: 10px; }
.kln-camera-formats button { flex: 1; }
.kln-camera-formats button[aria-pressed="true"] { border-color: #ffe08e; color: #fff3cb; background: #3b4b48; box-shadow: inset 0 0 0 1px #ffe08e; }
.kln-camera-stage { position: relative; display: flex; align-items: center; justify-content: center; flex: 1 1 280px; min-height: 100px; overflow: hidden; border-radius: 5px; background: #070d12; }
.kln-camera-video, .kln-camera-preview { display: block; width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.kln-camera-guide { position: absolute; left: 50%; top: 50%; width: 80%; aspect-ratio: 1.586; transform: translate(-50%, -50%); border: 3px solid #ffe08e; border-radius: 7px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .18); pointer-events: none; }
.kln-camera-guide[data-format="sheet"] { aspect-ratio: 0.707; }
.kln-camera-status { flex: none; min-height: 40px; margin: 10px 0; font-size: .9rem; line-height: 1.45; color: #edf4fb; }
.kln-camera-actions { display: flex; flex-wrap: wrap; flex: none; gap: 10px; }
.kln-camera-actions button { flex: 1; }
.kln-camera-overlay .kln-camera-primary { color: #152435; border-color: #f4ce78; background: #f4ce78; font-weight: 700; }
.kln-camera-footer { flex: none; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; font-size: .8rem; color: #c1cddb; }
.kln-camera-overlay .kln-camera-fallback { font-size: .9rem; border-color: #657c90; background: transparent; }
@media (max-width: 600px) {
  .kln-camera-overlay { padding: 0; height: 100vh; height: 100dvh; }
  .kln-camera-panel { max-height: none; border: 0; border-radius: 0; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .kln-camera-header h2 { font-size: 1.05rem; }
}
@media (max-height: 500px) and (min-width: 601px) {
  .kln-camera-overlay { padding: 0; }
  .kln-camera-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr); grid-template-rows: auto 1fr auto auto; gap: 8px 16px; max-width: none; max-height: none; padding: 12px; border: 0; border-radius: 0; }
  .kln-camera-header { grid-column: 1 / -1; }
  .kln-camera-stage { grid-column: 1; grid-row: 2 / 5; }
  .kln-camera-intro { grid-column: 2; grid-row: 2; padding: 0; }
  .kln-camera-status { grid-column: 2; grid-row: 3; margin: 0; min-height: 0; }
  .kln-camera-actions { grid-column: 2; grid-row: 4; }
  .kln-camera-footer { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 0; }
}