/* 1. Page frame */

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

body {
  --index-shell-side:var(--asft-index-shell-side-2793cbc214);
  --index-topbar-top:var(--asft-index-topbar-top-67931646dc);
  --index-content-top:var(--asft-index-content-top-5f9b85927e);
  --index-content-bottom:var(--asft-index-content-bottom-2793cbc214);
  --index-shell-gap:var(--asft-index-shell-gap-2793cbc214);
  --index-left-panel-width:var(--asft-index-left-panel-width-da495d2a82);
  --index-left-actions-bottom:var(--asft-index-left-actions-bottom-47128122f3);
  --index-left-action-button-height:var(--asft-index-left-action-button-height-be408877d8);
  --index-left-action-gap:var(--asft-index-left-action-gap-c98b24d7ca);
  --index-left-actions-reserve:var(--asft-index-left-actions-reserve-cc4b8c55c9);
  --index-left-contact-bottom: calc(var(--index-left-actions-bottom) + var(--index-left-action-button-height) + var(--index-left-action-gap));
  min-height:var(--asft-min-height-728c5727d6);
  overflow: hidden;
  background: var(--as-page-bg);
  color: var(--as-text);
  font-family: var(--as-font-main);
}

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

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

#appShell button:focus-visible {
  outline: var(--as-index-focus-outline);
  outline-offset: var(--as-index-focus-offset);
}

button:disabled {
  opacity:var(--asft-opacity-bffb16d6fe);
  cursor: not-allowed;
}

.as-icon {
  display: block;
  width:var(--asft-width-284478b856);
  height:var(--asft-height-284478b856);
  flex: 0 0 auto;
  color: currentColor;
}

.hidden,
[hidden],
#authView.hidden,
#projectView.hidden,
#brandPane.hidden,
#projectsPane.hidden,
#confirmWrap.hidden,
#consentWrap.hidden,
#registerLinkBtn[hidden] {
  display: none;
}

.shell {
  width:var(--asft-width-26ee43ad76);
  height:var(--asft-height-728c5727d6);
  min-height:var(--asft-min-height-728c5727d6);
  display: grid;
  grid-template-columns: var(--index-left-panel-width) minmax(0, 1fr);
  gap: var(--index-shell-gap);
  padding: var(--index-content-top) var(--index-shell-side) var(--index-content-bottom);
  overflow: hidden;
}

.left,
.right {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
}

/* 2. Topbar and brand */

.as-index-topbar {
  position: fixed;
  left: var(--index-shell-side);
  top: var(--index-topbar-top);
  z-index:var(--asft-z-index-69f59c273b);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.as-index-brand {
  display: inline-flex;
  align-items: center;
  gap:var(--asft-gap-ab98c04774);
  color: var(--as-text);
  font-size:var(--asft-font-size-2793cbc214);
  font-weight: var(--as-font-weight-bold);
  line-height:var(--asft-line-height-6b86b273ff);
  letter-spacing:var(--asft-letter-spacing-653cd8dfd9);
}

.as-index-brand-mark {
  width:var(--asft-width-da5e345cda);
  height:var(--asft-height-da5e345cda);
  flex: 0 0 52px;
  object-fit: contain;
}

.input-language-switch-index {
  margin-left:var(--asft-margin-left-c98b24d7ca);
  align-self: center;
}

#brandPane {
  position: relative;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--as-text);
}

.as-index-brand-hero-mark {
  width:var(--asft-width-b9d0f589ed);
  height:var(--asft-height-b9d0f589ed);
  flex: 0 0 260px;
  object-fit: contain;
  margin:var(--asft-margin-17836d15cb);
}

.brand-title {
  font-size:var(--asft-font-size-0b34eae561);
  font-weight: var(--as-font-weight-bold);
  line-height:var(--asft-line-height-b05e244762);
  letter-spacing:var(--asft-letter-spacing-01e955be7a);
}

.brand-name {
  display: none;
}

/* 3. Auth and account */

