:root {
  color-scheme: dark;
  --surface-app:#080a10; --surface-panel:rgba(18,21,31,.92); --surface-panel-2:rgba(24,28,42,.94); --surface-card:rgba(29,34,50,.92); --surface-card-hover:rgba(39,46,68,.96);
  --border-soft:rgba(139,158,206,.18); --border-strong:rgba(127,153,255,.58); --text-main:#f2f4fb; --text-muted:#9ca7be;
  --accent-main:#839cff; --accent-soft:#b7c4ff; --accent-purple:#a785ff; --accent-danger:#ff8e8e; --accent-ok:#76d88b; --glow-accent:0 0 38px rgba(131,156,255,.22);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:22px;
  --radius-sm:10px; --radius-card:18px; --radius-bubble:24px; --radius-pill:999px;
  --topbar-h:72px; --preset-panel-w:318px; --inspector-w:360px;
  --chain-card-min-w:92px; --chain-card-h:88px; --library-card-min-w:172px; --library-card-h:196px;
  --icon-library:108px; --icon-chain:42px; --font-ui:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; --font-mono:ui-monospace,SFMono-Regular,Consolas,monospace;
}
[data-theme="black-red"]{--accent-main:#ff4545;--accent-soft:#ff9a9a;--accent-purple:#ff4545;--border-strong:rgba(255,69,69,.65);--glow-accent:0 0 38px rgba(255,69,69,.18)}
[data-theme="pastel-beige"]{color-scheme:light;--surface-app:#f5efe6;--surface-panel:rgba(255,250,241,.92);--surface-panel-2:rgba(255,248,236,.96);--surface-card:rgba(255,249,238,.96);--surface-card-hover:#fffdf7;--border-soft:rgba(112,91,70,.18);--border-strong:rgba(108,132,220,.55);--text-main:#2c2927;--text-muted:#766e67;--accent-main:#748cff;--accent-soft:#9eaeff;--accent-purple:#a58cff;--glow-accent:0 0 36px rgba(116,140,255,.18)}
*{box-sizing:border-box}html,body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 0%,rgba(131,156,255,.16),transparent 34rem),radial-gradient(circle at 70% 15%,rgba(167,133,255,.12),transparent 28rem),var(--surface-app);color:var(--text-main);font-family:var(--font-ui)}
button,input,select,label,h1,h2,h3,.presetTitle,.presetName,.effectName,.effectCategory,.chainLabel,.chainCaption,.categoryTab,.statusLine,.devicePill,.paramRow label,.paramRow output{white-space:nowrap}
button,input{font:inherit}button{min-width:max-content;border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:9px 12px;background:var(--surface-card);color:var(--text-main);cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}
button:hover:not(:disabled){transform:translateY(-1px);border-color:var(--border-strong);box-shadow:var(--glow-accent)}button:disabled{opacity:.46;cursor:not-allowed}button.primary{border-color:var(--border-strong);background:linear-gradient(180deg,color-mix(in srgb,var(--accent-main) 24%,transparent),var(--surface-card))}
input{border:1px solid var(--border-soft);border-radius:var(--radius-sm);background:var(--surface-panel-2);color:var(--text-main);padding:10px 12px;min-width:0}h1,h2,h3{margin:0}h1{font-size:24px;letter-spacing:-.03em}h1 span{color:var(--accent-main)}h2{font-size:14px;text-transform:uppercase;letter-spacing:.04em}h3{font-size:13px;color:var(--accent-soft)}.sub{color:var(--text-muted);font-size:12px}
.topbar{height:var(--topbar-h);padding:12px 18px;display:grid;grid-template-columns:var(--preset-panel-w) 235px minmax(300px,1fr) auto;gap:var(--space-4);align-items:center;border-bottom:1px solid var(--border-soft);background:color-mix(in srgb,var(--surface-app) 72%,black 28%);position:sticky;top:0;z-index:20}.brand,.devicePill,.presetNav,.topActions,.sectionHeader,.presetFilters,.libraryRight,.chainTools{display:flex;align-items:center;gap:var(--space-2)}.brand{gap:12px}.brandMark{width:42px;height:42px;border-radius:14px;border:1px solid var(--border-strong);display:grid;place-items:center;color:var(--accent-soft);font-weight:900;box-shadow:var(--glow-accent)}.devicePill{min-width:max-content;padding:10px 12px;border:1px solid var(--border-soft);border-radius:var(--radius-card);background:var(--surface-panel);color:var(--text-muted)}.dot{width:9px;height:9px;border-radius:50%;background:var(--accent-ok);display:inline-block;box-shadow:0 0 16px color-mix(in srgb,var(--accent-ok) 70%,transparent)}.presetNav{justify-content:center;justify-self:center;border:1px solid var(--border-soft);border-radius:var(--radius-card);background:var(--surface-panel);padding:4px;min-width:420px}.presetTitle{font-weight:760;font-size:17px;padding:0 32px}.iconBtn{width:38px;height:38px;padding:0;display:grid;place-items:center}.iconBtn.active{border-color:var(--border-strong)}
.appLayout{height:calc(100vh - var(--topbar-h));padding:var(--space-4);display:grid;grid-template-columns:var(--preset-panel-w) minmax(0,1fr) var(--inspector-w);gap:var(--space-4);overflow:hidden}.panel{border:1px solid var(--border-soft);border-radius:var(--radius-card);background:var(--surface-panel);box-shadow:0 18px 70px rgba(0,0,0,.28);min-width:0}.sectionHeader{justify-content:space-between}.presetPanel,.inspector{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);overflow:hidden}.search{width:100%}.search.compact{width:240px}.presetList{display:grid;gap:var(--space-2);overflow:auto;padding-right:2px}.presetGroup{margin-top:var(--space-2);color:var(--text-muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}.presetItem{min-width:max-content;display:grid;grid-template-columns:42px max-content max-content;align-items:center;gap:var(--space-3);border:1px solid var(--border-soft);border-radius:14px;background:var(--surface-card);padding:10px}.presetItem.active{border-color:var(--border-strong);box-shadow:var(--glow-accent)}.presetNo{color:var(--accent-soft);font-family:var(--font-mono)}.presetName{font-weight:680}.presetBadge{font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}
.centerStage{display:grid;grid-template-rows:295px minmax(0,1fr);gap:var(--space-4);min-width:0;min-height:0}.chainPanel{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);min-width:0}.zoneHint{color:var(--text-muted);border:1px dashed var(--border-soft);border-radius:var(--radius-pill);padding:4px 10px;font-family:var(--font-mono);font-size:12px}.zoneHint.pre{color:var(--accent-purple)}.zoneHint.post{color:var(--accent-main)}
.chainCanvas{position:relative;flex:1;min-height:0;border-radius:var(--radius-card);border:1px solid var(--border-soft);background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--accent-main) 12%,transparent),transparent 24rem);overflow-x:auto;overflow-y:hidden;padding:var(--space-4)}.chainLine{position:absolute;left:36px;right:36px;top:50%;height:2px;background:linear-gradient(90deg,transparent,var(--accent-purple),var(--accent-main),transparent);opacity:.55}.chain{position:relative;z-index:1;display:flex;align-items:center;gap:var(--space-3);min-width:max-content;height:100%}
.chainBubble,.dropZone{height:var(--chain-card-h);min-width:var(--chain-card-min-w);width:auto;border-radius:var(--radius-bubble);border:1px solid var(--border-soft);background:var(--surface-card);padding:10px 13px;display:grid;grid-template-rows:42px max-content;align-content:center;justify-items:center;gap:5px;color:var(--text-main);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}.chainBubble{cursor:pointer}.chainBubble:hover,.chainBubble.selected{border-color:var(--border-strong);box-shadow:var(--glow-accent);transform:translateY(-2px)}.chainBubble.locked{cursor:default}.chainIcon{width:var(--icon-chain);height:var(--icon-chain);object-fit:contain}.chainFallbackIcon{width:var(--icon-chain);height:var(--icon-chain);border-radius:13px;border:1px solid var(--border-soft);display:grid;place-items:center;color:var(--accent-soft)}.chainLabel{font-size:12px;font-weight:720}.dropZone{border-style:dashed;color:var(--accent-soft);background:color-mix(in srgb,var(--surface-card) 78%,var(--accent-purple) 8%)}.dropZone.hoverOk{border-color:var(--border-strong);box-shadow:var(--glow-accent);transform:scale(1.04)}.dropZone.hoverBad{border-color:var(--accent-danger)}.statusLine{min-width:max-content;color:var(--text-muted);font-size:12px;white-space:nowrap;overflow-x:auto}
.libraryPanel{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);overflow:hidden}.categoryTabs{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:2px}.categoryTab{border-radius:var(--radius-pill);padding:8px 12px}.categoryTab.active{border-color:var(--border-strong);color:var(--accent-soft);box-shadow:var(--glow-accent)}.effectGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--library-card-min-w),max-content));gap:var(--space-4);overflow:auto;padding:2px 6px 8px 2px;align-content:start}.pedalCard{min-width:var(--library-card-min-w);min-height:var(--library-card-h);width:max-content;border:1px solid var(--border-soft);border-radius:var(--radius-bubble);background:var(--surface-card);padding:var(--space-3);display:grid;grid-template-rows:112px max-content max-content;justify-items:center;gap:7px;cursor:grab;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}.pedalCard:hover{transform:translateY(-3px) scale(1.012);border-color:var(--border-strong);box-shadow:var(--glow-accent);background:var(--surface-card-hover)}.pedalCard.dragging{opacity:.52;transform:scale(.88)}.pedalIcon{width:var(--icon-library);height:var(--icon-library);object-fit:contain}.effectName{font-weight:760}.effectCategory{font-size:12px;color:var(--text-muted);font-family:var(--font-mono)}
.inspector{overflow:auto}.selectedCard{min-height:184px;border:1px solid var(--border-soft);border-radius:var(--radius-bubble);background:var(--surface-card);display:grid;place-items:center;padding:var(--space-4)}.selectedEffect{display:grid;justify-items:center;gap:var(--space-2)}.selectedEffect img{width:122px;height:122px;object-fit:contain}.selectedEffectName{font-size:20px;font-weight:800;white-space:nowrap}.selectedEffectMeta{color:var(--text-muted);font-family:var(--font-mono);font-size:12px;white-space:nowrap}.emptyState{color:var(--text-muted);white-space:nowrap}.controlStack{display:grid;gap:var(--space-3)}.paramRow{display:grid;grid-template-columns:72px 1fr 62px;gap:var(--space-2);align-items:center}.paramRow label{color:var(--text-muted)}.paramRow output{font-family:var(--font-mono);color:var(--accent-soft)}input[type="range"]{accent-color:var(--accent-main)}.quickPicks{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}.quickPick{display:flex;gap:8px;align-items:center}.quickPick img{width:30px;height:30px}.devPanel{margin-top:auto;border-top:1px solid var(--border-soft);padding-top:var(--space-3)}.devPanel.collapsed .devBody{display:none}.devBody pre{max-height:180px;overflow:auto;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);white-space:pre}
.shrinkGhost{position:fixed;z-index:999;pointer-events:none;width:172px;height:196px;border:1px solid var(--border-strong);border-radius:var(--radius-bubble);background:var(--surface-card);box-shadow:var(--glow-accent);display:grid;place-items:center;animation:shrinkIntoSlot .38s ease forwards}.shrinkGhost img{width:108px;height:108px}@keyframes shrinkIntoSlot{to{transform:scale(.48);opacity:.2}}
@media(max-width:1250px){.appLayout{grid-template-columns:var(--preset-panel-w) minmax(0,1fr)}.inspector{grid-column:1/-1;max-height:320px}.topbar{grid-template-columns:var(--preset-panel-w) 1fr auto}}
@media(max-width:920px){.topbar,.appLayout{grid-template-columns:1fr;height:auto;overflow:visible}.appLayout{display:block}.panel{margin:var(--space-3)}.centerStage{display:block}.chainPanel,.libraryPanel{margin-bottom:var(--space-3)}.presetNav{min-width:0}.topActions{overflow-x:auto}}


