/* =====================================================================
   Xcojo Account — Modern layer (November 2026)
   Loaded after design-system.css and xcojo-brand.css. Visual only: it changes
   surfaces, spacing, controls and motion — never what a page does. EB Garamond
   stays the brand typeface. Remove this one file to return to the previous look.
   ===================================================================== */

:root {
  --xm-ease: cubic-bezier(.2, .8, .2, 1);
  --xm-card: rgba(255, 255, 255, .66);
  --xm-card-strong: rgba(255, 255, 255, .86);
  --xm-hair: rgba(15, 23, 42, .08);
  --xm-hair-strong: rgba(15, 23, 42, .14);
  --xm-field: rgba(255, 255, 255, .9);
  --xm-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 14px 34px -16px rgba(16, 24, 40, .16), 0 48px 90px -48px color-mix(in srgb, var(--xco-accent) 40%, transparent);
  --xm-shadow-hover: 0 2px 4px rgba(16, 24, 40, .06), 0 22px 44px -18px rgba(16, 24, 40, .22), 0 50px 90px -40px color-mix(in srgb, var(--xco-accent) 45%, transparent);
  --xm-ring: 0 0 0 4px color-mix(in srgb, var(--xco-accent) 22%, transparent);
  --xco-radius-lg: 26px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --xm-card: rgba(22, 28, 30, .62); --xm-card-strong: rgba(26, 33, 35, .9); --xm-hair: rgba(255, 255, 255, .08); --xm-hair-strong: rgba(255, 255, 255, .16); --xm-field: rgba(14, 18, 19, .72);
    --xm-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 20px 50px -24px rgba(0, 0, 0, .7); --xm-shadow-hover: 0 2px 6px rgba(0, 0, 0, .45), 0 26px 60px -24px rgba(0, 0, 0, .8);
  }
}
:root[data-theme="dark"] {
  --xm-card: rgba(22, 28, 30, .62); --xm-card-strong: rgba(26, 33, 35, .9); --xm-hair: rgba(255, 255, 255, .08); --xm-hair-strong: rgba(255, 255, 255, .16); --xm-field: rgba(14, 18, 19, .72);
  --xm-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 20px 50px -24px rgba(0, 0, 0, .7); --xm-shadow-hover: 0 2px 6px rgba(0, 0, 0, .45), 0 26px 60px -24px rgba(0, 0, 0, .8);
}

/* ---- Page background: soft light, a faint grid, gentle motion ---------------- */
html body .xco-ambient {
  background:
    radial-gradient(42% 36% at 12% 8%, color-mix(in srgb, var(--xco-accent) 26%, transparent), transparent 70%),
    radial-gradient(38% 34% at 92% 14%, color-mix(in srgb, #6366F1 14%, transparent), transparent 72%),
    radial-gradient(48% 42% at 78% 92%, color-mix(in srgb, var(--xco-accent) 18%, transparent), transparent 72%),
    var(--xco-porcelain);
}
html body .xco-ambient::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(color-mix(in srgb, var(--xco-ink) 9%, transparent) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 85%); mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 85%);
}

/* ---- Surfaces ----------------------------------------------------------------- */
html body .xco-glass {
  background: linear-gradient(180deg, var(--xm-card-strong), var(--xm-card));
  border: 1px solid var(--xm-hair);
  box-shadow: var(--xm-shadow), inset 0 1px 0 rgba(255, 255, 255, .55);
  backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body .xco-glass { box-shadow: var(--xm-shadow), inset 0 1px 0 rgba(255, 255, 255, .05); } }
:root[data-theme="dark"] body .xco-glass { box-shadow: var(--xm-shadow), inset 0 1px 0 rgba(255, 255, 255, .05); }
body.xco-reduce-transparency .xco-glass { background: var(--xco-porcelain-dim); }

/* ---- Type --------------------------------------------------------------------- */
html body h1, html body h2, html body h3 { letter-spacing: -.022em; }
html body h1 { font-weight: 700; }
html body .xco-overline { letter-spacing: .14em; font-size: .7rem; font-weight: 700; color: color-mix(in srgb, var(--xco-accent) 70%, var(--xco-ink-soft)); text-transform: uppercase; }
::selection { background: color-mix(in srgb, var(--xco-accent) 24%, transparent); }