#authView,
.account-panel {
  width:var(--asft-width-3a38f58a92);
  height: 100%;
  min-height: 0;
  flex: 0 0 auto;
}

#authView,
.account-card,
.projects-pane {
  border: var(--as-border-width) solid var(--as-index-panel-border);
  border-radius: var(--as-radius-modal);
  background: var(--as-index-panel-bg);
  color: var(--as-text);
  box-shadow: var(--as-index-panel-shadow);
}

#authView {
  position: relative;
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding:var(--asft-padding-920d9cb01f);
  scrollbar-width: thin;
  scrollbar-color: var(--as-scrollbar-thumb) var(--as-scrollbar-track);
}

#authView > * {
  flex-shrink: 0;
}

.auth-title {
  margin:var(--asft-margin-97c4ea0211);
  font-size:var(--as-type-page-title);
  font-weight: var(--as-font-weight-bold);
  line-height:var(--asft-line-height-717594bbc6);
  letter-spacing:var(--asft-letter-spacing-7ceacc9884);
}

.auth-back-to-login {
  width: auto;
  height: auto;
  min-height: 0;
  margin:var(--asft-margin-83b0159549);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--as-index-link);
  font-size:var(--as-type-body);
  font-weight: var(--as-font-weight-heavy);
  line-height:var(--asft-line-height-9bf0c8e6e7);
  text-align: left;
}

.auth-back-to-login:not(.hidden) {
  display: inline-flex;
  align-items: center;
  gap:var(--asft-gap-7adef6a048);
}

.auth-back-to-login:hover {
  background: transparent;
  color: var(--as-index-link-hover);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.auth-back-to-login .as-icon {
  width:var(--asft-width-ab98c04774);
  height:var(--asft-height-ab98c04774);
  flex: 0 0 18px;
  color: currentColor;
}

.as-auth-switch-link {
  width: 100%;
  height: auto;
  min-height: 0;
  margin:var(--asft-margin-53d85a284b);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--as-index-link);
  font-size:var(--as-type-body);
  font-weight: var(--as-font-weight-heavy);
  line-height:var(--asft-line-height-77ac319bfe);
  text-align: center;
}

.as-auth-switch-link:hover {
  background: transparent;
  color: var(--as-index-link-hover);
  text-decoration: underline;
  text-underline-offset: 4px;
}

#authView label {
  display: block;
  margin:var(--asft-margin-926d065504);
  color: var(--as-text-soft);
  font-size:var(--as-type-control);
  font-weight: var(--as-font-weight-bold);
  line-height:var(--asft-line-height-5d6c43977e);
}

#authView input {
  width: 100%;
  height:var(--asft-height-a7d674f814);
  margin:var(--asft-margin-a3129fa7e9);
  padding:var(--asft-padding-6b21e42df4);
  border: var(--as-border-width) solid var(--as-index-panel-border);
  border-radius: var(--as-radius-xl);
  outline: 0;
  background: var(--as-index-control-bg);
  color: var(--as-text);
  font-size:var(--as-type-section);
  line-height:var(--asft-line-height-6b86b273ff);
}

#authView input::placeholder {
  color: var(--as-text-muted);
}

#authView input:focus-visible {
  border-color: var(--as-index-focus-border);
  box-shadow: var(--as-index-focus-ring);
}

.as-password-field {
  position: relative;
}

#authView .as-password-field input {
  padding-right:var(--asft-padding-right-1347c62b5f);
}

.as-password-toggle {
  position: absolute;
  top: 0;
  right:var(--asft-right-ab98c04774);
  width:var(--asft-width-2793cbc214);
  height:var(--asft-height-a7d674f814);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--as-radius-lg);
  background: transparent;
  color: var(--as-text-muted);
}

.as-password-toggle .as-icon {
  width:var(--asft-width-2793cbc214);
  height:var(--asft-height-2793cbc214);
}

.as-password-toggle:hover {
  background: transparent;
  color: var(--as-text);
}