/* === v0.4.1 compact density override === */
:root {
  --topbar-h: 48px;
  --preset-panel-w: 238px;
  --inspector-w: 272px;
  --space-2: 5px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 14px;
  --radius-sm: 7px;
  --radius-card: 12px;
  --radius-bubble: 15px;
  --chain-card-min-w: 58px;
  --chain-card-h: 52px;
  --library-card-min-w: 112px;
  --library-card-h: 126px;
  --icon-library: 70px;
  --icon-chain: 27px;
}
body { font-size: 12px; }
.topbar { padding: 7px 10px; grid-template-columns: var(--preset-panel-w) 176px minmax(220px,1fr) auto; gap: 8px; }
.brandMark { width: 32px; height: 32px; border-radius: 10px; font-size: 12px; }
h1 { font-size: 17px; }
.sub { font-size: 9px; }
.devicePill { padding: 7px 9px; font-size: 11px; }
.presetNav { min-width: 280px; padding: 2px; }
.presetTitle { font-size: 13px; padding: 0 12px; }
.iconBtn { width: 28px; height: 28px; }
button { padding: 6px 8px; font-size: 11px; }
input { padding: 7px 8px; font-size: 11px; }
.appLayout { padding: 8px; gap: 8px; }
.presetPanel, .inspector, .chainPanel, .libraryPanel { padding: 9px; gap: 7px; }
h2 { font-size: 11px; }
h3 { font-size: 10px; }
.centerStage { grid-template-rows: 170px minmax(0,1fr); gap: 8px; }
.chainCanvas { padding: 8px; }
.chainBubble, .dropZone { padding: 5px 7px; grid-template-rows: 27px max-content; gap: 2px; }
.chainLabel { font-size: 9.5px; }
.chainFallbackIcon { border-radius: 9px; font-size: 11px; }
.statusLine { font-size: 10px; }
.zoneHint { padding: 2px 7px; font-size: 10px; }
.categoryTabs { gap: 5px; }
.categoryTab { padding: 5px 8px; font-size: 10px; }
.search.compact { width: 164px; }
.effectGrid { gap: 8px; grid-template-columns: repeat(auto-fill,minmax(var(--library-card-min-w),max-content)); }
.pedalCard { padding: 7px; grid-template-rows: 72px max-content max-content; gap: 3px; }
.effectName { font-size: 10.5px; }
.effectCategory { font-size: 9px; }
.presetItem { grid-template-columns: 32px max-content max-content; padding: 7px; gap: 7px; border-radius: 9px; }
.presetGroup { font-size: 9px; }
.presetNo, .presetBadge { font-size: 9px; }
.presetName { font-size: 10.5px; }
.selectedCard { min-height: 116px; padding: 8px; }
.selectedEffect img { width: 76px; height: 76px; }
.selectedEffectName { font-size: 14px; }
.selectedEffectMeta { font-size: 10px; }
.paramRow { grid-template-columns: 52px 1fr 44px; gap: 5px; font-size: 10px; }
.quickPicks { gap: 5px; }
.quickPick img { width: 22px; height: 22px; }
.devBody pre { max-height: 100px; font-size: 9px; }
.shrinkGhost { width: 112px; height: 126px; }
.shrinkGhost img { width: 70px; height: 70px; }
.topActions { gap: 5px; }


