@layer interface {
 /* Inventory keeps the existing item/action owners, with a clear browsing hierarchy. */
 .flow-modal[data-view="backpack"] .inventory-popup { padding-top:16px; }
 .flow-modal[data-view="backpack"] .inventory-popup .backpack-summary { align-items:center; padding:14px 18px; gap:24px; margin:0 0 14px; background:linear-gradient(120deg,#292719,#151a12); border-color:#71603b; }
 .bag-gold { display:flex; align-items:baseline; gap:10px; }
 .bag-gold small { color:#b6a176; font:.75rem var(--ui); }
 .bag-capacity { width:min(260px,55%); }
 .bag-capacity p { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
 .flow-modal[data-view="backpack"] .inventory-popup .bag-capacity p { font:.75rem var(--ui); }
 .flow-modal[data-view="backpack"] .inventory-popup .bag-capacity strong { font:1rem var(--display); white-space:nowrap; }
 .bag-capacity-track { height:4px; margin-top:7px; background:#0b100a; border:1px solid #494932; }
 .bag-capacity-track i { display:block; height:100%; width:var(--value); background:#b79a54; }
 .bag-containers { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
 .bag-containers .flow-button { padding:7px 10px; font-size:.75rem; }
 .flow-modal[data-view="backpack"] .inventory-popup .popup-branches { gap:6px; margin-bottom:16px; }
 .flow-modal[data-view="backpack"] .inventory-popup .popup-branches button { display:flex; align-items:center; gap:8px; padding:7px 10px; font-size:.75rem; border-radius:3px; }
 .flow-modal[data-view="backpack"] .inventory-popup .popup-branches button span { font-size:.65rem; color:#a59e83; }
 .flow-modal[data-view="backpack"] .inventory-popup .backpack-browser { grid-template-columns:minmax(0,1fr) 340px; gap:18px; }
 .flow-modal[data-view="backpack"] .inventory-popup .backpack-grid { grid-template-columns:repeat(auto-fill,minmax(125px,1fr)); gap:9px; }
 .flow-modal[data-view="backpack"] .inventory-popup .bag-item { min-height:140px; justify-content:center; padding:12px 8px 10px; gap:8px; border-color:#595138; background:radial-gradient(ellipse at top,#343224,#13180f); border-radius:4px; cursor:pointer; }
 .flow-modal[data-view="backpack"] .inventory-popup .bag-item.is-selected { background:radial-gradient(ellipse at top,#534326,#262419); border-color:#dbb467; box-shadow:inset 0 0 0 1px #dbb46766; }
 .flow-modal[data-view="backpack"] .inventory-popup .bag-item:hover { border-color:#b3995b; }
 .flow-modal[data-view="backpack"] .inventory-popup .bag-item img.game-art-icon { width:64px; height:64px; }
 .flow-modal[data-view="backpack"] .inventory-popup .bag-item strong { font:.8rem/1.35 var(--display); min-height:2.7em; display:flex; align-items:center; justify-content:center; overflow-wrap:anywhere; }
 .flow-modal[data-view="backpack"] .inventory-popup .bag-stack-count { padding:2px 5px; top:6px; right:6px; border-radius:3px; background:#0e110bce; font-size:.65rem; }
 .bag-mark { position:absolute; left:7px; top:7px; color:#eac566; font:.65rem var(--ui); }
 .flow-modal[data-view="backpack"] .inventory-popup .bag-item-detail { top:12px; padding:16px; text-align:left; border-color:#8d7540; background:linear-gradient(145deg,#29291c,#12190f); border-radius:4px; }
 .bag-item-hero { display:grid; grid-template-columns:80px minmax(0,1fr); align-items:center; gap:14px; padding-bottom:14px; border-bottom:1px solid #514c31; }
 .flow-modal[data-view="backpack"] .inventory-popup .bag-item-hero .timed-icon img.game-art-icon { width:80px; height:80px; }
 .flow-modal[data-view="backpack"] .inventory-popup .bag-item-hero small { font:.55rem var(--ui); letter-spacing:.14em; color:#a59a71; }
 .flow-modal[data-view="backpack"] .inventory-popup .bag-item-hero h3 { font:1.15rem/1.3 var(--display); margin:5px 0; overflow-wrap:anywhere; }
 .flow-modal[data-view="backpack"] .inventory-popup .bag-item-hero p { margin:0; font:.7rem var(--ui); color:#b1b09b; }
 .flow-modal[data-view="backpack"] .inventory-popup .bag-item-detail p { font:.8rem/1.6 var(--ui); }
 .flow-modal[data-view="backpack"] .inventory-popup .item-facts dl { font:.8rem var(--ui); }
 .flow-modal[data-view="backpack"] .inventory-popup .item-facts dl > div { border-bottom:1px solid #5c59332b; padding:5px 0; }
 .flow-modal[data-view="backpack"] .inventory-popup .item-facts dt { color:#a9a58e; }
 .flow-modal[data-view="backpack"] .inventory-popup .item-facts dd { color:#eee0ba; text-align:right; }
 .flow-modal[data-view="backpack"] .inventory-popup .bag-detail-actions { justify-content:flex-start; gap:7px; margin:14px 0 10px; }
 .flow-modal[data-view="backpack"] .inventory-popup .bag-detail-actions:empty { display:none; }
 .flow-modal[data-view="backpack"] .inventory-popup .bag-detail-actions .flow-button { padding:8px 13px; font-size:.8rem; border-color:#aa8b46; background:#3c351e; }
 .bag-item-utilities { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; padding-top:12px; border-top:1px solid #514c31; }
 .bag-item-utilities .flow-button { padding:6px 8px; font-size:.7rem; }
 .bag-item-utilities [aria-pressed="true"] { color:#f3d78f; background:#41351d; border-color:#ae8e41; }
 .flow-modal[data-view="backpack"] .inventory-popup .sale-control { margin-top:14px; padding-top:12px; border-top:1px solid #514c31; flex-wrap:wrap; }
 .flow-modal[data-view="backpack"] .inventory-popup .sale-control label { flex:1; font-size:.7rem; min-width:120px; }
 .flow-modal[data-view="backpack"] .inventory-popup .sale-select select { width:100%; }
 .flow-modal[data-view="backpack"] .inventory-popup .bag-drop-hint { margin-top:10px; color:#a9a58e; font:.65rem/1.5 var(--ui); }

 /* Techniques: bring the connected tree into view before secondary management. */
 .techniques-popup { padding-top:10px; }
 .techniques-popup .technique-library-heading { margin:0 0 8px; align-items:center; flex-direction:row; flex-wrap:wrap; gap:10px; }
 .techniques-popup .technique-library-heading h3 { font-size:1.1rem; }
 .techniques-popup .technique-library-heading p { margin:0; font:.75rem var(--ui); padding:4px 8px; border:1px solid #655936; background:#252619; }
 .techniques-popup .technique-library-heading p strong { color:#f0d79b; margin-right:5px; font-size:1rem; }
 .techniques-popup .loadout-board { padding:8px; margin-bottom:8px; border-color:#6b5b35; background:linear-gradient(110deg,#29271a,#161c12); }
 .loadout-caption { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; color:#c4b991; font:.65rem var(--ui); }
 .loadout-caption b { font-weight:400; color:#a5a88d; }
 .techniques-popup .loadout-slots { gap:6px; }
 .techniques-popup .loadout-slot { position:relative; display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; min-height:52px; gap:6px; padding:6px; border-color:#675c36; text-align:left; }
 .techniques-popup .loadout-slot .timed-icon { width:30px; height:30px; }
 .techniques-popup .loadout-slot img { width:30px; height:30px; }
 .techniques-popup .loadout-slot strong { font:.65rem/1.25 var(--display); padding-right:10px; overflow-wrap:anywhere; }
 .techniques-popup .loadout-slot .flow-button { position:absolute; top:1px; right:1px; width:20px; height:20px; min-height:0; margin:0; padding:0; border:0; background:transparent; font:16px/20px var(--ui); color:#c1b493; }
 .techniques-popup .loadout-slot--empty { display:flex; align-items:center; justify-content:center; gap:5px; border-style:dashed; background:#11190e; }
 .techniques-popup .loadout-slot--empty > span { font:.65rem var(--ui); }
 .techniques-popup .loadout-slot.loadout-drop-active { border-color:#eed081; background:#454329; outline:1px solid #eed081; }
 .techniques-popup .skill-node[draggable="true"] { cursor:grab; }
 .techniques-popup .popup-branches { gap:5px; margin:0; }
 .techniques-popup .popup-branches button { padding:5px 9px; font-size:.7rem; border-radius:3px; }
 .technique-filter-row { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:7px; }
 .techniques-popup .skill-legend { gap:10px; margin:0 0 8px; font-size:.6rem; }
 .techniques-popup .skill-legend span { padding:0; border:0; background:none; }
 .techniques-popup .skill-legend span::before { content:""; display:inline-block; width:6px; height:6px; border:1px solid currentColor; margin-right:5px; border-radius:50%; }
 .techniques-popup .popup-view-switch { margin:0; }
 .techniques-popup .popup-view-switch button { padding:5px 8px; font-size:.65rem; }
 .techniques-popup .skill-workspace { margin:0; gap:14px; grid-template-columns:minmax(0,1fr) 270px; align-items:start; }
 .techniques-popup .skill-tree-scroll { max-height:460px; min-height:300px; border-color:#716039; border-radius:4px; background:radial-gradient(ellipse at top,#373924,#10180f 75%); }
 .techniques-popup .skill-node { border-radius:5px; box-shadow:0 4px 10px #0005,inset 0 1px #ffffff0a; }
 .techniques-popup .skill-detail { top:0; padding:16px; border-radius:4px; border-color:#947e46; background:linear-gradient(145deg,#30301d,#131c11); box-shadow:0 4px 12px #0004; }
 .techniques-popup .skill-detail .technique-option-heading { align-items:flex-start; gap:10px; padding-bottom:12px; border-bottom:1px solid #5e5734; }
 .techniques-popup .skill-detail h4 { font-size:1.1rem; }
 .techniques-popup .skill-detail small { display:block; margin-top:5px; font:.65rem var(--ui); color:#b9b298; }
 .techniques-popup .skill-detail p { font:.8rem/1.55 var(--ui); margin:12px 0; }
 .techniques-popup .skill-detail .flow-button { width:100%; padding:9px; font-size:.8rem; }
 .technique-reset { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:16px; padding-top:12px; border-top:1px solid #524b30; }
 .technique-reset p { margin:0; color:#a6a58f; font:.7rem/1.5 var(--ui); }
 .technique-reset .flow-button { padding:7px 10px; font-size:.75rem; }
 @media(max-width:900px) {
  .flow-modal[data-view="backpack"] .inventory-popup .backpack-browser { grid-template-columns:minmax(0,1fr) 290px; gap:12px; }
  .flow-modal[data-view="backpack"] .inventory-popup .backpack-grid { grid-template-columns:repeat(auto-fill,minmax(105px,1fr)); }
  .techniques-popup .skill-workspace { grid-template-columns:minmax(0,1fr) 235px; gap:10px; }
 }
 @media(max-width:680px) {
  .flow-modal[data-view="backpack"] .inventory-popup .backpack-browser,.techniques-popup .skill-workspace { grid-template-columns:1fr; }
  .flow-modal[data-view="backpack"] .inventory-popup .bag-item-detail,.techniques-popup .skill-detail { position:static; }
  .techniques-popup .loadout-slots { grid-template-columns:repeat(3,minmax(0,1fr)); }
 }
}