.consent {
  display: flex;
  align-items: flex-start;
  gap:var(--asft-gap-38cb6b4a22);
  margin:var(--asft-margin-e9b332761b);
  color: var(--as-text-soft);
  font-size:var(--as-type-body);
  line-height:var(--asft-line-height-9bf0c8e6e7);
}

#authView .consent input {
  width:var(--asft-width-ab98c04774);
  height:var(--asft-height-ab98c04774);
  min-width:var(--asft-min-width-ab98c04774);
  margin: 0;
  padding: 0;
  flex: 0 0 18px;
  accent-color: var(--as-section);
}

.consent a {
  color: var(--as-section);
  font-weight: var(--as-font-weight-heavy);
}

#authBtn {
  width: 100%;
  height:var(--asft-height-f9ea6eb85d);
  margin:var(--asft-margin-6475ac0f76);
  border: var(--as-border-width) solid var(--as-index-primary-border);
  border-radius: var(--as-radius-xl);
  background: var(--as-index-primary-bg);
  color: var(--as-index-primary-text);
  font-size:var(--asft-font-size-5d6c43977e);
  font-weight: var(--as-font-weight-black);
  line-height:var(--asft-line-height-6b86b273ff);
  box-shadow: var(--as-index-primary-shadow);
}

.as-contact-admin {
  width: 100%;
  height: auto;
  min-height:var(--asft-min-height-c80bfee312);
  margin:var(--asft-margin-b260dd897c);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap:var(--asft-gap-38cb6b4a22);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--as-index-link);
  font-size:var(--as-type-control);
  font-weight: var(--as-font-weight-heavy);
  line-height:var(--asft-line-height-c80bfee312);
  text-align: center;
}

.as-contact-admin .as-icon {
  width:var(--asft-width-5d6c43977e);
  height:var(--asft-height-5d6c43977e);
  flex: 0 0 22px;
}

.as-contact-admin:hover {
  background: transparent;
  color: var(--as-index-link-hover);
  text-decoration: underline;
  text-underline-offset: 4px;
}

#contactAdminBtn {
  position: absolute;
  left:var(--asft-left-95a8d358f5);
  right:var(--asft-right-95a8d358f5);
  bottom: var(--index-left-contact-bottom);
  width: auto;
  margin: 0;
}

.account-panel {
  display: flex;
  flex-direction: column;
  gap:var(--asft-gap-ab98c04774);
}

.account-card {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
  height: auto;
  display: flex;
  flex-direction: column;
  padding:var(--asft-padding-920d9cb01f);
  overflow: hidden;
}

#projectsPane .project-create h2,
.projects-pane > h2 {
  margin: 0;
  color: var(--as-section-title-color);
  font-size:var(--as-type-body);
  font-weight: var(--as-font-weight-black);
  line-height:var(--asft-line-height-9f0e787f95);
  letter-spacing:var(--asft-letter-spacing-51d91edc0d);
  text-transform: uppercase;
}

.projects-pane > h2 {
  margin:var(--asft-margin-825bb706ba);
}

.account-card h1 {
  margin:var(--asft-margin-97c4ea0211);
  color: var(--as-text);
  font-size:var(--as-type-page-title);
  font-weight: var(--as-font-weight-bold);
  line-height:var(--asft-line-height-717594bbc6);
  letter-spacing:var(--asft-letter-spacing-7ceacc9884);
  text-transform: none;
}

.as-account-view {
  min-height: 0;
}

.as-account-main {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap:var(--asft-gap-9bf0c8e6e7);
  align-items: center;
}

.as-account-avatar {
  width:var(--asft-width-96ecb2fdd5);
  height:var(--asft-height-96ecb2fdd5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--as-border-width-strong) solid var(--as-index-icon);
  border-radius: var(--as-radius-pill);
  color: var(--as-index-icon);
  font-size:var(--asft-font-size-929994f590);
  font-weight: var(--as-font-weight-medium);
  line-height:var(--asft-line-height-6b86b273ff);
}