/* === v0.4.2 chain polish override === */
:root {
  --topbar-h: 54px;
  --preset-panel-w: 252px;
  --inspector-w: 292px;
  --space-2: 6px;
  --space-3: 9px;
  --space-4: 12px;
  --space-5: 16px;
  --radius-sm: 8px;
  --radius-card: 14px;
  --radius-bubble: 18px;
  --chain-card-min-w: 74px;
  --chain-card-h: 66px;
  --library-card-min-w: 136px;
  --library-card-h: 156px;
  --icon-library: 82px;
  --icon-chain: 34px;
}
body { font-size: 12.5px; }
.topbar { padding: 8px 12px; grid-template-columns: var(--preset-panel-w) 210px minmax(280px,1fr) auto; gap: 10px; }
.brandMark { width: 34px; height: 34px; border-radius: 11px; font-size: 12px; }
h1 { font-size: 18px; }
.sub { font-size: 10px; }
.devicePill { padding: 8px 10px; font-size: 11px; }
.presetNav { min-width: 316px; padding: 3px; }
.presetTitle { font-size: 14px; padding: 0 16px; }
.iconBtn { width: 30px; height: 30px; }
button { padding: 7px 9px; font-size: 11px; }
input { padding: 8px 9px; font-size: 11px; }
.appLayout { padding: 10px; gap: 10px; }
.presetPanel, .inspector, .chainPanel, .libraryPanel { padding: 10px; gap: 8px; }
.centerStage { grid-template-rows: 188px minmax(0,1fr); gap: 10px; }
.chainCanvas { padding: 12px; overflow: hidden; background: linear-gradient(180deg, rgba(24,28,42,.92), rgba(15,18,29,.88)); }
.chainLine { left: 20px; right: 20px; top: 53%; opacity: .48; }
.chain { width: 100%; min-width: 100%; height: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--chain-card-min-w),1fr); gap: 10px; align-items: center; }
.chainBubble,.dropZone {
  position: relative;
  width: 100%; min-width: 0; height: var(--chain-card-h);
  padding: 6px 8px 7px;
  grid-template-rows: 36px max-content;
  gap: 3px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 45%, rgba(6,10,18,.56) 0 24px, rgba(6,10,18,0) 25px),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.00) 38%),
    linear-gradient(180deg, rgba(30,36,55,.96), rgba(22,27,41,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -16px 26px rgba(0,0,0,.26);
}
.chainBubble::after,.dropZone::after {
  content: '';
  position: absolute; inset: 8px 10px 16px;
  border-radius: 14px;
  box-shadow: inset 0 10px 16px rgba(255,255,255,.03), inset 0 -10px 18px rgba(0,0,0,.22);
  pointer-events: none;
}
.chainBubble:hover,.chainBubble.selected { transform: translateY(-1px); }
.chainVisual {
  width: 38px; height: 38px; border-radius: 13px;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(10,14,24,.65) 0 14px, rgba(10,14,24,0) 15px),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(34,40,59,.98), rgba(23,28,42,.98));
  border: 1px solid rgba(139,158,206,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -8px 14px rgba(0,0,0,.28);
  z-index: 1;
}
.chainVisual.fixed { color: var(--accent-soft); }
.chainIcon { width: var(--icon-chain); height: var(--icon-chain); object-fit: contain; display: block; }
.chainFallbackIcon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--accent-soft); }
.chainFallbackIcon.add { font-size: 20px; font-weight: 700; }
.fixedGlyphSvg { width: 24px; height: 28px; display: block; }
.chainLabel { position: relative; z-index: 1; font-size: 10.5px; letter-spacing: -.01em; }
.dropZone { border-style: solid; border-color: rgba(127,153,255,.24); }
.dropZone .chainLabel { color: var(--accent-soft); }
.statusLine { font-size: 10.5px; }
.effectGrid { gap: 10px; grid-template-columns: repeat(auto-fill,minmax(var(--library-card-min-w),1fr)); }
.pedalCard {
  width: 100%; min-width: 0; min-height: var(--library-card-h);
  padding: 10px 8px; grid-template-rows: 88px max-content max-content; gap: 4px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(31,37,54,.96), rgba(23,28,41,.96));
}
.pedalIconWrap {
  width: 96px; height: 96px; border-radius: 26px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 42%, rgba(10,14,24,.58) 0 34px, rgba(10,14,24,0) 35px), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.00));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -12px 20px rgba(0,0,0,.2);
}
.pedalIcon { width: var(--icon-library); height: var(--icon-library); }
.effectName { font-size: 12px; text-align: center; }
.effectCategory { font-size: 9.5px; }
.search.compact { width: 180px; }
.selectedCard { min-height: 128px; padding: 10px; }
.selectedEffect img { width: 82px; height: 82px; }
.quickPick { justify-content: flex-start; }
.quickPickIcon {
  width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border: 1px solid rgba(139,158,206,.16);
}
.quickPick img { width: 18px; height: 18px; }
.devPanel.collapsed .sectionHeader { margin-bottom: 0; }


