*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background: #1a1a2e;
  color: #e0e0e0;
  font-family: "Segoe UI", Tahoma, sans-serif;
  font-size: 14px;
  overflow: hidden;
}
html {
  color-scheme: light;
}
.hidden { display: none !important; }

.workspace-pill {
  --pill-height: 46px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: 0 var(--space-12);
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-panel-strong);
  box-shadow: var(--shadow-soft);
}

.pill-icon-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--color-text-primary);
  opacity: 0.5;
  transition: opacity 0.15s ease, background var(--anim-fast), transform var(--anim-fast), border-color var(--anim-fast);
}

.pill-icon-btn:hover {
  opacity: 1;
}

.pill-icon {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
}

.pill-action-icon,
.profile-mask-icon,
.profile-preview-icon,
.profile-customize-preview {
  display: block;
  background: var(--profile-icon-color, currentColor);
  mask: var(--profile-icon-url) center / contain no-repeat;
  -webkit-mask: var(--profile-icon-url) center / contain no-repeat;
}

.pill-action-icon {
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: var(--action-icon-url) center / contain no-repeat;
  -webkit-mask: var(--action-icon-url) center / contain no-repeat;
}

.profile-mask-icon {
  width: 20px;
  height: 20px;
}

.pill-user-email {
  max-width: min(38vw, 320px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-secondary);
}

.pill-logout-btn {
  min-height: 34px;
}

.pill-logout-btn,
.pill-profile-btn {
  flex: 0 0 auto;
}

.workspace-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.workspace-home {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.workspace-home-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  justify-content: center;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--anim-fast), color var(--anim-fast), border-color var(--anim-fast), transform var(--anim-fast);
}

.workspace-home-link:hover {
  background: var(--color-hover);
  color: var(--color-text-primary);
}

.workspace-home-link .pill-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.workspace-tab {
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--anim-fast), color var(--anim-fast), border-color var(--anim-fast), transform var(--anim-fast);
}

.workspace-tab:hover {
  background: var(--color-hover);
  color: var(--color-text-primary);
}

.workspace-tab.is-active {
  border-color: color-mix(in srgb, var(--color-accent) 38%, var(--color-border));
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-panel-strong));
  color: var(--color-text-primary);
}

.workspace-pill-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  flex: 0 0 auto;
}

.pill-logout-form {
  margin: 0;
}

.dashboard {
  width: 100%;
  height: 100%;
  background: #171717;
  color: #e5e5e5;
  overflow: auto;
  position: relative;
  isolation: isolate;
}
.dashboard::before {
  content: "";
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(31vw, 31vh);
  height: min(31vw, 31vh);
  transform: translate(-50%, -50%);
  background: url("logo.svg") center center / contain no-repeat;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}
.dashboard > * {
  position: relative;
  z-index: 1;
}
.dashboard-shell {
  max-width: 1520px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dashboard-header h1 {
  font-size: 24px;
  margin: 0;
}

body.tokens-page {
  overflow: auto;
}

body.settings-page {
  overflow: auto;
}

body.teams-page {
  overflow: auto;
}

.settings-stack {
  width: min(100%, 980px);
  display: grid;
  gap: var(--space-12);
}

.tokens-panel,
.tokens-once-panel,
.teams-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-12);
  padding: 18px;
  background: var(--color-panel-strong);
  box-shadow: var(--shadow-soft);
}

.tokens-panel h2 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.settings-card-copy {
  margin: 0 0 14px;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.tokens-create-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.tokens-password-form {
  display: grid;
  gap: 12px;
}

.tokens-password-actions {
  display: flex;
  justify-content: flex-end;
}

.tokens-field {
  display: grid;
  gap: 6px;
  color: var(--color-text-secondary);
  font-size: 12px;
  text-transform: uppercase;
}

.teams-field {
  display: grid;
  gap: 6px;
  color: var(--color-text-secondary);
  font-size: 12px;
  text-transform: uppercase;
}

.tokens-field input,
.tokens-plain-input,
.teams-field input {
  width: 100%;
  padding: 10px 12px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-primary);
  font-size: 14px;
}

.tokens-once-panel {
  border-color: var(--color-accent);
}

.tokens-once-title {
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 600;
}

.tokens-once-panel p,
.tokens-empty {
  color: var(--color-text-secondary);
}

.tokens-plain-input {
  margin-top: 12px;
  font-family: Consolas, "Courier New", monospace;
}

.tokens-list {
  display: grid;
  gap: 10px;
}

.tokens-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-panel);
}

.tokens-row-main {
  min-width: 0;
}

.tokens-label {
  overflow-wrap: anywhere;
  color: var(--color-text-primary);
  font-weight: 600;
}

.tokens-meta,
.tokens-status {
  margin-top: 4px;
  color: var(--color-text-secondary);
  font-size: 12px;
}

.teams-header {
  align-items: end;
}

.teams-create-form,
.teams-inline-form,
.teams-add-member-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
}

.teams-create-form {
  width: min(520px, 100%);
}

.teams-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 14px;
  min-height: 520px;
}

.teams-panel-head,
.teams-members-head,
.teams-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.teams-panel h2,
.teams-members-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.teams-list,
.teams-members-list {
  display: grid;
  gap: 10px;
}

.teams-team-row {
  width: 100%;
  min-height: 64px;
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-panel);
  color: var(--color-text-primary);
  cursor: pointer;
}

.teams-team-row:hover,
.teams-team-row.active {
  border-color: var(--color-accent);
}

.teams-team-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.teams-team-meta,
.teams-detail-meta,
.teams-member-meta,
.teams-empty,
.teams-empty-small,
.teams-status {
  color: var(--color-text-secondary);
  font-size: 12px;
}

.teams-status {
  min-height: 18px;
}

.teams-status.error {
  color: var(--color-danger);
}

.teams-empty {
  min-height: 360px;
  display: grid;
  place-items: center;
}

.teams-detail-title {
  color: var(--color-text-primary);
  font-size: 20px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.teams-owner-actions,
.teams-member-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.teams-inline-form {
  margin-bottom: 18px;
}

.teams-add-member-form {
  width: min(480px, 100%);
}

.teams-invites {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.teams-invite-latest {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-12);
  background: color-mix(in srgb, var(--color-panel) 88%, var(--color-accent-soft) 12%);
}

.teams-invite-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.teams-invite-copy-row,
.teams-invite-inline-copy {
  min-width: 0;
}

.teams-invite-copy-row input,
.teams-invite-inline-input {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-10);
  color: var(--color-text-primary);
}

.teams-invite-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.teams-invite-actions .btn {
  white-space: nowrap;
}

.teams-invite-latest .teams-member-meta {
  font-size: 12px;
}

.teams-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-panel);
}

