:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif; background: #f4f7f6; color: #172422; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-width: 320px; margin: 0; background: #f4f7f6; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.exception-app { width: min(100%, 720px); min-height: 100vh; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom)); }
.exception-header { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 10px; min-height: 56px; }
.header-button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #d8e2df; border-radius: 13px; background: #fff; color: #1b625a; text-decoration: none; }
.header-button svg { width: 21px; height: 21px; }
.header-button:active { background: #e9f3ef; transform: scale(.98); }
.header-button.is-loading svg { animation: spin .85s linear infinite; }
.exception-title { min-width: 0; }
.exception-title p { margin: 0 0 2px; color: #71827e; font-size: 10px; font-weight: 760; letter-spacing: .08em; }
.exception-title h1 { margin: 0; color: #173b37; font-size: 21px; line-height: 1.16; }
.exception-overview { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 104px; margin: 15px 0 18px; padding: 17px 18px; border: 1px solid rgba(130, 82, 32, .24); border-radius: 18px; background: linear-gradient(135deg, #344541, #6d5136); box-shadow: 0 12px 28px rgba(69, 48, 29, .12); color: #fff; }
.exception-overview span { display: block; margin-bottom: 6px; color: rgba(255, 249, 240, .72); font-size: 12px; font-weight: 650; }
.exception-overview h2 { margin: 0; font-size: 18px; line-height: 1.35; }
.exception-overview strong { min-width: 50px; font-size: 38px; font-weight: 780; font-variant-numeric: tabular-nums; text-align: right; }
.page-state, .empty-state, .error-state { border: 1px solid #dae5e1; border-radius: 16px; background: #fff; text-align: center; }
.page-state { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 96px; color: #64746f; font-size: 14px; }
.page-state svg { width: 19px; animation: spin .85s linear infinite; }
.empty-state, .error-state { padding: 42px 22px; }
.state-icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 16px; background: #e4f1eb; color: #197064; }
.state-icon svg { width: 25px; height: 25px; }
.empty-state h2, .error-state h2 { margin: 0; color: #20312e; font-size: 18px; }
.empty-state p, .error-state p { margin: 8px 0 0; color: #6c7b77; font-size: 14px; line-height: 1.55; }
.error-state .state-icon { background: #faece9; color: #b64b3f; }
.error-state button { min-height: 42px; margin-top: 18px; padding: 0 17px; border: 0; border-radius: 11px; background: #1b6f65; color: #fff; font-weight: 700; }
.exception-groups { display: grid; gap: 18px; }
.exception-group { display: grid; gap: 8px; }
.exception-group h2 { margin: 0 2px; color: #314440; font-size: 15px; font-weight: 760; }
.exception-list { display: grid; overflow: hidden; border: 1px solid #dce6e3; border-radius: 15px; background: #fff; box-shadow: 0 6px 18px rgba(31, 63, 57, .045); }
.exception-item { min-height: 78px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 18px; align-items: center; gap: 9px; padding: 10px 13px; color: #1c2a27; text-decoration: none; }
.exception-item + .exception-item { border-top: 1px solid #edf1ef; }
.exception-item:active { background: #f1f7f4; }
.exception-icon { width: 32px; height: 32px; display: grid; place-items: center; align-self: start; margin-top: 2px; border-radius: 10px; background: #fff7df; color: #9a7021; }
.exception-icon svg { width: 17px; height: 17px; }
.exception-copy { min-width: 0; display: grid; gap: 3px; }
.exception-copy strong { overflow: hidden; color: #20312e; font-size: 15px; font-weight: 730; text-overflow: ellipsis; white-space: nowrap; }
.exception-copy em { overflow: hidden; color: #65736f; font-size: 13px; font-style: normal; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.exception-copy small { color: #8a9692; font-size: 11px; }
.severity-pill { align-self: start; margin-top: 2px; padding: 4px 7px; border-radius: 999px; background: #fff5dd; color: #9b701d; font-size: 11px; font-weight: 760; white-space: nowrap; }
.exception-arrow { width: 17px; height: 17px; color: #95a39e; }
.severity-attention .exception-icon { background: #fff0e8; color: #bf5a31; }
.severity-attention .severity-pill { background: #fff0e8; color: #b6522d; }
.severity-critical .exception-icon { background: #feeceb; color: #b9453f; }
.severity-critical .severity-pill { background: #feeceb; color: #b8443f; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 760px) { .exception-app { padding-top: 28px; } .exception-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .exception-group:last-child:nth-child(odd) { grid-column: 1 / -1; } }