/* === v0.4.3 visual + sorting fix === */
.brandMark.spiderWebMark { display:grid; place-items:center; background: radial-gradient(circle at 50% 50%, rgba(95,113,255,.18), rgba(95,113,255,0) 60%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); }
.brandWebSvg { width: 26px; height: 26px; display:block; filter: drop-shadow(0 0 8px rgba(111,132,255,.28)); }
.libraryRight { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.sortSelect { min-width: 128px; border:1px solid var(--border-soft); background:var(--surface-raised); color:var(--text-main); border-radius:12px; padding:8px 10px; font:inherit; }
.libraryMeta { color: var(--text-muted); font-size: 11px; padding: 0 2px; }
.categoryTabs { gap: 8px; padding-bottom: 4px; }
.categoryTab { display:inline-flex; align-items:center; gap:8px; padding:7px 11px; }
.categoryTab .count { color: var(--accent-soft); background: rgba(112,133,255,.12); border:1px solid rgba(112,133,255,.18); padding:1px 6px; border-radius:999px; font-size:10px; }
.effectGrid { display:flex; flex-direction:column; gap:12px; overflow:auto; padding:2px 6px 10px 2px; }
.effectSection { display:flex; flex-direction:column; gap:8px; }
.effectSectionHeader { display:flex; align-items:center; justify-content:space-between; padding:0 4px; }
.effectSectionHeader h3 { margin:0; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color: var(--text-main); }
.effectSectionHeader span { font-size:10px; color:var(--accent-soft); background:rgba(112,133,255,.10); border:1px solid rgba(112,133,255,.16); padding:2px 7px; border-radius:999px; }
.effectSectionGrid { display:grid; grid-template-columns: repeat(auto-fill, minmax(var(--library-card-min-w), 1fr)); gap:10px; }
.pedalCard { width:100%; }
.chainVisual.fixed .chainIcon.fixedAsset { width: 32px; height: 32px; }
.fixedMiniSvg { width:28px; height:28px; display:block; }
.selectedEffect > img { width:82px; height:82px; object-fit:contain; }

/* === v0.4.4 render/deploy fix === */
.brandMark.spiderWebMark {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(95,113,255,.18), rgba(95,113,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}
.brandWebSvg {
  width: 26px;
  height: 26px;
  display: block;
  filter: drop-shadow(0 0 8px rgba(111,132,255,.28));
}
.libraryRight {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.sortSelect {
  min-width: 128px;
  border: 1px solid var(--border-soft);
  background: var(--surface-card);
  color: var(--text-main);
  border-radius: 12px;
  padding: 8px 10px;
  font: inherit;
  white-space: nowrap;
}
.libraryMeta {
  color: var(--text-muted);
  font-size: 11px;
  padding: 0 2px;
  white-space: nowrap;
}
.categoryTabs {
  gap: 8px;
  padding-bottom: 4px;
}
.categoryTab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
}
.categoryTab .count {
  color: var(--accent-soft);
  background: rgba(112,133,255,.12);
  border: 1px solid rgba(112,133,255,.18);
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
}
.effectGrid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
  padding: 2px 6px 10px 2px;
}
.effectGrid.flat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--library-card-min-w), 1fr));
}
.effectSection {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.effectSectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}
.effectSectionHeader h3 {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-main);
}
.effectSectionHeader span {
  font-size: 10px;
  color: var(--accent-soft);
  background: rgba(112,133,255,.10);
  border: 1px solid rgba(112,133,255,.16);
  padding: 2px 7px;
  border-radius: 999px;
}
.effectSectionGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--library-card-min-w), 1fr));
  gap: 10px;
}
.pedalCard {
  width: 100%;
}
.chainVisual.fixed .chainIcon.fixedAsset {
  width: 32px;
  height: 32px;
}
.fixedMiniSvg {
  width: 28px;
  height: 28px;
  display: block;
}
.selectedEffect > img {
  width: 82px;
  height: 82px;
  object-fit: contain;
}

