/* ==========================================================================
   Unity Drive demo — login / role picker
   ========================================================================== */
body { background: radial-gradient(900px 400px at 50% -10%, #e3ebf5, transparent 70%), var(--offwhite); min-height: 100vh; }
.login-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; }
.login-header .brand img { height: 44px; }
.login-main { width: min(1120px, 100% - 32px); margin: 0 auto; padding: 24px 0 80px; }
.login-intro { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.login-intro h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; }
.login-intro p { color: var(--slate); font-size: 16px; }
#loginNotice .alert { justify-content: center; text-align: left; }

.role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.role-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 26px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; position: relative; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.role-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--c); }
.role-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.role-card.is-highlight { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 45%, transparent), var(--shadow); }
.role-icon { width: 54px; height: 54px; border-radius: 15px; background: var(--c); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.role-card h2 { font-size: 21px; margin-bottom: 6px; }
.role-card > p { color: var(--slate); font-size: 14.5px; min-height: 44px; }
.role-card .segmented { margin-bottom: 12px; width: 100%; }
.role-card .segmented button { flex: 1; font-size: 12.5px; padding: 7px 6px; white-space: nowrap; }
.role-user { display: flex; align-items: center; gap: 10px; background: var(--offwhite); border-radius: 12px; padding: 10px 12px; margin: 4px 0 16px; min-height: 58px; }
.role-user strong { display: block; font-size: 14px; color: var(--ink); }
.role-user small { color: var(--muted); font-size: 12.5px; }
.login-foot { text-align: center; color: var(--muted); font-size: 13px; margin-top: 28px; display: flex; gap: 6px; justify-content: center; align-items: center; }

@media (max-width: 900px) { .role-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } .role-card > p { min-height: 0; } }
@media (max-width: 480px) { .login-header { padding: 12px 16px; } .login-header .brand img { height: 36px; } }