:root {
    --wawi-bg: #eef1f6;
    --wawi-surface: #ffffff;
    --wawi-surface-muted: #f7f8fb;
    --wawi-text: #1d2433;
    --wawi-muted: #697386;
    --wawi-primary: #4963e8;
    --wawi-primary-dark: #354bc6;
    --wawi-primary-soft: #eef1ff;
    --wawi-border: #dfe4ec;
    --wawi-success: #18825d;
    --wawi-danger: #c43d4b;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body.wawi-auth-page,
body.wawi-users-page { margin: 0; background: var(--wawi-bg); color: var(--wawi-text); }

body.wawi-auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background-image: linear-gradient(rgba(73,99,232,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(73,99,232,.035) 1px, transparent 1px);
    background-size: 32px 32px;
}
.wawi-auth-page .login {
    width: min(100%, 420px);
    padding: 32px;
    border: 1px solid var(--wawi-border);
    border-radius: 14px;
    background: var(--wawi-surface);
    box-shadow: 0 12px 36px rgba(35,47,70,.10);
}
.wawi-auth-page .mark { width: 42px; height: 42px; margin-bottom: 24px; border-radius: 10px; background: var(--wawi-primary); box-shadow: none; }
.wawi-auth-page h1 { font-size: 24px; letter-spacing: -.025em; }
.wawi-auth-page p { color: var(--wawi-muted); }
.wawi-auth-page label { color: #475467; font-size: 12px; }
.wawi-auth-page input { min-height: 42px; border-color: var(--wawi-border); border-radius: 9px; background: var(--wawi-surface-muted); }
.wawi-auth-page input:focus { border-color: var(--wawi-primary); background: #fff; box-shadow: 0 0 0 3px rgba(73,99,232,.13); }
.wawi-auth-page button { min-height: 42px; border-radius: 9px; background: var(--wawi-primary); }
.wawi-auth-page button:hover { background: var(--wawi-primary-dark); }
.wawi-auth-page .error { border: 1px solid #f0c2c7; border-radius: 9px; background: #fff1f2; color: #932f3b; }

.wawi-users-page header {
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: 72px;
    padding: 14px max(24px, calc((100vw - 1180px)/2));
    border-bottom: 1px solid var(--wawi-border);
    background: rgba(255,255,255,.95);
    color: var(--wawi-text);
    box-shadow: none;
}
.wawi-users-page header a { padding: 8px 12px; border: 1px solid var(--wawi-border); border-radius: 8px; color: var(--wawi-primary); background: var(--wawi-primary-soft); }
.wawi-users-page main { width: min(1180px, calc(100% - 40px)); margin: 28px auto; }
.wawi-users-page .card { margin-bottom: 20px; padding: 24px; border: 1px solid var(--wawi-border); border-radius: 12px; background: #fff; box-shadow: 0 4px 14px rgba(35,47,70,.07); }
.wawi-users-page h1, .wawi-users-page h2 { letter-spacing: -.02em; }
.wawi-users-page input, .wawi-users-page select { min-height: 40px; border-color: var(--wawi-border); border-radius: 8px; background: var(--wawi-surface-muted); }
.wawi-users-page input:focus, .wawi-users-page select:focus { border-color: var(--wawi-primary); background: #fff; outline: 0; box-shadow: 0 0 0 3px rgba(73,99,232,.13); }
.wawi-users-page button { min-height: 38px; border-radius: 8px; background: var(--wawi-primary); }
.wawi-users-page button.secondary { background: #596579; }
.wawi-users-page th { background: var(--wawi-surface-muted); color: var(--wawi-muted); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.wawi-users-page th, .wawi-users-page td { border-color: var(--wawi-border); }
.wawi-users-page .notice { border: 1px solid #b9dfd1; border-radius: 9px; background: #effaf6; color: #146047; }
.wawi-users-page .notice.error { border-color: #f0c2c7; background: #fff1f2; color: #932f3b; }

@media (max-width: 800px) {
    .wawi-auth-page .login { padding: 24px; }
    .wawi-users-page main { width: min(100% - 24px, 1180px); margin: 16px auto; }
    .wawi-users-page .card { padding: 16px; }
}