/* === v0.4.7 drag contract / no-selection / max-3 fix === */
html,
body,
.appLayout,
.topbar,
.panel,
.pedalCard,
.chainBubble,
.categoryTab,
.presetItem,
button {
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
pre,
.devBody,
.devBody pre {
  -webkit-user-select: text;
  user-select: text;
}

button,
.categoryTab,
.presetItem,
.pedalCard,
.chainBubble,
.quickPick,
.iconBtn,
.sortSelect {
  cursor: pointer;
}

.pedalCard,
.chainBubble {
  touch-action: none;
}

.dragGhost {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  width: var(--library-card-min-w);
  min-height: var(--library-card-h);
  padding: 10px 8px;
  display: grid;
  grid-template-rows: 88px max-content max-content;
  justify-items: center;
  gap: 4px;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(31,37,54,.98), rgba(23,28,41,.98));
  box-shadow: 0 18px 48px rgba(0,0,0,.35), var(--glow-accent);
}

.dragGhost.fromChain {
  transform: scale(1.08);
}

.chain {
  grid-auto-columns: minmax(54px, 1fr);
}

.chainZone {
  position: relative;
  min-width: 18px;
  height: var(--chain-card-h);
  border: 1px dashed rgba(127,153,255,.25);
  border-radius: 16px;
  display: grid;
  place-items: center;
  opacity: .55;
  background:
    radial-gradient(circle at 50% 50%, rgba(127,153,255,.14), rgba(127,153,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  transition: opacity .16s ease, transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.chainZone:hover,
.chainZone.hoverOk {
  opacity: 1;
  border-color: var(--border-strong);
  box-shadow: var(--glow-accent);
  transform: translateY(-1px);
}

.chainZone.hoverBad {
  opacity: 1;
  border-color: var(--accent-danger);
}

.zoneLabel {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent-soft);
  letter-spacing: .08em;
}

.chainBubble {
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    width .18s ease,
    height .18s ease;
}

.chainBubble[draggable="true"] {
  cursor: grab;
}

.chainBubble[draggable="true"]:active {
  cursor: grabbing;
}

.chainBubble.dragging {
  opacity: .36;
  transform: scale(.92);
}

.pedalCard.dragging {
  opacity: .45;
  transform: scale(.92);
}

.chainIconWrap {
  width: 38px;
  height: 38px;
}

.chainIconWrap .pedalIcon,
.chainIcon {
  width: var(--icon-chain);
  height: var(--icon-chain);
  object-fit: contain;
}

.inspectorIconWrap {
  width: 96px;
  height: 96px;
}

.inspectorIconWrap .pedalIcon {
  width: 82px;
  height: 82px;
}

.chainName {
  max-width: 100%;
  overflow: visible;
  white-space: nowrap;
}

.chainCategory {
  display: none;
}

.effectGrid.deleteTarget,
.libraryPanel:has(.effectGrid.deleteTarget) {
  outline: 2px solid rgba(255,142,142,.45);
  outline-offset: -3px;
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at 50% 20%, rgba(255,142,142,.10), transparent 28rem),
    var(--surface-panel);
}

.effectGrid.deleteTarget::before {
  content: "Drop here to remove from chain";
  position: sticky;
  top: 0;
  z-index: 5;
  display: block;
  width: max-content;
  margin: 0 0 8px 0;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,142,142,.45);
  color: #ffd2d2;
  background: rgba(120,30,30,.36);
  white-space: nowrap;
}

