/* DUJN / Graphite — a calmer, equipment-first inventory. */
:root{--inv-accent:#d9c5a0;--inv-text:#eeeae3;--inv-text-muted:#989b9f;--inv-radius:10px;--inv-panel-bg:#191b1f;--inv-panel-border:#34373b;--inv-item-bg:#292d32;--inv-item-border:#41464d}
#app{align-items:flex-start!important;font-family:Inter,'Segoe UI',system-ui,sans-serif;color:var(--inv-text,#eeeae3)}
#app .inv-wrap{display:grid;grid-template-columns:500px 350px;grid-template-areas:'bag stash' 'loadout stash';gap:14px;align-items:start;width:max-content;max-width:none!important;padding:0;--cell:50px;--equip-frame:64px;--panel-pad:22px}
#app .panel{background:var(--inv-panel-bg,#1a1c20);border:1px solid var(--inv-panel-border,#36393e);border-radius:var(--inv-radius,12px);box-shadow:0 15px 35px #0003;padding:var(--panel-pad);min-width:0}
#app .bag{grid-area:bag;width:500px;border-top:1px solid #6d6456}
#app .secondary{grid-area:stash;width:350px;background:#15171a}
#app .equip{grid-area:loadout;width:500px;padding:14px 20px}
#app #equipBody{display:flex;gap:20px;align-items:center}#app #equipBody>.kicker{display:none}#app #equipBody>h2{font-size:13px;margin:0;width:65px}
#app #equipSlots{display:flex;gap:12px;overflow:visible}#app .equip-slot{margin:0}#app .equip-slot>span{font-size:8px;color:#96999f;letter-spacing:.6px}
#app .equip-frame{background:#22252a;border:1px solid #3a3f46;border-radius:7px;box-shadow:none}#app .equip-frame.filled{border-color:#565851}
#app h2{font-weight:550;color:var(--inv-text,#efede8);letter-spacing:-.6px}#app .bag-head h2{font-size:28px;margin:4px 0 0}#app .secondary h2{font-size:19px}
#app .kicker{font-size:9px;letter-spacing:1.8px;font-weight:500;color:var(--inv-kicker,#a0a1a4)}
#app .panel-head{margin-bottom:16px;padding-bottom:15px;border-bottom:1px solid #ffffff0c}
#app .badge{font-size:10px;font-weight:400;padding:5px 7px;border:0;border-radius:4px;background:var(--inv-badge-bg,#26292e);color:#aeb0b4}#app .badge.accent{background:#333029;color:#d9cdb6;border:0}
#app .ghost-row{margin-top:16px;padding:0;background:transparent;border:0;gap:6px}#app .craft-ghost{background:transparent;border:0;border-radius:5px;padding:7px 12px;color:#a2a4aa;font-weight:500;font-size:11px}#app .craft-ghost[aria-pressed=true]{background:#303238;color:#e5e4df}
#app .du-tools{display:flex;gap:6px;flex-wrap:nowrap;margin:16px 0 0;padding:0;border:0;background:transparent}#app .du-tools input{width:auto;flex:1 1 170px}#app .du-tools select{flex:0 0 95px}
#app .du-tools input,#app .du-tools select{background:#121417;border:1px solid #353940;padding:9px 10px;color:#d3d4d6;border-radius:6px;font-size:11px}#app .du-tools input::placeholder{color:#7d828b}#app .du-tools .btn{padding:8px;font-size:10px}#app .du-tool-hint{display:none}
#app .vitals{margin:0 0 14px;background:transparent;border:0;padding:0;gap:14px}#app .vital-track{height:2px;background:#33383e;border-radius:2px}#app .vital-track i{box-shadow:none}#app .vital-lab,#app .vital-n{color:#959a9f;font-size:9px}
#app .board .cell:not(.locked):not(.drag-valid):not(.drag-valid-foot):not(.drag-invalid):not(.drag-invalid-foot){background:var(--inv-slot-bg,#24282e)!important;border:1px solid var(--inv-slot-border,#444b54)!important;border-radius:5px;box-shadow:none}#app .board .cell:not(.locked):not(.drag-valid):not(.drag-valid-foot):not(.drag-invalid):not(.drag-invalid-foot)::after{content:none}
#app .cell.locked{background:repeating-linear-gradient(135deg,#13161a,#13161a 7px,#1c2025 7px,#1c2025 8px)!important;border:1px solid #272c32!important;opacity:.65}#app .cell.locked::after{content:none}
#app .item{background-color:var(--inv-item-bg,#30363e);border:1px solid var(--inv-item-border,#56616d);border-radius:6px;box-shadow:inset 0 1px #ffffff08,0 3px 8px #0003;transition:border-color .15s}#app .item:hover{border-color:#d9c5a0;box-shadow:inset 0 0 0 1px #d9c5a055}#app .item.du-pinned::before{color:#d9c5a0}
#app .btn{background:var(--inv-btn-bg,#30343b);border:1px solid #454b54;border-radius:6px;color:#e1e1df;font-weight:500;box-shadow:none}#app .btn:hover{background:#3d424a;border-color:#777b81}#app .btn.primary{background:var(--inv-btn-primary,#d5c6ab);color:#242019;border-color:var(--inv-btn-primary,#d5c6ab);font-weight:650}#app .btn.primary:hover{background:#e4d7c1}
#app .controls{margin-top:16px;padding-top:14px;border-top:1px solid #363a41}#app .amount-input{background:#101316;border:1px solid #444a53;border-radius:6px;color:#d7d9db}#app .hint{font-size:9px;color:#838b96;margin-bottom:0}#app kbd{background:#292e35;border-color:#454c55;color:#b9c1ca;box-shadow:none}
.slot-legend{display:flex;gap:16px;margin:0 0 10px;font:9px system-ui;color:#a1a7af}.slot-legend span{display:flex;align-items:center;gap:6px}.slot-legend i{width:9px;height:9px;border:1px solid #74808d;border-radius:2px;background:#30353d}.slot-legend .locked-key{background:repeating-linear-gradient(135deg,#14181d,#14181d 2px,#3a414a 2px,#3a414a 3px);border-color:#414852}
.du-dialog-card{background:#1a1e24;border-color:#4b535e;border-radius:var(--inv-radius,12px)}
#app .inv-wrap{grid-template-columns:500px 460px}
#app #rightPanel{width:460px;max-width:460px}
#app #equipPanel:not(.is-folded){width:500px;min-width:500px;max-width:500px}
#app #equipBody{flex-direction:row;width:100%;min-width:0}
#app #equipSlots{flex-direction:row;gap:18px}
#app #equipBody>h2{border:0;padding:0;flex-shrink:0}
#app .inv-wrap{grid-template-columns:500px 500px}#app #rightPanel{width:500px;max-width:500px}

/* Integrated loadout: compact cards inside the inventory. */
#app .inv-wrap{grid-template-areas:'bag stash'}
#app #bagPanel #equipPanel{grid-area:auto;width:100%;min-width:0;max-width:none;padding:13px 0 0;margin:15px 0 0;background:none;border:0;border-top:1px solid #34383e;border-radius:0;box-shadow:none;transition:none}
#app #bagPanel #equipBody{display:block;width:100%;min-width:0;transform:none}
#app #bagPanel #equipBody>h2{font-size:10px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:#a1a4ab;margin:0 0 10px;width:auto}
#app #bagPanel #equipSlots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#app #bagPanel .equip-slot{position:relative;margin:0;min-width:0}
#app #bagPanel .equip-slot>span{position:absolute;left:81px;top:12px;z-index:3;font-size:9px;color:#939ba7;letter-spacing:.3px;pointer-events:none}
#app #bagPanel .equip-frame{width:100%;height:65px;min-width:0;max-width:none;border:1px solid #3b414a;background:var(--inv-equip-zone,#242930);border-radius:7px;overflow:hidden}
#app #bagPanel .equip-frame.filled{border-color:#4c5157}
#app #bagPanel .equip-frame .item{inset:0;width:100%;height:100%;border:0;border-radius:0;box-shadow:none;background-color:transparent;background-size:56px auto;background-position:12px center}
#app #bagPanel .equip-item-name{position:absolute;left:81px;right:8px;top:29px;font:500 11px/1.4 system-ui;color:#e3e5e6;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;pointer-events:none}
#app #bagPanel #equipPanel.is-folded{height:0;max-height:0;min-height:0;padding:0;margin:0;border:0;overflow:hidden}
#app #bagPanel #equipPanel.is-folded #equipBody{display:none}
#app #bagPanel #equipPanel .panel-fold-tab{display:none}
#app #bagPanel .controls{margin-top:13px}
#app #bagPanel .equip-slot>span{text-align:left;right:8px;width:auto;bottom:auto}

#app #bagPanel .equip-utility .equip-frame{height:50px;background:#1e2329;border-color:#363e48}
#app #bagPanel .equip-utility .equip-frame .item{background-size:34px auto;background-position:12px center}
#app #bagPanel .equip-utility>span{left:61px;top:7px;font-size:9px}
#app #bagPanel .equip-utility .equip-item-name{left:61px;top:23px;font-size:10px}

#app #bagPanel #equipSlots{grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
#app #bagPanel .equip-slot{grid-column:span 3}
#app #bagPanel .equip-slot.equip-utility{grid-column:span 2}
#app #bagPanel .equip-utility .equip-frame{height:54px}
#app #bagPanel .equip-utility .equip-frame .item{background-size:28px auto;background-position:8px center}
#app #bagPanel .equip-utility>span{left:44px;top:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app #bagPanel .equip-utility .equip-item-name{left:44px;top:26px;font-size:9px}
#app #bagPanel .equip-frame.clothing:not(.filled){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath d='M8 3l-6 4 3 5 3-2v11h8V10l3 2 3-5-6-4c-1 3-7 3-8 0z' fill='none' stroke='%238c98a7' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:8px center}

/* Rarity follows item metadata, with a restrained edge and readable label. */
#app .item.rarity-common{--rarity-color:#89949f}#app .item.rarity-uncommon{--rarity-color:#83bc96}#app .item.rarity-rare{--rarity-color:#7dace2}#app .item.rarity-epic{--rarity-color:#ba94dc}#app .item.rarity-legendary{--rarity-color:#e0b46c}
#app .item.has-rarity:not(.is-locked){border-color:var(--rarity-color);box-shadow:inset 3px 0 var(--rarity-color),0 3px 8px #0003}
#app .item.has-rarity:not(.du-pinned)::before{display:none}
#app .item.has-rarity.du-pinned::before{background:none;box-shadow:none;width:auto;bottom:auto;border-radius:0}
#app .item.has-rarity .rarity-tag{left:5px;top:4px;bottom:auto;padding:2px 3px;font-size:7px;font-weight:600;letter-spacing:.3px;line-height:1;border:0;border-radius:3px;background:#11171de8;color:var(--rarity-color);box-shadow:none}
#app #bagPanel .equip-frame .item.has-rarity{box-shadow:inset 3px 0 var(--rarity-color)}
#app #bagPanel .equip-frame .rarity-tag{display:none}

/* One compact control surface: find items above, panel and item actions below. */
#app #bagPanel .bag-head{gap:0;margin-bottom:12px;padding-bottom:12px}
#app #bagPanel .inventory-toolbar{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:14px 0 0;padding:0;background:#15171b;border:1px solid #33373e;border-radius:8px;overflow:hidden}
#app .inventory-search-row{display:flex;align-items:center;height:38px;border-bottom:1px solid #30343a}
#app .inventory-search-field{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding-left:12px}
#app .inventory-toolbar svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#app .inventory-search-field>svg{color:#8f969f}
#app .inventory-toolbar .inventory-search-field input{flex:1;width:0;min-width:0;height:36px;padding:0 8px 0 0;border:0;background:transparent;border-radius:0;font-size:12px;box-shadow:none;outline:none}
#app .inventory-search-field:focus-within{color:#e6d9c2;background:#202329}
#app .inventory-search-field:focus-within>svg{color:#d5c6ab}
#app .inventory-toolbar #duCategory{flex:0 0 112px;width:112px;height:26px;margin-right:8px;padding:0 7px 0 12px;background:transparent;border:0;border-left:1px solid #373b43;border-radius:0;font-size:11px;color:#b7bdc5;cursor:pointer}
#app .inventory-action-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px;flex-wrap:wrap}
#app .inventory-toolbar .ghost-row{display:flex;flex-wrap:wrap;flex:0 1 auto;gap:3px;margin:0;padding:0;background:transparent;border:0;border-radius:0}
#app .inventory-toolbar .ghost-split{display:none}
#app .inventory-toolbar .ghost-row .craft-ghost,#app .inventory-toolbar .inventory-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;height:29px;margin:0;padding:0 10px;border:1px solid transparent;border-radius:5px;background:transparent;color:#949ba5;font:500 11px/1 system-ui;letter-spacing:0;white-space:nowrap;box-shadow:none}
#app .inventory-toolbar .ghost-row .craft-ghost[aria-pressed=true]{background:var(--inv-btn-bg,#30343b);color:#e4dfd5;border-color:#41454d}
#app .inventory-toolbar .ghost-row .craft-ghost:hover,#app .inventory-toolbar .inventory-actions .btn:hover{background:var(--inv-btn-bg,#30343b);color:#efe9dd;border-color:#535963}
#app .inventory-toolbar :is(button,select):focus-visible{outline:2px solid #d5c6ab;outline-offset:-2px}
#app .inventory-actions{display:flex;align-items:center;gap:3px;margin-left:auto}
#app .inventory-toolbar .inventory-actions #duOrganize{color:#ccc5b7}
#app .inventory-toolbar .inventory-actions #duPin{width:30px;padding:0;border-left-color:#343941;border-radius:0 4px 4px 0}
#app .inventory-toolbar :is(#btnFoldEquip,#btnFoldRight,#duOrganize)::before{content:'';width:13px;height:13px;flex:none;background:currentColor;mask:var(--tool-icon) center/contain no-repeat;-webkit-mask:var(--tool-icon) center/contain no-repeat}
#app #btnFoldEquip{--tool-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5V3h6v2M7 5h10l2 4v12H5V9l2-4ZM8 13h8v5H8z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E")}
#app #btnFoldRight{--tool-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3 7 9-4 9 4-9 4-9-4Zm0 0v10l9 4 9-4V7M12 11v10' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E")}
#app #duOrganize{--tool-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h6v6H3zM14 4h6v6h-6zM3 15h6v6H3zM14 15h6v6h-6z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* FiveM layout: real configured grids and optional panels, no demo coordinates. */
#app .inv-wrap{display:flex;flex:0 0 auto;gap:14px;align-items:flex-start;max-height:none;width:max-content;max-width:none!important;margin-top:clamp(14px,3vh,38px);padding:0;transform-origin:top center;--cell:calc(50px * var(--inv-cell-scale,1));--panel-pad:calc(22px * var(--inv-pad-scale,1))}
#app .inv-wrap{transform:translateY(8px) scale(calc(var(--inv-ui-scale,1) * var(--modern-fit,1) * .97))}
#app.is-open .inv-wrap{transform:scale(calc(var(--inv-ui-scale,1) * var(--modern-fit,1)))}
#app.is-closing .inv-wrap{transform:translateY(8px) scale(calc(var(--inv-ui-scale,1) * var(--modern-fit,1) * .97))}
#app #bagPanel{flex:0 0 auto;width:max-content;min-width:500px;max-width:none}
#app #rightPanel:not(.is-folded){width:max-content;min-width:300px;max-width:none;background:var(--inv-panel-bg,#15171a)}
#app #rightPanel .panel-fold-body{width:max-content;min-width:0;max-width:none}
#app .inv-wrap>.is-folded{display:none}
#app #bagPanel #equipPanel{min-width:0;max-width:none}
#app .board{max-width:none;max-height:600px}
#app #bagPanel #leftBoard{max-height:none}
#app .craft-pop{flex:0 0 320px;width:320px;max-height:850px;background:var(--inv-panel-bg,#1a1c20);border-color:var(--inv-panel-border,#36393e)}
#app #bagPanel .equip-frame .item.is-selected,#app .item.is-selected{outline:2px solid var(--inv-accent,#d5c6ab);outline-offset:-2px}
#app #bagPanel .equip-frame.drag-valid{outline:2px solid var(--inv-valid,#48d282);outline-offset:-2px}
#app #bagPanel .equip-frame.drag-invalid{outline:2px solid var(--inv-invalid,#ff5858);outline-offset:-2px}
#app #bagPanel .equip-frame .equip-item-name{pointer-events:none}
#app .inventory-toolbar .inventory-search-row[hidden]{display:none}
#app .du-dialog-card{max-height:calc(100vh - 40px);overflow:auto}
@media(prefers-reduced-motion:reduce){#app .inv-wrap,#app #equipPanel,#app #rightPanel{transition:none}#app .panel-fold-body>*{animation:none!important}}

/* The header moves the entire inventory; item drag targets stay unchanged. */
#app .inv-wrap{position:absolute;margin:0;transform-origin:top left}
#app .inv-wrap.is-moving{transition:none}
#app #bagPanel .bag-head-top{cursor:grab;touch-action:none;user-select:none;border-radius:5px}
#app #bagPanel .bag-head-top:focus-visible{outline:1px solid var(--inv-accent,#d5c6ab);outline-offset:5px}
#app .inv-wrap.is-moving #bagPanel .bag-head-top{cursor:grabbing}
#app #bagPanel .bag-head-top>div:first-child{position:relative;padding-left:18px}
#app #bagPanel .bag-head-top>div:first-child::before{content:'';position:absolute;left:0;top:50%;width:9px;height:16px;transform:translateY(-50%);opacity:.5;background:radial-gradient(circle,#b7bdc5 1px,transparent 1.5px) 0 0/5px 5px}

/* Empty equipment placeholders share the clothing slot outline style. */
#app #bagPanel .equip-frame[data-equip-role="backpack"]:not(.filled){background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9%205V3h6v2%20M7%205h10l2%204v12H5V9l2-4Z%20M8%2013h8v5H8Z%20M8%208h8%22%20fill%3D%22none%22%20stroke%3D%22%238c98a7%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");background-size:28px auto;background-repeat:no-repeat;background-position:8px center}
#app #bagPanel .equip-frame[data-equip-role="armor"]:not(.filled){background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%203h4l1%204h4l1-4h4v6l3%203-3%209H5l-3-9%203-3V3Z%20M8%2011h8v6H8Z%20M12%2011v6%22%20fill%3D%22none%22%20stroke%3D%22%238c98a7%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");background-size:28px auto;background-repeat:no-repeat;background-position:8px center}
#app #bagPanel .equip-frame[data-equip-role="primary"]:not(.filled){background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2032%22%3E%3Cpath%20d%3D%22M4%2012h10l4%203h27v-3h10v3h5v4H39l-4%204h-8l-3%206h-5l2-10h-8l-9%205V12Z%20M24%2015V9h10v6%20M29%209V6h3%20M28%2023v-4%20M47%2015v4%22%20fill%3D%22none%22%20stroke%3D%22%238c98a7%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");background-size:56px auto;background-repeat:no-repeat;background-position:12px center}
#app #bagPanel .equip-frame[data-equip-role="secondary"]:not(.filled){background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2048%2032%22%3E%3Cpath%20d%3D%22M7%206h33v8H26l-2%203-4%2012H9l5-15H7V6Z%20M15%2014h11%20M23%2017h8v4h-9%20M34%206V3%20M9%206V4%22%20fill%3D%22none%22%20stroke%3D%22%238c98a7%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");background-size:48px auto;background-repeat:no-repeat;background-position:16px center}

/* Clothing and helmet share the loadout; four compact utilities above weapons. */
#app #bagPanel #equipSlots{grid-template-columns:repeat(8,minmax(0,1fr))}
#app #bagPanel .equip-slot{grid-column:span 4}
#app #bagPanel .equip-slot.equip-utility{grid-column:span 2}
#app #bagPanel .equip-utility .equip-frame{height:80px;background-color:var(--inv-equip-zone,#242930)}
#app #bagPanel .equip-utility .equip-frame .item{background-size:30px 30px;background-position:center 8px}
#app #bagPanel .equip-utility>span{left:5px;right:5px;top:44px;text-align:center;font-size:9px;letter-spacing:0;color:#b5bbc2}
#app #bagPanel .equip-utility .equip-item-name{left:5px;right:5px;top:59px;text-align:center;font-size:9px;line-height:12px}
#app #bagPanel .equip-utility .equip-frame:not(.filled) .equip-item-name{color:#777f89;font-weight:400}
#app #bagPanel .equip-frame[data-equip-role="helmet"]:not(.filled){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 14v-3a8 8 0 0 1 16 0v3l-4 2v4h-5l-3-6H4Zm0 0h16M8 10h10M8 14v-4' fill='none' stroke='%238c98a7' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
#app #bagPanel .equip-utility .equip-frame:not(.filled){background-size:30px 30px;background-repeat:no-repeat;background-position:center 8px}

/* Crafting uses the inventory's panel chrome, spacing and theme colors. */
#app #craftPop{flex:0 0 400px;width:400px;max-height:none;padding:var(--panel-pad);border-radius:var(--inv-radius,10px);box-shadow:0 15px 35px #0003;border-top-color:#6d6456}
#app #craftPop .craft-head{align-items:center;margin:0 0 14px;padding:0 0 14px;border-color:var(--inv-panel-border,#34373b)}
#app #craftPop .craft-head .kicker{font-size:9px;font-weight:500;letter-spacing:1.8px;color:var(--inv-kicker,#a0a1a4)}
#app #craftPop .craft-head h2{font-size:24px;font-weight:550;margin:4px 0 0;letter-spacing:-.6px}
#app #craftPop #craftCloseBtn{width:29px;height:29px;padding:0;border:1px solid var(--inv-panel-border,#34373b);background:transparent;color:#aab0b8;box-shadow:none;border-radius:5px;font-size:19px}
#app #craftPop #craftCloseBtn:hover{background:var(--inv-btn-bg,#30343b);color:var(--inv-text,#eeeae3)}
#app #craftPop .craft-cats{flex-shrink:0;flex-wrap:wrap;gap:4px;margin:0 0 14px;padding:5px;background:#15171b;border:1px solid var(--inv-panel-border,#34373b);border-radius:7px}
#app #craftPop .craft-cat{flex:1 1 auto;min-width:0;padding:8px 10px;border:1px solid transparent;border-radius:4px;background:transparent;color:#949ba5;font:500 11px/1.25 system-ui;overflow-wrap:anywhere}
#app #craftPop .craft-cat:hover{color:var(--inv-text,#eeeae3);background:var(--inv-btn-bg,#30343b)}
#app #craftPop .craft-cat.is-on{background:var(--inv-btn-bg,#30343b);border-color:#41454d;color:var(--inv-accent,#d5c6ab)}
#app #craftPop .craft-list{gap:10px;padding:0 3px 0 0;border:0;border-radius:0;background:transparent;overflow-x:hidden;scrollbar-gutter:stable}
#app #craftPop .craft-card{flex-shrink:0;grid-template-columns:46px minmax(0,1fr) auto;gap:10px;padding:12px;border:1px solid var(--inv-panel-border,#34373b);border-radius:7px;background:var(--inv-item-bg,#24272d);align-items:start}
#app #craftPop .craft-card.is-off{opacity:1;background:#1d2025}
#app #craftPop .craft-art{width:46px;height:46px;background:#171a1f center/36px auto no-repeat;border:1px solid #383d44;border-radius:6px;display:grid;place-items:center;overflow:hidden}
#app #craftPop .craft-art.no-image::after{content:'';display:block;width:20px;height:20px;background:#737d89;mask:var(--tool-icon) center/contain no-repeat;-webkit-mask:var(--tool-icon) center/contain no-repeat;--tool-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3 7 9-4 9 4-9 4-9-4Zm0 0v10l9 4 9-4V7M12 11v10' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E")}
#app #craftPop .craft-copy{min-width:0}
#app #craftPop .craft-card h3{font-size:12px;font-weight:550;line-height:1.4;color:var(--inv-text,#eeeae3);overflow-wrap:anywhere}
#app #craftPop .craft-output{font-size:10px;color:#aeb5be;margin-top:3px;overflow-wrap:anywhere}
#app #craftPop .craft-output b{color:var(--inv-accent,#d5c6ab);font-weight:600}
#app #craftPop .craft-desc{font-size:10px;color:#858d98;line-height:1.5;overflow-wrap:anywhere}
#app #craftPop .craft-time{font-size:10px;color:#a0a7b1;background:#191c21;border:1px solid #373b43;border-radius:4px;padding:4px 5px;white-space:nowrap}
#app #craftPop .craft-materials{grid-column:1/-1;min-width:0}
#app #craftPop .craft-section-label{display:block;font-size:8px;color:#858d98;text-transform:uppercase;letter-spacing:.9px}
#app #craftPop .craft-need{margin-top:5px;gap:5px}
#app #craftPop .craft-need i{display:flex;align-items:center;gap:9px;max-width:100%;box-sizing:border-box;padding:5px 7px;border:1px solid #39433e;background:#242e29;border-radius:4px;color:#adcfb9;font-size:10px;font-weight:400;line-height:1.3}
#app #craftPop .craft-need i span{min-width:0;overflow-wrap:anywhere}
#app #craftPop .craft-need i b{white-space:nowrap;font-size:9px;font-weight:500;opacity:.85}
#app #craftPop .craft-need i.bad{background:#302628;border-color:#513a3e;color:#daa3a8}
#app #craftPop .craft-card-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;border-top:1px solid #383d44;padding-top:9px;margin-top:1px}
#app #craftPop .craft-availability{font-size:9px;color:#aeb8af}
#app #craftPop .is-off .craft-availability{color:#b28e92}
#app #craftPop .craft-make{min-width:76px;height:29px;padding:0 12px;border:1px solid transparent;border-radius:5px;background:var(--inv-accent,#d5c6ab);color:#1b1d20;font:600 10px/1 system-ui;transition:background .15s,border-color .15s}
#app #craftPop .craft-make:hover:not(:disabled){filter:brightness(1.1)}
#app #craftPop .craft-make:disabled:not(.is-busy){background:#292c32;border-color:#3a3e45;color:#747d89;opacity:1;filter:none}
#app #craftPop .craft-make.is-busy{width:76px;min-width:76px;border-radius:5px}
#app #craftPop .craft-make.is-busy .craft-ring{width:23px;height:23px;left:calc(50% - 11.5px);top:2px}
#app #craftPop .craft-empty{margin:0;padding:30px 15px;border:1px dashed var(--inv-panel-border,#34373b);border-radius:7px;text-align:center;color:#949ba5;font-size:12px;line-height:1.6}
#app #craftPop button:focus-visible{outline:2px solid var(--inv-accent,#d5c6ab);outline-offset:2px}
#app .inventory-toolbar #btnCraft::before{content:'';width:13px;height:13px;flex:none;background:currentColor;mask:var(--tool-icon) center/contain no-repeat;-webkit-mask:var(--tool-icon) center/contain no-repeat}
#app #btnCraft{--tool-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m14 5 5 5M3 21l9-9m-2-4 6-6 6 6-6 6-6-6ZM3 3l5 5M3 3v4l4-4H3Z' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* A readable workshop tray beside the existing in-game weapon camera. */
#customizeStage{padding:24px clamp(16px,2.2vw,42px);box-sizing:border-box;font-family:Inter,'Segoe UI',system-ui,sans-serif;color:#eeeae3}
#customizeStage.hidden{display:none!important}
#customizeStage .cust-card{width:min(408px,calc(100vw - 32px));max-height:calc(100vh - 48px);box-sizing:border-box;padding:0;display:flex;flex-direction:column;border:1px solid #3a3e45;border-top-color:#776e5e;border-radius:12px;background:#1a1c20;box-shadow:0 20px 55px #0006;overflow:hidden}
#customizeStage .cust-head{flex:none;align-items:center;gap:12px;margin:0;padding:20px 20px 16px;border-bottom:1px solid #34383e}
#customizeStage .cust-head .kicker{font:500 9px/1.4 system-ui;letter-spacing:1.8px;color:#aba598}
#customizeStage .cust-head h2{font-size:23px;line-height:1.3;font-weight:550;letter-spacing:-.5px;margin:4px 0 3px}
#customizeStage .cust-head p{font-size:11px;color:#949ca7;margin:0;line-height:1.5}
#customizeStage #custClose{width:30px;height:30px;flex:none;padding:0;border:1px solid #3c4149;border-radius:6px;background:#24272d;color:#b8bec7;font:22px/1 system-ui;box-shadow:none}
#customizeStage #custClose:hover{background:#34383f;color:#fff}
#customizeStage .cust-scene{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;gap:14px;padding:16px 20px;scrollbar-width:thin;scrollbar-color:#49505a transparent}
#customizeStage .cust-weapon{flex:none;min-height:92px;display:grid;grid-template-columns:115px minmax(0,1fr);align-items:center;gap:14px;padding:12px;background:linear-gradient(125deg,#282c32,#202329);border:1px solid #3b4149;border-radius:8px}
#customizeStage .cust-weapon-art{width:115px;height:65px;background-position:center;background-size:contain;background-repeat:no-repeat;filter:drop-shadow(0 5px 5px #0005)}
#customizeStage .cust-eyebrow{font-size:8px;font-weight:500;letter-spacing:1px;color:#8f98a4}
#customizeStage .cust-weapon-name{font-size:15px;line-height:1.4;font-weight:550;color:#f0eee8;margin:3px 0 5px;overflow-wrap:anywhere}
#customizeStage .cust-equipped-count{font-size:10px;color:#bcb3a2}
#customizeStage .cust-equipped{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
#customizeStage .cust-box{display:grid;grid-template-columns:42px minmax(0,1fr);gap:5px 9px;min-height:0;padding:10px;border-radius:7px;background:#22262c;border:1px solid #3b4149}
#customizeStage .cust-box-label{grid-column:1/-1;font-size:9px;line-height:1.3;font-weight:500;color:#aab1bc;letter-spacing:.6px;margin:0 0 4px}
#customizeStage .cust-box-slot{grid-row:2/4;width:42px;height:45px;display:grid;place-items:center;border:0;border-radius:4px;background:#191d22 center/34px auto no-repeat}
#customizeStage .cust-box-slot:not(.has-part)::after,#customizeStage .cust-box-slot.no-image::after,#customizeStage .cust-part-art.no-image::after{content:'';display:block;width:23px;height:23px;background:#778392;mask:var(--cust-slot-icon) center/contain no-repeat;-webkit-mask:var(--cust-slot-icon) center/contain no-repeat}
#customizeStage{--cust-slot-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7h18v10H3zM8 7V4h8v3M8 12h8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
#customizeStage #custBoxSight{--cust-slot-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M12 2v6m0 8v6M2 12h6m8 0h6' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E")}
#customizeStage #custBoxMuzzle{--cust-slot-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 8h15v8H3zM18 10h3v4h-3M7 8v8m4-8v8' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E")}
#customizeStage .cust-installed-name{align-self:end;font-size:10px;line-height:1.3;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d7dbe0;min-width:0}
#customizeStage .cust-remove{justify-self:start;padding:0;font:500 10px/1.5 system-ui;color:#cabfaa;background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#customizeStage .cust-remove:hover:not(:disabled){color:#eed4cd}
#customizeStage .cust-remove:disabled{color:#68727e;cursor:default;text-decoration:none}
#customizeStage .cust-box.is-over{border-color:#d5c6ab;box-shadow:0 0 0 1px #d5c6ab}
#customizeStage .cust-tabs{display:flex;gap:4px;flex:none;padding:4px;border:1px solid #353a42;background:#14171b;border-radius:7px}
#customizeStage .cust-tabs button{flex:1;border:1px solid transparent;border-radius:4px;padding:9px;color:#979fab;background:none;font:500 11px/1 system-ui;cursor:pointer}
#customizeStage .cust-tabs button.is-on{border-color:#464b54;background:#2c3139;color:#e3d8c4}
#customizeStage [data-cust-pane][hidden]{display:none!important}
#customizeStage .cust-parts-wrap{margin:0;min-height:0}
#customizeStage .cust-search{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;background:#15181d;border:1px solid #383e47;border-radius:6px}
#customizeStage .cust-search svg{width:14px;height:14px;fill:none;stroke:#8f98a5;stroke-width:1.6;flex:none}
#customizeStage .cust-search:focus-within{border-color:#a89d88}
#customizeStage #custSearch{flex:1;min-width:0;width:0;background:transparent;border:0;outline:0;padding:0;color:#e3e5e9;font:11px system-ui;box-shadow:none}
#customizeStage #custSearch::placeholder{color:#7b8695}
#customizeStage .cust-parts-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0}
#customizeStage .cust-filters{display:flex;gap:3px}
#customizeStage .cust-filters button{padding:5px 8px;color:#8e99a8;background:none;border:1px solid transparent;border-radius:4px;font:10px/1.2 system-ui;cursor:pointer}
#customizeStage .cust-filters button.is-on{color:#d3c8b3;background:#30353d;border-color:#454b55}
#customizeStage #custPartCount{font-size:10px;color:#8d98a5;white-space:nowrap}
#customizeStage .cust-parts{display:flex;flex-direction:column;gap:7px;min-height:0}
#customizeStage .cust-part{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;height:auto;min-height:61px;padding:9px 10px;border:1px solid #3b414b;border-radius:7px;background:#242930;text-align:left;color:#e2e5e9;box-sizing:border-box}
#customizeStage .cust-part:not(:disabled):hover{background:#2c323a;border-color:#827a6b}
#customizeStage .cust-part-art{width:38px;height:38px;background:#1b2026 center/32px auto no-repeat;border-radius:4px;display:grid;place-items:center}
#customizeStage .cust-part-copy{min-width:0;display:flex;flex-direction:column;gap:4px}
#customizeStage .cust-part-copy strong{font-size:11px;font-weight:500;line-height:1.3;overflow-wrap:anywhere}
#customizeStage .cust-part-copy small{font-size:9px;color:#99a5b2;line-height:1.3}
#customizeStage .cust-part.is-compatible .cust-part-copy small{color:#9ab8a3}
#customizeStage .cust-part.is-incompatible{background:#202329;border-color:#333942;cursor:not-allowed}
#customizeStage .cust-part.is-incompatible .cust-part-copy small{color:#bc9295}
#customizeStage .cust-part.is-installed{background:#252b28;border-color:#414e45}
#customizeStage .cust-part-action{padding:6px 8px;background:#d5c6ab;border-radius:4px;color:#202226;font-size:9px;font-weight:600;white-space:nowrap}
#customizeStage .cust-part:disabled .cust-part-action{background:#30353d;color:#8f9aa8}
#customizeStage .cust-part.is-installed .cust-part-action{background:#344039;color:#b0c2b5}
#customizeStage .cust-parts-empty{padding:22px 14px;border:1px dashed #404752;border-radius:7px;text-align:center;color:#99a4b3;font-size:11px;line-height:1.6}
#customizeStage .cust-color-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
#customizeStage .cust-color-heading strong{font-size:12px;font-weight:500;color:#dfe2e7}
#customizeStage #custTintName{font-size:10px;color:#c4b89f}
#customizeStage .cust-tints{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
#customizeStage .cust-tint{display:flex;flex-direction:column;align-items:center;gap:8px;width:auto;height:auto;padding:11px 5px;border:1px solid #3d4550;border-radius:7px;background:#22272e;color:#aab4c1;font:10px/1.3 system-ui;box-shadow:none}
#customizeStage .cust-tint-swatch{position:relative;display:block;width:28px;height:28px;background:var(--tint);border-radius:50%;box-shadow:inset 0 0 0 1px #fff3}
#customizeStage .cust-tint.is-on{border-color:#d5c6ab;background:#30343a;color:#eee4d3;box-shadow:inset 0 0 0 1px #d5c6ab33}
#customizeStage .cust-tint.is-on .cust-tint-swatch::after{content:'✓';position:absolute;right:-5px;bottom:-3px;width:14px;height:14px;display:grid;place-items:center;border-radius:50%;background:#e4d7bf;color:#23262b;font:600 10px/1 system-ui;border:2px solid #30343a}
#customizeStage .cust-tint:disabled{cursor:wait;opacity:.65}
#customizeStage .cust-color-hint{font-size:10px;color:#8e9aa8;line-height:1.5;margin:12px 0 0}
#customizeStage .cust-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;flex:none;padding:13px 20px;border-top:1px solid #343b44;background:#171b20}
#customizeStage .cust-status{margin:0;font-size:10px;line-height:1.5;color:#8f9caa;overflow-wrap:anywhere}
#customizeStage .cust-status[data-tone="ok"]{color:#a3c3af}
#customizeStage .cust-status[data-tone="error"]{color:#e2a3a8}
#customizeStage #custDone{flex:none;border:1px solid #4a4d50;border-radius:5px;background:#d5c6ab;color:#212429;font:600 11px/1 system-ui;padding:10px 14px;box-shadow:none}
#customizeStage .cust-card[aria-busy="true"] .cust-part{cursor:wait}
#customizeStage button:focus-visible{outline:2px solid #dfcfae;outline-offset:2px}
#ctxMenu [data-action="customize"]{display:flex;align-items:center;gap:9px;color:#e0d3ba;border-top:1px solid #3a414a;border-bottom:1px solid #3a414a;background:#d5c6ab0c}
#ctxMenu [data-action="customize"]:hover{background:#d5c6ab22;color:#f3e5ca}
#ctxMenu [data-action="customize"]::before{content:'';width:14px;height:14px;flex:none;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m14 5 5 5M3 21l9-9m-2-4 6-6 6 6-6 6-6-6Z' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-height:760px){#customizeStage{padding-top:14px;padding-bottom:14px}#customizeStage .cust-card{max-height:calc(100vh - 28px)}#customizeStage .cust-head{padding:15px 18px 12px}#customizeStage .cust-scene{padding:12px 18px;gap:11px}#customizeStage .cust-weapon{min-height:70px;padding:9px}#customizeStage .cust-weapon-art{height:50px}#customizeStage .cust-footer{padding:11px 18px}}
@media(prefers-reduced-motion:reduce){#customizeStage *{transition:none!important}}

/* Fixed engine sockets double as precise scrap repair targets. */
.eng-slot .engine-fixed{cursor:default!important}
.eng-repair-note{display:block;text-align:center;color:var(--text-muted,#8d97a5);font-size:9px;line-height:1.4;margin-top:5px;white-space:nowrap}
.eng-slot.is-full .eng-repair-note{color:#89bfa7}
.eng-slot.drag-valid .eng-frame{border-color:#78d7ae!important;background:rgba(75,168,126,.16)!important;box-shadow:0 0 0 2px rgba(120,215,174,.2)}
.eng-slot.drag-valid .eng-repair-note{color:#9ee7c7}
.eng-slot.drag-invalid .eng-frame{border-color:#d67b7b!important;background:rgba(160,72,72,.13)!important}
.engine-repairing .engine-bay{opacity:.7;cursor:progress}