:root {
  color-scheme: dark;
  --bg: #0b0f14;
  --panel: #131a22;
  --panel2: #1a2430;
  --line: #2a3745;
  --text: #edf2f7;
  --muted: #8fa0b2;
  --accent: #55d6be;
  --accent2: #8ce6d5;
  --danger: #ff7d8a;
}

* { box-sizing: border-box; }
body { margin: 0; overflow-x: hidden; background: radial-gradient(circle at 15% 0, #172433 0, var(--bg) 42%); color: var(--text); font: 15px/1.45 Inter, ui-sans-serif, system-ui, sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; border: 0; border-radius: 10px; padding: 10px 15px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; margin: auto; padding: 38px clamp(20px, 3vw, 56px) 28px; }
.eyebrow { color: var(--accent); font-size: 11px; letter-spacing: .16em; font-weight: 750; margin: 0 0 8px; }
h1, h2 { margin: 0; letter-spacing: -.035em; }
h1 { font-size: clamp(28px, 5vw, 48px); }
h2 { font-size: 25px; }
.shell { width: 100%; margin: auto; padding: 0 clamp(20px, 3vw, 56px) 48px; }
.mainNav { width: 100%; margin: 0 auto; padding: 0 clamp(20px, 3vw, 56px); display: flex; gap: 6px; border-bottom: 1px solid var(--line); }
.mainNav a { color: var(--muted); text-decoration: none; padding: 11px 16px; border-bottom: 2px solid transparent; font-weight: 650; }
.mainNav a:hover, .mainNav a.active { color: var(--text); border-color: var(--accent); }
.view.hidden { display: none; }
.catalogHero { margin: 12px 0 18px; }
.catalogHero h2 { margin: 2px 0 5px; font-size: 28px; }
.catalogToolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.catalogToolbar input { flex: 1 1 330px; }
.catalogToolbar select { min-width: 190px; }
.catalogGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.boxGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.boxCard { background: linear-gradient(145deg, #17222d, #11171f); border: 1px solid var(--line); border-radius: 15px; padding: 16px; min-width: 0; display: grid; gap: 13px; }
.boxCardHead { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.boxCard h3 { margin: 2px 0 0; font-size: 20px; }
.boxSensors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.boxSensors > div { display: grid; gap: 2px; padding: 10px; border-radius: 10px; background: #0e151d; border: 1px solid var(--line); }
.boxSensors strong { color: var(--text); font-size: 16px; }
.boxAssignment { display: grid; gap: 3px; min-height: 44px; }
.boxAssignment strong { color: var(--accent2); }
.boxStatus { overflow-wrap: anywhere; }
.boxActions { display: flex; flex-wrap: wrap; gap: 8px; }
.boxActions button { flex: 1 1 auto; }
.catalogCard { background: linear-gradient(145deg, #17222d, #11171f); border: 1px solid var(--line); border-radius: 15px; padding: 15px; cursor: pointer; }
.catalogCard:hover { border-color: var(--accent); transform: translateY(-1px); }
.catalogCardTop { display: flex; gap: 12px; align-items: center; }
.catalogSwatch { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; border: 2px solid #64727d; box-shadow: inset 0 0 0 1px #ffffff55; }
.catalogCard h3 { margin: 0; font-size: 16px; }
.catalogCard .colorName { color: var(--muted); margin-top: 3px; }
.catalogMeta { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; color: var(--accent); font-size: 13px; }
.catalogVariants { margin-top: 10px; color: var(--muted); font-size: 12px; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 20px; }
.eventList { display: grid; gap: 8px; }
.eventRow { display: grid; grid-template-columns: 170px 70px 1fr auto; gap: 12px; align-items: center; background: #111a23; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.eventRow strong { color: var(--accent2); }
.cloudConnection { display:flex; justify-content:space-between; gap:18px; align-items:center; padding:16px 18px; margin:14px 0; background:var(--panel); border:1px solid var(--line); border-radius:13px; }
.cloudConnection strong { color:#ffd479; font-size:17px; }
.cloudConnection p { margin:4px 0 0; }
.cloudTimes { display:grid; gap:3px; text-align:right; color:var(--muted); font-size:12px; }
.cloudTimes strong { color:var(--text); font-size:14px; }
.cloudSafety { padding:12px 14px; border-left:3px solid #e2a84e; background:#201b12; color:#e8d7b8; border-radius:4px 10px 10px 4px; }
.cloudToolbar label { color:var(--muted); }
.cloudToolbar select { min-width:180px; }
.cloudTableWrap { overflow:auto; border:1px solid var(--line); border-radius:12px; }
.cloudTable { width:100%; border-collapse:collapse; background:var(--panel); }
.cloudTable th, .cloudTable td { padding:11px 13px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
.cloudTable th { color:var(--muted); font-size:12px; font-weight:700; }
.cloudTable tr:last-child td { border-bottom:0; }
.cloudStatus { display:inline-block; color:#ffd479; font-size:12px; }
.cloudFootnote { margin-top:12px; }
.cloudTable .empty { text-align:center; white-space:normal; padding:24px; }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 24px; }
.toolbar input { flex: 1 1 300px; }
.toolbar select { flex: 0 1 190px; }
.toolbar .viewToggle { flex: 0 0 auto; }
input, select { background: #0e151d; border: 1px solid var(--line); color: var(--text); border-radius: 9px; padding: 11px 12px; outline: none; }
input:focus, select:focus { border-color: var(--accent); }
.primary { background: var(--accent); color: #09201c; font-weight: 800; }
.primary:hover { background: var(--accent2); }
.secondary { background: var(--panel2); color: var(--text); border: 1px solid var(--line); }
.secondary:hover { border-color: var(--accent); color: var(--accent); }
.stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 19px; }
.inventoryWeightNote { flex: 1 1 100%; margin: 0 2px 2px; color: var(--muted); font-size: 12px; }
.stat { display: flex; align-items: center; gap: 16px; background: rgb(19 26 34 / 85%); border: 1px solid var(--line); border-radius: 13px; padding: 14px 17px; min-width: 210px; }
.stat b { display: block; font-size: 23px; }
.stat span, .muted { color: var(--muted); font-size: 13px; }
.statIcon { position: relative; display: block; width: 38px; height: 38px; color: var(--text); flex: 0 0 38px; }
.spoolIcon { border: 3px solid currentColor; border-radius: 50% / 28%; }
.spoolIcon::before, .spoolIcon::after { content: ''; position: absolute; left: -3px; right: -3px; height: 12px; border: 3px solid currentColor; border-radius: 50%; }
.spoolIcon::before { top: -3px; background: var(--panel); }
.spoolIcon::after { bottom: -3px; }
.weightIcon { border: 3px solid currentColor; border-radius: 5px 5px 11px 11px; margin-top: 7px; height: 28px; }
.weightIcon::before { content: ''; position: absolute; width: 12px; height: 12px; border: 3px solid currentColor; border-bottom: 0; border-radius: 9px 9px 0 0; left: 10px; top: -14px; }
.materialIcon { border: 3px solid currentColor; transform: rotate(30deg) scale(.78); border-radius: 4px; }
.materialIcon::before, .materialIcon::after { content: ''; position: absolute; inset: 6px; border: 3px solid currentColor; transform: rotate(60deg); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; align-items: start; }
.card { background: linear-gradient(145deg, #17222d, #11171f); border: 1px solid var(--line); border-radius: 15px; padding: 12px; min-width: 0; }
.spoolCard.is-empty, .compactRow.is-empty { position: relative; filter: saturate(.55); }
.spoolCard.is-empty::after, .compactRow.is-empty::after { content: ''; position: absolute; inset: 9px; pointer-events: none; border-radius: inherit; background: linear-gradient(155deg, transparent 48.8%, rgb(236 102 111 / 78%) 49.4%, rgb(236 102 111 / 78%) 50.6%, transparent 51.2%); }
.spoolLayout { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; align-items: center; }
.spoolVisual { min-height: 150px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; background: #fff; }
.filamentRender { position: relative; width: min(100%, 420px); aspect-ratio: 1.35; display: grid; place-items: center; filter: drop-shadow(0 18px 18px rgb(0 0 0 / 42%)); }
.spoolSvg { display: block; width: 100%; height: 100%; overflow: visible; }
.filamentRender { width: min(100%, 470px); aspect-ratio: 1.05; overflow: hidden; }
.filamentRender img, .filamentTint { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.filamentRender img { z-index: 1; }
.filamentTint { z-index: 2; background: var(--filament-color); mix-blend-mode: var(--filament-blend); opacity: .94; -webkit-mask: url('/assets/bambu-spool-filament-mask-v3.png?v=4') center / contain no-repeat; mask: url('/assets/bambu-spool-filament-mask-v3.png?v=4') center / contain no-repeat; -webkit-mask-mode: luminance; mask-mode: luminance; }
.spoolBody { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cardTop { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; grid-column: 1 / -1; margin-bottom: 9px; }
.cardTop > div { min-width: 0; }
.card h3 { margin: 0; font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; }
.colorMeta { display: grid; grid-template-columns: 28px auto; align-items: center; column-gap: 9px; margin-top: 13px; }
.colorMeta i { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: var(--dot); border: 1px solid rgb(255 255 255 / 28%); box-shadow: 0 0 0 1px rgb(0 0 0 / 28%); }
.colorMeta span { color: var(--text); font-size: 17px; line-height: 1.1; }
.colorMeta small { color: var(--muted); font-size: 13px; }
.badge { display: inline-block; color: var(--accent); background: #12332f; border: 1px solid #226257; border-radius: 999px; padding: 3px 9px; font-size: 12px; white-space: nowrap; }
.productLine { color: var(--accent2); font-size: 13px; font-weight: 650; }
.weight { font-size: 23px; font-weight: 750; letter-spacing: -.03em; }
.weight small { font-size: 13px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.meter { height: 5px; background: #0a0f14; border-radius: 10px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); border-radius: 10px; }
.technical { color: var(--muted); font-size: 12px; }
.amsSyncPanel { display: grid; gap: 8px; margin-top: 4px; padding: 10px; border: 1px solid #285c55; border-radius: 10px; background: linear-gradient(145deg, #10231f, #0d1919); }
.amsSyncHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--accent2); font-size: 12px; }
.amsSyncBadge { border-radius: 999px; padding: 2px 7px; font-size: 11px; font-weight: 750; white-space: nowrap; }
.amsSyncBadge.is-current { color: #8ce6d5; background: #12332f; border: 1px solid #226257; }
.amsSyncBadge.is-stale { color: #ffd58c; background: #3a2e15; border: 1px solid #806324; }
.amsSyncBadge.is-error { color: #ffadb5; background: #3e1f27; border: 1px solid #823744; }
.amsSyncFacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.amsSyncFacts div { min-width: 0; }
.amsSyncFacts dt { color: var(--muted); font-size: 10px; }
.amsSyncFacts dd { margin: 2px 0 0; color: var(--text); font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; }
.amsSyncError { color: var(--danger); font-size: 11px; overflow-wrap: anywhere; }
.cardFoot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 8px; }
.cardFoot button span { color: var(--accent2); font-size: 26px; line-height: 0; vertical-align: -2px; margin-left: 10px; }
.viewToggle { display: inline-flex; }
.viewToggle button { border-radius: 0; padding: 9px 11px; }
.viewToggle button:first-child { border-radius: 9px 0 0 9px; }
.viewToggle button:last-child { border-radius: 0 9px 9px 0; }
.viewToggle button.active { color: var(--accent); border-color: var(--accent); background: #12332f; }
.compactList { display: grid; gap: 5px; overflow-x: auto; }
.compactHeader, .compactRow { display: grid; grid-template-columns: 58px minmax(120px, 1.3fr) minmax(130px, 1.2fr) 90px 105px minmax(100px, 1fr) 50px 76px; gap: 10px; align-items: center; min-width: 760px; }
.spoolNumber { margin-bottom: 5px; }
.compactHeader { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 0 12px 5px; }
.compactRow { background: linear-gradient(145deg, #17222d, #11171f); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; font-size: 13px; }
.compactRow small { display: block; color: var(--muted); font-size: 10px; }
.compactColor i, .colorMeta i { display: inline-block; width: 15px; height: 15px; border-radius: 50%; background: var(--dot); border: 1px solid #758692; box-shadow: inset 0 0 0 1px #ffffff55; }
.idMeta { color: var(--muted); font-size: 11px; }
.empty { color: var(--muted); border: 1px dashed var(--line); border-radius: 14px; padding: 30px; text-align: center; grid-column: 1 / -1; }
.catalogPanel { margin-top: 28px; background: linear-gradient(145deg, #17222d, #11171f); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.sectionHead { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.sectionHead h2 { margin: 2px 0 0; font-size: 20px; }
.sectionHead input { width: min(420px, 100%); }
.catalogList { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.catalogRow { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: #0e151d; min-width: 0; }
.catalogRow > div { min-width: 0; display: grid; gap: 2px; }
.catalogRow strong, .catalogRow .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swatch { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; border: 1px solid #64727d; }
.catalogCode { margin-left: auto; color: var(--accent); font-size: 12px; white-space: nowrap; }
.dialogHead { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }
.iconButton { background: transparent; color: var(--muted); font-size: 28px; padding: 0 4px; }
.iconButton:hover { color: var(--text); }
dialog { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--text); padding: 0; max-width: 680px; width: calc(100% - 28px); box-shadow: 0 25px 80px #000b; }
dialog::backdrop { background: #000b; }
.dialogHead, dialog form { padding: 24px; }
.formGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
label input, label select, label textarea { width: 100%; color: var(--text); }
.rfidBox { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 17px; display: grid; gap: 10px; }
.rfidBox strong { display: block; margin-bottom: 4px; }
.rfidAdd { display: flex; gap: 8px; }
.rfidAdd input { flex: 1; }
.detailFacts { max-height: none; overflow: visible; border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-top: 16px; background: #0e151d; }
dialog#spoolDialog { width: min(1120px, calc(100% - 28px)); max-width: none; max-height: calc(100vh - 24px); overflow: hidden; overscroll-behavior: contain; }
dialog#spoolDialog > #spoolForm { max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 20px 24px 24px; }
@supports (height: 100dvh) { dialog#spoolDialog { max-height: calc(100dvh - 24px); } dialog#spoolDialog > #spoolForm { max-height: calc(100dvh - 24px); } }
.technicalRfidDetails { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 10px; }
.technicalRfidDetails > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--muted); font-weight: 650; }
.technicalRfidDetails[open] > summary { color: var(--accent); }
.detailConflict { margin: 10px 0; padding: 10px 12px; border: 1px solid #9b6b24; border-radius: 9px; background: #2a2115; }
.detailFacts h3 { margin: 0 0 14px; }
.detailSections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
.detailSection { min-width: 0; }
.detailOverview { grid-column: 1 / -1; }
.detailOverview dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.detailSection { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.detailSection h4 { margin: 0 0 8px; color: var(--accent); }
.detailSection dl { margin: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.detailFact { min-width: 0; padding: 8px; border-radius: 8px; background: #131d27; }
.detailFact dt { color: var(--muted); font-size: 12px; }
.detailFact dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.detailFact dd small { display: block; color: var(--muted); font-size: 11px; }
.detailRfidPages { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 8px; margin-top: 9px; }
.detailRfidPage { padding: 9px; border: 1px solid var(--line); border-radius: 9px; }
.detailRfidPage > strong { display: block; margin-bottom: 6px; }
.detailRfidPage .detailFact { padding: 5px 2px; background: transparent; }
.sharedMaterialProfile { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.sharedMaterialProfile h3 { margin: 0 0 5px; color: var(--accent); font-size: 14px; }
.materialProfileIntro { margin: 0 0 3px; font-weight: 650; }
.materialProfileCode { display: inline-block; margin-left: 5px; color: var(--muted); font: 11px ui-monospace, Consolas, monospace; }
.materialProfileSource, .materialProfileFootnote { margin: 3px 0 7px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.materialProfileGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.materialProfileGroup { min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #101922; }
.materialProfileGroup > strong { display: block; margin-bottom: 5px; font-size: 11px; }
.materialProfileValue { display: grid; grid-template-columns: minmax(90px, .65fr) minmax(0, 1.35fr); gap: 2px 8px; padding: 4px 0; border-top: 1px solid color-mix(in srgb, var(--line) 65%, transparent); font-size: 11px; }
.materialProfileValue:first-of-type { border-top: 0; }
.materialProfileValue > span { color: var(--muted); }
.materialProfileValue > strong { font-size: 11px; overflow-wrap: anywhere; }
.materialProfileValue small { grid-column: 2; color: var(--muted); font-size: 9px; font-weight: 400; }
@media (max-width: 620px) { .materialProfileGrid { grid-template-columns: 1fr; } .materialProfileValue { grid-template-columns: minmax(75px, .55fr) minmax(0, 1.45fr); } }
.actions { display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--line); margin-top: 22px; padding-top: 18px; }
.error { color: var(--danger); min-height: 20px; margin: 10px 0 0; }
.authOverlay { position: fixed; inset: 0; background: #000c; display: grid; place-items: center; padding: 18px; z-index: 5; }
.authCard { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 26px; width: min(410px, 100%); display: grid; gap: 12px; }
.hidden { display: none; }
.loginScreen { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.loginScreen.hidden { display: none; }
.loginPanel { width: min(100%, 420px); display: grid; gap: 16px; padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel, #131c25); box-shadow: 0 20px 70px #0008; }
.loginPanel h1 { margin: 0; }
.loginPanel label, .accountControls label { display: grid; gap: 6px; color: var(--muted); }
.accountControls { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
#accountMenu { position: relative; }
#accountMenu summary { cursor: pointer; list-style: none; padding: 10px 14px; border: 1px solid var(--line); border-radius: 9px; font-weight: 650; }
.accountPanel { position: absolute; z-index: 20; right: 0; top: calc(100% + 6px); display: grid; gap: 8px; min-width: 190px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #101820; box-shadow: 0 12px 36px #0008; }
.accountPanel button { width: 100%; }
.readOnlyBanner { margin: 10px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); }
.deviceManager { padding: 24px; }
.deviceManager .dialogHead { padding: 0; }
.deviceManager .dialogHead p { margin: 6px 0 0; }
.deviceList { display: grid; gap: 9px; max-height: 36vh; overflow: auto; margin-top: 16px; }
.deviceRow { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #0e151d; }
.deviceRow > div:first-child { min-width: 0; display: grid; gap: 5px; }
.deviceRow small { color: var(--muted); overflow-wrap: anywhere; }
.deviceRevoked { color: var(--danger); font-size: 12px; }
.deviceActions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.deviceActions button { padding: 7px 9px; font-size: 12px; }
.deviceTokenOnce { display: grid; gap: 9px; padding: 13px; margin-top: 14px; border: 1px solid #806324; border-radius: 10px; background: #201b12; }
.deviceTokenOnce code { display: block; padding: 10px; border-radius: 7px; background: #0b0f14; color: #ffe2a8; overflow-wrap: anywhere; user-select: all; }
.deviceTokenOnce .muted { margin: 0; }
@media (max-width: 620px) { .deviceRow { align-items: flex-start; flex-direction: column; } .deviceActions { justify-content: stretch; width: 100%; } .deviceActions button { flex: 1 1 auto; } }

@media (max-width: 760px) {
  .grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  .spoolLayout { grid-template-columns: 100px 1fr; gap: 10px; }
  .spoolVisual { min-height: 132px; }
  .filamentRender { width: 110px; }
}

@media (max-width: 620px) {
  .mainNav { padding: 0 16px; overflow-x: auto; }
  .mainNav a { white-space: nowrap; padding-inline: 12px; }
  .topbar { padding: 27px 16px 22px; align-items: flex-start; flex-direction: column; }
  .shell { padding: 0 16px 40px; }
  .topbar button { width: 100%; }
  .toolbar > input, .toolbar > select, .toolbar > button, .toolbar > .viewToggle { flex: 1 1 100%; width: 100%; }
  .viewToggle button { flex: 1 1 50%; }
  .formGrid { grid-template-columns: 1fr; }
  .detailSection dl { grid-template-columns: 1fr; }
  .detailSections { grid-template-columns: 1fr; }
  .detailOverview { grid-column: auto; }
  .detailOverview dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  dialog#spoolDialog > #spoolForm { padding: 16px; }
  .rfidAdd { flex-direction: column; }
  .grid { grid-template-columns: 1fr; }
  .spoolLayout { grid-template-columns: 100px 1fr; }
  .spoolVisual { min-height: 132px; }
  .filamentRender { width: 100px; }
  .cardFoot { align-items: flex-start; flex-direction: column; }
  .sectionHead { align-items: stretch; flex-direction: column; }
  .boxSensors { grid-template-columns: 1fr; }
  .eventRow { grid-template-columns: 1fr 1fr; }
  .amsSyncFacts { grid-template-columns: 1fr; }
  .actions { flex-wrap: wrap; }
}
.profileUpdatePanel { margin: 14px 0 18px; }
.profileCheckResults { display: grid; gap: 8px; }
.profileChange { border-top: 1px solid var(--line); padding: 9px 0; }
.profileChange > strong { margin-right: 8px; }
.profileChange ul { margin: 6px 0 0; padding-left: 22px; overflow-wrap: anywhere; }
.profileChange li { margin: 3px 0; }
.profileUpdatePanel button:disabled { opacity: .65; cursor: wait; }
.amsGrid{display:grid;gap:18px}.amsCard{padding:20px}.amsMeta{color:var(--muted);margin:8px 0 14px}.amsSlots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.amsSlot{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--surface)}.amsSlotHead{display:flex;justify-content:space-between;gap:8px;align-items:center}.amsSlot h4{margin:14px 0 5px}.amsSlot p{margin:5px 0}.amsActions{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.amsActions button{font-size:.78rem;padding:7px 9px}@media (max-width:900px){.amsSlots{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:560px){.amsSlots{grid-template-columns:1fr}.amsCard{padding:14px}}
.settingsPanel{max-width:980px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px}.settingsHeader{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:16px}.settingsHint{margin:16px 0}.amsUnknown{color:var(--accent);font-weight:700}.amsConflict{color:#ffadb5;font-weight:700}
.sourceCards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.sourceCard{max-width:none;transition:border-color .2s,box-shadow .2s}.sourceCard.sourceActive{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 28%,transparent)}.sourceHeadline{font-size:1.1rem;color:var(--accent);font-weight:700}.sourceFormInfo{min-height:1.4em;margin:12px 0}.sourceFormInfo.success{color:#72e0ad}.sourceCard .actions{display:flex;flex-wrap:wrap;gap:8px}@media (max-width:900px){.sourceCards{grid-template-columns:1fr}}
.sourceCertInfo{overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.82rem}

/* M.4j: compact single-view spool dialog. The form remains the only vertical scroller. */
dialog#spoolDialog > #spoolForm .dialogHead { margin-bottom: 12px; }
.spoolBaseFields { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px 11px; }
.spoolBaseFields label { gap: 4px; font-size: 12px; }
.spoolBaseFields small { min-height: 1em; font-size: 10px; line-height: 1.2; }
.spoolQuickFacts { margin-top: 8px; }
.detailTechFacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 0; }
.detailTechFacts .detailFact { padding: 7px 8px; }
.detailTechFacts .detailFact dt { font-size: 10px; }
.detailTechFacts .detailFact dd { font-size: 12px; }
.spoolOwnFields { margin-top: 11px; padding-top: 10px; gap: 7px; }
.spoolOwnFields .formGrid { grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); gap: 9px; }
.spoolOwnFields textarea { min-height: 58px; resize: vertical; }
.dialogExtras { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 7px; }
.dialogExtras > summary { min-height: 38px; display: flex; align-items: center; cursor: pointer; color: var(--muted); font-weight: 650; }
.dialogExtras[open] > summary { color: var(--accent); }
#catalogFields .formGrid { margin: 8px 0; }
#catalogFields label { font-size: 11px; }
#catalogFields small { font-size: 10px; }
#rfidManagementDetails .rfidBox { margin-top: 6px; padding-top: 10px; }
.detailFacts { padding: 9px; margin-top: 8px; }
.detailRfidPages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .spoolBaseFields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detailTechFacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spoolOwnFields .formGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .spoolBaseFields, .spoolOwnFields .formGrid { grid-template-columns: 1fr; }
  .detailTechFacts, .detailRfidPages { grid-template-columns: 1fr; }
  .spoolBaseFields label { font-size: 13px; }
  .spoolOwnFields textarea { min-height: 72px; }
}
.profileLibraryToolbar{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin:14px 0 20px;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:13px}.profileLibraryToolbar label{display:grid;gap:5px;color:var(--muted);min-width:190px}.profileLibraryToolbar select{min-width:180px}.profileLibraryToolbar #profileLibraryAccess{margin-bottom:10px}.profileLibraryToolbar button{margin-left:auto}.profileLibraryGroup{margin:22px 0}.profileLibraryGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px}.profileLibraryCard{min-width:0;background:linear-gradient(145deg,#17222d,#11171f);border:1px solid var(--line);border-radius:14px;padding:15px;display:grid;gap:10px}.profileLibraryCardHead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.profileLibraryCard h4{margin:0;font-size:17px;overflow-wrap:anywhere}.profileLibraryActions{display:flex;gap:7px;flex-wrap:wrap}.profileLibraryActions button{padding:8px 11px;font-size:13px}.profileLibraryLinks{margin:0;padding:0;list-style:none;display:grid;gap:6px}.profileLibraryLinks li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:7px;border-top:1px solid var(--line);font-size:12px}.profileLibraryLinks button{padding:5px 8px;font-size:12px}.profileLibraryToolbar button:disabled,.profileDialog button:disabled{opacity:.6;cursor:wait}.profileDialog{width:min(820px,calc(100vw - 30px));max-height:min(82vh,900px);overflow:auto;padding:20px}.profileDialog .dialogHead{margin-bottom:12px}.profileUploadItems{display:grid;gap:8px;max-height:52vh;overflow:auto;margin:12px 0}.profileUploadItem{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}.profileUploadItem input{align-self:start;margin-top:5px}.profileUploadItem label{font-weight:700;overflow-wrap:anywhere}.profileUploadItem .profileUploadMeta{grid-column:2;color:var(--muted);font-size:12px;overflow-wrap:anywhere}.profileState{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:3px 8px;color:var(--muted);font-size:11px;white-space:nowrap}.profileState.new{color:#72e0ad;border-color:#34785d}.profileState.changed,.profileState.name_conflict{color:#ffd479;border-color:#80662d}.profileState.identical{color:#9dcaff;border-color:#385b7c}.profileDetailSummary{display:grid;gap:8px;margin:12px 0}.profileJson{max-height:48vh;overflow:auto;padding:12px;background:#0e151d;border:1px solid var(--line);border-radius:10px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}.profileLibraryGroup .sectionHead{align-items:center}.profileLibraryCard p{margin:0}.profileLibraryStatusError{color:var(--danger)!important}.profileLibraryStatusSuccess{color:#72e0ad!important}@media(max-width:620px){.profileLibraryToolbar{align-items:stretch}.profileLibraryToolbar label,.profileLibraryToolbar select,.profileLibraryToolbar button{width:100%;min-width:0}.profileLibraryToolbar button{margin-left:0}.profileLibraryCardHead{flex-direction:column}.profileLibraryActions button{flex:1 1 42%}.profileDialog{padding:14px}}
.profileLibraryCard h3{margin:0;font-size:17px;overflow-wrap:anywhere}.profilePreviewItem{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 12px;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--panel);cursor:pointer}.profilePreviewItem input{align-self:start;margin-top:4px}.profilePreviewItem span{display:grid;gap:4px;overflow-wrap:anywhere}.profilePreviewItem small{color:var(--muted);font-size:12px;overflow-wrap:anywhere}.profileDetailSummary code{overflow-wrap:anywhere}

.profileLibraryUploadControl{display:grid;gap:6px;max-width:420px;margin-left:auto}.profileLibraryUploadControl button{margin-left:0}.profileLibraryUploadHint{margin:0;max-width:420px;font-size:12px;line-height:1.4}

/* UI.7 scoped dialog and spool profile layout */
dialog#profileDetailDialog,dialog#profileAssignDialog{width:min(820px,calc(100vw - 24px));max-width:none;max-height:calc(100vh - 24px);overflow:hidden;box-sizing:border-box;padding:0}
@supports(height:100dvh){dialog#profileDetailDialog,dialog#profileAssignDialog{max-height:calc(100dvh - 24px)}}
dialog#profileDetailDialog>.profileDialogLayout,dialog#profileAssignDialog>#profileAssignForm{width:100%;max-width:100%;max-height:inherit;overflow:hidden;box-sizing:border-box;padding:0}
dialog#profileAssignDialog>#profileAssignForm{margin:0}
.profileDialogLayout{display:flex;flex-direction:column;width:100%;max-width:100%;max-height:inherit;overflow:hidden;box-sizing:border-box;padding:0}
.profileDialogLayout>.dialogHead{flex:0 0 auto;min-width:0;margin:0;padding:16px 18px}
.profileDialogBody{flex:1 1 auto;min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;padding:0 18px 12px}
.profileDialogActions{position:sticky;bottom:0;z-index:2;display:flex;justify-content:flex-end;gap:8px;flex:0 0 auto;flex-wrap:wrap;margin:0;padding:12px 18px;background:var(--panel);border-top:1px solid var(--line)}
.profileDialogLayout h2,.profileDetailSummary,.profileDetailSummary p,.profileDetailSummary code,#profileAssignCurrent{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.profileJsonDetails{min-width:0;max-width:100%}
.profileJson{box-sizing:border-box;max-width:100%;max-height:min(45vh,420px);overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.spoolDialogSection{min-width:0;max-width:100%;margin:10px 0;border-top:1px solid var(--line);padding-top:8px}
.spoolDialogSection>summary{display:flex;align-items:center;min-height:42px;cursor:pointer;color:var(--muted);font-weight:700;overflow-wrap:anywhere}
.spoolDialogSection[open]>summary{color:var(--accent)}
#spoolDialog> #spoolForm{width:100%;min-width:0;max-width:100%;overflow-x:hidden}
#spoolDialog> #spoolForm>.dialogHead{position:sticky;top:-20px;z-index:5;background:var(--panel);border-bottom:1px solid var(--line)}
#spoolForm .formGrid,#spoolForm label,#spoolForm input,#spoolForm select,#spoolForm textarea{min-width:0;box-sizing:border-box}
#spoolProfileSection{overflow-wrap:anywhere}
.spoolProfileAssignments{display:grid;gap:8px;min-width:0}
.spoolProfileAssignment{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.spoolProfileAssignment>div{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.spoolProfileAssignmentActions{display:flex;gap:6px;flex-wrap:wrap}
.spoolProfileAssignmentActions button{padding:6px 9px;font-size:12px}
.spoolProfileControls{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;margin-top:12px}
.spoolProfileControls label{min-width:0}
.spoolProfileControls button{min-width:96px}
.spoolProfileVersion{display:block;color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.spoolDialogActions{position:sticky;bottom:-24px;z-index:4;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:14px -24px -24px;padding:12px 24px 16px;background:var(--panel);border-top:1px solid var(--line)}
#profileAssignSpool{max-width:100%;overflow-wrap:anywhere}
@media(max-width:620px){dialog#profileDetailDialog,dialog#profileAssignDialog{width:calc(100vw - 16px);max-height:calc(100vh - 16px)}.profileDialogLayout>.dialogHead{padding:12px}.profileDialogBody{padding:0 12px 10px}.profileDialogActions{padding:10px 12px}.spoolProfileControls{grid-template-columns:minmax(0,1fr)}.spoolProfileControls button{width:100%}.spoolProfileAssignment{grid-template-columns:minmax(0,1fr)}.spoolProfileAssignmentActions button{flex:1 1 42%}.spoolDialogActions{bottom:-16px;margin:12px -16px -16px;padding:10px 16px 12px}}


/* UI.7d keeps long BambuStudio import previews inside the dialog viewport. */
dialog#profileUploadDialog{width:min(820px,calc(100vw - 24px));max-width:none;max-height:calc(100vh - 24px);overflow:hidden;box-sizing:border-box;padding:0}
@supports(height:100dvh){dialog#profileUploadDialog{max-height:calc(100dvh - 24px)}}
dialog#profileUploadDialog>.profileDialogLayout{width:100%;max-width:100%;max-height:inherit;overflow:hidden;box-sizing:border-box;padding:0}
#profileUploadDialog .profileDialogLayout>.dialogHead{min-width:0}
#profileUploadDialog .profileDialogBody{min-width:0;overflow-y:auto;overflow-x:hidden}
#profileUploadDialog #profileUploadFilename,#profileUploadDialog #profileUploadMessage,#profileUploadDialog #profileUploadError{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word}
#profileUploadDialog #profileUploadItems{min-width:0;max-height:none;overflow:visible}
#profileUploadDialog .profilePreviewItem,#profileUploadDialog .profilePreviewItem>span,#profileUploadDialog .profilePreviewItem strong,#profileUploadDialog .profilePreviewItem small{min-width:0;overflow-wrap:anywhere;word-break:break-word}
#profileUploadDialog .profileDialogActions{width:100%;min-width:0}
@media(max-width:620px){dialog#profileUploadDialog{width:calc(100vw - 16px);max-height:calc(100vh - 16px)}#profileUploadDialog .profileDialogLayout>.dialogHead{padding:12px}#profileUploadDialog .profileDialogBody{padding:0 12px 10px}#profileUploadDialog .profileDialogActions{flex-direction:column;align-items:stretch;padding:10px 12px}#profileUploadDialog .profileDialogActions button{width:100%}}