.access-page{
  --access-bg:#070b16;
  --access-bg-soft:#0b1425;
  --access-surface:rgba(12,18,36,.82);
  --access-border:rgba(148,163,184,.18);
  --access-text:#edf2ff;
  --access-muted:#94a3bd;
  --access-accent:#8b83ff;
  --access-cyan:#56c9ff;
  min-height:100vh;
  min-height:100svh;
  margin:0;
  overflow:hidden;
  color:var(--access-text);
  background:
    radial-gradient(circle at 18% 18%,rgba(99,102,241,.16),transparent 32%),
    radial-gradient(circle at 82% 82%,rgba(14,165,233,.10),transparent 34%),
    linear-gradient(145deg,var(--access-bg) 0%,var(--access-bg-soft) 100%) !important;
}

.access-page[data-theme="light"]{
  --access-bg:#f7f9ff;
  --access-bg-soft:#eaf1ff;
  --access-surface:rgba(255,255,255,.80);
  --access-border:rgba(71,85,105,.17);
  --access-text:#172039;
  --access-muted:#64748b;
  --access-accent:#5850d8;
  --access-cyan:#0284c7;
  color-scheme:light;
}

.access-page::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.36;
  background-image:
    linear-gradient(var(--access-border) 1px,transparent 1px),
    linear-gradient(90deg,var(--access-border) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at center,black 0%,transparent 78%);
}

.access-page[data-theme="light"]::before{opacity:.22}

.access-canvas{
  position:fixed;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.access-layout{
  position:relative;
  z-index:1;
  min-height:100vh;
  min-height:100svh;
  padding:clamp(18px,4vw,40px);
  display:grid;
  place-items:center;
}

.access-card{
  width:min(100%,460px);
  padding:clamp(25px,5vw,38px);
  border:1px solid var(--access-border);
  border-radius:22px;
  background:var(--access-surface);
  box-shadow:0 28px 80px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.045);
  backdrop-filter:blur(24px) saturate(135%);
  -webkit-backdrop-filter:blur(24px) saturate(135%);
}

.access-page[data-theme="light"] .access-card{
  box-shadow:0 28px 80px rgba(69,84,124,.18),inset 0 1px rgba(255,255,255,.9);
}

.access-brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:28px;
  color:var(--access-text);
  text-decoration:none;
}

.access-brand:hover{color:var(--access-text)}
.access-brand .brand-dot{
  width:10px;
  height:10px;
  flex:0 0 auto;
  border-radius:50%;
  background:linear-gradient(135deg,var(--access-accent),var(--access-cyan));
  box-shadow:0 0 0 6px color-mix(in srgb,var(--access-accent) 12%,transparent),0 0 24px color-mix(in srgb,var(--access-cyan) 38%,transparent);
}

.access-brand-name{
  font-family:"Syne","IBM Plex Sans",sans-serif;
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.055em;
}

.access-status-icon{
  width:40px;
  height:40px;
  margin-bottom:20px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--access-accent) 38%,transparent);
  border-radius:11px;
  color:var(--access-accent);
  background:color-mix(in srgb,var(--access-accent) 10%,transparent);
}

.access-status-icon i{font-size:1rem}
.access-eyebrow{
  display:block;
  margin-bottom:10px;
  color:var(--access-accent);
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.68rem;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.access-copy h1{
  margin:0 0 12px;
  color:var(--access-text);
  font-family:"Syne","IBM Plex Sans",sans-serif;
  font-size:clamp(1.7rem,6vw,2.1rem);
  line-height:1.08;
  letter-spacing:-.045em;
}

.access-copy p{
  margin:0;
  max-width:390px;
  color:var(--access-muted);
  font-size:.95rem;
  line-height:1.6;
}

.access-actions{
  margin-top:24px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}

.access-actions .btn{min-height:44px;padding:.67rem 1.1rem;border-radius:10px}
.access-actions .btn-primary{
  border-color:transparent;
  background:linear-gradient(135deg,#6d65f5,#8e87ff);
  box-shadow:0 10px 26px rgba(99,102,241,.22);
}
.access-actions .btn-primary:hover,.access-actions .btn-primary:focus-visible{background:linear-gradient(135deg,#5b54df,#7b74ed)}

/* Kept for the separate logout confirmation template. */
.access-header{
  position:relative;
  z-index:2;
  min-height:72px;
  padding:14px clamp(18px,4vw,52px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--access-border);
  background:var(--access-surface);
  backdrop-filter:blur(18px);
}
.access-header + .access-layout{min-height:calc(100svh - 72px)}
.access-brand-copy{display:grid;gap:1px}
.access-brand-kicker,.access-header-state{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--access-muted)}
.access-header-state{padding:7px 11px;border:1px solid var(--access-border);border-radius:999px}

@media (max-width:560px){
  .access-layout{padding:16px}
  .access-card{padding:26px 22px;border-radius:18px}
  .access-brand{margin-bottom:23px}
  .access-actions,.access-actions .btn{width:100%}
  .access-header{min-height:64px;padding-inline:16px}
  .access-header-state{display:none}
  .access-header + .access-layout{min-height:calc(100svh - 64px)}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;transition:none !important}
}