:root {
  color-scheme: light;
  --background: #f7f9fc;
  --surface: #ffffff;
  --surface-hover: #f1f5f9;
  --border: #dce4ee;
  --input-border: #d5dee9;
  --border-strong: #9eacbd;
  --foreground: #111827;
  --muted: #5f6b7a;
  --quiet: #8793a3;
  --primary: #007aff;
  --primary-hover: #006fe6;
  --primary-foreground: #ffffff;
  --danger: #c9363e;
  --success: #087a4b;
  --accent: #007aff;
  --radius: 10px;
  --panel-radius: 14px;
  --control-height: 44px;
  --shadow: 0 12px 32px rgb(15 23 42 / 8%);
  --shadow-lifted: 0 18px 40px rgb(15 23 42 / 12%);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-slow: 360ms;
  --icon-arrow: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJtMTIgNC0xLjQxIDEuNDFMMTYuMTcgMTFINHYyaDEyLjE3bC01LjU4IDUuNTlMMTIgMjBsOC04LTgtOHoiLz48L3N2Zz4=");
  --icon-check: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOSAxNi4xNyA0LjgzIDEybC0xLjQyIDEuNDFMOSAxOSAyMSA3bC0xLjQxLTEuNDFMOSAxNi4xN3oiLz48L3N2Zz4=");
  --icon-xmark: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgNi40MSAxNy41OSA1IDEyIDEwLjU5IDYuNDEgNSA1IDYuNDEgMTAuNTkgMTIgNSAxNy41OSA2LjQxIDE5IDEyIDEzLjQxIDE3LjU5IDE5IDE5IDE3LjU5IDEzLjQxIDEyIDE5IDYuNDF6Ii8+PC9zdmc+");
  --icon-copy: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTYgMUg0Yy0xLjEgMC0yIC45LTIgMnYxNGgyVjNoMTJWMXptMyA0SDhjLTEuMSAwLTIgLjktMiAydjE0YzAgMS4xLjkgMiAyIDJoMTFjMS4xIDAgMi0uOSAyLTJWN2MwLTEuMS0uOS0yLTItMnptMCAxNkg4VjdoMTF2MTR6Ii8+PC9zdmc+");
  --icon-trash: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTYgOXYxMEg4VjloOG0tMS41LTZoLTVsLTEgMUg1djJoMTRWNGgtMy41bC0xLTF6TTE4IDdINnYxMmMwIDEuMS45IDIgMiAyaDhjMS4xIDAgMi0uOSAyLTJWN3oiLz48L3N2Zz4=");
  --icon-lock: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTggOGgtMVY2YzAtMi43Ni0yLjI0LTUtNS01UzcgMy4yNCA3IDZ2Mkg2Yy0xLjEgMC0yIC45LTIgMnYxMGMwIDEuMS45IDIgMiAyaDEyYzEuMSAwIDItLjkgMi0yVjEwYzAtMS4xLS45LTItMi0yek05IDZjMC0xLjY2IDEuMzQtMyAzLTNzMyAxLjM0IDMgM3YySDlWNnptOSAxNEg2VjEwaDEydjEwem0tNi0zYzEuMSAwIDItLjkgMi0ycy0uOS0yLTItMi0yIC45LTIgMiAuOSAyIDIgMnoiLz48L3N2Zz4=");
  --icon-fingerprint: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTcuODEgNC40N2MtLjA4IDAtLjE2LS4wMi0uMjMtLjA2QzE1LjY2IDMuNDIgMTQgMyAxMi4wMSAzYy0xLjk4IDAtMy44Ni40Ny01LjU3IDEuNDEtLjI0LjEzLS41NC4wNC0uNjgtLjJhLjUwNi41MDYgMCAwIDEgLjItLjY4QzcuODIgMi41MiA5Ljg2IDIgMTIuMDEgMmMyLjEzIDAgMy45OS40NyA2LjAzIDEuNTIuMjUuMTMuMzQuNDMuMjEuNjdhLjQ5LjQ5IDAgMCAxLS40NC4yOHpNMy41IDkuNzJhLjQ5OS40OTkgMCAwIDEtLjQxLS43OWMuOTktMS40IDIuMjUtMi41IDMuNzUtMy4yN0M5Ljk4IDQuMDQgMTQgNC4wMyAxNy4xNSA1LjY1YzEuNS43NyAyLjc2IDEuODYgMy43NSAzLjI1YS41LjUgMCAwIDEtLjEyLjdjLS4yMy4xNi0uNTQuMTEtLjctLjEyYTkuMzg4IDkuMzg4IDAgMCAwLTMuMzktMi45NGMtMi44Ny0xLjQ3LTYuNTQtMS40Ny05LjQuMDEtMS4zNi43LTIuNSAxLjctMy40IDIuOTYtLjA4LjE0LS4yMy4yMS0uMzkuMjF6bTYuMjUgMTIuMDdhLjQ3LjQ3IDAgMCAxLS4zNS0uMTVjLS44Ny0uODctMS4zNC0xLjQzLTIuMDEtMi42NC0uNjktMS4yMy0xLjA1LTIuNzMtMS4wNS00LjM0IDAtMi45NyAyLjU0LTUuMzkgNS42Ni01LjM5czUuNjYgMi40MiA1LjY2IDUuMzljMCAuMjgtLjIyLjUtLjUuNXMtLjUtLjIyLS41LS41YzAtMi40Mi0yLjA5LTQuMzktNC42Ni00LjM5cy00LjY2IDEuOTctNC42NiA0LjM5YzAgMS40NC4zMiAyLjc3LjkzIDMuODUuNjQgMS4xNSAxLjA4IDEuNjQgMS44NSAyLjQyLjE5LjIuMTkuNTEgMCAuNzEtLjExLjEtLjI0LjE1LS4zNy4xNXptNy4xNy0xLjg1Yy0xLjE5IDAtMi4yNC0uMy0zLjEtLjg5LTEuNDktMS4wMS0yLjM4LTIuNjUtMi4zOC00LjM5IDAtLjI4LjIyLS41LjUtLjVzLjUuMjIuNS41YzAgMS40MS43MiAyLjc0IDEuOTQgMy41Ni43MS40OCAxLjU0LjcxIDIuNTQuNzEuMjQgMCAuNjQtLjAzIDEuMDQtLjEuMjctLjA1LjUzLjEzLjU4LjQxLjA1LjI3LS4xMy41My0uNDEuNTgtLjU3LjExLTEuMDcuMTItMS4yMS4xMnpNMTQuOTEgMjJjLS4wNCAwLS4wOS0uMDEtLjEzLS4wMi0xLjU5LS40NC0yLjYzLTEuMDMtMy43Mi0yLjFhNy4yOTcgNy4yOTcgMCAwIDEtMi4xNy01LjIyYzAtMS42MiAxLjM4LTIuOTQgMy4wOC0yLjk0czMuMDggMS4zMiAzLjA4IDIuOTRjMCAxLjA3LjkzIDEuOTQgMi4wOCAxLjk0czIuMDgtLjg3IDIuMDgtMS45NGMwLTMuNzctMy4yNS02LjgzLTcuMjUtNi44My0yLjg0IDAtNS40NCAxLjU4LTYuNjEgNC4wMy0uMzkuODEtLjU5IDEuNzYtLjU5IDIuOCAwIC43OC4wNyAyLjAxLjY3IDMuNjEuMS4yNi0uMDMuNTUtLjI5LjY0LS4yNi4xLS41NS0uMDQtLjY0LS4yOWExMS4xNCAxMS4xNCAwIDAgMS0uNzMtMy45NmMwLTEuMi4yMy0yLjI5LjY4LTMuMjQgMS4zMy0yLjc5IDQuMjgtNC42IDcuNTEtNC42IDQuNTUgMCA4LjI1IDMuNTEgOC4yNSA3LjgzIDAgMS42Mi0xLjM4IDIuOTQtMy4wOCAyLjk0cy0zLjA4LTEuMzItMy4wOC0yLjk0YzAtMS4wNy0uOTMtMS45NC0yLjA4LTEuOTRzLTIuMDguODctMi4wOCAxLjk0YzAgMS43MS42NiAzLjMxIDEuODcgNC41MS45NS45NCAxLjg2IDEuNDYgMy4yNyAxLjg1LjI3LjA3LjQyLjM1LjM1LjYxLS4wNS4yMy0uMjYuMzgtLjQ3LjM4eiIvPjwvc3ZnPg==");
  --icon-home: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJtMTIgNS42OSA1IDQuNVYxOGgtMnYtNkg5djZIN3YtNy44MWw1LTQuNU0xMiAzIDIgMTJoM3Y4aDZ2LTZoMnY2aDZ2LThoM0wxMiAzeiIvPjwvc3ZnPg==");
  --icon-folder: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJtOS4xNyA2IDIgMkgyMHYxMEg0VjZoNS4xN00xMCA0SDRjLTEuMSAwLTEuOTkuOS0xLjk5IDJMMiAxOGMwIDEuMS45IDIgMiAyaDE2YzEuMSAwIDItLjkgMi0yVjhjMC0xLjEtLjktMi0yLTJoLThsLTItMnoiLz48L3N2Zz4=");
  --icon-phone: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNi41NCA1Yy4wNi44OS4yMSAxLjc2LjQ1IDIuNTlsLTEuMiAxLjJjLS40MS0xLjItLjY3LTIuNDctLjc2LTMuNzloMS41MW05Ljg2IDEyLjAyYy44NS4yNCAxLjcyLjM5IDIuNi40NXYxLjQ5Yy0xLjMyLS4wOS0yLjU5LS4zNS0zLjgtLjc1bDEuMi0xLjE5TTcuNSAzSDRjLS41NSAwLTEgLjQ1LTEgMSAwIDkuMzkgNy42MSAxNyAxNyAxNyAuNTUgMCAxLS40NSAxLTF2LTMuNDljMC0uNTUtLjQ1LTEtMS0xLTEuMjQgMC0yLjQ1LS4yLTMuNTctLjU3YS44NC44NCAwIDAgMC0uMzEtLjA1Yy0uMjYgMC0uNTEuMS0uNzEuMjlsLTIuMiAyLjJhMTUuMTQ5IDE1LjE0OSAwIDAgMS02LjU5LTYuNTlsMi4yLTIuMmMuMjgtLjI4LjM2LS42Ny4yNS0xLjAyQTExLjM2IDExLjM2IDAgMCAxIDguNSA0YzAtLjU1LS40NS0xLTEtMXoiLz48L3N2Zz4=");
  --icon-mail: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjIgNmMwLTEuMS0uOS0yLTItMkg0Yy0xLjEgMC0yIC45LTIgMnYxMmMwIDEuMS45IDIgMiAyaDE2YzEuMSAwIDItLjkgMi0yVjZ6bS0yIDAtOCA0Ljk5TDQgNmgxNnptMCAxMkg0VjhsOCA1IDgtNXYxMHoiLz48L3N2Zz4=");
  --icon-logout: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJtMTcgOC0xLjQxIDEuNDFMMTcuMTcgMTFIOXYyaDguMTdsLTEuNTggMS41OEwxNyAxNmw0LTQtNC00ek01IDVoN1YzSDVjLTEuMSAwLTIgLjktMiAydjE0YzAgMS4xLjkgMiAyIDJoN3YtMkg1VjV6Ii8+PC9zdmc+");
  --icon-robot: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgOFY0SDgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjEyIiB4PSI0IiB5PSI4IiByeD0iMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZD0iTTIgMTRoMm0xNiAwaDJNMTUgMTN2Mk05IDEzdjIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+");
  --icon-users: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZyBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE2IDIxdi0yYTQgNCAwIDAgMC00LTRINmE0IDQgMCAwIDAtNCA0djIiLz48Y2lyY2xlIGN4PSI5IiBjeT0iNyIgcj0iNCIvPjxwYXRoIGQ9Ik0yMiAyMXYtMmE0IDQgMCAwIDAtMy0zLjg3TTE2IDMuMTNhNCA0IDAgMCAxIDAgNy43NSIvPjwvZz48L3N2Zz4=");
  --icon-smartphone: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTcgMUg3Yy0xLjEgMC0yIC45LTIgMnYxOGMwIDEuMS45IDIgMiAyaDEwYzEuMSAwIDItLjkgMi0yVjNjMC0xLjEtLjktMi0yLTJ6bTAgMTlIN1Y0aDEwdjE2eiIvPjwvc3ZnPg==");
  --icon-user-check: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJtMTcgMTEgMiAyIDQtNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMTYgMjF2LTJhNCA0IDAgMCAwLTQtNEg2YTQgNCAwIDAgMC00IDR2MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48Y2lyY2xlIGN4PSI5IiBjeT0iNyIgcj0iNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+");
  --icon-user: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMTJjMi4yMSAwIDQtMS43OSA0LTRzLTEuNzktNC00LTQtNCAxLjc5LTQgNCAxLjc5IDQgNCA0em0wIDJjLTIuNjcgMC04IDEuMzQtOCA0djJoMTZ2LTJjMC0yLjY2LTUuMzMtNC04LTR6Ii8+PC9zdmc+");
  font-family: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #09090b;
    --surface: #141418;
    --surface-hover: #1d1d22;
    --border: #29292f;
    --input-border: #3a3a42;
    --border-strong: #6b7280;
    --foreground: #f5f5f7;
    --muted: #a1a1aa;
    --quiet: #73737d;
    --primary: #0a84ff;
    --primary-hover: #409cff;
    --primary-foreground: #ffffff;
    --danger: #fc9295;
    --success: #4ade80;
    --accent: #0a84ff;
    --shadow: 0 18px 48px rgb(0 0 0 / 28%);
    --shadow-lifted: 0 24px 56px rgb(0 0 0 / 38%);
  }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  touch-action: manipulation;
  min-width: 320px;
  background:
    radial-gradient(circle at 50% -20%, rgb(10 132 255 / 8%), transparent 36rem),
    var(--background);
}

