.ay-dd .ay-cl-ok { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.ay-dd-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 700; background: var(--cl-x); color: #fff; cursor: pointer; }
.ay-dd-btn i { color: #ffc83d; }
.ay-dd-btn:focus-visible { outline: 3px solid var(--cl-you); outline-offset: 2px; }
.ay-dd-btn[disabled] { opacity: .6; cursor: default; }
.ay-dd-cap { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; color: var(--cl-d); min-height: 2.8em; }
.ay-dd-small { margin: 6px 0 0; font-size: 12.5px; color: var(--cl-muted); }
.ay-dd-note, .ay-dd-src-note { margin: 8px 0 0; font-size: 12px; font-style: italic; color: var(--cl-muted); }
.ay-dd h3 { font-size: 24px; font-weight: 700; color: var(--cl-ink); margin: 0 0 10px; }

.ay-dd-hero { border-radius: 20px; padding: 24px 18px 18px; background: radial-gradient(120% 90% at 20% 0%, var(--cl-l), #fff 55%), #fff; border: 1px solid var(--cl-m); display: grid; gap: 14px; }
.ay-dd-1u { display: flex; align-items: stretch; height: 74px; border-radius: 8px; background: linear-gradient(180deg, #2b2e35, #1c1e23); box-shadow: 0 16px 30px rgba(20, 10, 4, .28), inset 0 1px 0 rgba(255, 255, 255, .08); overflow: hidden; }
.ay-dd-1u-ear { flex: 0 0 16px; background: linear-gradient(90deg, #3a3d45, #24262c); }
.ay-dd-1u-ear.is-l { flex-basis: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }

.ay-dd-bays { flex: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; padding: 6px 5px; }
.ay-dd-bay { position: relative; border-radius: 3px; background: repeating-linear-gradient(180deg, #30333a 0 2px, #25272d 2px 4px) top / 100% 62% no-repeat, linear-gradient(180deg, #3a3d45, #2c2f36); border: 1px solid #3c3f47; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 3px; }
.ay-dd-bay::before { content: ""; position: absolute; top: 4px; left: 4px; width: 4px; height: 4px; border-radius: 50%; background: #2fd17a; box-shadow: 0 0 4px #2fd17a; }
.ay-dd-bay b { font-size: 9px; line-height: 1; color: #9aa0ab; font-weight: 700; }
.ay-dd-bay i { position: absolute; top: 4px; right: 4px; width: 4px; height: 4px; border-radius: 50%; background: #2fd17a; box-shadow: 0 0 5px #2fd17a; animation: ay-led-act 1.2s steps(1) infinite; }
.ay-dd-bay:nth-child(2) i { animation-duration: .8s; animation-delay: .3s; } .ay-dd-bay:nth-child(3) i { animation-duration: 1.6s; animation-delay: .1s; } .ay-dd-bay:nth-child(4) i { animation-duration: 1s; animation-delay: .5s; }
.ay-dd-bay.is-empty { background: linear-gradient(180deg, #24262b, #1e2024); border-color: #303238; }
.ay-dd-bay.is-empty::before { display: none; }
.ay-dd-bay.is-empty b { color: #5d626c; }
.ay-dd-1u-panel { flex: 0 0 118px; display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto; gap: 6px 8px; align-content: center; align-items: center; padding: 0 10px; border-left: 1px solid #3c3f47; }
.ay-dd-1u-panel em { grid-column: 1 / -1; white-space: nowrap; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #d5d9e0; }
.ay-dd-pwr { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #5fd38d; box-shadow: 0 0 8px rgba(95, 211, 141, .6); }
.ay-dd-usb { width: 14px; height: 6px; border-radius: 1px; background: #15171b; box-shadow: inset 0 0 0 1px #5a5f69, inset 0 -3px 0 var(--ac-2f5fa8); }
.ay-dd-vga { width: 20px; height: 9px; border-radius: 2px 2px 5px 5px; background: #15171b; box-shadow: inset 0 0 0 1px #5a5f69; }
.ay-dd-led { width: 7px; height: 7px; border-radius: 50%; align-self: center; }
.ay-dd-1u-ear .ay-dd-led { width: 5px; height: 5px; align-self: auto; }
.ay-dd-led.is-sys { background: #6aa8ff; box-shadow: 0 0 6px #6aa8ff; animation: ay-led-beat 1.8s ease-in-out infinite; }
.ay-dd-led.is-hl { background: #2fd17a; box-shadow: 0 0 5px #2fd17a; }
.ay-dd-led.is-net { background: #ffb547; box-shadow: 0 0 6px #ffb547; animation: ay-led-act .7s steps(1) infinite; }
.ay-dd-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ay-dd-tags span { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--cl-line); font-size: 13px; font-weight: 700; color: var(--cl-ink); }
.ay-dd-tags i { color: var(--cl-a); }
.ay-dd-only { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 12px; background: var(--cl-x); color: #fff; font-weight: 700; font-size: 14px; }
.ay-dd-only i { color: var(--cl-m); }

.ay-dd-stack { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: center; }
.ay-dd-st { border-radius: 20px; padding: 20px; background: #fff; border: 1px solid var(--cl-line); display: grid; gap: 8px; }
.ay-dd-st.is-ded { border: 2px solid var(--cl-a); box-shadow: 0 16px 34px rgba(61, 23, 2, .08); background: linear-gradient(180deg, var(--cl-l), #fff 60%); }
.ay-dd-st-h { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font-size: 17px; color: var(--cl-ink); }
.ay-dd-st-h i { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--cl-l); color: var(--cl-a); }
.ay-dd-ly { padding: 12px 14px; border-radius: 10px; font-weight: 700; font-size: 14px; color: var(--cl-ink); background: #f3f5f9; border: 1px solid var(--cl-line); }
.ay-dd-ly small { display: block; font-weight: 600; font-size: 12px; color: var(--cl-muted); }
.ay-dd-ly.is-app { background: #e8efff; border-color: #cddcff; }
.ay-dd-ly.is-os { background: #eef8f2; border-color: #cfe9da; }
.ay-dd-ly.is-hv { background: repeating-linear-gradient(135deg, #fbe7dc 0 8px, #fff 8px 16px); border-color: var(--cl-m); color: var(--cl-d); }
.ay-dd-ly.is-none { background: none; border: 2px dashed #c4cbd8; color: var(--cl-muted); text-align: center; }
.ay-dd-ly.is-hw { background: #3a3d45; border-color: #3a3d45; color: #fff; }
.ay-dd-ly.is-hw.is-own { background: var(--cl-a); border-color: var(--cl-a); animation: ay-dd-glow 2.6s ease-in-out infinite; }
@keyframes ay-dd-glow { 50% { box-shadow: 0 0 0 6px rgba(217, 96, 15, .18); } }
.ay-dd-st p { margin: 6px 0 0; font-size: 14px; }
.ay-dd-st-vs { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--cl-x); color: #fff; font-weight: 800; font-size: 12px; }

.ay-dd-models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 30px; }
.ay-dd-m { border-radius: 20px; padding: 20px; background: #fff; border: 1px solid var(--cl-line); display: grid; gap: 12px; align-content: start; }
.ay-dd-m.is-top { border: 2px solid var(--cl-a); box-shadow: 0 16px 34px rgba(61, 23, 2, .08); }
.ay-dd-m-h span { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--cl-d); }
.ay-dd-m-h b { display: block; font-size: 20px; color: var(--cl-ink); }
.ay-dd-m-h em { font-style: normal; font-size: 13px; color: var(--cl-muted); font-weight: 600; }
.ay-dd-bar { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.ay-dd-bar label { grid-column: 1 / -1; margin: 0; font-size: 12px; font-weight: 700; color: var(--cl-muted); }
.ay-dd-bar i { position: relative; height: 12px; border-radius: 6px; background: #eef0f5; overflow: hidden; }
.ay-dd-bar i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: 6px; background: linear-gradient(90deg, var(--cl-m), var(--cl-a)); animation: ay-dd-fill 2.2s ease-out both; }
.ay-dd-bar i::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: ay-dd-shine 2.8s ease-in-out infinite; }
.ay-dd-bar em { font-style: normal; font-weight: 800; color: var(--cl-ink); font-size: 14px; min-width: 52px; text-align: right; }
@keyframes ay-dd-fill { from { width: 0; } }
@keyframes ay-dd-shine { from { transform: translateX(-120%); } to { transform: translateX(260%); } }
.ay-dd-m-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: 13px; color: var(--cl-ink); font-weight: 600; }
.ay-dd-m-l i { width: 18px; color: var(--cl-ok); }
.ay-dd-m-l li.is-no i { color: var(--cl-bad); }
.ay-dd-m > p { margin: 0; font-size: 14px; line-height: 1.55; }

.ay-dd-raid, .ay-dd-power, .ay-dd-net { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; margin: 0 0 28px; padding: 26px; border-radius: 22px; background: #fff; border: 1px solid var(--cl-line); box-shadow: 0 16px 34px rgba(61, 23, 2, .06); }
.ay-dd-raid-t p, .ay-dd-pt p, .ay-dd-net-t p { font-size: 15px; line-height: 1.7; margin: 0 0 12px; }
.ay-dd-raid-v { border-radius: 18px; padding: 18px; background: #1b1512; color: #e9dfd7; display: grid; gap: 14px; }
.ay-dd-ctl { justify-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; background: var(--cl-a); color: #fff; font-weight: 800; font-size: 13px; }
.ay-dd-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ay-dd-pair { border: 1px dashed #5b4a3e; border-radius: 12px; padding: 10px; display: grid; gap: 8px; }
.ay-dd-pair > span { font-size: 11px; font-weight: 800; color: #c9b8ab; text-transform: uppercase; letter-spacing: .05em; }
.ay-dd-disk { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; background: #2c2420; border: 1px solid #47392f; transition: background .4s, border-color .4s; }
.ay-dd-disk i { width: 7px; height: 7px; border-radius: 50%; background: #2fd17a; box-shadow: 0 0 6px #2fd17a; animation: ay-led-act 1s steps(1) infinite; }
.ay-dd-disk:nth-child(3) i { animation-delay: .3s; } .ay-dd-pair + .ay-dd-pair .ay-dd-disk i { animation-duration: 1.4s; }
.ay-dd-disk b { font-size: 12.5px; color: #fff; }
.ay-dd-disk em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; color: #9fd8b8; }
.ay-dd-disk::after { content: ""; position: absolute; left: 30px; right: 60px; bottom: 4px; height: 2px; background: repeating-linear-gradient(90deg, #ffb547 0 5px, transparent 5px 10px); animation: ay-dd-write .9s linear infinite; opacity: .8; }
@keyframes ay-dd-write { to { background-position: 10px 0; } }
.ay-dd-disk.is-fail { background: #3a1616; border-color: var(--cl-bad); }
.ay-dd-disk.is-fail i { background: var(--cl-bad); box-shadow: 0 0 8px var(--cl-bad); animation: ay-led-act .4s steps(1) infinite; }
.ay-dd-disk.is-fail::after, .ay-dd-disk.is-new::after { display: none; }
.ay-dd-disk.is-fail em { color: #ff9b9b; }
.ay-dd-disk.is-new { border-color: #ffb547; }
.ay-dd-disk.is-new i { background: #ffb547; box-shadow: 0 0 6px #ffb547; }
.ay-dd-rebuild { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: 12px; font-weight: 700; color: #c9b8ab; }
.ay-dd-rebuild i { height: 8px; border-radius: 4px; background: #3a2e27; position: relative; overflow: hidden; }
.ay-dd-rebuild i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: #ffb547; border-radius: 4px; transition: width .25s linear; }
.ay-dd-rebuild em { font-style: normal; min-width: 34px; text-align: right; }
.ay-dd-raid-v .ay-dd-note { color: #9c8d82; }

.ay-dd-pv { border-radius: 18px; padding: 18px; background: linear-gradient(180deg, var(--cl-l), #fff); border: 1px solid var(--cl-m); }
.ay-dd-row, .ay-dd-wires { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.ay-dd-row > * { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 8px; border-radius: 10px; font-weight: 800; font-size: 13px; color: #fff; transition: background .4s, box-shadow .4s; }
.ay-dd-row > span:empty { background: none; padding: 0; }
.ay-dd-feed.is-a, .ay-dd-u.is-a, .ay-dd-psu.is-a { background: var(--cl-a); }
.ay-dd-feed.is-b, .ay-dd-u.is-b, .ay-dd-psu.is-b { background: var(--ac-2f5fe0); }
.ay-dd-host { background: var(--cl-x); position: relative; }
.ay-dd-host::before, .ay-dd-host::after { content: ""; position: absolute; top: 50%; width: 14px; height: 3px; transform: translateY(-50%); }
.ay-dd-host::before { right: 100%; background: var(--cl-a); } .ay-dd-host::after { left: 100%; background: var(--ac-2f5fe0); }
.ay-dd-gen { position: relative; background: #5f6b80; }
.ay-dd-gen::before, .ay-dd-gen::after { content: ""; position: absolute; top: 50%; width: 14px; border-top: 3px dashed #9aa3b5; }
.ay-dd-gen::before { right: 100%; } .ay-dd-gen::after { left: 100%; }
.ay-dd-wires { height: 30px; }
.ay-dd-wires i { justify-self: center; width: 3px; height: 100%; background: repeating-linear-gradient(180deg, var(--cl-a) 0 6px, transparent 6px 11px); animation: ay-dd-flowv .8s linear infinite; }
.ay-dd-wires i.w-b { background: repeating-linear-gradient(180deg, var(--ac-2f5fe0) 0 6px, transparent 6px 11px); }
@keyframes ay-dd-flowv { to { background-position: 0 11px; } }
.ay-dd-power.is-cut .ay-dd-feed.is-a, .ay-dd-power.is-cut .ay-dd-u.is-a, .ay-dd-power.is-cut .ay-dd-psu.is-a { background: #b7bfcc; }
.ay-dd-power.is-cut .ay-dd-wires i.w-a { background: #d4d9e2; animation: none; }
.ay-dd-power.is-cut .ay-dd-host::before { background: #d4d9e2; }
.ay-dd-power.is-cut .ay-dd-wires i.w-b { width: 5px; }
.ay-dd-power.is-cut .ay-dd-host { box-shadow: 0 0 0 4px rgba(var(--acr-2f5fe0), .25); }
.ay-dd-power.is-cut .ay-dd-btn { background: var(--cl-ok); }

.ay-dd-path { border-radius: 18px; padding: 18px; background: #1b1512; display: grid; gap: 0; }
.ay-dd-in { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ay-dd-node { display: grid; justify-items: center; gap: 2px; padding: 10px 8px; border-radius: 12px; background: #2c2420; border: 1px solid #47392f; color: #fff; text-align: center; }
.ay-dd-node i { font-size: 18px; color: var(--cl-m); }
.ay-dd-node b { font-size: 13px; }
.ay-dd-node small { font-size: 11px; color: #c9b8ab; font-weight: 600; }
.ay-dd-node.is-world i { color: #ff9b9b; }
.ay-dd-node.is-shield { background: #13361f; border-color: #2aa874; }
.ay-dd-node.is-shield i { color: #7dffb0; animation: ay-led-beat 1.6s ease-in-out infinite; }
.ay-dd-lanes { display: grid; grid-template-columns: 1fr 1fr; height: 28px; }
.ay-dd-lanes i { justify-self: center; width: 3px; height: 100%; animation: ay-dd-flowv .7s linear infinite; }
.ay-dd-lanes i.l-w { background: repeating-linear-gradient(180deg, #ff6b6b 0 4px, transparent 4px 8px, #ffd27a 8px 12px, transparent 12px 16px); }
.ay-dd-lanes.is-join i.l-w { background: repeating-linear-gradient(180deg, #7dffb0 0 6px, transparent 6px 11px); }
.ay-dd-lanes i.l-t { background: repeating-linear-gradient(180deg, #7dffb0 0 6px, transparent 6px 11px); }
.ay-dd-own { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 26px 12px 12px; border: 2px solid var(--cl-a); border-radius: 14px; }
.ay-dd-own-t { position: absolute; top: -12px; left: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--cl-a); color: #fff; font-size: 12px; font-weight: 800; }
.ay-dd-node.is-srv { background: var(--cl-a); border-color: var(--cl-a); }
.ay-dd-node.is-srv i { color: #fff; }
.ay-dd-net-t p strong { color: var(--cl-x); }

.ay-dd-dc { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 24px; align-items: center; margin-bottom: 28px; }
.ay-dd-rings { display: grid; gap: 10px; }
.ay-dd-rings .r { border-radius: 18px; padding: 22px 10px 10px; position: relative; border: 2px solid; }
.ay-dd-rings .r > span { position: absolute; top: 4px; left: 12px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; }
.ay-dd-rings .r6 { border-color: #f1d3bf; background: #fffaf6; } .ay-dd-rings .r6 > span { color: #b5865f; }
.ay-dd-rings .r5 { border-color: #ecc0a0; background: #fff4ec; } .ay-dd-rings .r5 > span { color: #a87650; }
.ay-dd-rings .r4 { border-color: #e6a57a; background: #ffeee2; } .ay-dd-rings .r4 > span { color: #9a6340; }
.ay-dd-rings .r3 { border-color: #e08a52; background: #ffe6d4; } .ay-dd-rings .r3 > span { color: #8f5330; }
.ay-dd-rings .r2 { border-color: var(--cl-a); background: #ffdcc4; } .ay-dd-rings .r2 > span { color: var(--cl-d); }
.ay-dd-rings .r1 { border: 0; padding: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--cl-x); color: #fff; animation: ay-dd-glow 2.6s ease-in-out infinite; }
.ay-dd-rings .r1 i { color: var(--cl-m); }
.ay-dd-cams { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 13px; font-weight: 700; color: var(--cl-x); }
.ay-dd-cams i { color: var(--cl-bad); animation: ay-led-slow 1.6s ease-in-out infinite; }
.ay-dd-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ay-dd-facts li { background: #fff; border: 1px solid var(--cl-line); border-radius: 16px; padding: 16px; }
.ay-dd-facts i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--cl-l); color: var(--cl-a); font-size: 17px; margin-bottom: 8px; border: 1px solid var(--cl-m); }
.ay-dd-facts b { display: block; color: var(--cl-ink); margin-bottom: 4px; }
.ay-dd-facts p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.ay-dd-dc .ay-dd-src-note { grid-column: 1 / -1; }

.ay-dd-sla { margin-top: 0; }
.ay-dd-os { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ay-dd-os li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: var(--cl-l); border: 1px solid var(--cl-m); color: var(--cl-x); font-size: 13px; font-weight: 700; }
.ay-dd-os i { color: var(--cl-a); }
.ay-dd-dec { margin-bottom: 10px; }
.ay-dd-dec thead th:nth-child(2) { background: var(--ac-e8efff); color: var(--ac-1d3f9e); }
.ay-dd-dec td:nth-child(2) { background: var(--ac-f6f8ff); color: var(--cl-text); font-weight: 600; }
.ay-dd-link { margin: 0 0 40px; text-align: right; }
.ay-dd-link a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--cl-d); text-decoration: none; }
.ay-dd-link a:hover { text-decoration: underline; }

@media (max-width: 991.98px) {
    .ay-dd-raid, .ay-dd-power, .ay-dd-net, .ay-dd-dc { grid-template-columns: 1fr; }
    .ay-dd-models { grid-template-columns: 1fr; }
    .ay-dd-stack { grid-template-columns: 1fr; }
    .ay-dd-st-vs { justify-self: center; }
}
@media (max-width: 575.98px) {
    .ay-dd-raid, .ay-dd-power, .ay-dd-net { padding: 16px; }
    .ay-dd-tags, .ay-dd-facts, .ay-dd-pairs { grid-template-columns: 1fr; }
    .ay-dd-1u-panel { flex-basis: 84px; padding: 0 6px; gap: 5px 6px; }
    .ay-dd-vga { display: none; }
    .ay-dd-1u-panel em { font-size: 9.5px; letter-spacing: .03em; }
    .ay-dd-bays { gap: 2px; padding: 5px 3px; }
    .ay-dd-bay b { font-size: 8px; }
    .ay-dd-own { grid-template-columns: 1fr; }
    .ay-dd-link { text-align: left; }
    .ay-dd-row, .ay-dd-wires { gap: 8px; } .ay-dd-row > * { font-size: 11.5px; padding: 9px 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .ay-dd-bar i::after { animation: none; }
    .ay-dd-disk, .ay-dd-row > * { transition: none !important; }
}