/* Domus Ursi identity console. Brand tokens mirror the marketing site's
   tokens.css so the two feel like one product; kept as a standalone stylesheet
   because this UI is served by the auth service, not the Vite app. */
:root {
  /* Domus·Ursi gateway. Same tokens as the public site (src/styles/tokens.css):
     dark grounds, burgundy depth, metallics as edges and lettering, parchment
     text. The artwork is ornate; this UI is deliberately plain. */
  --green: 199 154 125;        /* legacy name: the primary accent is now rose gold */
  --terracotta: 185 148 99;    /* antique gold */
  --sky: 199 154 125;          /* focus ring: rose gold */
  --bg: 8 7 7;
  --surface: 24 20 20;
  --surface-2: 32 26 26;
  --ink: 231 213 189;
  --ivory: 241 229 211;
  --muted: 169 152 137;
  --border: 168 117 85;        /* bronze, used at low alpha */
  --danger: 199 70 70;
  --ok: 120 170 120;
  --wine: 84 21 28;
  --garnet: 124 23 34;
  --ruby: 163 29 43;
  --radius: 5px;
  --heading: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --body: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --ui: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--body);
  font-size: 1.05rem;
  background: rgb(var(--bg));
  background-image:
    radial-gradient(70rem 36rem at 80% -20%, rgb(var(--wine) / 0.45), transparent 60%),
    radial-gradient(40rem 26rem at -10% 110%, rgb(var(--border) / 0.12), transparent 60%);
  background-attachment: fixed;
  color: rgb(var(--ink));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: rgb(var(--green)); }
.boot { padding: 4rem; text-align: center; color: rgb(var(--muted)); }

/* --- layout ------------------------------------------------------------- */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.centered { flex: 1; display: grid; place-items: center; padding: 2rem 1rem; }
.card {
  width: 100%; max-width: 27rem; background: rgb(var(--surface) / 0.92);
  border: 1px solid rgb(var(--border) / 0.45); border-radius: calc(var(--radius) * 1.6);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.6), 0 30px 60px -30px rgb(0 0 0 / 0.9), 0 0 60px rgb(var(--wine) / 0.15);
  padding: 2.25rem 2.25rem 2rem;
  backdrop-filter: blur(6px);
}
.card .brand { margin-bottom: 1.6rem; }
.card h1 { font-size: 1.7rem; }
@media (max-width: 480px) { .card { padding: 1.6rem 1.25rem; border-radius: var(--radius); } .centered { padding: 1rem 0.75rem; } }
.card.wide { max-width: 62rem; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.85rem 1.4rem; background: rgb(var(--bg) / 0.9);
  border-bottom: 1px solid rgb(var(--border) / 0.35); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 10;
}
.container { width: 100%; max-width: 62rem; margin: 0 auto; padding: 1.75rem 1.25rem 4rem; }

