:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #132d35; background: #edf3f3; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.environment-marker { padding: .55rem 1rem; background: #9b3f32; color: white; text-align: center; font-weight: 750; letter-spacing: .04em; }
header { padding: 1.25rem clamp(1rem, 4vw, 3rem); border-bottom: 1px solid #c7d7d9; background: #fff; }
.brand { color: #132d35; font-weight: 750; text-decoration-thickness: .12em; text-underline-offset: .2em; }
main { display: grid; place-items: center; padding: clamp(2rem, 8vw, 6rem) 1rem; }
.shell { width: min(76rem, 100%); padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid #bfd0d2; border-radius: 1rem; background: white; box-shadow: 0 1rem 3rem rgb(19 45 53 / 9%); }
.eyebrow { margin: 0; color: #47656d; font-size: .8rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: .35rem 0 .75rem; font-size: clamp(2.3rem, 8vw, 4.5rem); line-height: .95; }
h2 { margin: .35rem 0 1rem; font-size: clamp(1.8rem, 5vw, 2.6rem); }
h3 { margin: 2rem 0 .75rem; }
.lede { font-size: 1.15rem; line-height: 1.6; }
.test-session-marker { margin: 1.5rem 0; padding: 1rem 1.25rem; border: 2px solid #b64d3d; border-radius: .65rem; background: #fff2ef; }
.test-session-marker h2 { margin: .25rem 0 .5rem; font-size: 1.4rem; }
.test-session-marker p { margin: .5rem 0; }
.test-session-marker a { color: #702f27; font-weight: 750; }
.identity { display: grid; gap: .65rem; margin: 2rem 0; }
.identity div { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: 1rem; padding-bottom: .65rem; border-bottom: 1px solid #dce6e7; }
dt { color: #47656d; font-weight: 650; }
dd { margin: 0; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
button { min-height: 2.75rem; padding: .7rem 1rem; border: 2px solid #145d67; border-radius: .45rem; background: #145d67; color: white; font: inherit; font-weight: 700; cursor: pointer; }
button.secondary { background: white; color: #145d67; }
button.danger { border-color: #863c32; background: white; color: #702f27; }
button:focus-visible, a:focus-visible { outline: 3px solid #d95e49; outline-offset: 3px; }
button:disabled { opacity: .65; cursor: wait; }
#operation-status { min-height: 1.5em; }
.sign-in-shell { width: min(38rem, 100%); }
#operator-code-request-form, #operator-code-verify-form, #reauthentication-code-form { display: grid; gap: .75rem; margin-top: 1.5rem; }
#operator-code-request-form label, #operator-code-verify-form label, #reauthentication-code-form label { color: #35555e; font-weight: 700; }
#operator-code-request-form input, #operator-code-verify-form input, #reauthentication-code-form input { width: 100%; min-height: 3rem; padding: .7rem; border: 1px solid #78979c; border-radius: .45rem; background: white; color: #132d35; font: inherit; font-size: 1.1rem; }
#operator-code-request-form input:focus-visible, #operator-code-verify-form input:focus-visible, #reauthentication-code-form input:focus-visible { outline: 3px solid #d95e49; outline-offset: 2px; }
#operator-code-verify-form[hidden] { display: none; }
#authentication-status, #reauthentication-status { min-height: 1.5em; }
dialog { width: min(34rem, calc(100% - 2rem)); padding: 1.5rem; border: 1px solid #bfd0d2; border-radius: 1rem; color: #132d35; }
dialog::backdrop { background: rgb(7 29 30 / 55%); }
.invitation-admin { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid #c7d7d9; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
caption { padding-bottom: .5rem; color: #47656d; text-align: left; }
th, td { padding: .75rem; border-bottom: 1px solid #dce6e7; vertical-align: top; }
th { color: #35555e; font-size: .88rem; }
.row-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.row-actions button { min-height: 2.5rem; padding: .55rem .75rem; }
.feature-configuration, .privacy-release-gate, .beta-rollout, .operational-reports, .operational-limits, .support-tickets { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid #dce6e7; }
.feature-configuration h2, .privacy-release-gate h2, .beta-rollout h2, .operational-reports h2, .operational-limits h2, .support-tickets h2 { margin: .35rem 0; font-size: 1.8rem; }
.feature-configuration h3, .operational-reports h3, .operational-limits h3 { margin: 1.5rem 0 .5rem; }
.feature-configuration h4 { margin: 0; }
.kill-switch { padding: .75rem; border: 1px solid #bfd0d2; border-radius: .45rem; font-weight: 700; }
.kill-switch.active { border-color: #9b3f32; background: #fff2ef; color: #7d3026; }
.configuration-list, .cohort-list ul { display: grid; gap: .75rem; padding: 0; list-style: none; }
.configuration-list li, .cohort-list section { padding: 1rem; border: 1px solid #dce6e7; border-radius: .65rem; }
.configuration-list span { display: block; margin-top: .25rem; color: #47656d; font-size: .88rem; }
.configuration-list p, .cohort-list p { margin: .45rem 0; }
.cohort-list { display: grid; gap: 1rem; }
.cohort-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.cohort-list li button { min-height: 2rem; padding: .35rem .6rem; }
.cohort-list form, .operational-limits form { display: flex; align-items: end; gap: .75rem; margin-top: 1rem; }
.cohort-list label, .operational-limits label { display: grid; gap: .25rem; color: #47656d; font-weight: 650; }
.cohort-list input, .operational-limits input { min-height: 2.75rem; padding: .6rem; border: 1px solid #9bb1b5; border-radius: .35rem; font: inherit; }
.operational-reports > section { padding: .85rem 0; border-bottom: 1px solid #dce6e7; }
.report-date { padding: .75rem; border-radius: .45rem; background: #edf3f3; font-weight: 700; }
.metric-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .65rem; }
.metric-list div { padding: .65rem; border: 1px solid #dce6e7; border-radius: .45rem; }
.metric-list dt { text-transform: capitalize; font-size: .8rem; }
.metric-list dd { margin-top: .2rem; font-size: 1.25rem; font-weight: 750; }
.ticket-list { display: grid; gap: 1rem; margin-top: 1rem; }
.ticket-card { padding: 1rem; border: 1px solid #bfd0d2; border-radius: .65rem; }
.ticket-card h3 { margin: .25rem 0; }
.ticket-state { margin: 0; color: #145d67; font-weight: 750; text-transform: capitalize; }
.ticket-context { padding: .65rem; border-radius: .35rem; background: #edf3f3; font-size: .9rem; }
.ticket-messages { display: grid; gap: .65rem; padding-left: 1.5rem; }
.ticket-messages p { margin: .2rem 0; white-space: pre-wrap; }
.ticket-messages small { color: #47656d; }
.ticket-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.ticket-controls label { display: grid; gap: .25rem; color: #47656d; font-weight: 650; }
.ticket-controls label:nth-last-of-type(1), .ticket-controls button { grid-column: 1 / -1; }
.ticket-controls input, .ticket-controls select, .ticket-controls textarea { width: 100%; min-height: 2.75rem; padding: .6rem; border: 1px solid #9bb1b5; border-radius: .35rem; background: white; color: #132d35; font: inherit; }
.rollout-stage-list { display: grid; gap: 1rem; padding-left: 0; list-style: none; }
.rollout-stage-list > li { padding: 1rem; border: 1px solid #dce6e7; border-radius: .65rem; }
.rollout-stage-list h3 { margin: 0 0 .5rem; }
.rollout-stage-list details { margin-top: 1rem; }
.rollout-stage-list summary { color: #145d67; font-weight: 750; cursor: pointer; }
.rollout-status { font-weight: 750; }
.rollout-status.active { color: #145d67; }
.rollout-status.stopped { color: #7d3026; }
@media (max-width: 28rem) { .identity div { grid-template-columns: 1fr; gap: .2rem; } .actions button { width: 100%; } }
@media (max-width: 34rem) { .ticket-controls { grid-template-columns: 1fr; } .ticket-controls label, .ticket-controls button { grid-column: 1; } }