:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; color: #173c32; background: #eef7f2; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at top right, #ccebdd 0, transparent 34rem), #eef7f2; }
button { font: inherit; }
.portal { width: min(100% - 28px, 760px); margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 0 max(40px, env(safe-area-inset-bottom)); }
.hero { padding: 24px 4px 12px; }
.badge { display: inline-flex; padding: 7px 11px; border: 1px solid #9fd3bd; border-radius: 999px; color: #075c45; background: #e5f6ee; font-size: 13px; font-weight: 750; letter-spacing: .04em; }
.eyebrow { margin: 16px 0 5px; color: #37816a; font-size: 12px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, p { overflow-wrap: anywhere; }
h1 { margin: 0; color: #064c3a; font-size: clamp(28px, 7vw, 46px); line-height: 1.14; letter-spacing: -.025em; }
h2 { margin: 0 0 15px; color: #123f33; font-size: 20px; }
.lead { max-width: 620px; margin: 14px 0 0; color: #4d6f65; line-height: 1.7; }
.card { margin-top: 16px; padding: 20px; border: 1px solid #d1e8dd; border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: 0 10px 30px rgba(7,92,69,.07); }
.section-heading { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; }
.section-heading .eyebrow { margin-top: 0; }
.balance, .room-state { flex: none; padding: 8px 10px; border-radius: 10px; color: #075c45; background: #e8f6ef; font-size: 12px; }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 0; overflow: hidden; border: 1px solid #deeee7; border-radius: 14px; background: #deeee7; }
.facts div { min-width: 0; padding: 13px; background: #f9fcfa; }
.facts dt { color: #69877e; font-size: 12px; }
.facts dd { margin: 5px 0 0; color: #173c32; font-weight: 700; }
.role-grid { display: grid; gap: 10px; }
.role-button { width: 100%; padding: 15px 16px; border: 0; border-radius: 14px; color: white; background: #087052; box-shadow: 0 5px 12px rgba(8,112,82,.16); cursor: pointer; text-align: left; transition: transform .15s, background .15s; }
.role-button:hover { background: #075c45; transform: translateY(-1px); }
.role-button:focus-visible, .reset-button:focus-visible { outline: 3px solid #72c7a8; outline-offset: 2px; }
.role-button span { display: block; font-size: 16px; font-weight: 750; }
.role-button small { display: block; margin-top: 4px; color: #d8f3e8; }
.role-button:disabled, .reset-button:disabled { cursor: wait; opacity: .62; transform: none; }
.status, .room-meta, .hint { color: #607d74; font-size: 13px; line-height: 1.6; }
.status { min-height: 21px; margin: 13px 1px 0; }
.status.is-error { color: #a43d34; }
.counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 15px 0; }
.count { padding: 10px 6px; border-radius: 11px; background: #f0f8f4; text-align: center; }
.count strong, .count span { display: block; }
.count strong { color: #075c45; font-size: 19px; }
.count span { margin-top: 3px; color: #6a867d; font-size: 11px; }
.reset-button { padding: 10px 14px; border: 1px solid #a8cdbf; border-radius: 11px; color: #17624d; background: white; cursor: pointer; }
.hint { margin: 8px 0 0; }
#sandbox-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; border: 1px solid #cce4d9; border-radius: 12px; background: #f3faf7; }
#sandbox-toolbar [data-sandbox-role] { padding: 7px 10px; border: 1px solid #9ccbb9; border-radius: 9px; color: #075c45; background: white; cursor: pointer; }
#sandbox-toolbar [data-sandbox-role][aria-current="true"] { color: white; background: #087052; }
#sandbox-toolbar [data-sandbox-status] { color: #4d6f65; font-size: 12px; }
#sandbox-toolbar a { color: #087052; font-weight: 700; }
@media (max-width: 540px) { .portal { width: min(100% - 20px, 760px); } .card { padding: 16px; border-radius: 16px; } .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .counts { grid-template-columns: repeat(2, 1fr); } .section-heading { align-items: stretch; flex-direction: column; } .balance, .room-state { align-self: flex-start; } }
@media (prefers-reduced-motion: reduce) { .role-button { transition: none; } }