/* --- brand mark --------------------------------------------------------- */
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand .mark {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgb(var(--surface-2)), rgb(var(--bg)));
  border: 1px solid rgb(var(--border) / 0.75); color: rgb(var(--green));
  display: grid; place-items: center; flex: none;
}
.brand .mark svg { width: 1.2rem; height: 1.2rem; }
.brand .name {
  font-family: var(--heading); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.1em;
  background-image: linear-gradient(180deg, #f3e6d2 0%, #d9b996 40%, #b08659 65%, #e9cfae 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand .sub { color: rgb(var(--muted)); font-size: 0.78rem; }

h1 { font-family: var(--heading); font-weight: 500; font-size: 1.5rem; margin: 0 0 0.35rem; letter-spacing: 0.06em; color: rgb(var(--ivory)); }
h2 { font-family: var(--heading); font-weight: 500; font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 0.75rem; color: rgb(var(--ivory)); }
.lead { color: rgb(var(--muted)); margin: 0 0 1.5rem; }
.eyebrow { font-family: var(--heading); text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.68rem; color: rgb(var(--green)); margin: 0 0 0.4rem; }

/* --- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; padding: 0.8rem 1rem; border-radius: var(--radius); text-decoration: none;
  font-family: var(--ui); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.03em; cursor: pointer; border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.btn:disabled { opacity: 0.55; cursor: progress; }
.btn-primary {
  background: linear-gradient(180deg, #711722, #3b0d12); color: rgb(var(--ivory));
  border-color: rgb(var(--border) / 0.7);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 10px 24px -14px rgb(var(--ruby) / 0.8);
}
.btn-primary:not(:disabled):hover { background: linear-gradient(180deg, #7d1a27, #45101a); border-color: rgb(var(--green) / 0.8); }
.btn:focus-visible { outline: 2px solid rgb(var(--sky)); outline-offset: 2px; }
.btn-ghost { background: rgb(var(--surface) / 0.6); border-color: rgb(var(--border) / 0.6); color: rgb(var(--ink)); }
.btn-ghost:not(:disabled):hover { border-color: rgb(var(--green)); }
.btn-danger { background: transparent; border-color: rgb(var(--danger) / 0.5); color: rgb(var(--danger)); }
.btn-danger:not(:disabled):hover { background: rgb(var(--danger) / 0.08); }
.btn.auto { width: auto; padding: 0.5rem 0.9rem; font-size: 0.85rem; }
.btn svg { width: 1.1rem; height: 1.1rem; }
.btn-row { display: flex; gap: 0.6rem; margin-top: 0.4rem; }
.btn-row .btn { width: auto; flex: 1; }

/* --- provider buttons --------------------------------------------------- */
.social { display: grid; gap: 0.55rem; }
.social .btn { background: rgb(var(--surface)); border-color: rgb(var(--border) / 0.5); color: rgb(var(--ink)); }
.social .btn:hover { border-color: rgb(var(--green)); }
.social .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; }

.divider { display: flex; align-items: center; gap: 0.75rem; color: rgb(var(--muted)); font-size: 0.78rem; margin: 1.25rem 0; }
.divider { font-family: var(--heading); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; }
.divider::before, .divider::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgb(var(--border) / 0.55), transparent); }

/* --- forms -------------------------------------------------------------- */
label { display: block; font-family: var(--ui); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; margin: 0 0 0.3rem; color: rgb(var(--ivory)); }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=search], select {
  width: 100%; padding: 0.68rem 0.8rem; border: 1px solid rgb(var(--border) / 0.45);
  border-radius: var(--radius); font-family: var(--ui); font-size: 0.95rem; background: rgb(var(--bg) / 0.7); color: rgb(var(--ivory));
}
input::placeholder { color: rgb(var(--muted) / 0.7); }
select option { background: rgb(var(--surface)); }
input:focus, select:focus { outline: 2px solid rgb(var(--sky)); outline-offset: 1px; border-color: rgb(var(--sky)); }
.field { margin-bottom: 1rem; }
.code-input { text-align: center; letter-spacing: 0.4em; font-family: var(--mono); font-size: 1.35rem; }

/* --- messages ----------------------------------------------------------- */
.alert { padding: 0.7rem 0.85rem; border-radius: var(--radius); font-size: 0.86rem; margin-bottom: 1rem; }
.alert-error { background: rgb(var(--danger) / 0.08); color: rgb(var(--danger)); border: 1px solid rgb(var(--danger) / 0.25); }
.alert-ok { background: rgb(var(--ok) / 0.1); color: rgb(var(--ok)); border: 1px solid rgb(var(--ok) / 0.28); }
.alert-info { background: rgb(var(--sky) / 0.14); color: rgb(var(--green)); border: 1px solid rgb(var(--sky) / 0.4); }
.hint { color: rgb(var(--muted)); font-size: 0.8rem; margin: 0.5rem 0 0; }

