/* Minecraft Structure Viewer (10 Oct 2026). Scoped to main.sv. */
.sv { --g: 74, 222, 128; --line: rgba(255,255,255,.08); color: #e4e4e7; font-family: Inter, system-ui, sans-serif; }
.sv *, .sv *::before, .sv *::after { box-sizing: border-box; }
.sv svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sv [hidden] { display: none !important; }

/* Start */
.sv-start { display: grid; justify-items: center; gap: 14px; max-width: 760px; margin: 0 auto; padding: clamp(28px, 7vw, 76px) 18px 60px; text-align: center; animation: svUp .7s cubic-bezier(.16,1,.3,1) both; }
.sv-kick { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid rgba(var(--g), .35); border-radius: 999px; background: rgba(var(--g), .08); color: #86efac; font: 700 11.5px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.sv-kick i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80; }
.sv-start h1 { margin: 4px 0 0; color: #fff; font: 900 clamp(2.6rem, 7vw, 4.6rem)/1 Outfit, Inter, sans-serif; letter-spacing: -.02em; }
.sv-start h1 span { background: linear-gradient(120deg, #4ade80, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sv-start > p { max-width: 540px; margin: 0; color: #a1a1aa; font-size: 16.5px; line-height: 1.6; }
.sv-drop { position: relative; display: grid; justify-items: center; gap: 8px; width: 100%; margin-top: 12px; padding: 44px 20px 34px; border: 0; border-radius: 26px; background: rgba(12,13,18,.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='26' ry='26' fill='none' stroke='rgba(255,255,255,.18)' stroke-width='3' stroke-dasharray='14 12' stroke-linecap='round'/%3E%3C/svg%3E"); color: #a1a1aa; font: 500 14px Inter, sans-serif; cursor: pointer; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .25s, background-color .25s; }
.sv-drop:hover, .sv-drop.drag { background-color: rgba(18,28,22,.85); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='26' ry='26' fill='none' stroke='rgba(74,222,128,.65)' stroke-width='3' stroke-dasharray='14 12' stroke-linecap='round'/%3E%3C/svg%3E"); transform: translateY(-2px); }
.sv-drop b { color: #fff; font: 800 21px Outfit, Inter, sans-serif; }
.sv-drop-ic { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 6px; border-radius: 20px; background: linear-gradient(140deg, rgba(74,222,128,.22), rgba(34,211,238,.14)); color: #86efac; box-shadow: 0 0 40px rgba(74,222,128,.2); animation: svFloat 5s ease-in-out infinite; }
.sv-drop-ic svg { width: 32px; height: 32px; stroke-width: 1.7; }
.sv-formats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.sv-formats em { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.06); color: #d4d4d8; font: 600 12px ui-monospace, Consolas, monospace; font-style: normal; }
.sv-start-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.sv-ghost { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(255,255,255,.04); color: #fff; font: 700 14px Inter, sans-serif; text-decoration: none; cursor: pointer; transition: background .2s, transform .15s; }
.sv-ghost:hover { background: rgba(255,255,255,.09); }
.sv-ghost svg { width: 16px; height: 16px; }
.sv-fine { margin: 6px 0 0; color: #52525b; font-size: 12.5px; }

/* App */
.sv-app { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; height: calc(100dvh - 64px - var(--nxb-h, 0px)); padding: 14px; animation: svUp .5s cubic-bezier(.16,1,.3,1) both; }
.sv-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: radial-gradient(120% 90% at 50% 0%, #15202a, #07090c 70%); }
.sv-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.sv-stage canvas:active { cursor: grabbing; }
.sv-busy { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; background: rgba(5,7,10,.55); color: #d4d4d8; font: 600 14px Inter, sans-serif; transition: opacity .3s; }
.sv-busy.off { opacity: 0; pointer-events: none; }
.sv-busy i { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: #4ade80; animation: svSpin .8s linear infinite; }
.sv-chip { position: absolute; top: 14px; left: 14px; right: 80px; width: fit-content; padding: 8px 12px; border: 1px solid rgba(250,204,21,.35); border-radius: 12px; background: rgba(20,16,4,.82); color: #fde68a; font: 600 12.5px/1.4 Inter, sans-serif; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sv-layer { position: absolute; top: 14px; right: 14px; bottom: 74px; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 52px; padding: 12px 0; border: 1px solid var(--line); border-radius: 16px; background: rgba(8,10,14,.72); color: #71717a; font: 700 10px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sv-layer input { flex: 1; width: 22px; min-height: 60px; writing-mode: vertical-lr; direction: rtl; accent-color: #4ade80; cursor: pointer; }
.sv-layer b { color: #fff; font: 800 13px Inter, sans-serif; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.sv-tools { position: absolute; left: 50%; bottom: 16px; display: flex; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 16px; background: rgba(8,10,14,.78); transform: translateX(-50%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sv-tools button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: none; color: #d4d4d8; cursor: pointer; transition: background .2s, color .2s; }
.sv-tools button:hover { background: rgba(255,255,255,.08); color: #fff; }
.sv-tools button[aria-pressed="true"] { background: #fff; color: #07080a; }
.sv-help { position: absolute; left: 16px; bottom: 22px; margin: 0; color: #52525b; font-size: 11.5px; pointer-events: none; }

.sv-side { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: rgba(9,10,14,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.sv-head { padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
.sv-file { display: flex; align-items: center; gap: 10px; }
.sv-file b { flex: 1; min-width: 0; overflow: hidden; color: #fff; font: 800 18px Outfit, Inter, sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.sv-open { flex: none; height: 32px; padding: 0 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.04); color: #d4d4d8; font: 600 12.5px Inter, sans-serif; cursor: pointer; }
.sv-open:hover { background: rgba(255,255,255,.09); color: #fff; }
.sv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.sv-stats div { padding: 10px; border-radius: 12px; background: rgba(255,255,255,.04); text-align: center; }
.sv-stats b { display: block; color: #fff; font: 800 16px Outfit, Inter, sans-serif; font-variant-numeric: tabular-nums; }
.sv-stats small { color: #71717a; font-size: 11px; font-weight: 600; }
.sv-ltools { display: flex; gap: 8px; padding: 12px 14px 8px; }
.sv-find { display: flex; flex: 1; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(0,0,0,.3); color: #71717a; }
.sv-find:focus-within { border-color: rgba(74,222,128,.55); }
.sv-find svg { width: 16px; height: 16px; }
.sv-find input { flex: 1; min-width: 0; border: 0; background: none; color: #fff; font: 500 14px Inter, sans-serif; outline: none; }
.sv-sort { flex: none; height: 40px; padding: 0 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.04); color: #d4d4d8; font: 700 12.5px Inter, sans-serif; cursor: pointer; }
.sv-list { flex: 1; min-height: 0; margin: 0; padding: 4px 8px 10px; overflow-y: auto; list-style: none; scrollbar-width: thin; scrollbar-color: #2a2a31 transparent; }
.sv-row { display: grid; grid-template-columns: 22px 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 14px; cursor: pointer; animation: svIn .35s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i, 0) * 14ms); transition: background .2s, opacity .2s; }
.sv-row:hover { background: rgba(255,255,255,.05); }
.sv-row.on { background: rgba(74,222,128,.1); box-shadow: inset 0 0 0 1px rgba(74,222,128,.35); }
.sv-row.done { opacity: .45; }
.sv-row.done .sv-nm { text-decoration: line-through; }
.sv-tick { display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid rgba(255,255,255,.2); border-radius: 7px; background: none; color: transparent; cursor: pointer; padding: 0; }
.sv-tick svg { width: 13px; height: 13px; stroke-width: 3; }
.sv-row.done .sv-tick { border-color: #4ade80; background: #4ade80; color: #052e16; }
.sv-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,.04); }
.sv-ic img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.sv-nm { min-width: 0; }
.sv-nm b { display: block; overflow: hidden; color: #f4f4f5; font: 600 14px Inter, sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.sv-nm small { color: #71717a; font-size: 11.5px; }
.sv-qty { color: #fff; font: 800 16px Outfit, Inter, sans-serif; font-variant-numeric: tabular-nums; text-align: right; }
.sv-none { padding: 30px 10px; color: #71717a; font-size: 13px; text-align: center; }
.sv-foot { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--line); }
.sv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: rgba(255,255,255,.04); color: #fff; font: 700 13.5px Inter, sans-serif; cursor: pointer; transition: background .2s, transform .15s; }
.sv-btn:hover { background: rgba(255,255,255,.09); }
.sv-btn:active { transform: scale(.97); }
.sv-btn svg { width: 16px; height: 16px; }
.sv-btn.white { border-color: transparent; background: #fff; color: #07080a; }
.sv-toast { position: fixed; left: 50%; bottom: 26px; z-index: 2147483001; margin: 0; padding: 11px 18px; border: 1px solid rgba(74,222,128,.45); border-radius: 12px; background: rgba(8,10,12,.95); color: #d1fae5; font: 600 14px Inter, sans-serif; opacity: 0; transform: translate(-50%, 12px); transition: opacity .3s, transform .3s; pointer-events: none; }
.sv-toast.on { opacity: 1; transform: translate(-50%, 0); }
.sv-toast.bad { border-color: rgba(248,113,113,.5); color: #fecaca; }

@keyframes svUp { from { opacity: 0; transform: translateY(14px); } }
@keyframes svIn { from { opacity: 0; transform: translateX(8px); } }
@keyframes svSpin { to { transform: rotate(360deg); } }
@keyframes svFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (max-width: 980px) {
  .sv-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: 56vh auto; height: auto; padding: 10px; }
  .sv-side { max-height: none; }
  .sv-list { max-height: none; overflow: visible; }
  .sv-help { display: none; }
}
@media (max-width: 560px) {
  .sv-app { grid-template-rows: 52vh auto; }
  .sv-stage, .sv-side { border-radius: 18px; }
  .sv-tools button { width: 38px; height: 38px; }
  .sv-layer { width: 46px; bottom: 70px; }
  .sv-drop { padding: 34px 16px 28px; }
}
@media (prefers-reduced-motion: reduce) { .sv * { animation: none !important; transition: none !important; } }