:root { --access-ink: #102448; --access-muted: #5e6e86; --access-line: #dce6f3; --access-teal: #087e69; }
[hidden] { display: none !important; }
.access-page { box-sizing: border-box; max-width: 1080px; margin: auto; padding: 48px 24px; }
body:has(.access-page) { margin: 0; color: var(--access-ink); background: #f5f8fc; font-family: "Avenir Next", "Trebuchet MS", sans-serif; }
.wordmark { display: inline-block; color: var(--access-ink); font-size: 24px; font-weight: 800; text-decoration: none; margin-bottom: 28px; }
.access-card, .access-panel { background: white; border: 1px solid var(--access-line); border-radius: 20px; padding: 28px; }
.access-panel { margin-top: 40px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; scroll-margin-top: 20px; }
.access-panel p, .access-card p { line-height: 1.6; color: var(--access-muted); }
.access-panel h2 { margin: 10px 0; font-size: 25px; }
.access-card h1 { margin-top: 12px; font-size: 32px; line-height: 1.15; }
.access-card + .access-card { margin-top: 22px; }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 800; color: var(--access-teal); }
.access-muted { font-size: 13px; color: var(--access-muted); }
.access-panel label, .access-card label { display: block; font-size: 14px; font-weight: 700; margin: 16px 0 8px; }
.access-panel input, .access-card input, .access-card textarea { width: 100%; box-sizing: border-box; padding: 13px; border: 1px solid #b5c7da; border-radius: 9px; font: inherit; background: #fff; color: var(--access-ink); }
.access-panel input:focus, .access-card input:focus, .access-card textarea:focus, .button:focus-visible { outline: 3px solid #82c5b8; outline-offset: 3px; }
.button { display: inline-block; border: 0; border-radius: 10px; padding: 13px 18px; margin-top: 16px; background: var(--access-teal); color: white; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.button:hover { filter: brightness(.93); }
.button:disabled { cursor: wait; opacity: .6; }
.button.secondary { color: var(--access-ink); background: #eaf0f7; }
.notice { margin: 20px 0; padding: 16px; border: 1px solid #f1dfad; background: #fff8e7; border-radius: 10px; color: #6e5516; line-height: 1.6; }
.customer { border-top: 1px solid var(--access-line); padding: 22px 0; }
.customer h3 { margin: 0 0 8px; overflow-wrap: anywhere; }
.customer .status { display: inline-block; padding: 5px 9px; background: #eaf0f7; border-radius: 6px; font-size: 12px; }
.customer .status.active { color: #076453; background: #ddf4ec; }
.customer label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.customer label.check input { width: auto; flex-shrink: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.access-card textarea { min-height: 90px; font-family: monospace; overflow-wrap: anywhere; }
[role="status"] { min-height: 24px; font-size: 14px; }
@media (max-width: 760px) { .access-panel { grid-template-columns: 1fr; padding: 22px; } .access-page { padding: 28px 16px; } .access-card { padding: 22px; } }