:root {
  color: #15221e;
  background: #eef2ec;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  --green: #3d8b68;
  --green-soft: #dceee2;
  --coral: #d56e61;
  --gold: #d7a745;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at top left, #fffdf6 0, #eef2ec 38rem); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 42px 0 70px; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 34px; }
.eyebrow, .section-kicker { margin: 0 0 8px; color: #437665; font-size: 11px; letter-spacing: .16em; font-weight: 700; text-transform: uppercase; }
h1, h2 { margin: 0; letter-spacing: 0; }
h1 { font-size: clamp(30px, 5vw, 52px); font-weight: 700; }
h2 { font-size: 23px; }
.panel { background: rgba(255,255,255,.82); border: 1px solid #dde6dd; border-radius: 22px; padding: 24px; box-shadow: 0 18px 50px rgba(55,80,65,.06); }
.panel.narrow { width: min(510px, 100%); margin: 80px auto 0; }
.file-warning { width: min(720px, 100%); margin: 30px auto 0; border-color: #f0d59d; background: #fff9eb; }
.section-heading { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.muted { color: #65766d; font-size: 14px; line-height: 1.65; }
.hidden { display: none !important; }
.system-panel { margin-bottom: 14px; padding: 20px; border: 1px solid #dce6de; border-radius: 18px; background: rgba(255,255,255,.78); box-shadow: 0 14px 36px rgba(55,80,65,.045); }
.system-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.system-panel-head h2 { font-size: 19px; }
.system-live { display: inline-flex; align-items: center; gap: 8px; color: #718078; font-size: 11px; font-variant-numeric: tabular-nums; }
.system-live i { width: 7px; height: 7px; border-radius: 50%; background: #40a174; box-shadow: 0 0 0 4px #e1f1e7; animation: breathe 2.2s ease-in-out infinite; }
.system-live.has-error i { background: var(--coral); box-shadow: 0 0 0 4px #f6e2de; }
.system-metrics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.system-metric { display: flex; min-width: 0; min-height: 106px; align-items: center; gap: 14px; padding: 13px 15px; overflow: hidden; border: 1px solid #e1e8e2; border-radius: 8px; background: #f9fbf9; color: #41896a; }
.system-metric:nth-child(2) { color: #c28b2f; }
.system-metric:nth-child(3) { color: #c76458; }
.system-metric.warning { border-color: #ead9b5; }
.system-metric.critical { border-color: #e8c4bf; background: #fffafa; }
.system-metric.skeleton { min-height: 106px; background: linear-gradient(100deg, #f4f7f4 20%, #fbfdfb 38%, #f4f7f4 56%); background-size: 220% 100%; animation: skeleton-shift 1.5s ease-in-out infinite; }
.load-ring { --progress: 0%; position: relative; display: grid; flex: 0 0 auto; width: 68px; height: 68px; place-items: center; border-radius: 50%; background: conic-gradient(currentColor var(--progress), #e5ebe6 0); }
.load-ring::after { position: absolute; width: 52px; height: 52px; border-radius: 50%; content: ""; background: #f9fbf9; }
.load-ring strong, .load-ring span { position: relative; z-index: 1; font-variant-numeric: tabular-nums; }
.load-ring strong { margin-right: 8px; color: #223a30; font-size: 18px; }
.load-ring span { position: absolute; margin: 4px 0 0 30px; color: #8a978f; font-size: 9px; }
.system-metric-copy { flex: 1; min-width: 0; align-self: stretch; }
.system-metric-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: #263e34; }
.system-metric-title strong { font-size: 13px; }
.system-metric-title span { overflow: hidden; color: #7b8981; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.load-sparkline { display: block; width: 100%; height: 47px; margin-top: 8px; overflow: visible; color: inherit; }
.load-sparkline polygon { fill: currentColor; opacity: .09; }
.load-sparkline polyline { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; transition: points .35s ease; }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.summary-card { padding: 18px; border: 1px solid #dce9df; border-radius: 17px; background: #f8fbf6; }
.summary-card .label { color: #6c7d74; font-size: 13px; }
.summary-card .value { display: block; margin-top: 7px; font-size: 28px; font-weight: 700; letter-spacing: -.05em; }
.content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.stack { display: grid; gap: 11px; }
.item { padding: 14px; border: 1px solid #e1e8e2; border-radius: 8px; background: #fcfdfb; }
.item-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.item-name { font-weight: 700; }
.item-meta { margin-top: 7px; color: #6b7b73; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.item-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.auto-refresh-label { display: inline-flex; gap: 7px; align-items: center; margin: -3px 0 14px; color: #6d7e75; font-size: 12px; }
.auto-refresh-label span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); animation: breathe 2.2s ease-in-out infinite; }
.provider-card { position: relative; overflow: hidden; padding: 16px; transition: border-color .2s ease, box-shadow .2s ease; }
.provider-card::before { position: absolute; inset: 0 auto auto 0; width: 100%; height: 2px; content: ""; background: linear-gradient(90deg, var(--green), #7bb895, var(--gold)); opacity: 0; transform: scaleX(0); transform-origin: left; }
.provider-card.is-refreshing { border-color: #b9d8c4; box-shadow: 0 10px 28px rgba(51, 107, 78, .08); }
.provider-card.is-refreshing::before { opacity: 1; animation: sync-line 1.3s ease-in-out infinite; }
.provider-card.has-error { border-color: #ead4cf; }
.provider-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.provider-toggle { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 2px 3px; border: 0; color: inherit; background: transparent; text-align: left; }
.provider-toggle:focus-visible { border-radius: 7px; outline: 3px solid rgba(61,139,104,.18); outline-offset: 3px; }
.provider-title { display: flex; gap: 10px; align-items: center; min-width: 0; }
.provider-title > span:last-child { min-width: 0; }
.provider-title .item-name, .provider-title .sync-time { display: block; }
.provider-live { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.provider-live.error { background: var(--coral); box-shadow: 0 0 0 4px #f6e2de; }
.sync-time { margin-top: 2px; color: #91a097; font-size: 10px; font-variant-numeric: tabular-nums; }
.provider-glance { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; color: #68786f; }
.glance-item { display: inline-flex; min-width: 48px; align-items: center; gap: 6px; font-size: 10px; font-variant-numeric: tabular-nums; }
.glance-ring { --progress: 0%; position: relative; display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(var(--gold) var(--progress), #e5ebe6 0); }
.glance-ring.nodes { background: conic-gradient(var(--green) var(--progress), #e5ebe6 0); }
.glance-ring::after { position: absolute; inset: 4px; border-radius: 50%; content: ""; background: #fcfdfb; }
.provider-chevron { display: inline-grid; width: 25px; height: 25px; place-items: center; color: #7b8a82; font-size: 19px; transition: transform .22s ease, color .2s ease; }
.provider-card.is-expanded .provider-chevron { color: #315f4c; transform: rotate(180deg); }
.provider-actions { display: flex; gap: 2px; align-items: center; }
.icon-action { display: inline-grid; width: 32px; height: 32px; padding: 0; place-items: center; border: 0; border-radius: 50%; color: #60746a; background: transparent; font-size: 18px; line-height: 1; }
.icon-action:hover { color: #244b3b; background: #eef6f0; }
.icon-action.danger:hover { color: #a64f44; background: #fbecea; }
.provider-card.is-refreshing .refresh-icon { animation: spin .9s linear infinite; }
.provider-details { animation: provider-reveal .22s ease both; }
.provider-metrics { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: 9px; margin-top: 14px; padding-top: 13px; border-top: 1px solid #edf1ed; }
.metric { display: flex; min-height: 92px; gap: 12px; align-items: center; padding: 12px; border: 1px solid #e4ece5; border-radius: 8px; background: #f8fbf8; }
.metric-copy { min-width: 0; }
.metric-label { display: block; margin-bottom: 4px; color: #819087; font-size: 10px; }
.metric-copy strong { display: block; color: #223a30; font-size: 16px; font-weight: 700; white-space: nowrap; }
.metric-copy strong small { color: #75857d; font-size: 11px; font-weight: 600; }
.metric-sub { display: block; margin-top: 3px; overflow: hidden; color: #89968f; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.traffic-ring { --progress: 0%; position: relative; display: grid; flex: 0 0 auto; width: 62px; height: 62px; place-items: center; border-radius: 50%; background: conic-gradient(var(--gold) var(--progress), #e6ede7 0); transition: background .5s ease; }
.traffic-ring::after { position: absolute; width: 44px; height: 44px; border-radius: 50%; content: ""; background: #f8fbf8; }
.traffic-ring span { position: relative; z-index: 1; color: #44594f; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.node-metric { justify-content: flex-start; }
.node-ring { position: relative; display: grid; flex: 0 0 auto; width: 62px; height: 62px; place-items: center; border-radius: 50%; transition: background .5s ease; }
.node-ring::after { position: absolute; width: 44px; height: 44px; border-radius: 50%; content: ""; background: #f8fbf8; }
.node-ring span { position: relative; z-index: 1; color: #44594f; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.node-legend { display: grid; grid-template-columns: 6px auto 6px auto 6px auto; gap: 4px; align-items: center; margin-top: 7px; color: #718078; font-size: 9px; font-variant-numeric: tabular-nums; }
.node-legend i { width: 6px; height: 6px; border-radius: 50%; }
.health-visual { display: flex; flex: 1; min-width: 70px; flex-direction: column; justify-content: center; }
.health-track { display: flex; width: 100%; height: 10px; overflow: hidden; border-radius: 5px; background: #e5ece7; }
.health-track i { display: block; height: 100%; transition: width .55s ease; }
.health-online { background: var(--green); }
.health-offline { background: var(--coral); }
.health-unknown { background: #b8c1bb; }
.health-counts { display: grid; grid-template-columns: 6px auto 6px auto 6px auto; gap: 3px; align-items: center; justify-content: end; margin-top: 9px; color: #718078; font-size: 9px; font-variant-numeric: tabular-nums; }
.health-counts span { width: 6px; height: 6px; border-radius: 50%; }
.health-counts b { font-weight: 650; }
.online-dot { background: var(--green); }.offline-dot { background: var(--coral); }.unknown-dot { background: #b8c1bb; }
.provider-empty { display: flex; gap: 8px; align-items: center; justify-content: center; min-height: 42px; margin-top: 10px; border-top: 1px solid #edf1ed; color: #8b9991; font-size: 11px; }
.empty-pulse { width: 7px; height: 7px; border-radius: 50%; background: #b5c0b9; animation: breathe 1.8s ease-in-out infinite; }
.node-list { display: grid; gap: 4px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #e9efea; }
.node-row { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto 13px; min-height: 34px; gap: 8px; align-items: center; padding: 5px 7px; border-radius: 6px; background: #f7faf7; font-size: 12px; transition: background .15s ease; }
.node-row:hover { background: #f0f6f1; }
.node-flag { font-size: 17px; text-align: center; }
.node-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #29483a; }
.node-protocol { color: #72837a; font-size: 10px; letter-spacing: .06em; }
.node-status { display: inline-flex; align-items: center; justify-content: center; }
.node-status i { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: #a9b7af; }
.node-online { color: #2f7458; }.node-online i { background: #42a36f; box-shadow: 0 0 0 3px #d9f1df; }
.node-offline { color: #a04d40; }.node-offline i { background: #d66b5d; }
.node-unknown { color: #7b887f; }
.button { border: 1px solid #cad9cd; border-radius: 8px; padding: 9px 14px; color: #244039; background: #fff; font-weight: 650; transition: transform .12s ease, border-color .15s ease, background .15s ease; }
.button:hover { border-color: #7ca58d; background: #f3f8f3; }
.button:active { transform: scale(.97); }
.button.primary { border-color: #316c55; color: #fff; background: #316c55; }
.button.primary:hover { background: #285b48; }
.button.ghost { background: transparent; }
.button.small { padding: 6px 10px; font-size: 12px; }
.icon-button { border: 0; color: #6b7b73; background: transparent; font-size: 26px; line-height: 1; }
.status-pill { padding: 5px 9px; border-radius: 999px; color: #316c55; background: #e8f2e9; font-size: 11px; white-space: nowrap; }
.status-pill.off { color: #8d554c; background: #f8e9e5; }
.status-pill.online { color: #256c4d; background: #e1f1e6; }
.status-pill.idle { color: #69766f; background: #edf0ed; }
.status-pill.expired { color: #9b5c22; background: #fff0d8; }
.status-pill.quota { color: #93463b; background: #f8e2de; }
.form-grid, .dialog-card { display: grid; gap: 15px; }
.compact-grid { gap: 12px; }
.dialog.provider-dialog { width: min(680px, calc(100% - 30px)); max-height: calc(100vh - 30px); max-height: calc(100dvh - 30px); overflow-y: auto; overscroll-behavior: contain; }
.manual-replacement-warning { display: grid; gap: 5px; border: 1px solid #edc98d; border-radius: 12px; padding: 12px 14px; color: #76511e; background: #fff8e9; }
.manual-replacement-warning strong { font-size: 13px; }
.manual-replacement-warning p { margin: 0; font-size: 12px; line-height: 1.55; }
.ss-link-builder { display: grid; gap: 12px; border: 1px solid #d6e4d8; border-radius: 14px; padding: 14px; background: #f8fbf8; }
.ss-link-builder-heading { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; }
.ss-link-builder-heading strong { color: #29483a; font-size: 14px; }
.ss-link-builder-heading p { margin: 4px 0 0; color: #718078; font-size: 11px; line-height: 1.5; }
.ss-link-builder-heading > span { flex: 0 0 auto; border-radius: 999px; padding: 4px 8px; color: #397157; background: #e6f2e8; font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.ss-builder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ss-builder-actions { display: flex; min-height: 32px; gap: 12px; align-items: center; justify-content: space-between; }
.ss-builder-status { flex: 1; margin: 0; color: #718078; font-size: 11px; line-height: 1.45; }
.ss-builder-status.success { color: #2f7458; }
.ss-builder-status.error { color: #a04d40; }
.managed-provider-note { display: grid; gap: 6px; border: 1px solid #cfe1d3; border-radius: 12px; padding: 13px 14px; color: #3f5c4d; background: #f2f8f3; }
.managed-provider-note strong { color: #2e624b; font-size: 13px; }
.managed-provider-note p { margin: 0; font-size: 12px; line-height: 1.55; }
.form-split { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(150px, .55fr); gap: 12px; }
label { display: grid; gap: 7px; color: #43564c; font-size: 13px; font-weight: 650; }
input, select, textarea { width: 100%; border: 1px solid #d2ded4; border-radius: 10px; padding: 11px 12px; color: #1e3028; background: #fff; outline: none; }
textarea { min-height: 132px; resize: vertical; font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; line-height: 1.55; }
.field-help { margin: -3px 0 0; color: #718078; font-size: 12px; line-height: 1.55; }
.inline-select { min-width: 130px; padding: 6px 8px; font-size: 12px; }
input:focus, select:focus, textarea:focus { border-color: #5d9a7d; box-shadow: 0 0 0 3px rgba(93,154,125,.15); }
.notice { padding: 12px 15px; border: 1px solid #f2d6a1; border-radius: 13px; color: #76511e; background: #fff8e9; margin-bottom: 16px; }
.notice.error { border-color: #ecc6bd; color: #8b4437; background: #fff1ee; }
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 1180px; border-collapse: collapse; font-size: 13px; }
th, td { padding: 13px 10px; border-bottom: 1px solid #e6ebe5; text-align: left; vertical-align: middle; }
th { color: #708178; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
td code { color: #4b685a; font-size: 11px; }
.table-meta { display: block; margin-top: 5px; color: #87948d; font-size: 10px; font-weight: 500; white-space: nowrap; }
.table-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 220px; }
.presence { display: flex; gap: 7px; align-items: center; color: #68776f; font-variant-numeric: tabular-nums; }
.presence i { width: 8px; height: 8px; border-radius: 50%; background: #b5bdb8; box-shadow: 0 0 0 3px #edf0ee; }
.presence i.online { background: #3b9569; box-shadow: 0 0 0 3px #dff0e5; }
.presence strong { color: #354c41; font-size: 12px; }
.device-types { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.device-type { padding: 2px 6px; border: 1px solid #dbe6dd; border-radius: 5px; color: #557064; background: #f5f9f5; font-size: 9px; white-space: nowrap; }
.muted.compact { font-size: 10px; line-height: 1.3; }
.traffic-cell { display: grid; min-width: 150px; gap: 5px; color: #344d40; font-variant-numeric: tabular-nums; white-space: nowrap; }
.traffic-cell strong { font-size: 11px; }
.traffic-cell small { color: #74847b; font-size: 10px; }
.traffic-progress { display: block; width: 100%; height: 4px; overflow: hidden; border-radius: 999px; background: #e5ebe6; }
.traffic-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4b9870, #d39a51); }
.expiry-cell { display: grid; gap: 3px; color: #334b40; font-variant-numeric: tabular-nums; white-space: nowrap; }
.expiry-cell small { color: #7a8981; font-size: 10px; }
.expiry-cell.expired, .expiry-cell.expired small { color: #a05a2f; }
.support-panel { margin-top: 20px; }
.support-layout { display: grid; grid-template-columns: minmax(220px, .68fr) minmax(0, 1.32fr); min-height: 430px; overflow: hidden; border: 1px solid #e1e9e2; border-radius: 8px; background: #f8fbf8; }
.support-list { overflow-y: auto; border-right: 1px solid #e1e9e2; background: #f5f8f5; }
.support-conversation { display: grid; width: 100%; gap: 5px; padding: 13px 14px; border: 0; border-bottom: 1px solid #e5ece6; color: #29483a; background: transparent; text-align: left; transition: background .15s ease; }
.support-conversation:hover, .support-conversation.selected { background: #eaf4ed; }
.support-conversation-head { display: flex; align-items: center; gap: 8px; }
.support-conversation-head strong { flex: 1; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.support-conversation-head b { display: inline-grid; min-width: 18px; height: 18px; padding: 0 5px; place-items: center; border-radius: 9px; color: #fff; background: #31785b; font-size: 10px; }
.support-conversation-meta, .support-conversation-preview { overflow: hidden; color: #75877d; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.support-conversation-preview { color: #4e665a; font-size: 11px; }
.support-thread { display: flex; min-width: 0; flex-direction: column; background: #fff; }
.support-thread-head { display: flex; min-height: 66px; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e8eeea; }
.support-thread-head strong, .support-thread-head span { display: block; }
.support-thread-head strong { color: #244137; font-size: 14px; }
.support-thread-head span { margin-top: 3px; color: #708178; font-size: 10px; }
.support-thread-actions { display: flex; gap: 7px; align-items: center; }
.support-thread-actions > .status-pill { margin-top: 0; }
.support-messages { display: flex; flex: 1; min-height: 246px; max-height: 440px; flex-direction: column; gap: 10px; overflow-y: auto; padding: 16px; background: #fbfcfb; }
.support-message { max-width: min(82%, 510px); }
.support-message > span { display: block; margin-bottom: 4px; color: #829188; font-size: 10px; }
.support-message > div { overflow-wrap: anywhere; border: 1px solid #e0e9e1; border-radius: 8px; padding: 10px 12px; color: #324c3f; background: #fff; font-size: 12px; line-height: 1.55; }
.support-message p { margin: 0; white-space: pre-wrap; }
.support-message.admin { align-self: flex-end; }
.support-message.admin > span { text-align: right; }
.support-message.admin > div { border-color: #cce3d2; background: #edf8f0; }
.support-image { display: block; max-width: 240px; margin-top: 7px; }
.support-image:first-child { margin-top: 0; }
.support-image img { display: block; max-width: 100%; max-height: 240px; border-radius: 6px; object-fit: cover; }
.support-compose { display: grid; gap: 8px; padding: 12px; border-top: 1px solid #e8eeea; background: #fff; }
.support-compose textarea { width: 100%; min-height: 62px; resize: vertical; border: 1px solid #d2ded4; border-radius: 7px; padding: 9px 11px; color: #1e3028; font: inherit; font-size: 12px; outline: none; }
.support-compose textarea:focus { border-color: #5d9a7d; box-shadow: 0 0 0 3px rgba(93,154,125,.15); }
.support-compose-actions { display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
.image-picker { display: inline-flex; align-items: center; cursor: pointer; border: 1px solid #cad9cd; border-radius: 7px; padding: 6px 10px; color: #426056; background: #fff; font-size: 12px; font-weight: 650; }
.image-picker input { display: none; }
.support-empty { display: grid; min-height: 130px; place-items: center; padding: 20px; color: #829188; font-size: 12px; text-align: center; }
.dialog { width: min(520px, calc(100% - 30px)); padding: 0; border: 0; border-radius: 22px; background: transparent; }
.dialog::backdrop { background: rgba(23, 38, 31, .35); backdrop-filter: blur(3px); }
.dialog-card { padding: 24px; border: 1px solid #dce7dd; border-radius: 22px; background: #fff; box-shadow: 0 20px 70px rgba(25,54,38,.2); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 7px; }
.secret-box { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid #d9e6db; border-radius: 12px; background: #f7fbf7; }
.secret-box code { flex: 1; overflow-wrap: anywhere; color: #2f634e; font-size: 12px; line-height: 1.5; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { opacity: .6; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@keyframes sync-line { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 51% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
@keyframes skeleton-shift { to { background-position: -120% 0; } }
@keyframes provider-reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }
@media (max-width: 860px) { .system-metrics-grid { grid-template-columns: 1fr; } .system-metric { min-height: 92px; } .load-sparkline { height: 38px; } .summary-grid { grid-template-columns: repeat(2, 1fr); } .content-grid { grid-template-columns: 1fr; } .support-layout { grid-template-columns: 1fr; } .support-list { max-height: 240px; border-right: 0; border-bottom: 1px solid #e1e9e2; } }
@media (max-width: 520px) { .shell { width: min(100% - 24px, 1240px); padding-top: 24px; } .topbar { margin-bottom: 22px; } .panel { padding: 18px; border-radius: 17px; } .system-panel { padding: 16px; border-radius: 15px; } .system-panel-head { align-items: flex-start; } .system-live { margin-top: 5px; } .summary-grid { gap: 9px; } .summary-card { padding: 13px; } .summary-card .value { font-size: 23px; } .provider-head { align-items: flex-start; } .provider-toggle { align-items: flex-start; } .provider-glance { gap: 5px; } .glance-item { min-width: 0; } .glance-item b { display: none; } .provider-actions { margin-top: -4px; } .provider-metrics, .form-split, .ss-builder-grid { grid-template-columns: 1fr; } .ss-builder-actions { align-items: stretch; flex-direction: column; } .ss-builder-actions .button { width: 100%; } }