.teams-member-main {
  min-width: 0;
}

.teams-member-name {
  color: var(--color-text-primary);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.teams-current-user {
  color: var(--color-text-secondary);
  font-size: 12px;
}

.profile-settings-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-panel);
  color: var(--color-text-primary);
  text-decoration: none;
}

.profile-settings-link:hover {
  border-color: var(--color-accent);
}

.profile-settings-group {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.profile-settings-form {
  margin: 0;
}

.profile-settings-link-static {
  cursor: default;
}

.profile-settings-link-static:hover {
  border-color: var(--color-border);
}

.profile-settings-button {
  width: 100%;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.profile-settings-link-meta {
  color: var(--color-text-secondary);
  font-size: 12px;
}

@media (max-width: 640px) {
  .tokens-create-form,
  .tokens-row,
  .teams-create-form,
  .teams-inline-form,
  .teams-add-member-form,
  .teams-member-row {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .teams-header {
    align-items: stretch;
  }

  .teams-layout {
    grid-template-columns: 1fr;
  }

  .teams-panel-head,
  .teams-members-head,
  .teams-detail-head {
    align-items: stretch;
    flex-direction: column;
  }

  .teams-member-actions,
  .teams-owner-actions {
    justify-content: flex-start;
  }

  .teams-invite-copy-row,
  .teams-invite-inline-copy {
    grid-template-columns: 1fr;
  }

  .teams-invite-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .teams-invite-actions {
    justify-content: flex-start;
  }
}

.project-tiles {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.dashboard-loading {
  display: grid;
  gap: 14px;
}
.dashboard-loading-title,
.dashboard-loading-card,
.teams-loading-row {
  background: linear-gradient(90deg, var(--color-panel-strong) 25%, var(--color-hover) 50%, var(--color-panel-strong) 75%);
  background-size: 200% 100%;
  animation: content-loading 1.2s ease-in-out infinite;
}
.dashboard-loading-title {
  width: 160px;
  height: 22px;
  border-radius: 7px;
}
.dashboard-loading-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.dashboard-loading-card {
  min-height: 130px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.teams-loading {
  display: grid;
  gap: 8px;
}
.teams-loading-row {
  height: 48px;
  border-radius: 8px;
}
@keyframes content-loading {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-loading-title,
  .dashboard-loading-card,
  .teams-loading-row {
    animation: none;
  }
}
.dashboard-section,
.dashboard-team-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dashboard-section-head,
.dashboard-team-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dashboard-section-title {
  margin: 0;
  color: #f5f5f5;
  font-size: 18px;
  font-weight: 700;
}
.dashboard-section-meta,
.dashboard-team-meta {
  color: #737373;
  font-size: 12px;
}
.dashboard-team-title {
  color: #d4d4d4;
  font-size: 14px;
  font-weight: 700;
}
.dashboard-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.dashboard-empty {
  color: #737373;
  font-size: 13px;
  padding: 8px 0;
}
.project-tile {
  min-height: 130px;
  border-radius: 10px;
  background: #262626;
  border: 1px solid #525252;
  padding: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  text-align: left;
  font-family: inherit;
}
.project-tile:hover { border-color: #525252; }
.project-tile.is-loading {
  cursor: wait;
  opacity: 0.72;
  pointer-events: none;
}
.project-tile.is-loading::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text-primary);
  border-radius: 50%;
  animation: project-opening 0.7s linear infinite;
}
@keyframes project-opening {
  to { transform: rotate(360deg); }
}
.project-tile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.project-tile-title-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.project-tile-title { font-weight: 700; color: #f5f5f5; }
.project-tile-meta { font-size: 12px; color: #737373; }
.project-tile-badge {
  width: fit-content;
  border: 1px solid #737373;
  border-radius: 999px;
  padding: 2px 7px;
  color: #d4d4d4;
  font-size: 11px;
  line-height: 1.4;
}
.project-tile-actions {
  position: relative;
  flex: 0 0 auto;
}
.project-tile-menu-btn {
  width: 28px;
  height: 28px;
  border: 1px solid #525252;
  border-radius: 6px;
  background: transparent;
  color: #d4d4d4;
  cursor: pointer;
}
.project-tile-menu-btn:hover {
  border-color: #737373;
  background: rgba(255, 255, 255, 0.04);
}
.project-tile-menu {
  position: absolute;
  right: 0;
  top: 32px;
  z-index: 30;
  min-width: 180px;
  display: none;
  flex-direction: column;
  padding: 6px;
  border: 1px solid #525252;
  border-radius: 8px;
  background: #262626;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
}
.project-tile-menu.open {
  display: flex;
}
.project-tile-menu button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #e5e5e5;
  cursor: pointer;
  padding: 8px 9px;
  text-align: left;
}
.project-tile-menu button:hover {
  background: rgba(255, 255, 255, 0.06);
}
.project-tile.add {
  border: 2px dashed #737373;
  background: transparent;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  color: #525252;
  opacity: 0.5;
  transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.project-tile.add:hover {
  opacity: 1;
}

/* ═══════════════════════
   LAYOUT
═══════════════════════ */
.app {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.sidebar {
  width: 332px;
  min-width: 260px;
  max-width: 420px;
  background: #262626;
  border-right: 1px solid #525252;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.sidebar-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(9, 18, 31, 0.2);
  cursor: not-allowed;
}

.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.sidebar.tools-locked {
  opacity: 0.95;
}
.no-elevation-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 16, 29, 0.62);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.project-panel {
  /* Высоту и отступы задаёт общий блок .panel-overlay (не на всю высоту экрана — до статус-бара) */
  width: 320px;
  z-index: 25;
  background: rgba(10, 21, 38, 0.98);
  border-left: 1px solid #737373;
  transform: translateX(0);
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
}
.project-panel.collapsed {
  transform: translateX(calc(100% + 10px));
}
.project-panel-header {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.project-panel-header[role="button"] {
  cursor: pointer;
  user-select: none;
}
.project-panel-body {
  padding: 10px 12px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.project-panel-title-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
#currentProjectTitle {
  font-size: 13px;
  font-weight: 700;
  color: #e5e5e5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════
   ВКЛАДКИ
═══════════════════════ */
.tabs {
  display: flex;
  border-bottom: 1px solid #525252;
  flex-shrink: 0;
}

.tab-btn {
  flex: 1;
  padding: 10px 6px;
  background: transparent;
  border: none;
  color: #737373;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
  border-bottom: 3px solid transparent;
}
.tab-btn:hover  { color: #d4d4d4; background: rgba(255,255,255,0.04); }
.tab-btn.active { color: #525252; border-bottom-color: #525252; }

/* Контент вкладок сайдбара */
.sidebar .tab-content {
  display: none;
  flex-direction: column;
  flex: 1;
}
.sidebar .tab-content.active { display: flex; }

/* Контент вкладок в main-area */
.main-area .tab-content {
  display: none;
  flex: 1;
  position: absolute;
  inset: 0;
}
.main-area .tab-content.active { display: flex; flex-direction: column; }

/* ═══════════════════════
   СЕКЦИИ САЙДБАРА
═══════════════════════ */
.section {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #737373;
  margin-bottom: 8px;
}

/* ═══════════════════════
   КНОПКИ
═══════════════════════ */
.btn {
  padding: 7px 12px;
  border: 1px solid #525252;
  border-radius: 5px;
  background: #2f2f33;
  color: #e5e5e5;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn:hover    { background: #3f3f46; border-color: #525252; color: #fff; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover { background: #2f2f33; border-color: #525252; color: #e5e5e5; }

.btn-primary { background: #525252; border-color: #525252; color: #f5f5f5; }
.btn-primary:hover { background: #404040; }
.btn-active-tool {
  background: color-mix(in srgb, var(--color-accent) 22%, var(--color-panel-strong));
  border-color: var(--color-accent);
  color: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 55%, transparent), 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent);
}

.btn-success { background: #525252; border-color: #737373; color: #d4d4d4; }
.btn-success:hover { background: #404040; }

.btn-icon {
  width: 28px; height: 28px;
  padding: 0;
  border: 1px solid #525252;
  border-radius: 4px;
  background: #2f2f33;
  color: #aab;
  cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.btn-icon:hover    { background: #3f3f46; color: #fff; border-color: #525252; }
.btn-icon.btn-active { background: #525252; color: #f5f5f5; border-color: #525252; }
.btn-icon.btn-faded  { opacity: 0.4; }

.btn-del { border-color: #737373; color: #d4d4d4; }
.btn-del:hover { background: #3f3f46; border-color: #a3a3a3; color: #f5f5f5; }

.btn-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.btn-row .btn { flex: 1; min-width: 80px; }

#lensCorrectionSection .hint {
  font-size: 12px;
  color: #a3a3a3;
  margin: 8px 0 0;
}

.lens-open-btn {
  width: 100%;
}

.lens-correction-modal {
  z-index: 130;
}

.lens-correction-card {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lens-correction-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.lens-preview-status {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.lens-preview-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: min(54vh, 520px);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  background: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lens-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.lens-guides {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lens-guide {
  position: absolute;
  opacity: 0.75;
}

.lens-guide-vertical {
  top: 0;
  bottom: 0;
  width: 1px;
  border-left: 1px dashed rgba(255,255,255,0.78);
  box-shadow: 1px 0 0 rgba(0,0,0,0.45);
}

.lens-guide-horizontal {
  left: 0;
  right: 0;
  height: 1px;
  border-top: 1px dashed rgba(255,255,255,0.78);
  box-shadow: 0 1px 0 rgba(0,0,0,0.45);
}

.lens-guide-v1 { left: 33.333%; }
.lens-guide-v2 { left: 66.666%; }
.lens-guide-h1 { top: 33.333%; }
.lens-guide-h2 { top: 66.666%; }

.lens-modal-controls {
  display: grid;
  gap: 10px;
}

.lens-field {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.lens-field input[type="range"] {
  width: 100%;
}

.lens-field span:last-child {
  color: var(--color-text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lens-modal-actions {
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 640px) {
  .lens-field {
    grid-template-columns: 1fr 54px;
  }
  .lens-field span:first-child {
    grid-column: 1 / -1;
  }
}

/* ═══════════════════════
   РАЗМЕРЫ СТЕНЫ
═══════════════════════ */
.wall-inputs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}
.wall-inputs label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.wall-inputs input {
  flex: 1;
  padding: 5px 8px;
  background: #2a2a2a;
  border: 1px solid #525252;
  border-radius: 4px;
  color: #e5e5e5;
  font-size: 13px;
}
.project-tree {
  margin-top: 2px;
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 6px;
  background: rgba(0,0,0,0.12);
}
.project-tree-item {
  font-size: 12px;
  line-height: 1.5;
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
  color: #e5e5e5;
  display: flex;
  align-items: center;
  gap: 6px;
}
.project-tree-item:hover {
  background: rgba(255,255,255,0.06);
}
.project-tree-item.active {
  background: rgba(82,82,82,0.18);
  color: #fff;
}
.tree-toggle {
  width: 16px;
  text-align: center;
  color: #737373;
  flex-shrink: 0;
}
.tree-node-label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-tree-icon,
.project-context-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  object-fit: contain;
  opacity: 0.86;
  vertical-align: -2px;
}
.project-tree-icon {
  margin-right: 1px;
}
.project-context-icon,
.project-context-icon-spacer {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.project-context-icon-spacer {
  display: inline-block;
}
.tree-node-label > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tree-node-input {
  width: 100%;
  min-width: 70px;
  background: #2a2a2a;
  border: 1px solid #525252;
  border-radius: 4px;
  color: #f5f5f5;
  caret-color: #d4d4d4;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1.2;
}
.tree-node-input:focus {
  outline: none;
}
.project-tree-item.drag-over {
  outline: 1px dashed #525252;
}
.project-context-menu {
  position: fixed;
  z-index: 1000;
  min-width: 210px;
  background: var(--color-panel-strong);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px;
  box-shadow: var(--shadow-soft);
  color: var(--color-text-primary);
}
.project-context-item {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  text-align: left;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.project-context-item:hover:not(:disabled) {
  background: var(--color-hover);
}
.project-context-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.project-context-item.danger {
  color: var(--color-danger);
}
.project-context-item.danger:hover:not(:disabled) {
  background: var(--color-hover);
}
.project-context-sep {
  height: 1px;
  background: var(--color-border);
  margin: 5px 2px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-card {
  width: min(420px, calc(100vw - 32px));
  background: #262626;
  border: 1px solid #737373;
  border-radius: 10px;
  padding: 14px;
}
.modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #f5f5f5;
  margin-bottom: 10px;
}
.modal-message {
  font-size: 13px;
  color: #a3a3a3;
  margin-bottom: 10px;
}
.modal-input {
  width: 100%;
  margin-bottom: 12px;
  padding: 7px 9px;
  background: #2a2a2a;
  border: 1px solid #737373;
  border-radius: 6px;
  color: #e5e5e5;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.wall-inputs input:focus {
  outline: none;
  border-color: #525252;
}
.wall-size-display {
  font-size: 13px;
  color: #525252;
  font-weight: 600;
  margin-top: 4px;
}

/* ═══════════════════════
   СПИСОК ФОТО
═══════════════════════ */
.photos-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.photo-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
}

.photo-list:empty {
  display: none;
}

.photo-add-item {
  width: 100%;
  min-height: 36px;
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  transition: background var(--anim-fast), border-color var(--anim-fast), color var(--anim-fast), opacity var(--anim-fast);
}

.photo-list:empty + .photo-add-item {
  min-height: 54px;
  color: var(--color-text-secondary);
  opacity: 0.72;
}

.photo-add-item:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-hover);
  opacity: 1;
}

.photo-add-item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.photo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
}
.photo-item:hover  { background: rgba(255,255,255,0.05); }
.photo-item.active {
  background: rgba(82,82,82,0.16);
  border-color: #525252;
}

.photo-thumb {
  width: 48px; height: 36px;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
  background: #2a2a2a;
}
.photo-thumb canvas { width: 100%; height: 100%; display: block; }

.photo-info { flex: 1; min-width: 0; }
.photo-name {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #e5e5e5;
}
.photo-pts { font-size: 11px; color: #737373; margin-top: 2px; }
.photo-pts.pts-ok  { color: #737373; }
.photo-pts.pts-bad { color: #737373; }
.pts-done { color: #737373; }

/* ═══════════════════════
   СПИСОК СЛОЁВ
═══════════════════════ */
.layer-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
}

.layer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
  user-select: none;
}
.layer-item:hover  { background: rgba(255,255,255,0.05); }
.layer-item.active {
  background: rgba(82,82,82,0.16);
  border-color: #525252;
}
.layer-item.dragging  { opacity: 0.4; }
.layer-item.drag-over { border-color: #737373; background: rgba(255,136,0,0.1); }

.layer-thumb {
  width: 40px; height: 30px;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
  background: #2a2a2a;
}
.layer-thumb canvas { width: 100%; height: 100%; display: block; }

.layer-name {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #e5e5e5;
}
.layer-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.layer-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 16px;
}
.layer-meta:empty {
  display: none;
}
.layer-library-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 7px;
  min-height: 16px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-panel-strong);
  color: var(--color-text-secondary);
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0;
}
.defect-layer-type-badge {
  display: none;
}
.layer-name-input {
  flex: 1;
  padding: 2px 6px;
  background: #2a2a2a;
  border: 1px solid #525252;
  border-radius: 3px;
  color: #e5e5e5;
  font-size: 12px;
  font-weight: 600;
  outline: none;
  min-width: 0;
}
.layer-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--color-overlay-scrim);
}
.layer-picker-card {
  width: min(560px, calc(100vw - 24px));
  height: min(78vh, 660px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-panel);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}
.layer-picker-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.layer-picker-subtitle,
.layer-picker-selection-label,
.layer-picker-custom-label,
.layer-picker-group-title,
.layer-picker-option-meta,
.layer-picker-status,
.layer-picker-selection-meta,
.layer-picker-custom-warning {
  color: var(--color-text-secondary);
  font-size: 12px;
}
.layer-picker-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.layer-picker-field > span {
  color: var(--color-text-primary);
  font-size: 12px;
  font-weight: 600;
}
.layer-picker-input {
  width: 100%;
}
.layer-picker-status {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-panel-strong);
}
.layer-picker-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 220px;
  max-height: none;
  overflow-y: auto;
  padding-right: 2px;
}
.layer-picker-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.layer-picker-group-title {
  font-weight: 700;
  text-transform: none;
}
.layer-picker-option {
  width: 100%;
  text-align: left;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-panel-strong);
  color: var(--color-text-primary);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: border-color var(--anim-fast), background var(--anim-fast), color var(--anim-fast);
}
.layer-picker-option:hover,
.layer-picker-option.is-selected {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.layer-picker-option-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.layer-picker-selection,
.layer-picker-custom {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-panel-strong);
  padding: 12px;
}
.layer-picker-selection {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.layer-picker-selection-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.layer-picker-geometry {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.layer-picker-geometry-btn {
  flex: 1;
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--anim-fast), background var(--anim-fast), color var(--anim-fast);
}
.layer-picker-geometry-btn:hover,
.layer-picker-geometry-btn.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-text-primary);
}
.layer-picker-custom-warning {
  margin-top: 10px;
  line-height: 1.45;
}
.layer-picker-empty {
  padding: 18px 12px;
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  color: var(--color-text-secondary);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 640px) {
  .layer-picker-card {
    height: min(82vh, 620px);
  }
  .layer-picker-results {
    min-height: 170px;
  }
}

.layer-btns {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

#defectLayerList.layer-list {
  max-height: 360px;
}

#defectLayerList .layer-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px 10px;
  padding: 8px 8px;
  border-radius: 8px;
}

#defectLayerList .layer-name {
  grid-column: 1;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow-wrap: anywhere;
}

#defectLayerList .layer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  align-items: start;
}

#defectLayerList .layer-meta {
  display: none;
}

#defectLayerList .layer-library-badge {
  display: none;
}

#defectLayerList .layer-name-input {
  grid-column: 1 / -1;
}

#defectLayerList .layer-btns {
  gap: 3px;
  align-self: start;
}

/* ═══════════════════════
   HINT BOX
═══════════════════════ */
.hint-box {
  font-size: 12px;
  line-height: 1.8;
  color: #737373;
  background: rgba(0,0,0,0.2);
  border-radius: 6px;
  padding: 10px 12px;
}

.sidebar-help-bar {
  margin-top: auto;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--color-border);
  background: transparent;
}

.help-link-btn {
  width: 100%;
  text-align: center;
  font-size: 11px;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-secondary);
  opacity: 0.72;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.help-link-btn:hover {
  opacity: 1;
  background: var(--color-hover);
  color: var(--color-text-primary);
  border-color: var(--color-accent);
}

.howto-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: var(--color-overlay-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.howto-card {
  width: min(560px, calc(100vw - 24px));
  max-height: min(78vh, 640px);
  overflow: auto;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-panel);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-soft);
  padding: 14px 16px;
}

.howto-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.howto-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.howto-body b {
  color: var(--color-text-primary);
}

.empty-list {
  font-size: 12px;
  color: #737373;
  text-align: center;
  padding: 16px 0;
}

/* ═══════════════════════
   BUG REPORT
═══════════════════════ */
/* PROFILE MODAL */
.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.profile-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-overlay-scrim);
}

.profile-card {
  position: relative;
  z-index: 1;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-panel);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}

.profile-card-head,
.profile-summary,
.profile-control-row,
.profile-pack-row,
.profile-actions {
  display: flex;
  align-items: center;
}

.profile-card-head {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.profile-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.profile-subtitle,
.profile-meta,
.profile-status {
  color: var(--color-text-secondary);
  font-size: 12px;
}

.profile-close-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
}

.profile-summary {
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-panel-strong);
  margin-bottom: 14px;
}