/* ---- Buttons ------------------------------------------------------------------ */
html body .xco-btn {
  font-family: "EB Garamond", Georgia, serif !important; font-size: 1.02rem;
  min-height: 46px; border-radius: 14px; font-weight: 650; letter-spacing: .005em;
  transition: transform .18s var(--xm-ease), box-shadow .22s var(--xm-ease), background .2s ease, border-color .2s ease, color .2s ease;
}
html body .xco-btn:focus-visible { outline: none; box-shadow: var(--xm-ring); }
html body .xco-btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--xco-accent) 88%, #fff), var(--xco-accent) 55%, color-mix(in srgb, var(--xco-accent) 86%, #000));
  border: 1px solid color-mix(in srgb, var(--xco-accent) 80%, #000);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 22px -12px color-mix(in srgb, var(--xco-accent) 85%, transparent);
}
html body .xco-btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 16px 30px -14px color-mix(in srgb, var(--xco-accent) 90%, transparent); }
html body .xco-btn-secondary { background: var(--xm-field); border: 1px solid var(--xm-hair-strong); color: var(--xco-ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
html body .xco-btn-secondary:hover { background: color-mix(in srgb, var(--xco-accent) 7%, var(--xm-field)); border-color: color-mix(in srgb, var(--xco-accent) 35%, var(--xm-hair-strong)); transform: translateY(-1px); }
html body .xco-btn:active { transform: translateY(0) scale(.985); }
html body .xco-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
html body .xco-btn.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid currentColor; border-color: rgba(255, 255, 255, .9) rgba(255, 255, 255, .9) transparent transparent; animation: xm-spin .7s linear infinite; }
html body .xco-btn-secondary.is-loading::after { border-color: var(--xco-accent) var(--xco-accent) transparent transparent; }
@keyframes xm-spin { to { transform: rotate(360deg); } }
.xco-btn-sm { min-height: 36px !important; padding: 0 12px !important; font-size: .86rem; border-radius: 11px !important; }

/* Sign-in methods: Google, passkey, QR */
html body .xco-login-providers { gap: 10px; grid-template-columns: 1fr 1fr; }
html body .xco-login-providers > :first-child { grid-column: 1 / -1; }
html body .xco-btn-oauth { background: var(--xm-field); border: 1px solid var(--xm-hair-strong); color: var(--xco-ink); justify-content: center; gap: 10px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); font-size: 1.02rem; padding: 0 14px; white-space: nowrap; }
html body .xco-btn-oauth:hover { border-color: color-mix(in srgb, var(--xco-accent) 40%, var(--xm-hair-strong)); background: color-mix(in srgb, var(--xco-accent) 6%, var(--xm-field)); transform: translateY(-1px); }
html body .xco-btn-oauth svg { width: 19px; height: 19px; flex: none; }
html body .xco-btn-passkey svg, html body .xco-btn-qr svg { color: var(--xco-accent); }
@media (max-width: 420px) { html body .xco-login-providers { grid-template-columns: 1fr; } }

/* ---- Fields ------------------------------------------------------------------- */
html body .xco-field input, html body .xco-field select, html body .xco-field textarea {
  min-height: 50px; border-radius: 14px; background: var(--xm-field); border: 1px solid var(--xm-hair-strong);
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .04); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
html body .xco-field input:hover, html body .xco-field select:hover { border-color: color-mix(in srgb, var(--xco-accent) 30%, var(--xm-hair-strong)); }
html body .xco-field input:focus, html body .xco-field select:focus, html body .xco-field textarea:focus { outline: none; border-color: var(--xco-accent); box-shadow: var(--xm-ring); background: var(--xm-card-strong); }
html body .xco-field label { font-weight: 600; letter-spacing: .005em; }
html body .xco-field input::placeholder { color: color-mix(in srgb, var(--xco-ink-soft) 70%, transparent); }
html body .xco-password-toggle { border-radius: 10px; padding: 6px 10px; }
html body .xco-password-toggle:hover { background: color-mix(in srgb, var(--xco-accent) 10%, transparent); }
html body .xco-alert { border-radius: 14px; }