.as-account-name {
  color: var(--as-text);
  font-size:var(--as-type-section);
  font-weight: var(--as-font-weight-bold);
  line-height:var(--asft-line-height-77ac319bfe);
}

.as-account-divider {
  height: var(--as-border-width);
  margin:var(--asft-margin-a470600870);
  background: var(--as-border-soft);
}

.as-account-info-row {
  min-height:var(--asft-min-height-7d2476403f);
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap:var(--asft-gap-ab98c04774);
  align-items: start;
  color: var(--as-index-icon);
}

.as-account-info-row .as-icon {
  width:var(--asft-width-2793cbc214);
  height:var(--asft-height-2793cbc214);
  color: currentColor;
}

.as-account-info-label {
  color: var(--as-text-soft);
  font-size:var(--asft-font-size-9bb5d32de4);
  font-weight: var(--as-font-weight-medium);
  line-height:var(--asft-line-height-77ac319bfe);
}

.as-account-info-value {
  margin-top:var(--asft-margin-top-a15202ec59);
  color: var(--as-text-muted);
  font-size:var(--as-type-body);
  font-weight: var(--as-font-weight-regular);
  line-height:var(--asft-line-height-77ac319bfe);
}

.as-account-actions {
  position: absolute;
  left:var(--asft-left-95a8d358f5);
  right:var(--asft-right-95a8d358f5);
  bottom: var(--index-left-actions-bottom);
  margin: 0;
  display: grid;
  gap: var(--index-left-action-gap);
  align-content: end;
}

.as-account-contact-admin {
  margin: 0;
}

#logoutBtn {
  width: 100%;
  height: var(--index-left-action-button-height);
  min-height: var(--index-left-action-button-height);
  margin: 0;
  border: var(--as-border-width) solid var(--as-border);
  border-radius: var(--as-radius-xl);
  background: var(--as-control-bg);
  color: var(--as-text);
  font-size:var(--as-type-section);
  font-weight: var(--as-font-weight-heavy);
}

#projectsPane .project-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 216px;
  grid-template-areas:
    "title title"
    "input button";
  column-gap:var(--asft-column-gap-c80bfee312);
  row-gap:var(--asft-row-gap-ab98c04774);
  margin:var(--asft-margin-df4262535d);
  padding:var(--asft-padding-19908021d5);
  border: var(--as-border-width) solid var(--as-index-panel-border);
  border-radius: var(--as-radius-xl);
  background: var(--as-index-card-bg);
  color: var(--as-text);
}

#projectsPane .project-create h2 {
  grid-area: title;
}

#projectName {
  grid-area: input;
}

#createBtn {
  grid-area: button;
  align-self: end;
}

#projectsPane .project-create input {
  width: 100%;
  height:var(--asft-height-a7d674f814);
  padding:var(--asft-padding-6b21e42df4);
  border: var(--as-border-width) solid var(--as-index-panel-border);
  border-radius: var(--as-radius-lg);
  outline: 0;
  background: var(--as-index-control-bg);
  color: var(--as-text);
  font-size:var(--as-type-control);
  line-height:var(--asft-line-height-6b86b273ff);
}

#projectsPane .project-create input::placeholder {
  color: var(--as-text-muted);
}

#projectsPane .project-create input:focus-visible {
  border-color: var(--as-index-focus-border);
  box-shadow: var(--as-index-focus-ring);
}

#projectsPane .project-create button {
  width: 100%;
  height:var(--asft-height-a7d674f814);
  min-height:var(--asft-min-height-a7d674f814);
  border: var(--as-border-width) solid var(--as-index-primary-border);
  border-radius: var(--as-radius-md);
  background: var(--as-index-primary-bg);
  color: var(--as-index-primary-text);
  font-size:var(--as-type-body);
  font-weight: var(--as-font-weight-black);
  line-height:var(--asft-line-height-6b86b273ff);
  box-shadow: var(--as-index-primary-shadow);
}

