/* ===== Material-like tokens ===== */
:root{
  --md-color-primary:#2962ff;
  --md-color-primary-container:#e3e8ff;
  --md-color-on-primary:#ffffff;

  --md-color-surface:#ffffff;
  --md-color-surface-variant:#f3f4f6;
  --md-color-background:#f1f5f9;
  --md-color-outline:#d0d5dd;
  --md-color-outline-variant:#e5e7eb;
  --md-color-text:#111827;
  --md-color-text-secondary:#6b7280;
  --md-color-error:#b00020;

  --md-radius-l:18px;
  --md-radius-m:12px;
  --md-radius-s:8px;

  --md-elevation-1:0 2px 8px rgba(15,23,42,0.12);
  --md-elevation-2:0 6px 20px rgba(15,23,42,0.16);

  --md-spacing-xs:4px;
  --md-spacing-s:8px;
  --md-spacing-m:12px;
  --md-spacing-l:16px;
  --md-spacing-xl:20px;
}

/* ===== Base layout ===== */
*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  height:100%;
}

body{
  font-family:System-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--md-color-background);
  color:var(--md-color-text);
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

/* Корневая "колонка" приложения */
.app-root{
  width:100%;
  max-width:520px;
  padding:var(--md-spacing-l);
}

/* ===== Top App Bar ===== */
.top-app-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:var(--md-spacing-l);
  padding:10px 14px;
  border-radius:var(--md-radius-l);
  background:linear-gradient(135deg,#2563eb,#4f46e5);
  color:#ffffff;
  box-shadow:var(--md-elevation-1);
}

.top-app-bar__title{
  display:flex;
  align-items:center;
  gap:10px;
}

.top-app-bar__icon{
  width:32px;
  height:32px;
  border-radius:999px;
  background:rgba(255,255,255,0.15);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

.top-app-bar__title-text{
  font-size:18px;
  font-weight:600;
}

.top-app-bar__subtitle-text{
  font-size:12px;
  opacity:0.8;
}

.top-app-bar__actions{
  display:flex;
  align-items:center;
  gap:8px;
}

/* ===== Language block ===== */
.lang-block{
  display:flex;
  align-items:center;
  gap:4px;
  background:rgba(15,23,42,0.12);
  border-radius:999px;
  padding:2px 8px;
}

.lang-block label{
  font-size:16px;
}

.lang-block select{
  border:none;
  background:transparent;
  color:#ffffff;
  font-size:13px;
  outline:none;
  padding:2px 4px;
}

/* ===== Main card ===== */
.app-card{
  background:var(--md-color-surface);
  border-radius:var(--md-radius-l);
  box-shadow:var(--md-elevation-2);
  padding:var(--md-spacing-l);
}

/* ===== Mode toggle ===== */
.mode-section{
  margin-bottom:var(--md-spacing-m);
}

.mode-toggle{
  display:flex;
  background:var(--md-color-surface-variant);
  border-radius:999px;
  padding:2px;
}

.mode-toggle__btn{
  flex:1;
  border:none;
  background:transparent;
  border-radius:999px;
  padding:7px 10px;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--md-color-text-secondary);
  cursor:pointer;
  transition:background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}

.mode-toggle__btn:active{
  transform:scale(0.97);
}

.mode-toggle__btn.active{
  background:var(--md-color-primary);
  color:var(--md-color-on-primary);
  box-shadow:var(--md-elevation-1);
}

.mode-toggle__icon{
  font-size:16px;
}