/* ---- Sign-in pages ------------------------------------------------------------ */
html body .xco-auth-shell { width: min(100%, 470px); }
html body .xco-login-card { padding: 38px 34px 32px; border-radius: 28px; }
@media (max-width: 520px) { html body .xco-login-card { padding: 28px 20px 24px; border-radius: 24px; } }
html body .xco-login-heading { margin: 26px 0 20px; }
html body .xco-login-heading h1 { font-size: clamp(2rem, 6vw, 2.5rem); }
html body .xco-divider-text { margin: 18px 0; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
html body .xco-auth-switch a, html body .xco-label-row a { font-weight: 650; }
html body .xco-auth-footer, html body .xco-service-footer { opacity: .9; }
html body .xco-language-row select { border-radius: 12px; background: var(--xm-field); }

/* ---- Dashboard ---------------------------------------------------------------- */
html body .xco-account-card { border-radius: 22px; padding: 22px; align-items: center; transition: transform .22s var(--xm-ease), box-shadow .22s var(--xm-ease), border-color .2s ease; }
html body .xco-account-card:hover { transform: translateY(-3px); box-shadow: var(--xm-shadow-hover); border-color: color-mix(in srgb, var(--xco-accent) 30%, var(--xm-hair)); }
html body .xco-account-card h3 { font-size: 1.18rem; }
html body .xco-account-card p { color: var(--xco-ink-soft); margin: 0; }
html body .xco-card-icon { width: 42px; height: 42px; border-radius: 13px; font-size: 1.05rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 18px -10px currentColor; }
html body .xco-icon-teal { background: linear-gradient(145deg, color-mix(in srgb, var(--xco-accent) 80%, #fff), var(--xco-accent)); }
html body .xco-icon-blue { background: linear-gradient(145deg, #4F8DF7, #1D6CE0); }
html body .xco-icon-indigo { background: linear-gradient(145deg, #8B7CF6, #5B4BDB); }
html body .xco-icon-purple { background: linear-gradient(145deg, #C084FC, #9333EA); }
html body .xco-icon-gray { background: linear-gradient(145deg, #94A3B8, #64748B); }
html body .xco-chevron { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 1.35rem; background: color-mix(in srgb, var(--xco-ink) 5%, transparent); transition: background .2s ease, color .2s ease, transform .2s var(--xm-ease); }
html body .xco-account-card:hover .xco-chevron { background: color-mix(in srgb, var(--xco-accent) 14%, transparent); color: var(--xco-accent); transform: translateX(2px); }
html body .xco-account-card.xco-x-feature { background: linear-gradient(150deg, color-mix(in srgb, var(--xco-accent) 13%, var(--xm-card-strong)), var(--xm-card)); }
html body .xco-account-profile { border-radius: 26px; }
html body .xco-account-avatar { box-shadow: 0 0 0 4px var(--xm-card-strong), 0 12px 28px -12px rgba(16, 24, 40, .35); }

/* ---- Settings ----------------------------------------------------------------- */
html body .xco-settings-nav a { border-radius: 12px; transition: background .18s ease, color .18s ease; }
html body .xco-settings-nav a.is-active { background: color-mix(in srgb, var(--xco-accent) 14%, transparent); color: color-mix(in srgb, var(--xco-accent) 75%, var(--xco-ink)); box-shadow: inset 3px 0 0 var(--xco-accent); }
html body .xco-settings-icon { border-radius: 10px; }
html body .xco-settings-card { border-radius: 16px; transition: background .18s ease; }
html body .xco-settings-card:hover { background: color-mix(in srgb, var(--xco-accent) 4%, transparent); }
html body .xco-status-pill { border-radius: 999px; font-weight: 650; }

/* ---- Motion ------------------------------------------------------------------- */
html body .xco-fade-in { animation: xm-rise .55s var(--xm-ease) both; }
html body .xco-account-grid > .xco-fade-in:nth-child(2) { animation-delay: .04s; } html body .xco-account-grid > .xco-fade-in:nth-child(3) { animation-delay: .08s; }
html body .xco-account-grid > .xco-fade-in:nth-child(4) { animation-delay: .12s; } html body .xco-account-grid > .xco-fade-in:nth-child(5) { animation-delay: .16s; }
html body .xco-account-grid > .xco-fade-in:nth-child(n+6) { animation-delay: .2s; }
@keyframes xm-rise { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html body .xco-fade-in { animation: none; } html body .xco-btn, html body .xco-account-card { transition: none; } }

/* ---- QR sign-in -------------------------------------------------------------- */
.xco-qr-card { text-align: center; }
.xco-qr-card .xco-auth-brand { justify-content: center; }
.xco-qr-frame { position: relative; width: min(260px, 72vw); margin: 6px auto 14px; padding: 14px; border-radius: 24px; background: #fff; border: 1px solid var(--xm-hair); box-shadow: var(--xm-shadow); transition: filter .3s ease; }
.xco-qr-frame svg { display: block; width: 100%; height: auto; border-radius: 8px; }
.xco-qr-frame.is-dim svg { filter: blur(3px) grayscale(.6); opacity: .45; }
.xco-qr-state { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3.2rem; font-weight: 800; color: var(--xco-accent); }
.xco-qr-state.is-bad { color: var(--xco-danger); }
.xco-qr-status { color: var(--xco-ink-soft); font-size: .92rem; margin: 0 0 12px; }
.xco-qr-steps { text-align: left; margin: 0 auto 18px; max-width: 330px; padding-left: 20px; color: var(--xco-ink-soft); font-size: .92rem; }
.xco-qr-steps li { margin: 4px 0; }
.xco-qr-request { display: grid; gap: 8px; margin: 0 0 14px; text-align: left; }
.xco-qr-request > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--xco-ink) 4%, transparent); border: 1px solid var(--xm-hair); }
.xco-qr-request span { color: var(--xco-ink-soft); }
.xco-x-badge { width: 64px; height: 64px; margin: 22px auto 0; border-radius: 50%; display: grid; place-items: center; font-size: 1.9rem; font-weight: 800; color: #fff; background: var(--xco-accent); box-shadow: 0 14px 30px -14px var(--xco-accent); }
.xco-x-badge.is-bad { background: var(--xco-danger); box-shadow: 0 14px 30px -14px var(--xco-danger); }
.xco-center .xco-auth-brand { justify-content: center; }

/* ---- Passkeys & verification page -------------------------------------------- */
.xco-x-shell { max-width: 880px; margin: 0 auto; padding: 36px 20px 90px; display: grid; gap: 16px; }
.xco-x-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.xco-x-top .xco-back-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--xco-ink); text-decoration: none; }
.xco-x-hero { padding: 30px 28px; background: linear-gradient(150deg, color-mix(in srgb, var(--xco-accent) 16%, var(--xm-card-strong)), var(--xm-card)) !important; }
.xco-x-hero h1 { margin: 6px 0 8px; font-size: clamp(1.9rem, 5vw, 2.6rem); }
.xco-x-hero p { margin: 0; color: var(--xco-ink-soft); max-width: 640px; }
.xco-x-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.xco-x-chip { padding: 6px 12px; border-radius: 999px; font-size: .85rem; font-weight: 650; background: var(--xm-field); border: 1px solid var(--xm-hair-strong); color: var(--xco-ink-soft); }
.xco-x-chip.is-good { color: var(--xco-success); border-color: color-mix(in srgb, var(--xco-success) 35%, transparent); background: color-mix(in srgb, var(--xco-success) 9%, var(--xm-field)); }
.xco-x-section { padding: 24px !important; }
.xco-x-head { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.xco-x-head h2 { margin: 0 0 3px; font-size: 1.35rem; }
.xco-x-head p { margin: 0; color: var(--xco-ink-soft); }
.xco-x-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.xco-x-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.xco-x-ico.is-teal { background: linear-gradient(145deg, color-mix(in srgb, var(--xco-accent) 80%, #fff), var(--xco-accent)); }
.xco-x-ico.is-blue { background: linear-gradient(145deg, #4F8DF7, #1D6CE0); }
.xco-x-ico.is-indigo { background: linear-gradient(145deg, #8B7CF6, #5B4BDB); }
.xco-x-ico.is-purple { background: linear-gradient(145deg, #C084FC, #9333EA); }
.xco-x-list { margin-top: 16px; display: grid; gap: 8px; }
.xco-x-item { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--xco-ink) 3%, transparent); border: 1px solid var(--xm-hair); }
.xco-x-main { display: grid; min-width: 0; }
.xco-x-main span { color: var(--xco-ink-soft); font-size: .86rem; }
.xco-x-dot { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--xco-accent) 12%, transparent); }
.xco-x-form { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: end; margin-top: 16px; }
.xco-x-form .xco-field { margin: 0; }
.xco-x-note { margin: 14px 0 0; color: var(--xco-ink-soft); font-size: .9rem; }
.xco-x-msg { padding: 12px 16px; border-radius: 14px; font-weight: 600; border: 1px solid var(--xm-hair); }
.xco-x-msg.is-good { color: var(--xco-success); background: color-mix(in srgb, var(--xco-success) 9%, var(--xm-card-strong)); border-color: color-mix(in srgb, var(--xco-success) 30%, transparent); }
.xco-x-msg.is-bad { color: var(--xco-danger); background: color-mix(in srgb, var(--xco-danger) 8%, var(--xm-card-strong)); border-color: color-mix(in srgb, var(--xco-danger) 30%, transparent); }
@media (max-width: 680px) {
  .xco-x-head { grid-template-columns: auto 1fr; } .xco-x-head > .xco-btn, .xco-x-head > a.xco-btn, .xco-x-head > .xco-status-pill { grid-column: 1 / -1; justify-self: start; }
  .xco-x-form { grid-template-columns: 1fr; } .xco-x-item { grid-template-columns: auto 1fr; } .xco-x-item .xco-btn { grid-column: span 1; }
}