:root {
  color-scheme: light;
  --blue: #008cff;
  --deep-blue: #0049a2;
  --stop: #ff6c4f;
  --text: #494949;
  --muted: #777;
  --surface: #fff;
  --background: #f7f8fa;
  --border: #dfe3e8;
  --header-height: 70px;
  --sidebar-width: 260px;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { background: var(--background); color: var(--text); font: 15px/1.45 "Noto Sans", Arial, sans-serif; overflow: hidden; }
button, select, input { font: inherit; }
button { cursor: pointer; }

.top-header { position: fixed; inset: 0 0 auto var(--sidebar-width); height: var(--header-height); z-index: 10; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.08); transition: left .25s ease; }
.top-nav { height: 100%; display: flex; align-items: center; gap: 14px; padding: 0 1.25rem; }
.top-title { font-size: clamp(16px, 2.5vw, 22px); font-weight: 600; flex: 1; }
.test-notice { color: #667085; font-size: 12px; white-space: nowrap; }
.icon-button { min-width: 44px; min-height: 44px; border: 0; border-radius: 50%; background: transparent; color: #494949; font-size: 25px; display: inline-grid; place-items: center; }
.icon-button:hover, .icon-button:focus-visible { background: #efefef; outline: none; }
.physidex-stop { display: inline-block; min-height: 44px; padding: 10px 16px; color: #fff; background: var(--stop); border: 0; border-radius: 10px; font-weight: 600; }
.physidex-stop:disabled { background: #999; cursor: not-allowed; }

.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); z-index: 12; background: #fff; border-right: 1px solid var(--border); box-shadow: 0 2px 6px rgba(0,0,0,.08); transition: transform .25s ease; }
body.sidebar-open .sidebar { transform: translateX(0); }
.sidebar-header { height: var(--header-height); padding: 0 1rem; display: flex; align-items: center; gap: .6rem; border-bottom: 1px solid var(--border); }
.logo-icon { width: 55px; height: 55px; object-fit: contain; }
.logo-name { width: 140px; max-height: 52px; object-fit: contain; object-position: left center; flex: 1; }
.sidebar-close { display: none; }
.sidebar-nav { padding: 10px; display: grid; gap: 5px; }
.menu-item { min-height: 48px; width: 100%; border: 0; border-radius: 4px; background: transparent; color: #5f5f5f; display: flex; align-items: center; gap: 12px; padding: 8px 16px; text-align: left; letter-spacing: .3px; }
.menu-item:hover, .menu-item:focus-visible, .menu-item.active { color: var(--blue); background: rgba(0,140,255,.06); outline: none; }
.menu-icon { font-size: 22px; line-height: 1; width: 24px; text-align: center; }
.sidebar-backdrop { position: fixed; inset: 0; z-index: 11; background: rgba(0,18,46,.34); }

.main-wrapper { position: fixed; inset: var(--header-height) 0 0 var(--sidebar-width); padding: 10px; transition: left .25s ease; }
.tracker-stage { position: relative; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; }
.tracker-frame { display: block; max-width: 100%; max-height: 100%; border: 0; background: #000; }
.landmark-canvas { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); max-width: 100%; max-height: 100%; pointer-events: none; }
.landmark-canvas.mirrored { transform: translate(-50%,-50%) scaleX(-1); }

.physidex-start { position: absolute; left: 50%; top: 48%; transform: translate(-50%,-50%); z-index: 4; min-width: 130px; min-height: 58px; border: 0; border-radius: 24px; padding: 0 22px; color: #fff; background: radial-gradient(circle,#2637a4,#0040ff 80%); box-shadow: 0 0 .5em rgba(0,0,0,.5),0 0 1em #d2cddf,0 0 .5em #0675a5; font-size: clamp(18px,2vw,25px); font-weight: 700; letter-spacing: .06em; }
.physidex-start[hidden] { display: none; }
.physidex-start:disabled { filter: grayscale(1); opacity: .58; cursor: not-allowed; }
.physidex-start:not(:disabled) { animation: physidex-bounce 1.5s infinite; }
@keyframes physidex-bounce { 0%,100%{transform:translate(-50%,-58%)} 50%{transform:translate(-50%,-50%)} }

.settings-drawer { position: fixed; inset: 0 0 0 auto; width: min(90vw,720px); z-index: 30; background: #fff; box-shadow: -8px 0 28px rgba(0,18,46,.16); overflow: auto; padding-bottom: max(18px,env(safe-area-inset-bottom)); }
.settings-drawer[hidden] { display: none; }
.settings-header { height: var(--header-height); display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--border); }
.settings-header h2 { margin: 0; font-size: 1.2rem; }
.settings-header p { margin: 2px 0 0; color: var(--muted); }
.settings-panel { display: grid; gap: 18px; padding: 24px; }
.settings-panel[hidden] { display: none; }
label { display: grid; gap: 7px; font-weight: 600; }
select { min-height: 44px; width: 100%; border: 1px solid #aebdcd; border-radius: 6px; background: #fff; padding: 8px 10px; color: #333; }
.checkbox { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.checkbox input { width: 21px; height: 21px; }
.error { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5; max-width: min(90%,620px); margin: 0; padding: 10px 14px; border-radius: 7px; background: rgba(180,35,24,.94); color: #fff; }
.error:empty { display: none; }

@media (min-width: 1200px) {
  body.sidebar-collapsed .sidebar { width: 70px; }
  body.sidebar-collapsed .logo-name, body.sidebar-collapsed .menu-item span:last-child { display: none; }
  body.sidebar-collapsed .sidebar-header, body.sidebar-collapsed .menu-item { justify-content: center; padding-inline: 8px; }
  body.sidebar-collapsed .top-header { left: 70px; }
  body.sidebar-collapsed .main-wrapper { left: 70px; }
}

@media (max-width: 1199px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar-close { display: inline-grid; }
  .top-header { left: 0; }
  .main-wrapper { left: 0; }
}

@media (max-width: 520px) {
  .top-nav { padding-inline: 8px; gap: 7px; }
  .top-title { font-size: 15px; }
  .test-notice { position: absolute; left: 58px; bottom: 5px; font-size: 10px; }
  .physidex-stop { padding-inline: 12px; }
  .main-wrapper { padding: 4px; }
  .settings-drawer { width: 100vw; }
  .settings-panel { padding: 18px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { transition:none!important; animation:none!important; }
}