.login { display: flex; min-height: 100dvh; }

.login-brand {
  background:
    radial-gradient(circle at 20% 10%, var(--glow), transparent 45%),
    linear-gradient(170deg, var(--surface), var(--bg));
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px clamp(20px, 4vw, 56px);
}

.lb-home { color: var(--ink-2); font-size: 13px; font-weight: 600; text-decoration: none; }

.lb-home:hover { color: var(--accent-text); }

.lb-body { display: flex; flex-direction: column; gap: 16px; max-width: 480px; }

.lb-logo { font-size: 14px; letter-spacing: 0.04em; }

.lb-logo span { color: var(--accent-text); }

.lb-body h1 { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.02em; line-height: 1.1; margin: 0; }

.lb-body p { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin: 0; }

.lb-points { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 8px 0 0; padding: 0; }

.lb-points li { align-items: center; display: flex; gap: 12px; }

.lb-points b { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 999px; color: var(--accent-text); font-size: 11.5px; min-width: 56px; padding: 3px 10px; text-align: center; }

.lb-points span { color: var(--ink-2); font-size: 13.5px; }

.lb-foot { color: var(--muted); font-size: 12px; }

.login-main { align-items: center; display: flex; flex: 1; flex-direction: column; gap: 14px; justify-content: center; padding: 72px 16px 24px; position: relative; }

.login-top { align-items: center; display: flex; justify-content: space-between; left: 20px; position: absolute; right: 20px; top: 16px; }

.login-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; gap: 18px; max-width: 440px; padding: 26px; width: 100%; }

.login-form { display: flex; flex-direction: column; gap: 14px; }

.login-form h2 { font-size: 20px; margin: 0; }

.login-form > p { font-size: 13px; margin: -8px 0 0; }

.login-form label.fl { color: var(--muted); display: flex; flex-direction: column; font-size: 12px; font-weight: 700; gap: 6px; }

.login-form .input { font-size: 14px; padding: 10px 12px; }

.pw-wrap { position: relative; display: block; }

.pw-wrap .input { padding-right: 70px; }

.pw-toggle { background: transparent; border: 0; color: var(--ink-2); cursor: pointer; font-size: 12px; font-weight: 700; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }

.remember { align-items: center; color: var(--ink-2); cursor: pointer; display: inline-flex; font-size: 13px; gap: 8px; }

.link-btn { background: transparent; border: 0; color: var(--accent-text); cursor: pointer; font-size: 13px; font-weight: 700; padding: 0; align-self: flex-start; }

.btn.wide { justify-content: center; padding: 11px 14px; width: 100%; font-size: 14px; }

.divider { align-items: center; color: var(--muted); display: flex; font-size: 12px; gap: 10px; }

.divider::before, .divider::after { border-top: 1px solid var(--line); content: ""; flex: 1; }

.form-error { background: var(--hot-soft); border: 1px solid var(--hot-line); border-radius: 10px; color: var(--hot-text); font-size: 13px; padding: 9px 12px; }

.notice { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 10px; color: var(--ink); font-size: 13px; padding: 10px 12px; }

.notice.warn { background: var(--warm-soft); border-color: var(--warm-line); }

.demo-accounts { border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; padding-top: 16px; }

.demo-accounts h3 { font-size: 13px; margin: 0; }

.demo-group { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; margin: 8px 0 4px; text-transform: uppercase; }

.demo-row { align-items: center; background: transparent; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; display: flex; gap: 10px; margin-bottom: 6px; padding: 8px 10px; text-align: left; width: 100%; }

.demo-row:hover, .demo-row:focus-visible { border-color: var(--accent-line); outline: none; }

.demo-row .dr-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }

.demo-row .dr-text strong { font-size: 13px; }

.demo-row .dr-text small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.demo-row .dr-go { color: var(--accent-text); font-size: 12px; font-weight: 800; }

.demo-more { align-self: flex-start; }

.login-help { font-size: 12.5px; margin: 0; max-width: 440px; text-align: center; }

@media (max-width: 900px) {
  .login { grid-template-columns: minmax(0, 1fr); }
  .login-brand { border-right: 0; border-bottom: 1px solid var(--line); gap: 18px; padding: 20px 16px; }
  .lb-points, .lb-foot { display: none; }
  .login-top { position: static; align-self: flex-end; }
  .login-main { justify-content: flex-start; }
}

.login-main > .lb-logo { font-size: 14px; letter-spacing: 0.04em; }

.login-main > .lb-logo { font-size: 16px; font-weight: 700; letter-spacing: 0; }

.login-card { box-shadow: none; }

