.m3-app { color:#243d50;min-width:0; }
.m3-head { display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:15px; }.m3-head small { color:#718b9e;letter-spacing:.1em; }.m3-head h1 { margin:6px 0 0; }.m3-head h1 span { color:#6d8397;font-weight:400;margin-left:10px; }.m3-head-actions { display:flex;align-items:center;gap:7px; }.m3-live { color:#437d6c;margin-right:8px; }
.m3-app button,.m3-app select,.m3-app input:not([type=checkbox]):not([type=range]) { border:1px solid #d5e0e9;background:#fff;color:#24465e;padding:8px 10px;border-radius:7px; }.m3-app button { cursor:pointer; }.m3-app button:hover { background:#edf5fa;border-color:#9bbad0; }.m3-app button.active { background:#173f5d;border-color:#173f5d;color:white; }.m3-app button:disabled { opacity:.4;cursor:default; }.m3-app button:focus-visible,.m3-app input:focus-visible,.m3-app select:focus-visible { outline:2px solid #368ab7;outline-offset:2px; }
.m3-toolbar { display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:10px; }.m3-presets,.m3-tools { display:flex;gap:5px; }.m3-toolbar label { display:flex;gap:6px;align-items:center; }.m3-tools { margin-left:auto; }
.m3-work { display:grid;grid-template-columns:minmax(0,1fr) 320px;height:calc(100vh - 245px);min-height:420px;border:1px solid #cbd9e4;border-radius:12px;overflow:hidden;background:#edf2f5; }.m3-stage { position:relative;min-width:0;overflow:hidden; }#m3-canvas { position:absolute;inset:0; }#m3-canvas canvas { display:block;width:100%;height:100%;touch-action:none;outline:none; }#m3-canvas canvas:focus-visible { outline:2px solid #489dc7;outline-offset:-2px; }
.m3-scene-title { position:absolute;top:16px;left:16px;display:flex;flex-direction:column;gap:5px;padding:10px 13px;border:1px solid #d5e1e9;border-radius:8px;background:#fffffff0;pointer-events:none;max-width:calc(100% - 175px);box-shadow:0 2px 12px #29475d12; }.m3-scene-title span { color:#667e91; }.m3-badge { position:absolute;top:16px;right:14px;background:#173f5d;color:white;border-radius:7px;padding:9px 11px;pointer-events:none; }.m3-zoom { position:absolute;right:14px;top:66px;display:grid;gap:5px; }.m3-zoom button { min-width:38px; }
.m3-bottom { position:absolute;bottom:13px;left:14px;max-width:calc(100% - 28px);display:flex;flex-direction:column;align-items:flex-start;gap:7px;pointer-events:none; }.m3-bottom>small { background:#fffffff0;color:#5d778c;padding:7px 10px;border-radius:6px; }.m3-legend { display:flex;flex-wrap:wrap;gap:7px 12px;padding:9px 11px;background:#fffffff0;border:1px solid #d8e3eb;border-radius:7px; }.m3-legend span { display:flex;align-items:center;gap:5px; }.m3-legend i { width:11px;height:11px;border:1px solid #0002;border-radius:2px; }
.m3-work:fullscreen { width:100vw;height:100vh;max-height:none;border-radius:0; }
.m3-inspector { min-height:0;display:flex;flex-direction:column;background:#fff;border-left:1px solid #d7e1e9; }.m3-inspector>nav { display:flex;gap:5px;padding:10px;border-bottom:1px solid #e3eaf0; }.m3-inspector>nav button { flex:1; }.m3-side { padding:16px;overflow:auto;flex:1;min-height:0; }.m3-intro { margin:8px 0 16px; }.m3-intro small { color:#7890a2;letter-spacing:.07em; }.m3-intro h2 { margin:7px 0 10px; }.m3-intro p,.m3-note { color:#6d8193;line-height:1.65; }.m3-side h3 { margin:20px 0 10px; }.m3-stats { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:15px 0; }.m3-stats>div { background:#f2f6f9;border-radius:8px;padding:13px 10px;color:#698192; }.m3-stats b { display:block;color:#264f6c;margin-bottom:4px; }.m3-field { display:grid;gap:7px;margin:15px 0;color:#657f93; }.m3-field select { width:100%; }
.m3-list { display:grid;gap:6px; }.m3-list button { text-align:left; }.m3-item { display:flex;width:100%;align-items:center;gap:8px;text-align:left; }.m3-item>i { width:10px;min-width:10px;height:10px;border-radius:50%; }.m3-item span { flex:1;min-width:0; }.m3-item b { display:block;font-weight:500; }.m3-item small { display:block;color:#7890a2;margin-top:4px; }.m3-item em { margin-left:auto;font-style:normal;color:#7691a5; }.m3-fact { display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #e7edf2; }.m3-fact>span { color:#6e8495; }.m3-fact strong { text-align:right;font-weight:600;overflow-wrap:anywhere; }
.m3-app .m3-source { display:block;border:0;padding:3px 0;text-align:left;color:#397fa8;background:transparent;overflow-wrap:anywhere;line-height:1.5; }.m3-fold { border-bottom:1px solid #e2eaf0;padding:12px 0; }.m3-fold summary { cursor:pointer;line-height:1.6; }.m3-fold p { line-height:1.6;color:#667e91; }.m3-strata>div { display:flex;gap:9px;border-bottom:1px solid #e4ecf2;padding:11px 0; }.m3-strata>div>i { width:9px;min-width:9px;border-radius:3px; }.m3-strata article { min-width:0; }.m3-strata span,.m3-strata small { display:block;color:#6b8192;margin-top:5px; }.m3-alert { color:#8d6929;line-height:1.6;background:#fff8e9;padding:9px;border-radius:6px; }.m3-app .m3-full { width:100%;background:#eaf4fa;color:#1c5d83;border-color:#bad4e4;margin:12px 0; }
.m3-table { overflow:auto;margin:10px 0; }.m3-table table { width:100%;border-collapse:collapse; }.m3-table th,.m3-table td { padding:7px;text-align:left;border-bottom:1px solid #e0e8ee; }.m3-table th { background:#f1f6f9;white-space:nowrap; }.m3-search,#m3-dataset { width:100%;margin-bottom:10px; }.m3-doc-item { display:flex;gap:10px;text-align:left;width:100%;margin:6px 0; }.m3-doc-item>span { color:#5e849e;padding-top:2px;min-width:28px; }.m3-doc-item b { display:block;line-height:1.5;font-weight:500; }.m3-doc-item small { display:block;color:#8294a2;line-height:1.5;margin-top:4px; }.m3-finding { border-bottom:1px solid #e4ebf1;padding:12px 0; }.m3-finding p { line-height:1.6;color:#647c8e; }
.m3-layers { position:absolute;top:70px;right:62px;z-index:5;background:#fffffff5;border:1px solid #cddce8;border-radius:9px;padding:16px;box-shadow:0 8px 35px #23476426;width:230px; }.m3-layers label { display:flex;align-items:center;gap:8px;margin:10px 0; }.m3-layers input[type=range] { width:100%; }.m3-layers input { accent-color:#286e96; }.m3-layers[hidden],.m3-drawer[hidden],.m3-error[hidden] { display:none; }
.m3-drawer { position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;background:white; }.m3-drawer>header { display:flex;justify-content:space-between;gap:14px;align-items:center;padding:12px;border-bottom:1px solid #d6e1e9; }.m3-drawer>header>div:first-child { display:grid;gap:5px;min-width:0; }.m3-drawer>header small { color:#678298;overflow-wrap:anywhere; }.m3-drawer>header>div:last-child { display:flex;gap:4px;flex-wrap:wrap; }.m3-doc-body { flex:1;overflow:auto;min-height:0;background:#e9eff4; }.m3-doc-image { display:block;width:100%;cursor:zoom-in; }.m3-doc-image.zoomed { width:auto;max-width:none;cursor:zoom-out; }.m3-doc-body iframe { width:100%;height:100%;border:0; }.m3-doc-body pre { white-space:pre-wrap;overflow-wrap:anywhere;padding:20px;line-height:1.7; }.m3-error { position:absolute;left:20px;right:20px;top:100px;background:white;color:#a6403d;padding:20px;border-radius:8px; }
.m3-footer { display:flex;align-items:center;justify-content:space-between;gap:12px;color:#6c8396;padding:10px 2px; }.m3-footer>span:first-child { color:#5e7d88; }
@media(max-width:1450px){.m3-work{height:calc(100vh - 290px);}}
@media(max-width:1100px){.m3-work{grid-template-columns:minmax(0,1fr) 285px;}.m3-head{align-items:flex-start;}.m3-head-actions{flex-wrap:wrap;justify-content:flex-end;}.m3-live{display:none;}.m3-tools{margin-left:0;}.m3-scene-title{max-width:calc(100% - 165px);}.m3-footer{flex-wrap:wrap;}}
.model-shell { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.model-shell > * { min-width: 0; }
.model-banner { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-5); border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.model-banner h2 { margin: 0 0 var(--sp-2); }
.model-banner p { margin: 0; max-width: 950px; color: var(--muted); line-height: 1.6; }
.model-status { display: inline-flex; align-items: center; gap: var(--sp-2); border-radius: 7px; padding: 7px 11px; background: #fff4db; color: #775516; white-space: nowrap; }
.model-status.pass { background: #e8f5ee; color: #21643d; }
.model-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sp-3); }
.model-metric { border: 1px solid var(--border); background: #fff; border-radius: 12px; padding: var(--sp-4); }
.model-metric strong { display: block; margin: var(--sp-2) 0; color: #203e59; }
.model-metric small { display: block; color: var(--muted); line-height: 1.5; }
.model-toolbar, .model-legend, .model-downloads { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }
.model-toolbar { margin-bottom: var(--sp-3); }
.model-toolbar label { display: inline-flex; align-items: center; gap: var(--sp-2); }
.model-shell select, .model-shell button, .model-downloads a { border: 1px solid var(--border); border-radius: 6px; background: #fff; padding: 7px 10px; color: #24445e; }
.model-shell button:not(:disabled), .model-shell select { cursor: pointer; }
.model-shell button:disabled { color: #768391; background: #f2f4f6; cursor: not-allowed; }
.model-legend { margin: var(--sp-3) 0; color: #526477; }
.model-legend i { display: inline-block; width: 12px; height: 12px; margin-right: 5px; border: 1px solid #70809055; border-radius: 2px; }
.model-chart-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; background: #f9fbfd; }
.model-chart-scroll svg { display: block; }
.model-chart-scroll svg text { fill: #496174; }
.model-chart-note { margin: var(--sp-3) 0 0; line-height: 1.6; color: #627589; }
.model-detail { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--sp-3); margin: var(--sp-3) 0; }
.model-detail div { background: #f5f8fb; padding: var(--sp-3); border-radius: 6px; }
.model-detail b { display: block; margin-bottom: var(--sp-1); }
.model-source { color: #38699a; white-space: normal; overflow-wrap: anywhere; }
.model-shell .table-wrap { max-height: 500px; overflow: auto; }
.model-shell td { vertical-align: top; }
.model-check { color: #805c1b; }
.model-report details { padding: var(--sp-3) 0; }
.model-report summary { cursor: pointer; color: #24445e; padding: var(--sp-2) 0; }
.model-empty { padding: var(--sp-5); background: #f5f8fb; border-radius: 8px; color: #647487; line-height: 1.7; }
@media (max-width: 1100px) { .model-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } .model-banner { flex-direction: column; } }