:root {
  color-scheme: light;
  --paper: #ede8df;
  --paper-soft: #f7f4ef;
  --ink: #1a1a1a;
  --muted: #5f5b54;
  --subtle: #8a8379;
  --milk: rgba(255, 255, 255, 0.4);
  --milk-strong: rgba(255, 255, 255, 0.72);
  --milk-line: rgba(255, 255, 255, 0.62);
  --ink-line: rgba(26, 26, 26, 0.11);
  --danger: #b42318;
  --sqim-mono: "SF Mono", SFMono-Regular, ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-family: var(--sqim-mono);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 42%),
    var(--paper);
  color: var(--ink);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

button,
input,
textarea {
  font: inherit;
}

.milk-wave-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  height: 100svh;
  height: 100dvh;
  pointer-events: none;
}

.sqim-page {
  --page-pad-x: clamp(20px, 5vw, 64px);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  padding:
    calc(24px + env(safe-area-inset-top))
    var(--page-pad-x)
    calc(30px + env(safe-area-inset-bottom));
}

.sqim-page.has-app-header {
  grid-template-rows: auto 1fr auto;
  row-gap: 8px;
  padding-top: 0;
}

.sqim-app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  width: calc(100% + (var(--page-pad-x) * 2));
  min-width: 0;
  min-height: calc(62px + env(safe-area-inset-top));
  margin: 0 calc(var(--page-pad-x) * -1);
  padding: calc(10px + env(safe-area-inset-top)) var(--page-pad-x) 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  background:
    linear-gradient(180deg, rgba(237, 232, 223, 0.94), rgba(237, 232, 223, 0.74)),
    rgba(255, 255, 255, 0.36);
  box-shadow: 0 14px 36px rgba(26, 26, 26, 0.045);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.sqim-app-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  max-width: 920px;
  min-width: 0;
  min-height: 42px;
  margin: 0 auto;
}

.header-milk-button,
.account-menu-button,
.account-menu-item,
.account-row-button {
  appearance: none;
  border: 0;
  font: inherit;
}

.header-milk-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

/* Opaque dark app icon: no multiply blend or white glow, both of which existed
   to lift the light pixel-art gif off the background. */
.header-app-icon {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 8px;
  filter: drop-shadow(0 6px 12px rgba(26, 26, 26, 0.16));
  transition: transform 160ms ease;
}

.header-milk-button:hover,
.header-milk-button:focus-visible {
  outline: none;
}

.header-milk-button:hover .header-app-icon,
.header-milk-button:focus-visible .header-app-icon {
  transform: translateY(-1px);
}

