@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap');
@font-face {
  font-family: "Eurostile";
  src:
    url("../EurostileExtendedBlack.ttf") format("truetype");
}

* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg: #ffffff; --bg1: #ffffff; --bg2: #ffffff; --bg3: #ffffff;
  --border: #111; --border2: #ffffff; --text: #111; --text2: #666;
  --accent: #111; --red: #c0392b; --yellow: #b8860b; --green: #1a7a2e;
  --head: 'Eurostile', sans-serif; --mono: 'Space Mono', monospace;
}
body { font-family:var(--mono); background:var(--bg); color:var(--text); font-size:12px; overflow:hidden; height:100vh; display:flex; flex-direction:column; }

#topnav { background:#111; border-bottom:0px solid #111; padding: 2px 5px; display:flex; align-items:center; height:27px; flex-shrink:0; }
#topnav h1 { font-family:var(--head); color:#fff; font-size:18px; font-weight:500; letter-spacing:4px; margin-right:24px; padding-left: 13px; margin-top: 7px;}
.main-tab { background:none; border:none; color:#888; font-family:var(--head); font-size:13px; padding:10px 14px; cursor:pointer; border-bottom:2px solid transparent; text-transform:uppercase; letter-spacing:2px; }
.main-tab:hover { color:#ffffff; }
.main-tab.active { color:#fff; border-bottom-color:#fff; }

#home{ padding : 3ch;}

#main { flex:1; overflow:hidden; position:relative; }
.panel { display:none; position:absolute; inset:0; overflow:auto; }
.panel.active { display:flex; flex-direction:column; }

#db-bar { background:var(--bg1); padding:8px 12px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; border-bottom:2px solid var(--border); }
.db-tab { background:#fff; border:2px solid var(--border); color:var(--text2); padding:3px 8px; cursor:pointer; font-family:var(--head); font-size:11px; letter-spacing:1px; text-transform:uppercase; }
.db-tab:hover { color:var(--text); }
.db-tab.active { background:#111; color:#fff; border-color:#111; }
#db-search { background:#fff; border:2px solid var(--border); color:var(--text); padding:4px 8px; font-family:var(--mono); font-size:11px; width:200px; margin-left:auto; }
#db-search:focus { outline:none; border-color:#555; }
#db-count { color:var(--text2); font-size:11px; margin-left:6px; }
#db-table-wrap { flex:1; overflow:auto; padding:0 8px; background:#fff; }
#db-table-wrap table { border-collapse:collapse; width:100%; }
#db-table-wrap th { background:#111; color:#fff; text-align:left; padding:5px 6px; font-family:var(--head); font-size:11px; text-transform:uppercase; letter-spacing:1px; cursor:pointer; white-space:nowrap; position:sticky; top:0; z-index:2; }
#db-table-wrap th:hover { color:#ccc; }
#db-table-wrap td { padding:4px 6px; border-bottom:1px solid #ddd; max-width:280px; overflow:hidden; text-overflow:ellipsis; font-size:11px; }
#db-table-wrap tr:hover td { background:var(--bg1); }
.cn { color:#111; font-weight:bold; } .cnum { text-align:right; color:#333; } .cempty { color:#bbb; }

#pdf-side { width:260px; min-width:260px; background:var(--bg1); border-right:2px solid var(--border); overflow-y:auto; padding:10px 0; }
#pdf-side h3 { font-family:var(--head); color:#111; font-size:12px; letter-spacing:2px; padding:8px 14px 3px; }
#pdf-side .pdesc { color:var(--text2); font-size:10px; padding:0 14px 4px; }
#pdf-side ul { list-style:none; margin:0 0 6px; padding:0; }
#pdf-side li { padding:4px 14px; cursor:pointer; color:var(--text2); font-size:11px; border-left:3px solid transparent; }
#pdf-side li:hover { color:var(--text); background:var(--bg2); }
#pdf-side li.active { color:#111; border-left-color:#111; background:var(--bg2); font-weight:bold; }
#pdf-side li .psub { display:block; color:#999; font-size:9px; font-weight:normal; }
#pdf-frame { flex:1; background:#fff; }
#pdf-frame iframe { width:100%; height:100%; border:none; }

#tools-side { width:200px; min-width:200px; background:var(--bg1); border-right:2px solid var(--border); padding:0 0 10px 0; transition:width 0.15s, min-width 0.15s; position:relative; }
#tools-side.collapsed { width:36px; min-width:36px; }
.tools-side-toggle { display:flex; align-items:center; justify-content:flex-end; padding:5px 10px; cursor:pointer; color:#bbb; font-size:14px; border-bottom:1px solid #eee; user-select:none; height:22px; }
.tools-side-toggle:hover { color:#111; background:#f5f5f5; }
#tools-side.collapsed .tools-side-toggle { justify-content:center; padding:5px 0; }
#tools-side .tool-link { display:flex; align-items:center; gap:10px; padding:8px 14px; color:var(--text2); font-size:12px; cursor:pointer; border-left:3px solid transparent; white-space:nowrap; overflow:hidden; }
#tools-side .tool-link:hover { color:var(--text); background:var(--bg2); }
#tools-side .tool-link.active { color:#111; border-left-color:#111; font-weight:bold; }
.tool-icon { font-size:14px; flex-shrink:0; width:16px; text-align:center; }
.tool-label { transition:opacity 0.1s; }
#tools-side.collapsed .tool-link { padding:8px 0; justify-content:center; }
#tools-side.collapsed .tool-label { display:none; }
#tools-content { flex:1; overflow:auto; background:#fff; }

.cs { padding:16px 20px 40px;}
.cs-topbar { display:flex; gap:10px; margin-bottom:16px; align-items:center; flex-wrap:wrap; }
.cs-actions { margin-left:auto; display:flex; gap:6px; }
.btn { background:#fff; border:2px solid #111; color:#111; font-family:var(--mono); font-size:11px; padding:4px 12px; cursor:pointer; }
.btn:hover { background:#111; color:#fff; }
.btn-cy { background:#111; color:#fff; border-color:#111; }
.btn-cy:hover { background:#333; }
.btn-red { border-color:var(--red); color:var(--red); }
.btn-red:hover { background:var(--red); color:#fff; }
.btn-sm { padding:2px 6px; font-size:10px; }
.btn-green { border-color:var(--green); color:var(--green); }
.btn-green:hover { background:var(--green); color:#fff; }

.cs-section { margin-bottom:12px; border:2px solid #111; background:#fff; }
.cs-section-head { display:flex; align-items:center; padding:6px 10px; background:#111; color:#fff; cursor:pointer; user-select:none; }
.cs-section-head h2 { font-family:var(--head); font-size:13px; letter-spacing:3px; flex:1; font-weight:500; }
.cs-section-head .toggle { color:#888; font-size:10px; }
.cs-section-body { padding:12px; }
.cs-section.collapsed .cs-section-body { display:none; }
.cs-section.collapsed .toggle::after { content:"▸"; }
.cs-section:not(.collapsed) .toggle::after { content:"▾"; }

.id-grid { display:flex; gap:16px; align-items:flex-start; }
.id-photo { width:90px; height:90px; border:2px solid #111; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; flex-shrink:0; }
.id-photo img { width:100%; height:100%; object-fit:cover; }
.id-photo .ph-text { color:#aaa; font-size:9px; }
.id-fields { flex:1; display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
.field { display:flex; flex-direction:column; gap:2px; }
.field label { font-size:9px; color:var(--text2); text-transform:uppercase; letter-spacing:1px; }
.field input, .field select, .field textarea { background:#fff; border:none; border-bottom:1.5px solid #111; color:var(--text); font-family:var(--mono); font-size:12px; padding:3px 2px; width:100%; border-radius:0; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-bottom-color:#555; }
.field-full { grid-column:1/-1; }

.stats-grid { display:grid; grid-template-columns:repeat(9,1fr); gap:0; margin-bottom:10px; }
.stat-box { text-align:center; border:2px solid #111; border-right:none; padding:4px; position:relative; }
.stat-box:last-child { border-right:2px solid #111; }
.stat-box .slabel { font-family:var(--head); font-size:10px; color:#111; letter-spacing:1px; display:block; margin-bottom:2px; border-bottom:1px solid #ddd; padding-bottom:2px; }
.stat-box input[type=number] { width:100%; text-align:center; background:none; border:none; color:#111; font-family:var(--mono); font-size:18px; font-weight:bold; -moz-appearance:textfield; }
.stat-box input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; }
.stat-box input:focus { outline:none; }
.stat-cyber { display:block; font-size:9px; color:var(--red); font-family:var(--mono); cursor:help; line-height:1; margin-top:1px; }
.stat-effective { display:block; font-family:var(--head); font-size:13px; font-weight:bold; color:var(--red); line-height:1.2; }
.derived-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:0; }
.derived-box { border:1px solid #111; padding:3px 6px; display:flex; justify-content:space-between; }
.derived-box .dlabel { font-size:9px; color:var(--text2); }
.derived-box .dval { font-weight:bold; }

.skills-header { display:flex; gap:8px; margin-bottom:8px; align-items:center; flex-wrap:wrap; }
.skills-header input[type=text] { background:#fff; border:none; border-bottom:1.5px solid #111; color:var(--text); font-family:var(--mono); font-size:11px; padding:3px 2px; width:160px; }
.skills-header input[type=text]:focus { outline:none; }
.skills-header input[type=number] { background:#fff; border:2px solid #111; color:var(--text); font-family:var(--mono); font-size:11px; padding:2px 4px; width:50px; text-align:center; }
.skills-header input[type=number]:focus { outline:none; }
.points-info { font-size:11px; color:var(--text2); }
.points-info .pts-over { color:var(--red); font-weight:bold; }
.points-info .pts-ok { color:var(--green); font-weight:bold; }
.points-info .pts-ip { color:var(--yellow); font-weight:bold; }
.stat-group { margin-bottom:10px; }
.stat-group-head { font-family:var(--head); font-size:12px; color:#111; letter-spacing:2px; padding:3px 0; border-bottom:2px solid #111; margin-bottom:3px; }
.stat-group-skills { display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.skill-row { display:flex; align-items:center; gap:3px; padding:2px 4px; border-bottom:0.5px solid #ddd; font-size:11px; }
.skill-row:hover { background:var(--bg1); }
.skill-row.role-skill { border-left:3px solid #111; padding-left:3px; font-weight:bold; }
.skill-row .sk-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.skill-row .sk-val { width:28px; text-align:center; background:none; border:1.5px solid #111; color:#111; font-family:var(--mono); font-size:11px; padding:1px; font-weight:bold; -moz-appearance:textfield; }
.skill-row .sk-val::-webkit-inner-spin-button { -webkit-appearance:none; }
.skill-row .sk-val:focus { outline:none; border-color:#555; }
.skill-row .sk-total { width:22px; text-align:center; color:var(--text2); font-size:11px; font-weight:bold; }
.skill-row .sk-cyber { font-size:9px; color:var(--red); font-family:var(--mono); cursor:help; min-width:20px; text-align:center; }

.life-container { display:flex; gap:16px; flex-wrap:wrap; }
.life-health { flex:1; min-width:300px; }
.life-damage { flex:1; min-width:400px; }
.wound-track { display:flex; flex-direction:column; gap:0; margin:6px 0; }
.wound-row { display:flex; gap:0; }
.wound-labels-row { }
.wound-row + .wound-labels-row { margin-top:5px; }
.wound-group-label { width:88px; font-family:var(--head); font-size:7px; color:var(--text2); text-transform:uppercase; letter-spacing:0.5px; display:flex; align-items:center; justify-content:center; }
.wound-group-boxes { display:flex; }
.wound-box { width:22px; height:22px; border:1.5px solid #111; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:8px; color:#aaa; user-select:none; }
.wound-box.marked { background:#111; color:#fff; }
.wound-label { font-family:var(--head); font-size:8px; color:var(--text2); text-transform:uppercase; letter-spacing:1px; padding:0 3px; align-self:center; }
.wound-state { font-size:11px; margin-top:4px; }
.hp-big { font-size:16px; font-weight:bold; }
.hp-green { color:var(--green); } .hp-yellow { color:var(--yellow); } .hp-red { color:var(--red); }

.dmg-table { border-collapse:collapse; font-size:11px; width:100%; }
.dmg-table th { background:#111; color:#fff; padding:4px 6px; text-align:center; font-family:var(--head); font-size:10px; text-transform:uppercase; letter-spacing:1px; border:1px solid #111; }
.dmg-table td { padding:4px 6px; text-align:center; border:1.5px solid #111; background:#fff; }
.dmg-table input { width:36px; text-align:center; background:none; border:1px solid #999; color:#111; font-family:var(--mono); font-size:11px; padding:1px; -moz-appearance:textfield; }
.dmg-table input::-webkit-inner-spin-button { -webkit-appearance:none; }
.dmg-table input:focus { outline:none; border-color:#111; }
.dmg-table .sp-val { font-weight:bold; }

.item-search { display:flex; gap:6px; margin-bottom:8px; align-items:center; position:relative; }
.item-search input { background:#fff; border:2px solid #111; color:var(--text); font-family:var(--mono); font-size:11px; padding:4px 8px; flex:1; max-width:400px; }
.item-search input:focus { outline:none; border-color:#555; }
.dropdown { position:absolute; top:100%; left:0; width:500px; max-height:250px; overflow-y:auto; background:#fff; border:2px solid #111; z-index:20; display:none; }
.dropdown.open { display:block; }
.dd-item { padding:5px 8px; cursor:pointer; font-size:11px; border-bottom:1px solid #ddd; }
.dd-item:hover { background:var(--bg1); }
.dd-sub { color:var(--text2); font-size:9px; display:block; }

.inv-list { display:flex; flex-direction:column; gap:4px; }
.inv-item { background:#fff; border:2px solid #111; padding:8px 10px; }
.cyber-options-box { margin-top:6px; border:1px solid #ddd; background:#fafafa; }
.cyber-options-head { font-family:var(--head); font-size:9px; letter-spacing:2px; padding:3px 7px; background:#eee; color:#555; border-bottom:1px solid #ddd; }
.opt-item { padding:4px 7px; border-bottom:1px solid #f0f0f0; display:flex; align-items:center; flex-wrap:wrap; gap:3px 6px; font-size:10px; }
.opt-item:last-of-type { border-bottom:none; }
.opt-name { font-family:var(--head); font-size:10px; letter-spacing:0.5px; flex:1; }
.opt-hc { font-size:9px; color:var(--red); }
.opt-remove { margin-left:auto; }
.opt-search { padding:4px 6px; }
.opt-inp { width:100%; background:#fff; border:1px solid #ccc; font-family:var(--mono); font-size:10px; padding:2px 5px; color:#111; }
.opt-inp:focus { outline:none; border-color:#555; }
.cyber-bonuses { margin-top:5px; padding-top:4px; border-top:1px dashed #ccc; display:flex; flex-wrap:wrap; gap:4px 12px; }
.cyber-bonus-line { display:flex; align-items:center; gap:3px; font-size:10px; color:var(--red); font-family:var(--mono); }
.cyber-bonus-input { width:38px; font-family:var(--mono); font-size:10px; border:1px solid #ccc; padding:1px 3px; text-align:center; color:#111; -moz-appearance:textfield; }
.cyber-bonus-input::-webkit-inner-spin-button { -webkit-appearance:none; }
.cyber-bonus-input:focus { outline:none; border-color:#555; }
.inv-top { display:flex; align-items:center; gap:8px; }
.inv-name { font-family:var(--head); font-size:13px; color:#111; font-weight:500; letter-spacing:1px; }
.inv-tags { display:flex; gap:4px; flex-wrap:wrap; flex:1; }
.inv-tag { font-size:9px; color:var(--text2); border:1px solid #111; padding:0 4px; }
.inv-tag-edit { font-size:9px; color:#111; background:#fff; padding:0 3px; border:1px solid #111; font-family:var(--mono); width:auto; min-width:28px; font-weight:bold; }
.inv-tag-edit:focus { outline:none; border-color:#555; }
.inv-tag-label { font-size:8px; color:var(--text2); margin-right:1px; }
.inv-remove { color:var(--red); cursor:pointer; font-size:10px; padding:2px 4px; border:1px solid transparent; margin-left:auto; }
.inv-remove:hover { border-color:var(--red); }
.inv-details { font-size:10px; color:var(--text2); margin-top:4px; line-height:1.5; }
.inv-desc-input { width:100%; background:var(--bg1); border:none; border-bottom:1px solid #999; color:var(--text); font-family:var(--mono); font-size:10px; padding:3px 2px; margin-top:4px; box-sizing:border-box; resize:vertical; min-height:22px; line-height:1.5; }
.inv-desc-input:focus { outline:none; border-bottom-color:#111; }

/* Inventory two-column layout */
.inv-layout { display:flex; gap:16px; align-items:flex-start; }
.inv-col-left  { flex:1; min-width:0; }
.inv-col-right { flex:1; min-width:0; }

/* Inventory sub-section labels */
.inv-subsection-label { font-family:var(--head); font-size:9px; letter-spacing:3px; color:var(--text2); padding:4px 0 3px; border-bottom:1px solid #e0e0e0; margin-bottom:6px; text-transform:uppercase; }

/* Outfit list (Fashion section) */
.outfit-item { display:flex; align-items:center; gap:6px; padding:4px 0; border-bottom:1px solid #f0f0f0; }
.outfit-item:last-child { border-bottom:none; }
.outfit-name { font-family:var(--head); font-size:11px; letter-spacing:0.5px; color:#111; flex:1; }
.outfit-tag  { font-size:9px; color:var(--text2); border:1px solid #ddd; padding:0 4px; }

/* Outfit badge in Inventory containers */
.fashion-badge-outfit { font-size:7px; letter-spacing:1px; background:#111; color:#fff; padding:1px 4px; text-transform:uppercase; }
.fashion-item.fi-outfit { border-color:#888; }

/* Drag handle on gear items */
.drag-handle { color:#bbb; cursor:grab; font-size:14px; user-select:none; line-height:1; }
.drag-handle:active { cursor:grabbing; }

/* ── Gear drop zone ── */
.gear-drop-zone { min-height:32px; }
.gear-drop-zone.drag-active { outline:2px dashed #aaa; background:rgba(0,0,0,0.03); border-radius:2px; }

/* ── Fashion & Storage ── */
#fashion-list { display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.fashion-empty { font-size:10px; color:var(--text2); font-family:var(--mono); padding:6px 2px; }

.fashion-item { border:2px solid #111; background:#fff; position:relative; }
.fi-equip-badge { position:absolute; top:0; left:0; width:16px; height:16px; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:bold; font-family:var(--mono); background:#fff; color:#111; border-right:1px solid #ddd; border-bottom:1px solid #ddd; cursor:pointer; user-select:none; z-index:1; }
.fi-equip-badge.fi-equip-on { background:#111; color:#fff; }
.fashion-item.fi-vehicle { border-color:#555; }
.fashion-badge-vehicle { font-size:7px; letter-spacing:1px; background:#555; color:#fff; padding:1px 4px; text-transform:uppercase; }
.fashion-item.fi-housing { border-color:#4a6; }
.fashion-badge-housing { font-size:7px; letter-spacing:1px; background:#4a6; color:#fff; padding:1px 4px; text-transform:uppercase; }
.fashion-item.fi-outfit-worn { border-color:#3a7bd5; }
.fashion-item.fi-outfit-worn .fashion-head { background:rgba(58,123,213,0.06); }
.fashion-item.fi-outfit-worn .fashion-name { color:#3a7bd5; }
.fashion-item.fi-outfit-worn .fashion-cat { color:#3a7bd5; border-color:#3a7bd5; }
.fashion-item.fi-outfit-worn .slot-pip { border-color:#3a7bd5; }
.fashion-item.fi-outfit-worn .pip-on { background:#3a7bd5; border-color:#3a7bd5; }
.fashion-item.fi-outfit-worn .slot-count { color:#3a7bd5; }
.inv-worn-label { color:#3a7bd5 !important; border-color:#3a7bd5 !important; margin-top:8px; }
.fi-hands-row { display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-bottom:2px; }
.hand-slot { border:2px solid #a86; background:#fff; min-height:60px; padding:6px 8px; display:flex; flex-direction:column; gap:4px; transition:background 0.1s; }
.hand-slot:hover { background:#f9f5f0; }
.hand-slot-full { background:#fff8f0; }
.hand-slot-label { font-size:7px; letter-spacing:1px; text-transform:uppercase; color:#a86; font-family:var(--head); font-weight:bold; }
.hand-placeholder { font-family:var(--mono); font-size:9px; color:#bbb; flex:1; display:flex; align-items:center; }
.hand-item { display:flex; flex-direction:column; gap:2px; flex:1; cursor:grab; }
.hand-item-name { font-family:var(--head); font-size:11px; font-weight:bold; color:#111; letter-spacing:0.5px; }
.hand-item-cat { font-size:8px; letter-spacing:1px; color:#a86; text-transform:uppercase; font-family:var(--mono); }
.hand-item-stat { font-size:9px; font-family:var(--mono); color:var(--text2); }
.hand-item-notes { font-size:9px; font-family:var(--mono); color:var(--text2); font-style:italic; }
.hand-item-rm { font-size:10px; color:#bbb; cursor:pointer; align-self:flex-end; margin-top:auto; }
.hand-item-rm:hover { color:var(--red); }

/* ── Vehicle cards ── */
.veh-card { border:2px solid #111; background:#fff; margin-bottom:6px; }
.veh-header { display:flex; align-items:center; gap:8px; padding:5px 8px; border-bottom:2px solid #111; background:#111; }
.veh-name-inp { font-family:var(--head); font-size:13px; letter-spacing:1px; color:#fff; font-weight:500; flex:1; background:transparent; border:none; outline:none; min-width:0; }
.veh-name-inp::placeholder { color:#666; }
.veh-type-sel { font-size:8px; letter-spacing:1px; text-transform:uppercase; color:#ccc; background:#333; border:1px solid #555; padding:2px 5px; outline:none; cursor:pointer; max-width:120px; }
.veh-type-sel:focus { border-color:#aaa; }
.veh-body { display:flex; }
.veh-photo { width:38%; min-width:0; aspect-ratio:1/1; background:var(--bg1); border-right:2px solid #eee; cursor:pointer; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.veh-photo:hover { background:#e4e4e4; }
.veh-photo img { width:100%; height:100%; object-fit:contain; display:block; }
.veh-photo-ph { font-family:var(--head); font-size:9px; letter-spacing:2px; color:#ccc; }
.veh-right { flex:1; min-width:0; padding:7px 10px 8px; display:flex; flex-direction:column; gap:6px; }

/* stats grid */
.veh-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px 8px; padding:6px 8px; background:#f7f7f7; border:1px solid #e0e0e0; }
.veh-sc { display:flex; align-items:center; gap:3px; }
.veh-sc-text { grid-column:span 1; }
.veh-sc-lbl { font-family:var(--mono); font-size:8px; letter-spacing:1px; text-transform:uppercase; color:#888; min-width:26px; }
.veh-sc-inp { font-family:var(--mono); font-size:11px; color:#111; background:#fff; border:1px solid #ddd; padding:1px 3px; width:44px; text-align:right; }
.veh-sc-inp:focus { border-color:#111; outline:none; }
.veh-sc-suf { font-size:8px; color:#aaa; font-family:var(--mono); }

/* section blocks */
.veh-section { border-top:1px dashed #ddd; padding-top:5px; }
.veh-section-lbl { font-family:var(--head); font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--text2); display:block; margin-bottom:4px; }

/* cargo head */
.veh-cargo-head { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:4px; }
.veh-cargo-cap { font-size:9px; color:var(--text2); font-family:var(--mono); }
.veh-slots-ovr { display:flex; align-items:center; gap:3px; margin-left:auto; }

/* options */
.veh-opts-row { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.veh-opt-chip { font-size:9px; font-family:var(--mono); padding:2px 7px; border-radius:2px; display:inline-flex; align-items:center; gap:3px; cursor:pointer; user-select:none; transition:opacity .1s; }
.veh-opt-db { background:#f0f0f0; color:#999; border:1px solid #ddd; }
.veh-opt-db:hover { background:#e4e4e4; color:#555; }
.veh-opt-db.veh-opt-on { background:#111; color:#fff; border-color:#111; }
.veh-opt-db.veh-opt-weap { background:#f5f0f0; color:#b88; border-color:#e4d4d4; }
.veh-opt-db.veh-opt-weap.veh-opt-on { background:#7a2020; color:#fff; border-color:#7a2020; }
.veh-opt-custom { background:#2a6636; color:#fff; border:1px solid #1a4424; cursor:default; }
.veh-opt-tick { font-size:8px; opacity:.8; }
.veh-opt-count { font-family:var(--mono); font-size:7px; color:#888; letter-spacing:0; text-transform:none; margin-left:4px; }
.veh-opt-rm { cursor:pointer; font-size:8px; color:rgba(255,255,255,.6); line-height:1; }
.veh-opt-rm:hover { color:#fff; }
.veh-opt-inp { font-size:10px; font-family:var(--mono); border:1px dashed #bbb; background:#fff; padding:2px 6px; width:130px; outline:none; }
.veh-opt-inp:focus { border-color:#555; }
.veh-opt-add { font-size:14px; cursor:pointer; color:#888; line-height:1; padding:0 2px; font-weight:bold; }
.veh-opt-add:hover { color:#111; }
.veh-no-opts { font-size:9px; color:#bbb; font-family:var(--mono); font-style:italic; }

.fashion-head { display:flex; align-items:center; gap:8px; padding:6px 10px 4px 22px; flex-wrap:wrap; }
.fashion-name { font-family:var(--head); font-size:12px; letter-spacing:1px; color:#111; font-weight:500; }
.fashion-cat  { font-size:8px; color:var(--text2); border:1px solid #ccc; padding:0 4px; text-transform:uppercase; letter-spacing:1px; }
.fashion-notes { font-size:9px; color:var(--text2); padding:0 10px 4px; font-family:var(--mono); }

/* Slot capacity UI */
.fashion-slots-ui { display:flex; align-items:center; gap:5px; margin-left:auto; }
.slot-pips  { display:flex; gap:2px; flex-wrap:wrap; max-width:120px; }
.slot-pip   { width:7px; height:7px; border:1.5px solid #bbb; background:#f4f4f4; }
.slot-pip.pip-on { background:#111; border-color:#111; }
.slot-bar   { width:80px; height:6px; background:#eee; border:1px solid #ccc; }
.slot-bar-fill { height:100%; background:#111; transition:width 0.2s; }
.slot-count { font-family:var(--mono); font-size:9px; color:var(--text2); white-space:nowrap; }
.slot-count.slot-full { color:var(--red); font-weight:bold; }

/* Contents drop zone */
.fashion-contents {
  min-height:30px;
  padding:4px 8px 6px;
  border-top:1px dashed #ddd;
  display:flex; flex-wrap:wrap; gap:4px;
  align-items:flex-start;
  background:#fafafa;
  transition:background 0.1s;
}
.fashion-contents:hover  { background:#f4f4f4; }
.fashion-contents.fc-full { background:#fff5f5; }
.fc-placeholder { font-family:var(--mono); font-size:9px; color:#bbb; align-self:center; }

/* Stored item chip */
.fci {
  display:inline-flex; align-items:center; gap:4px;
  border:1.5px solid #ccc; background:#fff;
  padding:2px 6px; cursor:grab;
  transition:border-color 0.1s;
}
.fci:hover { border-color:#111; }
.fci:active { cursor:grabbing; }
.fci-name { font-family:var(--head); font-size:9px; letter-spacing:0.5px; color:#111; }
.fci-wt   { font-size:8px; color:var(--text2); font-family:var(--mono); }
.fci-rm   { font-size:9px; color:var(--text2); cursor:pointer; padding:0 2px; }
.fci-rm:hover { color:var(--red); }

/* Expanded detail for stored items */
.fci.fci-open { flex-wrap:wrap; border-color:#555; }
.fci-detail { width:100%; padding:4px 2px 2px; display:flex; flex-wrap:wrap; gap:3px 8px; }
.fci-detail span { font-size:9px; font-family:var(--mono); color:var(--text2); border:1px solid #e0e0e0; padding:0 4px; }
.fci-detail .fci-detail-notes { border:none; color:var(--text2); font-size:9px; flex-basis:100%; }

/* Not stored — red dashed box */
.ns-label { font-family:var(--head); font-size:9px; letter-spacing:3px; color:var(--red); padding:8px 0 3px; text-transform:uppercase; }
#not-stored-box { margin-top:8px; }
.ns-items { min-height:30px; border:2px dashed #c44; background:#fff5f5; padding:6px 8px; display:flex; flex-wrap:wrap; gap:4px; }
.ns-items:empty::after { content:'empty'; font-family:var(--mono); font-size:9px; color:#caa; }
.fci.ns-fci { border-color:#c88; background:#fff8f8; }

.ammo-ctrl { display:flex; align-items:center; gap:2px; }
.abtn { width:20px; height:20px; background:#fff; border:1.5px solid #111; color:#111; cursor:pointer; font-family:var(--mono); font-size:11px; display:flex; align-items:center; justify-content:center; }
.abtn:hover { background:#111; color:#fff; }
.ammo-val { width:28px; text-align:center; font-size:13px; font-weight:bold; }
.ammo-max { color:var(--text2); font-size:10px; }

.armor-piece-locs { display:flex; gap:4px; margin-top:4px; flex-wrap:wrap; }
.armor-piece-locs label { font-size:9px; color:var(--text2); display:flex; align-items:center; gap:2px; cursor:pointer; }
.armor-piece-locs input[type=checkbox] { accent-color:#111; }

/* Fashion & Armor — 3-column layout */
.clothing-layout { display:flex; gap:0; align-items:stretch; }
.clothing-locs { display:flex; gap:4px; margin-top:4px; flex-wrap:wrap; }
.clothing-loc-label { font-size:9px; color:var(--text2); display:flex; align-items:center; gap:2px; cursor:pointer; }
.clothing-loc-label input[type=checkbox] { accent-color:#111; }

/* Body map (left) */
.clothing-bodymap { flex-shrink:0; border-right:2px solid #111; }

/* Equipped clothing (middle) */
.clothing-equipped { flex:1; min-width:0; border-right:2px solid #111; display:flex; flex-direction:column; }
.clothing-equipped-head { font-family:var(--head); font-size:9px; letter-spacing:2px; color:#fff; background:#111; padding:6px 10px; }
#clothing-list { display:flex; flex-direction:column; gap:8px; padding:8px 12px; }

/* Wardrobe sidebar (right) */
.clothing-wardrobe { width:210px; min-width:210px; display:flex; flex-direction:column; background:var(--bg1); }
.wardrobe-head { font-family:var(--head); font-size:9px; letter-spacing:2px; color:#fff; background:#111; padding:5px 8px; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.wd-custom-btn { margin:0 !important; padding:1px 5px !important; font-size:8px !important; }
.wardrobe-search-wrap { position:relative; }
.wardrobe-search { border:none; border-bottom:1px solid #ddd; padding:5px 8px; font-family:var(--mono); font-size:10px; width:100%; box-sizing:border-box; background:#fafafa; }
.wardrobe-search:focus { outline:none; background:#fff; }
.wd-search-results { position:absolute; left:0; right:0; background:#fff; border:1px solid #ccc; border-top:none; z-index:20; max-height:220px; overflow-y:auto; }
.wd-result { padding:4px 8px; cursor:pointer; display:flex; align-items:center; gap:4px; border-bottom:1px solid #f0f0f0; }
.wd-result:hover { background:#f0f0f0; }
#wardrobe-list { flex:1; overflow-y:auto; max-height:560px; }
.wd-item { display:flex; align-items:center; gap:4px; padding:4px 8px; border-bottom:1px solid #f0f0f0; cursor:grab; user-select:none; }
.wd-item:hover { background:#f5f5f5; }
.wd-name { font-family:var(--head); font-size:9px; flex:1; letter-spacing:0.3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wd-tag { font-size:8px; font-family:var(--mono); color:var(--text2); border:1px solid #e0e0e0; padding:0 3px; flex-shrink:0; }
.wd-armor-dot { width:6px; height:6px; background:#555; border-radius:50%; flex-shrink:0; }
.wd-equip-btn { font-size:10px; color:#aaa; cursor:pointer; flex-shrink:0; }
.wd-equip-btn:hover { color:#111; }
.wd-rm { font-size:10px; color:#ccc; cursor:pointer; flex-shrink:0; }
.wd-rm:hover { color:var(--red); }
.wd-empty { font-size:9px; color:#bbb; font-family:var(--mono); padding:10px 8px; }
.wd-no-results { font-size:9px; color:#bbb; font-family:var(--mono); padding:6px 8px; }

/* Outfit tabs */
#outfit-section { display:flex; flex-direction:column; flex:1; min-width:0; }
.outfit-tab-bar { display:flex; align-items:stretch; background:#111; border-bottom:2px solid #000; flex-shrink:0; }
.outfit-tab { display:flex; align-items:center; gap:4px; padding:5px 7px; cursor:pointer; border-right:1px solid #2a2a2a; user-select:none; min-width:0; overflow:hidden; transition:background 0.1s; }
.outfit-tab:hover { background:#1e1e1e; }
.outfit-tab-active { background:#2d2d2d; }
.outfit-tab-e { font-family:var(--head); font-size:8px; letter-spacing:1px; padding:1px 4px; background:#fff; color:#111; cursor:pointer; flex-shrink:0; border:1px solid #fff; transition:background 0.1s, color 0.1s; }
.outfit-tab-e:hover { background:#e0e0e0; }
.outfit-tab-e.outfit-tab-e-on { background:#111; color:#fff; border-color:#555; }
.outfit-tab-name { font-family:var(--head); font-size:9px; letter-spacing:1px; color:#ccc; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.outfit-tab-active .outfit-tab-name { color:#fff; }
.outfit-tab-close { font-size:12px; color:#555; cursor:pointer; flex-shrink:0; line-height:1; padding:0 1px; }
.outfit-tab-close:hover { color:#e55; }
.outfit-tab-add { padding:5px 10px; cursor:pointer; color:#666; font-size:14px; line-height:1; flex-shrink:0; display:flex; align-items:center; }
.outfit-tab-add:hover { color:#fff; background:#1e1e1e; }
.outfit-items { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:8px 12px; }
.outfit-drop-hint { font-family:var(--mono); font-size:10px; color:#bbb; padding:16px 8px; text-align:center; border:1px dashed #ddd; margin:8px 0; }

/* Fashion body map — mirrors .cyber-body-map */
.fashion-body-map { position:relative; width:340px; min-width:340px; height:640px; background:var(--bg1); border:2px solid #111; overflow:hidden; flex-shrink:0; }
.fashion-body-img { position:absolute; top:10px; left:50%; transform:translateX(-50%); height:600px; opacity:0.12; pointer-events:none; }
.fzone { position:absolute; padding:2px 4px; min-width:50px; }
.fzone-label { font-family:var(--head); font-size:7px; color:#111; text-transform:uppercase; letter-spacing:1px; display:block; margin-bottom:1px; opacity:0.45; }
.fzone-items { display:flex; flex-direction:column; gap:1px; }
.fzone-chip { font-size:8px; color:#111; background:rgba(255,255,255,0.88); border:1px solid #111; padding:1px 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px; }
.fzone-head  { top:8px;   left:50%; transform:translateX(-50%); text-align:center; }
.fzone-torso { top:180px; left:50%; transform:translateX(-50%); text-align:center; }
.fzone-rarm  { top:155px; left:2px; }
.fzone-larm  { top:155px; right:2px; text-align:right; }
.fzone-rleg  { top:410px; left:55px; }
.fzone-lleg  { top:410px; right:55px; text-align:right; }

.cyber-body-layout { display:flex; gap:16px; align-items:flex-start; }
.cyber-body-map { position:relative; width:340px; min-width:340px; height:640px; background:var(--bg1); border:2px solid #111; overflow:hidden; flex-shrink:0; }
.body-img { position:absolute; top:10px; left:50%; transform:translateX(-50%); height:600px; opacity:0.12; pointer-events:none; }
.cyber-list-panel { flex:1; min-width:0; }

.body-zone { position:absolute; padding:2px 4px; min-width:50px; }
.body-zone.drag-over { outline:1.5px dashed #111; background:rgba(17,17,17,0.07); }
.zone-label { font-family:var(--head); font-size:7px; color:#111; text-transform:uppercase; letter-spacing:1px; display:block; margin-bottom:1px; opacity:0.45; }
.zone-items { display:flex; flex-direction:column; gap:1px; }
.zone-chip { font-size:8px; color:#111; background:rgba(255,255,255,0.88); border:1px solid #111; padding:1px 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px; cursor:grab; position:relative; }
.zone-chip:hover { background:#fff; border-width:2px; z-index:5; }
.zone-chip:hover .zone-tooltip { display:block; }
.zone-chip.zc-danger { border-color:#c44; border-width:1.5px; }
.zone-chip.zc-safe   { border-color:#5a5; border-width:1.5px; }
.zone-chip[draggable="true"]:active { opacity:0.5; cursor:grabbing; }
.zone-tooltip { display:none; position:absolute; left:100%; top:0; background:#fff; border:2px solid #111; padding:6px 8px; font-size:10px; color:#111; white-space:nowrap; z-index:20; min-width:150px; }
.zone-tooltip .zt-line { color:var(--text2); }

/* Zone positions — body map 340×640, body image 600px tall starting at top:10px */
.zone-cerveau   { top:8px;   left:50%; transform:translateX(-50%); text-align:center; }
.zone-chips     { top:8px;   right:2px; text-align:right; }
.zone-yeux      { top:52px;  left:50%; transform:translateX(-50%); text-align:center; }
.zone-peau      { top:108px; left:50%; transform:translateX(-50%); text-align:center; }
.zone-rarm      { top:155px; left:2px; }
.zone-larm      { top:155px; right:2px; text-align:right; }
.zone-coeur     { top:180px; left:50%; transform:translateX(-50%); text-align:center; }
.zone-centre    { top:228px; left:50%; transform:translateX(-50%); text-align:center; }
.zone-forearm-r { top:272px; left:2px; }
.zone-forearm-l { top:272px; right:2px; text-align:right; }
.zone-rhand     { top:330px; left:2px; }
.zone-lhand     { top:330px; right:2px; text-align:right; }
.zone-frame     { top:368px; left:50%; transform:translateX(-50%); text-align:center; }
.zone-rleg      { top:410px; left:55px; }
.zone-lleg      { top:410px; right:55px; text-align:right; }
.zone-rfoot     { top:548px; left:55px; }
.zone-lfoot     { top:548px; right:55px; text-align:right; }

.notes-area { width:100%; min-height:150px; background:#fff; border:2px solid #111; color:var(--text); font-family:var(--mono); font-size:12px; padding:8px; resize:vertical; }
.notes-area:focus { outline:none; border-color:#555; }

/* ════════════════════════════════════════
   LIFESTYLE
   ════════════════════════════════════════ */
.lifestyle-grid { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:2px; background:#111; border:2px solid #111; }

/* quadrants */
.ls-quad { background:#fff; padding:12px 14px; display:flex; flex-direction:column; gap:6px; }
.ls-quad-cash { grid-row:1/3; grid-column:1; overflow-y:auto; }
.ls-q-head { font-family:var(--head); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#111; border-bottom:2px solid #111; padding-bottom:5px; margin-bottom:2px; display:flex; align-items:center; gap:6px; }

/* common */
.ls-lbl  { font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:1px; color:#888; min-width:42px; }
.ls-suf  { font-size:9px; color:#aaa; font-family:var(--mono); }
.ls-rm   { cursor:pointer; font-size:10px; color:#bbb; padding:0 2px; line-height:1; flex-shrink:0; }
.ls-rm:hover { color:#c33; }
.ls-add-btn { cursor:pointer; font-size:14px; color:#888; font-weight:bold; line-height:1; flex-shrink:0; }
.ls-add-btn:hover { color:#111; }
.ls-arr  { font-size:9px; color:#999; margin-left:auto; cursor:pointer; }
.ls-empty { font-size:10px; color:#bbb; font-family:var(--mono); font-style:italic; }

/* ── BANK STATEMENT (Cash quadrant) ── */
.ls-bank-head { background:#111; color:#fff; padding:10px 12px; margin:-12px -14px 4px; display:flex; align-items:flex-end; gap:8px; }
.ls-bank-label { font-family:var(--mono); font-size:8px; letter-spacing:2px; text-transform:uppercase; color:#888; flex:1; }
.ls-bank-total { font-family:var(--mono); font-size:22px; font-weight:bold; color:#fff; line-height:1; }
.ls-bank-cur { font-size:11px; color:#888; }
.ls-eom-btn { background:none; border:1px solid #444; color:#aaa; font-size:13px; cursor:pointer; padding:3px 7px; margin-left:auto; align-self:center; flex-shrink:0; }
.ls-eom-btn:hover { border-color:#fff; color:#fff; }
.ls-bank-footer { margin-top:auto; padding-top:8px; border-top:1px solid #eee; display:flex; justify-content:space-between; align-items:center; }
.ls-bank-out-lbl { font-family:var(--mono); font-size:8px; text-transform:uppercase; letter-spacing:1px; color:#aaa; }
.ls-bank-out-val { font-family:var(--mono); font-size:11px; color:#c44; }

/* ledger rows */
.ls-ledger-group { border:1px solid #eee; margin-bottom:2px; }
.ls-ledger-group-head { display:flex; align-items:center; gap:6px; padding:5px 8px; background:#f7f7f7; cursor:pointer; }
.ls-ledger-group-head:hover { background:#efefef; }
.ls-ledger-cat { font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:1px; color:#666; flex:1; }
.ls-ledger-subtotal { font-family:var(--mono); font-size:10px; color:#333; }
.ls-ledger-row { display:flex; align-items:center; gap:6px; padding:5px 8px; border-bottom:1px solid #f5f5f5; }
.ls-ledger-row:last-child { border-bottom:none; }
.ls-ledger-right { display:flex; align-items:center; gap:4px; margin-left:auto; }
.ls-ledger-amt  { font-family:var(--mono); font-size:11px; color:#111; background:#f7f7f7; border:1px solid #ddd; padding:2px 5px; width:80px; text-align:right; }
.ls-ledger-amt:focus { outline:none; border-color:#111; background:#fff; }
.ls-ledger-cur  { font-family:var(--mono); font-size:9px; color:#aaa; }
.ls-salary-row  { background:#f9fff9; }
.ls-salary-btn  { background:#1a6620; border:none; color:#fff; font-size:13px; font-weight:bold; cursor:pointer; padding:1px 8px; line-height:1.4; }
.ls-salary-btn:hover { background:#23882a; }

/* credchips */
.ls-cc-list { padding:4px 8px 6px; background:#fafafa; display:flex; flex-direction:column; gap:3px; }
.ls-cc-item { background:#fff; }
.ls-cc-name { font-family:var(--mono); font-size:10px; border:1px solid #ddd; background:#fff; padding:2px 5px; flex:1; min-width:0; }
.ls-cc-addrow .ls-cc-name { border-style:dashed; }

/* housing */
.ls-housing-card { border:1px solid #e0e0e0; margin-bottom:5px; }
.ls-housing-head { display:flex; align-items:center; gap:6px; padding:5px 8px; background:#111; }
.ls-housing-name { font-family:var(--head); font-size:12px; color:#fff; background:transparent; border:none; outline:none; flex:1; letter-spacing:1px; min-width:0; }
.ls-housing-type { font-size:8px; color:#ccc; background:#333; border:1px solid #555; padding:2px 4px; max-width:110px; outline:none; cursor:pointer; }
.ls-housing-body { padding:8px 10px; display:flex; flex-direction:column; gap:5px; }
.ls-hrow { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ls-short-inp { font-family:var(--mono); font-size:11px; border:1px solid #ddd; background:#f7f7f7; padding:2px 4px; width:52px; text-align:right; }
.ls-short-inp:focus { outline:none; border-color:#111; background:#fff; }
.ls-owned-badge { font-family:var(--head); font-size:8px; letter-spacing:2px; text-transform:uppercase; background:#111; color:#fff; padding:2px 7px; }
.ls-owned-lbl { font-size:9px; color:#888; display:flex; align-items:center; gap:3px; cursor:pointer; margin-left:auto; font-family:var(--mono); }
.ls-loc-inp { font-family:var(--mono); font-size:10px; border:1px solid #ddd; background:#f7f7f7; padding:2px 5px; flex:1; min-width:0; }
.ls-loc-inp:focus { outline:none; border-color:#111; background:#fff; }
.ls-housing-desc { width:100%; min-height:36px; font-family:var(--mono); font-size:10px; border:1px dashed #ddd; background:#fafafa; padding:4px 6px; resize:vertical; box-sizing:border-box; }
.ls-housing-desc:focus { outline:none; border-color:#888; }

/* utilities */
.ls-util-section { display:flex; flex-direction:column; gap:3px; }
.ls-sub-head { display:flex; align-items:center; gap:6px; }
.ls-sub-lbl { font-family:var(--head); font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--text2); }
.ls-util-total { font-family:var(--mono); font-size:9px; color:#888; margin-left:4px; }
.ls-util-row { display:flex; align-items:center; gap:5px; }
.ls-util-name { font-family:var(--mono); font-size:10px; border:1px solid #eee; background:#fff; padding:2px 5px; flex:1; min-width:0; }
.ls-util-cost { font-family:var(--mono); font-size:10px; border:1px solid #eee; background:#fff; padding:2px 4px; width:58px; text-align:right; }
.ls-util-name:focus, .ls-util-cost:focus { outline:none; border-color:#888; }

/* housing cargo */
.ls-cargo-toggle { display:flex; align-items:center; gap:8px; padding:4px 0; cursor:pointer; border-top:1px dashed #ddd; margin-top:2px; }
.ls-cargo-toggle:hover .ls-sub-lbl { color:#111; }
.ls-cargo-info { font-family:var(--mono); font-size:9px; color:#aaa; }
.ls-cargo-body { padding-top:4px; }
.ls-cargo-chips { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:5px; }
.ls-cargo-chip { font-family:var(--mono); font-size:9px; background:#f0f0f0; border:1px solid #ddd; padding:2px 6px; display:inline-flex; align-items:center; gap:4px; }
.ls-cargo-add { display:flex; align-items:center; gap:5px; }
.ls-cargo-inp { font-family:var(--mono); font-size:10px; border:1px dashed #bbb; padding:2px 6px; flex:1; outline:none; }
.ls-cargo-inp:focus { border-color:#555; }

/* services */
.ls-svc-row { display:flex; align-items:center; gap:6px; padding:3px 0; border-bottom:1px solid #f0f0f0; }
.ls-svc-name { font-family:var(--mono); font-size:10px; color:#333; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ls-svc-cost { font-family:var(--mono); font-size:10px; border:1px solid #eee; background:#fff; padding:2px 4px; width:60px; text-align:right; }
.ls-svc-cost:focus { outline:none; border-color:#888; }
.ls-svc-total { font-family:var(--mono); font-size:10px; color:#555; text-align:right; padding-top:6px; border-top:1px solid #eee; margin-top:4px; }

/* groceries */
.ls-groc-row { display:flex; align-items:center; gap:5px; padding:4px 0; border-bottom:1px solid #f0f0f0; flex-wrap:wrap; }
.ls-groc-lbl { font-size:10px; color:#555; font-weight:bold; }
.ls-groc-sel { font-family:var(--mono); font-size:9px; border:1px solid #ddd; background:#f7f7f7; padding:2px 4px; outline:none; cursor:pointer; }
.ls-groc-sel:focus { border-color:#888; }
.ls-groc-x { font-size:9px; color:#aaa; }
.ls-groc-cost { font-family:var(--mono); font-size:10px; color:#555; margin-left:auto; }