/* ===== WB section ===== */
.wb-section{
  margin-bottom:var(--md-spacing-m);
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* tip + ? */
.tip-wrapper{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:6px 10px;
  border-radius:var(--md-radius-m);
  background:var(--md-color-surface-variant);
}

.tip-text{
  margin:0;
  font-size:13px;
  color:var(--md-color-text-secondary);
}

/* WB controls */
.wb-block{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.wb-label{
  font-size:13px;
  color:var(--md-color-text-secondary);
}

/* ===== Buttons (Material-like) ===== */
.md-btn{
  font-family:inherit;
  font-size:14px;
  border-radius:999px;
  padding:6px 14px;
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:background 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease, color 0.15s ease, border-color 0.15s ease;
  white-space:nowrap;
}

.md-btn:active{
  transform:scale(0.97);
}

/* filled */
.md-btn-filled{
  background:var(--md-color-primary);
  color:var(--md-color-on-primary);
  box-shadow:var(--md-elevation-1);
}

/* tonal */
.md-btn-tonal{
  background:var(--md-color-primary-container);
  color:#1d2a5b;
}

/* outlined */
.md-btn-outlined{
  background:transparent;
  border:1px solid var(--md-color-outline);
  color:var(--md-color-text);
}

/* text */
.md-btn-text{
  background:transparent;
  color:var(--md-color-primary);
}

/* small icon button */
.icon-btn{
  width:24px;
  height:24px;
  border-radius:999px;
  border:none;
  background:rgba(15,23,42,0.06);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  cursor:pointer;
  flex-shrink:0;
  transition:background 0.15s ease, transform 0.08s ease;
}

.icon-btn:active{
  transform:scale(0.95);
}

/* ===== Select in Material style ===== */
.md-select{
  min-width:160px;
  max-width:100%;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--md-color-outline);
  background:#ffffff;
  font-size:13px;
  color:var(--md-color-text);
}

/* ===== Camera message ===== */
.camera-msg{
  min-height:18px;
  font-size:13px;
  color:var(--md-color-error);
  margin:0 0 var(--md-spacing-s) 0;
}

/* ===== View card (video/photo) ===== */
.view-card{
  border-radius:var(--md-radius-m);
  background:var(--md-color-surface-variant);
  padding:var(--md-spacing-s);
  margin-bottom:var(--md-spacing-m);
}

.view-wrapper{
  position:relative;
  width:100%;
  border-radius:var(--md-radius-m);
  overflow:hidden;
  background:#000;
}

/* Видео и фото одинаковых размеров */
#view,
#photoView{
  display:block;
  width:100%;
  max-height:45vh;
  object-fit:cover;
}

/* overlay-квадратик */
.overlay{
  position:absolute;
  top:50%;
  left:50%;
  width:50px;
  height:50px;
  margin-left:-25px;
  margin-top:-25px;
  border-radius:6px;
  border:2px solid #fff;
  box-sizing:border-box;
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,0.25);
}

/* ===== Photo controls ===== */
.photo-controls{
  margin-top:var(--md-spacing-s);
  display:flex;
  justify-content:flex-end;
}

/* ===== Bottom actions & result ===== */
.actions-section{
  display:flex;
  flex-direction:column;
  gap:var(--md-spacing-s);
}

.controls{
  display:flex;
  justify-content:center;
}

/* output-бейдж с цветом */
.result-chip{
  display:inline-block;
  min-height:32px;
  min-width:120px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--md-color-outline-variant);
  background:#f9fafb;
  font-size:14px;
  color:var(--md-color-text);
}

/* ===== Dialogs ===== */
.md-dialog-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.35);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:50;
}

.md-dialog-backdrop.open{
  display:flex;
}

.md-dialog{
  width:100%;
  max-width:380px;
  background:var(--md-color-surface);
  border-radius:16px;
  box-shadow:var(--md-elevation-2);
  padding:16px 18px 12px;
}

.md-dialog__header{
  margin-bottom:8px;
}

.md-dialog__header h2{
  margin:0;
  font-size:16px;
}

.md-dialog__body{
  max-height:60vh;
  overflow:auto;
  font-size:14px;
  color:var(--md-color-text-secondary);
  white-space:pre-line;
}

.md-dialog__footer{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

/* ===== Responsive tweaks ===== */
@media (min-width:768px){
  .app-root{
    max-width:560px;
  }

  .app-card{
    padding:20px 22px;
  }

  #view,
  #photoView{
    max-height:380px;
  }
}