/* --- QR + recovery codes ------------------------------------------------ */
.qr { display: grid; place-items: center; padding: 1rem; background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); border-radius: var(--radius); margin-bottom: 1rem; }
.qr svg { width: 200px; height: 200px; }
.secret { font-family: var(--mono); font-size: 0.9rem; word-break: break-all; background: rgb(var(--bg)); padding: 0.5rem 0.65rem; border-radius: 0.4rem; border: 1px solid rgb(var(--border) / 0.4); text-align: center; }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; font-family: var(--mono); margin: 1rem 0; }
.codes span { background: rgb(var(--bg)); border: 1px solid rgb(var(--border) / 0.4); border-radius: 0.35rem; padding: 0.4rem; text-align: center; }
.qr { background: #f1e5d3; border-color: rgb(var(--border) / 0.5); }
.hint, .lead, .empty { font-family: var(--ui); }
.lead { font-size: 0.95rem; }
.hint { font-size: 0.78rem; }
.alert { font-family: var(--ui); }

/* --- account + admin ---------------------------------------------------- */
.grid { display: grid; gap: 1.1rem; }
@media (min-width: 800px) { .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }
.panel { background: rgb(var(--surface) / 0.85); border: 1px solid rgb(var(--border) / 0.35); border-radius: calc(var(--radius) * 1.4); padding: 1.35rem 1.5rem; }
.panel h2 { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid rgb(var(--border) / 0.2); }
.row:last-child { border-bottom: 0; }
.row .meta { min-width: 0; }
.row .meta .t { font-family: var(--ui); font-size: 0.92rem; font-weight: 600; color: rgb(var(--ivory)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .meta .s { font-family: var(--ui); color: rgb(var(--muted)); font-size: 0.78rem; }
.empty { color: rgb(var(--muted)); font-size: 0.87rem; padding: 0.5rem 0; }
.badge { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.15rem 0.5rem; border-radius: 99px; }
.badge { font-family: var(--ui); }
.badge-green { background: rgb(var(--ok) / 0.15); color: rgb(var(--ok)); }
.badge-amber { background: rgb(var(--terracotta) / 0.15); color: rgb(var(--terracotta)); }
.badge-muted { background: rgb(var(--muted) / 0.14); color: rgb(var(--muted)); }
.badge-danger { background: rgb(var(--danger) / 0.12); color: rgb(var(--danger)); }

table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
table { font-family: var(--ui); }
th, td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid rgb(var(--border) / 0.2); vertical-align: middle; }
th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgb(var(--muted)); }
.table-wrap { overflow-x: auto; }
.tabs { display: flex; gap: 0.35rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.tab { padding: 0.45rem 0.9rem; border-radius: 99px; border: 1px solid rgb(var(--border) / 0.4); background: transparent; font-family: var(--ui); font-size: 0.82rem; font-weight: 600; cursor: pointer; color: rgb(var(--muted)); }
.tab.active { background: linear-gradient(180deg, #711722, #3b0d12); color: rgb(var(--ivory)); border-color: rgb(var(--border) / 0.7); }
.muted-link { background: none; border: 0; color: rgb(var(--green)); font-family: var(--ui); font-size: 0.8rem; cursor: pointer; text-decoration: underline; text-decoration-color: rgb(var(--border) / 0.5); text-underline-offset: 3px; padding: 0; }
.stack { display: grid; gap: 0.4rem; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.userline { display: flex; align-items: center; gap: 0.6rem; }
.avatar { width: 2rem; height: 2rem; border-radius: 50%; background: linear-gradient(180deg, #711722, #3b0d12); border: 1px solid rgb(var(--border) / 0.6); color: rgb(var(--ivory)); display: grid; place-items: center; font-family: var(--ui); font-weight: 600; font-size: 0.75rem; flex: none; }
.footer { text-align: center; color: rgb(var(--muted)); font-family: var(--heading); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; padding: 1.5rem; }
.topbar .brand .name { font-size: 1rem; }
select { appearance: auto; }
.btn-ghost.auto, .btn.auto { box-shadow: none; }
.spin { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- user management additions ------------------------------------------- */
.uid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; letter-spacing: .06em; background: rgb(var(--muted) / 0.12); padding: .15rem .45rem; border-radius: .35rem; }
.pmark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: .7rem; font-weight: 700; vertical-align: middle; }
.check { display: flex; align-items: center; gap: .5rem; font-size: .92rem; cursor: pointer; }
.check input { width: auto; margin: 0; }
.mailbody { white-space: pre-wrap; font-size: .8rem; background: rgb(var(--muted) / 0.08); padding: .6rem .75rem; border-radius: .5rem; max-width: 36rem; margin: 0; }
input[type='date'] { font-family: inherit; }