.profile-preview-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
}

.profile-avatar-edit {
  width: 62px;
  height: 62px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.profile-avatar-edit:hover {
  background: var(--color-hover);
  border-color: var(--color-border);
}

.profile-short-name {
  color: var(--color-text-primary);
  font-weight: 700;
  font-size: 16px;
}

.profile-section-title {
  color: var(--color-text-primary);
  font-weight: 700;
  margin: 0 0 10px;
}

.profile-control-row {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.profile-personalization-summary {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-panel-strong);
  color: var(--color-text-secondary);
  font-size: 13px;
}

.profile-color-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--profile-icon-color);
  border: 1px solid var(--color-border);
}

.profile-customize-link {
  min-height: 30px;
  padding: 5px 10px;
}

.profile-customize-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.profile-customize-preview {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
}

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

.profile-color-input {
  width: 44px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-panel-strong);
  cursor: pointer;
}

.profile-pack-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--color-text-primary);
  cursor: pointer;
}

.profile-pack-switch-label {
  font-weight: 600;
}

.profile-pack-switch-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.profile-pack-switch-track {
  width: 48px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-panel-strong);
  display: inline-flex;
  align-items: center;
  padding: 2px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.profile-pack-switch-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  transition: transform 0.15s ease, background 0.15s ease;
}