body,
p {
  margin: 0;
}

body {
  min-height: 100svh;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow-x: hidden;
  background: transparent;
  color: var(--foreground);
  font-size: 14px;
  font-kerning: normal;
  font-synthesis: none;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

main {
  width: min(400px, 100%);
  margin: max(40px, 9svh) auto 0;
}

[data-brand-logo] {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: #000;
}

@media (prefers-color-scheme: dark) {
  [data-brand-logo] {
    color: #fff;
  }
}

[data-brand-heading] {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--foreground);
}

[data-brand-heading] > h1 {
  margin: 0;
}

section,
form,
label {
  display: grid;
  gap: 14px;
}

[data-panel="auth"],
[data-panel="home"] {
  min-height: 0;
  padding: clamp(22px, 6vw, 28px);
  place-content: start;
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

[data-panel="auth"] {
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

[data-message] {
  color: var(--muted);
}

/* A message element with no copy is not rendered: several pages keep one in
   the markup for flows that write into it, and an empty one must not reserve
   a row in the surrounding grid. */
[data-message]:empty {
  display: none;
}

button,
input {
  min-height: var(--control-height);
  font: inherit;
}

button {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--foreground);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease, color var(--motion-fast) ease,
    box-shadow var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-spring);
}

button[data-icon],
a[data-icon] {
  --_action-icon: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

button[data-icon]::before,
a[data-icon]::before {
  content: "";
  width: 16px;
  height: 16px;
  display: inline-block;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--_action-icon) no-repeat center / contain;
  mask: var(--_action-icon) no-repeat center / contain;
}