.statusLine::after {
  content: " · " attr(data-count) "/3 movable FX";
  color: var(--accent-soft);
}

.dropZone {
  display: none !important;
}

/* Make non-implemented actions visually honest */
#btnSave[disabled],
#btnIdentity[disabled] {
  cursor: not-allowed;
}

/* === v0.4.8 Russian admin/updater UI === */
.topActions { flex-wrap: wrap; justify-content: flex-end; }
#btnSettings { border-color: var(--border-strong); }
.statusLine::after { content: " · " attr(data-count) "/3 FX"; color: var(--accent-soft); }

.modalBackdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
}
.modalBackdrop.open { display: grid; }
.settingsDialog {
  width: min(920px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 28px));
  display: grid;
  grid-template-rows: max-content max-content max-content minmax(0,1fr);
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb,var(--accent-main) 14%,transparent), transparent 30rem),
    var(--surface-panel);
  box-shadow: 0 28px 90px rgba(0,0,0,.48), var(--glow-accent);
}
.settingsHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.settingsHeader h2 { font-size: 18px; text-transform: none; letter-spacing: -.02em; }
.settingsHeader p,
.mutedText {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
}
.adminNotice {
  padding: 9px 11px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: var(--surface-card);
  color: var(--text-muted);
  font-size: 12px;
  white-space: normal;
}
.adminNotice.ok { border-color: color-mix(in srgb,var(--accent-ok) 60%,transparent); color: var(--accent-ok); }
.adminNotice.warn { border-color: rgba(255,205,112,.42); color: #ffe1a3; }
.adminNotice.bad { border-color: rgba(255,142,142,.52); color: #ffd0d0; }
.settingsTabs,
.formActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.settingsTab.active { border-color: var(--border-strong); box-shadow: var(--glow-accent); }
.settingsLogin,
.settingsContent {
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}
.settingsLogin[hidden],
.settingsContent[hidden] { display: none; }
.settingsLogin,
.settingsPane {
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: color-mix(in srgb,var(--surface-card) 82%,transparent);
  padding: 14px;
}
.settingsPane { display: none; }
.settingsPane.active { display: block; }
.settingsPane h3,
.settingsLogin h3 { margin-bottom: 12px; }
.formGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.formGrid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.formGrid label,
.fileDrop {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.formGrid input,
.formGrid select,
.fileDrop input {
  width: 100%;
  min-height: 38px;
}
.formGrid select {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-panel-2);
  color: var(--text-main);
  padding: 9px 10px;
  font: inherit;
}
.fileDrop {
  margin: 8px 0 12px;
  padding: 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 18px;
  background: color-mix(in srgb,var(--accent-main) 7%,transparent);
}
.progressBox {
  height: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-panel-2);
  overflow: clip;
  margin: 8px 0 12px;
}
.progressBar {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-main), var(--accent-soft));
  transition: width .16s ease;
}
.updateLog {
  min-height: 120px;
  max-height: 220px;
  overflow: auto;
  margin: 12px 0 0;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: pre-wrap;
}
code {
  padding: 1px 5px;
  border-radius: 7px;
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb,var(--surface-panel-2) 80%,transparent);
  color: var(--accent-soft);
}

@media (max-width: 920px) {
  .settingsDialog { max-height: calc(100vh - 16px); padding: 12px; }
  .formGrid.two { grid-template-columns: 1fr; }
}

/* === v0.4.9 DB presets/library UI === */
.presetMeta {
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.35;
  padding: 0 2px 2px;
}
.presetFilters button.active {
  border-color: var(--border-strong);
  color: var(--text-main);
  background: color-mix(in srgb, var(--accent-main) 16%, var(--surface-card));
}
#settingsDatabase .formActions {
  flex-wrap: wrap;
}
#databaseLog {
  min-height: 78px;
}
.presetItem .presetName {
  min-width: 0;
}