:root {
  color-scheme: light;
  --blue: #2f6fed;
  --blue-dark: #2058c8;
  --blue-pale: #edf3ff;
  --ink: #172033;
  /* --muted and --faint are darkened from #697487 / #929baa so the smallest
     text still clears the WCAG AA 4.5:1 minimum on white. */
  --muted: #59637a;
  --faint: #5f6b7d;
  --line: #e1e5ec;
  --canvas: #eef1f5;
  --surface: #ffffff;
  --success: #24744c;
  --success-bg: #eaf7ef;
  --danger: #a12c3a;

  /* Type scale. Nothing in the interface goes below --text-2xs, and that size
     is reserved for uppercase micro-labels. */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14.5px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 21px;
  --text-2xl: 26px;

  /* Minimum comfortable hit targets. */
  --target: 40px;

  /* Inter was previously requested but never loaded, so Windows silently fell
     back to Segoe UI while the stylesheet asked for weights like 760. The stack
     below is what actually renders, and only standard weights are used. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-size: var(--text-md);
  line-height: 1.45;
  overflow: hidden;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(47, 111, 237, .28);
  outline-offset: 2px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app { height: 100dvh; min-height: 0; display: flex; flex-direction: column; }
.header {
  min-height: 68px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 5;
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dbe6fb;
  border-radius: 12px;
  background: var(--blue-pale);
  box-shadow: 0 6px 14px rgba(47, 111, 237, .16);
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand strong { display: block; font-size: var(--text-md); font-weight: 700; letter-spacing: -.015em; }
.brand small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
/* Plain identity text. The former pill carried a green "live" dot that implied a
   status the app never actually reported. */
.session-identity {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: var(--text-sm);
}
.label-short { display: none; }

.workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: 410px minmax(0, 1fr); }
.library {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.library-head { padding: 20px 18px 16px; border-bottom: 1px solid var(--line); }
.library-head h1 { margin: 0; font-size: var(--text-xl); font-weight: 700; letter-spacing: -.025em; }
.library-head p { margin: 6px 0 14px; color: var(--muted); font-size: var(--text-sm); }
.library-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: center; }
.sort-field { position: relative; display: block; min-width: 0; }
.sort-field select {
  width: 100%;
  height: 46px;
  border: 1px solid #d5dae3;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  padding: 0 34px 0 13px;
  font-size: var(--text-sm);
  font-weight: 600;
  appearance: none;
  cursor: pointer;
}
.sort-field select:focus { border-color: #9bb8f5; }
.sort-field svg {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--muted);
  stroke-width: 2.2;
  pointer-events: none;
}
.search { position: relative; display: block; }
.search svg {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--faint);
  stroke-width: 2;
  pointer-events: none;
}
.search input {
  width: 100%;
  height: 46px;
  border: 1px solid #d5dae3;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  padding: 0 14px 0 42px;
  font-size: var(--text-md);
}
.search input::placeholder { color: #6b7688; }
.search input:focus { border-color: #9bb8f5; }

.report-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-color: #c9d0dc transparent; }
.location-folder {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid #edf0f4;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease;
}
.location-folder:hover { background: #f8faff; }
.folder-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #e8f0ff;
  color: var(--blue);
}
.folder-icon svg { width: 23px; height: 23px; fill: currentColor; }
.folder-copy { min-width: 0; }
.folder-copy strong, .folder-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-copy strong { font-size: var(--text-md); font-weight: 600; }
.folder-copy span { margin-top: 4px; color: var(--faint); font-size: var(--text-sm); }
/* Bare count. Reads as "500 Shaw (2)" rather than the clumsier "2 PDFs". */
.folder-count {
  min-width: 30px;
  border-radius: 999px;
  background: #eef3fd;
  color: var(--blue-dark);
  padding: 5px 9px;
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}
.folder-arrow { color: var(--blue); font-size: 22px; line-height: 1; text-align: right; }

.location-scope {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 16px 14px;
  border-bottom: 1px solid var(--line);
  background: #f7f9fc;
}
.location-back {
  min-height: var(--target);
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--blue);
  padding: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.location-back:hover { color: var(--blue-dark); }
.location-scope h2 {
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -.015em;
}
.location-scope p { margin: 5px 0 0; color: var(--muted); font-size: var(--text-sm); }
.location-empty { min-height: 210px; display: grid; place-content: center; justify-items: center; padding: 30px; text-align: center; }
.location-empty strong { font-size: var(--text-md); font-weight: 600; }
.location-empty p { max-width: 270px; margin: 7px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }

.report-item {
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: start;
  gap: 13px;
  padding: 15px 16px 15px 18px;
  border: 0;
  border-bottom: 1px solid #edf0f4;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease, box-shadow .14s ease;
}
.report-item:hover { background: #f8faff; }
.report-item.selected { background: var(--blue-pale); box-shadow: inset 3px 0 var(--blue); }
.pdf-icon {
  width: 38px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid #f0dadd;
  border-radius: 7px;
  background: #fff0f2;
  color: #a82f3e;
  font-size: var(--text-2xs);
  font-weight: 700;
}
.report-copy { min-width: 0; }
.report-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.report-meta { display: block; margin-top: 5px; color: var(--faint); font-size: var(--text-sm); }
.report-size { color: var(--muted); font-size: var(--text-xs); white-space: nowrap; padding-top: 2px; }

.state { min-height: 250px; height: 100%; display: grid; place-content: center; justify-items: center; padding: 32px; text-align: center; color: var(--muted); }
.state svg { width: 38px; height: 38px; margin-bottom: 12px; fill: none; stroke: #7d8798; stroke-width: 1.5; }
.state strong { color: var(--ink); font-size: var(--text-md); font-weight: 600; }
.state p { max-width: 280px; margin: 7px 0 0; font-size: var(--text-sm); line-height: 1.55; }
.state button {
  min-height: var(--target);
  margin-top: 14px;
  border: 1px solid #cfd6e1;
  border-radius: 9px;
  background: #fff;
  color: var(--blue);
  padding: 0 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.spinner {
  width: 22px;
  height: 22px;
  border: 2px solid #dce4f4;
  border-top-color: var(--blue);
  border-radius: 50%;
  margin-bottom: 12px;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
  .location-folder, .report-item, .viewer { transition: none; }
}

.pager {
  min-height: 56px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-sm);
}
.pager button {
  min-height: 38px;
  border: 1px solid #d5dae3;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.pager button:disabled { opacity: .45; cursor: default; }

.viewer { min-width: 0; min-height: 0; position: relative; background: #e9edf3; }
.viewer-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; padding: 32px; text-align: center; color: var(--muted); }
.viewer-empty svg { width: 46px; height: 46px; margin-bottom: 14px; fill: none; stroke: #7d8798; stroke-width: 1.4; }
.viewer-empty strong { color: var(--ink); font-size: var(--text-md); font-weight: 600; }
.viewer-empty p { margin: 7px 0 0; font-size: var(--text-sm); }
.viewer-content { height: 100%; display: flex; flex-direction: column; }
.viewer-toolbar {
  min-height: 64px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
/* Real focusable control. This replaces a ::before pseudo-element that was
   dismissed by a clientX < 55 hit test and had no accessible name. */
.viewer-back { display: none; }
.viewer-title { flex: 1; min-width: 0; }
.viewer-title strong, .viewer-title span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-title strong { font-size: var(--text-md); font-weight: 600; }
.viewer-title span { margin-top: 4px; color: var(--muted); font-size: var(--text-sm); }
.download {
  flex: 0 0 auto;
  min-height: var(--target);
  display: inline-flex;
  align-items: center;
  border-radius: 9px;
  background: var(--blue);
  color: #fff;
  padding: 0 15px;
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
}
.download:hover { background: var(--blue-dark); }
#pdfFrame { flex: 1; width: 100%; min-height: 0; border: 0; background: #dfe4eb; }

/* Mobile browsers refuse to render PDFs inside an iframe and show a dead grey
   placeholder instead, so on small screens the frame is replaced with real
   actions. */
.viewer-fallback { display: none; }
.viewer-fallback svg { width: 44px; height: 44px; margin-bottom: 14px; fill: none; stroke: #7d8798; stroke-width: 1.4; }
.viewer-fallback strong {
  max-width: 100%;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.viewer-fallback p { max-width: 300px; margin: 8px 0 18px; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.fallback-open {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  padding: 0 20px;
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: 600;
}
.fallback-open:hover { background: var(--blue-dark); }

@media (max-width: 980px) {
  .workspace { grid-template-columns: 370px minmax(0, 1fr); }
}

/* Browser zoom and enlarged text both shrink the usable viewport height. When
   that happens the fixed shell is released so content reflows and scrolls
   instead of being clipped. */
@media (max-height: 620px) {
  body { overflow: auto; }
  .app { height: auto; min-height: 100dvh; }
  .report-list { overflow-y: visible; }
  .viewer { min-height: 460px; }
}

@media (max-width: 700px) {
  body { overflow: auto; }
  .app { min-height: 100dvh; height: auto; }
  /* Keep the header on one tidy row: drop the identity text and the brand
     subtitle, shorten the action label, and stop the buttons wrapping. */
  .header { gap: 10px; padding: 9px 12px; }
  .session-identity { display: none; }
  .brand { gap: 9px; }
  .brand small { display: none; }
  .brand-mark { width: 36px; height: 36px; flex-basis: 36px; border-radius: 10px; }
  .label-full { display: none; }
  .label-short { display: inline; }
  .manage-button, .logout-button { white-space: nowrap; }
  .library-controls { grid-template-columns: minmax(0, 1fr); }
  .sort-field select { height: 44px; }
  .workspace { display: block; }
  .library { min-height: calc(100dvh - 68px); border-right: 0; }
  .location-folder, .report-item { min-height: 72px; }
  .location-back { min-height: 44px; }
  .pager button { min-height: 44px; }
  .viewer {
    position: fixed;
    inset: 0;
    z-index: 20;
    transform: translateX(105%);
    transition: transform .2s ease;
  }
  .viewer.mobile-open { transform: translateX(0); }
  .viewer-back {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }
  .viewer-back:hover { border-color: #b8c0cd; }
  #pdfFrame { display: none; }
  .viewer-fallback {
    flex: 1;
    display: grid;
    place-content: center;
    justify-items: center;
    padding: 30px 24px;
    text-align: center;
  }
}

[hidden] { display: none !important; }
.header-actions { display: flex; align-items: center; gap: 9px; }
.logout-button {
  min-height: var(--target);
  border: 1px solid #d5dae3;
  border-radius: 9px;
  background: #fff;
  color: var(--muted);
  padding: 0 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.logout-button:hover { color: var(--ink); border-color: #b8c0cd; }
.manage-button {
  min-height: var(--target);
  border: 1px solid #bed0f7;
  border-radius: 9px;
  background: var(--blue-pale);
  color: var(--blue-dark);
  padding: 0 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.manage-button:hover { border-color: #8eaff2; background: #e2ecff; }

.login-view {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 15%, rgba(47, 111, 237, .10), transparent 34%),
    radial-gradient(circle at 82% 86%, rgba(47, 111, 237, .07), transparent 30%),
    #f3f5f8;
  overflow: auto;
}
.login-card {
  width: min(100%, 410px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(30, 43, 70, .13);
  padding: 34px;
}
.login-mark {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dbe6fb;
  border-radius: 16px;
  background: var(--blue-pale);
  box-shadow: 0 10px 22px rgba(47, 111, 237, .18);
}
.login-mark img { width: 100%; height: 100%; object-fit: contain; }
.privacy-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid #dbe6fb;
  border-radius: 14px;
  background: var(--blue-pale);
}
.privacy-mark img { width: 100%; height: 100%; object-fit: contain; }
.login-kicker, .login-eyebrow {
  margin: 24px 0 7px;
  color: var(--blue);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.login-card h1 { margin: 0; color: var(--ink); font-size: var(--text-2xl); font-weight: 700; letter-spacing: -.03em; }
.login-copy { margin: 10px 0 22px; color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }
.login-form { display: grid; gap: 9px; }
.login-form label { color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.login-form input {
  width: 100%;
  height: 48px;
  border: 1px solid #d2d8e2;
  border-radius: 10px;
  padding: 0 14px;
  color: var(--ink);
  background: #fff;
  font-size: var(--text-md);
}
.login-form input:focus { border-color: #9bb8f5; }
.login-form button {
  min-height: 48px;
  margin-top: 6px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--blue);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
}
.login-form button:hover { background: var(--blue-dark); }
.login-form button:disabled { opacity: .62; cursor: wait; }
.login-error { margin: 0; border-radius: 9px; background: #fff0f1; color: var(--danger); padding: 10px 11px; font-size: var(--text-sm); line-height: 1.5; }
.login-security {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: var(--text-xs);
  line-height: 1.6;
}
.login-security a, .privacy-card a { color: var(--blue); }

.privacy-page { overflow: auto; }
.privacy-page .login-view { min-height: 100%; height: auto; place-items: start center; padding-block: 40px; }
.privacy-card { width: min(100%, 760px); }
.privacy-card header { margin-bottom: 24px; }
.privacy-card h1 { margin: 7px 0 4px; font-size: var(--text-2xl); line-height: 1.2; }
.privacy-card h2 { margin: 26px 0 8px; font-size: var(--text-lg); }
.privacy-card p, .privacy-card li { color: var(--muted); font-size: var(--text-base); line-height: 1.7; }
.privacy-card p { margin: 9px 0; }
.privacy-card ul { margin: 9px 0; padding-left: 22px; }
.privacy-card .policy-meta { color: var(--faint); font-size: var(--text-xs); }
.privacy-card .back-link { display: inline-block; min-height: var(--target); margin-bottom: 12px; font-size: var(--text-sm); font-weight: 600; text-decoration: none; }

.code-copy strong { color: var(--ink); overflow-wrap: anywhere; }
.code-input { text-align: center; letter-spacing: .3em; font-size: var(--text-xl); font-weight: 700; }
.code-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; }
.text-button {
  min-height: var(--target);
  border: 0;
  background: transparent;
  color: var(--blue);
  padding: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.text-button:disabled { color: var(--faint); cursor: wait; }
.login-message, .dialog-message {
  margin: 14px 0 0;
  border-radius: 9px;
  background: #fff0f1;
  color: var(--danger);
  padding: 11px 12px;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.login-message[data-type="success"], .dialog-message[data-type="success"] {
  background: var(--success-bg);
  color: var(--success);
}
.recovery-login { margin-top: 16px; color: var(--faint); font-size: var(--text-sm); }
.recovery-login summary { min-height: 32px; display: flex; align-items: center; cursor: pointer; user-select: none; }
.recovery-form { margin-top: 12px; }

.access-dialog {
  width: min(92vw, 620px);
  max-height: min(86vh, 760px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  padding: 0;
  box-shadow: 0 28px 80px rgba(23, 32, 51, .24);
}
.access-dialog::backdrop { background: rgba(19, 27, 43, .48); backdrop-filter: blur(2px); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 25px 10px; }
.dialog-kicker {
  margin: 0 0 5px;
  color: var(--blue);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dialog-head h2 { margin: 0; font-size: var(--text-xl); font-weight: 700; letter-spacing: -.025em; }
.dialog-close {
  width: var(--target);
  height: var(--target);
  flex: 0 0 var(--target);
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.dialog-close:hover { color: var(--ink); border-color: #b8c0cd; }
.dialog-copy { margin: 0; padding: 0 25px 18px; color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }
.viewer-form { padding: 0 25px 19px; }
.viewer-form label { display: block; margin-bottom: 8px; font-size: var(--text-sm); font-weight: 600; }
.viewer-form > div { display: flex; gap: 9px; }
.viewer-form input {
  flex: 1;
  min-width: 0;
  height: 46px;
  border: 1px solid #d2d8e2;
  border-radius: 9px;
  padding: 0 13px;
  color: var(--ink);
  font-size: var(--text-md);
}
.viewer-form input:focus { border-color: #9bb8f5; }
.viewer-form button {
  min-height: 46px;
  border: 0;
  border-radius: 9px;
  background: var(--blue);
  color: #fff;
  padding: 0 16px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.viewer-form button:hover { background: var(--blue-dark); }
.viewer-form button:disabled { opacity: .62; cursor: wait; }
.dialog-message { margin: 0 25px 16px; }
.access-list { max-height: 390px; overflow-y: auto; border-top: 1px solid var(--line); }
.access-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 25px; border-bottom: 1px solid #edf0f4; }
.access-row:last-child { border-bottom: 0; }
.access-row.inactive { opacity: .62; }
.access-row > div { min-width: 0; }
.access-row strong, .access-row span { display: block; }
.access-row strong { overflow: hidden; text-overflow: ellipsis; font-size: var(--text-base); font-weight: 600; }
.access-row div span { margin-top: 4px; color: var(--muted); font-size: var(--text-sm); }
.role-badge {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--blue-pale);
  color: var(--blue-dark);
  padding: 6px 10px;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.revoke-button {
  flex: 0 0 auto;
  min-height: 38px;
  border: 1px solid #f0c8ce;
  border-radius: 8px;
  background: #fff6f7;
  color: var(--danger);
  padding: 0 13px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.revoke-button:hover { border-color: #e2a9b2; }
.revoke-button:disabled { opacity: .55; cursor: wait; }
.access-loading { min-height: 120px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: var(--text-sm); }
.access-loading .spinner { margin: 0; }

@media (max-width: 700px) {
  .login-view { padding: 16px; }
  .login-card { padding: 27px 22px; }
  .header-actions { gap: 7px; }
  .logout-button, .manage-button { min-height: 44px; padding: 0 12px; }
  .access-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .dialog-head { padding: 20px 18px 8px; }
  .dialog-copy, .viewer-form { padding-left: 18px; padding-right: 18px; }
  .dialog-message { margin-left: 18px; margin-right: 18px; }
  .access-row { padding-left: 18px; padding-right: 18px; }
  .viewer-form > div { display: grid; }
  .viewer-form button { width: 100%; }
}