button[data-icon="arrow"],
a[data-icon="arrow"] {
  --_action-icon: var(--icon-arrow);
}

button[data-icon="check"],
a[data-icon="check"] {
  --_action-icon: var(--icon-check);
}

button[data-icon="user-check"],
a[data-icon="user-check"] {
  --_action-icon: var(--icon-user-check);
}

button[data-icon="xmark"],
a[data-icon="xmark"] {
  --_action-icon: var(--icon-xmark);
}

button[data-icon="copy"],
a[data-icon="copy"] {
  --_action-icon: var(--icon-copy);
}

button[data-icon="trash"],
a[data-icon="trash"] {
  --_action-icon: var(--icon-trash);
}

button[data-icon="lock"],
a[data-icon="lock"] {
  --_action-icon: var(--icon-lock);
}

button[data-icon="fingerprint"],
a[data-icon="fingerprint"] {
  --_action-icon: var(--icon-fingerprint);
}

button[data-icon="home"],
a[data-icon="home"] {
  --_action-icon: var(--icon-home);
}

button[data-icon="folder"],
a[data-icon="folder"] {
  --_action-icon: var(--icon-folder);
}

button[data-icon="phone"],
a[data-icon="phone"] {
  --_action-icon: var(--icon-phone);
}

button[data-icon="mail"],
a[data-icon="mail"] {
  --_action-icon: var(--icon-mail);
}