.profile-pack-switch-input:checked + .profile-pack-switch-track {
  background: color-mix(in srgb, var(--color-accent) 38%, var(--color-panel-strong));
  border-color: var(--color-accent);
}

.profile-pack-switch-input:checked + .profile-pack-switch-track .profile-pack-switch-thumb {
  transform: translateX(22px);
  background: var(--color-accent);
}

.profile-icon-gallery {
  min-height: 148px;
}

.profile-icon-pack {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 8px;
}

.profile-icon-option {
  height: 42px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-panel-strong);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.profile-icon-option .profile-mask-icon {
  width: 24px;
  height: 24px;
}

.profile-icon-option:hover,
.profile-icon-option.selected {
  border-color: var(--color-accent);
  background: var(--color-hover);
}

.profile-icon-option.selected {
  transform: translateY(-1px);
}

.profile-status {
  min-height: 18px;
  margin-top: 10px;
}

.profile-status.error {
  color: var(--color-danger);
}

.profile-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.bug-report-link {
  font-size: 11px;
  color: var(--color-text-secondary);
  opacity: 0.6;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0 6px;
  text-decoration: none;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.bug-report-link:hover {
  opacity: 1;
  text-decoration: underline;
}

.bugreport-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: var(--color-overlay-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.bugreport-card {
  width: min(480px, calc(100vw - 32px));
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-panel);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-soft);
  padding: 16px 18px;
  animation: slideUp var(--anim-mid) ease;
}