.status {
  min-height:var(--asft-min-height-9bf0c8e6e7);
  color: var(--as-text-muted);
  font-size: var(--as-type-sm);
  line-height:var(--asft-line-height-77ac319bfe);
  white-space: pre-wrap;
}

.status:empty {
  display: none;
}

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

.status.ok {
  color: var(--as-cta);
}

/* 4. Project workspace */

.projects-pane {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 0;
  padding:var(--asft-padding-f041ed5a68);
  overflow: hidden;
}

.projects-pane > h1 {
  margin:var(--asft-margin-b37303e440);
  color: var(--as-text);
  font-size:var(--as-type-page-title);
  font-weight: var(--as-font-weight-bold);
  line-height:var(--asft-line-height-b05e244762);
  letter-spacing:var(--asft-letter-spacing-7ceacc9884);
}

.project-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap:var(--asft-gap-38cb6b4a22);
  overflow-y: auto;
  padding-right:var(--asft-padding-right-356601538d);
  scrollbar-width: thin;
  scrollbar-color: var(--as-scrollbar-thumb) var(--as-scrollbar-track);
}

.empty {
  padding:var(--asft-padding-c80bfee312);
  border: var(--as-border-width) dashed var(--as-border);
  border-radius: var(--as-radius-xl);
  color: var(--as-text-muted);
  font-size:var(--as-type-body);
  line-height:var(--asft-line-height-9c193c604a);
  text-align: center;
}

.project-item {
  width: 100%;
  min-height:var(--asft-min-height-43b2253d8c);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 170px 126px 24px;
  gap:var(--asft-gap-67931646dc);
  align-items: center;
  padding:var(--asft-padding-08ec2b7c1d);
  border: var(--as-border-width) solid var(--as-index-row-border);
  border-radius: var(--as-radius-xl);
  background: var(--as-index-row-bg);
  color: var(--as-text);
  text-align: left;
}

.project-item:hover {
  border-color: var(--as-border);
  background: var(--as-index-row-hover-bg);
}

.project-item.selected {
  border-color: var(--as-index-selected-border);
  background: var(--as-index-row-selected-bg);
  box-shadow: none;
}

.project-folder-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--as-index-icon);
}

.project-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--as-text-muted);
}

.project-item:hover .project-arrow,
.project-item.selected .project-arrow {
  color: var(--as-index-selected-accent);
}

.project-folder-icon .as-icon,
.project-arrow .as-icon {
  width:var(--asft-width-2793cbc214);
  height:var(--asft-height-2793cbc214);
}

.project-name-wrap {
  min-width: 0;
  display: flex;
  align-items: center;
  gap:var(--asft-gap-7769e81702);
}

.project-name {
  min-width: 0;
  overflow: hidden;
  color: var(--as-text);
  font-size:var(--as-type-section);
  font-weight: var(--as-font-weight-bold);
  line-height:var(--asft-line-height-77ac319bfe);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-badge {
  width: fit-content;
  min-height:var(--asft-min-height-48984c3d28);
  align-items: center;
  padding:var(--asft-padding-6fa1df9f7c);
  border: var(--as-border-width) solid var(--as-index-badge-border);
  border-radius: var(--as-radius-pill);
  background: var(--as-index-badge-bg);
  color: var(--as-index-badge-text);
  font-size: var(--as-type-xs);
  font-weight: var(--as-font-weight-black);
  line-height:var(--asft-line-height-6b86b273ff);
  text-transform: uppercase;
}

.project-badge:not([hidden]) {
  display: inline-flex;
}

.project-date,
.project-takes {
  color: var(--as-index-meta-text);
  font-size: var(--as-type-sm);
  font-weight: var(--as-font-weight-medium);
  line-height:var(--asft-line-height-77ac319bfe);
  white-space: nowrap;
}

.button-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap:var(--asft-gap-c80bfee312);
  margin-top:var(--asft-margin-top-929994f590);
}