button[data-icon="robot"],
a[data-icon="robot"] {
  --_action-icon: var(--icon-robot);
}

button[data-icon="users"],
a[data-icon="users"] {
  --_action-icon: var(--icon-users);
}

button[data-icon="smartphone"],
a[data-icon="smartphone"] {
  --_action-icon: var(--icon-smartphone);
}

button[data-icon="logout"],
a[data-icon="logout"] {
  --_action-icon: var(--icon-logout);
}

button:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

button:active:not(:disabled),
a[data-icon]:active {
  transform: scale(0.97);
}

button[data-icon="arrow"]::before,
a[data-icon="arrow"]::before {
  transition: transform var(--motion-base) var(--ease-spring);
}

button[data-icon="arrow"]:hover:not(:disabled)::before,
a[data-icon="arrow"]:hover::before {
  transform: translateX(3px);
}

button:focus-visible,
input:focus-visible,
summary:focus-visible,
a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button:disabled {
  cursor: wait;
  opacity: 0.52;
}

#login {
  min-height: 44px;
  width: 100%;
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 600;
}

#login:hover:not(:disabled) {
  border-color: var(--primary-hover);
  background: var(--primary-hover);
}

#auth-form {
  width: 100%;
}

label {
  gap: 6px;
  color: var(--muted);
  font-size: 0.875rem;
}