.bugreport-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 10px;
}

.bugreport-error-info {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-danger);
  background: var(--color-hover);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
  word-break: break-word;
  max-height: 80px;
  overflow: auto;
}

.bugreport-textarea {
  width: 100%;
  min-height: 100px;
  resize: vertical;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-panel-strong);
  color: var(--color-text-primary);
  padding: 10px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  box-sizing: border-box;
}
.bugreport-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.bugreport-textarea::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.5;
}

.bugreport-hint {
  font-size: 12px;
  color: var(--color-danger);
  min-height: 18px;
  margin-top: 4px;
}

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

/* ═══════════════════════
   SOURCE VIEW
═══════════════════════ */
.source-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--canvas-bg);
}
#sourceCanvas {
  position: absolute;
  cursor: crosshair;
}
.placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--color-text-secondary);
  pointer-events: none;
}

.source-status-bar,
.result-status-bar {
  min-height: 28px;
  background: var(--color-panel);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-size: 12px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 6px;
}
#tabDefects .result-status-bar {
  justify-content: flex-end;
}
.result-zoom-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.result-zoom-controls input[type="range"] {
  width: 140px;
  accent-color: var(--color-accent);
}

/* ═══════════════════════
   ВКЛАДКА «ТЕКСТУРА» (canvas)
═══════════════════════ */
#tabResult {
  position: relative;
  background: var(--canvas-bg);
}
#resultCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: default;
}
.result-status-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
}
.result-actions { }
#tabDefects {
  position: relative;
  background: var(--canvas-bg);
}
#defectsCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
.defect-size-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.defect-tool-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.tool-icon-btn {
  min-width: 0;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tool-icon-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.defect-size-row input[type="range"] {
  flex: 1;
  accent-color: var(--color-accent);
}
.defect-vector-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-primary);
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.defect-vector-toggle input {
  accent-color: var(--color-accent);
  width: 16px;
  height: 16px;
}
.defect-export-block {
  margin-bottom: 0;
}
.defect-export-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.defect-subtitle {
  margin-bottom: 6px;
}
.defect-export-row .btn {
  min-width: 0;
  flex: 0 0 auto;
  padding: 6px 10px;
}
.defect-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.defect-detail-label {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.defect-detail-toggle {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 140px;
  user-select: none;
  cursor: pointer;
}
.defect-detail-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.defect-detail-track {
  position: relative;
  width: 100%;
  height: 26px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text-secondary) 32%, transparent);
  border: 1px solid var(--color-border);
}
.defect-detail-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(50% - 4px);
  height: 20px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: left var(--anim-fast) ease;
}
.defect-detail-toggle input:checked + .defect-detail-track .defect-detail-thumb {
  left: calc(50% + 2px);
}
.defect-detail-captions {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--color-text-secondary);
}
.defect-detail-low,
.defect-detail-high {
  transition: color var(--anim-fast) ease, font-weight var(--anim-fast) ease;
}
.defect-detail-toggle input:not(:checked) ~ .defect-detail-captions .defect-detail-low,
.defect-detail-toggle input:checked ~ .defect-detail-captions .defect-detail-high {
  color: var(--color-text-primary);
  font-weight: 700;
}
.defect-vector-hint {
  font-size: 11px;
  color: #737373;
  margin-bottom: 8px;
  line-height: 1.4;
}
.defect-layer-color {
  width: 10px;
  min-width: 10px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: transparent;
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), 0 0 0 1px rgba(0,0,0,0.18);
  align-self: stretch;
}
.defect-layer-color::-webkit-color-swatch-wrapper {
  padding: 0;
}
.defect-layer-color::-webkit-color-swatch {
  border: none;
  border-radius: 999px;
}
.defect-add-item {
  width: 100%;
  min-height: 38px;
  border: 1px dashed #737373;
  border-radius: 8px;
  background: transparent;
  color: #525252;
  font-size: 14px;
  line-height: 1.1;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
}
.defect-add-item:hover {
  border-color: #525252;
  color: #f5f5f5;
  background: rgba(82,82,82,0.12);
}
.defect-add-item:disabled,
.defect-add-item:disabled:hover {
  cursor: not-allowed;
  opacity: 0.55;
  color: var(--color-text-secondary);
  border-color: var(--color-border);
  background: transparent;
}
.defect-context-menu {
  position: fixed;
  z-index: 1100;
  min-width: 180px;
  background: var(--color-panel-strong);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px;
  box-shadow: var(--shadow-soft);
}
.defect-context-item {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  text-align: left;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.defect-context-item:hover {
  background: var(--color-hover);
}
.defect-context-item.danger {
  color: var(--color-danger);
}
.defect-context-hotkey {
  font-size: 11px;
  color: var(--color-text-secondary);
}

/* ═══════════════════════
   TOAST
═══════════════════════ */
#toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #2f2f33;
  color: #f5f5f5;
  border: 1px solid #525252;
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 9999;
  white-space: nowrap;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════
   SCROLLBAR
═══════════════════════ */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-thumb-track); }
::-webkit-scrollbar-thumb { background: var(--color-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-thumb-hover); }

