:root { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f4f4f5; background: #090909; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #050505; color: white; border-bottom: 1px solid #2c2921; padding: 1rem max(1rem, calc((100vw - 1120px) / 2)); }
header a { color: white; text-decoration: none; }
header a:hover { color: #c7b47e; }
nav { display: flex; gap: 1.5rem; font-size: .9rem; }
.brand { display: inline-flex; align-items: center; }
.brand img { display: block; width: 146px; height: 25px; }
main { width: min(1120px, calc(100% - 2rem)); margin: 2rem auto; flex: 1; }
footer { text-align: center; color: #8d8166; padding: 2rem; }
.card { background: #151515; border: 1px solid #303030; border-radius: 10px; padding: 1.5rem; margin: 1rem 0; }
.narrow { max-width: 440px; margin: 4rem auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.grid .card { margin: 0; }
h1 { font-size: 2rem; margin: .2rem 0 1.2rem; }
h2 { font-size: 1.2rem; margin: .2rem 0 1rem; }
h3 { font-size: 1rem; }
p { line-height: 1.5; }
.page-heading, .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.page-heading p { color: #aaa; margin: 0 0 .5rem; }
.page-heading .eyebrow { color: #bba878; text-transform: uppercase; font-size: .75rem; letter-spacing: .14em; font-weight: 700; }
.page-heading h1 { margin-bottom: .35rem; }
.account-heading { margin-top: 2.75rem; }
.count { border: 1px solid #454031; border-radius: 50px; padding: .4rem .75rem; white-space: nowrap; color: #d6c49a; font-size: .85rem; }
.subtle { color: #aaa; }
.status { color: #d6c49a; font-weight: 700; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; text-align: left; }
th, td { padding: .95rem .8rem; border-bottom: 1px solid #303030; }
th { color: #aaa; font-size: .8rem; font-weight: 600; }
td { font-size: .9rem; }
tbody tr:last-child td { border-bottom: 0; }
.record-title { font-weight: 600; }
.empty { text-align: center; color: #aaa; padding: 2rem 1rem; }
.profile-fields { margin: 0 0 1.5rem; }
.profile-fields div { margin: 1rem 0; }
.profile-fields dt { color: #aaa; font-size: .8rem; margin-bottom: .25rem; }
.profile-fields dd { margin: 0; overflow-wrap: anywhere; }
.key-form { display: flex; align-items: end; gap: .75rem; flex-wrap: wrap; }
.key-form label { flex: 1 1 250px; }
.key-form button { margin-bottom: 1rem; }
.key-list { padding: 0; list-style: none; }
.key-list li { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid #303030; padding: .7rem 0; }
label { display: block; font-weight: 600; margin: 1rem 0; }
input { display: block; width: 100%; margin-top: .35rem; padding: .7rem; border: 1px solid #555; border-radius: 7px; background: #0b0b0b; color: #fff; font: inherit; }
button, .button { display: inline-block; border: 0; border-radius: 7px; background: #8d8166; color: #fff; font: inherit; font-weight: 700; padding: .7rem 1rem; cursor: pointer; text-decoration: none; }
.secondary { background: #313131; color: #fff; }
button:hover, .button:hover { filter: brightness(.93); }
a { color: #d6c49a; }
li { margin: .55rem 0; }
.error { color: #ff9292; }
.success { color: #9dd6a9; }
body.video-page { background: #050505; color: #f5f5f5; }
.video-page header { border-bottom: 1px solid #8d8166; }
.video-page main { width: min(1100px, calc(100% - 2rem)); margin-top: 2rem; }
.video-page footer { color: #8d8166; }
.video-view { max-width: 900px; margin: 0 auto; }
.video-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.video-heading h1 { font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 700; overflow-wrap: anywhere; margin: 0; }
.video-heading .button { flex: none; }
.video-description { color: #c9c9c9; margin-top: -.5rem; }
.video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #111; }
@media (max-width: 600px) { header { padding: 1rem; } .video-heading { align-items: flex-start; flex-direction: column; } .video-heading .button { align-self: flex-start; } }
.sop-document ol { padding-left: 1.5rem; }
.sop-document li { padding: .6rem 0 1.25rem; border-bottom: 1px solid #303030; }
.sop-document li:last-child { border-bottom: 0; }
.sop-media { display: block; max-width: 100%; max-height: 65vh; border-radius: 8px; background: #111; margin-top: 1rem; }
video.sop-media { width: min(100%, 760px); }
body.auth-page { background: #050505 url('/static/login-bg.png') center center / contain no-repeat; }
.auth-page header { border-bottom: 0; background: transparent; }
.auth-page main { display: flex; justify-content: center; align-items: center; margin-top: 0; margin-bottom: 0; }
.auth-page footer { color: #777; font-size: .8rem; }
.auth-panel { width: min(100%, 390px); padding: 2.25rem 1.5rem; background: #090909d9; border: 1px solid #2b2b2b; border-radius: 12px; box-shadow: 0 18px 60px #0008; }
.auth-panel h1 { font-size: 1.5rem; margin-bottom: .45rem; }
.auth-panel .eyebrow { color: #bba878; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.auth-panel .subtle { margin-bottom: 1.5rem; }
.google-button { display: flex; justify-content: center; align-items: center; gap: .6rem; width: 100%; padding: .75rem; border: 1px solid #363636; border-radius: 7px; background: #fff; color: #171717; font-weight: 600; text-decoration: none; }
.google-button:hover { background: #f1f1f1; }
.google-mark { display: block; width: 18px; height: 18px; flex: none; }
.auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1.4rem 0; color: #999; font-size: .8rem; white-space: nowrap; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: #363636; }
.auth-panel label { color: #ccc; font-size: .85rem; }
.auth-panel input { margin-top: .5rem; }
.auth-submit { width: 100%; margin-top: .4rem; }
.auth-switch { text-align: center; color: #aaa; font-size: .85rem; margin: 1.5rem 0 0; }
.danger-zone { border-color: #5e3030; }
.danger { background: #8f3434; }
.confirm { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.confirm input { width: auto; margin: 0; }
textarea { display: block; width: 100%; min-height: 5rem; margin-top: .35rem; padding: .7rem; border: 1px solid #555; border-radius: 7px; background: #0b0b0b; color: #fff; font: inherit; resize: vertical; }
select { display: block; width: 100%; margin-top: .35rem; padding: .7rem; border: 1px solid #555; border-radius: 7px; background: #0b0b0b; color: #fff; font: inherit; }
@media (max-width: 600px) { body.auth-page { background-size: cover; } .auth-panel { padding: 1.5rem; } }

.notice { border: 1px solid #824044; border-radius: 8px; background: #301719; color: #ffe5e5; padding: .85rem 1rem; margin: 1rem 0; }
.error-page { max-width: 620px; margin: 4rem auto; }
.error-page .eyebrow { color: #d6c49a; font-weight: 700; }
.tool-grid { margin-top: 1.5rem; }
.tool-tile { color: #f4f4f5; text-decoration: none; min-height: 180px; display: flex; flex-direction: column; }
.tool-tile p { color: #aaa; margin-top: 0; }
.tool-tile span { color: #d6c49a; font-weight: 700; margin-top: auto; }
.tool-tile:hover, .tool-tile:focus-visible { border-color: #8d8166; background: #1d1b17; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.5rem 0; }
.pagination a { min-width: 7rem; text-align: center; }

.account-menu { position: relative; margin-left: auto; }
.account-menu summary { list-style: none; cursor: pointer; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid #544b37; border-radius: 50%; background: #242018; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-dropdown { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 10; min-width: 155px; padding: .5rem; background: #1b1b1b; border: 1px solid #544b37; border-radius: 8px; box-shadow: 0 12px 28px #0008; }
.account-dropdown a, .account-dropdown button { display: block; width: 100%; text-align: left; padding: .65rem .75rem; color: #f4f4f5; background: transparent; border: 0; font: inherit; text-decoration: none; }
.account-dropdown a:hover, .account-dropdown button:hover { background: #333; }
.account-dropdown form { margin: 0; }
#integrations { scroll-margin-top: 1rem; }