input {
  width: 100%;
  height: var(--control-height);
  padding: 0 10px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  outline: none;
  background: var(--surface);
  color: var(--foreground);
}

input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(0 122 255 / 12%);
}

input[aria-invalid="true"] {
  border-color: var(--danger);
}

output {
  min-height: 21px;
  color: var(--muted);
  font-size: 0.875rem;
}

output[data-state="error"] {
  color: var(--danger);
}

/* Panel headings opt out of the centered auth header treatment. */
[data-role="auth"] header:not([data-panel-heading]) {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
}

[data-role="auth"] h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

code {
  color: var(--foreground);
  font-family: "Geist Mono", "SFMono-Regular", Consolas, monospace;
}

/*
 * Shared account components.
 *
 * Sign-in settings (/account/password) and the superadmin user list
 * (/account/users) render the same rows, panel headings, chips, and
 * disclosures so both pages read as one system instead of two.
 */
[data-row-list] {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-row-list] > * {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--surface-hover);
  color: var(--muted);
  font-size: 13px;
}

[data-row-icon] {
  width: 24px;
  height: 24px;
  display: block;
  background: currentColor;
  -webkit-mask: var(--icon-user) no-repeat center / contain;
  mask: var(--icon-user) no-repeat center / contain;
}

[data-passkey="true"] > [data-row-icon] {
  -webkit-mask-image: var(--icon-fingerprint);
  mask-image: var(--icon-fingerprint);
}

[data-row-details] {
  display: grid;
  gap: 2px;
  min-width: 0;
}

[data-row-details] strong {
  color: var(--foreground);
  font-size: 14px;
  font-weight: 500;
}

[data-row-action] {
  width: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
}

[data-row-action]:hover:not(:disabled) {
  color: var(--danger);
  background: var(--surface);
}

[data-row-action]:disabled {
  cursor: not-allowed;
}

[data-row-span],
[data-row-disclosure] {
  grid-column: 1 / -1;
}