/* ---------- Acıbadem look: navy grid backdrop, white card ---------- */
.lb-brand { align-items: center; display: flex; flex-direction: column; gap: 4px; }

.lb-brand small { color: var(--muted); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; }

:root[data-look="acibadem"] body { background: #072562; }

:root[data-look="acibadem"] .login {
  background-color: #072562;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}

:root[data-look="acibadem"] .lb-home { color: #c5d3ec; }

:root[data-look="acibadem"] .lb-home:hover { color: #ffffff; }

:root[data-look="acibadem"] .login-top [data-theme-toggle] { --tt-bg: rgba(255, 255, 255, 0.06); --tt-line: rgba(255, 255, 255, 0.22); --tt-ink: #dbe6f7; --tt-active: rgba(177, 230, 53, 0.22); }

:root[data-look="acibadem"] .login-main > .lb-brand .lb-logo { color: #ffffff; font-family: "Plus Jakarta Sans", Inter, sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }

:root[data-look="acibadem"] .lb-brand small { color: #9fb4da; }

:root[data-look="acibadem"] .login-card { border: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(1, 10, 29, 0.45); }

:root[data-look="acibadem"] .login-form h2 { font-family: "Plus Jakarta Sans", Inter, sans-serif; font-size: 22px; font-weight: 700; }

:root[data-look="acibadem"] .login-form .input { border-radius: 10px; }

:root[data-look="acibadem"] #login-submit { border-radius: 999px; font-size: 15px; padding: 12px 16px; }

:root[data-look="acibadem"] .demo-row { border-radius: 10px; }

:root[data-look="acibadem"] .demo-row:hover { border-color: #25aae1; }

:root[data-look="acibadem"] .demo-row .dr-go { color: #0a66c2; }

:root[data-look="acibadem"] .login-help { color: #9fb4da; }

@media (prefers-color-scheme: dark) {
  :root[data-look="acibadem"]:not([data-theme="light"]) .login, :root[data-look="acibadem"]:not([data-theme="light"]) body { background-color: #010a1d; }
  :root[data-look="acibadem"]:not([data-theme="light"]) .demo-row .dr-go { color: #7dd0f3; }
}

:root[data-look="acibadem"][data-theme="dark"] .login, :root[data-look="acibadem"][data-theme="dark"] body { background-color: #010a1d; }

:root[data-look="acibadem"][data-theme="dark"] .demo-row .dr-go { color: #7dd0f3; }

:root[data-look="acibadem"] .login-top [data-theme-toggle] button[aria-pressed="true"] { color: #d6ff7a; }

@media (prefers-color-scheme: dark) {
  :root[data-look="acibadem"]:not([data-theme="light"]) .login-card { border: 1px solid var(--line-strong); }
}

:root[data-look="acibadem"][data-theme="dark"] .login-card { border: 1px solid var(--line-strong); }

.demo-row.picked { background: var(--accent-soft); border-color: var(--accent); }

/* ---------- prototype accounts: trigger + menu ---------- */
.proto { position: relative; }

.proto-trigger { align-items: center; background: var(--surface-3); border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--ink); cursor: pointer; display: flex; font: inherit; gap: 10px; padding: 11px 14px; text-align: left; transition: border-color 0.15s ease, background 0.15s ease; width: 100%; }

.proto-trigger:hover, .proto-trigger:focus-visible, .proto-trigger[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent-line); border-style: solid; outline: none; }

.proto-label { font-size: 13.5px; font-weight: 700; }

.proto-picked { color: var(--muted); flex: 1; font-size: 13px; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }

.proto-trigger.has-pick .proto-picked { color: var(--accent-text); font-weight: 600; }

.proto-chev { color: var(--muted); flex: none; transition: transform 0.15s ease; }

.proto-trigger[aria-expanded="true"] .proto-chev { transform: rotate(180deg); }

.proto-menu { background: var(--card-bg); border: 1px solid var(--line); border-radius: 14px; bottom: calc(100% + 8px); box-shadow: 0 2px 6px rgba(7, 37, 98, 0.06), 0 18px 44px rgba(7, 37, 98, 0.18); left: 0; max-height: min(420px, 60vh); overflow-y: auto; padding: 6px; position: absolute; right: 0; z-index: 20; }

.proto-menu[hidden] { display: none; }

.proto-hint { color: var(--muted); font-size: 12px; margin: 6px 10px 4px; }

.proto-group { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; padding: 10px 10px 4px; text-transform: uppercase; }

.proto-row { align-items: center; background: transparent; border: 0; border-radius: 10px; color: var(--ink); cursor: pointer; display: flex; font: inherit; gap: 10px; padding: 7px 10px; text-align: left; width: 100%; }

.proto-row:hover, .proto-row:focus-visible { background: var(--hover); outline: none; }

.proto-row[aria-selected="true"] { background: var(--accent-soft); }

.proto-row .avatar { flex: none; font-size: 11px; height: 30px; width: 30px; }

.pr-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }

.pr-text strong { font-size: 13.5px; font-weight: 600; }

.pr-text small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.proto-row[aria-selected="true"]::after { color: var(--accent-text); content: "✓"; font-size: 13px; font-weight: 700; }

/* ---------- prototype user picker (after the gate sign-in), /aida-style panels on the page ---------- */
.persona-view { display: flex; flex-direction: column; gap: 18px; }

.persona-view[hidden] { display: none; }

body.picking .login-main { justify-content: flex-start; padding-top: 64px; }

body.picking .login-card, :root[data-look] body.picking .login-card { background: transparent !important; border: 0 !important; box-shadow: none !important; max-width: 1000px; padding: 0; }

body.picking .lb-brand { transform: scale(0.85); }

.pv-head { text-align: center; }

.pv-head h2 { color: #ffffff; font-family: var(--font-head, "Plus Jakarta Sans", Inter, sans-serif); font-size: 26px; letter-spacing: -0.015em; margin: 0 0 6px; }

.pv-head p { color: #b9c8e4; font-size: 14.5px; margin: 0; }

.pv-list { align-items: start; display: grid; gap: 16px; grid-template-columns: 330px minmax(0, 1fr); grid-template-rows: min-content 1fr; }

.pv-col.role-coordinator { grid-column: 2; grid-row: 1 / span 2; }

.role-coordinator .pv-people { display: grid; gap: 2px 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: min(520px, 62vh); }

.role-coordinator .pv-team { grid-column: 1 / -1; }

.pv-col { background: var(--card-bg); border-radius: 16px; box-shadow: 0 1px 2px rgba(7, 37, 98, 0.06), 0 18px 44px rgba(1, 10, 29, 0.35); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

.pv-col-head { align-items: flex-start; border-bottom: 1px solid var(--line); display: flex; gap: 12px; padding: 16px; }

.pv-col-head > div { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }

.pv-col-head strong { font-family: var(--font-head, inherit); font-size: 15px; }

.pv-col-head small { color: var(--muted); font-size: 12px; line-height: 1.4; }

.pv-count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 700; margin-top: 2px; }

.pv-ico { align-items: center; border-radius: 12px; display: inline-flex; flex: none; height: 40px; justify-content: center; width: 40px; }

.role-admin .pv-ico, .role-admin .avatar { background: rgba(242, 107, 80, 0.13); color: #c8472d; }

.role-manager .pv-ico, .role-manager .avatar { background: rgba(37, 170, 225, 0.15); color: #0f7fae; }

.role-coordinator .pv-ico, .role-coordinator .avatar { background: rgba(10, 102, 194, 0.12); color: #0a66c2; }

.pv-people { display: flex; flex-direction: column; gap: 2px; max-height: min(460px, 56vh); overflow-y: auto; padding: 8px; }

.pv-team { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; padding: 10px 10px 4px; text-transform: uppercase; }

.pv-team:first-child { padding-top: 4px; }

.pv-person { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 12px; color: var(--ink); cursor: pointer; display: flex; font: inherit; gap: 12px; padding: 9px 10px; text-align: left; transition: background 0.15s ease, border-color 0.15s ease; width: 100%; }

.pv-person:hover, .pv-person:focus-visible { background: var(--accent-soft); border-color: var(--accent-line); outline: none; }

.pv-person.busy { opacity: 0.55; pointer-events: none; }

.pv-person .avatar { flex: none; font-size: 12px; font-weight: 700; height: 36px; width: 36px; }

.pv-person .pr-text { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }

.pv-person .pr-text strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pv-person .pr-text small { color: var(--muted); font-size: 12px; }

.pv-go { color: var(--muted); font-size: 15px; opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease; }

.pv-person:hover .pv-go, .pv-person:focus-visible .pv-go { color: var(--accent-text); opacity: 1; transform: translateX(2px); }

#pv-back { align-self: center; color: #c5d3ec; }

#pv-back:hover { color: #ffffff; }

@media (max-width: 900px) {
  .pv-list { grid-template-columns: minmax(0, 1fr); }
  .pv-col.role-coordinator { grid-column: auto; grid-row: auto; }
  .role-coordinator .pv-people { grid-template-columns: minmax(0, 1fr); }
  .pv-people { max-height: none; }
}