.vib-gate {
  margin: 0; min-height: 100svh; padding: clamp(1.25rem, 4vw, 3rem);
  box-sizing: border-box; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: clamp(1.5rem, 3vw, 2.5rem);
  background: radial-gradient(ellipse at 10% 10%, #dce4d780, transparent 55%), #f4f1e8;
  color: #162017; font-family: Inter, system-ui, sans-serif; line-height: 1.65;
}
.vib-gate *, .vib-gate *::before, .vib-gate *::after { box-sizing: border-box; }
.vib-gate-brand { color: #1f4d2e; font-size: 1rem; font-weight: 650; text-decoration: none; text-align: center; }
.vib-access { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); width: min(100%, 64rem); border: 1px solid #1f4d2e1c; border-radius: 1.5rem; box-shadow: 0 24px 70px #16201712; }
.vib-access-welcome { position: relative; isolation: isolate; overflow: hidden; border-radius: 1.5rem 0 0 1.5rem; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(2rem, 4vw, 3.5rem); color: #f4f1e8; background: radial-gradient(ellipse at 20% 0%, #52724d70, transparent 65%), linear-gradient(155deg, #315f40, #204c30 55%, #173d27); }
.vib-access-welcome::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.14; background-image: repeating-linear-gradient(45deg, transparent 0 27px, #e4ecd33b 28px, transparent 29px 56px), repeating-linear-gradient(-45deg, transparent 0 27px, #e4ecd33b 28px, transparent 29px 56px); mask-image: linear-gradient(#000, transparent 90%); }
.vib-access-mark { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin-bottom: 2.5rem; border: 1px solid #f4f1e838; border-radius: 1.25rem; background: #f4f1e80a; box-shadow: inset 0 1px 0 #ffffff14; }
.vib-access-mark svg { width: 3rem; height: 3rem; }
.vib-access-eyebrow { margin: 0 0 0.875rem; font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.13em; text-transform: uppercase; }
.vib-access-welcome .vib-access-eyebrow { color: #c2d3b6; }
.vib-access-welcome h2 { margin: 0 0 1.25rem; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 650; line-height: 1.16; letter-spacing: -0.045em; }
.vib-access-welcome > p:not(.vib-access-eyebrow) { margin: 0; color: #d9e3d3; font-size: 0.9375rem; }
.vib-access-signature { margin-top: auto; padding-top: 3rem; font-size: 0.8125rem; color: #c2d3b6; }
.vib-card { min-width: 0; padding: clamp(1.5rem, 4vw, 3.5rem); border-radius: 0 1.5rem 1.5rem 0; background: #fff; }
.vib-card > .vib-access-eyebrow { color: #52704d; }
.vib-card h1 { margin: 0 0 1rem; font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 650; line-height: 1.15; letter-spacing: -0.045em; }
.vib-access-intro { margin: 0; color: #566255; font-size: 0.9375rem; }
.vib-auth { display: grid; gap: 1rem; max-width: 32rem; margin-block: 1.75rem; }
.vib-auth label { display: grid; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; }
.vib-auth input[type=password] { box-sizing: border-box; width: 100%; border: 1px solid #bcc7b9; border-radius: 0.75rem; padding: 0.875rem 1rem; min-height: 52px; font: inherit; font-size: 1rem; background: #fff; color: #162017; }
.vib-auth button { justify-self: start; cursor: pointer; border: 1px solid #244e31; border-radius: 999px; background: linear-gradient(180deg, #3d6b45, #244e31); box-shadow: inset 0 1px 0 #ffffff26, 0 3px 8px #1f4d2e14; color: #fff; padding: 0.875rem 1.5rem; min-height: 48px; font: 600 0.9375rem/1.4 Inter, system-ui, sans-serif; }
.vib-card .vib-auth:not(.vib-logout) button { width: 100%; }
.vib-auth button:hover { background: linear-gradient(180deg, #315b3a, #1f442a); }
.vib-auth :focus-visible, .vib-card a:focus-visible, .vib-gate-brand:focus-visible { outline: 3px solid #3f7d3a; outline-offset: 4px; }
.vib-auth .vib-hint { margin: 0; font-size: 0.75rem; line-height: 1.65; color: #626f60; }
.vib-auth [role=alert] { margin: 0; border-left: 3px solid #a62c20; border-radius: 0.375rem; padding: 0.75rem 1rem; background: #fff4f1; color: #84251c; font-size: 0.875rem; }
.vib-access-help { padding-top: 1.25rem; border-top: 1px solid #e1e6dd; color: #626f60; font-size: 0.8125rem; }
.vib-access-back { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; color: #1f4d2e; font-size: 0.875rem; font-weight: 600; text-decoration: none; text-underline-offset: 0.25em; }
.vib-access-back:hover { text-decoration: underline; }
.vib-gate-caption { margin: 0; text-align: center; color: #626f60; font-size: 0.75rem; }
@media (max-width: 45rem) {
  .vib-gate { justify-content: flex-start; }
  .vib-access { grid-template-columns: minmax(0, 1fr); }
  .vib-access-welcome { padding: 1.5rem; border-radius: 1.5rem 1.5rem 0 0; }
  .vib-access-mark, .vib-access-signature { display: none; }
  .vib-access-welcome h2 { font-size: 1.5rem; margin-bottom: 0.75rem; }
  .vib-access-welcome > p:not(.vib-access-eyebrow) { font-size: 0.875rem; }
  .vib-card { border-radius: 0 0 1.5rem 1.5rem; }
}
.vib-admin { max-width:1050px; }
.vib-panel { background:white; border:1px solid #d6ded9; border-radius:10px; margin-block:24px; padding:clamp(16px,3vw,28px); }
.vib-panel h2 { margin-top:0; }
.vib-panel label { display:block; margin-block:12px; }
.vib-panel label input[type=text], .vib-panel label input[type=password], .vib-panel label input[type=email], .vib-panel textarea { display:block; box-sizing:border-box; width:min(100%,650px); margin-top:6px; }
.vib-panel input[type=file] { display:block; margin-top:8px; max-width:100%; }
.vib-actions { display:flex; flex-wrap:wrap; gap:8px; margin-block:16px; }
.vib-panel details, .vib-panel fieldset { padding:16px; border:1px solid #c8d6cd; border-radius:6px; margin-block:20px; }
.vib-panel summary { cursor:pointer; font-weight:600; }
.vib-warning { padding:12px 16px; background:#fff5df; border-left:3px solid #ad720d; }
.vib-panel pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; padding:16px; background:#f1f5f2; }
.vib-panel table input[type=text] { width:100%; }
.vib-panel table { overflow-wrap:anywhere; table-layout:fixed; }
@media(max-width:600px) { .vib-admin .nav-tab { float:none; display:block; margin:0 0 4px; } .vib-panel th,.vib-panel td { padding:6px; } }