[data-row-disclosure] {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

[data-row-disclosure] > summary {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  list-style: none;
}

[data-row-disclosure] > summary::-webkit-details-marker {
  display: none;
}

[data-row-disclosure] > summary::after {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  transform: rotate(45deg);
  transition: transform var(--motion-fast) var(--ease-out);
}

[data-row-disclosure][open] > summary::after {
  transform: rotate(225deg);
}

[data-panel-heading] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

[data-panel-heading] h2 {
  margin: 0;
  font-size: 16px;
}

body[data-page="projects"] main {
  width: min(920px, 100%);
  margin: max(28px, 5svh) auto 0;
}

body[data-page="users"] main {
  width: min(640px, 100%);
  margin: max(28px, 5svh) auto 0;
}

[data-admin-page],
[data-admin-heading],
[data-project-panel],
[data-project-panel] > header,
[data-project],
[data-project] > header,
[data-project] dl {
  display: grid;
  gap: 14px;
}

[data-admin-page] {
  gap: 18px;
}

[data-admin-heading] {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

[data-admin-heading] > div {
  display: grid;
  gap: 6px;
}

[data-admin-heading] h1,
[data-project-panel] h2,
[data-project] h3 {
  margin: 0;
  letter-spacing: -0.025em;
}

[data-admin-heading] h1 {
  font-size: 1.25rem;
  line-height: 1.3;
}

[data-admin-heading] p,
[data-project-panel] > header p,
[data-configured-name] {
  color: var(--muted);
}

[data-back-link] {
  width: fit-content;
  font-weight: 600;
}

[data-role-badge],
[data-save-state] {
  width: fit-content;
  border-radius: 999px;
  background: var(--surface-hover);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

[data-role-badge] {
  padding: 6px 10px;
}

[data-project-panel] {
  padding: clamp(20px, 4vw, 28px);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

[data-user-panel] {
  padding: clamp(20px, 4vw, 28px);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

[data-user-panel] > header {
  display: grid;
  gap: 3px;
}

[data-user-panel] > header p {
  color: var(--muted);
  font-size: 0.82rem;
}

[data-project-list] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

[data-project] {
  min-width: 0;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  background: var(--background);
}

[data-project] > header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

[data-project] > header > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

[data-user-headline] {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

[data-user-headline] strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-user-meta] {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

[data-user-identity] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-user-added] {
  flex: 0 0 auto;
  color: var(--quiet);
}

[data-user-chip] {
  flex: 0 0 auto;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

[data-user-chip][data-state="warning"] {
  background: transparent;
  color: var(--quiet);
  font-weight: 500;
}

[data-user-state] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding-top: 12px;
  color: var(--muted);
  font-size: 0.8rem;
}

[data-user-fields] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 14px;
}

[data-user-admin-field] {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
}

[data-user-admin-field] input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: var(--primary);
}

[data-user-identifier] {
  color: var(--quiet);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

[data-user-editor-footer] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
}

@media (max-width: 560px) {
  [data-user-fields] {
    grid-template-columns: minmax(0, 1fr);
  }
}

[data-project] > header code,
[data-project] dd code {
  overflow-wrap: anywhere;
}

[data-save-state] {
  min-height: 23px;
  padding: 3px 8px;
}

[data-configured-name] {
  font-size: 0.8rem;
}

[data-project-status][data-state="success"] {
  color: var(--success);
}

[data-user-status][data-state="success"] {
  color: var(--success);
}

[data-user-status][data-state="error"] {
  color: var(--danger);
}

[data-project] details {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

[data-project] summary {
  width: fit-content;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
}

[data-project] dl {
  margin: 14px 0 0;
}

[data-project] dl > div {
  display: grid;
  gap: 4px;
}

[data-project] dt {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

[data-project] dd {
  min-width: 0;
  margin: 0;
}

[data-project] ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
}

@media (max-width: 680px) {
  [data-project-list] {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-admin-heading] {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Motion language inspired by transitions.dev: short, interruptible state
 * changes; a soft spring for direct feedback; and a restrained stagger for
 * content that arrives as a group. The animations stay on opacity and
 * transform so they do not force layout during interaction.
 */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--motion-base);
  animation-timing-function: var(--ease-out);
}

::view-transition-old(root) {
  animation-name: tdev-view-out;
}

::view-transition-new(root) {
  animation-name: tdev-view-in;
}

@keyframes tdev-view-out {
  to {
    opacity: 0;
    transform: scale(0.99);
  }
}

@keyframes tdev-view-in {
  from {
    opacity: 0;
  }
}

@keyframes tdev-rise-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes tdev-disclose {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes tdev-row-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

[data-panel="auth"],
[data-panel="home"],
[data-admin-heading],
[data-project-panel],
[data-user-panel],
body[data-page="device"] main > section:not([hidden]),
body[data-page="agent-tokens"] main > section {
  animation: tdev-rise-in var(--motion-slow) var(--ease-out) both;
}

[data-admin-heading] {
  animation-delay: 20ms;
}

[data-project-panel],
[data-user-panel] {
  animation-delay: 70ms;
}

[data-project-list] > *,
[data-row-list] > * {
  --motion-index: 0;
  animation: tdev-rise-in var(--motion-slow) var(--ease-out) both;
  animation-delay: calc(var(--motion-index) * 45ms + 100ms);
}

[data-project-list] > :nth-child(2),
[data-row-list] > :nth-child(2) {
  --motion-index: 1;
}

[data-project-list] > :nth-child(3),
[data-row-list] > :nth-child(3) {
  --motion-index: 2;
}

[data-project-list] > :nth-child(4),
[data-row-list] > :nth-child(4) {
  --motion-index: 3;
}

[data-project-list] > :nth-child(5),
[data-row-list] > :nth-child(5) {
  --motion-index: 4;
}

[data-project-list] > :nth-child(6),
[data-row-list] > :nth-child(6) {
  --motion-index: 5;
}

[data-project-list] > :nth-child(7),
[data-row-list] > :nth-child(7) {
  --motion-index: 6;
}

[data-project-list] > :nth-child(8),
[data-row-list] > :nth-child(8) {
  --motion-index: 7;
}

body[data-page="agent-tokens"] tbody tr {
  --motion-index: 0;
  animation: tdev-row-in var(--motion-base) var(--ease-out) both;
  animation-delay: calc(var(--motion-index) * 35ms + 80ms);
}

body[data-page="agent-tokens"] tbody tr:nth-child(2) {
  --motion-index: 1;
}

body[data-page="agent-tokens"] tbody tr:nth-child(3) {
  --motion-index: 2;
}

body[data-page="agent-tokens"] tbody tr:nth-child(4) {
  --motion-index: 3;
}

body[data-page="agent-tokens"] tbody tr:nth-child(5) {
  --motion-index: 4;
}

body[data-page="agent-tokens"] #grant:not([hidden]) {
  animation: tdev-disclose var(--motion-base) var(--ease-out) both;
}

[data-project] details[open] > :not(summary) {
  animation: tdev-disclose var(--motion-base) var(--ease-out) both;
}

[data-project] summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

[data-project] summary::-webkit-details-marker {
  display: none;
}

[data-project] summary::after {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  transform: rotate(45deg);
  transition: transform var(--motion-fast) var(--ease-out);
}

[data-project] details[open] summary::after {
  transform: rotate(225deg);
}

[data-panel="home"] [data-dashboard-section] {
  transition: background-color var(--motion-base) ease,
    transform var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out);
}

[data-panel="home"] [data-dashboard-section]:focus-within {
  background: var(--surface);
  box-shadow: 0 8px 20px rgb(15 23 42 / 8%);
}

@media (hover: hover) and (pointer: fine) {
  [data-panel="auth"],
  [data-panel="home"],
  [data-project-panel],
  [data-user-panel],
  body[data-page="device"] main > section,
  body[data-page="agent-tokens"] main > section {
    transition: transform var(--motion-base) var(--ease-out),
      box-shadow var(--motion-base) var(--ease-out);
  }

  [data-panel="auth"]:hover,
  [data-panel="home"]:hover,
  [data-project-panel]:hover,
  [data-user-panel]:hover,
  body[data-page="device"] main > section:hover,
  body[data-page="agent-tokens"] main > section:hover {
    box-shadow: var(--shadow-lifted);
  }

  [data-project] {
    transition: transform var(--motion-base) var(--ease-out),
      box-shadow var(--motion-base) var(--ease-out),
      border-color var(--motion-fast) ease;
  }

  [data-project]:hover {
    border-color: var(--border-strong);
    box-shadow: 0 14px 30px rgb(15 23 42 / 10%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
}