::selection {
  background: #d4d4d4;
  color: #171717;
}

a,
a:visited {
  color: var(--color-text-secondary);
}

a:hover,
a:focus-visible {
  color: var(--color-text-primary);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(82, 82, 82, 0.45);
  outline-offset: 2px;
}

progress {
  accent-color: #525252;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-panel-strong) inset;
  -webkit-text-fill-color: var(--color-text-primary);
  border-color: var(--color-border);
}

/* ═══════════════════════
   UI REFRESH (Overlay + Themes)
═══════════════════════ */
:root {
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --workspace-bottom: 56px;
  --workspace-left-offset: 316px;
  --workspace-right-offset: 356px;
  --workspace-right-panel-width: 340px;
  --workspace-main-pill-height: 46px;
  --workspace-main-pill-gap: 12px;
  --radius-10: 10px;
  --radius-12: 12px;
  --panel-blur: blur(8px);
  --anim-fast: 180ms;
  --anim-mid: 220ms;
  --color-bg: #f5f5f5;
  --color-panel: rgba(255, 255, 255, 0.85);
  --color-text-primary: #262626;
  --color-text-secondary: #6b7280;
  --color-border: #d4d4d4;
  --color-hover: #e5e5e5;
  --color-accent: #404040;
  --color-accent-soft: rgba(82, 82, 82, 0.16);
  --color-panel-strong: rgba(255, 255, 255, 0.92);
  --color-canvas-bg: #f5f5f5;
  --canvas-bg: var(--color-canvas-bg);
  --color-overlay-scrim: rgba(23, 23, 23, 0.3);
  --color-thumb-track: rgba(115, 115, 115, 0.18);
  --color-thumb: rgba(115, 115, 115, 0.45);
  --color-thumb-hover: rgba(115, 115, 115, 0.6);
  --color-canvas-guide: rgba(82, 82, 82, 0.55);
  --color-canvas-guide-soft: rgba(82, 82, 82, 0.15);
  --color-canvas-outline: rgba(245, 245, 245, 0.9);
  --color-success: #737373;
  --color-warning: #737373;
  --color-danger: #737373;
  --tool-highlight: #d7ab2f;
  --tool-line: #c9951f;
  --tool-point: #e1bc4b;
  --tool-highlight-soft: rgba(215, 171, 47, 0.22);
  --tool-line-soft: rgba(201, 149, 31, 0.82);
  --color-layer-1: #404040;
  --color-layer-2: #525252;
  --color-layer-3: #6b7280;
  --color-layer-4: #737373;
  --color-layer-5: #525252;
  --color-layer-6: #a3a3a3;
  --color-layer-7: #d4d4d4;
}

html[data-theme="light"],
body[data-theme="light"] {
  --color-bg: #f5f5f5;
  --color-panel: rgba(255, 255, 255, 0.85);
  --color-text-primary: #262626;
  --color-text-secondary: #6b7280;
  --color-border: #d4d4d4;
  --color-hover: #e5e5e5;
  --color-accent: #404040;
  --color-accent-soft: rgba(82, 82, 82, 0.16);
  --color-panel-strong: rgba(255, 255, 255, 0.92);
  --color-canvas-bg: #f5f5f5;
  --canvas-bg: var(--color-canvas-bg);
  --color-overlay-scrim: rgba(23, 23, 23, 0.3);
  --color-thumb-track: rgba(115, 115, 115, 0.18);
  --color-thumb: rgba(115, 115, 115, 0.45);
  --color-thumb-hover: rgba(115, 115, 115, 0.6);
  --color-canvas-guide: rgba(82, 82, 82, 0.55);
  --color-canvas-guide-soft: rgba(82, 82, 82, 0.15);
  --color-canvas-outline: rgba(245, 245, 245, 0.9);
  --color-success: #737373;
  --color-warning: #737373;
  --color-danger: #737373;
  --tool-highlight: #d7ab2f;
  --tool-line: #c9951f;
  --tool-point: #e1bc4b;
  --tool-highlight-soft: rgba(215, 171, 47, 0.22);
  --tool-line-soft: rgba(201, 149, 31, 0.82);
  --color-layer-1: #404040;
  --color-layer-2: #525252;
  --color-layer-3: #6b7280;
  --color-layer-4: #737373;
  --color-layer-5: #525252;
  --color-layer-6: #a3a3a3;
  --color-layer-7: #d4d4d4;
  --shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.12);
}

html[data-theme="dark"],
body[data-theme="dark"] {
  --color-bg: #171717;
  --color-panel: rgba(38, 38, 38, 0.85);
  --color-text-primary: #d4d4d4;
  --color-text-secondary: #a3a3a3;
  --color-border: #525252;
  --color-hover: #3f3f46;
  --color-accent: #525252;
  --color-accent-soft: rgba(82, 82, 82, 0.22);
  --color-panel-strong: rgba(38, 38, 38, 0.92);
  --color-canvas-bg: #1f1f1f;
  --canvas-bg: var(--color-canvas-bg);
  --color-overlay-scrim: rgba(23, 23, 23, 0.45);
  --color-thumb-track: rgba(163, 163, 163, 0.16);
  --color-thumb: rgba(163, 163, 163, 0.4);
  --color-thumb-hover: rgba(163, 163, 163, 0.58);
  --color-canvas-guide: rgba(120, 120, 120, 0.65);
  --color-canvas-guide-soft: rgba(120, 120, 120, 0.2);
  --color-canvas-outline: rgba(229, 229, 229, 0.9);
  --color-success: #737373;
  --color-warning: #737373;
  --color-danger: #737373;
  --tool-highlight: #d7ab2f;
  --tool-line: #c9951f;
  --tool-point: #e1bc4b;
  --tool-highlight-soft: rgba(215, 171, 47, 0.24);
  --tool-line-soft: rgba(201, 149, 31, 0.86);
  --color-layer-1: #404040;
  --color-layer-2: #525252;
  --color-layer-3: #6b7280;
  --color-layer-4: #737373;
  --color-layer-5: #525252;
  --color-layer-6: #a3a3a3;
  --color-layer-7: #d4d4d4;
  --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.35);
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