.as-project-action-btn {
  width: 100%;
  height:var(--asft-height-be408877d8);
  min-height:var(--asft-min-height-be408877d8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap:var(--asft-gap-7769e81702);
  padding:var(--asft-padding-d2d6184e01);
  border: var(--as-border-width) solid var(--as-index-selected-border);
  border-radius: var(--as-radius-xl);
  background: var(--as-index-row-bg);
  color: var(--as-index-selected-accent);
  font-size:var(--as-type-section);
  font-weight: var(--as-font-weight-heavy);
  line-height:var(--asft-line-height-6b86b273ff);
}

.as-project-action-btn .as-icon {
  width:var(--asft-width-2793cbc214);
  height:var(--asft-height-2793cbc214);
  color: currentColor;
}

.as-project-action-btn:hover:not(:disabled) {
  background: var(--as-index-control-hover-bg);
}

#deleteProjectBtn.as-project-action-btn {
  border-color: var(--as-danger);
  background: var(--as-index-row-bg);
  color: var(--as-danger);
}

#deleteProjectBtn.as-project-action-btn:hover:not(:disabled) {
  background: var(--as-index-danger-hover-bg);
  box-shadow: none;
}

/* Projects and their recordings are append-only from the operator UI. */
#deleteProjectBtn {
  display: none !important;
}

/* 5. Status and dialogs */

.as-contact-card {
  width:var(--asft-width-0fbb4e7c1c);
  padding: var(--as-modal-padding-contact);
  border-radius: var(--as-modal-radius-contact);
}

.as-policy-card {
  width:var(--asft-width-88fe2e5e32);
  padding: var(--as-modal-padding-policy);
  border-radius: var(--as-modal-radius-policy);
}

.as-contact-head {
  display: grid;
  grid-template-columns: var(--as-modal-contact-head-icon-size) minmax(0, 1fr);
  gap: var(--as-modal-contact-head-gap);
  align-items: center;
  margin-bottom:var(--asft-margin-bottom-2793cbc214);
  padding-right:var(--asft-padding-right-717594bbc6);
}

.as-contact-head h2 {
  margin:var(--asft-margin-04789cee17);
  max-width:var(--asft-max-width-d16c9e6350);
  color: var(--as-modal-title-color);
  font-size: var(--as-modal-contact-title-size);
  font-weight: var(--as-modal-title-weight);
  line-height:var(--asft-line-height-dd024733e8);
  letter-spacing:var(--asft-letter-spacing-653cd8dfd9);
}

.as-contact-head h2 span {
  display: block;
}

.as-contact-head p {
  margin: 0;
  color: var(--as-modal-text-color);
  font-size: var(--as-type-control);
  line-height:var(--asft-line-height-98737cf896);
}

.as-contact-icon {
  width: var(--as-modal-contact-head-icon-size);
  height: var(--as-modal-contact-head-icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--as-border-width) solid var(--as-modal-contact-icon-border);
  border-radius: var(--as-radius-pill);
  background: var(--as-modal-contact-icon-bg);
  color: var(--as-cta);
  box-shadow: var(--as-modal-contact-icon-shadow);
}

.as-contact-list {
  display: grid;
  gap:var(--asft-gap-38cb6b4a22);
}

.as-contact-row {
  min-height: var(--as-modal-contact-row-height);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap:var(--asft-gap-7769e81702);
  align-items: center;
  padding:var(--asft-padding-df2b320053);
  border: var(--as-border-width) solid var(--as-modal-contact-row-border);
  border-radius: var(--as-radius-xl);
  background: var(--as-modal-contact-row-bg);
  color: var(--as-text);
}

.as-contact-row-icon {
  color: var(--as-cta);
}

.as-contact-row-label,
.as-contact-row-value {
  display: block;
}

.as-contact-row-label {
  color: var(--as-text-muted);
  font-size: var(--as-type-xs);
  font-weight: var(--as-font-weight-heavy);
  line-height:var(--asft-line-height-6b86b273ff);
  text-transform: uppercase;
  letter-spacing:var(--asft-letter-spacing-486c19b3ac);
}

