.system-d-page{background:var(--bg,#f7f8fa)}
.sd-hero{padding-bottom:54px}
.sd-hero h1{max-width:none}
.sd-status{display:inline-flex;align-items:center;gap:9px;margin-top:24px;padding:8px 12px;border:1px solid var(--line,#dfe3e8);border-radius:999px;background:rgba(255,255,255,.72);font:500 12px/1.2 var(--mono,'Roboto Condensed',Arial Narrow,sans-serif);color:var(--muted,#687078)}
.sd-pulse{width:7px;height:7px;border-radius:50%;background:#ff7e1b;box-shadow:none;animation:sdPulse 1.8s infinite}
.sd-status.is-ready .sd-pulse{background:#38a169;animation:none}
@keyframes sdPulse{70%{box-shadow:none;}100%{box-shadow:none;}}
.sd-index{padding-top:34px;padding-bottom:34px;border-bottom:1px solid var(--line,#dfe3e8)}
.sd-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line,#dfe3e8);border-radius:16px;overflow:hidden;background:#fff}
.sd-summary>div{padding:20px 22px;border-right:1px solid var(--line,#dfe3e8)}.sd-summary>div:last-child{border-right:0}.sd-summary b{display:block;font:700 28px/1 var(--display,'Montserrat',sans-serif)}.sd-summary span{display:block;margin-top:7px;color:var(--muted,#687078);font-size:13px}
.sd-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.sd-jump a{padding:8px 11px;border:1px solid var(--line,#dfe3e8);border-radius:999px;background:#fff;color:inherit;font:500 12px/1 var(--mono,'Roboto Condensed',Arial Narrow,sans-serif);text-decoration:none}.sd-jump a:hover{border-color:#ff7e1b}
.sd-group{scroll-margin-top:82px}.sd-group:nth-child(even){background:var(--surface-soft,#f1f3f5)}
.sd-group-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:26px}.sd-group-count{font:500 12px/1 var(--mono,'Roboto Condensed',Arial Narrow,sans-serif);color:var(--muted,#687078)}
.sd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.sd-item{min-width:0;border:1px solid var(--line,#dfe3e8);border-radius:18px;background:#fff;overflow:hidden;box-shadow:none;}
.sd-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 13px;border-bottom:1px solid var(--line,#dfe3e8);background:#fafbfc;font:500 10px/1.35 var(--mono,'Roboto Condensed',Arial Narrow,sans-serif);color:var(--muted,#687078)}.sd-meta a{color:inherit;text-decoration:none}.sd-meta a:hover{color:#ff7e1b}.sd-signature{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:64%}
.sd-preview{position:relative;min-height:92px;padding:24px;overflow:auto;isolation:isolate}.sd-preview>*{max-width:100%}.sd-preview [id]{scroll-margin:0}.sd-preview a,.sd-preview button,.sd-preview input,.sd-preview textarea,.sd-preview select{pointer-events:none}.sd-preview .container{width:100%;max-width:none;padding:0}.sd-preview .sec,.sd-preview .hero,.sd-preview .band{padding:22px}.sd-preview .hd,.sd-preview .ft{position:static}.sd-preview .grid{margin-top:0}.sd-preview .card{min-height:unset}.sd-preview .form{max-width:none}.sd-preview .decision-flow-scene{position:relative;height:260px;inset:auto;background:#151715}.sd-preview .v7-motion-field{position:absolute;inset:0;width:100%;height:100%}
.sd-empty{padding:32px;border:1px dashed var(--line,#dfe3e8);border-radius:16px;color:var(--muted,#687078)}
@media(max-width:900px){.sd-grid{grid-template-columns:1fr}.sd-summary{grid-template-columns:1fr}.sd-summary>div{border-right:0;border-bottom:1px solid var(--line,#dfe3e8)}.sd-summary>div:last-child{border-bottom:0}.sd-group-head{align-items:flex-start;flex-direction:column}.sd-preview{padding:18px}}
.sd-token-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sd-token{border:1px solid var(--line,#dfe3e8);border-radius:14px;background:#fff;overflow:hidden}
.sd-swatch{height:82px;border-bottom:1px solid var(--line,#dfe3e8)}
.sd-token-copy{padding:12px}.sd-token-copy b{display:block;font:600 12px/1.3 var(--mono,'Roboto Condensed',Arial Narrow,sans-serif);overflow-wrap:anywhere}.sd-token-copy span{display:block;margin-top:5px;color:var(--muted-foreground,#687078);font:400 11px/1.45 var(--mono,'Roboto Condensed',Arial Narrow,sans-serif);overflow-wrap:anywhere}
.sd-type-list{display:grid;gap:12px}.sd-type-sample{padding:20px;border:1px solid var(--line,#dfe3e8);border-radius:14px;background:#fff}.sd-type-sample small{display:block;margin-bottom:10px;color:var(--muted-foreground,#687078);font:500 10px/1 var(--mono,'Roboto Condensed',Arial Narrow,sans-serif)}
.sd-icon-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.sd-icon-item{min-height:110px;padding:14px;border:1px solid var(--line,#dfe3e8);border-radius:14px;background:#fff;display:grid;place-items:center;text-align:center}.sd-icon-item svg{width:32px;height:32px;margin-bottom:9px}.sd-icon-item code{display:block;max-width:100%;font:400 9px/1.35 var(--mono,'Roboto Condensed',Arial Narrow,sans-serif);overflow-wrap:anywhere}
.sd-shadow-status{padding:22px;border:1px solid var(--line,#dfe3e8);border-radius:14px;background:#fff}.sd-shadow-status strong{display:block;font:700 22px/1.2 var(--display,'Montserrat',sans-serif)}.sd-shadow-status p{margin:8px 0 0;color:var(--muted-foreground,#687078)}
@media(max-width:900px){.sd-token-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sd-icon-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.sd-token-grid,.sd-icon-grid{grid-template-columns:1fr 1fr}}
.sd-token-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sd-token-card,.sd-color-card{min-width:0;border:1px solid var(--line,#dfe3e8);border-radius:16px;background:#fff;overflow:hidden}
.sd-font-card{padding:18px}.sd-font-card span{display:block;color:var(--muted,#687078);font:500 10px/1.4 var(--mono);word-break:break-word}.sd-font-card strong{display:block;margin-top:18px;font-size:30px;line-height:1}.sd-font-card p{margin:10px 0 0;font-size:14px}
.sd-color-card i{display:block;height:76px;border-bottom:1px solid var(--line,#dfe3e8)}.sd-color-card code{display:block;padding:10px;font:500 10px/1.35 var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-icon-preview{display:grid;place-items:center;min-height:110px;padding:22px}.sd-icon-preview svg{width:36px;height:36px;max-width:100%;color:var(--foreground)}.sd-symbol{font-size:32px;line-height:1}
.sd-clean{grid-column:1/-1;border-color:#b9dfc6;background:#f2fbf5;color:#176b38}
@media(max-width:900px){.sd-token-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.sd-token-grid{grid-template-columns:1fr}}