body[data-theme="dark"] .svg-invert-on-dark {
  filter: invert(1);
}

body[data-theme="dark"] .project-tree-icon,
body[data-theme="dark"] .project-context-icon {
  filter: invert(1);
  opacity: 0.82;
}

body {
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}

.dashboard {
  background: var(--color-bg);
  color: var(--color-text-primary);
}
.dashboard-header h1 { color: var(--color-text-primary); }
.dashboard-section-title { color: var(--color-text-primary); }
.dashboard-team-title { color: var(--color-text-primary); }
.dashboard-section-meta,
.dashboard-team-meta,
.dashboard-empty { color: var(--color-text-secondary); }
.project-tile {
  background: var(--color-panel-strong);
  border-color: var(--color-border);
  box-shadow: var(--shadow-soft);
}
.project-tile-title { color: var(--color-text-primary); }
.project-tile-meta { color: var(--color-text-secondary); }
.project-tile-badge,
.project-tile-menu-btn {
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
.project-tile-menu {
  background: var(--color-panel-strong);
  border-color: var(--color-border);
  box-shadow: var(--shadow-soft);
}
.project-tile-menu button {
  color: var(--color-text-primary);
}
.project-tile-menu button:hover {
  background: var(--color-hover);
}

.app {
  position: fixed;
  inset: 0;
  display: flex;
  overflow: hidden;
}

.main-area {
  position: relative;
  flex: 1;
  z-index: 0;
}

.main-area .tab-content,
.main-area .tab-content.active {
  position: absolute;
  inset: 0;
  bottom: 0;
  z-index: 0;
}

.main-area-pill {
  position: fixed;
  width: var(--workspace-right-panel-width);
  right: var(--space-16);
  top: var(--space-16);
  z-index: 30;
}

.lock-banner {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--space-16) + var(--workspace-main-pill-height) + 8px);
  z-index: 32;
  max-width: min(900px, calc(100vw - 40px));
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--color-warning) 55%, var(--color-border));
  background: color-mix(in srgb, var(--color-panel-strong) 92%, transparent);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-soft);
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
}

.panel-overlay,
.sidebar,
.project-panel {
  position: absolute;
  top: var(--space-16);
  bottom: var(--workspace-bottom);
  width: 280px;
  height: auto;
  max-height: calc(100% - var(--space-16) - var(--workspace-bottom));
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-panel);
  backdrop-filter: var(--panel-blur);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-soft);
  transition: width var(--anim-mid) ease, transform var(--anim-mid) ease, opacity var(--anim-fast) ease;
  z-index: 10;
  overflow: hidden;
}

.project-panel {
  width: 320px;
  top: calc(var(--space-16) + var(--workspace-main-pill-height) + var(--workspace-main-pill-gap));
}

.sidebar.dock-left,
.project-panel.dock-left { left: var(--space-16); right: auto; }
.sidebar.dock-right,
.project-panel.dock-right { right: var(--space-16); left: auto; }

.sidebar.stack-top,
.project-panel.stack-top { bottom: calc(50% + var(--space-8)); }
.sidebar.stack-bottom,
.project-panel.stack-bottom { top: calc(50% + var(--space-8)); }

.panel-overlay-head,
.project-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-panel-strong);
  user-select: none;
}
.panel-overlay-head {
  cursor: pointer;
}

.panel-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.panel-collapse-chevron {
  font-size: 13px;
  color: var(--color-text-secondary);
  width: 14px;
  text-align: center;
  flex: 0 0 auto;
}

.project-panel-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.panel-title {
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: 600;
}

.sidebar .tabs {
  margin: var(--space-12) 0 0;
  border: 1px solid var(--color-border);
  background: var(--color-panel-strong);
  border-radius: 8px;
  padding: 4px;
  gap: 4px;
  width: 100%;
  display: flex;
  box-sizing: border-box;
}
.tab-btn {
  border-radius: 6px;
  color: var(--color-text-secondary);
  border-bottom: none;
  padding: var(--space-8) 6px;
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab-btn.active { color: var(--color-panel-strong); background: var(--color-accent); }

.sidebar .tab-content {
  padding: var(--space-12);
  overflow: auto;
}
.section {
  border: 1px solid var(--color-border);
  background: var(--color-panel-strong);
  border-radius: 10px;
  margin-bottom: var(--space-12);
  padding: var(--space-12);
}
.section-title { color: var(--color-text-secondary); margin-bottom: var(--space-8); }

.btn,
.btn-icon,
.ui-icon-btn {
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-panel) 80%, transparent);
  color: var(--color-text-primary);
  transition: background var(--anim-fast), transform var(--anim-fast), border-color var(--anim-fast);
}
.btn:hover,
.btn-icon:hover,
.ui-icon-btn:hover {
  background: var(--color-hover);
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
}
.btn:active,
.btn-icon:active,
.ui-icon-btn:active { transform: translateY(1px); }

.ui-icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
}
.ui-icon-btn.is-active { background: var(--color-accent); color: var(--color-panel-strong); border-color: var(--color-accent); }

.sidebar.tools-collapsed {
  bottom: auto;
  height: auto;
  max-height: none;
}
.sidebar.tools-collapsed .tabs,
.sidebar.tools-collapsed .tab-content,
.sidebar.tools-collapsed .sidebar-help-bar,
.sidebar.tools-collapsed .sidebar-lock-overlay {
  display: none !important;
}
.sidebar.tools-collapsed .panel-overlay-head {
  justify-content: space-between;
  border-bottom: none;
  padding: var(--space-12) var(--space-16);
}
.sidebar.tools-collapsed .panel-title-wrap {
  writing-mode: horizontal-tb;
  transform: none;
  gap: 8px;
}
.sidebar.tools-collapsed .panel-title {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}
.sidebar.tools-collapsed .panel-collapse-chevron {
  font-size: 13px;
}