.as-contact-row-value {
  margin-top:var(--asft-margin-top-3772b3a113);
  color: var(--as-text);
  font-size:var(--as-type-control);
  font-weight: var(--as-font-weight-heavy);
  line-height:var(--asft-line-height-9f0e787f95);
}

.as-contact-qr-wrap {
  margin-top:var(--asft-margin-top-ab98c04774);
  padding:var(--asft-padding-5d5a8f12ea);
  border: var(--as-border-width) solid var(--as-modal-contact-qr-border);
  border-radius: var(--as-radius-modal);
  background: var(--as-modal-contact-qr-bg);
  text-align: center;
}

.as-contact-qr {
  width: var(--as-modal-contact-qr-size);
  height: var(--as-modal-contact-qr-size);
  display: block;
  margin:var(--asft-margin-0f308cfb7e);
  object-fit: contain;
}

.as-contact-qr-label {
  margin-top:var(--asft-margin-top-7769e81702);
  color: var(--as-modal-contact-qr-label);
  font-size: var(--as-type-control);
  font-weight: var(--as-font-weight-black);
  line-height:var(--asft-line-height-6b86b273ff);
  text-align: center;
}

.as-dialog-actions {
  display: grid;
  margin-top:var(--asft-margin-top-2793cbc214);
}

.as-policy-card h2 {
  margin:var(--asft-margin-6674fc873b);
  color: var(--as-modal-title-color);
  font-size: var(--as-modal-policy-title-size);
  font-weight: var(--as-modal-title-weight);
  line-height:var(--asft-line-height-2af765db02);
  letter-spacing:var(--asft-letter-spacing-653cd8dfd9);
}

.as-policy-card p {
  margin: 0;
  color: var(--as-modal-text-color);
  font-size: var(--as-type-control);
  line-height:var(--asft-line-height-9e0b4cf467);
}

.as-policy-card p + p {
  margin-top: var(--as-modal-policy-paragraph-gap);
}

.as-policy-card .as-modal-primary {
  margin-top:var(--asft-margin-top-c80bfee312);
}

/* 6. Scrollbars */

#authView::-webkit-scrollbar,
.project-list::-webkit-scrollbar,
.as-modal-surface::-webkit-scrollbar {
  width: var(--as-scrollbar-width);
}

#authView::-webkit-scrollbar-track,
.project-list::-webkit-scrollbar-track,
.as-modal-surface::-webkit-scrollbar-track {
  border-radius: var(--as-scrollbar-radius);
  background: var(--as-scrollbar-track);
}

#authView::-webkit-scrollbar-thumb,
.project-list::-webkit-scrollbar-thumb,
.as-modal-surface::-webkit-scrollbar-thumb {
  border-radius: var(--as-scrollbar-radius);
  background: var(--as-scrollbar-thumb);
}

#authView::-webkit-scrollbar-thumb:hover,
.project-list::-webkit-scrollbar-thumb:hover,
.as-modal-surface::-webkit-scrollbar-thumb:hover {
  background: var(--as-scrollbar-thumb-hover);
}

/* 7. Responsive */

@media (width <= 1200px) {
  body {
    overflow: auto;
  }

  .shell {
    height: auto;
    min-height:var(--asft-min-height-728c5727d6);
    grid-template-columns: 1fr;
    padding:var(--asft-padding-a4e62b80fb);
    overflow: visible;
  }

  #authView {
    width:var(--asft-width-3a38f58a92);
    min-height: 0;
  }

  .left,
  .right {
    overflow: visible;
  }

  .projects-pane {
    overflow: visible;
  }

  #projectsPane .project-create,
  .button-row {
    grid-template-columns: 1fr;
  }

  #projectsPane .project-create {
    grid-template-areas:
      "title"
      "input"
      "button";
  }

  .project-item {
    grid-template-columns: 34px minmax(0, 1fr) 24px;
  }

  .project-date,
  .project-takes {
    display: none;
  }
}