:root {
    color-scheme: light dark;
    --bg: #f3f5fa; --card: #ffffff; --text: #171a21; --muted: #65707f; --line: #e1e5ee;
    --accent: #4f6df5; --accent-2: #8a5cf6; --accent-text: #fff; --danger: #d23f3f; --ok: #25965a;
    --shadow: 0 1px 2px rgba(20, 30, 60, .06), 0 8px 24px rgba(20, 30, 60, .07);
    --glow-1: rgba(79, 109, 245, .18); --glow-2: rgba(138, 92, 246, .16);
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0e1015; --card: #171a21; --text: #eceef3; --muted: #8e98a8; --line: #272c36;
        --accent: #7088ff; --accent-2: #a37bff; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
        --glow-1: rgba(112, 136, 255, .16); --glow-2: rgba(163, 123, 255, .14); --ok: #4cc585;
    }
}
* { box-sizing: border-box; }
body {
    margin: 0; min-height: 100vh; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text);
    background: radial-gradient(60rem 30rem at 10% -10%, var(--glow-1), transparent 60%),
                radial-gradient(50rem 28rem at 100% 0%, var(--glow-2), transparent 60%), var(--bg);
    background-attachment: fixed;
}
a { color: var(--accent); }

.logo {
    display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; font-size: 1.2rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 6px 16px var(--glow-1);
}
.logo.big { width: 3.4rem; height: 3.4rem; border-radius: 16px; font-size: 1.7rem; }

header {
    position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .9rem; padding: .7rem clamp(1rem, 4vw, 2rem);
    background: color-mix(in srgb, var(--card) 80%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
header h1 { font-size: 1.05rem; margin: 0; flex: 1; font-weight: 650; }
header a { text-decoration: none; font-weight: 500; }
header a:hover { text-decoration: underline; }
.user-chip { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .92rem; }
.avatar {
    display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; font-weight: 650; font-size: .85rem;
    background: color-mix(in srgb, var(--accent) 18%, var(--card)); color: var(--accent);
}

main { max-width: 60rem; margin: 0 auto; padding: 2.5rem clamp(1rem, 4vw, 2rem) 4rem; }
.hero { margin-bottom: 2rem; }
.hero h2 { font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.2; margin: 0 0 .35rem; letter-spacing: -.02em; }
.hero p { margin: 0; color: var(--muted); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem; margin-bottom: 1rem; box-shadow: var(--shadow); }
.card h2 { margin-top: 0; font-size: 1.05rem; }

/* sign-in */
.center { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.login { width: 100%; max-width: 24rem; text-align: center; }
.login .logo { margin-bottom: 1rem; }
.login h1 { margin: 0; font-size: 1.6rem; letter-spacing: -.02em; }
.login .sub { margin: .25rem 0 1.5rem; color: var(--muted); }
.login form { text-align: left; padding: 1.6rem; }
.login .foot { margin-top: 1.25rem; font-size: .85rem; color: var(--muted); }

label { display: block; margin: .9rem 0 .3rem; font-size: .85rem; font-weight: 550; color: var(--muted); }
input[type=text], input[type=password] {
    width: 100%; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text);
    font: inherit; transition: border-color .15s, box-shadow .15s;
}
input[type=text]:focus, input[type=password]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow-1); }
button {
    padding: .55rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text);
    font: inherit; font-weight: 500; cursor: pointer; transition: transform .1s, border-color .15s, background .15s;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:active:not(:disabled) { transform: translateY(1px); }
button.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: var(--accent-text); font-weight: 600; }
button.primary:hover:not(:disabled) { filter: brightness(1.06); border-color: transparent; }
button.danger { color: var(--danger); }
button.danger:hover:not(:disabled) { border-color: var(--danger); }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wide { width: 100%; margin-top: .5rem; padding: .75rem 1rem; }
.error { color: var(--danger); min-height: 1.5em; margin: .6rem 0 0; font-size: .92rem; }
.error.ok { color: var(--ok); }

/* hub */
.apps { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.apps a { display: block; text-decoration: none; color: inherit; }
.apps .card { display: flex; gap: 1rem; align-items: flex-start; height: 100%; margin: 0; transition: transform .15s, border-color .15s, box-shadow .15s; }
.apps a:hover .card { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow), 0 12px 30px var(--glow-1); }
.apps .tile {
    flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; font-size: 1.5rem;
    background: color-mix(in srgb, var(--accent) 14%, var(--card));
}
.apps h3 { margin: 0 0 .15rem; font-size: 1.05rem; }
.apps .go { margin-left: auto; color: var(--muted); transition: transform .15s, color .15s; }
.apps a:hover .go { transform: translateX(3px); color: var(--accent); }
.muted { color: var(--muted); font-size: .92rem; margin: 0; }
.empty { text-align: center; padding: 2.5rem 1.5rem; }
.empty .big { font-size: 2.2rem; }
.skeleton { height: 5.5rem; border-radius: 16px; background: linear-gradient(90deg, var(--line), transparent, var(--line)); background-size: 200% 100%; animation: shimmer 1.2s infinite; opacity: .6; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* admin */
table { width: 100%; border-collapse: collapse; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
th, td { text-align: left; padding: .75rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.actions { white-space: nowrap; text-align: right; }
td.actions button { margin-left: .3rem; padding: .4rem .75rem; font-size: .9rem; }
.checks label { display: inline-flex; align-items: center; gap: .35rem; margin: 0 .85rem 0 0; color: var(--text); font-weight: 400; font-size: .95rem; }
.row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.row > div { flex: 1 1 12rem; }
.badge { font-size: .7rem; padding: .1rem .5rem; border-radius: 99px; background: color-mix(in srgb, var(--accent) 16%, var(--card)); color: var(--accent); margin-left: .45rem; font-weight: 600; }
@media (max-width: 40rem) { td.actions { white-space: normal; } .user-chip span.name { display: none; } }

dialog { border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--text); box-shadow: var(--shadow); padding: 1.5rem; width: min(34rem, calc(100vw - 2rem)); }
dialog::backdrop { background: rgba(10, 12, 18, .55); backdrop-filter: blur(3px); }
code { background: color-mix(in srgb, var(--accent) 10%, var(--card)); padding: .05rem .35rem; border-radius: 6px; font-size: .88em; }
input:disabled { opacity: .6; cursor: not-allowed; }

/* passkeys */
.passkey { margin-top: 1rem; }
.or { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .85rem; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.passkey-list { list-style: none; padding: 0; margin: .5rem 0 1rem; }
.passkey-list li { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.passkey-list li:last-child { border-bottom: 0; }
.passkey-list .info { flex: 1; min-width: 0; }
.passkey-list strong { display: block; overflow-wrap: anywhere; }