.panel-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 15;
  background: transparent;
  transition: background var(--anim-fast) ease;
}
.panel-resize-handle:hover,
.panel-resize-handle.resizing {
  background: rgba(115, 115, 115, 0.32);
}
.resize-right { right: -3px; }
.resize-left { left: -3px; }
.sidebar.tools-collapsed .panel-resize-handle {
  display: none;
}
.project-panel.projects-collapsed {
  bottom: auto;
  height: auto;
  max-height: none;
}
.project-panel.projects-collapsed .project-panel-body,
.project-panel.projects-collapsed .panel-resize-handle {
  display: none !important;
}
.project-panel.projects-collapsed .project-panel-title-wrap {
  align-items: center;
  gap: 8px;
}
.project-panel.projects-collapsed .project-panel-title-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.project-panel.projects-collapsed .panel-title {
  display: none;
}
.project-panel.projects-collapsed #currentProjectTitle {
  font-size: 13px;
  font-weight: 700;
  color: #e5e5e5;
}

.panel-overlay.dragging,
.sidebar.dragging,
.project-panel.dragging { opacity: 1; }

.source-status-bar,
.result-status-bar {
  background: var(--color-panel);
  backdrop-filter: var(--panel-blur);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.no-elevation-overlay {
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--color-accent) 7%, transparent), transparent 60%);
  backdrop-filter: none;
}

.modal-overlay {
  z-index: 100;
  background: var(--color-overlay-scrim);
  backdrop-filter: blur(2px);
  animation: fadeIn var(--anim-mid) ease;
}
.modal-card {
  background: var(--color-panel-strong);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  animation: slideUp var(--anim-mid) ease;
}

#toast {
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-panel-strong);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-soft);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ═══════════════════════
   Color Token Overrides
═══════════════════════ */
html, body, .app, .main-area, #tabSource2, #tabResult, #tabDefects { background: var(--color-bg); color: var(--color-text-primary); }
.project-tree, .hint-box, .modal-message, .empty-list, .defect-detail-row, .wall-size-display, #sourceInfo, #resultInfo, #defectsInfo, #defectsToolInfo {
  color: var(--color-text-secondary);
}
.project-tree-item, .photo-name, .layer-name, .modal-title { color: var(--color-text-primary); }
.project-tree-item:hover, .photo-item:hover, .layer-item:hover, .project-context-item:hover:not(:disabled) { background: var(--color-hover); }
.project-tree-item.active, .photo-item.active, .layer-item.active { background: var(--color-accent-soft); border-color: var(--color-accent); }
.layer-item:hover:not(.active),
.layer-item:focus-within:not(.active) {
  background: color-mix(in srgb, var(--color-hover) 55%, transparent);
}
.layer-item:focus-within:not(.active) {
  background: transparent;
  border-color: color-mix(in srgb, var(--color-border) 82%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border) 72%, transparent);
}
.layer-item.active,
.layer-item.active:hover,
.layer-item.active:focus-within {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  box-shadow: inset 3px 0 0 var(--color-accent);
}
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-panel-strong); }
.btn-success { background: var(--color-success); border-color: var(--color-success); color: var(--color-panel-strong); }
.btn-del { border-color: var(--color-danger); color: var(--color-danger); }
.btn-del:hover { background: var(--color-hover); border-color: var(--color-danger); color: var(--color-danger); }
.photo-pts.pts-ok, .pts-done { color: var(--color-success); }
.photo-pts.pts-bad { color: var(--color-warning); }
.project-context-item.danger { color: var(--color-danger); }
.project-context-item.danger:hover:not(:disabled) { background: var(--color-hover); }
.wall-inputs input, .layer-name-input, .modal-input, .tree-node-input {
  background: var(--color-panel-strong);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
.wall-inputs input:focus, .modal-input:focus, .tree-node-input:focus, .layer-name-input:focus { border-color: var(--color-accent); }
.defect-add-item { border-color: var(--color-border); color: var(--color-text-secondary); background: transparent; }
.defect-add-item:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-hover); }
.source-container, #tabResult, #tabDefects { background: var(--color-canvas-bg); }

/* ═══════════════════════
   AUTH PAGES
═══════════════════════ */
body.auth-page {
  overflow: auto;
}

.auth-wrap {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.auth-stack {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.auth-pill {
  width: 100%;
}

.auth-card {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-12);
  padding: 28px 26px 24px;
  background: var(--color-panel-strong);
  box-shadow: var(--shadow-soft);
}

.auth-card h1 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.auth-sub {
  margin: 0 0 20px;
  color: var(--color-text-secondary);
  font-size: 13px;
}

.auth-field {
  display: block;
  margin-bottom: 14px;
}

.auth-field > label {
  display: block;
  margin-bottom: 6px;
  color: var(--color-text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.auth-field input[type="email"],
.auth-field input[type="password"],
.auth-field input[type="text"] {
  width: 100%;
  padding: 9px 11px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-primary);
  font-size: 14px;
  outline: none;
  transition: border-color var(--anim-fast) ease;
}

.auth-field input:focus {
  border-color: var(--color-accent);
}

.auth-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 16px;
  color: var(--color-text-secondary);
  font-size: 13px;
  user-select: none;
}

.auth-check input {
  accent-color: var(--color-accent);
}

.auth-submit {
  width: 100%;
  padding: 10px 12px;
}

.auth-link-row {
  margin-top: 14px;
  font-size: 13px;
  color: var(--color-text-secondary);
  text-align: center;
}

.auth-link-row a {
  color: var(--color-accent);
  text-decoration: none;
}

.auth-link-row a:hover {
  text-decoration: underline;
}

.auth-flash {
  margin-bottom: 14px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid var(--color-border);
  background: var(--color-panel);
  color: var(--color-text-primary);
}

.auth-flash.error {
  border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border));
}

.auth-flash.success {
  border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border));
}

.auth-flash.info,
.auth-flash.message {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
}

.auth-errors {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-danger);
  font-size: 12px;
}

.workspace-pill .pill-profile-btn {
  width: 38px;
  height: 38px;
  border-color: transparent;
  background: transparent;
  opacity: 1;
}

.workspace-pill .pill-profile-btn:hover {
  background: transparent;
  border-color: transparent;
  opacity: 0.5;
}

.workspace-pill .pill-profile-btn .profile-mask-icon {
  width: 28px;
  height: 28px;
}

@media (max-width: 900px) {
  .workspace-pill {
    flex-wrap: wrap;
    justify-content: flex-start;
    border-radius: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .workspace-tabs,
  .workspace-home,
  .workspace-pill-actions {
    width: 100%;
  }

  .workspace-pill-actions {
    margin-left: 0;
    justify-content: flex-end;
  }
}

@media (max-width: 640px) {
  .workspace-tabs {
    gap: 8px;
    flex-wrap: wrap;
  }

  .workspace-home-link {
    width: fit-content;
  }

  .workspace-tab {
    flex: 1 1 0;
    text-align: center;
  }

  .pill-user-email {
    max-width: 44vw;
  }
}