.header-section-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 4px;
  border: 1px solid var(--milk-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.header-section-link {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  min-height: 30px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: lowercase;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.header-section-link:hover,
.header-section-link:focus-visible {
  color: var(--ink);
  outline: none;
}

.header-section-link.is-active {
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(26, 26, 26, 0.07);
}

.account-menu {
  position: relative;
}

.account-menu-button {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--milk-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(26, 26, 26, 0.06);
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.account-menu-button:hover,
.account-menu-button:focus-visible,
.account-menu-button[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 32px rgba(26, 26, 26, 0.08);
  outline: none;
}

.account-menu-button:active {
  transform: translateY(1px);
}

.account-menu-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10;
  display: grid;
  gap: 4px;
  width: 168px;
  padding: 7px;
  border: 1px solid var(--milk-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 48px rgba(26, 26, 26, 0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.account-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 11px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  text-align: left;
}

.account-menu-item:hover,
.account-menu-item:focus-visible {
  background: rgba(26, 26, 26, 0.07);
  outline: none;
}

.sqim-main {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 720px;
  min-width: 0;
  margin: 0 auto;
  align-self: center;
  padding: 30px 0 42px;
  text-align: center;
}

.account-page .sqim-main {
  max-width: 620px;
  align-self: start;
  padding: clamp(30px, 6vh, 58px) 0 44px;
  text-align: left;
}

.milk-wrap {
  position: relative;
  width: min(188px, 48vw);
  margin: 0 auto 2px;
}

.milk-wrap::before {
  position: absolute;
  inset: 13%;
  content: "";
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  filter: blur(28px);
  transform: translateY(16px);
}

.milk-gif {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 22px 32px rgba(26, 26, 26, 0.08));
  transform-origin: 50% 72%;
}

h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.4rem, 6.8vw, 4.2rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0;
  overflow-wrap: break-word;
  text-wrap: balance;
  text-transform: lowercase;
}

.login-icon {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 20px;
  border-radius: 22px;
}

.login-title {
  font-size: clamp(1.5rem, 3.8vw, 2.4rem);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
}

/* Shares the title's typeface so the pair reads as one block, and pulls the
   auth panel closer than its default 34px so the group stays together. */
.login-subtitle {
  margin: 8px auto 0;
  color: var(--muted);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.login-subtitle + .auth-panel {
  margin-top: 24px;
}

.account-panel {
  display: grid;
  justify-items: stretch;
  gap: 14px;
  width: min(560px, 100%);
  margin: 0 auto;
}

.account-title {
  width: 100%;
  margin: 0;
  color: var(--muted);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
  line-height: 1.25;
  text-transform: none;
}

.auth-panel {
  width: min(430px, 100%);
  margin: 34px auto 0;
  padding: 18px;
  border: 1px solid var(--milk-line);
  border-radius: 24px;
  background: var(--milk);
  box-shadow: 0 18px 58px rgba(26, 26, 26, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.provider-stack {
  display: grid;
  gap: 12px;
  justify-items: center;
}

.google-signin {
  display: flex;
  justify-content: center;
  width: min(240px, 100%);
  min-height: 40px;
}

.apple-signin {
  display: flex;
  justify-content: center;
  width: min(240px, 100%);
}

.apple-signin:empty {
  display: none;
}

/* Styled per Apple's Human Interface Guidelines for Sign in with Apple. */
.apple-signin-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  /* Matches the 4px radius Google's SDK renders on its own button. */
  border-radius: 4px;
  background: #000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: opacity 120ms ease;
}

.apple-signin-button:hover {
  opacity: 0.85;
}

.apple-signin-button:focus-visible {
  outline: 2px solid var(--milk-line);
  outline-offset: 2px;
}

.apple-signin-button svg {
  /* Optically centres Apple's mark against the cap height of the label. */
  margin-top: -2px;
}

.status {
  width: min(430px, 100%);
  min-height: 18px;
  margin: 12px auto 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-transform: lowercase;
}

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

.state-panel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(440px, 100%);
  margin: 34px auto 0;
  padding: 18px;
  border: 1px solid var(--milk-line);
  border-radius: 22px;
  background: var(--milk);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
  text-transform: lowercase;
  box-shadow: 0 18px 48px rgba(26, 26, 26, 0.08);
}

.state-panel.is-error {
  color: var(--danger);
}

.row-build-action {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: #1a1a1a;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 20px rgba(26, 26, 26, 0.14);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.row-build-action:hover,
.row-build-action:focus-visible {
  background: #0f0f0f;
  box-shadow: 0 14px 24px rgba(26, 26, 26, 0.16);
  transform: translateY(-1px);
  outline: none;
}

.row-build-action:disabled {
  cursor: default;
  opacity: 0.58;
  transform: none;
}

.account-list {
  display: grid;
  gap: 12px;
}

.account-view-panel {
  animation: account-view-in 180ms ease-out both;
}

.account-card {
  min-width: 0;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--milk-line);
  border-radius: 22px;
  background: var(--milk);
  box-shadow: 0 18px 48px rgba(26, 26, 26, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.account-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 96px;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.account-row-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.account-row-toggle,
.account-row-chevron-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.account-row-toggle {
  width: 100%;
  padding: 0;
  text-align: left;
}

.devices-header-row {
  transition: background 160ms ease;
}

.devices-header-row:hover,
.devices-card.is-expanded .devices-header-row {
  background: rgba(255, 255, 255, 0.18);
}

.account-row-toggle:focus-visible,
.account-row-chevron-button:focus-visible {
  border-radius: 10px;
  outline: 2px solid rgba(26, 26, 26, 0.22);
  outline-offset: 3px;
}

.account-row-title {
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: lowercase;
}

.account-row-subtitle {
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: lowercase;
}

.account-row-value,
.account-row-action-label {
  display: block;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
  overflow-wrap: anywhere;
  text-transform: lowercase;
}

.account-row-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.device-add-row-action {
  min-height: 34px;
  padding: 0 14px;
}

.account-row-warning .account-row-value {
  color: #b15f00;
}

.account-action-row {
  appearance: none;
  font: inherit;
  cursor: pointer;
  transition: background 160ms ease;
}

.account-action-row:hover,
.account-action-row:focus-visible,
.asc-card.is-expanded .account-action-row {
  background: rgba(255, 255, 255, 0.18);
  outline: none;
}

.account-row-chevron {
  display: block;
  width: 20px;
  height: 20px;
  color: var(--muted);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
  transform-origin: center;
  transition: transform 180ms ease;
}

.account-row-chevron-button {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
}

.asc-card.is-expanded .account-row-chevron,
.devices-card.is-expanded .account-row-chevron {
  transform: rotate(180deg);
}

.asc-editor {
  --panel-pad-bottom: 20px;
  display: grid;
  overflow: hidden;
  padding: 0 18px var(--panel-pad-bottom);
}

.asc-editor.is-expanding,
.devices-panel.is-expanding {
  animation: account-panel-expand 180ms ease-out;
  transform-origin: top;
}

.asc-editor.is-collapsing,
.devices-panel.is-collapsing {
  animation: account-panel-collapse 160ms ease-in both;
  pointer-events: none;
  transform-origin: top;
}

.asc-editor-form {
  display: grid;
  gap: 14px;
  min-height: 0;
  padding-top: 18px;
  border-top: 1px solid var(--ink-line);
}

.asc-editor.has-auth-segments .asc-editor-form,
.asc-editor.has-auth-switch .asc-editor-form {
  border-top: 0;
}

.asc-editor-error {
  margin: 0;
}

.asc-editor-error,
.asc-editor-status {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-transform: lowercase;
}

.asc-editor-error,
.asc-editor-status.is-error {
  color: var(--danger);
}

.apple-session-guidance {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
  padding: 14px 15px;
  border: 1px solid rgba(31, 31, 31, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.56);
}

.apple-session-guidance p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.apple-session-connected-panel {
  display: grid;
  gap: 14px;
  padding-top: 18px;
}

.apple-session-connected {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(31, 157, 85, 0.22);
  border-radius: 14px;
  background: rgba(31, 157, 85, 0.07);
}

.apple-session-connected-check {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #1f9d55;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

.apple-session-connected-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.apple-session-connected-copy strong {
  color: #187a43;
  font-size: 13px;
  font-weight: 800;
  text-transform: lowercase;
}

.apple-session-connected-copy span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.apple-session-connected-expiry {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.asc-field {
  display: grid;
  gap: 8px;
}

.asc-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  text-transform: lowercase;
}

.asc-field input,
.asc-field select,
.asc-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(26, 26, 26, 0.18);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 1px 0 rgba(255, 255, 255, 0.5);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.asc-field input,
.asc-field select {
  min-height: 42px;
  padding: 0 13px;
}

.asc-field textarea {
  resize: vertical;
  min-height: 132px;
  padding: 12px 13px;
  font-family: var(--sqim-mono);
}

.asc-field input:focus,
.asc-field select:focus,
.asc-field textarea:focus {
  border-color: rgba(26, 26, 26, 0.42);
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 0 0 3px rgba(26, 26, 26, 0.08);
}

.asc-field input::placeholder,
.asc-field textarea::placeholder {
  color: rgba(95, 91, 84, 0.56);
  opacity: 1;
}

.asc-field input:disabled,
.asc-field select:disabled,
.asc-field textarea:disabled {
  cursor: default;
  opacity: 0.62;
  background: rgba(255, 255, 255, 0.54);
}

.asc-editor-status {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.asc-editor-status.is-busy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.asc-editor-status.is-error {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 13px 15px;
  border: 1px solid rgba(197, 45, 34, 0.2);
  border-radius: 14px;
  background: rgba(197, 45, 34, 0.055);
}

.status-message {
  min-width: 0;
  overflow-wrap: anywhere;
}

.status-message a,
[data-linkify] a {
  color: inherit;
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.status-action {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(197, 45, 34, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--danger);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  text-transform: lowercase;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.status-action:hover {
  border-color: rgba(197, 45, 34, 0.38);
  background: rgba(255, 255, 255, 0.94);
  transform: translateY(-1px);
}

.status-action:focus-visible {
  outline: 2px solid rgba(197, 45, 34, 0.42);
  outline-offset: 2px;
}

.asc-inline-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(26, 26, 26, 0.14);
  border-top-color: var(--muted);
  border-radius: 999px;
  animation: sqim-spin 850ms linear infinite;
}

.asc-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.asc-auth-switch-row {
  display: flex;
  justify-content: flex-start;
}

.asc-field.is-hidden {
  display: none;
}

.devices-panel {
  --panel-pad-bottom: 20px;
  display: grid;
  gap: 14px;
  padding: 0 18px var(--panel-pad-bottom);
  border-top: 1px solid var(--ink-line);
}

@keyframes account-view-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes account-panel-expand {
  from {
    max-height: 0;
    opacity: 0;
    padding-bottom: 0;
    transform: translateY(-6px);
  }
  to {
    max-height: 2000px;
    opacity: 1;
    padding-bottom: var(--panel-pad-bottom);
    transform: translateY(0);
  }
}

@keyframes account-panel-collapse {
  from {
    max-height: 2000px;
    opacity: 1;
    padding-bottom: var(--panel-pad-bottom);
    transform: translateY(0);
  }
  to {
    max-height: 0;
    opacity: 0;
    padding-bottom: 0;
    transform: translateY(-6px);
  }
}

.devices-status {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 16px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-transform: lowercase;
}

.devices-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
}

.devices-toolbar.is-centered {
  justify-content: center;
}

.devices-refresh-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  color: var(--muted);
  cursor: pointer;
}

.devices-refresh-button:hover,
.devices-refresh-button:focus-visible {
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
  outline: none;
}

.devices-refresh-icon {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.devices-message {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  text-transform: lowercase;
}

.devices-message.is-error,
.device-error {
  color: var(--danger);
}

.devices-apple-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(177, 95, 0, 0.24);
  border-radius: 12px;
  color: #8a4a00;
  font-size: 12px;
  line-height: 1.45;
}

.devices-apple-notice.is-error {
  border-color: rgba(180, 35, 24, 0.24);
  color: var(--danger);
}

.profile-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(26, 26, 26, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: profile-dialog-fade 180ms ease-out;
  overflow-y: auto;
}

@keyframes profile-dialog-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.profile-dialog {
  width: 100%;
  max-width: 420px;
  margin: auto;
  padding: 22px 22px 20px;
  border: 1px solid var(--ink-line);
  border-radius: 22px;
  background: var(--paper-soft);
  box-shadow: 0 22px 60px rgba(26, 26, 26, 0.24);
  animation: profile-dialog-rise 200ms ease-out;
}

@keyframes profile-dialog-rise {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.profile-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.profile-dialog-title {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

.profile-dialog-close {
  appearance: none;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  color: var(--muted);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}

.profile-dialog-lede {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.profile-dialog-steps {
  margin: 16px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.profile-dialog-steps strong {
  color: var(--ink);
  font-weight: 700;
}

.profile-dialog-action {
  appearance: none;
  width: 100%;
  min-height: 46px;
  margin-top: 20px;
  padding: 0 18px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper-soft);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.profile-dialog-action:disabled {
  opacity: 0.55;
  cursor: default;
}

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

.device-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--ink-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.36);
}

.device-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.device-copy strong,
.device-copy span,
.device-error {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-copy strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.device-copy span,
.device-error {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.device-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.device-state {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: lowercase;
  white-space: nowrap;
}

.device-delete-button {
  appearance: none;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(180, 35, 24, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.44);
  color: var(--danger);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-transform: lowercase;
}

.device-delete-button:hover,
.device-delete-button:focus-visible {
  background: rgba(255, 255, 255, 0.78);
  outline: none;
}

.asc-secondary-button {
  appearance: none;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-transform: lowercase;
}

.asc-secondary-button:hover,
.asc-secondary-button:focus-visible {
  background: rgba(255, 255, 255, 0.76);
  outline: none;
}

.asc-secondary-button.is-danger {
  color: #8a1f16;
}

.asc-secondary-button:disabled {
  cursor: default;
  opacity: 0.55;
}

.asc-segmented-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  width: min(100%, 340px);
  padding: 3px;
  border: 1px solid rgba(26, 26, 26, 0.16);
  border-radius: 12px;
  background: rgba(26, 26, 26, 0.06);
  box-shadow:
    inset 0 1px 1px rgba(26, 26, 26, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.62);
}

.asc-segment-or {
  padding: 0 9px;
  color: var(--subtle);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: lowercase;
  user-select: none;
}

.asc-segment {
  appearance: none;
  display: inline-grid;
  place-items: center;
  min-width: 0;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-transform: lowercase;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.asc-segment.is-active {
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  box-shadow:
    0 1px 2px rgba(26, 26, 26, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.asc-segment:hover,
.asc-segment:focus-visible {
  color: var(--ink);
  outline: none;
}

.asc-segment:disabled {
  cursor: default;
  color: rgba(95, 91, 84, 0.58);
}

.asc-segment.is-active:disabled {
  color: var(--ink);
}

.asc-segment:focus-visible {
  box-shadow:
    0 0 0 3px rgba(26, 26, 26, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(26, 26, 26, 0.16);
  border-top-color: var(--ink);
  border-radius: 999px;
  animation: sqim-spin 850ms linear infinite;
}

[hidden] {
  display: none !important;
}

@keyframes sqim-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 700px) {
  .sqim-page {
    --page-pad-x: 16px;
    padding-inline: var(--page-pad-x);
  }

  .sqim-app-header-inner {
    gap: 10px;
  }

  .header-section-link {
    min-width: 76px;
    padding: 0 12px;
  }

}

@media (max-width: 520px) {
  .account-page .sqim-main {
    padding-top: 28px;
  }

  .account-panel {
    gap: 14px;
  }

  .header-section-nav {
    gap: 3px;
    padding: 3px;
  }

  .header-section-link {
    min-width: 0;
    min-height: 28px;
    padding: 0 10px;
    font-size: 11px;
  }

  .account-row {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 82px;
    gap: 10px;
    padding: 12px 14px;
  }

  .account-row-title {
    font-size: 15px;
  }

  .account-row-subtitle {
    font-size: 12px;
  }

  .account-row-value,
  .account-row-action-label {
    font-size: 15px;
  }

  .account-row-chevron {
    width: 18px;
    height: 18px;
  }

  .account-row-action {
    gap: 8px;
  }

  .device-add-row-action {
    max-width: 132px;
    padding: 0 12px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .asc-editor {
    --panel-pad-bottom: 18px;
    padding: 0 14px var(--panel-pad-bottom);
  }

  .devices-panel {
    --panel-pad-bottom: 18px;
    padding: 0 14px var(--panel-pad-bottom);
  }

  .device-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .device-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .asc-field textarea {
    min-height: 106px;
  }

  .asc-editor-actions {
    justify-content: stretch;
  }

  .asc-editor-actions button {
    flex: 1 1 0;
  }

  .apple-session-connected {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .apple-session-connected-expiry {
    grid-column: 2;
    text-align: left;
  }

}

@media (prefers-reduced-motion: reduce) {
  .account-menu-button,
  .account-menu-item,
  .account-row-button,
  .header-section-link,
  .row-build-action {
    transition: none;
  }

  .account-view-panel,
  .asc-editor.is-expanding,
  .asc-editor.is-collapsing,
  .devices-panel.is-expanding,
  .devices-panel.is-collapsing {
    animation: none;
  }

  .spinner {
    animation: none;
  }
}

.onboarding-header {
  display: grid;
  gap: 6px;
  width: 100%;
}

.onboarding-lede {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-transform: lowercase;
}

.onboarding-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.onboarding-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.onboarding-step-marker {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--ink-line);
  border-radius: 50%;
  background: var(--milk);
  color: var(--subtle);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.onboarding-step-label {
  overflow: hidden;
  color: var(--subtle);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: lowercase;
}

.onboarding-step.is-current .onboarding-step-marker {
  border-color: var(--ink);
  background: var(--milk-strong);
  color: var(--ink);
}

.onboarding-step.is-current .onboarding-step-label {
  color: var(--ink);
  font-weight: 600;
}

.onboarding-step.is-done .onboarding-step-marker {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper-soft);
}

.onboarding-step.is-done .onboarding-step-label {
  color: var(--muted);
}


.mac-mini-hero {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 4px 0 10px;
}

.mac-mini-viewer {
  width: 100%;
  max-width: 210px;
  height: 180px;
  background: transparent;
  --poster-color: transparent;
}

.mac-mini-viewer::part(default-progress-bar) {
  display: none;
}

/* No action column, so the copy centers instead of hugging the left edge. */
.build-empty-row {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.build-empty-row .account-row-copy {
  justify-items: center;
}

@media (max-width: 420px) {
  .mac-mini-viewer {
    max-width: 168px;
    height: 148px;
  }
}

/* Login hero: the model stands in for the app icon, so it needs the icon's
   breathing room above the title rather than the in-page hero spacing. */
.mac-mini-hero.is-login {
  padding: 0;
  margin: 0 auto 18px;
}

.mac-mini-hero.is-login .mac-mini-viewer {
  max-width: 240px;
  height: 190px;
}

/* 2D phone hero. The frame PNG has a transparent screen aperture, so the video
   sits behind it and the bezel does the masking. Screen offsets are measured
   from that aperture (x 72..1277, y 77..2682 of a 1350x2760 image), probed
   clear of the dynamic island, which the frame draws opaque inside the screen. */
.phone-hero {
  position: relative;
  width: min(168px, 42vw);
  aspect-ratio: 1350 / 2760;
  margin: 0 auto 14px;
}

.phone-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.phone-screen {
  position: absolute;
  left: 5.333%;
  top: 2.790%;
  width: 89.333%;
  height: 94.420%;
  overflow: hidden;
  border-radius: 7% / 3.4%;
  background: #0b0b0c;
}

.phone-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 420ms ease;
}

.phone-hero.is-loaded .phone-video {
  opacity: 1;
}

/* Onboarding devices step: instruction + a single prominent action, no card. */
/* Card treatment matching .account-card, so the step reads as one panel. */
.onboarding-devices {
  display: grid;
  justify-items: start;
  gap: 34px;
  width: 100%;
  min-width: 0;
  padding: 26px 22px 34px;
  border: 1px solid var(--milk-line);
  border-radius: 22px;
  background: var(--milk);
  box-shadow: 0 18px 48px rgba(26, 26, 26, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* No max-width: the instruction is meant to sit on one line (it still wraps
   rather than overflowing once the viewport is too narrow for it). */
.onboarding-devices-copy {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.onboarding-devices-action {
  appearance: none;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: #1a1a1a;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-transform: lowercase;
  white-space: nowrap;
  box-shadow: 0 14px 28px rgba(26, 26, 26, 0.18);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.onboarding-devices-action:hover,
.onboarding-devices-action:focus-visible {
  background: #0f0f0f;
  box-shadow: 0 18px 34px rgba(26, 26, 26, 0.22);
  transform: translateY(-1px);
  outline: none;
}

.onboarding-devices-action:disabled {
  cursor: default;
  opacity: 0.58;
  transform: none;
}

.onboarding-devices-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.onboarding-devices-note.is-error {
  color: var(--danger);
}

/* Caption for the screenshot below it: sits lower than the container's uniform
   gap allows, and tucks close to the image it describes. */
.onboarding-devices-prompt {
  margin: 24px 0 -26px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}

/* Screenshot of the iOS profile-download prompt, shown under the action so the
   next thing the user sees on their phone is already familiar. */
.onboarding-devices-image {
  justify-self: center;
  display: block;
  width: min(260px, 100%);
  height: auto;
  border-radius: 14px;
}

/* Screenshot inside step 2. The source is a full-height phone capture, so it is
   cropped from the top -- the highlighted row sits in the upper half and the
   rest would make the dialog scroll for no benefit. */
.profile-dialog-step-image {
  display: block;
  width: min(200px, 100%);
  height: 232px;
  margin: 10px auto 2px;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--ink-line);
  border-radius: 10px;
}

/* Step 3 shows two captures side by side: the row you tap, then the screen it
   opens. They have very different aspect ratios, so the columns are equal and
   the images align to the top rather than being stretched to match. */
.profile-dialog-step-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 8px;
  margin: 10px 0 2px;
}

.profile-dialog-step-figure {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ink-line);
  border-radius: 8px;
}

/* Device check confirmation, shown under the action once a device registers. */
.onboarding-device-check {
  display: grid;
  gap: 12px;
  justify-items: stretch;
  width: min(420px, 100%);
  justify-self: center;
}

.onboarding-device-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--ink-line);
  border-radius: 14px;
  background: var(--milk-strong);
}

.onboarding-device-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.onboarding-device-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.onboarding-device-copy span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.onboarding-device-state {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.onboarding-device-state.is-registered {
  color: #1f9d55;
}

.onboarding-device-state.is-missing,
.onboarding-device-state.is-disabled,
.onboarding-device-state.is-unknown,
.onboarding-device-state.is-reauth_required,
.onboarding-device-state.is-apple_auth_required,
.onboarding-device-state.is-asc_error {
  color: #b15f00;
}