:root{--ink:#12283e;--cyan:#21c6bd;--blue:#2563eb;--soft:#f4f8fc;--rail:#d8e3ef}
body{background:linear-gradient(180deg,#eff5fb 0,#f7f9fc 520px,#f5f8fb 100%);color:var(--ink)}
.shell{max-width:1480px}.raid-intro{align-items:center;background:radial-gradient(circle at 87% 20%,#1c6684 0,transparent 33%),linear-gradient(120deg,#102139,#102a47 60%,#133e5a);color:#fff;border-radius:28px;padding:42px 46px;margin:0 0 18px;overflow:hidden;position:relative;box-shadow:0 22px 50px #112e4a20}.raid-intro h1{font-size:clamp(34px,4.5vw,60px);margin:14px 0 18px}.raid-intro .eyebrow{color:#72e1d8}.raid-intro .description{color:#cbdbe8;max-width:760px;font-size:16px}.intro-mark{width:194px;height:194px;flex:none;border:1px solid #5bafc464;border-radius:34px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#30cbbe24,#c0edff08);box-shadow:inset 0 0 40px #77e5da19;transform:rotate(-7deg)}.intro-mark span{font-size:49px;letter-spacing:7px;font-weight:900;color:#8dece5}.intro-mark small{font-size:9px;letter-spacing:2px;color:#b2d9e6}
.notice{border:1px solid #cfe2ed;background:#eaf5f8;border-radius:16px;padding:14px 18px;color:#35576a;line-height:1.6;font-size:14px}.notice strong{color:#18445c}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;padding:20px 2px}.toolbar>span{font-size:13px;color:#5c7489}.toolbar-actions{display:flex;gap:8px;flex-wrap:wrap}.toolbar-actions button,.toolbar-actions .button{min-height:38px;padding:8px 13px;font-size:13px}.import-button{position:relative;overflow:hidden}.import-button input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.workspace{display:grid;grid-template-columns:minmax(310px,390px) minmax(0,1fr);gap:20px;align-items:start}.results{display:grid;gap:20px}.panel{border-color:#dce7f1;box-shadow:0 14px 42px #12345b0a;border-radius:22px}.panel-heading{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:20px}.panel-heading h2{font-size:23px;margin:6px 0 0}.section-kicker{color:#168e9b;font-weight:800;letter-spacing:2px;font-size:10px}.local-tag{border:1px solid #b9e6dd;background:#eafbf6;color:#158370;border-radius:999px;padding:6px 10px;font-size:12px;white-space:nowrap}
.level-picker{padding:0;border:0;margin:0}.level-picker legend{font-size:14px;font-weight:750;margin-bottom:10px}.level-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.level-options label{position:relative}.level-options input{position:absolute;opacity:0;width:1px;height:1px}.level-options span{display:flex;align-items:center;justify-content:center;min-height:43px;background:#f7fafd;border:1px solid #d5e2ec;border-radius:11px;font-weight:750;font-size:13px;color:#426078;cursor:pointer;transition:.15s ease}.level-options input:checked+span{background:#e6fbf7;border-color:#25bba8;color:#096e71;box-shadow:inset 0 0 0 1px #25bba8}.level-options input:focus-visible+span{outline:3px solid #82b4ed;outline-offset:2px}.level-rule{font-size:12px;min-height:18px;color:#668096;margin:10px 0 22px}.setting{border-top:1px solid #e9f0f5;padding:19px 0 14px}.setting-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.setting label{font-weight:700;color:#2c465c}.setting label small{font-weight:400;color:#748a9d}.setting output{color:#0b7f88;font-size:19px;font-weight:850;font-variant-numeric:tabular-nums}.setting input[type=range],.advanced input[type=range]{width:100%;margin:14px 0 2px;accent-color:#16b7ae}.range-ends{display:flex;justify-content:space-between;color:#8ba0b1;font-size:11px}.setting.compact{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px}.setting select{width:116px}.advanced{border-top:1px solid #e9f0f5;padding-top:17px;font-size:13px}.advanced summary{font-weight:700;cursor:pointer;color:#315a72}.advanced label{margin-top:18px;color:#526b7f}.advanced label strong{color:#147b85}.advanced p{color:#698195;line-height:1.6}.presets{border-top:1px solid #e9f0f5;padding-top:19px;margin-top:16px}.presets>span{font-size:12px;font-weight:750;color:#6f8396}.presets>div{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}.presets button{font-size:12px;padding:7px 10px;min-height:34px;background:#f6fafe}
.precise-input{flex-direction:row;justify-content:space-between;align-items:center;font-size:12px;color:#6f8396!important;margin-top:9px}.precise-input span{display:inline-flex;align-items:center;gap:5px}.precise-input input{width:94px;padding:6px 8px;text-align:right;font-size:13px}.capacity-bar .unavailable{background:repeating-linear-gradient(45deg,#e6b7b1,#e6b7b1 8px,#fae5e1 8px,#fae5e1 16px)}
.state-badge{font-size:12px;padding:7px 11px;border-radius:999px;font-weight:750;white-space:nowrap}.state-badge.healthy{background:#e9f8f3;color:#087e65}.state-badge.degraded{background:#fff4d9;color:#9a5a05}.state-badge.unavailable,.state-badge.invalid{background:#ffe9e8;color:#b2363a}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.metric{border:1px solid #e3eaf1;background:#f8fafd;border-radius:16px;padding:17px 16px;min-height:120px;display:flex;flex-direction:column}.metric.primary-metric{background:linear-gradient(135deg,#e7fbf8,#ecf5ff);border-color:#b9e8e1}.metric span{font-size:12px;color:#698196}.metric strong{font-size:clamp(23px,2.3vw,32px);line-height:1.2;margin:11px 0 5px;letter-spacing:-.7px;color:#18364e;font-variant-numeric:tabular-nums}.metric.primary-metric strong{color:#087a80}.metric small{font-size:11px;color:#8497a8}.bar-heading{display:flex;justify-content:space-between;gap:10px;margin:25px 0 11px;font-size:13px}.bar-heading span{font-size:12px;color:#6b8295}.capacity-bar{height:30px;width:100%;display:flex;overflow:hidden;border-radius:9px;background:#edf2f7}.capacity-bar div{height:100%;min-width:0;transition:width .25s ease}.capacity-bar .data{background:#18aa9c}.capacity-bar .reserve{background:#75d9c4}.capacity-bar .overhead{background:#8297b5}.capacity-bar .spare{background:#cad7e5}.legend{display:flex;gap:17px;flex-wrap:wrap;margin-top:13px;font-size:11px;color:#667f93}.legend span{display:flex;align-items:center;gap:6px}.key{width:9px;height:9px;border-radius:3px;display:inline-block}.key.data{background:#18aa9c}.key.reserve{background:#75d9c4}.key.overhead{background:#8297b5}.key.spare{background:#cad7e5}.small-note{font-size:12px;color:#6d8498;margin:16px 0 0;line-height:1.65}
.simulation-help{font-size:13px;color:#6d8498;margin:-3px 0 18px}.disk-grid{display:flex;flex-wrap:wrap;gap:10px}.disk{min-width:74px;width:calc((100% - 60px)/7);max-width:104px;min-height:104px;padding:11px 7px;border:1px solid #cbdbea;border-radius:12px;background:linear-gradient(180deg,#f5faff,#eaf2f9);display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;color:#31526d;transition:transform .15s ease,border-color .15s ease,background .15s ease}.disk:hover{transform:translateY(-3px);border-color:#28b9ad}.disk .disk-icon{width:37px;height:43px;border:2px solid #93aaba;background:#dce8f1;border-radius:5px;position:relative;box-shadow:inset 0 -5px #bdcede}.disk .disk-icon:after{content:'';position:absolute;bottom:6px;right:5px;width:5px;height:5px;border-radius:50%;background:#1fb89f}.disk strong{font-size:12px}.disk small{font-size:10px;color:#7d92a5}.disk.failed{background:#fff0ee;border-color:#ef9c96;color:#ad3233}.disk.failed .disk-icon{border-color:#d66e69;background:#f8c9c3}.disk.failed .disk-icon:after{background:#d43939}.disk.spare{background:#f6f8fb;border-style:dashed;cursor:default;opacity:.7}.disk.spare .disk-icon:after{background:#a1b4c4}.disk.spare:hover{transform:none;border-color:#cbdbea}.fault-result{margin-top:21px;border-radius:13px;padding:14px 16px;font-size:13px;line-height:1.6;background:#eaf8f3;border:1px solid #c8ebdd;color:#1e6d5b}.fault-result.degraded{background:#fff8e8;border-color:#efdfac;color:#815817}.fault-result.unavailable,.fault-result.invalid{background:#fff0ee;border-color:#f2c0bb;color:#a73535}.fault-result strong{display:block;font-size:16px;margin-bottom:2px}.simulation .panel-heading button{font-size:12px;min-height:34px;padding:6px 11px}
.disk.spare.rebuilding{opacity:1;background:#fff8e8;border-color:#e6ba61;border-style:solid;color:#805517}.disk.spare.rebuilding .disk-icon:after{background:#e2a02c}.disk.spare.complete{opacity:1;background:#e9f8f3;border-color:#52b99d;border-style:solid;color:#087e65}.disk.spare.complete .disk-icon:after{background:#13aa86}.state-badge.rebuilding{background:#e9f3ff;color:#165eac}.fault-result.rebuilding{background:#eff7ff;border-color:#c9def6;color:#215f97}.rebuild-flow{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}.rebuild-flow span{border:1px solid #d7e3ed;background:#f6f9fc;color:#74899d;border-radius:999px;padding:6px 10px;font-size:11px}.rebuild-flow span.active{border-color:#59bcb2;background:#e8faf5;color:#087e71;font-weight:750}.rebuild-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}.rebuild-actions p{margin:0;flex:1 1 260px}.rebuild-actions button{background:#176d99;color:#fff;border-color:#176d99;font-size:12px;min-height:36px}.rebuild-actions button:hover{background:#105b82}.rebuild-actions button:disabled{opacity:.5;cursor:not-allowed}.rebuild-actions button[hidden]{display:none}
.compare{margin-top:20px}.compare .panel-heading>span{font-size:12px;color:#8195a5;align-self:center}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:13px;min-width:650px}th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#7890a1;border-bottom:1px solid #dce6ee;padding:10px 11px}td{border-bottom:1px solid #edf1f5;padding:13px 11px;color:#486274}tbody tr:last-child td{border-bottom:0}tbody tr.current{background:#effaf7}td:first-child{font-weight:800;color:#18364c}.invalid-text{color:#a44141}.notes{margin-top:20px}.notes>div{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.notes p{font-size:12px;line-height:1.7;color:#63798c;margin:0}.notes strong{color:#27485e}.notes a{color:#126cbb}.privacy-note{text-align:center;color:#73899c;font-size:12px;line-height:1.6;margin:24px auto 0;max-width:800px}
@media(max-width:1100px){.workspace{grid-template-columns:340px minmax(0,1fr)}.disk{min-width:68px;width:calc((100% - 40px)/5)}}
@media(max-width:850px){.workspace{grid-template-columns:1fr}.controls{display:block}.intro-mark{display:none}.notes>div{grid-template-columns:1fr}.disk{width:calc((100% - 60px)/7)}}
@media(max-width:600px){.raid-intro{padding:30px 23px;border-radius:20px}.raid-intro h1{font-size:36px}.metrics{grid-template-columns:1fr}.metric{min-height:90px}.disk{min-width:64px;width:calc((100% - 30px)/4)}.panel-heading{flex-wrap:wrap}.toolbar-actions{width:100%}.toolbar-actions button,.toolbar-actions .button{flex:1}.compare{margin-top:16px}}