/* Activity design system. Structural editors remain in styles.css. */
:root {
  --bg: #17181d;
  --bg-soft: #1a1b22;
  --surface: #202128;
  --surface-2: #282931;
  --surface-3: #32333e;
  --line: #36363f;
  --line-strong: #52515b;
  --text: #dcdad7;
  --muted: #aaa7b1;
  --muted-2: #98959f;
  --accent: #c1af91;
  --accent-soft: #302d2b;
  --danger: #d79b9f;
  --ok: #a2b9ac;
  --warn: #cbb38a;
  --shadow: 0 24px 64px #08080c55;
  --shadow-soft: none;
}

body { background: radial-gradient(ellipse at 80% 0, #68607c0b, transparent 55%), var(--bg); font-size: 14px; line-height: 1.5; }
body::before { display: none; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 4px;
}
input, select, textarea, .control { background: var(--bg-soft); border-radius: 9px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
.icon { width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; }
.shell { grid-template-columns: 238px minmax(0, 1fr); }
.sidebar {
  display: flex; flex-direction: column; padding: 26px 16px 18px;
  background: linear-gradient(165deg, #202128, #1b1c22 55%); backdrop-filter: none; border-color: var(--line);
}
.brand { padding: 0 10px 26px; border: 0; color: var(--text); text-decoration: none; }
.brand-mark, .boot-mark {
  width: 40px; height: 44px; background: linear-gradient(145deg, #c5b89f, #9c8e78); border: 1px solid #d3c4aa55; border-radius: 12px; color: #302c27; box-shadow: inset 0 1px 0 #eee5d138, 0 5px 12px #0002;
}
.brand-mark .icon { width: 27px; height: 27px; }
.brand-title { font-size: 30px; letter-spacing: -1.5px; font-weight: 800; }
.brand-accent { color: var(--accent); }
.brand-subtitle { font-size: 9px; letter-spacing: 1.8px; color: var(--muted); }
.server-card { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.server-card > div { min-width: 0; }
.server-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.server-card span { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.brand-avatar { width: 32px; height: 32px; border-radius: 9px; background: var(--surface-3); }
.nav-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 9px; margin-top: 16px; background: transparent; color: var(--muted); font-size: 11px; text-align: left; }
.nav-search .icon { width: 16px; height: 16px; }
kbd { font: inherit; font-size: 10px; border: 1px solid var(--line-strong); padding: 1px 4px; border-radius: 4px; margin-left: auto; white-space: nowrap; }
.tabs { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.mobile-navigation { display: none; }
.nav-label { font-size: 9px; letter-spacing: 1.3px; color: var(--muted-2); margin: 20px 12px 8px; }
.tab-button { min-height: 43px; padding: 0 12px; border-radius: 9px; font-size: 13px; }
.nav-item-label { display: inline-flex; align-items: center; gap: 11px; white-space: nowrap; }
.nav-item-label .icon { width: 18px; height: 18px; }
.tab-button.is-active { background: linear-gradient(100deg, #3b353044, #36323b88); color: #d3c1a4; border-color: #a1917838; box-shadow: inset 2px 0 0 #b6a083; }
.tab-button:hover { background: var(--surface-2); }
.nav-count { min-width: 21px; padding: 1px 5px; background: #ffffff09; border: 1px solid var(--line); border-radius: 5px; font-size: 10px; text-align: center; font-variant-numeric: tabular-nums; }
.sidebar-footer { display: flex; align-items: center; gap: 9px; padding: 30px 10px 0; margin-top: auto; font-size: 11px; color: var(--muted); }
.sidebar-footer .icon { color: var(--accent); }
.sidebar-footer span { display: block; color: var(--muted-2); font-size: 10px; margin-top: 2px; }
.content { padding: 0 34px 40px; max-width: 1720px; width: 100%; margin: 0 auto; }
.topbar { min-height: 86px; padding: 16px 0; gap: 12px; }
.breadcrumb { font-size: 12px; color: var(--muted); }
.breadcrumb span { color: var(--muted-2); margin: 0 9px; }
.connection-status { display: flex; align-items: center; gap: 6px; color: var(--ok); font-size: 10px; margin-top: 5px; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.connection-status.is-offline { color: var(--warn); }
.user-info { font-size: 12px; gap: 10px; }
.user-info .small { font-size: 10px; }
.avatar { border-radius: 50%; width: 32px; height: 32px; background: var(--surface-3); }
.icon-button { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); background: var(--surface); border-radius: 9px; color: var(--muted); flex: 0 0 auto; }
.icon-button:hover { color: var(--accent); border-color: var(--line-strong); }
.mobile-search { display: none; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; }
.eyebrow { color: var(--muted-2); font-size: 9px; letter-spacing: 2px; margin-bottom: 8px; }
.title { font-size: clamp(24px, 2.5vw, 30px); letter-spacing: -.7px; font-weight: 550; }
.page-heading p { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.page-index { font-size: 12px; color: var(--accent); font-variant-numeric: tabular-nums; }
.page-index span { color: var(--muted-2); }
.draft-status { margin-top: 18px; padding: 10px 14px; color: var(--warn); background: #f3c7810a; border: 1px solid #f3c78130; border-radius: 9px; font-size: 11px; }
.view { gap: 22px; margin-top: 25px; }
.overview-hero { display: grid; grid-template-columns: minmax(0, 1fr) 310px; align-items: center; gap: 20px; padding: 30px 38px; border: 1px solid #6f64784a; border-radius: 20px; background: radial-gradient(ellipse at 93% 12%, #6c607934, transparent 56%), radial-gradient(ellipse at 10% 100%, #76634a14, transparent 60%), linear-gradient(115deg, #25252d, #2d2b36 64%, #262731); position: relative; overflow: hidden; box-shadow: inset 0 1px 0 #c4b5d00b, 0 18px 45px #08080d20; }
.overview-hero::after { content: ""; position: absolute; inset: 11px; border: 1px solid #c7b9990b; border-radius: 12px; pointer-events: none; }
.hero-copy { position: relative; z-index: 1; }
.pill { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-size: 9px; font-weight: 650; letter-spacing: 1.3px; }
.pill .icon { width: 14px; height: 14px; }
.hero-copy h2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px, 3vw, 42px); line-height: 1.22; font-weight: 400; letter-spacing: -1px; margin: 22px 0 16px; color: #ded8ce; }
.hero-copy h2 span { color: #bab0bf; }
.hero-copy p { font-size: 12px; line-height: 1.8; color: var(--muted); max-width: 360px; margin: 0 0 24px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 9px; padding: 9px 15px; font-size: 12px; font-weight: 600; border-radius: 9px; background: linear-gradient(135deg, #c4b49a, #ae9b80); color: #29261f; border: 1px solid #cbbba266; box-shadow: inset 0 1px 0 #eee5d12b; }
.button.secondary { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
.button.danger { background: #b5767c10; border-color: #b5767c45; color: var(--danger); }
.button:hover:not(:disabled) { filter: brightness(1.04); transform: none; }
.button:disabled { cursor: not-allowed; }
.button .icon { width: 16px; height: 16px; }
.readiness { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; }
.readiness-ring { display: grid; place-items: center; width: 150px; height: 150px; background: conic-gradient(var(--accent) var(--progress), #ffffff0d 0); border-radius: 50%; padding: 5px; margin-bottom: 9px; box-shadow: 0 0 0 13px #80e0c504, 0 0 0 14px #80e0c50c, 0 0 0 28px #80e0c503; }
.readiness-ring > div { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: #192e35; gap: 5px; }
.readiness-ring .icon { color: var(--accent); width: 26px; height: 26px; }
.readiness-ring strong { font-size: 36px; font-weight: 550; font-variant-numeric: tabular-nums; }
.readiness-ring strong span { font-size: 17px; color: var(--muted); }
.readiness > strong { font-size: 12px; font-weight: 600; }
.readiness > span { max-width: 180px; font-size: 10px; color: var(--muted); }
.stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.stat { padding: 17px 18px; min-height: 130px; border-radius: 13px; background: linear-gradient(135deg, #292a3244, transparent), var(--surface); text-align: left; color: var(--text); box-shadow: inset 0 1px 0 #d8ccd505, 0 6px 18px #0000000a; }
.stat:hover { border-color: #746957; background: #282730; }
.stat::after { display: none; }
.stat-label { display: flex; align-items: center; justify-content: space-between; gap: 5px; color: var(--muted); font-size: 11px; }
.stat-label .icon { color: var(--accent); width: 18px; height: 18px; padding: 5px; box-sizing: content-box; background: linear-gradient(135deg, #bbb0c119, #7770850b); border: 1px solid #aaa0b117; border-radius: 9px; box-shadow: inset 0 1px 0 #c4babb15, 2px 3px 6px #08080d22; }
.stat:nth-child(3) .icon { color: var(--warn); }
.stat-value { font-size: 29px; font-weight: 450; margin: 8px 0 2px; letter-spacing: -1px; }
.stat .small { font-size: 10px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(290px, 1fr); gap: 20px; align-items: start; }
.dashboard-side { display: grid; gap: 18px; }
.dashboard-panel { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; }
.section h2 { font-size: 16px; font-weight: 600; letter-spacing: -.3px; }
.section p { font-size: 12px; line-height: 1.6; }
.section-head { align-items: center; }
.text-button { display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; background: transparent; color: var(--accent); border: 0; padding: 6px 0; text-align: left; font-size: 11px; }
.text-button .icon { width: 15px; height: 15px; }
.text-button:hover { color: #deccb0; }
.checklist { display: grid; }
.check-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 16px; align-items: center; gap: 10px; border: 0; border-top: 1px solid var(--line); padding: 16px 0; background: transparent; text-align: left; }
.check-row:hover strong { color: var(--accent); }
.check-row > .icon { width: 14px; color: var(--muted-2); }
.check-row strong, .check-row small { display: block; }
.check-row strong { font-size: 12px; font-weight: 550; }
.check-row small { font-size: 10px; color: var(--muted); margin-top: 3px; }
.check-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #f3c78110; color: var(--warn); }
.check-icon .icon { width: 16px; height: 16px; }
.check-icon.is-ready { background: #a2b9ac0b; color: var(--ok); }
.queue-card { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; background: linear-gradient(125deg, #2a2727, #26252c); border: 1px solid #6d5c443f; border-radius: 13px; padding: 20px; }
.queue-icon { color: var(--warn); background: #f3c78110; border-radius: 9px; display: grid; place-items: center; height: 34px; }
.queue-card h2 { font-size: 14px; margin: 0 0 6px; font-weight: 550; }
.queue-card p { font-size: 11px; color: var(--muted); margin: 0; line-height: 1.7; }
.queue-card .text-button { grid-column: 2; color: var(--warn); }
.feed { gap: 10px; }
.event-card { border: 1px solid var(--line); background: var(--bg-soft); border-radius: 10px; box-shadow: none; padding: 15px; }
.event-card::before { display: none; }
.event-card.is-warning, .event-card.is-antiraid { border-left: 2px solid var(--warn); }
.event-card.is-quarantine, .event-card.is-decline { border-left: 2px solid var(--danger); }
.event-card.is-restore { border-left: 2px solid var(--ok); }
.event-badge { background: #cbb38a0a; color: var(--warn); border-color: #cbb38a26; font-size: 9px; }
.is-restore .event-badge { background: #a2b9ac0a; color: var(--ok); border-color: #a2b9ac26; }
.is-quarantine .event-badge, .is-decline .event-badge { background: #d79b9f0a; color: var(--danger); border-color: #d79b9f26; }
.event-top time { color: var(--muted); font-size: 10px; }
.event-title { font-size: 13px; font-weight: 550; }
.event-summary, .event-description { font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.event-meta-line { font-size: 10px; }
.notice, .form-band, .item-card, .backup-card, .empty-state, .target-panel, .rule-panel { background: var(--surface); border-radius: 12px; box-shadow: none; }
.form-band, .item-card { padding: 20px; }
.notice { border-left: 3px solid var(--accent); font-size: 12px; line-height: 1.7; }
.field label { color: var(--muted); font-size: 11px; }
.segmented { background: var(--bg-soft); }
.segmented button.is-active { background: var(--accent-soft); color: var(--accent); }
.permission-group { background: var(--bg-soft); border-radius: 11px; }
.permission-control, .permission-control.is-limited { background: var(--surface); border-radius: 9px; }
.permission-control.is-denied { border-color: #ff8e9440; }
.permission-control.is-allowed { border-color: #80e0c540; }
.permission-control.is-limited { border-color: #f3c78145; }
.permission-row { background: transparent; }
.backup-discord, .backup-tree, .backup-detail { background: var(--surface); border-radius: 12px; }
.backup-server.is-active, .backup-channel.is-active, .backup-subnav button.is-active { background: var(--accent-soft); border-color: #31534e; }
.permission-grid { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.permission-control { min-width: 0; }
.rule-title h2, .item-title, .chip { overflow-wrap: anywhere; }
.mention-role-policy { flex-wrap: wrap; }
.mention-role-policy > div { min-width: 0; }
.mention-role-policy-open { white-space: normal; }
.permission-chip.allow { color: var(--accent); border-color: #80e0c530; }
.antispam-flow > div { background: var(--surface); border-radius: 12px; }
.antispam-flow strong { background: var(--accent-soft); color: var(--accent); }
.switch input:checked + .slider { background: var(--accent); }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; margin: 0; z-index: 1; opacity: 0; cursor: pointer; pointer-events: auto; }
.switch:focus-within .slider { outline: 2px solid var(--accent); outline-offset: 4px; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px 20px; font-size: 12px; min-height: 120px; border-style: dashed; }
.empty-state > .icon { color: var(--muted-2); width: 25px; height: 25px; }
.filter-toolbar { display: grid; grid-template-columns: minmax(200px, 1fr) 180px 150px; gap: 10px; }
.search-field { display: flex; align-items: center; border: 1px solid var(--line); background: var(--bg-soft); border-radius: 9px; padding: 0 12px; gap: 8px; min-width: 0; }
.search-field > .icon { color: var(--muted-2); width: 17px; height: 17px; }
.search-field input { border: 0; background: transparent; padding-left: 0; min-width: 0; }
.search-field:focus-within { border-color: var(--accent); }
.search-field input:focus-visible { outline-offset: -3px; }
.toast { background: var(--surface-2); border-color: #477768; border-radius: 12px; font-size: 12px; }
.command-dialog { width: min(560px, calc(100% - 32px)); max-height: min(640px, calc(100dvh - 48px)); padding: 20px; background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow); }
.command-dialog::backdrop { background: #02080dbc; backdrop-filter: blur(5px); }
.restore-dialog p { color: var(--muted); font-size: 13px; }
.restore-confirm-details { display: grid; gap: 10px; margin: 20px 0; }
.restore-confirm-details > div { display: grid; gap: 4px; padding: 12px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 9px; }
.restore-confirm-details span { color: var(--muted); font-size: 12px; }
.restore-confirm-details code { color: var(--accent); overflow-wrap: anywhere; }
.restore-dialog .actions { justify-content: flex-end; }
.command-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.command-head h2 { font-size: 18px; margin: 0; font-weight: 600; }
.command-results { display: grid; gap: 3px; margin: 14px 0; max-height: 390px; overflow-y: auto; }
.command-result { display: grid; grid-template-columns: 20px minmax(0, 1fr) 16px; align-items: center; gap: 12px; border: 1px solid transparent; background: transparent; border-radius: 9px; padding: 12px; color: var(--text); text-align: left; }
.command-result:hover, .command-result:focus { background: var(--accent-soft); }
.command-result > .icon { color: var(--accent); }
.command-result strong, .command-result small { display: block; }
.command-result strong { font-size: 12px; font-weight: 550; }
.command-result small { font-size: 10px; color: var(--muted); margin-top: 2px; }
.command-footer { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 12px; font-size: 10px; color: var(--muted); }
.boot-screen { background: radial-gradient(ellipse at center, #655a7122, transparent 65%); }
.boot-screen h1 { letter-spacing: -1px; }
.boot-screen p { max-width: 440px; font-size: 13px; line-height: 1.8; }
.boot-mark { width: 58px; height: 58px; font-size: 28px; border-radius: 17px; }
.skip-link { position: fixed; top: -70px; left: 16px; z-index: 100; background: var(--accent); color: #102f29; padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { top: 12px; }

/* A small, layered CSS 3D sculpture. No WebGL, external assets or animation loop. */
.hero-object { display: grid; justify-items: center; align-content: center; min-width: 0; }
.security-scene { width: 280px; height: 242px; position: relative; perspective: 850px; isolation: isolate; pointer-events: none; }
.scene-aura { position: absolute; inset: 20px -16px 25px; background: radial-gradient(ellipse, #b6a4ba13, transparent 65%); }
.security-sculpture { position: absolute; width: 158px; height: 188px; left: 62px; top: 11px; transform-style: preserve-3d; transform: rotateX(var(--sculpture-x, 10deg)) rotateY(var(--sculpture-y, -20deg)) rotateZ(-8deg); transition: transform .65s cubic-bezier(.2,.65,.3,1); }
.shield-layer, .shield-face { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.shield-layer { transform: translateZ(calc(var(--layer) * 2px)); fill: #64606a; stroke: #92877a; stroke-width: .5; }
.shield-layer:nth-child(even) { fill: #595661; stroke: #514d54; }
.shield-face { transform: translateZ(14px); }
.scene-orbit { position: absolute; width: 258px; height: 88px; left: 12px; border: 1px solid #b7a58d29; border-radius: 50%; transform: rotate(-23deg); box-shadow: 0 1px 0 #d9c9ab09; }
.orbit-back { top: 49px; border-top-color: #b7a58d4a; z-index: -1; }
.orbit-front { top: 117px; transform: rotate(-23deg) rotateX(18deg); border-top-color: transparent; border-left-color: #b7a58d0e; }
.scene-orbit::after { content: ""; position: absolute; right: 28px; bottom: 1px; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #c3b69e, #5d5964 70%); box-shadow: 1px 2px 4px #10101566; }
.scene-base { position: absolute; width: 174px; height: 34px; bottom: 30px; left: 50px; border-radius: 50%; background: radial-gradient(ellipse, #0e0e1755, transparent 70%); z-index: -1; }
.scene-caption { position: absolute; bottom: 12px; width: 100%; text-align: center; font-size: 8px; color: #a89b91; letter-spacing: 2.4px; }
.hero-object .readiness { flex-direction: row; flex-wrap: nowrap; gap: 12px; padding: 12px 16px; width: 260px; border: 1px solid #b5a39b22; border-radius: 12px; background: linear-gradient(130deg, #b6b0c508, #11121a24); text-align: left; }
.hero-object .readiness-ring { width: 45px; height: 45px; padding: 2px; margin: 0; box-shadow: none; flex: 0 0 auto; }
.hero-object .readiness-ring > div { background: #2b2a32; }
.hero-object .readiness-ring strong { font-size: 16px; font-weight: 500; }
.hero-object .readiness-ring strong span { font-size: 11px; }
.readiness-copy { display: grid; gap: 3px; }
.readiness-copy strong { font-size: 11px; font-weight: 500; color: #d0c5b7; }
.readiness-copy > span { font-size: 9px; line-height: 1.5; color: var(--muted); }
.dashboard-panel, .form-band, .item-card, .rule-panel { box-shadow: inset 0 1px 0 #c4bdc307, 0 8px 24px #0b0b100d; }
.permission-control.is-allowed, .permission-chip.allow { border-color: #a2b9ac32; }
.permission-chip.allow { color: var(--ok); }
.permission-control.is-denied { border-color: #d79b9f35; }
.permission-control.is-limited { border-color: #cbb38a35; }
.backup-server.is-active, .backup-channel.is-active, .backup-subnav button.is-active { border-color: #a1917838; background: #333037; }
.toast { border-color: #746955; }
.skip-link { color: #28231c; }

@media (min-width: 981px) and (max-width: 1280px) {
  .anticrash-toolbar { grid-template-columns: 1fr; }
  .anticrash-board { grid-template-columns: 230px minmax(0, 1fr); }
  .add-target { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
}
@media (min-width: 981px) and (max-width: 1190px) {
  .shell { grid-template-columns: 210px minmax(0, 1fr); }
  .content { padding-left: 24px; padding-right: 24px; }
  .nav-search kbd { display: none; }
  .overview-hero { grid-template-columns: minmax(0, 1fr) 230px; padding: 26px; }
  .security-scene { transform: scale(.86); margin: -15px -25px; }
  .hero-object .readiness { width: 225px; padding: 10px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-side { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: sticky; top: 0; z-index: 10; height: auto; min-width: 0; align-self: start; overflow: visible; padding: 10px max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); }
  .brand, .server-card, .sidebar-footer, .nav-search, .nav-label { display: none; }
  .tabs { display: none; }
  .mobile-navigation { display: grid; gap: 5px; width: 100%; min-width: 0; margin: 0; }
  .mobile-navigation > span { font-size: 11px; color: var(--muted); }
  .mobile-navigation select { display: block; width: 100%; max-width: 100%; min-height: 46px; font-size: 16px; touch-action: manipulation; color-scheme: dark; }
  .tab-button { flex: 0 0 auto; width: auto; min-height: 40px; gap: 10px; padding: 0 12px; }
  .nav-item-label { gap: 7px; }
  .nav-count { display: none; }
  .content { padding: 0 24px 30px; }
  .topbar { display: flex; min-height: 76px; }
  .mobile-search { display: inline-grid; }
  .dashboard-grid { grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr); }
  .overview-hero { padding: 26px; grid-template-columns: minmax(0, 1fr) 230px; }
  .security-scene { transform: scale(.86); margin: -15px -25px; }
  .hero-object .readiness { width: 225px; padding: 10px; }
  .filter-toolbar { grid-template-columns: 1fr 1fr; }
  .filter-toolbar .search-field { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-hero { grid-template-columns: minmax(0, 1fr) 180px; gap: 12px; padding: 24px; }
  .security-scene { transform: scale(.7); margin: -30px -50px; }
  .hero-object .readiness { width: 180px; gap: 8px; padding: 9px; }
  .readiness-ring { width: 110px; height: 110px; }
  .readiness-ring strong { font-size: 27px; }
  .readiness-ring strong span { font-size: 14px; }
  .readiness > span { font-size: 9px; }
  .user-info > div:not(.avatar) { display: none; }
  .page-index { display: none; }
}
@media (max-width: 480px) {
  .content { padding: 0 16px 26px; }
  .sidebar { padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); }
  .breadcrumb { font-size: 10px; }
  .user-info { gap: 6px; }
  .user-info .avatar { display: none; }
  .page-heading { margin-top: 23px; }
  .page-heading p { font-size: 11px; }
  .title { font-size: 26px; }
  .view { margin-top: 20px; gap: 16px; }
  .overview-hero { grid-template-columns: 1fr; padding: 22px; }
  .hero-object { width: 100%; padding-top: 6px; }
  .security-scene { transform: scale(.83); margin: -15px 0 -20px; }
  .hero-object .readiness { width: 100%; justify-content: flex-start; padding: 12px 14px; }
  .hero-copy h2 { font-size: 30px; }
  .readiness { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding-top: 16px; border-top: 1px solid #ffffff15; gap: 12px; }
  .readiness-ring { width: 52px; height: 52px; padding: 3px; margin: 0; box-shadow: none; }
  .readiness-ring .icon { display: none; }
  .readiness-ring strong { font-size: 16px; }
  .readiness-ring strong span { font-size: 10px; }
  .readiness > strong { font-size: 11px; }
  .readiness > span { flex-basis: 100%; max-width: none; text-align: left; }
  .stat { min-height: 117px; padding: 14px; }
  .stat-value { font-size: 26px; }
  .stat-grid { gap: 10px; }
  .dashboard-panel, .queue-card { padding: 16px; }
  .section-head { gap: 10px; }
  .dashboard-panel .section-head { flex-direction: row; align-items: center; }
  .dashboard-panel .text-button { font-size: 10px; }
  .dashboard-panel .section-head h2 { font-size: 14px; }
  .dashboard-panel .section-head p { font-size: 10px; }
  .event-top { flex-wrap: wrap; gap: 8px; }
  .event-top time { font-size: 9px; }
  .filter-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .filter-toolbar select { font-size: 11px; padding: 0 8px; }
  .search-field input { font-size: 12px; }
  .command-dialog { padding: 14px; }
  .command-footer { font-size: 9px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* 3D Progress Bar */
.backup-progress-container {
  margin: 15px 0;
  padding: 10px;
  background: var(--surface-3);
  border-radius: 8px;
  border: 1px solid var(--line);
}
.backup-progress-text {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text);
  display: flex;
  justify-content: space-between;
}
.backup-progress-bar-3d {
  width: 100%;
  height: 20px;
  background: #111;
  border-radius: 10px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
  position: relative;
}
.backup-progress-fill-3d {
  height: 100%;
  background: linear-gradient(to bottom, #4ade80, #16a34a, #15803d);
  box-shadow: inset 0 2px 3px rgba(255,255,255,0.3), inset 0 -2px 3px rgba(0,0,0,0.3);
  border-radius: 10px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.backup-progress-fill-3d::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 30px 30px;
  animation: moveStripes 1s linear infinite;
  border-radius: 10px;
}
@keyframes moveStripes {
  0% { background-position: 0 0; }
  100% { background-position: 30px 0; }
}

.snapshot-version-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 16px; }
.snapshot-version-row select { max-width:100%; min-width:240px; }
.selective-restore-dialog { width:min(1100px, calc(100vw - 32px)); max-width:1100px; max-height:92dvh; overflow:auto; padding:24px; }
.selective-restore-dialog::backdrop { background:rgb(0 0 0 / .72); }
.selective-restore-dialog .command-head { display:flex; justify-content:space-between; align-items:start; gap:16px; }
.selective-restore-dialog .notice { margin:12px 0; }
.restore-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.restore-tabs [aria-selected="true"] { border-color:var(--accent, #d9b476); background:rgb(217 180 118 / .12); }
.restore-mode label { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.restore-filter { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:16px 0; }
.restore-filter input { flex:1; min-width:180px; }
.restore-candidates { max-height:40dvh; overflow:auto; border:1px solid rgb(255 255 255 / .1); border-radius:12px; padding:4px 12px; }
.restore-candidate { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 0; border-bottom:1px solid rgb(255 255 255 / .06); }
.restore-candidate:last-child { border-bottom:0; }
.restore-candidate label { display:flex; align-items:center; gap:12px; cursor:pointer; flex:1; min-width:0; }
.restore-candidate input[type="checkbox"] { width:18px; height:18px; min-width:18px; accent-color:#d9b476; }
.restore-candidate strong, .restore-candidate small, .restore-diff summary small { display:block; overflow-wrap:anywhere; }
.restore-candidate small, .restore-diff summary small { opacity:.65; font-size:12px; margin-top:4px; }
.restore-pager, .restore-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap; }
.restore-footer { padding-top:16px; border-top:1px solid rgb(255 255 255 / .12); }
.restore-summary { display:flex; gap:20px; flex-wrap:wrap; padding:16px 0; }
.restore-diff-list { display:grid; gap:10px; }
.restore-diff { border:1px solid rgb(255 255 255 / .12); border-radius:12px; overflow:hidden; }
.restore-diff summary { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px; cursor:pointer; }
.restore-diff summary::before { content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); flex-shrink:0; }
.restore-diff[open] summary::before { transform:rotate(45deg); }
.restore-diff summary > span:first-of-type { flex:1; min-width:0; overflow-wrap:anywhere; }
.restore-diff > p { padding:0 14px; }
.restore-diff-table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:13px; }
.restore-diff-table th, .restore-diff-table td { padding:12px; border-top:1px solid rgb(255 255 255 / .08); vertical-align:top; text-align:left; overflow-wrap:anywhere; white-space:pre-wrap; }
.restore-diff-table th:first-child { width:22%; }
.restore-diff-table td:nth-child(2) { background:rgb(225 115 115 / .05); }
.restore-diff-table td:nth-child(3) { background:rgb(125 200 150 / .06); }
.restore-overwrite + .restore-overwrite { margin-top:12px; }
.restore-result-body { padding:0 14px 14px; }
@media (max-width:600px) {
  .selective-restore-dialog { width:calc(100vw - 16px); padding:14px; }
  .restore-tabs .button { flex:1 1 42%; font-size:12px; padding:9px; }
  .restore-mode select { width:100%; min-width:0; }
  .restore-diff-table th, .restore-diff-table td { padding:8px; font-size:11px; }
  .restore-diff summary .pill { font-size:10px; }
  .restore-diff summary { flex-wrap:wrap; }
  .restore-diff summary .pill { margin-left:20px; }
  .restore-diff-table thead { display:none; }
  .restore-diff-table, .restore-diff-table tbody { display:block; }
  .restore-diff-table tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .restore-diff-table th:first-child { width:auto; grid-column:1 / -1; font-size:12px; }
  .restore-diff-table td { font-size:12px; }
  .restore-diff-table td::before { display:block; font-weight:700; margin-bottom:8px; opacity:.7; }
  .restore-diff-table td:nth-child(2)::before { content:"До"; }
  .restore-diff-table td:nth-child(3)::before { content:"После"; }
  .restore-footer .button { flex:1; }
}