[hidden] { display: none !important; }
* { box-sizing: border-box; }
body { margin: 0; background: #f8f9fb; font-family: system-ui, sans-serif; color: #202124; }
main { max-width: 800px; margin: 0 auto; padding: 32px 28px 64px; }
.page-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid #e5e7eb; margin-bottom: 24px; }
a { color: inherit; text-underline-offset: 4px; }
.brand { font-size: 26px; font-weight: 650; text-decoration: none; }
h1 { font-size: 28px; } h2 { font-size: 28px; font-weight: 600; letter-spacing: -.6px; } h3 { font-size: 17px; margin-top: 0; }
p { line-height: 1.6; overflow-wrap: anywhere; }
.profile-card { display: flex; gap: 16px; align-items: center; margin: 24px 0; }
.profile-card p { margin: 2px 0; }
.avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #e8edea; font-weight: 650; }
.eyebrow, .muted, .stage { color: #61666e; font-size: 14px; }
.card { background: white; border: 1px solid #e0e3e7; border-radius: 16px; padding: 24px; margin: 24px 0; }
#balance-value { font-size: 38px; font-weight: 600; margin: 12px 0; letter-spacing: -1px; }
#wallet button { margin-right: 8px; margin-bottom: 8px; }
#held-value { color: #825c12; font-size: 14px; }
.languages { display: flex; gap: 8px; justify-content: flex-end; }
.languages button, .secondary, .actions button { background: white; color: #202124; border: 1px solid #d9dde2; }
.button, button { display: inline-block; border: 1px solid transparent; background: #242424; color: white; padding: 10px 16px; border-radius: 10px; font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; }
button:hover, .button:hover { filter: brightness(.94); }
button:disabled { opacity: .5; cursor: wait; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.stage { font-size: 12px; margin-top: 32px; }
#status:empty { display: none; }
#status { padding: 12px 16px; border-radius: 10px; background: #edf1f6; }
:focus-visible { outline: 3px solid #317acc; outline-offset: 3px; }
body:has(#accounts) main { max-width: 1240px; }
#accounts, #wallets, #usage, #audit { overflow-x: auto; background: white; border: 1px solid #e0e3e7; border-radius: 12px; padding: 16px; }
#accounts p { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 12px 0; margin: 0; border-bottom: 1px solid #eceef1; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 12px; border-bottom: 1px solid #eceef1; white-space: nowrap; }
th { font-weight: 600; color: #60656d; background: #f8f9fb; }
@media (max-width: 600px) { main { padding: 20px 16px 40px; } .card { padding: 20px; } #accounts p { align-items: flex-start; } #accounts span { overflow-wrap: anywhere; min-width: 0; } }

/* Operator pricing stays separate from customer account controls. */
#pricing-form { display: grid; gap: .65rem; }
#pricing-assumptions { width: 100%; box-sizing: border-box; min-height: 14rem; padding: .75rem; border: 1px solid #d4d4d4; border-radius: .6rem; font: .85rem/1.5 ui-monospace, monospace; }
#pricing-calculate { justify-self: start; }
#pricing-result { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .85rem; }

#account-search { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:16px 0; }
#account-query { flex:1; min-width:180px; padding:10px 12px; border:1px solid #d9dde2; border-radius:10px; font:inherit; }
#accounts span { flex:1; }
#accounts-more, #usage-more, #audit-more { margin-top:12px; }
@media (max-width:600px) { #accounts p { flex-wrap:wrap; gap:10px; } #accounts span { flex-basis:100%; } #account-search label { flex-basis:100%; } }

/* One clear entry point, with recovery detail only when needed. */
#signed-out { max-width: 460px; margin: 48px auto; padding: 32px; background: white; border: 1px solid #e0e3e7; border-radius: 18px; }
#signed-out h1 { margin: 20px 0 8px; font-weight: 600; letter-spacing: -.6px; }
.welcome-mark { display: grid; place-items: center; width: 44px; height: 44px; background: #242424; color: white; border-radius: 12px; font-size: 24px; font-weight: 600; }
.entry-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0 12px; }
.entry-actions .button { flex: 1; text-align: center; white-space: nowrap; }
.signin-help { border-top: 1px solid #e5e7eb; margin-top: 24px; padding-top: 16px; font-size: 14px; line-height: 1.6; }
summary { cursor: pointer; }
#login-error { border: 1px solid #e8cfac; background: #fff8ef; border-radius: 10px; padding: 14px; margin-top: 20px; font-size: 14px; }
#login-error p { margin: 6px 0 0; }
@media (max-width: 600px) { #signed-out { margin: 24px auto; padding: 24px 20px; } }

/* Operator navigation: one task area at a time, with technical details inside. */
.admin-nav { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0; }
.admin-nav button { background:transparent; color:#202124; border:1px solid #d9dde2; }
.admin-nav button[aria-current="page"] { background:#242424; color:white; }
.admin-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.admin-metrics article { background:white; border:1px solid #e0e3e7; border-radius:12px; padding:20px; }
.admin-metrics p { font-size:32px; font-weight:600; margin:8px 0 0; }
#readiness, #model-catalog, #billing-totals, #billing-issues { overflow-x:auto; max-width:100%; }
@media(max-width:600px) { .admin-metrics { grid-template-columns:1fr; gap:8px; } .admin-metrics article { padding:16px; } }

/* Feedback is a short form, with optional detail below the main description. */
#report-form { display: grid; gap: 10px; margin: 24px 0; }
#report-form label { font-size: 14px; font-weight: 550; }
#report-form input, #report-form select, #report-form textarea { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid #d9dde2; border-radius: 10px; background: white; color: inherit; font: inherit; }
#report-form textarea { min-height: 130px; resize: vertical; }
#report-form .muted { margin: 4px 0; }
#submit-report { justify-self: start; }
#reports article { margin-top: 16px; padding: 20px; border: 1px solid #e0e3e7; border-radius: 12px; background: white; }
#reports article h3 { font-size: 15px; margin-bottom: 10px; }
#reports article p:empty { display: none; }
#reports article button, #refresh-reports { background: white; color: #202124; border-color: #d9dde2; }

pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.6; }

.product-summary { border-top: 1px solid #e5e7eb; margin-top: 24px; padding-top: 12px; color: #61666e; font-size: 14px; }
footer { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; padding: 20px; font-size: 13px; color: #61666e; }