/* Data backup and recovery page */
.drillbox { padding: clamp(1rem, 2.5vw, 1.5rem); background: rgba(30,30,30,.82); border: 1px solid var(--line); border-radius: var(--radius-lg); backdrop-filter: blur(6px); }
.drill { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.bk-office { fill: #161618; stroke: #3c3c42; stroke-width: 1.5; }
.bk-office__label { fill: #8d8d94; font-size: 13px; font-weight: 500; }
.bk-edge { fill: none; stroke: #36363c; stroke-width: 2; stroke-linecap: round; transition: stroke .4s; }
.bk-edge--net { stroke-dasharray: 3 7; }
.drill[data-stage="backup"] .bk-edge { stroke: rgba(212,132,255,.45); }
.drill[data-stage="restore"] .bk-edge { stroke: rgba(69,232,255,.5); }
.bk-node { transition: opacity .5s; }
.bk-node__ring { fill: var(--bg); stroke: #4a4a52; stroke-width: 1.5; transition: stroke .4s, fill .4s; }
.bk-node__icon { fill: none; stroke: #b4b4ba; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s, stroke .4s; }
.bk-node__lock { fill: none; stroke: #ff8a80; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .3s; }
.bk-node__label { fill: #8d8d94; font-size: 12.5px; font-weight: 500; }
@media (max-width: 600px) { .bk-node__label, .bk-office__label { font-size: 16px; } }
.bk-node.is-bad .bk-node__ring { stroke: #ff8a80; fill: #2a1716; }
.bk-node.is-locked .bk-node__icon { opacity: 0; }
.bk-node.is-locked .bk-node__lock { opacity: 1; }
.bk-node.is-dead { opacity: .35; }
.bk-node.is-src .bk-node__ring { stroke: var(--violet); fill: #241a2b; }
.bk-node.is-ok .bk-node__ring { stroke: var(--accent); fill: #10262b; }
.bk-node.is-ok .bk-node__icon { stroke: #fff; }
.bk-node.is-ok .bk-node__label, .bk-node.is-src .bk-node__label { fill: #fff; }
.bk-node.is-bad .bk-node__ring { animation: bk-alarm .5s ease-in-out infinite alternate; }
.bk-crack { fill: none; stroke: #ff8a80; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.drill[data-scn="drive"][data-stage="disaster"] .bk-crack { stroke-dashoffset: 0; transition: stroke-dashoffset .5s ease .2s; }
.bk-flood { transform: translateY(350px); transition: transform 1.6s cubic-bezier(.4,0,.2,1); }
.drill[data-scn="flood"][data-stage="disaster"] .bk-flood { transform: translateY(253px); }
.bk-wave { animation: bk-wave 1.6s linear infinite; }
.bk-file { fill: var(--violet); }
.bk-file--restore { fill: var(--accent); }
.bk-ok { opacity: 0; transition: opacity .4s; }
.bk-ok circle { fill: #10262b; stroke: var(--accent); stroke-width: 2; }
.bk-ok path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.drill[data-stage="ok"] .bk-ok { opacity: 1; }
.drill.no-anim *, .drill.no-anim { transition: none !important; }

.bk-strip { display: flex; align-items: center; gap: .75rem; margin: 1rem 0 .9rem; font-size: .8rem; color: var(--ink-2); }
.bk-strip__ticks { display: flex; gap: 4px; flex: 1; height: 16px; align-items: stretch; }
.bk-strip__ticks i { flex: 1; max-width: 18px; border-radius: 2px; background: #2a2a30; transition: background .3s; }
.bk-strip__ticks i.is-saved { background: rgba(212,132,255,.7); }
.bk-strip__ticks i.is-lost { background: #ff8a80; }
.bk-strip__ticks i.is-pick { background: var(--accent); box-shadow: 0 0 0 2px rgba(69,232,255,.35); }

.bk-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.bk-steps li { position: relative; padding-top: .7rem; font-size: .85rem; line-height: 1.3; color: #7d7d84; transition: color .3s; }
.bk-steps li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 2px; background: #2e2e33; transition: background .3s; }
.bk-steps li.is-done { color: var(--ink-2); }
.bk-steps li.is-done::before { background: rgba(69,232,255,.45); }
.bk-steps li.is-now { color: var(--ink); }
.bk-steps li.is-now::before { background: var(--accent); }
.bk-steps li.is-bad.is-now::before { background: #ff8a80; }
.bk-log { margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); color: var(--ink); font-size: .925rem; min-height: 3.1em; }

/* Backup services split with version history */
.bk-split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1000px) { .bk-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2.5rem, 4vw, 4rem); } .vers { position: sticky; top: calc(64px + 1.5rem); } }
.bk-split .features { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1.5rem 2rem; }
.vers { margin: 0; padding: clamp(1rem, 2.5vw, 1.5rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.vers__file { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.vers__icon { width: 22px; height: 22px; fill: none; stroke: #4fd18b; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.vers__name { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vers__badge { margin-left: auto; flex: none; padding: .2rem .55rem; border-radius: var(--radius-sm); font-size: .75rem; font-weight: 500; background: #2a1716; color: #ff8a80; border: 1px solid rgba(255,138,128,.4); transition: background .3s, color .3s, border-color .3s; }
.vers__badge.is-clean { background: #2a2a30; color: var(--ink-2); border-color: var(--line); }
.vers__badge.is-restored { background: #10262b; color: var(--accent); border-color: rgba(69,232,255,.5); }
.vers__sheet { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; font-size: .85rem; font-variant-numeric: tabular-nums; min-height: 13.2rem; background: var(--bg); transition: box-shadow .4s; }
.vers__sheet.is-flash { box-shadow: 0 0 0 2px var(--accent); }
.vers__row { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto; gap: .6rem; padding: .38rem .7rem; border-top: 1px solid #242428; }
.vers__row:first-child { border-top: 0; background: #1b1b1f; color: var(--ink-2); font-weight: 500; }
.vers__row span:first-child { color: #6e6e76; }
.vers__row.is-new { animation: bk-rowin .45s ease; }
.vers__sheet.is-enc .vers__row:not(:first-child) { color: #ff8a80; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.vers__label { display: block; margin: 1.1rem 0 .3rem; font-size: .85rem; color: var(--ink-2); }
.vers__range { width: 100%; height: 28px; accent-color: var(--accent); margin: 0; }
.vers__marks { position: relative; height: 1.2rem; margin: .1rem 9px 0; font-size: .75rem; color: #7d7d84; }
.vers__marks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.vers__marks span:nth-child(1) { left: 0; transform: none; margin-left: -9px; }
.vers__marks span:nth-child(2) { left: 25%; }
.vers__marks span:nth-child(3) { left: 50%; }
.vers__marks span:nth-child(4) { left: 75%; }
.vers__marks span:nth-child(5) { left: 100%; transform: translateX(-100%); margin-left: 9px; color: #ff8a80; }
.vers__state { margin: .9rem 0; min-height: 3em; font-size: .925rem; color: var(--ink); }
.vers__restore { width: 100%; }
.vers__restore[disabled] { background: #2a2a30; color: #7d7d84; cursor: not-allowed; }

@keyframes bk-alarm { from { opacity: 1; } to { opacity: .5; } }
@keyframes bk-wave { to { transform: translateX(-40px); } }
@keyframes bk-rowin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .bk-wave, .bk-node.is-bad .bk-node__ring, .vers__row.is-new { animation: none; }
  .drill *, .bk-strip__ticks i, .bk-steps li, .vers__sheet { transition: none !important; }
}