/* 总览分区布局。背景仅由 CSS 和代码绘制。 */
.s-overview,.s-device-list { --s-surface:var(--surface,#f8f3e8); --s-line:var(--outline,#d5cbb8); --s-ink:var(--heading,#244b44); --s-muted:var(--secondary,#6c7267); --s-jade:var(--primary,#244b44); --s-jade-soft:color-mix(in srgb,var(--primary,#244b44) 7%,var(--surface,#f8f3e8)); --s-purple:var(--ss-violet,#77596f); --s-purple-soft:color-mix(in srgb,var(--s-purple) 6%,var(--surface,#f8f3e8)); color:var(--s-ink); }
.s-overview { display:grid; gap:14px; min-width:0; }
.s-overview :is(section,div,dl,dt,dd,strong,span,p),.s-device-list :is(div,article,h3,p) { min-width:0; }
.s-overview dl,.s-overview dd { margin:0; }
.s-surface { border:1px solid var(--s-line); border-radius:6px; background:linear-gradient(115deg,color-mix(in srgb,var(--s-surface) 96%,#a75f4b),var(--s-surface) 58%,color-mix(in srgb,var(--s-surface) 97%,var(--s-ink))); }
.s-service-workspace { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:14px; }
.s-service { position:relative; isolation:isolate; overflow:hidden; padding:22px; border-color:color-mix(in srgb,var(--s-jade) 27%,var(--s-line)); }
.s-service-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.s-service-label { color:var(--s-muted); font-size:12px; }
.s-service-status { display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border:1px solid var(--s-line); border-radius:4px; color:var(--s-muted); font-size:11px; line-height:1.4; }
.s-service-status i { width:5px; height:5px; border-radius:50%; background:currentColor; }
.s-service-status.is-active { color:var(--s-jade); border-color:color-mix(in srgb,var(--s-jade) 20%,transparent); background:var(--s-jade-soft); }
.member-app .s-service h2 { position:relative; z-index:1; margin:14px 0 18px; max-width:100%; font-size:clamp(25px,2.5vw,34px); font-weight:600; line-height:1.35; letter-spacing:-.04em; overflow-wrap:anywhere; }
.s-service-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; position:relative; z-index:1; }
.s-service-facts dt,.s-usage-details dt { color:var(--s-muted); font-size:11px; }
.s-service-facts dd { margin-top:5px; font-size:16px; font-weight:500; overflow-wrap:anywhere; }
.s-service-actions { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.member-app .s-action { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; max-width:100%; padding:10px 12px; border:1px solid var(--s-line); border-radius:8px; background:var(--s-surface); color:var(--s-ink); font-size:12px; line-height:1.5; cursor:pointer; transition:background 160ms,transform 160ms,border-color 160ms; overflow-wrap:anywhere; }
.s-action .m-icon { width:16px; height:16px; }
.s-action:hover { background:var(--s-jade-soft); border-color:var(--s-jade); transform:translateY(-1px); }
.member-app .s-action-primary { background:var(--primary,#244b44); border-color:var(--primary,#244b44); color:var(--surface,#f8f3e8); }
.s-action-primary:hover { color:var(--surface,#f8f3e8); background:var(--primary-hover,#1e403b); border-color:var(--primary-hover,#1e403b); }
.s-service-landscape { position:absolute; bottom:0; right:0; z-index:-1; width:100%; height:80px; opacity:.55; color:var(--s-jade); pointer-events:none; }
.s-usage { padding:20px 22px; }
.s-module-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; }
.member-app .s-module-heading h2 { display:flex; align-items:center; gap:9px; font-size:15px; line-height:1.5; font-weight:600; }
.s-module-heading h2>.m-icon { width:18px; height:18px; color:var(--s-jade); }
.member-app .s-inline-action { display:inline-flex; align-items:center; gap:6px; min-height:44px; max-width:100%; padding:8px 0; border:0; background:transparent; color:var(--s-jade)!important; font-size:12px; line-height:1.4; cursor:pointer; overflow-wrap:anywhere; }
.s-inline-action .m-icon { width:15px; height:15px; }
.s-inline-action:hover { text-decoration:underline; }
.s-usage-total { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin:10px 0 16px; }
.s-usage-total strong { font-size:clamp(28px,2.7vw,38px); line-height:1.2; font-weight:500; letter-spacing:-.04em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.s-usage-total>span { font-size:11px; color:var(--s-muted); }
.s-usage-caption { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:11px; color:var(--s-muted); }
.s-usage-caption strong { color:var(--s-jade); font-weight:500; }
.s-usage-progress { display:block; width:100%; height:7px; margin-top:10px; border:0; border-radius:8px; overflow:hidden; accent-color:var(--s-jade); background:var(--s-jade-soft); }
.s-usage-progress::-webkit-progress-bar { background:var(--s-jade-soft); border-radius:8px; }
.s-usage-progress::-webkit-progress-value { background:var(--s-jade); border-radius:8px; }
.s-usage-progress::-moz-progress-bar { background:var(--s-jade); border-radius:8px; }
.s-usage-details { display:grid; gap:10px; margin-top:16px!important; padding-top:14px; border-top:1px solid var(--s-line); }
.s-usage-details>div { display:flex; justify-content:space-between; gap:18px; }
.s-usage-details dd { font-size:12px; text-align:right; overflow-wrap:anywhere; }
.s-connection-tools { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,.75fr); gap:14px; }
.s-import { padding:16px 20px; }
.s-import-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }
.member-app .s-import-client { display:flex; align-items:center; justify-content:flex-start; flex-direction:row; gap:9px; min-width:0; min-height:48px; padding:8px 10px; border:0; border-bottom:1px solid var(--s-line,var(--outline)); border-radius:8px; color:var(--s-ink,var(--heading)); background:transparent; }
.member-app .s-import-client:hover { background:var(--s-jade-soft,var(--surface)); transform:translateY(-1px); }
.member-app .s-import-client .m-client-logo { width:26px; height:26px; border-radius:6px; flex:0 0 auto; }
.member-app .s-import-client>span { font-size:11px; line-height:1.4; white-space:normal; overflow-wrap:anywhere; text-overflow:clip; overflow:visible; }
.s-share { display:flex; align-items:center; justify-content:center; gap:18px; padding:18px; border:1px solid var(--s-line); border-radius:6px; background:linear-gradient(135deg,var(--s-purple-soft),var(--s-surface)); color:var(--s-purple); }
.s-share-icon { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:42px; height:42px; border:0; border-radius:0; }
.s-share-icon .m-icon { width:26px; height:26px; }
.member-app .s-share h2 { font-size:18px; font-weight:550; line-height:1.5; }
.s-share-action { display:inline-flex; align-items:center; min-height:44px; padding:8px 0; color:var(--s-purple)!important; font-size:12px; line-height:1.4; }
.s-share-action:hover { text-decoration:underline; }
.s-empty-line { padding:16px 0; font-size:12px; color:var(--s-muted); }
.s-devices { padding:14px 20px 6px; }
.s-device-list { display:grid; gap:0; }
.s-device-row { display:flex; align-items:center; gap:16px; padding:12px 0; border-top:1px solid var(--s-line); }
.s-device-row:first-child { border-top:0; }
.s-device-icon { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:40px; height:40px; border-radius:4px; background:transparent; color:var(--s-jade); --os-face:var(--s-jade-soft); }
.s-device-icon .m-icon { width:23px; height:23px; }
.s-device-copy { display:flex; align-items:baseline; flex:1; gap:24px; }
.member-app .s-device-copy h3 { min-width:85px; font-size:14px; line-height:1.5; font-weight:550; }
.member-app .s-device-copy p { font-size:11px; color:var(--s-muted); overflow-wrap:anywhere; }
.s-device-action { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; min-height:44px; max-width:100%; padding:8px 14px; border:1px solid var(--s-line); border-radius:8px; color:var(--s-jade)!important; font-size:11px; line-height:1.5; transition:background 160ms; }
.s-device-action:hover { background:var(--s-jade-soft); }
.s-overview .m-api-pagination { padding:12px 0; }
.s-overview :is(button,a):focus-visible,.s-device-list a:focus-visible { outline:2px solid var(--s-jade); outline-offset:3px; }
.s-overview :is(button,a):active:not(:disabled),.s-device-list a:active { transform:scale(.98); }
@media(max-width:1099px) {
  .s-service-workspace { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); }
  .s-service,.s-usage { padding:18px; }
  .s-service-actions { gap:6px; }
  .member-app .s-action { padding:10px; font-size:11px; }
  .s-connection-tools { grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); }
  .s-import,.s-share { padding:18px; }
  .s-share { gap:12px; }
  .s-share-icon { width:40px; height:40px; }
}
@media(max-width:767px) {
  .s-overview { gap:12px; }
  .s-service-workspace,.s-connection-tools { grid-template-columns:minmax(0,1fr); gap:12px; }
  .s-service,.s-usage,.s-import,.s-share,.s-devices { padding:16px; border-radius:8px; }
  .member-app .s-service h2 { margin:16px 0; font-size:26px; }
  .s-service-facts { gap:12px; }
  .s-service-facts dd { font-size:14px; }
  .s-service-actions { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); margin-top:18px; }
  .s-service-actions .s-action:last-child { grid-column:1/-1; }
  .s-service-actions .s-action { font-size:12px; }
  .s-usage-total { margin:6px 0 16px; }
  .s-usage-total strong { font-size:30px; }
  .s-usage-details { margin-top:16px!important; padding-top:14px; }
  .s-module-heading h2 { font-size:14px!important; }
  .member-app .s-inline-action { font-size:11px; }
  .s-import-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px; }
  .member-app .s-import-client { gap:8px; padding:8px; }
  .s-share { justify-content:flex-start; gap:14px; }
  .s-share>div { display:flex; align-items:center; justify-content:space-between; flex:1; gap:12px; flex-wrap:wrap; }
  .member-app .s-share h2 { font-size:15px; }
  .s-share-action { font-size:11px; }
  .s-devices { padding-bottom:2px; }
  .s-device-row { gap:10px; padding:12px 0; }
  .s-device-copy { display:grid; gap:2px; }
  .member-app .s-device-copy h3 { min-width:0; font-size:13px; }
  .member-app .s-device-copy p { font-size:10px; }
  .s-device-action { padding:8px 10px; font-size:10px; max-width:95px; }
  .s-device-icon { width:36px; height:36px; border-radius:8px; }
  .s-device-icon .m-icon { width:19px; height:19px; }
}
@media(prefers-reduced-motion:reduce) { .s-overview :is(button,a),.s-device-list a { transition:none; } }
.member-app :is(.s-service h2,.s-module-heading h2,.s-share h2,.s-device-copy h3) { font-family:"Songti SC","SimSun","Noto Serif SC",serif; letter-spacing:.035em; }